/* ============================================================================
   CENTRO VETERINARIO CHIVA — hoja de estilos del sitio

   Enfoque acordado con el cliente: funcional y bonita antes que original.
   Se ejecuta la convención de una buena web de clínica, con oficio, sin
   guiños raros. El contenido manda; el diseño lo sirve.

   Color: nace del logo real de la clínica (#03006b, azul marino con la
   silueta blanca del perro y el gato). El morado, el cian y el rosa que
   llevaba la web anterior venían de una plantilla comprada ("TailWag"),
   no de esta marca.

   Restricciones fijadas por el cliente:
   - Sin degradados de color ni difuminados.
   - Sin fotografía de banco: toda la imagen es de la clínica.
   - Sin lenguaje ñoño ni emojis haciendo de icono.
   - Nada se mueve solo: ni carruseles, ni animación al hacer scroll.
   ========================================================================= */

/* --- 1. Tipografía autoalojada -------------------------------------------
   Servida desde el propio dominio: sin @import encadenado a Google Fonts y
   sin peticiones a terceros. Gabarito para titulares (cálida, segura),
   Archivo para texto (legible a tamaño pequeño y con buenos números). */

@font-face {
    font-family: "Gabarito";
    src: url("/assets/fonts/gabarito-latin.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Gabarito";
    src: url("/assets/fonts/gabarito-latin-ext.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Archivo";
    src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Archivo";
    src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2. Tokens ------------------------------------------------------------
   Una sola fuente de verdad. La web anterior repartía 123 valores
   hexadecimales sueltos por el código. */

:root {
    /* Marca, tomada del logo */
    --marca: #03006b;
    --marca-2: #2b2a9c;         /* azul de trabajo: enlaces y superficies */
    --marca-suave: #eceefb;     /* fondo teñido de marca */

    /* Apoyo */
    /* El rojo del botón es el único color de acento del sitio: se usa igual
       en el teléfono, en "Pedir Cita" y en cualquier realce. El naranja que
       había antes se retiró por petición del cliente. */
    --urgencia: #c1272d;        /* rojo: teléfono y pedir cita */
    --amarillo: #ffcc00;        /* cartel de urgencias e iconos sobre azul */
    --exito: #17694a;

    /* Texto secundario sobre el azul de marca. Un solo tono: antes había
       cuatro lavandas casi idénticas haciendo este mismo trabajo. */
    --azul-claro: #cbcff5;

    /* Aviso (recuadro de advertencia en Términos) */
    --aviso-fondo: #fdf2f2;
    --aviso-linea: #f0c9c9;

    /* Superficies y tinta */
    --blanco: #ffffff;
    --fondo: #f5f7fc;           /* sección alterna, azulada, nunca crema */
    --tinta: #1c1e2b;
    --tinta-2: #4a5068;         /* secundario, teñido de azul, nunca gris */
    --linea: #d8dded;

    /* Tipografía */
    --titulo: "Gabarito", ui-sans-serif, system-ui, sans-serif;
    --texto: "Archivo", ui-sans-serif, system-ui, sans-serif;

    --t-h1: clamp(2.1rem, 1.3rem + 2.9vw, 3.6rem);
    --t-h2: clamp(1.65rem, 1.25rem + 1.5vw, 2.4rem);
    --t-h3: clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
    --t-base: clamp(1rem, .97rem + .16vw, 1.08rem);
    --t-menor: .93rem;          /* pie de tarjeta, metadatos, notas */

    /* Ritmo */
    --e1: .5rem;
    --e2: 1rem;
    --e3: 1.5rem;
    --e4: 2.5rem;
    --e5: 4rem;
    --e6: 5.5rem;

    --ancho: 75rem;
    --toque: 2.75rem;           /* 44px: objetivo táctil mínimo */
    --radio: 14px;
    --sombra: 0 2px 4px rgba(3, 0, 107, .05), 0 12px 28px rgba(3, 0, 107, .08);
    --sombra-alta: 0 4px 8px rgba(3, 0, 107, .07), 0 20px 44px rgba(3, 0, 107, .13);
}

/* --- 3. Base --------------------------------------------------------------
   El reset anterior incluía `outline: 0` en el selector universal, lo que
   borraba el indicador de foco en todo el sitio. Aquí se refuerza. */

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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    background: var(--blanco);
    color: var(--tinta);
    font-family: var(--texto);
    font-size: var(--t-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

img {
    height: auto;   /* la regla que faltaba: el logo salía estirado 3,1× */
}

h1, h2, h3, h4, h5 {
    font-family: var(--titulo);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--marca);
    text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--marca-2); text-underline-offset: .16em; }

ul, ol { list-style: none; padding: 0; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
    outline: 3px solid var(--urgencia);
    outline-offset: 3px;
    border-radius: 4px;
}

.sobre-marca :focus-visible {
    outline-color: var(--amarillo);
}

::selection { background: var(--marca); color: #fff; }

/* --- 4. Estructura -------------------------------------------------------- */

.contenedor {
    width: min(100% - 2.5rem, var(--ancho));
    margin-inline: auto;
}

@media (max-width: 40rem) {
    .contenedor { width: min(100% - 1.75rem, var(--ancho)); }
}

/* Ritmo del scroll: la sección respira, pero sin que dos seguidas sumen
   176px de vacío. El cambio de fondo ya marca el corte. */
.seccion {
    padding-block: clamp(2.75rem, 4.6vw, 4rem);
}

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

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

.seccion--marca h2,
.seccion--marca h3,
.seccion--marca h4 { color: #fff; }

/* Encabezado de sección: título centrado con su entradilla */
.seccion__cabeza {
    max-width: 60ch;
    margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
    text-align: center;
}

.seccion__cabeza h2 {
    font-size: var(--t-h2);
    margin-bottom: var(--e2);
}

.seccion__cabeza p {
    color: var(--tinta-2);
    font-size: 1.06rem;
}

/* Con el reset a `margin: 0`, dos párrafos de entradilla se leían como uno
   solo partido. */
.seccion__cabeza p + p { margin-top: var(--e2); }

.seccion--marca .seccion__cabeza p { color: var(--azul-claro); }

.centrado { text-align: center; }

.tras-seccion { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* Enlace de salto: primera parada del teclado */
.saltar {
    position: absolute;
    left: var(--e2);
    top: var(--e2);
    z-index: 999;
    transform: translateY(-250%);
    background: var(--marca);
    color: #fff;
    padding: .8rem 1.3rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
}

.saltar:focus { transform: translateY(0); }

/* --- 5. Botones ----------------------------------------------------------- */

.btn,
.btn-primary,
.btn-fantasma {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: var(--toque);
    padding: .8rem 1.6rem;
    border-radius: 999px;
    font-family: var(--titulo);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.btn {
    background: var(--urgencia);
    color: #fff;
}

.btn:hover { background: #9d1f24; }

.btn-primary {
    background: var(--marca);
    color: #fff;
}

.btn-primary:hover { background: var(--marca-2); }

.btn-fantasma {
    background: transparent;
    color: var(--marca);
    border-color: var(--linea);
}

.btn-fantasma:hover {
    border-color: var(--marca);
    background: var(--marca-suave);
}

.sobre-marca .btn-fantasma {
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
}

.sobre-marca .btn-fantasma:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
}

.btn svg, .btn-primary svg, .btn-fantasma svg { width: 1.1em; height: 1.1em; }

/* --- 6. Cabecera ---------------------------------------------------------
   Sticky y de altura contenida. La anterior era fija y medía 241px porque al
   logo le faltaba `height: auto`: tapaba entero el H1 de varias páginas. */

.cabecera {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--linea);
}

.cabecera__fila {
    display: flex;
    align-items: center;
    gap: var(--e3);
    min-height: 4.5rem;
}

.cabecera__marca {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-right: auto;
    padding: .35rem 0;
    text-decoration: none;
    color: var(--marca);
}

.cabecera__marca img {
    width: 2.75rem;
    height: auto;
    border-radius: 8px;
    flex-shrink: 0;
}

.cabecera__marca b {
    font-family: var(--titulo);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.015em;
    max-width: 19ch;   /* "Centro Veterinario" cabe entero: rompe en dos, no en tres */
}

/* En tablet el menú necesita el espacio: el nombre se reduce, no desaparece. */
@media (max-width: 74rem) and (min-width: 62.01rem) {
    .cabecera__marca b { font-size: var(--t-menor); max-width: 11ch; }
}

.menu { display: flex; align-items: center; gap: .15rem; }

.menu a {
    display: flex;
    align-items: center;
    min-height: var(--toque);
    padding: .5rem .7rem;
    border-radius: 8px;
    color: var(--tinta);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;   /* "El Veterinario" partía en dos líneas */
}

.menu a:hover { background: var(--marca-suave); color: var(--marca); }

.menu a[aria-current="page"] { color: var(--marca); font-weight: 700; }

.cabecera__tel {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--toque);
    padding: .6rem 1.15rem;
    border-radius: 999px;
    background: var(--urgencia);
    color: #fff;
    font-family: var(--titulo);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.cabecera__tel:hover { background: #9d1f24; }

.cabecera__tel svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

.cabecera__abrir {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--toque);
    height: var(--toque);
    border: 1px solid var(--linea);
    border-radius: 10px;
    color: var(--marca);
}

.cabecera__abrir svg { width: 1.4rem; height: 1.4rem; }

@media (max-width: 62rem) {
    .cabecera__abrir { display: flex; }
    .cabecera__tel span { display: none; }
    .cabecera__tel { padding-inline: .85rem; }

    .menu {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--e1);
        background: #fff;
        border-bottom: 1px solid var(--linea);
        box-shadow: var(--sombra);
    }

    .menu[data-abierto="si"] { display: flex; }

    .menu a { min-height: 3.25rem; padding-inline: var(--e2); border-radius: 10px; }
}

/* --- 7. Portada: bloque principal ---------------------------------------- */

.principal {
    background: var(--marca);
    color: #fff;
    padding-block: clamp(var(--e5), 6vw, var(--e6));
}

.principal__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--e3), 4vw, var(--e5));
    align-items: center;
}

.principal h1 {
    color: #fff;
    font-size: var(--t-h1);
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: var(--e3);
}

.principal__entrada {
    color: var(--azul-claro);
    font-size: 1.1rem;
    max-width: 54ch;
    margin-bottom: var(--e3);
}

/* Aviso de urgencias: la información que más se busca de madrugada */
/* Amarillo sobre el azul: el cliente pidió expresamente conservarlo así.
   Es un indicador de disponibilidad, no un adorno: dice 365 días, que el
   titular no dice. */
.aviso {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1.2rem;
    margin-bottom: var(--e3);
    border-radius: 999px;
    background: var(--amarillo);
    color: #3d2f00;
    font-weight: 700;
    font-size: .95rem;
}

.aviso svg { width: 1.05rem; height: 1.05rem; color: #7a5c00; }

.principal__datos {
    display: grid;
    gap: .55rem;
    margin-bottom: var(--e4);
    font-size: 1rem;
}

.principal__datos div { display: flex; align-items: center; gap: .6rem; }

.principal__datos svg { width: 1.15rem; height: 1.15rem; color: var(--amarillo); flex-shrink: 0; }

.principal__datos a { color: #fff; font-weight: 700; }

.principal__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

/* La foto de portada es vertical (1200 × 1271) y el recorte centrado dejaba
   fuera la cabeza del veterinario mientras la bandeja de instrumental se
   quedaba con el tercio inferior. Se sube el encuadre: manda la persona y el
   instrumental queda como franja de primer plano. */
.principal__foto img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 12%;
    border-radius: 20px;
    box-shadow: var(--sombra-alta);
}

@media (max-width: 62rem) {
    .principal__rejilla { grid-template-columns: 1fr; }
    .principal__foto { order: -1; }
    /* En tablet el 16/10 recortaba el 41% del alto de la foto: se perdía la
       cabeza y sólo quedaban torso y bandeja. Un formato algo más alto, con
       el encuadre más arriba, devuelve al veterinario al centro. */
    .principal__foto img { aspect-ratio: 3 / 2; object-position: 50% 8%; }
}

@media (max-width: 40rem) {
    /* En móvil la foto es estrecha, así que cabe un 4/3 sin empujar el
       titular demasiado abajo: se ve al veterinario entero. */
    .principal__foto img { aspect-ratio: 4 / 3; object-position: 50% 10%; }
}

/* --- 8. Tarjetas ---------------------------------------------------------
   El contenido original es una lista de apartados equivalentes; la tarjeta es
   el contenedor honesto para eso. Nunca anidadas. */

.rejilla {
    display: grid;
    gap: 1.75rem;
}

.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 64rem) {
    .rejilla--4, .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 44rem) {
    .rejilla--4, .rejilla--3, .rejilla--2 { grid-template-columns: minmax(0, 1fr); }
}

.tarjeta {
    display: grid;
    align-content: start;
    gap: .7rem;
    padding: var(--e3);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.tarjeta:hover {
    border-color: #b9c1e4;
    box-shadow: var(--sombra);
}

.tarjeta h3, .tarjeta h4 {
    font-size: var(--t-h3);
    line-height: 1.25;
}

.tarjeta p {
    color: var(--tinta-2);
    font-size: .97rem;
    line-height: 1.6;
    margin: 0;
}

.tarjeta__icono {
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 12px;
    background: var(--marca-suave);
    color: var(--marca);
}

.tarjeta__icono svg { width: 1.5rem; height: 1.5rem; }

/* Sobre fondo de marca */
.seccion--marca .tarjeta {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
}

.seccion--marca .tarjeta:hover {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .4);
    box-shadow: none;
}

.seccion--marca .tarjeta p { color: var(--azul-claro); }

.seccion--marca .tarjeta__icono {
    background: rgba(255, 255, 255, .16);
    color: var(--amarillo);
}

/* --- 9. El veterinario ---------------------------------------------------- */

.veterinario {
    display: grid;
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    gap: clamp(var(--e3), 3vw, 2.75rem);
    align-items: center;
    padding: clamp(var(--e3), 3vw, var(--e4));
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 20px;
    box-shadow: var(--sombra);
}

.veterinario img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radio);
}

.veterinario h3 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }

.veterinario__cargo {
    color: var(--urgencia);
    font-family: var(--titulo);
    font-weight: 700;
    margin-bottom: var(--e2);
}

.veterinario p { color: var(--tinta-2); margin-bottom: var(--e2); max-width: 68ch; }

@media (max-width: 60rem) {
    .veterinario { grid-template-columns: 1fr; text-align: center; }
    .veterinario img { max-width: 20rem; margin-inline: auto; }
    .veterinario p { margin-inline: auto; }
}

/* --- 10. Reseñas ---------------------------------------------------------
   Rejilla estática. El carrusel automático anterior queda eliminado: el
   cliente pidió que nada se mueva solo, y ocultaba seis de las ocho.

   Las reseñas son de largo muy desigual (de tres líneas a quince), así que
   las tarjetas quedaban descompensadas. El texto se recorta a seis líneas y
   se despliega con "Ver más". El recorte lo activa el JS añadiendo
   .resena--recorte: sin JS se ve el texto entero, como antes. */

/* Las tarjetas no se estiran a la altura de la fila: al desplegar una, las
   vecinas se quedan como estaban en vez de crecer con un hueco vacío debajo.
   Recortadas todas a las mismas seis líneas, la fila queda igualada sola. */
.rejilla--resenas { align-items: start; }

.resena {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
    padding: var(--e3);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.resena__texto {
    color: var(--tinta);
    font-size: .98rem;
    line-height: 1.7;
    margin: 0;
}

.resena--recorte .resena__texto {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}

.resena--abierta .resena__texto {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

/* Botón de texto, no botón de acción: no debe competir con "Solicitar Cita". */
.resena__mas {
    align-self: start;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: calc(var(--e2) * -.5);
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--titulo);
    font-weight: 700;
    font-size: var(--t-menor);
    line-height: 1.2;
    color: var(--marca-2);
    cursor: pointer;
}

.resena__mas:hover { text-decoration: underline; }

.resena__mas::after {
    content: "";
    width: .4rem;
    height: .4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.12em) rotate(45deg);
    transition: transform 140ms ease;
}

.resena--abierta .resena__mas::after { transform: translateY(.1em) rotate(-135deg); }

.resena footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: auto;
    padding-top: var(--e2);
    border-top: 1px solid var(--linea);
}

.resena img,
.resena__inicial {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Suplente de la foto mientras no exista el archivo: inicial sobre marca. */
.resena__inicial {
    display: grid;
    place-items: center;
    background: var(--marca-suave);
    color: var(--marca);
    font-family: var(--titulo);
    font-weight: 700;
    font-size: 1.15rem;
}

.resena cite {
    font-style: normal;
    font-family: var(--titulo);
    font-weight: 700;
    color: var(--marca);
    line-height: 1.25;
}

/* --- 11. Blog ------------------------------------------------------------- */

.entrada {
    display: grid;
    align-content: start;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    transition: box-shadow 140ms ease, border-color 140ms ease;
}

.entrada:hover { border-color: #b9c1e4; box-shadow: var(--sombra); }

.entrada__imagen {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--marca-suave);
}

.entrada__cuerpo { display: grid; align-content: start; gap: .6rem; padding: var(--e3); }

.entrada h3 { font-size: 1.2rem; }

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

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

.entrada p { color: var(--tinta-2); font-size: .95rem; margin: 0; }

.entrada__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
    color: var(--tinta-2);
    font-size: .85rem;
}

.entrada__meta span { display: flex; align-items: center; gap: .35rem; }

.entrada__meta svg { width: .95rem; height: .95rem; color: var(--marca-2); }

.etiqueta-tema {
    justify-self: start;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: var(--marca-suave);
    color: var(--marca);
    font-size: .78rem;
    font-weight: 700;
}

.entrada__enlace {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: var(--toque);
    font-weight: 700;
    text-decoration: none;
}

.entrada__enlace:hover { text-decoration: underline; }

.entrada__enlace svg { width: 1.05rem; height: 1.05rem; }

.vacio {
    padding: var(--e4);
    border: 2px dashed var(--linea);
    border-radius: var(--radio);
    text-align: center;
    color: var(--tinta-2);
}

/* --- 12. Pie -------------------------------------------------------------- */

.pie {
    background: var(--marca);
    color: var(--azul-claro);
    padding-block: var(--e5) var(--e3);
}

.pie__rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--e4);
    padding-bottom: var(--e4);
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.pie h2 {
    color: #fff;
    font-size: .95rem;
    letter-spacing: .02em;
    margin-bottom: var(--e2);
}

.pie a { color: var(--azul-claro); text-decoration: none; }

.pie a:hover { color: #fff; text-decoration: underline; }

.pie ul { display: grid; gap: .1rem; }

.pie ul a,
.pie__contacto a,
.pie__contacto div {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: var(--toque);
    padding: .3rem 0;
}

.pie__contacto { display: grid; gap: .1rem; font-size: .95rem; }

.pie__contacto svg { width: 1.05rem; height: 1.05rem; color: var(--amarillo); flex-shrink: 0; }

.pie__marca img { width: 4rem; height: auto; border-radius: 10px; margin-bottom: var(--e2); }

.pie__marca p { font-size: var(--t-menor); line-height: 1.6; margin-bottom: var(--e2); }

/* `.pie a` gana en especificidad a `.btn` y le robaba el blanco al texto:
   quedaba lavanda sobre rojo, 3,75:1. */
.pie .btn,
.pie .btn:hover { color: #fff; text-decoration: none; }

.pie__cita { margin-top: var(--e2); }

.pie__siguenos { margin-top: var(--e3); }

.pie__redes { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: var(--e3); }

.pie__redes a {
    display: grid;
    place-items: center;
    width: var(--toque);
    height: var(--toque);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 10px;
}

.pie__redes a:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

.pie__redes svg { width: 1.15rem; height: 1.15rem; }

.pie__firma {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--e2);
    padding-top: var(--e3);
    font-size: .85rem;
}

.pie__firma a { color: #fff; text-decoration: underline; }

/* --- 13. Migas de pan ------------------------------------------------------ */

.breadcrumbs { background: var(--fondo); border-bottom: 1px solid var(--linea); }

.breadcrumbs__inner {
    width: min(100% - 2.5rem, var(--ancho));
    margin-inline: auto;
    padding-block: .75rem;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: var(--tinta-2);
}

.breadcrumbs li { display: flex; align-items: center; gap: .5rem; }

.breadcrumbs li + li::before { content: "›"; color: #9aa3c4; }

.breadcrumbs a { color: var(--marca-2); font-weight: 600; }

/* Ya no hace falta compensar una cabecera fija de altura descontrolada. */
.breadcrumbs--offset { padding-top: 0; }

/* --- 14. Puente con las páginas aún no migradas --------------------------
   El resto del sitio usa `.container` y sus propios bloques <style>. Se
   redefine lo compartido para que hereden la marca en lugar de romperse. */

.container {
    width: min(100% - 2.5rem, var(--ancho));
    margin-inline: auto;
}

/* Solo se anuncia cuando el número visible está oculto (móvil). En
   escritorio conviven y el nombre accesible salía duplicado. */
.cabecera__tel .solo-lectores { display: none; }

@media (max-width: 62rem) {
    .cabecera__tel .solo-lectores { display: inline; }
}

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

/* --- 15. Iconos ----------------------------------------------------------
   Sprite SVG propio, un solo grosor de trazo. Sustituye a Boxicons servido
   desde unpkg y a los emoji que hacían de icono. */

.i {
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.sprite { position: absolute; }

/* --- 16. Movimiento -------------------------------------------------------
   No hay animación de entrada ni carruseles. Solo transiciones de estado al
   pasar el ratón o enfocar, y se anulan si el sistema lo pide. */

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

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* --- 17. Impresión --------------------------------------------------------- */

@media print {
    body { background: #fff; color: #000; }
    .cabecera, .pie__redes, .saltar, .principal__acciones { display: none; }
    .principal, .seccion--marca, .pie { background: #fff !important; color: #000 !important; }
    .principal h1, .seccion--marca h2, .seccion--marca h3, .pie h2 { color: #000 !important; }
    .principal__entrada, .seccion--marca .tarjeta p, .pie__firma { color: #333 !important; }
    .tarjeta, .resena, .entrada, .veterinario { break-inside: avoid; box-shadow: none; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ============================================================================
   PÁGINAS INTERNAS
   Mismo sistema que la portada. El contenido de cada página es el que ya
   existía: aquí solo cambia su presentación.
   ========================================================================= */

/* --- Cabecera de página --------------------------------------------------- */

.portada-pagina {
    background: var(--marca);
    color: #fff;
    padding-block: clamp(3rem, 6vw, 4.5rem);
    text-align: center;
}

.portada-pagina h1 {
    color: #fff;
    font-size: var(--t-h1);
    font-weight: 800;
    letter-spacing: -.03em;
    max-width: 22ch;
    margin: 0 auto var(--e2);
}

.portada-pagina p {
    max-width: 62ch;
    margin-inline: auto;
    color: var(--azul-claro);
    font-size: 1.08rem;
}

/* El `margin: 0 auto` anterior anulaba también el margen vertical: dos
   párrafos seguidos se pegaban y el botón de .tras-seccion se quedaba sin
   su separación. Se declara sólo el centrado y se devuelve el ritmo. */
.portada-pagina p + p { margin-top: var(--e2); }

.portada-pagina .tras-seccion { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.portada-pagina .aviso { margin-bottom: var(--e3); }

/* --- Tarjeta de servicio con lista de prestaciones ------------------------ */

.servicio {
    display: grid;
    align-content: start;
    gap: .8rem;
    padding: var(--e3);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    scroll-margin-top: 6rem;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.servicio:hover { border-color: #b9c1e4; box-shadow: var(--sombra); }

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

.servicio > p { color: var(--tinta-2); font-size: .97rem; margin: 0; }

.lista-check {
    display: grid;
    gap: .35rem;
    margin-top: .3rem;
}

.lista-check li {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: .6rem;
    align-items: start;
    font-size: .94rem;
    color: var(--tinta);
}

.lista-check svg {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: .28rem;
    color: var(--exito);
}

/* --- Banda de cierre con llamada a la acción ------------------------------ */

.cierre {
    background: var(--fondo);
    padding-block: clamp(var(--e5), 6vw, var(--e6));
    text-align: center;
}

.cierre h2 { font-size: var(--t-h2); margin-bottom: var(--e2); }

.cierre p {
    max-width: 58ch;
    margin: 0 auto var(--e3);
    color: var(--tinta-2);
    font-size: 1.06rem;
}

.cierre__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

/* --- Bloques de texto largo (legales, CV, artículo) ----------------------- */

.prosa {
    max-width: 70ch;
    margin-inline: auto;
}

.prosa h2 {
    font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem);
    margin: var(--e4) 0 var(--e2);
}

.prosa h3 {
    font-size: var(--t-h3);
    margin: var(--e3) 0 .5rem;
}

.prosa p,
.prosa li { color: var(--tinta-2); }

.prosa p { margin-bottom: var(--e2); }

.prosa ul,
.prosa ol { display: grid; gap: .4rem; margin: 0 0 var(--e2) 1.25rem; }

.prosa ul li { list-style: disc; }
.prosa ol li { list-style: decimal; }

.prosa a { font-weight: 600; }

.prosa strong { color: var(--tinta); }

.prosa table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--e3);
    font-size: .95rem;
}

.prosa th,
.prosa td {
    padding: .7rem .9rem;
    border: 1px solid var(--linea);
    text-align: left;
    vertical-align: top;
}

.prosa th { background: var(--fondo); color: var(--marca); font-weight: 700; }

/* --- Ficha con panel lateral (CV, contacto) ------------------------------- */

.con-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: clamp(var(--e3), 4vw, var(--e5));
    align-items: start;
}

.panel {
    display: grid;
    gap: var(--e2);
    padding: var(--e3);
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    position: sticky;
    top: 6rem;
}

.panel h2 { font-size: 1.15rem; }

.panel__dato { display: grid; gap: .15rem; }

.panel__dato span {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta-2);
}

.panel__dato a,
.panel__dato b { font-size: 1.02rem; font-weight: 700; }

@media (max-width: 62rem) {
    .con-panel { grid-template-columns: 1fr; }
    .panel { position: static; }
}

/* --- Galería -------------------------------------------------------------- */

.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-bottom: var(--e4);
}

.filtros a {
    display: inline-flex;
    align-items: center;
    min-height: var(--toque);
    padding: .5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--linea);
    background: var(--blanco);
    color: var(--tinta);
    font-weight: 600;
    font-size: var(--t-menor);
    text-decoration: none;
}

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

.filtros a[aria-current="true"] {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}

.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--e3);
}

.galeria figure {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
}

.galeria img,
.galeria video {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--marca-suave);
}

.galeria figcaption { padding: .85rem 1rem; }

.galeria figcaption b {
    display: block;
    font-family: var(--titulo);
    font-size: 1rem;
    color: var(--marca);
    line-height: 1.3;
}

.galeria figcaption p { color: var(--tinta-2); font-size: var(--t-menor); margin-top: .2rem; }

/* --- Paginación ----------------------------------------------------------- */

.paginacion {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
    margin-top: var(--e4);
}

.paginacion a,
.paginacion span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--toque);
    min-height: var(--toque);
    padding: .4rem .8rem;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: var(--blanco);
    text-decoration: none;
    font-weight: 600;
}

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

.paginacion [aria-current="page"] {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}

/* --- Página 404 ----------------------------------------------------------- */

.error {
    display: grid;
    place-items: center;
    gap: var(--e2);
    padding-block: clamp(var(--e5), 10vw, 8rem);
    text-align: center;
}

.error__codigo {
    font-family: var(--titulo);
    font-size: clamp(4rem, 3rem + 8vw, 8rem);
    font-weight: 800;
    line-height: 1;
    color: var(--marca-suave);
    letter-spacing: -.04em;
}

.error p { max-width: 46ch; color: var(--tinta-2); }

.error__enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    justify-content: center;
    margin-top: var(--e2);
}

/* --- Páginas legales -----------------------------------------------------
   Privacidad, cookies y términos comparten estructura. Se conservan sus
   nombres de clase y su marcado —que es contenido— y solo se redefine su
   presentación en el sistema nuevo. */

.legal-header {
    background: var(--marca);
    color: #fff;
    padding-block: clamp(3rem, 6vw, 4.5rem);
    text-align: center;
}

.legal-header h1 {
    color: #fff;
    font-size: var(--t-h1);
    font-weight: 800;
    letter-spacing: -.03em;
    max-width: 24ch;
    margin-inline: auto;
}

.legal-header p {
    max-width: 60ch;
    margin: var(--e2) auto 0;
    color: var(--azul-claro);
}

.content-wrapper {
    width: min(100% - 2.5rem, 52rem);
    margin-inline: auto;
    padding-block: clamp(var(--e4), 6vw, var(--e5));
}

.legal-content h2 {
    font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem);
    margin: var(--e4) 0 var(--e2);
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--linea);
}

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

.legal-content h3 {
    font-size: var(--t-h3);
    margin: var(--e3) 0 .5rem;
}

.legal-content p,
.legal-content li { color: var(--tinta-2); }

.legal-content p { margin-bottom: var(--e2); }

.legal-content ul,
.legal-content ol {
    display: grid;
    gap: .4rem;
    margin: 0 0 var(--e2) 1.3rem;
}

.legal-content ul li { list-style: disc; }
.legal-content ol li { list-style: decimal; }

.legal-content a { font-weight: 600; }

.legal-content strong { color: var(--tinta); }

/* Recuadros destacados */
.highlight-box,
.warning-box,
.contact-info {
    padding: var(--e3);
    margin: var(--e3) 0;
    border-radius: var(--radio);
    border: 1px solid var(--linea);
}

.highlight-box { background: var(--marca-suave); border-color: var(--azul-claro); }

.warning-box { background: var(--aviso-fondo); border-color: var(--aviso-linea); }

.contact-info { background: var(--fondo); }

.highlight-box > :last-child,
.warning-box > :last-child,
.contact-info > :last-child { margin-bottom: 0; }

.highlight-box h2,
.warning-box h2,
.contact-info h2,
.highlight-box h3,
.warning-box h3,
.contact-info h3 {
    margin-top: 0;
    border-bottom: 0;
    padding-bottom: 0;
}

/* Numeración de apartado en Términos */
.section-number {
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    margin-right: .6rem;
    border-radius: 50%;
    background: var(--marca);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    vertical-align: middle;
}

/* Tabla de cookies */
.cookie-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--e3);
    font-size: var(--t-menor);
}

.cookie-table th,
.cookie-table td {
    padding: .7rem .85rem;
    border: 1px solid var(--linea);
    text-align: left;
    vertical-align: top;
}

.cookie-table th { background: var(--fondo); color: var(--marca); font-weight: 700; }

.cookie-table td { color: var(--tinta-2); }

.cookie-type {
    padding: var(--e3);
    margin-bottom: var(--e3);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.cookie-type > :last-child { margin-bottom: 0; }

.cookie-type h3 { margin-top: 0; }

@media (max-width: 48rem) {
    .cookie-table,
    .cookie-table thead,
    .cookie-table tbody,
    .cookie-table tr,
    .cookie-table th,
    .cookie-table td { display: block; }

    .cookie-table thead { display: none; }

    .cookie-table tr {
        margin-bottom: var(--e2);
        border: 1px solid var(--linea);
        border-radius: 10px;
        overflow: hidden;
    }

    .cookie-table td { border: 0; border-bottom: 1px solid var(--linea); }
    .cookie-table tr td:last-child { border-bottom: 0; }
}

/* ============================================================================
   PÁGINAS INTERNAS — clases heredadas
   Blog, galería, cursos, CV, contacto y artículo conservan su marcado tal
   cual: es contenido, no presentación. Aquí solo se vuelven a definir sus
   clases con el sistema nuevo. Sus bloques <style> propios se han eliminado.
   ========================================================================= */

/* --- Cabeceras de página (todas comparten tratamiento) -------------------- */

.blog-header,
.gallery-header,
.curso-hero,
.cv-header,
.contact-header,
.post-header-section {
    background: var(--marca);
    color: #fff;
    padding-block: clamp(3rem, 6vw, 4.5rem);
    text-align: center;
}

.blog-header h1,
.gallery-header h1,
.curso-hero h1,
.cv-header h1,
.contact-header h1,
.post-header-section h1 {
    color: #fff;
    font-size: var(--t-h1);
    font-weight: 800;
    letter-spacing: -.03em;
    max-width: 24ch;
    margin: 0 auto var(--e2);
}

/* El titular del artículo no está en la banda azul: vive sobre el fondo
   blanco del texto. Iba en blanco sobre blanco, así que no se veía y dejaba
   un hueco de dos líneas antes de la firma. */
.post-title {
    color: var(--marca);
    font-size: var(--t-h1);
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: var(--e2);
}

.blog-header p,
.gallery-header p,
.curso-hero p,
.cv-header p,
.contact-header p,
.post-header-section p {
    max-width: 62ch;
    margin-inline: auto;
    color: var(--azul-claro);
    font-size: 1.06rem;
}

/* Dos párrafos seguidos en una cabecera se quedaban pegados: el `margin: 0`
   del reset no lo cubre nadie más. */
.blog-header p + p,
.gallery-header p + p,
.curso-hero p + p,
.cv-header p + p,
.contact-header p + p,
.post-header-section p + p { margin-top: var(--e2); }

/* El enlace de vuelta al blog iba en azul de enlace sobre el azul de marca. */
.post-header-section a { color: #fff; font-weight: 700; }

/* Esta banda sólo lleva el enlace de vuelta: con el relleno de una cabecera
   completa quedaban 130px de azul vacío antes de las migas. */
.post-header-section { padding-block: var(--e3); }

.cv-header h2,
.curso-hero h2 {
    color: var(--amarillo);
    font-size: var(--t-h3);
    margin-bottom: var(--e2);
}

.photo-container { margin: var(--e3) auto 0; max-width: 13rem; }

.photo-container img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, .3);
}

/* --- Contenedores --------------------------------------------------------- */

.blog-container,
.gallery-container,
.curso-content,
.cv-container,
.contact-container,
.post-main-container,
.post-container {
    width: min(100% - 2.5rem, var(--ancho));
    margin-inline: auto;
    padding-block: clamp(var(--e4), 6vw, var(--e5));
}

.post-container,
.post-content-wrapper { width: min(100%, 48rem); }

/* --- Filtros de etiqueta y categoría -------------------------------------- */

.tags-filter,
.category-filter { margin-bottom: var(--e4); text-align: center; }

.tags-filter h2,
.category-filter h2 { font-size: var(--t-h3); margin-bottom: var(--e2); }

.tags-list,
.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}

.tag-item,
.category-item {
    display: inline-flex;
    align-items: center;
    min-height: var(--toque);
    padding: .5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--linea);
    background: var(--blanco);
    color: var(--tinta);
    font-weight: 600;
    font-size: var(--t-menor);
    text-decoration: none;
}

.tag-item:hover,
.category-item:hover { border-color: var(--marca); color: var(--marca); }

.tag-item.active,
.category-item.active {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}

/* --- Rejillas de tarjeta -------------------------------------------------- */

.blog-grid,
.gallery-grid,
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--e3);
}

.blog-card,
.gallery-item,
.related-card {
    display: grid;
    align-content: start;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.blog-card:hover,
.gallery-item:hover,
.related-card:hover { border-color: #b9c1e4; box-shadow: var(--sombra); }

.blog-card-image,
.gallery-media,
.gallery-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--marca-suave);
    background-size: cover;
    background-position: center;
}

.gallery-media,
.gallery-video { aspect-ratio: 4 / 3; }

.blog-card-content,
.gallery-info,
.related-card__body {
    display: grid;
    align-content: start;
    gap: .55rem;
    padding: var(--e3);
}

.blog-card-tags { display: flex; flex-wrap: wrap; gap: .35rem; }

.blog-card-tag,
.gallery-category {
    display: inline-flex;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: var(--marca-suave);
    color: var(--marca);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}

.blog-card-title,
.related-card__body h3,
.gallery-info h3 {
    font-size: 1.2rem;
    line-height: 1.25;
    margin: 0;
}

.blog-card-title a,
.related-card__body h3 a { color: inherit; text-decoration: none; }

.blog-card-title a:hover,
.related-card__body h3 a:hover { text-decoration: underline; }

.blog-card-excerpt,
.gallery-info p { color: var(--tinta-2); font-size: .95rem; margin: 0; }

.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
    color: var(--tinta-2);
    font-size: .85rem;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: var(--toque);
    font-weight: 700;
    text-decoration: none;
}

.read-more:hover { text-decoration: underline; }

.empty-state,
.no-items {
    grid-column: 1 / -1;
    padding: var(--e5) var(--e3);
    border: 2px dashed var(--linea);
    border-radius: var(--radio);
    text-align: center;
    color: var(--tinta-2);
}

.empty-state h2,
.no-items h2 { font-size: var(--t-h3); margin-bottom: var(--e1); }

/* --- Navegación entre páginas --------------------------------------------- */

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-top: var(--e4);
}

.nav-links a,
.nav-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--toque);
    min-height: var(--toque);
    padding: .4rem .9rem;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: var(--blanco);
    font-weight: 600;
    text-decoration: none;
}

.nav-links a:hover { border-color: var(--marca); color: var(--marca); }

.nav-links .active { background: var(--marca); border-color: var(--marca); color: #fff; }

/* --- Ventana de galería --------------------------------------------------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    place-items: center;
    padding: var(--e3);
    background: rgba(3, 0, 107, .88);
}

.modal.open { display: grid; }

.modal-content {
    position: relative;
    max-width: min(56rem, 100%);
    max-height: 88vh;
    background: var(--blanco);
    border-radius: var(--radio);
    overflow: auto;
}

.modal-content img,
.modal-content video { width: 100%; height: auto; }

.modal-info { padding: var(--e3); }

.modal-info h3 { font-size: var(--t-h3); margin-bottom: .35rem; }

.modal-info p { color: var(--tinta-2); }

.modal-close {
    position: absolute;
    top: var(--e3);
    right: var(--e3);
    display: grid;
    place-items: center;
    width: var(--toque);
    height: var(--toque);
    border-radius: 50%;
    background: var(--blanco);
    color: var(--marca);
    font-size: 1.5rem;
    line-height: 1;
    border: 0;
    cursor: pointer;
}

/* --- Bloques de información (cursos, contacto, CV) ------------------------ */

.info-section,
.cv-section,
.map-section,
.parking-section,
.related-posts { margin-bottom: clamp(var(--e4), 5vw, var(--e5)); }

/* «Artículos relacionados» cuelga del <body> sin contenedor, así que se
   pegaba al borde izquierdo de la ventana. Va al ancho del artículo, no al
   del sitio: si no, su título arranca mucho más a la izquierda que el texto
   que acaba de leerse. */
.related-posts {
    width: min(100% - 2.5rem, 48rem);
    margin-inline: auto;
}

.info-section > h2,
.cv-section > h2,
.map-section > h2,
.parking-section > h2,
.related-posts > h2 {
    font-size: var(--t-h2);
    margin-bottom: var(--e3);
}

/* Dentro del apartado, el mapa, la foto de la entrada y los planos del
   parking se tocaban entre sí sin ninguna separación. */
.map-section > * + *,
.parking-section > * + * { margin-top: var(--e3); }

/* Iba centrado bajo un título alineado a la izquierda, y con un gris suelto
   fuera de la paleta. */
.parking-section > p {
    max-width: 68ch;
    color: var(--tinta-2);
}

.info-grid,
.contact-grid,
.skills-grid,
.languages,
.parking-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--e3);
}

.info-card,
.info-item,
.contact-card,
.experience-item,
.skill-category,
.language-item {
    display: grid;
    align-content: start;
    gap: .55rem;
    padding: var(--e3);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.info-card h3,
.info-item h3,
.contact-card h3,
.experience-item h3,
.skill-category h3,
.language-item h3 { font-size: var(--t-h3); margin: 0; }

.info-card h4,
.experience-item h4 { font-size: 1.02rem; color: var(--urgencia); margin: 0; }

.info-card p,
.info-item p,
.contact-card p,
.experience-item p,
.skill-category p,
.language-item p { color: var(--tinta-2); margin: 0; }

.info-card ul,
.experience-item ul,
.skill-category ul,
.modulos-list {
    display: grid;
    gap: .4rem;
    margin: .3rem 0 0 1.25rem;
}

.info-card li,
.experience-item li,
.skill-category li,
.modulos-list li {
    list-style: disc;
    color: var(--tinta-2);
    font-size: .95rem;
}

.contact-card a,
.info-item a { font-weight: 700; }

/* --- Mapa e imágenes de contacto ------------------------------------------ */

.map-container,
.parking-map {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--fondo);
}

.map-container iframe,
.parking-map iframe {
    display: block;
    width: 100%;
    min-height: 24rem;
    border: 0;
}

.entrance-image,
.parking-image {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--blanco);
}

.entrance-image img,
.parking-image img { width: 100%; height: auto; }

.parking-image h3 { font-size: 1.05rem; padding: .9rem 1rem .3rem; margin: 0; }

/* --- Cierres con llamada a la acción -------------------------------------- */

.cta-curso,
.cta-section,
.post-cta {
    padding: clamp(var(--e4), 5vw, var(--e5)) var(--e3);
    margin-top: var(--e4);
    background: var(--marca);
    color: #fff;
    border-radius: 20px;
    text-align: center;
}

.cta-curso h2,
.cta-section h2,
.post-cta h2,
.cta-curso h3,
.cta-section h3,
.post-cta h3 { color: #fff; font-size: var(--t-h2); margin-bottom: var(--e2); }

.cta-curso p,
.cta-section p,
.post-cta p {
    max-width: 56ch;
    margin: 0 auto var(--e3);
    color: var(--azul-claro);
}

.btn-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--toque);
    padding: .8rem 1.6rem;
    border-radius: 999px;
    background: var(--blanco);
    color: var(--marca);
    font-family: var(--titulo);
    font-weight: 700;
    text-decoration: none;
}

.btn-white:hover { background: var(--amarillo); color: #3d2f00; }

/* --- Artículo del blog ---------------------------------------------------- */

/* La firma y las etiquetas se escribieron para la banda azul, pero el marcado
   las coloca dentro del texto, sobre fondo blanco: la firma iba en lavanda
   claro y las etiquetas, en blanco sobre blanco, no se veían. */
.post-meta,
.post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2);
    color: var(--tinta-2);
    font-size: var(--t-menor);
}

.post-header { margin-bottom: var(--e4); }

.post-tags { margin-top: var(--e4); gap: .4rem; }

.post-tags strong { color: var(--tinta-2); font-size: var(--t-menor); }

.post-tags a {
    display: inline-flex;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: var(--marca-suave);
    color: var(--marca);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}

.post-tags a:hover { background: #dde1f7; }

.post-featured-image {
    width: 100%;
    max-height: 26rem;
    object-fit: cover;
    border-radius: var(--radio);
    margin-bottom: var(--e4);
}

.post-content { font-size: 1.06rem; line-height: 1.8; }

.post-content > * { margin-bottom: var(--e2); }

.post-content h2 {
    font-size: clamp(1.4rem, 1.2rem + .9vw, 1.8rem);
    margin: var(--e4) 0 var(--e2);
}

.post-content h3 { font-size: var(--t-h3); margin: var(--e3) 0 .5rem; }

.post-content p,
.post-content li { color: var(--tinta-2); }

.post-content ul,
.post-content ol { display: grid; gap: .4rem; margin: 0 0 var(--e2) 1.3rem; }

.post-content ul li { list-style: disc; }
.post-content ol li { list-style: decimal; }

.post-content img { border-radius: var(--radio); margin-block: var(--e3); }

/* La cita se marca con sangría y fondo, no con un filete de color al lado:
   ese borde grueso lateral es la marca de fábrica de las interfaces
   generadas, y el detector lo señala con razón. */
.post-content blockquote {
    padding: var(--e3);
    margin-block: var(--e3);
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    color: var(--tinta);
    font-size: 1.1rem;
}

.post-content a { font-weight: 600; }

.post-content strong { color: var(--tinta); }

.post-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    padding-top: var(--e3);
    margin-top: var(--e4);
    border-top: 1px solid var(--linea);
}

.share-buttons { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.share-buttons a,
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: var(--toque);
    padding: .6rem 1.1rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--blanco);
    color: var(--marca);
    font-weight: 700;
    font-size: var(--t-menor);
    text-decoration: none;
}

.share-buttons a:hover,
.btn-back:hover { border-color: var(--marca); background: var(--marca-suave); }

/* Contacto, CV y galería anidan su cabecera dentro del contenedor, así que
   quedaba encajonada en vez de ocupar el ancho. Se saca sin tocar el marcado:
   el contenedor deja de recortarla y ella recupera su propio margen interior. */

.contact-container,
.cv-container {
    width: 100%;
    max-width: none;
    padding-block: 0;
}

/* Las migas quedan fuera: son una banda a ancho completo con su propio fondo y
   su propio `.breadcrumbs__inner` que ya centra el contenido. Encerrarlas aquí
   las dejaba flotando con 352px de margen a cada lado. */
.contact-container > :not(.contact-header, .breadcrumbs),
.cv-container > :not(.cv-header, .breadcrumbs) {
    width: min(100% - 2.5rem, var(--ancho));
    margin-inline: auto;
}

/* Ritmo vertical. Estas dos páginas encadenaban bloque tras bloque sin
   ninguna separación: el título de un apartado salía pegado al final del
   anterior. Los márgenes contiguos colapsan con los que ya trae cada
   apartado, así que no se suman. */
.contact-container > * + *,
.cv-container > * + * {
    margin-top: clamp(var(--e4), 6vw, var(--e5));
}

/* Las migas van pegadas a su cabecera, como en el resto del sitio. */
.contact-container > .breadcrumbs,
.cv-container > .breadcrumbs { margin-top: 0; }

.contact-container > :last-child,
.cv-container > :last-child {
    margin-bottom: clamp(var(--e4), 6vw, var(--e5));
}

.contact-header > *,
.cv-header > * {
    max-width: min(100% - 2.5rem, var(--ancho));
    margin-inline: auto;
}

/* Datos de contacto bajo el retrato del CV */
.cv-header .contact-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2) var(--e3);
    justify-content: center;
    margin-top: var(--e3);
    padding: 0;
    background: none;
    border: 0;
    color: var(--azul-claro);
}

.cv-header .contact-info span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.cv-header .contact-info a { color: #fff; font-weight: 700; }

.cv-header .contact-info svg { color: var(--amarillo); }

/* Los títulos de apartado del CV llevan icono delante */
.cv-section > h3,
.info-section > h3 {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: var(--t-h2);
    margin-bottom: var(--e3);
}

.cv-section > h3 svg,
.info-section > h3 svg { color: var(--urgencia); width: 1.4rem; height: 1.4rem; }

/* En «Formación Académica» las dos fichas iban borde con borde y se leían
   como una sola caja partida por una línea. */
.cv-section > * + * { margin-top: var(--e3); }

.cv-section h4 { font-size: 1.05rem; margin: var(--e3) 0 .5rem; }

/* El h4 lleva margen superior para despegarse del texto que le precede;
   abriendo la ficha sólo añadía hueco muerto sobre el título. */
.experience-item > h4:first-child,
.skill-category > h4:first-child { margin-top: 0; }

.cv-section > ul,
.cv-section > p { color: var(--tinta-2); margin-bottom: var(--e2); }

.cv-section > ul { display: grid; gap: .4rem; margin-left: 1.3rem; }
.cv-section > ul li { list-style: disc; }

/* El retrato del CV mantiene su tamaño: la regla de ancho para los hijos de
   la cabecera es más específica que `.photo-container` y se lo comía. */
.cv-header > .photo-container {
    max-width: 13rem;
}

/* Entrada sin imagen destacada: el marcado deja un <div> vacío de relleno.
   Un rectángulo gris grande no aporta nada, así que se retira y la tarjeta
   empieza por el texto. Se recupera solo cuando haya imagen real. */
div.blog-card-image:empty { display: none; }

/* --- Cursos ---------------------------------------------------------------
   El programa era una lista de viñetas donde el título y su explicación se
   pegaban sin separación. Ahora cada punto es una fila numerada legible. */

.portada-pagina__lema {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--amarillo) !important;
    margin-bottom: var(--e2);
}

.dato-curso {
    display: grid;
    align-content: start;
    gap: .45rem;
    padding: var(--e3);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.dato-curso h3 {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinta-2);
    margin: 0;
}

.dato-curso__valor {
    font-family: var(--titulo);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--marca);
    line-height: 1.2;
    margin: 0;
}

.dato-curso__detalle {
    font-size: var(--t-menor);
    color: var(--tinta-2);
    margin: 0;
}

.programa {
    display: grid;
    gap: 0;
    max-width: 56rem;
    margin-inline: auto;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--blanco);
}

.programa__punto {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: var(--e3);
    align-items: start;
    padding: var(--e3);
    border-bottom: 1px solid var(--linea);
}

.programa__punto:last-child { border-bottom: 0; }

.programa__numero {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--marca-suave);
    color: var(--marca);
    font-family: var(--titulo);
    font-size: 1.15rem;
    font-weight: 800;
}

.programa__punto h3 {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--t-h3);
    margin-bottom: .4rem;
}

.programa__punto h3 svg { color: var(--urgencia); }

.programa__punto p { color: var(--tinta-2); margin: 0; }

@media (max-width: 40rem) {
    .programa__punto { grid-template-columns: 2.4rem 1fr; gap: var(--e2); padding: var(--e2); }
    .programa__numero { width: 2.4rem; height: 2.4rem; font-size: 1rem; }
}

.galeria-curso img {
    width: 100%;
    height: auto;
    border-radius: var(--radio);
    border: 1px solid var(--linea);
}

/* --- Banda de cierre a ancho completo -------------------------------------
   Antes era una tarjeta redondeada dentro del contenedor; el cliente la
   quiere de lado a lado. */

.banda-cierre {
    background: var(--marca);
    color: #fff;
    padding-block: clamp(3rem, 5vw, 4.5rem);
}

.banda-cierre__interior {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(var(--e3), 4vw, var(--e5));
    align-items: center;
}

.banda-cierre h2 {
    color: #fff;
    font-size: var(--t-h2);
    margin-bottom: var(--e2);
}

.banda-cierre p { color: var(--azul-claro); }

.banda-cierre__nota {
    margin-top: var(--e3);
    padding-top: var(--e3);
    border-top: 1px solid rgba(255, 255, 255, .25);
    font-size: var(--t-menor);
}

.banda-cierre__nota strong { color: #fff; }

.banda-cierre__llamada {
    display: grid;
    justify-items: start;
    gap: .35rem;
    padding: var(--e3);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radio);
}

.etiqueta-llamada {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--amarillo) !important;
}

.banda-cierre__numero {
    font-family: var(--titulo);
    font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    text-decoration: none;
    line-height: 1.1;
}

.banda-cierre__numero:hover { color: var(--amarillo); }

.banda-cierre__llamada .btn-white { margin-top: var(--e2); }

@media (max-width: 56rem) {
    .banda-cierre__interior { grid-template-columns: 1fr; }
}

/* El pie y la banda de cierre comparten el azul de marca: sin un filete que
   los separe se leen como una sola mancha con un hueco raro en medio. */
.pie { border-top: 1px solid rgba(255, 255, 255, .22); }

.banda-cierre + .pie { padding-top: var(--e4); }

/* --- Bloque de experiencia profesional (CV) -------------------------------
   Elegido en vivo por el cliente: la cabecera de la variante 1 (cargo grande
   con los años como cifra) fusionada con el cuerpo de la variante 3 (bloques
   separados con icono y especialidades en fichas).

   Solo aplica al bloque grande de experiencia. Los de formación académica
   siguen usando `.experience-item`, que es una tarjeta simple. */

.experiencia { display: grid; gap: var(--e3); }

.experiencia__cabeza {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--e3);
    align-items: center;
    padding: var(--e3);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.experiencia__cargo {
    font-family: var(--titulo);
    font-size: clamp(1.4rem, 1.2rem + .9vw, 1.8rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--marca);
    margin: 0;
}

.experiencia__meta {
    color: var(--tinta-2);
    font-size: var(--t-menor);
    margin: .35rem 0 0;
}

.experiencia__anyos {
    display: grid;
    justify-items: center;
    padding: .7rem 1.2rem;
    border-radius: var(--radio);
    background: var(--marca-suave);
    text-align: center;
    margin: 0;
}

.experiencia__cifra {
    font-family: var(--titulo);
    font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem);
    font-weight: 800;
    line-height: 1;
    color: var(--marca);
}

/* "MÁS DE 30 AÑOS" bajo la cifra es exactamente una etiqueta de dato: usa el
   peldaño que ya existe para eso (0.78rem) en lugar de inventar un vecino. */
.experiencia__anyos small {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--urgencia);
    margin-top: .25rem;
}

.experiencia__bloque {
    padding: var(--e3);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.experiencia__bloque h4 {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--titulo);
    font-size: 1.15rem;
    color: var(--marca);
    margin: 0 0 var(--e2);
}

.experiencia__bloque h4 svg { width: 1.15rem; height: 1.15rem; color: var(--urgencia); }

.experiencia__bloque ul { display: grid; gap: .4rem; margin: 0 0 0 1.15rem; }

.experiencia__bloque li {
    list-style: disc;
    color: var(--tinta-2);
    font-size: .97rem;
    line-height: 1.55;
}

/* Las especialidades son palabras sueltas: en fichas se leen de un vistazo,
   y once viñetas seguidas desperdiciaban once renglones. */
.experiencia__fichas { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; }

.experiencia__fichas li {
    list-style: none;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: var(--marca-suave);
    color: var(--marca);
    font-size: var(--t-menor);
    font-weight: 600;
}

@media (max-width: 44rem) {
    .experiencia__cabeza { grid-template-columns: 1fr; }
    .experiencia__anyos { justify-self: start; }
}

/* Corrección de dos fallos vistos en pantalla:

   1. Las fichas de especialidades salían como barras a todo el ancho: la regla
      `.experiencia__bloque ul` (display:grid) gana en especificidad a
      `.experiencia__fichas`. Se sube la especificidad de las fichas.
   2. Los subtítulos de las tarjetas de formación quedaron en rojo al retirar
      el naranja. El rojo significa "aquí se contacta o se actúa": un titular
      en rojo rompe la regla de una Sola Voz que rige el sistema. */

.experiencia__bloque ul.experiencia__fichas {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-left: 0;
}

.experience-item h4,
.info-card h4 {
    color: var(--marca);
}

/* ============================================================================
   EL ROJO COMO DETALLE, NO SOLO COMO ACCIÓN
   Decisión del cliente a partir del listado de cursos: «coloreamos de rojo los
   iconos, me gusta, esa es la línea».

   La regla, para que se aplique igual en todo el sitio y no a salpicones:

     · Icono sobre superficie clara  ->  rojo
     · Icono sobre el azul de marca  ->  amarillo   (el rojo sobre #03006b
       queda en 1,4:1, ilegible: por eso ahí manda el amarillo)
     · Texto  ->  nunca rojo, salvo que sea un control

   El rojo sigue siendo el color de "pulsa aquí" en botones y teléfono; ahora
   además marca el detalle gráfico. Lo que no hace es teñir titulares: eso
   confundiría un encabezado con un aviso.
   ========================================================================= */

/* Cuadro de icono de tarjeta: el trazo pasa a rojo sobre el fondo azul teñido.
   Contraste medido #c1272d sobre #eceefb: 5,06:1. */
.tarjeta__icono { color: var(--urgencia); }

/* ...pero sobre el azul de marca el rojo no se ve: allí sigue el amarillo. */
.seccion--marca .tarjeta__icono,
.sobre-marca .tarjeta__icono { color: var(--amarillo); }

/* Marcas de verificación de las listas de servicios */
.lista-check svg { color: var(--urgencia); }

/* Metadatos de entrada de blog: autor, fecha, tiempo de lectura */
.entrada__meta svg,
.blog-card-meta svg { color: var(--urgencia); }

/* Iconos de contacto y de datos en superficie clara */
.contact-card svg,
.info-item svg,
.panel__dato svg,
.galeria figcaption svg { color: var(--urgencia); }

/* Enlaces de "leer más" y flechas de cierre de bloque */
.read-more svg,
.entrada__enlace svg { color: var(--urgencia); }

/* Migas de pan: el separador toma un punto de color */
.breadcrumbs li + li::before { color: var(--urgencia); }

/* Viñetas de las listas largas: el marcador en rojo y el texto en tinta */
.experiencia__bloque li::marker,
.prosa ul li::marker,
.legal-content ul li::marker,
.post-content ul li::marker,
.info-card li::marker,
.experience-item li::marker,
.skill-category li::marker,
.modulos-list li::marker { color: var(--urgencia); }