:root {
    --primary-color: #B28B4B; /* Dorado premium para botones y bordes */
    --primary-dark: #8c6d3a; /* Tono más oscuro para el efecto 3D del botón */
    --primary-light: rgba(178, 139, 75, 0.3); /* Transparencia del dorado para brillos */
    --bg-black: #111216; /* Negro de tu paleta */
    --text-ivory: #F6F0E6; /* Marfil de tu paleta */
}

html {
    scroll-behavior: smooth; /* Hace que el menú se deslice elegantemente al hacer clic */
}

body {
    margin:0;
    font-family: 'Jost', sans-serif;
    background-color: var(--bg-black); /* Negro absoluto de base */
    background-image: radial-gradient(circle at 50% 0%, var(--primary-light) 0%, transparent 60%); /* La luz cinematográfica */
    background-attachment: fixed; /* Mantiene la luz flotando en la pantalla al hacer scroll */
    color: var(--text-ivory); /* Blanco suave, cansa menos la vista que el blanco puro */
    line-height: 1.7; /* Más aire entre líneas para descansar la vista */
    font-weight: 400; /* Evita que la letra sea demasiado delgada */
    font-size: 16px; /* Tamaño base estándar de lectura cómoda */
}

/* =========================================
   DETALLES DE LUJO (SCROLL Y SELECCIÓN)
========================================= */
::selection {
    background: var(--primary-color);
    color: #000;
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-black);
}
::-webkit-scrollbar-thumb {
    background: var(--primary-dark);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

h1,h2,h3 {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    letter-spacing: 3px; /* Un poco más de espacio en las letras las hace ver más costosas */
    text-transform: uppercase; /* Los títulos de lujo suelen ir en mayúsculas */
    color: var(--text-ivory);
    margin-bottom: 15px;
}

.main-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 10px 40px; /* Más delgada para mayor elegancia */
    max-width: 1200px; /* No topa con los bordes, se mantiene contenida */
    margin: 20px auto; /* Flota centrada con espacio arriba */
    background: rgba(17, 18, 22, 0.6); /* Cristal basado en tu Negro */
    backdrop-filter: blur(20px) saturate(120%); 
    -webkit-backdrop-filter: blur(20px) saturate(120%); 
    border: 1px solid var(--primary-light); /* Borde de la píldora */
    border-radius: 2px; /* Alineado a la arquitectura de lujo (Recto con micro-borde) */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); /* Sombra profunda para que flote de verdad */
    position: sticky; 
    top: 20px; /* Se queda flotando a 20px del techo al hacer scroll */
    z-index: 1000; 
}

.main-header img {
    height: 70px; /* Antes estaba en 45px. Ajusta este valor si lo quieres aún más grande */
}

.menu a {
    color: var(--text-ivory);
    margin:0 15px;
    text-decoration:none;
    font-weight:500;
    font-size: 18px; /* Aumentamos el tamaño para equilibrar con el logo */
    letter-spacing: 1px; /* Un toque de espacio da más elegancia */
    transition: color 0.3s ease;
}

.menu a:hover {
    color: var(--primary-color); /* Las letras se pintan de dorado al pasar el mouse */
}

.btn-gold {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #000;
    padding: 12px 28px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 15px; /* Ligeramente más grande para hacer juego con el menú */
    border-radius: 2px; /* Bordes ligeramente afilados son más elegantes */
    border: 1px solid var(--primary-color);
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px var(--primary-light);
}

.btn-gold:hover {
    background: transparent; /* Efecto fantasma al pasar el mouse */
    color: var(--primary-color);
    box-shadow: 0 6px 20px var(--primary-light);
    transform: translateY(-2px);
}

.hero {
    position:relative;
}

.hero-img {
    width:100%;
    height:90vh;
    object-fit:cover;
    opacity:0.6;
}

.hero-overlay {
    position:absolute;
    top:80%; /* Antes 75%. Sigue aumentando para bajarlo más */
    left:33%; /* Movido 2 puntos a la izquierda desde el centro (50%) */
    transform:translate(-50%,-50%);
    text-align:center;
}

/* =========================================
   BANNER ANIMADO DE SANTUARIOS (MARQUEE)
========================================= */
.marquee-container {
    display: flex;
    overflow: hidden;
    background: #0c0d10; /* Fondo súper oscuro premium */
    border-top: 1px solid var(--primary-light);
    border-bottom: 1px solid var(--primary-light);
    padding: 15px 0;
    white-space: nowrap;
    user-select: none; /* Evita que el usuario seleccione el texto por accidente */
}

.marquee-content {
    display: flex;
    flex-shrink: 0;
    animation: marquee-scroll 35s linear infinite; /* 35s es la velocidad. Aumenta para más lento */
}

.marquee-item {
    font-family: 'Cinzel', serif;
    color: var(--primary-color);
    font-size: 16px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 40px; /* Espacio entre cada santuario */
    display: flex;
    align-items: center;
}

.marquee-item::before {
    content: '✦'; /* Diamante dorado separador */
    font-size: 12px;
    margin-right: 40px;
    color: var(--primary-light);
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.intro {
    padding:80px 20px;
    text-align:center;
}

.section-dark {
    padding:80px 40px;
    background: var(--bg-black); /* Volvemos al negro limpio y absoluto para dar elegancia */
    text-align:center;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Fuerza 3 columnas exactas en computadora */
    gap: 40px;
    margin: 40px auto 0;
    max-width: 1200px; /* Mantiene un ancho premium y no se estira al infinito en pantallas gigantes */
}

.card-gold {
    background: var(--bg-black); /* Regresamos al fondo negro limpio */
    padding:20px;
    border: 1px solid var(--primary-light); /* Hilo de oro súper sutil y elegante */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición aún más suave y lujosa */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 0 transparent; /* Preparado para el brillo interno */
}

.card-gold:hover {
    transform: translateY(-10px);
    border: 1px solid var(--primary-color); /* El marco se enciende en oro vivo al pasar el mouse */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.9), 0 0 40px var(--primary-light), inset 0 0 80px var(--primary-light); /* Aura externa + Fondo iluminado internamente */
}

.card-gold img {
    width:100%;
    height:300px;
    object-fit:cover;
    margin-bottom:15px;
}

/* Resalta las palabras de valor en las descripciones con oro y elegancia */
.card-gold p strong {
    color: var(--primary-color);
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* =========================================
   TARJETAS SIGNATURE (PRODUCTO ESTRELLA)
========================================= */
.card-signature {
    border: 1px solid var(--primary-color);
    background: linear-gradient(180deg, rgba(178, 139, 75, 0.05) 0%, var(--bg-black) 100%);
    position: relative;
}
.card-signature:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.9), 0 0 40px var(--primary-light), inset 0 0 100px rgba(178, 139, 75, 0.2);
}
.card-signature h3 {
    margin-top: 15px; /* Espacio para el broche */
    color: var(--primary-color); /* Título 100% dorado */
}
.signature-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #000;
    padding: 4px 15px;
    font-size: 9px; /* Más pequeño y delicado */
    font-family: 'Cinzel', serif; /* Tipografía romana de lujo */
    text-transform: uppercase;
    letter-spacing: 4px; /* Mucho más aire entre las letras */
    font-weight: 600; /* Menos grueso, más elegante */
    border-radius: 2px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    white-space: nowrap;
}

.service-price {
    color: var(--primary-color);
    font-family: 'Cinzel', serif;
    font-size: 20px;
    font-weight: 700;
    margin: -5px 0 15px 0;
    letter-spacing: 2px;
}

/* =========================================
   ACORDEÓN DE LUJO (EXPERIENCIAS)
========================================= */
.luxury-accordion {
    margin-top: 10px;
}
.luxury-accordion summary {
    color: var(--primary-color);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    list-style: none; /* Oculta la flecha nativa */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    outline: none;
    padding: 0 0 5px 0; /* Agregamos 5px de espacio abajo para la línea */
    border: none;
    border-radius: 0;
    background: transparent; /* Fondo 100% transparente */
    position: relative; /* Necesario para que la línea sepa dónde anclarse */
}
/* La pequeña línea dorada simulando un botón minimalista */
.luxury-accordion summary::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* Esto mantiene la línea perfectamente centrada */
    width: 30px; /* Tamaño de la línea en reposo */
    height: 1px; /* Grosor súper fino y elegante */
    background-color: var(--primary-light);
    transition: all 0.4s ease;
}
.luxury-accordion summary::-webkit-details-marker {
    display: none; /* Oculta la flecha en Safari */
}
.luxury-accordion summary::after {
    content: '+';
    font-size: 16px;
    font-weight: 300;
}
.luxury-accordion[open] summary::after {
    content: '−'; /* Cambia a un signo de menos al abrir */
}
.luxury-accordion summary:hover {
    color: var(--text-ivory);
    background: transparent; /* Sigue siendo transparente */
    transform: translateY(-2px); /* Se levanta sutilmente */
}
/* Animación de la línea al pasar el mouse */
.luxury-accordion summary:hover::before {
    width: 100%; /* La línea se expande para cubrir toda la palabra */
    background-color: var(--primary-color); /* Se enciende en oro brillante */
}
.accordion-content {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed rgba(178, 139, 75, 0.3);
    animation: accordionFadeIn 0.4s ease;
}
@keyframes accordionFadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}


/* =========================================
   SECCIÓN DE VIDEO SENSORIAL
========================================= */
.video-section {
    padding: 80px 20px;
    background: var(--bg-black);
    text-align: center;
    border-bottom: 1px solid var(--primary-color);
}

.video-container {
    max-width: 350px; /* Tamaño ideal para que un video tipo Reel se vea elegante y no gigante */
    margin: 40px auto 0;
    position: relative;
    background: var(--bg-black); /* Regresamos al negro sólido */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    border: 1px solid var(--primary-light);
    border-radius: 15px; /* Bordes ligeramente curvos de lujo */
    overflow: hidden; /* Asegura que el video respete los bordes curvos */
}

/* =========================================
   CARTA DEL FUNDADOR (MANIFIESTO)
========================================= */
.founder-section {
    padding: 100px 20px;
    background: linear-gradient(to bottom, var(--bg-black) 0%, #15161a 50%, var(--bg-black) 100%);
    position: relative;
}

.founder-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    background: rgba(17, 18, 22, 0.8);
    padding: 60px 50px;
    border: 1px solid rgba(178, 139, 75, 0.15);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    position: relative;
}

/* Esquinas decorativas doradas para dar toque de documento de lujo */
.founder-container::before, .founder-container::after {
    content: ''; position: absolute; width: 40px; height: 40px; border: 1px solid var(--primary-color); opacity: 0.5; transition: all 0.5s ease;
}
.founder-container::before { top: -10px; left: -10px; border-right: none; border-bottom: none; }
.founder-container::after { bottom: -10px; right: -10px; border-left: none; border-top: none; }
.founder-container:hover::before { top: -15px; left: -15px; opacity: 1; }
.founder-container:hover::after { bottom: -15px; right: -15px; opacity: 1; }

.founder-title {
    font-size: 26px;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.founder-text {
    font-size: 17px;
    line-height: 1.9;
    color: #d1cbbd;
    margin-bottom: 20px;
}

.founder-signature {
    font-family: 'Alex Brush', cursive;
    font-size: 46px;
    color: var(--text-ivory);
    margin-top: 40px;
    margin-bottom: 5px;
}

.founder-role {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary-color);
}

/* =========================================
   SECCIÓN DE PRODUCTOS (MARCAS)
========================================= */
.brands-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 70px;
    margin-top: 50px;
}

.brand-logo {
    height: 140px; /* Tamaño aumentado para que los logos destaquen con fuerza */
    max-width: 280px; /* Más espacio a los lados para logos que son muy anchos */
    object-fit: contain;
    filter: grayscale(100%) opacity(0.5); /* Se ven como marcas de agua elegantes */
    transition: all 0.5s ease;
}

.brand-logo:hover {
    filter: grayscale(0%) opacity(1); /* Cobran color y vida al pasar el mouse */
    transform: scale(1.05); /* Crecen un poquito */
}

/* =========================================
   SECCIÓN DE SANTUARIOS (NUEVO DISEÑO AMPLIADO)
========================================= */
.locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Tarjetas mucho más anchas para que no se amontonen */
    gap: 40px;
    margin-top: 50px;
}

.branch-card {
    background: var(--bg-black);
    border: 1px solid var(--primary-light);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}

.branch-card:hover {
    transform: translateY(-5px);
    border: 1px solid var(--primary-color);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 20px var(--primary-light);
}

.branch-coming-soon {
    position: relative;
    overflow: hidden;
    opacity: 0.6; /* Apaga un poco la tarjeta */
    pointer-events: none; /* Desactiva los clics en los botones */
    filter: grayscale(70%); /* Le quita un poco de color para que destaque el banner rojo */
}

.coming-soon-banner {
    position: absolute;
    top: 45%;
    left: -10%;
    width: 120%;
    background: #6b0f0f; /* Un rojo vino oscuro premium */
    color: var(--text-ivory);
    text-align: center;
    padding: 10px 0;
    transform: rotate(-10deg); /* Cruza la tarjeta en diagonal */
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 5px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.8);
    border-top: 1px solid #a31c1c;
    border-bottom: 1px solid #a31c1c;
    z-index: 10;
}

.branch-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-bottom: 1px solid var(--primary-light);
}

.branch-info {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

.branch-detail {
    color: #ccc; /* Un gris plata mucho más brillante y fácil de leer */
    font-size: 15px; /* Un punto más grande para los ojos cansados */
    margin: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.branch-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Estilo Minimalista y Premium para los enlaces de sucursales */
.action-separator {
    color: rgba(178, 139, 75, 0.4);
    font-size: 12px;
}

.btn-action-minimal {
    font-size: 14px; /* Aún más grande, botones que se puedan leer sin esfuerzo */
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    color: #ccc; /* Gris plata de alto contraste */
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px; /* Espacio elegante entre el logo y la palabra */
}

.btn-action-minimal i {
    font-size: 16px; /* Hace que el logo resalte un poquitito más que la letra */
}

.btn-action-minimal:hover {
    color: var(--text-ivory);
}

.btn-action-minimal.gold-text {
    color: var(--primary-color);
    font-weight: 600;
}

.btn-action-minimal.gold-text:hover {
    color: var(--text-ivory);
}

/* Línea animada sutil al pasar el mouse */
.btn-action-minimal::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.btn-action-minimal:hover::after {
    width: 100%;
}

.btn-action-gold, .btn-outline {
    padding: 10px 15px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-action-gold {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #000;
    border: 1px solid var(--primary-color);
}

.btn-action-gold:hover {
    background: transparent;
    color: var(--primary-color);
}

.btn-outline {
    border: 1px solid rgba(178, 139, 75, 0.5);
    color: var(--text-ivory);
    background: transparent;
}

.btn-outline:hover {
    border: 1px solid var(--primary-color);
    background: rgba(178, 139, 75, 0.1);
    color: var(--primary-color);
}

/* =========================================
   FOOTER PREMIUM
========================================= */
.footer-premium {
    background: #0c0d10; /* Un negro un poco más profundo que el base */
    padding: 60px 40px 20px 40px;
    margin-top: 80px;
    border-top: 2px solid var(--primary-color);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.8);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto 40px auto;
    text-align: left;
}

.footer-col h4 {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 20px;
    position: relative;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 40px;
    height: 1px;
    background: var(--primary-light);
}

.footer-col p, .footer-col a {
    color: #ccc; /* Footer mucho más brillante */
    text-decoration: none;
    font-size: 14px;
    line-height: 1.8;
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: var(--primary-color);
}

.footer-col .logo-footer {
    height: 75px; /* Un tamaño elegante y más equilibrado */
    margin-bottom: 15px;
    opacity: 0.8;
}

.footer-socials {
    display: flex;
    gap: 20px;
}

.footer-socials a {
    font-size: 24px; /* Tamaño de los emojis */
    text-decoration: none;
    transition: transform 0.3s ease;
}

.footer-socials a:hover {
    transform: scale(1.2);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 12px;
    color: #666;
    letter-spacing: 1px;
}

/* =========================================
   BOTÓN FLOTANTE DE RESERVAS
========================================= */
.floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #000;
    padding: 15px 25px;
    border-radius: 2px; /* Cuadrado con micro-borde, estándar de lujo */
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px var(--primary-light);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.floating-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 25px var(--primary-color);
}

/* =========================================
   MODAL DE RECLUTAMIENTO (VENTANA EMERGENTE)
========================================= */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    background: var(--bg-black);
    border: 1px solid var(--primary-color);
    padding: 40px;
    border-radius: 10px;
    max-width: 400px;
    width: 90%;
    position: relative;
    box-shadow: 0 15px 50px rgba(0,0,0,0.9), inset 0 0 20px rgba(178, 139, 75, 0.1);
}

.close-modal {
    position: absolute;
    top: 15px; right: 20px;
    color: #aaa;
    font-size: 28px;
    cursor: pointer;
    transition: color 0.3s;
}

.close-modal:hover { color: var(--primary-color); }

.job-form .form-group { margin-bottom: 20px; text-align: left; }
.job-form label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--primary-color); margin-bottom: 8px; }
.job-form input {
    width: 100%; padding: 12px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(178, 139, 75, 0.3);
    color: var(--text-ivory); font-family: 'Jost', sans-serif;
    border-radius: 4px; box-sizing: border-box; transition: all 0.3s;
}
.job-form input:focus {
    outline: none; border-color: var(--primary-color); background: rgba(255, 255, 255, 0.1);
}

/* Estilo premium para el botón de subir archivo */
.job-form input[type="file"]::file-selector-button {
    background: var(--primary-color);
    color: #000;
    border: none;
    padding: 8px 15px;
    border-radius: 3px;
    cursor: pointer;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    margin-right: 15px;
    transition: all 0.3s ease;
}
.job-form input[type="file"]::file-selector-button:hover {
    background: var(--text-ivory);
}

/* =========================================
   DISEÑO RESPONSIVO (MÓVILES Y TABLETS)
========================================= */
@media (max-width: 768px) {
    .main-header {
        flex-direction: column; /* Apila el logo y el menú verticalmente */
        padding: 15px;
        gap: 15px;
        margin: 10px; /* Para que también flote bonito en celular */
        border-radius: 2px; /* Borde arquitectónico para móvil */
    }

    .menu {
        display: flex;
        flex-wrap: wrap; /* Permite que los botones del menú bajen de línea si no caben */
        justify-content: center;
        gap: 10px;
    }

    .menu a {
        margin: 0 5px;
        font-size: 14px; /* Reduce un poco el tamaño de la letra del menú */
    }

    .section-dark, .section-light {
        padding: 40px 15px; /* Reduce los márgenes laterales gigantes en móviles */
    }

    .floating-btn {
        bottom: 20px;
        right: 20px;
        padding: 12px 20px;
        font-size: 12px;
    }

    /* Ajustes específicos para móviles */
    .hero::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40%; /* Un degradado más sutil solo en la parte de hasta abajo */
        background: linear-gradient(to bottom, transparent 0%, var(--bg-black) 100%);
        pointer-events: none;
    }

    .hero-img {
        height: auto; /* Deja que la imagen tome su proporción natural */
        object-fit: contain; /* Fuerza a que la foto se muestre completa de lado a lado sin CERO zoom */
    }

    .hero-overlay {
        top: auto; 
        bottom: 10%; /* Lo ancla cerca de la base de la foto sin importar qué tamaño tenga */
        left: 50%; /* Centra el botón en pantallas pequeñas */
        transform: translate(-50%, 0); /* Evita que el botón se desalinee verticalmente */
        width: 90%;
        z-index: 10;
    }

    .locations-grid {
        grid-template-columns: 1fr; /* Fuerza una sola columna y evita desbordamiento horizontal */
    }

    /* Ajuste para que las experiencias salgan en 2 columnas en celular y ahorren scroll */
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px; /* Un poco más cerrado para dar elegancia a las 2 columnas */
    }

    .card-gold {
        padding: 15px 10px; /* Más aire arriba y abajo, ajustado a los lados */
    }

    .card-gold h3 {
        font-size: 19px; /* Títulos más grandes para lectura cómoda */
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    .service-price {
        font-size: 17px; /* Precio más claro y visible */
        margin-bottom: 12px;
        letter-spacing: 1px;
    }

    .card-gold p {
        font-size: 16px; /* Tamaño ultra-cómodo para señores mayores */
        line-height: 1.6;
        color: #e6e6e6; /* Contraste aún más brillante para que el ojo descanse más */
    }

    .founder-container {
        padding: 40px 20px; /* Reduce el espacio interno para que el texto respire */
    }

    .modal-content {
        padding: 30px 20px; /* Adapta el formulario de empleo a pantallas angostas */
    }

    .brand-logo {
        height: 100px; /* Logos ligeramente más pequeños en celular para que quepan bien */
    }
}

/* =========================================
   INPUTS PREMIUM (RESERVAS)
========================================= */
.booking-input {
    width: 100%;
    padding: 15px;
    background: #1a1c23;
    border: 1px solid #333;
    color: var(--text-ivory);
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    margin-bottom: 15px;
}
.booking-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(178, 139, 75, 0.05);
}

/* Imágenes dentro de los botones de reserva */
.option-card-img {
    width: calc(100% + 40px); /* Compensa el padding de la tarjeta */
    margin: -20px -20px 15px -20px;
    height: 120px;
    object-fit: cover;
    border-bottom: 1px solid #333;
    transition: all 0.3s ease;
    border-radius: 8px 8px 0 0;
}

.option-card.selected .option-card-img {
    border-bottom-color: var(--primary-color);
    opacity: 0.8;
}

/* Ticket de Resumen Premium */
.summary-card {
    background: rgba(17, 18, 22, 0.9);
    border: 1px solid var(--primary-light);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
    text-align: left;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
    padding-bottom: 8px;
    font-size: 14px;
    color: #ccc;
}

/* =========================================
   ANIMACIONES DE SCROLL (FADE IN MAGICO)
========================================= */
.reveal {
    opacity: 0;
    transform: translateY(40px); /* Empieza un poco más abajo */
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); /* Transición súper suave y fluida */
}
.reveal.active {
    opacity: 1;
    transform: translateY(0); /* Sube a su posición original */
}