/* ═══════════════════════════════════════════════════════════
   SuperEscuela — sitio de bienvenida
   Motivo visual: caminos de conocimiento (bandas de color de
   distinto grosor que atraviesan la página). Base blanco + azul.
   ═══════════════════════════════════════════════════════════ */

:root{
  --azul:      #002B7F;
  --celeste:   #74ACDF;
  --rojo:      #CE1126;
  --amarillo:  #FCD116;
  --verde:     #006847;

  --azul-hondo:#001B52;
  --texto:     #26355C;
  --gris:      #5A6C90;
  --nieve:     #F2F6FC;
  --nieve-2:   #E1EAF7;
  --borde:     #D6E1F2;

  --radio:   20px;
  --radio-s: 12px;
  --ancho:   1180px;
  --paso:    clamp(64px, 9vw, 118px);
}

*,*::before,*::after{ box-sizing:border-box; }
[id]{ scroll-margin-top:132px; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:clamp(16px,.5vw + 14.4px,18px);
  line-height:1.62;
  color:var(--azul);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  margin:0; line-height:1.03; letter-spacing:-.02em;
  font-variation-settings:"wdth" 118,"wght" 800;
  text-wrap:balance;
}
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }

::selection{ background:var(--amarillo); color:var(--azul); }
:focus-visible{ outline:3px solid var(--rojo); outline-offset:3px; border-radius:6px; }

.saltar{
  position:absolute; left:-9999px; top:12px; z-index:99;
  background:var(--azul); color:#fff; padding:12px 20px;
  border-radius:var(--radio-s); text-decoration:none;
}
.saltar:focus{ left:12px; }

/* ───────── Botones ───────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 24px; border-radius:999px;
  font-variation-settings:"wdth" 105,"wght" 700;
  font-size:.94rem; text-decoration:none;
  border:2px solid transparent;
  transition:transform .12s ease, background-color .14s ease, border-color .14s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--azul{ background:var(--azul); color:#fff; }
.btn--azul:hover{ background:var(--azul-hondo); }
.btn--linea{ color:var(--azul); border-color:var(--azul); }
.btn--linea:hover{ background:var(--nieve); }
.btn--amarillo{ background:var(--amarillo); color:var(--azul); }
.btn--amarillo:hover{ background:#ffdd45; }
.btn--grande{ padding:16px 32px; font-size:1.04rem; }

/* ───────── Barra superior ───────── */
.barra{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:30px;
  padding:10px clamp(18px,4vw,32px);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
@supports not (backdrop-filter:blur(4px)){ .barra{ background:#fff; } }
.barra.pegada{ border-bottom-color:var(--borde); }

.marca{ display:flex; align-items:center; gap:13px; text-decoration:none; margin-right:auto; }
.marca__simbolo{ width:clamp(72px,6.9vw,100px); height:auto; flex:none; }
.marca__nombre{
  display:block; font-size:clamp(1.5rem,1.85vw,2.05rem); line-height:1; letter-spacing:-.028em;
  font-variation-settings:"wdth" 115,"wght" 800;
}
.marca__nombre em{ font-style:normal; color:var(--rojo); }
.marca__nombre i{ font-style:normal; color:var(--azul); font-variation-settings:"wdth" 108,"wght" 600; }
.marca__lema{ display:block; font-size:.82rem; color:var(--gris); line-height:1.7; }

.nav{ display:flex; gap:28px; }
.nav a{
  text-decoration:none; font-size:.93rem; color:var(--gris);
  font-variation-settings:"wght" 500;
  padding-bottom:3px; border-bottom:2px solid transparent;
}
.nav a:hover{ color:var(--azul); border-bottom-color:var(--amarillo); }

/* ───────── Hero ───────── */
.hero{
  max-width:var(--ancho); margin:0 auto;
  padding:clamp(26px,4vw,56px) clamp(18px,4vw,32px) clamp(30px,4vw,56px);
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(24px,4vw,56px);
  align-items:start;
}
.hero__saludo{
  grid-column:1 / -1;
  font-size:.95rem; color:var(--rojo);
  font-variation-settings:"wght" 600; margin-bottom:12px;
}
.hero__titulo{
  grid-column:1 / -1;
  font-size:clamp(2.7rem,7vw,5.45rem);
  font-variation-settings:"wdth" 124,"wght" 800;
  letter-spacing:-.04em;
}
.hero__texto{ padding-top:clamp(18px,2.4vw,30px); align-self:center; }
.hero__bajada{ max-width:44ch; font-size:1.07rem; color:var(--texto); }
.hero__botones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero__nota{ margin-top:18px; font-size:.85rem; color:var(--gris); }
.mundo{ margin-top:clamp(-24px,-1.2vw,0px); }

.mundo svg{ width:100%; height:auto; display:block; }
.camino{
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:trazar 1.5s cubic-bezier(.35,.7,.3,1) forwards;
  animation-delay:calc(var(--i) * .13s);
}
@keyframes trazar{ to{ stroke-dashoffset:0; } }
.nodo{
  opacity:0;
  animation:brotar .55s cubic-bezier(.3,1.5,.5,1) forwards,
            flotar 7s ease-in-out infinite;
  animation-delay:calc(.75s + var(--d) * .1s), calc(1.4s + var(--d) * .55s);
  transform-box:fill-box; transform-origin:center;
}
@keyframes brotar{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
@keyframes flotar{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .camino{ animation:none; stroke-dashoffset:0; }
  .nodo{ animation:none; opacity:1; }
}

/* ───────── Bandas de transición ───────── */
.bandas{ display:flex; height:16px; }
.bandas span{ background:var(--c); width:var(--w); }

/* ───────── Secciones ───────── */
.seccion{ max-width:var(--ancho); margin:0 auto; padding:var(--paso) clamp(18px,4vw,32px); }
.seccion__intro{ margin-bottom:clamp(32px,4.4vw,54px); }
.seccion__intro h2{ font-size:clamp(2.1rem,4.2vw,3.2rem); max-width:18ch; }
.seccion__intro p{ margin-top:16px; color:var(--texto); max-width:56ch; }

/* Ruta: descubre → elige → juega → crece */
.ruta{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.ruta__paso{ position:relative; padding-top:28px; border-top:3px solid var(--nieve-2); }
.ruta__marca{ position:absolute; top:-11px; left:0; height:19px; border-radius:999px; }
.ruta__marca--1{ width:70px; background:var(--azul); }
.ruta__marca--2{ width:46px; background:var(--celeste); }
.ruta__marca--3{ width:90px; background:var(--rojo); }
.ruta__marca--4{ width:58px; background:var(--verde); }
.ruta__paso h3{ font-size:1.32rem; font-variation-settings:"wdth" 110,"wght" 800; }
.ruta__paso p{ margin-top:10px; font-size:.94rem; color:var(--texto); }

/* ───────── Temas ───────── */
.seccion--temas{ background:var(--nieve); max-width:none; }
.seccion--temas > *{ max-width:var(--ancho); margin-inline:auto; }

.nube{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; }
.ficha{
  --tono:var(--azul);
  position:relative; overflow:hidden;
  background:#fff; border-radius:var(--radio);
  padding:20px 24px 20px 31px;
  box-shadow:0 2px 0 rgba(0,43,127,.05);
  transition:transform .14s ease, box-shadow .14s ease;
}
.ficha::before{ content:""; position:absolute; inset:0 auto 0 0; width:7px; background:var(--tono); }
.ficha:hover{ transform:translateY(-3px); box-shadow:0 12px 24px -14px rgba(0,43,127,.45); }
.ficha span{
  display:block; font-variation-settings:"wdth" 108,"wght" 700; line-height:1.16;
}
.ficha small{ display:block; margin-top:6px; font-size:.78rem; color:var(--gris); }
.ficha--xl span{ font-size:1.85rem; }
.ficha--xl{ padding:26px 34px 26px 41px; }
.ficha--l span{ font-size:1.4rem; }
.ficha--m span{ font-size:1.1rem; }
.ficha--s{ padding:14px 20px 14px 26px; }
.ficha--s::before{ width:5px; }
.ficha--s span{ font-size:.95rem; }
.ficha--rojo{ --tono:var(--rojo); }
.ficha--amarillo{ --tono:var(--amarillo); }
.ficha--verde{ --tono:var(--verde); }
.ficha--celeste{ --tono:var(--celeste); }
.ficha--azul{ --tono:var(--azul); }
.ficha--nuevo{
  background:none; border:2px dashed var(--nieve-2);
  color:var(--gris); box-shadow:none; padding-left:20px;
}
.ficha--nuevo::before{ display:none; }
.ficha--nuevo:hover{ transform:none; box-shadow:none; }
.nube__pie{ margin-top:32px; max-width:56ch; color:var(--texto); font-size:.95rem; }

/* ───────── La app real ───────── */
.app{
  max-width:var(--ancho); margin:0 auto;
  padding:var(--paso) clamp(18px,4vw,32px);
  display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(34px,5vw,72px);
  align-items:center;
}
.app__marco{ display:flex; justify-content:center; }
.telefono{
  position:relative; width:min(304px,78vw);
  border:11px solid var(--azul); border-radius:34px;
  overflow:hidden; background:#fff;
  box-shadow:0 34px 60px -34px rgba(0,43,127,.7);
}
.telefono img{ width:100%; }
.app h2{ font-size:clamp(2rem,3.9vw,2.9rem); }
.app__bajada{ margin-top:16px; max-width:48ch; color:var(--texto); }
.hechos{ margin:32px 0; display:grid; gap:20px; }
.hechos div{ padding-left:20px; border-left:4px solid var(--nieve-2); }
.hechos div:nth-child(1){ border-color:var(--celeste); }
.hechos div:nth-child(2){ border-color:var(--rojo); }
.hechos div:nth-child(3){ border-color:var(--verde); }
.hechos dt{ font-variation-settings:"wdth" 108,"wght" 700; font-size:1.06rem; }
.hechos dd{ margin:4px 0 0; font-size:.93rem; color:var(--texto); max-width:46ch; }

/* ───────── Docentes ───────── */
.docentes{ max-width:var(--ancho); margin:0 auto; padding:0 clamp(18px,4vw,32px) var(--paso); }
.docentes__caja{
  background:var(--azul); color:#fff; border-radius:30px;
  padding:clamp(30px,4.6vw,58px);
  display:grid; grid-template-columns:.95fr 1.1fr; gap:clamp(30px,4.6vw,52px);
  align-items:center;
}
.docentes__kicker{ color:var(--celeste); font-size:.88rem; font-variation-settings:"wght" 600; margin-bottom:10px; }
.docentes__caja h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); }
.docentes__bajada{ margin-top:16px; color:#D3E2F7; max-width:46ch; }
.docentes__lista{ margin:26px 0 32px; display:grid; gap:11px; }
.docentes__lista li{ position:relative; padding-left:26px; font-size:.95rem; color:#EAF1FB; }
.docentes__lista li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:11px; height:11px; border-radius:3px; background:var(--amarillo);
}
.docentes__lista li:nth-child(2)::before{ background:var(--rojo); }
.docentes__lista li:nth-child(3)::before{ background:var(--verde); }
.docentes__lista li:nth-child(4)::before{ background:var(--celeste); }

.navegador{
  margin:0; background:#fff; border-radius:var(--radio); overflow:hidden;
  box-shadow:0 34px 60px -36px rgba(0,0,0,.75);
}
.navegador__barra{
  display:flex; align-items:center; gap:6px;
  background:var(--nieve); padding:10px 14px; border-bottom:1px solid var(--borde);
}
.navegador__barra i{ width:9px; height:9px; border-radius:50%; background:var(--nieve-2); }
.navegador__barra span{
  margin-left:10px; background:#fff; border:1px solid var(--borde);
  border-radius:999px; padding:3px 14px; font-size:.7rem; color:var(--gris);
}
.navegador img{ width:100%; }

/* ───────── Misión ───────── */
.mision{ padding:0 clamp(18px,4vw,32px) var(--paso); }
.mision__caja{
  max-width:var(--ancho); margin:0 auto; position:relative;
  background:var(--azul-hondo); color:#fff;
  border-radius:30px; overflow:hidden;
  padding:clamp(40px,6vw,86px) clamp(26px,5vw,72px);
}
.mision__caja::before{
  content:""; position:absolute; inset:0 auto 0 0; width:14px;
  background:linear-gradient(180deg,
    var(--celeste) 0 24%, var(--rojo) 24% 48%,
    var(--amarillo) 48% 70%, var(--verde) 70% 100%);
}
.mision__kicker{ color:var(--celeste); font-size:.9rem; font-variation-settings:"wght" 600; }
.mision__caja h2{ margin-top:14px; font-size:clamp(2.1rem,4.6vw,3.5rem); max-width:20ch; }
.mision__parrafo{ margin-top:22px; max-width:58ch; color:#D3E2F7; font-size:1.05rem; }

.pactos{ margin:44px 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.pactos li{ padding-top:18px; border-top:3px solid rgba(255,255,255,.22); }
.pactos b{ display:block; font-variation-settings:"wdth" 108,"wght" 700; font-size:1.05rem; }
.pactos span{ display:block; margin-top:7px; font-size:.9rem; color:#B9CDE9; }

.mision__cierre{
  margin-top:48px; font-size:clamp(1.3rem,2.5vw,1.9rem);
  font-variation-settings:"wdth" 112,"wght" 700; line-height:1.25;
  color:var(--amarillo); max-width:24ch;
}

/* ───────── Dos puertas ───────── */
.puertas{ max-width:var(--ancho); margin:0 auto; padding:0 clamp(18px,4vw,32px) var(--paso); }
.puertas__h{ font-size:clamp(2rem,3.6vw,2.8rem); margin-bottom:30px; }
.puertas__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; }
.puerta{
  display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
  border-radius:26px; transition:transform .15s ease;
}
.puerta:hover{ transform:translateY(-4px); }
.puerta__cuerpo{ display:flex; flex-direction:column; flex:1; padding:clamp(26px,3.4vw,42px); }
.puerta__quien{ font-size:.9rem; font-variation-settings:"wght" 600; }
.puerta__nombre{
  margin-top:6px; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.04;
  font-variation-settings:"wdth" 116,"wght" 800;
}
.puerta__que{ margin-top:12px; max-width:32ch; }
.puerta__cta{ margin-top:auto; padding-top:28px; font-size:.9rem; font-variation-settings:"wght" 600; }
.puerta__franja{
  height:15px;
  background:linear-gradient(to right,
    var(--azul) 0 32%, var(--celeste) 32% 45%, var(--rojo) 45% 68%,
    var(--amarillo) 68% 78%, var(--verde) 78% 100%);
}
.puerta--app{ background:var(--nieve); color:var(--azul); }
.puerta--app .puerta__quien{ color:var(--rojo); }
.puerta--app .puerta__cta{ color:var(--gris); }
.puerta--adm{ background:var(--azul); color:#fff; }
.puerta--adm .puerta__quien{ color:var(--amarillo); }
.puerta--adm .puerta__que{ color:#D3E2F7; }
.puerta--adm .puerta__cta{ color:var(--celeste); }

/* ───────── Pie ───────── */
.pie{ background:var(--azul-hondo); color:#fff; padding:clamp(44px,6vw,72px) clamp(18px,4vw,32px) 26px; }
.pie__grid{
  max-width:var(--ancho); margin:0 auto;
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:32px;
}
.pie__marca{ font-size:1.5rem; letter-spacing:-.025em; font-variation-settings:"wdth" 115,"wght" 800; }
.pie__marca em{ font-style:normal; color:var(--celeste); }
.pie__marca i{ font-style:normal; color:#8FAAD4; font-variation-settings:"wdth" 108,"wght" 600; }
.pie__lema{ color:#A7BEDF; font-size:.88rem; margin-top:4px; }
.pie h3{ font-size:.95rem; margin-bottom:12px; font-variation-settings:"wdth" 105,"wght" 700; }
.pie ul{ display:grid; gap:8px; }
.pie a{ color:#CEDCF1; text-decoration:none; font-size:.92rem; }
.pie a:hover{ color:#fff; text-decoration:underline; }
.pie__col p{ color:#CEDCF1; font-size:.92rem; }
.pie__base{
  max-width:var(--ancho); margin:40px auto 0; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:.82rem; color:#A7BEDF;
}
.pie__bandera{ display:flex; gap:4px; }
.pie__bandera i{ width:24px; height:7px; border-radius:2px; background:var(--celeste); }
.pie__bandera i:nth-child(2){ background:var(--rojo); }
.pie__bandera i:nth-child(3){ background:var(--amarillo); }
.pie__bandera i:nth-child(4){ background:var(--verde); }
.pie__bandera i:nth-child(5){ background:#fff; }

/* ───────── Responsive ───────── */
@media (max-width:1000px){
  .nav{ display:none; }
  .hero{ grid-template-columns:1fr; padding-top:20px; }
  .hero__texto{ padding-top:22px; }
  .mundo{ margin:8px auto 0; max-width:540px; }
  .ruta{ grid-template-columns:repeat(2,1fr); }
  .app{ grid-template-columns:1fr; }
  .app__marco{ order:1; }
  .docentes__caja{ grid-template-columns:1fr; }
  .pactos{ grid-template-columns:repeat(2,1fr); }
  .puertas__grid{ grid-template-columns:1fr; }
  .pie__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .marca__lema{ display:none; }
  .marca__simbolo{ width:62px; }
  .marca__nombre{ font-size:1.22rem; }
  .barra{ gap:14px; }
  .barra .btn{ padding:11px 18px; }
  .hero h1{ letter-spacing:-.03em; }
  .hero__botones .btn{ width:100%; }
  .ruta,.pactos{ grid-template-columns:1fr; }
  .ficha--xl span{ font-size:1.45rem; }
  .ficha--l span{ font-size:1.2rem; }
  .pie__grid{ grid-template-columns:1fr; }
  .pie__base{ flex-direction:column; align-items:flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   SuperEscuela.org — componentes propios del sitio del
   movimiento. Reusa los tokens, la tipografía y el motivo de
   caminos definidos arriba; solo agrega lo que .com no tiene.
   ═══════════════════════════════════════════════════════════ */

.kicker{
  color:var(--rojo); font-size:.9rem;
  font-variation-settings:"wght" 600; margin-bottom:12px;
}

/* El sol no flota: se queda fijo como punto de llegada */
.nodo--sol{ animation:brotar .6s cubic-bezier(.3,1.5,.5,1) forwards; }

/* ───────── Cifras ───────── */
.cifras{
  display:grid; grid-template-columns:repeat(5,1fr); gap:22px;
  margin:0;
}
.cifras div{ padding-top:18px; border-top:3px solid var(--nieve-2); }
.cifras div:nth-child(1){ border-color:var(--azul); }
.cifras div:nth-child(2){ border-color:var(--celeste); }
.cifras div:nth-child(3){ border-color:var(--rojo); }
.cifras div:nth-child(4){ border-color:var(--amarillo); }
.cifras div:nth-child(5){ border-color:var(--verde); }
.cifras dt{
  font-size:clamp(2.1rem,4vw,3.1rem); line-height:1;
  letter-spacing:-.03em;
  font-variation-settings:"wdth" 118,"wght" 800;
}
.cifras dd{ margin:10px 0 0; font-size:.92rem; color:var(--texto); max-width:20ch; }
.cifras__pie{ margin-top:36px; max-width:62ch; color:var(--texto); font-size:.95rem; }
.cifras__pie a{ color:var(--rojo); }

/* ───────── Credos (el manifiesto en corto) ───────── */
.seccion--creemos{ background:var(--nieve); max-width:none; }
.seccion--creemos > *{ max-width:var(--ancho); margin-inline:auto; }

.credos{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.credos li{
  background:#fff; border-radius:var(--radio);
  padding:28px 30px 30px;
  box-shadow:0 2px 0 rgba(0,43,127,.05);
}
.credos__n{
  display:block; font-size:.86rem; color:var(--celeste);
  font-variation-settings:"wdth" 110,"wght" 800;
  letter-spacing:.08em; margin-bottom:12px;
}
.credos li:nth-child(3n+2) .credos__n{ color:var(--rojo); }
.credos li:nth-child(3n) .credos__n{ color:var(--verde); }
.credos h3{ font-size:1.28rem; font-variation-settings:"wdth" 110,"wght" 800; }
.credos p{ margin-top:12px; font-size:.94rem; color:var(--texto); }

.pacto{
  margin-top:38px; padding:30px clamp(24px,3.4vw,44px);
  border-radius:var(--radio); background:var(--azul);
  color:#fff; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 26px;
}
.pacto__kicker{
  color:var(--amarillo); font-size:.88rem;
  font-variation-settings:"wght" 700; flex:none;
}
.pacto__texto{ flex:1 1 30ch; color:#D3E2F7; font-size:1rem; }
.pacto__texto b{ color:#fff; }

/* ───────── La máquina: gen → app → adm ───────── */
.maquina{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pieza{
  --tono:var(--azul);
  position:relative; overflow:hidden;
  border:2px solid var(--borde); border-radius:var(--radio);
  padding:30px 30px 32px; display:flex; flex-direction:column;
}
.pieza::before{ content:""; position:absolute; inset:0 0 auto 0; height:9px; background:var(--tono); }
.pieza--gen{ --tono:var(--amarillo); }
.pieza--app{ --tono:var(--rojo); }
.pieza--adm{ --tono:var(--verde); }
.pieza__rol{ margin-top:8px; font-size:.85rem; color:var(--gris); font-variation-settings:"wght" 600; }
.pieza h3{ margin-top:6px; font-size:1.9rem; font-variation-settings:"wdth" 116,"wght" 800; }
.pieza__que{ margin-top:14px; font-size:.94rem; color:var(--texto); }
.pieza__dato{
  margin-top:auto; padding-top:24px; font-size:.88rem;
  color:var(--gris); font-variation-settings:"wght" 600;
}
.pieza__dato a{ color:var(--rojo); }

/* ───────── Cuentas claras ───────── */
.claro{ padding:0 clamp(18px,4vw,32px) var(--paso); }
.claro__caja{
  max-width:var(--ancho); margin:0 auto; position:relative;
  background:var(--azul-hondo); color:#fff;
  border-radius:30px; overflow:hidden;
  padding:clamp(40px,6vw,86px) clamp(26px,5vw,72px);
}
.claro__caja::before{
  content:""; position:absolute; inset:0 auto 0 0; width:14px;
  background:linear-gradient(180deg,
    var(--amarillo) 0 26%, var(--verde) 26% 52%,
    var(--celeste) 52% 76%, var(--rojo) 76% 100%);
}
.claro__kicker{ color:var(--celeste); font-size:.9rem; font-variation-settings:"wght" 600; }
.claro__caja h2{ margin-top:14px; font-size:clamp(2rem,4.4vw,3.3rem); max-width:20ch; }
.claro__parrafo{ margin-top:22px; max-width:58ch; color:#D3E2F7; font-size:1.05rem; }

.estado{ margin:44px 0 0; display:grid; grid-template-columns:repeat(2,1fr); gap:28px 40px; }
.estado div{ padding-top:18px; border-top:3px solid rgba(255,255,255,.22); }
.estado dt{ font-variation-settings:"wdth" 108,"wght" 700; font-size:1.05rem; }
.estado dd{ margin:8px 0 0; font-size:.93rem; color:#B9CDE9; max-width:44ch; }

.claro__cierre{
  margin-top:48px; font-size:clamp(1.25rem,2.4vw,1.8rem);
  font-variation-settings:"wdth" 112,"wght" 700; line-height:1.3;
  color:var(--amarillo); max-width:26ch;
}

/* ───────── Cómo ayudar ───────── */
.ayudas{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ayuda{
  border-radius:var(--radio); background:var(--nieve);
  padding:28px 30px 30px;
}
.ayuda h3{ font-size:1.2rem; font-variation-settings:"wdth" 110,"wght" 800; }
.ayuda p{ margin-top:11px; font-size:.94rem; color:var(--texto); }
/* La pedida de plata es una banda ancha, no una tarjeta mas */
.ayuda--dinero{
  grid-column:1 / -1; background:var(--azul); color:#fff;
  padding:clamp(28px,3.4vw,42px) clamp(30px,3.6vw,46px);
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:24px 40px;
}
.ayuda--dinero h3{ font-size:clamp(1.5rem,2.6vw,2.1rem); }
.ayuda--dinero p{ margin-top:10px; color:#D3E2F7; font-size:1rem; max-width:52ch; }
.ayuda--dinero .btn{ flex:none; }
.ayudar__contacto{ margin-top:34px; color:var(--texto); font-size:.95rem; }
.ayudar__contacto a{ color:var(--rojo); }

/* ───────── Cierre ───────── */
.cierre{
  max-width:var(--ancho); margin:0 auto;
  padding:0 clamp(18px,4vw,32px) var(--paso);
  text-align:center;
}
.cierre__frase{
  font-size:clamp(1.6rem,3.6vw,2.7rem); line-height:1.24;
  font-variation-settings:"wdth" 116,"wght" 800;
  letter-spacing:-.02em; text-wrap:balance;
}
.cierre__botones{ margin-top:34px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

.pie__mail{ margin-top:10px; }
.pie__mail a{ color:var(--celeste); }

/* ───────── Responsive propio ───────── */
@media (max-width:1000px){
  .cifras{ grid-template-columns:repeat(3,1fr); }
  .credos,.maquina,.ayudas{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .cifras{ grid-template-columns:repeat(2,1fr); }
  .credos,.maquina,.ayudas,.estado{ grid-template-columns:1fr; }
  .cierre__botones .btn{ width:100%; }
}