/* ===== /estilos/global.css ===== */
/* ============================================================
   LA TIPOGRAFÍA, SERVIDA DESDE AQUÍ
   ------------------------------------------------------------
   Antes se descargaba de Google Fonts, lo que mandaba la dirección
   IP de cada visitante a Google. Ahora el archivo está en la propia
   web, en public/fuentes/.

   Es una sola tipografía "variable": un archivo de 44 KB que cubre
   todos los grosores del 300 al 500. Antes eran tres peticiones a
   dos dominios ajenos.

   "swap" quiere decir que el texto se ve desde el primer momento con
   la letra del sistema y cambia a Roboto en cuanto llega. Nunca se
   queda una página en blanco esperando a la tipografía.
   ============================================================ */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/fuentes/roboto-latin.woff2') format('woff2');
  /* Solo el alfabeto latino: es lo que usa la web entera */
  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;
}

/* ============================================================
   TAR 2022 — SISTEMA DE DISEÑO
   Minimalismo editorial: monocromo, fotografía y aire.
   Cambiando :root se retoca toda la web de golpe.
   ============================================================ */

:root {
  /* Color — el color lo ponen las fotos, no la interfaz */
  --negro: #1c1c1c;
  --grafito: #3d3d3d;
  --gris: #6e6e6e;        /* texto secundario */
  --gris-claro: #9b9b9b;
  --blanco: #ffffff;
  --hueso: #f4f2f0;       /* bandas alternas */
  --hueso-hondo: #e9e6e2;
  --linea: rgba(28, 28, 28, 0.13);
  --velo: rgba(20, 18, 16, 0.42);  /* sobre fotos */

  /* Tipografía: Roboto y solo Roboto, la de la marca.
     300 para titulares, 400 para textos. */
  --display: 'Roboto', system-ui, sans-serif;
  --texto: 'Roboto', system-ui, -apple-system, sans-serif;
  --serif: 'Roboto', system-ui, sans-serif;

  /* Escala fluida */
  --t-xs: 0.75rem;
  --t-s: 0.875rem;
  --t-base: 1rem;
  --t-m: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  --t-l: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem);
  --t-xl: clamp(1.75rem, 1.3rem + 2vw, 2.6rem);
  --t-xxl: clamp(2rem, 1.4rem + 3vw, 3.4rem);

  /* Ritmo — mucho aire, como en el original */
  --bloque: clamp(4rem, 9vw, 8rem);
  --ancho: 1240px;
  /* Ancho para las páginas que piden más aire porque son de mirar y no
     de leer, como la de proyectos. El texto seguido nunca se pone a
     este ancho: a 1.600 px una línea se hace larguísima de seguir. */
  --ancho-amplio: 1600px;
  --margen: clamp(1.25rem, 5vw, 4rem);
  --tracking-ancho: 0.32em;

  /* Accesibilidad táctil */
  --tap: 48px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--negro);
  font-family: var(--texto);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: 0.005em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); font-weight: 400; }

p { margin: 0 0 1.1em; max-width: 64ch; color: var(--gris); text-wrap: pretty; }

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

:focus-visible {
  outline: 2px solid var(--negro);
  outline-offset: 3px;
}

/* ---------- Utilidades ---------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* Igual que el anterior pero más ancho. En móvil los dos miden lo
   mismo: la diferencia solo se nota a partir de 1.240 px de pantalla. */
.contenedor-amplio {
  width: 100%;
  max-width: var(--ancho-amplio);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.bloque { padding-block: var(--bloque); }
.banda-hueso { background: var(--hueso); }

/* El recurso tipográfico de la marca: versalitas muy espaciadas */
.espaciado {
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-ancho);
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 1.25rem;
}

.serif-marca {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Botones: finos y de contorno, como el original ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: var(--tap);
  padding: 0.85rem 2.4rem;
  border: 1px solid var(--negro);
  border-radius: 100px;
  background: transparent;
  color: var(--negro);
  font-family: var(--display);
  font-size: var(--t-s);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover { background: var(--negro); color: var(--blanco); }

.btn--claro { border-color: rgba(255, 255, 255, 0.55); color: var(--blanco); }
.btn--claro:hover { background: var(--blanco); color: var(--negro); }

/* ---------- Saltar al contenido ---------- */

.saltar {
  position: absolute;
  left: 50%; top: -100px;
  transform: translateX(-50%);
  z-index: 999;
  background: var(--negro);
  color: var(--blanco);
  padding: 0.9rem 1.5rem;
  text-decoration: none;
  font-size: var(--t-s);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: top 0.2s;
}
.saltar:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== /estilos/base.css ===== */
/* ============================================================
   BASE — plantilla general, cabecera y pie
   Viene de: src/layouts/Base.astro, src/components/Header.astro,
   src/components/Footer.astro
   ============================================================ */

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* ---------- Cabecera ---------- */
.cab {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--hueso);
  border-bottom: 1px solid var(--linea);
}

.cab__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 64px;
}

.cab__logo { display: inline-flex; align-items: center; min-height: var(--tap); }
.cab__logo img { width: 48px; height: auto; }
@media (min-width: 1000px) {
  .cab__logo img { width: 56px; }
}

.cab__nav { display: none; }
.cab__nav > ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.cab__enl {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 1.6rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  opacity: 0.82;
  transition: border-color 0.25s, opacity 0.25s;
}
.cab__enl:hover, .cab__enl.es-activo { opacity: 1; border-bottom-color: currentColor; }

/* Desplegable de provincias: banda a todo el ancho */
.mega {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--hueso);
  border-bottom: 1px solid var(--linea);
  box-shadow: 0 18px 34px rgba(28, 28, 28, 0.07);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease, visibility 0s linear 0.25s;
}
.tiene-sub:hover .mega,
.tiene-sub:focus-within .mega {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.15s ease, visibility 0s linear 0s;
}

.mega__interior {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) 2.2fr;
  gap: 3rem;
  padding-block: 2.75rem 3rem;
}

.mega__tit {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-size: var(--t-l);
  font-weight: 300;
  line-height: 1.2;
  color: var(--negro);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mega__todas {
  font-size: var(--t-s);
  letter-spacing: 0.06em;
  color: var(--gris);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 2px;
}
.mega__todas:hover { color: var(--negro); border-bottom-color: currentColor; }

.mega__prov {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 2.5rem;
  align-content: start;
}
.mega__prov a {
  display: grid;
  gap: 0.1rem;
  align-content: center;
  min-height: var(--tap);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--linea);
  text-decoration: none;
  color: var(--grafito);
  transition: color 0.2s, padding-left 0.2s;
}
.mega__prov a:hover { color: var(--negro); padding-left: 0.4rem; }

.mega__grupo {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 2.5rem;
  align-content: start;
}
.mega__grupo a {
  display: grid;
  gap: 0.1rem;
  align-content: center;
  min-height: var(--tap);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--linea);
  text-decoration: none;
  color: var(--grafito);
  transition: color 0.2s, padding-left 0.2s;
}
.mega__grupo a:hover { color: var(--negro); padding-left: 0.4rem; }
.mega__nom {
  font-family: var(--display);
  font-size: var(--t-m);
  font-weight: 300;
  white-space: nowrap;
}
.mega__cuenta {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-claro);
}

@media (min-width: 1240px) {
  .mega__prov { grid-template-columns: repeat(4, 1fr); }
}

.cab__lado { display: flex; align-items: center; gap: 0.4rem; }

.cab__redes {
  display: none;
  list-style: none;
  margin: 0; padding: 0;
  gap: 0.15rem;
}
.cab__redes a {
  display: grid;
  place-items: center;
  width: 38px; height: var(--tap);
  color: var(--grafito);
  transition: opacity 0.2s;
}
.cab__redes a:hover { opacity: 0.6; }

.cab__tel {
  display: grid;
  place-items: center;
  width: 38px; height: var(--tap);
  color: var(--grafito);
  text-decoration: none;
  transition: opacity 0.2s;
}
.cab__tel:hover { opacity: 0.6; }
.cab__tel-txt { display: none; }

.cab__menu {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  border: none; background: transparent;
  color: inherit; cursor: pointer;
}
.cab__hamb { display: grid; gap: 6px; }
.cab__hamb i {
  display: block; width: 24px; height: 1px;
  background: currentColor;
  transition: transform 0.28s;
}
.cab__menu[aria-expanded='true'] i:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.cab__menu[aria-expanded='true'] i:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- Menú de móvil y tableta ----------
   Se abre como una cortina que baja desde la cabecera y las líneas
   entran escalonadas. TAR 2022 y Residencias son desplegables: salen
   cerrados y solo queda uno abierto a la vez. */
.movil {
  position: fixed;
  inset: 64px 0 0;
  z-index: 99;
  background: var(--blanco);
  color: var(--negro);
  overflow-y: auto;
  overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}
.movil.es-abierto {
  clip-path: inset(0 0 0 0);
  transition-duration: 0.6s;
}

.movil__interior { padding-block: 0.75rem 3.5rem; }

/* Entrada escalonada: el orden (--i) lo pone cabecera.js */
.movil__anim {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.movil.es-abierto .movil__anim {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.18s + var(--i, 0) * 0.055s);
}

.movil__lista { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.movil__lista > li { border-bottom: 1px solid var(--linea); }

.movil__enl,
.movil__desp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 66px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--negro);
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.movil__enl > span,
.movil__desp > span:first-child { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.movil__enl:active,
.movil__desp:active { opacity: 0.7; }

/* La sección en la que se está: un punto discreto tras el nombre */
.movil__enl.es-activo > span::after,
.movil__desp.es-activo > span:first-child::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 0.6rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

/* El botón redondo del desplegable: gira y se rellena al abrir */
.movil__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--linea);
  border-radius: 50%;
  color: var(--grafito);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    background-color 0.3s, border-color 0.3s, color 0.3s;
}
.movil__desp[aria-expanded='true'] .movil__icono {
  transform: rotate(180deg);
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}

/* El desplegable crece de 0 a su alto con grid-template-rows (0fr → 1fr):
   anima la altura real sin medirla en JavaScript. Cerrado, visibility
   saca sus enlaces del tabulador y de los lectores de pantalla. */
.movil__panel {
  display: grid;
  grid-template-rows: 0fr;
  margin-inline: calc(var(--margen) * -1);
  transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.movil__plegable {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.5s;
}
.es-desplegado > .movil__panel { grid-template-rows: 1fr; }
.es-desplegado > .movil__panel > .movil__plegable {
  visibility: visible;
  transition-delay: 0s;
}

.movil__caja {
  background: var(--hueso);
  padding: 0.5rem var(--margen) 1.25rem;
}

.movil__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
}
.movil__sub--uno { grid-template-columns: minmax(0, 1fr); }
.movil__sub > li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}
.es-desplegado .movil__sub > li {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(0.1s + var(--j, 0) * 0.035s);
}
.movil__sub a {
  display: grid;
  gap: 0.1rem;
  align-content: center;
  min-height: 62px;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--linea);
  color: var(--grafito);
  text-decoration: none;
  transition: color 0.2s, padding-left 0.25s;
}
.movil__sub--uno > li:last-child a { border-bottom: 0; }
.movil__sub a:hover,
.movil__sub a:active { color: var(--negro); padding-left: 0.35rem; }
.movil__nom {
  font-family: var(--display);
  font-size: var(--t-m);
  font-weight: 300;
  line-height: 1.3;
}
.movil__cuenta {
  font-size: 0.7rem;
  line-height: 1.45;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
}

.movil__todas {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--tap);
  margin-top: 0.5rem;
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--negro);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.es-desplegado .movil__todas {
  opacity: 1;
  transition: opacity 0.4s ease 0.3s;
}
.movil__todas svg { transition: transform 0.25s; }
.movil__todas:hover svg,
.movil__todas:active svg { transform: translateX(4px); }

.movil__btn { width: 100%; }

/* Tableta: más aire y las provincias en cuatro columnas */
@media (min-width: 720px) {
  .movil__interior { padding-top: 1.5rem; }
  .movil__enl, .movil__desp { min-height: 76px; font-size: 1.75rem; }
  .movil__sub { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .movil__sub--uno { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .movil, .movil *, .movil.es-abierto .movil__anim,
  .es-desplegado .movil__sub > li, .es-desplegado .movil__todas {
    transition-delay: 0s !important;
  }
}

@media (min-width: 1000px) {
  .cab__barra {
    min-height: 80px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
  }
  .cab__logo { justify-self: start; align-self: center; }
  .cab__lado {
    justify-self: end;
    align-self: center;
    margin-left: 2.5rem;
    padding-left: 1.75rem;
    border-left: 1px solid var(--linea);
  }
  .cab__nav { display: flex; }
  .cab__nav > ul { height: 100%; }
  .cab__enl { height: 100%; padding-block: 0; }
  .cab__menu { display: none; }
  .movil { display: none; }
}

/* Entre 1000 y 1240 no caben a la vez el menú, el idioma, las redes y el
   teléfono: las redes se quedan en el pie hasta que hay sitio. */
@media (min-width: 1240px) {
  .cab__redes { display: flex; }
}

/* ---------- Cambio de idioma ---------- */
.cab__idioma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: var(--tap);
  padding-inline: 0.35rem;
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-decoration: none;
  color: var(--grafito);
  opacity: 0.82;
  transition: opacity 0.2s;
}
.cab__idioma:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

.movil__idioma {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  margin-top: 1rem;
  font-size: var(--t-s);
  letter-spacing: 0.06em;
  color: var(--grafito);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
}

/* ---------- Pie ---------- */
.pie {
  background: var(--negro);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  margin-top: auto;
}
.pie__eyebrow { color: rgba(255, 255, 255, 0.42); }
.pie__eyebrow--sep { margin-top: 2.25rem; }

.pie__arriba {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem 3rem;
  margin-bottom: 3rem;
}
.pie__cita { max-width: 54ch; flex: 1 1 22rem; }
.pie__logo {
  display: block;
  flex: none;
  margin-left: auto;
  transition: opacity 0.2s;
}
.pie__logo:hover { opacity: 0.8; }
.pie__logo img { display: block; width: clamp(160px, 26vw, 240px); height: auto; }
.pie__cita blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--t-m);
  line-height: 1.55;
  color: var(--blanco);
}

.pie__nav {
  display: grid;
  gap: 1.25rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.pie__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
}
.pie__lista--contacto a { color: var(--blanco); }
.pie__lista a {
  display: inline-flex; align-items: center;
  min-height: var(--tap);
  font-size: var(--t-s);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s;
}
.pie__lista a:hover { color: var(--blanco); }

.pie__final {
  display: flex; flex-direction: column; gap: 1rem;
  padding-top: 2rem;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
}
.pie__copy { margin: 0; color: rgba(255, 255, 255, 0.42); }
.pie__legal, .pie__redes {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem;
}
.pie__legal a, .pie__redes a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: rgba(255, 255, 255, 0.72); text-decoration: none;
}
.pie__legal a:hover, .pie__redes a:hover { color: var(--blanco); }

@media (min-width: 760px) {
  .pie__nav {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3rem;
  }
  .pie__lista--contacto { justify-content: flex-end; }
}
@media (min-width: 1000px) {
  .pie__final { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ===== /estilos/legal.css ===== */
/* ============================================================
   PÁGINAS LEGALES — src/layouts/Legal.astro
   ============================================================ */

.legal { max-width: 46rem; }

.legal__fecha {
  margin: -1rem 0 3rem;
  font-size: var(--t-s);
  color: var(--gris-claro);
}

.legal__texto { font-size: var(--t-base); line-height: 1.85; }

.legal__texto h2 {
  margin: 3.5rem 0 1.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linea);
  font-size: var(--t-l);
}
.legal__texto h3 {
  margin: 2.5rem 0 0.75rem;
  font-size: var(--t-m);
  font-weight: 400;
}
.legal__texto p { max-width: none; }

.legal__texto ul,
.legal__texto ol {
  margin: 0 0 1.5rem;
  padding-left: 1.5rem;
  color: var(--gris);
}
.legal__texto li { margin-bottom: 0.6rem; }

.legal__texto a { color: var(--negro); }

.legal__texto table {
  width: 100%;
  margin: 0 0 2rem;
  border-collapse: collapse;
  font-size: var(--t-s);
}
.legal__texto th,
.legal__texto td {
  padding: 0.85rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linea);
}
.legal__texto th {
  width: 12rem;
  font-family: var(--display);
  font-weight: 400;
  color: var(--gris);
}

.legal__pie {
  margin: 4rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--negro);
  font-size: var(--t-s);
}

/* ===== /estilos/aviso-cookies.css ===== */
/* ============================================================
   AVISO DE COOKIES
   ------------------------------------------------------------
   Añadido en la migración: no existe en la web de Netlify.
   Para quitarlo, borra de cada página la línea del enlace a
   estilos/aviso-cookies.css y la del guion js/aviso-cookies.js.
   Mismas reglas que el resto: hueso, línea de 1px, sin sombras.
   ============================================================ */

.cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 98;
  background: var(--hueso);
  border-top: 1px solid var(--linea);
  padding: 1.25rem 0 1.5rem;
}
.cookies[hidden] { display: none; }

.cookies__caja {
  display: grid;
  gap: 1rem;
  align-items: center;
}
.cookies__txt {
  margin: 0;
  max-width: 78ch;
  font-size: var(--t-s);
  line-height: 1.7;
  color: var(--grafito);
}
.cookies__txt a { color: var(--negro); }
.cookies__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.cookies__btn {
  min-height: var(--tap);
  padding: 0.7rem 1.9rem;
  font-size: var(--t-xs);
}

@media (min-width: 760px) {
  .cookies__caja {
    grid-template-columns: 1fr auto;
    gap: 2.5rem;
  }
  .cookies__botones { justify-content: flex-end; }
}