/* Importar Bootstrap Icons para los iconos de reloj, whatsapp e info */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css');


html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* MUNDIALISTA */


.intro-top-gen .header-back .headline {
    background-color: transparent !important;
    opacity: 0.91;
    padding: 30px;
    top: 100px;
    position: relative;
}

.intro-top-gen .header-back .headline h1 {
    font-size: 4.1rem !important;
    letter-spacing: normal !important;
}

.intro-top-gen .header-back .headline h1 span {
    font-family: 'PulsoRegular' !important;
    font-size: 4.1rem;
    letter-spacing: normal;
    
}

.intro-top-gen .header-back .headline h2 {
    font-family: 'PulsoLight' !important;
    font-size: 4.1rem;
    letter-spacing: normal !important;
}


@media only screen and (max-width: 768px) {
    .intro-top-gen .header-back .headline h1 {
        color: #fff;
        font-family: PulsoLight !important;
        font-size: 4.1rem !important;
        text-transform: none;
    }
}


/* VOLTE SECTION */
/* --- Estilos Generales de la Sección --- */
    .operators-section {
      background-color: #f4f5f6;
      padding: 60px 0;
    }    
    
    
    .operators-section h2{
        font-size: 35px;
        font-weight: 200;
        line-height: 1.2em;
        text-transform: none;
        font-family: 'PulsoLight';
        letter-spacing: 1px;
        margin-bottom: 50px;
    }  

    .operators-section h2 strong{
        font-family: 'PulsoRegular';
    }

    .main-title {
      font-size: 32px;
      color: #1a1a1a;
      margin-bottom: 50px;
      font-weight: 300; /* Estilo ligero */
    }

    .main-title strong {
      font-weight: 500;
    }

    /* --- Contenedor de la Tarjeta --- */
    .operator-card-wrapper {
      position: relative;
      margin-bottom: 30px; /* Separación cuando se apilan en móviles */
    }

    .operator-card {
      background-color: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 40px 20px;
      text-align: center;
      min-height: 180px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
      transition: transform 0.2s ease;
    }

    .operator-card:hover {
      transform: translateY(-2px);
    }

    /* Logos (Ajuste de tamaño responsivo proporcional) */
    .operator-logo {
      max-height: 45px;
      max-width: 80%;
      object-fit: contain;
      margin-bottom: 20px;
      display: block;
    }

    /* Texto de tecnologías soportadas (4G / VoLTE / 5G) */
    .tech-text {
      font-size: 15px;
      color: #1a1a1a;
      font-weight: 500;
      margin: 0;
    }

    /* --- Badge / Etiqueta "RED RECOMENDADA" --- */
    .recommended-badge {
      position: absolute;
      font-family: 'Roboto';
      top: -12px; /* Lo empuja hacia arriba para romper el borde */
      left: 50%;
      transform: translateX(-50%);
      background-color: #53b4e6; /* Celeste característico del flujo */
      color: #ffffff;
      padding: 4px 16px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-radius: 8px;
      z-index: 2;
      white-space: nowrap;
    }

@media (max-width: 768px){
    .operators-section {
      background-color: #f4f5f6; 
      padding: 60px 0;
    }  
}


    /* MEGAPLANES */

        :root {
            --personal-blue: #00B7EB;
            --text-dark: #121212;
            --text-muted: #6c757d;
            --card-border: #e2e8f0;
            --bg-canvas: #ffffff;
        }


         /* --- ENCABEZADO --- */
        .header-section {
            text-align: center;
            margin-bottom: 50px;
        }
        .section-title {
            font-size: 2.5rem;
            font-weight: 400;
            margin-bottom: 8px;
        }
        .section-title strong {
            font-weight: 700;
        }
        .section-subtitle {
            font-size: 1.1rem;
            color: var(--text-muted);
        }


        /* ==========================================================================
           ESTRUCTURA DEL CARRUSEL EN CSS PURO (Radio Button Hack)
           ========================================================================== */
        .carousel-container {
            position: relative;
            width: 100%;
            padding: 60px 30px; /* Espacio lateral seguro para las flechas flotantes */
             /* padding: 60px 0; */

        }


        .carousel-container h2{
            font-size: 35px;
            font-weight: 200;
            line-height: 1.2em;
            text-transform: none;
            font-family: 'PulsoLight';
            letter-spacing: 1px;
        }  
/* 
        .carousel-container h2 strong{
            font-family: 'PulsoRegular';
        } */

       .carousel-container p{
            margin-bottom: 40px;
        } 


        /* Ocultamos los inputs de radio que manejan los estados */
        .carousel-state {
            display: none;
        }

        /* Ventana del carrusel que recorta el contenido excedente */
        .carousel-window {
            overflow: hidden;
            width: 100%;
        }

        /* Riel que contiene todas las páginas horizontalmente */
        .carousel-track {
            display: flex;
            width: 200%; /* 2 páginas = 200% de ancho */
            transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* Cada página del carrusel (Contiene un grupo de 3 columnas) */
        .carousel-page {
            width: 50%; /* Cada página ocupa exactamente la mitad del riel (el 100% de la ventana) */
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
            gap: 24px;
            padding: 10px;
        }

        /* --- LÓGICA DE TRASLACIÓN CON CSS --- */
        #page1:checked ~ .carousel-window .carousel-track {
            transform: translateX(0%);
        }
        #page2:checked ~ .carousel-window .carousel-track {
            transform: translateX(-50%);
        }

        /* --- CONTROLES: FLECHAS FLOTANTES --- */
        .arrow-control {
            display: none; /* Se maneja dinámicamente según el radio seleccionado */
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 46px;
            height: 46px;
            background-color: #ffffff;
            border: 1px solid var(--card-border);
            border-radius: 50%;
            color: var(--text-dark);
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            cursor: pointer;
            z-index: 10;
            transition: all 0.2s ease;
        }
        .arrow-control:hover {
            background-color: var(--personal-blue);
            color: #ffffff;
            border-color: var(--personal-blue);
        }

        /* Mostrar la flecha correcta según el slide activo */
        #page1:checked ~ .arrow-controls .next-to-page2 { display: flex; }
        /* Si está en la página 2, la flecha te regresa a la 1 (efecto bucle) */
        #page2:checked ~ .arrow-controls .next-to-page1 { display: flex; }

        /* --- CONTROLES: PUNTOS INDICADORES (DOTS) --- */
        .carousel-indicators {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 35px;
        }
        .dot-trigger {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #d1d5db;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
        /* Iluminar punto activo */
        #page1:checked ~ .carousel-indicators label[for="page1"] { background-color: var(--personal-blue); }
        #page2:checked ~ .carousel-indicators label[for="page2"] { background-color: var(--personal-blue); }


        /* ==========================================================================
           DISEÑO RETROALIMENTADO DE LAS TARJETAS (PLANES)
           ========================================================================== */
        .plan-card {
            background: #ffffff;
            border: 1px solid var(--card-border);
            border-radius: 20px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 100%;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
            font-family: 'PulsoRegular';            
        }

        .card-plan-header {
            text-align: center;
            padding: 24px 20px 15px 20px;
            font-family: 'PulsoRegular';
            color: #121212;
        }
        .plan-label {
            font-size: 2.6rem;
            margin-bottom: 2px;
        }
        .plan-type {
            font-size: 1.1rem;
            /* font-weight: 700; */
            letter-spacing: 0.5px;
            /* margin-bottom: 8px; */
        }
        .plan-gigabytes {
            font-size: 2.6rem;
            font-weight: 700;
            line-height: 1;
        }
        .plan-naviga {
            font-size: 1.1rem;
            /* font-weight: 700; */
            letter-spacing: 0.5px;
        }

        /* Franja de precios */
        .plan-price-band {
            background-color: var(--personal-blue);
            color: #ffffff;
            padding: 16px 20px;
            text-align: center;
            font-size: 3rem;
            font-weight: 500;
            font-family: 'PulsoRegular';
        }

        /* Beneficios */
        .plan-features-body {
            padding: 24px 30px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            font-family: 'Roboto';
            color: #121212;
        }
        .features-list {
            list-style: none;
            margin-bottom: 0;
        }
        .features-list li {
            position: relative;
            padding-left: 15px;
            font-size: 1.3rem;
            line-height: 1;
            margin-bottom: 10px;
        }
        .features-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            font-weight: bold;
        }

        /* Separador Roaming */
        .roaming-divider {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 20px 0;
            font-size: 1.3rem;
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        .roaming-divider::before,
        .roaming-divider::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid var(--text-dark);
        }
        .roaming-divider:not(:empty)::before { margin-right: .8em; }
        .roaming-divider:not(:empty)::after { margin-left: .8em; }

        /* Botón de acción */
       .btn-plan {
            background-color: var(--personal-blue);
            color: #ffffff;
            border: none;
            border-radius: 8px;
            width: 100%;
            padding: 12px 20px;
            font-size: 1.3rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            margin-top: auto; /* Fuerza el botón abajo si el contenido varía en tamaño */
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
        .btn-plan:hover {
            background-color: #3fa3d6;
        }


         @media (max-width: 992px) {
            .btn-plan {
                font-size: 1.1rem;
            }
            .btn-plan:hover {
                background-color: #3fa3d6;
            }
         }

        /* ==========================================================================
           RESPONSIVE DESIGN (MÓVIL NATIVO CON SWIPE / DESLIZABLE)
           ========================================================================== */
        @media (max-width: 992px) {
            .carousel-page {
                grid-template-columns: repeat(2, 1fr); /* Pasa a 2 columnas en tablets */
            }
            .carousel-track {
                width: 100%; /* Desactivamos el ancho doble para evitar saltos raros */
                display: block;
                transform: none !important;
            }
            .carousel-window {
                overflow: visible;
            }
            /* Pasamos a scroll horizontal directo controlado por el dedo */
            .carousel-container {
                padding: 50px 0;
            }
            .carousel-scroller-mobile {
                display: flex;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                padding-bottom: 15px;
                gap: 16px;
                -webkit-overflow-scrolling: touch;
            }
            .carousel-scroller-mobile::-webkit-scrollbar {
                height: 5px;
            }
            .carousel-scroller-mobile::-webkit-scrollbar-thumb {
                background: #cbd5e1;
                border-radius: 4px;
            }
            .carousel-page {
                display: contents; /* Desarma la grilla para que las tarjetas se alineen en el flex superior */
            }
            .plan-card {
                flex: 0 0 290px; /* Ancho fijo para cada tarjeta en móvil */
                scroll-snap-align: center;
            }
            /* Escondemos los controles innecesarios en móviles */
            .arrow-control {
                display: none !important;
            }
        }




/* PACKS SECTION */

    /* --- Estilos Generales de la Sección --- */
    .packs-section {
      background-color: #f4f5f6; /* Fondo gris claro de la captura */
      padding: 60px 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }    
    
    .packs-section h2{
        font-size: 35px;
        font-weight: 200;
        line-height: 1.2em;
        text-transform: none;
        font-family: 'PulsoLight';
        letter-spacing: 1px;
    }

    .header-container {
      margin-bottom: 40px;
    }

    .main-title {
      font-size: 32px;
      color: #1a1a1a;
      margin-top: 0;
      margin-bottom: 10px;
      font-weight: 300;
    }

    .main-title strong {
      font-weight: 500;
    }

    .subtitle {
      font-size: 16px;
      color: #718096;
      margin: 0;
    }

    /* --- Tarjetas de Packs --- */
    .pack-card-container {
      margin-bottom: 30px; /* Separación al apilarse en móviles */
    }

    .pack-card {
      background-color: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
      text-align: left;
      overflow: hidden;
      transition: transform 0.2s ease;
    }

    .pack-card:hover {
      transform: translateY(-2px);
    }

    /* Encabezado interno de la tarjeta */
    .card-header-top {
      padding: 25px 25px 15px 25px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    /* Fix para flexbox en navegadores antiguos compatibles con BS3 */
    .card-header-top {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      font-family: 'PulsoRegular';
    }
    .left-box {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }

    .pack-size {
      font-family: 'PulsoRegular';  
      font-size: 28px;
      /* font-weight: 800; */
      color: #1a1a1a;
      margin: 0;
      line-height: 1.1;
      letter-spacing: normal;
    }

    .pack-label {
      font-size: 12px;
      color: #a0aec0;
      text-transform: uppercase;
      letter-spacing: normal;
      display: block;
      margin-top: 4px;
    }

    .pack-price {
      font-size: 26px;
      /* font-weight: 700; */
      color: #1a1a1a;
      white-space: nowrap;
      margin-top: 5px;
    }

    .pack-price .currency {
      font-size: 14px;
      font-weight: 400;
      color: #1a1a1a;
    }

    /* Cuerpo interno de la tarjeta */
    .card-body-content {
      padding: 0 25px 25px 25px;
    }

    .divider {
      border-top: 1px solid #edf2f7;
      margin-top: 10px;
      margin-bottom: 20px;
    }

    /* Características (Iconos simulados con CSS plano para no requerir librerías extra) */
    .feature-item {
      font-size: 13.5px;
      color: #4a5568;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
    }

    .feature-item .icon {
      margin-right: 10px;
      font-size: 16px;
      display: inline-block;
      width: 16px;
      text-align: center;
    }

    /* .icon-clock { color: #718096; }
    .icon-whatsapp { color: #25d366; font-weight: bold; } */

    /* Botón Celeste */
    .btn-subscribe {
      background-color:  var(--personal-blue);
      color: #ffffff;
      border: none;
      border-radius: 10px;
      width: 100%;
      padding: 12px 20px;
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: 10px;
      transition: background-color 0.2s ease;
    }

    .btn-subscribe:hover, .btn-subscribe:focus {
      background-color: #3fa1d4;
      color: #ffffff;
      outline: none;
    }







    /* --- Nuevo Componente: Acordeón de Ancho Total --- */
    .accordion-container {
      margin-top: 10px;
      margin-bottom: 35px;
    }

    .custom-accordion-panel {
      background-color: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 14px !important; /* Esquinas curvas integradas */
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
      overflow: hidden;
        margin: 0 12px;  
    }

    /* Botón disparador del acordeón */
    .accordion-trigger {
      width: 100%;
      background: none;
      border: none;
      padding: 10px 25px;
      text-align: center;
      font-size: 14px;
      /* font-family: 'PulsoLight'; */
      /* font-weight: 600; */
      color: #4a5568;
      display: flex;
      justify-content: space-between;
      align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      outline: none;
       font-family: 'PulsoRegular';
    }
    
    .accordion-trigger:focus, .accordion-trigger:active {
      outline: none;
    }

    .accordion-trigger .trigger-text {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }

    /* Icono de flecha animado */
    .arrow-icon {
      font-size: 12px;
      color: #718096;
      transition: transform 0.2s ease;
      float: right;
    }

    /* Rotación de la flecha cuando el acordeón está abierto */
    .accordion-trigger[aria-expanded="true"] .arrow-icon {
      transform: rotate(180deg);
    }

    /* Contenido interno colapsable */
    .accordion-body-custom {
      padding: 0 25px 25px 25px;
      color: #4a5568;
      font-size: 14px;
      line-height: 1.6;
      border-top: 1px solid #edf2f7;
    }

     .accordion-body-custom p{
      color: #4a5568;
      font-size: 12px;
      margin-bottom: 2px;
      font-weight: 600;
    } 

    .purchase-steps {
      /* margin-top: 6px; */
      padding-left: 20px;
    }


    .purchase-steps li {
      /* margin-bottom: 8px; */
      color: #4a5568;
      font-size: 12px;  
    }




    /* --- Indicadores de Carrusel Inferiores (Estáticos) --- */
    /* .carousel-dots {
      margin-top: 10px;
      margin-bottom: 40px;
    } */
    
    /* .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #cbd5e1;
      display: inline-block;
      margin: 0 4px;
    }

    .dot.active {
      background-color: #53b4e6;
    } */

    /* --- Alerta de Advertencia Inferior --- */
    .custom-warning-alert {
      background-color: #ffeef2; 
      border: 1px solid #ffd0db;
      border-radius: 40px; 
      padding: 12px 25px;
      color: #1a1a1a;
      font-size: 13.5px;
      /* display: inaline-block; */
      text-align: center;
      margin: 0 12px;
    }

    .custom-warning-alert strong {
      font-weight: 700;
    }

    .alert-icon {
      color: #718096;
      margin-right: 6px;
      font-weight: bold;
    }




















    .volte-section {
      background-color: #ffffff;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #1a1a1a;
      padding: 50px 0;
    }   
    
    .volte-section h2 {
        font-size: 35px;
        font-weight: 200;
        line-height: 1.2em;
        text-transform: none;
        font-family: 'PulsoLight';
        letter-spacing: 1px;
    }

    .volte-section .warning-volte {
        margin: 35px 10px;
    }    
    
    .volte-section .warning-volte p i {
        margin: 0 5px;
    }

    .android-icon {
      color: #3ddc84;
    }

    .ios-icon {
      color: #9ca3af;
    }

    .flow-type-title {
      font-size: 1.8rem;
      color: #1a1a1a;
      margin-bottom: 2rem;
      margin-top: 2rem;
    }

    /* --- Contenedor de la Tarjeta --- */
    .flow-card {
      background-color: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 2.5rem 1.5rem;
      box-shadow: 0 2px 4px rgba(0,0,0,0.02);
      position: relative;
      margin: 0 15px;
    }

    /* --- ESTRUCTURA DEL CARRUSEL EN CSS PURO --- */
    .custom-carousel {
      position: relative;
      width: 100%;
      overflow: hidden;
    }

    /* Ocultamos los radio buttons */
    .carousel-state {
      display: none;
    }

    /* Contenedor de las diapositivas */
    .carousel-slides {
      display: flex;
      width: 500%; /* Por defecto 5 slides */
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Caso especial iOS Dual SIM (6 slides) */
    .carousel-slides.six-slides {
      width: 600%;
    }

    .carousel-slides h3 {
      font-size: 1.5rem;
      font-family: 'PulsoRegular';
    }    
    
    .carousel-slides p {
      font-size: 1.5rem;
      font-family: 'PulsoRegular';
    }

    .carousel-slide-item {
      width: 20%; 
      flex-shrink: 0;
      text-align: center;
      position: relative; /* Para posicionar la flecha dentro de cada slide */
    }

    .carousel-slides.six-slides .carousel-slide-item {
      width: 16.666%;
    }

    .phone-mockup {
      max-width: 240px;
      width: 100%;
      height: auto;
      border-radius: 24px;
      display: block;
      margin: 0 auto 1.5rem auto;
    }

    .step-title {
      font-size: 1.1rem;
      color: #1a1a1a;
    }

    .step-desc {
      font-size: 0.9rem;
      color: #718096;
    }

    /* --- CONTROL DE DESPLAZAMIENTO --- */
    #sim-1:checked ~ .carousel-slides { transform: translateX(0%); }
    #sim-2:checked ~ .carousel-slides { transform: translateX(-20%); }
    #sim-3:checked ~ .carousel-slides { transform: translateX(-40%); }
    #sim-4:checked ~ .carousel-slides { transform: translateX(-60%); }
    #sim-5:checked ~ .carousel-slides { transform: translateX(-80%); }

    #dual-1:checked ~ .carousel-slides { transform: translateX(0%); }
    #dual-2:checked ~ .carousel-slides { transform: translateX(-20%); }
    #dual-3:checked ~ .carousel-slides { transform: translateX(-40%); }
    #dual-4:checked ~ .carousel-slides { transform: translateX(-60%); }
    #dual-5:checked ~ .carousel-slides { transform: translateX(-80%); }

    #sim-ios-1:checked ~ .carousel-slides { transform: translateX(0%); }
    #sim-ios-2:checked ~ .carousel-slides { transform: translateX(-20%); }
    #sim-ios-3:checked ~ .carousel-slides { transform: translateX(-40%); }
    #sim-ios-4:checked ~ .carousel-slides { transform: translateX(-60%); }
    #sim-ios-5:checked ~ .carousel-slides { transform: translateX(-80%); }

    #dual-ios-1:checked ~ .carousel-slides { transform: translateX(0%); }
    #dual-ios-2:checked ~ .carousel-slides { transform: translateX(-16.666%); }
    #dual-ios-3:checked ~ .carousel-slides { transform: translateX(-33.333%); }
    #dual-ios-4:checked ~ .carousel-slides { transform: translateX(-50%); }
    #dual-ios-5:checked ~ .carousel-slides { transform: translateX(-66.666%); }
    #dual-ios-6:checked ~ .carousel-slides { transform: translateX(-83.333%); }

    /* --- PAGINACIÓN POR PUNTOS --- */
    .custom-indicators {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 1.5rem;
    }

    .indicator-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #cbd5e1;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    #sim-1:checked ~ .custom-indicators .dot-1,
    #sim-2:checked ~ .custom-indicators .dot-2,
    #sim-3:checked ~ .custom-indicators .dot-3,
    #sim-4:checked ~ .custom-indicators .dot-4,
    #sim-5:checked ~ .custom-indicators .dot-5,
    #dual-1:checked ~ .custom-indicators .dot-1,
    #dual-2:checked ~ .custom-indicators .dot-2,
    #dual-3:checked ~ .custom-indicators .dot-3,
    #dual-4:checked ~ .custom-indicators .dot-4,
    #dual-5:checked ~ .custom-indicators .dot-5, 
    #sim-ios-1:checked ~ .custom-indicators .dot-1,
    #sim-ios-2:checked ~ .custom-indicators .dot-2,
    #sim-ios-3:checked ~ .custom-indicators .dot-3,
    #sim-ios-4:checked ~ .custom-indicators .dot-4,
    #sim-ios-5:checked ~ .custom-indicators .dot-5,
    #dual-ios-1:checked ~ .custom-indicators .dot-1,
    #dual-ios-2:checked ~ .custom-indicators .dot-2,
    #dual-ios-3:checked ~ .custom-indicators .dot-3,
    #dual-ios-4:checked ~ .custom-indicators .dot-4,
    #dual-ios-5:checked ~ .custom-indicators .dot-5,
    #dual-ios-6:checked ~ .custom-indicators .dot-6 {
      background-color: #00a3e0;
    }

    /* --- CONTROLES DE FLECHAS (SIEMPRE VISIBLES) --- */
    .arrow-next {
      position: absolute;
      right: 10px;
      top: 35%;
      width: 40px;
      height: 40px;
      background-color: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1a1a1a;
      box-shadow: 0 4px 6px rgba(0,0,0,0.05);
      cursor: pointer;
      z-index: 20;
      transition: background-color 0.2s, transform 0.1s;
    }

    .arrow-next:hover {
      background-color: #f8fafc;
      transform: scale(1.05);
    }

    .note-text {
      font-size: 1.1rem;
      color: #4a5568;
      line-height: 1.5;
    }

    @media (max-width: 767.98px) {
      .arrow-next {
        right: 5px;
      }
    }

    .mt-3 { margin-top: 30px; }
    .mt-6 { margin-top: 60px; }




    /* 5G SECTION */

    .section-5g {
      background-color: #ffffff;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #1a1a1a;
      padding: 60px 0;
    }

    .section-5g h2{
        font-size: 35px;
        font-weight: 200;
        line-height: 1.2em;
        text-transform: none;
        font-family: 'PulsoLight';
        letter-spacing: 1px;
        margin-bottom: 50px;
    }  
    
    .section-5g p{

    }

    .main-title {
      font-size: 2.2rem;
    }

    /* Imagen del estadio con esquinas redondeadas */
    .stadium-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 18px;
      min-height: 380px; 
    }

    /* Títulos de bloques (Icono + Texto) */
    .block-subtitle {
      font-size: 2rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
      letter-spacing: 1px;
        margin-top: 30px;
    }

    .icon-danger {
      color: #dc3545; /* Rojo suave para la advertencia */
      font-weight: 800;
            font-weight: 800;

    }

    .icon-success {
      color: #198754; /* Verde para la recomendación */
      font-weight: 800;

    }

    /* Tarjetas de características */
    .feature-card {
      background-color: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 1.5rem 1rem;
      height: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      margin-bottom: 10px;
    }

    .feature-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    /* Iconos internos de las tarjetas */
    .card-icon {
      font-size: 2.5rem;
      color: #718096;
      margin-bottom: 0.75rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* Texto interno de las tarjetas */
    .card-text {
      font-size: 1.4rem;
      color: #2d3748;
      line-height: 1.45;
      margin: 0;
    }



    /* --- RED SECTION --- */
    .manual-network-section {
      background-color: #f4f5f6; /* Fondo gris claro unificado */
      padding: 60px 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #1a1a1a;
    }

    .header-block {
      margin-bottom: 45px;
    }

    .manual-network-section h2{
        font-size: 35px;
        font-weight: 200;
        line-height: 1.2em;
        text-transform: none;
        font-family: 'PulsoLight';
        letter-spacing: 1px;
    }  

    .manual-network-section p{
        font-size: 16px;
        color: #718096;
        margin-bottom: 30px;

    }    

    .main-title {
      font-size: 32px;
      color: #1a1a1a;
      margin-top: 0;
      margin-bottom: 15px;
      font-weight: 500;
    }

    /* .main-title span {
      font-weight: 300;
    } */

    .subtitle-text {
      font-size: 16px;
      color: #718096;
      max-width: 720px;
      margin: 0 auto;
      line-height: 1.5;
    }

    /* --- Tarjetas Blancas --- */
    .os-card-box {
      margin-bottom: 30px; /* Separación responsiva para móviles */
    }

    .os-card {
      background-color: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 40px 35px;
      text-align: left;
      min-height: 460px; /* Mantiene la simetría visual en escritorio */
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
      /* height: 400px; */
    }

    /* Iconos de cabecera */
    .brand-icon {
      font-size: 38px;
      margin-bottom: 12px;
      display: inline-block;
    }

    .icon-android {
      color: #3ddc84; /* Verde Android original */
    }

    .icon-apple1 {
      color: #a0aec0; /* Gris iOS original */
    }

    /* Textos internos de la tarjeta */
    .card-title {
      font-size: 24px;
      font-weight: 600;
      color: #1a1a1a;
      margin-top: 0;
      margin-bottom: 25px;
    }

    .card-subtitle {
      font-size: 14px;
      font-weight: 700;
      color: #1a1a1a;
      margin-top: 20px;
      margin-bottom: 8px;
    }

    /* Listas con puntos personalizados de la captura */
    .steps-navigation {
      list-style: none;
      padding-left: 0;
      margin-bottom: 15px;
    }

    .steps-navigation li {
      font-size: 13.5px;
      color: #4a5568;
      line-height: 1.6;
      margin-bottom: 5px;
      position: relative;
      padding-left: 14px;
    }

    .steps-navigation li::before {
      content: "•";
      position: absolute;
      left: 0;
      color: #718096;
      font-weight: bold;
    }


    /* SECURITY SECTION */

    .security-section {
      background-color: #f4f5f6; /* Fondo gris claro consistente */
      padding: 60px 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #1a1a1a;
    }

    .security-section h2{
        font-size: 35px;
        font-weight: 200;
        line-height: 1.2em;
        text-transform: none;
        font-family: 'PulsoLight';
        letter-spacing: 1px;
    }

    .header-box {
      margin-bottom: 45px;
    }

    .main-title {
      font-size: 32px;
      color: #1a1a1a;
      margin-top: 0;
      margin-bottom: 5px;
      font-weight: 300;
    }

    .main-title strong {
      font-weight: 600;
    }

    /* --- Contenedores de las Cajas de Alerta --- */
    .alert-card-box {
      margin-bottom: 30px; /* Separación en dispositivos móviles */
    }

    .alert-card {
      border-radius: 20px;
      padding: 35px 40px;
      min-height: 290px; /* Alineación simétrica */
      text-align: left;
    }

    /* Variación: Tener cuidado con (Rojo/Rosa) */
    .card-danger {
      background-color: #fff0f2;
      border: 1px solid #ffccd5;
    }

    /* Variación: Recomendado (Verde) */
    .card-success {
      background-color: #e6f7f0;
      border: 1px solid #b3e6d2;
    }

    /* --- Encabezados de Tarjeta --- */
    .card-header-title {
      display: flex;
      align-items: center;
      margin-bottom: 25px;
    }

    /* Fix estructural flexbox para compatibilidad Bootstrap 3 */
    .card-header-title {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }

    .card-header-title h3 {
      font-size: 20px;
      font-weight: 600;
      color: #1a1a1a;
      margin: 0;
      line-height: 1.2;
    }

    /* --- Listas de Consejos / Alertas --- */
    .security-list {
      list-style: none;
      padding-left: 0;
      margin: 0;
    }

    .security-list li {
      font-size: 14px;
      color: #1a1a1a;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
    }

    .security-list li {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }

    .list-text {
      margin-left: 12px;
    }

    /* --- Iconos en CSS Puro (Círculos con bordes y símbolos) --- */
    .custom-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: bold;
      flex-shrink: 0;
    }

    /* Iconos grandes de las cabeceras */
    .icon-lg {
      width: 34px;
      height: 34px;
      font-size: 16px;
      margin-right: 15px;
    }

    /* Estilos específicos de colores para iconos de Peligro */
    .icon-danger-border {
      border: 2px solid #eb5757;
      color: #eb5757;
      background-color: transparent;
    }
    .icon-danger-fill {
      background-color: #eb5757;
      color: #ffffff;
    }

    /* Estilos específicos de colores para iconos de Éxito */
    .icon-success-border {
      border: 2px solid #27ae60;
      color: #27ae60;
      background-color: transparent;
    }
    .icon-success-fill {
      background-color: #27ae60;
      color: #ffffff;
    }




/* CONTAC SECTION */

    .contact-section {
      background-color: #fff; /* Fondo gris claro consistente */
      padding: 60px 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #1a1a1a;
    }

    .contact-section h2{
        font-size: 35px;
        font-weight: 200;
        line-height: 1.2em;
        text-transform: none;
        font-family: 'PulsoLight';
        letter-spacing: 1px;
    }

    .header-box {
      margin-bottom: 45px;
    }

    .main-title {
      font-size: 36px;
      color: #1a1a1a;
      margin-top: 0;
      margin-bottom: 5px;
      font-weight: 300; /* Estilo ligero para "Canales de" */
    }

    .main-title strong {
      font-weight: 600; /* Estilo fuerte para "contacto" */
    }

    /* --- Tarjetas de Contacto --- */
    .contact-card-box {
      margin-bottom: 30px; /* Separación responsiva para móviles */
    }

    .contact-card {
      background-color: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 40px 30px 35px 30px;
      text-align: center;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
      transition: transform 0.2s ease;
    }

    .contact-card:hover {
      transform: translateY(-2px);
    }

    /* Contenedor e iconos de los canales */
    .icon-container {
      font-size: 42px;
      margin-bottom: 20px;
      display: inline-block;
      line-height: 1;
    }

    .icon-blue {
      color: #00B0EB; /* Celeste característico de la interfaz */
    }

    /* Textos dentro de la tarjeta */
    .card-title {
      font-size: 18px;
      font-weight: 600;
      color: #1a1a1a;
      margin-top: 0;
      margin-bottom: 6px;
    }

    .card-meta {
      font-size: 14px;
      color: #718096;
      margin-top: 0;
      margin-bottom: 30px;
      min-height: 20px; /* Mantiene la alineación si el texto varía en líneas */
    }

    /* --- Botones de Acción --- */
    .btn-contact {
      background-color: #00B0EB;
      color: #ffffff !important;
      border: none;
      border-radius: 10px;
      width: 100%;
      padding: 14px 20px;
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: background-color 0.2s ease;
    }

    .btn-contact:hover, .btn-contact:focus {
      background-color: #00B0EB;
      color: #ffffff;
      outline: none;
      text-decoration: none;
    }

    @media (max-width: 767.98px) {
      .grid .no-mobile {
        display: none;
      }
    }



    .text-warning{
      font-size: 12px;
      color: #7c7c7d;
      font-style: italic;
    }