:root{
  color-scheme: only light;
  --bg:#FBF8EF; --panel:#FFFFFF; --line:#CFE4E3;
  --teal:#12878F; --orange:#DF531E; --blue:#2454A8;
  --ink:#2B2A26; --ink-soft:#6B675C; --weight:#9C9788;
  --nav-h:68px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#0E2036;}
html,body{margin:0;padding:0;}
body{ background:transparent; color:var(--ink); font-family:'Poppins',system-ui,-apple-system,Segoe UI,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 22px; }
a{ text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent; }
body::before{ content:""; position:fixed; top:0; right:0; bottom:0; left:0; z-index:-1;
  background:linear-gradient(rgba(6,18,36,.28), rgba(6,18,36,.46)), url(assets/img/ocean.jpg) center 45% / cover no-repeat; }

/* logos (transparent PNG, embedded once) */
.logo-color,.logo-white,.logo-icon{ display:block; background-size:contain; background-repeat:no-repeat; background-position:center; }
.logo-color{ background-image:url(assets/img/logo-color.png); }
.logo-white{ background-image:url(assets/img/logo-white.png); }
.logo-icon{ background-image:url(assets/img/icon.png); }
.logo-nav{ width:52px; height:52px; }
.logo-hero{ width:150px; height:164px; margin:0 auto; }
.logo-foot{ width:170px; height:171px; margin:0 auto 6px; }
.ph-logo{ width:120px; height:121px; margin:0 auto 22px; }

/* top nav */
nav.top{ position:sticky; top:0; z-index:30; background:var(--bg); height:calc(var(--nav-h) + env(safe-area-inset-top, 0px)); padding-top:env(safe-area-inset-top, 0px); box-shadow:0 3px 0 var(--line); }
nav.top .wrap{ height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; }
.brand{ display:block; }
.wa-btn{ display:inline-flex; align-items:center; gap:8px; background:#0F8A45; color:#fff; font-weight:700; font-size:0.92rem; padding:10px 18px 10px 14px; border-radius:30px; box-shadow:0 4px 12px rgba(15,138,69,.35); }
.wa-btn svg{ width:22px; height:22px; fill:#fff; flex:0 0 auto; }

/* views: only the targeted one shows; home is the default */
.view{ display:none; scroll-margin-top:calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }
#home{ display:block; }
:target{ display:block; }
:target ~ #home{ display:none; }

/* sticky back bar (always visible on inner pages) */
.backbar{ position:sticky; top:calc(var(--nav-h) + env(safe-area-inset-top, 0px)); z-index:20; background:var(--bg); box-shadow:0 2px 0 var(--line); padding:10px 0; }
.backbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.backbtn{ display:inline-block; background:var(--teal); color:#fff; font-weight:700; font-size:0.85rem; padding:10px 18px; border-radius:30px; }
.homelink{ font-weight:700; font-size:0.8rem; color:var(--blue); text-transform:uppercase; letter-spacing:0.04em; padding:8px 4px; }

/* promo carousel (pure CSS auto-rotation, 4 slides x 5s) */
.promos{ max-width:420px; margin:18px auto 0; padding:0 22px; }
@media (min-width:701px){ .promos{ max-width:clamp(300px, calc((100vh - 250px) * 0.5625 + 44px), 460px); } }
.promo-frame{ position:relative; overflow:hidden; border-radius:22px; border:2px solid rgba(255,255,255,.55); background:#0E2036; box-shadow:0 14px 36px rgba(0,0,0,.4); }
.promo-frame::before{ content:""; display:block; padding-top:177.78%; }
.slide{ position:absolute; top:0; right:0; bottom:0; left:0; opacity:0; animation:promoFade 14s infinite; }
.slide:nth-child(2){ animation-delay:3.5s; }
.slide:nth-child(3){ animation-delay:7s; }
.slide:nth-child(4){ animation-delay:10.5s; }
.slide img{ display:block; width:100%; height:100%; object-fit:cover; }
@keyframes promoFade{ 0%{opacity:0;} 4%{opacity:1;} 25%{opacity:1;} 29%{opacity:0;} 100%{opacity:0;} }
@media (hover:hover){ .promo-frame:hover .slide{ animation-play-state:paused; } }

.dots{ display:flex; justify-content:center; gap:0; margin-top:6px; }
.dots button{ width:26px; height:26px; padding:0; margin:0; border:0; background:none; display:flex; align-items:center; justify-content:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.dots button::before{ content:""; width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.4); animation:dotOn 14s infinite; transition:transform .2s, background .2s; }
.dots button:nth-child(2)::before{ animation-delay:3.5s; }
.dots button:nth-child(3)::before{ animation-delay:7s; }
.dots button:nth-child(4)::before{ animation-delay:10.5s; }
@keyframes dotOn{ 0%{background:#F26122;transform:scale(1.3);} 25%{background:#F26122;transform:scale(1.3);} 25.01%{background:rgba(255,255,255,.4);transform:scale(1);} 100%{background:rgba(255,255,255,.4);transform:scale(1);} }

.promos.swipe .promo-frame{ display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:none; }
.promos.swipe .promo-frame::-webkit-scrollbar{ display:none; }
.promos.swipe .promo-frame::before{ display:none; }
.promos.swipe .slide{ position:relative; top:auto; right:auto; bottom:auto; left:auto; opacity:1; animation:none; flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; }
.promos.swipe .slide::before{ content:""; display:block; padding-top:177.78%; }
.promos.swipe .slide img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; user-select:none; -webkit-user-select:none; }
.promos.swipe .dots button::before{ animation:none; }
.promos.swipe .dots button.on::before{ background:#F26122; transform:scale(1.35); }

@media (prefers-reduced-motion: reduce){
  .promo-frame{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; }
  .promo-frame::before{ display:none; }
  .slide{ position:relative; opacity:1; animation:none; flex:0 0 100%; aspect-ratio:9/16; scroll-snap-align:start; }
  .dots{ display:none; }
}

.seemenu{ display:block; width:max-content; margin:14px auto 0; font-weight:700; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--blue); padding:9px 20px; border:2px solid var(--line); border-radius:30px; background:var(--panel); box-shadow:0 6px 18px rgba(0,0,0,.28); }

/* home welcome + menu cards */
.welcome{ text-align:center; padding:40px 0 0; }
.phrase{ margin:0 0 14px; text-align:center; font-size:clamp(1rem,2.6vw,1.2rem); color:rgba(255,255,255,.94); font-weight:500; line-height:1.35; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.phrase b{ color:#FF7A3D; font-weight:700; }
@media (min-width:701px){ .phrase{ min-height:2.8em; } }
.menu-block{ display:flex; flex-direction:column; }
.menu-title{ scroll-margin-top:calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 10px); text-align:center; font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(2rem,6vw,2.8rem); color:#fff; margin:38px 0 0; letter-spacing:0.01em; text-shadow:0 2px 16px rgba(0,0,0,.5); }

.cards{ display:grid; grid-template-columns:1fr 1fr; gap:22px; padding:22px 0 50px; }
@media (max-width:700px){ .cards{ grid-template-columns:1fr; } }
.cat-card{ background:var(--panel); border:3px solid var(--line); border-radius:28px; overflow:hidden; text-align:center; display:block; flex:1; }
.card-photo{ position:relative; overflow:hidden; background:#EFE7D2; }
.card-photo::before{ content:""; display:block; padding-top:66.67%; }
.card-photo img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; }
.card-body{ padding:20px 24px 26px; }
.cat-card h3{ font-family:'Anton',sans-serif; font-weight:400; font-size:2.2rem; margin:0 0 6px; letter-spacing:0.01em; }
.cat-card.d h3{ color:var(--orange); }
.cat-card.c h3{ color:var(--teal); }
.cat-card p{ margin:0; color:var(--ink-soft); font-size:0.95rem; }
.cat-card .cta{ display:inline-block; margin-top:16px; font-weight:700; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--blue); }

.home-contact{ text-align:center; padding-bottom:46px; color:rgba(255,255,255,.9); font-size:0.9rem; line-height:1.6; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.home-contact a{ color:#fff; font-weight:700; text-decoration:underline; }

/* inner pages */
.page-head{ text-align:center; padding:26px 0 6px; }
.page-head h1{ font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(2.4rem,8vw,4.2rem); margin:0; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.55); }
.page-head p{ color:rgba(255,255,255,.9); margin:4px 0 0; text-shadow:0 1px 8px rgba(0,0,0,.5); }

.subgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:22px 0 60px; }
@media (max-width:880px){ .subgrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .subgrid{ grid-template-columns:repeat(2,1fr); gap:12px; } }
.sub-card{ position:relative; display:block; overflow:hidden; border-radius:22px; background:var(--teal); box-shadow:0 8px 22px rgba(0,0,0,.35); -webkit-tap-highlight-color:transparent; }
.sub-card::before{ content:""; display:block; padding-top:100%; }
.sub-card img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; }
.sub-card::after{ content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(to bottom, rgba(6,14,26,.72) 0%, rgba(6,14,26,.38) 32%, rgba(6,14,26,0) 62%); pointer-events:none; }
.sub-card h4{ position:absolute; z-index:2; top:0; left:0; right:0; margin:0; padding:14px 12px 0; text-align:center; color:#fff; font-size:1rem; line-height:1.15; font-weight:800; text-transform:uppercase; letter-spacing:0.02em; text-shadow:0 2px 10px rgba(0,0,0,.55); }
.sub-card.o.ph{ background-color:var(--orange); } .sub-card.b.ph{ background-color:var(--blue); }
.sub-card.ph{ background-image:url(assets/img/icon-white.png); background-repeat:no-repeat; background-position:center 62%; background-size:46%; }
.sub-card.ph::after{ background:none; }
@media (min-width:881px){ .sub-card h4{ font-size:1.1rem; padding-top:16px; } }

.single-col{ max-width:780px; margin:8px auto 46px; padding:14px 24px 30px; background:var(--bg); border-radius:24px; box-shadow:0 16px 44px rgba(0,0,0,.38); }
.cat-sub{ font-size:0.85rem; font-style:italic; color:var(--ink-soft); text-align:center; margin:0 0 20px; }
.group-title{ font-weight:700; color:var(--ink); font-size:0.95rem; margin:18px 0 6px; }
.item{ padding:10px 0; border-bottom:1px dashed var(--line); }
.item:last-child{ border-bottom:none; }
.item-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.iname{ font-weight:700; color:var(--orange); font-size:1rem; flex:1 1 auto; min-width:0; }
.iprice,.iprices{ flex:0 0 auto; }
.iweight{ color:var(--weight); font-weight:500; font-size:0.82rem; }
.iprice{ font-weight:800; color:var(--orange); white-space:nowrap; font-size:1rem; }
.iprices{ display:flex; gap:14px; white-space:nowrap; font-size:0.88rem; font-weight:700; color:var(--orange); }
.iprices span small{ display:block; font-weight:600; color:var(--ink-soft); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.03em; }
.item.has-photo{ display:flex; gap:12px; align-items:flex-start; }
.thumb{ flex:0 0 76px; width:76px; height:76px; border-radius:14px; object-fit:cover; background:#EFE7D2; display:block; margin-top:2px; }
.item-main{ flex:1 1 auto; min-width:0; }
@media (max-width:380px){ .item.has-photo{ gap:10px; } .thumb{ flex-basis:64px; width:64px; height:64px; border-radius:12px; } }
.idesc{ font-size:0.85rem; color:var(--ink-soft); line-height:1.4; margin-top:3px; }
.addon-list{ margin-top:4px; }
.addon{ display:flex; justify-content:space-between; padding:2px 0 2px 14px; font-size:0.88rem; }
.addon .plus{ color:var(--ink-soft); margin-right:4px; }
.addon .aprice{ font-weight:700; color:var(--orange); }

footer{ margin-top:20px; background:var(--teal); color:#FBF8EF; padding:30px 0 calc(30px + env(safe-area-inset-bottom, 0px)); text-align:center; }
footer .fcontact{ margin-top:14px; display:flex; gap:20px; justify-content:center; flex-wrap:wrap; font-size:0.88rem; font-weight:600; }
footer .fapps{ margin-top:14px; font-size:0.78rem; opacity:0.9; letter-spacing:0.03em; }
.note{ text-align:center; color:rgba(255,255,255,.75); font-size:0.76rem; padding:14px 0 30px; margin:0; }

/* home: bebidas (sin foto) y comidas con dos barras */
.menu-block.wide{ grid-column:1 / -1; }
.cat-card.bev{ background-color:var(--blue); border-color:var(--blue); background-image:url(assets/img/icon-white.png); background-repeat:no-repeat; background-position:center 22px; background-size:auto 64px; }
.cat-card.bev .card-body{ padding:96px 24px 26px; }
.cat-card.bev h3{ color:#fff; margin:0; }
.cat-card.bev .cta{ color:#fff; margin-top:10px; }
.subgrid.two{ grid-template-columns:repeat(2,1fr); max-width:640px; margin-left:auto; margin-right:auto; }
/* tarjetas sin foto con nombre largo (3 líneas) */
.sub-card.ph.long{ background-position:center 90%; background-size:34% auto; }

/* tarjetas centradas (la última fila queda al centro) */
.subgrid.center{ display:flex; flex-wrap:wrap; justify-content:center; max-width:640px; margin-left:auto; margin-right:auto; }
.subgrid.center .sub-card{ flex:0 0 calc((100% - 12px) / 2); }
@media (min-width:561px){ .subgrid.center .sub-card{ flex:0 0 calc((100% - 28px) / 3); } }

/* nota destacada y subtítulo en pastilla (Pa' taquear) */
.page-head p.tag-pill{ display:inline-block; background:var(--orange); color:#fff; font-weight:700; font-size:1.05rem; line-height:1.3; padding:8px 20px; border-radius:30px; margin-top:12px; text-shadow:none; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.cat-note{ background:#FFF1E6; border:2px solid var(--orange); border-radius:16px; color:var(--ink); font-weight:700; font-size:1rem; line-height:1.35; text-align:center; padding:12px 16px; margin:20px 0 4px; }
/* horario en la portada */
.hours{ max-width:760px; margin:0 auto 34px; background:var(--panel); border:3px solid var(--line); border-radius:28px; padding:22px 24px 24px; text-align:center; }
.hours h3{ font-family:'Anton',sans-serif; font-weight:400; font-size:2rem; margin:0 0 14px; color:var(--teal); letter-spacing:0.01em; display:flex; align-items:center; justify-content:center; gap:10px; }
.hours h3 svg{ width:28px; height:28px; fill:none; stroke:var(--orange); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.hours-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:700px){ .hours-grid{ grid-template-columns:1fr; } }
.hours-row{ background:var(--bg); border:2px solid var(--line); border-radius:18px; padding:14px 12px; }
.hours-row .days{ display:block; font-weight:700; color:var(--ink); font-size:0.95rem; }
.hours-row .time{ display:block; font-family:'Anton',sans-serif; font-size:1.7rem; line-height:1.15; color:var(--orange); margin-top:4px; letter-spacing:0.01em; }
.hours-row.alt .time{ color:var(--blue); }

/* horario en el pie de todas las páginas */
footer .fhours{ margin-top:14px; display:flex; gap:10px 14px; justify-content:center; flex-wrap:wrap; font-size:0.85rem; }
footer .fhours span{ background:rgba(255,255,255,.16); border-radius:18px; padding:8px 18px; text-align:center; line-height:1.35; }
footer .fhours b{ display:block; font-weight:700; }
.page-head p.tag-pill{ max-width:100%; }

/* con un solo flyer: fijo, sin animación (al volver a poner más, ya rota solo) */
.promo-frame .slide:only-child{ opacity:1; animation:none; }

/* nombre + precios: si no caben en una línea (celular angosto, 2-3 precios), los precios bajan debajo del nombre */
.item-head{ flex-wrap:wrap; row-gap:2px; }
.iname{ flex:1 1 5.8em; }
.iprice,.iprices{ margin-left:auto; }
@media (max-width:340px){ .iname{ flex-basis:7.6em; } }
footer .fnote{ margin-top:12px; font-size:0.8rem; font-weight:600; }