/* Generado por database/herramientas/css-unido.php a partir de assets/css/main.css.
 * No editar aquí: editar los archivos de assets/css y volver a correr la herramienta. */
@layer reset, settings, base, layout, components, integrations, pages, utilities;

/* ---- assets/css/settings/tokens.css ---- */
/*
 * Tokens de la tienda: todos los valores de diseño en un solo lugar. Salen de la guía visual
 * (Tienda-Colores Guia). Ningún otro archivo escribe colores, medidas ni sombras "a mano":
 * siempre var(--…). Así cambiar la marca o crear un modo oscuro se hace solo aquí.
 *
 * Cortes de pantalla (no se pueden usar variables dentro de @media; usar siempre estos tres):
 *   1100px  computadora pequeña / tablet horizontal
 *    820px  tablet vertical y celular grande (aparece el menú ☰)
 *    520px  celular
 */
@layer settings {
    :root {
        /* --- Marca --- */
        --color-noche: #001533;          /* barra superior, pie inferior, botón oscuro */
        --color-primario: #1457d9;       /* botones principales, enlaces, pasos */
        --color-primario-hover: #0f47b8;
        --color-acento: #00badb;         /* buscar, menú activo, carrito, etiquetas */
        --color-acento-hover: #00a9c7;
        --color-precio: #009fe3;         /* precios y totales */
        --color-whatsapp: #25a55f;       /* solo WhatsApp y mensajes de éxito */
        --color-whatsapp-hover: #1e8c50;
        --color-pie: #243f9e;            /* títulos del pie de página */
        --color-pie-texto: #24355f;      /* párrafos y datos de contacto del pie */
        --color-marino: #0f2f78;         /* texto del pie, títulos de Ubicación y Contacto */
        --color-indigo: #1e2d7d;         /* enlaces del panel de categorías, sombra del encabezado */
        --color-electrobot: #2f8ff0;     /* botón "Cotizar con ElectroBot" */

        /* --- Fondos oscuros de la portada --- */
        --color-hero: #07142d;           /* carrusel mientras carga la imagen */
        --color-franja: #06214f;         /* franja "Cotiza": inicio del degradado y velo de la foto */
        --degradado-franja: linear-gradient(90deg, var(--color-franja) 0%, #0a2a63 60%, #0b1b3a 100%);

        /* --- Neutros y superficies --- */
        --color-tinta: #0b1b3a;          /* títulos y cifras */
        --color-texto: #1f2a37;          /* cuerpo de texto */
        --color-texto-2: #33415c;        /* párrafos secundarios */
        --color-texto-suave: #6b7280;    /* ayudas, fechas, notas */
        --color-meta: #8a94a6;           /* categoría en la tarjeta de producto */
        --color-descripcion: #677285;    /* descripción corta del producto */
        --color-borde-campo: #d6dce5;    /* inputs, botón contorno */
        --color-borde: #e5e7eb;          /* tarjetas y cajas */
        --color-borde-suave: #eef1f5;    /* separadores dentro de cajas */
        --color-fondo: #f5f7fb;          /* secciones y pie */
        --color-superficie: #ffffff;
        --color-tinte: #eef3ff;          /* íconos, botón claro, avisos */
        --color-seleccion: #f3f7ff;      /* tarjeta seleccionable elegida */
        --color-inactivo: #a9b8d6;
        --color-radio: #b8c2d3;          /* opción sin elegir */
        --color-sobre-oscuro: #ffffff;
        --color-sobre-oscuro-suave: #a9c4f5;
        --color-borde-sobre-oscuro: rgba(163, 175, 239, 0.3);   /* línea bajo la barra superior */
        --color-hover-sobre-oscuro: color-mix(in srgb, var(--color-sobre-oscuro) 12%, transparent);
        --color-borde-hover: color-mix(in srgb, var(--color-acento) 45%, transparent); /* tarjetas al pasar el mouse */
        --fondo-modal: color-mix(in srgb, var(--color-noche) 55%, transparent);       /* detrás de modales y diálogos */

        /* --- Estados y avisos (fondo / texto) --- */
        --color-error: #b42318;
        --color-error-fondo: #fdecec;
        --color-error-linea: #f3c4bf;
        --color-exito: #03543f;
        --color-exito-fondo: #e7f6ef;
        --color-exito-icono: #0e9f6e;
        --color-atencion: #7a4b00;
        --color-atencion-pildora: #9a5b00;
        --color-atencion-fondo: #fff7e6;
        --color-atencion-icono: #d97706;
        --color-info: #1e3a8a;
        --color-info-pildora: #1e40af;
        --color-info-fondo: #eef3ff;
        --color-proceso: #075985;        /* en preparación, enviado */
        --color-proceso-fondo: #e0f2fe;
        --color-revision: #6b21a8;       /* pago en revisión */
        --color-revision-fondo: #f3e8ff;

        /* --- Ilustración de mantenimiento (components/estante-almacen) --- */
        --color-carton: #c9a26b;         /* cajas */
        --color-carton-oscuro: #a8814c;  /* cinta de las cajas */
        --color-acero: #cfd8e8;          /* línea del piso */
        --color-acero-oscuro: #9fb0cc;   /* postes del estante */

        /* --- Tipografía --- */
        --fuente: "Roboto", Arial, Helvetica, sans-serif;
        --peso-normal: 400;
        --peso-medio: 500;
        --peso-negrita: 700;
        --peso-extra: 800;
        --texto-titulo-pagina: 2.5rem;    /* 40 */
        --texto-titulo-seccion: 1.875rem; /* 30 */
        --texto-precio-ficha: 2rem;       /* 32 */
        --texto-titulo-caja: 1.25rem;     /* 20 */
        --texto-grande: 1rem;             /* 16 */
        --texto-cuerpo: 0.9375rem;        /* 15 */
        --texto-menu: 0.875rem;           /* 14 */
        --texto-pequeno: 0.8125rem;       /* 13 */
        --texto-mini: 0.75rem;            /* 12 */
        --texto-micro: 0.6875rem;         /* 11 */
        --interlineado: 1.5;
        --espaciado-antetitulo: 0.06em;

        /* --- Medidas --- */
        --ancho-contenedor: 1240px;
        --ancho-encabezado: 1320px;      /* cabecera del catálogo */
        --ancho-barra-encabezado: 1500px; /* solo la barra superior */
        --margen-encabezado: 32px;
        --ancho-columna-logo: 300px;
        --ancho-logo-minimo: 240px;
        --ancho-logo: 270px;
        --alto-logo: 52px;
        --ancho-buscador-minimo: 360px;
        --ancho-categoria-buscador: 210px;
        --ancho-boton-buscador: 52px;
        --separacion-encabezado: 28px;
        --margen-lateral: 24px;          /* a cada lado del contenedor */
        --alto-encabezado: 78px;
        --alto-menu: 48px;
        --alto-control: 42px;            /* botones */
        --alto-campo: 46px;              /* inputs */

        /* Espacios (escala de 4 en 4) */
        --espacio-1: 4px;
        --espacio-2: 8px;
        --espacio-3: 12px;
        --espacio-4: 16px;
        --espacio-5: 20px;
        --espacio-6: 24px;
        --espacio-8: 32px;
        --espacio-10: 40px;
        --espacio-12: 48px;
        --espacio-16: 64px;

        /* --- Radios --- */
        --radio-buscador: 3px;
        --radio-control: 6px;            /* botones, tarjetas de producto */
        --radio-campo: 8px;              /* avisos, campos */
        --radio-caja: 10px;
        --radio-modal: 12px;
        --radio-hoja: 16px;              /* hojas que suben en celular */
        --radio-pildora: 999px;

        /* --- Sombras --- */
        --sombra-tarjeta: 0 4px 14px rgba(15, 23, 41, 0.04);
        --sombra-caja: 0 8px 24px rgba(15, 23, 41, 0.05);
        --sombra-menu: 0 16px 34px rgba(20, 28, 62, 0.18);
        --sombra-modal: 0 24px 60px rgba(0, 21, 51, 0.35);
        --sombra-encabezado: 0 2px 12px color-mix(in srgb, var(--color-indigo) 18%, transparent);
        /* Páginas informativas (Ubicación, Nosotros, Contacto): sombra azulada de la marca */
        --sombra-informativa: 0 12px 30px color-mix(in srgb, var(--color-primario) 7%, transparent);
        --sombra-informativa-suave: 0 10px 24px color-mix(in srgb, var(--color-primario) 6%, transparent);

        /* --- Movimiento y capas --- */
        --transicion: 0.18s ease;
        --capa-encabezado: 50;
        --capa-menu: 60;
        --capa-chat: 80;
        --capa-modal: 100;
        --capa-aviso: 110;               /* avisos flotantes (toast) sobre todo */

        /* Anillo de foco accesible (teclado) */
        --foco: 0 0 0 3px rgba(20, 87, 217, 0.35);
        --foco-buscador: 0 0 0 3px color-mix(in srgb, var(--color-acento) 45%, transparent); /* el buscador es del acento */
    }

    @media (max-width: 1100px) {
        :root {
            --margen-encabezado: 20px;
            --ancho-columna-logo: clamp(200px, 22vw, 240px);
            --ancho-logo-minimo: 200px;
            --ancho-logo: 240px;
            --ancho-buscador-minimo: 300px;
            --ancho-categoria-buscador: 190px;
            --separacion-encabezado: var(--espacio-5);
        }
    }

    @media (max-width: 820px) {
        :root {
            --margen-encabezado: 12px;
            --ancho-logo: 170px;
            --ancho-boton-buscador: 48px;
            --texto-titulo-pagina: 1.875rem;  /* 30 en celular */
            --texto-titulo-seccion: 1.4375rem; /* 23 en celular */
            --alto-encabezado: 118px;
            --alto-menu: 44px;
        }
    }

    @media (max-width: 520px) {
        :root {
            --margen-lateral: 16px;
            --ancho-logo: 145px;
        }
    }
}


/* ---- assets/css/base/reset.css ---- */
/* Reset mínimo: cajas predecibles, sin márgenes por defecto y controles con la fuente del sitio. */
@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

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

    body,
    h1, h2, h3, h4, h5, h6,
    p, figure, blockquote, dl, dd {
        margin: 0;
    }

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

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

    button {
        cursor: pointer;
    }

    [hidden] {
        display: none !important;
    }

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

/* ---- assets/css/base/fonts.css ---- */
/*
 * Roboto alojada en el propio sitio (assets/fonts/roboto, licencia SIL OFL 1.1): la CSP no permite
 * Google Fonts y así no se envía la IP del visitante a terceros. Subconjunto latino (incluye á, ñ, ¿, ¡).
 */
@layer base {
    @font-face {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url("../fonts/roboto/roboto-latin-400-normal.woff2") format("woff2");
    }

    @font-face {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url("../fonts/roboto/roboto-latin-500-normal.woff2") format("woff2");
    }

    @font-face {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url("../fonts/roboto/roboto-latin-700-normal.woff2") format("woff2");
    }

    @font-face {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 800;
        font-display: swap;
        src: url("../fonts/roboto/roboto-latin-800-normal.woff2") format("woff2");
    }
}

/* ---- assets/css/base/elements.css ---- */
/*
 * Elementos HTML sin clase: tipografía, enlaces, foco, controles de formulario, tablas y listas.
 * Los controles se estilan aquí (no solo dentro de .form-field) porque varias vistas los usan
 * sueltos: filtros del catálogo, chat de ElectroBot, buscador de la página 404.
 */
@layer base {
    html {
        min-width: 320px;
        scroll-padding-top: calc(var(--alto-encabezado) + var(--alto-menu));
    }

    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        color: var(--color-texto);
        font-family: var(--fuente);
        font-size: var(--texto-cuerpo);
        line-height: var(--interlineado);
        background: var(--color-superficie);
        -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4 {
        color: var(--color-tinta);
        font-weight: var(--peso-negrita);
        line-height: 1.2;
    }

    h1 { font-size: var(--texto-titulo-pagina); font-weight: var(--peso-extra); }
    h2 { font-size: var(--texto-titulo-caja); }
    h3 { font-size: var(--texto-grande); }

    a {
        color: var(--color-primario);
        text-decoration: none;
    }

    a:hover {
        color: var(--color-primario-hover);
        text-decoration: underline;
    }

    strong, b {
        font-weight: var(--peso-negrita);
    }

    small {
        font-size: var(--texto-pequeno);
    }

    /* --- Controles --- */
    input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"]),
    select,
    textarea {
        width: 100%;
        max-width: 100%;
        min-height: var(--alto-campo);
        padding: 0 14px;
        border: 1px solid var(--color-borde-campo);
        border-radius: var(--radio-campo);
        color: var(--color-tinta);
        background: var(--color-superficie);
        font-size: var(--texto-cuerpo);
        transition: border-color var(--transicion), box-shadow var(--transicion);
    }

    select {
        padding-right: 36px;
    }

    textarea {
        min-height: 110px;
        padding-block: 12px;
        line-height: var(--interlineado);
        resize: vertical;
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--color-texto-suave);
    }

    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--color-primario);
        box-shadow: var(--foco);
        outline: none;
    }

    input[readonly],
    textarea[readonly] {
        color: var(--color-texto-2);
        background: var(--color-fondo);
    }

    input:disabled,
    select:disabled,
    textarea:disabled {
        color: var(--color-texto-suave);
        background: var(--color-fondo);
        cursor: not-allowed;
    }

    [aria-invalid="true"] {
        border-color: var(--color-error);
    }

    input[type="file"] {
        max-width: 100%;
        color: var(--color-texto-2);
        font-size: var(--texto-pequeno);
    }

    input[type="file"]::file-selector-button {
        min-height: 38px;
        margin-right: var(--espacio-3);
        padding: 0 14px;
        border: 1px solid var(--color-borde-campo);
        border-radius: var(--radio-control);
        color: var(--color-noche);
        background: var(--color-superficie);
        font: inherit;
        font-weight: var(--peso-negrita);
        cursor: pointer;
    }

    input[type="file"]::file-selector-button:hover {
        border-color: var(--color-primario);
        color: var(--color-primario);
    }

    input[type="checkbox"],
    input[type="radio"] {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--color-primario);
        cursor: pointer;
    }

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

    ::selection {
        color: var(--color-tinta);
        background: var(--color-tinte);
    }

    /* --- Tablas (pedido, cotización, mis cotizaciones, especificaciones) --- */
    table {
        width: 100%;
        border-collapse: collapse;
        font-variant-numeric: tabular-nums;
    }

    th {
        text-align: left;
    }

    thead th {
        padding: 12px var(--espacio-3);
        border-bottom: 1px solid var(--color-borde);
        color: var(--color-texto-suave);
        background: var(--color-fondo);
        font-size: var(--texto-mini);
        font-weight: var(--peso-negrita);
        letter-spacing: var(--espaciado-antetitulo);
        text-transform: uppercase;
        white-space: nowrap;
    }

    tbody :is(td, th),
    tfoot :is(td, th) {
        padding: 12px var(--espacio-3);
        border-bottom: 1px solid var(--color-borde-suave);
        color: var(--color-texto);
        font-size: var(--texto-menu);
        vertical-align: top;
    }

    tbody td small {
        color: var(--color-texto-suave);
        font-size: var(--texto-mini);
    }

    tfoot :is(td, th) {
        border-bottom: 0;
        color: var(--color-texto-2);
        font-weight: var(--peso-medio);
    }

    tfoot tr:last-child :is(td, th) {
        color: var(--color-tinta);
        font-size: var(--texto-grande);
        font-weight: var(--peso-extra);
    }

    .num {
        text-align: right;
        white-space: nowrap;
    }

    address {
        font-style: normal;
    }

    hr {
        height: 1px;
        margin: var(--espacio-6) 0;
        border: 0;
        background: var(--color-borde);
    }

    [aria-busy="true"] {
        cursor: progress;
    }
}


/* ---- assets/css/layout/container/container.css ---- */
/*
 * Contenedor centrado de la tienda (.container) y el contenido principal, que crece para dejar
 * el pie siempre abajo aunque la página sea corta.
 */
@layer layout {
    .container {
        width: min(var(--ancho-contenedor), calc(100% - 2 * var(--margen-lateral)));
        margin-inline: auto;
    }

    .site-main {
        flex: 1 0 auto;
        padding-bottom: var(--espacio-16);
    }

    .site-main:focus {
        outline: none;
    }

    /* Tabla ancha dentro de su caja: se desplaza de lado sin estirar la página. position: relative
       contiene los textos ocultos (absolutos) que pueda tener. */
    .table-scroll {
        position: relative;
        max-width: 100%;
        overflow-x: auto;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-campo);
    }

    .table-scroll > table {
        min-width: 480px;
    }

    .table-scroll > table tbody tr:last-child > *,
    .table-scroll > table:not(:has(tfoot)) tbody tr:last-child > * {
        border-bottom: 0;
    }

    @media (max-width: 520px) {
        .site-main {
            padding-bottom: var(--espacio-12);
        }
    }
}

/* ---- assets/css/layout/header/header.css ---- */
/*
 * Cabecera de la tienda (partials/header.php, maqueta Tienda · Inicio y Celular · Inicio):
 *   .site-header__barra   barra azul noche: logo, buscador (texto + categoría + botón), Mi cuenta
 *                         y Carrito
 *   .site-nav             menú blanco en mayúsculas, centrado; en celular una fila deslizable
 *   .site-header__categorias  panel de categorías que abre ☰ en celular
 *                         (js/layout/header.js pone .is-abierto)
 */
@layer layout {
    .site-header {
        position: sticky;
        top: 0;
        z-index: var(--capa-encabezado);
        color: var(--color-sobre-oscuro);
        background: var(--color-noche);
        box-shadow: var(--sombra-encabezado);
    }

    /* Cabecera mínima (tienda en mantenimiento): solo el isotipo */
    .site-header--minimo {
        padding-block: var(--espacio-4);
    }

    .site-header--minimo img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    .site-header__barra {
        border-bottom: 1px solid var(--color-borde-sobre-oscuro);
    }

    .site-header__main {
        display: grid;
        grid-template-columns: minmax(var(--ancho-logo-minimo), var(--ancho-columna-logo)) minmax(var(--ancho-buscador-minimo), 1fr) auto;
        align-items: center;
        gap: var(--separacion-encabezado);
        width: min(var(--ancho-barra-encabezado), calc(100% - 2 * var(--margen-encabezado)));
        min-height: var(--alto-encabezado);
        margin-inline: auto;
    }

    .site-header__toggle {
        display: none;
        align-items: center;
        justify-content: center;
        height: 44px;
        padding: 0 4px;
        border: 0;
        color: inherit;
        background: transparent;
    }

    .site-header__logo {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .site-header__logo img {
        width: min(100%, var(--ancho-logo));
        max-width: 100%;
        height: auto;
        max-height: var(--alto-logo);
        object-fit: contain;
    }

    /* --- Buscador: texto · categoría · botón --- */
    .site-search {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--ancho-categoria-buscador) var(--ancho-boton-buscador);
        min-width: 0;
        min-height: 48px;
        border-radius: var(--radio-buscador);
        background: var(--color-superficie);
    }

    .site-search:not(:has(.site-search__categoria)) {
        grid-template-columns: minmax(0, 1fr) var(--ancho-boton-buscador);
    }

    .site-search:focus-within {
        box-shadow: var(--foco-buscador);
    }

    .site-search input {
        min-width: 0;
        min-height: 48px;
        padding: 0 var(--espacio-4);
        border: 0;
        border-radius: var(--radio-buscador) 0 0 var(--radio-buscador);
        color: var(--color-texto);
        font-size: var(--texto-cuerpo);
    }

    .site-search input:focus,
    .site-search select:focus {
        box-shadow: none;
    }

    .site-search__categoria {
        min-width: 0;
        min-height: 48px;
        padding: 0 36px 0 14px;
        border: 0;
        border-left: 1px solid var(--color-borde);
        border-radius: 0;
        color: var(--color-descripcion);
        background: transparent;
        background-image:
            linear-gradient(45deg, transparent 50%, var(--color-texto-suave) 50%),
            linear-gradient(135deg, var(--color-texto-suave) 50%, transparent 50%);
        background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
        background-size: 5px 5px;
        background-repeat: no-repeat;
        font-size: var(--texto-cuerpo);
        appearance: none;
        cursor: pointer;
    }

    .site-search > button {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 0 var(--radio-buscador) var(--radio-buscador) 0;
        color: var(--color-sobre-oscuro);
        background: var(--color-acento);
        transition: background var(--transicion);
    }

    .site-search > button:hover {
        background: var(--color-acento-hover);
    }

    /* Sugerencias (js/layout/header.js) */
    .site-search__sugerencias {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        left: 0;
        z-index: var(--capa-menu);
        max-height: min(420px, 70vh);
        margin: 0;
        padding: 6px 0;
        overflow-y: auto;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-control);
        color: var(--color-tinta);
        background: var(--color-superficie);
        box-shadow: var(--sombra-menu);
        list-style: none;
    }

    .site-search__sugerencias [role="option"] > a {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        column-gap: 11px;
        align-items: center;
        min-height: 64px;
        padding: 7px 12px;
        color: var(--color-tinta);
    }

    .site-search__sugerencias [role="option"] > a:not(:has(> img)) {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-search__sugerencias img {
        grid-row: span 2;
        width: 52px;
        height: 52px;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-control);
        object-fit: contain;
    }

    .site-search__nombre {
        overflow: hidden;
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-negrita);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-search__sugerencias small {
        overflow: hidden;
        color: var(--color-texto-suave);
        font-size: var(--texto-micro);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-search__sugerencias [role="option"] > a:hover,
    .site-search__sugerencias [aria-selected="true"] > a {
        background: var(--color-seleccion);
        text-decoration: none;
    }

    .site-search__todos {
        margin-top: 4px;
        border-top: 1px solid var(--color-borde-suave);
    }

    .site-search__todos > a {
        display: block;
        padding: 12px 14px 8px;
        color: var(--color-primario);
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-extra);
    }

    /* --- Mi cuenta y Carrito --- */
    .site-header__acciones {
        display: flex;
        align-items: center;
        gap: var(--espacio-4);
        font-size: var(--texto-menu);
    }

    .site-header__accion {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: var(--espacio-2);
        min-height: 44px;
        color: var(--color-sobre-oscuro);
        white-space: nowrap;
    }

    .site-header__accion:hover {
        color: var(--color-acento);
        text-decoration: none;
    }

    .site-header__accion > svg {
        flex: 0 0 auto;
    }

    .site-header__badge {
        position: absolute;
        top: 6px;
        left: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: var(--radio-pildora);
        color: var(--color-sobre-oscuro);
        background: var(--color-acento);
        font-size: var(--texto-micro);
        font-weight: var(--peso-negrita);
        line-height: 1;
    }

    /* --- Menú principal --- */
    .site-nav {
        border-bottom: 1px solid var(--color-borde);
        background: var(--color-superficie);
    }

    .site-nav__lista {
        display: flex;
        justify-content: center;
        gap: 34px;
        width: min(var(--ancho-contenedor), calc(100% - 2 * var(--margen-lateral)));
        margin-inline: auto;
    }

    .site-nav__lista > a {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        height: var(--alto-menu);
        color: var(--color-noche);
        font-size: var(--texto-menu);
        font-weight: var(--peso-negrita);
        text-transform: uppercase;
        white-space: nowrap;
    }

    .site-nav__lista > a:hover,
    .site-nav__lista > a[aria-current="page"] {
        color: var(--color-acento);
        text-decoration: none;
    }

    .site-nav__lista > a[aria-current="page"] {
        box-shadow: inset 0 -3px 0 var(--color-acento);
    }

    /* --- Panel de categorías (☰, solo celular) --- */
    .site-header__categorias {
        display: none;
    }

    @media (max-width: 1100px) {
        /* Los textos ceden espacio al buscador antes del cambio a dos filas. */
        .site-header__accion {
            justify-content: center;
            width: var(--espacio-12);
        }

        .site-header__accion > span:not(.site-header__badge) {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

        .site-search__categoria {
            font-size: var(--texto-menu);
        }

        .site-nav__lista {
            gap: var(--espacio-6);
        }
    }

    @media (max-width: 820px) {
        /* Dos filas: ☰ · logo · cuenta y carrito; debajo el buscador a todo el ancho */
        .site-header__main {
            grid-template-columns: 40px minmax(0, 1fr) auto;
            grid-template-areas:
                "menu logo acciones"
                "buscar buscar buscar";
            gap: 10px 14px;
            width: calc(100% - 2 * var(--margen-encabezado));
            min-height: 0;
            padding-block: var(--espacio-3);
        }

        .site-header__toggle {
            display: flex;
            grid-area: menu;
        }

        .site-header__logo {
            grid-area: logo;
        }

        .site-search,
        .site-search:not(:has(.site-search__categoria)) {
            grid-area: buscar;
            grid-template-columns: minmax(0, 1fr) var(--ancho-boton-buscador);
            min-height: 46px;
        }

        .site-search input {
            min-height: 46px;
            padding-inline: 14px;
        }

        .site-search__categoria {
            display: none;
        }

        .site-header__acciones {
            grid-area: acciones;
            gap: 10px;
        }

        /* Solo íconos: el texto queda para lectores de pantalla desde 1100 px. */
        .site-header__accion {
            justify-content: center;
            width: 40px;
        }

        .site-header__badge {
            top: 3px;
            left: 22px;
        }

        /* Menú principal: fila que se desliza de lado */
        .site-nav {
            overflow: hidden;
        }

        .site-nav__lista {
            justify-content: flex-start;
            gap: var(--espacio-6);
            width: 100%;
            padding: 0 var(--espacio-4);
            overflow-x: auto;
            scrollbar-width: none;
        }

        .site-nav__lista::-webkit-scrollbar {
            display: none;
        }

        .site-nav__lista > a {
            height: 44px;
            font-size: var(--texto-pequeno);
        }

        /* Panel de categorías bajo el botón ☰ */
        .site-header__categorias.is-abierto {
            position: absolute;
            top: 72px;
            left: 8px;
            z-index: var(--capa-menu);
            display: block;
            width: min(320px, calc(100vw - 16px));
            max-height: calc(100vh - 90px);
            overflow-y: auto;
            padding: 10px 0;
            border: 1px solid var(--color-borde);
            border-radius: 4px;
            color: var(--color-indigo);
            background: var(--color-superficie);
            box-shadow: var(--sombra-menu);
        }

        .site-header__categorias h2 {
            margin: 8px 18px 4px;
            color: var(--color-texto-suave);
            font-size: var(--texto-mini);
            font-weight: var(--peso-negrita);
            text-transform: uppercase;
        }

        .site-header__categorias a {
            display: block;
            padding: 11px 18px;
            color: var(--color-indigo);
            font-size: var(--texto-menu);
            line-height: 1.3;
        }

        .site-header__categorias a:hover {
            background: var(--color-fondo);
            text-decoration: none;
        }

        .site-header__categorias .site-header__ver-todos {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 6px;
            padding: 13px 18px 6px;
            border-top: 1px solid var(--color-borde-suave);
            color: var(--color-primario);
            font-weight: var(--peso-extra);
        }
    }
}

/* ---- assets/css/layout/footer/footer.css ---- */
/*
 * Pie de la tienda (partials/footer.php, maqueta Tienda · Inicio): fondo gris claro con la marca
 * (nombre, descripción, dirección y redes) y las columnas Navegación, Categorías y Contacto; abajo
 * la franja azul noche con el copyright centrado y los enlaces legales.
 */
@layer layout {
    .site-footer {
        margin-top: auto;
        color: var(--color-marino);
        background: var(--color-fondo);
    }

    .site-footer__principal {
        padding-block: 58px;
    }

    .site-footer__grid {
        display: grid;
        grid-template-columns: 1.25fr 1fr 1fr 1fr;
        align-items: start;
        gap: 46px;
    }

    .site-footer h2 {
        margin: 0 0 18px;
        color: var(--color-pie);
        font-size: 1.125rem;
        font-weight: var(--peso-negrita);
    }

    /* --- Marca --- */
    .site-footer .site-footer__nombre {
        font-size: 1.75rem;
        font-weight: var(--peso-extra);
    }

    .site-footer__texto {
        max-width: 320px;
        margin: 0 0 20px;
        color: var(--color-pie-texto);
        font-size: var(--texto-cuerpo);
        line-height: 1.7;
    }

    .site-footer__direccion {
        display: flex;
        gap: 10px;
        margin: 0 0 22px;
        font-weight: var(--peso-negrita);
    }

    .site-footer__direccion svg {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        color: var(--color-acento);
    }

    .site-footer__direccion a {
        color: var(--color-pie);
    }

    .site-footer__redes {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--color-pie);
        font-weight: var(--peso-negrita);
    }

    .site-footer__redes a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid var(--color-pie);
        border-radius: var(--radio-pildora);
        color: var(--color-pie);
        transition: background var(--transicion), color var(--transicion);
    }

    .site-footer__redes a:hover {
        color: var(--color-sobre-oscuro);
        background: var(--color-pie);
    }

    /* --- Columnas --- */
    .site-footer__columna ul {
        display: grid;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-footer__columna a {
        color: var(--color-marino);
        font-size: var(--texto-cuerpo);
    }

    .site-footer__columna a:hover {
        color: var(--color-primario);
    }

    .site-footer__contacto li {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 10px;
        color: var(--color-pie-texto);
        font-size: var(--texto-cuerpo);
        line-height: 1.45;
    }

    .site-footer__contacto svg {
        margin-top: 2px;
        color: var(--color-acento);
    }

    .site-footer__contacto a {
        color: var(--color-pie-texto);
        overflow-wrap: anywhere;
    }

    /* --- Franja inferior --- */
    .site-footer__legal {
        display: grid;
        justify-items: center;
        gap: 6px;
        padding: 20px var(--margen-lateral);
        color: var(--color-sobre-oscuro);
        background: var(--color-noche);
        text-align: center;
    }

    .site-footer__legal p {
        font-size: var(--texto-cuerpo);
        font-weight: var(--peso-negrita);
    }

    .site-footer__legal nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 18px;
    }

    .site-footer__legal a {
        color: var(--color-sobre-oscuro-suave);
        font-size: var(--texto-pequeno);
    }

    .site-footer__legal a:hover {
        color: var(--color-sobre-oscuro);
    }

    @media (max-width: 1100px) {
        .site-footer__grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: var(--espacio-8);
        }

        .site-footer__marca {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 820px) {
        .site-footer__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* Celular (maqueta Celular · Inicio): una columna */
    @media (max-width: 520px) {
        .site-footer__principal {
            padding-block: 44px;
        }

        .site-footer__grid {
            grid-template-columns: minmax(0, 1fr);
            gap: var(--espacio-8);
        }

        .site-footer h2 {
            margin-bottom: 14px;
        }

        .site-footer .site-footer__nombre {
            font-size: 1.625rem;
        }

        .site-footer__columna ul {
            gap: 10px;
        }
    }
}


/* ---- assets/css/components/icon/icon.css ---- */
/*
 * Íconos Lucide del sprite de la tienda (helper icono_tienda(): <svg class="icon"><use href="…lucide.svg#nombre"></svg>).
 * Línea fina como los de la cabecera; toman el color del texto y acompañan su tamaño.
 * El sprite se genera con database/herramientas/lucide-sprite.php --tienda (assets/img/icons/iconos.txt).
 */
@layer components {
    .icon {
        display: inline-block;
        flex: 0 0 auto;
        width: 1.15em;
        height: 1.15em;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        vertical-align: -0.2em;
    }

    /* Cuadro celeste con un ícono al centro (títulos de cajas y listas con ícono):
       <span class="icon-box">{ícono}</span> */
    .icon-box {
        display: grid;
        flex-shrink: 0;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radio-control);
        color: var(--color-primario);
        background: var(--color-tinte);
        font-size: 1.125rem;
    }
}

/* ---- assets/css/components/button/button.css ---- */
/*
 * Botones de la tienda. Uso: class="button button--primary" (también en <a>).
 * Sin modificador = contorno; --primary = acción principal (azul); --ghost = solo texto;
 * --danger = cancelar o quitar; --block = todo el ancho; --small = compacto (botón Copiar).
 * WhatsApp: un botón con el ícono .fa-whatsapp se pinta verde (sin clase extra en la vista).
 */
@layer components {
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--espacio-2);
        min-height: var(--alto-control);
        padding: 0 18px;
        border: 1px solid var(--color-borde-campo);
        border-radius: var(--radio-control);
        color: var(--color-noche);
        background: var(--color-superficie);
        font-size: var(--texto-menu);
        font-weight: var(--peso-negrita);
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
    }

    .button:hover {
        border-color: var(--color-primario);
        color: var(--color-primario);
        text-decoration: none;
    }

    .button--primary {
        border-color: var(--color-primario);
        color: var(--color-sobre-oscuro);
        background: var(--color-primario);
    }

    .button--primary:hover {
        border-color: var(--color-primario-hover);
        color: var(--color-sobre-oscuro);
        background: var(--color-primario-hover);
    }

    .button--ghost {
        border-color: transparent;
        color: var(--color-primario);
        background: transparent;
    }

    .button--ghost:hover {
        border-color: transparent;
        color: var(--color-primario-hover);
        background: var(--color-tinte);
    }

    .button--danger {
        border-color: var(--color-error);
        color: var(--color-sobre-oscuro);
        background: var(--color-error);
    }

    .button--danger:hover {
        border-color: var(--color-error);
        color: var(--color-sobre-oscuro);
        filter: brightness(0.92);
    }

    /* Botones de WhatsApp: verde de la marca, solo para WhatsApp */
    .button:has(> .fa-whatsapp) {
        border-color: var(--color-whatsapp);
        color: var(--color-sobre-oscuro);
        background: var(--color-whatsapp);
    }

    .button:has(> .fa-whatsapp):hover {
        border-color: var(--color-whatsapp-hover);
        color: var(--color-sobre-oscuro);
        background: var(--color-whatsapp-hover);
    }

    .button--block {
        width: 100%;
    }

    .button--small {
        min-height: 32px;
        padding: 0 10px;
        font-size: var(--texto-mini);
    }

    .button:disabled,
    .button[aria-disabled="true"],
    .button.is-disabled {
        border-color: var(--color-inactivo);
        color: var(--color-sobre-oscuro);
        background: var(--color-inactivo);
        cursor: not-allowed;
        pointer-events: none;
    }

    /* Copiar (cuentas de pago, enlace del pedido): junto al dato */
    .button--copiar {
        margin-left: var(--espacio-2);
        vertical-align: middle;
    }
}

/* ---- assets/css/components/form-field/form-field.css ---- */
/*
 * Formularios (View::campo() y campos armados a mano):
 *   <form class="form">  ·  .form-field  ·  .form-field--check (casilla)  ·  .form-field--error
 *   .form-field__help / __error / __required
 * Los grupos sin rejilla propia (fieldset, bloques data-solo-persona…) separan sus campos con aire.
 */
@layer components {
    .form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espacio-5);
        margin: 0;
    }

    .form > .button:not(.button--block) {
        justify-self: start;
    }

    /* Dos botones seguidos al final (Confirmar · Corregir): en la misma fila */
    .form:has(> .button:not(.button--block) + .button:not(.button--block)) {
        grid-template-columns: repeat(2, max-content) minmax(0, 1fr);
        column-gap: var(--espacio-3);
    }

    .form:has(> .button:not(.button--block) + .button:not(.button--block)) > :not(.button) {
        grid-column: 1 / -1;
    }

    /* Bloques que se muestran según el tipo de documento o si es menor de edad */
    .form > div:not([class]),
    fieldset > div:not([class]) {
        display: grid;
        gap: var(--espacio-5);
    }

    /* --- Campo --- */
    .form-field {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 7px;
        min-width: 0;
    }

    .form-field > label,
    .form-field > span:first-child {
        color: var(--color-tinta);
        font-size: var(--texto-menu);
        font-weight: var(--peso-negrita);
    }

    .form-field__required {
        color: var(--color-error);
    }

    .form-field__help {
        margin: 0;
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
    }

    .form-field__error {
        margin: 0;
        color: var(--color-error);
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-medio);
    }

    .form-field--error :is(input, select, textarea),
    .form-field:has(> .form-field__error) :is(input, select, textarea) {
        border-color: var(--color-error);
    }

    /* Casilla con su texto */
    .form-field--check {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
    }

    .form-field--check > input {
        margin-top: 2px;
    }

    .form-field--check > label {
        flex: 1;
        min-width: 0;
        color: var(--color-texto-2);
        font-size: var(--texto-cuerpo);
        font-weight: var(--peso-normal);
        line-height: 1.45;
        cursor: pointer;
    }

    .form-field--check > :is(.form-field__help, .form-field__error) {
        flex-basis: 100%;
        padding-left: 28px;
    }

    /* --- Grupo de campos con título --- */
    fieldset {
        display: grid;
        gap: var(--espacio-5);
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    fieldset > legend {
        float: left;
        width: 100%;
        margin-bottom: var(--espacio-4);
        padding: 0 0 var(--espacio-3);
        border-bottom: 1px solid var(--color-borde-suave);
        color: var(--color-tinta);
        font-size: var(--texto-grande);
        font-weight: var(--peso-negrita);
    }

    fieldset > legend + * {
        clear: both;
    }

    /* --- Tarjeta de opción: un radio grande con título y texto (forma de entrega, tipo de
       reclamación). <label class="option-card"><input type="radio">…</label> --- */
    .option-card {
        position: relative;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 2px var(--espacio-3);
        padding: 14px var(--espacio-4);
        border: 1px solid var(--color-borde-campo);
        border-radius: var(--radio-campo);
        color: var(--color-tinta);
        background: var(--color-superficie);
        font-size: var(--texto-cuerpo);
        font-weight: var(--peso-medio);
        cursor: pointer;
        transition: border-color var(--transicion), background var(--transicion);
    }

    .option-card > input {
        grid-row: span 2;
        margin-top: 1px;
    }

    .option-card__titulo {
        color: var(--color-tinta);
        font-weight: var(--peso-negrita);
    }

    .option-card__texto {
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-normal);
        line-height: 1.45;
    }

    .option-card:hover {
        border-color: var(--color-primario);
    }

    .option-card:has(> input:checked) {
        border-color: var(--color-primario);
        background: var(--color-seleccion);
        box-shadow: inset 0 0 0 1px var(--color-primario);
    }

    .option-card:has(> input:focus-visible) {
        box-shadow: var(--foco);
    }
}

/* ---- assets/css/components/password-field/password-field.css ---- */
/*
 * Campo de contraseña: <div class="password-field" data-password-field> con un .form-field dentro.
 * js/components/contrasena.js agrega el botón Mostrar (.password-field__toggle) junto al campo y,
 * si corresponde, el medidor de seguridad (.password-strength) debajo.
 */
@layer components {
    .password-field > .form-field {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 0;
    }

    .password-field > .form-field > :not(input, .password-field__toggle) {
        grid-column: 1 / -1;
    }

    .password-field > .form-field > input {
        grid-column: 1;
        border-radius: var(--radio-campo) 0 0 var(--radio-campo);
    }

    .password-field__toggle {
        grid-column: 2;
        min-width: 84px;
        padding: 0 var(--espacio-3);
        border: 1px solid var(--color-borde-campo);
        border-left: 0;
        border-radius: 0 var(--radio-campo) var(--radio-campo) 0;
        color: var(--color-primario);
        background: var(--color-fondo);
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-negrita);
    }

    .password-field__toggle:hover {
        background: var(--color-tinte);
    }

    /* --- Medidor de seguridad --- */
    .password-strength {
        display: flex;
        align-items: center;
        gap: var(--espacio-2);
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
    }

    .password-strength[data-nivel=""] {
        display: none;
    }

    .password-strength__barra {
        position: relative;
        width: 120px;
        height: 6px;
        overflow: hidden;
        border-radius: var(--radio-pildora);
        background: var(--color-borde);
    }

    .password-strength__barra::after {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 0;
        border-radius: inherit;
        background: var(--color-error);
        transition: width var(--transicion), background var(--transicion);
    }

    .password-strength[data-nivel="0"] .password-strength__barra::after { width: 15%; }
    .password-strength[data-nivel="1"] .password-strength__barra::after { width: 35%; }
    .password-strength[data-nivel="2"] .password-strength__barra::after { width: 55%; background: var(--color-atencion-icono); }
    .password-strength[data-nivel="3"] .password-strength__barra::after { width: 80%; background: var(--color-exito-icono); }
    .password-strength[data-nivel="4"] .password-strength__barra::after { width: 100%; background: var(--color-exito-icono); }
}

/* ---- assets/css/components/notice/notice.css ---- */
/*
 * Avisos de cada pantalla (.notice) y avisos flotantes (.notice.toast dentro de .toast-region):
 * los de la última acción (partials/flash-messages.php) y los de js/core/http.js (avisar()).
 *   .notice (informativo, azul suave) · --exito · --aviso · --error
 * Pueden ser <p>, o <div> con párrafos, listas y enlaces dentro.
 */
@layer components {
    .notice {
        display: grid;
        gap: var(--espacio-2);
        margin: 0;
        padding: 14px var(--espacio-4);
        border: 1px solid transparent;
        border-left: 4px solid var(--color-info-pildora);
        border-radius: var(--radio-campo);
        color: var(--color-info);
        background: var(--color-info-fondo);
        font-size: var(--texto-menu);
        line-height: 1.5;
    }

    .notice > * {
        margin: 0;
    }

    .notice ul {
        padding-left: var(--espacio-5);
    }

    .notice a:not(.button) {
        color: inherit;
        font-weight: var(--peso-negrita);
        text-decoration: underline;
    }

    .notice--exito {
        border-left-color: var(--color-exito-icono);
        color: var(--color-exito);
        background: var(--color-exito-fondo);
    }

    .notice--aviso {
        border-left-color: var(--color-atencion-icono);
        color: var(--color-atencion);
        background: var(--color-atencion-fondo);
    }

    .notice--error {
        border-left-color: var(--color-error);
        color: var(--color-error);
        background: var(--color-error-fondo);
    }

    /* --- Avisos flotantes --- */
    .toast-region {
        position: fixed;
        right: var(--espacio-4);
        bottom: var(--espacio-4);
        z-index: var(--capa-aviso);
        display: grid;
        gap: var(--espacio-2);
        width: min(380px, calc(100vw - 2rem));
    }

    .toast {
        display: flex;
        align-items: flex-start;
        gap: var(--espacio-2);
        box-shadow: var(--sombra-menu);
        animation: toast-entrada 0.2s ease;
    }

    .toast p {
        flex: 1;
    }

    .toast__cerrar {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        margin: -2px -4px 0 0;
        border: 0;
        border-radius: var(--radio-control);
        color: inherit;
        background: transparent;
        font-size: 1.125rem;
        line-height: 1;
        opacity: 0.7;
    }

    .toast__cerrar:hover {
        opacity: 1;
    }

    @keyframes toast-entrada {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
    }
}

/* ---- assets/css/components/breadcrumb/breadcrumb.css ---- */
/*
 * Migas de pan (components/page-header.php): casita | Inicio > página actual.
 * Los enlaces usan el azul de base (elements.css), igual que en la ficha; la página actual y las
 * flechas quedan en gris.
 */
@layer components {
    .breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin: 0 0 var(--espacio-3);
        padding: 0;
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
        list-style: none;
    }

    .breadcrumb li {
        display: inline-flex;
        align-items: center;
        min-width: 0;
    }

    .breadcrumb li + li::before {
        content: "";
        width: 6px;
        height: 6px;
        margin: 0 10px;
        border-top: 1.5px solid var(--color-borde-campo);
        border-right: 1.5px solid var(--color-borde-campo);
        transform: rotate(45deg);
    }

    /* Casita oscura y una raya vertical antes de "Inicio" (todo es el mismo enlace) */
    .breadcrumb__inicio {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .breadcrumb__inicio .icon {
        color: var(--color-tinta);
    }

    .breadcrumb__divisor {
        width: 1px;
        height: 14px;
        background: var(--color-borde-campo);
    }

    .breadcrumb [aria-current="page"] {
        overflow: hidden;
        max-width: 40ch;
        color: var(--color-texto-suave);
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ---- assets/css/components/page-header/page-header.css ---- */
/*
 * Encabezado de página (components/page-header.php): franja gris claro con migas, título y
 * descripción, bajo la cabecera de la tienda.
 */
@layer components {
    .page-header {
        margin-bottom: var(--espacio-8);
        padding-block: var(--espacio-8) var(--espacio-6);
        border-bottom: 1px solid var(--color-borde);
        background: var(--color-fondo);
    }

    .page-header__title {
        font-size: var(--texto-titulo-pagina);
        font-weight: var(--peso-extra);
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .page-header__description {
        max-width: 70ch;
        margin-top: var(--espacio-2);
        color: var(--color-texto-2);
        font-size: var(--texto-grande);
    }

    @media (max-width: 520px) {
        .page-header {
            margin-bottom: var(--espacio-6);
            padding-block: var(--espacio-6) var(--espacio-5);
        }
    }
}

/* ---- assets/css/components/panel/panel.css ---- */
/*
 * Caja blanca de contenido (pedido, cuenta, contacto, reclamaciones): <section class="panel">
 * con su título .panel__title y notas .panel__nota. Las cajas seguidas se separan solas.
 */
@layer components {
    .panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: var(--espacio-4);
        min-width: 0;
        padding: var(--espacio-6);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-caja);
        background: var(--color-superficie);
        box-shadow: var(--sombra-caja);
    }

    .panel > * {
        margin: 0;
    }

    .panel + .panel {
        margin-top: var(--espacio-5);
    }

    .panel > .button {
        justify-self: start;
    }

    .panel__title {
        color: var(--color-tinta);
        font-size: var(--texto-titulo-caja);
        font-weight: var(--peso-negrita);
    }

    /* Título con un .icon-box delante */
    .panel__title--icono {
        display: flex;
        align-items: center;
        gap: var(--espacio-3);
    }

    .panel__nota {
        color: var(--color-texto-2);
        font-size: var(--texto-menu);
    }

    .panel p:not([class]) {
        color: var(--color-texto-2);
    }

    @media (max-width: 520px) {
        .panel {
            padding: var(--espacio-5) var(--espacio-4);
        }
    }
}

/* ---- assets/css/components/status-pill/status-pill.css ---- */
/*
 * Píldora de estado: <span class="status-pill status-pill--{estado}">Texto</span>.
 * Estados de pedido, cotización y producto (agotado / quedan pocos) con los colores de la guía:
 *   atención (ámbar) · información (azul) · revisión del pago (morado) · proceso (celeste) · éxito (verde)
 *   · error (rojo) · neutro
 */
@layer components {
    .status-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: var(--radio-pildora);
        color: var(--color-texto-2);
        background: var(--color-fondo);
        font-size: var(--texto-mini);
        font-weight: var(--peso-negrita);
        line-height: 1.3;
        white-space: nowrap;
        vertical-align: middle;
    }

    .status-pill::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: var(--radio-pildora);
        background: currentColor;
    }

    .status-pill--pendiente,
    .status-pill--aviso {
        color: var(--color-atencion-pildora);
        background: var(--color-atencion-fondo);
    }

    .status-pill--confirmado,
    .status-pill--vigente {
        color: var(--color-info-pildora);
        background: var(--color-info-fondo);
    }

    /* Pago en revisión (constancia por validar) */
    .status-pill--revision {
        color: var(--color-revision);
        background: var(--color-revision-fondo);
    }

    .status-pill--en_preparacion,
    .status-pill--listo_recoger,
    .status-pill--enviado {
        color: var(--color-proceso);
        background: var(--color-proceso-fondo);
    }

    .status-pill--entregado,
    .status-pill--convertida {
        color: var(--color-exito);
        background: var(--color-exito-fondo);
    }

    .status-pill--cancelado,
    .status-pill--anulada,
    .status-pill--vencida,
    .status-pill--agotado {
        color: var(--color-error);
        background: var(--color-error-fondo);
    }
}

/* ---- assets/css/components/product-card/product-card.css ---- */
/*
 * Tarjeta de producto (components/product-card.php): toda la tarjeta es un enlace a la ficha.
 * Imagen en proporción 10:9, casi cuadrada como en electrotopperu.com (se adapta al ancho de la
 * tarjeta: catálogo, vitrinas y relacionados usan la misma), categoría, modelo en negrita, nombre
 * en 2 líneas (siempre reservadas, para que todas midan igual) y precio celeste. Sin stock:
 * etiqueta roja, imagen atenuada y precio gris, sin líneas extra que alarguen la tarjeta.
 */
@layer components {
    .product-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-control);
        color: inherit;
        background: var(--color-superficie);
        box-shadow: var(--sombra-tarjeta);
        transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
    }

    .product-card:hover {
        border-color: var(--color-borde-hover);
        box-shadow: var(--sombra-caja);
        color: inherit;
        text-decoration: none;
        transform: translateY(-2px);
    }

    .product-card__imagen {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 10 / 9;
        overflow: hidden;
        padding: var(--espacio-2);
        background: var(--color-superficie);
    }

    /* La foto ocupa la caja sin deformarse (contain). Con max-height: 100% la caja crecía al
       tamaño de la foto (300 × 300): aspect-ratio deja que el contenido la agrande */
    .product-card__imagen img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .product-card__sin-stock {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
        padding: 4px 10px;
        border-radius: var(--radio-pildora);
        color: var(--color-error);
        background: var(--color-error-fondo);
        font-size: var(--texto-mini);
        font-weight: var(--peso-extra);
    }

    .product-card__cuerpo {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 6px;
        padding: var(--espacio-3) 14px var(--espacio-4);
    }

    .product-card__categoria {
        color: var(--color-meta);
        font-size: var(--texto-mini);
        text-transform: uppercase;
    }

    .product-card__modelo {
        color: var(--color-tinta);
        font-size: var(--texto-cuerpo);
        font-weight: var(--peso-negrita);
        overflow-wrap: anywhere;
    }

    /* 2 líneas como máximo y siempre reservadas (min-height): un nombre corto no encoge la tarjeta */
    .product-card__nombre {
        display: -webkit-box;
        min-height: calc(2 * 1.4em);
        overflow: hidden;
        color: var(--color-descripcion);
        font-size: var(--texto-pequeno);
        line-height: 1.4;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .product-card__precio {
        margin-top: auto;
        padding-top: var(--espacio-2);
        color: var(--color-precio);
        font-size: var(--texto-grande);
        font-weight: var(--peso-extra);
    }

    .product-card__precio small {
        color: var(--color-texto-suave);
        font-size: var(--texto-micro);
        font-weight: var(--peso-medio);
    }

    .product-card.is-agotado .product-card__imagen img {
        opacity: 0.55;
    }

    .product-card.is-agotado .product-card__precio {
        color: var(--color-meta);
    }

    /* Celular: 2 tarjetas por fila, un poco más compactas pero legibles */
    @media (max-width: 520px) {
        .product-card__cuerpo {
            gap: 4px;
            padding: 10px var(--espacio-3) 14px;
        }

        .product-card__categoria {
            font-size: var(--texto-micro);
        }

        .product-card__modelo {
            font-size: var(--texto-menu);
        }

        .product-card__nombre {
            font-size: var(--texto-mini);
        }

        .product-card__precio {
            padding-top: 6px;
            font-size: var(--texto-cuerpo);
        }
    }
}

/* ---- assets/css/components/quantity-stepper/quantity-stepper.css ---- */
/*
 * Selector de cantidad (ficha de producto y carrito): − [cantidad] + en una sola caja.
 * <div class="quantity-stepper" data-cantidad><button>−</button><input><button>+</button></div>
 */
@layer components {
    .quantity-stepper {
        display: inline-grid;
        grid-template-columns: 40px 56px 40px;
        align-items: stretch;
        height: var(--alto-control);
        overflow: hidden;
        border: 1px solid var(--color-borde-campo);
        border-radius: var(--radio-control);
        background: var(--color-superficie);
    }

    .quantity-stepper:focus-within {
        border-color: var(--color-primario);
        box-shadow: var(--foco);
    }

    .quantity-stepper button {
        border: 0;
        color: var(--color-noche);
        background: var(--color-fondo);
        font-size: 1.125rem;
        font-weight: var(--peso-negrita);
        line-height: 1;
    }

    .quantity-stepper button:hover {
        color: var(--color-primario);
        background: var(--color-tinte);
    }

    .quantity-stepper button:disabled {
        color: var(--color-inactivo);
        cursor: not-allowed;
    }

    .quantity-stepper input {
        min-height: 0;
        height: 100%;
        padding: 0 var(--espacio-1);
        border: 0;
        border-inline: 1px solid var(--color-borde-campo);
        border-radius: 0;
        font-weight: var(--peso-negrita);
        text-align: center;
    }

    .quantity-stepper input:focus {
        box-shadow: none;
    }
}

/* ---- assets/css/components/empty-state/empty-state.css ---- */
/*
 * Estado vacío (carrito vacío, sin resultados, sin pedidos): ícono grande, mensaje y acción.
 * <div class="empty-state"><p>{ícono}</p><p>Mensaje</p><p>{botón}</p></div>
 */
@layer components {
    .empty-state {
        display: grid;
        justify-items: center;
        gap: var(--espacio-3);
        padding: var(--espacio-12) var(--espacio-6);
        border: 1px dashed var(--color-borde-campo);
        border-radius: var(--radio-caja);
        color: var(--color-texto-2);
        background: var(--color-fondo);
        text-align: center;
    }

    .empty-state > * {
        margin: 0;
    }

    .empty-state > p:first-child {
        display: grid;
        place-items: center;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        color: var(--color-primario);
        background: var(--color-tinte);
        font-size: 1.75rem;
    }

    .empty-state > p:nth-child(2) {
        color: var(--color-tinta);
        font-size: var(--texto-grande);
        font-weight: var(--peso-negrita);
    }

    .empty-state > p:last-child:not(:nth-child(2)) {
        margin-top: var(--espacio-2);
    }
}

/* ---- assets/css/components/pagination/pagination.css ---- */
/*
 * Paginación (components/pagination.php): cuadros de 38 px con el número; la página actual en azul
 * primario, anterior y siguiente apagados en los extremos y "…" sin recuadro entre saltos.
 */
@layer components {
    .pagination {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding-top: var(--espacio-2);
    }

    .pagination__item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 38px;
        height: 38px;
        padding: 0 var(--espacio-2);
        border: 1px solid var(--color-borde-campo);
        border-radius: var(--radio-control);
        color: var(--color-tinta);
        background: var(--color-superficie);
        font-size: var(--texto-menu);
        font-weight: var(--peso-negrita);
        transition: border-color var(--transicion), color var(--transicion), background-color var(--transicion);
    }

    .pagination__item--control {
        font-size: var(--texto-mini);
    }

    a.pagination__item:hover {
        border-color: var(--color-primario);
        color: var(--color-primario);
        text-decoration: none;
    }

    .pagination__item[aria-current="page"] {
        border-color: var(--color-primario);
        color: var(--color-sobre-oscuro);
        background: var(--color-primario);
    }

    .pagination__item[aria-disabled="true"] {
        color: var(--color-inactivo);
        background: var(--color-fondo);
    }

    .pagination__gap {
        min-width: 20px;
        color: var(--color-texto-suave);
        font-weight: var(--peso-negrita);
        text-align: center;
    }

    @media (max-width: 520px) {
        .pagination {
            gap: var(--espacio-1);
        }

        .pagination__item {
            min-width: 34px;
            height: 34px;
        }
    }
}

/* ---- assets/css/components/detail-list/detail-list.css ---- */
/*
 * Lista de datos "etiqueta · valor" (contacto, cotización, constancia; --derecha: entrega y pago
 * del pedido, con el dato a la derecha):
 * <dl class="detail-list"><dt>…</dt><dd>…</dd>…</dl>
 */
@layer components {
    .detail-list {
        display: grid;
        grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
        margin: 0;
    }

    .detail-list > dt,
    .detail-list > dd {
        padding: 10px 0;
        border-bottom: 1px solid var(--color-borde-suave);
    }

    .detail-list > dt {
        padding-right: var(--espacio-5);
        color: var(--color-texto-suave);
        font-size: var(--texto-menu);
    }

    .detail-list > dd {
        margin: 0;
        color: var(--color-tinta);
        font-weight: var(--peso-medio);
        overflow-wrap: anywhere;
    }

    .detail-list > dt:last-of-type,
    .detail-list > dd:last-of-type {
        border-bottom: 0;
    }

    .detail-list > dt:first-of-type,
    .detail-list > dd:first-of-type {
        padding-top: 0;
    }

    /* Dato a la derecha (cajas angostas: entrega y pago del pedido); en celular sigue en dos columnas */
    .detail-list--derecha {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .detail-list--derecha > dd {
        font-weight: var(--peso-negrita);
        text-align: right;
    }

    @media (max-width: 520px) {
        .detail-list:not(.detail-list--derecha) {
            grid-template-columns: minmax(0, 1fr);
        }

        .detail-list:not(.detail-list--derecha) > dt {
            padding-bottom: 0;
            border-bottom: 0;
        }

        .detail-list:not(.detail-list--derecha) > dd {
            padding-top: 2px;
        }

        .detail-list:not(.detail-list--derecha) > dt:first-of-type + dd {
            padding-top: 2px;
        }
    }
}

/* ---- assets/css/components/pay-accounts/pay-accounts.css ---- */
/*
 * Cuentas para pagar (components/pay-accounts.php): una ficha por cuenta (banco o Yape/Plin) con
 * su ícono de color, cada dato en una fila (etiqueta a la izquierda, dato a la derecha) con su
 * botón Copiar (js/app.js) y el QR si lo tiene.
 */
@layer components {
    .pay-accounts {
        display: grid;
        gap: var(--espacio-4);
    }

    .pay-accounts > * {
        margin: 0;
    }

    .pay-accounts__title {
        font-size: var(--texto-titulo-caja);
    }

    .pay-accounts__lista {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
        gap: var(--espacio-4);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .pay-accounts__item {
        display: grid;
        align-content: start;
        gap: var(--espacio-3);
        padding: var(--espacio-4) var(--espacio-5);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-caja);
        background: var(--color-superficie);
    }

    .pay-accounts__banco {
        display: flex;
        align-items: center;
        gap: var(--espacio-3);
        margin: 0;
        color: var(--color-tinta);
        font-size: var(--texto-grande);
        font-weight: var(--peso-negrita);
    }

    /* Cuadro de color con el ícono: verde para bancos, morado para Yape/Plin */
    .pay-accounts__icono {
        display: grid;
        flex: none;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: var(--radio-control);
        color: var(--color-sobre-oscuro);
        background: var(--color-exito-icono);
    }

    .pay-accounts__item--yape_plin .pay-accounts__icono {
        background: var(--color-revision);
    }

    .pay-accounts__item dl {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        margin: 0;
    }

    .pay-accounts__item :is(dt, dd) {
        display: flex;
        align-items: center;
        min-height: 42px;
        padding: var(--espacio-2) 0;
        border-bottom: 1px solid var(--color-borde-suave);
    }

    .pay-accounts__item dt {
        padding-right: var(--espacio-4);
        color: var(--color-texto-suave);
        font-size: var(--texto-menu);
    }

    .pay-accounts__item dd {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--espacio-1);
        margin: 0;
        color: var(--color-tinta);
        font-size: var(--texto-menu);
        font-weight: var(--peso-negrita);
        text-align: right;
        overflow-wrap: anywhere;
    }

    /* Números de cuenta, CCI y celular enteros (el botón Copiar baja si no cabe) */
    .pay-accounts__item [data-copiar-texto] {
        white-space: nowrap;
    }

    .pay-accounts__item dd .button--copiar {
        margin-left: var(--espacio-1);
    }

    .pay-accounts__qr {
        justify-self: center;
        width: 180px;
        height: 180px;
        padding: var(--espacio-2);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-campo);
        object-fit: contain;
    }

    .pay-accounts__nota {
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
    }
}

/* ---- assets/css/components/account-header/account-header.css ---- */
/*
 * Encabezado de Mi cuenta y de las páginas de acceso (partials/account-header.php): sección en
 * azul pequeño ("Mi cuenta", "Área de clientes"), título grande y descripción, centrados. Dentro de
 * una rejilla (pages/cuenta, pages/acceso) ocupa todo el ancho; en celular va a la izquierda.
 */
@layer components {
    .account-header {
        display: grid;
        grid-column: 1 / -1;
        justify-items: center;
        gap: var(--espacio-2);
        margin-bottom: var(--espacio-4);
        text-align: center;
    }

    .account-header > * {
        margin: 0;
    }

    .account-header__seccion {
        color: var(--color-primario);
        font-size: var(--texto-mini);
        font-weight: var(--peso-negrita);
        letter-spacing: var(--espaciado-antetitulo);
        text-transform: uppercase;
    }

    .account-header__title {
        font-size: var(--texto-titulo-pagina);
        font-weight: var(--peso-extra);
    }

    .account-header__description {
        max-width: 600px;
        color: var(--color-texto-2);
    }

    @media (max-width: 820px) {
        .account-header {
            justify-items: start;
            margin-bottom: 0;
            text-align: left;
        }
    }
}

/* ---- assets/css/components/account-menu/account-menu.css ---- */
/*
 * Menú de la cuenta en la cabecera con sesión iniciada (partials/account-menu.php, maqueta
 * "Tienda · Menú de mi cuenta"): <details class="account-menu"> cuyo <summary> es una acción de la
 * barra (layout/header: .site-header__accion) con "Hola, Nombre" y flecha; el panel blanco cae
 * alineado a la derecha con iniciales, nombre y correo, las páginas de Mi cuenta y Cerrar sesión.
 * Sin sesión, "Mi cuenta" es un enlace normal de la barra.
 */
@layer components {
    .account-menu {
        position: relative;
    }

    .account-menu__boton {
        list-style: none;
        cursor: pointer;
    }

    .account-menu__boton::-webkit-details-marker {
        display: none;
    }

    .account-menu__boton > span {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .account-menu__flecha {
        font-size: 0.875rem;
        transition: transform var(--transicion);
    }

    .account-menu[open] .account-menu__flecha {
        transform: rotate(180deg);
    }

    .account-menu__panel {
        position: absolute;
        top: calc(100% + var(--espacio-2));
        right: 0;
        z-index: var(--capa-menu);
        display: grid;
        gap: var(--espacio-2);
        width: min(290px, calc(100vw - 2rem));
        padding: var(--espacio-3);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-caja);
        color: var(--color-texto);
        background: var(--color-superficie);
        box-shadow: var(--sombra-menu);
    }

    .account-menu__perfil {
        display: flex;
        align-items: center;
        gap: var(--espacio-3);
        margin: 0;
        padding: var(--espacio-2) var(--espacio-2) var(--espacio-3);
        border-bottom: 1px solid var(--color-borde);
    }

    .account-menu__avatar {
        display: grid;
        flex: none;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: var(--color-sobre-oscuro);
        background: var(--color-noche);
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-extra);
    }

    .account-menu__datos {
        display: grid;
        min-width: 0;
    }

    .account-menu__datos strong {
        color: var(--color-tinta);
        font-size: var(--texto-menu);
        overflow-wrap: anywhere;
    }

    .account-menu__datos span {
        overflow: hidden;
        color: var(--color-texto-suave);
        font-size: var(--texto-mini);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .account-menu ul {
        display: grid;
        gap: 2px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .account-menu :is(ul a, .account-menu__salir) {
        display: flex;
        align-items: center;
        gap: var(--espacio-3);
        width: 100%;
        min-height: 40px;
        padding: 0 var(--espacio-2);
        border: 0;
        border-radius: var(--radio-campo);
        color: var(--color-tinta);
        background: transparent;
        font-size: var(--texto-menu);
        font-weight: var(--peso-medio);
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .account-menu ul a .icon {
        color: var(--color-texto-2);
    }

    .account-menu ul a:hover {
        color: var(--color-primario);
        background: var(--color-tinte);
    }

    /* "1 en curso" junto a Mis pedidos */
    .account-menu__aviso {
        margin-left: auto;
        padding: 2px 8px;
        border-radius: var(--radio-pildora);
        color: var(--color-info-pildora);
        background: var(--color-info-fondo);
        font-size: var(--texto-micro);
        font-weight: var(--peso-negrita);
    }

    .account-menu form {
        margin: 0;
        padding-top: var(--espacio-2);
        border-top: 1px solid var(--color-borde);
    }

    .account-menu .account-menu__salir {
        color: var(--color-error);
    }

    .account-menu .account-menu__salir:hover {
        background: var(--color-error-fondo);
    }

    /* Desde 1100 px la barra muestra solo íconos (layout/header): sin la flecha */
    @media (max-width: 1100px) {
        .account-menu__flecha {
            display: none;
        }
    }
}

/* ---- assets/css/components/order-detail/order-detail.css ---- */
/*
 * Detalle del pedido para el cliente (pages/cuenta/pedido.php, con o sin cuenta):
 *   .order-detail__cabecera  título y fecha (sin cuenta; con cuenta va partials/account-header)
 *   .order-detail__avance    cinco pasos (li.is-hecho / is-actual / is-pendiente) con fecha o nota
 *   .order-detail__estado    estado, qué toca hacer y sus botones (.order-detail__acciones),
 *                            monto (.order-detail__monto) y guía del envío (.order-detail__guia)
 *   .order-detail__columnas  productos (components/purchase-summary) | entrega y pago (__lado)
 *   .order-detail__vouchers  constancias enviadas · __cancelar
 * Las cajas son components/panel; la subida de la constancia, components/modal.
 */
@layer components {
    .order-detail__cabecera {
        display: grid;
        gap: var(--espacio-1);
    }

    .order-detail__cabecera > * {
        margin: 0;
    }

    .order-detail__cabecera p {
        color: var(--color-texto-2);
    }

    .order-detail__title {
        font-size: var(--texto-titulo-seccion);
    }

    /* --- Avance: círculo (check o número), título y fecha o nota; una raya une los pasos --- */
    .order-detail__pasos {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--espacio-2);
        padding: 0;
        list-style: none;
    }

    .order-detail__pasos li {
        position: relative;
        display: grid;
        justify-items: center;
        align-content: start;
        gap: var(--espacio-1);
        color: var(--color-texto-suave);
        font-size: var(--texto-menu);
        text-align: center;
    }

    .order-detail__pasos strong {
        margin-top: var(--espacio-2);
        font-weight: var(--peso-negrita);
    }

    .order-detail__pasos small {
        font-size: var(--texto-mini);
    }

    .order-detail__marca {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border: 2px solid var(--color-borde-campo);
        border-radius: 50%;
        color: var(--color-texto-suave);
        background: var(--color-superficie);
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-negrita);
    }

    .order-detail__pasos li + li::before {
        content: "";
        position: absolute;
        top: 15px;
        right: 50%;
        width: calc(100% + var(--espacio-2));
        height: 2px;
        background: var(--color-borde-campo);
    }

    .order-detail__pasos :is(.is-hecho, .is-actual) {
        color: var(--color-tinta);
    }

    .order-detail__pasos :is(.is-hecho, .is-actual)::before {
        background: var(--color-primario);
    }

    .order-detail__pasos .is-hecho .order-detail__marca {
        border-color: var(--color-primario);
        color: var(--color-sobre-oscuro);
        background: var(--color-primario);
    }

    .order-detail__pasos .is-actual .order-detail__marca {
        border-color: var(--color-primario);
        color: var(--color-primario);
    }

    .order-detail__pasos :is(.is-hecho, .is-actual) small {
        color: var(--color-texto-2);
    }

    /* --- Estado y lo que toca hacer --- */
    .order-detail__estado p:not([class]),
    .order-detail__monto {
        color: var(--color-texto-2);
    }

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

    .order-detail__acciones {
        display: flex;
        flex-wrap: wrap;
        gap: var(--espacio-3);
    }

    /* N.º de guía en un recuadro punteado, con su botón Copiar (js/app.js) a la derecha */
    .order-detail__guia {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: var(--espacio-3);
        padding: var(--espacio-3) var(--espacio-4);
        border: 1px dashed var(--color-borde-campo);
        border-radius: var(--radio-campo);
        background: var(--color-tinte);
    }

    .order-detail__guia span {
        grid-column: 1 / -1;
        color: var(--color-texto-2);
        font-size: var(--texto-micro);
        font-weight: var(--peso-negrita);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .order-detail__guia strong {
        color: var(--color-tinta);
        font-size: var(--texto-titulo-caja);
        letter-spacing: 0.03em;
        overflow-wrap: anywhere;
    }

    .order-detail__guia .button--copiar {
        margin: 0;
    }

    /* --- Productos | entrega y pago --- */
    .order-detail__columnas {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
        align-items: start;
        gap: var(--espacio-5);
    }

    .order-detail__lado {
        display: grid;
        gap: var(--espacio-5);
        min-width: 0;
    }

    .order-detail__lado > .panel + .panel {
        margin-top: 0;
    }

    /* Cada producto: modelo, descripción y "cantidad × precio" en filas */
    .order-detail__productos .purchase-summary__productos li {
        padding-bottom: var(--espacio-3);
        border-bottom: 1px solid var(--color-borde-suave);
    }

    .order-detail__productos .purchase-summary__productos li:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .order-detail__productos .purchase-summary__cuentas {
        padding-top: var(--espacio-4);
        border-top: 1px solid var(--color-borde);
    }

    /* --- Constancias enviadas (en la caja Pago) --- */
    .order-detail__vouchers {
        display: grid;
        gap: var(--espacio-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .order-detail__vouchers li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--espacio-1) var(--espacio-3);
        padding: var(--espacio-3);
        border-radius: var(--radio-campo);
        color: var(--color-texto-2);
        background: var(--color-fondo);
        font-size: var(--texto-pequeno);
    }

    .order-detail__vouchers a {
        display: inline-flex;
        align-items: center;
        gap: var(--espacio-2);
        font-weight: var(--peso-negrita);
    }

    .order-detail__vouchers small {
        flex-basis: 100%;
    }

    .order-detail__voucher {
        font-weight: var(--peso-negrita);
    }

    .order-detail__voucher--por_validar {
        color: var(--color-revision);
    }

    .order-detail__voucher--validado {
        color: var(--color-exito);
    }

    .order-detail__voucher--rechazado {
        color: var(--color-error);
    }

    /* --- Cancelar (desplegable discreto al final) --- */
    .order-detail__cancelar {
        padding: var(--espacio-4) var(--espacio-5);
        border: 1px solid var(--color-error-linea);
        border-radius: var(--radio-caja);
        background: var(--color-superficie);
    }

    .order-detail__cancelar > summary {
        color: var(--color-error);
        font-weight: var(--peso-negrita);
        cursor: pointer;
    }

    .order-detail__cancelar[open] > summary {
        margin-bottom: var(--espacio-4);
    }

    /* Vista previa de la constancia elegida (la arma js/pages/cuenta.js) */
    .voucher-vista {
        display: grid;
        justify-items: start;
        gap: var(--espacio-2);
        color: var(--color-texto-2);
        font-size: var(--texto-pequeno);
    }

    .voucher-vista:empty {
        display: none;
    }

    .voucher-vista > * {
        margin: 0;
    }

    .voucher-vista img {
        max-width: 200px;
        max-height: 200px;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-campo);
        object-fit: contain;
    }

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

    @media (max-width: 520px) {
        .order-detail__acciones > .button {
            flex: 1 1 100%;
        }

        /* Pasos en vertical: círculo a la izquierda, título y fecha a su lado */
        .order-detail__pasos {
            grid-template-columns: minmax(0, 1fr);
            gap: var(--espacio-4);
        }

        .order-detail__pasos li {
            grid-template-columns: 32px minmax(0, 1fr);
            justify-items: start;
            column-gap: var(--espacio-3);
            row-gap: 0;
            text-align: left;
        }

        .order-detail__marca {
            grid-row: span 2;
        }

        .order-detail__pasos strong {
            margin-top: 0;
        }

        .order-detail__pasos li + li::before {
            top: auto;
            right: auto;
            bottom: 100%;
            left: 15px;
            width: 2px;
            height: var(--espacio-4);
        }
    }
}

/* ---- assets/css/components/purchase-summary/purchase-summary.css ---- */
/*
 * Resumen de compra (carrito, hacer pedido, pedido recibido y mi pedido): caja blanca con título e
 * ícono, productos con foto (opcional), cuentas (productos, envío), total grande en azul con su
 * nota, botones y, opcional, garantías con ícono.
 * <aside class="purchase-summary">
 *   <h2 class="purchase-summary__titulo"><span class="icon-box">{ícono}</span>Título</h2>
 *   <ul class="purchase-summary__productos"><li><span class="purchase-summary__imagen">…</span>
 *     <span class="purchase-summary__producto"><strong>…</strong><small>…</small></span>
 *     <span class="purchase-summary__importe">…</span></li></ul>
 *   <dl class="purchase-summary__cuentas"><dt>…</dt><dd>…</dd> (dd.purchase-summary__pendiente: texto gris)</dl>
 *   <p class="purchase-summary__total"><span>Total</span><strong>S/ …</strong><small>Nota</small></p>
 *   <ul class="purchase-summary__garantias"><li><span class="icon-box">…</span><strong>…</strong>Texto</li></ul>
 * </aside>
 * La página decide dónde va (columna, sticky) y agrega lo suyo (lista de productos, casilla…).
 * El cuadro celeste con ícono es .icon-box (components/icon).
 */
@layer components {
    .purchase-summary {
        display: grid;
        gap: var(--espacio-4);
        min-width: 0;
        padding: var(--espacio-6);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-caja);
        background: var(--color-superficie);
        box-shadow: var(--sombra-tarjeta);
    }

    .purchase-summary > * {
        margin: 0;
    }

    .purchase-summary .button--primary {
        min-height: 48px;
    }

    .purchase-summary__titulo {
        display: flex;
        align-items: center;
        gap: var(--espacio-3);
        color: var(--color-tinta);
        font-size: var(--texto-titulo-caja);
        font-weight: var(--peso-extra);
    }

    /* Productos con foto (pedido recibido, mi pedido): foto, modelo y detalle, e importe */
    .purchase-summary__productos {
        display: grid;
        gap: var(--espacio-3);
        padding: 0;
        list-style: none;
    }

    .purchase-summary__productos li {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--espacio-3);
    }

    .purchase-summary__imagen {
        display: grid;
        place-items: center;
        width: 56px;
        height: 56px;
        overflow: hidden;
        border: 1px solid var(--color-borde-suave);
        border-radius: var(--radio-control);
    }

    .purchase-summary__imagen img {
        width: 100%;
        height: 100%;
        padding: 4px;
        object-fit: contain;
    }

    .purchase-summary__producto {
        display: grid;
        min-width: 0;
        color: var(--color-tinta);
        font-size: var(--texto-pequeno);
        overflow-wrap: anywhere;
    }

    .purchase-summary__producto small {
        color: var(--color-texto-suave);
    }

    .purchase-summary__importe {
        color: var(--color-tinta);
        font-weight: var(--peso-negrita);
        white-space: nowrap;
    }

    .purchase-summary__cuentas {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: baseline;
        gap: var(--espacio-3) var(--espacio-4);
        padding-bottom: var(--espacio-4);
        border-bottom: 1px solid var(--color-borde);
    }

    .purchase-summary__cuentas dt {
        color: var(--color-texto-2);
    }

    .purchase-summary__cuentas dt .icon {
        margin-left: 2px;
        color: var(--color-texto-suave);
        font-size: var(--texto-mini);
    }

    .purchase-summary__cuentas dd {
        margin: 0;
        color: var(--color-tinta);
        font-weight: var(--peso-extra);
        text-align: right;
    }

    /* Un valor que todavía no es un monto ("Se calcula al elegir la entrega") */
    .purchase-summary__cuentas .purchase-summary__pendiente {
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-normal);
    }

    /* Total: etiqueta a la izquierda y monto grande en azul a la derecha (si no caben juntos, el
       monto baja entero a la línea siguiente, nunca se parte); la nota va debajo */
    .purchase-summary__total {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 2px var(--espacio-4);
    }

    .purchase-summary__total span {
        color: var(--color-tinta);
        font-size: var(--texto-titulo-caja);
        font-weight: var(--peso-extra);
    }

    .purchase-summary__total strong {
        margin-left: auto;
        color: var(--color-primario);
        font-size: var(--texto-precio-ficha);
        font-weight: var(--peso-extra);
        line-height: 1.2;
        white-space: nowrap;
    }

    .purchase-summary__total small {
        flex-basis: 100%;
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
    }

    /* La nota puede llegar vacía (hacer pedido la cambia por JS según la entrega) */
    .purchase-summary__total small:empty {
        display: none;
    }

    .purchase-summary__garantias {
        display: grid;
        gap: var(--espacio-4);
        padding: var(--espacio-4) 0 0;
        border-top: 1px solid var(--color-borde);
        list-style: none;
    }

    /* Ícono en la primera columna (ocupa las dos filas), título y texto a su derecha */
    .purchase-summary__garantias li {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: var(--espacio-3);
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
    }

    .purchase-summary__garantias .icon-box {
        grid-row: span 2;
    }

    .purchase-summary__garantias strong {
        color: var(--color-tinta);
        font-weight: var(--peso-negrita);
    }

    @media (max-width: 520px) {
        .purchase-summary {
            padding: var(--espacio-5) var(--espacio-4);
        }
    }
}

/* ---- assets/css/components/confirm-dialog/confirm-dialog.css ---- */
/*
 * Confirmación antes de enviar (js/components/confirmacion.js arma un <dialog class="confirm-dialog">
 * con el mensaje y los botones Cancelar · Sí, continuar). En celular sube como hoja desde abajo.
 */
@layer components {
    .confirm-dialog {
        width: min(440px, calc(100vw - 2rem));
        padding: 0;
        border: 0;
        border-radius: var(--radio-modal);
        color: var(--color-texto);
        background: var(--color-superficie);
        box-shadow: var(--sombra-modal);
    }

    .confirm-dialog[open] {
        animation: dialogo-entrada 0.18s ease;
    }

    .confirm-dialog::backdrop {
        background: var(--fondo-modal);
    }

    .confirm-dialog__form {
        display: grid;
        gap: var(--espacio-6);
        margin: 0;
        padding: var(--espacio-6);
    }

    .confirm-dialog__mensaje {
        margin: 0;
        color: var(--color-tinta);
        font-size: var(--texto-grande);
        font-weight: var(--peso-medio);
        line-height: 1.5;
    }

    .confirm-dialog__acciones {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--espacio-2);
    }

    @keyframes dialogo-entrada {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
    }

    @media (max-width: 520px) {
        .confirm-dialog {
            width: 100%;
            max-width: 100%;
            margin: auto 0 0;
            border-radius: var(--radio-hoja) var(--radio-hoja) 0 0;
        }

        .confirm-dialog__acciones > .button {
            flex: 1 1 auto;
        }
    }
}

/* ---- assets/css/components/modal/modal.css ---- */
/*
 * Ventana modal con cabecera, cuerpo y pie (subir constancia del pedido). Se abre con un botón
 * data-abrir-modal="{id}" y se cierra con data-cerrar-modal, Esc o clic fuera (js/components/modal.js).
 * <dialog class="modal" id="…" aria-labelledby="…-titulo">
 *   <form class="modal__form" …>
 *     <header class="modal__cabecera"><h2 id="…-titulo">Título</h2><button class="modal__cerrar" data-cerrar-modal>×</button></header>
 *     <div class="modal__cuerpo">…</div>
 *     <footer class="modal__pie">Cancelar · Acción</footer>
 *   </form>
 * </dialog>
 * En celular sube como hoja desde abajo (como components/confirm-dialog).
 */
@layer components {
    .modal {
        width: min(600px, calc(100vw - 2rem));
        max-height: calc(100dvh - 2rem);
        padding: 0;
        border: 0;
        border-radius: var(--radio-modal);
        color: var(--color-texto);
        background: var(--color-superficie);
        box-shadow: var(--sombra-modal);
    }

    /* Misma entrada que components/confirm-dialog (ahí está el @keyframes) */
    .modal[open] {
        animation: dialogo-entrada 0.18s ease;
    }

    .modal::backdrop {
        background: var(--fondo-modal);
    }

    .modal__form {
        display: grid;
        margin: 0;
    }

    .modal__cabecera {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--espacio-4);
        padding: var(--espacio-5) var(--espacio-6);
        border-bottom: 1px solid var(--color-borde);
    }

    .modal__cabecera h2 {
        margin: 0;
        color: var(--color-tinta);
        font-size: var(--texto-titulo-caja);
    }

    .modal__cerrar {
        display: grid;
        flex: none;
        place-items: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        border-radius: var(--radio-control);
        color: var(--color-tinta);
        background: var(--color-fondo);
        cursor: pointer;
    }

    .modal__cerrar:hover {
        background: var(--color-tinte);
    }

    .modal__cuerpo {
        display: grid;
        gap: var(--espacio-4);
        padding: var(--espacio-6);
    }

    .modal__cuerpo > * {
        margin: 0;
    }

    .modal__pie {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--espacio-2);
        padding: var(--espacio-4) var(--espacio-6);
        border-top: 1px solid var(--color-borde);
        background: var(--color-fondo);
    }

    @media (max-width: 520px) {
        .modal {
            width: 100%;
            max-width: 100%;
            margin: auto 0 0;
            border-radius: var(--radio-hoja) var(--radio-hoja) 0 0;
        }

        .modal__cabecera,
        .modal__cuerpo,
        .modal__pie {
            padding-inline: var(--espacio-4);
        }

        .modal__pie > .button {
            flex: 1 1 auto;
        }
    }
}

/* ---- assets/css/components/chatbot/chatbot.css ---- */
/*
 * ElectroBot (components/chatbot.php, maquetas Tienda · ElectroBot abierto y Celular · ElectroBot
 * abierto): botón flotante abajo a la derecha y ventana de 380 × 560 px con cabecera noche, cuerpo
 * gris con burbujas (ElectroBot en blanco a la izquierda, cliente en azul a la derecha), propuesta,
 * datos para recibir la cotización y campo de escribir.
 *
 * Solo .chatbot__cuerpo se desplaza: la cabecera (con ×) y el campo de escribir quedan siempre a la
 * vista aunque la propuesta y el formulario de datos sean largos.
 * js/components/chatbot.js agrega los mensajes (.chatbot__mensaje--{cliente|electrobot}) y pone
 * .is-abierto al abrir. En celular (≤ 520 px) la ventana flota con un margen alrededor y deja ver
 * la tienda arriba, como en la computadora.
 */
@layer components {
    .chatbot {
        position: fixed;
        right: var(--espacio-6);
        bottom: var(--espacio-6);
        z-index: var(--capa-chat);
    }

    /* --- Botón flotante --- */
    .chatbot__abrir {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 56px;
        padding: 0 var(--espacio-5) 0 var(--espacio-4);
        border: 0;
        border-radius: var(--radio-pildora);
        color: var(--color-sobre-oscuro);
        background: var(--color-electrobot);
        box-shadow: var(--sombra-menu);
        font-size: var(--texto-menu);
        font-weight: var(--peso-negrita);
        cursor: pointer;
        transition: transform var(--transicion), background-color var(--transicion);
    }

    /* El isotipo de la empresa en un círculo blanco: sobre el azul del botón el escudo se perdía */
    .chatbot__sello {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: var(--radio-pildora);
        background: var(--color-superficie);
    }

    .chatbot__sello img,
    .chatbot__avatar img {
        width: 22px;
        height: auto;
    }

    .chatbot__abrir:hover {
        background: var(--color-primario);
        transform: translateY(-2px);
    }

    .chatbot__abrir:focus-visible {
        box-shadow: var(--foco), var(--sombra-menu);
        outline: none;
    }

    .chatbot.is-abierto .chatbot__abrir {
        display: none;
    }

    /* --- Ventana --- */
    .chatbot__panel {
        display: flex;
        flex-direction: column;
        width: 380px;
        height: min(560px, calc(100dvh - 2 * var(--espacio-6)));
        overflow: hidden;
        border-radius: var(--radio-hoja);
        background: var(--color-superficie);
        box-shadow: var(--sombra-modal);
    }

    .chatbot__panel[hidden] {
        display: none;
    }

    .chatbot__cabecera {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: var(--espacio-1);
        padding: 14px var(--espacio-3) 14px var(--espacio-4);
        color: var(--color-sobre-oscuro);
        background: var(--color-noche);
    }

    .chatbot__avatar {
        display: grid;
        flex: 0 0 auto;
        place-items: center;
        width: 38px;
        height: 38px;
        margin-right: var(--espacio-2);
        border-radius: var(--radio-pildora);
        background: var(--color-superficie);
    }

    .chatbot__cabecera p {
        flex: 1;
        min-width: 0;
        margin: 0;
        font-size: var(--texto-cuerpo);
        line-height: 1.3;
    }

    .chatbot__cabecera small {
        display: block;
        color: var(--color-sobre-oscuro-suave);
        font-size: var(--texto-mini);
    }

    .chatbot__cabecera button {
        display: grid;
        flex: 0 0 auto;
        place-items: center;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: var(--radio-control);
        color: inherit;
        background: transparent;
        font-size: 1.05rem;
        cursor: pointer;
    }

    .chatbot__cabecera button:hover,
    .chatbot__cabecera button:focus-visible {
        background: var(--color-hover-sobre-oscuro);
    }

    /* --- Cuerpo desplazable --- */
    .chatbot__cuerpo {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        background: var(--color-fondo);
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .chatbot__aviso {
        margin: 0;
        padding: var(--espacio-2) var(--espacio-4);
        border-bottom: 1px solid var(--color-borde);
        color: var(--color-texto-suave);
        background: var(--color-superficie);
        font-size: var(--texto-mini);
        line-height: 1.4;
    }

    .chatbot__mensajes {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0;
        padding: var(--espacio-4);
        list-style: none;
    }

    .chatbot__mensaje {
        align-self: flex-start;
        max-width: 85%;
        min-width: 0;
    }

    .chatbot__mensaje p {
        margin: 0;
        padding: 10px var(--espacio-3);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-modal);
        color: var(--color-texto);
        background: var(--color-superficie);
        font-size: var(--texto-pequeno);
        line-height: 1.5;
        white-space: pre-line;
        overflow-wrap: anywhere;
    }

    .chatbot__mensaje--cliente {
        align-self: flex-end;
    }

    .chatbot__mensaje--cliente p {
        border-color: var(--color-primario);
        color: var(--color-sobre-oscuro);
        background: var(--color-primario);
    }

    .chatbot__mensaje.is-escribiendo p {
        color: var(--color-texto-suave);
        font-style: italic;
    }

    .chatbot__mensaje.is-error p {
        border-color: var(--color-error-linea);
        color: var(--color-error);
        background: var(--color-error-fondo);
    }

    .chatbot__mensaje > :is(.chatbot__nota, a) {
        display: block;
        margin-top: var(--espacio-1);
        font-size: var(--texto-micro);
        overflow-wrap: anywhere;
    }

    .chatbot__nota {
        color: var(--color-texto-suave);
    }

    /* Bajo la cotización entregada: el cliente escribe primero (R19). Va después de la regla de los enlaces */
    .chatbot__mensaje > .chatbot__whatsapp {
        display: inline-flex;
        margin-top: var(--espacio-2);
        font-size: var(--texto-pequeno);
    }

    .chatbot__mensaje--cliente > .chatbot__nota {
        text-align: right;
    }

    /* --- Propuesta y datos (tarjetas blancas dentro del cuerpo) --- */
    .chatbot__tarjeta,
    .chatbot__datos {
        display: grid;
        gap: var(--espacio-3);
        margin: 0 var(--espacio-4) var(--espacio-4);
        padding: var(--espacio-3);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-modal);
        background: var(--color-superficie);
    }

    .chatbot__tarjeta[hidden],
    .chatbot__datos[hidden] {
        display: none;
    }

    .chatbot__tarjeta table {
        width: 100%;
        font-size: var(--texto-pequeno);
    }

    .chatbot__tarjeta td {
        padding: 6px 0;
        border-bottom: 1px solid var(--color-borde-suave);
        vertical-align: top;
    }

    /* El modelo en su propia línea: los códigos largos (DS-2CE76D0T-ITPF) no se parten a la mitad */
    .chatbot__tarjeta td small {
        display: block;
        color: var(--color-texto-suave);
        font-size: var(--texto-micro);
        overflow-wrap: anywhere;
    }

    .chatbot__tarjeta td:last-child {
        padding-left: var(--espacio-3);
        color: var(--color-tinta);
        font-weight: var(--peso-negrita);
        text-align: right;
        white-space: nowrap;
    }

    .chatbot__tarjeta .is-sin-stock td:first-child {
        color: var(--color-atencion);
    }

    .chatbot__tarjeta tfoot :is(th, td) {
        padding-top: var(--espacio-2);
        border-bottom: 0;
        color: var(--color-tinta);
        font-size: var(--texto-menu);
        font-weight: var(--peso-extra);
        text-align: left;
    }

    .chatbot__tarjeta tfoot td {
        color: var(--color-precio);
        text-align: right;
    }

    .chatbot__datos > p {
        margin: 0;
        color: var(--color-texto-2);
        font-size: var(--texto-pequeno);
    }

    .chatbot__datos label {
        display: grid;
        gap: var(--espacio-1);
        color: var(--color-tinta);
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-negrita);
    }

    .chatbot__datos input {
        min-height: 40px;
        font-weight: var(--peso-normal);
    }

    .chatbot__datos > .chatbot__legal {
        font-size: var(--texto-micro);
    }

    .chatbot__datos > .chatbot__error {
        color: var(--color-error);
        font-weight: var(--peso-medio);
    }

    .chatbot__datos > .chatbot__error:empty {
        display: none;
    }

    /* --- Escribir (campo y botón en píldora, como la maqueta) --- */
    .chatbot__form {
        display: flex;
        flex: 0 0 auto;
        align-items: flex-end;
        gap: var(--espacio-2);
        padding: var(--espacio-3);
        border-top: 1px solid var(--color-borde);
        background: var(--color-superficie);
    }

    .chatbot__form textarea {
        flex: 1;
        min-width: 0;
        min-height: 42px;
        max-height: 120px;
        padding: 10px 14px;
        border-radius: var(--radio-hoja);
        font-size: var(--texto-menu);
        line-height: 1.4;
        resize: none;
    }

    .chatbot__form button {
        display: grid;
        flex: 0 0 auto;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: var(--radio-pildora);
        color: var(--color-sobre-oscuro);
        background: var(--color-primario);
        cursor: pointer;
    }

    .chatbot__form button:hover {
        background: var(--color-primario-hover);
    }

    .chatbot__form[aria-busy="true"] button {
        opacity: 0.6;
    }

    /* Tablet y celular: el botón flotante no tapa los enlaces legales del pie (queda debajo de ellos) */
    @media (max-width: 820px) {
        body:has(.chatbot) .site-footer__legal {
            padding-bottom: calc(56px + 2 * var(--espacio-4));
        }
    }

    /* --- Celular: botón redondo y ventana flotante con margen (la tienda se ve alrededor) --- */
    @media (max-width: 520px) {
        .chatbot {
            right: var(--espacio-4);
            bottom: var(--espacio-4);
        }

        .chatbot__abrir {
            justify-content: center;
            width: 58px;
            height: 58px;
            padding: 0;
        }

        .chatbot__nombre {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

        /* La página de atrás no se desplaza mientras se usa el chat */
        html:has(.chatbot.is-abierto) {
            overflow: hidden;
        }

        /* Hasta 640 px de alto: en un celular común deja ver la tienda arriba. Con el teclado
           abierto (100dvh se achica) ocupa lo que quede menos el margen. */
        .chatbot__panel {
            width: calc(100vw - 2 * var(--espacio-4));
            height: min(640px, calc(100dvh - 2 * var(--espacio-4)));
        }

        .chatbot__avatar {
            width: 40px;
            height: 40px;
        }

        .chatbot__cabecera p {
            font-size: var(--texto-grande);
        }

        .chatbot__cabecera button {
            width: 40px;
            height: 40px;
        }

        .chatbot__mensaje p {
            font-size: var(--texto-menu);
        }

        .chatbot__form textarea {
            min-height: 46px;
            padding-block: 12px;
            border-radius: var(--radio-hoja);
            /* 16 px: en iPhone un campo con menos letra hace zoom al tocarlo */
            font-size: var(--texto-grande);
        }

        .chatbot__form button {
            width: 46px;
            height: 46px;
        }
    }
}

/* ---- assets/css/components/robot-averiado/robot-averiado.css ---- */
/*
 * Robot con un cable suelto de la pantalla de error 500 (components/robot-averiado.php): flota,
 * parpadea, la luz de la antena titila en ámbar y del cable saltan chispas. Con "reducir
 * movimiento" queda quieto y sin chispas. Los transform-origin en px son coordenadas del viewBox.
 */
@layer components {
    .robot-averiado {
        width: 168px;
        max-width: 60%;
        height: auto;
        overflow: visible;
    }

    .robot-averiado__sombra {
        fill: var(--color-tinta);
        opacity: 0.12;
        transform-origin: 100px 214px;
        animation: robot-averiado-sombra 3.2s ease-in-out infinite;
    }

    .robot-averiado__figura {
        transform-origin: 100px 120px;
        animation: robot-averiado-flota 3.2s ease-in-out infinite;
    }

    .robot-averiado__pieza {
        fill: var(--color-superficie);
        stroke: var(--color-tinta);
        stroke-width: 3;
    }

    .robot-averiado__cara {
        fill: var(--color-noche);
    }

    .robot-averiado__acento {
        fill: var(--color-primario);
    }

    .robot-averiado__ojos {
        fill: var(--color-acento);
        transform-box: fill-box;
        transform-origin: center;
        animation: robot-averiado-parpadea 4.2s infinite;
    }

    .robot-averiado__trazo,
    .robot-averiado__cable,
    .robot-averiado__boca,
    .robot-averiado__pulso {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .robot-averiado__trazo {
        stroke: var(--color-tinta);
        stroke-width: 3;
    }

    .robot-averiado__boca,
    .robot-averiado__pulso {
        stroke: var(--color-sobre-oscuro);
    }

    .robot-averiado__boca {
        stroke-width: 3.5;
        opacity: 0.85;
    }

    .robot-averiado__pulso {
        stroke-width: 2.6;
    }

    .robot-averiado__cable {
        stroke: var(--color-texto-suave);
        stroke-width: 3;
        transform-origin: 142px 156px;
        animation: robot-averiado-cuelga 2.4s ease-in-out infinite;
    }

    .robot-averiado__luz,
    .robot-averiado__chispa {
        fill: var(--color-atencion-icono);
    }

    .robot-averiado__luz {
        animation: robot-averiado-luz 1.2s ease-in-out infinite;
    }

    .robot-averiado__chispa {
        opacity: 0;
        transform-box: fill-box;
        transform-origin: center;
        animation: robot-averiado-chispa 1.6s ease-in-out infinite;
    }

    .robot-averiado__chispa--tarde {
        animation-delay: 0.8s;
    }

    @keyframes robot-averiado-flota {
        0%, 100% { transform: translateY(0) rotate(-1.5deg); }
        50% { transform: translateY(-8px) rotate(1.5deg); }
    }

    @keyframes robot-averiado-sombra {
        0%, 100% { transform: scaleX(1); opacity: 0.12; }
        50% { transform: scaleX(0.82); opacity: 0.07; }
    }

    @keyframes robot-averiado-parpadea {
        0%, 92%, 100% { transform: scaleY(1); }
        95% { transform: scaleY(0.1); }
    }

    @keyframes robot-averiado-luz {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.25; }
    }

    @keyframes robot-averiado-cuelga {
        0%, 100% { transform: rotate(-6deg); }
        50% { transform: rotate(7deg); }
    }

    @keyframes robot-averiado-chispa {
        0%, 55%, 100% { opacity: 0; transform: scale(0.4); }
        70% { opacity: 1; transform: scale(1); }
        85% { opacity: 0.3; transform: scale(0.7); }
    }

    /* El reset deja las animaciones en 0.01 ms, pero las infinitas seguirían ciclando: aquí se apagan. */
    @media (prefers-reduced-motion: reduce) {
        .robot-averiado * {
            animation: none;
        }
    }
}

/* ---- assets/css/components/estante-almacen/estante-almacen.css ---- */
/*
 * Estante con cajas de la pantalla de mantenimiento (components/estante-almacen.php). Sin animación.
 */
@layer components {
    .estante-almacen {
        display: block;
        width: 100%;
        max-width: 260px;
        height: auto;
    }

    .estante-almacen__piso {
        fill: var(--color-tinte);
    }

    .estante-almacen__linea-piso {
        stroke: var(--color-acero);
        stroke-width: 2;
    }

    .estante-almacen__poste {
        fill: var(--color-acero-oscuro);
    }

    .estante-almacen__repisa {
        fill: var(--color-primario);
    }

    .estante-almacen__caja {
        fill: var(--color-carton);
    }

    .estante-almacen__cinta {
        fill: none;
        stroke: var(--color-carton-oscuro);
        stroke-width: 3;
    }

    .estante-almacen__etiqueta {
        fill: var(--color-superficie);
        opacity: 0.9;
    }
}


/* ---- assets/css/integrations/fontawesome.css ---- */
/*
 * Font Awesome en la tienda (helper fa()). Su hoja se carga con <link>, fuera de las capas, y fija
 * display, width (1.25em) y line-height de cada ícono: para cambiarlos se usan sus variables
 * (--fa-display, --fa-width), como en los íconos con caja de las cuentas de pago y la cuenta.
 * Aquí solo el verde de WhatsApp fuera de los botones.
 */
@layer integrations {
    .fa-whatsapp {
        color: var(--color-whatsapp);
    }

    /* Dentro de un botón verde, el ícono toma el color del texto */
    .button .fa-whatsapp {
        color: inherit;
    }
}

/* ---- assets/vendor/swiper/swiper-bundle.min.css ---- */
@layer integrations {
/**
 * Swiper 14.2.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: August 26, 2026
 */

:root{--swiper-theme-color:#007aff}:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:initial;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,#00000080,#0000)}}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid #0000;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode{.swiper-wrapper:after{content:"";left:0;pointer-events:none;position:absolute;top:0}}.swiper-virtual.swiper-css-mode.swiper-horizontal{.swiper-wrapper:after{height:1px;width:var(--swiper-virtual-size)}}.swiper-virtual.swiper-css-mode.swiper-vertical{.swiper-wrapper:after{height:var(--swiper-virtual-size);width:1px}}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;position:absolute;width:var(--swiper-navigation-size);z-index:10;&.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}&.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled &{display:none!important}::slotted(svg),svg{height:100%;object-fit:contain;transform-origin:center;width:100%;fill:currentColor;pointer-events:none}}.swiper-button-lock{display:none}.swiper-button-next,.swiper-button-prev{margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}}.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}.swiper-horizontal{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{margin-left:0;margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev,&~.swiper-button-next,.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(0deg)}}}.swiper-vertical{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{left:var(--swiper-navigation-top-offset,50%);margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0;right:auto}.swiper-button-prev,~.swiper-button-prev{bottom:auto;top:var(--swiper-navigation-sides-offset,4px);.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset,4px);top:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(90deg)}}}.swiper-pagination{position:absolute;text-align:center;transform:translateZ(0);transition:opacity .3s;z-index:10;&.swiper-pagination-hidden{opacity:0}&.swiper-pagination-disabled,.swiper-pagination-disabled>&{display:none!important}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);left:0;top:var(--swiper-pagination-top,auto);width:100%}.swiper-pagination-bullets-dynamic{font-size:0;overflow:hidden;.swiper-pagination-bullet{position:relative;transform:scale(.33)}.swiper-pagination-bullet-active,.swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullet-active-next-next{transform:scale(.33)}}.swiper-pagination-bullet{background:var(--swiper-pagination-bullet-inactive-color,#000);border-radius:var(--swiper-pagination-bullet-border-radius,50%);display:inline-block;height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));opacity:var(--swiper-pagination-bullet-inactive-opacity,.2);width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));button&{appearance:none;border:none;box-shadow:none;margin:0;padding:0}.swiper-pagination-clickable &{cursor:pointer}&:only-child{display:none!important}}.swiper-pagination-bullet-active{background:var(--swiper-pagination-color,var(--swiper-theme-color));opacity:var(--swiper-pagination-bullet-opacity,1)}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{left:var(--swiper-pagination-left,auto);right:var(--swiper-pagination-right,8px);top:50%;transform:translate3d(0,-50%,0);.swiper-pagination-bullet{display:block;margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0}&.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px;.swiper-pagination-bullet{display:inline-block;transition:transform .2s,top .2s}}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets{.swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}&.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap;.swiper-pagination-bullet{transition:transform .2s,left .2s}}}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:transform .2s,right .2s}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,#00000040);position:absolute;.swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));height:100%;left:0;position:absolute;top:0;transform:scale(0);transform-origin:left top;width:100%}.swiper-rtl & .swiper-pagination-progressbar-fill{transform-origin:right top}&.swiper-pagination-horizontal,&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-horizontal>&,.swiper-vertical>&.swiper-pagination-progressbar-opposite{height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0;width:100%}&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,&.swiper-pagination-vertical,.swiper-horizontal>&.swiper-pagination-progressbar-opposite,.swiper-vertical>&{height:100%;left:0;top:0;width:var(--swiper-pagination-progressbar-size,4px)}}.swiper-pagination-lock{display:none}.swiper-scrollbar{background:var(--swiper-scrollbar-bg-color,#0000001a);border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;&.swiper-scrollbar-disabled,.swiper-scrollbar-disabled>&{display:none!important}&.swiper-scrollbar-horizontal,.swiper-horizontal>&{bottom:var(--swiper-scrollbar-bottom,4px);height:var(--swiper-scrollbar-size,4px);left:var(--swiper-scrollbar-sides-offset,1%);position:absolute;top:var(--swiper-scrollbar-top,auto);width:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);z-index:50}&.swiper-scrollbar-vertical,.swiper-vertical>&{height:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);left:var(--swiper-scrollbar-left,auto);position:absolute;right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);width:var(--swiper-scrollbar-size,4px);z-index:50}}.swiper-scrollbar-drag{background:var(--swiper-scrollbar-drag-bg-color,#00000080);border-radius:var(--swiper-scrollbar-border-radius,10px);height:100%;left:0;position:relative;top:0;width:100%}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%;>canvas,>img,>svg{max-height:100%;max-width:100%;object-fit:contain}}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{left:0;opacity:0;pointer-events:none;position:absolute;top:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{margin:0 auto;transition-timing-function:ease-out}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-direction:column;flex-wrap:wrap}.swiper-fade{&.swiper-free-mode{.swiper-slide{transition-timing-function:ease-out}}.swiper-slide{pointer-events:none;transition-property:opacity;.swiper-slide{pointer-events:none}}.swiper-slide-active{pointer-events:auto;& .swiper-slide-active{pointer-events:auto}}}.swiper.swiper-cube{overflow:visible}.swiper-cube{.swiper-slide{backface-visibility:hidden;height:100%;pointer-events:none;transform-origin:0 0;visibility:hidden;width:100%;z-index:1;.swiper-slide{pointer-events:none}}&.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}.swiper-slide-active,.swiper-slide-next,.swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube-shadow{bottom:0;height:100%;left:0;opacity:.6;position:absolute;width:100%;z-index:0;&:before{background:#000;bottom:0;content:"";filter:blur(50px);left:0;position:absolute;right:0;top:0}}}.swiper-cube{.swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}}.swiper-cube{.swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-slide-shadow-cube.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper.swiper-flip{overflow:visible}.swiper-flip{.swiper-slide{backface-visibility:hidden;pointer-events:none;z-index:1;.swiper-slide{pointer-events:none}}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}}.swiper-flip{.swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-slide-shadow-flip.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper-creative{.swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}}.swiper.swiper-cards{overflow:visible}.swiper-cards{.swiper-slide{backface-visibility:hidden;overflow:hidden;transform-origin:center bottom}}
}

/* ---- assets/css/integrations/swiper.css ---- */
/*
 * Swiper (carruseles de banners, categorías, productos y galería; js/components/carruseles.js).
 * Sin flechas: se desliza con el dedo o arrastrando. Puntos de la maqueta: 8 px, el activo
 * alargado (22 px) en cian y los demás en blanco translúcido.
 *
 * main.css importa swiper-bundle.min.css en esta misma capa ("integrations"), justo antes de este
 * archivo: aquí se ajusta con selectores más específicos (o con las variables --swiper-*) y las
 * páginas, que van en una capa posterior, pueden cambiar sus carruseles sin !important.
 */
@layer integrations {
    .swiper {
        --swiper-theme-color: var(--color-primario);
        --swiper-pagination-color: var(--color-acento);
        --swiper-pagination-bullet-size: 8px;
        --swiper-pagination-bullet-border-radius: var(--radio-pildora);
        --swiper-pagination-bullet-inactive-color: var(--color-sobre-oscuro);
        --swiper-pagination-bullet-inactive-opacity: 0.45;
        --swiper-pagination-bullet-horizontal-gap: 4px;
    }

    .swiper-pagination-bullet {
        transition: width var(--transicion), opacity var(--transicion), background var(--transicion);
    }

    .swiper-pagination-bullet-active {
        --swiper-pagination-bullet-width: 22px;
    }

    /* Galería de la ficha (maqueta Celular · Detalle): puntos de 7 px bajo la imagen, grises y
       el activo de 20 px en azul */
    .ficha__carrusel {
        --swiper-pagination-color: var(--color-primario);
        --swiper-pagination-bullet-size: 7px;
        --swiper-pagination-bullet-horizontal-gap: 3.5px;
        --swiper-pagination-bullet-inactive-color: var(--color-borde-campo);
        --swiper-pagination-bullet-inactive-opacity: 1;
        --swiper-pagination-bottom: 0;
    }

    .ficha__carrusel .swiper-pagination-bullet-active {
        --swiper-pagination-bullet-width: 20px;
    }

    /* Carruseles de tarjetas (categorías, productos): todas las de una fila con la misma altura.
       Swiper fija height: 100% en cada diapositiva; con height: auto el contenedor flexible las
       estira a la más alta (la técnica que indica la documentación de Swiper). */
    :is(.productos-carrusel, .categorias-carrusel) .swiper-slide {
        height: auto;
    }

    /* Swiper recorta lo que sobresale: este margen interno deja ver la sombra y el levantamiento
       de las tarjetas al pasar el mouse */
    :is(.productos-carrusel, .categorias-carrusel) {
        padding: var(--espacio-2) 2px 18px;
    }

    /* Categorías con más de las que caben: movimiento continuo y parejo */
    .categorias-carrusel {
        --swiper-wrapper-transition-timing-function: linear;
    }

    /* Si Swiper no carga, cada carrusel queda como una fila que se desliza */
    .swiper:not(.swiper-initialized) {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .swiper:not(.swiper-initialized) > .swiper-wrapper {
        gap: var(--espacio-4);
    }

    .productos-carrusel:not(.swiper-initialized) .swiper-slide {
        width: 220px;
    }

    .categorias-carrusel:not(.swiper-initialized) .swiper-slide {
        width: 190px;
    }
}


/* ---- assets/css/pages/home.css ---- */
/*
 * Portada (pages/home, maqueta Tienda · Inicio y Celular · Inicio): banners, categorías
 * destacadas, vitrinas de productos (recomendados, más vendidos y relacionados en la ficha),
 * franja para cotizar y marcas.
 */
@layer pages {
    /* --- Banners: 3:1 en computadora y 3:2 en celular (la imagen de celular la elige <picture>
       desde 820 px), siempre del mismo alto entre diapositivas --- */
    .hero {
        position: relative;
        background: var(--color-hero);
        --swiper-pagination-bottom: 14px;
    }

    .hero .swiper-slide,
    .hero picture {
        display: block;
    }

    .hero img {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 1;
        object-fit: cover;
    }

    /* --- Secciones: antetítulo, título y bajada centrados --- */
    .home-seccion {
        padding-block: 20px 50px;
    }

    .home-seccion--categorias {
        padding-block: 46px 54px;
    }

    /* Última sección: el espacio antes del pie lo da .site-main */
    .home-seccion--marcas {
        padding-block: 20px 0;
    }

    .home-seccion__cabecera {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--espacio-2);
        margin-bottom: 28px;
        text-align: center;
    }

    .home-seccion__cabecera > * {
        margin: 0;
    }

    .home-seccion__antetitulo {
        color: var(--color-acento);
        font-size: var(--texto-mini);
        font-weight: var(--peso-extra);
        letter-spacing: var(--espaciado-antetitulo);
        text-transform: uppercase;
    }

    .home-seccion__titulo {
        color: var(--color-tinta);
        font-size: var(--texto-titulo-seccion);
        font-weight: var(--peso-extra);
    }

    .home-seccion__texto {
        color: var(--color-texto-suave);
        font-size: var(--texto-cuerpo);
    }

    /* --- Categorías --- */
    .categorias-carrusel .swiper-wrapper {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .categoria-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-control);
        color: inherit;
        background: var(--color-superficie);
        box-shadow: var(--sombra-tarjeta);
        transition: border-color var(--transicion), box-shadow var(--transicion);
    }

    .categoria-card:hover {
        border-color: var(--color-borde-hover);
        box-shadow: var(--sombra-caja);
        color: inherit;
        text-decoration: none;
    }

    .categoria-card img,
    .categoria-card__sin-imagen {
        width: 100%;
        height: 104px;
        object-fit: cover;
        background: var(--color-tinte);
    }

    .categoria-card__cuerpo {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px 14px 18px;
    }

    .categoria-card__nombre {
        color: var(--color-tinta);
        font-size: var(--texto-cuerpo);
        font-weight: var(--peso-extra);
    }

    .categoria-card__texto {
        color: var(--color-descripcion);
        font-size: var(--texto-pequeno);
        line-height: 1.45;
    }

    /* --- Franja para cotizar --- */
    .home-cta {
        padding-block: 10px 40px;
    }

    .home-cta__franja {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--espacio-6);
        min-height: 130px;
        overflow: hidden;
        padding: 24px 30px 24px 64px;
        border-radius: 12px;
        color: var(--color-sobre-oscuro);
        background: var(--degradado-franja);
    }

    /* Foto a la derecha, fundida con el degradado */
    .home-cta__franja > img {
        position: absolute;
        top: 0;
        right: 0;
        width: min(780px, 70%);
        height: 100%;
        object-fit: cover;
        object-position: right center;
        opacity: 0.95;
    }

    .home-cta__franja::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(90deg, var(--color-franja) 38%, color-mix(in srgb, var(--color-franja) 20%, transparent) 70%);
    }

    .home-cta__texto,
    .home-cta__boton {
        position: relative;
        z-index: 2;
    }

    .home-cta__texto {
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-width: 560px;
    }

    .home-cta__texto > * {
        margin: 0;
    }

    .home-cta__antetitulo {
        font-size: var(--texto-mini);
        font-weight: var(--peso-extra);
        letter-spacing: var(--espaciado-antetitulo);
        text-transform: uppercase;
    }

    .home-cta__titulo {
        color: var(--color-sobre-oscuro);
        font-size: 1.4375rem;
        font-weight: var(--peso-extra);
        line-height: 1.25;
    }

    .home-cta__boton {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 10px;
        height: 44px;
        padding: 0 24px;
        border: 0;
        border-radius: var(--radio-pildora);
        color: var(--color-sobre-oscuro);
        background: var(--color-electrobot);
        font-size: var(--texto-menu);
        font-weight: var(--peso-negrita);
        transition: background var(--transicion);
    }

    .home-cta__boton:hover {
        color: var(--color-sobre-oscuro);
        background: var(--color-primario);
        text-decoration: none;
    }

    /* --- Marcas --- */
    /* 6 por fila (como la maqueta); si sobran, la última fila queda centrada */
    .marcas-grid {
        --marcas-por-fila: 6;
        --marcas-espacio: 14px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--marcas-espacio);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .marcas-grid > li {
        flex: 0 0 calc((100% - (var(--marcas-por-fila) - 1) * var(--marcas-espacio)) / var(--marcas-por-fila));
        min-width: 0;
    }

    .marca-card {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 86px;
        padding: var(--espacio-4);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-control);
        color: var(--color-tinta);
        background: var(--color-superficie);
        box-shadow: var(--sombra-tarjeta);
        font-weight: var(--peso-negrita);
        text-align: center;
        transition: border-color var(--transicion);
    }

    .marca-card:hover {
        border-color: var(--color-acento);
        text-decoration: none;
    }

    .marca-card img {
        max-width: 100%;
        max-height: 50px;
        object-fit: contain;
    }

    @media (max-width: 1100px) {
        .marcas-grid {
            --marcas-por-fila: 4;
        }
    }

    @media (max-width: 820px) {
        .hero {
            --swiper-pagination-bottom: 10px;
        }

        .hero img {
            aspect-ratio: 3 / 2;
        }

        .home-seccion--categorias {
            padding-block: 32px 36px;
        }

        .home-seccion__cabecera {
            margin-bottom: 18px;
        }

        .home-seccion__texto {
            font-size: var(--texto-menu);
        }

        /* Franja: texto arriba y botón debajo */
        .home-cta__franja {
            flex-direction: column;
            align-items: flex-start;
            padding: 24px;
        }

        .home-cta__franja::before {
            background: linear-gradient(90deg, var(--color-franja) 55%, color-mix(in srgb, var(--color-franja) 55%, transparent) 100%);
        }

        .marcas-grid {
            --marcas-por-fila: 3;
            --marcas-espacio: 10px;
        }

        .marca-card {
            height: 64px;
            padding: 10px;
        }

        .marca-card img {
            max-height: 34px;
        }
    }
}

/* ---- assets/css/pages/productos.css ---- */
/*
 * Catálogo (pages/productos/index, maqueta Tienda · Productos y Celular · Productos):
 *   computadora  categorías (210 px) · buscador, orden, resultados y paginación · marcas (180 px)
 *   ≤ 1100 px    categorías y marcas una bajo la otra a la izquierda
 *   ≤ 820 px     migas y título, categoría y marca en listas desplegables, conteo con el orden
 *   ≤ 520 px     2 tarjetas por fila (antes, las que quepan según el ancho del centro)
 */
@layer pages {
    .catalogo {
        display: grid;
        grid-template-columns: 210px minmax(0, 1fr) 180px;
        grid-template-areas: "categorias resultados marcas";
        align-items: start;
        gap: 22px;
        width: min(var(--ancho-encabezado), calc(100% - 2 * var(--margen-lateral)));
        margin: 0 auto;
        padding-top: 26px;
    }

    /* Migas y título: solo en celular (en computadora quedan para lectores de pantalla) */
    .catalogo__cabecera {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .catalogo__migas {
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
    }

    .catalogo__titulo {
        font-size: 1.75rem;
        font-weight: var(--peso-extra);
    }

    /* --- Columnas laterales: cajas que acompañan al bajar (sticky) bajo el encabezado --- */
    .catalogo__categorias,
    .catalogo__marcas {
        position: sticky;
        top: calc(var(--alto-encabezado) + var(--alto-menu) + var(--espacio-4));
        padding: var(--espacio-5) 18px var(--espacio-3);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-caja);
        background: var(--color-superficie);
        box-shadow: var(--sombra-caja);
    }

    .catalogo__categorias {
        grid-area: categorias;
    }

    .catalogo__marcas {
        grid-area: marcas;
    }

    :is(.catalogo__categorias, .catalogo__marcas) h2 {
        margin-bottom: 10px;
        color: var(--color-tinta);
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-extra);
        letter-spacing: var(--espaciado-antetitulo);
        text-transform: uppercase;
    }

    /* Título con enlace a la derecha ("Ver todas") */
    .catalogo__lateral-titulo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--espacio-3);
        margin-bottom: 10px;
    }

    .catalogo__lateral-titulo h2 {
        margin-bottom: 0;
    }

    .catalogo__lateral-titulo a {
        font-size: var(--texto-mini);
        font-weight: var(--peso-negrita);
    }

    .catalogo__categorias a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding-inline: var(--espacio-2);
        border-bottom: 1px solid var(--color-borde-suave);
        color: var(--color-tinta);
        font-size: var(--texto-menu);
        font-weight: var(--peso-negrita);
        line-height: 1.25;
        transition: color var(--transicion), background-color var(--transicion);
    }

    .catalogo__categorias a:last-child,
    .catalogo__marcas > a:last-child {
        border-bottom: 0;
    }

    .catalogo__categorias a:hover {
        color: var(--color-primario);
        text-decoration: none;
    }

    /* Elegida: fondo tinte con barra azul a la izquierda (el texto no se mueve) */
    .catalogo__categorias a[aria-current="page"] {
        border-radius: var(--radio-control);
        color: var(--color-primario);
        background: var(--color-tinte);
        box-shadow: inset 3px 0 0 var(--color-primario);
    }

    .catalogo__marcas > a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50px;
        padding: 7px var(--espacio-1);
        border-bottom: 1px solid var(--color-borde-suave);
        border-radius: var(--radio-control);
        color: var(--color-tinta);
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-extra);
        transition: color var(--transicion), background-color var(--transicion);
    }

    .catalogo__marcas > a:hover,
    .catalogo__marcas > a[aria-current="page"] {
        color: var(--color-primario);
        background: var(--color-tinte);
        text-decoration: none;
    }

    .catalogo__marcas > a[aria-current="page"] {
        box-shadow: inset 0 0 0 1px var(--color-primario);
    }

    /* multiply: el fondo blanco de los logos (jpg) toma el tinte al pasar o elegir */
    .catalogo__marcas img {
        max-width: 96px;
        max-height: 26px;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

    /* --- Resultados --- */
    .catalogo__resultados {
        display: flex;
        flex-direction: column;
        grid-area: resultados;
        gap: var(--espacio-4);
        min-width: 0;
    }

    .catalogo__barra {
        display: flex;
        align-items: center;
        gap: var(--espacio-3);
    }

    .catalogo__buscar {
        display: flex;
        flex-grow: 1;
        height: 44px;
        overflow: hidden;
        border: 1px solid var(--color-borde-campo);
        border-radius: var(--radio-control);
    }

    .catalogo__buscar:focus-within {
        border-color: var(--color-primario);
        box-shadow: var(--foco);
    }

    .catalogo__buscar input {
        flex-grow: 1;
        min-height: 0;
        height: 100%;
        padding: 0 14px;
        border: 0;
        border-radius: 0;
        font-size: var(--texto-menu);
    }

    .catalogo__buscar input:focus {
        box-shadow: none;
    }

    .catalogo__buscar button {
        display: flex;
        flex: 0 0 48px;
        align-items: center;
        justify-content: center;
        border: 0;
        color: var(--color-sobre-oscuro);
        background: var(--color-primario);
    }

    .catalogo__buscar button:hover {
        background: var(--color-primario-hover);
    }

    .catalogo__orden {
        display: flex;
        align-items: center;
        gap: var(--espacio-3);
    }

    .catalogo__orden label {
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
        white-space: nowrap;
    }

    .catalogo__orden select {
        width: auto;
        min-height: 44px;
        border-radius: var(--radio-control);
        color: var(--color-tinta);
        font-size: var(--texto-menu);
    }

    .catalogo__filtros-celular {
        display: none;
    }

    .catalogo__conteo {
        color: var(--color-texto-suave);
        font-size: var(--texto-menu);
    }

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

    /* Columnas según el ancho real del centro (no de la pantalla), tarjetas de 160 px como mínimo:
       5 en computadora normal, 3 o 4 cuando las cajas laterales angostan el centro */
    .productos-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--espacio-4);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    @media (max-width: 1100px) {
        /* Las dos cajas una bajo la otra a la izquierda (sin sticky: juntas son más altas que la pantalla) */
        .catalogo {
            grid-template-columns: 210px minmax(0, 1fr);
            grid-template-rows: auto 1fr;
            grid-template-areas:
                "categorias resultados"
                "marcas resultados";
            row-gap: var(--espacio-5);
        }

        .catalogo__categorias,
        .catalogo__marcas {
            position: static;
        }
    }

    @media (max-width: 820px) {
        .catalogo {
            display: block;
            padding-top: 22px;
        }

        .catalogo__cabecera {
            position: static;
            display: grid;
            gap: 14px;
            width: auto;
            height: auto;
            overflow: visible;
            clip: auto;
            margin-bottom: 14px;
            white-space: normal;
        }

        .catalogo__categorias,
        .catalogo__marcas,
        .catalogo__buscar {
            display: none;
        }

        /* Categoría y marca arriba, lado a lado; debajo el conteo y el orden en una fila */
        .catalogo__resultados {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 14px 10px;
        }

        .catalogo__barra {
            display: contents;
        }

        .catalogo__filtros-celular {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-column: 1 / -1;
            gap: 10px;
        }

        .catalogo__filtro-celular {
            display: grid;
            gap: 6px;
            min-width: 0;
        }

        .catalogo__filtro-celular label {
            color: var(--color-texto-suave);
            font-size: var(--texto-pequeno);
            font-weight: var(--peso-negrita);
        }

        .catalogo__filtro-celular select {
            width: 100%;
            min-width: 0;
            border-color: var(--color-borde-campo);
            color: var(--color-tinta);
            font-weight: var(--peso-negrita);
        }

        .catalogo__conteo {
            order: 2;
            font-size: var(--texto-pequeno);
        }

        .catalogo__orden {
            order: 3;
        }

        .catalogo__orden label {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
        }

        .catalogo__orden select {
            min-height: 0;
            height: auto;
            padding: 0 22px 0 0;
            border: 0;
            background-color: transparent;
            font-size: var(--texto-pequeno);
            font-weight: var(--peso-negrita);
        }

        .catalogo__resultados > :is(.productos-grid, .pagination, .empty-state) {
            grid-column: 1 / -1;
            order: 4;
        }

        .productos-grid {
            gap: var(--espacio-3);
        }
    }

    @media (max-width: 520px) {
        .productos-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

/* ---- assets/css/pages/producto.css ---- */
/*
 * Ficha de producto (pages/productos/detalle, maqueta Tienda · Detalle de producto, Producto sin
 * stock y Celular · Detalle):
 *   computadora  galería de 540 px con miniaturas · categoría y marca, modelo, nombre, precio,
 *                stock, cantidad con "Agregar al carrito" y WhatsApp, beneficios
 *                debajo: pestañas Descripción / Especificaciones y productos relacionados (el carrusel
 *                .productos-carrusel de las vitrinas: sus estilos están en integrations/swiper.css)
 *   celular      todo en una columna, puntos bajo la imagen y "Agregar" junto a la cantidad
 */
@layer pages {
    .ficha {
        padding-block: 26px 50px;
    }

    .ficha__contenido {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    /* Enlaces en azul (estilo base de a); la barra "/" y el producto actual quedan en gris (maqueta) */
    .ficha__migas {
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
        overflow-wrap: anywhere;
    }

    .ficha__principal {
        display: grid;
        grid-template-columns: 540px minmax(0, 1fr);
        align-items: start;
        gap: 44px;
    }

    /* --- Galería --- */
    .ficha__galeria {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--espacio-3);
        min-width: 0;
    }

    .ficha__carrusel {
        width: 100%;
    }

    .ficha__imagen {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 520px;
        padding: 40px;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-campo);
        background: var(--color-superficie);
    }

    .ficha__imagen img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .ficha__galeria.is-agotado .ficha__imagen img {
        opacity: 0.6;
    }

    .ficha__sin-stock {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 2;
        padding: 6px 14px;
        border-radius: var(--radio-pildora);
        color: var(--color-error);
        background: var(--color-error-fondo);
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-extra);
    }

    /* Puntos solo en celular; en computadora se eligen con las miniaturas */
    .ficha__carrusel .swiper-pagination {
        display: none;
    }

    .ficha__miniaturas {
        width: 100%;
        margin: 0;
    }

    .ficha__miniaturas .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 84px;
        height: 84px;
        padding: var(--espacio-2);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-control);
        cursor: pointer;
        transition: border-color var(--transicion);
    }

    .ficha__miniaturas .swiper-slide-thumb-active {
        border: 2px solid var(--color-primario);
    }

    .ficha__miniaturas img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* --- Compra --- */
    .ficha__info {
        display: flex;
        flex-direction: column;
        gap: var(--espacio-4);
        min-width: 0;
    }

    .ficha__info > * {
        margin: 0;
    }

    .ficha__meta {
        color: var(--color-texto-suave);
        font-size: var(--texto-mini);
        font-weight: var(--peso-negrita);
        text-transform: uppercase;
    }

    .ficha__meta a {
        color: inherit;
    }

    .ficha__meta a:hover {
        color: var(--color-primario);
    }

    .ficha__titulo {
        color: var(--color-tinta);
        font-size: 2.125rem;
        font-weight: var(--peso-extra);
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .ficha__nombre {
        color: var(--color-texto-2);
        font-size: var(--texto-cuerpo);
        text-transform: uppercase;
    }

    .ficha__precio {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px var(--espacio-3);
    }

    .ficha__precio strong {
        color: var(--color-precio);
        font-size: var(--texto-precio-ficha);
        font-weight: var(--peso-extra);
        line-height: 1.1;
    }

    .ficha__precio.is-agotado strong {
        color: var(--color-meta);
    }

    .ficha__precio span {
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
    }

    .ficha__stock {
        display: inline-flex;
        align-self: flex-start;
        align-items: center;
        gap: var(--espacio-2);
        padding: 6px var(--espacio-3);
        border-radius: var(--radio-pildora);
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-negrita);
    }

    .ficha__stock::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: var(--radio-pildora);
        background: currentColor;
    }

    .ficha__stock.is-disponible {
        color: var(--color-exito);
        background: var(--color-exito-fondo);
    }

    .ficha__stock.is-disponible::before {
        background: var(--color-exito-icono);
    }

    .ficha__stock.is-agotado {
        color: var(--color-error);
        background: var(--color-error-fondo);
    }

    .ficha__comprar {
        display: flex;
        flex-direction: column;
        gap: var(--espacio-2);
        padding-top: 6px;
    }

    .ficha__etiqueta {
        color: var(--color-tinta);
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-negrita);
    }

    .ficha__acciones {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--espacio-3);
    }

    /* Cantidad: − 1 + en una caja de 48 px, sin separadores (maqueta) */
    .ficha__cantidad {
        grid-template-columns: 44px 44px 44px;
        height: 48px;
    }

    .ficha__cantidad button {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-tinta);
        background: transparent;
    }

    .ficha__cantidad input {
        padding: 0;
        border-inline: 0;
        color: var(--color-tinta);
        font-size: var(--texto-grande);
    }

    .ficha__boton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        height: 48px;
        padding: 0 28px;
        border: 0;
        border-radius: var(--radio-control);
        color: var(--color-meta);
        background: var(--color-borde);
        font-size: var(--texto-cuerpo);
        font-weight: var(--peso-negrita);
        white-space: nowrap;
        transition: background var(--transicion);
    }

    .ficha__boton:disabled {
        cursor: not-allowed;
    }

    .ficha__boton--carrito {
        color: var(--color-sobre-oscuro);
        background: var(--color-primario);
    }

    /* Cotizar con ElectroBot: en su propia fila, bajo comprar o el aviso de sin stock */
    .ficha__boton--electrobot {
        align-self: flex-start;
        color: var(--color-sobre-oscuro);
        background: var(--color-electrobot);
        cursor: pointer;
    }

    .ficha__boton--electrobot:hover {
        background: var(--color-primario);
    }

    .ficha__boton--carrito:hover {
        background: var(--color-primario-hover);
    }

    .ficha__boton--whatsapp {
        gap: var(--espacio-2);
        padding: 0 22px;
        color: var(--color-sobre-oscuro);
        background: var(--color-whatsapp);
    }

    .ficha__boton--whatsapp:hover {
        color: var(--color-sobre-oscuro);
        background: var(--color-whatsapp-hover);
        text-decoration: none;
    }

    .ficha__boton--whatsapp .fa-whatsapp {
        color: inherit;
        font-size: 1.125rem;
    }

    .ficha__agregado {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--espacio-3);
        margin: 6px 0 0;
        padding: var(--espacio-3) 14px;
        border-radius: var(--radio-campo);
        color: var(--color-exito);
        background: var(--color-exito-fondo);
        font-size: var(--texto-menu);
    }

    .ficha__agregado a {
        color: inherit;
        font-weight: var(--peso-negrita);
    }

    /* Sin stock */
    .ficha__aviso {
        display: flex;
        flex-direction: column;
        gap: var(--espacio-3);
        padding: 18px;
        border: 1px solid var(--color-error-linea);
        border-radius: var(--radio-caja);
        background: var(--color-error-fondo);
    }

    .ficha__aviso strong {
        color: var(--color-tinta);
        font-size: var(--texto-grande);
    }

    .ficha__aviso p {
        margin: 0;
        color: var(--color-texto-2);
        font-size: var(--texto-menu);
        line-height: 1.55;
    }

    .ficha__beneficios {
        display: grid;
        gap: 10px;
        margin-top: var(--espacio-2);
        padding: var(--espacio-4) 18px;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-campo);
        color: var(--color-texto-2);
        background: var(--color-fondo);
        font-size: var(--texto-menu);
        list-style: none;
    }

    .ficha__beneficios li {
        display: flex;
        gap: 10px;
    }

    .ficha__beneficios svg {
        flex: 0 0 auto;
        color: var(--color-primario);
    }

    /* --- Descripción y especificaciones --- */
    .ficha__detalle {
        overflow: hidden;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-campo);
    }

    .ficha__pestanas {
        display: flex;
        border-bottom: 1px solid var(--color-borde);
        background: var(--color-fondo);
    }

    .ficha__pestanas button {
        height: 50px;
        padding: 0 22px;
        border: 0;
        color: var(--color-texto-suave);
        background: transparent;
        font-size: var(--texto-cuerpo);
        font-weight: var(--peso-negrita);
    }

    .ficha__pestanas button[aria-selected="true"] {
        color: var(--color-tinta);
        background: var(--color-superficie);
        box-shadow: inset 0 -3px 0 var(--color-primario);
    }

    .ficha__panel + .ficha__panel {
        border-top: 1px solid var(--color-borde);
    }

    /* Sin JS cada sección lleva su título; con pestañas el título es la pestaña */
    .ficha__panel-titulo {
        margin: 0;
        padding: 18px 22px 0;
        color: var(--color-tinta);
        font-size: var(--texto-grande);
        font-weight: var(--peso-extra);
    }

    .is-con-pestanas .ficha__panel-titulo {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .is-con-pestanas .ficha__panel + .ficha__panel {
        border-top: 0;
    }

    .ficha__descripcion {
        padding: 22px;
        color: var(--color-texto-2);
        font-size: var(--texto-cuerpo);
        line-height: 1.7;
    }

    .ficha__especificaciones {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 40px;
        margin: 0;
        padding: 10px 22px 18px;
    }

    .ficha__especificaciones div {
        display: flex;
        justify-content: space-between;
        gap: var(--espacio-3);
        padding: 11px 0;
        border-bottom: 1px solid var(--color-borde-suave);
        font-size: var(--texto-menu);
    }

    .ficha__especificaciones dt {
        flex: 0 0 auto;
        max-width: 45%;
        color: var(--color-texto-suave);
    }

    .ficha__especificaciones dd {
        min-width: 0;
        margin: 0;
        color: var(--color-tinta);
        font-weight: var(--peso-negrita);
        text-align: right;
        overflow-wrap: anywhere;
    }

    /* La garantía puede ser un párrafo: ocupa las dos columnas y se lee alineada a la izquierda */
    .ficha__especificaciones .ficha__garantia {
        flex-direction: column;
        grid-column: 1 / -1;
        gap: 4px;
        border-bottom: 0;
    }

    .ficha__garantia dt {
        max-width: none;
    }

    .ficha__garantia dd {
        color: var(--color-texto-2);
        font-weight: var(--peso-medio);
        line-height: 1.6;
        text-align: left;
    }

    /* --- Productos relacionados --- */
    .relacionados__cabecera {
        margin-bottom: 20px;
    }

    .relacionados__cabecera h2 {
        margin: 0;
        color: var(--color-tinta);
        font-size: 1.625rem;
        font-weight: var(--peso-extra);
    }

    .relacionados__cabecera p {
        margin: 4px 0 0;
        color: var(--color-texto-suave);
        font-size: var(--texto-menu);
    }

    @media (max-width: 1100px) {
        .ficha__principal {
            grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
            gap: 32px;
        }

        .ficha__imagen {
            height: 440px;
            padding: 32px;
        }
    }

    @media (max-width: 820px) {
        .ficha {
            padding-block: var(--espacio-4) 30px;
        }

        .ficha__contenido {
            gap: 14px;
        }

        .ficha__migas {
            font-size: var(--texto-mini);
        }

        .ficha__principal {
            grid-template-columns: minmax(0, 1fr);
            gap: 14px;
        }

        .ficha__info {
            gap: 14px;
        }

        .ficha__imagen {
            height: 320px;
            padding: 26px;
        }

        /* Puntos bajo la imagen, en lugar de miniaturas */
        .ficha__carrusel:has(.swiper-pagination) {
            padding-bottom: 21px;
        }

        .ficha__carrusel .swiper-pagination {
            display: block;
        }

        .ficha__miniaturas {
            display: none;
        }

        .ficha__titulo {
            font-size: 1.5rem;
            line-height: 1.2;
        }

        .ficha__nombre {
            font-size: var(--texto-menu);
        }

        .ficha__precio strong {
            font-size: 1.75rem;
        }

        .ficha__precio span {
            font-size: var(--texto-mini);
        }

        .ficha__comprar {
            padding-top: 0;
        }

        /* La etiqueta "Cantidad" queda para lectores de pantalla */
        .ficha__etiqueta {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

        /* Cantidad y "Agregar" en una fila; WhatsApp debajo a todo el ancho */
        .ficha__comprar .ficha__acciones {
            display: grid;
            grid-template-columns: 132px minmax(0, 1fr);
            gap: 10px;
        }

        .ficha__cantidad {
            grid-template-columns: 42px minmax(0, 1fr) 42px;
            height: 50px;
        }

        .ficha__boton {
            height: 50px;
            padding: 0 var(--espacio-4);
            font-weight: var(--peso-extra);
        }

        .ficha__boton-resto {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

        .ficha__comprar .ficha__boton--whatsapp {
            grid-column: 1 / -1;
            order: 1;
        }

        .ficha__aviso .ficha__acciones {
            flex-direction: column;
            align-items: stretch;
        }

        .ficha__beneficios {
            margin-top: 0;
            padding: 14px var(--espacio-4);
            font-size: var(--texto-pequeno);
        }

        .ficha__pestanas {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .ficha__pestanas button {
            padding: 0 var(--espacio-2);
            font-size: var(--texto-menu);
        }

        .ficha__descripcion {
            padding: var(--espacio-4);
            font-size: var(--texto-menu);
            line-height: 1.65;
        }

        .ficha__panel-titulo {
            padding: 14px var(--espacio-4) 0;
        }

        .ficha__especificaciones {
            grid-template-columns: minmax(0, 1fr);
            padding: 6px var(--espacio-4) var(--espacio-3);
        }

        .ficha__especificaciones div {
            gap: 10px;
            padding: 10px 0;
            font-size: var(--texto-pequeno);
        }

        .relacionados__cabecera {
            margin-bottom: 14px;
        }

        .relacionados__cabecera h2 {
            font-size: var(--texto-titulo-caja);
        }

        .relacionados__cabecera p {
            display: none;
        }

        .ficha__boton--electrobot {
            align-self: stretch;
        }
    }
}

/* ---- assets/css/pages/carrito.css ---- */
/*
 * Carrito (pages/carrito): a la izquierda una caja con encabezados de columna y las líneas
 * (imagen, datos, precio unitario, cantidad, subtotal y quitar), con Vaciar debajo; a la derecha
 * el resumen de compra (components/purchase-summary). js/pages/carrito.js marca
 * .is-problema en las líneas sin stock suficiente. Cortes: 1100 (resumen abajo) y 820 (línea en
 * dos filas, sin encabezados).
 */
@layer pages {
    .carrito {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        align-items: start;
        gap: var(--espacio-5) var(--espacio-8);
    }

    .carrito > .empty-state,
    .carrito > .notice {
        grid-column: 1 / -1;
    }

    /* Columna izquierda: la lista y, debajo, Vaciar carrito a la derecha */
    .carrito__productos {
        display: grid;
        gap: var(--espacio-3);
    }

    .carrito__vaciar {
        justify-self: end;
    }

    /* Lista en una caja blanca: fila de encabezados gris y líneas separadas por un borde. Las
       columnas se definen una vez (--carrito-columnas) para encabezados y líneas, todas de ancho
       fijo menos la del producto: así los encabezados quedan alineados con los datos */
    .carrito__lista {
        --carrito-columnas: 80px minmax(0, 1fr) 96px 140px 96px 40px;
        padding: var(--espacio-4);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-caja);
        background: var(--color-superficie);
        box-shadow: var(--sombra-tarjeta);
    }

    .carrito__columnas {
        display: grid;
        grid-template-columns: var(--carrito-columnas);
        gap: var(--espacio-3);
        padding: var(--espacio-3) var(--espacio-3);
        border-radius: var(--radio-control);
        color: var(--color-tinta);
        background: var(--color-fondo);
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-negrita);
        text-align: center;
    }

    /* "Producto" ocupa la imagen y los datos; la última columna (quitar) no lleva título */
    .carrito__columnas span:first-child {
        grid-column: span 2;
        text-align: left;
    }

    .carrito__lineas {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .carrito__linea {
        display: grid;
        grid-template-columns: var(--carrito-columnas);
        align-items: center;
        gap: var(--espacio-3);
        padding: var(--espacio-4) var(--espacio-3);
    }

    .carrito__linea + .carrito__linea {
        border-top: 1px solid var(--color-borde);
    }

    .carrito__linea.is-problema {
        border-radius: var(--radio-control);
        background: var(--color-atencion-fondo);
    }

    .carrito__imagen {
        display: grid;
        place-items: center;
        width: 80px;
        height: 80px;
        border: 1px solid var(--color-borde-suave);
        border-radius: var(--radio-control);
        background: var(--color-superficie);
    }

    .carrito__imagen img {
        width: 100%;
        height: 100%;
        padding: 6px;
        object-fit: contain;
    }

    .carrito__info {
        display: grid;
        justify-items: start;
        gap: 2px;
        min-width: 0;
    }

    .carrito__info > a {
        color: var(--color-tinta);
        font-weight: var(--peso-negrita);
        line-height: 1.3;
    }

    .carrito__info small {
        color: var(--color-texto-suave);
        text-transform: uppercase;
    }

    .carrito__info > span:not(.status-pill) {
        color: var(--color-texto-2);
        font-size: var(--texto-pequeno);
    }

    .carrito__info .status-pill {
        margin-top: var(--espacio-1);
    }

    .carrito__cantidad {
        justify-self: center;
        margin: 0;
    }

    .carrito__precio,
    .carrito__importe {
        color: var(--color-tinta);
        font-weight: var(--peso-extra);
        text-align: center;
    }

    /* Quitar (tacho de cada línea) y Vaciar carrito: grises, en rojo al pasar el mouse */
    .carrito__quitar .button,
    .carrito__vaciar .button {
        color: var(--color-texto-suave);
    }

    .carrito__quitar .button:hover,
    .carrito__vaciar .button:hover {
        color: var(--color-error);
        background: var(--color-error-fondo);
    }

    .carrito__quitar .button {
        width: 40px;
        padding: 0;
    }

    /* Resumen de compra (components/purchase-summary): aquí solo su lugar, fijo al bajar */
    .carrito__resumen {
        position: sticky;
        top: calc(var(--alto-encabezado) + var(--alto-menu) + 34px + var(--espacio-4));
    }

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

        .carrito__resumen {
            position: static;
        }
    }

    @media (max-width: 820px) {
        /* Sin encabezados ni columna de precio unitario (los datos ya dicen "c/u"). Línea en dos
           filas: imagen, datos y quitar arriba; cantidad y subtotal abajo. El tacho comparte
           columna con el subtotal (que la ensancha): va pegado a la derecha como él */
        .carrito__lista {
            padding: var(--espacio-1) var(--espacio-4);
        }

        .carrito__columnas,
        .carrito__precio {
            display: none;
        }

        .carrito__linea {
            grid-template-columns: 72px minmax(0, 1fr) auto;
            grid-template-areas:
                "imagen info quitar"
                "cantidad cantidad importe";
            gap: var(--espacio-3);
            padding-inline: 0;
        }

        .carrito__imagen {
            grid-area: imagen;
            width: 72px;
            height: 72px;
        }

        .carrito__info {
            grid-area: info;
        }

        .carrito__cantidad {
            grid-area: cantidad;
            justify-self: start;
        }

        .carrito__importe {
            grid-area: importe;
            font-size: var(--texto-grande);
            text-align: right;
        }

        .carrito__quitar {
            grid-area: quitar;
            align-self: start;
            justify-self: end;
        }
    }
}

/* ---- assets/css/pages/pedido.css ---- */
/*
 * Hacer pedido (pages/pedido/crear): datos, entrega y pago en cajas a la izquierda; resumen fijo a
 * la derecha. Las formas de entrega son tarjetas de opción; js/pages/pedido.js muestra el bloque
 * de destino que corresponde. Y la pantalla de pedido recibido (pages/pedido/confirmado): avance,
 * cabecera, "¿Qué sigue?" (components/panel) y resumen (components/purchase-summary).
 */
@layer pages {
    .checkout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        align-items: start;
        gap: var(--espacio-8);
    }

    .checkout__datos {
        display: grid;
        gap: var(--espacio-5);
        min-width: 0;
    }

    .checkout__datos > .panel + .panel {
        margin-top: 0;
    }

    /* Bloques que se muestran según el tipo de documento */
    .checkout [data-solo-persona],
    .checkout [data-solo-empresa] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--espacio-5);
    }

    /* --- Formas de entrega --- */
    .checkout__opciones {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
        gap: var(--espacio-3);
    }

    .checkout__destino,
    .checkout__recibe {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--espacio-5);
        padding: var(--espacio-5);
        border: 1px solid var(--color-borde-suave);
        border-radius: var(--radio-campo);
        background: var(--color-fondo);
    }

    .checkout__destino > :is(legend, .form-field__error),
    .checkout__recibe > legend {
        grid-column: 1 / -1;
    }

    /* --- Resumen (components/purchase-summary): aquí su lugar, fijo al bajar, y la lista --- */
    .checkout__resumen {
        position: sticky;
        top: calc(var(--alto-encabezado) + var(--alto-menu) + 34px + var(--espacio-4));
    }

    .checkout__lineas {
        display: grid;
        gap: var(--espacio-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .checkout__lineas li {
        display: flex;
        justify-content: space-between;
        gap: var(--espacio-4);
        padding-bottom: var(--espacio-2);
        border-bottom: 1px solid var(--color-borde-suave);
        color: var(--color-texto-2);
        font-size: var(--texto-menu);
    }

    .checkout__lineas li > span:last-child {
        color: var(--color-tinta);
        font-weight: var(--peso-negrita);
        white-space: nowrap;
    }

    .checkout__lineas li.is-problema {
        color: var(--color-atencion);
    }

    .checkout__nota {
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
    }

    /* --- Pedido recibido: avance, cabecera, "¿Qué sigue?" + resumen (con sus productos) y acciones --- */
    .pedido-recibido {
        display: grid;
        gap: var(--espacio-5);
        max-width: 880px;
        margin-top: var(--espacio-8);
    }

    .pedido-recibido > * {
        margin: 0;
    }

    /* Avance de la compra: tres pasos hechos unidos por una raya */
    .pedido-recibido__avance {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--espacio-3) var(--espacio-4);
        padding: 0;
        list-style: none;
        color: var(--color-tinta);
        font-weight: var(--peso-negrita);
    }

    .pedido-recibido__avance li {
        display: flex;
        align-items: center;
        gap: var(--espacio-2);
    }

    .pedido-recibido__avance li + li::before {
        content: "";
        width: 64px;
        height: 2px;
        margin-right: var(--espacio-2);
        background: var(--color-primario);
    }

    .pedido-recibido__marca {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        color: var(--color-sobre-oscuro);
        background: var(--color-primario);
        font-size: var(--texto-pequeno);
    }

    /* Cabecera: check verde, título, número de pedido y aviso del correo */
    .pedido-recibido__cabecera {
        display: grid;
        justify-items: center;
        gap: var(--espacio-3);
        padding: var(--espacio-8) var(--espacio-6);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-caja);
        background: var(--color-superficie);
        box-shadow: var(--sombra-tarjeta);
        color: var(--color-texto-2);
        text-align: center;
    }

    .pedido-recibido__cabecera > * {
        margin: 0;
    }

    .pedido-recibido__icono {
        display: grid;
        place-items: center;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        color: var(--color-exito-icono);
        background: var(--color-exito-fondo);
        font-size: 2rem;
    }

    .pedido-recibido__cabecera h1 {
        color: var(--color-tinta);
        font-size: var(--texto-titulo-seccion);
    }

    .pedido-recibido__numero {
        color: var(--color-tinta);
    }

    /* El código y la fecha con hora no se parten en dos líneas */
    .pedido-recibido__numero :is(strong, time) {
        white-space: nowrap;
    }

    .pedido-recibido__columnas {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
        gap: var(--espacio-5);
    }

    /* ¿Qué sigue?: número o check en un círculo, título y texto a su derecha */
    .pedido-recibido__pasos {
        display: grid;
        gap: var(--espacio-4);
        padding: 0;
        list-style: none;
    }

    .pedido-recibido__pasos li {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: var(--espacio-3);
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
    }

    .pedido-recibido__pasos strong {
        color: var(--color-tinta);
        font-size: var(--texto-cuerpo);
    }

    .pedido-recibido__paso {
        display: grid;
        grid-row: span 2;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: var(--color-primario);
        background: var(--color-tinte);
        font-weight: var(--peso-negrita);
    }

    .pedido-recibido__pasos .is-hecho .pedido-recibido__paso {
        color: var(--color-sobre-oscuro);
        background: var(--color-exito-icono);
    }

    .pedido-recibido__acciones {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--espacio-3);
    }

    .pedido-recibido__guardar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--espacio-2);
        padding: var(--espacio-4);
        border-radius: var(--radio-campo);
        color: var(--color-texto-2);
        background: var(--color-fondo);
        font-size: var(--texto-pequeno);
    }

    .pedido-recibido__guardar input {
        flex: 1 1 260px;
        min-height: 40px;
        font-size: var(--texto-pequeno);
    }

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

        .checkout__resumen {
            position: static;
        }
    }

    /* Pedido recibido: "¿Qué sigue?" y el resumen uno debajo del otro */
    @media (max-width: 820px) {
        .pedido-recibido__columnas {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @media (max-width: 520px) {
        .pedido-recibido {
            margin-top: var(--espacio-5);
        }

        /* Sin la barra de avance en celular (como la maqueta Celular · Pedido recibido) */
        .pedido-recibido__avance {
            display: none;
        }

        .pedido-recibido__cabecera {
            padding: var(--espacio-6) var(--espacio-4);
        }

        .checkout [data-solo-persona],
        .checkout [data-solo-empresa],
        .checkout__destino,
        .checkout__recibe {
            grid-template-columns: minmax(0, 1fr);
        }

        .checkout__destino,
        .checkout__recibe {
            padding: var(--espacio-4);
        }
    }
}

/* ---- assets/css/pages/acceso.css ---- */
/*
 * Acceso del cliente (pages/cuenta: ingresar, recuperar, registro, registro enviado, enlaces del
 * correo y bienvenida). Encabezado "Área de clientes" (components/account-header) y:
 *   .acceso          caja del formulario y, al lado, la invitación a crear cuenta (partials/auth-promo)
 *   .acceso--sola    una sola caja ancha centrada (crear cuenta, revisa tu correo)
 *   .acceso--enlace  una caja angosta sin encabezado (activar, nueva contraseña, cuenta activada)
 */
@layer pages {
    .acceso {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 480px));
        justify-content: center;
        align-items: start;
        gap: var(--espacio-6);
        margin-top: var(--espacio-10);
    }

    .acceso--sola {
        grid-template-columns: minmax(0, 720px);
    }

    .acceso--enlace {
        grid-template-columns: minmax(0, 520px);
    }

    .acceso__caja {
        gap: var(--espacio-5);
        padding: var(--espacio-8);
        box-shadow: var(--sombra-tarjeta);
    }

    /* Título de la caja (con un .icon-box encima en las páginas de un enlace) y su texto */
    .acceso__titulo {
        display: grid;
        justify-items: start;
        gap: var(--espacio-2);
    }

    .acceso__titulo > * {
        margin: 0;
    }

    .acceso__titulo .icon-box {
        width: 56px;
        height: 56px;
        margin-bottom: var(--espacio-3);
        font-size: 1.5rem;
    }

    .acceso__titulo :is(h1, h2) {
        font-size: var(--texto-titulo-caja);
    }

    .acceso__titulo p {
        color: var(--color-texto-2);
        font-size: var(--texto-menu);
    }

    /* Recordarme a la izquierda y ¿Olvidaste tu contraseña? a la derecha */
    .acceso__opciones {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--espacio-3);
    }

    .acceso__opciones > a {
        font-size: var(--texto-menu);
        font-weight: var(--peso-negrita);
    }

    .acceso__pie {
        color: var(--color-texto-2);
        font-size: var(--texto-menu);
        text-align: center;
    }

    .acceso__pie a {
        font-weight: var(--peso-negrita);
    }

    /* Crear cuenta: campos en dos columnas; aviso, nota y botón a todo el ancho */
    .acceso__formulario {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--espacio-5);
    }

    .acceso__formulario > :is(.notice, .form-field__help, .button) {
        grid-column: 1 / -1;
    }

    .acceso__aviso {
        display: flex;
        align-items: flex-start;
        gap: var(--espacio-3);
    }

    .acceso__aviso .icon {
        flex: none;
        margin-top: 3px;
    }

    /* --- Mensaje centrado: revisa tu correo --- */
    .acceso__mensaje {
        justify-items: center;
        gap: var(--espacio-4);
        padding-block: var(--espacio-10);
        text-align: center;
    }

    .acceso__mensaje h2 {
        font-size: var(--texto-titulo-seccion);
    }

    .acceso__mensaje > p:not([class]) {
        max-width: 500px;
        color: var(--color-texto-2);
    }

    .acceso__icono {
        display: grid;
        place-items: center;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        color: var(--color-primario);
        background: var(--color-tinte);
        font-size: 1.75rem;
    }

    .acceso__nota {
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
    }

    .acceso__acciones {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--espacio-3);
    }

    /* --- Invitación a crear cuenta (caja oscura) --- */
    .auth-promo {
        display: grid;
        gap: var(--espacio-4);
        padding: var(--espacio-8);
        border-radius: var(--radio-caja);
        color: var(--color-sobre-oscuro-suave);
        background: var(--color-noche);
    }

    .auth-promo > * {
        margin: 0;
    }

    .auth-promo h2 {
        color: var(--color-sobre-oscuro);
        font-size: var(--texto-titulo-caja);
    }

    .auth-promo ul {
        display: grid;
        gap: var(--espacio-3);
        padding: 0;
        list-style: none;
    }

    .auth-promo li {
        display: flex;
        align-items: flex-start;
        gap: var(--espacio-3);
        color: var(--color-sobre-oscuro);
    }

    .auth-promo li .icon {
        flex: none;
        margin-top: 3px;
        color: var(--color-acento);
    }

    .auth-promo .auth-promo__boton {
        min-height: 48px;
        margin-top: var(--espacio-2);
        border-color: var(--color-acento);
        color: var(--color-noche);
        background: var(--color-acento);
    }

    .auth-promo .auth-promo__boton:hover {
        border-color: var(--color-sobre-oscuro);
        color: var(--color-noche);
        background: var(--color-sobre-oscuro);
    }

    .auth-promo__nota {
        font-size: var(--texto-pequeno);
    }

    /* --- Cuenta activada: franja de color arriba con el check montado encima --- */
    .bienvenida {
        justify-items: center;
        gap: var(--espacio-4);
        padding-top: 66px;
        background:
            linear-gradient(110deg, var(--color-noche), var(--color-primario) 65%, var(--color-acento)) top / 100% 110px no-repeat,
            var(--color-superficie);
        text-align: center;
    }

    .bienvenida__icono {
        display: grid;
        place-items: center;
        width: 88px;
        height: 88px;
        border-radius: 50%;
        color: var(--color-exito-icono);
        background: var(--color-superficie);
        box-shadow: var(--sombra-tarjeta);
        font-size: 2.25rem;
    }

    .bienvenida h1 {
        font-size: var(--texto-titulo-seccion);
    }

    .bienvenida > p:not([class]) {
        color: var(--color-texto-2);
    }

    .bienvenida > p:not([class]) a {
        font-weight: var(--peso-negrita);
    }

    .bienvenida__carrito {
        display: flex;
        align-items: center;
        gap: var(--espacio-3);
        width: 100%;
        padding: var(--espacio-3) var(--espacio-4);
        border-radius: var(--radio-campo);
        background: var(--color-fondo);
        text-align: left;
    }

    .bienvenida__carrito > span:last-child {
        display: grid;
        color: var(--color-tinta);
    }

    .bienvenida__carrito small {
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
    }

    .bienvenida__fotos {
        display: flex;
        flex: none;
    }

    .bienvenida__fotos img {
        width: 40px;
        height: 40px;
        padding: 3px;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-control);
        background: var(--color-superficie);
        object-fit: contain;
    }

    .bienvenida__fotos img + img {
        margin-left: -8px;
    }

    @media (max-width: 820px) {
        .acceso,
        .acceso--sola,
        .acceso--enlace {
            grid-template-columns: minmax(0, 1fr);
            margin-top: var(--espacio-6);
        }
    }

    @media (max-width: 520px) {
        .acceso__caja,
        .auth-promo {
            padding: var(--espacio-6) var(--espacio-4);
        }

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

        /* El relleno de arriba deja el check sobre el borde de la franja */
        .bienvenida {
            padding-top: 66px;
        }
    }
}

/* ---- assets/css/pages/cuenta.css ---- */
/*
 * Mi cuenta (pages/cuenta: pedidos, cotizaciones, datos y el detalle de un pedido o cotización):
 * encabezado centrado (components/account-header) sobre el menú de la cuenta a la izquierda
 * (partials/account-sidebar) y el contenido. Mis pedidos y Mis cotizaciones: pestañas, tabla
 * (tarjetas en celular) y leyenda de estados; sin nada, un estado vacío. Mis datos: formularios en
 * columnas.
 */
@layer pages {
    .cuenta {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        align-items: start;
        gap: var(--espacio-6);
        margin-top: var(--espacio-10);
    }

    .cuenta__contenido {
        display: grid;
        gap: var(--espacio-5);
        min-width: 0;
    }

    .cuenta__contenido > * {
        margin: 0;
    }

    .cuenta__contenido > .panel + .panel {
        margin-top: 0;
    }

    /* --- Menú de la cuenta: iniciales, nombre y correo; páginas; Cerrar sesión --- */
    .account-sidebar {
        position: sticky;
        top: calc(var(--alto-encabezado) + var(--alto-menu) + 34px + var(--espacio-4));
        display: grid;
        gap: var(--espacio-4);
        padding: var(--espacio-5);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-caja);
        background: var(--color-superficie);
        box-shadow: var(--sombra-caja);
    }

    .account-sidebar__perfil {
        display: flex;
        align-items: center;
        gap: var(--espacio-3);
        margin: 0;
        padding-bottom: var(--espacio-4);
        border-bottom: 1px solid var(--color-borde);
    }

    .account-sidebar__avatar {
        display: grid;
        flex: none;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        color: var(--color-sobre-oscuro);
        background: var(--color-noche);
        font-weight: var(--peso-extra);
    }

    .account-sidebar__datos {
        display: grid;
        min-width: 0;
    }

    .account-sidebar__datos strong {
        color: var(--color-tinta);
        font-size: var(--texto-menu);
        overflow-wrap: anywhere;
    }

    .account-sidebar__datos span {
        overflow: hidden;
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .account-sidebar ul {
        display: grid;
        gap: var(--espacio-1);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .account-sidebar :is(ul a, .account-sidebar__salir) {
        display: flex;
        align-items: center;
        gap: var(--espacio-3);
        width: 100%;
        min-height: 44px;
        padding: 0 var(--espacio-3);
        border: 0;
        border-radius: var(--radio-campo);
        color: var(--color-tinta);
        background: transparent;
        font-size: var(--texto-cuerpo);
        font-weight: var(--peso-negrita);
        text-decoration: none;
        cursor: pointer;
    }

    .account-sidebar ul a .icon {
        color: var(--color-texto-2);
    }

    .account-sidebar ul a:hover {
        background: var(--color-fondo);
    }

    .account-sidebar ul a[aria-current="page"] {
        color: var(--color-primario);
        background: var(--color-tinte);
    }

    .account-sidebar ul a[aria-current="page"] .icon {
        color: var(--color-primario);
    }

    .account-sidebar form {
        margin: 0;
        padding-top: var(--espacio-3);
        border-top: 1px solid var(--color-borde);
    }

    .account-sidebar .account-sidebar__salir {
        color: var(--color-error);
    }

    .account-sidebar .account-sidebar__salir:hover {
        background: var(--color-error-fondo);
    }

    /* --- Sin pedidos o sin cotizaciones --- */
    .cuenta__vacio {
        justify-items: center;
        padding-block: var(--espacio-12);
        text-align: center;
    }

    .cuenta__vacio h2 {
        font-size: var(--texto-titulo-caja);
    }

    .cuenta__vacio > p:not([class]) {
        max-width: 460px;
        color: var(--color-texto-2);
    }

    .cuenta__vacio-icono {
        display: grid;
        place-items: center;
        width: 96px;
        height: 96px;
        border-radius: 50%;
        color: var(--color-primario);
        background: var(--color-tinte);
        font-size: 2.25rem;
    }

    .cuenta__acciones {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--espacio-3);
    }

    /* --- Lista (Mis pedidos, Mis cotizaciones): pestañas y conteo arriba, tabla a todo el ancho --- */
    .cuenta__lista {
        gap: 0;
        padding: 0;
        overflow: hidden;
    }

    .cuenta__barra {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--espacio-3);
        padding: var(--espacio-5);
    }

    .cuenta__barra > p {
        margin: 0;
        color: var(--color-texto-suave);
        font-size: var(--texto-menu);
    }

    .cuenta__pestanas {
        display: flex;
        flex-wrap: wrap;
        gap: var(--espacio-2);
    }

    .cuenta__pestanas a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 0 var(--espacio-4);
        border: 1px solid var(--color-borde-campo);
        border-radius: var(--radio-pildora);
        color: var(--color-tinta);
        font-size: var(--texto-menu);
        font-weight: var(--peso-negrita);
        text-decoration: none;
    }

    .cuenta__pestanas a:hover {
        border-color: var(--color-primario);
        color: var(--color-primario);
    }

    .cuenta__pestanas a[aria-current="page"] {
        border-color: var(--color-primario);
        color: var(--color-sobre-oscuro);
        background: var(--color-primario);
    }

    .cuenta__sin-resultados {
        margin: 0;
        padding: var(--espacio-8) var(--espacio-5);
        border-top: 1px solid var(--color-borde);
        color: var(--color-texto-2);
        text-align: center;
    }

    .cuenta__tabla :is(th, td) {
        padding: var(--espacio-4) var(--espacio-5);
        vertical-align: middle;
    }

    .cuenta__tabla thead th {
        border-top: 1px solid var(--color-borde);
        color: var(--color-tinta);
    }

    .cuenta__tabla tbody tr:last-child > * {
        border-bottom: 0;
    }

    /* Código del pedido (enlace) y cuántos productos lleva */
    .cuenta__tabla tbody th {
        display: grid;
        gap: 2px;
    }

    .cuenta__tabla tbody th a {
        font-weight: var(--peso-negrita);
        white-space: nowrap;
    }

    .cuenta__tabla tbody th small {
        color: var(--color-texto-suave);
        font-size: var(--texto-mini);
        font-weight: var(--peso-normal);
    }

    .cuenta__tabla .cuenta__monto {
        color: var(--color-primario);
        font-weight: var(--peso-negrita);
        white-space: nowrap;
    }

    .cuenta__tabla .cuenta__accion {
        text-align: right;
    }

    /* --- ¿Qué significa cada estado? --- */
    .cuenta__leyenda > summary {
        display: flex;
        align-items: center;
        gap: var(--espacio-3);
        color: var(--color-tinta);
        font-size: var(--texto-titulo-caja);
        font-weight: var(--peso-negrita);
        cursor: pointer;
    }

    .cuenta__leyenda dl {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--espacio-4) var(--espacio-6);
        margin: 0;
    }

    .cuenta__leyenda dl > div {
        display: grid;
        align-content: start;
        justify-items: start;
        gap: var(--espacio-2);
    }

    .cuenta__leyenda dd {
        margin: 0;
        color: var(--color-texto-2);
        font-size: var(--texto-menu);
    }

    /* --- Mis datos: campos en dos columnas (tres en la contraseña); el botón va solo debajo --- */
    .cuenta__formulario {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--espacio-5);
    }

    .cuenta__formulario--tres {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cuenta__formulario > :is(div[data-solo-persona], div[data-solo-empresa]) {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--espacio-5);
    }

    .cuenta__formulario > :is(.button, .form-field__help) {
        grid-column: 1 / -1;
    }

    .cuenta__desplegable > summary {
        color: var(--color-primario);
        font-weight: var(--peso-negrita);
        cursor: pointer;
    }

    .cuenta__desplegable[open] > summary {
        margin-bottom: var(--espacio-4);
    }

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

        .cuenta__formulario--tres {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @media (max-width: 820px) {
        .cuenta {
            grid-template-columns: minmax(0, 1fr);
            gap: var(--espacio-4);
            margin-top: var(--espacio-6);
        }

        /* Menú de la cuenta como fila desplazable, sin el bloque del nombre */
        .account-sidebar {
            position: static;
            display: flex;
            align-items: center;
            gap: var(--espacio-2);
            overflow-x: auto;
            padding: var(--espacio-2);
            scrollbar-width: none;
        }

        .account-sidebar__perfil {
            display: none;
        }

        .account-sidebar ul {
            display: flex;
        }

        .account-sidebar :is(ul a, .account-sidebar__salir) {
            min-height: 40px;
            font-size: var(--texto-menu);
            white-space: nowrap;
        }

        .account-sidebar form {
            margin-left: auto;
            padding: 0 0 0 var(--espacio-2);
            border-top: 0;
            border-left: 1px solid var(--color-borde);
        }

        /* Tabla en tarjetas: código y estado arriba, fecha, entrega y total, y el botón abajo */
        .cuenta__tabla thead {
            display: none;
        }

        .cuenta__tabla tbody tr {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: var(--espacio-2) var(--espacio-3);
            padding: var(--espacio-4) var(--espacio-5);
            border-top: 1px solid var(--color-borde);
        }

        .cuenta__tabla tbody :is(th, td) {
            padding: 0;
            border: 0;
        }

        /* Columna izquierda: código, fecha y entrega; derecha: estado arriba y total al lado */
        .cuenta__tabla tbody td:nth-child(2),
        .cuenta__tabla tbody td:nth-child(3) {
            grid-column: 1;
            color: var(--color-texto-suave);
            font-size: var(--texto-pequeno);
        }

        .cuenta__tabla tbody td:nth-child(5) {
            grid-row: 1;
            grid-column: 2;
            justify-self: end;
        }

        .cuenta__tabla .cuenta__monto {
            grid-row: 2 / span 2;
            grid-column: 2;
            align-self: center;
            justify-self: end;
        }

        .cuenta__tabla .cuenta__accion {
            grid-column: 1 / -1;
            text-align: left;
        }

        .cuenta__tabla .cuenta__accion .button {
            width: 100%;
        }
    }

    @media (max-width: 520px) {
        .cuenta__formulario,
        .cuenta__formulario > :is(div[data-solo-persona], div[data-solo-empresa]) {
            grid-template-columns: minmax(0, 1fr);
        }

        .cuenta__leyenda dl {
            grid-template-columns: minmax(0, 1fr);
        }

        .cuenta__barra,
        .cuenta__tabla tbody tr {
            padding-inline: var(--espacio-4);
        }

        /* Pestañas compactas en su propia fila; si no entran, la fila se desliza de lado */
        .cuenta__pestanas {
            flex-basis: 100%;
            flex-wrap: nowrap;
            gap: var(--espacio-1);
            overflow-x: auto;
            scrollbar-width: none;
        }

        .cuenta__pestanas a {
            flex: none;
            min-height: 32px;
            padding: 0 10px;
            font-size: var(--texto-mini);
            white-space: nowrap;
        }
    }
}

/* ---- assets/css/pages/cuenta-pedido.css ---- */
/*
 * Mi pedido sin cuenta (pages/cuenta/pedido.php con el enlace de acceso): el mismo contenido que
 * dentro de la cuenta (components/order-detail), en una columna centrada. Con cuenta va en la
 * columna de contenido de pages/cuenta.css.
 */
@layer pages {
    .pedido-publico {
        max-width: 1040px;
        margin-top: var(--espacio-8);
    }

    @media (max-width: 520px) {
        .pedido-publico {
            margin-top: var(--espacio-5);
        }
    }
}

/* ---- assets/css/pages/cotizacion.css ---- */
/*
 * Cotización vista por el cliente (components/cotizacion-detalle.php, en pages/cotizacion con
 * migas y en Mi cuenta junto al menú): título con ícono y estado; a la izquierda los datos (para
 * quién, emisión, vigencia con los días que quedan) y la tabla con cabecera celeste y foto de cada
 * producto; a la derecha el total en una franja azul a celeste, el desglose y Descargar PDF / Compartir /
 * Imprimir. Debajo, los bloques de colores (incluye, no incluye, condiciones, observaciones) y la
 * franja "¿Quieres continuar?" con WhatsApp.
 *
 * Colores de la paleta (tokens.css), en claro: cabecera de la tabla en celeste suave; el total
 * en un degradado del azul primario al celeste, como el isotipo; celeste de precios
 * (--color-precio) en importes y totales, como la ficha del producto; celeste de acento en los
 * íconos; azul primario sólido solo en Descargar PDF.
 *
 * Se acomoda al ancho de la cotización, no al de la pantalla (container query): en Mi cuenta el
 * menú le quita espacio y el total pasa abajo antes. Angosta, la tabla se vuelve tarjetas.
 * El botón Imprimir imprime el PDF; si se imprime la página con Ctrl + P, queda solo la cotización.
 */
@layer pages {
    .cotizacion-publica {
        display: grid;
        gap: var(--espacio-4);
        padding-block: var(--espacio-6) var(--espacio-10);
    }

    .cotizacion {
        /* Dos tonos del celeste de acento (tokens.css), solo para esta página: fondo de los
           íconos y texto de la etiqueta de días (el acento puro no se lee sobre fondo claro). */
        --color-celeste-suave: color-mix(in srgb, var(--color-acento) 12%, var(--color-superficie));
        --color-celeste-texto: color-mix(in srgb, var(--color-acento) 55%, var(--color-noche));

        container-type: inline-size;
        display: grid;
        gap: var(--espacio-5);
    }

    .cotizacion > *,
    .cotizacion h1,
    .cotizacion h2,
    .cotizacion p,
    .cotizacion dl,
    .cotizacion dd {
        margin: 0;
    }

    /* --- Título --- */
    .cotizacion__cabecera {
        display: flex;
        align-items: center;
        gap: var(--espacio-4);
    }

    .cotizacion__icono {
        display: grid;
        flex: none;
        place-items: center;
        width: 64px;
        height: 64px;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-caja);
        color: var(--color-acento);
        background: var(--color-superficie);
        box-shadow: var(--sombra-caja);
        font-size: 1.6rem;
    }

    .cotizacion__titulo {
        display: grid;
        flex: 1;
        gap: var(--espacio-1);
        min-width: 0;
    }

    .cotizacion__titulo h1 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--espacio-3);
        color: var(--color-tinta);
        font-size: var(--texto-titulo-seccion);
        line-height: 1.2;
    }

    .cotizacion__titulo h1 .status-pill {
        font-size: var(--texto-mini);
    }

    .cotizacion__titulo p {
        color: var(--color-texto-suave);
        font-size: var(--texto-menu);
    }

    /* --- Cuerpo: detalle y total --- */
    .cotizacion__cuerpo {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 330px;
        align-items: start;
        gap: var(--espacio-5);
    }

    .cotizacion__principal,
    .cotizacion__resumen,
    .cotizacion__continuar {
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-caja);
        background: var(--color-superficie);
        box-shadow: var(--sombra-caja);
    }

    .cotizacion__principal {
        display: grid;
        gap: var(--espacio-4);
        padding: var(--espacio-4);
    }

    .cotizacion__datos {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: var(--espacio-3);
    }

    .cotizacion__datos > div {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: center;
        column-gap: var(--espacio-3);
        padding: var(--espacio-3);
        border-radius: var(--radio-campo);
        background: var(--color-fondo);
    }

    .cotizacion__dato-icono {
        display: grid;
        grid-row: 1 / span 3;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radio-campo);
        color: var(--color-acento);
        background: var(--color-celeste-suave);
    }

    .cotizacion__datos dt {
        grid-column: 2;
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
    }

    .cotizacion__datos dd {
        grid-column: 2;
        color: var(--color-tinta);
        font-weight: var(--peso-negrita);
        overflow-wrap: anywhere;
    }

    .cotizacion__datos dd small {
        display: block;
        color: var(--color-texto-suave);
        font-weight: var(--peso-normal);
    }

    /* Debajo de la fecha: al lado la apretaba hasta partirla en dos líneas */
    .cotizacion__restantes {
        grid-column: 2;
        justify-self: start;
        margin-top: var(--espacio-1);
        padding: 2px 10px;
        border-radius: var(--radio-pildora);
        color: var(--color-celeste-texto);
        background: var(--color-celeste-suave);
        font-size: var(--texto-mini);
        font-weight: var(--peso-negrita);
        white-space: nowrap;
    }

    .cotizacion__restantes.is-pronto {
        color: var(--color-atencion-pildora);
        background: var(--color-atencion-fondo);
    }

    /* --- Tabla de productos --- */
    .cotizacion__tabla-marco {
        overflow: hidden;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-campo);
    }

    .cotizacion__tabla {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--texto-menu);
    }

    /* Cabecera clara: celeste suave con una línea de acento, no noche (se veía oscura) */
    .cotizacion__tabla th {
        padding: 12px var(--espacio-3);
        border-bottom: 2px solid var(--color-acento);
        color: var(--color-celeste-texto);
        background: var(--color-celeste-suave);
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-negrita);
        text-align: left;
    }

    .cotizacion__tabla td {
        padding: var(--espacio-3);
        border-top: 1px solid var(--color-borde-suave);
        color: var(--color-texto);
        vertical-align: middle;
    }

    .cotizacion__tabla .num {
        width: 1%;
        text-align: right;
        white-space: nowrap;
    }

    .cotizacion__n {
        width: 1%;
        color: var(--color-texto-suave);
        text-align: center !important;
    }

    .cotizacion__producto {
        display: flex;
        align-items: center;
        gap: var(--espacio-3);
    }

    .cotizacion__foto {
        display: grid;
        flex: none;
        place-items: center;
        width: 64px;
        height: 64px;
        overflow: hidden;
        border: 1px solid var(--color-borde-suave);
        border-radius: var(--radio-campo);
        color: var(--color-inactivo);
        background: var(--color-superficie);
        font-size: 1.4rem;
    }

    .cotizacion__foto img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .cotizacion__nombre {
        display: block;
        color: var(--color-tinta);
        font-weight: var(--peso-negrita);
        line-height: 1.35;
    }

    a.cotizacion__nombre:hover {
        color: var(--color-primario);
    }

    .cotizacion__producto small {
        display: block;
        margin-top: 2px;
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
    }

    .cotizacion__cantidad {
        display: inline-block;
        min-width: 44px;
        padding: 6px 10px;
        border: 1px solid var(--color-borde-campo);
        border-radius: var(--radio-control);
        text-align: center;
    }

    /* Precios y totales en el celeste de precios, como la ficha del producto */
    .cotizacion__tabla .cotizacion__importe {
        color: var(--color-primario);
        font-weight: var(--peso-negrita);
    }

    /* --- Total --- */
    .cotizacion__resumen {
        position: sticky;
        top: calc(var(--alto-encabezado) + var(--alto-menu) + var(--espacio-4));
        display: grid;
        gap: var(--espacio-4);
        overflow: hidden;
        padding-bottom: var(--espacio-4);
    }

    .cotizacion__total {
        display: flex;
        align-items: center;
        gap: var(--espacio-4);
        padding: var(--espacio-5);
        color: var(--color-sobre-oscuro);
        /* Oscura en todo su ancho: el total es lo más importante y el blanco tiene que leerse. */
        background: var(--degradado-franja);
    }

    .cotizacion__total-icono {
        display: grid;
        flex: none;
        place-items: center;
        width: 56px;
        height: 56px;
        border: 1px solid color-mix(in srgb, var(--color-sobre-oscuro) 35%, transparent);
        border-radius: 50%;
        background: color-mix(in srgb, var(--color-sobre-oscuro) 18%, transparent);
        font-size: 1.35rem;
    }

    .cotizacion__total p {
        display: grid;
        font-size: var(--texto-menu);
        font-weight: var(--peso-medio);
    }

    .cotizacion__total strong {
        font-size: 1.85rem;
        line-height: 1.25;
    }

    .cotizacion__total small {
        color: color-mix(in srgb, var(--color-sobre-oscuro) 85%, transparent);
    }

    .cotizacion__importes {
        display: grid;
        margin-inline: var(--espacio-4);
        padding: var(--espacio-2) var(--espacio-4);
        border: 1px solid var(--color-borde-suave);
        border-radius: var(--radio-campo);
        background: var(--color-fondo);
    }

    .cotizacion__importes > div {
        display: flex;
        justify-content: space-between;
        gap: var(--espacio-3);
        padding-block: var(--espacio-2);
        color: var(--color-texto-2);
        font-size: var(--texto-menu);
    }

    .cotizacion__importes dd {
        color: var(--color-tinta);
        white-space: nowrap;
    }

    .cotizacion__importes .cotizacion__importes-total {
        margin-top: var(--espacio-1);
        padding-top: var(--espacio-3);
        border-top: 1px solid var(--color-borde);
        color: var(--color-precio);
        font-size: var(--texto-titulo-caja);
        font-weight: var(--peso-negrita);
    }

    .cotizacion__importes-total dd {
        color: inherit;
    }

    .cotizacion__acciones {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--espacio-2);
        margin-inline: var(--espacio-4);
    }

    /* Descargar PDF es la acción principal: todo el ancho y en azul (el verde es solo de WhatsApp) */
    .cotizacion__acciones .cotizacion__pdf {
        grid-column: 1 / -1;
        min-height: 48px;
        border-color: var(--color-primario);
        color: var(--color-sobre-oscuro);
        background: var(--color-primario);
        font-size: var(--texto-cuerpo);
    }

    .cotizacion__acciones .cotizacion__pdf:hover {
        border-color: var(--color-primario-hover);
        color: var(--color-sobre-oscuro);
        background: var(--color-primario-hover);
    }

    /* --- Incluye, no incluye, condiciones, observaciones --- */
    .cotizacion__bloques {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--espacio-4);
    }

    .cotizacion__bloque {
        display: flex;
        align-items: flex-start;
        gap: var(--espacio-3);
        padding: var(--espacio-4);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-caja);
        background: var(--color-fondo);
    }

    .cotizacion__bloque-icono {
        display: grid;
        flex: none;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: var(--color-texto-2);
        background: var(--color-superficie);
    }

    .cotizacion__bloque h2 {
        margin-bottom: var(--espacio-1);
        color: var(--color-tinta);
        font-size: var(--texto-grande);
    }

    .cotizacion__bloque p {
        color: var(--color-texto-2);
        font-size: var(--texto-menu);
        line-height: 1.6;
    }

    .cotizacion__bloque--exito {
        border-color: color-mix(in srgb, var(--color-exito-icono) 30%, transparent);
        background: var(--color-exito-fondo);
    }

    .cotizacion__bloque--exito .cotizacion__bloque-icono,
    .cotizacion__bloque--exito h2 {
        color: var(--color-exito);
    }

    .cotizacion__bloque--info {
        border-color: color-mix(in srgb, var(--color-primario) 25%, transparent);
        background: var(--color-info-fondo);
    }

    .cotizacion__bloque--info .cotizacion__bloque-icono,
    .cotizacion__bloque--info h2 {
        color: var(--color-info);
    }

    .cotizacion__bloque--atencion {
        border-color: color-mix(in srgb, var(--color-atencion-icono) 30%, transparent);
        background: var(--color-atencion-fondo);
    }

    .cotizacion__bloque--atencion .cotizacion__bloque-icono {
        color: var(--color-atencion-icono);
    }

    .cotizacion__bloque--atencion h2 {
        color: var(--color-atencion);
    }

    /* --- ¿Quieres continuar? --- */
    .cotizacion__continuar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--espacio-4);
        padding: var(--espacio-4) var(--espacio-5);
    }

    .cotizacion__continuar-icono {
        display: grid;
        flex: none;
        place-items: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        color: var(--color-sobre-oscuro);
        background: var(--color-whatsapp);
        font-size: 1.6rem;
    }

    /* integrations/fontawesome.css pinta de verde todo .fa-whatsapp: aquí va sobre verde */
    .cotizacion__continuar-icono .fa-whatsapp {
        color: inherit;
    }

    .cotizacion__continuar > div {
        flex: 1;
        min-width: 220px;
    }

    .cotizacion__continuar h2 {
        color: var(--color-tinta);
        font-size: var(--texto-titulo-caja);
    }

    .cotizacion__continuar p {
        color: var(--color-texto-2);
        font-size: var(--texto-menu);
    }

    .cotizacion__continuar > .button {
        min-height: 48px;
        padding-inline: var(--espacio-6);
        font-size: var(--texto-cuerpo);
    }

    .cotizacion__cuentas {
        flex-basis: 100%;
    }

    /* --- Más angosta (Mi cuenta, tablet): el total pasa abajo --- */
    @container (max-width: 980px) {
        .cotizacion__cuerpo {
            grid-template-columns: minmax(0, 1fr);
        }

        .cotizacion__resumen {
            position: static;
        }
    }

    /* --- Celular: la tabla se vuelve tarjetas --- */
    @container (max-width: 600px) {
        .cotizacion__cabecera {
            flex-wrap: wrap;
        }

        .cotizacion__icono {
            width: 48px;
            height: 48px;
            font-size: 1.25rem;
        }

        .cotizacion__titulo h1 {
            font-size: var(--texto-titulo-caja);
        }

        .cotizacion__volver {
            order: -1;
            flex-basis: 100%;
            justify-content: flex-start;
            padding-inline: 0;
        }

        .cotizacion__principal {
            padding: var(--espacio-3);
        }

        .cotizacion__tabla-marco {
            border: 0;
        }

        .cotizacion__tabla thead {
            display: none;
        }

        .cotizacion__tabla,
        .cotizacion__tabla tbody {
            display: block;
        }

        .cotizacion__tabla tr {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: var(--espacio-2);
            padding: var(--espacio-3);
            border: 1px solid var(--color-borde);
            border-radius: var(--radio-campo);
        }

        .cotizacion__tabla tr + tr {
            margin-top: var(--espacio-3);
        }

        .cotizacion__tabla td {
            padding: 0;
            border: 0;
        }

        .cotizacion__tabla td.cotizacion__n {
            display: none;
        }

        .cotizacion__tabla td:nth-child(2) {
            grid-column: 1 / -1;
        }

        .cotizacion__tabla td.num {
            width: auto;
            text-align: left;
        }

        .cotizacion__tabla td.num::before {
            content: attr(data-titulo);
            display: block;
            color: var(--color-texto-suave);
            font-size: var(--texto-mini);
        }

        .cotizacion__cantidad {
            padding: 0;
            border: 0;
            text-align: left;
        }

        .cotizacion__continuar > .button {
            flex-basis: 100%;
        }
    }

    /* Marco oculto donde "Imprimir" carga el PDF (js/pages/cotizacion.js). Sin visibility: hidden:
       algunos navegadores no imprimen un marco oculto así. */
    .cotizacion__marco-impresion {
        position: fixed;
        right: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border: 0;
    }

    /* --- Si igual se imprime la página (Ctrl + P): solo la cotización, en una columna --- */
    @media print {
        .site-header,
        .site-footer,
        .chatbot,
        .toast-region,
        .breadcrumb,
        .account-sidebar,
        .cotizacion__volver,
        .cotizacion__acciones,
        .cotizacion__continuar {
            display: none !important;
        }

        .cuenta {
            display: block;
            margin: 0;
        }

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

        .cotizacion__principal,
        .cotizacion__resumen,
        .cotizacion__icono {
            position: static;
            box-shadow: none;
        }

        .cotizacion__tabla th,
        .cotizacion__total,
        .cotizacion__bloque {
            print-color-adjust: exact;
            -webkit-print-color-adjust: exact;
        }

        .cotizacion__tabla tr,
        .cotizacion__bloque {
            break-inside: avoid;
        }
    }
}

/* ---- assets/css/pages/informativas.css ---- */
/*
 * Páginas informativas con el diseño de electrotopperu.com: medios de pago, ubicación, nosotros y
 * contacto. Fondo blanco, cabecera con antetítulo azul en mayúsculas, título grande y bajada gris;
 * tarjetas blancas con borde suave y sombra azulada.
 *
 * .site-main ya deja var(--espacio-16) antes del pie: el espacio inferior de cada página se resta
 * de esa cantidad para que el total sea el del sitio.
 */
@layer pages {
    /* --- Cabecera compartida --- */
    .pagina-cabecera {
        padding-block: 52px 10px;
    }

    .pagina-cabecera__contenido {
        max-width: 820px;
        text-align: center;
    }

    .pagina-cabecera--compacta {
        padding-block: 0;
        text-align: center;
    }

    .pagina-cabecera__antetitulo {
        margin: 0 0 10px;
        color: var(--color-primario);
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-extra);
        line-height: 1.2;
        text-transform: uppercase;
    }

    .pagina-cabecera__titulo {
        margin: 0 0 12px;
        color: var(--color-noche);
        font-size: 2.5rem;
        font-weight: var(--peso-extra);
        line-height: 1.12;
    }

    .pagina-cabecera__texto {
        max-width: 760px;
        margin: 0 auto;
        color: var(--color-texto-suave);
        font-size: var(--texto-grande);
        line-height: 1.6;
    }

    /* --- Medios de pago: imagen con la cuenta, nota y "¿Cómo pago?" (maqueta Tienda · Medios de pago) --- */
    .pagina-pago__contenido {
        display: grid;
        gap: var(--espacio-6);
        max-width: 900px;
        padding-block: 18px calc(68px - var(--espacio-16));
    }

    .pagina-pago__figura {
        margin: 0;
        overflow: hidden;
        border-radius: var(--radio-caja);
        background: var(--color-superficie);
        box-shadow: var(--sombra-caja);
    }

    .pagina-pago__figura img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Datos para transferencia: dato a la izquierda, valor (y "Copiar") a la derecha */
    .pagina-pago__tarjeta {
        padding: var(--espacio-6);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-caja);
        background: var(--color-superficie);
        box-shadow: var(--sombra-caja);
    }

    .pagina-pago__datos {
        margin: 0 0 var(--espacio-5);
    }

    .pagina-pago__datos div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--espacio-1) var(--espacio-4);
        padding-block: var(--espacio-3);
        border-bottom: 1px solid var(--color-borde-suave);
    }

    .pagina-pago__datos dt {
        color: var(--color-texto-suave);
        font-size: var(--texto-menu);
    }

    .pagina-pago__datos dd {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--espacio-1) 0;
        margin: 0;
        color: var(--color-tinta);
        font-size: var(--texto-cuerpo);
        font-weight: var(--peso-extra);
    }

    /* El número nunca se parte: si no cabe con "Copiar", el botón baja */
    .pagina-pago__datos [data-copiar-texto] {
        white-space: nowrap;
    }

    .pagina-pago__nota {
        display: flex;
        gap: 10px;
        margin: 0;
        padding: 14px 18px;
        border-radius: var(--radio-campo);
        color: var(--color-atencion);
        background: var(--color-atencion-fondo);
        font-size: var(--texto-menu);
        line-height: 1.6;
    }

    .pagina-pago__nota i {
        margin-top: 4px;
        color: var(--color-atencion-icono);
    }

    .pagina-pago__titulo {
        margin: 0 0 var(--espacio-4);
        color: var(--color-tinta);
        font-size: var(--texto-titulo-caja);
        font-weight: var(--peso-extra);
        line-height: 1.25;
    }

    .pagina-pago__pasos ol {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--espacio-4);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .pagina-pago__pasos li {
        display: grid;
        align-content: start;
        gap: var(--espacio-2);
        padding: var(--espacio-5);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-caja);
        color: var(--color-texto-suave);
        background: var(--color-superficie);
        font-size: var(--texto-menu);
        line-height: 1.55;
    }

    .pagina-pago__pasos strong {
        color: var(--color-tinta);
        font-size: var(--texto-cuerpo);
    }

    .pagina-pago__numero {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        margin-bottom: var(--espacio-1);
        border-radius: var(--radio-pildora);
        color: var(--color-sobre-oscuro);
        background: var(--color-primario);
        font-weight: var(--peso-extra);
    }

    /* --- Ubicación --- */
    .pagina-ubicacion {
        padding-block: 48px calc(68px - var(--espacio-16));
    }

    .pagina-ubicacion__contenido {
        max-width: 940px;
    }

    .pagina-ubicacion .pagina-cabecera {
        margin-bottom: 28px;
    }

    .pagina-ubicacion .pagina-cabecera__antetitulo {
        margin-bottom: var(--espacio-2);
    }

    .pagina-ubicacion .pagina-cabecera__titulo {
        margin: 0;
        font-size: 2.125rem;
        line-height: 1.15;
    }

    .pagina-ubicacion .pagina-cabecera__texto {
        max-width: 720px;
        margin-top: 12px;
    }

    .pagina-ubicacion__mapa {
        max-width: 760px;
        margin: 0 auto 18px;
        overflow: hidden;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-campo);
        background: var(--color-superficie);
        box-shadow: var(--sombra-informativa);
    }

    .pagina-ubicacion__mapa iframe {
        display: block;
        width: 100%;
        min-height: 430px;
        border: 0;
    }

    .pagina-ubicacion__tarjeta {
        max-width: 760px;
        margin: 0 auto;
        padding: 26px 28px;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-campo);
        background: var(--color-superficie);
        box-shadow: var(--sombra-informativa-suave);
        font-style: normal;
    }

    .pagina-ubicacion__tarjeta p {
        margin: 0;
        color: var(--color-noche);
        font-size: var(--texto-grande);
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    .pagina-ubicacion__tarjeta p + p {
        margin-top: 12px;
    }

    .pagina-ubicacion__tarjeta strong {
        color: var(--color-marino);
        font-weight: var(--peso-extra);
    }

    .pagina-ubicacion__tarjeta a {
        color: var(--color-primario);
    }

    .pagina-ubicacion__tarjeta a:hover {
        color: var(--color-acento);
    }

    /* --- Nosotros --- */
    .pagina-nosotros__presentacion {
        padding-block: 52px 58px;
    }

    .pagina-nosotros__columnas {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
        align-items: center;
        gap: 46px;
    }

    .pagina-nosotros__titulo {
        margin: 0 0 var(--espacio-4);
        color: var(--color-noche);
        font-size: 2.75rem;
        font-weight: var(--peso-extra);
        line-height: 1.12;
    }

    .pagina-nosotros__texto {
        max-width: 560px;
        margin: 0;
        color: var(--color-texto-suave);
        font-size: 1.0625rem;
        line-height: 1.7;
    }

    .pagina-nosotros__figura {
        margin: 0;
        overflow: hidden;
        border-radius: var(--radio-campo);
        background: var(--color-fondo);
        box-shadow: var(--sombra-informativa);
    }

    .pagina-nosotros__figura img {
        display: block;
        width: 100%;
        height: auto;
    }

    .pagina-nosotros__seccion {
        padding-block: 54px;
    }

    .pagina-nosotros__seccion--preguntas {
        padding-bottom: calc(72px - var(--espacio-16));
    }

    .pagina-nosotros__angosto {
        max-width: 880px;
    }

    .pagina-nosotros__subtitulo {
        margin: 0 0 20px;
        color: var(--color-noche);
        font-size: 1.875rem;
        font-weight: var(--peso-extra);
        line-height: 1.2;
    }

    .pagina-nosotros__parrafos {
        display: grid;
        gap: 14px;
    }

    .pagina-nosotros__parrafos p {
        margin: 0;
        color: var(--color-texto-suave);
        font-size: var(--texto-grande);
        line-height: 1.75;
    }

    .pagina-nosotros__encabezado {
        max-width: 760px;
        margin-bottom: 28px;
    }

    .pagina-nosotros__encabezado .pagina-nosotros__subtitulo {
        margin-bottom: 0;
    }

    .pagina-nosotros__enfoque {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .pagina-nosotros__tarjeta {
        padding: 28px;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-campo);
        background: var(--color-superficie);
        box-shadow: var(--sombra-informativa-suave);
    }

    .pagina-nosotros__tarjeta h3 {
        margin: 0 0 12px;
        color: var(--color-pie);
        font-size: 1.375rem;
        font-weight: var(--peso-extra);
        line-height: 1.2;
    }

    .pagina-nosotros__tarjeta p {
        margin: 0;
        color: var(--color-texto-suave);
        font-size: var(--texto-cuerpo);
        line-height: 1.7;
    }

    .pagina-nosotros__preguntas {
        display: grid;
        gap: 12px;
    }

    .pagina-nosotros__pregunta {
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-campo);
        background: var(--color-superficie);
        box-shadow: var(--sombra-informativa-suave);
    }

    .pagina-nosotros__pregunta summary {
        position: relative;
        padding: 18px 52px 18px 20px;
        color: var(--color-noche);
        font-size: var(--texto-grande);
        font-weight: var(--peso-extra);
        line-height: 1.35;
        list-style: none;
        cursor: pointer;
    }

    .pagina-nosotros__pregunta summary::-webkit-details-marker {
        display: none;
    }

    .pagina-nosotros__pregunta summary::after {
        content: "+";
        position: absolute;
        top: 50%;
        right: 20px;
        color: var(--color-primario);
        font-size: 1.5rem;
        font-weight: var(--peso-negrita);
        line-height: 1;
        transform: translateY(-50%);
    }

    .pagina-nosotros__pregunta[open] summary::after {
        content: "-";
    }

    .pagina-nosotros__pregunta p {
        margin: 0;
        padding: 0 20px 20px;
        color: var(--color-texto-suave);
        font-size: var(--texto-cuerpo);
        line-height: 1.65;
    }

    /* --- Contacto --- */
    .pagina-contacto {
        padding-block: 52px calc(72px - var(--espacio-16));
    }

    .pagina-contacto__cabecera {
        max-width: 720px;
        margin: 0 auto 36px;
    }

    .pagina-contacto .pagina-cabecera__texto {
        line-height: 1.65;
    }

    .pagina-contacto__columnas {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
        align-items: start;
        gap: 28px;
    }

    .pagina-contacto__formulario,
    .pagina-contacto__canales {
        padding: 30px;
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-campo);
        background: var(--color-superficie);
        box-shadow: var(--sombra-informativa);
    }

    .pagina-contacto__titulo {
        margin: 0 0 20px;
        color: var(--color-noche);
        font-size: 1.5rem;
        font-weight: var(--peso-extra);
        line-height: 1.2;
    }

    .pagina-contacto__campos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .pagina-contacto__campo {
        display: grid;
        gap: var(--espacio-2);
        margin-bottom: 18px;
        color: var(--color-noche);
        font-size: var(--texto-menu);
        font-weight: var(--peso-negrita);
        line-height: 1.3;
    }

    .pagina-contacto__campo :is(input, select, textarea) {
        width: 100%;
        border: 1px solid var(--color-borde-campo);
        border-radius: var(--radio-control);
        color: var(--color-noche);
        background-color: var(--color-superficie);
        font: inherit;
        font-weight: var(--peso-normal, 400);
    }

    .pagina-contacto__campo :is(input, select) {
        min-height: 44px;
        padding: 0 13px;
    }

    .pagina-contacto__campo textarea {
        min-height: 132px;
        padding: 12px 13px;
        resize: vertical;
    }

    .pagina-contacto__campo :is(input, select, textarea):focus {
        border-color: var(--color-primario);
        box-shadow: var(--foco);
    }

    .pagina-contacto__enviar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 46px;
        padding: 0 24px;
        border: 1px solid var(--color-primario);
        border-radius: var(--radio-control);
        color: var(--color-sobre-oscuro);
        background: var(--color-primario);
        font-size: var(--texto-menu);
        font-weight: var(--peso-extra);
        line-height: 1;
    }

    .pagina-contacto__enviar:hover {
        background: var(--color-primario-hover);
    }

    .pagina-contacto__aviso {
        margin: var(--espacio-3) 0 0;
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
        line-height: 1.5;
    }

    .pagina-contacto__texto {
        margin: 0 0 24px;
        color: var(--color-texto-suave);
        font-size: var(--texto-cuerpo);
        line-height: 1.65;
    }

    .pagina-contacto__lista {
        display: grid;
        gap: 18px;
        margin: 0;
        color: var(--color-noche);
        font-style: normal;
    }

    .pagina-contacto__canal {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: start;
        gap: 12px;
    }

    /* Ícono en círculo celeste */
    .pagina-contacto__icono {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: var(--radio-pildora);
        color: var(--color-primario);
        background: var(--color-tinte);
    }

    /* El de WhatsApp también va azul, como los demás (el verde general es para botones) */
    .pagina-contacto__icono .fa-whatsapp {
        color: inherit;
    }

    .pagina-contacto__canal > div :is(strong, span, a) {
        display: block;
    }

    .pagina-contacto__canal strong {
        margin-bottom: 4px;
        color: var(--color-marino);
        font-size: var(--texto-menu);
        font-weight: var(--peso-extra);
        line-height: 1.25;
    }

    .pagina-contacto__canal > div :is(span, a) {
        color: var(--color-texto-suave);
        font-size: var(--texto-cuerpo);
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .pagina-contacto__canal a:hover {
        color: var(--color-primario);
    }

    .pagina-contacto__acciones {
        display: grid;
        gap: 12px;
        margin-top: 28px;
    }

    .pagina-contacto__whatsapp,
    .pagina-contacto__ubicacion {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0 18px;
        border-radius: var(--radio-control);
        font-size: var(--texto-menu);
        font-weight: var(--peso-extra);
        line-height: 1;
    }

    .pagina-contacto__whatsapp {
        gap: 10px;
        color: var(--color-sobre-oscuro);
        background: var(--color-whatsapp);
    }

    .pagina-contacto__whatsapp:hover {
        color: var(--color-sobre-oscuro);
        background: var(--color-whatsapp-hover);
        text-decoration: none;
    }

    .pagina-contacto__whatsapp .fa-whatsapp {
        color: inherit;
    }

    .pagina-contacto__ubicacion {
        border: 1px solid var(--color-borde-campo);
        color: var(--color-primario);
        background: var(--color-superficie);
    }

    .pagina-contacto__ubicacion:hover {
        border-color: var(--color-primario);
        text-decoration: none;
    }

    @media (max-width: 900px) {
        .pagina-nosotros__columnas,
        .pagina-contacto__columnas {
            grid-template-columns: minmax(0, 1fr);
        }

        .pagina-nosotros__intro {
            max-width: 720px;
        }
    }

    @media (max-width: 640px) {
        .pagina-cabecera {
            padding-block: 42px 28px;
        }

        .pagina-cabecera--compacta {
            padding-block: 0;
        }

        .pagina-cabecera__titulo {
            font-size: 2rem;
        }

        .pagina-pago__contenido {
            gap: var(--espacio-5);
            padding-bottom: calc(48px - var(--espacio-16));
        }

        .pagina-pago__tarjeta {
            padding: var(--espacio-5) var(--espacio-4);
        }

        /* Valor bajo su dato: el CCI y su botón "Copiar" caben en celular */
        .pagina-pago__datos div {
            flex-direction: column;
            align-items: flex-start;
        }

        .pagina-pago__pasos ol {
            grid-template-columns: minmax(0, 1fr);
            gap: var(--espacio-3);
        }

        .pagina-pago__pasos li {
            padding: var(--espacio-4);
        }

        .pagina-ubicacion {
            padding-block: 38px calc(52px - var(--espacio-16));
        }

        .pagina-ubicacion .pagina-cabecera__titulo {
            font-size: 1.75rem;
        }

        .pagina-ubicacion__mapa iframe {
            min-height: 320px;
        }

        .pagina-ubicacion__tarjeta {
            padding: 22px 20px;
        }

        .pagina-ubicacion__tarjeta p {
            font-size: var(--texto-cuerpo);
        }

        .pagina-nosotros__presentacion {
            padding-block: 40px 44px;
        }

        .pagina-nosotros__titulo {
            font-size: 2.125rem;
        }

        .pagina-nosotros__texto {
            font-size: var(--texto-cuerpo);
        }

        .pagina-nosotros__seccion {
            padding-block: 42px;
        }

        .pagina-nosotros__seccion--preguntas {
            padding-bottom: calc(52px - var(--espacio-16));
        }

        .pagina-nosotros__subtitulo {
            font-size: 1.5625rem;
        }

        .pagina-nosotros__enfoque {
            grid-template-columns: minmax(0, 1fr);
        }

        .pagina-nosotros__tarjeta {
            padding: 22px;
        }

        .pagina-contacto {
            padding-block: 40px calc(54px - var(--espacio-16));
        }

        .pagina-contacto__formulario,
        .pagina-contacto__canales {
            padding: 24px 20px;
        }

        .pagina-contacto__campos {
            grid-template-columns: minmax(0, 1fr);
        }

        .pagina-contacto__enviar {
            width: 100%;
        }
    }
}

/* ---- assets/css/pages/legales.css ---- */
/*
 * Textos legales y Libro de Reclamaciones: política de privacidad y términos (pages/legal), hoja de
 * reclamación con su revisión (pages/reclamaciones/index) y la constancia imprimible
 * (pages/reclamaciones/constancia, js/components/imprimir.js).
 */
@layer pages {
    /* --- Privacidad y términos --- */
    .legal {
        display: grid;
        gap: var(--espacio-4);
        max-width: 860px;
    }

    .legal > * {
        margin: 0;
    }

    .legal__version {
        justify-self: start;
        padding: 6px var(--espacio-3);
        border-radius: var(--radio-pildora);
        color: var(--color-info);
        background: var(--color-info-fondo);
        font-size: var(--texto-pequeno);
        font-weight: var(--peso-medio);
    }

    .legal__texto {
        color: var(--color-texto);
        font-size: var(--texto-grande);
        line-height: 1.75;
    }

    /* --- Libro de Reclamaciones --- */
    .reclamaciones {
        display: grid;
        gap: var(--espacio-5);
        max-width: 920px;
    }

    .reclamaciones > .panel + .panel,
    .reclamaciones > .panel + form.panel {
        margin-top: 0;
    }

    .reclamaciones__proveedor {
        gap: var(--espacio-1);
        border-left: 4px solid var(--color-primario);
        background: var(--color-fondo);
        box-shadow: none;
    }

    .reclamaciones form.panel {
        gap: var(--espacio-8);
    }

    /* Campos de cada parte de la hoja en dos columnas; lo largo ocupa toda la fila */
    .reclamaciones form.panel > fieldset {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--espacio-5);
    }

    .reclamaciones form.panel > fieldset > :is(legend, div:not(.form-field), .form-field:has(textarea), .form-field--check, .form-field:has(.option-card)) {
        grid-column: 1 / -1;
    }

    .reclamaciones form.panel > fieldset > div[data-apoderado] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--espacio-5);
        padding: var(--espacio-4);
        border-radius: var(--radio-campo);
        background: var(--color-fondo);
    }

    /* Tipo de reclamación: opciones lado a lado */
    .reclamaciones .form-field:has(> .option-card) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--espacio-3);
    }

    .reclamaciones .form-field:has(> .option-card) > :not(.option-card) {
        grid-column: 1 / -1;
    }

    .reclamaciones__avisos {
        display: grid;
        gap: var(--espacio-2);
        padding: var(--espacio-4) var(--espacio-5);
        border-radius: var(--radio-campo);
        color: var(--color-texto-2);
        background: var(--color-fondo);
        font-size: var(--texto-pequeno);
    }

    .reclamaciones__avisos p:empty {
        display: none;
    }

    .reclamaciones__revision {
        border-color: var(--color-primario);
    }

    /* --- Constancia --- */
    .constancia {
        display: grid;
        gap: var(--espacio-5);
        max-width: 920px;
        margin-top: var(--espacio-8);
    }

    .constancia > .panel + .panel {
        margin-top: 0;
    }

    .constancia__cabecera {
        display: grid;
        justify-items: start;
        gap: var(--espacio-2);
    }

    .constancia__cabecera > * {
        margin: 0;
    }

    .constancia__cabecera h1 {
        font-size: var(--texto-titulo-seccion);
    }

    .constancia__cabecera p {
        color: var(--color-texto-2);
    }

    .constancia h3 {
        margin: var(--espacio-2) 0 0;
        font-size: var(--texto-menu);
    }

    .constancia__avisos {
        display: grid;
        gap: var(--espacio-2);
        color: var(--color-texto-suave);
        font-size: var(--texto-pequeno);
    }

    .constancia__avisos p {
        margin: 0;
    }

    @media (max-width: 520px) {
        .reclamaciones form.panel > fieldset,
        .reclamaciones form.panel > fieldset > div[data-apoderado],
        .reclamaciones .form-field:has(> .option-card) {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    /* Al imprimir la constancia: solo la hoja, sin cabecera, pie ni botones */
    @media print {
        .site-header,
        .site-footer,
        .chatbot,
        .toast-region,
        [data-imprimir] {
            display: none;
        }

        .constancia .panel {
            box-shadow: none;
            break-inside: avoid;
        }
    }
}

/* ---- assets/css/pages/no-encontrada.css ---- */
/*
 * Página no encontrada (pages/errors/404) con buscador y categorías, y la pantalla de error o
 * mantenimiento (pages/errors/error). El robot del 500 está en components/robot-averiado.
 */
@layer pages {
    .no-encontrada,
    .error-screen {
        display: grid;
        justify-items: center;
        gap: var(--espacio-4);
        max-width: 640px;
        margin-top: var(--espacio-16);
        text-align: center;
    }

    :is(.no-encontrada, .error-screen) > * {
        margin: 0;
    }

    .no-encontrada h1,
    .error-screen h1 {
        font-size: var(--texto-titulo-seccion);
        text-wrap: balance;
    }

    :is(.no-encontrada, .error-screen) > p:not([class]) {
        color: var(--color-texto-2);
    }

    .no-encontrada::before {
        content: "404";
        color: var(--color-tinte);
        font-size: 6rem;
        font-weight: var(--peso-extra);
        line-height: 1;
        letter-spacing: -0.04em;
        -webkit-text-stroke: 2px var(--color-primario);
    }

    .no-encontrada__buscar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--espacio-2);
        width: 100%;
        max-width: 480px;
        text-align: left;
    }

    .no-encontrada__buscar label {
        grid-column: 1 / -1;
        color: var(--color-tinta);
        font-weight: var(--peso-negrita);
    }

    .no-encontrada__categorias {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--espacio-2);
        padding: 0;
        list-style: none;
    }

    .no-encontrada__categorias a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 0 var(--espacio-4);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio-pildora);
        color: var(--color-noche);
        font-size: var(--texto-menu);
        font-weight: var(--peso-medio);
    }

    .no-encontrada__categorias a:hover {
        border-color: var(--color-primario);
        color: var(--color-primario);
        text-decoration: none;
    }

    .error-screen__codigo {
        display: grid;
        place-items: center;
        min-width: 96px;
        height: 56px;
        padding: 0 var(--espacio-4);
        border-radius: var(--radio-campo);
        color: var(--color-primario);
        background: var(--color-tinte);
        font-size: 1.75rem;
        font-weight: var(--peso-extra);
    }

    /* Con APP_DEBUG el mensaje lleva la ruta del archivo: se corta donde haga falta */
    .error-screen > p:not([class]) {
        overflow-wrap: anywhere;
    }

    .error-screen__acciones {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--espacio-3);
    }

    @media (max-width: 520px) {
        .error-screen__acciones {
            flex-direction: column;
            justify-self: stretch;
        }

        .no-encontrada,
        .error-screen {
            margin-top: var(--espacio-10);
        }

        .no-encontrada::before {
            font-size: 4.5rem;
        }
    }
}


/* ---- assets/css/utilities/accessibility.css ---- */
/*
 * Accesibilidad y texto: contenido solo para lectores de pantalla, el enlace "Saltar al
 * contenido" (visible al llegar con el teclado) y .text-pre (respeta los saltos de línea del texto
 * guardado: descripciones, mensajes, textos legales).
 */
@layer utilities {
    .visually-hidden,
    .visually-hidden-focusable:not(:focus, :focus-within) {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        border: 0 !important;
        white-space: nowrap !important;
    }

    /* Una tabla no respeta height ni overflow (crece hasta el alto de sus filas): como bloque sí
       queda en 1 px y no alarga la página */
    table.visually-hidden {
        display: block !important;
    }

    .visually-hidden-focusable:focus {
        position: fixed;
        top: var(--espacio-3);
        left: var(--espacio-3);
        z-index: var(--capa-aviso);
        padding: 10px 16px;
        border-radius: var(--radio-control);
        color: var(--color-sobre-oscuro);
        background: var(--color-primario);
        font-weight: var(--peso-negrita);
        box-shadow: var(--sombra-menu);
    }

    /* Texto escrito a mano: también parte palabras o enlaces muy largos (no ensancha la página) */
    .text-pre {
        white-space: pre-line;
        overflow-wrap: anywhere;
    }
}