/* =========================================================
   GRUPO DELMEX — Rediseño, estilos comunes
   Lo cargan TODAS las páginas del sitio.
   Complementa a Tailwind (CDN); aquí solo va lo que Tailwind
   no cubre: efectos glass, la malla, el mega menú y los
   bloques que js/js.js inyecta con innerHTML.
   ========================================================= */

/* Paleta tomada del logotipo. El azul anterior (#1B4E9B) no estaba en el
   logo: era más oscuro y más saturado que el del globo, y era el que
   cargaba de más toda la página. Estos valores salen del archivo:
   el azul medio del globo, su celeste bajo y el verde del anillo. */
:root {
    --ink: #101D33;
    --navy: #15223A;
    --azul: #2C6CB0;
    --cielo: #7FBCE6;
    --bruma: #D8E8F7;
    --verde: #10652F;
    --acero: #F3F7FC;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    background: #fff;
    color: var(--navy);
}

.font-display {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 112;
    letter-spacing: -0.015em;
}

.eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .68rem;
}

/* ---------- Vidrio esmerilado ---------- */

.glass-dark {
    background: rgba(16, 29, 51, .55);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .14);
}

.glass-light {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(44, 108, 176, .14);
}

/* Paneles del menú: mismo efecto, casi opacos para que se lean bien */
.glass-panel {
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    border: 1px solid rgba(44, 108, 176, .16);
}

.glass-blue {
    background: linear-gradient(140deg, rgba(44, 108, 176, .35), rgba(111, 180, 228, .12));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(207, 227, 245, .22);
}

/* ---------- Malla: firma visual tomada del metal desplegado ---------- */

.malla {
    background-image:
        linear-gradient(115deg, rgba(207, 227, 245, .10) 1px, transparent 1px),
        linear-gradient(-115deg, rgba(207, 227, 245, .10) 1px, transparent 1px);
    background-size: 34px 20px, 34px 20px;
}

.malla-claro {
    background-image:
        linear-gradient(115deg, rgba(44, 108, 176, .07) 1px, transparent 1px),
        linear-gradient(-115deg, rgba(44, 108, 176, .07) 1px, transparent 1px);
    background-size: 34px 20px, 34px 20px;
}

/* ---------- Portada del index: barrido de luz sobre el logo ----------
   La máscara recorta la franja; el logo queda FUERA de ella para poder
   escalar y flotar sin toparse con ningún borde. */

.portada {
    background-color: var(--ink);
}

/* El halo de la portada: un resplandor que se abre por detrás del logo
   cuando termina de entrar. Reemplaza al destello que se recortaba con el
   PNG como máscara; Safari pintaba esa máscara como un rectángulo opaco
   mientras la imagen no estaba lista. Aquí no hay máscara ni nada encima
   del logo, así que el problema desaparece de raíz. */

#halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 78%;
    height: 190%;
    margin: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at center,
            rgba(190, 226, 255, .55) 0%,
            rgba(111, 180, 228, .32) 38%,
            rgba(44, 108, 176, .12) 62%,
            transparent 78%);
    filter: blur(26px);
    will-change: transform, opacity;
}

/* ---------- Menú de escritorio ---------- */

.nav-item>.panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

.nav-item:hover>.panel,
.nav-item:focus-within>.panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Puente invisible: el panel arranca pegado al link para no perder el hover */
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    height: 14px;
}

.nav-link .barra {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.nav-item:hover .nav-link .barra,
.nav-link:focus-visible .barra {
    transform: scaleX(1);
}

/* ---------- Menú móvil ---------- */

#menu-movil {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.4, 0, .2, 1);
}

#menu-movil.abierto {
    max-height: 85vh;
    overflow-y: auto;
}

details>summary {
    list-style: none;
    cursor: pointer;
}

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

details[open] summary .chev {
    transform: rotate(180deg);
}

.chev {
    transition: transform .25s ease;
}

/* ---------- Sucursales ---------- */

.suc-btn.activo {
    background: linear-gradient(90deg, rgba(44, 108, 176, .14), rgba(111, 180, 228, .05));
    color: var(--azul);
}

.suc-btn .marca {
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .25s ease;
}

.suc-btn.activo .marca {
    transform: scaleY(1);
}

/* Bloques que js/js.js rellena con innerHTML: se estilizan por etiqueta */
#addresslocations h2 {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 112;
    letter-spacing: -0.015em;
    font-size: 1.875rem;
    line-height: 1.15;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 1rem;
}

#addresslocations p {
    color: rgba(21, 34, 58, .85);
    line-height: 1.65;
    margin: 0 0 .25rem;
}

#maplocation iframe {
    width: 100%;
    height: 380px;
    border: 0;
    border-radius: 20px;
    display: block;
}

@media (min-width: 640px) {
    #maplocation iframe {
        height: 460px;
    }
}

/* ---------- Botón de idioma ----------
   Muestra ES / EN con el idioma activo resaltado y subrayado, en vez de
   mostrar solo el idioma al que se cambia. Los colores salen de
   currentColor, así el mismo estilo sirve sobre la barra oscura y sobre
   el header claro sin reglas aparte.
   El contenido lo escribe delmexApplyLanguage en js/I18n.js. */

.lang-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    line-height: 1;
}

.lang-op {
    position: relative;
    padding-bottom: 3px;
    opacity: .45;
    transition: opacity .25s ease;
}

.lang-op::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.lang-op.activo {
    opacity: 1;
    font-weight: 700;
}

.lang-op.activo::after {
    transform: scaleX(1);
}

/* La diagonal es apoyo visual, nunca compite con los idiomas */
.lang-sep {
    opacity: .3;
}

/* Al pasar el mouse se insinúa el idioma al que se cambiaría */
.lang-toggle-btn:hover .lang-op:not(.activo) {
    opacity: .8;
}

/* ---------- Buscador ----------
   El panel de escritorio y el campo del menú móvil. El vidrio esmerilado
   sale de backdrop-filter: desenfoca lo que queda debajo en vez de taparlo,
   que es lo que da la sensación de cristal y no de plástico opaco.
   La lógica y los resultados los arma js/js.js. */

.buscador-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 55;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    background: rgba(255, 255, 255, .58);
    backdrop-filter: blur(26px) saturate(190%);
    -webkit-backdrop-filter: blur(26px) saturate(190%);
    border-bottom: 1px solid rgba(44, 108, 176, .12);
    box-shadow: 0 26px 50px -30px rgba(16, 29, 51, .6);
    transition: max-height .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}

.buscador-panel.abierto {
    max-height: 78vh;
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
}

/* La caja no ocupa todo el ancho: centrada y acotada se lee como un campo
   de búsqueda y no como una barra de herramientas. */
.buscador-caja {
    display: flex;
    align-items: center;
    gap: .8rem;
    max-width: 680px;
    margin: 0 auto;
    padding: .8rem 1.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(44, 108, 176, .16);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    /* Filo de luz arriba y sombra abajo: es lo que da el relieve de cristal */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -1px 0 rgba(44, 108, 176, .06),
        0 10px 26px -18px rgba(16, 29, 51, .5);
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.buscador-caja:focus-within {
    background: rgba(255, 255, 255, .78);
    border-color: rgba(44, 108, 176, .4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        0 0 0 4px rgba(44, 108, 176, .1),
        0 14px 30px -18px rgba(16, 29, 51, .55);
}

.buscador-caja > i {
    color: var(--azul);
    font-size: 15px;
    flex-shrink: 0;
    transition: transform .3s ease;
}

.buscador-caja:focus-within > i {
    transform: scale(1.1);
}

.buscador-caja input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15.5px;
    color: var(--navy);
}

.buscador-caja input::placeholder {
    color: rgba(21, 34, 58, .42);
}

/* La X que trae el navegador en los campos de búsqueda desentona */
.buscador-caja input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

#buscador-cerrar {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: rgba(21, 34, 58, .5);
    font-size: 13px;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

#buscador-cerrar:hover {
    background: rgba(21, 34, 58, .09);
    color: var(--navy);
    transform: rotate(90deg);
}

.buscador-caja--movil {
    max-width: none;
    padding: .65rem 1rem;
    background: rgba(238, 242, 247, .85);
}

/* En productos.html el buscador es la herramienta principal de la página,
   no un ícono del menú: campo más grande y más ancho. */
.buscador-caja--pagina {
    max-width: 780px;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, .8);
}

.buscador-caja--pagina input {
    font-size: 16.5px;
}

.buscador-caja--pagina > i {
    font-size: 17px;
}

/* ---------- Resultados ---------- */

.buscador-resultados {
    display: none;
    max-width: 680px;
    margin: .9rem auto 0;
}

.buscador-resultados.visible {
    display: block;
}

.buscador-rotulo {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(21, 34, 58, .42);
    margin: 0 0 .5rem .35rem;
}

/* Cada resultado entra un instante después del anterior: el escalonado
   hace que la lista se sienta viva sin animar nada pesado. */
.buscador-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem .85rem;
    border-radius: 14px;
    border: 1px solid transparent;
    color: var(--navy);
    animation: buscador-entra .32s ease both;
    animation-delay: calc(var(--n, 0) * 35ms);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

@keyframes buscador-entra {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.buscador-item:hover,
.buscador-item.activo {
    background: rgba(255, 255, 255, .8);
    border-color: rgba(44, 108, 176, .16);
    transform: translateX(3px);
    box-shadow: 0 10px 22px -16px rgba(16, 29, 51, .6);
}

.buscador-ico {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 12px;
    color: var(--azul);
    background: rgba(44, 108, 176, .1);
    transition: background-color .2s ease, color .2s ease;
}

.buscador-item:hover .buscador-ico,
.buscador-item.activo .buscador-ico {
    background: var(--azul);
    color: #fff;
}

.buscador-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.buscador-nombre {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
}

/* El trozo que coincide con lo tecleado */
.buscador-nombre mark {
    background: rgba(255, 214, 102, .55);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

.buscador-cat {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(21, 34, 58, .45);
    margin-top: .1rem;
}

.buscador-flecha {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--azul);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .2s ease, transform .2s ease;
}

.buscador-item:hover .buscador-flecha,
.buscador-item.activo .buscador-flecha {
    opacity: .8;
    transform: translateX(0);
}

/* ---------- Categorías sugeridas ---------- */

.buscador-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.buscador-chip {
    display: inline-flex;
    align-items: center;
    padding: .45rem .9rem;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(44, 108, 176, .18);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.buscador-chip:hover {
    background: var(--azul);
    border-color: var(--azul);
    color: #fff;
    transform: translateY(-2px);
}

/* ---------- Sin resultados ---------- */

.buscador-vacio {
    text-align: center;
    padding: 1.8rem 1rem;
    color: rgba(21, 34, 58, .6);
}

.buscador-vacio i {
    font-size: 22px;
    color: rgba(44, 108, 176, .25);
    margin-bottom: .6rem;
    display: block;
}

.buscador-vacio p {
    font-size: 14.5px;
    margin: 0 0 .2rem;
}

.buscador-vacio span {
    font-size: 12.5px;
    color: rgba(21, 34, 58, .45);
}

@media (prefers-reduced-motion: reduce) {
    .buscador-item {
        animation: none;
    }
}

/* ---------- Tarjetas de categoría (productos.html) ---------- */

.cat-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1280px) {
    .cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cat-card {
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.5rem;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(21, 34, 58, .09);
    box-shadow: 0 18px 40px -32px rgba(21, 34, 58, .7);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.cat-card:hover {
    transform: translateY(-5px);
    border-color: rgba(44, 108, 176, .28);
    box-shadow: 0 26px 46px -28px rgba(44, 108, 176, .5);
}

.cat-cab {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: .9rem;
}

.cat-ico {
    /* Los pseudo-elementos del pulso se posicionan contra esta caja */
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 16px;
    color: var(--azul);
    background: rgba(44, 108, 176, .1);
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.cat-card:hover .cat-ico {
    background: var(--azul);
    color: #fff;
    transform: rotate(-6deg);
}

/* ---------- Latido de los íconos ----------
   Los siete íconos respiran de forma continua, cada uno desfasado del
   anterior, así que en la rejilla siempre hay algo en movimiento sin que
   nada parpadee. Además, cada ciclo suelta un anillo que se expande.
   Va en el ícono y en sus pseudo-elementos; al pasar el cursor se apaga
   para dejarle el mando al hover. */

.cat-ico::before,
.cat-ico::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

/* Resplandor que crece y se apaga con el latido */
.cat-ico::before {
    background: radial-gradient(circle at 50% 50%, rgba(44, 108, 176, .45) 0%, transparent 70%);
    opacity: 0;
    animation: cat-respira 4.4s ease-in-out infinite;
}

/* Anillo que sale del ícono en cada ciclo */
.cat-ico::after {
    border: 2px solid rgba(44, 108, 176, .55);
    opacity: 0;
    animation: cat-onda 4.4s ease-out infinite;
}

/* El propio ícono sube y baja */
.cat-ico {
    animation: cat-flota 4.4s ease-in-out infinite;
}

/* Cada tarjeta arranca medio segundo después que la anterior: nunca laten
   dos al mismo tiempo y el movimiento recorre la rejilla. */
.cat-grid > :nth-child(1) .cat-ico,
.cat-grid > :nth-child(1) .cat-ico::before,
.cat-grid > :nth-child(1) .cat-ico::after { animation-delay: 0s; }

.cat-grid > :nth-child(2) .cat-ico,
.cat-grid > :nth-child(2) .cat-ico::before,
.cat-grid > :nth-child(2) .cat-ico::after { animation-delay: -.6s; }

.cat-grid > :nth-child(3) .cat-ico,
.cat-grid > :nth-child(3) .cat-ico::before,
.cat-grid > :nth-child(3) .cat-ico::after { animation-delay: -1.2s; }

.cat-grid > :nth-child(4) .cat-ico,
.cat-grid > :nth-child(4) .cat-ico::before,
.cat-grid > :nth-child(4) .cat-ico::after { animation-delay: -1.8s; }

.cat-grid > :nth-child(5) .cat-ico,
.cat-grid > :nth-child(5) .cat-ico::before,
.cat-grid > :nth-child(5) .cat-ico::after { animation-delay: -2.4s; }

.cat-grid > :nth-child(6) .cat-ico,
.cat-grid > :nth-child(6) .cat-ico::before,
.cat-grid > :nth-child(6) .cat-ico::after { animation-delay: -3s; }

.cat-grid > :nth-child(7) .cat-ico,
.cat-grid > :nth-child(7) .cat-ico::before,
.cat-grid > :nth-child(7) .cat-ico::after { animation-delay: -3.6s; }

/* Con el cursor encima manda el hover: el latido se apaga para no pelear
   con el azul sólido de la placa ni con su giro. */
.cat-card:hover .cat-ico,
.cat-card:hover .cat-ico::before,
.cat-card:hover .cat-ico::after {
    animation: none;
    opacity: 0;
}

.cat-card:hover .cat-ico {
    opacity: 1;
}

@keyframes cat-flota {
    0%, 100% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-5px) scale(1.07); }
}

@keyframes cat-respira {
    0%, 100% { opacity: 0; transform: scale(.9); }
    45% { opacity: 1; transform: scale(1.15); }
}

@keyframes cat-onda {
    0% { transform: scale(1); opacity: .7; }
    70%, 100% { transform: scale(2); opacity: 0; }
}

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

    .cat-ico,
    .cat-ico::before,
    .cat-ico::after {
        animation: none;
    }
}

.cat-texto {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex: 1;
    min-width: 0;
}

.cat-nombre {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 17px;
    line-height: 1.2;
    color: var(--navy);
    transition: color .25s ease;
}

.cat-card:hover .cat-nombre {
    color: var(--azul);
}

/* Cuántas fichas hay dentro: ubica el tamaño de la categoría de un vistazo */
.cat-cuenta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: rgba(21, 34, 58, .4);
}

.cat-flecha {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--azul);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .25s ease, transform .25s ease;
}

.cat-card:hover .cat-flecha {
    opacity: .85;
    transform: translateX(0);
}

.cat-resumen {
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(21, 34, 58, .7);
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(21, 34, 58, .08);
}

.cat-lista {
    display: grid;
    gap: .1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cat-lista a {
    display: block;
    padding: .3rem .5rem;
    margin-left: -.5rem;
    border-radius: 8px;
    font-size: 13.5px;
    color: rgba(21, 34, 58, .82);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.cat-lista a:hover {
    background: rgba(44, 108, 176, .08);
    color: var(--azul);
    transform: translateX(3px);
}

/* ---------- Lista de sucursales ----------
   La lista tiene altura máxima y se desplaza por dentro. La barra se
   estiliza para que se note que hay más contenido: con la del sistema, en
   pantallas chicas parecía que la lista terminaba donde se cortaba. */

.lista-suc {
    scrollbar-width: thin;
    scrollbar-color: rgba(44, 108, 176, .35) transparent;
    /* Frena el rebote del scroll hacia la página al llegar al final */
    overscroll-behavior: contain;
}

.lista-suc::-webkit-scrollbar {
    width: 6px;
}

.lista-suc::-webkit-scrollbar-track {
    background: transparent;
}

.lista-suc::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: rgba(44, 108, 176, .3);
}

.lista-suc::-webkit-scrollbar-thumb:hover {
    background: rgba(44, 108, 176, .55);
}

/* ---------- Utilidades ---------- */

.link-social {
    transition: transform .25s ease, color .25s ease;
}

.link-social:hover {
    transform: translateY(-3px);
    color: var(--cielo);
}

::selection {
    background: var(--cielo);
    color: var(--ink);
}

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

.no-scroll {
    overflow: hidden;
}

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}