/* ==========================================================================
   La Juguetería Colombiana — "El Talonario"

   El sistema sale de los materiales del negocio, no de una plantilla:
   la cancha de cemento pintada del polideportivo, la cal de las líneas,
   el papel manila del talonario de rifa y los tres colores de la bandera.
   El único gesto llamativo es el talón de rifa; todo lo demás va callado.
   ========================================================================== */

:root{
  /* Cancha: el verde es pintura sobre cemento, no bosque */
  --cancha:#17593F;
  --cancha-claro:#1F7A55;
  --cancha-hondo:#0A2E20;
  --cancha-noche:#061C13;

  /* Cal: la línea pintada del área */
  --cal:#F2F4EF;

  /* Papel: el talonario de rifa, manila y un poco tostado */
  --papel:#EFE4C8;
  --papel-hondo:#E2D3AE;

  /* Bandera: amarillo, azul y rojo de Colombia */
  --amarillo:#FFCE00;
  --amarillo-hondo:#D9A800;
  --oro-texto:#A87E00;   /* dorado legible como texto: 3.7:1 sobre blanco */
  --azul:#0B3B8C;
  --azul-claro:#1657C4;
  --sello:#BC0E20;

  /* El rojo anaranjado del cemento pintado de las canchas, sacado de las
     fotos del propio kit. Es el color que le faltaba a la página para dejar
     de verse seria: aparece en lo que hay que mirar, nunca de relleno.

     Se usa de RELLENO y siempre lleva tinta oscura encima (5.2:1 y 6.4:1).
     El blanco sobre este naranja se queda en 2.9:1 y no se puede leer; por
     eso existe --roja-texto, la misma familia oscurecida, para cuando el
     color tiene que ser la letra y no el fondo. */
  --cancha-roja:#F2622E;
  --cancha-roja-clara:#FF7A45;
  --roja-texto:#C93818;
  --lima:#7BE495;        /* verde de la grama nueva, para acentos en oscuro */      /* rojo bandera, oscurecido lo justo para cumplir 4.5:1 sobre el papel */

  /* Tinta */
  --tinta:#12211A;
  --tinta-media:#48594F;
  --tinta-suave:#7C8C82;
  --raya:#D9DED6;

  /* Semánticos */
  --fondo:var(--cal);
  --superficie:#FFFFFF;
  --texto:var(--tinta);
  --texto-suave:var(--tinta-media);

  /* Tipografía: una familia y su hermana monoespaciada.
     Chivo (Omnibus-Type) está dibujada para titulares de alto impacto.
     La mono aparece SOLO en seriales y cifras estampadas del talonario. */
  --fuente:'Chivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-mono:'Chivo Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala tipográfica */
  --t-xs:0.75rem;
  --t-sm:0.8438rem;
  --t-base:0.9688rem;
  --t-md:1.0938rem;
  --t-lg:clamp(1.25rem, 1rem + 1.1vw, 1.625rem);
  --t-xl:clamp(1.75rem, 1.3rem + 2.1vw, 2.75rem);
  --t-2xl:clamp(2.4rem, 1.6rem + 3.6vw, 4rem);
  --t-3xl:clamp(2.3rem, 1.5rem + 3.1vw, 3.5rem);

  /* Ritmo */
  --seccion:clamp(58px, 8vw, 112px);
  --tras-intro:clamp(30px, 4vw, 44px);
  --ancho:1240px;
  --nav-h:68px;

  /* Forma: el radio comunica jerarquía, no se reparte igual a todo */
  --r-nada:0;
  --r-chico:6px;
  --r-medio:12px;
  --r-grande:20px;
  --r-pildora:999px;

  /* Sombra: una sola familia, usada con cuentagotas */
  --sombra-baja:0 1px 2px rgba(10,46,32,.07), 0 3px 8px -2px rgba(10,46,32,.07);
  --sombra-media:0 2px 5px rgba(10,46,32,.06), 0 14px 28px -12px rgba(10,46,32,.18);
  --sombra-alta:0 6px 14px rgba(10,46,32,.09), 0 34px 64px -24px rgba(10,46,32,.3);

  /* Curvas: las del catálogo, sin inventar ninguna */
  --sale:cubic-bezier(0.23, 1, 0.32, 1);
  --entra-sale:cubic-bezier(0.77, 0, 0.175, 1);
  --cajon:cubic-bezier(0.32, 0.72, 0, 1);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--fuente);
  font-size:var(--t-base);
  font-weight:400;
  line-height:1.6;
  color:var(--texto);
  background:var(--fondo);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Tipografía ----------
   Chivo Black en titulares, apretada. El tamaño y el peso hacen el trabajo:
   nada de resaltar una sola palabra en otro color. */
/* El interletrado se aprieta a medida que crece el tamaño, y el interlineado
   se abre a medida que baja: es la regla óptica de siempre. Un titular de
   64px con el mismo interlineado que un párrafo se ve desarmado, y un
   subtítulo de 28px con el interlineado de un titular se ve amontonado. */
h1,h2,h3,.titular{
  font-family:var(--fuente);
  font-weight:900;
  text-wrap:balance;
}
h1{font-size:var(--t-3xl);line-height:0.94;letter-spacing:-0.03em}
h2{font-size:var(--t-2xl);line-height:0.98;letter-spacing:-0.025em}
h3{font-size:var(--t-xl);line-height:1.08;letter-spacing:-0.015em}
h4{font-size:var(--t-md);font-weight:700;line-height:1.34;letter-spacing:-0.005em}

/* 68 caracteres: dentro del rango de 45 a 80 en el que el ojo encuentra el
   comienzo del siguiente renglón sin perderse. */
p{text-wrap:pretty;max-width:68ch}
li{max-width:64ch}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img,video,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
strong,b{font-weight:700}

:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:2px}
.sobre-oscuro :focus-visible{outline-color:var(--amarillo)}

/* Cifras estampadas: la mono vive aquí y en el talón de rifa, en ningún otro lado */
.cifra{font-family:var(--fuente-mono);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- Estructura ---------- */
.ancho{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
.seccion{padding-block:var(--seccion)}
.entrada{font-size:var(--t-md);line-height:1.68;color:var(--texto-suave);max-width:56ch}

/* ── Ritmo vertical ──────────────────────────────────────────────────────
   Un solo valor para cada salto, en vez de un margen suelto escrito a mano
   en cada sección. Antes había cuatro separaciones distintas entre un
   título y su párrafo; ahora hay una. */
.seccion > .ancho > h2,
.seccion > .ancho > .rejilla > div > h2{margin-bottom:0}
h2 + .entrada,
h2 + p,
h1 + .entrada,
h1 + p{margin-top:18px}
h3 + p,h4 + p{margin-top:10px}
.entrada + .entrada{margin-top:14px}

/* Separación entre el bloque de presentación y el contenido de la sección */
.tras-intro{margin-top:var(--tras-intro)}
.tras-texto{margin-top:24px}

/* Superficies */
.sobre-oscuro{color:var(--cal)}
.sobre-oscuro .entrada,.sobre-oscuro p{color:rgba(242,244,239,.76)}

/* Islas de papel apoyadas sobre la cancha oscura (el talón, el premio).
   Sin esto, `.sobre-oscuro p` (0,0,1,1) le gana a cualquier `.loquesea`
   (0,0,1,0) y el texto queda ilegible sobre el papel claro. Estas reglas
   suben a 0,0,2,x justamente para recuperar la tinta. */
.papel{color:var(--tinta)}
.sobre-oscuro .papel,
.sobre-oscuro .papel p,
.sobre-oscuro .papel li,
.sobre-oscuro .papel h2,
.sobre-oscuro .papel h3,
.sobre-oscuro .papel h4{color:var(--tinta)}
.sobre-oscuro .papel .tenue{color:var(--tinta-media)}

.cemento{
  background:var(--cancha-hondo);
  color:var(--cal);
}

/* Bloque amarillo a toda página. Es el color de la marca puesto en grande,
   no un adorno: marca dónde termina el argumento y empieza la compra. */
.sol{background:var(--amarillo);color:var(--cancha-noche)}
.sol .entrada,.sol p{color:rgba(6,28,19,.78)}
.sol .cal-linea{background:rgba(6,28,19,.2)}

/* La línea de cal del área, pintada con rodillo. Sale del material real de
   una cancha, no de un degradado decorativo. */
.linea-cal{position:relative;overflow:hidden;isolation:isolate}
.linea-cal::after{
  content:"";position:absolute;z-index:-1;
  width:min(520px,58vw);aspect-ratio:1;
  right:-14%;top:-24%;
  border:3px solid rgba(242,244,239,.075);
  border-radius:50%;
}
.sol.linea-cal::after{border-color:rgba(6,28,19,.1)}
/* La cancha pintada: franjas de rodillo, apenas perceptibles */
.cemento--pintada{position:relative;isolation:isolate}
.cemento--pintada::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(96deg,rgba(242,244,239,.02) 0 92px,transparent 92px 184px);
}

.manila{background:var(--papel);color:var(--tinta)}

/* Línea de cal: separa sin decorar */
.cal-linea{height:2px;background:var(--raya);border:0}
.sobre-oscuro .cal-linea{background:rgba(242,244,239,.16)}

/* ---------- Accesibilidad ---------- */
.solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.saltar{
  position:absolute;left:20px;top:-100px;z-index:200;
  background:var(--amarillo);color:var(--cancha-hondo);
  padding:12px 22px;font-weight:700;
  transition:top 160ms var(--sale);
}
.saltar:focus{top:16px}

/* ---------- Movimiento ----------
   Un solo momento orquestado: la entrada del héroe. El resto del sitio
   se mueve únicamente cuando alguien lo toca. */
@keyframes entra{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.entra-1,.entra-2,.entra-3,.entra-4{animation:entra 620ms var(--sale) both}
.entra-2{animation-delay:80ms}
.entra-3{animation-delay:160ms}
.entra-4{animation-delay:240ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  /* Se conserva la aparición, se quita el desplazamiento */
  .entra-1,.entra-2,.entra-3,.entra-4{animation:none;opacity:1;transform:none}
}

.oculto{display:none!important}