/*
 * Main Stylesheet for RF Gym
 * Version: 2.9.5 (FIX: Form Hybrid Layout - Alignment & Video Aspect Ratio)
 * Author: WebDev Architect (SynergyPower)
 */

/* ===== NUEVA FUENTE IMPORTADA ===== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* ======== 1. Global Variables & Resets ======== */
:root {
    --color-primary: #E50914; /* RF Red */
    --color-primary-dark: #B20710;
    --color-bg-dark: #141414;
    --color-bg-medium: #222222;
    --color-bg-light: #333333;
    --color-text-light: #FFFFFF;
    --color-text-medium: #E0E0E0;
    --color-text-dark: #AAAAAA;
    --color-success: #28a745;
    --color-error: #dc3545;

    /* Professional Gradient */
    --gradient-primary: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));

    /* CAMBIO: Se añade la nueva fuente */
    --font-primary: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-display: 'Bebas Neue', cursive; /* Nueva fuente de impacto */

    --transition-main: all 0.3s ease-in-out;
    --transition-magic: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* For magic nav */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg-dark); /* This main background is solid */
    color: var(--color-text-medium);
    line-height: 1.6;
    position: relative; 
    /* ===== NUEVO: Padding para el menú inferior móvil ===== */
    padding-bottom: 80px; 
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-main);
}

a:hover {
    color: var(--color-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
}

ul {
    list-style: none;
}

h1, h2, h3 {
    color: var(--color-text-light);
    margin-bottom: 1.2rem;
    font-weight: 700;
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; text-align: center; }
h3 { font-size: 1.6rem; }

section {
    padding: 6rem 0;
    position: relative; 
    z-index: 3; /* Content must be above particles */
    /* CAMBIO: Secciones ahora transparentes */
    background-color: transparent; 
}

/* Subtítulo de sección */
.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: var(--color-text-medium);
    margin-top: -1rem;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ======== Global Backgrounds (Video & Particles) ======== */
/* CAMBIO: Estos ahora cubren toda la página */
.page-video-bg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1; 
}

.page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.8));
    z-index: 0; 
}

#tsparticles-bg {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw; 
    height: 100vh; 
    z-index: 1; /* Partículas de fondo (rojas) */
    pointer-events: none; 
}
/* ======== End Global Backgrounds ======== */


/* ======== 2. Utility & CTA Buttons ======== */
.cta-button {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1rem;
    transition: var(--transition-main);
    border: none;
    cursor: pointer;
    position: relative; 
    z-index: 5; 
}

.primary-cta {
    background: var(--gradient-primary);
    color: var(--color-text-light);
}

.primary-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(229, 9, 20, 0.4);
    color: var(--color-text-light);
}

.secondary-cta {
    background-color: transparent;
    color: var(--color-text-light);
    border: 2px solid var(--color-primary);
}

.secondary-cta:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

/* ======== 3. Header & Navigation (MAGIC STYLES) ======== */
.site-header {
    background-color: rgba(20, 20, 20, 0.9);
    padding: 0.5rem 0; 
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-bg-light);
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo {
    max-height: 75px; 
    width: auto;
    transition: var(--transition-main);
}
.header-logo:hover {
    opacity: 0.9;
}

.main-nav {
    display: none; /* Oculto por defecto, ahora se usa magic-nav */
}

.magic-nav {
    display: none; /* Oculto en móvil */
    background-color: var(--color-bg-medium);
    border-radius: 10px;
    border: 1px solid var(--color-bg-light);
    padding: 8px;
    position: relative; 
}

.nav-list {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2; 
}

.nav-item a {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 8px;
    color: var(--color-text-dark);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative; 
    gap: 8px;
}

.nav-icon {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    transition: transform 0.3s ease;
}

.nav-text {
    transition: opacity 0.3s ease;
}

.nav-item.active a {
    color: var(--color-text-light); 
}

.nav-item:not(.active) a:hover {
    color: var(--color-text-medium);
}

.magic-bubble {
    position: absolute;
    top: 8px;
    left: 8px; 
    height: 44px; 
    width: 100px; 
    background: var(--gradient-primary);
    border-radius: 8px;
    z-index: 1; 
    transition: var(--transition-magic);
}

.nav-item.active .nav-icon {
    transform: scale(1.1);
}

.nav-item.cta-item a {
    color: var(--color-text-light);
}
.nav-item.cta-item:not(.active) a:hover {
    color: #fff;
}

/* Mobile Menu Toggle (ELIMINADO) */
#mobile-menu-toggle {
    display: none; /* Deshabilitado permanentemente */
}

/* Mobile Nav Panel (ELIMINADO) */
.mobile-nav {
    display: none !important; /* Deshabilitado permanentemente */
}


/* ======== 4. Hero Video Section (UPDATED) ======== */
.hero-video-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden; 
}

.hero-content {
    position: relative;
    z-index: 2; 
    padding-top: 86px; 
}

/* CAMBIO: Hero Logo Style */
.hero-logo {
    display: block;
    max-width: 250px; /* Más grande */
    margin: 0 auto 1.5rem auto; 
}

/* ===== NUEVO ESTILO DE TÍTULO Y EFECTO DE PULSO ===== */
.hero-content h1 {
    font-family: var(--font-display); /* Nueva fuente */
    font-size: 3.5rem; /* Tamaño ajustado */
    font-weight: 400; /* Bebas Neue es bold por defecto */
    margin-bottom: 1rem;
    white-space: nowrap; 
    letter-spacing: 1.5px;
    /* Efecto de pulso "Bombardeo" */
    animation: pulse-effect 2s infinite ease-in-out;
}

/* Animación de pulso */
@keyframes pulse-effect {
    0% {
        transform: scale(1);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.1), 0 0 10px rgba(229, 9, 20, 0.1);
    }
    50% {
        transform: scale(1.02);
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.3), 0 0 25px rgba(229, 9, 20, 0.4);
    }
    100% {
        transform: scale(1);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.1), 0 0 10px rgba(229, 9, 20, 0.1);
    }
}
/* ===== FIN DE NUEVO ESTILO ===== */


.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: var(--color-text-medium);
}

.hero-subtitle-box {
    max-width: 700px;
    margin: 2.5rem auto 0 auto;
    background-color: rgba(20, 20, 20, 0.8);
    border: 1px solid var(--color-bg-light);
    border-radius: 10px;
    padding: 1.5rem 2rem;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.hero-subtitle-box h3 {
    font-size: 1.3rem;
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
}
.hero-subtitle-box h3 .highlight {
    color: var(--color-primary);
    font-weight: 700;
}
.hero-subtitle-box p {
    font-size: 1.1rem;
    color: var(--color-text-medium);
    margin-bottom: 0;
}


/* ======== 5. Form Section (DISEÑO HÍBRIDO) ======== */
.form-section {
    background-color: rgba(20, 20, 20, 0.9); 
    position: relative;
    overflow: hidden;
}

/* Contenedor principal del formulario */
#mentorship-form {
    background-color: transparent;
    padding: 0;
    border: none;
    margin: 0;
    max-width: 1100px; /* Ancho máximo para el layout */
    margin: 0 auto;
}

/* Rejilla Superior (Video + Paso 1) */
.form-layout-grid-top {
    display: grid;
    grid-template-columns: 1fr; /* 1 columna en móvil */
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Columna Izquierda (Video) */
.form-media-column {
    display: flex;
    flex-direction: column;
}

.form-media-item {
    background-color: var(--color-bg-dark);
    border-radius: 10px;
    border: 1px solid var(--color-bg-light);
    padding: 1.5rem;
    display: flex; 
    flex-direction: column; 
    height: 100%; /* Ocupa toda la altura de la celda de la rejilla */
}

.form-media-item h3 {
    font-family: var(--font-display);
    letter-spacing: 1px;
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--color-primary);
    text-align: center;
}
.form-media-subtitle {
    text-align: center;
    font-size: 1rem;
    color: var(--color-text-medium);
    margin-top: -1rem;
    margin-bottom: 1.5rem;
}

.video-wrapper {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-bg-light);
    flex-grow: 1; 
    display: flex;
    /* ===== CORRECCIÓN: Aspecto horizontal 16:9 ===== */
    aspect-ratio: 16 / 9;
    max-width: 100%; /* Quitar el límite de 400px */
    margin: 0 auto;
}

.form-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Columna Derecha (Paso 1) */
.form-steps-column {
    display: flex;
    flex-direction: column;
}

.form-step-card {
    background-color: var(--color-bg-dark);
    border-radius: 10px;
    border: 1px solid var(--color-bg-light);
    padding: 1.5rem 2rem 2rem 2rem;
    display: flex; 
    flex-direction: column; 
    height: 100%; 
}

/* Tarjeta Inferior (Paso 2 - Ancho Completo) */
.form-step-card-full {
    background-color: var(--color-bg-dark);
    border-radius: 10px;
    border: 1px solid var(--color-bg-light);
    padding: 1.5rem 2rem 2rem 2rem;
    max-width: 700px; /* Ancho máximo igual al formulario antiguo */
    margin: 0 auto; /* Centrar la tarjeta del Paso 2 */
}

.form-logo-wrapper {
    text-align: center;
    margin-bottom: 1.5rem;
}

.form-logo-large {
    max-width: 200px; /* Logo más pequeño aquí */
    opacity: 0.8;
}

.form-step-title {
    font-size: 1.4rem;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-bg-light);
    padding-bottom: 0.5rem;
    margin-top: 0; /* Reseteo */
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
    position: relative; 
    z-index: 5; 
}

.form-group:has(#phone) {
    z-index: 10;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--color-text-light);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border-radius: 5px;
    border: 1px solid var(--color-bg-light);
    background-color: var(--color-bg-medium);
    color: var(--color-text-light);
    font-size: 1rem;
    height: 48px; /* Standard height */
}

.form-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23AAAAAA' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708 .708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    padding-right: 40px; 
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.3);
}

/* Rejilla para Peso/Altura/Edad */
.form-group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columnas */
    gap: 1rem;
}

/* Botones de radio "Recuadros" */
.form-group-radio.modern-radio {
    display: inline-block; /* Permite que estén uno al lado del otro */
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}
.form-group-radio.modern-radio input[type="radio"] {
    display: none; 
}
.form-group-radio.modern-radio label {
    display: inline-block;
    cursor: pointer;
    padding: 10px 15px; /* Más compacto */
    position: relative;
    border: 1px solid var(--color-bg-light);
    border-radius: 5px;
    background-color: var(--color-bg-medium);
    color: var(--color-text-medium);
    width: auto; /* Ancho automático */
    transition: var(--transition-main);
    font-weight: 500;
}
.form-group-radio.modern-radio label:hover {
    background-color: var(--color-bg-light);
}
.form-group-radio.modern-radio label::before {
    /* Ocultamos el círculo de radio */
    display: none;
}
.form-group-radio.modern-radio input[type="radio"]:checked + label {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-text-light);
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.5);
}

/* Contenedor del botón de envío */
.form-submit-wrapper {
    text-align: center;
    margin-top: 2rem;
}

.form-submit-wrapper .cta-button {
    width: 100%;
    max-width: 500px; /* Ancho máximo */
    padding: 15px 30px;
    font-size: 1.2rem;
}


/* --- Fin de Estilos de Formulario --- */


.validation-icon {
    display: none; 
    position: absolute;
    right: 15px;
    top: 42px; 
    font-size: 1.2rem;
}

/* ======== intl-tel-input Dark Theme (with fix) ======== */
.form-group .iti {
    width: 100%; 
}

.iti__flag-container {
    background-color: var(--color-bg-light);
    z-index: 3; 
}

.iti__selected-flag {
    background-color: var(--color-bg-light);
}

.iti__country-list {
    background-color: var(--color-bg-dark);
    border: 1px solid var(--color-bg-light);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1001; 
    position: absolute; 
}

.iti__country {
    color: var(--color-text-medium);
}

.iti__country.iti__highlight {
    background-color: var(--color-bg-medium);
}

.iti__dial-code {
    color: var(--color-text-dark);
}

.iti--separate-dial-code .iti__selected-dial-code {
    color: var(--color-text-medium);
}

#phone {
    width: 100%;
    padding: 12px 15px 12px 95px !important; 
    border-radius: 5px;
    border: 1px solid var(--color-bg-light);
    background-color: var(--color-bg-medium);
    color: var(--color-text-light);
    font-size: 1rem;
    height: 48px; 
    position: relative; 
    z-index: 2; 
}

#phone:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.3);
}
/* ======== END intl-tel-input Dark Theme ======== */


/* Form Loader */
.loader {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-primary);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Form Messages */
#form-messages {
    padding: 1rem;
    border-radius: 5px;
    margin-bottom: 1.5rem;
    display: none; 
    font-weight: 500;
}

#form-messages.success {
    background-color: rgba(40, 167, 69, 0.2);
    color: var(--color-success);
    border: 1px solid var(--color-success);
}

#form-messages.error {
    background-color: rgba(220, 53, 69, 0.2);
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

/* ======== 6. Plans Section ======== */
.plans-section {
    background-color: rgba(34, 34, 34, 0.9); /* --color-bg-medium semi-transparente */
    overflow: hidden; /* Para contener destellos */
}

/* ===== NUEVO: Lienzo de destellos para Planes ===== */
#tsparticles-plans {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
/* ===== FIN NUEVO ===== */

.plans-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

.plan-card {
    background-color: var(--color-bg-medium); /* Cards sólidas */
    border: 1px solid var(--color-bg-light);
    border-radius: 10px;
    padding: 2.5rem 2rem;
    transition: var(--transition-main);
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--color-bg-light);
    z-index: 2; /* Asegura que la tarjeta esté sobre los destellos de fondo */
}

.plan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.plan-card.popular {
    border-top-color: var(--color-primary);
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.3);
}

/* ===== NUEVO: Lienzo de destellos para Plan Popular ===== */
#tsparticles-popular {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Detrás del contenido de la tarjeta */
    pointer-events: none;
}
.plan-card.popular > * {
    position: relative;
    z-index: 2; /* Contenido de la tarjeta por encima de sus destellos */
}
/* ===== FIN NUEVO ===== */


/* ===== ETIQUETA "MÁS POPULAR" ELIMINADA ===== */
/* ===== FIN ===== */

.plan-header {
    text-align: center;
    border-bottom: 1px solid var(--color-bg-light);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.plan-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.plan-price span {
    font-size: 1rem;
    color: var(--color-text-dark);
    font-weight: 400;
}

.plan-features {
    list-style: none;
    margin-bottom: 2rem;
}

.plan-features li {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plan-features .fa-check-circle {
    color: var(--color-success);
}

.plan-features .fa-times-circle {
    color: var(--color-text-dark);
}

.plan-card .cta-button {
    width: 100%;
    text-align: center;
}

/* ======== 7. Coach Section (NUEVO DISEÑO CON VIDEO SLIDER) ======== */
.coach-section {
    background-color: rgba(20, 20, 20, 0.9); 
    overflow: hidden; 
}
.coach-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
    max-width: 1000px; 
    margin: 0 auto;
    position: relative; 
    z-index: 5;
}
.coach-image {
    text-align: center;
    max-width: 400px; 
    margin: 0 auto;
}

/* Video principal del coach */
.coach-video-wrapper {
    width: 100%;
    margin: 0 auto 1.5rem auto; /* Espacio debajo del video principal */
    border-radius: 10px;
    border: 1px solid var(--color-bg-light);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    overflow: hidden;
    aspect-ratio: 9 / 16; 
}
.coach-main-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Contenedor del Slider */
.video-slider-container {
    width: 100%;
    margin: 0 auto;
    border-radius: 10px;
    border: 1px solid var(--color-bg-light);
    background: var(--color-bg-dark);
    padding: 10px;
    position: relative; /* Para las flechas */
}
.video-slider-container .swiper-slide {
    width: 100px; /* Ancho de cada "thumbnail" */
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}
.video-slider-container .swiper-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Estilos de las flechas y paginación de Swiper */
:root {
    --swiper-theme-color: var(--color-primary);
    --swiper-navigation-color: var(--color-primary);
    --swiper-pagination-color: var(--color-primary);
    --swiper-navigation-size: 30px;
}
.video-slider-container .swiper-button-next,
.video-slider-container .swiper-button-prev {
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
}
.video-slider-container .swiper-button-next:after,
.video-slider-container .swiper-button-prev:after {
    font-size: 1rem;
    font-weight: bold;
}
.video-slider-container .swiper-button-prev { left: 5px; }
.video-slider-container .swiper-button-next { right: 5px; }
.video-slider-container .swiper-pagination-bullets {
    bottom: 5px;
}


.coach-bio {
    /* Los textos ahora están debajo de la foto */
}
.coach-name {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text-light);
    margin-bottom: 0.25rem;
}
.coach-title {
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: 1.5rem;
}
.coach-bio p {
    font-size: 1.1rem;
    color: var(--color-text-medium);
    margin-bottom: 1.5rem;
}
.coach-bio .cta-button {
    margin-top: 1rem;
    display: inline-flex; /* Para alinear el icono */
    align-items: center;
    gap: 0.5rem;
}

/* Partículas del coach */
#tsparticles-coach {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}


/* ======== 8. Transformations Section (NUEVO) ======== */
.transformations-section {
    background-color: rgba(34, 34, 34, 0.9); /* --color-bg-medium semi-transparente */
}

.transformations-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.transformation-card {
    background-color: var(--color-bg-medium);
    border: 1px solid var(--color-bg-light);
    border-radius: 10px;
    overflow: hidden;
    transition: var(--transition-main);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.transformation-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.transformation-image {
    width: 100%;
    height: auto;
    display: block;
}

.transformation-info {
    padding: 1.5rem;
}

.transformation-info h3 {
    color: var(--color-primary);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.transformation-info p {
    color: var(--color-text-medium);
    font-size: 1rem;
    margin-bottom: 0;
}

.cta-transformaciones {
    text-align: center;
    margin-top: 3rem;
}

.cta-transformaciones p {
    font-size: 1.2rem;
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
}

/* ======== 8.5. Video Testimonial Section (NUEVO) ======== */
.video-testimonial-section {
    background-color: rgba(20, 20, 20, 0.9); 
    overflow: hidden;
}

#tsparticles-testimonial {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.video-testimonial-wrapper {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-bg-light);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    aspect-ratio: 16 / 9;
}

.video-testimonial-player {
    width: 100%;
    height: 100%;
    display: block;
}

/* Estilo del botón de play (opcional, si no se usan controles) */
.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(229, 9, 20, 0.8);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    cursor: pointer;
    transition: var(--transition-main);
    opacity: 0; /* Se oculta si se usan 'controls' */
    pointer-events: none;
}

.video-testimonial-wrapper:hover .video-play-button {
    /* opacity: 1; */ /* Deshabilitado si se usan 'controls' */
}

/* ======== 9. Footer (SynergyPower Horizontal Centered) ======== */
.site-footer {
    background-color: rgba(20, 20, 20, 0.95); 
    color: var(--color-text-dark);
    padding: 2.5rem 0;
    border-top: 1px solid var(--color-bg-light);
    font-size: 0.9rem;
    position: relative; 
    z-index: 3; 
}

.footer-content-new { 
    display: flex;
    flex-direction: column; 
    align-items: center;
    text-align: center;
    gap: 1rem; 
}

.footer-content-new span, .footer-content-new a {
    color: var(--color-text-medium); 
}

.footer-content-new a {
    color: var(--color-primary); 
    font-weight: 600;
}
.footer-content-new a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.footer-content-new a[href*="synergypower.net.ec"] {
    color: #E50914; 
    font-weight: 700;
    text-transform: uppercase; 
}


.footer-divider {
    display: none; 
}

.footer-social-moodle,
.footer-contact-moodle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.footer-social-moodle a,
.footer-contact-moodle a {
    color: var(--color-text-medium); 
    font-size: 1.2rem;
    transition: var(--transition-main);
}

.footer-social-moodle a:hover,
.footer-contact-moodle a:hover {
    color: var(--color-primary); 
    transform: scale(1.1);
}

/* ======== 10. Cookie Consent Bar ======== */
.cookie-consent-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-bg-dark);
    border-top: 1px solid var(--color-bg-light);
    padding: 1.5rem 2rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.3);
    
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
}

.cookie-consent-bar.is-visible {
    transform: translateY(0);
}
.cookie-consent-bar.is-hidden {
    display: none;
}

.cookie-content {
    text-align: center;
    color: var(--color-text-medium);
    font-size: 0.9rem;
}

.cookie-content a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: underline;
}

#cookie-accept-btn {
    padding: 10px 24px;
    font-size: 0.9rem;
    flex-shrink: 0;
}


/* ======== 11. Animation Base States ======== */
[data-anime] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-anime="fade-in-down"] {
    transform: translateY(-30px);
}

[data-anime="fade-in-left"] {
    transform: translateX(-30px);
}

.animate {
    opacity: 1;
    transform: translateY(0);
}

/* ======== 12. Certificate Modal (NUEVO) ======== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}
.modal-content {
    position: relative;
    background-color: var(--color-bg-dark);
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid var(--color-bg-light);
    max-width: 90%;
    max-height: 90%;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}
.modal-overlay.is-visible .modal-content {
    transform: scale(1);
}
.modal-content img {
    display: block;
    max-width: 100%;
    max-height: 80vh; /* Limita la altura de la imagen */
    border-radius: 5px;
}
.modal-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 35px;
    height: 35px;
    background: var(--gradient-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.5);
    transition: var(--transition-main);
}
.modal-close:hover {
    transform: scale(1.1);
}


/* ======== 13. Nuevo Menú Móvil Inferior ======== */
.mobile-bottom-nav {
    display: flex; /* Oculto en escritorio, visible en móvil */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-bg-light);
    z-index: 998; /* Debajo del header pero sobre todo lo demás */
    box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
}

.mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--color-text-dark);
    text-decoration: none;
    font-size: 0.75rem;
    gap: 4px;
    transition: var(--transition-main);
}
.mobile-bottom-nav-item i {
    font-size: 1.4rem;
}
.mobile-bottom-nav-item.active {
    color: var(--color-primary);
}
.mobile-bottom-nav-item.cta-item {
    color: var(--color-text-light);
    background: var(--gradient-primary);
}
.mobile-bottom-nav-item.cta-item:active {
    background: var(--color-primary-dark);
}

/* ======== 14. Botón Scroll-to-Top (CORREGIDO) ======== */
.scroll-to-top {
    display: flex; 
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 90px; /* Sobre el menú móvil */
    right: 20px;
    width: 45px;
    height: 45px;
    background: var(--gradient-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 1.2rem;
    z-index: 997;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden; /* Ocultar por defecto */
}
.scroll-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible; /* Mostrar cuando esté visible */
}
.scroll-to-top:hover {
    box-shadow: 0 0 15px rgba(229, 9, 20, 0.5);
}


/* ======== 15. Responsive Design ======== */

/* Tablet (min-width: 768px) */
@media (min-width: 768px) {
    body {
        padding-bottom: 0; /* Quitar padding en escritorio */
    }

    h1, .hero-content h1 { 
        font-size: 4.5rem; /* Ajustado para la nueva fuente */
    }
    h2 { font-size: 2.8rem; }

    #mobile-menu-toggle {
        display: none; /* Ocultar hamburguesa en escritorio */
    }

    .main-nav.magic-nav, .magic-nav { 
        display: block !important; /* CORRECCIÓN: Mostrar menú de escritorio */
    }

    /* ===== NUEVO: Layout Híbrido de Formulario ===== */
    .form-layout-grid-top {
        grid-template-columns: 1fr 1fr; /* 2 columnas para video y paso 1 */
        /* ===== CORRECCIÓN: Alinear cajas ===== */
        align-items: stretch; /* Asegura que ambas tarjetas tengan la misma altura */
    }
    .form-step-card-full {
        margin-top: 2rem; /* Espacio entre la rejilla superior y el paso 2 */
    }
    .form-group-grid {
        grid-template-columns: 1fr 1fr; /* 2 columnas para peso/altura/etc */
    }
    /* ===== FIN NUEVO ===== */


    .coach-content {
        /* ===== CORRECCIÓN: Layout de Coach para Desktop ===== */
        grid-template-columns: 400px 1fr; /* Columna de video fija, texto flexible */
        gap: 3rem;
        align-items: center; 
        text-align: left;
    }
    .coach-bio {
        text-align: left;
    }
    .coach-video-wrapper {
        max-width: 400px; /* Ancho fijo para el video */
        width: 100%;
    }
    .video-slider-container {
        max-width: 400px; /* Ancho fijo para el slider */
        width: 100%;
    }
    
    .plans-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .transformations-grid {
        /* Se mostrarán 2 columnas en tablet */
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-content-new {
        flex-direction: row; 
        justify-content: center; 
        flex-wrap: wrap; 
        gap: 1.5rem;
        align-items: center;
    }
    .footer-divider {
        display: inline;
        margin: 0 0.5rem;
    }

    .footer-social-moodle,
    .footer-contact-moodle {
        flex-wrap: nowrap;
    }

    .cookie-consent-bar {
        flex-direction: row;
        justify-content: space-between;
    }
    .cookie-content {
        text-align: left;
    }

    /* Ocultar menú inferior en escritorio */
    .mobile-bottom-nav {
        display: none;
    }

    /* Posición del botón de subir en escritorio */
    .scroll-to-top {
        bottom: 30px; 
    }
}

/* Large Desktop (min-width: 1200px) */
@media (min-width: 1200px) {
    h1, .hero-content h1 { 
        font-size: 5.5rem; /* Ajustado para la nueva fuente */
    }

    .plans-container {
        gap: 2.5rem;
    }

    .transformations-grid {
        /* Se mostrarán 3 columnas en escritorio */
        grid-template-columns: repeat(3, 1fr);
    }

    .magic-nav .nav-text {
        opacity: 1;
    }
    
    .footer-content-new {
        flex-direction: row;
        justify-content: center; 
        flex-wrap: nowrap; 
        gap: 1.5rem; 
        white-space: nowrap;
    }

    /* 4 columnas para la rejilla de peso/altura/etc. en pantallas grandes */
    .form-group-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

/* Medium Desktop (1024px to 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    /* Ajuste de H1 para la nueva fuente */
    h1, .hero-content h1 { 
        font-size: 4.5rem;
    }

    .magic-nav .nav-text {
        opacity: 0;
        width: 0;
        transform: translateX(-10px);
    }
    .magic-nav .nav-item:hover .nav-text,
    .magic-nav .nav-item.active .nav-text {
        opacity: 1;
        width: auto;
        transform: translateX(0);
    }
    .magic-nav .nav-item a {
        padding-left: 12px;
        padding-right: 12px;
    }

    .transformations-grid {
        /* También 3 columnas en escritorio mediano */
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Ajuste final para móvil (max-width: 767px) */
@media (max-width: 767px) {
    body {
        /* Asegurarnos que el padding se aplique */
        padding-bottom: 80px !important; 
    }
    
    .hero-content h1 {
        font-size: 3rem; /* Tamaño para móvil */
        white-space: normal; /* Permitir que se rompa en móvil */
    }

    /* Forzar los recuadros de radio a 3 columnas en móvil */
    .form-group-radio.modern-radio {
        display: inline-block;
        width: 31%;
        margin-right: 0.5%;
        text-align: center;
        padding: 10px 5px; /* Menos padding */
        font-size: 0.9rem;
    }

    .form-group-radio.modern-radio label {
        padding: 10px 5px; /* Menos padding */
        text-align: center;
        width: 100%;
    }
    
    .coach-content {
        text-align: center;
    }
    .coach-bio {
        text-align: center;
    }

    .form-group-grid {
        grid-template-columns: 1fr; /* 1 columna en móvil */
    }

    /* Ocultar el botón de hamburguesa original */
    #mobile-menu-toggle {
        display: none;
    }

    /* ===== CORRECCIÓN: Ocultar menú de escritorio en tablet/móvil ===== */
    .main-nav.magic-nav, .magic-nav { 
        display: none !important;
    }
}