/* ======================================================================
   MI MASCOTA CLUB — HOJA DE ESTILOS (identidad de marca aplicada)
   ======================================================================
   1) TIPOGRAFÍA → --font-display / --font-body (Lato, Google Fonts)
   2) COLORES → variables :root (tomados de tu logo: #FFCE00 y #47C9C9)
   3) LOGO → assets/logo.svg (color) y assets/logo-blanco.svg (para fondos oscuros)
   4) IMÁGENES → assets/images/
   ====================================================================== */

:root{
  --font-display: 'Lato', sans-serif;
  --font-body: 'Lato', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace; /* solo para códigos (MMC00001, NEG0001) */

  --ink:#1A1A1A;
  --paper:#FFFFFF;
  --paper-tint-yellow:#FFF8DE;
  --paper-tint-teal:#EAF9F9;
  --line: rgba(26,26,26,0.10);

  --yellow:#FFCE00;
  --yellow-dark:#E0B400;
  --teal:#47C9C9;
  --teal-dark:#2FA8A8;
  --black:#151515;
  --gray:#6B7280;
  --rust:#D65A3A;
  --sage:#3FAE7A;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; width:100%; }
h1,h2,h3,.display{ font-family:var(--font-display); font-weight:900; }
.mono{ font-family:var(--font-mono); letter-spacing:0.02em; }
a{color:inherit;}
.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }

nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.navbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:10px; padding:14px 28px; max-width:1180px; margin:0 auto; }
.logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:900; font-size:19px; text-decoration:none; cursor:pointer; }
.logo img, .logo svg{ height:34px; width:auto; }
.navlinks{ display:flex; align-items:center; gap:24px; font-size:14px; font-weight:700; height:40px; }
.navlinks a{ text-decoration:none; opacity:0.75; transition:opacity .15s; line-height:1; display:flex; align-items:center; height:100%; }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px; font-weight:800; font-size:14.5px; border:2px solid transparent; cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }

.btn:disabled{ opacity:0.6; cursor:not-allowed; transform:none; }
.btn:focus-visible{ outline:3px solid var(--teal-dark); outline-offset:2px; }
.btn-primary{ background:var(--yellow); color:var(--black); box-shadow:0 3px 0 var(--yellow-dark); }

.btn-outline{ background:#fff; border-color:var(--ink); color:var(--ink); }
.btn-brass{ background:var(--teal); color:#fff; box-shadow:0 3px 0 var(--teal-dark); }
/* Botón "Quiero unirme al club" del nav: celeste por defecto (mismo tono que el
   "para tu mascota" del hero), pasa a amarillo con texto negro en hover/focus/press. */
.btn-nav-join{ background:var(--teal-dark); color:#fff; box-shadow:0 3px 0 #257e7e; }
.btn-nav-join:hover, .btn-nav-join:focus-visible, .btn-nav-join:active{ background:var(--yellow); color:var(--black); box-shadow:0 3px 0 var(--yellow-dark); }
.btn-navy{ background:var(--black); color:#fff; }
.btn-sm{ padding:9px 15px; font-size:13px; }

.hero{ padding:64px 0 56px; position:relative; overflow:hidden; background:var(--paper-tint-yellow); }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.hero-grid > *{ min-width:0; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:800; font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--black); background:#fff; padding:7px 14px; border-radius:999px; margin-bottom:20px; border:2px solid var(--ink); }
.hero h1{ font-size:52px; line-height:1.06; font-weight:900; margin:0 0 18px; letter-spacing:-0.01em; }
.hero h1 em{ font-style:normal; color:var(--teal-dark); }

/* ---- Titular que se escribe y se borra solo ----
   .hero-rota__fantasma es la frase más larga, invisible: reserva el espacio.
   .hero-rota__vivo va encima, en posición absoluta, y es la que cambia. Así el
   bloque nunca cambia de tamaño y nada salta en la página. */
.hero-rota{ position:relative; display:block; }
.hero-rota__fantasma{ visibility:hidden; }
.hero-rota__vivo{ position:absolute; left:0; right:0; top:0; transition:opacity .32s ease; }
.hero-caret{
  display:inline-block; width:3px; height:0.82em;
  margin-left:5px; vertical-align:-0.08em;
  background:var(--teal-dark); border-radius:2px;
  animation:heroCaret 1s steps(1) infinite;
}
@keyframes heroCaret{ 0%,50%{ opacity:1; } 51%,100%{ opacity:0; } }

/* Si la persona pidió menos movimiento en su sistema, no parpadea nada. */
@media (prefers-reduced-motion: reduce){
  .hero-caret{ animation:none; opacity:0; }
}
.hero p.lead{ font-size:18px; line-height:1.55; color:#3a3a3a; max-width:480px; margin:0 0 28px; font-weight:500; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
.hero-note{ font-size:13.5px; color:#4a4a4a; display:flex; align-items:center; gap:8px; font-weight:600; }
.hero-note .dot{ width:7px; height:7px; border-radius:50%; background:var(--sage); }

.card-stage{ display:flex; justify-content:center; align-items:center; min-width:0; width:100%; }
.credencial{ width:100%; max-width:340px; min-width:0; border-radius:22px; background:var(--black); color:#fff; padding:26px 24px 22px; position:relative; box-shadow:0 24px 50px -18px rgba(21,21,21,0.35); transform:rotate(2deg); transition:transform .35s ease; }

.credencial::before{ content:""; position:absolute; inset:10px; border:1.5px dashed rgba(255,255,255,0.18); border-radius:16px; pointer-events:none; }
.cred-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.cred-brand{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:0.03em; }
.cred-brand img,.cred-brand svg{ height:20px; width:auto; }
.cred-id{ font-family:var(--font-mono); font-size:11px; color:var(--yellow); font-weight:700; }
.cred-photo{ width:66px; height:66px; border-radius:50%; background:var(--teal); display:flex; align-items:center; justify-content:center; margin-bottom:14px; border:3px solid var(--yellow); }
.cred-photo img,.cred-photo svg{ width:34px; height:34px; }
.cred-name{ font-family:var(--font-display); font-size:26px; font-weight:900; margin:0 0 2px; }
.cred-breed{ font-size:13px; color:#cfcfcf; margin-bottom:16px; font-weight:600; }
.cred-row{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10.5px; color:#9a9a9a; border-top:1px solid rgba(255,255,255,0.15); padding-top:12px; margin-top:4px; text-transform:uppercase; letter-spacing:0.05em; }
.cred-row b{ display:block; color:#fff; font-size:12.5px; font-weight:700; margin-top:3px; letter-spacing:0; text-transform:none; }
.cred-badge{ position:absolute; top:-12px; right:22px; background:var(--yellow); color:var(--black); font-family:var(--font-body); font-size:11px; font-weight:800; padding:6px 12px; border-radius:8px; box-shadow:0 3px 8px rgba(0,0,0,0.25); }
.cred-qr{ display:flex; justify-content:center; margin-top:16px; background:#fff; border-radius:12px; padding:10px; }

section{ padding:64px 0; }
.section-head{ max-width:640px; margin-bottom:38px; }
.section-head .eyebrow{ margin-bottom:14px; }
.section-head h2{ font-size:34px; font-weight:900; margin:0 0 12px; line-height:1.15; }
.section-head p{ font-size:16px; color:#4a4a4a; line-height:1.6; margin:0; font-weight:500; }
.band{ background:var(--paper-tint-teal); }

/* Categorías (grilla de íconos) */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cat-tile{ background:#fff; border:2px solid var(--line); border-radius:18px; padding:20px 16px; text-align:center; cursor:pointer; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }

.cat-tile .ic{ width:52px; height:52px; border-radius:14px; background:var(--paper-tint-yellow); display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 12px; }
.cat-tile.dueno .ic{ background:var(--paper-tint-teal); }
.cat-tile .lbl{ font-size:13px; font-weight:800; }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.step{ background:#fff; border:2px solid var(--line); border-radius:20px; padding:26px 24px; }
.step .num{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--yellow); font-family:var(--font-display); font-size:14px; color:var(--black); font-weight:900; margin-bottom:16px; }
.step h3{ font-size:19px; margin:0 0 8px; font-weight:900; }
.step p{ font-size:14.5px; color:#5a5a5a; line-height:1.55; margin:0; font-weight:500; }

.dir-controls{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; align-items:center; }
.dir-controls input, .dir-controls select{ padding:12px 14px; border-radius:12px; border:2px solid var(--line); background:#fff; font-size:16px; font-family:var(--font-body); font-weight:600; }
.dir-controls input{ flex:1; min-width:220px; }
.dir-status{ font-family:var(--font-mono); font-size:11.5px; color:#8a8a8a; margin-bottom:18px; }
.dir-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
.biz-card{ background:#fff; border:2px solid var(--line); border-radius:20px; overflow:hidden; position:relative; transition:box-shadow .15s ease, transform .15s ease; cursor:pointer; text-align:left; }

.biz-photo{ height:120px; display:flex; align-items:center; justify-content:center; font-size:40px; position:relative; }
.biz-photo .founder-badge{ position:absolute; top:10px; right:10px; font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.04em; background:rgba(255,255,255,0.92); color:var(--black); padding:4px 9px; border-radius:6px; font-weight:700; }
.biz-body{ padding:16px 18px 18px; }
.biz-card h3{ font-size:16.5px; margin:0 0 4px; font-weight:900; font-family:var(--font-display); }
.biz-cat{ font-size:12px; color:var(--teal-dark); font-weight:800; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.02em; }
.biz-cat .tag-dueno{ color:var(--rust); }
.biz-meta{ font-size:13px; color:#5a5a5a; margin-bottom:0; line-height:1.5; font-weight:500; }
.empty-state{ text-align:center; padding:50px 20px; color:#6b7280; font-size:14.5px; font-weight:600; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.split.single{ grid-template-columns:1fr; max-width:640px; margin:0 auto; }
.panel{ background:#fff; border:2px solid var(--line); border-radius:22px; padding:32px; }
.panel.full{ grid-column:1/-1; }
.panel .tag{ font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--rust); margin-bottom:10px; display:block; font-weight:700; }
.panel h3{ font-size:23px; margin:0 0 8px; font-weight:900; }
.panel p.desc{ font-size:14.5px; color:#5a5a5a; line-height:1.55; margin:0 0 22px; font-weight:500; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:13px; font-weight:800; margin-bottom:6px; }
.field input, .field select, .field textarea{ width:100%; padding:12px 13px; border-radius:11px; border:2px solid var(--line); font-size:16px; font-family:var(--font-body); background:var(--paper-tint-yellow); font-weight:600; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field-row.three{ grid-template-columns:1fr 1fr 1fr; }
.price-hint{ font-family:var(--font-mono); font-size:11.5px; color:#8a8a8a; margin-top:16px; line-height:1.5; }
.price-hint b{ color:var(--ink); }
.waitlist{ margin-top:22px; }
.waitlist-count{ font-family:var(--font-mono); font-size:12px; color:var(--teal-dark); font-weight:800; margin-bottom:8px; }
.waitlist-item{ display:flex; justify-content:space-between; font-size:13.5px; padding:9px 0; border-top:1px solid var(--line); font-weight:600; }
.waitlist-item span.small{ color:#8a8a8a; font-size:12px; font-weight:500; }
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; background:var(--black); color:#fff; padding:13px 22px; border-radius:12px; font-size:14px; font-weight:700; box-shadow:0 10px 30px rgba(0,0,0,0.3); transition:all .25s ease; pointer-events:none; z-index:200; max-width:min(90vw,420px); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.banner-warn{ background:var(--paper-tint-yellow); border:2px solid var(--yellow); color:#5a4a00; font-size:13px; font-weight:700; padding:12px 18px; border-radius:12px; margin-bottom:24px; }

.validar-result{ margin-top:18px; padding:16px; border-radius:14px; background:var(--paper-tint-teal); border:2px dashed var(--teal); font-size:13.5px; display:none; font-weight:600; }
.validar-result.show{ display:block; }
.validar-result .big{ font-family:var(--font-display); font-size:22px; color:var(--teal-dark); font-weight:900; }

.admin-lock{ max-width:380px; margin:0 auto; text-align:center; background:#fff; border:2px solid var(--line); border-radius:20px; padding:32px; }
.admin-lock input{ width:100%; padding:13px 14px; border-radius:11px; border:2px solid var(--line); font-size:16px; margin:14px 0; text-align:center; font-family:var(--font-mono); }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:30px; }
.stat-card{ background:var(--black); color:#fff; border-radius:16px; padding:20px 18px; }
.stat-card .n{ font-family:var(--font-display); font-size:28px; font-weight:900; color:var(--yellow); }
.stat-card .l{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; opacity:0.8; margin-top:4px; }
.admin-table{ background:#fff; border:2px solid var(--line); border-radius:18px; overflow:hidden; margin-bottom:26px; }
.admin-table h4{ margin:0; padding:16px 20px; font-size:14px; font-weight:900; border-bottom:2px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.table-row{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:10px; padding:12px 20px; font-size:13.5px; border-top:1px solid var(--line); align-items:center; font-weight:600; }
.table-row.head{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; color:#8a8a8a; border-top:none; font-weight:700; }
.table-row span.dim{ color:#8a8a8a; font-size:12.5px; font-weight:500; }
.refresh-btn{ background:none; border:2px solid var(--line); border-radius:10px; padding:5px 10px; font-size:11.5px; cursor:pointer; font-family:var(--font-mono); font-weight:700; }

.modal-overlay{ position:fixed; inset:0; background:rgba(21,21,21,0.55); display:none; align-items:center; justify-content:center; z-index:150; padding:20px; }
.modal-overlay.show{ display:flex; }
.modal-box{ background:#fff; border-radius:22px; max-width:420px; width:100%; padding:28px; position:relative; max-height:88vh; overflow-y:auto; }
.modal-close{ position:absolute; top:14px; right:14px; background:var(--paper-tint-yellow); border:none; font-size:18px; cursor:pointer; color:var(--ink); width:32px; height:32px; border-radius:50%; }

.ficha{ background:var(--paper-tint-yellow); border:2px solid var(--line); border-radius:18px; padding:22px; }
.ficha h3{ margin:0 0 4px; font-size:20px; font-weight:900; }
.ficha .row{ display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-top:1.5px dashed rgba(26,26,26,0.15); font-weight:600; }
.ficha .row b{ font-weight:800; }
.spinner{ display:inline-block; width:13px; height:13px; border:2px solid rgba(0,0,0,0.15); border-top-color:var(--black); border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; margin-right:6px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ======================================================================
   PIE DE PÁGINA
   Cuatro columnas sobre fondo negro de marca: la marca con el lema a la
   izquierda, y tres columnas de enlaces. Abajo, separada por una línea,
   la fila del copyright con los enlaces legales a la derecha.
   ====================================================================== */
footer{
  padding:56px 0 26px;
  background:var(--black);
  color:#fff;
}

.foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:40px;
  align-items:start;
}

.foot-marca{ max-width:340px; }
.foot-logo{ height:34px; width:auto; display:block; margin-bottom:18px; }
.foot-lema{
  font-size:13.5px; line-height:1.65; margin:0;
  color:rgba(255,255,255,0.62);
}

.foot-col{ display:flex; flex-direction:column; align-items:flex-start; gap:11px; }
.foot-t{
  margin:0 0 5px;
  font-family:var(--font-display); font-weight:900;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(255,255,255,0.42);
}
.foot-t--2{ margin-top:22px; }

.foot-col a{
  color:rgba(255,255,255,0.86); text-decoration:none;
  font-size:13.5px; font-weight:600; line-height:1.35;
}
.foot-col a:hover{ color:#fff; }

.foot-dato{
  display:flex; align-items:center; gap:9px;
  color:rgba(255,255,255,0.86);
  font-size:13.5px; font-weight:600; text-decoration:none;
}
.foot-dato svg{ width:15px; height:15px; flex:none; opacity:0.75; }

/* Categorías del footer que todavía no tienen negocios cargados: se muestran
   apagadas y con la etiqueta "Próximamente", en vez de ser un enlace que
   lleva a un listado vacío. */
.foot-pronto{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  color:rgba(255,255,255,0.48);
  font-size:13.5px; font-weight:600; line-height:1.35;
}
.foot-pronto em{
  font-style:normal;
  font-size:9.5px; font-weight:900; letter-spacing:0.07em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px;
  color:#1A1A1A; background:var(--yellow);
}

.foot-redes{ display:flex; gap:10px; margin-top:9px; }
.foot-red{
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,0.09);
  color:#fff;
  transition:background .15s ease;
}
.foot-red svg{ width:17px; height:17px; }
.foot-red:hover{ background:var(--teal); }

.foot-bajo{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  margin-top:46px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,0.12);
}
.foot-copy{ font-size:12.5px; color:rgba(255,255,255,0.5); }
.foot-legal{ display:flex; gap:24px; }
.foot-legal a{
  font-size:12.5px; color:rgba(255,255,255,0.62); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.28); padding-bottom:2px;
}
.foot-legal a:hover{ color:#fff; border-bottom-color:#fff; }

@media (max-width:980px){
  .foot-grid{ grid-template-columns:1fr 1fr; gap:34px 28px; }
  .foot-marca{ grid-column:1 / -1; max-width:460px; }
}
@media (max-width:560px){
  footer{ padding:42px 0 22px; }
  .foot-grid{ grid-template-columns:1fr; gap:30px; }
  .foot-bajo{ flex-direction:column; align-items:flex-start; gap:16px; margin-top:34px; }
  .foot-legal{ flex-wrap:wrap; gap:14px 20px; }
}

@media (max-width: 880px){
  .hero-grid{ grid-template-columns:1fr; }
  .card-stage{ order:-1; margin-bottom:10px; }
  .hero h1{ font-size:36px; }
  .steps, .split, .stat-grid{ grid-template-columns:1fr; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .navlinks{ display:none; }
  .field-row, .field-row.three{ grid-template-columns:1fr; }
  .table-row{ grid-template-columns:1fr 1fr; }
  .navbar{ padding:10px 14px; }
  .logo img{ height:28px !important; }
  .navbar > a.btn{ font-size:11.5px; padding:8px 12px; white-space:nowrap; }
  .announce-bar{ font-size:11.5px; padding:7px 12px; }
}

.ficha-icon{ width:56px; height:56px; border-radius:14px; background:var(--paper-tint-teal); display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:14px; }

.btn:active{ transform:scale(0.97); }
.biz-card:active, .cat-tile:active{ transform:scale(0.98); }

/* En pantallas táctiles (Android/iOS), los estados :hover pueden quedar "pegados"
   después de tocar, dando sensación de que el diseño se mueve o queda desalineado.
   Los limitamos a dispositivos que de verdad tienen mouse/hover real. */
@media (hover: hover) and (pointer: fine){
  .navlinks a:hover{ opacity:1; }
  .btn:hover{ transform:translateY(-1px); }
  .btn-primary:hover{ box-shadow:0 5px 0 var(--yellow-dark); }
  .credencial:hover{ transform:rotate(0deg) translateY(-4px); }
  .cat-tile:hover{ transform:translateY(-3px); border-color:var(--teal); box-shadow:0 10px 24px -14px rgba(71,201,201,0.5); }
  .biz-card:hover{ box-shadow:0 16px 32px -18px rgba(21,21,21,0.25); transform:translateY(-3px); }
  .modal-close:hover{ background:var(--yellow); }
}

/* Mapa (Leaflet) */
.map-modal-box{ background:#fff; border-radius:18px; width:min(1000px,94vw); height:min(720px,88vh); display:flex; flex-direction:column; overflow:hidden; }
.map-modal-header{ display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:2px solid var(--line); flex-shrink:0; }
.cat-tile .map-link{ display:block; margin-top:8px; font-size:11px; color:var(--teal-dark); font-weight:700; text-decoration:underline; }
.leaflet-popup-content{ font-family:var(--font-body); font-size:13px; }
.leaflet-popup-content b{ font-family:var(--font-display); font-size:14px; }

/* Tarjetas de precio (estilo referencia) */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pricing-card{ background:#fff; border:2px solid var(--line); border-radius:22px; padding:28px 26px; display:flex; flex-direction:column; }
.pricing-card.featured{ background:var(--ink); border-color:var(--ink); color:#fff; transform:scale(1.03); box-shadow:0 20px 40px -18px rgba(21,21,21,0.4); }
.pricing-icon{ width:44px; height:44px; border-radius:12px; background:var(--paper-tint-yellow); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:16px; }
.pricing-card.featured .pricing-icon{ background:rgba(255,255,255,0.15); }
.pricing-name{ font-family:var(--font-display); font-weight:900; font-size:17px; margin-bottom:4px; }
.pricing-price{ font-family:var(--font-display); font-weight:900; font-size:32px; margin:6px 0 2px; }
.pricing-price span{ font-size:14px; font-weight:600; opacity:0.6; }
.pricing-desc{ font-size:13px; opacity:0.65; margin-bottom:18px; }
.pricing-divider{ border:none; border-top:1.5px solid var(--line); margin:0 0 18px; }
.pricing-card.featured .pricing-divider{ border-top-color:rgba(255,255,255,0.2); }
.pricing-features{ list-style:none; margin:0 0 22px; padding:0; flex:1; }
.pricing-features li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; margin-bottom:11px; line-height:1.4; }
.pricing-check{ flex-shrink:0; width:18px; height:18px; border-radius:5px; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; margin-top:1px; }
.pricing-card.featured .pricing-check{ background:var(--yellow); color:var(--ink); }
.pricing-cta{ width:100%; text-align:center; justify-content:center; }
.pricing-note{ text-align:center; font-size:11px; opacity:0.55; margin-top:10px; }

/* Íconos de contacto circulares en la tarjeta del directorio (estilo referencia) */
.biz-icons-row{ display:flex; gap:8px; margin-top:12px; }
.biz-icon-btn{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; text-decoration:none; border:1.5px solid var(--line); background:#fff; color:var(--ink); }
.biz-icon-btn.primary{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ======================= Nueva identidad de navegación y hero ======================= */

.announce-bar{ background:var(--yellow); color:var(--black); text-align:center; font-size:13.5px; padding:9px 16px; font-weight:600; }
.announce-bar b{ font-weight:900; }

/* Menús desplegables */
.nav-dropdown{ position:relative; display:flex; align-items:center; height:100%; }
.nav-dropdown-btn{ background:none; border:none; font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--ink); cursor:pointer; display:flex; align-items:center; gap:4px; padding:0; opacity:0.75; height:100%; line-height:1; }
.nav-dropdown-btn:hover{ opacity:1; }
.caret{ font-size:10px; transition:transform .15s ease; }
.nav-dropdown.open .caret{ transform:rotate(180deg); }
.nav-dropdown-panel{ display:none; position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%); background:#fff; border:2px solid var(--line); border-radius:18px; box-shadow:0 20px 40px -16px rgba(21,21,21,0.25); padding:20px; z-index:60; }
.nav-dropdown.open .nav-dropdown-panel{ display:flex; gap:28px; }
.nav-dropdown-panel.wide{ width:440px; }
.dd-col{ flex:1; min-width:0; }
.dd-col-title{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color:var(--gray); margin-bottom:10px; }
.dd-item{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px; font-size:13.5px; font-weight:600; cursor:pointer; text-align:left; width:100%; background:none; border:none; color:var(--ink); }
.dd-item:hover{ background:var(--paper-tint-yellow); }
.dd-benefit{ padding:9px 8px; border-radius:8px; margin-bottom:2px; }
.dd-benefit .pct{ font-size:12px; font-weight:900; color:var(--teal-dark); display:block; }
.dd-benefit .nm{ font-size:12.5px; color:#3a3a3a; font-weight:600; }

/* Buscador del hero */
.hero{ padding:56px 0 40px; overflow:hidden; }
.hero-search-wrap{ display:flex; gap:10px; max-width:560px; margin:0 auto; background:#fff; border:2px solid var(--ink); border-radius:999px; padding:6px; }
.hero-search{ flex:1; border:none; background:none; padding:12px 18px; font-size:15px; font-family:var(--font-body); font-weight:600; cursor:text; }
.hero-search:focus{ outline:none; }
.hero-search-btn{ flex-shrink:0; }

/* Carrusel circular/fanned de categorías */
.fan-carousel{ overflow-x:hidden; overflow-y:visible; margin-top:44px; padding:34px 0 50px; }
.fan-track{ display:flex; gap:22px; width:max-content; animation:fanScroll 34s linear infinite; }
.fan-carousel:hover .fan-track{ animation-play-state:paused; }
@keyframes fanScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.fan-card{ width:150px; height:190px; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; flex-shrink:0; box-shadow:0 16px 30px -14px rgba(21,21,21,0.25); cursor:pointer; transition:transform .15s ease; }
.fan-card:hover{ transform:scale(1.04) !important; }
.fan-card .fan-emoji{ font-size:46px; }
.fan-card .fan-label{ font-family:var(--font-display); font-weight:900; font-size:14px; color:var(--ink); text-align:center; padding:0 10px; }
.fan-card:nth-child(odd){ margin-top:0; transform:rotate(-3deg); }
.fan-card:nth-child(even){ margin-top:26px; transform:rotate(3deg); }

/* Marquesina de negocios */
.trust-marquee{ overflow:hidden; margin-top:14px; }
.trust-track{ display:flex; gap:16px; width:max-content; animation:fanScroll 26s linear infinite; }
.trust-marquee:hover .trust-track{ animation-play-state:paused; }
.trust-card{ flex-shrink:0; padding:16px 26px; background:#fff; border:2px dashed var(--line); border-radius:14px; font-family:var(--font-display); font-weight:900; font-size:14px; color:var(--gray); display:flex; align-items:center; gap:8px; white-space:nowrap; cursor:pointer; transition:transform .15s ease; }
.trust-card:hover{ transform:translateY(-2px); }
.trust-card.real{ border-style:solid; border-color:var(--teal); color:var(--ink); }

/* ---- Tarjetas de logo (espacios pagados) ----
   Todos los archivos llegan compuestos en un lienzo de 300x120 px, así que
   todas las tarjetas miden exactamente lo mismo y el logo se dibuja siempre
   dentro del mismo rectángulo. Da igual que uno sea horizontal y otro
   cuadrado: el lienzo es el que empareja. */
.trust-card.partner{
  padding:14px 20px;
  width:190px; height:88px;
  border-style:solid; border-color:var(--line);
  justify-content:center;
}
.partner-logo{
  width:150px; height:60px;
  object-fit:contain; object-position:center;
  display:block;
}
@media (hover:hover) and (pointer:fine){
  .trust-card.partner:hover{ border-color:var(--teal); }
}
@media (max-width:880px){
  .trust-card.partner{ padding:12px 16px; width:154px; height:74px; }
  .partner-logo{ width:122px; height:49px; }
}

@media (max-width: 880px){
  .navlinks{ display:none; }
  .nav-dropdown-panel.wide{ width:88vw; }
  .hero h1{ font-size:30px; }
  .hero-search-wrap{ flex-direction:column; border-radius:22px; }
  .pricing-grid{ grid-template-columns:1fr; }
  .pricing-card.featured{ transform:none; }
}

/* ======================= Wizard de registro (3 pasos) ======================= */
.wizard-steps{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:26px; }
.wizard-step{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto; }
.wizard-dot{ width:30px; height:30px; border-radius:50%; border:2px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:900; font-size:13px; color:var(--gray); transition:all .2s ease; flex-shrink:0; }
.wizard-label{ font-size:11px; font-weight:800; color:var(--gray); text-align:center; max-width:88px; line-height:1.3; }
.wizard-line{ flex:1; height:2px; background:var(--line); margin-top:14px; }
.wizard-step.active .wizard-dot{ border-color:var(--teal-dark); color:var(--teal-dark); background:var(--paper-tint-teal); }
.wizard-step.active .wizard-label{ color:var(--ink); }
.wizard-step.done .wizard-dot{ border-color:var(--sage); background:var(--sage); color:#fff; }
#wizardSteps-biz .wizard-step.active .wizard-dot{ border-color:var(--yellow-dark); color:var(--yellow-dark); background:var(--paper-tint-yellow); }
.form-step{ display:none; }
.form-step.active{ display:block; animation:stepFade .2s ease; }
@keyframes stepFade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }
.wizard-nav{ display:flex; gap:10px; margin-top:6px; }
.wizard-nav .btn{ flex:1; }
.wizard-nav .btn-back{ flex:0 0 auto; padding:12px 18px; }

/* ======================= Campos validados en vivo (RUT, teléfono CL, correo) ======================= */
.input-icon-wrap{ position:relative; display:flex; align-items:center; }
.input-icon-wrap input{ padding-right:38px !important; }
.field-check{ position:absolute; right:11px; top:50%; transform:translateY(-50%) scale(0.6); width:20px; height:20px; border-radius:50%; background:var(--sage); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; opacity:0; transition:opacity .18s ease, transform .18s ease; pointer-events:none; }
.field-validated.is-valid .field-check{ opacity:1; transform:translateY(-50%) scale(1); }
.field-validated.is-valid .input-icon-wrap:not(.tel-wrap) input{ border-color:var(--sage) !important; }
.field-validated.is-invalid .input-icon-wrap:not(.tel-wrap) input{ border-color:var(--rust) !important; }
.field-msg{ display:block; font-size:11.5px; margin-top:5px; min-height:14px; font-weight:600; }
.field-validated.is-invalid .field-msg{ color:var(--rust); }
.field-validated.is-valid .field-msg{ color:var(--sage); }
.tel-wrap{ border:2px solid var(--line); border-radius:11px; background:var(--paper-tint-yellow); padding-right:38px; transition:border-color .18s ease; }
.tel-wrap .tel-prefix{ padding:0 2px 0 13px; font-weight:800; color:#7a8377; white-space:nowrap; font-size:15px; }
.tel-wrap input{ border:none !important; background:transparent !important; padding:12px 6px !important; border-radius:0 !important; }
.field-validated.is-valid .tel-wrap{ border-color:var(--sage) !important; }
.field-validated.is-invalid .tel-wrap{ border-color:var(--rust) !important; }

@media (max-width: 880px){
  .wizard-dot{ width:26px; height:26px; font-size:12px; }
  .wizard-label{ font-size:9.5px; max-width:62px; }
}

/* ======================= Secciones del home ocultas por ahora =======================
   "Explora por categoría" (grilla de 18 categorías) y la fila "★ Destacados" del
   directorio (arriba del listado, en /directorio, /especialistas y /beneficios): el
   negocio pidió sacarlas de la vista por ahora. El código queda intacto (igual que se
   hizo con los links de Especialistas y Mi Mascota del menú) por si se retoman más
   adelante — solo se ocultan con CSS.
   6 de septiembre 2026: se suma "Cómo funciona" (los 3 pasos 01/02/03). */
#categorias{ display:none !important; }
#featuredStripWrap{ display:none !important; }
#como-funciona{ display:none !important; }
.trust-zona{ display:none !important; }   /* cinta de logos de la portada */

/* ======================= Directorio como página propia (/directorio/...) =======================
   El directorio deja de ser "una sección más" del home: por defecto queda OCULTO de la
   página principal, y solo se muestra —a pantalla completa, como si fuera otra página—
   cuando el body tiene la clase .pagina-directorio (la pone js/app.js según la URL). */
#directorio{ display:none; }

body.pagina-directorio .hero,
body.pagina-directorio #categorias,
body.pagina-directorio #como-funciona,
body.pagina-directorio #negocios,
body.pagina-directorio #validar,
body.pagina-directorio #planes,
body.pagina-directorio #panel{
  display:none !important;
}
body.pagina-directorio #directorio{
  display:block;
  min-height:calc(100vh - 140px);
}
body.pagina-directorio .announce-bar{ display:none; }

/* ======================= Ficha de negocio/especialista como página propia (/negocio/...) =======================
   Misma idea que el directorio: por defecto oculta, y se muestra a pantalla completa
   —con el resto del home oculto— cuando el body tiene la clase .pagina-ficha. */
#fichaNegocio{ display:none; }
body.pagina-ficha .hero,
body.pagina-ficha #categorias,
body.pagina-ficha #como-funciona,
body.pagina-ficha #negocios,
body.pagina-ficha #validar,
body.pagina-ficha #planes,
body.pagina-ficha #panel,
body.pagina-ficha #directorio{
  display:none !important;
}
body.pagina-ficha #fichaNegocio{
  display:block;
  min-height:calc(100vh - 140px);
}
body.pagina-ficha .announce-bar{ display:none; }

/* ======================= Planes como página propia (/planes) =======================
   Igual que el directorio y la ficha: #planes deja de ser una sección del home (antes
   se llegaba con scroll) y por defecto queda oculta; solo se muestra a pantalla completa
   cuando el body tiene la clase .pagina-planes. */
#planes{ display:none; }
body.pagina-planes .hero,
body.pagina-planes #categorias,
body.pagina-planes #como-funciona,
body.pagina-planes #negocios,
body.pagina-planes #validar,
body.pagina-planes #panel,
body.pagina-planes #directorio,
body.pagina-planes #fichaNegocio{
  display:none !important;
}
body.pagina-planes #planes{
  display:block;
  min-height:calc(100vh - 140px);
}
body.pagina-planes .announce-bar{ display:none; }

/* ======================= Banner de página (5 slides, degradados) =======================
   Se usa arriba del directorio, de especialistas y de la ficha de cada negocio.
   Rota sola cada 5s (renderPageBanner en js/app.js); si solo hay 1 slide (ficha de un
   negocio puntual) no rota y no muestra los puntos. Medidas recomendadas para las fotos
   reales que reemplacen el degradado: ver README / mensaje de chat. */
.page-banner{ position:relative; height:260px; overflow:hidden; }
.page-banner-slide{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-start;
  background-size:cover; background-position:center; opacity:0; transition:opacity 900ms ease;
}
.page-banner-slide.active{ opacity:1; }
.page-banner-overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(21,21,21,0.55) 0%, rgba(21,21,21,0.05) 60%); }
.page-banner-text{ position:relative; z-index:2; padding:0 28px 30px; max-width:1180px; margin:0 auto; width:100%; }
.page-banner-eyebrow{ display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,0.16); border:1.5px solid rgba(255,255,255,0.55); padding:4px 10px; border-radius:999px; margin-bottom:10px; }
.page-banner-cat{ font-family:var(--font-display); font-weight:900; font-size:30px; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,0.35); line-height:1.1; margin:0; }
.page-banner-dots{ position:absolute; z-index:3; right:20px; bottom:16px; display:flex; gap:7px; }
.page-banner-dot{ width:7px; height:7px; border-radius:999px; background:rgba(255,255,255,0.45); cursor:pointer; transition:background .2s, transform .2s; }
.page-banner-dot.active{ background:#fff; transform:scale(1.3); }
@media (min-width:768px){
  .page-banner{ height:340px; }
  .page-banner-cat{ font-size:40px; }
}

/* ======================= Fila de negocios destacados (antes del directorio) ======================= */
.featured-strip-wrap{ margin:34px 0 6px; }
.featured-strip{ display:flex; gap:16px; overflow-x:auto; padding:4px 2px 14px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.featured-strip::-webkit-scrollbar{ height:6px; }
.featured-strip::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
.featured-strip .biz-card{ min-width:230px; max-width:230px; scroll-snap-align:start; flex:0 0 auto; }
.founder-badge.badge-destacado{ background:var(--yellow); color:var(--black); }

/* ======================= Ficha de negocio a página completa ======================= */
.ficha-page-wrap{ padding:36px 0 64px; }
.ficha-page{ display:grid; grid-template-columns:1.3fr 0.9fr; gap:34px; align-items:start; }
.ficha-page > *{ min-width:0; }
.ficha-page-main{ background:#fff; border:2px solid var(--line); border-radius:22px; padding:30px; }
.ficha-page-main h1{ font-size:26px; margin:0 0 6px; }
.ficha-page-side{ background:#fff; border:2px solid var(--line); border-radius:22px; padding:24px; }
.ficha-page-side .row{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:10px 0; border-top:1.5px dashed rgba(26,26,26,0.15); font-weight:600; }
.ficha-page-side .row:first-child{ border-top:none; }
.ficha-page-side .row b{ font-weight:800; text-align:right; }

/* ---------------- Validación bidireccional (calificaciones) ---------------- */
.rep-summary{ display:flex; align-items:center; gap:12px; margin:10px 0 16px; flex-wrap:wrap; }
.rep-stars{ font-family:var(--font-display); font-weight:900; font-size:20px; color:var(--yellow-dark); letter-spacing:1px; }
.rep-avg{ font-family:var(--font-display); font-weight:900; font-size:15px; color:var(--ink); }
.rep-count{ font-size:12.5px; color:#8a8a8a; font-weight:600; }
.rep-premium-pill{ display:inline-flex; align-items:center; gap:5px; background:var(--paper-tint-teal); color:var(--teal-dark); font-size:11.5px; font-weight:800; padding:5px 10px; border-radius:20px; }
.rep-empty{ font-size:13px; color:#8a8a8a; font-weight:600; }
.rep-locked{ background:var(--paper-tint-yellow); border:1.5px dashed var(--yellow-dark); border-radius:14px; padding:14px 16px; font-size:12.5px; font-weight:600; color:#6b5a10; margin-top:6px; }
.rep-comment{ border-top:1.5px dashed rgba(26,26,26,0.12); padding:12px 0; }
.rep-comment:first-child{ border-top:none; }
.rep-comment .rc-head{ display:flex; justify-content:space-between; font-size:12px; color:#8a8a8a; font-weight:700; margin-bottom:4px; }
.rep-comment .rc-stars{ color:var(--yellow-dark); font-weight:900; }
.rep-comment p{ font-size:13.5px; margin:0; line-height:1.5; }

.star-picker{ display:flex; gap:6px; margin:6px 0 4px; }
.star-picker button{ background:none; border:none; font-size:30px; line-height:1; cursor:pointer; opacity:0.3; padding:0; transition:opacity .15s, transform .15s; }
.star-picker button.on{ opacity:1; transform:scale(1.08); }

.cal-pending-row{ border:2px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:10px; }
.cal-pending-row .cp-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13.5px; font-weight:800; }
.cal-pending-row .cp-meta{ font-size:11.5px; color:#8a8a8a; font-weight:600; margin-top:2px; }
.ficha-page-logo{ width:64px; height:64px; border-radius:16px; object-fit:cover; margin-bottom:14px; }
.ficha-page-icon{ width:64px; height:64px; border-radius:16px; background:var(--paper-tint-teal); display:flex; align-items:center; justify-content:center; font-size:30px; margin-bottom:14px; }
@media (max-width:880px){
  .ficha-page{ grid-template-columns:1fr; }
}

/* ======================================================================
   DIRECTORIO — barra superior + columna de filtros (septiembre 2026)
   ----------------------------------------------------------------------
   Antes los filtros eran dos <select> perdidos arriba de la grilla, así que
   para encontrar algo había que abrir un desplegable y adivinar qué había
   dentro. Ahora hay una columna a la izquierda con las categorías y comunas
   visibles y con su número de resultados al lado, como en cualquier tienda
   online. En el celular esa misma columna se convierte en un panel que se
   abre con el botón "Filtrar".
   ====================================================================== */

.dir-legacy-selects{ display:none; }   /* los <select> siguen ahí, solo que ocultos */

.dir-topbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px;
}
.dir-topbar input{
  flex:1; min-width:220px; padding:13px 16px; border-radius:14px;
  border:2px solid var(--line); background:#fff;
  font-size:16px; font-family:var(--font-body); font-weight:600;
}
.dir-topbar input:focus{ outline:none; border-color:var(--teal); }

.dir-orden{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.dir-orden > span{ font-size:12.5px; font-weight:700; color:var(--gray); white-space:nowrap; }
.dir-orden select{
  padding:11px 12px; border-radius:12px; border:2px solid var(--line); background:#fff;
  font-size:14px; font-family:var(--font-body); font-weight:700; cursor:pointer;
}

.dir-filtros-btn{
  display:none; align-items:center; gap:8px;
  padding:13px 16px; border-radius:14px; border:2px solid var(--black);
  background:#fff; color:var(--black); cursor:pointer;
  font-family:var(--font-body); font-weight:800; font-size:14.5px;
}
.dir-filtros-btn__n{
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:99px; background:var(--yellow); color:var(--black); font-size:11.5px; font-weight:900;
}

/* ---------------- Layout de dos columnas ---------------- */
.dir-layout{ display:grid; grid-template-columns:248px 1fr; gap:28px; align-items:start; }
.dir-main{ min-width:0; }
.dir-count{ font-size:13px; font-weight:700; color:var(--gray); margin-bottom:14px; }

.dir-side{
  position:sticky; top:88px;
  background:#fff; border:2px solid var(--line); border-radius:20px;
  padding:6px 16px 16px; max-height:calc(100vh - 110px); overflow-y:auto;
}
.dir-side__bar{ display:none; }
.dir-side__pie{ display:none; }

.dir-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:12px 0 4px; }
.dir-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:99px; border:1.5px solid var(--black);
  background:var(--black); color:#fff; cursor:pointer;
  font-family:var(--font-body); font-size:12px; font-weight:700; line-height:1.2;
}
.dir-chip span{ opacity:.7; font-size:11px; }
.dir-chip--limpiar{ background:#fff; color:var(--gray); border-color:var(--line); font-weight:600; }

.dir-facet{ padding:14px 0; border-bottom:1px solid var(--line); }
.dir-facet:last-of-type{ border-bottom:0; }
.dir-facet__t{
  margin:0 0 8px; font-family:var(--font-display); font-weight:900;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray);
}
.dir-facet__list{ display:flex; flex-direction:column; gap:1px; }
.dir-facet__vacia{ font-size:12.5px; color:var(--gray); margin:0; }

.dir-opt{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  padding:7px 9px; border:0; border-radius:9px; background:transparent; cursor:pointer;
  text-align:left; font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--ink);
  line-height:1.25;
}
.dir-opt__lbl{ overflow:hidden; text-overflow:ellipsis; }
.dir-opt__n{ font-size:11.5px; font-weight:700; color:var(--gray); flex:none; }
.dir-opt.is-on{ background:var(--black); color:#fff; font-weight:800; }
.dir-opt.is-on .dir-opt__n{ color:rgba(255,255,255,.7); }
.dir-opt.is-vacia{ color:#B4B4B4; }
.dir-vermas{
  margin-top:6px; padding:4px 9px; border:0; background:transparent; cursor:pointer;
  font-family:var(--font-body); font-size:12.5px; font-weight:800; color:var(--teal-dark);
  text-decoration:underline; text-underline-offset:3px;
}
@media (hover:hover) and (pointer:fine){
  .dir-opt:hover{ background:rgba(21,21,21,0.06); }
  .dir-opt.is-on:hover{ background:var(--black); }
}

.dir-side-backdrop{ display:none; }

/* ---------------- Celular: la columna se vuelve un panel ---------------- */
@media (max-width:880px){
  .dir-layout{ grid-template-columns:1fr; gap:0; }
  .dir-orden{ margin-left:0; }
  .dir-orden > span{ display:none; }
  .dir-orden select{ flex:1; }
  .dir-filtros-btn{ display:inline-flex; }

  .dir-side{
    position:fixed; inset:0 0 0 auto; z-index:120;
    width:min(88vw, 360px); max-height:none; height:100%;
    border:0; border-radius:0; padding:0 18px 96px;
    transform:translateX(102%); transition:transform .22s ease;
    overflow-y:auto;
  }
  body.filtros-abiertos .dir-side{ transform:translateX(0); }
  body.filtros-abiertos{ overflow:hidden; }

  .dir-side__bar{
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:2; background:#fff;
    padding:16px 0 12px; border-bottom:1px solid var(--line); margin-bottom:4px;
    font-family:var(--font-display); font-size:17px; font-weight:900;
  }
  .dir-side__x{
    border:0; background:transparent; font-size:20px; line-height:1;
    cursor:pointer; padding:4px 6px; color:var(--ink);
  }
  .dir-side__pie{
    display:block; position:fixed; bottom:0; right:0; z-index:3;
    width:min(88vw, 360px); padding:14px 18px calc(14px + env(safe-area-inset-bottom));
    background:#fff; border-top:1px solid var(--line);
  }
  .dir-side__aplicar{
    width:100%; padding:15px; border:0; border-radius:14px;
    background:var(--black); color:#fff; cursor:pointer;
    font-family:var(--font-display); font-size:15px; font-weight:900;
  }
  .dir-side-backdrop{
    display:block; position:fixed; inset:0; z-index:119;
    background:rgba(21,21,21,.45); opacity:0; pointer-events:none; transition:opacity .22s ease;
  }
  body.filtros-abiertos .dir-side-backdrop{ opacity:1; pointer-events:auto; }
  .dir-opt{ padding:11px 9px; font-size:15px; }   /* más alto para el dedo */
}

/* La tarjeta del directorio ahora termina en un botón: que la caja ocupe todo
   el alto de su fila para que los botones queden alineados entre tarjetas. */
.dir-grid .biz-card{ display:flex; }
.dir-grid .biz-card > .mmcard{ flex:1; }
.dir-grid{ grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); }
/* El atributo hidden debe ganarle al display de estas dos reglas */
.dir-filtros-btn__n[hidden], .dir-chips[hidden], .dir-vermas[hidden]{ display:none; }

/* El banner de cada página va pegado al menú: la sección traía los 64px de
   padding de arriba y eso dejaba una franja de color vacía entre el menú y
   el banner que no aportaba nada. */
body.pagina-directorio #directorio,
body.pagina-ficha #fichaNegocio,
body.pagina-planes #planes{ padding-top:0; }

/* ======================================================================
   PANEL DEL NEGOCIO (/mi-negocio)
   ====================================================================== */
#panelNegocio{ display:none; }
body.pagina-negocio .hero,
body.pagina-negocio #categorias,
body.pagina-negocio #como-funciona,
body.pagina-negocio #directorio,
body.pagina-negocio #fichaNegocio,
body.pagina-negocio #negocios,
body.pagina-negocio #validar,
body.pagina-negocio #planes,
body.pagina-negocio #panel{ display:none !important; }
body.pagina-negocio #panelNegocio{ display:block; min-height:calc(100vh - 140px); }
body.pagina-negocio .announce-bar{ display:none; }

.neg-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.neg-sub{ font-size:13px; color:var(--gray); margin-top:4px; font-weight:600; }

.neg-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:34px; }
.neg-kpi{ background:#fff; border:2px solid var(--line); border-radius:18px; padding:16px 18px; }
.neg-kpi__n{ font-family:var(--font-display); font-weight:900; font-size:30px; line-height:1.05; }
.neg-kpi__l{ font-size:11.5px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:var(--gray); margin-top:6px; }
.neg-kpi__h{ font-size:11.5px; color:var(--gray); margin-top:4px; font-weight:600; }

.neg-t{ font-family:var(--font-display); font-size:15px; font-weight:900; margin:0 0 12px; }
.neg-tabla{ background:#fff; border:2px solid var(--line); border-radius:18px; overflow-x:auto; }
.neg-tabla table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:480px; }
.neg-tabla th{
  text-align:left; padding:12px 16px; font-size:11px; font-weight:800;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--gray);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.neg-tabla td{ padding:13px 16px; border-bottom:1px solid var(--line); }
.neg-tabla tr:last-child td{ border-bottom:0; }
.neg-tabla td.num{ text-align:right; font-family:var(--font-mono); white-space:nowrap; }
.neg-tabla th.num{ text-align:right; }
.neg-tabla .dim{ color:#9aa0a6; }
.neg-vacio{ background:#fff; border:2px dashed var(--line); border-radius:18px; padding:38px 24px; text-align:center; color:var(--gray); font-size:14px; line-height:1.6; }

@media (max-width:880px){
  .neg-kpis{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .neg-kpi{ padding:13px 14px; }
  .neg-kpi__n{ font-size:24px; }
}

/* ======================================================================
   MI MASCOTA ID — PANEL DEL DUEÑO (/mi-mascota)
   Mismo patrón que el panel del negocio: la sección vive oculta en el
   HTML y solo aparece cuando el body lleva la clase .pagina-socio.
   ====================================================================== */
#panelSocio{ display:none; }
body.pagina-socio .hero,
body.pagina-socio #categorias,
body.pagina-socio #como-funciona,
body.pagina-socio #directorio,
body.pagina-socio #fichaNegocio,
body.pagina-socio #negocios,
body.pagina-socio #validar,
body.pagina-socio #planes,
body.pagina-socio #panelNegocio,
body.pagina-socio #panel{ display:none !important; }
body.pagina-socio #panelSocio{ display:block; min-height:calc(100vh - 140px); }
body.pagina-socio .announce-bar{ display:none; }

/* ---- Acceso ---- */
.soc-enviado{ font-size:13px; color:var(--gray); line-height:1.5; margin:0 0 16px; }
.soc-otp{ font-family:var(--font-mono); font-size:22px; letter-spacing:0.35em; text-align:center; }
.soc-reenvio{ display:flex; justify-content:space-between; gap:12px; margin-top:14px; }
.soc-link{ background:none; border:0; padding:0; font:inherit; font-size:12.5px; font-weight:700; color:var(--teal-dark); cursor:pointer; text-decoration:underline; }
.soc-link:disabled{ color:var(--gray); cursor:default; text-decoration:none; }
.soc-error{ color:var(--rust); font-size:12.5px; margin-top:12px; line-height:1.5; }
.soc-msg{ font-size:12.5px; margin-top:10px; font-weight:700; }
.soc-msg.ok{ color:var(--sage); }
.soc-msg.mal{ color:var(--rust); }
.soc-nota{ font-size:11.5px; color:var(--gray); line-height:1.45; margin:8px 0 0; }
.soc-opt{ font-weight:600; color:var(--gray); font-size:11.5px; }

/* ---- Selector de mascotas (cuando un correo tiene varias) ---- */
.soc-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.soc-tab{
  display:flex; align-items:center; gap:9px; background:#fff; border:2px solid var(--line);
  border-radius:999px; padding:7px 16px 7px 8px; font-weight:800; font-size:13.5px;
  cursor:pointer; transition:border-color .15s, background .15s;
}
.soc-tab:hover{ border-color:var(--teal); }
.soc-tab.on{ border-color:var(--ink); background:var(--paper-tint-yellow); }
.soc-tab__av{
  width:28px; height:28px; border-radius:50%; background:var(--teal); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:14px; overflow:hidden;
}
.soc-tab__av img{ width:100%; height:100%; object-fit:cover; }

/* ---- Barra de completitud ---- */
.soc-comp{ background:#fff; border:2px solid var(--line); border-radius:18px; padding:16px 20px; margin-bottom:26px; }
.soc-comp__top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px; }
.soc-comp__t{ font-weight:800; font-size:14px; }
.soc-comp__pct{ font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--gray); }
.soc-comp__bar{ height:9px; border-radius:999px; background:rgba(26,26,26,0.08); overflow:hidden; }
.soc-comp__fill{ height:100%; border-radius:999px; background:var(--teal); transition:width .5s ease; }
.soc-comp__fill.lleno{ background:var(--sage); }
.soc-comp__falta{ font-size:12.5px; color:var(--gray); margin-top:9px; line-height:1.5; }

/* ---- Grilla carnet + datos ---- */
.soc-grid{ display:grid; grid-template-columns:340px 1fr; gap:30px; align-items:start; }
.soc-col-carnet{ position:sticky; top:90px; }
.soc-col-carnet .credencial{ transform:none; max-width:none; }

.soc-foto-row{ display:flex; gap:18px; align-items:flex-start; }
.soc-foto-prev{
  width:96px; height:96px; flex:0 0 auto; border-radius:20px; overflow:hidden;
  background:var(--paper-tint-teal); border:2px dashed var(--line);
  display:flex; align-items:center; justify-content:center; font-size:34px;
}
.soc-foto-prev img{ width:100%; height:100%; object-fit:cover; }
.soc-foto-acciones{ flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; gap:8px; }
.soc-foto-acciones .soc-nota{ flex:1 0 100%; }

/* ---- Historial ---- */
.soc-hist-neg{ font-weight:800; }

@media (max-width:900px){
  .soc-grid{ grid-template-columns:1fr; gap:24px; }
  .soc-col-carnet{ position:static; max-width:340px; margin:0 auto; }
}

/* ======================================================================
   VALIDAR UNA VISITA (/validar/MMC00001)
   Pensada para un cajero con el celular en la mano y un cliente
   esperando: pocas cosas, grandes, y el beneficio imposible de no ver.
   ====================================================================== */
.val-panel{ max-width:480px; margin:0 auto; }
.btn-grande{ padding:16px 24px; font-size:16px; }

.val-ficha{ background:#fff; border:2px solid var(--ink); border-radius:22px; padding:22px; }
.val-ficha__cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.val-ficha__pet{ font-family:var(--font-display); font-weight:900; font-size:30px; line-height:1.1; }
.val-ficha__sub{ font-size:13.5px; color:var(--gray); font-weight:600; margin-top:2px; text-transform:capitalize; }
.val-ficha__meta{ display:flex; flex-wrap:wrap; gap:8px 14px; font-size:12px; color:var(--gray); font-weight:600; margin-top:12px; }

.val-chip{ flex:0 0 auto; font-size:11.5px; font-weight:800; padding:6px 12px; border-radius:999px; background:rgba(26,26,26,0.06); }
.val-chip--ok{ background:rgba(63,174,122,0.15); color:#2b7f56; }

.val-ben{ margin-top:18px; background:var(--paper-tint-yellow); border:2px solid var(--yellow); border-radius:16px; padding:16px 18px; }
.val-ben__l{ font-size:11px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:#8a7320; }
.val-ben__t{ font-family:var(--font-display); font-weight:900; font-size:21px; line-height:1.25; margin-top:5px; }
.val-ben__t--vacio{ font-size:15px; color:var(--gray); }
.val-ben__min{ font-size:12.5px; color:var(--gray); font-weight:600; margin-top:6px; }

.val-visitas{ margin-top:14px; font-size:13px; color:var(--gray); font-weight:600; }
.val-nuevo{ color:var(--teal-dark); font-weight:800; }

.val-identifica{ background:var(--paper-tint-teal); border:2px dashed var(--teal); border-radius:14px; padding:15px 16px; margin:4px 0 18px; }
.val-identifica__t{ font-weight:800; font-size:13.5px; margin-bottom:10px; }

/* Comprobante */
.val-ok{ background:#fff; border:2px solid var(--sage); border-radius:22px; padding:30px 24px; text-align:center; }
.val-ok__check{
  width:64px; height:64px; margin:0 auto 14px; border-radius:50%;
  background:var(--sage); color:#fff; font-size:34px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
}
.val-ok__t{ font-family:var(--font-display); font-weight:900; font-size:22px; }
.val-ok__folio{
  font-family:var(--font-mono); font-weight:600; font-size:26px; letter-spacing:0.12em;
  background:var(--ink); color:var(--yellow); border-radius:12px;
  padding:10px 18px; display:inline-block; margin:14px 0 6px;
}
.val-ok__sub{ font-size:15px; margin-top:8px; }
.val-ok__ben{ font-weight:800; font-size:14px; margin-top:10px; }
.val-ok__monto{ font-size:13.5px; color:var(--gray); font-weight:600; margin-top:6px; }
.val-ok__nota{ font-size:12px; color:var(--gray); line-height:1.5; margin:18px 0 0; }

.neg-tabla td.folio{ font-family:var(--font-mono); font-size:12px; font-weight:600; white-space:nowrap; }

@media (max-width:520px){
  .val-ficha__pet{ font-size:26px; }
  .val-ben__t{ font-size:19px; }
  .val-ok__folio{ font-size:22px; }
}

/* La validación es su propia página: el cajero no puede aterrizar en la
   portada con el formulario escondido más abajo. */
body.pagina-validar .hero,
body.pagina-validar #categorias,
body.pagina-validar #como-funciona,
body.pagina-validar #directorio,
body.pagina-validar #fichaNegocio,
body.pagina-validar #negocios,
body.pagina-validar #planes,
body.pagina-validar #panelNegocio,
body.pagina-validar #panelSocio,
body.pagina-validar #panel{ display:none !important; }
body.pagina-validar #validar{ display:block !important; min-height:calc(100vh - 200px); }
body.pagina-validar .announce-bar{ display:none; }

/* ======================================================================
   PANEL PRIVADO DEL CLUB (/admin)
   No lleva link visible en el sitio: la dirección se guarda en favoritos
   y quien protege de verdad es el login de Supabase Auth.
   ====================================================================== */
body.pagina-admin .hero,
body.pagina-admin #categorias,
body.pagina-admin #como-funciona,
body.pagina-admin #directorio,
body.pagina-admin #fichaNegocio,
body.pagina-admin #negocios,
body.pagina-admin #validar,
body.pagina-admin #planes,
body.pagina-admin #panelNegocio,
body.pagina-admin #panelSocio{ display:none !important; }
body.pagina-admin #panel{ display:block !important; min-height:calc(100vh - 140px); }
body.pagina-admin .announce-bar{ display:none; }

/* La tabla de canjes tiene 7 columnas y no cabe en un teléfono:
   se deja desplazable en vez de apretarla hasta que no se lea. */
.admin-table--canjes{ overflow-x:auto; }
.admin-table--canjes .table-row{ min-width:860px; grid-template-columns:0.7fr 0.9fr 1.2fr 1.2fr 1.6fr 0.9fr 0.9fr; }
.admin-table--canjes .table-row .mono{ font-family:var(--font-mono); font-size:12px; }

/* ======================================================================
   PÁGINAS LEGALES (/terminos y /privacidad)
   ====================================================================== */
body.pagina-legal .hero,
body.pagina-legal #categorias,
body.pagina-legal #como-funciona,
body.pagina-legal #directorio,
body.pagina-legal #fichaNegocio,
body.pagina-legal #negocios,
body.pagina-legal #validar,
body.pagina-legal #planes,
body.pagina-legal #panelNegocio,
body.pagina-legal #panelSocio,
body.pagina-legal #panel{ display:none !important; }
body.pagina-legal #paginaLegal{ display:block; min-height:calc(100vh - 140px); }
body.pagina-legal .announce-bar{ display:none; }
#paginaLegal{ display:none; }

.wrap-legal{ max-width:760px; }
.legal h1{ font-size:34px; margin:10px 0 6px; }
.legal h2{ font-size:19px; margin:34px 0 10px; }
.legal p, .legal li{ font-size:15px; line-height:1.7; color:#31353a; }
.legal ul{ padding-left:20px; }
.legal li{ margin-bottom:7px; }
.legal a{ color:var(--teal-dark); font-weight:700; }
.legal-fecha{ font-size:12.5px !important; color:var(--gray) !important; font-weight:600; }
.legal-nav{ margin-top:44px; padding-top:22px; border-top:1px solid var(--line); }

.legal-tabla{ width:100%; border-collapse:collapse; margin:16px 0 8px; font-size:14px; }
.legal-tabla th{
  text-align:left; padding:10px 12px; font-size:11px; font-weight:800;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--gray);
  border-bottom:2px solid var(--line);
}
.legal-tabla td{ padding:12px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.55; }
.legal-tabla td:first-child{ font-weight:700; width:34%; }
.legal-tabla .dim{ color:var(--gray); font-weight:500; font-size:12.5px; }

@media (max-width:620px){
  .legal h1{ font-size:27px; }
  .legal-tabla, .legal-tabla tbody, .legal-tabla tr, .legal-tabla td{ display:block; width:100%; }
  .legal-tabla thead{ display:none; }
  .legal-tabla tr{ border-bottom:1px solid var(--line); padding:10px 0; }
  .legal-tabla td{ border:0; padding:3px 0; }
  .legal-tabla td:first-child{ width:auto; }
}

/* Borrar cuenta — zona de peligro del panel del socio */
.soc-borrar{
  margin-top:40px; padding:22px; border-radius:18px;
  background:#fff; border:2px solid rgba(214,90,58,0.35);
}
.btn-borrar{ background:var(--rust); color:#fff; border-color:var(--rust); }
.btn-borrar:hover{ background:#b8482c; }

/* Sugerencias (/sugerencias) */
body.pagina-sugerencias .hero,
body.pagina-sugerencias #categorias,
body.pagina-sugerencias #como-funciona,
body.pagina-sugerencias #directorio,
body.pagina-sugerencias #fichaNegocio,
body.pagina-sugerencias #negocios,
body.pagina-sugerencias #validar,
body.pagina-sugerencias #planes,
body.pagina-sugerencias #panelNegocio,
body.pagina-sugerencias #panelSocio,
body.pagina-sugerencias #paginaLegal,
body.pagina-sugerencias #panel{ display:none !important; }
body.pagina-sugerencias #paginaSugerencias{ display:block; min-height:calc(100vh - 140px); }
body.pagina-sugerencias .announce-bar{ display:none; }
#paginaSugerencias{ display:none; }
body.pagina-legal #paginaSugerencias,
body.pagina-negocio #paginaSugerencias,
body.pagina-socio #paginaSugerencias,
body.pagina-validar #paginaSugerencias,
body.pagina-admin #paginaSugerencias{ display:none !important; }

/* Buzón de sugerencias en el panel del club */
.sug-item{ background:#fff; border:2px solid var(--line); border-radius:16px; padding:16px 18px; margin-bottom:12px; }
.sug-item.nueva{ border-color:var(--yellow); background:var(--paper-tint-yellow); }
.sug-item__cab{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:8px; }
.sug-item__quien{ font-weight:800; font-size:13.5px; }
.sug-item__fecha{ font-size:11.5px; color:var(--gray); font-family:var(--font-mono); white-space:nowrap; }
.sug-item__texto{ font-size:14px; line-height:1.6; white-space:pre-wrap; }
.sug-item__pie{ margin-top:10px; display:flex; gap:14px; align-items:center; }

/* ======================================================================
   MENÚ DE TELÉFONO
   Bajo 880px .navlinks se oculta. Antes no había nada en su lugar, así que
   desde un celular —de donde llega casi todo el mundo— no existía forma de
   llegar a Mi Mascota ID, a Beneficios ni al directorio.
   ====================================================================== */
.nav-burger{
  display:none;
  width:42px; height:38px; flex:0 0 auto;
  background:#fff; border:2px solid var(--line); border-radius:11px;
  cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.nav-burger span{
  display:block; width:18px; height:2px; border-radius:2px;
  background:var(--ink); transition:transform .22s ease, opacity .18s ease;
}
.nav-burger:focus-visible{ outline:3px solid var(--teal-dark); outline-offset:2px; }
.nav-burger[aria-expanded="true"]{ background:var(--ink); border-color:var(--ink); }
.nav-burger[aria-expanded="true"] span{ background:#fff; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.menu-movil{
  display:none;
  border-top:1px solid var(--line);
  background:#fff;
  padding:14px 18px 20px;
  flex-direction:column; gap:2px;
  box-shadow:0 14px 24px -14px rgba(21,21,21,0.25);
}
.menu-movil a{
  display:block; padding:14px 4px; text-decoration:none;
  font-size:15.5px; font-weight:700; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.menu-movil a:last-of-type{ border-bottom:0; }

.menu-movil__destacado{
  display:flex !important; align-items:center; gap:13px;
  background:var(--paper-tint-yellow); border:2px solid var(--yellow) !important;
  border-radius:14px; padding:14px 16px !important; margin-bottom:10px;
}
.menu-movil__destacado b{ display:block; font-size:15.5px; }
.menu-movil__destacado small{
  display:block; font-size:12.5px; color:var(--gray); font-weight:600;
  margin-top:2px; line-height:1.4;
}
.menu-movil__ic{ font-size:22px; flex:0 0 auto; }
.menu-movil__cta{ width:100%; justify-content:center; margin-top:16px; }

@media (max-width:880px){
  .nav-burger{ display:flex; }
  .menu-movil[hidden]{ display:none; }
  .menu-movil:not([hidden]){ display:flex; }
  /* Con el menú abierto, el fondo no se desplaza por detrás */
  body.menu-abierto{ overflow:hidden; }
}

/* ============================================================
   AVISO DE LA PÁGINA DE BENEFICIOS
   Franja fija arriba del listado en /beneficios. No es un mensaje
   de "todavía no hay nada": queda puesto siempre, porque el club
   suma negocios cada semana y esa es la idea que se quiere dejar.
   ============================================================ */
.ben-aviso{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:26px;
  padding:20px 22px;
  border:1px solid rgba(200,155,60,0.30);
  border-left:5px solid var(--yellow);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,206,0,0.09), rgba(255,206,0,0.03));
}
.ben-aviso[hidden]{ display:none; }
.ben-aviso__ic{
  flex:0 0 auto;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  border-radius:50%;
  background:rgba(255,206,0,0.22);
}
.ben-aviso__txt{ flex:1 1 auto; min-width:0; }
.ben-aviso__txt b{
  display:block;
  font-size:15.5px;
  color:var(--ink);
  margin-bottom:4px;
}
.ben-aviso__txt p{
  margin:0;
  font-size:13.8px;
  line-height:1.55;
  color:var(--gray);
}
.ben-aviso__cta{ flex:0 0 auto; white-space:nowrap; }

@media (max-width: 720px){
  .ben-aviso{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding:18px;
  }
  .ben-aviso__cta{ width:100%; text-align:center; }
}

/* ============================================================
   OPCIÓN APAGADA EN "¿CÓMO QUIERES UNIRTE?"
   El registro de negocios está cerrado mientras se afina el
   circuito (ver NEGOCIOS_ABIERTO en js/app.js). Se muestra con
   la misma forma de un botón, pero sin cursor ni clic, para que
   se lea como "esto existe y viene", no como un error.
   ============================================================ */
.camino-pronto{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:13px 18px;
  border:2px dashed var(--line);
  border-radius:14px;
  background:rgba(26,26,26,0.02);
  color:rgba(26,26,26,0.45);
  font-weight:800; font-size:14.5px;
  cursor:default; user-select:none;
}
.camino-pronto em{
  font-style:normal;
  font-size:9.5px; font-weight:900; letter-spacing:0.07em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px;
  color:#1A1A1A; background:var(--yellow);
}