/* Sistema de diseno de Rapid Cerrajeros. Parte del de Servipuertas (mismo
   grupo empresarial, misma base tipografica y de espaciado) con paleta y
   componentes propios: violeta indigo del logo en vez de azul marino, un
   hero de solo texto (aqui no hay catalogo de producto que enseñar con
   foto) y un bloque de preguntas de precio que Servipuertas no tiene. */
:root {
    /* Paleta SACADA DEL LOGO REAL, no inventada: violeta indigo #300070,
       7,2 % de la tinta de /images/logo-250.png de la web vieja, medido por
       muestreo de pixeles. Contraste 15,45:1 sobre blanco (formula de
       luminancia de WCAG), asi que vale para texto, enlaces y para boton con
       texto blanco encima. */
    --ink: #14120F;
    --ink-soft: #56524D;
    --paper: #FFFFFF;
    --paper-warm: #F6F4F9;   /* calido con una gota del violeta, no gris neutro */
    --line: #E5E2EA;
    --line-strong: #85878C;  /* mismo gris medido en Servipuertas: 3,29:1 sobre --paper-warm (recalculado: aqui el fondo calido es mas claro que el suyo, #F6F4F9 y no #F7F7F9) */
    --accent: #300070;
    --accent-hover: #4A1BA0; /* se ACLARA, no se oscurece: #300070 ya esta casi en negro */
    --accent-soft: #EDE7F6;  /* solo fondos, nunca texto ni borde */
    --measure: 68ch;
    --page: 1180px;
    --step: 8px;
}

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 18px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: "Bitter", Georgia, "Times New Roman", serif;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 calc(var(--step) * 2);
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 calc(var(--step) * 2); max-width: var(--measure); }

/* Listas de texto corrido (las <ul> sin clase dentro de <main>, p. ej. lo que
   hay que pasarnos en /lanzamientos-judiciales/): mismo ancho de lectura
   que <p>. Sin esto, a 1280 px cada <li> se estiraba hasta ~1130 px mientras
   los parrafos de al lado se quedaban en 68ch. Las listas con clase
   (.proceso__lista, .servicios-grid...) tienen su propia maqueta y no entran. */
main ul:not([class]) { max-width: var(--measure); }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

/* <code> aparece en la politica de cookies (nombres de claves guardadas en
   localStorage). Sin regla, el navegador lo pinta con su monospace por
   defecto, mas grande de la cuenta al lado del texto. NO se toca el color:
   hereda --ink sobre --paper, el mismo par que ya se midio en el barrido de
   contraste. */
code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 calc(var(--step) * 3); }
.section { padding: calc(var(--step) * 12) 0; }
.section--warm { background: var(--paper-warm); }

/* Banda de acento: fondo solido en --accent para el bloque que quiera
   marcarse como el mas importante de una pagina (ver .argument, mas abajo).
   Contraste sobre --accent (#300070), medido con la formula de luminancia de
   WCAG:
     #FFFFFF (texto, enlaces y filete de .argument) ... 15,45:1
   Pasa de sobra el 4,5:1 de WCAG 1.4.3 (texto) y el 3:1 de WCAG 1.4.11
   (filete, elemento no textual). Enlaces en blanco subrayado, que no depende
   del color. */
.section--accent {
    background: var(--accent);
    color: #FFFFFF;
}
.section--accent h2 { color: #FFFFFF; }
.section--accent .argument { border-left-color: #FFFFFF; }
.section--accent a {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.section--accent a:hover { text-decoration-thickness: 2px; }


/* Boton unico. No hay variantes de color: uno primario solido y uno de texto. */
.btn {
    display: inline-flex; align-items: center; gap: var(--step);
    padding: 14px 28px;
    background: var(--accent); color: #FFFFFF;
    border: 1px solid var(--accent); border-radius: 2px;
    font-weight: 600; text-decoration: none;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #FFFFFF; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--paper-warm); color: var(--ink); border-color: var(--ink); }

/* Foto a sangre: sin marco, sin sombra, sin esquinas redondeadas. */
.figure { margin: 0; }
.figure img { display: block; width: 100%; height: auto; }
.figure figcaption {
    margin-top: var(--step);
    color: var(--ink-soft); font-size: 0.9rem;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Cabecera ------------------------------------------------------------ */
.site-header {
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}
/* padding-block, NO el shorthand "padding": este div lleva a la vez las
   clases .wrap y .site-header__inner (mismo elemento), y .wrap fija su
   propio padding horizontal (0 calc(var(--step)*3)). Si aqui se usara el
   shorthand "padding", con la misma especificidad que .wrap (0,1,0), la
   regla que se declare despues en el fichero gana ENTERA y pone a 0 los
   dos lados que la otra regla no toca -es lo que pasaba antes: el padding
   horizontal de la cabecera quedaba en 0px en todos los anchos hasta
   860px, comprobado con getComputedStyle(...).paddingLeft-. padding-block
   solo toca arriba/abajo, asi que el padding-left/right de .wrap nunca se
   pisa, sea cual sea el orden de las reglas en el fichero. */
.site-header__inner {
    display: flex;
    align-items: center;
    gap: calc(var(--step) * 4);
    padding-block: calc(var(--step) * 2);
}
.site-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-header__logo img { display: block; height: 34px; width: auto; }

.site-nav { flex: 1 1 auto; }
.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--step) * 3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}
.site-nav a:hover { color: var(--accent); }

.site-header__cta { flex-shrink: 0; white-space: nowrap; }

/* Icono de hamburguesa dibujado con box-shadow (tres barras) en --ink-soft:
   7,75:1 sobre blanco, muy por encima del 3:1 que pide un elemento no
   textual, y es el icono lo que identifica el control.

   El borde usa --line-strong y no --line. Con --line (#E5E2EA sobre el
   blanco de .site-header) el par da 1,28:1 y contradice el contrato que el
   propio token declara doce lineas mas arriba: "Solo para separadores: no
   delimita ningun control". Con --line-strong (#85878C) el par es 3,59:1
   sobre blanco, por encima del minimo publicado del sitio (3,29:1, el de
   --line-strong sobre --paper-warm, ver el token en :root). */
.site-nav__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    /* Sin esto la fila flexible lo encoge para hacerle sitio al CTA en vez
       de encoger otra cosa (a 360px bajaba a 22,89px de ancho, por debajo
       del minimo de 24x24 de WCAG 2.5.8, y el icono de 18px se salia de la
       caja). El boton del menu tiene que quedarse en 40x40 siempre. */
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    padding: 0;
    cursor: pointer;
}
.site-nav__toggle::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--ink-soft);
    box-shadow: 0 6px 0 var(--ink-soft), 0 -6px 0 var(--ink-soft);
}

/* 1180px y no 860px (Tarea 13): con las seis etiquetas cortas del menu
   ("Abrir puertas"... "Desahucios" + "Zonas") el menu de escritorio necesita
   ~706px de contenido; a 861px solo hay 461px utiles en la cabecera (medido)
   y a 1024px, 624px: en los dos sigue sin caber en una linea aunque las
   etiquetas ya sean cortas. La primera anchura donde cabe de verdad es
   ~1120px (medido con las reglas de escritorio forzadas). Se sube el corte a
   1180px -el mismo valor que --page, con margen sobre esos 1120px- para que
   el menu de hamburguesa cubra tambien esa franja intermedia, y el menu de
   escritorio en una sola linea solo se le pida al ancho donde de verdad
   entra (1181px en adelante; comprobado hasta 1280px). */
@media (max-width: 1180px) {
    .site-nav { display: none; }
    .site-nav--open {
        display: block;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        padding: calc(var(--step) * 2) calc(var(--step) * 3);
    }
    .site-nav--open ul { flex-direction: column; gap: 0; }
    /* Los enlaces del menu desplegado median 20px de alto (medido): por debajo
       del minimo de 24x24 de WCAG 2.5.8, igual que le pasaba al boton de
       hamburguesa antes de fijarlo en 40x40. En bloque y con padding vertical
       pasan a 36px y ademas ocupan todo el ancho del desplegable, asi que el
       objetivo es la fila entera y no las letras. El gap de la lista pasa a 0
       porque el padding ya separa, y dejar los dos dejaba huecos muertos entre
       filas donde el toque no hacia nada. */
    .site-nav--open a { display: block; padding-block: 8px; }
    .site-header__inner { position: relative; }
    .site-nav__toggle { display: inline-flex; }
    /* A 320 px (iPhone SE de primera generacion) el logo, el telefono y el boton
       de menu suman mas que el ancho utile de la cabecera: no se sale de la
       pantalla porque los tres llevan flex-shrink:0, pero el boton se mete en el
       padding derecho y los margenes quedaban en 24 px a la izquierda y 7 a la
       derecha (medido). Tres ajustes pequenos y vuelven a ser iguales: el
       padding de la cabecera baja a 16, el telefono aprieta su padding lateral y
       el logo pierde 4 px de alto. Solo por debajo de 361 px: de 361 en adelante
       cabe de sobra y no hace falta tocar nada.
       El gap de la fila NO se toca: es lo que separa el telefono del boton de
       menu, y acercarlos convierte dos objetivos de 40 px en uno solo mal
       apuntado. */
    @media (max-width: 360px) {
        .site-header__inner { padding-inline: calc(var(--step) * 2); }
        .site-header__cta { padding-inline: 14px; }
        .site-header__logo img { height: 30px; }
    }

    /* Con el menu oculto no queda ningun elemento con flex-grow que empuje el
       resto hacia el borde derecho (.site-nav tiene flex:1 pero display:none
       lo saca del flujo), asi que el CTA y el boton de menu se quedaban
       pegados al logo con un hueco a la derecha: a 360px, 47px en vez de los
       24px del margen izquierdo del logo (medido). Empuja el CTA (y detras,
       el boton) hasta el borde, igual que en servipuertas.es. */
    .site-header__cta { margin-left: auto; }
}

/* --- Pie ------------------------------------------------------------------ */
.site-footer {
    background: var(--paper-warm);
    border-top: 1px solid var(--line);
    padding: calc(var(--step) * 8) 0 calc(var(--step) * 4);
    color: var(--ink-soft);
    font-size: 0.95rem;
}
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--accent); }
.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: calc(var(--step) * 4);
    margin-bottom: calc(var(--step) * 4);
}
.site-footer__grid h3 {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink);
    margin-bottom: var(--step);
}
.site-footer__grid ul { list-style: none; margin: 0; padding: 0; }
.site-footer__grid li { margin-bottom: calc(var(--step) / 2); }
/* Nota bajo "Tambien hacemos" (los dos enlaces a las webs hermanas): mas
   pequeña que el resto de la columna, para que se lea como aclaracion y no
   como un tercer enlace mas. */
.site-footer__nota { margin: calc(var(--step) / 2) 0 0; font-size: 0.85rem; }

/* Las 20 zonas (19 poblaciones reales + La Pineda), agrupadas por comarca y
   plegadas con <details>/<summary> nativo: mecanismo, no maquetacion fina.
   Los enlaces quedan en el HTML servido este el grupo abierto o cerrado. */
.site-footer__zonas {
    padding-top: calc(var(--step) * 3);
    border-top: 1px solid var(--line);
}
/* UN SOLO desplegable, no uno por comarca: en movil evita apilar una fila
   por comarca antes de llegar al aviso legal.
   El area de pulsacion del summary supera los 44 px de alto que pide WCAG
   2.5.5 gracias al padding: en un pie, con el pulgar, ese es el criterio que
   manda. */
.site-footer__zonas > summary {
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: var(--step);
    padding: calc(var(--step) * 1.5) 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
}
.site-footer__zonas-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.site-footer__zonas-count { font-size: 0.85rem; color: var(--ink-soft); }
.site-footer__zonas[open] > summary { margin-bottom: var(--step); }
.footer-zonas {
    columns: 4;
    column-gap: calc(var(--step) * 4);
}
.footer-zonas__group {
    break-inside: avoid;
    margin-bottom: calc(var(--step) * 2);
}
.footer-zonas__group h4 {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 calc(var(--step) / 2) 0;
}
.footer-zonas__group ul { list-style: none; margin: 0; padding: 0 0 0 var(--step); }
.footer-zonas__group li { margin-bottom: calc(var(--step) / 2); }

@media (max-width: 860px) {
    .footer-zonas { columns: 2; }
}
@media (max-width: 560px) {
    .footer-zonas { columns: 1; }
}

/* --- Formulario de contacto ------------------------------------------------
   Rojo de error #B3261E: 6,54:1 sobre blanco, por encima del 4,5:1 de texto
   y del 3:1 de bordes de control (WCAG 1.4.3 y 1.4.11). */
:root {
    --error: #B3261E;
}

/* Fondo en --accent (violeta). Motivo en includes/contact-section.php: en
   gris se pega a la seccion de encima en buena parte de las paginas, y en
   blanco se habria pegado en el resto.
   OJO AL ALCANCE: el color se aplica a .contact-section__intro, NO a la
   seccion entera. El formulario esta dentro de .contact-form-card, que es
   blanca, y ahi dentro hay texto oscuro, un boton y el enlace a la politica de
   privacidad. Una regla de color sobre .contact-section los habria dejado en
   blanco sobre blanco. Contrastes sobre --accent (#300070):
     texto y titulo en #FFFFFF ......... 15,45:1  (1.4.3 pide 4,5:1)
     borde del boton en #FFFFFF ........ 15,45:1  (1.4.11 pide 3:1)
   El borde por defecto de .btn--ghost es --line-strong (#85878C) y sobre este
   violeta da 4,30:1, o sea que PASARIA de sobra: se cambia a blanco por
   criterio, no por accesibilidad. El texto del boton tiene que ser blanco a
   la fuerza, y un borde gris junto a una etiqueta blanca se lee como boton
   desactivado. */
.contact-section { background: var(--accent); }
.contact-section__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: calc(var(--step) * 8);
    align-items: start;
}
.contact-section__intro { color: #FFFFFF; }
.contact-section__intro h2 { color: #FFFFFF; }
.contact-section__intro p { max-width: none; }
.contact-section__alt { margin-top: calc(var(--step) * 3); }
.contact-section__alt .btn--ghost {
    color: #FFFFFF;
    border-color: #FFFFFF;
}
.contact-section__alt .btn--ghost:hover {
    background: #FFFFFF;
    color: var(--accent);
    border-color: #FFFFFF;
}
/* Notas bajo "¿Prefieres llamar?" (solo /contacto/). Blanco sobre --accent,
   el mismo 15,45:1 de la columna. Una linea fina las separa del boton. */
.contact-section__notas {
    margin-top: calc(var(--step) * 5);
    padding-top: calc(var(--step) * 4);
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.contact-section__notas h3 {
    color: #FFFFFF;
    font-size: 1.1rem;
    margin: 0 0 var(--step);
}
.contact-section__notas p { margin: 0 0 calc(var(--step) * 3); }
.contact-section__notas p:last-child { margin-bottom: 0; }

.contact-form-card {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: calc(var(--step) * 5);
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--step) * 3);
}

.contact-form__field { margin-bottom: calc(var(--step) * 3); }
.contact-form__field label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: calc(var(--step) / 2);
}

.contact-form__input {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    /* --line-strong: 3,59:1 sobre blanco, por encima del 3:1 de un borde de
       control (WCAG 1.4.11). */
    border: 1px solid var(--line-strong);
    border-radius: 2px;
}
.contact-form__textarea { resize: vertical; min-height: 7.5em; }
.contact-form__input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}
.contact-form__field--invalid .contact-form__input { border-color: var(--error); }
.contact-form__field__error { color: var(--error); font-size: 0.85rem; margin-top: calc(var(--step) / 2); }

/* Honeypot: oculto a la vista y, por el aria-hidden del contenedor (en el
   PHP), tambien al lector de pantalla. tabindex="-1" en el input lo saca
   ademas del orden de tabulacion. Solo lo "ve" un bot que rellena por
   nombre de campo sin renderizar CSS. */
.contact-form__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.contact-form__status {
    margin: 0 0 calc(var(--step) * 2);
    font-weight: 600;
    min-height: 1.5em;
}
.contact-form__status:empty { margin: 0; min-height: 0; }
.contact-form__status--error { color: var(--error); }
.contact-form__status--ok { color: var(--ink-soft); }

.contact-form__submit { width: 100%; justify-content: center; }

.contact-form__legal {
    margin: calc(var(--step) * 2) 0 0;
    font-size: 0.85rem;
    color: var(--ink-soft);
    max-width: none;
}

.contact-form__success {
    text-align: center;
    padding: calc(var(--step) * 6) calc(var(--step) * 4);
    background: var(--paper);
    border: 1px solid var(--line);
}
.contact-form__success h3 { margin-bottom: var(--step); }
.contact-form__success p { max-width: none; margin: 0; }

@media (max-width: 860px) {
    .contact-section__inner { grid-template-columns: 1fr; }
    .contact-form__row { grid-template-columns: 1fr; }
}

/* --- Secciones con foto de fondo ----------------------------------------
   La foto a sangre, un velo encima y el contenido por delante. Mismo patron
   que castellonservice.com, que es lo que pidio el propietario.

   EL VELO ES LO QUE HACE LEGIBLE EL TEXTO, no un efecto. Se calculo
   componiendolo sobre cada pixel de cada foto y midiendo el peor punto
   (scripts/velo-contraste.py): con este violeta al 60 % el blanco queda en
   5,20:1 sobre la foto del hero y 5,10:1 sobre la de la franja, por encima del
   4,5:1 de WCAG 1.4.3. Sin velo serian 1,03:1. Al 55 % bajan a 4,3:1 y ya no
   pasan: 0,60 es el suelo, no un punto de partida. El degradado cierra en 0,72
   porque abajo es donde cae mas texto.

   overflow: hidden en la seccion para que la foto, que es mas grande que el
   hueco, no asome por los lados. */
.con-fondo {
    position: relative;
    overflow: hidden;
    isolation: isolate;          /* el velo no se cuela sobre secciones vecinas */
}
.con-fondo__foto,
.con-fondo__velo {
    position: absolute;
    inset: 0;
}
.con-fondo__foto { z-index: 0; }
.con-fondo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.con-fondo__velo {
    z-index: 1;
    background: linear-gradient(rgba(24, 6, 48, 0.60), rgba(24, 6, 48, 0.72));
}
.con-fondo > .wrap { position: relative; z-index: 2; }

/* --- Hero ---------------------------------------------------------------
   Sin foto (las 32 paginas que no son la portada): texto oscuro sobre el fondo
   calido, alineado a la izquierda, a 18,7:1.
   Con foto (.hero--foto, la portada): texto blanco centrado sobre la imagen. */
.hero {
    background: var(--paper-warm);
    padding: calc(var(--step) * 10) 0 calc(var(--step) * 12);
}

.hero--foto {
    background: var(--ink);      /* se ve mientras la foto no ha cargado */
    padding: calc(var(--step) * 14) 0;
    text-align: center;
}
.hero--foto .hero__inner { max-width: 860px; margin-inline: auto; }
.hero--foto h1 { color: #FFFFFF; }
.hero--foto .hero__entradilla {
    color: #FFFFFF;
    margin-inline: auto;
    max-width: 62ch;
}
/* Antetitulo: mayusculas espaciadas, como el de la web hermana. En blanco y no
   en un color de marca porque sobre este violeta oscuro cualquier tono de la
   paleta se queda corto de contraste. */
.hero__sobretitulo {
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 0 calc(var(--step) * 2);
    max-width: none;
}
.hero--foto .hero__acciones { justify-content: center; }
/* Botones invertidos: sobre un fondo oscuro, el violeta solido desaparece. El
   principal pasa a blanco con texto violeta (15,45:1) y el secundario a
   contorno blanco (5,20:1 de borde sobre el peor punto del velo, por encima
   del 3:1 que pide WCAG 1.4.11 a un control). */
.hero--foto .btn {
    background: #FFFFFF;
    color: var(--accent);
    border-color: #FFFFFF;
}
.hero--foto .btn:hover { background: var(--paper-warm); color: var(--accent); }
.hero--foto .btn--ghost {
    background: transparent;
    color: #FFFFFF;
    border-color: #FFFFFF;
}
.hero--foto .btn--ghost:hover { background: #FFFFFF; color: var(--accent); }

/* En movil, el hueco del hero es alto y estrecho y la foto es panoramica, asi
   que object-fit: cover se queda con la franja central: pared blanca y canto de
   la puerta. Desplazando el encuadre al 32 % entra la mano con el
   destornillador, que es lo que cuenta de que va la web. */
@media (max-width: 860px) {
    .hero--foto .con-fondo__img { object-position: 32% center; }
}
@media (max-width: 560px) {
    .hero--foto { padding: calc(var(--step) * 9) 0 calc(var(--step) * 10); }
}

/* --- Bloque del precio con foto -----------------------------------------
   Es el unico sitio del sitio, ademas del hero, con foto de fondo, y esta bien
   lejos de el a proposito: pegadas, las dos bandas se leen como un solo muro
   de imagenes (visto en pantalla y corregido el 28-9-2026).

   El titulo y la entradilla van en blanco SOBRE la foto, con los 5,10:1 que
   mide el velo en el peor punto de esta imagen. Las preguntas no: pasan a
   tarjetas blancas, porque un <details> con texto blanco encima de una foto se
   lee mal en cuanto la foto tiene una zona clara, y aqui la tiene. */
.precio--foto { background: var(--ink); }
.precio--foto h2,
.precio--foto > .wrap > p { color: #FFFFFF; }
.precio--foto .faq { margin-top: calc(var(--step) * 4); }
.precio--foto .faq__item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: calc(var(--step) * 2) calc(var(--step) * 3);
    margin-bottom: calc(var(--step) * 2);
}
.precio--foto .faq__item:last-child { margin-bottom: 0; }

.hero__entradilla {
    color: var(--ink-soft);
    font-size: 1.2rem;
}
.hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--step) * 2);
    margin-top: calc(var(--step) * 3);
}

/* Bloque de argumento: barra de acento a la izquierda para marcarlo como lo
   mas importante de la pagina, no una caja con sombra. */
.argument { border-left: 4px solid var(--accent); padding-left: calc(var(--step) * 4); }

/* Rejilla de fotos reales: relacion 3:4 fija recortada con object-fit, sin
   depender de las dimensiones reales (variables foto a foto). */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--step) * 3);
}
.photo-grid .figure img { aspect-ratio: 3 / 4; height: auto; object-fit: cover; }

/* --- Resenas de Google -----------------------------------------------------
   Tarjeta al estilo de las de Google: avatar con la inicial, nombre y fecha
   arriba, estrellas debajo y el texto al final, en cuerpo pequeno.

   EL AMARILLO DE GOOGLE NO SE PUEDE USAR. El suyo exacto es #FBBC04 y da
   1,71:1 sobre blanco; las estrellas transmiten la nota, asi que son
   contenido no textual y les aplica el 3:1 de WCAG 1.4.11. Medidos:
     #FBBC04 (el de Google) .. 1,71:1  NO      #B8860B (darkgoldenrod) 3,25:1
     #F9AB00 ................. 1,93:1  NO      #A16207 (el elegido) .. 4,92:1
   Se usa #A16207: es el ambar mas oscuro que sigue leyendose como dorado y
   deja margen de verdad, no el 3,25:1 justo de darkgoldenrod. Y ademas cada
   tarjeta lleva un .sr-only con "N de 5 estrellas", porque un lector de
   pantalla no deberia tener que deletrear cinco simbolos.

   El borde de la tarjeta es --line (decorativo, 1,28:1) y es legitimo: la
   tarjeta no es un enlace ni un control, solo agrupa. */
:root { --estrella: #A16207; }

.resenas__intro { color: var(--ink-soft); max-width: 70ch; }
/* UNA SOLA FILA, y en movil tambien. Cinco tarjetas no caben a lo ancho de un
   movil, asi que la fila se desplaza en horizontal con ajuste por tarjeta:
   en escritorio entran las cinco de golpe y en movil se pasan con el dedo. */
.resenas {
    list-style: none;
    margin: calc(var(--step) * 4) 0 0 0;
    padding: 0 0 var(--step) 0;
    display: flex;
    gap: var(--step);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Que el foco del teclado no quede pegado al borde al desplazarse. */
    scroll-padding-left: var(--step);
    /* Las tarjetas se estiran a la altura de la mas alta de la fila, que es
       lo que deja los bordes cuadrados. Con el texto recortado a 4 lineas esa
       altura ya no se dispara. */
    align-items: stretch;
}
.resena {
    scroll-snap-align: start;
    /* Ancho fijo: sin esto flex las encoge de forma desigual segun el texto.
       En escritorio 1fr de cinco (~215px) entra en el ancho de pagina; en
       pantallas estrechas se fija a 78vw para que se vea media tarjeta
       siguiente y se entienda que la fila se desliza. */
    flex: 0 0 auto;
    width: clamp(200px, calc((100% - var(--step) * 4) / 5), 240px);
}
@media (max-width: 900px) {
    .resena { width: min(78vw, 280px); }
}
.resena figure {
    height: 100%;
    margin: 0;
    padding: calc(var(--step) * 1.5);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.resena__cab {
    display: flex;
    align-items: center;
    gap: calc(var(--step) / 1.5);
}
.resena__avatar {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--accent); color: #FFFFFF;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 0.85rem; font-weight: 600;
    line-height: 1;
}
.resena__quien { display: flex; flex-direction: column; min-width: 0; }
.resena__autor {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 0.82rem; font-weight: 600; color: var(--ink);
    /* El nombre no parte la tarjeta: si no cabe, se corta con puntos. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resena__fecha { font-size: 0.75rem; color: var(--ink-soft); }
.resena__estrellas {
    margin: calc(var(--step) / 1.5) 0 calc(var(--step) / 2) 0;
    color: var(--estrella);
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    line-height: 1;
}
/* Recortado a 4 lineas. El texto COMPLETO sigue en el HTML: el recorte es
   solo visual, asi que un lector de pantalla y un buscador lo leen entero y
   no se esconde nada. */
.resena blockquote {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Rejilla de zonas con cifra real. Toda la tarjeta es el enlace, asi que su
   borde delimita un control y necesita el 3:1 de WCAG 1.4.11: --line-strong,
   no --line (que es solo decorativo). */
.coverage-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--step) * 3);
}
.coverage-card {
    display: block;
    padding: calc(var(--step) * 3);
    border: 1px solid var(--line-strong);
    text-decoration: none;
    color: var(--ink);
}
.coverage-card:hover { border-color: var(--accent); }
.coverage-card__name { display: block; font-weight: 600; margin-bottom: calc(var(--step) / 2); }
.coverage-card__count { display: block; color: var(--ink-soft); font-size: 0.95rem; }
.coverage-card__count strong { color: var(--accent); }

@media (max-width: 860px) {
    .photo-grid { grid-template-columns: repeat(2, 1fr); }
    .coverage-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .photo-grid { grid-template-columns: 1fr 1fr; }
    .coverage-grid { grid-template-columns: 1fr; }
}

/* --- Boton flotante de WhatsApp --------------------------------------------
   Verde oscuro de marca (#075E54): el claro (#25D366) da 1,98:1 sobre blanco y
   no llega al 3:1 de WCAG 1.4.11 para un control. Este da 7,67:1, y el icono
   blanco encima, otro 7,67:1.
   56 px de lado, por encima de los 44 que pide WCAG 2.5.5 para el dedo.
   Abajo a la derecha: a la izquierda taparia el inicio de las lineas de
   texto al hacer zoom. */
.whatsapp-float {
    position: fixed;
    right: calc(var(--step) * 2);
    bottom: calc(var(--step) * 2);
    z-index: 50;
    width: 56px; height: 56px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: #075E54; color: #FFFFFF;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.whatsapp-float:hover { background: #044A42; }
.whatsapp-float:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
    .whatsapp-float { transition: background 0.15s ease; }
}

/* --- Rejilla de fotos reales: relacion 3:4 fija recortada con object-fit, sin
   depender de las dimensiones reales (variables foto a foto). */
.figure--obra { max-width: 420px; margin-top: calc(var(--step) * 4); }
.figure--obra img { aspect-ratio: 3 / 4; object-fit: cover; }

/* --- Secciones a dos columnas ------------------------------------------
   El titulo de la seccion a un lado y el texto enfrente, como lo tiene
   castellonservice.com y como lo pidio el propietario el 28-9-2026.

   EL PROBLEMA QUE RESUELVE: un parrafo no puede ensancharse mas alla de
   --measure (68ch) porque una linea larga se lee mal, asi que en una pantalla
   de 1.180 px el texto ocupaba 530 y el resto se quedaba en blanco. Poniendo
   el titulo en esa banda vacia se cubre el ancho sin tocar ni una linea de
   lectura: la columna del texto sigue midiendo lo mismo.

   COMO, sin tocar el marcado de las 33 paginas: la columna derecha se fija en
   --measure y la izquierda se lleva el resto (1fr), asi que las dos juntas
   cuadran con el contenido. El h2 se ancla a la primera fila de la primera
   columna y todo lo demas cae en la segunda.

   LAS DOS CONDICIONES DEL :has() NO SON ADORNO:
     > h2:first-child  la seccion tiene que EMPEZAR con titulo. Las que no -la
                       franja de los cuatro pasos, o la caja de aviso del 112
                       de la pagina de coches- se quedan a todo el ancho.
     > p               tiene que haber prosa que poner enfrente. Sin ella
                       (p. ej. "Que hacemos", que es titulo y rejilla de
                       enlaces) el titulo se quedaria solo con medio ancho
                       vacio al lado.

   En un navegador sin :has() (anterior a 2023) no pasa nada: se ve la maqueta
   de una columna de siempre. Y de 1.024 px para abajo se apaga entera, porque
   ahi las dos columnas dejarian el texto en un canal demasiado estrecho. */
@media (min-width: 1024px) {
    .section > .wrap:has(> h2:first-child):has(> p) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure));
        column-gap: calc(var(--step) * 8);
        align-items: start;
    }
    .section > .wrap:has(> h2:first-child):has(> p) > * { grid-column: 2; }
    .section > .wrap:has(> h2:first-child):has(> p) > h2:first-child {
        grid-column: 1;
        grid-row: 1;
        margin-top: 0;
    }

    /* Lo que ya tiene su propia rejilla ocupa las dos columnas: encajarlo en la
       del texto lo dejaria a la mitad del ancho que necesita. */
    .section > .wrap:has(> h2:first-child):has(> p) > .bloques,
    .section > .wrap:has(> h2:first-child):has(> p) > .servicios-grid,
    .section > .wrap:has(> h2:first-child):has(> p) > .zonas-grid,
    .section > .wrap:has(> h2:first-child):has(> p) > .faq,
    .section > .wrap:has(> h2:first-child):has(> p) > .mapa,
    .section > .wrap:has(> h2:first-child):has(> p) > .proceso__lista {
        grid-column: 1 / -1;
    }
}

/* --- Bloques en rejilla --------------------------------------------------
   Un parrafo tiene ancho maximo (--measure) porque una linea larga se lee mal:
   eso no se toca. Pero cuando una seccion tiene DOS O MAS bloques iguales -un
   H3 y su parrafo-, apilarlos deja 650 px en blanco a la derecha en una
   pantalla de 1.180 (medido el 28-9-2026, con la pagina de cerraduras
   delante). En rejilla, cada bloque conserva su medida y entre todos cubren el
   ancho.

   auto-fit con minimo de 300 px: en escritorio salen dos o tres columnas segun
   quepan, en tableta dos y en movil una, sin un solo breakpoint escrito. */
.bloques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: calc(var(--step) * 3);
    margin-top: calc(var(--step) * 4);
}
.bloque {
    padding: calc(var(--step) * 3);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.bloque h3 { margin-top: 0; }
/* Dentro de la tarjeta manda el ancho de la columna, no la medida general: si
   no, el parrafo se quedaria estrecho dentro de un bloque ya estrecho. */
.bloque p { max-width: none; }
.bloque p:last-child { margin-bottom: 0; }

/* Con CUATRO bloques, auto-fit pone tres en una fila y deja el cuarto solo con
   dos huecos al lado, que se ve peor que no haberlos puesto en rejilla. Con
   dos, los deja con un hueco a la derecha. En esos dos casos se fuerzan dos
   columnas: 2x2 y 2x1, que cuadran.
   :has() lo entienden todos los navegadores desde 2023; el que no, se queda
   con auto-fit, que sigue siendo correcto. Y solo de 861 px para arriba: por
   debajo mandan las columnas automaticas, que en movil son una. */
@media (min-width: 861px) {
    .bloques:has(> :nth-child(2):last-child),
    .bloques:has(> :nth-child(4):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- Como trabajamos, cuatro pasos -----------------------------------------
   Sin icono: a diferencia de Servipuertas (que dibuja un SVG de trazo por
   paso), aqui el numero es el unico elemento visual, en un circulo solido:
   mismo patron que .resena__avatar (circulo en --accent, digito en blanco),
   para no inventar un segundo lenguaje visual para lo mismo.
   El numero va aria-hidden: es un <ol>, y el lector de pantalla ya numera.
   Sin eso se oiria "1 1 Llamas". Blanco sobre --accent: 15,45:1. */
.proceso__lista {
    list-style: none;
    margin: calc(var(--step) * 4) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: calc(var(--step) * 3);
}
.proceso__paso {
    padding: calc(var(--step) * 3);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.proceso__num {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent); color: #FFFFFF;
    font-weight: 600;
    margin-bottom: calc(var(--step) * 1.5);
}
.proceso__paso h3 { font-size: 1.1rem; margin: 0 0 calc(var(--step) / 2); }
.proceso__paso p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; max-width: none; }

/* --- Valoracion de Google --------------------------------------------------
   Las estrellas van en --estrella (#A16207, 4,92:1 sobre blanco y 4,51:1
   sobre el gris calido): transmiten la nota, asi que son contenido no
   textual y les toca el 3:1 de WCAG 1.4.11. Y aun asi la nota va SIEMPRE
   escrita al lado en cifra, mas un .sr-only con la frase entera: el color y
   la forma no son el unico canal.
   Las huecas (☆) son el mismo color: lo que distingue una llena de una hueca
   es la forma, no el tono, que es lo que pide WCAG 1.4.1. */
.resenas__nota {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: calc(var(--step) / 1.5) var(--step);
    margin: 0 0 var(--step);
}
.resenas__cifra {
    font-family: "Bitter", Georgia, "Times New Roman", serif;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--ink);
}
.resenas__sobre { color: var(--ink-soft); font-size: 0.95rem; }
.resenas__estrellas { color: var(--estrella); font-size: 1.2rem; letter-spacing: 0.08em; }
.resenas__total { color: var(--ink-soft); font-size: 0.95rem; }

.footer-google { margin: 0 0 var(--step); display: flex; align-items: baseline; gap: var(--step); flex-wrap: wrap; }
.footer-google__cifra {
    font-family: "Bitter", Georgia, "Times New Roman", serif;
    font-size: 1.6rem; line-height: 1; color: var(--ink);
}
.footer-google__estrellas { color: var(--estrella); letter-spacing: 0.06em; }
.footer-google__detalle { flex: 1 1 100%; color: var(--ink-soft); font-size: 0.85rem; }

/* --- Mapa de cobertura -------------------------------------------------
   El contorno de Cataluna no es adorno: unos puntos sueltos sobre un
   rectangulo gris no se leerian como un mapa. Sale de
   data/catalunya-contorno.json (OpenStreetMap) y se proyecta con la misma
   funcion que los puntos, asi que no pueden descuadrarse. Lo pinta
   includes/mapa-cobertura.php (Tarea 4).
   El mapa es decorativo y la informacion la lleva el pie de figura: en movil
   los puntos quedan entre 5 y 16 px y como enlaces no llegarian a los 44 px
   de WCAG 2.5.5. El <title> de cada punto se queda por el globo del raton.
   Ancho maximo de 560 px: el encuadre de Cataluna es casi cuadrado, y a todo
   lo ancho de la pagina serian mas de 1.100 px de alto de una sola figura. */
.mapa { margin: calc(var(--step) * 4) 0 0; max-width: 560px; }
.mapa__svg {
    display: block;
    width: 100%;
    height: auto;
    background: var(--paper);
    border-radius: 8px;
}
.mapa__tierra {
    fill: var(--paper-warm);
    stroke: var(--line-strong);
    stroke-width: 1;
    stroke-linejoin: round;
}
.mapa__punto circle {
    fill: var(--accent);
    fill-opacity: 0.85;
    stroke: var(--paper);
    stroke-width: 1.2;
}
.mapa__punto:hover circle { fill: var(--accent-hover); fill-opacity: 1; }
.mapa__rotulo {
    font: 600 12px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    fill: var(--ink);
    paint-order: stroke;
    stroke: var(--paper-warm);
    stroke-width: 3;
    pointer-events: none;
}
.mapa__pie {
    margin-top: calc(var(--step) * 2);
    color: var(--ink-soft);
    font-size: 0.9rem;
    max-width: var(--measure);
}

.coverage-grid { margin-top: calc(var(--step) * 5); }

/* --- Donde trabajamos: mapa y zonas en el MISMO recuadro --------------------
   Las dos mitades comparten recuadro y se leen a la vez: el mapa dice DONDE,
   las tarjetas dicen CUANTO.
   El borde es --line (decorativo, 1,28:1): delimita una caja, no un control,
   asi que no le aplica el 3:1 de WCAG 1.4.11. El borde de cada tarjeta si es
   un control y se queda en --line-strong. */
.cobertura {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: calc(var(--step) * 5);
    align-items: start;
    margin-top: calc(var(--step) * 4);
    padding: calc(var(--step) * 4);
    border: 1px solid var(--line);
}
.cobertura .mapa { margin: 0; max-width: none; }
.cobertura__zonas h3 { margin-bottom: calc(var(--step) * 3); }
/* Dos columnas SIEMPRE, tambien en movil: apiladas de una en una devuelven
   justo el scroll que este bloque venia a quitar. La regla gana a las de
   .coverage-grid de las media queries por especificidad (0,2,0 frente a
   0,1,0), no por orden. */
.cobertura .coverage-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--step) * 2);
    margin-top: 0;
}
.cobertura .coverage-card { padding: calc(var(--step) * 2) calc(var(--step) * 2.5); }
.cobertura .coverage-card__name { font-size: 1rem; }
.cobertura .coverage-card__count { font-size: 0.85rem; }
.cobertura__mas { margin: calc(var(--step) * 3) 0 0; }

@media (max-width: 900px) {
    .cobertura {
        grid-template-columns: 1fr;
        gap: calc(var(--step) * 4);
        padding: calc(var(--step) * 3);
    }
    .cobertura .mapa { max-width: 480px; }
}

/* El telefono tiene que verse sin scroll en movil: es una web de urgencias,
   no un catalogo. A 375 px el CTA de la cabecera se queda fijo arriba y el
   hero recorta su alto para que el boton grande entre en la primera pantalla.
   Criterio 13 de aceptacion. */
@media (max-width: 767px) {
    .site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); }
    /* Cabecera mas compacta SOLO en movil, para que logo + CTA + boton de
       menu quepan con el margen real de .wrap (24px) a los dos lados. Se
       reduce el hueco entre los tres elementos y el relleno horizontal del
       CTA, y el logo baja un poco de alto; el boton de menu se queda
       siempre en 40x40 (flex-shrink:0, ver la regla base de
       .site-nav__toggle). Cifras resultantes y medidas en el informe de la
       Tarea 3, "Arreglo ronda 2". */
    .site-header__inner { gap: calc(var(--step) * 1.5); }
    .site-header__logo img { height: 28px; }
    .site-header__cta { padding: 12px 14px; }
    .hero { padding: calc(var(--step) * 4) 0 calc(var(--step) * 5); }
    .hero h1 { font-size: clamp(1.9rem, 7vw, 2.4rem); }
    .hero__acciones { display: flex; flex-wrap: wrap; gap: var(--step); }
}

.btn--grande { font-size: 1.15rem; padding: calc(var(--step) * 2) calc(var(--step) * 3); }

/* FAQ nativo: sin JS, y el texto plegado sigue en el HTML servido. */
.faq__item { border-bottom: 1px solid var(--line); padding: calc(var(--step) * 2) 0; }
.faq__item summary { cursor: pointer; font-weight: 600; }
.faq__item summary::marker { color: var(--accent); }
.faq__respuesta { padding-top: var(--step); color: var(--ink-soft); }

/* --- Rejillas de enlaces: servicios (portada) y zonas destacadas ----------
   Mismo patron que .coverage-card (tarjeta = enlace entero, borde en
   --line-strong porque delimita un control y le toca el 3:1 de WCAG 1.4.11)
   pero sin cifra: aqui la tarjeta es solo texto y flecha implicita, no un
   dato. Tres columnas en escritorio, dos en tablet, una en movil estrecho:
   mismos puntos de corte que el resto de rejillas del sitio (860 / 560 px). */
.servicios-grid,
.zonas-grid {
    list-style: none;
    margin: calc(var(--step) * 4) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--step) * 2);
}
.servicios-grid a,
.zonas-grid a {
    display: block;
    padding: calc(var(--step) * 2) calc(var(--step) * 2.5);
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
}
.servicios-grid a:hover,
.zonas-grid a:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 860px) {
    .servicios-grid,
    .zonas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .servicios-grid,
    .zonas-grid { grid-template-columns: 1fr; }
}


/* --- Enlace para saltar la cabecera (WCAG 2.4.1) ------------------------- */
/* Fuera de la vista hasta que recibe el foco: no se esconde con display:none
   ni visibility:hidden, que lo sacarian tambien del orden de tabulacion y lo
   dejarian inalcanzable justo para quien lo necesita. */
.skip-link {
    /* fixed y no absolute: la cabecera es sticky, o sea que con la pagina
       desplazada un enlace absoluto se queda arriba del documento, fuera de la
       vista, y quien lo enfoca no ve nada aparecer. */
    position: fixed;
    left: calc(var(--step) * 2);
    top: calc(var(--step) * -12);
    z-index: 80;
    padding: 12px 20px;
    background: var(--accent);
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
    border-radius: 2px;
    transition: top 0.15s ease;
}
.skip-link:focus { top: calc(var(--step) * 2); }
/* main lleva tabindex="-1" para que el salto le lleve el foco de verdad en
   todos los navegadores; sin esto, el contorno del contenedor entero seria un
   rectangulo gigante alrededor de media pagina. */
main:focus { outline: none; }

/* --- Foco visible en todo lo enfocable (WCAG 2.4.7) --------------------- */
/* Antes solo lo tenian los campos del formulario y el boton de WhatsApp; el
   resto se quedaba con el contorno por omision del navegador, que sobre el
   violeta de la seccion de contacto y sobre el negro del aviso de cookies casi
   no se ve. :focus-visible y no :focus, para que un clic con el raton no deje
   el contorno puesto. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}
/* Sobre fondo violeta o negro, el contorno violeta es invisible: se invierte. */
.contact-section__intro a:focus-visible,
.aviso-cookies a:focus-visible,
.aviso-cookies button:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 2px;
}

/* --- Aviso de cookies ---------------------------------------------------- */
/* Barra abajo, fija. El cuerpo gana abajo el alto de la barra y el boton de
   WhatsApp sube lo mismo (variable --aviso-cookies-alto, que mide el script
   del pie), asi que la barra no tapa el ultimo parrafo ni el boton flotante, y
   los dos vuelven a su sitio al cerrarla.
   Fondo --ink (#14120F) con texto blanco: 18,4:1, y el mismo par para el borde
   del boton de rechazar. z-index 60, por encima del boton de WhatsApp (50) y
   por debajo del enlace de salto (80). */
.aviso-cookies {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--step) * 2) calc(var(--step) * 3);
    padding: calc(var(--step) * 2) calc(var(--step) * 3);
    background: var(--ink);
    color: #FFFFFF;
    font-size: 0.95rem;
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies__texto { margin: 0; max-width: 72ch; }
.aviso-cookies a { color: #FFFFFF; }
.aviso-cookies a:hover { color: var(--paper-warm); }
.aviso-cookies__botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--step);
    flex-shrink: 0;
}
/* 12px de padding vertical sobre una linea de 0,95rem dan 44px de alto: por
   encima del minimo de 24x24 de WCAG 2.5.8 y del tamano comodo para el pulgar
   en movil, que es donde sale esta barra. */
.aviso-cookies__btn {
    padding: 12px 20px;
    font: inherit;
    font-weight: 600;
    background: transparent;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 2px;
    cursor: pointer;
}
.aviso-cookies__btn--si { background: #FFFFFF; color: var(--ink); }
.aviso-cookies__btn:hover { background: var(--paper-warm); color: var(--ink); }
html.con-aviso-cookies body { padding-bottom: var(--aviso-cookies-alto, 0px); }
html.con-aviso-cookies .whatsapp-float { bottom: calc(var(--aviso-cookies-alto, 0px) + var(--step) * 2); }