/* Nuevo archivo CSS consolidado */

/* Contenedor principal */ 
.offer {
    position: relative;
    width: 100% !important;
    overflow: hidden !important;
    min-height: 550px; /* Ajusta al alto de tus tarjetas */
}

/* Regla para todas las listas de planes */
ul.offer_ul {
    display: flex !important; /* Siempre en flex para que no se amontonen */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    
    /* TRUCO: Mandarlos lejos en lugar de ocultarlos */
    position: absolute;
    top: 0;
    left: -9999px; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

/* Solo el slider activo vuelve a su posicion */
ul.offer_ul.active-slider {
    position: relative !important;
    left: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Tarjetas individuales al 100% */
ul.offer_ul .offer_li {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    scroll-snap-align: start !important;
}

ul.offer_ul::-webkit-scrollbar {
    display: none !important;
}

/* NUEVOS ESTILOS PARA LANDING */


/* Barra de Autoridad y Partners */
    .trust-bar-seo {
        padding: 30px 0;
        background: #f8fafc !important;
        border-top: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
    }
    
    
    .status-indicator {
        position: absolute;
        bottom: 5px;
        right: 5px;
        background: #00e676;
        border-radius: 50%;
        width: 12px;
        height: 12px;
        border: 2px solid #fff;
    }
    
    .saas-badge {
        background: #f1f5f9;
        color: #475569;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 10px;
        border-radius: 6px;
        text-transform: uppercase;
        border: 1px solid #e2e8f0;
        transition: all 0.3s ease;
    }


/* 1. Estado inicial del logo */
    .tech-item-saas {
        filter: grayscale(100%);     /* Convierte el logo a blanco y negro */
        opacity: 0.5;                /* Lo hace semi-transparente para no distraer */
        transition: all 0.4s ease;   /* Define que el cambio durará 0.4 segundos y será suave */
    }
        
/* 2. Estado cuando el usuario pone el mouse encima */
    .tech-item-saas:hover {
        filter: grayscale(0%);       /* Devuelve el color original del logo */
        opacity: 1;                  /* Le da nitidez total (100% opacidad) */
        transform: scale(1.05);      /* Lo agranda un 5% sutilmente para dar feedback de clic */
    }
        
        
/* Estilos específicos para el Agitador SaaS */

    .section-loss-agitator {
        padding: 100px 0;
        background: radial-gradient(circle at top right, #1a364d, #0F2738);
        color: #fff;
    }

    .loss-card-agitator {
        background: rgba(255, 255, 255, 0.03);
        border: 1.5px dashed rgba(242, 85, 85, 0.5);
        padding: 40px;
        border-radius: 20px;
        backdrop-filter: blur(5px);
        transition: all 0.3s ease;
    }
    .loss-card-agitator:hover {
        border-color: rgba(242, 85, 85, 1);
        background: rgba(255, 255, 255, 0.05);
    }
    .loss-list li {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 18px !important;
        font-size: 17px;
        color: rgba(255, 255, 255, 0.9);
    }
    .loss-icon {
        color: #F25555;
        font-size: 20px;
        flex-shrink: 0;
    }
    
    .pricing-container-fade {
        animation:fadeIn .4s ease-in-out;
    }
    
    @keyframes fadeIn {
        from {opacity:0;transform:translateY(8px);}
        to {opacity:1;transform:translateY(0);}
    }
    
    /* ═══════════════════════════════════════════════════════════
       SISTEMA GLOBAL DE TARJETAS DE PRICING
       ═══════════════════════════════════════════════════════════ */
    
    .card-purpose-saas {
        position:relative;
        background:#fff!important;
        border:1px solid #e4e9ed!important;
        border-radius:15px!important;
        padding:23px!important;
        box-shadow:0 10px 27px rgba(15,39,56,.065)!important;
        text-align:left!important;
        display:flex!important;
        flex-direction:column!important;
        transition:all .4s ease;
        height:auto!important;
        min-height:0!important;
        margin-top:25px!important;
        overflow:visible!important;
    }
    
    .card-purpose-saas:hover {
        transform:translateY(-5px);
        box-shadow:0 0 0 1px rgba(15,39,56,.05),0 1px 3px rgba(0,0,0,.02),0 10px 30px rgba(0,0,0,.06),0 20px 50px rgba(0,0,0,.08)!important;
    }
    
    .card-purpose-saas--featured {
        border:1px solid rgba(242,85,85,.18)!important;
        box-shadow:0 8px 16px rgba(242,85,85,.10)!important;
        position:relative!important;
        overflow:visible!important;
    }
    
    .card-purpose-saas--featured > div:first-child {
        position:absolute!important;
        top:-12px!important;
        left:50%!important;
        transform:translateX(-50%)!important;
        background:#F25555!important;
        color:#fff!important;
        padding:4px 14px!important;
        border-radius:5px!important;
        font-size:10px!important;
        font-weight:700!important;
        letter-spacing:.06em!important;
        white-space:nowrap!important;
        font-family:'Inter',sans-serif!important;
        z-index:2!important;
    }
    
    .card-purpose-saas h3 {
        max-width:95%;
        font-family:'Red Hat Display',sans-serif!important;
        font-weight:800!important;
        font-size:19px!important;
        line-height:1.25!important;
        color:#0F2738!important;
        margin:0 0 5px!important;
        text-align:left!important;
    }
    
    .card-purpose-saas--featured h3 {
        margin-top:6px!important;
    }
    
    .card-purpose-saas > span {
        font-size:9px!important;
        color:#64748b!important;
        font-weight:600!important;
        text-transform:uppercase!important;
        letter-spacing:.4px!important;
        margin:0 0 16px!important;
        display:block!important;
        text-align:left!important;
    }
    
    .card-purpose-saas--featured > span {
        color:#F25555!important;
    }
    
    .card-purpose-saas hr {
        border:none!important;
        height:1px!important;
        background:rgba(15,39,56,.06)!important;
        margin:0 0 9px!important;
    }
    
    .card-purpose-saas > p {
        min-height:58px!important;
        margin-bottom:14px!important;
        color:#475569!important;
        font-size:12px!important;
        line-height:1.55!important;
    }
    
    .card-purpose-saas ul {
        list-style:none!important;
        padding:0!important;
        margin:12px 0 18px!important;
    }
    
    .card-purpose-saas ul li {
        display:flex!important;
        align-items:center!important;
        gap:0!important;
        margin-bottom:8px!important;
        font-size:11px!important;
        color:#64748b!important;
        line-height:1.4!important;
    }
    
    .card-purpose-saas ul li:last-child {
        margin-bottom:0!important;
    }
    
    .card-purpose-saas ul li b {
        color:#0F2738!important;
        font-weight:600!important;
    }
    
    .card-purpose-saas ul li i {
        font-size:14px!important;
        flex-shrink:0!important;
    }
    
    #container-todo-incluido .card-purpose-saas ul li:last-child{
        margin-bottom:10px!important;
        display:flex!important;
        align-items:center!important;
        gap:8px!important;
    }
    
    #container-todo-incluido .card-purpose-saas ul li:last-child > span{
        display:inline-block;
        font-size:11px;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.4px;
        color:#000;
        background:#fffce2;
        padding:0 9px;
        border-radius:4px;
    }
    
    #container-todo-incluido .card-purpose-saas ul li:last-child > span i{
        color:#0F2738!important;
    }
    
    .card-purpose-saas > div:last-child {
        background:#f8f9fb!important;
        padding:18px!important;
        border-radius:10px!important;
        text-align:center!important;
        margin-top:auto!important;
    }
    
    .card-purpose-saas--featured > div:last-child {
        background:rgba(242,85,85,.04)!important;
        color:#0F2738!important;
    }
    
    .card-purpose-saas > div:last-child > span:first-child {
        background:#FEF9C3!important;
        color:#92400e!important;
        padding:5px 14px!important;
        border-radius:6px!important;
        font-weight:800!important;
        font-size:14px!important;
        display:inline-block!important;
        letter-spacing:.02em!important;
        margin-bottom:10px!important;
    }
    
    .card-purpose-saas--featured > div:last-child > span:first-child {
        background:rgba(242,85,85,.08)!important;
        color:#F25555!important;
        border:1px solid rgba(242,85,85,.15)!important;
    }
    
    .card-purpose-saas > div:last-child > span:first-child:empty {
        display:none!important;
        padding:0!important;
        margin:0!important;
    }
    
    .card-purpose-saas > div:last-child > span:nth-of-type(2) {
        font-size:12px!important;
        color:#94a3b8!important;
        margin:0 0 2px!important;
        opacity:1!important;
        display:block;
        min-height:auto!important;
    }
    
    .card-purpose-saas > div:last-child > span:nth-of-type(2) span {
        text-decoration:line-through!important;
    }
    
    .card-purpose-saas > div:last-child > div {
        font-family:'Red Hat Display',sans-serif!important;
        font-weight:900!important;
        font-size:38px!important;
        color:#0F2738!important;
        margin:0!important;
        letter-spacing:-.02em!important;
    }
    
    .card-purpose-saas [id^="price-"] {
        font-size:32px!important;
        line-height:1.05!important;
        letter-spacing:-.7px!important;
    }
    
    .card-purpose-saas [id^="label-"] {
        font-size:9px!important;
    }
    
    .card-purpose-saas > div:last-child > span:last-of-type {
        font-size:10px!important;
        font-weight:600!important;
        color:#94a3b8!important;
        letter-spacing:.08em!important;
        margin:3px 0 0!important;
        display:block!important;
    }
    
    .card-purpose-saas button {
        background:#0F2738!important;
        color:#fff!important;
        min-height:45px;
        padding:0 16px!important;
        margin-top:10px!important;
        border-radius:6px!important;
        font-weight:700!important;
        font-size:10px!important;
        width:100%!important;
        letter-spacing:.2px!important;
        border:none!important;
        cursor:pointer!important;
        font-family:'Inter',sans-serif!important;
        transition:all .3s ease!important;
    }
    
    .card-purpose-saas button:hover {
        opacity:.9!important;
        transform:translateY(-1px)!important;
    }
    
    .card-purpose-saas--featured button {
        background:#F25555!important;
    }
    
    .icon-wrap-saas {
        margin-bottom: 25px;
        color: #0F2738;
        font-size: 32px;
    }
    
    .metodologia-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    .metodologia-lista li {
        font-size: 15px;
        color: #475569;
        margin-bottom: 15px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }
    .metodologia-lista i {
        color: #0F2738;
        font-size: 14px;
        margin-top: 4px;
    }
    
    
    
    .step-item {
    padding-left: 30px;
    border-left: 2px solid #e2e8f0;
    position: relative;
    margin-bottom: 30px;
    }
    .step-item::before {
        content: '';
        position: absolute;
        left: -7px;
        top: 0;
        width: 12px;
        height: 12px;
        background: #F25555;
        border-radius: 50%;
    }
    .step-number {
        font-size: 11px;
        font-weight: 800;
        color: #F25555;
        text-transform: uppercase;
        display: block;
        margin-bottom: 5px;
    }
    
    
    
    /* Contenedor de pasos estilo Grid SaaS */
.step-grid-item {
    background: #fff;
    border: 1px solid #f1f5f9;
    padding: 35px;
    border-radius: 12px;
    height: 100%;
    transition: all 0.3s ease;
}

.step-grid-item:hover {
    border-color: #e2e8f0;
    box-shadow: 0 15px 30px rgba(15, 39, 56, 0.04);
}

.step-tag {
    font-size: 10px;
    font-weight: 800;
    color: #F25555;
    background: rgba(242, 85, 85, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 15px;
}


.pricing-switch-container {
    display:inline-flex!important;
    justify-content:center;
    align-items:stretch;
    gap:3px;
    background:#fff;
    padding:5px;
    border:1px solid #e8edf1;
    border-radius:10px;
    width:fit-content;
    margin:25px auto 20px!important;
    box-shadow:0 6px 18px rgba(15,39,56,.045);
}

.switch-opt {
    padding:6px 18px;
    border:0!important;
    border-radius:7px!important;
    cursor:pointer;
    font-size:13px;
    font-weight:700;
    transition:.3s;
    color:#64748b;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    min-width:150px;
}

.switch-opt.active {
    background:linear-gradient(180deg,#0f2738 0%,#36536b 100%)!important;
    color:#fff!important;
    border:2px solid #20282e!important;
    border-top-color:#171e23!important;
    border-bottom-color:#667078!important;
    box-shadow:inset 0 5px 8px rgba(0,0,0,.50),inset 0 -2px 2px rgba(255,255,255,.16),inset 2px 0 3px rgba(0,0,0,.18),inset -2px 0 3px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.85)!important;
    transform:translateY(2px);
}

.discount-tag {
    font-size: 10px;
    color: #00e676;
    margin-left: 5px;
}

.discount-badge {
    background: #FFD700; /* Amarillo Premium */
    color: #0F2738;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px; /* Más pequeño y fino */
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
}
.old-price-text {
    text-decoration: line-through;
    opacity: 0.5;
    font-size: 13px;
    color: #64748b;
}

.old-price-container {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.old-price-label {
    font-size: 13px;
    color: #475569; /* Gris oscuro para máxima legibilidad */
    font-weight: 500;
}
.old-price-number {
    text-decoration: line-through;
    color: #64748b;
    opacity: 0.8;
    font-weight: 600;
}
.discount-badge-yellow {
    background: #ffe86f;
    color: #0F2738;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 10px;
}


/* Ajuste sutil para el badge dentro del switch */
.switch-opt .discount-badge-yellow {
    margin: 0; /* Quitamos el margen lateral anterior */
    font-size: 10px; /* Más pequeño para que no sea agresivo */
    padding: 2px 6px;
    line-height: 1;
}

    /* Aplicamos solo el efecto de elevación y suavidad del Hero a la clase original */
    .button_theme {
        transition: all 0.3s ease-in-out !important;
    }
    .button_theme:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(15, 39, 56, 0.15);
    }
    
/* Oculta los iconos de tecnología en pantallas menores a 768px (móviles) */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}    

@media (min-width: 768px) {
    .hide-pc {
        display: none !important;
    }
}   
    
/* Ajuste de tamaño para títulos en dispositivos móviles */
@media (max-width: 766.98px) {
    .seo-hero-title {
        font-size: 40px !important; /* Ajusta el tamaño general del h1 */
    }
    
    .seo-hero-title .title-secondary {
        font-size: 23px !important; /* Ajusta específicamente la segunda línea */
        line-height: 1.2 !important;
    }
}

/* Ajuste de margen para separar bloques en móviles */
@media (max-width: 767px) {
    .space-mobile {
        margin-bottom: 35px !important; /* Separa el párrafo del bloque de Optimización de Rastreo */
    }
    
    .col-md-7 div {
        padding-right: 0 !important; /* Elimina el padding lateral en móvil para centrar el contenido */
    }
}

/* Ajuste de margen para separar bloques en móviles */
@media (max-width: 767px) {
    .space-mobile2 {
        margin-bottom: 60px !important; /* Separa el párrafo del bloque de Optimización de Rastreo */
    }
}

/* Ajuste de margen para la cabecera de planes en móviles */
@media (max-width: 767px) {
    .space-mobile-minus {
        margin-bottom: 0px !important; /* El !important es necesario para vencer al estilo en línea */
    }
}

/* SWITCH GLOBAL — MOBILE */
@media (max-width:767px) {
    .pricing-switch-container {
        display:grid!important;
        grid-template-columns:33% 33% 33%!important;
        align-items:center!important;
        overflow:hidden!important;
        justify-content:space-between!important;
        width:100%!important;
        padding:4px!important;
        margin-top:25px!important;
        margin-bottom:0!important;
        gap:0!important;
    }

    .switch-opt,
    .switch-opt.active {
        box-sizing:border-box!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
        flex:1 1 0!important;
        width:100%!important;
        min-width:0!important;
        height:54px!important;
        min-height:54px!important;
        max-height:54px!important;
        padding:4px 5px!important;
        text-align:center!important;
        font-size:13px!important;
        line-height:1.05!important;
        letter-spacing:-.3px!important;
    }

    .switch-opt.active {
        transform:translateY(0)!important;
    }

    .switch-opt .discount-badge-yellow {
        font-size:9px!important;
        padding:2px 4px!important;
        margin:0 0 3px!important;
        line-height:1!important;
        letter-spacing:-.2px!important;
    }

    .switch-opt > span:last-child {
        margin:0!important;
        line-height:1.1!important;
        font-weight: 600 !important;
    }
}


@media (max-width: 767px) {
    /* Selector de máxima prioridad */
    h2#metodo-titulo-movil {
        font-size: 26px !important; /* Lo bajamos a 24px para asegurar que notes el cambio */
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
        display: block !important;
    }
}

/* Aplicación del fondo Gainsboro en el Hero */
.seo-hero-section {
    background-color: gainsboro !important; /* Gainsboro */
    /* Opción con degradado sutil para suavizar la transición */
    background: linear-gradient(0deg, gainsboro 0%, whitesmoke 100%);
}

.seo-bg-section {
    background-color: #1a364d !important; /* Gainsboro */
    /* Opción con degradado sutil para suavizar la transición */
    background: linear-gradient(180deg, #1a364d 0%, #030b11 100%)!important;
}



/* =======================================================
   NUEVO CÓDIGO OPTIMIZADO
   ======================================================= */

/* =======================================================
   SLIDER MANUAL REUTILIZABLE PARA LANDINGS (Sin Autoplay)
   ======================================================= */
@media (max-width: 767px) {
    .hnw-manual-slider-row {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch;
        gap: 15px;
        padding-bottom: 15px;
        scrollbar-width: none;
    }
    .hnw-manual-slider-row::-webkit-scrollbar {
        display: none;
    }
    /* Selecciona cualquier columna Bootstrap dentro del slider */
    .hnw-manual-slider-row > div[class*="col-"] {
        min-width: 100% !important; /* Deja asomar la siguiente tarjeta */
        flex-shrink: 0 !important;
        scroll-snap-align: center !important;
        margin-bottom: 0 !important;
    }
    .hnw-manual-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 10px;
        margin-bottom: 25px !important;
        width: 100% !important;
    }
    .hnw-manual-dots span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(15, 39, 56, 0.15);
        transition: background 0.3s, width 0.3s;
        cursor: pointer;
    }
    .hnw-manual-dots span.active {
        background: #0F2738;
        width: 25px;
        border-radius: 5px;
    }
}


/* =======================================================
   TARJETAS DE PRICING EN MÓVILES — DISEÑO APROBADO
   ======================================================= */
@media (max-width:767px) {
    .card-purpose-saas {
        padding:21px!important;
        margin-top:25px!important;
        margin-bottom:0!important;
    }

    .card-purpose-saas > p {
        display:none!important;
    }

    .card-purpose-saas ul {
        margin:15px 0!important;
    }

    .card-purpose-saas ul li {
        font-size:10px!important;
        line-height:1.3!important;
        margin-bottom:6px!important;
    }

    .card-purpose-saas ul li i {
        font-size:12px!important;
    }

    .card-purpose-saas > div:last-child {
        padding:18px!important;
    }

    .card-purpose-saas > div:last-child > div {
        font-size:28px!important;
    }

    .card-purpose-saas [id^="price-"] {
        font-size:30px!important;
    }
}



/* =======================================================
   IGUALAR TAMAÑOS EN MÓVILES (GLOBAL)
   ======================================================= */
@media (max-width:767px) {
    .card-purpose-saas--featured {
        transform:none!important;
        scale:1!important;
        margin-bottom:0!important;
        box-shadow:0 8px 16px rgba(242,85,85,.10)!important;
    }

    .hnw-manual-slider-row {
        padding-top:10px!important;
        padding-bottom:5px!important;
    }
}

/* =======================================================
   ESTÁNDAR MÓVIL UNIVERSAL PARA TODOS LOS H2 (28px)
   ======================================================= */
@media (max-width: 767.98px) {
    /* Apunta a cualquier h2 y rompe cualquier herencia o límite de contenedores */
    h2, 
    .section h2, 
    .column_attr h2, 
    .col-12 h2,
    .col-md-8 h2 {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }

    /* TRUCO CLAVE: Si el h2 tiene un span con tamaño forzado (como el 38px inline), 
       forzamos a que también baje a 28px en móviles */
    h2 span, 
    .column_attr h2 span {
        font-size: 28px !important;
    }
}

/* =======================================================
   ESTÁNDAR MÓVIL GLOBAL: BOTONES CTA Y FAQ EN LANDINGS
   ======================================================= */
@media (max-width: 767px) {
    
    .button_theme, 
    .column_attr a.button_theme {
        padding: 8px 12px !important; /* Reduce la altura general */
        min-height: auto !important;
    }
    
    .button_theme .button_label {
        font-size: 14px !important;    /* Letra más proporcionada en móvil (de 16px baja a 14px) */
        padding: 8px 0 !important;     /* Menos relleno vertical */
    }
}

/* =======================================================
   EXCEPCIÓN MÓVIL: TÍTULO DEL FORMULARIO EN 21px
   ======================================================= */
@media (max-width: 767px) {
    .seo-form-box h2,
    .seo-form-box h2 span {
        font-size: 21px !important;
    }
}

/* =======================================================
   ESCRITORIO (PC): Flujo natural e inline sin romper nada
   ======================================================= */
.metodologia-title {
    display: inline !important;
}

.metodologia-desc {
    display: inline !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
}


/* =======================================================
   MÓVILES: Acordeón inteligente y limpio
   ======================================================= */
@media (max-width: 767px) {
    .metodologia-item {
        cursor: pointer !important;
    }

    /* El título pasa a comportarse como bloque interactivo con el ícono + */
    .metodologia-title {
        display: block !important;
        cursor: pointer !important;
    }

    .metodologia-title::after {
        content: " +";
        color: #F25555;
        font-weight: 700;
        float: right;
    } 

    /* El texto de la descripción se oculta por defecto en móvil */
    .metodologia-desc {
        display: block !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease !important;
        opacity: 0 !important;
        margin-top: 0 !important;
    }

    /* Al abrirse (clase is-open generada por JS) */
    .metodologia-item.is-open .metodologia-desc {
        max-height: 300px !important;
        opacity: 1 !important;
        margin-top: 6px !important;
    }

    .metodologia-item.is-open .metodologia-title::after {
        content: " −";
    }
}

/* Tarjetas METODOLOGIA*/
    .card-metodo {
        background: #ffffff;
        border: 1px solid #f1f5f9;
        padding: 45px 35px;
        border-radius: 16px;
        transition: all 0.4s ease;
        height: 100%;
    }
    
    .card-metodo:hover {
        border-color: #e2e8f0;
        box-shadow: 0 20px 40px rgba(15, 39, 56, 0.05);
        transform: translateY(-5px);
    }
    
    
/* =======================================================
   DISEÑO WEB: CLON EXACTO DE PACKS 360 PARA MÓVILES
   ======================================================= */
/* --- 1. PC: MANTENER DISEÑO ORIGINAL INTACTO --- */
.dw-card { background: transparent; border: none; padding: 0; box-shadow: none; text-align: left; display: flex; flex-direction: column; height: 100%; }
.dw-badge-top { display: none; } /* Oculto en PC */

.dw-card h3 { font-family: 'Red Hat Display', sans-serif; font-weight: 800; font-size: 18px; color: #0F2738; margin: 0 0 5px 0; }
.dw-card hr { border: none; height: 1px; background: rgba(15,39,56,0.06); margin: 0 0 15px 0; width: 100%; }
.dw-card ul { list-style: none; padding: 0; margin: 12px 0; }
.dw-card ul li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 12.5px; color: #64748b; text-align: left; }
.dw-card ul li i { margin-top: 2px; flex-shrink: 0; }

/* Cajas de Precio PC */
.dw-footer { display: flex; align-items: center; justify-content: center; gap: 15px; padding: 15px 20px; border-radius: 30px; margin-top: auto; width: 100%; box-sizing: border-box; }
.dw-footer.normal { background: #f1f5f9; border: 1px solid #e2e8f0; }
.dw-footer.featured { background: #0F2738; border: 1px solid rgba(255,255,255,0.1); }

.dw-price-col { text-align: center; min-width: 120px; line-height: 1.1; }
.dw-price-val { font-size: 26px; font-weight: 800; }
.dw-footer.normal .dw-price-val { color: #0F2738; }
.dw-footer.featured .dw-price-val { color: #fff; }

.dw-divider { width: 1px; height: 30px; }
.dw-footer.normal .dw-divider { background: #e2e8f0; }
.dw-footer.featured .dw-divider { background: rgba(255,255,255,0.1); }

.dw-btn { padding: 12px 25px; border-radius: 50px; font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.3s; border: none; white-space: nowrap; flex-grow: 1; max-width: 200px; }
.dw-footer.normal .dw-btn { background: #F25555; color: #fff; box-shadow: 0 4px 12px rgba(242,85,85,0.2); }
.dw-footer.featured .dw-btn { background: #fff; color: #0F2738; }

/* Control de Textos JS en PC */
.dw-badge-ahorra { display: none; } /* Ocultamos el badge amarillo/rojo en PC */
.dw-old-text { font-size: 10px; display: block; margin-bottom: 2px; }
.dw-footer.normal .dw-old-text { color: #94a3b8; }
.dw-footer.featured .dw-old-text { color: rgba(255,255,255,0.5); }
.dw-old-text span { text-decoration: line-through; }

/* --- 2. MÓVIL: CLON EXACTO PACKS 360 --- */
@media (max-width: 767px) {
    .dw-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 23px; box-shadow: 0 10px 30px rgba(15,39,56,0.04); position: relative; margin-top: 10px !important; }
    
    /* Bordeado rosado sutil y sombra en la tarjeta destacada */
    .dw-card.featured-card { 
        border: 1px solid rgba(242, 85, 85, 0.22) !important; 
        box-shadow: 0 12px 40px rgba(242, 85, 85, 0.09) !important; 
        overflow: visible !important; 
    }
    
    /* Etiqueta "MÁS VENDIDO" con menos bordes redondeados (estilo rectangular suave) */
    .dw-badge-top { 
        display: block; 
        position: absolute; 
        top: -11px !important;
        left: 50%; 
        transform: translateX(-50%); 
        background: #0F2738; 
        color: #fff; 
        padding: 5px 16px; 
        border-radius: 6px !important; 
        font-size: 11px; 
        font-weight: 800; 
        text-transform: uppercase; 
        letter-spacing: 0.05em; 
        box-shadow: 0 2px 6px rgba(0,0,0,0.2); 
        z-index: 2; 
        white-space: nowrap; 
    }
    
    .dw-card h3 { font-size: 19px; letter-spacing: -0.02em; margin-bottom: 5px; text-align: center; }
    
    /* Título rojo secundario centrado */
    .dw-card > span { 
        text-align: center !important; 
        display: block !important; 
        width: 100% !important; 
    }

    .dw-card hr { margin: 20px 0; }
    .dw-card ul { margin: 0 0 25px 0; }
    .dw-card ul li { font-size: 13px!important; line-height: 1.6; margin-bottom: 10px; gap: 8px; text-align: left !important; justify-content: flex-start !important; }
    .dw-card ul li i { font-size: 12px; margin-top: 4px; }
    
    /* Reemplazo de Caja de Precios Móvil */
    .dw-footer { flex-direction: column; padding: 20px; border-radius: 10px; border: none; margin-top: auto; width: 100%; gap: 0; }
    .dw-footer.normal { background: #f8f9fb; } /* Gris muy sutil */
    .dw-footer.featured,
    .dw-card.featured-card .dw-footer { background: #fef2f2 !important; } /* Rosado sutil universal para destacados */
    
    .dw-divider { display: none; }
    .dw-price-col { text-align: center; width: 100%; padding-top: 5px; }
    
    /* Badges de descuento exactos */
    .dw-price-discount-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 5px; }
    .dw-badge-ahorra { display: inline-block; padding: 4px 12px; border-radius: 6px; font-weight: 800; font-size: 11px; letter-spacing: 0.03em; margin-bottom: 10px; }
    .dw-badge-yellow { background: #fef08a; color: #713f12; border: 1px solid #fde047; }
    .dw-badge-red { background: rgba(242,85,85,0.08); color: #F25555; border: 1px solid rgba(242,85,85,0.15); }
    
    .dw-old-text { font-size: 12px; color: #94a3b8; margin-bottom: 2px; }
    .dw-footer.featured .dw-old-text { color: #94a3b8; }
    
    .dw-price-val { font-size: 30px; letter-spacing: -0.03em; margin: 2px 0 4px 0; color: #0F2738 !important; }
    
    .dw-btn { width: 100%; max-width: 100%; border-radius: 10px; padding: 14px 20px; margin-top: 15px; font-size: 14px; box-shadow: none; }
    .dw-footer.normal .dw-btn { background: #0F2738; color: #fff; } /* Botón oscuro (E-commerce) */
    .dw-footer.featured .dw-btn { background: #F25555; color: #fff; box-shadow: 0 4px 12px rgba(242,85,85,0.3); } /* Botón rojo (Corporativo) */
    
    /* Forzar botón rojo y fondo rosado en cualquier tarjeta destacada sin importar su ID */
    .dw-card.featured-card .dw-footer { background: #fef2f2 !important; }
    .dw-card.featured-card .dw-btn { background: #F25555 !important; color: #fff !important; box-shadow: 0 4px 12px rgba(242,85,85,0.3) !important; }
}

/* ==============================================================
   EFECTO DE BRILLO (SHIMMER) - EXCLUSIVO PARA MÓVILES (Max 767px)
============================================================== */
@media (max-width: 767px) {
    .card-purpose-saas--featured button,
    .featured-card .dw-btn {
        position: relative;
        overflow: hidden;
    }

    .card-purpose-saas--featured button::after,
    .featured-card .dw-btn::after {
        content: '';
        position: absolute;
        top: 0; 
        left: -100%;
        width: 60%; 
        height: 100%;
        /* Destello blanco sutil al 35% de opacidad */
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
        transform: skewX(-20deg);
        animation: shimmerFlashGlobal 9s infinite;
    }

    @keyframes shimmerFlashGlobal {
        0% { left: -100%; }
        30% { left: 200%; } /* Barrido fluido y elegante */
        100% { left: 200%; } /* Pausa antes de repetir */
    }
}


/* ═══════════════════════════════════════════
   FRANJA DE AUTORIDAD GLOBAL DE LANDINGS
═══════════════════════════════════════════ */

.hnw-landing-authority {
    padding:20px 0;
    background:linear-gradient(180deg,#1a364d 0%,#030b11 100%)!important;
    border:0;
}

.hnw-landing-authority__item {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.hnw-landing-authority__icon {
    display:block;
    width:40px;
    height:40px;
    flex:0 0 40px;
    color:#fff;
    opacity:.72;
}

.hnw-landing-authority__icon svg {
    display:block;
    width:100%;
    height:100%;
    fill:none;
    stroke:#fff;
    stroke-width:1.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.hnw-landing-authority__icon--partner {
	display:flex;
	align-items:center;
	justify-content:center;
	width:54px;
	height:44px;
	flex:0 0 54px;
	opacity:1!important;
}

.hnw-landing-authority__icon--partner img {
	display:block;
	width:54px;
	height:auto;
	max-height:44px;
	object-fit:contain;
	opacity:1;
	filter:none;
}

.hnw-landing-authority__copy {
    text-align:left;
}

.hnw-landing-authority__item strong {
    display:block;
    color:#fff;
    font-size:17px;
    font-weight:700;
}

.hnw-landing-authority__item span {
    display:block;
    color:rgba(255,255,255,.65);
    font-size:12px;
}

.hnw-landing-authority__icon:not(.hnw-landing-authority__icon--partner) {
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.16);
}

.hnw-landing-authority__item strong > span {
    display:inline!important;
    color:#F25555!important;
    font-size:inherit!important;
    font-weight:inherit!important;
    line-height:inherit!important;
}

.hnw-landing-authority__item--center {
    border-left:1px solid rgba(255,255,255,.14);
    border-right:1px solid rgba(255,255,255,.14);
}

@media only screen and (max-width:767px) {
    .hnw-landing-authority {
        display:none!important;
    }
}


/* ═══════════════════════════════════════════
   PUENTE DE CONVERSIÓN GLOBAL DE LANDINGS
═══════════════════════════════════════════ */

.hnw-landing-bridge {
    padding:48px 0;
    background:linear-gradient(180deg,#1a364d 0%,#030b11 100%)!important;
}

.hnw-landing-bridge__inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
}

.hnw-landing-bridge__copy {
    max-width:650px;
}

.hnw-landing-bridge__copy h2 {
    margin:0 0 8px;
    color:#fff;
    font-size:30px;
    line-height:1.2;
    font-weight:700;
}

.hnw-landing-bridge__copy p {
    margin:0;
    color:rgba(255,255,255,.70);
    font-size:14px;
    line-height:1.6;
}

.hnw-landing-bridge__actions {
    display:flex;
    align-items:center;
    gap:12px;
    flex:0 0 auto;
}

.hnw-landing-bridge__primary,
.hnw-landing-bridge__secondary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:54px!important;
    padding:0 11px!important;
    border-radius:7px;
    font-size:14px!important;
    font-weight:600;
    text-decoration:none!important;
    transition:.2s ease;
}

.hnw-landing-bridge__primary {
    border:1px solid #F25555;
    background:#F25555;
    color:#fff!important;
}

.hnw-landing-bridge__primary:hover {
    background:#df4747;
    border-color:#df4747;
    color:#fff!important;
    transform:translateY(-2px);
}

.hnw-landing-bridge__secondary {
    border:1px solid rgba(255,255,255,.28);
    background:transparent;
    color:#fff!important;
}

.hnw-landing-bridge__secondary:hover {
    border-color:rgba(255,255,255,.65);
    background:rgba(255,255,255,.06);
    color:#fff!important;
}

@media only screen and (max-width:767px) {
    .hnw-landing-bridge {
        padding:38px 0;
    }

    .hnw-landing-bridge__inner {
        display:block;
        text-align:center;
    }

    .hnw-landing-bridge__copy h2 {
        font-size:31px!important;
        line-height:1.18;
    }

    .hnw-landing-bridge__copy p {
        display:none;
    }

    .hnw-landing-bridge__actions {
        justify-content:center;
        margin-top:22px;
    }

    .hnw-landing-bridge__primary,
    .hnw-landing-bridge__secondary {
        min-height:49px;
        padding:0 20px;
        font-size:12px;
    }
}



/* ═══════════════════════════════════════════
   CIERRE GLOBAL DE LANDINGS
═══════════════════════════════════════════ */

.hnw-landing-close {
    padding:120px 0;
    background:linear-gradient(180deg,#1a364d 0%,#030b11 100%)!important;
    color:#fff;
}

.hnw-landing-close__copy {
    max-width:660px;
    padding-right:55px;
}

.hnw-landing-close__copy h2 {
    margin:0 0 24px;
    color:#fff;
    font-size:40px;
    line-height:1.12;
    font-weight:800;
    letter-spacing:-1px;
}

.hnw-landing-close__copy h2 span {
    color:#F25555;
}

.hnw-landing-close__copy p {
    max-width:610px;
    margin:0 0 32px;
    color:rgba(255,255,255,.70);
    font-size:16px;
    line-height:1.7;
}

.hnw-landing-close__copy p strong {
    color:#fff;
}

.hnw-landing-close__cta {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:54px!important;
    padding:0 24px!important;
    border-radius:7px;
    background:#F25555;
    color:#fff!important;
    font-size:14px!important;
    font-weight:700;
    text-decoration:none!important;
    transition:.2s ease;
}

.hnw-landing-close__cta:hover {
    background:#df4747;
    color:#fff!important;
    transform:translateY(-2px);
}

.hnw-landing-close__system {
    position:relative;
    max-width:460px;
    margin-left:auto;
    padding:31px 32px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:18px;
    background:rgba(255,255,255,.035);
}

.hnw-landing-close__system-title {
    margin:0 0 27px;
    color:rgba(255,255,255,.48);
    font-size:10px;
    font-weight:800;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.hnw-landing-close__flow {
    position:relative;
}

.hnw-landing-close__item {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:32px 1fr;
    gap:15px;
    align-items:center;
    padding:15px 0;
}

.hnw-landing-close__item:not(:last-child)::before,
.hnw-landing-close__item:not(:last-child)::after {
    content:"";
    position:absolute;
    left:15px;
    top:var(--hnw-line-top, 46px);
    height:var(--hnw-line-height, 50px);
    pointer-events:none;
    transform-origin:top center;
}

.hnw-landing-close__item:not(:last-child)::before {
    z-index:0;
    width:1px;
    background:rgba(255,255,255,.13);
}

.hnw-landing-close__item:not(:last-child)::after {
    z-index:1;
    left:14.5px;
    width:2px;
    border-radius:999px;
    background:linear-gradient(
        180deg,
        rgba(242,85,85,.58) 0%,
        #F25555 50%,
        rgba(242,85,85,.72) 100%
    );
    box-shadow:0 0 6px rgba(242,85,85,.16);
    transform:scaleY(0);
    transition:transform .7s cubic-bezier(.45,0,.2,1);
}

.hnw-landing-close__item.is-linked::after {
    transform:scaleY(1);
}

.hnw-landing-close__node {
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    width:31px;
    height:31px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    background:#132d41;
    box-shadow:0 0 0 rgba(242,85,85,0);
    transition:
        background .45s ease,
        border-color .45s ease,
        box-shadow .45s ease,
        transform .45s ease;
}

.hnw-landing-close__node::before {
    content:"";
    position:absolute;
    inset:-7px;
    border:1px solid rgba(242,85,85,0);
    border-radius:50%;
    opacity:0;
    transform:scale(.76);
}

.hnw-landing-close__node::after {
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(255,255,255,.28);
    box-shadow:none;
    transition:
        background .4s ease,
        box-shadow .4s ease,
        transform .4s ease;
}

.hnw-landing-close__item.is-active .hnw-landing-close__node {
    background:#F25555;
    border-color:#F25555;
    box-shadow:
        0 0 0 1px rgba(242,85,85,.10),
        0 0 12px rgba(242,85,85,.16);
    animation:hnwSeoNodeArrival .65s cubic-bezier(.2,.8,.2,1) 1;
}

.hnw-landing-close__item.is-active .hnw-landing-close__node::before {
    animation:
        hnwSeoRingArrival .85s ease-out 1,
        hnwSeoRingPulse 2.8s ease-in-out .9s infinite;
}

.hnw-landing-close__item.is-active .hnw-landing-close__node::after {
    background:#fff;
    animation:hnwSeoDotPulse 2.8s ease-in-out .9s infinite;
}

@keyframes hnwSeoNodeArrival {
    0% {
        transform:scale(.92);
        box-shadow:0 0 0 rgba(242,85,85,0);
    }

    45% {
        transform:scale(1.08);
        box-shadow:0 0 18px rgba(242,85,85,.24);
    }

    100% {
        transform:scale(1);
        box-shadow:
            0 0 0 1px rgba(242,85,85,.10),
            0 0 12px rgba(242,85,85,.16);
    }
}

@keyframes hnwSeoRingArrival {
    0% {
        opacity:.55;
        transform:scale(.68);
        border-color:rgba(242,85,85,.65);
    }

    100% {
        opacity:0;
        transform:scale(1.28);
        border-color:rgba(242,85,85,0);
    }
}

@keyframes hnwSeoRingPulse {
    0%,
    100% {
        opacity:0;
        transform:scale(1);
        border-color:rgba(242,85,85,0);
    }

    45% {
        opacity:.28;
        transform:scale(1.18);
        border-color:rgba(242,85,85,.42);
    }

    70% {
        opacity:0;
        transform:scale(1.32);
        border-color:rgba(242,85,85,0);
    }
}

@keyframes hnwSeoDotPulse {
    0%,
    100% {
        transform:scale(1);
        box-shadow:0 0 3px rgba(255,255,255,.22);
    }

    50% {
        transform:scale(1.22);
        box-shadow:
            0 0 5px rgba(255,255,255,.55),
            0 0 9px rgba(242,85,85,.32);
    }
}

.hnw-landing-close__item strong {
    display:block;
    margin-bottom:3px;
    color:rgba(255,255,255,.72);
    font-size:15px;
    font-weight:700;
    transition:color .45s ease;
}

.hnw-landing-close__item > div > span {
    display:block;
    color:rgba(255,255,255,.43);
    font-size:12px;
    line-height:1.45;
    transition:color .45s ease;
}

.hnw-landing-close__item.is-active strong {
    color:#fff;
}

.hnw-landing-close__item.is-active > div > span {
    color:rgba(255,255,255,.67);
}

.hnw-landing-close__result {
    margin-top:20px;
    padding:18px 0 0 47px;
    border-top:1px solid rgba(255,255,255,.08);
}

.hnw-landing-close__result span {
    display:block;
    margin-bottom:3px;
    color:#F25555;
    font-size:10px;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.hnw-landing-close__result strong {
    color:#fff;
    font-size:15px;
    font-weight:700;
}

@media only screen and (max-width:767px) {
    .hnw-landing-close {
        padding:80px 0;
    }

    .hnw-landing-close__copy {
        padding-right:0;
        text-align:center;
    }

    .hnw-landing-close__copy h2 {
        font-size:30px!important;
        line-height:1.15;
    }

    .hnw-landing-close__copy p {
        font-size:14px;
        line-height:1.65;
    }

    .hnw-landing-close__cta {
        min-height:50px!important;
        padding:0 20px!important;
        font-size:13px!important;
    }

    .hnw-landing-close__system {
        margin-top:45px;
        padding:25px 22px;
        text-align:left;
    }

    .hnw-landing-close__system-title {
        text-align:center;
        margin-bottom:18px;
    }

    .hnw-landing-close__item {
        padding:12px 0;
    }

    .hnw-landing-close__item strong {
        font-size:14px;
    }

    .hnw-landing-close__item span {
        font-size:11px;
    }

    .hnw-landing-close__result {
        padding-left:47px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .hnw-landing-close__item::after {
        transition:none!important;
    }

    .hnw-landing-close__node,
    .hnw-landing-close__node::before,
    .hnw-landing-close__node::after {
        animation:none!important;
        transition:none!important;
    }

    .hnw-landing-close__item.is-linked::after {
        transform:scaleY(1);
    }
}

/* =========================================================
   LANDINGS HNW — TABLET APILADO
   767px a 879px
   Copy + diagnóstico + formulario ancho
   ========================================================= */

@media only screen and (min-width:767px) and (max-width:879.98px) {

    #Content .hnw-landing-hero {
        padding: 145px 0 75px !important;
    }

    .hnw-landing-hero > .container > .row > .col-md-8,
    .hnw-landing-hero > .container > .row > .hnw-landing-hero__form-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .hnw-landing-hero__content {
        padding-right: 0 !important;
    }

    .hnw-landing-hero__badge {
        display: inline-flex !important;
    }

    .hnw-landing-hero .seo-hero-title span.hide-mobile {
        display: inline !important;
    }

    .hnw-landing-hero__intro {
        display: block !important;
    }

    .hnw-landing-hero__diagnostic {
        display: flex !important;
    }

    .hnw-landing-hero__actions {
        display: flex !important;
    }

    .hnw-landing-hero__scope {
        display: none !important;
    }

    .hnw-landing-hero__form-col {
        top: auto !important;
        margin-top: 34px !important;
    }

    .hnw-landing-hero__form-col .seo-form-box {
        width: 100% !important;
        max-width: 720px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

        .hnw-landing-hero__form-col .seo-form-box > p {
        display: block !important;
    }

    .hnw-landing-authority.hide-mobile {
        display: block !important;
    }

    .hnw-landing-authority > .container > .row {
        flex-wrap: nowrap !important;
    }

    .hnw-landing-authority > .container > .row > .col-md-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

/* --- EFECTO "PEEK" (ASOMAR TARJETA) EXCLUSIVO PARA MÓVILES
@media (max-width: 767px) {
    .offer_ul .slick-list {
        padding-right: 15% !important;
        padding-left: 0px !important;
    }
    
    .offer_ul .slick-slide {
        margin-right: 15px !important;
        opacity: 0.5;
        transition: opacity 0.3s ease;
    }
    
    .offer_ul .slick-slide.slick-active {
        opacity: 1;
    }
}
 --- */