/* ============================================
   1. CONFIGURACIÓN GLOBAL - VARIABLES Y RESET
============================================ */
/* FUERZA EL CORTE LATERAL */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
    width: 100%;
}

body {
    margin: 0; 
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #000000; 
    color: #000000; 
    overflow-x: hidden;
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: flex-start;
    min-height: 100vh; 
    padding-bottom: 40px;
    user-select: none;
}

/* Clase para ocultar elementos visualmente pero mantenerlos
accesibles para lectores de pantalla */

.visually-hidden {
    position: absolute; 
    width: 1px; 
    height: 1px;
    margin: -1px; 
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* ============================================
   2. FUENTES PERSONALIZADAS
============================================ */

/* Solo BN Maschine local */
@font-face {
    font-family: 'BN Maschine';
    src: url('fonts/BNMachine.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Uso en tu CSS */
body {
    font-family: 'Poppins', 'BN Maschine', 'Russo One', Arial, sans-serif;
}

/* ============================================
   3. HEADER - LOGO
============================================ */

.logo-img {
    height:200px; 
    width:auto;
    margin-bottom:-60px; 
    margin-top:-30px;
    transition:.6s;
    z-index: 1; /* logo debajo de la línea */
}

.logo-img:hover { 
    transform:scale(1.1); 
    z-index: -1;
}

/* Línea neon full width linea para agrupar el telepronter */

.header-line {
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 1px; 
    border-top:3px solid rgb(1, 166, 255);
    position: relative;
    z-index: 2; /* la línea siempre arriba */
    
}

/* ===============================================================
   4. MARQUESINA LED + TEXTO INFINITO (EFECTO SCROLL / RGB)
=============================================================== */

.border-box {
    max-width: 100%; 
    width: 70%; 
    height: 50px;
    /* CAMBIO: Fondo negro sólido para que el neón destaque en Chrome */
    background: #000000; 
    margin: 15px auto;
    overflow: hidden; 
    position: relative; 
    z-index: 10;
    box-shadow: 0 0 39px rgba(1, 168, 255, 0.5);
    /* Forzar a Chrome a tratarlo como capa independiente */
    transform: translateZ(0);
}

.border-box::before, .border-box::after {
    content: ""; 
    position: absolute; 
    left: 0; 
    right: 0; 
    height: 3px;
    /* Gradiente con prefijo para asegurar el blanco puro */
    background: -webkit-linear-gradient(left, #01A8FF 0%, #ffffff 10%, #01A8FF 40%, #ffffff 65%, #01A8FF 80%, #ffffff 100%);
    background: linear-gradient(90deg, #01A8FF 0%, #ffffff 10%, #01A8FF 40%, #ffffff 65%, #01A8FF 80%, #ffffff 100%);
    background-size: 400% 100%;
    
    /* El truco maestro para que no desaparezca en Chrome */
    will-change: background-position;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    
    box-shadow: 0 0 8px #01a8ff, 0 0 15px #fff; 
    animation: borderFlow 5s linear infinite;
}

.border-box::before { top: 0; }
.border-box::after { bottom: 0; }

/* 🔹 Estilos del texto de la marquesina */

.white-text {
    font-family: 'BN Maschine', sans-serif;
    color: #ffffff;
    font-weight: 300;
    text-shadow: none;
    -webkit-text-stroke: 0;
    animation: none;
    letter-spacing: 3px;
}

.blue-stroke {
    font-family: 'BN Maschine', sans-serif;
    color: #00000000;
    -webkit-text-stroke: 1px #01A8FF;
    text-shadow: none;
    animation: none;
}

.marquee-content-list {
    font-size:16px; 
    --gap:50px;
    display:flex; gap:var(--gap);
    height:100%; overflow:hidden; user-select:none;
}

.marquee-content-list ul {
    min-width:80%; /* Asegura que el espacio entre parrafos sea mas cercano o mas lejos */
    display:flex; 
    gap:var(--gap);
    animation:scrollText 45s linear infinite;
    list-style: none;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0;
}

.marquee-content-list li {
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 35px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

.marquee-content-list:hover ul {
    animation-play-state:paused; 
    }

/* 🔹 Animación de desplazamiento */

@keyframes scrollText {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(calc(-100% - var(--gap)));
    }
}


/* ============================================
   5. IMAGEN PORTADA PRINCIPAL ANIMADA
============================================ */

/* 🔹 Imagen portada principal */
.fixed-cover-container {
    margin-top: 20px;
    padding-top: 10px; 
    border-top: 3px solid rgb(1, 166, 255);

    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 1; 
}

.fixed-cover-container img {
    
    margin-top: 15px;
    width: 60%;
    max-width: 550px;
    height: auto;
    object-fit: contain;
    display: block;
    transition: all 0.3s ease-in-out;
    position: relative;
    z-index: 0;
    background-color: transparent;
    pointer-events: none;
}
@keyframes pulseCover {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

.fixed-cover-container img {
    animation: pulseCover 5s ease-in-out infinite;
}


/* ============================================
   8. ESTILOS DEL COUNTDOWN (FLIP STYLE)
============================================ */

/* Ajuste de la Sección de Anuncio para subirla */

.announcement-section {
    position: relative;
    z-index: 20; /* Asegura que esté por encima de la imagen */
    margin-top: -200px; /* Sube la sección sobre la imagen PNG */
    padding: 0 10px;
    padding-bottom: 100px;
    text-align: center;
}

.announcement-text { 
    max-width:705px;
    margin: 0 auto 30px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #e0e0e0;
}

.flip-countdown {
    margin-bottom: 1px;
    padding-bottom: 24px; 
    border-bottom: 3px solid rgb(1, 166, 255);
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.flip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flip-card {
    background: #111;
    border: 2px solid #01A8FF;
    border-radius: 8px;
    padding: 15px;
    position: relative;
    width: 80px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 0 15px rgba(1, 168, 255, 0.4);
}
.flip-card .bottom {
    display: none;
}

.flip-card span {
    font-family: 'Russo One', sans-serif;
    font-size: 2.5rem;
    color: #01A8FF;
    display: block;
    line-height: 1;
}

.flip-item small {
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    font-size: 0.8rem;
}

/* Animación simple de parpadeo al cambiar */

.flip-animate {
    animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); border-color: #fff; }
    100% { transform: scale(1); }
}

/* ============================================
   6. FOOTER - RESPLANDOR Y REDES (CORREGIDO)
============================================ */

footer {
    margin-top: -80px;
    padding-top: 50px; 
    box-shadow: 0 -20px 45px rgba(1, 168, 255, 0.25);
    position: relative;
    width: 100%;
    height: auto;
    min-height: 180px;
    background: #000;
    clip-path: inset(-60px 0 0 0);
    
    /* CENTRADO TOTAL */
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 10;
}

/* Contenedor de iconos centrado */
.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 25px;
    width: 100%; /* Asegura que ocupe todo el ancho para centrar */
    z-index: 30; /* Por encima de cualquier resplandor */
}

/* Estilo base del Icono (Azul BigMauro) */
.icon-link {
    font-size: 30px;
    color: #01A8FF !important; /* Forzamos tu azul inicial */
    text-decoration: none;
    transition: transform 0.3s ease, color 0.3s ease, filter 0.3s ease;
    display: inline-block;
}

/* EL CAMBIO DE COLOR (HOVER) */
/* Al pasar el mouse, el color cambia directamente en el icono */
.yt:hover { color: #FF0000 !important; filter: drop-shadow(0 0 10px #FF0000); }
.tt:hover { color: #25F4EE !important; filter: drop-shadow(0 0 10px #25F4EE); }
.ig:hover { color: #E1306C !important; filter: drop-shadow(0 0 10px #E1306C); }
.tw:hover { color: #ffffff !important; filter: drop-shadow(0 0 10px #ffffff); }
.gm:hover { color: #EA4335 !important; filter: drop-shadow(0 0 10px #EA4335); }

.icon-link:hover {
    transform: translateY(-5px) scale(1.1);
}

/* Estilo específico para Big Mauro */
.icon-link.bm {
    width: 62px;  /* Un poco más grande para compensar el peso visual del logo */
    height: 62px;
    background-image: url(Imagenes/icono\ cc\ azul.png); /* Estado normal */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Esto hereda tu transición de transform y filter del .icon-link general */
}

/* Efecto HOVER para Big Mauro */
.bm:hover {
    background-image: url(Imagenes/icono\ cc\ normal.png); /* Cambio a la imagen con color */
    filter: drop-shadow(0 0 10px #01A8FF); /* Resplandor azul al pasar el mouse */
}

/* Ajuste del texto del footer */
footer .footer-text {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 1px;
    opacity: 0.8;
    margin: 0;
    padding-bottom: 20px;
    width: 100%;
}

/* Línea LED superior */

footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2.5px;

    background: linear-gradient(
        90deg,
        #01A8FF 0%,
        #ffffff 20%,
        #01A8FF 40%,
        #ffffff 60%,
        #01A8FF 80%,
        #ffffff 100%
    );

    background-size: 400% 100%;
    box-shadow: 0 -2px 15px  #01A8FF, 0 -2px 20px #ffffff; /* glow reducido */
    animation: borderFlow 6s linear infinite;
    z-index: 5;
}

/* Desactivamos la línea inferior */
footer::after {
    display: none;
}

/* Animación */
@keyframes borderFlow {
    0% { background-position: 0% 0%; }
    100% { background-position: -400% 0%; }
}

/* Ajuste móvil */

@media (max-width: 480px) {
.flip-card {
    width: 60px;
    height: 80px;
    padding: 10px;
}

.flip-card span {
    font-size: 1.8rem;
}
}

/* Forzamos que el contenedor del reloj y el invite no existan en la vista web normal */
#watchContainer,
#facerInvite,
.watch-invite-overlay {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

/* Solo se activará dentro del @media de relojes */

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

/* ===================================================
    7. RESPONSIVO (Breakpoints)
    =================================================== */

/* Mobile (Se aplica cuando la pantalla es MÁS PEQUEÑA que 768px) */
@media screen and (max-width: 768px) {

/* A. AJUSTE DEL LOGO */

.logo-img {
    height: 140px;       
    margin-top: -30px;   
    margin-bottom: -30px;
}

/* B. AJUSTE DE LA MARQUESINA (TELEPROMPTER) */

.border-box {
    height: 45px;       
    margin-top: 0px;    
    margin-bottom: 0px; 
    width: 90%;         
}

.marquee-content-list {
    font-size: 18px; /* más pequeño para que no se vea gigante */
}

.marquee-content-list ul {
    min-width: 20%; /* un poco más largo que el contenedor para mantener el scroll continuo */
    gap: 20px;       /* reducir el espacio entre elementos */}

/* C. AJUSTE DEL TEXTO DE MARQUESINA */

.marquee-content-list li {
    font-size: 25px; /* ajusta el tamaño de los textos */
    gap: 4px;        /* menos espacio entre palabras */
}

/* D. AJUSTE DEL GROSOR DEL BORDE LED (Glow/Borde) */

.border-box::before,
.border-box::after {
    height: 2px; 
    box-shadow: 
        0 0 3px 0px #01A8FF,
        0 0 5px 0px #ffffff;
}

.fixed-cover-container img {
        width: 45%;      /* desktop tienes 60%, aquí baja */
        max-width: 420px; /* límite elegante */
        margin-bottom: 40px;
    }

/* F. TEXTO DE ANUNCIO (TABLET / MOBILE) */

.announcement-text {
    max-width: 380px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
    padding-inline: 100px;

    white-space: normal;   /* 🔥 ESTA ES LA CLAVE */
    word-break: break-word;
}

/* E. AJUSTE DEL COUNTDOWN (MÓVIL) */

.flip-countdown {
    margin-top: 25px;
    gap: 10px;              /* menos separación entre cajas */
}

.flip-card {
    width: 55px;
    height: 70px;
    padding: 8px;
}

.flip-card span {
    font-size: 1.6rem;      /* número más pequeño */
}

.flip-item small {
    font-size: 0.6rem;
    margin-top: 4px;
    letter-spacing: 1px;
}

/* G. AJUSTE DEL FOOTER (MÓVIL) */

.social-links {
        gap: 25px; /* Espacio ideal para dedos */
        margin-bottom: 20px;
    }

    .icon-link {
        font-size: 32px; /* Un poco más grande en móvil para facilitar el toque */
    }

    /* EFECTO AL TOCAR (PANTALLAS TÁCTILES) */
    .icon-link:active {
        transform: scale(0.9); /* Efecto de "botón presionado" */
        transition: 0.1s;
    }

    /* Colores instantáneos al tocar en móvil */
    .yt:active { color: #FF0000 !important; filter: drop-shadow(0 0 15px #FF0000); }
    .tt:active { color: #25F4EE !important; filter: drop-shadow(0 0 15px #25F4EE); }
    .ig:active { color: #E1306C !important; filter: drop-shadow(0 0 15px #E1306C); }
    .tw:active { color: #ffffff !important; filter: drop-shadow(0 0 15px #ffffff); }
    .gm:active { color: #EA4335 !important; filter: drop-shadow(0 0 15px #EA4335); }

    footer {
        margin-top: -70px; /* Ajuste de posición en móvil */
        padding-top: 40px;
        min-height: 150px;
    }
}

footer .footer-text {
    font-size: 13px;
}

footer::before,
footer::after {
    height: 2px;
    animation-duration: 7s; /* un poco más suave */

}

/* =======================================================
1. MÓVILES NORMALES (Hasta 390px)
   ======================================================= */

@media screen and (max-width: 390px) {
    #logoGif {
        height: 120px!important;
        margin-top: -25px!important;
}

/* 2. Pegar la línea al teleprompter */

.header-line {
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 1px; 
    border-top:1px solid rgb(1, 166, 255);
    position: relative;
    z-index: 2; /* la línea siempre arriba */
    
}
/* 🔹 Líneas LED superiores e inferiores */

.border-box {
    display: block !important;
    height: 35px !important;
    width: 95% !important;
    box-shadow: #01A8FF 0px 0px 15px 0px !important;
}

.marquee-content-list {
    font-size: 14px;
}

.marquee-content-list ul {
    min-width: 50% !important; /* Evita espacios vacíos */
    gap: 25px !important;       /* Espacio entre párrafos más corto */
    animation: scrollText 40s linear infinite !important; /* Más rápido */
}

.marquee-content-list li {
    font-size: 22px;
    gap: 3px;
}

.flip-countdown {
    margin-bottom: 1px;
    padding-bottom: 24px; 
    border-bottom: 1px solid rgb(1, 166, 255);
}

.fixed-cover-container {
    margin-top: 12px;
    border-top: 1px solid rgb(1, 166, 255);
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 1; 
}
.fixed-cover-container img {
    max-width: 350px !important;
    width: 100% !important; /* De 20% la subimos a 75% */
    margin-top: 5px !important;
}

/* 5. Ajuste del texto de anuncio (Para que no se salga) */

.announcement-text {
    max-width: 300px !important;
    margin-top: 35px !important; /* Ajuste para que no pise tanto la imagen */
    font-size: 14px !important;
    width: 55% !important;
    line-height: 1.4;
}

.flip-card {
    background: rgba(17, 17, 17, 0.8) !important;
    width: 42px !important;
    height: 50px !important;
}

footer {
    max-width: 100%;
    height: auto;
    margin-top: -85px;
}

footer .footer-text {
    width: 80%; /* Evita que toque los bordes */
    font-size: 12px;
    text-align: center;
    padding: 0px 30px;
}

.social-links {
        gap: 15px;
    }
    .icon-link {
        font-size: 26px;
    }
}
/* =======================================================
2. iPHONE 4 / 5 / SE (320px x 480px+) - ACTUALIZADO
======================================================= */

@media screen and (max-width: 320px) and (min-height: 480px) {
    #logoGif { 
        height: 75px; 
        margin-top: -40px;
    }

    /* Teleprompter compacto */
    .border-box { 
        height: 50px !important;
        margin: 5px auto !important;
        width: 95% !important; /* Un poco más ancho para aprovechar espacio */
    }

    .marquee-content-list ul {
        gap: 15px !important; /* Reducido para evitar saltos */
        animation: scrollText 40s linear infinite !important;
    }

    .marquee-content-list li {
        font-size: 20px !important; /* Texto más pequeño para que no empuje el borde */
    }

    /* Imagen y Texto en pantallas minúsculas */
    .fixed-cover-container img { 
        width: 60% !important; 
        margin-top: 5px !important;
        margin-bottom: 30px !important;
    }

    /* AJUSTE CLAVE: Texto de anuncio para que no rompa el margen */
    .announcement-text {
        max-width: 280px !important; /* Más ancho para que el texto fluya hacia abajo */
        font-size: 12px !important;
        padding: 0 10px !important;
        margin-bottom: 60px !important; /* Espacio para que el footer no lo pise */
    }

    /* FIX DEFINITIVO PARA EL FOOTER */
    footer { 
        margin-top: -60px !important; /* Menos agresivo para evitar solapamiento */
        padding-top: 40px !important;
        min-height: 140px !important;
    }

    .social-links {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important; /* 👈 AQUÍ: Espacio reducido para que quepan todos los iconos */
        padding: 0 5px !important;
    }

    .icon-link {
        font-size: 20px !important; /* Iconos un poco más pequeños */
        padding: 5px !important; 
    }

    .icon-link.bm {
        width: 30px !important; /* Ajuste para el logo de BigMauro */
        height: 30px !important;
    }

    footer .footer-text {
        font-size: 10px !important;
        padding: 0 15px !important;
        margin-top: 10px !important;
    }
}

/* =======================================================
3. RELOJES (Smartwatch Estándar - 320px x 400px)
====================================================== */

@media screen and (max-width: 320px) and (max-height: 400px) {
    body > *:not(#watchContainer):not(#facerInvite) { display: none !important; }
    body {
        background-color: #000 !important;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    
.watch-only {
    display: flex !important; 
    width: 100%; 
    height: 100%; 
}

.watch-face {
    width: 100%; 
    height: 100%;
    background: radial-gradient(circle, #0a0a0a 0%, #000 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    /* Logo estándar */
    .watch-logo {
    position: absolute;
    top: -1%;
    width: 65%;
    max-width: 160px;
    height: auto;
}

    
    .hand { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom center; z-index: 5; }
    .hour-hand { width: 4px; height: 25%; background: #fff; border-radius: 10px; }
    .min-hand { width: 3px; height: 38%; background: #fff; border-radius: 10px; }
    .sec-hand { width: 1.5px; height: 42%; background: #ff0000; }
    .center-dot { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background: #ff0000; border-radius: 50%; transform: translate(-50%, -50%); z-index: 10; box-shadow: 0 0 8px #ff0000; }
    
    .digital-clock { position: absolute; top: 64%; color: #01A8FF; font-family: 'Russo One', sans-serif; font-size: 2.0rem; text-shadow: 0 0 10px rgba(1, 168, 255, 0.8); }
    .watch-date { position: absolute; top: 56%; color: #ffffff; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; opacity: 0.7; }


    .watch-invite-overlay {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.788);
        z-index: 9999;
        display: flex; 
        align-items: flex-end; 
        justify-content: center;
        padding-bottom: 10px;
        backdrop-filter: blur(3px);
    }

    .invite-card {
        background: rgba(20, 20, 20, 0);
        border: 3px solid rgba(1, 168, 255, 0.4);
        border-radius: 20px;
        padding: 8px;
        text-align: center;
        width: 90%;
        max-width: 220px;
    }

    .invite-card h3 { color: #01A8FF; font-size: 10px; margin: 2px 0; }
    .invite-card p { color: #ccc; font-size:10px; margin-bottom: 8px; }
    .invite-btns { display: flex; gap: 5px; justify-content: center; }
    .btn-confirm { background: #01A8FF; color: white; text-decoration: none; padding: 6px 10px; border-radius: 17px; font-size: 9px; font-weight: bold; flex: 1; }
    .btn-cancel { background: rgba(0, 0, 0, 0.733); color: white; border: none; padding: 6px 10px; border-radius: 17px; border-color: #01A8FF; font-size: 9px; flex: 1; }
}
/* =======================================================
   4. MICRO-RELOJES (Hasta 162px x 197px)
   ======================================================= */
@media screen and (max-width: 162px) and (max-height: 197px) {

    .watch-logo {
        width: 45% !important;   /* 🔥 CLAVE */
        max-width: 90px !important;
        height: auto !important;
        top: -12% !important;
        
    }

    /* Manecillas más cortas */
    .hour-hand { height: 18% !important; }
    .min-hand  { height: 28% !important; }
    .sec-hand  { height: 35% !important; }

    /* Digital compacto */
    .digital-clock {
        top: 62% !important;
        font-size: 1.75rem !important;
    }

    .watch-date {
        top: 82% !important;
        font-size: 0.35rem !important;
    }

    .watch-copyright {
        position: absolute;
        bottom: 1px;
        width: 100%;
        text-align: center;
        color: rgba(255, 255, 255, 0.411);
        font-size: 2px;
        letter-spacing: 1px;
        text-transform: uppercase;
        z-index: 20;
    }
}