/* ==========================================================================
   PORTAL WEB - AMETSA NAVARRA
   Escalado Inteligente Multi-pantalla (Ambient/Blur Mode)
   ========================================================================== */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #0b0b0f; /* Color de fondo oscuro elegante */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 
   Fondo de Efecto Ambiental (Blur/Ambient Mode)
   Coloca una copia borrosa de la imagen de fondo para rellenar los bordes vacíos
   (lados en PC si se desborda) de forma dinámica, eliminando bordes negros.
*/
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('./escuela.webp');
    background-size: cover;
    background-position: center center;
    filter: blur(30px) brightness(0.35); /* Desenfoque y oscurecimiento para dar contraste */
    transform: scale(1.08); /* Evita bordes blancos causados por el filtro de desenfoque */
    z-index: -1;
    pointer-events: none;
}

/* 
   Contenedor Adaptativo Proporcional
   - Por defecto (pantallas anchas/PC): Se ajusta al 100% de la altura de la pantalla (100vh).
   - El ancho se calcula automáticamente para mantener la proporción 2:3 de la foto (66.6vh).
*/
.image-wrapper {
    position: relative;
    height: 100vh;
    width: auto;
    aspect-ratio: 1080 / 1620; /* Proporción 2:3 */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* La imagen ocupa siempre el 100% de su contenedor calibrado */
.main-image {
    width: 100%;
    height: 100%;
    display: block;
}

/* 
   Ajuste específico para teléfonos móviles (menor a 768px de ancho)
   - width: 100vw; (Ancho completo del viewport)
   - height: 100%; e height: 100dvh; (Alto dinámico del móvil)
   Usamos 100dvh (Dynamic Viewport Height) para restar automáticamente el alto de
   las barras de navegación superiores e inferiores del navegador móvil (Safari/Chrome).
   Esto evita que la imagen sobresalga o sea "demasiado grande" y se corte en altura.
*/
@media (max-width: 768px) {
    .image-wrapper {
        width: 100vw;
        height: 100%;
        height: 100dvh;
        aspect-ratio: auto;
        border-radius: 0;
        box-shadow: none;
    }
    
    .main-image {
        object-fit: fill;
    }
}

/* Estilo base de los botones invisibles sobre la imagen */
.overlay-link {
    position: absolute;
    cursor: pointer;
    border-radius: 8px;
    border: 3px solid transparent;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
    /* Inclinamos las cajas en el eje X para coincidir con la foto */
    transform: skewX(-11.2deg);
    transform-origin: center;
}

/* Hover de encendido visual en las zonas clicables */
.link-parapente {
    top: 57.3%;
    left: 2.2%;
    width: 29.8%;
    height: 22.0%;
}

.link-parapente:hover {
    border-color: rgba(0, 242, 254, 0.8);
    background-color: rgba(0, 242, 254, 0.05);
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.35);
    transform: skewX(-11.2deg) scale(1.01);
}

.link-paramotor {
    top: 57.3%;
    left: 32.8%;
    width: 30.2%;
    height: 22.0%;
}

.link-paramotor:hover {
    border-color: rgba(243, 115, 53, 0.8);
    background-color: rgba(243, 115, 53, 0.05);
    box-shadow: 0 0 25px rgba(243, 115, 53, 0.35);
    transform: skewX(-11.2deg) scale(1.01);
}

.link-aladelta {
    top: 57.3%;
    left: 64.8%;
    width: 32.5%;
    height: 22.0%;
}

.link-aladelta:hover {
    border-color: rgba(218, 68, 83, 0.8);
    background-color: rgba(218, 68, 83, 0.05);
    box-shadow: 0 0 25px rgba(218, 68, 83, 0.35);
    transform: skewX(-11.2deg) scale(1.01);
}