/* Radio buttons en una sola fila para el formulario de referidos */
.radio-inline {
    display: flex;
    gap: 1.5em;
    align-items: center;
}
.radio-inline input[type="radio"] {
    margin-right: 0.3em;
}
@font-face {
    font-family: 'Nunito';
    src: url('../font/Nunito/Nunito-VariableFont_wght.ttf') format('truetype');
    font-weight: 1 1000; /* Variable font weight range */
}

@font-face {
    font-family: 'Nunito Heavy';
    src: url('../font/Nunito-Heavy-Regular/NunitoHeavy-Regular.ttf') format('truetype');
}

:root {
    --primary-red: #d90026;
    --yellow-accent: #ffc423;
    --dark-text: #333333;
    --light-text: #ffffff;
    --bg-light: #f7f7f7;
    --font-primary: 'Nunito', sans-serif;
    --font-heavy: 'Nunito Heavy', sans-serif;
}

#confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Permite hacer clic a través del canvas */
    z-index: 9999; /* Asegura que esté por encima de todo */
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    margin: 0;
    background-image: url('../images/TEXTURA.png'), url('../images/FONDO.png');
    background-size: 93%, cover;
    background-repeat: repeat, no-repeat;
    color: var(--dark-text);
}

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

.btn {
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
}

/* --- Header --- */
.main-header {
    background-image: url('../images/TEXTURA.png'), url('../images/FONDO.png');
    background-size: 33%, cover;
    background-repeat: repeat, no-repeat;
    color: var(--light-text);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo h1 {
    margin: 0;
    font-size: 1.8rem;
    font-family: var(--font-heavy);
}

.main-nav {
    display: none; /* Oculto en móvil */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #333333e8;
}
.main-nav.active {
    display: block;
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.nav-links li {
    padding: 1rem 0;
}

.nav-links a {
    color: var(--light-text);
    text-decoration: none;
    font-size: 1.2rem;
}

.user-actions {
    display: none; /* Oculto en móvil */
}

.hamburger {
    background: none;
    border: none;
    color: var(--light-text);
    font-size: 1.8rem;
    cursor: pointer;
}

/* --- Hero Section --- */
.hero {
    background: none; /* Quitamos el fondo para que use el del body */
    padding: 2rem 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.static-confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none; /* Para que no interfiera con los clics */
    z-index: 1001; /* Aumentado para estar sobre el header */
}

.hero-logo-container {
    width: 50%;
    max-width: 250px; /* Limite para pantallas grandes */
    margin-bottom: 2rem;
}

.hero-logo {
    width: 100%;
}

.hero-content {
    display: flex;
    flex-direction: row; /* Cambiado a 'row' para que siempre estén en fila */
    align-items: flex-end; /* Alineamos los items a la base */
    justify-content: center;
    width: 90%; /* El contenedor ocupa el 90% del ancho */
    margin: 0 auto; /* Centramos el contenedor */
    gap: 1rem;
}

.hero-promo-image-container,
.hero-model-container {
    width: 50%; /* Cada imagen ocupa la mitad del contenedor */
}

.hero-promo-image {
    width: 100%;
}

.hero-model-container {
     width: 50%;
}

.hero-model {
    max-width: 100%;
}

.hero-banner {
    width: 70%;
    max-width: 500px; /* Ajustar según sea necesario */
    margin: 1rem auto 0; /* Centrado y con margen superior */
    margin-top: 5rem;
}

.hero-banner-image {
    width: 100%;
}


/* --- Steps Section --- */
.steps-section {
    background-image: url('../images/TEXTURA.png'), url('../images/FONDO.png');
    background-size: 33%, cover;
    background-repeat: repeat, no-repeat;
    color: var(--light-text);
    text-align: center;
    padding: 2rem 1rem;
}

.steps-section h2 {
    font-size: 1rem; /* Reducido el tamaño de la fuente */
    margin-bottom: 2rem;
    font-family: var(--font-heavy);
}

.steps-gallery {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
}

.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.step.slide {
    min-width: 100%;
    box-sizing: border-box;
}

.step {
    background-color: transparent; /* Quitamos el fondo */
    color: var(--dark-text);
    padding: 0; /* Quitamos el padding */
    border-radius: 10px;
}

.step img {
    border-radius: 10px;
    margin-bottom: 1rem;
}

.slider-dots {
    text-align: center;
    margin-top: 1rem;
}

.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot.active {
    background-color: var(--yellow-accent);
}

.register-here-link {
    display: block;
    width: 60%;
    max-width: 300px;
    margin: 2rem auto 0;
}

.register-here-link img {
    width: 100%;
}

.btn-winners {
    background-color: var(--yellow-accent);
    color: var(--dark-text);
    margin-top: 2rem;
    font-size: 1.2rem;
}


/* --- Form Section --- */
.form-section {
    padding: 2rem 1rem;
    background-color: var(--bg-light);
}

.form-container {
    background-color: var(--light-text);
    border-radius: 20px;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.form-image-container img {
    width: 95%;
    display: block;
}

.form-content {
    padding: 2rem;
}

.form-content h3 {
    font-family: var(--font-heavy);
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.input-group {
    margin-bottom: 1rem;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #555;
    font-weight: 600;
}

.input-group input[type="text"],
.input-group input[type="email"],
.input-group input[type="tel"] {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group input {
    margin-right: 0.5rem;
}

.checkbox-group label a {
    color: var(--primary-red);
    text-decoration: underline;
}

.btn-submit {
    background-color: var(--primary-red);
    color: var(--light-text);
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    margin-top: 1rem;
}


/* --- Terms & Footer Section --- */
.terms-footer {
    background-color: var(--bg-light);
    color: #666;
    padding-top: 120px; /* Espacio para las tres capas */
    position: relative;
    text-align: center;
}

.footer-shape-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    overflow: hidden; /* Evita desbordamientos */
    pointer-events: none; /* Para que no interfiera con el contenido de abajo */
}

.shape {
    position: absolute;
    left: 0;
    width: 100%;
    height: 120px; /* Hacemos que todas las formas ocupen el contenedor completo */
}

/* Capa 1: Pentágono superior (el más visible) */
.shape-1 {
    background-color: rgba(217, 0, 38, 0.9);
    /* Pentágono: 5 puntos. Su punta llega a 1/3 de la altura total (40px) */
    clip-path: polygon(0 0, 100% 0, 100% 20%, 50% 60%, 0 20%);
    z-index: 3;
}

/* Capa 2: Pentágono del medio (más grande) */
.shape-2 {
    background-color: rgba(217, 0, 38, 0.6);
    /* Su punta llega a 2/3 de la altura total (80px) */
    clip-path: polygon(0 0, 100% 0, 100% 40%, 50% 80%, 0 40%);
    z-index: 2;
}

/* Capa 3: Pentágono inferior (el más grande de todos) */
.shape-3 {
    background-color: rgba(217, 0, 38, 0.3);
    /* Su punta llega al final (120px) */
    clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
    z-index: 1;
}

.terms-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

.terms-content h3 {
    font-family: var(--font-heavy);
    color: var(--dark-text);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.terms-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.terms-content li {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
}

.terms-content li::before {
    content: '-';
    position: absolute;
    left: 0;
    top: 0;
}

.promo-validity {
    margin-top: 2rem;
    font-weight: bold;
    color: var(--dark-text);
}

.footer-bottom-bar {
    background-color: #333;
    color: var(--light-text);
    padding: 1rem;
    font-size: 0.9rem;
}


/* --- Footer --- */
.main-footer-bottom {
    background-color: #333;
    color: var(--light-text);
    text-align: center;
    padding: 1.5rem 1rem;
}

.footer-links {
    margin-bottom: 1rem;
}

.footer-links a {
    color: var(--light-text);
    text-decoration: none;
    margin: 0 0.5rem;
    display: inline-block;
    padding: 0.5rem;
}


/* --- Desktop Styles (Media Query) --- */
@media (min-width: 768px) {
    .hamburger {
        display: none;
    }

    .main-nav {
        display: block;
        position: static;
        width: auto;
        background-color: transparent;
    }

    .nav-links {
        display: flex;
        gap: 1rem;
    }

    .nav-links li {
        padding: 0;
    }

    .nav-links a {
        font-size: 0.9rem;
    }

    .user-actions {
        display: flex;
        gap: 0.5rem;
    }

    .btn-register, .btn-login {
        font-size: 0.8rem;
        padding: 0.6rem 1rem;
    }
    
    .btn-register {
      background-color: var(--yellow-accent);
      color: var(--dark-text);
    }
    
    .btn-login {
       background-color: transparent;
       color: var(--light-text);
       border: 1px solid var(--light-text);
    }
    
    .hero-buttons {
        display: none;
    }

    .hero-logo-container {
        width: 30%;
    }

    .hero-content {
        width: 100%;
        max-width: 700px; /* Un máximo para que no se separen demasiado */
        gap: 2rem;
    }

    /* Las reglas de ancho para los contenedores de imagen ya no son necesarias aquí */

    .steps-gallery {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        overflow: visible; /* Hacemos visible el overflow en desktop */
    }

    .slider-wrapper {
        gap: 1.5rem;
    }

    .step.slide {
        min-width: auto; /* Reseteamos el min-width en desktop */
    }

    .slider-dots {
        display: none; /* Ocultamos los dots en desktop */
    }

    .step {
        width: 30%;
        max-width: 250px;
    }
}