:root{
  --bg:#ffffff;           /* blanco */
  --panel:#f8f9fa;        /* gris muy claro */
  --soft:#e9ecef;         /* gris claro */
  --muted:#6c757d;        /* gris medio */
  --text:#000000;         /* negro */
  --accent:#a0ad59;       /* verde */
  --accent-2:#e5bb84;     /* beige */
  --danger:#dc3545;       /* rojo */
  --shadow: 0 10px 30px rgba(0,0,0,.15);
  --radius: 18px;
}

/* Fix para over-scroll background */
html{
  background: var(--bg);
  overscroll-behavior: none;
  /* iOS Safari fix */
  -webkit-overflow-scrolling: touch;
}

*{box-sizing:border-box}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background: var(--bg);
  color:var(--text);
  min-height:100dvh;
  overscroll-behavior-y: contain;
  /* iOS bounce fix adicional */
  -webkit-overflow-scrolling: touch;
  position: relative;
}
header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,249,250,.9));
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Contenido de cabecera que se pega al header */
.header-content{
  position: sticky;
  top: 110px;
  z-index: 15;
  padding: 12px 0;
  margin-bottom: 8px;
}

.header-content .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.header-content .nav-left{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.header-content .nav-title{
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  margin: 0;
}

.header-content .nav-subtitle{
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.header-content .nav-right{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.header-content .category-name{
  font-weight: 900;
  font-size: 24px;
  color: var(--text);
  margin: 0;
}

.container{max-width:1120px; margin:0 auto; padding:18px 16px;}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:.3px}
.brand i{width:31px; height:31px; border-radius:50%; display:inline-grid; place-items:center; background:white; box-shadow: var(--shadow); overflow:hidden;}
.brand-icon{width:24px; height:24px; object-fit:cover; border-radius:50%;}

.search{flex:1; min-width:220px; display:flex; gap:8px}
.search.hidden{display:none}
.search input{flex:1; padding:12px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.12); background:var(--bg); color:var(--text)}
.search input::placeholder{color:var(--muted)}

.pillbar{display:flex; gap:8px; overflow:auto; scrollbar-width:none; padding:8px 0 4px}
.pill{white-space:nowrap; padding:8px 12px; border-radius:999px; background:var(--panel); border:1px solid rgba(0,0,0,.08); color:var(--muted); cursor:pointer; font-size:14px}
.pill.active{background:linear-gradient(135deg, rgba(160,173,89,.15), rgba(229,187,132,.15)); color:var(--text); border-color:var(--accent)}

main{padding:20px 16px 120px}

/* Tarjetas genéricas */
.grid{max-width:1120px; margin:0 auto; display:grid; grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) ); gap:16px}
.card{background:var(--bg); border:1px solid rgba(0,0,0,.08); border-radius:var(--radius); box-shadow: var(--shadow); display:flex; flex-direction:column; overflow:hidden; justify-content:space-between}
.thumb{aspect-ratio: 4/3; background:var(--panel); display:grid; place-items:center; font-size:46px}
.thumb.hasimg{background-size:cover; background-position:center; font-size:0}
.content{padding:14px; display:flex; flex-direction:column; flex-grow:1}
.title{font-weight:700; font-size:16px; line-height:1.2; margin:0 0 6px}
.desc{color:var(--muted); font-size:13px; min-height:34px; flex-grow:1}
.muted{color:#94a3b8; font-size:12px}
.row-s{display:flex; gap:8px; align-items:center; justify-content:space-between}
select, button, input[type="number"], textarea{background:var(--panel); color:var(--text); border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:10px 12px}
select{width:100%}
.price{font-weight:800}
.actions{display:flex; gap:8px; margin-top:auto; padding-top:12px}
.btn{flex:1; padding:10px 12px; border-radius:12px; border:1px solid rgba(0,0,0,.12); background:var(--panel); color:var(--text); cursor:pointer}
.btn.primary{background:linear-gradient(135deg,var(--accent),#7a8a4a); color:var(--bg); font-weight:800; border:none}

/* Floating cart button */
.fab{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,var(--accent),#7a8a4a);
  color:var(--bg); border:none; border-radius:999px;
  padding:12px 16px; font-weight:800; box-shadow: var(--shadow);
  cursor:pointer
}
.badge{background:var(--text); color:var(--bg); padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid rgba(0,0,0,.18)}

/* Cart drawer */
.drawer{position:fixed; top:0; right:0; bottom:0; width:380px; max-width:100vw; background:var(--bg); border-left:1px solid rgba(0,0,0,.08); transform: translateX(100%); transition:transform .28s ease; z-index:40; display:flex; flex-direction:column}
.drawer.open{transform: translateX(0)}
.drawer header{position:sticky; top:0; background:rgba(255,255,255,.98); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(0,0,0,.08)}
.drawer main{flex:1; overflow:auto; padding:12px 12px 140px}
.line{display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center; padding:12px; border:1px solid rgba(0,0,0,.08); background:var(--panel); border-radius:14px; margin-bottom:10px}
.qty{display:flex; align-items:center; gap:6px}
.qty button{width:28px; height:28px; border-radius:8px}
.remove{background:transparent; color:#fda4af; border:none; cursor:pointer}

.totals{position:fixed; right:0; bottom:0; width:380px; max-width:100vw; background:rgba(255,255,255,.98); border-top:1px solid rgba(0,0,0,.08); padding:12px; display:grid; gap:10px; z-index:50}
.totals .row{justify-content:space-between}
.notes{width:100%; min-height:72px}
.select{width:100%}
.cta{display:flex; gap:8px}

footer{opacity:.7; text-align:center; padding:26px; font-size:12px}
a{color:#a5f3fc}

/* Home de categorías */
.catsgrid{max-width:1120px; margin:0 auto; display:grid; grid-template-columns: repeat( auto-fill, minmax(280px, 1fr) ); gap:16px}
.catcard{background:var(--bg); border:1px solid rgba(0,0,0,.08); border-radius:var(--radius); box-shadow: var(--shadow); padding:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; min-width:280px}
.catcard .left{display:flex; align-items:center; gap:12px; flex:1; min-width:0}
.catcard .emoji{font-size:28px; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--panel); border:1px solid rgba(0,0,0,.08); flex-shrink:0}
.catcard .catimg{width:120px; height:120px; border-radius:12px; background:var(--panel) center/cover no-repeat; border:1px solid rgba(0,0,0,.08); flex-shrink:0}
.catcard .name{font-weight:800; overflow:hidden; text-overflow:ellipsis}
.catcard .count{display: none;}
.catcard .arrow{color:var(--muted); font-size:18px; flex-shrink:0; margin-left:8px}

/* Pantalla de lugares (capa 0) */
.placesgrid{max-width:820px; margin:0 auto; display:grid; grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) ); gap:16px}
.placecard{
  background:var(--bg);
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
  cursor:pointer;
  display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center;
}
.placeimg{
  width:100%; aspect-ratio: 16/9;
  background:#fff center/contain no-repeat;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
}
.placename{font-weight:900; font-size:18px; letter-spacing:.2px}

/* Mobile: botón en el header, alineado a la derecha del brand */
@media (max-width: 767px){
  header .row{ display:flex; flex-wrap:wrap; align-items:center; }
  .brand{ order:1; }
  .fab{ order:2; margin-left:auto; position:static; }
  .search{ order:3; flex-basis:100%; }
  .pillbar{ margin-top:8px; }
  
  /* Barra sticky responsive */
  .sticky-nav .container{ 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 8px; 
  }
  .sticky-nav .nav-right{ 
    width: 100%; 
    justify-content: space-between; 
  }
  .sticky-nav .category-name{ 
    font-size: 18px; 
  }
}
@media (min-width: 768px){
  .fab{ position:fixed; right:18px; bottom:18px; z-index:30; }
}

#closeCartBtn { flex:none; padding:12px 22px; border-radius:30px; }

/* === Controles iOS-friendly === */
select, .select,
input[type="number"], input[type="text"], input[type="search"], textarea {
  font-size: 16px; line-height: 1.35; min-height: 44px; padding: 12px 14px; border-radius: 12px;
}
select, .select {
  -webkit-appearance: none; appearance: none; padding-right: 42px;
  background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23cbd5e1"><path d="M7 10l5 5 5-5"/></svg>');
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
}
@media (max-width: 767px){
  .row-s select, .row-s .select { min-height: 46px; padding: 12px 46px 12px 14px; }
}
select:focus, .select:focus, input:focus, textarea:focus { outline: 2px solid rgba(160,173,89,.55); outline-offset: 2px; }

/* Botoncito utilitario */
.linkbtn{ background:transparent; color:var(--accent); border:1px dashed rgba(160,173,89,.4); padding:8px 12px; border-radius:999px; cursor:pointer; }

/* === SKELETON LOADING === */
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--soft) 25%, rgba(0,0,0,.05) 37%, var(--soft) 63%);
  background-size: 200px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* Skeleton para tarjetas de categorías */
.skeleton-catcard {
  background: var(--bg);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 280px;
  min-height: 80px;
}

.skeleton-catcard .skeleton-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.skeleton-catimg {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  background: var(--soft);
  flex-shrink: 0;
}

.skeleton-catinfo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.skeleton-catname {
  width: 140px;
  height: 20px;
}

.skeleton-catcount {
  width: 90px;
  height: 14px;
}

.skeleton-catcard .skeleton-arrow {
  width: 20px;
  height: 20px;
  background: var(--soft);
  border-radius: 4px;
  flex-shrink: 0;
}

/* Skeleton para tarjetas de productos */
.skeleton-card {
  background: var(--bg);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.skeleton-thumb {
  aspect-ratio: 4/3;
  background: var(--soft);
}

.skeleton-content {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-title {
  width: 80%;
  height: 18px;
}

.skeleton-desc {
  width: 100%;
  height: 14px;
}

.skeleton-desc:nth-of-type(2) {
  width: 70%;
}

.skeleton-category {
  width: 60px;
  height: 12px;
  margin-top: 4px;
}

.skeleton-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  gap: 8px;
}

.skeleton-select {
  flex: 1;
  height: 44px;
  border-radius: 12px;
}

.skeleton-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.skeleton-btn {
  flex: 1;
  height: 44px;
  border-radius: 12px;
}

.skeleton-btn:nth-child(1), .skeleton-btn:nth-child(2), .skeleton-btn:nth-child(3) {
  max-width: 44px;
}

.skeleton-btn:nth-child(4) {
  flex: 2;
}

/* Skeleton para lugares */
.skeleton-placecard {
  background: var(--bg);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  min-height: 200px;
}

.skeleton-placeimg {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 14px;
  background: var(--soft);
}

.skeleton-placename {
  width: 120px;
  height: 22px;
}

.skeleton-placedesc {
  width: 180px;
  height: 14px;
}