/* ==========================================================================
   MAGRANIT — hoja compartida
   1.  Tipografías locales
   2.  Variables
   3.  Reset y capa base
   4.  Utilidades transversales
   5.  Cabecera global — #site_header
   6.  Pie global — #site_footer
   7.  Héroe de página interior
   8.  Banda de llamada a la acción
   9.  Banda de marcas
   10. Mosaico de proyectos
   11. Formulario de presupuesto
   12. Documento legal
   13. Movimiento reducido
   ========================================================================== */


/* ==========================================================
   1. TIPOGRAFÍAS LOCALES
   ========================================================== */

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/playfair-display-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/playfair-display-italic-variable.woff2") format("woff2");
    font-style: italic;
    font-weight: 500 700;
    font-display: swap;
}


/* ==========================================================
   2. VARIABLES
   ========================================================== */

:root {
    /* Marca — extraída del logotipo */
    --primary-color: #a81e2e;
    --primary-dark: #8e1725;
    --primary-darker: #74121d;
    --primary-light: #f8eeef;

    --secondary-color: #1b5aa0;
    --secondary-light: #eef2f8;
    --accent-color: #e0a80c;
    --accent-light: #f2c14e;
    --accent-soft: #faf3df;

    /* Texto */
    --text-color: #211f1d;
    --title-color: #211f1d;
    --body-color: #4a4642;
    --muted-color: #6b6763;
    --inverse-color: #f7f5f1;
    --inverse-muted-color: #a9a399;

    /* Fondos */
    --background-color: #f4f2ee;
    --surface-color: #eae6df;
    --surface-alt-color: #fcfbf8;
    --dark-color: #1c1a19;
    --dark-alt-color: #141211;
    --overlay-color: rgba(18, 16, 15, 0.62);

    /* Bordes */
    --border-color: rgba(33, 31, 29, 0.22);
    --divider-color: rgba(33, 31, 29, 0.12);
    --inverse-border-color: rgba(217, 212, 204, 0.18);

    /* Estados */
    --success-color: #12805c;
    --error-color: #c0202c;

    /* Tipografía */
    --primary-font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --secondary-font: "Playfair Display", Georgia, "Times New Roman", serif;

    --base-font-size: 1rem;
    --small-font-size: 0.875rem;
    --large-font-size: 1.125rem;

    --h1-size: clamp(2.5rem, 5.6vw, 5rem);
    --h2-size: clamp(1.875rem, 3.9vw, 3.25rem);
    --h3-size: clamp(1.375rem, 2.1vw, 1.75rem);
    --h4-size: clamp(1rem, 1.35vw, 1.1875rem);

    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    --line-height-tight: 1.1;
    --line-height-base: 1.55;
    --line-height-relaxed: 1.75;

    --tracking-tight: -0.024em;
    --tracking-normal: 0;
    --tracking-wide: 0.1em;
    --tracking-widest: 0.22em;

    /* Espaciado */
    --spacing-3xs: 0.25rem;
    --spacing-2xs: 0.375rem;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;

    --section-padding-y: clamp(4rem, 9vw, 8.25rem);
    --section-padding-y-sm: clamp(3rem, 6.4vw, 6rem);
    --section-padding-x: clamp(1.25rem, 5vw, 3.5rem);

    --container-width: 1440px;
    --container-narrow: 62rem;

    /* Radios */
    --radius-sm: 3px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-full: 9999px;

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(45, 43, 43, 0.08);
    --shadow-md: 0 4px 14px rgba(45, 43, 43, 0.16);
    --shadow-lg: 0 16px 38px rgba(45, 43, 43, 0.14);
    --shadow-xl: 0 18px 42px rgba(45, 43, 43, 0.18);

    /* Transiciones */
    --transition-fast: 150ms ease-out;
    --transition-base: 250ms ease-out;
    --transition-slow: 450ms cubic-bezier(0.22, 1, 0.36, 1);

    /* Formularios */
    --field-height: 3.25rem;
    --field-radius: var(--radius-sm);
    --field-padding-inline: 1rem;
    --field-icon-size: 20px;
}


/* ==========================================================
   3. RESET Y CAPA BASE
   ========================================================== */

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

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

body {
    font-family: var(--primary-font);
    font-size: var(--base-font-size);
    line-height: var(--line-height-base);
    color: var(--text-color);
    background-color: var(--background-color);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
    font-family: var(--secondary-font);
    font-weight: var(--font-medium);
    line-height: var(--line-height-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--title-color);
    text-wrap: balance;
}

h1 {
    font-size: var(--h1-size);
    line-height: 1.02;
    letter-spacing: -0.028em;
}

h2 {
    font-size: var(--h2-size);
    line-height: 1.06;
}

h3 {
    font-size: var(--h3-size);
    font-weight: var(--font-semibold);
    line-height: 1.18;
}

h4 {
    font-size: var(--h4-size);
    line-height: 1.22;
}

p {
    line-height: var(--line-height-relaxed);
    text-wrap: pretty;
}

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

img {
    display: block;
    max-width: 100%;
    height: auto;
}

svg {
    display: block;
}

ul,
ol {
    list-style: none;
}

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

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

table {
    border-collapse: collapse;
}

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

::selection {
    background-color: rgba(168, 30, 46, 0.22);
}


/* ==========================================================
   4. UTILIDADES TRANSVERSALES
   ========================================================== */

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

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--spacing-sm);
    z-index: 100;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--primary-color);
    color: var(--inverse-color);
    font-size: var(--small-font-size);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-sm);
}

.skip-link:focus-visible {
    top: var(--spacing-xs);
}

/* Aparición al entrar en pantalla.
   Va aquí, sin anclar a ninguna sección, porque por definición no pertenece a
   ninguna: el efecto es el mismo en las cuarenta y cuatro.

   De partida no se declara nada: un bloque sin tocar se ve. Es
   `scroll-reveal.js` quien pone `data-reveal-armed` justo antes de observar, y
   quien pone `data-revealed` al entrar en pantalla —también por su cuenta a los
   2,5 s, para que nada pueda quedarse oculto para siempre—. Sin JavaScript, sin
   observador o con movimiento reducido no pasa ninguna de las dos cosas y la
   página se ve completa.

   El movimiento se hace con `animation` y no con `transition`, y esa es la
   decisión que sostiene todo lo demás. Estas reglas no van ancladas a ninguna
   sección, así que pesan (0,1,0) y cualquier regla de componente —(1,1,0), un
   `#seccion .clase` cualquiera— les gana. Con transiciones eso era fatal: a un
   botón que declare `transition: background-color` la abreviada le reescribe la
   lista de propiedades y el revelado deja de animarse, y encima el retardo del
   escalonado se le queda pegado y frena su hover para siempre. `animation` es
   un canal aparte que ningún componente usa, así que no hay nada con lo que
   chocar. */
@keyframes reveal-rise {
    from {
        opacity: 0;
        /* Solo `opacity` y `transform`: son las dos que el navegador compone
           sin volver a maquetar la página. */
        transform: translateY(1.875rem);
    }

    to {
        opacity: 1;
        /* `none` y no `translateY(0)`: un transform residual crea un contexto
           de apilamiento que solapa la sección siguiente y rompe los grid. */
        transform: none;
    }
}

/* Las fotografías no aparecen: se asientan. Entran un 5,5 % más grandes y
   bajan a su tamaño, sin desvanecido, porque la foto ya estaba ahí. Todos los
   contenedores que la usan recortan lo que sobra. */
@keyframes reveal-settle {
    from {
        transform: scale(1.055);
    }

    to {
        transform: none;
    }
}

/* Armado solo esconde. De dónde sale el bloque lo dice el fotograma inicial de
   su animación, y `both` lo mantiene durante el retardo y al terminar. */
[data-reveal-armed="true"] {
    opacity: 0;
}

[data-reveal="image"][data-reveal-armed="true"] {
    opacity: 1;
}

[data-revealed="true"] {
    animation: reveal-rise 0.8s cubic-bezier(0.33, 1, 0.68, 1) both;
    /* El turno de cada bloque dentro de su grupo lo escribe el módulo en
       `--reveal-index`; cuánto vale ese turno lo decide la hoja, que es la que
       sabe cuánto dura cada movimiento. Una sección puede rehacer esta cuenta
       para su propia coreografía sin tocar el módulo. */
    animation-delay: calc(var(--reveal-index, 0) * 0.09s);
}

[data-reveal="image"][data-revealed="true"] {
    animation: reveal-settle 1.4s cubic-bezier(0.5, 1, 0.89, 1) both;
}


/* ==========================================================
   5. CABECERA GLOBAL — #site_header
   ========================================================== */

#site_header {
    position: sticky;
    top: 0;
    z-index: 60;
    width: 100%;
    background-color: rgba(244, 242, 238, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 2px solid var(--border-color);
}

#site_header .site-header__container {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.75rem);
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
    padding-block: 0.875rem;
}

#site_header .site-header__logo {
    flex: none;
}

#site_header .site-header__logo-image {
    height: clamp(2.75rem, 4.6vw, 3.625rem);
    width: auto;
}

#site_header .site-header__nav {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* La lista va marcada con `data-h2e-menu`, así que el importador se queda con
   el molde de un item y las entradas las pone después el menú de WordPress. Eso
   es lo que permite que el cliente reordene el menú, y lo que hace que la
   entrada de la página en curso se marque sola en cada página en lugar de
   quedarse congelada en la del molde. */
#site_header .site-header__nav-list {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.1vw, 1.875rem);
}

#site_header .site-header__nav-item {
    display: flex;
}

#site_header .site-header__nav-link {
    padding-bottom: 2px;
    font-size: 0.84375rem;
    font-weight: var(--font-medium);
    letter-spacing: 0.02em;
    color: var(--text-color);
    border-bottom: 2px solid transparent;
    transition: color var(--transition-base), border-color var(--transition-base);
}

#site_header .site-header__nav-link:hover {
    color: var(--primary-color);
}

#site_header .site-header__nav-link[aria-current="page"] {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

#site_header .site-header__button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2xs);
    flex: none;
    padding: 0.8125rem 1.375rem;
    background-color: var(--primary-color);
    color: var(--inverse-color);
    font-size: 0.8125rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base);
}

#site_header .site-header__button:hover {
    background-color: var(--primary-dark);
}

#site_header .site-header__button-icon {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
}

#site_header .site-header__menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.875rem;
    height: 2.875rem;
    margin-left: auto;
    color: var(--text-color);
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-base), color var(--transition-base);
}

#site_header .site-header__menu-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

#site_header .site-header__menu-icon {
    width: 20px;
    height: 20px;
}

/* Menú móvil */
#site_header .site-header__panel {
    flex-direction: column;
    padding: var(--spacing-xs) 0 1.375rem;
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
    border-top: 1px solid var(--divider-color);
}

#site_header .site-header__panel[hidden] {
    display: none;
}

/* Mismo menú que la cabecera, otro molde: el panel se apila y cada entrada
   ocupa el ancho entero para que el borde inferior separe de lado a lado. */
#site_header .site-header__panel-list,
#site_header .site-header__panel-item {
    display: flex;
    flex-direction: column;
}

#site_header .site-header__panel-link {
    padding-block: 0.875rem;
    font-size: 0.9375rem;
    font-weight: var(--font-medium);
    color: var(--text-color);
    border-bottom: 1px solid var(--divider-color);
    transition: color var(--transition-base);
}

#site_header .site-header__panel-link:hover {
    color: var(--primary-color);
}

#site_header .site-header__panel-cta {
    padding: var(--spacing-sm) 0 var(--spacing-3xs);
    font-size: 0.9375rem;
    font-weight: var(--font-semibold);
    color: var(--primary-color);
}

@media (max-width: 1024px) {
    #site_header .site-header__nav,
    #site_header .site-header__button {
        display: none;
    }

    #site_header .site-header__menu-btn {
        display: inline-flex;
    }

    #site_header .site-header__panel {
        display: flex;
    }
}

@media (min-width: 1025px) {
    #site_header .site-header__panel {
        display: none;
    }
}


/* ==========================================================
   6. PIE GLOBAL — #site_footer
   ========================================================== */

#site_footer {
    width: 100%;
    background-color: var(--dark-color);
    color: #d9d4cc;
}

#site_footer .site-footer__container {
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
    padding-block: var(--section-padding-y-sm);
}

#site_footer .site-footer__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: clamp(1.75rem, 4vw, 3.5rem);
}

#site_footer .site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

#site_footer .site-footer__logo {
    height: 3.875rem;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

#site_footer .site-footer__tagline {
    max-width: 34ch;
    font-size: 0.84375rem;
    line-height: var(--line-height-relaxed);
    color: var(--inverse-muted-color);
}

#site_footer .site-footer__title {
    margin-bottom: 1.125rem;
    font-family: var(--primary-font);
    font-size: 0.65625rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--background-color);
}

#site_footer .site-footer__list {
    display: flex;
    flex-direction: column;
    gap: 0.6875rem;
}

#site_footer .site-footer__link {
    font-size: 0.84375rem;
    line-height: 1.6;
    color: var(--inverse-muted-color);
    transition: color var(--transition-base);
}

#site_footer .site-footer__link:hover {
    color: var(--background-color);
}

#site_footer .site-footer__social {
    display: flex;
    gap: 0.625rem;
    margin-bottom: var(--spacing-md);
}

#site_footer .site-footer__social-link {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    color: #ffffff;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    transition: transform var(--transition-slow), box-shadow var(--transition-base), filter var(--transition-base);
}

#site_footer .site-footer__social-link:hover {
    transform: translateY(-2px);
    filter: saturate(1.15) brightness(1.08);
}

#site_footer .site-footer__social-link--instagram {
    background-image: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 54%, var(--accent-color) 100%);
}

#site_footer .site-footer__social-link--instagram:hover {
    box-shadow: 0 8px 20px rgba(168, 30, 46, 0.42);
}

#site_footer .site-footer__social-link--facebook {
    background-image: linear-gradient(135deg, #3b8cff 0%, #1877f2 52%, #0a4fbd 100%);
}

#site_footer .site-footer__social-link--facebook:hover {
    box-shadow: 0 8px 20px rgba(24, 119, 242, 0.42);
}

#site_footer .site-footer__social-link--whatsapp {
    background-image: linear-gradient(135deg, #5ee27b 0%, #25d366 48%, #0f8a5f 100%);
}

#site_footer .site-footer__social-link--whatsapp:hover {
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.42);
}

#site_footer .site-footer__social-icon {
    width: 18px;
    height: 18px;
}

#site_footer .site-footer__schedule {
    font-size: 0.78125rem;
    line-height: var(--line-height-relaxed);
    color: var(--inverse-muted-color);
}

#site_footer .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm) 1.75rem;
    margin-top: clamp(2.25rem, 4.4vw, 3.75rem);
    padding-top: 1.625rem;
    border-top: 1px solid var(--inverse-border-color);
}

#site_footer .site-footer__copyright {
    font-size: 0.78125rem;
    color: #8b857c;
}

#site_footer .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-left: auto;
}

#site_footer .site-footer__legal-link {
    font-size: 0.78125rem;
    color: #8b857c;
    transition: color var(--transition-base);
}

#site_footer .site-footer__legal-link:hover {
    color: var(--background-color);
}

@media (max-width: 767px) {
    #site_footer .site-footer__legal {
        margin-left: 0;
    }
}


/* ==========================================================
   7. HÉROE DE PÁGINA INTERIOR
   Comparten estructura las cinco páginas de contenido y las
   cinco legales; solo cambian el copy y el fondo.
   ========================================================== */

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) {
    padding-block: clamp(3rem, 7vw, 6.5rem) clamp(2.25rem, 4.4vw, 3.75rem);
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__container {
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: clamp(1.75rem, 3.4vw, 2.75rem);
    font-size: 0.75rem;
    color: var(--muted-color);
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__breadcrumb-link {
    color: var(--muted-color);
    transition: color var(--transition-base);
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__breadcrumb-link:hover {
    color: var(--primary-color);
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__breadcrumb-current {
    color: var(--text-color);
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1.625rem;
    font-size: 0.6875rem;
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--primary-color);
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__rule {
    display: block;
    flex: none;
    width: 2.75rem;
    height: 2px;
    background-color: var(--primary-color);
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__title {
    max-width: 20ch;
    margin-bottom: clamp(1.5rem, 3vw, 2.375rem);
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__footer {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(1.5rem, 4vw, 4.5rem);
    align-items: end;
    padding-top: 1.75rem;
    border-top: 2px solid var(--border-color);
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__intro {
    max-width: 56ch;
    font-size: clamp(0.9375rem, 1.35vw, 1.1875rem);
    color: var(--body-color);
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs) 1.375rem;
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__anchor {
    padding: 0.6875rem 1.125rem;
    font-size: 0.71875rem;
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: color var(--transition-base), border-color var(--transition-base);
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__anchor:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5625rem;
    padding-bottom: var(--spacing-3xs);
    font-size: 0.75rem;
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    transition: color var(--transition-base), border-color var(--transition-base);
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__link:hover {
    color: var(--primary-dark);
    border-color: var(--primary-dark);
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__link-icon {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__claim {
    display: flex;
    align-items: center;
    gap: 1.375rem;
    font-size: 0.84375rem;
    color: var(--body-color);
    white-space: nowrap;
}

:is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
    #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__claim + .page-hero__claim::before {
    content: "/";
    color: var(--muted-color);
}

@media (max-width: 1024px) {
    :is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
        #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__footer {
        grid-template-columns: 1fr;
    }
}

/* Apilados, los distintivos no necesitan la barra que los separa en línea. */
@media (max-width: 767px) {
    :is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
        #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__aside {
        flex-direction: column;
        align-items: flex-start;
    }

    :is(#about_hero, #services_hero, #products_hero, #projects_hero, #contact_hero,
        #legal_hero, #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero) .page-hero__claim + .page-hero__claim::before {
        content: none;
    }
}


/* ==========================================================
   8. BANDA DE LLAMADA A LA ACCIÓN
   ========================================================== */

:is(#home_cta, #about_cta, #services_cta, #products_cta, #projects_cta) {
    background-color: var(--primary-color);
    color: var(--inverse-color);
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #projects_cta) .cta-band__container {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: clamp(1.75rem, 5vw, 4.5rem);
    align-items: center;
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
    padding-block: clamp(3.25rem, 7vw, 6rem);
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #projects_cta) .cta-band__eyebrow {
    margin-bottom: var(--spacing-md);
    font-size: 0.6875rem;
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: rgba(247, 245, 241, 0.7);
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #projects_cta) .cta-band__title {
    max-width: 22ch;
    margin-bottom: 1.125rem;
    color: #faf8f4;
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #projects_cta) .cta-band__description {
    max-width: 52ch;
    font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
    color: rgba(247, 245, 241, 0.86);
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #projects_cta) .cta-band__actions {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #projects_cta) .cta-band__button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.3125rem 1.625rem;
    font-size: 0.875rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base);
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #projects_cta) .cta-band__button--primary {
    background-color: var(--inverse-color);
    color: var(--primary-color);
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #projects_cta) .cta-band__button--primary:hover {
    background-color: #ffffff;
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #projects_cta) .cta-band__button--secondary {
    color: var(--inverse-color);
    border: 1px solid rgba(247, 245, 241, 0.4);
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #projects_cta) .cta-band__button--secondary:hover {
    background-color: rgba(247, 245, 241, 0.12);
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #projects_cta) .cta-band__button-icon {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #projects_cta) .cta-band__button:focus-visible {
    outline-color: var(--inverse-color);
}

@media (max-width: 1024px) {
    :is(#home_cta, #about_cta, #services_cta, #products_cta, #projects_cta) .cta-band__container {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   9. BANDA DE MARCAS
   ========================================================== */

:is(#home_brands, #products_brands) {
    /* La separación entre logotipos vive en una variable porque la cinta la
       necesita en dos sitios a la vez y tienen que valer lo mismo: el hueco
       dentro de una copia y el hueco entre las dos. */
    --brands-gap: clamp(1.5rem, 3vw, 3rem);

    background-color: var(--dark-alt-color);
    border-block: 2px solid var(--primary-color);
}

:is(#home_brands, #products_brands) .brands-band__container {
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
    padding-block: clamp(2rem, 3.4vw, 3rem);
}

:is(#home_brands, #products_brands) .brands-band__title {
    margin-bottom: var(--spacing-md);
    font-family: var(--primary-font);
    font-size: 0.6875rem;
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--accent-color);
}

/* Tira flexible y centrada: la última fila queda centrada en lugar de dejar
   un logotipo huérfano a la izquierda, y aguanta que el cliente añada o quite
   marcas desde el repetidor. Es también lo que se ve si la cinta no llega a
   montarse. */
:is(#home_brands, #products_brands) .brands-band__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--brands-gap);
}

/* La cinta.

   `brands-marquee.js` mete la lista en un carril y le cuelga detrás una copia
   decorativa; el carril recorre `-50%`, que con dos copias es exactamente una,
   así que al terminar el recorrido la imagen es idéntica a la del principio y
   el bucle no tiene costura.

   Para que esa cuenta salga, la separación entre las dos copias tiene que valer
   lo mismo que la separación entre dos logotipos. De ahí que el hueco lo ponga
   cada lista por su lado con `padding-inline-end` y no el carril con `gap`: un
   `gap` en el carril entraría una sola vez en un ancho que se divide en dos, y
   la cinta iría dando un salto en cada vuelta. */
:is(#home_brands, #products_brands) .brands-band__viewport {
    overflow: hidden;
    /* Los bordes se desvanecen para que los logotipos no aparezcan ni
       desaparezcan de golpe contra el filo de la sección. */
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

:is(#home_brands, #products_brands) .brands-band__track {
    display: flex;
    width: max-content;
}

:is(#home_brands, #products_brands) [data-brands-marquee="running"] .brands-band__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-inline-end: var(--brands-gap);
}

:is(#home_brands, #products_brands) [data-brands-marquee="running"] .brands-band__track {
    animation: brands-marquee 38s linear infinite;
}

/* Al pasar el ratón se para: si una marca interesa, hay que poder leerla. */
:is(#home_brands, #products_brands) [data-brands-marquee="running"]:hover .brands-band__track {
    animation-play-state: paused;
}

@keyframes brands-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

:is(#home_brands, #products_brands) .brands-band__item {
    display: grid;
    place-items: center;
}

/* `width: auto` respeta la proporción de cada PNG, así Laminam sale ancho y
   Neolith angosto, pero todos ocupan el mismo alto y se ven del mismo porte. */
:is(#home_brands, #products_brands) .brands-band__logo {
    height: 2.25rem;
    width: auto;
    /* El tope de ancho evita que un logotipo muy apaisado —Laminam— se coma la
       fila entera; `contain` lo encaja sin deformarlo. */
    max-width: 9rem;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.7;
    transition: opacity var(--transition-base);
}

:is(#home_brands, #products_brands) .brands-band__item:hover .brands-band__logo {
    opacity: 1;
}

@media (max-width: 560px) {
    :is(#home_brands, #products_brands) .brands-band__logo {
        height: 1.875rem;
    }
}


/* ==========================================================
   10. MOSAICO DE PROYECTOS
   ========================================================== */

:is(#home_projects, #projects_gallery) .projects-grid__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
    gap: clamp(1rem, 1.8vw, 1.625rem);
}

:is(#home_projects, #projects_gallery) .projects-grid__card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--text-color);
}

:is(#home_projects, #projects_gallery) .projects-grid__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

:is(#home_projects, #projects_gallery) .projects-grid__card:hover .projects-grid__image {
    transform: scale(1.05);
}

:is(#home_projects, #projects_gallery) .projects-grid__veil {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to top, rgba(18, 16, 15, 0.62) 0%, rgba(18, 16, 15, 0.16) 44%, rgba(18, 16, 15, 0) 72%);
}

:is(#home_projects, #projects_gallery) .projects-grid__go {
    position: absolute;
    right: 0.875rem;
    top: 0.875rem;
    display: grid;
    place-items: center;
    width: 2.375rem;
    height: 2.375rem;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-base);
}

:is(#home_projects, #projects_gallery) .projects-grid__card:hover .projects-grid__go {
    background-color: rgba(255, 255, 255, 0.32);
}

:is(#home_projects, #projects_gallery) .projects-grid__go-icon {
    width: 16px;
    height: 16px;
}

:is(#home_projects, #projects_gallery) .projects-grid__caption {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.875rem 1.0625rem 0.9375rem;
    background-color: rgba(24, 21, 20, 0.24);
    backdrop-filter: blur(11px) saturate(1.25);
    -webkit-backdrop-filter: blur(11px) saturate(1.25);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: background-color var(--transition-slow), transform var(--transition-slow), border-color var(--transition-slow);
}

:is(#home_projects, #projects_gallery) .projects-grid__card:hover .projects-grid__caption {
    background-color: rgba(24, 21, 20, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
}

:is(#home_projects, #projects_gallery) .projects-grid__category {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    margin-bottom: 0.625rem;
    font-size: 0.59375rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-light);
}

:is(#home_projects, #projects_gallery) .projects-grid__category-rule {
    display: block;
    flex: none;
    width: 0.9375rem;
    height: 2px;
    background-color: var(--accent-light);
}

:is(#home_projects, #projects_gallery) .projects-grid__name {
    margin-bottom: var(--spacing-3xs);
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 16px rgba(0, 0, 0, 0.4);
}

:is(#home_projects, #projects_gallery) .projects-grid__description {
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}


/* ==========================================================
   11. FORMULARIO DE PRESUPUESTO
   Vive en la portada y en la página de contacto.
   ========================================================== */

:is(#home_contact, #contact_quote) .quote-form {
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    padding: clamp(1.5rem, 3.4vw, 2.875rem);
    background-color: var(--surface-color);
    border: 2px solid var(--border-color);
}

:is(#home_contact, #contact_quote) .quote-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.125rem;
}

:is(#home_contact, #contact_quote) .quote-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
    min-width: 0;
}

:is(#home_contact, #contact_quote) .quote-form__field--wide {
    grid-column: 1 / -1;
}

:is(#home_contact, #contact_quote) .quote-form__label {
    font-size: 0.75rem;
    font-weight: var(--font-medium);
    color: var(--body-color);
}

:is(#home_contact, #contact_quote) .quote-form__required {
    color: var(--primary-color);
}

:is(#home_contact, #contact_quote) .quote-form__control {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-height: var(--field-height);
    padding-inline: var(--field-padding-inline);
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--field-radius);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

:is(#home_contact, #contact_quote) .quote-form__control--textarea {
    align-items: flex-start;
    padding-block: 0.875rem;
}

:is(#home_contact, #contact_quote) .quote-form__icon {
    flex: 0 0 var(--field-icon-size);
    width: var(--field-icon-size);
    height: var(--field-icon-size);
    color: var(--muted-color);
    transition: color var(--transition-base);
}

:is(#home_contact, #contact_quote) .quote-form__input,
:is(#home_contact, #contact_quote) .quote-form__select,
:is(#home_contact, #contact_quote) .quote-form__textarea {
    flex: 1;
    min-width: 0;
    padding-block: 0.8125rem;
    font-size: 1rem;
    color: var(--text-color);
    background: transparent;
    border: 0;
}

:is(#home_contact, #contact_quote) .quote-form__textarea {
    padding-block: 0;
    min-height: 6rem;
    resize: vertical;
}

:is(#home_contact, #contact_quote) .quote-form__select {
    appearance: none;
    cursor: pointer;
}

:is(#home_contact, #contact_quote) .quote-form__input:focus,
:is(#home_contact, #contact_quote) .quote-form__select:focus,
:is(#home_contact, #contact_quote) .quote-form__textarea:focus {
    outline: none;
}

:is(#home_contact, #contact_quote) .quote-form__input::placeholder,
:is(#home_contact, #contact_quote) .quote-form__textarea::placeholder {
    color: var(--muted-color);
    opacity: 1;
}

:is(#home_contact, #contact_quote) .quote-form__control:hover {
    border-color: rgba(33, 31, 29, 0.42);
}

:is(#home_contact, #contact_quote) .quote-form__control:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(168, 30, 46, 0.18);
}

:is(#home_contact, #contact_quote) .quote-form__control:focus-within .quote-form__icon {
    color: var(--primary-color);
}

:is(#home_contact, #contact_quote) .quote-form__control.is-invalid {
    border-color: var(--error-color);
}

:is(#home_contact, #contact_quote) .quote-form__error {
    font-size: 0.75rem;
    color: var(--error-color);
}

:is(#home_contact, #contact_quote) .quote-form__error[hidden] {
    display: none;
}

:is(#home_contact, #contact_quote) .quote-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6875rem;
    font-size: 0.78125rem;
    line-height: 1.55;
    color: var(--body-color);
    cursor: pointer;
}

:is(#home_contact, #contact_quote) .quote-form__checkbox {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: 0.1875rem;
    accent-color: var(--primary-color);
    cursor: pointer;
}

:is(#home_contact, #contact_quote) .quote-form__consent-link {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

:is(#home_contact, #contact_quote) .quote-form__legend {
    font-size: 0.75rem;
    color: var(--muted-color);
}

:is(#home_contact, #contact_quote) .quote-form__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

:is(#home_contact, #contact_quote) .quote-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6875rem;
    padding: 1.25rem 1.875rem;
    background-color: var(--primary-color);
    color: var(--inverse-color);
    font-size: 0.875rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base);
}

:is(#home_contact, #contact_quote) .quote-form__submit:hover {
    background-color: var(--primary-dark);
}

:is(#home_contact, #contact_quote) .quote-form__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

:is(#home_contact, #contact_quote) .quote-form__submit-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

:is(#home_contact, #contact_quote) .quote-form__message {
    padding: 0.875rem var(--spacing-sm);
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    background-color: var(--background-color);
    border-left: 3px solid var(--success-color);
    color: var(--body-color);
}

:is(#home_contact, #contact_quote) .quote-form__message[hidden] {
    display: none;
}

:is(#home_contact, #contact_quote) .quote-form__message.is-error {
    border-left-color: var(--error-color);
}

@media (max-width: 767px) {
    :is(#home_contact, #contact_quote) .quote-form__grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   12. DOCUMENTO LEGAL
   Componente común de las cinco páginas legales.
   ========================================================== */

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) {
    padding-block: 0 var(--section-padding-y-sm);
    border-top: 2px solid var(--border-color);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__container {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
    padding-top: clamp(2.5rem, 5vw, 4rem);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__index {
    position: sticky;
    top: 9rem;
    padding: var(--spacing-md);
    background-color: var(--surface-color);
    border-left: 2px solid var(--primary-color);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__index-title {
    margin-bottom: var(--spacing-sm);
    font-family: var(--primary-font);
    font-size: 0.65625rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted-color);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__index-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__index-link {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--body-color);
    transition: color var(--transition-base);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__index-link:hover {
    color: var(--primary-color);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__document {
    display: flex;
    flex-direction: column;
    gap: clamp(1.75rem, 3vw, 2.5rem);
    /* `min-width: 0` es lo que mantiene la tabla dentro de su caja: sin él, la
       columna crece hasta el ancho de la tabla y desborda el viewport en móvil
       en lugar de desplazarse dentro de su contenedor. */
    min-width: 0;
    max-width: 74ch;
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--spacing-sm) var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--surface-alt-color);
    border: 1px solid var(--border-color);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__meta-term {
    margin-bottom: var(--spacing-3xs);
    font-size: 0.625rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted-color);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__meta-value {
    font-size: 0.875rem;
    line-height: 1.55;
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    scroll-margin-top: 9rem;
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__block-number {
    font-size: 0.6875rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.2em;
    color: var(--primary-color);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__block-title {
    font-size: clamp(1.25rem, 2vw, 1.625rem);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__subtitle {
    margin-top: var(--spacing-xs);
    font-family: var(--primary-font);
    font-size: 1.0625rem;
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-normal);
    color: var(--title-color);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__paragraph {
    font-size: 0.9375rem;
    color: var(--body-color);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__list-item {
    position: relative;
    padding-left: var(--spacing-md);
    font-size: 0.9375rem;
    line-height: var(--line-height-relaxed);
    color: var(--body-color);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__list-item::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__notice {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--primary-light);
    border-left: 3px solid var(--primary-color);
    font-size: 0.9375rem;
    color: var(--body-color);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__table-wrapper {
    overflow-x: auto;
    background-color: var(--surface-alt-color);
    border: 1px solid var(--border-color);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__table {
    width: 100%;
    min-width: 34rem;
    font-size: 0.84375rem;
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__table-head {
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: left;
    font-size: 0.6875rem;
    font-weight: var(--font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-color);
    border-bottom: 2px solid var(--border-color);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__table-cell {
    padding: var(--spacing-xs) var(--spacing-sm);
    vertical-align: top;
    color: var(--body-color);
    border-bottom: 1px solid var(--divider-color);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__link {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__link:hover {
    color: var(--primary-dark);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__closing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-md);
    background-color: var(--dark-color);
    color: var(--inverse-color);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__closing-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__closing-title {
    font-size: 1.25rem;
    color: #faf8f4;
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__closing-text {
    max-width: 48ch;
    font-size: 0.875rem;
    color: var(--inverse-muted-color);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__closing-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex: none;
    padding: 0.875rem 1.375rem;
    font-size: 0.75rem;
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--inverse-color);
    background-color: var(--primary-color);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__closing-link:hover {
    background-color: var(--primary-dark);
}

:is(#legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content) .site-legal__closing-icon {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
}

@media (max-width: 1023px) {
    :is(#legal_content, #privacy_content, #cookies_content,
        #dataprotection_content, #accessibility_content) .site-legal__container {
        grid-template-columns: minmax(0, 1fr);
    }

    :is(#legal_content, #privacy_content, #cookies_content,
        #dataprotection_content, #accessibility_content) .site-legal__index {
        position: static;
    }
}


/* ==========================================================
   13. MOVIMIENTO REDUCIDO
   ========================================================== */

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