/* =========================================================================
   mi catálogo — capa visual del sitio comercial (landing)
   -------------------------------------------------------------------------
   Se carga SOLO desde `base_landing.html`, después de `app.css`. El panel y
   los catálogos de las tiendas nunca la piden.

   Por qué existe este archivo y no se tocó `app.css`:
   `.hero`, `.seccion`, `.precio-grande` y `.lista-check` las comparten el
   panel, el catálogo público y las páginas legales (se verificó con grep antes
   de escribir una línea). Redefinirlas allá arriba habría movido pantallas que
   nadie pidió mover. Aquí todo cuelga de `#landing-root` —el id del <body> del
   landing— así que ninguna regla puede escaparse a otra superficie.

   Reglas de la casa que este archivo respeta:
   · Mobile-first. Cero librerías, cero fuentes descargadas, cero imágenes
     externas: los dibujos son formas CSS (regla de oro 4 y la CSP del core).
   · Contraste AA, foco siempre visible, reduced-motion obedecido.
   · Neutralidad de marca: aquí no se nombra a ningún proveedor de mercancía.
   ========================================================================= */

/* ------------------------------------------------------ tokens propios --- */
#landing-root {
  /* Papel cálido y tinta profunda: la paleta de `app.css`, un punto más
     contrastada para que los titulares aguanten tamaños grandes. */
  --l-papel: #fdfaf7;
  --l-papel-2: #f8f0ea;
  --l-tinta-alta: #2a1b21;
  --l-borde: #ecdfd7;
  --l-borde-fuerte: #ddc9bd;

  --l-rosa: var(--primario);
  --l-rosa-osc: var(--primario-oscuro);
  --l-rosa-tinte: #fdeef3;
  --l-rosa-claro: #f6c7d8;
  --l-vino: #7c2d4a;          /* acento profundo para titulares y acentos */
  --l-oro: #9a6412;
  --l-oro-tinte: #fdf4e4;
  --l-oscuro: #33202a;

  /* Aquí vivía un `--tinta-suave` propio (#736963) porque el de `app.css`
     (#8a7f79) no llegaba a 4,5:1. El problema no era del landing: era del
     token, y el panel y las tiendas lo sufrían igual. Ya está corregido en
     `app.css` (#6f655f, 4,83:1 en el peor fondo), así que este override se
     eliminó para no tener dos grises secundarios distintos en la misma app. */

  --l-sombra-1: 0 1px 2px rgba(51, 32, 42, .05), 0 10px 26px -14px rgba(51, 32, 42, .22);
  --l-sombra-2: 0 2px 6px rgba(51, 32, 42, .07), 0 26px 54px -22px rgba(51, 32, 42, .34);
  --l-radio-g: 22px;

  /* Un serif de sistema para los titulares: da calidez y peso editorial sin
     descargar una sola fuente. El cuerpo sigue en la sans de `--fuente`, que
     es la que mejor se lee en pantallas pequeñas. */
  --l-display: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;

  background: var(--l-papel);
}

/* `app.css` da a `.hero`/`.seccion` un `padding: X 0` que, cuando van en el
   mismo elemento que `.contenedor`, se come el padding lateral y en móvil el
   texto queda pegado al borde. Estaba parchado a mano en CADA plantilla del
   landing; se resuelve una sola vez, aquí. */
#landing-root .hero.contenedor,
#landing-root .seccion.contenedor { padding-left: var(--e4); padding-right: var(--e4); }

/* Titular de `_landing_fallback.html`, `404.html` y `/entrar`, que no son de
   este módulo pero comparten esta base: que no se queden en la tipografía
   vieja mientras el resto crece. */
#landing-root .hero h1 { font-size: clamp(1.9rem, 6.4vw, 2.9rem); font-family: var(--l-display); }

/* ------------------------------------------- saltar al contenido (a11y) --- */
.l-saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--l-oscuro); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--radio-sm) 0; text-decoration: none; font-weight: 700;
}
.l-saltar:focus { left: 0; }

/* ------------------------------------------------------------- navegación - */
.l-nav-envoltura {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 250, 247, .93);
  border-bottom: 1px solid var(--l-borde);
  backdrop-filter: saturate(150%) blur(10px);
}
.l-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); padding-top: 10px; padding-bottom: 10px;
}
/* El alto lo fijaba el cuadrito de 32px. El relleno sube el objetivo a 44px
   sin agrandar el dibujo ni mover la barra. */
.l-marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 6px 0; }
.l-marca-tile {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
  background: var(--l-rosa); position: relative;
  box-shadow: 0 2px 8px -2px rgba(162, 53, 88, .55);
}
/* Cuatro casillas: el mismo dibujo del favicon y del icono de catálogo. */
.l-marca-tile::before {
  content: ""; position: absolute; left: 8px; top: 8px;
  width: 6px; height: 6px; border-radius: 2px; background: #fff;
  box-shadow: 10px 0 0 #fff, 0 10px 0 rgba(255, 255, 255, .72), 10px 10px 0 rgba(255, 255, 255, .72);
}
.l-marca-txt {
  font-family: var(--l-display); font-weight: 700; font-size: 1.22rem;
  letter-spacing: -.02em; color: var(--l-tinta-alta);
}
.l-nav-links { display: flex; align-items: center; gap: var(--e2); }
.l-nav-link {
  display: none; padding: 10px 12px; border-radius: var(--radio-sm);
  color: var(--tinta-media); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.l-nav-link:hover { background: var(--l-rosa-tinte); color: var(--l-rosa-osc); }
.l-nav-link:focus-visible, .l-marca:focus-visible, .l-pie a:focus-visible {
  outline: 3px solid var(--l-rosa); outline-offset: 2px; border-radius: var(--radio-sm);
}
/* En móvil no caben las cuatro: se van «Precios» y «Contacto», que están en el
   pie de todas las páginas. «Entrar» se queda —es la puerta de quien ya es
   clienta— y solo desaparece por debajo de 400 px, donde ya no cabe nada. */
.l-nav-entrar { display: inline-flex; padding-left: 8px; padding-right: 8px; }
@media (max-width: 400px) {
  .l-marca-txt { font-size: 1.02rem; }
  .l-nav-entrar { display: none; }
}

/* --------------------------------------------------------- ritmo y aire --- */
/* El ritmo vertical se acortó (antes e7/e8): en móvil dos secciones seguidas
   sumaban ~96 px de aire muerto y el scroll se sentía vacío. Ahora e6 en móvil
   y e7 en escritorio: lleno y con intención, sin apelmazar. */
.l-sec { padding: var(--e6) 0; }
.l-sec--tinte {
  background: linear-gradient(180deg, var(--l-papel-2), var(--l-papel));
  border-top: 1px solid var(--l-borde); border-bottom: 1px solid var(--l-borde);
}
.l-sec--blanco {
  background: var(--superficie);
  border-top: 1px solid var(--l-borde); border-bottom: 1px solid var(--l-borde);
}
.l-sec--rosa {
  background: linear-gradient(180deg, var(--l-rosa-tinte), var(--l-papel));
  border-top: 1px solid #f3d8e2; border-bottom: 1px solid var(--l-borde);
}

.l-encabezado { max-width: 46rem; margin: 0 auto var(--e5); text-align: center; }
.l-ojo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--l-rosa-osc); margin-bottom: var(--e3);
}
.l-ojo::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--l-rosa);
}
.l-h2 {
  font-family: var(--l-display); font-weight: 700;
  font-size: clamp(1.6rem, 5.2vw, 2.3rem); line-height: 1.14; letter-spacing: -.025em;
  color: var(--l-tinta-alta); margin: 0 0 var(--e3);
}
.l-h3 { font-size: 1.08rem; margin: 0 0 var(--e2); color: var(--l-tinta-alta); }
.l-lead { font-size: 1.05rem; color: var(--tinta-media); margin: 0; }
.l-lead-angosto { max-width: 34rem; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ hero -- */
.l-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% -10%, #fce7ef 0%, rgba(252, 231, 239, 0) 58%),
    radial-gradient(90% 70% at -10% 0%, #fdf1e6 0%, rgba(253, 241, 230, 0) 55%),
    var(--l-papel);
  border-bottom: 1px solid var(--l-borde);
  padding: var(--e5) 0 var(--e6);
}
.l-hero-rejilla { display: grid; gap: var(--e5); align-items: center; }
.l-hero h1 {
  font-family: var(--l-display); font-weight: 700;
  font-size: clamp(2.1rem, 8.4vw, 3.3rem); line-height: 1.06; letter-spacing: -.032em;
  color: var(--l-tinta-alta); margin: 0 0 var(--e4);
}
/* El trazo bajo la frase clave: se dibuja con un degradado, no con imagen. */
.l-resalte {
  color: var(--l-rosa-osc);
  background: linear-gradient(180deg, transparent 62%, #fbd9e5 62%, #fbd9e5 92%, transparent 92%);
  padding: 0 .06em;
}
.l-hero-lead { font-size: 1.1rem; color: var(--tinta-media); max-width: 34rem; margin: 0 0 var(--e5); }
.l-cta { display: flex; flex-wrap: wrap; gap: var(--e3); }
.l-cta .btn { flex: 1 1 auto; }

.l-sellos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e5); }
.l-sello {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px 7px 11px; border-radius: var(--radio-full);
  background: var(--superficie); border: 1px solid var(--l-borde);
  font-size: .84rem; font-weight: 600; color: var(--tinta-media);
  box-shadow: var(--l-sombra-1);
}
.l-sello::before { content: "✓"; color: var(--exito); font-weight: 800; font-size: .9rem; }

/* ----------------------------------------------------- cifras destacadas -- */
/* Antes eran tres números flotando sueltos bajo el hero. Ahora viven en un
   panel con marco y separadores: se leen como una ficha de tres datos, no como
   texto huérfano. Cada uno lleva su iconito para anclarlo a un concepto. */
.l-cifras {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: var(--e6);
  background: var(--superficie); border: 1px solid var(--l-borde);
  border-radius: var(--l-radio-g); box-shadow: var(--l-sombra-1); overflow: hidden;
}
.l-cifra {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 3px; padding: var(--e4) var(--e2);
}
.l-cifra + .l-cifra { border-left: 1px solid var(--l-borde); }
.l-cifra-ico { color: var(--l-rosa-osc); line-height: 0; margin-bottom: 2px; }
.l-cifra-ico svg { display: block; width: 22px; height: 22px; }
.l-cifra .n {
  display: block; font-family: var(--l-display); font-weight: 700;
  font-size: clamp(1.55rem, 5.4vw, 2.2rem); line-height: 1; letter-spacing: -.03em;
  color: var(--l-vino); font-variant-numeric: tabular-nums;
}
.l-cifra .r { display: block; font-size: .78rem; color: var(--tinta-media); margin-top: 4px; line-height: 1.35; }

/* --------------------------------------------------------------- tarjetas - */
.l-rejilla-3 { display: grid; gap: var(--e4); grid-template-columns: 1fr; }
.l-rejilla-2 { display: grid; gap: var(--e4); grid-template-columns: 1fr; }
.l-tarjeta {
  background: var(--superficie); border: 1px solid var(--l-borde);
  border-radius: var(--l-radio-g); padding: var(--e5);
  box-shadow: var(--l-sombra-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.l-tarjeta:hover { transform: translateY(-3px); box-shadow: var(--l-sombra-2); }
.l-tarjeta p:last-child { margin-bottom: 0; }

/* iconos de beneficio: SVG monolínea inline en el HTML. Nada de imágenes ni de
   recursos apuntando a otro sitio desde la hoja (regla de oro 4 + CSP). El tile
   pone el fondo, el aro y el color; cada tarjeta trae su propio trazo y hereda
   el color por currentColor. */
.l-icono {
  width: 56px; height: 56px; border-radius: 17px; margin-bottom: var(--e4);
  background: linear-gradient(150deg, var(--l-rosa-tinte), #fff);
  border: 1px solid #f3d8e2; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--l-rosa-osc);
  box-shadow: 0 8px 18px -12px rgba(162, 53, 88, .55);
  transition: transform .18s ease, box-shadow .18s ease;
}
.l-tarjeta:hover .l-icono { transform: translateY(-2px) rotate(-2deg); }
.l-icono svg { width: 28px; height: 28px; display: block; }
/* Clases compartidas por todos los SVG inline del landing (iconos, pasos,
   cifras): trazo redondeado que hereda color, y relleno para acentos. */
.l-ico { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.l-ico-fill { fill: currentColor; stroke: none; }

/* -------------------------------------------------------- pasos numerados - */
.l-pasos { display: grid; gap: var(--e6); grid-template-columns: 1fr; counter-reset: l-paso; }
.l-paso {
  position: relative; z-index: 1;
  background: var(--superficie); border: 1px solid var(--l-borde);
  border-radius: var(--l-radio-g); padding: var(--e6) var(--e5) var(--e5);
  box-shadow: var(--l-sombra-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.l-paso:hover { transform: translateY(-3px); box-shadow: var(--l-sombra-2); }
.l-paso::before {
  counter-increment: l-paso; content: counter(l-paso);
  position: absolute; top: -18px; left: var(--e5);
  width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(150deg, var(--l-rosa), var(--l-rosa-osc)); color: #fff;
  font-family: var(--l-display); font-weight: 700; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -6px rgba(162, 53, 88, .7);
}
/* Iconito del paso, arriba a la derecha del número: da una pista visual de la
   acción (subir, compartir, recibir) sin robarle protagonismo al titular. */
.l-paso-ico {
  position: absolute; top: -8px; right: var(--e5);
  color: var(--l-rosa-osc); line-height: 0;
  background: var(--superficie); border: 1px solid var(--l-borde);
  border-radius: 12px; padding: 7px; box-shadow: var(--l-sombra-1);
}
.l-paso-ico svg { width: 22px; height: 22px; display: block; }
/* Conector punteado entre los tres pasos, solo cuando van en fila (escritorio).
   Se dibuja por detrás y solo asoma en los huecos: las tarjetas son opacas y
   tienen z-index mayor, así que la línea «une» los números sin cruzarles la
   cara. En móvil (una columna) no aparece. */
@media (min-width: 720px) {
  .l-pasos { position: relative; }
  .l-pasos::before {
    content: ""; position: absolute; z-index: 0; top: 4px; left: 16%; right: 16%; height: 2px;
    background: repeating-linear-gradient(90deg, var(--l-rosa-claro) 0 7px, transparent 7px 15px);
  }
}

/* -------------------------------------------------- mockup: el celular ---- */
/* La zona mide lo mismo que el celular (no la columna entera): así la
   tarjetita flotante se ancla al MOCKUP y no le cae encima tapando un precio.
   El ancho va aquí, no en `.l-fono`: con `width: fit-content` en la zona, el
   `width: 100%` del hijo se resolvía contra su propio contenido y el celular
   se encogía a la mitad. */
.l-fono-zona {
  position: relative; width: 100%; max-width: 288px;
  margin-left: auto; margin-right: auto;
}
.l-fono {
  width: 100%; background: var(--l-oscuro);
  border-radius: 34px; padding: 9px; box-shadow: var(--l-sombra-2);
}
.l-fono-pantalla {
  background: var(--superficie); border-radius: 26px; overflow: hidden; position: relative;
}
.l-fono-notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 96px; height: 19px; background: var(--l-oscuro);
  border-radius: 0 0 12px 12px; z-index: 2;
}
.l-fono-cab {
  display: flex; align-items: center; gap: 10px;
  padding: 28px 14px 12px; border-bottom: 1px solid var(--borde);
}
.l-fono-logo {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--l-rosa), var(--l-rosa-osc)); color: #fff;
  font-weight: 800; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.l-fono-nombre { font-weight: 700; font-size: .88rem; line-height: 1.2; color: var(--l-tinta-alta); }
.l-fono-sub { font-size: .68rem; color: var(--tinta-suave); }
.l-fono-chips { display: flex; gap: 6px; padding: 11px 14px 4px; }
.l-fono-chip {
  font-size: .66rem; font-weight: 700; padding: 5px 10px; border-radius: var(--radio-full);
  border: 1px solid var(--borde-fuerte); color: var(--tinta-suave);
}
.l-fono-chip.on { background: var(--l-rosa); border-color: var(--l-rosa); color: #fff; }
.l-fono-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px 12px; }
.l-fono-prod {
  border: 1px solid var(--borde); border-radius: 12px; overflow: hidden;
  background: var(--superficie); box-shadow: 0 2px 7px -5px rgba(51, 32, 42, .35);
}
/* La foto del producto es un SVG inline (un tubo, un labial, un frasco, un
   tarro): un catálogo de verdad muestra producto, no un cuadro gris. El dibujo
   llena el cuadro; el fondo pastel lo trae cada SVG en su propio degradado. */
.l-fono-foto { aspect-ratio: 1/1; }
.l-fono-foto svg { display: block; width: 100%; height: 100%; }
.l-fono-txt { padding: 6px 8px 8px; display: flex; align-items: center; gap: 6px; }
.l-fono-txt > div { min-width: 0; }
.l-fono-txt .n {
  font-size: .66rem; font-weight: 600; line-height: 1.25; color: var(--tinta-media);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.l-fono-txt .p { font-size: .78rem; font-weight: 800; color: var(--l-rosa-osc); font-variant-numeric: tabular-nums; }
/* El «+» de agregar: el detalle que hace que se lea como una tienda usable. */
.l-fono-add {
  margin-left: auto; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--l-rosa); color: #fff; font-size: .95rem; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
/* El verde de WhatsApp de la marca (#25D366 y sus vecinos claros) da 3,1:1
   contra el blanco: pasa como texto GRANDE y este rótulo mide .76rem. Es texto
   real —no una imagen— y se lee, así que se oscurece hasta 4,9:1. Sigue siendo
   inequívocamente el verde de WhatsApp; lo que cambia es que ahora lo ve
   alguien con la pantalla al sol o con la vista cansada, que es media clientela
   de este producto. */
.l-fono-barra {
  background: #18813f; color: #fff; text-align: center;
  font-size: .76rem; font-weight: 700; padding: 12px;
}
/* La nota del pedido que le entra a ella. Estuvo flotando sobre el mockup y
   ahí siempre tapaba algo: la tarjeta mide 208 px y el celular 288, así que
   cualquier solape se comía un producto. Va debajo, en flujo normal, alineada
   al ancho del celular: se lee igual y no hay ancho de pantalla en el que
   estorbe. */
.l-fono-aviso {
  display: flex; gap: 10px; align-items: flex-start; margin-top: var(--e4);
  background: var(--superficie); border: 1px solid var(--l-borde);
  border-radius: 16px; padding: 12px 14px; box-shadow: var(--l-sombra-1);
}
.l-fono-aviso::before {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-top: 5px;
  border-radius: 50%; background: #1fa855;
  box-shadow: 0 0 0 4px rgba(31, 168, 85, .16);
}
.l-fono-aviso .t { font-size: .78rem; font-weight: 800; color: #1e5b41; }
.l-fono-aviso .d { font-size: .76rem; color: var(--tinta-media); line-height: 1.35; }

/* -------------------------------------------------- mockup: el panel ------ */
.l-panelm {
  background: var(--superficie); border: 1px solid var(--l-borde);
  border-radius: var(--l-radio-g); box-shadow: var(--l-sombra-2); overflow: hidden;
}
.l-panelm-barra {
  display: flex; align-items: center; gap: 7px;
  padding: 11px var(--e4); background: var(--l-papel-2); border-bottom: 1px solid var(--l-borde);
}
.l-panelm-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--l-borde-fuerte); }
.l-panelm-titulo { margin-left: 6px; font-size: .8rem; font-weight: 700; color: var(--tinta-media); }
.l-panelm-cuerpo { padding: var(--e4); }
/* `auto-fit` en vez de tres columnas fijas: a 360 px un total como
   «$ 486.000» no cabe en un tercio del ancho y se salía de la tarjeta. */
.l-panelm-metricas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--e2); margin-bottom: var(--e3);
}
.l-panelm-metrica {
  background: var(--l-papel); border: 1px solid var(--l-borde);
  border-radius: 12px; padding: 10px 11px;
}
.l-panelm-metrica .v {
  display: block; font-size: .98rem; font-weight: 800; line-height: 1.2;
  letter-spacing: -.01em; color: var(--l-tinta-alta); font-variant-numeric: tabular-nums;
}
.l-panelm-metrica .r { display: block; font-size: .67rem; color: var(--tinta-suave); font-weight: 600; line-height: 1.3; }
.l-panelm-fila {
  display: flex; align-items: center; gap: var(--e3);
  padding: 11px 0; border-top: 1px solid var(--borde);
}
.l-panelm-fila .quien { font-size: .84rem; font-weight: 600; color: var(--l-tinta-alta); }
.l-panelm-fila .cuando { font-size: .72rem; color: var(--tinta-suave); }
.l-panelm-fila .plata { margin-left: auto; font-weight: 800; font-size: .88rem; color: var(--l-tinta-alta); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- precio - */
.l-precios { display: grid; gap: var(--e5); grid-template-columns: 1fr; align-items: start; }
.l-plan {
  position: relative; background: var(--superficie);
  border: 2px solid var(--l-rosa); border-radius: var(--l-radio-g);
  padding: var(--e6) var(--e5) var(--e5); box-shadow: var(--l-sombra-2);
}
.l-plan-cinta {
  position: absolute; top: -13px; left: var(--e5);
  background: var(--l-rosa); color: #fff; font-size: .78rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--radio-full);
  box-shadow: 0 6px 16px -6px rgba(162, 53, 88, .7);
}
.l-precio {
  font-family: var(--l-display); font-weight: 700;
  font-size: clamp(2.4rem, 9vw, 3.1rem); line-height: 1; letter-spacing: -.03em;
  color: var(--l-tinta-alta); font-variant-numeric: tabular-nums; margin: 0;
}
.l-precio-nota { color: var(--tinta-media); margin: 8px 0 0; }
.l-cupo {
  display: flex; gap: var(--e3); align-items: center;
  margin: var(--e5) 0; padding: var(--e3) var(--e4);
  background: var(--l-rosa-tinte); border: 1px solid #f3d8e2; border-radius: 14px;
}
.l-cupo .n {
  font-family: var(--l-display); font-weight: 700; font-size: 2rem; line-height: 1;
  color: var(--l-rosa-osc); flex: 0 0 auto;
}
.l-cupo .t { font-size: .92rem; color: var(--l-tinta-alta); line-height: 1.35; }
.l-incluye { list-style: none; padding: 0; margin: 0 0 var(--e5); }
.l-incluye li { position: relative; padding: 9px 0 9px 30px; color: var(--tinta-media); }
.l-incluye li::before {
  content: "✓"; position: absolute; left: 0; top: 9px; color: var(--exito); font-weight: 800;
}
/* La segunda tarjeta: pasar del cupo lleva a una cotización. Otro acento (oro)
   para que se lea como otra conversación, no como un plan «mejor». */
.l-cotiza {
  background: linear-gradient(170deg, var(--l-oro-tinte), var(--superficie) 62%);
  border: 1px solid #ecd8b4; border-radius: var(--l-radio-g);
  padding: var(--e5); box-shadow: var(--l-sombra-1);
}
.l-cotiza .l-h3 { color: var(--l-oro); }
.l-cotiza .l-ojo { color: var(--l-oro); }
.l-cotiza .l-ojo::before { background: var(--l-oro); }
.l-cotiza .btn-primario { background: var(--l-oro); border-color: var(--l-oro); }
.l-cotiza .btn-primario:hover { background: #7d5210; border-color: #7d5210; }
.l-cotiza .btn-primario:focus-visible { outline-color: var(--l-oro); }

.l-tabla-no { list-style: none; padding: 0; margin: 0; }
.l-tabla-no li { position: relative; padding: 7px 0 7px 26px; color: var(--tinta-media); }
.l-tabla-no li::before { content: "✕"; position: absolute; left: 0; color: var(--tinta-suave); font-weight: 800; }

/* -------------------------------------------------------------- preguntas - */
.l-faq {
  background: var(--superficie); border: 1px solid var(--l-borde);
  border-radius: 16px; overflow: hidden;
}
.l-faq + .l-faq { margin-top: var(--e2); }
.l-faq[open] { border-color: var(--l-borde-fuerte); box-shadow: var(--l-sombra-1); }
.l-faq summary {
  cursor: pointer; list-style: none; padding: var(--e4) var(--e5);
  font-weight: 700; color: var(--l-tinta-alta); min-height: var(--toque);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
}
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary:focus-visible { outline: 3px solid var(--l-rosa); outline-offset: -3px; }
.l-faq summary::after {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px;
  background:
    linear-gradient(var(--l-rosa-osc), var(--l-rosa-osc)) center/14px 2.4px no-repeat,
    linear-gradient(var(--l-rosa-osc), var(--l-rosa-osc)) center/2.4px 14px no-repeat;
  transition: transform .2s ease;
}
.l-faq[open] summary::after {
  transform: rotate(90deg);
  background: linear-gradient(var(--l-rosa-osc), var(--l-rosa-osc)) center/14px 2.4px no-repeat;
}
.l-faq .resp { padding: 0 var(--e5) var(--e5); color: var(--tinta-media); }
.l-faq .resp p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ cierre / CTA - */
.l-cierre {
  background:
    radial-gradient(120% 120% at 85% 0%, #4a2c3a 0%, rgba(74, 44, 58, 0) 60%),
    radial-gradient(90% 90% at 8% 100%, #45283a 0%, rgba(69, 40, 58, 0) 55%),
    var(--l-oscuro);
  color: #fff; padding: var(--e7) 0;
}
.l-cierre .l-h2 { color: #fff; }
.l-cierre p { color: #e8d8de; }
.l-cierre .l-ojo { color: #f3b6cb; }
.l-cierre .l-ojo::before { background: #f3b6cb; }
.l-cierre .btn:not(.btn-primario):not(.btn-wa) {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45);
}
.l-cierre .btn:not(.btn-primario):not(.btn-wa):hover { background: rgba(255, 255, 255, .12); }
.l-cierre a:not(.btn) { color: #f7cfdd; }
.l-cierre .btn:focus-visible { outline-color: #fff; }

/* ------------------------------------------------------------------- pie -- */
.l-pie {
  background: linear-gradient(180deg, var(--l-papel), var(--l-papel-2));
  border-top: 3px solid var(--l-rosa-tinte);
  padding: var(--e6) 0 var(--e5); font-size: .9rem;
}
.l-pie-rejilla { display: grid; gap: var(--e5); grid-template-columns: 1fr; }
/* Estaban en .74rem = 11,8px, versalitas y con .12em de separación: el peor
   texto real de la app, repetido en las 21 páginas públicas. .82rem = 13,1px
   es el piso para versalitas espaciadas, que se leen peor que la caja baja. */
.l-pie h2 {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--l-rosa-osc); margin: 0 0 var(--e3); font-weight: 800;
}
.l-pie ul { list-style: none; padding: 0; margin: 0; }
/* El margen de 9px se cambia por relleno dentro del propio enlace: la
   separación visual entre renglones queda igual, pero los 9px de aire ahora
   forman parte del objetivo y el enlace pasa de 20px a 44px. */
.l-pie li + li { margin-top: 0; }
.l-pie a {
  color: var(--tinta-media); text-decoration: none;
  display: inline-block; padding: 11px 0;
}
.l-pie a:hover { color: var(--l-rosa-osc); text-decoration: underline; text-underline-offset: 3px; }
.l-pie-marca { display: flex; align-items: center; gap: 10px; margin-bottom: var(--e3); }
.l-pie-marca .l-marca-tile { width: 30px; height: 30px; }
.l-pie-marca .l-marca-txt { font-size: 1.16rem; }
.l-pie-nota { color: var(--tinta-suave); max-width: 34rem; margin: 0; line-height: 1.5; }
.l-pie-abajo {
  margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--l-borde);
  color: var(--tinta-suave); font-size: .84rem;
}

/* ------------------------------------------------------ formularios landing */
.l-form {
  background: var(--superficie); border: 1px solid var(--l-borde);
  border-radius: var(--l-radio-g); padding: var(--e5); box-shadow: var(--l-sombra-1);
}
/* Campo trampa: fuera de pantalla, del tabulador y del lector de pantalla.
   Sin `display:none`, que muchos bots sí detectan. */
.l-trampa { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* El motivo se elige tocando, no desplegando una lista: dos opciones grandes. */
.l-motivos { display: grid; gap: var(--e2); }
.l-motivo {
  display: flex; gap: var(--e3); align-items: flex-start; cursor: pointer;
  padding: var(--e3) var(--e4); border: 1.5px solid var(--borde-fuerte);
  border-radius: 14px; background: var(--superficie); min-height: var(--toque);
}
.l-motivo:hover { border-color: var(--l-rosa); background: var(--l-rosa-tinte); }
.l-motivo input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; accent-color: var(--l-rosa); flex: 0 0 auto; }
.l-motivo input:focus-visible { outline: 3px solid var(--l-rosa); outline-offset: 2px; }
.l-motivo .txt { font-weight: 600; color: var(--l-tinta-alta); line-height: 1.35; }
.l-motivo .pista { display: block; font-weight: 400; font-size: .86rem; color: var(--tinta-media); margin-top: 3px; }
.l-motivo:has(input:checked) { border-color: var(--l-rosa); background: var(--l-rosa-tinte); box-shadow: 0 0 0 3px #fbe2eb; }

/* Lista numerada vertical: los tres pasos de «ya creaste tu cuenta». */
.l-num-lista { counter-reset: l-n; list-style: none; padding: 0; margin: 0; text-align: left; }
.l-num-lista li {
  position: relative; padding: var(--e3) 0 var(--e3) 54px;
  border-bottom: 1px solid var(--l-borde);
}
.l-num-lista li:last-child { border-bottom: 0; }
.l-num-lista li::before {
  counter-increment: l-n; content: counter(l-n);
  position: absolute; left: 0; top: var(--e3);
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--l-rosa-tinte); color: var(--l-rosa-osc);
  border: 1px solid #f3d8e2;
  font-family: var(--l-display); font-weight: 700; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}

.l-flechas { list-style: none; padding: 0; margin: 0; }
.l-flechas li { position: relative; padding: 8px 0 8px 28px; color: var(--tinta-media); }
.l-flechas li::before { content: "→"; position: absolute; left: 0; top: 8px; color: var(--l-rosa-osc); font-weight: 800; }

/* -------------------------------------------------------- sello de gracias - */
.l-sello-ok {
  width: 92px; height: 92px; margin: 0 auto var(--e5); border-radius: 50%;
  background: linear-gradient(150deg, var(--exito-suave), #fff);
  border: 2px solid #bfe3d1; position: relative;
  box-shadow: 0 0 0 8px rgba(46, 125, 91, .08), 0 0 0 16px rgba(46, 125, 91, .04), var(--l-sombra-1);
}
.l-sello-ok::before {
  content: ""; position: absolute; left: 33px; top: 24px;
  width: 20px; height: 38px; border: solid var(--exito);
  border-width: 0 4px 4px 0; transform: rotate(42deg); border-radius: 2px;
}

/* ----------------------------------------------------------- escritorio --- */
@media (min-width: 720px) {
  .l-nav-link { display: inline-flex; }
  .l-rejilla-3 { grid-template-columns: repeat(3, 1fr); }
  .l-rejilla-2 { grid-template-columns: repeat(2, 1fr); }
  .l-pasos { grid-template-columns: repeat(3, 1fr); }
  .l-precios { grid-template-columns: 1.15fr .85fr; }
  .l-pie-rejilla { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .l-cta .btn { flex: 0 0 auto; }
  .l-sec { padding: var(--e7) 0; }
}

@media (min-width: 900px) {
  .l-hero { padding: var(--e7) 0; }
  .l-hero-rejilla { grid-template-columns: 1.1fr .9fr; gap: var(--e7); }
  .l-hero-texto { max-width: 34rem; }
  .l-cifras { gap: var(--e4); }
}

/* --------------------------------------------------------------- respeto -- */
@media (prefers-reduced-motion: reduce) {
  #landing-root *, #landing-root *::before, #landing-root *::after {
    transition: none !important; animation: none !important;
  }
  .l-tarjeta:hover, .l-paso:hover, .l-tarjeta:hover .l-icono { transform: none; }
}

@media print {
  .l-nav-envoltura, .l-saltar, .l-cta, .l-fono-zona { display: none !important; }
  #landing-root { background: #fff; }
}