/* ============================
   LUCA TAVOLA — Design tokens
   (paleta y tipografía del Manual de Marca)
============================ */
:root{
  --verde: #1F4A38;
  --verde-dark: #163529;
  --terracota: #C1622D;
  --terracota-dark: #A6501F;
  --crema: #F3EDE3;
  --madera: #7A5C3E;
  --blanco: #FFFFFF;
  --font-title: 'Playfair Display', serif;
  --font-title-sc: 'Playfair Display SC', serif;
  --font-impact: 'Oswald', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(31,74,56,0.12);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--verde-dark);
  background: var(--crema);
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
.container{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }

h1,h2,h3{ font-family: var(--font-title); font-weight: 600; color: var(--verde); margin: 0 0 .4em; }
p{ margin: 0 0 1em; }

.eyebrow{
  font-family: var(--font-impact);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  color: var(--terracota);
  font-weight: 600;
  margin-bottom: .5em;
}
.eyebrow.center, .section-title.center, .section-sub.center{ text-align:center; }
.section-title{ font-size: clamp(1.8rem, 3vw, 2.6rem); }
.section-sub{ color: var(--madera); max-width: 620px; margin: 0 auto 2.5rem; }
.section{ padding: 5.5rem 0; }

.btn{
  display:inline-block;
  padding: .85em 1.8em;
  border-radius: 999px;
  font-family: var(--font-impact);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .85rem;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  border: 2px solid transparent;
}
.btn-primary{ background: var(--terracota); color: var(--blanco); }
.btn-primary:hover{ background: var(--terracota-dark); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(193,98,45,.35); }
.btn-outline{ border-color: var(--blanco); color: var(--blanco); }
.btn-outline:hover{ background: var(--blanco); color: var(--verde); }

/* ===== HEADER ===== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(243,237,227,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(122,92,62,.15);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: .6rem 24px;
}
.brand-logo{ height: 56px; width:auto; }
.main-nav{ display:flex; align-items:center; gap: 1.8rem; }
.main-nav a{
  font-family: var(--font-impact);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--verde);
  padding: .3em 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover{ border-color: var(--terracota); color: var(--terracota); }
.nav-cta{
  background: var(--verde); color: var(--blanco) !important;
  padding: .6em 1.3em; border-radius: 999px; border-bottom: none !important;
}
.nav-cta:hover{ background: var(--verde-dark); color: var(--blanco) !important; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding: 8px; }
.nav-toggle span{ width: 26px; height: 2px; background: var(--verde); display:block; }

/* ===== HERO ===== */
.hero{ position: relative; min-height: 92vh; display:flex; align-items:center; color:#fff; overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(22,53,41,.55) 0%, rgba(22,53,41,.72) 55%, rgba(22,53,41,.9) 100%);
}
.hero-content{ position:relative; z-index:2; max-width: 720px; }
.hero-kicker{
  font-family: var(--font-impact); text-transform: uppercase; letter-spacing:.12em;
  color: #EBD9C4; font-size:.85rem; margin-bottom: 1rem;
}
.hero h1{ color:#fff; font-size: clamp(2.4rem, 5.5vw, 4.2rem); line-height:1.08; margin-bottom:.5em; }
.hero-sub{ font-size: 1.15rem; color: #EFE7DA; max-width: 560px; }
.hero-actions{ display:flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

/* ===== TWO COLUMN (nosotros / ubicacion) ===== */
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items:center; }
.two-col-media img{ border-radius: var(--radius); box-shadow: var(--shadow); width:100%; height: 480px; object-fit: cover; }
.nosotros{ background: var(--blanco); }
.tags{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap: .7rem; margin-top: 1.5rem; }
.tags li{
  background: var(--crema); color: var(--madera);
  padding: .5em 1em; border-radius: 999px; font-size: .88rem; font-weight:500;
  border: 1px solid rgba(122,92,62,.2);
}

/* ===== MENU ===== */
.menu-section{ background: var(--crema); }
.menu-tabs{ display:flex; justify-content:center; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; }
.menu-tab{
  font-family: var(--font-impact); text-transform: uppercase; letter-spacing:.04em;
  font-size: .82rem; font-weight:600; color: var(--verde);
  background: var(--blanco); border: 1px solid rgba(122,92,62,.25);
  padding: .65em 1.3em; border-radius: 999px; cursor:pointer;
  transition: all .15s ease;
}
.menu-tab:hover{ border-color: var(--terracota); }
.menu-tab.active{ background: var(--verde); color:#fff; border-color: var(--verde); }
.menu-panel{ display:none; }
.menu-panel.active{ display:block; animation: fadeIn .35s ease; }
@keyframes fadeIn{ from{opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }
.menu-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 2.5rem; }
.menu-item{ padding-bottom: 1.2rem; border-bottom: 1px dashed rgba(122,92,62,.3); }
.menu-item-head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.menu-item h3{ font-size: 1.15rem; margin:0; }
.menu-item .price{ font-family: var(--font-impact); color: var(--terracota); font-weight:600; white-space:nowrap; }
.menu-item p{ color: var(--madera); font-size: .92rem; margin: .35em 0 0; }
.menu-note{ text-align:center; color: var(--madera); font-size: .85rem; margin-top: 2.5rem; font-style: italic; }

/* ===== PROMO BANNER ===== */
.promo-banner{ background: var(--verde); color:#fff; }
.promo-inner{ display:grid; grid-template-columns: 340px 1fr; gap: 3rem; align-items:center; padding: 4rem 24px; }
.promo-img{ border-radius: var(--radius); box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.promo-text h2{ color:#fff; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.promo-text p{ color: #DCE8E1; }
.promo-text .eyebrow{ color: #F2B98C; }

/* ===== GALERIA ===== */
.galeria{ background: var(--blanco); }
.gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.gallery-item{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); aspect-ratio: 4/3; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.gallery-item:hover img{ transform: scale(1.06); }

/* ===== TESTIMONIOS ===== */
.testimonios{ background: var(--crema); }
.testi-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.testi-card{
  background: var(--blanco); border-radius: var(--radius); padding: 1.6rem;
  box-shadow: var(--shadow); margin:0; border-top: 3px solid var(--terracota);
}
.testi-card p{ font-style: italic; color: var(--verde-dark); font-size: .95rem; }
.testi-card cite{ font-family: var(--font-impact); font-size: .78rem; text-transform: uppercase; letter-spacing:.05em; color: var(--madera); font-style:normal; }

/* ===== UBICACION ===== */
.ubicacion{ background: var(--blanco); }
.info-block{ margin-bottom: 1.6rem; }
.info-block h4{ font-family: var(--font-impact); text-transform: uppercase; font-size: .82rem; letter-spacing: .05em; color: var(--terracota); margin: 0 0 .3em; }
.info-block a{ color: var(--verde); font-weight:600; }
.muted{ color: var(--madera); font-size: .85rem; }
.social-links{ display:flex; gap: 1.2rem; }
.social-links a{ font-weight:600; border-bottom: 2px solid var(--terracota); padding-bottom: 2px; }
.map-embed iframe{ width:100%; height: 480px; border:0; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ===== FOOTER ===== */
.site-footer{ background: var(--verde-dark); color: #CFE0D7; text-align:center; padding: 3rem 24px 2rem; }
.footer-logo{ height: 64px; margin: 0 auto 1rem; filter: brightness(0) invert(1); opacity:.95; }
.footer-tag{ font-family: var(--font-title); font-style: italic; font-size: 1.1rem; color: #fff; }
.footer-copy{ font-size: .8rem; color: #9FB8AB; margin:0; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px){
  .two-col, .promo-inner, .testi-grid, .menu-grid, .gallery-grid{ grid-template-columns: 1fr; }
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--crema); flex-direction:column; align-items:flex-start;
    padding: 1rem 24px 1.5rem; gap: 1rem;
    display:none;
    border-bottom: 1px solid rgba(122,92,62,.15);
  }
  .main-nav.open{ display:flex; }
  .nav-toggle{ display:flex; }
  .nav-cta{ align-self:flex-start; }
  .two-col-media img{ height: 320px; }
  .section{ padding: 3.5rem 0; }
}