/* ============================================================
   Netonworld — tokens compartidos
   La autoridad de color, radio y ritmo de las tres paginas:
   neton.world, neton.world/top y precios.neton.world.

   Antes cada pagina traia los suyos y ninguna coincidia con otra:
   tres cianes (#00D4E8, #00E5FF, #00E5FF), tres grises y tres fondos.
   El cian es el logo, asi que era lo unico que la gente reconoce como
   la marca, y era lo que mas variaba.

   Los nombres van con prefijo nw- a proposito: cada pagina conserva
   sus propias variables y solo cambia de donde sacan el valor. Asi
   nada se renombra y una pagina que no cargue este archivo sigue
   funcionando con lo suyo.

   Los contrastes estan medidos contra --nw-fondo, no supuestos.
   ============================================================ */

:root{
  /* ---- Fondo y superficies ---- */
  --nw-fondo:#080A0F;          /* el fondo de todo */
  --nw-carta:#0D1116;          /* una tarjeta sobre el fondo */
  --nw-carta-alta:#161A20;     /* una tarjeta sobre otra tarjeta */
  --nw-linea:#1C222B;
  --nw-linea-fuerte:#2A3038;

  /* ---- Texto. El numero es el contraste sobre --nw-fondo ---- */
  --nw-papel:#FFFFFF;          /* 19.80:1 — titulos y lo que mas pesa */
  --nw-tenue:#AEB6C2;          /*  9.68:1 — texto secundario */
  --nw-mudo:#939BAA;           /*  7.08:1 — apoyo. Es AAA; los otros dos
                                   grises que habia daban 6.30 y 6.33 */
  --nw-apagado:#5A616E;        /*  3.28:1 — solo decorativo, nunca texto */

  /* ---- Acento. El cian del logo y nada mas ---- */
  --nw-cian:#00E5FF;           /* 12.87:1. El otro candidato daba 10.92 */
  --nw-cian-claro:#33EBFF;     /* hover */
  --nw-cian-hondo:#00B8CC;     /* pulsado */
  --nw-cian-velo:rgba(0,229,255,.10);   /* fondos de pastilla */
  --nw-cian-aro:rgba(0,229,255,.28);    /* bordes y anillos */
  --nw-sobre-cian:#080A0F;     /* lo unico que se escribe encima del cian */

  /* ---- Estado ---- */
  --nw-ok:#00CCB3;
  --nw-alerta:#F5C518;
  --nw-error:#EF4444;
  --nw-whatsapp:#25D366;

  /* ---- Radios. Tres pasos y la pastilla ----
     Habia trece valores sueltos entre 2 y 18 px: la diferencia entre 6 y
     7 px no la ve nadie y solo significaba haberlos elegido a ojo. */
  --nw-r-chico:5px;            /* botones pequenos, insignias */
  --nw-r:9px;                  /* tarjetas, botones, campos */
  --nw-r-grande:16px;          /* bloques grandes y modales */
  --nw-r-pastilla:999px;       /* pildoras y avatares */

  /* ---- Tipografia ----
     Una sola familia en las tres paginas. Antes eran tres: DM Sans en la
     home, Poppins en /top y Funnel Display en precios, o sea el sitio
     cambiaba de voz al cambiar de pagina. Ademas la home y /top cargaban
     dos familias cada una; ahora piden una sola.

     Los nombres van separados aunque hoy apunten a lo mismo: el dia que el
     texto corrido pida una cara de lectura —Funnel Sans es la hermana de
     Funnel Display, hecha para eso— se cambia --nw-texto y ya. */
  --nw-display:"Funnel Display","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --nw-texto:"Funnel Display","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* ---- Espaciado ----
     Siete pasos y ninguno mas. El padding de cada seccion de la home se habia
     elegido a ojo —40, 50, 60, 80, 120 px y un 14vh suelto— igual que habian
     sido elegidos los trece valores de border-radius que ya se unificaron. */
  --nw-e1:8px;
  --nw-e2:16px;
  --nw-e3:24px;
  --nw-e4:40px;
  --nw-e5:64px;
  --nw-e6:104px;
  --nw-e7:168px;

  /* ---- Escala tipografica ----
     Lo que se lee como caro es el contraste entre niveles, no el tamano
     absoluto: antes el rango iba de 16 a 92 px con los pasos del medio
     apretados. El tracking negativo crece con el tamano porque una letra
     grande necesita menos aire entre signos para leerse compacta. */
  --nw-fs-display:clamp(48px,9vw,120px);
  --nw-fs-h2:clamp(32px,5vw,64px);
  --nw-fs-body:17px;
  --nw-fs-rotulo:11px;
  --nw-tr-display:-0.045em;
  --nw-tr-h2:-0.03em;
  --nw-tr-rotulo:0.14em;

  /* ---- Movimiento ---- */
  --nw-dur:.2s;
  --nw-suave:cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   Volver a Netonworld — el mismo boton en todas las paginas
   Vive aca y no en cada hoja porque es el unico control que se repite
   en todo el sitio: si cada pagina lo dibuja a su manera, deja de
   leerse como el mismo boton y hay que aprenderselo de nuevo.
   ============================================================ */
.nw-volver{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--nw-texto);
  padding:8px 14px;
  color:var(--nw-tenue);background:var(--nw-carta);
  border:1px solid var(--nw-linea);border-radius:var(--nw-r);
  font-size:.8125rem;font-weight:500;line-height:1.2;
  text-decoration:none;
  transition:background var(--nw-dur) var(--nw-suave),
             border-color var(--nw-dur) var(--nw-suave),
             color var(--nw-dur) var(--nw-suave);
}
.nw-volver:hover{
  background:var(--nw-cian-velo);
  border-color:var(--nw-cian-aro);
  color:var(--nw-cian);
}
.nw-volver svg{
  flex-shrink:0;width:16px;height:16px;
  transition:transform var(--nw-dur) var(--nw-suave);
}
.nw-volver:hover svg{transform:translateX(-2px)}

/* En pantalla angosta queda la flecha sola: el destino ya se entiende por
   la direccion, y el texto completo empujaba el resto de la cabecera. */
@media(max-width:480px){
  .nw-volver{padding:8px 10px}
  .nw-volver .nw-volver-txt{display:none}
}

@media(prefers-reduced-motion:reduce){
  .nw-volver,.nw-volver svg{transition:none}
}