/* FIXES URGENTES v9.4 - CODIFICANDO */
/* Actualizado: Márgenes amplios en contenedores */

/* ========================================
   0A. MÁRGENES DE CONTENEDOR EN DESKTOP
   - Importante: max-width centrado con márgenes amplios
======================================== */
@media (min-width: 769px) {
    .container {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 100px !important;
        padding-right: 100px !important;
    }
    
    .container-fluid {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 100px !important;
        padding-right: 100px !important;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1200px !important;
        padding-left: 100px !important;
        padding-right: 100px !important;
    }
}

/* ========================================
   0B. BLOQUEO ABSOLUTO DE SCROLL HORIZONTAL
   - clip es más agresivo que hidden
   - Aplicado a TODOS los niveles
======================================== */
html {
    overflow-x: clip !important;
    max-width: 100vw !important;
}

body {
    overflow-x: clip !important;
    max-width: 100% !important;
    position: relative !important;
}

#wrapwrap,
#wrap,
main,
.o_main_content,
header,
footer,
section {
    overflow-x: clip !important;
    max-width: 100% !important;
}

@media (max-width: 991px) {
    /* === CONTENCIÓN RAÍZ MÓVIL === */
    html {
        overflow-x: clip !important;
        overflow-y: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        touch-action: pan-y !important;
    }
    
    body {
        overflow-x: clip !important;
        overflow-y: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: none !important;
    }
    
    #wrapwrap,
    #wrap,
    main,
    .o_main_content {
        overflow-x: clip !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Bloquear scroll cuando menú móvil abierto */
    html.cod-menu-open,
    body.cod-menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        touch-action: none !important;
    }
}

/* ========================================
   1. HAMBURGUESA - DEFINICIÓN ÚNICA Y FINAL
   - Máxima especificidad para anular astra-shop.css
   - SVG inline para icono (no Unicode)
======================================== */
@media (max-width: 991px) {
    /* Reset TOTAL de cualquier estilo previo */
    html body header .cod-hamburger,
    html body header button.cod-hamburger,
    html body header #codHamburger,
    html body .cod-actions .cod-hamburger,
    body #wrapwrap .cod-hamburger,
    body .cod-hamburger,
    .cod-hamburger,
    button.cod-hamburger,
    #codHamburger {
        all: unset !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
        justify-content: center !important;
        align-items: center !important;
        background: #f5f5f5 !important;
        border: 2px solid rgba(0,0,0,0.08) !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        z-index: 10001 !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    /* ICONO: SVG hamburguesa en base64 */
    html body header .cod-hamburger::before,
    html body header button.cod-hamburger::before,
    html body header #codHamburger::before,
    html body .cod-actions .cod-hamburger::before,
    body #wrapwrap .cod-hamburger::before,
    body .cod-hamburger::before,
    .cod-hamburger::before,
    button.cod-hamburger::before,
    #codHamburger::before {
        content: "" !important;
        display: block !important;
        width: 22px !important;
        height: 16px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Crect y='0' width='24' height='3' rx='1.5' fill='%231a1a2e'/%3E%3Crect y='7.5' width='24' height='3' rx='1.5' fill='%231a1a2e'/%3E%3Crect y='15' width='24' height='3' rx='1.5' fill='%231a1a2e'/%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        border: none !important;
        box-shadow: none !important;
        font-size: 0 !important;
        color: transparent !important;
    }
    
    /* ELIMINAR ::after completamente */
    html body header .cod-hamburger::after,
    html body .cod-hamburger::after,
    .cod-hamburger::after,
    #codHamburger::after {
        content: none !important;
        display: none !important;
    }
    
    /* Ocultar TODO contenido interno */
    html body header .cod-hamburger *,
    html body .cod-hamburger *,
    .cod-hamburger *,
    #codHamburger * {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Estado activo - X */
    html body header .cod-hamburger.active,
    html body .cod-hamburger.active,
    .cod-hamburger.active,
    #codHamburger.active {
        background: #242332 !important;
        border-color: #242332 !important;
    }
    
    html body header .cod-hamburger.active::before,
    html body .cod-hamburger.active::before,
    .cod-hamburger.active::before,
    #codHamburger.active::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Touch feedback */
    .cod-hamburger:active,
    #codHamburger:active {
        transform: scale(0.92) !important;
        background: #e0e0e0 !important;
    }
    
    .cod-hamburger.active:active,
    #codHamburger.active:active {
        background: #1a1a2e !important;
    }
}

/* ========================================
   CONTENEDORES EN MÓVIL - SIN VW
======================================== */
@media (max-width: 768px) {
    #wrap,
    main,
    .o_main_content,
    .oe_structure,
    section,
    article,
    header,
    footer,
    nav,
    aside,
    .container,
    .container-fluid,
    .row,
    [class*="col-"],
    .cod-hero,
    .cod-section-dark,
    .cod-section-light,
    .cod-features,
    .cod-pricing,
    .cod-cta,
    .cod-systems,
    .cod-footer {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* === ROWS DE BOOTSTRAP: SIN MÁRGENES NEGATIVOS === */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* === COLUMNAS: PADDING CONTROLADO === */
    [class*="col-"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* === CONTAINER: SIN OVERFLOW === */
    .container,
    .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* === ELEMENTOS QUE PUEDEN CAUSAR OVERFLOW === */
    img, video, iframe, canvas, svg, object, embed, table {
        max-width: 100% !important;
        height: auto !important;
    }
    
    pre, code {
        max-width: 100% !important;
        overflow-x: auto !important;
        word-break: break-word !important;
    }
    
    /* === SCROLL HORIZONTAL DE CARRUSELES: CONTENIDO === */
    .cod-sistemas-scroll {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .cod-sistema-card {
        scroll-snap-align: start !important;
    }
}

/* ========================================
   1. SOLO UNA BARRA DE SCROLL PRINCIPAL
======================================== */

/* HTML es el único que tiene scroll visible */
html {
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    scroll-behavior: smooth !important;
    height: auto !important;
}

/* Body y todo lo demás: visible, sin scroll propio */
body {
    overflow: visible !important;
    height: auto !important;
    min-height: 100vh !important;
}

/* Contenedores principales sin scroll propio */
#wrapwrap,
#wrap,
main,
.cod-wrap,
.o_main_content,
.oe_structure,
.s_website_form,
.o_portal,
.o_website_sale {
    overflow: visible !important;
    height: auto !important;
}

/* GLOBAL: Ocultar TODAS las scrollbars excepto html */
*:not(html):not(textarea):not(pre):not(code) {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

*:not(html):not(textarea):not(pre):not(code)::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* Forzar overflow visible en todos los contenedores */
section,
article,
div,
.container,
.container-fluid,
.row,
.col,
[class*="col-"],
.card,
aside,
nav,
header,
footer,
figure,
.cod-hero,
.cod-section-dark,
.cod-section-light,
.cod-features,
.cod-pricing,
.cod-cta,
.cod-systems,
.cod-showcase,
iframe {
    overflow: visible !important;
}

/* Imágenes y videos responsivos sin causar scroll */
img, video, svg, iframe, object, embed {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* Iframe específico sin scroll */
iframe {
    border: none !important;
    overflow: hidden !important;
}

/* Prevenir overflow horizontal - SOLO en móvil */
@media (max-width: 768px) {
    .container, .container-fluid {
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

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

/* Excepciones: elementos que SÍ necesitan scroll interno */
textarea,
pre,
code,
.o_notebook_content,
.o_form_sheet,
.modal-dialog.modal-lg .modal-body,
.CodeMirror-scroll {
    overflow: auto !important;
    -ms-overflow-style: auto !important;
    scrollbar-width: auto !important;
}

textarea::-webkit-scrollbar,
pre::-webkit-scrollbar,
code::-webkit-scrollbar {
    display: block !important;
    width: auto !important;
}

/* ========================================
   MOCKUP - Sin scrollbars internas
======================================== */
.cod-hero-mockup {
    overflow: visible !important;
    position: relative;
}

/* El col-lg-6 contiene la notificación flotante */
.cod-hero .col-lg-6 {
    position: relative !important;
    overflow: visible !important;
}

.cod-hero .row {
    overflow: visible !important;
}

.cod-mockup-screen,
.cod-mockup-inner,
.cod-mockup-header,
.cod-mockup-body,
.cod-mockup-main,
.cod-mockup-sidebar,
.cod-mockup-card,
.cod-mockup-grid {
    overflow: hidden !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* NUCLEAR: Sin scrollbar en elementos internos del mockup (NO en hijos directos ni botones) */
.cod-mockup-screen > *,
.cod-mockup-inner > *,
.cod-mockup-body > *,
.cod-mockup-sidebar > * {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

.cod-mockup-screen > *::-webkit-scrollbar,
.cod-mockup-inner > *::-webkit-scrollbar,
.cod-mockup-body > *::-webkit-scrollbar,
.cod-mockup-sidebar > *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

.cod-mockup-screen::-webkit-scrollbar,
.cod-mockup-inner::-webkit-scrollbar,
.cod-mockup-header::-webkit-scrollbar,
.cod-mockup-body::-webkit-scrollbar,
.cod-mockup-main::-webkit-scrollbar,
.cod-mockup-sidebar::-webkit-scrollbar,
.cod-mockup-card::-webkit-scrollbar,
.cod-mockup-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Forzar que el mockup no genere scroll */
.cod-mockup-screen {
    max-height: 100% !important;
}

.cod-mockup-sidebar > div[style*="flex: 1"] {
    flex: 0 1 auto !important;
    min-height: 80px !important;
    max-height: 150px !important;
}

/* El div blanco del sidebar - altura fija y sin scrollbar */
.cod-mockup-sidebar > div {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    overflow: hidden !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

.cod-mockup-sidebar > div::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Div con borde específicamente - el que muestra scrollbar */
.cod-mockup-sidebar > div[style*="border"] {
    overflow: hidden !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
    max-height: 120px !important;
}

.cod-mockup-sidebar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* ========================================
   2. HERO SECTION - FONDO OSCURO
======================================== */
.hero-section,
section.hero-section,
#wrapwrap .hero-section,
.cod-hero-section,
.cod-hero {
    background: #242332 !important;
    background-color: #242332 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* HERO TEXTOS BLANCOS - Máxima especificidad para sobrescribir astra-shop.css */
body #wrapwrap .cod-hero h1,
body #wrapwrap .cod-hero .cod-hero-title,
body .cod-hero .cod-hero-title,
.cod-hero .cod-hero-title,
.cod-hero h1,
.cod-hero-title,
.hero-section h1,
.hero-section h2,
.hero-section .hero-title,
.cod-hero-section h1 {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* El span "impulsa" en naranja gradient */
body #wrapwrap .cod-hero .cod-hero-title span,
body #wrapwrap .cod-hero .cod-hero-title .cod-hero-title-gradient,
body .cod-hero .cod-hero-title span,
.cod-hero .cod-hero-title span,
.cod-hero-title span,
.cod-hero-title-gradient {
    background: linear-gradient(135deg, #F28C28 0%, #FCD34D 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: #F28C28 !important;
}

/* Estadísticas del hero */
body #wrapwrap .cod-hero .cod-stat-label,
body .cod-hero .cod-stat-label,
.cod-hero .cod-stat-label {
    color: rgba(255, 255, 255, 0.7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

body #wrapwrap .cod-hero p,
body #wrapwrap .cod-hero .cod-hero-text,
body .cod-hero .cod-hero-text,
.cod-hero .cod-hero-text,
.hero-section p,
.hero-section .hero-subtitle,
.cod-hero-section p,
.cod-hero p,
.cod-hero-text {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

/* ========================================
   BOTONES HERO - VISIBILIDAD
======================================== */
.cod-btn-secondary,
.cod-hero .cod-btn-secondary,
.cod-hero a.cod-btn-secondary {
    color: white !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    -webkit-text-fill-color: white !important;
}

.cod-btn-secondary span,
.cod-hero .cod-btn-secondary span,
body #wrapwrap .cod-hero .cod-btn-secondary span {
    color: white !important;
    -webkit-text-fill-color: white !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.cod-btn-secondary svg,
.cod-hero .cod-btn-secondary svg {
    fill: white !important;
    color: white !important;
}

/* ========================================
   MOCKUP - VISIBILIDAD GARANTIZADA
======================================== */
.cod-hero-mockup,
.cod-mockup-screen,
.cod-mockup-inner {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.cod-hero .col-lg-6:last-child,
.cod-hero .col-lg-6:nth-child(2) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.cod-mockup-screen {
    min-height: 380px !important;
    min-width: 300px !important;
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%) !important;
    border: 8px solid #334155 !important;
    border-radius: 24px !important;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5) !important;
}

.cod-mockup-inner {
    background: #F8FAFC !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* ========================================
   3. TOGGLE MENSUAL/ANUAL - FUNCIONAL
======================================== */
.pricing-toggle-wrapper,
.cod-pricing-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 20px 0 !important;
}

.pricing-toggle-label {
    color: #404040 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.pricing-toggle-label.active {
    color: #242332 !important;
    font-weight: 600 !important;
}

.pricing-toggle,
.cod-pricing-toggle-btn {
    position: relative !important;
    width: 56px !important;
    height: 28px !important;
    background: #E0E0E0 !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
}

.pricing-toggle.active,
.cod-pricing-toggle-btn.active {
    background: #F28C28 !important;
}

.pricing-toggle::after,
.cod-pricing-toggle-btn::after {
    content: '' !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 22px !important;
    height: 22px !important;
    background: #FFFFFF !important;
    border-radius: 50% !important;
    transition: transform 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

.pricing-toggle.active::after,
.cod-pricing-toggle-btn.active::after {
    transform: translateX(28px) !important;
}

/* Badge de descuento */
.discount-badge,
.cod-pricing-badge {
    background: #F28C28 !important;
    color: #FFFFFF !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* ========================================
   4. CARDS DE PRICING - CONTRASTE
======================================== */
.pricing-card,
.cod-pricing-card {
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 16px !important;
    padding: 32px 24px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

.pricing-card.featured,
.cod-pricing-card.featured,
.cod-pricing-card-featured {
    background: #242332 !important;
    border: 2px solid #F28C28 !important;
}

.pricing-card.featured h3,
.pricing-card.featured .price,
.pricing-card.featured .price-amount,
.cod-pricing-card.featured h3,
.cod-pricing-card.featured .price,
.cod-pricing-card-featured h3,
.cod-pricing-card-featured .cod-pricing-value {
    color: #FFFFFF !important;
}

/* Featured card - FONDO BLANCO necesita TEXTO OSCURO */
.pricing-card.featured p,
.pricing-card.featured li,
.cod-pricing-card.featured p,
.cod-pricing-card.featured li,
.cod-pricing-card.featured .cod-pricing-features li,
.cod-pricing-card-featured p,
.cod-pricing-card-featured li {
    color: #1E293B !important;
    -webkit-text-fill-color: #1E293B !important;
}

/* Cards normales - TEXTO VISIBLE */
.pricing-card h3,
.pricing-card .price,
.cod-pricing-card h3,
.cod-pricing-name {
    color: #242332 !important;
    -webkit-text-fill-color: #242332 !important;
}

.pricing-card p,
.pricing-card li,
.cod-pricing-card p,
.cod-pricing-desc,
.cod-pricing-card .cod-pricing-features li,
.cod-pricing-features li {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
}

/* ========================================
   BOTONES DE SISTEMAS - TEXTO BLANCO
======================================== */
body #wrapwrap .cod-sistema-btn-dark,
body .cod-sistema-btn-dark,
.cod-sistema-btn-dark {
    background: #1E293B !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
}

body #wrapwrap .cod-sistema-btn-dark span,
body .cod-sistema-btn-dark span,
.cod-sistema-btn-dark span {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

body #wrapwrap .cod-sistema-btn-primary,
body .cod-sistema-btn-primary,
.cod-sistema-btn-primary {
    background: #F28C28 !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
}

body #wrapwrap .cod-sistema-btn-primary span,
body .cod-sistema-btn-primary span,
.cod-sistema-btn-primary span {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* Hover states - mantener texto blanco */
body #wrapwrap .cod-sistema-btn-dark:hover,
body .cod-sistema-btn-dark:hover,
.cod-sistema-btn-dark:hover {
    background: #F28C28 !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
}

body #wrapwrap .cod-sistema-btn-dark:hover span,
body .cod-sistema-btn-dark:hover span,
.cod-sistema-btn-dark:hover span {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

body #wrapwrap .cod-sistema-btn-primary:hover,
body .cod-sistema-btn-primary:hover,
.cod-sistema-btn-primary:hover {
    background: #d97706 !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
}

body #wrapwrap .cod-sistema-btn-primary:hover span,
body .cod-sistema-btn-primary:hover span,
.cod-sistema-btn-primary:hover span {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* ========================================
   5. SECCIÓN CTA - FONDO NARANJA
======================================== */
.cta-section,
section.cta-section,
.cod-cta-section,
.cod-cta {
    background: linear-gradient(135deg, #F28C28 0%, #d97706 100%) !important;
    padding: 60px 20px !important;
}

.cta-section h2,
.cta-section h3,
.cod-cta-section h2,
.cod-cta h2,
.cod-cta-title {
    color: #FFFFFF !important;
}

.cta-section p,
.cod-cta-section p,
.cod-cta p,
.cod-cta-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

.cta-section .btn,
.cod-cta-section .btn,
.cod-cta .btn {
    background: #FFFFFF !important;
    color: #F28C28 !important;
    border: none !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.cta-section .btn:hover,
.cod-cta-section .btn:hover,
.cod-cta .btn:hover {
    background: #242332 !important;
    color: #FFFFFF !important;
}

/* ========================================
   6. BOTONES CTA
======================================== */
.btn-primary,
.cod-btn-primary,
.btn-cta {
    background: #F28C28 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 12px 28px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
.cod-btn-primary:hover,
.btn-cta:hover {
    background: #d97706 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(242, 140, 40, 0.4) !important;
}

/* ========================================
   7. RESPONSIVE MÓVIL
======================================== */
@media (max-width: 768px) {
    .hero-section,
    .cod-hero {
        padding: 40px 16px !important;
    }
    
    .hero-section h1,
    .cod-hero h1,
    .cod-hero-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
    
    .pricing-card,
    .cod-pricing-card {
        margin-bottom: 20px !important;
    }
    
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .col-lg-4, .col-md-6 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    section {
        padding: 40px 16px !important;
    }
}

/* ========================================
   TOGGLE PRECIOS MENSUAL/ANUAL - REDISEÑO v2.0
======================================== */
.cod-pricing-toggle-btn {
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
}

.cod-pricing-toggle-btn::after {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}

/* Estado MENSUAL - bola a la izquierda, color gris */
.cod-pricing-toggle-btn.monthly {
    background: #64748B !important;
}

.cod-pricing-toggle-btn.monthly::after {
    right: auto !important;
    left: 4px !important;
}

/* Estado ANUAL (default) - bola a la derecha, naranja */
.cod-pricing-toggle-btn:not(.monthly) {
    background: #F28C28 !important;
}

.cod-pricing-toggle-btn:not(.monthly)::after {
    right: 4px !important;
    left: auto !important;
}

/* Texto del toggle - WCAG AA */
.cod-pricing-toggle span.white {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.cod-pricing-toggle span.light {
    color: rgba(255, 255, 255, 0.55) !important;
    font-weight: 400 !important;
}

/* Badge -10% elegante SaaS */
.cod-pricing-discount {
    background: rgba(242, 140, 40, 0.15) !important;
    color: #F28C28 !important;
    border: 1px solid rgba(242, 140, 40, 0.3) !important;
    animation: none !important;
    box-shadow: none !important;
}

/* ========================================
   PRICING CARDS - CONTRASTE WCAG AA
======================================== */
.cod-pricing-card {
    background: #FFFFFF !important;
}

.cod-pricing-card.featured {
    background: #FFFFFF !important;
    border: 3px solid #F28C28 !important;
    box-shadow: 0 12px 40px rgba(242, 140, 40, 0.2) !important;
    transform: scale(1.06) !important;
    padding: 44px 32px !important;
}

.cod-pricing-recommended {
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(242, 140, 40, 0.3) !important;
}

.cod-pricing-name {
    color: #242332 !important;
    -webkit-text-fill-color: #242332 !important;
}

.cod-pricing-value {
    color: #242332 !important;
    -webkit-text-fill-color: #242332 !important;
}

.cod-pricing-desc,
.cod-pricing-period {
    color: #64748B !important;
    -webkit-text-fill-color: #64748B !important;
}

.cod-pricing-features li {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
}

/* Botón CTA primario */
.cod-pricing-btn-primary {
    background: #F28C28 !important;
    border-color: #F28C28 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.cod-pricing-btn-primary:hover {
    background: #d97706 !important;
    border-color: #d97706 !important;
}

.cod-pricing-btn-primary span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Botón OUTLINE - fondo oscuro #242332 */
.cod-pricing-btn-outline {
    background: #242332 !important;
    border: 2px solid #242332 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.cod-pricing-btn-outline:hover {
    background: #1a1a2e !important;
    border-color: #1a1a2e !important;
}

.cod-pricing-btn-outline span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* ========================================
   CTA SECTION - BOTONES VISIBLES
======================================== */
.cod-cta-btn-dark {
    background: #242332 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.cod-cta-btn-dark span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.cod-cta-btn-dark:hover {
    background: #1a1a2e !important;
    transform: translateY(-2px);
}

.cod-cta-btn-whatsapp {
    background: #25D366 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.cod-cta-btn-whatsapp span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.cod-cta-btn-whatsapp:hover {
    background: #128C7E !important;
    transform: translateY(-2px);
}

.cod-cta-btn-whatsapp svg {
    fill: white !important;
}

/* ========================================
   FOOTER - LOGO Y WHATSAPP
======================================== */
.cod-footer-logo,
.cod-footer-brand img,
img.cod-footer-logo {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 80px !important;
    object-fit: contain !important;
}

.cod-footer-wa {
    background: #25D366 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: none !important;
}

.cod-footer-wa svg {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

.cod-footer-wa:hover {
    background: #128C7E !important;
    color: #FFFFFF !important;
}

/* ========================================
   WHATSAPP FLOTANTE - MODERNO SaaS
======================================== */
.cod-whatsapp {
    position: fixed !important;
    bottom: 32px !important;
    right: 32px !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.cod-whatsapp-tooltip {
    background: #FFFFFF !important;
    color: #242332 !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.cod-whatsapp-btn {
    width: 56px !important;
    height: 56px !important;
    background: #25D366 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4) !important;
    border: none !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.cod-whatsapp-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5) !important;
}

.cod-whatsapp-btn svg {
    width: 26px !important;
    height: 26px !important;
    fill: #FFFFFF !important;
}

/* Responsive móvil */
@media (max-width: 768px) {
    .cod-whatsapp {
        bottom: 20px !important;
        right: 20px !important;
    }
    .cod-whatsapp-tooltip {
        display: none !important;
    }
    .cod-whatsapp-btn {
        width: 60px !important;
        height: 60px !important;
    }
    .cod-whatsapp-btn svg {
        width: 28px !important;
        height: 28px !important;
    }
}

/* ========================================
   MEJORAS MÓVILES COMPLETAS v7.7
   FIX: Scroll pegado, WhatsApp, Footer, Hamburguesa
======================================== */

/* === 1. FIX SCROLL "PEGADO" EN MÓVIL === */
@media (max-width: 991px) {
    /* Garantizar scroll suave en móvil */
    html {
        -webkit-overflow-scrolling: touch !important;
        touch-action: manipulation !important;
    }
    
    body {
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: auto !important;
    }
    
    /* Evitar bloqueos por overlays invisibles */
    .o_overlay,
    .menu_overlay,
    .modal-backdrop:not(.show) {
        pointer-events: none !important;
    }
    
    /* Fix para elementos fixed que bloquean scroll */
    .cod-nav,
    nav.cod-nav,
    header nav {
        touch-action: none !important;
    }
    
    /* Solo bloquear scroll cuando menú está abierto */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    body:not(.menu-open) {
        overflow: visible !important;
        position: static !important;
    }
    
    /* Fix iOS Safari 100vh bug */
    .cod-hero {
        min-height: calc(100vh - 60px) !important;
        min-height: calc(100svh - 60px) !important; /* Safari small viewport */
    }
}

/* === 2. WHATSAPP FLOTANTE MEJORADO MÓVIL === */
@media (max-width: 768px) {
    .cod-whatsapp {
        bottom: 24px !important;
        right: 20px !important;
        gap: 0 !important;
    }
    
    /* Tooltip oculto en móvil */
    .cod-whatsapp-tooltip {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Botón más grande y táctil */
    .cod-whatsapp-btn {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4) !important;
    }
    
    .cod-whatsapp-btn svg {
        width: 30px !important;
        height: 30px !important;
    }
    
    /* Hover/tap feedback */
    .cod-whatsapp-btn:active {
        transform: scale(0.95) !important;
    }
}

@media (max-width: 480px) {
    .cod-whatsapp {
        bottom: 20px !important;
        right: 16px !important;
    }
    
    .cod-whatsapp-btn {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
    }
    
    .cod-whatsapp-btn svg {
        width: 28px !important;
        height: 28px !important;
    }
}

/* === 3. HAMBURGUESA - VER SECCIÓN "HAMBURGUESA GARANTIZADA" MÁS ABAJO === */
/* Nota: Consolidado en una sola definición para evitar conflictos */

/* === 4. FOOTER MEJORADO MÓVIL === */
@media (max-width: 768px) {
    .cod-footer {
        padding: 48px 0 24px !important;
    }
    
    .cod-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        text-align: center !important;
    }
    
    .cod-footer-brand h4 {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .cod-footer-brand h4 span {
        font-size: 20px !important;
    }
    
    .cod-footer-brand p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        padding: 0 10px !important;
    }
    
    .cod-footer-social {
        justify-content: center !important;
        gap: 16px !important;
    }
    
    .cod-footer-social a {
        width: 48px !important;
        height: 48px !important;
        border-radius: 12px !important;
    }
    
    .cod-footer-social a svg {
        width: 22px !important;
        height: 22px !important;
    }
    
    .cod-footer-col h5 {
        font-size: 17px !important;
        margin-bottom: 18px !important;
    }
    
    .cod-footer-col ul li {
        margin-bottom: 12px !important;
    }
    
    .cod-footer-col ul li a {
        font-size: 15px !important;
        display: inline-block !important;
        padding: 4px 0 !important;
    }
    
    /* Contacto en móvil */
    .cod-footer-contact p {
        justify-content: center !important;
        font-size: 14px !important;
        padding: 0 16px !important;
    }
    
    .cod-footer-contact svg {
        flex-shrink: 0 !important;
    }
    
    /* Botón WhatsApp footer más táctil */
    .cod-footer-wa {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
        padding: 16px 28px !important;
        font-size: 16px !important;
        margin: 20px auto 0 !important;
    }
    
    .cod-footer-wa svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Bottom footer */
    .cod-footer-bottom {
        flex-direction: column !important;
        gap: 20px !important;
        text-align: center !important;
        padding: 24px 0 !important;
    }
    
    .cod-footer-bottom p {
        font-size: 13px !important;
        order: 2 !important;
    }
    
    .cod-footer-legal {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 16px !important;
        order: 1 !important;
    }
    
    .cod-footer-legal a {
        font-size: 13px !important;
        padding: 4px 0 !important;
    }
}

@media (max-width: 480px) {
    .cod-footer {
        padding: 36px 0 20px !important;
    }
    
    .cod-footer-grid {
        gap: 28px !important;
    }
    
    .cod-footer-brand h4 span {
        font-size: 18px !important;
    }
    
    .cod-footer-social a {
        width: 44px !important;
        height: 44px !important;
    }
    
    .cod-footer-col h5 {
        font-size: 16px !important;
    }
    
    .cod-footer-wa {
        padding: 14px 24px !important;
        font-size: 15px !important;
    }
    
    .cod-footer-bottom {
        gap: 16px !important;
        padding: 20px 0 !important;
    }
    
    .cod-footer-legal {
        gap: 12px !important;
    }
}

/* ========================================
   FIX CRÍTICO MÓVIL v8.0
   Soluciona: Scroll pegado, Hamburguesa, WhatsApp
======================================== */

/* === RESET MÓVIL AGRESIVO === */
@media (max-width: 991px) {
    /* 1. FORZAR SCROLL EN TODO EL DOCUMENTO */
    html {
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        height: auto !important;
        min-height: 100% !important;
        touch-action: manipulation !important;
    }
    
    body {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        height: auto !important;
        min-height: 100% !important;
        position: relative !important;
        touch-action: pan-y pan-x !important;
        overscroll-behavior: auto !important;
    }
    
    /* Solo bloquear cuando menú móvil está abierto */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        touch-action: none !important;
    }
    
    /* 2. TODOS LOS CONTENEDORES: VISIBLE */
    #wrapwrap,
    #wrap,
    main,
    .cod-wrap,
    .o_main_content,
    .oe_structure,
    section,
    .cod-hero,
    .cod-section-dark,
    .cod-section-light {
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
        position: relative !important;
        touch-action: auto !important;
    }
    
    /* 3. HERO SIN HEIGHT FIJO EN MÓVIL */
    .cod-hero {
        min-height: auto !important;
        height: auto !important;
        padding-top: 100px !important;
        padding-bottom: 60px !important;
    }
    
    /* 4. OVERLAYS INVISIBLES NO BLOQUEAN */
    .o_overlay:not(.show),
    .modal-backdrop:not(.show),
    .menu_overlay:not(.active),
    #codMobileOverlay:not(.cod-menu-open) {
        pointer-events: none !important;
        touch-action: none !important;
        display: none !important;
    }
    
    /* 5. NAVBAR FIJA NO BLOQUEA SCROLL */
    nav.cod-nav,
    header nav,
    .o_main_navbar {
        touch-action: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
}

/* === WHATSAPP GARANTIZADO VISIBLE === */
@media (max-width: 991px) {
    .cod-whatsapp {
        position: fixed !important;
        bottom: 24px !important;
        right: 20px !important;
        z-index: 9998 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        gap: 0 !important;
        pointer-events: auto !important;
    }
    
    .cod-whatsapp-tooltip {
        display: none !important;
    }
    
    .cod-whatsapp-btn,
    .cod-whatsapp a,
    a.cod-whatsapp-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        min-height: 62px !important;
        background: #25D366 !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45) !important;
        border: none !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
    
    .cod-whatsapp-btn svg,
    .cod-whatsapp a svg {
        width: 30px !important;
        height: 30px !important;
        fill: #FFFFFF !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Touch feedback */
    .cod-whatsapp-btn:active {
        transform: scale(0.92) !important;
        box-shadow: 0 2px 12px rgba(37, 211, 102, 0.5) !important;
    }
}

/* === MÓVIL PEQUEÑO === */
@media (max-width: 480px) {
    .cod-hamburger,
    #codHamburger {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
    }
    
    .cod-hamburger::before {
        font-size: 26px !important;
    }
    
    .cod-whatsapp {
        bottom: 20px !important;
        right: 16px !important;
    }
    
    .cod-whatsapp-btn {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
    }
    
    .cod-whatsapp-btn svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    .cod-hero {
        padding-top: 80px !important;
        padding-bottom: 50px !important;
    }
}

/* ========================================
   WHATSAPP ICON - FIX GLOBAL (Desktop + Móvil)
======================================== */
.cod-whatsapp-btn svg,
.cod-whatsapp a svg,
a.cod-whatsapp-btn svg {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    fill: #FFFFFF !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}

.cod-whatsapp-btn svg path,
.cod-whatsapp a svg path {
    fill: #FFFFFF !important;
}

/* Desktop */
@media (min-width: 992px) {
    .cod-whatsapp-btn,
    a.cod-whatsapp-btn {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
    }
    
    .cod-whatsapp-btn svg {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
}

/* ========================================
   FOOTER DESARROLLADOR - Barra Naranja
======================================== */
.cod-footer-dev {
    background: #F28C28 !important;
    padding: 12px 0 !important;
    text-align: center !important;
    margin-top: 20px !important;
}

.cod-footer-dev small {
    color: #FFFFFF !important;
    font-weight: 500 !important;
}

.cod-footer-dev a {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.cod-footer-dev a:hover {
    text-decoration: underline !important;
}

/* ========================================
   FIX FOOTER DUPLICADO - Ocultar copyright Odoo
======================================== */
.o_footer_copyright,
#footer .o_footer_copyright,
footer .o_footer_copyright,
div.o_footer_copyright {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Asegurar solo una barra de desarrollador */
footer > div[style*="background: #F28C28"] ~ div[style*="background: #F28C28"],
footer > div[style*="somoscodificando"] ~ div[style*="somoscodificando"] {
    display: none !important;
}

/* ========================================
   FIX WHATSAPP SVG CENTRADO
======================================== */
.cod-whatsapp-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: none !important;
    text-decoration: none !important;
}

.cod-whatsapp-btn svg {
    display: block !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
}

/* Eliminar interferencia de clase .btn Bootstrap */
a.cod-whatsapp-btn.btn,
.cod-whatsapp-btn.btn {
    padding: 0 !important;
    border: none !important;
    background: #25D366 !important;
}

/* ========================================
   FIXES MÓVIL COMPLETOS v8.2
   Solo afecta: max-width: 768px
   NO modifica estilos desktop
======================================== */

/* ============================================================
   SECCIÓN 1: FOOTER MÓVIL - 100% ANCHO SIN ZONAS BLANCAS
============================================================ */
@media (max-width: 768px) {
    /* Footer principal: full width, sin margins */
    footer {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #1a1a2e !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Clase cod-footer: full width */
    .cod-footer {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 40px 16px 24px !important;
        background: #1a1a2e !important;
        box-sizing: border-box !important;
    }
    
    /* Container dentro del footer */
    footer .container,
    .cod-footer .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Grid del footer en móvil */
    .cod-footer-grid {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        padding: 0 !important;
        margin: 0 0 32px 0 !important;
    }
    
    /* Columnas del footer centradas */
    .cod-footer-brand,
    .cod-footer-col,
    .cod-footer-contact {
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Logo footer centrado */
    .cod-footer-brand h4 {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    /* Redes sociales centradas */
    .cod-footer-social {
        justify-content: center !important;
        gap: 14px !important;
    }
    
    /* Links del footer */
    .cod-footer-col ul {
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    /* Contacto centrado */
    .cod-footer-contact p {
        justify-content: center !important;
        text-align: center !important;
    }
    
    /* Botón WhatsApp footer centrado */
    .cod-footer-wa {
        margin: 20px auto 0 !important;
        max-width: 260px !important;
        justify-content: center !important;
    }
    
    /* Bottom footer */
    .cod-footer-bottom {
        width: 100% !important;
        padding: 24px 0 !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    /* Links legales centrados */
    .cod-footer-legal {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }
    
    /* Barra desarrollador: FULL WIDTH - SIN 100vw para evitar overflow */
    footer > div[style*="background: #F28C28"],
    footer > div[style*="background:#F28C28"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 14px 16px !important;
        box-sizing: border-box !important;
    }
    
    /* Eliminar posibles fondos blancos heredados */
    body > footer,
    #wrap > footer,
    #wrapwrap > footer,
    main > footer {
        background: #1a1a2e !important;
    }
    
    /* Fix para #wrap o #wrapwrap que pueda tener fondo blanco */
    #wrapwrap,
    #wrap {
        background: transparent !important;
    }
}

/* ============================================================
   SECCIÓN 2: MENÚ HAMBURGUESA - FIX DEFINITIVO v8.6
   Problema: El menú con right: -320px causa overflow visible
   Solución: Usar transform + visibility para ocultar sin overflow
============================================================ */
@media (max-width: 768px) {
    /* === OVERLAY OSCURO DE FONDO === */
    #codMobileOverlay,
    .cod-mobile-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.6) !important;
        z-index: 99998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
        -webkit-backdrop-filter: blur(4px) !important;
        backdrop-filter: blur(4px) !important;
    }
    
    /* Overlay visible cuando menú abierto */
    #codMobileOverlay.cod-menu-open,
    .cod-mobile-overlay.cod-menu-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* === MENÚ LATERAL - USAR TRANSFORM EN LUGAR DE RIGHT NEGATIVO === */
    #codMobileMenu,
    .cod-mobile-menu {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 280px !important;
        max-width: 85% !important;
        height: 100% !important;
        background: #ffffff !important;
        z-index: 99999 !important;
        padding: 24px 20px !important;
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.2) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        /* CLAVE: Usar transform + visibility para ocultar sin causar overflow */
        transform: translateX(100%) !important;
        visibility: hidden !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s ease !important;
    }
    
    /* Menú visible cuando abierto */
    #codMobileMenu.cod-menu-open,
    .cod-mobile-menu.cod-menu-open {
        transform: translateX(0) !important;
        visibility: visible !important;
    }
    
    /* Header del menú móvil */
    .cod-mobile-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-bottom: 20px !important;
        margin-bottom: 24px !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    /* Botón cerrar */
    .cod-mobile-close {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        background: #f5f5f5 !important;
        border: none !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        font-weight: bold !important;
        color: #4a5568 !important;
        transition: all 0.2s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .cod-mobile-close:active {
        background: #e0e0e0 !important;
        transform: scale(0.94) !important;
    }
    
    /* Navegación del menú móvil */
    .cod-mobile-nav {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .cod-mobile-nav li {
        margin-bottom: 8px !important;
    }
    
    .cod-mobile-nav a {
        display: block !important;
        padding: 14px 16px !important;
        color: #1a1a2e !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        border-radius: 10px !important;
        transition: all 0.2s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .cod-mobile-nav a:hover,
    .cod-mobile-nav a:active {
        background: rgba(242, 140, 40, 0.1) !important;
        color: #F28C28 !important;
    }
    
    /* CTA del menú móvil */
    .cod-mobile-cta {
        display: block !important;
        width: 100% !important;
        margin-top: 24px !important;
        padding: 16px !important;
        background: linear-gradient(135deg, #F28C28 0%, #e07b1a 100%) !important;
        color: #ffffff !important;
        text-align: center !important;
        font-weight: 600 !important;
        font-size: 16px !important;
        text-decoration: none !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(242, 140, 40, 0.4) !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* El menú NO debe empujar el contenido */
    body,
    #wrapwrap,
    #wrap,
    main {
        transform: none !important;
        left: 0 !important;
        margin-left: 0 !important;
    }
}

/* ============================================================
   SECCIÓN 3: ÍCONO HAMBURGUESA - VISIBLE Y CORRECTO
============================================================ */
@media (max-width: 768px) {
    /* Hamburguesa: siempre visible */
    .cod-hamburger,
    #codHamburger,
    button.cod-hamburger,
    button#codHamburger {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        background: #f5f5f5 !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 10000 !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 0 !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
    
    /* Ícono hamburguesa con ::before - 28px */
    .cod-hamburger::before,
    #codHamburger::before,
    button.cod-hamburger::before {
        content: "☰" !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 28px !important;
        line-height: 1 !important;
        color: #1a1a2e !important;
        font-family: Arial, "Segoe UI Symbol", sans-serif !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Estado hover */
    .cod-hamburger:hover,
    #codHamburger:hover {
        background: #e8e8e8 !important;
    }
    
    /* Estado activo (presionado) */
    .cod-hamburger:active,
    #codHamburger:active {
        transform: scale(0.94) !important;
        background: #ddd !important;
    }
    
    /* Estado cuando menú está abierto */
    .cod-hamburger.active,
    #codHamburger.active {
        background: #242332 !important;
        border-color: #242332 !important;
    }
    
    .cod-hamburger.active::before,
    #codHamburger.active::before {
        content: "✕" !important;
        color: #ffffff !important;
        font-size: 22px !important;
    }
    
    /* Ocultar span interno si existe */
    .cod-hamburger span,
    .cod-hamburger .cod-hamburger-icon,
    #codHamburger span,
    #codHamburger .cod-hamburger-icon {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Asegurar que el header muestre la hamburguesa */
    .cod-nav .cod-actions,
    nav .cod-actions {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
}

/* ============================================================
   SECCIÓN 4: SCROLL MÓVIL - FLUIDO SIN BLOQUEOS
============================================================ */
@media (max-width: 768px) {
    /* HTML: scroll principal */
    html {
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        height: auto !important;
        min-height: 100% !important;
        touch-action: manipulation !important;
    }
    
    /* Body: sin position fixed permanente */
    body {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
        min-height: 100% !important;
        position: relative !important;
        touch-action: pan-y pan-x !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: auto !important;
    }
    
    /* Bloquear scroll SOLO cuando menú está abierto */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        touch-action: none !important;
    }
    
    /* Restaurar scroll cuando menú cerrado */
    body:not(.menu-open) {
        overflow-y: visible !important;
        position: relative !important;
        touch-action: manipulation !important;
    }
    
    /* Contenedores principales: sin overflow hidden */
    #wrapwrap,
    #wrap,
    main,
    .o_main_content,
    .oe_structure {
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
        position: relative !important;
        touch-action: auto !important;
    }
    
    /* Hero sin min-height que bloquee */
    .cod-hero {
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Sections sin overflow hidden */
    section,
    .cod-section-dark,
    .cod-section-light,
    .cod-features,
    .cod-pricing,
    .cod-cta {
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Overlays invisibles NO bloquean touch */
    .o_overlay:not(.show),
    .modal-backdrop:not(.show),
    .menu_overlay:not(.active):not(.cod-menu-open),
    #codMobileOverlay:not(.cod-menu-open),
    .cod-mobile-overlay:not(.cod-menu-open) {
        pointer-events: none !important;
        touch-action: none !important;
    }
    
    /* Header fijo no bloquea scroll del body */
    header,
    nav.cod-nav,
    .cod-nav,
    .o_main_navbar {
        touch-action: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
}

/* ============================================================
   SECCIÓN 5: WHATSAPP FLOTANTE MÓVIL
============================================================ */
@media (max-width: 768px) {
    .cod-whatsapp {
        position: fixed !important;
        bottom: 24px !important;
        right: 20px !important;
        z-index: 9997 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        gap: 0 !important;
    }
    
    /* Ocultar tooltip en móvil */
    .cod-whatsapp-tooltip {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Botón WhatsApp táctil */
    .cod-whatsapp-btn,
    a.cod-whatsapp-btn {
        display: flex !important;
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
        background: #25D366 !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45) !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .cod-whatsapp-btn svg {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        fill: #FFFFFF !important;
    }
    
    .cod-whatsapp-btn:active {
        transform: scale(0.94) !important;
    }
}

/* ============================================================
   SECCIÓN 6: MÓVIL PEQUEÑO (480px)
============================================================ */
@media (max-width: 480px) {
    /* Footer más compacto */
    .cod-footer {
        padding: 32px 12px 20px !important;
    }
    
    .cod-footer-grid {
        gap: 24px !important;
    }
    
    /* Hamburguesa en móvil pequeño */
    .cod-hamburger,
    #codHamburger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    
    .cod-hamburger::before,
    #codHamburger::before {
        font-size: 24px !important;
    }
    
    /* WhatsApp en móvil pequeño */
    .cod-whatsapp {
        bottom: 20px !important;
        right: 16px !important;
    }
    
    .cod-whatsapp-btn {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
    }
    
    .cod-whatsapp-btn svg {
        width: 26px !important;
        height: 26px !important;
    }
    
    /* Menú móvil más pequeño */
    #codMobileMenu,
    .cod-mobile-menu {
        width: 260px !important;
        padding: 20px 16px !important;
    }
}

/* ============================================================
   SECCIÓN 7: FIXES CRÍTICOS MÓVIL v8.5
   - Sin 100vw (causa overflow en Safari)
   - Contención estructural completa
   - Compatible Safari iOS + Android Chrome
============================================================ */
@media (max-width: 768px) {
    /* === PREVENIR SCROLL HORIZONTAL COMPLETAMENTE === */
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overscroll-behavior-x: none !important;
    }
    
    /* Todos los hijos directos del body */
    body > * {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Row de Bootstrap: sin márgenes negativos que causen overflow */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Columnas sin padding excesivo */
    [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* === FOOTER SIN PEGARSE (MISMO FIX QUE HERO) === */
    footer,
    .cod-footer,
    #footer {
        position: relative !important;
        height: auto !important;
        min-height: auto !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Contenedores dentro del footer */
    footer .container,
    footer .container-fluid,
    .cod-footer .container,
    .cod-footer-grid,
    .cod-footer-bottom,
    .cod-footer-brand,
    .cod-footer-col {
        position: relative !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        touch-action: auto !important;
    }
    
    /* Barra desarrollador */
    footer > div[style*="background: #F28C28"] {
        position: relative !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    /* === HAMBURGUESA SIN DEFORMARSE === */
    .cod-hamburger,
    #codHamburger,
    button.cod-hamburger {
        /* Dimensiones fijas sin estirarse */
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        
        /* Flexbox: no crecer ni encoger */
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: 44px !important;
        
        /* Reset de transforms y line-height */
        transform: none !important;
        line-height: 1 !important;
        
        /* Aspect ratio */
        aspect-ratio: 1 / 1 !important;
        
        /* Centrado */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* Estilos */
        background: #f5f5f5 !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        z-index: 10000 !important;
        position: relative !important;
        
        /* Ocultar contenido de texto */
        font-size: 0 !important;
        color: transparent !important;
        
        /* Touch */
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
    
    /* Ícono hamburguesa con ::before */
    .cod-hamburger::before,
    #codHamburger::before {
        content: "☰" !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        font-size: 28px !important;
        line-height: 1 !important;
        color: #1a1a2e !important;
        font-family: Arial, "Segoe UI Symbol", sans-serif !important;
        transform: none !important;
    }
    
    /* Estado activo */
    .cod-hamburger.active::before,
    #codHamburger.active::before {
        content: "✕" !important;
        color: #ffffff !important;
        font-size: 22px !important;
    }
    
    .cod-hamburger.active,
    #codHamburger.active {
        background: #242332 !important;
        border-color: #242332 !important;
    }
    
    /* Ocultar cualquier span interno */
    .cod-hamburger span,
    .cod-hamburger .cod-hamburger-icon,
    #codHamburger span {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* === HEADER: HAMBURGUESA BIEN ALINEADA === */
    .cod-nav .cod-actions,
    nav .cod-actions,
    header .cod-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
    }
    
    /* === MENÚ MÓVIL: NO EMPUJA CONTENIDO === */
    body,
    #wrapwrap,
    #wrap,
    main {
        transform: none !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transition: none !important;
    }
    
    /* Cuando menú abierto: solo bloquear scroll, no mover */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        transform: none !important;
    }
    
    /* === ELEMENTOS QUE PUEDEN CAUSAR OVERFLOW === */
    img, video, iframe, canvas, svg, object, embed {
        max-width: 100% !important;
        height: auto !important;
    }
    
    table {
        max-width: 100% !important;
        overflow-x: auto !important;
        display: block;
    }
    
    pre, code {
        max-width: 100% !important;
        overflow-x: auto !important;
        word-wrap: break-word !important;
    }
}

/* ============================================================
   BLOQUE FINAL v9.0 - ANULA TODO LO ANTERIOR
   Prioridad máxima, última en cascada
============================================================ */

/* === SCROLL HORIZONTAL COMPLETAMENTE BLOQUEADO === */
html,
body,
#wrapwrap,
#wrap,
main,
.o_main_content,
header,
footer,
section,
.cod-hero,
.cod-wrap {
    overflow-x: clip !important;
    max-width: 100% !important;
}

@media (max-width: 991px) {
    html {
        overflow-x: clip !important;
        overflow-y: scroll !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body {
        overflow-x: clip !important;
        overflow-y: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* === HAMBURGUESA FINAL - SVG ÚNICO === */
@media (max-width: 991px) {
    html body header nav .cod-actions .cod-hamburger,
    html body header nav .cod-actions #codHamburger,
    html body header .cod-hamburger,
    html body .cod-hamburger,
    body .cod-hamburger,
    .cod-hamburger,
    #codHamburger {
        all: unset !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
        justify-content: center !important;
        align-items: center !important;
        background: #f5f5f5 !important;
        border: 2px solid rgba(0,0,0,0.1) !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        z-index: 10001 !important;
        position: relative !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* SVG hamburguesa - 3 barras */
    html body header nav .cod-actions .cod-hamburger::before,
    html body header nav .cod-actions #codHamburger::before,
    html body header .cod-hamburger::before,
    html body .cod-hamburger::before,
    body .cod-hamburger::before,
    .cod-hamburger::before,
    #codHamburger::before {
        content: "" !important;
        display: block !important;
        width: 20px !important;
        height: 14px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect y='0' width='20' height='2' rx='1' fill='%231a1a2e'/%3E%3Crect y='6' width='20' height='2' rx='1' fill='%231a1a2e'/%3E%3Crect y='12' width='20' height='2' rx='1' fill='%231a1a2e'/%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        border: none !important;
        box-shadow: none !important;
        font-size: 0 !important;
        color: transparent !important;
    }
    
    /* SIN ::after */
    html body .cod-hamburger::after,
    .cod-hamburger::after,
    #codHamburger::after {
        content: none !important;
        display: none !important;
    }
    
    /* Ocultar contenido interno */
    html body .cod-hamburger *,
    .cod-hamburger *,
    #codHamburger * {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Estado activo */
    html body .cod-hamburger.active,
    .cod-hamburger.active,
    #codHamburger.active {
        background: #242332 !important;
        border-color: #242332 !important;
    }
    
    html body .cod-hamburger.active::before,
    .cod-hamburger.active::before,
    #codHamburger.active::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4l12 12M16 4L4 16' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
        width: 16px !important;
        height: 16px !important;
    }
}

/* ============================================================
   CONTENCIÓN TOTAL DE SECCIONES HOME - v9.1
   Aplica la misma estructura del footer a TODAS las secciones
============================================================ */

/* === TODAS LAS SECCIONES: CONTENIDAS AL 100% === */
.cod-hero,
.cod-section,
.cod-section-gray,
.cod-section-dark,
.cod-section-light,
.cod-cta,
.cod-pricing,
.cod-features,
.cod-systems,
.cod-sistemas,
section[class*="cod-"],
.oe_structure > section,
#wrap > section,
main > section {
    overflow-x: clip !important;
    overflow-y: visible !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* === CONTAINERS DENTRO DE SECCIONES === */
.cod-hero .container,
.cod-hero .container-fluid,
.cod-section .container,
.cod-section .container-fluid,
.cod-cta .container,
.cod-cta .container-fluid,
.cod-pricing .container,
.cod-features .container,
.cod-systems .container,
section .container,
section .container-fluid {
    max-width: 100% !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
}

/* === ELEMENTOS DENTRO DE CTA (naranja) === */
.cod-cta,
.cod-cta * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.cod-cta {
    overflow: clip !important;
}

.cod-cta::before {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* === BOTONES Y FORMULARIOS EN CTA === */
.cod-cta-form,
.cod-cta-input,
.cod-cta-submit,
.cod-cta-content {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 991px) {
    /* === MÓVIL: CONTENCIÓN EXTRA === */
    .cod-hero,
    .cod-section,
    .cod-section-gray,
    .cod-section-dark,
    .cod-section-light,
    .cod-cta,
    .cod-pricing,
    .cod-features,
    .cod-systems,
    .cod-sistemas,
    section {
        overflow-x: clip !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Containers en móvil */
    .cod-hero .container,
    .cod-section .container,
    .cod-cta .container,
    section .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }
    
    /* Rows sin márgenes negativos */
    .cod-hero .row,
    .cod-section .row,
    .cod-cta .row,
    section .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    
    /* Columnas con padding controlado */
    .cod-hero [class*="col-"],
    .cod-section [class*="col-"],
    .cod-cta [class*="col-"],
    section [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100% !important;
    }
    
    /* Elementos que pueden causar overflow */
    .cod-hero img,
    .cod-section img,
    .cod-cta img,
    section img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* CTA form en móvil */
    .cod-cta-form {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .cod-cta-input,
    .cod-cta-submit {
        width: 100% !important;
        max-width: 100% !important;
    }
}