/* ==========================================================================
   PORTAL PÚBLICO — SISTEMA VISUAL «EXPEDIENTE»
   --------------------------------------------------------------------------
   El lenguaje visual procede del documento jurídico: columna medida, filetes
   de un punto, secciones numeradas, ladillos al margen y una tipografía con
   serifa que sostiene el tono. La jerarquía la construyen la estructura y el
   contraste tipográfico, no las sombras difusas ni los bordes redondeados.

   Contrato: /web-theme.css se carga DESPUÉS de esta hoja y puede sobrescribir
   --navy, --gold, --paper, --ink, --brand-font, --site-width, --radius,
   --button-radius y --heading-scale desde Ajustes del CRM. Todo lo demás se
   deriva de esas variables, de modo que un cambio de marca no rompe el diseño.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fundamentos
   -------------------------------------------------------------------------- */
:root {
    /* Marca — sobrescribibles desde el CRM */
    --navy: #5c1f28;          /* color principal: burdeos de encuadernación jurídica */
    --navy-2: #74303a;
    --gold: #9a7b4f;          /* acento: latón apagado, solo para filetes y marcas */
    --gold-soft: #e2d6c2;
    --paper: #f6f4ef;         /* papel cálido */
    --ink: #1b1917;           /* tinta, negro cálido */
    --site-width: 1120px;
    --radius: 3px;
    --button-radius: 2px;
    --heading-scale: 1;
    --brand-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Familias */
    --font-ui: var(--brand-font);
    --font-display: ui-serif, "Iowan Old Style", Charter, "Bitstream Charter", "Palatino Linotype", Palatino, "Hoefler Text", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Superficies y filetes derivados */
    --paper-raised: color-mix(in srgb, var(--paper) 55%, #fff);
    --paper-sunken: color-mix(in srgb, var(--paper) 88%, var(--ink));
    --surface: color-mix(in srgb, var(--paper) 40%, #fff);
    --line: color-mix(in srgb, var(--ink) 15%, transparent);
    --line-soft: color-mix(in srgb, var(--ink) 9%, transparent);
    --line-strong: color-mix(in srgb, var(--ink) 32%, transparent);

    /* Tinta derivada */
    --ink-soft: color-mix(in srgb, var(--ink) 66%, var(--paper));
    --ink-faint: color-mix(in srgb, var(--ink) 45%, var(--paper));
    --on-brand: color-mix(in srgb, var(--paper) 92%, #fff);
    --brand-soft: color-mix(in srgb, var(--navy) 8%, var(--paper));
    --brand-line: color-mix(in srgb, var(--navy) 30%, transparent);
    --accent-soft: color-mix(in srgb, var(--gold) 16%, var(--paper));

    /* Ritmo vertical y medida */
    --measure: 68ch;
    --gutter: clamp(20px, 4vw, 40px);
    --band: clamp(56px, 7vw, 104px);
    --band-tight: clamp(34px, 4.5vw, 60px);

    /* Escala tipográfica: el salto entre titular y texto es deliberado */
    --step-display: calc(clamp(2.6rem, 1.5rem + 4.4vw, 4.4rem) * var(--heading-scale));
    --step-1: calc(clamp(2rem, 1.3rem + 2.6vw, 3rem) * var(--heading-scale));
    --step-2: calc(clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem) * var(--heading-scale));
    --step-3: calc(clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem) * var(--heading-scale));
    --step-body: 1.0625rem;
    --step-small: 0.875rem;
    --step-label: 0.7rem;

    --shadow-overlay: 0 18px 44px -28px color-mix(in srgb, var(--ink) 70%, transparent);
    --focus: color-mix(in srgb, var(--navy) 70%, #fff);
}

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

html {
    -webkit-text-size-adjust: 100%;
}

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--step-body);
    line-height: 1.72;
    /* Banda superior de membrete: la primera señal de que esto es un documento. */
    border-top: 3px solid var(--navy);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
    text-decoration-color: var(--brand-line);
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
}

a:hover {
    text-decoration-color: currentColor;
}

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

::selection {
    background: color-mix(in srgb, var(--gold) 34%, var(--paper));
    color: var(--ink);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.1;
    text-wrap: balance;
    margin: 0 0 0.5em;
}

h1 {
    font-size: var(--step-1);
    letter-spacing: -0.022em;
}

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

h3 {
    font-size: var(--step-3);
    letter-spacing: -0.008em;
}

p {
    margin: 0 0 1.15em;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: var(--band-tight) 0;
}

small {
    font-size: var(--step-small);
}

/* Ladillo: rótulo en versalitas precedido de un filete corto. Es el recurso
   que ordena toda la página y sustituye a las etiquetas con fondo de color. */
.eyebrow,
.content-eyebrow,
.footer-kicker,
.post-category,
.blog-rss-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin: 0 0 1em;
    font-family: var(--font-ui);
    font-size: var(--step-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    line-height: 1.4;
}

.eyebrow::before,
.content-eyebrow::before,
.footer-kicker::before,
.post-category::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--gold);
    flex: none;
}

.lead,
.content-text-lead {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.4rem);
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 56ch;
    text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   2. Estructura de página
   -------------------------------------------------------------------------- */
.site-shell {
    width: min(var(--site-width), calc(100% - (var(--gutter) * 2)));
    margin-inline: auto;
}

main {
    display: block;
}

.blank-page-main,
.template-blank {
    width: 100%;
    min-height: 100vh;
}

.template-blank {
    overflow: hidden;
}

.template-menu {
    width: 100%;
    min-height: calc(100vh - 88px);
}

.template-default,
.template-wide {
    display: block;
}

.page-body {
    padding-block: var(--band);
}

.skip-link {
    position: fixed;
    left: 18px;
    top: -100px;
    z-index: 200;
    background: var(--ink);
    color: var(--paper);
    padding: 12px 20px;
    border-radius: var(--button-radius);
    text-decoration: none;
    font-size: var(--step-small);
    font-weight: 600;
}

.skip-link:focus {
    top: 16px;
}

.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;
}

/* --------------------------------------------------------------------------
   3. Cabecera y navegación
   El encabezado es opaco y se apoya en un filete, no en desenfoque ni sombra.
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.header-inner {
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 34px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-right: auto;
    text-decoration: none;
    padding-block: 14px;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border: 1px solid var(--navy);
    color: var(--navy);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.brand-logo {
    max-height: 46px;
    width: auto;
}

.brand strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.14rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.2;
}

.brand small {
    display: block;
    margin-top: 3px;
    font-size: var(--step-label);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
}

.desktop-nav > a,
.nav-submenu > summary {
    position: relative;
    padding: 10px 2px;
    font-size: 0.9rem;
    font-weight: 550;
    text-decoration: none;
    color: var(--ink-soft);
    cursor: pointer;
    white-space: nowrap;
}

/* El subrayado nace desde la izquierda: un gesto sobrio, no un rebote. */
.desktop-nav > a::after,
.nav-submenu > summary::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 1px;
    background: var(--navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s ease;
}

.desktop-nav > a:hover,
.nav-submenu > summary:hover,
.desktop-nav > a[aria-current="page"] {
    color: var(--ink);
}

.desktop-nav > a:hover::after,
.nav-submenu > summary:hover::after,
.desktop-nav > a[aria-current="page"]::after {
    transform: scaleX(1);
}

.nav-submenu {
    position: relative;
}

.nav-submenu > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-submenu > summary::-webkit-details-marker {
    display: none;
}

.nav-submenu > summary::marker {
    content: "";
}

.nav-submenu > div {
    position: absolute;
    top: calc(100% + 10px);
    left: -14px;
    min-width: 236px;
    display: grid;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-overlay);
    z-index: 10;
}

.nav-submenu > div a {
    padding: 9px 12px;
    font-size: 0.88rem;
    text-decoration: none;
    color: var(--ink-soft);
}

.nav-submenu > div a:hover {
    background: var(--brand-soft);
    color: var(--ink);
}

.nav-parent-link {
    border-bottom: 1px solid var(--line-soft);
    font-weight: 600;
    color: var(--ink) !important;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-login {
    font-size: 0.86rem;
    font-weight: 550;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 8px 4px;
}

.header-login:hover {
    color: var(--ink);
    text-decoration: underline;
}

.portal-user-menu {
    position: relative;
}

.portal-user-menu > summary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px 7px 7px;
    border: 1px solid var(--line);
    cursor: pointer;
    list-style: none;
    font-size: 0.85rem;
}

.portal-user-menu > summary::-webkit-details-marker {
    display: none;
}

.portal-user-menu > summary > span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    background: var(--navy);
    color: var(--on-brand);
    font-size: 0.75rem;
    font-weight: 700;
}

.portal-user-menu > div {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 190px;
    display: grid;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-overlay);
    padding: 6px;
    z-index: 10;
}

.portal-user-menu a,
.portal-user-menu button {
    padding: 9px 12px;
    text-align: left;
    font: inherit;
    font-size: 0.86rem;
    background: none;
    border: 0;
    color: var(--ink-soft);
    text-decoration: none;
    cursor: pointer;
    width: 100%;
}

.portal-user-menu a:hover,
.portal-user-menu button:hover {
    background: var(--brand-soft);
    color: var(--ink);
}

.mobile-nav {
    display: none;
}

.mobile-nav > summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    border: 1px solid var(--line-strong);
    font-size: var(--step-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mobile-nav > summary::-webkit-details-marker {
    display: none;
}

.mobile-nav nav {
    position: absolute;
    left: 0;
    right: 0;
    display: grid;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 22px;
    max-height: 74vh;
    overflow-y: auto;
}

.mobile-nav nav a {
    padding: 13px 0;
    border-bottom: 1px solid var(--line-soft);
    text-decoration: none;
    font-weight: 550;
}

.mobile-nav-group {
    padding: 18px 0 6px;
    font-size: var(--step-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.mobile-nav-child {
    padding-left: 16px !important;
    color: var(--ink-soft);
}

@media (max-width: 940px) {
    .desktop-nav,
    .header-contact {
        display: none;
    }

    .mobile-nav {
        display: block;
    }

    .header-inner {
        min-height: 70px;
    }
}

/* --------------------------------------------------------------------------
   4. Botones y enlaces de acción
   Rectangulares, con un desplazamiento de un píxel al pulsar: el gesto de un
   sello sobre el papel, en lugar de la elevación con sombra difusa.
   -------------------------------------------------------------------------- */
.primary-link,
.header-contact,
.content-button,
.blog-search button,
.comment-form button,
.public-contact-form button,
.blog-newsletter button,
.cookie-accept {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid var(--navy);
    border-radius: var(--button-radius);
    background: var(--navy);
    color: var(--on-brand);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.12s ease;
}

.primary-link:hover,
.header-contact:hover,
.content-button:hover,
.blog-search button:hover,
.comment-form button:hover,
.public-contact-form button:hover,
.blog-newsletter button:hover,
.cookie-accept:hover {
    background: var(--navy-2);
    border-color: var(--navy-2);
}

.primary-link:active,
.header-contact:active,
.content-button:active {
    transform: translateY(1px);
}

.secondary-link,
.content-button-outline,
.clear-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid var(--line-strong);
    border-radius: var(--button-radius);
    background: transparent;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.secondary-link:hover,
.content-button-outline:hover,
.clear-filter:hover {
    border-color: var(--navy);
    background: var(--brand-soft);
}

.content-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-block: 1.4em;
}

/* Enlace de texto con flecha: la flecha avanza, el texto no salta. */
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px solid var(--brand-line);
    padding-bottom: 2px;
}

.text-link span,
.text-link::after {
    transition: transform 0.2s ease;
}

.text-link:hover {
    border-bottom-color: var(--navy);
}

.text-link:hover span {
    transform: translateX(4px);
}

.back-link {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.4em;
    font-size: var(--step-small);
    font-weight: 550;
    color: var(--ink-faint);
    text-decoration: none;
    margin-bottom: 1.6em;
}

.back-link:hover {
    color: var(--navy);
}

.external-mark {
    font-size: 0.75em;
    color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   5. Portada de página y prosa
   -------------------------------------------------------------------------- */
.page-hero {
    padding-block: clamp(52px, 8vw, 108px) var(--band-tight);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(to bottom, var(--paper-raised), var(--paper));
}

.page-hero h1 {
    font-size: var(--step-display);
    max-width: 20ch;
    letter-spacing: -0.028em;
    line-height: 1.04;
}

.page-hero .lead {
    margin-top: 0.9em;
}

.prose {
    max-width: var(--measure);
    font-size: var(--step-body);
}

/* El cuerpo de una página lleva a la vez .site-shell y .prose. Ahí el ancho lo
   marcan las secciones y las rejillas; la medida de lectura se aplica solo al
   texto corrido, no al contenedor, o los bloques de varias columnas se
   estrangularían a 68 caracteres. */
.page-body.prose,
.public-page > .prose {
    max-width: none;
}

.page-body.prose > p,
.page-body.prose > ul,
.page-body.prose > ol,
.page-body.prose > h2,
.page-body.prose > h3,
.page-body.prose > blockquote,
.page-body.prose > figure {
    max-width: var(--measure);
}

/* Cifras de estilo antiguo en el cuerpo de texto: detalle de composición
   editorial que distingue el texto corrido de una interfaz. */
.prose p,
.prose li {
    font-variant-numeric: oldstyle-nums proportional-nums;
    text-wrap: pretty;
}

.prose > h2 {
    margin-top: 1.9em;
    padding-top: 0.75em;
    border-top: 1px solid var(--line);
    font-size: var(--step-2);
}

.prose > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.prose > h3 {
    margin-top: 1.7em;
}

.prose ul,
.prose ol {
    padding-left: 1.15em;
    margin: 0 0 1.3em;
}

.prose li {
    margin-bottom: 0.5em;
    padding-left: 0.2em;
}

.prose li::marker {
    color: var(--gold);
}

.prose a {
    color: var(--navy);
    text-decoration: underline;
    text-decoration-color: var(--brand-line);
}

.prose a:hover {
    text-decoration-color: var(--navy);
}

.prose strong {
    font-weight: 650;
}

.prose blockquote {
    margin: 1.8em 0;
    padding-left: 1.4em;
    border-left: 2px solid var(--gold);
    font-family: var(--font-display);
    font-size: 1.16rem;
    font-style: italic;
    color: var(--ink-soft);
}

.prose figure {
    margin: 2em 0;
}

.prose figcaption {
    margin-top: 0.7em;
    font-size: var(--step-small);
    color: var(--ink-faint);
}

.prose code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--paper-sunken);
    padding: 0.12em 0.4em;
    border: 1px solid var(--line-soft);
}

.prose table,
.content-fee-table table,
.content-comparison table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.8em 0;
    font-size: var(--step-small);
    font-variant-numeric: tabular-nums;
}

.prose th,
.content-fee-table th,
.content-comparison th {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-strong);
    font-family: var(--font-ui);
    font-size: var(--step-label);
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.prose td,
.content-fee-table td,
.content-comparison td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
}

.prose tbody tr:hover,
.content-fee-table tbody tr:hover {
    background: var(--brand-soft);
}

.content-table-wrap {
    overflow-x: auto;
    margin: 1.8em 0;
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   6. Secciones de contenido
   Numeración automática al margen: cada sección de una página se lee como el
   articulado de un documento. Es el rasgo que da carácter sin decorar.
   -------------------------------------------------------------------------- */
.page-body,
.public-page {
    counter-reset: seccion;
}

.content-section {
    position: relative;
    padding-block: var(--band-tight);
    border-top: 1px solid var(--line);
}

.content-section:first-child {
    border-top: 0;
    padding-top: 0;
}

.content-section > h2 {
    font-size: var(--step-2);
    max-width: 24ch;
}

.content-section > p {
    max-width: var(--measure);
    color: var(--ink-soft);
}

@media (min-width: 1180px) {
    .page-body > .content-section > h2::before {
        counter-increment: seccion;
        content: counter(seccion, decimal-leading-zero);
        position: absolute;
        left: -76px;
        font-family: var(--font-ui);
        font-size: var(--step-label);
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--gold);
        padding-top: 0.55em;
    }
}

.content-hero {
    padding-block: clamp(48px, 7vw, 96px);
    border-top: 0;
}

.content-hero h1,
.content-hero h2 {
    font-size: var(--step-display);
    max-width: 18ch;
    line-height: 1.04;
    letter-spacing: -0.028em;
}

.content-separator {
    height: 1px;
    background: var(--line);
    border: 0;
    margin-block: var(--band-tight);
}

.content-id {
    scroll-margin-top: 110px;
}

/* Tarjetas: sin sombra ni relleno flotante. Un filete y una regla superior
   de acento que aparece al pasar el cursor. */
.content-cards,
.content-practice-areas,
.content-cases,
.content-reviews,
.content-documents,
.content-team-photos,
.related-posts > div {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    margin-block: 1.6em;
}

.content-card,
.content-cards > article,
.content-practice-areas > *,
.content-cases > *,
.content-documents > *,
.related-posts article {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: clamp(22px, 2.6vw, 32px);
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line);
    transition: background 0.2s ease;
}

.content-card::before,
.content-cards > article::before,
.content-practice-areas > *::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.content-card:hover,
.content-cards > article:hover,
.content-practice-areas > *:hover,
.related-posts article:hover {
    background: var(--paper-raised);
}

.content-card:hover::before,
.content-cards > article:hover::before,
.content-practice-areas > *:hover::before {
    transform: scaleX(1);
}

.content-card h3,
.content-cards > article h3,
.related-posts h3 {
    font-size: var(--step-3);
    margin: 0;
}

.content-card h3 a,
.related-posts h3 a {
    text-decoration: none;
}

.content-card h3 a:hover,
.related-posts h3 a:hover {
    color: var(--navy);
}

.content-card p,
.related-posts p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.96rem;
}

.content-card .text-link {
    margin-top: auto;
    padding-top: 0.8em;
    align-self: flex-start;
}

.content-box,
.content-panel,
.content-service-feature,
.content-legal-service,
.content-price-card,
.content-lawyer-profile,
.empty-card {
    padding: clamp(22px, 3vw, 34px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.content-columns,
.content-split,
.content-comparison,
.content-before-after {
    display: grid;
    gap: clamp(24px, 4vw, 52px);
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    align-items: start;
    margin-block: 1.6em;
}

.content-layout-row {
    display: grid;
    gap: clamp(22px, 3.5vw, 48px);
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    align-items: start;
}

.content-layout-slot {
    min-width: 0;
}

/* Cifras destacadas: la serifa a gran tamaño con cifras tabulares. */
.content-stats {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    margin-block: 2em;
}

.content-stats > * {
    padding: clamp(20px, 2.6vw, 30px);
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--line);
    display: grid;
    gap: 0.3em;
}

.content-stats strong,
.content-stats b {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
    font-weight: 600;
    line-height: 1;
    color: var(--navy);
    font-variant-numeric: tabular-nums lining-nums;
}

.content-stats span,
.content-stats small {
    font-size: var(--step-label);
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Proceso y cronología: una línea vertical real con hitos, no iconos. */
.content-process,
.content-timeline {
    display: grid;
    gap: 0;
    margin-block: 2em;
    counter-reset: paso;
    border-left: 1px solid var(--line);
    padding-left: 0;
}

.content-process > *,
.content-timeline > * {
    position: relative;
    padding: 0 0 1.9em 2.2em;
}

.content-process > *::before,
.content-timeline > *::before {
    counter-increment: paso;
    content: counter(paso, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    background: var(--paper);
    border: 1px solid var(--gold);
    color: var(--navy);
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.content-process > *:last-child,
.content-timeline > *:last-child {
    padding-bottom: 0;
}

.content-process h3,
.content-timeline h3 {
    margin-bottom: 0.3em;
}

/* Preguntas frecuentes: acordeón de filetes, sin tarjetas apiladas. */
.content-faq {
    margin-block: 2em;
    border-top: 1px solid var(--line);
}

.content-faq details {
    border-bottom: 1px solid var(--line);
}

.content-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 1.1em 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 600;
}

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

.content-faq summary::after {
    content: "+";
    flex: none;
    font-family: var(--font-ui);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--gold);
    transition: transform 0.2s ease;
}

.content-faq details[open] summary::after {
    transform: rotate(45deg);
}

.content-faq details > *:not(summary) {
    padding-bottom: 1.3em;
    max-width: var(--measure);
    color: var(--ink-soft);
}

.content-checklist {
    display: grid;
    gap: 0.75em;
    margin-block: 1.6em;
    padding: 0;
    list-style: none;
}

.content-checklist li {
    position: relative;
    padding-left: 1.9em;
}

.content-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 11px;
    height: 6px;
    border-left: 1.5px solid var(--navy);
    border-bottom: 1.5px solid var(--navy);
    transform: rotate(-45deg);
}

/* Cita y testimonio: comilla volada en serifa, tratada como ornamento medido. */
.content-quote,
.content-testimonial {
    position: relative;
    margin-block: 2.2em;
    padding: clamp(24px, 3vw, 36px) 0 clamp(24px, 3vw, 36px) clamp(28px, 4vw, 56px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
    line-height: 1.42;
    color: var(--ink);
}

.content-quote::before,
.content-testimonial::before {
    content: "\201C";
    position: absolute;
    left: 0;
    top: 0.1em;
    font-family: var(--font-display);
    font-size: 4.2rem;
    line-height: 1;
    color: var(--gold-soft);
}

.content-quote cite,
.content-testimonial cite {
    display: block;
    margin-top: 0.9em;
    font-family: var(--font-ui);
    font-size: var(--step-small);
    font-style: normal;
    color: var(--ink-faint);
}

/* Avisos: banda de color a la izquierda y fondo apenas teñido. */
.content-notice,
.content-legal-notice,
.content-urgent-notice,
.content-temporary-banner,
.content-case-note,
.content-deadline,
.article-notice {
    margin-block: 1.8em;
    padding: 1.15em 1.4em;
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    background: var(--accent-soft);
    font-size: 0.96rem;
    color: var(--ink-soft);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.content-urgent-notice,
.content-deadline {
    border-left-color: var(--navy);
    background: var(--brand-soft);
}

.content-legal-notice,
.article-notice {
    font-size: var(--step-small);
    background: var(--paper-sunken);
    border-left-color: var(--line-strong);
}

/* Precios */
.content-price-card {
    display: grid;
    gap: 0.6em;
}

.content-price-card strong {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem);
    font-weight: 600;
    line-height: 1;
    color: var(--navy);
    font-variant-numeric: tabular-nums lining-nums;
}

.content-price-note,
.content-price-side {
    font-size: var(--step-small);
    color: var(--ink-faint);
}

/* Imágenes y galerías */
.content-image,
.content-gallery,
.content-logos,
.content-profile-photo,
.content-media-link {
    margin-block: 1.8em;
}

.content-image img,
.content-gallery img,
.content-profile-photo img {
    display: block;
    width: 100%;
    border-radius: var(--radius);
}

.content-image-cover img {
    object-fit: cover;
    height: 100%;
}

.content-image-contain img {
    object-fit: contain;
}

.content-ratio-square img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.content-ratio-portrait img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.content-ratio-landscape img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.content-ratio-wide img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.content-gallery,
.content-logo-images,
.content-team-photos {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.content-logos img,
.content-logo-images img {
    filter: grayscale(1);
    opacity: 0.62;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.content-logos img:hover,
.content-logo-images img:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* Índice lateral y migas */
.content-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin-block: 1.4em;
    font-size: var(--step-small);
    color: var(--ink-faint);
}

.content-breadcrumbs a {
    text-decoration: none;
}

.content-breadcrumbs a:hover {
    text-decoration: underline;
}

.content-page-index,
.content-sticky-index,
.article-toc {
    margin-block: 2em;
    padding: 1.3em 1.5em;
    background: var(--paper-sunken);
    border-left: 2px solid var(--gold);
}

.content-page-index strong,
.article-toc strong {
    display: block;
    margin-bottom: 0.7em;
    font-family: var(--font-ui);
    font-size: var(--step-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.content-page-index ol,
.article-toc ol {
    margin: 0;
    padding-left: 1.3em;
    display: grid;
    gap: 0.45em;
    font-size: 0.94rem;
}

.content-page-index a,
.article-toc a {
    text-decoration: none;
    color: var(--ink-soft);
}

.content-page-index a:hover,
.article-toc a:hover {
    color: var(--navy);
    text-decoration: underline;
}

.article-toc .level-3 {
    margin-left: 1em;
    font-size: 0.88rem;
}

.content-sticky-index {
    position: sticky;
    top: 104px;
}

/* Cuenta atrás, pestañas, carrusel y descargas */
.content-countdown {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6em;
    margin-block: 1.5em;
}

.content-countdown-value {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
    font-weight: 600;
    color: var(--navy);
    font-variant-numeric: tabular-nums lining-nums;
}

.content-countdown-label {
    font-size: var(--step-label);
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.content-tabs {
    display: grid;
    gap: 1.2em;
    margin-block: 1.8em;
}

.content-carousel-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}

.content-carousel-track > * {
    flex: 0 0 min(320px, 82%);
    scroll-snap-align: start;
}

.content-carousel-help {
    font-size: var(--step-small);
    color: var(--ink-faint);
}

.content-download,
.content-map-link,
.content-media-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.85em 1.2em;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 550;
}

.content-download:hover,
.content-map-link:hover {
    border-color: var(--navy);
    background: var(--brand-soft);
}

.content-mobile-actions,
.content-floating-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 1.4em;
}

.content-contact-short,
.content-office-contact > div,
.content-office-hours > div {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    margin-top: 1.4em;
}

.content-office-contact > div > *,
.content-office-hours > div > * {
    display: grid;
    gap: 0.3em;
    padding: 1.15em 1.3em;
    margin: 0;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line);
    text-decoration: none;
}

.content-office-contact strong,
.content-office-hours strong {
    font-family: var(--font-ui);
    font-size: var(--step-label);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.content-office-contact a:hover {
    background: var(--brand-soft);
}

.content-office-hours small {
    display: block;
    margin-top: 0.9em;
    color: var(--ink-faint);
}

/* Alineaciones y tamaños de texto declarados por el constructor */
.content-text-center {
    text-align: center;
}

.content-text-left {
    text-align: left;
}

.content-text-right {
    text-align: right;
}

.content-text-small {
    font-size: var(--step-small);
}

.content-text-display {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   7. Utilidades del constructor visual (clases web-*)
   Son las opciones que el editor guarda en cada bloque. Deben responder de
   forma predecible dentro del sistema, sin introducir un lenguaje aparte.
   -------------------------------------------------------------------------- */
.web-tone-soft {
    background: var(--paper-sunken);
}

.web-tone-legal {
    background: var(--brand-soft);
    border-block: 1px solid var(--brand-line);
}

.web-tone-accent {
    background: var(--accent-soft);
}

.web-tone-minimal {
    background: transparent;
}

.web-tone-dark {
    background: var(--ink);
    color: var(--paper);
    --ink: var(--paper);
    --ink-soft: color-mix(in srgb, var(--paper) 76%, #000);
    --ink-faint: color-mix(in srgb, var(--paper) 58%, #000);
    --line: color-mix(in srgb, var(--paper) 20%, transparent);
    --line-soft: color-mix(in srgb, var(--paper) 12%, transparent);
    --surface: color-mix(in srgb, #000 12%, transparent);
}

.web-tone-soft,
.web-tone-legal,
.web-tone-accent,
.web-tone-dark {
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
}

/* Presets del editor: variaciones de tono ya nombradas en el constructor. */
.web-preset-classic {
    background: var(--paper-raised);
    border-block: 1px solid var(--line);
}

.web-preset-corporate {
    background: var(--brand-soft);
}

.web-preset-minimal {
    background: transparent;
    border: 0;
}

.web-preset-gold {
    background: var(--accent-soft);
    border-left: 3px solid var(--gold);
}

.web-preset-dark {
    background: var(--ink);
    color: var(--paper);
    --ink: var(--paper);
    --ink-soft: color-mix(in srgb, var(--paper) 76%, #000);
    --line: color-mix(in srgb, var(--paper) 20%, transparent);
}

.web-preset-info {
    background: var(--paper-sunken);
    border-left: 3px solid var(--line-strong);
}

.web-preset-warning {
    background: var(--accent-soft);
    border-left: 3px solid var(--navy);
}

.web-align-center {
    text-align: center;
}

.web-align-center > h2,
.web-align-center > p,
.web-align-center .lead {
    margin-inline: auto;
}

.web-align-center .content-eyebrow,
.web-align-center .eyebrow {
    justify-content: center;
}

.web-align-left {
    text-align: left;
}

.web-width-narrow {
    max-width: 720px;
    margin-inline: auto;
}

.web-width-wide {
    max-width: min(1320px, 100%);
    margin-inline: auto;
}

.web-width-full {
    max-width: none;
}

.web-spacing-none {
    padding-block: 0;
}

.web-spacing-compact {
    padding-block: clamp(20px, 2.6vw, 34px);
}

.web-spacing-large {
    padding-block: clamp(64px, 9vw, 140px);
}

.web-surface-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(22px, 3vw, 36px);
}

.web-surface-outline {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: clamp(22px, 3vw, 36px);
    background: transparent;
}

.web-cols-2 > *,
.web-cols-3 > *,
.web-cols-4 > * {
    min-width: 0;
}

.web-cols-2,
.web-layout-2 {
    display: grid;
    gap: clamp(20px, 3vw, 40px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.web-cols-3,
.web-layout-3 {
    display: grid;
    gap: clamp(20px, 3vw, 40px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.web-cols-4,
.web-layout-4 {
    display: grid;
    gap: clamp(18px, 2.4vw, 32px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.web-layout-sidebar-left {
    display: grid;
    gap: clamp(24px, 4vw, 56px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
}

.web-layout-sidebar-right {
    display: grid;
    gap: clamp(24px, 4vw, 56px);
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
}

.web-ratio-30-70 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
}

.web-ratio-40-60 {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
}

.web-ratio-60-40 {
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
}

.web-ratio-70-30 {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
}

.web-vertical-start {
    align-items: start;
}

.web-vertical-end {
    align-items: end;
}

.web-height-medium {
    min-height: 56vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.web-height-full {
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.web-radius-none {
    border-radius: 0;
}

.web-radius-soft {
    border-radius: 6px;
}

.web-radius-round {
    border-radius: 16px;
}

.web-shadow-soft {
    box-shadow: 0 10px 30px -22px color-mix(in srgb, var(--ink) 70%, transparent);
}

.web-shadow-strong {
    box-shadow: 0 22px 50px -30px color-mix(in srgb, var(--ink) 80%, transparent);
}

/* Imagen de fondo de sección con velo legible */
.web-has-background-image {
    position: relative;
    isolation: isolate;
}

.web-section-background {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: -2;
    overflow: hidden;
}

.web-section-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.web-has-background-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--velo, color-mix(in srgb, var(--ink) 52%, transparent));
}

.web-overlay-light {
    --velo: color-mix(in srgb, var(--paper) 72%, transparent);
    color: var(--ink);
}

.web-overlay-medium {
    --velo: color-mix(in srgb, var(--ink) 52%, transparent);
    color: var(--paper);
}

.web-overlay-dark {
    --velo: color-mix(in srgb, var(--ink) 76%, transparent);
    color: var(--paper);
}

.web-overlay-medium h1,
.web-overlay-medium h2,
.web-overlay-dark h1,
.web-overlay-dark h2,
.web-overlay-medium p,
.web-overlay-dark p {
    color: inherit;
}

.web-media-right {
    direction: rtl;
}

.web-media-right > * {
    direction: ltr;
}

.web-hide-desktop {
    display: none;
}

@media (max-width: 760px) {
    .web-hide-desktop {
        display: revert;
    }

    .web-hide-mobile {
        display: none !important;
    }

    .web-cols-2,
    .web-cols-3,
    .web-cols-4,
    .web-layout-2,
    .web-layout-3,
    .web-layout-4,
    .web-layout-sidebar-left,
    .web-layout-sidebar-right,
    .web-ratio-30-70,
    .web-ratio-40-60,
    .web-ratio-60-40,
    .web-ratio-70-30 {
        grid-template-columns: minmax(0, 1fr);
    }

    .web-mobile-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .web-mobile-compact {
        padding-block: 22px;
        gap: 14px;
    }

    .web-mobile-roomy {
        padding-block: 52px;
        gap: 32px;
    }

    .web-mobile-reverse {
        display: flex;
        flex-direction: column-reverse;
    }

    .web-mobile-scroll {
        display: flex;
        overflow-x: auto;
        gap: 14px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .web-mobile-scroll > * {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }

    .web-media-right {
        direction: ltr;
    }
}

@media (max-width: 980px) and (min-width: 761px) {
    .web-cols-4,
    .web-layout-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .web-cols-3,
    .web-layout-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   8. Formularios
   Campos con línea inferior marcada: la referencia es el formulario impreso
   que se rellena, no el campo redondeado de una aplicación.
   -------------------------------------------------------------------------- */
.content-contact,
.public-contact-form,
.content-appointment,
.content-callback {
    margin-block: 2em;
}

.contact-form-grid {
    display: grid;
    gap: 18px 22px;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    margin-block: 1.5em;
}

.contact-form-grid > label:not(.contact-consent):not(.contact-trap),
.public-contact-form label:not(.contact-consent):not(.contact-trap) {
    display: grid;
    gap: 7px;
    font-size: var(--step-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.contact-form-grid > label:has(textarea),
.contact-form-grid > .contact-consent {
    grid-column: 1 / -1;
}

/* Por exclusión, no por lista: varios campos del CRM se emiten como
   <input name="…"> sin atributo type (el nombre del formulario de contacto y
   el del boletín, entre otros). Un selector input[type="text"] no los alcanza
   y quedaban sin borde ni altura. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="image"]),
select,
textarea {
    width: 100%;
    padding: 11px 12px;
    font: inherit;
    font-size: 0.98rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom: 2px solid var(--line-strong);
    border-radius: var(--radius) var(--radius) 0 0;
    transition: border-color 0.18s ease, background 0.18s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--line);
    border-bottom-color: var(--navy);
    background: var(--paper-raised);
}

textarea {
    min-height: 148px;
    resize: vertical;
    line-height: 1.6;
}

.contact-consent {
    display: block !important;
    position: relative;
    padding-left: 28px;
    font-size: var(--step-small);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-soft);
}

.contact-consent input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.3em;
    width: auto;
    margin: 0;
    accent-color: var(--navy);
}

.contact-consent a {
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.contact-legal-note {
    font-size: var(--step-small);
    color: var(--ink-faint);
    max-width: var(--measure);
}

.contact-trap {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form-status,
.comment-status,
.subscription-status,
.subscription-result {
    margin-block: 1.2em;
    padding: 0.95em 1.2em;
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-faint);
    background: var(--paper-sunken);
    font-size: 0.95rem;
}

.contact-form-status.success,
.comment-status.success,
.subscription-status.success,
.subscription-result.success {
    border-left-color: var(--navy);
    background: var(--brand-soft);
}

.contact-form-status.error,
.comment-status.error,
.subscription-status.error,
.subscription-result.error,
.service-error {
    border-left-color: #9d2f2f;
    background: color-mix(in srgb, #9d2f2f 7%, var(--paper));
    color: color-mix(in srgb, #9d2f2f 78%, var(--ink));
}

/* --------------------------------------------------------------------------
   9. Actualidad: portada, tarjetas y artículo
   -------------------------------------------------------------------------- */
.blog-hero {
    padding-block: clamp(48px, 7vw, 92px) var(--band-tight);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(to bottom, var(--paper-raised), var(--paper));
}

.blog-hero h1 {
    font-size: var(--step-display);
    max-width: 18ch;
    line-height: 1.04;
    letter-spacing: -0.028em;
}

.blog-hero > div > p {
    max-width: 58ch;
    color: var(--ink-soft);
    font-size: 1.08rem;
}

.blog-search {
    display: flex;
    gap: 10px;
    margin-top: 1.8em;
    max-width: 460px;
}

.blog-search input {
    flex: 1;
}

.blog-explore {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px clamp(28px, 5vw, 64px);
    padding-block: 1.5em;
    border-bottom: 1px solid var(--line);
    font-size: var(--step-small);
}

.blog-explore > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
}

.blog-explore strong {
    flex: 0 0 100%;
    margin-bottom: 2px;
    font-family: var(--font-ui);
    font-size: var(--step-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.blog-explore a {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}

/* El recuento acompaña al tema como una cifra volada, no como una etiqueta. */
.blog-explore a span {
    margin-left: 2px;
    font-size: 0.76em;
    vertical-align: super;
    color: var(--gold);
    font-variant-numeric: lining-nums;
}

.blog-explore a:hover {
    color: var(--navy);
    border-bottom-color: var(--brand-line);
}

.blog-rss-link {
    margin-left: auto;
    align-self: center;
}

/* Rejilla editorial: filetes compartidos, la primera entrada a doble ancho. */
.blog-grid {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    margin-block: var(--band-tight);
}

.post-card {
    display: flex;
    flex-direction: column;
    gap: 0.55em;
    padding: clamp(24px, 3vw, 34px);
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--line);
    transition: background 0.2s ease;
}

.post-card:hover {
    background: var(--paper-raised);
}

.post-card > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 1em;
}

.post-card .post-category {
    margin: 0;
    text-decoration: none;
}

.post-card time {
    font-size: var(--step-small);
    color: var(--ink-faint);
    font-variant-numeric: oldstyle-nums;
}

.post-card h2 {
    margin: 0.25em 0 0;
    font-size: var(--step-3);
    line-height: 1.22;
}

.post-card h2 a {
    text-decoration: none;
}

.post-card h2 a:hover {
    color: var(--navy);
}

.post-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.96rem;
}

.post-card .text-link {
    margin-top: auto;
    padding-top: 1em;
    align-self: flex-start;
}

.post-card-image {
    display: block;
    margin: calc(clamp(24px, 3vw, 34px) * -1) calc(clamp(24px, 3vw, 34px) * -1) 1.2em;
    overflow: hidden;
}

.post-card-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.post-card:hover .post-card-image img {
    transform: scale(1.03);
}

@media (min-width: 900px) {
    .post-card-featured {
        grid-column: span 2;
    }

    .post-card-featured h2 {
        font-size: var(--step-2);
        max-width: 22ch;
    }
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: var(--band-tight);
    border-top: 1px solid var(--line);
    font-size: 0.92rem;
}

.pagination a {
    text-decoration: none;
    font-weight: 600;
    color: var(--navy);
}

.pagination span {
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

.empty-card {
    grid-column: 1 / -1;
    text-align: center;
}

/* Artículo */
.article-page {
    padding-block: clamp(38px, 5vw, 72px) var(--band);
}

.article-page > header {
    max-width: var(--measure);
    padding-bottom: 1.8em;
    border-bottom: 1px solid var(--line);
    margin-bottom: 2.2em;
}

.article-page > header h1 {
    font-size: var(--step-1);
    line-height: 1.06;
    letter-spacing: -0.026em;
    margin-block: 0.35em 0.4em;
}

.article-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1.4em;
    margin-top: 1.4em;
    font-size: var(--step-small);
    color: var(--ink-faint);
}

.article-byline time {
    font-variant-numeric: oldstyle-nums;
}

.article-featured {
    margin: 2.2em 0 0;
}

.article-featured img {
    display: block;
    width: 100%;
    border-radius: var(--radius);
}

.article-featured figcaption {
    margin-top: 0.7em;
    font-size: var(--step-small);
    color: var(--ink-faint);
}

.article-content {
    max-width: var(--measure);
}

/* Capitular: apertura de artículo propia de la publicación jurídica. */
.article-content > p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-display);
    font-size: 3.4em;
    line-height: 0.82;
    font-weight: 600;
    color: var(--navy);
    padding: 0.06em 0.12em 0 0;
}

.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    z-index: 60;
}

.reading-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--gold);
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block: 2.4em 1.6em;
}

.article-tags a {
    padding: 5px 11px;
    border: 1px solid var(--line);
    font-size: var(--step-small);
    color: var(--ink-soft);
    text-decoration: none;
}

.article-tags a:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.article-share,
.article-sources,
.article-review,
.article-series,
.article-author,
.author-bar,
.article-cta {
    max-width: var(--measure);
    margin-block: 2em;
    padding-top: 1.6em;
    border-top: 1px solid var(--line);
    font-size: 0.96rem;
}

.article-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.article-share a,
.article-share button {
    padding: 8px 14px;
    border: 1px solid var(--line);
    background: none;
    font: inherit;
    font-size: var(--step-small);
    color: var(--ink-soft);
    text-decoration: none;
    cursor: pointer;
}

.article-share a:hover,
.article-share button:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.article-author,
.author-bar {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.article-author img,
.author-bar img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 50%;
    flex: none;
}

.article-sources ol,
.article-sources ul {
    padding-left: 1.2em;
    font-size: var(--step-small);
    color: var(--ink-soft);
}

.article-cta {
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius);
    padding: clamp(22px, 3vw, 32px);
}

.related-posts {
    margin-top: var(--band);
    padding-top: var(--band-tight);
    border-top: 1px solid var(--line-strong);
}

.related-posts > h2 {
    font-size: var(--step-3);
    margin-bottom: 1.2em;
}

/* Comentarios */
.article-comments {
    max-width: var(--measure);
    margin-top: var(--band);
    padding-top: var(--band-tight);
    border-top: 1px solid var(--line-strong);
}

.comment {
    padding: 1.3em 0;
    border-bottom: 1px solid var(--line-soft);
}

.comment-reply {
    margin-left: 1.8em;
    padding-left: 1.2em;
    border-left: 2px solid var(--line);
}

.comment-form {
    display: grid;
    gap: 14px;
    margin-top: 1.8em;
}

.comment-empty,
.comment-closed,
.comment-limit {
    padding: 1.1em 1.3em;
    background: var(--paper-sunken);
    border-left: 2px solid var(--line-strong);
    font-size: var(--step-small);
    color: var(--ink-soft);
}

.comment-pagination {
    display: flex;
    gap: 14px;
    margin-top: 1.4em;
    font-size: var(--step-small);
}

/* Boletín */
.blog-newsletter,
.content-newsletter {
    margin-block: var(--band-tight);
    padding: clamp(26px, 4vw, 44px);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius);
}

.blog-newsletter h2 {
    font-size: var(--step-3);
    margin-bottom: 0.4em;
}

.blog-newsletter p {
    max-width: 54ch;
    color: var(--ink-soft);
    font-size: 0.96rem;
}

.blog-newsletter form,
.content-newsletter form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 16px 20px;
    align-items: end;
    margin-top: 1.6em;
    max-width: 640px;
}

/* Etiqueta encima del campo. El señuelo antispam no debe ocupar una celda. */
.blog-newsletter form > label:not(.contact-consent):not(.contact-trap),
.content-newsletter form > label:not(.contact-consent):not(.contact-trap) {
    display: grid;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: var(--step-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Temas, consentimiento, botón y nota ocupan el ancho completo. */
.blog-newsletter fieldset,
.blog-newsletter .contact-consent,
.blog-newsletter button,
.blog-newsletter small,
.blog-newsletter .subscription-status,
.content-newsletter fieldset,
.content-newsletter .contact-consent,
.content-newsletter button,
.content-newsletter small {
    grid-column: 1 / -1;
}

.blog-newsletter fieldset,
.content-newsletter fieldset {
    margin: 0;
    padding: 10px 14px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--paper) 55%, #fff);
}

.blog-newsletter legend,
.content-newsletter legend {
    padding: 0 6px;
    font-family: var(--font-ui);
    font-size: var(--step-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Las casillas de temas fluyen en línea y se reparten solas. */
.blog-newsletter fieldset label,
.content-newsletter fieldset label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 5px 18px 5px 0;
    font-size: 0.93rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    white-space: nowrap;
}

.blog-newsletter fieldset input[type="checkbox"],
.content-newsletter fieldset input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--navy);
}

.blog-newsletter button,
.content-newsletter button {
    justify-self: start;
}

.blog-newsletter small,
.content-newsletter small {
    color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   10. Pie de página
   -------------------------------------------------------------------------- */
.footer-cta {
    background: var(--ink);
    color: var(--paper);
    padding-block: var(--band-tight);
}

.footer-cta > .site-shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.footer-cta span {
    display: block;
    font-size: var(--step-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--gold) 76%, var(--paper));
    margin-bottom: 0.7em;
}

.footer-cta h2 {
    margin: 0;
    font-size: var(--step-2);
    max-width: 20ch;
}

.footer-cta p {
    margin: 0.6em 0 0;
    max-width: 52ch;
    color: color-mix(in srgb, var(--paper) 72%, #000);
}

.footer-cta > .site-shell > a {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    min-height: 48px;
    padding: 0 26px;
    background: var(--paper);
    color: var(--ink);
    border-radius: var(--button-radius);
    font-weight: 600;
    text-decoration: none;
    flex: none;
}

.footer-cta > .site-shell > a:hover {
    background: var(--gold-soft);
}

.site-footer {
    border-top: 1px solid var(--line);
    background: var(--paper-sunken);
    padding-top: var(--band-tight);
}

.footer-grid {
    display: grid;
    gap: clamp(28px, 4vw, 56px);
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr) minmax(0, 1.2fr);
    padding-bottom: var(--band-tight);
}

.footer-without-navigation .footer-grid,
.footer-grid.footer-without-navigation {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr);
}

.footer-grid.footer-without-contact {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr);
}

.footer-brand h2 {
    font-size: var(--step-3);
    margin-block: 0 0.5em;
}

.footer-brand p {
    color: var(--ink-soft);
    font-size: 0.95rem;
    max-width: 40ch;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 1.2em;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: var(--step-small);
    color: var(--ink-soft);
    text-decoration: none;
}

.footer-social a:hover {
    color: var(--navy);
    text-decoration: underline;
}

.footer-navigation {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

.footer-navigation h3 {
    margin-bottom: 0.9em;
    font-family: var(--font-ui);
    font-size: var(--step-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

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

.footer-navigation div {
    display: grid;
    gap: 0.6em;
}

.footer-navigation div a {
    font-size: 0.93rem;
    color: var(--ink-soft);
    text-decoration: none;
}

.footer-navigation div a:hover,
.footer-contact a:hover {
    color: var(--navy);
    text-decoration: underline;
}

.footer-contact {
    font-style: normal;
    display: grid;
    gap: 1em;
    align-content: start;
}

.footer-contact h3 {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--step-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.footer-contact a,
.footer-contact p {
    display: grid;
    gap: 3px;
    margin: 0;
    text-decoration: none;
    font-size: 0.95rem;
}

.footer-contact span {
    font-size: var(--step-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.footer-contact strong {
    font-weight: 600;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding-block: 1.3em;
    border-top: 1px solid var(--line);
    font-size: var(--step-small);
    color: var(--ink-faint);
}

.footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

.footer-bottom a,
.cookie-settings-link {
    color: var(--ink-faint);
    text-decoration: none;
    font-size: var(--step-small);
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.footer-bottom a:hover,
.cookie-settings-link:hover {
    color: var(--navy);
    text-decoration: underline;
}

.footer-style-compact .footer-navigation,
.footer-style-compact .footer-social {
    display: none;
}

.footer-style-compact .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 860px) {
    .footer-grid,
    .footer-grid.footer-without-contact,
    .footer-grid.footer-without-navigation,
    .footer-style-compact .footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------------------
   11. Cookies, avisos del administrador y páginas de servicio
   -------------------------------------------------------------------------- */
.cookie-panel {
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: var(--gutter);
    z-index: 120;
    max-width: 460px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-top: 3px solid var(--navy);
    box-shadow: var(--shadow-overlay);
    padding: clamp(20px, 3vw, 28px);
}

.cookie-panel h2 {
    font-size: var(--step-3);
    margin-bottom: 0.4em;
}

.cookie-panel p {
    font-size: var(--step-small);
    color: var(--ink-soft);
}

.cookie-panel > div > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block: 1.2em 0.8em;
}

.cookie-panel button:not(.cookie-accept) {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--line-strong);
    background: none;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    border-radius: var(--button-radius);
    cursor: pointer;
}

.cookie-panel button:not(.cookie-accept):hover {
    border-color: var(--navy);
    background: var(--brand-soft);
}

.cookie-panel section {
    display: grid;
    gap: 10px;
    padding-top: 1em;
    border-top: 1px solid var(--line);
    margin-top: 0.6em;
}

.cookie-panel label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--step-small);
}

.cookie-panel label input {
    width: auto;
    accent-color: var(--navy);
}

.cookie-panel > div > a {
    display: inline-block;
    margin-top: 1em;
    font-size: var(--step-small);
    color: var(--ink-faint);
}

.admin-maintenance-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    padding: 11px var(--gutter);
    background: var(--ink);
    color: var(--paper);
    font-size: var(--step-small);
}

.admin-maintenance-banner strong {
    font-weight: 700;
}

.admin-maintenance-banner span {
    color: color-mix(in srgb, var(--paper) 70%, #000);
}

.admin-maintenance-banner a {
    margin-left: auto;
    color: var(--gold-soft);
}

.preview-draft-banner {
    background: var(--navy);
}

.not-found,
.service-error-box,
.legal-page,
.subscription-result {
    padding-block: clamp(56px, 9vw, 120px);
    max-width: var(--measure);
}

.not-found h1,
.service-error-box h1 {
    font-size: var(--step-1);
}

.not-found .primary-link {
    margin-top: 1.4em;
}

.legal-page h1 {
    font-size: var(--step-1);
    margin-bottom: 0.8em;
}

.maintenance-hero {
    padding-block: clamp(64px, 10vw, 140px);
}

.maintenance-grid {
    display: grid;
    gap: clamp(28px, 5vw, 64px);
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: center;
}

.maintenance-grid h1 {
    font-size: var(--step-display);
    line-height: 1.04;
    letter-spacing: -0.028em;
    max-width: 16ch;
}

.maintenance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 1.8em;
}

.maintenance-grid aside {
    padding: clamp(24px, 3vw, 36px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
}

.maintenance-grid aside span {
    display: block;
    font-size: var(--step-label);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.8em;
}

.maintenance-grid aside strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-3);
}

.maintenance-grid aside p {
    margin: 0.4em 0 0;
    font-size: var(--step-small);
    color: var(--ink-faint);
}

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

.preview,
.stale {
    outline: 1px dashed var(--gold);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   12. Impresión y preferencias del sistema
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    body {
        background: #fff;
        color: #000;
        border-top: 0;
        font-size: 11pt;
    }

    .site-header,
    .mobile-nav,
    .cookie-panel,
    .footer-cta,
    .reading-progress,
    .article-share,
    .blog-search,
    .skip-link,
    .admin-maintenance-banner,
    .related-posts,
    .article-comments {
        display: none !important;
    }

    .site-footer {
        border-top: 1px solid #000;
        background: none;
    }

    a {
        text-decoration: underline;
    }

    .prose a::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #444;
    }
}

/* --------------------------------------------------------------------------
   13. Piezas restantes del contrato
   -------------------------------------------------------------------------- */

/* Llamada a la acción dentro del contenido: banda con filete de acento,
   alineada a la izquierda como el resto del documento. */
.content-cta {
    display: grid;
    gap: 0.9em;
    justify-items: start;
    margin-block: var(--band-tight);
    padding: clamp(26px, 4vw, 44px);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.content-cta h2,
.content-cta h3 {
    margin: 0;
    font-size: var(--step-3);
    max-width: 24ch;
}

.content-cta p {
    margin: 0;
    max-width: 56ch;
    color: var(--ink-soft);
}

.content-cta.web-align-center {
    justify-items: center;
}

/* Últimas publicaciones: hereda la rejilla de tarjetas y solo ajusta el
   tratamiento de la categoría, que aquí actúa como ladillo de la tarjeta. */
.content-latest-posts .content-cards {
    margin-top: 1.8em;
}

.content-latest-posts .post-category {
    color: var(--ink-faint);
    margin-bottom: 0.35em;
}

.content-latest-posts .content-card h3 a {
    text-decoration: none;
}

/* Índice del artículo: los niveles se emiten como li.h2 / li.h3. */
.article-toc li.h2,
.content-page-index li.level-2 {
    font-weight: 550;
}

.article-toc li.h3,
.content-page-index li.level-3 {
    margin-left: 1.1em;
    font-size: 0.9rem;
    color: var(--ink-faint);
}

/* Volver arriba, en la línea legal del pie. */
.footer-back-top {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-left: auto;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: var(--button-radius);
}

.footer-back-top:hover {
    border-color: var(--navy);
    text-decoration: none !important;
}

/* Vista de administrador. El aviso NO se fija: pertenece al flujo y sube con
   el scroll, de modo que la cabecera debe adherirse a 0. Desplazarla a la
   altura del aviso dejaba un hueco fijo por el que se veía pasar el contenido. */
.admin-maintenance-banner {
    position: relative;
    z-index: 45;
}

@media (max-width: 700px) {
    .content-sticky-index {
        position: static;
    }
}

/* --------------------------------------------------------------------------
   14. Precedencia de los componentes dentro de la prosa
   El cuerpo de una página lleva la clase .prose, de modo que reglas como
   «.prose a» o «.prose blockquote» tienen más especificidad que las clases de
   componente («.content-button», «.content-quote»). Sin este bloque un botón
   heredaría el color de enlace y quedaría burdeos sobre burdeos. Se declara al
   final para que la intención sea explícita y no dependa del orden anterior.
   -------------------------------------------------------------------------- */
.prose a.content-button,
.prose a.primary-link,
.prose a.header-contact {
    color: var(--on-brand);
    text-decoration: none;
}

.prose a.content-button-outline,
.prose a.secondary-link,
.prose a.clear-filter,
.prose a.content-download,
.prose a.content-map-link {
    color: var(--ink);
    text-decoration: none;
}

.prose a.text-link {
    color: var(--navy);
    text-decoration: none;
}

.prose a.back-link {
    color: var(--ink-faint);
    text-decoration: none;
}

.prose a.post-category,
.prose .content-card h3 a,
.prose .content-breadcrumbs a,
.prose .content-page-index a,
.prose .content-office-contact a,
.prose .article-tags a {
    text-decoration: none;
}

.prose blockquote.content-quote,
.prose blockquote.content-testimonial {
    padding-left: clamp(28px, 4vw, 56px);
    border-left: 0;
    color: var(--ink);
    font-style: normal;
}

.prose figure.web-section-background {
    margin: 0;
}

.prose .content-cards,
.prose .content-stats,
.prose .content-contact-short,
.prose .content-office-contact > div,
.prose .content-office-hours > div {
    max-width: none;
}

/* --------------------------------------------------------------------------
   15. Correcciones responsivas de la cabecera
   Las reglas de botón del apartado 4 se declaran después del primer bloque
   responsivo y devolvían «display:inline-flex» a .header-contact en móvil,
   que empujaba el botón de menú fuera de la pantalla. Se corrige aquí, al
   final, para que la última palabra la tenga la consulta de medios.
   -------------------------------------------------------------------------- */
@media (max-width: 940px) {
    .site-header .header-contact,
    .site-header .desktop-nav {
        display: none;
    }

    .header-actions {
        margin-left: auto;
    }
}

@media (max-width: 560px) {
    .brand small {
        display: none;
    }

    .brand strong {
        font-size: 1rem;
    }

    .brand-mark {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .header-inner {
        gap: 12px;
    }

    .footer-cta > .site-shell > a,
    .content-buttons > * {
        width: 100%;
    }

    .article-content > p:first-of-type::first-letter {
        font-size: 2.9em;
    }
}