/* Tipografías alojadas en el propio servidor: sin peticiones a Google
   (mejor privacidad para las escuelas), una conexión menos y disponibles
   sin internet gracias al service worker. */

@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/nunito-sans-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/nunito-sans-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/nunito-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/nunito-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/nunito-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/nunito-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/nunito-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/nunito-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/quicksand-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/quicksand-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/quicksand-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/quicksand-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   davidalmonte — hoja de estilos del sitio
   Estética basada en la identidad visual original del sitio:
   azul eléctrico + azul marino, Quicksand para títulos, Nunito Sans para
   texto, tarjetas con sombra suave y formas flotantes animadas.
   ========================================================================== */

:root {
  --primary: #2667ff;
  --primary-dark: #1a4fd6;
  --primary-7: rgba(38, 103, 255, 0.07);
  --primary-10: rgba(38, 103, 255, 0.1);
  --secondary: #0b1460;
  --tertiary: #6ef1b2;
  --body-color: #5c6185;
  --off-white: #f6f9fb;
  --white: #ffffff;
  --line: #e8ecf4;

  /* Escala cerrada de radios. Antes convivían 7, 8, 10, 16, 18, 20 y 22 px
     sin criterio: cuatro controles del mismo tamaño tenían cuatro esquinas
     distintas. Regla: el radio interior nunca mayor que el exterior. */
  --radius-sm: 8px;      /* botones, campos, pastillas */
  --radius: 12px;        /* tarjetas y paneles */
  --radius-lg: 16px;     /* bandas, hojas, placas */
  --radius-pill: 999px;
  --shadow-sm: 0 4px 14px rgba(11, 20, 96, 0.06);
  --shadow-md: 0 14px 40px rgba(11, 20, 96, 0.12);

  --font-display: "Quicksand", "Trebuchet MS", sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", sans-serif;

  --container: 1140px;
  /* Solo para la cabecera. Las ocho entradas del menú miden 887 px (medido
     sobre las woff2 del proyecto); con el logotipo y el botón no caben en los
     1100 útiles de un contenedor de 1140. */
  --container-header: 1320px;

  --btn-hover-bg: var(--secondary);
  /* El texto del botón sólido no puede ser siempre blanco: en modo oscuro el
     fondo pasa a ser un azul claro y quedaba a 2,83:1. */
  --btn-solid-fg: #fff;
  /* El enlace activo del menú va sobre su propio azul al 10 %: con --primary
     se quedaba en 4,16:1, por debajo de AA. */
  --nav-activo-fg: var(--primary-dark);
  --focus-ring: var(--primary);
  /* Calibrado para NO mover nada en escritorio: 7vw sobre 1140 px son 79,8 px,
     que es el 5rem de hoy. A 390 px baja a 44 sin un solo media query. Antes
     estaba clavado en 5rem también en móvil: dos secciones seguidas dejaban
     160 px de blanco, casi media pantalla. */
  --section-y:       clamp(2.75rem, 7vw, 5rem);
  --section-y-tight: clamp(1.75rem, 4.5vw, 3rem);

  /* Un solo line-height 1.2 servía para un titular de 65 px y para un h3 de
     tarjeta de 18: a 65 los renglones flotan, y a 18 las tildes del español
     casi tocan la línea de arriba. */
  --lh-display: 1.08;
  --lh-titulo:  1.2;
  --lh-sub:     1.35;
  --lh-lead:    1.5;

  /* Medida de línea. En em, no en ch: el ch de Nunito Sans engaña. 32em dan
     unos 70 caracteres reales, y se estrechan solos con la fuente legible y
     con el escalado de raíz. */
  --medida: 32em;

  /* Estas dos se usaban en siete sitios SIN estar definidas: el respaldo
     claro de var(--surface, #fff) ganaba siempre, también en modo oscuro. */
  --surface: var(--white);
  --text-muted: #5a6376;
  --pictoetlas-fondo: linear-gradient(135deg, #f2f6ff 0%, #eefaf3 100%);
  --pictoetlas-tarjeta: #fff;
}

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

html {
  scroll-behavior: smooth;
  /* La cabecera es fija: sin esto, los anclajes del pie (#gamificacion,
     #ia) dejan el destino debajo de la barra. */
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--body-color);
  background: var(--white);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* El atributo hidden debe ganar siempre a cualquier display propio
   (sin esto, el filtro de recursos no oculta las tarjetas) */
[hidden] {
  display: none !important;
}

h1, h2, h3, h4, h5 {
  line-height: var(--lh-sub);  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 0.5em;
  color: var(--secondary);
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--primary-dark);
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* <main> lleva tabindex="-1" para que «Saltar al contenido» mueva el foco de
   verdad, pero no es un control: un anillo de 3 px alrededor de la página
   entera sería ruido. Quien acaba de usar el enlace ya sabe dónde está —la
   página se desplazó y el lector de pantalla anuncia la región—. */
main:focus,
main:focus-visible {
  outline: none;
}

::selection {
  background: var(--primary-10);
}

/* ---------- Utilidades ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.section {
  padding-block: var(--section-y);  padding-block: 5rem;
}

.section--tight {
  padding-block: var(--section-y-tight);  padding-block: 3rem;
}

.section--alt {
  background: var(--off-white);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--secondary);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

/* Encabezados de sección: tagline azul + título navy (estilo original) */
.kicker {
  /* Medía 18 px: MÁS que el cuerpo del sitio (17). Un antetítulo que pesa más
     que el texto al que introduce invierte la jerarquía. Se mantiene en caja
     baja a propósito: la versalita con tracking amplio es el tic que delata
     una plantilla genérica. */
  font-size: 0.875rem;
  font-weight: 700;  display: inline-block;
  font-family: var(--font-display);
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  max-width: 24ch;
}

.section-head {
  margin-bottom: 2.5rem;
}

.section-head--center {
  text-align: center;
}

.section-head--center .section-title {
  margin-inline: auto;
}

.section-head .lead {
  max-width: 60ch;
  font-size: 1.0625rem;
}

.section-head--center .lead {
  margin-inline: auto;
}

/* ---------- Botones (estilo template-btn) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1;
  padding: 1rem 1.9rem;
  border-radius: 7px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  flex: none;
}

.btn--solid {
  background: var(--primary);
  color: var(--btn-solid-fg);
  box-shadow: 0 10px 24px rgba(38, 103, 255, 0.3);
}

.btn--solid:hover {
  /* No puede apuntar a --secondary: en modo oscuro vale #eef1ff y el hover
     quedaba a 1,13:1 sobre texto blanco, o sea invisible. */
  background: var(--btn-hover-bg);
  color: #fff;
  box-shadow: 0 10px 24px rgba(11, 20, 96, 0.25);
}

.btn--ghost {
  background: transparent;
  color: var(--secondary);
  border-color: var(--secondary);
}

.btn--ghost:hover {
  background: var(--btn-hover-bg);
  color: #fff;
}

.btn--light {
  background: #fff;
  color: var(--primary);
}

.btn--light:hover {
  background: var(--tertiary);
  color: var(--secondary);
}

/* ==========================================================================
   Cabecera
   --------------------------------------------------------------------------
   El menú lleva ocho entradas: «Servicios educativos» y «Servicios digitales»
   van separados y siempre visibles, sin desplegables.

   Presupuesto MEDIDO (fontTools sobre las woff2 del proyecto, no a ojo):
     escala cómoda   15 px / padding 0.66em / gap 2px  =  887,2 px
     escala compacta 14,4 px / padding 0.44em / gap 0  =  788,3 px
     logotipo «David Almonte» Quicksand 700: 104,5 px a 16, 120,2 a 18,4
     «Explorar recursos» con padding y borde:  160,3 px

   Holguras resultantes (peor caso de cada banda):
     1024–1179  normal  941 de 984 → 43 px  ·  legible 941 → 43 px
     1180–1319  legible 1066 de 1140 → 74 px  ·  enorme+legible → 52 px
     >= 1320 con botón   1229 de 1280 → 51 px
   La cabecera pasa de 131 px reales a 72 px (68 en móvil).
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: box-shadow 0.2s ease;
}

/* La línea de 1 px va dentro del box-shadow: define el borde inferior sin
   ocupar espacio, así al empezar a hacer scroll la cabecera no salta 1 px. */
.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
}

/* Escrito con el descendiente `.site-header` a propósito: `.container` (línea
   218) también fija max-width y tiene la misma especificidad (0,1,0); hoy
   ganaría solo por orden de aparición, lo que se rompe con cualquier
   reordenación del archivo. Con este selector gana siempre. */
.site-header .site-header__inner {
  max-width: var(--container-header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}

/* ---------- Logotipo ---------- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  color: var(--secondary);
}

.wordmark:hover {
  color: var(--secondary);
}

/* El :focus-visible global (línea 197) impone border-radius:4px sobre lo
   enfocado; aquí el anillo debe seguir la forma real del elemento. */
.wordmark:focus-visible {
  border-radius: 8px;
  outline-offset: 4px;
}

.wordmark__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

/* La bajada «educación · inclusión · tecnología» ya no está en la cabecera:
   son 183 px medidos, más que el propio nombre (121 px), y era lo que
   empujaba el logotipo a tres líneas. Vive en el pie, donde tiene una columna
   entera. Esta regla la viste allí. */
.wordmark__text span {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--body-color);
}

.footer-brand .wordmark__text span {
  color: #8f96c4;
}

/* ---------- Menú de escritorio ---------- */
.site-nav {
  display: none;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* font-size en PX a propósito, y padding en em (relativo a ese px).
   El menú de escritorio es la única fila del sitio con presupuesto de ancho
   cerrado: 887 px medidos de 1140 útiles. Si creciera con data-texto —y más
   aún si se escala la raíz— se sale. La ampliación de texto para navegar se
   entrega donde sí cabe: en el panel móvil, que es de una sola columna, y en
   el logotipo, que a partir de 1180 px sigue en rem.
   white-space:nowrap es la corrección literal del defecto: ninguna entrada
   («Comunicación (CAA)», los dos «Servicios») puede partirse ya en dos líneas.
   min-height:44px mantiene el objetivo táctil con texto de 15 px. */
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.66em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--secondary);
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}

.site-nav a:hover {
  color: var(--primary);
  background: var(--primary-7);
}

/* Activo: pastilla teñida + barra inferior. La barra es box-shadow interior,
   no un peso tipográfico distinto: Quicksand 700 es más ancho que 600 y con
   el peso cambiado el menú entero se recolocaría al navegar de página en
   página. Así la entrada activa mide exactamente lo mismo que las demás. */
.site-nav a[aria-current="page"] {
  color: var(--nav-activo-fg);
  background: var(--primary-10);
  box-shadow: inset 0 -2px 0 currentColor;
}

.site-nav a:focus-visible,
.mobile-nav a:focus-visible {
  border-radius: 8px;
}

.header-cta:focus-visible {
  border-radius: 7px;
}

/* ---------- Botón de la cabecera ---------- */
.header-cta {
  display: none;
  position: relative;
  flex: none;
  margin-left: 0.5rem;
  padding: 0.7rem 1.15rem;
  font-size: 0.9375rem;
}

/* Filete que separa el menú del botón: convierte «ocho enlaces y un botón» en
   dos bloques legibles. margin-top negativo en vez de transform, para no
   depender de nada animable. */
.header-cta::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 50%;
  margin-top: -12px;
  width: 1px;
  height: 24px;
  background: var(--line);
}

/* ---------- Botón hamburguesa ---------- */
.menu-toggle {
  display: inline-flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 11px;
  background: none;
  border: 2px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--secondary);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Menú móvil ---------- */
/* background pasa de #fff fijo (línea 480) a var(--white): hoy el panel sale
   blanco con texto #eef1ff en modo oscuro, 1,13:1. El menú móvil entero es
   ilegible en oscuro, en todas las páginas. */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--white);
  padding: 0.75rem 1.25rem 1.25rem;
}

.mobile-nav.is-open {
  display: block;
  /* La cabecera es sticky: con ocho entradas a data-texto="enorme" las
     últimas quedan fuera de alcance en pantallas cortas (móvil apaisado,
     portátiles de 768 px). Que ruede el panel, no la página. Las dos
     declaraciones en este orden: la segunda pisa a la primera solo donde
     dvh existe (Safari >= 15.4, Chrome >= 108). */
  max-height: calc(100vh - 68px);
  max-height: calc(100dvh - 68px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav__label {
  margin: 1.1rem 0 0.15rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--body-color);
}

/* La mayúscula sostenida perjudica justo a quien pide lectura fácil */
html[data-fuente="legible"] .mobile-nav__label {
  text-transform: none;
  letter-spacing: 0.02em;
}

.mobile-nav ul a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.7rem 0.5rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--secondary);
  border-bottom: 1px solid var(--line);
}

.mobile-nav ul a[aria-current="page"] {
  color: var(--primary);
}

.mobile-nav ul:last-of-type li:last-child a {
  border-bottom: 0;
}

/* Fuera de los <ul> a propósito: así conserva intacto el estilo .btn y las
   reglas `.mobile-nav ul a` no le pisan color ni borde. */
.mobile-nav__cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1.1rem;
}

/* ==========================================================================
   Cabecera · umbrales
     < 1024      hamburguesa. Medido: a 900 px hay 860 útiles y las ocho
                 entradas en su forma MÁS apretada posible (14,4 px, padding
                 0.44em, gap 0) piden 788,3 + logotipo 104,5 + hueco 12 =
                 904,9. Faltan 44,9 px, y 80,9 con lectura fácil. Ver la nota
                 sobre esta banda al final del bloque.
     1024–1179   menú compacto en una fila, sin botón (iPad apaisado, 13").
                 941 de 984 → 43 px de holgura en el peor caso.
     >= 1180     menú cómodo. 1066 de 1140 con lectura fácil.
     >= 1320     aparece «Explorar recursos». 1229 de 1280.
   ========================================================================== */
@media (min-width: 1024px) {
  .site-header__inner {
    min-height: 72px;
    gap: 12px;
  }

  /* margin auto: el logotipo se queda a la izquierda y el bloque menú+botón
     se va a la derecha como una sola pieza, en vez de repartirse el hueco. */
  .site-nav {
    display: block;
    margin-inline-start: auto;
  }

  .site-nav ul {
    gap: 0;
  }

  .site-nav a {
    font-size: 14.4px;
    padding: 0 0.44em;
  }

  .menu-toggle {
    display: none;
  }

  .mobile-nav,
  .mobile-nav.is-open {
    display: none;
  }
}

@media (min-width: 1180px) {
  .site-header__inner {
    gap: 20px;
  }

  .wordmark__text {
    font-size: 1.15rem;
  }

  .site-nav ul {
    gap: 2px;
  }

  .site-nav a {
    font-size: 15px;
    padding: 0 0.66em;
  }
}

@media (min-width: 1320px) {
  .site-header__inner {
    gap: 24px;
  }

  .wordmark__text {
    font-size: 1.2rem;
  }

  .header-cta {
    display: inline-flex;
  }
}

/* ==========================================================================
   Cabecera · panel de accesibilidad
   ========================================================================== */

/* Lectura fácil: el menú es interfaz, no texto de lectura. Igual que ya se
   hace con h1–h4, .btn y .filter-pill (línea 1675), usa 0.02em en lugar del
   0.045em + word-spacing 0.14em que hereda del body; con el espaciado
   heredado el menú engorda de 887,2 a 961,0 px medidos y se vuelve a partir
   a 1180. */
html[data-fuente="legible"] .site-nav a,
html[data-fuente="legible"] .wordmark__text,
html[data-fuente="legible"] .header-cta {
  letter-spacing: 0.02em;
  word-spacing: normal;
}

/* El logotipo y el menú MÓVIL sí crecen con el panel: son de una sola
   columna y no tienen presupuesto de ancho cerrado. El menú de escritorio no
   crece nunca (ver la nota sobre px en .site-nav a). */
html[data-texto="grande"] .wordmark__text { font-size: 1.2rem; }
html[data-texto="enorme"] .wordmark__text { font-size: 1.35rem; }
html[data-texto="grande"] .mobile-nav ul a { font-size: 1.15rem; }
html[data-texto="enorme"] .mobile-nav ul a { font-size: 1.3rem; }

/* En la banda estrecha el logotipo se queda a 16 px para TODOS los tamaños de
   texto —no hay 40 px que gastar; este era el fallo de cálculo de P1, que
   solo cubría grande/enorme y dejaba el peor caso en 16 px de holgura en vez
   de 43—. Y con texto «enorme» se vuelve a la hamburguesa: ocho entradas no
   entran en 984 px, y quien pide texto enorme no debería recibir a cambio la
   navegación más pequeña del sitio.
   Sin !important: las reglas de atributo ya ganan por especificidad. */
@media (min-width: 1024px) and (max-width: 1179px) {
  .wordmark__text,
  html[data-texto="grande"] .wordmark__text,
  html[data-texto="enorme"] .wordmark__text { font-size: 16px; }

  html[data-texto="enorme"] .site-nav { display: none; }
  html[data-texto="enorme"] .menu-toggle { display: inline-flex; }
  html[data-texto="enorme"] .mobile-nav.is-open { display: block; }
}

/* El botón es lo prescindible: si el visitante pide texto mayor o lectura
   fácil, cede su sitio. No se pierde ningún destino: «Recursos» ya está en el
   menú, y en móvil está .mobile-nav__cta. */
html[data-texto="grande"] .header-cta,
html[data-texto="enorme"] .header-cta,
html[data-fuente="legible"] .header-cta {
  display: none;
}

/* Alto contraste. Verificado en el archivo: el bloque de la línea 1770 solo
   redefine --body-color, --line, --primary, --primary-dark y --secondary. NO
   toca --primary-10, así que la pastilla del activo sigue siendo
   rgba(38,103,255,0.1) —casi invisible— mientras el texto pasa a #0033cc.
   Y como la regla de la línea 1799 subraya TODOS los enlaces, el box-shadow
   inferior del activo produciría dos líneas horizontales casi pegadas: se
   quita y la señal la lleva el outline. */
html[data-contraste="alto"] .site-nav a {
  text-underline-offset: 4px;
}

html[data-contraste="alto"] .site-nav a[aria-current="page"] {
  box-shadow: none;
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

html[data-contraste="alto"] .header-cta::before {
  background: #16193a;
  width: 2px;
}


/* ---------- Hero (centrado, con formas flotantes como el original) ---------- */
.hero {
  position: relative;
  padding-block: 4.5rem 2rem;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(560px 380px at 12% 8%, rgba(38, 103, 255, 0.08), transparent 70%),
    radial-gradient(520px 420px at 88% 16%, rgba(110, 241, 178, 0.14), transparent 70%),
    radial-gradient(640px 420px at 50% 100%, rgba(38, 103, 255, 0.05), transparent 75%),
    linear-gradient(180deg, var(--off-white) 0%, #ffffff 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin-inline: auto;
}

.hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.1rem);
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.hero h1 em {
  font-style: normal;
  color: var(--primary);
}

.hero .lead {
  font-size: 1.2rem;
  max-width: 56ch;
  margin: 0 auto 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 3rem;
  justify-content: center;
  padding-top: 0.5rem;
}

.fact strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--secondary);
  line-height: 1.2;
}

.fact span {
  font-size: 0.9375rem;
}

.hero__illustration {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 2.5rem auto 0;
}

/* Formas flotantes */
.hero-shapes img {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.shape-1 { top: 12%; left: 5%; animation: rotate-me 14s linear infinite; }
.shape-2 { top: 45%; left: 3%; animation: float-x 7s ease-in-out infinite; }
.shape-3 { top: 18%; right: 6%; animation: float-x 8s ease-in-out infinite; }
.shape-4 { bottom: 22%; right: 4%; animation: float-y 6s ease-in-out infinite; }
.shape-5 { bottom: 8%; left: 12%; animation: rotate-me 18s linear infinite; }
.shape-6 { top: 60%; right: 12%; animation: zoom-fade 9s ease-in-out infinite; }
.shape-7 { top: 6%; left: 20%; animation: float-y 5s ease-in-out infinite; }

@media (max-width: 767px) {
  .hero-shapes img {
    max-width: 46px;
  }

  .shape-2, .shape-5, .shape-6 {
    display: none;
  }
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

@keyframes float-x {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(20px); }
}

@keyframes rotate-me {
  to { transform: rotate(360deg); }
}

@keyframes zoom-fade {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.85); opacity: 0.6; }
}

/* ---------- Tarjetas de categoría (estilo iconic-box) ---------- */
.category-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.panel-card {
  display: block;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
  color: var(--body-color);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.panel-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  color: var(--body-color);
}

.panel-card__icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}

.panel-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
  transition: color 0.2s ease;
}

.panel-card:hover h3 {
  color: var(--primary);
}

.panel-card p {
  font-size: 0.9375rem;
  margin: 0;
}

/* ---------- Chips de categoría ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
}

.chip--comunicacion { background: #e2f8ec; color: #0a7050; }
.chip--gamificacion { background: #ffe9e0; color: #a83c14; }
.chip--video        { background: #efeaff; color: #6443d8; }
.chip--participacion { background: #e4edff; color: #2057d9; }
.chip--materiales   { background: #fff3d6; color: #7d5400; }
.chip--accesibilidad { background: #d9f2f7; color: #0d6577; }
.chip--ia           { background: #e6e7ff; color: #4443c9; }

.tile--comunicacion { background: #0a7e52; }
.tile--gamificacion { background: #cb4a1e; }
.tile--video        { background: #6443d8; }
.tile--participacion { background: #2057d9; }
.tile--materiales   { background: #a06c00; }
.tile--accesibilidad { background: #0d6577; }
.tile--ia           { background: #4443c9; }

/* Etiquetas pequeñas (gratis, en español…) */
.tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--body-color);
  background: var(--off-white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}

/* ---------- Tarjetas de recurso ---------- */
.cards-grid {
  display: grid;
  gap: 1.35rem;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.resource-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.resource-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

/* Banda superior con el logo grande, teñida según la categoría */
.resource-card__media {
  position: relative;
  display: grid;
  place-items: center;
  height: 178px;
}

.media--comunicacion { background: #e2f8ec; }
.media--gamificacion { background: #ffe9e0; }
.media--video        { background: #efeaff; }
.media--participacion { background: #e4edff; }
.media--materiales   { background: #fff3d6; }
.media--accesibilidad { background: #d9f2f7; }
.media--ia           { background: #e6e7ff; }

/* La placa era un cuadrado de 88 px con 10 px de relleno, así que un logo
   de 240x160 acababa dibujado a 68x45: ilegible. Ahora toma la proporción
   nativa de los logos (3:2) y ocupa casi todo el ancho de la tarjeta, que es
   como se veían en la plantilla original. */
.resource-card__plate {
  width: min(74%, 208px);
  aspect-ratio: 3 / 2;
  height: auto;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(11, 20, 96, 0.12);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform 0.3s ease;
}


.resource-card__plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}

/* Cuarenta y dos de los sesenta y cuatro recursos no tienen logo y muestran
   su inicial. Conservan la misma placa para que la cuadrícula no se vea
   desigual, con la letra a la escala nueva. */
.resource-card__plate--initial {
  color: #fff;
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
}

/* La placa con inicial debe conservar el color de su categoría
   (la regla background:#fff de la placa quedaría por encima si no) */
.resource-card__plate--initial.tile--comunicacion { background: #0a7e52; }
.resource-card__plate--initial.tile--gamificacion { background: #cb4a1e; }
.resource-card__plate--initial.tile--video        { background: #6443d8; }
.resource-card__plate--initial.tile--participacion { background: #2057d9; }
.resource-card__plate--initial.tile--materiales   { background: #a06c00; }
.resource-card__plate--initial.tile--accesibilidad { background: #0d6577; }
.resource-card__plate--initial.tile--ia           { background: #4443c9; }

.resource-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.35rem 1.5rem 1.5rem;
}

.resource-card h3 {
  font-size: 1.2rem;
  margin: 0 0 0.4rem;
}

.resource-card h3 a {
  color: var(--secondary);
  transition: color 0.2s ease;
}

.resource-card:hover h3 a {
  color: var(--primary);
}

/* toda la tarjeta clicable */
.resource-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.resource-card h3 a:focus-visible::after {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.resource-card p {
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 1.1rem;
}

.resource-card__meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.resource-card__external {
  /* Era un <a> en línea alrededor de un SVG de 20 px, con color a 2,19:1. */
  top: 0.6rem;
  right: 0.6rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--secondary);
  box-shadow: 0 2px 8px rgba(11, 20, 96, 0.14);  position: absolute;
  /* z-index para quedar por encima del overlay que hace clicable la tarjeta */
  z-index: 2;
  pointer-events: auto;
  transition: color 0.2s ease, transform 0.2s ease;
}


/* Animación al filtrar/buscar */
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.card-anim {
  animation: card-in 0.4s ease both;
}

/* ---------- Filtros y buscador (estilo portfolio-filter) ---------- */
.toolbar {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-bottom: 2.25rem;
}

.search-field {
  position: relative;
  max-width: 430px;
}

.search-field svg {
  position: absolute;
  left: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--body-color);
  pointer-events: none;
}

.search-field input {
  width: 100%;
  font: inherit;
  color: var(--secondary);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 7px;
  padding: 0.85rem 1.15rem 0.85rem 2.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-field input:hover {
  border-color: #c6cee0;
}

.search-field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-10);
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-pill {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--secondary);
  background: transparent;
  border: 2px solid transparent;
  border-radius: 7px;
  padding: 0.55rem 1.05rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.filter-pill:hover {
  color: var(--primary);
  background: var(--primary-7);
}

.filter-pill[aria-pressed="true"] {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(38, 103, 255, 0.3);
}

.filter-pill small {
  font-family: var(--font-body);
  font-weight: 600;
  opacity: 0.7;
  margin-left: 0.3rem;
}

.results-note {
  font-size: 0.9375rem;
  margin: 0;
}

.empty-state {
  text-align: center;
  padding: 3.5rem 1rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
}

.empty-state strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--secondary);
  margin-bottom: 0.3rem;
}

/* ---------- Banda destacada CAA (azul con blob, como las CTA originales) ---------- */
.band {
  /* Arrancaba en --primary #2667ff, el extremo más claro, justo donde cae el
     texto: entre 3,3 y 4,1:1. Con --primary-dark, que ya es color de marca,
     todos sus textos pasan de AA sin cambiar la identidad. */
  background: linear-gradient(120deg, var(--primary-dark) 0%, #14309c 100%);
  color: #eef3ff;  position: relative;
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(38, 103, 255, 0.3);
}

.band::before {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}

.band::after {
  content: "";
  position: absolute;
  left: 30%;
  bottom: -140px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(110, 241, 178, 0.12);
}

.band h2 {
  color: #fff;
  font-size: clamp(1.65rem, 3.1vw, 2.3rem);
  max-width: 24ch;
}

.band p {
  color: #d7e2ff;
  max-width: 58ch;
}

.band .kicker {
  color: var(--tertiary);
}

.band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .band {
    padding: 3.5rem 3.25rem;
  }

  .band__inner {
    grid-template-columns: 1.2fr auto;
    align-items: center;
  }
}

/* ---------- Pasos (guía CAA) ---------- */
.steps {
  display: grid;
  gap: 1.25rem;
  counter-reset: paso;
}

@media (min-width: 780px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step {
  counter-increment: paso;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.step:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.step::before {
  content: counter(paso, decimal-leading-zero);
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primary-10);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.9rem;
}

.step h3 {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}

.step p {
  font-size: 0.9375rem;
  margin: 0;
}

.step a {
  font-weight: 700;
}

/* ---------- Sección "quién soy" ---------- */
.about {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 860px) {
  .about {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.about__photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem;
}

.about__photos img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}

.about__photos img:nth-child(2) {
  transform: translateY(1.5rem);
  animation: float-y 7s ease-in-out infinite;
}

.about blockquote {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--secondary);
  border-left: 4px solid var(--primary);
  margin: 1.5rem 0 0;
  padding-left: 1.25rem;
}

/* ---------- Servicios ---------- */
.service-list {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 720px) {
  .service-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .service-list--three {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-item {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.85rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.service-item__icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--primary-10);
  color: var(--primary);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
}

.service-item h3 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}

.service-item p {
  font-size: 0.9375rem;
  margin: 0;
}

/* ---------- Página: cabecera con fondo suave (estilo page-title-area) ---------- */
/* padding-block, no el atajo padding: si no, borra el padding-inline
   de .container cuando ambas clases van en el mismo elemento (móvil) */
.page-head {
  /* El margin-bottom caía FUERA del fondo tintado, así que solo añadía
     blanco muerto: entre él y el relleno de la sección siguiente había 120 px
     de hueco bajo la cabecera en las 13 páginas interiores. */
  padding-block: var(--section-y) var(--section-y-tight);  background: var(--primary-7);
}

.page-head h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  letter-spacing: -1px;
  max-width: 22ch;
}

.page-head .lead {
  font-size: 1.1rem;
  max-width: 62ch;
  margin-bottom: 0;
}

/* ---------- Contacto ---------- */
.contact-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 780px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 2.25rem 1.85rem;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.contact-card h3 {
  font-size: 1.2rem;
}

.contact-card p {
  font-size: 0.9375rem;
}

/* ---------- CTA final ---------- */
.closing-cta {
  padding-block: var(--section-y);  text-align: center;
}

.closing-cta h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  max-width: 26ch;
  margin-inline: auto;
}

.closing-cta p {
  max-width: 54ch;
  margin: 0 auto 1.9rem;
}

/* ---------- Footer (navy, como el original) ---------- */
.site-footer {
  background: var(--secondary);
  color: #b8bee2;
  padding-block: 4rem 2rem;
}

.site-footer a {
  color: #b8bee2;
}

.site-footer a:hover {
  color: #fff;
}

.footer-grid {
  display: grid;
  gap: 2.25rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 780px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.footer-brand .wordmark__text {
  color: #fff;
}

.footer-brand p {
  font-size: 0.9375rem;
  color: #8f96c4;
  max-width: 40ch;
  margin-top: 1rem;
}

.footer-col h3 {
  font-family: var(--font-display);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.9375rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.5rem;
  font-size: 0.875rem;
  color: #8f96c4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* ---------- Animación de aparición ----------
   Solo se oculta si hay JavaScript para volver a mostrarlo */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Debe superar en especificidad a html.js .reveal */
html.js .reveal.is-visible,
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }

  html.js .reveal,
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Extras interactivos
   ========================================================================== */

/* ---------- Barra de progreso de lectura ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 300;
  background: linear-gradient(90deg, var(--primary), var(--tertiary));
  pointer-events: none;
}

/* ---------- Palabra rotativa del hero ---------- */
.word-rotate {
  display: inline-block;
  position: relative;
  text-align: left;
  white-space: nowrap;
}

.word-rotate__word {
  display: inline-block;
  color: var(--primary);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.word-rotate__word.is-out {
  opacity: 0;
  transform: translateY(0.55em);
}

.word-rotate::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.1em;
  bottom: 0.02em;
  height: 0.16em;
  border-radius: 999px;
  background: var(--tertiary);
  opacity: 0.55;
  z-index: -1;
}

/* ---------- Tablero de comunicación parlante ---------- */
.tablero-panel {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2.25rem 1.75rem;
  position: relative;
  overflow: hidden;
}

.tablero-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #f5a3c7, #ffd66e, #7fd67a, #f5a361, #2667ff);
}

.tablero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-block: 1.5rem;
}

@media (min-width: 640px) {
  .tablero {
    grid-template-columns: repeat(6, 1fr);
  }
}

.tablero__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 2px solid rgba(11, 20, 96, 0.1);
  background: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--secondary);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tablero__tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.tablero__tile:active {
  transform: scale(0.96);
}

.tablero__emoji {
  font-size: 1.9rem;
  line-height: 1;
}

/* Clave de colores Fitzgerald (la que usan los comunicadores reales) */
.tablero__tile--social     { background: #fde7f1; border-color: #f5a3c7; }
.tablero__tile--persona    { background: #fff4d1; border-color: #ffd66e; }
.tablero__tile--verbo      { background: #e8f7e4; border-color: #7fd67a; }
.tablero__tile--sustantivo { background: #fdeede; border-color: #f5a361; }
.tablero__tile--misc       { background: #e4edff; border-color: #9fc0ff; }

@keyframes tile-pulse {
  0% { box-shadow: 0 0 0 0 rgba(38, 103, 255, 0.45); }
  100% { box-shadow: 0 0 0 14px rgba(38, 103, 255, 0); }
}

.tablero__tile.is-speaking {
  border-color: var(--primary);
  animation: tile-pulse 0.9s ease-out;
}

/* Tira de frase construida */
.tablero__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: 60px;
  padding: 0.65rem 0.85rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--off-white);
}

.tablero__strip-label {
  font-size: 0.875rem;
  color: var(--body-color);
}

.tiene-frase .tablero__strip-label {
  display: none;
}

.tablero__strip-words {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tablero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--secondary);
  animation: card-in 0.25s ease both;
}

.tablero__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.tablero__controls .btn {
  padding: 0.7rem 1.25rem;
  font-size: 0.9375rem;
}

.tablero__nota {
  font-size: 0.8125rem;
  color: var(--body-color);
  margin: 1.1rem 0 0;
}

.tablero__nota-voz {
  font-size: 0.8125rem;
  color: var(--body-color);
  margin: 0.35rem 0 0;
}

/* Versión mini para la banda azul de la portada */
.tablero--mini {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-block: 0;
}

.tablero--mini .tablero__tile {
  border-width: 0;
  box-shadow: 0 8px 20px rgba(4, 12, 60, 0.25);
}

.tablero--mini .tablero__tile:hover {
  transform: translateY(-4px);
}

.band .tablero-caption {
  font-size: 0.875rem;
  color: #cfe0ff;
  text-align: center;
  margin: 0.85rem 0 0;
}

/* ---------- Ola de transición hacia el footer ---------- */
.wave-divider {
  display: block;
  width: 100%;
  height: 70px;
  margin-bottom: -1px;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Preferencias de accesibilidad (tema, contraste, texto, lectura fácil)
   ========================================================================== */

/* Tamaño del texto */
/* Se escala la RAÍZ, no el <body>. Casi todo el sitio mide en rem, y rem se
   resuelve contra la raíz: moviendo solo body{font-size} el cuerpo pasaba de
   17 a 22 px pero los títulos de sección, la entradilla y el antetítulo no se
   movían ni un píxel. La jerarquía se invertía —la entradilla acababa MÁS
   PEQUEÑA que el texto que introduce— y de las ~140 declaraciones de tamaño
   del archivo solo crecían dos, que eran parches manuales.

   En el elemento raíz un porcentaje se resuelve contra el tamaño por defecto
   del navegador, así que quien ya lo tenga configurado en grande sigue
   mandando: esto multiplica su preferencia, no la sustituye. */
html[data-texto="grande"] { font-size: 111.8%; }   /* cuerpo 17 → 19 px */
html[data-texto="enorme"] { font-size: 129.4%; }   /* cuerpo 17 → 22 px */

/* Lectura fácil: más espaciado entre letras, palabras y líneas */
html[data-fuente="legible"] body {
  font-family: Verdana, Tahoma, sans-serif;
  letter-spacing: 0.045em;
  word-spacing: 0.14em;
  line-height: 2;
}

html[data-fuente="legible"] h1,
html[data-fuente="legible"] h2,
html[data-fuente="legible"] h3,
html[data-fuente="legible"] h4,
html[data-fuente="legible"] .btn,
html[data-fuente="legible"] .filter-pill {
  font-family: Verdana, Tahoma, sans-serif;
  letter-spacing: 0.02em;
}

html[data-fuente="legible"] p {
  max-width: 66ch;
}

/* Tema oscuro */
html[data-tema="oscuro"] {
  --white: #151a2e;
  --off-white: #1b2138;
  --secondary: #eef1ff;
  --body-color: #b6bcd8;
  --line: #2c3350;
  --primary: #6f9bff;
  --primary-dark: #8fb2ff;
  --primary-7: rgba(111, 155, 255, 0.1);
  --primary-10: rgba(111, 155, 255, 0.16);
  --footer-bg: #0d1122;
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.5);

  --btn-hover-bg: #1f47c9;        /* 7,49:1 con texto blanco */
  --surface: #1b2138;
  --text-muted: #9aa2c0;          /* 6,3:1 sobre #1b2138 */
  --pictoetlas-fondo: linear-gradient(135deg, #1a2140 0%, #172b30 100%);
  --pictoetlas-tarjeta: #232a45;
  --btn-solid-fg: #0b1024;      /* texto oscuro sobre el azul claro del tema */
  --nav-activo-fg: #cfe0ff;
  --focus-ring: #9db9ff;
  /* Valía #2c3350: contra la tarjeta #1b2138 daba 1,28:1 y el hairline que
     separa las tarjetas del fondo no llegaba a verse. */
  --line: #333c5e;
}

html[data-tema="oscuro"] body {
  background: #10142a;
  color: var(--body-color);
}

html[data-tema="oscuro"] .site-header {
  background: rgba(16, 20, 42, 0.94);
}

html[data-tema="oscuro"] .hero {
  background:
    radial-gradient(560px 380px at 12% 8%, rgba(111, 155, 255, 0.12), transparent 70%),
    radial-gradient(520px 420px at 88% 16%, rgba(110, 241, 178, 0.08), transparent 70%),
    linear-gradient(180deg, #171d33 0%, #10142a 100%);
}

html[data-tema="oscuro"] .resource-card,
html[data-tema="oscuro"] .panel-card,
html[data-tema="oscuro"] .service-item,
html[data-tema="oscuro"] .step,
html[data-tema="oscuro"] .contact-card,
html[data-tema="oscuro"] .form-panel,
html[data-tema="oscuro"] .tablero-panel,
html[data-tema="oscuro"] .a11y-panel,
html[data-tema="oscuro"] .search-field input,
html[data-tema="oscuro"] .form-field input,
html[data-tema="oscuro"] .form-field select,
html[data-tema="oscuro"] .form-field textarea {
  background: #1b2138;
  color: var(--secondary);
  border-color: var(--line);
}

html[data-tema="oscuro"] .section--alt {
  background: #171d33;
}

html[data-tema="oscuro"] .site-footer {
  background: #0d1122;
}

html[data-tema="oscuro"] .wave-divider path {
  fill: #0d1122;
}

html[data-tema="oscuro"] .page-head {
  background: rgba(111, 155, 255, 0.08);
}

html[data-tema="oscuro"] .tag {
  background: #232a45;
  border-color: #2c3350;
  color: var(--body-color);
}

html[data-tema="oscuro"] .resource-card__plate {
  background: #f3f5ff;
}

/* Las fichas del tablero conservan sus colores: son parte del sistema CAA */
html[data-tema="oscuro"] .tablero__tile {
  color: #16203f;
}

/* Alto contraste */
html[data-contraste="alto"] {
  --body-color: #16193a;
  --line: #16193a;
  --primary: #0033cc;
  --primary-dark: #00206e;
  --secondary: #000000;

  /* Este bloque redefinía --primary pero no sus versiones translúcidas, así
     que el halo de foco de los formularios se quedaba al 10 % de opacidad
     justo en el modo pensado para quien peor ve. */
  --primary-7:  rgba(0, 51, 204, 0.14);
  --primary-10: rgba(0, 51, 204, 0.22);
}

html[data-contraste="alto"] body {
  background: #fff;
}

html[data-contraste="alto"] .resource-card,
html[data-contraste="alto"] .panel-card,
html[data-contraste="alto"] .service-item,
html[data-contraste="alto"] .step,
html[data-contraste="alto"] .contact-card,
html[data-contraste="alto"] .form-panel,
html[data-contraste="alto"] .tablero-panel {
  border: 2px solid #16193a;
  box-shadow: none;
}

html[data-contraste="alto"] .tag,
html[data-contraste="alto"] .chip {
  border: 1.5px solid #16193a;
  color: #16193a;
}

html[data-contraste="alto"] a {
  text-decoration: underline;
}

html[data-contraste="alto"] .btn--solid {
  background: #0033cc;
  border-color: #16193a;
  box-shadow: none;
}

html[data-contraste="alto"] .site-footer {
  background: #000;
}

/* Animaciones reducidas por preferencia del usuario */
html[data-animaciones="off"] *,
html[data-animaciones="off"] *::before,
html[data-animaciones="off"] *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
}

html.js[data-animaciones="off"] .reveal,
html[data-animaciones="off"] .reveal {
  opacity: 1;
  transform: none;
}

/* ---------- Widget de accesibilidad ---------- */
.a11y-widget {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 250;
}

.a11y-toggle {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 0;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(38, 103, 255, 0.4);
  transition: transform 0.2s ease, background 0.2s ease;
}

.a11y-toggle:hover {
  transform: scale(1.08);
  background: var(--secondary);
}

.a11y-panel {
  position: absolute;
  left: 0;
  bottom: 66px;
  width: min(310px, calc(100vw - 40px));
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.35rem 1.25rem;
  border: 1px solid var(--line);
}

.a11y-panel h2 {
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

.a11y-panel__intro {
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}

.a11y-group {
  margin-bottom: 0.9rem;
}

.a11y-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--secondary);
  margin-bottom: 0.4rem;
}

.a11y-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.a11y-options button {
  flex: 1;
  min-width: 58px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--secondary);
  background: var(--off-white);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.a11y-options button:hover {
  border-color: var(--primary);
}

.a11y-options button[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.a11y-reset {
  width: 100%;
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--body-color);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.4rem;
}

@media (max-width: 520px) {
  .a11y-widget {
    left: 14px;
    bottom: 14px;
  }

  .a11y-toggle {
    width: 48px;
    height: 48px;
  }
}

/* ---------- Formularios ---------- */
.contacto-grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .contacto-grid {
    grid-template-columns: 1.5fr 1fr;
  }
}

.form-panel {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2rem 1.75rem;
}

.contacto-aside {
  display: grid;
  gap: 1.25rem;
}

.form-row {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-field {
  margin-bottom: 1.15rem;
}

.form-field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--secondary);
  margin-bottom: 0.4rem;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font: inherit;
  color: var(--secondary);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field textarea {
  resize: vertical;
  min-height: 130px;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: #c6cee0;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-10);
}

.form-error {
  color: #c0341d;
  font-size: 0.875rem;
  margin: 0.35rem 0 0;
}

/* Honeypot fuera de vista (no display:none para engañar a más bots) */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  font-weight: 600;
}

.alert--exito {
  background: #e8f7e4;
  color: #2f6b28;
  border: 1.5px solid #7fd67a;
}

.alert--error {
  background: #fdeae5;
  color: #a33517;
  border: 1.5px solid #f0a48e;
}

/* ---------- Botón de favorito en tarjetas ---------- */
.fav-btn {
  /* Era de 36 px: por debajo de los 44 recomendados, y es uno de los
     controles más usados del sitio. */
  top: 0.6rem;
  left: 0.6rem;
  width: 44px;
  height: 44px;
  background: var(--surface);
  color: #5b6280;
  box-shadow: 0 2px 8px rgba(11, 20, 96, 0.14);  position: absolute;
  /* por encima del overlay que hace clicable la tarjeta */
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease;
}


.fav-btn[aria-pressed="true"] {
  color: #e0245e;
  background: #fff;
}

.fav-btn[aria-pressed="true"] svg {
  fill: #e0245e;
}

@keyframes fav-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.fav-btn.is-pop {
  animation: fav-pop 0.35s ease;
}

/* ---------- Página de detalle de recurso ---------- */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.9375rem;
  margin-bottom: 1.75rem;
}

.breadcrumbs a {
  font-weight: 600;
}

.breadcrumbs span {
  color: #a9b0c9;
}

.detalle {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 780px) {
  .detalle {
    grid-template-columns: auto 1fr;
    gap: 2.5rem;
  }
}

.detalle__plate-wrap {
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  border-radius: var(--radius-lg);
}

.detalle__plate {
  width: 120px !important;
  height: 120px !important;
  border-radius: 26px;
}

.detalle__plate.resource-card__plate--initial {
  font-size: 3rem;
}

.detalle__plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}

.detalle__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Ideas de uso en el aula */
.ideas-panel {
  background: var(--off-white);
  border-radius: var(--radius-lg);
  border-left: 5px solid var(--primary);
  padding: 2rem 1.85rem;
}

.ideas-lista {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

@media (min-width: 860px) {
  .ideas-lista {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ideas-lista li {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem 1.15rem 3rem;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-sm);
}

.ideas-lista li::before {
  content: "✓";
  position: absolute;
  left: 1.1rem;
  top: 1.05rem;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary-10);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.8rem;
}

html[data-tema="oscuro"] .ideas-panel {
  background: #171d33;
}

html[data-tema="oscuro"] .ideas-lista li {
  background: #1b2138;
}

/* ==========================================================================
   Constructor de tablero imprimible
   ========================================================================== */
.constructor-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: flex-end;
  padding: 1.35rem 1.5rem;
  background: var(--off-white);
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
}

.constructor-barra .a11y-options button:not(.btn) {
  min-width: 90px;
}

.constructor-barra .a11y-options {
  align-items: center;
}

.constructor-barra .btn {
  flex: none;
  white-space: nowrap;
  padding: 0.8rem 1.35rem;
  font-size: 0.9375rem;
}

.constructor-ayuda {
  font-size: 0.9375rem;
  margin: 1rem 0 0;
}

kbd {
  font-family: inherit;
  font-size: 0.8em;
  background: var(--off-white);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0.1em 0.4em;
}

/* La hoja imita una A4 en pantalla */
.hoja-tablero {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1.75rem;
  max-width: 900px;
  margin-inline: auto;
}

.hoja-tablero__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 3px solid var(--secondary);
  padding-bottom: 0.85rem;
  margin-bottom: 1.25rem;
}

.hoja-titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--secondary);
}

.hoja-nombre {
  font-size: 0.95rem;
  color: var(--body-color);
}

.hoja-grid {
  display: grid;
  gap: 0.75rem;
}

.hoja-tablero[data-columnas="3"] .hoja-grid { grid-template-columns: repeat(3, 1fr); }
.hoja-tablero[data-columnas="4"] .hoja-grid { grid-template-columns: repeat(4, 1fr); }
.hoja-tablero[data-columnas="5"] .hoja-grid { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 620px) {
  .hoja-tablero[data-columnas="4"] .hoja-grid,
  .hoja-tablero[data-columnas="5"] .hoja-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hoja-celda {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 2.5px solid;
  padding: 0.4rem;
  text-align: center;
}

.hoja-celda__emoji {
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  line-height: 1;
  cursor: text;
  border-radius: 6px;
}

.hoja-celda__palabra {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.75rem, 1.6vw, 1rem);
  color: #16203f;
  line-height: 1.2;
  cursor: text;
  border-radius: 6px;
  word-break: break-word;
}

/* Pictogramas de ARASAAC (se muestran en lugar de los emojis) */
.hoja-celda__picto {
  width: 100%;
  max-width: 76%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.hoja-tablero[data-dibujos="arasaac"] .hoja-celda__emoji {
  display: none;
}

/* Si una palabra no tiene pictograma, se mantiene el emoji */
.hoja-tablero[data-dibujos="arasaac"] .hoja-celda.sin-picto .hoja-celda__emoji {
  display: block;
}

.hoja-celda.cargando-picto {
  position: relative;
}

.hoja-celda.cargando-picto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: cargando 1.1s linear infinite;
}

@keyframes cargando {
  to { background-position: -220% 0; }
}

.aviso-arasaac {
  font-size: 0.85rem;
  background: var(--off-white);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1.5rem auto 0;
  max-width: 900px;
}

.pie-arasaac {
  flex-basis: 100%;
  font-size: 0.7rem;
  order: 3;
}

/* Colores Fitzgerald para la hoja impresa */
.hoja-celda--social     { background: #fde7f1; border-color: #e87ba9; }
.hoja-celda--persona    { background: #fff4d1; border-color: #e8b53a; }
.hoja-celda--verbo      { background: #e8f7e4; border-color: #5fb958; }
.hoja-celda--sustantivo { background: #fdeede; border-color: #e08b45; }
.hoja-celda--misc       { background: #e4edff; border-color: #7ba3f0; }

.hoja-tablero__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--body-color);
  border-top: 1.5px solid var(--line);
  margin-top: 1.25rem;
  padding-top: 0.75rem;
}

[contenteditable="true"]:hover {
  background: rgba(38, 103, 255, 0.08);
  outline: 1px dashed rgba(38, 103, 255, 0.5);
}

[contenteditable="true"]:focus {
  outline: 2px solid var(--primary);
  background: #fff;
}

html[data-tema="oscuro"] .hoja-tablero {
  background: #fff;
}

html[data-tema="oscuro"] .hoja-titulo,
html[data-tema="oscuro"] .hoja-nombre,
html[data-tema="oscuro"] .hoja-tablero__pie {
  color: #16203f;
}

/* ==========================================================================
   Agenda visual
   ========================================================================== */
.agenda-plantillas {
  margin-top: 1.25rem;
}

.agenda-plantillas .btn {
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
}

.hoja-agenda {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1.75rem;
  max-width: 820px;
  margin-inline: auto;
}

.agenda-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: paso-agenda;
  display: grid;
  gap: 0.6rem;
}

.agenda-paso {
  counter-increment: paso-agenda;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 2.5px solid #cfd8ee;
  border-radius: 12px;
  background: var(--off-white);
  padding: 0.6rem 0.9rem;
}

.agenda-paso__num::before {
  content: counter(paso-agenda);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--secondary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  flex: none;
}

.agenda-paso__num {
  display: flex;
  flex: none;
}

.agenda-paso__dibujo {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid var(--line);
  flex: none;
  overflow: hidden;
}

.agenda-paso__emoji {
  font-size: 2rem;
  line-height: 1;
  cursor: text;
}

.agenda-paso__picto {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}

.hoja-agenda[data-dibujos="arasaac"] .agenda-paso:not(.sin-picto) .agenda-paso__emoji {
  display: none;
}

.agenda-paso__texto {
  flex: 1;
  /* sin min-width:0 el texto no puede encogerse y empuja la fila fuera de
     la pantalla en un celular */
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--secondary);
  cursor: text;
  border-radius: 6px;
}

.agenda-paso__check {
  flex: none;
  width: 34px;
  height: 34px;
  border: 2.5px solid var(--secondary);
  border-radius: 7px;
}

.hoja-agenda[data-check="no"] .agenda-paso__check {
  display: none;
}

.agenda-paso__acciones {
  display: flex;
  gap: 0.25rem;
  flex: none;
}

.paso-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--secondary);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.paso-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.paso-btn--quitar:hover {
  background: #c0341d;
  border-color: #c0341d;
}

.agenda-add {
  display: block;
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.85rem;
  border: 2.5px dashed var(--line);
  border-radius: 12px;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--body-color);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.agenda-add:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Formato en tarjetas */
.hoja-agenda[data-formato="tarjetas"] .agenda-pasos {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 700px) {
  .hoja-agenda[data-formato="tarjetas"] .agenda-pasos {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hoja-agenda[data-formato="tarjetas"] .agenda-paso {
  flex-direction: column;
  text-align: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
}

.hoja-agenda[data-formato="tarjetas"] .agenda-paso__dibujo {
  width: 84px;
  height: 84px;
}

.hoja-agenda[data-formato="tarjetas"] .agenda-paso__texto {
  flex: none;
  font-size: 1.05rem;
}

.hoja-agenda[data-formato="tarjetas"] .agenda-paso__num {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}

.hoja-agenda[data-formato="tarjetas"] .agenda-paso__num::before {
  width: 26px;
  height: 26px;
  font-size: 0.85rem;
}

.hoja-agenda[data-formato="tarjetas"] .agenda-paso__acciones {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
}

.agenda-paso.cargando-picto .agenda-paso__dibujo {
  background: linear-gradient(100deg, #eef2fb 30%, #ffffff 50%, #eef2fb 70%);
  background-size: 220% 100%;
  animation: cargando 1.1s linear infinite;
}

html[data-tema="oscuro"] .hoja-agenda {
  background: #fff;
}

html[data-tema="oscuro"] .hoja-agenda .hoja-titulo,
html[data-tema="oscuro"] .hoja-agenda .hoja-nombre,
html[data-tema="oscuro"] .hoja-agenda .agenda-paso__texto,
html[data-tema="oscuro"] .hoja-agenda .hoja-tablero__pie {
  color: #16203f;
}

/* ==========================================================================
   Tablero «Primero / Después»
   ========================================================================== */
.hoja-pd {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1.75rem;
  max-width: 900px;
  margin-inline: auto;
}

.pd-panels {
  display: flex;
  align-items: stretch; /* ambos paneles con la misma altura */
  justify-content: center;
  gap: 1rem;
}

.hoja-pd[data-orientacion="vertical"] .pd-panels {
  flex-direction: column;
}

.hoja-pd[data-orientacion="vertical"] .pd-flecha {
  transform: rotate(90deg);
}

.pd-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* el bloque etiqueta+dibujo+palabra va centrado */
  gap: 0.75rem;
  border: 3px solid;
  border-radius: 16px;
  padding: 1.5rem 1rem;
  text-align: center;
  min-width: 0;
}

.hoja-pd[data-orientacion="vertical"] .pd-panel {
  width: 100%;
  max-width: 420px;
}

.pd-panel--primero {
  background: #e4edff;
  border-color: #7ba3f0;
}

.pd-panel--despues {
  background: #e8f7e4;
  border-color: #5fb958;
}

.pd-panel__etiqueta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--secondary);
}

.pd-panel__dibujo {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 210px;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

.pd-panel__emoji {
  font-size: clamp(3rem, 11vw, 5.5rem);
  line-height: 1;
  cursor: text;
}

.pd-panel__picto {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.hoja-pd[data-dibujos="arasaac"] .pd-panel:not(.sin-picto) .pd-panel__emoji {
  display: none;
}

.pd-panel__texto {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  color: var(--secondary);
  cursor: text;
  border-radius: 6px;
  word-break: break-word;
}

.pd-flecha {
  color: var(--primary);
  flex: none;
  display: grid;
  place-items: center;
  align-self: center;
}

.pd-panel.cargando-picto .pd-panel__dibujo {
  background: linear-gradient(100deg, #eef2fb 30%, #ffffff 50%, #eef2fb 70%);
  background-size: 220% 100%;
  animation: cargando 1.1s linear infinite;
}

html[data-tema="oscuro"] .hoja-pd {
  background: #fff;
}

html[data-tema="oscuro"] .hoja-pd .hoja-titulo,
html[data-tema="oscuro"] .hoja-pd .hoja-nombre,
html[data-tema="oscuro"] .hoja-pd .pd-panel__texto,
html[data-tema="oscuro"] .hoja-pd .pd-panel__etiqueta,
html[data-tema="oscuro"] .hoja-pd .hoja-tablero__pie {
  color: #16203f;
}

/* ==========================================================================
   Página de materiales
   ========================================================================== */
.materiales-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .materiales-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.material-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.material-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}



.material-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
}

.material-card__body h3 {
  font-size: 1.3rem;
  margin: 0.6rem 0 0.5rem;
}

.material-card__body p {
  font-size: 0.9375rem;
}

.material-card__para {
  color: var(--body-color);
  margin-bottom: 1.25rem;
}

.material-card__body .btn {
  margin-top: auto;
  align-self: flex-start;
}

html[data-tema="oscuro"] .material-card {
  background: #1b2138;
}

html[data-tema="oscuro"] .material-card__demo {
  background: #171d33;
}

/* ==========================================================================
   Guía de preguntas frecuentes
   ========================================================================== */
.faq {
  display: grid;
  gap: 0.85rem;
  max-width: 860px;
  margin-inline: auto;
}

.faq-item {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.faq-item[open] {
  box-shadow: var(--shadow-md);
}

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover .faq-item__pregunta {
  color: var(--primary);
}

.faq-item summary:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: -3px;
}

.faq-item__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary-10);
  color: var(--primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  flex: none;
}

.faq-item[open] .faq-item__num {
  background: var(--primary);
  color: #fff;
}

.faq-item__pregunta {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--secondary);
  transition: color 0.2s ease;
}

.faq-item__chevron {
  flex: none;
  color: var(--body-color);
  transition: transform 0.25s ease;
}

.faq-item[open] .faq-item__chevron {
  transform: rotate(180deg);
}

.faq-item__respuesta {
  padding: 0 1.35rem 1.35rem calc(1.35rem + 34px + 1rem);
}

.faq-item__respuesta p {
  margin: 0;
  max-width: 68ch;
}

@media (max-width: 560px) {
  .faq-item__respuesta {
    padding-left: 1.35rem;
  }
}

.faq-fuentes {
  max-width: 860px;
  margin: 2rem auto 0;
  font-size: 0.85rem;
  color: var(--body-color);
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}

html[data-tema="oscuro"] .faq-item {
  background: #1b2138;
}

/* ==========================================================================
   Impresión: la hoja del tablero ocupa la página completa
   ========================================================================== */
@page {
  size: A4;
  margin: 12mm;
}

@media print {
  .site-header,
  .site-footer,
  .closing-cta,
  .toolbar,
  .scroll-progress,
  .a11y-widget,
  .wave-divider,
  .no-print,
  #zsiqwidget,
  .zsiq_floatmain {
    display: none !important;
  }

  html,
  body {
    background: #fff !important;
    font-size: 12pt;
  }

  .section,
  .section--tight {
    padding-block: 0 !important;
  }

  .container {
    max-width: none;
    padding: 0;
  }

  .hoja-tablero {
    border: 0;
    box-shadow: none;
    padding: 0;
    max-width: none;
    page-break-inside: avoid;
  }

  .hoja-celda {
    /* fuerza los colores de la clave Fitzgerald también en papel */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border-width: 2pt;
  }

  .hoja-celda__emoji {
    font-size: 26pt;
  }

  .hoja-celda__palabra {
    font-size: 11pt;
  }

  /* Todo debe caber en UNA hoja A4, también con la atribución de ARASAAC */
  .hoja-grid {
    gap: 2mm;
  }

  .hoja-celda__picto {
    max-width: 68%;
  }

  .hoja-tablero__cabecera {
    padding-bottom: 2mm;
    margin-bottom: 3mm;
  }

  .hoja-tablero__pie {
    margin-top: 3mm;
    padding-top: 2mm;
    gap: 0.5mm 6mm;
  }

  .pie-arasaac {
    font-size: 6.5pt;
  }

  [contenteditable="true"]:hover {
    background: transparent;
    outline: 0;
  }

  /* Agenda visual en papel */
  .hoja-agenda {
    border: 0;
    box-shadow: none;
    padding: 0;
    max-width: none;
  }

  /* Ajustado para que una jornada de 10 pasos quepa en una hoja A4 */
  .agenda-pasos {
    gap: 2mm;
  }

  .agenda-paso {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border-width: 1.2pt;
    padding: 1.2mm 3mm;
    gap: 4mm;
    page-break-inside: avoid;
  }

  .agenda-paso__texto {
    font-size: 13pt;
  }

  .agenda-paso__dibujo {
    width: 16mm;
    height: 16mm;
  }

  .agenda-paso__emoji {
    font-size: 17pt;
  }

  .agenda-paso__num::before {
    width: 8mm;
    height: 8mm;
    font-size: 10pt;
  }

  .agenda-paso__check {
    width: 8mm;
    height: 8mm;
    border-width: 1.2pt;
  }

  .agenda-add {
    display: none;
  }

  /* Primero / Después ocupa la hoja entera: se ve desde lejos */
  .hoja-pd {
    border: 0;
    box-shadow: none;
    padding: 0;
    max-width: none;
  }

  /* Ocupa casi toda la hoja: es un cartel para ver desde lejos */
  .pd-panels {
    gap: 6mm;
    margin-top: 10mm;
    min-height: 200mm;
  }

  .hoja-pd[data-orientacion="vertical"] .pd-panels {
    min-height: 195mm;
  }

  .pd-panel {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border-width: 2pt;
    padding: 8mm 4mm;
    page-break-inside: avoid;
  }

  .pd-panel__etiqueta {
    font-size: 16pt;
  }

  .pd-panel__dibujo {
    max-width: 78mm;
  }

  .pd-panel__emoji {
    font-size: 60pt;
  }

  .pd-panel__texto {
    font-size: 28pt;
  }
}

/* Nota sobre compartir por enlace */
.nota-compartir {
  background: var(--primary-7);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 0.9rem 1.15rem;
  font-size: 0.9rem;
}

.compartir-material.is-copiado {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Acciones principales de los generadores: fila compacta antes de la hoja */
.acciones-rapidas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.acciones-rapidas .btn {
  padding: 0.8rem 1.3rem;
  font-size: 0.9375rem;
  white-space: nowrap;
}

/* Bloque de dudas con tres tarjetas y la guía destacada */
@media (min-width: 900px) {
  .contact-grid--tres {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-card--destacada {
  border: 2px solid var(--primary);
  background: linear-gradient(180deg, var(--primary-7) 0%, #fff 55%);
}

html[data-tema="oscuro"] .contact-card--destacada {
  background: #1b2138;
}

/* ==========================================================================
   Página de vocabulario inicial
   ========================================================================== */
.dato-fuerte {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--primary-7);
  border-left: 5px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  max-width: 760px;
}

.dato-fuerte__numero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 9vw, 5rem);
  line-height: 1;
  color: var(--primary);
  margin: 0;
}

.dato-fuerte__texto {
  flex: 1;
  min-width: 220px;
  margin: 0;
  font-size: 1.05rem;
}

/* Tabla ordenada con barras: los valores están siempre visibles y el
   marcado es una tabla real, legible por lectores de pantalla */
.tabla-nucleo {
  width: 100%;
  max-width: 760px;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
}

.tabla-nucleo thead th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--body-color);
  font-weight: 700;
  padding: 0 0.6rem 0.5rem;
  border-bottom: 2px solid var(--line);
}

.tabla-nucleo tbody th,
.tabla-nucleo tbody td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--line-soft, var(--line));
  vertical-align: middle;
}

.tabla-nucleo tbody tr:hover {
  background: var(--primary-7);
}

.tabla-nucleo .col-num {
  width: 2.2rem;
  color: var(--body-color);
  font-variant-numeric: tabular-nums;
}

.tabla-nucleo .col-pct {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--body-color);
  width: 4.5rem;
}

.tabla-nucleo tbody th {
  text-align: left;
  font-weight: 700;
  white-space: nowrap;
}

.palabra-es {
  font-family: var(--font-display);
  color: var(--secondary);
}

.palabra-en {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--body-color);
}

/* La barra: un solo tono, la longitud codifica la magnitud */
.barra {
  display: block;
  width: var(--valor);
  min-width: 3px;
  height: 12px;
  border-radius: 0 4px 4px 0;
  background: var(--primary);
}

/* Palabras del estudio que no se trasladan a un tablero en español */
.tabla-nucleo .no-traslada {
  opacity: 0.45;
}

.tabla-nucleo .no-traslada .barra {
  background: var(--body-color);
}

.nota-honesta {
  max-width: 68ch;
  margin-top: 1.75rem;
  padding: 1.15rem 1.35rem;
  background: var(--off-white);
  border-left: 4px solid var(--body-color);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}

/* Comparación: lo habitual frente a lo que funciona */
.comparativa {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 820px) {
  .comparativa {
    grid-template-columns: 1fr 1fr;
  }
}

.comparativa__caja {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid;
}

.comparativa__caja--mal  { border-top-color: #cb4a1e; }
.comparativa__caja--bien { border-top-color: #2f7a28; }

.comparativa__etiqueta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.comparativa__caja--mal .comparativa__etiqueta  { color: #cb4a1e; }
.comparativa__caja--bien .comparativa__etiqueta { color: #2f7a28; }

.comparativa__ejemplo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--secondary);
  line-height: 1.7;
}

.comparativa__caja p:last-child {
  font-size: 0.9375rem;
  margin-bottom: 0;
}

html[data-tema="oscuro"] .comparativa__caja {
  background: #1b2138;
}


/* La fila de la agenda en pantallas estrechas: sin esto, el dibujo, el texto
   y los tres botones no caben en 390 px */
@media (max-width: 520px) {
  .agenda-paso {
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
  }

  .agenda-paso__dibujo {
    width: 52px;
    height: 52px;
  }

  .agenda-paso__texto {
    font-size: 1.05rem;
  }

  .agenda-paso__acciones {
    gap: 0.15rem;
  }

  .paso-btn {
    width: 26px;
    height: 26px;
    font-size: 0.85rem;
  }

  .agenda-paso__check {
    width: 28px;
    height: 28px;
  }
}

/* La tabla de vocabulario con texto grande en pantallas estrechas.
   Quien amplía el texto es justamente el público de este sitio: la tabla
   no puede desbordarse por eso. */
@media (max-width: 560px) {
  .tabla-nucleo tbody th {
    white-space: normal;
  }

  .tabla-nucleo .col-num {
    width: 1.6rem;
    padding-inline: 0.25rem;
  }

  .tabla-nucleo .col-pct {
    width: auto;
    padding-inline: 0.25rem;
  }

  .tabla-nucleo tbody th,
  .tabla-nucleo tbody td {
    padding-inline: 0.35rem;
  }

  .palabra-en {
    display: none; /* el original en inglés es secundario; en pantalla estrecha estorba */
  }
}

/* Con el texto ampliado, la columna de la barra cede espacio antes que el texto */
html[data-texto="grande"] .tabla-nucleo .barra,
html[data-texto="enorme"] .tabla-nucleo .barra {
  height: 10px;
}

@media (max-width: 620px) {
  html[data-texto="enorme"] .tabla-nucleo td:nth-child(3) {
    display: none; /* con texto enorme mandan los números, no la barra */
  }
}

/* El formulario de contacto con el texto ampliado: los campos deben poder
   encogerse (sin min-width:0 el grid los mantiene a su ancho de contenido) */
.form-row > .form-field,
.form-field input,
.form-field select,
.form-field textarea {
  min-width: 0;
  max-width: 100%;
}

.form-panel {
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .form-panel {
    padding: 1.35rem 1.1rem;
  }
}

/* Los hijos de un grid no se encogen por debajo de su contenido salvo que se
   les permita. Con el texto ampliado, el ancho intrínseco del <input>
   (unas 20 letras) arrastraba el panel entero fuera de la pantalla. */
.contacto-grid > * {
  min-width: 0;
}

.form-field input,
.form-field select,
.form-field textarea {
  /* neutraliza el tamaño intrínseco del control */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Un correo largo no tiene dónde partirse: con el texto ampliado empujaba
   la tarjeta fuera de la pantalla. */
.contacto-aside > *,
.contact-grid > * {
  min-width: 0;
}

.contact-card {
  overflow-wrap: anywhere;
}

/* ==================================================================
   Página «sin conexión»
   Es lo único que alguien ve cuando se le cae internet en clase, así
   que su trabajo es decir qué SÍ se puede hacer, no pedir disculpas.
   ================================================================== */
.sin-conexion-lista {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75rem;
}

.sin-conexion-lista a {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  height: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface, #fff);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.sin-conexion-lista a:hover,
.sin-conexion-lista a:focus-visible {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.sin-conexion-lista__emoji {
  font-size: 1.5rem;
  line-height: 1.2;
  flex-shrink: 0;
}

.sin-conexion-lista strong {
  display: block;
  font-family: var(--font-display);
  color: var(--secondary);
  margin-bottom: 0.15rem;
}

.sin-conexion-lista__desc {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted, #5a6376);
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .sin-conexion-lista a { transition: none; }
  .sin-conexion-lista a:hover { transform: none; }
}

/* ==================================================================
   Pictoetlas — la plataforma propia, destacada en /comunicacion
   ================================================================== */
.pictoetlas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  padding: 2rem;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #f2f6ff 0%, #eefaf3 100%);
}

@media (min-width: 880px) {
  .pictoetlas {
    grid-template-columns: 1.55fr 1fr;
    align-items: center;
    padding: 2.5rem;
  }
}

.pictoetlas__texto > * { min-width: 0; }

.pictoetlas h2 {
  font-family: var(--font-display);
  color: var(--secondary);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  margin: 0.6rem 0 0.75rem;
}

.pictoetlas p { max-width: 60ch; }

/* La etiqueta de beta tiene que verse antes que el botón: quien entra
   debe saber a qué va antes de ir. */
.pictoetlas__beta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: #fff4d1;
  color: #8a6a00;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pictoetlas__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d8a200;
}

.pictoetlas__aviso {
  font-size: 0.94rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid #d8a200;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 0 10px 10px 0;
}

.pictoetlas__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.pictoetlas__lista {
  list-style: none;
  margin: 0;
  padding: 1.25rem;
  display: grid;
  gap: 0.7rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(11, 20, 96, 0.08);
}

.pictoetlas__lista li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.94rem;
  line-height: 1.45;
}

.pictoetlas__lista span {
  flex-shrink: 0;
  width: 1.6rem;
  text-align: center;
}

/* ==================================================================
   Testimonios de quien usa los recursos
   ================================================================== */
.testimonios-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
}

@media (min-width: 700px) {
  .testimonios-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1080px) {
  .testimonios-grid { grid-template-columns: repeat(3, 1fr); }
}

.testimonio {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface, #fff);
  box-shadow: 0 6px 20px rgba(11, 20, 96, 0.05);
}

.testimonio__foto {
  margin: -1.5rem -1.5rem 0;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  /* Proporción fija: las fotos llegan de cualquier cámara y sin esto la
     cuadrícula se descuadra según lo que envíe cada persona. */
  aspect-ratio: 16 / 10;
  background: var(--line);
}

.testimonio__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testimonio__texto {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.testimonio__texto p {
  margin: 0;
  /* Las comillas van en el CSS, no en el texto: así se respeta literalmente
     lo que la persona escribió, sin añadirle signos. */
  quotes: '«' '»';
  overflow-wrap: anywhere;
}

.testimonio__texto p::before { content: open-quote; }
.testimonio__texto p::after  { content: close-quote; }

.testimonio__video a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.92rem;
}

.testimonio__firma {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  min-width: 0;
}

.testimonio__inicial {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}

.testimonio__firma strong {
  display: block;
  font-family: var(--font-display);
  color: var(--secondary);
}

.testimonio__rol {
  display: block;
  color: var(--text-muted, #5a6376);
  font-size: 0.85rem;
  line-height: 1.35;
}

.testimonios-vacio {
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--line);
  border-radius: 20px;
}

.testimonios-vacio__emoji { font-size: 2.6rem; margin: 0 0 0.5rem; }

.testimonios-vacio h2 {
  font-family: var(--font-display);
  color: var(--secondary);
  font-size: 1.3rem;
  margin: 0 0 0.6rem;
}

/* Casilla de permiso: es lo que autoriza a publicar las palabras y la cara
   de alguien, así que se ve como una decisión, no como letra pequeña. */
.form-permiso {
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(38, 103, 255, 0.04);
}

.form-permiso label {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 0.92rem;
  line-height: 1.5;
  cursor: pointer;
}

.form-permiso input[type="checkbox"] {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  accent-color: var(--primary);
}

.form-ayuda {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted, #5a6376);
  line-height: 1.4;
}

.form-opcional {
  font-weight: 400;
  color: var(--text-muted, #5a6376);
  font-size: 0.85em;
}

.form-field input[type="file"] {
  width: 100%;
  min-width: 0;
  padding: 0.6rem;
  font-size: 0.88rem;
}

.testimonios-invita {
  text-align: center;
  max-width: 56ch;
  margin-inline: auto;
  padding: 2.25rem 1.5rem;
  border: 1px dashed var(--line);
  border-radius: 20px;
  background: var(--surface, #fff);
}

.testimonios-invita__emoji { font-size: 2.4rem; margin: 0 0 0.5rem; }

.testimonios-invita h3 {
  font-family: var(--font-display);
  color: var(--secondary);
  font-size: 1.25rem;
  margin: 0 0 0.7rem;
}


/* ==========================================================================
   Modo oscuro: superficies que se habían quedado en claro
   --------------------------------------------------------------------------
   Las bandas de color de las tarjetas del catálogo (.media--*) solo estaban
   definidas una vez, sin versión oscura: eran 65 losas pastel de 178 px
   brillando sobre un fondo #151a2e, justo el deslumbramiento que el modo
   oscuro existe para evitar.
   ========================================================================== */
.pictoetlas        { background: var(--pictoetlas-fondo); }
.pictoetlas__lista { background: var(--pictoetlas-tarjeta); }

html[data-tema="oscuro"] .pictoetlas__aviso {
  background: rgba(0, 0, 0, 0.28);
  border-left-color: #d8a200;
}

html[data-tema="oscuro"] .pictoetlas__beta {
  background: #3a2f00;
  color: #ffd97a;
}

html[data-tema="oscuro"] .media--comunicacion,
html[data-tema="oscuro"] .detalle__plate-wrap.media--comunicacion  { background: #17322a; }
html[data-tema="oscuro"] .media--gamificacion,
html[data-tema="oscuro"] .detalle__plate-wrap.media--gamificacion  { background: #35231c; }
html[data-tema="oscuro"] .media--video,
html[data-tema="oscuro"] .detalle__plate-wrap.media--video         { background: #262040; }
html[data-tema="oscuro"] .media--participacion,
html[data-tema="oscuro"] .detalle__plate-wrap.media--participacion { background: #1c2748; }
html[data-tema="oscuro"] .media--materiales,
html[data-tema="oscuro"] .detalle__plate-wrap.media--materiales    { background: #332a17; }
html[data-tema="oscuro"] .media--accesibilidad,
html[data-tema="oscuro"] .detalle__plate-wrap.media--accesibilidad { background: #17303a; }
html[data-tema="oscuro"] .media--ia,
html[data-tema="oscuro"] .detalle__plate-wrap.media--ia            { background: #24244a; }

/* Los chips llevaban fondo pastel con texto oscuro: en modo oscuro se invierte
   la lógica —fondo translúcido y el color de la categoría en el texto—. */
html[data-tema="oscuro"] .chip { background: rgba(255, 255, 255, 0.08); }
html[data-tema="oscuro"] .chip--comunicacion  { color: #7ce0b2; }
html[data-tema="oscuro"] .chip--gamificacion  { color: #ffab86; }
html[data-tema="oscuro"] .chip--video         { color: #b6a4ff; }
html[data-tema="oscuro"] .chip--participacion { color: #96b6ff; }
html[data-tema="oscuro"] .chip--materiales    { color: #e3ba59; }
html[data-tema="oscuro"] .chip--accesibilidad { color: #6fc9dd; }
html[data-tema="oscuro"] .chip--ia            { color: #a9aaff; }

html[data-tema="oscuro"] .fav-btn,
html[data-tema="oscuro"] .resource-card__external {
  background: #232a45;
  color: #cfd5f0;
  box-shadow: none;
}

/* En oscuro una sombra ya no separa nada del fondo: hace falta un contorno. */
html[data-tema="oscuro"] .resource-card { border: 1px solid var(--line); }

html[data-tema="oscuro"] .tablero__chip {
  background: var(--surface);
  border-color: var(--line);
}

/* --primary-dark vale #8fb2ff en oscuro, que es un color de TEXTO: si se deja
   en el degradado, la banda se vuelve un foco. */
html[data-tema="oscuro"] .band {
  background: linear-gradient(120deg, #1a3fa8 0%, #101f5e 100%);
}

/* El enlace de la banda llevaba un style="" en línea que parcheaba el síntoma. */
.band a {
  color: var(--tertiary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.band a:hover { color: #fff; }

.band .tablero-caption { color: #dbe6ff; }


/* La regla `html[data-tema="oscuro"] .resource-card__plate` aclara la placa
   para que los logotipos se lean sobre ella, pero gana en especificidad a
   `.resource-card__plate--initial.tile--*`: las 43 tarjetas sin logotipo
   quedaban con su inicial BLANCA sobre un fondo casi blanco, ilegible. Estos
   selectores devuelven a cada una el color de su categoría. */
html[data-tema="oscuro"] .resource-card__plate--initial.tile--comunicacion   { background: #0a7050; }
html[data-tema="oscuro"] .resource-card__plate--initial.tile--gamificacion   { background: #a83c14; }
html[data-tema="oscuro"] .resource-card__plate--initial.tile--video          { background: #5138c4; }
html[data-tema="oscuro"] .resource-card__plate--initial.tile--participacion  { background: #1c4bc0; }
html[data-tema="oscuro"] .resource-card__plate--initial.tile--materiales     { background: #7d5400; }
html[data-tema="oscuro"] .resource-card__plate--initial.tile--accesibilidad  { background: #0b5a6a; }
html[data-tema="oscuro"] .resource-card__plate--initial.tile--ia             { background: #3a39b8; }


/* ==========================================================================
   Superficie: una sola definición de «tarjeta elevada»
   --------------------------------------------------------------------------
   Diez componentes hacían de tarjeta y solo uno llevaba borde: la separación
   con el fondo la cargaba una sombra de alfa 0,06, que sobre .section--alt da
   1,06:1 —invisible—. Un contorno propio es lo que distingue una superficie
   dibujada de una insinuada.
   ========================================================================== */
.panel-card,
.resource-card,
.step,
.service-item,
.contact-card,
.material-card,
.faq-item,
.comparativa__caja,
.form-panel,
.tablero-panel,
.testimonio {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.resource-card__plate { border-radius: var(--radius-sm); }
.testimonio           { border-radius: var(--radius); }
.testimonios-invita   { border-radius: var(--radius-lg); }

.btn,
.search-field input,
.filter-pill,
.menu-toggle,
.form-field input,
.form-field select,
.form-field textarea { border-radius: var(--radius-sm); }

.filter-pill   { min-height: 44px; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }

/* La placa va centrada, y por debajo de unos 309 px de columna su borde
   izquierdo caía bajo el corazón. Se le reserva el carril de los dos botones. */
.resource-card__media .resource-card__plate { max-width: calc(100% - 116px); }

/* ==========================================================================
   Foco: quien navega con teclado merece el mismo vocabulario que con ratón
   --------------------------------------------------------------------------
   `focus-within` no aparecía ni una vez en las 4.000 líneas: toda la
   respuesta de las tarjetas colgaba de :hover. Sin transform a propósito —el
   foco al tabular no es intención, y un salto de 6 px por cada tarjeta
   desorienta—.
   ========================================================================== */
.resource-card:focus-within,
.panel-card:focus-within,
.service-item:focus-within,
.step:focus-within,
.material-card:focus-within,
.contact-card:focus-within {
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.panel-card:focus-within h3,
.resource-card:focus-within h3 a { color: var(--primary); }

/* Sobre superficies de marca el anillo azul era invisible: los descendientes
   heredan la variable, no hace falta duplicar reglas. */
.band,
.btn--solid,
.filter-pill[aria-pressed="true"],
.site-footer { --focus-ring: #ffffff; }

/* .resource-card lleva overflow:hidden y recortaba el anillo por fuera. */
.resource-card h3 a:focus-visible::after {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

/* Un solo lenguaje de foco. Los campos usaban outline:none más un halo, y
   además con :focus, que salta también al hacer clic con el ratón. */
.search-field input:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: none;
}

.search-field input:focus-visible,
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--primary);
}

/* ==========================================================================
   Movimiento solo donde hay puntero fino
   --------------------------------------------------------------------------
   No había ni un `@media (hover: hover)` en todo el archivo: al tocar una
   tarjeta en una tableta de aula, el estado hover se quedaba pegado hasta
   tocar otra cosa. Y el giro de la placa era el tic de plantilla más
   reconocible del sitio.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .resource-card:hover .resource-card__plate { transform: scale(1.04); }
  .fav-btn:hover { transform: scale(1.12); }
  .resource-card:hover .resource-card__external { transform: translate(2px, -2px); }
}


/* La franja de cabecera va a sangre; si alguien vuelve a ponerle .container
   se encajonaría otra vez. Red de seguridad. */
.page-head.container { max-width: none; padding-inline: 0; }

/* Variante de /contacto, que la quiere sin fondo. Antes era un style="" suelto. */
.page-head--plain { background: none; }

/* Una banda de color sin ritmo propio nunca es intencionada. */
.section--alt:not(.section):not(.section--tight) { padding-block: var(--section-y); }

/* Las celdas de la hoja de ejemplo llevaban cursor:text sin ser editables:
   prometían una interacción que no existe. */
.hoja-celda__emoji,
.hoja-celda__palabra { cursor: inherit; }

[contenteditable="true"].hoja-celda__emoji,
[contenteditable="true"].hoja-celda__palabra { cursor: text; }

/* Las parejas de campos tenían gap 1rem Y cada campo margin-bottom 1.15rem:
   a 390 px los dos campos de una MISMA pareja quedaban más separados que las
   parejas entre sí. La proximidad decía lo contrario de la estructura. */
.form-row { display: grid; gap: 0 1rem; }

/* 43 de los 65 recursos no tienen logotipo. Con la placa 3:2 grande, su
   inicial pasaba a ser una portada; a este tamaño vuelve a ser un distintivo,
   y las 22 con logotipo real conservan la placa grande, que ahí sí aporta. */
.resource-card__media--sin-logo { height: 108px; }

.resource-card__media--sin-logo .resource-card__plate--initial {
  width: 60px;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  font-size: 1.75rem;
}

.resource-card h3 { font-size: 1.3rem; line-height: 1.3; }


/* Las tres filas «no traslada» de la tabla de vocabulario llevaban
   opacity: 0.45 sobre la fila entera: la palabra quedaba a 2,60:1. Se atenúa
   el COLOR, no la opacidad, y la distinción la llevan la cursiva y la barra
   hueca. */
.tabla-nucleo .no-traslada { opacity: 1; }

.tabla-nucleo .no-traslada .palabra-es {
  color: var(--body-color);
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
}

.tabla-nucleo .no-traslada .barra {
  background: transparent;
  border: 1.5px solid var(--body-color);
  border-left: 0;
  box-sizing: border-box;
}

/* La ficha mostraba el logotipo MÁS PEQUEÑO que la tarjeta que lleva hasta
   ella: 120x120 forzados con !important sobre una imagen de 240x160. */
.detalle__plate-wrap { width: 260px; height: 190px; }

.detalle__plate {
  width: 208px;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-sm);
}

.detalle__plate.resource-card__plate--initial {
  width: 120px;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  font-size: 3rem;
}

@media (max-width: 779px) {
  .detalle__plate-wrap { width: 100%; max-width: 300px; height: auto; padding: 1.5rem; }
  .detalle__plate { width: 100%; max-width: 208px; }
}

/* Los filtros inactivos no parecían botones —fondo y borde transparentes— y
   el contador del activo estaba a 3,09:1 por una opacidad del 70 %. */
.filter-pill {
  background: var(--surface);
  border: 2px solid var(--line);
  min-height: 44px;
}

.filter-pill:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-7);
}

.filter-pill[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: none;
}

.filter-pill small {
  opacity: 1;
  font-weight: 700;
  margin-left: 0.35rem;
  color: var(--body-color);
}

.filter-pill[aria-pressed="true"] small { color: #fff; }


/* ==========================================================================
   Guardas del escalado de raíz
   --------------------------------------------------------------------------
   Escalar la raíz mueve también los rellenos y huecos en rem, así que los
   suelos de los clamp y las rejillas necesitan margen. Todo esto se comprobó
   a 390 px con texto «enorme» + lectura fácil.
   ========================================================================== */
h1, h2, h3 { overflow-wrap: break-word; }

.hero h1       { font-size: clamp(2rem,   1.2rem  + 4.2vw, 4rem); }
.page-head h1  { font-size: clamp(1.8rem, 1.15rem + 3.4vw, 3.4rem); }
.section-title { font-size: clamp(1.6rem, 1.15rem + 2.4vw, 2.6rem); }

.hero h1, .page-head h1                      { line-height: var(--lh-display); }
.section-title, .closing-cta h2, .band h2    { line-height: var(--lh-titulo); }
.lead                                        { line-height: var(--lh-lead); }

/* Con la fuente legible los títulos se quedaban en 1,2, que es justo lo
   contrario de lo que pide quien la activa. */
html[data-fuente="legible"] h1,
html[data-fuente="legible"] h2,
html[data-fuente="legible"] h3,
html[data-fuente="legible"] h4 { line-height: 1.4; }

/* Una columna 1fr nunca baja de su min-content: con el texto ampliado las
   casillas se salían de la hoja blanca. */
.hoja-tablero[data-columnas="3"] .hoja-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hoja-tablero[data-columnas="4"] .hoja-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hoja-tablero[data-columnas="5"] .hoja-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 620px) {
  .hoja-tablero[data-columnas="4"] .hoja-grid,
  .hoja-tablero[data-columnas="5"] .hoja-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* La palabra rotativa del hero lleva white-space:nowrap y no puede envolver. */
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(1.75rem, 7.2vw, 2.5rem); }
  .word-rotate { max-width: 100%; }
}

/* ==========================================================================
   Medida de línea
   --------------------------------------------------------------------------
   No existía ningún tope por defecto: el único de todo el archivo se aplicaba
   solo si la persona activaba «lectura fácil». En modo normal, a 1140 px un
   párrafo llegaba a unos 110 caracteres por línea, casi el doble de lo
   cómodo. Ahora hay uno solo para todos.
   ========================================================================== */
.container > p,
.container > ul,
.container > ol,
.lead,
.page-head .lead,
.section-head .lead,
.faq-item__respuesta p,
.nota-honesta,
.pictoetlas p,
.comparativa__caja p { max-width: var(--medida); }

html[data-fuente="legible"] p { max-width: var(--medida); }

/* Los <p> que en realidad son barras de botones quedan fuera del tope. */
.hero__actions,
.pictoetlas__acciones,
.tablero__controls { max-width: none; }