/* base.css — capa agnóstica del registro: retícula, cabecera, controles y pie.
   Nada de aquí sabe que el sitio es de cómics; si cambia la dirección visual,
   este fichero sobrevive y sólo se reescribe tinta.css.

   Regla de color: los tonos oscuros se fijan en selectores de ELEMENTO
   (body, h1, a…), no en clases sueltas. Así el contrato de parejas de
   check-a11y (R19) sólo tiene que vigilar tres clases, no quince. */

@font-face { font-family: 'Amiko'; src: url('../fonts/Amiko-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Amiko'; src: url('../fonts/Amiko-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Amiko'; src: url('../fonts/Amiko-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Anton'; src: url('../fonts/Anton-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'BD Cartoon Shout'; src: url('../fonts/BD_Cartoon_Shout.ttf') format('truetype'); font-weight: 400; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta-texto);
  font-family: var(--fuente-texto);
  font-size: var(--paso-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { color: var(--tinta); margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
/* El segundo selector alcanza los campos del widget Form de Elementor Pro (ver la nota del
   bloque «Formulario»). Va con esa forma exacta —tres clases— porque Elementor fija ahí la
   tipografía y el color globales de su kit con `.elementor-widget-form .elementor-field-group
   .elementor-field` (0,3,0): con menos, los campos del sitio publicado salían en Roboto gris
   y el boceto en Amiko. Empata en especificidad y manda por orden de carga (el CSS del tema
   se encola después del de Elementor). Medido 2026-09-08. */
button, input, textarea, select,
.elementor-widget-form .elementor-field-group .elementor-field { font: inherit; color: inherit; }

/* Foco visible y consistente en todo lo que se puede alcanzar con el teclado. */
:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

a { color: var(--magenta); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- Retícula ----------------------------------------------------------- */

.caja { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--medianil); }
.seccion { padding: clamp(48px, 7vw, 96px) 0; }
.seccion--banda { background: var(--papel-sucio); border-block: 1px solid var(--linea); }
.medida { max-width: var(--medida); }

/* Dos columnas asimétricas 7/5 que se apilan en tableta. */
.split {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
}
.rejilla {
  display: grid;
  gap: var(--medianil);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Cabecera ----------------------------------------------------------- */

.salta-al-contenido { position: absolute; left: -9999px; }
/* El subrayado va DECLARADO, y desde (0,2,0), no heredado del navegador: en WordPress
   `.elementor a { text-decoration: none }` (0,1,1) le gana a la etiqueta desnuda —y también a
   `.salta-al-contenido` a secas, que es (0,1,0)— y el enlace de salto se servía sin él. Misma
   familia que el logo a 160px y el botón sin sombra; mismo remedio que `:root .pila > *`.
   Medido con check-paridad 2026-09-08. */
:root .salta-al-contenido { text-decoration: underline; }
.salta-al-contenido:focus {
  left: var(--medianil); top: var(--medianil); z-index: 20;
  background: var(--tinta); color: var(--papel); padding: 12px 18px; border-radius: var(--r-1);
}

/* Fondo sólido a propósito: un backdrop-filter aquí obliga al navegador a
   desenfocar los SVG de marca (250 KB de trazos) en cada scroll, y el
   renderizador se atasca. Medido 2026-09-08. */
.cabecera {
  position: sticky; top: 0; z-index: var(--z-cabecera);
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.cabecera > .caja {
  min-height: var(--cabecera);
  display: flex; align-items: center; justify-content: space-between; gap: var(--medianil);
}
/* `.cabecera` delante no es adorno: Elementor trae `.elementor img { height: auto }` (0,1,1),
   que gana a una clase suelta (0,1,0) y pintaba el logo del sitio publicado a 160px en vez de
   34px —el grep de clases salía verde y la cabecera estaba rota—. Con el ancestro son (0,2,0)
   y gana sin depender del orden de carga. En el boceto el selector casa igual. Medido
   2026-09-08. */
.cabecera .marca-cabecera { height: 34px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
/* :not(.boton) NO es cosmético: `.nav a` (0,1,1) gana a `.boton` (0,1,0) y le
   robaba el padding y el tamaño de letra, dejando el botón de «Entrar» en
   48px con el texto desbordado. Medido 2026-09-08. */
.nav a:not(.boton) {
  color: var(--tinta-texto);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  flex-shrink: 0;
  transition: color var(--transicion), border-color var(--transicion);
}
.nav a:not(.boton):hover { color: var(--tinta); }
.nav .boton { flex-shrink: 0; }
/* El subrayado magenta no adorna: dice en qué página estás. */
.nav a[aria-current="page"]:not(.boton) { color: var(--magenta); border-bottom-color: var(--magenta); }
.nav .boton { margin-left: 6px; }

/* 760 y no 720: con el corte en 720 quedaba una banda de ~20px (721-742, medida con
   tools/check-anchos.mjs) en la que la cabecera YA estaba en fila y NO cabía —los enlaces
   llevan flex-shrink: 0 y el botón white-space: nowrap, así que nadie cede— y el botón
   «Entrar» se salía por la derecha: el documento desbordaba en las cinco páginas. El mínimo
   medido para que quepa es 743; 760 deja margen. Se dimensiona por el ESPAÑOL («Programa de
   pruebas», «Quiénes somos»), que es el idioma de etiquetas más largas: así cubre los dos. */
@media (max-width: 760px) {
  .cabecera > .caja { flex-direction: column; align-items: flex-start; gap: 10px; padding-block: 14px; }
  .nav { flex-wrap: wrap; gap: 12px 18px; }
}

/* ---- Controles ---------------------------------------------------------- */

/* `.elementor-widget-form .elementor-button[type="submit"]` es el botón de envío del widget Form
   de Elementor Pro, que no lleva la clase .boton (ver la nota del bloque «Formulario»): misma
   regla, no otra. El selector es EXACTAMENTE el que usa el kit de Elementor para pintar ese
   botón con su color de acento y su tipografía global (0,3,0): con menos, el botón de enviar
   del sitio publicado salía VERDE y en Roboto. `font-family: inherit` es inerte en el boceto
   —el botón ya hereda la fuente del documento— y está para anular esa tipografía global.
   Medido 2026-09-08. */
.boton, .elementor-widget-form .elementor-button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit;
  font-weight: 600; font-size: 0.98rem; line-height: 1;
  text-decoration: none; white-space: nowrap;
  padding: 14px 22px; border-radius: var(--r-1);
  background: var(--magenta); color: var(--papel);
  border: 1px solid var(--magenta);
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion), color var(--transicion);
}
/* La sombra del primario vive AQUÍ y en ningún otro sitio, y el selector lleva el `:not` por
   dos razones a la vez: dice quién la lleva (el primario sí, el fantasma no) y sube a (0,2,0),
   que es lo que hace falta para ganarle a `.elementor a { box-shadow: none }` (0,1,1) de
   Elementor —con `.boton` a secas el botón del sitio publicado salía plano y el grep de clases
   seguía en verde—. Va ANTES del :hover, que es (0,2,0) también y manda por orden.
   Medido 2026-09-08. */
.boton:not(.boton--fantasma), .elementor-widget-form .elementor-button[type="submit"] { box-shadow: var(--sombra-cta); }
/* Hover del primario (decisión del operador 2026-09-08): se INVIERTE. El fondo pasa a blanco,
   el texto toma el morado del propio botón y el borde conserva el morado original —no se toca
   `border-color` aquí a propósito: ya lo pone `.boton`—. #801F62 sobre #FFFFFF da 9.17:1, así
   que al invertirse el texto GANA contraste (antes era papel sobre magenta, el mismo par).
   El `:not(.boton--fantasma)` NO es cosmético, por la misma razón que la línea de arriba y una
   más: `.boton--fantasma:hover` no declara `color`, así que sin el `:not` el fantasma se
   llevaría el morado en hover sin haberlo pedido nadie. */
.boton:not(.boton--fantasma):hover, .elementor-widget-form .elementor-button[type="submit"]:hover {
  background: var(--papel); color: var(--magenta);
  box-shadow: 0 10px 26px -8px rgba(128, 31, 98, 0.55);
}
.boton:active, .elementor-widget-form .elementor-button[type="submit"]:active { transform: translateY(1px); }

.boton--fantasma {
  background: transparent; color: var(--tinta);
  border-color: var(--linea-fuerte); box-shadow: none;
}
.boton--fantasma:hover { background: transparent; border-color: var(--tinta); box-shadow: var(--sombra-0); }

.boton--sm { padding: 9px 16px; font-size: 0.9rem; }

.acciones, .elementor-form .e-form__buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Formulario --------------------------------------------------------- */

/* Por qué hay nombres de clase de Elementor en el CSS del boceto:
   el formulario de «programa» en producción lo pinta el widget Form de Elementor Pro —hace
   falta para que el envío llegue por correo de verdad— y su marcado es
   .elementor-field-group / .elementor-field-label / .elementor-field-textual, no el .campo
   del boceto, así que las reglas de abajo no lo alcanzarían. Se AMPLÍAN las mismas reglas en
   vez de escribir otras nuevas: dos reglas para el mismo aspecto son dos fuentes de verdad, y
   la que se olvida al retocar es siempre la que ve el cliente. El boceto sigue siendo la
   fuente: aquí no se declara nada que .campo no declarase ya. */

.campo, .elementor-form .elementor-field-group:not(.e-form__buttons) { display: grid; gap: 7px; }
/* Misma forma que la regla del kit de Elementor (`.elementor-widget-form .elementor-field-group
   > label`, (0,2,1)) para empatarle y ganar por orden de carga: con `.elementor-form
   .elementor-field-label` (0,2,0) las etiquetas salían grises y en Roboto. */
.campo > label,
.elementor-widget-form .elementor-field-group > label { font-family: inherit; line-height: inherit; font-size: 0.9rem; font-weight: 600; color: var(--tinta); }
.campo input, .campo textarea, .elementor-form .elementor-field-textual {
  width: 100%;
  padding: 12px 14px;
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-1);
  box-shadow: var(--sombra-0);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input:hover, .campo textarea:hover,
.elementor-form .elementor-field-textual:hover { border-color: var(--tinta-suave); }
.campo input:focus, .campo textarea:focus,
.elementor-form .elementor-field-textual:focus {
  outline: none; border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(128, 31, 98, 0.14);
}
.campo textarea, .elementor-form textarea.elementor-field-textual { min-height: 130px; resize: vertical; }
/* El segundo selector es el envoltorio de campos que pinta el widget de Elementor: `.formulario`
   es allí el CONTENEDOR del widget y tiene un solo hijo, así que su `gap` no separaba nada y el
   ritmo vertical lo ponía el canalón de Elementor (10px) en vez de estos 18. */
.formulario, .elementor-form .elementor-form-fields-wrapper { display: grid; gap: 18px; max-width: 560px; }
.nota { font-size: 0.9rem; color: var(--tinta-suave); }

/* ---- Pie ---------------------------------------------------------------- */

.pie { border-top: 1px solid var(--linea); padding: 40px 0; }
.pie > .caja { display: flex; flex-wrap: wrap; gap: 10px var(--medianil); align-items: baseline; justify-content: space-between; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 18px; }
.pie a { color: var(--tinta-texto); text-decoration: none; font-size: 0.92rem; }
.pie a:hover { color: var(--magenta); text-decoration: underline; }