/* ==========================================================================
   ALKYSTAR — Hoja compartida
   Variables, reset, capa base, cabecera, pie y componentes reutilizados en
   más de una página. Lo exclusivo de cada página vive en su propia hoja.
   ========================================================================== */

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

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

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
}

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

:root {
    /* Marca — el rojo sale del logotipo del cliente, asentado para que el texto
       blanco encima pase el contraste AA. */
    --primary-color: #c81e1e;
    --primary-dark: #9e1616;
    --primary-light: #fbeded;
    /* El rojo de marca sobre carbón solo llega a 3,3:1, insuficiente para texto
       pequeño. Esta variante aclarada alcanza 4,9:1 y se usa en todo texto e
       icono rojo que vaya sobre fondo oscuro. */
    --primary-on-dark: #ea5a53;

    /* Verde de WhatsApp oscurecido hasta que el texto blanco encima pasa AA. */
    --whatsapp-color: #0e7a40;
    --whatsapp-dark: #0a6033;

    /* Texto */
    --title-color: #17171a;
    --text-color: #2c2c31;
    --body-color: #4a4a52;
    --muted-color: #6b6b73;
    --inverse-color: #ffffff;
    --inverse-muted-color: #a7a7ae;

    /* Fondos */
    --background-color: #f5f4f2;
    --surface-color: #ffffff;
    --surface-alt-color: #ebe9e5;
    --dark-color: #121214;
    --dark-elevated-color: #1d1d21;

    /* Bordes */
    --border-color: #dcd9d4;
    --divider-color: #e5e2dd;
    --dark-border-color: #2f2f35;

    /* Estados */
    --success-color: #1b7f5a;
    --error-color: #c0322b;

    /* Familias — siempre con alternativa del sistema */
    --primary-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --display-font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Tamaños */
    --base-font-size: 16px;
    --small-font-size: 0.875rem;
    --large-font-size: 1.125rem;

    --h1-size: clamp(2.125rem, 1.45rem + 2.7vw, 3.5rem);
    --h2-size: clamp(1.875rem, 1.35rem + 2.1vw, 3rem);
    --h3-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --h4-size: 1.125rem;

    /* Pesos */
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-black: 800;

    /* Interlineado y espaciado entre letras */
    --line-height-tight: 1.04;
    --line-height-heading: 1.16;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.75;

    --tracking-tight: -0.025em;
    --tracking-wide: 0.16em;

    /* Escala de espaciado */
    --spacing-2xs: 0.25rem;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 5rem;
    --spacing-3xl: 7rem;

    /* Sección y contenedor */
    --section-padding-y: clamp(3.5rem, 2rem + 5vw, 7rem);
    --section-padding-x: 1.5rem;
    --container-width: 1320px;

    /* Radios — casi rectos: el sistema es industrial, no blando */
    --radius-sm: 2px;
    --radius-full: 9999px;

    /* Sombras tintadas hacia el fondo cálido, nunca negras puras */
    --shadow-md: 0 10px 24px -12px rgba(28, 24, 20, 0.22);
    --shadow-lg: 0 26px 50px -24px rgba(28, 24, 20, 0.32);

    --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-base: 280ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 480ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Campos de formulario */
    --field-height: 3.25rem;
    --field-radius: 2px;
    --field-padding-inline: 1rem;
    --field-icon-size: 20px;

    /* Cabecera fija */
    --header-height: 5.5rem;
}

/* ==========================================================
   3. RESET Y CAPA BASE
   Única parte sin ancla de sección. Solo propiedades neutras.
   ========================================================== */

*,
*::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);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

h1 {
    font-size: var(--h1-size);
    line-height: var(--line-height-tight);
}

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

h3 {
    font-size: var(--h3-size);
    font-weight: var(--font-bold);
}

h4 {
    font-size: var(--h4-size);
    font-weight: var(--font-bold);
}

p {
    text-wrap: pretty;
}

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

img {
    height: auto;
}

ul,
ol {
    list-style: none;
}

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

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

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

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

/* ==========================================================
   4. UTILIDADES TRANSVERSALES
   Sin sección propia por definición.
   ========================================================== */

.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: 200;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--primary-color);
    color: var(--inverse-color);
    font-weight: var(--font-semibold);
    transition: top var(--transition-fast);
}

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

/* ==========================================================
   5. CABECERA — #site_header
   Ocupa todo el ancho; el contenido va en un contenedor limitado.
   ========================================================== */

#site_header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background-color: var(--dark-color);
    border-bottom: 1px solid var(--dark-border-color);
}

#site_header .site-header__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-lg);
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
}

#site_header .site-header__bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex: 1;
    min-height: var(--header-height);
    padding-block: var(--spacing-xs);
    transition: min-height var(--transition-base);
}

#site_header.is-scrolled .site-header__bar {
    min-height: 4.25rem;
}

#site_header .site-header__logo {
    flex-shrink: 0;
    display: block;
}

#site_header .site-header__logo-image {
    width: 12rem;
    height: auto;
    transition: width var(--transition-base);
}

#site_header.is-scrolled .site-header__logo-image {
    width: 9.5rem;
}

#site_header .site-header__nav {
    margin-inline-start: auto;
}

#site_header .site-header__nav-list {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

#site_header .site-header__nav-link {
    position: relative;
    display: block;
    padding-block: var(--spacing-xs);
    font-family: var(--display-font);
    font-size: 0.8125rem;
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--inverse-color);
    transition: color var(--transition-fast);
}

/* El subrayado nace desde la izquierda: eco de la diagonal roja del logotipo. */
#site_header .site-header__nav-link::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-base);
}

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

#site_header .site-header__nav-link:hover::after,
#site_header .site-header__nav-link--active::after {
    transform: scaleX(1);
}

#site_header .site-header__nav-link--active {
    color: var(--inverse-color);
}

#site_header .site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

#site_header .site-header__phone {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.7rem 1.15rem;
    background-color: var(--primary-color);
    color: var(--inverse-color);
    font-family: var(--display-font);
    font-size: 0.875rem;
    font-weight: var(--font-bold);
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

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

#site_header .site-header__phone:active {
    transform: translateY(1px);
}

#site_header .site-header__phone-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

#site_header .site-header__menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--inverse-color);
    border: 1px solid var(--dark-border-color);
}

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

#site_header .site-header__menu-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

#site_header .site-header__menu-icon--close {
    display: none;
}

#site_header .site-header__menu-btn[aria-expanded="true"] .site-header__menu-icon--open {
    display: none;
}

#site_header .site-header__menu-btn[aria-expanded="true"] .site-header__menu-icon--close {
    display: block;
}

/* Debajo de 1024 px la misma lista de navegación se despliega bajo la barra.
   Va posicionada de forma absoluta respecto a la cabecera para no ocupar sitio
   dentro de la fila: así hay un único menú en el DOM y no dos copias que
   mantener sincronizadas. */
@media (max-width: 1024px) {
    #site_header .site-header__menu-btn {
        display: flex;
    }

    #site_header .site-header__bar {
        justify-content: space-between;
    }

    #site_header .site-header__nav {
        position: absolute;
        inset-inline: 0;
        top: 100%;
        max-height: 0;
        margin-inline-start: 0;
        background-color: var(--dark-color);
        overflow: hidden;
        transition: max-height var(--transition-slow);
    }

    #site_header.is-menu-open .site-header__nav {
        max-height: 30rem;
        border-bottom: 1px solid var(--dark-border-color);
    }

    #site_header .site-header__nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
        margin-inline: auto;
        padding-block: var(--spacing-xs) var(--spacing-md);
        border-top: 1px solid var(--dark-border-color);
    }

    #site_header .site-header__nav-link {
        padding-block: var(--spacing-sm);
        border-bottom: 1px solid var(--dark-border-color);
        font-size: 1rem;
    }

    #site_header .site-header__nav-link::after {
        display: none;
    }

    /* Sin subrayado, el enlace activo necesita otra marca para distinguirse. */
    #site_header .site-header__nav-link--active {
        color: var(--primary-on-dark);
    }
}

@media (max-width: 767px) {
    #site_header .site-header__phone-label {
        display: none;
    }

    #site_header .site-header__phone {
        padding-inline: 0.85rem;
    }

    /* El logotipo es muy apaisado: a 390 px hay que estrecharlo o la barra
       no da cabida al carrito, al teléfono y al botón de menú. */
    #site_header .site-header__logo-image {
        width: 8.5rem;
    }

    #site_header.is-scrolled .site-header__logo-image {
        width: 7.5rem;
    }

    #site_header .site-header__bar {
        gap: var(--spacing-sm);
    }

    #site_header .site-header__actions {
        gap: var(--spacing-xs);
    }
}

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

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

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

#site_footer .site-footer__top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    gap: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--dark-border-color);
}

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

#site_footer .site-footer__logo-image {
    width: 13rem;
    height: auto;
}

#site_footer .site-footer__tagline {
    max-width: 34ch;
    font-size: var(--small-font-size);
    line-height: var(--line-height-relaxed);
}

#site_footer .site-footer__social {
    display: flex;
    gap: var(--spacing-xs);
}

#site_footer .site-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--dark-border-color);
    color: var(--inverse-color);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

#site_footer .site-footer__social-link:hover {
    border-color: var(--primary-on-dark);
    color: var(--primary-on-dark);
}

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

#site_footer .site-footer__column-title {
    margin-bottom: var(--spacing-md);
    font-family: var(--display-font);
    font-size: 0.75rem;
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--inverse-color);
}

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

#site_footer .site-footer__link {
    font-size: var(--small-font-size);
    transition: color var(--transition-fast);
}

#site_footer .site-footer__link:hover {
    color: var(--primary-on-dark);
}

#site_footer .site-footer__schedule {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-block: 0.35rem;
    font-size: var(--small-font-size);
}

#site_footer .site-footer__schedule-days {
    font-weight: var(--font-semibold);
    color: var(--inverse-color);
}

#site_footer .site-footer__contact-item {
    display: flex;
    gap: var(--spacing-xs);
    font-size: var(--small-font-size);
    line-height: var(--line-height-relaxed);
}

#site_footer .site-footer__contact-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-top: 0.3rem;
    color: var(--primary-on-dark);
}

#site_footer .site-footer__contact-link {
    transition: color var(--transition-fast);
}

#site_footer .site-footer__contact-link:hover {
    color: var(--primary-on-dark);
}

#site_footer .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding-top: var(--spacing-lg);
}

#site_footer .site-footer__copyright {
    font-size: 0.8125rem;
}

#site_footer .site-footer__legal-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

#site_footer .site-footer__legal-link {
    font-size: 0.8125rem;
    transition: color var(--transition-fast);
}

#site_footer .site-footer__legal-link:hover,
#site_footer .site-footer__legal-link--active {
    color: var(--primary-on-dark);
}

/* Botón flotante de WhatsApp: visible siempre, nunca oculto tras hover. */
#site_footer .site-footer__whatsapp {
    position: fixed;
    inset-block-end: var(--spacing-md);
    inset-inline-end: var(--spacing-md);
    z-index: 90;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.85rem 1.15rem;
    background-color: var(--whatsapp-color);
    color: var(--inverse-color);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    font-family: var(--display-font);
    font-size: 0.875rem;
    font-weight: var(--font-bold);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

#site_footer .site-footer__whatsapp:hover {
    background-color: var(--whatsapp-dark);
}

#site_footer .site-footer__whatsapp:active {
    transform: translateY(1px);
}

#site_footer .site-footer__whatsapp-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

@media (max-width: 1024px) {
    #site_footer .site-footer__top {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
}

@media (max-width: 767px) {
    #site_footer .site-footer__top {
        grid-template-columns: 1fr;
    }

    #site_footer .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    #site_footer .site-footer__whatsapp-label {
        display: none;
    }

    #site_footer .site-footer__whatsapp {
        padding: 0.9rem;
    }
}

/* ==========================================================
   7. BOTONES — componente compartido
   Anclado al #id de cada sección donde aparece, agrupado con :is()
   para no duplicar declaraciones.
   ========================================================== */

:is(#home_hero, #home_categories, #home_about, #home_value,
    #home_delivery, #home_cta, #about_hero, #about_story, #about_values,
    #about_cta, #services_hero, #services_list, #services_cta, #products_hero,
    #products_grid, #products_cta, #contact_hero,
    #contact_details, #contact_form, #contact_faq, #legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content,
    #product_hero, #product_range, #product_advice, #product_related, #product_cta)
.site-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    min-height: 3.25rem;
    padding: 0 1.65rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--display-font);
    font-size: 0.875rem;
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast),
        color var(--transition-fast), transform var(--transition-fast);
}

:is(#home_hero, #home_categories, #home_about, #home_value,
    #home_delivery, #home_cta, #about_hero, #about_story, #about_values,
    #about_cta, #services_hero, #services_list, #services_cta, #products_hero,
    #products_grid, #products_cta, #contact_hero,
    #contact_details, #contact_form, #contact_faq, #legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content,
    #product_hero, #product_range, #product_advice, #product_related, #product_cta)
.site-button__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

/* Rojo de marca sobre fondo claro u oscuro: funciona en los dos. */
:is(#home_hero, #home_categories, #home_about, #home_value,
    #home_delivery, #home_cta, #about_hero, #about_story, #about_values,
    #about_cta, #services_hero, #services_list, #services_cta, #products_hero,
    #products_grid, #products_cta, #contact_hero,
    #contact_details, #contact_form, #contact_faq, #legal_content, #privacy_content,
    #cookies_content, #dataprotection_content, #accessibility_content,
    #product_hero, #product_range, #product_advice, #product_related, #product_cta)
.site-button--primary {
    background-color: var(--primary-color);
    color: var(--inverse-color);
}

:is(#home_hero, #home_categories, #home_about, #home_value,
    #home_delivery, #home_cta, #about_hero, #about_story, #about_values,
    #about_cta, #services_hero, #services_list, #services_cta, #products_hero,
    #products_grid, #products_cta, #contact_hero,
    #contact_details, #contact_form, #contact_faq, #legal_content, #privacy_content,
    #cookies_content, #dataprotection_content, #accessibility_content,
    #product_hero, #product_range, #product_advice, #product_related, #product_cta)
.site-button--primary:hover {
    background-color: var(--primary-dark);
    color: var(--inverse-color);
}

/* Contorno claro: solo sobre fondo oscuro. */
:is(#home_hero, #home_delivery, #home_cta, #about_hero, #about_cta,
    #services_hero, #services_cta, #products_hero, #products_cta, #contact_hero,
    #product_hero, #product_cta)
.site-button--inverse {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.32);
    color: var(--inverse-color);
}

:is(#home_hero, #home_delivery, #home_cta, #about_hero, #about_cta,
    #services_hero, #services_cta, #products_hero, #products_cta, #contact_hero,
    #product_hero, #product_cta)
.site-button--inverse:hover {
    background-color: var(--inverse-color);
    border-color: var(--inverse-color);
    color: var(--dark-color);
}

/* Contorno oscuro: solo sobre fondo claro. */
:is(#home_categories, #home_about, #home_value, #about_story,
    #about_values, #services_list, #products_grid, #contact_details, #contact_form, #contact_faq,
    #product_range, #product_related)
.site-button--outline {
    background-color: transparent;
    border-color: var(--title-color);
    color: var(--title-color);
}

:is(#home_categories, #home_about, #home_value, #about_story,
    #about_values, #services_list, #products_grid, #contact_details, #contact_form, #contact_faq,
    #product_range, #product_related)
.site-button--outline:hover {
    background-color: var(--title-color);
    color: var(--inverse-color);
}

:is(#home_hero, #home_categories, #home_about, #home_value,
    #home_delivery, #home_cta, #about_hero, #about_story, #about_values,
    #about_cta, #services_hero, #services_list, #services_cta, #products_hero,
    #products_grid, #products_cta, #contact_hero,
    #contact_details, #contact_form, #contact_faq, #legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content,
    #product_hero, #product_range, #product_advice, #product_related, #product_cta)
.site-button:active {
    transform: translateY(1px);
}

:is(#home_hero, #home_categories, #home_about, #home_value,
    #home_delivery, #home_cta, #about_hero, #about_story, #about_values,
    #about_cta, #services_hero, #services_list, #services_cta, #products_hero,
    #products_grid, #products_cta, #contact_hero,
    #contact_details, #contact_form, #contact_faq, #legal_content, #privacy_content, #cookies_content,
    #dataprotection_content, #accessibility_content,
    #product_hero, #product_range, #product_advice, #product_related, #product_cta)
.site-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================
   8. ENCABEZADO DE SECCIÓN — componente compartido
   Índice numérico de catálogo + título + entradilla.
   ========================================================== */

:is(#home_categories, #home_about, #home_value, #home_delivery,
    #about_story, #about_values, #services_list, #products_grid,
    #products_cta, #contact_details, #contact_form,
    #contact_faq, #product_range, #product_advice, #product_related)
.site-section-head {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

:is(#home_categories, #home_about, #home_value, #home_delivery,
    #about_story, #about_values, #services_list, #products_grid,
    #products_cta, #contact_details, #contact_form,
    #contact_faq, #product_range, #product_advice, #product_related)
.site-section-head__index {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--display-font);
    font-size: 0.75rem;
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--primary-color);
}

/* La barra corta es el eco de la diagonal roja del logotipo. */
:is(#home_categories, #home_about, #home_value, #home_delivery,
    #about_story, #about_values, #services_list, #products_grid,
    #products_cta, #contact_details, #contact_form,
    #contact_faq, #product_range, #product_advice, #product_related)
.site-section-head__index::before {
    content: "";
    width: 2.25rem;
    height: 3px;
    background-color: var(--primary-color);
    transform: skewX(-24deg);
}

:is(#home_categories, #home_about, #home_value, #home_delivery,
    #about_story, #about_values, #services_list, #products_grid,
    #products_cta, #contact_details, #contact_form,
    #contact_faq, #product_range, #product_advice, #product_related)
.site-section-head__title {
    max-width: 22ch;
    text-transform: uppercase;
}

:is(#home_categories, #home_about, #home_value, #home_delivery,
    #about_story, #about_values, #services_list, #products_grid,
    #products_cta, #contact_details, #contact_form,
    #contact_faq, #product_range, #product_advice, #product_related)
.site-section-head__lead {
    max-width: 56ch;
    font-size: var(--large-font-size);
    line-height: var(--line-height-relaxed);
    color: var(--body-color);
}

/* Sobre fondo oscuro el rojo de marca no llega al contraste mínimo: la etiqueta
   de sección y su barra diagonal pasan a la variante aclarada. */
:is(#home_delivery, #about_values, #product_advice) .site-section-head__index {
    color: var(--primary-on-dark);
}

:is(#home_delivery, #about_values, #product_advice) .site-section-head__index::before {
    background-color: var(--primary-on-dark);
}

/* Sobre fondo oscuro el título y la entradilla cambian de color. */
:is(#home_delivery, #product_advice) .site-section-head__title {
    color: var(--inverse-color);
}

:is(#home_delivery, #product_advice) .site-section-head__lead {
    color: var(--inverse-muted-color);
}

/* ==========================================================
   9. HÉROE DE PÁGINA INTERIOR — componente compartido
   ========================================================== */

:is(#about_hero, #services_hero, #products_hero, #contact_hero, #legal_hero,
    #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero, #product_hero)
.page-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 26rem;
    padding-block: var(--spacing-2xl) var(--spacing-xl);
    background-color: var(--dark-color);
    overflow: hidden;
}

:is(#about_hero, #services_hero, #products_hero, #contact_hero, #legal_hero,
    #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero, #product_hero)
.page-hero__background {
    position: absolute;
    inset: 0;
    background-color: var(--dark-elevated-color);
}

:is(#about_hero, #services_hero, #products_hero, #contact_hero, #legal_hero,
    #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero, #product_hero)
.page-hero__background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

/* Velo sobre la fotografía: el título y la entradilla se apoyan en la esquina
   inferior izquierda, y sin este degradado el texto claro se pierde cuando la
   imagen tiene ahí una zona clara. Se aclara hacia la derecha para que la foto
   siga leyéndose. */
:is(#about_hero, #services_hero, #products_hero, #contact_hero, #legal_hero,
    #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero, #product_hero)
.page-hero__background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 11, 13, 0.88) 0%, rgba(11, 11, 13, 0.55) 55%,
        rgba(11, 11, 13, 0.2) 100%);
}

:is(#about_hero, #services_hero, #products_hero, #contact_hero, #legal_hero,
    #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero, #product_hero)
.page-hero__container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
}

:is(#about_hero, #services_hero, #products_hero, #contact_hero, #legal_hero,
    #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero, #product_hero)
.page-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--display-font);
    font-size: 0.75rem;
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--inverse-muted-color);
}

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

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

:is(#about_hero, #services_hero, #products_hero, #contact_hero, #legal_hero,
    #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero, #product_hero)
.page-hero__title {
    max-width: 18ch;
    color: var(--inverse-color);
    text-transform: uppercase;
}

:is(#about_hero, #services_hero, #products_hero, #contact_hero, #legal_hero,
    #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero, #product_hero)
.page-hero__lead {
    max-width: 60ch;
    font-size: var(--large-font-size);
    line-height: var(--line-height-relaxed);
    color: var(--inverse-muted-color);
}

:is(#about_hero, #services_hero, #products_hero, #contact_hero, #legal_hero,
    #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero, #product_hero)
.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

@media (max-width: 767px) {
    :is(#about_hero, #services_hero, #products_hero, #contact_hero, #legal_hero,
        #privacy_hero, #cookies_hero, #dataprotection_hero, #accessibility_hero, #product_hero)
    .page-hero {
        min-height: 20rem;
    }
}

/* ==========================================================
   10. TARJETA DE CATEGORÍA — usada en la portada
   ========================================================== */

:is(#home_categories, #products_grid) .category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Rellena la celda: en la fila de la tarjeta ancha, la vecina iguala altura. */
    height: 100%;
    min-height: 15rem;
    padding: var(--spacing-md);
    background-color: var(--dark-elevated-color);
    overflow: hidden;
    isolation: isolate;
}

:is(#home_categories, #products_grid) .category-card__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

/* Degradado propio para que el texto blanco siempre tenga contraste. */
:is(#home_categories, #products_grid) .category-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(11, 11, 13, 0.9) 8%, rgba(11, 11, 13, 0.28) 62%,
        rgba(11, 11, 13, 0.1) 100%);
}

:is(#home_categories, #products_grid) .category-card__name {
    color: var(--inverse-color);
    text-transform: uppercase;
    letter-spacing: var(--tracking-tight);
}

:is(#home_categories, #products_grid) .category-card__count {
    margin-top: var(--spacing-2xs);
    font-size: var(--small-font-size);
    color: var(--inverse-muted-color);
}

:is(#home_categories, #products_grid) .category-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--spacing-sm);
    font-family: var(--display-font);
    font-size: 0.75rem;
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--inverse-color);
}

/* El enlace cubre la tarjeta entera: toda la tarjeta es clicable. */
:is(#home_categories, #products_grid) .category-card__link::before {
    content: "";
    position: absolute;
    inset: 0;
    cursor: pointer;
}

:is(#home_categories, #products_grid) .category-card__link::after {
    content: "";
    width: 1.5rem;
    height: 2px;
    background-color: var(--primary-color);
    transition: width var(--transition-base);
}

:is(#home_categories, #products_grid) .category-card:hover .category-card__image {
    transform: scale(1.06);
}

:is(#home_categories, #products_grid) .category-card:hover .category-card__link::after {
    width: 2.75rem;
}

:is(#home_categories, #products_grid) .category-card:focus-within {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

/* ==========================================================
   11. DOCUMENTO LEGAL — compartido por las cinco páginas legales
   ========================================================== */

:is(#legal_content, #privacy_content, #cookies_content, #dataprotection_content,
    #accessibility_content) {
    padding-block: var(--section-padding-y);
    background-color: var(--background-color);
}

:is(#legal_content, #privacy_content, #cookies_content, #dataprotection_content,
    #accessibility_content)
.site-legal__container {
    display: grid;
    grid-template-columns: 17rem 1fr;
    gap: var(--spacing-xl);
    align-items: start;
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
}

:is(#legal_content, #privacy_content, #cookies_content, #dataprotection_content,
    #accessibility_content)
.site-legal__index {
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-sm));
    padding: var(--spacing-md);
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
}

:is(#legal_content, #privacy_content, #cookies_content, #dataprotection_content,
    #accessibility_content)
.site-legal__index-title {
    margin-bottom: var(--spacing-sm);
    font-family: var(--display-font);
    font-size: 0.75rem;
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--primary-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 {
    display: block;
    padding-inline-start: var(--spacing-xs);
    border-inline-start: 2px solid var(--border-color);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--body-color);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

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

:is(#legal_content, #privacy_content, #cookies_content, #dataprotection_content,
    #accessibility_content)
.site-legal__document {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 78ch;
    /* Sin esto, una tabla ancha estira la columna de la rejilla y desborda el
       viewport en lugar de desplazarse dentro de su propia caja. */
    min-width: 0;
}

/* Ficha de metadatos del documento. */
:is(#legal_content, #privacy_content, #cookies_content, #dataprotection_content,
    #accessibility_content)
.site-legal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--surface-color);
    border-inline-start: 3px solid var(--primary-color);
}

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

:is(#legal_content, #privacy_content, #cookies_content, #dataprotection_content,
    #accessibility_content)
.site-legal__meta-term {
    font-family: var(--display-font);
    font-size: 0.6875rem;
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--muted-color);
}

:is(#legal_content, #privacy_content, #cookies_content, #dataprotection_content,
    #accessibility_content)
.site-legal__meta-value {
    font-size: var(--small-font-size);
    font-weight: var(--font-medium);
    color: var(--title-color);
}

: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: calc(var(--header-height) + var(--spacing-sm));
}

:is(#legal_content, #privacy_content, #cookies_content, #dataprotection_content,
    #accessibility_content)
.site-legal__block-title {
    display: flex;
    gap: var(--spacing-xs);
    font-size: 1.25rem;
    text-transform: uppercase;
}

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

:is(#legal_content, #privacy_content, #cookies_content, #dataprotection_content,
    #accessibility_content)
.site-legal__text {
    line-height: var(--line-height-relaxed);
    color: var(--body-color);
}

:is(#legal_content, #privacy_content, #cookies_content, #dataprotection_content,
    #accessibility_content)
.site-legal__subtitle {
    margin-top: var(--spacing-xs);
    font-size: 1rem;
    text-transform: none;
}

: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 {
    display: flex;
    gap: var(--spacing-xs);
    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: "—";
    flex-shrink: 0;
    color: var(--primary-color);
}

/* Aviso destacado dentro del documento. */
:is(#legal_content, #privacy_content, #cookies_content, #dataprotection_content,
    #accessibility_content)
.site-legal__notice {
    padding: var(--spacing-md);
    background-color: var(--primary-light);
    border-inline-start: 3px solid var(--primary-color);
    line-height: var(--line-height-relaxed);
    color: var(--text-color);
}

:is(#legal_content, #privacy_content, #cookies_content, #dataprotection_content,
    #accessibility_content)
.site-legal__table-scroll {
    overflow-x: auto;
}

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

:is(#legal_content, #privacy_content, #cookies_content, #dataprotection_content,
    #accessibility_content)
.site-legal__table-header {
    padding: var(--spacing-xs);
    background-color: var(--surface-alt-color);
    border: 1px solid var(--border-color);
    font-family: var(--display-font);
    font-size: 0.6875rem;
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-align: start;
    color: var(--title-color);
}

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

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

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

/* Cierre del documento con enlace a contacto. */
:is(#legal_content, #privacy_content, #cookies_content, #dataprotection_content,
    #accessibility_content)
.site-legal__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

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

:is(#legal_content, #privacy_content, #cookies_content, #dataprotection_content,
    #accessibility_content)
.site-legal__footer-title {
    font-size: 1.125rem;
    text-transform: uppercase;
}

:is(#legal_content, #privacy_content, #cookies_content, #dataprotection_content,
    #accessibility_content)
.site-legal__footer-text {
    max-width: 46ch;
    font-size: var(--small-font-size);
    color: var(--muted-color);
}

@media (max-width: 1024px) {
    :is(#legal_content, #privacy_content, #cookies_content,
        #dataprotection_content, #accessibility_content,
    #product_hero, #product_range, #product_advice, #product_related, #product_cta)
    .site-legal__container {
        grid-template-columns: 1fr;
    }

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

/* ==========================================================
   12. BANDA DE LLAMADA A LA ACCIÓN — compartida por varias páginas
   ========================================================== */

:is(#home_cta, #about_cta, #services_cta, #products_cta, #product_cta) {
    padding-block: var(--section-padding-y);
    background-color: var(--dark-color);
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #product_cta) .site-cta__container {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    width: min(100% - (var(--section-padding-x) * 2), var(--container-width));
    margin-inline: auto;
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #product_cta) .site-cta__index {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: var(--spacing-sm);
    font-family: var(--display-font);
    font-size: 0.75rem;
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--primary-on-dark);
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #product_cta) .site-cta__index::before {
    content: "";
    width: 2.25rem;
    height: 3px;
    background-color: var(--primary-on-dark);
    transform: skewX(-24deg);
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #product_cta) .site-cta__title {
    max-width: 20ch;
    color: var(--inverse-color);
    text-transform: uppercase;
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #product_cta) .site-cta__text {
    max-width: 52ch;
    margin-top: var(--spacing-sm);
    font-size: var(--large-font-size);
    line-height: var(--line-height-relaxed);
    color: var(--inverse-muted-color);
}

:is(#home_cta, #about_cta, #services_cta, #products_cta, #product_cta) .site-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

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

/* ==========================================================
   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;
    }
}