/* La base de las páginas públicas de gonIA (landing, tu cuenta, baja y arrepentimiento).
   Misma identidad que el tablero: la Patagonia. Cielo y papel claros, la cordillera azul
   grisácea con el Lanín, el ocre de la estepa (lo que sale) y el turquesa del lago (lo que
   entra). Newsreader para títulos y cifras; Schibsted Grotesk para el resto.
   Cada página suma lo suyo en su propio <style>; acá va lo compartido y los nombres de clase
   que usan todas (no renombrarlos: los usan varias páginas). */

/* El $ de los montos con una sola raya, como el del peso: Newsreader lo dibuja con dos (parece el
   cifrão). Sólo ese carácter sale de la sans de la marca; el resto de la cifra sigue en la serif. */
@font-face{font-family:'Signo Peso';src:url(https://fonts.gstatic.com/s/schibstedgrotesk/v7/Jqz55SSPQuCQF3t8uOwiUL-taUTtap9Gayo.woff2) format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0024}
:root{
  color-scheme: light;
  --papel:#F5F1E9;--superficie:#FFFDF8;--tinta:#17222D;--tinta-2:#3B4856;--tinta-3:#56636F;
  --linea:#DCD4C4;--linea-suave:#E8E1D3;
  --ocre:#B8792B;--ocre-fuerte:#8B5212;--ocre-tenue:#F3E3C8;
  --lago:#00918C;--lago-tinta:#00706C;--lago-tenue:#D3ECE8;
  --cielo-a:#E3EBEE;--cielo-b:#F4EEE3;--monte-lejos:#B7C4CC;--monte:#4C6176;--nieve:#FFFFFF;
  --agua-a:#CFE8E4;--agua-b:#E4F2EF;
  --serif:'Signo Peso','Newsreader','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --sans:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --radio:14px;--radio-chico:10px;
  --sombra:0 1px 2px rgba(23,34,45,.06),0 8px 24px -12px rgba(23,34,45,.18);
  --ancho:1120px;--canal:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--lago-tinta);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.1;margin:0;text-wrap:balance}
p{margin:0}
p,li{text-wrap:pretty}
em{font-style:italic}
:focus-visible{outline:3px solid var(--lago);outline-offset:3px;border-radius:6px}
.solo-lectores{position:absolute!important;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:12px;top:-60px;z-index:50;background:var(--tinta);color:#fff;padding:10px 14px;border-radius:8px}
.saltar:focus{top:12px}

.envoltura{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--canal)}

/* ── la marca: el monte con nieve, la línea de la estepa y gon·IA ── */
.marca{display:inline-flex;align-items:center;gap:9px;color:var(--tinta);text-decoration:none}
.marca svg{width:30px;height:26px;flex:none}
.marca-txt{font-family:var(--serif);font-size:25px;line-height:1;letter-spacing:-.02em;font-weight:500}
.marca-txt em{color:var(--lago-tinta);font-style:italic}

/* ── la franja legal: el «Botón de arrepentimiento» y el «Botón de baja de servicio» (Disp. 954/2025)
   tienen que estar «a simple vista, en lugar destacado y en el primer acceso». En el pie solos no
   alcanza (hay que bajar hasta el final), así que van también acá, arriba de todo y antes de la
   cabecera. No se pega al bajar: con verlos al entrar alcanza, y en el pie están siempre. Angosta y
   tranquila para no competir con la portada, pero con letra de 14 px y contraste alto.
   Términos y privacidad no cargan este archivo: copian estas mismas reglas en su página. ── */
.franja-legal{background:#EAE2D3;border-bottom:1px solid var(--linea);font-size:14px;line-height:1.2}
/* en el teléfono los dos botones se reparten el ancho, mitad y mitad, y si no entran en una línea
   (a 360 px no entran) se parten en dos renglones sin que la franja crezca de los 40 px */
.franja-legal-in{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.franja-legal a{display:flex;align-items:center;justify-content:center;min-height:40px;padding:3px 0;text-align:center;
  text-wrap:balance;color:var(--tinta);font-weight:600;text-decoration:underline;text-decoration-color:rgba(23,34,45,.4)}
.franja-legal a:hover{text-decoration-color:currentColor}
/* en la compu, a la derecha y en una línea */
@media (min-width:640px){
  .franja-legal-in{display:flex;justify-content:flex-end;gap:28px}
  .franja-legal a{white-space:nowrap}
}

/* ── cabecera ── */
.cabecera{position:sticky;top:0;z-index:20;background:rgba(245,241,233,.86);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .2s}
.cabecera.con-linea{border-bottom-color:var(--linea)}
.cabecera-in{display:flex;align-items:center;gap:18px;min-height:64px}
.nav{display:none;gap:22px;margin-left:12px}
.nav a{color:var(--tinta-2);text-decoration:none;font-size:15px}
.nav a:hover{color:var(--tinta)}
.cabecera-acciones{margin-left:auto;display:flex;align-items:center;gap:14px}
.enlace-cuenta{color:var(--tinta-2);text-decoration:none;font-size:15px;white-space:nowrap}
.enlace-cuenta:hover{color:var(--tinta)}
/* con «Empresas» el menú suma cinco: desde 960 px entra en una línea al lado de «Tu cuenta» y el botón
   (a 880 partía «Cómo funciona» en dos renglones); más angosto no se muestra, como en el teléfono */
@media (min-width:960px){.nav{display:flex}}
.nav a{white-space:nowrap}
/* gonIA Empresas: la entrada especial del menú, en el bronce de la base del volcán de la marca */
.nav a.nav-empresas{display:inline-flex;align-items:center;gap:7px;margin:-6px 0;padding:5px 13px 5px 11px;border-radius:999px;
  color:#7A4710;font-weight:600;background:linear-gradient(180deg,#FCF3E4,#F1DDBB);border:1px solid rgba(184,121,43,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);transition:border-color .15s,color .15s}
.nav a.nav-empresas::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#B8792B;box-shadow:0 0 0 3px rgba(184,121,43,.2)}
.nav a.nav-empresas:hover{color:#5A3409;border-color:#B8792B}
.nav a.nav-empresas[aria-current="page"]{color:#1E1408;background:linear-gradient(180deg,#F3CF94,#DCA55C);border-color:#C48A40}
.nav a.nav-empresas[aria-current="page"]::before{background:#5A3409;box-shadow:none}

/* ── botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;
  border-radius:999px;border:1.5px solid transparent;font:600 16px/1 var(--sans);text-decoration:none;
  cursor:pointer;transition:transform .12s ease,background-color .15s,border-color .15s,color .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn-primario{background:var(--lago-tinta);color:#fff}
.btn-primario:hover{background:#005c59}
.btn-secundario{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.btn-secundario:hover{background:var(--tinta);color:var(--papel)}
.btn-suave{background:var(--superficie);color:var(--tinta);border-color:var(--linea)}
.btn-suave:hover{border-color:var(--tinta-3)}
/* el bronce: lo de gonIA Empresas (letra oscura: el bronce claro con blanco no llega al contraste) */
.btn-bronce{background:linear-gradient(180deg,#F2CB8B 0%,#DCA45B 100%);color:#1E1408;border-color:#C48A40;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 26px -12px rgba(184,121,43,.75)}
.btn-bronce:hover{background:linear-gradient(180deg,#F7D69D 0%,#E3AE68 100%)}
.btn-chico{min-height:40px;padding:0 16px;font-size:15px}
.btn svg{width:20px;height:20px;flex:none}
.btn-bloque{width:100%}

/* ── piezas comunes ── */
.ceja{font:600 13px/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ocre-fuerte)}
.tarjeta{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra)}
.nota{font-size:14px;color:var(--tinta-3)}
.cifra{font-family:var(--serif);font-variant-numeric:lining-nums tabular-nums}
.sale{color:var(--ocre-fuerte)}
.entra{color:var(--lago-tinta)}

/* ── pie (los botones de arrepentimiento y de baja van SIEMPRE a la vista: Disp. 954/2025) ── */
.pie{margin-top:72px;background:var(--tinta);color:#D9DED9;padding:40px 0 calc(28px + env(safe-area-inset-bottom))}
.pie a{color:#fff}
.pie-legal{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.btn-legal{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;
  border:1.5px solid #fff;color:#fff;font:600 15px/1 var(--sans);text-decoration:none}
.btn-legal:hover{background:#fff;color:var(--tinta)}
.pie-cols{display:grid;gap:22px}
.pie .marca{color:#fff}
.pie .marca-txt em{color:#63D0C6}
.pie-lema{margin-top:8px;color:#B9C2C6;font-size:15px}
.pie-enlaces{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.pie-chico{margin-top:28px;padding-top:18px;border-top:1px solid #2B3A48;font-size:13px;color:#9AA6AE}
/* quién vende y cómo ubicarlo (Ley 24.240 art. 8, Res. 270/2020 art. 2, Disp. 954/2025 art. 6): no es
   letra chica, es lo que alguien busca para reclamar. Si está, se lleva la raya de arriba del todo. */
.pie-identidad{margin-top:28px;padding-top:18px;border-top:1px solid #2B3A48;font-size:14px;line-height:1.5;color:#C5CDD2;overflow-wrap:anywhere}
.pie-identidad + .pie-chico{margin-top:10px;padding-top:0;border-top:0}
@media (min-width:720px){.pie-cols{grid-template-columns:1.4fr 1fr 1fr}}

/* ── agregados (completan lo de arriba, no lo cambian de nombre) ──
   Objetivos táctiles de 44 px como mínimo: el botón chico de la cabecera y los enlaces de texto
   de la cabecera y del pie también se tocan con el dedo. */
.btn-chico{min-height:44px}
.marca{min-height:44px}
.nav a,.enlace-cuenta{display:inline-flex;align-items:center;min-height:44px}
.pie-enlaces{gap:0}
.pie-enlaces a{display:inline-flex;align-items:center;min-height:44px}
/* En un teléfono de 360 px la cabecera (marca, «Tu cuenta» y el botón) tiene que entrar en una
   línea sin scroll de costado: se achican un poco los aires, no se esconde nada. */
@media (max-width:420px){
  :root{--canal:16px}
  .cabecera-in{gap:10px}
  .cabecera-acciones{gap:12px}
  .marca{gap:7px}
  .marca-txt{font-size:23px}
  .enlace-cuenta{font-size:14.5px}
  .cabecera .btn-chico{padding:0 14px;font-size:14.5px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}