/* =========================================================
   CHIFLADITO STORE
   ESTILOS
========================================================= */
/* =========================================================
   🔤 FUENTES PARA CHIFLADITO STORE
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Bebas+Neue&family=Cinzel:wght@400;600;700;800&family=Michroma&family=Orbitron:wght@400;500;600;700;800;900&family=Oxanium:wght@400;500;600;700;800&family=Pacifico&family=Rajdhani:wght@400;500;600;700&family=Russo+One&family=UnifrakturCook:wght@700&display=swap');
/* =========================================================
   🎨 PALETA PRINCIPAL
   ========================================================

   ⭐ CAMBIA LOS COLORES DESDE AQUÍ ⭐

   FONDOS:

   #020817 = azul casi negro
   #03142B = azul marino
   #071B35 = azul profundo
   #000000 = negro

   NEON:

   #00CFFF = celeste neon
   #55EFFF = celeste brillante
   #078CFF = azul eléctrico

   OTRAS COMBINACIONES QUE PUEDES PROBAR:

   🔵 Azul marino + celeste neon
   🟣 Azul oscuro + violeta neon
   🟢 Azul petróleo + verde neon
   🟠 Azul oscuro + naranja neon
   🔴 Negro + rojo neon
   🌊 Azul petróleo + turquesa
   🟡 Azul noche + amarillo neon

   Si quieres cambiar solamente el fondo:
   modifica --fondo.

   Si quieres cambiar TODO el neon:
   modifica --neon.

========================================================= */

:root {

    --fondo: #020817;

    --fondo-2: #03142B;

    --neon: #00CFFF;

    --neon-claro: #55EFFF;

    --azul: #078CFF;

    --texto: #FFFFFF;

    --texto-suave: #B9EAF3;

    --borde: rgba(85,239,255,.25);

    --sombra:
        0 0 12px rgba(0,207,255,.55),
        0 0 30px rgba(0,207,255,.20);

}


/* =========================================================
   RESETEO
========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(0,207,255,.08),
            transparent 35%
        ),

        linear-gradient(
            180deg,
            var(--fondo),
            var(--fondo-2)
        );

    color: var(--texto);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;

}


/* =========================================================
   🌌 FONDO
========================================================= */

.space-background {

    position: fixed;

    inset: 0;

    z-index: -10;

    overflow: hidden;

    pointer-events: none;

}


.space-network {

    position: absolute;

    inset: -15%;

    background-image:
        url("assets/network-background.png");

    background-size: cover;

    background-position: center;

    opacity: .20;

    animation:
        rotateBackground
        150s
        linear
        infinite;

}


.space-glow {

    position: absolute;

    width: 60vw;

    height: 60vw;

    max-width: 700px;

    max-height: 700px;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%,-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,207,255,.12),
            transparent 68%
        );

}


.orbit {

    position: absolute;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%,-50%);

    border:
        1px solid
        rgba(85,239,255,.12);

    border-radius: 50%;

}


.orbit-1 {

    width: 75vw;

    height: 25vw;

    animation:
        orbit 25s
        linear
        infinite;

}


.orbit-2 {

    width: 55vw;

    height: 18vw;

    transform:
        translate(-50%,-50%)
        rotate(45deg);

    animation:
        orbit 32s
        linear
        infinite
        reverse;

}


.orbit-3 {

    width: 90vw;

    height: 32vw;

    transform:
        translate(-50%,-50%)
        rotate(75deg);

    animation:
        orbit 45s
        linear
        infinite;

}


.network-points span {

    position: absolute;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background:
        var(--neon-claro);

    box-shadow:
        var(--sombra);

}


.network-points span:nth-child(1) {
    left: 10%;
    top: 20%;
}

.network-points span:nth-child(2) {
    left: 25%;
    top: 70%;
}

.network-points span:nth-child(3) {
    left: 45%;
    top: 12%;
}

.network-points span:nth-child(4) {
    left: 70%;
    top: 25%;
}

.network-points span:nth-child(5) {
    left: 85%;
    top: 65%;
}

.network-points span:nth-child(6) {
    left: 55%;
    top: 85%;
}

.network-points span:nth-child(7) {
    left: 8%;
    top: 50%;
}

.network-points span:nth-child(8) {
    left: 92%;
    top: 40%;
}


@keyframes rotateBackground {

    from {
        transform: rotate(0deg) scale(1.05);
    }

    to {
        transform: rotate(360deg) scale(1.05);
    }

}


@keyframes orbit {

    from {
        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }

}


/* =========================================================
   BARRA SUPERIOR
========================================================= */

.barra-superior {

    position: sticky;

    top: 0;

    z-index: 50;

    min-height: 64px;

    display: grid;

    grid-template-columns:
        65px 1fr 65px;

    align-items: center;

    padding: 8px 14px;

    background:
        rgba(2,8,23,.80);

    backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid
        rgba(85,239,255,.10);

}

.mini-logo img {

    width: 42px;

    height: 42px;

    object-fit: contain;

}

/* =========================================================
   TÍTULO DE LA MARCA
========================================================= */
.titulo-marca {

    text-align: center;
}
/* CHIFLADITO */
.titulo-marca .chifladito {  
    font-family: "Orbitron", sans-serif;
    font-size: 18px;
    font-weight:900;
    letter-spacing: 2px;
     font-weight: 800;
    color: var(--blue);
    color:rgb(0, 4, 212)      
}

     
/* STORE */
.titulo-marca .store {  
    font-family: "Oxanium", sans-serif;
    font-size: 18px;
    font-weight:700;
    letter-spacing: 4px;
    color: var(--texto);
    color: white;
}

.titulo-marca .slogan {  
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--texto);
    color: white;
}

.contact-menu {

    justify-self: end;

    position: relative;

}


.contact-menu summary {

    width: 44px;

    height: 44px;

    display: grid;

    place-items: center;

    border:
        1px solid
        var(--borde);

    border-radius: 50%;

    color: var(--neon-claro);

    font-size: 1.5rem;

    cursor: pointer;

    box-shadow:
        var(--sombra);

}


.contact-menu summary::-webkit-details-marker {
    display: none;
}


.contact-panel {

    position: absolute;

    right: 0;

    top: 55px;

    width: 250px;

    padding: 16px;

    background:
        rgba(2,8,23,.96);

    border:
        1px solid
        var(--borde);

    border-radius: 18px;

    box-shadow:
        var(--sombra);

}


.contact-panel h3 {

    color:
        var(--neon-claro);

    margin-bottom: 10px;

}


.contact-panel a {

    display: block;

    padding: 9px 0;

    color:
        var(--texto-suave);

    text-decoration: none;

}


/* =========================================================
   HERO
========================================================= */

.hero {
font-family: "UnifrakturCoo", cursive;
    min-height: 68vh;

    font-size: 0.875rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 10px 10px;

     margin-top: 10px;

    text-shadow:#000000
        var(--sombra);

}


.hero-logo {

    width: min(210px,50vw);

    filter:
        drop-shadow(
            0 0 10px
            rgba(0,207,255,.3)
        );

}


#novedades-nov {

    margin-top: 5px;

    font-size: 5px;

    text-shadow:
        var(--sombra);

}


.subtitle {

    margin-top: 2px;

    color:
        var(--neon-claro);

}

/* =========================================================
   BOTON DE OFERTAS
========================================================= */

.oferta {

    text-align: center;

    padding:
        20px 15px;

}


.oferta h2 {

    font-size: 1.6rem;

    text-shadow:
        var(--sombra);

}


.oferta p {

    margin:
        10px 0 15px;

    color:
        var(--texto-suave);

}


.oferta-button {

    display: inline-block;
    padding: 12px 25px;
    background: #00c8ff;
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-weight: bold;

    /* Animación */
    animation: parpadeo 1.5s ease-in-out infinite;
}

/* Animación del botón */
@keyframes parpadeo {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 5px #00c8ff;
    }

    50% {
        opacity: 0.95;
        transform: scale(1.05);
        box-shadow: 0 0 25px #00c8ff;
    }
}



/* =========================================================
   SECCIONES
========================================================= */

.section {

    width:
        min(1180px,calc(100% - 28px));

    margin:
        auto;

    padding:
        18px 0;

}


.section h5 {

    text-align: center;

    margin-bottom: 12px;

    font-size: 1.25rem;

    text-shadow:
        var(--sombra);

}


/* =========================================================
   CARRUSEL
========================================================= */

.carousel-area {

    display: flex;

    align-items: center;

    gap: 5px;

}


.carousel {

    display: flex;

    gap: 18px;

    overflow-x: auto;

    flex: 1;

    padding:
        10px 5px 16px;

    scrollbar-width: none;

    cursor: grab;

}


.carousel::-webkit-scrollbar {
    display: none;
}


.carousel.dragging {
    cursor: grabbing;
}


.carousel-button {

    flex:
        0 0 px;

    width: 0px;

    height: px;

    border:
        1px solid
        var(--borde-none);

    border-radius: 50%;

    background:
        rgba(2,8,23,.85);

    color:
        var(--neon-claro);

    font-size: 2rem;

    cursor: pointer;

    box-shadow:
        var(--sombra);

}


/* =========================================================
   💎 BENEFICIOS
   ========================================================

   ⭐ AQUÍ PUEDES CAMBIAR EL ANCHO.

   width: 195px;

   Si quieres más angosto:
   180px

   Si quieres más ancho:
   220px

========================================================= */


/* =========================================================
   💠 CUADRADO LUMINOSO DEL BENEFICIO
========================================================= */

.benefit-icon {

    width: 90px;

    height: 90px;

    display: grid;

    place-items: center;

    border:
        5px solid
        var(--borde);

    border-radius: 20px;

    background:
        rgba(2,8,23,.25);

    color:
        var(--neon-claro);

    font-size: 2.5rem;

    box-shadow:
        var(--sombra);
    margin: 0;

}

/* =========================================================
   IMÁGENES
========================================================= */

.image-card {

    position: relative;

    flex:
        0 0 310px;

    height: 300px;

    padding: 0;

    border: none;

    overflow: hidden;

    border-radius: 30px;

    background:
        rgba(2,8,23,.5);

    cursor: pointer;

}

/* =========================================
   BLOQUE DE ICONOS EN MOVIMIENTO INFINITO
   ========================================= */

.iconos-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.iconos {
    display: flex;
    width: max-content;
    gap: 25px;

    animation: moverIconos 20s linear infinite;
}

.icono {
    flex: 0 0 auto;
    width: 600px;
    height: 600px;

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

    font-size: 20px;
}

/* Movimiento de derecha → izquierda */

@keyframes moverIconos {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


.image-card span {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding:
        35px 12px 12px;

    text-align: left;

    color: white;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.9)
        );

}


/* =========================================================
   DESCARGA
========================================================= */

.download {

    text-align: center;

    padding:
        20px 15px;

}


.download h2 {

    font-size: 1.6rem;

    text-shadow:
        var(--sombra);

}


.download p {

    margin:
        10px 0 15px;

    color:
        var(--texto-suave);

}


.download-button {

    display: inline-block;
    padding: 12px 25px;
    background: #00c8ff;
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-weight: bold;

    /* Animación */
    animation: parpadeo 1.5s ease-in-out infinite;
}

/* Animación del botón */
@keyframes parpadeo {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 5px #00c8ff;
    }

    50% {
        opacity: 0.95;
        transform: scale(1.05);
        box-shadow: 0 0 25px #00c8ff;
    }
}

/* =========================================================
   VIDEOS
========================================================= */

.video-card {

    flex:
        0 0 310px;

    overflow: hidden;

    border-radius: 18px;

    background:
        rgba(2,8,23,.55);

}


.video-card video,
.video-card iframe {

    width: 100%;

    aspect-ratio: 16 / 9;

    border: none;

    display: block;

    background: black;

}


.video-card h3 {

    padding:
        10px;

}


/* =========================================================
   MODALES
========================================================= */

.modal {

    position: fixed;

    inset: 0;

    z-index: 100;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        rgba(0,0,0,.88);

    backdrop-filter:
        blur(8px);

}


.modal.open {
    display: flex;
}


.modal-content {

    max-width: 88vw;

    text-align: center;

}


.modal-content img {

    max-width: 100%;

    max-height: 78vh;

    border-radius: 12px;

}


.modal-content p {

    margin-top: 10px;

    color:
        var(--texto-suave);

}


.close-modal,
.close-benefit {

    position: absolute;

    top: 15px;

    right: 18px;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    border:
        1px solid
        var(--borde);

    background:
        rgba(0,0,0,.5);

    color: white;

    font-size: 2rem;

    cursor: pointer;

}


.modal-prev,
.modal-next,
.benefit-prev,
.benefit-next {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    width: 48px;

    height: 48px;

    border:
        1px solid
        var(--borde);

    border-radius: 50%;

    background:
        rgba(2,8,23,.8);

    color:
        var(--neon-claro);

    font-size: 2.2rem;

    cursor: pointer;

}


.modal-prev,
.benefit-prev {
    left: 18px;
}


.modal-next,
.benefit-next {
    right: 18px;
}


.benefit-modal-content {

    width:
        min(560px,88vw);

    padding: 35px 25px;

    text-align: center;

    border:
        1px solid
        var(--borde);

    border-radius: 22px;

    background:
        rgba(3, 12, 36, 0.9);

    box-shadow:
        var(--sombra);

}


#benefitIcon {

    font-size: 4rem;

    color:
        var(--neon-claro);

}


#benefitTitle {

    margin-top: 10px;

}


#benefitDescription {

    margin-top: 12px;

    color:
        var(--texto-suave);

    line-height: 1.6;

}


/* =========================================================
   FOOTER
========================================================= */

footer {

    padding:
        25px 15px;

    text-align: center;

    color:
        var(--texto-suave);

    border-top:
        1px solid
        rgba(85, 238, 255, 0);

}


.footer-links {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 14px;

    margin:
        12px 0;

}


.footer-links a {

    color:
        var(--neon-claro);

    text-decoration:
        none;

}


/* =========================================================
   📱 MÓVIL
========================================================= */

@media(max-width:650px) {

    .brand-name {
        font-size: .95rem;
    }

    .hero h1 {
        font-size: 1.9rem;
    }

    .section h2 {
        font-size: 1.25rem;
    }

    .benefit-card {
        flex-basis: 30px;
        width: 70px;
        min-height: 95px;
    }

    .image-card,
    .video-card {
        flex-basis: 82vw;
    }

}

/* =====================================================
   LOGO CENTRAL DEL FONDO
===================================================== */

.background-center-logo {
    position: absolute;

    /* CENTRO EXACTO */
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 130px;
    height: 130px;

    object-fit: contain;

    /* Brillo suave */
    filter:
        drop-shadow(0 0 8px rgba(0, 190, 255, 0.35))
        drop-shadow(0 0 20px rgba(0, 190, 255, 0.20));

    opacity: 0.45;

    /* Evita que interfiera con los clics */
    pointer-events: none;

    z-index: 2;
}

.background-center-logo {
    animation: logoRespirar 4s ease-in-out infinite;
}

@keyframes logoRespirar {

    0%, 100% {
        opacity: 0.35;
        filter:
            drop-shadow(0 0 8px rgba(0, 190, 255, 0.30))
            drop-shadow(0 0 18px rgba(0, 190, 255, 0.15));
    }

    50% {
        opacity: 0.55;
        filter:
            drop-shadow(0 0 12px rgba(0, 190, 255, 0.45))
            drop-shadow(0 0 28px rgba(0, 190, 255, 0.25));
    }
}

/* =====================================================
   BOTÓN - GUÍA DE INSTALACIÓN
===================================================== */

.installation-section {
    text-align: center;
}

.installation-intro {
    margin: 10px auto 20px;
    opacity: 0.85;
}

.open-installation {
    border: 1px solid rgba(0, 200, 255, 0.6);
    background: rgba(0, 80, 140, 0.35);
    color: white;

    padding: 13px 25px;
    border-radius: 30px;

    font-size: 15px;
    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 0 10px rgba(0, 200, 255, 0.25);

    transition: 0.3s;
}

.open-installation:hover {
    transform: scale(1.05);

    box-shadow:
        0 0 20px rgba(0, 200, 255, 0.5);
}


/* =====================================================
   VENTANA DE GUÍA DE INSTALACIÓN
===================================================== */

.installation-modal {
    position: fixed;

    inset: 0;

    background:
        rgba(0, 5, 15, 0.96);

    z-index: 9999;

    display: none;

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

    flex-direction: column;
}


/* Cuando está abierta */

.installation-modal.active {
    display: flex;
}


/* =====================================================
   ENCABEZADO
===================================================== */

.installation-header {
    text-align: center;
    margin-bottom: 15px;
}

.installation-header h2 {
    margin: 0 0 5px;
}

#installationCounter {
    opacity: 0.7;
    font-size: 14px;
}


/* =====================================================
   GALERÍA
===================================================== */

.installation-gallery {

    width: 90%;
    max-width: 1000px;

    display: flex;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    scroll-behavior: smooth;

    scrollbar-width: none;

    gap: 20px;
}

.installation-gallery::-webkit-scrollbar {
    display: none;
}


/* =====================================================
   CADA IMAGEN
===================================================== */

.installation-slide {

    flex: 0 0 100%;

    scroll-snap-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}

.installation-slide img {

    max-width: 85vw;
    max-height: 70vh;

    object-fit: contain;

    border-radius: 12px;

    box-shadow:
        0 0 25px rgba(0, 180, 255, 0.25);
}

.installation-slide p {

    margin-top: 12px;

    text-align: center;

    max-width: 700px;

    color: white;
}


/* =====================================================
   BOTÓN CERRAR
===================================================== */

.installation-close {

    position: absolute;

    top: 15px;
    right: 20px;

    width: 45px;
    height: 45px;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,0.1);

    color: white;

    font-size: 32px;

    cursor: pointer;

    z-index: 10;
}


/* =====================================================
   FLECHAS
===================================================== */

.installation-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 50px;
    height: 70px;

    border: none;

    background: rgba(0, 150, 255, 0.15);

    color: white;

    font-size: 45px;

    cursor: pointer;

    border-radius: 12px;

    z-index: 5;
}

.installation-prev {
    left: 20px;
}

.installation-next {
    right: 20px;
}

.installation-arrow:hover {
    background: rgba(0, 180, 255, 0.35);
}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 600px) {

    .installation-gallery {
        width: 94%;
        gap: 10px;

        /* Permite deslizar con el dedo */
        touch-action: pan-x;
    }

    .installation-slide img {
        max-width: 92vw;
        max-height: 65vh;
    }

    .installation-slide p {
        font-size: 14px;
        padding: 0 15px;
    }

    /* En celular las flechas no son necesarias */
    .installation-arrow {
        display: none;
    }

    .installation-header h2 {
        font-size: 20px;
    }

}

/* =====================================================
   REDUCIR ESPACIO ENTRE INICIO Y BENEFICIOS
===================================================== */

.hero {
    min-height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* =========================================================
   💎 BENEFICIOS — DIAPOSITIVA CENTRAL
========================================================= */

.benefits-slide {

    width: min(700px, 90%);

    height: 260px;

    margin: 20px auto 10px;

    padding: 25px;

    box-sizing: border-box;

    border: 1px solid var(--borde);

    border-radius: 20px;

    background:
    linear-gradient(
        135deg,
        rgba(2, 8, 23, .65),
        rgba(0, 20, 40, .35)
    );

   box-shadow:
    0 0 10px rgba(0, 200, 255, .15),
    0 0 25px rgba(0, 200, 255, .08),
    inset 0 0 20px rgba(0, 200, 255, .04);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    overflow: hidden;

    position: relative;

}


/* =========================================================
   💠 ICONO
========================================================= */

.benefits-slide-icon {

    width: 90px;

    height: 90px;

    border: 1px solid var(--borde);

    border-radius: 10px;

    display: grid;

    place-items: center;

    color: var(--neon-claro);

    font-size: 2.2rem;

    box-shadow: var(--sombra);

    margin-bottom: 8px;

    animation:
    benefitIconGlow
    2.5s
    ease-in-out
    infinite alternate;

}

@keyframes benefitIconGlow {

    from {

        box-shadow:
            0 0 5px rgba(0, 200, 255, .20);

    }

    to {

        box-shadow:
            0 0 12px rgba(0, 200, 255, .45),
            0 0 25px rgba(0, 200, 255, .15);

    }

}

/* =========================================================
   ⚡ TÍTULO DEL BENEFICIO
========================================================= */

.benefits-slide-title {

    color: var(--neon-claro);

    font-size: 1.5rem;

    font-weight: 700;

    text-align: center;

    margin-bottom: 8px;

    text-transform: uppercase;

    text-shadow: 0 0 10px rgba(0, 200, 255, .35);

}


/* =========================================================
   ⌨️ RESEÑA — EFECTO TECLADO
========================================================= */

.benefits-slide-description {

    width: 90%;

    min-height: 48px;

    color: white;

    font-size: .95rem;

    line-height: 1.5;

    text-align: center;

}


/* =========================================================
   🔢 CONTADOR
========================================================= */

.benefits-slide-counter {

    position: absolute;

    bottom: 10px;

    right: 15px;

    color: var(--neon-claro);

    font-size: .7rem;

    opacity: .7;

}


/* =========================================================
   ✨ ANIMACIÓN DE CAMBIO
========================================================= */

.benefits-slide.changing .benefits-slide-title, 
.benefits-slide.changing .benefits-slide-description, 
.benefits-slide.changing .benefits-slide-icon{

    animation: benefitFade .5s ease;
}
@keyframes benefitFade {

    0% {

        opacity: 0;

        transform:
            translateY(8px)
            scale(.98);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   📱 CELULAR
========================================================= */

@media(max-width:650px) {

    .benefits-slide {

        width: 92%;

        height: 250px;

        padding: 20px;

        margin-top: 15px;

    }

    .benefits-slide-title {

        font-size: 1.25rem;

    }

    .benefits-slide-description {

        width: 95%;

        font-size: .88rem;

    }

}

/* =========================================================
   ⚡ CURSOR NEÓN DEL ESLOGAN
========================================================= */

.titulo-marca .slogan {
    color: #55EFFF;
    text-shadow:
        0 0 5px #00CFFF,
        0 0 12px #00CFFF,
        0 0 24px rgba(0, 207, 255, 0.7);
}

/* Cursor de teclado */

.cursor-slogan {
    display: inline-block;
    margin-left: 3px;
    color: #FFFFFF;
    font-weight: 900;

    text-shadow:
        0 0 5px #FFFFFF,
        0 0 12px #00CFFF,
        0 0 22px #00CFFF;

    animation: cursorSlogan 0.65s steps(2, start) infinite;
}

/* Parpadeo eléctrico */

@keyframes cursorSlogan {
    to {
        visibility: hidden;
    }
}


/* ==========================================
   INTRO SIMPLE — CHIFLADITO STORE
   COLORES EDITABLES
========================================== */

/* Fondo oscuro */
#chifla-preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: radial-gradient(
        circle at center,
        #06234b 0%,
        #031329 50%,
        #010711 100%
    );
    opacity: 1;
    visibility: visible;
    transition: opacity .5s ease, visibility .5s ease;
}

/* Ocultar al terminar */
#chifla-preloader.chifla-intro-oculto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Contenido centrado */
.chifla-intro-contenido {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Título principal */
#chifla-intro-titulo {
    min-height: 1.4em;
    margin: 0 0 12px;
    color: #ffffff;
    font-family: "Orbitron", Arial, sans-serif;
    font-size: clamp(22px, 6vw, 36px);
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 0 0 8px #00cfff, 0 0 20px rgba(0, 140, 255, .7);
}

/* Frase escrita debajo */
#chifla-intro-frase {
    min-height: 1.6em;
    margin: 0 0 28px;
    color: #69eaff;
    font-family: "Rajdhani", Arial, sans-serif;
    font-size: clamp(12px, 3.5vw, 16px);
    font-weight: 700;
    letter-spacing: 2px;
}

/* Cursor de escritura */
#chifla-intro-titulo::after,
#chifla-intro-frase::after {
    content: "|";
    margin-left: 3px;
    color: #55f5ff;
    animation: chifla-cursor-parpadeo .65s steps(1) infinite;
}

@keyframes chifla-cursor-parpadeo {
    50% { opacity: 0; }
}

/* Barra de carga */
.chifla-intro-barra {
    width: min(260px, 75vw);
    height: 4px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(0, 207, 255, .18);
    box-shadow: 0 0 8px rgba(0, 207, 255, .18);
}

/* Progreso animado */
#chifla-intro-progreso {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #008cff, #55f5ff, #ffffff);
    box-shadow: 0 0 12px #00cfff;
}

/* Texto pequeño bajo la barra */
.chifla-intro-cargando {
    margin-top: 12px;
    color: #79cfff;
    font-family: "Rajdhani", Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

@media (prefers-reduced-motion: reduce) {
    #chifla-intro-titulo::after,
    #chifla-intro-frase::after {
        animation: none;
    }
}

/* CURSOR PEGADO A LA ÚLTIMA LETRA */
#chifla-preloader #chifla-intro-titulo::after,
#chifla-preloader #chifla-intro-frase::after {
    content: "_";
    display: inline;
    margin-left: 0;
    color: #55f5ff;
    animation: chifla-cursor-parpadeo .65s steps(1) infinite;
}

/* BARRA Y PORCENTAJE EN UNA MISMA FILA */
.chifla-intro-fila {
    width: min(300px, 82vw);
    display: flex;
    align-items: center;
    gap: 12px;
}

.chifla-intro-fila .chifla-intro-barra {
    flex: 1;
    width: auto;
    min-width: 0;
}

#chifla-intro-porcentaje {
    width: 42px;
    flex-shrink: 0;
    color: #55f5ff;
    font-family: "Orbitron", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    text-shadow: 0 0 8px #00cfff;
    font-variant-numeric: tabular-nums;
}

/* CARGANDO Y PUNTOS */
.chifla-intro-estado {
    margin-top: 12px;
    color: #79cfff;
    font-family: "Rajdhani", Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

#chifla-intro-puntos {
    display: inline-block;
    width: 22px;
    text-align: left;
    letter-spacing: 1px;
}

/* =========================================
   CHIFLADITO STORE - MENÚ DE SOPORTE
   ========================================= */

.contact-menu {
    position: relative;
    display: inline-block;
    z-index: 1000;
}

/* Ocultar la flecha predeterminada */
.contact-menu > summary {
    list-style: none;
    cursor: pointer;
}

.contact-menu > summary::-webkit-details-marker {
    display: none;
}

/* Icono de persona con auriculares */
.contact-menu .support-icon {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    color: #00dfff;
    filter: drop-shadow(0 0 5px #008cff);
    transition: transform 0.25s ease;
}

.contact-menu > summary:hover .support-icon {
    transform: scale(1.12);
}

/* Texto debajo del icono */
.contact-menu .support-label {
    display: block;
    margin-top: 4px;
    color: #55eaff;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
}

/* Cuadro desplegable */
.contact-menu .contact-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 200px;
    max-width: calc(100vw - 32px);
    padding: 20px;
    box-sizing: border-box;

    background: rgba(2, 12, 35, 0.98);
    border: 1px solid #00cfff;
    border-radius: 18px;
    box-shadow:
        0 0 12px #007bff,
        0 0 30px rgba(0, 153, 255, 0.35);

    animation: soporteAparecer 0.22s ease;
}

/* Título del menú */
.contact-menu .contact-panel h6 {
    margin: 0 0 15px;
    color: #00dfff;
    font-size: 15px;
    text-align: center;
}

/* Opciones de contacto */
.contact-menu .contact-panel a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 6px;

    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    border-bottom: 1px solid rgba(0, 207, 255, 0.16);

    transition: background 0.2s, color 0.2s;
}

.contact-menu .contact-panel a:last-child {
    border-bottom: none;
}

.contact-menu .contact-panel a:hover {
    color: #55eaff;
    background: rgba(0, 153, 255, 0.12);
}

/* Iconos de WhatsApp y Telegram */
.contact-menu .contact-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 21px;
    font-weight: bold;
}

.contact-menu .whatsapp-icon {
    background: #20c968;
    color: white;
}

.contact-menu .telegram-icon {
    background: #16a9e8;
    color: white;
}

/* Animación de apertura */
@keyframes soporteAparecer {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =====================================================
   CHIFLADITO STORE
   NUEVO MENÚ DESPLEGABLE
   Puedes modificar estos colores libremente.
===================================================== */

.contact-menu {
    position: relative;
    justify-self: end;
    z-index: 1000;
}

/* Botón de tres líneas */
.contact-menu > summary {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    cursor: pointer;
    border: 1px solid rgba(85, 239, 255, 0.45);
    border-radius: 12px;
    background: rgba(3, 20, 43, 0.96);
    color: #55EFFF;
    transition: 0.25s ease;
}

.contact-menu > summary::-webkit-details-marker {
    display: none;
}

.contact-menu > summary:hover {
    border-color: #55EFFF;
    box-shadow: 0 0 16px rgba(0, 207, 255, 0.3);
}

/* Las tres líneas */
.menu-hamburguesa {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 20px;
}

.menu-hamburguesa span {
    width: 100%;
    height: 1.5px;
    border-radius: 4px;
    background: #55EFFF;
    transition: 0.25s ease;
}

/* Animación al abrir */
.contact-menu[open] .menu-hamburguesa span:first-child {
    transform: translateY(8px) rotate(45deg);
}

.contact-menu[open] .menu-hamburguesa span:nth-child(2) {
    opacity: 0;
}

.contact-menu[open] .menu-hamburguesa span:last-child {
    transform: translateY(-8px) rotate(-45deg);
}

/* Panel desplegable */
.contact-menu .contact-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(310px, calc(100vw - 28px));
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #03142B;
    border: 1px solid rgba(85, 239, 255, 0.45);
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5),
                0 0 18px rgba(0, 207, 255, 0.12);
    z-index: 1001;
    box-sizing: border-box;
}

.contact-menu .contact-panel h4 {
    margin: 2px 4px 8px;
    color: #55EFFF;
    font-size: 13px;
    letter-spacing: 2px;
}

/* Cada opción */
.contact-menu .menu-opcion {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 10px;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    background: rgba(0, 207, 255, 0.04);
    border: 1px solid rgba(85, 239, 255, 0.12);
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.contact-menu .menu-opcion:hover {
    background: rgba(0, 207, 255, 0.12);
    border-color: rgba(85, 239, 255, 0.55);
}

/* Iconos */
.menu-opcion-icono {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0, 207, 255, 0.1);
    color: #55EFFF;
    font-size: 24px;
}

.menu-opcion-icono.whatsapp {
    color: #25D366;
    background: rgba(37, 211, 102, 0.1);
}

/* Título y descripción */
.menu-opcion-texto {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-opcion-texto strong {
    font-size: 13px;
    font-weight: 700;
}

.menu-opcion-texto small {
    color: #B9EAF3;
    font-size: 11px;
    line-height: 1.4;
}

/* =====================================================
   VENTANA QUIÉNES SOMOS
===================================================== */

.menu-info-overlay {
    position: fixed;
    inset: 10px;
    z-index: 2000;
    transform: translateY(150px);
    margin-bottom: 100px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 5, 18, 0.84);
    backdrop-filter: blur(7px);
}

.menu-info-overlay.activo {
    display: flex;
}

.menu-info-contenido {
    position: relative;
    width: min(440px, 100%);
    padding: 32px 24px;
    transform: translateY(150px);
    margin-bottom: 100px;
    box-sizing: border-box;
    text-align: center;
    color: #FFFFFF;
    background: linear-gradient(145deg, #03142B, #020817);
    border: 1px solid rgba(85, 239, 255, 0.6);
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(0, 207, 255, 0.16);
}

.cerrar-quienes-somos {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 36px;
    height: 36px;
    color: #55EFFF;
    background: transparent;
    border: none;
    font-size: 30px;
    cursor: pointer;
}

.menu-info-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #55EFFF;
    font-size: 22px;
    font-weight: 900;
    border: 1px solid #00CFFF;
    border-radius: 18px;
    box-shadow: 0 0 18px rgba(0, 207, 255, 0.15);
}

.menu-info-contenido h2 {
    color: #55EFFF;
    font-size: 20px;
    margin: 0 0 16px;
}

.menu-info-contenido p {
    color: #B9EAF3;
    font-size: 14px;
    line-height: 1.7;
}

.menu-info-contenido .menu-info-eslogan {
    color: #55EFFF;
    font-weight: 600;
}



/* Ajustes para celulares */
@media (max-width: 600px) {
    .contact-menu > summary {
        width: 38px;
        height: 38px;
    }

    .contact-menu .contact-panel {
        right: 0;
        width: min(290px, calc(100vw - 24px));
    }

    .menu-info-contenido {
        padding: 30px 18px;
    }
}



/* Quitar el cuadro exterior de la diapositiva de beneficios */
.benefits-slide {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ==========================================
   IMÁGENES PERSONALIZADAS DE BENEFICIOS
   CHIFLADITO STORE
========================================== */

#benefitSlideIcon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.beneficio-imagen {
    display: block;
    width: 110px;
    height: 110px;
    object-fit: contain;
    margin: 0 auto;

    /* Brillo azul tecnológico */
    filter: drop-shadow(0 0 10px rgba(0, 207, 255, 0.35));

    transition: transform 0.3s ease;
}

.beneficio-imagen:hover {
    transform: scale(1.06);
}

/* Ajuste para teléfonos */
@media (max-width: 600px) {
    .beneficio-imagen {
        width: 85px;
        height: 85px;
    }
}

/* LOGOS DE REDES SOCIALES */
.footer-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 8px;
    text-decoration: none;
    color: var(--neon-claro);
    font-size: 25px;
    transition: transform 0.25s, color 0.25s;
}

.footer-links a:hover {
    color: #FFFFFF;
    transform: scale(1.2);
}