/* styles.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Previene superposiciones  */
}

html, body {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    background: radial-gradient(circle at 50% 30%, #ffffff 0%, #e2e8f0 100%);
    background-attachment: fixed;
    color: #111827;
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Clase que aplicaremos con JavaScript al scrollear */
.nav-compact {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    background: rgba(255, 255, 255, 0.95) !important; /* Un poco más de opacidad para legibilidad */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Agregamos una sombrita sutil */
}

.nav-compact #nav-logo {
    height: 1.5rem !important; /* Logo reducido casi a la mitad (h-6) */
}

.nav-compact #nav-tienda {
    display: none; /* Desaparece por completo */
}

.nav-compact #nav-btn {
    height: 30px !important; /* Botón más delgado */
    width: 130px !important;
    font-size: 8px !important;
}

/* El botón Glow ajustado para fondo claro */
.glow-on-hover {
    width: 160px;
    height: 40px;
    background: #fff;
    border-radius: 8px;
    position: relative;
    z-index: 0;
    transition: 0.5s;
    font-weight: 700;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #4095ff, #00f2ff, #70b4ff, #4095ff);
    position: absolute;
    top: -2px; left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s;
    border-radius: 10px;
}

.glow-on-hover:hover { color: #000; }
.glow-on-hover:hover:before { opacity: 1; }

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    background: #fff;
    left: 0; top: 0;
    border-radius: 8px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}


/* --- SECCIÓN 2: ANIMACIÓN DEL CUBO --- */
.cube-container {
    width: 100%;
    transform: rotate(-35deg) scale(0.8);
}

.cube-box {
    position: relative;
    left: -100px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Reflejo estilo Apple/Tesla */
    -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(255,255,255,0.1));
    animation: animatesurface 1.5s ease-in-out infinite;
}

.cube-rolling {
    width: 180px;
    height: 180px;
    background: #03e9f4;
    box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 150px #03e9f4;
    transform-origin: bottom right;
    animation: animateCube 1.5s ease-in-out infinite;
    border-radius: 4px; /* Un toque de redondeo al cubo */
}

@keyframes animatesurface {
    0% { transform: translateX(0); }
    100% { transform: translateX(-200px); }
}

@keyframes animateCube {
    0% { transform: rotate(0deg); }
    60%, 70%, 80%, 100% { transform: rotate(90deg); }
    65% { transform: rotate(85deg); }
    75% { transform: rotate(87.5deg); }
}

/* --- SECCIÓN 3: REVEAL CARDS (GLASS STYLE) --- */
.reveal-card {
    position: relative;
    height: 350px; /* Altura controlada */
}

.reveal-card .face {
    width: 100%;
    height: 200px;
    transition: 0.5s;
    border-radius: 2rem; /* Redondeado estilo Apple */
}

.reveal-card .face.face1 {
    position: relative;
    background: #111827; /* Fondo oscuro para el brillo */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateY(100px);
}

/* EL FAMOSO GLOW QUE PEDISTE */
.reveal-card:hover .face.face1 {
    background: #111827;
    transform: translateY(0);
    box-shadow:
        inset 0 0 60px whitesmoke,
        inset 20px 0 80px #4095ff,   /* Azul Logo */
        inset -20px 0 80px #03e9f4,  /* Cian Cubo */
        inset 20px 0 300px #4095ff,
        inset -20px 0 300px #03e9f4,
        0 0 50px #fff,
        -10px 0 80px #4095ff,
        10px 0 80px #03e9f4;
}

.reveal-card .face.face1 .reveal-content {
    opacity: 0.2;
    transition: 0.5s;
    text-align: center;
    color: white;
}

.reveal-card:hover .face.face1 .reveal-content {
    opacity: 1;
}

.reveal-card .face.face2 {
    position: relative;
    background: rgba(255, 255, 255, 0.4); /* Glassmorphism */
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
    transform: translateY(-100px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
}

.reveal-card:hover .face.face2 {
    transform: translateY(0);
}

.btn-reveal {
    margin-top: 15px;
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #111827;
    text-decoration: none;
    color: #111827;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 8px;
    transition: 0.3s;
}

.btn-reveal:hover {
    background: #111827;
    color: white;
}

/* --- SECCIÓN 4: MARQUEE INFINITO (FIXED) --- */
.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Eliminamos cualquier padding lateral que pueda descuadrar el cálculo */
    padding: 20px 0;
}

.marquee-content {
    display: flex;
    width: max-content; /* Se ajusta dinámicamente al ancho de los logos */
    animation: marquee-loop 40s linear infinite;
}

/* La clave para evitar el "salto" de tu imagen: */
.marquee-item-group {
    display: flex;
    align-items: center;
    /* El gap y el padding-right deben ser IDENTICOS */
    gap: 80px; 
    padding-right: 80px; 
    flex-shrink: 0;
}

@keyframes marquee-loop {
    0% { transform: translateX(0); }
    /* Desplazamos exactamente la mitad (el primer grupo completo) */
    100% { transform: translateX(-50%); } 
}

/* Evitamos que el navegador intente "suavizar" el inicio/fin */
.animate-marquee {
    will-change: transform;
}

.client-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.client-logo:hover {
    transform: scale(1.15);
}


/* Efecto de resplandor "Rosa Mexicano" sutil al hover */

/* Detalle decorativo tipo Hacienda */
.section-mexican-touch {
    background-image: radial-gradient(#4095ff0a 1px, transparent 1px);
    background-size: 30px 30px; /* Un patrón de puntos sutil tipo textil */
}

/* Toque final al footer para el efecto Cristal */
footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
    z-index: -1;
}

/* --- FOOTER ICON SWITCHES --- 
   Descomenta la línea para OCULTAR el ícono correspondiente 
------------------------------------------------------------ */
.footer-icon-fb { display: none !important; } */ /* Ocultar Facebook */
.footer-icon-ig { display: none !important; } */ /* Ocultar Instagram */
.footer-icon-x  { display: none !important; } */ /* Ocultar X (Twitter) */
.footer-icon-in { display: none !important; } */ /* Ocultar LinkedIn

/* ------------------------------------------------------------ */

/* WHATSAPP WIDGET STYLES */
.wa-glow-container:before {
    content: '';
    background: linear-gradient(45deg, #2ECC71, #00F2FF, #2ECC71, #00F2FF);
    position: absolute;
    top: -3px; left: -3px;
    background-size: 400%;
    z-index: -1;
    filter: blur(8px);
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    animation: glowing-wa 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 50%; /* Obligatorio para ser circular */
}

.wa-glow-container:hover:before {
    opacity: 1;
}

@keyframes glowing-wa {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* Estado activo de la ventana */
#whatsapp-window.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}