/* =========================================================================
   LEANDRO BÁEZ FOTOGRAFÍA — REDISEÑO v3 DE LA PORTADA (oct-2026)
   =========================================================================

   QUÉ ES
   Una capa ENCIMA de landing-v2.css (no la reemplaza: el apilado de
   tarjetas, el calendario y todo lo que costó afinar sigue viviendo ahí).
   Todo va encerrado en body[data-page="landing"], igual que v2.

   LA IDEA, INSPIRADA EN ESTUDIO GRAPHICA
   1. Fondo alternado: la página es marfil, y entre medio aparecen "losas"
      verdes de esquinas redondeadas (.v3-losa), como hojas de un álbum.
      Cada sección dice cuál es con una clase: .v3-claro / .v3-losa / .v3-laton.
   2. Formas redondeadas: botones píldora, tarjetas de 18–28px, la barra de
      menú flotante como una píldora sólida (sin blur: gama baja).
   3. Archivo más suelta: peso 700 en vez de 800 y menos apretada.
   4. El latón (#C2A25E) sigue siendo el único acento: botón, resaltador
      debajo de la frase clave en lo claro, texto de la frase clave en lo
      verde.

   PARA VOLVER ATRÁS: borrar el <link> a este archivo en index.html (y el
   <script> de landing-v3.js), y recuperar index.html del respaldo.
   ========================================================================= */


/* =========================================================================
   00 · COLORES POR ZONA
   global.css y v2 pintan todo con variables (--bg, --ink, --muted...).
   Acá se redefinen por zona: la página entera (y lo claro) en marfil, las
   losas en verde. Así cada componente viejo se adapta solo al fondo que le
   toca, sin reescribirlo uno por uno.
   ========================================================================= */
body[data-page="landing"],
body[data-page="landing"] .v3-claro{
  --bg:#F4F1E8; --bg-alt:#F4F1E8;
  --surface:#FFFCF6; --surface-2:#EDE7D7;
  --ink:#0B1710; --ink-2:#26362C; --muted:#56635A;
  --line:rgba(11,23,16,.12); --line-2:rgba(11,23,16,.22); --line-ink:rgba(11,23,16,.12);
  --hair:rgba(11,23,16,.09);
  --sombra-tarjeta:0 1px 2px rgba(11,23,16,.05), 0 14px 34px -18px rgba(11,23,16,.28);
}
body[data-page="landing"] .v3-losa,
body[data-page="landing"] .site-footer,
body[data-page="landing"] .sticky-cta,
body[data-page="landing"] .lightbox{
  --bg:#0B1710; --bg-alt:#0B1710;
  --surface:#13261B; --surface-2:#1B3325;
  --ink:#F4F1E8; --ink-2:#DCD7C8; --muted:#A5B0A2;
  --line:rgba(244,241,232,.14); --line-2:rgba(244,241,232,.26); --line-ink:rgba(244,241,232,.14);
  --hair:rgba(244,241,232,.10);
  --sombra-tarjeta:0 18px 40px -24px rgba(0,0,0,.7);
}
body[data-page="landing"]{
  /* Forma: vuelven las curvas (v2 las había puesto en 0). */
  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-pill:999px;
  --losa-m:clamp(8px,1.4vw,18px);      /* margen de la losa verde contra el borde */
  --losa-r:clamp(26px,4vw,48px);       /* curva de la losa */
  background:#F4F1E8;
  color:var(--ink);
}
body[data-page="landing"] ::selection{ background:rgba(194,162,94,.45); color:#0B1710; }


/* =========================================================================
   01 · LAS ZONAS
   ========================================================================= */
body[data-page="landing"] section{ color:var(--ink); }
body[data-page="landing"] .v3-claro{ background:#F4F1E8; background-image:none; }
/* Lo claro no es marfil plano: lleva el resplandor cálido de la marca
   (latón de un lado, verde o terracota del otro), el mismo de la franja
   "Hay días que no tienen segunda oportunidad" de v2. Son degradados
   quietos: no cuestan nada en gama baja. */
body[data-page="landing"] .v3-claro::before{ display:block; opacity:1; }
body[data-page="landing"] .hero.v3-claro::before{ display:none; }

/* Las secciones verdes van de borde a borde (como en invitaciondigital.cc).
   Antes eran "losas" con margen y esquinas redondeadas, y con las tarjetas
   de adentro se apilaban capas que se comían el ancho (el texto de las
   dudas arrancaba a 44 px del borde). Regla desde ahora: una sección es un
   fondo de lado a lado y adentro hay como máximo UN nivel de tarjeta. Lo
   claro y lo verde siguen alternándose (Leandro: ayuda a la lectura). La
   tarjeta redondeada queda solo para el pie, que es el remate. */
body[data-page="landing"] .v3-losa{
  background:#0B1710; background-image:none;
  margin:0;
  border-radius:0;
  border-top:0;
}
/* Dos verdes seguidas (p. ej. preguntas y "Sobre mí" en la portada): una
   línea fina las separa, igual que entre dos claras. */
body[data-page="landing"] .v3-losa:has(+ .v3-losa){ padding-bottom:calc(var(--sp) * .55); }
body[data-page="landing"] .v3-losa + .v3-losa{ padding-top:calc(var(--sp) * .55); }
body[data-page="landing"] .v3-losa + .v3-losa::after{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:1;
  width:calc(min(var(--max), 100%) - var(--pad) * 2); height:1px;
  background:linear-gradient(90deg, rgba(244,241,232,0), rgba(244,241,232,.16) 12%, rgba(244,241,232,.16) 88%, rgba(244,241,232,0));
}
/* El halo de color de cada sección (global.css) se queda, pero dentro de la
   curva: sin esto sus esquinas cuadradas se asomaban fuera de la losa. */
body[data-page="landing"] .v3-losa::before{ border-radius:inherit; opacity:.8; }

body[data-page="landing"] .v3-laton{
  background:#C2A25E; background-image:none;
  margin:0 var(--losa-m); border-radius:var(--losa-r);
}
body[data-page="landing"] .v3-laton::before{ display:none; }

/* v2 separaba secciones con un filete de 2px: con fondos alternados sobra. */
body[data-page="landing"] :is(#antes-despues, #reel, #sobre-mi, #precios, #faq, #testimonios){ border-top:0; }

/* Dos losas no van nunca pegadas (siempre hay una zona clara entre medio),
   pero la losa necesita aire propio arriba y abajo para leerse como hoja. */
/* Dos zonas claras seguidas (p. ej. "antes/después" y el portafolio)
   quedaban como una sola, con ~260 px de vacío en el medio. Ahora el hueco
   se achica y una línea fina las separa, al ancho del contenido. */
body[data-page="landing"] .v3-claro:has(+ .v3-claro){ padding-bottom:calc(var(--sp) * .55); }
body[data-page="landing"] .v3-claro + .v3-claro{ padding-top:calc(var(--sp) * .55); }
body[data-page="landing"] .v3-claro + .v3-claro::after{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:1;
  width:calc(min(var(--max), 100%) - var(--pad) * 2); height:1px;
  background:linear-gradient(90deg, rgba(11,23,16,0), rgba(11,23,16,.16) 12%, rgba(11,23,16,.16) 88%, rgba(11,23,16,0));
}

body[data-page="landing"] .v3-losa + .v3-claro,
body[data-page="landing"] .v3-laton + .v3-claro{ padding-top:var(--sp); }


/* =========================================================================
   02 · TIPOGRAFÍA — Archivo más suelta
   Misma familia y misma caja que v2; cambia el peso (800 → 700) y se abre
   un poco el interletrado.
   ========================================================================= */
body[data-page="landing"] :is(h1,h2,h3,h4){ font-weight:700; color:var(--ink); }
body[data-page="landing"] h1{ letter-spacing:-.022em; line-height:1.02; }
body[data-page="landing"] h2{ letter-spacing:-.022em; line-height:1.04; font-size:clamp(30px,6.6vw,58px); }
body[data-page="landing"] h3{ letter-spacing:-.01em; }
body[data-page="landing"] :is(strong, b){ font-weight:700; color:var(--ink); }
body[data-page="landing"] .lead{ color:var(--muted); }

/* La frase clave. Regla de la marca (elegida por Leandro, 10-oct-2026):
   - En lo OSCURO brilla: degradado de marfil a latón, el de v2. El texto se
     recorta sobre el degradado y el brillo pasa UNA vez al entrar en
     pantalla (.lbv2-shine-play, lo pone landing-v2.js).
   - En lo CLARO (decisión final de Leandro): todo el titular en tinta y la
     frase clave con un TRAZO de latón a mano debajo, como una firma (SVG en
     línea, sin descarga). Cada renglón lleva su trazo. Vale también para los
     heros. Excepciones que le gustan como están: el cierre ("Tu fecha / no
     espera.", "Los quinceaños / no se repiten."), negro + gris sin trazo; y la franja "Hay días que no
     tienen segunda oportunidad" (.pq-band) sigue con su 2.ª línea en gris y
     sin trazo: a Leandro le gusta así.
   Descartados sobre marfil (probados con Leandro): negro→dorado, gris→dorado,
   gris liso solo, franja tipo resaltador, frase en verde, pastilla. */
body[data-page="landing"] :is(h1,h2,h3) em,
body[data-page="landing"] :is(h1,h2,h3) .kw{
  font-weight:inherit; font-style:normal;
  color:#0B1710; -webkit-text-fill-color:#0B1710;
  background:var(--v3-trazo) no-repeat 0 100% / 100% .3em;
  -webkit-background-clip:border-box; background-clip:border-box; /* v2 lo recortaba al texto */
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding:0 .02em .1em; margin:0;
}
body[data-page="landing"]{ --v3-trazo:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 200 14%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M3 9 C 50 3, 120 2, 197 6%27 stroke=%27%23C2A25E%27 stroke-width=%274.5%27 fill=%27none%27 stroke-linecap=%27round%27/%3E%3C/svg%3E"); }
/* Con el trazo debajo, los títulos de dos renglones necesitan un poco más de aire entre renglones. */
body[data-page="landing"] .v3-claro :is(h2,h3):has(em){ line-height:1.13; }
body[data-page="landing"] .hero.v3-claro .hero-copy h1 em{ color:#0B1710; -webkit-text-fill-color:#0B1710; }
/* El trazo se DIBUJA de izquierda a derecha una sola vez, cuando el título
   entra en pantalla (pedido de Leandro). Usa el mismo aviso que el brillo de
   v2: landing-v2.js le pone .lbv2-shine-play a la frase al aparecer. Arranca
   en 0 solo si la persona no pidió "reducir movimiento" (en ese caso el JS no
   pone la clase y el trazo queda dibujado desde el inicio). */
@keyframes v3-trazar{ from{ background-size:0% .3em; } to{ background-size:100% .3em; } }
/* (antes solo con movimiento activado; ahora siempre) */
  body[data-page="landing"] .v3-claro :is(h1,h2,h3) :is(em, .kw){ background-size:0% .3em; }
  body[data-page="landing"] .v3-claro :is(h1,h2,h3) :is(em, .kw).lbv2-shine-play{
    animation:v3-trazar .8s cubic-bezier(.65,0,.35,1) .15s both;
  }
  /* En el hero, después de que el titular terminó de aparecer. */
  body[data-page="landing"] .hero.v3-claro h1 em.lbv2-shine-play{ animation-delay:.5s; }

body[data-page="landing"] :is(.v3-losa, .site-footer) :is(h1,h2,h3) em,
body[data-page="landing"] :is(.v3-losa, .site-footer) :is(h1,h2,h3) .kw{
  color:transparent; -webkit-text-fill-color:transparent;
  background:linear-gradient(100deg,#F4F1E8 0%,#DCC28A 26%,#C2A25E 50%,#DCC28A 74%,#F4F1E8 100%) repeat 0% 50% / 220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding:0 .02em .06em;
}

/* Antetítulos y numeración de capítulos ("01 — La diferencia") eran la voz
   de "ficha técnica" de v2. En v3 el titular habla solo. */
body[data-page="landing"] :is(.folio, .folio-about),
body[data-page="landing"] .sec-head:has(.folio) .folio{ display:none; }
body[data-page="landing"] .sec-head > .eyebrow{ display:none; }
body[data-page="landing"] .sec-head h2{ margin:0 0 16px; max-width:18ch; }
body[data-page="landing"] .sec-head .lead{ max-width:46ch; }

body[data-page="landing"] .microcopy{ color:var(--muted); }
body[data-page="landing"] .microcopy b{ color:var(--ink); font-weight:700; }


/* =========================================================================
   03 · BOTONES — píldoras
   Misma caja (mayúsculas) que v2, más liviana y redonda.
   ========================================================================= */
body[data-page="landing"] .btn{
  border-radius:999px; border-width:1.5px;
  font-weight:700; letter-spacing:.045em;
  padding:17px 26px;
}
body[data-page="landing"] .btn-sm{ padding:11px 18px; }
/* El dorado de los botones lleva el degradado de siempre (latón → latón claro
   → latón), no un latón liso: liso se veía apagado (lo notó Leandro). Al
   pasar el mouse el brillo se corre. */
body[data-page="landing"]{ --v3-laton-btn:linear-gradient(135deg,#C2A25E 0%,#DCC28A 55%,#C2A25E 100%); }
body[data-page="landing"] :is(.btn-primary, .btn-brass){
  background:#C2A25E var(--v3-laton-btn) 0 0 / 210% 100%; color:#0B1710; border-color:#C9AA66;
  box-shadow:0 10px 22px -12px rgba(150,118,50,.75);
  transition:background-position .5s cubic-bezier(.23,1,.32,1), transform .16s ease-out;
}
@media (hover:hover) and (pointer:fine){
  body[data-page="landing"] :is(.btn-primary, .btn-brass):hover{ background-position:100% 0; color:#0B1710; }
}
body[data-page="landing"] .btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--line-2);
}
@media (hover:hover) and (pointer:fine){
  body[data-page="landing"] .btn-ghost:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
}
body[data-page="landing"] .btn:focus-visible{ outline:2px solid #C2A25E; outline-offset:3px; }
body[data-page="landing"] .btn-block{ justify-content:space-between; }


/* =========================================================================
   04 · CABECERA — píldora flotante
   El header sigue siendo sticky (y se sigue escondiendo al bajar, app.js);
   lo que cambia es que la barra en sí es una píldora sólida que flota con
   un margen. Sin backdrop-filter: es caro en celulares de gama baja.
   ========================================================================= */
body[data-page="landing"] .site-header,
body[data-page="landing"] .site-header.scrolled{
  background:transparent; border-bottom:0; box-shadow:none;
  padding:10px var(--losa-m) 0;
}
body[data-page="landing"] .nav{
  max-width:calc(var(--max) + 40px);
  background:#FFFCF6; color:#0B1710;
  border-radius:999px;
  padding:8px 8px 8px 12px;
  box-shadow:0 1px 2px rgba(11,23,16,.06), 0 10px 30px -14px rgba(11,23,16,.35);
}
body[data-page="landing"] .brand{ color:#0B1710; gap:10px; }
body[data-page="landing"] .brand img{ border-radius:50%; width:34px; height:34px; }
body[data-page="landing"] .brand-text{ font-weight:700; color:#0B1710; }
body[data-page="landing"] .site-header .brand-text small{ color:#56635A; letter-spacing:.14em; font-weight:700; }
body[data-page="landing"] .site-footer .brand-text small{ color:#C2A25E; }
@media (max-width:420px){ body[data-page="landing"] .site-header .brand-text small{ letter-spacing:.08em; } }
body[data-page="landing"] .nav-links a{ color:#26362C; font-weight:700; letter-spacing:.08em; }
@media (hover:hover) and (pointer:fine){
  body[data-page="landing"] .nav-links a:hover{ color:#0B1710; text-decoration:underline; text-decoration-color:#C2A25E; text-decoration-thickness:3px; text-underline-offset:6px; }
}
body[data-page="landing"] .site-header .btn-wa{ border-radius:999px; }


/* =========================================================================
   05 · HERO
   Marfil, con una mancha de latón suave detrás de las fotos (la versión
   propia de la mancha amarilla de la referencia). Las dos fotos dejan de
   fundirse con el fondo y pasan a ser dos tarjetas redondeadas, apenas
   desfasadas, como fotos sueltas apoyadas en una mesa.
   ========================================================================= */
body[data-page="landing"] .hero.v3-claro{ padding:clamp(14px,3vw,26px) 0 clamp(28px,5vw,48px); overflow:clip; }
body[data-page="landing"] .hero.v3-claro .hero-grain,
body[data-page="landing"] .hero.v3-claro .hero-wm{ display:none; }
body[data-page="landing"] .hero.v3-claro .hero-bg{
  inset:0;
  background:
    radial-gradient(48% 36% at 78% 18%, rgba(194,162,94,.42) 0%, rgba(194,162,94,0) 70%),
    radial-gradient(40% 30% at 10% 70%, rgba(194,162,94,.16) 0%, rgba(194,162,94,0) 70%);
  animation:none;
}
body[data-page="landing"] .hero.v3-claro .hero-cobs{
  gap:10px; margin:0; align-items:start;
  margin-left:0; margin-right:0;
}
/* La segunda foto baja un poco: deja de leerse como una grilla y pasa a
   leerse como dos fotos sueltas. */
body[data-page="landing"] .hero.v3-claro .hero-cobs li:nth-child(2){ margin-top:clamp(22px,6vw,48px); }
body[data-page="landing"] .hero.v3-claro .hero-tile-img{
  -webkit-mask-image:none; mask-image:none;
  border-radius:clamp(20px,4vw,30px); overflow:hidden;
  box-shadow:0 2px 4px rgba(11,23,16,.06), 0 22px 44px -22px rgba(11,23,16,.45);
  background:#E6DFCD;
}
/* Sin marco dorado que salte de una foto a la otra (app.js sigue rotando
   .is-active cada 4,5 s, pero ya no se ve): Leandro prefiere que las dos
   fotos solo floten, cada una a su ritmo. Solo transform, sobre el <li>
   (el botón de adentro ya usa transform para su entrada): liviano en gama baja. */
body[data-page="landing"] .hero.v3-claro .hero-tile{ cursor:default; pointer-events:none; }
body[data-page="landing"] .hero.v3-claro .hero-tile:hover .hero-tile-img,
body[data-page="landing"] .hero.v3-claro .hero-tile:active .hero-tile-img{ transform:none; }
body[data-page="landing"] .hero.v3-claro .hero-tile.is-active .hero-tile-img{ box-shadow:0 2px 4px rgba(11,23,16,.06), 0 22px 44px -22px rgba(11,23,16,.45); }
body[data-page="landing"] .hero.v3-claro .hero-cobs li{ animation:v3-flotar 6.5s cubic-bezier(.45,0,.55,1) infinite; }
body[data-page="landing"] .hero.v3-claro .hero-cobs li:nth-child(2){ animation-duration:7.8s; animation-delay:-3.4s; }
@keyframes v3-flotar{
  0%, 100%{ transform:translate3d(0,0,0) rotate(0deg); }
  50%{ transform:translate3d(0,-9px,0) rotate(-.6deg); }
}
body[data-page="landing"] .hero.v3-claro .hero-tile:focus-visible{ outline:none; }
body[data-page="landing"] .hero.v3-claro .hero-tile:focus-visible .hero-tile-img{ box-shadow:0 0 0 3px #0B1710; }

body[data-page="landing"] .hero.v3-claro .hero-copy{ padding-top:clamp(22px,5vw,34px); }
body[data-page="landing"] .hero.v3-claro .hero-copy h1{ color:#0B1710; letter-spacing:-.025em; line-height:1.04; }
/* Cada renglón llega de margen a margen en el celular (lo de v2), recalibrado
   para el peso 700, que es más angosto que el 800. */
body[data-page="landing"] .hero.v3-claro .hero-copy h1 .hero-h1-l1{ font-size:11.3vw; }
body[data-page="landing"] .hero.v3-claro .hero-copy h1 .hero-h1-l2{ font-size:11.4vw; }
@media (min-width:981px){
  body[data-page="landing"] .hero.v3-claro .hero-copy h1{ font-size:clamp(40px,4.3vw,64px); }
  body[data-page="landing"] .hero.v3-claro .hero-copy h1 .hero-h1-l1,
  body[data-page="landing"] .hero.v3-claro .hero-copy h1 .hero-h1-l2{ font-size:inherit; }
}
/* El rótulo "Fotógrafo de Bodas · 15 años" vive dentro del H1 por SEO: se
   ve como una chapita chica, no como antetítulo. */
body[data-page="landing"] .hero.v3-claro .hero-copy h1 .hero-kicker-line{ height:auto; padding:0 0 14px; }
body[data-page="landing"] .hero.v3-claro .hero-copy h1 .hero-kicker-line > .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#0B1710; background:#FFFCF6; border-radius:999px; padding:7px 13px 7px 11px;
  box-shadow:0 0 0 1px rgba(11,23,16,.08);
}
/* Sin punto decorativo delante: la chapa ya se distingue por su forma. */
body[data-page="landing"] .hero.v3-claro .hero-copy h1 .hero-kicker-line > .eyebrow::before{ content:none; display:none; }
body[data-page="landing"] .hero.v3-claro .hero-copy .lead{ color:#56635A; }
body[data-page="landing"] .hero.v3-claro .hero-cta .cta-line{ gap:10px; }
body[data-page="landing"] .hero.v3-claro .hero-cta .btn{ padding:16px 20px; letter-spacing:.03em; }
@media (max-width:400px){ body[data-page="landing"] .hero.v3-claro .hero-cta .btn{ font-size:12px; letter-spacing:.02em; padding:16px 18px; } }
body[data-page="landing"] .hero.v3-claro .hero-cta .btn-ghost{ border-color:rgba(11,23,16,.35); }
body[data-page="landing"] .hero.v3-claro .hero-cta .microcopy b{ color:#0B1710; }

/* El adelanto: de franja con filete a tarjetita redonda. */
body[data-page="landing"] .hero.v3-claro .hero-badge{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:3px;
  border-top:0; background:#FFFCF6; border-radius:18px;
  padding:13px 18px; margin-top:clamp(16px,3vw,22px);
  box-shadow:0 0 0 1px rgba(11,23,16,.07), 0 12px 26px -18px rgba(11,23,16,.35);
}
body[data-page="landing"] .hero.v3-claro .hero-badge b{ color:#0B1710; letter-spacing:.1em; font-weight:700; }
body[data-page="landing"] .hero.v3-claro .hero-badge span{ color:#56635A; }

@media (min-width:981px){
  body[data-page="landing"] .hero.v3-claro{ padding-top:clamp(20px,3vh,36px); }
  body[data-page="landing"] .hero.v3-claro .hero-inner{ align-items:center; }
  body[data-page="landing"] .hero.v3-claro .hero-copy{ padding-top:0; }
  body[data-page="landing"] .hero.v3-claro .hero-cobs{ gap:14px; }
}

/* Hero de las landings de anuncios (/quince/): mismo mundo que el hero de la
   portada (marfil, dos fotos redondeadas, chapita), con su tarjeta de "lo que
   incluye" en versión clara. Va con .hero.v3-claro, así hereda todo lo de
   arriba; acá solo se deshace lo propio del hero de anuncio de v2 (fotos de
   150 px detrás del texto, máscara, zoom, sombras en las letras). */
body[data-page="landing"] .hero--anuncio.v3-claro .hero-cobs,
body[data-page="landing"] .hero--anuncio.v3-claro .hero-tile{ height:auto; }
body[data-page="landing"] .hero--anuncio.v3-claro .hero-cobs li:nth-child(2) .hero-tile-img img{ transform:none; }
@media (max-width:980px){
  /* Las fotos, igual que en la portada: altas, enteras y la segunda un poco
     más abajo (Leandro pidió el mismo diseño; antes iban recortadas en
     cuadrados de alto fijo). La máscara de v2 ya la apaga la regla común. */
  body[data-page="landing"] .hero--anuncio.v3-claro .hero-tile-img{ -webkit-mask-image:none; mask-image:none; }
  body[data-page="landing"] .hero--anuncio.v3-claro .hero-copy h1{ filter:none; }
  body[data-page="landing"] .hero--anuncio.v3-claro .hero-copy .eyebrow{ text-shadow:none; }
}
/* En compu el titular de /quince es más largo que el de la portada: un
   poco más chico para que quede en 2 renglones. */
@media (min-width:981px){
  body[data-page="landing"] .hero--anuncio.v3-claro .hero-copy h1{ font-size:clamp(34px,3.5vw,52px); }
}
/* "Los quince se viven" llega de margen a margen en peso 700 (medido). */
@media (max-width:980px){
  body[data-page="landing"] .hero--anuncio.v3-claro .hero-copy h1 .hero-h1-l1{ font-size:9.9vw; }
  body[data-page="landing"] .hero--anuncio.v3-claro .hero-copy h1 .hero-h1-l2{ font-size:9.9vw; }
}

/* La tarjeta "lo que incluye", en claro: blanca cálida, filete de latón. */
body[data-page="landing"] .hero--anuncio.v3-claro .hero-pack{
  background:#FFFCF6; color:#26362C; border-radius:22px; overflow:hidden;
  box-shadow:0 1px 2px rgba(11,23,16,.05), 0 18px 40px -26px rgba(11,23,16,.35);
}
body[data-page="landing"] .hero--anuncio.v3-claro .hero-pack::before{ border-radius:inherit; }
body[data-page="landing"] .hero--anuncio.v3-claro .hp-tit{ color:#0B1710; font-weight:700; }
body[data-page="landing"] .hero--anuncio.v3-claro .hp-list li{ color:#26362C; }
body[data-page="landing"] .hero--anuncio.v3-claro .hp-mas::before{ background:linear-gradient(transparent, rgba(194,162,94,.55) 25%, rgba(194,162,94,.55) 75%, transparent); }
body[data-page="landing"] .hero--anuncio.v3-claro .hp-mas::after{ color:#0B1710; box-shadow:0 0 0 3px #FFFCF6; }
/* "Adelanto esa misma noche" y "De regalo": renglones con su ícono,
   separados por una línea fina; sin franjas de color dentro de la tarjeta. */
body[data-page="landing"] .hero--anuncio.v3-claro .hp-noche{ background:none; border-top-color:rgba(11,23,16,.08); }
body[data-page="landing"] .hero--anuncio.v3-claro .hp-noche svg{ color:#7A5F22; }
body[data-page="landing"] .hero--anuncio.v3-claro .hp-noche-txt b{ color:#0B1710; }
body[data-page="landing"] .hero--anuncio.v3-claro .hp-noche-txt span{ color:#56635A; }
body[data-page="landing"] .hero--anuncio.v3-claro .hp-pie{ color:#7A5F22; border-top-color:rgba(11,23,16,.08); }
/* El enlace de WhatsApp trae el color latón escrito en el HTML: sobre marfil no se lee. */
body[data-page="landing"] .hero--anuncio.v3-claro .microcopy a{ color:#7A5F22 !important; text-decoration-color:#C2A25E !important; }

/* Cinta de confianza: sin cajas, texto suelto como en la referencia
   ("+400 restaurantes fotografiados"). */
body[data-page="landing"] .trust{ border:0; background:transparent; padding:0 0 clamp(36px,6vw,64px); }
body[data-page="landing"] .trust-inner{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px;
  max-width:var(--max); padding:0 var(--pad); text-align:left;
}
@media (min-width:720px){ body[data-page="landing"] .trust-inner{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
body[data-page="landing"] .trust-item{
  background:transparent; box-shadow:none; padding:0;
  display:flex; flex-direction:column; align-items:flex-start;
  border-left:0;
}
body[data-page="landing"] .trust-item strong{ color:#0B1710; font-weight:700; font-size:clamp(26px,4vw,40px); letter-spacing:-.03em; }
body[data-page="landing"] .trust-item span{ color:#56635A; text-transform:none; letter-spacing:0; font-size:13px; font-weight:600; margin-top:4px; }


/* =========================================================================
   06 · TARJETAS — dudas, precios, portafolio
   Se separan con aire en vez del filete de 2px de v2, y se redondean.
   El apilado (v2, sección 10) sigue igual: solo cambia el aspecto.
   ========================================================================= */
body[data-page="landing"] :is(.dudas, .precios){ gap:14px; }
body[data-page="landing"] :is(.duda, .plan){
  border-radius:var(--r-lg); box-shadow:var(--sombra-tarjeta);
}
body[data-page="landing"] :is(.duda, .plan):hover{ box-shadow:var(--sombra-tarjeta); }

/* Dudas (en la losa verde) */
body[data-page="landing"] .duda{ background:#13261B; box-shadow:0 0 0 1px rgba(244,241,232,.07), var(--sombra-tarjeta); }
/* El 01/02/03 no era una secuencia: sale. */
body[data-page="landing"] .duda .n{ display:none; }
body[data-page="landing"] .duda p{ color:var(--muted); }
body[data-page="landing"] .duda p b{ color:var(--ink); }

/* Las dudas, como LISTA con resaltado al scrollear (pedido de Leandro: sin
   apilado, el mismo efecto que "Quinceaños, resueltos" en /quince). Cada
   duda es un renglón con su número en un círculo de latón; sin tarjeta. */
body[data-page="landing"] .dudas[data-v3-foco]{ display:grid; grid-template-columns:1fr; gap:0; }
body[data-page="landing"] .dudas[data-v3-foco] .duda{
  background:none; background-image:none; box-shadow:none; border:0; border-radius:0;
  padding:18px 0 18px 48px; transform:none;
  border-bottom:1px solid rgba(244,241,232,.09);
}
body[data-page="landing"] .dudas[data-v3-foco] .duda:last-child{ border-bottom:0; }
body[data-page="landing"] .dudas[data-v3-foco] .duda.is-foco{ border-bottom-color:transparent; }
body[data-page="landing"] .dudas[data-v3-foco] .duda:hover{ box-shadow:none; transform:none; }
body[data-page="landing"] .dudas[data-v3-foco] .duda .n{
  display:grid; place-items:center; position:absolute; left:0; top:17px; margin:0;
  width:30px; height:30px; border-radius:50%;
  background:#C2A25E; color:#0B1710; font-family:inherit; font-size:11.5px; font-weight:700; letter-spacing:0;
  transition:background-color .28s ease, color .28s ease;
}
body[data-page="landing"] .dudas[data-v3-foco] .duda h3{ font-size:clamp(18px,4.6vw,22px); line-height:1.25; margin:0 0 6px; }
body[data-page="landing"] .dudas[data-v3-foco] .duda p{ margin:0; }
body[data-page="landing"] .dudas[data-v3-foco] .duda.is-foco .n{ background:#0B1710; color:#C2A25E; }

/* Resaltado al scrollear, para cualquier lista con data-v3-foco (idea de
   estudiographica.com que pidió Leandro): el renglón que cruza el medio de
   la pantalla se pinta con una franja de latón de borde a borde. Lo marca
   listaFoco() en landing-v3.js con .is-foco. La franja es un ::after que
   solo cambia de opacidad: liviano en gama baja. */
body[data-page="landing"] [data-v3-foco] > *{ position:relative; isolation:isolate; }
body[data-page="landing"] [data-v3-foco] > *::after{
  content:""; position:absolute; z-index:-1; top:0; bottom:0;
  left:calc(var(--pad) * -1); right:calc(var(--pad) * -1);
  background:#C2A25E; opacity:0; transition:opacity .28s ease;
}
body[data-page="landing"] [data-v3-foco] > * :is(h3, b, p, span){ transition:color .28s ease; }
body[data-page="landing"] [data-v3-foco] > .is-foco::after{ opacity:1; }
body[data-page="landing"] [data-v3-foco] > .is-foco :is(h3, b, p b){ color:#0B1710; }
body[data-page="landing"] [data-v3-foco] > .is-foco :is(p, span:not(.n)){ color:#26362C; }
/* En compu la lista va en su columna (al lado del título o del precio): la
   franja no cruza la pantalla, queda como una pastilla detrás del renglón. */
@media (min-width:900px){
  body[data-page="landing"] [data-v3-foco] > *::after{ left:-16px; right:-16px; border-radius:18px; }
}

/* Precios (en lo claro): tarjetas blancas; la más consultada, verde. */
body[data-page="landing"] .plan{ background:#FFFCF6; }
body[data-page="landing"] .plan .rango{ border-top:1px solid var(--line); color:#0B1710; font-weight:700; }
body[data-page="landing"] .plan .rango-pre{ color:var(--muted); font-weight:700; }
body[data-page="landing"] .plan ul li{ color:var(--ink-2); }
body[data-page="landing"] .plan ul li::before{ color:#C2A25E; }

/* Las tres coberturas, iguales y con foto (oct-2026, pedido de Leandro):
   ninguna se destaca, cada una arranca con su foto real, poco texto y el
   mismo botón oscuro. La foto va metida 8px adentro de la tarjeta, con su
   propia curva, como en el hero. */
body[data-page="landing"] .precios .plan{ --plan-p:clamp(13px,1.8vw,18px); padding:var(--plan-p); }
/* Las tres en verde oscuro con el precio en dorado (opción B que eligió
   Leandro): sobre marfil se leen claramente como tarjetas, y al ser las tres
   iguales ninguna se destaca. El filete claro y la sombra separan una de
   otra cuando se apilan. */
body[data-page="landing"] .precios .plan{
  --ink:#F4F1E8; --ink-2:#DCD7C8; --muted:#A5B0A2; --line:rgba(244,241,232,.14);
  background:#0B1710; background-image:none; color:#F4F1E8;
  box-shadow:0 0 0 1px rgba(244,241,232,.07), 0 24px 44px -26px rgba(11,23,16,.65);
}
body[data-page="landing"] .precios .plan h3{ color:#F4F1E8; }
body[data-page="landing"] .precios .plan .small{ color:#A5B0A2; font-size:12.75px; line-height:1.3; }
body[data-page="landing"] .precios .plan .rango{ color:#DCC28A; }
body[data-page="landing"] .precios .plan .rango small,
body[data-page="landing"] .precios .plan .rango-pre{ color:#A5B0A2; }
/* El precio 2027, en el mismo rojo que en /quince pero SIN tachar (pedido de Leandro). "#precios" para ganarle a las reglas de latón de más abajo. */
body[data-page="landing"] #precios .precios .plan .rango-nota{ color:#FF7A70; font-weight:600; }
body[data-page="landing"] .precios .plan ul li{ color:#DCD7C8; }
body[data-page="landing"] .precios .plan.is-elegido{ box-shadow:0 0 0 2px #C2A25E, 0 24px 44px -26px rgba(11,23,16,.65); }
body[data-page="landing"] .precios .plan-foto{
  display:block; overflow:hidden; border-radius:14px; background:#E6DFCD;
  margin:calc(5px - var(--plan-p)) calc(5px - var(--plan-p)) 9px;
}
body[data-page="landing"] .precios .plan-foto img{ display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; }
body[data-page="landing"] .precios .plan h3{ font-size:clamp(18.5px,2vw,22px); margin:0 0 1px; line-height:1.12; }
body[data-page="landing"] .precios .plan .small{ margin:0; }
/* Por dentro, en bloques separados por líneas finas (pedido de Leandro: que
   no se vea todo mezclado): nombre / precio / lo que incluye / botón. */
body[data-page="landing"] .precios .plan .rango{
  border-top:1px solid rgba(244,241,232,.14); padding-top:8px; margin-top:8px;
  font-size:clamp(23px,2.8vw,30px);
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
}
body[data-page="landing"] .precios .plan .rango-pre{ display:inline-block; margin:0; font-size:10px; letter-spacing:.14em; }
body[data-page="landing"] .precios .plan .rango-nota{ margin:2px 0 0; font-size:11.5px; line-height:1.25; }
body[data-page="landing"] .precios .plan .rango-sena{ margin:2px 0 0; font-size:12px; line-height:1.28; color:#DCD7C8; font-weight:500; }
body[data-page="landing"] .precios .plan ul{
  margin:8px 0 10px; padding:7px 0 0; gap:0; border-top:1px solid rgba(244,241,232,.14);
  flex:0 0 auto; align-content:start;
}
body[data-page="landing"] .precios .plan ul li{ font-size:13px; line-height:1.28; align-items:center; gap:8px; padding:2.5px 0; }
/* Pre-XV + Fiesta de XV (.plan--xv) tiene 6 ítems + nota 2027 y fija el alto
   máximo de la pila. Las otras dos tarjetas (.plan--prexv con 4 ítems y
   .plan--boda con 5 ítems, sin nota 2027) aprovechan mejor el espacio interno
   de esa misma tarjeta sin agrandarla ni un píxel. */
body[data-page="landing"] .precios :is(.plan--prexv, .plan--boda) .rango{
  margin-top:10px; padding-top:10px;
}
body[data-page="landing"] .precios :is(.plan--prexv, .plan--boda) .rango-sena{
  margin-top:4px;
}
body[data-page="landing"] .precios :is(.plan--prexv, .plan--boda) ul{
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-evenly;
  margin:10px 0 12px; padding:6px 0 2px;
}
body[data-page="landing"] .precios :is(.plan--prexv, .plan--boda) ul li{
  font-size:13.5px; line-height:1.34; padding:3.5px 0;
}
body[data-page="landing"] .precios .plan ul li::before{
  /* Tilde en círculo de latón, la misma que en la lista de /quince. */
  content:""; width:16px; height:16px; border-radius:50%; margin:0; flex:none;
  background:#C2A25E url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%230B1710%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 12.5l4 4 8-9%27/%3E%3C/svg%3E") center/10px no-repeat;
}
body[data-page="landing"] .precios .plan .btn{
  margin-top:auto; padding-top:10px; padding-bottom:10px; min-height:42px; font-size:13.5px;
  background:#C2A25E var(--v3-laton-btn) 0 0 / 210% 100%; color:#0B1710; border-color:#C9AA66; box-shadow:none;
}
@media (hover:hover) and (pointer:fine){
  body[data-page="landing"] .precios .plan .btn:hover{ background-position:100% 0; color:#0B1710; }
}
/* Celular: tarjetas más compactas (foto 2.2:1, aire justo) para ahorrar scroll
   y que cada una entre cómoda en la pantalla sin perder estética. */
@media (max-width:1023px){
  body[data-page="landing"] .precios .plan-foto{ margin-bottom:8px; }
  body[data-page="landing"] .precios .plan-foto img{ aspect-ratio:2.2 / 1; }
  body[data-page="landing"] .precios .plan .rango{ margin-top:7px; padding-top:7px; }
  body[data-page="landing"] .precios .plan ul{ margin:7px 0 9px; padding-top:6px; }
  body[data-page="landing"] .precios .plan ul li{ padding:2.5px 0; font-size:12.75px; }
  body[data-page="landing"] .precios :is(.plan--prexv, .plan--boda) .rango{ margin-top:9px; padding-top:9px; }
  body[data-page="landing"] .precios :is(.plan--prexv, .plan--boda) ul{ margin:9px 0 11px; padding:6px 0 2px; }
  body[data-page="landing"] .precios :is(.plan--prexv, .plan--boda) ul li{ padding:3px 0; font-size:13.25px; }
  /* El aire va ARRIBA de cada tarjeta (no abajo): un margen de abajo hace que
     la tarjeta pegada se suelte antes y se vaya sin esperar a la última. */
  body[data-page="landing"] #precios .precios.lbv2-stack > .plan{ margin-bottom:0; }
  body[data-page="landing"] #precios .precios.lbv2-stack > .plan + .plan{ margin-top:12px; }
}
/* Dónde mira cada foto cuando se recorta: en la de boda los novios están a
   la derecha del centro (en compu la foto es angosta y quedaban cortados). */
body[data-page="landing"] .precios .plan--prexv .plan-foto img{ object-position:50% 38%; }
body[data-page="landing"] .precios .plan--xv .plan-foto img{ object-position:50% 40%; }
body[data-page="landing"] .precios .plan--boda .plan-foto img{ object-position:60% 30%; }
body[data-page="landing"] .precios-regalo{
  margin:clamp(14px,2.4vw,22px) auto 0; max-width:46ch; text-align:center;
  font-size:14px; line-height:1.5; color:var(--muted);
}
body[data-page="landing"] .precios-regalo b{ color:#0B1710; }
/* Íconos de sobre y QR, los mismos del regalo en el hero de /quince. */
body[data-page="landing"] .precios-regalo .pr-ic{ white-space:nowrap; }
body[data-page="landing"] .precios-regalo .pr-ic svg{ display:inline-block; width:1.15em; height:1.15em; vertical-align:-.2em; margin:0 .3em 0 .1em; color:#7A5F22; }
@media (min-width:1024px){
  body[data-page="landing"] #precios > .wrap > .precios-regalo{ grid-column:2; text-align:left; margin-left:0; }
  /* En compu la tarjeta es horizontal (foto a la izquierda, datos a la
     derecha): con la foto arriba medía más que la pantalla y el botón
     quedaba cortado en la pila. */
  body[data-page="landing"] .precios .plan{ padding-left:calc(41% + clamp(16px,1.8vw,22px)); }
  body[data-page="landing"] .precios .plan > .plan-foto{
    position:absolute; top:6px; bottom:6px; left:6px; width:calc(41% - 6px); margin:0;
  }
  body[data-page="landing"] .precios .plan > .plan-foto img{ height:100%; aspect-ratio:auto; }
}
/* (más peso de selector: index.html trae estas dos reglas en un <style> propio) */
body[data-page="landing"] .precios .plan .rango-nota,
body[data-page="landing"] .precios .plan li.plan-regalo{ color:#7A5F22; }
body[data-page="landing"] .plan .rango-pre{ font-size:11px; }
body[data-page="landing"] .plan .rango small{ font-size:max(.45em,12px); }
body[data-page="landing"] .plan-flag{ font-size:11px; }
body[data-page="landing"] .plan.destacado{
  --ink:#F4F1E8; --ink-2:#DCD7C8; --muted:#A5B0A2; --line:rgba(244,241,232,.16); --line-2:rgba(244,241,232,.3);
  background:#0B1710; color:#F4F1E8; outline:0; box-shadow:0 0 0 2px #C2A25E, var(--sombra-tarjeta);
}
body[data-page="landing"] .plan.destacado h3,
body[data-page="landing"] .plan.destacado .rango{ color:#F4F1E8; }
body[data-page="landing"] .plan.destacado .rango{ color:#C2A25E; }
body[data-page="landing"] .precios .plan.destacado .rango-nota,
body[data-page="landing"] .precios .plan.destacado li.plan-regalo{ color:#DCC28A; }
body[data-page="landing"] .plan-flag{ border-radius:999px; top:16px; right:16px; color:#0B1710; background:#C2A25E; letter-spacing:.12em; }
body[data-page="landing"] .plan.is-elegido{ outline:0; box-shadow:0 0 0 2px #C2A25E, var(--sombra-tarjeta); }
/* La capa que oscurece la tarjeta de atrás en la pila: sobre marfil se veía
   como un velo blanquecino sobre los planes ("Tres formas de contar tu
   historia") y a Leandro no le gusta. En lo claro, sin velo: las tarjetas
   se apilan limpias. */
body[data-page="landing"] .v3-claro .lbv2-stack > * > .lbv2-sombra{ display:none; }

/* En compu las pilas (dudas, precios) se alinean al mismo borde izquierdo
   que el titular, en vez de centrarse: un solo margen en toda la página. */
@media (min-width:721px){
  body[data-page="landing"] :is(.dudas, .precios).lbv2-stack > *{ margin-left:0; }
}
/* En compu, las secciones de tarjetas apiladas (dudas; precios de la
   portada) usaban solo la mitad izquierda de la pantalla. Ahora van en dos
   columnas: el título queda fijo a la izquierda mientras las tarjetas se
   apilan a la derecha, ocupando todo el ancho. En celular no cambia nada. */
@media (min-width:1024px){
  body[data-page="landing"] #problema > .wrap,
  body[data-page="landing"] #precios > .wrap:has(> .precios){
    display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:clamp(40px,5vw,88px); align-items:start;
  }
  body[data-page="landing"] #problema > .wrap > .sec-head,
  body[data-page="landing"] #precios > .wrap:has(> .precios) > .sec-head{
    position:sticky; top:120px; margin:0;
  }
  body[data-page="landing"] #problema > .wrap > .sec-head h2,
  body[data-page="landing"] #precios > .wrap:has(> .precios) > .sec-head h2{ max-width:12ch; }
  body[data-page="landing"] #problema .dudas,
  body[data-page="landing"] #precios .precios{ margin-top:0; }
  body[data-page="landing"] :is(#problema .dudas, #precios .precios).lbv2-stack{ --lbv2-ancho:100%; }
}

/* Portafolio (en lo claro) */
body[data-page="landing"] .port-row,
body[data-page="landing"] .port-grid{ gap:8px; background:transparent; }
body[data-page="landing"] .port-grid.lbv2-stack > .port-row{ margin-bottom:8px; }
body[data-page="landing"] .port-item{ border-radius:var(--r-md); overflow:hidden; box-shadow:none; background:#E6DFCD; }
body[data-page="landing"] .port-item::after{
  left:10px; bottom:10px; border-radius:999px; padding:7px 12px;
  background:rgba(255,252,246,.94); color:#0B1710; letter-spacing:.06em; font-weight:700; font-size:11px;
  max-width:calc(100% - 20px); line-height:1.3;
  white-space:pre-line;   /* data-cap trae un salto después del "·": corta ahí, no a mitad de frase */
}
body[data-page="landing"] .port-item:hover{ box-shadow:0 0 0 2px #C2A25E; }
@media (max-width:480px){
  body[data-page="landing"] .port-item::after{ left:8px; bottom:8px; padding:6px 10px; border-radius:12px; max-width:calc(100% - 16px); }
}


/* =========================================================================
   07 · SECCIONES
   ========================================================================= */

/* Antes / después */
body[data-page="landing"] .cmp{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sombra-tarjeta); }
body[data-page="landing"] .cmp-tag{ border-radius:999px; top:12px; padding:7px 12px; letter-spacing:.08em; font-weight:700; font-size:11px; }
body[data-page="landing"] .cmp-tag.is-before{ left:12px; background:rgba(11,23,16,.78); color:#F4F1E8; }
body[data-page="landing"] .cmp-tag.is-after{ right:12px; background:#C2A25E; color:#0B1710; }
body[data-page="landing"] .cmp-knob{ border-radius:50%; background:#FFFCF6; color:#0B1710; border:0; box-shadow:0 6px 16px -6px rgba(0,0,0,.45); }
body[data-page="landing"] .cmp-hint{ color:var(--muted); }

/* Proceso (nuevo): carril de 6 tarjetas que se desliza de costado. */
body[data-page="landing"] .proceso-head{ position:relative; max-width:none; }
body[data-page="landing"] .proceso-flechas{ display:none; gap:10px; margin-top:22px; }
@media (min-width:720px){ body[data-page="landing"] .proceso-flechas{ display:flex; } }
body[data-page="landing"] .proceso-flecha{
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(244,241,232,.06); color:#F4F1E8; border:1.5px solid rgba(244,241,232,.22);
  transition:background-color .2s ease, border-color .2s ease, opacity .2s ease, transform 220ms cubic-bezier(.23,1,.32,1);
}
body[data-page="landing"] .proceso-flecha svg{ width:20px; height:20px; }
body[data-page="landing"] .proceso-flecha:disabled{ opacity:.3; cursor:default; }
body[data-page="landing"] .proceso-flecha:active:not(:disabled){ transform:scale(.94); transition-duration:100ms; }
body[data-page="landing"] .proceso-flecha:focus-visible{ outline:2px solid #C2A25E; outline-offset:3px; }
@media (hover:hover) and (pointer:fine){
  body[data-page="landing"] .proceso-flecha:hover:not(:disabled){ background:#C2A25E; border-color:#C2A25E; color:#0B1710; }
}
body[data-page="landing"] .proceso-carril{
  list-style:none; margin:clamp(26px,4vw,40px) 0 0; padding:4px var(--pad) 18px;
  display:grid; grid-auto-flow:column; grid-auto-columns:min(78vw,340px); column-gap:14px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  cursor:grab;
}
body[data-page="landing"] .proceso-carril::-webkit-scrollbar{ display:none; }
body[data-page="landing"] .proceso-carril.arrastrando{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
body[data-page="landing"] .proceso-carril:focus-visible{ outline:2px solid #C2A25E; outline-offset:-2px; border-radius:var(--r-lg); }
/* En compu el carril arranca alineado con el texto de la sección. */
@media (min-width:1240px){
  body[data-page="landing"] .proceso-carril{ padding-left:calc((100% - var(--max)) / 2 + var(--pad)); scroll-padding-inline:calc((100% - var(--max)) / 2 + var(--pad)); }
}
body[data-page="landing"] .paso{
  scroll-snap-align:start;
  background:#13261B; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 0 0 1px rgba(244,241,232,.07);
  display:flex; flex-direction:column;
}
body[data-page="landing"] .paso picture{ display:block; aspect-ratio:4 / 3; background:#1B3325; }
body[data-page="landing"] .paso img{ display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
body[data-page="landing"] .paso-txt{ padding:18px 20px 22px; }
/* El número del paso, solo, en un círculo de latón (como el proceso de la
   referencia). El título del paso es la etiqueta; "Paso 1" sobraba. */
body[data-page="landing"] .paso-n{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  font-size:15px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;
  color:#0B1710; background:#C2A25E; margin-bottom:14px;
}
body[data-page="landing"] .paso h3{ font-size:clamp(19px,2.2vw,23px); margin:0 0 8px; color:#F4F1E8; }
body[data-page="landing"] .paso p{ font-size:14.5px; line-height:1.55; color:#A5B0A2; margin:0; }
body[data-page="landing"] .proceso-pie{ margin-top:clamp(18px,3vw,30px); }

/* Video */
body[data-page="landing"] .video-frame{ border-radius:var(--r-lg); overflow:hidden; box-shadow:none; border:0; }
/* En el celular el video va de borde a borde: sin marco propio, todo el
   ancho de la pantalla para la imagen. */
@media (max-width:720px){
  body[data-page="landing"] #reel .video-frame{
    margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1); border-radius:0;
  }
}
body[data-page="landing"] .video-sound{ border-radius:999px; font-size:12px; }
body[data-page="landing"] #reel .small{ color:var(--muted); }

/* Testimonios */
body[data-page="landing"] :is(.testi-featured-quote, .embed-vertical){ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sombra-tarjeta); }
body[data-page="landing"] .testi-featured{ gap:10px; }
/* Mientras el video de YouTube no cargó (app.js lo inserta al llegar a
   pantalla), se ve un botón de play dibujado sobre verde; el iframe lo tapa
   al aparecer. Es un SVG en línea: no suma ninguna descarga. */
body[data-page="landing"] .embed-vertical{ position:relative; background:#0B1710; }
body[data-page="landing"] .embed-vertical::before{
  content:""; position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px;
  border-radius:50%; background:#C2A25E url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M9 7.5v9l7.5-4.5z%27 fill=%27%230B1710%27/%3E%3C/svg%3E") center/26px no-repeat;
}
body[data-page="landing"] .embed-vertical iframe{ position:relative; z-index:1; }
/* La miniatura del video (de YouTube, puesta en el HTML) mientras no cargó:
   antes eran dos cajas negras vacías con un play. */
body[data-page="landing"] .embed-vertical[style*="background-image"]{ background-size:cover; background-position:center; background-repeat:no-repeat; }
/* "5,0 en Google": un renglón, sin caja. */
body[data-page="landing"] .google-strip{
  border-radius:0; background:none; border:0; box-shadow:none; padding:4px 0;
  color:#0B1710;
}
body[data-page="landing"] .google-strip .stars{ color:#7A5F22; }   /* ~5:1 sobre marfil */
body[data-page="landing"] .google-strip a{ color:#0B1710; text-decoration-color:#C2A25E; }
body[data-page="landing"] .testi-carousel-track,
body[data-page="landing"] .testi-slot{ gap:10px; }
body[data-page="landing"] .testi-item{ border-radius:var(--r-md); overflow:hidden; box-shadow:0 0 0 1px rgba(11,23,16,.08); }
body[data-page="landing"] .testi-carousel-flecha{
  border-radius:50%; background:#FFFCF6; color:#0B1710; border:0;
  box-shadow:0 6px 18px -8px rgba(11,23,16,.4);
}

/* Frase de marca: en la portada, losa verde; en /quince, marfil (ahí la
   sección de al lado ya es verde). El latón queda como acento, no como fondo:
   Leandro ya había preferido esta franja sin dorado en v2. */
body[data-page="landing"] .pq-band{ padding:clamp(48px,8vw,96px) 0; }
body[data-page="landing"] .pq-band :is(.pq-text, .pq-text-2){ font-weight:700; letter-spacing:-.02em; }
body[data-page="landing"] .pq-band.v3-losa .pq-text{ color:#F4F1E8; }
body[data-page="landing"] .pq-band.v3-losa .pq-text-2{ color:#C2A25E; opacity:1; }
body[data-page="landing"] .pq-band.v3-claro{ background:#F4F1E8; }
body[data-page="landing"] .pq-band.v3-claro .pq-text{ color:#0B1710; }
body[data-page="landing"] .pq-band.v3-claro .pq-text-2{ color:#56635A; opacity:1; }

/* Invitaciones. En la portada van en losa verde; en /quince, en marfil:
   ahí el texto del carrusel pasa a verde y el nombre del estilo a latón
   oscuro (el latón de siempre sobre marfil no se lee: 2,2:1). */
body[data-page="landing"] .v3-claro .invc{ --invc-tx:#0B1710; --invc-mu:#56635A; --invc-fondo:#F4F1E8; }
body[data-page="landing"] .v3-claro .invc-tema{ color:#7A5F22; }
body[data-page="landing"] .v3-claro .invc-ventajas li{ color:#26362C; }
body[data-page="landing"] .invc-carta{ border-radius:20px; }
body[data-page="landing"] .invc-otro{ font-family:'Archivo', system-ui, sans-serif; font-weight:700; }

/* Calendario (en lo claro y en losa): la tarjeta del calendario (.cal-grid y
   .cal-anios-banner) va en verde oscuro #0E1D14 como las tarjetas de precios,
   con las etiquetas de año (2026 · 2027 · 2028) bien destacadas en dorado. */
body[data-page="landing"] .v3-claro .cal-legend i{ border-radius:50%; border-color:rgba(11,23,16,.3); }
body[data-page="landing"] .v3-claro .cal-legend span{ color:var(--ink-2); }
body[data-page="landing"] .v3-claro .cal-titulo{ color:#0B1710; }
body[data-page="landing"] .v3-claro .cal-estado{ color:var(--muted); }
body[data-page="landing"] .v3-claro .cal-seleccion{
  background:#FFFCF6; border-color:rgba(11,23,16,.14);
}
body[data-page="landing"] .v3-claro .cal-seleccion.is-libre{
  background:rgba(46,160,67,.08); border-color:rgba(46,160,67,.38);
}
body[data-page="landing"] .v3-claro .cal-seleccion.is-tomada{
  background:rgba(229,52,44,.07); border-color:rgba(229,52,44,.38);
}
body[data-page="landing"] .v3-claro .cal-sel-txt{ color:#0B1710; }
body[data-page="landing"] .v3-claro .cal-sel-txt span{ color:#3D4C42; }
body[data-page="landing"] .v3-claro .cal-sel-cta{ color:#7A5F22; }
body[data-page="landing"] .v3-claro .cal-toggle{
  border-radius:999px; background:#0E1D14; color:#F4F1E8; border:1.5px solid rgba(194,162,94,.45);
}
body[data-page="landing"] .v3-claro .cal-toggle:hover{
  border-color:#C2A25E; background:#14281C; color:#F7E3AF;
}
body[data-page="landing"] .v3-losa .cal-toggle{ border-radius:999px; }
body[data-page="landing"] .v3-losa .cal-legend i{ border-radius:50%; }

/* Preguntas */
body[data-page="landing"] .faq{ border-top:1px solid var(--line); }
body[data-page="landing"] .faq-item{ border-bottom:1px solid var(--line); }
body[data-page="landing"] .faq-q{ color:var(--ink); font-weight:700; }
body[data-page="landing"] .faq-q .plus{
  flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:rgba(244,241,232,.07); color:#C2A25E; font-size:20px;
}
body[data-page="landing"] .faq-q .plus{ position:relative; font-size:0; }
body[data-page="landing"] .faq-q .plus::before,
body[data-page="landing"] .faq-q .plus::after{
  content:""; position:absolute; left:50%; top:50%; width:12px; height:1.75px; margin:-.875px 0 0 -6px;
  background:currentColor; border-radius:2px;
}
body[data-page="landing"] .faq-q .plus::after{ transform:rotate(90deg); }
body[data-page="landing"] .v3-claro .faq-q .plus{ background:#FFFCF6; color:#0B1710; box-shadow:0 0 0 1px rgba(11,23,16,.1); }
body[data-page="landing"] .faq-a p{ color:var(--muted); }
body[data-page="landing"] .v3-losa .faq-a a{ color:#DCC28A; }
body[data-page="landing"] .v3-claro .faq-a a{ color:#0B1710; text-decoration-color:#C2A25E; }

/* Sobre mí: el nombre, gigante (como "Pablo Villarroel" en la referencia). */
body[data-page="landing"] .about{ gap:clamp(24px,4vw,56px); }
body[data-page="landing"] .about-photo{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sombra-tarjeta); }
body[data-page="landing"] .about-nombre{
  margin:6px 0 20px; max-width:none;
  font-size:clamp(52px,15vw,128px); line-height:.92; letter-spacing:-.04em;
}
body[data-page="landing"] .about-nombre .about-soy{
  display:block; font-size:.3em; letter-spacing:-.01em; line-height:1.2; color:var(--muted); margin-bottom:.15em;
}
body[data-page="landing"] .about-list li{ color:var(--ink-2); border-color:var(--line); }
/* El 01–05 de v2 no era una secuencia: vuelve a ser una viñeta, un punto de latón. */
body[data-page="landing"] .about-list li::before{
  content:""; counter-increment:none; flex:none;
  width:8px; height:8px; border-radius:50%; background:#C2A25E; margin-top:0;
}
/* Tu foto en "Sobre mí": igual en la portada y en /quince (pedido de
   Leandro): redondeada y con margen, como las demás fotos de la página.
   (Antes en la portada iba de borde a borde y en /quince no: se veían
   distintas.) Sin sombra; en verde, un filete apenas visible la recorta. */
body[data-page="landing"] #sobre-mi .about-photo{ box-shadow:none; border:0; border-radius:var(--r-lg); }
body[data-page="landing"] #sobre-mi.v3-losa .about-photo{ box-shadow:0 0 0 1px rgba(244,241,232,.10); }
body[data-page="landing"] .about-list b{ color:var(--ink); }

/* Cierre (losa verde) */
body[data-page="landing"] .cta-final{ background:#0B1710; }
body[data-page="landing"] .cta-final h2{ color:#F4F1E8; }
body[data-page="landing"] .cta-final h2 em{ opacity:1; }
body[data-page="landing"] .cta-final .lead{ color:#A5B0A2; }
body[data-page="landing"] .cta-final .btn-primary{ background:#C2A25E var(--v3-laton-btn) 0 0 / 210% 100%; color:#0B1710; border-color:#C9AA66; }
/* En lo verde el botón de latón no lleva sombra: sobre fondo oscuro se lee como resplandor. */
body[data-page="landing"] .v3-losa :is(.btn-primary, .btn-brass){ box-shadow:none; }
body[data-page="landing"] .cta-final .microcopy{ color:#A5B0A2; opacity:1; }
body[data-page="landing"] .cta-final .microcopy b{ color:#F4F1E8; }
body[data-page="landing"] .cta-final .cta-info{ border-color:rgba(244,241,232,.14); }
body[data-page="landing"] .cta-final .cta-info :is(span, a){ display:inline-flex; align-items:center; gap:8px; color:#DCD7C8; }
body[data-page="landing"] .cta-final .cta-info b{ color:#F4F1E8; }
body[data-page="landing"] .cta-final .cta-info svg{ width:18px; height:18px; flex:none; color:#C2A25E; }
@media (hover:hover) and (pointer:fine){
  body[data-page="landing"] .cta-final .cta-info a:hover{ color:#C2A25E; }
}

/* Cierre en losa de latón (lo usa /quince/): todo en verde sobre latón. */
body[data-page="landing"] .cta-final.v3-laton{
  --ink:#0B1710; --ink-2:#1F2E24; --muted:#2E3A31; background:#C2A25E;
}
body[data-page="landing"] .cta-final.v3-laton h2{ color:#0B1710; }
body[data-page="landing"] .cta-final.v3-laton h2 em{ color:#0B1710; -webkit-text-fill-color:#0B1710; }
body[data-page="landing"] .cta-final.v3-laton .lead,
body[data-page="landing"] .cta-final.v3-laton .microcopy{ color:#1F2E24; }
body[data-page="landing"] .cta-final.v3-laton .microcopy b,
body[data-page="landing"] .cta-final.v3-laton .cta-info b{ color:#0B1710; }
body[data-page="landing"] .cta-final.v3-laton .btn-primary{ background:#0B1710; color:#F4F1E8; border-color:#0B1710; box-shadow:none; }
body[data-page="landing"] .cta-final.v3-laton .btn-primary:hover{ background:#000; border-color:#000; color:#F4F1E8; }
body[data-page="landing"] .cta-final.v3-laton .cta-info{ border-color:rgba(11,23,16,.2); }
body[data-page="landing"] .cta-final.v3-laton .cta-info :is(span, a){ color:#0B1710; }
body[data-page="landing"] .cta-final.v3-laton .cta-info svg{ color:#0B1710; }

/* Cierre en marfil, el de v2 que Leandro extrañaba ("Tu fecha / no espera."):
   titular enorme y apretado, primera línea en tinta y la segunda en gris
   cálido liso (el #1B1305 al 55% de v2), sin degradado. Botón en tinta. Lo
   usan la portada (#contacto) y /quince (cierre). */
body[data-page="landing"] .cta-final.v3-claro{ background-color:#F4F1E8; color:#0B1710; }
body[data-page="landing"] .cta-final.v3-claro h2{
  color:#0B1710; letter-spacing:-.045em; line-height:.94; max-width:none;
  font-size:clamp(40px,12.4vw,116px);
}
/* Siempre en dos renglones: "Tu fecha" arriba, "no espera." abajo. */
body[data-page="landing"] .cta-final.v3-claro h2 em{
  display:table; /* su propio renglón, pero del ancho de la frase: el trazo no cruza toda la pantalla */
  color:#7D776B; -webkit-text-fill-color:#7D776B; animation:none; opacity:1;
  background:none; padding-bottom:0; /* el cierre, sin trazo: negro + gris liso (a Leandro le gusta así) */
}
body[data-page="landing"] .cta-final.v3-claro .lead{ color:#3A4A3F; }
body[data-page="landing"] .cta-final.v3-claro .btn-primary{ background:#0B1710; color:#F4F1E8; border-color:#0B1710; box-shadow:none; }
body[data-page="landing"] .cta-final.v3-claro .btn-primary:hover{ background:#000; border-color:#000; color:#F4F1E8; }
body[data-page="landing"] .cta-final.v3-claro .microcopy{ color:#56635A; }
body[data-page="landing"] .cta-final.v3-claro .microcopy b,
body[data-page="landing"] .cta-final.v3-claro .cta-info b{ color:#0B1710; }
body[data-page="landing"] .cta-final.v3-claro .cta-info{ border-color:rgba(11,23,16,.18); }
body[data-page="landing"] .cta-final.v3-claro .cta-info :is(span, a){ color:#0B1710; }
body[data-page="landing"] .cta-final.v3-claro .cta-info svg{ color:#7A5F22; }
@media (hover:hover) and (pointer:fine){
  body[data-page="landing"] .cta-final.v3-claro .cta-info a:hover{ color:#7A5F22; }
}

/* Consulta (en lo claro) */
/* Sin la caja blanca: los campos van directo sobre el marfil, a todo el
   ancho. Los campos sí llevan fondo propio (blanco cálido): son controles. */
body[data-page="landing"] .consulta-caja{
  background:none; border-radius:0; border:0; box-shadow:none; padding:0;
}
body[data-page="landing"] .cal-foot{ border-radius:999px; }
body[data-page="landing"] .consulta-form label{ color:var(--ink-2); font-weight:700; }
body[data-page="landing"] .consulta-form .input{
  border-radius:14px; background:#FFFCF6; color:#0B1710; border:1.5px solid rgba(11,23,16,.16);
}
body[data-page="landing"] .consulta-form .input::placeholder{ color:#6F7A72; }
body[data-page="landing"] .consulta-form .input:focus{ border-color:#C2A25E; outline:0; box-shadow:0 0 0 3px rgba(194,162,94,.3); }
body[data-page="landing"] .form-note{ color:var(--muted); }
body[data-page="landing"] .form-note a{ color:var(--ink); }

/* Mapa */
body[data-page="landing"] .embed{
  margin:0 var(--losa-m) clamp(16px,3vw,28px) !important; border-radius:var(--losa-r) !important; overflow:hidden;
}


/* =========================================================================
   08 · PIE, BARRA FIJA, BOTÓN FLOTANTE
   ========================================================================= */
body[data-page="landing"] .site-footer{
  background:#0B1710; color:#F4F1E8; border-top:0;
  margin:var(--losa-m) var(--losa-m) var(--losa-m); border-radius:var(--losa-r);
}
body[data-page="landing"] .cmp-knob svg{ display:block; }
body[data-page="landing"] .site-footer :is(a, p, span){ color:#DCD7C8; }
body[data-page="landing"] .site-footer .footer-col h3{ color:#C2A25E; }
body[data-page="landing"] .site-footer .brand-text{ color:#F4F1E8; }

body[data-page="landing"] .sticky-cta{
  left:10px; right:10px; bottom:10px; border-radius:999px;
  background:#0B1710; border:0; padding:8px 8px 8px 20px;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.6);
}
body[data-page="landing"] .sticky-cta .sc-text strong{ color:#F4F1E8; }
body[data-page="landing"] .sticky-cta .btn{ border-radius:999px; }
body[data-page="landing"] .wa-float{ border-radius:50%; box-shadow:0 12px 28px -10px rgba(11,23,16,.55); }
body[data-page="landing"] .lightbox-img{ border-radius:var(--r-md); }
body[data-page="landing"] :is(.lightbox-cerrar, .lightbox-nav){ border-radius:50%; }


/* =========================================================================
   08a · /QUINCE (landing de anuncios): arreglos de la revisión del 10-oct
   ========================================================================= */

/* Hero de anuncio: sin la firma "Leandro" ni el grano de v2 (asomaban detrás
   de las frases de abajo como una mancha); el "+" y las viñetas pasan de
   cuadrado/rombo a círculo, como todo el resto del sistema. */
body[data-page="landing"] .hero--anuncio :is(.hero-wm, .hero-grain){ display:none; }
body[data-page="landing"] .hero--anuncio .hp-mas::after{ border-radius:50%; width:20px; height:20px; box-shadow:0 0 0 3px #13261B; }
body[data-page="landing"] .hero--anuncio .hp-list li::before{ border-radius:50%; transform:none; width:6px; height:6px; top:.55em; }
body[data-page="landing"] .hero--anuncio .hero-pack{ box-shadow:0 18px 40px -26px rgba(0,0,0,.7); }

/* La cinta "+200 familias" quedaba pegada al borde de abajo de la losa verde. */
body[data-page="landing"] .hero.v3-losa + .trust{ padding-top:clamp(30px,7vw,52px); }
body[data-page="landing"] .hero--anuncio.v3-claro + .trust{ padding-top:clamp(8px,2vw,16px); }

/* Pilas de tarjetas: el colchón de abajo (para que la última tarjeta se
   quede un momento arriba) dejaba un hueco vacío de ~100 px antes de lo que
   sigue. Más corto alcanza. */
body[data-page="landing"] .lbv2-stack{ padding-bottom:clamp(8px,3vh,32px); }
body[data-page="landing"] #portafolio .center.reveal{ margin-top:clamp(18px,4vw,30px) !important; }

/* --- La oferta (#precios de /quince) -------------------------------------
   Antes: siete cajitas con borde (una por ítem), y la tarjeta "¿Sin fiesta?"
   metida adentro de la tarjeta del precio. (Selector con "section#" para ganarle
   al <style> propio de /quince, que va más abajo en el HTML.) Ahora: la lista es una lista
   (tilde en círculo de latón, sin cajas) y el precio es UNA tarjeta; la
   sesión sola va debajo, separada por una línea, no en otra caja. */
body[data-page="landing"] section#precios .oferta-lista{ gap:4px; }
body[data-page="landing"] section#precios .oferta-lista li{
  border:0; background:none; border-radius:0; padding:12px 0 12px 40px;
}
body[data-page="landing"] section#precios .oferta-lista li::before{
  content:""; left:0; top:13px; width:24px; height:24px; border-radius:50%;
  background:#C2A25E url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%230B1710%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 12.5l4 4 8-9%27/%3E%3C/svg%3E") center/14px no-repeat;
}
/* Lista de /quince resaltada: los colores llevan el "section#" para ganarle
   a los de la lista de más abajo. */
body[data-page="landing"] section#precios .oferta-lista li.is-foco b{ color:#0B1710; }
body[data-page="landing"] section#precios .oferta-lista li.is-foco span{ color:#26362C; }
/* La check de la lista de /quince: en el renglón resaltado pasa a verde. */
body[data-page="landing"] section#precios .oferta-lista li.is-foco::before{
  background-color:#0B1710;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23C2A25E%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 12.5l4 4 8-9%27/%3E%3C/svg%3E");
}
body[data-page="landing"] section#precios .oferta-lista b{ font-weight:700; font-size:16px; line-height:1.35; }
body[data-page="landing"] section#precios .oferta-lista span{ color:#A5B0A2; }

body[data-page="landing"] section#precios .oferta-precio{
  border:0; border-radius:28px; background:#13261B; padding:26px 22px 24px;
  box-shadow:0 0 0 1.5px #C2A25E, 0 24px 48px -30px rgba(0,0,0,.8);
}
body[data-page="landing"] section#precios .oferta-etq{
  font-weight:700; letter-spacing:.1em; font-size:13.5px; border-bottom-color:rgba(244,241,232,.14);
}
body[data-page="landing"] section#precios .oferta-desde{ font-size:11.5px; letter-spacing:.1em; color:#DCC28A; }
/* El precio 2027, en rojo y TACHADO EN DIAGONAL (pedido de Leandro): la
   raya horizontal pasaba justo por el medio de los números y no se leía
   bien el 5.500.000. Rojo claro para que se lea sobre el verde (~6:1). */
body[data-page="landing"] section#precios .oferta-tachado{ font-size:19px; color:#FF7A70; }
body[data-page="landing"] section#precios .oferta-tachado s{
  text-decoration:none; position:relative; display:inline-block; padding:0 .15em;
}
body[data-page="landing"] section#precios .oferta-tachado s::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; margin-top:-.75px;
  background:#FF7A70; border-radius:2px; transform:rotate(-7deg);
}
body[data-page="landing"] section#precios .oferta-monto{ font-weight:700; letter-spacing:-.02em; }
/* "Reservando ahora se congela el precio": una línea de texto, no otra caja
   adentro de la tarjeta del precio. */
body[data-page="landing"] section#precios .oferta-aviso{ border-radius:0; background:none; font-size:14px; line-height:1.4; padding:0; color:#DCC28A; font-weight:600; }
body[data-page="landing"] section#precios .oferta-pago{ font-size:14.5px; }
body[data-page="landing"] section#precios .oferta-solo{
  margin-top:24px; padding:22px 0 0; border:0; border-top:1px solid rgba(244,241,232,.14);
  border-radius:0; background:none;
}
body[data-page="landing"] section#precios .oferta-etq-solo{ color:#DCC28A; letter-spacing:.1em; font-size:11.5px; }
body[data-page="landing"] section#precios .oferta-solo-tit,
body[data-page="landing"] section#precios .oferta-solo-monto{ font-weight:700; }
/* "Consultar solo la sesión" se partía en dos renglones. */
body[data-page="landing"] section#precios .oferta .btn{ white-space:nowrap; letter-spacing:.03em; padding-left:18px; padding-right:18px; }
@media (max-width:380px){ body[data-page="landing"] section#precios .oferta .btn{ font-size:12px; } }

/* Cierre verde y pie verde quedaban pegados como una sola mancha. */
body[data-page="landing"] .site-footer{ margin-top:clamp(18px,4vw,32px); }

/* Detalles chicos */
body[data-page="landing"] .sticky-cta .btn-primary{ box-shadow:none; }
body[data-page="landing"] .site-header .brand-text small{ font-size:10px; }
body[data-page="landing"] .site-footer .brand-text small{ font-size:10px; }
body[data-page="landing"] .cmp-hint{ max-width:60ch; }
body[data-page="landing"] .v3-claro .invc-carta[data-p="c"]{ box-shadow:0 22px 44px -22px rgba(11,23,16,.45); }
/* El 01/02 de la tarjeta del hero no era una secuencia: sale. */
body[data-page="landing"] .hero--anuncio .hp-num{ display:none; }
/* Texto de lectura más grande (la mamá que lee tiene 25–54 años y un
   celular chico): nada de párrafos en 12–13 px. */
body[data-page="landing"] .duda p{ font-size:14.5px; line-height:1.6; }
body[data-page="landing"] .microcopy{ font-size:13.5px; line-height:1.5; }
body[data-page="landing"] .hero--anuncio .hp-list li{ font-size:.9em; }
body[data-page="landing"] .sc-num-accion{ font-size:11px; }


/* =========================================================================
   08b · MOVIMIENTO Y RESPUESTA AL TOQUE (revisión con criterio de Emil Kowalski)
   Tres ideas: (1) lo que entra, entra rápido y con ease-out fuerte; (2) lo
   que se va, se va más rápido de lo que entró; (3) todo lo que se toca
   responde al toque. Solo transform y opacity: liviano en gama baja.
   ========================================================================= */
body[data-page="landing"]{
  --v3-salida:cubic-bezier(.23,1,.32,1);     /* ease-out fuerte: entradas y respuestas */
  --v3-vaiven:cubic-bezier(.77,0,.175,1);    /* ease-in-out: cosas que se mueven en pantalla */
}

/* Hero: antes el botón terminaba de aparecer a los ~1,35 s (0,5 s de espera
   + 0,85 s de animación). Desde un anuncio, el botón tiene que estar ahí ya. */
body[data-page="landing"] .hero-tile{ animation-duration:.6s; }
body[data-page="landing"] .hero-cobs li:nth-child(1) .hero-tile{ animation-delay:0s; }
body[data-page="landing"] .hero-cobs li:nth-child(2) .hero-tile{ animation-delay:.06s; }
body[data-page="landing"] .hero-copy h1{ animation-duration:.55s; animation-delay:.04s; }
body[data-page="landing"] .hero-copy .lead,
body[data-page="landing"] .hero-pack{ animation-duration:.55s; animation-delay:.1s; }
body[data-page="landing"] .hero-cta{ animation-duration:.55s; animation-delay:.16s; }
body[data-page="landing"] .hero-badge,
body[data-page="landing"] .hero-confianza{ animation-duration:.55s; animation-delay:.2s; }

/* Aparición al scrollear: más corta y con escalonado de 60 ms (eran 120 ms:
   la sexta tarjeta llegaba 0,6 s tarde). */
body[data-page="landing"] .reveal{ transition-duration:.6s; }
body[data-page="landing"] .stagger-item{ transition-duration:.5s; }
body[data-page="landing"] .reveal-stagger.in-view .stagger-item:nth-child(2){ transition-delay:.06s; }
body[data-page="landing"] .reveal-stagger.in-view .stagger-item:nth-child(3){ transition-delay:.12s; }
body[data-page="landing"] .reveal-stagger.in-view .stagger-item:nth-child(4){ transition-delay:.18s; }
body[data-page="landing"] .reveal-stagger.in-view .stagger-item:nth-child(5){ transition-delay:.24s; }
body[data-page="landing"] .reveal-stagger.in-view .stagger-item:nth-child(6){ transition-delay:.3s; }

/* Barra fija de abajo y botón flotante: entran con calma, se van rápido.
   (En CSS la transición que manda es la del estado de llegada: la regla base
   rige la salida, la de .show rige la entrada.) */
body[data-page="landing"] .sticky-cta{ transition:transform .22s var(--v3-salida), opacity .16s ease; }
body[data-page="landing"] .sticky-cta.show{ transition:transform .42s var(--v3-salida), opacity .3s ease; }
body[data-page="landing"] .wa-float{ transition:transform .2s var(--v3-salida), opacity .16s ease; }
body[data-page="landing"] .wa-float.show{ transition:transform .42s var(--v3-salida), opacity .3s ease; }

/* Carrusel de invitaciones: las tarjetas cambian de lugar en pantalla, así
   que van con ease-in-out y más cortas (eran 0,6 s). Siguen siendo
   transiciones: si se toca "Otro estilo" rápido, retoman desde donde están. */
body[data-page="landing"] .invc-carta{ transition:transform .42s var(--v3-vaiven), opacity .3s ease; }
body[data-page="landing"] .invc-otro svg{ transition:transform .42s var(--v3-vaiven), color .2s ease; }
body[data-page="landing"] .invc-otro{ transition:transform .16s var(--v3-salida), background-color .2s ease, color .2s ease; }
body[data-page="landing"] .invc-otro:active{ transform:scale(.96); transition-duration:.1s; }

/* Preguntas: el "+" gira 45° (algo que se transforma en pantalla). */
body[data-page="landing"] .faq-q .plus{ transition:transform .2s var(--v3-vaiven); }
/* En el celular un :hover queda "pegado" después de tocar: la pregunta se
   quedaba en dorado (y en lo claro, dorado sobre marfil no se lee). El
   cambio de color pasa a ser solo con mouse. */
body[data-page="landing"] .faq-q:hover{ color:var(--ink); }
@media (hover:hover) and (pointer:fine){
  body[data-page="landing"] .v3-losa .faq-q:hover{ color:#C2A25E; }
  body[data-page="landing"] .v3-claro .faq-q:hover{ color:#7A5F22; }
}

/* Todo lo que se toca responde al toque (achique sutil, 100 ms al apretar,
   suelta con calma). */
body[data-page="landing"] :is(.testi-carousel-flecha, .lightbox-nav, .lightbox-cerrar, .cal-toggle, .sc-num, .wa-float){
  transition-property:transform, opacity, background-color, color;
}
body[data-page="landing"] :is(.testi-carousel-flecha, .lightbox-nav, .lightbox-cerrar):active{ transform:scale(.92); transition-duration:.1s; }
body[data-page="landing"] .cal-toggle:active,
body[data-page="landing"] .sc-num:active{ transform:scale(.97); transition-duration:.1s; }
body[data-page="landing"] .wa-float.show:active{ transform:scale(.94); transition-duration:.1s; }
body[data-page="landing"] .port-item{ transition:transform .2s var(--v3-salida), box-shadow .2s ease; }
body[data-page="landing"] .port-item:active{ transform:scale(.985); transition-duration:.1s; }
body[data-page="landing"] .invc-carta[data-p="i"]:active,
body[data-page="landing"] .invc-carta[data-p="d"]:active{ opacity:.6; }



/* =========================================================================
   09 · MOVIMIENTO REDUCIDO
   ========================================================================= */

/* Apilado orgánico con el header y la barra fija:
   - Al bajar (.site-header.oculto): la cabecera se guarda y la pila sube a
     20px del borde superior, dejando más aire abajo para la barra flotante.
   - Al subir (.site-header:not(.oculto)): la cabecera reaparece y la pila
     baja suavemente a 78px (en el mismo tiempo .42s) para que la píldora
     del header nunca tape los escalones superiores de las tarjetas. */
body[data-page="landing"] .lbv2-stack > *{
  transition:top .42s var(--v3-salida);
}
body[data-page="landing"] .site-header.oculto ~ main .lbv2-stack{ --lbv2-alto-cab:24px; }
body[data-page="landing"] .site-header:not(.oculto) ~ main .lbv2-stack{ --lbv2-alto-cab:82px; }
@media (max-width:720px){
  body[data-page="landing"] .site-header.oculto ~ main .lbv2-stack{ --lbv2-alto-cab:18px; }
  body[data-page="landing"] .site-header:not(.oculto) ~ main .lbv2-stack{ --lbv2-alto-cab:76px; }
  body[data-page="landing"] .precios.lbv2-stack{ padding-bottom:76px; }
}

/* Calendario: los meses van en un solo panel continuo verde oscuro (#0E1D14)
   separados por un hilo fino, igual que la franja superior de años. */
body[data-page="landing"] :is(.v3-claro, .v3-losa) .cal-grid{
  gap:0; border-radius:var(--r-md); overflow:hidden;
  background:#0E1D14;
  box-shadow:0 0 0 1px rgba(244,241,232,.12), 0 20px 44px -26px rgba(11,23,16,.65);
  --cal-hilo:rgba(244,241,232,.10);
}
body[data-page="landing"] :is(.v3-claro, .v3-losa) .cal-mes{
  background:transparent; border-radius:0; box-shadow:none;
  border-left:0; border-top:0;
  border-right:1px solid var(--cal-hilo);
  border-bottom:1px solid var(--cal-hilo);
  margin:0 -1px -1px 0;
}
@media (max-width:640px){
  body[data-page="landing"] :is(.v3-claro, .v3-losa) .cal-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}