/* Club Recreo · landing de Leo con Tuli (y upsell, downsell, gracias).
   Mobile primero: todo se diseña a 375 px y se abre a partir de 760 y 1080 px.
   Lenguaje: el del kit. Contorno de tinta, colores planos, sin sombras difusas ni degradés.
   Movimiento: solo transform y opacity, apagado con prefers-reduced-motion. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; scroll-padding-bottom: 96px; }
@media (min-width: 1080px) { html { scroll-padding-bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--cr-crema); color: var(--cr-tinta);
  font: 400 1.0625rem/1.55 var(--fuente-adulto);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--cr-verde-texto); text-underline-offset: .18em; text-decoration-thickness: 2px; }
::selection { background: var(--cr-verde-cuerpo); color: var(--cr-tinta); }
:focus-visible { outline: 3px solid var(--cr-tinta); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--fuente-titulo); font-weight: 600; line-height: 1.08; letter-spacing: -.012em; text-wrap: balance; }
p, li { text-wrap: pretty; }
strong, b { font-weight: 700; }

.salto { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--cr-tinta); color: var(--cr-crema); padding: 10px 16px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.salto:focus { top: 12px; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ancho { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 760px) { .ancho { padding-inline: 32px; } }
.seccion { padding-block: 64px; }
@media (min-width: 1080px) { .seccion { padding-block: 104px; } }

.h2 { font-size: clamp(1.875rem, 1.35rem + 2.4vw, 3rem); max-width: 20ch; }
.bajada { margin-top: 14px; max-width: 54ch; color: var(--cr-tinta-suave); font-size: 1.0625rem; }

/* ---------- Botones ---------- */
.boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 12px 0 26px;
  /* Verde del botón: un punto más claro que el Verde Recreo para que la tinta pase AA (5,05:1; el #2F9E6A da 4,48:1). */
  background: var(--cr-verde-boton); color: var(--cr-tinta);
  border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: var(--radio-pildora);
  font: 600 1.1875rem/1 var(--fuente-titulo); text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-corta) var(--curva-salida), background-color var(--dur-corta) var(--curva-salida);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.boton .flecha {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  background: var(--cr-papel); border: var(--trazo) solid var(--cr-tinta); border-radius: 50%;
  transition: transform var(--dur-media) var(--curva-salida);
}
.boton .flecha svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .boton:hover { background: var(--cr-verde-boton-hover); }
  .boton:hover .flecha { transform: translateX(3px); }
}
.boton:active { transform: scale(.97); }
.boton--ancho { width: 100%; }
.boton--claro { background: var(--cr-papel); padding: 0 22px; font-size: 1.0625rem; min-height: 52px; }
@media (hover: hover) { .boton--claro:hover { background: var(--cr-verde-claro); } }
.boton--claro .icono { width: 26px; height: 26px; }

.pago { margin-top: 14px; font-size: .9375rem; color: var(--cr-tinta-suave); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pago span { display: inline; }
.pago .con-icono { display: inline-flex; align-items: center; gap: 6px; }
.pago svg { width: 20px; height: 20px; flex: none; }

/* ---------- Barra superior ---------- */
.barra { position: relative; z-index: 5; }
.barra .ancho { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; }
.barra .logo { display: flex; align-items: center; min-height: 44px; width: 136px; }
@media (min-width: 760px) { .barra .logo { width: 164px; } }
.barra .logo img { width: 100%; }
.enlace-pildora {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: var(--trazo) solid var(--cr-tinta); border-radius: var(--radio-pildora); background: var(--cr-papel);
  color: var(--cr-tinta); font: 600 .9375rem/1 var(--fuente-titulo); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-corta) var(--curva-salida);
}
@media (hover: hover) { .enlace-pildora:hover { background: var(--cr-verde-claro); } }

/* Las secciones de la landing (hero, camino, muestra, precio…) están en inicio.css. */

/* ---------- Pie ---------- */
.pie { border-top: var(--trazo-fuerte) solid var(--cr-tinta); background: var(--cr-papel); padding-block: 36px 110px; font-size: .9375rem; color: var(--cr-tinta-suave); }
@media (min-width: 760px) { .pie { padding-bottom: 40px; } }
.pie .ancho { display: grid; gap: 20px; }
@media (min-width: 760px) { .pie .ancho { grid-template-columns: 1fr auto; align-items: start; } }
.pie .logo { width: 140px; }
.pie nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pie nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cr-tinta); }
.pie p + p { margin-top: 6px; }

/* ---------- Barra fija de compra (solo celular) ---------- */
.barra-compra { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--cr-crema); border-top: var(--trazo-fuerte) solid var(--cr-tinta);
  display: flex; align-items: center; gap: 12px; transform: translateY(110%); transition: transform var(--dur-media) var(--curva-salida); }
.barra-compra.visible { transform: translateY(0); }
.barra-compra__precio { font: 650 1.375rem/1 var(--fuente-titulo); white-space: nowrap; }
.barra-compra__precio small { display: block; margin-top: 3px; font: 400 .75rem/1 var(--fuente-adulto); color: var(--cr-tinta-suave); }
.barra-compra .boton { flex: 1; min-height: 52px; padding: 0 16px; font-size: 1.0625rem; }
@media (min-width: 1080px) { .barra-compra { display: none; } }

/* ---------- Páginas del embudo (upsell, downsell, gracias) ---------- */
.aviso-compra { background: var(--cr-verde-claro); border-bottom: var(--trazo-fuerte) solid var(--cr-tinta); }
.aviso-compra .ancho { display: flex; align-items: center; gap: 12px; padding-block: 12px; font-size: .9375rem; }
.aviso-compra svg { width: 28px; height: 28px; flex: none; }
.oferta .ancho { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.oferta__img { max-width: 340px; margin-inline: auto; }
.solo-celular { margin-top: 20px; }
.solo-celular .boton { white-space: normal; text-align: center; line-height: 1.15; padding-block: 10px; }
@media (min-width: 1080px) { .solo-celular { display: none; } }
@media (min-width: 1080px) {
  .oferta .ancho { grid-template-columns: 1fr 1fr; grid-template-areas: "cab img" "resto img"; gap: 0 56px; align-items: center; }
  .oferta__cab { grid-area: cab; align-self: end; } .oferta__resto { grid-area: resto; align-self: start; } .oferta__img { grid-area: img; max-width: none; }
}
.oferta h1 { font-size: clamp(2.25rem, 1.6rem + 3.4vw, 3.75rem); font-weight: 650; max-width: 14ch; }
.oferta .bajada { color: var(--cr-tinta); font-size: 1.125rem; }
.ventajas { list-style: none; margin-top: 22px; display: grid; gap: 12px; }
.ventajas li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
.ventajas svg { width: 26px; height: 26px; margin-top: 1px; }
.decision { margin-top: 28px; display: grid; gap: 14px; justify-items: start; }
.decision .boton { white-space: normal; text-align: center; line-height: 1.15; padding-block: 12px; }
.no-gracias { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--cr-tinta-suave); font-size: 1rem; }
.confianza { margin-top: 6px; font-size: .9375rem; color: var(--cr-tinta-suave); display: flex; gap: 8px; align-items: center; }
.confianza svg { width: 22px; height: 22px; flex: none; }

.gracias h1 { font-size: clamp(2.25rem, 1.6rem + 3.4vw, 3.5rem); font-weight: 650; max-width: 16ch; }
.gracias__tuli { width: 120px; margin-bottom: 6px; }
.caminos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px; }
@media (min-width: 900px) { .caminos { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; } }
.caja { padding: 24px 20px; border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: var(--radio-l); background: var(--cr-papel); }
.caja--suave { background: transparent; border-width: var(--trazo); border-style: dashed; }
.caja h2 { font-size: 1.375rem; }
.caja p { margin-top: 10px; }
.primer-paso { list-style: none; counter-reset: paso; margin-top: 16px; display: grid; gap: 14px; }
.primer-paso li { counter-increment: paso; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.primer-paso li::before { content: counter(paso); display: grid; place-items: center; width: 40px; height: 40px; border: var(--trazo) solid var(--cr-tinta); border-radius: 50%; background: var(--nivel-1-claro); font: 650 1.125rem/1 var(--fuente-titulo); }
.caja .boton { margin-top: 22px; white-space: normal; text-align: left; line-height: 1.15; padding-block: 8px; }

/* ---------- Páginas legales (aviso de privacidad, términos) ----------
   Una columna de lectura de ~66 caracteres. En escritorio, el índice queda fijo a la izquierda.
   Cada número de sección toma el color de un nivel del kit, en orden. */
.legal { padding-top: 16px; }
@media (min-width: 1080px) { .legal { padding-top: 40px; } }
.legal__cab { max-width: 46rem; }
.legal__tuli { width: 92px; margin: 0 0 4px -8px; }
.legal h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem); font-weight: 650; letter-spacing: -.02em; max-width: 16ch; }
.legal__fecha { margin-top: 12px; font-size: .9375rem; color: var(--cr-tinta-suave); }
.legal__bajada { margin-top: 14px; max-width: 58ch; font-size: 1.125rem; }

.legal__corto { margin-top: 28px; max-width: 46rem; padding: 22px 20px 24px; background: var(--cr-verde-claro); border: var(--trazo-fuerte) solid var(--cr-tinta); border-radius: var(--radio-l); }
@media (min-width: 760px) { .legal__corto { padding: 28px 32px 30px; } }
.legal__corto h2 { font-size: 1.375rem; }
.legal__corto ul { list-style: none; margin-top: 14px; display: grid; gap: 10px; }
.legal__corto li { position: relative; padding-left: 24px; }
.legal__corto li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 10px; height: 10px; border: 2px solid var(--cr-tinta); border-radius: 50%; background: var(--cr-verde-boton); }
.legal__corto .nota { margin-top: 16px; font-size: .9375rem; color: var(--cr-tinta-suave); }

.legal__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 40px; }
@media (min-width: 1080px) {
  .legal__cuerpo { grid-template-columns: 264px minmax(0, 46rem); gap: 72px; align-items: start; margin-top: 56px; }
  .legal__indice { position: sticky; top: 24px; }
}
.legal__indice { padding: 16px 20px 8px; border: var(--trazo) dashed var(--cr-tinta); border-radius: var(--radio-l); }
.legal__indice h2 { font-size: 1.125rem; }
.legal__indice ol { list-style: none; counter-reset: indice; margin-top: 4px; }
.legal__indice li { counter-increment: indice; }
.legal__indice a { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 11px 0; color: var(--cr-tinta); line-height: 1.3; text-decoration: none; border-bottom: 2px dotted rgba(35, 38, 47, .28); }
.legal__indice li:last-child a { border-bottom: 0; }
.legal__indice a::before { content: counter(indice); flex: none; min-width: 1.4em; font: 600 .9375rem/1 var(--fuente-titulo); color: var(--cr-verde-texto); }
@media (hover: hover) { .legal__indice a:hover { text-decoration: underline; } }

.legal__texto > section { scroll-margin-top: 16px; }
.legal__texto > section + section { margin-top: 44px; padding-top: 36px; border-top: 2px dotted rgba(35, 38, 47, .35); }
.legal__texto > section:nth-child(4n+1) { --c: var(--nivel-1-claro); }
.legal__texto > section:nth-child(4n+2) { --c: var(--nivel-2-claro); }
.legal__texto > section:nth-child(4n+3) { --c: var(--nivel-3-claro); }
.legal__texto > section:nth-child(4n+4) { --c: var(--nivel-4-claro); }
.legal__texto h2 { display: flex; align-items: flex-start; gap: 12px; font-size: clamp(1.375rem, 1.2rem + .9vw, 1.75rem); }
.legal__texto h2 .num { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-top: -4px; border: var(--trazo) solid var(--cr-tinta); border-radius: 50%; background: var(--c, var(--cr-verde-claro)); font-size: 1.0625rem; }
.legal__texto h3 { margin-top: 28px; font-size: 1.1875rem; line-height: 1.2; }
.legal__texto p, .legal__texto ul, .legal__texto ol, .legal__texto dl { margin-top: 12px; max-width: 66ch; }
.legal__texto h2 + p, .legal__texto h2 + ul { margin-top: 16px; }
.legal__texto ul:not([class]) { list-style: none; display: grid; gap: 8px; }
.legal__texto ul:not([class]) > li { position: relative; padding-left: 22px; }
.legal__texto ul:not([class]) > li::before { content: ""; position: absolute; left: 3px; top: .64em; width: 8px; height: 8px; border-radius: 50%; background: var(--cr-tinta); }
.legal__texto ol:not([class]) { padding-left: 1.5em; display: grid; gap: 8px; }
.legal__texto ol:not([class]) > li { padding-left: 4px; }
.legal__texto ol:not([class]) > li::marker { font-family: var(--fuente-titulo); font-weight: 600; color: var(--cr-verde-texto); }
.legal__texto .aparte { margin-top: 18px; padding: 16px 18px; background: var(--nivel-2-claro); border: var(--trazo) solid var(--cr-tinta); border-radius: var(--radio-m); }
.legal__texto .aparte > :first-child { margin-top: 0; }
.legal__texto .aparte + p { margin-top: 18px; }

.destinos { list-style: none; margin-top: 18px; display: grid; gap: 14px; }
@media (min-width: 760px) { .destinos { grid-template-columns: 1fr 1fr; } .destino--ancho { grid-column: 1 / -1; } }
.destino { padding: 18px 18px 20px; background: var(--cr-papel); border: var(--trazo) solid var(--cr-tinta); border-radius: var(--radio-m); }
.legal__texto .destino h3 { margin-top: 0; font-size: 1.125rem; }
.legal__texto .destino dl { margin-top: 10px; display: grid; gap: 10px; }
.destino dt { font: 600 .875rem/1.2 var(--fuente-titulo); color: var(--cr-verde-texto); }
.destino dd { margin-top: 2px; font-size: 1rem; }

.pie--legal { padding-bottom: 40px; }
.pie nav a[aria-current="page"] { font-weight: 700; text-decoration: none; }