/* ============================================================
   GARI CAFÉ — refined landing
   Theming driven by [data-direction] + --accent-hue
   ============================================================ */

:root {
  --accent-hue: #2B4FFF;            /* set by tweak */
  --nav-h: 92px;
  --maxw: 1240px;
  /* default tokens (Editorial) overridden per direction below */
  --bg:#FBFAF7; --surface:#FFFFFF; --bg-alt:#F2EFE9;
  --text:#17181C; --text-soft:#5C5E66; --border:#E7E3DB;
  --accent:var(--accent-hue); --on-accent:#FFFFFF;
  --font-display:'Newsreader', Georgia, serif;
  --font-body:'Archivo', system-ui, sans-serif;
  --display-weight:560; --display-tracking:-0.01em; --display-leading:1.02;
  --radius:14px; --radius-lg:22px;
  --ink-blue:#0E1A4D;
}

/* ---------- DIRECTION 1 · Editorial ---------- */
body[data-direction="d1"] {
  --bg:#FBFAF7; --surface:#FFFFFF; --bg-alt:#F2EFE9;
  --text:#17181C; --text-soft:#5C5E66; --border:#E7E3DB;
  --font-display:'Newsreader', Georgia, serif;
  --font-body:'Archivo', system-ui, sans-serif;
  --display-weight:560; --display-tracking:-0.005em; --display-leading:1.04;
}
body[data-direction="d1"] .display em { font-style:italic; color:var(--accent); }

/* ---------- DIRECTION 2 · Moderno ---------- */
body[data-direction="d2"] {
  --bg:#F6F7FA; --surface:#FFFFFF; --bg-alt:#ECEFF5;
  --text:#0E1116; --text-soft:#545A64; --border:#E1E5EC;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Space Grotesk', system-ui, sans-serif;
  --display-weight:600; --display-tracking:-0.03em; --display-leading:0.98;
  --radius:10px; --radius-lg:16px;
}
body[data-direction="d2"] .display em { font-style:normal; color:var(--accent); }
body[data-direction="d2"] .eyebrow,
body[data-direction="d2"] .nav-links a { letter-spacing:0.14em; }

/* ---------- DIRECTION 3 · Cálido Premium ---------- */
body[data-direction="d3"] {
  --bg:#F6F0E6; --surface:#FDFBF6; --bg-alt:#EEE6D6;
  --text:#241F18; --text-soft:#6B6157; --border:#E4D9C6;
  --font-display:'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:'DM Sans', system-ui, sans-serif;
  --display-weight:700; --display-tracking:-0.02em; --display-leading:1.0;
  --radius:18px; --radius-lg:26px;
}
body[data-direction="d3"] .display em { font-style:italic; color:var(--accent); }

/* ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }

/* scroll por secciones: el snap suave lo maneja menu.js (clase .snap-sections) */
body {
  font-family:var(--font-body);
  background:var(--bg); color:var(--text);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  transition:background .35s ease, color .35s ease;
}
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 48px; }

.display {
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking);
  line-height:var(--display-leading);
}
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.72rem; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--accent);
}
.eyebrow::before { content:""; width:22px; height:1.5px; background:var(--accent); display:inline-block; }

/* ---------------- NAV ---------------- */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200; height:var(--nav-h);
  display:flex; align-items:center;
  background:var(--accent);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s;
}
nav.scrolled {
  box-shadow:0 8px 28px -16px rgba(0,0,0,.55);
}
nav .wrap { display:flex; align-items:center; justify-content:space-between; width:100%; }
.nav-logo img { height:64px; width:auto; display:block; filter:brightness(0) invert(1); }
.nav-right { display:flex; align-items:center; gap:42px; }
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a {
  color:#fff; text-decoration:none; font-size:1rem; font-weight:500;
  letter-spacing:0.04em; opacity:.82; transition:opacity .2s;
}
.nav-links a:hover { opacity:1; }
.nav-cta {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:#fff; color:var(--accent); text-decoration:none;
  font-size:0.96rem; font-weight:700; padding:13px 26px; border-radius:50px;
  transition:transform .2s, box-shadow .2s;
}
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 8px 22px -8px rgba(0,0,0,.45); }
.nav-ig { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); transition:background .2s, border-color .2s, transform .2s; }
.nav-ig:hover { background:rgba(255,255,255,.16); border-color:#fff; transform:translateY(-1px); }
.nav-ig svg { display:block; pointer-events:none; }

/* hamburger + mobile menu */
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span { width:26px; height:2.5px; background:#fff; border-radius:2px; transition:transform .25s, opacity .2s; }
.mobile-menu { display:none; }

/* ---------------- HERO ---------------- */
.hero { padding-top:calc(var(--nav-h) + 40px); padding-bottom:80px; }
.hero .wrap {
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;
  min-height:calc(100vh - var(--nav-h) - 40px);
}
.hero-left { max-width:560px; }
.hero h1 { font-size:clamp(2.8rem, 5.2vw, 4.6rem); margin:22px 0 24px; }
.hero-sub { color:var(--text-soft); font-size:1.08rem; line-height:1.65; max-width:430px; margin-bottom:36px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.btn-primary {
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  background:var(--accent); color:var(--on-accent); text-decoration:none;
  font-weight:600; font-size:0.95rem; padding:15px 28px; border-radius:50px;
  transition:transform .2s, box-shadow .2s;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 30px -12px var(--accent); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--text); text-decoration:none; font-weight:600; font-size:0.95rem;
  padding:15px 26px; border-radius:50px; border:1.5px solid var(--border);
  transition:border-color .2s, background .2s;
}
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

.hero-trust { display:flex; align-items:center; gap:22px; margin-top:34px; }
.hero-trust .stars { color:#E8A317; letter-spacing:2px; font-size:0.95rem; }
.hero-trust .t-meta { font-size:0.82rem; color:var(--text-soft); line-height:1.4; }
.hero-trust .t-meta strong { color:var(--text); display:block; font-weight:600; }
.hero-trust .divider { width:1px; height:34px; background:var(--border); }

.hero-media { position:relative; }
.hero-media .photo { aspect-ratio:4/4.4; border-radius:var(--radius-lg); }
.hero-badge {
  position:absolute; left:-22px; bottom:32px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 20px;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.45); width:248px;
}
.hero-badge .pin { color:var(--accent); font-weight:700; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; }
.hero-badge strong { display:block; font-family:var(--font-display); font-weight:var(--display-weight); font-size:1.05rem; line-height:1.25; margin:6px 0; }
.hero-badge span { font-size:0.8rem; color:var(--text-soft); }

/* ---------------- PHOTO PLACEHOLDER ---------------- */
.photo {
  position:relative; overflow:hidden; background:var(--bg-alt);
  border:1px solid var(--border);
  background-image:repeating-linear-gradient(135deg,
    transparent 0, transparent 13px,
    color-mix(in srgb, var(--text) 6%, transparent) 13px,
    color-mix(in srgb, var(--text) 6%, transparent) 14px);
}
.photo.has-img { background-image:none; }
.photo.has-img::after { display:none; }
.photo::after {
  content:attr(data-label);
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:'Space Mono', ui-monospace, monospace;
  font-size:0.7rem; letter-spacing:0.04em; color:var(--text-soft);
  background:var(--surface); border:1px solid var(--border);
  padding:6px 12px; border-radius:50px; white-space:nowrap;
}

/* ---------------- SECTION SHELL ---------------- */
section { position:relative; }
.section-head { max-width:560px; margin:0 auto 56px; text-align:center; }
.section-head h2 { font-size:clamp(2rem, 3.6vw, 3rem); margin:16px 0 14px; }
.section-head p { color:var(--text-soft); line-height:1.6; }
.section-head p.menu-hook { font-size:1.2rem; color:var(--text); font-weight:500; }

/* ---------------- NOSOTROS ---------------- */
#nosotros { padding:110px 0; background:var(--bg-alt); }
#nosotros .wrap { display:grid; grid-template-columns:0.95fr 1.05fr; gap:72px; align-items:center; }
.nosotros-media .logo-card {
  background:var(--accent); border-radius:var(--radius-lg); padding:72px 56px;
  box-shadow:0 28px 70px -34px var(--accent);
}
.nosotros-media .logo-card img { width:100%; display:block; filter:brightness(0) invert(1); }
.nosotros-collage {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  grid-auto-rows:minmax(150px, 1fr);
}
.nosotros-collage img {
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:var(--radius); border:1px solid var(--border);
}
.nosotros-collage .c-tall { grid-row:span 2; }
.nosotros-collage .c-wide { grid-column:1 / -1; height:170px; }
.nosotros-single img {
  width:100%; aspect-ratio:4/4.7; object-fit:cover; display:block;
  border-radius:var(--radius-lg); border:1px solid var(--border);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.4);
}
.nosotros-text h2 { font-size:clamp(2rem,3.4vw,2.8rem); margin:18px 0 22px; }
.nosotros-text p { color:var(--text-soft); font-size:1.02rem; line-height:1.8; margin-bottom:16px; }
.nosotros-stats { display:flex; align-items:center; gap:44px; margin-top:36px; padding-top:32px; border-top:1px solid var(--border); }
.stat-ig { margin-left:18px; }
.stat strong { font-family:var(--font-display); font-weight:var(--display-weight); font-size:2rem; color:var(--accent); display:block; line-height:1; }
.stat span { font-size:0.8rem; color:var(--text-soft); margin-top:6px; display:block; }

/* ---------------- MENU ---------------- */
#menu { padding:110px 0; background:var(--bg); }
.menu-tabs { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:52px; }
.tab-btn {
  padding:9px 20px; border-radius:50px; border:1.5px solid var(--border);
  background:transparent; color:var(--text); cursor:pointer;
  font-family:var(--font-body); font-size:0.85rem; font-weight:500;
  transition:all .2s;
}
.tab-btn:hover { border-color:var(--accent); color:var(--accent); }
.tab-btn.active { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* — list layout — */
.menu-list .menu-group { margin-bottom:54px; }
.menu-list .menu-group:last-child { margin-bottom:0; }
.menu-group-title {
  font-family:var(--font-display); font-weight:var(--display-weight);
  font-size:1.4rem; letter-spacing:var(--display-tracking);
  padding-bottom:14px; margin-bottom:8px; border-bottom:1px solid var(--border);
  display:flex; align-items:baseline; justify-content:space-between;
}
.menu-group-title span { font-family:var(--font-body); font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-soft); }
.menu-list .item-rows { columns:2; column-gap:64px; }
@media (max-width:820px){ .menu-list .item-rows { columns:1; } }
.menu-row { break-inside:avoid; padding:15px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.menu-row .row-top { display:flex; align-items:baseline; gap:10px; }
.menu-row .r-name { font-weight:600; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.menu-row .leader { flex:1; border-bottom:1.5px dotted color-mix(in srgb, var(--text) 28%, transparent); transform:translateY(-4px); min-width:18px; }
.menu-row .r-price { font-family:var(--font-display); font-weight:var(--display-weight); color:var(--accent); font-size:1.05rem; white-space:nowrap; }
.menu-row .r-desc { color:var(--text-soft); font-size:0.86rem; line-height:1.45; margin-top:4px; max-width:90%; }
.r-tag {
  display:inline-block; font-size:0.6rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding:2px 7px; border-radius:50px; margin-left:8px; vertical-align:middle;
}

/* — card layout — */
.menu-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:22px; }
.m-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.m-card:hover { transform:translateY(-4px); box-shadow:0 22px 48px -28px rgba(0,0,0,.4); border-color:color-mix(in srgb, var(--accent) 35%, var(--border)); }
.m-card .photo { height:150px; }
.m-card .photo::after { font-size:0.62rem; padding:4px 9px; }
.m-card-body { padding:16px 18px 8px; flex:1; }
.m-card-body h3 { font-family:var(--font-display); font-weight:var(--display-weight); font-size:1.05rem; line-height:1.2; margin-bottom:6px; }
.m-card-body p { color:var(--text-soft); font-size:0.84rem; line-height:1.45; }
.m-card-foot { display:flex; align-items:center; justify-content:space-between; padding:10px 18px 16px; }
.m-card-foot .r-price { font-family:var(--font-display); font-weight:var(--display-weight); font-size:1.2rem; color:var(--accent); }

.menu-note { text-align:center; color:var(--text-soft); font-size:0.78rem; margin-top:44px; opacity:.8; }

/* ---------------- VISITA ---------------- */
#visita { padding:110px 0; background:var(--bg-alt); }
#visita .wrap { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:stretch; }
.visita-info h2 { font-size:clamp(2rem,3.4vw,2.8rem); margin:18px 0 32px; }
.horario-row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); }
.horario-row:last-child { border-bottom:none; }
.horario-row .dia { font-weight:500; }
.horario-row .hora { font-family:var(--font-display); font-weight:var(--display-weight); color:var(--accent); }
.horario-row .hora.closed { color:var(--text-soft); }
.visita-address { margin-top:34px; display:flex; gap:16px; align-items:flex-start; }
.visita-address .pin-ic { width:40px; height:40px; flex-shrink:0; border-radius:50%; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; font-size:1rem; }
.visita-address h4 { font-family:var(--font-display); font-weight:var(--display-weight); font-size:1.15rem; margin-bottom:4px; }
.visita-address p { color:var(--text-soft); font-size:0.92rem; line-height:1.5; }
.visita-address a { color:var(--accent); text-decoration:none; font-weight:600; font-size:0.9rem; display:inline-block; margin-top:8px; }
.visita-address a:hover { text-decoration:underline; }
.visita-map { border-radius:var(--radius-lg); min-height:420px; }
iframe.visita-map { width:100%; border:1px solid var(--border); display:block; }

/* ---------------- FOOTER ---------------- */
footer { background:var(--ink-blue); color:#fff; padding:72px 0 38px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:60px; margin-bottom:52px; }
.footer-brand img { height:46px; width:auto; margin-bottom:18px; display:block; filter:brightness(0) invert(1); }
.footer-brand p { opacity:.6; font-size:0.92rem; line-height:1.7; max-width:300px; }
.footer-col h4 { font-weight:600; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; margin-bottom:18px; opacity:.5; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:11px; }
.footer-col a { color:rgba(255,255,255,.78); text-decoration:none; font-size:0.92rem; }
.footer-col a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,.14); padding-top:26px; font-size:0.8rem; opacity:.55; }

/* ---------------- INSTAGRAM HERO BUTTON ---------------- */
.btn-instagram {
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  color:#fff; text-decoration:none; font-weight:600; font-size:0.98rem;
  padding:15px 28px; border-radius:50px;
  background:var(--accent);
  box-shadow:0 12px 30px -12px var(--accent);
  transition:transform .2s, box-shadow .2s;
}
.btn-instagram:hover { transform:translateY(-2px); box-shadow:0 18px 40px -14px var(--accent); }
.btn-instagram svg { flex-shrink:0; }
.hero-handle { color:var(--text-soft); text-decoration:none; font-weight:600; font-size:0.95rem; align-self:center; }
.hero-handle:hover { color:var(--accent); }

/* ---------------- CATEGORY COVERS ---------------- */
.cat-covers { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:46px; }
.cat-cover {
  position:relative; aspect-ratio:3/4; border:5px solid transparent; cursor:pointer; padding:0;
  border-radius:var(--radius); overflow:hidden;
  background-size:cover; background-position:center;
  box-shadow:0 14px 34px -22px rgba(0,0,0,.5);
  transition:transform .25s, box-shadow .25s, border-color .2s;
}
.cat-cover:hover { transform:translateY(-4px); box-shadow:0 22px 46px -22px rgba(0,0,0,.55); }
.cat-cover.active {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent);
}
.cat-cover .cc-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,12,40,.68) 0%, rgba(10,12,40,.06) 55%, rgba(10,12,40,.16) 100%);
  transition:background .25s;
}
.cat-cover:hover .cc-overlay {
  background:linear-gradient(to top, rgba(10,12,40,.8) 0%, rgba(10,12,40,.18) 60%, rgba(10,12,40,.2) 100%);
}
.cat-cover .cc-label {
  position:absolute; left:8px; right:8px; bottom:16px; text-align:center;
  font-family:var(--font-display); font-weight:var(--display-weight);
  color:#fff; font-size:1.12rem; letter-spacing:0.01em;
  text-shadow:0 2px 10px rgba(0,0,0,.45); transition:font-size .25s, transform .25s;
}
.cat-cover:hover .cc-label, .cat-cover.active .cc-label { font-size:1.32rem; transform:translateY(-2px); }
@media (hover:none){ .cat-cover .cc-label{ font-size:1.16rem; } }

/* ---------------- NUESTRO CAFÉ ---------------- */
#cafe { padding:110px 0; background:var(--bg-alt); }
.origenes { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:40px; }
.origen-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.origen-card:hover { transform:translateY(-4px); box-shadow:0 22px 48px -28px rgba(0,0,0,.4); border-color:color-mix(in srgb, var(--accent) 35%, var(--border)); }
.origen-card .photo { aspect-ratio:4/3.1; }
.origen-body { padding:18px 22px 22px; }
.origen-body .o-flag { font-size:0.7rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); }
.origen-body h3 { font-family:var(--font-display); font-weight:var(--display-weight); font-size:1.35rem; margin:6px 0 8px; }
.origen-body p { color:var(--text-soft); font-size:0.9rem; line-height:1.6; }

.cafe-forajida {
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:30px 36px;
}
.cafe-forajida .cf-text .cf-eyebrow { font-size:0.7rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); }
.cafe-forajida .cf-text h4 { font-family:var(--font-display); font-weight:var(--display-weight); font-size:1.3rem; margin:6px 0 6px; }
.cafe-forajida .cf-text p { color:var(--text-soft); font-size:0.95rem; line-height:1.6; max-width:560px; }
.cafe-forajida .cf-cta { white-space:nowrap; }

/* ---------------- REVIEWS ---------------- */
#resenas { padding:110px 0; background:var(--bg); }
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.review-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 24px; display:flex; flex-direction:column; gap:14px;
  box-shadow:0 16px 44px -32px rgba(0,0,0,.4);
}
.review-card .r-stars { color:#E8A317; letter-spacing:2px; font-size:0.95rem; }
.review-card blockquote { font-size:1.02rem; line-height:1.55; color:var(--text); flex:1; }
.review-card figcaption { display:flex; align-items:center; gap:12px; }
.review-card .r-avatar {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:var(--accent); color:var(--on-accent); display:grid; place-items:center;
  font-family:var(--font-display); font-weight:var(--display-weight); font-size:1.1rem;
}
.review-card figcaption span:not(.r-avatar) { display:flex; flex-direction:column; line-height:1.3; }
.review-card figcaption strong { font-weight:600; font-size:0.95rem; }
.review-card figcaption em { font-style:normal; font-size:0.78rem; color:var(--text-soft); }
.reviews-cta { display:block; text-align:center; margin-top:38px; color:var(--accent); font-weight:600; text-decoration:none; font-size:0.95rem; }
.reviews-cta:hover { text-decoration:underline; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:900px) {
  body { --nav-h:66px; }
  .wrap { padding:0 22px; }
  .nav-links { display:none; }
  .nav-logo img { height:40px; }
  .nav-cta.in-bar { display:none; }
  .nav-toggle { display:flex; }
  body.menu-open .nav-toggle span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
  body.menu-open .nav-toggle span:nth-child(2) { opacity:0; }
  body.menu-open .nav-toggle span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }
  .mobile-menu {
    display:block; position:fixed; top:var(--nav-h); left:0; right:0; z-index:190;
    background:var(--accent); padding:6px 22px 26px;
    transform:translateY(-130%); transition:transform .32s ease;
    box-shadow:0 20px 44px -20px rgba(0,0,0,.55);
  }
  body.menu-open .mobile-menu { transform:translateY(0); }
  .mobile-menu .m-link {
    display:block; color:#fff; text-decoration:none; font-size:1.15rem; font-weight:500;
    padding:17px 2px; border-bottom:1px solid rgba(255,255,255,.18);
  }
  .mobile-menu .nav-cta { margin-top:20px; width:100%; justify-content:center; font-size:1rem; padding:15px; }

  .hero { padding-top:calc(var(--nav-h) + 28px); padding-bottom:60px; }
  .hero .wrap { grid-template-columns:1fr; gap:36px; min-height:0; }
  .hero h1 { font-size:clamp(2.6rem, 11vw, 3.4rem); margin:18px 0 20px; }
  .hero-sub { font-size:1rem; }
  .hero-media { order:-1; }
  .hero-media .photo { aspect-ratio:4/3.4; }
  .hero-badge { left:12px; bottom:12px; width:auto; max-width:74%; padding:13px 16px; }
  .hero-actions { gap:12px; }
  .btn-primary, .btn-ghost { padding:14px 22px; font-size:0.92rem; }

  .section-head { margin-bottom:40px; }
  #nosotros .wrap, #visita .wrap { grid-template-columns:1fr; gap:40px; }
  .nosotros-single img { aspect-ratio:4/3.6; }
  .nosotros-stats { flex-wrap:wrap; gap:26px 36px; }
  .visita-map { min-height:320px; }
  .footer-grid { grid-template-columns:1fr; gap:34px; }
  .footer-bottom { flex-direction:column; gap:8px; }
  #nosotros, #menu, #visita { padding:66px 0; }
  #resenas { padding:66px 0; }
  .cat-covers { grid-template-columns:repeat(3,1fr); gap:12px; }
  .reviews-grid { grid-template-columns:repeat(2,1fr); }
  .origenes { grid-template-columns:1fr 1fr; }
  #cafe { padding:66px 0; }
  .cafe-forajida { flex-direction:column; align-items:flex-start; padding:26px 26px; }
}

@media (max-width:560px) {
  .hero h1 { font-size:clamp(2.2rem, 12vw, 2.9rem); }
  .menu-tabs { gap:8px; }
  .tab-btn { padding:8px 16px; font-size:0.8rem; }
  .nosotros-stats .stat strong { font-size:1.7rem; }
  .cat-covers { grid-template-columns:repeat(2,1fr); }
  .reviews-grid { grid-template-columns:1fr; }
  .origenes { grid-template-columns:1fr; }
}