/* ==========================================================================
   Baygar · web temporal
   Dirección: "ficha técnica" — retícula editorial, filetes finos, grafito sobre blanco cálido,
   rojo corporativo como señal (no como decoración).

   Colores extraídos de los recursos originales:
   - #1D1E19 tinta del logotipo · #7B868C gris del símbolo · #E34320 rojo de baygar.css y de las bandas
   Contrastes verificados (WCAG 2.2):
   - tinta/papel 15,4:1 · grafito/papel 8,7:1
   - rojo #E34320/papel 3,8:1 → solo acentos, bordes y texto grande (≥ 24 px)
   - rojo-texto #8F2612/papel 7,9:1 (AAA) → enlaces y texto rojo pequeño
   - blanco sobre rojo-boton #B8321A 6,0:1 → botón principal
   - gris-texto #4F524B/papel 7,3:1 (AAA)
   - pie oscuro: papel/tinta 15,4:1 · títulos #BDB9B0/tinta 9,4:1
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.v25.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  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: "Archivo";
  src: url("../fonts/archivo-latin-ext.v25.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  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;
}

:root {
  /* Color */
  --papel: #f7f5f1;
  --papel-2: #edeae4;
  --blanco: #ffffff;
  --tinta: #1d1e19;
  --grafito: #45473f;
  --gris-texto: #4f524b;
  --gris-marca: #7b868c;
  --filete: #d6d2ca;
  --filete-fuerte: #b9b4aa;
  --rojo: #e34320;
  --rojo-texto: #8f2612;   /* texto pequeño: 7,1–8,6:1 (AAA) */
  --rojo-boton: #b8321a;   /* fondo del botón: blanco encima 6,0:1 */
  --ok: #1f6b3a;
  --ok-fondo: #e7f2ea;
  --error-fondo: #fbeae5;

  /* Tipografía */
  --fuente: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --t-0: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);   /* 14–15 */
  --t-1: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);      /* 16–17 */
  --t-2: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);   /* 18–21 */
  --t-3: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);     /* 22–30 */
  --t-4: clamp(1.75rem, 1.35rem + 1.9vw, 3rem);         /* 28–48 */
  --t-5: clamp(2.125rem, 1.25rem + 3.2vw, 4rem);        /* 34–64 */
  --t-cifra: clamp(2.5rem, 1.9rem + 2.8vw, 4.25rem);

  /* Espacio y retícula */
  --ancho: 76rem;
  --margen: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --hueco: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --seccion: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --radio: 2px;
  --transicion: 160ms cubic-bezier(0.2, 0, 0, 1);
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  --alto-cabecera: 4.75rem;
  scroll-padding-top: calc(var(--alto-cabecera) + 1rem);   /* la cabecera fija no tapa el destino de un ancla */
  scrollbar-gutter: stable;                                   /* sin salto lateral entre páginas con y sin scroll */
}
@media (max-width: 47.99em) { html { --alto-cabecera: 4rem; } }
::selection { background: var(--rojo-boton); color: var(--blanco); }
a, summary, button { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @view-transition { navigation: auto; }   /* fundido nativo al cambiar de idioma o ir a las páginas legales */
}
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--t-1);
  font-stretch: 100%;
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.08; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--rojo-texto); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--tinta); text-decoration-thickness: 2px; }
address { font-style: normal; }
strong { font-weight: 650; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.92em; }

:focus-visible {
  outline: 3px solid var(--rojo-texto);
  outline-offset: 3px;
  border-radius: var(--radio);
}
main:focus { outline: none; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: var(--margen); top: -4rem; z-index: 10;
  background: var(--tinta); color: var(--blanco);
  padding: 0.75rem 1rem; font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 0.75rem; color: var(--blanco); }

.envoltura {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}
.envoltura--estrecha { max-width: calc(46rem + 2 * var(--margen)); }

/* --- Botones ------------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.875rem;
  padding: 0.65rem 1.5rem;
  border: 1.5px solid var(--rojo-boton);
  border-radius: 999px;   /* píldora: más ligera que el rectángulo */
  background: var(--rojo-boton);
  color: var(--blanco);
  font: inherit; font-weight: 600; font-stretch: 104%; letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion), transform var(--transicion);
}
.boton:hover { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); text-decoration: none; }
.boton:active { transform: scale(0.98); transition-duration: 100ms; }   /* respuesta al pulsar: se hunde un 2 % */
.boton--secundario { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.boton--secundario:hover { background: var(--tinta); color: var(--blanco); }
.boton--pequeno { min-height: 2.5rem; padding: 0.4rem 1.15rem; font-size: var(--t-0); }

/* Acción secundaria como enlace con flecha fina, no como segundo botón */
.enlace-flecha {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.875rem;
  font-weight: 600; color: var(--tinta); text-decoration: none;
  transition: gap var(--transicion), color var(--transicion);
}
.enlace-flecha::after {
  content: ""; width: 0.4rem; height: 0.4rem; margin-top: 0.05rem;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg);
}
.enlace-flecha:hover { gap: 0.7rem; color: var(--rojo-texto); }
.boton[aria-busy="true"] { cursor: progress; opacity: 0.85; }

/* --- Cabecera ------------------------------------------------------------ */
.cabecera {
  background: var(--blanco);
  border-bottom: 1px solid var(--filete);
  position: sticky; top: 0; z-index: 40;   /* fija arriba: Contacto siempre a mano */
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecera {
    background: rgb(255 255 255 / 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
}
.cabecera::before {   /* banda roja: el gesto de las bandas de la web original */
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--rojo);
}
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4.75rem; padding-top: 4px;
}
.cabecera__marca { display: block; flex: none; }
.cabecera__marca .logo { display: block; width: 150px; height: auto; aspect-ratio: 1809 / 589; overflow: visible; }
.cabecera__marca:focus-visible { outline-offset: 6px; }
.cabecera__nav ul { list-style: none; display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 2rem); }
.cabecera__nav a:not(.boton) {
  color: var(--tinta); text-decoration: none; font-weight: 550; font-size: var(--t-1);
  display: inline-flex; align-items: center; min-height: 2.75rem;
  background: linear-gradient(var(--rojo), var(--rojo)) no-repeat left 75% / 0 2px;
  transition: background-size var(--transicion);
}
.cabecera__nav a:not(.boton):hover { background-size: 100% 2px; }

.cabecera__fila { position: relative; }

.cabecera__separador { flex: none; width: 1px; height: 1.5rem; background: var(--filete-fuerte); }

/* Idioma: «ES ⌄» compacto que despliega los tres idiomas */
.idiomas { position: relative; flex: none; }
.idiomas > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.25rem;
  font-size: var(--t-0); font-weight: 600; letter-spacing: 0.04em; color: var(--tinta);
}
.idiomas > summary::-webkit-details-marker { display: none; }
.idiomas > summary::after {
  content: ""; width: 0.38rem; height: 0.38rem; margin-top: -0.18rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--transicion);
}
.idiomas[open] > summary::after { transform: translateY(0.18rem) rotate(-135deg); }
.idiomas ul {
  list-style: none; position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 30;
  min-width: 11rem; padding: 0.35rem;
  background: var(--blanco); border: 1px solid var(--filete); border-radius: var(--radio);
  box-shadow: 0 12px 32px rgba(29, 30, 25, 0.12);
}
.idiomas a {
  display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0 0.75rem;
  border-radius: var(--radio); color: var(--tinta); text-decoration: none;
}
.idiomas a:hover { background: var(--papel); }
.idiomas__codigo { min-width: 1.4rem; font-size: var(--t-0); font-weight: 600; letter-spacing: 0.04em; color: var(--gris-texto); }
.idiomas a[aria-current="true"] { font-weight: 650; }
.idiomas a[aria-current="true"] .idiomas__codigo { color: var(--rojo-texto); }

/* Menú móvil: solo el icono de tres rayas, que pasa a aspa al abrir */
.menu-movil { display: none; }
.menu-movil > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-right: -0.6rem;
  color: var(--tinta); border-radius: var(--radio);
}
.menu-movil > summary::-webkit-details-marker { display: none; }
.menu-movil__icono { position: relative; display: block; width: 1.375rem; height: 0.875rem; }
.menu-movil__icono::before, .menu-movil__icono::after, .menu-movil__icono > span {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 1px;
  transition: transform var(--transicion), top var(--transicion), opacity var(--transicion);
}
.menu-movil__icono > span { top: calc(50% - 0.75px); }
.menu-movil[open] .menu-movil__icono > span { opacity: 0; }
.menu-movil__icono::before { top: 0; }
.menu-movil__icono::after { top: calc(100% - 1.5px); }
.menu-movil[open] .menu-movil__icono::before { top: calc(50% - 0.75px); transform: rotate(45deg); }
.menu-movil[open] .menu-movil__icono::after { top: calc(50% - 0.75px); transform: rotate(-45deg); }
.menu-movil__panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  max-height: calc(100dvh - var(--alto-cabecera)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--blanco); border-bottom: 1px solid var(--filete);
  box-shadow: 0 16px 32px rgba(29, 30, 25, 0.08);
  padding: 0.25rem var(--margen) 1.5rem;
}
.menu-movil__enlaces { list-style: none; }
.menu-movil__enlaces a {
  display: flex; align-items: center; min-height: 3.5rem;
  border-bottom: 1px solid var(--filete);
  font-size: var(--t-3); font-weight: 600; letter-spacing: -0.01em; color: var(--tinta); text-decoration: none;
}

@media (max-width: 47.99em) {
  .cabecera__fila { min-height: 4rem; }
  .cabecera__contacto { min-height: 2.25rem; padding: 0.3rem 0.95rem; font-size: 0.875rem; }
  .cabecera__contacto { position: relative; }
  .cabecera__contacto::after { content: ""; position: absolute; inset: -0.25rem -0.25rem; }   /* zona táctil de 44 px sin agrandar el botón */
  .cabecera__marca .logo { width: 128px; }
  .cabecera__fila { gap: 0.5rem; }
  .cabecera__nav { display: none; }
  .menu-movil { display: block; margin-left: auto; }
}
@media (min-width: 48em) {
  .cabecera__marca .logo { width: 210px; }
  .cabecera__nav { margin-left: auto; }
}
@media (max-width: 23.4em) {   /* menos de 375 px: todo cabe en la barra, Contacto incluido */
  .cabecera__fila { gap: 0.375rem; }
  .cabecera__marca .logo { width: 100px; }
  .cabecera__contacto { padding-inline: 0.75rem; }
  .idiomas > summary { min-width: 2.5rem; }
}

/* --- Portada ------------------------------------------------------------- */
.portada { padding-block: clamp(2.5rem, 1rem + 6vw, 6.5rem) 0; }
.portada__rejilla {
  display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 72em) {
  .portada__rejilla { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}
.portada h1 {
  font-size: var(--t-5);
  font-weight: 750;
  font-stretch: 106%;
  letter-spacing: -0.028em;
  line-height: 1.02;
  max-width: 21ch;
}
@media (max-width: 40em) {
  /* En móvil, balance iguala líneas y desperdicia ancho: pretty solo evita viudas */
  .portada h1 { text-wrap: pretty; max-width: none; font-size: clamp(1.875rem, 1.2rem + 3vw, 2.25rem); }
  .entradilla { font-size: var(--t-1); }
  .acciones .boton { min-height: 2.75rem; padding: 0.5rem 1.35rem; font-size: 0.9375rem; }
}
.entradilla {
  font-size: var(--t-2); color: var(--grafito); max-width: 38rem;
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; margin-top: 2rem; }

/* Símbolo de la marca en la portada */
.portada { overflow: hidden; }
.portada__texto { position: relative; isolation: isolate; }
.portada__simbolo {
  position: absolute; z-index: -1; pointer-events: none;
  top: -0.5rem; right: calc(-1 * var(--margen) - 4.5rem); width: 13rem;   /* móvil y tableta: marca de agua cortada */
  color: var(--papel-2);
}
.portada__simbolo svg { display: block; width: 100%; height: auto; }
.portada__plataforma { display: none; height: 3px; margin-top: 1.25rem; background: var(--rojo); transform-origin: left; }
@media (min-width: 75em) {
  /* Escritorio: el símbolo ocupa el hueco a la derecha del titular, en gris tonal, sobre su línea roja */
  .portada__simbolo { top: 50%; right: calc(var(--margen) + 2rem); width: clamp(13rem, 17vw, 16.5rem); translate: 0 -55%; color: var(--filete); }
  .portada__plataforma { display: block; }
}

.nota-renovacion {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: 34rem;
  padding-top: 1rem; border-top: 1px solid var(--filete);
  font-size: 0.875rem; color: var(--gris-texto); line-height: 1.55;
}
.nota-renovacion strong { color: var(--tinta); }


/* --- Secciones ----------------------------------------------------------- */
.seccion { padding-block: var(--seccion); }
.seccion--tono { background: var(--papel-2); }
.seccion__cabecera {
  display: grid; gap: 0.75rem 2rem;
  grid-template-columns: 1fr;
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}
@media (min-width: 60em) {
  .seccion__cabecera { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .seccion__intro { grid-column: 2; padding-top: 1.6rem; }
}
.seccion__titulo { display: grid; gap: 0.75rem; }
.seccion__cabecera h2 { font-size: var(--t-4); font-stretch: 106%; letter-spacing: -0.02em; }
.seccion__intro { font-size: var(--t-2); color: var(--grafito); max-width: 44rem; }

.nota-pequena { font-size: var(--t-0); color: var(--gris-texto); margin-top: 1.5rem; }

/* --- Desplegables (sectores, delegaciones y formulario) -------------------
   <details>/<summary> nativos: funcionan sin JavaScript, con teclado y con lector de pantalla. */
.desplegables { border-top: 1px solid var(--tinta); }
.desplegable { border-bottom: 1px solid var(--filete-fuerte); scroll-margin-top: 1.5rem; }
.desplegable > summary {
  list-style: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 1rem;
  min-height: 4.5rem; padding: 1.1rem 0.25rem;
  cursor: pointer;
  transition: background-color var(--transicion);
}
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary:hover { background: color-mix(in srgb, var(--papel-2) 60%, transparent); }
.desplegable > summary:focus-visible { outline-offset: -3px; }
/* Signo + que pasa a − al abrir */
.desplegable > summary::after {
  content: ""; width: 1.5rem; height: 1.5rem; flex: none;
  background:
    linear-gradient(var(--rojo-texto), var(--rojo-texto)) center / 100% 2px no-repeat,
    linear-gradient(var(--rojo-texto), var(--rojo-texto)) center / 2px 100% no-repeat;
  transition: transform var(--transicion);
}
.desplegable[open] > summary::after {
  background: linear-gradient(var(--rojo-texto), var(--rojo-texto)) center / 100% 2px no-repeat;
  transform: rotate(180deg);
}
.desplegable__cabeza { display: grid; gap: 0.2rem; grid-column: 1; }
.desplegable__cabeza h3 { font-size: var(--t-3); font-stretch: 108%; }
.desplegable__resumen { color: var(--grafito); font-size: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); line-height: 1.45; }
.desplegable[open] > summary h3 { color: var(--tinta); }
.desplegable__cuerpo { padding: 0.25rem 0.25rem 2rem; }
@media (min-width: 48em) {
  .delegacion .desplegable__cuerpo, .desplegable--formulario .desplegable__cuerpo { padding-left: 0.25rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .desplegable[open] > .desplegable__cuerpo, .desplegable[open] > .formulario-caja { animation: aparecer 180ms ease-out; }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.sector__texto { color: var(--grafito); max-width: 44rem; margin-bottom: 1rem; }
.sector__consulta { margin: 1.25rem 0 0; }
.familias {
  list-style: none;
  columns: 3 13rem; column-gap: 2rem;
  font-size: var(--t-0); color: var(--grafito);
}
.familias li {
  break-inside: avoid;
  padding: 0.35rem 0 0.35rem 1.1rem;
  position: relative;
  border-bottom: 1px dotted var(--filete);
}
.familias li::before {
  content: ""; position: absolute; left: 0; top: 0.95em;
  width: 0.45rem; height: 2px; background: var(--rojo);
}

/* --- Delegaciones: teléfonos siempre visibles; dirección, correo y fax plegados ---- */
.sedes { display: grid; gap: var(--hueco); grid-template-columns: 1fr; }
@media (min-width: 52em) { .sedes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sede {
  border-top: 2px solid var(--tinta); padding-top: 1.1rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  scroll-margin-top: 1.5rem;
}
.sede:target { border-top-color: var(--rojo); }
.sede h3 { font-size: var(--t-3); font-stretch: 108%; }
/* Mapa de delegaciones (IGN). Solo con JavaScript: sin él se ven las tres fichas en columnas, como siempre. */
.mapa { display: none; margin: 0; }
.sedes-mapa--activo { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: center; }
.sedes-mapa--activo .mapa { display: block; width: 100%; max-width: 24rem; justify-self: center; }
.mapa__lienzo { position: relative; }
.mapa__svg { display: block; width: 100%; height: auto; }
.mapa__tierra path {
  fill: var(--papel); stroke: var(--filete-fuerte); stroke-width: 0.8; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mapa__puntos { list-style: none; }
.mapa__punto { position: absolute; width: 0; height: 0; }
.mapa__punto a {
  position: absolute; left: 0; top: 0; translate: -1rem -50%;
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem;
  padding: 0 0.5rem 0 calc(1rem - 5px);
  color: var(--tinta); text-decoration: none; white-space: nowrap;
}
.mapa__marca {
  width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--rojo);
  box-shadow: 0 0 0 3px var(--papel-2);
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0, 0, 0.2, 1);
}
.mapa__nombre { font-size: 0.875rem; font-weight: 600; transition: color 300ms ease; }
.mapa__punto a[aria-current="true"] .mapa__marca {
  transform: scale(1.3);
  box-shadow: 0 0 0 3px var(--papel-2), 0 0 0 10px rgb(227 67 32 / 0.16);
}
.mapa__punto a[aria-current="true"] .mapa__nombre { color: var(--rojo-texto); }
.mapa__pie { display: grid; gap: 0.2rem; margin-top: 0.75rem; font-size: 0.875rem; color: var(--gris-texto); }
/* Las tres fichas en la misma celda: el panel mide lo que la más alta y nada salta al cambiar. Cambio «fade through»
   (desvanecer y aparecer, sin superponer textos): la que sale se desvanece en 90 ms y solo entonces aparece la nueva
   en 210 ms. Sin desenfoque ni desplazamiento: el usuario busca un teléfono, no una animación. visibility las saca
   del teclado y del lector de pantalla. */
.sedes-mapa--activo .sedes { grid-template-columns: 1fr; }
.sedes-mapa--activo .sede {
  grid-area: 1 / 1; align-self: start;
  transition: opacity 210ms cubic-bezier(0, 0, 0.2, 1) 90ms, visibility 0s linear 90ms;
}
.sedes-mapa--activo .sede:not(.sede--activa) {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 90ms cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 90ms;
}
@media (min-width: 52em) {
  /* Escritorio: mapa a la izquierda y la ficha elegida a la derecha, nunca más alta que el mapa */
  .sedes-mapa--activo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sedes-mapa--activo .mapa { justify-self: start; max-width: 28rem; }
}

/* Teléfonos como filas de ficha: tipo a la izquierda, número a la derecha; toda la fila se pulsa */
.sede__telefonos { list-style: none; border-top: 1px solid var(--filete); }
.sede__tel {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  min-height: 3rem; padding: 0.8rem 0;
  border-bottom: 1px solid var(--filete);
  color: var(--tinta); text-decoration: none;
}
.sede__tel-tipo { color: var(--gris-texto); }
.sede__tel-numero {
  font-size: var(--t-2); font-weight: 600; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
  background: linear-gradient(var(--rojo), var(--rojo)) no-repeat left 100% / 0 1.5px;
  transition: background-size var(--transicion);
}
.sede__tel:hover .sede__tel-numero { background-size: 100% 1.5px; }
.sede__tel:focus-visible { outline-offset: 2px; }
.sede__mas { border-top: 1px solid var(--filete-fuerte); }
.sede__mas > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3rem; font-weight: 600; font-size: var(--t-0);
}
.sede__mas > summary::-webkit-details-marker { display: none; }
.sede__mas > summary::after { content: "+"; color: var(--rojo-texto); font-size: 1.25rem; font-weight: 400; line-height: 1; }
.sede__mas[open] > summary::after { content: "−"; }
.sede__detalle { display: grid; gap: 0.75rem; padding-bottom: 1rem; font-size: var(--t-0); }
.sede__correo { display: grid; gap: 0.1rem; margin: 0; }
.sede__correo a { overflow-wrap: anywhere; width: fit-content; }
.delegacion__direccion { color: var(--grafito); line-height: 1.5; }
.linea { border-top: 1px solid var(--filete); padding-top: 1rem; display: grid; gap: 0.15rem; }
.linea__tipo {
  font-size: var(--t-0); font-weight: 650;
  color: var(--rojo-texto); margin: 0 0 0.15rem;
}
.linea__tel {
  font-size: var(--t-3); font-weight: 700; font-stretch: 104%;
  color: var(--tinta); text-decoration: none;
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.005em;
  display: inline-flex; align-items: center; min-height: 2.75rem;
  width: fit-content;
  background: linear-gradient(var(--rojo), var(--rojo)) no-repeat left 88% / 0 2px;
  transition: background-size var(--transicion);
}
.linea__tel:hover { background-size: 100% 2px; color: var(--tinta); }
.linea__email {
  display: inline-flex; align-items: center; min-height: 2.75rem; width: fit-content;
  overflow-wrap: anywhere; color: var(--rojo-texto);
}
.linea__fax { font-size: var(--t-0); color: var(--gris-texto); margin: 0; }
.delegacion__mapa { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; }
.delegacion__mapa-titulo { color: var(--gris-texto); }
.enlace-externo {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 2.75rem;
  font-weight: 600; color: var(--tinta);
}
.enlace-externo::after {
  content: "↗"; color: var(--rojo-texto); font-weight: 400;
  transition: transform var(--transicion);
}
.enlace-externo:hover::after { transform: translate(2px, -2px); }

@media (max-width: 52em) {
  /* En móvil el teléfono es un bloque fácil de pulsar */
  .linea__tel {
    width: 100%; justify-content: space-between;
    border: 1px solid var(--filete-fuerte); border-radius: var(--radio);
    padding: 0.5rem 0.9rem; min-height: 3.25rem;
    background: var(--papel);
  }
  .linea__tel::after { content: attr(data-llamar); content: attr(data-llamar) / ""; font-size: var(--t-0); font-weight: 650; color: var(--rojo-texto); }
  .linea__tel:hover { background: var(--papel-2); }
}

/* --- Contacto ------------------------------------------------------------ */
.desplegable--formulario { border-top: 1px solid var(--tinta); }
.desplegable--formulario > summary { grid-template-columns: minmax(0, 1fr) auto; }
.desplegable--formulario .desplegable__cabeza { grid-column: 1; }
.privacidad-breve {
  font-size: var(--t-0); color: var(--grafito);
  border-top: 1px solid var(--filete);
  padding-top: 1rem; margin-top: 2rem;
  line-height: 1.55;
}
.privacidad-breve__titulo { font-weight: 650; color: var(--tinta); margin-bottom: 0.4rem; }

.formulario-caja {
  background: var(--blanco);
  border: 1px solid var(--filete);
  margin-bottom: 2rem;
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
}
.formulario__rejilla { display: grid; gap: 1.25rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 40em) {
  .formulario__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo--ancho { grid-column: 1 / -1; }
}
.campo { display: grid; gap: 0.4rem; align-content: start; margin: 0; padding: 0; border: 0; min-width: 0; }
.campo label, .campo legend { font-weight: 600; font-size: var(--t-0); letter-spacing: 0.01em; padding: 0; }
.campo legend { margin-bottom: 0.4rem; }
.formulario__nota { font-size: var(--t-0); color: var(--gris-texto); margin-bottom: 1.25rem; }
.campo__opc { font-weight: 400; color: var(--gris-texto); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo select, .campo textarea {
  width: 100%;
  font: inherit; font-size: max(1rem, var(--t-1)); color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--gris-marca);
  border-bottom: 2px solid var(--tinta);
  border-radius: var(--radio);
  padding: 0.7rem 0.8rem;
  min-height: 3rem;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea { min-height: 9rem; max-height: 28rem; resize: vertical; line-height: 1.5; field-sizing: content; }
.campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%), linear-gradient(135deg, var(--tinta) 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.8rem center;
  background-size: 0.36rem 0.36rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--tinta); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 3px solid var(--rojo-texto); outline-offset: 1px; border-color: var(--tinta);
}
.campo [aria-invalid="true"] { border-color: var(--rojo-texto); border-bottom-color: var(--rojo-texto); background: var(--error-fondo); }
.campo__ayuda { font-size: var(--t-0); color: var(--gris-texto); margin: 0; }
.campo__error {
  font-size: var(--t-0); color: var(--rojo-texto); font-weight: 600; margin: 0;
  padding-left: 0.75rem; border-left: 3px solid var(--rojo-texto);
}
.campo__error[hidden] { display: none; }


.formulario [data-enviar] { min-inline-size: 12rem; }
.formulario__pie { margin-top: 1.75rem; display: grid; gap: 0.75rem; justify-items: start; }
@media (max-width: 30em) { .formulario__pie .boton { width: 100%; } }
.formulario__pie .nota-pequena { margin: 0; }

/* Campo trampa: fuera de la vista, del foco y de los lectores de pantalla */
.trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.estado {
  border-left: 4px solid var(--tinta);
  padding: 1rem 1.25rem; margin-bottom: 1.5rem;
  background: var(--papel);
}
.estado[hidden] { display: none; }
.estado:focus { outline: none; }
.estado:focus-visible { outline: 3px solid var(--rojo-texto); outline-offset: 2px; }
.estado__titulo { font-weight: 700; margin-bottom: 0.25rem; }
.estado--ok { border-left-color: var(--ok); background: var(--ok-fondo); }
.estado--ok .estado__titulo { color: var(--ok); }
.estado--error { border-left-color: var(--rojo-texto); background: var(--error-fondo); }
.estado--error .estado__titulo { color: var(--rojo-texto); }
.estado ul { margin: 0.5rem 0 0 1.1rem; font-size: var(--t-0); }

/* --- Página 404: «la página no está en esta estantería» --------------------- */
.error404__ilustracion { display: block; width: 100%; max-width: 40rem; height: auto; margin: 0 0 clamp(1.5rem, 1rem + 2vw, 3rem); }
@media (prefers-reduced-motion: no-preference) {
  /* El cero baja una sola vez hasta su sitio; si la animación no corre, ya está colocado */
  .error404__cero { animation: colocar 900ms cubic-bezier(0.16, 1, 0.3, 1) 250ms backwards; }
}
@keyframes colocar { from { transform: translateY(-34px); } to { transform: none; } }
.error404__rejilla { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 60em) { .error404__rejilla { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; } }
.error404 h1 { font-size: var(--t-4); font-stretch: 106%; letter-spacing: -0.02em; max-width: 20ch; }
.error404 .entradilla { margin-top: 1.25rem; }
.salidas { list-style: none; margin-top: 2rem; border-top: 1px solid var(--tinta); }
.salidas li { border-bottom: 1px solid var(--filete-fuerte); }
.salidas a {
  display: grid; gap: 0.15rem;
  padding: 1rem 0.25rem; min-height: 3.5rem; text-decoration: none; color: var(--tinta);
  transition: background-color var(--transicion);
}
.salidas a:hover { background: var(--papel-2); }
.salidas__titulo { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.salidas li:first-child .salidas__titulo { color: var(--rojo-texto); }
.salidas__titulo { font-size: var(--t-2); font-weight: 700; font-stretch: 106%; }
.salidas__texto { font-size: var(--t-0); color: var(--grafito); }
.error404__telefonos { background: var(--blanco); border-left: 4px solid var(--rojo); padding: 1.25rem 1.5rem; }
.error404__titulo { font-weight: 700; margin-bottom: 0.75rem; }
.error404__telefonos ul { list-style: none; display: grid; gap: 0.75rem; }
.error404__telefonos li { display: grid; }
.error404__sede { font-size: var(--t-0); font-weight: 650; color: var(--rojo-texto); }
.error404__telefonos .linea__tel { font-size: var(--t-2); }

/* --- Textos legales ------------------------------------------------------ */
.texto-legal h1 { font-size: var(--t-4); font-stretch: 106%; margin-bottom: 0.75rem; }
.texto-legal h2 { font-size: var(--t-2); font-stretch: 104%; margin: 2.25rem 0 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--filete); }
.texto-legal h3 { font-size: var(--t-1); margin: 1.5rem 0 0.5rem; }
.texto-legal ul { padding-left: 1.2rem; margin-bottom: 1em; }
.texto-legal li { margin-bottom: 0.4rem; }
.texto-legal__traducion { font-size: var(--t-0); color: var(--gris-texto); border-left: 3px solid var(--filete-fuerte); padding-left: 0.75rem; }
.texto-legal__fecha { color: var(--gris-texto); font-size: var(--t-0); }
.migas { font-size: var(--t-0); color: var(--gris-texto); margin-bottom: 1.5rem; }
.migas a { color: var(--grafito); }
.ficha-datos { display: grid; grid-template-columns: 1fr; margin: 1rem 0; border-top: 1px solid var(--filete); }
.ficha-datos dt { font-weight: 650; font-size: var(--t-0); color: var(--gris-texto); padding-top: 0.75rem; }
.ficha-datos dd { margin: 0; padding-bottom: 0.75rem; border-bottom: 1px solid var(--filete); }
@media (min-width: 40em) {
  .ficha-datos { grid-template-columns: 12rem 1fr; }
  .ficha-datos dt, .ficha-datos dd { padding-block: 0.75rem; border-bottom: 1px solid var(--filete); }
}
.pendiente {
  display: inline-block; margin-left: 0.35rem;
  font-size: var(--t-0); font-weight: 600; line-height: 1.3;
  color: #7a4a00; background: #fff4d6; border: 1px solid #e0b44c;
  padding: 0.05rem 0.45rem; border-radius: var(--radio);
}
.aviso-revision { border-left: 4px solid #e0b44c; background: #fff4d6; color: #5a3700; padding: 0.75rem 1rem; font-size: var(--t-0); }
.tabla-desplazable { overflow-x: auto; margin: 1rem 0; }
.tabla-desplazable:focus-visible { outline-offset: 2px; }
table { border-collapse: collapse; width: 100%; min-width: 36rem; font-size: var(--t-0); background: var(--blanco); }
th, td { text-align: left; vertical-align: top; padding: 0.75rem; border-bottom: 1px solid var(--filete); }
th { font-weight: 650; border-bottom: 2px solid var(--tinta); }

/* --- Pie ----------------------------------------------------------------- */
.pie { background: var(--tinta); color: #e9e6df; font-size: var(--t-0); padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.pie a { color: var(--papel); text-decoration: none; transition: color var(--transicion); }
.pie a:hover { color: var(--blanco); text-decoration: underline; text-decoration-thickness: 1px; }
.pie :focus-visible { outline-color: var(--blanco); }
.pie__rejilla { display: grid; gap: 2rem; grid-template-columns: 1fr; padding-bottom: 2.5rem; }
@media (min-width: 48em) { .pie__rejilla { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); } }
.pie__nombre { font-size: var(--t-2); font-weight: 700; color: var(--blanco); font-stretch: 108%; letter-spacing: 0.01em; }
.pie__titulo { font-weight: 650; color: #bdb9b0; margin-bottom: 0.5rem; }
.pie__columna ul { list-style: none; display: grid; gap: 0.25rem; }
.pie__columna a { display: inline-flex; min-height: 2.5rem; align-items: center; }
.pie__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  border-top: 1px solid #3a3b35; padding-block: 1.25rem 1.5rem; color: #bdb9b0;
}

/* --- Movimiento ---------------------------------------------------------- */
/* Entrada del símbolo de la portada (marca/guia-movimiento.md: solidez y precisión, sin rebote). Se traza la línea
   roja, como la plataforma de una carretilla, y la «G» sube desde ella. Unos 1,5 s, una sola vez. «backwards»: si la
   animación no corre, todo está en su sitio. La clase la pone logo-entrada.js solo en la portada al llegar desde fuera. */
@media (prefers-reduced-motion: no-preference) {
  .logo-entrada .portada__plataforma { animation: plataforma 650ms cubic-bezier(0.16, 1, 0.3, 1) 200ms backwards; }
  .logo-entrada .portada__simbolo svg { animation: simbolo-sube 1000ms cubic-bezier(0.65, 0, 0.35, 1) 550ms backwards; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-entrada .portada__simbolo { animation: logo-fundido 400ms ease-out backwards; }   /* atenuar, no apagar */
}
@keyframes plataforma   { from { transform: scaleX(0); } to { transform: none; } }
@keyframes simbolo-sube { from { clip-path: inset(100% 0 0 0); transform: translateY(8%); } to { clip-path: inset(0); transform: none; } }
@keyframes logo-fundido { from { opacity: 0; } to { opacity: 1; } }

/* Aparición de bloques al hacer scroll: una sola vez, 18 px y curva de frenado. Sin JS no se oculta nada. */
.revelar { opacity: 0; transform: translateY(18px); }
.revelar.revelado {
  opacity: 1; transform: none;
  transition: opacity 700ms ease-out, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .boton:active { transform: none; }
  /* Fichas del mapa: solo fundido, sin desplazamiento */
  /* El cambio de fichas del mapa ya es solo opacidad: se respeta también con movimiento reducido */
  .sedes-mapa--activo .sede { transition: opacity 210ms ease-out 90ms, visibility 0s linear 90ms !important; }
  .sedes-mapa--activo .sede:not(.sede--activa) { transition: opacity 90ms ease-in, visibility 0s linear 90ms !important; }
  .revelar { transform: none; }
  .revelar.revelado { transition: opacity 600ms ease-out !important; }   /* solo fundido: atenuar, no apagar */
}
@media (prefers-reduced-motion: reduce) {
  /* Atenuar, no apagar: sin desplazamientos ni giros, pero con un fundido breve al abrir un desplegable */
  *, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .desplegable[open] > .desplegable__cuerpo, .desplegable[open] > .formulario-caja { animation: fundido 160ms ease-out; }
}
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }

/* --- Alto contraste del sistema ------------------------------------------ */
@media (forced-colors: active) {
  .cabecera::before, .familias li::before { forced-color-adjust: none; background: CanvasText; }
  .boton { border: 2px solid ButtonText; }
}

/* --- Impresión ----------------------------------------------------------- */
@media print {
  .cabecera__nav, .cabecera__separador, .idiomas, .cabecera__contacto, .menu-movil, .acciones, .desplegable--formulario, .saltar, .delegacion__mapa, .mapa { display: none !important; }
  .sedes-mapa--activo .sedes { display: block; }
  .sedes-mapa--activo .sede { opacity: 1 !important; transform: none !important; filter: none !important; visibility: visible !important; margin-bottom: 1.5rem; }
  body { background: #fff; }
  .cabecera { position: static; }
  .revelar { opacity: 1 !important; transform: none !important; }
  .seccion { padding-block: 1.5rem; }
  a[href^="tel:"]::after, a[href^="mailto:"]::after { content: none; }
}