/* ============================================================
   DIRECTORIO PET FRIENDLY — main.css
   ============================================================ */
:root {
  --c-primary:  #1a3c5e;
  --c-accent:   #e91e8c;
  --c-bg:       #f7f9fc;
  --c-surface:  #ffffff;
  --c-text:     #1a1a2e;
  --c-muted:    #6b7280;
  --c-border:   #e5e9f0;
  --radius:     12px;
  --shadow:     0 2px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.13);
  --font:       'Plus Jakarta Sans', system-ui, sans-serif;
  --tr:         .2s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--c-bg);color:var(--c-text);line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* CONTAINER */
.container{max-width:1200px;margin:0 auto;padding:0 1.25rem}
/* NAV */
.nav{position:sticky;top:0;z-index:100;background:var(--c-surface);border-bottom:1px solid var(--c-border);box-shadow:0 1px 8px rgba(0,0,0,.06)}
.nav__inner{display:flex;align-items:center;height:64px;gap:1rem}
.nav__logo{font-weight:800;font-size:1.1rem;color:var(--c-primary);display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.nav__links{display:flex;align-items:center;gap:1.1rem;margin-left:auto;font-size:.88rem;font-weight:500}
.nav__links a{color:var(--c-muted);transition:color var(--tr)}
.nav__links a:hover{color:var(--c-primary)}
.nav__cta{background:var(--c-primary)!important;color:#fff!important;padding:.45rem 1rem;border-radius:7px;font-weight:700!important}
.nav__cta:hover{background:#154a77!important}
.nav__burger{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;margin-left:auto}
/* HERO */
.hero{background:linear-gradient(135deg,var(--c-primary) 0%,#0f2740 100%);color:#fff;padding:5rem 0 3.5rem;text-align:center}
.hero__title{font-size:clamp(1.9rem,5vw,3.25rem);font-weight:800;line-height:1.15;margin-bottom:.9rem}
.hero__title em{color:#7dd3fc;font-style:normal}
.hero__sub{font-size:1rem;opacity:.82;margin-bottom:2.25rem}
/* SEARCH BAR */
.search-bar{display:flex;gap:.6rem;flex-wrap:wrap;background:#fff;border-radius:50px;padding:.45rem .45rem .45rem 1rem;max-width:680px;margin:0 auto 1.75rem;box-shadow:0 4px 24px rgba(0,0,0,.22)}
.search-bar__field{display:flex;align-items:center;gap:.4rem;flex:1;min-width:150px}
.search-bar__field input,.search-bar__field select{border:none;outline:none;font-family:var(--font);font-size:.9rem;color:var(--c-text);width:100%;background:transparent}
/* CHIPS */
.cat-chips{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:.75rem}
.chip{background:rgba(255,255,255,.14);color:#fff;padding:.35rem .85rem;border-radius:50px;font-size:.78rem;font-weight:600;border:1px solid rgba(255,255,255,.22);transition:background var(--tr)}
.chip:hover{background:rgba(255,255,255,.28)}
/* BUTTONS */
.btn{display:inline-block;padding:.65rem 1.4rem;border-radius:8px;font-weight:700;font-size:.92rem;cursor:pointer;border:2px solid transparent;transition:all var(--tr)}
.btn--primary{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}
.btn--primary:hover{background:#c2177a;border-color:#c2177a}
.btn--outline{background:transparent;color:var(--c-primary);border-color:var(--c-primary)}
.btn--outline:hover{background:var(--c-primary);color:#fff}
.btn--sm{padding:.4rem .9rem;font-size:.82rem}
/* SECTION */
.section{padding:3.5rem 0}
.section--plans{background:#f0f6ff}
.section__title{font-size:1.65rem;font-weight:800;color:var(--c-primary);margin-bottom:.4rem}
.section__sub{color:var(--c-muted);margin-bottom:1.75rem;font-size:.95rem}
/* GRID */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.1rem}
/* CARD */
.card-listing{background:var(--c-surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--tr),box-shadow var(--tr)}
.card-listing:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card-listing__img{height:175px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:3rem}
.card-listing__img img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:.55rem;right:.55rem;color:#fff;font-size:.7rem;font-weight:700;padding:.22rem .6rem;border-radius:50px;text-transform:uppercase;letter-spacing:.04em}
.card-listing__body{padding:.9rem 1rem;flex:1}
.card-listing__cat{font-size:.78rem;font-weight:600;margin-bottom:.25rem}
.card-listing__body h3{font-size:.97rem;font-weight:700;margin-bottom:.25rem;line-height:1.3}
.card-listing__loc{font-size:.8rem;color:var(--c-muted)}
.card-listing__rating{font-size:.82rem;margin-top:.35rem}
.stars{color:#f59e0b;letter-spacing:.05em}
/* PLANS */
.plans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.1rem}
.plan-card{background:var(--c-surface);border-radius:var(--radius);padding:1.6rem 1.4rem;border:2px solid var(--c-border);text-align:center;transition:all var(--tr)}
.plan-card--featured{border-color:var(--c-primary);box-shadow:0 0 0 4px rgba(26,60,94,.09);transform:scale(1.02)}
.plan-card__badge{display:inline-block;color:#fff;font-size:.72rem;font-weight:700;padding:.25rem .75rem;border-radius:50px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.85rem}
.plan-card__price{font-size:1.9rem;font-weight:800;color:var(--c-primary);margin-bottom:.2rem}
.plan-card__price small{font-size:.85rem;font-weight:400;color:var(--c-muted)}
.plan-card__annual{font-size:.78rem;color:var(--c-muted);margin-bottom:.9rem}
.plan-card__features{list-style:none;text-align:left;margin-bottom:1.4rem;font-size:.82rem;color:var(--c-muted)}
.plan-card__features li{padding:.28rem 0;border-bottom:1px solid var(--c-border)}
/* FILTERS */
.filters-bar{background:var(--c-surface);padding:1rem 1.1rem;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:1.4rem;display:flex;flex-wrap:wrap;gap:.65rem;align-items:center}
.filters-bar select,.filters-bar input{padding:.5rem .75rem;border:1.5px solid var(--c-border);border-radius:7px;font-family:var(--font);font-size:.88rem}
/* FORMS */
.form-card{background:var(--c-surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.75rem}
.form-group{margin-bottom:.95rem}
.form-group label{display:block;font-weight:600;font-size:.82rem;margin-bottom:.3rem;color:#444}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.6rem .85rem;border:1.5px solid var(--c-border);border-radius:7px;font-family:var(--font);font-size:.9rem;transition:border-color var(--tr)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--c-primary)}
.form-group textarea{resize:vertical;min-height:95px}
.form-group .hint{font-size:.75rem;color:var(--c-muted);margin-top:.25rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.alert{padding:.9rem 1.1rem;border-radius:8px;font-size:.88rem;margin-bottom:1.1rem}
.alert--err{background:#fef2f2;border-left:4px solid #ef4444;color:#991b1b}
.alert--ok{background:#f0fdf4;border-left:4px solid #22c55e;color:#166534}
/* TABLE */
.table-wrap{background:var(--c-surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:auto}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{padding:.7rem .95rem;text-align:left;border-bottom:1px solid var(--c-border)}
th{background:var(--c-bg);font-weight:700;color:var(--c-muted);font-size:.76rem;text-transform:uppercase}
tr:last-child td{border-bottom:none}
tr:hover td{background:#f9fbfd}
.tag{display:inline-block;padding:.18rem .55rem;border-radius:50px;font-size:.72rem;font-weight:700}
.tag--green{background:#d1fae5;color:#065f46}
.tag--yellow{background:#fef3c7;color:#92400e}
.tag--red{background:#fee2e2;color:#991b1b}
.tag--gray{background:#f3f4f6;color:#374151}
/* ADMIN */
.admin-layout{display:flex;min-height:100vh}
.sidebar{width:235px;background:var(--c-primary);color:#fff;padding:1.25rem 0;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar__logo{padding:0 1.4rem 1.25rem;font-weight:800;font-size:1.05rem}
.sidebar__nav a{display:flex;align-items:center;gap:.65rem;padding:.7rem 1.4rem;color:rgba(255,255,255,.72);font-size:.87rem;transition:all var(--tr)}
.sidebar__nav a:hover,.sidebar__nav a.active{background:rgba(255,255,255,.12);color:#fff}
.admin-main{flex:1;padding:2rem;background:var(--c-bg);min-width:0}
.admin-main h1{font-size:1.4rem;font-weight:800;margin-bottom:1.4rem;color:var(--c-primary)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem;margin-bottom:1.75rem}
.stat-card{background:var(--c-surface);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow)}
.stat-card__val{font-size:1.9rem;font-weight:800;color:var(--c-primary)}
.stat-card__label{font-size:.82rem;color:var(--c-muted);margin-top:.2rem}
/* FOOTER */
.footer{background:var(--c-primary);color:rgba(255,255,255,.72);padding:2.75rem 0 1.25rem;margin-top:4rem}
.footer__inner{display:flex;gap:2rem;flex-wrap:wrap;justify-content:space-between;padding-bottom:1.75rem;margin-bottom:1.25rem;border-bottom:1px solid rgba(255,255,255,.12)}
.footer__brand span{font-weight:800;color:#fff;font-size:1.05rem;display:block;margin-bottom:.4rem}
.footer__brand p{font-size:.83rem;max-width:270px}
.footer__links{display:flex;flex-direction:column;gap:.45rem;font-size:.88rem}
.footer__links a:hover{color:#fff}
.footer__copy{font-size:.78rem;text-align:center}
/* WIZARD */
.wizard-steps{display:flex;gap:.5rem;margin-bottom:1.75rem}
.wizard-step{flex:1;text-align:center;padding:.45rem;border-radius:6px;font-size:.78rem;font-weight:700;background:#f0f4f8;color:#999}
.wizard-step.on{background:var(--c-primary);color:#fff}
.wizard-step.done{background:#22c55e;color:#fff}
/* RESPONSIVE */
@media(max-width:768px){
  .nav__links{display:none;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:var(--c-surface);padding:1rem;border-top:1px solid var(--c-border);box-shadow:var(--shadow-lg)}
  .nav.open .nav__links{display:flex}
  .nav__burger{display:block}
  .hero{padding:3rem 0 2.5rem}
  .search-bar{border-radius:var(--radius);flex-direction:column}
  .grid-cards,.plans-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .admin-layout{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static}
  .plan-card--featured{transform:none}
}
/* Grilla de chips — todas las categorías en filas fluidas */
.cats-home {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

/* Chip individual */
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
  white-space: nowrap;
}

.cat-chip:hover {
  background: #f8fafc;
  border-color: var(--primary, #1a3c5e);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  text-decoration: none;
}

.cat-chip:active {
  transform: translateY(0);
  box-shadow: none;
}

.cat-chip.active {
  background: color-mix(in srgb, var(--primary, #1a3c5e) 10%, #fff);
  border-color: var(--primary, #1a3c5e);
}

/* Emoji / ícono */
.cat-chip .chip-emoji {
  font-size: 15px;
  line-height: 1;
}

/* Nombre de la categoría */
.cat-chip .chip-name {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  line-height: 1;
}

.cat-chip.active .chip-name {
  color: var(--primary, #1a3c5e);
}

/* Contador de negocios */
.cat-chip .chip-count {
  font-size: 11px;
  font-weight: 500;
  color: #9ca3af;
  background: #f3f4f6;
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.6;
}

.cat-chip.active .chip-count {
  background: color-mix(in srgb, var(--primary, #1a3c5e) 15%, #fff);
  color: var(--primary, #1a3c5e);
}

/* Eliminamos los estilos viejos de .cat-home-card */
.cat-home-card { display: none !important; }

/* ── BOTÓN GEOLOCALIZACIÓN (hero) ────────────────────────────── */
@keyframes geo-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
#btnGeo:hover { color: var(--c-primary) !important; background: rgba(26,60,94,.08) !important; }

/* ── FOOTER EXTENDIDO v5 ────────────────────────────────────────────────── */
.footer__inner {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 1.75rem;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer__brand { flex: 1 1 220px; }
.footer__brand span { font-weight: 800; color: #fff; font-size: 1.05rem; display: block; margin-bottom: .4rem; }
.footer__brand p   { font-size: .83rem; max-width: 270px; margin-bottom: .55rem; }
.footer__mail      { color: rgba(255,255,255,.8); text-decoration: none; font-size: .8rem; display: inline-block; }
.footer__mail:hover{ color: #fff; text-decoration: underline; }
.footer__links     { display: flex; flex-direction: column; gap: .45rem; font-size: .88rem; flex: 0 1 auto; }
.footer__links a   { color: rgba(255,255,255,.72); text-decoration: none; transition: color .2s; }
.footer__links a:hover { color: #fff; }

/* Contador de visitas */
.footer__vc {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: .55rem 1rem;
  flex-shrink: 0;
}
.footer__vc-icon  { font-size: 1rem; opacity: .75; }
.footer__vc-num   { display: block; font-size: 1.1rem; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.footer__vc-label { display: block; font-size: .6rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .07em; margin-top: .12rem; }

/* Barra inferior */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 0 0;
}
.footer__copy { font-size: .78rem; color: rgba(255,255,255,.45); }

/* Texto de marketing */
.footer__mkt {
  display: flex;
  align-items: center;
  gap: .45rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: .45rem .85rem;
  font-size: .78rem;
  color: rgba(255,255,255,.7);
  max-width: 480px;
  line-height: 1.45;
}
.footer__mkt strong  { color: #fff; }
.footer__mkt-cta     { margin-left: .25rem; color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; opacity: .9; }
.footer__mkt-cta:hover { opacity: 1; }
@media (max-width: 640px) {
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__mkt    { max-width: 100%; }
  .footer__vc     { align-self: flex-start; }
}

/* ── FIX MARCADORES TRANSPARENTES (v4.2) ──────────────────────────────────
   Leaflet asigna por defecto background:white y border a .leaflet-div-icon.
   Sobreescribimos eso para que el fondo sea 100% transparente.
   El PNG usa mix-blend-mode:multiply (definido inline en el img)
   para que el blanco del PNG desaparezca sobre el mapa.
   ───────────────────────────────────────────────────────────────────────── */
.leaflet-div-icon {
  background: transparent !important;
  border:     none        !important;
}

/* El img dentro del divIcon hereda el blend pero lo definimos también acá
   como refuerzo por si algún navegador ignora el inline style */
.leaflet-div-icon img {
  mix-blend-mode: multiply;
  background:     transparent;
  display:        block;
}
/* ────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   BARRA DE 4 VISTAS — minimalista, DEBAJO del mapa  v5.2
   Píldoras planas, modernas. Transición 160ms ease-out solo en
   brillo/borde/color — sin desplazamiento físico.
   ══════════════════════════════════════════════════════════════ */

.mv-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 1.25rem;
}

/* Grupo de píldoras — fondo tipo "segmented control" */
.mv-bar__group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: #f1f4f8;
  border: 1px solid #e3e8f0;
  border-radius: 10px;
}

/* Separador entre Marcadores y el resto */
.mv-bar__sep {
  width: 1px;
  height: 18px;
  background: #d6dde8;
  margin: 0 3px;
  flex-shrink: 0;
}

/* ── Píldora (botón) ─────────────────────────────────────────── */
.mv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: #5a6b7e;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;

  /* Transición sutil: solo propiedades ópticas, sin transform */
  transition: all 160ms ease-out;
  filter: brightness(1) contrast(1);
}

.mv-pill svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: .55;
  transition: opacity 160ms ease-out;
}

/* Hover: brillo/contraste se desplazan ligeramente */
.mv-pill:hover {
  color: #2d3a49;
  border-color: #dde4ee;
  filter: brightness(0.98) contrast(1.05);
}
.mv-pill:hover svg { opacity: .80; }

/* Activo: tarjeta blanca elevada sutil dentro del segmented control */
.mv-pill--active {
  background: #ffffff;
  border-color: #e07a3a;
  color: #c05e1f;
  box-shadow: 0 1px 3px rgba(192,94,31,.12);
  filter: brightness(1) contrast(1.04);
}
.mv-pill--active svg { opacity: 1; color: #e07a3a; }

.mv-pill:active {
  filter: brightness(0.95) contrast(1.10);
}

/* ── Pista contextual ────────────────────────────────────────── */
.mv-bar__hint {
  font-size: 11.5px;
  color: #9aabb8;
  font-style: italic;
  flex: 1;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mv-bar__hint:empty { display: none; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mv-bar { gap: 8px; }
  .mv-bar__hint { width: 100%; text-align: left; flex-basis: 100%; }
}
@media (max-width: 420px) {
  .mv-pill span { display: none; }
  .mv-pill { padding: 7px 10px; }
  .mv-pill svg { width: 15px; height: 15px; opacity: .7; }
  .mv-pill--active svg { opacity: 1; }
}