/* Estilos para Electroral - Hidratación Inteligente */

/* Tipografía */
body {
    font-family: 'Raleway', sans-serif;
    background-color: #050e1fff;
}

/* Fondo oscuro para secciones con neón */
.neon-section {
    background-color: #040b1dff;
    border-radius: 12px;
    margin: 2rem 1rem;
    padding: 2rem 0;
}

/* Bordes neón */
.neon-green {
    border: 2px solid #64edb4ff;
    box-shadow: 0 0 15px #64edb4ff, inset 0 0 15px rgba(100,237,180,0.2);
}

.neon-pink {
    border: 2px solid #e0657dff;
    box-shadow: 0 0 15px #e0657dff, inset 0 0 15px rgba(224,101,125,0.2);
}

.neon-blue {
    border: 2px solid #333b63ff;
    box-shadow: 0 0 15px #333b63ff, inset 0 0 15px rgba(51,59,99,0.2);
}

/* Botón Enviar del header */
.enviar-btn {
    background-color: #a00723;
    border: 1px solid #a00723;
    box-shadow: 0 0 10px #a00723, inset 0 0 5px rgba(160, 7, 35, 0.5);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.enviar-btn:hover {
    background-color: #c0082b;
    box-shadow: 0 0 20px #a00723, inset 0 0 10px rgba(160, 7, 35, 0.8);
    transform: translateY(-2px);
}

/* Formulario */
.checkbox-container {
    background-color: rgba(255,255,255,0.05);
    padding: 16px;
    border-radius: 8px;
    margin: 20px 0;
}
.submit-btn {
    background: linear-gradient(45deg, #d92413, #ff6b35);
    border: none;
    transition: all 0.3s ease;
}
.submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(217, 36, 19, 0.3);
}

/* Ajustes de carrusel (sin cambios) */
.carousel-container {
    overflow: hidden;
    position: relative;
    width: 100%;
}
.carousel-track {
    display: flex;
    animation: scroll 20s linear infinite;
    width: max-content;
}
.carousel-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    padding: 0 2rem;
}
.carousel-logo img {
    max-height: 90px;
    width: auto;
    object-fit: contain;
}
.carousel-container:hover .carousel-track {
    animation-play-state: paused;
}

/* Animaciones existentes conservadas */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Gradientes (sin cambios, si se necesitan) */
.electroral-gradient { background: linear-gradient(135deg, #d92413 0%, #eb5910 50%, #c40a4b 100%); }
.advance-gradient { background: linear-gradient(135deg, #d92413 0%, #fd796b 100%); }
.plus-gradient { background: linear-gradient(135deg, #aa0202 0%, #d9f416 100%); }
.uva-gradient { background: linear-gradient(135deg, #f692f4 0%, #c063fd 50%, #a800a8 100%); }
.mandarina-gradient { background: linear-gradient(135deg, #fec107 0%, #ff6d3d 50%, #ef4900 100%); }
.coco-gradient { background: linear-gradient(135deg, #f7d8b2 0%, #c9a879 50%, #d39142 100%); }
.cereza-gradient { background: linear-gradient(135deg, #ffcdde 0%, #fa7c94 50%, #e92940 100%); }
.property-gradient { background: linear-gradient(135deg, #0077f6 0%, #00e7fe 50%, #00fd7c 100%); }

/* Tipografías */
.mafle-bold { font-weight: 700; }
.mafle-regular { font-weight: 400; }
.mafle-thin { font-weight: 100; }

/* Hover y animaciones */
.hover-grow { transition: transform 0.3s, box-shadow 0.3s; }
.hover-grow:hover { transform: scale(1.05); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); }
.hover-bounce:hover { animation: bounce 0.5s; }
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.hover-rotate:hover { transform: rotate(5deg) scale(1.05); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.product-animation { animation: slideIn 1s ease-out; }
@keyframes slideIn {
    0% { transform: translateX(-100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
.floating { animation: floating 3s ease-in-out infinite; }
@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
.pulse-glow { animation: pulse-glow 2s infinite; }
@keyframes pulse-glow {
    0% { box-shadow: 0 0 5px rgba(217, 36, 19, 0.5); }
    50% { box-shadow: 0 0 20px rgba(217, 36, 19, 0.8); }
    100% { box-shadow: 0 0 5px rgba(217, 36, 19, 0.5); }
}
.slide-up { animation: slideUp 0.8s ease-out; }
@keyframes slideUp {
    0% { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.fade-in { animation: fadeIn 1.2s ease-out; }
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.hover-shake:hover { animation: shake 0.5s; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.hover-pulse:hover { animation: pulse 1s infinite; }
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.hover-glow:hover { box-shadow: 0 0 15px rgba(0, 119, 246, 0.6); transition: box-shadow 0.3s; }
.tooltip { position: relative; cursor: pointer; }
.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 100;
}
.tooltip:hover::after { opacity: 1; visibility: visible; }

/* Carrito flotante */
.floating-cart {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    transition: transform 0.3s;
}
.floating-cart:hover { transform: translateY(-50%) scale(1.1); }
.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #d92413;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    animation: pulse 2s infinite;
}

/* Header */
header {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Form inputs */
.form-input {
    border: 2px solid #e5e7eb;
    transition: all 0.3s;
}
.form-input:focus {
    border-color: #d92413;
    box-shadow: 0 0 0 3px rgba(217, 36, 19, 0.1);
    outline: none;
}

/* Nuevos colores de texto */
.text-neon-green { color: #64edb4ff; }
.text-neon-pink { color: #e0657dff; }
.text-neon-blue { color: #333b63ff; }

/* Estilo para las tarjetitas de íconos en inicio */
.neon-glow:hover {
    box-shadow: 0 0 15px #e0657d, inset 0 0 8px rgba(224, 101, 125, 0.4);
}

/* Tarjetas de beneficios */
.beneficio-card {
    background: rgba(12, 34, 72, 0.6);  /* #0c2248 con transparencia */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid #2e7ecbff;
    box-shadow: 0 0 12px #2e7ecbff, inset 0 0 8px rgba(46, 126, 203, 0.2);
    transition: all 0.3s ease;
}
.beneficio-card:hover {
    box-shadow: 0 0 20px #2e7ecbff, inset 0 0 12px rgba(46, 126, 203, 0.4);
    transform: translateY(-3px);
}

/* Ajuste del título con líneas y punto en beneficios */
#beneficios .flex .h-px {
    background-color: #e0657dff;
}

.beneficio-card .neon-title-hover {
    transition: text-shadow 0.3s ease;
}
.beneficio-card:hover .neon-title-hover {
    text-shadow: 0 0 8px #ffffff, 0 0 15px #ffffff, 0 0 20px #ffffff;
}

.neon-title-hover {
    transition: text-shadow 0.3s ease;
}
.neon-title-hover:hover {
    text-shadow: 0 0 8px #ffffff, 0 0 15px #ffffff, 0 0 20px #ffffff;
}

/* Sección sin fondo (opcional, para asegurar) */
#beneficios {
    background: transparent;
}

/* Texto fluido para los enlaces del header */
.nav-link-container {
    font-size: clamp(0.65rem, 1.4vw, 0.9rem);
    line-height: 1.2;
}

/* Asegurar centrado vertical absoluto en el nav */
header nav {
    align-items: center;
}

.header-logo {
    height: clamp(2rem, 4vw, 2.5rem);  /* se adapta al ancho de la ventana */
    width: auto;                       /* mantiene la proporción */
    max-height: 2.5rem;                /* límite para pantallas muy anchas */
    object-fit: contain;
}

/* --- Estilos nuevos para la sección inicio --- */

/* Tarjeta con degradado negro de derecha a izquierda (más oscuro a la derecha) */
.tarjeta-inicio {
    background: linear-gradient(to left, rgba(0,0,0,0.9), transparent);
    backdrop-filter: blur(4px);
}

/* Ícono con borde redondo y neón rojo */
.icono-neon-rojo {
    border: 2px solid #f4333bff;
    border-radius: 50%;
    box-shadow: 0 0 10px #f4333bff, inset 0 0 5px rgba(244, 51, 59, 0.4);
    transition: all 0.3s ease;
}
.icono-neon-rojo:hover {
    box-shadow: 0 0 20px #f4333bff, inset 0 0 10px rgba(244, 51, 59, 0.7);
    transform: scale(1.05);
}

/* Texto verde con brillo neón al pasar el cursor */
.neon-green-hover {
    transition: text-shadow 0.3s ease;
}
.neon-green-hover:hover {
    text-shadow: 0 0 8px #64edb4, 0 0 15px #64edb4, 0 0 20px #64edb4;
}

/* Ajuste para que la columna del texto no desborde */
@media (max-width: 768px) {
    #inicio h1 {
        font-size: 2rem; /* refuerzo extra para móviles */
    }
}

/* Luz blanca alrededor de la botella */
.botella-glow {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
    transition: filter 0.3s ease;
}
.botella-glow:hover {
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 1));
}

/* Animación de pulso neón verde para el texto */
.neon-green-pulse {
    animation: neonPulseGreen 2s ease-in-out infinite;
}

@keyframes neonPulseGreen {
    0%, 100% {
        text-shadow: 0 0 4px #64edb4, 0 0 8px #64edb4;
    }
    50% {
        text-shadow: 0 0 15px #64edb4, 0 0 25px #64edb4, 0 0 35px #64edb4;
    }
}

/* ==================================================
   SECCIÓN ELECCIÓN
================================================== */

#eleccion {
    background:
        radial-gradient(circle at left center,
            rgba(0,140,255,0.12),
            transparent 40%),
        radial-gradient(circle at right center,
            rgba(255,0,80,0.12),
            transparent 40%);
}

/* Líneas superiores */

.eleccion-line {
    box-shadow: 0 0 10px #1e90ff;
}

.eleccion-line-red {
    box-shadow: 0 0 10px #ff3366;
}

.eleccion-dot {
    box-shadow: 0 0 12px #1e90ff;
}

.eleccion-dot-red {
    box-shadow: 0 0 12px #ff3366;
}

/* Cards */

.eleccion-card {
    position: relative;
    border-radius: 24px;
    padding: 2rem;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
}

.advance-side {
    border: 2px solid #1e90ff;
    background: linear-gradient(
        135deg,
        rgba(0,70,180,0.18),
        rgba(0,0,0,0.5)
    );

    box-shadow:
        0 0 20px rgba(30,144,255,0.35),
        inset 0 0 20px rgba(30,144,255,0.15);
}

.plus-side {
    border: 2px solid #ff3366;
    background: linear-gradient(
        135deg,
        rgba(255,0,80,0.15),
        rgba(0,0,0,0.5)
    );

    box-shadow:
        0 0 20px rgba(255,51,102,0.35),
        inset 0 0 20px rgba(255,51,102,0.15);
}

.advance-side:hover {
    transform: translateY(-6px);
    box-shadow:
        0 0 35px rgba(30,144,255,0.8),
        inset 0 0 25px rgba(30,144,255,0.3);
}

.plus-side:hover {
    transform: translateY(-6px);
    box-shadow:
        0 0 35px rgba(255,51,102,0.8),
        inset 0 0 25px rgba(255,51,102,0.3);
}

/* Títulos */

.advance-title {
    color: #4eb5ff;
    text-shadow:
        0 0 10px #4eb5ff,
        0 0 20px #4eb5ff;
}

.plus-title {
    color: #ff5f8f;
    text-shadow:
        0 0 10px #ff5f8f,
        0 0 20px #ff5f8f;
}

.advance-subtitle {
    color: #7ed2ff;
    letter-spacing: 1px;
}

.plus-subtitle {
    color: #ff9eb8;
    letter-spacing: 1px;
}

/* Listas */

.neon-list-blue,
.neon-list-red {
    list-style: none;
    position: relative;
    padding-left: 28px;
    color: #fff;
    font-weight: 500;
}

.neon-list-blue::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: #4eb5ff;
    text-shadow:
        0 0 8px #4eb5ff,
        0 0 15px #4eb5ff;
    animation: pulseBlue 2s infinite;
}

.neon-list-red::before {
    content: "*";
    position: absolute;
    left: 0;
    color: #ff5f8f;
    text-shadow:
        0 0 8px #ff5f8f,
        0 0 15px #ff5f8f;
    animation: pulseRed 2s infinite;
}

/* Badges */

.advance-badge {
    display: inline-block;
    border: 2px solid #1e90ff;
    color: #7ed2ff;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(30,144,255,.5);
}

.plus-badge {
    display: inline-block;
    border: 2px solid #ff3366;
    color: #ff9eb8;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(255,51,102,.5);
}

/* Animaciones neón */

@keyframes pulseBlue {
    0%,100% {
        text-shadow:
            0 0 6px #4eb5ff,
            0 0 12px #4eb5ff;
    }
    50% {
        text-shadow:
            0 0 12px #4eb5ff,
            0 0 25px #4eb5ff,
            0 0 40px #4eb5ff;
    }
}

@keyframes pulseRed {
    0%,100% {
        text-shadow:
            0 0 6px #ff5f8f,
            0 0 12px #ff5f8f;
    }
    50% {
        text-shadow:
            0 0 12px #ff5f8f,
            0 0 25px #ff5f8f,
            0 0 40px #ff5f8f;
    }
}

/* Responsive */

@media (max-width: 1024px) {
    .eleccion-card {
        padding: 1.5rem;
    }

    .advance-badge,
    .plus-badge {
        width: 100%;
        text-align: center;
    }
}

.eleccion-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    position:relative;
}

/* PANEL IZQUIERDO */

.advance-side{
    position:relative;

    clip-path: polygon(
        0 0,
        95% 0,
        100% 50%,
        95% 100%,
        0 100%
    );

    border:2px solid #1e90ff;

    background:
    linear-gradient(
        135deg,
        rgba(0,110,255,.18),
        rgba(0,0,0,.65)
    );

    box-shadow:
        0 0 20px rgba(30,144,255,.5),
        inset 0 0 20px rgba(30,144,255,.15);

    padding:3rem;
}

/* PANEL DERECHO */

.plus-side{
    position:relative;

    clip-path: polygon(
        5% 0,
        100% 0,
        100% 100%,
        5% 100%,
        0 50%
    );

    border:2px solid #ff3366;

    background:
    linear-gradient(
        135deg,
        rgba(255,40,100,.18),
        rgba(0,0,0,.65)
    );

    box-shadow:
        0 0 20px rgba(255,51,102,.5),
        inset 0 0 20px rgba(255,51,102,.15);

    padding:3rem;
}

/* CONTENEDOR VS */

.vs-container{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:50;
}

/* CÍRCULO PRINCIPAL */

.vs-circle{
    width:140px;
    height:140px;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            90deg,
            rgba(0,110,255,.95) 0%,
            rgba(0,110,255,.95) 50%,
            rgba(255,30,80,.95) 50%,
            rgba(255,30,80,.95) 100%
        );

    padding:4px;

    animation:vsPulse 2.5s infinite ease-in-out;
}

/* CÍRCULO INTERIOR */

.vs-circle::before{
    content:"";
    position:absolute;

    width:118px;
    height:118px;
    border-radius:50%;

    background:#071224;

    border:2px solid rgba(255,255,255,.15);

    box-shadow:
        inset 0 0 20px rgba(255,255,255,.15);
}

/* TEXTO */

.vs-circle span{
    position:relative;
    z-index:2;

    color:white;
    font-size:2rem;
    font-weight:700;
    letter-spacing:2px;

    text-shadow:
        0 0 10px #fff,
        0 0 20px #fff;
}

/* ANIMACIÓN */

@keyframes vsPulse{
    0%,100%{
        box-shadow:
            0 0 15px #1e90ff,
            0 0 15px #ff3366;
    }

    50%{
        box-shadow:
            0 0 35px #1e90ff,
            0 0 35px #ff3366,
            0 0 60px rgba(255,255,255,.25);
    }
}

.eleccion-wrapper::before{
    content:"";

    position:absolute;

    left:50%;
    top:0;

    width:3px;
    height:100%;

    transform:translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            #1e90ff,
            #ffffff,
            #ff3366
        );

    box-shadow:
        0 0 15px #1e90ff,
        0 0 15px #ff3366;

    z-index:1;
}

@media (max-width:1024px){

    .eleccion-wrapper{
        grid-template-columns:1fr;
        gap:2rem;
    }

    .eleccion-wrapper::before{
        display:none;
    }

    .advance-side,
.plus-side{
    min-height:520px;
}
}

/* ==========================================
   GLOW PRODUCTOS
========================================== */

.product-glow-blue{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.product-glow-blue::before{
    content:"";

    position:absolute;

    width:220px;
    height:220px;

    border-radius:50%;

    background:#3ca1fb;

    filter:blur(60px);

    opacity:.65;

    animation: glowBluePulse 3s ease-in-out infinite;
}

.product-glow-red{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.product-glow-red::before{
    content:"";

    position:absolute;

    width:220px;
    height:220px;

    border-radius:50%;

    background:#ef232c;

    filter:blur(60px);

    opacity:.65;

    animation: glowRedPulse 3s ease-in-out infinite;
}

@keyframes glowBluePulse{
    0%,100%{
        opacity:.45;
        transform:scale(1);
    }
    50%{
        opacity:.8;
        transform:scale(1.15);
    }
}

@keyframes glowRedPulse{
    0%,100%{
        opacity:.45;
        transform:scale(1);
    }
    50%{
        opacity:.8;
        transform:scale(1.15);
    }
}

.advance-side::before{
    content:"";
    position:absolute;
    inset:0;
    border:2px solid #3ca1fb;
    clip-path: inherit;
    pointer-events:none;

    box-shadow:
        0 0 15px #3ca1fb,
        0 0 35px #3ca1fb;
}

.plus-side::before{
    content:"";
    position:absolute;
    inset:0;
    border:2px solid #ef232c;
    clip-path: inherit;
    pointer-events:none;

    box-shadow:
        0 0 15px #ef232c,
        0 0 35px #ef232c;
}

/* ===================================================
   FUNCIONAMIENTO PREBIÓTICO FOS
=================================================== */

#funcionamiento{
    position:relative;
}

.funcionamiento-panel{
    position: relative;

    border: 2px solid #2f8eff;
    border-radius: 24px;

    overflow: hidden;

    padding: 50px;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    align-items: center;

    box-shadow: 0 0 20px rgba(47,142,255,.35);
}

/* Imagen de fondo del panel */
.funcionamiento-panel::before{
    content:"";

    position:absolute;
    inset:0;

    background-image:url("../assets/Fondo intestino.webp");
    background-size:cover;
    background-position:center;

    z-index:0;
}

/* Capa oscura para mejorar lectura */
.funcionamiento-panel::after{
    content:"";

    position:absolute;
    inset:0;

    background:rgba(4,11,29,.55);

    z-index:1;
}

/* Todo el contenido encima */
.funcionamiento-panel > *{
    position:relative;
    z-index:2;
}

/* ===================================
   IZQUIERDA
=================================== */

.func-small-title{
    color:#4fd2ff;
    font-size:.9rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:10px;
}

.func-main-title{
    color:white;
    font-size:3rem;
    font-weight:700;
    line-height:1;
    margin-bottom:20px;
}

.func-main-title span{
    color:#a6cb92;
    text-shadow:
        0 0 10px #a6cb92,
        0 0 20px #a6cb92;
}

.func-description{
    color:white;
    font-size:1.05rem;
    line-height:1.7;
    max-width:320px;
}

/* ===================================
   CENTRO
=================================== */

.func-center{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
}

.fos-circle{

    width:220px;
    height:220px;

    border-radius:50%;

    border:none;

    background:transparent;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;
    margin:0 auto;

    animation: fosGlow 3s ease-in-out infinite;
}

.fos-circle h3{
    color:white;
    font-size:1.4rem;
    font-weight:700;
    margin-bottom:5px;
}

.fos-circle h2{
    color:white;
    font-size:4rem;
    font-weight:700;
    line-height:1;

    text-shadow:
        0 0 10px #fff,
        0 0 20px #fff,
        0 0 40px #64edb4;
}

.fos-circle p{
    color:#ffffff;

    font-weight:700;

    text-shadow:
        0 0 10px rgba(255,255,255,.8);
}

/* ===================================
   DERECHA
=================================== */

.func-right{
    display:flex;
    gap:25px;
    justify-content:center;
}

.fos-step{
    text-align:center;
    color:white;
    flex:1;
    position:relative;
}

.fos-number{

    width:32px;
    height:32px;
    font-size:.9rem;

    border-radius:50%;

    margin:0 auto 15px;

    background:#1f8cff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:700;

    box-shadow:
        0 0 12px #1f8cff;
}

.fos-icon{

    width:88px;
    height:88px;

    margin: 0 auto 15px;

    border-radius:50%;

    border:2px solid #2f8eff;

    background:rgba(12,34,72,.45);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:
        0 0 15px rgba(47,142,255,.6),
        inset 0 0 15px rgba(47,142,255,.25);

    transition:.3s;
}

.fos-icon:hover{
    transform:translateY(-4px);

    box-shadow:
        0 0 25px rgba(47,142,255,.8),
        inset 0 0 20px rgba(47,142,255,.35);
}
.fos-icon img{
    width:44px;
    height:auto;
}

.fos-step h4{
    font-size:1.15rem;
    font-weight:700;
    margin-bottom:12px;
}

.fos-step p{
    font-size:.9rem;
    color:#d6e4ff;
    line-height:1.6;
}

/* ===================================
   FRASE INFERIOR
=================================== */

.fos-footer{

    margin-top:30px;

    border:2px solid #2f8eff;

    border-radius:16px;

    padding:14px 25px;

    text-align:center;

    color:#7ed7ff;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    box-shadow:
        0 0 15px rgba(47,142,255,.4);
}

/* ===================================
   ANIMACIÓN
=================================== */

@keyframes fosGlow{

    0%,100%{
        box-shadow:
            0 0 20px #64edb4,
            0 0 50px rgba(100,237,180,.25);
    }

    50%{
        box-shadow:
            0 0 35px #64edb4,
            0 0 80px rgba(100,237,180,.45);
    }
}

/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:1200px){

    .funcionamiento-panel{
        grid-template-columns:1fr;
        text-align:center;
    }

    .func-description{
        max-width:none;
    }

    .func-left,
    .func-center{
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .func-right{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:30px;
        width:100%;
    }

    .fos-circle{
        width:240px;
        height:240px;
    }

    .fos-step{
        max-width:320px;
        width:100%;
        margin:0 auto;
    }
}

/* ==========================================
   PARTICIPA Y GANA
========================================== */

#participa{
    background:#040b1d;
}

.participa-container{

    position:relative;

    display:grid;
    grid-template-columns: 1fr 280px 1.4fr;

    gap:0;

    border:2px solid #2f8eff;
    border-radius:24px;

    overflow:hidden;

    background:
        radial-gradient(circle at center,
        rgba(255,0,60,.12),
        transparent 35%),
        linear-gradient(
            90deg,
            #091630 0%,
            #08152d 50%,
            #091630 100%
        );

    box-shadow:
        0 0 20px rgba(47,142,255,.4);
}

/* =====================
   BLOQUE PREMIOS
===================== */

.participa-premios{

    padding:40px;

    color:white;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.premios-title{

    font-size:2rem;
    font-weight:700;
    line-height:1.1;

    margin-bottom:25px;
}

.premios-title span{
    color:#ff4d5e;
}

.premio-mayor{

    color:#ff4d5e;
    font-weight:700;

    margin-bottom:15px;
}

.participa-premios h3{

    font-size:1.5rem;
    font-weight:700;

    margin-bottom:20px;
}

.premios-lista{

    list-style:none;
    padding:0;
    margin:0;
}

.premios-lista li{

    position:relative;

    padding-left:28px;

    margin-bottom:12px;

    color:#fff;
}

.premios-lista li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#ff4d5e;

    font-weight:bold;

    text-shadow:0 0 10px #ff4d5e;
}

.premios-nota{

    margin-top:20px;

    color:#b7c7e6;

    font-size:.85rem;
}

/* =====================
   IMAGEN CENTRAL
===================== */

.participa-imagen{

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;
}

.participa-imagen img{

    max-width:360px;
    width:100%;
    height:auto;

    z-index:2;

    filter:
        drop-shadow(0 0 20px rgba(255,0,60,.5))
        drop-shadow(0 0 25px rgba(255,0,60,.4));
}

/* =====================
   FORMULARIO
===================== */

.participa-formulario{

    padding:35px;
}

.registro-title{

    color:white;

    font-size:2rem;
    font-weight:700;

    margin-bottom:25px;
}

.registro-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.participa-input{

    width:100%;

    height:56px;

    background:#fff;

    border:none;

    border-radius:8px;

    padding:0 18px;

    color:#333;

    font-size:1rem;
}

.participa-input:focus{

    outline:none;

    box-shadow:
        0 0 0 2px #2f8eff,
        0 0 12px rgba(47,142,255,.5);
}

.ciudad-input{

    margin-top:15px;
}

.participa-check{

    display:flex;
    gap:12px;

    margin-top:18px;

    color:white;
}

.participa-check input{

    width:20px;
    height:20px;

    margin-top:2px;
}

.participa-btn{

    width:100%;

    margin-top:20px;

    height:60px;

    border:none;

    border-radius:8px;

    background:linear-gradient(
        90deg,
        #cf0d2f,
        #ff1e4f
    );

    color:white;

    font-weight:700;
    font-size:1.25rem;

    letter-spacing:1px;

    box-shadow:
        0 0 20px rgba(255,30,79,.5);
}

.participa-footer{

    margin-top:20px;

    text-align:center;

    color:#d8e4ff;

    font-size:.9rem;
}

/* =====================
   RESPONSIVE
===================== */

@media(max-width:1200px){

    .participa-container{

        grid-template-columns:1fr;
    }

    .participa-imagen{

        padding:20px;
    }

    .participa-imagen img{

        max-width:280px;
    }
}

@media(max-width:768px){

    .registro-grid{

        grid-template-columns:1fr;
    }

    .premios-title,
    .registro-title{

        font-size:1.6rem;
        text-align:center;
    }

    .participa-premios{

        text-align:center;
    }
}