/* ════════════════════════════════════════════════════════════════
   DIRECTORIO DE NEGOCIOS v4  |  CODIFICANDO  |  Odoo 17 Community
   Rediseño moderno · mobile-first · scoped con prefijo "dir-"
   Marca: #242332 (dark) · #F28C28 (orange) · #25D366 (whatsapp)
   ════════════════════════════════════════════════════════════════ */

:root {
  --dir-dark:        #1d1c29;
  --dir-dark-2:      #242332;
  --dir-dark-3:      #2e2d40;
  --dir-gray:        #5a5a6b;
  --dir-gray-light:  #9b9bab;
  --dir-orange:      #F28C28;
  --dir-orange-dark: #d97408;
  --dir-orange-soft: #fff3e6;
  --dir-grad:        linear-gradient(135deg, #F28C28 0%, #f6ac4e 100%);
  --dir-grad-dark:   linear-gradient(160deg, #1d1c29 0%, #242332 55%, #33304a 100%);
  --dir-green:       #1fb867;
  --dir-red:         #e54f4f;
  --dir-wa:          #25D366;
  --dir-wa-dark:     #1ebe5a;
  --dir-light:       #f7f7fa;
  --dir-white:       #ffffff;
  --dir-border:      #ececf2;
  --dir-shadow-sm:   0 2px 10px rgba(29,28,41,.06);
  --dir-shadow:      0 6px 24px rgba(29,28,41,.09);
  --dir-shadow-lg:   0 14px 48px rgba(29,28,41,.16);
  --dir-hover:       0 14px 40px rgba(242,140,40,.22);
  --dir-radius:      16px;
  --dir-radius-lg:   22px;
  --dir-radius-sm:   10px;
  --dir-transition:  all .28s cubic-bezier(.4,0,.2,1);
  --dir-font-bump:   clamp(1rem, .95rem + .3vw, 1.1rem);
}

/* ── Utilidades ─────────────────────────────────────────────── */
.dir-accent   { color: var(--dir-orange) !important; }
.dir-bg-light { background: var(--dir-light); }
.dir-page     { overflow-x: clip; }

/* Animación de aparición al hacer scroll */
.dir-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.dir-reveal.dir-in {
  opacity: 1;
  transform: none;
}

/* ── Botones ────────────────────────────────────────────────── */
.dir-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: var(--dir-grad);
  color: #fff !important;
  padding: .7rem 1.6rem;
  border-radius: 50px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  transition: var(--dir-transition);
  font-size: .95rem;
  box-shadow: 0 4px 16px rgba(242,140,40,.30);
  position: relative;
  overflow: hidden;
}
.dir-btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.dir-btn-primary:hover::after { left: 130%; }
.dir-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--dir-hover);
  color: #fff !important;
  filter: brightness(1.04);
}
.dir-btn-primary:active { transform: translateY(0); }

.dir-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: var(--dir-white);
  color: var(--dir-dark) !important;
  padding: .7rem 1.6rem;
  border-radius: 50px;
  font-weight: 600;
  border: 2px solid var(--dir-border);
  cursor: pointer;
  text-decoration: none !important;
  transition: var(--dir-transition);
  font-size: .95rem;
}
.dir-btn-outline:hover {
  border-color: var(--dir-orange);
  color: var(--dir-orange) !important;
  background: var(--dir-orange-soft);
}

.dir-btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: var(--dir-white);
  color: #3c4043 !important;
  padding: .75rem 1.7rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: .95rem;
  border: 2px solid #e8e8ee;
  cursor: pointer;
  text-decoration: none !important;
  transition: var(--dir-transition);
  box-shadow: var(--dir-shadow-sm);
}
.dir-btn-google:hover {
  box-shadow: var(--dir-shadow);
  border-color: #d4d4de;
  transform: translateY(-2px);
  color: #202124 !important;
}

/* ── Secciones ──────────────────────────────────────────────── */
.dir-section { padding: 3.2rem 0; }
.dir-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}
.dir-section-eyebrow {
  display: block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dir-orange);
  margin-bottom: .15rem;
}
.dir-section-title {
  font-size: clamp(1.35rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 800;
  color: var(--dir-dark) !important;
  margin: 0;
  letter-spacing: -.01em;
  position: relative;
  padding-bottom: .45rem;
}
.dir-section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 4px;
  border-radius: 4px;
  background: var(--dir-grad);
}
.dir-section-link {
  color: var(--dir-orange) !important;
  font-weight: 700;
  text-decoration: none !important;
  font-size: .92rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: var(--dir-transition);
  white-space: nowrap;
}
.dir-section-link:hover { gap: .6rem; }

/* ════════════════════════════════════════════════════════════
   HERO  (homepage)
   ════════════════════════════════════════════════════════════ */
.dir-hero-v2 {
  position: relative;
  padding: 3.2rem 0 3.6rem;
  overflow: hidden;
  isolation: isolate;
}
.dir-hero-bg { position: absolute; inset: 0; z-index: -1; }
.dir-hero-bg-gradient {
  position: absolute; inset: 0;
  background: var(--dir-grad-dark);
}
.dir-hero-bg-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 75%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 75%);
}
.dir-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  animation: dirFloat 9s ease-in-out infinite alternate;
}
.dir-blob-1 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(242,140,40,.55), transparent 70%);
  top: -120px; right: -80px;
}
.dir-blob-2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(110,90,255,.35), transparent 70%);
  bottom: -130px; left: -70px;
  animation-delay: 2.5s;
}
@keyframes dirFloat {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(26px) scale(1.06); }
}
.dir-hero-bg-ring {
  position: absolute;
  border: 1.5px solid rgba(242,140,40,.25);
  border-radius: 50%;
}
.dir-ring-1 { width: 480px; height: 480px; top: -190px; right: -110px; }
.dir-ring-2 { width: 320px; height: 320px; bottom: -140px; left: -80px; border-color: rgba(255,255,255,.10); }

.dir-hero-v2-content {
  position: relative;
  text-align: center;
  color: #fff;
}
.dir-session-pill {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .6rem;
}
.dir-session-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff !important;
  font-size: .84rem;
  font-weight: 700;
  padding: .45rem 1.05rem;
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none !important;
  transition: var(--dir-transition);
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.dir-session-link span,
.dir-session-link svg { color: #fff !important; }
.dir-session-link:hover {
  background: var(--dir-grad);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(242,140,40,.4);
}
.dir-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(242,140,40,.16);
  border: 1px solid rgba(242,140,40,.40);
  color: #ffc88f !important;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .4rem 1.1rem;
  border-radius: 50px;
  margin-bottom: 1.1rem;
}
/* !important: el tema (p.ej. #wrapwrap h1) pisa estos colores si no */
.dir-hero-v2-title {
  font-size: clamp(1.9rem, 1.4rem + 3.4vw, 3.4rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #fff !important;
  margin-bottom: .8rem;
  text-shadow: 0 2px 22px rgba(0,0,0,.35);
}
.dir-accent-text {
  background: linear-gradient(90deg, #F28C28, #ffc46e, #F28C28);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  animation: dirGradShift 3.5s linear infinite;
  /* Hereda tamaño/peso del título padre (evita verse más pequeño) */
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit;
  display: inline;
}
@keyframes dirGradShift {
  to { background-position: 200% center; }
}
.dir-hero-v2-sub {
  font-size: var(--dir-font-bump);
  color: rgba(255,255,255,.78) !important;
  max-width: 620px;
  margin: 0 auto 1.8rem;
  line-height: 1.55;
}
.dir-hero-highlight { color: #ffc88f !important; font-weight: 700; }

/* ── Widget de búsqueda (glass) ─────────────────────────────── */
.dir-search-widget {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--dir-radius-lg);
  box-shadow: var(--dir-shadow-lg), 0 12px 70px rgba(242,140,40,.28);
  padding: 1rem;
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
  border: 1px solid rgba(255,255,255,.65);
}
.dir-sw-main {
  display: flex;
  gap: .6rem;
  align-items: stretch;
}
.dir-sw-input-group {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--dir-light);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 0 1rem;
  transition: var(--dir-transition);
  min-width: 0;
}
.dir-sw-input-group:focus-within {
  border-color: var(--dir-orange);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(242,140,40,.12);
}
.dir-sw-icon { color: var(--dir-gray-light); }
.dir-sw-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: .8rem 0;
  font-size: .98rem;
  color: var(--dir-dark);
  min-width: 0;
}
.dir-sw-input::placeholder { color: var(--dir-gray-light); }
.dir-sw-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--dir-grad);
  color: #fff !important;
  border: none;
  border-radius: 14px;
  padding: 0 1.5rem;
  font-weight: 800;
  font-size: .95rem;
  cursor: pointer;
  transition: var(--dir-transition);
  box-shadow: 0 4px 14px rgba(242,140,40,.35);
  white-space: nowrap;
}
.dir-sw-btn span,
.dir-sw-btn svg { color: #fff !important; }
.dir-sw-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Chips del buscador */
/* Los chips envuelven en TODAS las pantallas: nunca se desbordan,
   incluso con nombres largos seleccionados */
.dir-sw-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-top: .75rem;
}
.dir-sw-filter-wrap { position: relative; flex-shrink: 0; }
.dir-sw-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--dir-light);
  border: 1.5px solid var(--dir-border);
  color: var(--dir-gray);
  font-size: .83rem;
  font-weight: 600;
  padding: .45rem .95rem;
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--dir-transition);
  flex-shrink: 0;
  text-decoration: none !important;
}
.dir-sw-chip:hover {
  border-color: var(--dir-orange);
  color: var(--dir-orange);
  background: var(--dir-orange-soft);
}
/* Chip seleccionado: naranja con texto blanco (forzado sobre el tema) */
.dir-sw-chip.active {
  background: var(--dir-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(242,140,40,.38);
}
.dir-sw-chip.active span,
.dir-sw-chip.active small,
.dir-sw-chip.active i,
.dir-sw-chip.active svg { color: #fff !important; }
.dir-sw-chip.active .dir-open-dot { background: #fff; }
.dir-sw-chip.active .dir-sw-cat-dot { color: #fff !important; }
.dir-sw-near-chip {
  background: var(--dir-orange-soft);
  border-color: rgba(242,140,40,.45);
  color: var(--dir-orange-dark);
  font-weight: 700;
}
.dir-sw-near-chip:hover {
  background: var(--dir-orange);
  border-color: var(--dir-orange);
  color: #fff !important;
}
.dir-sw-near-chip:hover span,
.dir-sw-near-chip:hover svg { color: #fff !important; }
.dir-open-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dir-green);
  box-shadow: 0 0 0 0 rgba(31,184,103,.5);
  animation: dirPulse 1.8s infinite;
  flex-shrink: 0;
}
@keyframes dirPulse {
  0%   { box-shadow: 0 0 0 0 rgba(31,184,103,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(31,184,103,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,184,103,0); }
}
.dir-sw-sep {
  width: 1.5px;
  align-self: stretch;
  background: var(--dir-border);
  margin: 0 .2rem;
  flex-shrink: 0;
}
.dir-sw-cat-icon { width: 16px; height: 16px; object-fit: contain; }
.dir-sw-cat-dot  { font-size: .65rem; line-height: 1; }

/* Dropdowns del buscador — diseño moderno con tiles de ícono */
.dir-sw-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--dir-border);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(29,28,41,.22);
  z-index: 50;
  overflow: hidden;
  padding: .45rem;
}
.dir-sw-dropdown.show { display: block; animation: dirDropIn .18s ease; }
@keyframes dirDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.dir-sw-dropdown::-webkit-scrollbar { width: 6px; }
.dir-sw-dropdown::-webkit-scrollbar-thumb {
  background: #d9d9e3;
  border-radius: 6px;
}
.dir-sw-dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .48rem .6rem;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--dir-dark);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.dir-sw-dd-item:hover {
  background: var(--dir-orange-soft);
  transform: translateX(2px);
}
.dir-sw-dd-item.selected {
  background: var(--dir-orange-soft);
  color: var(--dir-orange-dark);
  font-weight: 800;
}
.dir-sw-dd-item.selected::after {
  content: '\f00c';
  font-family: FontAwesome;
  color: var(--dir-orange);
  font-size: .8rem;
  margin-left: .2rem;
}
/* Tile de ícono por ítem (categoría / zona) */
.dir-dd-main {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dir-dd-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--dir-orange-soft);
  color: var(--dir-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .85rem;
  transition: transform .15s ease;
}
.dir-sw-dd-item:hover .dir-dd-ico { transform: scale(1.08); }
.dir-dd-ico img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
/* Foto de zona: llena el tile completo */
.dir-dd-ico .dir-dd-zimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.dir-sw-dd-feat { justify-content: flex-start; }
.dir-sw-dd-feat i {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--dir-orange-soft);
  color: var(--dir-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .8rem;
}
.dir-sw-dd-count {
  background: var(--dir-orange-soft);
  color: var(--dir-orange-dark);
  font-size: .72rem;
  font-weight: 800;
  padding: .12rem .6rem;
  border-radius: 50px;
  flex-shrink: 0;
}
.dir-sw-dd-empty {
  padding: .9rem;
  font-size: .85rem;
  color: var(--dir-gray-light);
  text-align: center;
}

/* Estadísticas del hero */
.dir-hero-stats {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: .8rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.dir-hero-stat {
  text-align: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  padding: .75rem 1.5rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  min-width: 110px;
  transition: var(--dir-transition);
}
.dir-hero-stat:hover {
  border-color: rgba(242,140,40,.5);
  background: rgba(242,140,40,.10);
  transform: translateY(-2px);
}
.dir-hero-stat-num {
  display: block;
  font-size: 1.7rem;
  font-weight: 900;
  color: #fff !important;
  line-height: 1.1;
}
.dir-hero-stat-label {
  font-size: .76rem;
  color: rgba(255,255,255,.62) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
.dir-hero-stat-sep { display: none; }

/* ════════════════════════════════════════════════════════════
   TARJETA DE NEGOCIO
   ════════════════════════════════════════════════════════════ */
.dir-card {
  position: relative;
  background: #fff;
  border-radius: var(--dir-radius);
  border: 1px solid var(--dir-border);
  box-shadow: var(--dir-shadow-sm);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: var(--dir-transition);
}
.dir-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--dir-shadow-lg);
  border-color: rgba(242,140,40,.35);
}
.dir-card-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.dir-card-media {
  position: relative;
  height: 150px;
  background: var(--dir-light);
  overflow: hidden;
  flex-shrink: 0;
}
.dir-card-banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.dir-card:hover .dir-card-banner { transform: scale(1.07); }
.dir-card-banner-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dir-card-banner-placeholder i {
  font-size: 2.4rem;
  color: rgba(255,255,255,.85);
}
.dir-card-media-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(29,28,41,.45), transparent 55%);
  pointer-events: none;
}
.dir-card-badges {
  position: absolute;
  top: .65rem;
  left: .65rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  z-index: 2;
  pointer-events: none;
}
.dir-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .03em;
  padding: .28rem .7rem;
  border-radius: 50px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dir-badge-featured {
  background: rgba(242,140,40,.95);
  color: #fff !important;
}
.dir-badge-featured i { color: #fff !important; }
.dir-badge-open {
  background: #ffffff;
  color: #15803d !important;
}
.dir-badge-open .dir-pulse-dot { background: #1fb867; }
.dir-badge-closed {
  background: #e54f4f;
  color: #ffffff !important;
}
.dir-pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: dirPulse 1.8s infinite;
  flex-shrink: 0;
}
.dir-card-save {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.92);
  color: var(--dir-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--dir-transition);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
}
.dir-card-save:hover { color: var(--dir-orange); transform: scale(1.1); }
.dir-card-save.dir-saved {
  background: var(--dir-orange);
  color: #fff;
}
.dir-card-save.dir-saved svg { fill: currentColor; }
.dir-card-distance {
  position: absolute;
  bottom: .6rem;
  right: .6rem;
  z-index: 2;
  background: rgba(29,28,41,.82);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  padding: .25rem .7rem;
  border-radius: 50px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.dir-card-logo-wrap {
  position: absolute;
  bottom: -22px;
  left: .9rem;
  z-index: 3;
}
.dir-card-logo,
.dir-card-logo-placeholder {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 3px solid #fff;
  background: #fff;
  object-fit: cover;
  box-shadow: var(--dir-shadow-sm);
}
.dir-card-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dir-gray-light);
  background: var(--dir-light);
}
.dir-card-body {
  padding: 1.9rem .95rem .95rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.dir-card-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--dir-dark);
  margin: 0 0 .4rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dir-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .5rem;
}
.dir-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 700;
  padding: .22rem .65rem;
  border-radius: 50px;
  text-decoration: none !important;
  transition: var(--dir-transition);
}
.dir-tag-category {
  background: var(--dir-orange-soft);
  color: var(--dir-orange-dark) !important;
}
.dir-tag-zone {
  background: var(--dir-light);
  color: var(--dir-gray) !important;
}
.dir-card-desc {
  font-size: .84rem;
  color: var(--dir-gray);
  line-height: 1.5;
  margin: 0 0 .6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dir-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .6rem;
}
.dir-feat-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 600;
  color: var(--dir-gray);
  background: var(--dir-light);
  border: 1px solid var(--dir-border);
  padding: .18rem .55rem;
  border-radius: 50px;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dir-feat-pill i { color: var(--dir-orange); font-size: .68rem; }
.dir-feat-more {
  font-size: .7rem;
  font-weight: 800;
  color: var(--dir-orange);
  padding: .18rem .4rem;
}
.dir-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-top: .55rem;
  border-top: 1px solid var(--dir-border);
}
.dir-card-rating {
  display: flex;
  align-items: center;
  gap: .3rem;
  min-width: 0;
}
.dir-stars { display: inline-flex; gap: 1px; }
.dir-star-filled { color: var(--dir-orange); }
.dir-star-empty  { color: #d9d9e3; }
.dir-rating-text  { font-size: .82rem; font-weight: 800; color: var(--dir-dark); }
.dir-rating-count { font-size: .76rem; color: var(--dir-gray-light); }
.dir-no-rating    { font-size: .78rem; color: var(--dir-gray-light); }
.dir-card-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  position: relative;
  z-index: 2;
}
.dir-card-like {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  background: transparent;
  border: none;
  color: var(--dir-gray);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  padding: .3rem .45rem;
  border-radius: 50px;
  transition: var(--dir-transition);
}
.dir-card-like:hover { color: var(--dir-red); background: rgba(229,79,79,.08); }
.dir-card-like.dir-liked i { color: var(--dir-red); animation: dirHeartPop .4s ease; }
@keyframes dirHeartPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.dir-card-wa {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--dir-wa);
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  text-decoration: none !important;
  transition: var(--dir-transition);
  box-shadow: 0 3px 10px rgba(37,211,102,.35);
}
.dir-card-wa:hover { transform: scale(1.12); background: var(--dir-wa-dark); }

/* ════════════════════════════════════════════════════════════
   PUBLICIDAD — banners y popup sutil
   ════════════════════════════════════════════════════════════ */
.dir-ads-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
  padding: .6rem 0;
}
.dir-ad-item {
  position: relative;
  border-radius: var(--dir-radius-sm);
  overflow: hidden;
  box-shadow: var(--dir-shadow-sm);
  max-width: 100%;
  transition: var(--dir-transition);
}
.dir-ad-item:hover { box-shadow: var(--dir-shadow); transform: translateY(-2px); }
.dir-ad-label {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  background: rgba(29,28,41,.55);
  color: rgba(255,255,255,.85);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .12rem .5rem;
  border-radius: 50px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.dir-ad-link { display: block; }
.dir-ad-image {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 220px;
  object-fit: contain;
}
.dir-sidebar-ad .dir-ad-image { max-height: none; width: 100%; }

/* Popup publicitario sutil (slide-in) */
.dir-adpop {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1045;
  width: min(300px, calc(100vw - 2rem));
  background: #fff;
  border-radius: var(--dir-radius);
  box-shadow: var(--dir-shadow-lg);
  border: 1px solid var(--dir-border);
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px) scale(.97);
  pointer-events: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.34,1.4,.5,1);
}
.dir-adpop.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.dir-adpop-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: rgba(29,28,41,.55);
  color: rgba(255,255,255,.9);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .12rem .5rem;
  border-radius: 50px;
  pointer-events: none;
}
.dir-adpop-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(29,28,41,.6);
  color: #fff;
  font-size: .75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--dir-transition);
}
.dir-adpop-close:hover { background: var(--dir-dark); }
.dir-adpop-link { display: block; }
.dir-adpop-img { display: block; width: 100%; height: auto; }

/* ════════════════════════════════════════════════════════════
   CATEGORÍAS · ZONAS · CTA CERCA
   ════════════════════════════════════════════════════════════ */
.dir-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  background: #fff;
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius);
  padding: 1.3rem .8rem 1.1rem;
  height: 100%;
  transition: var(--dir-transition);
  box-shadow: var(--dir-shadow-sm);
}
.dir-cat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--dir-hover);
  border-color: rgba(242,140,40,.4);
}
.dir-cat-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--dir-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .25rem;
  transition: var(--dir-transition);
}
.dir-cat-card:hover .dir-cat-icon { transform: scale(1.1) rotate(-4deg); }
.dir-cat-img { width: 32px; height: 32px; object-fit: contain; }
.dir-cat-name {
  font-weight: 700;
  font-size: .9rem;
  color: var(--dir-dark);
  line-height: 1.25;
}
.dir-cat-count { color: var(--dir-gray-light); font-size: .74rem; }

.dir-near-cta-section { padding: 1rem 0 2.4rem; }
.dir-near-cta {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  background: var(--dir-grad-dark);
  border-radius: var(--dir-radius-lg);
  padding: 1.7rem 2rem;
  color: #fff;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.dir-near-cta::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,140,40,.4), transparent 70%);
  filter: blur(30px);
}
.dir-near-cta-icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: rgba(242,140,40,.18);
  border: 1px solid rgba(242,140,40,.4);
  color: var(--dir-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dir-near-cta-text { flex: 1; min-width: 220px; }
.dir-near-cta-text h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff !important;
  margin: 0 0 .25rem;
}
.dir-near-cta-text p { margin: 0; color: rgba(255,255,255,.75) !important; font-size: .92rem; }
.dir-near-cta-btn { position: relative; z-index: 1; }

.dir-zone-card {
  position: relative;
  display: block;
  border-radius: var(--dir-radius);
  overflow: hidden;
  height: 130px;
  box-shadow: var(--dir-shadow-sm);
  transition: var(--dir-transition);
}
.dir-zone-card:hover { transform: translateY(-4px); box-shadow: var(--dir-shadow-lg); }
.dir-zone-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.dir-zone-card:hover .dir-zone-img { transform: scale(1.08); }
.dir-zone-img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--dir-grad-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.5);
}
.dir-zone-info {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(29,28,41,.85), transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: .85rem .95rem;
  color: #fff;
}
.dir-zone-info strong { font-size: .98rem; font-weight: 800; color: #fff !important; }
.dir-zone-info small  { color: rgba(255,255,255,.75) !important; font-size: .76rem; }

/* ════════════════════════════════════════════════════════════
   LISTADO — búsqueda sticky, chips, orden
   ════════════════════════════════════════════════════════════ */
.dir-sticky-search {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dir-border);
  padding: .8rem 0 .4rem;
  box-shadow: var(--dir-shadow-sm);
}
.dir-search-main-row {
  display: flex;
  gap: .5rem;
  align-items: stretch;
}
.dir-search-field-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--dir-light);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 0 .9rem;
  min-width: 0;
  transition: var(--dir-transition);
}
.dir-search-field-wrap:focus-within {
  border-color: var(--dir-orange);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(242,140,40,.10);
}
.dir-sf-icon { color: var(--dir-gray-light); display: flex; }
.dir-sf-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: .62rem 0;
  font-size: .93rem;
  color: var(--dir-dark);
  min-width: 0;
}
.dir-sf-select {
  border: 2px solid var(--dir-border);
  border-radius: 12px;
  background: #fff;
  color: var(--dir-dark);
  font-size: .88rem;
  font-weight: 600;
  padding: .45rem .8rem;
  max-width: 170px;
  cursor: pointer;
  transition: var(--dir-transition);
}
.dir-sf-select:focus { border-color: var(--dir-orange); outline: none; }
.dir-sf-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--dir-grad);
  color: #fff !important;
  border: none;
  border-radius: 12px;
  padding: 0 1.2rem;
  font-weight: 800;
  font-size: .9rem;
  cursor: pointer;
  transition: var(--dir-transition);
  white-space: nowrap;
}
.dir-sf-btn span,
.dir-sf-btn svg { color: #fff !important; }
.dir-sf-btn:hover { filter: brightness(1.06); }
.dir-sf-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: #fff;
  border: 2px solid var(--dir-border);
  border-radius: 12px;
  color: var(--dir-gray);
  font-size: .85rem;
  font-weight: 700;
  padding: 0 .8rem;
  cursor: pointer;
  position: relative;
  transition: var(--dir-transition);
  white-space: nowrap;
}
.dir-sf-filter-toggle.active {
  border-color: var(--dir-orange);
  color: var(--dir-orange);
}
.dir-filter-badge {
  background: var(--dir-orange);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  min-width: 17px;
  height: 17px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.dir-mobile-filters {
  display: none;
}
.dir-mobile-filters.show { display: block; animation: dirDropIn .2s ease; }

.dir-chips-outer { overflow: hidden; margin-top: .55rem; position: relative; }
.dir-chips-scroll-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  overflow-x: auto;
  padding-bottom: .3rem;
  scrollbar-width: none;
}
.dir-chips-scroll-row::-webkit-scrollbar { display: none; }
/* Desktop: los chips envuelven en varias líneas (no se salen de pantalla) */
@media (min-width: 768px) {
  .dir-chips-scroll-row {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  /* overflow visible para que el dropdown de características no se recorte */
  .dir-chips-outer { overflow: visible; }
  .dir-chips-sep { display: none; }
}
/* Móvil: los chips envuelven y las características pasan al panel "Filtros" */
@media (max-width: 767.98px) {
  .dir-chips-scroll-row {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .dir-chips-scroll-row .dir-chip-feature,
  .dir-chips-sep { display: none; }
}
/* Chips de características dentro del panel móvil de filtros */
.dir-mf-features {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .15rem 0 .55rem;
}
.dir-mf-label {
  width: 100%;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dir-gray-light);
  margin: .25rem 0 .1rem;
}
.dir-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: #fff;
  border: 1.5px solid var(--dir-border);
  color: var(--dir-gray);
  font-size: .8rem;
  font-weight: 600;
  padding: .4rem .85rem;
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--dir-transition);
  text-decoration: none !important;
}
.dir-chip:hover {
  border-color: var(--dir-orange);
  color: var(--dir-orange);
}
/* Chip de filtro activo: naranja con texto blanco (forzado sobre el tema) */
.dir-chip.dir-chip-active,
.dir-chip.active {
  background: var(--dir-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(242,140,40,.35);
}
.dir-chip.dir-chip-active i,
.dir-chip.dir-chip-active svg,
.dir-chip.active i,
.dir-chip.active svg { color: #fff !important; }
.dir-chip i { font-size: .78rem; }
.dir-chip-near {
  background: var(--dir-orange-soft);
  border-color: rgba(242,140,40,.45);
  color: var(--dir-orange-dark) !important;
  font-weight: 700;
}
.dir-chip-near:hover {
  background: var(--dir-orange);
  border-color: var(--dir-orange);
  color: #fff !important;
}
.dir-chip-near:hover svg { color: #fff !important; }
.dir-chips-sep {
  width: 1.5px;
  height: 22px;
  background: var(--dir-border);
  flex-shrink: 0;
}

/* ── Dropdown de características (listado desktop) ── */
.dir-lf-wrap { position: relative; }
.dir-lf-count {
  background: #fff;
  color: var(--dir-orange-dark);
  font-size: .68rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.dir-lf-btn:not(.dir-chip-active) .dir-lf-count {
  background: var(--dir-orange);
  color: #fff;
}
.dir-lf-dd {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  width: min(560px, calc(100vw - 3rem));
  max-height: min(70vh, 460px);
  display: none;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--dir-border);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(29,28,41,.22);
  z-index: 1030;
  padding: .9rem;
}
.dir-lf-dd.show { display: flex; animation: dirDropIn .18s ease; }
.dir-lf-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  flex: 1;
  overflow-y: auto;
  padding-bottom: .25rem;
}
.dir-lf-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--dir-light);
  border: 1.5px solid var(--dir-border);
  color: var(--dir-gray);
  font-size: .82rem;
  font-weight: 600;
  padding: .42rem .9rem;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--dir-transition);
}
.dir-lf-item i { color: var(--dir-orange); font-size: .8rem; }
.dir-lf-item:hover {
  border-color: var(--dir-orange);
  color: var(--dir-orange-dark);
  background: var(--dir-orange-soft);
}
.dir-lf-item.active {
  background: var(--dir-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.dir-lf-item.active i,
.dir-lf-item.active span { color: #fff !important; }
.dir-lf-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid var(--dir-border);
  flex-shrink: 0;
  background: #fff;
}
.dir-lf-clear {
  background: transparent;
  border: none;
  color: var(--dir-gray);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.dir-lf-clear:hover { color: var(--dir-red); }
.dir-lf-apply { padding: .5rem 1.4rem; font-size: .88rem; }
.dir-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .45rem 0 .35rem;
  flex-wrap: wrap;
}
.dir-results-count { font-size: .84rem; color: var(--dir-gray); }
.dir-open-indicator { color: var(--dir-green); font-weight: 700; }
.dir-sort-pills {
  display: flex;
  align-items: center;
  gap: .3rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.dir-sort-pills::-webkit-scrollbar { display: none; }
.dir-sort-label { font-size: .8rem; color: var(--dir-gray-light); font-weight: 600; }
.dir-sort-btn {
  background: transparent;
  border: none;
  color: var(--dir-gray);
  font-size: .8rem;
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--dir-transition);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.dir-sort-btn i { font-size: .74rem; }
.dir-sort-btn:hover { color: var(--dir-orange); background: var(--dir-orange-soft); }
.dir-sort-btn.active {
  background: var(--dir-grad) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(242,140,40,.3);
}
.dir-sort-btn.active i { color: #fff !important; }
.dir-listing-body { padding: 1.8rem 0 3.5rem; }

/* Paginación */
.dir-pagination .page-link {
  border-radius: 10px !important;
  border: 1.5px solid var(--dir-border);
  color: var(--dir-dark);
  font-weight: 700;
  min-width: 38px;
  text-align: center;
  transition: var(--dir-transition);
}
.dir-pagination .page-link:hover {
  border-color: var(--dir-orange);
  color: var(--dir-orange);
  background: var(--dir-orange-soft);
}
.dir-pagination .page-item.active .page-link {
  background: var(--dir-orange);
  border-color: var(--dir-orange);
  color: #fff;
}
.dir-pagination .page-item.disabled .page-link {
  color: var(--dir-gray-light);
  background: transparent;
}

/* Estado vacío */
.dir-empty-state {
  text-align: center;
  padding: 3.5rem 1rem;
}
.dir-empty-state h3 {
  font-weight: 800;
  color: var(--dir-dark);
  font-size: 1.25rem;
}
.dir-empty-icon {
  width: 86px;
  height: 86px;
  margin: 0 auto 1.2rem;
  border-radius: 26px;
  background: var(--dir-orange-soft);
  color: var(--dir-orange) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.dir-empty-icon i { font-size: 2.2rem; color: var(--dir-orange) !important; }
.dir-empty-icon-pulse { animation: dirBreath 2.4s ease-in-out infinite; }
@keyframes dirBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* ════════════════════════════════════════════════════════════
   CERCA DE MÍ
   ════════════════════════════════════════════════════════════ */
.dir-near-hero {
  position: relative;
  padding: 2.6rem 0 2.2rem;
  overflow: hidden;
  isolation: isolate;
}
.dir-near-hero-content {
  position: relative;
  text-align: center;
  color: #fff;
}
.dir-near-title {
  font-size: clamp(1.8rem, 1.4rem + 2.4vw, 2.7rem);
  font-weight: 900;
  color: #fff !important;
  letter-spacing: -.02em;
  margin-bottom: .5rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.dir-near-sub {
  color: rgba(255,255,255,.78) !important;
  max-width: 520px;
  margin: 0 auto 1.4rem;
  font-size: .98rem;
}
.dir-geo-status { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.dir-geo-btn { font-size: 1.02rem; padding: .85rem 2rem; }
.dir-geo-hint {
  color: rgba(255,255,255,.62) !important;
  font-size: .78rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.dir-radius-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.dir-radius-label {
  color: rgba(255,255,255,.7) !important;
  font-size: .84rem;
  font-weight: 700;
}
.dir-radius-chip {
  background: rgba(255,255,255,.10);
  border: 1.5px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  padding: .35rem .9rem;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--dir-transition);
}
.dir-radius-chip:hover { border-color: var(--dir-orange); color: var(--dir-orange); }
.dir-radius-chip.active {
  background: var(--dir-grad);
  border-color: transparent;
  color: #fff;
}
.dir-geo-message {
  border-radius: var(--dir-radius-sm);
  padding: .9rem 1.2rem;
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.dir-geo-message.error {
  background: #fdecec;
  color: #b23b3b;
  border: 1px solid #f5c9c9;
}
.dir-geo-message.info {
  background: var(--dir-orange-soft);
  color: var(--dir-orange-dark);
  border: 1px solid rgba(242,140,40,.3);
}

/* Skeletons */
.dir-skel-card {
  background: #fff;
  border-radius: var(--dir-radius);
  border: 1px solid var(--dir-border);
  overflow: hidden;
}
.dir-skel {
  position: relative;
  overflow: hidden;
  background: #ededf2;
}
.dir-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: dirShimmer 1.4s infinite;
}
@keyframes dirShimmer {
  to { transform: translateX(100%); }
}
.dir-skel-media { height: 140px; }
.dir-skel-body  { padding: 1rem; display: flex; flex-direction: column; gap: .55rem; }
.dir-skel-line  { height: 12px; border-radius: 6px; }

/* ════════════════════════════════════════════════════════════
   GUARDADOS
   ════════════════════════════════════════════════════════════ */
.dir-saved-hero {
  background: var(--dir-grad-dark);
  padding: 2.4rem 0 2rem;
  text-align: center;
  color: #fff;
}
.dir-saved-title {
  font-size: clamp(1.8rem, 1.4rem + 2.4vw, 2.7rem);
  font-weight: 900;
  color: #fff !important;
  letter-spacing: -.02em;
  margin-bottom: .3rem;
}
.dir-saved-sub { color: rgba(255,255,255,.78) !important; margin: 0; }
.dir-saved-sub strong { color: #ffc88f !important; }

/* ════════════════════════════════════════════════════════════
   FICHA DE NEGOCIO
   ════════════════════════════════════════════════════════════ */
.dir-detail-hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.dir-detail-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.dir-detail-banner-placeholder {
  position: absolute;
  inset: 0;
  background: var(--dir-grad-dark);
  z-index: -2;
}
.dir-detail-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23,22,33,.92) 0%, rgba(23,22,33,.45) 55%, rgba(23,22,33,.25) 100%);
  z-index: -1;
}
.dir-detail-hero-content {
  display: flex;
  align-items: flex-end;
  gap: 1.3rem;
  padding: 4.2rem 1rem 1.6rem;
  flex-wrap: wrap;
}
.dir-detail-logo-wrap { flex-shrink: 0; }
.dir-detail-logo,
.dir-detail-logo-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  border: 4px solid rgba(255,255,255,.92);
  background: #fff;
  object-fit: cover;
  box-shadow: var(--dir-shadow-lg);
}
.dir-detail-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dir-gray-light);
}
.dir-detail-hero-info { flex: 1; min-width: 250px; }
.dir-detail-status-row { margin-bottom: .45rem; }
.dir-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 700;
  padding: .35rem .95rem;
  border-radius: 50px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dir-status-open    { background: #1fb867; color: #fff !important; box-shadow: 0 4px 14px rgba(31,184,103,.4); }
.dir-status-closed  { background: #e54f4f; color: #fff !important; box-shadow: 0 4px 14px rgba(229,79,79,.4); }
.dir-status-unknown { background: rgba(255,255,255,.2); color: #fff !important; border: 1px solid rgba(255,255,255,.3); }
.dir-status-badge i, .dir-status-badge .dir-pulse-dot { color: #fff !important; background: #fff; }
.dir-status-unknown .dir-pulse-dot { background: rgba(255,255,255,.7); }
.dir-detail-name {
  color: #fff !important;
  font-size: clamp(1.5rem, 1.2rem + 2.2vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: .55rem;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.dir-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .8rem;
}
.dir-detail-meta .dir-tag-category { background: rgba(242,140,40,.9); color: #fff !important; }
.dir-detail-meta .dir-tag-zone     { background: rgba(255,255,255,.16); color: #fff !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dir-detail-metrics {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}
.dir-detail-rating { display: inline-flex; align-items: center; }
.dir-like-btn-hero,
.dir-save-btn-hero {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(255,255,255,.16);
  border: 1.5px solid rgba(255,255,255,.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff !important;
  font-size: .86rem;
  font-weight: 700;
  padding: .5rem 1.1rem;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--dir-transition);
}
.dir-like-btn-hero span, .dir-like-btn-hero i, .dir-like-btn-hero svg,
.dir-save-btn-hero span, .dir-save-btn-hero svg { color: #fff !important; }
.dir-like-btn-hero:hover,
.dir-save-btn-hero:hover { background: rgba(255,255,255,.28); }
.dir-like-btn-hero.dir-liked {
  background: rgba(229,79,79,.85);
  border-color: transparent;
}
.dir-like-btn-hero.dir-liked i { animation: dirHeartPop .4s ease; }
.dir-save-btn-hero.dir-saved {
  background: var(--dir-orange);
  border-color: transparent;
}
.dir-save-btn-hero.dir-saved svg { fill: currentColor; }
.dir-like-count-hero {
  background: rgba(0,0,0,.25);
  border-radius: 50px;
  padding: .05rem .55rem;
  font-size: .8rem;
}

/* Breadcrumb */
.dir-breadcrumb-bar {
  background: var(--dir-light);
  border-bottom: 1px solid var(--dir-border);
  padding: .5rem 0;
}
/* Breadcrumb moderno: chips con chevrones, sin números de lista */
.dir-breadcrumb {
  font-size: .8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem;
  margin: 0;
  padding: 0;
  list-style: none !important;
  background: transparent;
}
.dir-breadcrumb li,
.dir-breadcrumb .breadcrumb-item {
  list-style: none !important;
  display: inline-flex;
  align-items: center;
}
.dir-breadcrumb li::marker { content: none; }
/* Separador chevron propio */
.dir-breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.dir-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: '›' !important;
  color: var(--dir-gray-light);
  font-size: 1rem;
  font-weight: 700;
  padding: 0 .45rem;
  float: none;
}
.dir-breadcrumb a {
  color: var(--dir-gray) !important;
  text-decoration: none !important;
  font-weight: 600;
  padding: .15rem .55rem;
  border-radius: 50px;
  transition: var(--dir-transition);
}
.dir-breadcrumb a:hover {
  color: var(--dir-orange-dark) !important;
  background: var(--dir-orange-soft);
}
.dir-breadcrumb .active {
  color: var(--dir-orange-dark) !important;
  font-weight: 800;
  background: var(--dir-orange-soft);
  padding: .15rem .65rem;
  border-radius: 50px;
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* CTA móvil sticky inferior */
.dir-mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  display: flex;
  gap: .55rem;
  padding: .65rem .9rem calc(.65rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--dir-border);
  box-shadow: 0 -6px 24px rgba(29,28,41,.10);
}
.dir-mcta-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: 14px;
  padding: .72rem .4rem;
  font-weight: 800;
  font-size: .9rem;
  text-decoration: none !important;
  transition: var(--dir-transition);
}
.dir-mcta-btn:active { transform: scale(.97); }
.dir-mcta-wa   { background: var(--dir-wa) !important;    color: #fff !important; }
.dir-mcta-call { background: var(--dir-dark) !important;  color: #fff !important; }
.dir-mcta-maps { background: var(--dir-orange) !important; color: #fff !important; }
.dir-mcta-btn i, .dir-mcta-btn span { color: #fff !important; }
body.dir-has-mobile-cta { padding-bottom: 76px; }

/* FAB WhatsApp (desktop) */
.dir-wa-fab {
  position: fixed;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 1040;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--dir-wa);
  color: #fff !important;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  text-decoration: none !important;
  box-shadow: 0 8px 28px rgba(37,211,102,.45);
  transition: var(--dir-transition);
}
.dir-wa-fab:hover { transform: scale(1.08); background: var(--dir-wa-dark); }
.dir-wa-fab-tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--dir-dark);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  padding: .35rem .8rem;
  border-radius: 50px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: var(--dir-transition);
}
.dir-wa-fab:hover .dir-wa-fab-tip { opacity: 1; }

/* Contenedor del detalle */
.dir-detail-container { padding: 2rem 1rem 3rem; }
.dir-sticky-sidebar { position: sticky; top: 84px; }

/* Tabs */
.dir-detail-tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 2px solid var(--dir-border);
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  margin-bottom: 1.4rem;
}
.dir-detail-tabs::-webkit-scrollbar { display: none; }
.dir-detail-tabs .nav-link {
  color: var(--dir-gray);
  font-weight: 700;
  font-size: .92rem;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: .7rem 1rem;
  white-space: nowrap;
  background: transparent;
  transition: var(--dir-transition);
}
.dir-detail-tabs .nav-link:hover { color: var(--dir-orange); }
.dir-detail-tabs .nav-link.active {
  color: var(--dir-orange);
  border-bottom-color: var(--dir-orange);
  background: transparent;
}
.dir-tab-badge {
  background: var(--dir-orange-soft);
  color: var(--dir-orange-dark);
  font-size: .7rem;
  font-weight: 800;
  padding: .1rem .5rem;
  border-radius: 50px;
  margin-left: .25rem;
}
.dir-detail-tab-content { min-height: 200px; }
.dir-description { line-height: 1.7; color: var(--dir-gray); }
.dir-short-desc  { font-size: 1.02rem; color: var(--dir-gray); line-height: 1.6; }

.dir-about-features {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.dir-feat-chip-large {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #fff;
  border: 1.5px solid var(--dir-border);
  color: var(--dir-dark);
  font-size: .85rem;
  font-weight: 600;
  padding: .45rem .95rem;
  border-radius: 50px;
}

/* Características */
.dir-feature-group { margin-bottom: 1.6rem; }
.dir-feature-group-title {
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dir-gray-light);
  margin-bottom: .8rem;
}
.dir-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .6rem;
}
.dir-feature-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  background: #fff;
  border: 1px solid var(--dir-border);
  border-radius: 12px;
  padding: .6rem .8rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--dir-dark);
  transition: var(--dir-transition);
}
.dir-feature-item:hover { border-color: rgba(242,140,40,.4); box-shadow: var(--dir-shadow-sm); }
.dir-feature-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--dir-orange-soft);
  color: var(--dir-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Horarios */
.dir-schedule-now {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  border-radius: 50px;
  font-size: .9rem;
}
.dir-schedule-now.dir-status-open    { background: #15803d !important; color: #fff !important; border: none; }
.dir-schedule-now.dir-status-closed  { background: #e54f4f !important; color: #fff !important; border: none; }
.dir-schedule-now.dir-status-unknown { background: var(--dir-gray) !important; color: #fff !important; border: none; }
.dir-schedule-now i, .dir-schedule-now strong { color: #fff !important; }
.dir-schedule-table table { margin: 0; }
.dir-schedule-table td {
  padding: .65rem .8rem;
  vertical-align: middle;
  border-color: var(--dir-border);
  font-size: .92rem;
}
.dir-schedule-today { background: var(--dir-orange-soft); }
.dir-schedule-day { font-weight: 600; color: var(--dir-dark); }
.dir-today-badge {
  background: var(--dir-orange);
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  padding: .12rem .55rem;
  border-radius: 50px;
  margin-left: .4rem;
  vertical-align: middle;
}
.dir-schedule-closed { color: var(--dir-red); font-weight: 600; }
.dir-schedule-open   { color: var(--dir-dark); font-weight: 600; }

/* Menú / productos */
.dir-menu-category {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dir-dark);
  margin: 1.4rem 0 .7rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--dir-orange-soft);
}
.dir-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--dir-border);
  border-radius: 14px;
  padding: .85rem 1rem;
  margin-bottom: .6rem;
  transition: var(--dir-transition);
}
.dir-menu-item:hover { box-shadow: var(--dir-shadow-sm); border-color: rgba(242,140,40,.35); }
.dir-menu-left { display: flex; gap: .8rem; align-items: flex-start; min-width: 0; flex: 1; }
.dir-menu-text { min-width: 0; }
.dir-menu-img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.dir-menu-name {
  font-size: .98rem;
  font-weight: 700;
  color: var(--dir-dark) !important;
  margin: 0 0 .25rem;
}
.dir-menu-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .3rem; }
.dir-menu-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .66rem;
  font-weight: 800;
  padding: .16rem .6rem;
  border-radius: 50px;
}
.dir-tag-specialty { background: #fff0e3; color: #d97408; }
.dir-tag-main      { background: #eef0ff; color: #5a4fd6; }
.dir-menu-desc { font-size: .82rem; margin: 0 0 .4rem; color: var(--dir-gray); }
/* Botón votar platillo */
.dir-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--dir-light);
  border: 1.5px solid var(--dir-border);
  color: var(--dir-gray);
  font-size: .78rem;
  font-weight: 800;
  padding: .32rem .8rem;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--dir-transition);
}
.dir-vote-btn i { color: var(--dir-gray-light); transition: color .2s ease; }
.dir-vote-btn:hover { border-color: var(--dir-orange); color: var(--dir-orange-dark); }
.dir-vote-btn:hover i { color: var(--dir-orange); }
.dir-vote-btn.dir-voted {
  background: var(--dir-grad);
  border-color: transparent;
  color: #fff;
}
.dir-vote-btn.dir-voted i { color: #fff; animation: dirHeartPop .4s ease; }
.dir-vote-count {
  background: rgba(0,0,0,.08);
  border-radius: 50px;
  padding: 0 .5rem;
  min-width: 20px;
  text-align: center;
}
.dir-vote-btn.dir-voted .dir-vote-count { background: rgba(255,255,255,.28); }
/* Ranking de platillos */
.dir-ranking {
  background: linear-gradient(135deg, #fff7ee, #fff);
  border: 1.5px solid rgba(242,140,40,.3);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.dir-ranking-title {
  font-size: .98rem;
  font-weight: 800;
  color: var(--dir-dark);
  margin: 0 0 .7rem;
}
.dir-ranking-title .fa { color: #e0a400; }
.dir-ranking-list { display: flex; flex-direction: column; gap: .5rem; }
.dir-ranking-item { display: flex; align-items: center; gap: .7rem; }
.dir-ranking-medal {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: .82rem;
  color: #fff;
  flex-shrink: 0;
}
.dir-medal-1 { background: linear-gradient(135deg, #f6c945, #e0a400); }
.dir-medal-2 { background: linear-gradient(135deg, #c7ccd3, #9aa1ab); }
.dir-medal-3 { background: linear-gradient(135deg, #e0a878, #c47a45); }
.dir-ranking-img { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.dir-ranking-info { display: flex; flex-direction: column; min-width: 0; }
.dir-ranking-info strong { font-size: .9rem; color: var(--dir-dark); }
.dir-ranking-votes { font-size: .76rem; color: var(--dir-orange-dark); font-weight: 700; }
.dir-ranking-votes .fa { color: #e0552b; }
.dir-menu-hint {
  font-size: .8rem;
  color: var(--dir-gray);
  background: var(--dir-light);
  border-radius: 10px;
  padding: .55rem .8rem;
  margin-bottom: 1rem;
}
.dir-menu-price {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--dir-orange);
  white-space: nowrap;
}
/* Cambio de precio (opcional por producto) */
.dir-menu-price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .15rem;
  flex-shrink: 0;
}
.dir-price-old {
  font-size: .78rem;
  color: var(--dir-gray-light);
  text-decoration: line-through;
  white-space: nowrap;
}
.dir-price-diff {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .7rem;
  font-weight: 800;
  padding: .14rem .55rem;
  border-radius: 50px;
  white-space: nowrap;
}
.dir-price-diff i { font-size: .62rem; }
.dir-price-up {
  background: #fdecec;
  color: #c0392b !important;
  border: 1px solid #f5c9c9;
}
.dir-price-down {
  background: #e7f8ef;
  color: #15803d !important;
  border: 1px solid #b9ecd1;
}

/* Galería */
.dir-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .6rem;
}
.dir-gallery-item { border-radius: 12px; overflow: hidden; }
.dir-gallery-link {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
}
.dir-gallery-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.dir-gallery-link:hover .dir-gallery-thumb { transform: scale(1.07); }
.dir-gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(29,28,41,.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  opacity: 0;
  transition: var(--dir-transition);
}
.dir-gallery-link:hover .dir-gallery-overlay { opacity: 1; }

/* Reseñas */
.dir-rating-big {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}
.dir-rating-number {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--dir-dark);
  line-height: 1;
}
.dir-stars-big { font-size: 1.15rem; display: inline-flex; gap: 2px; }
.dir-rate-form-wrap {
  background: #fff;
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius);
  padding: 1.4rem;
  box-shadow: var(--dir-shadow-sm);
}
.dir-rate-title { font-size: 1.1rem; font-weight: 800; color: var(--dir-dark); margin-bottom: .2rem; }
.dir-interactive-stars {
  display: flex;
  gap: .3rem;
  font-size: 1.9rem;
  cursor: pointer;
  margin: .5rem 0;
}
.dir-star-input { color: #d9d9e3; transition: color .15s ease, transform .15s ease; }
.dir-star-input.hovered,
.dir-star-input.active { color: var(--dir-orange); }
.dir-star-input:hover { transform: scale(1.15); }
.dir-comment-locked {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  background: var(--dir-light);
  border: 1.5px dashed var(--dir-border);
  border-radius: 12px;
  padding: .8rem 1rem;
  font-size: .86rem;
  color: var(--dir-gray);
}
.dir-comment-locked i { color: var(--dir-orange); }
.dir-comment-login-btn {
  background: transparent;
  border: none;
  color: var(--dir-orange);
  font-weight: 800;
  font-size: .86rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.dir-already-rated {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #e7f8ef;
  border: 1px solid #b9ecd1;
  color: #15803d;
  border-radius: 12px;
  padding: .9rem 1.2rem;
  font-weight: 700;
}
#dir-rating-msg.error   { color: var(--dir-red);  font-weight: 600; font-size: .88rem; }
#dir-rating-msg.success { color: #15803d;          font-weight: 600; font-size: .88rem; }
.dir-review-card {
  background: #fff;
  border: 1px solid var(--dir-border);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: .7rem;
  transition: var(--dir-transition);
}
.dir-review-card:hover { box-shadow: var(--dir-shadow-sm); }
.dir-review-header {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .45rem;
}
.dir-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dir-grad);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dir-review-meta strong { font-size: .92rem; color: var(--dir-dark); }
.dir-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: var(--dir-green);
  font-size: .72rem;
  font-weight: 700;
  margin-left: .35rem;
}
.dir-review-stars { font-size: .76rem; }
.dir-review-date  { font-size: .76rem; }
.dir-review-text  { font-size: .9rem; color: var(--dir-gray); line-height: 1.6; margin: 0; }

/* Sidebar de contacto */
.dir-contact-card {
  background: #fff;
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius);
  padding: 1.4rem;
  box-shadow: var(--dir-shadow-sm);
}
.dir-contact-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dir-dark);
  margin-bottom: 1rem;
}
.dir-contact-subtitle {
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dir-gray-light);
}
.dir-action-buttons {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.1rem;
}
.dir-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border-radius: 12px;
  padding: .72rem 1rem;
  font-weight: 800;
  font-size: .92rem;
  text-decoration: none !important;
  transition: var(--dir-transition);
}
.dir-action-btn:hover { transform: translateY(-2px); box-shadow: var(--dir-shadow); }
.dir-action-whatsapp { background: var(--dir-wa) !important;   color: #fff !important; }
.dir-action-whatsapp i, .dir-action-whatsapp span { color: #fff !important; }
.dir-action-call     { background: var(--dir-dark) !important; color: #fff !important; }
.dir-action-call i, .dir-action-call span { color: #fff !important; }
.dir-action-maps     { background: var(--dir-orange) !important; color: #fff !important; }
.dir-action-maps i, .dir-action-maps span { color: #fff !important; }
.dir-contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.dir-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .5rem 0;
  border-bottom: 1px dashed var(--dir-border);
  font-size: .88rem;
  color: var(--dir-gray);
  word-break: break-word;
}
.dir-contact-list li:last-child { border-bottom: none; }
.dir-contact-list a { color: var(--dir-dark) !important; text-decoration: none; font-weight: 600; }
.dir-contact-list a:hover { color: var(--dir-orange) !important; }
.dir-contact-icon {
  color: var(--dir-orange);
  width: 18px;
  text-align: center;
  margin-top: .2rem;
  flex-shrink: 0;
}
.dir-quick-schedule {
  background: var(--dir-light);
  border-radius: 12px;
  padding: .85rem 1rem;
}
.dir-status-mini {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 800;
  padding: .18rem .65rem;
  border-radius: 50px;
}
.dir-status-mini i { font-size: .5rem; }
.dir-status-mini.dir-status-open    { background: #15803d !important; color: #fff !important; }
.dir-status-mini.dir-status-closed  { background: #e54f4f !important; color: #fff !important; }
.dir-status-mini.dir-status-unknown { background: var(--dir-gray) !important; color: #fff !important; }
.dir-status-mini i { color: #fff !important; }
.dir-quick-schedule-row {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--dir-gray);
  padding: .24rem 0;
}
.dir-qs-today {
  font-weight: 800;
  color: var(--dir-orange-dark);
}
.dir-qs-day { font-weight: 700; }
.dir-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.dir-like-btn-sidebar,
.dir-save-btn-sidebar {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--dir-border);
  border-radius: 12px;
  padding: .65rem 1rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--dir-dark);
  cursor: pointer;
  transition: var(--dir-transition);
}
.dir-like-btn-sidebar:hover { border-color: var(--dir-red); color: var(--dir-red); }
.dir-like-btn-sidebar.dir-liked {
  background: #fdecec;
  border-color: var(--dir-red);
  color: var(--dir-red);
}
.dir-like-btn-sidebar.dir-liked i { animation: dirHeartPop .4s ease; }
.dir-save-btn-sidebar:hover { border-color: var(--dir-orange); color: var(--dir-orange-dark); }
.dir-save-btn-sidebar.dir-saved {
  background: var(--dir-orange-soft);
  border-color: var(--dir-orange);
  color: var(--dir-orange-dark);
}
.dir-save-btn-sidebar.dir-saved svg { fill: currentColor; }

/* ════════════════════════════════════════════════════════════
   POPUP PROMOCIONAL DEL NEGOCIO (overlay central)
   ════════════════════════════════════════════════════════════ */
.dir-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(23,22,33,.66);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.dir-popup-overlay.show { opacity: 1; pointer-events: auto; }
.dir-popup-box {
  position: relative;
  background: #fff;
  border-radius: var(--dir-radius-lg);
  max-width: 430px;
  width: 100%;
  max-height: 88vh;
  overflow: auto;
  box-shadow: var(--dir-shadow-lg);
  transform: translateY(20px) scale(.96);
  transition: transform .35s cubic-bezier(.34,1.4,.5,1);
}
.dir-popup-overlay.show .dir-popup-box { transform: none; }
.dir-popup-close {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(29,28,41,.55);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--dir-transition);
}
.dir-popup-close:hover { background: var(--dir-dark); transform: rotate(90deg); }
.dir-popup-img { width: 100%; height: auto; display: block; }
.dir-popup-body { padding: 1.4rem; text-align: center; }
.dir-popup-title { font-size: 1.3rem; font-weight: 900; color: var(--dir-dark); margin-bottom: .5rem; }
.dir-popup-content { color: var(--dir-gray); font-size: .92rem; margin-bottom: 1rem; }
.dir-popup-cta { width: 100%; }

/* ════════════════════════════════════════════════════════════
   MODAL DE AUTENTICACIÓN
   ════════════════════════════════════════════════════════════ */
.dir-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 1070;
  background: rgba(23,22,33,.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.dir-auth-overlay.show { opacity: 1; pointer-events: auto; }
.dir-auth-box {
  position: relative;
  background: #fff;
  border-radius: var(--dir-radius-lg);
  max-width: 400px;
  width: 100%;
  padding: 2.2rem 1.8rem 1.6rem;
  text-align: center;
  box-shadow: var(--dir-shadow-lg);
  transform: translateY(22px) scale(.96);
  transition: transform .35s cubic-bezier(.34,1.4,.5,1);
}
.dir-auth-overlay.show .dir-auth-box { transform: none; }
.dir-auth-close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--dir-light);
  color: var(--dir-gray);
  cursor: pointer;
  transition: var(--dir-transition);
}
.dir-auth-close:hover { background: var(--dir-border); transform: rotate(90deg); }
.dir-auth-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 20px;
  background: var(--dir-orange-soft);
  color: var(--dir-orange);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dir-auth-title { font-size: 1.3rem; font-weight: 900; color: var(--dir-dark); margin-bottom: .45rem; }
.dir-auth-sub { color: var(--dir-gray); font-size: .9rem; margin-bottom: 1.3rem; line-height: 1.55; }
.dir-auth-box .dir-btn-google { width: 100%; }
.dir-auth-divider {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: .9rem 0;
  color: var(--dir-gray-light);
  font-size: .8rem;
  font-weight: 700;
}
.dir-auth-divider::before,
.dir-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--dir-border);
}
.dir-auth-alt {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--dir-dark) !important;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none !important;
  border: 2px solid var(--dir-border);
  border-radius: 50px;
  padding: .6rem 1.4rem;
  width: 100%;
  justify-content: center;
  transition: var(--dir-transition);
}
.dir-auth-alt:hover { border-color: var(--dir-orange); color: var(--dir-orange) !important; }
.dir-auth-note {
  margin: 1.1rem 0 0;
  font-size: .78rem;
  color: var(--dir-gray-light);
}

/* ════════════════════════════════════════════════════════════
   BOTTOM NAV MÓVIL (estilo app)
   ════════════════════════════════════════════════════════════ */
.dir-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1041;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: #ffffff;
  border-top: 1px solid var(--dir-border);
  padding: 0 .25rem env(safe-area-inset-bottom);
  box-shadow: 0 -6px 24px rgba(29,28,41,.10);
}
body.dir-has-bottom-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
/* Todos los items idénticos: misma altura, ícono arriba + texto abajo */
.dir-bnav-item,
.dir-bnav-near {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  height: 60px;
  font-size: .66rem;
  font-weight: 700;
  text-decoration: none !important;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color .2s ease;
  color: var(--dir-gray-light) !important;
}
.dir-bnav-item span, .dir-bnav-near span { line-height: 1; }
.dir-bnav-item svg, .dir-bnav-near svg { display: block; }
.dir-bnav-item.active,
.dir-bnav-item.active span,
.dir-bnav-item.active svg,
.dir-bnav-item:hover { color: var(--dir-orange) !important; }
/* "Cerca": ícono en círculo naranja DENTRO de la fila (no sobresale) */
.dir-bnav-near { color: var(--dir-orange-dark) !important; font-weight: 800; }
.dir-bnav-near span { color: var(--dir-orange-dark) !important; }
.dir-bnav-near-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--dir-grad);
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(242,140,40,.5);
  transition: transform .2s ease;
}
.dir-bnav-near-circle svg { color: #fff !important; }
.dir-bnav-near:active .dir-bnav-near-circle { transform: scale(.9); }
.dir-bnav-near.active .dir-bnav-near-circle { box-shadow: 0 4px 14px rgba(242,140,40,.7); }

/* Si hay CTA de negocio + nav, prioriza el CTA */
body.dir-has-mobile-cta .dir-bottom-nav { display: none !important; }

/* ════════════════════════════════════════════════════════════
   CATEGORÍA / ZONA — hero
   ════════════════════════════════════════════════════════════ */
.dir-category-hero {
  position: relative;
  padding: 2.6rem 0;
  overflow: hidden;
  isolation: isolate;
}
.dir-category-hero-content { position: relative; }
.dir-hero-title {
  color: #fff !important;
  font-weight: 900;
  font-size: clamp(1.8rem, 1.4rem + 2.4vw, 2.7rem);
  letter-spacing: -.02em;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.dir-hero-subtitle { color: rgba(255,255,255,.78) !important; max-width: 560px; margin: .4rem auto 0; }
.dir-hero-count { color: rgba(255,255,255,.62) !important; font-size: .9rem; margin: .5rem 0 0; }
.dir-subcategory-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.dir-hero-pill {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--dir-border);
  color: var(--dir-gray) !important;
  font-size: .84rem;
  font-weight: 700;
  padding: .42rem 1.05rem;
  border-radius: 50px;
  text-decoration: none !important;
  transition: var(--dir-transition);
}
.dir-hero-pill:hover,
.dir-hero-pill.active {
  background: var(--dir-orange);
  border-color: var(--dir-orange);
  color: #fff !important;
}

/* ════════════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════════════ */
.dir-toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translate(-50%, 20px);
  z-index: 1080;
  background: var(--dir-dark);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  padding: .7rem 1.4rem;
  border-radius: 50px;
  box-shadow: var(--dir-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  max-width: calc(100vw - 2rem);
  text-align: center;
}
.dir-toast.show { opacity: 1; transform: translate(-50%, 0); }
.dir-toast.success { background: #15803d; }
.dir-toast.error   { background: #b23b3b; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .dir-sticky-sidebar { position: static; }
  .dir-detail-hero { min-height: 270px; }
}

@media (max-width: 767.98px) {
  .dir-section { padding: 2.2rem 0; }
  .dir-search-widget { padding: .75rem; border-radius: var(--dir-radius); }
  .dir-sw-btn { padding: 0 1rem; }
  .dir-sw-btn-text { display: none; }
  .dir-hero-v2 { padding: 2.2rem 0 2.6rem; }
  .dir-hero-stats { gap: 1.1rem; margin-top: 1.5rem; }
  .dir-hero-stat-num { font-size: 1.35rem; }
  .dir-card-media { height: 120px; }
  .dir-card-body { padding: 1.7rem .75rem .75rem; }
  .dir-card-title { font-size: .92rem; }
  .dir-card-desc { display: none; }
  .dir-card-features { display: none; }
  .dir-card-logo,
  .dir-card-logo-placeholder { width: 44px; height: 44px; border-radius: 12px; }
  .dir-detail-hero-content { padding-top: 3.2rem; gap: .9rem; }
  .dir-detail-logo,
  .dir-detail-logo-placeholder { width: 74px; height: 74px; border-radius: 18px; }
  .dir-detail-container { padding: 1.4rem .25rem 2.2rem; }
  .dir-rate-form-wrap { padding: 1rem; }
  .dir-interactive-stars { font-size: 1.65rem; }
  .dir-adpop {
    right: .75rem;
    bottom: calc(78px + env(safe-area-inset-bottom));
    width: min(270px, calc(100vw - 1.5rem));
  }
  body.dir-has-mobile-cta .dir-adpop { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .dir-near-cta { padding: 1.3rem 1.2rem; gap: 1rem; }
  .dir-near-cta-btn { width: 100%; }
  .dir-toast { bottom: 86px; }
}

@media (max-width: 575.98px) {
  .dir-sf-btn span { display: none; }
  .dir-sf-btn { padding: 0 .85rem; }
  .dir-sf-btn svg { display: inline !important; }
  .dir-sort-bar { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .dir-sort-pills { width: 100%; }
}

/* ── Accesibilidad: reduce motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dir-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .dir-hero-blob,
  .dir-open-dot,
  .dir-pulse-dot,
  .dir-empty-icon-pulse,
  .dir-skel::after { animation: none !important; }
  .dir-card,
  .dir-card-banner,
  .dir-zone-img,
  .dir-gallery-thumb { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════
   FEEDBACK / SUGERENCIAS (botón flotante + modal)
   ════════════════════════════════════════════════════════════ */
.dir-feedback-fab {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 1044;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--dir-dark);
  color: #fff !important;
  border: none;
  padding: .7rem 1.1rem;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(29,28,41,.32);
  transition: var(--dir-transition);
}
.dir-feedback-fab svg,
.dir-feedback-fab span,
.dir-feedback-fab-label { color: #fff !important; }
.dir-feedback-fab:hover { background: var(--dir-orange); transform: translateY(-2px); }
.dir-feedback-fab:hover svg,
.dir-feedback-fab:hover span { color: #fff !important; }
/* En móvil, sube por encima del bottom-nav y se vuelve compacto */
@media (max-width: 767.98px) {
  .dir-feedback-fab {
    left: .75rem;
    bottom: calc(72px + env(safe-area-inset-bottom));
    padding: .6rem;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    justify-content: center;
  }
  .dir-feedback-fab-label { display: none; }
  body.dir-has-mobile-cta .dir-feedback-fab { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

.dir-fb-overlay {
  position: fixed;
  inset: 0;
  z-index: 1075;
  background: rgba(23,22,33,.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.dir-fb-overlay.show { opacity: 1; pointer-events: auto; }
.dir-fb-box {
  position: relative;
  background: #fff;
  border-radius: var(--dir-radius-lg);
  max-width: 440px;
  width: 100%;
  padding: 2rem 1.7rem 1.6rem;
  text-align: center;
  box-shadow: var(--dir-shadow-lg);
  transform: translateY(22px) scale(.96);
  transition: transform .35s cubic-bezier(.34,1.4,.5,1);
}
.dir-fb-overlay.show .dir-fb-box { transform: none; }
.dir-fb-close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--dir-light);
  color: var(--dir-gray);
  cursor: pointer;
  transition: var(--dir-transition);
}
.dir-fb-close:hover { background: var(--dir-border); transform: rotate(90deg); }
.dir-fb-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  border-radius: 18px;
  background: var(--dir-orange-soft);
  color: var(--dir-orange);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dir-fb-title { font-size: 1.25rem; font-weight: 900; color: var(--dir-dark) !important; margin-bottom: .4rem; }
.dir-fb-sub { color: var(--dir-gray); font-size: .9rem; margin-bottom: 1.2rem; line-height: 1.55; }
.dir-fb-textarea, .dir-fb-input {
  width: 100%;
  border: 2px solid var(--dir-border);
  border-radius: 12px;
  padding: .7rem .9rem;
  font-size: .92rem;
  color: var(--dir-dark);
  background: var(--dir-light);
  transition: var(--dir-transition);
  margin-bottom: .7rem;
  resize: vertical;
}
.dir-fb-textarea:focus, .dir-fb-input:focus {
  border-color: var(--dir-orange);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(242,140,40,.12);
  outline: none;
}
.dir-fb-submit { width: 100%; }
.dir-fb-msg { font-size: .88rem; font-weight: 600; margin-bottom: .6rem; }
.dir-fb-msg.error   { color: var(--dir-red); }
.dir-fb-msg.success { color: #15803d; }