/* styles.css */

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    overflow: hidden;
    height: 100vh;
    position: relative;
}

section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden; /* La visibilidad inicial se mantiene oculta */
    transform: scale(1); /* La escala inicial se mantiene en 1 */
    transition: visibility 0.3s ease-in-out, z-index 0s; /* Transición de visibilidad más suave */
    z-index: 1; /* Todas las capas inicialmente detrás */
}

section.solfeggio { /* Capa frontal */
    opacity: 1;
    transform: scale(1);
    visibility: visible;
    z-index: 10;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s ease-in-out, z-index 0s;
}

section.friggio { /* Segunda capa (detrás) */
    opacity: 0.6;
    transform: scale(0.7);
    visibility: visible;
    z-index: 9;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.1s ease-in-out, z-index 0s;
}

section.adaggio { /* Tercera capa */
    opacity: 0.3;
    transform: scale(0.4);
    visibility: visible;
    z-index: 8;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.1s ease-in-out, z-index 0s;
}

section.arpeggio { /* Cuarta capa (fondo inmediato) */
    opacity: 0.2;
    transform: scale(0.2);
    visibility: visible;
    z-index: 7;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.1s ease-in-out, z-index 0s;
}

.crescendo-out {
    transform: scale(1.5);
    opacity: 0;
    visibility: visible !important;
    transition: transform 2s ease-in-out, opacity 2s ease-in-out;
    z-index: 11 !important; /* Asegurar que esté por encima durante la animación */
}

.crescendo-in {
    transform: scale(1.5); /* Iniciar grande */
    opacity: 0; /* Iniciar desvanecido */
    visibility: visible !important;
    transition: transform 2s ease-in-out, opacity 2s ease-in-out;
    z-index: 10; /* Asegurar que esté al frente al iniciar la animación */
}

.tutti {
    visibility: hidden !important;
    z-index: 1 !important;
}

article {
    width: 600px;
    height: 900px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    text-align: center;
    transition: background-color 0.5s ease-in-out;
    overflow: hidden;
}

article img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* Colores de fondo para cada ARTÍCULO (cuadro) - Se mantiene igual */
section:nth-child(1) article {color: white; } /* Azul */
section:nth-child(2) article {color: black; } /* AliceBlue */
section:nth-child(3) article {color: white; } /* Salmon */
section:nth-child(4) article {color: black; } /* Beige */
section:nth-child(5) article {color: black; } /* LightGreen */
section:nth-child(6) article {color: white; } /* Plum */
section:nth-child(7) article {color: black; } /* Yellow */
section:nth-child(8) article {color: white; } /* Coral */
section:nth-child(9) article {color: black; } /* LightSkyBlue */
section:nth-child(10) article {color: black; } /* Bisque */
section:nth-child(11) article {color: black; } /* LightSalmon */
section:nth-child(12) article {color: white; } /* LightCoral */
section:nth-child(13) article {color: black; } /* LightCyan */
section:nth-child(14) article {color: black; } /* Aquamarine */
section:nth-child(15) article {color: black; } /* PowderBlue */
section:nth-child(16) article {color: black; } /* PaleTurquoise */
section:nth-child(17) article {color: black; } /* LightBlue */
section:nth-child(18) article {color: black; } /* SkyBlue */
section:nth-child(19) article {color: white; } /* CornflowerBlue */
section:nth-child(20) article {color: white; } /* SteelBlue */
section:nth-child(21) article {color: black; } /* MediumTurquoise */
section:nth-child(22) article {color: black; } /* Turquoise */
section:nth-child(23) article {color: white; } /* DarkTurquoise */
section:nth-child(24) article {color: white; } /* DeepSkyBlue */
section:nth-child(25) article {color: white; } /* DodgerBlue */
section:nth-child(26) article {color: white; } /* Blue */

.return-button {
    position: fixed;
    top: 20px;
    left: 20px;
    background-color: #5cb85c;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    cursor: pointer;
    z-index: 110;
}

.breadcrumbs {
    position: fixed;
    top: 20px; /* Ajustaremos esto en la media query para escritorio */
    right: 20px; /* Lo centramos en la media query para escritorio */
    z-index: 1111;
    display: flex;
    gap: 8px;
    align-items: center; /* Centrar verticalmente las migas si es necesario */
}

.breadcrumbs span {
    font-size: 0.8em;
    color: #ccc;
    cursor: pointer;
    transition: font-size 0.3s ease, color 0.3s ease;
    padding: 5px 8px;
    border-radius: 5px;
    white-space: nowrap;
}

.breadcrumbs span.active-crumb {
    font-size: 1em;
    color: #5cb85c;
    font-weight: bold;
}

/* Media query para pantallas más pequeñas (ej. ancho máximo 600px) - Se mantiene igual */
@media (max-width: 600px) {
    .breadcrumbs {
        flex-direction: column;
        left: 20px;
        right: auto;
        top: 20px;
        gap: 4px;
    }

    .breadcrumbs span {
        font-size: 0.7em;
        padding: 4px 6px;
    }

    .breadcrumbs span.active-crumb {
        font-size: 0.9em;
    }
}

/* Media query para pantallas de escritorio (ej. ancho mínimo 601px) */
@media (min-width: 601px) {
    .breadcrumbs {
        top: 20px; /* Puedes ajustar este valor para la separación superior */
        left: 50%; /* Centrar horizontalmente */
        transform: translateX(-50%); /* Ajuste fino para el centrado */
        right: auto; /* Anular el right: 20px */
        flex-direction: row; /* Asegurar disposición horizontal */
    }
}