/* =============== PALETA & BASE =============== */
:root{
  --bg:#F6F1EB;           /* fondo crema */
  --ink:#1F1B16;          /* texto principal */
  --muted:#5C5A57;        /* texto suave */
  --brand:#1E4B42;        /* verde marca */
  --accent:#B87344;       /* terracota (CTA) */
  --radius-xl:1rem;
  --radius-2xl:1.5rem;
  --marquee-speed:22s;    /* mayor número = más lento */
}
*{box-sizing:border-box}
html,body{background:var(--bg); color:var(--ink); font-family:"Inter",system-ui,sans-serif; margin:0;}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

/* Contenedor */
.container{max-width:1200px; margin:0 auto; padding:0 1rem}

/* =============== NAV =============== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255, 255, 255, 0.991);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:76px}
.brand{display:inline-flex; align-items:center; gap:.5rem}
.logo{height:64px; width:auto; object-fit:contain; display:block}
.primary-nav{display:flex; align-items:center; gap:1.25rem; font-weight:600}
.primary-nav a:hover{opacity:.75}
.nav-toggle{display:none}

/* =============== HERO =============== */
.hero{margin:1rem auto 0}
.hero--clean{
  position:relative; min-height:50vh; border-radius:var(--radius-2xl);
  background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.12);
  overflow:hidden;
}
.hero--photo{
  position:relative; min-height:70vh; border-radius:var(--radius-2xl); overflow:hidden;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.7), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)),
    url("../images/hero-1.webp") center/cover no-repeat;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.12);
}
.hero--slideshow{
  box-shadow:0 20px 40px -20px rgba(0,0,0,.15); border-radius:var(--radius-2xl);
  overflow:hidden; min-height:70vh; position:relative;
}
.hero--slideshow .hero-bg{position:absolute; inset:0; z-index:0}
.hero--slideshow .bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.04); transition:opacity 900ms ease, transform 12s ease;
  filter:brightness(.9) saturate(1.05);
}
.hero--slideshow .bg.active{opacity:1; transform:scale(1)}
.hero--slideshow::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(100% 60% at 70% 40%, transparent 40%, rgba(0,0,0,.10) 100%);
  pointer-events:none;
}

.hero-inner{position:relative; z-index:1; padding:clamp(.9rem,3.5vw,2.6rem) clamp(1rem,4vw,4rem)}
.hero-content{ max-width: min(720px, 92%); }
.hero-wordmark{ display:block; width:min(440px, 78%); height:auto; margin:0 0 .1rem -20px; }
@media (max-width: 900px){
  .hero-wordmark{ margin-left:-14px; }
}
/* Fallback: si el H1 aún existe en el hero, lo ocultamos para que se vea el logo-imagen */
.hero-inner h1.display{ display:none; }
.eyebrow{
  display:inline-block; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); background:rgba(0,0,0,.05); padding:.4rem .7rem; border-radius:999px;
}
.display{
  font-family:"Playfair Display",serif; font-weight:700; color:var(--brand);
  font-size:clamp(2.6rem,5vw,4.4rem); line-height:1.08; margin:.7rem 0 .2rem;
}
.tagline{font-weight:800; color:var(--ink); letter-spacing:.02em; opacity:.85; margin:.1rem 0 .45rem}
.hero-description{max-width:58ch; color:var(--muted); margin-top:.1rem; margin-bottom:.9rem}
.hero-cta{display:flex; gap:.8rem; flex-wrap:wrap}

/* Botones */
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.9rem 1.2rem; border-radius:14px; font-weight:700; transition:.2s}
.btn-primary{background:#c57c52; color:#fff; box-shadow:0 6px 18px -8px rgba(184,115,68,.45); padding:.55rem 1rem; font-size:.95rem; border-radius:12px}
.btn-primary:hover{filter:brightness(1.02)}

/* Smaller PDF button under subtitle */
.menu-pdf-btn{ display:inline-block; margin-top:.75rem }
.btn-outline{border:2px solid var(--brand); color:var(--brand); background:transparent}
.btn-outline:hover{background:rgba(0,0,0,.03)}

/* =============== MARQUEE =============== */
.marquee{
  overflow:hidden; margin:1rem auto 0;
  border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06);
  background:#fff;
}
.marquee__inner{
  display:flex; gap:2rem; white-space:nowrap; padding:.9rem 1rem;
  animation: marquee var(--marquee-speed) linear infinite;
  font-weight:800; letter-spacing:.04em;
}
.marquee__inner span{opacity:.9}
.marquee__inner:hover{animation-play-state:paused}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)} /* requiere duplicado de contenido (lo hace el JS) */
}

/* =============== SECCIONES =============== */
.section{padding:clamp(2.5rem,6vw,4rem) 0}
.section h2{font-family:"Playfair Display",serif; font-size:clamp(1.8rem,3.6vw,2.4rem); margin:0 0 .5rem}
.gallery-description{color:var(--muted); margin-top:.25rem}
.menu-grid.placeholder{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem}
.menu-card{background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:1rem}
.menu-card .price{font-weight:800}

/* =============== SHOP PREVIEW =============== */
.shop-preview{margin-top:1.5rem}
.shop-items{display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem; margin-bottom:2rem}
.shop-item{background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:1.5rem; text-align:center}
.shop-item h3{font-size:1.25rem; margin:0 0 .5rem; color:var(--brand)}
.shop-item p{color:var(--muted); margin:0}
.shop-cta{text-align:center}
@media (max-width: 700px){ .shop-items{grid-template-columns:1fr} }

/* =============== ABOUT US =============== */
.about-content{margin-top:1.5rem}
.about-text{margin-bottom:2.5rem}
.about-text p{font-size:1.1rem; line-height:1.6; margin-bottom:1.25rem; color:var(--ink)}
.about-values{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem}
.value{background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:1.5rem; text-align:center}
.value h3{font-size:1.1rem; margin:0 0 .5rem; color:var(--brand)}
.value p{color:var(--muted); margin:0; font-size:.95rem}
@media (max-width: 900px){ .about-values{grid-template-columns:1fr} }

/* =============== VISIT =============== */
.visit-layout{display:grid; grid-template-columns:1fr 2fr; gap:1.5rem}
.map{background:#e9e7e4; height:320px; border-radius:16px; border:1px solid rgba(0,0,0,.06)}
.reviews{margin-top:1rem; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:1rem}

/* =============== FOOTER =============== */
.site-footer{border-top:1px solid rgba(0,0,0,.06); margin-top:2rem; background:#fff}
.footer{display:flex; align-items:center; justify-content:space-between; padding:1rem 0}
.back-to-top{text-decoration:underline}

/* =============== RESPONSIVE =============== */
@media (max-width: 900px){
  .primary-nav{display:none}
  .nav-toggle{display:inline-flex; align-items:center; padding:.4rem .6rem; border:1px solid rgba(0,0,0,.15); border-radius:10px}
  .hero{margin:.75rem .5rem}
  .display{font-size:clamp(2rem,6vw,3rem)}
  .menu-grid.placeholder{grid-template-columns:1fr}
  .visit-layout{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  .marquee__inner{animation:none}
  .hero--slideshow .bg{transition:none}
}

/* ====== HOME: thumbnails pequeños ====== */
#gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:8px;
}
#gallery-grid .thumb{
  width:100%; aspect-ratio: 1 / 1; object-fit:cover;
  border-radius:12px; border:1px solid rgba(0,0,0,.06);
  background:#eee;
  transition: transform .2s ease, box-shadow .2s ease;
}
#gallery-grid .thumb:hover{ transform:translateY(-2px); box-shadow:0 8px 20px -12px rgba(0,0,0,.25); }

/* ====== PÁGINA GALLERY: fotos grandes ====== */
.gallery-grid--page{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px; margin-top:16px;
}
.gallery-grid--page .photo{
  width:100%; height:320px; object-fit:cover;
  border-radius:12px; border:1px solid rgba(0,0,0,.08);
  cursor:pointer; background:#eee;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (max-width: 900px){
  .gallery-grid--page{ grid-template-columns: repeat(2, 1fr); }
  .gallery-grid--page .photo{ height:220px; }
}
.gallery-grid--page .photo:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -24px rgba(0,0,0,.35); }

/* ====== Lightbox ====== */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  display:none; align-items:center; justify-content:center; z-index:2000;
}
.lightbox.open{ display:flex; }
.lightbox-content{ position:relative; max-width:min(92vw,1200px); max-height:88vh }
.lightbox-image{ width:100%; height:auto; max-height:88vh; border-radius:8px; display:block }
.lightbox-close{ position:absolute; top:-12px; right:-12px; width:36px; height:36px; border-radius:999px; border:0; background:rgba(0,0,0,.6); color:#fff; font-size:20px; cursor:pointer }
.lb-img{
  max-width:min(90vw, 1200px); max-height:85vh; border-radius:16px; background:#111;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.6);
}
.lb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.4);
  background:rgba(0,0,0,.35); color:#fff; font-size:28px; line-height:1;
  display:grid; place-items:center; cursor:pointer;
}
.lb-close{ top:24px; right:24px; transform:none; }
.lb-prev{ left:24px; }
.lb-next{ right:24px; }

/* Móvil */
@media (max-width: 900px){
  #gallery-grid{ grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .gallery-grid--page{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .lb-btn{ width:38px; height:38px; font-size:24px; }
}

/* ===== MENU — diseño elegante con tabs y tarjetas ===== */
.menu-section{ background: linear-gradient(180deg, transparent, #f4efe9 30%, #f4efe9 100%); border-radius: 24px; }
.menu-header{ display:flex; align-items:flex-end; gap:1rem; flex-wrap:wrap; }
.menu-header h2{ font-family:"Playfair Display",serif; font-size:clamp(2rem,3.6vw,2.8rem); margin:0; }
.menu-sub{ margin:0; color:var(--muted); }
.roaster-callout{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border:1px dashed rgba(0,0,0,.15); border-radius:999px; background:#fff; }
.roaster-callout img{ height:18px; width:auto; }

.menu-tabs{ margin-top:1rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.menu-tabs .tab{
  appearance:none; border:1px solid rgba(0,0,0,.12); background:#fff; color:var(--ink);
  padding:.55rem .9rem; border-radius:999px; font-weight:700; cursor:pointer; transition:.15s;
}
.menu-tabs .tab:hover{ background:#faf9f8; }
.menu-tabs .tab.active{ background:var(--brand); color:#fff; border-color:var(--brand); }

.menu-grid.cards{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1rem; margin-top:1rem;
}
.coffee-card{
  position:relative; background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:20px; padding:1.1rem 1.1rem 1rem; box-shadow:0 10px 30px -20px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.coffee-card:hover{ transform: translateY(-2px); box-shadow:0 18px 50px -26px rgba(0,0,0,.35); }
.coffee-card .top{
  display:flex; align-items:start; justify-content:space-between; gap:.75rem;
}
.coffee-card h3{ margin:.1rem 0 .25rem; font-size:1.25rem; }
.coffee-card p{ margin:.25rem 0; color:var(--muted); }
.meta{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.4rem; }
.chip{
  font-size:.8rem; line-height:1; padding:.35rem .5rem; border-radius:999px;
  background:#f3f2f1; border:1px solid rgba(0,0,0,.06); color:#534f48;
}
.price-badge{
  align-self:flex-start; background:var(--ink); color:#fff; border-radius:12px; padding:.35rem .55rem; font-weight:800;
}
.badge{
  position:absolute; top:.8rem; right:.8rem; background:var(--accent); color:#fff;
  font-size:.75rem; padding:.25rem .5rem; border-radius:999px;
}
.note{ font-size:.9rem; margin-top:.5rem; color:#5a5652; }

.menu-actions{ margin-top:1.25rem; }

/* Responsive */
@media (max-width:1200px){
  .menu-grid.cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:700px){
  .menu-grid.cards{ grid-template-columns: 1fr; }
}

/* ===== MENU — cabecera ===== */
.menu-section{ background: linear-gradient(180deg, transparent, #f4efe9 28%, #f4efe9 100%); border-radius: 24px; }
.menu-hero{ display:flex; align-items:end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.menu-hero h2{ font-family:"Playfair Display",serif; font-size:clamp(2rem,3.6vw,2.8rem); margin:0; }
.menu-sub{ margin:0; color:var(--muted); }
.roaster-callout{ display:flex; align-items:center; gap:.5rem; padding:.4rem .7rem; border:1px dashed rgba(0,0,0,.15); border-radius:999px; background:#fff; }
.roaster-callout img{ height:18px; width:auto; }

/* ===== BEANS spotlight ===== */
.beans-spotlight{ margin-top:1rem; }
.beans-spotlight h3{ font-size:1.25rem; margin:0 0 .6rem; }
.beans-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.bean-card{
  position:relative; background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:18px; padding:1rem; box-shadow:0 10px 30px -20px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.bean-card:hover{ transform:translateY(-2px); box-shadow:0 18px 50px -26px rgba(0,0,0,.35); }
.bean-top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.bean-name{ font-weight:800; }
.bean-origin{ font-size:.9rem; color:var(--muted); }
.bean-meta{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.45rem 0 .2rem; }
.chip{
  font-size:.78rem; line-height:1; padding:.35rem .5rem; border-radius:999px;
  background:#f3f2f1; border:1px solid rgba(0,0,0,.06); color:#534f48;
}
.bean-notes{ color:var(--muted); font-size:.92rem; }
.bean-badges{ display:flex; gap:.35rem; margin-top:.5rem; }
.badge{
  font-size:.72rem; padding:.25rem .45rem; border-radius:999px; color:#fff; background:var(--accent);
}
.badge.clean{ background:#1e4b42; }   /* clean/clarity */
.badge.funky{ background:#8b5cf6; }   /* funky/experimental */
.badge.exotic{ background:#0ea5a3; }  /* exotic/fruity */
.beans-note{ color:var(--muted); margin-top:.5rem; }

/* ===== DRINKS/FOOD tabs & cards (reutiliza estilos previos) ===== */
.menu-tabs{ margin-top:1.25rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.menu-tabs .tab{
  appearance:none; border:1px solid rgba(0,0,0,.12); background:#fff; color:var(--ink);
  padding:.55rem .9rem; border-radius:999px; font-weight:700; cursor:pointer; transition:.15s;
}
.menu-tabs .tab:hover{ background:#faf9f8; }
.menu-tabs .tab.active{ background:var(--brand); color:#fff; border-color:var(--brand); }

.menu-grid.cards{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px; margin-top:1rem;
}
.coffee-card{
  position:relative; background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:20px; padding:1.1rem 1.1rem 1rem; box-shadow:0 10px 30px -20px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.coffee-card:hover{ transform: translateY(-2px); box-shadow:0 18px 50px -26px rgba(0,0,0,.35); }
.coffee-card .top{ display:flex; align-items:start; justify-content:space-between; gap:.75rem; }
.coffee-card h3{ margin:.1rem 0 .25rem; font-size:1.15rem; }
.coffee-card p{ margin:.25rem 0; color:var(--muted); }
.price-badge{ align-self:flex-start; background:var(--ink); color:#fff; border-radius:12px; padding:.35rem .55rem; font-weight:800; }
.note{ font-size:.9rem; margin-top:.5rem; color:#5a5652; }

/* Responsive */
@media (max-width:1200px){ .menu-grid.cards, .beans-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:700px){ .menu-grid.cards, .beans-grid{ grid-template-columns:1fr; } }

/* ====== Menu page (layout) ====== */
.menu-head {display:flex; align-items:end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.75rem;}
/* beans grid más ancho en la página */
.beans-grid--page{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width:900px){ .beans-grid--page{ grid-template-columns: 1fr; } }

/* versión “wide” de la tarjeta de bean (opcional) */
.bean-card--wide{ padding:1.2rem; }
.bean-card--wide .bean-notes{ margin-top:.2rem; }

/* ===== HOME: mini-galería con thumbnails ===== */
#gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap:8px;
  margin-top:16px;
}
#gallery-grid .thumb{
  width:100%;
  aspect-ratio: 1 / 1;          /* cuadradas; cambia a 4/3 si prefieres */
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.06);
  background:#eee;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
#gallery-grid .thumb:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -18px rgba(0,0,0,.28);
  opacity:.95;
}

/* si quieres thumbnails aún más pequeñas, baja 120px -> 100px */
@media (max-width: 700px){
  #gallery-grid{ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

/* ==== Food grid (menu.html) ==== */
.food-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.food-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:18px; overflow:hidden;
  box-shadow:0 12px 36px -22px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.food-card:hover{ transform:translateY(-2px); box-shadow:0 20px 60px -30px rgba(0,0,0,.35); }
.food-card img{ width:100%; height:200px; object-fit:cover; display:block; }
.food-card .fc-body{ padding:.9rem 1rem; }
.food-card h3{ margin:.1rem 0 .25rem; font-size:1.1rem; }
.food-card .fc-meta{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.food-card .price{ font-weight:800; background:var(--ink); color:#fff; padding:.3rem .55rem; border-radius:10px; }

/* ==== Shop: product cards ==== */
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.products-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;                 /* móvil */
}
@media (min-width: 640px){                    /* tablet */
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){                   /* desktop */
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tarjeta e imagen más cuidadas */
.product-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
  border: 1px solid #eee;
}
.product-card img {
  width: 100%;
  aspect-ratio: 4 / 3;         /* altura consistente */
  object-fit: cover;
  display: block;
  background: #e9e9e9;         /* color de fondo si tarda */
}
.product-card .pc-body { padding: 16px 18px 20px; }
.product-card .product-title { margin: 6px 0 6px; }
.product-card .meta { color:#6b7280; margin:2px 0; }
.product-card .actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }

.btn-disabled {
  pointer-events: none;
  opacity: .55;
  background: #ececec;
  color: #2b2b2b;
  border: 1px solid #d7d7d7;
  border-radius: 999px;
  padding: 10px 14px;
}
.product-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:18px; overflow:hidden;
  box-shadow:0 12px 36px -22px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.product-card:hover{ transform:translateY(-2px); box-shadow:0 20px 60px -30px rgba(0,0,0,.35); }
.product-card img{ width:100%; height:230px; object-fit:cover; display:block; background:#eee; }
.product-card .pc-body{ padding:1rem; }
.product-card .title{ font-weight:800; margin:0 0 .25rem; }
.product-card .meta{ color:var(--muted); margin:0 0 .4rem; }
.badges{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.4rem; }
.badge{ font-size:.72rem; padding:.25rem .45rem; border-radius:999px; color:#fff; background:var(--accent); }
.badge.clean{ background:#1e4b42; }
.badge.funky{ background:#8b5cf6; }
.badge.exotic{ background:#0ea5a3; }
.price-from{ font-weight:800; }
.actions{ margin-top:.6rem; display:flex; gap:.5rem; }
.actions .btn{ padding:.55rem .8rem; }

/* ==== Quick View modal ==== */
.product-modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:3000; }
.product-modal.open{ display:flex; }
.pm-content{ background:#fff; width:min(980px, 90vw); border-radius:18px; overflow:hidden; position:relative; }
.pm-close{ position:absolute; top:10px; right:10px; width:38px; height:38px; border-radius:999px; border:1px solid rgba(0,0,0,.1); background:#fff; font-size:22px; cursor:pointer; }
.pm-body{ display:grid; grid-template-columns: 1fr 1fr; gap:0; }
.pm-body .pm-image{ background:#f5f5f5; min-height:360px; display:flex; align-items:center; justify-content:center; }
.pm-body .pm-image img{ width:100%; height:100%; object-fit:cover; }
.pm-body .pm-info{ padding:1.1rem 1.2rem; }
.pm-info h3{ margin:.1rem 0 .4rem; }
.pm-specs{ display:grid; grid-template-columns: 1fr 1fr; gap:.35rem .9rem; margin:.5rem 0; }
.pm-specs .k{ color:#6b6b6b; }
.pm-notes{ margin:.5rem 0; color:var(--muted); }
.pm-actions{ margin-top:.8rem; display:flex; gap:.6rem; }

@media (max-width: 900px){
  .pm-body{ grid-template-columns: 1fr; }
}

/***** Enhanced Shop Styles *****/
.shop-header {
  text-align: center;
  margin-bottom: 48px;
}

.shop-header .display {
  font-size: 48px;
  font-weight: 800;
  color: var(--color-dark-green);
  margin-bottom: 16px;
}

.shop-subtitle {
  font-size: 18px;
  color: var(--color-muted);
  max-width: 600px;
  margin: 0 auto;
}

.shop-section {
  margin-bottom: 64px;
}

.section-header {
  text-align: center;
  margin-bottom: 32px;
}

.section-header h2 {
  font-size: 32px;
  color: var(--color-dark-green);
  margin-bottom: 8px;
}

.section-description {
  color: var(--color-muted);
  font-size: 16px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.product-card {
  background: var(--color-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: #f8f9fa;
}

.product-info {
  padding: 20px;
}

.product-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-dark-green);
  margin-bottom: 8px;
}

.product-description {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.product-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-terracotta);
  margin-bottom: 16px;
}

.product-actions {
  display: flex;
  gap: 8px;
}

.btn-product {
  flex: 1;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  font-size: 14px;
  transition: all 0.3s ease;
}

.btn-product-primary {
  background: var(--color-terracotta);
  color: var(--color-white);
}

.btn-product-primary:hover {
  background: #a8554a;
}

.btn-product-secondary {
  background: transparent;
  color: var(--color-dark-green);
  border: 2px solid var(--color-dark-green);
}

.btn-product-secondary:hover {
  background: var(--color-dark-green);
  color: var(--color-white);
}

/***** New Shop Design Styles *****/
.shop-main {
  min-height: 100vh;
}

.shop-title-section {
  padding: 1rem 0;
  text-align: center;
  background: var(--bg);
}

.shop-title {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
}

.shop-subtitle {
  font-size: 1rem;
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 0.5rem 0;
  text-align: center;
}

.section-subtitle {
  font-size: 0.9rem;
  color: #6b7280;
  margin: 0 0 2rem 0;
  text-align: center;
  font-weight: 400;
}

.products-section {
  padding: 4rem 0;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
}

.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.product-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.product-badge.funky {
  background: #fef3c7;
  color: #92400e;
}

.product-badge.bright {
  background: #dbeafe;
  color: #1e40af;
}

.product-badge.exotic {
  background: #f3e8ff;
  color: #7c3aed;
}

.product-badge.clean {
  background: #d1fae5;
  color: #065f46;
}

.product-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.product-meta {
  color: #6b7280;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.product-price {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1rem;
}

/* ===== PRODUCT DETAIL PAGE ===== */
.product-main {
  min-height: 100vh;
  padding: 2rem 0;
}

.breadcrumb {
  margin-bottom: 2rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.breadcrumb a {
  color: #1f2937;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
}

.product-info {
  padding-right: 2rem;
}

.product-header {
  margin-bottom: 2rem;
}

.product-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

.product-header p {
  font-size: 1.125rem;
  color: #6b7280;
  font-style: italic;
}

.purchase-options {
  background: #f9fafb;
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.format-selector,
.grind-selector,
.quantity-selector {
  margin-bottom: 1.5rem;
}

.format-selector label,
.grind-selector label,
.quantity-selector label {
  display: block;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
}

.format-selector select,
.grind-selector select {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  background: white;
  font-size: 1rem;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.quantity-controls button {
  width: 40px;
  height: 40px;
  border: 2px solid #d1d5db;
  background: white;
  border-radius: 8px;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quantity-controls button:hover {
  border-color: #1f2937;
  background: #f9fafb;
}

#quantity-display {
  font-size: 1.25rem;
  font-weight: 600;
  min-width: 2rem;
  text-align: center;
}

.add-to-cart-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-add-cart {
  flex: 1;
  background: #1f2937;
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-add-cart:hover {
  background: #374151;
  transform: translateY(-1px);
}

.product-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
}

.product-details {
  margin-bottom: 2rem;
}

.quick-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.info-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

.info-value {
  font-size: 1rem;
  color: #1f2937;
  font-weight: 600;
}

.product-description h3,
.product-specs h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1rem;
}

.product-description p {
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.spec-item {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.spec-label {
  font-weight: 500;
  color: #6b7280;
}

.spec-value {
  font-weight: 600;
  color: #1f2937;
}

.product-image {
  position: relative;
}

.product-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.product-badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.contextual-image {
  margin-top: 2rem;
}

.contextual-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
}

/* Responsive */
@media (max-width: 768px) {
  .product-detail {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .product-info {
    padding-right: 0;
  }
  
  .product-header h1 {
    font-size: 2rem;
  }
  
  .quick-info {
    grid-template-columns: 1fr;
  }
  
  .specs-grid {
    grid-template-columns: 1fr;
  }
}

/***** Enhanced Menu Page *****/
.menu-header {
  text-align: center;
  margin-bottom: 48px;
}

.menu-header .display {
  font-size: 48px;
  font-weight: 800;
  color: var(--color-dark-green);
  margin-bottom: 16px;
}

.menu-subtitle {
  font-size: 18px;
  color: var(--color-muted);
  max-width: 600px;
  margin: 0 auto 24px;
}

.menu-section {
  margin-bottom: 64px;
}

.menu-section .section-header {
  text-align: center;
  margin-bottom: 32px;
}

.menu-section .section-header h2 {
  font-size: 32px;
  color: var(--color-dark-green);
  margin-bottom: 8px;
}

.menu-section .section-description {
  color: var(--color-muted);
  font-size: 16px;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.menu-item {
  background: var(--color-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.menu-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.menu-item-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: #f8f9fa;
}

.menu-item-info {
  padding: 20px;
}

.menu-item-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-dark-green);
  margin-bottom: 8px;
}

.menu-item-description {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.menu-item-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-terracotta);
}

.menu-item-badge {
  display: inline-block;
  background: var(--color-terracotta);
  color: var(--color-white);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

.menu-item-badge.vegan {
  background: #10b981;
}

.menu-item-badge.gluten-free {
  background: #f59e0b;
}

.menu-group { margin-bottom: 28px; }
.menu-group-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-dark-green);
  margin: 6px 0 10px;
}

.extra-charges {
  text-align: center;
  margin-top: 32px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.extra-charges p {
  margin: 0;
  color: var(--color-muted);
  font-size: 14px;
}

/***** Menu Gallery *****/
.menu-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.gallery-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.gallery-image:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Hero compacto para páginas internas */
.hero--compact {
  padding: 24px 0;           /* antes seguro que tenías > 80px */
  background: #f6f6f6;       /* opcional */
}
.hero--compact .display {
  font-size: clamp(28px, 4vw, 36px);
  margin: 0 0 6px;
}
.hero--compact .tagline {
  font-size: clamp(14px, 2.2vw, 16px);
  margin: 0;
  color: #6b7280; /* gris suave */
}

/* ==== SHOP OVERRIDES (pegar AL FINAL del CSS) ==== */

/* 1) Hero del Shop más compacto (título + subtítulo) */
.shop-hero{
  padding: 18px 0 8px;         /* compacta el alto */
  background: transparent;
}
.shop-hero .shop-title{
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 6px;
}
.shop-hero .shop-subtitle{
  font-size: clamp(13px, 2vw, 15px);
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

/* 2) Grid de productos: 1 → 2 → 3 → 4 columnas */
.products-grid{
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;                               /* móvil */
}
@media (min-width: 700px){
  .products-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } /* tablet */
}
@media (min-width: 1024px){
  .products-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } /* desktop */
}
@media (min-width: 1400px){
  .products-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } /* pantallas XL */
}

/* 3) Imagen de la card: ratio consistente (por si hay reglas duplicadas arriba) */
.product-card img{
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  display: block;
  background: #eee;
}

/* 4) Pequeños ajustes de card (opcional) */
.product-card{
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #eee;
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 60px -30px rgba(0,0,0,.35);
}
.product-card .pc-body{ padding: 16px 18px 20px; }
.product-card .product-title{ margin: 6px 0; }
.product-card .meta{ color:#6b7280; margin: 2px 0; }
.product-card .actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }