/* Configuración general y fondo de pantalla completo sin repetición */
body {
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
    
    background-color: #00a2ff; 
    background-image: url('123.png');
    
    /* CAMBIA ESTAS LÍNEAS PARA QUE CUBRA TODO Y SE CENTRE */
    background-size: cover;           /* Cambiado de 'contain' a 'cover' para que tape TODO sin estirarse feo */
    background-position: center center; /* Cambiado de 'right' a 'center' para centrarlo */
    background-repeat: no-repeat; 
    background-attachment: fixed;
    
    color: #ffffff;
    min-height: 100vh;
    position: relative; /* Permite posicionar elementos de forma absoluta respecto a la pantalla */
}

/* Caja contenedora del texto (Anclada a la izquierda) */
.container {
    background-color: rgba(0, 0, 0, 0.85); 
    border: 3px double #ffffff;
    padding: 20px;
    margin: 40px 0px 40px 40px; 
    max-width: 500px; 
    width: 90%;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    display: inline-block; /* Evita que ocupe todo el ancho horizontal */
}

/* Título principal */
h1 {
    text-align: center;
    color: #00a2ff; 
    text-shadow: 2px 2px #000000;
    margin-top: 0;
    font-size: 2rem;
    border-bottom: 2px dashed #ffffff;
    padding-bottom: 10px;
}

/* Párrafos e información */
p {
    line-height: 1.6;
    font-size: 1.1rem;
}

/* Pie de página */
.footer {
    text-align: center;
    margin-top: 30px;
    font-size: 0.8rem;
    opacity: 0.7;
}

/* --- FILA HORIZONTAL DE PALOMAS (ZONA MARCADA EN ROJO) --- */
.palomas-horizontal {
    position: absolute;
    top: 320px;       /* Distancia desde el techo de la página */
    right: 80px;     /* Distancia desde el borde derecho */
    display: flex;
    flex-direction: row; /* Fuerza a que se pongan una al lado de la otra en fila */
    gap: 50px;       /* Espacio de separación entre cada paloma */
    z-index: 20;
}

/* Efectos interactivos de las palomas */
.paloma-link {
    position: relative;
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}

/* Al pasar el mouse, la paloma se agranda un poco y aletea/rota */
.paloma-link:hover {
    transform: scale(1.2) translateY(-5px);
}

.paloma-img {
    width: 200px; /* Tamaño ideal según tu ejemplo */
    height: auto;
    image-rendering: pixelated; 
    filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.3));
    display: block;
}

/* Cartel flotante (Tooltip) que sale abajo de las palomas */
.paloma-link::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 110%; /* Aparece justo abajo del GIF */
    left: 50%;
    transform: translateX(-50%);
    background-color: #000000;
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 5px 10px;
    font-size: 0.85rem;
    white-space: nowrap;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
}

.paloma-link:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Ajustes para pantallas chicas (Celulares) */
@media (max-width: 900px) {
    .container {
        margin: 20px auto;
        display: block;
    }
    
    /* En celulares se acomodan abajo del bloque negro de forma ordenada */
    .palomas-horizontal {
        position: static;
        margin: 20px auto 40px auto;
        justify-content: center;
        flex-wrap: wrap;
    }

    .paloma-link::after {
        display: none;
    }
    
/* --- CONTENEDOR EN EL CENTRO EXACTO DE LA WEB --- */
.seccion-inferior-interactiva {
    position: fixed;
    bottom: 30px;         /* Separación del fondo de la pantalla */
    left: 50%;            /* Lo mueve al centro de la pantalla */
    width: 400px;         /* Definimos el ancho exacto aquí */
    height: 400px;        /* Definimos el alto exacto aquí */
    margin-left: -100px;  /* Truco de la vieja escuela: resta exactamente la mitad del ancho para centrarlo perfecto */
    z-index: 9999;        /* Asegura que flote por encima de todo */
}

/* --- ESTILO DE LA IMAGEN (Se adapta al contenedor automáticamente) --- */
#btn-mutar {
    width: 100%;          /* Toma los 200px del contenedor principal */
    height: 100%;         /* Toma los 200px del contenedor principal */
    display: block;
    object-fit: cover;    /* Recorta la pintura del infierno o cielo para que encajen perfectas */
    cursor: pointer;      /* Activa la manito interactiva */
    border: 0px solid #ffffff;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.6);
    image-rendering: pixelated; /* Píxeles definidos sin borrosidad */
    transition: transform 0.1s ease;
}

/* Efecto de presión al hacer clic */
#btn-mutar:active {
    transform: scale(0.95);

}
}