body {
font-family: 'Quicksand', sans-serif;
background-color: #FDFBF7;
margin: 0;
overflow-x: hidden;
display: flex;
flex-direction: column;
min-height: 100vh;
}

.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
}

.screen {
display: none;
flex-direction: column;
flex-grow: 1;
width: 100%;
background-color: #FDFBF7;
animation: fadeIn 0.4s ease-out forwards;
}
.screen.active { display: flex; }

@keyframes fadeIn {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}

.bg-wood {
background-color: #8B5A2B;
background-image: 
linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;
}

.curved-header {
border-bottom-left-radius: 50% 20%;
border-bottom-right-radius: 50% 20%;
}

/* Animación general para modales */
.modal-overlay.open {
display: flex !important;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
animation: fadeInModal 0.3s ease-out forwards;
}

@keyframes fadeInModal {
from { opacity: 0; }
to { opacity: 1; }
}

.modal-content {
transform: scale(0.95);
transition: transform 0.3s ease-out;
}

.modal-overlay.open .modal-content {
transform: scale(1);
}

.star-rating i { transition: color 0.2s, transform 0.1s; }
.star-rating i:hover { transform: scale(1.1); }

/* ==================== FOTOTECA INICIO ==================== */
.fototeca {
    width: 100%;
    max-width: 1100px;
    margin: 30px auto 10px;
    padding: 0 16px 25px;
}

.fototeca-title {
    color: #5C4033;
    font-family: 'Fredoka One', cursive;
    font-size: 1.7rem;
    text-align: center;
    margin-bottom: 14px;
}

.fototeca-visor {
    position: relative;
    width: 100%;
    height: min(52vw, 500px);
    min-height: 260px;
    border-radius: 28px;
    overflow: hidden;
    background: #8B5A2B;
    box-shadow: 0 8px 25px rgba(92,64,51,.16);
    border: 4px solid rgba(51,181,181,.18);
}

.fototeca-imagen {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: 1;
    transform: scale(1);
    transition: opacity .55s ease, transform 1.1s ease;
}

.fototeca-imagen.cambiando {
    opacity: 0;
    transform: scale(1.035);
}

.fototeca-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 70px 28px 22px;
    background: linear-gradient(transparent, rgba(92,64,51,.82));
    color: white;
    pointer-events: none;
}

.fototeca-info h3 {
    font-family: 'Fredoka One', cursive;
    font-size: clamp(1.25rem, 3vw, 2rem);
    margin: 0 0 3px;
}

.fototeca-info span {
    font-size: .82rem;
    font-weight: 700;
    opacity: .92;
}

.fototeca-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    color: #33B5B5;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .25s ease;
}

.fototeca-flecha:hover {
    background: #33B5B5;
    color: white;
    transform: translateY(-50%) scale(1.08);
}

.fototeca-anterior { left: 16px; }
.fototeca-siguiente { right: 16px; }

.fototeca-controles {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 15px 0;
}

.fototeca-indicadores {
    display: flex;
    justify-content: center;
    gap: 7px;
}

.fototeca-indicador {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 99px;
    padding: 0;
    background: #D7C9C2;
    cursor: pointer;
    transition: .3s ease;
}

.fototeca-indicador.activo {
    width: 25px;
    background: #33B5B5;
}

@media (max-width: 768px) {
    .fototeca {
        margin-top: 20px;
    }

    .fototeca-visor {
        height: 55vw;
        min-height: 240px;
        border-radius: 22px;
    }

    .fototeca-flecha {
        width: 42px;
        height: 42px;
    }

    .fototeca-anterior { left: 10px; }
    .fototeca-siguiente { right: 10px; }
}

@media (max-width: 480px) {
    .fototeca {
        padding-left: 12px;
        padding-right: 12px;
    }

    .fototeca-visor {
        height: 58vw;
        min-height: 220px;
    }

    .fototeca-info {
        padding: 55px 18px 16px;
    }

    .fototeca-flecha {
        width: 36px;
        height: 36px;
    }
}