/* =============================================================
   ENSUTEX — MOBILE UX/UI REFINEMENT (2026)
   Solo afecta a pantallas móviles. Diseño desktop intacto.
   ============================================================= */

/* ----- 0. HEADER COMPARTIDO: estabilidad visual sin CLS ----- */
.ensutex-site-nav {
    font-family: 'Readex Pro', system-ui, 'Segoe UI', Arial, sans-serif;
    contain: layout style;
}

/* Conversación y captura interna: el usuario puede cotizar sin salir a
   WhatsApp. Se usa en todas las páginas que cargan chatbot.js. */
.chat-lead-form { display: grid; gap: .65rem; width: 100%; }
.chat-lead-form label { display: grid; gap: .3rem; color: #343a43; font-size: .72rem; font-weight: 750; }
.chat-lead-form input,
.chat-lead-form select,
.chat-lead-form textarea {
  width: 100%; min-height: 2.7rem; padding: .65rem .72rem; border: 1px solid #ccd2d9;
  border-radius: .75rem; background: #fff; color: #101318; font: inherit; font-size: .85rem;
}
.chat-lead-form textarea { min-height: 4.4rem; resize: vertical; }
.chat-lead-form input:focus,
.chat-lead-form select:focus,
.chat-lead-form textarea:focus { outline: 3px solid rgba(24,189,213,.22); border-color: #18bdd5; }
.chat-lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.chat-lead-form button[type="submit"] {
  min-height: 2.9rem; padding: .7rem 1rem; border: 0; border-radius: 999px;
  background: #080b0e; color: #fff; font-size: .8rem; font-weight: 800;
}
.chat-lead-form button[type="submit"]:hover { background: #18bdd5; color: #061417; }
.chat-lead-form button[type="submit"]:disabled { opacity: .55; cursor: wait; }
.chat-lead-form__status { margin: 0; color: #9b341f; font-size: .72rem; line-height: 1.4; }

@media (max-width: 420px) {
  .chat-lead-form__row { grid-template-columns: 1fr; }
}
.ensutex-site-nav .ensutex-brand-logo {
    width: auto;
    height: 3rem;
    flex: 0 0 auto;
}
.ensutex-site-nav .ensutex-brand-text {
    letter-spacing: 0.25em;
}
.ensutex-nav-menu {
    gap: clamp(1.25rem, 2vw, 1.75rem);
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
.ensutex-nav-menu a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    letter-spacing: 0;
    text-transform: none;
}
.ensutex-nav-menu > a:not(.ensutex-nav-cta),
.ensutex-nav-menu > div > a {
    color: #d4d4d8;
}
.ensutex-nav-menu > a:not(.ensutex-nav-cta):hover,
.ensutex-nav-menu > div > a:hover {
    color: #ffffff;
}
.ensutex-nav-cta {
    min-width: 15.75rem;
    min-height: 2.75rem;
    justify-content: center;
    border-radius: 9999px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}
.ensutex-nav-menu .nav-chevron {
    width: 0.48rem;
    height: 0.48rem;
    margin-left: 0.42rem;
    margin-top: -0.16rem;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}
.ensutex-nav-menu .group > div a {
    min-height: 2.25rem;
    font-size: 0.875rem;
    font-weight: 600;
}
.ensutex-nav-menu .group > [aria-label="Accesos rapidos del catalogo"] {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(-0.25rem) !important;
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms !important;
    will-change: opacity, transform;
}
.ensutex-nav-menu .group > [aria-label="Accesos rapidos del catalogo"]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.9rem;
    height: 0.9rem;
}
.ensutex-nav-menu .group:hover > [aria-label="Accesos rapidos del catalogo"],
.ensutex-nav-menu .group:focus-within > [aria-label="Accesos rapidos del catalogo"],
.ensutex-nav-menu .group.is-nav-open > [aria-label="Accesos rapidos del catalogo"] {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
    transition-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
    .ensutex-nav-menu .group > [aria-label="Accesos rapidos del catalogo"] {
        transition: none !important;
    }
}
.material-symbols-outlined.hidden,
.hidden.material-symbols-outlined {
    display: none !important;
}

/* Los iconos de acordeón deben conservar una escala estable aunque falle Tailwind. */
details > summary svg {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    flex: 0 0 20px !important;
}

/* ----- 0. BASE: prevenir desbordes horizontales en móvil ----- */
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    img, video, table, iframe { max-width: 100%; }
}

/* Zonas táctiles reales también en teléfono apaisado y tablets compactas. */
@media (max-width: 844px) {
    footer a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-inline: 0.25rem;
    }
    #deporte-dots button,
    #folklor-dots button {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ----- 1. HEADER / NAVBAR MOBILE ----- */
@media (max-width: 767px) {
    /* Logo más compacto, sin desbordar */
    .ensutex-site-nav .ensutex-brand-logo {
        height: 2.25rem;
    }
    nav .h-12 { height: 2.25rem; }
    nav .h-20 { height: 4rem !important; }
    nav .h-10 { height: 2rem; }
    /* Botón hamburguesa con buen tap target */
    #mobileMenuBtn {
        min-width: 5.4rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 70;
        gap: 0.45rem;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
    }
    #mobileMenuBtn::after {
        display: block;
        content: 'Menú';
        font-size: 0.62rem;
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    .hamburger-bars {
        width: 1.2rem;
        height: 0.92rem;
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        flex-shrink: 0;
        color: currentColor;
    }
    .hamburger-bars span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .hamburger-bars.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    .hamburger-bars.is-open span:nth-child(2) {
        opacity: 0;
    }
    .hamburger-bars.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
    /* Drawer animado, sin saltos */
    #mobileDrawer {
        max-height: calc(100dvh - 4rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
        position: relative;
        z-index: 60;
    }
    /* Backdrop opcional cuando el drawer está abierto */
    body.menu-open {
        overflow: hidden;
        touch-action: none;
    }
    body.menu-open::before {
        content: '';
        position: fixed;
        inset: 0;
        top: 4rem;
        background: rgba(0, 0, 0, 0.35);
        z-index: 40;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        animation: backdropFade 0.25s ease;
    }
    @keyframes backdropFade {
        from { opacity: 0; } to { opacity: 1; }
    }
    /* Items del menú con mejor área táctil y separación */
    #mobileDrawer a {
        min-height: 48px;
        font-size: 1rem;
        line-height: 1.4;
        display: flex;
        align-items: center;
    }
}

@media (min-width: 1024px) {
    #mobileMenuBtn,
    #mobileDrawer {
        display: none !important;
    }
}

/* ----- 2. HERO SECTION MOBILE ----- */
@media (max-width: 767px) {
    section.relative.pt-20 {
        padding-top: 5rem;
    }
    /* Headline hero: tamaño más legible y line-height mejorado */
    h2.text-3xl.sm\:text-4xl {
        font-size: clamp(1.7rem, 7vw, 2.25rem);
        line-height: 1.08;
        letter-spacing: -0.02em;
        margin-bottom: 1rem;
    }
    /* H1 técnico oculto/legible */
    h1.text-\[11px\] {
        font-size: 0.625rem;
        letter-spacing: 0.18em;
    }
    /* Hero showreel: dimensiones controladas */
    #hero-showreel {
        max-width: 100%;
    }
    /* CTAs hero apilados con buen espaciado */
    .flex.flex-col.sm\:flex-row.gap-4 a {
        font-size: 0.85rem;
        padding: 0.95rem 1.25rem;
    }
    #hero-section > .relative.z-10 {
        padding-top: 2.25rem !important;
        padding-bottom: 2.5rem !important;
    }
}

/* ----- 3. TIPOGRAFÍA Y SECCIONES ----- */
@media (max-width: 767px) {
    /* Reducir tamaños desproporcionados */
    h2.text-4xl.lg\:text-5xl,
    h2.text-3xl.lg\:text-5xl,
    h3.text-4xl.md\:text-5xl,
    h3.text-4xl.md\:text-6xl {
        font-size: clamp(1.7rem, 6vw, 2.1rem);
        line-height: 1.1;
        letter-spacing: -0.02em;
    }
    h2.text-3xl.lg\:text-4xl {
        font-size: clamp(1.5rem, 5.5vw, 1.9rem);
        line-height: 1.15;
    }
    /* Padding vertical de secciones más respirado */
    section.py-24 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    section.py-20 { padding-top: 3rem; padding-bottom: 3rem; }
    section.py-16 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    /* Eliminar trackings exagerados que rompen líneas */
    .tracking-\[0\.35em\],
    .tracking-\[0\.3em\] {
        letter-spacing: 0.18em;
    }
    .tracking-tighter { letter-spacing: -0.02em; }
}

/* ----- 4. PROCESO / TIMELINE ----- */
@media (max-width: 767px) {
    /* Compactar para evitar estirado vertical excesivo */
    section#proceso { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    section#proceso .grid.grid-cols-1.md\:grid-cols-3 { gap: 2.5rem; }
    /* Círculos del paso más pequeños */
    section#proceso .w-20.h-20 {
        width: 3.75rem;
        height: 3.75rem;
    }
    section#proceso .w-20.h-20 .material-symbols-outlined { font-size: 1.5rem !important; }
    /* Badge numerico */
    section#proceso .absolute.-top-2.-right-2 {
        width: 1.5rem !important;
        height: 1.5rem !important;
        font-size: 0.7rem !important;
    }
    /* Title de cada paso */
    section#proceso h3.text-xl {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.75rem !important;
    }
    section#proceso .max-w-xs {
        max-width: 100%;
        padding: 0 0.75rem;
        font-size: 0.85rem;
        line-height: 1.5;
    }
    /* Margen superior reducido para acercar elementos */
    section#proceso .mb-6 { margin-bottom: 1rem !important; }
    section#proceso .mt-4 { margin-top: 0.85rem !important; }
    /* Banda de confianza inferior compacta */
    section#proceso .mt-20 { margin-top: 2rem !important; }
    section#proceso .px-8.py-6 { padding: 1rem !important; }
    /* Showcase mockups: alturas exageradas */
    section#proceso .h-\[500px\] { height: 240px !important; }
    section#proceso .grid.grid-cols-1.sm\:grid-cols-2.gap-8 { gap: 0.75rem !important; }
    section#proceso .mt-16 { margin-top: 1.5rem !important; }
    /* Ocultar el rótulo "Paso 1/2/3" superior redundante (ya hay el badge numérico) */
    section#proceso span.text-\[10px\].font-black.text-primary.uppercase.tracking-\[0\.3em\].mb-2 {
        font-size: 0.55rem !important;
        margin-bottom: 0.5rem !important;
    }
    /* Header de la sección compactado */
    section#proceso .mb-20 { margin-bottom: 2rem !important; }
}

/* ----- 5. CATÁLOGO ----- */
@media (max-width: 767px) {
    #cat-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }
    #cat-grid .cat-card {
        font-size: 0.85rem;
    }
    #cat-grid h3 {
        font-size: 0.78rem;
        line-height: 1.15;
    }
    #cat-grid .text-\[10px\] { font-size: 0.55rem; letter-spacing: 0.08em; }
    #cat-grid .text-\[11px\] { font-size: 0.62rem; }
    #cat-grid .p-5 {
        padding: 0.75rem 0.65rem;
    }
    #cat-grid .pt-3 { padding-top: 0.5rem; }
    #cat-grid .text-base { font-size: 0.85rem; }
    /* Pills filtro catálogo: más compactas y scroll horizontal */
    #cat-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding: 0.25rem 0.5rem;
        gap: 0.5rem;
        scrollbar-width: none;
    }
    #cat-tabs::-webkit-scrollbar { display: none; }
    #cat-tabs .cat-tab {
        flex-shrink: 0;
        padding: 0.5rem 0.9rem;
        font-size: 0.65rem;
    }
}

/* ----- 6. SECCIÓN TELAS (tabs + grids Pros/Contras) ----- */
@media (max-width: 767px) {
    /* Tabs telas: scroll horizontal para que no se rompan a varias filas */
    #tab-poleras, #tab-polerones, #tab-shorts {
        font-size: 0.72rem;
        padding-bottom: 0.5rem;
        white-space: nowrap;
    }
    section#telas .flex.justify-center.border-b {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 0.85rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0;
    }
    section#telas .flex.justify-center.border-b::-webkit-scrollbar { display: none; }
    /* Pros/Contras: 1 columna en móvil pequeño para que se lean bien */
    section#telas .grid.grid-cols-2.gap-4.text-xs {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    section#telas .grid.grid-cols-2.gap-4.text-xs > div {
        padding-bottom: 0.85rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    section#telas .grid.grid-cols-2.gap-4.text-xs > div:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }
}

/* ----- 7. PÁGINA ALTERNATIVAS-RETAIL: mejoras tabla móvil ----- */
@media (max-width: 1023px) {
    /* Sección padding más compacto en móvil */
    body section.py-24.px-4.max-w-6xl {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    /* Header (vs) más reducido para mobile */
    section.py-24 h3.text-4xl.md\:text-5xl {
        font-size: clamp(1.85rem, 7vw, 2.3rem);
        line-height: 1.05;
    }
    section.py-24 p.text-lg {
        font-size: 0.95rem;
        line-height: 1.45;
    }
    /* Reducir margen del header de comparación */
    section.py-24 .text-center.mb-16 {
        margin-bottom: 2rem;
    }
    /* La sección de comparación móvil usa cards (lg:hidden); texto más legible */
    .lg\:hidden.space-y-4 article p {
        font-size: 0.68rem;
        line-height: 1.3;
        margin-top: 0.2rem !important;
    }
    .lg\:hidden.space-y-4 article strong {
        font-size: 0.88rem;
        line-height: 1.15;
        display: block;
    }
    .lg\:hidden.space-y-4 article .px-4.py-3.text-xs {
        font-size: 0.62rem;
        padding: 0.6rem 0.85rem;
    }
    .lg\:hidden.space-y-4 article .grid.grid-cols-2 > div {
        padding: 0.85rem 0.75rem !important;
    }
    .lg\:hidden.space-y-4 article .text-\[10px\] {
        font-size: 0.55rem;
        margin-bottom: 0.25rem !important;
    }
    /* Cabecera card "ENSUTEX" */
    .lg\:hidden .bg-black.text-white.rounded-2xl.p-5 {
        padding: 1rem;
    }
    .lg\:hidden h4.font-display.text-2xl {
        font-size: 1.4rem;
    }
}

/* FORZAR ocultamiento de la grilla desktop de comparación en mobile/tablet
   (Tailwind 'hidden lg:grid' a veces no aplica si la CDN tarda; aseguramos visualmente). */
@media (max-width: 1023px) {
    section.py-24 .hidden.lg\:grid,
    section.py-24 > .relative.z-10.hidden.lg\:grid {
        display: none !important;
    }
    /* Los hijos de columna 1 (Características) explícitamente ocultos en mobile */
    section.py-24 .hidden.lg\:flex {
        display: none !important;
    }
    /* Y el "lg:hidden" de las cards mobile siempre visible */
    section.py-24 > .relative.z-10.lg\:hidden,
    section.py-24 .relative.z-10.lg\:hidden.space-y-4 {
        display: block !important;
    }
}

/* En móviles muy estrechos (≤370px), apilar verticalmente Ensutex vs Retail */
@media (max-width: 370px) {
    .lg\:hidden.space-y-4 article .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    .lg\:hidden.space-y-4 article .grid.grid-cols-2.divide-x {
        --tw-divide-x-reverse: 0;
        border-left: 0;
    }
    .lg\:hidden.space-y-4 article .grid.grid-cols-2 > div + div {
        border-left: 0;
        border-top: 1px solid #e4e4e7;
    }
}

/* ----- 8. TABLAS COMPARATIVAS BLOG ----- */
@media (max-width: 767px) {
    /* Tabla en blog/tela-shelsey-vs-panal-deportes: ajustar padding y tamaño */
    .prose .overflow-x-auto.not-prose table {
        white-space: normal;
        font-size: 0.78rem;
    }
    .prose .overflow-x-auto.not-prose table th,
    .prose .overflow-x-auto.not-prose table td {
        padding: 0.55rem 0.5rem !important;
        word-break: break-word;
        hyphens: auto;
    }
    .prose .overflow-x-auto.not-prose table th {
        font-size: 0.7rem;
    }
    /* Hint visual de scroll si la tabla excede */
    .prose .overflow-x-auto.not-prose {
        position: relative;
        -webkit-overflow-scrolling: touch;
    }
    .prose .overflow-x-auto.not-prose::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.95));
        pointer-events: none;
        opacity: 0.85;
    }
    /* Header del blog article */
    .prose h1 {
        font-size: 1.85rem !important;
        line-height: 1.1 !important;
    }
    .prose h2 { font-size: 1.4rem !important; line-height: 1.15 !important; }
    .prose h3 { font-size: 1.15rem !important; line-height: 1.2 !important; }
    .prose p, .prose li { font-size: 0.95rem; line-height: 1.6; }
}

/* ----- 9. COTIZADOR EXPRESS ----- */
@media (max-width: 767px) {
    section#cotizador-express .grid.grid-cols-1.md\:grid-cols-2 {
        gap: 1.25rem;
    }
    section#cotizador-express .p-6.md\:p-10 { padding: 1rem; }
    section#cotizador-express select.w-full {
        font-size: 0.85rem;
        padding: 0.65rem 0.85rem;
    }
    /* Resumen: numbers no se cortan */
    section#cotizador-express .text-3xl.font-black { font-size: 1.55rem; }
    section#cotizador-express .text-2xl { font-size: 1.4rem; }
}

/* ----- 10. GUARANTEE / VALOR / CONTACT ----- */
@media (max-width: 767px) {
    /* Footer 4-col → 2-col sano */
    section .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    section .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-4 .p-6 {
        padding: 1rem;
    }
    /* Contacto: links de WhatsApp/Mail/Instagram con buen tap */
    section#contacto .flex.items-center.gap-4 {
        gap: 0.85rem;
    }
}

/* ----- 11. STICKY CTA MOBILE: que no tape contenido ni overlaps ----- */
#sticky-cta-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 80;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: none;
    gap: 0.5rem;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#sticky-cta-mobile.is-visible {
    transform: translateY(0);
}
@media (max-width: 767px) {
    body.has-sticky-cta { padding-bottom: 78px; }
    #sticky-cta-mobile {
        display: flex;
        padding: 0.6rem 0.65rem calc(0.6rem + env(safe-area-inset-bottom));
        gap: 0.4rem;
    }
    #sticky-cta-mobile a {
        font-size: 0.7rem !important;
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }
}

/* ----- 12. CARROUSEL DISEÑOS ----- */
@media (max-width: 767px) {
    #carousel-main { border-radius: 0.5rem; }
    #carousel-main > div[style*="height"] {
        height: min(60vh, 480px) !important;
        min-height: 320px !important;
    }
    /* Botones nav más pequeños y mejor posicionados */
    #carousel-main button[onclick*="prevSlide"],
    #carousel-main button[onclick*="nextSlide"] {
        width: 2.6rem !important;
        height: 2.6rem !important;
    }
    #carousel-main button .material-symbols-outlined {
        font-size: 1.4rem !important;
    }
}

/* ----- 13. FOOTER mobile ----- */
@media (max-width: 767px) {
    footer .flex.justify-center.gap-4 a {
        width: 2.5rem;
        height: 2.5rem;
    }
    footer p.text-xs {
        font-size: 0.65rem;
        line-height: 1.6;
    }
}

/* ----- 14. MODAL / FORMULARIO DISEÑO GRATIS ----- */
@media (max-width: 767px) {
    #modal-diseno .max-w-lg,
    #modal-diseno .max-w-xl {
        max-width: calc(100vw - 1.5rem);
        margin: 0.75rem;
    }
    #modal-diseno input,
    #modal-diseno textarea,
    #modal-diseno select {
        font-size: 16px !important; /* evita zoom auto en iOS */
    }
}

/* ----- 15. POLÍTICA DE PRIVACIDAD ----- */
@media (max-width: 767px) {
    body main.prose,
    main.prose {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ----- 16. CHATBOT y widgets flotantes: limpieza total en mobile ----- */
@media (max-width: 767px) {
    /* Ocultar el pill "DUDAS AQUÍ" en mobile (redundante con sticky CTA) */
    /* Ocultar el WhatsApp flotante: ya está en la barra sticky inferior */
    .floating-widgets > a[href*="wa.me"],
    .floating-widgets > a[aria-label*="WhatsApp" i] {
        display: none !important;
    }
    /* Mantener solo el chatbot trigger, posicionado arriba del sticky bar sin chocar */
    .floating-widgets {
        bottom: calc(8.75rem + env(safe-area-inset-bottom)) !important;
        right: 0.85rem !important;
        gap: 0.5rem !important;
    }
    #chatbot-trigger {
        width: 3rem !important;
        height: 3rem !important;
    }
    #chatbot-trigger .material-symbols-outlined {
        font-size: 1.4rem !important;
    }
    /* Notif badge más pequeño */
    #chatbot-notif {
        width: 0.65rem !important;
        height: 0.65rem !important;
        border-width: 1.5px !important;
    }
    /* Panel del chatbot anclado arriba de la sticky bar */
    #chatbot-panel,
    #chatbot-window {
        bottom: calc(5.25rem + env(safe-area-inset-bottom)) !important;
        max-height: calc(100dvh - 7rem) !important;
        height: calc(100dvh - 7rem) !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
    }
}

/* ----- 17. UTILITIES móvil ----- */
@media (max-width: 767px) {
    /* Imágenes mockup con tamaño contenido */
    .h-\[500px\] { height: 320px !important; }
    .h-\[400px\] { height: 260px !important; }
    /* Reducir gap exagerados */
    .gap-12 { gap: 1.5rem !important; }
    .gap-16 { gap: 2rem !important; }
    .gap-10 { gap: 1.25rem !important; }
    /* Padding lateral consistente */
    .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    /* Botones de ancho 100% por defecto en mobile */
    .inline-flex.items-center.justify-center.gap-2[class*="px-8"],
    button[class*="px-8"] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ----- 18. EVITAR scroll horizontal por elementos con margin-x negativo ----- */
@media (max-width: 767px) {
    .lg\:-translate-x-6,
    .xl\:-translate-x-10 {
        transform: none !important;
    }
}

/* ----- 19. LANDINGS DEPORTIVO / FOLKLORICO ----- */
@media (max-width: 767px) {
    /* Hero más contenido */
    main.pt-20 section.relative.min-h-\[90vh\] {
        min-height: auto !important;
        padding-top: 1rem;
        padding-bottom: 2rem;
    }
    /* H1 de landings: ajustar tamaño para no romper layout */
    main.pt-20 h1.text-5xl.md\:text-7xl {
        font-size: clamp(2.1rem, 9vw, 3rem);
        line-height: 1.05;
        letter-spacing: -0.02em;
    }
    main.pt-20 p.text-xl.md\:text-2xl {
        font-size: 1.05rem;
        line-height: 1.4;
    }
    main.pt-20 p.text-xl {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    /* Video aspect-ratio del hero deportivo: tamaño contenido */
    main.pt-20 .relative.w-full.max-w-\[360px\] {
        max-width: 240px;
        margin: 0 auto;
    }
    /* CTA principal landings */
    main.pt-20 a.bg-black.text-white.font-black.text-lg {
        font-size: 0.95rem;
        padding: 1rem 1.5rem;
    }
    /* Container con padding mejor en mobile */
    main.pt-20 .container.mx-auto.px-6 { padding-left: 1rem; padding-right: 1rem; }
    /* Cards grid 4 columnas → 2 en mobile */
    main.pt-20 .grid.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    main.pt-20 .grid.md\:grid-cols-2.lg\:grid-cols-4 .p-6 { padding: 1rem; }
    main.pt-20 .grid.md\:grid-cols-2.lg\:grid-cols-4 h3 {
        font-size: 0.78rem;
        line-height: 1.15;
    }
    main.pt-20 .grid.md\:grid-cols-2.lg\:grid-cols-4 p { font-size: 0.7rem; }
    /* "El escudo exige respeto" — cards problema/solución apilados */
    main.pt-20 .grid.md\:grid-cols-2.gap-8 .p-12 {
        padding: 1.25rem;
    }
}

/* ----- 20. PROSE / BLOG: legibilidad en mobile ----- */
@media (max-width: 767px) {
    main.prose.prose-lg, main.max-w-3xl.prose {
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 100%;
    }
    main.prose ul, main.prose ol {
        padding-left: 1.25rem;
    }
    main.prose .bg-zinc-50.p-8 { padding: 1.25rem; }
    main.prose hr.my-10 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
}

/* ----- 21. BLOG INDEX: cards y header ----- */
@media (max-width: 767px) {
    body.antialiased nav.fixed .h-20 { height: 4rem !important; }
    body.antialiased nav.fixed .h-10 { height: 2.25rem; }
}

/* ----- 22. TOUCH TARGETS: carrusel dots + sticky CTA + botones nav ----- */
@media (max-width: 767px) {
    /* Dots del carrusel en landings — touch target mínimo 44px */
    #deporte-dots button,
    #folklor-dots button {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: transparent !important;
    }
    #deporte-dots button {
        width: 44px !important;
        height: 44px !important;
        padding: 0;
        border: none;
    }
    #deporte-dots button::before {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 9999px;
        background-color: #d1d5db;
        transition: background-color 0.3s ease;
    }
    #deporte-dots button.bg-black::before {
        background-color: #000;
    }
    #deporte-dots button.bg-red-600::before,
    #folklor-dots button.bg-red-600::before,
    #folklor-dots button.bg-black::before {
        background-color: #E20613;
    }

    /* Sticky CTA mobile — altura táctil mínima */
    #sticky-cta-mobile a {
        min-height: 44px;
    }

    /* Botones navegación carrusel landings — touch target */
    #deporte-carousel button[class*="absolute"],
    #folklor-carousel button[class*="absolute"] {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ----- 23. ALTERNATIVAS-RETAIL: padding inferior para nav sticky ----- */
@media (max-width: 767px) {
    body:has(nav.sticky) {
        padding-bottom: 5rem;
    }
}

/* ----- 24. HOME/CATALOGO mobile: animacion y copy dentro de cajas ----- */
@media (max-width: 767px) {
    #diseno-gratis-box.box-grow-container,
    #cotizador-box.box-grow-container {
        transform: scale(0.9) translateY(26px);
        transform-origin: center center;
        transition: transform 0.56s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.42s ease;
        will-change: transform, opacity;
    }

    #diseno-gratis-box.box-grow-container.box-grow-in,
    #cotizador-box.box-grow-container.box-grow-in {
        transform: scale(1) translateY(0);
    }

    #diseno-gratis-box h1,
    #diseno-gratis-box h2,
    #diseno-gratis-box h3,
    #diseno-gratis-box p,
    #cotizador-box h1,
    #cotizador-box h2,
    #cotizador-box h3,
    #cotizador-box p,
    #cotizador-box button,
    #cotizador-box a {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    #diseno-gratis-box h2,
    #cotizador-box h2 {
        font-size: clamp(1.45rem, 7vw, 1.95rem);
        line-height: 1.08;
    }
}

/* ----- 24. HOME: cajas animadas coherentes en mobile ----- */
@media (max-width: 767px) {
    #diseno-gratis-box.box-grow-container,
    #cotizador-box.box-grow-container {
        transform: scale(0.88) translateY(30px);
        transition-duration: 0.62s, 0.82s;
    }
    #diseno-gratis-box.box-grow-container.box-grow-in,
    #cotizador-box.box-grow-container.box-grow-in {
        transform: scale(1) translateY(0);
    }
    #diseno-gratis,
    #cotizador-express {
        scroll-margin-top: 5rem;
    }
}

/* ----- 25. CHATBOT: experiencia conversacional unificada ----- */
.chatbot-trigger-fixed {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.chatbot-trigger-fixed:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.26);
}
.chatbot-trigger-fixed .chatbot-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.chatbot-trigger-fixed .hidden {
    display: none !important;
}
.chatbot-trigger-fixed #chatbot-icon-close {
    font-size: 2rem;
    color: #111111;
    font-weight: 900;
    line-height: 1;
}
.chatbot-panel-close {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}
.chatbot-panel-close:hover {
    background: rgba(255, 255, 255, 0.1);
}
.chatbot-trigger-fixed .chatbot-notif,
.chatbot-trigger-fixed #chatbot-notif {
    position: absolute;
    top: 0.34rem;
    right: 0.34rem;
    width: 0.78rem;
    height: 0.78rem;
    border-radius: 9999px;
    background: #ef4444;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.chatbot-cta-fixed {
    position: absolute;
    right: 4.85rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border-radius: 9999px;
    background: #0a0a0a;
    color: #ffffff;
    padding: 0.72rem 0.95rem;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}
.chatbot-cta-short {
    display: none;
}
.chatbot-cta-fixed::after {
    content: "";
    position: absolute;
    right: -0.42rem;
    top: 50%;
    width: 0.85rem;
    height: 0.85rem;
    background: #0a0a0a;
    transform: translateY(-50%) rotate(45deg);
}
#chatbot-panel {
    border-radius: 10px !important;
}
#chat-messages {
    scrollbar-width: thin;
}
.chat-message-avatar {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 9999px;
    overflow: hidden;
    flex-shrink: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.chat-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.chat-bubble {
    max-width: min(86%, 34rem);
    border-radius: 1rem;
    padding: 0.72rem 0.86rem;
    font-size: 0.92rem;
    line-height: 1.55;
}
.chat-bubble-bot {
    border-top-left-radius: 0.25rem;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #27272a;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.05);
}
.chat-bubble-user {
    border-top-right-radius: 0.25rem;
    background: #0a0a0a;
    color: #ffffff;
    font-weight: 700;
}
.chat-answer-note {
    margin-top: 0.65rem;
    padding-top: 0.6rem;
    border-top: 1px solid #e5e7eb;
    color: #71717a;
    font-size: 0.78rem;
    line-height: 1.45;
}
.chat-input-form {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.72rem;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}
.chat-input-form input {
    flex: 1;
    min-width: 0;
    min-height: 2.65rem;
    border: 1px solid #d4d4d8;
    border-radius: 9999px;
    padding: 0.7rem 0.95rem;
    font-size: 0.9rem;
    outline: none;
}
.chat-input-form input:focus {
    border-color: #0a0a0a;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}
.chat-input-form button {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 9999px;
    background: #0a0a0a;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#chat-options-wrap {
    border-top: 1px solid #1f1f1f !important;
    background: #0b0b0b !important;
}
#chat-options {
    background: #0b0b0b;
}
.chat-options-title {
    width: 100%;
    margin-bottom: 0.25rem;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
#chat-options-wrap[data-overflow="true"]::before {
    display: none !important;
    content: none !important;
}
.chat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9999px;
    background: transparent;
    color: #ffffff;
    padding: 0.52rem 0.72rem;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.15;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.chat-chip:hover {
    border-color: #ffffff;
    background: #ffffff;
    color: #000000;
}
.chat-chip-primary {
    border-color: #25D366;
    background: #25D366;
    color: #052e16;
}
.chat-chip-muted {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}
.chat-chip-strong {
    background: #E20613;
    border-color: #E20613;
    color: #ffffff;
}
.chat-typing {
    display: inline-flex;
    gap: 0.24rem;
    align-items: center;
    min-height: 2.2rem;
}
.chat-typing span {
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 9999px;
    background: #71717a;
    animation: chatTypingPulse 0.9s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.12s; }
.chat-typing span:nth-child(3) { animation-delay: 0.24s; }
@keyframes chatTypingPulse {
    0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
}

@media (max-width: 767px) {
    .chatbot-trigger-fixed {
        width: 3.1rem !important;
        height: 3.1rem !important;
    }
    .chatbot-cta-fixed {
        right: 0;
        top: auto;
        bottom: calc(100% + 0.4rem);
        transform: none;
        padding: 0.38rem 0.56rem;
        font-size: 0.58rem;
        letter-spacing: 0.02em;
        display: inline-flex !important;
        max-width: 5.6rem;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    }
    .chatbot-cta-fixed::after {
        right: 1.1rem;
        top: auto;
        bottom: -0.32rem;
        width: 0.64rem;
        height: 0.64rem;
        transform: rotate(45deg);
    }
    .chatbot-cta-full {
        display: none;
    }
    .chatbot-cta-short {
        display: inline;
    }
    #chatbot-panel {
        bottom: calc(4.8rem + env(safe-area-inset-bottom)) !important;
        left: 0.65rem !important;
        right: 0.65rem !important;
        width: auto !important;
        height: min(76dvh, 42rem) !important;
        max-height: calc(100dvh - 6.2rem) !important;
        border-radius: 12px !important;
    }
    .chat-bubble {
        max-width: 88%;
        font-size: 0.88rem;
        padding: 0.66rem 0.78rem;
    }
    .chat-input-form {
        padding: 0.6rem;
        gap: 0.45rem;
    }
    .chat-input-form input {
        min-height: 2.55rem;
        font-size: 16px;
        padding-left: 0.82rem;
        padding-right: 0.82rem;
    }
    .chat-input-form button {
        width: 2.55rem;
        height: 2.55rem;
    }
    #chat-options {
        max-height: 7.8rem !important;
        flex-wrap: wrap !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 0.65rem !important;
        scrollbar-width: none;
    }
    #chat-options::-webkit-scrollbar {
        display: none;
    }
    .chat-options-title {
        flex-basis: 100%;
        margin-right: 0.3rem;
    }
    .chat-chip {
        flex-shrink: 0;
        max-width: 16rem;
        white-space: nowrap;
    }
}

/* ----- 22. TOUCH TARGETS: carrusel dots + sticky CTA + botones nav ----- */
@media (max-width: 767px) {
    /* Dots del carrusel en landings — touch target mínimo 44px */
    #deporte-dots button,
    #folklor-dots button {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: transparent !important;
    }
    #deporte-dots button {
        width: 44px !important;
        height: 44px !important;
        padding: 0;
        border: none;
    }
    #deporte-dots button::before {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 9999px;
        background-color: #d1d5db;
        transition: background-color 0.3s ease;
    }
    #deporte-dots button.bg-black::before {
        background-color: #000;
    }
    #deporte-dots button.bg-red-600::before,
    #folklor-dots button.bg-red-600::before,
    #folklor-dots button.bg-black::before {
        background-color: #E20613;
    }

    /* Sticky CTA mobile — altura táctil mínima */
    #sticky-cta-mobile a {
        min-height: 44px;
    }

    /* Botones navegación carrusel landings — touch target */
    #deporte-carousel button[class*="absolute"],
    #folklor-carousel button[class*="absolute"] {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ----- 23. ALTERNATIVAS-RETAIL: padding inferior para nav sticky ----- */
@media (max-width: 767px) {
    body:has(nav.sticky) {
        padding-bottom: 5rem;
    }
}



/* Safe typography rules: balance without cutting words */
h1, h2, h3, .font-display {
  text-wrap: balance;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}
p, .font-body {
  text-wrap: pretty;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}
.hero-reveal-item, .section-kicker, [id^="ty-kicker"], .blog-kicker {
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
}

/* ----- 26. ANDROID / MATERIAL 3: thumb reach, safe areas and form continuity ----- */
.lead-form-feedback[data-state="error"] {
    color: #b91c1c;
}
.lead-form-feedback[data-state="success"] {
    color: #166534;
}

@media (max-width: 767px) {
    html {
        scroll-padding-bottom: calc(5.25rem + env(safe-area-inset-bottom));
    }
    body {
        padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)) !important;
        -webkit-tap-highlight-color: transparent;
    }
    a,
    button,
    input,
    select,
    textarea,
    summary {
        touch-action: manipulation;
    }

    #sticky-cta-mobile {
        min-height: 68px;
        align-items: center;
        padding: 0.62rem max(0.75rem, env(safe-area-inset-left)) calc(0.62rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-right));
        gap: 0.55rem;
        background: rgba(10, 10, 10, 0.96);
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.18);
        will-change: transform;
    }
    #sticky-cta-mobile a {
        min-height: 48px;
        text-decoration: none;
    }
    #sticky-cta-mobile .mobile-quick-link {
        width: 48px;
        flex: 0 0 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.24);
        border-radius: 8px;
        color: #ffffff;
        background: transparent;
    }
    #sticky-cta-mobile .mobile-whatsapp-cta {
        min-width: 0;
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        border-radius: 8px;
        padding: 0.7rem 0.9rem;
        background: #25d366;
        color: #052e16;
        font-size: 0.78rem !important;
        font-weight: 900;
        line-height: 1.1;
        letter-spacing: 0;
        text-transform: uppercase;
    }
    body.contact-step-active #sticky-cta-mobile {
        transform: translateY(110%);
        pointer-events: none;
    }
    body.lead-form-in-view #sticky-cta-mobile {
        transform: translateY(110%);
        pointer-events: none;
    }
    body.lead-form-in-view .floating-widgets {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #contacto > .max-w-7xl {
        row-gap: 1.25rem !important;
    }
    #contacto .contact-intro p:last-child {
        margin-bottom: 0 !important;
    }
    #form-cotizador {
        gap: 1.25rem !important;
        border-radius: 12px;
        scroll-margin-top: 4.75rem;
    }
    #form-cotizador h3 {
        opacity: 1 !important;
        transform: none !important;
        color: #111827;
    }
    #form-cotizador input:not([type="checkbox"]),
    #form-cotizador select,
    #form-cotizador textarea {
        min-height: 52px;
        font-size: 16px !important;
    }
    #form-cotizador button {
        min-height: 48px;
    }
    .contact-links {
        margin-top: 0.25rem;
    }

    .floating-widgets {
        bottom: 1.5rem !important;
    }
    body:has(#sticky-cta-mobile.is-visible) .floating-widgets {
        bottom: calc(5.5rem + env(safe-area-inset-bottom)) !important;
    }
    #chatbot-cta {
        display: none !important;
    }

}

/* ----- 27. FLUJO UNICO: catálogo, cotizador, diseño gratis ----- */
.lead-magnet-flow {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.lead-magnet-flow li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1.1rem 0;
    border-bottom: 1px solid #e5e7eb;
}
.lead-magnet-flow li > span {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0a0a0a;
    color: #ffffff;
    font-weight: 900;
}
.lead-magnet-flow strong {
    display: block;
    color: #111827;
    font-size: 1rem;
}
.lead-magnet-flow p {
    margin: 0.25rem 0 0;
    color: #52525b;
    line-height: 1.55;
}
.contact-link-icon {
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0a0a0a;
    color: #ffffff;
    line-height: 1;
}
.contact-link-icon .material-symbols-outlined {
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
}

@media (max-width: 1023px) {
    #mobileDrawer .mobile-catalog-primary {
        min-height: 3.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #ffffff;
        border-radius: 6px;
        background: #ffffff;
        color: #0a0a0a;
        font-weight: 900;
    }
    #mobileDrawer .mobile-catalog-primary span {
        color: #52525b;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
    #mobileDrawer .mobile-catalog-submenu {
        margin: 0.4rem 0 0.75rem;
        padding: 0.75rem;
        border-left: 3px solid #E20613;
        border-radius: 0 6px 6px 0;
        background: #18181b;
    }
    #mobileDrawer .mobile-catalog-submenu a {
        min-height: 2.75rem;
        border-color: #3f3f46;
        background: #27272a;
        color: #f4f4f5;
        font-size: 0.8rem;
        font-weight: 800;
    }
    #mobileDrawer .mobile-catalog-submenu a[href*="cotizador-express"] {
        border-color: #25d366;
        background: #25d366;
        color: #052e16;
    }
}

@media (max-width: 767px) {
    .lead-magnet-flow li {
        grid-template-columns: 2.25rem minmax(0, 1fr);
        gap: 0.85rem;
        padding: 1rem 0;
    }
    .lead-magnet-flow li > span {
        width: 2.25rem;
        height: 2.25rem;
    }
    .contact-link-row {
        align-items: center;
        border-radius: 8px;
    }
    .contact-link-row > span:last-child {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 767px) {
    #mobileMenuBtn::after { display: none !important; content: "" !important; }
    .mobile-menu-label {
        display: inline-block;
        font-size: 0.62rem;
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
}