/* ==========================================================================
   BASE COMÚN · v1.3 · 28/10/2026
   Sistema de diseño compartido por todas las webs de la cartera.

   Misma estructura por dentro, distinta piel por fuera:
   - Este archivo NO se edita para una web concreta.
   - Cada web carga después su piel (css/piel.css, copiada de
     pieles/_plantilla-piel.css), que solo sobrescribe tokens de :root.
   - Si a una web le falta algo, se añade aquí, se sube la versión y se
     anota en README.md.

   Índice
   1. Tokens (piel neutra por defecto)
   2. Reinicio y elementos
   3. Superficies del navegador (selección, foco, barras, números)
   4. Maquetación: contenedor, secciones, pila, rejilla
   5. Tipografía de lectura (.prosa)
   6. Iconos y utilidades
   7. Cabecera, navegación y migas de pan
   8. Portada (hero)
   9. Botones
   10. Llamada a la acción, «qué pasa después» y confianza
   11. Formulario «te llamamos»
   12. Precios
   13. Preguntas frecuentes
   14. Notas y fuentes citadas
   15. Autor, verificación y metadatos de artículo
   16. Servicios, zonas y casos
   17. Herramienta / calculadora
   18. Pie, banner de cookies y barra de contacto móvil
   19. Movimiento reducido e impresión
   ========================================================================== */


/* 1. TOKENS ================================================================
   Piel neutra: sirve para la galería y como red de seguridad. Cada web la
   sustituye entera en su piel. Contraste comprobado (WCAG 2.2 AA):
   texto 18:1, texto suave 7,9:1, marca sobre blanco 8,7:1, borde de
   campo 3,6:1, foco 5,8:1.                                                  */

:root {
  /* Color · superficies */
  --color-fondo: #f5f6f8;
  --color-superficie: #ffffff;
  --color-superficie-alt: #eceff3;
  --color-texto: #12161b;
  --color-texto-suave: #48525d;
  --color-linea: #d9dee4;
  --color-linea-campo: #7d8894;

  /* Color · marca */
  --color-marca: #1e4e79;
  --color-marca-intensa: #163a5b;
  --color-sobre-marca: #ffffff;
  --color-marca-tenue: #e8eff6;
  --color-enlace: var(--color-marca);
  --color-foco: #1d5fd1;
  --color-seleccion: color-mix(in srgb, var(--color-marca) 20%, transparent);

  /* Color · banda oscura (pie, llamadas fuertes) */
  --color-banda: #12161b;
  --color-sobre-banda: #eef1f4;
  --color-sobre-banda-suave: #b4bcc6;

  /* Color · estados (también el semáforo de las herramientas) */
  --color-ok: #1b6b3c;
  --color-ok-tenue: #e6f3ea;
  --color-aviso: #8a4b00;
  --color-aviso-tenue: #fdf1df;
  --color-error: #b42318;
  --color-error-tenue: #fdecea;

  /* Color · luces de las herramientas tipo semáforo (sobre la banda oscura) */
  --color-luz-apagada: #3a4048;
  --color-luz-verde: #1fcb74;
  --color-luz-ambar: #ffb020;
  --color-luz-roja: #ff4d4f;
  --tam-luz: 0.85rem;

  /* Tipografía */
  --fuente-titulos: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --peso-normal: 400;
  --peso-fuerte: 600;
  --peso-titulos: 700;
  --tracking-titulos: -0.018em;
  --interlineado: 1.6;
  --interlineado-titulos: 1.15;

  /* Escala tipográfica fluida (360 px → 1280 px) */
  --texto-xs: 0.8125rem;
  --texto-s: 0.9375rem;
  --texto-m: clamp(1rem, 0.975rem + 0.11vw, 1.0625rem);
  --texto-l: clamp(1.125rem, 1.07rem + 0.24vw, 1.25rem);
  --titulo-4: 1.125rem;
  --titulo-3: clamp(1.2rem, 1.12rem + 0.36vw, 1.4rem);
  --titulo-2: clamp(1.5rem, 1.33rem + 0.76vw, 2rem);
  --titulo-1: clamp(2rem, 1.62rem + 1.7vw, 3rem);
  --titulo-portada: clamp(2.25rem, 1.66rem + 2.6vw, 3.75rem);

  /* Espacio */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-seccion: clamp(3rem, 2.2rem + 3.6vw, 5.5rem);

  /* Forma */
  --radio-s: 6px;
  --radio-m: 10px;
  --radio-l: 16px;
  --radio-boton: 10px;
  --radio-campo: 8px;
  --grosor-linea: 1px;
  --sombra-1: 0 1px 2px rgb(18 22 27 / 0.06), 0 1px 3px rgb(18 22 27 / 0.05);
  --sombra-2: 0 2px 4px rgb(18 22 27 / 0.06), 0 10px 20px -10px rgb(18 22 27 / 0.2);

  /* Maquetación */
  --ancho-pagina: 72rem;
  --ancho-texto: 60ch;
  --margen: clamp(1rem, 0.64rem + 1.6vw, 2rem);
  --alto-cabecera: 4rem;

  /* Movimiento */
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --duracion: 180ms;

  color-scheme: light;
}


/* 2. REINICIO Y ELEMENTOS ================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--esp-5);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: var(--texto-m);
  font-weight: var(--peso-normal);
  line-height: var(--interlineado);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1 0 auto;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulos);
  line-height: var(--interlineado-titulos);
  letter-spacing: var(--tracking-titulos);
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--titulo-1);
}

h2 {
  font-size: var(--titulo-2);
}

h3 {
  font-size: var(--titulo-3);
  line-height: 1.25;
}

h4 {
  font-size: var(--titulo-4);
  line-height: 1.3;
}

p,
li,
dd,
figcaption,
blockquote {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

a {
  color: var(--color-enlace);
  text-decoration-line: underline;
  text-decoration-thickness: max(1px, 0.0625em);
  text-underline-offset: 0.2em;
  transition: color var(--duracion) var(--curva), text-decoration-color var(--duracion) var(--curva);
}

a:hover {
  text-decoration-thickness: max(2px, 0.125em);
}

strong,
b {
  font-weight: var(--peso-fuerte);
}

small {
  font-size: var(--texto-s);
}

hr {
  border: 0;
  border-top: var(--grosor-linea) solid var(--color-linea);
}

[hidden] {
  display: none !important;
}


/* 3. SUPERFICIES DEL NAVEGADOR ============================================= */

::selection {
  background: var(--color-seleccion);
  color: inherit;
}

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

:focus:not(:focus-visible) {
  outline: none;
}

input,
textarea,
select {
  caret-color: var(--color-marca);
  accent-color: var(--color-marca);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-marca);
}

html {
  scrollbar-color: color-mix(in srgb, var(--color-texto) 32%, transparent) transparent;
}

table,
.cifra,
time {
  font-variant-numeric: tabular-nums;
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  cursor: help;
}


/* 4. MAQUETACIÓN =========================================================== */

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

.contenedor--texto {
  max-width: calc(var(--ancho-texto) + 2 * var(--margen));
}

.seccion {
  padding-block: var(--esp-seccion);
}

.seccion--arriba {
  padding-top: var(--esp-6);
}

.seccion--alt {
  background: var(--color-superficie);
  border-block: var(--grosor-linea) solid var(--color-linea);
}

.seccion--alt + .seccion--alt {
  border-top: 0;
}

.seccion--tenue {
  background: var(--color-marca-tenue);
}

.seccion__cabecera {
  max-width: var(--ancho-texto);
  margin-bottom: var(--esp-6);
}

.seccion__cabecera > * + * {
  margin-top: var(--esp-3);
}

.seccion__entradilla {
  font-size: var(--texto-l);
  color: var(--color-texto-suave);
}

.pila > * + * {
  margin-top: var(--esp-4);
}

.pila--grande > * + * {
  margin-top: var(--esp-6);
}

.grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}

.rejilla {
  display: grid;
  gap: var(--esp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* Texto principal con columna lateral (precio, llamada) que se queda fija
   en escritorio. En móvil la columna va detrás del texto. */
.con-lateral {
  display: grid;
  gap: var(--esp-7);
  align-items: start;
}

@media (min-width: 64rem) {
  .con-lateral {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    gap: var(--esp-8);
  }

  .con-lateral__aparte {
    position: sticky;
    top: var(--esp-5);
  }
}


/* 5. TIPOGRAFÍA DE LECTURA ================================================= */

.prosa {
  max-width: var(--ancho-texto);
}

.prosa > * + * {
  margin-top: var(--esp-4);
}

.prosa > h2 {
  margin-top: 2.4em;
}

.prosa > h3 {
  margin-top: 1.9em;
}

.prosa > h4 {
  margin-top: 1.6em;
}

.prosa > h2 + *,
.prosa > h3 + *,
.prosa > h4 + * {
  margin-top: var(--esp-3);
}

.prosa > :first-child {
  margin-top: 0;
}

/* Solo las listas sin clase: los componentes (pasos, precio…) dentro de
   .prosa mantienen su propio formato. */
.prosa :where(ul, ol):not([class]) {
  padding-left: 1.3em;
}

.prosa :where(ul, ol):not([class]) > li + li {
  margin-top: var(--esp-2);
}

.prosa :where(ul, ol):not([class]) > li::marker {
  color: var(--color-texto-suave);
}

.prosa > .pasos,
.prosa > .nota,
.prosa > .tabla,
.prosa > .llamada,
.prosa > .precio {
  margin-top: var(--esp-5);
}

.prosa blockquote {
  padding: var(--esp-4) var(--esp-5);
  background: var(--color-superficie-alt);
  border-radius: var(--radio-m);
  font-size: var(--texto-l);
}

.prosa figure {
  margin-block: var(--esp-6);
}

.prosa figcaption {
  margin-top: var(--esp-2);
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.entradilla {
  font-size: var(--texto-l);
  line-height: 1.55;
}

/* Tabla de lectura: se desplaza dentro de su caja en móvil. El contenedor
   lleva role="region", aria-label y tabindex="0" en el HTML. */
.tabla {
  overflow-x: auto;
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-m);
  background: var(--color-superficie);
}

.tabla table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-s);
}

.tabla caption {
  padding: var(--esp-3) var(--esp-4);
  text-align: left;
  font-weight: var(--peso-fuerte);
  border-bottom: var(--grosor-linea) solid var(--color-linea);
}

.tabla th,
.tabla td {
  padding: var(--esp-3) var(--esp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--grosor-linea) solid var(--color-linea);
}

.tabla thead th {
  background: var(--color-superficie-alt);
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
}

.tabla tbody tr:last-child > * {
  border-bottom: 0;
}

/* Las cifras (plazos, importes) no se parten en dos líneas */
.tabla .cifra {
  white-space: nowrap;
  font-weight: var(--peso-fuerte);
}


/* Tabla comparativa (por ejemplo: hacerlo tú / informe / tramitación).
   La columna recomendada lleva .destacada en cada celda. */
.tabla--comparativa table {
  font-size: var(--texto-m);
}

.tabla--comparativa th,
.tabla--comparativa td {
  padding: var(--esp-4) var(--esp-5);
}

.tabla--comparativa thead th {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  letter-spacing: var(--tracking-titulos);
  white-space: normal;
}

.tabla--comparativa tbody th {
  font-weight: var(--peso-fuerte);
  color: var(--color-texto-suave);
  font-size: var(--texto-s);
}

.tabla--comparativa .destacada {
  background: var(--color-marca-tenue);
}

.tabla--comparativa thead .destacada {
  background: var(--color-marca);
  color: var(--color-sobre-marca);
}

.tabla--comparativa .cifra {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-3);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
}

/* En móvil, cada fila se lee de arriba abajo: el criterio y debajo cada
   opción con su nombre (data-etiqueta en cada celda). La columna
   destacada sigue tintada. .tabla--apilada hace lo mismo con una tabla de
   lectura normal (plazos, requisitos) en vez de desplazarla de lado. */
@media (max-width: 47.99rem) {
  .tabla--comparativa,
  .tabla--apilada {
    overflow: visible;
  }

  .tabla--comparativa table,
  .tabla--comparativa tbody,
  .tabla--comparativa tr,
  .tabla--comparativa th,
  .tabla--comparativa td,
  .tabla--apilada table,
  .tabla--apilada tbody,
  .tabla--apilada tr,
  .tabla--apilada th,
  .tabla--apilada td {
    display: block;
    width: auto;
  }

  .tabla--comparativa caption,
  .tabla--apilada caption {
    display: block;
  }

  .tabla--comparativa thead,
  .tabla--apilada thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .tabla--comparativa tbody tr,
  .tabla--apilada tbody tr {
    padding: var(--esp-4);
    border-bottom: var(--grosor-linea) solid var(--color-linea);
  }

  .tabla--comparativa tbody tr:last-child,
  .tabla--apilada tbody tr:last-child {
    border-bottom: 0;
  }

  .tabla--comparativa tbody th,
  .tabla--apilada tbody th {
    padding: 0 0 var(--esp-2);
    border: 0;
    font-family: var(--fuente-titulos);
    font-size: var(--titulo-4);
    letter-spacing: var(--tracking-titulos);
    color: var(--color-texto);
  }

  .tabla--comparativa td,
  .tabla--apilada td {
    display: grid;
    grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
    gap: var(--esp-1) var(--esp-3);
    padding: var(--esp-2) var(--esp-3);
    border: 0;
    border-radius: var(--radio-s);
  }

  .tabla--comparativa td[data-etiqueta]::before,
  .tabla--apilada td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    font-size: var(--texto-s);
    font-weight: var(--peso-fuerte);
    color: var(--color-texto-suave);
  }
}


/* 6. ICONOS Y UTILIDADES =================================================== */

.icono {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icono--grande {
  width: 1.75rem;
  height: 1.75rem;
}

.oculto-visual {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.texto-suave {
  color: var(--color-texto-suave);
}

.texto-pequeno {
  font-size: var(--texto-s);
}

.sin-margen {
  margin: 0;
}

.salto {
  position: absolute;
  top: var(--esp-2);
  left: var(--esp-2);
  z-index: 100;
  padding: var(--esp-2) var(--esp-4);
  background: var(--color-marca);
  color: var(--color-sobre-marca);
  border-radius: var(--radio-s);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--duracion) var(--curva);
}

.salto:focus-visible {
  transform: none;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: var(--color-marca-tenue);
  color: var(--color-marca-intensa);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  line-height: 1.6;
  white-space: nowrap;
}


/* 7. CABECERA, NAVEGACIÓN Y MIGAS DE PAN =================================== */

.cabecera {
  position: relative;
  z-index: 20;
  background: var(--color-superficie);
  border-bottom: var(--grosor-linea) solid var(--color-linea);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  min-height: var(--alto-cabecera);
}

.cabecera__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin-right: auto;
  padding-block: var(--esp-2);
  color: var(--color-texto);
  font-family: var(--fuente-titulos);
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.0625rem);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.2;
  text-decoration: none;
}

.cabecera__marca:hover {
  color: var(--color-marca);
}

.cabecera__logo {
  width: auto;
  height: 2rem;
}

/* Marca en SVG en línea junto al nombre (alto de la letra) */
.cabecera__marca svg {
  flex: none;
  width: auto;
  height: 1.15em;
}

.cabecera__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-5);
  padding: 0;
  list-style: none;
}

.cabecera__nav li > a {
  display: inline-block;
  padding-block: var(--esp-2);
  color: var(--color-texto);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
}

.cabecera__nav li > a:hover,
.cabecera__nav li > a[aria-current="page"] {
  color: var(--color-marca);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.cabecera__accion {
  flex: none;
}

.cabecera__menu {
  display: none;
}

/* Móvil: el menú se pliega solo si hay JavaScript (clase .js en <html>).
   Sin JavaScript, los enlaces se ven debajo de la marca. */
@media (max-width: 55.99rem) {
  .cabecera__interior {
    flex-wrap: wrap;
  }

  .cabecera__marca {
    flex: 1 1 0;
    min-width: 0;
    text-wrap: balance;
  }

  .cabecera__nav {
    order: 3;
    flex-basis: 100%;
    padding-bottom: var(--esp-3);
  }

  .cabecera .cabecera__accion {
    display: none;
  }

  .js .cabecera__menu {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    min-height: 2.75rem;
    padding: var(--esp-2) var(--esp-3);
    margin-right: calc(-1 * var(--esp-3));
    border: 0;
    border-radius: var(--radio-s);
    background: transparent;
    color: var(--color-texto);
    font-size: var(--texto-s);
    font-weight: var(--peso-fuerte);
  }

  .js .cabecera__menu:hover {
    background: var(--color-superficie-alt);
  }

  .js .cabecera__menu .icono-cerrar,
  .js .cabecera__menu[aria-expanded="true"] .icono-abrir {
    display: none;
  }

  .js .cabecera__menu[aria-expanded="true"] .icono-cerrar {
    display: block;
  }

  .js .cabecera__nav {
    display: none;
  }

  .js .cabecera__nav[data-abierto] {
    display: block;
  }

  .js .cabecera__nav ul {
    flex-direction: column;
    gap: 0;
    border-top: var(--grosor-linea) solid var(--color-linea);
  }

  .js .cabecera__nav li {
    border-bottom: var(--grosor-linea) solid var(--color-linea);
  }

  .js .cabecera__nav li > a {
    display: flex;
    min-height: 3rem;
    align-items: center;
    font-size: var(--texto-m);
  }

  .cabecera__nav .boton {
    margin-top: var(--esp-4);
    width: 100%;
  }
}

@media (min-width: 56rem) {
  .cabecera__nav .boton {
    display: none;
  }
}

.migas {
  padding-top: var(--esp-5);
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-2);
  padding: 0;
  list-style: none;
}

.migas li {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}

.migas li + li::before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}

.migas a {
  color: var(--color-texto-suave);
}

.migas a:hover {
  color: var(--color-marca);
}

.migas [aria-current="page"] {
  color: var(--color-texto);
}


/* 8. PORTADA (HERO) ========================================================
   La primera frase (.portada__entradilla) es la que se entiende sola: qué,
   para quién y dónde. Va en color de texto, no en gris.                    */

.portada {
  padding-block: clamp(2.5rem, 1.6rem + 3.8vw, 5rem);
}

.migas + .portada,
.portada--interior {
  padding-top: var(--esp-6);
}

.portada__interior {
  display: grid;
  gap: var(--esp-6);
  align-items: start;
}

.portada__texto {
  max-width: 40rem;
}

.portada__texto > * + * {
  margin-top: var(--esp-4);
}

.portada__titulo {
  font-size: var(--titulo-1);
}

.portada--principal .portada__titulo {
  font-size: var(--titulo-portada);
  line-height: 1.06;
  letter-spacing: calc(var(--tracking-titulos) - 0.006em);
}

.portada__entradilla {
  font-size: var(--texto-l);
  line-height: 1.55;
  color: var(--color-texto);
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3) var(--esp-4);
  padding-top: var(--esp-2);
}

.portada__confianza {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-2) 0 0;
  list-style: none;
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.portada__confianza li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
}

.portada__confianza .icono {
  margin-top: 0.15em;
  color: var(--color-ok);
}

.portada__datos > * + * {
  margin-top: var(--esp-4);
}

@media (min-width: 40rem) {
  .portada__confianza {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--esp-2) var(--esp-5);
  }
}

/* Portada con herramienta: texto a la izquierda y la herramienta a la
   derecha en escritorio; en móvil, la herramienta justo después del texto.
   Si .portada__confianza va como hijo directo de .portada__interior
   (después de la herramienta), en móvil queda debajo de la herramienta y en
   escritorio debajo del texto. */
@media (min-width: 60rem) {
  .portada--herramienta .portada__interior {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    grid-template-areas: "texto herramienta" "confianza herramienta";
    grid-template-rows: auto 1fr;
    column-gap: var(--esp-8);
    row-gap: var(--esp-5);
  }

  .portada--herramienta .portada__texto {
    grid-area: texto;
  }

  .portada--herramienta .portada__interior > .herramienta {
    grid-area: herramienta;
  }

  .portada--herramienta .portada__interior > .portada__confianza,
  .portada--herramienta .portada__interior > .portada__datos {
    grid-area: confianza;
    align-self: start;
    max-width: 40rem;
  }
}

.portada__imagen {
  border-radius: var(--radio-l);
  overflow: hidden;
  background: var(--color-superficie-alt);
}

.portada__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* 9. BOTONES =============================================================== */

.boton {
  --_fondo: var(--color-marca);
  --_texto: var(--color-sobre-marca);
  --_borde: var(--color-marca);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.875rem;
  padding: 0.7em 1.25em;
  border: var(--grosor-linea) solid var(--_borde);
  border-radius: var(--radio-boton);
  background: var(--_fondo);
  color: var(--_texto);
  font-family: inherit;
  font-size: var(--texto-m);
  font-weight: var(--peso-fuerte);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition:
    background-color var(--duracion) var(--curva),
    border-color var(--duracion) var(--curva),
    color var(--duracion) var(--curva),
    box-shadow var(--duracion) var(--curva),
    transform 120ms var(--curva);
}

.boton:hover {
  --_fondo: var(--color-marca-intensa);
  --_borde: var(--color-marca-intensa);
  text-decoration: none;
}

.boton:active {
  transform: translateY(1px) scale(0.99);
}

.boton .icono {
  width: 1.15em;
  height: 1.15em;
  transition: transform var(--duracion) var(--curva);
}

.boton:hover .icono-flecha {
  transform: translateX(3px);
}

.boton--secundario {
  --_fondo: var(--color-superficie);
  --_texto: var(--color-marca);
  --_borde: var(--color-linea-campo);
}

.boton--secundario:hover {
  --_fondo: var(--color-marca-tenue);
  --_texto: var(--color-marca-intensa);
  --_borde: var(--color-marca);
}

.boton--fantasma {
  --_fondo: transparent;
  --_texto: var(--color-marca);
  --_borde: transparent;
  padding-inline: 0.6em;
}

.boton--fantasma:hover {
  --_fondo: var(--color-marca-tenue);
  --_texto: var(--color-marca-intensa);
  --_borde: transparent;
}

/* Botón claro sobre fondos de marca o banda oscura */
.boton--claro {
  --_fondo: var(--color-superficie);
  --_texto: var(--color-marca-intensa);
  --_borde: var(--color-superficie);
}

.boton--claro:hover {
  --_fondo: var(--color-marca-tenue);
  --_borde: var(--color-marca-tenue);
}

.boton--enlace {
  --_fondo: transparent;
  --_texto: var(--color-enlace);
  --_borde: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.0625em);
  text-underline-offset: 0.2em;
}

.boton--enlace:hover {
  --_fondo: transparent;
  --_borde: transparent;
  --_texto: var(--color-marca-intensa);
  text-decoration-thickness: 2px;
}

.boton--grande {
  min-height: 3.25rem;
  padding: 0.85em 1.5em;
  font-size: var(--texto-l);
}

.boton--bloque {
  display: flex;
  width: 100%;
}

.boton:disabled,
.boton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Cargando: el texto se mantiene para lectores de pantalla y se dibuja un
   indicador. El botón lleva aria-busy="true" mientras envía. */
.boton[aria-busy="true"] {
  color: transparent;
  cursor: progress;
}

.boton[aria-busy="true"] .icono {
  opacity: 0;
}

.boton[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.15em;
  height: 1.15em;
  border: 2px solid var(--_texto);
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 700ms linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(1turn);
  }
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: var(--peso-fuerte);
  text-decoration: none;
}

.enlace-flecha:hover {
  text-decoration: underline;
}

.enlace-flecha .icono {
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--duracion) var(--curva);
}

.enlace-flecha:hover .icono {
  transform: translateX(3px);
}


/* 10. LLAMADA A LA ACCIÓN, «QUÉ PASA DESPUÉS» Y CONFIANZA ================= */

.llamada {
  display: grid;
  gap: var(--esp-5) var(--esp-7);
  padding: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
}

@media (min-width: 56rem) {
  .llamada {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* En la columna de texto de los artículos no caben dos columnas: la llamada va apilada (v1.3, 28/10/2026) */
.contenedor--texto .llamada {
  grid-template-columns: minmax(0, 1fr);
}

.llamada__texto > * + * {
  margin-top: var(--esp-3);
}

.llamada__titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-2);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.15;
}

.llamada__accion {
  display: grid;
  gap: var(--esp-3);
  justify-items: start;
}

.llamada__confianza {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  max-width: 22rem;
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.llamada__confianza .icono {
  margin-top: 0.1em;
  color: var(--color-ok);
}

.llamada--marca {
  border-color: var(--color-marca);
  background: var(--color-marca);
  color: var(--color-sobre-marca);
}

.llamada--marca .llamada__confianza,
.llamada--marca .llamada__confianza .icono {
  color: color-mix(in srgb, var(--color-sobre-marca) 86%, var(--color-marca));
}

.llamada--marca a:not(.boton) {
  color: inherit;
}

.llamada--marca :focus-visible,
.fondo-marca :focus-visible {
  outline-color: var(--color-sobre-marca);
}

/* Qué pasa después de contactar: la numeración sí aporta información
   (es un orden), por eso los pasos llevan número. */
.pasos {
  display: grid;
  gap: var(--esp-5);
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

@media (min-width: 48rem) {
  .pasos--horizontal {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--esp-6);
  }
}

.paso {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-rows: minmax(2.25rem, auto) auto;
  align-content: start;
  gap: var(--esp-1) var(--esp-4);
  counter-increment: paso;
}

.paso::before {
  content: counter(paso);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1.5px solid var(--color-marca);
  border-radius: 50%;
  color: var(--color-marca);
  font-weight: var(--peso-titulos);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.paso__titulo {
  align-self: center;
  font-size: var(--titulo-4);
}

.paso__texto {
  color: var(--color-texto-suave);
}

/* Fila de datos de confianza reales (credencial, plazo, precio).
   Nunca reseñas ni sellos inventados. */
.confianza {
  display: grid;
  gap: var(--esp-4) var(--esp-6);
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .confianza {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

.confianza li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-1) var(--esp-3);
}

.confianza .icono {
  grid-row: span 2;
  margin-top: 0.1em;
  color: var(--color-marca);
}

.confianza strong {
  display: block;
}

.confianza span {
  color: var(--color-texto-suave);
  font-size: var(--texto-s);
}


/* 11. FORMULARIO «TE LLAMAMOS» ============================================= */

.formulario {
  display: grid;
  align-content: start;
  gap: var(--esp-4);
  scroll-margin-top: var(--esp-4);
}

.formulario--panel {
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
  box-shadow: var(--sombra-1);
}

.formulario__titulo {
  font-size: var(--titulo-3);
}

.formulario__intro {
  color: var(--color-texto-suave);
  font-size: var(--texto-s);
}

.campo {
  display: grid;
  gap: 0.375rem;
}

.campo__etiqueta {
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-s);
}

.campo__opcional {
  font-weight: var(--peso-normal);
  color: var(--color-texto-suave);
}

.campo__ayuda {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.65em 0.85em;
  border: var(--grosor-linea) solid var(--color-linea-campo);
  border-radius: var(--radio-campo);
  background: var(--color-superficie);
  color: var(--color-texto);
  font-size: max(16px, 1rem);
  line-height: 1.4;
  transition: border-color var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva);
}

.campo textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--color-texto-suave);
  opacity: 1;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  border-color: var(--color-texto-suave);
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--color-foco);
  outline-offset: 1px;
  border-color: var(--color-foco);
}

.campo [aria-invalid="true"] {
  border-color: var(--color-error);
  background: color-mix(in srgb, var(--color-error-tenue) 45%, var(--color-superficie));
}

.campo [aria-invalid="true"]:focus-visible {
  outline-color: var(--color-foco);
  border-color: var(--color-error);
}

.campo__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  color: var(--color-error);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
}

.campo__error::before {
  content: "";
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.15em;
  background: currentColor;
  -webkit-mask: var(--mascara-alerta) center / contain no-repeat;
  mask: var(--mascara-alerta) center / contain no-repeat;
}

:root {
  --mascara-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
  --mascara-mas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* Casilla de consentimiento */
.casilla {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-3);
  align-items: start;
  font-size: var(--texto-s);
  cursor: pointer;
}

.casilla input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15em 0 0;
  cursor: pointer;
}

.casilla input[aria-invalid="true"] {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}

.casilla input[aria-invalid="true"]:focus-visible {
  outline: 3px solid var(--color-foco);
}

/* Campo trampa contra spam: fuera de la vista y del teclado */
.campo--trampa {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.formulario__enviar {
  margin-top: var(--esp-2);
}

/* Primera capa de información sobre protección de datos (RGPD y LOPDGDD) */
.info-datos {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  line-height: 1.5;
}

.info-datos summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 1.5rem;
  list-style: none;
  cursor: pointer;
  font-weight: var(--peso-fuerte);
  color: var(--color-texto);
}

.info-datos summary::-webkit-details-marker {
  display: none;
}

.info-datos summary::before {
  content: "";
  flex: none;
  width: 0.95em;
  height: 0.95em;
  background: currentColor;
  -webkit-mask: var(--mascara-mas) center / contain no-repeat;
  mask: var(--mascara-mas) center / contain no-repeat;
  transition: transform 260ms var(--curva);
}

.info-datos[open] summary::before {
  transform: rotate(45deg);
}

.info-datos dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--esp-1) var(--esp-3);
  margin-top: var(--esp-2);
}

.info-datos dt {
  font-weight: var(--peso-fuerte);
  color: var(--color-texto);
}

.aviso-formulario {
  padding: var(--esp-3) var(--esp-4);
  border: var(--grosor-linea) solid color-mix(in srgb, var(--color-error) 35%, transparent);
  border-radius: var(--radio-m);
  background: var(--color-error-tenue);
  color: var(--color-error);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
}


/* 12. PRECIOS =============================================================
   Tabla real (<table>) con horquillas o precios cerrados. En móvil cada
   fila se apila y usa data-etiqueta de cada celda como rótulo.            */

.tabla-precios {
  --_radio: calc(var(--radio-l) - var(--grosor-linea));
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
}

.tabla-precios thead tr:first-child > :first-child {
  border-top-left-radius: var(--_radio);
}

.tabla-precios thead tr:first-child > :last-child {
  border-top-right-radius: var(--_radio);
}

.tabla-precios tbody tr:last-child > :first-child {
  border-bottom-left-radius: var(--_radio);
}

.tabla-precios tbody tr:last-child > :last-child {
  border-bottom-right-radius: var(--_radio);
}

.tabla-precios caption {
  padding-bottom: var(--esp-3);
  caption-side: top;
  text-align: left;
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.tabla-precios th,
.tabla-precios td {
  padding: var(--esp-4) var(--esp-5);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--grosor-linea) solid var(--color-linea);
}

.tabla-precios thead th {
  background: var(--color-superficie-alt);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
}

.tabla-precios tbody tr:last-child > * {
  border-bottom: 0;
}

.tabla-precios tbody th {
  font-weight: var(--peso-fuerte);
}

.tabla-precios__detalle {
  display: block;
  margin-top: var(--esp-1);
  color: var(--color-texto-suave);
  font-size: var(--texto-s);
  font-weight: var(--peso-normal);
}

.tabla-precios .importe {
  text-align: right;
  font-size: var(--texto-l);
  font-weight: var(--peso-titulos);
  white-space: nowrap;
}

.tabla-precios thead .importe {
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
}

.tabla-precios tr.destacada > * {
  background: var(--color-marca-tenue);
}

@media (max-width: 39.99rem) {
  .tabla-precios thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .tabla-precios tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) fit-content(45%);
    gap: var(--esp-2) var(--esp-4);
    padding: var(--esp-4);
    border-bottom: var(--grosor-linea) solid var(--color-linea);
  }

  .tabla-precios tbody tr:first-child {
    border-radius: var(--_radio) var(--_radio) 0 0;
  }

  .tabla-precios tbody tr:last-child {
    border-bottom: 0;
    border-radius: 0 0 var(--_radio) var(--_radio);
  }

  .tabla-precios tbody tr:only-child {
    border-radius: var(--_radio);
  }

  .tabla-precios th,
  .tabla-precios td {
    padding: 0;
    border: 0;
    border-radius: 0 !important;
  }

  .tabla-precios tbody th {
    grid-column: 1;
    grid-row: 1;
  }

  .tabla-precios .importe {
    grid-column: 2;
    grid-row: 1;
    white-space: normal;
  }

  .tabla-precios td:not(.importe) {
    grid-column: 1 / -1;
  }

  .tabla-precios tr.destacada {
    background: var(--color-marca-tenue);
  }

  .tabla-precios tr.destacada > * {
    background: transparent;
  }

  .tabla-precios td[data-etiqueta]:not(.importe)::before {
    content: attr(data-etiqueta) ": ";
    font-weight: var(--peso-fuerte);
    color: var(--color-texto);
  }
}

/* Precio destacado de un servicio (columna lateral o bloque) */
.precio {
  display: grid;
  align-content: start;
  gap: var(--esp-4);
  padding: var(--esp-5);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
  box-shadow: var(--sombra-1);
}

.precio__concepto {
  font-size: var(--titulo-4);
  font-weight: var(--peso-fuerte);
  line-height: 1.3;
}

/* Cuando el concepto es el título del bloque (h2 o h3) */
:is(h2, h3).precio__concepto {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-3);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.2;
}

.precio__importe {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-2);
  font-family: var(--fuente-titulos);
  font-size: clamp(2rem, 1.7rem + 1.2vw, 2.5rem);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.precio__nota {
  font-family: var(--fuente-texto);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0;
  color: var(--color-texto-suave);
}

.precio__incluye {
  display: grid;
  gap: var(--esp-2);
  padding: 0;
  list-style: none;
  font-size: var(--texto-s);
}

.precio__incluye li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
}

.precio__incluye .icono {
  margin-top: 0.15em;
  color: var(--color-ok);
}


/* 13. PREGUNTAS FRECUENTES ================================================ */

.faq {
  max-width: var(--ancho-texto);
  border-top: var(--grosor-linea) solid var(--color-linea);
}

.faq__item {
  border-bottom: var(--grosor-linea) solid var(--color-linea);
}

.faq__pregunta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-4) 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-l);
  font-weight: var(--peso-fuerte);
  line-height: 1.35;
  letter-spacing: calc(var(--tracking-titulos) / 2);
  transition: color var(--duracion) var(--curva);
}

.faq__pregunta::-webkit-details-marker {
  display: none;
}

.faq__pregunta::after {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15em;
  background: currentColor;
  -webkit-mask: var(--mascara-mas) center / contain no-repeat;
  mask: var(--mascara-mas) center / contain no-repeat;
  transition: transform 260ms var(--curva);
}

.faq__pregunta:hover {
  color: var(--color-marca);
}

.faq__item[open] > .faq__pregunta::after {
  transform: rotate(45deg);
}

.faq__respuesta {
  padding-bottom: var(--esp-5);
  padding-right: var(--esp-6);
}

.faq__respuesta > * + * {
  margin-top: var(--esp-3);
}


/* 14. NOTAS Y FUENTES CITADAS ============================================= */

.nota {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-m);
  background: var(--color-superficie-alt);
}

.nota > .icono {
  margin-top: 0.15em;
}

.nota__texto > * + * {
  margin-top: var(--esp-2);
}

.nota--info {
  border-color: color-mix(in srgb, var(--color-marca) 22%, transparent);
  background: var(--color-marca-tenue);
}

.nota--info > .icono {
  color: var(--color-marca);
}

.nota--aviso {
  border-color: color-mix(in srgb, var(--color-aviso) 26%, transparent);
  background: var(--color-aviso-tenue);
}

.nota--aviso > .icono {
  color: var(--color-aviso);
}

.nota--ok {
  border-color: color-mix(in srgb, var(--color-ok) 24%, transparent);
  background: var(--color-ok-tenue);
}

.nota--ok > .icono {
  color: var(--color-ok);
}

.nota--error {
  border-color: color-mix(in srgb, var(--color-error) 24%, transparent);
  background: var(--color-error-tenue);
}

.nota--error > .icono {
  color: var(--color-error);
}

/* Cita de una fuente oficial junto al dato que respalda */
.fuente {
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.fuente a {
  color: inherit;
}

.fuentes {
  padding-top: var(--esp-4);
  border-top: var(--grosor-linea) solid var(--color-linea);
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.fuentes ol {
  padding-left: 1.3em;
}

.fuentes li + li {
  margin-top: var(--esp-1);
}


/* 15. AUTOR, VERIFICACIÓN Y METADATOS DE ARTÍCULO ========================= */

.caja-autor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-4) var(--esp-5);
  align-items: start;
  padding: var(--esp-5);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
}

.caja-autor__foto {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-superficie-alt);
}

/* Sin foto: lo normal es quitar el círculo (la caja pasa sola a una
   columna, regla de abajo). Las iniciales solo si la web las quiere como
   marca, y entonces decorativas (aria-hidden), porque el nombre va al lado. */
.caja-autor__iniciales {
  display: grid;
  place-items: center;
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  font-weight: var(--peso-titulos);
  letter-spacing: 0.02em;
  color: var(--color-texto-suave);
}

.caja-autor:not(:has(> .caja-autor__foto)) {
  grid-template-columns: minmax(0, 1fr);
}

.caja-autor__texto > * + * {
  margin-top: var(--esp-2);
}

.caja-autor__nombre {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.3;
}

.caja-autor__nombre a {
  color: inherit;
}

.caja-autor__cargo {
  color: var(--color-texto-suave);
  font-size: var(--texto-s);
}

.caja-autor__bio {
  font-size: var(--texto-s);
}

.caja-autor__revisor {
  grid-column: 1 / -1;
  padding-top: var(--esp-3);
  border-top: var(--grosor-linea) solid var(--color-linea);
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

@media (max-width: 29.99rem) {
  .caja-autor {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Recuadro de verificación: solo si el artículo ha pasado de verdad la
   comprobación de datos y enlaza sus fuentes. */
.verificacion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-3) var(--esp-4);
  padding: var(--esp-5);
  border: var(--grosor-linea) solid color-mix(in srgb, var(--color-ok) 24%, transparent);
  border-radius: var(--radio-l);
  background: var(--color-ok-tenue);
  font-size: var(--texto-s);
}

.verificacion > .icono {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-ok);
}

@media (max-width: 29.99rem) {
  .verificacion {
    grid-template-columns: minmax(0, 1fr);
  }
}

.verificacion__titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  margin-bottom: var(--esp-2);
}

.meta-articulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-5);
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.meta-articulo__autor {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}

.meta-articulo__autor img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
}

.meta-articulo a {
  color: var(--color-texto);
  font-weight: var(--peso-fuerte);
}

/* Perfil del autor o profesional (página de autor) */
.perfil {
  display: grid;
  gap: var(--esp-5) var(--esp-6);
  align-items: start;
}

/* Foto al lado solo si la hay; sin foto, el perfil es una columna */
@media (min-width: 40rem) {
  .perfil:has(> .perfil__foto) {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.perfil__foto {
  width: 8rem;
  height: 8rem;
  border-radius: var(--radio-l);
  object-fit: cover;
  background: var(--color-superficie-alt);
}

.perfil__texto > * + * {
  margin-top: var(--esp-3);
}

.perfil__cargo {
  font-size: var(--texto-l);
  color: var(--color-texto-suave);
}

/* Ficha de datos en dos columnas (titular, credenciales) */
.ficha {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: var(--esp-2) var(--esp-5);
}

.ficha dt {
  font-weight: var(--peso-fuerte);
}

.ficha dd {
  color: var(--color-texto-suave);
}

@media (max-width: 29.99rem) {
  .ficha {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .ficha dd + dt {
    margin-top: var(--esp-3);
  }
}

/* Lista de enlaces relacionados */
.lista-enlaces {
  display: grid;
  gap: var(--esp-3);
  padding: 0;
  list-style: none;
}

/* Índice de un artículo largo */
.indice {
  padding: var(--esp-4) var(--esp-5);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-m);
  background: var(--color-superficie);
  font-size: var(--texto-s);
}

.indice__titulo {
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0;
  margin-bottom: var(--esp-2);
}

.indice ol {
  padding-left: 1.2em;
}

.indice li + li {
  margin-top: var(--esp-1);
}

.indice li > a {
  display: inline-block;
  padding-block: 0.15rem;
}


/* 16. SERVICIOS, ZONAS Y CASOS ============================================ */

/* Lista de servicios en filas: nombre, una línea, precio y enlace.
   Toda la fila es clicable a través del enlace del título. */
.servicios {
  display: grid;
  padding: 0;
  list-style: none;
  border-top: var(--grosor-linea) solid var(--color-linea);
}

.servicio {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--esp-1) var(--esp-5);
  align-items: center;
  padding: var(--esp-5) var(--esp-2);
  border-bottom: var(--grosor-linea) solid var(--color-linea);
  transition: background-color var(--duracion) var(--curva);
}

.servicio:hover {
  background: color-mix(in srgb, var(--color-marca) 5%, transparent);
}

.servicio__nombre {
  font-size: var(--titulo-3);
}

.servicio__nombre a {
  color: inherit;
  text-decoration: none;
}

.servicio__nombre a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.servicio__nombre a:focus-visible {
  outline: none;
}

.servicio:has(a:focus-visible) {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
  border-radius: var(--radio-s);
}

.servicio__resumen {
  grid-column: 1;
  color: var(--color-texto-suave);
}

.servicio__lado {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  color: var(--color-marca);
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
}

.servicio__lado .icono {
  transition: transform var(--duracion) var(--curva);
}

.servicio:hover .servicio__lado .icono {
  transform: translateX(4px);
}

@media (max-width: 35.99rem) {
  .servicio {
    grid-template-columns: minmax(0, 1fr);
  }

  .servicio__lado {
    grid-column: 1;
    grid-row: auto;
  }
}

.zonas {
  columns: 12rem auto;
  column-gap: var(--esp-6);
  padding: 0;
  list-style: none;
}

.zonas li {
  break-inside: avoid;
  padding-block: var(--esp-1);
}

/* Caso real (con permiso y sin datos personales) */
.casos {
  display: grid;
  gap: var(--esp-5);
}

.caso {
  padding: var(--esp-5);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
}

.caso__titulo {
  font-size: var(--titulo-3);
  margin-bottom: var(--esp-4);
}

.caso dl {
  display: grid;
  gap: var(--esp-3);
}

@media (min-width: 48rem) {
  .caso dl {
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--esp-3) var(--esp-5);
  }
}

.caso dt {
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

@media (max-width: 47.99rem) {
  .caso dl {
    gap: 0;
  }

  .caso dd + dt {
    margin-top: var(--esp-3);
  }
}


/* 17. HERRAMIENTA / CALCULADORA ===========================================
   Contenedor genérico para calculadoras por pasos (semáforos, viabilidad,
   presupuestos). La lógica de cada cálculo va en el JavaScript de cada
   web; base.js solo pasa de paso en paso y entrega las respuestas.       */

.herramienta {
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}

.herramienta__cabecera {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-5) var(--esp-5) var(--esp-4);
  border-bottom: var(--grosor-linea) solid var(--color-linea);
}

.herramienta__titulo {
  font-size: var(--titulo-3);
}

.herramienta__privacidad {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

.herramienta__privacidad .icono {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.05em;
}

.herramienta__progreso {
  display: grid;
  gap: var(--esp-2);
  margin-bottom: var(--esp-5);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  color: var(--color-texto-suave);
}

.herramienta__barra {
  height: 4px;
  border-radius: 4px;
  background: var(--color-superficie-alt);
  overflow: hidden;
}

.herramienta__barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-marca);
  transform: scaleX(var(--avance, 0));
  transform-origin: left center;
  transition: transform 320ms var(--curva);
}

.herramienta__cuerpo {
  padding: var(--esp-5);
}

html:not(.js) .herramienta [data-herramienta] {
  display: none;
}

.herramienta__sin-js {
  font-size: var(--texto-s);
}

.herramienta__paso {
  border: 0;
  padding: 0;
  min-width: 0;
}

.herramienta__pregunta {
  float: left;
  width: 100%;
  margin-bottom: var(--esp-4);
  padding: 0;
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.3;
}

.herramienta__pregunta:focus {
  outline: none;
}

.herramienta__pregunta + * {
  clear: both;
}

.herramienta__ayuda {
  margin: calc(-1 * var(--esp-2)) 0 var(--esp-4);
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.opciones {
  display: grid;
  gap: var(--esp-2);
}

.opcion {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-3);
  align-items: start;
  padding: var(--esp-3) var(--esp-4);
  border: var(--grosor-linea) solid var(--color-linea-campo);
  border-radius: var(--radio-m);
  background: var(--color-superficie);
  cursor: pointer;
  transition: border-color var(--duracion) var(--curva), background-color var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva);
}

.opcion:hover {
  border-color: var(--color-marca);
}

.opcion input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2em 0 0;
  cursor: pointer;
}

.opcion input:focus-visible {
  outline: none;
}

.opcion:has(input:focus-visible) {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
}

.opcion:has(input:checked) {
  border-color: var(--color-marca);
  background: var(--color-marca-tenue);
  box-shadow: inset 0 0 0 1px var(--color-marca);
}

.opcion__texto {
  display: grid;
  gap: 0.1rem;
}

.opcion__titulo {
  font-weight: var(--peso-fuerte);
}

.opcion__detalle {
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

.herramienta__navegacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}

.herramienta__navegacion .boton--fantasma {
  margin-left: calc(-1 * var(--esp-3));
}

.herramienta__navegacion [type="submit"] {
  margin-left: auto;
}

.herramienta__pie {
  padding: var(--esp-3) var(--esp-5);
  border-top: var(--grosor-linea) solid var(--color-linea);
  background: var(--color-superficie-alt);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

/* Cabezal oscuro (carcasa de señal): título, privacidad y luces sobre la banda */
.herramienta--cabezal .herramienta__cabecera {
  background: var(--color-banda);
  color: var(--color-sobre-banda);
  border-bottom: 0;
}

.herramienta--cabezal .herramienta__privacidad {
  color: var(--color-sobre-banda-suave);
}

.herramienta--cabezal .herramienta__cabecera :focus-visible {
  outline-color: var(--color-sobre-banda);
}

.herramienta__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
}

/* Tres luces: apagadas hasta que el resultado enciende una (data-luz).
   Nunca son la única señal: el resultado siempre lleva icono y texto. */
.luces {
  display: inline-flex;
  flex: none;
  gap: calc(var(--tam-luz) * 0.45);
  padding: calc(var(--tam-luz) * 0.3) calc(var(--tam-luz) * 0.4);
  border-radius: 999px;
  background: color-mix(in srgb, #000 40%, var(--color-banda));
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.5), 0 1px 0 color-mix(in srgb, var(--color-sobre-banda) 10%, transparent);
}

/* Cada luz en su cavidad: aro oscuro y sombra interior arriba (la visera) */
.luz {
  width: var(--tam-luz);
  height: var(--tam-luz);
  border-radius: 50%;
  background: var(--color-luz-apagada);
  box-shadow: inset 0 calc(var(--tam-luz) * 0.12) calc(var(--tam-luz) * 0.18) rgb(0 0 0 / 0.55), 0 0 0 2px color-mix(in srgb, #000 55%, var(--color-banda));
  filter: brightness(0.85);
  transition: background-color 650ms var(--curva), box-shadow 650ms var(--curva), filter 650ms var(--curva);
}

.luces[data-luz="verde"] .luz--verde,
.luces[data-luz="ambar"] .luz--ambar,
.luces[data-luz="rojo"] .luz--roja {
  filter: brightness(1.08);
  box-shadow: inset 0 calc(var(--tam-luz) * 0.1) calc(var(--tam-luz) * 0.14) rgb(255 255 255 / 0.35), 0 0 0 2px color-mix(in srgb, currentColor 35%, transparent), 0 0 calc(var(--tam-luz) * 0.9) calc(var(--tam-luz) * 0.12) color-mix(in srgb, currentColor 60%, transparent);
}

.luces[data-luz="verde"] .luz--verde {
  background: var(--color-luz-verde);
  color: var(--color-luz-verde);
}

.luces[data-luz="ambar"] .luz--ambar {
  background: var(--color-luz-ambar);
  color: var(--color-luz-ambar);
}

.luces[data-luz="rojo"] .luz--roja {
  background: var(--color-luz-roja);
  color: var(--color-luz-roja);
}

.herramienta--cabezal .resultado__estado {
  padding: 0;
  background: none;
  color: var(--color-texto);
  font-size: var(--titulo-3);
}

.herramienta--cabezal .resultado__estado .icono {
  color: var(--_tono);
}

/* La fecha como hoja de calendario: mes y año en la banda, día en grande.
   La fecha completa va en texto para los lectores de pantalla. */
.resultado__hoja {
  display: inline-grid;
  min-width: 9.5rem;
  margin-top: var(--esp-2);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-m);
  background: var(--color-superficie);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  text-align: center;
}

.resultado__mes {
  padding: var(--esp-1) var(--esp-3);
  background: var(--color-banda);
  color: var(--color-sobre-banda);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-s);
  font-weight: var(--peso-titulos);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.resultado__num {
  padding: var(--esp-2) var(--esp-4) var(--esp-1);
  font-family: var(--fuente-titulos);
  font-size: clamp(3rem, 2.4rem + 2.4vw, 4rem);
  font-weight: var(--peso-titulos);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}

.resultado__semana {
  padding: 0 var(--esp-3) var(--esp-2);
  border-top: var(--grosor-linea) solid var(--color-linea);
  padding-top: var(--esp-1);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

/* Fecha protagonista del resultado */
.resultado__dia {
  display: block;
  margin-top: var(--esp-1);
  font-family: var(--fuente-titulos);
  font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3rem);
  font-weight: var(--peso-titulos);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-texto);
}

.resultado__norma {
  font-size: var(--texto-s);
  color: var(--color-texto-suave);
}

/* Resultado: siempre icono + título + texto, nunca solo color */
.resultado {
  --_tono: var(--color-marca);
  --_tenue: var(--color-marca-tenue);
  display: grid;
  align-content: start;
  gap: var(--esp-4);
}

.resultado__estado {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-m);
  background: var(--_tenue);
  color: var(--_tono);
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.3;
}

.resultado__estado:focus {
  outline: none;
}

.resultado__estado .icono {
  width: 1.6rem;
  height: 1.6rem;
}

.resultado--ok {
  --_tono: var(--color-ok);
  --_tenue: var(--color-ok-tenue);
}

.resultado--aviso {
  --_tono: var(--color-aviso);
  --_tenue: var(--color-aviso-tenue);
}

.resultado--no {
  --_tono: var(--color-error);
  --_tenue: var(--color-error-tenue);
}

.resultado__datos {
  display: grid;
  gap: var(--esp-2) var(--esp-4);
  grid-template-columns: max-content minmax(0, 1fr);
  font-size: var(--texto-s);
}

.resultado__datos dt {
  font-weight: var(--peso-fuerte);
}

.resultado__fecha {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-3);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.resultado__acciones {
  display: grid;
  gap: var(--esp-2);
}

/* Resultado con partes fijas: el script pinta en [data-resultado-contenido]
   y deja en su sitio un formulario (por ejemplo, el aviso del rojo) y los
   botones de volver, que así valida base.js como cualquier otro formulario. */
.resultado__contenido {
  display: grid;
  align-content: start;
  gap: var(--esp-4);
}

.resultado__aviso {
  padding-top: var(--esp-4);
  border-top: var(--grosor-linea) solid var(--color-linea);
}


/* 18. PIE, BANNER DE COOKIES Y BARRA DE CONTACTO MÓVIL ==================== */

.pie {
  margin-top: auto;
  padding-block: var(--esp-7) var(--esp-6);
  background: var(--color-banda);
  color: var(--color-sobre-banda);
  font-size: var(--texto-s);
}

.pie__interior {
  display: grid;
  gap: var(--esp-5);
}

@media (min-width: 48rem) {
  .pie__interior {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

.pie__marca {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-4);
  font-weight: var(--peso-titulos);
  letter-spacing: var(--tracking-titulos);
}

.pie__titular {
  max-width: 38rem;
  margin-top: var(--esp-2);
  color: var(--color-sobre-banda-suave);
}

.pie__enlaces ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-5);
  padding: 0;
  list-style: none;
}

.pie a,
.pie button.pie__boton-enlace {
  color: var(--color-sobre-banda);
}

.pie__enlaces a,
.pie button.pie__boton-enlace {
  display: inline-block;
  padding-block: 0.2rem;
}

.pie button.pie__boton-enlace {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  line-height: inherit;
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.0625em);
  text-underline-offset: 0.2em;
}

.pie a:hover,
.pie button.pie__boton-enlace:hover {
  text-decoration-thickness: 2px;
}

.pie :focus-visible {
  outline-color: var(--color-sobre-banda);
}

.pie__legal {
  margin-top: var(--esp-6);
  padding-top: var(--esp-4);
  border-top: var(--grosor-linea) solid color-mix(in srgb, var(--color-sobre-banda) 18%, transparent);
  color: var(--color-sobre-banda-suave);
  font-size: var(--texto-xs);
}

/* Banner de cookies: aceptar y rechazar con el mismo peso (guía de la
   AEPD). No bloquea la página. */
.cookies {
  position: fixed;
  z-index: 50;
  right: var(--esp-3);
  bottom: var(--esp-3);
  left: var(--esp-3);
  max-width: 34rem;
  max-height: calc(100dvh - 2 * var(--esp-3));
  overflow-y: auto;
  padding: var(--esp-5);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-l);
  background: var(--color-superficie);
  box-shadow: var(--sombra-2);
  font-size: var(--texto-s);
}

@media (min-width: 40rem) {
  .cookies {
    right: auto;
    left: var(--esp-5);
    bottom: var(--esp-5);
  }
}

@media (max-width: 39.99rem) {
  .cookies {
    padding: var(--esp-4);
  }
}

html:has(.cookies:not([hidden]):not(.cookies--estatico)) {
  scroll-padding-bottom: calc(var(--alto-cookies, 12rem) + var(--esp-4));
}

body:has(.cookies:not([hidden]):not(.cookies--estatico)) {
  padding-bottom: calc(var(--alto-cookies, 12rem) + var(--esp-4));
}

.cookies__titulo {
  font-size: var(--titulo-4);
  margin-bottom: var(--esp-2);
}

.cookies__acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
}

.cookies__acciones .boton {
  min-height: 2.75rem;
  font-size: var(--texto-s);
}

.cookies__configurar {
  grid-column: 1 / -1;
  justify-self: center;
}

.cookies__panel {
  display: grid;
  gap: var(--esp-3);
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: var(--grosor-linea) solid var(--color-linea);
}

.cookies__panel .casilla {
  font-size: var(--texto-s);
}

/* Solo para la galería de componentes */
.cookies--estatico {
  position: static;
}

/* Barra fija de contacto en móvil. Solo para las webs cuyo modelo de
   contacto incluye teléfono; en el resto («te llamamos») no se usa. */
.barra-movil {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3) calc(var(--esp-2) + env(safe-area-inset-bottom));
  border-top: var(--grosor-linea) solid var(--color-linea);
  background: var(--color-superficie);
  box-shadow: 0 -6px 20px -10px rgb(18 22 27 / 0.25);
}

.barra-movil .boton {
  min-height: 3rem;
}

body:has(.barra-movil:not(.barra-movil--estatica)) {
  padding-bottom: calc(4.25rem + env(safe-area-inset-bottom));
}

html:has(.barra-movil:not(.barra-movil--estatica)) {
  scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}

@media (min-width: 56rem) {
  .barra-movil:not(.barra-movil--estatica) {
    display: none;
  }

  body:has(.barra-movil:not(.barra-movil--estatica)) {
    padding-bottom: 0;
  }

  html:has(.barra-movil:not(.barra-movil--estatica)) {
    scroll-padding-bottom: 0;
  }
}

/* Solo para la galería de componentes */
.barra-movil--estatica {
  position: static;
  max-width: 24rem;
  padding: var(--esp-2);
  border: var(--grosor-linea) solid var(--color-linea);
  border-radius: var(--radio-m);
  box-shadow: none;
}


/* 19. COLORES FORZADOS, MOVIMIENTO REDUCIDO E IMPRESIÓN ================== */

@media (forced-colors: active) {
  .faq__pregunta::after,
  .info-datos summary::before,
  .campo__error::before {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .boton,
  .opcion,
  .nota,
  .resultado__estado {
    border: 1px solid CanvasText;
  }

  .luz {
    forced-color-adjust: none;
    background: Canvas;
    border: 1px solid CanvasText;
  }

  .luces[data-luz="verde"] .luz--verde,
  .luces[data-luz="ambar"] .luz--ambar,
  .luces[data-luz="rojo"] .luz--roja {
    background: Highlight;
  }
}

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

  .boton[aria-busy="true"]::after {
    animation: none;
    border-right-color: var(--_texto);
    opacity: 0.6;
  }
}

@media print {
  .cabecera__nav,
  .cabecera__menu,
  .cabecera__accion,
  .cookies,
  .barra-movil,
  .herramienta__navegacion,
  .formulario,
  .salto {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .pie {
    background: none;
    color: #000;
  }

  .pie a {
    color: #000;
  }

  .prosa a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}