/* Bench Café — dirección C «Counter bright» (mcode index.html + hand-written CSS) */
:root{
  --butter:#F7C948;
  --butter-deep:#E9B92E;
  --tint:#FCF6E3;
  --white:#FFFFFF;
  --charcoal:#26262B;
  --muted:#6B6B74;
  --line:#ECE6D4;
  --r:18px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Outfit",system-ui,sans-serif;
  background:var(--white);
  color:var(--charcoal);
  line-height:1.55;
  padding-bottom:88px; /* obar clearance */
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--charcoal);color:#fff;padding:10px 16px;z-index:100}
.skip-link:focus{left:12px;top:12px}

/* ===== Hero ===== */
.hero{position:relative;height:min(45svh,480px);min-height:340px;background:var(--charcoal)}
.hero__img{position:absolute;inset:0}
.hero__img img{width:100%;height:100%;object-fit:cover}
.hero__panel{
  position:absolute;left:0;bottom:0;
  background:var(--butter);
  border-radius:0 22px 0 0;
  padding:18px 22px 20px;
  max-width:560px;
}
.hero__title{font-size:clamp(2.1rem,7.5vw,3.1rem);font-weight:800;line-height:1.04;letter-spacing:-0.015em}
.hero__promise{margin-top:6px;font-weight:500;font-size:1.02rem;max-width:36ch}
.btn{
  display:inline-block;
  margin-top:14px;
  text-decoration:none;
  font-weight:700;
  font-size:0.95rem;
  padding:11px 24px;
  border-radius:999px;
}
.btn--charcoal{background:var(--charcoal);color:#fff}
.btn--charcoal:hover{background:#000}

/* ===== Chips ===== */
.chips{position:sticky;top:0;z-index:30;background:var(--white);border-bottom:1px solid var(--line)}
.chips__track{
  display:flex;gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:10px 20px;
  max-width:1120px;margin:0 auto;
}
.chips__track::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;
  text-decoration:none;
  font-weight:600;font-size:0.95rem;
  padding:8px 18px;
  border-radius:999px;
  border:1.5px solid var(--charcoal);
  background:var(--white);color:var(--charcoal);
}
.chip:hover{background:var(--tint)}

/* ===== Sections ===== */
.section{padding:46px 0 10px}
.section--tint{background:var(--tint)}
.section__banner{font-size:0.78rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--butter-deep)}
.section h2{font-size:clamp(1.6rem,5vw,2.2rem);font-weight:800;letter-spacing:-0.01em;margin-top:4px}
.section__intro{margin-top:6px;font-weight:500;color:var(--muted);max-width:56ch}

/* ===== Cards ===== */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
.cards--four{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card h3{font-size:1.02rem;font-weight:700}
.card p{margin-top:4px;font-size:0.9rem;color:var(--muted)}
.card--feature{grid-column:span 2;display:flex;gap:14px;align-items:center}
.card--feature img{width:120px;height:96px;object-fit:cover;border-radius:12px;flex:0 0 auto}
.menu-note{margin-top:18px;font-size:0.85rem;color:var(--muted)}

/* ===== Split (media sections) ===== */
.split{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px;align-items:center}
.split--flip .split__media{order:-1}
.split__media{border-radius:var(--r);overflow:hidden;max-height:440px}
.split__media img{width:100%;height:100%;max-height:440px;object-fit:cover}
.split__body h3{font-size:1.15rem;font-weight:700}
.split__body p{margin-top:6px;color:var(--muted);font-size:0.95rem}

/* ===== Combos ===== */
.combos{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
.combo-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid}
.combo-card__img{height:190px;overflow:hidden}
.combo-card__img img{width:100%;height:100%;object-fit:cover}
.combo-card__body{padding:14px 16px}
.combo-card__body h3{font-weight:700;font-size:1.05rem}
.combo-card__body p{margin-top:4px;font-size:0.9rem;color:var(--muted)}

/* ===== Encuentro ===== */
.encuentro{padding:46px 0 16px;background:var(--charcoal);color:#fff}
.encuentro__lead{font-size:clamp(1.5rem,5vw,2rem);font-weight:800;letter-spacing:-0.01em}
.encuentro__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.encuentro__col h3{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--butter)}
.encuentro__col p{margin-top:6px;font-weight:500}
.encuentro__col a{color:#fff}
.encuentro__muted{color:#B9B4C4;font-size:0.9rem}
.encuentro__hours{font-weight:500}
.badge{margin-top:20px}
.badge__stars{display:flex;gap:2px}
.badge__stars svg{width:18px;height:18px}
.badge__line{margin-top:6px;font-weight:600}
.badge__guru{margin-top:2px;font-size:0.88rem;color:#B9B4C4}

/* ===== Order bar ===== */
.obar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--charcoal);
}
.obar__bar{
  max-width:1120px;margin:0 auto;
  display:flex;align-items:center;gap:10px;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
}
.obar__note{font-size:0.82rem;font-weight:700;color:var(--butter);margin-right:auto;white-space:nowrap}
.obar__carta{
  text-decoration:none;color:#fff;font-weight:600;font-size:0.9rem;
  padding:9px 15px;border:1.5px solid #fff;border-radius:999px;white-space:nowrap;
}
.obar__uber{
  text-decoration:none;background:var(--butter);color:var(--charcoal);
  font-weight:700;font-size:0.9rem;padding:10px 17px;border-radius:999px;white-space:nowrap;
}

/* ===== Footer ===== */
.footer{border-top:1px solid var(--line);padding:26px 0 32px;background:var(--white)}
.footer__colophon{font-size:0.8rem;color:var(--muted);max-width:72ch}
.footer__colophon a{color:var(--muted);text-decoration:underline}
.footer__disclosure{margin-top:10px;font-size:0.8rem;color:var(--muted)}

/* ===== Desktop ===== */
@media (min-width:760px){
  .cards,.cards--four{grid-template-columns:repeat(4,1fr)}
  .card--feature{grid-column:span 2}
  .combos{grid-template-columns:repeat(2,1fr)}
  .combo-card{grid-template-columns:200px 1fr}
  .combo-card__img{height:100%;min-height:150px}
  .split{grid-template-columns:1.1fr 0.9fr}
  .split--flip .split__media{order:0}
  .encuentro__grid{grid-template-columns:repeat(4,1fr)}
  .hero{height:min(45svh,520px)}
  .hero__panel{left:20px;bottom:20px;padding:24px 28px}
  .obar__bar{justify-content:center}
  .obar__note{margin-right:24px}
}

@media (max-width:389px){
  .obar__note{display:none}
  .cards{grid-template-columns:1fr 1fr}
}

/* QA cap: desktop hero <= 45svh at any viewport (assembly t_5922044a) */
@media (min-width: 760px) {
  .hero { height: min(45svh, 500px); min-height: 0; }
}