/* ============================================================
   Bench Café · Dirección A «The bench» (concepto no oficial)
   Paleta bloqueada: verde parque #2F5233 · roble #A9743F ·
   blanco cálido #FAF7EF · tinta suave #26241E
   Sistema de forma: interacción y rótulos = píldora;
   superficies = radio 16 a 22px. Cero JavaScript.
   ============================================================ */

:root{
  --green:#2F5233;
  --green-deep:#25422A;
  --oak:#A9743F;
  --oak-deep:#7C5229;
  --cream:#FAF7EF;
  --paper:#FFFEF9;
  --ink:#26241E;
  --ink-mut:#4A463C;
  --line:#E8E0CC;
  --shadow-warm:0 16px 28px -18px rgba(45,24,6,.5);
  /* La tira de madera: vetas, juntas entre tablones y base roble plano,
     para que la banda se lea continua entre hero y carta. */
  --wood:
    repeating-linear-gradient(90deg,
      rgba(255,250,236,.10) 0 2px,
      rgba(255,250,236,0) 2px 6px,
      rgba(56,32,10,.16) 6px 8px,
      rgba(56,32,10,0) 8px 140px),
    repeating-linear-gradient(0deg,
      rgba(56,32,10,.055) 0 1px,
      rgba(56,32,10,0) 1px 7px),
    repeating-linear-gradient(90deg,
      rgba(56,32,10,.05) 0 340px,
      rgba(255,250,236,.05) 340px 680px),
    #A9743F;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:400 16px/1.6 Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow-x:clip;
  padding-bottom:calc(58px + env(safe-area-inset-bottom));
}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
address{font-style:normal}
.wrap{width:min(1240px,100% - 40px);margin-inline:auto}
section{scroll-margin-top:10px}

:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
.on-wood :focus-visible,.bottombar :focus-visible{outline-color:var(--cream)}
::selection{background:var(--green);color:var(--cream)}

.skip-link{
  position:absolute;left:14px;top:-64px;z-index:100;
  background:var(--green);color:var(--cream);
  padding:10px 16px;border-radius:999px;font-weight:700;text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus-visible{top:14px}

/* ============ La banca de madera ============ */
.bench{background:var(--wood);position:relative}

/* ============ Hero ============ */
.hero{display:flex;flex-direction:column;height:min(45svh,470px);min-height:328px}
.hero__photo{flex:1;min-height:104px;overflow:hidden;background:var(--oak-deep)}
.hero__photo img{width:100%;height:100%;object-fit:cover}
.hero__bench{
  padding:clamp(18px,4vw,28px) clamp(18px,5vw,44px) clamp(20px,4vw,30px);
  box-shadow:inset 0 12px 16px -12px rgba(255,248,231,.45);
}
.hero__wordmark{
  margin:0;color:var(--cream);
  font-weight:900;text-transform:uppercase;letter-spacing:.05em;line-height:1.04;
  font-size:clamp(30px,8.4vw,56px);
}
.hero__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
.hero__promise{
  margin:0;background:var(--cream);color:var(--ink);
  font-weight:600;font-size:clamp(14px,3.6vw,16px);line-height:1.45;
  padding:10px 14px;border-radius:16px;max-width:46ch;
  box-shadow:var(--shadow-warm);
}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--green);color:var(--cream);text-decoration:none;
  font-weight:800;font-size:16px;padding:13px 20px;border-radius:999px;
  box-shadow:var(--shadow-warm);
  transition:transform .15s ease,background-color .15s ease;
}
.btn:hover{background:var(--green-deep)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px}
@media (max-height:600px){
  .hero{height:auto;min-height:0}
}

/* ============ La banca (carta) ============ */
.menu{position:relative}
.menu__bench{
  padding:clamp(30px,5vw,56px) 0 clamp(58px,8vw,92px);
  box-shadow:
    inset 0 1px 0 rgba(255,248,231,.28),
    inset 0 -18px 22px -14px rgba(45,24,6,.55);
}
.menu__head{
  background:var(--paper);border-radius:22px;
  padding:clamp(18px,3.4vw,30px);
  box-shadow:var(--shadow-warm);
  display:flex;gap:18px;align-items:center;justify-content:space-between;
}
.menu__head h2{margin:0;font-size:clamp(26px,4.6vw,38px);font-weight:900}
.menu__intro{margin:8px 0 0;max-width:52ch;color:var(--ink-mut);font-size:15.5px}
.menu__chip{
  flex:0 0 auto;width:clamp(76px,12vw,104px);aspect-ratio:1;
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow-warm);
}
.menu__chip img{width:100%;height:100%;object-fit:cover}

.bench__track{
  position:relative;z-index:1;
  display:flex;align-items:stretch;gap:14px;
  margin-top:clamp(22px,4vw,34px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-inline:
    max(20px,calc((100% - 1240px) / 2 + 20px))
    max(20px,calc((100% - 1240px) / 2 + 20px));
  scroll-padding-inline:
    max(20px,calc((100% - 1240px) / 2 + 20px));
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.bench__track::-webkit-scrollbar{display:none}
.bench__track:focus-visible{outline:3px solid var(--cream);outline-offset:-3px}

.sign{
  margin:0;flex:0 0 auto;align-self:center;
  background:var(--green);color:var(--cream);
  font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 14px;border-radius:12px;box-shadow:var(--shadow-warm);
  position:relative;
  scroll-snap-align:center;
}
.sign::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--green);
}
.sign--first{margin-inline-start:max(20px,calc((100% - 1240px) / 2 + 20px))}
.sign:not(.sign--first){margin-inline-start:24px}

.setting{
  scroll-snap-align:center;
  flex:0 0 min(74vw,300px);
  background:var(--paper);border-radius:18px;
  padding:20px 18px 22px;
  box-shadow:var(--shadow-warm);
  display:flex;flex-direction:column;gap:8px;
}
.setting h4{margin:2px 0 0;font-size:17.5px;font-weight:800;letter-spacing:.01em}
.setting p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-mut)}

.menu__note{margin:16px auto 0;text-align:center;font-size:14px;color:var(--ink-mut)}

/* ============ Momento combo ============ */
.combos{padding:clamp(56px,9vw,96px) 0 clamp(48px,7vw,80px)}
.combos .wrap{display:grid;gap:clamp(20px,4vw,40px)}
.combos__fig{
  background:var(--wood);padding:0 0 14px;border-radius:22px;
  box-shadow:var(--shadow-warm);overflow:hidden;
}
.combos__fig img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:22px 22px 12px 12px;
}
.combos h2{margin:0 0 10px;font-size:clamp(24px,4vw,34px);font-weight:900}
.combos p{margin:0;color:var(--ink-mut);max-width:52ch}

/* ============ Encuentro ============ */
.encuentro{padding:clamp(48px,8vw,88px) 0 clamp(64px,9vw,110px)}
.encuentro .wrap{display:grid;gap:clamp(20px,4vw,40px)}
.encuentro__fig{
  background:var(--wood);padding:0 0 14px;border-radius:22px;
  box-shadow:var(--shadow-warm);overflow:hidden;
}
.encuentro__fig img{
  width:100%;height:100%;min-height:260px;object-fit:cover;
  border-radius:22px 22px 12px 12px;
}
.panel{background:var(--wood);padding:0 0 14px;border-radius:22px;box-shadow:var(--shadow-warm)}
.panel__in{
  background:var(--paper);border-radius:22px 22px 12px 12px;
  padding:clamp(20px,3.4vw,30px);height:calc(100% - 14px);
}
.panel h2{margin:0 0 8px;font-size:clamp(24px,4vw,34px);font-weight:900}
.panel__intro{margin:0;color:var(--ink-mut);max-width:52ch}
.contact{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.contact li{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.contact svg{width:20px;height:20px;flex:0 0 auto;color:var(--green);margin-top:3px}
.ig{color:var(--green);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.ig:hover{color:var(--green-deep)}
.rating{margin-top:16px;display:flex;flex-direction:column;gap:5px}
.stars{display:flex;gap:3px}
.stars svg{width:22px;height:22px}
.rating p{margin:0;font-size:14.5px;color:var(--ink-mut)}
.rating strong{color:var(--ink);font-weight:800}
.horarios{
  margin:14px 0 0;font-size:14px;color:var(--ink-mut);
  border-top:1px solid var(--line);padding-top:12px;
}

/* ============ Pie ============ */
.footer{background:var(--green);color:var(--cream);padding:clamp(40px,6vw,64px) 0 clamp(28px,4vw,44px)}
.footer__mark{font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:18px}
.footer p{margin:10px 0 0;font-size:13.5px;line-height:1.65;color:rgba(250,247,239,.85);max-width:88ch}
.footer a{color:var(--cream);text-underline-offset:3px}
.footer a:hover{color:#FFFFFF}
.footer__disclosure{margin-top:14px;color:rgba(250,247,239,.95);font-weight:600}

/* ============ Barra inferior fija ============ */
.bottombar{
  position:fixed;inset-inline:0;bottom:0;z-index:50;
  background:var(--green);display:flex;
  box-shadow:0 -8px 18px -12px rgba(30,20,5,.5);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottombar a{
  flex:1;display:flex;justify-content:center;align-items:center;gap:8px;
  min-height:58px;color:var(--cream);text-decoration:none;
  font-weight:800;font-size:15px;letter-spacing:.02em;
  transition:background-color .15s ease;
}
.bottombar a + a{border-left:1px solid rgba(250,247,239,.18)}
.bottombar a:hover{background:var(--green-deep)}
.bottombar a svg{width:16px;height:16px}
@media (min-width:820px){
  .bottombar{
    inset-inline:auto;left:50%;transform:translateX(-50%);bottom:18px;
    border-radius:999px;padding:0 6px;
    box-shadow:0 18px 30px -16px rgba(30,20,5,.55);
  }
  .bottombar a{min-height:52px;padding-inline:22px;border-radius:999px}
  .bottombar a + a{border-left:0}
}

/* ============ Escritorio ============ */
@media (min-width:900px){
  .combos .wrap{grid-template-columns:7fr 5fr;align-items:center}
  .encuentro .wrap{grid-template-columns:5fr 7fr;align-items:stretch}
  .encuentro__fig img{min-height:420px}
}

/* ============ Movimiento reducido ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
  .btn:active{transform:none}
}