/* ============================================================
   CONTROL HOUSE — página de trabajos en formato reel
   ============================================================ */
html,body{height:100%; overflow:hidden; background:#000}
.rl-app{position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; background:#000}

/* barra superior, flotando sobre el video */
.rl-barra{position:absolute; top:0; left:0; right:0; z-index:20; display:flex; align-items:center;
  justify-content:space-between; gap:12px; padding:max(10px, env(safe-area-inset-top)) 16px 10px;
  background:linear-gradient(rgba(0,0,0,.55), transparent); pointer-events:none}
.rl-barra > *{pointer-events:auto}
.rl-logo{display:flex; align-items:center; gap:8px; color:#fff; text-decoration:none; min-height:44px}
.rl-logo img{height:26px; width:auto}
.rl-logo b{font-size:13px; font-weight:500}
.rl-tit{font-family:'Fraunces',Georgia,serif; font-weight:300; font-size:18px; color:#fff}
.rl-cerrar{color:rgba(255,255,255,.85); font-size:13px; text-decoration:none; min-height:44px;
  display:inline-flex; align-items:center}

/* la lista: un reel por pantalla, encaja al deslizar */
.rl-lista{height:100%; width:100%; max-width:480px; overflow-y:auto; scroll-snap-type:y mandatory;
  overscroll-behavior-y:contain; scrollbar-width:none}
.rl-lista::-webkit-scrollbar{display:none}
.rl{position:relative; height:100%; height:100dvh; scroll-snap-align:start; scroll-snap-stop:always;
  overflow:hidden; background:#000}
.rl-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; cursor:pointer}
.rl-sombra{position:absolute; left:0; right:0; bottom:0; height:46%; pointer-events:none;
  background:linear-gradient(transparent, rgba(0,0,0,.78))}

/* texto abajo a la izquierda */
.rl-info{position:absolute; left:16px; right:92px; bottom:max(26px, calc(env(safe-area-inset-bottom) + 18px));
  color:#fff; pointer-events:none}
.rl-tipo{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#A9B8DA; font-weight:600}
.rl-info h2{font-family:'Fraunces',Georgia,serif; font-weight:300; font-size:30px; line-height:1.08;
  letter-spacing:-.02em; margin:8px 0 6px; text-shadow:0 1px 12px rgba(0,0,0,.6)}
.rl-info p{font-size:15px; line-height:1.45; color:rgba(255,255,255,.9); text-shadow:0 1px 10px rgba(0,0,0,.6)}
.rl-proy{display:inline-block; margin-top:10px; font-size:12.5px; color:rgba(255,255,255,.7)}

/* botones a la derecha */
.rl-acciones{position:absolute; right:10px; bottom:max(28px, calc(env(safe-area-inset-bottom) + 20px));
  display:flex; flex-direction:column; align-items:center; gap:18px; z-index:5}
.rl-btn{display:flex; flex-direction:column; align-items:center; gap:4px; min-width:64px; min-height:56px;
  background:none; border:0; padding:0; color:#fff; font:inherit; font-size:11px; text-decoration:none;
  cursor:pointer; text-shadow:0 1px 8px rgba(0,0,0,.6); -webkit-tap-highlight-color:transparent}
.rl-btn svg{width:30px; height:30px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round;
  stroke-linejoin:round; filter:drop-shadow(0 1px 6px rgba(0,0,0,.5))}
.rl-quiero svg{fill:#fff; stroke:none}
.rl-quiero{color:#fff}
.rl-quiero span{background:#25D366; color:#062b14; font-weight:600; padding:3px 8px; border-radius:99px; text-shadow:none}
.rl-like[aria-pressed="true"] svg{fill:#FF3B5C; stroke:#FF3B5C}
.rl-like.pop svg{animation:rl-pop .45s cubic-bezier(.2,.9,.3,1.4)}
@keyframes rl-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.rl-n{font-size:12px; font-weight:600}
.rl-sonido .ico-sonido{display:none}
.rl-sonido[aria-pressed="true"] .ico-sonido{display:block}
.rl-sonido[aria-pressed="true"] .ico-mudo{display:none}

.rl-pista{position:absolute; left:0; right:0; top:44%; text-align:center; color:#fff; font-size:13px;
  opacity:0; animation:rl-pista 3.2s ease 1.2s 1 both; pointer-events:none; text-shadow:0 1px 10px rgba(0,0,0,.8)}
@keyframes rl-pista{0%{opacity:0; transform:translateY(10px)}25%,70%{opacity:1; transform:none}100%{opacity:0; transform:translateY(-14px)}}

/* última pantalla: pedir visita */
.rl-fin{display:flex; align-items:center; justify-content:center; background:var(--fondo, #0C0F14)}
.rl-fin-txt{padding:0 26px; display:flex; flex-direction:column; gap:14px; color:var(--texto)}
.rl-fin-txt h2{font-family:'Fraunces',Georgia,serif; font-weight:200; font-size:38px; line-height:1.05; letter-spacing:-.03em}
.rl-fin-txt p{color:var(--texto-2); margin-bottom:8px}
.rl-fin-txt .btn{justify-content:center}

.rl-aviso{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:30;
  background:rgba(0,0,0,.78); color:#fff; padding:10px 16px; border-radius:10px; font-size:14px}

/* en la compu: columna tipo teléfono con bordes redondeados */
@media (min-width:700px){
  .rl-app{background:radial-gradient(ellipse at center, #141922 0%, #000 70%)}
  .rl-lista{height:calc(100% - 32px); margin-top:16px; border-radius:22px; border:1px solid #212836}
  .rl{height:calc(100vh - 32px)}
  .rl-barra{max-width:480px; left:50%; transform:translateX(-50%); top:16px; border-radius:22px 22px 0 0}
}
@media (prefers-reduced-motion:reduce){ .rl-pista,.rl-like.pop svg{animation:none} }