/*
Theme Name: Atelma
Theme URI: https://atelma.es
Description: Tema hijo de Astra para ATELMA — Asociación de personas con Trastorno Específico del Lenguaje de Madrid.
Author: ATELMA
Version: 1.1.3
Template: astra
Tags: child-theme, accessibility-ready, custom-header, custom-menu
Text Domain: atelma
*/

/* ===========================================================
   ATELMA — Tokens de diseño
   Fuente de verdad: handoff/atelma.css
   =========================================================== */


:root {
  /* Marca */
  --navy: #18466a;
  --navy-700: #143b59;
  --navy-800: #0f2e45;
  --navy-900: #0b2436;
  --sky: #9dc9e3;
  --sky-400: #bcdcee;
  --sky-200: #d8ebf6;
  --sky-100: #eaf4fa;
  --sky-50: #f4f9fc;

  /* Neutros */
  --ink: #15293a;
  --muted: #4c6378;
  --line: #dde7ef;
  --line-strong: #c4d4e0;
  --paper: #ffffff;
  --paper-2: #f7fbfd;
  --focus: #0b66c2;

  /* Radios */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --radius: 26px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(15, 46, 69, .06), 0 2px 8px rgba(15, 46, 69, .05);
  --shadow-md: 0 6px 22px rgba(15, 46, 69, .10);
  --shadow-lg: 0 18px 50px rgba(15, 46, 69, .16);

  /* Accesibilidad: escala de texto */
  --fs-scale: 1;

  /* Layout */
  --maxw: 1200px;

  /* Tipografía */
  --font-head: "Mulish", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Escala de texto accesible: al cambiar --fs-scale todos los rem escalan */
  font-size: calc(18px * var(--fs-scale));
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }
/* a:visited también aquí: sin esto, CUALQUIER enlace sin color propio
   (el caso por defecto) se ve morado en cuanto se visita una vez — el
   morado de :visited del navegador (a:visited, especificidad más alta
   que una clase suelta) le gana a un simple "color:X" del componente. */
a, a:visited { color: var(--navy); }

/* Astra (tema padre) trae su propia "a:hover, a:focus{color:...}" con un
   morado/magenta de su paleta que no usamos en ningún sitio — sin esto,
   CUALQUIER enlace sin su propio color de :hover se pone de ese color al
   pasar el ratón por encima (pasa incluso sin haber visitado el enlace
   antes: es un problema de :hover, no de :visited). Un componente con su
   propio color de hover (más específico) sigue funcionando con normalidad. */
a:hover, a:focus { color: var(--navy); }

/* Red de seguridad anti-desbordamiento horizontal en móvil:
   evita que la página entera "empuje" hacia los lados.
   OJO: overflow-x:hidden a la vez en html Y en body rompe el
   position:sticky del header en cuanto se hace scroll más allá de
   cierto punto (el navegador activa overflow-y:auto en los dos, y el
   header deja de mantenerse pegado arriba salvo justo al principio de
   la página) — por eso va solo en html, dejando body con overflow
   normal para que siga siendo el html/viewport el único que hace de
   contenedor de scroll. */
html { max-width: 100%; overflow-x: hidden; }
/* Astra (el tema padre) trae su propio "body{overflow-x:hidden}" — hay
   que anularlo explícitamente aquí, si no volvemos al mismo problema
   aunque esta regla del tema hijo ya no lo declare. */
body { max-width: 100%; overflow-x: visible; }

/* Los hijos de cualquier rejilla ("__grid"/"-grid") deben poder encoger
   por debajo de su contenido — si no, un texto o etiqueta larga dentro
   fuerza a toda la columna a desbordarse en pantallas estrechas. */
[class*="grid"] > * {
  min-width: 0;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Alto contraste ---------- */
.hc {
  --navy: #00264d;
  --navy-700: #001a33;
  --navy-800: #001226;
  --navy-900: #000d1a;
  --sky: #1f6fb0;
  --sky-400: #bcdcee;
  --sky-200: #dceaf5;
  --sky-100: #eef5fb;
  --sky-50: #f6fafd;
  --ink: #000000;
  --muted: #26415a;
  --line: #7d96aa;
  --line-strong: #5a7388;
  --paper: #ffffff;
  --paper-2: #ffffff;
}
.hc a { text-decoration: underline; }
.hc .btn--primary { box-shadow: none; }
.underline-links a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Saltar al contenido ---------- */
.skip-link {
  position: fixed; left: 16px; top: -200px; z-index: 2000;
  background: var(--navy); color: #fff; padding: 12px 18px;
  border-radius: 10px; font-family: var(--font-head); font-weight: 800;
  transition: top .18s ease; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ---------- Contenedor ---------- */
.atelma-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 28px;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-head); font-weight: 800;
  font-size: 1rem; line-height: 1; text-decoration: none;
  padding: .92em 1.5em; border-radius: 999px; border: 2px solid transparent;
  white-space: nowrap; cursor: pointer;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* :visited se anula explícitamente en todos — sin esto, un botón-enlace
   ya visitado se pinta con el morado por defecto del navegador en vez
   de su color real (más específico que un simple .btn--x{color}). */
.btn--primary, .btn--primary:visited { background: var(--navy); color: #fff; box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--navy-800); color: #fff; }

.btn--ghost, .btn--ghost:visited { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--sky-100); border-color: var(--sky); color: var(--navy); }

.btn--light, .btn--light:visited { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--sky-100); color: var(--navy); }

.btn--outline-light, .btn--outline-light:visited { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn--outline-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.btn--sky, .btn--sky:visited { background: var(--navy); color: #fff; box-shadow: var(--shadow-md); }
.btn--sky:hover { background: var(--navy-800); color: #fff; }

/* ---------- Eyebrow ---------- */
.eyebrow {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78em;
  color: var(--navy);
}

/* ---------- Placeholder imágenes ---------- */
.ph {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  background:
    repeating-linear-gradient(135deg, rgba(24, 70, 106, .05) 0 12px, rgba(24, 70, 106, .10) 12px 24px),
    var(--sky-100);
  border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--navy); min-height: 120px;
}
.ph span {
  font-family: "Atkinson Hyperlegible", monospace; font-size: .8rem; letter-spacing: .02em;
  background: rgba(255, 255, 255, .82); padding: .4em .8em; border-radius: 999px;
  border: 1px dashed var(--line-strong); color: var(--muted); text-align: center;
}

/* ---------- Barra de accesibilidad ---------- */
.a11y {
  position: fixed; right: 18px; bottom: 18px; z-index: 1500;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  /* Base fija: la barra de accesibilidad no escala con --fs-scale */
  font-size: 16px;
}

/* Con el menú móvil abierto se solapaba con el CTA "Hazte socio" del
   final del menú — se oculta mientras tanto, vuelve a aparecer al cerrar. */
body.nav-open .a11y {
  display: none;
}
.a11y__toggle {
  width: 52px !important;
  height: 52px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 2px solid #fff !important;
  background: var(--navy) !important;
  color: #fff !important;
  cursor: pointer;
  display: grid !important;
  place-items: center;
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
  line-height: 1;
}
.a11y__toggle svg { width: 26px; height: 26px; }
.a11y__panel {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: 16px; width: 248px;
  display: flex; flex-direction: column; gap: 12px;
}
.a11y__panel[hidden] { display: none; }
/* em en lugar de rem: relativo a los 16px fijos de .a11y */
.a11y__panel h4 { font-size: .95em; margin: 0; color: var(--navy); }
.a11y__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.a11y__row > span { font-size: .92em; color: var(--muted); font-family: var(--font-head); font-weight: 700; }
.a11y__steppers { display: flex; gap: 6px; }
.a11y__btn {
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px;
  border: 1.5px solid var(--line-strong); background: #fff; color: var(--navy);
  font-family: var(--font-head); font-weight: 800; cursor: pointer; font-size: 1em;
}
.a11y__btn[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.a11y__btn:hover { background: var(--sky-100); }
.a11y__btn[aria-pressed="true"]:hover { background: var(--navy-800); }

/* ---------- Sellos / confianza ---------- */
.seal {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; background: #fff;
}
.seal__mark {
  width: 54px; height: 54px; border-radius: 12px; background: var(--sky-100);
  display: grid; place-items: center; color: var(--navy); flex: none;
}
.seal__mark svg { width: 30px; height: 30px; }
.seal strong { font-family: var(--font-head); display: block; font-size: .98rem; color: var(--navy); }
.seal span { font-size: .84rem; color: var(--muted); }

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

/* ---------- Quick-access cards (usados también en otras páginas) ---------- */
.qa-card {
  display: flex; flex-direction: column; gap: .55rem;
  text-decoration: none; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 22px 20px; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.qa-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--sky); }
.qa-card__icon {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--sky-100); color: var(--navy); margin-bottom: .2rem;
}
.qa-card__icon svg { width: 24px; height: 24px; }
.qa-card h3 { font-size: 1.12rem; }
.qa-card p { font-size: .92rem; color: var(--muted); line-height: 1.45; }
.qa-card__more {
  margin-top: auto; font-family: var(--font-head); font-weight: 800;
  font-size: .9rem; color: var(--navy); display: inline-flex; align-items: center;
  gap: .4em; padding-top: .4rem;
}
.qa-card__more svg { width: 1em; height: 1em; transition: transform .14s ease; }
.qa-card:hover .qa-card__more svg { transform: translateX(3px); }

/* ---------- Responsive base ---------- */
@media (max-width: 900px) {
  html { font-size: calc(17px * var(--fs-scale)); }
  .atelma-container { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}