@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600&family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&display=swap');

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

:root {
    --white: #ffffff;
    --warm-white: #faf8f5;
    --cream: #f5f0e8;
    --cream-dark: #ebe3d5;
    --stone: #e8e2d8;
    --sand: #d9cebe;
    --brown: #5c4332;
    --brown-dark: #3e2a1e;
    --terracotta: #c67b4e;
    --terracotta-dark: #a85a30;
    --rust: #8b4513;
    --ochre: #d4a843;
    --gold: #b8942e;
    --ink: #1a1a1a;
    --ink-light: #3d3d3d;
    --gray: #6b6b6b;
    --gray-light: #a0a0a0;
    --gray-ultra: #f0ede8;
    --radius: 2px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.1);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; background: var(--white); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--warm-white); }
::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--terracotta); }

body {
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 350; font-size: 1rem;
    color: var(--ink-light);
    background: var(--white);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    max-width: 100vw;
}

/* ═══════ PROGRESS + BTT ═══════ */
#progress-bar {
    position: fixed; top: 0; left: 0; height: 3px;
    background: var(--terracotta); z-index: 9999;
    transition: width 0.1s linear;
}
#back-to-top {
    position: fixed; bottom: 2rem; right: 2rem; z-index: 999;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--white); border: 1px solid var(--stone);
    color: var(--brown); font-size: 1rem; cursor: pointer;
    opacity: 0; transform: translateY(16px);
    transition: all 0.4s var(--ease); pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
}
#back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#back-to-top:hover { border-color: var(--terracotta); color: var(--terracotta); box-shadow: var(--shadow-md); }

/* ═══════ NAV ═══════ */
nav {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--stone);
    transition: all 0.4s var(--ease);
}
nav .inner {
    max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 2.5rem; height: 68px;
    transition: height 0.4s var(--ease);
}
nav.scrolled .inner { height: 54px; }
nav .logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem; font-weight: 600;
    color: var(--brown); letter-spacing: 3px;
    text-decoration: none; transition: color 0.3s;
    display: flex; align-items: center; gap: 0.6rem;
    text-transform: none;
}
nav .logo img { height: 52px; width: auto; display: block; image-rendering: auto; }
nav .logo:hover { color: var(--terracotta); }
nav ul { display: flex; list-style: none; gap: 2.5rem; align-items: center; }
nav a {
    color: var(--gray); text-decoration: none;
    font-size: 0.7rem; font-weight: 550; letter-spacing: 1.8px;
    text-transform: uppercase; transition: color 0.3s;
    position: relative; padding-bottom: 3px;
}
nav a::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 0; height: 1.5px; background: var(--terracotta);
    transition: width 0.35s var(--ease);
}
nav a:hover, nav a.active { color: var(--brown); }
nav a:hover::after, nav a.active::after { width: 100%; }

.menu-toggle {
    display: none; background: none; border: none;
    color: var(--brown); font-size: 1.8rem; cursor: pointer;
    padding: 0.5rem; line-height: 1;
    -webkit-tap-highlight-color: transparent;
    z-index: 1001; position: relative;
}

/* ═══════ HERO ═══════ */
.hero {
    min-height: 100vh; display: flex; align-items: center;
    position: relative; overflow: hidden;
}
.hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background: url('../img/hero_bg.webp') center/cover no-repeat;
    filter: brightness(0.95) saturate(0.8);
}
.hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(250,248,245,0.6) 60%, rgba(255,255,255,0.4) 100%);
}
.hero-content {
    position: relative; z-index: 2; max-width: 720px;
    padding: 4rem 2.5rem; margin-left: 8vw;
    animation: heroIn 1.2s var(--ease-smooth);
}
@keyframes heroIn { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.hero-content .eyebrow {
    font-size: 0.65rem; font-weight: 600;
    letter-spacing: 5px; text-transform: uppercase;
    color: var(--terracotta); margin-bottom: 1.5rem; display: block;
}
.hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    font-weight: 700; color: var(--brown-dark);
    line-height: 1.08; letter-spacing: -1px;
    margin-bottom: 1.2rem;
}
.hero-content h1 em {
    font-style: italic; font-weight: 400;
    display: block; font-size: 0.5em;
    color: var(--terracotta); letter-spacing: 2px;
    margin-top: 0.4rem;
}
.hero-content .subtitle {
    font-size: 1.05rem; color: var(--ink-light);
    margin-bottom: 2.5rem; line-height: 1.6; max-width: 500px;
    font-family: 'Cormorant Garamond', serif; font-size: 1.2rem;
}
.hero-content .btn-hero {
    display: inline-flex; align-items: center; gap: 0.8rem;
    padding: 0.9rem 2.2rem;
    background: var(--brown-dark); color: var(--white);
    text-decoration: none; font-size: 0.7rem; font-weight: 550;
    letter-spacing: 2.5px; text-transform: uppercase;
    transition: all 0.35s var(--ease);
}
.hero-content .btn-hero:hover {
    background: var(--terracotta);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(198,123,78,0.3);
}
.scroll-indicator {
    position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%);
    z-index: 2; text-align: center; animation: bounce 2s infinite;
}
.scroll-indicator span { display: block; color: var(--brown); font-size: 1.2rem; }
.scroll-indicator .line {
    width: 1px; height: 32px; margin: 0.4rem auto 0;
    background: linear-gradient(to bottom, var(--brown), transparent);
}
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* ═══════ PAGE HEADER ═══════ */
.page-header {
    padding: 10rem 2rem 4rem;
    background: var(--warm-white);
    text-align: center; border-bottom: 1px solid var(--stone);
}
.page-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 700; color: var(--brown-dark);
    letter-spacing: -0.5px;
    animation: heroIn 0.8s var(--ease-smooth);
}
.page-header p {
    color: var(--terracotta); font-size: 1.05rem;
    margin-top: 0.6rem; font-style: italic;
    font-family: 'Cormorant Garamond', serif;
    animation: heroIn 0.8s 0.15s var(--ease-smooth) both;
}

/* ═══════ BACKGROUND EFFECTS ═══════ */
.bg-grain {
    position: relative;
}
.bg-grain::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    background-repeat: repeat; background-size: 200px 200px;
}

.bg-blobs { position: relative; overflow: hidden; }
.bg-blobs::before,
.bg-blobs::after {
    content: ''; position: absolute; border-radius: 50%; z-index: 0; pointer-events: none;
    opacity: 0.06; filter: blur(120px);
}
.bg-blobs::before {
    width: 600px; height: 600px;
    background: var(--terracotta);
    top: -200px; right: -150px;
    animation: blobFloat 20s ease-in-out infinite;
}
.bg-blobs::after {
    width: 500px; height: 500px;
    background: var(--ochre);
    bottom: -150px; left: -100px;
    animation: blobFloat 25s ease-in-out infinite reverse;
}
@keyframes blobFloat {
    0%,100% { transform: translate(0,0) scale(1); }
    25% { transform: translate(60px,-40px) scale(1.15); }
    50% { transform: translate(-20px,30px) scale(0.9); }
    75% { transform: translate(-50px,-20px) scale(1.1); }
}

.bg-dots {
    background-image: radial-gradient(circle, var(--sand) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* ═══════════════════════════════════════
   5 EFECTOS DE FONDO DISTINTOS POR SALA
   ═══════════════════════════════════════ */

/* ── SALA 1: Patrón de líneas diagonales + oro imperial ── */
.sala-bg-1 {
    background:
        repeating-linear-gradient(-30deg, transparent, transparent 40px, rgba(196,164,74,0.14) 40px, rgba(196,164,74,0.14) 41px),
        linear-gradient(180deg, #f9f5f8 0%, #f3edf5 50%, #ede2f0 100%);
    background-size: 100% 100%, 100% 100%;
    position: relative; overflow: hidden;
    animation: s1Lines 8s linear infinite;
}
.sala-bg-1::before {
    content: ''; position: absolute; top: -50%; right: -20%;
    width: 800px; height: 800px; z-index: 0; pointer-events: none;
    background: radial-gradient(circle, rgba(91,44,74,0.45) 0%, transparent 70%);
    animation: s1PulseA 6s ease-in-out infinite alternate;
}
.sala-bg-1::after {
    content: ''; position: absolute; bottom: -30%; left: -10%;
    width: 600px; height: 600px; z-index: 0; pointer-events: none;
    background: radial-gradient(circle, rgba(196,164,74,0.5) 0%, transparent 70%);
    animation: s1PulseB 8s ease-in-out infinite alternate;
}
@keyframes s1Lines {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 80px 80px, 0 0; }
}
@keyframes s1PulseA {
    0% { transform: translate(0,0) scale(0.8); opacity: 0.4; }
    100% { transform: translate(-80px,60px) scale(1.6); opacity: 1; }
}
@keyframes s1PulseB {
    0% { transform: translate(0,0) scale(1.2); opacity: 0.5; }
    100% { transform: translate(60px,-40px) scale(0.7); opacity: 1; }
}

/* ── SALA 2: Ondas orgánicas + textura de tierra ── */
.sala-bg-2 {
    background:
        radial-gradient(ellipse at 20% 80%, rgba(198,123,78,0.32) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(90,107,58,0.25) 0%, transparent 60%),
        #faf6f0;
    background-size: 100% 100%;
    position: relative; overflow: hidden;
    animation: s2Breathe 12s ease-in-out infinite alternate;
}
.sala-bg-2::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(139,69,19,0.07) 3px, rgba(139,69,19,0.07) 4px);
    animation: s2Shift 9s linear infinite;
}
.sala-bg-2::after {
    content: ''; position: absolute; top: -20%; left: -10%;
    width: 70%; height: 70%; z-index: 0; pointer-events: none;
    background:
        conic-gradient(from 0deg, rgba(198,123,78,0.35), rgba(90,107,58,0.25), rgba(198,123,78,0.1), rgba(90,107,58,0.35));
    border-radius: 40% 60% 70% 30%;
    filter: blur(50px);
    animation: s2Morph 10s ease-in-out infinite alternate;
}
@keyframes s2Breathe {
    0% { background-position: 0 0; }
    100% { background-position: 0 40px; }
}
@keyframes s2Shift {
    0% { background-position: 0 0; }
    100% { background-position: 0 500px; }
}
@keyframes s2Morph {
    0% { border-radius: 30% 70% 50% 50%; transform: rotate(-15deg) scale(0.8) translate(0,0); }
    50% { border-radius: 60% 40% 30% 70%; transform: rotate(15deg) scale(1.4) translate(80px,40px); }
    100% { border-radius: 40% 60% 80% 20%; transform: rotate(-10deg) scale(1.1) translate(-50px,-60px); }
}

/* ── SALA 3: Rayos de luz + efecto vitral ── */
.sala-bg-3 {
    background: #f5f8fa;
    position: relative; overflow: hidden;
}
.sala-bg-3::before {
    content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
    width: 1200px; height: 1200px; z-index: 0; pointer-events: none;
    background:
        conic-gradient(from 0deg,
            rgba(30,77,122,0.2) 0deg, transparent 20deg,
            rgba(30,77,122,0.2) 40deg, transparent 60deg,
            rgba(139,26,43,0.15) 80deg, transparent 100deg,
            rgba(30,77,122,0.2) 120deg, transparent 140deg,
            rgba(196,164,74,0.1) 160deg, transparent 180deg,
            rgba(139,26,43,0.15) 200deg, transparent 220deg,
            rgba(30,77,122,0.2) 240deg, transparent 260deg,
            rgba(196,164,74,0.1) 280deg, transparent 300deg,
            rgba(30,77,122,0.2) 320deg, transparent 340deg,
            rgba(139,26,43,0.15) 360deg, transparent 360deg);
    animation: s3Rotate 30s linear infinite;
    opacity: 0.6;
}
.sala-bg-3::after {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 2px; height: 100%; z-index: 0; pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(196,164,74,0.4), rgba(30,77,122,0.2), rgba(196,164,74,0.4), transparent);
    animation: s3Ray 4s ease-in-out infinite;
}
@keyframes s3Rotate {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}
@keyframes s3Ray {
    0%,100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* ── SALA 4: Manchas de tinta + textura pergamino ── */
.sala-bg-4 {
    background:
        radial-gradient(circle at 30% 20%, rgba(160,128,80,0.28) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(61,42,30,0.2) 0%, transparent 50%),
        #faf7f0;
    position: relative; overflow: hidden;
}
.sala-bg-4::before {
    content: ''; position: absolute; top: 5%; left: 5%;
    width: 350px; height: 350px; z-index: 0; pointer-events: none;
    border-radius: 60% 40% 70% 30%;
    background: radial-gradient(circle at center, rgba(61,42,30,0.5) 0%, rgba(160,128,80,0.25) 40%, transparent 70%);
    filter: blur(18px);
    animation: s4Ink1 8s ease-in-out infinite alternate;
}
.sala-bg-4::after {
    content: ''; position: absolute; bottom: 10%; right: 8%;
    width: 300px; height: 400px; z-index: 0; pointer-events: none;
    border-radius: 30% 70% 50% 50%;
    background: radial-gradient(circle at center, rgba(100,70,40,0.45) 0%, rgba(160,128,80,0.2) 50%, transparent 70%);
    filter: blur(22px);
    animation: s4Ink2 10s ease-in-out infinite alternate;
}
@keyframes s4Ink1 {
    0% { transform: translate(-40px,-20px) scale(0.7); border-radius: 60% 40% 70% 30%; opacity: 0.5; }
    50% { transform: translate(80px,60px) scale(1.5); border-radius: 30% 70% 40% 60%; opacity: 1; }
    100% { transform: translate(20px,-40px) scale(1.1); border-radius: 50% 50% 60% 40%; opacity: 0.8; }
}
@keyframes s4Ink2 {
    0% { transform: translate(40px,30px) scale(1.3); border-radius: 30% 70% 50% 50%; opacity: 0.6; }
    50% { transform: translate(-70px,-50px) scale(0.7); border-radius: 70% 30% 60% 40%; opacity: 1; }
    100% { transform: translate(-10px,60px) scale(1.0); border-radius: 40% 60% 30% 70%; opacity: 0.7; }
}

/* ── SALA 5: Gradiente horizonte + tormenta de arena ── */
.sala-bg-5 {
    background:
        linear-gradient(180deg, #fdf8f0 0%, #faf3e5 40%, #f5ead5 100%);
    position: relative; overflow: hidden;
}
.sala-bg-5::before {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 50%; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(212,154,90,0.3) 30%,
        rgba(139,107,74,0.4) 70%,
        rgba(180,140,100,0.2) 100%);
    animation: s5Horizon 10s ease-in-out infinite;
}
.sala-bg-5::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 10% 30%, rgba(180,140,100,0.7), transparent),
        radial-gradient(2px 2px at 25% 50%, rgba(200,160,100,0.6), transparent),
        radial-gradient(2.5px 2.5px at 40% 20%, rgba(180,140,100,0.55), transparent),
        radial-gradient(2px 2px at 55% 60%, rgba(200,160,100,0.65), transparent),
        radial-gradient(2.5px 2.5px at 70% 35%, rgba(180,140,100,0.55), transparent),
        radial-gradient(2px 2px at 85% 45%, rgba(200,160,100,0.6), transparent),
        radial-gradient(2px 2px at 15% 70%, rgba(180,140,100,0.5), transparent),
        radial-gradient(2.5px 2.5px at 60% 80%, rgba(200,160,100,0.5), transparent),
        radial-gradient(2px 2px at 90% 15%, rgba(180,140,100,0.55), transparent),
        radial-gradient(2px 2px at 35% 85%, rgba(200,160,100,0.5), transparent);
    background-size: 200% 200%;
    animation: s5Dust 8s linear infinite;
}
@keyframes s5Horizon {
    0%,100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(-10px); opacity: 1; }
}
@keyframes s5Dust {
    0% { background-position: 0% 0%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
}

/* ═══════ SECTIONS ═══════ */
section { padding: 6rem 2rem; position: relative; z-index: 1; }
section > .container { position: relative; z-index: 2; }

.sec-tag {
    display: block; font-size: 0.6rem; font-weight: 600;
    letter-spacing: 4px; text-transform: uppercase;
    color: var(--terracotta); margin-bottom: 0.8rem;
}
.sec-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.7rem, 3.5vw, 2.6rem);
    font-weight: 700; color: var(--brown-dark);
    line-height: 1.2; letter-spacing: -0.3px;
    margin-bottom: 1rem;
}
.sec-line {
    width: 44px; height: 2px; background: var(--terracotta);
    margin-bottom: 3rem;
}
.container { max-width: 1200px; margin: 0 auto; }

.bg-warm { background: var(--warm-white); }

/* ═══════ STATS ROW ═══════ */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--stone);
    border-bottom: 1px solid var(--stone);
}
.stats-row .stat {
    padding: 3.5rem 2rem; text-align: center;
    border-right: 1px solid var(--stone);
    transition: background 0.4s;
}
.stats-row .stat:last-child { border-right: none; }
.stats-row .stat:hover { background: var(--cream); }
.stats-row .stat .num {
    font-family: 'Playfair Display', serif;
    font-size: 3rem; font-weight: 700;
    color: var(--terracotta); line-height: 1;
    margin-bottom: 0.5rem;
}
.stats-row .stat .lbl {
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--gray);
}

/* ═══════ SALAS GRID ═══════ */
.salas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}
.sala-card {
    display: block; text-decoration: none;
    background: var(--white); border: 1px solid var(--stone);
    transition: all 0.45s var(--ease); position: relative; overflow: hidden;
    animation: cardFloat 5s ease-in-out infinite;
}
.sala-card:nth-child(2) { animation-delay: 0.3s; }
.sala-card:nth-child(3) { animation-delay: 0.6s; }
.sala-card:nth-child(4) { animation-delay: 0.9s; }
.sala-card:nth-child(5) { animation-delay: 1.2s; }
.sala-card:hover {
    animation: none;
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.sala-card::before {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(135deg, transparent 40%, rgba(198,123,78,0.08) 50%, transparent 60%);
    background-size: 300% 300%;
    opacity: 0;
    transition: opacity 0.6s;
}
.sala-card:hover::before {
    opacity: 1;
    animation: cardShimmer 1.2s ease;
}
.sala-card .card-img {
    width: 100%; height: 250px; object-fit: cover; display: block;
    transition: transform 0.7s var(--ease);
}
.sala-card:hover .card-img { transform: scale(1.06); }
.sala-card .card-body { padding: 2rem 1.8rem; position: relative; z-index: 1; }
.sala-card .card-num {
    font-family: 'Playfair Display', serif;
    font-size: 3rem; font-weight: 700;
    color: var(--cream-dark); line-height: 1;
    transition: color 0.4s;
}
.sala-card:hover .card-num { color: var(--terracotta); }
.sala-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem; font-weight: 600;
    color: var(--brown-dark); margin: 0.4rem 0 0.7rem;
}
.sala-card p { font-size: 0.85rem; color: var(--gray); line-height: 1.6; }
.sala-card .arrow {
    display: inline-block; margin-top: 1rem;
    font-size: 0.7rem; color: var(--terracotta);
    font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    opacity: 0; transform: translateX(-12px);
    transition: all 0.4s var(--ease);
}
.sala-card:hover .arrow {
    opacity: 1; transform: translateX(4px);
}
@keyframes cardFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes cardShimmer {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* ═══════ SALA NAVEGACIÓN ═══════ */
.sala-navegacion {
    display: flex; justify-content: space-between;
    margin-top: 3.5rem; padding-top: 2rem;
    border-top: 1px solid var(--stone);
}
.sala-navegacion a {
    color: var(--terracotta); text-decoration: none;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; transition: all 0.3s;
    padding: 0.5rem 1rem; border: 1px solid transparent;
}
.sala-navegacion a:hover {
    color: var(--brown-dark); border-color: var(--stone);
    background: var(--warm-white);
}

/* ═══════ EASTER EGG CREDITS ═══════ */
#credits-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(30, 20, 10, 0.88);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.4s ease;
    -webkit-overflow-scrolling: touch;
}
#credits-overlay.visible { opacity: 1; }
#credits-overlay.fade-out { opacity: 0; }
.credits-card {
    background: var(--warm-white);
    padding: 2rem 2rem; text-align: center;
    border: 1px solid var(--sand);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    animation: creditsIn 0.5s ease;
    position: relative; max-width: 500px; width: 92vw;
    max-height: 80vh; display: flex; flex-direction: column;
    -webkit-overflow-scrolling: touch;
}
@keyframes creditsIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.credits-close {
    position: absolute; top: 0.5rem; right: 0.8rem;
    background: none; border: none; font-size: 1.8rem;
    color: var(--gray); cursor: pointer;
    transition: color 0.3s; line-height: 1;
    padding: 0.5rem; z-index: 2;
    -webkit-tap-highlight-color: transparent;
}
.credits-close:hover { color: var(--terracotta); }
.credits-sub {
    display: block; font-size: 0.6rem; font-weight: 500;
    letter-spacing: 3px; text-transform: uppercase;
    color: var(--terracotta); margin-bottom: 0.3rem;
}
.credits-name {
    display: block; font-family: 'Playfair Display', serif;
    font-size: 1.2rem; letter-spacing: 1px;
    color: var(--brown-dark); margin-bottom: 0.5rem;
}
.credits-line {
    width: 30px; height: 1px; background: var(--sand);
    margin: 0 auto 1rem;
}
.credits-scroll {
    overflow-y: auto; text-align: left; padding-right: 0.5rem;
    max-height: 45vh; -webkit-overflow-scrolling: touch;
}
.credits-scroll::-webkit-scrollbar { width: 4px; }
.credits-scroll::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 2px; }
.credits-scroll h4 {
    font-family: 'Playfair Display', serif; font-size: 0.95rem;
    color: var(--brown-dark); margin: 1.2rem 0 0.3rem;
}
.credits-scroll h4:first-child { margin-top: 0; }
.credits-scroll p {
    font-size: 0.82rem; color: var(--ink-light); margin-bottom: 0.6rem; line-height: 1.7;
}
.credits-scroll em { color: var(--terracotta); font-style: italic; }

@media (max-width: 768px) {
    .credits-card { padding: 1.5rem 1.2rem; max-width: 95vw; }
    .credits-close { font-size: 1.5rem; top: 0.3rem; right: 0.5rem; }
    .credits-name { font-size: 1rem; }
    .credits-scroll { max-height: 40vh; }
    .credits-scroll p { font-size: 0.75rem; }
    .credits-scroll h4 { font-size: 0.85rem; }
}
}
.credits-close:hover { color: var(--terracotta); }
.credits-sub {
    display: block; font-size: 0.6rem; letter-spacing: 5px;
    text-transform: uppercase; color: var(--terracotta);
    margin-bottom: 0.5rem; font-weight: 600;
}
.credits-name {
    display: block; font-family: 'Playfair Display', serif;
    font-size: 1.6rem; font-weight: 700; color: var(--brown-dark);
    margin-bottom: 1.2rem;
}
.credits-line {
    width: 40px; height: 2px; background: var(--terracotta);
    margin: 0 auto 1.2rem;
}
.credits-text {
    font-size: 0.8rem; color: var(--gray);
    font-family: 'Cormorant Garamond', serif; font-style: italic;
}
.credits-scroll {
    overflow-y: auto; text-align: left; padding-right: 0.5rem;
    max-height: 50vh;
}
.credits-scroll::-webkit-scrollbar { width: 4px; }
.credits-scroll::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 2px; }
.credits-scroll h4 {
    font-family: 'Playfair Display', serif; font-size: 1rem;
    color: var(--brown-dark); margin: 1.4rem 0 0.4rem;
}
.credits-scroll h4:first-child { margin-top: 0; }
.credits-scroll p {
    font-size: 0.82rem; color: var(--ink-light); line-height: 1.7;
    margin-bottom: 0.8rem;
}
.credits-scroll em { color: var(--terracotta); font-style: italic; }

/* ═══════ PLANOS ═══════ */
.planos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

/* ═══════ CONTACTO ═══════ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.contact-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem; font-weight: 600;
    color: var(--brown-dark); margin-bottom: 1rem;
}
.contact-info p {
    margin-bottom: 0.7rem; color: var(--ink-light); font-size: 0.9rem;
    transition: all 0.3s;
}
.contact-info p:hover { color: var(--terracotta); padding-left: 4px; }
.contact-info .icn { color: var(--terracotta); margin-right: 0.5rem; }

.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.contact-form input,
.contact-form textarea {
    padding: 0.9rem 1.1rem;
    background: var(--warm-white);
    border: 1px solid var(--stone);
    font-family: 'Inter', sans-serif; font-weight: 350;
    font-size: 0.85rem; color: var(--ink);
    transition: all 0.3s;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none; border-color: var(--terracotta);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(198,123,78,0.08);
}
.contact-form textarea { height: 120px; resize: vertical; }

.btn {
    display: inline-block; padding: 0.85rem 2.5rem;
    background: var(--brown-dark); color: var(--white);
    border: none; font-weight: 550; font-size: 0.7rem;
    letter-spacing: 2.5px; text-transform: uppercase;
    cursor: pointer; transition: all 0.35s var(--ease);
    text-decoration: none; text-align: center;
    font-family: 'Inter', sans-serif;
}
.btn:hover {
    background: var(--terracotta);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(198,123,78,0.25);
}
.btn-outline {
    background: transparent; color: var(--brown-dark);
    border: 1px solid var(--stone);
}
.btn-outline:hover {
    background: var(--brown-dark); color: var(--white);
    border-color: var(--brown-dark);
}
.btn-terracotta { background: var(--terracotta); }
.btn-terracotta:hover { background: var(--terracotta-dark); }

.map-container {
    margin-top: 2rem; height: 280px; overflow: hidden;
    border: 1px solid var(--stone);
}
.map-container iframe { width: 100%; height: 100%; border: none; }

/* ═══════ BREADCRUMB ═══════ */
.breadcrumb {
    padding: 6.5rem 2rem 0; max-width: 1200px; margin: 0 auto;
    font-size: 0.72rem; color: var(--gray-light); letter-spacing: 0.5px;
}
.breadcrumb a { color: var(--terracotta); text-decoration: none; transition: color 0.3s; }
.breadcrumb a:hover { color: var(--brown-dark); }
.breadcrumb span { margin: 0 0.4rem; }

/* ═══════ FOOTER ═══════ */
footer {
    background: var(--warm-white); text-align: center;
    padding: 4rem 2rem; border-top: 1px solid var(--stone);
}
footer .flogo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem; font-weight: 600;
    color: var(--brown); letter-spacing: 3px;
    display: block; margin-bottom: 0.6rem;
    user-select: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding: 0.5rem;
}
footer p { color: var(--gray-light); font-size: 0.75rem; margin-bottom: 0.2rem; }

/* ═══════ ANIMATIONS (JS fallback: visible by default) ═══════ */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1; transform: none; transition: none;
}
.js-enabled .reveal {
    opacity: 0; transform: translateY(40px);
    transition: all 0.8s var(--ease-smooth);
}
.js-enabled .reveal.visible { opacity: 1; transform: translateY(0); }
.js-enabled .reveal-left {
    opacity: 0; transform: translateX(-40px);
    transition: all 0.8s var(--ease-smooth);
}
.js-enabled .reveal-left.visible { opacity: 1; transform: translateX(0); }
.js-enabled .reveal-right {
    opacity: 0; transform: translateX(40px);
    transition: all 0.8s var(--ease-smooth);
}
.js-enabled .reveal-right.visible { opacity: 1; transform: translateX(0); }
.js-enabled .reveal-scale {
    opacity: 0; transform: scale(0.94);
    transition: all 0.7s var(--ease-smooth);
}
.js-enabled .reveal-scale.visible { opacity: 1; transform: scale(1); }
.js-enabled .stagger-1{transition-delay:0.1s}
.js-enabled .stagger-2{transition-delay:0.2s}
.js-enabled .stagger-3{transition-delay:0.3s}
.js-enabled .stagger-4{transition-delay:0.4s}
.js-enabled .stagger-5{transition-delay:0.5s}

/* FALLBACK: visible without JS */
.stagger-1,.stagger-2,.stagger-3,.stagger-4,.stagger-5 { transition-delay: 0s; }

/* ═══════ IMG FALLBACK ═══════ */
img { background: var(--cream); }

/* ═══════ IMAGE LIGHTBOX CURSOR ═══════ */
.sala-detalle img, .galeria-grid img { cursor: zoom-in; transition: opacity 0.3s, transform 0.3s; }
.sala-detalle img:hover, .galeria-grid img:hover { opacity: 0.85; transform: scale(1.02); }
.sala-detalle img { width: 100%; height: auto; max-height: 500px; object-fit: contain; border: 1px solid var(--stone); background: var(--warm-white); }
@media (max-width: 768px) {
    .sala-detalle img { max-height: 350px; }
}

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 768px) {
    nav .inner { padding: 0 1rem; }
    nav ul { display: none; }
    nav ul.open {
        display: flex; flex-direction: column;
        position: absolute; top: 100%; left: 0; width: 100%;
        background: rgba(255,255,255,0.99); backdrop-filter: blur(12px);
        padding: 1.5rem 2rem; gap: 1.2rem;
        border-top: 1px solid var(--stone);
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    }
    .menu-toggle { display: block; }
    .page-header { padding: 6rem 1rem 2.5rem; }
    .page-header h1 { font-size: 1.6rem; letter-spacing: 2px; }
    .page-header p { font-size: 0.9rem; }
    .hero-content { margin-left: 0; padding: 1.5rem; text-align: center; }
    .hero-content h1 { font-size: 2rem; letter-spacing: 3px; }
    .hero-content .subtitle { font-size: 0.9rem; }
    .hero-content .btn-hero { padding: 0.7rem 1.5rem; font-size: 0.65rem; }
    .stats-row { gap: 0; }
    .stats-row .stat { padding: 1.5rem 0.5rem; }
    .stats-row .stat .num { font-size: 2rem; }
    .stats-row .stat .lbl { font-size: 0.6rem; letter-spacing: 1px; }
    .planos-grid { gap: 0.8rem; }
    .plano-card { padding: 1.5rem 1rem; }
    .plano-card h3 { font-size: 1.1rem; }
    .contact-grid { gap: 1.5rem; }
    .contact-info h3 { font-size: 1rem; }
    .contact-info p { font-size: 0.82rem; word-break: break-word; }
    .map-container { height: 200px; }
    .sala-card .card-img { height: 160px; }
    .sala-card .card-body { padding: 1rem 1.2rem; }
    .sala-card .card-num { font-size: 1.8rem; }
    .sala-card h3 { font-size: 0.9rem; }
    .sala-card p { font-size: 0.75rem; }
    section { padding: 2.5rem 1rem; }
    img, iframe, table { max-width: 100%; }
    .sobre-hero-grid, .sobre-hero-grid[style] {
        grid-template-columns: 1fr !important; gap: 2rem !important;
    }
    .sobre-hero-grid .reveal-right { order: -1; }
    /* All 2-column grids in sobre -> stack on mobile */
    section [style*="grid-template-columns:1fr 1fr"],
    section [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important; gap: 1.5rem !important;
    }
    /* Collection boxes padding */
    .bg-warm + section [style*="padding:2rem"] { padding: 1.2rem !important; }
    .salas-grid { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
    .breadcrumb { padding: 5rem 1rem 0; font-size: 0.7rem; }
    .contact-form input, .contact-form textarea { font-size: 0.8rem; }
    .btn { padding: 0.7rem 1.5rem; font-size: 0.65rem; }
    .sala-detalle img { max-height: 280px; }
    .sala-seccion { padding: 1.2rem 1rem; }
    .sala-seccion h3 { font-size: 0.85rem; }
    .sala-seccion p { font-size: 0.8rem; }
    .sala-navegacion a { font-size: 0.65rem; padding: 0.4rem 0.6rem; }
    .section-title { font-size: 1.5rem; }
    .sec-title { font-size: 1.5rem; }
    footer { padding: 2.5rem 1rem; }
    /* Sala zigzag -> stacked on mobile */
    .sala-detalle [style*="grid-template-columns:1fr 1fr"],
    .sala-detalle div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important; gap: 1.5rem !important;
    }
}

/* Extra small screens */
@media (max-width: 400px) {
    .salas-grid { grid-template-columns: 1fr; }
    .hero-content h1 { font-size: 1.6rem; }
    .hero-content .eyebrow { font-size: 0.55rem; letter-spacing: 3px; }
    .page-header h1 { font-size: 1.3rem; }
    .stats-row .stat .num { font-size: 1.5rem; }
}