/*
 * Las páginas interiores (diccionario, reglas, probar, docentes, aportá). La barra y
 * el pie están en `nav.css`; la portada conserva sus propios estilos.
 *
 * Mismo lenguaje que la portada: el paisaje de Nicaragua en el encabezado,
 * Piko, el papel cálido de fondo y los colores de sus plumas. Cada página
 * tiene su color de acento (`--acento`), igual que su ícono en la barra.
 */

:root{
  --verde-piko:#0F5D3D;
  --verde-hondo:#0A4530;
  --verde-bosque:#197249;
  --verde-hoja:#61A66B;
  --verde-pasto:#97C137;
  --cielo:#60C5FA;
  --nube:#DDF1FC;
  --papel:#F7F0E4;
  --papel-hondo:#ECE1CC;
  --copete:#E97927;
  --pico:#E8A429;
  --lila:#9C88C9;
  --grafito:#16241D;
  --tinta:#33453B;
  --tinta-suave:#55665C;
  --sombra:0 22px 50px rgba(10,69,48,.14);
  --sombra-chica:0 8px 22px rgba(10,69,48,.08);
  --sombra-flota:0 18px 40px rgba(10,69,48,.18);
  --radio:22px;
  --acento:var(--verde-pasto);
  --acento-suave:#EEF6DC;
}
.pagina[data-pagina="diccionario"]{--acento:var(--verde-pasto); --acento-suave:#EEF6DC}
.pagina[data-pagina="reglas"]{--acento:var(--lila); --acento-suave:#EEE9F7}
.pagina[data-pagina="probar"]{--acento:var(--cielo); --acento-suave:#E2F4FE}
.pagina[data-pagina="docentes"]{--acento:var(--pico); --acento-suave:#FDF1D9}
.pagina[data-pagina="aporta"]{--acento:var(--copete); --acento-suave:#FDE9DA}

/* ---------- Base ---------- */
.pagina{
  background:var(--papel); color:var(--grafito); margin:0;
  font-family:"Nunito Sans",system-ui,sans-serif; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
.pagina *{box-sizing:border-box}
.pagina h1,.pagina h2,.pagina h3{font-family:Fredoka,"Nunito Sans",sans-serif; font-weight:600; line-height:1.08; margin:0; letter-spacing:-.01em}
.pagina a{color:var(--verde-bosque); text-underline-offset:3px}
.pagina a:hover{color:var(--verde-piko)}
.pagina p{margin:0 0 1rem}
.pagina img{max-width:100%}
.pagina :focus-visible{outline:3px solid var(--pico); outline-offset:3px; border-radius:6px}
.contenedor{width:min(1180px,90vw); margin-inline:auto}
.oculto{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.etiqueta{
  font-family:Fredoka,sans-serif; font-weight:600; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--verde-bosque);
  display:flex; align-items:center; gap:.6rem; margin:0 0 1rem;
}
.etiqueta::before{content:""; width:28px; height:4px; border-radius:2px; background:var(--acento)}

/* ---------- Encabezado: el paisaje ---------- */
.cabeza{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(440px,62vh,600px); display:flex; align-items:flex-end;
  background:linear-gradient(180deg,#60C5FA 0%,#BFE6FB 55%,#97C137 56%);
}
.cabeza__escena{position:absolute; inset:0; z-index:-2}
.cabeza__escena svg{position:absolute; inset:0; width:100%; height:100%}
.cabeza::after{ /* velo para que el texto respire sobre el cielo */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, rgba(247,240,228,.96) 0%, rgba(247,240,228,.9) 36%, rgba(247,240,228,.15) 64%, rgba(247,240,228,0) 75%);
}
.cabeza__grid{
  width:min(1180px,90vw); margin-inline:auto; position:relative;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end; gap:2rem;
  padding:clamp(3rem,7vw,5.5rem) 0 0;
}
.cabeza__texto{padding-bottom:clamp(3.4rem,6vw,5rem)}
.cabeza h1{font-size:clamp(2.3rem,5.2vw,3.9rem); margin-bottom:1rem; max-width:15ch; color:var(--grafito)}
.cabeza h1 em{font-style:normal; color:var(--verde-piko); position:relative; white-space:nowrap}
.cabeza h1 em::after{ /* subrayado a mano, del color de la página */
  content:""; position:absolute; left:-2%; right:-2%; bottom:.02em; height:.22em; z-index:-1;
  background:var(--acento); opacity:.45; border-radius:999px; transform:rotate(-1deg);
}
.cabeza__bajada{font-size:clamp(1.02rem,1.4vw,1.2rem); color:var(--tinta); max-width:46ch; margin:0}
.cabeza__piko{
  justify-self:center; align-self:end; width:clamp(150px,19vw,250px); height:auto;
  filter:drop-shadow(0 22px 22px rgba(10,69,48,.28)); margin-bottom:-6px; transform-origin:50% 100%;
}
.cabeza__acciones{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.6rem}
/* El borde de abajo, una loma suave hacia el papel */
.cabeza__ola{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(28px,4vw,56px); z-index:1; display:block}
.cabeza__ola path{fill:var(--papel)}

@media (max-width:820px){
  .cabeza{min-height:0}
  .cabeza::after{background:linear-gradient(180deg, rgba(247,240,228,.95) 0%, rgba(247,240,228,.88) 62%, rgba(247,240,228,.35) 100%)}
  .cabeza__grid{grid-template-columns:1fr; padding-top:2.4rem}
  .cabeza__piko{display:none}
  .cabeza__texto{padding-bottom:3.6rem}
}

/* ---------- Bloques ---------- */
.bloque{padding:clamp(2.6rem,6vw,4.6rem) 0; position:relative}
.bloque--hondo{background:var(--papel-hondo)}
.bloque--hondo::before,.bloque--hondo::after{ /* bordes ondulados entre secciones */
  content:""; position:absolute; left:0; right:0; height:22px; pointer-events:none;
  background:radial-gradient(18px 14px at 50% 0, var(--papel) 98%, transparent 100%) 0 0/44px 22px repeat-x;
}
.bloque--hondo::before{top:-1px}
.bloque--hondo::after{bottom:-1px; transform:scaleY(-1)}
.bloque h2{font-size:clamp(1.7rem,3.2vw,2.5rem); margin-bottom:.8rem}
.bloque h2 em{font-style:normal; color:var(--verde-piko)}
.bloque__cabeza{max-width:68ch; margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.bloque__bajada{color:var(--tinta); font-size:1.06rem; max-width:64ch}

/* ---------- Tarjetas ---------- */
.tarjeta{
  background:#fff; border-radius:var(--radio); padding:clamp(1.2rem,2.4vw,1.7rem);
  box-shadow:var(--sombra-chica); position:relative;
  transition:transform .3s cubic-bezier(.2,.8,.3,1.2), box-shadow .3s ease;
}
.tarjeta--viva:hover{transform:translateY(-5px); box-shadow:var(--sombra-flota)}
.rejilla{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.icono-burbuja{
  width:54px; height:54px; border-radius:18px; display:grid; place-items:center; flex:none;
  background:var(--acento-suave); color:var(--verde-piko); margin-bottom:1rem;
  transition:transform .4s cubic-bezier(.2,.8,.3,1.4);
}
.icono-burbuja svg{width:28px; height:28px; fill:currentColor}
.tarjeta--viva:hover .icono-burbuja{transform:rotate(-8deg) scale(1.08)}

/* ---------- Botones ---------- */
.btn{
  font-family:Fredoka,sans-serif; font-weight:600; font-size:1rem; line-height:1.2;
  padding:.85rem 1.45rem; border-radius:999px; text-decoration:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:.55rem; border:2px solid transparent;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn svg{width:20px; height:20px; fill:currentColor; flex:none}
.btn::after{ /* un brillo que cruza al pasar el mouse */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s ease;
}
.btn:hover::after{transform:translateX(120%)}
.btn--solido{background:var(--verde-piko); color:var(--papel) !important; box-shadow:0 10px 22px rgba(15,93,61,.26)}
.btn--solido:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(15,93,61,.32)}
.btn--linea{border-color:var(--verde-piko); color:var(--verde-piko) !important; background:rgba(255,255,255,.7)}
.btn--linea:hover{background:#fff; transform:translateY(-2px)}
.btn--naranja{background:var(--copete); color:var(--grafito) !important; box-shadow:0 10px 24px rgba(233,121,39,.32)}
.btn--naranja:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(233,121,39,.4)}

/* ---------- Insignias ---------- */
.insignia{
  display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap;
  font-family:Fredoka,sans-serif; font-weight:500; font-size:.78rem; line-height:1.3;
  padding:.22rem .65rem; border-radius:999px; background:var(--nube); color:var(--verde-hondo);
  text-decoration:none;
}
.insignia svg{width:13px; height:13px; fill:currentColor; flex:none}
.insignia--revision{background:#FCE8C6; color:#7A4A05}
.insignia--publicada{background:#EDE6F7; color:#4B3A72}
.insignia--varias{background:#DFF0D2; color:#2E5A16}
/* Variantes */
.insignia--sistemas{background:#FDF0D5; color:#7A4A05}
.insignia--region{background:#DDF1FC; color:#0B4D72}
.insignia--hablantes{background:#FDE5D3; color:#8A3D07}
.insignia--escrituras{background:#EDE6F7; color:#4B3A72}
.insignia--sinonimo{background:#DFF0D2; color:#2E5A16}

/* ---------- Avisos ---------- */
.aviso{
  background:var(--nube); border-radius:var(--radio); padding:1.1rem 1.3rem 1.1rem 3.6rem;
  font-size:.96rem; color:#24453A; position:relative;
}
.aviso::before{
  content:"i"; position:absolute; left:1.1rem; top:1.05rem; width:1.7rem; height:1.7rem; border-radius:50%;
  display:grid; place-items:center; background:var(--cielo); color:#fff; font:700 .95rem/1 Fredoka,sans-serif;
}
.aviso--pico{background:#FDF0D5; color:#5C3D02}
.aviso--pico::before{content:"!"; background:var(--pico)}
.aviso p:last-child{margin:0}

/* ---------- Cifras ---------- */
.cifras-fila{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem}
.cifra-chica{
  background:rgba(255,255,255,.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:16px; padding:.55rem .95rem; box-shadow:var(--sombra-chica); min-width:7.5rem;
}
.cifra-chica b{display:block; font:600 1.5rem/1.1 Fredoka,sans-serif; color:var(--verde-piko)}
.cifra-chica span{font-size:.82rem; color:var(--tinta-suave)}
@media (max-width:520px){ .cifras-fila{flex-wrap:nowrap; gap:.5rem} .cifra-chica{min-width:0; flex:1; padding:.5rem .6rem} .cifra-chica b{font-size:1.3rem} .cifra-chica span{font-size:.74rem; line-height:1.25; display:block} }

/* ---------- Pasos numerados ---------- */
.pasos{counter-reset:paso; list-style:none; padding:0; margin:0; display:grid; gap:1rem; position:relative}
.pasos > li{
  counter-increment:paso; background:#fff; border-radius:20px; padding:1.1rem 1.2rem 1.1rem 4.4rem;
  position:relative; box-shadow:var(--sombra-chica);
}
.pasos > li::before{
  content:counter(paso); position:absolute; left:1.1rem; top:1rem; width:2.3rem; height:2.3rem; border-radius:50%;
  background:var(--acento); color:var(--grafito); font:700 1.1rem/1 Fredoka,sans-serif; display:grid; place-items:center;
  box-shadow:0 6px 14px rgba(10,69,48,.15);
}
.pasos b{font-family:Fredoka,sans-serif; font-weight:600; color:var(--verde-piko)}

/* ---------- Banda de llamada ---------- */
.banda{
  background:radial-gradient(120% 140% at 0% 0%, #1E7A50 0%, var(--verde-piko) 45%, var(--verde-hondo) 100%);
  color:#E6F2EB; border-radius:calc(var(--radio) + 10px); padding:clamp(1.8rem,4vw,3rem);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.6rem 2.4rem; align-items:center;
  position:relative; overflow:hidden; box-shadow:var(--sombra);
}
.banda::before{ /* hojas de luz */
  content:""; position:absolute; width:340px; height:340px; right:-90px; top:-120px; border-radius:50%;
  background:radial-gradient(circle, rgba(151,193,55,.35), transparent 65%);
}
.banda h2{color:#fff; margin-bottom:.5rem}
.banda p{margin:0; color:#CFE2D6; max-width:56ch}
.banda .btn--linea{background:transparent; border-color:#CFE2D6; color:#fff !important}
.banda .btn--linea:hover{background:rgba(255,255,255,.1)}
@media (max-width:720px){ .banda{grid-template-columns:1fr} }

/* ---------- Movimiento ---------- */
@keyframes flotar{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(96,197,250,.55)} 100%{box-shadow:0 0 0 16px rgba(96,197,250,0)}}
@media (prefers-reduced-motion:reduce){
  .pagina *,.pagina *::before,.pagina *::after{animation:none !important; transition:none !important}
}