:root{
  --wall:#4a2c1d;
  --espresso:#2b1a12;
  --naranja:#c4532a;
  --naranja-text:#a3431d;
  --masa:#f3d27a;
  --paper:#fbf6ec;
  --ocean:#2f6f8f;
  --ink:#2b1a12;
  --ink-soft:#5b4639;

  --display:'Young Serif', Georgia, serif;
  --body:'Instrument Sans', system-ui, -apple-system, sans-serif;

  --step--1:.875rem;
  --step-0:1.0625rem;
  --step-1:1.3rem;
  --step-2:1.7rem;
  --step-3:clamp(2rem,3.4vw,2.75rem);
  --step-4:clamp(2.2rem,4.2vw,3.6rem);

  --gap:clamp(16px,2vw,28px);
  --section:clamp(64px,9vw,120px);
  --radius:10px;
  --frame:#1d120c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:var(--step-0);line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;margin:0}
p{margin:0 0 1em}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;z-index:10;background:#fff;padding:8px 12px}
:focus-visible{outline:3px solid var(--masa);outline-offset:3px}

/* buttons */
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--naranja);color:#fff;font-weight:700;text-decoration:none;font-size:1rem;transition:background .2s,transform .15s}
.btn:hover{background:var(--naranja-text)}
.btn:active{transform:scale(.97)}
.btn-quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-quiet:hover{background:var(--ink);color:var(--paper)}
.btn-light{background:var(--paper);color:var(--espresso)}
.btn-light:hover{background:#fff}

/* header */
.top{position:relative;z-index:2;display:flex;align-items:center;gap:28px;padding:16px clamp(16px,4vw,48px);background:var(--wall);color:var(--paper)}
.logo{width:84px;flex:none}
.top nav{display:flex;gap:26px;margin-left:auto;font-weight:500}
.top nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.top nav a:hover{border-color:var(--masa)}
.btn-call{flex:none}

/* ---------- HERO: gallery wall ---------- */
.wall{position:relative;background:var(--wall);color:var(--ink);padding:28px clamp(16px,4vw,48px) clamp(48px,6vw,80px);overflow:hidden;
  background-image:radial-gradient(ellipse at 50% 0%,rgba(255,214,150,.13),transparent 60%)}
.rail{position:absolute;left:0;right:0;top:20px;height:8px;background:linear-gradient(#6a4430,#3a2216);box-shadow:0 3px 4px rgba(0,0,0,.35)}
.hang{position:relative;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:auto;gap:44px var(--gap);padding-top:46px}

.frame{position:relative;display:block;margin:0;text-decoration:none;color:inherit;border:10px solid var(--frame);background:var(--paper);
  box-shadow:0 22px 34px -18px rgba(0,0,0,.75),inset 0 0 0 1px rgba(0,0,0,.08);
  transform-origin:50% -40px;animation:hang 1.5s cubic-bezier(.3,.7,.4,1) both;animation-delay:var(--d,0s)}
/* picture wire up to the rail */
.frame::before{content:"";position:absolute;left:50%;top:-42px;width:80px;height:34px;transform:translateX(-50%);
  background:linear-gradient(to bottom right,transparent calc(50% - 1px),rgba(230,210,180,.55) 50%,transparent calc(50% + 1px)) left/50% 100% no-repeat,
             linear-gradient(to bottom left,transparent calc(50% - 1px),rgba(230,210,180,.55) 50%,transparent calc(50% + 1px)) right/50% 100% no-repeat}
.frame::after{content:"";position:absolute;left:50%;top:-46px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#b08a5a}
@keyframes hang{
  0%{transform:translateY(-18px) rotate(-6deg)}
  30%{transform:translateY(0) rotate(3.5deg)}
  52%{transform:rotate(-2deg)}
  72%{transform:rotate(1deg)}
  88%{transform:rotate(-.4deg)}
  100%{transform:rotate(0)}
}
a.frame{transition:transform .35s cubic-bezier(.3,.7,.4,1)}
a.frame:hover{transform:rotate(-1.2deg)}
.mat{padding:clamp(18px,2.4vw,34px);height:100%}

.f-art1{grid-column:1/4;grid-row:1/3;align-self:start;margin-top:30px;border-color:#6d4a2c}
.f-head{grid-column:4/10;grid-row:1}
.f-bolivar{grid-column:10/13;grid-row:1;align-self:start;background:var(--naranja);color:#fff}
.f-arepa{grid-column:4/7;grid-row:2;background:var(--masa)}
.f-art2{grid-column:7/10;grid-row:2;align-self:start;border-color:#b98a4a;border-width:12px}
.f-menu{grid-column:10/13;grid-row:2;align-self:start;margin-top:-30px}

.f-head h1{font-size:var(--step-4);max-width:15ch;color:var(--espresso)}
.f-head .lede{margin:16px 0 14px;max-width:46ch;color:var(--ink-soft)}
.today{display:flex;align-items:center;gap:10px;font-weight:600;margin-bottom:18px}
.dot{width:10px;height:10px;border-radius:50%;background:#2f8a4e;box-shadow:0 0 0 4px rgba(47,138,78,.18)}
.today.closed .dot{background:var(--naranja);box-shadow:0 0 0 4px rgba(196,83,42,.18)}
.actions{display:flex;flex-wrap:wrap;gap:10px}

.f-bolivar h2,.f-arepa h2,.f-menu h2{font-size:var(--step-2)}
.f-bolivar p,.f-arepa p{margin:8px 0 0;font-size:var(--step--1);font-weight:500}
.cup{width:64px;margin-bottom:10px}
.arepa-ill{width:100%;max-width:210px;margin:-6px auto 6px}
.f-menu ul{list-style:none;padding:0;margin:12px 0 14px;columns:2;column-gap:12px;font-size:var(--step--1)}
.f-menu li{padding:3px 0}
.f-menu .go{display:inline-block;font-weight:700;color:var(--naranja-text);border-bottom:2px solid currentColor}

/* artworks (placeholders, drawn in CSS) */
.art{aspect-ratio:4/5;position:relative;overflow:hidden}
.art-ocean{background:
  linear-gradient(180deg,#e9c88f 0 30%,transparent 30%),
  linear-gradient(90deg,transparent 62%,#c4532a 62% 70%,transparent 70%),
  linear-gradient(180deg,transparent 30%,#7fa8b6 30% 48%,#2f6f8f 48% 70%,#a7c3c4 70% 76%,#d9b77c 76%);}
.art-ocean::after{content:"";position:absolute;left:12%;top:9%;width:24%;aspect-ratio:1;border-radius:50%;background:#f3d27a}
.art-sun{aspect-ratio:1;background:#2b1a12}
.art-sun::before{content:"";position:absolute;inset:16% 16% 30%;border-radius:50% 50% 0 0;background:var(--naranja)}
.art-sun::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:repeating-linear-gradient(180deg,var(--masa) 0 6px,#2b1a12 6px 14px)}
.tag{position:absolute;left:8px;bottom:-78px;width:max-content;max-width:100%;background:#fff;padding:7px 10px;font-size:.75rem;line-height:1.35;color:var(--ink);box-shadow:0 2px 3px rgba(0,0,0,.3)}
.tag b,.tag span,.tag em{display:block}
.tag em{color:var(--naranja-text);font-style:normal;font-weight:600}
.f-art2 .tag{bottom:-70px}

/* ---------- MENU ---------- */
.menu{padding:var(--section) 0;background:var(--paper)}
.sec-head{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--gap);align-items:end;margin-bottom:56px}
.sec-head h2{font-size:var(--step-4)}
.sec-head p{margin:0;color:var(--ink-soft);max-width:52ch}

.arepa-bar{display:grid;grid-template-columns:1fr 1.7fr;gap:clamp(24px,4vw,56px);background:var(--masa);border-radius:var(--radius);padding:clamp(24px,4vw,48px)}
.ab-intro h3{font-size:var(--step-3);margin-bottom:14px}
.ab-intro p{max-width:40ch}
.price-line{display:flex;align-items:center;gap:12px;font-weight:600;margin-top:22px}
.price{font-family:var(--display);font-size:2.2rem;line-height:1}
.note{font-size:var(--step--1);color:var(--ink-soft)}
.fillings{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.fillings li{padding:12px 0;border-top:1.5px solid rgba(43,26,18,.22)}
.fillings b{display:block;font-family:var(--display);font-weight:400;font-size:1.2rem}
.fillings span{font-size:var(--step--1);color:var(--ink-soft)}

.coffee{margin-top:clamp(56px,7vw,96px)}
.coffee h3{font-size:var(--step-3)}
.coffee-sub{color:var(--ink-soft);margin-top:10px;max-width:56ch}
.glasses{list-style:none;padding:0;margin:36px 0 28px;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap)}
.glasses b{display:block;font-family:var(--display);font-weight:400;font-size:1.25rem;margin-top:12px;line-height:1.15}
.glasses span{font-size:var(--step--1);color:var(--ink-soft)}
.g{position:relative;height:150px;border:3px solid var(--espresso);border-top:0;border-radius:0 0 18px 18px;overflow:hidden;
  background:linear-gradient(to top,
    var(--espresso) 0 var(--c,0%),
    #ead9bd var(--c,0%) calc(var(--c,0%) + var(--m,0%)),
    #fff calc(var(--c,0%) + var(--m,0%)) calc(var(--c,0%) + var(--m,0%) + var(--f,0%)),
    transparent 0)}
.g-bolivar{background:linear-gradient(to top,#f7ecd3 0 var(--m),var(--espresso) var(--m) calc(var(--m) + var(--c)),transparent 0)}
.g-guero{background:linear-gradient(to top,#5a311d 0 var(--c),transparent 0)}
.coffee-more{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);border-top:1.5px solid rgba(43,26,18,.2);padding-top:18px}
.coffee-more p{margin:0;color:var(--ink-soft)}
.coffee-more b{color:var(--ink);margin-right:6px}

.board{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:clamp(24px,4vw,56px);margin-top:clamp(56px,7vw,96px);padding-top:40px;border-top:3px solid var(--espresso)}
.board h3{font-size:var(--step-2);margin-bottom:14px}
.board h3 + .col-plain + h3,.col-plain + h3{margin-top:26px}
.board dl{margin:0}
.board dl div{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:9px 0;border-bottom:1px solid rgba(43,26,18,.15)}
.board dt{font-weight:700}
.board dd{margin:0;grid-column:1/-1;font-size:var(--step--1);color:var(--ink-soft)}
.board dd.p,.board h3 .p{grid-column:2;grid-row:1;font-weight:700;color:var(--ink);font-family:var(--body);font-size:1rem}
.col-note{font-size:var(--step--1);color:var(--ink-soft);margin-top:-6px}
.col-plain{color:var(--ink-soft);font-size:.95rem}
.confirm{margin-top:28px;font-size:var(--step--1);color:var(--naranja-text);font-weight:600}

/* ---------- ON THE WALLS ---------- */
.walls{background:var(--wall);color:var(--paper);padding:var(--section) 0}
.walls-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,90px);align-items:center}
.show{border:14px solid var(--frame);box-shadow:0 30px 40px -24px rgba(0,0,0,.8);max-width:440px;justify-self:center;width:100%}
.show-text h2{font-size:var(--step-4)}
.show-name{font-size:var(--step-1);margin:18px 0 2px}
.show-dates{color:var(--masa);font-weight:600}
.show-text > p:not(.show-name):not(.show-dates){max-width:48ch;color:#e9dccb}
.submit{margin-top:30px;padding-top:22px;border-top:1px solid rgba(251,246,236,.25)}
.submit h3{font-size:var(--step-1);margin-bottom:8px}
.submit p{color:#e9dccb}
.submit a{color:var(--masa);font-weight:600}

/* ---------- CATERING ---------- */
.catering{background:var(--naranja);color:#fff;padding:clamp(48px,6vw,80px) 0}
.cat-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.catering h2{font-size:var(--step-3);margin-bottom:14px}
.catering p{max-width:58ch;font-weight:500}
.cat-card p{font-family:var(--display);font-size:var(--step-2);margin-bottom:14px}

/* ---------- SAY ---------- */
.say{padding:clamp(56px,7vw,96px) 0;background:var(--paper)}
.say-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
blockquote{margin:0}
blockquote p{font-family:var(--display);font-size:var(--step-3);line-height:1.18;max-width:24ch}
cite{font-style:normal;font-weight:600;color:var(--ink-soft)}
.scores{list-style:none;margin:0;padding:0}
.scores li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px 0;border-top:1.5px solid rgba(43,26,18,.2)}
.scores b{font-family:var(--display);font-weight:400;font-size:2.2rem;color:var(--naranja-text);line-height:1}
.scores span{font-size:var(--step--1);color:var(--ink-soft)}

/* ---------- VISIT ---------- */
.visit{background:var(--masa);padding:var(--section) 0}
.visit-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.visit h2{font-size:var(--step-4);margin-bottom:18px}
.addr{font-size:var(--step-1);font-weight:600}
.addr a,.phone{text-decoration-thickness:2px;text-underline-offset:4px}
.phone{font-size:var(--step-1);font-weight:700}
.small{font-size:var(--step--1);color:var(--ink-soft);max-width:36ch}
.hours{width:100%;border-collapse:collapse;margin-top:8px}
.hours th,.hours td{text-align:left;padding:10px 0;border-bottom:1.5px solid rgba(43,26,18,.2);font-weight:500}
.hours td{text-align:right}
.hours tr.is-today th,.hours tr.is-today td{font-weight:700}
.hours tr.is-today th::after{content:"today";margin-left:8px;font-size:.75rem;background:var(--espresso);color:var(--masa);padding:2px 8px;border-radius:99px;vertical-align:2px}
.name-story{background:var(--paper);border-radius:var(--radius);padding:24px}
.name-story h3{font-size:var(--step-2);margin-bottom:10px}
.name-story p{margin:0;color:var(--ink-soft)}

/* ---------- FOOTER ---------- */
.foot{background:var(--espresso);color:#e9dccb;padding:56px 0 28px;font-size:var(--step--1)}
.foot-grid{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:var(--gap)}
.foot b{color:#fff;font-family:var(--display);font-weight:400;font-size:1.3rem}
.foot a{color:#fff}
.credit{text-align:center;margin:40px 0 0;opacity:.6;font-size:.75rem}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .top nav{display:none}
  .btn-call{margin-left:auto}
  .hang{grid-template-columns:repeat(6,1fr);gap:48px 18px}
  .f-head{grid-column:1/-1;grid-row:auto}
  .f-art1{grid-column:1/4;grid-row:auto;margin-top:0}
  .f-bolivar{grid-column:4/7;grid-row:auto}
  .f-arepa{grid-column:1/4;grid-row:auto}
  .f-art2{grid-column:4/7;grid-row:auto}
  .f-menu{grid-column:1/-1;grid-row:auto;margin-top:0}
  .tag{display:none}
  .visit-grid{grid-template-columns:1fr 1fr}
  .name-story{grid-column:1/-1}
}
@media (max-width:720px){
  .top{gap:12px}
  .logo{width:64px}
  .btn-call{padding:0 16px;font-size:.95rem}
  .hang{gap:46px 14px;padding-top:40px}
  .f-art1{display:none}
  .f-bolivar{grid-column:1/4}
  .f-arepa{grid-column:4/7}
  .f-art2{grid-column:1/4;border-width:9px}
  .f-menu{grid-column:4/7}
  .f-menu .mat{padding:14px}
  .f-menu h2{font-size:1.25rem}
  .frame{border-width:7px}
  .f-bolivar .mat,.f-arepa .mat{padding:14px}
  .cup{width:46px}
  .f-bolivar h2,.f-arepa h2{font-size:1.25rem}
  .f-menu ul{columns:1;margin:8px 0 10px}
  .f-menu li{padding:1px 0}
  .sec-head,.arepa-bar,.walls-grid,.cat-grid,.say-grid,.visit-grid,.foot-grid,.coffee-more{grid-template-columns:1fr}
  .fillings{grid-template-columns:1fr}
  .glasses{grid-template-columns:repeat(3,1fr);row-gap:28px}
  .g{height:110px}
  .board{grid-template-columns:1fr}
  .walls-grid .show{max-width:300px}
}
@media (prefers-reduced-motion:reduce){
  .frame{animation:none}
  a.frame:hover{transform:none}
  html{scroll-behavior:auto}
}
.ph-note{color:var(--naranja-text);font-weight:600}