/* ═════════════════════════════════════════════════════════════════════════
   Landings comerciales — Coty Ilumina
   Hoja compartida por TODAS las landings de venta (una por producto).

   Es autónoma a propósito: NO depende de css/styles.css. Una landing que
   está circulando por WhatsApp no se puede romper porque el sitio cambió.

   La marca sale del PLAYBOOK de carrouseles, que es donde vive de verdad:
   Cormorant Garamond (titulares, lo emocional en itálica) + Lato (cuerpo),
   violeta y crema con el lima como chispa, el destello de 4 puntas como
   firma, y ritmo alternando placas oscuras y claras. Coty en la página,
   no una consultora anónima.

   ─────────────────────────────────────────────────────────────────────────
   CÓMO SE ARMA UNA LANDING: copiar landings/_PLANTILLA.html, borrar los
   bloques que no uses y reemplazar los textos. Nada más. Si necesitás un
   estilo que no está acá, avisá — no lo pongas suelto en tu HTML, porque
   entonces la próxima landing no lo tiene.
   ─────────────────────────────────────────────────────────────────────────

   ÍNDICE DE CLASES (esto es lo que tenés que leer)

   ESTRUCTURA
     .seccion ............ una placa de la página (padding vertical + márgenes)
     .limite ............. contenedor centrado, máx 1180px. Va adentro de .seccion
     .clara .............. placa crema (fondo claro)
     .oscura ............. placa violeta + grilla de líneas crema
     .hondo .............. placa violeta hondo (para el cierre, más peso)
     .angosta ............ variante de .limite: máx 760px, para bloques de texto

   FIRMA VISUAL
     .destello ........... la estrella de 4 puntas. NUNCA sobre el texto.
                           Esquina: --ne / --no / --se / --so
                           Ajustes por inline style, SIEMPRE como variables:
                           --d tamaño · --op opacidad · --x y --y distancias.
                           No pongas width/top a mano: el celular necesita
                           poder achicarlo y no puede pisar tu inline style.
     .destello--movil-no . lo saca en pantallas de menos de 720px
     .regla .............. el subrayado lima de 110px que abre cada bloque
     .kicker ............. volanta chiquita en mayúsculas arriba del título

   PORTADA
     .portada ............ el hero: foto full-bleed + degradé violeta
     .portada__foto ...... la foto; la URL va en --foto:url('...')
     .portada__velo ...... el degradé violeta encima de la foto
     .portada__contenido . la columna de texto (h1 va acá adentro)
     .portada__bajada .... el párrafo debajo del h1
     .portada__datos ..... fila de 2-4 datos duros (precio, duración, cupo)
     .portada__dato / __d / __v .... cada dato: rótulo + valor

   BLOQUES COMERCIALES
     .bloque ............. bloque de título + cuerpo. h2 y .bloque__cuerpo
     .bloque__cuerpo ..... los párrafos del bloque
     .valor / .valor__item ......... propuesta de valor en tarjetas
     .valor__t / .valor__d ......... título y texto de cada tarjeta
     .filtro ............. "para quién es / para quién no" (dos columnas)
     .filtro__col ........ cada columna. Modificadores --si y --no
     .filtro__lista ...... el <ul>; cada <li> lleva su SVG (#tilde o #cruz)
     .pasos / .paso ...... el proceso paso a paso (grilla oscura)
     .paso__n / __t / __d  número, título y descripción del paso
     .precios ............ contenedor de una o dos fichas de precio
     .precio ............. la ficha. .precio--destacado la resalta en lima
     .precio__que / __monto / __unidad / __lista / __nota
     .prueba ............. franja de prueba social
     .testimonio ......... cita de una clienta. .testimonio__quien = la firma
     .cifras / .cifra .... números duros (150 personas, 7 años…)
     .cita ............... placa de una sola frase grande, centrada
     .faq ................ preguntas frecuentes (<details>, funciona sin JS)
     .faq__item / .faq__p / .faq__r
     .quien .............. Coty: foto + texto. NO borrar este bloque
     .cierre ............. CTA final
     .acciones ........... fila de botones

   ACCIONES Y FORMULARIO
     .btn .btn--principal .......... botón lima (la acción que querés)
     .btn .btn--fantasma ........... botón secundario (borde)
     .btn--ancho ................... ocupa todo el ancho disponible
     .cta-fija ..................... barra fija abajo, solo en celular
     .form / .campo / .campo--doble  formulario Netlify
     .campo__error ................. el mensaje; se muestra si el input
                                     tiene aria-invalid="true"
     .form__nota / .form__ok

     .pie ................ pie de página

   MOVIMIENTO (opcional, y solo si hay JS)
     .entra .entra-2..4 .. entrada de la portada al cargar
     .revelar ............ aparece al scrollear; el JS le agrega .visible
     Todo va gateado por .js en <html>: sin JS la página se ve entera.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --violeta:      #363759;
  --violeta-hondo:#2A2B43;
  --indigo:       #57558D;
  --violeta-claro:#DED6EC;
  --lavanda:      #CEC6E3;
  --marino:       #193F67;
  --lima:         #D5D938;
  --lima-hondo:   #6B6D18; /* el lima no contrasta sobre crema: para texto sobre claro, este */
  --crema:        #F2E9C6;
  --crema-soft:   #FAF6E9;
  --durazno:      #F2D3AC;
  --blanco:       #ffffff;

  --tinta:        var(--violeta-hondo);
  --tinta-media:  #55566F;
  /* 0.70 y no menos: a 0.66 el texto terciario sobre crema daba 4.52:1, que
     pasa por medio punto. Con 0.70 son 5.1:1 y deja de estar al filo. */
  --tinta-suave:  rgba(42,43,67,0.70);

  --linea-clara:  rgba(42,43,67,0.14);
  --linea-oscura: rgba(242,233,198,0.18);

  --medida: 66ch;                        /* ancho de lectura cómodo */
  --aire:   clamp(4rem, 8.5vw, 8.5rem);  /* respiro vertical entre placas */
  --margen: clamp(1.35rem, 6vw, 7rem);   /* margen lateral */
  --radio:  4px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: 'Lato', system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.75;
  color: var(--tinta);
  background: var(--crema-soft);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
/* Lo emocional va en itálica: es la regla de la marca. */
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; }

p { max-width: var(--medida); }
img { max-width: 100%; }

::selection { background: var(--lima); color: var(--violeta-hondo); }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--violeta); outline-offset: 3px; border-radius: 2px; }
.oscura :focus-visible, .hondo :focus-visible, .portada :focus-visible, .cta-fija :focus-visible {
  outline-color: var(--lima);
}

/* ── El destello: firma visual de la marca ────────────────────────────── */

/* Se ubica con una clase de esquina y se ajusta con variables:
   --d tamaño, --op opacidad, --x/--y distancia al borde.
   .destello--movil-no lo saca del celular, donde el texto ocupa todo. */
.destello {
  position: absolute; pointer-events: none; z-index: 1;
  width: var(--d, 72px); height: var(--d, 72px); opacity: var(--op, 0.45);
}
.destello svg { display: block; width: 100%; height: 100%; }
.destello--ne { top: var(--y, 10%); right: var(--x, 7%); }
.destello--no { top: var(--y, 10%); left:  var(--x, 5%); }
.destello--se { bottom: var(--y, 11%); right: var(--x, 7%); }
.destello--so { bottom: var(--y, 11%); left:  var(--x, 5%); }
@media (max-width: 720px) { .destello--movil-no { display: none; } }

/* ── Estructura ───────────────────────────────────────────────────────── */

.seccion { padding: var(--aire) var(--margen); position: relative; overflow: hidden; }
.limite  { max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; }
.angosta { max-width: 760px; }

.clara  { background: var(--crema-soft); color: var(--tinta); }
.oscura { background: var(--violeta);       color: rgba(242,233,198,0.88); }
.hondo  { background: var(--violeta-hondo); color: rgba(242,233,198,0.88); }

/* Grilla de líneas crema, apenas visible, sobre los fondos violeta */
.oscura::before, .hondo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(242,233,198,0.05) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(90deg, rgba(242,233,198,0.05) 0 1px, transparent 1px 74px);
}
.oscura h2, .oscura h3, .hondo h2, .hondo h3 { color: var(--crema); }

/* ── Volanta y regla ──────────────────────────────────────────────────── */

.regla { display: block; width: 110px; height: 3px; background: var(--lima); margin-bottom: 1.6rem; }

.kicker {
  font-family: 'Lato', sans-serif; font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--lima-hondo); margin-bottom: 0.9rem; max-width: none;
}
.oscura .kicker, .hondo .kicker, .portada .kicker { color: var(--lima); }
/* Las variantes de portada CLARAS invierten esto: sobre crema el lima da
   1.41:1. Va el lima hondo, que da 5.08:1. Si se agrega otra portada clara,
   sumarla acá y no parchear la página. */
.portada--lateral .kicker, .portada--carta .kicker { color: var(--lima-hondo); }

/* ── Portada: foto de Coty + degradé violeta (receta del playbook) ────── */

.portada {
  position: relative; min-height: min(92vh, 820px);
  display: flex; align-items: flex-end;
  padding: calc(var(--aire) * 0.9) var(--margen) clamp(2.75rem, 6vw, 5rem);
  background: var(--violeta-hondo);
  overflow: hidden;
}
.portada__foto {
  position: absolute; inset: 0;
  background-image: var(--foto);
  background-size: cover;
  background-position: var(--foco, 72% center); /* --foco encuadra la cara */
}
/* El velo tiene DOS trabajos: que el titular se lea, y tapar lo que compite.
   coty-trabajando.jpg es una foto de evento: trae el "CLEAN MONEY" del
   proyector a la derecha y el banner de KÓNIQ (otra marca) al centro-izquierda.
   El playbook prohíbe las dos cosas. El banner ya quedaba abajo del 0.88 del
   tramo izquierdo; el proyector NO, porque el tramo derecho bajaba a 0.12 y
   ahí es justo donde está. Por eso el último tramo vuelve a subir: la cara de
   Coty (60-72%) sigue despejada y el texto ajeno se va. */
.portada__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(42,43,67,0.96) 0%,
      rgba(54,55,89,0.88) 38%,
      rgba(54,55,89,0.32) 66%,
      rgba(42,43,67,0.70) 84%,
      rgba(42,43,67,0.86) 100%),
    linear-gradient(to top, rgba(42,43,67,0.88) 0%, transparent 46%);
}
.portada__contenido { position: relative; z-index: 3; max-width: 780px; }
.portada h1 {
  font-size: clamp(2.9rem, 9vw, 5.6rem);
  color: var(--crema); letter-spacing: -0.03em;
  max-width: 15ch; text-wrap: balance;
}
.portada h1 em { color: var(--lima); }
.portada__bajada {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: rgba(242,233,198,0.84); line-height: 1.6;
  margin-top: clamp(1.1rem, 2.4vw, 1.8rem); max-width: 46ch;
}
.portada .acciones { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }

/* Datos duros abajo del hero: precio, duración, cupo. Lo que se pregunta primero. */
.portada__datos {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.3rem, 2.5vw, 1.9rem);
  border-top: 1px solid var(--linea-oscura);
}
.portada__dato__d {
  font-size: 0.64rem; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--lima); font-weight: 700; max-width: none;
}
.portada__dato__v {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15; margin-top: 0.2rem; color: var(--crema); max-width: none;
}

/* ── Bloque genérico ──────────────────────────────────────────────────── */

.bloque h2 { font-size: clamp(1.95rem, 4.5vw, 3.4rem); max-width: 19ch; text-wrap: balance; }
.bloque h2 em { color: var(--indigo); }
.oscura .bloque h2 em, .hondo .bloque h2 em { color: var(--lima); }
.bloque__cuerpo { margin-top: clamp(1.3rem, 3vw, 2rem); font-size: 1.06rem; }
.bloque__cuerpo p + p { margin-top: 1.05rem; }
.oscura .bloque__cuerpo, .hondo .bloque__cuerpo { color: rgba(242,233,198,0.8); }

/* ── Propuesta de valor: qué te llevás ────────────────────────────────── */

.valor {
  display: grid; gap: clamp(1.6rem, 3.5vw, 2.8rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin-top: clamp(2.2rem, 4.5vw, 3.5rem);
}
.valor__item { padding-top: 1.2rem; border-top: 2px solid var(--lima); }
.oscura .valor__item, .hondo .valor__item { border-top-color: var(--lima); }
.valor__t {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  line-height: 1.15; margin-bottom: 0.5rem; color: var(--violeta);
}
.oscura .valor__t, .hondo .valor__t { color: var(--crema); }
.valor__d { font-size: 1rem; line-height: 1.65; color: var(--tinta-media); max-width: 34ch; }
.oscura .valor__d, .hondo .valor__d { color: rgba(242,233,198,0.75); }

/* ── Para quién es / para quién no ────────────────────────────────────── */

.filtro {
  display: grid; gap: clamp(1.8rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  margin-top: clamp(2.2rem, 4.5vw, 3.5rem);
}
.filtro__col { padding-top: 1.25rem; border-top: 2px solid; }
.filtro__col--si { border-top-color: var(--lima); }
.filtro__col--no { border-top-color: var(--lavanda); }
.filtro__t {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.15;
  margin-bottom: 1.1rem; color: var(--violeta);
}
.oscura .filtro__t, .hondo .filtro__t { color: var(--crema); }
.filtro__lista { list-style: none; display: grid; gap: 0.85rem; }
.filtro__lista li {
  display: flex; gap: 0.75rem; align-items: flex-start;
  font-size: 1.02rem; line-height: 1.6; color: var(--tinta-media);
}
.oscura .filtro__lista li, .hondo .filtro__lista li { color: rgba(242,233,198,0.82); }
.filtro__lista svg { flex: 0 0 auto; margin-top: 0.42rem; }
/* La columna "no" va un punto más apagada que la "sí". OJO: esta regla tiene
   la misma especificidad que `.oscura .filtro__lista li` y viene después, así
   que sobre placa violeta le ganaba y pintaba el texto de tinta sobre violeta:
   1.14:1, es decir invisible. La columna que más vende, borrada. Por eso van
   las dos reglas de abajo, con un `.oscura`/`.hondo` adelante para ganar. */
.filtro__col--no .filtro__lista li { color: var(--tinta-suave); }
.oscura .filtro__col--no .filtro__lista li,
.hondo  .filtro__col--no .filtro__lista li { color: rgba(242,233,198,0.70); }

/* ── El proceso, paso a paso ──────────────────────────────────────────── */

.pasos {
  display: grid; gap: 1px; margin-top: clamp(2.2rem, 4.5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  background: rgba(242,233,198,0.14);
  border: 1px solid rgba(242,233,198,0.14);
}
.paso { background: var(--violeta); padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.3rem, 2.5vw, 1.8rem); }
.hondo .paso { background: var(--violeta-hondo); }
.clara .pasos { background: var(--linea-clara); border-color: var(--linea-clara); }
.clara .paso  { background: var(--crema-soft); }
.paso__n {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 2.4rem; line-height: 1; color: var(--lima);
  display: block; margin-bottom: 0.7rem;
}
.clara .paso__n { color: var(--lima-hondo); }
.paso__t {
  font-family: 'Cormorant Garamond', serif; font-size: 1.55rem;
  color: var(--crema); line-height: 1.15; margin-bottom: 0.4rem;
}
.clara .paso__t { color: var(--violeta); }
.paso__d { font-size: 0.95rem; line-height: 1.6; color: rgba(242,233,198,0.72); max-width: 30ch; }
.clara .paso__d { color: var(--tinta-media); }

/* ── Precio ───────────────────────────────────────────────────────────── */

.precios {
  display: grid; gap: clamp(1.3rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-top: clamp(2.2rem, 4.5vw, 3.5rem);
  align-items: start;
}
.precio {
  position: relative;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border: 1px solid var(--linea-oscura);
  background: rgba(242,233,198,0.04);
}
.clara .precio { border-color: var(--linea-clara); background: var(--blanco); }
.precio--destacado { border: 2px solid var(--lima); background: rgba(213,217,56,0.07); }

.precio__que {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.15; color: var(--crema); margin-bottom: 0.9rem;
}
.clara .precio__que { color: var(--violeta); }
.precio__monto {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(3rem, 8vw, 4.4rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--lima); max-width: none;
}
.clara .precio__monto { color: var(--violeta); }
.precio__unidad {
  font-size: 0.92rem; color: rgba(242,233,198,0.7);
  margin-top: 0.5rem; max-width: 32ch;
}
.clara .precio__unidad { color: var(--tinta-media); }
.precio__lista {
  list-style: none; margin-top: 1.5rem; padding-top: 1.3rem;
  border-top: 1px solid var(--linea-oscura);
  display: grid; gap: 0.7rem;
}
.clara .precio__lista { border-top-color: var(--linea-clara); }
.precio__lista li {
  display: flex; gap: 0.7rem; align-items: flex-start;
  font-size: 0.99rem; line-height: 1.55; color: rgba(242,233,198,0.82);
}
.clara .precio__lista li { color: var(--tinta-media); }
.precio__lista svg { flex: 0 0 auto; margin-top: 0.4rem; }
.precio__nota {
  margin-top: 1.4rem; font-size: 0.86rem; line-height: 1.6;
  color: rgba(242,233,198,0.62);
}
.clara .precio__nota { color: var(--tinta-suave); }
.precio .btn { margin-top: 1.6rem; }

/* Cinta de cupo / urgencia honesta ("quedan 3 lugares"), no miedo inventado */
.precio__cinta {
  display: inline-block; margin-bottom: 1rem;
  padding: 0.32rem 0.8rem; border-radius: 999px;
  background: var(--lima); color: var(--violeta-hondo);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}

/* ── Prueba social ────────────────────────────────────────────────────── */

.prueba {
  display: grid; gap: clamp(1.8rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.testimonio { position: relative; padding-top: 1.3rem; border-top: 1px solid var(--linea-clara); }
.oscura .testimonio, .hondo .testimonio { border-top-color: var(--linea-oscura); }
.testimonio__texto {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.32;
  color: var(--violeta); max-width: 30ch;
}
.oscura .testimonio__texto, .hondo .testimonio__texto { color: var(--crema); }
.testimonio__quien {
  margin-top: 0.9rem; font-size: 0.8rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--tinta-suave); max-width: none;
}
/* 0.63 y no 0.60: a 0.60 daba 4.47:1 sobre el violeta, justo abajo de 4.5. */
.oscura .testimonio__quien, .hondo .testimonio__quien { color: rgba(242,233,198,0.63); }

/* Números duros */
.cifras {
  display: flex; flex-wrap: wrap; gap: clamp(1.8rem, 5vw, 4.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.cifra__n {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: 1;
  color: var(--lima-hondo); max-width: none;
}
.oscura .cifra__n, .hondo .cifra__n { color: var(--lima); }
.cifra__q {
  font-size: 0.86rem; line-height: 1.5; color: var(--tinta-media);
  margin-top: 0.5rem; max-width: 18ch;
}
.oscura .cifra__q, .hondo .cifra__q { color: rgba(242,233,198,0.72); }

/* ── Cita grande ──────────────────────────────────────────────────────── */

.cita { text-align: center; }
.cita blockquote {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(2rem, 5.2vw, 3.6rem); font-weight: 400;
  line-height: 1.14; letter-spacing: -0.025em;
  color: var(--violeta); max-width: 17ch; margin: 0 auto; text-wrap: balance;
}
/* OJO: van las dos formas, descendiente Y mismo elemento. Con solo la
   primera, un <section class="seccion oscura cita"> NO matchea y el blockquote
   queda violeta sobre violeta (1.00:1): la frase que la página existe para
   dejar, invisible. Pasó de verdad en vip y equipos. */
.oscura .cita blockquote, .hondo .cita blockquote,
.oscura.cita blockquote, .hondo.cita blockquote { color: var(--crema); }
.cita blockquote b { font-style: normal; font-weight: 600; color: var(--indigo); }
.oscura .cita blockquote b, .hondo .cita blockquote b,
.oscura.cita blockquote b, .hondo.cita blockquote b { color: var(--lima); }
.cita__pie {
  margin: clamp(1.5rem, 3vw, 2.4rem) auto 0;
  font-size: 1.02rem; color: var(--tinta-media); max-width: 52ch;
}
.oscura .cita__pie, .hondo .cita__pie { color: rgba(242,233,198,0.75); }

/* ── Quién te acompaña — Coty tiene que aparecer ──────────────────────── */

.quien {
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
}
.quien__foto { position: relative; }
.quien__foto img { width: 100%; height: auto; display: block; }
.quien__foto .destello { bottom: -20px; right: -20px; width: 72px; height: 72px; }
.quien h2 { font-size: clamp(1.85rem, 4vw, 2.9rem); max-width: 16ch; }
.quien h2 em { color: var(--indigo); }
.oscura .quien h2 em, .hondo .quien h2 em { color: var(--lima); }
.quien__texto { margin-top: 1.15rem; font-size: 1.06rem; color: var(--tinta-media); }
.oscura .quien__texto, .hondo .quien__texto { color: rgba(242,233,198,0.8); }
.quien__texto p + p { margin-top: 1rem; }
.quien__credenciales {
  margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--linea-clara);
  font-size: 0.86rem; letter-spacing: 0.05em; color: var(--tinta-suave); max-width: none;
}
.oscura .quien__credenciales, .hondo .quien__credenciales {
  border-top-color: var(--linea-oscura); color: rgba(242,233,198,0.62);
}

/* ── Preguntas frecuentes: <details> nativo, anda sin una línea de JS ─── */

.faq { margin-top: clamp(2rem, 4vw, 3rem); max-width: 840px; }
.faq__item { border-top: 1px solid var(--linea-clara); }
.oscura .faq__item, .hondo .faq__item { border-top-color: var(--linea-oscura); }
.faq__item:last-child { border-bottom: 1px solid var(--linea-clara); }
.oscura .faq__item:last-child, .hondo .faq__item:last-child { border-bottom-color: var(--linea-oscura); }

.faq__p {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 1.25rem 0;
  font-family: 'Cormorant Garamond', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.25; color: var(--violeta);
}
.oscura .faq__p, .hondo .faq__p { color: var(--crema); }
.faq__p::-webkit-details-marker { display: none; }
/* La cruz que se vuelve menos: dibujada, no un emoji */
.faq__p::after {
  content: ''; flex: 0 0 auto; width: 14px; height: 14px; margin-top: 0.45rem;
  background:
    linear-gradient(var(--lima-hondo), var(--lima-hondo)) center/100% 2px no-repeat,
    linear-gradient(var(--lima-hondo), var(--lima-hondo)) center/2px 100% no-repeat;
  transition: transform 0.22s ease;
}
.oscura .faq__p::after, .hondo .faq__p::after {
  background:
    linear-gradient(var(--lima), var(--lima)) center/100% 2px no-repeat,
    linear-gradient(var(--lima), var(--lima)) center/2px 100% no-repeat;
}
.faq__item[open] .faq__p::after { transform: rotate(45deg); background-size: 100% 2px, 0 0; }
.faq__r { padding-bottom: 1.35rem; font-size: 1.02rem; color: var(--tinta-media); max-width: 62ch; }
.oscura .faq__r, .hondo .faq__r { color: rgba(242,233,198,0.78); }
.faq__r p + p { margin-top: 0.9rem; }

/* ── Cierre ───────────────────────────────────────────────────────────── */

.cierre h2 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); max-width: 17ch; text-wrap: balance; }
.cierre__texto { margin-top: 1.3rem; font-size: 1.08rem; color: rgba(242,233,198,0.8); }
.clara .cierre__texto { color: var(--tinta-media); }

.acciones { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: clamp(1.9rem, 4vw, 2.7rem); }

.btn {
  display: inline-block; padding: 1rem 2.3rem; border-radius: 999px;
  font-family: 'Lato', sans-serif; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; text-align: center;
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.btn--principal { background: var(--lima); color: var(--violeta-hondo); }
.btn--principal:hover { background: var(--crema); transform: translateY(-2px); }
.btn--fantasma { border-color: rgba(242,233,198,0.42); color: var(--crema); }
.btn--fantasma:hover { border-color: var(--lima); color: var(--lima); transform: translateY(-2px); }
.clara .btn--fantasma { border-color: rgba(42,43,67,0.28); color: var(--violeta); }
.clara .btn--fantasma:hover { border-color: var(--violeta); background: var(--violeta); color: var(--crema); }
.btn--ancho { display: block; width: 100%; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* Barra fija de celular: en el teléfono el CTA no puede quedar a 6 scrolls */
.cta-fija {
  position: fixed; inset: auto 0 0 0; z-index: 40; display: none;
  padding: 0.7rem clamp(0.9rem, 4vw, 1.5rem);
  background: rgba(42,43,67,0.97);
  border-top: 1px solid rgba(242,233,198,0.16);
  align-items: center; justify-content: space-between; gap: 0.9rem;
}
/* 14ch partía "4 horas · 30 lugares" en tres líneas y dejaba "lugares" solo
   abajo. Con 18ch entra en dos y la barra deja de verse rota. */
.cta-fija__que {
  font-size: 0.78rem; line-height: 1.3; color: rgba(242,233,198,0.8); max-width: 18ch;
}
.cta-fija__que b { display: block; font-weight: 700; color: var(--crema); }
.cta-fija .btn { padding: 0.8rem 1.4rem; font-size: 0.72rem; }
@media (max-width: 720px) {
  .cta-fija { display: flex; }
  body:has(.cta-fija) { padding-bottom: 5rem; }
}

/* ── Formulario (Netlify) ─────────────────────────────────────────────── */

.form { margin-top: clamp(2rem, 4vw, 3rem); max-width: 640px; display: grid; gap: 1.15rem; }
.campo { display: grid; gap: 0.4rem; }
.campo--doble { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.campo label {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--tinta-media);
}
.oscura .campo label, .hondo .campo label { color: rgba(242,233,198,0.72); }

.campo input, .campo select, .campo textarea {
  font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: 300;
  color: var(--tinta); background: var(--blanco);
  border: 1px solid rgba(42,43,67,0.24); border-radius: var(--radio);
  padding: 0.85rem 1rem; width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.oscura .campo input, .oscura .campo select, .oscura .campo textarea,
.hondo .campo input,  .hondo .campo select,  .hondo .campo textarea {
  background: rgba(242,233,198,0.07); border-color: rgba(242,233,198,0.28); color: var(--crema);
}
.campo textarea { min-height: 118px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(42,43,67,0.42); }
.oscura .campo input::placeholder, .hondo .campo input::placeholder,
.oscura .campo textarea::placeholder, .hondo .campo textarea::placeholder { color: rgba(242,233,198,0.4); }

.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 2px solid var(--violeta); outline-offset: 1px; border-color: var(--violeta);
}
.oscura .campo input:focus-visible, .hondo .campo input:focus-visible,
.oscura .campo select:focus-visible, .hondo .campo select:focus-visible,
.oscura .campo textarea:focus-visible, .hondo .campo textarea:focus-visible {
  outline-color: var(--lima); border-color: var(--lima);
}

/* Error: se pinta con aria-invalid, que es lo que además lee el lector de pantalla */
.campo [aria-invalid="true"] { border-color: #B3261E; background: rgba(179,38,30,0.05); }
.oscura .campo [aria-invalid="true"], .hondo .campo [aria-invalid="true"] {
  border-color: #F2B8B5; background: rgba(242,184,181,0.1);
}
.campo__error { display: none; font-size: 0.84rem; line-height: 1.45; color: #8C1D18; max-width: none; }
.oscura .campo__error, .hondo .campo__error { color: #F2B8B5; }
.campo:has([aria-invalid="true"]) .campo__error { display: block; }

/* Honeypot de Netlify: existe para los bots, no se ve ni se tabula */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.form__nota { font-size: 0.84rem; line-height: 1.55; color: var(--tinta-suave); }
.oscura .form__nota, .hondo .form__nota { color: rgba(242,233,198,0.6); }
/* Regla lima ARRIBA, no a la izquierda: es el mismo gesto que .regla,
   .valor__item y .filtro__col. La barrita lateral es de otra casa. */
.form__ok {
  margin-top: 1.4rem; padding: 1.15rem 1.35rem;
  border-top: 2px solid var(--lima); background: rgba(213,217,56,0.12);
  font-size: 1rem; color: var(--tinta);
}
.oscura .form__ok, .hondo .form__ok { color: var(--crema); }

/* ── Pie ──────────────────────────────────────────────────────────────── */

.pie {
  padding: 2rem var(--margen); background: var(--violeta-hondo);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.82rem; color: rgba(242,233,198,0.58);
}
.pie a:hover { color: var(--lima); }

/* ── Movimiento: siempre agregado, nunca requisito ────────────────────── */

@keyframes asoma { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.js .entra   { animation: asoma 0.95s cubic-bezier(0.16, 1, 0.3, 1) both; }
.js .entra-2 { animation-delay: 0.10s; }
.js .entra-3 { animation-delay: 0.20s; }
.js .entra-4 { animation-delay: 0.30s; }

.js .revelar { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.js .revelar.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .entra { animation: none; }
  .js .revelar { opacity: 1; transform: none; transition: none; }
}

/* ── Responsive (probado a 375px) ─────────────────────────────────────── */

@media (max-width: 820px) {
  .quien { grid-template-columns: 1fr; }
  .quien__foto { max-width: 300px; }
  .portada__foto { background-position: var(--foco-movil, 62% center); }
  .portada__velo {
    background: linear-gradient(to top, rgba(42,43,67,0.97) 0%, rgba(42,43,67,0.9) 46%, rgba(54,55,89,0.5) 100%);
  }
}

@media (max-width: 720px) {
  /* En el celular el texto ocupa todo el ancho: los destellos se achican y
     el de la portada se va al borde de arriba, para no pisar el titular
     (regla del playbook). Por eso en el HTML el tamaño va como --d y NUNCA
     como width: así esta regla lo puede limitar. */
  .destello { width: min(var(--d, 72px), 56px); height: min(var(--d, 72px), 56px); }
  .portada .destello { top: 2.5%; right: 5%; left: auto; bottom: auto; }
}

@media (max-width: 480px) {
  .portada { min-height: min(94vh, 700px); }
  .portada__datos { gap: 1.1rem 1.8rem; }
  .acciones .btn { flex: 1 1 100%; }
  .cifras { gap: 1.5rem 2.2rem; }
  .cifra__q { max-width: 14ch; }
}

/* ── Impresión: alguien la va a guardar en PDF y mandarla ─────────────── */

@media print {
  body { background: #fff; padding-bottom: 0 !important; }
  .oscura, .hondo, .paso, .pie, .portada, .precio { background: #fff !important; color: #000 !important; }
  .oscura::before, .hondo::before, .portada__velo, .destello { display: none !important; }
  .portada { min-height: 0; display: block; }
  .portada__foto { position: relative; height: 210px; inset: auto; }
  .portada h1, .oscura h2, .oscura h3, .hondo h2, .hondo h3,
  .paso__t, .valor__t, .filtro__t, .precio__que, .precio__monto,
  .testimonio__texto, .cita blockquote, .faq__p, .cierre h2, .portada__dato__v { color: #000 !important; }
  .kicker, .portada__dato__d, .paso__n, .cifra__n, .precio__cinta {
    color: var(--violeta) !important; background: none !important;
  }
  .paso__d, .valor__d, .cierre__texto, .portada__bajada, .precio__unidad, .precio__nota,
  .filtro__lista li, .precio__lista li, .faq__r, .cita__pie, .testimonio__quien,
  .oscura .bloque__cuerpo, .hondo .bloque__cuerpo, .quien__texto, .pie { color: #333 !important; }
  .regla, .valor__item, .filtro__col { border-color: var(--violeta) !important; }
  .regla { background: var(--violeta) !important; }
  .acciones, .cta-fija, .form { display: none !important; }
  /* Abrir las respuestas al imprimir. Anda en navegadores nuevos; en los
     viejos se imprime solo lo que el lector dejó abierto, que es aceptable. */
  .faq__item::details-content { content-visibility: visible; block-size: auto; }
  .seccion { padding: 1.8rem 0; break-inside: avoid; }
  .pasos { background: none; gap: 0; }
  .paso { border: 1px solid #ccc; }
  .js .entra { animation: none !important; }
  .js .revelar { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   VARIANTES DE PORTADA Y DENSIDAD
   ───────────────────────────────────────────────────────────────────────
   Las 6 landings salieron con el MISMO esqueleto: portada con foto y
   después clara/oscura/clara/oscura como un metrónomo. El playbook pide
   "alternar para dar ritmo", no repetir una fórmula.

   Coherencia de marca ≠ igualdad de plantilla. Mismo alfabeto, distintas
   frases: cada página se tiene que parecer a LO QUE VENDE, no a las otras.
   Acá viven las formas alternativas de arrancar y de respirar.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Portada TIPOGRÁFICA — para el ticket alto (VIP) ────────────────────
   A cuatro mil dólares la foto sobra: lo que vende es el aire. Sin imagen,
   fondo hondo, tipografía enorme y tres datos. El lujo es lo que se saca. */
.portada--tipografica {
  min-height: min(88vh, 760px);
  background: var(--violeta-hondo);
  align-items: center;
  text-align: left;
}
.portada--tipografica .portada__foto,
.portada--tipografica .portada__velo { display: none; }
.portada--tipografica .portada__contenido { max-width: 900px; }
.portada--tipografica h1 {
  font-size: clamp(3.2rem, 11vw, 7rem);
  max-width: 13ch; line-height: 1.02;
}
.portada--tipografica .portada__bajada { max-width: 40ch; font-size: clamp(1.1rem, 2vw, 1.45rem); }
/* Una regla lima larga en vez de imagen: el gesto gráfico de la marca, solo. */
.portada--tipografica .portada__contenido::before {
  content: ''; display: block; width: clamp(80px, 18vw, 220px); height: 3px;
  background: var(--lima); margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

/* ── Portada LATERAL — para el proceso (3×3) ────────────────────────────
   Texto a la izquierda, foto a la derecha, fondo claro. Se lee como el
   comienzo de un recorrido, no como un cartel. */
.portada--lateral {
  min-height: 0; background: var(--crema-soft); color: var(--tinta);
  display: grid; align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  padding: calc(var(--aire) * 0.85) var(--margen);
}
.portada--lateral .portada__velo { display: none; }
.portada--lateral .portada__foto {
  position: relative; inset: auto; order: 2;
  aspect-ratio: 4 / 5; border-radius: var(--radio);
}
.portada--lateral .portada__contenido { order: 1; max-width: none; }
.portada--lateral h1 { color: var(--tinta); font-size: clamp(2.7rem, 6vw, 4.4rem); max-width: 13ch; }
.portada--lateral h1 em { color: var(--indigo); }
.portada--lateral .portada__bajada { color: var(--tinta-media); }
.portada--lateral .portada__datos { border-top-color: var(--linea-clara); }
.portada--lateral .portada__dato__d { color: var(--lima-hondo); }
.portada--lateral .portada__dato__v { color: var(--tinta); }

/* ── Portada CARTA — para quien ya está adentro (upgrade) ───────────────
   No hay que presentar a nadie: ya te conoce y ya te paga. Sin foto, sin
   titular gigante. Arranca hablando, como una carta. */
.portada--carta {
  min-height: 0; background: var(--crema-soft); color: var(--tinta);
  align-items: flex-start;
  padding: clamp(3rem, 7vw, 6rem) var(--margen) clamp(2rem, 4vw, 3.5rem);
}
.portada--carta .portada__foto, .portada--carta .portada__velo { display: none; }
.portada--carta h1 {
  color: var(--tinta); font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 20ch;
}
.portada--carta h1 em { color: var(--indigo); }
.portada--carta .portada__bajada { color: var(--tinta-media); max-width: 54ch; }

/* ── Portada MÍNIMA — una sola pantalla (newsletter) ────────────────────
   Cero fricción: un titular, una línea y un campo. Nada más. */
.portada--minima {
  min-height: min(72vh, 620px); align-items: center; justify-content: center;
  text-align: center; background: var(--violeta);
}
.portada--minima .portada__foto, .portada--minima .portada__velo { display: none; }
.portada--minima .portada__contenido { max-width: 620px; }
.portada--minima h1 { max-width: 16ch; margin-inline: auto; }
.portada--minima .portada__bajada { margin-inline: auto; }

/* ── Portada EVENTO — el dato manda (workshop) ──────────────────────────
   Lo primero que se pregunta es cuándo, dónde y si quedan lugares. Los
   datos suben al nivel del titular en vez de quedar de pie de página. */
.portada--evento .portada__datos {
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.2rem, 2.4vw, 1.8rem);
  border: 1px solid var(--linea-oscura); border-radius: var(--radio);
  background: rgba(42,43,67,0.55);
  backdrop-filter: blur(2px);
}
.portada--evento .portada__dato__v { font-size: clamp(1.6rem, 3vw, 2.3rem); }

/* ── Densidad ───────────────────────────────────────────────────────────
   A más caro, más aire y menos texto. A más informativo, más compacto. */
.aire--amplio  { --aire: clamp(5.5rem, 12vw, 12rem); --medida: 58ch; }
.aire--amplio .bloque h2 { font-size: clamp(2.3rem, 5.4vw, 4rem); max-width: 15ch; }
.aire--denso   { --aire: clamp(3rem, 6vw, 6rem); --medida: 72ch; }
.aire--denso .bloque h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); max-width: 22ch; }

@media (max-width: 860px) {
  .portada--lateral { grid-template-columns: 1fr; }
  .portada--lateral .portada__foto { order: 1; aspect-ratio: 16 / 10; }
  .portada--lateral .portada__contenido { order: 2; }
  .portada--tipografica h1 { font-size: clamp(2.8rem, 12vw, 4rem); }
}