/* =============================================================
   negocio.html — BUSINESS DETAIL PAGE
   Mobile-first (flawless at 360px) → desktop at --bp-desk (960px).
   One template, two states (free / premium) toggled by the
   .is-free / .is-premium gate classes. In WordPress these blocks
   are shown/hidden by JetEngine Dynamic Visibility on the
   `negocio_premium` boolean; here a tiny preview script flips
   [data-state] so you can eyeball both. No colour is hardcoded —
   all values come from css/tokens.css.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--np-body);
  background: var(--np-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

p { text-wrap: pretty; margin: 0; }
h1, h2, h3 { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* =============================================================
   STATE GATING (preview only)
   JetEngine replaces this with Dynamic Visibility on each block.
   ============================================================= */
body[data-state="free"]    .is-premium { display: none !important; }
body[data-state="premium"] .is-free    { display: none !important; }

/* =============================================================
   LAYOUT SHELL
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--s-4);
}

/* ---- Site header (shared across the site) ------------------ */
.site-header {
  background: var(--np-surface);
  border-bottom: 1px solid var(--np-border-soft);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.brand {
  font-weight: 800;
  font-size: 18px;
  color: var(--np-ink);
  text-decoration: none;
  letter-spacing: -.01em;
}
.brand b { color: var(--np-primary); font-weight: 800; }
.site-nav { display: flex; align-items: center; gap: var(--s-4); }
.site-nav a {
  display: none;               /* hidden on mobile */
  font-weight: 600;
  font-size: var(--fs-meta);
  color: var(--np-body);
  text-decoration: none;
}
.site-nav .btn-add {
  display: inline-flex;
  padding: 9px 16px;
  background: var(--np-primary);
  color: var(--np-on-color);
  border: none;
  border-radius: var(--r-btn);
  font: 700 13.5px var(--font);
  cursor: pointer;
  text-decoration: none;
}
.icon-btn {
  display: inline-flex;
  color: var(--np-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* ---- Breadcrumb ------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: var(--s-4) 0 var(--s-2);
  font-size: var(--fs-small);
  color: var(--np-muted);
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb .sep { color: var(--np-breadcrumb-sep); }
.breadcrumb .here { color: var(--np-ink); font-weight: 600; }

/* =============================================================
   HEADER ZONE — the core upgrade cue (band → photo jump)
   ============================================================= */

/* ---- FREE: designed colour band (never a photo, never empty) */
.band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-band);
  padding: 24px 20px;
  color: var(--np-on-color);
  background: linear-gradient(155deg, var(--np-band-from) 0%, var(--np-band-to) 100%);
  box-shadow: var(--shadow-band);
}
.band__deco {
  position: absolute;
  right: -14px; bottom: -18px;
  opacity: .16;
  pointer-events: none;
}
.band__inner { position: relative; }
.band__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  margin-bottom: var(--s-3);
  background: rgba(var(--c-white),.18);
  color: var(--np-on-color);
  border-radius: var(--r-pill);
  font: 600 var(--fs-micro) var(--font);
}
.band__tagline {
  margin-top: 7px;
  font: 500 13.5px var(--font);
  color: rgba(var(--c-white),.88);
}

/* business name — the single largest element on the page */
.negocio-name {
  font: 800 var(--fs-name)/1.08 var(--font);
  letter-spacing: -.025em;
  color: var(--np-ink);
}
.band .negocio-name { color: var(--np-on-color); }

/* ---- PREMIUM: photographic cover + gallery ---------------- */
.media { display: flex; flex-direction: column; gap: var(--s-2); }
.cover {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--r-band);
  box-shadow: var(--shadow-cover);
  background: var(--np-primary-soft);
}
.thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}
.thumb {
  width: 100%;
  height: 58px;
  object-fit: cover;
  border-radius: var(--r-icon);
  background: var(--np-primary-soft);
}

/* ---- PREMIUM: title block (sits below the cover) ---------- */
.title-block { display: flex; flex-direction: column; gap: var(--s-2); }
.eyebrow-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 11px;
  background: var(--np-primary-soft);
  color: var(--np-primary-dark);
  border-radius: var(--r-pill);
  font: 600 var(--fs-micro) var(--font);
}
.title-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
}
.title-block .negocio-name { flex: 1 1 auto; }
.title-block .tagline {
  font: 500 13.5px var(--font);
  color: var(--np-muted);
}

/* Verificado chip — small, beside the name (never a hero box) */
.chip-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  margin-top: 6px;
  background: var(--np-primary-soft);
  color: var(--np-primary-dark);
  border-radius: var(--r-pill);
  font: 700 11.5px var(--font);
  white-space: nowrap;
}

/* =============================================================
   BODY GRID
   ============================================================= */
.layout {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4) 0 var(--s-12);
}
.content { display: flex; flex-direction: column; gap: var(--s-4); }
.rail    { display: flex; flex-direction: column; gap: var(--s-3); }
.pair    { display: flex; flex-direction: column; gap: var(--s-4); }

/* ---- Generic card ---------------------------------------- */
.card {
  background: var(--np-surface);
  border: 1px solid var(--np-border);
  border-radius: var(--r-card);
  padding: var(--s-4);
}
.card-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font: 700 var(--fs-h3) var(--font);
  color: var(--np-ink);
  margin-bottom: var(--s-3);
}
.card-title .ic { color: var(--np-primary); display: inline-flex; }
.lede {
  font: 400 14.5px/1.62 var(--font);
  color: var(--np-body);
}

/* ---- Hours: text day list (NEVER an image) --------------- */
.hours { display: flex; flex-direction: column; gap: 9px; font: 500 var(--fs-meta) var(--font); }
.hours .row { display: flex; justify-content: space-between; gap: var(--s-3); }
.hours .day { color: var(--np-body); }
.hours .time { color: var(--np-ink); font-weight: 600; }

/* ---- Address + stylised map (map is premium) ------------- */
.address-text { font: 500 var(--fs-meta)/1.45 var(--font); color: var(--np-body); }
.address-text .muted { color: var(--np-muted-soft); font-size: 13px; }
.map {
  position: relative;
  height: 120px;
  margin-bottom: 11px;
  border-radius: var(--r-btn);
  overflow: hidden;
  border: 1px solid var(--np-map-border);
  background: linear-gradient(var(--np-map-from), var(--np-map-to));
}
.map__grid {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  transparent 0 26px, rgba(var(--c-white),.55) 26px 28px),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(var(--c-white),.55) 34px 36px);
}
.map__road-h { position: absolute; top: 42px; left: 0; right: 0; height: 9px; background: var(--np-map-line); }
.map__road-v { position: absolute; top: 0; bottom: 0; left: 120px; width: 9px; background: var(--np-map-line); }
.map__pin {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -100%);
  color: var(--np-map-pin);
  filter: drop-shadow(0 3px 4px rgba(var(--c-black),.2));
}

/* =============================================================
   CONTACT — every action targets the BUSINESS, appears ONCE
   ============================================================= */

/* shared button base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--r-btn);
  font: 700 15px var(--font);
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-whatsapp { background: var(--np-whatsapp); color: var(--np-on-color); box-shadow: var(--shadow-wa); }
.btn-whatsapp:hover { box-shadow: var(--shadow-wa-hi); }
.btn-call {
  background: var(--np-primary-soft);
  color: var(--np-primary-dark);
  border: 1.5px solid var(--np-primary-soft-bd);
}
.btn-primary { background: var(--np-primary); color: var(--np-on-color); }
.btn-accent  { background: var(--np-accent); color: var(--np-on-color); box-shadow: var(--shadow-accent); }

/* premium contact card */
.contact-card { display: flex; flex-direction: column; gap: var(--s-2); }

/* free: plain understated phone (NO WhatsApp button) */
.phone-label {
  font: 600 var(--fs-micro) var(--font);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--np-muted-soft);
  margin-bottom: 6px;
}
.phone-number {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 700 17px var(--font);
  color: var(--np-ink);
  text-decoration: none;
}
.phone-number .ic { color: var(--np-muted); display: inline-flex; }

/* free: locked premium slots */
.locked {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  background: var(--np-locked);
  border: 1.5px dashed var(--np-locked-bd);
  border-radius: 14px;
}
.locked__ic {
  display: flex; align-items: center; justify-content: center;
  flex: none;
  width: 34px; height: 34px;
  border-radius: var(--r-icon);
  background: var(--np-locked-ic-bg);
  color: var(--np-locked-ic);
}
.locked__txt { flex: 1; }
.locked__txt b { display: block; font: 700 var(--fs-meta) var(--font); color: var(--np-muted); }
.locked__txt span { font: 500 var(--fs-small) var(--font); color: var(--np-locked-ic); }

/* free: upgrade nudge — owner-facing, one confident line */
.nudge {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 15px;
  background: var(--np-accent-soft);
  border: 1px solid var(--np-accent-bd);
  border-radius: 16px;
}
.nudge__ic { color: var(--np-accent-strong); flex: none; }
.nudge__txt { flex: 1; }
.nudge__txt b { display: block; font: 700 14.5px var(--font); color: var(--np-accent-ink); }
.nudge__txt span { font: 500 var(--fs-small)/1.4 var(--font); color: var(--np-accent-ink-2); }
.nudge .btn-accent {
  width: auto;
  flex: none;
  padding: 9px 14px;
  font-size: 13px;
}

/* premium: message form */
.form-sub { font: 500 var(--fs-small) var(--font); color: var(--np-muted-soft); margin-bottom: var(--s-3); }
.field, .area {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 9px;
  border: 1.5px solid var(--np-border);
  border-radius: var(--r-input);
  font: 500 var(--fs-meta) var(--font);
  color: var(--np-ink);
  background: var(--np-input-bg);
  outline: none;
}
.field:focus, .area:focus { border-color: var(--np-primary); }
.area { resize: none; }

/* =============================================================
   CATEGORY-SPECIFIC BLOCK — labelled placeholder (next pass)
   ============================================================= */
.category-block {
  text-align: center;
  padding: 18px 16px;
  background: var(--np-ph-bg);
  border: 1.5px dashed var(--np-ph-border);
  border-radius: 16px;
}
.category-block .soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-bottom: 9px;
  background: var(--np-ph-chip-bg);
  color: var(--np-ph-chip-ink);
  border-radius: var(--r-pill);
  font: 700 11px var(--font);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.category-block h3 { font: 700 var(--fs-h3) var(--font); color: var(--np-ph-title); }
.category-block p { margin-top: 4px; font: 500 var(--fs-small)/1.45 var(--font); color: var(--np-ph-body); }

/* =============================================================
   FOOTER (shared across the site)
   ============================================================= */
.site-footer {
  background: var(--np-footer);
  border-top: 1px solid var(--np-border);
}
.site-footer .container { padding-top: var(--s-6); padding-bottom: var(--s-6); }
.site-footer .brand { font-size: 16px; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-2);
  font: 500 var(--fs-small) var(--font);
  color: var(--np-muted);
}
.footer-tagline { margin-top: 10px; font: 500 11.5px var(--font); color: var(--np-locked-ic); }

/* =============================================================
   PREVIEW CHROME (delete when porting to JetEngine)
   ============================================================= */
.preview-toggle {
  position: fixed;
  z-index: 9999;
  right: 16px; bottom: 16px;
  display: flex;
  gap: 4px;
  padding: 5px;
  background: var(--np-surface);
  border: 1px solid var(--np-border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow);
  font: 700 13px var(--font);
}
.preview-toggle button {
  padding: 7px 16px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--np-muted);
  cursor: pointer;
  font: inherit;
}
.preview-toggle button[aria-pressed="true"] {
  background: var(--np-primary);
  color: var(--np-on-color);
}

/* =============================================================
   DESKTOP  (≥ 960px)
   ============================================================= */
@media (min-width: 960px) {
  .container { padding: 0 var(--s-8); }

  .site-nav a { display: inline-flex; }
  .icon-btn  { display: none; }

  .breadcrumb { font-size: var(--fs-meta); padding-top: var(--s-6); }

  /* header zone gets more presence */
  .band { padding: 40px 44px; border-radius: var(--r-band); }
  .band__inner { max-width: 680px; }
  .band__tagline { font-size: 16px; }

  /* premium cover: big cover + stacked gallery rail */
  .media { flex-direction: row; gap: var(--s-3); }
  .cover { flex: 1; height: 340px; }
  .thumbs {
    width: 150px;
    flex: none;
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .thumb { height: 105px; }

  .title-block .tagline { font-size: 16px; }

  /* two columns: content + sticky contact rail */
  .layout {
    display: grid;
    grid-template-columns: 1fr var(--rail-w);
    gap: var(--s-6);
    align-items: start;
    padding-bottom: var(--s-12);
  }
  .content { gap: var(--s-6); }
  .rail {
    position: sticky;
    top: 20px;
    gap: var(--s-4);
  }

  .card { padding: var(--s-6); }
  .lede { font-size: var(--fs-body); line-height: 1.65; }
  .hours, .address-text { font-size: 15px; }

  /* hours + address sit side by side in the content column */
  .content .pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
  }

  .footer-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .footer-links { margin-top: 0; gap: var(--s-6); }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}