/* =========================================================================
   LAS CORTADERAS — estilos del Home
   Hero galería + bento + contacto en vidrio
   ========================================================================= */

/* El tono del header (vidrio translúcido + contenido claro/oscuro según el
   fondo por el que pasa) se maneja de forma global en styles.css con la clase
   .over-dark, que alterna site.js. */

/* ---------- HERO · foto enmarcada a pantalla completa ---------- */
.hero-frame{
  position:relative;height:100svh;min-height:620px;
  padding:0 var(--frame) var(--frame);
}
.hero-frame .hero-stage{
  position:relative;height:100%;border-radius:0 0 var(--radius-xl) var(--radius-xl);overflow:hidden;
  isolation:isolate;
  /* Fondo oscuro bajo las fotos: si la portada aún no pintó (p. ej. al llegar
     por la transición de marca, con el telón verde fundiéndose), nunca se asoma
     el crema del body → evita el "microcorte" claro antes de aparecer la foto. */
  background:var(--noche-profunda);
}
/* Carrusel de portada: 5 capas apiladas. SOLO la activa se ve (opacity 1, por
   encima). Las demás quedan en opacity 0 debajo. Una sola clase (.is-active)
   manda; sin zoom, sin paneos, sin estados intermedios. Mecanismo a prueba de
   balas: la entrante sube por encima y tapa a la saliente que baja, así no hay
   hueco oscuro ni dependemos de timers para limpiar nada. */
.hero-slides{position:absolute;inset:0;z-index:0;}
.hero-slide{
  /* display:block es IMPRESCINDIBLE: .hero-slide es un <picture> y la regla
     global `picture{display:contents}` lo dejaría sin caja → se ignorarían
     opacity/z-index/position y se verían las 5 fotos apiladas (ganaba la última
     del DOM = la 5, el bug de "se queda fija en la foto 5"). */
  display:block;
  position:absolute;inset:0;opacity:0;z-index:0;
  transition:opacity 800ms ease-in-out;
}
.hero-slide.is-active{opacity:1;z-index:1;}   /* la única visible, por encima */
.hero-stage .hero-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;
  filter:var(--img-mood);
}
/* la escena de día viene muy clara y saturada: la atemperamos apenas para que
   conviva con las nocturnas, pero sin crushear el brillo (antes .78 la apagaba).
   Mismo velo sepia que el grado base para que el set se sienta de una pieza. */
.hero-slide--day .hero-photo{filter:saturate(.95) contrast(1.04) brightness(.92) sepia(.05);}
/* velos para legibilidad */
.hero-stage::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(28,36,16,.3) 0%,rgba(28,36,16,.02) 34%,rgba(28,36,16,.12) 62%,rgba(28,36,16,.66) 100%);}
.hero-stage::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(90% 60% at 18% 96%, rgba(22,30,11,.42), transparent 60%);}

/* contenido del hero */
.hero-inner{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(24px,4vw,56px);
}
/* dateline editorial del hero: hairline dorada + topónimo en cursiva serif
   (misma voz que los .eyebrow del sitio) + geografía en sans fina. Reemplaza
   el viejo kicker en versalitas-tracking, que delataba plantilla. */
.hero-headline{display:flex;flex-direction:column;align-items:flex-start;}
.hero-kicker{
  display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.2em .7em;
  margin-top:clamp(18px,2.6vh,30px);
  opacity:0;transform:translateY(12px);
}
.hero-kicker .hk-main{
  font-family:var(--body);font-weight:600;
  font-size:clamp(13.5px,1.15vw,16px);line-height:1;letter-spacing:.015em;
  color:rgba(248,247,238,.96);
  text-shadow:0 1px 2px rgba(12,18,6,.6),0 2px 12px rgba(12,18,6,.5);
}
.hero-kicker .hk-geo{
  position:relative;padding-left:1em;
  font-family:var(--body);font-weight:500;
  font-size:clamp(10.5px,.92vw,12px);letter-spacing:.05em;
  color:rgba(248,247,238,.82);
  text-shadow:0 1px 2px rgba(12,18,6,.65),0 1px 12px rgba(12,18,6,.6),0 0 22px rgba(12,18,6,.5);
}
.hero-kicker .hk-geo::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:1em;background:rgba(210,186,152,.5);
}
.loaded .hero-kicker{opacity:1;transform:none;transition:opacity .9s var(--ease) .8s,transform .9s var(--ease) .8s;}

.hero-grid{
  display:grid;grid-template-columns:1.5fr 1fr;align-items:end;
  gap:clamp(24px,4vw,72px);
}
.hero-title{
  font-family:var(--display);font-weight:380;color:#fff;
  font-size:clamp(48px,7.2vw,108px);line-height:.98;letter-spacing:-.025em;
  text-shadow:0 4px 50px rgba(22,30,11,.4);
}
.hero-title em{font-style:italic;font-weight:340;color:var(--dorado-claro);}
/* reveal por línea enmascarada */
.hero-title .hl{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;}
.hero-title .hl>span,.hero-title .hl>em{display:inline-block;transform:translateY(112%);}
.loaded .hero-title .hl>span,.loaded .hero-title .hl>em{
  transform:none;transition:transform 1.35s var(--ease-out);
  transition-delay:calc(.45s + var(--li,0)*.16s);
}

/* bloque de apoyo asentado en la esquina inferior derecha: párrafo + CTAs
   agrupados como una unidad, alineados con la base del título y la barra. */
.hero-side{
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  gap:clamp(16px,1.5vw,20px);padding-bottom:2px;
  /* baja el párrafo + los CTAs para acercarlos a la barra de datos del pie del
     hero (antes quedaban ~78px por encima). Es desplazamiento de layout, no
     animación, así que se mantiene con reduced-motion. Se anula en una columna
     (móvil) más abajo.
     OJO: el valor anterior (-5vh, hasta -44px) empujaba el botón ~22px POR DEBAJO
     del tope de la barra; como la barra es vidrio (backdrop-filter → contexto de
     apilado propio) y va después en el DOM, tapaba el CTA. Este valor deja el
     botón siempre 6–10px POR ENCIMA de la barra en todo el rango ≥981px. */
  margin-bottom:clamp(-14px,-1.4vh,-6px);
}
.hero-side p{
  color:rgba(248,247,238,.92);font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.58;
  max-width:40ch;text-shadow:0 2px 24px rgba(22,30,11,.45);
}
.hero-anim{opacity:0;transform:translateY(24px);}
.loaded .hero-anim{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease);}
.loaded .hero-anim.a1{transition-delay:1s;}
.loaded .hero-anim.a2{transition-delay:1.18s;}
.loaded .hero-anim.a3{transition-delay:1.36s;}

/* CTA del hero: presupuesto (dorado) + WhatsApp en fila.
   Las dos vías de conversión visibles desde el primer pantallazo. */
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;}
/* Entrada de los CTA: animación en el PROPIO nodo de cada botón, NO un fundido
   de opacity en el contenedor. Un ancestro con opacity<1 descarta el
   backdrop-filter del botón de WhatsApp: por eso, mientras el viejo
   .hero-cta.hero-anim hacía su fade, el vidrio se veía plano/transparente ~1s y
   recién al terminar “aparecía”. Animando cada botón por separado (opacity y
   transform en su mismo nodo no rompen el vidrio), el liquid glass se ve desde
   el primer frame: se funde, no salta. fill backwards = oculto durante el delay
   y, al terminar, suelta el transform para que el efecto magnético (inline)
   mande sin que la animación lo pise. */
.hero-side .hero-cta>.btn{opacity:0;}
.loaded .hero-side .hero-cta>.btn{opacity:1;animation:heroCtaIn 1s var(--ease) backwards;}
.loaded .hero-side .hero-cta>.btn:nth-child(1){animation-delay:1.05s;}
.loaded .hero-side .hero-cta>.btn:nth-child(2){animation-delay:1.18s;}
@keyframes heroCtaIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
/* WhatsApp del hero: MISMO liquid glass que la barra del header y la ficha del
   hero (rgba .14 + blur + borde .25), y NO cambia en reposo; sólo vira al verde
   de la paleta al pasar el cursor. */
.btn-wa{
  background:rgba(248,247,238,.14);color:#fff;
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:0 18px 50px -22px rgba(20,28,10,.4), inset 0 1px 0 rgba(255,255,255,.22);
  /* Capa compositada estable, igual que .hero-meta. (El fix de fondo para que el
     vidrio no se vuelva transparente al scrollear está en site.js: el fade de
     opacidad del hero va sobre el título, NO sobre el .hero-grid que contiene
     este botón — un ancestro con opacity<1 descarta el backdrop-filter.) */
  will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.btn-wa svg{width:18px;height:18px;}
.btn-wa:hover{background:var(--verde);color:#fff;border-color:var(--verde);}

/* ficha técnica en vidrio, pie del hero */
.hero-meta{
  /* gap reducido: acerca el bloque de párrafo+CTAs a la barra inferior */
  margin-top:clamp(14px,2vh,22px);
  display:flex;align-items:stretch;flex-wrap:wrap;
  border-radius:var(--radius-lg);overflow:hidden;
  background:rgba(248,247,238,.14);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.25);
  opacity:0;
  /* el transform queda libre para el parallax por scroll (lo maneja site.js):
     no lo metemos en la transición de entrada para que el desplazamiento no
     arrastre 1s de lag. Mantener el backdrop-filter en este mismo nodo (y no
     heredar transform/opacity de un ancestro) preserva el liquid glass al
     scrollear. */
  will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.loaded .hero-meta{opacity:1;transition:opacity 1s var(--ease) 1.5s;}
.hero-meta .hm{
  flex:1 1 0;min-width:150px;padding:16px clamp(16px,2vw,28px);
  display:flex;flex-direction:column;gap:2px;position:relative;
}
.hero-meta .hm+.hm::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;
  background:rgba(255,255,255,.22);}
.hero-meta b{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.8vw,26px);color:#fff;line-height:1.1;}
.hero-meta small{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(248,247,238,.72);}

/* (Se quitó la píldora de progreso/flecha del carrusel: la portada rota sola,
   sin control visible, para bajar el ruido del inicio. La rotación vive en
   site.js.) */
@media (max-width:980px){
  /* una sola columna: título + dateline arriba, párrafo y CTAs debajo,
     todo alineado a la izquierda y con un respiro vertical coherente. */
  .hero-grid{grid-template-columns:1fr;gap:clamp(18px,3vh,26px);}
  .hero-side{padding-bottom:0;margin-bottom:0;align-items:flex-start;text-align:left;gap:clamp(16px,2vh,20px);}
  .hero-side p{max-width:54ch;}
}
@media (max-width:560px){
  .hero-frame{min-height:580px;}
  .hero-title{font-size:clamp(44px,12.5vw,60px);}
  .hero-kicker{margin-top:14px;}
  /* CTAs apilados a ancho completo: jerarquía clara y áreas táctiles amplias */
  .hero-cta{width:100%;gap:11px;}
  .hero-cta .btn{width:100%;}
  /* En mobile el botón flotante de WhatsApp ya cubre ese contacto: ocultamos el
     del hero para ganar aire y que se lea "Creamos momentos inolvidables". */
  .hero-cta .btn-wa{display:none;}
  .hero-meta{margin-top:clamp(18px,3vh,24px);}
  .hero-meta .hm{flex:1 1 46%;min-width:46%;padding:14px 16px;}
  .hero-meta .hm:nth-child(3)::before{display:none;}
  .hero-meta b{font-size:clamp(18px,5.4vw,22px);}
  /* labels de la ficha: en celular el tracking ancho cortaba palabras largas
     ("ESTACIONAMIENTO"). Lo reducimos y permitimos corte para que entren. */
  .hero-meta small{font-size:9px;letter-spacing:.08em;overflow-wrap:break-word;}
}

/* ---------- Hero FIJO en celular (pedido del cliente) ----------
   En celular se quita la animación de entrada (título, dateline, párrafo, CTAs y
   ficha aparecen YA en su lugar, sin desplazarse) y también el parallax por
   scroll (lo frena site.js): el texto y los botones quedan fijos y no “bajan” al
   desplazarse. Sólo las fotos de fondo del hero siguen rotando.
   Reglas duplicadas con y sin .loaded para ganar por orden a igual especificidad
   y no dejar ningún estado intermedio (flash) antes de que cargue. */
@media (max-width:640px){
  .hero-title .hl>span,.hero-title .hl>em,
  .loaded .hero-title .hl>span,.loaded .hero-title .hl>em{
    transform:none;transition:none;
  }
  .hero-kicker,.loaded .hero-kicker{opacity:1;transform:none;transition:none;}
  .hero-anim,.loaded .hero-anim{opacity:1;transform:none;transition:none;}
  .hero-side .hero-cta>.btn,
  .loaded .hero-side .hero-cta>.btn{opacity:1;transform:none;animation:none;}
  .hero-meta,.loaded .hero-meta{opacity:1;transition:none;}
}

/* ---------- Manifesto / quiénes somos ---------- */
/* overflow-x:clip recorta el sangrado horizontal de la marca de agua (.pluma),
   que a ciertos anchos (~1400-1520px y en mobile) sobresalía del borde derecho y
   generaba scroll horizontal. Sólo clipa el eje X: deja libre el Y para los
   reveal/parallax verticales del dúo de fotos. */
.manifesto{position:relative;overflow-x:clip;}
.manifesto .pluma{
  position:absolute;right:max(-30px,calc(50% - 740px));top:8%;width:clamp(220px,24vw,360px);
  opacity:.07;transform:rotate(12deg);pointer-events:none;
}
/* En pantallas chicas el fallback right:-30px + la rotación dejaban la marca de
   agua fuera del borde derecho y generaban scroll horizontal. Es decorativa
   (opacity .07) y no aporta nada en móvil, así que se oculta. */
@media (max-width:860px){.manifesto .pluma{display:none;}}
.manifesto-line{
  font-family:var(--display);font-weight:380;
  font-size:clamp(28px,3.6vw,52px);line-height:1.22;letter-spacing:-.015em;
  color:var(--verde);max-width:24ch;
}
.manifesto-line em{color:var(--dorado-oscuro);}
.manifesto-duo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.manifesto-duo .ph:nth-child(2){margin-top:clamp(32px,5vw,64px);}

/* Entrada escalonada y cinematográfica del dúo: la cortina (reveal-img) y el
   asentamiento de la imagen entran en cascada, foto 1 → foto 2. El parallax
   suave (data-plx) aporta el movimiento continuo durante el scroll. */
.manifesto-duo .reveal-img{transition-duration:1.4s;}
.manifesto-duo .reveal-img .ph__photo{transition:transform 1.9s var(--ease);}
.manifesto-duo .reveal-img:not(.in) .ph__photo{transform:scale(1.14) translateY(-2.5%);}
.manifesto-duo .reveal-img:nth-child(2),
.manifesto-duo .reveal-img:nth-child(2) .ph__photo{transition-delay:.22s;}

/* ---------- Bento del espacio ---------- */
.bento{display:grid;gap:14px;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(150px,21vw,260px);}
.bento .ph{border-radius:var(--radius-lg);}
.bento .b-a{grid-column:span 7;grid-row:span 2;}
.bento .b-b{grid-column:span 5;}
.bento .b-c{grid-column:span 5;}
.bento .b-d{grid-column:span 4;}
.bento .b-e{grid-column:span 4;}
.bento .b-f{grid-column:span 4;}
@media (max-width:860px){
  .bento{grid-auto-rows:clamp(140px,26vw,220px);}
  .bento .b-a{grid-column:span 12;}
  .bento .b-b,.bento .b-c{grid-column:span 6;}
  .bento .b-d,.bento .b-e,.bento .b-f{grid-column:span 12;}
}
/* Entrada del bento — liviana y SIN zoom: sólo opacidad + una leve subida,
   escalonada por celda. Las fotos quedan quietas (sin micro-zoom de entrada ni
   zoom de hover), tal como se pidió. */
.bento .reveal-img{clip-path:none;opacity:0;transform:translateY(24px);
  transition:opacity .75s var(--ease),transform .85s var(--ease);}
.bento .reveal-img.in{opacity:1;transform:none;}
.bento .reveal-img .ph__photo{transform:none;}
.bento .b-b{transition-delay:.07s;}
.bento .b-c{transition-delay:.11s;}
.bento .b-d{transition-delay:.15s;}
.bento .b-e{transition-delay:.19s;}
.bento .b-f{transition-delay:.23s;}

/* ---------- Servicios (lista oscura) ---------- */
.svc-row{position:relative;display:grid;grid-template-columns:1fr auto;gap:6px 26px;
  align-items:center;padding:clamp(20px,2.4vw,28px) 6px;cursor:default;}
.svc-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(242,241,223,.14);transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease) .2s;}
.svc-row.in::after{transform:scaleX(1);}
.svc-row:first-child::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(242,241,223,.14);transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease) .1s;}
.svc-row:first-child.in::before{transform:scaleX(1);}
.svc-row h3{font-size:clamp(21px,2.2vw,30px);color:var(--marfil);font-weight:400;
  transition:color .4s var(--ease),transform .5s var(--ease);}
.svc-row p{grid-column:1;color:rgba(242,241,223,.66);font-size:14.5px;line-height:1.65;max-width:60ch;}
.svc-row:hover h3{color:var(--dorado-claro);transform:translateX(8px);}
.svc-row .arr{width:46px;height:46px;border-radius:50%;border:1px solid rgba(191,159,120,.28);
  display:flex;align-items:center;justify-content:center;color:var(--dorado-claro);
  transition:color .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease);grid-row:span 2;}
.svc-row .arr svg{width:22px;height:22px;}
.svc-row:hover .arr{border-color:rgba(191,159,120,.55);color:var(--dorado);transform:translateX(4px);}
@media (max-width:640px){
  .svc-row{grid-template-columns:1fr;}
  .svc-row .arr{display:none;}
}

/* ---------- Video full-bleed del predio ---------- */
/* el contenedor funde el marfil de la sección de arriba con el crema de la de
   abajo en un degradado suave: la sombra "flota" sin que se vea una línea. */
.video-wrap{
  /* degradado continuo de punta a punta: el marfil de arriba y el crema de
     abajo se funden sin quiebre ni línea visible */
  background:linear-gradient(180deg, var(--marfil), var(--crema));
  /* mismo aire arriba y abajo: el video queda centrado entre las dos secciones */
  padding-block:clamp(44px,5.5vw,84px);
}
.video-band{position:relative;overflow:hidden;isolation:isolate;
  margin-inline:var(--frame);
  border-radius:var(--radius-xl);background:var(--noche);
  /* fuerza un único plano GPU para el recorte redondeado: evita que, al
     scrollear, el borde del video filtrado y la máscara queden un subpíxel
     desfasados y aparezca una línea horizontal borrosa. */
  transform:translateZ(0);will-change:transform;
  -webkit-mask-image:-webkit-radial-gradient(white,black);
  /* sombra suave y difusa, sin borde marcado */
  box-shadow:0 26px 70px -42px rgba(22,30,11,.34);}
.video-band__media{display:block;width:100%;aspect-ratio:16/9;
  max-height:min(90vh,1000px);object-fit:cover;background:var(--noche);
  /* el video rasteriza en su propio plano, alineado al contenedor */
  transform:translateZ(0);backface-visibility:hidden;
  /* mismo espíritu que el tratamiento de las fotos, pero un punto más bajo:
     el video se ve más vivo que una foto fija, así que se baja un poco más la
     saturación y se suma un velo cálido leve para integrarlo a la paleta. */
  filter:saturate(.62) contrast(1.06) brightness(.86) sepia(.1);}
@media (max-width:680px){
  .video-band__media{aspect-ratio:4/5;max-height:none;}
}

/* ---------- Contacto (index) ---------- */
.contact-sec{position:relative;overflow:hidden;isolation:isolate;
  margin:var(--frame);border-radius:var(--radius-xl);}
/* Foto de fondo anclada al viewport (background-attachment:fixed): así NO se
   reescala ni se reposiciona cuando el formulario cambia de alto al elegir el
   tipo de evento — la foto queda fija y solo el formulario crece o se achica. */
.contact-sec .bgph{position:absolute;inset:0;z-index:0;
  background-image:url("img/P8.jpg");
  background-image:image-set(url("img/P8.webp") type("image/webp"), url("img/P8.jpg") type("image/jpeg"));
  background-size:cover;background-position:center 40%;background-repeat:no-repeat;
  background-attachment:fixed;}
/* En mobile background-attachment:fixed es poco fiable (Android lo ignora,
   iOS puede tironear): volvemos a scroll. */
@media (max-width:980px){.contact-sec .bgph{background-attachment:scroll;}}
.contact-sec .bgveil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(110deg,rgba(22,30,11,.92) 0%,rgba(22,30,11,.78) 48%,rgba(22,30,11,.55) 100%);}
.contact-sec .inner{position:relative;z-index:2;padding-block:var(--section-pad);}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(36px,5vw,80px);align-items:start;}
.contact-side{color:var(--marfil);}
.contact-side .h2{color:#fff;}
.contact-side .lead{color:rgba(248,247,238,.8);}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr;}}

/* ---------- Tarjeta puente a galería (foto ancha) ---------- */
.wide-photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;}
.wide-photo .ph{aspect-ratio:21/9;border-radius:0;}
@media (max-width:760px){.wide-photo .ph{aspect-ratio:4/3;}}