:root {
  --forest:#153d2f;
  --forest-2:#0f2f24;
  --selva:#2f6f52;
  --leaf:#7e9f84;
  --moss:#a9b9a4;
  --cream:#f5ecdc;
  --paper:#fffaf1;
  --sand:#d8c39f;
  --earth:#a54f3b;
  --ink:#18201b;
  --muted:#5f6f65;
  --line:rgba(21,61,47,.15);
  --white:#fff;
  --shadow:0 22px 60px rgba(15,47,36,.12);
  --shadow-soft:0 12px 32px rgba(15,47,36,.09);
  --radius-card:20px;
  --radius-panel:24px;
  --radius-control:12px;
  --radius:var(--radius-card);
  --radius-leaf:var(--radius-panel);
  --radius-leaf-r:var(--radius-panel);
  --max:1160px;
  --section-space:clamp(58px,7vh,82px);
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  color:var(--ink);
  background: radial-gradient(circle at 15% 5%, rgba(126,159,132,.14), transparent 25%), radial-gradient(circle at 90% 18%, rgba(216,195,159,.15), transparent 26%), var(--cream);
  font-family:system-ui, sans-serif;
  overflow-x:hidden;
}

body.no-scroll {
  overflow:hidden;
}

img {
  max-width:100%;
  display:block;
}

a {
  color:inherit;
  text-decoration:none;
}

button, input, select {
  font:inherit;
}

button {
  cursor:pointer;
}

section {
  position:relative;
}

.wrap {
  width:min(calc(100% - 36px),var(--max));
  margin-inline:auto;
}

/* --------- SISTEMA UNIVERSAL DE SECCIONES --------- */
.page-section {
  min-height:min(760px,100svh);
  max-height:100svh;
  padding:var(--section-space) 0;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.page-section > .wrap {
  width:min(calc(100% - 36px),var(--max));
}

.section-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,460px);
  align-items:end;
  gap:2rem;
  margin-bottom:1.7rem;
}

.section-head.compact {
  margin-bottom:1.35rem;
}

.section-head p {
  margin:0;
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-weight:700;
  color:var(--selva);
  margin-bottom:.65rem;
}

.eyebrow::before {
  content:"";
  width:24px;
  height:2px;
  border-radius:999px;
  background:currentColor;
}

h1, h2, h3 {
  margin:0;
  color:var(--forest-2);
}

h1, h2 {
  font-family:"Arial Black",system-ui,sans-serif;
  letter-spacing:-.03em;
  line-height:1.02;
}

h1 {
  font-size:clamp(2.8rem,6.5vw,5.6rem);
}

h2 {
  font-size:clamp(2rem,3.6vw,3.25rem);
}

h3 {
  font-size:1.15rem;
}

p {
  line-height:1.62;
  color:var(--muted);
  margin:.65rem 0 0;
  font-size:clamp(.93rem,1.2vw,1rem);
}

.btn {
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.76rem 1.08rem;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:700;
  transition:.25s ease;
}

.btn-primary {
  background:var(--forest);
  color:#fff;
}

.btn-primary:hover {
  background:var(--selva);
  transform:translateY(-1px);
}

.btn-ghost {
  background:rgba(255,255,255,.72);
  border-color:var(--line);
  color:var(--forest);
}

.btn-ghost:hover {
  background:#fff;
  border-color:rgba(21,61,47,.25);
}

.btn-small {
  min-height:40px;
  padding:.58rem .95rem;
  font-size:.9rem;
}

.organic-lines {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  opacity:.20;
  background: radial-gradient(ellipse at 20% 30%, transparent 0 34%, rgba(21,61,47,.18) 34.5% 35%, transparent 35.5% 48%, rgba(21,61,47,.12) 48.5% 49%, transparent 49.5%), radial-gradient(ellipse at 80% 70%, transparent 0 32%, rgba(21,61,47,.14) 32.5% 33%, transparent 33.5% 44%, rgba(21,61,47,.10) 44.5% 45%, transparent 45.5%);
  background-size:420px 420px,520px 520px;
  mix-blend-mode:multiply;
}

/* --------- HEADER --------- */
.header {
  position:fixed;
  inset:0 0 auto;
  z-index:50;
  padding:.55rem 0;
  transition:.25s ease;
}

.header.scrolled {
  background:rgba(245,236,220,.9);
  backdrop-filter:blur(16px);
  box-shadow:0 6px 24px rgba(15,47,36,.08);
  border-bottom:1px solid rgba(21,61,47,.08);
}

.nav {
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand {
  display:flex;
  align-items:center;
  gap:.75rem;
  min-width:0;
}

.brand-mark {
  width:46px;
  height:46px;
  border-radius:13px;
  background:var(--forest);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:var(--shadow-soft);
  flex:0 0 auto;
}

.brand-mark svg {
  width:32px;
  height:32px;
}

.brand-name {
  display:flex;
  flex-direction:column;
  line-height:.95;
}

.brand-name strong {
  font-family:"Arial Black",system-ui,sans-serif;
  font-size:1.08rem;
  letter-spacing:-.04em;
  color:var(--forest);
}

.brand-name span {
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
  margin-top:.24rem;
}

.desktop-nav {
  display:flex;
  align-items:center;
  gap:1.15rem;
}

.desktop-nav a {
  font-size:.87rem;
  font-weight:700;
  color:#526158;
  position:relative;
}

.desktop-nav a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:2px;
  border-radius:2px;
  background:var(--selva);
  transform:scaleX(0);
  transform-origin:left;
  transition:.2s ease;
}

.desktop-nav a:hover::after, .desktop-nav a.active::after {
  transform:scaleX(1);
}

.desktop-nav a.active {
  color:var(--forest);
}

/* --------- HERO --------- */
.hero {
  min-height:100svh;
  max-height:100svh;
  display:grid;
  align-items:end;
  padding:104px 0 34px;
  overflow:hidden;
  background: #102c22;
}

.hero::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:28%;
  background:linear-gradient(transparent,var(--cream));
  pointer-events:none;
}

.hero-grid {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.5fr);
  gap:1.7rem;
  align-items:end;
}

.hero-copy {
  padding-bottom:6vh;
  max-width:760px;
}

.hero .eyebrow {
  color:#dfeadf;
}

.hero h1 {
  color:#fff;
  max-width:780px;
}

.hero-lead {
  color:rgba(255,255,255,.82);
  max-width:650px;
  font-size:clamp(.98rem,1.7vw,1.12rem);
}

.hero-actions {
  display:flex;
  gap:.72rem;
  flex-wrap:wrap;
  margin-top:1.45rem;
}

.hero-actions .btn-ghost {
  background:rgba(255,255,255,.12);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  backdrop-filter:blur(10px);
}

.hero-note {
  justify-self:end;
  align-self:end;
  margin-bottom:6vh;
  width:min(100%,320px);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(12,45,33,.62);
  color:#fff;
  border-radius:var(--radius-leaf-r);
  padding:1.1rem;
  backdrop-filter:blur(12px);
  box-shadow:0 22px 55px rgba(0,0,0,.18);
}

.hero-note strong {
  display:block;
  font-family:"Arial Black",system-ui,sans-serif;
  font-size:1.14rem;
  line-height:1.05;
}

.hero-note p {
  color:rgba(255,255,255,.74);
  font-size:.89rem;
}

.tags {
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:.85rem;
}

.tag {
  padding:.32rem .58rem;
  border-radius:999px;
  background:rgba(255,255,255,.11);
  font-size:.7rem;
  font-weight:700;
}

/* --------- STORY --------- */
.story {
  background:transparent;
}

.story-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:3rem;
  align-items:center;
}

.story-card {
  background:var(--forest);
  color:#fff;
  border-radius:var(--radius-leaf);
  padding:1.7rem;
  min-height:360px;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.story-card .line-art {
  position:absolute;
  right:-35px;
  top:-25px;
  width:260px;
  height:260px;
  opacity:.16;
}

.story-card h3 {
  color:#fff;
  font-size:clamp(1.55rem,2.6vw,2.35rem);
  font-family:"Arial Black",system-ui,sans-serif;
  line-height:1.04;
}

.story-card p {
  color:rgba(255,255,255,.73);
}

.fact-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
  margin-top:1.15rem;
}

.fact {
  border-top:1px solid var(--line);
  padding-top:.75rem;
}

.fact strong {
  display:block;
  color:var(--forest);
  font-size:.9rem;
}

.fact span {
  display:block;
  color:var(--muted);
  font-size:.87rem;
  margin-top:.13rem;
}

/* --------- EXPERIENCE --------- */
.experience-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.85rem;
}

.experience-card {
  min-height:230px;
  background:rgba(255,255,255,.5);
  border:1px solid var(--line);
  border-radius:20px;
  padding:1.25rem;
  position:relative;
  overflow:hidden;
  transition:.25s ease;
}

.experience-card:nth-child(2) {
  border-radius:var(--radius-leaf-r);
  transform:translateY(20px);
}

.experience-card:nth-child(3) {
  border-radius:var(--radius-leaf);
}

.experience-card:hover {
  background:rgba(255,255,255,.82);
  transform:translateY(-3px);
}

.experience-card:nth-child(2):hover {
  transform:translateY(17px);
}

.experience-card h3 {
  margin-top:.2rem;
  color:var(--forest);
}

.experience-card p {
  font-size:.9rem;
}

/* --------- COFFEE --------- */
/* --------- KITCHEN --------- */
/* --------- CARTA: CARDS + PRECIOS + LIGHTBOX --------- */
.menu-section {
  background:rgba(255,255,255,.30);
}

.menu-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}

.filters {
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
}

.filter {
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--forest);
  border-radius:999px;
  padding:.55rem .85rem;
  font-weight:700;
  font-size:.86rem;
}

.filter.active {
  background:var(--forest);
  color:#fff;
  border-color:var(--forest);
}

.dish-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.75rem;
}

.dish-card {
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(15,47,36,.05);
  transition:.25s ease;
  cursor:pointer;
}

.dish-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow-soft);
}

.dish-image {
  height:150px;
  overflow:hidden;
  position:relative;
  background:#dedbd2;
}

.dish-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.45s ease;
}

.dish-card:hover .dish-image img {
  transform:scale(1.045);
}

.dish-badge {
  position:absolute;
  left:.6rem;
  top:.6rem;
  padding:.3rem .52rem;
  border-radius:999px;
  background:rgba(245,236,220,.9);
  color:var(--forest);
  font-size:.68rem;
  font-weight:800;
  backdrop-filter:blur(8px);
}

.dish-body {
  padding:.95rem;
}

.dish-title-row {
  display:flex;
  justify-content:space-between;
  gap:.7rem;
  align-items:start;
}

.dish-card h3 {
  font-size:1rem;
}

.dish-price {
  font-weight:800;
  color:var(--earth);
  white-space:nowrap;
  font-size:.95rem;
}

.dish-card p {
  font-size:.82rem;
  line-height:1.5;
}

.dish-card small {
  display:block;
  margin-top:.55rem;
  color:#7a877f;
  font-size:.68rem;
}

.menu-note {
  margin-top:.8rem;
  padding:.75rem .9rem;
  border-radius:15px;
  background:rgba(216,195,159,.22);
  color:var(--muted);
  font-size:.78rem;
  border:1px dashed rgba(21,61,47,.18);
}

.lightbox {
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(7,23,17,.84);
  display:grid;
  place-items:center;
  padding:1rem;
  opacity:0;
  visibility:hidden;
  transition:.22s ease;
  backdrop-filter:blur(8px);
}

.lightbox-card {
  width:min(920px,96vw);
  max-height:88svh;
  background:var(--paper);
  border-radius:28px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  box-shadow:0 28px 90px rgba(0,0,0,.34);
  transform:translateY(18px) scale(.98);
  transition:.22s ease;
}

.lightbox-media {
  min-height:420px;
  background:#ddd;
}

.lightbox-media img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.lightbox-copy {
  padding:1.6rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}

.lightbox-close {
  position:absolute;
  right:1rem;
  top:1rem;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--forest);
  font-size:1rem;
}

.lightbox-copy h3 {
  font-family:"Arial Black",system-ui,sans-serif;
  font-size:1.8rem;
}

.lightbox-price {
  font-size:1.3rem;
  font-weight:800;
  color:var(--earth);
  margin-top:.7rem;
}

.lightbox-note {
  font-size:.76rem;
  color:#78847d;
  margin-top:.8rem;
}

/* --------- CULTURE: EDITORIAL VISUAL --------- */
/* --------- HISTORY / ORIGIN --------- */
/* --------- SPACE --------- */
.space {
  background:var(--paper);
}

.gallery {
  display:grid;
  grid-template-columns:1.3fr .7fr .7fr;
  grid-template-rows:210px 210px;
  gap:.65rem;
}

.gallery figure {
  margin:0;
  overflow:hidden;
  border-radius:18px;
  position:relative;
  background:#dcd8cf;
}

.gallery figure:first-child {
  grid-row:1/3;
  border-radius:var(--radius-leaf-r);
}

.gallery figure:nth-child(4) {
  grid-column:2/4;
}

.gallery img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.5s ease;
}

.gallery figure:hover img {
  transform:scale(1.035);
}

.gallery figcaption {
  position:absolute;
  left:.8rem;
  bottom:.8rem;
  color:#fff;
  font-weight:700;
  font-size:.8rem;
  text-shadow:0 2px 18px rgba(0,0,0,.5);
}

/* --------- REVIEWS SLIDER 3D --------- */
/* --------- VISITANOS — SIMPLE, VISUAL, DIRECTO --------- */
.visit {
  background:var(--forest);
  color:#fff;
}

.visit .eyebrow {
  color:#d9ead7;
}

.visit h2 {
  color:#fff;
}

.visit-shell {
  display:grid;
  grid-template-columns:.38fr .62fr;
  min-height:min(64vh,500px);
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 28px 70px rgba(0,0,0,.17);
  background:rgba(255,255,255,.04);
}

.visit-card {
  padding:1.6rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background: radial-gradient(circle at 88% 12%,rgba(255,255,255,.09),transparent 24%), rgba(255,255,255,.045);
}

.visit-card h2 {
  font-size:clamp(1.9rem,3vw,2.65rem);
  max-width:360px;
}

.visit-address {
  margin-top:.85rem;
  color:rgba(255,255,255,.78);
  font-size:.95rem;
  line-height:1.5;
}

.visit-meta {
  display:grid;
  gap:.65rem;
  margin-top:1.3rem;
}

.visit-line {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding-top:.65rem;
  border-top:1px solid rgba(255,255,255,.11);
}

.visit-line strong {
  color:#fff;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.visit-line span {
  color:rgba(255,255,255,.66);
  font-size:.82rem;
  text-align:right;
}

.visit-actions {
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:1.2rem;
}

.visit .btn-primary {
  background:var(--paper);
  color:var(--forest);
}

.visit .btn-primary:hover {
  background:#fff;
}

.visit .btn-ghost {
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.18);
}

/* --------- FOOTER / FAB / MOBILE --------- */
footer {
  padding:1.8rem 0 2.2rem;
  border-top:1px solid var(--line);
}

.footer-grid {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
  flex-wrap:wrap;
}

.footer-meta {
  color:var(--muted);
  font-size:.82rem;
}

.footer-links {
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
  font-weight:700;
  color:var(--forest);
  font-size:.86rem;
}

.social-fab {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:45;
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--forest);
  color:#fff;
  box-shadow:0 14px 34px rgba(15,47,36,.26);
  transition:.2s ease;
}

.social-fab:hover {
  transform:translateY(-2px);
  background:var(--selva);
}

.social-fab svg {
  width:22px;
  height:22px;
}

.reveal {
  opacity:0;
  transform:translateY(16px);
  transition:.6s ease;
}

.reveal.visible {
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important;
  }
  .reveal {
    opacity:1;
    transform:none;
  }
}