/* ============================================================
   GremioHub — diseño premium multi-marca
   Los colores de marca llegan como CSS vars desde base.html:
   --primary, --primary-dark, --accent, --bg, --ink
   ============================================================ */
:root{
  --card:#ffffff;
  --muted:#6b6480;
  --line:#e9e4f2;
  --radius:20px;
  --shadow-sm:0 2px 10px rgba(20,12,40,.07);
  --shadow-md:0 12px 32px rgba(20,12,40,.12);
  --shadow-lg:0 30px 70px rgba(20,12,40,.22);
  --gold1:#fbbf24; --gold2:#d97706;
  --wa:#22b358; --wa-dark:#15803d;
  --ok:#15803d; --ok-bg:#dcfce7;
  --bad:#b91c1c; --bad-bg:#fee2e2;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  /* Enlaces: versión oscurecida del primario (contraste AA sobre fondo claro).
     --primary lo fija base.html por gremio; --link deriva solo. */
  --link:color-mix(in srgb, var(--primary) 60%, #000);
}
*{box-sizing:border-box}
/* El atributo `hidden` siempre gana: sin esto, reglas como
   `.results-loading{display:flex}` lo anulan y el elemento se ve. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); background:var(--bg); color:var(--ink);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
/* Foco visible de teclado en enlaces/botones (los inputs ya tienen su propio :focus) */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--primary); outline-offset:2px; border-radius:8px;
}
h1,h2,h3{line-height:1.2; letter-spacing:-.01em}
.wrap{max-width:1200px; margin:0 auto; padding:0 1.25rem}
.vh{position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:.6rem 1rem; z-index:200; border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:0; cursor:pointer; font:700 .95rem/1 var(--font-body);
  padding:.85rem 1.5rem; border-radius:14px; text-decoration:none!important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--btn-dark)); color:var(--on-primary); box-shadow:0 10px 24px color-mix(in srgb, var(--primary) 40%, transparent)}
.btn-primary:hover{filter:brightness(1.07); box-shadow:0 14px 30px color-mix(in srgb, var(--primary) 50%, transparent)}
.btn-accent{background:linear-gradient(135deg,var(--accent),color-mix(in srgb, var(--accent) 70%, #b45309)); color:#231600; box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 45%, transparent)}
.btn-ghost{background:rgba(255,255,255,.7); color:var(--ink); border:1.5px solid var(--line); backdrop-filter:blur(8px)}
.btn-quiet{background:transparent; color:var(--muted); border:1.5px solid transparent}
.btn-quiet:hover{color:var(--link); border-color:var(--line)}
.btn-whatsapp{background:linear-gradient(135deg,var(--wa),var(--wa-dark)); color:#fff; box-shadow:0 10px 24px rgba(34,179,88,.35)}
.btn-sm{padding:.55rem 1rem; font-size:.85rem; border-radius:11px}
.btn-lg{padding:1.05rem 2rem; font-size:1.05rem; border-radius:16px}
.btn-block{width:100%}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 82%, white);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s;
}
.site-header.is-scrolled{border-color:var(--line); box-shadow:var(--shadow-sm)}
.header-in{display:flex; align-items:center; gap:1rem; height:72px}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none!important; color:var(--ink)}
.brand-mark{
  width:40px; height:40px; border-radius:13px; display:grid; place-items:center;
  font:900 1.3rem var(--font-display); color:var(--on-primary);
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  box-shadow:0 8px 18px color-mix(in srgb, var(--primary) 45%, transparent);
}
.brand-name{font:800 1.25rem var(--font-display); letter-spacing:-.02em}
.main-nav{display:flex; align-items:center; gap:.25rem; margin-left:1rem}
.nav-link{
  color:var(--ink); font-weight:600; font-size:.95rem; padding:.6rem .9rem; border-radius:10px;
  text-decoration:none!important; transition:background .15s;
}
.nav-link:hover{background:color-mix(in srgb, var(--primary) 8%, transparent)}
.nav-link.is-active{color:var(--link)}
.nav-cta{background:linear-gradient(135deg,var(--primary),var(--btn-dark)); color:var(--on-primary)!important; box-shadow:0 6px 16px color-mix(in srgb, var(--primary) 35%, transparent)}
.nav-cta:hover{background:linear-gradient(135deg,var(--primary),var(--btn-dark)); filter:brightness(1.07); transform:translateY(-2px); box-shadow:0 10px 22px color-mix(in srgb, var(--primary) 45%, transparent)}
.header-actions{margin-left:auto; display:flex; align-items:center; gap:.6rem}
.lang-switch{font-size:.85rem; font-weight:700; color:var(--muted)}
.lang-switch a{color:var(--muted); text-decoration:none!important; padding:.3rem .25rem}
.lang-switch a.is-on{color:var(--link)}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.6rem}
.burger span{width:24px; height:2.5px; border-radius:2px; background:var(--ink); transition:.25s}
.only-m{display:none!important}

/* ---------- HERO 3D ---------- */
.hero-3d{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(1000px 700px at 10% 110%, color-mix(in srgb, var(--primary) 55%, transparent), transparent 60%),
    linear-gradient(160deg, var(--primary-dark) 0%, color-mix(in srgb, var(--primary-dark) 72%, #0b0716) 55%, #0b0716 100%);
  min-height:94svh; display:flex; flex-direction:column; justify-content:center;
  perspective:1200px;
}
.hero-3d--slim{min-height:64svh}
.hero-bg{position:absolute; inset:0; pointer-events:none}
.orb{position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; animation:drift 14s ease-in-out infinite alternate}
.orb-a{width:480px; height:480px; left:-140px; top:-120px; background:color-mix(in srgb, var(--primary) 65%, transparent)}
.orb-b{width:420px; height:420px; right:-120px; top:22%; background:color-mix(in srgb, var(--accent) 55%, transparent); animation-delay:-5s}
.orb-c{width:340px; height:340px; left:34%; bottom:-160px; background:color-mix(in srgb, var(--primary) 40%, #7c3aed); animation-delay:-9s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(50px,36px,0) scale(1.12)}}
.hero-grid{
  position:absolute; inset:0; opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 75% at 50% 40%, black 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 40%, black 30%, transparent 75%);
}
.float-layer{position:absolute; inset:0; pointer-events:none; transform-style:preserve-3d}
.float-card{
  position:absolute; display:flex; align-items:center; gap:.7rem;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:18px; padding:.9rem 1.15rem; color:#fff;
  box-shadow:0 24px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
  animation:floaty 7s ease-in-out infinite alternate;
  will-change:transform;
}
.float-card strong{display:block; font-size:1.05rem; line-height:1.2}
.float-card small{display:block; opacity:.75; font-size:.75rem}
.fc-rating{top:16%; left:6%}
.fc-quote{top:24%; right:5%; animation-delay:-2.5s}
.fc-verified{bottom:26%; left:9%; animation-delay:-4.5s}
.fc-wa{bottom:18%; right:8%; animation-delay:-1.2s}
.fc-stars{color:var(--accent); font-size:1.15rem; letter-spacing:2px; text-shadow:0 2px 8px rgba(0,0,0,.4)}
.fc-check{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,#4ade80,#16a34a); font-weight:900; font-size:1.1rem;
  box-shadow:0 6px 16px rgba(34,197,94,.5);
}
.fc-icon{font-size:1.7rem; filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
@keyframes floaty{from{translate:0 -10px} to{translate:0 12px}}
.hero-in{position:relative; z-index:2; text-align:center; padding:5rem 1.25rem 4rem; max-width:880px}
.hero-eyebrow{
  display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:.5rem 1.1rem; border-radius:999px; margin-bottom:1.4rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(8px);
}
.hero-title{
  font:900 clamp(2.5rem, 6.5vw, 4.6rem)/1.05 var(--font-display);
  margin:0 0 1.1rem; text-wrap:balance;
  text-shadow:0 4px 30px rgba(0,0,0,.45), 0 2px 0 rgba(0,0,0,.2);
}
.hero-sub{font-size:clamp(1.05rem,2.4vw,1.35rem); opacity:.88; max-width:640px; margin:0 auto 2.2rem; text-wrap:balance}
.hero-search{
  display:flex; gap:.6rem; background:#fff; border-radius:20px; padding:.55rem;
  box-shadow:0 30px 60px rgba(0,0,0,.4), 0 4px 0 rgba(255,255,255,.15);
  max-width:760px; margin:0 auto; text-align:left; position:relative;
}
.hs-field{flex:1; display:flex; align-items:center; gap:.55rem; padding:.35rem .8rem; position:relative; min-width:0}
.hs-q{flex:1.6}
.hs-field + .hs-field{border-left:1px solid var(--line)}
.hs-icon{font-size:1.15rem; flex:none}
.hs-field input, .hs-field select{
  border:0; outline:0; background:transparent; font:500 1rem var(--font-body); color:var(--ink);
  width:100%; padding:.7rem 0;
}
.hs-btn{flex:none}
.ac-list{
  position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:50;
  background:#fff; color:var(--ink); border-radius:14px; box-shadow:var(--shadow-lg);
  overflow:hidden; border:1px solid var(--line); max-height:320px; overflow-y:auto;
}
.ac-item{display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; background:none; border:0; padding:.7rem .9rem; cursor:pointer; font:500 .95rem var(--font-body); color:var(--ink)}
.ac-item:hover, .ac-item.is-active{background:color-mix(in srgb, var(--primary) 7%, white)}
.ac-item .ac-thumb{width:38px; height:38px; border-radius:10px; object-fit:cover; flex:none; background:var(--line)}
.ac-item .ac-meta{margin-left:auto; font-size:.78rem; color:var(--muted); flex:none}
.ac-loading, .ac-empty{padding:.9rem; color:var(--muted); font-size:.9rem; text-align:center}
.hero-popular{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; align-items:center; margin-top:1.6rem; font-size:.9rem; opacity:.92}
.chip{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff;
  padding:.45rem .95rem; border-radius:999px; font-weight:600; font-size:.88rem;
  text-decoration:none!important; backdrop-filter:blur(6px); transition:.18s;
}
.chip:hover{background:rgba(255,255,255,.24); transform:translateY(-2px)}
.hero-trust{margin-top:1.4rem; font-size:.88rem; opacity:.75; letter-spacing:.02em}
.hero-scroll{
  position:absolute; bottom:1.2rem; left:50%; translate:-50% 0; z-index:2;
  color:#fff; opacity:.7; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:.4rem; text-decoration:none!important;
}
.hero-scroll span{width:22px; height:36px; border:2px solid rgba(255,255,255,.6); border-radius:12px; position:relative}
.hero-scroll span::after{content:''; position:absolute; left:50%; top:6px; width:4px; height:8px; margin-left:-2px; border-radius:4px; background:#fff; animation:wheel 1.8s infinite}
@keyframes wheel{0%{opacity:1; top:6px} 70%{opacity:0; top:16px} 100%{opacity:0; top:6px}}

/* ---------- Secciones ---------- */
.section{padding:4.5rem 0}
.sec-head{display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:2.2rem; flex-wrap:wrap}
.sec-head h2{font:800 clamp(1.6rem,3.4vw,2.3rem) var(--font-display); margin:0; letter-spacing:-.02em}
.sec-head-center{justify-content:center; text-align:center}
.sec-sub{color:var(--muted); margin:.4rem 0 0}
.sec-link{font-weight:700; white-space:nowrap}

/* ---------- Categorías ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem}
.cat-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1rem; text-align:center; color:var(--ink); text-decoration:none!important;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s, border-color .2s;
  position:relative; overflow:hidden;
}
.cat-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--primary),var(--accent)); opacity:0; transition:opacity .2s;
}
.cat-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb, var(--primary) 35%, var(--line))}
.cat-card:hover::before{opacity:1}
.cat-emoji{font-size:2.4rem; filter:drop-shadow(0 6px 10px rgba(0,0,0,.15))}
.cat-name{font-weight:700}
.cat-go{color:var(--link); font-weight:800; opacity:0; translate:-6px 0; transition:.2s}
.cat-card:hover .cat-go{opacity:1; translate:0 0}

/* ---------- Tarjetas de negocio ---------- */
.cards-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.4rem}
.biz-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
}
.biz-card:hover{transform:translateY(-7px); box-shadow:var(--shadow-md)}
.biz-card.is-sponsored{border:1.5px solid color-mix(in srgb, var(--accent) 65%, var(--line)); box-shadow:0 14px 34px color-mix(in srgb, var(--accent) 22%, transparent)}
.biz-card.is-premium{border-top:4px solid var(--gold1)}
.biz-card-media{position:relative; aspect-ratio:16/10; background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 55%,#2a2140),var(--primary-dark)); display:block; overflow:hidden}
.biz-card-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.biz-card:hover .biz-card-media img{transform:scale(1.06)}
.biz-card-ph{
  width:100%; height:100%; display:grid; place-items:center;
  font:900 4rem var(--font-display); color:rgba(255,255,255,.85); text-shadow:0 8px 24px rgba(0,0,0,.35);
}
.biz-card-shade{position:absolute; inset:auto 0 0 0; height:45%; background:linear-gradient(transparent,rgba(8,5,18,.55)); pointer-events:none}
.badges{position:absolute; top:.7rem; left:.7rem; display:flex; flex-wrap:wrap; gap:.35rem; z-index:2}
.badge{
  display:inline-flex; align-items:center; font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:.32rem .65rem; border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,.18);
  backdrop-filter:blur(6px);
}
.badge-sponsored{background:linear-gradient(135deg,var(--accent),#b45309); color:#231600}
.badge-premium{background:linear-gradient(135deg,var(--gold1),var(--gold2)); color:#3a2500}
.badge-featured{background:linear-gradient(135deg,var(--primary),var(--btn-dark)); color:var(--on-primary)}
.badge-verified{background:rgba(220,252,231,.95); color:#166534}
.badge-open{background:rgba(220,252,231,.95); color:#166534}
.badge-closed{background:rgba(254,226,226,.95); color:#991b1b}
.biz-card-body{padding:1.15rem 1.25rem 1.25rem; display:flex; flex-direction:column; gap:.45rem; flex:1}
.biz-card-name{margin:0; font-size:1.12rem}
.biz-card-name a{color:var(--ink); text-decoration:none!important}
.biz-card-name a:hover{color:var(--link)}
.biz-card-meta{margin:0; color:var(--muted); font-size:.88rem}
.biz-card-rate{display:flex; align-items:center; gap:.45rem}
.rate-num{font-weight:800}
.rate-count{color:var(--muted); font-size:.82rem}
.stars{position:relative; display:inline-block; font-size:1.02rem; line-height:1; letter-spacing:2px; white-space:nowrap}
.stars-bg{color:#ddd5c4}
.stars-fg{position:absolute; left:0; top:0; overflow:hidden; color:var(--accent); text-shadow:0 1px 4px color-mix(in srgb, var(--accent) 50%, transparent)}
.biz-card-foot{margin-top:auto; padding-top:.6rem; display:flex; align-items:center; justify-content:space-between; border-top:1px dashed var(--line)}
.biz-card-price{font-weight:800; color:var(--primary-dark); font-size:1.02rem}
.biz-card-cta{font-weight:700; font-size:.9rem; text-decoration:none!important}
.biz-card-cta:hover{text-decoration:underline!important}

/* ---------- Slots publicitarios ---------- */
.ad-slot{
  border:2px dashed color-mix(in srgb, var(--primary) 28%, #c9c2b4);
  border-radius:var(--radius); background:color-mix(in srgb, var(--primary) 3%, #faf9f6);
  margin:2.5rem auto; padding:2.2rem 1.5rem; text-align:center; color:var(--muted);
  max-width:1200px; position:relative; min-height:110px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
}
.wrap .ad-slot{margin-left:0; margin-right:0}
.ad-slot-tag{
  font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  background:var(--card); border:1px solid var(--line); padding:.3rem .8rem; border-radius:999px; color:var(--muted);
}
.ad-slot-ph{opacity:.35}

/* ---------- Cómo funciona / SEO / CTA ---------- */
.how{background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, var(--bg)), var(--bg)); border-block:1px solid var(--line)}
.how-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.how-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.6rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden}
.how-card::after{content:''; position:absolute; inset:auto 0 0 0; height:4px; background:linear-gradient(90deg,var(--primary),var(--accent)); opacity:.85}
.how-num{font:900 3rem var(--font-display); color:color-mix(in srgb, var(--primary) 22%, white); line-height:1}
.how-card h3{margin:.6rem 0 .4rem; font-size:1.15rem}
.how-card p{margin:0; color:var(--muted)}
.seo-cloud{display:flex; flex-wrap:wrap; gap:.55rem}
.seo-cloud a{
  background:var(--card); border:1px solid var(--line); color:var(--ink); font-size:.88rem; font-weight:500;
  padding:.5rem 1rem; border-radius:999px; text-decoration:none!important; transition:.18s;
}
.seo-cloud a:hover{border-color:var(--primary); color:var(--link); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.cta-banner{
  background:
    radial-gradient(600px 300px at 90% 10%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:var(--on-primary); border-radius:28px; padding:3rem; display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.cta-banner::before{content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px); background-size:22px 22px; mask-image:linear-gradient(120deg, transparent 40%, black)}
.cta-banner h2{font:800 clamp(1.5rem,3vw,2.2rem) var(--font-display); margin:0 0 .5rem; position:relative}
.cta-banner p{margin:0; opacity:.88; position:relative}
.cta-banner .btn{position:relative; flex:none}

/* ---------- Buscador / filtros ---------- */
.page-head{padding-top:3rem; padding-bottom:.5rem}
.page-head h1{font:800 clamp(1.8rem,4vw,2.6rem) var(--font-display); margin:0 0 .3rem}
.results-count{color:var(--muted); margin:0; font-weight:600}
.search-layout{display:grid; grid-template-columns:290px 1fr; gap:2rem; align-items:start; padding-bottom:4rem}
.filters{position:sticky; top:92px}
.filters-toggle{display:none; width:100%; margin-bottom:1rem}
.filters-form{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:1rem}
.f-field label{display:block; font-weight:700; font-size:.85rem; margin-bottom:.35rem}
/* Todos los inputs de texto (con o sin type: text, email, password, tel, url,
   search, number…); se excluyen solo los no textuales (checkbox/radio/hidden). */
.f-field input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]), .f-field select{
  width:100%; padding:.7rem .85rem; border:1.5px solid var(--line); border-radius:12px;
  font:500 .95rem var(--font-body); color:var(--ink); background:#fff; outline:none; transition:border-color .15s, box-shadow .15s;
}
.f-field input:focus, .f-field select:focus{border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent)}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.f-check{display:flex; align-items:center; gap:.6rem; font-weight:600; font-size:.92rem; cursor:pointer}
.f-check input{width:20px; height:20px; accent-color:var(--primary)}
.f-actions{display:flex; gap:.6rem; flex-wrap:wrap}
.sponsored-row{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.4rem;
  background:color-mix(in srgb, var(--accent) 7%, transparent); border:1px dashed color-mix(in srgb, var(--accent) 50%, var(--line));
  border-radius:var(--radius); padding:1.2rem; margin-bottom:1.6rem;
}
.empty{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:3.5rem 2rem; text-align:center; grid-column:1/-1}
.empty-icon{font-size:3rem; display:block; margin-bottom:1rem}
.empty h2{font-family:var(--font-display); margin:0 0 .5rem}
.empty p{color:var(--muted); margin:0 0 1.4rem}
.results-loading{display:flex; align-items:center; justify-content:center; gap:.7rem; padding:2.5rem; color:var(--muted); font-weight:600}
.spinner{width:26px; height:26px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--primary); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Ficha de negocio ---------- */
.crumbs{font-size:.85rem; color:var(--muted); padding:1.4rem 0 0; display:flex; gap:.5rem; flex-wrap:wrap}
.crumbs a{text-decoration:none}
.biz-hero{position:relative; border-radius:28px; overflow:hidden; margin:1.2rem 0 2rem; min-height:340px; display:flex; align-items:flex-end; box-shadow:var(--shadow-lg); isolation:isolate}
.biz-hero-bg{position:absolute; inset:0; z-index:-2; background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 60%,#241d3d),var(--primary-dark))}
.biz-hero-bg img{width:100%; height:100%; object-fit:cover}
.biz-hero-shade{position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(8,5,18,.15) 30%, rgba(8,5,18,.82) 100%)}
.biz-hero-in{padding:2.2rem; color:#fff; width:100%}
.biz-hero-in .badges{position:static; margin-bottom:.9rem}
.biz-hero-in h1{font:900 clamp(1.9rem,4.6vw,3rem) var(--font-display); margin:0 0 .5rem; text-shadow:0 4px 24px rgba(0,0,0,.5)}
.biz-hero-meta{display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; align-items:center; opacity:.94; font-size:.95rem}
.biz-hero-meta .stars{font-size:1.1rem}
.biz-layout{display:grid; grid-template-columns:1fr 360px; gap:2rem; align-items:start; padding-bottom:4rem}
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-sm); margin-bottom:1.6rem}
.panel > h2{font:800 1.35rem var(--font-display); margin:0 0 1.1rem; display:flex; align-items:center; gap:.6rem}
.panel > h2::before{content:''; width:5px; height:1.4em; border-radius:3px; background:linear-gradient(var(--primary),var(--accent))}
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.8rem}
.gallery-grid button{border:0; padding:0; border-radius:14px; overflow:hidden; cursor:zoom-in; background:var(--line); aspect-ratio:4/3}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
.gallery-grid button:hover img{transform:scale(1.07)}
.gallery-cap{display:block; font-size:.75rem; color:var(--muted); padding:.3rem .2rem}
.svc-row{display:flex; align-items:baseline; gap:.8rem; padding:.75rem 0; border-bottom:1px dashed var(--line)}
.svc-row:last-child{border-bottom:0}
.svc-name{font-weight:600}
.svc-dots{flex:1; border-bottom:2px dotted color-mix(in srgb, var(--primary) 30%, var(--line)); translate:0 -4px}
.svc-price{font-weight:800; color:var(--primary-dark); white-space:nowrap}
.svc-dur{font-size:.78rem; color:var(--muted); white-space:nowrap}
.hours-table{width:100%; border-collapse:collapse}
.hours-table td{padding:.6rem .2rem; border-bottom:1px solid var(--line)}
.hours-table tr:last-child td{border-bottom:0}
.hours-table td:last-child{text-align:right; font-weight:600}
.hours-today{background:color-mix(in srgb, var(--primary) 6%, transparent); font-weight:700}
.hours-today td:first-child{color:var(--link)}
.map-frame{border:0; border-radius:14px; width:100%; height:320px; box-shadow:var(--shadow-sm)}
.review{border:1px solid var(--line); border-radius:16px; padding:1.3rem; margin-bottom:1rem; background:#fff}
.review-head{display:flex; align-items:center; gap:.7rem; margin-bottom:.5rem; flex-wrap:wrap}
.review-avatar{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:var(--on-primary); background:linear-gradient(135deg,var(--primary),var(--btn-dark)); flex:none}
.review-author{font-weight:700}
.review-date{color:var(--muted); font-size:.82rem; margin-left:auto}
/* Las estrellas siempre en su propia fila bajo el autor: evita que a veces
   queden en línea con el nombre y otras debajo según el ancho disponible. */
.review-head .stars{flex:0 0 calc(100% - 42px - .7rem); margin-left:calc(42px + .7rem); margin-top:-.15rem}
.review p{margin:.4rem 0}
.review-reply{
  margin-top:.9rem; border-radius:12px; padding:1rem 1.1rem;
  background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, #fff), color-mix(in srgb, var(--accent) 8%, #fff));
  border:1px solid color-mix(in srgb, var(--primary) 25%, var(--line)); position:relative;
}
.review-reply::before{content:'💬'; position:absolute; top:-14px; left:14px; background:#fff; border-radius:50%; padding:2px 6px; font-size:.9rem; box-shadow:var(--shadow-sm)}
.review-reply strong{display:block; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--link); margin-bottom:.3rem}
.stars-input{display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:.2rem}
.stars-input input{position:absolute; opacity:0}
.stars-input label{font-size:2rem; color:#ddd5c4; cursor:pointer; transition:.15s; line-height:1}
.stars-input label:hover, .stars-input label:hover ~ label,
.stars-input input:checked ~ label, .stars-input input:focus-visible ~ label{color:var(--accent); text-shadow:0 2px 8px color-mix(in srgb, var(--accent) 50%, transparent)}
.biz-side{position:sticky; top:92px; display:flex; flex-direction:column; gap:1.2rem}
.contact-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-md); display:flex; flex-direction:column; gap:.7rem}
.contact-card h2{font:800 1.15rem var(--font-display); margin:0 0 .3rem}
.contact-price{font-size:.9rem; color:var(--muted); margin:0 0 .4rem}
.claim{font-size:.82rem; color:var(--muted); text-align:center; margin:0}
.claim a{text-decoration:underline}
.claim.is-mine{color:#065f46; font-weight:700}
.claim-dispute{font-size:.78rem; text-align:center; margin:.3rem 0 0}
.claim-summary{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem; margin:1rem 0; display:flex; flex-direction:column; gap:.2rem}
.admin-row{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem; margin:.8rem 0}
.admin-actions{display:flex; gap:.5rem; flex:none}
.quote-box{background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, #fff), #fff); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-sm)}
.quote-box h2{font:800 1.15rem var(--font-display); margin:0 0 .2rem}
.quote-box .sub{font-size:.88rem; color:var(--muted); margin:0 0 1rem}
#presupuesto{scroll-margin-top:96px}
.quote-flash{animation:quoteFlash 1.4s ease}
@keyframes quoteFlash{
  0%,100%{box-shadow:var(--shadow-sm)}
  25%,65%{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 65%, transparent), var(--shadow-md)}
}
.form-grid{display:flex; flex-direction:column; gap:.85rem}
.form-grid label, .f-field label{display:block; font-weight:700; font-size:.85rem; margin-bottom:.35rem}
.form-grid input, .form-grid select, .form-grid textarea{
  width:100%; padding:.75rem .9rem; border:1.5px solid var(--line); border-radius:12px;
  font:500 .95rem var(--font-body); color:var(--ink); background:#fff; outline:none; transition:border-color .15s, box-shadow .15s;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent)}
.form-grid textarea{resize:vertical; min-height:110px}
.privacy{font-size:.78rem; color:var(--muted); margin:0}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed; inset:0; z-index:300; background:rgba(8,5,18,.92); display:grid; place-items:center; padding:1.5rem; opacity:0; pointer-events:none; transition:opacity .25s}
.lightbox.is-open{opacity:1; pointer-events:auto}
.lightbox figure{margin:0; max-width:min(1000px,94vw); text-align:center}
.lightbox img{max-height:78vh; max-width:100%; border-radius:16px; box-shadow:var(--shadow-lg); margin:0 auto}
.lightbox figcaption{color:#fff; opacity:.85; margin-top:.8rem; font-size:.95rem}
.lb-btn{position:absolute; top:50%; translate:0 -50%; width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#fff; font-size:1.4rem; cursor:pointer; backdrop-filter:blur(8px)}
.lb-btn:hover{background:rgba(255,255,255,.25)}
.lb-prev{left:1.2rem}.lb-next{right:1.2rem}
.lb-close{position:absolute; top:1.2rem; right:1.2rem; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#fff; font-size:1.2rem; cursor:pointer}
.lb-count{position:absolute; bottom:1.4rem; left:50%; translate:-50% 0; color:#fff; opacity:.75; font-size:.9rem}

/* ---------- Anuncia tu negocio ---------- */
.adv-points{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.8rem}
.adv-points span{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); padding:.5rem 1.1rem; border-radius:999px; font-size:.88rem; font-weight:600; backdrop-filter:blur(6px)}
.plans-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:stretch}
.plan-card{
  background:var(--card); border:1.5px solid var(--line); border-radius:26px; padding:2.2rem 1.8rem;
  display:flex; flex-direction:column; box-shadow:var(--shadow-sm); position:relative; transition:transform .22s, box-shadow .22s;
}
.plan-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-md)}
.plan-card.is-popular{
  border:2px solid transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box,
             linear-gradient(135deg,var(--primary),var(--accent)) border-box;
  box-shadow:var(--shadow-lg); transform:scale(1.03);
}
.plan-card.is-popular:hover{transform:scale(1.03) translateY(-8px)}
.plan-flag{
  position:absolute; top:-15px; left:50%; translate:-50% 0;
  background:linear-gradient(135deg,var(--accent),#b45309); color:#231600;
  font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:.4rem 1.1rem; border-radius:999px; box-shadow:0 8px 18px color-mix(in srgb, var(--accent) 45%, transparent); white-space:nowrap;
}
.plan-name{font:800 1.35rem var(--font-display); margin:0}
.plan-desc{color:var(--muted); font-size:.92rem; margin:.3rem 0 1.2rem}
.plan-price{font:900 2.6rem var(--font-display); letter-spacing:-.03em; line-height:1; white-space:nowrap}
.plan-price small{font:700 .95rem var(--font-body); color:var(--muted); letter-spacing:0}
.plan-features{list-style:none; margin:1.4rem 0 1.8rem; padding:0; display:flex; flex-direction:column; gap:.6rem; flex:1}
.plan-features li{display:flex; gap:.6rem; align-items:flex-start; font-size:.93rem}
.plan-features li::before{content:'✓'; flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.75rem; font-weight:900; color:var(--on-primary); background:linear-gradient(135deg,var(--primary),var(--btn-dark)); margin-top:2px}
.plan-features li.hl{font-weight:800; color:var(--primary-dark)}
.plan-note{text-align:center; color:var(--muted); font-size:.88rem; margin-top:1.4rem}
.addon-card, .leads-card{
  border-radius:26px; padding:2.4rem; display:flex; gap:1.8rem; align-items:center; flex-wrap:wrap;
  box-shadow:var(--shadow-md); position:relative; overflow:hidden; margin-bottom:1.6rem;
}
.addon-card{background:linear-gradient(135deg, #052e16, #065f46); color:#fff; border:1px solid rgba(74,222,128,.35)}
.addon-icon{font-size:3rem; filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}
.addon-card h3, .leads-card h3{font:800 1.5rem var(--font-display); margin:0 0 .4rem}
.addon-card p{margin:0; opacity:.88; max-width:520px}
.addon-price{margin-left:auto; text-align:right}
.addon-price strong{font:900 2rem var(--font-display); display:block}
.addon-price span{opacity:.75; font-size:.85rem}
.leads-card{background:linear-gradient(135deg, var(--primary-dark), color-mix(in srgb, var(--primary) 70%, #1a1030)); color:#fff; border:1px solid color-mix(in srgb, var(--accent) 45%, transparent)}
.leads-card p{margin:0; opacity:.88; max-width:520px}
.founder-badge{
  display:inline-block; background:linear-gradient(135deg,var(--gold1),var(--gold2)); color:#3a2500;
  font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:.35rem .9rem; border-radius:999px; margin-bottom:.7rem; box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.testi-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.8rem}
.testi-card .stars{font-size:1.15rem}
.testi-text{font-style:italic; margin:0; flex:1}
.testi-who{display:flex; align-items:center; gap:.8rem}
.testi-who .review-avatar{background:linear-gradient(135deg,var(--accent),#b45309)}
.testi-who small{display:block; color:var(--muted)}
.faq{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:.8rem}
.faq-item{background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:box-shadow .2s}
.faq-item.is-open{box-shadow:var(--shadow-md); border-color:color-mix(in srgb, var(--primary) 35%, var(--line))}
.faq-q{width:100%; background:none; border:0; padding:1.2rem 1.4rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; cursor:pointer; font:700 1.02rem var(--font-body); color:var(--ink); text-align:left}
.faq-q .fx{flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--primary) 10%, transparent); color:var(--link); font-size:1.2rem; transition:transform .25s}
.faq-item.is-open .fx{transform:rotate(45deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.faq-a p{margin:0; padding:0 1.4rem 1.3rem; color:var(--muted)}
.final-cta{text-align:center; padding:5rem 1.5rem; border-radius:32px; color:#fff; position:relative; overflow:hidden;
  background:radial-gradient(700px 340px at 50% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 65%),
             linear-gradient(160deg, var(--primary-dark), #0b0716); box-shadow:var(--shadow-lg)}
.final-cta h2{font:900 clamp(1.8rem,4.4vw,3rem) var(--font-display); margin:0 0 .8rem; position:relative}
.final-cta p{opacity:.85; margin:0 0 2rem; position:relative}
.final-cta .btn{position:relative}
.demo-note{font-size:.8rem; opacity:.6; margin-top:1.2rem!important}

/* ---------- Auth ---------- */
.auth-wrap{display:grid; grid-template-columns:1fr 1fr; min-height:calc(100svh - 72px)}
.auth-visual{
  background:
    radial-gradient(500px 300px at 80% 20%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
    linear-gradient(160deg, var(--primary-dark), #0b0716);
  color:#fff; padding:4rem 3rem; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;
}
.auth-visual::before{content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.12) 1.5px, transparent 1.5px); background-size:24px 24px; mask-image:linear-gradient(200deg, black, transparent 70%)}
.auth-visual h2{font:900 clamp(1.8rem,3.6vw,2.8rem) var(--font-display); margin:0 0 1rem; position:relative}
.auth-visual p{opacity:.82; max-width:420px; position:relative}
.auth-visual ul{list-style:none; padding:0; margin:2rem 0 0; display:flex; flex-direction:column; gap:1rem; position:relative}
.auth-visual li{display:flex; gap:.8rem; align-items:center; font-weight:600}
.auth-visual li::before{content:'✓'; width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); font-weight:900}
.auth-form{display:flex; align-items:center; justify-content:center; padding:3rem 1.5rem}
.auth-card{width:100%; max-width:440px}
.auth-card h1{font:800 2rem var(--font-display); margin:0 0 .3rem}
.auth-card .sub{color:var(--muted); margin:0 0 1.8rem}
.auth-card form{display:flex; flex-direction:column; gap:1rem}
.auth-alt{margin-top:1.6rem; text-align:center; color:var(--muted); font-size:.92rem}

/* ---------- Dashboard ---------- */
.dash-head{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding:2.5rem 0 1rem}
.dash-head h1{font:800 clamp(1.7rem,3.6vw,2.4rem) var(--font-display); margin:0}
.dash-head p{margin:.2rem 0 0; color:var(--muted)}
.plan-strip{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:space-between;
  background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, #fff), #fff);
  border:1.5px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius:var(--radius); padding:1.2rem 1.6rem; margin-bottom:1.8rem;
}
.plan-strip strong{font:800 1.2rem var(--font-display); text-transform:capitalize}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-bottom:1.8rem}
.stat-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden}
.stat-card::before{content:''; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--primary),var(--accent))}
.stat-num{font:900 2.4rem var(--font-display); letter-spacing:-.02em; line-height:1}
.stat-label{color:var(--muted); font-size:.88rem; font-weight:600; margin:.3rem 0 .8rem}
.stat-bar{height:8px; border-radius:99px; background:color-mix(in srgb, var(--primary) 10%, var(--line)); overflow:hidden}
.stat-bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--primary),var(--accent)); transition:width 1s ease}
.dash-panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-sm); margin-bottom:1.8rem}
.dash-panel > h2{font:800 1.3rem var(--font-display); margin:0 0 1.2rem}
.leads-table{width:100%; border-collapse:collapse; font-size:.92rem}
.leads-table th{text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:.6rem .8rem; border-bottom:2px solid var(--line)}
.leads-table td{padding:.85rem .8rem; border-bottom:1px solid var(--line); vertical-align:top}
.leads-table tr:last-child td{border-bottom:0}
.status-pill{font-size:.75rem; font-weight:800; padding:.3rem .7rem; border-radius:999px; white-space:nowrap}
.status-new{background:color-mix(in srgb, var(--accent) 20%, #fff); color:#92400e}
.status-contacted{background:color-mix(in srgb, var(--primary) 14%, #fff); color:var(--primary-dark)}
.status-closed{background:#f1f5f9; color:#64748b}
.reply-form{display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap}
.reply-form input{flex:1; min-width:200px; padding:.7rem .9rem; border:1.5px solid var(--line); border-radius:12px; font:500 .92rem var(--font-body)}
.edit-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.edit-grid .full{grid-column:1/-1}
.hours-edit{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem}
.hours-edit label{font-size:.82rem!important}
.saved-ok{background:var(--ok-bg); border:1px solid #86efac; color:#166534; border-radius:12px; padding:.9rem 1.2rem; margin-bottom:1.4rem; font-weight:600}

/* ---------- 404 / éxito ---------- */
.center-card{max-width:560px; margin:4rem auto; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:28px; padding:4rem 2rem; box-shadow:var(--shadow-md)}
.center-card .big{font-size:3.5rem; display:block; margin-bottom:1rem}
.center-card h1{font:800 2rem var(--font-display); margin:0 0 .6rem}
.center-card p{color:var(--muted); margin:0 0 1.8rem}
.check-ring{width:88px; height:88px; margin:0 auto 1.4rem; border-radius:50%; display:grid; place-items:center; font-size:2.4rem; color:#052e16; background:linear-gradient(135deg,#4ade80,#16a34a); box-shadow:0 16px 34px rgba(34,197,94,.4); animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.4); opacity:0}}

/* ---------- Footer ---------- */
.site-footer{background:#12101d; color:#cfc9e0; margin-top:0}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; padding:3.5rem 1.25rem 2.5rem}
.footer-brand .brand-name{color:#fff}
.footer-brand p{font-size:.92rem; opacity:.75; max-width:300px}
.site-footer h4{color:#fff; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; margin:0 0 1rem}
.site-footer nav a{display:block; color:#cfc9e0; font-size:.92rem; padding:.28rem 0; text-decoration:none!important; opacity:.85}
.site-footer nav a:hover{opacity:1; color:#fff}
.footer-city-select{
  width:100%; max-width:240px; background:#1d1a2e; color:#fff;
  border:1px solid rgba(255,255,255,.18); border-radius:12px;
  padding:.6rem .8rem; font:600 .92rem var(--font-body); cursor:pointer;
}
.footer-city-select:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- Volver arriba ---------- */
.to-top{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:60;
  width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.to-top.is-visible{opacity:1; visibility:visible; transform:none}
.to-top:hover{background:var(--primary-dark)}
.to-top:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (max-width:640px){.to-top{right:.9rem; bottom:.9rem; width:44px; height:44px}}
.footer-bottom{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.4rem 1.25rem; border-top:1px solid rgba(255,255,255,.1); font-size:.82rem; opacity:.7}
a.made{color:inherit; text-decoration:none}
a.made:hover{color:#fff; text-decoration:underline}

/* ---------- Backlinks hub ⇄ verticales (compartido: lo usan las plantillas
   verticales —business/city_service— y las del hub) ---------- */
.hub-backlinks{
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, #fff), #fff);
  border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-left:5px solid var(--accent);
  border-radius:18px; padding:1.2rem 1.4rem; box-shadow:var(--shadow-sm);
}
.hub-backlinks-icon{
  width:46px; height:46px; flex:none; border-radius:14px; display:grid; place-items:center; font-size:1.4rem;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:var(--on-primary);
  box-shadow:0 8px 18px color-mix(in srgb, var(--primary) 40%, transparent);
}
.hub-backlinks p{margin:0; display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; font-weight:600; font-size:.95rem}
.hub-backlinks a{font-weight:800}
.hub-backlinks .sep{color:var(--muted)}

/* ---------- Utilidades ---------- */
.flash{background:#fef3c7; border:1px solid #fbbf24; color:#92400e; border-radius:12px; padding:.9rem 1.2rem; margin:1.2rem 0; font-weight:600}
.flash-error{background:#fef2f2; border-color:#fca5a5; color:#991b1b}
.flash-ok{background:#ecfdf5; border-color:#6ee7b7; color:#065f46}
.flash-demo{background:#eff6ff; border-color:#93c5fd; color:#1e40af; word-break:break-all}
.inline-form{display:inline}
.reveal{opacity:0; translate:0 26px; transition:opacity .7s ease, translate .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1; translate:0 0}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .biz-layout{grid-template-columns:1fr 320px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .plans-grid{grid-template-columns:1fr; max-width:520px; margin:0 auto}
  .plan-card.is-popular{transform:none; order:-1}
  .plan-card.is-popular:hover{transform:translateY(-8px)}
  .testi-grid{grid-template-columns:1fr; max-width:640px; margin:0 auto}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .hide-m{display:none!important}
  .only-m{display:block!important}
  .main-nav{
    position:fixed; inset:72px 0 auto 0; z-index:99; flex-direction:column; align-items:stretch;
    background:color-mix(in srgb, var(--bg) 96%, white); backdrop-filter:blur(18px);
    padding:1rem 1.25rem 1.5rem; margin:0; gap:.2rem; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg); transform:translateY(-12px); opacity:0; pointer-events:none; transition:.25s;
  }
  .main-nav.is-open{transform:none; opacity:1; pointer-events:auto}
  .nav-link{padding:.9rem .6rem; font-size:1.05rem}
  .burger{display:flex}
  .burger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger.is-open span:nth-child(2){opacity:0}
  .burger.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .float-card{display:none}
  .hero-search{flex-direction:column; border-radius:22px}
  .hs-field + .hs-field{border-left:0; border-top:1px solid var(--line)}
  .search-layout{grid-template-columns:1fr}
  .filters{position:static}
  .filters-toggle{display:inline-flex}
  .filters-form{display:none}
  .filters-form.is-open{display:flex}
  .biz-layout{grid-template-columns:1fr}
  .biz-side{position:static}
  .how-grid{grid-template-columns:1fr}
  .auth-wrap{grid-template-columns:1fr}
  .auth-visual{display:none}
  .cta-banner{padding:2.2rem 1.6rem}
  .edit-grid{grid-template-columns:1fr}
  .addon-card, .leads-card{flex-direction:column; align-items:flex-start}
  .addon-price{margin-left:0; text-align:left}
  .leads-table thead{display:none}
  .leads-table, .leads-table tbody, .leads-table tr, .leads-table td{display:block; width:100%}
  .leads-table tr{border:1px solid var(--line); border-radius:14px; margin-bottom:.8rem; padding:.6rem}
  .leads-table td{border:0; padding:.35rem .6rem}
  .leads-table td::before{content:attr(data-label); display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800}
}
@media (max-width:560px){
  .section{padding:3rem 0}
  .cards-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr; gap:.8rem}
  .stat-card{padding:1.1rem}
  .stat-num{font-size:1.9rem}
  .footer-grid{grid-template-columns:1fr}
  /* Más aire bajo el hero en móvil: el indicador .hero-scroll (absolute,
     bottom:1.2rem) solapaba la línea de confianza cuando esta ocupa 2 líneas. */
  .hero-in{padding:4rem 1.25rem 5.5rem}
  /* El placeholder del buscador es largo: algo menos de cuerpo en móvil para
     que quepa entero (termina en …) en vez de cortarse a mitad de palabra. */
  .hs-field input, .hs-field select{font-size:.92rem}
  /* Enlaces hub-backlinks apilados: el separador · quedaba colgando al final de línea. */
  .hub-backlinks p{flex-direction:column; align-items:flex-start; gap:.35rem}
  .hub-backlinks .sep{display:none}
  .lb-prev{left:.5rem}.lb-next{right:.5rem}
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; translate:none}
}

/* ---- checkout (resumen de compra) ---- */
.checkout-line{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--border,#e5e7eb)}
.checkout-extra{display:flex;gap:.7rem;align-items:flex-start;padding:.8rem;border:1px solid var(--border,#e5e7eb);border-radius:.6rem;margin:.5rem 0;cursor:pointer}
.checkout-extra input{margin-top:.25rem}
.muted{color:var(--muted,#6b7280)}

/* ---- páginas de contenido (cómo funciona, legal, contacto) ---- */
.page-wrap{max-width:780px; margin:0 auto; padding:2.5rem 1.25rem 4rem}
.page-narrow{max-width:620px}
.page-wrap h1{font-size:2rem; margin:0 0 .5rem; line-height:1.2}
.page-wrap .lede{color:var(--muted); font-size:1.08rem; margin:0 0 2rem; line-height:1.6}
.page-h2{font-size:1.35rem; margin:0 0 1rem}
.page-sec{margin:0 0 1.6rem}
.page-sec h2{font-size:1.15rem; margin:0 0 .4rem}
.page-sec p{margin:0; line-height:1.7; color:var(--ink)}
.steps{display:grid; gap:1rem; margin:0 0 2.5rem}
.step{display:flex; gap:1rem; background:var(--card,#fff); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.2rem}
.step-n{flex:none; width:2.2rem; height:2.2rem; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:700}
.step h3{margin:.15rem 0 .3rem; font-size:1.05rem}
.step p{margin:0; color:var(--muted); line-height:1.6}
.note-box{border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; padding:1.1rem 1.2rem; background:var(--card,#fff)}
.note-box p{margin:.4rem 0 0; color:var(--muted); line-height:1.65}
.cookie-table{width:100%; border-collapse:collapse; margin:.8rem 0 0}
.cookie-table th,.cookie-table td{text-align:left; padding:.65rem .8rem; border:1px solid var(--line); font-size:.95rem; vertical-align:top}
.cookie-table th{background:var(--card,#fff)}
.contact-form .f-field{margin-bottom:1rem}
.contact-form textarea{width:100%; border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem; font:inherit; resize:vertical}
.badge-muted{background:#6b7280; color:#fff}
.check{display:flex; gap:.5rem; align-items:center; font-weight:600; cursor:pointer}
.check input{width:1.1rem; height:1.1rem; accent-color:var(--accent)}

/* ---- reservas online ---- */
.day-pills{display:flex; gap:.5rem; overflow-x:auto; padding:.2rem 0}
.day-pill{flex:none; border:1px solid var(--line); background:var(--card,#fff); border-radius:10px; padding:.55rem .8rem; font:inherit; font-size:.9rem; cursor:pointer; text-transform:capitalize}
.day-pill.is-on{border-color:var(--accent); background:var(--accent); color:#fff; font-weight:700}
.slot-grid{display:flex; flex-wrap:wrap; gap:.5rem; padding:.2rem 0}
.slot-pill{border:1px solid var(--line); background:var(--card,#fff); border-radius:10px; padding:.55rem .9rem; font:inherit; cursor:pointer}
.slot-pill.is-on{border-color:var(--accent); background:var(--accent); color:#fff; font-weight:700}

/* ---- reseñas con scroll cuando hay muchas ---- */
.reviews-scroll{max-height:460px; overflow-y:auto; padding-right:.4rem; scrollbar-width:thin}
.reviews-scroll .review:last-child{margin-bottom:.2rem}