/* ==========================================================================
   ESTILOS GENERALES Y ADAPTACIÓN DE LIENZO
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff; /* Fondo blanco para mimetizarse con la imagen */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* El contenedor ahora se limita estrictamente a la proporción de la imagen */
.canvas-container {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100vw;
    max-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.background-art {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
    pointer-events: none;
}

/* SOLUCIÓN: La capa interactiva ahora copia el tamaño matemático exacto del aspecto de la imagen */
.interactive-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
}

/* Estilo para desarrollo: Cambiá el border/background cuando termines las pruebas */
.bubble-link {
    position: absolute;
    display: block;
    cursor: pointer;
    border-radius: 50%; /* Redondeados para que calcen mejor en las burbujas */
    
    /* LINEAS DE PRUEBA: Borrar o comentar estas dos líneas para hacerlos invisibles */
   /*  border: 2px dashed rgba(255, 0, 0, 0.7);
    background: rgba(255, 0, 0, 0.12); */
    
    transition: transform 0.2s ease-in-out, background 0.2s ease-in-out;
}

.bubble-link {
    pointer-events: auto;
}


/* ==========================================================================
   CONFIGURACIÓN RESPONSIVE: ORIENTACIÓN HORIZONTAL (Desktop / Tablets)
   ========================================================================== */
@media (orientation: landscape) {
    .canvas-container {
        aspect-ratio: 3168 / 2279;
        max-width: 100vw;
        max-height: 100vh;
    }

    .interactive-layer {
        width: 100%;
        height: 100%;
    }

    .art-vertical { display: none; }
    .art-horizontal { display: block; }

    /* --- NUEVAS COORDENADAS AJUSTADAS AL DIBUJO --- */

    .link-cartel-top {
        top: 2.5%;
        left: 13.0%;
        width: 18.2%;
        height: 11.5%;
        border-radius: 4px;
    }

    .link-newsletter {
        top: 17.5%;
        left: 13.5%;
        width: 20.5%;
        height: 22.0%;
        border-radius: 50%;
    }

    .link-capsulas {
        top: 45.8%;
        left: 16.8%;
        width: 18.0%;
        height: 24.0%;
        border-radius: 50%;
    }

    .link-tarjetas {
        top: 78.5%;
        left: 14.0%;
        width: 15.0%;
        height: 20.0%;
        border-radius: 50%;
    }

    .link-podcast {
        top: 3.2%;
        left: 31.8%;
        width: 16.0%;
        height: 31.5%;
    }

    .link-dibujar-aire {
        top: 33.8%;
        left: 34.2%;
        width: 24.5%;
        height: 33.0%;
    }

    .link-otras-cosas {
        top: 68.8%;
        left: 30.5%;
        width: 15.8%;
        height: 27.0%;
    }

    .link-artista-escenica {
        top: 7.2%;
        left: 51.0%;
        width: 20.5%;
        height: 30.5%;
        border-radius: 50%;
    }

    .link-comunidad {
        top: 40.5%;
        left: 58.0%;
        width: 20.5%;
        height: 34.5%;
    }

    .link-detras-proyectos {
        top: 69.2%;
        left: 47.8%;
        width: 19.5%;
        height: 29.0%;
    }

    .link-investigacion {
        top: 8.5%;
        left: 72.8%;
        width: 12.8%;
        height: 41.0%;
        transform: rotate(-15deg);
    }

    .link-cartel-bottom {
        top: 79.5%;
        left: 70.8%;
        width: 14.2%;
        height: 12.5%;
        border-radius: 4px;
    }
}

/* ==========================================================================
    CONFIGURACIÓN RESPONSIVE: ORIENTACIÓN VERTICAL (Smartphones)
    Also applies on narrow viewports to switch to vertical earlier on mobile
    ========================================================================== */
@media (orientation: portrait), (max-width: 900px) {
    .canvas-container {
        aspect-ratio: 1748 / 2480;
        max-width: 100vw;
        max-height: 100vh;
    }

    .interactive-layer {
        width: 100%;
        height: 100%;
    }

    .art-horizontal { display: none; }
    .art-vertical { display: block; }
    
    /* --- COORDENADAS VERTICALES AJUSTADAS AL DIBUJO --- */

    .link-cartel-top {
        top: 3.2%;
        left: 65.5%;
        width: 25.5%;
        height: 10.8%;
        border-radius: 4px;
    }

    .link-investigacion {
        top: 4.8%;
        left: 16.0%;
        width: 40.5%;
        height: 12.0%;
        transform: rotate(-2deg);
    }
    .link-investigacion:hover {
        transform: rotate(-2deg) scale(1.03);
    }

    .link-podcast {
        top: 17.5%;
        left: 20.8%;
        width: 32.5%;
        height: 20.0%;
    }

    .link-artista-escenica {
        top: 17.8%;
        left: 54.0%;
        width: 24.0%;
        height: 24.0%;
        border-radius: 50%;
    }

    .link-newsletter {
        top: 38.8%;
        left: 14.8%;
        width: 22.0%;
        height: 22.0%;
        border-radius: 50%;
    }

    .link-dibujar-aire {
        top: 38.5%;
        left: 38.2%;
        width: 20.8%;
        height: 20.8%;
    }

    .link-comunidad {
        top: 39.5%;
        left: 60.5%;
        width: 32.0%;
        height: 22.0%;
    }

    .link-tarjetas {
        top: 59.8%;
        left: 19.2%;
        width: 28.0%;
        height: 25.0%;
        border-radius: 50%;
    }

    .link-detras-proyectos {
        top: 60.5%;
        left: 49.5%;
        width: 32.5%;
        height: 19.0%;
    }

    .link-capsulas {
        top: 77.2%;
        left: 36.5%;
        width: 24.0%;
        height: 24.0%;
        border-radius: 50%;
    }

    .link-otras-cosas {
        top: 78.5%;
        left: 62.5%;
        width: 27.2%;
        height: 18.2%;
    }

    .link-cartel-bottom {
        top: 84.8%;
        left: 11.8%;
        width: 27.0%;
        height: 10.5%;
        border-radius: 4px;
    }
}