/* ============================================================
   LANDINGS DE EVENTO — layout compartido
   Lo usan bodas.html, 15-anos.html e institucionales.html.
   Se carga DESPUES de styles.css: sobrescribe hero, nav y
   secciones .lp-* de la landing larga.
   ============================================================ */
/* Guard anti-scroll horizontal */
html, body { max-width: 100%; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
section[id] { scroll-margin-top: 72px; }

/* ============ CINTA DE EXPO ============
   Solo se muestra si el visitante viene de la expo (?utm_source=expo...).
   El de la expo ya nos conoció: no hay que presentarse de nuevo.
   El que llega frío desde Google ni se entera de que existe. */
.expo-bar { display: none; }
body.from-expo .expo-bar {
  display: block;
  position: relative; z-index: 310;
  background: var(--accent);
  color: #04140d;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.6rem var(--gutter);
}
body.from-expo #nav { top: 38px; }

/* ============ HERO — editorial partido ============
   Sin video a sangre completa con velo negro encima: ese patrón es el
   hero de plantilla de 2015 y, peor, delata que la imagen no aguanta
   sola. Acá la imagen vive en su propio panel, en la proporción vertical
   (la única en la que este material funciona) y la tipografía lleva el
   peso. La composición es asimétrica a propósito: el centrado total es
   la firma del template. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5.5rem);
  max-width: var(--container);
  margin: 0 auto;
  padding: 140px var(--gutter) clamp(3rem, 8svh, 6rem);
}
/* Halo detrás del panel: da profundidad sin ensuciar la imagen */
.hero::before {
  content: '';
  position: absolute;
  right: -8%; top: 50%;
  width: 64vw; height: 64vw;
  max-width: 860px; max-height: 860px;
  transform: translateY(-50%);
  background: radial-gradient(circle, var(--gold-dim) 0%, transparent 62%);
  pointer-events: none; z-index: 0;
}

@keyframes heroRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero-title   { animation: heroRise 0.8s var(--ease-out) 0.10s both; }
.hero-sub     { animation: heroRise 0.8s var(--ease-out) 0.26s both; }
.hero-actions { animation: heroRise 0.8s var(--ease-out) 0.42s both; }
.hero-media   { animation: heroRise 1s   var(--ease-out) 0.15s both; }
@media (prefers-reduced-motion: reduce) {
  .hero-title, .hero-sub, .hero-actions, .hero-media { animation: none; }
}

/* ── Columna de texto ── */
.hero-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left;
  max-width: 34rem;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
  font-weight: 300; line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0;
}
.hero-title em { font-style: italic; color: var(--accent); }
/* Único ornamento de la página, y va debajo del título */
.hero-title::after {
  content: '';
  display: block;
  width: 64px; height: 1px;
  margin-top: 2rem;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  font-weight: 300; line-height: 1.65;
  color: rgba(237,232,224,0.72);
  margin: 1.8rem 0 0;
  max-width: 46ch;
}
.hero-sub strong { font-weight: 500; color: var(--text); }
.hero-actions {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.9rem; margin-top: 2.6rem;
}

/* ── Panel de imagen ──
   Una foto quieta, no un loop: el video del primer baile se movía poco y
   solo agregaba peso. La imagen aguanta sola. */
.hero-media {
  position: relative; z-index: 1;
  /* Manda la altura, no el ancho de la columna: así la vertical se
     mantiene y el panel no se aplasta a cuadrado en pantallas bajas. */
  aspect-ratio: 3 / 4;
  height: min(76svh, 660px);
  width: auto;
  max-width: 100%;
  justify-self: center;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 44px 100px rgba(0,0,0,0.62);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
/* Velo mínimo al pie, solo para asentar el panel sobre el fondo negro */
.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,6,6,0.5) 0%, rgba(6,6,6,0) 42%);
  pointer-events: none;
}

/* ── CTA: plano. Sin degradé, sin glow que late, sin destello que lo
   recorre: los tres son marcas de plantilla. ── */
.btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  background: #00b170; color: #fff;
  font-family: var(--font-body);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  padding: 1.05rem 2.2rem;
  border: none; border-radius: 2px;
  transition: background var(--transition), transform 0.3s var(--ease-out);
}
.btn-wa img { width: 19px; height: 19px; object-fit: contain; }
.btn-wa:hover { background: #00c67f; transform: translateY(-2px); }

.whatsapp-float {
  opacity: 0; pointer-events: none;
  transform: translateY(14px) scale(0.9);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
body.float-visible .whatsapp-float { opacity: 1; pointer-events: auto; transform: none; }

.hero-note { font-family: var(--font-body); font-size: 0.76rem; letter-spacing: 0.04em; color: rgba(237,232,224,0.55); }
.hero-anchor {
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.73rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(237,232,224,0.7);
  border-bottom: 1px solid rgba(237,232,224,0.22);
  padding-bottom: 3px;
  transition: color var(--transition), border-color var(--transition);
}
.hero-anchor:hover { color: var(--accent); border-color: var(--accent); }

/* ============ NAV ============ */
#nav { z-index: 300; background: transparent; }
.nav-logo, .nav-toggle { position: relative; z-index: 210; }
.nav-links .nav-cta { border-color: var(--accent); color: var(--accent); }
.nav-links .nav-cta:hover { background: var(--accent); color: var(--black); }
.nav-num { display: none; }
.nav-menu-cta { display: none; }

/* ============ MOBILE (hero) ============ */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 1.7rem;
    padding: 96px var(--gutter) clamp(2.5rem, 7svh, 4rem);
  }
  .hero::before { right: -30%; width: 110vw; height: 110vw; }
  /* La imagen primero: en una landing de casamientos, la emoción abre.
     Altura explícita, no aspect-ratio: con `height:auto` el grid le
     calculaba a la fila 97px, la foto se salía de su celda y se comía
     el título. El recorte lo resuelve object-fit, no el ratio del marco. */
  .hero-media {
    order: -1;
    width: 100%;
    aspect-ratio: auto;
    /* Alta como para que emocione, baja como para que el botón de
       WhatsApp entre en el primer pantallazo. */
    height: clamp(200px, 32svh, 340px);
  }
  .hero-content { max-width: none; }
  .hero-title { font-size: clamp(2.1rem, 8vw, 3rem); }
  .hero-title::after { margin-top: 1.5rem; }
  .hero-sub { font-size: 0.98rem; margin-top: 1.4rem; }
  .hero-actions { margin-top: 1.7rem; width: 100%; }
  .btn-wa { width: 100%; max-width: 420px; padding: 1.15rem 0.9rem; font-size: 0.76rem; letter-spacing: 0.09em; }
}

/* Tablet: a 700-900px el marco a todo el ancho se vuelve una banda
   apaisada. Se acota y se centra para que siga leyéndose como foto. */
@media (min-width: 601px) and (max-width: 900px) {
  .hero-media { max-width: 460px; justify-self: center; height: clamp(300px, 44svh, 460px); }
  .hero-content { align-items: center; text-align: center; }
  .hero-title::after { margin-left: auto; margin-right: auto; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
  .hero-actions { align-items: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
}

/* ============ NAV MOBILE + TABLET ============ */
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: flex;
    position: fixed; inset: 0;
    width: 100%; height: 100dvh;
    flex-direction: column; align-items: stretch; justify-content: center;
    gap: 0;
    background: rgba(6,6,6,0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: none;
    padding: 5.5rem max(var(--gutter), calc((100vw - 640px) / 2)) 2.5rem;
    z-index: 200;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
  }
  .nav-links.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.35s var(--ease); }
  .nav-links li {
    width: 100%; opacity: 0; transform: translateY(22px);
    transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  }
  .nav-links.open li { opacity: 1; transform: translateY(0); }
  .nav-links.open li:nth-child(1) { transition-delay: 0.06s; }
  .nav-links.open li:nth-child(2) { transition-delay: 0.11s; }
  .nav-links.open li:nth-child(3) { transition-delay: 0.16s; }
  .nav-links.open li:nth-child(4) { transition-delay: 0.21s; }
  .nav-links.open li:nth-child(5) { transition-delay: 0.28s; }
  .nav-links a {
    display: flex; align-items: baseline; gap: 1rem; width: 100%;
    font-family: var(--font-display);
    font-size: 1.42rem; font-weight: 300;
    letter-spacing: 0.01em; text-transform: none;
    color: var(--text);
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .nav-num { display: inline-block; font-family: var(--font-impact); font-size: 0.68rem; letter-spacing: 0.15em; color: var(--accent); min-width: 1.6rem; }
  /* El CTA de contacto se alinea con el resto del menu: sin el override
     conserva el padding lateral del boton de desktop y queda indentado. */
  .nav-links .nav-cta { padding: 0.7rem 0; border: none; color: var(--accent); }
  .nav-links .nav-desktop-cta { display: none; }
  .nav-menu-cta { display: block; margin-top: 2.2rem; }
  .nav-menu-cta a.btn-wa { font-family: var(--font-body); font-size: 0.8rem; justify-content: center; width: 100%; padding: 1.1rem 1.5rem; border-bottom: none; }
}

/* ============ SECCIONES ============ */
.lp-section { padding: var(--section-pad) var(--gutter); max-width: var(--container); margin: 0 auto; }
.lp-section-head { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
/* El head está capado a 720px, así que los títulos largos siempre parten en dos
   líneas: balance evita que quede una palabra sola colgando en la segunda. */
.lp-section-head .section-title { text-wrap: balance; }
.lp-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lp-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.9rem 1.6rem;
}
.lp-card h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); margin: 0 0 0.6rem; line-height: 1.15; }
.lp-card p { font-family: var(--font-body); color: var(--muted); font-size: 0.98rem; line-height: 1.6; margin: 0; }

/* ── PartyWall: el diferencial se lleva su propio bloque ── */
.lp-feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.4rem);
  max-width: 1000px; margin: 0 auto;
  text-align: center;
}
.lp-feature .section-title { margin: 0.6rem 0 1.2rem; }
.lp-feature-lead {
  font-family: var(--font-body); color: rgba(237,232,224,0.8);
  font-size: 1.02rem; line-height: 1.65;
  max-width: 60ch; margin: 0 auto 2.2rem;
}
.lp-feature-list {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  text-align: left; margin-bottom: 2.2rem;
}
.lp-feature-list div { display: flex; gap: 0.8rem; align-items: flex-start; }
.lp-feature-list .lp-dot { color: var(--accent); font-size: 1.2rem; line-height: 1.35; flex: none; }
.lp-feature-list p { font-family: var(--font-body); color: var(--muted); font-size: 0.95rem; line-height: 1.55; margin: 0; }
.lp-feature-list strong { color: var(--text); font-weight: 500; }

/* "Qué incluye" */
.lp-do { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lp-do-item { display: flex; gap: 0.9rem; align-items: flex-start; }
.lp-do-item .lp-dot { color: var(--accent); font-size: 1.3rem; line-height: 1.4; flex: none; }
.lp-do-item h3 { font-family: var(--font-body); font-weight: 600; color: var(--text); margin: 0 0 0.15rem; font-size: 1.02rem; }
.lp-do-item p { font-family: var(--font-body); color: var(--muted); margin: 0; font-size: 0.92rem; line-height: 1.5; }

/* ── Consultá tu fecha ──
   NO es un formulario: no envía nada ni guarda nada. Los dos selectores
   solo arman el texto del WhatsApp, para que el dato más caro del negocio
   (la fecha) llegue ya escrito en el primer mensaje. */
.lp-date {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.2rem); text-align: center; max-width: 760px; margin: 0 auto;
}
.lp-date .section-title { margin: 0.6rem 0 1rem; }
.lp-date-note { font-family: var(--font-body); color: var(--muted); font-size: 0.97rem; line-height: 1.6; max-width: 52ch; margin: 0 auto 2rem; }
.lp-date-controls { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: 1.75rem; }
.lp-date-controls select {
  appearance: none; -webkit-appearance: none;
  background: var(--card) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2300c87e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 1rem center/12px 8px;
  border: 1px solid var(--border); border-radius: 4px;
  color: var(--text);
  font-family: var(--font-body); font-size: 0.95rem;
  padding: 0.85rem 2.6rem 0.85rem 1.1rem;
  min-width: 170px; cursor: pointer;
  transition: border-color var(--transition);
}
.lp-date-controls select:hover,
.lp-date-controls select:focus { border-color: var(--accent); outline: none; }
.lp-date-controls select option { background: var(--card); color: var(--text); }

/* Marco de valor (sin precio: el precio sale de la reunión) */
.lp-price {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.2rem); text-align: center; max-width: 900px; margin: 0 auto;
}
.lp-price .lp-tiers { font-family: var(--font-body); font-size: 1rem; color: var(--muted); letter-spacing: 0.06em; margin: 1.4rem 0 1.8rem; }
.lp-price .lp-tiers em { font-style: normal; color: var(--text); }
.lp-price .lp-note { font-family: var(--font-body); color: var(--muted); font-size: 0.95rem; max-width: 560px; margin: 0 auto 1.8rem; line-height: 1.6; }
.lp-price .btn-wa { margin-top: 0; }

.lp-final { text-align: center; padding: var(--section-pad) var(--gutter); }
.lp-final .section-title { margin-bottom: 1rem; }
.lp-final p { font-family: var(--font-body); color: var(--muted); max-width: 520px; margin: 0 auto 2rem; line-height: 1.6; }

.lp-footer { text-align: center; padding: 2.5rem var(--gutter); border-top: 1px solid var(--border); color: var(--muted); font-family: var(--font-body); font-size: 0.85rem; }
.lp-footer a { color: var(--accent); text-decoration: none; }

/* Modo captura (?snap=...) — QA visual */
html.snap .reveal, html.snap .reveal-left, html.snap .reveal-right { opacity: 1 !important; transform: none !important; transition: none !important; }
html.snap * { animation: none !important; transition: none !important; }

/* ============ FOTOS DE EVENTO ============
   Tira de 2-3 verticales (.lp-shots) y banda apaisada (.lp-band).
   Las fotos van sin texto encima: el pie sobre la imagen tapaba justo la
   parte de abajo del plano y sonaba a explicar lo que ya se ve. */
.lp-shots {
  display: grid; gap: 1rem; max-width: var(--container); margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.lp-shot {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--border); aspect-ratio: 3 / 4; background: var(--surface);
}
.lp-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lp-band { max-width: var(--container); margin: 0 auto; }
.lp-band figure {
  margin: 0; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border);
}
.lp-band img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.lp-band figcaption {
  font-family: var(--font-body); font-size: 0.9rem; color: var(--muted);
  line-height: 1.55; margin-top: 0.9rem; text-align: center;
}
.lp-band figcaption strong { color: var(--text); font-weight: 500; }

@media (max-width: 600px) {
  .lp-band img { aspect-ratio: 3 / 2; }
}

/* Banda con foto vertical: se limita el ancho en vez de recortarla a apaisada. */
.lp-band.is-portrait figure { max-width: 520px; margin: 0 auto; }
.lp-band.is-portrait img { aspect-ratio: 4 / 5; }
@media (max-width: 600px) { .lp-band.is-portrait img { aspect-ratio: 4 / 5; } }

/* Foto vertical alta que se muestra entera (sin recorte): el encuadre completo
   es el contenido — por ejemplo la fachada de un local montada de punta a punta. */
.lp-band.is-tall figure { max-width: 560px; margin: 0 auto; }
.lp-band.is-tall img { aspect-ratio: auto; height: auto; }

/* ============ PAR ANTES / DESPUÉS (.lp-pair) ============
   Dos fotos del mismo lugar en dos momentos del mismo día. Se usa en
   institucionales: de día el rig se lee entero (torres, cabezas, bafles) y de
   noche no se ve la estructura, se ve la marca. El argumento es la comparación,
   así que las dos van al mismo aspecto y al mismo tamaño — si una manda sobre
   la otra, se pierde. En mobile se apilan y el orden hace de antes/después. */
.lp-pair { max-width: var(--container); margin: 0 auto; }
.lp-pair-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.lp-pair figure {
  margin: 0; position: relative; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface);
}
.lp-pair img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.lp-pair-tag {
  position: absolute; top: 0.85rem; left: 0.85rem;
  font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text);
  padding: 0.36rem 0.72rem; border-radius: 100px;
  background: rgba(10,10,12,0.74); border: 1px solid rgba(237,232,224,0.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* El tag del "después" toma el acento del tema (dorado o verde según el toggle). */
.lp-pair-tag.is-after { color: var(--accent); border-color: var(--accent); }
.lp-pair-caption {
  font-family: var(--font-body); font-size: 0.9rem; color: var(--muted);
  line-height: 1.55; margin: 0.9rem auto 0; text-align: center; max-width: 62ch;
}
.lp-pair-caption strong { color: var(--text); font-weight: 500; }

@media (max-width: 700px) {
  .lp-pair-grid { grid-template-columns: 1fr; gap: 0.7rem; }
}