.font-headline { font-family: 'Great Vibes', cursive; }
.font-body { font-family: 'Open Sans', sans-serif; }
.font-subheadline { font-family: 'Playfair Display', serif; }

/* Beige/Dorado */
.bg-gold-50 { background-color: #fefdf8; }
.bg-gold-100 { background-color: #fefcf0; }
.bg-gold-200 { background-color: #fef7cd; }
.bg-gold-300 { background-color: #fde68a; }
.bg-gold-400 { background-color: #f59e0b; }
.bg-gold-500 { background-color: #d97706; }
.bg-gold-600 { background-color: #b45309; }
.bg-gold-700 { background-color: #92400e; }
.bg-gold-800 { background-color: #78350f; }

.text-gold-50 { color: #fefdf8; }
.text-gold-100 { color: #fefcf0; }
.text-gold-200 { color: #fef7cd; }
.text-gold-300 { color: #fde68a; }
.text-gold-400 { color: #f59e0b; }
.text-gold-500 { color: #d97706; }
.text-gold-600 { color: #b45309; }
.text-gold-700 { color: #92400e; }
.text-gold-800 { color: #78350f; }

.border-gold-400 { border-color: #f59e0b; }
.border-gold-500 { border-color: #d97706; }
.hover\:bg-gold-600:hover { background-color: #b45309; }
.hover\:text-gold-600:hover { color: #b45309; }
.focus\:ring-gold-400:focus { --tw-ring-color: #f59e0b; }

/* Animaciones */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fadeIn { animation: fadeIn 1s ease-out forwards; }
@keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.animate-scaleIn { animation: scaleIn 0.8s ease-out forwards; }

.parallax-bg { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

/* Carousel Slide Smooth Transition */
#carousel-container .slide {
    transition: opacity 1.5s ease-in-out;
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes extra space below images */
}

.active-tab {
    background-color: #b9722a;
    color: #fff !important;
    box-shadow: 0 2px 8px #f3e7d3;
}
.logo-base {
    height: 4rem;  /* mobile */
    width: 4rem;
}
@media (min-width: 768px) {
    .logo-base { height: 5rem; width: 5rem; }
}

/* Quienes somos */
/* Ancho total = 4 imágenes ⇒ 400 % */
/* #carrusel-yeseli{animation:desplazamiento 24s infinite linear;} */

/* ========================================================================
1) Cada “slide” (envoltorio del <img>) ocupa 100 % del ancho del carrusel
y centra la imagen dentro, recortando solo si rebasa vertical u horizontal.
======================================================================== */
.slide {
flex: 0 0 100%;         /* Cada slide mide exactamente el 100 % del ancho del contenedor padre */
height: 100%;           /* La altura se hereda del padre (#carrusel-yeseli) */
display: flex;          /* Para centrar la <img> vertical y horizontal */
justify-content: center;
align-items: center;
overflow: hidden;       /* Si la imagen es más ancha/alta, recorta los bordes */
}

/* ========================================================================
2) La <img> dentro del slide:
    - Ocupa 100 % de la altura disponible del slide.
    - Mantiene proporción (sin deformar), gracias a object-fit: contain.
    - Nunca se estira más allá de su aspecto original; si su proporción es
        distinta, se mostrará centrada y podrán verse franjas vacías a los lados.
======================================================================== */
.foto-carrusel {
height: 100%;              /* Siempre llena el alto del slide */
width: 100%;               /* Ocupa el ancho completo del slide */
object-fit: contain;       /* Asegura que la imagen completa quepa dentro, sin recorte */
object-position: center;   /* Centra la imagen en caso de dejar franjas vacías */
}

/* ========================================================================
3) Contenedor principal del carrusel (4 slides en fila, con animación):
======================================================================== */
#carrusel-yeseli {
display: flex;
height: 100%;            /* Rellena el 100 % de altura que tenga #foto-wrapper */
width: 400%;             /* 4 slides × 100 % ancho cada uno */
animation: desplazamiento 24s linear infinite;
}

@keyframes desplazamiento {
0%   { transform: translateX(0); }
20%  { transform: translateX(0); }       /* Pausa en 1ª imagen */
25%  { transform: translateX(-100%); }
45%  { transform: translateX(-100%); }   /* Pausa en 2ª */
50%  { transform: translateX(-200%); }
70%  { transform: translateX(-200%); }   /* Pausa en 3ª */
75%  { transform: translateX(-300%); }
95%  { transform: translateX(-300%); }   /* Pausa en 4ª */
100% { transform: translateX(0); }       /* Vuelve al inicio */
}

/* ========================================================================
4) Wrapper que envuelve todo el carrusel (.photo-wrapper):
    - Centra verticalmente el slide activo.
    - No le ponemos altura aquí (la fija JS en desktop; en móvil será auto).
======================================================================== */
.photo-wrapper {
display: flex;
justify-content: center;
align-items: center;  /* Centra la .slide verticalmente */
overflow: hidden;     /* Recorta lo que pase de los bordes */
}

/* ========================================================================
5) MEDIA QUERY para MÓVIL (<768px):
    - Desactiva alturas 100 % y animación: el carrusel se mostrará en bloque
        y cada imagen tomará su propio alto natural, evitando huecos debajo.
======================================================================== */
@media (max-width: 767px) {
    /* El wrapper de la foto vuelve a “auto” y no hereda ninguna altura forzada */
    #foto-wrapper {
        height: auto !important;
    }
    /* El carrusel deja de tener height:100% y deja de desplazar horizontalmente */
    #carrusel-yeseli {
        height: auto !important;
        width: auto !important;
        animation: none !important;        /* Pausa la animación en móvil */
        display: block;                     /* Para que las .slide apilen verticalmente */
    }
    /* Cada “slide” ocupa su propio contenido; ya no forzamos 100% de altura */
    .slide {
        height: auto !important;
        flex: 0 0 auto !important;         /* Evita que trate de forzar ancho fijo */
        margin-bottom: 1rem;               /* Espacio opcional entre fotos */
    }
    /* La <img> rellena ancho completo y deja su altura automática */
    .foto-carrusel {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}
/* Clase que oculta el elemento en pantallas <768px y muestra en ≥768px */
.ocultar-sm {
    display: none;
}

@media (min-width: 768px) {
    .ocultar-sm {
        display: block;
    }
}

/* SOLUCIÓN: Clase faltante y estilos reforzados */
.bg-gold-800 { background-color: #78350f; }

#mobile-menu {
    background-color: #78350f !important;
    background: #78350f !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#mobile-menu.-translate-y-full {
    visibility: hidden;
}

#mobile-menu:not(.-translate-y-full) {
    visibility: visible;
}

#mobile-menu a,
#mobile-menu button {
    color: #fef7cd !important;
}

#mobile-menu button {
    border-color: #f59e0b !important;
}