@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
@import url('https://fonts.cdnfonts.com/css/avenir-lt-pro');


:root {
    --c1---: #2868B4;
    --c2---: #060728;
    --c3---: #8029f4;
    --c4---: #2868B4;
    --c5---: #2868B4;
    --c6---: #2868B4;
    --clr-neon: #4A90E2;
    --primary-color: #4A90E2;
    --secondary-color: #50E3C2;
    --tercery-color: #35b89b;
    --primary-color-dark: #bb0811;
    --bg-dark: #3D424C;
    --bg-light: #3D424C;
    --text-light: #a3a3a3;
    --white: #ffffff;
    --max-width: 1200px;
    --gradient: linear-gradient(to right,
            var(--primary-color),
            var(--tercery-color));
    --gradient2: linear-gradient(to right,
            var(--primary-color),
            var(--bg-dark));
    --gradient6: linear-gradient(45deg, #2868b4, #020246, #8029f4);

    --ff-avenir: 'Avenir LT Pro', sans-serif;
    --ff-poppins: 'Poppins', sans-serif;
}

@keyframes color {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

html{
 scroll-behavior: smooth;
 font-family: var(--ff-avenir);
}


/* General */
body {
    font-family: var(--ff-avenir);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #060728;
    color: white;
}

a{
    text-decoration: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
}

/* Estilos para el contenedor del logo */
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

/* Estilos para el logo responsivo */
.responsive-logo {
    max-width: 100%; /* El logo ocupará el 100% del ancho disponible */
    height: auto;    /* Mantener las proporciones */
    max-height: 200px; /* Altura máxima opcional */
}


/* Estilos para el botón flotante de WhatsApp */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}

.whatsapp-float a {
    background-color: #25D366; /* Color típico de WhatsApp */
    color: white;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    font-size: 30px;
    transition: background-color 0.6s;
}

.whatsapp-float a:hover {
    background-color: white; /* Color oscuro de WhatsApp en hover */
    color: #25D366;
}

/* Tooltip (mensaje flotante) */
.tooltip {
    position: absolute;
    right: 70px;
    bottom: 15px;
    background-color: white;
    color: #060728;
    padding: 8px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0; /* Inicialmente invisible */
    transform: translateX(20px); /* Mover el texto a la derecha fuera de la vista */
    transition: opacity 0.8s ease, transform 0.8s ease; /* Transición más lenta y suave */
}

/* Mostrar tooltip al hacer hover sobre el botón */
.whatsapp-float:hover .tooltip {
    opacity: 1; /* Hacer el tooltip visible */
    transform: translateX(0); /* Moverlo a su posición original */
}



#text1{
    font-size: 3.5em;
}

/* Header and Footer */
header, footer {
    background: var(--gradient6);
    background-size: 300% 300%;
    animation: color 10s ease infinite;
    color: white;
    padding: 10px 0;
    text-align: center;
}

footer p {
    margin: 0;
}

/* Typography */


h1 {
    font-size: 4em;
    line-height: 2.5rem;
}

h1 span{
    font-size: 2.5rem;
}

h2 {
    font-size: 2em;
    color: white;
}

ul{
    font-family: var(--ff-avenir);
}

button{
    font-family: var(--ff-avenir);
}

span{
    text-shadow: 0 0 5px #2868b4, 0 0 15px #2868b4, 0 0 30px #2868b4, 0 0 50px #2868b4;
}


p, li {
    font-size: 1.1em;
    line-height: 1.6;
    color: white;
}

ul {
    list-style-type: none;
}

ul li {
    margin-bottom: 10px;
}

/* Fondo para las burbujas */
.bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1; /* Para que esté detrás del contenido */
    overflow: hidden;
  }
  
  .bubble {
    position: absolute;
    bottom: -100px;
    width: 40px;
    height: 40px;
    background-color: #133373;
    border-radius: 50%;
    animation: rise 10s infinite ease-in;
    opacity: 0.8; /* Ajuste de opacidad */
}

  
  /* Animación de las burbujas */
  @keyframes rise {
    0% {
      transform: translateY(0) scale(0.5);
      opacity: 0.5;
    }
    50% {
      opacity: 0.8;
    }
    100% {
      transform: translateY(-100vh) scale(1);
      opacity: 0;
    }
  }
  

/* Button */
a.button {
    font-size: 2rem;
    display: inline-block;
    background: red;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: .6s;
}

a.button:hover{
    background: white;
    color: #2c5b96;
}

.button-container {
    padding-bottom: 2rem;
    padding-top: 2rem;
    display: flex;
    justify-content: center; /* Centra horizontalmente el botón */
    margin-top: 20px; /* Añade un espacio arriba del botón */
}

.emoji {
    font-size: 1.5em; /* Tamaño ajustado de los emojis */
}
/* Section Spacing */
.section {
    margin-bottom: 40px;
}

.program-container {
    display: flex;
    justify-content: center; /* Centra el contenido en la sección */
    align-items: flex-start; /* Alinea verticalmente al inicio */
    max-width: 1200px; /* Ancho máximo */
    margin: 0 auto; /* Centra el contenedor */
    gap: 40px; /* Espacio entre texto e imagen */
    padding: 20px; /* Espaciado alrededor */
}

.texto-programa {
    flex: 2; /* Permite que el texto ocupe más espacio (2 partes) */
    max-width: 600px; /* Ancho máximo para el texto */
}

.imagen-programa {
    flex: 1; /* Permite que la imagen ocupe menos espacio (1 parte) */
    max-width: 400px; /* Ancho máximo para la imagen */
    text-align: center; /* Centra la imagen en su contenedor */
}

.imagen-programa img {
    max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
    height: auto; /* Mantiene la relación de aspecto */
    border-radius: 10px; /* Bordes suaves */
    background: var(--gradient6);
    background-size: 300% 300%;
    animation: color 10s ease infinite;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Estilos para la sección del programa */
.programa {
    padding: 3rem 1rem;
}

.program-day {
    border: 2px solid #2868B4; /* Color del borde */
    border-radius: 10px; /* Esquinas redondeadas */
    padding: 1.5rem; /* Espaciado interno */
    margin: 1rem 0; /* Margen entre días */
    background-color: transparent; /* Color de fondo */
    transition: box-shadow 0.3s; /* Transición para el efecto de sombra */
}

.program-day:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra al pasar el ratón */
}

.program-day strong {
    display: block; /* Hacer que el texto fuerte ocupe toda la línea */
    margin-bottom: 0.5rem; /* Espacio entre el título y el contenido */
}

.program-day strong span {
    font-size: 1.5rem; /* Tamaño de fuente más grande */
    font-weight: bold; /* Negrita */
    color: white; /* Color del texto */
}


/* Bonos Exclusivos */
.bonos {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

.bonos h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.bonos p {
    font-size: 1.1em;
    margin-bottom: 30px;
    line-height: 1.6;
}

.bono-container {
    display: flex;
    flex-direction: column;
    gap: 50px; /* Espacio entre los bonos */
}

.bono-item {
    margin-bottom: 50px;
}


.mockup-image {
    margin-top: 20px;
    text-align: center; /* Centra la imagen */
}

.mockup-image img {
    max-width: 40%; /* Cambiado de 100% a 70% para hacer las imágenes más pequeñas */
    height: auto;
    border-radius: 10px; /* Bordes suaves */
}

#section1{
    text-align: center;
    padding-bottom: 6rem;
}

/* Sección de qué incluye */
.includes-section {
    padding: 40px;
    border: 2px solid #2868B4;
    border-radius: 10px;
    text-align: left;
    margin-bottom: 40px;
    font-family: 'Arial', sans-serif;
    color: white;
}

.includes-section h2 {
    font-size: 2.1em;
    margin-bottom: 20px;
    color: white;
    text-align: center;
}

.includes-section ul {
    list-style-type: none;
    padding-left: 0;
    font-size: 16px;
}

.includes-section li {
    margin-bottom: 15px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    color: white;
}

.includes-section li::before {
    content: "✅";
    margin-right: 10px;
    color: #50E3C2;
    font-size: 1.3em;
}

/* Estilos para la sección CONOCE A TU INSTRUCTOR */
.section.instructor {
    background-color: transparent; /* Fondo claro */
    border: 2px solid #2868B4;
    padding: 40px 90px;
    margin: 20px auto;
    border-radius: 10px;
    max-width: 900px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Título del Instructor */
.instructor-title {
    text-align: center;
    color: white;
    font-size: 38px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* Contenedor de la imagen y texto */
.instructor-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px; /* Separación entre imagen y texto */
}

/* Imagen del instructor */
.instructor-image {
    flex: 1;
    max-width: 40%; /* La imagen ocupa un 40% del ancho en pantallas grandes */
}

.responsive-image {
    width: 100%;
    background: var(--gradient6);
    background-size: 300% 300%;
    animation: color 10s ease infinite;
    height: auto; /* Hacer la imagen responsiva */
    border-radius: 10px; /* Bordes redondeados */

}

/* Texto del Instructor */
.instructor-info {
    flex: 2;
    max-width: 55%; /* El texto ocupa un 55% del ancho en pantallas grandes */
}

.instructor-text {
    color: white;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: justify;
}



.compra {
    padding: 30px 0; /* Espacio arriba y abajo */
    border-radius: 5px;
    border: 2px solid white;
    background: var(--gradient6);
    background-size: 300% 300%;
    animation: color 10s ease infinite;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 40px 0;
}

.compra-container {
    display: flex;
    justify-content: center; /* Centra el contenido */
    align-items: center;
    max-width: 1200px; /* Ancho máximo */
    width: 100%;
    padding: 20px;
    gap: 40px; /* Espacio entre imagen y texto */
    margin: 0 auto; /* Centra el contenedor */
}

.mockup-container img {
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* Bordes suaves */
    width: 400px; /* Tamaño más grande de la imagen en escritorio */
}

.texto-container {
    flex: 1; /* Permite que el texto ocupe el espacio restante */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinear el texto a la izquierda */
}

h2 {
    font-size: 2.5rem; /* Tamaño del título */
    margin-bottom: 20px; /* Espacio debajo del título */
    text-align: center; /* Centra el título */
}

.texto-container p {
    font-size: 1.5rem; /* Tamaño del texto */
    margin-bottom: 10px; /* Espacio entre los párrafos */
    padding-bottom: 2rem;
}

.precio-tachado {
    text-decoration: line-through var(--primary-color-dark);
    color: white; /* Color rojo para el precio tachado */
    font-size: 20px; /* Ajustar el tamaño del texto */
}

.precio-nuevo {
    color: green; /* Color verde para el nuevo precio */
    font-size: 24px; /* Tamaño del nuevo precio */
    font-weight: bold; /* Negrita para destacar el nuevo precio */
    margin-left: 10px; /* Espacio entre el precio tachado y el nuevo precio */
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.button1 {
    display: inline-block;
    padding: 15px 30px;
    background-color: #2868B4;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    font-size: 1.2rem;
    cursor: pointer;
    animation: bounce 2s infinite; /* Aplicar la animación */
}

/* Estilo para el cartelito de oferta */
.offer-banner {
    background-color: red;
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 30px;
    font-weight: bold;
    border-radius: 5px;
    margin-bottom: 10px;
}


/* Sección de Preguntas Frecuentes */
.preguntas {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.pregunta {
    margin-bottom: 15px;
}

.pregunta-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    border: solid 2px #2868b4;
    color: white;
    padding: 15px;
    font-size: 18px;
    width: 100%;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.6s ease;
    border-radius: 5px;
}

.pregunta-btn i {
    font-size: 20px;
}

.pregunta-btn:hover {
    background-color: white;
    color: #060728;
    border: solid 2px white;
}

.respuesta {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease;
    background-color: #f9f9f9;
    border-radius: 5px;
    color: #060728;
    padding-left: 15px;
    padding-right: 15px;
}

.respuesta p {
    padding: 15px 0;
    margin: 0;
    color: #060728;
}

/* Cuando se abre la pregunta */
.pregunta.active .respuesta {
    max-height: 500px; /* Ajusta según la longitud del contenido */
}

.pregunta.active .pregunta-btn i {
    transform: rotate(180deg);
    font-family: 'Font Awesome 5 Free'; /* Asegura que FontAwesome esté disponible */
}





/* Responsivo para pantallas más pequeñas */
@media (max-width: 768px) {

    #text1{
        font-size: 2.3em;
        line-height: 2.3rem;
    }

    a.button{
        font-size: 1.5rem;
        padding: 5px;
    }
    .includes-section {
        padding: 20px;
    }

    .includes-section h2 {
        font-size: 2em;
    }

    .responsive-logo {
        max-height: 150px; /* Ajustar el tamaño en dispositivos móviles */
    }

    .includes-section ul {
        font-size: 1em;
    }

    .includes-section li {
        margin-bottom: 10px;
        font-size: 1em;
        line-height: 1.4;
    }

    .includes-section li::before {
        font-size: 1.1em;
    }

    .section.instructor {
        padding: 40px 20px;

    }

    .instructor-container {
        flex-direction: column; /* Apilar la imagen sobre el texto */
        text-align: center;
    }

    .instructor-image, .instructor-info {
        max-width: 100%;
    }

    .instructor-title {
        font-size: 28px;
    }

    .instructor-text {
        font-size: 17px;
    }
    .social-icon {
        width: 30px;
        height: 30px;
    }

    .bono-container {
        gap: 30px;
    }

    .mockup-image img {
        max-width: 100%; /* Mantener a 100% para móviles */
    }


    .compra-container {
        flex-direction: column; /* Cambia a columna en pantallas pequeñas */
        align-items: center; /* Centra los elementos */
    }

    .texto-container{
        align-items: center;
    }

    .mockup-container img {
        width: 80%; /* Imagen más pequeña en dispositivos móviles */
        max-width: 300px; /* Tamaño máximo de la imagen en móviles */
    }

    h2 {
        font-size: 2rem; /* Tamaño del título en móviles */
    }

    .texto-container p {
        font-size: 1.1rem; /* Tamaño del texto en móviles */
    }

    .precio-tachado {
        font-size: 18px; /* Tamaño de los precios en móviles */
    }

    .button1 {
        font-size: 1rem; /* Tamaño del botón en móviles */
        padding: 10px 20px; /* Tamaño del botón en móviles */
        width: 80%; /* Hacer el botón más responsivo */
        max-width: 250px; /* Tamaño máximo del botón */
    }

    .program-container {
        flex-direction: column; /* Cambia a columna en pantallas pequeñas */
        align-items: center; /* Centra los elementos */
    }

    .texto-programa {
        text-align: center; /* Centra el texto en móviles */
        max-width: 90%; /* Aumenta el ancho máximo en móviles */
    }

    .imagen-programa {
        margin-bottom: 20px; /* Espacio debajo de la imagen */
    }

    .whatsapp-float {
        bottom: 10px;
        right: 10px;
    }

    .whatsapp-float a {
        width: 50px;
        height: 50px;
        font-size: 25px;
    }

    .tooltip {
        right: 60px;
        bottom: 10px;
        font-size: 12px;
    }

    
}

@media (max-width: 480px) {
    .includes-section {
        padding: 15px;
    }

    .includes-section h2 {
        font-size: 1.8em;
    }

    .includes-section ul {
        font-size: 0.9em;
    }

    .includes-section li {
        margin-bottom: 8px;
        font-size: 0.9em;
        line-height: 1.3;
    }

    .includes-section li::before {
        font-size: 1em;
    }

    .whatsapp-float {
        bottom: 5px;
        right: 5px;
    }

    .whatsapp-float a {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .tooltip {
        right: 55px;
        bottom: 5px;
        font-size: 11px;
    }
}