/* ============================================================
   SECCIONES: hero, servicios, catalogo, nosotros, contacto
   ============================================================ */

/* ---------- HERO ---------- */
.hero{position:relative;height:500vh;z-index:2}
.escenario{position:sticky;top:0;height:100vh;overflow:hidden;background:#000}
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .8s var(--suave);will-change:transform;transform:translateZ(0)}
.escenario.video-listo #video{opacity:1}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1s var(--suave)}
.poster.visible{opacity:1}
/* Con el video ya cargado, el póster se aparta: va DESPUÉS del video en
   el HTML, así que si se queda encendido tapa el video y la casa parece
   congelada por más que uno scrollee. Si el video falla, la clase
   video-listo nunca llega y el póster se queda como respaldo. */
.escenario.video-listo .poster{opacity:0}
.velo{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(0,0,0,0) 34%,rgba(0,0,0,.66) 100%)}
.escenario::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26vh;
  pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.92))}

.anillo{position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);width:44px;height:44px;
  color:var(--acento);opacity:.85;z-index:6;transition:opacity .5s var(--suave)}
.anillo circle{transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset .12s linear}
.escenario.video-listo .anillo,.escenario.video-caido .anillo{opacity:0;pointer-events:none}

.pista{position:absolute;left:50%;bottom:7vh;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--beige);
  opacity:0;transition:opacity .8s var(--suave)}
.escenario.video-listo .pista,.escenario.video-caido .pista{opacity:.72}
.pista span{display:block;width:1px;height:34px;
  background:linear-gradient(to bottom,var(--acento),transparent);
  animation:pistaFluye 3.4s var(--suave-2) -1.2s infinite}
@keyframes pistaFluye{
  0%{transform:scaleY(.2);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* bandas de texto sobre el video */
.banda{position:absolute;inset:0;z-index:5;display:grid;align-items:center;
  padding:0 var(--margen);opacity:0;pointer-events:none}
.banda::before{content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 62% at var(--foco,50%) 50%,
    rgba(0,0,0,.70) 0%,rgba(0,0,0,.46) 46%,rgba(0,0,0,0) 76%)}
.banda-caja{position:relative;z-index:2;max-width:var(--ancho-max);width:100%;margin:0 auto;
  text-shadow:var(--sombra-texto)}
.banda-izq .banda-caja{text-align:left}
.banda-centro .banda-caja{text-align:center}
.antetitulo{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--acento);margin-bottom:18px}
.banda-titulo{font-size:clamp(2.4rem,6.4vw,5.6rem);font-weight:800;letter-spacing:-.03em}
.banda-bajada{margin-top:20px;color:var(--texto-2);font-size:clamp(1rem,1.5vw,1.22rem);
  max-width:46ch}
.banda-centro .banda-bajada{margin-left:auto;margin-right:auto}
.banda-acciones{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;pointer-events:auto}
.banda-centro .banda-acciones{justify-content:center}
.banda .boton{text-shadow:none}

/* palabras partidas por SplitText */
.banda-titulo .palabra{display:inline-block;will-change:transform,opacity}
.banda-titulo .letra{display:inline-block;will-change:transform,opacity}

/* ---------- HERO FIJO ---------- */
.hero-fijo{display:none;position:relative;z-index:5;height:100%;align-content:center;
  padding:calc(72px + var(--margen)) var(--margen) var(--margen)}
.hero-fijo h1{font-size:clamp(2.6rem,11vw,4.4rem);font-weight:800;letter-spacing:-.03em;
  text-shadow:var(--sombra-texto)}
.hero-fijo-bajada{margin-top:18px;color:var(--texto-2);max-width:34ch;
  text-shadow:0 1px 10px rgba(0,0,0,.9)}

/* ============================================================
   LAS CINCO COMPUERTAS DEL HERO FIJO.
   Identicas, caracter por caracter, al arreglo COMPUERTAS
   de assets/js/modulos/movimiento.js
   ============================================================ */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .escenario{position:relative;height:100svh;min-height:540px;
    background-image:url('../video/hero-ending.jpg');
    background-size:cover;background-position:center}
  .banda,.anillo,.pista,#video,.poster{display:none!important}
  .hero-fijo{display:grid}
}
@media (max-height:560px){.pista,.anillo{display:none}}

/* ------------------------------------------------------------
   El hero siempre vive sobre el video nocturno, así que su texto
   va en claro aunque el resto del sitio sea blanco. Se redefinen
   los tokens solo dentro del escenario: todo lo que ya usaba
   var(--texto) o var(--texto-2) se acomoda solo.
   ------------------------------------------------------------ */
.escenario{
  --texto:#ffffff;
  --texto-2:rgba(255,255,255,.88);
  --beige:rgba(255,255,255,.72);
  --linea-fuerte:rgba(255,255,255,.5);
  color:#ffffff;
}
.escenario .antetitulo{color:var(--acento-claro)}
.escenario .anillo{color:var(--acento-claro)}
.escenario .pista span{background:linear-gradient(to bottom,var(--acento-claro),transparent)}
.escenario .boton-linea:hover{border-color:var(--acento-claro);color:var(--acento-claro)}

/* ---------- CONTENIDO PRINCIPAL ---------- */
main{position:relative;z-index:3;background:var(--fondo)}

/* elemento firma: la linea de plomada */
.plomada{position:absolute;left:calc(var(--margen) * .5);top:0;bottom:0;width:1px;
  background:var(--linea);z-index:1;pointer-events:none}
.plomada::after{content:"";position:absolute;left:0;top:0;width:1px;
  height:calc(var(--avance,0) * 100%);
  background:linear-gradient(to bottom,var(--acento),rgba(30,119,187,.25));
  box-shadow:0 0 12px rgba(30,119,187,.55)}
@media (max-width:900px){.plomada{display:none}}

/* ---------- SERVICIOS ---------- */
.servicios{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);
  margin-top:56px}
@media (max-width:900px){.servicios{grid-template-columns:1fr}}

/* ---------- CATALOGO ---------- */
.catalogo-cabecera{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,4vw,64px);align-items:end}
@media (max-width:900px){.catalogo-cabecera{grid-template-columns:1fr;align-items:start}}
.catalogo-cabecera .bajada{margin-top:0}

/* ---------- NOSOTROS ---------- */
.nosotros{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);
  align-items:center}
@media (max-width:900px){.nosotros{grid-template-columns:1fr}}

.sostener{position:relative;border:1px solid var(--linea);background:var(--superficie);
  padding:clamp(26px,3vw,40px);user-select:none;-webkit-user-select:none;
  touch-action:manipulation;cursor:pointer}
.sostener-barra{position:absolute;left:0;top:0;width:2px;height:100%;background:var(--linea)}
.sostener-barra i{position:absolute;left:0;top:0;width:2px;background:var(--acento);
  height:calc(var(--sost,0) * 100%);box-shadow:0 0 14px rgba(30,119,187,.6)}
.sostener-rotulo{position:relative;height:1.4em}
.sostener-pista,.sostener-listo{position:absolute;left:0;top:0;font-size:.72rem;
  letter-spacing:.24em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.sostener-pista{color:var(--beige);opacity:calc(1 - var(--sost,0))}
.sostener-listo{color:var(--acento);opacity:var(--sost,0)}
.pilares{margin-top:22px;display:grid;gap:2px}
.pilar{--luz:clamp(0,(var(--sost,0) - var(--umbral,0)) * 5,1);
  padding:18px 0;border-bottom:1px solid var(--linea);
  opacity:calc(.28 + .72 * var(--luz));
  transform:translateY(calc((1 - var(--luz)) * 8px))}
.pilar:last-child{border-bottom:0}
.pilar h4{font-size:1.1rem;color:var(--texto)}
.pilar h4::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--acento);margin-right:10px;vertical-align:middle;
  opacity:var(--luz);box-shadow:0 0 10px rgba(30,119,187,.7)}
.pilar p{margin-top:6px;color:var(--texto-2);font-size:.94rem;max-width:40ch}

/* ---------- CONTACTO ---------- */
.contacto{max-width:760px;margin:0 auto;text-align:center}
.contacto .titulo-2{font-size:clamp(2.2rem,5vw,3.8rem)}

/* ---------- ENTRADAS ---------- */
.rv,.rv-hijo{opacity:0}
.pinado .rv,.pinado .rv-hijo{opacity:1;transform:none}

/* ============================================================
   OBRA — segundo acto con scroll
   Mismo mecanismo que el hero: el video avanza con el scroll y
   retrocede al subir. Vive dentro de #principal pero se descuenta
   del calculo de alto del hero, asi el hero sigue midiendo lo que
   mide el contenido de verdad y no se dispara por este tramo.
   ============================================================ */
.obra{position:relative;height:480vh;z-index:1}
.obra-escena{position:sticky;top:0;height:100vh;overflow:hidden;background:#0b1622;
  --texto:#ffffff;--texto-2:rgba(255,255,255,.88);color:#fff}
#obra-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .8s var(--suave);will-change:transform;transform:translateZ(0)}
.obra-escena.video-listo #obra-video{opacity:1}
.obra-poster{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1s var(--suave)}
.obra-poster.visible{opacity:1}
.obra-escena.video-listo .obra-poster{opacity:0}
.obra-velo{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 92% at 50% 45%,rgba(0,0,0,0) 36%,rgba(0,0,0,.62) 100%)}

/* el borde de arriba y el de abajo se funden con el blanco del sitio,
   asi el tramo no se ve como un recuadro pegado en medio de la pagina */
/* Arriba no va ningun fundido: el video tiene que llegar hasta el
   borde y quedar detras de la barra del menu, que ahi se vuelve
   transparente. Abajo si, para entregar el paso al blanco del sitio. */
.obra-escena::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:11vh;pointer-events:none;z-index:4;
  background:linear-gradient(to top,var(--fondo) 0%,rgba(255,255,255,.30) 48%,rgba(255,255,255,0) 100%)}

.obra-banda{position:absolute;inset:0;z-index:5;display:grid;align-items:center;
  padding:0 var(--margen);opacity:0;pointer-events:none}
.obra-banda::before{content:"";position:absolute;inset:-4%;pointer-events:none;
  background:radial-gradient(ellipse 72% 60% at var(--foco,50%) 50%,
    rgba(0,0,0,.66) 0%,rgba(0,0,0,.42) 46%,rgba(0,0,0,0) 76%)}
.obra-caja{position:relative;z-index:2;max-width:var(--ancho-max);width:100%;margin:0 auto;
  text-shadow:var(--sombra-texto)}
.obra-banda-centro .obra-caja{text-align:center}
.obra-escena .antetitulo{color:var(--acento-claro)}
.obra-titulo{font-size:clamp(2.1rem,5.4vw,4.6rem);font-weight:800;letter-spacing:-.03em;
  color:#fff}
.obra-bajada{margin-top:20px;color:var(--texto-2);font-size:clamp(1rem,1.5vw,1.18rem);
  max-width:46ch;margin-left:auto;margin-right:auto}
.obra-titulo .palabra{display:inline-block;will-change:transform,opacity}

/* Mismas compuertas del hero: en telefono, tablet vertical o con el
   movimiento reducido activado, el tramo se vuelve una sola pantalla
   fija con la imagen final. Nada de scroll secuestrado ahi. */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .obra{height:auto}
  .obra-escena{position:relative;height:auto;min-height:86svh;
    background-image:url('../video/obra-ending.jpg');
    background-size:cover;background-position:center;
    display:grid;align-content:center;padding:18vh var(--margen)}
  #obra-video,.obra-poster{display:none!important}
  .obra-banda{position:relative;inset:auto;opacity:1;padding:0}
  .obra-banda::before{display:none}
  .obra-banda + .obra-banda{margin-top:44px}
  .obra-banda-centro .obra-caja{text-align:left}
  .obra-escena::after{display:none}
}


/* ---------- OBRA: los tres servicios sobre el video ---------- */
.marcador{display:block;position:absolute;top:0;height:0;width:0;overflow:hidden}

.obra-servicios{position:absolute;inset:0;z-index:5;display:grid;align-items:center;
  padding:0 var(--margen);pointer-events:none}
.obra-servicios::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.42) 52%,rgba(0,0,0,.10) 100%);
  opacity:var(--velo-servicios,0)}
.obra-servicios-caja{position:relative;z-index:2;max-width:var(--ancho-max);width:100%;margin:0 auto}
.obra-servicios-titulo{font-size:clamp(1.9rem,4.2vw,3.4rem);font-weight:800;letter-spacing:-.03em;
  color:#fff;text-shadow:var(--sombra-texto);margin-bottom:34px}

.obra-fila{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.obra-ficha{position:relative;padding:26px 24px 28px;
  background:rgba(12,20,30,.56);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  color:#fff}
.obra-ficha .icono{width:34px;height:34px;color:var(--acento-claro)}
.obra-ficha .numero{margin-top:18px;font-size:.74rem;letter-spacing:.3em;
  color:rgba(255,255,255,.58)}
.obra-ficha h3{margin-top:10px;font-size:1.32rem;font-weight:700;letter-spacing:-.01em}
.obra-ficha p{margin-top:12px;font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.84)}

/* cada capa entra sola, movida por el scroll desde obra.js */
.obra-capa{opacity:0;transform:translateY(38px);will-change:transform,opacity}

@media (max-width:1040px){
  .obra-fila{grid-template-columns:1fr;gap:14px}
  .obra-ficha{padding:18px 20px 20px}
  .obra-ficha p{font-size:.9rem}
  .obra-servicios-titulo{margin-bottom:22px}
}

/* En telefono, tablet vertical o con movimiento reducido el tramo es
   estatico: las tres fichas se ven de una, sin depender del scroll. */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .obra-servicios{position:relative;inset:auto;padding:0;margin-top:52px}
  .obra-servicios::before{display:none}
  .obra-capa{opacity:1!important;transform:none!important}
  .obra-fila{grid-template-columns:1fr}
}