/* =========================================================
   YIRU — SISTEMA VISUAL PRINCIPAL
   ========================================================= */

:root {
    --black: #090909;
    --white: #ffffff;

    --line: rgba(9, 9, 9, 0.14);
    --overlay: rgba(7, 7, 7, 0.34);

    --header-height: 74px;

    --panel-width: min(50vw, 760px);

    /*
       CAROUSEL — Proporción fija del banner principal.
       La proporción se conserva en todos los dispositivos.
    */
    --carousel-ratio: 3200 / 769;

    --carousel-control-size: 52px;
    --carousel-dot-size: 7px;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --speed-fast: 180ms;
    --speed-smooth: 460ms;
    --speed-carousel: 460ms;
}

/* =========================================================
   RESET — Normalización básica
   ========================================================= */

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

html {
    /* Las transiciones de ruta deben ser instantáneas; los carruseles mantienen su scroll horizontal propio. */
    scroll-behavior: auto;
}

body {
    margin: 0;
    min-width: 320px;

    color: var(--black);
    background: var(--white);

    font-family: Arial, Helvetica, sans-serif;
    font-synthesis: none;
}

body.contact-is-open {
    overflow: hidden;
}

button,
a {
    font: inherit;
    color: inherit;
}

button {
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* =========================================================
   HEADER — Cabecera principal de navegación
   ========================================================= */

.site-header {
    position: fixed;
    inset: 0 0 auto;

    z-index: 1000;

    height: var(--header-height);

    color: var(--black);
    background: transparent;

    border-bottom: 1px solid transparent;

    transition:
        background-color var(--speed-fast) ease,
        border-color var(--speed-fast) ease,
        box-shadow var(--speed-fast) ease,
        backdrop-filter var(--speed-fast) ease;
}

.site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.97);

    border-color: var(--line);

    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.05);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    width: 100%;
    height: 100%;

    padding: 0 5.25vw;
}

/* CONTACT — Elemento izquierdo */

.header-contact {
    justify-self: start;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: inherit;

    cursor: pointer;

    font-size: 13px;
    font-weight: 500;
    line-height: 1;

    letter-spacing: 0.005em;

    transition:
        opacity var(--speed-fast) ease;
}

.header-contact-symbol {
    display: inline-block;

    font-size: 18px;
    line-height: 0.8;

    transform: translateY(-1px);
}

.header-contact:hover {
    opacity: 0.62;
}

/* BRAND — Identidad YIRU */

.brand-logo {
    justify-self: center;

    color: inherit;
    text-decoration: none;

    font-size: clamp(24px, 2.15vw, 34px);
    font-weight: 400;

    letter-spacing: 0.30em;
    line-height: 1;

    padding-left: 0.30em;
}

/* ACTIONS — Buscador + menú */

.header-actions {
    justify-self: end;

    display: inline-flex;
    align-items: center;

    gap: 24px;
}

/* SVG — Tratamiento común de iconos */

.header-search svg,
.header-menu svg,
.contact-close svg,
.contact-item-heading svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* SEARCH — Campo visual del buscador */

.header-search {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    width: clamp(340px, 29vw, 420px);
    height: 46px;

    padding:
        0
        5px
        0
        20px;

    color: rgba(9, 9, 9, 0.68);
    background: var(--white);

    border: 1px solid rgba(9, 9, 9, 0.78);
    border-radius: 999px;

    overflow: hidden;

    cursor: default;
}

.header-search::before {
    content: "Buscar en YIRU";

    display: block;

    font-size: 15px;
    font-weight: 400;

    line-height: 1;

    letter-spacing: 0;
}

.header-search svg {
    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    margin-left: auto;
    padding: 8px;

    color: var(--white);

    fill: none;

    background: #26333f;

    border-radius: 50%;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* MENU — Acción visual */

.header-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    color: inherit;

    cursor: default;

    font-size: 14px;
    font-weight: 500;

    line-height: 1;

    letter-spacing: 0.12em;
}

.header-menu svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   MAIN — Separación de la cabecera fija
   ========================================================= */

main {
    padding-top: var(--header-height);
}

/* =========================================================
   HERO CAROUSEL — Carrusel principal
   ========================================================= */

.hero-carousel {
    position: relative;

    width: 100%;

    background: var(--white);

    outline: none;

    user-select: none;
    -webkit-user-select: none;
}

/* =========================================================
   VIEWPORT — Banner horizontal principal
   ========================================================= */

.carousel-viewport {
    position: relative;

    width: 100%;
    aspect-ratio: var(--carousel-ratio);

    overflow: hidden;

    background: var(--white);

    isolation: isolate;
}

/* =========================================================
   TRACK — Movimiento horizontal
   ========================================================= */

.carousel-track {
    display: flex;

    width: 100%;
    height: 100%;

    transform: translate3d(0, 0, 0);

    transition:
        transform var(--speed-carousel) var(--ease-out);

    will-change: transform;
}

/* =========================================================
   SLIDE — Unidad individual
   ========================================================= */

.carousel-slide {
    position: relative;

    flex: 0 0 100%;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: var(--white);
}

/* =========================================================
   IMAGE — Campaña visual
   ========================================================= */

.carousel-image {
    display: block;

    width: 100%;
    height: 100%;

    /*
       Las campañas finales deben compartir el mismo
       formato panorámico del carrusel.
    */
    object-fit: cover;
    object-position: center;

    pointer-events: none;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* =========================================================
   CONTROLS — Flechas laterales
   ========================================================= */

.carousel-control {
    position: absolute;
    top: 50%;

    z-index: 5;

    display: grid;
    place-items: center;

    width: var(--carousel-control-size);
    height: 90px;

    color: rgba(9, 9, 9, 0.92);

    opacity: 0;

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        opacity var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.carousel-control svg {
    width: 25px;
    height: 25px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(
            0 2px 5px rgba(255, 255, 255, 0.75)
        );
}

.carousel-control-prev {
    left: 8px;
}

.carousel-control-next {
    right: 8px;
}

.hero-carousel:hover .carousel-control,
.carousel-control:focus-visible {
    opacity: 1;
}

.carousel-control:hover {
    transform:
        translateY(-50%)
        scale(1.06);
}

.carousel-control:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.65);
    outline-offset: 2px;
}

/* =========================================================
   PAGINATION — Indicadores inferiores
   ========================================================= */

.carousel-pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 30px;

    padding: 9px 16px 10px;

    background: var(--white);
}

.carousel-dot {
    display: grid;
    place-items: center;

    width: 17px;
    height: 14px;

    cursor: pointer;
}

.carousel-dot span {
    display: block;

    width: var(--carousel-dot-size);
    height: var(--carousel-dot-size);

    border-radius: 999px;

    background: rgba(9, 9, 9, 0.28);

    transition:
        width var(--speed-fast) ease,
        background-color var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.carousel-dot:hover span {
    transform: scale(1.08);
}

.carousel-dot.is-active span {
    width: 26px;

    background: var(--black);
}

.carousel-dot:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.7);
    outline-offset: 3px;
}

/* =========================================================
   FLOW SPACE — Continuidad visual
   ========================================================= */

.flow-space {
    min-height: 72vh;

    background: var(--white);
}

/* =========================================================
   CATALOG INTRO — Presentación inicial del catálogo
   ========================================================= */

.catalog-intro {
    width: 100%;
    padding: clamp(72px, 8vw, 112px) 24px 0;

    background: var(--white);
}

.catalog-intro-inner {
    width: min(100%, 920px);
    margin: 0 auto;

    text-align: center;
}

.catalog-intro h2 {
    margin: 0;

    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 600;
    line-height: 1.08;

    letter-spacing: -0.035em;
}

.catalog-intro p {
    max-width: 860px;
    margin: 18px auto 0;

    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.65;

    color: rgba(9, 9, 9, 0.72);
}

/* =========================================================
   CATEGORY CAROUSEL — Encabezado y estructura principal
   ========================================================= */

.category-carousel-section {
    width: 100%;
    padding: clamp(58px, 6vw, 82px) 24px clamp(78px, 8vw, 112px);

    background: var(--white);
}

.category-section-header {
    width: min(100%, 1280px);
    margin: 0 auto clamp(24px, 2.5vw, 34px);

    text-align: center;
}

.category-section-header h2 {
    margin: 0;

    font-size: clamp(30px, 3.1vw, 46px);
    font-weight: 600;
    line-height: 1.08;

    letter-spacing: -0.035em;
}

.category-carousel {
    position: relative;

    width: min(100%, 1280px);
    margin: 0 auto;
}

/* =========================================================
   CATEGORY VIEWPORT — Área horizontal desplazable
   ========================================================= */

.category-carousel-viewport {
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;

    scrollbar-width: none;
    -ms-overflow-style: none;

    outline: none;
}

.category-carousel-viewport::-webkit-scrollbar {
    display: none;
}

.category-carousel-viewport:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.42);
    outline-offset: 4px;
}

/* =========================================================
   CATEGORY TRACK — Secuencia horizontal
   ========================================================= */

.category-carousel-track {
    display: flex;
    align-items: stretch;
    gap: clamp(10px, 1vw, 16px);

    width: max-content;
    min-width: 100%;

    padding: 2px 0 8px;
}

/* =========================================================
   CATEGORY CARD — Imagen completa de cada categoría
   ========================================================= */

.category-card {
    position: relative;

    flex: 0 0 clamp(176px, 15.05vw, 205px);
    width: clamp(176px, 15.05vw, 205px);
    aspect-ratio: 3 / 5;

    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;

    background: #f1f1f1;
}

.category-card-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
/* =========================================================
   CATEGORY NAVIGATION — Enlace completo de la tarjeta
   ========================================================= */

.category-card-link {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    color: inherit;
    text-decoration: none;

    cursor: pointer;
}

/* =========================================================
   CATEGORY NAVIGATION — Estado de enfoque accesible
   ========================================================= */

.category-card-link:focus-visible {
    outline: 2px solid rgba(9, 9, 9, 0.85);
    outline-offset: -2px;
}





/* =========================================================
   CATEGORY CONTROLS — Flechas laterales
   ========================================================= */

.category-control {
    position: absolute;
    top: 50%;
    z-index: 5;

    display: grid;
    place-items: center;

    width: 48px;
    height: 64px;

    color: rgba(9, 9, 9, 0.86);
    background: rgba(255, 255, 255, 0.98);

    border: 1px solid rgba(9, 9, 9, 0.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);

    cursor: pointer;

    transform: translateY(-50%);
    transition:
        transform var(--speed-fast) ease,
        box-shadow var(--speed-fast) ease,
        opacity var(--speed-fast) ease;
}

.category-control svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.category-control-prev {
    left: 0;
}

.category-control-next {
    right: 0;
}

.category-control:hover {
    transform: translateY(-50%) scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.category-control:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.72);
    outline-offset: 2px;
}

.category-control[hidden] {
    display: none;
}

/* =========================================================
   RESPONSIVE — Categorías en tablet
   ========================================================= */

@media (max-width: 900px) {

    .catalog-intro {
        padding-top: 68px;
    }

    .catalog-intro p {
        max-width: 760px;
    }

    .category-carousel-section {
        padding-inline: 22px;
    }

    .category-carousel {
        width: 100%;
    }

    .category-card {
        flex-basis: 190px;
        width: 190px;
    }

    .category-control {
        width: 44px;
        height: 58px;
    }

    .category-control svg {
        width: 23px;
        height: 23px;
    }
}

/* =========================================================
   RESPONSIVE — Categorías en móvil
   ========================================================= */

@media (max-width: 560px) {

    .catalog-intro {
        padding: 58px 18px 0;
    }

    .catalog-intro h2 {
        font-size: 29px;
    }

    .catalog-intro p {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.62;
    }

    .category-carousel-section {
        padding: 52px 18px 76px;
    }

    .category-section-header {
        margin-bottom: 22px;
    }

    .category-section-header h2 {
        font-size: 29px;
    }

    .category-carousel-track {
        gap: 10px;
        padding-bottom: 6px;
    }

    .category-card {
        flex-basis: 176px;
        width: 176px;
    }

    .category-control {
        display: none;
    }
}

/* =========================================================
   MOTION — Preferencia de movimiento reducido
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .category-carousel-viewport {
        scroll-behavior: auto;
    }
}

/* =========================================================
   CONTACT BACKDROP — Fondo del panel lateral
   ========================================================= */

.contact-backdrop {
    position: fixed;
    inset: 0;

    z-index: 1100;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    background: var(--overlay);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    transition:
        opacity var(--speed-smooth) var(--ease-out),
        visibility 0s linear var(--speed-smooth);
}

.contact-backdrop.is-open {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transition:
        opacity var(--speed-smooth) var(--ease-out),
        visibility 0s linear 0s;
}

/* =========================================================
   CONTACT DRAWER — Panel lateral derecho
   ========================================================= */

.contact-panel {
    position: fixed;

    inset: 0 0 0 auto;

    z-index: 1200;

    width: var(--panel-width);
    height: 100svh;

    overflow-y: auto;

    color: var(--black);
    background: var(--white);

    transform: translateX(102%);

    transition:
        transform var(--speed-smooth) var(--ease-out);

    box-shadow:
        -12px 0 36px rgba(0, 0, 0, 0.08);
}

.contact-panel.is-open {
    transform: translateX(0);
}

.contact-panel-inner {
    position: relative;

    min-height: 100%;

    padding:
        clamp(80px, 10vh, 106px)
        clamp(38px, 5.5vw, 82px)
        60px;
}

.contact-close {
    position: absolute;

    top: 18px;
    right: 16px;

    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    color: var(--white);
    background: var(--black);

    cursor: pointer;

    transition:
        transform var(--speed-fast) ease,
        opacity var(--speed-fast) ease;
}

.contact-close:hover {
    transform: scale(0.95);
    opacity: 0.92;
}

.contact-close svg {
    width: 19px;
    height: 19px;

    stroke-width: 1.5;
}

.contact-panel h2 {
    max-width: 620px;

    margin: 0 0 50px;

    font-size: clamp(26px, 2.2vw, 38px);
    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -0.025em;
}

.contact-item {
    margin-bottom: 34px;
}

.contact-item-heading {
    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 26px;
}

.contact-item-heading svg {
    width: 17px;
    height: 17px;
}

.contact-label {
    font-size: 14px;
    line-height: 1.3;

    text-decoration: underline;
    text-underline-offset: 4px;
}

.chat-status-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #d9b62c;
}

.contact-hours {
    max-width: 520px;

    margin: 11px 0 0;

    font-size: 12px;
    line-height: 1.5;
}

.contact-help {
    margin-top: 44px;
}

.contact-help-title {
    margin: 0 0 24px;

    font-size: 16px;
    line-height: 1.3;
}

.contact-help-link {
    color: var(--black);

    font-size: 16px;
    line-height: 1.4;

    text-decoration: underline;
    text-underline-offset: 6px;

    cursor: default;
}

/* =========================================================
   STATIC CONTROLS — Elementos pendientes
   ========================================================= */

[data-static-control] {
    cursor: default;
}

/* =========================================================
   RESPONSIVE — Tablet y laptop
   ========================================================= */

@media (max-width: 900px) {

    :root {
        --header-height: 68px;
    }

    .header-inner {
        padding: 0 22px;
    }

    .header-contact {
        font-size: 12px;
    }

    .header-contact span:last-child {
        display: none;
    }

    .header-actions {
        gap: 16px;
    }

    .header-search {
        width: 280px;
        height: 44px;

        padding-left: 18px;
    }

    .header-search::before {
        font-size: 14px;
    }

    .header-search svg {
        width: 34px;
        height: 34px;
        padding: 7px;
    }

    .header-menu {
        gap: 9px;

        font-size: 13px;
    }

    .header-menu svg {
        width: 21px;
        height: 21px;
    }

    .brand-logo {
        font-size: 28px;
    }

    .carousel-control {
        opacity: 1;

        width: 44px;
        height: 70px;
    }

    .carousel-control-prev {
        left: 2px;
    }

    .carousel-control-next {
        right: 2px;
    }

    .contact-panel {
        width: min(86vw, 620px);
    }
}

/* =========================================================
   RESPONSIVE — Móvil
   ========================================================= */

@media (max-width: 560px) {

    :root {
        --header-height: 64px;
    }

    .header-inner {
        padding: 0 18px;
    }

    .brand-logo {
        font-size: 24px;

        letter-spacing: 0.24em;

        padding-left: 0.24em;
    }

    .header-search {
        width: 190px;
        height: 40px;

        padding-left: 15px;
    }

    .header-search::before {
        font-size: 12px;
    }

    .header-search svg {
        width: 32px;
        height: 32px;
        padding: 7px;
    }

    .header-menu {
        gap: 7px;

        font-size: 11px;
        letter-spacing: 0.11em;
    }

    .header-menu svg {
        width: 20px;
        height: 20px;
    }

    .header-actions {
        gap: 13px;
    }

    .carousel-control {
        width: 38px;
        height: 56px;

        opacity: 1;
    }

    .carousel-control svg {
        width: 21px;
        height: 21px;
    }

    .carousel-pagination {
        gap: 7px;

        min-height: 28px;

        padding:
            8px 12px
            9px;
    }

    .carousel-dot.is-active span {
        width: 23px;
    }

    .contact-panel {
        width: 100%;
    }

    .contact-panel-inner {
        padding:
            88px
            28px
            50px;
    }

    .contact-panel h2 {
        margin-bottom: 42px;

        font-size: 29px;
    }
}

/* =========================================================
   MOTION — Preferencia de movimiento reducido
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }

    .carousel-track {
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   BASE Y CONCRETO — Landing comercial de categoría
   ========================================================= */

.base-concreto-section {
    width: 100%;

    /* Reduce la separación acumulada del bloque anterior sin modificarlo. */
    margin-top: calc(-1 * clamp(78px, 8vw, 112px));

    padding:
        clamp(44px, 4vw, 60px)
        24px
        clamp(72px, 7vw, 96px);

    background: var(--white);
}

.base-concreto-inner {
    width: min(100%, 1264px);
    margin: 0 auto;
}

/* HEADER — Título y descripción de categoría */

.base-concreto-header {
    max-width: 900px;
    margin: 0 auto;

    text-align: center;
}

.base-concreto-header h2 {
    margin: 0;

    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 600;
    line-height: 1.08;

    letter-spacing: -0.035em;
}

.base-concreto-header p {
    max-width: 820px;
    margin: 10px auto 0;

    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.55;

    color: rgba(9, 9, 9, 0.72);
}

/* BANNER — Proporción panorámica principal */

.base-concreto-banner {
    width: 100%;
    aspect-ratio: 2048 / 728;
    margin-top: clamp(28px, 2.6vw, 38px);

    overflow: hidden;
    background: #f1f1f1;
}

.base-concreto-banner img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* GRID — Cuatro tarjetas de producto */

.base-concreto-featured-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 0.9vw, 14px);

    width: 100%;
    margin-top: clamp(14px, 1.2vw, 18px);
}

.base-concreto-card,
.base-concreto-large-card {
    min-width: 0;
    overflow: hidden;

    background: #f1f1f1;
}

/* CARD — Proporción vertical de producto */

.base-concreto-card {
    aspect-ratio: 4 / 5;
}

/* IMAGE — Imagen completa del producto */

.base-concreto-card-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* GRID — Dos tarjetas destacadas de mayor formato */

.base-concreto-featured-large-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 0.9vw, 14px);

    width: 100%;
    margin-top: clamp(14px, 1.2vw, 18px);
}

/* LARGE CARD — Proporción horizontal destacada */

.base-concreto-large-card {
    aspect-ratio: 16 / 9;
}

/* GRID — Segunda fila de productos */

.base-concreto-featured-grid-secondary {
    margin-top: clamp(14px, 1.2vw, 18px);
}

/* RESPONSIVE — Conserva la escala visual y reorganiza las columnas */

@media (max-width: 900px) {

    .base-concreto-section {
        padding-inline: 22px;
    }

    .base-concreto-featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* RESPONSIVE — Una columna cuando el ancho disponible lo requiere */

@media (max-width: 560px) {

    .base-concreto-section {
        margin-top: -78px;

        padding:
            44px
            18px
            68px;
    }

    .base-concreto-header h2 {
        font-size: 29px;
    }

    .base-concreto-header p {
        margin-top: 10px;

        font-size: 14px;
        line-height: 1.58;
    }

    .base-concreto-banner {
        aspect-ratio: 16 / 7;
        margin-top: 24px;
    }

    .base-concreto-featured-grid,
    .base-concreto-featured-large-grid {
        grid-template-columns: 1fr;
    }

    .base-concreto-card {
        aspect-ratio: 4 / 5;
    }

    .base-concreto-large-card {
        aspect-ratio: 16 / 9;
    }
}


/* =========================================================
   BASE Y CONCRETO — Navegación de productos
   ========================================================= */

.base-concreto-card[data-base-concreto-brand],
.base-concreto-large-card[data-base-concreto-brand] {
    cursor: pointer;
}

.base-concreto-card[data-base-concreto-brand]:focus-visible,
.base-concreto-large-card[data-base-concreto-brand]:focus-visible {
    outline: 2px solid rgba(9, 9, 9, 0.85);
    outline-offset: -2px;
}

/* =========================================================
   LADRILLOS — Bloque comercial de categoría
   ========================================================= */

.ladrillos-category-section {
    width: 100%;

    margin-top: calc(-1 * clamp(42px, 4.5vw, 64px));

    padding:
        clamp(24px, 3vw, 40px)
        24px
        clamp(52px, 5vw, 72px);

    background: var(--white);
}

.ladrillos-category-inner {
    width: min(100%, 1264px);
    margin: 0 auto;
}

.ladrillos-category-header {
    margin: 0 0 clamp(24px, 2.6vw, 36px);

    text-align: center;
}

.ladrillos-category-header h2 {
    margin: 0;

    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 600;
    line-height: 1.08;

    letter-spacing: -0.035em;
}

.ladrillos-category-banner {
    width: 100%;
    margin: 0;

    aspect-ratio: 2048 / 728;
    overflow: hidden;

    background: #f1f1f1;
}

.ladrillos-category-banner-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.ladrillos-category-banner img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

@media (max-width: 1024px) {

    .ladrillos-category-banner {
        aspect-ratio: 16 / 7;
    }
}


/* =========================================================
   TEJAS — Bloque comercial de soluciones para cubiertas
   ========================================================= */

.tejas-category-section {
    width: 100%;

    padding:
        clamp(18px, 2.2vw, 30px)
        24px
        clamp(72px, 7vw, 96px);

    background: var(--white);
}

.tejas-category-inner {
    width: min(100%, 1264px);
    margin: 0 auto;
}

.tejas-category-header {
    max-width: 920px;
    margin: 0 auto clamp(24px, 2.5vw, 34px);

    text-align: center;
}

.tejas-category-header h2 {
    margin: 0;

    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 600;
    line-height: 1.08;

    letter-spacing: -0.035em;
}

.tejas-category-header p {
    max-width: 760px;
    margin: 10px auto 0;

    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.55;

    color: rgba(9, 9, 9, 0.72);
}

.tejas-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 0.9vw, 14px);

    width: 100%;
}

.tejas-category-card {
    min-width: 0;
    overflow: hidden;

    aspect-ratio: 4 / 5;

    background: #f1f1f1;
}

.tejas-category-card-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}


/* =========================================================
   RESPONSIVE — Ladrillos y Tejas
   ========================================================= */

@media (max-width: 900px) {

    .ladrillos-category-section,
    .tejas-category-section {
        padding-inline: 22px;
    }

    .tejas-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {

    .ladrillos-category-section {
        margin-top: -42px;

        padding:
            24px
            18px
            56px;
    }

    .tejas-category-section {
        padding:
            18px
            18px
            68px;
    }

    .ladrillos-category-header,
    .tejas-category-header {
        margin-bottom: 22px;
    }

    .ladrillos-category-header h2,
    .tejas-category-header h2 {
        font-size: 29px;
    }

    .tejas-category-header p {
        margin-top: 9px;

        font-size: 14px;
        line-height: 1.58;
    }

    .tejas-category-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .tejas-category-card {
        aspect-ratio: 4 / 5;
    }
}


/* =========================================================
   ACEROS — Bloque comercial de categoría
   ========================================================= */

.aceros-category-section {
    width: 100%;

    margin-top: calc(-1 * clamp(48px, 5vw, 72px));

    padding:
        clamp(18px, 2.2vw, 30px)
        24px
        clamp(72px, 7vw, 96px);

    background: var(--white);
}

.aceros-category-inner {
    width: min(100%, 1264px);
    margin: 0 auto;
}

/* HEADER — Título y descripción de la categoría */

.aceros-category-header {
    max-width: 920px;
    margin: 0 auto clamp(24px, 2.5vw, 34px);

    text-align: center;
}

.aceros-category-header h2 {
    margin: 0;

    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 600;
    line-height: 1.08;

    letter-spacing: -0.035em;
}

.aceros-category-header p {
    max-width: 760px;
    margin: 10px auto 0;

    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.55;

    color: rgba(9, 9, 9, 0.72);
}

/* GRID — Primera composición de cuatro productos */

.aceros-category-primary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 0.9vw, 14px);

    width: 100%;
}

.aceros-category-card {
    min-width: 0;
    overflow: hidden;

    aspect-ratio: 2 / 3;

    background: #f1f1f1;
}

.aceros-category-card-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* GRID — Segunda composición: una pieza principal + dos complementarias */

.aceros-category-secondary-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(10px, 0.9vw, 14px);

    width: 100%;
    margin-top: clamp(10px, 1vw, 14px);

    aspect-ratio: 3.15 / 1;
}

.aceros-category-feature-card {
    min-width: 0;
    min-height: 0;
    overflow: hidden;

    background: #f1f1f1;
}

.aceros-category-feature-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* RESPONSIVE — Reorganiza las composiciones sin alterar la jerarquía visual */

@media (max-width: 900px) {

    .aceros-category-section {
        padding-inline: 22px;
    }

    .aceros-category-primary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aceros-category-secondary-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        aspect-ratio: 2.1 / 1;
    }

    .aceros-category-feature-card-main {
        grid-row: span 1;
    }
}

/* RESPONSIVE — Móvil: una composición vertical sin desplazamiento horizontal */

@media (max-width: 560px) {

    .aceros-category-section {
        margin-top: -42px;

        padding:
            18px
            18px
            68px;
    }

    .aceros-category-header {
        margin-bottom: 22px;
    }

    .aceros-category-header h2 {
        font-size: 29px;
    }

    .aceros-category-header p {
        margin-top: 9px;

        font-size: 14px;
        line-height: 1.58;
    }

    .aceros-category-primary-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .aceros-category-card {
        aspect-ratio: 2 / 3;
    }

    .aceros-category-secondary-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        aspect-ratio: auto;
        margin-top: 10px;
    }

    .aceros-category-feature-card {
        aspect-ratio: 2 / 3;
    }
}

/* =========================================================
   HERRAMIENTAS Y ELECTRICIDAD — Bloque comercial de categoría
   ========================================================= */

.herramientas-electricidad-section {
    width: 100%;

    margin-top: calc(-1 * clamp(48px, 5vw, 72px));

    padding:
        clamp(18px, 2.2vw, 30px)
        24px
        clamp(72px, 7vw, 96px);

    background: var(--white);
}

.herramientas-electricidad-inner {
    width: min(100%, 1264px);
    margin: 0 auto;
}

/* HEADER — Título y descripción del bloque */
.herramientas-electricidad-header {
    max-width: 920px;
    margin: 0 auto clamp(24px, 2.5vw, 34px);

    text-align: center;
}

.herramientas-electricidad-header h2 {
    margin: 0;

    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 600;
    line-height: 1.08;

    letter-spacing: -0.035em;
}

.herramientas-electricidad-header p {
    max-width: 760px;
    margin: 10px auto 0;

    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.55;

    color: rgba(9, 9, 9, 0.72);
}

/* GRID — Primera fila de cuatro piezas verticales */
.herramientas-electricidad-primary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 0.9vw, 14px);

    width: 100%;
}

/* CARD — Pieza vertical */
.herramientas-electricidad-card {
    min-width: 0;
    overflow: hidden;

    aspect-ratio: 4 / 5;

    background: #f1f1f1;
}

.herramientas-electricidad-card-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* GRID — Segunda fila de dos piezas horizontales */
.herramientas-electricidad-featured-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 0.9vw, 14px);

    width: 100%;
    margin-top: clamp(10px, 1vw, 14px);
}

/* LARGE CARD — Pieza horizontal destacada */
.herramientas-electricidad-large-card {
    min-width: 0;
    overflow: hidden;

    aspect-ratio: 16 / 9;

    background: #f1f1f1;
}

.herramientas-electricidad-large-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* GRID — Tercera fila de cuatro piezas verticales */
.herramientas-electricidad-secondary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 0.9vw, 14px);

    width: 100%;
    margin-top: clamp(10px, 1vw, 14px);
}



/* RESPONSIVE — Tablet: mantiene la jerarquía y reduce columnas */
@media (max-width: 900px) {

    .herramientas-electricidad-section {
        padding-inline: 22px;
    }

    .herramientas-electricidad-primary-grid,
    .herramientas-electricidad-secondary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .herramientas-electricidad-featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* RESPONSIVE — Móvil: composición vertical sin desbordamiento */
@media (max-width: 560px) {

    .herramientas-electricidad-section {
        margin-top: -42px;

        padding:
            18px
            18px
            68px;
    }

    .herramientas-electricidad-header {
        margin-bottom: 22px;
    }

    .herramientas-electricidad-header h2 {
        font-size: 29px;
    }

    .herramientas-electricidad-header p {
        margin-top: 9px;

        font-size: 14px;
        line-height: 1.58;
    }

    .herramientas-electricidad-primary-grid,
    .herramientas-electricidad-featured-grid,
    .herramientas-electricidad-secondary-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .herramientas-electricidad-card {
        aspect-ratio: 4 / 5;
    }

    .herramientas-electricidad-large-card {
        aspect-ratio: 16 / 9;
    }

    .herramientas-electricidad-banner {
        aspect-ratio: 16 / 7;
        margin-top: 10px;
    }
}

/* =========================================================
   MADERAS Y FENÓLICOS — Bloque comercial de dos piezas
   ========================================================= */

.maderas-fenolicos-section {
    width: 100%;

    padding:
        clamp(18px, 2.2vw, 30px)
        24px
        clamp(72px, 7vw, 96px);

    background: var(--white);
}

.maderas-fenolicos-inner {
    width: min(100%, 1264px);
    margin: 0 auto;
}

/* HEADER — Título y descripción del bloque */

.maderas-fenolicos-header {
    max-width: 920px;
    margin: 0 auto clamp(24px, 2.5vw, 34px);

    text-align: center;
}

.maderas-fenolicos-header h2 {
    margin: 0;

    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 600;
    line-height: 1.08;

    letter-spacing: -0.035em;
}

.maderas-fenolicos-header p {
    max-width: 760px;
    margin: 10px auto 0;

    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.55;

    color: rgba(9, 9, 9, 0.72);
}

/* VIEWPORT — Dos piezas horizontales destacadas */

.maderas-fenolicos-carousel {
    width: 100%;
}

.maderas-fenolicos-viewport {
    width: 100%;
    overflow: hidden;

    outline: none;
}

.maderas-fenolicos-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 0.9vw, 14px);

    width: 100%;
}

/* CARD — Pieza horizontal destacada */

.maderas-fenolicos-card {
    min-width: 0;
    overflow: hidden;

    aspect-ratio: 16 / 9;

    background: #f1f1f1;
}

.maderas-fenolicos-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* PAGINATION — Indicadores del carrusel móvil */

.maderas-fenolicos-pagination {
    display: none;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 30px;
    padding: 9px 16px 0;
}

.maderas-fenolicos-dot {
    display: grid;
    place-items: center;

    width: 17px;
    height: 14px;

    cursor: pointer;
}

.maderas-fenolicos-dot span {
    display: block;

    width: var(--carousel-dot-size);
    height: var(--carousel-dot-size);

    border-radius: 999px;

    background: rgba(9, 9, 9, 0.28);

    transition:
        width var(--speed-fast) ease,
        background-color var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.maderas-fenolicos-dot:hover span {
    transform: scale(1.08);
}

.maderas-fenolicos-dot.is-active span {
    width: 26px;
    background: var(--black);
}

.maderas-fenolicos-dot:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.7);
    outline-offset: 3px;
}

/* RESPONSIVE — Tablet: conserva las dos piezas mientras exista espacio */

@media (max-width: 900px) {

    .maderas-fenolicos-section {
        padding-inline: 22px;
    }
}

/* RESPONSIVE — Pantalla pequeña: carrusel táctil horizontal */

@media (max-width: 767px) {

    .maderas-fenolicos-section {
        padding:
            18px
            18px
            68px;
    }

    .maderas-fenolicos-header {
        margin-bottom: 22px;
    }

    .maderas-fenolicos-header h2 {
        font-size: 29px;
    }

    .maderas-fenolicos-header p {
        margin-top: 9px;

        font-size: 14px;
        line-height: 1.58;
    }

    .maderas-fenolicos-viewport {
        overflow-x: auto;
        overflow-y: hidden;

        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
        -ms-overflow-style: none;

        touch-action: pan-x;
        scroll-padding-inline: 0;
    }

    .maderas-fenolicos-viewport::-webkit-scrollbar {
        display: none;
    }

    .maderas-fenolicos-viewport:focus-visible {
        outline: 1px solid rgba(9, 9, 9, 0.42);
        outline-offset: 4px;
    }

    .maderas-fenolicos-track {
        display: flex;
        gap: 12px;

        width: max-content;
        min-width: 100%;
    }

    .maderas-fenolicos-card {
        flex: 0 0 92%;
        width: 92%;

        scroll-snap-align: start;
        scroll-snap-stop: always;

        aspect-ratio: 16 / 9;
    }

    .maderas-fenolicos-pagination {
        display: flex;
    }
}

/* MOTION — Preferencia de movimiento reducido */

@media (prefers-reduced-motion: reduce) {

    .maderas-fenolicos-viewport {
        scroll-behavior: auto;
    }
}

/* =========================================================
   ALMACENAMIENTO DE AGUA — Landing comercial de categoría
   ========================================================= */

.almacenamiento-agua-section {
    width: 100%;

    padding:
        clamp(18px, 2.2vw, 30px)
        24px
        clamp(72px, 7vw, 96px);

    background: var(--white);
}

.almacenamiento-agua-inner {
    width: min(100%, 1264px);
    margin: 0 auto;
}

/* HEADER — Título de la categoría */

.almacenamiento-agua-header {
    max-width: 920px;
    margin: 0 auto clamp(24px, 2.5vw, 34px);

    text-align: center;
}

.almacenamiento-agua-header h2 {
    margin: 0;

    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 600;
    line-height: 1.08;

    letter-spacing: -0.035em;
}

/* BANNER — Imagen publicitaria de la categoría */

.almacenamiento-agua-banner {
    position: relative;

    width: 100%;
    margin: 0;

    overflow: hidden;

    aspect-ratio: 2048 / 728;

    background: #f1f1f1;
}

.almacenamiento-agua-banner-picture {
    display: block;

    width: 100%;
    height: 100%;
}

.almacenamiento-agua-banner-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* BANNER — Superficie interactiva */

.almacenamiento-agua-banner-hitarea {
    position: absolute;
    inset: 0;
    z-index: 4;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;

    cursor: pointer;
    text-align: left;
    touch-action: manipulation;

    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.almacenamiento-agua-banner-hitarea:focus {
    outline: none;
}

.almacenamiento-agua-banner-hitarea:focus-visible .almacenamiento-agua-banner-cta-label,
.almacenamiento-agua-banner-hitarea:focus-visible .almacenamiento-agua-banner-cta-arrow {
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.96),
        0 0 0 4px rgba(9, 9, 9, 0.34);
}

/* CTA — Acceso visual */

.almacenamiento-agua-banner-cta {
    position: absolute;
    left: clamp(22px, 4.8vw, 72px);
    bottom: clamp(20px, 5vw, 58px);
    z-index: 1;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    pointer-events: none;

    transition: transform var(--speed-fast) ease;
}

.almacenamiento-agua-banner-hitarea:hover .almacenamiento-agua-banner-cta {
    transform: translateY(-1px);
}

.almacenamiento-agua-banner-hitarea:active .almacenamiento-agua-banner-cta {
    transform: translateY(0);
}

.almacenamiento-agua-banner-cta-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 18px;

    color: var(--black);
    background: var(--white);
    border-radius: 999px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.13);

    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.055em;
    white-space: nowrap;
}

.almacenamiento-agua-banner-cta-arrow {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    color: var(--black);
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.13);
}

.almacenamiento-agua-banner-cta-arrow svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* RESPONSIVE — Tablet y pantallas pequeñas */

@media (max-width: 1024px) {

    .almacenamiento-agua-banner {
        aspect-ratio: 1672 / 941;
    }
}

/* RESPONSIVE — Móvil */

@media (max-width: 900px) {

    .almacenamiento-agua-section {
        padding-inline: 22px;
    }
}

@media (max-width: 560px) {

    .almacenamiento-agua-section {
        padding:
            18px
            18px
            68px;
    }

    .almacenamiento-agua-header {
        margin-bottom: 22px;
    }

    .almacenamiento-agua-header h2 {
        font-size: 29px;
    }

    .almacenamiento-agua-banner-cta {
        left: 18px;
        bottom: 16px;
    }

    .almacenamiento-agua-banner-cta-label {
        min-height: 40px;
        padding-inline: 15px;
        font-size: 11px;
    }

    .almacenamiento-agua-banner-cta-arrow {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .almacenamiento-agua-banner-cta {
        transition: none;
    }
}


/* =========================================================
   FOOTER YIRU — Navegación y cierre de marca
   ========================================================= */

.site-footer {
    width: 100%;

    color: var(--white);
    background: var(--black);

    overflow: hidden;
}

.site-footer-inner {
    width: 100%;
    margin: 0 auto;
}

/* NAVIGATION — Zona principal de enlaces */

.site-footer-navigation {
    display: grid;
    grid-template-columns:
        minmax(180px, 0.7fr)
        minmax(220px, 0.7fr)
        minmax(0, 1.6fr);

    gap: clamp(40px, 7vw, 110px);

    width: 100%;
    padding:
        clamp(58px, 7vw, 96px)
        5.25vw
        clamp(96px, 10vw, 150px);
}

.site-footer-column {
    min-width: 0;
}

.site-footer-column-title {
    margin: 0;

    color: rgba(255, 255, 255, 0.56);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;

    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.site-footer-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 24px;

    margin-top: 26px;
}

.site-footer-link {
    color: var(--white);

    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;

    text-decoration: underline;
    text-underline-offset: 4px;

    cursor: default;
}

/* LEGAL — Derechos reservados */

.site-footer-legal {
    width: 100%;
    padding:
        0
        5.25vw
        clamp(90px, 11vw, 150px);

    color: var(--white);

    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

/* BRAND — Cierre visual principal */

.site-footer-brand {
    width: 100%;
    padding:
        0
        0
        clamp(8px, 1vw, 16px);

    color: var(--white);

    font-size: clamp(100px, 37vw, 560px);
    font-weight: 400;
    line-height: 0.68;

    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;

    user-select: none;
    -webkit-user-select: none;
}

/* RESPONSIVE — Tablet */

@media (max-width: 900px) {

    .site-footer-navigation {
        grid-template-columns:
            minmax(170px, 1fr)
            minmax(200px, 1fr);

        gap: 54px;

        padding:
            58px
            22px
            94px;
    }

    .site-footer-legal {
        padding:
            0
            22px
            96px;
    }

    .site-footer-brand {
        padding:
            0
            0
            10px;

        font-size: clamp(92px, 37vw, 420px);
        line-height: 0.7;
    }
}

/* RESPONSIVE — Móvil */

@media (max-width: 560px) {

    .site-footer-navigation {
        grid-template-columns: 1fr;

        gap: 54px;

        padding:
            54px
            18px
            76px;
    }

    .site-footer-column-title {
        font-size: 11px;
    }

    .site-footer-nav {
        gap: 22px;
        margin-top: 22px;
    }

    .site-footer-link {
        font-size: 13px;
    }

    .site-footer-legal {
        padding:
            0
            18px
            86px;

        font-size: 12px;
        line-height: 1.55;
    }

    .site-footer-brand {
        padding:
            0
            0
            8px;

        font-size: clamp(82px, 37vw, 280px);
        line-height: 0.72;
    }
}
/* =========================================================
   HERO INTERACTION — CTA visual del slide activo
   ========================================================= */

.hero-campaign-hitarea {
    position: absolute;
    inset: 0;
    z-index: 4;

    display: block;
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;

    cursor: pointer;
    text-align: left;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.hero-campaign-hitarea:focus {
    outline: none;
}

.hero-campaign-hitarea:focus-visible .hero-campaign-cta-label {
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.96),
        0 0 0 4px rgba(9, 9, 9, 0.34);
}

.hero-campaign-hitarea:focus-visible .hero-campaign-cta-arrow {
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.96),
        0 0 0 4px rgba(9, 9, 9, 0.34);
}

.hero-campaign-cta {
    position: absolute;
    left: clamp(24px, 7.2vw, 108px);
    bottom: clamp(20px, 4.1vw, 54px);

    display: inline-flex;
    align-items: center;
    gap: 8px;

    pointer-events: none;
}

.hero-campaign-cta-label,
.hero-campaign-cta-arrow {
    display: grid;
    place-items: center;

    color: rgba(9, 9, 9, 0.94);
    background: rgba(255, 255, 255, 0.97);

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

    transition:
        transform var(--speed-fast) ease,
        box-shadow var(--speed-fast) ease;
}

.hero-campaign-cta-label {
    min-height: 38px;
    padding: 0 17px;
    border-radius: 999px;
    font-size: clamp(11px, 0.83vw, 14px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.hero-campaign-cta-arrow {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
}

.hero-campaign-cta-arrow svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-campaign-hitarea:hover .hero-campaign-cta-label,
.hero-campaign-hitarea:hover .hero-campaign-cta-arrow {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.11);
}

.hero-campaign-hitarea:active .hero-campaign-cta-label,
.hero-campaign-hitarea:active .hero-campaign-cta-arrow {
    transform: translateY(0) scale(0.985);
}

@media (max-width: 900px) {

    .hero-campaign-cta {
        left: clamp(20px, 5.5vw, 52px);
        bottom: clamp(18px, 4.8vw, 40px);
        gap: 7px;
    }

    .hero-campaign-cta-label {
        min-height: 36px;
        padding: 0 16px;
        font-size: clamp(10px, 1.35vw, 12px);
    }

    .hero-campaign-cta-arrow {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
}

@media (max-width: 560px) {

    .hero-campaign-cta {
        left: 18px;
        bottom: 16px;
        gap: 6px;
    }

    .hero-campaign-cta-label {
        min-height: 34px;
        padding: 0 14px;
        font-size: 10px;
    }

    .hero-campaign-cta-arrow {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .hero-campaign-cta-arrow svg {
        width: 14px;
        height: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-campaign-cta-label,
    .hero-campaign-cta-arrow {
        transition: none;
    }
}

/* =========================================================
   YIRU CEMENTOS — Vista interna del catálogo
   ========================================================= */

.yiru-cementos-view {
    width: 100%;
    min-height: 100vh;
    margin-top: var(--header-height);
    background: #f1f1f1;
}

.yiru-cementos-brands {
    position: relative;
    width: 100%;
    padding: 16px 24px 22px;
    background: var(--white);
}

.yiru-cementos-brands-inner {
    position: relative;
    width: min(100%, 1280px);
    margin: 0 auto;
}

.yiru-cementos-brands-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    outline: none;
}

.yiru-cementos-brands-viewport::-webkit-scrollbar {
    display: none;
}

.yiru-cementos-brands-track {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    width: max-content;
    min-width: 100%;
    padding: 0 2px 2px;
}

.yiru-cementos-brand-card {
    flex: 0 0 156px;
    width: 156px;
    padding: 0;
    cursor: pointer;
    text-align: center;
    outline: none;
}

.yiru-cementos-brand-visual {
    display: grid;
    place-items: center;
    width: 100%;
    height: 118px;
    padding: 18px 14px;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.18);
    border-radius: 12px;
    transition:
        border-color var(--speed-fast) ease,
        box-shadow var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-cementos-brand-card:hover .yiru-cementos-brand-visual {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.yiru-cementos-brand-card.is-active .yiru-cementos-brand-visual {
    border-color: rgba(9, 9, 9, 0.82);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.06);
}

.yiru-cementos-brand-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 122px;
    max-height: 58px;
    object-fit: contain;
}

.yiru-cementos-brand-name {
    display: block;
    margin-top: 10px;
    color: rgba(9, 9, 9, 0.88);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
}

.yiru-cementos-brand-card:focus-visible .yiru-cementos-brand-visual {
    outline: 1px solid rgba(9, 9, 9, 0.76);
    outline-offset: 3px;
}

.yiru-cementos-brand-control {
    position: absolute;
    top: 48px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 42px;
    height: 54px;
    color: rgba(9, 9, 9, 0.82);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(9, 9, 9, 0.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        transform var(--speed-fast) ease,
        box-shadow var(--speed-fast) ease;
}

.yiru-cementos-brand-control svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yiru-cementos-brand-control-prev { left: 0; }
.yiru-cementos-brand-control-next { right: 0; }

.yiru-cementos-brand-control:hover {
    transform: translateY(-50%) scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
}

.yiru-cementos-brand-control:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.76);
    outline-offset: 2px;
}

.yiru-cementos-brand-control[hidden] { display: none; }

.yiru-cementos-products {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: 22px 24px 80px;
}

.yiru-cementos-product-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}

.yiru-cementos-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    padding: 0;
    color: var(--black);
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.10);
    border-radius: 14px;
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    transition:
        border-color var(--speed-fast) ease,
        box-shadow var(--speed-fast) ease;
}

.yiru-cementos-product-card:hover {
    border-color: rgba(9, 9, 9, 0.18);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.yiru-cementos-product-card:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.78);
    outline-offset: 3px;
}

.yiru-cementos-product-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--white);
    border-bottom: 1px solid rgba(9, 9, 9, 0.08);
}

.yiru-cementos-product-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.yiru-cementos-product-image[hidden] { display: none; }

.yiru-cementos-product-content {
    display: flex;
    flex-direction: column;
    min-height: 126px;
    padding: 14px 15px 15px;
}

.yiru-cementos-product-brand {
    margin: 0;
    color: rgba(9, 9, 9, 0.60);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.yiru-cementos-product-name {
    margin: 7px 0 0;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -0.012em;
}

.yiru-cementos-quote {
    display: none;
    align-self: flex-start;
    margin-top: auto;
    padding: 10px 12px;
    color: var(--black);
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.72);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    transition:
        background-color var(--speed-fast) ease,
        color var(--speed-fast) ease,
        border-color var(--speed-fast) ease;
}

.yiru-cementos-quote::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 7px;
    border-top: 1.3px solid currentColor;
    border-right: 1.3px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
}

@media (hover: hover) and (pointer: fine) {

    .yiru-cementos-product-card:hover .yiru-cementos-quote {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 1180px) {

    .yiru-cementos-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {

    .yiru-cementos-brands { padding-inline: 18px; }

    .yiru-cementos-brands-track { justify-content: flex-start; }

    .yiru-cementos-brand-card {
        flex-basis: 152px;
        width: 152px;
    }

    .yiru-cementos-brand-visual { height: 108px; }

    .yiru-cementos-brand-control {
        width: 38px;
        height: 50px;
        top: 46px;
    }

    .yiru-cementos-products { padding-inline: 18px; }

    .yiru-cementos-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {

    .yiru-cementos-brands { padding: 12px 14px 20px; }
    .yiru-cementos-brands-track { gap: 10px; }

    .yiru-cementos-brand-card {
        flex-basis: 136px;
        width: 136px;
    }

    .yiru-cementos-brand-visual {
        height: 92px;
        padding: 12px 10px;
        border-radius: 11px;
    }

    .yiru-cementos-brand-logo {
        max-width: 106px;
        max-height: 46px;
    }

    .yiru-cementos-brand-name {
        margin-top: 8px;
        font-size: 12px;
    }

    .yiru-cementos-brand-control {
        width: 34px;
        height: 44px;
        top: 41px;
    }

    .yiru-cementos-brand-control svg {
        width: 18px;
        height: 18px;
    }

    .yiru-cementos-products { padding: 16px 14px 64px; }

    .yiru-cementos-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .yiru-cementos-product-card { border-radius: 12px; }

    .yiru-cementos-product-content {
        min-height: 96px;
        padding: 12px;
    }

    .yiru-cementos-product-brand { font-size: 10px; }

    .yiru-cementos-product-name {
        font-size: 15px;
        line-height: 1.18;
    }
}

@media (max-width: 380px) {
    .yiru-cementos-product-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {

    .yiru-cementos-brands-viewport { scroll-behavior: auto; }

    .yiru-cementos-brand-visual,
    .yiru-cementos-brand-control,
    .yiru-cementos-product-card,
    .yiru-cementos-quote {
        transition-duration: 0.01ms !important;
    }
}
/* =========================================================
   YIRU HOLCIM — FICHAS DE PRODUCTO
   ========================================================= */

/* =========================================================
   CATALOGO — Galería de tarjetas Holcim
   ========================================================= */

.yiru-cementos-product-card[data-brand-id="holcim"] .yiru-cementos-product-image-wrap {
    position: relative;
    isolation: isolate;
}

.yiru-holcim-card-gallery-control {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: none;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #ffffff;
    background: rgba(9, 9, 9, 0.48);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(-50%);
    transition:
        background-color var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-holcim-card-gallery-control svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yiru-holcim-card-gallery-control-prev {
    left: 10px;
}

.yiru-holcim-card-gallery-control-next {
    right: 10px;
}

@media (hover: hover) and (pointer: fine) {

    .yiru-cementos-product-card[data-brand-id="holcim"].has-yiru-holcim-gallery:hover
    .yiru-holcim-card-gallery-control {
        display: grid;
    }

    .yiru-holcim-card-gallery-control:hover {
        background: rgba(9, 9, 9, 0.68);
    }

    .yiru-holcim-card-gallery-control:active {
        transform: translateY(-50%) scale(0.96);
    }
}

@media (pointer: coarse) {

    .yiru-cementos-product-card[data-brand-id="holcim"] .yiru-cementos-quote {
        display: none !important;
    }
}

/* =========================================================
   FICHA — Contenedor y navegación
   ========================================================= */

.yiru-holcim-detail-view {
    width: 100%;
    background: var(--white);
}

.yiru-holcim-detail-shell {
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: calc(var(--header-height) + 28px) 24px 84px;
}

.yiru-holcim-detail-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    color: rgba(9, 9, 9, 0.62);
    font-size: 13px;
    line-height: 1.4;
}

.yiru-holcim-detail-breadcrumb a {
    color: rgba(9, 9, 9, 0.62);
    text-decoration: none;
}

.yiru-holcim-detail-breadcrumb a:hover {
    text-decoration: underline;
}

.yiru-holcim-detail-breadcrumb-current {
    color: rgba(9, 9, 9, 0.90);
}

/* =========================================================
   FICHA — Dos columnas y desplazamiento natural
   ========================================================= */

.yiru-holcim-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.44fr) minmax(320px, 0.76fr);
    gap: clamp(36px, 5vw, 76px);
    align-items: start;
}

.yiru-holcim-detail-left {
    min-width: 0;
}

.yiru-holcim-detail-info {
    position: sticky;
    top: calc(var(--header-height) + 28px);
    align-self: start;
    min-width: 0;
    padding-bottom: 24px;
}

.yiru-holcim-detail-title {
    margin: 0;
    color: var(--black);
    font-size: clamp(30px, 3.1vw, 48px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.yiru-holcim-detail-summary {
    max-width: 640px;
    margin: 24px 0 0;
    color: rgba(9, 9, 9, 0.68);
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.62;
}

.yiru-holcim-detail-subheading {
    margin: 34px 0 16px;
    color: var(--black);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.yiru-holcim-detail-features {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: rgba(9, 9, 9, 0.78);
    font-size: 15px;
    line-height: 1.58;
}

.yiru-holcim-detail-spec-link {
    display: inline-flex;
    margin-top: 22px;
    padding: 0;
    color: rgba(9, 9, 9, 0.76);
    border-bottom: 1px solid rgba(9, 9, 9, 0.35);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.35;
}

.yiru-holcim-detail-spec-link:hover {
    color: var(--black);
    border-bottom-color: var(--black);
}

.yiru-holcim-detail-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin-top: 28px;
    padding: 0 22px;
    color: var(--white);
    background: var(--black);
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition:
        opacity var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-holcim-detail-quote:hover {
    opacity: 0.86;
    transform: translateY(-1px);
}

.yiru-holcim-detail-quote:active {
    transform: translateY(0);
}

.yiru-holcim-detail-spec-link:focus-visible,
.yiru-holcim-detail-quote:focus-visible,
.yiru-holcim-section-toggle:focus-visible,
.yiru-holcim-expand-control:focus-visible,
.yiru-holcim-thumbnail:focus-visible,
.yiru-holcim-detail-control:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.8);
    outline-offset: 3px;
}

/* =========================================================
   GALERÍA — Miniaturas e imagen principal
   ========================================================= */

.yiru-holcim-gallery {
    min-width: 0;
}

.yiru-holcim-gallery-layout {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.yiru-holcim-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.yiru-holcim-thumbnail {
    display: grid;
    place-items: center;
    width: 92px;
    aspect-ratio: 4 / 5;
    padding: 5px;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.14);
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
}

.yiru-holcim-thumbnail.is-active {
    border-color: rgba(9, 9, 9, 0.74);
}

.yiru-holcim-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.yiru-holcim-detail-stage {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.14);
}

.yiru-holcim-detail-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 180ms ease;
    will-change: transform;
}

.yiru-holcim-detail-image.is-zoomed {
    transform: scale(2.05);
}

.yiru-holcim-detail-control {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--white);
    background: rgba(9, 9, 9, 0.46);
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        background-color var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-holcim-detail-control:hover {
    background: rgba(9, 9, 9, 0.66);
}

.yiru-holcim-detail-control:active {
    transform: translateY(-50%) scale(0.96);
}

.yiru-holcim-detail-control-prev {
    left: 14px;
}

.yiru-holcim-detail-control-next {
    right: 14px;
}

.yiru-holcim-detail-control svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yiru-holcim-detail-control[hidden] {
    display: none;
}

@media (pointer: coarse) {

    .yiru-holcim-detail-control {
        display: none;
    }
}

/* =========================================================
   SECCIONES — Información adicional y especificaciones
   ========================================================= */

.yiru-holcim-detail-sections {
    display: grid;
    gap: 12px;
    margin-top: 38px;
}

.yiru-holcim-collapsible {
    overflow: hidden;
    border: 1px solid rgba(9, 9, 9, 0.13);
    border-radius: 14px;
    scroll-margin-top: calc(var(--header-height) + 24px);
}

.yiru-holcim-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    padding: 0 18px;
    color: rgba(9, 9, 9, 0.90);
    background: #f7f7f7;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
}

.yiru-holcim-collapsible.is-open .yiru-holcim-section-toggle {
    background: var(--white);
}

.yiru-holcim-section-toggle svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--speed-fast) ease;
}

.yiru-holcim-collapsible.is-open .yiru-holcim-section-toggle svg {
    transform: rotate(180deg);
}

.yiru-holcim-section-body {
    padding: 0 18px 20px;
    background: var(--white);
}

.yiru-holcim-additional-content {
    padding-top: 2px;
}

.yiru-holcim-additional-group {
    padding: 22px 0 0;
}

.yiru-holcim-additional-group + .yiru-holcim-additional-group {
    border-top: 1px solid rgba(9, 9, 9, 0.08);
}

.yiru-holcim-additional-group h3 {
    margin: 0 0 12px;
    color: rgba(9, 9, 9, 0.90);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.yiru-holcim-additional-group ul {
    margin: 0;
    padding-left: 19px;
    color: rgba(9, 9, 9, 0.74);
    font-size: 15px;
    line-height: 1.64;
}

.yiru-holcim-additional-group li + li {
    margin-top: 7px;
}

.yiru-holcim-expand-control {
    display: block;
    margin: 18px auto 0;
    padding: 0;
    color: rgba(9, 9, 9, 0.86);
    border-bottom: 1px solid rgba(9, 9, 9, 0.40);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.35;
}

.yiru-holcim-spec-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 2px;
}

.yiru-holcim-spec-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    color: rgba(9, 9, 9, 0.78);
    font-size: 14px;
    line-height: 1.45;
}

.yiru-holcim-spec-table th,
.yiru-holcim-spec-table td {
    padding: 16px 17px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(9, 9, 9, 0.08);
}

.yiru-holcim-spec-table tr:not(.yiru-holcim-spec-group):nth-child(odd) th,
.yiru-holcim-spec-table tr:not(.yiru-holcim-spec-group):nth-child(odd) td {
    background: #f7f7f7;
}

.yiru-holcim-spec-table tr[data-yiru-expand-group][hidden] {
    display: none;
}

.yiru-holcim-spec-table th[scope="row"] {
    width: 52%;
    color: rgba(9, 9, 9, 0.88);
    font-weight: 600;
}

.yiru-holcim-spec-table td {
    color: rgba(9, 9, 9, 0.74);
}

.yiru-holcim-spec-group th {
    padding: 18px 17px 9px;
    color: rgba(9, 9, 9, 0.72);
    background: var(--white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 0;
}

/* =========================================================
   VISOR TÁCTIL — Imagen ampliada
   ========================================================= */

.yiru-holcim-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(7, 7, 7, 0.94);
    touch-action: none;
}

.yiru-holcim-image-viewer.is-open {
    display: flex;
}

.yiru-holcim-viewer-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
}

.yiru-holcim-viewer-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center;
    touch-action: none;
}

.yiru-holcim-viewer-image.is-animated {
    transition: transform 220ms ease;
}

body.yiru-holcim-viewer-open {
    overflow: hidden;
}

/* =========================================================
   RESPONSIVE — Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .yiru-holcim-detail-shell {
        padding-inline: 20px;
    }

    .yiru-holcim-detail-layout {
        grid-template-columns: minmax(0, 1.28fr) minmax(290px, 0.72fr);
        gap: 34px;
    }

    .yiru-holcim-detail-title {
        font-size: clamp(28px, 4vw, 40px);
    }

    .yiru-holcim-detail-summary {
        font-size: 16px;
    }

    .yiru-holcim-detail-info {
        top: calc(var(--header-height) + 20px);
    }
}

/* =========================================================
   RESPONSIVE — Móvil y tablet vertical
   ========================================================= */

@media (max-width: 900px) {

    .yiru-holcim-detail-shell {
        padding: calc(var(--header-height) + 22px) 18px 64px;
    }

    .yiru-holcim-detail-layout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .yiru-holcim-detail-info,
    .yiru-holcim-detail-left {
        position: static;
        order: initial;
    }

    .yiru-holcim-detail-title {
        font-size: clamp(30px, 6vw, 42px);
    }

    .yiru-holcim-detail-summary {
        max-width: 760px;
    }

    .yiru-holcim-detail-quote {
        max-width: 520px;
    }
}

@media (max-width: 640px) {

    .yiru-holcim-detail-shell {
        padding: calc(var(--header-height) + 18px) 14px 52px;
    }

    .yiru-holcim-detail-breadcrumb {
        margin-bottom: 18px;
        font-size: 12px;
    }

    .yiru-holcim-detail-layout {
        gap: 28px;
    }

    .yiru-holcim-gallery-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .yiru-holcim-thumbnails {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .yiru-holcim-thumbnail {
        width: 100%;
        max-width: none;
    }

    .yiru-holcim-detail-stage {
        aspect-ratio: 1 / 1;
    }

    .yiru-holcim-detail-info {
        padding-bottom: 0;
    }

    .yiru-holcim-detail-title {
        font-size: clamp(27px, 8vw, 36px);
        line-height: 1.08;
    }

    .yiru-holcim-detail-summary {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.56;
    }

    .yiru-holcim-detail-subheading {
        margin-top: 26px;
    }

    .yiru-holcim-detail-features {
        font-size: 14px;
        line-height: 1.52;
    }

    .yiru-holcim-detail-quote {
        min-height: 48px;
        margin-top: 24px;
    }

    .yiru-holcim-detail-sections {
        margin-top: 28px;
    }

    .yiru-holcim-section-toggle {
        min-height: 54px;
        padding-inline: 15px;
        font-size: 14px;
    }

    .yiru-holcim-section-body {
        padding: 0 15px 18px;
    }

    .yiru-holcim-additional-group h3 {
        font-size: 11px;
    }

    .yiru-holcim-additional-group ul {
        font-size: 14px;
    }

    .yiru-holcim-spec-table {
        min-width: 0;
        font-size: 13px;
    }

    .yiru-holcim-spec-table th,
    .yiru-holcim-spec-table td {
        padding: 13px 12px;
    }

    .yiru-holcim-spec-table th[scope="row"] {
        width: 52%;
    }

    .yiru-holcim-image-viewer {
        background: rgba(7, 7, 7, 0.96);
    }

    .yiru-holcim-viewer-image {
        max-width: 96vw;
        max-height: 94vh;
    }
}

/* =========================================================
   MOTION — Preferencia de movimiento reducido
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .yiru-holcim-card-gallery-control,
    .yiru-holcim-detail-image,
    .yiru-holcim-detail-control,
    .yiru-holcim-section-toggle svg,
    .yiru-holcim-viewer-image {
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   YIRU INKA — FICHAS DE PRODUCTO
   ========================================================= */

/* =========================================================
   CATALOGO — Galería de tarjetas Inka
   ========================================================= */

.yiru-cementos-product-card[data-brand-id="inka"] .yiru-cementos-product-image-wrap {
    position: relative;
    isolation: isolate;
}

.yiru-inka-card-gallery-control {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: none;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #ffffff;
    background: rgba(9, 9, 9, 0.48);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(-50%);
    transition:
        background-color var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-inka-card-gallery-control svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yiru-inka-card-gallery-control-prev {
    left: 10px;
}

.yiru-inka-card-gallery-control-next {
    right: 10px;
}

@media (hover: hover) and (pointer: fine) {

    .yiru-cementos-product-card[data-brand-id="inka"].has-yiru-inka-gallery:hover
    .yiru-inka-card-gallery-control {
        display: grid;
    }

    .yiru-inka-card-gallery-control:hover {
        background: rgba(9, 9, 9, 0.68);
    }

    .yiru-inka-card-gallery-control:active {
        transform: translateY(-50%) scale(0.96);
    }
}

@media (pointer: coarse) {

    .yiru-cementos-product-card[data-brand-id="inka"] .yiru-cementos-quote {
        display: none !important;
    }
}

/* =========================================================
   FICHA — Contenedor y navegación
   ========================================================= */

.yiru-inka-detail-view {
    width: 100%;
    background: var(--white);
}

.yiru-inka-detail-shell {
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: calc(var(--header-height) + 28px) 24px 84px;
}

.yiru-inka-detail-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    color: rgba(9, 9, 9, 0.62);
    font-size: 13px;
    line-height: 1.4;
}

.yiru-inka-detail-breadcrumb a {
    color: rgba(9, 9, 9, 0.62);
    text-decoration: none;
}

.yiru-inka-detail-breadcrumb a:hover {
    text-decoration: underline;
}

.yiru-inka-detail-breadcrumb-current {
    color: rgba(9, 9, 9, 0.90);
}

/* =========================================================
   FICHA — Dos columnas y desplazamiento natural
   ========================================================= */

.yiru-inka-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.44fr) minmax(320px, 0.76fr);
    gap: clamp(36px, 5vw, 76px);
    align-items: start;
}

.yiru-inka-detail-left {
    min-width: 0;
}

.yiru-inka-detail-info {
    position: sticky;
    top: calc(var(--header-height) + 28px);
    align-self: start;
    min-width: 0;
    padding-bottom: 24px;
}

.yiru-inka-detail-title {
    margin: 0;
    color: var(--black);
    font-size: clamp(30px, 3.1vw, 48px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.yiru-inka-detail-summary {
    max-width: 640px;
    margin: 24px 0 0;
    color: rgba(9, 9, 9, 0.68);
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.62;
}

.yiru-inka-detail-subheading {
    margin: 34px 0 16px;
    color: var(--black);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.yiru-inka-detail-features {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: rgba(9, 9, 9, 0.78);
    font-size: 15px;
    line-height: 1.58;
}

.yiru-inka-detail-spec-link {
    display: inline-flex;
    margin-top: 22px;
    padding: 0;
    color: rgba(9, 9, 9, 0.76);
    border-bottom: 1px solid rgba(9, 9, 9, 0.35);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.35;
}

.yiru-inka-detail-spec-link:hover {
    color: var(--black);
    border-bottom-color: var(--black);
}

.yiru-inka-detail-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin-top: 28px;
    padding: 0 22px;
    color: var(--white);
    background: var(--black);
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition:
        opacity var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-inka-detail-quote:hover {
    opacity: 0.86;
    transform: translateY(-1px);
}

.yiru-inka-detail-quote:active {
    transform: translateY(0);
}

.yiru-inka-detail-spec-link:focus-visible,
.yiru-inka-detail-quote:focus-visible,
.yiru-inka-section-toggle:focus-visible,
.yiru-inka-expand-control:focus-visible,
.yiru-inka-thumbnail:focus-visible,
.yiru-inka-detail-control:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.8);
    outline-offset: 3px;
}

/* =========================================================
   GALERÍA — Miniaturas e imagen principal
   ========================================================= */

.yiru-inka-gallery {
    min-width: 0;
}

.yiru-inka-gallery-layout {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.yiru-inka-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.yiru-inka-thumbnail {
    display: grid;
    place-items: center;
    width: 92px;
    aspect-ratio: 4 / 5;
    padding: 5px;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.14);
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
}

.yiru-inka-thumbnail.is-active {
    border-color: rgba(9, 9, 9, 0.74);
}

.yiru-inka-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.yiru-inka-detail-stage {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.14);
}

.yiru-inka-detail-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 180ms ease;
    will-change: transform;
}

.yiru-inka-detail-image.is-zoomed {
    transform: scale(2.05);
}

.yiru-inka-detail-control {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--white);
    background: rgba(9, 9, 9, 0.46);
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        background-color var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-inka-detail-control:hover {
    background: rgba(9, 9, 9, 0.66);
}

.yiru-inka-detail-control:active {
    transform: translateY(-50%) scale(0.96);
}

.yiru-inka-detail-control-prev {
    left: 14px;
}

.yiru-inka-detail-control-next {
    right: 14px;
}

.yiru-inka-detail-control svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yiru-inka-detail-control[hidden] {
    display: none;
}

@media (pointer: coarse) {

    .yiru-inka-detail-control {
        display: none;
    }
}

/* =========================================================
   SECCIONES — Información adicional y especificaciones
   ========================================================= */

.yiru-inka-detail-sections {
    display: grid;
    gap: 12px;
    margin-top: 38px;
}

.yiru-inka-collapsible {
    overflow: hidden;
    border: 1px solid rgba(9, 9, 9, 0.13);
    border-radius: 14px;
    scroll-margin-top: calc(var(--header-height) + 24px);
}

.yiru-inka-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    padding: 0 18px;
    color: rgba(9, 9, 9, 0.90);
    background: #f7f7f7;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
}

.yiru-inka-collapsible.is-open .yiru-inka-section-toggle {
    background: var(--white);
}

.yiru-inka-section-toggle svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--speed-fast) ease;
}

.yiru-inka-collapsible.is-open .yiru-inka-section-toggle svg {
    transform: rotate(180deg);
}

.yiru-inka-section-body {
    padding: 0 18px 20px;
    background: var(--white);
}

.yiru-inka-additional-content {
    padding-top: 2px;
}

.yiru-inka-additional-group {
    padding: 22px 0 0;
}

.yiru-inka-additional-group + .yiru-inka-additional-group {
    border-top: 1px solid rgba(9, 9, 9, 0.08);
}

.yiru-inka-additional-group h3 {
    margin: 0 0 12px;
    color: rgba(9, 9, 9, 0.90);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.yiru-inka-additional-group ul {
    margin: 0;
    padding-left: 19px;
    color: rgba(9, 9, 9, 0.74);
    font-size: 15px;
    line-height: 1.64;
}

.yiru-inka-additional-group li + li {
    margin-top: 7px;
}

.yiru-inka-expand-control {
    display: block;
    margin: 18px auto 0;
    padding: 0;
    color: rgba(9, 9, 9, 0.86);
    border-bottom: 1px solid rgba(9, 9, 9, 0.40);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.35;
}

.yiru-inka-spec-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 2px;
}

.yiru-inka-spec-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    color: rgba(9, 9, 9, 0.78);
    font-size: 14px;
    line-height: 1.45;
}

.yiru-inka-spec-table th,
.yiru-inka-spec-table td {
    padding: 16px 17px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(9, 9, 9, 0.08);
}

.yiru-inka-spec-table tr:not(.yiru-inka-spec-group):nth-child(odd) th,
.yiru-inka-spec-table tr:not(.yiru-inka-spec-group):nth-child(odd) td {
    background: #f7f7f7;
}

.yiru-inka-spec-table tr[data-yiru-expand-group][hidden] {
    display: none;
}

.yiru-inka-spec-table th[scope="row"] {
    width: 52%;
    color: rgba(9, 9, 9, 0.88);
    font-weight: 600;
}

.yiru-inka-spec-table td {
    color: rgba(9, 9, 9, 0.74);
}

.yiru-inka-spec-group th {
    padding: 18px 17px 9px;
    color: rgba(9, 9, 9, 0.72);
    background: var(--white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 0;
}

/* =========================================================
   VISOR TÁCTIL — Imagen ampliada
   ========================================================= */

.yiru-inka-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(7, 7, 7, 0.94);
    touch-action: none;
}

.yiru-inka-image-viewer.is-open {
    display: flex;
}

.yiru-inka-viewer-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
}

.yiru-inka-viewer-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center;
    touch-action: none;
}

.yiru-inka-viewer-image.is-animated {
    transition: transform 220ms ease;
}

body.yiru-inka-viewer-open {
    overflow: hidden;
}

/* =========================================================
   RESPONSIVE — Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .yiru-inka-detail-shell {
        padding-inline: 20px;
    }

    .yiru-inka-detail-layout {
        grid-template-columns: minmax(0, 1.28fr) minmax(290px, 0.72fr);
        gap: 34px;
    }

    .yiru-inka-detail-title {
        font-size: clamp(28px, 4vw, 40px);
    }

    .yiru-inka-detail-summary {
        font-size: 16px;
    }

    .yiru-inka-detail-info {
        top: calc(var(--header-height) + 20px);
    }
}

/* =========================================================
   RESPONSIVE — Móvil y tablet vertical
   ========================================================= */

@media (max-width: 900px) {

    .yiru-inka-detail-shell {
        padding: calc(var(--header-height) + 22px) 18px 64px;
    }

    .yiru-inka-detail-layout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .yiru-inka-detail-info,
    .yiru-inka-detail-left {
        position: static;
        order: initial;
    }

    .yiru-inka-detail-title {
        font-size: clamp(30px, 6vw, 42px);
    }

    .yiru-inka-detail-summary {
        max-width: 760px;
    }

    .yiru-inka-detail-quote {
        max-width: 520px;
    }
}

@media (max-width: 640px) {

    .yiru-inka-detail-shell {
        padding: calc(var(--header-height) + 18px) 14px 52px;
    }

    .yiru-inka-detail-breadcrumb {
        margin-bottom: 18px;
        font-size: 12px;
    }

    .yiru-inka-detail-layout {
        gap: 28px;
    }

    .yiru-inka-gallery-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .yiru-inka-thumbnails {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .yiru-inka-thumbnail {
        width: 100%;
        max-width: none;
    }

    .yiru-inka-detail-stage {
        aspect-ratio: 1 / 1;
    }

    .yiru-inka-detail-info {
        padding-bottom: 0;
    }

    .yiru-inka-detail-title {
        font-size: clamp(27px, 8vw, 36px);
        line-height: 1.08;
    }

    .yiru-inka-detail-summary {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.56;
    }

    .yiru-inka-detail-subheading {
        margin-top: 26px;
    }

    .yiru-inka-detail-features {
        font-size: 14px;
        line-height: 1.52;
    }

    .yiru-inka-detail-quote {
        min-height: 48px;
        margin-top: 24px;
    }

    .yiru-inka-detail-sections {
        margin-top: 28px;
    }

    .yiru-inka-section-toggle {
        min-height: 54px;
        padding-inline: 15px;
        font-size: 14px;
    }

    .yiru-inka-section-body {
        padding: 0 15px 18px;
    }

    .yiru-inka-additional-group h3 {
        font-size: 11px;
    }

    .yiru-inka-additional-group ul {
        font-size: 14px;
    }

    .yiru-inka-spec-table {
        min-width: 0;
        font-size: 13px;
    }

    .yiru-inka-spec-table th,
    .yiru-inka-spec-table td {
        padding: 13px 12px;
    }

    .yiru-inka-spec-table th[scope="row"] {
        width: 52%;
    }

    .yiru-inka-image-viewer {
        background: rgba(7, 7, 7, 0.96);
    }

    .yiru-inka-viewer-image {
        max-width: 96vw;
        max-height: 94vh;
    }
}

/* =========================================================
   MOTION — Preferencia de movimiento reducido
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .yiru-inka-card-gallery-control,
    .yiru-inka-detail-image,
    .yiru-inka-detail-control,
    .yiru-inka-section-toggle svg,
    .yiru-inka-viewer-image {
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   INFORMACIÓN ADICIONAL — Descripción Inka
   ========================================================= */

.yiru-inka-additional-description {
    max-width: 780px;
    margin: 0;
    padding-top: 22px;
    color: rgba(9, 9, 9, 0.78);
    font-size: 15px;
    line-height: 1.66;
}

.yiru-inka-additional-description + .yiru-inka-additional-group {
    margin-top: 22px;
    border-top: 1px solid rgba(9, 9, 9, 0.08);
    padding-top: 22px;
}

@media (max-width: 640px) {

    .yiru-inka-additional-description {
        font-size: 14px;
        line-height: 1.62;
    }
}

/* =========================================================
   YIRU YURA — FICHAS DE PRODUCTO
   ========================================================= */

/* =========================================================
   CATALOGO — Galería de tarjetas Yura
   ========================================================= */

.yiru-cementos-product-card[data-brand-id="yura"] .yiru-cementos-product-image-wrap {
    position: relative;
    isolation: isolate;
}

.yiru-yura-card-gallery-control {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: none;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #ffffff;
    background: rgba(9, 9, 9, 0.48);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(-50%);
    transition:
        background-color var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-yura-card-gallery-control svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yiru-yura-card-gallery-control-prev {
    left: 10px;
}

.yiru-yura-card-gallery-control-next {
    right: 10px;
}

@media (hover: hover) and (pointer: fine) {

    .yiru-cementos-product-card[data-brand-id="yura"].has-yiru-yura-gallery:hover
    .yiru-yura-card-gallery-control {
        display: grid;
    }

    .yiru-yura-card-gallery-control:hover {
        background: rgba(9, 9, 9, 0.68);
    }

    .yiru-yura-card-gallery-control:active {
        transform: translateY(-50%) scale(0.96);
    }
}

@media (pointer: coarse) {

    .yiru-cementos-product-card[data-brand-id="yura"] .yiru-cementos-quote {
        display: none !important;
    }
}

/* =========================================================
   FICHA — Contenedor y navegación
   ========================================================= */

.yiru-yura-detail-view {
    width: 100%;
    background: var(--white);
}

.yiru-yura-detail-shell {
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: calc(var(--header-height) + 28px) 24px 84px;
}

.yiru-yura-detail-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    color: rgba(9, 9, 9, 0.62);
    font-size: 13px;
    line-height: 1.4;
}

.yiru-yura-detail-breadcrumb a {
    color: rgba(9, 9, 9, 0.62);
    text-decoration: none;
}

.yiru-yura-detail-breadcrumb a:hover {
    text-decoration: underline;
}

.yiru-yura-detail-breadcrumb-current {
    color: rgba(9, 9, 9, 0.90);
}

/* =========================================================
   FICHA — Dos columnas y desplazamiento natural
   ========================================================= */

.yiru-yura-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.44fr) minmax(320px, 0.76fr);
    gap: clamp(36px, 5vw, 76px);
    align-items: start;
}

.yiru-yura-detail-left {
    min-width: 0;
}

.yiru-yura-detail-info {
    position: sticky;
    top: calc(var(--header-height) + 28px);
    align-self: start;
    min-width: 0;
    padding-bottom: 24px;
}

.yiru-yura-detail-title {
    margin: 0;
    color: var(--black);
    font-size: clamp(30px, 3.1vw, 48px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.yiru-yura-detail-summary {
    max-width: 640px;
    margin: 24px 0 0;
    color: rgba(9, 9, 9, 0.68);
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.62;
}

.yiru-yura-detail-subheading {
    margin: 34px 0 16px;
    color: var(--black);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.yiru-yura-detail-features {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: rgba(9, 9, 9, 0.78);
    font-size: 15px;
    line-height: 1.58;
}

.yiru-yura-detail-spec-link {
    display: inline-flex;
    margin-top: 22px;
    padding: 0;
    color: rgba(9, 9, 9, 0.76);
    border-bottom: 1px solid rgba(9, 9, 9, 0.35);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.35;
}

.yiru-yura-detail-spec-link:hover {
    color: var(--black);
    border-bottom-color: var(--black);
}

.yiru-yura-detail-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin-top: 28px;
    padding: 0 22px;
    color: var(--white);
    background: var(--black);
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition:
        opacity var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-yura-detail-quote:hover {
    opacity: 0.86;
    transform: translateY(-1px);
}

.yiru-yura-detail-quote:active {
    transform: translateY(0);
}

.yiru-yura-detail-spec-link:focus-visible,
.yiru-yura-detail-quote:focus-visible,
.yiru-yura-section-toggle:focus-visible,
.yiru-yura-expand-control:focus-visible,
.yiru-yura-thumbnail:focus-visible,
.yiru-yura-detail-control:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.8);
    outline-offset: 3px;
}

/* =========================================================
   GALERÍA — Miniaturas e imagen principal
   ========================================================= */

.yiru-yura-gallery {
    min-width: 0;
}

.yiru-yura-gallery-layout {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.yiru-yura-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.yiru-yura-thumbnail {
    display: grid;
    place-items: center;
    width: 92px;
    aspect-ratio: 4 / 5;
    padding: 5px;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.14);
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
}

.yiru-yura-thumbnail.is-active {
    border-color: rgba(9, 9, 9, 0.74);
}

.yiru-yura-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.yiru-yura-detail-stage {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.14);
}

.yiru-yura-detail-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 180ms ease;
    will-change: transform;
}

.yiru-yura-detail-image.is-zoomed {
    transform: scale(2.05);
}

.yiru-yura-detail-control {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--white);
    background: rgba(9, 9, 9, 0.46);
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        background-color var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-yura-detail-control:hover {
    background: rgba(9, 9, 9, 0.66);
}

.yiru-yura-detail-control:active {
    transform: translateY(-50%) scale(0.96);
}

.yiru-yura-detail-control-prev {
    left: 14px;
}

.yiru-yura-detail-control-next {
    right: 14px;
}

.yiru-yura-detail-control svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yiru-yura-detail-control[hidden] {
    display: none;
}

@media (pointer: coarse) {

    .yiru-yura-detail-control {
        display: none;
    }
}

/* =========================================================
   SECCIONES — Información adicional y especificaciones
   ========================================================= */

.yiru-yura-detail-sections {
    display: grid;
    gap: 12px;
    margin-top: 38px;
}

.yiru-yura-collapsible {
    overflow: hidden;
    border: 1px solid rgba(9, 9, 9, 0.13);
    border-radius: 14px;
    scroll-margin-top: calc(var(--header-height) + 24px);
}

.yiru-yura-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    padding: 0 18px;
    color: rgba(9, 9, 9, 0.90);
    background: #f7f7f7;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
}

.yiru-yura-collapsible.is-open .yiru-yura-section-toggle {
    background: var(--white);
}

.yiru-yura-section-toggle svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--speed-fast) ease;
}

.yiru-yura-collapsible.is-open .yiru-yura-section-toggle svg {
    transform: rotate(180deg);
}

.yiru-yura-section-body {
    padding: 0 18px 20px;
    background: var(--white);
}

.yiru-yura-additional-content {
    padding-top: 2px;
}

.yiru-yura-additional-group {
    padding: 22px 0 0;
}

.yiru-yura-additional-group + .yiru-yura-additional-group {
    border-top: 1px solid rgba(9, 9, 9, 0.08);
}

.yiru-yura-additional-group h3 {
    margin: 0 0 12px;
    color: rgba(9, 9, 9, 0.90);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.yiru-yura-additional-group ul {
    margin: 0;
    padding-left: 19px;
    color: rgba(9, 9, 9, 0.74);
    font-size: 15px;
    line-height: 1.64;
}

.yiru-yura-additional-group li + li {
    margin-top: 7px;
}

.yiru-yura-expand-control {
    display: block;
    margin: 18px auto 0;
    padding: 0;
    color: rgba(9, 9, 9, 0.86);
    border-bottom: 1px solid rgba(9, 9, 9, 0.40);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.35;
}

.yiru-yura-spec-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 2px;
}

.yiru-yura-spec-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    color: rgba(9, 9, 9, 0.78);
    font-size: 14px;
    line-height: 1.45;
}

.yiru-yura-spec-table th,
.yiru-yura-spec-table td {
    padding: 16px 17px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(9, 9, 9, 0.08);
}

.yiru-yura-spec-table tr:not(.yiru-yura-spec-group):nth-child(odd) th,
.yiru-yura-spec-table tr:not(.yiru-yura-spec-group):nth-child(odd) td {
    background: #f7f7f7;
}

.yiru-yura-spec-table tr[data-yiru-expand-group][hidden] {
    display: none;
}

.yiru-yura-spec-table th[scope="row"] {
    width: 52%;
    color: rgba(9, 9, 9, 0.88);
    font-weight: 600;
}

.yiru-yura-spec-table td {
    color: rgba(9, 9, 9, 0.74);
}

.yiru-yura-spec-group th {
    padding: 18px 17px 9px;
    color: rgba(9, 9, 9, 0.72);
    background: var(--white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 0;
}

/* =========================================================
   VISOR TÁCTIL — Imagen ampliada
   ========================================================= */

.yiru-yura-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(7, 7, 7, 0.94);
    touch-action: none;
}

.yiru-yura-image-viewer.is-open {
    display: flex;
}

.yiru-yura-viewer-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
}

.yiru-yura-viewer-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center;
    touch-action: none;
}

.yiru-yura-viewer-image.is-animated {
    transition: transform 220ms ease;
}

body.yiru-yura-viewer-open {
    overflow: hidden;
}

/* =========================================================
   RESPONSIVE — Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .yiru-yura-detail-shell {
        padding-inline: 20px;
    }

    .yiru-yura-detail-layout {
        grid-template-columns: minmax(0, 1.28fr) minmax(290px, 0.72fr);
        gap: 34px;
    }

    .yiru-yura-detail-title {
        font-size: clamp(28px, 4vw, 40px);
    }

    .yiru-yura-detail-summary {
        font-size: 16px;
    }

    .yiru-yura-detail-info {
        top: calc(var(--header-height) + 20px);
    }
}

/* =========================================================
   RESPONSIVE — Móvil y tablet vertical
   ========================================================= */

@media (max-width: 900px) {

    .yiru-yura-detail-shell {
        padding: calc(var(--header-height) + 22px) 18px 64px;
    }

    .yiru-yura-detail-layout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .yiru-yura-detail-info,
    .yiru-yura-detail-left {
        position: static;
        order: initial;
    }

    .yiru-yura-detail-title {
        font-size: clamp(30px, 6vw, 42px);
    }

    .yiru-yura-detail-summary {
        max-width: 760px;
    }

    .yiru-yura-detail-quote {
        max-width: 520px;
    }
}

@media (max-width: 640px) {

    .yiru-yura-detail-shell {
        padding: calc(var(--header-height) + 18px) 14px 52px;
    }

    .yiru-yura-detail-breadcrumb {
        margin-bottom: 18px;
        font-size: 12px;
    }

    .yiru-yura-detail-layout {
        gap: 28px;
    }

    .yiru-yura-gallery-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .yiru-yura-thumbnails {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .yiru-yura-thumbnail {
        width: 100%;
        max-width: none;
    }

    .yiru-yura-detail-stage {
        aspect-ratio: 1 / 1;
    }

    .yiru-yura-detail-info {
        padding-bottom: 0;
    }

    .yiru-yura-detail-title {
        font-size: clamp(27px, 8vw, 36px);
        line-height: 1.08;
    }

    .yiru-yura-detail-summary {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.56;
    }

    .yiru-yura-detail-subheading {
        margin-top: 26px;
    }

    .yiru-yura-detail-features {
        font-size: 14px;
        line-height: 1.52;
    }

    .yiru-yura-detail-quote {
        min-height: 48px;
        margin-top: 24px;
    }

    .yiru-yura-detail-sections {
        margin-top: 28px;
    }

    .yiru-yura-section-toggle {
        min-height: 54px;
        padding-inline: 15px;
        font-size: 14px;
    }

    .yiru-yura-section-body {
        padding: 0 15px 18px;
    }

    .yiru-yura-additional-group h3 {
        font-size: 11px;
    }

    .yiru-yura-additional-group ul {
        font-size: 14px;
    }

    .yiru-yura-spec-table {
        min-width: 0;
        font-size: 13px;
    }

    .yiru-yura-spec-table th,
    .yiru-yura-spec-table td {
        padding: 13px 12px;
    }

    .yiru-yura-spec-table th[scope="row"] {
        width: 52%;
    }

    .yiru-yura-image-viewer {
        background: rgba(7, 7, 7, 0.96);
    }

    .yiru-yura-viewer-image {
        max-width: 96vw;
        max-height: 94vh;
    }
}

/* =========================================================
   MOTION — Preferencia de movimiento reducido
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .yiru-yura-card-gallery-control,
    .yiru-yura-detail-image,
    .yiru-yura-detail-control,
    .yiru-yura-section-toggle svg,
    .yiru-yura-viewer-image {
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   INFORMACIÓN ADICIONAL — Descripción Yura
   ========================================================= */

.yiru-yura-additional-paragraph {
    max-width: 780px;
    margin: 0;
    padding-top: 22px;
    color: rgba(9, 9, 9, 0.78);
    font-size: 15px;
    line-height: 1.66;
}

.yiru-yura-additional-paragraph + .yiru-yura-additional-group {
    margin-top: 22px;
    border-top: 1px solid rgba(9, 9, 9, 0.08);
    padding-top: 22px;
}

@media (max-width: 640px) {

    .yiru-yura-additional-paragraph {
        font-size: 14px;
        line-height: 1.62;
    }
}


/* =========================================================
   INFORMACIÓN ADICIONAL — Estructura dinámica Yura
   ========================================================= */

.yiru-yura-additional-paragraph {
    max-width: 820px;
    margin: 0;
    padding-top: 22px;
    color: rgba(9, 9, 9, 0.78);
    font-size: 15px;
    line-height: 1.66;
}

.yiru-yura-additional-paragraph + .yiru-yura-additional-group {
    margin-top: 22px;
    border-top: 1px solid rgba(9, 9, 9, 0.08);
    padding-top: 22px;
}

.yiru-yura-additional-group + .yiru-yura-additional-group {
    margin-top: 22px;
}

@media (max-width: 640px) {
    .yiru-yura-additional-paragraph {
        font-size: 14px;
        line-height: 1.62;
    }
}
/* =========================================================
   YIRU SOL — FICHAS DE PRODUCTO
   ========================================================= */

/* =========================================================
   CATALOGO — Galería de tarjetas Sol
   ========================================================= */

.yiru-cementos-product-card[data-brand-id="sol"] .yiru-cementos-product-image-wrap {
    position: relative;
    isolation: isolate;
}

.yiru-sol-card-gallery-control {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: none;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #ffffff;
    background: rgba(9, 9, 9, 0.48);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(-50%);
    transition:
        background-color var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-sol-card-gallery-control svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yiru-sol-card-gallery-control-prev {
    left: 10px;
}

.yiru-sol-card-gallery-control-next {
    right: 10px;
}

@media (hover: hover) and (pointer: fine) {

    .yiru-cementos-product-card[data-brand-id="sol"].has-yiru-sol-gallery:hover
    .yiru-sol-card-gallery-control {
        display: grid;
    }

    .yiru-sol-card-gallery-control:hover {
        background: rgba(9, 9, 9, 0.68);
    }

    .yiru-sol-card-gallery-control:active {
        transform: translateY(-50%) scale(0.96);
    }
}

@media (pointer: coarse) {

    .yiru-cementos-product-card[data-brand-id="sol"] .yiru-cementos-quote {
        display: none !important;
    }
}

/* =========================================================
   FICHA — Contenedor y navegación
   ========================================================= */

.yiru-sol-detail-view {
    width: 100%;
    background: var(--white);
}

.yiru-sol-detail-shell {
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: calc(var(--header-height) + 28px) 24px 84px;
}

.yiru-sol-detail-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    color: rgba(9, 9, 9, 0.62);
    font-size: 13px;
    line-height: 1.4;
}

.yiru-sol-detail-breadcrumb a {
    color: rgba(9, 9, 9, 0.62);
    text-decoration: none;
}

.yiru-sol-detail-breadcrumb a:hover {
    text-decoration: underline;
}

.yiru-sol-detail-breadcrumb-current {
    color: rgba(9, 9, 9, 0.90);
}

/* =========================================================
   FICHA — Dos columnas y desplazamiento natural
   ========================================================= */

.yiru-sol-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.44fr) minmax(320px, 0.76fr);
    gap: clamp(36px, 5vw, 76px);
    align-items: start;
}

.yiru-sol-detail-left {
    min-width: 0;
}

.yiru-sol-detail-info {
    position: sticky;
    top: calc(var(--header-height) + 28px);
    align-self: start;
    min-width: 0;
    padding-bottom: 24px;
}

.yiru-sol-detail-title {
    margin: 0;
    color: var(--black);
    font-size: clamp(30px, 3.1vw, 48px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.yiru-sol-detail-summary {
    max-width: 640px;
    margin: 24px 0 0;
    color: rgba(9, 9, 9, 0.68);
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.62;
}

.yiru-sol-detail-subheading {
    margin: 34px 0 16px;
    color: var(--black);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.yiru-sol-detail-features {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: rgba(9, 9, 9, 0.78);
    font-size: 15px;
    line-height: 1.58;
}

.yiru-sol-detail-spec-link {
    display: inline-flex;
    margin-top: 22px;
    padding: 0;
    color: rgba(9, 9, 9, 0.76);
    border-bottom: 1px solid rgba(9, 9, 9, 0.35);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.35;
}

.yiru-sol-detail-spec-link:hover {
    color: var(--black);
    border-bottom-color: var(--black);
}

.yiru-sol-detail-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin-top: 28px;
    padding: 0 22px;
    color: var(--white);
    background: var(--black);
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition:
        opacity var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-sol-detail-quote:hover {
    opacity: 0.86;
    transform: translateY(-1px);
}

.yiru-sol-detail-quote:active {
    transform: translateY(0);
}

.yiru-sol-detail-spec-link:focus-visible,
.yiru-sol-detail-quote:focus-visible,
.yiru-sol-section-toggle:focus-visible,
.yiru-sol-expand-control:focus-visible,
.yiru-sol-thumbnail:focus-visible,
.yiru-sol-detail-control:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.8);
    outline-offset: 3px;
}

/* =========================================================
   GALERÍA — Miniaturas e imagen principal
   ========================================================= */

.yiru-sol-gallery {
    min-width: 0;
}

.yiru-sol-gallery-layout {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.yiru-sol-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.yiru-sol-thumbnail {
    display: grid;
    place-items: center;
    width: 92px;
    aspect-ratio: 4 / 5;
    padding: 5px;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.14);
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
}

.yiru-sol-thumbnail.is-active {
    border-color: rgba(9, 9, 9, 0.74);
}

.yiru-sol-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.yiru-sol-detail-stage {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.14);
}

.yiru-sol-detail-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 180ms ease;
    will-change: transform;
}

.yiru-sol-detail-image.is-zoomed {
    transform: scale(2.05);
}

.yiru-sol-detail-control {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--white);
    background: rgba(9, 9, 9, 0.46);
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        background-color var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-sol-detail-control:hover {
    background: rgba(9, 9, 9, 0.66);
}

.yiru-sol-detail-control:active {
    transform: translateY(-50%) scale(0.96);
}

.yiru-sol-detail-control-prev {
    left: 14px;
}

.yiru-sol-detail-control-next {
    right: 14px;
}

.yiru-sol-detail-control svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yiru-sol-detail-control[hidden] {
    display: none;
}

@media (pointer: coarse) {

    .yiru-sol-detail-control {
        display: none;
    }
}

/* =========================================================
   SECCIONES — Información adicional y especificaciones
   ========================================================= */

.yiru-sol-detail-sections {
    display: grid;
    gap: 12px;
    margin-top: 38px;
}

.yiru-sol-collapsible {
    overflow: hidden;
    border: 1px solid rgba(9, 9, 9, 0.13);
    border-radius: 14px;
    scroll-margin-top: calc(var(--header-height) + 24px);
}

.yiru-sol-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    padding: 0 18px;
    color: rgba(9, 9, 9, 0.90);
    background: #f7f7f7;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
}

.yiru-sol-collapsible.is-open .yiru-sol-section-toggle {
    background: var(--white);
}

.yiru-sol-section-toggle svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--speed-fast) ease;
}

.yiru-sol-collapsible.is-open .yiru-sol-section-toggle svg {
    transform: rotate(180deg);
}

.yiru-sol-section-body {
    padding: 0 18px 20px;
    background: var(--white);
}

.yiru-sol-additional-content {
    padding-top: 2px;
}

.yiru-sol-additional-group {
    padding: 22px 0 0;
}

.yiru-sol-additional-group + .yiru-sol-additional-group {
    border-top: 1px solid rgba(9, 9, 9, 0.08);
}

.yiru-sol-additional-group h3 {
    margin: 0 0 12px;
    color: rgba(9, 9, 9, 0.90);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.yiru-sol-additional-group ul {
    margin: 0;
    padding-left: 19px;
    color: rgba(9, 9, 9, 0.74);
    font-size: 15px;
    line-height: 1.64;
}

.yiru-sol-additional-group li + li {
    margin-top: 7px;
}

.yiru-sol-expand-control {
    display: block;
    margin: 18px auto 0;
    padding: 0;
    color: rgba(9, 9, 9, 0.86);
    border-bottom: 1px solid rgba(9, 9, 9, 0.40);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.35;
}

.yiru-sol-spec-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 2px;
}

.yiru-sol-spec-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    color: rgba(9, 9, 9, 0.78);
    font-size: 14px;
    line-height: 1.45;
}

.yiru-sol-spec-table th,
.yiru-sol-spec-table td {
    padding: 16px 17px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(9, 9, 9, 0.08);
}

.yiru-sol-spec-table tr:not(.yiru-sol-spec-group):nth-child(odd) th,
.yiru-sol-spec-table tr:not(.yiru-sol-spec-group):nth-child(odd) td {
    background: #f7f7f7;
}

.yiru-sol-spec-table tr[data-yiru-expand-group][hidden] {
    display: none;
}

.yiru-sol-spec-table th[scope="row"] {
    width: 52%;
    color: rgba(9, 9, 9, 0.88);
    font-weight: 600;
}

.yiru-sol-spec-table td {
    color: rgba(9, 9, 9, 0.74);
}

.yiru-sol-spec-group th {
    padding: 18px 17px 9px;
    color: rgba(9, 9, 9, 0.72);
    background: var(--white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 0;
}

/* =========================================================
   VISOR TÁCTIL — Imagen ampliada
   ========================================================= */

.yiru-sol-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(7, 7, 7, 0.94);
    touch-action: none;
}

.yiru-sol-image-viewer.is-open {
    display: flex;
}

.yiru-sol-viewer-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
}

.yiru-sol-viewer-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center;
    touch-action: none;
}

.yiru-sol-viewer-image.is-animated {
    transition: transform 220ms ease;
}

body.yiru-sol-viewer-open {
    overflow: hidden;
}

/* =========================================================
   RESPONSIVE — Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .yiru-sol-detail-shell {
        padding-inline: 20px;
    }

    .yiru-sol-detail-layout {
        grid-template-columns: minmax(0, 1.28fr) minmax(290px, 0.72fr);
        gap: 34px;
    }

    .yiru-sol-detail-title {
        font-size: clamp(28px, 4vw, 40px);
    }

    .yiru-sol-detail-summary {
        font-size: 16px;
    }

    .yiru-sol-detail-info {
        top: calc(var(--header-height) + 20px);
    }
}

/* =========================================================
   RESPONSIVE — Móvil y tablet vertical
   ========================================================= */

@media (max-width: 900px) {

    .yiru-sol-detail-shell {
        padding: calc(var(--header-height) + 22px) 18px 64px;
    }

    .yiru-sol-detail-layout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .yiru-sol-detail-info,
    .yiru-sol-detail-left {
        position: static;
        order: initial;
    }

    .yiru-sol-detail-title {
        font-size: clamp(30px, 6vw, 42px);
    }

    .yiru-sol-detail-summary {
        max-width: 760px;
    }

    .yiru-sol-detail-quote {
        max-width: 520px;
    }
}

@media (max-width: 640px) {

    .yiru-sol-detail-shell {
        padding: calc(var(--header-height) + 18px) 14px 52px;
    }

    .yiru-sol-detail-breadcrumb {
        margin-bottom: 18px;
        font-size: 12px;
    }

    .yiru-sol-detail-layout {
        gap: 28px;
    }

    .yiru-sol-gallery-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .yiru-sol-thumbnails {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .yiru-sol-thumbnail {
        width: 100%;
        max-width: none;
    }

    .yiru-sol-detail-stage {
        aspect-ratio: 1 / 1;
    }

    .yiru-sol-detail-info {
        padding-bottom: 0;
    }

    .yiru-sol-detail-title {
        font-size: clamp(27px, 8vw, 36px);
        line-height: 1.08;
    }

    .yiru-sol-detail-summary {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.56;
    }

    .yiru-sol-detail-subheading {
        margin-top: 26px;
    }

    .yiru-sol-detail-features {
        font-size: 14px;
        line-height: 1.52;
    }

    .yiru-sol-detail-quote {
        min-height: 48px;
        margin-top: 24px;
    }

    .yiru-sol-detail-sections {
        margin-top: 28px;
    }

    .yiru-sol-section-toggle {
        min-height: 54px;
        padding-inline: 15px;
        font-size: 14px;
    }

    .yiru-sol-section-body {
        padding: 0 15px 18px;
    }

    .yiru-sol-additional-group h3 {
        font-size: 11px;
    }

    .yiru-sol-additional-group ul {
        font-size: 14px;
    }

    .yiru-sol-spec-table {
        min-width: 0;
        font-size: 13px;
    }

    .yiru-sol-spec-table th,
    .yiru-sol-spec-table td {
        padding: 13px 12px;
    }

    .yiru-sol-spec-table th[scope="row"] {
        width: 52%;
    }

    .yiru-sol-image-viewer {
        background: rgba(7, 7, 7, 0.96);
    }

    .yiru-sol-viewer-image {
        max-width: 96vw;
        max-height: 94vh;
    }
}

/* =========================================================
   MOTION — Preferencia de movimiento reducido
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .yiru-sol-card-gallery-control,
    .yiru-sol-detail-image,
    .yiru-sol-detail-control,
    .yiru-sol-section-toggle svg,
    .yiru-sol-viewer-image {
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   INFORMACIÓN ADICIONAL — Descripción Sol
   ========================================================= */

.yiru-sol-additional-paragraph {
    max-width: 780px;
    margin: 0;
    padding-top: 22px;
    color: rgba(9, 9, 9, 0.78);
    font-size: 15px;
    line-height: 1.66;
}

.yiru-sol-additional-paragraph + .yiru-sol-additional-group {
    margin-top: 22px;
    border-top: 1px solid rgba(9, 9, 9, 0.08);
    padding-top: 22px;
}

@media (max-width: 640px) {

    .yiru-sol-additional-paragraph {
        font-size: 14px;
        line-height: 1.62;
    }
}


/* =========================================================
   INFORMACIÓN ADICIONAL — Estructura dinámica Sol
   ========================================================= */

.yiru-sol-additional-paragraph {
    max-width: 820px;
    margin: 0;
    padding-top: 22px;
    color: rgba(9, 9, 9, 0.78);
    font-size: 15px;
    line-height: 1.66;
}

.yiru-sol-additional-paragraph + .yiru-sol-additional-group {
    margin-top: 22px;
    border-top: 1px solid rgba(9, 9, 9, 0.08);
    padding-top: 22px;
}

.yiru-sol-additional-group + .yiru-sol-additional-group {
    margin-top: 22px;
}

@media (max-width: 640px) {
    .yiru-sol-additional-paragraph {
        font-size: 14px;
        line-height: 1.62;
    }
}

/* =========================================================
   YIRU APU — FICHAS DE PRODUCTO
   ========================================================= */

/* =========================================================
   CATALOGO — Galería de tarjetas APU
   ========================================================= */

.yiru-cementos-product-card[data-brand-id="apu"] .yiru-cementos-product-image-wrap {
    position: relative;
    isolation: isolate;
}

.yiru-apu-card-gallery-control {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: none;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #ffffff;
    background: rgba(9, 9, 9, 0.48);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(-50%);
    transition:
        background-color var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-apu-card-gallery-control svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yiru-apu-card-gallery-control-prev {
    left: 10px;
}

.yiru-apu-card-gallery-control-next {
    right: 10px;
}

@media (hover: hover) and (pointer: fine) {

    .yiru-cementos-product-card[data-brand-id="apu"].has-yiru-apu-gallery:hover
    .yiru-apu-card-gallery-control {
        display: grid;
    }

    .yiru-apu-card-gallery-control:hover {
        background: rgba(9, 9, 9, 0.68);
    }

    .yiru-apu-card-gallery-control:active {
        transform: translateY(-50%) scale(0.96);
    }
}

@media (pointer: coarse) {

    .yiru-cementos-product-card[data-brand-id="apu"] .yiru-cementos-quote {
        display: none !important;
    }
}

/* =========================================================
   FICHA — Contenedor y navegación
   ========================================================= */

.yiru-apu-detail-view {
    width: 100%;
    background: var(--white);
}

.yiru-apu-detail-shell {
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: calc(var(--header-height) + 28px) 24px 84px;
}

.yiru-apu-detail-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    color: rgba(9, 9, 9, 0.62);
    font-size: 13px;
    line-height: 1.4;
}

.yiru-apu-detail-breadcrumb a {
    color: rgba(9, 9, 9, 0.62);
    text-decoration: none;
}

.yiru-apu-detail-breadcrumb a:hover {
    text-decoration: underline;
}

.yiru-apu-detail-breadcrumb-current {
    color: rgba(9, 9, 9, 0.90);
}

/* =========================================================
   FICHA — Dos columnas y desplazamiento natural
   ========================================================= */

.yiru-apu-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.44fr) minmax(320px, 0.76fr);
    gap: clamp(36px, 5vw, 76px);
    align-items: start;
}

.yiru-apu-detail-left {
    min-width: 0;
}

.yiru-apu-detail-info {
    position: sticky;
    top: calc(var(--header-height) + 28px);
    align-self: start;
    min-width: 0;
    padding-bottom: 24px;
}

.yiru-apu-detail-title {
    margin: 0;
    color: var(--black);
    font-size: clamp(30px, 3.1vw, 48px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.yiru-apu-detail-summary {
    max-width: 640px;
    margin: 24px 0 0;
    color: rgba(9, 9, 9, 0.68);
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.62;
}

.yiru-apu-detail-subheading {
    margin: 34px 0 16px;
    color: var(--black);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.yiru-apu-detail-features {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: rgba(9, 9, 9, 0.78);
    font-size: 15px;
    line-height: 1.58;
}

.yiru-apu-detail-spec-link {
    display: inline-flex;
    margin-top: 22px;
    padding: 0;
    color: rgba(9, 9, 9, 0.76);
    border-bottom: 1px solid rgba(9, 9, 9, 0.35);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.35;
}

.yiru-apu-detail-spec-link:hover {
    color: var(--black);
    border-bottom-color: var(--black);
}

.yiru-apu-detail-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin-top: 28px;
    padding: 0 22px;
    color: var(--white);
    background: var(--black);
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition:
        opacity var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-apu-detail-quote:hover {
    opacity: 0.86;
    transform: translateY(-1px);
}

.yiru-apu-detail-quote:active {
    transform: translateY(0);
}

.yiru-apu-detail-spec-link:focus-visible,
.yiru-apu-detail-quote:focus-visible,
.yiru-apu-section-toggle:focus-visible,
.yiru-apu-expand-control:focus-visible,
.yiru-apu-thumbnail:focus-visible,
.yiru-apu-detail-control:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.8);
    outline-offset: 3px;
}

/* =========================================================
   GALERÍA — Miniaturas e imagen principal
   ========================================================= */

.yiru-apu-gallery {
    min-width: 0;
}

.yiru-apu-gallery-layout {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.yiru-apu-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.yiru-apu-thumbnail {
    display: grid;
    place-items: center;
    width: 92px;
    aspect-ratio: 4 / 5;
    padding: 5px;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.14);
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
}

.yiru-apu-thumbnail.is-active {
    border-color: rgba(9, 9, 9, 0.74);
}

.yiru-apu-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.yiru-apu-detail-stage {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.14);
}

.yiru-apu-detail-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 180ms ease;
    will-change: transform;
}

.yiru-apu-detail-image.is-zoomed {
    transform: scale(2.05);
}

.yiru-apu-detail-control {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--white);
    background: rgba(9, 9, 9, 0.46);
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        background-color var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-apu-detail-control:hover {
    background: rgba(9, 9, 9, 0.66);
}

.yiru-apu-detail-control:active {
    transform: translateY(-50%) scale(0.96);
}

.yiru-apu-detail-control-prev {
    left: 14px;
}

.yiru-apu-detail-control-next {
    right: 14px;
}

.yiru-apu-detail-control svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yiru-apu-detail-control[hidden] {
    display: none;
}

@media (pointer: coarse) {

    .yiru-apu-detail-control {
        display: none;
    }
}

/* =========================================================
   SECCIONES — Información adicional y especificaciones
   ========================================================= */

.yiru-apu-detail-sections {
    display: grid;
    gap: 12px;
    margin-top: 38px;
}

.yiru-apu-collapsible {
    overflow: hidden;
    border: 1px solid rgba(9, 9, 9, 0.13);
    border-radius: 14px;
    scroll-margin-top: calc(var(--header-height) + 24px);
}

.yiru-apu-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    padding: 0 18px;
    color: rgba(9, 9, 9, 0.90);
    background: #f7f7f7;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
}

.yiru-apu-collapsible.is-open .yiru-apu-section-toggle {
    background: var(--white);
}

.yiru-apu-section-toggle svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--speed-fast) ease;
}

.yiru-apu-collapsible.is-open .yiru-apu-section-toggle svg {
    transform: rotate(180deg);
}

.yiru-apu-section-body {
    padding: 0 18px 20px;
    background: var(--white);
}

.yiru-apu-additional-content {
    padding-top: 2px;
}

.yiru-apu-additional-group {
    padding: 22px 0 0;
}

.yiru-apu-additional-group + .yiru-apu-additional-group {
    border-top: 1px solid rgba(9, 9, 9, 0.08);
}

.yiru-apu-additional-group h3 {
    margin: 0 0 12px;
    color: rgba(9, 9, 9, 0.90);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.yiru-apu-additional-group ul {
    margin: 0;
    padding-left: 19px;
    color: rgba(9, 9, 9, 0.74);
    font-size: 15px;
    line-height: 1.64;
}

.yiru-apu-additional-group li + li {
    margin-top: 7px;
}

.yiru-apu-expand-control {
    display: block;
    margin: 18px auto 0;
    padding: 0;
    color: rgba(9, 9, 9, 0.86);
    border-bottom: 1px solid rgba(9, 9, 9, 0.40);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.35;
}

.yiru-apu-spec-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 2px;
}

.yiru-apu-spec-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    color: rgba(9, 9, 9, 0.78);
    font-size: 14px;
    line-height: 1.45;
}

.yiru-apu-spec-table th,
.yiru-apu-spec-table td {
    padding: 16px 17px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(9, 9, 9, 0.08);
}

.yiru-apu-spec-table tr:not(.yiru-apu-spec-group):nth-child(odd) th,
.yiru-apu-spec-table tr:not(.yiru-apu-spec-group):nth-child(odd) td {
    background: #f7f7f7;
}

.yiru-apu-spec-table tr[data-yiru-expand-group][hidden] {
    display: none;
}

.yiru-apu-spec-table th[scope="row"] {
    width: 52%;
    color: rgba(9, 9, 9, 0.88);
    font-weight: 600;
}

.yiru-apu-spec-table td {
    color: rgba(9, 9, 9, 0.74);
}

.yiru-apu-spec-group th {
    padding: 18px 17px 9px;
    color: rgba(9, 9, 9, 0.72);
    background: var(--white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 0;
}

/* =========================================================
   VISOR TÁCTIL — Imagen ampliada
   ========================================================= */

.yiru-apu-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(7, 7, 7, 0.94);
    touch-action: none;
}

.yiru-apu-image-viewer.is-open {
    display: flex;
}

.yiru-apu-viewer-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
}

.yiru-apu-viewer-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center;
    touch-action: none;
}

.yiru-apu-viewer-image.is-animated {
    transition: transform 220ms ease;
}

body.yiru-apu-viewer-open {
    overflow: hidden;
}

/* =========================================================
   RESPONSIVE — Tablet
   ========================================================= */

@media (max-width: 1100px) {

    .yiru-apu-detail-shell {
        padding-inline: 20px;
    }

    .yiru-apu-detail-layout {
        grid-template-columns: minmax(0, 1.28fr) minmax(290px, 0.72fr);
        gap: 34px;
    }

    .yiru-apu-detail-title {
        font-size: clamp(28px, 4vw, 40px);
    }

    .yiru-apu-detail-summary {
        font-size: 16px;
    }

    .yiru-apu-detail-info {
        top: calc(var(--header-height) + 20px);
    }
}

/* =========================================================
   RESPONSIVE — Móvil y tablet vertical
   ========================================================= */

@media (max-width: 900px) {

    .yiru-apu-detail-shell {
        padding: calc(var(--header-height) + 22px) 18px 64px;
    }

    .yiru-apu-detail-layout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .yiru-apu-detail-info,
    .yiru-apu-detail-left {
        position: static;
        order: initial;
    }

    .yiru-apu-detail-title {
        font-size: clamp(30px, 6vw, 42px);
    }

    .yiru-apu-detail-summary {
        max-width: 760px;
    }

    .yiru-apu-detail-quote {
        max-width: 520px;
    }
}

@media (max-width: 640px) {

    .yiru-apu-detail-shell {
        padding: calc(var(--header-height) + 18px) 14px 52px;
    }

    .yiru-apu-detail-breadcrumb {
        margin-bottom: 18px;
        font-size: 12px;
    }

    .yiru-apu-detail-layout {
        gap: 28px;
    }

    .yiru-apu-gallery-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .yiru-apu-thumbnails {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .yiru-apu-thumbnail {
        width: 100%;
        max-width: none;
    }

    .yiru-apu-detail-stage {
        aspect-ratio: 1 / 1;
    }

    .yiru-apu-detail-info {
        padding-bottom: 0;
    }

    .yiru-apu-detail-title {
        font-size: clamp(27px, 8vw, 36px);
        line-height: 1.08;
    }

    .yiru-apu-detail-summary {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.56;
    }

    .yiru-apu-detail-subheading {
        margin-top: 26px;
    }

    .yiru-apu-detail-features {
        font-size: 14px;
        line-height: 1.52;
    }

    .yiru-apu-detail-quote {
        min-height: 48px;
        margin-top: 24px;
    }

    .yiru-apu-detail-sections {
        margin-top: 28px;
    }

    .yiru-apu-section-toggle {
        min-height: 54px;
        padding-inline: 15px;
        font-size: 14px;
    }

    .yiru-apu-section-body {
        padding: 0 15px 18px;
    }

    .yiru-apu-additional-group h3 {
        font-size: 11px;
    }

    .yiru-apu-additional-group ul {
        font-size: 14px;
    }

    .yiru-apu-spec-table {
        min-width: 0;
        font-size: 13px;
    }

    .yiru-apu-spec-table th,
    .yiru-apu-spec-table td {
        padding: 13px 12px;
    }

    .yiru-apu-spec-table th[scope="row"] {
        width: 52%;
    }

    .yiru-apu-image-viewer {
        background: rgba(7, 7, 7, 0.96);
    }

    .yiru-apu-viewer-image {
        max-width: 96vw;
        max-height: 94vh;
    }
}

/* =========================================================
   MOTION — Preferencia de movimiento reducido
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .yiru-apu-card-gallery-control,
    .yiru-apu-detail-image,
    .yiru-apu-detail-control,
    .yiru-apu-section-toggle svg,
    .yiru-apu-viewer-image {
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   INFORMACIÓN ADICIONAL — Descripción APU
   ========================================================= */

.yiru-apu-additional-paragraph {
    max-width: 780px;
    margin: 0;
    padding-top: 22px;
    color: rgba(9, 9, 9, 0.78);
    font-size: 15px;
    line-height: 1.66;
}

.yiru-apu-additional-paragraph + .yiru-apu-additional-group {
    margin-top: 22px;
    border-top: 1px solid rgba(9, 9, 9, 0.08);
    padding-top: 22px;
}

@media (max-width: 640px) {

    .yiru-apu-additional-paragraph {
        font-size: 14px;
        line-height: 1.62;
    }
}


/* =========================================================
   INFORMACIÓN ADICIONAL — Estructura dinámica APU
   ========================================================= */

.yiru-apu-additional-paragraph {
    max-width: 820px;
    margin: 0;
    padding-top: 22px;
    color: rgba(9, 9, 9, 0.78);
    font-size: 15px;
    line-height: 1.66;
}

.yiru-apu-additional-paragraph + .yiru-apu-additional-group {
    margin-top: 22px;
    border-top: 1px solid rgba(9, 9, 9, 0.08);
    padding-top: 22px;
}

.yiru-apu-additional-group + .yiru-apu-additional-group {
    margin-top: 22px;
}

@media (max-width: 640px) {
    .yiru-apu-additional-paragraph {
        font-size: 14px;
        line-height: 1.62;
    }
}


/* =========================================================
   YIRU — TODO EN LADRILLOS
   ========================================================= */

/* =========================================================
   ENTRADA — CTA VER TODO
   ========================================================= */

.ladrillos-category-banner {
    position: relative;
    isolation: isolate;
}

.ladrillos-category-banner-link {
    position: absolute;
    inset: 0;
    z-index: 4;

    display: block;
    width: 100%;
    height: 100%;

    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.ladrillos-category-banner-link:focus-visible {
    outline: 2px solid rgba(9, 9, 9, 0.86);
    outline-offset: 3px;
}

.ladrillos-category-banner-cta {
    position: absolute;
    left: clamp(22px, 4.8vw, 72px);
    bottom: clamp(20px, 5vw, 58px);
    z-index: 1;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    pointer-events: none;

    transition: transform var(--speed-fast) ease;
}

.ladrillos-category-banner-link:hover .ladrillos-category-banner-cta {
    transform: translateY(-1px);
}

.ladrillos-category-banner-link:active .ladrillos-category-banner-cta {
    transform: translateY(0);
}

.ladrillos-category-banner-cta-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 18px;

    color: var(--black);
    background: var(--white);
    border-radius: 999px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.13);

    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.055em;
    white-space: nowrap;
}

.ladrillos-category-banner-cta-arrow {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    color: var(--black);
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.13);
}

.ladrillos-category-banner-cta-arrow svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   CATALOGO — Vista base
   ========================================================= */

.yiru-ladrillos-view {
    width: 100%;
    min-height: 100vh;
    margin-top: var(--header-height);
    background: #f1f1f1;
}

.yiru-ladrillos-shell {
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: 28px 24px 84px;
}

/* =========================================================
   CATALOGO — Breadcrumb, marcas, orden y filtros
   ========================================================= */

.yiru-ladrillos-breadcrumb-shell {
    padding-top: 18px;
    padding-bottom: 14px;
}

.yiru-ladrillos-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: rgba(9, 9, 9, 0.60);
    font-size: 12px;
    line-height: 1.35;
}

.yiru-ladrillos-breadcrumb a {
    color: rgba(9, 9, 9, 0.66);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.yiru-ladrillos-breadcrumb a:hover {
    color: var(--black);
}

.yiru-ladrillos-breadcrumb-current {
    color: rgba(9, 9, 9, 0.88);
}

.yiru-ladrillos-brand-bar {
    width: 100%;
    background: var(--white);
    border-top: 1px solid rgba(9, 9, 9, 0.06);
    border-bottom: 1px solid rgba(9, 9, 9, 0.06);
}

.yiru-ladrillos-brand-shell {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: 12px 24px 16px;
}

.yiru-ladrillos-brand-viewport {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
}

.yiru-ladrillos-brand-viewport::-webkit-scrollbar {
    display: none;
}

.yiru-ladrillos-brand-track {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 18px;
    min-width: max-content;
}

.yiru-ladrillos-brand-card {
    display: flex;
    flex: 0 0 156px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 156px;
    padding: 0;
    color: var(--black);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: center;
}

.yiru-ladrillos-brand-mark {
    display: grid;
    place-items: center;
    width: 156px;
    height: 92px;
    padding: 12px;
    color: rgba(9, 9, 9, 0.78);
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.20);
    border-radius: 12px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    transition:
        border-color var(--speed-fast) ease,
        box-shadow var(--speed-fast) ease,
        color var(--speed-fast) ease;
}

.yiru-ladrillos-brand-label {
    min-height: 18px;
    color: rgba(9, 9, 9, 0.88);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
}

.yiru-ladrillos-brand-card:hover .yiru-ladrillos-brand-mark {
    border-color: rgba(9, 9, 9, 0.48);
}

.yiru-ladrillos-brand-card.is-active .yiru-ladrillos-brand-mark {
    color: var(--black);
    border-color: rgba(9, 9, 9, 0.92);
    box-shadow: inset 0 0 0 1px rgba(9, 9, 9, 0.08);
}

.yiru-ladrillos-brand-card.is-active .yiru-ladrillos-brand-label {
    font-weight: 500;
}

.yiru-ladrillos-brand-card:focus-visible .yiru-ladrillos-brand-mark {
    outline: 1px solid rgba(9, 9, 9, 0.82);
    outline-offset: 3px;
}

.yiru-ladrillos-brand-control {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 44px;
    color: rgba(9, 9, 9, 0.72);
    background: var(--white);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.yiru-ladrillos-brand-control:hover {
    color: var(--black);
    background: #f7f7f7;
}

.yiru-ladrillos-brand-control:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.82);
    outline-offset: 2px;
}

.yiru-ladrillos-brand-control svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yiru-ladrillos-catalog-shell {
    padding-top: 22px;
}

.yiru-ladrillos-catalog-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.28fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.yiru-ladrillos-filter-panel {
    min-width: 0;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.08);
    border-radius: 14px;
    overflow: hidden;
}

.yiru-ladrillos-filter-summary {
    padding: 24px 20px 20px;
    border-bottom: 1px solid rgba(9, 9, 9, 0.08);
}

.yiru-ladrillos-heading-primary,
.yiru-ladrillos-heading-secondary,
.yiru-ladrillos-heading-results,
.yiru-ladrillos-heading-selected-label {
    margin: 0;
}

.yiru-ladrillos-heading-primary {
    color: rgba(9, 9, 9, 0.56);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

.yiru-ladrillos-heading-secondary {
    margin-top: 5px;
    color: var(--black);
    font-size: clamp(22px, 2vw, 29px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.yiru-ladrillos-heading-results {
    margin-top: 13px;
    color: rgba(9, 9, 9, 0.62);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

.yiru-ladrillos-heading-selected {
    margin-top: 20px;
}

.yiru-ladrillos-heading-selected-label {
    color: rgba(9, 9, 9, 0.82);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.yiru-ladrillos-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
}

.yiru-ladrillos-active-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    max-width: 100%;
    padding: 0 10px 0 11px;
    color: rgba(9, 9, 9, 0.88);
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.30);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.2;
    text-align: left;
}

.yiru-ladrillos-active-filter:hover {
    border-color: rgba(9, 9, 9, 0.66);
}

.yiru-ladrillos-active-filter:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.82);
    outline-offset: 3px;
}

.yiru-ladrillos-active-filter svg {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yiru-ladrillos-filter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(9, 9, 9, 0.08);
}

.yiru-ladrillos-filter-title {
    margin: 0;
    color: var(--black);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.yiru-ladrillos-clear-filters {
    color: rgba(9, 9, 9, 0.64);
    background: transparent;
    border-bottom: 1px solid rgba(9, 9, 9, 0.28);
    cursor: pointer;
    font-size: 11px;
    line-height: 1.25;
}

.yiru-ladrillos-clear-filters:hover {
    color: var(--black);
    border-bottom-color: var(--black);
}

.yiru-ladrillos-clear-filters:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.80);
    outline-offset: 3px;
}

.yiru-ladrillos-filter-groups {
    display: grid;
}

.yiru-ladrillos-filter-group {
    border-bottom: 1px solid rgba(9, 9, 9, 0.08);
}

.yiru-ladrillos-filter-group:last-child {
    border-bottom: 0;
}

.yiru-ladrillos-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 54px;
    padding: 0 20px;
    color: rgba(9, 9, 9, 0.92);
    background: var(--white);
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
}

.yiru-ladrillos-filter-toggle:hover {
    background: #fafafa;
}

.yiru-ladrillos-filter-toggle:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.76);
    outline-offset: -2px;
}

.yiru-ladrillos-filter-toggle svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--speed-fast) ease;
}

.yiru-ladrillos-filter-group.is-open .yiru-ladrillos-filter-toggle svg {
    transform: rotate(180deg);
}

.yiru-ladrillos-filter-options {
    display: grid;
    gap: 1px;
    padding: 0 12px 14px 18px;
    background: var(--white);
}

.yiru-ladrillos-filter-options.is-scrollable {
    max-height: 228px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.yiru-ladrillos-filter-options.is-scrollable::-webkit-scrollbar {
    width: 6px;
}

.yiru-ladrillos-filter-option {
    display: flex;
    align-items: center;
    min-height: 34px;
    gap: 10px;
    padding: 0 8px;
    color: rgba(9, 9, 9, 0.76);
    border-radius: 7px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.3;
}

.yiru-ladrillos-filter-option:hover {
    background: #f7f7f7;
}

.yiru-ladrillos-filter-option input {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin: 0;
    accent-color: #090909;
    cursor: pointer;
}

.yiru-ladrillos-filter-option.is-disabled {
    color: rgba(9, 9, 9, 0.34);
    cursor: not-allowed;
}

.yiru-ladrillos-filter-option.is-disabled input {
    cursor: not-allowed;
}

.yiru-ladrillos-mobile-filter-trigger {
    display: none;
}

/* =========================================================
   ORDENAR — Dropdown interactivo
   ========================================================= */

.yiru-ladrillos-catalog-content {
    min-width: 0;
}

.yiru-ladrillos-sort-row {
    display: flex;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
}

.yiru-ladrillos-sort {
    position: relative;
    width: 100%;
    min-width: 0;
    z-index: 8;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.08);
    border-radius: 14px;
}

.yiru-ladrillos-sort-toggle {
    display: grid;
    grid-template-columns: minmax(0, 252px) 18px;
    grid-template-rows: auto auto;
    align-items: center;
    width: 252px;
    min-height: 90px;
    margin-left: 20px;
    padding: 0;
    color: var(--black);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(9, 9, 9, 0.28);
    cursor: pointer;
    text-align: left;
}

.yiru-ladrillos-sort-toggle:hover {
    border-bottom-color: rgba(9, 9, 9, 0.55);
}

.yiru-ladrillos-sort-toggle:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.80);
    outline-offset: 3px;
}

.yiru-ladrillos-sort-label {
    grid-column: 1;
    grid-row: 1;
    color: rgba(9, 9, 9, 0.46);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
}

.yiru-ladrillos-sort-value {
    grid-column: 1;
    grid-row: 2;
    margin-top: 4px;
    color: var(--black);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

.yiru-ladrillos-sort-toggle > svg {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 16px;
    height: 16px;
    justify-self: end;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--speed-fast) ease;
}

.yiru-ladrillos-sort.is-open .yiru-ladrillos-sort-toggle > svg {
    transform: rotate(180deg);
}

.yiru-ladrillos-sort-menu {
    position: absolute;
    top: calc(100% - 1px);
    left: 20px;
    width: 272px;
    padding: 7px 0;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.10);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
    overflow: hidden;
}

.yiru-ladrillos-sort-menu[hidden] {
    display: none;
}

.yiru-ladrillos-sort-option {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 0 16px;
    color: rgba(9, 9, 9, 0.82);
    background: var(--white);
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    line-height: 1.25;
}

.yiru-ladrillos-sort-option:hover,
.yiru-ladrillos-sort-option.is-active {
    background: #f7f7f7;
}

.yiru-ladrillos-sort-option:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.72);
    outline-offset: -2px;
}

/* =========================================================
   CATALOGO — Cuadrícula y tarjetas
   ========================================================= */

.yiru-ladrillos-product-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}

.yiru-ladrillos-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    padding: 0;
    color: var(--black);
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.10);
    border-radius: 14px;
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    text-decoration: none;
    transition:
        border-color var(--speed-fast) ease,
        box-shadow var(--speed-fast) ease;
}

.yiru-ladrillos-product-card:hover {
    border-color: rgba(9, 9, 9, 0.18);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.yiru-ladrillos-product-card:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.78);
    outline-offset: 3px;
}

.yiru-ladrillos-product-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--white);
    border-bottom: 1px solid rgba(9, 9, 9, 0.08);
    isolation: isolate;
}

.yiru-ladrillos-product-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.yiru-ladrillos-product-image[hidden] {
    display: none;
}

.yiru-ladrillos-product-content {
    display: flex;
    flex-direction: column;
    min-height: 126px;
    padding: 14px 15px 15px;
}

.yiru-ladrillos-product-brand {
    margin: 0;
    color: rgba(9, 9, 9, 0.60);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.yiru-ladrillos-product-name {
    margin: 7px 0 0;
    color: var(--black);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -0.012em;
}

.yiru-ladrillos-quote {
    display: none;
    align-self: flex-start;
    margin-top: auto;
    padding: 10px 12px;
    color: var(--black);
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.72);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {

    .yiru-ladrillos-product-card:hover .yiru-ladrillos-quote {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* =========================================================
   CATALOGO — Estado vacío
   ========================================================= */

.yiru-ladrillos-empty {
    grid-column: 1 / -1;
    padding: 56px 24px;
    color: rgba(9, 9, 9, 0.64);
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.08);
    border-radius: 14px;
    text-align: center;
}

.yiru-ladrillos-empty-title {
    margin: 0;
    color: var(--black);
    font-size: 18px;
    font-weight: 500;
}

.yiru-ladrillos-empty-text {
    margin: 10px auto 0;
    max-width: 520px;
    font-size: 14px;
    line-height: 1.55;
}

.yiru-ladrillos-empty-button {
    display: inline-flex;
    margin-top: 20px;
    min-height: 42px;
    padding: 0 18px;
    color: var(--white);
    background: var(--black);
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.yiru-ladrillos-empty-button:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.80);
    outline-offset: 3px;
}

/* =========================================================
   FICHA — Contenedor y navegación
   ========================================================= */

.yiru-ladrillos-detail-view {
    width: 100%;
    background: var(--white);
}

.yiru-ladrillos-detail-shell {
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: calc(var(--header-height) + 28px) 24px 84px;
}

.yiru-ladrillos-detail-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    color: rgba(9, 9, 9, 0.62);
    font-size: 13px;
    line-height: 1.4;
}

.yiru-ladrillos-detail-breadcrumb a {
    color: rgba(9, 9, 9, 0.62);
    text-decoration: none;
    cursor: pointer;
}

.yiru-ladrillos-detail-breadcrumb a:hover {
    text-decoration: underline;
}

.yiru-ladrillos-detail-breadcrumb-current {
    color: rgba(9, 9, 9, 0.90);
}

.yiru-ladrillos-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.44fr) minmax(320px, 0.76fr);
    gap: clamp(36px, 5vw, 76px);
    align-items: start;
}

.yiru-ladrillos-detail-left {
    min-width: 0;
}

.yiru-ladrillos-detail-info {
    position: sticky;
    top: calc(var(--header-height) + 28px);
    align-self: start;
    min-width: 0;
    padding-bottom: 24px;
}

.yiru-ladrillos-detail-title {
    margin: 0;
    color: var(--black);
    font-size: clamp(30px, 3.1vw, 48px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.yiru-ladrillos-detail-summary {
    max-width: 640px;
    margin: 24px 0 0;
    color: rgba(9, 9, 9, 0.68);
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.62;
}

.yiru-ladrillos-detail-summary[hidden] {
    display: none;
}

.yiru-ladrillos-detail-subheading {
    margin: 34px 0 16px;
    color: var(--black);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.yiru-ladrillos-detail-features {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: rgba(9, 9, 9, 0.78);
    font-size: 15px;
    line-height: 1.58;
}

.yiru-ladrillos-detail-spec-link {
    display: inline-flex;
    margin-top: 22px;
    padding: 0;
    color: rgba(9, 9, 9, 0.76);
    border-bottom: 1px solid rgba(9, 9, 9, 0.35);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.35;
}

.yiru-ladrillos-detail-spec-link:hover {
    color: var(--black);
    border-bottom-color: var(--black);
}

.yiru-ladrillos-detail-spec-link[hidden] {
    display: none;
}

.yiru-ladrillos-detail-source {
    display: block;
    margin-top: 14px;
    color: rgba(9, 9, 9, 0.58);
    font-size: 12px;
    line-height: 1.45;
}

.yiru-ladrillos-detail-source a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.yiru-ladrillos-detail-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin-top: 28px;
    padding: 0 22px;
    color: var(--white);
    background: var(--black);
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition:
        opacity var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-ladrillos-detail-quote:hover {
    opacity: 0.86;
    transform: translateY(-1px);
}

.yiru-ladrillos-detail-quote:active {
    transform: translateY(0);
}

.yiru-ladrillos-detail-spec-link:focus-visible,
.yiru-ladrillos-detail-quote:focus-visible,
.yiru-ladrillos-section-toggle:focus-visible,
.yiru-ladrillos-expand-control:focus-visible,
.yiru-ladrillos-thumbnail:focus-visible,
.yiru-ladrillos-detail-control:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.8);
    outline-offset: 3px;
}

/* =========================================================
   FICHA — Galería
   ========================================================= */

.yiru-ladrillos-gallery-layout {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.yiru-ladrillos-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.yiru-ladrillos-thumbnail {
    display: grid;
    place-items: center;
    width: 92px;
    aspect-ratio: 4 / 5;
    padding: 5px;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.14);
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
}

.yiru-ladrillos-thumbnail.is-active {
    border-color: rgba(9, 9, 9, 0.74);
}

.yiru-ladrillos-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.yiru-ladrillos-detail-stage {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.14);
}

.yiru-ladrillos-detail-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 180ms ease;
    will-change: transform;
}

.yiru-ladrillos-detail-image.is-zoomed {
    transform: scale(2.05);
}

.yiru-ladrillos-detail-control {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--white);
    background: rgba(9, 9, 9, 0.46);
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        background-color var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.yiru-ladrillos-detail-control:hover {
    background: rgba(9, 9, 9, 0.66);
}

.yiru-ladrillos-detail-control:active {
    transform: translateY(-50%) scale(0.96);
}

.yiru-ladrillos-detail-control-prev {
    left: 14px;
}

.yiru-ladrillos-detail-control-next {
    right: 14px;
}

.yiru-ladrillos-detail-control svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yiru-ladrillos-detail-control[hidden] {
    display: none;
}

/* =========================================================
   FICHA — Secciones desplegables
   ========================================================= */

.yiru-ladrillos-detail-sections {
    display: grid;
    gap: 12px;
    margin-top: 38px;
}

.yiru-ladrillos-collapsible {
    overflow: hidden;
    border: 1px solid rgba(9, 9, 9, 0.13);
    border-radius: 14px;
    scroll-margin-top: calc(var(--header-height) + 24px);
}

.yiru-ladrillos-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    padding: 0 18px;
    color: rgba(9, 9, 9, 0.90);
    background: #f7f7f7;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
}

.yiru-ladrillos-collapsible.is-open .yiru-ladrillos-section-toggle {
    background: var(--white);
}

.yiru-ladrillos-section-toggle svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--speed-fast) ease;
}

.yiru-ladrillos-collapsible.is-open .yiru-ladrillos-section-toggle svg {
    transform: rotate(180deg);
}

.yiru-ladrillos-section-body {
    padding: 0 18px 20px;
    background: var(--white);
}

.yiru-ladrillos-additional-content {
    padding-top: 2px;
}

.yiru-ladrillos-additional-group {
    padding: 22px 0 0;
}

.yiru-ladrillos-additional-group + .yiru-ladrillos-additional-group {
    border-top: 1px solid rgba(9, 9, 9, 0.08);
}

.yiru-ladrillos-additional-group h3 {
    margin: 0 0 12px;
    color: rgba(9, 9, 9, 0.90);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.yiru-ladrillos-additional-group ul {
    margin: 0;
    padding-left: 19px;
    color: rgba(9, 9, 9, 0.74);
    font-size: 15px;
    line-height: 1.64;
}

.yiru-ladrillos-additional-group li + li {
    margin-top: 7px;
}

.yiru-ladrillos-expand-control {
    display: block;
    margin: 18px auto 0;
    padding: 0;
    color: rgba(9, 9, 9, 0.86);
    border-bottom: 1px solid rgba(9, 9, 9, 0.40);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.35;
}

.yiru-ladrillos-spec-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 2px;
}

.yiru-ladrillos-spec-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    color: rgba(9, 9, 9, 0.78);
    font-size: 14px;
    line-height: 1.45;
}

.yiru-ladrillos-spec-table th,
.yiru-ladrillos-spec-table td {
    padding: 16px 17px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(9, 9, 9, 0.08);
}

.yiru-ladrillos-spec-table tr:nth-child(odd) th,
.yiru-ladrillos-spec-table tr:nth-child(odd) td {
    background: #f7f7f7;
}

.yiru-ladrillos-spec-table th[scope="row"] {
    width: 52%;
    color: rgba(9, 9, 9, 0.88);
    font-weight: 600;
}

.yiru-ladrillos-spec-table td {
    white-space: nowrap;
}

/* =========================================================
   FICHA — Visor táctil / pantalla completa
   ========================================================= */

.yiru-ladrillos-touch-viewer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    background: rgba(7, 7, 7, 0.94);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--speed-fast) ease,
        visibility var(--speed-fast) ease;
}

.yiru-ladrillos-touch-viewer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.yiru-ladrillos-touch-viewer-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: min(92vw, 1400px);
    height: min(92vh, 900px);
    overflow: hidden;
    touch-action: none;
}

.yiru-ladrillos-touch-viewer-image {
    display: block;
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center;
    will-change: transform;
}

.yiru-ladrillos-touch-viewer-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--white);
    background: rgba(9, 9, 9, 0.62);
    border-radius: 50%;
    cursor: pointer;
}

.yiru-ladrillos-touch-viewer-close svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yiru-ladrillos-touch-viewer-control {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--white);
    background: rgba(9, 9, 9, 0.52);
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
}

.yiru-ladrillos-touch-viewer-control-prev {
    left: 18px;
}

.yiru-ladrillos-touch-viewer-control-next {
    right: 18px;
}

.yiru-ladrillos-touch-viewer-control svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yiru-ladrillos-touch-viewer-control[hidden] {
    display: none;
}

.yiru-ladrillos-touch-viewer-close:focus-visible,
.yiru-ladrillos-touch-viewer-control:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.9);
    outline-offset: 3px;
}

body.yiru-ladrillos-viewer-open {
    overflow: hidden;
}

/* =========================================================
   RESPONSIVE — Catálogo y ficha
   ========================================================= */

@media (max-width: 1180px) {

    .yiru-ladrillos-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {

    .yiru-ladrillos-shell {
        padding-inline: 22px;
    }

    .yiru-ladrillos-brand-shell {
        padding-inline: 18px;
    }

    .yiru-ladrillos-brand-card,
    .yiru-ladrillos-brand-mark {
        width: 142px;
    }

    .yiru-ladrillos-brand-card {
        flex-basis: 142px;
    }

    .yiru-ladrillos-catalog-layout {
        grid-template-columns: 1fr;
    }

    .yiru-ladrillos-filter-panel {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1800;
        width: min(88vw, 360px);
        max-width: 100%;
        border: 0;
        border-radius: 0;
        transform: translateX(-102%);
        box-shadow: 10px 0 32px rgba(0, 0, 0, 0.14);
        transition: transform var(--speed-smooth) var(--ease-out);
        overflow-y: auto;
    }

    .yiru-ladrillos-filter-panel.is-open {
        transform: translateX(0);
    }

    .yiru-ladrillos-filter-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1790;
        background: rgba(7, 7, 7, 0.34);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity var(--speed-fast) ease,
            visibility var(--speed-fast) ease;
    }

    .yiru-ladrillos-filter-backdrop.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .yiru-ladrillos-mobile-filter-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        margin-bottom: 16px;
        padding: 0 16px;
        color: var(--black);
        background: var(--white);
        border: 1px solid rgba(9, 9, 9, 0.12);
        border-radius: 999px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
    }

    .yiru-ladrillos-mobile-filter-trigger:focus-visible {
        outline: 1px solid rgba(9, 9, 9, 0.80);
        outline-offset: 3px;
    }

    .yiru-ladrillos-filter-close {
        display: inline-flex;
    }

    .yiru-ladrillos-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .yiru-ladrillos-detail-layout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .yiru-ladrillos-detail-info {
        position: static;
        padding-bottom: 0;
    }
}

.yiru-ladrillos-filter-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--black);
    background: #f7f7f7;
    border-radius: 50%;
    cursor: pointer;
}

.yiru-ladrillos-filter-close svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 560px) {

    .ladrillos-category-banner-cta {
        left: 18px;
        bottom: 16px;
    }

    .ladrillos-category-banner-cta-label {
        min-height: 40px;
        padding-inline: 15px;
        font-size: 11px;
    }

    .ladrillos-category-banner-cta-arrow {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .yiru-ladrillos-shell {
        padding: 22px 18px 64px;
    }

    .yiru-ladrillos-breadcrumb-shell {
        padding-top: 14px;
        padding-bottom: 11px;
    }

    .yiru-ladrillos-breadcrumb {
        font-size: 11px;
    }

    .yiru-ladrillos-brand-shell {
        grid-template-columns: 28px minmax(0, 1fr) 28px;
        padding-inline: 12px;
    }

    .yiru-ladrillos-brand-control {
        width: 26px;
        height: 40px;
    }

    .yiru-ladrillos-brand-card,
    .yiru-ladrillos-brand-mark {
        width: 132px;
    }

    .yiru-ladrillos-brand-card {
        flex-basis: 132px;
    }

    .yiru-ladrillos-brand-mark {
        height: 82px;
        font-size: 18px;
    }

    .yiru-ladrillos-sort-row {
        justify-content: stretch;
    }

    .yiru-ladrillos-sort {
        width: 100%;
    }

    .yiru-ladrillos-sort-toggle {
        width: calc(100% - 32px);
        margin-left: 16px;
        grid-template-columns: minmax(0, 1fr) 18px;
    }

    .yiru-ladrillos-sort-menu {
        left: 16px;
        width: calc(100% - 32px);
    }

    .yiru-ladrillos-filter-summary {
        padding: 22px 17px 18px;
    }

    .yiru-ladrillos-heading-secondary {
        font-size: 23px;
    }

    .yiru-ladrillos-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .yiru-ladrillos-product-card {
        border-radius: 12px;
    }

    .yiru-ladrillos-product-content {
        min-height: 96px;
        padding: 12px;
    }

    .yiru-ladrillos-product-name {
        font-size: 15px;
    }

    .yiru-ladrillos-gallery-layout {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 10px;
    }

    .yiru-ladrillos-thumbnail {
        width: 72px;
    }

    .yiru-ladrillos-detail-shell {
        padding-inline: 18px;
        padding-bottom: 64px;
    }

    .yiru-ladrillos-detail-title {
        font-size: 31px;
    }
}

@media (max-width: 380px) {

    .yiru-ladrillos-product-grid {
        grid-template-columns: 1fr;
    }
}

@media (pointer: coarse) {

    .yiru-ladrillos-quote {
        display: none !important;
    }

    .yiru-ladrillos-detail-control {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ladrillos-category-banner-link,
    .yiru-ladrillos-filter-panel,
    .yiru-ladrillos-filter-backdrop,
    .yiru-ladrillos-sort-toggle > svg,
    .yiru-ladrillos-detail-image,
    .yiru-ladrillos-detail-control,
    .yiru-ladrillos-section-toggle svg,
    .yiru-ladrillos-touch-viewer,
    .yiru-ladrillos-product-card {
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 900px) {

    .yiru-ladrillos-filter-close {
        display: inline-flex;
    }
}


/* =========================================================
   BASE Y CONCRETO — Banner interactivo y adaptación responsive
   ========================================================= */

.base-concreto-banner {
    position: relative;
    isolation: isolate;
}

.base-concreto-banner picture {
    display: block;
    width: 100%;
    height: 100%;
}

.base-concreto-banner-link {
    position: absolute;
    inset: 0;
    z-index: 4;

    display: block;
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;

    color: inherit;
    background: transparent;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.base-concreto-banner-link:focus {
    outline: none;
}

.base-concreto-banner-link:focus-visible .base-concreto-banner-cta-label,
.base-concreto-banner-link:focus-visible .base-concreto-banner-cta-arrow {
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.98),
        0 0 0 4px rgba(9, 9, 9, 0.42);
}

.base-concreto-banner-cta {
    position: absolute;
    left: clamp(22px, 4.8vw, 72px);
    bottom: clamp(20px, 5vw, 58px);
    z-index: 1;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    pointer-events: none;
    transition: transform var(--speed-fast) ease;
}

.base-concreto-banner-cta-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 18px;

    color: var(--black);
    background: var(--white);
    border-radius: 999px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.13);

    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.055em;
    white-space: nowrap;
}

.base-concreto-banner-cta-arrow {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    color: var(--black);
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.13);
}

.base-concreto-banner-cta-arrow svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.base-concreto-banner-link:hover .base-concreto-banner-cta {
    transform: translateY(-1px);
}

.base-concreto-banner-link:active .base-concreto-banner-cta {
    transform: translateY(0);
}

/* PAGINATION — Oculto en escritorio y disponible en pantallas táctiles */

.base-concreto-featured-large-pagination {
    display: none;
}

/* RESPONSIVE — Dos columnas en tarjetas de productos y banner móvil */

@media (max-width: 1024px) {

    .base-concreto-banner {
        aspect-ratio: 16 / 7;
    }

    .base-concreto-featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .base-concreto-featured-large-viewport {
        width: 100%;
        margin-top: clamp(14px, 1.2vw, 18px);

        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        overscroll-behavior-x: contain;

        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .base-concreto-featured-large-viewport::-webkit-scrollbar {
        display: none;
    }

    .base-concreto-featured-large-viewport:focus-visible {
        outline: 1px solid rgba(9, 9, 9, 0.42);
        outline-offset: 4px;
    }

    .base-concreto-featured-large-grid {
        display: flex;
        align-items: stretch;
        width: 100%;
        gap: clamp(10px, 0.9vw, 14px);
        margin-top: 0;
    }

    .base-concreto-large-card {
        flex: 0 0 82%;
        width: 82%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        aspect-ratio: 16 / 9;
    }

    .base-concreto-featured-large-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 30px;
        margin-top: 8px;
        padding: 0 16px;
    }
}

/* PAGINATION — Indicadores interactivos del carrusel */

.base-concreto-featured-large-dot {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.base-concreto-featured-large-dot span {
    display: block;
    width: 7px;
    height: 7px;

    border-radius: 999px;
    background: rgba(9, 9, 9, 0.30);

    transition:
        width var(--speed-fast) ease,
        background-color var(--speed-fast) ease,
        transform var(--speed-fast) ease;
}

.base-concreto-featured-large-dot:hover span {
    transform: scale(1.08);
}

.base-concreto-featured-large-dot.is-active span {
    width: 22px;
    background: var(--black);
}

.base-concreto-featured-large-dot:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.72);
    outline-offset: 2px;
}

@media (max-width: 560px) {

    .base-concreto-banner-cta {
        left: 18px;
        bottom: 16px;
    }

    .base-concreto-banner-cta-label {
        min-height: 40px;
        padding-inline: 15px;
        font-size: 11px;
    }

    .base-concreto-banner-cta-arrow {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .base-concreto-banner-cta,
    .base-concreto-featured-large-dot span {
        transition-duration: 0.01ms !important;
    }

    .base-concreto-featured-large-viewport {
        scroll-behavior: auto;
    }
}


/* =========================================================
   YIRU — ACTUALIZACIÓN RESPONSIVE DE CATEGORÍAS
   Carruseles táctiles con tarjetas completas y una vista previa
   de la siguiente tarjeta en móviles y tabletas.
   ========================================================= */

/* Los indicadores de estos carruseles no forman parte de escritorio. */
.aceros-category-secondary-pagination,
.herramientas-electricidad-featured-pagination {
    display: none;
}

@media (max-width: 1024px) {

    /* SOLUCIONES PARA CUBIERTAS — Cuadrícula de dos columnas */
    .tejas-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(10px, 1.5vw, 14px);
    }

    /* MUNDO DEL ACERO — Primeros cuatro productos en cuadrícula 2 x 2 */
    .aceros-category-primary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* HERRAMIENTAS Y ELECTRICIDAD — Cuadrículas de dos columnas */
    .herramientas-electricidad-primary-grid,
    .herramientas-electricidad-secondary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* ACERO — Carrusel táctil; la tarjeta completa nunca se recorta */
    .aceros-category-secondary-carousel {
        width: 100%;
    }

    .aceros-category-secondary-grid {
        display: flex;
        align-items: flex-start;
        gap: clamp(10px, 1.5vw, 14px);
        width: 100%;
        margin-top: clamp(10px, 1vw, 14px);
        aspect-ratio: auto;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .aceros-category-secondary-grid::-webkit-scrollbar {
        display: none;
    }

    .aceros-category-secondary-grid:focus-visible {
        outline: 1px solid rgba(9, 9, 9, 0.42);
        outline-offset: 4px;
    }

    .aceros-category-feature-card {
        flex: 0 0 82%;
        width: 82%;
        min-width: 0;
        aspect-ratio: auto;
        overflow: hidden;
        background: transparent;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .aceros-category-feature-image {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    /* MARTILLOS Y CARRETILLAS — Vista parcial del siguiente producto */
    .herramientas-electricidad-featured-carousel {
        width: 100%;
    }

    .herramientas-electricidad-featured-grid {
        display: flex;
        align-items: flex-start;
        gap: clamp(10px, 1.5vw, 14px);
        width: 100%;
        margin-top: clamp(10px, 1vw, 14px);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .herramientas-electricidad-featured-grid::-webkit-scrollbar {
        display: none;
    }

    .herramientas-electricidad-featured-grid:focus-visible {
        outline: 1px solid rgba(9, 9, 9, 0.42);
        outline-offset: 4px;
    }

    .herramientas-electricidad-large-card {
        flex: 0 0 82%;
        width: 82%;
        min-width: 0;
        aspect-ratio: auto;
        overflow: hidden;
        background: transparent;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .herramientas-electricidad-large-image {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    /* MADERAS Y FENÓLICOS — Carrusel horizontal sin zoom ni recorte */
    .maderas-fenolicos-viewport {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .maderas-fenolicos-viewport::-webkit-scrollbar {
        display: none;
    }

    .maderas-fenolicos-track {
        display: flex;
        align-items: flex-start;
        gap: clamp(10px, 1.5vw, 14px);
        width: 100%;
        min-width: 100%;
    }

    .maderas-fenolicos-card {
        flex: 0 0 82%;
        width: 82%;
        min-width: 0;
        aspect-ratio: auto;
        overflow: hidden;
        background: transparent;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .maderas-fenolicos-image {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    /* INDICADORES — Puntos sincronizados debajo de cada carrusel */
    .aceros-category-secondary-pagination,
    .herramientas-electricidad-featured-pagination,
    .maderas-fenolicos-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 30px;
        margin-top: 8px;
        padding: 0 16px;
    }

    .aceros-category-secondary-dot,
    .herramientas-electricidad-featured-dot {
        display: grid;
        place-items: center;
        width: 17px;
        height: 14px;
        cursor: pointer;
    }

    .aceros-category-secondary-dot span,
    .herramientas-electricidad-featured-dot span {
        display: block;
        width: var(--carousel-dot-size);
        height: var(--carousel-dot-size);
        border-radius: 999px;
        background: rgba(9, 9, 9, 0.28);
        transition:
            width var(--speed-fast) ease,
            background-color var(--speed-fast) ease,
            transform var(--speed-fast) ease;
    }

    .aceros-category-secondary-dot:hover span,
    .herramientas-electricidad-featured-dot:hover span {
        transform: scale(1.08);
    }

    .aceros-category-secondary-dot.is-active span,
    .herramientas-electricidad-featured-dot.is-active span {
        width: 26px;
        background: var(--black);
    }

    .aceros-category-secondary-dot:focus-visible,
    .herramientas-electricidad-featured-dot:focus-visible {
        outline: 1px solid rgba(9, 9, 9, 0.7);
        outline-offset: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .aceros-category-secondary-grid,
    .herramientas-electricidad-featured-grid,
    .maderas-fenolicos-viewport {
        scroll-behavior: auto;
    }
}

/* =========================================================
   CHEMA — Vista de marca, responsive en todos los dispositivos
   ========================================================= */

#yiruChemaView[hidden] {
    display: none !important;
}

.chema-page {
    width: 100%;
    min-width: 0;
    padding-top: var(--header-height);
    color: var(--black);
    background: var(--white);
}

.chema-page *,
.chema-video-dialog * {
    min-width: 0;
}

.chema-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px clamp(18px, 2.2vw, 32px) 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(9, 9, 9, 0.72);
}

.chema-breadcrumb a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chema-breadcrumb a:hover {
    opacity: 0.68;
}

.chema-brand-navigation-wrap {
    width: 100%;
    padding: 0 clamp(18px, 2.2vw, 32px);
}

.chema-brand-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    width: 100%;
    max-width: 1440px;
    min-height: 80px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(9, 9, 9, 0.12);
}

.chema-brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    min-height: 44px;
    color: var(--black);
    text-decoration: none;
}

.chema-brand-logo-image {
    display: block;
    width: auto;
    max-width: clamp(110px, 14vw, 190px);
    max-height: 48px;
    object-fit: contain;
    object-position: left center;
}

.chema-brand-logo-image[hidden] {
    display: none !important;
}

.chema-brand-wordmark {
    font-size: clamp(25px, 2.2vw, 34px);
    line-height: 1;
    font-weight: 750;
    letter-spacing: -0.055em;
}

.chema-brand-wordmark[hidden] {
    display: none !important;
}

.chema-brand-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(20px, 4vw, 74px);
}

.chema-brand-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0;
    color: var(--black);
    background: transparent;
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: default;
}

.chema-brand-link[aria-disabled="true"] {
    cursor: default;
}

.chema-hero {
    position: relative;
    isolation: isolate;
    width: calc(100% - clamp(30px, 2.2vw, 48px));
    max-width: 1500px;
    aspect-ratio: 2048 / 728;
    margin: 0 auto;
    overflow: hidden;
    background: #f2f2f0;
}

.chema-hero-picture {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
}

.chema-hero-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.chema-hero-image[hidden] {
    display: none !important;
}

.chema-hero-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    background: #f1f1ef;
    color: #171717;
    font-size: clamp(28px, 4.6vw, 68px);
    font-weight: 750;
    letter-spacing: -0.055em;
}

.chema-introduction {
    width: 100%;
    padding: clamp(48px, 5.4vw, 76px) 24px 0;
    background: var(--white);
}

.chema-introduction-inner {
    width: min(100%, 1160px);
    margin: 0 auto;
    text-align: center;
}

.chema-introduction h1 {
    margin: 0;
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.chema-introduction p {
    max-width: 1120px;
    margin: 18px auto 0;
    color: rgba(9, 9, 9, 0.75);
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 400;
    line-height: 1.65;
}

.chema-content-inner {
    width: min(calc(100% - 48px), 1440px);
    margin: 0 auto;
}

.chema-categories-section {
    width: 100%;
    padding: clamp(54px, 5.8vw, 82px) 0 clamp(70px, 7vw, 100px);
    background: var(--white);
}

.chema-section-heading {
    margin: 0 0 clamp(24px, 2.7vw, 36px);
    text-align: center;
}

.chema-section-heading h2,
.chema-video-section-title {
    margin: 0;
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.chema-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 1vw, 16px);
    align-items: start;
}

.chema-category-card {
    min-width: 0;
    margin: 0;
    text-align: center;
}

.chema-category-art {
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f1f1ef;
}

.chema-category-art > img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.chema-category-art > img[hidden] {
    display: none !important;
}

.chema-category-art-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px;
    color: #171717;
    font-size: clamp(20px, 2vw, 32px);
    font-weight: 750;
    letter-spacing: -0.05em;
}

.chema-category-art-fallback-all {
    background: #f1f1ef;
}

.chema-category-art-fallback-all > span {
    padding-bottom: 4px;
    border-bottom: 2px solid currentColor;
    font-size: clamp(13px, 1.25vw, 18px);
    font-weight: 600;
    letter-spacing: 0;
}

.chema-category-card h3 {
    margin: 8px 0 0;
    font-size: clamp(15px, 1.35vw, 19px);
    font-weight: 500;
    line-height: 1.35;
}

.chema-video-section {
    width: 100%;
    padding: 0 0 clamp(64px, 7.5vw, 108px);
    background: var(--white);
}

.chema-video-section-title {
    margin: 0 0 clamp(24px, 2.5vw, 34px);
    text-align: center;
}

.chema-video-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: stretch;
    gap: clamp(20px, 3.2vw, 48px);
    width: 100%;
}

.chema-video-preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    align-self: center;
    overflow: hidden;
    padding: 0;
    color: var(--black);
    background: #e9e9e6;
    cursor: pointer;
    touch-action: manipulation;
}

.chema-video-poster {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--speed-smooth) var(--ease-out);
}

.chema-video-poster[hidden] {
    display: none !important;
}

.chema-video-preview-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    color: rgba(9, 9, 9, 0.76);
    font-size: clamp(28px, 4.4vw, 54px);
    font-weight: 750;
    letter-spacing: -0.055em;
    background: linear-gradient(135deg, #eeeeeb, #dadad6);
}

.chema-video-play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    color: var(--white);
    pointer-events: none;
}

.chema-video-play svg {
    display: block;
    width: clamp(58px, 6.8vw, 92px);
    height: auto;
    filter: drop-shadow(0 2px 9px rgba(0, 0, 0, 0.18));
}

.chema-video-play circle {
    fill: rgba(255, 255, 255, 0.22);
    stroke: rgba(255, 255, 255, 0.76);
    stroke-width: 1.2;
}

.chema-video-play path {
    fill: currentColor;
}

.chema-video-preview:hover .chema-video-poster {
    transform: scale(1.025);
}

.chema-video-preview:focus-visible {
    outline: 2px solid rgba(9, 9, 9, 0.85);
    outline-offset: 3px;
}

.chema-video-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(20px, 2.8vw, 40px);
    background: #f7f7f6;
    text-align: center;
}

.chema-video-copy h3 {
    margin: 0 0 16px;
    font-size: clamp(21px, 1.8vw, 28px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.chema-video-copy p {
    margin: 0;
    color: rgba(9, 9, 9, 0.77);
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.65;
}

.chema-video-copy p + p {
    margin-top: 12px;
}

/* VIDEO DIALOG — Ventana flotante con vídeo reproducible y cierre accesible */

.chema-video-dialog {
    position: fixed;
    inset: 0;
    width: min(800px, calc(100vw - 32px));
    max-width: 800px;
    max-height: calc(100dvh - 40px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 4px;
    color: var(--black);
    background: var(--white);
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.25);
}

.chema-video-dialog[open] {
    display: block;
}

.chema-video-dialog::backdrop {
    background: rgba(0, 0, 0, 0.60);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.chema-video-dialog-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 0 clamp(0px, 5.8vw, 80px);
    background: var(--white);
}

.chema-video-dialog-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 36px;
    margin: 0;
}

.chema-video-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    color: #8a8a8a;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
}

.chema-video-close:hover {
    color: #222;
}

.chema-video-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.chema-video-close svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: square;
}

.chema-video-dialog-content {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 80px;
}

.chema-video-player {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 210px);
    aspect-ratio: 16 / 9;
    background: #000;
    object-fit: contain;
}

.chema-video-player[hidden],
.chema-video-unavailable[hidden] {
    display: none !important;
}

.chema-video-unavailable {
    width: 100%;
    margin: 0;
    padding: 36px 16px;
    color: rgba(9, 9, 9, 0.68);
    background: #f5f5f4;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

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

/* BANNER PRINCIPAL DE BASE Y CONCRETO — Proporciones maestras actualizadas */



@media (max-width: 767px) {
    

    .chema-brand-links {
        display: none;
    }

    .chema-brand-navigation {
        min-height: 64px;
        gap: 16px;
    }

    .chema-breadcrumb {
        padding-top: 13px;
        font-size: 12px;
    }

    .chema-brand-navigation-wrap {
        padding-inline: 18px;
    }

     .chema-hero {
    width: calc(100% - 36px);
}

    .chema-introduction {
        padding: 38px 18px 0;
    }

    .chema-introduction h1 {
        font-size: clamp(22px, 5.4vw, 27px);
    }

    .chema-introduction p {
        margin-top: 15px;
        font-size: 15px;
        line-height: 1.62;
    }

    .chema-content-inner {
        width: calc(100% - 36px);
    }

    .chema-categories-section {
        padding: 54px 0 72px;
    }

    .chema-section-heading {
        margin-bottom: 25px;
    }

    .chema-categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 30px;
    }

    .chema-category-card h3 {
        margin-top: 7px;
        font-size: clamp(14px, 3.8vw, 17px);
        line-height: 1.3;
    }

    .chema-video-section {
        padding-bottom: 60px;
    }

    .chema-video-section-title {
        margin-bottom: 24px;
    }

    .chema-video-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .chema-video-preview {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .chema-video-copy {
        padding: 28px 20px 30px;
    }

    .chema-video-copy h3 {
        margin-bottom: 15px;
        font-size: 22px;
    }

    .chema-video-copy p {
        font-size: 15px;
        line-height: 1.65;
    }

    .chema-video-dialog {
        width: calc(100vw - 30px);
        max-height: calc(100dvh - 40px);
    }

    .chema-video-dialog-shell {
        padding: clamp(28px, 10vh, 72px) 0 clamp(32px, 11vh, 88px);
    }

    .chema-video-dialog-header {
        top: 0;
        right: 0;
        padding: 0 14px;
        margin: 0;
    }

    .chema-video-player {
        max-height: calc(100dvh - 260px);
    }
}

@media (max-width: 360px) {
    .chema-breadcrumb {
        gap: 6px;
        padding-inline: 14px;
    }

    .chema-brand-navigation-wrap {
        padding-inline: 14px;
    }

    .chema-hero {
        width: calc(100% - 28px);
    }

    .chema-content-inner {
        width: calc(100% - 28px);
    }

    .chema-video-copy {
        padding-inline: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chema-video-poster {
        transition: none;
    }
}
/* CHEMA — Banner horizontal adaptativo */

@media (max-width: 1024px) {
    .chema-hero {
        aspect-ratio: 16 / 7;
    }
}

/* =========================================================
   YIRU CHEMA — Categoría Concreto y reparación
   Primera fase: pantallas grandes (>= 1025px)
   ========================================================= */

#yiruChemaCategoryView[hidden] {
    display: none !important;
}

/* Navegación desde la página principal de CHEMA. */
a.chema-brand-link[href] {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.chema-brand-link[href]:hover {
    opacity: 0.68;
}

a.chema-brand-link[href]:focus-visible,
.chema-category-link:focus-visible {
    outline: 2px solid rgba(9, 9, 9, 0.82);
    outline-offset: 3px;
}

.chema-category-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.chema-category-link:hover .chema-category-art {
    outline: 1px solid rgba(9, 9, 9, 0.12);
    outline-offset: -1px;
}

/* La vista completa se adapta aquí únicamente a pantallas grandes. */
@media (min-width: 1025px) {
    .chema-catalog-view {
        width: 100%;
        min-height: calc(100vh - var(--header-height));
        padding: calc(var(--header-height) + 12px) clamp(18px, 2.5vw, 36px) 72px;
        color: var(--black);
        background: #f1f1ef;
    }

    .chema-catalog-layout {
        display: grid;
        grid-template-columns: clamp(250px, 24vw, 335px) minmax(0, 1fr);
        align-items: start;
        gap: clamp(10px, 0.9vw, 14px);
        width: min(100%, 1700px);
        margin: 0 auto;
    }

    /* Panel lateral único: sus filtros son filas, no tarjetas independientes. */
    .chema-catalog-filters {
    min-width: 0;
    min-height: 0;
    padding: clamp(18px, 1.55vw, 24px);
    background: #ffffff;
    border-radius: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.chema-catalog-filters::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

    .chema-catalog-title {
        margin: 0;
        color: #171717;
        font-size: clamp(22px, 1.6vw, 27px);
        font-weight: 300;
        line-height: 1.3;
        letter-spacing: -0.025em;
    }

    .chema-catalog-title-divider {
        height: 1px;
        margin: 20px 0 28px;
        border: 0;
        background: #eeeeee;
    }

    .chema-catalog-result-count {
        margin: 0 0 24px;
        color: #858585;
        font-size: 12px;
        line-height: 1.4;
    }

    .chema-filter-group {
        margin: 0;
        padding: 0;
        border: 0;
        border-bottom: 1px solid transparent;
    }

    .chema-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 52px;
        padding: 7px 0;
        color: #171717;
        background: transparent;
        text-align: left;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.35;
        cursor: pointer;
    }

    .chema-filter-toggle:focus-visible {
        outline: 1px solid rgba(9, 9, 9, 0.72);
        outline-offset: 2px;
    }

    .chema-filter-chevron {
        display: grid;
        place-items: center;
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        color: #404040;
        transition: transform var(--speed-fast) ease;
    }

    .chema-filter-chevron svg {
        display: block;
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.45;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .chema-filter-group.is-open .chema-filter-chevron {
        transform: rotate(-90deg);
    }

    .chema-filter-options {
        display: flex;
        flex-direction: column;
        gap: 11px;
        padding: 2px 0 18px;
    }

    .chema-filter-options[hidden] {
        display: none !important;
    }

    .chema-filter-options.is-scrollable {
    max-height: 228px;
    padding-right: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #a1a1a1 transparent;
}

.chema-filter-options.is-scrollable::-webkit-scrollbar {
    width: 7px;
}

.chema-filter-options.is-scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.chema-filter-options.is-scrollable::-webkit-scrollbar-thumb {
    background: #a1a1a1;
    border-radius: 8px;
}

    .chema-filter-category-tag {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        padding: 6px 8px;
        color: #37434d;
        background: #edf0f2;
        border: 1px solid #c5cdd2;
        border-radius: 4px;
        font-size: 13px;
        line-height: 1.25;
    }

    .chema-filter-option {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        color: #303030;
        font-size: 13px;
        line-height: 1.4;
        cursor: pointer;
    }

    .chema-filter-option input {
        flex: 0 0 auto;
        width: 15px;
        height: 15px;
        margin: 1px 0 0;
        accent-color: #4d5b69;
        cursor: pointer;
    }

    .chema-filter-option:focus-within {
        outline: 1px solid rgba(9, 9, 9, 0.6);
        outline-offset: 3px;
    }

    /* Área principal: barra blanca arriba y tarjetas debajo. */
    .chema-catalog-main {
        min-width: 0;
    }

    .chema-catalog-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 22px;
        min-height: 90px;
        margin-bottom: 10px;
        padding: 18px clamp(20px, 2.2vw, 30px);
        background: #ffffff;
        border-radius: 14px;
    }

    .chema-sort {
        position: relative;
        z-index: 10;
        flex: 0 1 252px;
        width: 252px;
        max-width: 100%;
    }

    .chema-sort-caption {
        display: block;
        margin: 0 0 2px;
        color: #aaaaaa;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.25;
    }

    .chema-sort-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 28px;
        padding: 0 0 8px;
        color: #171717;
        background: transparent;
        border-bottom: 1px solid #c7c7c7;
        text-align: left;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        cursor: pointer;
    }

    .chema-sort-toggle svg {
        flex: 0 0 14px;
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .chema-sort-toggle:focus-visible {
        outline: 1px solid rgba(9, 9, 9, 0.72);
        outline-offset: 3px;
    }

    .chema-sort-menu {
        position: absolute;
        top: calc(100% + 7px);
        left: 0;
        z-index: 20;
        width: 100%;
        min-width: 220px;
        padding: 5px;
        background: #ffffff;
        border: 1px solid rgba(9, 9, 9, 0.12);
        border-radius: 7px;
        box-shadow: 0 9px 26px rgba(0, 0, 0, 0.12);
    }

    .chema-sort-menu[hidden] {
        display: none !important;
    }

    .chema-sort-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 38px;
        padding: 8px 10px;
        color: #252525;
        background: transparent;
        border-radius: 4px;
        text-align: left;
        font-size: 13px;
        line-height: 1.3;
        cursor: pointer;
    }

    .chema-sort-option:hover,
    .chema-sort-option.is-active {
        background: #f1f1f1;
    }

    .chema-sort-option:focus-visible {
        outline: 1px solid rgba(9, 9, 9, 0.7);
        outline-offset: -1px;
    }

    .chema-sort-option[aria-pressed="true"]::after {
        content: "✓";
        color: #465462;
        font-size: 14px;
    }

    .chema-catalog-pagination {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 0 0 auto;
        gap: 10px;
        margin-left: auto;
    }

    .chema-catalog-page-control {
        display: grid;
        place-items: center;
        width: 24px;
        height: 32px;
        padding: 0;
        color: #71808d;
        background: transparent;
        cursor: pointer;
    }

    .chema-catalog-page-control svg {
        display: block;
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .chema-catalog-page-control:disabled {
        color: #d0d0d0;
        cursor: default;
    }

    .chema-catalog-page-control:focus-visible {
        outline: 1px solid rgba(9, 9, 9, 0.7);
        outline-offset: 2px;
    }

    .chema-catalog-page-number {
        display: grid;
        place-items: center;
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        color: #ffffff;
        background: #4d5b69;
        border-radius: 50%;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    /* Cinco tarjetas exactas por fila, incluida la primera fase de diez productos. */
    .chema-product-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        gap: clamp(8px, 0.8vw, 14px);
        width: 100%;
    }

    .chema-product-grid[hidden] {
        display: none !important;
    }

    .chema-product-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow: hidden;
        color: #171717;
        background: #ffffff;
        border: 1px solid rgba(9, 9, 9, 0.04);
        border-radius: 14px;
        text-align: left;
    }

    .chema-product-image-wrap {
        position: relative;
        isolation: isolate;
        width: 100%;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        background: #ffffff;
        border-bottom: 1px solid rgba(9, 9, 9, 0.08);
    }

    .chema-product-image {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        padding: 5px;
        object-fit: contain;
        object-position: center;
        background: #ffffff;
        pointer-events: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
    }

    .chema-product-image[hidden],
    .chema-product-image-fallback[hidden] {
        display: none !important;
    }

    .chema-product-image-fallback {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: grid;
        place-items: center;
        color: rgba(9, 9, 9, 0.68);
        background: #f7f7f6;
        font-size: clamp(18px, 1.3vw, 24px);
        font-weight: 750;
        letter-spacing: -0.045em;
    }

    .chema-card-gallery-control {
        position: absolute;
        top: 50%;
        z-index: 4;
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        padding: 0;
        color: #ffffff;
        background: #999999;
        border-radius: 50%;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-50%);
        transition:
            opacity var(--speed-fast) ease,
            background-color var(--speed-fast) ease,
            transform var(--speed-fast) ease,
            visibility var(--speed-fast) ease;
        cursor: pointer;
    }

    .chema-card-gallery-control-left {
        left: 10px;
    }

    .chema-card-gallery-control-right {
        right: 10px;
    }

    .chema-card-gallery-control svg {
        display: block;
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .chema-product-image-wrap:hover .chema-card-gallery-control,
    .chema-product-image-wrap:focus-within .chema-card-gallery-control {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .chema-card-gallery-control:hover {
        background: #888888;
    }

    .chema-card-gallery-control:active {
        transform: translateY(-50%) scale(0.96);
    }

    .chema-card-gallery-control:focus-visible,
    .chema-card-gallery-dot:focus-visible {
        outline: 2px solid rgba(9, 9, 9, 0.78);
        outline-offset: 2px;
    }

    .chema-card-gallery-dots {
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        max-width: calc(100% - 16px);
        padding: 4px 6px;
        overflow: hidden;
        background: #333333;
        border-radius: 7px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--speed-fast) ease, visibility var(--speed-fast) ease;
    }

    .chema-product-image-wrap:hover .chema-card-gallery-dots,
    .chema-product-image-wrap:focus-within .chema-card-gallery-dots {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .chema-card-gallery-dot {
        display: grid;
        place-items: center;
        flex: 0 0 8px;
        width: 8px;
        height: 10px;
        padding: 0;
        background: transparent;
        cursor: pointer;
    }

    .chema-card-gallery-dot span {
        display: block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #c0c0c0;
    }

    .chema-card-gallery-dot.is-active span,
    .chema-card-gallery-dot[aria-current="true"] span {
        background: #ffffff;
    }

    .chema-product-content {
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
        align-items: flex-start;
        min-height: 108px;
        padding: 13px 14px 14px;
    }

    .chema-product-name {
        margin: 0;
        color: #252525;
        font-size: clamp(13px, 1.05vw, 16px);
        font-weight: 500;
        line-height: 1.22;
        letter-spacing: -0.012em;
        overflow-wrap: anywhere;
    }

    /* Coincide con el diseño de cotización de las tarjetas de Cementos. */
    .chema-product-quote {
        display: none;
        align-items: center;
        justify-content: center;
        align-self: flex-start;
        gap: 7px;
        margin-top: auto;
        padding: 10px 12px;
        color: var(--black);
        background: #ffffff;
        border: 1px solid rgba(9, 9, 9, 0.72);
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        pointer-events: none;
        user-select: none;
    }

    .chema-product-quote::after {
        content: "";
        display: inline-block;
        width: 7px;
        height: 7px;
        flex: 0 0 7px;
        border-top: 1.3px solid currentColor;
        border-right: 1.3px solid currentColor;
        transform: rotate(45deg) translateY(-1px);
    }

    .chema-product-card:hover .chema-product-quote {
        display: inline-flex;
    }

    .chema-catalog-empty {
        grid-column: 1 / -1;
        margin: 0;
        padding: 48px 24px;
        color: rgba(9, 9, 9, 0.68);
        background: #ffffff;
        border-radius: 14px;
        text-align: center;
        font-size: 15px;
        line-height: 1.5;
    }

    .chema-catalog-empty[hidden] {
        display: none !important;
    }

    .chema-catalog-live-status,
    .chema-catalog-visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chema-filter-chevron,
    .chema-card-gallery-control,
    .chema-card-gallery-dots {
        transition: none !important;
    }
}


/* =========================================================
   YIRU CHEMA — Fichas de producto
   
   ========================================================= */

#yiruChemaProductView[hidden] {
    display: none !important;
}

.chema-product-detail-view {
    width: 100%;
    color: var(--black);
    background: var(--white);
}

.chema-product-detail-shell {
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: calc(var(--header-height) + 28px) 24px 84px;
}

.chema-detail-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    color: rgba(9, 9, 9, 0.62);
    font-size: 13px;
    line-height: 1.4;
}

.chema-detail-breadcrumb a {
    color: rgba(9, 9, 9, 0.62);
    text-decoration: none;
    cursor: pointer;
}

.chema-detail-breadcrumb a:hover {
    text-decoration: underline;
}

.chema-detail-breadcrumb-current {
    color: rgba(9, 9, 9, 0.9);
}

.chema-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.44fr) minmax(320px, 0.76fr);
    gap: clamp(36px, 5vw, 76px);
    align-items: start;
}

.chema-detail-left,
.chema-detail-info {
    min-width: 0;
}

.chema-detail-info {
    position: sticky;
    top: calc(var(--header-height) + 28px);
    align-self: start;
    padding-bottom: 24px;
}

.chema-detail-title {
    margin: 0;
    color: var(--black);
    font-size: clamp(30px, 3.1vw, 48px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.035em;
    overflow-wrap: anywhere;
}

.chema-detail-summary {
    max-width: 640px;
    margin: 24px 0 0;
    color: rgba(9, 9, 9, 0.68);
    font-size: clamp(16px, 1.25vw, 19px);
    font-weight: 400;
    line-height: 1.62;
}

.chema-detail-subheading {
    margin: 34px 0 16px;
    color: var(--black);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.chema-detail-features {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: rgba(9, 9, 9, 0.78);
    font-size: 15px;
    line-height: 1.58;
}

.chema-detail-features li,
.chema-detail-additional-list li {
    overflow-wrap: anywhere;
}

.chema-detail-spec-link {
    display: inline-flex;
    margin-top: 22px;
    padding: 0;
    color: rgba(9, 9, 9, 0.76);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(9, 9, 9, 0.35);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
}

.chema-detail-spec-link:hover {
    color: var(--black);
    border-bottom-color: var(--black);
}

.chema-detail-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin-top: 28px;
    padding: 0 22px;
    color: var(--white);
    background: var(--black);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition: opacity var(--speed-fast) ease, transform var(--speed-fast) ease;
}

.chema-detail-quote:hover {
    opacity: 0.86;
    transform: translateY(-1px);
}

.chema-detail-quote:active {
    transform: translateY(0);
}

.chema-detail-gallery {
    min-width: 0;
}

.chema-detail-gallery-layout {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.chema-detail-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.chema-detail-thumbnails[hidden] {
    display: none !important;
}

.chema-detail-thumbnail {
    display: grid;
    place-items: center;
    width: 92px;
    aspect-ratio: 4 / 5;
    padding: 5px;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.14);
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
}

.chema-detail-thumbnail.is-active {
    border-color: rgba(9, 9, 9, 0.74);
}

.chema-detail-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.chema-detail-stage[hidden] {
    display: none !important;
}

.chema-detail-stage {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.14);
}

.chema-detail-main-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 180ms ease;
    will-change: transform;
}

.chema-detail-main-image[hidden] {
    display: none !important;
}

.chema-detail-main-image.is-zoomed {
    transform: scale(2.05);
}

.chema-detail-gallery-control {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--white);
    background: rgba(9, 9, 9, 0.46);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color var(--speed-fast) ease, transform var(--speed-fast) ease;
}

.chema-detail-gallery-control:hover {
    background: rgba(9, 9, 9, 0.66);
}

.chema-detail-gallery-control:active {
    transform: translateY(-50%) scale(0.96);
}

.chema-detail-gallery-control-prev {
    left: 14px;
}

.chema-detail-gallery-control-next {
    right: 14px;
}

.chema-detail-gallery-control svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chema-detail-gallery-control[hidden] {
    display: none !important;
}

.chema-detail-sections {
    display: grid;
    gap: 12px;
    margin-top: 38px;
}

.chema-detail-collapsible {
    min-width: 0;
    overflow: hidden;
    background: var(--white);
    border: 1px solid rgba(9, 9, 9, 0.13);
    border-radius: 12px;
    scroll-margin-top: calc(var(--header-height) + 24px);
}

.chema-detail-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 54px;
    padding: 15px 18px;
    color: var(--black);
    background: var(--white);
    border: 0;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.chema-detail-section-toggle svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: rgba(9, 9, 9, 0.65);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--speed-fast) ease;
}

.chema-detail-collapsible.is-open .chema-detail-section-toggle svg {
    transform: rotate(180deg);
}

.chema-detail-section-body[hidden] {
    display: none !important;
}

.chema-detail-section-body {
    padding: 20px 18px 14px;
    color: rgba(9, 9, 9, 0.84);
    font-size: 14px;
    line-height: 1.65;
}

.chema-detail-additional-content p {
    margin: 0 0 20px;
    color: rgba(9, 9, 9, 0.86);
    font-size: 14px;
    line-height: 1.65;
}

.chema-detail-additional-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 20px;
    list-style: disc;
    color: rgba(9, 9, 9, 0.82);
    font-size: 14px;
    line-height: 1.55;
}

.chema-detail-additional-list li[hidden] {
    display: none !important;
}

.chema-detail-show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 18px 0 0;
    padding: 8px 10px;
    color: rgba(9, 9, 9, 0.82);
    background: var(--white);
    border: 0;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
}

.chema-detail-show-more:hover {
    color: var(--black);
}

.chema-detail-show-more[hidden] {
    display: none !important;
}

.chema-detail-spec-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.chema-detail-spec-table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    color: var(--black);
    font-size: 14px;
    line-height: 1.45;
}

.chema-detail-spec-table tr:nth-child(odd) {
    background: #f5f5f5;
}

.chema-detail-spec-table tr:nth-child(even) {
    background: #ffffff;
}

.chema-detail-spec-table tr[hidden] {
    display: none !important;
}

.chema-detail-spec-table th,
.chema-detail-spec-table td {
    width: 50%;
    padding: 20px 18px;
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.chema-detail-spec-table th {
    font-weight: 600;
}

.chema-detail-spec-table td {
    font-weight: 400;
}

.chema-detail-section-toggle:focus-visible,
.chema-detail-show-more:focus-visible,
.chema-detail-spec-link:focus-visible,
.chema-detail-quote:focus-visible,
.chema-detail-thumbnail:focus-visible,
.chema-detail-gallery-control:focus-visible,
.chema-product-card:focus-visible,
.chema-product-quote:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.8);
    outline-offset: 3px;
}

/* La tarjeta abre la ficha; los controles de galería y cotización siguen aislados. */
.chema-product-card {
    position: relative;
    cursor: pointer;
}

.chema-product-card:focus-visible {
    outline: 1px solid rgba(9, 9, 9, 0.72);
    outline-offset: 2px;
}

.chema-product-quote {
    pointer-events: auto !important;
    cursor: pointer;
    font-family: inherit;
    min-height: 34px;
}

.chema-product-card:hover .chema-product-quote,
.chema-product-card:focus-within .chema-product-quote {
    display: inline-flex;
}

@media (prefers-reduced-motion: reduce) {
    .chema-detail-section-toggle svg,
    .chema-detail-main-image,
    .chema-detail-gallery-control,
    .chema-detail-quote {
        transition: none !important;
    }
}

/* =========================================================
   YIRU CHEMA — Adaptación para pantallas pequeñas
   Catálogo, filtros táctiles y ficha individual
   ========================================================= */

.chema-mobile-catalog-controls,
.chema-mobile-filter-header,
.chema-mobile-filter-footer,
.chema-mobile-sort-block,
.chema-mobile-filter-backdrop,
.chema-mobile-filter-sheet,
.chema-detail-gallery-dots,
.chema-detail-lightbox {
    display: none;
}

/* Conserva el flujo original del panel de filtros en escritorio. */
.chema-mobile-filter-scroll {
    display: contents;
}

.chema-mobile-filter-backdrop[hidden],
.chema-mobile-filter-sheet[hidden],
.chema-detail-lightbox[hidden],
.chema-detail-gallery-dots[hidden] {
    display: none !important;
}

body.chema-mobile-overlay-open,
body.chema-detail-lightbox-open {
    overflow: hidden;
}

/* =========================================================
   RESPONSIVE — Catálogo móvil y tablets compactas
   ========================================================= */

@media (max-width: 1024px) {
    .chema-catalog-view {
        width: 100%;
        min-height: calc(100vh - var(--header-height));
        min-height: calc(100dvh - var(--header-height));
        padding: calc(var(--header-height) + 8px) 0 48px;
        overflow-x: clip;
        color: var(--black);
        background: #f1f1ef;
    }

    .chema-catalog-layout {
        display: block;
        width: 100%;
        margin: 0;
    }

    /* CATÁLOGO — Franja horizontal de filtros rápidos. */
    .chema-mobile-catalog-controls {
        display: block;
        width: 100%;
        padding: 14px 14px 16px;
        background: #ffffff;
    }

    .chema-mobile-filter-rail {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .chema-mobile-filter-rail::-webkit-scrollbar,
    .chema-mobile-quick-filters::-webkit-scrollbar,
    .chema-mobile-sort-options::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .chema-mobile-open-filters,
    .chema-mobile-filter-chip {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 40px;
        padding: 0 13px;
        color: #303944;
        background: #ffffff;
        border: 1px solid #d3d3d3;
        border-radius: 11px;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.2;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .chema-mobile-open-filters svg {
        width: 19px;
        height: 19px;
        flex: 0 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .chema-mobile-quick-filters {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 8px;
    }

    .chema-mobile-filter-chip.is-selected,
    .chema-mobile-filter-chip[aria-pressed="true"] {
        color: #202832;
        background: #f0f1f2;
        border-color: #303944;
    }

    .chema-mobile-filter-chip-chevron {
        width: 13px;
        height: 13px;
        flex: 0 0 13px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        transform: rotate(90deg);
    }

    .chema-mobile-result-count {
        margin: 13px 0 0;
        color: #777777;
        font-size: 14px;
        line-height: 1.4;
    }

    .chema-catalog-toolbar {
        display: none !important;
    }

    .chema-catalog-main {
        width: 100%;
        min-width: 0;
    }

    /* CATÁLOGO — Dos productos por fila, imagen y nombre solamente. */
    .chema-product-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 2px;
        width: 100%;
    }

    .chema-product-grid[hidden] {
        display: none !important;
    }

    .chema-product-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow: hidden;
        color: #171717;
        background: #ffffff;
        border: 0;
        border-radius: 0;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .chema-product-image-wrap {
        position: relative;
        isolation: isolate;
        width: 100%;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        background: #ffffff;
        border-bottom: 1px solid rgba(9, 9, 9, 0.08);
        touch-action: pan-y;
    }

    .chema-product-image {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        padding: 7px;
        object-fit: contain;
        object-position: center;
        background: #ffffff;
        pointer-events: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
    }

    .chema-product-image[hidden],
    .chema-product-image-fallback[hidden] {
        display: none !important;
    }

    .chema-product-image-fallback {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: grid;
        place-items: center;
        color: rgba(9, 9, 9, 0.68);
        background: #f7f7f6;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -0.04em;
    }

    .chema-card-gallery-control {
        display: none !important;
    }

    /* CATÁLOGO — Puntos de posición para carruseles táctiles. */
    .chema-card-gallery-dots {
        position: absolute;
        right: 7px;
        bottom: 7px;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        max-width: calc(100% - 14px);
        padding: 4px 6px;
        overflow-x: auto;
        overflow-y: hidden;
        background: rgba(45, 45, 45, 0.74);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        scrollbar-width: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .chema-card-gallery-dot {
        display: grid;
        flex: 0 0 8px;
        place-items: center;
        width: 8px;
        height: 10px;
        padding: 0;
        background: transparent;
        cursor: pointer;
    }

    .chema-card-gallery-dot span {
        display: block;
        width: 5px;
        height: 5px;
        border-radius: 999px;
        background: #bdbdbd;
    }

    .chema-card-gallery-dot.is-active,
    .chema-card-gallery-dot[aria-current="true"] {
        flex-basis: 14px;
        width: 14px;
    }

    .chema-card-gallery-dot.is-active span,
    .chema-card-gallery-dot[aria-current="true"] span {
        width: 12px;
        height: 6px;
        background: #ffffff;
    }

    .chema-product-content {
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
        align-items: flex-start;
        min-height: 58px;
        padding: 11px 10px 13px;
    }

    .chema-product-name {
        margin: 0;
        color: #252525;
        font-size: clamp(13px, 3.5vw, 15px);
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: -0.012em;
        overflow-wrap: anywhere;
    }

    .chema-product-quote {
        display: none !important;
    }

    .chema-catalog-empty {
        margin: 0;
        padding: 36px 22px;
        color: rgba(9, 9, 9, 0.72);
        background: #ffffff;
        text-align: center;
        font-size: 14px;
        line-height: 1.5;
    }

    /* MOBILE FILTER DRAWER — Panel lateral completo. */
    .chema-catalog-filters {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 1301;
        display: flex;
        flex-direction: column;
        width: min(80vw, 600px);
        min-width: min(288px, 100vw);
        max-width: 100vw;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        color: #171717;
        background: #ffffff;
        border: 0;
        border-radius: 24px 0 0 0;
        box-shadow: -12px 0 36px rgba(0, 0, 0, 0.12);
        transform: translateX(102%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 240ms ease, visibility 240ms ease;
        overscroll-behavior-y: auto;
    }

    .chema-catalog-filters.is-mobile-open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    .chema-mobile-filter-header {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 78px;
        padding: calc(env(safe-area-inset-top, 0px) + 15px) 22px 16px;
        background: #ffffff;
        border-bottom: 1px solid #e5e5e5;
    }

    .chema-mobile-filter-header h2 {
        margin: 0;
        color: #222222;
        font-size: 24px;
        font-weight: 400;
        line-height: 1.2;
    }

    .chema-mobile-filter-close {
        display: grid;
        flex: 0 0 36px;
        place-items: center;
        width: 36px;
        height: 36px;
        padding: 0;
        color: #222222;
        background: transparent;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
    }

    .chema-mobile-filter-close svg {
        display: block;
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .chema-mobile-filter-scroll {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0 20px 18px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .chema-mobile-filter-scroll::-webkit-scrollbar,
    .chema-mobile-filter-sheet-content::-webkit-scrollbar,
    .chema-detail-lightbox-thumbnails::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* MOBILE FILTER DRAWER — Franja gris y ordenamiento horizontal. */
    .chema-mobile-sort-block {
        display: block;
        margin: 0 -20px 8px;
        padding: 20px;
        background: #f6f6f6;
    }

    .chema-mobile-sort-block h3 {
        margin: 0 0 16px;
        color: #222222;
        font-size: 19px;
        font-weight: 600;
        line-height: 1.3;
    }

    .chema-mobile-sort-options {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .chema-mobile-sort-option {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 10px 13px;
        color: #333333;
        background: #ffffff;
        border: 1px solid #d0d0d0;
        border-radius: 12px;
        white-space: nowrap;
        font-size: 14px;
        line-height: 1.25;
        cursor: pointer;
    }

    .chema-mobile-sort-option.is-active,
    .chema-mobile-sort-option[aria-pressed="true"] {
        color: #303944;
        background: #eceeef;
        border-color: #303944;
        font-weight: 600;
    }

    .chema-catalog-filters .chema-catalog-title,
    .chema-catalog-filters .chema-catalog-title-divider,
    .chema-catalog-filters .chema-catalog-result-count {
        display: none;
    }

    .chema-filter-group {
        margin: 0;
        padding: 0;
        border: 0;
        border-bottom: 1px solid #e5e5e5;
    }

    .chema-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        min-height: 58px;
        padding: 15px 0;
        color: #222222;
        background: #ffffff;
        border: 0;
        text-align: left;
        font-size: 17px;
        font-weight: 400;
        line-height: 1.35;
        cursor: pointer;
    }

    .chema-filter-chevron {
        display: grid;
        flex: 0 0 18px;
        place-items: center;
        width: 18px;
        height: 18px;
        color: #333333;
        transition: transform var(--speed-fast) ease;
    }

    .chema-filter-chevron svg {
        display: block;
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .chema-filter-group.is-open .chema-filter-chevron {
        transform: rotate(90deg);
    }

    .chema-filter-options {
        display: flex;
        flex-direction: column;
        gap: 13px;
        padding: 0 0 18px;
    }

    .chema-filter-options[hidden] {
        display: none !important;
    }

    .chema-filter-options.is-scrollable {
        max-height: min(228px, 32dvh);
        padding: 2px 8px 12px 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #a1a1a1 transparent;
        -webkit-overflow-scrolling: touch;
    }

    .chema-filter-options.is-scrollable::-webkit-scrollbar {
        width: 5px;
    }

    .chema-filter-options.is-scrollable::-webkit-scrollbar-track {
        background: transparent;
    }

    .chema-filter-options.is-scrollable::-webkit-scrollbar-thumb {
        background: #aaaaaa;
        border-radius: 999px;
    }

    .chema-filter-category-tag {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        padding: 7px 9px;
        color: #37434d;
        background: #edf0f2;
        border: 1px solid #c5cdd2;
        border-radius: 5px;
        font-size: 14px;
        line-height: 1.35;
    }

    .chema-filter-option {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: #333333;
        font-size: 14px;
        line-height: 1.45;
        cursor: pointer;
    }

    .chema-filter-option input {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin: 1px 0 0;
        accent-color: #303944;
        cursor: pointer;
    }

    /* MOBILE FILTER DRAWER — Acciones fijas inferiores. */
    .chema-mobile-filter-footer {
        display: grid;
        flex: 0 0 auto;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
        background: #ffffff;
        border-top: 1px solid #e5e5e5;
        box-shadow: 0 -5px 18px rgba(0, 0, 0, 0.035);
    }

    .chema-mobile-filter-clear,
    .chema-mobile-filter-apply {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 48px;
        padding: 12px 14px;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.25;
        cursor: pointer;
    }

    .chema-mobile-filter-clear {
        color: #303944;
        background: transparent;
        border: 1px solid transparent;
    }

    .chema-mobile-filter-apply {
        color: #ffffff;
        background: #303944;
        border: 1px solid #303944;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    }

    .chema-mobile-filter-clear:focus-visible,
    .chema-mobile-filter-apply:focus-visible,
    .chema-mobile-filter-close:focus-visible,
    .chema-mobile-open-filters:focus-visible,
    .chema-mobile-filter-chip:focus-visible,
    .chema-mobile-sort-option:focus-visible {
        outline: 2px solid #303944;
        outline-offset: 2px;
    }

    /* =====================================================
       MOBILE FILTER SHEET — Bandeja inferior de filtro rápido
       ===================================================== */

    .chema-mobile-filter-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1300;
        background: rgba(0, 0, 0, 0.60);
    }

    .chema-mobile-filter-sheet:not([hidden]) {
        position: fixed;
        inset: auto 0 0;
        z-index: 1302;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-height: min(86dvh, 780px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overflow: hidden;
        color: #222222;
        background: #ffffff;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -12px 38px rgba(0, 0, 0, 0.16);
        animation: chema-mobile-sheet-enter 220ms ease-out;
    }

    .chema-mobile-filter-sheet-handle {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        min-height: 28px;
    }

    .chema-mobile-filter-sheet-handle span {
        display: block;
        width: 42px;
        height: 5px;
        background: #a8a8a8;
        border-radius: 999px;
    }

    .chema-mobile-filter-sheet-header {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        min-height: 66px;
        padding: 8px 22px 14px;
    }

    .chema-mobile-filter-sheet-header h2 {
        margin: 0;
        color: #222222;
        font-size: clamp(22px, 5.5vw, 27px);
        font-weight: 400;
        line-height: 1.25;
    }

    .chema-mobile-filter-sheet-content {
        flex: 1 1 auto;
        min-height: 0;
        padding: 0 24px 12px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .chema-mobile-filter-option {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 64px;
        padding: 12px 4px;
        color: #333333;
        background: #ffffff;
        border-bottom: 1px solid #e7e7e7;
        font-size: 16px;
        line-height: 1.4;
        cursor: pointer;
    }

    .chema-mobile-filter-option input {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        margin: 0;
        accent-color: #303944;
    }

    .chema-mobile-filter-option span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .chema-mobile-filter-sheet-footer {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        gap: 8px;
        padding: 14px 22px 18px;
        background: #ffffff;
        border-top: 1px solid #eeeeee;
    }

    .chema-mobile-filter-sheet-footer .chema-mobile-filter-apply {
        order: 0;
        min-height: 50px;
        font-size: 16px;
    }

    .chema-mobile-filter-sheet-footer .chema-mobile-filter-clear {
        order: 1;
        min-height: 44px;
        font-size: 15px;
    }

    @keyframes chema-mobile-sheet-enter {
        from {
            transform: translateY(18px);
            opacity: 0.94;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* =====================================================
       PRODUCT DETAIL — Ficha móvil en una sola columna
       ===================================================== */

    .chema-product-detail-view {
        width: 100%;
        overflow-x: clip;
        background: #ffffff;
    }

    .chema-product-detail-shell {
        width: 100%;
        margin: 0;
        padding: calc(var(--header-height) + 10px) 0 56px;
    }

    .chema-detail-breadcrumb {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px;
        margin: 0 16px 10px;
        color: rgba(9, 9, 9, 0.66);
        font-size: 12px;
        line-height: 1.45;
    }

    .chema-detail-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    /* Orden visual móvil sin duplicar los datos de la ficha. */
    .chema-detail-left,
    .chema-detail-info {
        display: contents;
    }

    .chema-detail-gallery {
        order: 0;
        width: 100%;
        margin: 0;
    }

    .chema-detail-gallery-layout {
        display: block;
        width: 100%;
    }

    .chema-detail-thumbnails {
        display: none !important;
    }

    .chema-detail-stage {
        position: relative;
        width: 100%;
        min-width: 0;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        background: #ffffff;
        border: 0;
        touch-action: pan-y;
    }

    .chema-detail-main-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        cursor: pointer;
        touch-action: pan-y;
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
        transform: none;
        transition: none;
    }

    .chema-detail-main-image.is-zoomed {
        transform: none;
    }

    .chema-detail-gallery-control {
        display: none !important;
    }

    /* PRODUCT DETAIL — Indicadores táctiles dentro de la imagen. */
    .chema-detail-gallery-dots:not([hidden]) {
        position: absolute;
        left: 50%;
        bottom: 12px;
        z-index: 6;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        max-width: calc(100% - 24px);
        padding: 5px 7px;
        overflow-x: auto;
        overflow-y: hidden;
        background: rgba(45, 45, 45, 0.66);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 999px;
        transform: translateX(-50%);
        scrollbar-width: none;
    }

    .chema-detail-gallery-dot {
        display: grid;
        flex: 0 0 8px;
        place-items: center;
        width: 8px;
        height: 10px;
        padding: 0;
        background: transparent;
        cursor: pointer;
    }

    .chema-detail-gallery-dot span {
        display: block;
        width: 5px;
        height: 5px;
        background: #c0c0c0;
        border-radius: 999px;
    }

    .chema-detail-gallery-dot.is-active,
    .chema-detail-gallery-dot[aria-current="true"] {
        flex-basis: 14px;
        width: 14px;
    }

    .chema-detail-gallery-dot.is-active span,
    .chema-detail-gallery-dot[aria-current="true"] span {
        width: 12px;
        height: 6px;
        background: #ffffff;
    }

    .chema-detail-title {
        order: 1;
        margin: 20px 16px 0;
        color: #090909;
        font-size: clamp(26px, 6.2vw, 34px);
        font-weight: 400;
        line-height: 1.12;
        letter-spacing: -0.03em;
    }

    .chema-detail-summary {
        order: 2;
        max-width: none;
        margin: 14px 16px 0;
        color: rgba(9, 9, 9, 0.72);
        font-size: 15px;
        line-height: 1.6;
    }

    .chema-detail-subheading {
        order: 3;
        margin: 26px 16px 12px;
        color: #090909;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0.14em;
    }

    .chema-detail-features {
        order: 4;
        display: grid;
        gap: 10px;
        margin: 0 16px;
        padding-left: 19px;
        color: rgba(9, 9, 9, 0.78);
        font-size: 14px;
        line-height: 1.55;
    }

    .chema-detail-spec-link {
        order: 5;
        align-self: flex-start;
        margin: 16px 16px 0;
        font-size: 14px;
    }

    .chema-detail-sections {
        order: 6;
        display: grid;
        gap: 0;
        width: 100%;
        margin: 24px 0 0;
    }

    .chema-detail-collapsible {
        border: 0;
        border-top: 1px solid #e4e4e4;
        border-radius: 0;
        background: #ffffff;
        scroll-margin-top: calc(var(--header-height) + 12px);
    }

    .chema-detail-collapsible:last-child {
        border-bottom: 1px solid #e4e4e4;
    }

    .chema-detail-section-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        min-height: 60px;
        padding: 16px;
        color: #222222;
        background: #ffffff;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
        text-align: left;
    }

    .chema-detail-section-toggle svg {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        fill: none;
        stroke: #222222;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform var(--speed-fast) ease;
    }

    .chema-detail-section-body {
        padding: 2px 16px 18px;
        color: rgba(9, 9, 9, 0.84);
        font-size: 14px;
        line-height: 1.6;
    }

    .chema-detail-additional-content p {
        margin: 0 0 16px;
        font-size: 14px;
        line-height: 1.6;
    }

    .chema-detail-additional-list {
        display: grid;
        gap: 8px;
        margin: 0;
        padding-left: 19px;
        font-size: 14px;
        line-height: 1.5;
    }

    .chema-detail-show-more {
        min-height: 42px;
        margin: 12px 0 0;
        padding: 8px 10px;
        color: #303944;
        background: #ffffff;
        font-size: 14px;
    }

    .chema-detail-spec-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .chema-detail-spec-table {
        width: 100%;
        table-layout: fixed;
        font-size: 13px;
        line-height: 1.45;
    }

    .chema-detail-spec-table th,
    .chema-detail-spec-table td {
        width: 50%;
        padding: 13px 10px;
        text-align: left;
        vertical-align: top;
        overflow-wrap: anywhere;
    }

    .chema-detail-quote {
        order: 7;
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - 32px);
        min-height: 50px;
        margin: 24px 16px 0;
        padding: 0 20px;
        color: #ffffff;
        background: #303944;
        border: 0;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }

    /* MOBILE PRODUCT GALLERY — Vista ampliada y miniaturas inferiores. */
    .chema-detail-lightbox:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 1600;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
        overflow: hidden;
        color: #090909;
        background: #ffffff;
    }

    .chema-detail-lightbox-header {
        display: flex;
        flex: 0 0 58px;
        align-items: center;
        justify-content: flex-end;
        padding: 0 18px;
    }

    .chema-detail-lightbox-close {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        padding: 0;
        color: #777777;
        background: transparent;
        border: 0;
        cursor: pointer;
    }

    .chema-detail-lightbox-close svg {
        width: 25px;
        height: 25px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .chema-detail-lightbox-stage {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        min-height: 0;
        padding: 0 8px;
        overflow: hidden;
        touch-action: pan-y;
    }

    .chema-detail-lightbox-stage img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
    }

    .chema-detail-lightbox-thumbnails {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 5px;
        width: 100%;
        min-height: 92px;
        padding: 8px 8px 10px;
        overflow-x: auto;
        overflow-y: hidden;
        background: #ffffff;
        border-top: 1px solid #eeeeee;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .chema-detail-lightbox-thumbnail {
        display: grid;
        flex: 0 0 86px;
        place-items: center;
        width: 86px;
        aspect-ratio: 4 / 5;
        padding: 4px;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #dddddd;
        cursor: pointer;
    }

    .chema-detail-lightbox-thumbnail.is-active,
    .chema-detail-lightbox-thumbnail[aria-current="true"] {
        border: 2px solid #111111;
    }

    .chema-detail-lightbox-thumbnail img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
    }
}

@media (max-width: 380px) {
    .chema-mobile-filter-rail {
        gap: 6px;
    }

    .chema-mobile-open-filters,
    .chema-mobile-filter-chip {
        min-height: 38px;
        padding-inline: 11px;
        font-size: 13px;
    }

    .chema-product-content {
        padding-inline: 8px;
    }

    .chema-detail-lightbox-thumbnail {
        flex-basis: 74px;
        width: 74px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chema-catalog-filters,
    .chema-mobile-filter-sheet:not([hidden]) {
        transition: none !important;
        animation: none !important;
    }
}