/* =========================================
   ESTILOS PREMIUM: INTERNET INALÁMBRICO
   ========================================= */

/* Hero Section (Fondo Naranja/Cálido) */
.internet-hero {
    background: #ff6f00; /* Naranja SEYPRO base */
    background: linear-gradient(135deg, rgba(255, 111, 0, 0.95) 0%, rgba(220, 90, 0, 0.8) 100%), 
                url('../images/fondo-internet-naranja.jpg') center/cover no-repeat;
    min-height: 70vh;
    margin-top: -85px; 
    padding-top: 55px;
    padding-bottom: 45px;
}

.hero-title { text-shadow: 0 4px 15px rgba(0,0,0,0.2); }

/* Animación de Ondas WiFi de fondo (Blancas) */
.wifi-ripple { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; z-index: 0; }
.wifi-ripple div { position: absolute; border: 4px solid rgba(255, 255, 255, 0.3); border-radius: 50%; animation: rippleAnim 4s linear infinite; opacity: 0; }
.wifi-ripple div:nth-child(1) { animation-delay: 0s; }
.wifi-ripple div:nth-child(2) { animation-delay: 1.3s; }
.wifi-ripple div:nth-child(3) { animation-delay: 2.6s; }

@keyframes rippleAnim {
    0% { top: 300px; left: 300px; width: 0; height: 0; opacity: 1; }
    100% { top: 0px; left: 0px; width: 600px; height: 600px; opacity: 0; }
}

.transition-hover-up { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.transition-hover-up:hover { transform: translateY(-5px); box-shadow: 0 15px 25px rgba(0,0,0,0.2) !important; }
.drop-shadow-3d { filter: drop-shadow(0 25px 40px rgba(0,0,0,0.6)); }

/* NUEVO: MÓDEM GIGANTE DEL HERO */
.floating-hero-router {
    max-width: 400px; /* Tamaño imponente */
    width: 100%;
    animation: floatRouter 6s ease-in-out infinite;
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.4));
}

@keyframes floatRouter {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* =========================================
   COMPOSICIÓN LLEGÓ EL MEJOR INTERNET
   ========================================= */
.internet-composition-scene {
    min-height: 450px;
}

/* El banner publicitario arriba (Flota suavemente) */
.promo-banner {
    max-width: 90%; /* Ajusta el ancho para que no choque bordes */
    border-radius: 12px;
    animation: floatElement 4s ease-in-out infinite;
}

/* La imagen de la chica abajo */
.composition-main-img {
    max-height: 380px; /* Tamaño adecuado para que se vea completa */
    width: auto;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15));
}

/* El router pequeñito flotando junto a la chica */
.floating-router-mini {
    width: 130px;
    top: 50%; /* Posicionado a la mitad de la altura de la chica */
    right: 5%; /* Hacia la derecha */
    transform: translateY(-50%);
    animation: floatElement 5s ease-in-out infinite 1s; /* Retraso para que no suba y baje igual que el banner */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3));
}

@keyframes floatElement {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* =========================================
   PLANES DE DATOS (Estilo Gris/Naranja)
   ========================================= */
.internet-pricing-card {
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.internet-pricing-card:hover { transform: translateY(-10px); }

.border-orange { border: 2px solid #ff6f00 !important; }

/* El color gris pizarra para el bloque del precio */
.bg-slate-gray { background-color: #5c6e7a !important; } 

.pricing-header-internet { border-bottom: 2px solid rgba(255,255,255,0.2); }
.pricing-price-box { border-bottom: 4px solid #ff6f00; } /* Línea naranja divisora */

.transform-scale { transform: scale(1.05); }
.transform-scale:hover { transform: scale(1.05) translateY(-10px); }

.pricing-list-check li {
    font-size: 1.05rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed #e2e8f0;
}
.pricing-list-check li:last-child { border-bottom: none; }
.pricing-list-check i { width: 30px; font-size: 1.2rem; }

@media (max-width: 991px) {
    .transform-scale { transform: scale(1); margin-top: 2rem; }
    .transform-scale:hover { transform: translateY(-10px); }
}

/* =========================================
   TARJETAS ¿POR QUÉ ELEGIRNOS?
   ========================================= */
.internet-feature-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 3rem 2rem;
    height: 100%;
    border: 1px solid #f1f5f9;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: all 0.4s ease;
}

.internet-feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(255, 111, 0, 0.15); /* Sombra anaranjada suave */
    border-color: rgba(255, 111, 0, 0.3);
}

/* =========================================
   BANNER FINAL: VAYAS DONDE VAYAS
   ========================================= */
.vayas-donde-vayas-section {
    background: linear-gradient(90deg, rgba(0, 114, 206, 0.85) 0%, rgba(0, 48, 107, 0.6) 100%), 
                url('../images/fondo-vayas-donde-vayas.jpg') center/cover no-repeat;
    background-attachment: fixed; /* Efecto Parallax opcional */
}

.floating-router {
    animation: floatElement 6s ease-in-out infinite;
    max-width: 350px;
}