/* Estilos Generales y Fondo */
body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    background-color: #2e0e0d;
    background-image: url('../images/kxjnvmifaritmm2i3qx0.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Fija el fondo para que no se mueva */
}

/* --- CABECERA (100% ANCHO) --- */
.header-container {
    width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Fila 1: Barra superior con degradado */
.top-bar {
    background: linear-gradient(to right, #3333f7, #fbf71c);
    text-align: center;
    padding: 30px 0;
}
.top-bar a {
    color: white;
    text-decoration: none;
    text-shadow: 2px 2px black;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(1em, 2.5vw, 1.4em);
    line-height: 1.2;
    display: inline-block; /* Importante para que la transformación funcione correctamente */
    animation: pulseEffect 7s infinite ease-in-out;
}
/* --- NUEVA ANIMACIÓN DE DOBLE PULSO --- */
@keyframes pulseEffect {
    0% {
        transform: scale(1);
    }
    3.5% {
        transform: scale(1.1);
    }
    7% {
        transform: scale(1);
    }
    10.5% {
        transform: scale(1.1);
    }
    14% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

/* Fila 2: Barra principal azul oscuro */
.main-header {
    background-color: #212c3e;
    padding: 15px 0;
    display: flex;
    justify-content: center; /* Centra el contenido */
}
.logo-area {
    text-align: left;
    width: 100%;
    max-width: 960px; /* Ancho del contenido interno */
    padding: 0 20px;
    /* Aplicamos la animación de zoom aquí */
    animation: zoomInfinito 2s infinite alternate ease-in-out;
}
.logo-area .logo {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(1em, 2.5vw, 1.5em);
    color: #ffffff;
}
.logo-area .sub-logo {
    font-size: 0.9em;
    color: #ccc;
}

/* Definición de la animación "zoom infinito" */
@keyframes zoomInfinito {
    from {
        transform: scale(1.0);
    }
    to {
        transform: scale(1.05);
    }
}

/* --- NUEVA ANIMACIÓN DE RESPLANDOR --- */
@keyframes glowEfecto {
    0%, 100% {
        color: #ccc;
        text-shadow: none;
    }
    50% {
        color: #ffffff;
        text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px #f7b733;
    }
}

/* Aplicamos la nueva animación a los textos del logo */
.logo-area .logo,
.logo-area .sub-logo {
    animation: glowEfecto 4s infinite alternate ease-in-out;
}

/* --- CONTENEDOR PRINCIPAL BLANCO --- */
.app-wrapper {
    width: 100%;
    max-width: 1000px;
    background-color: white;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    margin: 40px auto; /* Espacio arriba/abajo y centrado */
}

/* --- PIE DE PÁGINA (100% ANCHO) --- */
.main-footer {
    background-color: #212c3e;
    text-align: center;
    padding: 15px 0;
    font-size: clamp(0.7em, 2.5vw, 0.9em);
    color: #adb5bd;
    width: 100%;
}

/* --- ESTILOS DEL CONTENIDO (SIN CAMBIOS) --- */
.funnel-container { padding: 20px 20px; }
.funnel-title {
    text-align: center;
    font-size: clamp(1.2em, 2.5vw, 2.2em);
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    color: #333;
    margin-bottom: 40px;
    /* display: inline-block; */
    animation: periodicFlip 5s infinite ease-in-out;
}
/* --- ANIMACIÓN DE VOLTERETA 3D PARA EL TÍTULO (CORREGIDA)--- */
@keyframes periodicFlip {
    0% {
        transform: perspective(600px) rotateX(0deg);
    }
    80% {
        transform: perspective(600px) rotateX(0deg); /* Pausa durante 4 segundos */
    }
    100% {
        transform: perspective(600px) rotateX(360deg); /* Giro VERTICAL en el último segundo */
    }
}
.funnel-title span {

    padding-bottom: 5px;
}

/* Negocio del futuro*/
.negocio-futuro {
    text-align: center;
    font-size: 2.6em;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: #333;
    /* margin-bottom: 0px; */
    margin: 40px 0px -30px 0px; /* Mantenemos el margen original aquí */
    /* display: inline-block; */
    animation: periodicFli 5s infinite ease-in-out;
}
/* --- ANIMACIÓN DE VOLTERETA 3D PARA EL TÍTULO (CORREGIDA)--- */
@keyframes periodicFli {
    0% {
        transform: perspective(600px) rotateX(0deg);
    }
    80% {
        transform: perspective(600px) rotateX(0deg); /* Pausa durante 4 segundos */
    }
    100% {
        transform: perspective(600px) rotateX(360deg); /* Giro VERTICAL en el último segundo */
    }
}
.negocio-futuro span {

    padding-bottom: 5px;
}
.option-box { text-align: center; border-left: 1px solid #eee; }
.option-box:first-child { border-left: none; }
.option-title-question { font-size: clamp(1.2em, 2.5vw, 1.8em); font-weight: 700; font-family: 'Poppins', sans-serif; }
.lista { font-size: clamp(1.5em, 2.5vw, 2.2em); font-weight: 400; font-family: 'Poppins', sans-serif; }
.option-box .text-warning { color: #f5a623 !important; }
.option-subtitle { color: #35383b; margin-bottom: 10px; font-size: clamp(0.8rem, 2.5vw, 1rem); }
.escucho {
    border: 4px solid var(--color-borde-primario, #610bf7);
    max-width: 100%;
    border-radius: 0px;
    transition: transform 0.3s ease;
    padding: 7px; /* Espacio para el borde */
    /* --- LÍNEA MODIFICADA PARA LA SOMBRA --- */
    box-shadow: 6px 6px 0px #212c3e; /* Sombra dura, desplazada y con color oscuro */
    margin: 0 auto;
}
.option-image {
    border: 4px solid var(--color-borde-primario, #610bf7);
    max-width: 100%;
    border-radius: 0px;
    transition: transform 0.3s ease;
    padding: 0px; /* Espacio para el borde */
    /* --- LÍNEA MODIFICADA PARA LA SOMBRA --- */
    box-shadow: 6px 6px 0px #212c3e; /* Sombra dura, desplazada y con color oscuro */
    margin: 0 auto;
}
.compra-product {
    border: 4px solid var(--color-borde-primario, #610bf7);
    max-width: 100%;
    border-radius: 0px;
    transition: transform 0.3s ease;
    padding: 0px; /* Espacio para el borde */
    /* --- LÍNEA MODIFICADA PARA LA SOMBRA --- */
    box-shadow: 6px 6px 0px #212c3e; /* Sombra dura, desplazada y con color oscuro */
    margin: 0 auto;
}
.option-image2 {
    border: 4px solid var(--color-borde-primario, #610bf7);
    max-width: 100%;
    border-radius: 0px;
    transition: transform 0.3s ease;
    padding: 0px; /* Espacio para el borde */
    /* --- LÍNEA MODIFICADA PARA LA SOMBRA --- */
    box-shadow: 6px 6px 0px #212c3e; /* Sombra dura, desplazada y con color oscuro */
    margin: 0 auto;
}
.option-image3 {
    border: 4px solid var(--color-borde-primario, #610bf7);
    max-width: 100%;
    border-radius: 0px;
    transition: transform 0.3s ease;
    padding: 0px; /* Espacio para el borde */
    /* --- LÍNEA MODIFICADA PARA LA SOMBRA --- */
    box-shadow: 6px 6px 0px #212c3e; /* Sombra dura, desplazada y con color oscuro */
    margin: 0 auto;
}

/* .option-image {
    border: 7px solid #610bf7;
    max-width: 100%;
    border-radius: 0px;
    transition: transform 0.3s ease;
    box-shadow: 6px 6px 0px #212c3e;
    margin: 0 auto;
    display: block;
} */

.funnel-link { display: inline-block;
    cursor: pointer;
    text-decoration: none;
    animation: zoomimg 5s infinite alternate ease-in-out;
}
.funnel-link:hover .option-image {
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--color-borde-secundario, #1bf70b);
}
.funnel-link:hover .compra-product {
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--color-borde-secundario, #1bf70b);
}
.funnel-link:hover .option-image3 {
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--color-borde-secundario, #1bf70b);
}
/* Definición de la animación "zoom infinito" */
@keyframes zoomimg {
    from {
        transform: scale(1.0);
    }
    to {
        transform: scale(1.05);
    }
}

.main-content { transition: opacity 0.3s ease-out, transform 0.3s ease-out; }
.main-content.fade-out { opacity: 0; transform: scale(0.98); }

/* --- ESTILOS PARA EL NUEVO ENCABEZADO "BIENVENIDOS" --- */
.welcome-header-container {
    width: 100%;
    max-width: 1000px; /* Mismo ancho que .app-wrapper para alinear */
    margin: 40px auto -20px auto; /* Centrado y con margen negativo para acercarlo a la caja */
    padding: 0 20px; /* Espaciado lateral para que no se pegue a los bordes */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
}

.welcome-header-text {
    color: white; /* Color del texto como en el video */
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(1em, 2.5vw, 1.3rem);
    margin-bottom: -30px; /* Espacio entre "BIENVENIDOS" y la caja blanca */
    /* --- LÍNEA AÑADIDA --- */
    animation: slideInFromLeft 1s infinite alternate ease-in-out;
}

/* Ajuste al contenedor principal para que no tenga tanto margen superior */
.app-wrapper {
    width: 100%;
    max-width: 1000px;
    background-color: white;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    margin: 40px auto; /* Mantenemos el margen original aquí */
}
/* --- ANIMACIÓN DE ENTRADA PARA "BIENVENIDOS" --- */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(20px); /* Empieza 50px a la izquierda */
        opacity: 0; /* Y completamente invisible */
    }
    100% {
        transform: translateX(0); /* Termina en su posición normal */
        opacity: 1; /* Y completamente visible */
    }
}















/* --- ESTILOS PARA LA PÁGINA "COMPRAR-PRODUCTOS" --- */

/* Estilo para el subtítulo "AFILIATE..." */
.funnel-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: #343a40;
}

/* Estilo para las imágenes de las listas de precios */
.price-list-image {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.price-list-image:hover {
    transform: scale(1.05);
}

/* Estilo para el botón/imagen de "QUIERO AFILIARME" */
.cta-image {
    max-width: 500px; /* Ajusta el tamaño como prefieras */
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.funnel-link:hover .cta-image {
    transform: scale(1.03);
    box-shadow: 0 12px 30px rgba(97, 11, 247, 0.4); /* Sombra morada al pasar el mouse */
    border: none; /* Nos aseguramos de que no herede el borde del otro link */
}



/* --- ESTILOS PARA BOTONES CLONADOS (CORREGIDO) --- */
.cloned-button {
    display: inline-block;
    width: auto;
    box-shadow: 0px 4px 0px #148397;
    background-image: none;
    background-color: #39bed7;
    text-decoration: none;
    padding: 18px 40px;
    margin-bottom: 20px;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2), inset 0 -4px 0 rgba(0,0,0,0.15);
    text-align: center;
    border: 1px solid rgba(0,0,0,0.2); /* 2. BORDE AÑADIDO (NO DESAPARECERÁ) */
    transition: transform 0.3s ease-in-out; /* 1. TRANSICIÓN SUAVE PARA EL ZOOM */
    animation: shakeUpDown 3s infinite ease-in-out; /* Animación de balanceo */
}

@media (max-width: 468px) {
    .cloned-button {
        padding: 15px 15px;
    }

    .cloned-button strong {
        font-size: 25px !important;
    }
}

.cloned-button strong {
    text-shadow: 2px 2px 0px #1d4d6c;
    font-size: 41px;
    color:#ffffff;

}


/* --- ANIMACIÓN CLONADA DE BALANCEO VERTICAL --- */
@keyframes shakeUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}
/* Estilo para "LISTA DE PRECIO" (con animación corregida) */
.cloned-button.button-style-one {
    /* Preparamos al botón para una transición suave de tamaño */
    transition: transform 0.2s ease-in-out;
}

/* --- SOLUCIÓN DEFINITIVA PARA EL ZOOM --- */
.cloned-button.button-style-one:hover {
    /* 1. Detenemos la animación de balanceo por completo */
    animation: none;
    /* 2. Aplicamos el zoom hacia el frente, sin sombra y sin tocar el borde */
    transform: scale(1.1);
}

.cloned-button:hover {
    color: #ffffff;
    /* 1. Zoom más pronunciado y se mantiene el borde */
    transform: scale(1.1);
    /* 2. Sombra sutil para dar sensación de que se "levanta" de la página */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    /* 3. Nos aseguramos de que no aparezca el subrayado */
    text-decoration: none;
}
.cloned-button i {
    color: #ffffff;
    margin-left: 12px;
    font-size: 1.3em; /* 1. AUMENTAMOS el tamaño del ícono */
    vertical-align: middle; /* Alineamos mejor el ícono con el texto */
}

/* Separador de Puntos Verdes */
.dotted-separator {
    width: 95%; /* Ancho del separador */
    margin: 25px auto; /* Centra el separador horizontalmente */
    border-top: 6px dotted #0f4a3f; /* Color verde oscuro y punteado */
}


/* Texto "¿Cómo puedo participar?" */
.participation-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(1.6em, 2.5vw, 2.6em); /* Tamaño grande y llamativo */
    color: #71a037; /* Color verde claro */
    text-shadow: 2px 1px 0px #1d4d6c;   /* SOMBRA TEXTO */
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); */
}

/* Fila de Beneficios */
.benefits-row {
    padding-top: 20px;
}

/* Separador Vertical Azulado entre columnas de beneficios */
.benefit-separator {
    border-left: 3px solid #39bed7; /* Color azulado claro */
}


/* --- ESTILOS PARA LA FILA DE BENEFICIOS (3 COLUMNAS) --- */
.benefits-row {
    border-top: 2px solid #eee;
    padding-top: 40px;
}

.benefit-box {
    padding: 0 20px;
}

.benefit-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 2.5vw, 1.4rem);
    color: #333;
    margin-bottom: 15px;
}

.benefit-description {
    font-size: 1rem;
    color: #6c757d;
    line-height: 1.6;
}






/* --- ESTILOS PARA SECCIÓN PASO 1 (CLONACIÓN REAL) --- */

/* Keyframes para la expansión de las líneas rojas */
@keyframes expandWidth {
    from { width: 0%; }
    to { width: 100%; }
}

/* Keyframes para la animación de pulso con desvanecimiento (INVERSO) */
@keyframes zoomAndFadePulse {
    0%, 100% {
        transform: scale(1.05); /* Ligeramente más grande (zoom) */
        opacity: 1;           /* Parcialmente transparente (apagado) */
    }
    50% {
        transform: scale(1);    /* Tamaño normal */
        opacity: 0.2;             /* Totalmente visible (encendido) */
    }
}

/* Contenedor con el fondo GRIS OSCURO */
.step-section-background {
    background-color: #1b1c2c;
    padding: 0px 0;
    margin-left: calc(-50vw + 50%); /* Truco para extender el fondo al 100% */
    margin-right: calc(-50vw + 50%);
    width: 100vw;
}

.step-separator-container {
    text-align: center;
}

/* Estilo y animación para las líneas rojas */
.step-line {
    height: 3px;
    background-color: #e74c3c;
    margin: 0 auto; /* Corregido para centrar correctamente */
    transform-origin: left;
    width: 0; /* -- AÑADIDO: La línea empieza oculta -- */
    /* La línea de la animación se ha movido más abajo */
}

/* -- AÑADIDO: Activa la animación solo cuando el contenedor es visible -- */
.step-section-background.is-visible .step-line {
    animation: expandWidth 20.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Estilo y animación para el texto (sin cambios) */
.step-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(1.6em, 2.5vw, 2.8em);
    font-style: italic;
    color: #ffffff;
    padding: 15px 15px;
    animation: zoomAndFadePulse 2.7s infinite ease-in-out;
}















/* --- ESTILOS PARA LA NUEVA SECCIÓN DE INSTRUCCIONES --- */

/* Contenedor del título "INSTRUCCIONES" */
.instructions-title-container {
    /* background-color: #ffffff; */
    display: inline-block; /* Se ajusta al tamaño del texto */
    padding: 10px 30px;
    border-radius: 8px;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
    margin-bottom: 20px;
}

/* Texto "INSTRUCCIONES" */
.instructions-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(1.2em, 2.5vw, 2.2em);
    /* text-shadow: 1px 1px 0px #1d4d6c; */
    color: #6a5acd; /* Tono morado claro */
    margin: 0;
}

@media (max-width: 468px) {
    .instructions-title-container {
        padding: 10px 15px;
    }
}


/* Texto "VER VÍDEO" con el icono */
.instructions-video-link {
    color: #f01800;
    opacity: 1;
    line-height: 100%;
    letter-spacing: 0px;
    text-transform: none;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.2em, 2.5vw, 2.0em);
    margin-bottom: 25px;
    text-shadow: 2px 1px 0px #1d4d6c;
    animation: bounceUpDown 2s infinite ease-in-out; /* Animación para llamar la atención */
}

/* Icono de la mano */
.instructions-video-link i {
    color: #f9b62e; /* Color amarillo/naranja del icono */
    text-shadow: 2px 2px 2px #34495e; /* Sombra del icono */
    font-size: 1.2em; /* Un poco más grande que el texto */
    margin-left: 10px;
    animation: bounceUpDown 2s infinite ease-in-out; /* Animación para llamar la atención */
}

/* Animación para el icono */
@keyframes bounceUpDown {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}


/* Contenedor principal del video para el borde y la sombra */
.video-container {
    padding: 7px; /* Espacio para el borde */
    background: #b009f7; /* Color del borde morado */
    border-radius: 0px;
    /* --- LÍNEA MODIFICADA PARA LA SOMBRA --- */
    box-shadow: 6px 6px 0px #212c3e; /* Sombra dura, desplazada y con color oscuro */
    max-width: 800px;
    margin: 0 auto;
    /* Añadimos una transición para un efecto suave al pasar el mouse */
    /* transition: all 0.2s ease-out; */
}
/* --- (OPCIONAL) EFECTO HOVER AÑADIDO --- */
/* Al pasar el mouse, el video se "levanta" un poco */
/* .video-container:hover {
    transform: translate(-5px, -5px);
    box-shadow: 15px 15px 0px #4a3e9e;
} */


/* Wrapper para mantener la proporción del video (responsive) */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Proporción 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 6px; /* Bordes internos redondeados */
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* --- ESTILOS CORREGIDOS PARA PANEO DE IMAGEN (LISTA DE PRECIO) --- */

/* 1. Definimos la animación de paneo LENTA Y SUTIL */
@keyframes slow-pan-effect {
  0%, 100% {
    /* La imagen empieza en su posición original */
    transform: translateX(0);
  }
  50% {
    /* En el punto medio, se habrá movido un 5% a la izquierda */
    transform: translateX(-3%);
  }
}



/* 3. La imagen dentro del contenedor */
.image-pan-container .option-image {
  /* Hacemos la imagen un 10% más ancha que su contenedor */
  width: 100%;
  max-width: 100%;



  /* Aplicamos la animación: 25s de duración, infinita, va y viene suavemente */
  animation: slow-pan-effect 30s infinite alternate ease-in-out;
}
.image-pan-container .compra-product {
  /* Hacemos la imagen un 10% más ancha que su contenedor */
  width: 100%;
  max-width: 100%;



  /* Aplicamos la animación: 25s de duración, infinita, va y viene suavemente */
  animation: slow-pan-effect 30s infinite alternate ease-in-out;
}
.image-pan-container .option-image2 {
  /* Hacemos la imagen un 10% más ancha que su contenedor */
  width: 100%;
  max-width: 100%;



  /* Aplicamos la animación: 25s de duración, infinita, va y viene suavemente */
  animation: slow-pan-effect 30s infinite alternate ease-in-out;
}
.image-pan-container .option-image3 {
  /* Hacemos la imagen un 10% más ancha que su contenedor */
  width: 100%;
  max-width: 100%;



  /* Aplicamos la animación: 25s de duración, infinita, va y viene suavemente */
  animation: slow-pan-effect 30s infinite alternate ease-in-out;
}





















/* ... (al final de tu archivo style.css) ... */

/* --- ESTILOS PARA LA SECCIÓN "REGISTRA GRATIS" --- */

/* Keyframes para la animación flotante del contenedor */
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Keyframes para la animación del botón (brillo) */
@keyframes buttonGlow {
  0%, 100% { box-shadow: 0 0 15px 0px #f39c12; }
  50% { box-shadow: 0 0 25px 8px #f39c12; }
}

/* Contenedor principal de la sección. Empieza invisible. */
.register-section-container {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

/* Cuando se añade 'is-visible', el contenedor aparece */
.register-section-container.is-visible {
    opacity: 1;
}

/* Línea roja animada */
.animated-red-line {
    height: 4px;
    background-color: #e74c3c;
    width: 0%; /* Empieza con ancho cero */
}

/* Activamos la animación de la línea cuando la sección es visible */
.register-section-container.is-visible .animated-red-line {
    animation: expandWidth 15.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Caja principal con borde punteado */
.floating-box {
    border: 10px dotted #f39c12; /* Borde punteado naranja */
    border-radius: 8px;
    padding: 30px 20px;
    margin-top: 10px;
    /* Aplicamos la animación flotante infinita */
    animation: floatUpDown 4s infinite ease-in-out;
}

/* Título: ¡QUIERO COMPRARLO AHORA! */
.register-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(1.3em, 2.5vw, 2.2em);
    text-shadow: 1px 1px 0px #1d4d6c;
    margin: 0 0 10px 0;
}

.register-icon {
    color: #000000; /* Icono negro */
}

/* Subtítulo: "REGISTRA GRATIS" */
.register-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(1.3em, 2.5vw, 2.5em);
    color: #2980b9; /* Azulado */
    text-shadow: 2px 1px 0px #1d4d6c;
    /* text-shadow: 2px 2px 4px rgba(0,0,0,0.2); */
    margin: 0 0 25px 0;
}

/* Botón: CREAR UNA CUENTA */
.register-button {
    display: inline-block;
    background-color: #f39c12; /* Naranja */
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.1em, 2.5vw, 1.8em);
    padding: 15px 35px;
    border-radius: 8px;
    text-decoration: none; /* --- AÑADIDO: Quita el subrayado permanentemente LINK --- */
    text-shadow: 2px 1px 0px #1d4d6c;
    text-decoration: none;
    border-bottom: 5px solid #d35400; /* Sombra inferior naranja oscuro */
    transition: transform 0.2s ease;
    /* Aplicamos la animación de brillo infinita */
    animation: buttonGlow 12s infinite ease-in-out;
}

@media (max-width: 468px) {
    .register-button {
        padding: 15px 15px;
    }
}

.register-button:hover {
    /* Ejecutamos la animación de rebote */
    animation: buttonBounce 0.3s ease;

    /* Mantenemos el estado final y otros estilos */
    transform: translateY(-3px);
    text-decoration: none;
    color: #ffffff;
}
















/* ... (al final de tu archivo style.css) ... */

/* --- ESTILOS PARA LA NUEVA SECCIÓN "COMPRAR CON DESCUENTO" --- */

/* Keyframes para la animación de resplandor del texto */
@keyframes textGlow {
  0%, 100% {
    text-shadow: 0 0 5px #f1c40f, 0 0 10px #f1c40f;
  }
  50% {
    text-shadow: 0 0 15px #f1c40f, 0 0 25px #f1c40f;
  }
}

/* Contenedor principal de la sección. Empieza invisible. */
.discount-section-container {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

/* Cuando es visible, aparece */
.discount-section-container.is-visible {
    opacity: 1;
}

/* La caja flotante con borde punteado morado */
.floating-box-purple {
    border: 7px dotted #8e44ad; /* Borde punteado morado */
    border-radius: 8px;
    padding: 25px;
    animation: floatUpDown 4s infinite ease-in-out; /* Reutilizamos la animación flotante */
    background-color: #ffffff; /* Fondo blanco para que resalte */
}

/* Contenedor de las imágenes de etiquetas */
.discount-tags {
    margin-bottom: 15px;
}

.discount-tags img {
    max-width: 250px;
    height: auto;
}

/* Título: |Quiero comprar con descuento| */
.discount-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(1.4em, 2.5vw, 1.8em);
    color: rgb(69, 91, 128);
    margin-bottom: 10px;
}

/* Texto: haz clic aquí */
.discount-cta-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 2.2em;
    margin-bottom: 20px;
    /* Aplicamos la animación de resplandor */
    animation: textGlow 2s infinite ease-in-out;
}

/* --- ESTILO PARA RESALTAR TEXTO EN AMARILLO --- */
.highlight-yellow {
  background-color: #FAC51C; /* Este es el color rgb(250, 197, 28) */
  padding: 0 8px; /* Añade un pequeño espacio a los lados */
}


/* Botón: CON DESCUENTO */
.discount-button {
    display: inline-block;
    background: linear-gradient(to left, #fc7476 0%, #e74c3c 100%);
    color: #ffffff !important; /* AÑADIDO !important para forzar el color blanco */
    text-shadow: 2px 1px 0px #08161f;   /* SOMBRA TEXTO */
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(1.1em, 2.5vw, 1.5em);
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    border-bottom: 4px solid rgb(69, 91, 128); /* Sombra inferior azul oscuro */
    transition: all 0.2s ease;
}

.discount-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(to right, #fc7476 0%, #e74c3c 100%);
    color: #ffffff;
    text-decoration: none;
}

@media (max-width: 480px) {
    .discount-button {
        padding: 10px 10px;
    }
}





/* ... (al final de tu archivo style.css) ... */

/* --- ESTILO PARA LA SEPARACIÓN VISUAL Y CASA 2 --- */

/* El Separador Mágico */
.content-break-separator {
  height: 50px; /* El alto de la separación */

  /* Copiamos el fondo del BODY para simular la transparencia */
  background-image: url('../images/kxjnvmifaritmm2i3qx0.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Muy importante para que el fondo no se mueva */

  /* Truco para que el separador ocupe el 100% del ancho de la caja blanca */
  margin-left: -40px;
  margin-right: -40px;
}

/* Ajuste para que CASA 2 no tenga un padding superior excesivo */
.funnel-container:has(.discount-section-container) {
    padding-top: 0;
}




/* Línea roja animada (ACTUALIZADA para scaleX) */
.animated-red-line1 {
    height: 4px;
    background-color: #e74c3c;
    width: 100%; /* AHORA DEBE TENER 100% de ancho */
    transform: scaleX(0); /* La encogemos a cero para que empiece invisible */
}
/* --- ANIMACIÓN DE EXPANSIÓN CENTRAL PARA CASA 2 --- */

/* Keyframes para la animación de escalado */
@keyframes expandFromCenter {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Regla que activa la animación SOLO en la línea de CASA 2 */
.discount-section-container.is-visible .animated-red-line1 {
    /* Le decimos que la animación debe originarse en el centro */
    transform-origin: center;

    /* Aplicamos la animación */
    animation: expandFromCenter 20.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}













 #element_text_8 {
    color: #aa11ea;
    opacity: 1;
    text-align: left;
    font-size: 18px;
    line-height: 250%;
    letter-spacing: 0px;
    font-weight: 400;
    text-transform: none;
    text-shadow: 1px 1px 2px #3498db;
    font-family: 'Open Sans';
}






/* Network Marketing*/
/* Contenedor del título "INSTRUCCIONES" */
.interesado-title-container {
    /* background-color: #ffffff; */
    display: inline-block; /* Se ajusta al tamaño del texto */
    padding: 10px 30px;
    border-radius: 8px;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
    margin-bottom: 20px;
}

/* Texto "INSTRUCCIONES" */
.interesado-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(1.5em, 2.5vw, 2.2em);
    text-shadow: 2px 1px 0px #1f262b;
    color: rgb(243, 121, 52); /* Tono morado claro */
    margin: 0;
}

.highlight-yellow {
    background-color: #FAC51C; /* Este es el color rgb(250, 197, 28) */
    font-size: clamp(0.4em, 2.5vw, 0.6em);
    padding: 0 8px; /* Añade un pequeño espacio a los lados */
}


/* --- ANIMACIÓN DE ZOOM INFINITO PARA TEXTO --- */

/* 1. Definimos la animación de zoom */
@keyframes infinite-zoom-effect {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05); /* Ligeramente más grande en el punto medio */
  }
}

/* 2. Aplicamos la animación al contenedor del texto */
.zoom-text-container {
  margin-bottom: 25px; /* Espacio entre el texto y el botón */
  animation: infinite-zoom-effect 4s infinite alternate ease-in-out;
}
/* --- ESTILOS PARA LÍNEA ROJA EN 'NEGOCIO DEL FUTURO' --- */

/* 1. Estilos para la nueva línea roja */
.animated-red-line-futuro {
    height: 4px;
    background-color: #e74c3c;
    width: 100%;

    /* Preparamos la animación para que se expanda desde el centro */
    transform: scaleX(0);
    transform-origin: center;

    /* Aplicamos la animación que ya existe */
    animation: expandFromCenter 15.5s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards;
    /* animación | duración | curva | retraso | estado final */
}

/* 2. Ajuste para el título para que se acerque a la línea */
.negocio-futuro {
    text-align: center;
    font-size: clamp(1.5em, 2.5vw, 2.6em);
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: #333;
    margin: 20px 0px 0px 0px; /* Reducimos el margen superior para acercarlo a la línea */
    animation: periodicFli 5s infinite ease-in-out;
}


.el_type_text{
    text-align: center;
    font-size: clamp(1.2em, 2.5vw, 1.8em);

}


/* 1. Estilo para el estado normal del texto */
.texto-con-zoom {
  /* La propiedad 'transition' es la clave para la suavidad. */
  /* Le decimos que cualquier cambio en 'transform' dure 0.3 segundos. */
  transition: transform 0.3s ease-in-out;
}

/* 2. Estilo que se aplica SÓLO cuando el mouse está encima */
.texto-con-zoom:hover {
  /* Agranda el texto al 110% de su tamaño original */
  transform: scale(1.1);

  /* Opcional: Cambia el cursor para indicar que es interactivo */
  cursor: pointer;
}





/*Afiliarme*/
.creo-codigo {
    font-family: 'Poppins', sans-serif;
    text-align: center !important;
    font-weight: 600;
    font-size: clamp(0.9em, 2.5vw, 1.1em); /* Tamaño grande y llamativo */
    color: #71a037; /* Color verde claro */
    text-shadow: 2px 1px 0px #1d4d6c;   /* SOMBRA TEXTO */
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); */
}




.como-participo {
    text-align: center;
    font-size: 2.2em;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    color: #333;
    margin-bottom: 40px;
    /* display: inline-block; */
    animation: periodicFlip 5s infinite ease-in-out;
}
/* --- ANIMACIÓN DE VOLTERETA 3D PARA EL TÍTULO (CORREGIDA)--- */
@keyframes periodicFlip {
    0% {
        transform: perspective(600px) rotateX(0deg);
    }
    80% {
        transform: perspective(600px) rotateX(0deg); /* Pausa durante 4 segundos */
    }
    100% {
        transform: perspective(600px) rotateX(360deg); /* Giro VERTICAL en el último segundo */
    }
}
.funnel-title span {

    padding-bottom: 5px;
}







/* --- Keyframes para la animación de rebote del botón --- */
@keyframes buttonBounce {
  0% {
    transform: translateY(-3px) scale(1);
  }
  50% {
    /* Crece un 10% y sube un poco más */
    transform: translateY(-5px) scale(1.1);
  }
  100% {
    transform: translateY(-3px) scale(1);
  }
}








/* --- NUEVO: Estilos para cuando el reproductor está en pantalla completa --- */
#player-container:fullscreen #youtube-player {
    /* Hacemos el video AÚN MÁS ALTO para asegurarnos de ocultar todo */
    height: 140%;
}

/* Opcional: Ocultar el cursor cuando no se mueve en pantalla completa */
#player-container:fullscreen {
    cursor: none;
}


/* --- ESTILOS PARA EL REPRODUCTOR DE VIDEO DEFINITIVO (MODO HÍBRIDO) --- */
#player-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    aspect-ratio: 16/9;
    position: relative;
    background-color: #000;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 6px 6px 0px #212c3e;
    /* Transición suave para el efecto de borde si lo hubiera */
    transition: all 0.3s ease;
}

#youtube-player {
    position: absolute;
    z-index: 0;
    /* ESTADO 1: MINIATURA PERFECTA (Por defecto) */
    width: 100%;
    height: 100%; /* 16:9 Real */
    top: 0;
    left: 0;
    transform: none; /* Sin traslación ni escala */

    /* Añadimos transición para que el cambio no sea brusco, sino "cinemático" */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ESTADO 2: MODO CINE / OCULTAR HERRAMIENTAS (Se activa con JS) */
#player-container.zoom-mode #youtube-player {
    /* AQUÍ APLICAMOS TU TRUCO QUE TE GUSTA */
    width: 100%;
    height: 180%; /* Estiramos altura para sacar controles */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centramos el estiramiento */
}

#preview-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 3; display: flex; justify-content: center; align-items: center;
    cursor: pointer;

    /* CAMBIOS PARA CARÁTULA FANTASMA: */
    background-color: #000; /* Fondo negro por si la imagen tarda */
    background-size: cover; /* La imagen cubre todo el espacio */
    background-position: center; /* Centrada perfectamente */
    background-repeat: no-repeat;

    /* Transición suave para que al dar play se desvanezca bonito */
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#big-play-btn.hidden { opacity: 0; visibility: hidden; }
.custom-controls-bar {
    position: absolute; bottom: 0; left: 0; width: 100%; z-index: 4;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    padding: 10px 15px; display: flex; align-items: center; gap: 15px;
    opacity: 0; transition: opacity 0.3s ease;
}
#player-container:hover .custom-controls-bar { opacity: 1; }
.control-btn { background: none; border: none; cursor: pointer; padding: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }

/* Estilo para el nuevo botón de Play grande (círculo azul) */
#big-play-btn {
    width: 80px; height: 80px;
    background-color: #007bff;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.5);
}
#big-play-btn::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 25px; /* Triángulo */
    border-color: transparent transparent transparent white;
    margin-left: 5px;
}

/* --- CSS CORREGIDO PARA LOS BOTONES --- */
#play-pause-btn, #mute-btn, #fullscreen-btn {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Asegura que el icono encaje */
}

.play-small { background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>'); }
.pause-small { background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>'); }
.volume { background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>'); }
.volume-muted { background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>'); }
.fullscreen { background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>'); }

.progress-bar-container { flex-grow: 1; cursor: pointer; padding: 10px 0; }
.progress-bar { background-color: rgba(255,255,255,0.3); height: 5px; border-radius: 3px; }
.progress-bar-fill { background-color: #f39c12; height: 100%; width: 0%; border-radius: 3px; }
.time-display { color: white; font-size: 0.9em; font-family: monospace; }

/* Estilos para el contenedor y la barra de volumen */
.volume-container { position: relative; display: flex; align-items: center; }
.volume-slider {
    width: 80px; margin-left: 10px;
    opacity: 0; visibility: hidden; transition: all 0.2s ease;
}
.volume-container:hover .volume-slider {
    opacity: 1; visibility: visible;
}

@media (max-width: 767px) {
    .option-box-second { margin-top: 25px; }
}

@media (max-width: 468px) {
    .div-col-comprar-ahora {
        padding: 0;
    }

    .div-row-comprar-ahora {
        padding: 0;
    }

    .div-container-comprar-ahora {
        padding: 0;
    }
}