:root {
    --color-primary: #8B4513;
    --color-primary-dark: #6B3410;
    --color-accent: #D4A574;
    --color-accent-light: #E8C5A0;
    --color-text: #2C2C2C;
    --color-text-light: #666666;
    --color-bg: #FEFDFB;
    --color-bg-alt: #F5F1ED;
    --color-border: #E8DFD7;
    --color-success: #2E7D32;
    --color-success-light: #4CAF50;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --space-64: 64px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--color-text); background-color: var(--color-bg); line-height: 1.6; }

/* Skip link */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:fixed; left:16px; top:16px; width:auto; height:auto; padding:8px 12px; background:#fff; color:#000; z-index:9999; border-radius:4px; box-shadow:var(--shadow-md); }

/* Header & Navigation */
header, .header { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: white; padding: var(--space-16) var(--space-24); box-shadow: var(--shadow-md); position: sticky; top: 0; z-index: 100; transition: transform 220ms ease-in-out; will-change: transform; }
.header-container { max-width: 1200px; margin: 0 auto; display:flex; justify-content: space-between; align-items:center; }
.logo { font-size:28px; font-weight:700; color:white; text-decoration:none; display:flex; align-items:center; gap:12px; }
.logo .site-logo { height:44px; display:block; }
nav { display:flex; gap: var(--space-24); }
nav a { color:white; text-decoration:none; font-weight:500; padding: var(--space-8) var(--space-12); }
nav a:focus { outline: 3px solid rgba(255,255,255,0.25); border-radius:4px; }

/* Hero */
.hero { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color:white; padding: var(--space-64) var(--space-24); text-align:center; }
.hero h1 { font-size:48px; margin-bottom:var(--space-24); text-shadow:2px 2px 4px rgba(0,0,0,0.3); }
.hero p { font-size:18px; margin-bottom:var(--space-12); max-width:700px; margin-left:auto; margin-right:auto; }
.hero-slogan { font-weight:700; margin-top:12px; font-size:18px; }
.hero-sub { font-size:16px; font-weight:500; }

.container { max-width:1200px; margin:0 auto; padding:0 var(--space-24); }
section { padding: var(--space-64) var(--space-24); }
section:nth-child(even) { background-color: var(--color-bg-alt); }
h2 { font-size:36px; margin-bottom:var(--space-32); text-align:center; color:var(--color-primary); }
h3 { font-size:24px; margin-bottom:var(--space-16); color:var(--color-primary); }

.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-48); align-items:center; }
.about-text p { margin-bottom: var(--space-16); color:var(--color-text-light); line-height:1.8; }
.about-image { width:100%; border-radius:8px; box-shadow:var(--shadow-sm); }
.highlight { color:var(--color-primary); font-weight:600; }

.features-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:var(--space-32); margin-bottom:var(--space-48); }
.feature-card { background:white; padding:var(--space-32); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); text-align:center; }
.feature-card h3 { margin-bottom:var(--space-12); }

.hours-container { background:white; border-radius:var(--radius-lg); padding:var(--space-32); box-shadow:var(--shadow-md); max-width:600px; margin:0 auto; }
.hours-item { display:flex; justify-content:space-between; padding:var(--space-12) 0; border-bottom:1px solid var(--color-border); gap:12px; align-items:center; flex-wrap:wrap; }
.hours-day { font-weight:700; color:var(--color-text); }
.hours-time { color:var(--color-text-light); text-align:right; }

.cta-section { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color:white; padding:var(--space-48) var(--space-24); text-align:center; border-radius:var(--radius-lg); margin:var(--space-48) 0; }
.cta-section h2, .cta-section p { text-shadow: 0 1px 2px rgba(0,0,0,0.45); }
.buttons-container { display:flex; gap:var(--space-16); justify-content:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:var(--space-8); padding:var(--space-16) var(--space-32); border-radius:var(--radius-md); font-weight:700; text-decoration:none; }
.btn-whatsapp { background:var(--color-success); color:white; }

.info-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:var(--space-24); }
.info-card { background:white; padding:var(--space-24); border-radius:var(--radius-lg); border-left:4px solid var(--color-primary); box-shadow:var(--shadow-sm); }

footer { background:var(--color-primary); color:white; padding:var(--space-32) var(--space-24); text-align:center; }
.footer-links { display:flex; gap:var(--space-16); justify-content:center; flex-wrap:wrap; margin-bottom:var(--space-16); }
.socials img { height:28px; margin:0 6px; }

/* Gallery lightbox */
.gallery-grid { gap:16px; }
.gallery-grid figure { background:#fff; border-radius:8px; overflow:hidden; box-shadow:var(--shadow-sm); }
.gallery-grid img { width:100%; height:auto; display:block; cursor:pointer; }
.gallery-grid figcaption { padding:8px 12px; color:var(--color-text-light); font-size:14px; }

.lightbox-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); display:flex; align-items:center; justify-content:center; z-index:9999; padding:24px; }
.lightbox-content { max-width:1200px; width:100%; max-height:90vh; overflow:hidden; border-radius:8px; }
.lightbox-content img { width:100%; height:auto; display:block; }
.lightbox-close { position:absolute; top:16px; right:16px; background:rgba(255,255,255,0.1); color:white; border:none; padding:8px 12px; border-radius:6px; font-weight:700; }

/* Lightbox prev/next controls */
.lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; background:rgba(255,255,255,0.06); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; cursor:pointer; }
.lightbox-nav:hover { background:rgba(255,255,255,0.12); }
.lightbox-prev { left:16px; }
.lightbox-next { right:16px; }

/* focus styles */
:focus { outline: 3px solid rgba(139,69,19,0.25); outline-offset: 2px; }
.user-is-tabbing :focus { outline: 3px solid rgba(139,69,19,0.6); }

/* Floating WhatsApp FAB */
.whatsapp-fab-container { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 12px; z-index: 200; }
.whatsapp-fab { display: none; background: var(--color-success); color: white; text-decoration: none; padding: 12px 16px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,0.18); font-weight: 700; align-items: center; gap: 8px; }
.whatsapp-fab img { height:18px; margin-right:8px; }
@media (max-width:768px) { .whatsapp-fab { display:inline-flex; } }

/* Responsive adjustments */
@media (max-width:768px) {
    nav { gap: var(--space-12); }
    .hero h1 { font-size:32px; }
    h2 { font-size:28px; }
    .about-grid { grid-template-columns: 1fr; gap: var(--space-32); }
    section { padding: var(--space-32) var(--space-16); }
    .buttons-container { flex-direction: column; }
    .btn { width:100%; justify-content:center; }
}

@media (max-width:480px) {
    .header-container { flex-direction: column; gap: var(--space-16); }
    nav { width:100%; justify-content:center; }
    .hero { padding: var(--space-32) var(--space-16); }
    .hero h1 { font-size:24px; }
    .hero p { font-size:16px; }
}

@media (max-width:600px) {
    .hours-item { flex-direction: column; align-items: flex-start; }
    .hours-time { text-align: left; }
    .cta-section { padding: var(--space-32) var(--space-16); }
}

/* Header hidden on scroll (added JS toggles this class) */
.header--hidden {
    transform: translateY(-110%);
    pointer-events: none;
}