:root{
  --accent:#3b82f6; --accent-strong:#2563eb;
  --bg-light:#f5f7fb; --bg-dark:#0b0f14;
  --text-light:#0b1220; --text-dark:#ffffff;
  --muted-light:#4b5563; --muted-dark:#a7b0ba;
  --card-light:rgba(255,255,255,.92); --card-dark:rgba(20,22,28,.90);
  --border-light:#dbe2ee; --border-dark:#223047;
  --radius:18px; --shadow:0 8px 22px rgba(0,0,0,.28);
  --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Inter, Arial;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--text-light);
  background:var(--bg-light) url("assets/images/cafe.jpg") center/cover fixed no-repeat;
  transition:background .3s ease,color .3s ease;
}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(255,255,255,.62);transition:.3s}
body.dark{color:var(--text-dark);background:var(--bg-dark) url("assets/images/cafe.jpg") center/cover fixed no-repeat}
body.dark::before{background:rgba(0,0,0,.62)}

/* Header */
header{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);background:rgba(255,255,255,.85);border-bottom:1px solid var(--border-light)}
body.dark header{background:rgba(16,18,22,.85);border-color:var(--border-dark)}
.topbar{max-width:1000px;margin:0 auto;padding:12px 14px;display:flex;justify-content:center}
.brand{display:flex;flex-direction:column;align-items:center;gap:10px}
.brand img.logo{width:140px;max-width:200px;min-width:120px;aspect-ratio:1/1;border-radius:20px;object-fit:contain;background:rgba(255,255,255,.96);padding:8px;border:2px solid var(--border-light);box-shadow:var(--shadow)}
body.dark .brand img.logo{background:rgba(24,28,36,.9);border-color:var(--border-dark)}
.brand h1{font-size:26px;margin:0;color:var(--accent);letter-spacing:.2px}

/* Redes */
.social-bar{display:flex;gap:10px;align-items:center;justify-content:center;margin:0 14px 8px;flex-wrap:wrap}
.icon-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--border-light);background:var(--card-light);color:inherit;text-decoration:none;font-weight:700}
.icon-btn:hover{background:var(--accent);color:#fff;border-color:transparent}
body.dark .icon-btn{border-color:var(--border-dark);background:var(--card-dark)}

/* Hint */
.hint{margin:6px 14px 2px;text-align:center;font-size:12px;color:var(--muted-light);opacity:.95}
body.dark .hint{color:var(--muted-dark)}
.hint .arrow{display:inline-block;padding:0 6px}
@keyframes arrow-left{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
@keyframes arrow-right{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.hint .arrow.left{animation:arrow-left 1.2s ease-in-out infinite}
.hint .arrow.right{animation:arrow-right 1.2s ease-in-out infinite}

/* Chips */
.chips{display:flex;gap:10px;overflow:auto;padding:10px 14px;max-width:1000px;margin:0 auto}
.chip{white-space:nowrap;padding:8px 12px;background:var(--card-light);color:var(--text-light);border:1px solid var(--border-light);border-radius:999px;font-size:13px;font-weight:800;cursor:pointer;transition:.2s}
body.dark .chip{background:var(--card-dark);border-color:var(--border-dark);color:var(--text-dark)}
.chip[aria-current="true"]{background:var(--accent);color:#ffffff;border-color:transparent}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Layout contenido */
.wrap{max-width:1000px;margin:0 auto;padding:14px 14px 100px}
section{display:none;opacity:0;transform:translateY(6px);transition:opacity .35s ease, transform .35s ease}
section.active{display:block;opacity:1;transform:translateY(0)}
h2{font-size:20px;margin:12px 0 6px;color:var(--accent)}
.subtitle{font-size:14px;margin:4px 0 10px;opacity:.95;font-weight:800}
.note{font-size:13px;margin:6px 0 10px;opacity:.9}
.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:560px){.grid{grid-template-columns:repeat(2,1fr)}}

/* Cards */
.card{background:var(--card-light);border:1px solid var(--border-light);border-radius:18px;padding:14px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}
body.dark .card{background:var(--card-dark);border-color:var(--border-dark)}
.card h3{font-size:16px;margin:0 0 6px}
.desc{font-size:13px;color:var(--muted-light);line-height:1.35}
body.dark .desc{color:var(--muted-dark)}
.meta{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:8px}
.price{font-weight:900;font-size:16px;color:var(--accent)}

/* Botón tema */
.fab-theme{position:fixed;z-index:40;right:calc(env(safe-area-inset-right) + 16px);bottom:calc(env(safe-area-inset-bottom) + 16px);width:64px;height:64px;border-radius:50%;display:grid;place-items:center;border:none;background:var(--accent);color:#fff;font-size:26px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.3);transition:transform .18s ease, background .2s}
.fab-theme:hover{transform:scale(1.06);background:var(--accent-strong)}

/* Footer */
footer{margin-top:20px;text-align:center}
.footerbar{position:fixed;left:0;right:0;bottom:0;z-index:25;background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.94) 28% 100%);border-top:1px solid var(--border-light);padding:10px 14px calc(env(safe-area-inset-bottom) + 12px);text-align:center}
body.dark .footerbar{background:linear-gradient(180deg, rgba(10,10,11,0), rgba(10,10,11,.94) 28% 100%);border-color:var(--border-dark)}
.footerbar a{color:var(--accent);margin:0 10px;font-size:1.2rem;text-decoration:none}
.footerbar p{font-size:12px;margin-top:6px;opacity:.85}

/* Utilidades */
.hide{display:none!important}
.btnrow{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}