/* Monsalve y Ruiz Abogados. Estilos comunes de las cuatro webs.
   Fuentes autoalojadas (SIL Open Font License, ver fuentes/LICENCIAS.txt). Ninguna petición a terceros.
   Lenguaje hermano de almaruiz.es: fondo oscuro, Fraunces fina para los títulos, Newsreader para el texto
   y etiquetas pequeñas en Instrument Sans. Aquí el fondo es el teal del despacho llevado casi a negro. */

/* ---------- Fuentes ---------- */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url("fuentes/fraunces-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0152-0153, U+2013-2014, U+2018-201D, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2066-2069, U+20AC; }
/* La cursiva solo se usa en la «y» del nombre del despacho: el archivo contiene únicamente esa letra. */
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fuentes/fraunces-italic-y.woff2") format("woff2"); unicode-range: U+0079; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("fuentes/newsreader-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0152-0153, U+2013-2014, U+2018-201D, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2066-2069, U+20AC; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fuentes/instrument-sans-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0152-0153, U+2013-2014, U+2018-201D, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2066-2069, U+20AC; }
@font-face { font-family: "Markazi Text"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fuentes/markazi-text-arabic-600-normal.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; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fuentes/ibm-plex-sans-arabic-arabic-400-normal.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; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fuentes/ibm-plex-sans-arabic-arabic-600-normal.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; }

/* ---------- Paleta y escala ---------- */
:root {
  color-scheme: dark;
  --fondo: #072523;          /* el teal del despacho, casi negro */
  --fondo-hondo: #051A19;
  --fondo-claro: #0B302D;
  --tinta: #F1ECE3;          /* texto */
  --sub: #C7D4D1;
  --apagado: #8FAAA5;        /* etiquetas */
  --tenue: #6E8E89;
  --menta: #9FD9CD;          /* acento */
  --teal: #06726C;           /* el del rótulo */
  --regla: #1B403D;
  --regla-menta: rgba(159, 217, 205, 0.45);
  --velo: rgba(7, 37, 35, 0.9);

  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --texto: "Newsreader", Charter, "Sitka Text", Cambria, Georgia, serif;
  --ui: "Instrument Sans", "Helvetica Neue", "Segoe UI", Arial, system-ui, sans-serif;
  --arabe-display: "Markazi Text", "Geeza Pro", "Noto Naskh Arabic", serif;
  --arabe: "IBM Plex Sans Arabic", "Geeza Pro", "Noto Sans Arabic", Tahoma, sans-serif;

  --t-etiqueta: 0.75rem;
  --t-pequeno: 0.9375rem;
  --t-cuerpo: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --t-entrada: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --t-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --t-claim: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --t-h1: clamp(2.6rem, 1.3rem + 5.2vw, 5.25rem);

  --envoltura: 71rem;
  --margen: clamp(1.25rem, 5vw, 2.5rem);
  --barra: 4rem;
  --hueco: clamp(3.5rem, 8vw, 6.5rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 var(--t-cuerpo)/1.6 var(--texto);
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  padding-block-end: var(--barra);
}
[dir="rtl"] body { font-family: var(--arabe); line-height: 1.85; }

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 300; color: var(--tinta); text-wrap: balance; letter-spacing: 0; }
h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.008em; }
h3 { font-size: var(--t-h3); font-weight: 400; line-height: 1.2; }
[dir="rtl"] :is(h1, h2, h3, .claim, .titular, .nombre-grande, .dato-grande, .correo-dato) { font-family: var(--arabe-display); font-weight: 600; letter-spacing: 0; }
[dir="rtl"] h1 { line-height: 1.25; }

p { margin: 0; }
a { color: var(--menta); text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--regla-menta); }
a:hover { color: var(--tinta); text-decoration-color: currentColor; }
svg { flex: none; }
img { max-width: 100%; display: block; }
bdi { unicode-bidi: isolate; }
.lat { white-space: nowrap; }
.oculto { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--menta); outline-offset: 3px; border-radius: 1px; }

.envoltura { max-width: var(--envoltura); margin-inline: auto; padding-inline: var(--margen); }
.salto { position: absolute; inset-inline-start: 1rem; inset-block-start: -10rem; z-index: 40; background: var(--tinta); color: var(--fondo); padding: 0.75rem 1rem; font-family: var(--ui); }
.salto:focus { inset-block-start: 1rem; color: var(--fondo); }
.pendiente { background: #F3D98B; color: var(--fondo); padding: 0 0.25em; }

/* Etiquetas: pequeñas, en versalitas y espaciadas */
.etiqueta, .rejilla > h2 {
  font: 500 var(--t-etiqueta)/1.4 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--apagado);
}
[dir="rtl"] :is(.etiqueta, .rejilla > h2) { font-family: var(--arabe); font-size: 0.875rem; letter-spacing: 0; font-weight: 600; }
.etiqueta-menta { color: var(--menta) !important; }

.claim { font: 300 var(--t-claim)/1.18 var(--display); color: var(--tinta); text-wrap: balance; max-width: 30ch; }
.entrada { font-size: var(--t-entrada); line-height: 1.5; color: var(--sub); max-width: 40ch; }
[dir="rtl"] .entrada { line-height: 1.75; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; inset-block-start: 0; z-index: 30;
  background: var(--velo); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--regla);
}
.cabecera-fila {
  display: grid; align-items: center; gap: 0 1.25rem;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "marca acciones" "menu menu";
}
.marca { grid-area: marca; justify-self: start; display: inline-flex; align-items: baseline; gap: 0.7rem; padding-block: 1rem; color: var(--tinta); text-decoration: none; white-space: nowrap; }
.marca:hover { color: var(--tinta); }
.marca-nombre { font: 400 1.25rem/1 var(--display); letter-spacing: -0.005em; }
.marca-y { font-style: italic; color: var(--menta); }
.marca-sub { font: 500 0.625rem/1 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--apagado); }

.menu { grid-area: menu; margin-inline: calc(var(--margen) * -1); border-block-start: 1px solid var(--regla); }
.menu ul { display: flex; justify-content: safe center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 0 0.75rem; list-style: none; }
.menu ul::-webkit-scrollbar { display: none; }
.menu li { flex: none; }
.menu a { display: block; padding: 0.85rem 0.4rem 0.8rem; color: var(--sub); font: 500 0.625rem/1 var(--ui); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
[dir="rtl"] .menu a { font-family: var(--arabe); font-size: 0.875rem; letter-spacing: 0; }
.menu a:hover { color: var(--tinta); }
.menu a[aria-current] { color: var(--tinta); box-shadow: inset 0 -1px 0 var(--menta); }

.cabecera-acciones { grid-area: acciones; display: flex; align-items: center; gap: 1rem; }
.boton-cabecera { display: none; }

/* Selector de idioma: un <details>, funciona sin JavaScript. */
.idioma { position: relative; }
.idioma summary {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0; cursor: pointer; list-style: none; user-select: none;
  color: var(--sub); font: 500 0.6875rem/1 var(--ui); letter-spacing: 0.14em; text-transform: uppercase;
}
[dir="rtl"] .idioma summary { font-family: var(--arabe); font-size: 0.875rem; letter-spacing: 0; }
.idioma summary::-webkit-details-marker { display: none; }
.idioma summary::after { content: ""; width: 0.4em; height: 0.4em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-0.15em) rotate(45deg); }
.idioma[open] summary::after { transform: translateY(0.1em) rotate(-135deg); }
.idioma summary:hover { color: var(--tinta); }
.idioma summary svg { width: 1rem; height: 1rem; }
.idioma ul {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 0.6rem); z-index: 35;
  min-width: 11rem; margin: 0; padding: 0.4rem 0; list-style: none;
  background: var(--fondo-claro); border: 1px solid var(--regla); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.idioma ul a { display: block; padding: 0.55rem 1rem; color: var(--sub); font: 400 1.0625rem/1.3 var(--display); text-decoration: none; }
.idioma ul a[dir="rtl"] { font-family: var(--arabe-display); font-weight: 600; font-size: 1.25rem; text-align: right; }
.idioma ul a:hover { color: var(--tinta); background: rgba(159, 217, 205, 0.06); }
.idioma ul a[aria-current] { color: var(--menta); }

@media (min-width: 64em) {
  .cabecera-fila { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "marca menu acciones"; }
  .menu { margin: 0; border: 0; }
  .menu ul { gap: 0 1.6rem; padding: 0; overflow: visible; }
  .menu a { padding: 1.45rem 0; font-size: 0.75rem; letter-spacing: 0.16em; }
  .cabecera-acciones { justify-self: end; gap: 1.5rem; }
  .boton-cabecera {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem;
    border: 1px solid var(--regla-menta); color: var(--menta);
    font: 500 0.6875rem/1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  }
  .boton-cabecera:hover { background: var(--menta); color: var(--fondo); }
  .boton-cabecera svg { width: 1rem; height: 1rem; }
  [dir="rtl"] .boton-cabecera { font-family: var(--arabe); font-size: 0.875rem; letter-spacing: 0; }
}
.cabecera-sola .cabecera-fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marca acciones"; }
@media (min-width: 26em) and (max-width: 63.99em) {
  .menu a { padding-inline: 0.55rem; font-size: 0.6875rem; letter-spacing: 0.12em; }
}

/* ---------- Botones ---------- */
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem; padding: 0.8rem 1.15rem;
  border: 1px solid var(--regla-menta); background: transparent; color: var(--tinta);
  font: 500 0.75rem/1.2 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; text-align: center;
}
[dir="rtl"] .boton { font-family: var(--arabe); font-size: 1rem; letter-spacing: 0; }
.boton:hover { border-color: var(--menta); color: var(--tinta); background: rgba(159, 217, 205, 0.08); }
.boton-principal { background: var(--menta); border-color: var(--menta); color: var(--fondo-hondo); }
.boton-principal:hover { background: var(--tinta); border-color: var(--tinta); color: var(--fondo-hondo); }
.boton svg { width: 1.2rem; height: 1.2rem; }
@media (max-width: 39.99em) { .portada .acciones .boton { width: 100%; } }
.enlace-ui { font: 500 0.75rem/1.4 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.55em; text-decoration-color: var(--regla-menta); }
[dir="rtl"] .enlace-ui { font-family: var(--arabe); font-size: 0.9375rem; letter-spacing: 0; }

/* ---------- Portada ---------- */
.portada { position: relative; padding-block: clamp(3.25rem, 9vw, 6.5rem) clamp(3.5rem, 8vw, 6rem); }
.portada .etiqueta { margin-block-end: 1.5rem; }
.portada h1 { max-width: 15ch; }
.portada .entrada { margin-block-start: 1.75rem; }
.portada .atencion { margin-block-start: 1.25rem; max-width: 46ch; color: var(--apagado); font: 400 var(--t-pequeno)/1.55 var(--ui); }
[dir="rtl"] .portada .atencion { font-family: var(--arabe); }
.portada .acciones { margin-block-start: 2.5rem; }
.portada-rejilla { display: grid; gap: 3rem; }
@media (min-width: 64em) {
  .portada-rejilla { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); gap: 5rem; align-items: center; }
  .portada-sola .portada-rejilla { grid-template-columns: minmax(0, 1fr); }
}

/* Portada de inicio, con el mapa de puntos */
.inicio-rejilla { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 64em) { .inicio-rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 2.5rem; } }
.portada-medios { margin-block-start: 2rem; color: var(--apagado); font: 400 var(--t-pequeno)/1.5 var(--ui); }
[dir="rtl"] .portada-medios { font-family: var(--arabe); }
.portada-medios a { color: var(--sub); }

.mapa { position: relative; margin: 0; }
.mapa-lienzo { position: relative; direction: ltr; }
.mapa-lienzo img { width: 100%; height: auto; opacity: 0.95; }
.lugar { position: absolute; display: flex; align-items: center; gap: 0.45rem; transform: translate(-0.25rem, -50%); white-space: nowrap; pointer-events: none; }
.lugar::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--tinta); box-shadow: 0 0 0 3px var(--fondo); }
.lugar span { padding: 0.1rem 0.3rem; background: var(--fondo); font: 500 0.625rem/1.25 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sub); }
.lugar span small { padding: 0; background: none; }
.lugar-izquierda { flex-direction: row-reverse; transform: translate(calc(-100% + 0.25rem), -50%); }
.lugar-sede::before { width: 0.75rem; height: 0.75rem; background: var(--menta); box-shadow: 0 0 0 4px var(--fondo), 0 0 0 5px var(--regla-menta); }
.lugar-sede span { color: var(--menta); font-weight: 600; font-size: 0.6875rem; }
.lugar-sede small { display: block; color: var(--apagado); font-weight: 400; font-size: 0.625rem; letter-spacing: 0.08em; }
[dir="rtl"] .lugar span { font-family: var(--arabe); font-size: 0.8125rem; letter-spacing: 0; }
.mapa figcaption { margin-block-start: 1.25rem; color: var(--apagado); font: 400 0.8125rem/1.5 var(--ui); max-width: 46ch; }
[dir="rtl"] .mapa figcaption { font-family: var(--arabe); font-size: 0.9375rem; }
@media (max-width: 30em) { .lugar:not(.lugar-sede) span { display: none; } }

.hablamos { border-block-start: 1px solid var(--regla); padding-block: 1.75rem 2rem; }
.hablamos-fila { display: grid; gap: 0.75rem 3rem; align-items: baseline; }
@media (min-width: 56em) { .hablamos-fila { grid-template-columns: 15rem minmax(0, 1fr); } }
@media (min-width: 64em) { .hablamos-fila { grid-template-columns: 17rem minmax(0, 1fr); } }
.hablamos ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.hablamos a { color: var(--sub); font: 300 clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem)/1.4 var(--display); text-decoration: none; }
.hablamos a[dir="rtl"] { font-family: var(--arabe-display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.hablamos a:hover { color: var(--tinta); }
.hablamos a[aria-current] { color: var(--menta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }

/* ---------- Secciones con columna de etiqueta ---------- */
.seccion { padding-block: var(--hueco); }
.seccion > .envoltura { position: relative; }
.seccion + .seccion > .envoltura::before, .hablamos + .seccion > .envoltura::before, .portada + .seccion > .envoltura::before { content: ""; position: absolute; inset-inline: var(--margen); inset-block-start: calc(var(--hueco) * -1); border-block-start: 1px solid var(--regla); }
.seccion-honda { background: var(--fondo-hondo); }
.seccion-honda + .seccion > .envoltura::before, .seccion + .seccion-honda > .envoltura::before { display: none; }
.rejilla { display: grid; gap: 1.5rem 3rem; }
@media (min-width: 56em) { .rejilla { grid-template-columns: 15rem minmax(0, 1fr); } }
@media (min-width: 64em) { .rejilla { grid-template-columns: 17rem minmax(0, 1fr); } }
.rejilla > h2 { padding-block-start: 0.4rem; }
.seccion .cuerpo > * + * { margin-block-start: 2rem; }
.seccion .cuerpo > .claim + .datos, .seccion .cuerpo > .claim + .texto-seccion { margin-block-start: 2.5rem; }
.texto-seccion { max-width: 62ch; color: var(--sub); }
.texto-seccion.grande { font-size: var(--t-entrada); line-height: 1.5; color: var(--tinta); max-width: 46ch; }
[dir="rtl"] .texto-seccion.grande { line-height: 1.75; }

/* Filas: nombre a un lado, descripción al otro */
.filas { margin: 0; padding: 0; list-style: none; }
.filas > li { border-block-start: 1px solid var(--regla); }
.filas > li:last-child { border-block-end: 1px solid var(--regla); }
.fila { display: grid; gap: 0.5rem 2.5rem; padding-block: 1.6rem 1.75rem; color: inherit; text-decoration: none; }
@media (min-width: 48em) { .fila { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.fila h3 { color: var(--tinta); }
.fila p { color: var(--sub); max-width: 52ch; }
a.fila:hover { color: inherit; }
a.fila:hover h3 { color: var(--menta); }

/* Extranjería, la primera área, en grande */
.destacada { padding-block: 0 2.5rem; }
.destacada a { color: inherit; text-decoration: none; display: grid; gap: 1.1rem; }
.destacada h3 { font: 300 var(--t-claim)/1.12 var(--display); }
.destacada a:hover h3 { color: var(--menta); }
.destacada p { color: var(--sub); max-width: 50ch; font-size: var(--t-entrada); line-height: 1.5; }
.destacada ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.destacada li { font: 500 0.6875rem/1.7 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--apagado); }
[dir="rtl"] .destacada li { font-family: var(--arabe); font-size: 0.875rem; letter-spacing: 0; }
.destacada .enlace-ui { justify-self: start; margin-block-start: 0.5rem; color: var(--menta); }

/* Listas sencillas (qué llevamos, documentos, requisitos) */
.lista { margin: 0; padding: 0; list-style: none; max-width: 64ch; }
.lista li { position: relative; padding-block: 1rem; padding-inline-start: 1.75rem; border-block-start: 1px solid var(--regla); color: var(--sub); }
.lista li:last-child { border-block-end: 1px solid var(--regla); }
.lista li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: calc(1rem + 0.8em); width: 0.75rem; height: 1px; background: var(--menta); }

/* Prensa y actualidad: fecha, medio y titular */
.cronica { margin: 0; padding: 0; list-style: none; }
.cronica > li { display: grid; gap: 0.4rem 2.5rem; padding-block: 1.5rem 1.6rem; border-block-start: 1px solid var(--regla); }
.cronica > li:last-child { border-block-end: 1px solid var(--regla); }
@media (min-width: 48em) { .cronica > li { grid-template-columns: 9rem minmax(0, 1fr); } }
.cronica-fecha { font: 500 0.6875rem/1.7 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--apagado); }
[dir="rtl"] .cronica-fecha { font-family: var(--arabe); font-size: 0.875rem; letter-spacing: 0; }
.cronica-medio { display: block; margin-block-end: 0.4rem; font: 500 0.6875rem/1.6 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--menta); }
.titular { font: 400 var(--t-h3)/1.3 var(--display); color: var(--tinta); text-decoration: none; }
a.titular:hover { color: var(--menta); }
.cronica p { margin-block-start: 0.5rem; color: var(--sub); font-size: var(--t-pequeno); max-width: 62ch; }
.nota-idioma { color: var(--apagado); font-size: var(--t-pequeno); }

/* Pasos (sí son una secuencia) */
.pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding-block: 1.5rem; border-block-start: 1px solid var(--regla); color: var(--sub); }
.pasos li:last-child { border-block-end: 1px solid var(--regla); }
.pasos li::before { content: counter(paso); font: 300 2rem/1 var(--display); color: var(--menta); }
.pasos p { max-width: 56ch; padding-block-start: 0.3rem; }

.nombre-grande { font: 300 var(--t-claim)/1.12 var(--display); }
.nombre-grande + p { margin-block-start: 1rem !important; color: var(--sub); max-width: 52ch; }

/* Contacto */
.datos { margin: 0; padding: 0; list-style: none; max-width: 48rem; }
.datos > li { display: grid; gap: 0.5rem 2rem; padding-block: 1.4rem; border-block-start: 1px solid var(--regla); }
.datos > li:last-child { border-block-end: 1px solid var(--regla); }
@media (min-width: 40em) { .datos > li { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; } }
.dato-grande { font: 300 clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem)/1.1 var(--display); color: var(--tinta); text-decoration: none; }
.dato-grande:hover { color: var(--menta); }
.dato-texto { color: var(--sub); }
.dato-texto p + p { margin-block-start: 0.35rem; }
.dato-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-block-start: 0.9rem; }
.correo-dato { font: 400 1.3125rem/1.3 var(--display); color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }
.correo-dato:hover { color: var(--menta); }
.copiar {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.9rem;
  border: 1px solid var(--regla-menta); background: transparent; color: var(--tinta); cursor: pointer;
  font: 500 0.6875rem/1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase;
}
[dir="rtl"] .copiar { font-family: var(--arabe); font-size: 0.875rem; letter-spacing: 0; }
.copiar svg { width: 0.95rem; height: 0.95rem; }
.copiar:hover { border-color: var(--menta); }
.copiar[data-estado="hecho"] { background: var(--menta); border-color: var(--menta); color: var(--fondo-hondo); }

/* Panel de cita de las páginas de área */
.rotulo { padding: clamp(1.5rem, 4vw, 2.25rem); border: 1px solid var(--regla); background: var(--fondo-claro); }
.rotulo h2 { font: 300 clamp(1.6rem, 1.3rem + 1vw, 2rem)/1.15 var(--display); }
.rotulo-texto { margin-block: 0.6rem 1.5rem; color: var(--sub); max-width: 34ch; }
.rotulo .acciones { display: grid; gap: 0.6rem; margin: 0; }
.rotulo .boton { width: 100%; }
.rotulo .correo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-block-start: 1.25rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--regla); }
.rotulo .correo svg { width: 1.1rem; height: 1.1rem; color: var(--apagado); }
.rotulo .correo a { overflow-wrap: anywhere; }
.rotulo-datos { display: grid; gap: 1rem; margin: 1.5rem 0 0; font-size: var(--t-pequeno); }
.rotulo-datos dt { font: 500 0.6875rem/1.6 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--apagado); }
[dir="rtl"] .rotulo-datos dt { font-family: var(--arabe); font-size: 0.875rem; letter-spacing: 0; }
.rotulo-datos dd { margin: 0.2rem 0 0; color: var(--sub); }

.otras-lista { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.otras-lista a { font: 300 1.375rem/1.4 var(--display); color: var(--sub); text-decoration: none; }
[dir="rtl"] .otras-lista a { font-family: var(--arabe-display); font-weight: 600; }
.otras-lista a:hover { color: var(--menta); }

.enlaces { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 0; padding: 0; list-style: none; }

/* Fichas de las landings (servicios, modalidades) */
.areas { display: grid; margin: 0; }
.area { display: grid; gap: 0.5rem 2.5rem; padding-block: 1.5rem; border-block-start: 1px solid var(--regla); }
.area:last-child { border-block-end: 1px solid var(--regla); }
@media (min-width: 48em) { .area { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.area dt { font: 400 var(--t-h3)/1.25 var(--display); }
[dir="rtl"] .area dt { font-family: var(--arabe-display); font-weight: 600; }
.area dd { margin: 0; color: var(--sub); max-width: 52ch; }
.mas { display: block; margin-block-start: 0.5rem; }

.aviso { padding-block: 2.5rem; border-block-start: 1px solid var(--regla); color: var(--apagado); font: 400 0.875rem/1.6 var(--ui); }
[dir="rtl"] .aviso { font-family: var(--arabe); }
.aviso p { max-width: 80ch; }
.seccion-honda + .aviso { border-block-start: 0; }

/* ---------- Páginas de texto: legales, noticias, 404 ---------- */
.prosa { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem); }
.prosa-rejilla { display: grid; gap: 1.5rem 3rem; }
@media (min-width: 56em) { .prosa-rejilla { grid-template-columns: 15rem minmax(0, 1fr); } }
@media (min-width: 64em) { .prosa-rejilla { grid-template-columns: 17rem minmax(0, 1fr); } }
.prosa-lateral { display: grid; gap: 0.75rem; align-content: start; padding-block-start: 0.6rem; }
.prosa-texto { max-width: 42rem; }
.prosa-texto h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.75rem); line-height: 1.08; margin-block-end: 2.25rem; }
.prosa-texto h2 { font: 400 clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem)/1.25 var(--display); margin-block: 2.75rem 0.85rem; }
[dir="rtl"] .prosa-texto h2 { font-family: var(--arabe-display); font-weight: 600; }
.prosa-texto p, .prosa-texto li { color: var(--sub); max-width: 66ch; }
.prosa-texto p + p { margin-block-start: 1rem; }
.prosa-texto ul { padding-inline-start: 1.25rem; display: grid; gap: 0.5rem; margin: 0.5rem 0 0; }
.prevalece { padding: 0.9rem 1rem; background: var(--fondo-claro); border-inline-start: 2px solid var(--menta); }
.actualizado { margin-block-start: 3rem; color: var(--apagado) !important; font-size: var(--t-pequeno); }
.entradilla { color: var(--tinta) !important; font-size: var(--t-entrada); line-height: 1.5; }
.no-encontrada .acciones { margin-block-start: 2rem; }

/* ---------- Pie ---------- */
.pie { border-block-start: 1px solid var(--regla); background: var(--fondo-hondo); padding-block: 3rem 2.5rem; color: var(--apagado); font: 400 0.875rem/1.6 var(--ui); }
[dir="rtl"] .pie { font-family: var(--arabe); }
.pie a { color: var(--sub); text-decoration-color: var(--regla-menta); }
.pie a:hover { color: var(--tinta); }
.pie-rejilla { display: grid; gap: 2rem; }
@media (min-width: 56em) { .pie-rejilla { grid-template-columns: 1.4fr 1fr 0.8fr; gap: 3rem; } }
.pie p + p { margin-block-start: 0.4rem; }
.pie-nombre { color: var(--tinta); font: 400 1.25rem/1 var(--display); margin-block-end: 1rem; }
.pie-nombre .marca-sub { margin-inline-start: 0.6rem; }
.pie-titulo { margin-block-end: 0.75rem; }
.pie ul { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.pie li span { display: block; color: var(--tenue); }
.pie-legal { display: flex !important; flex-wrap: wrap; gap: 0.5rem 1.5rem !important; margin-block-end: 1rem !important; }

/* ---------- Barra de contacto (móvil) ---------- */
.barra {
  position: fixed; z-index: 25; inset-inline: 0; inset-block-end: 0;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr;
  padding-block-end: env(safe-area-inset-bottom, 0);
  background: var(--fondo-hondo); border-block-start: 1px solid var(--regla);
}
.barra a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  min-height: var(--barra); padding: 0.5rem; color: var(--sub);
  font: 500 0.6875rem/1 var(--ui); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
}
[dir="rtl"] .barra a { font-family: var(--arabe); font-size: 0.875rem; letter-spacing: 0; }
.barra a:hover { color: var(--tinta); }
.barra .barra-wa { background: var(--menta); color: var(--fondo-hondo); }
.barra svg { width: 1.35rem; height: 1.35rem; }
@media (min-width: 64em) { body { padding-block-end: 0; } .barra { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .boton, .copiar, .boton-cabecera, .menu a, .titular, .fila h3, .otras-lista a, .hablamos a { transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; }
  /* Un único momento de movimiento: los puntos del mapa aparecen uno tras otro al cargar la portada. */
  .lugar { animation: aparecer 0.6s ease both; }
  .lugar-izquierda { animation-name: aparecer-izq; }
  @keyframes aparecer { from { opacity: 0; transform: translate(-0.25rem, -20%); } }
  @keyframes aparecer-izq { from { opacity: 0; transform: translate(calc(-100% + 0.25rem), -20%); } }
}

@media print {
  :root { color-scheme: light; }
  .barra, .idioma, .salto, .copiar, .boton-cabecera, .mapa { display: none !important; }
  body, .cabecera, .pie, .seccion-honda { background: #fff !important; color: #000 !important; padding: 0; }
  h1, h2, h3, .claim, .titular, .entrada, a, p, li { color: #000 !important; }
}

/* Lugares del mapa, generado por build.mjs a partir de src/mapa.json */
.lugar-ceuta { left: 31.4%; top: 87.22%; animation-delay: 0.30s; }
.lugar-madrid { left: 42.44%; top: 38.53%; animation-delay: 0.38s; }
.lugar-sevilla { left: 26.82%; top: 71.08%; animation-delay: 0.46s; }
.lugar-malaga { left: 37.52%; top: 78.27%; animation-delay: 0.54s; }
.lugar-estepona { left: 32.56%; top: 81.45%; animation-delay: 0.62s; }
.lugar-guadix { left: 46.32%; top: 72.04%; animation-delay: 0.70s; }
.lugar-palencia { left: 36.79%; top: 21.4%; animation-delay: 0.78s; }
.lugar-mondonedo { left: 17.38%; top: 6.15%; animation-delay: 0.86s; }
.lugar-inca { left: 87.75%; top: 46.01%; animation-delay: 0.94s; }