:root{
  --max:1360px;
  --dark:#17120e;
  --paper:#dfcda8;
  --red:#b52c23;
  --ink:#261a12;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--dark) url('../img/bg_dark.webp') center top/900px auto repeat;color:#f2e4c9;font-family:Arial,Helvetica,sans-serif}
img{display:block;max-width:100%}
a{text-decoration:none}
.art-section{width:100%}
.art-wrap{position:relative;width:min(calc(100% - 28px),var(--max));margin-inline:auto}
.art-wrap>img{width:100%;height:auto}
.hotspot{position:absolute;display:block;z-index:10;cursor:pointer;touch-action:manipulation}
.hotspot:focus-visible{outline:3px solid #fff;outline-offset:2px;background:rgba(255,255,255,.10)}
.hotspot::after{content:"";position:absolute;inset:0}

/* Header */
.sticky{position:sticky;top:0;z-index:50;background:#090806;box-shadow:0 5px 24px rgba(0,0,0,.38)}
.nav-home{left:31.1%;top:29%;width:7.3%;height:40%}
.nav-menu{left:39.1%;top:29%;width:7.2%;height:40%}
.nav-locations{left:47.0%;top:29%;width:9.0%;height:40%}
.nav-about{left:56.5%;top:29%;width:9.9%;height:40%}
.nav-contact{left:66.9%;top:29%;width:9.7%;height:40%}
.nav-rappi{left:78.0%;top:18%;width:18.8%;height:59%}

/* Hero */
.hero-section{padding-top:12px}
.hero-menu{left:10.8%;top:83.2%;width:13.4%;height:10.1%}
.hero-locations{left:25.0%;top:83.2%;width:13.7%;height:10.1%}

/* Benefits */
.benefits-section{padding:14px 0}
.benefits-wrap{max-width:var(--max)}

/* Locations */
.locations-section{padding:12px 0 46px}
.locales-title-wrap{margin-bottom:8px}
.cards-grid{width:min(calc(100% - 28px),var(--max));margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.location-art{position:relative;filter:drop-shadow(0 16px 28px rgba(0,0,0,.42));overflow:hidden}
.location-art>img{display:block;width:100%;height:auto}

/* Exact button hitboxes, measured from each approved 1024 x 1536 card. */
.sm-card .card-whatsapp{left:8.10%;top:88.15%;width:28.32%;height:6.72%}
.sm-card .card-map{left:37.70%;top:88.15%;width:25.10%;height:6.72%}
.sm-card .card-rappi{left:64.25%;top:88.08%;width:29.20%;height:6.90%}

.mir-card .card-whatsapp{left:8.20%;top:83.72%;width:28.05%;height:6.72%}
.mir-card .card-map{left:37.70%;top:83.72%;width:25.10%;height:6.72%}
.mir-card .card-rappi{left:64.25%;top:83.53%;width:29.45%;height:7.16%}

.sur-card .card-whatsapp{left:6.05%;top:87.10%;width:27.85%;height:6.85%}
.sur-card .card-map{left:35.70%;top:87.10%;width:26.65%;height:6.85%}
.sur-card .card-rappi{left:63.85%;top:86.92%;width:30.40%;height:7.23%}

/* Map */
.map-section{padding:10px 14px 48px}
.map-paper{width:min(calc(100% - 0px),var(--max));margin:auto;display:grid;grid-template-columns:.72fr 1.28fr;gap:24px;padding:30px;background:var(--paper) url('../img/bg_paper.webp') center/cover;border:3px solid #3c2b1d;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.map-copy{color:var(--ink);align-self:center;padding:10px}
.map-copy h2{font-family:Impact,'Arial Black',sans-serif;text-transform:uppercase;font-size:clamp(2.2rem,4.3vw,4.2rem);line-height:.95;margin:8px 0 14px}
.map-copy p{font-size:1rem;line-height:1.5;max-width:540px}
.jp-tag{display:inline-block;border:2px solid #a82a22;color:#a82a22;padding:6px 9px;font-size:1.2rem;font-weight:900}
.map-tabs{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.map-tab{background:#251b14;color:#f3dfbd;border:2px solid #e4cda2;padding:11px 15px;text-transform:uppercase;font-weight:900;cursor:pointer}
.map-tab.active,.map-tab:hover{background:var(--red)}
.map-frame{min-height:390px;border:6px solid #261b14;box-shadow:8px 8px 0 rgba(0,0,0,.12)}
.map-frame iframe{width:100%;height:100%;min-height:390px;border:0}

/* Menu */
.menu-section{padding:0 0 14px}
.menu-open{left:4.0%;top:63.2%;width:18.3%;height:17.7%}

/* Footer clickable areas: measured to cover the complete icon/row visible in footer art. */
.footer-section{padding-bottom:10px;background:#090806}
.foot-facebook{left:32.15%;top:42.0%;width:4.3%;height:20.5%}
.foot-instagram{left:37.0%;top:42.0%;width:4.3%;height:20.5%}
.foot-tiktok{left:41.85%;top:42.0%;width:4.3%;height:20.5%}
.foot-surco{left:48.75%;top:31.3%;width:17.0%;height:14.8%}
.foot-sm{left:48.75%;top:46.0%;width:17.0%;height:14.8%}
.foot-mira{left:48.75%;top:60.6%;width:17.0%;height:14.8%}

/* Optional developer visualizer: append #debug to URL. */
body.debug .hotspot{outline:2px solid #00ff88;background:rgba(0,255,136,.12)}

@media(max-width:920px){
  .sticky{position:relative}
  .art-wrap{width:min(calc(100% - 16px),var(--max))}
  .cards-grid{grid-template-columns:1fr;max-width:600px;width:calc(100% - 20px);gap:18px}
  .map-paper{grid-template-columns:1fr;padding:20px}
  .map-frame,.map-frame iframe{min-height:330px}
}
@media(max-width:600px){
  .art-wrap{width:100%}
  .header-wrap,.hero-wrap,.benefits-wrap,.locales-title-wrap,.menu-wrap,.footer-wrap{overflow:hidden}
  .cards-grid{width:calc(100% - 12px)}
  .map-section{padding-inline:6px}
  .map-paper{padding:14px 10px}
  .map-tabs{display:grid;grid-template-columns:1fr}
  .map-tab{width:100%}
}