/* Contigo · webfonts · dirección tipográfica mixta del 14/09/2026
   Sustituye la pauta anterior (Newsreader en todos los titulares, familia de
   sistema en el cuerpo). Ahora:

   · InterDisplay Regular 400 → base de los titulares grandes.
   · Newsreader Italic 400    → énfasis breve DENTRO del mismo titular.
   · Inter Regular 400        → lectura, datos, navegación y controles.

   Los tres binarios vienen con el encargo y se sirven desde el propio proyecto,
   con sus licencias OFL en assets/fuentes/. Ya no hay dependencia de Google
   Fonts para Newsreader.

   Nota de peso: los archivos entregados son Regular 400. Los pesos 500 y 600
   que usa la jerarquía funcional (etiquetas, controles, nombres) se sirven del
   Inter variable oficial mientras no haya binarios propios de esos pesos; sin
   él, el navegador los sintetiza. Es la pieza que falta para ser autónomo. */

/* El @import va PRIMERO por obligación de CSS: cualquier regla anterior salvo
   @charset y @layer lo invalida, y el navegador lo descarta sin avisar. Estaba
   al final y por eso las fichas del sistema —que solo enlazan styles.css— se
   quedaban sin las caras 500 y 600 y el navegador las falseaba a partir de la
   400. Y va antes, no después, también por precedencia: cuando dos @font-face
   cubren el mismo peso gana el declarado en último lugar, así que los binarios
   propios de abajo siguen mandando en el 400. */
@import url("https://rsms.me/inter/inter.css");

@font-face{font-family:"InterDisplay";src:url("../assets/fuentes/InterDisplay-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fuentes/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* Newsreader entra solo en cursiva: es el único uso que tiene en el sistema.
   No se declara la redonda para que nadie la use por descuido en un titular. */
@font-face{font-family:"Newsreader";src:url("../assets/fuentes/Newsreader-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}


/* Contigo · color · Adenda 2 §3 (A2-02, A2-12)
   Mar / Piedra / Oliva es la paleta vigente (D-24). Los valores marcados como
   ancla proceden del expediente; el resto de la escala es propuesta derivada de
   SOJÖ para este encargo, nunca un valor recuperado del manual primitivo. */
:root{
  /* ── Mar · la tinta ── */
  --mar-950:#0F211E; --mar-900:#193733; --mar-800:#21463F; --mar-700:#2C5C54;
  --mar-600:#3F6D66; --mar-500:#4F847D; --mar-400:#74A6A0; --mar-300:#9EC5BF;
  --mar-200:#C4DDD9; --mar-100:#D7E8E5; --mar-50:#EDF4F3;

  /* ── Piedra · el campo cálido ──
     Del 50 al 400 son superficie y grafismo. El texto empieza en el 600. */
  --piedra-700:#5C4736; --piedra-600:#7C614A; --piedra-500:#9E7F63; --piedra-400:#BC9D80;
  --piedra-300:#D6C2A7; --piedra-200:#E7DAC8; --piedra-100:#F3EBE0; --piedra-50:#FAF6F0;

  /* ── Oliva · la acción y la vegetación ── */
  --oliva-900:#2C331F; --oliva-800:#3B442A; --oliva-700:#4C5736; --oliva-600:#606C45;
  --oliva-500:#7A8759; --oliva-400:#96A373; --oliva-300:#B4BF95; --oliva-200:#D2D9BA;
  --oliva-100:#E8EBD9; --oliva-50:#F5F6EC;

  --white:#FFFFFF;

  /* Canales sueltos de las dos tintas que admiten velo. Sin esto, cada
     rgba(15,33,30,.55) de una hoja de página es una copia literal de --mar-950
     que deja de seguirlo si la tinta cambia. Uso: rgb(var(--tinta-rgb) / .55). */
  --tinta-rgb:15 33 30;          /* @kind color */      /* --mar-950 #0F211E */
  /* Canales del oliva profundo, para los velos de las tarjetas de unidad y de
     las fichas flotantes. Van como canal y no como color cerrado porque se usan
     con alfa: rgb(var(--x) / a) es la única forma de teñir con un token sin
     duplicar el valor. */
  --oliva-900-rgb:44 51 31;      /* @kind color */      /* --oliva-900 #2C331F */
  --oliva-950-rgb:20 26 14;      /* @kind color */      /* oliva más profundo que la rampa */
  --blanco-rgb:255 255 255;      /* @kind color */      /* --white #FFFFFF */

  /* Estados funcionales — hue propio, lejos de los tres de identidad. */
  --info-600:#1D5B8A;    --info-50:#E9F1F7;
  --success-600:#1E6B4F; --success-50:#E8F3ED;
  --warning-600:#9A5B12; --warning-50:#FBF2E4;
  --error-600:#A32B29;   --error-50:#FBEBEA;

  /* ── Roles de trabajo · A2-12 ──
     Asignación operativa de la Adenda 2. Los hex son anclas del expediente. */
  --marca:var(--mar-800);            /* #21463F · firma y destacados de identidad */
  --tinta:var(--mar-950);            /* #0F211E · texto y títulos sobre claro · 16,71:1 */
  --enlace:var(--mar-700);           /* #2C5C54 · enlace, borde de control y foco · 7,59:1 */
  --mar-suave:var(--mar-300);        /* #9EC5BF · panel secundario con tinta oscura */
  --piedra-campo:var(--piedra-300);  /* #D6C2A7 · campo cálido con tinta oscura */
  --oliva-suave:var(--oliva-200);    /* #D2D9BA · panel de acción informativa */
  --oliva-medio:var(--oliva-300);    /* #B4BF95 · campo y apoyo no textual */
  --accion:var(--oliva-700);         /* #4C5736 · botón principal con texto blanco · 7,71:1 */
  /* Estados de la pareja de acción y del enlace. Viven aquí y no en la hoja de
     un kit: un alias en castellano incompleto obliga a cada página a redefinirlo
     o a heredar un color equivocado en silencio. */
  --accion-hover:var(--oliva-800);   /* #3B442A · blanco encima · 10,26:1 */
  --accion-activo:var(--oliva-900);  /* #2C331F · blanco encima · 13,12:1 */
  --enlace-hover:var(--mar-800);     /* #21463F · enlace pulsado o apuntado · 10,43:1 */
  /* --blanco completa la capa semántica en castellano: --marca, --tinta,
     --enlace y --accion ya lo están, y el blanco era la única excepción en
     inglés. Esa asimetría hizo que se escribiera var(--blanco) siete veces en
     la hoja del sitio, donde no resolvía y el texto caía al color heredado:
     titulares en verde oscuro sobre fotografía clara. */
  --blanco:var(--white);
  --superficie:var(--white);
  --sobre-accion:var(--white);

  /* Dos roles de lectura derivados de las anclas, con su par medido.
     --tinta queda para títulos; el cuerpo largo va en --texto. */
  --texto:var(--mar-900);        /* #193733 · 12,84:1 blanco · 10,86:1 piedra-100 */
  --texto-suave:var(--mar-600);  /* #3F6D66 · 5,85:1 blanco · 4,95:1 piedra-100 */

  /* ── Alias semánticos ── */
  --brand-primary:var(--marca);
  --brand-secondary:var(--accion);
  --brand-ink-on-primary:var(--white);

  --surface-base:var(--superficie);
  --surface-subtle:var(--piedra-100);   /* campo cálido claro, de uso general */
  --surface-warm:var(--piedra-campo);   /* campo cálido pleno · A2-12, no como fondo de todas las páginas */
  --surface-sunken:var(--piedra-50);
  --surface-card:var(--superficie);
  --surface-inverse:var(--marca);
  --surface-inverse-deep:var(--tinta);
  --surface-panel-mar:var(--mar-suave);
  --surface-panel-oliva:var(--oliva-suave);

  --text-primary:var(--tinta);          /* 16,71:1 sobre blanco */
  --text-secondary:var(--mar-600);      /* 5,85:1 sobre blanco */
  --text-muted:var(--piedra-600);       /* 5,73:1 sobre blanco */
  --text-inverse:var(--white);
  --text-inverse-secondary:var(--mar-100);
  --text-link:var(--enlace);            /* 7,59:1 */
  --text-link-hover:var(--mar-800);

  --border-default:var(--piedra-200);   /* división cálida, no esencial */
  --border-strong:var(--piedra-300);    /* borde de tarjeta */
  --border-control:var(--enlace);       /* contorno de control · A2-12 · 7,59:1 */
  --border-inverse:rgba(255,255,255,.24);

  --action-primary:var(--accion);           /* blanco encima: 7,71:1 */
  --action-primary-hover:var(--oliva-800);  /* + subrayado · A2-12 */
  --action-primary-active:var(--oliva-900); /* + relieve de 1 px · A2-12 */
  --action-on-primary:var(--sobre-accion);
  --action-secondary-bg:var(--white);
  --action-secondary-border:var(--enlace);
  --action-secondary-text:var(--tinta);
  --action-secondary-hover-bg:var(--piedra-50);
  --action-ghost-hover-bg:var(--oliva-50);
  --action-disabled-bg:var(--piedra-200);
  --action-disabled-text:var(--piedra-700); /* 6,31:1 · sigue legible */

  --focus-ring:var(--enlace);           /* contorno 2 px · A2-12 */
  --focus-ring-inverse:var(--white);
  --focus-ring-width:2px;
  --focus-ring-offset:2px;              /* separación blanca de 2 px sobre claro */

  --status-info:var(--info-600);       --status-info-surface:var(--info-50);
  --status-success:var(--success-600); --status-success-surface:var(--success-50);
  --status-warning:var(--warning-600); --status-warning-surface:var(--warning-50);
  --status-error:var(--error-600);     --status-error-surface:var(--error-50);

  /* Ámbitos · A2-03: misma gramática visual, se distinguen por TEXTO.
     El color es apoyo y nunca el único portador del dato. */
  --unit-materno:var(--oliva-700);
  --unit-materno-surface:var(--oliva-200);
  --unit-materno-text:var(--tinta);       /* 11,44:1 */
  --unit-adultos:var(--mar-700);
  --unit-adultos-surface:var(--mar-300);
  --unit-adultos-text:var(--tinta);       /* 8,91:1 */

  /* Logo. Tintas originales v06; no se recolorea (A2-01). */
  --logo-verde:#21463F;
  --logo-negro:#000000;
  --logo-blanco:#FFFFFF;
  --logo-ink:var(--logo-verde);

  /* Compatibilidad con nombres anteriores. Para lo nuevo usa los roles de arriba. */
  --ink-950:var(--mar-950); --ink-900:var(--mar-900); --ink-800:var(--mar-800);
  --ink-700:var(--mar-700); --ink-600:var(--mar-600); --ink-500:var(--mar-500);
  --ink-400:var(--mar-400); --ink-300:var(--mar-300); --ink-200:var(--mar-200);
  --ink-100:var(--mar-100); --ink-50:var(--mar-50);
  --green-900:var(--oliva-900); --green-800:var(--oliva-800); --green-700:var(--oliva-700);
  --green-600:var(--oliva-600); --green-500:var(--oliva-500); --green-400:var(--oliva-400);
  --green-300:var(--oliva-300); --green-200:var(--oliva-200); --green-100:var(--oliva-100);
  --green-50:var(--oliva-50);
  --sand-100:var(--piedra-100); --sand-50:var(--piedra-50);
  --logo-accent:var(--logo-verde);
}


/* Contigo · tipografía · dirección mixta del 14/09/2026
   Sustituye la pauta anterior de A2-13 (Newsreader en todos los titulares,
   familia de sistema en el cuerpo). La nueva combinación:

   · InterDisplay 400 → base de los titulares grandes.
   · Newsreader cursiva 400 → un fragmento breve dentro del mismo titular,
     elegido por su significado. Hay variante sin énfasis: no todo título
     necesita cursiva.
   · Inter 400 → párrafos, entradas, preguntas, datos, navegación y controles.

   Lo que NO cambia: la escala de tamaños e interlineados de A2-13, la jerarquía
   funcional de los pesos, los roles de color y los mínimos de lectura. Solo
   cambian las familias y aparece un rol nuevo, el énfasis. */
:root{
  --font-display:"InterDisplay","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-emph:"Newsreader",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* Compensación óptica del énfasis, medida y no supuesta. Empecé con un 6 %
     dando por hecho que la cursiva de Newsreader tiene la altura de x más baja;
     medidas las dos con la misma caja de tinta a 64 px, salen 33,0 px en
     InterDisplay y 32,6 px en Newsreader cursiva: un 1,2 % de diferencia, no un
     6 %. Con el 6 % la cursiva quedaba un 6 % MÁS alta que la base.
     El 3 % iguala la altura de x y deja un pelo de más por los trazos finos de
     la cursiva, que a igual altura pesan menos. La cifra es orientativa, como
     dice el encargo: un titular muy corto puede pedir un punto más. */
  --emph-scale:1.03; /* @kind other */
  --emph-tracking:0.004em;

  /* Escala A2-13, intacta. Cada par es móvil → escritorio. */
  --size-display:40px;      --leading-display:44px;
  --size-h1:36px;           --leading-h1:42px;
  --size-h2:28px;           --leading-h2:34px;
  --size-h3:22px;           --leading-h3:28px;
  --size-entrada:18px;      --leading-entrada:28px;
  --size-body:16px;         --leading-body:26px;
  --size-label:16px;        --leading-label:22px;
  --size-note:14px;         --leading-note:20px;

  /* InterDisplay es una grotesca de contraste bajo: aguanta más tracking
     negativo que Newsreader en los cuerpos grandes, y lo necesita para no
     abrirse. Por eso el display sube de -0,01 a -0,02 em. */
  --tracking-display:-0.02em; --tracking-heading:-0.012em;
  --tracking-body:0; --tracking-label:0; --tracking-caps:0.08em;

  /* 60–70 caracteres por línea como ensayo (A2-13). */
  --measure-body:66ch; --measure-lede:52ch;

  /* Rol editorial de H3 (D-35): nombre de profesional, denominación de área y
     pregunta de FAQ. Antes iba en Newsreader redonda; ahora en InterDisplay,
     porque la redonda de Newsreader ya no forma parte del sistema. */
  --size-h3-serif:22px;     --leading-h3-serif:28px;

  --lh-display:var(--leading-display);
  --lh-h1:var(--leading-h1);
  --lh-h2:var(--leading-h2);
  --lh-h3:var(--leading-h3-serif);
  --lh-entrada:var(--leading-entrada);
  --lh-body:var(--leading-body);
  --lh-body-sm:var(--leading-note);

  /* Compatibilidad */
  --size-display-xl:var(--size-display);
  --size-body-lg:var(--size-entrada);
  --size-body-sm:var(--size-note);
  --size-name:var(--size-h3);
  --leading-tight:1.06; --leading-snug:1.14; --leading-heading:1.2;
  --leading-compact:1.4;
  /* La pauta anterior llamaba --font-serif a los titulares. Sigue vivo, pero
     apunta al énfasis, que es el único sitio donde queda serif. */
  --font-serif:var(--font-emph);
}
@media (min-width:768px){
  :root{
    --size-display:64px;   --leading-display:68px;
    --size-h1:48px;        --leading-h1:54px;
    --size-h2:36px;        --leading-h2:42px;
    --size-h3:24px;        --leading-h3:30px;
    --size-entrada:20px;   --leading-entrada:30px;
    --size-body:18px;      --leading-body:28px;
    --size-h3-serif:26px;  --leading-h3-serif:32px;
  }
}

/* ── Titulares ──
   InterDisplay 400. El nivel semántico sigue la estructura, no el tamaño, y hay
   una sola H1 por página (A2-13). */
.t-display{font:var(--weight-regular) var(--size-display)/var(--leading-display) var(--font-display);letter-spacing:var(--tracking-display);text-wrap:balance}
.t-h1{font:var(--weight-regular) var(--size-h1)/var(--leading-h1) var(--font-display);letter-spacing:var(--tracking-display);text-wrap:balance}
.t-h2{font:var(--weight-regular) var(--size-h2)/var(--leading-h2) var(--font-display);letter-spacing:var(--tracking-heading);text-wrap:balance}

/* ── Énfasis dentro del titular ──
   Se marca con <em>, que es lo que significa: énfasis por sentido, no un cambio
   de estilo suelto. Así el titular conserva un solo encabezado semántico y su
   orden de lectura, aunque lleve dos familias.

   font-size en em y no en px: hereda del titular que lo contiene, así que el
   mismo marcado funciona en display, en H1 y en H2 sin recalcular nada. */
.t-display em,.t-h1 em,.t-h2 em,.t-emph,.ti em{
  font-family:var(--font-emph);
  font-style:italic;
  font-weight:400;
  font-size:calc(1em * var(--emph-scale));
  letter-spacing:var(--emph-tracking);
  /* La cursiva se inclina a la derecha y su último trazo se acerca a la palabra
     siguiente. Este pelo de aire lo compensa sin abrir un hueco visible. */
  padding-right:.02em;
}
/* Fragmentos de dos o tres palabras que no deben partirse entre líneas. El
   titular reflúe con naturalidad; lo que se protege es la unidad del énfasis,
   y solo cuando cabe: por eso es una clase que se pone a mano, no el defecto. */
.t-nobr{white-space:nowrap}
@media (max-width:520px){.t-nobr{white-space:normal}}

/* ── Resto de la jerarquía · Inter ── */
.t-h3{font:var(--weight-semibold) var(--size-h3)/var(--leading-h3) var(--font-body);text-wrap:balance}
.t-name{font:var(--weight-semibold) var(--size-h3)/var(--leading-h3) var(--font-body);text-wrap:balance}
.t-lede{font:var(--weight-regular) var(--size-entrada)/var(--leading-entrada) var(--font-body);max-width:var(--measure-lede)}
.t-body{font:var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-body);max-width:var(--measure-body)}
.t-body-sm{font:var(--weight-regular) var(--size-note)/var(--leading-note) var(--font-body)}
.t-label{font:var(--weight-semibold) var(--size-label)/var(--leading-label) var(--font-body)}
/* A2-13 fija etiqueta y botón en caja de frase, así que el sistema no tiene
   versalitas. .t-caps se conserva como alias de .t-label para no romper piezas
   escritas antes; no aplica ni mayúsculas ni tracking. */
.t-caps{font:var(--weight-semibold) var(--size-label)/var(--leading-label) var(--font-body)}
.t-note{font:var(--weight-regular) var(--size-note)/var(--leading-note) var(--font-body);color:var(--text-secondary)}


/* Contigo · espaciado y retícula · Adenda 2 §4 (A2-14) */
:root{
  /* Escala 4/8/12/16/24/32/48/64/96 px. */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  /* Composición */
  --page-margin:20px;          /* móvil */
  --content-max:1200px;
  --content-narrow:760px;
  --grid-cols:4; /* @kind other */  /* móvil */
  --grid-gap:16px;
  --section-gap:var(--space-7);       /* 48 en móvil */
  --card-padding:var(--space-5);
  --card-padding-lg:var(--space-6);

  /* Ensayo de comodidad de este encargo: 44 × 44 CSS px en acciones principales.
     El mínimo normativo de WCAG 2.2 SC 2.5.8 es 24 × 24 con sus excepciones;
     no confundir el ensayo con una certificación. */
  --target-min:24px;
  --target-comfort:44px;

  /* Compatibilidad con nombres anteriores */
  --space-10:var(--space-8); --space-11:var(--space-9);
  --space-12:var(--space-9); --space-13:var(--space-9);
  --page-margin-md:24px; --page-margin-lg:24px;
  --grid-gap-lg:24px; --section-gap-lg:var(--space-9);
}
@media (min-width:768px){
  :root{
    --page-margin:24px;        /* escritorio */
    --grid-cols:12; /* @kind other */
    --grid-gap:24px;
    --section-gap:var(--space-8);
  }
}
@media (min-width:1200px){
  :root{--section-gap:var(--space-9)}
}


/* Contigo · radios, bordes y elevación · Adenda 2 §4 (A2-14)
   Radio 8 px en controles y 16 px en tarjetas y paneles cuando agrupan.
   Borde de 1 px. Sin sombras decorativas repetidas: la sombra queda para lo
   que flota de verdad (menú móvil, desplegable, modal). */
:root{
  --radius-xs:4px; --radius-sm:8px; --radius-md:8px; --radius-lg:16px;
  --radius-xl:16px; --radius-pill:999px;
  --radius-card:16px;      /* tarjetas y paneles con función de agrupación */
  --radius-control:8px;    /* campos, selects, casillas */
  --radius-action:8px;     /* botones */
  --radius-media:16px;

  --border-width:1px;
  --border-width-strong:1px;

  --shadow-1:none;
  --shadow-2:0 4px 12px rgba(15,33,30,.10),0 1px 3px rgba(15,33,30,.06);
  --shadow-3:0 16px 40px rgba(15,33,30,.16);
  --shadow-none:none;
}


/* Contigo · movimiento. Cambios de estado, nunca decoración.
   dur-1 hover y foco · dur-2 pulsado y tinte · dur-3 despliegue y menú · dur-4 entrada de sección. */
:root{
  --dur-1:120ms; /* @kind other */
  --dur-2:180ms; /* @kind other */
  --dur-3:280ms; /* @kind other */
  --dur-4:420ms; /* @kind other */
  --ease-out:cubic-bezier(.2,.7,.3,1); /* @kind other */
  --ease-inout:cubic-bezier(.5,0,.3,1); /* @kind other */
  --transition-state:color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out);
}
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-1:0ms; /* @kind other */
    --dur-2:0ms; /* @kind other */
    --dur-3:0ms; /* @kind other */
    --dur-4:0ms; /* @kind other */
  }
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}


/* Contigo · reglas base mínimas. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-base);color:var(--text-primary);font:var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2{font-family:var(--font-display);font-weight:var(--weight-regular);letter-spacing:var(--tracking-display);margin:0;text-wrap:balance}
h3,h4{font-family:var(--font-body);font-weight:var(--weight-semibold);margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--text-link);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:var(--transition-state)}
a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
/* Foco visible: contorno de 2 px en enlace con separación blanca de 2 px (A2-12). */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-xs)}
.on-inverse a{color:var(--mar-100)}
.on-inverse a:hover{color:var(--white)}
.on-inverse :focus-visible{outline-color:var(--focus-ring-inverse)}
::selection{background:var(--oliva-200);color:var(--tinta)}
img,svg{display:block;max-width:100%}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Enlace de salto al contenido · biblioteca mínima §5 */
.ctg-skip{position:absolute;left:var(--space-4);top:-100px;z-index:100;display:inline-flex;align-items:center;min-height:var(--target-comfort);padding:0 var(--space-5);border-radius:var(--radius-action);background:var(--accion);color:var(--sobre-accion);font:var(--weight-semibold) var(--size-label)/1 var(--font-body);text-decoration:none;transition:top var(--dur-2) var(--ease-out)}
.ctg-skip:focus{top:var(--space-4);color:var(--sobre-accion)}