:root { --ink:#20221f; --paper:#f3f0e9; --cream:#e9e4da; --rust:#a44c32; --rust-dark:#7c3828; --muted:#77756d; --line:rgba(32,34,31,.16); --serif:'Playfair Display', Georgia, serif; --sans:'DM Sans', sans-serif; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.6; overflow-x:hidden; }
body::selection { background:var(--rust); color:var(--paper); }
.container { width:min(1180px, calc(100% - 80px)); margin:auto; }
.premium-nav { position:fixed; inset:0 0 auto; z-index:20; color:#fff; transition:background .3s ease, color .3s ease; }
.premium-nav.scrolled { background:rgba(32,34,31,.95); backdrop-filter:blur(14px); }
.nav-inner { min-height:88px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { color:inherit; text-decoration:none; font-size:14px; font-weight:600; letter-spacing:.22em; }
.nav-logo span { color:#d6876d; }
.nav-links { display:flex; gap:34px; list-style:none; }
.nav-links a { color:inherit; text-decoration:none; font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.82; transition:opacity .2s; }
.nav-links a:hover { opacity:1; }
.mobile-menu-toggle { display:none; background:none; border:0; padding:8px; cursor:pointer; }
.mobile-menu-toggle span { display:block; width:24px; height:1px; margin:5px; background:currentColor; transition:.2s; }
.hero-section { min-height:720px; height:92vh; position:relative; display:flex; align-items:center; color:#fff; background:#3a2923; overflow:hidden; }
.hero-image { position:absolute; inset:0; background:url('https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=1900&q=85') center/cover; animation:heroIn 1.3s ease both; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(24,26,23,.82) 0%,rgba(24,26,23,.35) 58%,rgba(24,26,23,.25)); }
.hero-content { position:relative; z-index:1; padding-top:80px; }
.eyebrow { color:var(--rust); font-size:10px; font-weight:600; letter-spacing:.19em; text-transform:uppercase; margin-bottom:22px; }
.hero-section .eyebrow { color:#e1ab97; }
h1,h2 { font-family:var(--serif); font-weight:500; line-height:1.06; letter-spacing:-.035em; }
h1 { font-size:clamp(56px, 8vw, 106px); max-width:780px; }
h1 em,h2 em { color:#d18167; font-style:italic; }
.hero-copy { max-width:390px; margin:28px 0 34px; color:rgba(255,255,255,.75); font-size:16px; }
.hero-actions { display:flex; align-items:center; gap:28px; }
.primary-btn { display:inline-flex; justify-content:center; align-items:center; gap:24px; border:0; padding:16px 21px; background:var(--rust); color:#fff; text-decoration:none; cursor:pointer; font:600 11px var(--sans); letter-spacing:.1em; text-transform:uppercase; transition:background .2s, transform .2s; }
.primary-btn:hover { background:var(--rust-dark); transform:translateY(-2px); }
.primary-btn span { font-size:18px; line-height:0; font-weight:400; }
.text-link { color:#fff; text-decoration:none; font-size:12px; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:5px; }
.hero-caption { position:absolute; z-index:1; bottom:31px; right:40px; display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.6); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.hero-caption span { width:30px; height:1px; background:#d18167; }
.intro-section { padding:145px 0 155px; background:var(--cream); }
.intro-grid { display:grid; grid-template-columns:1fr 2fr; gap:40px; }
h2 { font-size:clamp(38px,5vw,68px); }
.intro-copy { max-width:490px; margin-top:30px; color:var(--muted); font-size:16px; }
.menu-container { padding:125px 0 145px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:64px; }
.section-heading .eyebrow { margin-bottom:18px; }
.section-note { color:var(--muted); font-size:13px; line-height:1.7; text-align:right; }
.category-nav { display:flex; gap:30px; margin-bottom:38px; border-bottom:1px solid var(--line); overflow-x:auto; }
.category-btn { flex:0 0 auto; position:relative; padding:0 0 16px; border:0; background:transparent; color:var(--muted); cursor:pointer; font:500 11px var(--sans); letter-spacing:.1em; text-transform:uppercase; }
.category-btn::after { content:''; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:var(--rust); transform:scaleX(0); transition:transform .2s; }
.category-btn.active,.category-btn:hover { color:var(--ink); }
.category-btn.active::after { transform:scaleX(1); }
.menu-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.menu-item { display:grid; grid-template-columns:42% 58%; min-height:275px; background:var(--paper); cursor:pointer; animation:rise .55s both; }
.menu-item-image-container { min-height:275px; overflow:hidden; position:relative; }
.menu-item-image { width:100%; height:100%; display:block; object-fit:cover; transition:transform .5s ease; }
.menu-item:hover .menu-item-image { transform:scale(1.06); }
.menu-item-overlay { position:absolute; inset:0; background:rgba(32,34,31,.18); }
.menu-item-quick-view { position:absolute; left:20px; bottom:18px; border:1px solid rgba(255,255,255,.75); background:rgba(32,34,31,.55); color:#fff; padding:8px 12px; cursor:pointer; font:600 9px var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.menu-item-content { display:flex; flex-direction:column; padding:25px 24px 22px; }
.menu-item-header { display:flex; justify-content:space-between; gap:10px; margin-bottom:26px; }
.menu-item-category { color:var(--rust); font-size:9px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
.menu-item-price { color:var(--rust); font:500 17px var(--serif); }
.menu-item-title { font:500 22px var(--serif); line-height:1.2; margin-bottom:10px; }
.menu-item-description { color:var(--muted); font-size:12px; line-height:1.65; }
.menu-item-footer { display:flex; justify-content:space-between; align-items:end; gap:10px; margin-top:auto; padding-top:20px; border-top:1px solid var(--line); }
.menu-item-meta { color:var(--muted); font-size:10px; }
.menu-item-meta span { display:block; }
.detail-btn { border:0; background:none; color:var(--rust); cursor:pointer; font:600 10px var(--sans); letter-spacing:.1em; text-transform:uppercase; }
.detail-btn::before { content:'Ver detalle  '; }
.detail-btn .btn-icon { display:none; }
.reservation-section { padding:125px 0; background:var(--ink); color:var(--paper); }
.reservation-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; }
.reservation-section h2 { margin-bottom:25px; }
.reservation-section> .container>div>p:last-child { max-width:320px; color:rgba(243,240,233,.6); font-size:14px; }
.reservation-form { display:flex; flex-direction:column; gap:19px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label { color:rgba(243,240,233,.65); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.form-input { display:block; width:100%; margin-top:8px; padding:12px 0; border:0; border-bottom:1px solid rgba(243,240,233,.3); outline:0; background:transparent; color:var(--paper); font:14px var(--sans); }
.form-input:focus { border-color:#d18167; }
.form-input::placeholder { color:rgba(243,240,233,.35); }
select.form-input option { color:var(--ink); }
.reservation-form .primary-btn { align-self:flex-start; margin-top:13px; }
footer { padding:82px 0 25px; background:#171916; color:rgba(243,240,233,.7); font-size:12px; }
.footer-main { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:55px; padding-bottom:72px; }
.footer-brand .nav-logo { display:block; margin-bottom:18px; color:var(--paper); }
.footer-brand > p { color:rgba(243,240,233,.55); line-height:1.8; }
.footer-cta { display:inline-flex; gap:14px; margin-top:28px; color:var(--paper); text-decoration:none; font-size:11px; }
.footer-cta span,.footer-column a span { color:#d18167; }
.footer-column p { margin-bottom:10px; line-height:1.8; }
.footer-column a { display:block; width:max-content; max-width:100%; margin-bottom:7px; color:rgba(243,240,233,.7); text-decoration:none; }
.footer-column a:hover,.footer-cta:hover { color:#fff; }
.footer-label { margin-bottom:14px; color:#d18167; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.footer-social { display:flex; gap:10px; margin-top:20px; }
.footer-social a { display:flex; align-items:center; justify-content:center; width:28px; height:28px; margin:0; border:1px solid rgba(243,240,233,.25); color:rgba(243,240,233,.65); font-size:9px; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:18px; border-top:1px solid rgba(243,240,233,.13); color:rgba(243,240,233,.4); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.footer-bottom a { color:inherit; text-decoration:none; }
.item-modal { position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; padding:30px; background:rgba(20,21,19,.75); backdrop-filter:blur(10px); }
.item-modal.active { display:flex; }
.item-modal-content { position:relative; display:grid; grid-template-columns:1fr 1fr; width:min(850px,100%); background:var(--paper); animation:rise .3s ease; }
.modal-close { position:absolute; top:15px; right:15px; z-index:1; width:32px; height:32px; border:0; border-radius:50%; background:var(--paper); color:var(--ink); cursor:pointer; font-size:24px; line-height:1; }
.item-modal-image { width:100%; height:100%; min-height:400px; object-fit:cover; }
.item-modal-details { align-self:center; padding:50px; }
.item-modal-details h2 { font-size:42px; margin-bottom:20px; }
.item-modal-details p { color:var(--muted); font-size:14px; }
.item-modal-price { margin-top:25px; color:var(--rust); font:22px var(--serif); }
@keyframes heroIn { from { opacity:0; transform:scale(1.04); } to { opacity:1; transform:scale(1); } }
@keyframes rise { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:800px) { .container{width:min(100% - 40px,600px)} .nav-inner{min-height:74px}.mobile-menu-toggle{display:block;color:#fff}.nav-links{position:absolute;top:74px;right:20px;left:20px;display:none;flex-direction:column;gap:0;padding:8px 20px;background:var(--ink);box-shadow:0 10px 25px #0003}.nav-links.open{display:flex}.nav-links a{display:block;padding:15px 0}.hero-section{min-height:650px;height:90vh}.hero-content{padding-top:70px}.hero-caption{right:20px}.intro-section,.menu-container,.reservation-section{padding:85px 0}.intro-grid,.reservation-grid{grid-template-columns:1fr;gap:35px}.section-heading{align-items:start;flex-direction:column;gap:25px;margin-bottom:45px}.section-note{text-align:left}.category-nav{gap:22px}.menu-grid{grid-template-columns:1fr}.menu-item{grid-template-columns:38% 62%;min-height:250px}.menu-item-image-container{min-height:250px}.menu-item-content{padding:20px 17px}.menu-item-header{margin-bottom:18px}.menu-item-title{font-size:19px}.menu-item-description{font-size:11px}.footer-main{grid-template-columns:1fr 1fr;gap:40px;padding-bottom:50px}.item-modal-content{grid-template-columns:1fr}.item-modal-image{height:220px;min-height:0}.item-modal-details{padding:28px}.item-modal-details h2{font-size:34px}.desktop-only{display:none} }
@media (max-width:430px) { h1{font-size:52px}.hero-copy{font-size:14px}.hero-actions{align-items:flex-start;flex-direction:column;gap:20px}.form-row{grid-template-columns:1fr}.menu-item{grid-template-columns:1fr}.menu-item-image-container{height:210px;min-height:0}.menu-item-content{min-height:245px}.footer-main{grid-template-columns:1fr;gap:32px}.footer-bottom{align-items:flex-start;gap:15px;flex-direction:column} }