/* ============================================================
   TAR 2022 — CSS de componentes
   Reinicio, utilidades y todas las familias de componentes en un
   solo archivo, con los nombres de clase del original.
   ============================================================ */

/* ============================================================
   REINICIO — lo mínimo. Etiquetas HTML normales que ya salen bien.
   ============================================================ */
*,
*::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: var(--linea-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}
h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: var(--peso-titular);
  line-height: var(--linea-titular);
  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: var(--medida-texto);
  color: var(--gris);
  text-wrap: pretty;
}
a {
  color: inherit;
}
a:hover {
  color: var(--negro);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
:focus-visible {
  outline: var(--raya-foco) solid var(--negro);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   UTILIDADES — las seis clases que se repiten en toda la web.
   ============================================================ */
.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: var(--peso-titular);
  letter-spacing: var(--tracking-marca);
  text-transform: uppercase;
}
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.centrado {
  text-align: center;
}

/* ============================================================
   BOTONES — finos, de contorno y redondos del todo.
   No hay botón de relleno en reposo: el relleno es el estado hover.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: var(--tap);
  padding: 0.85rem 2.4rem;
  border: var(--raya) solid var(--negro);
  border-radius: var(--radio-pastilla);
  background: transparent;
  color: var(--negro);
  font-family: var(--display);
  font-size: var(--t-s);
  font-weight: 400;
  letter-spacing: var(--tracking-boton);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--paso),
    color var(--paso),
    border-color var(--paso);
}
.btn:hover {
  background: var(--negro);
  color: var(--blanco);
}
/* Sobre foto o sobre banda negra */
.btn--claro {
  border-color: var(--sobre-negro-borde-boton);
  color: var(--blanco);
}
.btn--claro:hover {
  background: var(--blanco);
  color: var(--negro);
}
/* Más pequeño: el que llevan las tarjetas de oferta */
.btn--corto {
  padding: 0.7rem 1.9rem;
  font-size: var(--t-xs);
}

/* Saltar al contenido: el primer foco de cada página */
.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 var(--paso-rapido);
}
.saltar:focus {
  top: 0;
}

/* ============================================================
   NÚCLEO — rótulos, cifras, iconos y la banda negra.
   ============================================================ */

/* --- Icono dentro de un círculo de contorno fino --- */
.icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border: var(--raya) solid var(--linea);
  border-radius: var(--radio-circulo);
  color: var(--grafito);
}
.icono svg {
  width: 22px;
  height: 22px;
}

/* --- Rótulo sobre fondo oscuro --- */
.espaciado--claro {
  color: var(--sobre-negro-cuerpo);
}

/* --- Cifras --- */
.cifras {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.cifras__lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cifra {
  text-align: center;
}
.cifra__valor {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.9rem, 6vw, 2.5rem);
  font-weight: var(--peso-titular);
  letter-spacing: 0.01em;
  line-height: 1;
}
.cifra__etiqueta {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--gris);
  line-height: var(--linea-apretada);
}
@media (width >= 640px) {
  .cifras__lista {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (width >= 1000px) {
  .cifras__lista {
    grid-template-columns: repeat(5, 1fr);
    gap: 3rem 1.5rem;
  }
  .cifras__lista--cuatro {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Plazas: la cifra grande metida en una frase --- */
.plazas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.plazas li {
  font-size: var(--t-s);
  color: var(--gris);
}
.plazas strong {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--display);
  font-weight: var(--peso-titular);
  font-size: var(--t-xl);
  color: var(--negro);
  line-height: 1;
}

/* --- Banda negra con el nombre de la marca --- */
.banda {
  display: grid;
  place-items: center;
  min-height: clamp(180px, 26vw, 300px);
  padding-inline: 1rem;
  background: var(--negro);
}
.banda__txt {
  margin: 0;
  color: var(--blanco);
  text-align: center;
  font-size: clamp(1.1rem, 4vw, 2.2rem);
}

/* ============================================================
   NAVEGACIÓN — cabecera pegada arriba, mega desplegable,
   menú de móvil a pantalla completa y pie negro.
   ============================================================ */

/* ---------------- Cabecera ---------------- */
.cab {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--hueso);
  border-bottom: var(--raya) solid var(--linea);
}
.cab__barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  min-height: 64px;
}
.cab__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.cab__logo img {
  width: 40px;
  height: auto;
}
.cab__nav {
  display: none;
}
.cab__nav > ul {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cab__enl {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-block: 1.6rem;
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  opacity: 0.82;
  border-bottom: var(--raya) solid transparent;
  transition:
    border-color var(--paso),
    opacity var(--paso);
}
.cab__enl:hover,
.cab__enl.es-activo {
  opacity: 1;
  border-bottom-color: currentColor;
}

/* El desplegable grande. Se abre con hover y con foco. */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--hueso);
  border-bottom: var(--raya) solid var(--linea);
  box-shadow: var(--sombra-mega);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.15s,
    visibility 0s linear var(--paso);
}
.tiene-sub:hover .mega,
.tiene-sub:focus-within .mega {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 0.15s,
    visibility linear;
}
.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: var(--peso-titular);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--negro);
}
.mega__todas {
  font-size: var(--t-s);
  letter-spacing: 0.06em;
  color: var(--gris);
  border-bottom: var(--raya) solid var(--linea);
  padding-bottom: 2px;
  text-decoration: none;
}
.mega__todas:hover {
  color: var(--negro);
  border-bottom-color: currentColor;
}
.mega__prov,
.mega__grupo {
  display: grid;
  align-content: start;
  gap: 0 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mega__prov {
  grid-template-columns: repeat(2, 1fr);
}
.mega__grupo {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.mega__prov a,
.mega__grupo a {
  display: grid;
  align-content: center;
  gap: 0.1rem;
  min-height: var(--tap);
  padding: 0.55rem 0;
  border-bottom: var(--raya) solid var(--linea);
  color: var(--grafito);
  text-decoration: none;
  transition:
    color var(--paso-rapido),
    padding-left var(--paso-rapido);
}
.mega__prov a:hover,
.mega__grupo a:hover {
  color: var(--negro);
  padding-left: 0.4rem;
}
.mega__nom {
  font-family: var(--display);
  font-size: var(--t-m);
  font-weight: var(--peso-titular);
  white-space: nowrap;
}
.mega__cuenta {
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--gris-claro);
}
@media (width >= 1240px) {
  .mega__prov {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Lado derecho: redes, teléfono y hamburguesa */
.cab__lado {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.cab__redes {
  display: none;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cab__redes a,
.cab__tel {
  display: grid;
  place-items: center;
  width: 38px;
  height: var(--tap);
  color: var(--grafito);
  text-decoration: none;
  transition: opacity var(--paso-rapido);
}
.cab__redes a:hover,
.cab__tel:hover {
  opacity: 0.6;
}
.cab__tel-txt {
  display: none;
}
.cab__menu {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  background: none;
  border: none;
  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:first-child {
  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 ---------------- */
.movil {
  position: fixed;
  inset: 64px 0 0;
  z-index: 99;
  background: var(--blanco);
  color: var(--negro);
  overflow-y: auto;
  animation: aparece 0.28s;
}
@keyframes aparece {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.movil__interior {
  padding-block: 2rem 4rem;
}
.movil__lista {
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}
.movil__lista a {
  display: flex;
  align-items: center;
  min-height: 60px;
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: var(--peso-titular);
  text-decoration: none;
  border-bottom: var(--raya) solid var(--linea);
}
.movil__sublista {
  margin: 0;
  padding: 0 0 0 1.25rem;
  list-style: none;
}
.movil__sublista a {
  font-size: var(--t-m);
  color: var(--gris);
  border-bottom-color: transparent;
}
.movil__sep {
  margin-bottom: 1rem;
}
.movil__prov {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
  background: var(--linea);
  border: var(--raya) solid var(--linea);
}
.movil__prov a {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding-inline: 1rem;
  background: var(--blanco);
  font-size: var(--t-s);
  letter-spacing: 0.06em;
  text-decoration: none;
}
.movil__btn {
  width: 100%;
}

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

/* ---------------- Miga de pan ---------------- */
.miga {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.25rem;
  font-size: var(--t-s);
  color: var(--gris);
}
.miga a {
  border-bottom: var(--raya) solid var(--linea);
  text-decoration: none;
}
.miga a:hover {
  border-bottom-color: currentColor;
}
.miga--claro {
  color: var(--sobre-negro-intro);
}
.miga--claro a {
  border-bottom-color: var(--sobre-negro-subrayado);
}

/* ---------------- Submenú de pastillas ---------------- */
.submenu {
  margin: 2rem calc(var(--margen) * -1) 0;
  padding-inline: var(--margen);
  overflow-x: auto;
  scrollbar-width: none;
}
.submenu::-webkit-scrollbar {
  display: none;
}
.submenu ul {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.submenu li {
  flex: none;
}
.submenu__enl {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 1.1rem;
  border: var(--raya) solid var(--linea);
  border-radius: var(--radio-pastilla);
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-boton);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gris);
  text-decoration: none;
  transition:
    background-color var(--paso-rapido),
    color var(--paso-rapido),
    border-color var(--paso-rapido);
}
.submenu__enl:hover {
  border-color: var(--negro);
  color: var(--negro);
}
.submenu__enl.es-activo {
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}

/* ---------------- Pie ---------------- */
.pie {
  margin-top: auto;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: var(--negro);
  color: var(--sobre-negro-cuerpo);
}
.pie__eyebrow {
  color: var(--sobre-negro-apagado);
}
.pie__cita {
  max-width: 54ch;
  margin-bottom: 3rem;
}
.pie__cita blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--peso-titular);
  font-size: var(--t-m);
  line-height: 1.55;
  color: var(--blanco);
}
.pie__nav {
  display: grid;
  gap: 1.25rem;
  padding-bottom: 2rem;
  border-bottom: var(--raya) solid var(--sobre-negro-linea);
}
.pie__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pie__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: var(--t-s);
  color: var(--sobre-negro-cuerpo);
  text-decoration: none;
  transition: color var(--paso-rapido);
}
.pie__lista a:hover {
  color: var(--blanco);
}
.pie__lista--contacto a {
  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: var(--sobre-negro-apagado);
}
.pie__legal,
.pie__redes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pie__legal a,
.pie__redes a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--sobre-negro-cuerpo);
  text-decoration: none;
}
.pie__legal a:hover,
.pie__redes a:hover {
  color: var(--blanco);
}
@media (width >= 760px) {
  .pie__nav {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3rem;
  }
  .pie__lista--contacto {
    justify-content: flex-end;
  }
}
@media (width >= 1000px) {
  .pie__final {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ============================================================
   TARJETAS — la única familia de la web con esquinas blandas.
   Regla: caja de 26px con relleno de 12px y foto de 14px dentro.
   Ninguna lleva sombra en reposo.
   ============================================================ */

/* ---------------- Tarjeta de centro ---------------- */
.tarjeta[hidden] {
  display: none;
}
.tarjeta__enl {
  display: grid;
  grid-template-columns: 38% 1fr;
  align-items: stretch;
  gap: 1.1rem;
  height: 100%;
  padding: 12px;
  background: var(--blanco);
  border: var(--raya) solid var(--linea);
  border-radius: var(--radio-l);
  text-decoration: none;
  transition:
    border-color var(--paso),
    box-shadow var(--paso);
}
.tarjeta__enl:hover,
.tarjeta__enl:focus-visible {
  border-color: var(--negro);
  box-shadow: var(--sombra-tarjeta);
}
.tarjeta__marco {
  display: block;
  height: 100%;
  overflow: hidden;
  background: var(--hueso);
  border-radius: var(--radio-m);
}
.tarjeta__marco img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tarjeta__sinfoto {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--hueso);
}
.tarjeta__texto {
  display: grid;
  align-content: center;
  gap: 0.35rem;
  padding-right: 0.4rem;
}
.tarjeta__tipo {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-claro);
}
.tarjeta__nombre {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-m);
  color: var(--negro);
  line-height: 1.25;
  text-wrap: balance;
}
.tarjeta__dir {
  font-size: var(--t-s);
  color: var(--gris);
  line-height: var(--linea-apretada);
}
.tarjeta__ir {
  justify-self: start;
  margin-top: 0.55rem;
  padding-bottom: 4px;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--negro);
  border-bottom: var(--raya) solid var(--negro);
}
/* De 640px hacia arriba la tarjeta se pone vertical: foto arriba, texto abajo */
@media (width >= 640px) {
  .tarjeta__enl {
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .tarjeta__marco {
    aspect-ratio: 4 / 3;
    height: auto;
  }
  .tarjeta__texto {
    align-content: start;
    padding: 0 0.4rem 0.5rem;
  }
}

/* Rejilla de resultados */
.resultados {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (width >= 640px) {
  .resultados {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width >= 1000px) {
  .resultados {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------------- Tarjeta de provincia ---------------- */
.provincias {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1.25rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.prov__enl {
  display: block;
  text-decoration: none;
}
.prov__marco {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--hueso-hondo);
}
.prov__marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--paso-foto) var(--curva-foto);
}
.prov__enl:hover img {
  transform: scale(1.045);
}
.prov__pendiente {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--trama-pendiente);
}
.prov__nombre {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--display);
  font-size: var(--t-m);
  font-weight: var(--peso-titular);
}
.prov__com {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--gris-claro);
}
@media (width >= 640px) {
  .provincias {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (width >= 1000px) {
  .provincias {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem 1.75rem;
  }
}

/* ---------------- Tarjeta de noticia ---------------- */
.noti__enl {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1.1rem;
  height: 100%;
  padding: 12px;
  background: var(--blanco);
  border: var(--raya) solid var(--linea);
  border-radius: var(--radio-l);
  text-decoration: none;
  transition:
    background-color var(--paso),
    border-color var(--paso),
    box-shadow var(--paso);
}
.noti__titulo,
.noti__resumen,
.noti__fecha,
.noti__ir {
  transition:
    color var(--paso),
    border-color var(--paso);
}
/* La tarjeta de noticia es la única pieza que se invierte entera al pasar
   por encima: el fondo se pone negro y el texto blanco. */
.noti__enl:hover,
.noti__enl:focus-visible {
  background: var(--negro);
  border-color: var(--negro);
  box-shadow: var(--sombra-tarjeta-oscura);
}
.noti__enl:hover .noti__titulo,
.noti__enl:focus-visible .noti__titulo {
  color: var(--blanco);
}
.noti__enl:hover .noti__resumen,
.noti__enl:focus-visible .noti__resumen {
  color: rgba(255, 255, 255, 0.78);
}
.noti__enl:hover .noti__fecha,
.noti__enl:focus-visible .noti__fecha {
  color: rgba(255, 255, 255, 0.62);
}
.noti__enl:hover .noti__ir,
.noti__enl:focus-visible .noti__ir {
  color: var(--blanco);
  border-bottom-color: var(--blanco);
}
.noti__marco {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--hueso);
  border-radius: var(--radio-m);
}
.noti__marco img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.noti__sinfoto {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--trama-pendiente);
}
.noti__tema {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 0.32rem 0.8rem;
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--radio-pastilla);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--negro);
  line-height: 1.4;
}
.noti__texto {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: 0.2rem 0.5rem 0.6rem;
}
.noti__fecha {
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--gris-claro);
}
.noti__titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-m);
  color: var(--negro);
  line-height: 1.3;
  text-wrap: balance;
}
.noti__resumen {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--t-s);
  color: var(--gris);
  line-height: 1.55;
}
.noti__ir {
  justify-self: start;
  margin-top: 0.6rem;
  padding-bottom: 4px;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--negro);
  border-bottom: var(--raya) solid var(--negro);
}
@media (width >= 900px) {
  .noti--grande {
    grid-column: 1 / -1;
  }
  .noti--grande .noti__enl {
    grid-template-rows: 1fr;
    grid-template-columns: 1.3fr 1fr;
    min-height: 400px;
  }
  .noti--grande .noti__marco {
    aspect-ratio: auto;
    height: 100%;
  }
  .noti--grande .noti__texto {
    align-content: center;
    padding-inline: clamp(1.1rem, 3vw, 2.5rem);
  }
  .noti--grande .noti__titulo {
    font-size: var(--t-xl);
    font-weight: var(--peso-titular);
    max-width: 18ch;
  }
  .noti--grande .noti__resumen {
    -webkit-line-clamp: 4;
    max-width: 46ch;
  }
}

/* ---------------- Tarjeta de oferta de empleo ---------------- */
.ofertas {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.oferta {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 2rem);
  background: var(--blanco);
  border: var(--raya) solid var(--linea);
  border-radius: var(--radio-s);
  transition: border-color var(--paso-rapido);
}
.oferta:hover {
  border-color: var(--gris-claro);
}
.oferta[hidden] {
  display: none;
}
.oferta__cabeza {
  margin-bottom: 1rem;
}
.oferta__tit {
  font-size: var(--t-l);
  margin-bottom: 0.4rem;
}
.oferta__sitio {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-s);
  color: var(--grafito);
}
.oferta__jornada {
  display: inline-block;
  margin: 0.9rem 0 0;
  padding: 0.3rem 0.85rem;
  border: var(--raya) solid var(--linea);
  border-radius: var(--radio-pastilla);
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--gris);
}
.oferta__txt {
  margin: 0 0 1.5rem;
  font-size: var(--t-s);
  line-height: var(--linea-texto);
}
.oferta__datos {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding-top: 1.25rem;
  border-top: var(--raya) solid var(--linea);
}
.oferta__datos dt {
  margin-bottom: 0.25rem;
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--gris);
}
.oferta__datos dd {
  margin: 0;
  font-size: var(--t-s);
  line-height: 1.7;
}
.oferta__pie {
  margin: auto 0 0;
  padding-top: 0.25rem;
}
.oferta__pie .btn svg {
  transition: transform var(--paso);
}
.oferta__pie .btn:hover svg {
  transform: translateX(3px);
}
@media (width >= 640px) {
  .ofertas {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width >= 1240px) {
  .ofertas {
    gap: 1.5rem;
  }
}

/* ---------------- Enlace de zona (provincia en línea) ---------------- */
.zonas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1.75rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.zona {
  display: block;
  min-height: var(--tap);
  padding: 1.1rem 0;
  border-top: var(--raya) solid var(--linea);
  text-decoration: none;
  transition: border-color var(--paso-rapido);
}
.zona:hover {
  border-top-color: var(--negro);
}
.zona__nom {
  display: block;
  font-family: var(--display);
  font-size: var(--t-m);
  font-weight: var(--peso-titular);
  color: var(--negro);
}
.zona__com {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--gris);
}
@media (width >= 900px) {
  .zonas {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   FORMULARIOS — sin cajas. Cada campo es una línea de 1px que se
   engorda a 2px cuando tiene el foco. La etiqueta va siempre encima,
   en versalitas grises. Nada mide menos de 48px de alto.
   ============================================================ */

/* Caja blanca que envuelve un formulario sobre banda hueso */
.form-caja {
  padding: clamp(1.5rem, 5vw, 2.75rem);
  background: var(--blanco);
  border: var(--raya) solid var(--linea);
}
.form__tit {
  margin-bottom: 1.75rem;
  font-size: var(--t-m);
  font-weight: 400;
}
.form__pie {
  margin: 0;
  max-width: 40ch;
  font-size: var(--t-s);
}
/* Trampa para robots: una persona no la ve nunca */
.trampa {
  position: absolute;
  left: -9999px;
}
.campos {
  display: grid;
  column-gap: 1.75rem;
}
.campo {
  margin: 0 0 1.5rem;
  max-width: none;
}
.campo label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-boton);
  text-transform: uppercase;
  color: var(--gris);
}
.campo__opc {
  margin-left: 0.4rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gris-claro);
}
.campo__pista {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--t-xs);
  color: var(--gris);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 0.75rem 0;
  border: 0;
  border-bottom: var(--raya) solid var(--linea);
  border-radius: 0;
  background: none;
  color: var(--negro);
  font-family: var(--texto);
  font-size: var(--t-base);
  line-height: 1.6;
  transition: border-color var(--paso-rapido);
}
.campo textarea {
  resize: vertical;
}
.campo select {
  appearance: none;
  cursor: pointer;
  padding-right: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236e6e6e' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  background-size: 0.75rem;
}
.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--gris-claro);
}
.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  border-bottom-color: var(--gris);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-bottom-color: var(--negro);
  border-bottom-width: var(--raya-foco);
}
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: var(--raya-foco) solid var(--negro);
  outline-offset: 3px;
}
/* Adjuntar un archivo: el botón del navegador se disfraza de .btn */
.campo input[type="file"] {
  cursor: pointer;
  padding-block: 0.85rem;
}
.campo input[type="file"]::file-selector-button {
  min-height: 40px;
  margin-right: 1rem;
  padding: 0.5rem 1.4rem;
  border: var(--raya) solid var(--negro);
  border-radius: var(--radio-pastilla);
  background: none;
  color: var(--negro);
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-boton);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--paso),
    color var(--paso);
}
.campo input[type="file"]::file-selector-button:hover {
  background: var(--negro);
  color: var(--blanco);
}
/* Casilla de consentimiento */
.acepto {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 52ch;
  margin: 0.5rem 0 2rem;
}
.acepto input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.35rem 0 0;
  accent-color: var(--negro);
}
.acepto label {
  font-size: var(--t-s);
  color: var(--gris);
  line-height: 1.6;
}
.enviar {
  display: grid;
  gap: 1rem;
}
/* Aviso de protección de datos */
.aviso {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: var(--raya) solid var(--linea);
}
.aviso__tit {
  margin-bottom: 0.75rem;
}
.aviso__txt {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--gris);
  line-height: 1.8;
}
@media (width >= 640px) {
  .campos {
    grid-template-columns: 1fr 1fr;
  }
  .campo--ancho {
    grid-column: 1 / -1;
  }
  .enviar {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 1.75rem;
  }
}

/* ---------------- Buscador: el único campo con caja ---------------- */
.campo-buscador {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: 520px;
  min-height: 58px;
  padding-inline: 1.35rem;
  border: var(--raya) solid var(--negro);
}
.campo-buscador:focus-within {
  outline: var(--raya-foco) solid var(--negro);
  outline-offset: 2px;
}
.campo-buscador input {
  flex: 1;
  min-width: 0;
  padding-block: 1rem;
  border: none;
  background: none;
  color: var(--negro);
  font-family: var(--texto);
  font-size: var(--t-base);
}
.campo-buscador input:focus {
  outline: none;
}
.ayuda {
  margin: 0.9rem 0 0;
  max-width: 62ch;
  font-size: var(--t-s);
  color: var(--gris-claro);
}
.cuenta {
  margin: 2rem 0 1rem;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--gris-claro);
}

/* ---------------- Fichas de filtro ---------------- */
.fichas {
  display: flex;
  gap: 0.5rem;
  margin: 1.25rem calc(var(--margen) * -1) 0;
  padding: 0 var(--margen);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.fichas::-webkit-scrollbar {
  display: none;
}
.ficha {
  flex: none;
  min-height: var(--tap-corto);
  padding-inline: 1.1rem;
  background: none;
  border: var(--raya) solid var(--linea);
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-boton);
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--paso-rapido),
    color var(--paso-rapido),
    border-color var(--paso-rapido);
}
.ficha:hover {
  color: var(--negro);
  border-color: var(--gris);
}
.ficha.es-activa {
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}
/* En Empleo las mismas fichas van redondeadas del todo */
.ficha--pastilla {
  border-radius: var(--radio-pastilla);
}

/* ============================================================
   BLOQUES — las piezas grandes que arman una página:
   héroes, cabeceras oscuras, desplegables, llamadas y carruseles.
   ============================================================ */

/* ---------------- Héroe de portada ---------------- */
.heroe {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 82svh;
  overflow: hidden;
  background: var(--negro);
}
.heroe__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.heroe__velo {
  position: absolute;
  inset: 0;
  background: var(--velo-heroe);
}
.heroe__logo {
  position: relative;
  width: clamp(200px, 42vw, 400px);
  height: auto;
}

/* ---------------- Cabecera oscura de sección ---------------- */
.cabecera-oscura {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
  background: var(--negro);
  color: var(--sobre-negro-cuerpo);
}
.cabecera-oscura__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.cabecera-oscura__velo {
  position: absolute;
  inset: 0;
  background: var(--velo-cabecera);
}
.cabecera-oscura__rejilla {
  position: relative;
  display: grid;
  gap: 0;
}
.cabecera-oscura__rotulo {
  color: var(--sobre-negro-cuerpo);
}
.cabecera-oscura__tit {
  max-width: var(--medida-titular);
  color: var(--blanco);
}
.cabecera-oscura__intro {
  margin-bottom: 0;
  max-width: 54ch;
  font-size: var(--t-m);
  color: var(--sobre-negro-intro);
}
/* La columna del teléfono, separada por una línea */
.llamar {
  margin-top: clamp(2.5rem, 6vw, 3.25rem);
  padding-top: clamp(2rem, 5vw, 2.5rem);
  border-top: var(--raya) solid var(--sobre-negro-linea-fuerte);
}
.tel {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--blanco);
  text-decoration: none;
}
.tel__num {
  font-family: var(--display);
  font-size: clamp(2rem, 8vw, 2.9rem);
  font-weight: var(--peso-titular);
  line-height: 1.15;
  border-bottom: var(--raya) solid var(--sobre-negro-subrayado);
  transition: border-color var(--paso-rapido);
}
.tel:hover .tel__num {
  border-color: var(--blanco);
}
.cabecera-oscura__pie {
  margin: 0.75rem 0 0;
  max-width: 36ch;
  font-size: var(--t-s);
  color: rgba(255, 255, 255, 0.75);
}
@media (width >= 900px) {
  .cabecera-oscura__rejilla--dos {
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .cabecera-oscura__rejilla--dos .llamar {
    margin-top: 0;
    padding: 0 0 0 clamp(2.5rem, 5vw, 4.5rem);
    border-top: 0;
    border-left: var(--raya) solid var(--sobre-negro-linea-fuerte);
  }
}

/* ---------------- Portada de ficha (foto + velo) ---------------- */
.portada {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem);
}
.portada:not(.portada--foto) {
  border-bottom: var(--raya) solid var(--linea);
}
.portada__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portada__velo {
  position: absolute;
  inset: 0;
  background: var(--velo-portada);
}
.portada__texto {
  position: relative;
}
.portada--foto {
  color: var(--blanco);
}
.portada--foto h1 {
  color: var(--blanco);
}
.portada--foto .portada__tipo,
.portada--foto .donde,
.portada--foto .nota {
  color: var(--sobre-negro-intro);
}
.donde {
  max-width: 46ch;
  font-size: var(--t-m);
}
.donde__enl {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 2px;
  border-bottom: var(--raya) solid var(--sobre-negro-subrayado);
  text-decoration: none;
}
.donde__enl:hover {
  border-bottom-color: currentColor;
}
.portada:not(.portada--foto) .donde__enl {
  border-bottom-color: var(--linea);
}
.acciones {
  display: grid;
  justify-items: stretch;
  gap: 0.85rem;
  margin-top: 2rem;
}
.nota {
  margin-top: 1rem;
  font-size: var(--t-s);
  color: var(--gris-claro);
}
@media (width >= 640px) {
  .acciones {
    grid-auto-flow: column;
    justify-content: start;
    justify-items: start;
  }
}
@media (width >= 1000px) {
  .portada {
    padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6.5rem);
  }
}

/* ---------------- Desplegables de la ficha ---------------- */
.detalle {
  display: grid;
  gap: 0;
}
.apartado {
  border-top: var(--raya) solid var(--linea);
}
.apartado:last-child {
  border-bottom: var(--raya) solid var(--linea);
}
.apartado summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: var(--tap);
  padding-block: 1.1rem;
  list-style: none;
  cursor: pointer;
}
.apartado summary::-webkit-details-marker {
  display: none;
}
.apartado summary:focus-visible {
  outline: var(--raya-foco) solid var(--negro);
  outline-offset: 3px;
}
.detalle h2 {
  margin: 0;
  font-size: var(--t-l);
}
.apartado__flecha {
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--gris);
  border-bottom: 1.5px solid var(--gris);
  transform: rotate(-45deg);
  transition: transform var(--paso);
}
.apartado[open] .apartado__flecha {
  transform: rotate(45deg);
}
.apartado__cuerpo {
  max-width: 70ch;
  padding-bottom: 1.6rem;
}
.apartado__cuerpo > :last-child {
  margin-bottom: 0;
}
@media (width >= 1000px) {
  .apartado summary {
    padding-block: 1.4rem;
  }
  .apartado__cuerpo {
    padding-bottom: 2rem;
  }
}

/* ---------------- Preguntas frecuentes ---------------- */
.faq {
  border-top: var(--raya) solid var(--linea);
}
.pregunta {
  border-bottom: var(--raya) solid var(--linea);
}
.pregunta summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--tap);
  padding-block: 1.25rem;
  list-style: none;
  cursor: pointer;
}
.pregunta summary::-webkit-details-marker {
  display: none;
}
.pregunta summary:focus-visible {
  outline: var(--raya-foco) solid var(--negro);
  outline-offset: 3px;
}
.pregunta__txt {
  font-family: var(--display);
  font-size: var(--t-m);
  font-weight: var(--peso-titular);
}
/* El "más" que se convierte en "menos" al abrirse */
.pregunta__mas {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.pregunta__mas::before,
.pregunta__mas::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--negro);
}
.pregunta__mas::after {
  transform: rotate(90deg);
  transition: transform var(--paso);
}
.pregunta[open] .pregunta__mas::after {
  transform: rotate(0);
}
.pregunta__resp {
  margin: 0;
  padding-bottom: 1.5rem;
  max-width: 68ch;
  font-size: var(--t-s);
  line-height: 1.8;
}

/* ---------------- Servicios y listas de línea ---------------- */
.lista-servicios {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lista-servicios li {
  padding-block: 0.8rem;
  border-top: var(--raya) solid var(--linea);
  color: var(--gris);
}
@media (width >= 1000px) {
  .lista-servicios {
    columns: 2;
    column-gap: 3rem;
  }
  .lista-servicios li {
    break-inside: avoid;
  }
}

/* Bloques con línea arriba (valores, servicios, cierre) */
.bloques-linea {
  display: grid;
  gap: 2.5rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.bloque-linea {
  padding-top: 1.75rem;
  border-top: var(--raya) solid var(--linea);
}
.bloque-linea--fuerte {
  border-top-color: var(--negro);
}
.bloque-linea__tit {
  margin-bottom: 0.5rem;
  font-size: var(--t-m);
}
.bloque-linea__txt {
  margin: 0;
  font-size: var(--t-s);
}
@media (width >= 640px) {
  .bloques-linea {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2.5rem;
  }
  .bloques-linea--tres {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (width >= 1000px) {
  .bloques-linea--tres-anchas {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------------- Pasos numerados ---------------- */
.pasos {
  display: grid;
  gap: 1.75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.paso {
  padding-top: 1.25rem;
  border-top: var(--raya) solid var(--linea);
}
.paso__num {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--display);
  font-size: var(--t-m);
  font-weight: var(--peso-titular);
  letter-spacing: 0.08em;
  color: var(--gris);
}
.paso__tit {
  margin-bottom: 0.3rem;
  font-size: var(--t-base);
  font-weight: 400;
}
.paso__txt {
  margin: 0;
  font-size: var(--t-s);
}

/* ---------------- Llamada final ---------------- */
.llamada {
  padding-block: 0 var(--bloque);
}
.llamada--suelta {
  padding-block: var(--bloque);
}
.llamada__caja {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-top: var(--raya) solid var(--linea);
}
.llamada__caja--sin-linea {
  border-top: 0;
  padding-block: 0;
}
.llamada__botones {
  display: grid;
  justify-items: stretch;
  gap: 0.85rem;
}
@media (width >= 640px) {
  .llamada__botones {
    grid-auto-flow: column;
    justify-content: start;
    justify-items: start;
  }
}
@media (width >= 1000px) {
  .llamada__caja {
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
  }
  .llamada__botones {
    grid-auto-flow: row;
    justify-items: stretch;
  }
}

/* ---------------- Tira de fotos ---------------- */
.tira {
  position: relative;
}
.tira__lista {
  display: flex;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--linea);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.tira__lista::-webkit-scrollbar {
  display: none;
}
.tira__lista li {
  flex: 1 0 78%;
  min-width: 0;
  scroll-snap-align: start;
}
.tira__lista img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.tira__mandos {
  position: absolute;
  inset: 0;
  display: none;
  justify-content: space-between;
  align-items: center;
  padding-inline: clamp(0.75rem, 1.5vw, 1.5rem);
  pointer-events: none;
}
.tira__flecha {
  pointer-events: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: var(--raya) solid var(--linea);
  border-radius: var(--radio-pastilla);
  background: var(--blanco);
  color: var(--negro);
  cursor: pointer;
  transition:
    background-color var(--paso),
    color var(--paso),
    border-color var(--paso),
    opacity var(--paso);
}
.tira__flecha:hover:not(:disabled) {
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}
.tira__flecha:disabled {
  opacity: 0.4;
  cursor: default;
}
@media (width >= 640px) {
  .tira__lista li {
    flex-basis: 40%;
  }
}
@media (width >= 1000px) {
  .tira__lista li {
    flex-basis: calc(33.3333% - 0.666667px);
  }
  .tira__lista:has(li:nth-child(4)) li {
    flex-basis: 30.303%;
  }
  .tira__mandos {
    display: flex;
  }
}

/* ============================================================
   PATRONES DE PÁGINA — lo que no es componente pero se repite:
   entradillas, rejillas de dos columnas, bloques de proyecto y
   la página de leer.
   ============================================================ */

/* Entradilla debajo del titular de sección */
.intro {
  margin-bottom: 2.5rem;
  max-width: 50ch;
  font-size: var(--t-m);
}

/* Mensajes del buscador */
.pista {
  margin-top: 0.5rem;
  max-width: 52ch;
}
.pista a {
  color: var(--negro);
}
.cercanos {
  margin: 0 0 1.25rem;
  max-width: 56ch;
  font-size: var(--t-s);
  color: var(--grafito);
}
.cercanos strong {
  font-weight: var(--peso-enfasis);
}
.vacio {
  margin-top: 1.5rem;
}
/* Con JavaScript los resultados arrancan escondidos */
html.con-js .resultados {
  display: none;
}
html.con-js .resultados.se-ve {
  display: grid;
}

/* Rejilla de dos columnas: lateral estrecho + contenido */
.rejilla {
  display: grid;
  gap: 3.5rem;
}
.lateral__tit {
  margin-bottom: 0;
  font-size: var(--t-m);
  font-weight: 400;
}
.correo {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: var(--raya) solid var(--linea);
}
.correo__tit {
  margin-bottom: 0.25rem;
}
.correo__enl {
  margin: 0;
}
.correo__enl a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--negro);
  border-bottom: var(--raya) solid var(--linea);
  text-decoration: none;
  transition: border-color var(--paso-rapido);
}
.correo__enl a:hover {
  border-color: var(--negro);
}
.correo__pie {
  margin: 0.5rem 0 0;
  max-width: 34ch;
  font-size: var(--t-s);
  color: var(--gris);
}
@media (width >= 900px) {
  .rejilla {
    grid-template-columns: 1fr minmax(0, 1.35fr);
    align-items: start;
    gap: 4.5rem;
  }
}

/* Resumen de cifras de una provincia */
.resumen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.resumen__n {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  font-weight: var(--peso-titular);
  line-height: 1;
}
.resumen__et {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--gris);
}
/* Presentación de la provincia: párrafo grande + lista de pueblos */
.presenta {
  display: grid;
  gap: 2.5rem;
}
.presenta__txt {
  margin: 0;
  font-size: var(--t-m);
  color: var(--grafito);
}
.presenta__tit {
  margin-bottom: 1rem;
  font-size: var(--t-m);
  font-weight: 400;
}
.pueblos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pueblos li {
  padding: 0.45rem 0.95rem;
  background: var(--blanco);
  border: var(--raya) solid var(--linea);
  font-size: var(--t-s);
  color: var(--gris);
}
@media (width >= 640px) {
  .resumen {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (width >= 1000px) {
  .presenta {
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
  }
  .presenta__txt {
    font-size: var(--t-l);
    font-weight: var(--peso-titular);
    line-height: 1.5;
  }
}

/* Proyectos: bloques que alternan foto y datos */
.obras {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.obra {
  display: grid;
  gap: 1.5rem;
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: var(--raya) solid var(--linea);
}
.obra:first-child {
  padding-top: 0;
  border-top: 0;
}
.obra__marco {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--hueso-hondo);
  border-radius: var(--radio-s);
}
.obra__marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.obra__pendiente {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--trama-pendiente);
}
.obra__sociedad {
  margin-bottom: 0.6rem;
}
.obra__tit {
  margin-bottom: 1.75rem;
  font-size: var(--t-l);
}
.obra__tipo,
.obra__nombre {
  display: block;
}
.obra__enlace {
  margin: 1rem 0 0;
  max-width: none;
}
.obra__enlace a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--t-s);
  color: var(--negro);
  border-bottom: var(--raya) solid var(--linea);
  text-decoration: none;
  transition: border-color var(--paso-rapido);
}
.obra__enlace a:hover {
  border-color: var(--negro);
}
.obra__nota {
  margin: 1.75rem 0 0;
  max-width: 60ch;
  font-size: var(--t-xs);
  color: var(--gris);
  line-height: 1.7;
}
.datos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1.5rem;
}
.dato__tit {
  margin-bottom: 0.5rem;
  font-size: var(--t-base);
  font-weight: 400;
}
.dato__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-s);
  color: var(--gris);
  line-height: 1.6;
}
@media (width >= 640px) {
  .datos {
    gap: clamp(2rem, 4vw, 3.25rem) 2rem;
  }
  .dato__tit {
    margin-bottom: 0.6rem;
    font-size: var(--t-m);
  }
  .dato__lista {
    font-size: var(--t-base);
    line-height: var(--linea-texto);
  }
}
@media (width >= 900px) {
  .obra {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(2.5rem, 4vw, 4rem);
  }
  /* Los pares se dan la vuelta: foto a la derecha, datos alineados a la derecha */
  .obra:nth-child(2n) .obra__columna {
    order: 2;
    text-align: right;
  }
}

/* Dirección y enlace al mapa (ficha de centro) */
.direccion {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 1.1rem;
  font-style: normal;
  color: var(--gris);
}
.mapa-enl {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-bottom: 3px;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--negro);
  border-bottom: var(--raya) solid var(--negro);
  text-decoration: none;
}
.mapa-enl:hover {
  opacity: 0.6;
}

/* Página de leer: una sola columna */
.legal {
  max-width: 78ch;
}
.legal__fecha {
  font-size: var(--t-s);
  color: var(--gris-claro);
}
.legal__texto h2 {
  margin-top: 2.5rem;
  font-size: var(--t-l);
}
.legal__texto h3 {
  margin-top: 2rem;
  font-size: var(--t-m);
}
.legal__texto table {
  width: 100%;
  margin: 1.5rem 0 2rem;
  border-collapse: collapse;
  font-size: var(--t-s);
}
.legal__texto th,
.legal__texto td {
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: var(--raya) solid var(--linea);
  text-align: left;
  vertical-align: top;
  color: var(--gris);
}
.legal__texto th {
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--negro);
}
.legal__texto ul {
  margin: 0 0 1.1em;
  padding-left: 1.2rem;
  color: var(--gris);
}
.legal__texto li {
  margin-bottom: 0.4rem;
}


/* ============================================================
   EXTENSIONES — familias que la web pública no tiene y que una
   intranet o un formulario largo sí necesita. Diseñadas con las
   mismas cuatro reglas: monocromo, Roboto, líneas de 1px y aire.
   ============================================================ */

/* ---------------- Grupo de campos ---------------- */
.grupo-campos {
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
  border-top: var(--raya) solid var(--linea);
}
.grupo-campos > legend {
  padding: 0 0 1.25rem;
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-ancho);
  text-transform: uppercase;
  color: var(--gris);
}
.grupo-campos__pie {
  margin: 0.25rem 0 0;
  max-width: 60ch;
  font-size: var(--t-s);
  color: var(--gris);
}

/* ---------------- Radios y casillas ---------------- */
.opciones {
  display: grid;
  gap: 0;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.opciones--fila {
  grid-auto-flow: column;
  justify-content: start;
  gap: 2rem;
}
.opcion {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: var(--tap);
  padding-block: 0.75rem;
  border-top: var(--raya) solid var(--linea);
  cursor: pointer;
}
.opciones--fila .opcion {
  border-top: 0;
  padding-block: 0;
  align-items: center;
}
.opcion:last-child {
  border-bottom: var(--raya) solid var(--linea);
}
.opciones--fila .opcion:last-child {
  border-bottom: 0;
}
.opcion input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.28rem 0 0;
  accent-color: var(--negro);
}
.opciones--fila .opcion input {
  margin: 0;
}
.opcion__texto {
  display: grid;
  gap: 0.15rem;
}
.opcion__tit {
  color: var(--negro);
  line-height: 1.4;
}
.opcion__pie {
  font-size: var(--t-s);
  color: var(--gris);
  line-height: 1.5;
}
.opcion:hover {
  border-top-color: var(--gris);
}
.opciones--fila .opcion:hover {
  border-top-color: transparent;
}

/* ---------------- Interruptor ---------------- */
.interruptor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--tap);
  padding-block: 0.85rem;
  border-top: var(--raya) solid var(--linea);
  cursor: pointer;
}
.interruptor:last-of-type {
  border-bottom: var(--raya) solid var(--linea);
}
.interruptor__texto {
  display: grid;
  gap: 0.15rem;
}
.interruptor__pie {
  font-size: var(--t-s);
  color: var(--gris);
}
.interruptor__pista {
  position: relative;
  flex: none;
  width: 48px;
  height: 26px;
  border: var(--raya) solid var(--negro);
  border-radius: var(--radio-pastilla);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background-color var(--paso);
}
.interruptor__pista::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radio-circulo);
  background: var(--negro);
  transition: transform var(--paso);
}
.interruptor__pista[aria-checked="true"] {
  background: var(--negro);
}
.interruptor__pista[aria-checked="true"]::after {
  background: var(--blanco);
  transform: translateX(22px);
}
.interruptor__pista:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---------------- Mensaje de validación ---------------- */
.mensaje-campo {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--t-xs);
  line-height: 1.6;
}
.mensaje-campo--pista {
  color: var(--gris);
}
.mensaje-campo--error {
  color: var(--error);
}
.mensaje-campo--ok {
  color: var(--ok);
}
/* Un campo con error engorda su línea y se pone del color del estado */
.campo--error input,
.campo--error select,
.campo--error textarea {
  border-bottom-color: var(--error);
  border-bottom-width: var(--raya-foco);
}
.campo--ok input,
.campo--ok select,
.campo--ok textarea {
  border-bottom-color: var(--ok);
}

/* ---------------- Barra de pasos ---------------- */
.barra-pasos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}
.barra-pasos li {
  padding-top: 0.85rem;
  border-top: var(--raya-foco) solid var(--linea);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--gris-claro);
}
.barra-pasos li + li {
  padding-left: 1rem;
}
.barra-pasos li.es-hecho {
  border-top-color: var(--gris);
  color: var(--gris);
}
.barra-pasos li.es-actual {
  border-top-color: var(--negro);
  color: var(--negro);
}
.barra-pasos__n {
  display: block;
  font-family: var(--display);
  font-size: var(--t-m);
  font-weight: var(--peso-titular);
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
}

/* ---------------- Aviso en línea ---------------- */
.aviso-linea {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 1.35rem;
  border-left: 3px solid var(--negro);
  background: var(--hueso);
}
.aviso-linea__tit {
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-boton);
  text-transform: uppercase;
  color: var(--negro);
}
.aviso-linea p {
  margin: 0;
  max-width: 68ch;
  font-size: var(--t-s);
  color: var(--grafito);
  line-height: 1.65;
}
.aviso-linea--error {
  border-left-color: var(--error);
  background: var(--error-tinte);
}
.aviso-linea--error .aviso-linea__tit {
  color: var(--error);
}
.aviso-linea--ok {
  border-left-color: var(--ok);
  background: var(--ok-tinte);
}
.aviso-linea--ok .aviso-linea__tit {
  color: var(--ok);
}
.aviso-linea--alerta {
  border-left-color: var(--alerta);
  background: var(--alerta-tinte);
}
.aviso-linea--alerta .aviso-linea__tit {
  color: var(--alerta);
}

/* ---------------- Notificación flotante ---------------- */
.notificaciones {
  position: fixed;
  right: var(--margen);
  bottom: var(--margen);
  z-index: 200;
  display: grid;
  gap: 0.75rem;
  width: min(380px, calc(100vw - var(--margen) * 2));
}
.notificacion {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--negro);
  color: var(--sobre-negro-intro);
  box-shadow: var(--sombra-tarjeta-oscura);
  animation: notificacion-entra 0.28s;
}
@keyframes notificacion-entra {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.notificacion__tit {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-boton);
  text-transform: uppercase;
  color: var(--blanco);
}
.notificacion p {
  margin: 0;
  font-size: var(--t-s);
  color: var(--sobre-negro-cuerpo);
  line-height: 1.55;
  max-width: none;
}
.notificacion__cerrar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sobre-negro-cuerpo);
  cursor: pointer;
  transition: opacity var(--paso-rapido);
}
.notificacion__cerrar:hover {
  opacity: 0.6;
}

/* ---------------- Estado vacío ---------------- */
.estado-vacio {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--margen);
  border: var(--raya) solid var(--linea);
  text-align: center;
}
.estado-vacio__tit {
  margin: 0.5rem 0 0;
  font-family: var(--display);
  font-size: var(--t-l);
  font-weight: var(--peso-titular);
  color: var(--negro);
}
.estado-vacio p {
  margin: 0;
  max-width: 46ch;
  font-size: var(--t-s);
}
.estado-vacio__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-top: 1.25rem;
}

/* ---------------- Cargando ---------------- */
.cargando {
  display: grid;
  gap: 0.75rem;
}
.cargando i {
  display: block;
  height: 12px;
  background: var(--hueso-hondo);
  animation: cargando-late 1.4s ease-in-out infinite;
}
.cargando i:nth-child(2) {
  animation-delay: 0.12s;
}
.cargando i:nth-child(3) {
  animation-delay: 0.24s;
}
@keyframes cargando-late {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
.cargando__texto {
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--gris-claro);
}

/* ---------------- Barra de progreso ---------------- */
.progreso {
  display: grid;
  gap: 0.5rem;
}
.progreso__pista {
  height: 3px;
  background: var(--hueso-hondo);
}
.progreso__valor {
  height: 100%;
  background: var(--negro);
  transition: width var(--paso);
}
.progreso__etiqueta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--gris);
}

/* ---------------- Pestañas ---------------- */
.pestanas {
  display: flex;
  gap: 2rem;
  margin: 0 calc(var(--margen) * -1) 2.5rem;
  padding: 0 var(--margen);
  list-style: none;
  border-bottom: var(--raya) solid var(--linea);
  overflow-x: auto;
  scrollbar-width: none;
}
.pestanas::-webkit-scrollbar {
  display: none;
}
.pestana {
  flex: none;
  min-height: var(--tap);
  padding: 0 0 0.9rem;
  border: 0;
  border-bottom: var(--raya-foco) solid transparent;
  background: none;
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--paso-rapido),
    border-color var(--paso-rapido);
}
.pestana:hover {
  color: var(--negro);
}
.pestana[aria-selected="true"] {
  color: var(--negro);
  border-bottom-color: var(--negro);
}
.pestana__cuenta {
  margin-left: 0.5rem;
  color: var(--gris-claro);
}

/* ---------------- Paginación ---------------- */
.paginacion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: var(--raya) solid var(--linea);
  list-style: none;
}
.paginacion__nota {
  margin-right: auto;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--gris-claro);
}
.paginacion button {
  min-width: var(--tap);
  min-height: var(--tap);
  padding-inline: 0.5rem;
  border: var(--raya) solid var(--linea);
  border-radius: var(--radio-pastilla);
  background: none;
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--gris);
  cursor: pointer;
  transition:
    background-color var(--paso-rapido),
    color var(--paso-rapido),
    border-color var(--paso-rapido);
}
.paginacion button:hover:not(:disabled) {
  border-color: var(--negro);
  color: var(--negro);
}
.paginacion button[aria-current="page"] {
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}
.paginacion button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---------------- Panel lateral (intranet) ---------------- */
.lateral-nav {
  display: grid;
  align-content: start;
  gap: 0;
  padding: 2rem 0;
  background: var(--hueso);
  border-right: var(--raya) solid var(--linea);
  min-height: 100%;
}
.lateral-nav__marca {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: var(--tap);
  margin: 0 1.5rem 2rem;
  text-decoration: none;
}
.lateral-nav__marca img {
  width: 34px;
  height: auto;
}
.lateral-nav__marca span {
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--negro);
}
.lateral-nav__rotulo {
  margin: 1.75rem 1.5rem 0.5rem;
}
.lateral-nav__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lateral-nav__enl {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: var(--tap);
  padding: 0.6rem 1.5rem;
  border-left: 3px solid transparent;
  color: var(--grafito);
  text-decoration: none;
  transition:
    color var(--paso-rapido),
    border-color var(--paso-rapido),
    background-color var(--paso-rapido);
}
.lateral-nav__enl:hover {
  color: var(--negro);
  background: var(--hueso-hondo);
}
.lateral-nav__enl.es-activo {
  color: var(--negro);
  border-left-color: var(--negro);
  background: var(--blanco);
}
.lateral-nav__enl svg {
  flex: none;
  color: var(--gris);
}
.lateral-nav__enl.es-activo svg {
  color: var(--negro);
}
.lateral-nav__cuenta {
  margin-left: auto;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  color: var(--gris-claro);
}

/* ---------------- Tabla de datos ---------------- */
.tabla-marco {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-s);
}
.tabla caption {
  text-align: left;
  padding-bottom: 1rem;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--gris-claro);
}
.tabla th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  white-space: nowrap;
  padding: 0 1.5rem 0.85rem 0;
  background: var(--blanco);
  border-bottom: var(--raya) solid var(--negro);
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--negro);
}
.tabla td {
  padding: 1rem 1.5rem 1rem 0;
  border-bottom: var(--raya) solid var(--linea);
  vertical-align: top;
  color: var(--gris);
  line-height: 1.6;
}
.tabla tbody tr {
  transition: background-color var(--paso-rapido);
}
.tabla tbody tr:hover {
  background: var(--hueso);
}
.tabla td:first-child,
.tabla th:first-child {
  padding-left: 0.85rem;
}
.tabla td:last-child,
.tabla th:last-child {
  padding-right: 0.85rem;
}
.tabla__fuerte {
  color: var(--negro);
}
.tabla__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
th.tabla__num {
  text-align: right;
}

/* ---------------- Etiqueta ---------------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  border: var(--raya) solid var(--linea);
  border-radius: var(--radio-pastilla);
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
}
.etiqueta--fuerte {
  border-color: var(--negro);
  color: var(--negro);
}
.etiqueta--maciza {
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}
.etiqueta--error {
  border-color: var(--error);
  color: var(--error);
}
.etiqueta--ok {
  border-color: var(--ok);
  color: var(--ok);
}
.etiqueta--alerta {
  border-color: var(--alerta);
  color: var(--alerta);
}
.etiqueta__punto {
  width: 6px;
  height: 6px;
  border-radius: var(--radio-circulo);
  background: currentColor;
}

/* ---------------- Panel ---------------- */
.panel {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--blanco);
  border: var(--raya) solid var(--linea);
}
.panel--hueso {
  background: var(--hueso);
}
.panel__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.1rem;
  border-bottom: var(--raya) solid var(--linea);
}
.panel__tit {
  margin: 0;
  font-size: var(--t-m);
  font-weight: 400;
}
.panel__pie {
  margin: 1.5rem 0 0;
  padding-top: 1.1rem;
  border-top: var(--raya) solid var(--linea);
  font-size: var(--t-s);
}

/* ---------------- Lista de datos ---------------- */
.lista-datos {
  display: grid;
  gap: 1.25rem;
  margin: 0;
}
.lista-datos dt {
  margin-bottom: 0.25rem;
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--gris);
}
.lista-datos dd {
  margin: 0;
  font-size: var(--t-s);
  color: var(--grafito);
  line-height: 1.7;
}
@media (width >= 640px) {
  .lista-datos--dos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 2.5rem;
  }
  .lista-datos--tres {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem 2.5rem;
  }
}

/* ---------------- Diálogo ---------------- */
.dialogo-fondo {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: var(--margen);
  background: rgba(20, 18, 16, 0.55);
  animation: aparece 0.2s;
}
.dialogo {
  width: min(560px, 100%);
  max-height: calc(100vh - var(--margen) * 2);
  overflow-y: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--blanco);
  border: var(--raya) solid var(--negro);
}
.dialogo__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.dialogo__tit {
  margin: 0;
  font-size: var(--t-l);
}
.dialogo__cerrar {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  padding: 0;
  border: var(--raya) solid var(--linea);
  border-radius: var(--radio-pastilla);
  background: none;
  color: var(--negro);
  cursor: pointer;
  transition:
    background-color var(--paso),
    color var(--paso),
    border-color var(--paso);
}
.dialogo__cerrar:hover {
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}
.dialogo__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: var(--raya) solid var(--linea);
}

/* ---------------- Menú de acciones ---------------- */
.menu-acciones {
  position: relative;
  display: inline-block;
}
.menu-acciones__lista {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 150;
  min-width: 220px;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: var(--blanco);
  border: var(--raya) solid var(--linea);
  box-shadow: var(--sombra-mega);
}
.menu-acciones__enl {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: var(--tap);
  padding: 0.5rem 1.1rem;
  border: 0;
  background: none;
  font-family: var(--texto);
  font-size: var(--t-s);
  color: var(--grafito);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--paso-rapido),
    color var(--paso-rapido);
}
.menu-acciones__enl:hover {
  background: var(--hueso);
  color: var(--negro);
}
.menu-acciones__sep {
  height: 1px;
  margin: 0.4rem 0;
  background: var(--linea);
}
.menu-acciones__enl--peligro {
  color: var(--error);
}