/* ==========================================================================
   buscaradministradordefincas.com — hoja de estilos principal

   Un unico fichero, ordenado por secciones. Se edita a mano: no hay proceso de
   compilacion, lo que hay aqui es exactamente lo que sirve la web.

   Indice
     1. TOKENS DE DISENO   variables de color, tipografia y espaciado
     2. BASE               reset, tipografia y accesibilidad
     3. COMPONENTES        botones, formularios, tarjetas, cabecera y pie
     4. PORTADA            secciones especificas de la home

   Las @font-face estan en css/fuentes.css (generado, no editar a mano).
   ========================================================================== */



/* ==========================================================================
   1. TOKENS DE DISENO
   ========================================================================== */

:root {
  /* --- Color: marca ----------------------------------------------------- */
  --c-primary: #0f2a3d;          /* Azul noche profundo: navegación, títulos */
  --c-primary-hover: #081621;

  --c-gold: #c5a059;             /* Acento de prestigio: CTA y "verificado" */
  --c-gold-hover: #a98543;
  --c-gold-text: #806426;      /* Oro legible como texto: 5.12:1 sobre --c-bg.
                                   El --c-gold de marca (2.26:1) solo vale para
                                   rellenos, bordes e iconos decorativos. */
  --c-gold-ink: #5d4201;         /* Texto legible sobre fondos dorados */
  --c-gold-soft: #fed488;
  --c-gold-wash: rgba(197, 160, 89, 0.1);

  /* --- Color: superficies ----------------------------------------------- */
  --c-bg: #f7f5f1;               /* Marfil hueso: lienzo de todas las páginas */
  --c-surface: #ffffff;          /* Solo tarjetas y contenedores de contenido */
  --c-surface-sunk: #f2f0ec;
  --c-surface-inverse: #0f2a3d;

  /* --- Color: texto ----------------------------------------------------- */
  --c-ink: #1b1c1a;
  --c-ink-muted: #43474c;
  --c-ink-subtle: #696d73;      /* 4.51:1 sobre --c-bg (AA). Antes #73777d, 4.14:1 */
  --c-ink-placeholder: #767676; /* 4.54:1 sobre blanco (AA). Antes #a0a0a0, 2.61:1 */
  --c-ink-inverse: #f2f0ee;
  --c-ink-inverse-muted: #b8c4ce;

  /* --- Color: bordes ---------------------------------------------------- */
  --c-border: #e2e0db;           /* Método principal de separación */
  --c-border-strong: #c3c7cd;
  --c-border-inverse: rgba(255, 255, 255, 0.16);

  /* --- Color: estado ---------------------------------------------------- */
  --c-error: #ba1a1a;
  --c-error-bg: #ffdad6;
  --c-error-ink: #93000a;
  --c-star: #a37c33;            /* 3.51:1 sobre --c-bg y 3.83:1 sobre blanco (WCAG 1.4.11) */

  /* --- Color: foco (accesibilidad) -------------------------------------- */
  --c-focus: #0f2a3d;
  --c-focus-halo: rgba(15, 42, 61, 0.18);

  /* --- Tipografía ------------------------------------------------------- */
  --font-serif: 'Literata', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

  /* Escala fluida: el valor crece con el viewport entre 360px y 1280px,
     de modo que no hacen falta media queries para el tamaño de letra. */
  --t-display: clamp(2rem, 1.35rem + 2.9vw, 3rem);        /* 32 → 48 px */
  --t-h1: clamp(1.875rem, 1.35rem + 2.3vw, 2.75rem);      /* 30 → 44 px */
  --t-h2: clamp(1.5rem, 1.24rem + 1.15vw, 2rem);          /* 24 → 32 px */
  --t-h3: clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);        /* 20 → 24 px */
  --t-h4: 1.125rem;                                       /* 18 px */
  --t-body-lg: 1.125rem;                                  /* 18 px, texto largo */
  --t-body: 1rem;                                         /* 16 px */
  --t-sm: 0.875rem;                                       /* 14 px */
  --t-xs: 0.75rem;                                        /* 12 px */

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  --ls-display: -0.02em;         /* Look "tinta sobre papel" */
  --ls-label: 0.01em;
  --ls-caps: 0.06em;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;                 /* Solo en las cifras del contador. Literata e
                                    Inter se auto-alojan con el eje variable
                                    hasta 700, asi que este peso ya está
                                    disponible sin descargar nada extra. */

  /* --- Espaciado: ritmo de 8px ------------------------------------------ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Aire vertical entre secciones, también fluido. */
  --s-section: clamp(3rem, 2rem + 4.5vw, 5.5rem);

  /* --- Layout ----------------------------------------------------------- */
  --w-container: 1280px;
  --w-prose: 68ch;               /* Ancho de lectura cómodo en texto largo */
  --gutter: clamp(1rem, 0.65rem + 1.5vw, 1.5rem);
  --h-header: 72px;

  /* --- Formas ----------------------------------------------------------- */
  --r-sm: 4px;
  --r: 8px;                      /* Botones, inputs, tarjetas */
  --r-lg: 16px;                  /* Bloques destacados e imágenes grandes */
  --r-full: 9999px;              /* Solo chips de estado */

  /* --- Elevación: capas tonales, no sombras físicas --------------------- */
  --shadow-soft: 0 4px 20px -2px rgba(15, 42, 61, 0.04);
  --shadow-lift: 0 8px 28px -6px rgba(15, 42, 61, 0.1);

  /* --- Movimiento ------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur: 160ms;

  /* --- Capas ------------------------------------------------------------ */
  --z-header: 100;
  --z-menu: 200;
  --z-skip: 300;
}

/* Respeta a quien pide menos movimiento en su sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0.01ms;
  }
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa la cabecera fija al saltar a un ancla desde el índice o el menú. */
  scroll-padding-top: calc(var(--h-header) + var(--s-4));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Una palabra sin punto de corte se parte antes que desbordar su caja.
     La que lo provocaba es "info@buscaradministradordefincas.com": 36
     caracteres seguidos que no caben en una columna de movil, y como
     overflow-x del body esta en hidden, el texto no se salia: se cortaba y
     desaparecia. Esto solo actua cuando la palabra no cabe de ninguna forma;
     el resto del texto parte por espacios como siempre. */
  overflow-wrap: break-word;
  /* Evita el desbordamiento horizontal en móvil pase lo que pase. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--w-semibold);
  line-height: var(--lh-heading);
  color: var(--c-primary);
  text-wrap: balance;           /* Evita títulos con una palabra suelta */
}

h1 { font-size: var(--t-h1); letter-spacing: var(--ls-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: var(--lh-snug); font-weight: var(--w-medium); }
h4 { font-size: var(--t-h4); font-weight: var(--w-medium); }

p {
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

ul, ol {
  margin: 0 0 var(--s-4);
  padding-left: 1.25em;
}

li + li {
  margin-top: var(--s-2);
}

a {
  color: var(--c-primary);
  /* El subrayado es lo unico que distingue un enlace dentro de un parrafo: el
     color del enlace y el del texto normal solo se separan 1.16:1, muy por
     debajo del 3:1 que pide WCAG 1.4.1. Con --c-border-strong el subrayado
     quedaba a 1.56:1 del fondo, es decir, invisible. */
  text-decoration-color: var(--c-ink-subtle);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease),
              text-decoration-color var(--dur) var(--ease);
}

a:hover {
  color: var(--c-primary-hover);
  text-decoration-color: currentColor;
}

strong, b {
  font-weight: var(--w-semibold);
}

small {
  font-size: var(--t-sm);
}

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

/* Contenedor de las definiciones de iconos, inyectado tras <body>.
   No se pinta: solo existe para que los <use href="#ic-..."> lo referencien.
   display:none funciona aqui porque <use> resuelve la referencia por id, no
   por visibilidad del original. */
.sprite-iconos {
  display: none;
}

svg {
  fill: none;
  stroke: currentColor;
  /* Iconografía lineal de 2pt, según la guía de diseño. */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

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

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
}

hr {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: var(--s-6) 0;
}

/* --- Foco visible ---------------------------------------------------------
   Nunca se elimina el indicador de foco: es el único modo de navegar con
   teclado. Se usa :focus-visible para no mostrarlo en clics de ratón. */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --- Utilidades de accesibilidad ----------------------------------------- */

/* Oculta visualmente pero lo mantiene accesible a lectores de pantalla. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Enlace "saltar al contenido": primer tabulador de la página. */
.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-4);
  background: var(--c-primary);
  color: var(--c-ink-inverse);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  border-radius: var(--r);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--s-4)));
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--c-ink-inverse);
}

/* --- Layout compartido --------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.seccion--sunk {
  background: var(--c-surface-sunk);
}

.seccion--oscura {
  background: var(--c-surface-inverse);
  color: var(--c-ink-inverse);
}

.seccion--oscura h1,
.seccion--oscura h2,
.seccion--oscura h3 {
  color: var(--c-ink-inverse);
}

/* Cabecera de sección: título + entradilla centrados. */
.seccion__cabecera {
  max-width: 56ch;
  margin: 0 auto var(--s-7);
  text-align: center;
}

.seccion__cabecera p {
  margin-top: var(--s-3);
  color: var(--c-ink-muted);
  font-size: var(--t-body-lg);
}

.seccion--oscura .seccion__cabecera p {
  color: var(--c-ink-inverse-muted);
}

/* Cabecera de sección con acción a la derecha (p. ej. "Ver todos →"). */
.seccion__cabecera--fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  max-width: none;
  text-align: left;
}

.seccion__cabecera--fila > div {
  max-width: 56ch;
}

/* Tablas y bloques anchos: nunca deben desbordar la página, se desplazan
   dentro de su propio contenedor. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   3. COMPONENTES
   ========================================================================== */

/* --------------------------------------------------------------------------
   BOTONES
   Altura 48px en acciones principales (objetivo táctil cómodo en móvil).
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-label);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.btn svg {
  width: 18px;
  height: 18px;
}

.btn--primario {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

.btn--primario:hover {
  background: var(--c-primary-hover);
  border-color: var(--c-primary-hover);
  color: #fff;
}

.btn--secundario {
  background: transparent;
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.btn--secundario:hover {
  background: rgba(15, 42, 61, 0.05);
  color: var(--c-primary);
}

/* Acento dorado: reservado a la conversión principal. */
.btn--oro {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: #fff;
}

.btn--oro:hover {
  background: var(--c-gold-hover);
  border-color: var(--c-gold-hover);
  color: #fff;
}

.btn--fantasma {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-primary);
}

.btn--fantasma:hover {
  background: var(--c-surface);
  border-color: var(--c-border-strong);
}

/* Variante para fondos oscuros. */
.seccion--oscura .btn--secundario {
  border-color: var(--c-border-inverse);
  color: var(--c-ink-inverse);
}

.seccion--oscura .btn--secundario:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-ink-inverse);
}

/* Un boton que ya ocupa el 100% de su caja no gana nada con nowrap: lo unico
   que hace es fijar el ancho MINIMO de su contenedor en el texto entero. El
   "Ver en Google Maps" del bloque de ubicacion, metido en dos cajas con 24px
   de padding cada una, sacaba asi la ficha de la pantalla a 320px. */
.btn--bloque {
  width: 100%;
  white-space: normal;
}

.btn--sm {
  min-height: 40px;
  padding: 0 var(--s-4);
  font-size: var(--t-xs);
}

/* Enlace con flecha, para "Ver todos". */
/* El nowrap que llevaba este enlace funcionaba con "Ver ficha" y reventaba con
   "Gestion contable y economica en Barcelona: los 7 despachos comparados": esa
   frase forzaba una linea de 500 px y sacaba scroll horizontal a toda la pagina
   de especialidad en movil. Ahora el texto parte y la flecha se queda al lado,
   centrada, sin poder encogerse ni quedarse huerfana en una linea. */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 100%;
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  text-decoration: none;
}

.enlace-flecha svg {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease);
}

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

/* --------------------------------------------------------------------------
   FORMULARIOS
   -------------------------------------------------------------------------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.campo__etiqueta {
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--c-ink);
  letter-spacing: var(--ls-label);
}

.campo__control {
  position: relative;
  display: flex;
  align-items: center;
}

/* El icono va dentro del control; el padding del input le deja hueco. */
.campo__icono {
  position: absolute;
  left: var(--s-3);
  width: 20px;
  height: 20px;
  color: var(--c-ink-subtle);
  pointer-events: none;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  color: var(--c-ink);
  font-size: var(--t-body);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.campo__control:has(.campo__icono) input,
.campo__control:has(.campo__icono) select {
  padding-left: calc(var(--s-3) + 20px + var(--s-2));
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--c-ink-placeholder);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-focus-halo);
}

/* select nativo con flecha propia: consistente entre navegadores. */
.campo select {
  appearance: none;
  padding-right: calc(var(--s-4) + 20px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2373777d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-size: 18px;
}

.campo__ayuda {
  font-size: var(--t-xs);
  color: var(--c-ink-subtle);
}

/* --------------------------------------------------------------------------
   TARJETAS
   Blanco puro sobre el marfil del fondo, separadas por borde y no por sombra.
   -------------------------------------------------------------------------- */
.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  padding: var(--s-5);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

@media (max-width: 640px) {
  .tarjeta {
    padding: var(--s-4);
  }
}

.tarjeta--enlazada:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.tarjeta__titulo {
  font-size: var(--t-h4);
  font-family: var(--font-serif);
  font-weight: var(--w-semibold);
  color: var(--c-primary);
}

.tarjeta__texto {
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}

/* Hace clicable toda la tarjeta manteniendo un solo enlace real en el DOM:
   mejor para lectores de pantalla y para el rastreo que envolver todo en <a>. */
.enlace-cubierta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tarjeta--relativa {
  position: relative;
}

/* --------------------------------------------------------------------------
   CHIPS Y ETIQUETAS
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 5px var(--s-3);
  border-radius: var(--r-full);
  background: var(--c-surface-sunk);
  color: var(--c-ink-muted);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  line-height: 1.4;
  white-space: nowrap;
}

.chip svg {
  width: 13px;
  height: 13px;
}

/* Chip enlazado a su página de especialidad.
   Los chips de servicio eran <span>: texto muerto que dejaba las 12 páginas de
   /especialidad/ con once o doce enlaces internos, casi todos entre ellas. Al
   pasar a <a> ganan ~350 enlaces contextuales con ancla exacta.
   Se distingue del chip informativo por el borde y el color de tinta, no solo
   por el hover: en táctil no hay hover y tiene que verse que se puede pulsar. */
.chip--enlace {
  border: 1px solid var(--c-border);
  color: var(--c-primary);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.chip--enlace:hover,
.chip--enlace:focus-visible {
  background: var(--c-surface);
  border-color: var(--c-border-strong);
  color: var(--c-gold-text);
}

@media (prefers-reduced-motion: reduce) {
  .chip--enlace { transition: none; }
}

/* Dentro de una tarjeta con enlace de cubierta, el chip tiene que quedar por
   encima del pseudoelemento que cubre la tarjeta; si no, el clic se lo lleva
   siempre la ficha y el enlace de especialidad no se puede pulsar nunca. */
.tarjeta--enlazada .chip--enlace,
.admin-tarjeta__servicios .chip--enlace,
.despacho__servicios .chip--enlace,
.perfil__chips .chip--enlace {
  position: relative;
  z-index: 2;
}

/* A 320px -el ancho minimo de referencia para movil- el nowrap heredado de
   .chip sacaba la pagina de provincia 11px fuera de pantalla: la tarjeta de
   despacho es una rejilla de 64px + 1fr y el ancho minimo de la segunda
   columna lo fijaba el chip mas largo sin poder partir ("Gestion patrimonial
   y alquileres", 31 caracteres). Es el mismo fallo que ya se corrigio en las
   tablas y en .enlace-flecha, y la misma regla: nowrap solo en contenido que
   se sabe corto. Los nombres de servicio son dato editorial y pueden crecer,
   asi que se les deja partir. Los chips informativos (--verificado,
   --categoria) son cortos por construccion y conservan el nowrap. */
@media (max-width: 640px) {
  .chip--enlace {
    white-space: normal;
  }
}

.chip--verificado {
  background: var(--c-gold-wash);
  color: var(--c-gold-ink);
}

.chip--categoria {
  background: rgba(15, 42, 61, 0.07);
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-weight: var(--w-semibold);
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   VALORACIÓN CON ESTRELLAS
   Las estrellas son decorativas: el dato real va en texto para lectores de
   pantalla y para que las IA puedan extraerlo.
   -------------------------------------------------------------------------- */
.valoracion {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
}

.valoracion__estrellas {
  display: inline-flex;
  gap: 1px;
  color: var(--c-star);
}

.valoracion__estrellas svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.5;
}

.valoracion__estrellas .llena {
  fill: currentColor;
}

.valoracion__estrellas .vacia {
  color: var(--c-border-strong);
}

.valoracion__nota {
  font-weight: var(--w-semibold);
  color: var(--c-ink);
}

.valoracion__recuento {
  color: var(--c-ink-subtle);
  font-size: var(--t-xs);
}

/* --------------------------------------------------------------------------
   REJILLAS
   auto-fit + minmax: se adaptan sin un solo media query.
   -------------------------------------------------------------------------- */
.rejilla {
  display: grid;
  gap: var(--s-5);
}

.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* --------------------------------------------------------------------------
   CABECERA
   -------------------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--h-header);
}

.cabecera__logo {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

.cabecera__logo img {
  width: 180px;
  height: 60px;
  object-fit: contain;
}

@media (max-width: 480px) {
  .cabecera__logo img {
    width: 150px;
    height: 50px;
  }
}

.cabecera__nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-left: auto;
}

.cabecera__enlaces {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cabecera__enlaces li {
  margin: 0;
}

.cabecera__enlaces a {
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--c-ink-muted);
  text-decoration: none;
  white-space: nowrap;
}

.cabecera__enlaces a:hover,
.cabecera__enlaces a[aria-current='page'] {
  color: var(--c-primary);
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Botón hamburguesa: solo visible en móvil. */
.cabecera__hamburguesa {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  color: var(--c-primary);
}

.cabecera__hamburguesa svg {
  width: 22px;
  height: 22px;
}

.cabecera__hamburguesa .icono-cerrar { display: none; }
.cabecera__hamburguesa[aria-expanded='true'] .icono-abrir { display: none; }
.cabecera__hamburguesa[aria-expanded='true'] .icono-cerrar { display: block; }

@media (max-width: 960px) {
  .cabecera__hamburguesa {
    display: inline-flex;
  }

  .cabecera__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-menu);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: var(--s-4) var(--gutter) var(--s-5);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-lift);
    /* El movil en horizontal deja unos 360px de alto: sin tope, el menu se
       sale por abajo y los ultimos enlaces quedan fuera de alcance porque el
       panel es absoluto y no arrastra el scroll de la pagina. */
    max-height: calc(100dvh - var(--h-header));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Sin JS el menú permanece cerrado pero los enlaces siguen en el pie,
     de modo que la navegación nunca queda inaccesible. */
  .cabecera__nav[hidden] {
    display: none;
  }

  .cabecera__enlaces {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .cabecera__enlaces a {
    display: block;
    padding: var(--s-3) 0;
    font-size: var(--t-body);
    border-bottom: 1px solid var(--c-border);
  }

  .cabecera__acciones {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--s-4);
  }

  .cabecera__acciones .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   MIGAS DE PAN
   -------------------------------------------------------------------------- */
.migas {
  padding-block: var(--s-4);
  font-size: var(--t-xs);
  color: var(--c-ink-subtle);
}

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

.migas li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.migas li + li::before {
  content: '/';
  color: var(--c-border-strong);
}

.migas a {
  color: var(--c-ink-muted);
  text-decoration: none;
}

.migas a:hover {
  color: var(--c-primary);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   PIE
   -------------------------------------------------------------------------- */
.pie {
  background: var(--c-surface-inverse);
  color: var(--c-ink-inverse-muted);
  padding-block: var(--s-8) var(--s-5);
  font-size: var(--t-sm);
}

.pie__rejilla {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.pie__marca {
  grid-column: span 1;
  max-width: 34ch;
}

.pie__logo {
  display: inline-block;
  margin-bottom: var(--s-4);
}

/* Se sirve el fichero blanco (logo-blanco.webp), no una inversion por CSS. */
.pie__logo img {
  width: 180px;
  height: 60px;
  object-fit: contain;
}

.pie h3 {
  margin-bottom: var(--s-4);
  color: var(--c-ink-inverse);
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.pie ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie li + li {
  margin-top: var(--s-3);
}

.pie a {
  color: var(--c-ink-inverse-muted);
  text-decoration: none;
}

.pie a:hover {
  color: var(--c-ink-inverse);
  text-decoration: underline;
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border-inverse);
  font-size: var(--t-xs);
}

/* Credito de desarrollo. Va en la fila legal del pie, con el mismo peso
   visual que el aviso de copyright: es una firma, no una llamada a la accion. */
.pie__credito {
  font-size: var(--t-xs);
  color: var(--c-ink-inverse-muted);
}

.pie__credito a {
  color: var(--c-ink-inverse);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pie__credito a:hover {
  color: var(--c-gold);
}

.pie__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

.pie__legal li + li {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   AVISO DE FUNCIONALIDAD PENDIENTE
   Marca visualmente los formularios todavía sin backend, para que nadie los
   dé por operativos. Se retira al conectar el endpoint de Hostinger.
   -------------------------------------------------------------------------- */
.aviso-maqueta {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r);
  background: var(--c-surface-sunk);
  color: var(--c-ink-subtle);
  font-size: var(--t-xs);
  line-height: 1.5;
}

.aviso-maqueta svg {
  width: 15px;
  height: 15px;
  margin-top: 2px;
}


/* ==========================================================================
   4. PORTADA
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO + BUSCADOR
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--s-section);
  text-align: center;
}

.hero__titulo {
  max-width: 20ch;
  margin-inline: auto;
  font-size: var(--t-display);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}

.hero__entradilla {
  max-width: 62ch;
  margin: var(--s-4) auto 0;
  color: var(--c-ink-muted);
  font-size: var(--t-body-lg);
}

.buscador {
  max-width: 900px;
  margin: var(--s-7) auto 0;
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  text-align: left;
}

.buscador__campos {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 2fr 1.2fr auto;
  align-items: end;
}

@media (max-width: 800px) {
  .buscador__campos {
    grid-template-columns: 1fr;
  }

  .buscador__campos .btn {
    width: 100%;
  }
}

/* 24px de margen a cada lado dentro de una caja que ya vive dentro del gutter
   de la pagina dejaban el campo de busqueda en 280px utiles de los 360 del
   movil. Bajando a 16px se recuperan 16. */
@media (max-width: 640px) {
  .buscador {
    padding: var(--s-4);
  }
}

/* Lista de sugerencias del buscador (combobox accesible). */
.buscador__campo-lugar {
  position: relative;
}

.buscador__sugerencias {
  position: absolute;
  top: calc(100% + var(--s-1));
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: var(--s-1);
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  box-shadow: var(--shadow-lift);
}

.buscador__sugerencias:empty,
.buscador__sugerencias[hidden] {
  display: none;
}

.buscador__sugerencias li {
  margin: 0;
}

.buscador__sugerencia {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-3);
  border-radius: var(--r-sm);
  text-align: left;
  text-decoration: none;
  color: var(--c-ink);
  font-size: var(--t-sm);
}

.buscador__sugerencia:hover,
.buscador__sugerencia[aria-selected='true'] {
  background: var(--c-surface-sunk);
  color: var(--c-primary);
}

.buscador__sugerencia small {
  margin-left: auto;
  color: var(--c-ink-subtle);
  font-size: var(--t-xs);
  white-space: nowrap;
}

.buscador__sin-resultados {
  padding: var(--s-3);
  color: var(--c-ink-subtle);
  font-size: var(--t-sm);
}

/* Barra de confianza bajo el buscador. */
.hero__confianza {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
}

.hero__confianza svg {
  width: 18px;
  height: 18px;
  color: var(--c-gold);
}

/* --------------------------------------------------------------------------
   CÓMO FUNCIONA — tres pasos
   -------------------------------------------------------------------------- */
.pasos {
  counter-reset: paso;
  position: relative;
}

.paso {
  text-align: center;
}

.paso__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  color: var(--c-primary);
}

.paso__icono svg {
  width: 26px;
  height: 26px;
}

.paso h3 {
  margin-bottom: var(--s-2);
}

.paso p {
  max-width: 40ch;
  margin-inline: auto;
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
}

/* --------------------------------------------------------------------------
   TARJETA DE ADMINISTRADOR
   -------------------------------------------------------------------------- */
.admin-tarjeta {
  position: relative;
  gap: var(--s-4);
}

.admin-tarjeta__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}

/* Monograma con las iniciales: evita depender de logotipos de terceros. */
.admin-tarjeta__monograma {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  background: var(--c-primary);
  border-radius: var(--r);
  color: #fff;
  font-family: var(--font-serif);
  font-size: var(--t-body);
  font-weight: var(--w-semibold);
  letter-spacing: 0.02em;
}

.admin-tarjeta__nombre {
  margin-top: var(--s-1);
  font-size: var(--t-h4);
}

.admin-tarjeta__nombre a {
  text-decoration: none;
}

.admin-tarjeta__nombre a:hover {
  text-decoration: underline;
}

.admin-tarjeta__zona {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-1);
  color: var(--c-ink-subtle);
  font-size: var(--t-sm);
}

.admin-tarjeta__zona svg {
  width: 14px;
  height: 14px;
}

.admin-tarjeta__servicios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-tarjeta__servicios li {
  margin: 0;
}

.admin-tarjeta__pie {
  display: flex;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
}

.admin-tarjeta__pie .btn {
  flex: 1;
  /* Por encima del ::after de la tarjeta enlazada, para seguir siendo clicables. */
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   ESPECIALIDADES
   -------------------------------------------------------------------------- */
.especialidad {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  color: var(--c-ink);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.especialidad:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.especialidad svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--c-primary);
}

/* --------------------------------------------------------------------------
   ENLACES POR PROVINCIA
   -------------------------------------------------------------------------- */
.provincias {
  display: grid;
  gap: var(--s-3) var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.provincias li {
  margin: 0;
}

.provincias a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
  text-decoration: none;
}

.provincias a:hover {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}

.provincias small {
  color: var(--c-ink-subtle);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   POR QUÉ ELEGIRNOS
   -------------------------------------------------------------------------- */
.ventaja__icono {
  display: inline-flex;
  margin-bottom: var(--s-3);
  color: var(--c-gold);
}

.ventaja__icono svg {
  width: 26px;
  height: 26px;
}

.ventaja h3 {
  margin-bottom: var(--s-2);
  font-size: var(--t-h4);
}

/* --------------------------------------------------------------------------
   CÓMO CAMBIAR DE ADMINISTRADOR
   -------------------------------------------------------------------------- */
.cambio {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1.4fr 1fr;
  align-items: start;
}

@media (max-width: 900px) {
  .cambio {
    grid-template-columns: 1fr;
  }
}

.cambio__lista {
  counter-reset: cambio;
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
}

.cambio__lista li {
  position: relative;
  margin-top: var(--s-4);
  padding-left: calc(var(--s-6) + var(--s-2));
  color: var(--c-ink-inverse-muted);
}

.cambio__lista li::before {
  counter-increment: cambio;
  content: counter(cambio);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--c-border-inverse);
  border-radius: var(--r-full);
  color: var(--c-gold);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
}

.cambio__consejo {
  padding: var(--s-5);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--c-border-inverse);
  border-radius: var(--r);
}

.cambio__consejo h3 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-gold);
}

.cambio__consejo svg {
  width: 18px;
  height: 18px;
}

.cambio__consejo blockquote {
  margin: 0;
  color: var(--c-ink-inverse);
  font-family: var(--font-serif);
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   BLOG EN PORTADA
   -------------------------------------------------------------------------- */
.articulo-tarjeta {
  position: relative;
  gap: var(--s-3);
}

.articulo-tarjeta__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xs);
  color: var(--c-ink-subtle);
}

.articulo-tarjeta h3 {
  font-size: var(--t-h4);
}

.articulo-tarjeta h3 a {
  text-decoration: none;
}

.articulo-tarjeta h3 a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq {
  max-width: 820px;
  margin-inline: auto;
}

.faq__item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
}

.faq__item + .faq__item {
  margin-top: var(--s-3);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: var(--t-h4);
  font-weight: var(--w-medium);
  color: var(--c-primary);
  list-style: none;
}

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

.faq__item summary svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--c-ink-subtle);
  transition: transform var(--dur) var(--ease);
}

.faq__item[open] summary svg {
  transform: rotate(180deg);
}

.faq__respuesta {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--c-ink-muted);
  font-size: var(--t-body);
}

/* --------------------------------------------------------------------------
   CTA FINAL
   -------------------------------------------------------------------------- */
.cta-final {
  text-align: center;
}

.cta-final h2 {
  max-width: 22ch;
  margin-inline: auto;
}

.cta-final p {
  max-width: 52ch;
  margin: var(--s-3) auto var(--s-6);
  color: var(--c-ink-inverse-muted);
  font-size: var(--t-body-lg);
}

.cta-final__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}

/* --------------------------------------------------------------------------
   UTILIDADES DE LA PORTADA
   Existen como clases y no como atributos style= en el HTML: la CSP del sitio
   declara `style-src 'self'` sin 'unsafe-inline', que bloquea los estilos en
   línea. Mantenerlo así cierra una vía habitual de inyección de marcado.
   -------------------------------------------------------------------------- */
.lista-limpia {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Bloque de cifras del directorio. */
/* --- El directorio en cifras ---------------------------------------------
   Banda de datos con contador animado (ver js/app.js).

   Va sobre superficie hundida y separada por filetes verticales, que es el
   metodo de separacion del sitio. Las cifras usan la serif de marca, no la
   sans: es el unico bloque de la portada donde el numero ES el contenido, y
   la serif le da el peso editorial que pide.

   tabular-nums NO es decorativo: sin el, cada digito tiene su propio ancho y
   la cifra baila en horizontal durante los dos segundos del contador. */
.seccion--cifras {
  padding-block: var(--s-8);
  background: var(--c-surface-sunk);
  border-block: 1px solid var(--c-border);
}

.cifras {
  gap: 0;
}

.cifra {
  text-align: center;
  padding: var(--s-4) var(--s-3);
  border-left: 1px solid var(--c-border);
}

.cifra:first-child {
  border-left: 0;
}

.cifra__valor {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--t-display);
  font-weight: var(--w-bold);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  /* El contador reescribe este nodo 60 veces por segundo: aislarlo evita que
     el navegador recalcule el layout del resto de la seccion en cada paso. */
  contain: layout style;
}

.cifra__etiqueta {
  margin: var(--s-3) 0 0;
  color: var(--c-ink-muted);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: var(--lh-snug, 1.4);
}

/* En movil la rejilla cae a dos columnas: los filetes verticales dejan de
   tener sentido y se sustituyen por una separacion horizontal. */
@media (max-width: 720px) {
  /* Dos columnas EXPLICITAS. Las reglas de separadores de debajo dan por
     hecho una rejilla de dos, y el auto-fit de .rejilla--4 caia a una sola
     columna por debajo de los ~474px de viewport: la 2a cifra perdia su
     separador y la 1a y la 3a se quedaban con un filete derecho huerfano. */
  .cifras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cifra {
    border-left: 0;
    border-top: 1px solid var(--c-border);
  }
  .cifra:first-child,
  .cifra:nth-child(2) {
    border-top: 0;
  }
  .cifra:nth-child(odd) {
    border-right: 1px solid var(--c-border);
  }
}

.nota-metodologia {
  margin-top: var(--s-5);
  text-align: center;
  color: var(--c-ink-subtle);
  font-size: var(--t-xs);
}

/* Sección "cómo cambiar de administrador". */
.cambio__intro {
  margin-top: var(--s-4);
  color: var(--c-ink-inverse-muted);
  font-size: var(--t-body-lg);
}

.cambio__fuente {
  margin-top: var(--s-4);
  font-size: var(--t-xs);
}

.cambio__fuente a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--c-gold-text);
}

.cambio__fuente a:hover {
  color: var(--c-gold-soft);
}

/* Recuento de despachos junto a cada especialidad. */
.especialidad__conteo {
  color: var(--c-ink-subtle);
  font-weight: var(--w-regular);
}

/* Logo real del despacho en la tarjeta. Encaja en la misma caja de 48px que
   el monograma para que la cabecera no cambie de altura según haya logo o no.
   `contain` evita deformar logos de proporciones distintas, y el radio de 4px
   los hace sentir anidados dentro de la tarjeta (guía de diseño). */
.admin-tarjeta__logo {
  width: 48px;
  height: 48px;
  flex: none;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: var(--c-surface);
}


/* ==========================================================================
   5. PAGINA DE PROVINCIA
   Listado de despachos con filtros. Estructura del mockup
   Diseño/.../administradores_de_fincas_en_madrid/
   ========================================================================== */

/* --- Cabecera de la provincia -------------------------------------------- */
.provincia-cabecera {
  padding-block: var(--s-5) var(--s-7);
  border-bottom: 1px solid var(--c-border);
}

.provincia-cabecera h1 {
  max-width: 22ch;
}

.provincia-cabecera__entradilla {
  max-width: 68ch;
  margin-top: var(--s-4);
  color: var(--c-ink-muted);
  font-size: var(--t-body-lg);
}

/* Cifras reales del directorio en esa provincia. */
.provincia-cifras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

.provincia-cifras li {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-ink-muted);
}

.provincia-cifras strong {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: var(--w-semibold);
  letter-spacing: -0.02em;
  color: var(--c-primary);
}

/* --- Rejilla: filtros + resultados --------------------------------------- */
.listado {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s-7);
  align-items: start;
  padding-block: var(--s-7);
}

@media (max-width: 900px) {
  .listado {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}

/* --- Filtros --------------------------------------------------------------
   Es un <details>, no un <aside>, y llega CERRADO en el HTML.

   El motivo es movil: doce casillas ocupaban unos 470px entre el H1 y el
   primer despacho, asi que en un movil de 360 el usuario llegaba a un listado
   de despachos y lo primero -y a veces lo unico- que veia era el panel de
   filtros. Cerrado son 48px y el primer despacho entra en la primera pantalla.

   Cerrado por defecto y NO abierto por defecto porque asi no hay salto: el
   estado inicial del HTML es el definitivo en movil, que es donde importa. En
   escritorio lo abre app.js, y ahi crecer no mueve nada porque el panel vive
   en su propia columna de 260px con align-items:start.

   Sin JavaScript el <details> sigue plegando y desplegando por su cuenta: es
   comportamiento nativo del navegador, no depende del script.
   -------------------------------------------------------------------------- */
.filtros {
  position: sticky;
  top: calc(var(--h-header) + var(--s-4));
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
}

@media (max-width: 900px) {
  .filtros {
    position: static;
  }
}

.filtros__resumen {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 48px;
  padding: var(--s-3) var(--s-5);
  cursor: pointer;
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--c-primary);
  list-style: none;
}

/* El triangulito nativo se sustituye por el chevron de la marca. */
.filtros__resumen::-webkit-details-marker {
  display: none;
}

.filtros__resumen-texto {
  min-width: 0;
}

/* Cuenta de filtros activos. La pinta app.js: con el panel cerrado es lo unico
   que dice que el listado esta filtrado, y sin ella el usuario ve "3 de 19
   despachos" sin entender por que. */
.filtros__marca {
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: #fff;
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.filtros__marca[hidden] {
  display: none;
}

.filtros__chevron {
  width: 20px;
  height: 20px;
  flex: none;
  margin-left: auto;
  color: var(--c-ink-subtle);
  transition: transform var(--dur) var(--ease);
}

.filtros[open] .filtros__chevron {
  transform: rotate(180deg);
}

.filtros__panel {
  padding: 0 var(--s-5) var(--s-5);
}

.filtros__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
  border-top: 1px solid var(--c-border);
}

.filtros__limpiar {
  background: none;
  border: none;
  padding: 0;
  color: var(--c-ink-subtle);
  font-size: var(--t-xs);
  text-decoration: underline;
  cursor: pointer;
}

.filtros__limpiar:hover {
  color: var(--c-primary);
}

.filtros__titulo {
  margin-bottom: var(--s-3);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--c-ink);
}

.filtros__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.filtros__lista li + li {
  margin-top: var(--s-2);
}

.filtro-check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-ink-muted);
  cursor: pointer;
}

.filtro-check input {
  width: 16px;
  height: 16px;
  min-height: 0;
  flex: none;
  accent-color: var(--c-primary);
  cursor: pointer;
}

.filtro-check:hover {
  color: var(--c-primary);
}

/* WCAG 2.2 pide 24px de alto para un control suelto y esta fila medía 20: la
   casilla de 16 mas una linea de texto de 14. El objetivo real es el <label>
   entero -pulsar el texto marca la casilla-, asi que se le da alto con padding
   vertical, igual que a los enlaces del pie y de las migas. Solo en movil y en
   punteros gruesos: con raton 16px es lo que pide el diseno del panel.

   Lo encontro revisar_movil.py el 2026-08-27, el dia que se le enseno a medir
   controles de formulario. Llevaba ahi desde el primer listado de provincia y
   ningun informe lo veia. */
@media (pointer: coarse), (max-width: 900px) {
  .filtro-check {
    padding-block: 5px;
  }

  .filtro-check input {
    width: 20px;
    height: 20px;
  }
}

.filtro-check__conteo {
  margin-left: auto;
  color: var(--c-ink-subtle);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

/* --- Barra de resultados -------------------------------------------------- */
.resultados__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.resultados__conteo {
  font-size: var(--t-sm);
  color: var(--c-ink-muted);
}

.resultados__conteo strong {
  color: var(--c-ink);
}

.resultados__orden {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-ink-muted);
}

.resultados__orden select {
  min-height: 40px;
  padding: var(--s-2) calc(var(--s-4) + 18px) var(--s-2) var(--s-3);
  font-size: var(--t-sm);
}

/* Safari en iOS amplia la pagina al enfocar un campo de menos de 16px y no la
   devuelve al soltarlo. Era el unico control del sitio por debajo del umbral:
   los de .campo ya van a --t-body. Se sube solo en punteros gruesos para no
   engordar el control con raton, donde 14px es lo que pide el diseno. El
   ancho va ademas del puntero porque el iPad en horizontal son 1024px y
   tambien amplia, y porque asi la regla se puede comprobar en un headless,
   que siempre declara puntero fino. */
@media (pointer: coarse), (max-width: 900px) {
  .resultados__orden select {
    font-size: var(--t-body);
    min-height: 44px;
  }
}

.resultados__lista {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.resultados__vacio {
  padding: var(--s-7) var(--s-5);
  text-align: center;
  color: var(--c-ink-muted);
  background: var(--c-surface);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r);
}

/* --- Tarjeta horizontal de despacho --------------------------------------- */
.despacho {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s-5);
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.despacho:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-soft);
}

.despacho[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .despacho {
    grid-template-columns: 64px 1fr;
    gap: var(--s-4);
    padding: var(--s-4);
  }
}

.despacho__logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: var(--s-2);
}

/* Monograma con las iniciales cuando el despacho no tiene logo utilizable.
   Hereda la caja de .despacho__logo y solo cambia el relleno, para que la
   rejilla de la tarjeta no se mueva segun haya logo o no. */
.despacho__monograma {
  display: grid;
  place-items: center;
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: var(--w-semibold);
  letter-spacing: 0.02em;
  padding: 0;
}

@media (max-width: 640px) {
  .despacho__logo {
    width: 64px;
    height: 64px;
  }

  .despacho__monograma {
    font-size: 1.25rem;
  }
}

.despacho__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}

.despacho__nombre {
  font-size: var(--t-h3);
  font-weight: var(--w-semibold);
}

.despacho__nombre a {
  text-decoration: none;
}

.despacho__nombre a:hover {
  text-decoration: underline;
}

.despacho__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
  color: var(--c-ink-muted);
}

.despacho__datos li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
}

.despacho__datos svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--c-ink-subtle);
}

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

.despacho__datos a:hover {
  color: var(--c-primary);
  text-decoration: underline;
}

.despacho__servicios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

.despacho__servicios li {
  margin: 0;
}

.despacho__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

/* Sin nowrap, por lo mismo que .btn--bloque: dentro de una tarjeta que ya se
   ha comido 64px con el logo, "Ver ficha y ubicacion" sin poder partir fijaba
   el ancho minimo de la tarjeta y dejaba la pagina cabiendo a 320px por un
   pixel. Con sitio de sobra -escritorio, o un movil de 360- siguen en una
   linea; solo parten cuando de verdad no caben. */
.despacho__acciones .btn {
  white-space: normal;
}

/* --- Prosa editorial ------------------------------------------------------ */
.prosa {
  max-width: var(--w-prose);
  padding-block: var(--s-section);
}

.prosa h2 {
  margin-top: var(--s-7);
  margin-bottom: var(--s-4);
}

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

.prosa p {
  font-size: var(--t-body-lg);
  color: var(--c-ink-muted);
}

/* --- Otras provincias ----------------------------------------------------- */
.otras-provincias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
}

.otras-provincias li {
  margin: 0;
}

.otras-provincias a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  color: var(--c-ink);
  font-size: var(--t-sm);
  text-decoration: none;
}

.otras-provincias a:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.otras-provincias small {
  color: var(--c-ink-subtle);
  font-size: var(--t-xs);
}

/* Reclamo que anticipa lo que hay en la ficha: empuja al usuario a entrar
   en vez de quedarse en el listado. */
.despacho__reclamo {
  margin: var(--s-3) 0 0;
  color: var(--c-ink-subtle);
  font-size: var(--t-xs);
}

/* Tablas de datos dentro de la prosa editorial.

   width:100% con reparto automatico de columnas: el navegador ajusta cada una
   a su contenido dentro del ancho disponible. Antes no cabian porque habia un
   white-space:nowrap sobre todas las celdas que no fueran la primera, pensado
   para columnas de cifras: en las tablas que llevan frases enteras (la
   comparativa de apps, "Como leerlo" de provincias, "De donde sale" de
   metodologia) forzaba una tabla de mas de 1.000 px dentro de una columna de
   720 y el .scroll-x acababa haciendo scroll horizontal siempre. */
.tabla {
  width: 100%;
  margin-block: var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  background: var(--c-surface);
  font-size: var(--t-sm);
  overflow: hidden;
}

.tabla th,
.tabla td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
}

/* La cabecera NO lleva white-space:nowrap. Lo llevaba, y era la otra mitad del
   problema: una cabecera en una sola linea fija el ancho minimo de su columna
   en su texto entero, asi que "100 viviendas/ano" obligaba a 185 px pasara lo
   que pasara. Dejandola partir, el minimo de la columna es su palabra mas
   larga y ninguna tabla puede desbordar el ancho de lectura por mucho que
   crezca una cabecera en el futuro. */
.tabla thead th {
  background: var(--c-surface-sunk);
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-ink-muted);
  vertical-align: bottom;
}

.tabla tbody tr:last-child th,
.tabla tbody tr:last-child td {
  border-bottom: none;
}

.tabla td {
  /* Las cifras alineadas en columna, pero SIN nowrap: aqui tambien hay frases.
     Una cifra corta no rompe de linea por si sola, asi que no hace falta
     forzarlo. */
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

/* La primera columna es la que identifica la fila: no se encoge a nada. */
.tabla th[scope="row"],
.tabla tbody td:first-child {
  font-weight: var(--w-semibold);
  color: var(--c-ink);
}

/* --- Tablas en movil -----------------------------------------------------
   Por debajo de 640px una tabla de tres columnas con texto deja dos caracteres
   por linea. Cada fila pasa a ser una ficha apilada y la etiqueta de columna
   sale del data-col que escriben los generadores. El <thead> se oculta a la
   vista pero sigue en el arbol de accesibilidad, asi que el lector de pantalla
   conserva la relacion celda-cabecera. Sin data-col la fila se apila igual,
   solo que sin etiqueta: por eso ninguna tabla se rompe si le falta. */
/* --- Objetivos tactiles en movil -----------------------------------------
   WCAG 2.2 pide 24x24 px CSS para cualquier control que no vaya dentro de una
   frase. Medido con un movil de 360 px, estos se quedaban cortos: el telefono
   y el correo de cada despacho en 22 px -y llamar es LA accion del directorio,
   asi que fallar ahi es fallar en lo unico que importa-, y las migas y los
   enlaces del pie en 19 px. Se les da alto con padding vertical y no con
   height, para que crezca el area sin mover el texto de su sitio. Solo en
   movil: con raton 19 px no son un problema. */
@media (max-width: 640px) {
  .despacho__datos a,
  .contacto__fila a,
  .migas a,
  .pie__rejilla a,
  .pie__legal a,
  /* Enlaces dentro de una celda de tabla: en /especialidad/ y en /provincias/
     son la accion de la fila -llevan a la especialidad o a la provincia- y
     median 19 px. No van dentro de una frase, asi que la excepcion de WCAG
     para enlaces en linea no les aplica. */
  .tabla td a {
    display: inline-block;
    padding-block: 5px;
  }

  /* Este va aparte: ya es inline-flex y no se le puede cambiar el display sin
     descolocarle la flecha. */
  .enlace-flecha {
    padding-block: 5px;
  }

  .despacho__datos {
    gap: var(--s-1) var(--s-4);
  }

  /* Filtros del listado: la etiqueta medía 22px y la casilla 16px, por debajo
     de los 24 de WCAG 2.2. Se le da altura a la fila entera —el <label>
     envuelve a la casilla, así que el area pulsable es toda la fila— y se
     agranda la casilla, que en movil se falla mucho. */
  .filtro-check {
    min-height: 44px;
    gap: var(--s-3);
  }

  .filtro-check input {
    width: 20px;
    height: 20px;
  }

  .filtros__lista li + li {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .tabla,
  .tabla tbody,
  .tabla tr,
  .tabla th,
  .tabla td {
    display: block;
  }

  .tabla {
    border-radius: var(--r);
  }

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

  .tabla tbody tr {
    padding: var(--s-4);
    border-bottom: 1px solid var(--c-border);
  }

  .tabla tbody tr:last-child {
    border-bottom: none;
  }

  .tabla th,
  .tabla td {
    padding: 0;
    border-bottom: none;
  }

  .tabla th[scope="row"],
  .tabla tbody td:first-child {
    margin-bottom: var(--s-2);
    font-size: var(--t-body);
  }

  .tabla tbody td:not(:first-child) {
    margin-top: var(--s-2);
  }

  .tabla tbody td:not(:first-child)[data-col]::before {
    content: attr(data-col);
    display: block;
    font-size: var(--t-xs);
    font-weight: var(--w-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--c-ink-muted);
  }
}

/* La prosa lleva listas y tablas: heredan el tamano de lectura comodo. */
.prosa ul,
.prosa ol {
  font-size: var(--t-body-lg);
  color: var(--c-ink-muted);
}

.prosa li strong {
  color: var(--c-ink);
}

/* Atribucion y fecha de la valoracion. Las resenas son contenido de Google:
   se atribuyen y se fechan para no presentarlas como un dato en vivo. */
.valoracion__fuente {
  color: var(--c-ink-subtle);
  font-size: var(--t-xs);
}

.valoracion {
  flex-wrap: wrap;
}


/* ==========================================================================
   6. FICHA DE ADMINISTRADOR
   Estructura del mockup Diseño/.../perfil_fincas_alonso_administrador_colegiado/
   ========================================================================== */

.perfil {
  padding-block: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--c-border);
}

.perfil__interior {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
}

@media (max-width: 640px) {
  .perfil__interior {
    flex-direction: column;
    gap: var(--s-4);
  }
}

.perfil__logo {
  width: 104px;
  height: 104px;
  flex: none;
  object-fit: contain;
  padding: var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
}

.perfil__nombre {
  font-size: var(--t-h1);
  letter-spacing: var(--ls-display);
}

.perfil__zona {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  color: var(--c-ink-muted);
  font-size: var(--t-body);
}

.perfil__valoracion {
  margin-top: var(--s-3);
}

.perfil__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

.perfil__chips li {
  margin: 0;
}

/* --- Cuerpo: contenido + contacto ---------------------------------------- */
.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--s-7);
  align-items: start;
  padding-block: var(--s-7);
}

/* En una columna, el orden del HTML dejaba el telefono y el boton de
   presupuesto DEBAJO de todo el cuerpo de la ficha: servicios, tablas y prosa.
   En un movil de 360 eso son varias pantallas de scroll hasta la unica accion
   que el directorio le pide al usuario. Se sube la tarjeta de contacto justo
   detras de la cabecera del despacho.

   Se hace con `order` y no cambiando el HTML a proposito: el <aside> es un
   bloque cerrado y autocontenido, asi que adelantarlo no altera el sentido de
   la lectura ni deja un salto de foco raro. El cuerpo sigue siendo lo primero
   en el DOM, que es lo que quiere un rastreador. */
@media (max-width: 960px) {
  .ficha {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
  }

  .contacto {
    order: -1;
  }
}

.ficha__cuerpo {
  max-width: none;
  padding-block: 0;
}

.ficha__entradilla {
  font-size: var(--t-body-lg);
  color: var(--c-ink);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-border);
}

.ficha__mas {
  margin-top: var(--s-5);
}

/* --- Tarjeta de contacto -------------------------------------------------- */
.contacto {
  position: sticky;
  top: calc(var(--h-header) + var(--s-4));
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

@media (max-width: 960px) {
  .contacto {
    position: static;
  }
}

.contacto h2 {
  font-size: var(--t-h3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
}

.contacto__datos {
  margin: 0;
}

.contacto__fila {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding-block: var(--s-3);
}

.contacto__fila + .contacto__fila {
  border-top: 1px solid var(--c-border);
}

.contacto__fila svg {
  margin-top: 3px;
  flex: none;
  color: var(--c-ink-subtle);
}

.contacto__fila dt {
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-ink-subtle);
}

.contacto__fila dd {
  margin: var(--s-1) 0 0;
  font-size: var(--t-sm);
  color: var(--c-ink);
  overflow-wrap: anywhere;
}

.contacto__fila dd a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

.contacto__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* Mismo caso que .btn--bloque: estos dos se estiran al ancho de la tarjeta
   por ser hijos de un flex en columna, asi que el nowrap solo servia para
   fijar el minimo de la tarjeta en "Llamar al 625 757 785". Sin breakpoint a
   proposito: solo parten si de verdad no caben, y en un movil de 360 siguen
   en una linea. */
.contacto__acciones .btn {
  white-space: normal;
}

.contacto__nota {
  margin-top: var(--s-4);
  color: var(--c-ink-subtle);
  font-size: var(--t-xs);
  text-align: center;
}

/* Dentro de la tarjeta, en movil, los botones suben por delante de la lista de
   datos. Una ficha con dos oficinas y dos telefonos deja seis filas de <dl>
   antes de los botones, y con la tarjeta ya en una sola columna eso son otros
   500px hasta el unico boton que importa. El telefono sigue estando en su fila
   del <dl>, asi que no se pierde nada: solo se adelanta la accion. */
@media (max-width: 960px) {
  .contacto {
    display: flex;
    flex-direction: column;
  }

  .contacto h2 { order: 0; }
  .contacto__acciones { order: 1; margin-top: 0; margin-bottom: var(--s-5); }
  .ubicacion { order: 2; }
  .contacto__datos { order: 3; }
  .contacto__nota { order: 4; }
}

/* Tabla de servicios: la primera columna es el nombre del servicio. */
.tabla--servicios th[scope='row'] {
  font-weight: var(--w-semibold);
  color: var(--c-primary);
  white-space: normal;
  width: 34%;
}

.tabla--servicios td {
  white-space: normal;
  color: var(--c-ink-muted);
}

/* El H1 lleva el nombre y, en una segunda linea mas discreta, la keyword
   "administrador de fincas en {provincia}". Asi el encabezado cubre la
   consulta real sin que la marca pierda protagonismo visual. */
.perfil__sub {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  letter-spacing: 0;
  color: var(--c-ink-muted);
}


/* --------------------------------------------------------------------------
   FILA DE INDICADORES
   Para un puñado de cifras de cabecera, la forma correcta es una fila de
   indicadores, no un gráfico: el número ES el dato. El valor va en Inter
   —DESIGN.md reserva la serif para narrativa y da Inter a los datos— y con
   cifras proporcionales, porque son valores sueltos y no columnas a alinear.
   -------------------------------------------------------------------------- */
.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--s-3);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 640px) {
  .indicadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.indicador {
  margin: 0;
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
}

/* La valoración es la cifra que más pesa en la decisión: se marca con el oro,
   que en este sistema está reservado a lo destacado y a lo verificado. */
.indicador--destacado {
  border-color: var(--c-gold);
  background: var(--c-gold-wash);
}

.indicador__icono {
  display: inline-flex;
  color: var(--c-ink-subtle);
}

.indicador--destacado .indicador__icono {
  color: var(--c-gold-hover);
}

.indicador__valor {
  margin: var(--s-2) 0 0;
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  font-weight: var(--w-semibold);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--c-primary);
}

.indicador__etiqueta {
  margin: var(--s-2) 0 0;
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   BLOQUE DE UBICACION
   No es un mapa: es una llamada a la accion. Antes habia una reticula gris
   que simulaba un plano y se leia como una imagen rota.

   No se incrusta un mapa real porque un iframe de Google carga sus cookies
   —CSP y consentimiento previo— y porque generar imagenes estaticas desde
   tiles de OpenStreetMap incumple su politica de uso.
   -------------------------------------------------------------------------- */
.ubicacion {
  margin-bottom: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--r);
  background: var(--c-surface-inverse);
  color: var(--c-ink-inverse);
  text-align: center;
}

.ubicacion__etiqueta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin: 0;
  color: var(--c-gold);
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.ubicacion__direccion {
  margin: var(--s-3) 0 var(--s-5);
  font-family: var(--font-serif);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--c-ink-inverse);
}


/* --------------------------------------------------------------------------
   SERVICIOS DEL DESPACHO
   Tarjetas con icono en lugar de una tabla plana: sigue siendo una lista
   semántica, pero permite escanear de un vistazo lo que cubre el despacho.
   -------------------------------------------------------------------------- */
.servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--s-4);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

.servicio {
  margin: 0;
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.servicio:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-soft);
}

.servicio__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--s-3);
  border-radius: var(--r);
  background: var(--c-surface-sunk);
  color: var(--c-primary);
}

.servicio__nombre {
  font-size: var(--t-h4);
  font-weight: var(--w-semibold);
  margin-bottom: var(--s-2);
}

.servicio__texto {
  margin: 0;
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}


/* ==========================================================================
   7. PAGINAS LEGALES Y ERROR 404
   ========================================================================== */

.legal__fecha {
  margin-top: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-ink-subtle);
  font-size: var(--t-sm);
}

/* Datos identificativos sin rellenar. Se resaltan a proposito: un [COMPLETAR]
   que pase desapercibido en un aviso legal incumple la LSSI-CE. */
.pendiente {
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  background: var(--c-error-bg);
  color: var(--c-error-ink);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
}

/* --- Error 404 ------------------------------------------------------------ */
.error404 {
  text-align: center;
  padding-block: var(--s-9) var(--s-section);
}

.error404__codigo {
  margin: 0 0 var(--s-4);
  color: var(--c-gold-text);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.error404 h1 {
  max-width: 18ch;
  margin-inline: auto;
  font-size: var(--t-display);
}

.error404__texto {
  max-width: 58ch;
  margin: var(--s-4) auto 0;
  color: var(--c-ink-muted);
  font-size: var(--t-body-lg);
}

.error404__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  margin-top: var(--s-6);
}


/* ==========================================================================
   8. BLOG
   Estructura de Diseño/.../gu_as_y_recursos_blog_adminspain/ y
   Diseño/.../art_culo_gu_a_para_cambiar_de_administrador/
   ========================================================================== */

/* --- Listado de artículos ------------------------------------------------- */
.articulos {
  display: grid;
  gap: var(--s-5);
}

.articulo {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.articulo:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-soft);
}

.articulo__imagen {
  display: block;
  overflow: hidden;
  background: var(--c-surface-sunk);
}

.articulo__imagen img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}

.articulo:hover .articulo__imagen img {
  transform: scale(1.02);
}

.articulo__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
}

.articulo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  color: var(--c-ink-subtle);
  font-size: var(--t-xs);
}

.articulo__titulo {
  margin: 0;
  font-size: var(--t-h3);
}

.articulo__titulo a {
  text-decoration: none;
}

.articulo__titulo a:hover {
  text-decoration: underline;
}

.articulo__extracto {
  margin: 0;
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
}

.articulo__autor {
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
  color: var(--c-ink-subtle);
  font-size: var(--t-xs);
}

/* La entrada destacada va a dos columnas en pantallas anchas. */
.articulo--destacado {
  border-radius: var(--r-lg);
}

@media (min-width: 800px) {
  .articulo--destacado {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
  }

  .articulo--destacado .articulo__imagen img {
    height: 100%;
    min-height: 320px;
  }

  .articulo--destacado .articulo__cuerpo {
    justify-content: center;
    padding: var(--s-7);
  }

  .articulo--destacado .articulo__titulo {
    font-size: var(--t-h2);
  }

  .articulo--destacado .articulo__extracto {
    font-size: var(--t-body-lg);
  }
}

/* --- Entrada -------------------------------------------------------------- */
.entrada__cabecera {
  padding-block: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--c-border);
}

.entrada__cabecera h1 {
  max-width: 24ch;
  margin-top: var(--s-4);
}

.entrada__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  color: var(--c-ink-subtle);
  font-size: var(--t-xs);
}

.entrada__entradilla {
  max-width: var(--w-prose);
  margin-top: var(--s-4);
  color: var(--c-ink-muted);
  font-size: var(--t-body-lg);
}

.entrada__autor {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-5) 0 0;
  color: var(--c-ink-subtle);
  font-size: var(--t-sm);
}

.entrada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s-7);
  align-items: start;
  padding-block: var(--s-7);
}

@media (max-width: 960px) {
  .entrada {
    grid-template-columns: 1fr;
  }
}

.entrada__cuerpo {
  padding-block: 0;
}

.entrada__portada {
  margin: 0 0 var(--s-6);
}

.entrada__portada img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--r-lg);
}

/* Ficha de app dentro de la comparativa: el logo acompaña al nombre en el
   propio encabezado. Va con alt="" porque el nombre ya esta en el texto. */
.entrada__cuerpo h3.app-ficha {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.app-ficha__logo {
  width: 40px;
  height: 40px;
  flex: none;
  object-fit: contain;
  border-radius: var(--r-sm);
}

/* Los H3 son subapartados dentro de una sección: se distinguen del H2 sin
   competir con él. */
.entrada__cuerpo h3 {
  margin-top: var(--s-5);
  margin-bottom: var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: var(--w-semibold);
  color: var(--c-ink);
}

.entrada__pie {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
  color: var(--c-ink-subtle);
  font-size: var(--t-sm);
}

.entrada__lateral {
  position: sticky;
  top: calc(var(--h-header) + var(--s-4));
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

@media (max-width: 960px) {
  .entrada__lateral {
    position: static;
  }
}

.entrada__lateral-texto {
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
}

.relacionados {
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
}

.relacionados h2 {
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--t-h4);
}

.relacionados ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.relacionados li + li {
  margin-top: var(--s-4);
}

.relacionados a {
  display: block;
  color: var(--c-ink);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  text-decoration: none;
}

.relacionados a:hover {
  color: var(--c-primary);
  text-decoration: underline;
}

.relacionados .chip {
  display: inline-flex;
  margin-bottom: var(--s-2);
}

/* --------------------------------------------------------------------------
   ALTA DE DESPACHO: llamada y formulario

   El sitio tiene UN solo formulario y es este: el que usa un administrador de
   fincas para darse de alta, corregir su ficha o pedir que se retire. No hay
   formulario de "contacta con este despacho" a proposito -el directorio no
   intermedia-, asi que todo lo que hay aqui sirve a un unico caso de uso.

   La banda .cta-alta es clara y no oscura como .cta-final: en la ficha y en el
   listado de provincia conviven las dos, y si las dos fueran oscuras la del
   administrador se leeria como el cierre de la pagina, que no lo es. El cierre
   sigue siendo el CTA de busqueda, dirigido a la comunidad.
   -------------------------------------------------------------------------- */
/* La caja no ocupa los 1280px del contenedor: se limita a 52rem y se centra.
   A ancho completo el texto se quedaba en su columna de lectura y entre el
   parrafo y el boton aparecia medio metro de vacio, que se leia como un fallo
   de maquetacion y no como aire. Rejilla y no flex: dos columnas -texto y
   boton- que caen a una sola por debajo de 720px. */
.cta-alta__caja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-5);
  max-width: 52rem;
  margin-inline: auto;
  padding: var(--s-6);
  background: var(--c-gold-wash);
  border: 1px solid var(--c-gold);
  border-radius: var(--r-lg);
}

@media (max-width: 720px) {
  .cta-alta__caja {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cta-alta__texto {
  min-width: 0;
}

.cta-alta__etiqueta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  color: var(--c-gold-ink);
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.cta-alta__etiqueta svg {
  flex: none;
}

.cta-alta__texto h2 {
  font-size: var(--t-h3);
}

.cta-alta__texto p {
  margin: var(--s-3) 0 0;
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}

/* Apilado, el boton pasa a ocupar la fila entera: es el objetivo tactil mas
   comodo en movil y ademas deja de fijar el ancho minimo de la caja. */
@media (max-width: 720px) {
  .cta-alta__accion .btn {
    width: 100%;
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .cta-alta__caja {
    padding: var(--s-5) var(--s-4);
  }
}

/* --- El formulario ------------------------------------------------------- */
/* Dos columnas en escritorio: a la izquierda el porque, a la derecha el que.
   Se apilan por debajo de 900px, y ahi el formulario va PRIMERO -order- porque
   quien llega desde el boton "actualiza tus datos" ya viene convencido: leer
   otra vez el argumentario antes de poder escribir es un peaje. */
/* Tres piezas y dos disposiciones. En escritorio, el argumentario a la
   izquierda -titulo arriba, ventajas debajo- y el formulario a la derecha
   ocupando las dos filas. En movil se apilan como titulo, formulario y
   ventajas: el H2 tiene que ir DELANTE del formulario -un formulario que
   aparece sin titulo desorienta, y el orden visual dejaria de coincidir con el
   del DOM, que es lo que lee un lector de pantalla- pero las cuatro ventajas
   no: quien ha llegado hasta aqui desde "actualiza tus datos" ya viene
   convencido, y leerse el argumentario antes de poder escribir es un peaje.
   Por eso se reordena con areas y no con `order`: el titulo no se mueve. */
.alta {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "intro formulario"
    "lista formulario";
  /* La segunda fila se lleva todo lo que sobra. Sin esto las dos filas se
     reparten la altura del formulario, que cruza las dos, y la lista de
     ventajas caia al fondo de la columna con un agujero de 300px encima. */
  grid-template-rows: auto 1fr;
  column-gap: var(--s-7);
  row-gap: var(--s-5);
  align-items: start;
}

.alta__intro { grid-area: intro; }
.alta__lista { grid-area: lista; }
.formulario { grid-area: formulario; }

@media (max-width: 900px) {
  .alta {
    /* minmax(0, 1fr) y no 1fr: `1fr` es minmax(auto, 1fr), y ese `auto` es el
       min-content del hijo mas ancho -aqui el <select>, que reclama el ancho
       de su opcion mas larga-. A 320px sacaba la columna 25px fuera de la
       caja. Con minimo 0 la pista encoge y el select recorta su texto, que es
       lo que hace un desplegable nativo desde siempre. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "formulario"
      "lista";
    grid-template-rows: auto;          /* se anula el 1fr de escritorio */
    row-gap: var(--s-6);
  }
}

.alta__intro h2 {
  font-size: var(--t-h3);
}

.alta__intro > p {
  margin-top: var(--s-3);
  color: var(--c-ink-muted);
  line-height: var(--lh-body);
}

.alta__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-4);
}

.alta__lista li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--s-3);
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}

.alta__lista svg {
  margin-top: 2px;
  color: var(--c-gold-hover);
}

.alta__lista strong {
  display: block;
  color: var(--c-ink);
}

.formulario {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

@media (max-width: 640px) {
  .formulario {
    padding: var(--s-4);
    gap: var(--s-4);
  }
}

/* Los <fieldset> agrupan de verdad: un lector de pantalla anuncia la leyenda
   antes de cada campo del grupo. El reset del navegador les mete borde y
   padding propios, que aqui sobran. */
.formulario__grupo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.formulario__leyenda {
  padding: 0;
  margin-bottom: var(--s-4);
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-subtle);
}

/* Dos columnas a partir de 720px. Con auto-fit no se puede: un minmax que
   quepa en 320px deja pasar tres columnas de 200px en escritorio, y una
   provincia y un telefono no se leen bien en 200px. */
.formulario__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

@media (min-width: 720px) {
  .formulario__rejilla--dos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.campo__obligatorio {
  color: var(--c-error);
  font-weight: var(--w-regular);
}

/* Un campo invalido solo se marca DESPUES de intentar enviar: :invalid a secas
   pinta de rojo un formulario vacio nada mas cargarlo. */
.formulario[data-validado] .campo input:invalid,
.formulario[data-validado] .campo select:invalid,
.formulario[data-validado] .campo textarea:invalid {
  border-color: var(--c-error);
}

.campo textarea {
  min-height: 132px;
  resize: vertical;
  font-family: inherit;
  line-height: var(--lh-body);
}

/* --- Consentimiento ------------------------------------------------------
   La casilla mide 24x24 (WCAG 2.2) y el <label> entero es clicable, asi que el
   objetivo real es toda la frase. Va con align-items:start para que la casilla
   quede a la altura de la PRIMERA linea cuando el texto ocupa tres. */
.campo--check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
}

.campo--check input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--c-primary);
  cursor: pointer;
}

.campo--check label {
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  cursor: pointer;
}

.formulario__acciones {
  display: grid;
  gap: var(--s-3);
}

.formulario__acciones .btn {
  width: 100%;
  white-space: normal;
}

.formulario__nota {
  margin: 0;
  color: var(--c-ink-subtle);
  font-size: var(--t-xs);
  line-height: var(--lh-body);
}

/* Aviso que pinta app.js mientras el formulario no tenga destino en el
   servidor. Nace con hidden: sin JavaScript no aparece, y sin JavaScript el
   formulario se envia de forma nativa en cuanto exista el endpoint. */
.formulario__aviso {
  /* Lleva dentro info@buscaradministradordefincas.com: 37 caracteres que no
     tienen por donde partirse. El `overflow-wrap: break-word` del <body> parte
     la palabra AL PINTARLA pero no cuenta para dimensionar, asi que ese correo
     fijaba el ancho minimo de la columna del formulario y a 320px sacaba 25px
     fuera de la caja. `anywhere` si reduce el min-content, que es justo la
     diferencia entre las dos palabras clave. */
  overflow-wrap: anywhere;
  padding: var(--s-4);
  border-radius: var(--r);
  background: var(--c-gold-wash);
  border: 1px solid var(--c-gold);
  color: var(--c-ink);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}

.formulario__aviso[hidden] {
  display: none;
}

/* Trampa para robots: un campo que una persona no ve ni puede tabular, y que
   un rellenador automatico si completa. Fuera de pantalla y no display:none,
   porque muchos bots descartan lo que esta oculto con display. */
.trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   9. PAGINAS INDICE: /provincias/, /especialidad/ y /como-funciona/
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mapa de Espana por provincias
   --------------------------------------------------------------------------
   El SVG lo genera mapa_espana.py y llega SIN un solo atributo de estilo: la
   CSP del sitio prohibe style=, asi que todo el color, el trazo y la tipografia
   del mapa viven aqui. Los estados (hover, foco, activo) son CSS puro sobre los
   <a> que van dentro del propio SVG: el mapa funciona entero con JavaScript
   desactivado y Google rastrea sus 52 enlaces sin ejecutar nada.

   Objetivos tactiles: las provincias pequenas (Guipuzcoa, Vizcaya, Alava) bajan
   de los 24px que pide WCAG 2.2 en pantallas estrechas. Se cumple por la
   excepcion de "control equivalente": la lista de texto que hay debajo del mapa
   lleva a los mismos 52 destinos con objetivos de tamano completo. Por eso esa
   lista NO es opcional ni se puede plegar por defecto.
   -------------------------------------------------------------------------- */
/* El tope de ancho no es estetico, es funcional por partida doble. Suelto en el
   contenedor de 1.280 px el mapa se dibujaba a 1.230 x 1.040 y dejaba la tabla
   y las tarjetas fuera de la primera pantalla, siendo el mapa un indice y no el
   contenido. Y ademas fija la escala: por encima de unos 910 px de ventana el
   mapa mide SIEMPRE 860, asi que el tamano de los rotulos -que va en unidades
   del viewBox- se puede elegir una vez y no depende del monitor. */
.mapa {
  max-width: 860px;
  margin: 0 auto var(--s-6);
}

.mapa__svg {
  display: block;
  width: 100%;
  height: auto;
}

.mapa__prov path,
.mapa__prov circle {
  /* El trazo del color del fondo es lo que separa una provincia de la
     siguiente: la geometria llega con los bordes casando al punto, sin
     rendijas, y el filete lo pone este stroke. */
  stroke: var(--c-bg);
  stroke-width: 1.2;
  stroke-linejoin: round;
  transition: fill var(--dur) var(--ease);
}

.mapa__prov--sin path,
.mapa__prov--sin circle {
  fill: var(--c-border);
}

.mapa__prov--con path,
.mapa__prov--con circle {
  fill: var(--c-primary);
}

.mapa__prov--sin:hover path,
.mapa__prov--sin:focus-visible path,
.mapa__prov--sin:hover circle,
.mapa__prov--sin:focus-visible circle {
  fill: var(--c-border-strong);
}

.mapa__prov--con:hover path,
.mapa__prov--con:focus-visible path,
.mapa__prov--con:hover circle,
.mapa__prov--con:focus-visible circle {
  fill: var(--c-gold);
}

/* El foco del navegador no se ve sobre una mancha irregular: se sustituye por
   un trazo grueso en el contorno de la propia provincia, que ademas indica
   CUAL esta enfocada, cosa que un rectangulo de foco no haria. */
.mapa__prov:focus {
  outline: none;
}

.mapa__prov:focus-visible path,
.mapa__prov:focus-visible circle {
  stroke: var(--c-focus);
  stroke-width: 2.5;
}

.mapa__etiqueta {
  font-family: var(--font-sans);
  /* 17 unidades del viewBox a escala 0,86 (mapa de 860 sobre 1.000) son casi
     15 px reales. Ver la nota del bloque de media queries. */
  font-size: 17px;
  font-weight: var(--w-semibold);
  fill: #fff;
  /* Halo: el rotulo cae sobre la mancha oscura de su provincia, pero se sale
     por los bordes en las estrechas (Barcelona, Valencia). Con paint-order el
     contorno se pinta ANTES que el relleno y no se come la letra. */
  paint-order: stroke;
  stroke: var(--c-primary);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

.mapa__etiqueta--punto {
  font-size: 13px;
  font-weight: var(--w-medium);
  fill: var(--c-ink-subtle);
  stroke: var(--c-bg);
}

.mapa__recuadro rect {
  fill: none;
  stroke: var(--c-border-strong);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

.mapa__recuadro-titulo {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--w-medium);
  fill: var(--c-ink-subtle);
}

.mapa__pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: center;
  margin-top: var(--s-4);
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
}

.mapa__clave {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.mapa__muestra {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex: none;
}

.mapa__muestra--con { background: var(--c-primary); }
.mapa__muestra--sin { background: var(--c-border); }

/* Atajos a las provincias con despachos. En movil son quien las nombra, porque
   los rotulos del SVG se ocultan; en escritorio hacen de leyenda con recuento y
   de acceso directo sin tener que apuntar a una mancha. */
.mapa__atajos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

.mapa__atajo-n {
  color: var(--c-ink-subtle);
  font-variant-numeric: tabular-nums;
}

.chip--enlace:hover .mapa__atajo-n,
.chip--enlace:focus-visible .mapa__atajo-n {
  color: inherit;
}

/* Lectura en vivo de la provincia bajo el puntero o el foco. La escribe
   app.js; sin JavaScript no aparece, y el <title> nativo de cada provincia ya
   da el mismo dato en el tooltip del navegador. */
.mapa__lectura {
  min-height: 1.6em;
  margin: 0 0 var(--s-3);
  text-align: center;
  font-size: var(--t-sm);
  color: var(--c-ink-muted);
}

.mapa__lectura strong {
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   Tarjetas de provincia con datos
   -------------------------------------------------------------------------- */
.prov-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  transition: box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.prov-tarjeta:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-soft);
}

.prov-tarjeta__nombre {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  line-height: var(--lh-heading);
}

.prov-tarjeta__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-ink-muted);
}

.prov-tarjeta__dato {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-1);
}

.prov-tarjeta__cifra {
  font-weight: var(--w-semibold);
  color: var(--c-ink);
}

.prov-tarjeta__texto {
  margin: 0;
  color: var(--c-ink-muted);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}

/* El enlace al despacho mejor valorado vive DENTRO de una tarjeta cuya
   cubierta la ocupa entera el enlace a la provincia. Sin levantarlo, el clic
   se lo lleva siempre la cubierta y ese enlace no se puede pulsar nunca. Es la
   misma correccion que ya llevan los chips de especialidad. */
.prov-tarjeta__texto a {
  position: relative;
  z-index: 2;
}

.prov-tarjeta__pie {
  margin-top: auto;
  padding-top: var(--s-2);
}

/* --------------------------------------------------------------------------
   Listado completo de las 52 provincias, agrupado por comunidad
   -------------------------------------------------------------------------- */
.cobertura {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

.cobertura__grupo h3 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-subtle);
}

.cobertura__grupo ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cobertura__grupo li {
  padding-block: 3px;
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
}

.cobertura__sin {
  color: var(--c-ink-subtle);
}

.cobertura__con {
  font-weight: var(--w-medium);
}

.cobertura__n {
  color: var(--c-ink-subtle);
  font-weight: var(--w-regular);
}

/* --------------------------------------------------------------------------
   Aviso de provincia sin cobertura: destino de las 46 del mapa que aun no
   tienen despachos. app.js le escribe el nombre de la que se ha pulsado.
   -------------------------------------------------------------------------- */
.sin-cobertura {
  padding: var(--s-6);
  border: 1px solid var(--c-gold);
  border-radius: var(--r-lg);
  background: var(--c-gold-wash);
}

.sin-cobertura h2 {
  margin-top: 0;
}

.sin-cobertura__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* --------------------------------------------------------------------------
   Paso desplegado de /como-funciona/ y tarjeta de especialidad con contexto
   -------------------------------------------------------------------------- */
.paso-largo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-6) 0;
  border-top: 1px solid var(--c-border);
}

.paso-largo:first-child {
  border-top: 0;
  padding-top: 0;
}

.paso-largo__numero {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: var(--c-ink-inverse);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1;
}

.paso-largo__cuerpo > :first-child { margin-top: 0; }
.paso-largo__cuerpo > :last-child { margin-bottom: 0; }

.esp-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  height: 100%;
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  transition: box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.esp-tarjeta:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-soft);
}

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

.esp-tarjeta__icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r);
  background: var(--c-surface-sunk);
  color: var(--c-primary);
}

.esp-tarjeta__nombre {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
}

.esp-tarjeta__n {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: var(--w-regular);
  color: var(--c-ink-subtle);
}

.esp-tarjeta__texto {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
}

.esp-tarjeta__pie {
  margin-top: auto;
  padding-top: var(--s-3);
}

/* Cruces especialidad x provincia: el enlace interno mas util del sitio. */
.cruces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}

/* Los rotulos van dentro del SVG, o sea que su tamano esta en unidades del
   viewBox y encoge con el mapa. Sobre un viewBox de 1.000 de ancho, el numero
   hay que elegirlo por el ancho al que se DIBUJA, no por el que dice la regla:

     ventana   ancho del mapa   escala   17 unidades salen a
     >= 910    860 (el tope)    0,86     15 px   comodo
        900    852              0,85     14 px   comodo
        700    652              0,65     11 px   justo
        641    593              0,59     10 px   pequeno

   De 640 a 900 se suben a 20 para compensar. Por debajo de 640 desaparecen: el
   tamano que harian falta -unas 34 unidades- deja el rotulo de Madrid mas ancho
   que la propia provincia y pisando Segovia, que esta a 80 unidades. Ahi los
   nombres los pone .mapa__atajos, debajo del mapa. */
@media (max-width: 900px) {
  .mapa__etiqueta { font-size: 20px; stroke-width: 4px; }
}

@media (max-width: 640px) {
  .mapa__etiqueta { display: none; }

  .paso-largo {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }

  .paso-largo__numero { grid-row: auto; }
}

/* ==========================================================================
   CONSENTIMIENTO DE COOKIES
   Banner modal (js/cookies.js) y panel de /configurar-cookies/.

   Todo el aspecto vive aqui y no en el JS a proposito: la CSP declara
   style-src 'self', asi que un style="..." en linea no se aplicaria.
   ========================================================================== */

/* Mientras el banner esta abierto la pagina no se desplaza: es un dialogo
   modal y dejar que el fondo scrollee da la falsa impresion de poder seguir
   navegando sin decidir. */
.con-banner-cookies,
.con-banner-cookies body {
  overflow: hidden;
}

.cookies {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--s-4);
  background: rgba(15, 42, 61, 0.62);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.cookies.esta-visible {
  opacity: 1;
}

.cookies__caja {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - var(--s-8));
  overflow-y: auto;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: 0 24px 64px rgba(15, 42, 61, 0.34);
  transform: translateY(14px);
  transition: transform var(--dur) var(--ease);
}

.cookies.esta-visible .cookies__caja {
  transform: translateY(0);
}

.cookies__titulo {
  margin: 0 0 var(--s-3);
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  color: var(--c-primary);
}

.cookies__texto p {
  margin: 0 0 var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--c-ink-muted);
}

.cookies__texto p:last-child {
  margin-bottom: var(--s-5);
}

/* --- Botones -------------------------------------------------------------
   Movil primero: columna, y como el DOM lleva aceptar / rechazar / configurar,
   "Aceptar todas" queda arriba del todo, que es el primer boton que ve el
   pulgar.

   "Aceptar todas" y "Rechazar todas" comparten .cookies__btn y son IDENTICOS
   en color, tamano, borde, tipografia y area de pulsacion. El RGPD exige que
   retirar el consentimiento sea tan facil como darlo, y la AEPD considera
   infraccion destacar visualmente el boton de aceptar. Lo unico que les
   distingue es donde caen. Si algun dia se le pone un color distinto a uno de
   los dos, el banner deja de ser conforme. */
.cookies__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.cookies__btn {
  width: 100%;
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

.cookies__btn:hover {
  background: var(--c-primary-hover);
  border-color: var(--c-primary-hover);
  color: #fff;
}

.cookies__ajustes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--s-4);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--c-ink-muted);
  text-decoration: underline;
}

.cookies__ajustes:hover {
  color: var(--c-primary);
}

.cookies__legal {
  margin: var(--s-4) 0 0;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--c-ink-subtle);
}

@media (min-width: 640px) {
  .cookies {
    align-items: center;
  }

  /* row-reverse y no `order`: el orden del DOM se mantiene intacto para el
     lector de pantalla y coincide con el visual en movil, que es donde esta
     la mayoria del trafico. Al invertir la fila, el primer elemento del DOM
     ("Aceptar todas") cae a la DERECHA DEL TODO, que es la posicion pedida en
     escritorio, y "Configurar" queda a la izquierda. */
  .cookies__acciones {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
  }

  .cookies__btn {
    width: auto;
    flex: 0 1 auto;
  }

  /* margin-right: auto sobre el ULTIMO del DOM. En una fila invertida ese
     margen empuja desde el lado contrario y separa "Configurar" de los dos
     botones, dejandolo pegado al borde izquierdo. */
  .cookies__ajustes {
    margin-right: auto;
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookies,
  .cookies__caja {
    transition: none;
  }
}

/* --- Panel de /configurar-cookies/ --------------------------------------- */

.ajustes {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-6) 0;
}

.ajustes__grupo {
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  background: var(--c-surface);
}

.ajustes__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-2);
}

.ajustes__titulo {
  margin: 0;
  font-size: var(--t-h4);
  color: var(--c-primary);
}

.ajustes__estado {
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  color: var(--c-ink-subtle);
}

.ajustes__desc {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--c-ink-muted);
}

/* El control es un <label> que envuelve la casilla: pulsar el texto la marca,
   asi que el objetivo tactil real es la frase entera y no los 20 px de la
   casilla. Mismo criterio que .filtro-check. */
.ajustes__control {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-block: 5px;
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--c-ink);
  cursor: pointer;
}

.ajustes__control input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--c-primary);
}

.ajustes__control--fijo {
  color: var(--c-ink-subtle);
  cursor: default;
}

.ajustes__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.ajustes__acciones .btn {
  flex: 1 1 auto;
  min-width: 0;
}

.ajustes__aviso {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--c-primary);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--c-surface-sunk);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--c-ink);
}