:root {
    /* --- P (PRIMARIO) - Escala de Oros --- */
    --P600: #a68b5a; /* Oro Profundo */
    --P500: #c9a96e; /* Oro Principal (Acento) */
    --P400: #d8bc8a; /* Oro Suave */
    --P100: #e8d5b0; /* Oro Claro */

    /* --- S (SECUNDARIO) - Escala de Grises --- */
    --S500: #555555; /* Gris Medio */
    --S400: #aaaaaa; /* Gris Claro */
    --S100: #2a2a2a; /* Gris Oscuro / Bordes */

    /* --- T (TERCIARIO) - Escala de Blancos/Cremas --- */
    --T500: #f5f0eb; /* Blanco Hueso Principal */
    --T200: #ffffff; /* Blanco Puro */

    /* --- D (DARK) - Escala de Negros --- */
    --D900: #050505; /* Negro Absoluto (Footer) */
    --D600: #0a0a0a; /* Negro Principal (Body) */
    --D400: #111111; /* Negro Elevación 1 (Secciones) */
    --D200: #1a1a1a; /* Negro Elevación 2 (Tarjetas/Menú) */

    /* --- ASIGNACIONES ESTRUCTURALES --- */
    --oro: var(--P500);
    --oro-claro: var(--P100);
    --acento: var(--P500);
    --negro: var(--D600);
    --negro2: var(--D400);
    --negro3: var(--D200);
    --blanco: var(--T500);
    --gris-claro: var(--S400);
    --gris-med: var(--S500);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

#nosotros, #menu, #contacto, #reservas, #inicio {
    overflow: hidden;
}

html { scroll-behavior: smooth; }

body {
    background: var(--negro);
    color: var(--blanco);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
}

/* ── TIPOGRAFÍA ── */
h1, h2, h3, h4, h5 {
    font-family: 'Cormorant Garamond', serif;
}

.display-serif {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
}

/* ── NAVBAR ── */
.navbar-noir {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 1.2rem 2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

/* NAVBAR AL HACER SCROLL */
.navbar-noir.scrolled {
    background: rgba(10, 10, 10, 0.96);
    backdrop-filter: blur(12px);
    padding: 0.8rem 2rem;
    border-bottom: 1px solid rgba(201, 169, 110, 0.15);
}

.navbar-brand-noir {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--oro) !important;
    text-decoration: none;
}

/* LINKS GENERALES */
.nav-link-noir {
    color: var(--gris-claro) !important;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    padding: .4rem .9rem !important;
    transition: color .3s;
    position: relative;
}

.nav-link-noir::after {
    content: '';
    position: absolute;
    bottom: 0; left: .9rem; right: .9rem;
    height: 1px;
    background: var(--oro);
    transform: scaleX(0);
    transition: transform 0.3s;
}

.nav-link-noir:hover { color: var(--oro) !important; }
.nav-link-noir:hover::after { transform: scaleX(1); }

/* BOTÓN HAMBURGUESA */
.navbar-toggler-noir {
    border: 1px solid rgba(201, 169, 110, 0.4);
    background: none;
    color: var(--oro);
    padding: .3rem .6rem;
    cursor: pointer;
}

/* --- MENÚ MÓVIL FULLSCREEN --- */
.mobile-menu-overlay {
    display: none; /* Se activa con JS */
    position: fixed;
    inset: 0; /* Ocupa 100% de la pantalla */
    width: 100vw;
    height: 100vh;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(15px);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    animation: fadeInNoir 0.4s ease forwards;
}

/* Links más grandes para que sean fáciles de tocar */
.mobile-menu-overlay .nav-link-noir {
    font-size: 1.1rem;
    letter-spacing: 0.3em;
}

/* BOTÓN CERRAR RECTANGULAR */
.btn-close-minimal {
    background: none;
    border: 1px solid rgba(201, 169, 110, 0.4); /* Borde dorado tenue */
    color: var(--oro);
    padding: 0.6rem 2rem; /* Más ancho que alto */
    margin-top: 3rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 0; /* Quitamos lo circular por completo */
}

.btn-close-minimal i {
    font-size: 1rem;
}

.btn-close-minimal:hover {
    background: var(--oro);
    color: #000;
    border-color: var(--oro);
    letter-spacing: 0.4em; /* Efecto sutil de expansión al pasar el mouse */
}
/* Botón cerrar */
.btn-close-noir {
    background: none;
    border: 1px solid rgba(201, 169, 110, 0.3);
    color: var(--oro);
    padding: 0.8rem 1.2rem;
    margin-top: 2rem;
    transition: all 0.3s;
    border-radius: 50px;
}

.btn-close-noir:hover {
    background: var(--oro);
    color: #000;
}

/* Animación de entrada */
@keyframes fadeInNoir {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── HERO ── */
#inicio {
    min-height: 70vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1466978913421-dad2ebd01d17?w=1600&h=900&fit=crop');
    background-size: cover;
    background-position: center;
    filter: brightness(.28);
    transform: scale(1.05);
    animation: heroZoom 12s ease-in-out infinite alternate;
}

@keyframes heroZoom {
    from { transform: scale(1.05); }
    to   { transform: scale(1.12); }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,.1) 50%, rgba(10,10,10,.7) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-label {
    font-size: .65rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--oro);
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeUp .8s .3s forwards;
}

.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.5rem, 8vw, 7rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1;
    color: var(--blanco);
    opacity: 0;
    animation: fadeUp .9s .5s forwards;
}
.hero-title span { color: var(--oro); }

.hero-sub {
    font-size: .82rem;
    font-weight: 300;
    letter-spacing: .15em;
    color: var(--gris-claro);
    max-width: 480px;
    line-height: 1.9;
    opacity: 0;
    animation: fadeUp .9s .7s forwards;
}

.hero-divider {
    width: 60px;
    height: 1px;
    background: var(--oro);
    margin: 1.8rem 0;
    opacity: 0;
    animation: fadeUp .9s .9s forwards;
}

.btn-oro {
    background: transparent;
    border: 1px solid var(--oro);
    color: var(--oro);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .25em;
    text-transform: uppercase;
    padding: .9rem 2.2rem;
    text-decoration: none;
    transition: background .3s, color .3s;
    display: inline-block;
}

.btn-oro:hover {
    background: var(--oro);
    color: var(--negro);
}

.btn-ghost {
    background: transparent;
    border: 1px solid rgba(245,240,235,.25);
    color: var(--blanco);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .25em;
    text-transform: uppercase;
    padding: .9rem 2.2rem;
    text-decoration: none;
    transition: border-color .3s, color .3s;
    display: inline-block;
}

.btn-ghost:hover {
    border-color: var(--blanco);
    color: var(--blanco);
}

.hero-btns {
    opacity: 0;
    animation: fadeUp .9s 1.1s forwards;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

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

/* ── SECCIÓN HISTORIA ── */
#nosotros {
    background: var(--negro2);
    padding: 7rem 0;
}

.section-label {
    font-size: .62rem;
    letter-spacing: .45em;
    text-transform: uppercase;
    color: var(--oro);
    margin-bottom: 1rem;
}

.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.15;
    color: var(--blanco);
}

.section-divider {
    width: 40px;
    height: 1px;
    background: var(--oro);
    margin: 1.5rem 0;
}

.historia-text {
    font-size: .87rem;
    line-height: 2;
    color: var(--gris-claro);
}

.stat-box {
    border-top: 1px solid rgba(201,169,110,.25);
    padding-top: 1.5rem;
}

.stat-numero {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3rem;
    font-weight: 300;
    color: var(--oro);
    line-height: 1;
}

.stat-label {
    font-size: .65rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gris-claro);
    margin-top: .4rem;
}

.galeria-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 220px;
    gap: 4px;
}

.galeria-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.75) grayscale(.2);
    transition: filter .5s, transform .5s;
    display: block;
}

.galeria-grid img:hover {
    filter: brightness(.9) grayscale(0);
    transform: scale(1.02);
}

.galeria-grid .item-grande {
    grid-row: 1 / 3;
}

/* ── MENÚ ── */
#menu {
    background: var(--negro3);
    padding: 7rem 0;
}

.menu-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(201,169,110,.2);
    margin-bottom: 3.5rem;
    overflow-x: auto;
}
.menu-tabs::-webkit-scrollbar {
    display: none;
}

.menu-tab {
    background: none;
    border: none;
    color: var(--gris-claro);
    font-family: 'Montserrat', sans-serif;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .25em;
    text-transform: uppercase;
    padding: .9rem 1.8rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .3s, border-color .3s;
    white-space: nowrap;
}

.menu-tab.active, .menu-tab:hover {
    color: var(--oro);
    border-bottom-color: var(--oro);
}

.plato-card {
    display: flex;
    gap: 1.8rem;
    padding: 2rem 1.8rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: background .3s;
}

.plato-card:last-child { border-bottom: none; }
.plato-card:hover { background: rgba(201,169,110,.04); }

.plato-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    flex-shrink: 0;
    filter: grayscale(.2) brightness(.8);
    transition: filter .4s;
}

.plato-card:hover .plato-img { filter: grayscale(0) brightness(1); }

.plato-info { flex: 1; }

.plato-nombre {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--blanco);
}

.plato-desc {
    font-size: .77rem;
    color: var(--gris-claro);
    line-height: 1.7;
    margin-top: .3rem;
}

.plato-rating {
    font-size: .72rem;
    color: var(--oro);
    margin-top: .4rem;
}

.plato-precio {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--oro);
    white-space: nowrap;
    align-self: center;
}

/* ── INSTAGRAM ── */
#instagram {
    background-color: var(--D900); /* Un tono más oscuro que el resto */
    overflow: hidden;
    padding-bottom: 5rem;
}

.insta-link {
    font-size: .75rem;
    letter-spacing: .2em;
    color: var(--P500); /* Color oro */
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 0.3s;
}

.insta-link:hover {
    opacity: 0.7;
    color: var(--P400);
}

.insta-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* Asegura que siempre sean cuadradas */
    border-radius: 4px; /* Un toque sutil de suavidad */
}

.insta-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    filter: grayscale(30%); /* Efecto visual noir */
}

.insta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    color: var(--P500);
    font-size: 1.5rem;
}

.insta-item:hover img {
    transform: scale(1.1);
    filter: grayscale(0%);
}

.insta-item:hover .insta-overlay {
    opacity: 1;
}

/* ── RESERVAS ── */
#reservas {
    background: var(--negro2);
    padding: 7rem 0;
}

.form-noir {
    background: var(--negro3);
    border: 1px solid rgba(201,169,110,.12);
    padding: 3rem;
}

.form-noir .form-label {
    font-size: .65rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gris-claro);
    margin-bottom: .5rem;
}

.form-noir .form-control,
.form-noir .form-select {
    background: var(--negro);
    border: 1px solid rgba(201,169,110,.2);
    color: var(--blanco);
    border-radius: 0;
    padding: .75rem 1rem;
    font-family: 'Montserrat', sans-serif;
    font-size: .82rem;
    font-weight: 300;
    transition: border-color .3s;
}

.form-noir .form-control:focus,
.form-noir .form-select:focus {
    background: var(--negro);
    border-color: var(--oro);
    color: var(--blanco);
    box-shadow: none;
}

.form-noir .form-control::placeholder { color: var(--gris-med); }
.form-noir .form-select option { background: var(--negro2); }

.btn-reservar {
    background: var(--oro);
    border: none;
    color: var(--negro);
    font-family: 'Montserrat', sans-serif;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    padding: 1rem 2.5rem;
    cursor: pointer;
    border-radius: 0;
    transition: background .3s, color .3s;
}

.btn-reservar:hover {
    background: var(--oro-claro);
    color: var(--negro);
}

/* ── MAPA / CONTACTO ── */
#contacto {
    background: var(--negro3);
    padding: 7rem 0;
}

.contacto-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.contacto-icon {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(201,169,110,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--oro);
    font-size: .95rem;
}

.contacto-info-label {
    font-size: .62rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gris-med);
    margin-bottom: .2rem;
}

.contacto-info-val {
    font-size: .88rem;
    color: var(--blanco);
}

.contacto-info-val a {
    color: var(--blanco);
    text-decoration: none;
    transition: color .3s;
}

.contacto-info-val a:hover { color: var(--oro); }

.redes-contacto a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid rgba(201,169,110,.25);
    color: var(--gris-claro);
    font-size: .95rem;
    text-decoration: none;
    margin-right: .5rem;
    transition: border-color .3s, color .3s;
}

.redes-contacto a:hover {
    border-color: var(--oro);
    color: var(--oro);
}

.mapa-wrapper {
    width: 100%;
    height: 400px;
    filter: grayscale(1) brightness(.7) contrast(1.1);
    border: 1px solid rgba(201,169,110,.1);
    overflow: hidden;
}

.mapa-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ── FOOTER ── */
footer {
    background: var(--D900);
    border-top: 1px solid rgba(201,169,110,.15);
}

.footer-brand {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--oro);
}

.footer-text {
    font-size: .8rem;
    color: var(--gris-claro);
    line-height: 1.8;
}

.footer-heading {
    font-size: .65rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--oro);
    margin-bottom: 1.2rem;
}

.footer-link {
    display: block;
    font-size: .82rem;
    color: var(--gris-claro);
    text-decoration: none;
    margin-bottom: .5rem;
    transition: color .3s;
}

.footer-link:hover { color: var(--oro); }

.footer-contact-item {
    font-size: .82rem;
    color: var(--gris-claro);
    margin-bottom: .4rem;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 1.2rem 0;
    font-size: .75rem;
    color: var(--gris-med);
    text-align: center;
}

.footer-bottom a {
    color: var(--oro);
    text-decoration: none;
}

/* Link Damian Coria */
#link-footer {
    color: var(--P500);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    position: relative;
    display: inline-block;
    padding-bottom: 2px; /* Espacio para que el subrayado no toque la letra */
}

#link-footer:hover {
    color: var(--P500);
    /* Brillo sutil en el texto al pasar el mouse */
    text-shadow: 0 0 12px rgba(201, 169, 110, 0.4); 
}

#link-footer::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1.5px; /* Un poco más de presencia */
    bottom: 0;
    left: 0;
    background-color: var(--P500);
    /* Sombra en la línea para que parezca que brilla */
    box-shadow: 0 0 8px rgba(201, 169, 110, 0.6); 
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#link-footer:hover::after {
    width: 100%;
}

/* ── ALERTAS ── */
.alert-noir {
    background: rgba(201,169,110,.08);
    border: 1px solid rgba(201,169,110,.3);
    color: var(--oro);
    border-radius: 0;
    font-size: .82rem;
    letter-spacing: .05em;
}

/* ── HELPERS ── */
.texto-oro { color: var(--oro); }
.texto-gris { color: var(--gris-claro); }

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
    .insta-grid { grid-template-columns: repeat(2, 1fr); }
    .galeria-grid { grid-template-columns: 1fr 1fr; }
    .galeria-grid .item-grande { grid-row: auto; }
}

@media (max-width: 576px) {
    .form-noir { padding: 2rem 1.5rem; }
    .hero-btns { flex-direction: column; }
}

/* --- ANIMACIONES DE SCROLL --- */

/* Estado inicial: Invisible y desplazado */
.scroll-animate, .scroll-animate-left, .scroll-animate-right, .scroll-animate-scale, .scroll-animate-top {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.scroll-animate { transform: translateY(30px); }
.scroll-animate-left { transform: translateX(-50px); }
.scroll-animate-right { transform: translateX(50px); }
.scroll-animate-scale { transform: scale(0.9); }
.scroll-animate-top {transform: translateY(-30px); }

/* Estado final: Visible y en su posición original */
.animate-in {
    opacity: 1 !important;
    transform: translate(0) scale(1) !important;
}

/* Delay opcional para elementos en cascada */
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }