/* MAEK · Hoja de estilos de la web
   Sistema descrito en DESIGN.md. Orden: tipografías · tokens · base · cabecera · componentes · páginas · pie. */

/* ============ Tipografías (alojadas en la web, licencia SIL OFL 1.1) ============ */
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/cormorant-garamond-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: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url("../fonts/cormorant-garamond-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: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-sans-3-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: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-sans-3-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: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-sans-3-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Noto Naskh Arabic"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/noto-naskh-arabic-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
/* Respaldo con métricas ajustadas: el texto no salta cuando llega la fuente */
@font-face { font-family: "Cormorant respaldo"; src: local("Georgia"), local("Times New Roman"); size-adjust: 86%; ascent-override: 107%; descent-override: 33%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans respaldo"; src: local("Arial"), local("Helvetica"); size-adjust: 93%; ascent-override: 110%; descent-override: 43%; line-gap-override: 0%; }

/* ============ Tokens · día ============ */
:root {
  color-scheme: light;
  --papel: #f8f5ef;
  --papel-2: #efe9de;
  --superficie: #fffdf8;
  --tinta: #1b2532;
  --tinta-2: #4d5866;
  --titulo: #12263f;
  --bronce: #a8834a;
  --bronce-texto: #7a5a28;
  --linea: #ddd5c6;
  --linea-fuerte: #b9ad98;
  --foco: #7a5a28;
  --seleccion: rgba(168, 131, 74, .26);
  --marca-agua: #e9e1d3;
  --boton: #12263f;
  --boton-tinta: #f8f5ef;
  --boton-hover: #1f3d61;
  --boton-filete: #a8834a;
  /* Banda de marca (azul) */
  --banda: #12263f;
  --banda-titulo: #f3eee4;
  --banda-tinta: #e2dccf;
  --banda-tinta-2: #b4bfcc;
  --banda-bronce: #d4b47e;
  --banda-linea: rgba(226, 220, 207, .17);
  --banda-marca: #182f4c;
  --banda-boton: #f3eee4;
  --banda-boton-tinta: #12263f;
  --banda-boton-hover: #d4b47e;
  --pie: #0d1b2c;
  /* Marcas de dato pendiente */
  --pend-fondo: #fff0a0;
  --pend-tinta: #4f3f00;
  --pend-borde: #b89a00;
  /* Mapa del Estrecho */
  --mapa-mar: rgba(44, 82, 129, .07);
  --mapa-trama: rgba(44, 82, 129, .30);
  --mapa-costa: #5d7594;
  --mapa-rotulo: #5b6878;
  --mapa-ruta: #7d8da1;
  --mapa-nodo: #3d5170;
  --mapa-texto: #12263f;
  --mapa-texto-2: #3d4a5c;
  --mapa-oficina: #a8834a;
  --mapa-pulso: rgba(168, 131, 74, .30);

  /* Tipografía */
  --serif: "Cormorant Garamond", "Cormorant respaldo", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Source Sans respaldo", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --t-xs: .8125rem;
  --t-s: .9375rem;
  --t-m: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --t-l: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem);
  --t-xl: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  --t-2xl: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --t-3xl: clamp(2.5rem, 1.75rem + 3.2vw, 4.75rem);
  --t-4xl: clamp(2.75rem, 1.6rem + 4.6vw, 6rem);
  --t-cifra: clamp(3rem, 2rem + 3.5vw, 5.5rem);

  /* Retícula */
  --ancho: 82rem;
  --margen: max(16px, env(safe-area-inset-left), env(safe-area-inset-right), min(4vw, 4rem));
  --cols: 4;
  --medianil: clamp(1rem, 2.2vw, 2.5rem);
  --col: calc((100% - 11 * var(--medianil)) / 12);           /* una columna de 12, medida sobre el contenedor */
  --desplazamiento: calc(3 * (var(--col) + var(--medianil))); /* inicio de la columna 4 */
  --alto-cabecera: clamp(64px, 4.75rem, 88px);
  --curva: cubic-bezier(.2, .7, .2, 1);

  /* Espaciado: una sola escala; la estructura la da el aire, no las líneas */
  --e-xs: .5rem;
  --e-s: 1rem;
  --e-m: 1.5rem;
  --e-l: 2.5rem;
  --e-xl: clamp(3rem, 2.25rem + 2.5vw, 5rem);
  --e-seccion: clamp(4rem, 2.75rem + 4.5vw, 7.5rem);
  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'%3E%3Cpath d='M1 6h27M22.5 1.5 28 6l-5.5 4.5' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (min-width: 640px) { :root { --cols: 8; } }
@media (min-width: 1024px) { :root { --cols: 12; } }
@media (min-width: 1900px) { :root { --ancho: 90rem; --alto-cabecera: clamp(64px, 4.75rem, 92px); } }

/* ============ Tokens · noche (la noche del Estrecho, no el día invertido) ============ */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --papel: #0e1621;
    --papel-2: #131d2a;
    --superficie: #172334;
    --tinta: #e4ded2;
    --tinta-2: #a3adba;
    --titulo: #f0ebe1;
    --bronce: #c3a06a;
    --bronce-texto: #d5b783;
    --linea: #233042;
    --linea-fuerte: #3a4a60;
    --foco: #d5b783;
    --seleccion: rgba(195, 160, 106, .35);
    --marca-agua: #141e2c;
    --boton: #d2b27c;
    --boton-tinta: #0e1621;
    --boton-hover: #e0c492;
    --boton-filete: #9b7944;
    --banda: #15283f;
    --banda-titulo: #f0ebe1;
    --banda-tinta: #dcd6ca;
    --banda-tinta-2: #b0bccb;
    --banda-bronce: #d6b783;
    --banda-linea: rgba(220, 214, 202, .15);
    --banda-marca: #1b314c;
    --banda-boton: #d2b27c;
    --banda-boton-tinta: #0e1621;
    --banda-boton-hover: #e0c492;
    --pie: #09101a;
    --pend-fondo: #3b3210;
    --pend-tinta: #f6e28c;
    --pend-borde: #a08a2c;
    --mapa-mar: rgba(90, 128, 176, .07);
    --mapa-trama: rgba(110, 145, 190, .26);
    --mapa-costa: #5a7396;
    --mapa-rotulo: #8796a9;
    --mapa-ruta: #6f8299;
    --mapa-nodo: #b5c2d3;
    --mapa-texto: #f0ebe1;
    --mapa-texto-2: #b9c4d2;
    --mapa-oficina: #d2b07a;
    --mapa-pulso: rgba(210, 176, 122, .26);
  }
}
/* Sin JavaScript: se sigue la preferencia del sistema */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --papel: #0e1621; --papel-2: #131d2a; --superficie: #172334; --tinta: #e4ded2; --tinta-2: #a3adba; --titulo: #f0ebe1;
    --bronce: #c3a06a; --bronce-texto: #d5b783; --linea: #233042; --linea-fuerte: #3a4a60; --foco: #d5b783;
    --seleccion: rgba(195, 160, 106, .35); --marca-agua: #141e2c; --boton: #d2b27c; --boton-tinta: #0e1621;
    --boton-hover: #e0c492; --boton-filete: #9b7944; --banda: #15283f; --banda-titulo: #f0ebe1; --banda-tinta: #dcd6ca;
    --banda-tinta-2: #b0bccb; --banda-bronce: #d6b783; --banda-linea: rgba(220, 214, 202, .15); --banda-marca: #1b314c;
    --banda-boton: #d2b27c; --banda-boton-tinta: #0e1621; --banda-boton-hover: #e0c492; --pie: #09101a;
    --pend-fondo: #3b3210; --pend-tinta: #f6e28c; --pend-borde: #a08a2c; --mapa-mar: rgba(90, 128, 176, .07);
    --mapa-trama: rgba(110, 145, 190, .26); --mapa-costa: #5a7396; --mapa-rotulo: #8796a9; --mapa-ruta: #6f8299;
    --mapa-nodo: #b5c2d3; --mapa-texto: #f0ebe1; --mapa-texto-2: #b9c4d2; --mapa-oficina: #d2b07a; --mapa-pulso: rgba(210, 176, 122, .26);
  }
  :root:not([data-theme]) .marca__logo--dia { display: none; }
  :root:not([data-theme]) .marca__logo--noche { display: block; }
}

/* Árabe: una sola familia (Noto Naskh Arabic) para titulares y texto, con tamaños ajustados a su ojo mayor */
[dir="rtl"] {
  --serif: "Noto Naskh Arabic", "Cormorant Garamond", "Segoe UI", Tahoma, serif;
  --sans: "Noto Naskh Arabic", "Source Sans 3", "Segoe UI", Tahoma, sans-serif;
  --t-m: clamp(1.125rem, 1.05rem + .25vw, 1.25rem);
  --t-l: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
  --t-xl: clamp(1.2rem, 1.1rem + .4vw, 1.45rem);
  --t-2xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --t-3xl: clamp(1.9rem, 1.4rem + 2.2vw, 3.3rem);
  --t-4xl: clamp(2rem, 1.35rem + 3vw, 4rem);
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + 1rem);
  background: var(--papel); -webkit-tap-highlight-color: rgba(168, 131, 74, .18);
}
/* La letra raíz crece con la pantalla: móviles pequeños, portátiles, 24", 27" QHD y 4K */
@media (max-width: 359px) { html { font-size: 93.75%; } }
@media (min-width: 1600px) { html { font-size: 106.25%; } }
@media (min-width: 1900px) { html { font-size: 112.5%; } }
@media (min-width: 2400px) { html { font-size: 131.25%; } }
@media (min-width: 3200px) { html { font-size: 162.5%; } }
@media (min-width: 3200px) and (max-height: 1600px) { html { font-size: 131.25%; } } /* ultrapanorámico */

body {
  margin: 0; min-height: 100vh; overflow-wrap: break-word;
  font-family: var(--sans); font-size: var(--t-m); line-height: 1.6; color: var(--tinta); background: var(--papel);
  font-kerning: normal; font-variant-numeric: oldstyle-nums proportional-nums; text-rendering: optimizeLegibility;
}
:root[data-theme="dark"] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
[dir="rtl"] body { line-height: 1.9; font-variant-numeric: normal; }
img, svg { max-width: 100%; height: auto; }
bdi { unicode-bidi: isolate; }
::selection { background: var(--seleccion); color: var(--tinta); }

h1, h2, h3 {
  font-family: var(--serif); color: var(--titulo); font-weight: 500; line-height: 1.08; margin: 0 0 .5em;
  text-wrap: balance; font-variant-numeric: oldstyle-nums;
}
h1 { font-size: var(--t-3xl); line-height: 1.02; letter-spacing: -.012em; }
h2 { font-size: var(--t-2xl); line-height: 1.06; letter-spacing: -.008em; }
h3 { font-size: var(--t-xl); font-weight: 600; line-height: 1.18; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-weight: 700; letter-spacing: 0; line-height: 1.45; }
p { margin: 0 0 1em; text-wrap: pretty; }
strong { font-weight: 600; }
small { font-size: var(--t-s); }

/* Enlaces: en el texto corrido, subrayado fino y apagado que se aviva al pasar. En navegación y botones, ninguno. */
a {
  color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .24em;
  text-decoration-color: var(--linea-fuerte); text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
  transition: color .18s ease, text-decoration-color .18s ease;
}
a:hover { color: var(--bronce-texto); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 1px; }
:focus:not(:focus-visible) { outline: none; }

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.cifra-tabular, .tel { font-variant-numeric: lining-nums tabular-nums; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.saltar {
  position: absolute; inset-inline-start: var(--margen); top: -100px; z-index: 100;
  background: var(--boton); color: var(--boton-tinta); padding: .75rem 1.25rem; text-decoration: none; font-weight: 600;
}
.saltar:focus { top: .75rem; }

/* Dato pendiente (solo en borrador; desaparece al publicar) */
mark.pendiente {
  background: var(--pend-fondo); color: var(--pend-tinta); padding: .05em .35em; border-radius: 2px;
  outline: 1px dashed var(--pend-borde); outline-offset: -1px; font-style: normal; font-family: var(--sans);
  font-variant: normal; letter-spacing: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Rótulo de sección: una línea discreta en redonda, sin versalitas */
.etiqueta {
  margin: 0 0 var(--e-s); font-family: var(--sans); font-size: var(--t-s); font-weight: 500; line-height: 1.4;
  color: var(--bronce-texto);
}
.etiqueta--cursiva { font-family: var(--serif); font-style: italic; font-size: var(--t-l); }
[dir="rtl"] .etiqueta { font-size: 1rem; }
[dir="rtl"] .etiqueta--cursiva { font-style: normal; font-size: var(--t-l); }

/* Flecha propia: se invierte en árabe */
.flecha { flex: none; width: 30px; height: 12px; transition: transform .22s var(--curva); }
[dir="rtl"] .flecha { transform: scaleX(-1); }
a:hover .flecha, a:focus-visible .flecha { transform: translateX(4px); }
[dir="rtl"] a:hover .flecha, [dir="rtl"] a:focus-visible .flecha { transform: scaleX(-1) translateX(4px); }

/* Monograma «Ma» del logotipo, tono sobre tono (pie y 404) */
.marca-agua {
  display: block; pointer-events: none; aspect-ratio: 977 / 804; background: currentColor;
  -webkit-mask: url("../img/monograma.svg") no-repeat center / contain; mask: url("../img/monograma.svg") no-repeat center / contain;
}

/* ============ Cabecera ============ */
.cabecera {
  position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px);
  background: var(--papel); background: color-mix(in srgb, var(--papel) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px);
}
.cabecera__fila { display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 2rem); min-height: var(--alto-cabecera); }
.marca {
  display: inline-flex; align-items: center; min-height: 44px; margin-inline-end: auto;
  color: var(--titulo); text-decoration: none;
}
.marca__logo { display: block; width: auto; height: clamp(30px, 2.25rem, 44px); }
.marca__logo--noche { display: none; }
@media screen {
  :root[data-theme="dark"] .marca__logo--dia { display: none; }
  :root[data-theme="dark"] .marca__logo--noche { display: block; opacity: .95; }
}
/* El lema ya está en el nombre accesible del enlace y en el pie: la cabecera solo lleva el logotipo */
.marca__texto { display: none; }

.menu { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.5rem); }
.menu__lista { display: flex; gap: clamp(0rem, .5vw, .75rem); margin: 0; padding: 0; list-style: none; }
.menu__lista a {
  display: flex; align-items: center; min-height: 44px; padding: 0 .55rem;
  color: var(--tinta-2); text-decoration: none; font-weight: 500; font-size: 1rem; white-space: nowrap;
}
.menu__lista a:hover { color: var(--titulo); }
.menu__lista a[aria-current="page"] { color: var(--titulo); font-weight: 600; }

.menu__utilidades { display: flex; align-items: center; gap: .25rem; }
.idiomas { position: relative; }
.idiomas summary {
  display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .6rem; cursor: pointer; list-style: none;
  font-size: var(--t-s); font-weight: 600; color: var(--titulo); border-radius: 2px;
}
.idiomas summary::-webkit-details-marker { display: none; }
.idiomas summary::after {
  content: ""; width: .38rem; height: .38rem; margin-top: -.2rem;
  border-inline-end: 1.25px solid currentColor; border-bottom: 1.25px solid currentColor;
  transform: rotate(45deg); transition: transform .2s var(--curva);
}
.idiomas[open] summary::after { transform: translateY(.2rem) rotate(225deg); }
.idiomas summary:hover { color: var(--bronce-texto); }
/* Panel flotante: lo separa del fondo su propio tono y una sombra muy difusa, no un marco */
.idiomas__lista {
  position: absolute; inset-inline-end: 0; top: calc(100% + .5rem); z-index: 70; min-width: 11rem;
  margin: 0; padding: .4rem; list-style: none; background: var(--superficie);
  box-shadow: 0 18px 44px -18px rgba(13, 27, 44, .32);
}
:root[data-theme="dark"] .idiomas__lista { box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .6); }
.idiomas__lista a {
  display: flex; align-items: center; min-height: 44px; padding: 0 .85rem; color: var(--tinta-2); text-decoration: none; font-size: 1rem;
  direction: inherit; /* cada nombre sigue la alineación de la página, sin romper la columna */
}
.idiomas__lista a:hover { background: var(--papel-2); color: var(--titulo); }
.idiomas__lista a[aria-current="true"] { color: var(--titulo); font-weight: 600; }
.idiomas__lista a[lang="ar"] { font-family: "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic", sans-serif; }
[dir="rtl"] .idiomas__lista a[lang="ar"] { font-family: var(--sans); }

/* Iniciar sesión (portal de GestoPro): el único botón de la cabecera */
.acceso-clientes {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.15rem;
  margin-inline-end: .5rem; border-radius: 2px; white-space: nowrap;
  background: var(--boton); color: var(--boton-tinta); font-size: var(--t-s); font-weight: 600; text-decoration: none;
  transition: background-color .2s var(--curva);
}
.acceso-clientes:hover { background: var(--boton-hover); color: var(--boton-tinta); }
[dir="rtl"] .acceso-clientes { font-size: 1rem; }
.pie__acceso { margin-top: var(--e-m); }
.pie__acceso a { font-weight: 600; }

/* Interruptor de tema: disco partido que gira */
.tema {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-width: 44px; min-height: 44px;
  padding: 0; border: 0; border-radius: 2px; background: none; color: var(--titulo); cursor: pointer; font: inherit;
}
.tema__disco {
  position: relative; flex: none; width: 18px; height: 18px; border: 1.25px solid currentColor; border-radius: 50%;
  overflow: hidden; transition: transform .5s cubic-bezier(.6, 0, .2, 1);
}
.tema__disco::after { content: ""; position: absolute; inset: 0 0 0 50%; background: currentColor; }
:root[data-theme="dark"] .tema__disco { transform: rotate(180deg); }
@media (hover: hover) { .tema:hover { color: var(--bronce-texto); } }
.tema__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.menu-boton {
  display: none; align-items: center; gap: .65rem; min-height: 44px; padding: 0 .5rem; margin-inline-end: -.5rem;
  border: 0; border-radius: 2px; background: none; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--titulo);
}
.menu-boton__icono { position: relative; width: 18px; height: 10px; }
.menu-boton__icono::before, .menu-boton__icono::after {
  content: ""; position: absolute; inset-inline: 0; height: 1.5px; background: currentColor;
  transition: transform .25s var(--curva), top .25s var(--curva), inset .25s var(--curva);
}
.menu-boton__icono::before { top: 0; }
.menu-boton__icono::after { top: calc(100% - 1.5px); inset-inline-start: 6px; }
.menu-boton[aria-expanded="true"] .menu-boton__icono::before { top: 4.25px; transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__icono::after { top: 4.25px; inset-inline-start: 0; transform: rotate(-45deg); }

/* Menú móvil: una hoja de papel a pantalla completa, sin filetes; ordenan el tamaño y el aire */
@media (max-width: 1180px) {
  .menu-boton { display: inline-flex; }
  .menu {
    display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    height: calc(100vh - var(--alto-cabecera) - env(safe-area-inset-top, 0px));
    height: calc(100dvh - var(--alto-cabecera) - env(safe-area-inset-top, 0px));
    padding: var(--e-m) var(--margen) calc(var(--e-l) + env(safe-area-inset-bottom, 0px)); background: var(--papel);
  }
  .menu.abierto { display: flex; overflow-y: auto; overscroll-behavior: contain; }
  .menu__lista { flex-direction: column; gap: .15rem; }
  .menu__lista a {
    min-height: 52px; padding: 0; font-family: var(--serif); font-size: 1.6rem; font-weight: 500; color: var(--tinta-2);
  }
  [dir="rtl"] .menu__lista a { font-size: 1.35rem; }
  .menu__lista a[aria-current="page"] { color: var(--titulo); font-weight: 600; }
  .menu__utilidades { flex-direction: column; align-items: stretch; gap: .25rem; margin-top: var(--e-l); }
  .idiomas summary { min-height: 48px; padding: 0; font-size: 1rem; }
  .idiomas__lista {
    position: static; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; min-width: 0;
    padding: 0 0 .5rem; box-shadow: none; background: transparent;
  }
  :root[data-theme="dark"] .idiomas__lista { box-shadow: none; }
  .idiomas__lista a { padding-inline: 0; }
  .tema {
    justify-content: space-between; flex-direction: row-reverse; width: 100%; min-height: 48px;
    border-radius: 0; font-size: 1rem; font-weight: 600;
  }
  .tema__texto { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .acceso-clientes { order: 3; min-height: 52px; margin: var(--e-m) 0 0; font-size: 1rem; }
}

/* ============ Botones: uno principal macizo y uno secundario de texto con flecha ============ */
.botones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2.25rem; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 48px; padding: .75rem 1.6rem;
  border: 0; border-radius: 2px; font-family: var(--sans); font-size: 1rem; font-weight: 600;
  line-height: 1.2; letter-spacing: .005em; text-decoration: none; text-align: center; cursor: pointer;
  font-variant-numeric: lining-nums; transition: background-color .2s ease, color .2s ease;
}
[dir="rtl"] .boton { letter-spacing: 0; font-size: 1.0625rem; }
.boton--principal { background: var(--boton); color: var(--boton-tinta); }
.boton--principal:hover { background: var(--boton-hover); color: var(--boton-tinta); }
.boton--enlace, .boton--contorno, .boton--secundario {
  justify-content: flex-start; padding-inline: 0; border-radius: 0; background: none; color: var(--titulo);
}
.boton--enlace:hover, .boton--contorno:hover, .boton--secundario:hover { color: var(--bronce-texto); }
/* La flecha de los secundarios que no la llevan en el marcado */
.boton--contorno::after, .boton--secundario::after {
  content: ""; flex: none; width: 30px; height: 12px; background: currentColor; transition: transform .22s var(--curva);
  -webkit-mask: var(--flecha) no-repeat center / contain; mask: var(--flecha) no-repeat center / contain;
}
[dir="rtl"] .boton--contorno::after, [dir="rtl"] .boton--secundario::after { transform: scaleX(-1); }
.boton--contorno:hover::after, .boton--secundario:hover::after,
.boton--contorno:focus-visible::after, .boton--secundario:focus-visible::after { transform: translateX(4px); }
[dir="rtl"] .boton--contorno:hover::after, [dir="rtl"] .boton--secundario:hover::after,
[dir="rtl"] .boton--contorno:focus-visible::after, [dir="rtl"] .boton--secundario:focus-visible::after { transform: scaleX(-1) translateX(4px); }

/* Bandas de marca: los componentes heredan los tokens claros sobre azul */
.banda, .caja-contacto {
  --titulo: var(--banda-titulo); --tinta: var(--banda-tinta); --tinta-2: var(--banda-tinta-2);
  --bronce-texto: var(--banda-bronce); --linea: var(--banda-linea); --linea-fuerte: rgba(226, 220, 207, .4);
  --foco: var(--banda-bronce); --boton: var(--banda-boton); --boton-tinta: var(--banda-boton-tinta);
  --boton-hover: var(--banda-boton-hover); --papel: var(--banda);
  background: var(--banda); color: var(--banda-tinta);
}

/* ============ Portada ============ */
.portada { position: relative; padding-block: clamp(2.5rem, 1.5rem + 4.5vw, 6.5rem) var(--e-xl); }
.portada__rejilla {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--medianil);
  row-gap: var(--e-xl); align-items: center;
}
.portada__texto, .portada__mapa { grid-column: 1 / -1; min-width: 0; }
/* El único filete de la web: el arranque del membrete, junto a las tres ciudades */
.portada__lugar {
  display: flex; align-items: center; gap: .9rem; margin: 0 0 clamp(1.25rem, 1rem + 1vw, 2rem);
  font-size: var(--t-s); font-weight: 600; font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--bronce-texto);
}
.portada__lugar::before { content: ""; flex: none; width: 2.5rem; height: 1px; background: var(--bronce); }
[dir="rtl"] .portada__lugar { letter-spacing: 0; font-size: 1rem; }
.portada__titulo { font-size: var(--t-4xl); line-height: .98; letter-spacing: -.02em; margin-bottom: .42em; }
[dir="rtl"] .portada__titulo { line-height: 1.35; letter-spacing: 0; }
.portada__entradilla { max-width: 33em; margin-bottom: var(--e-l); font-size: var(--t-l); line-height: 1.55; color: var(--tinta-2); }
.portada__mapa { margin: 0; }
@media (min-width: 640px) and (max-width: 1023px) {
  .portada__texto { grid-column: 1 / span 7; }
  .portada__mapa { grid-column: 2 / -1; max-width: 38rem; justify-self: end; width: 100%; }
}
@media (min-width: 1024px) {
  .portada__texto { grid-column: 1 / span 7; }
  .portada__mapa { grid-column: 8 / -1; padding-inline-start: var(--medianil); }
}
/* Mapa del Estrecho: mar en un velo de color, costas finas, oficinas macizas y provincias 2030 huecas */
.mapa-red { display: block; width: 100%; height: auto; overflow: visible; direction: ltr; }
/* El mar y las costas se desvanecen hacia los lados: el mapa no tiene caja */
.mapa__mar, .mapa__anillo { display: none; }
.mapa__velo { stop-color: var(--mapa-mar); }
.mapa__costa-velo { stop-color: var(--mapa-costa); stop-opacity: .6; }
.mapa__velo--borde { stop-opacity: 0; }
.mapa__costa { fill: none; stroke: var(--mapa-costa); stroke: url(#mapa-costa-velo); stroke-width: 1; }
.mapa__region text { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 3px; fill: var(--mapa-rotulo); }
[dir="rtl"] .mapa__region text { font-size: 13px; letter-spacing: 0; }
.mapa__red { fill: none; stroke: var(--mapa-oficina); stroke-width: 1.5; stroke-dasharray: 5 6; stroke-linecap: round; }
.mapa-red__rutas { fill: none; stroke: var(--mapa-ruta); stroke-width: 1.1; stroke-dasharray: 2 5; stroke-linecap: round; }
.mapa__nodo { fill: var(--papel); stroke: var(--mapa-nodo); stroke-width: 1.5; }
.mapa-red__nuevas text { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 19px; fill: var(--mapa-texto-2); }
.mapa__oficinas text { font-family: var(--serif); font-weight: 700; font-size: 21px; fill: var(--mapa-texto); }
[dir="rtl"] .mapa-red__nuevas text { font-style: normal; font-weight: 500; font-size: 15px; }
[dir="rtl"] .mapa__oficinas text { font-size: 16.5px; }
.mapa__oficina { fill: var(--mapa-oficina); }
.mapa-red__pulso { fill: var(--mapa-pulso); }
.mapa-red__rutas path, .mapa-red__nuevas g { opacity: 0; transition: opacity .9s ease; }
.mapa-red__nuevas g { transform-box: fill-box; transform-origin: center; transform: scale(.6); transition: opacity .9s ease, transform .9s var(--curva); }
.mapa-red__rutas path.visible { opacity: 1; }
.mapa-red__nuevas g.visible { opacity: 1; transform: scale(1); }
.mapa-red__pulso { transform-box: fill-box; transform-origin: center; animation: pulso 3.2s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { transform: scale(.85); opacity: .95; } 50% { transform: scale(1.3); opacity: .35; } }
.mapa-red__leyenda {
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: var(--e-m);
  font-size: var(--t-s); line-height: 1.4; color: var(--tinta-2);
}
.mapa-red__leyenda span { display: inline-flex; align-items: center; gap: .6rem; }
.punto { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.punto--actual { background: var(--mapa-oficina); }
.punto--nueva { background: var(--papel); border: 1.5px solid var(--mapa-nodo); }

/* Teléfonos de las oficinas: una línea tranquila bajo la portada */
.franja__fila { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: .25rem; column-gap: var(--medianil); }
.franja__dato { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 1rem; margin: 0; min-width: 0; }
.franja__ciudad { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--titulo); }
.franja__tel { font-size: 1rem; color: var(--tinta-2); letter-spacing: .02em; }
a.franja__tel { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
a.franja__tel:hover { color: var(--titulo); }
@media (min-width: 640px) { .franja__fila { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Cifras */
.cifras { padding-block: var(--e-xl) var(--e-s); }
.cifras__rejilla { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--medianil); row-gap: var(--e-l); }
.cifras__lista {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-l) var(--medianil); margin: 0;
}
.cifra { display: flex; flex-direction: column; min-width: 0; }
.cifra dt { order: 1; font-weight: 600; color: var(--titulo); line-height: 1.3; }
.cifra__num {
  order: 0; margin: 0 0 .6rem; font-family: var(--serif); font-size: var(--t-cifra); font-weight: 500; line-height: .85;
  color: var(--titulo); font-variant-numeric: oldstyle-nums proportional-nums; letter-spacing: -.01em;
}
.cifra__desc { order: 2; margin: .15rem 0 0; font-size: var(--t-s); line-height: 1.4; color: var(--tinta-2); }
.cifras__nota { grid-column: 1 / -1; margin: 0; font-size: var(--t-s); color: var(--tinta-2); }
@media (min-width: 640px) { .cifras__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .cifras__lista { grid-column: 4 / -1; grid-row: 1; }
  .cifras__nota { grid-column: 1 / span 3; grid-row: 1; align-self: end; padding-bottom: .2rem; }
}

/* ============ Secciones ============ */
.seccion { padding-block: var(--e-seccion); }
.seccion--papel { background: var(--papel-2); --papel: var(--papel-2); }
.seccion__pie { margin: var(--e-l) 0 0; }

.encabezado {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--medianil);
  margin-bottom: var(--e-xl);
}
.encabezado > * { grid-column: 1 / -1; }
.encabezado h2 { margin: 0; max-width: 22ch; }
.encabezado__intro { max-width: 34em; margin: var(--e-m) 0 0; font-size: var(--t-l); line-height: 1.55; color: var(--tinta-2); }
@media (min-width: 1024px) {
  .encabezado--margen .etiqueta { grid-column: 1 / span 3; grid-row: 1 / span 2; padding-top: .55rem; margin: 0; }
  .encabezado--margen h2 { grid-column: 4 / span 8; }
  .encabezado--margen .encabezado__intro { grid-column: 4 / span 6; }
  .encabezado--partido h2 { grid-column: 1 / span 6; align-self: end; }
  .encabezado--partido .encabezado__intro { grid-column: 8 / span 5; align-self: end; margin: 0; }
}

/* Índice de servicios: filas separadas por aire; al pasar, el título se calienta y la flecha avanza */
.indice {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-l) calc(2 * var(--medianil));
  margin: 0; padding: 0; list-style: none;
}
.indice > li { min-width: 0; }
.indice__enlace {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo mas" "resumen resumen";
  column-gap: 1.5rem; row-gap: .45rem; height: 100%; color: inherit; text-decoration: none;
}
.indice__enlace:hover { color: inherit; }
.indice__titulo { grid-area: titulo; margin: 0; font-size: clamp(1.5rem, 1.25rem + .9vw, 2.1rem); font-weight: 500; transition: color .2s ease; }
.indice__enlace:hover .indice__titulo { color: var(--bronce-texto); }
.indice__resumen { grid-area: resumen; max-width: 34em; margin: 0; font-size: 1rem; line-height: 1.5; color: var(--tinta-2); }
.indice__mas { position: relative; grid-area: mas; align-self: center; display: inline-flex; align-items: center; color: var(--tinta-2); }
.indice__enlace:hover .indice__mas { color: var(--bronce-texto); }
.indice__enlace:hover .flecha { transform: translateX(4px); }
[dir="rtl"] .indice__enlace:hover .flecha { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .indice__titulo { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
@media (min-width: 1024px) {
  .indice:not(.indice--completo) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--e-xl); }
  .indice--completo { row-gap: var(--e-xl); }
  .indice--completo .indice__enlace {
    grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: none; column-gap: var(--medianil); align-items: baseline;
  }
  .indice--completo .indice__titulo { grid-area: auto; grid-column: 1 / span 5; font-size: clamp(1.75rem, 1.2rem + 1.3vw, 2.6rem); }
  .indice--completo .indice__resumen { grid-area: auto; grid-column: 6 / span 5; }
  .indice--completo .indice__mas { grid-area: auto; grid-column: 11 / span 2; justify-self: end; }
}

/* Banda «Por qué MAEK» */
.diferencias { position: relative; overflow: hidden; }
.diferencias__rejilla { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--medianil); }
.diferencias__cabecera { grid-column: 1 / -1; position: relative; z-index: 1; margin-bottom: var(--e-xl); }
.diferencias__cabecera h2 { margin: 0; font-size: clamp(2.4rem, 1.6rem + 3vw, 4.5rem); line-height: 1; }
[dir="rtl"] .diferencias__cabecera h2 { font-size: var(--t-3xl); line-height: 1.35; }
.diferencias__lista { grid-column: 1 / -1; display: grid; row-gap: var(--e-l); position: relative; z-index: 1; }
.diferencia h3 { margin-bottom: .6rem; }
.diferencia p { max-width: 38em; margin: 0; color: var(--tinta-2); }
.diferencias__marca-agua { display: none; }
@media (min-width: 1024px) {
  .diferencias__cabecera { grid-column: 1 / span 4; grid-row: 1; align-self: start; position: sticky; top: calc(var(--alto-cabecera) + 3rem); }
  .diferencias__lista { grid-column: 6 / -1; grid-row: 1; row-gap: var(--e-xl); }
}

/* Pasos del método: el orden lo da una cifra en serifa, no una línea */
.pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; row-gap: var(--e-l); }
.pasos > li {
  counter-increment: paso; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: baseline; min-width: 0;
}
.pasos > li > * { grid-column: 2; }
.pasos > li::before {
  content: counter(paso); grid-column: 1; grid-row: 1; font-family: var(--serif); font-size: var(--t-xl); font-weight: 500;
  line-height: 1; color: var(--bronce-texto); font-variant-numeric: oldstyle-nums;
}
.pasos h3 { margin-bottom: .4rem; }
.pasos p { margin: 0; max-width: 40em; color: var(--tinta-2); }
.pasos--ruta { row-gap: var(--e-xl); }
.pasos--ruta > li { grid-template-columns: 3rem minmax(0, 1fr); }
.pasos--ruta h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.15rem); }
.pasos--ruta > li::before { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.15rem); }
@media (min-width: 1024px) {
  .pasos--ruta { margin-inline-start: calc(var(--desplazamiento) - 4.5rem); max-width: calc(7 * var(--col) + 6 * var(--medianil) + 4.5rem); }
  .pasos--ruta > li { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .pasos--compactos { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: calc(1.5 * var(--medianil)); }
  .pasos--compactos > li { display: block; }
  .pasos--compactos > li::before { display: block; margin-bottom: var(--e-s); }
}

/* Columnas de texto: separadas por el medianil */
.columnas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-l) calc(1.5 * var(--medianil)); }
.columna { min-width: 0; }
.columna h3 { margin-bottom: .55rem; }
.columna p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--tinta-2); }
@media (min-width: 640px) {
  .columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .columnas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .columnas--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============ Páginas interiores ============ */
.cabecera-pagina { padding-top: clamp(2.25rem, 1.5rem + 4vw, 6rem); }
.cabecera-pagina .contenedor {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--medianil);
}
.cabecera-pagina .contenedor > * { grid-column: 1 / -1; min-width: 0; }
.cabecera-pagina h1 { margin: 0 0 .45em; max-width: 20ch; }
.cabecera-pagina .contenedor > p:not(.migas) { max-width: 38em; margin: 0; font-size: var(--t-l); line-height: 1.55; color: var(--tinta-2); }
.migas {
  display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 clamp(1rem, .5rem + 2vw, 2.5rem);
  font-size: var(--t-s); color: var(--tinta-2);
}
[dir="rtl"] .migas { font-size: 1rem; }
.migas a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta-2); text-decoration: none; }
.migas a:hover { color: var(--titulo); }
.migas span[aria-hidden] { margin-inline: .6rem; color: var(--tinta-2); }
@media (min-width: 1024px) {
  .cabecera-pagina h1 { grid-column: 1 / span 10; }
  .cabecera-pagina .contenedor > p:not(.migas) { grid-column: 4 / span 7; }
  .cabecera-pagina--servicio .contenedor > p:not(.migas) { grid-column: 1 / span 7; }
}

/* Texto corrido */
.texto h2 { margin: 2em 0 .6em; font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.6rem); }
.texto h2:first-child, .texto .etiqueta + h2 { margin-top: 0; }
.texto h3 { margin: 1.6em 0 .5em; }
.texto > p, .texto li { max-width: 66ch; }
.texto ul:not([class]) { padding-inline-start: 1.15em; }
.texto ul:not([class]) li { margin-bottom: .45em; }
.texto ul:not([class]) li::marker { color: var(--bronce); }
.texto a { color: var(--titulo); font-weight: 500; }

/* Lista con punto de bronce (el mismo punto que las oficinas del mapa) */
.lista-check { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: .7rem; margin: 0 0 1.5em; padding: 0; list-style: none; }
.lista-check li { position: relative; padding-inline-start: 1.4rem; }
.lista-check li::before {
  content: ""; position: absolute; inset-inline-start: .15rem; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--bronce);
}
[dir="rtl"] .lista-check li::before { top: .85em; }
.lista-check--2 { column-gap: calc(1.5 * var(--medianil)); row-gap: .9rem; }
@media (min-width: 720px) { .lista-check--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Tarjetas de líneas de ayuda (subvenciones): solo tipografía y medianil */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--e-m) var(--medianil); }
.tarjeta h3 { margin: 0 0 .4rem; }
.tarjeta p { margin: 0; font-size: 1rem; color: var(--tinta-2); }

/* Quiénes somos: relato y ficha */
.relato { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--medianil); row-gap: var(--e-xl); align-items: start; }
.relato__texto, .relato__ficha { grid-column: 1 / -1; min-width: 0; }
.relato__texto h2 { max-width: 20ch; }
.ficha h3 { margin-bottom: var(--e-s); }
@media (min-width: 1024px) {
  .relato__texto { grid-column: 1 / span 7; }
  .relato__ficha { grid-column: 9 / -1; position: sticky; top: calc(var(--alto-cabecera) + 2rem); }
  .equipo .aviso, .oficinas-seccion .oficinas, .oficinas-seccion .seccion__pie, .nota-legal > * { margin-inline-start: var(--desplazamiento); }
}

/* Servicio */
.servicio { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--medianil); row-gap: var(--e-xl); align-items: start; }
.servicio__cuerpo, .servicio__lateral { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1024px) {
  .servicio__cuerpo { grid-column: 1 / span 7; }
  .servicio__lateral { grid-column: 9 / -1; position: sticky; top: calc(var(--alto-cabecera) + 2rem); }
}
.caja-contacto { padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.caja-contacto h3 { margin-bottom: .5rem; font-size: clamp(1.5rem, 1.3rem + .6vw, 1.85rem); }
.caja-contacto p { color: var(--tinta-2); font-size: 1rem; }
.caja-contacto__botones { display: grid; justify-items: start; gap: .5rem; margin-top: var(--e-m); }
.caja-contacto .boton--principal { width: 100%; }
.caja-otros { margin-top: var(--e-l); }
.caja-otros__titulo { margin: 0 0 .5rem; font-family: var(--sans); font-size: var(--t-s); font-weight: 600; color: var(--titulo); }
[dir="rtl"] .caja-otros__titulo { font-size: 1rem; font-weight: 700; }
.caja-otros ul { margin: 0; padding: 0; list-style: none; }
.caja-otros a {
  display: flex; align-items: center; min-height: 40px; padding-block: .3rem; color: var(--tinta-2);
  text-decoration: none; font-size: 1rem; line-height: 1.35;
}
.caja-otros a:hover { color: var(--titulo); }
.caja-otros a[aria-current="page"] { color: var(--titulo); font-weight: 600; }

.aviso { margin: 1.75em 0; max-width: 66ch; }

/* Preguntas: sin filetes; el signo «+» y el aire bastan para leerlas como lista */
details.pregunta summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; min-height: 44px; padding-block: .85rem;
  cursor: pointer; list-style: none; font-weight: 600; color: var(--titulo); transition: color .18s ease;
}
details.pregunta summary::-webkit-details-marker { display: none; }
details.pregunta summary::after {
  content: ""; flex: none; width: 13px; height: 13px; margin-top: .4em;
  background: linear-gradient(var(--bronce-texto), var(--bronce-texto)) center / 100% 1.5px no-repeat,
              linear-gradient(var(--bronce-texto), var(--bronce-texto)) center / 1.5px 100% no-repeat;
  transition: transform .3s var(--curva);
}
details.pregunta[open] summary::after { transform: rotate(45deg); }
details.pregunta summary:hover { color: var(--bronce-texto); }
details.pregunta p { max-width: 60ch; margin: 0 0 1.25rem; color: var(--tinta-2); }

/* Oficinas */
.oficinas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-l) var(--medianil); }
@media (min-width: 640px) { .oficinas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.oficina { min-width: 0; }
.oficina h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .65rem; margin-bottom: var(--e-s); }
.oficina h3 small { font-family: var(--sans); font-size: var(--t-s); font-weight: 500; color: var(--tinta-2); }
.ficha-datos { display: grid; gap: .9rem; margin: 0; }
.ficha-datos dt { font-size: var(--t-s); font-weight: 500; line-height: 1.3; color: var(--tinta-2); }
.ficha-datos dd { margin: 0; line-height: 1.45; }
a.tel { display: inline-flex; align-items: center; min-height: 44px; color: var(--titulo); font-weight: 600; text-decoration: none; }
a.tel:hover { color: var(--bronce-texto); }
.ficha-datos a.tel { min-height: 0; padding-block: .6rem; margin-block: -.6rem; }
.oficina__mapa { margin: 1rem 0 0; }

/* Contacto: canales */
.canales { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-xl) calc(1.5 * var(--medianil)); }
.canal { min-width: 0; }
.canal__titulo { margin-bottom: .6rem; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); }
.canal p { color: var(--tinta-2); max-width: 30em; }
.canal__dato { margin: 1.25rem 0 0; overflow-wrap: anywhere; font-size: 1.1875rem; }
.canal__dato a:not(.boton) { color: var(--titulo); font-weight: 600; }
.canal__dato a.tel { font-size: 1.375rem; }
@media (min-width: 1024px) {
  .canales--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .canales--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.seccion--nota { padding-block: var(--e-xl); }
.nota-legal__titulo { font-size: var(--t-xl); }
.nota-legal__texto { max-width: 70ch; font-size: var(--t-s); line-height: 1.65; color: var(--tinta-2); }
.nota-legal > * { max-width: 70ch; }

/* «Cómo trabajamos»: dos textos */
.dos-textos { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--medianil); row-gap: var(--e-xl); }
.dos-textos > .texto { grid-column: 1 / -1; min-width: 0; }
.dos-textos h2 { font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem); }
@media (min-width: 1024px) {
  .dos-textos > .texto:first-child { grid-column: 1 / span 6; }
  .dos-textos > .texto:last-child { grid-column: 8 / span 5; }
}

/* Llamada final */
.llamada { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--medianil); row-gap: var(--e-l); }
.llamada__texto, .llamada__accion { grid-column: 1 / -1; min-width: 0; }
.llamada__texto h2 { margin: 0; max-width: 20ch; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.85rem); line-height: 1.04; }
[dir="rtl"] .llamada__texto h2 { font-size: var(--t-2xl); line-height: 1.4; }
.llamada__texto p { max-width: 32em; margin: var(--e-m) 0 0; font-size: var(--t-l); line-height: 1.55; color: var(--tinta-2); }
@media (min-width: 1024px) {
  .llamada__texto { grid-column: 1 / span 8; }
  .llamada__accion { grid-column: 9 / -1; align-self: end; justify-self: end; }
}

/* Páginas legales: títulos en el margen, como un documento; tablas con filas en tono alterno */
.legal h2 { font-size: clamp(1.4rem, 1.25rem + .6vw, 1.75rem); line-height: 1.2; }
.legal table { width: 100%; margin: .5em 0 1.6em; border-collapse: collapse; font-size: 1rem; }
.legal th, .legal td { padding: .8rem 1rem; text-align: start; vertical-align: top; }
.legal tr:nth-child(odd) > * { background: var(--papel-2); }
.legal th { width: 34%; font-weight: 600; color: var(--titulo); }
.legal td { font-variant-numeric: lining-nums; }
@media (max-width: 639px) {
  .legal th, .legal td { display: block; width: 100%; }
  .legal th { padding-bottom: .1rem; }
  .legal td { padding-top: .1rem; }
}
@media (min-width: 1024px) {
  .contenedor.estrecho.legal {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: start;
  }
  .contenedor.estrecho.legal > * { grid-column: 4 / span 7; max-width: 66ch; }
  .contenedor.estrecho.legal > h2 { grid-column: 1 / span 3; margin: 0; padding-top: 2.6rem; padding-inline-end: 1rem; }
  .contenedor.estrecho.legal > h2 + * { margin-top: 2.6rem; }
  .contenedor.estrecho.legal > h2:first-child { padding-top: .1rem; }
  .contenedor.estrecho.legal > h2:first-child + * { margin-top: 0; }
  .contenedor.estrecho.legal > h2 + table { margin-top: 2.5rem; }
  .contenedor.estrecho.legal > h2:first-child + table { margin-top: 0; }
}

/* 404 */
.error { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 62vh; }
.error__contenido { position: relative; z-index: 1; }
.error__contenido > * { max-width: 30rem; }
.error__contenido h1 { max-width: 14ch; }
.error__marca-agua {
  position: absolute; inset-inline-end: -6%; top: 50%; width: min(88vw, 46rem); transform: translateY(-50%); color: var(--marca-agua);
}

/* ============ Pie ============ */
.pie {
  --titulo: #f1ece2; --tinta: #d9dde3; --tinta-2: #a9b5c4; --bronce-texto: #d4b47e; --bronce: #b8955d;
  --linea: rgba(217, 221, 227, .13); --linea-fuerte: rgba(217, 221, 227, .4); --foco: #d4b47e;
  position: relative; overflow: hidden; padding-top: var(--e-seccion);
  background: var(--pie); color: var(--tinta-2); font-size: var(--t-s);
}
.pie a { color: var(--tinta); text-decoration: none; }
.pie a:hover { color: var(--titulo); }
.pie__rejilla { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--medianil); row-gap: var(--e-l); }
.pie__rejilla > * { grid-column: 1 / -1; min-width: 0; }
.pie__logo { display: block; width: auto; height: 2.75rem; }
.pie__lema { margin: 1.25rem 0 .9rem; font-family: var(--serif); font-size: 1.4rem; font-style: italic; line-height: 1.25; color: var(--tinta); }
[dir="rtl"] .pie__lema { font-style: normal; font-size: 1.15rem; line-height: 1.6; }
.pie__razon { margin: 0; font-size: .875rem; line-height: 1.6; }
.pie__titulo { margin: 0 0 .75rem; font-family: var(--sans); font-size: var(--t-s); font-weight: 600; color: var(--titulo); }
[dir="rtl"] .pie__titulo { font-size: 1rem; }
.pie__lista { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.pie__lista a { display: inline-flex; align-items: center; min-height: 2rem; line-height: 1.35; }
.pie__lista--oficinas { gap: .9rem; }
.pie__lista--oficinas strong { color: var(--tinta); font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.pie__pais { font-size: .875rem; }
.pie__final {
  position: relative; z-index: 1; margin-top: var(--e-xl);
  padding-block: 0 calc(var(--e-l) + env(safe-area-inset-bottom, 0px)); font-size: .875rem;
}
.pie__final p { margin: 0; }
.pie__marca-agua {
  position: absolute; z-index: 0; inset-inline-end: -3vw; bottom: -9vw; width: min(62vw, 50rem); color: rgba(241, 236, 226, .03);
}
.pagina-404 .pie__marca-agua { display: none; }
@media (pointer: coarse) { .pie__lista a { min-height: 44px; } }
@media (min-width: 640px) {
  .pie__marca { grid-column: 1 / -1; }
  .pie__bloque { grid-column: span 4; }
  .pie__bloque--servicios { grid-column: span 8; }
  .pie__bloque--servicios .pie__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--medianil); }
}
@media (min-width: 1024px) {
  .pie__marca { grid-column: 1 / span 4; }
  .pie__bloque--servicios { grid-column: 5 / span 4; }
  .pie__bloque { grid-column: span 2; }
  .pie__bloque:last-child { grid-column: span 2; }
  .pie__bloque--servicios .pie__lista { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1280px) {
  .pie__bloque--servicios { grid-column: 5 / span 3; }
  .pie__bloque { grid-column: span 3; }
  .pie__bloque:last-child { grid-column: span 2; }
}

/* WhatsApp flotante: la sombra es funcional (flota sobre el contenido) */
.whatsapp-flotante {
  position: fixed; z-index: 60; inset-inline-end: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: #1d7a4b; color: #fff; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .4);
}
.whatsapp-flotante:hover { background: #166340; color: #fff; }

/* La escritura árabe no tiene versalitas: Chrome las simula reduciendo el cuerpo */
[dir="rtl"] * { font-variant-caps: normal; }

/* ============ Cambio de tema y movimiento ============ */
html.tema-cambio *, html.tema-cambio *::before, html.tema-cambio *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease, box-shadow .35s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .mapa-red__rutas path, .mapa-red__nuevas g { opacity: 1; transform: none; }
}

/* ============ Impresión ============ */
@media print {
  .cabecera, .whatsapp-flotante, .marca-agua { display: none !important; }
  body { background: #fff; color: #111; font-size: 11pt; }
  .banda, .caja-contacto, .pie { background: #fff; color: #111; --titulo: #12263f; --tinta: #111; --tinta-2: #333; }
  .seccion { padding-block: 1.5rem; }
}