/* 1. Declaramos la tipografía */
@font-face {
    font-family: 'Boston Traffic';
    src: url('boston.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 2. Reset básico */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
    height: 100dvh; /* dvh evita que las barras del móvil tapen el contenido */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer; 
    user-select: none; 
    position: relative; /* Para posicionar el icono de IG */
    -webkit-tap-highlight-color: transparent; /* Elimina el destello azul al tocar en móviles */
}

/* 3. Estilos del texto */
#texto-bucle {
    color: white;
    font-family: 'Boston Traffic', sans-serif;
    font-size: 4rem; 
    text-align: center;
}

/* 4. Estilos del icono de Instagram (BLINDADO) */
#enlace-ig {
    position: absolute;
    bottom: 40px; /* Distancia segura en ordenador */
    left: 50%; 
    transform: translateX(-50%); 
    display: block; /* Obliga al navegador a renderizar su caja */
    color: white; 
    opacity: 0.5; 
    text-decoration: none; 
    transition: opacity 0.3s ease;
    z-index: 99; /* Prioridad por encima de todo */
}

/* Forzamos que el trazo del icono sea blanco y anulamos azules */
#enlace-ig svg {
    stroke: white !important;
}

#enlace-ig:hover {
    opacity: 1; 
}

/* 5. Ajustes para móviles */
@media (max-width: 768px) {
    #texto-bucle {
        font-size: 2.5rem;
        padding: 0 20px; 
    }
    #enlace-ig {
        bottom: 30px; /* Distancia adaptada para pantallas pequeñas */
    }
}