/* ════════════════════════════════════════════════════════════════
   MI CIUDAD APP  |  CODIFICANDO  |  Odoo 17 Community
   Rediseño v5 · minimalista moderno · mobile-first · fondo blanco
   Marca: #232333 (navy del logo) · #F28C28 (naranja) · sin degradados
   Scoped con prefijo "dir-"
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Tinta y textos */
  --dir-ink:         #232333;   /* navy del logo — títulos */
  --dir-dark:        #232333;
  --dir-dark-2:      #2b2b3d;
  --dir-dark-3:      #34344a;
  --dir-text:        #43454e;   /* gris oscuro — cuerpo */
  --dir-gray:        #6b6e76;
  --dir-gray-light:  #9a9da6;

  /* Naranja de marca (plano, sin degradados) */
  --dir-orange:      #F28C28;
  --dir-orange-dark: #dd7511;
  --dir-orange-soft: #fef4e9;
  --dir-orange-line: #fbdcbb;

  /* Estados */
  --dir-green:       #1fa963;
  --dir-green-soft:  #e8f7f0;
  --dir-red:         #e05252;
  --dir-red-soft:    #fdeeee;
  --dir-wa:          #25D366;
  --dir-wa-dark:     #1ebe5a;

  /* Superficies */
  --dir-white:       #ffffff;
  --dir-light:       #f8f8fa;
  --dir-border:      #ececf0;
  --dir-border-2:    #e2e2e8;

  /* Sombras suaves y neutras */
  --dir-shadow-sm:   0 1px 4px rgba(35,35,51,.05);
  --dir-shadow:      0 6px 20px rgba(35,35,51,.07);
  --dir-shadow-lg:   0 16px 44px rgba(35,35,51,.12);
  --dir-hover:       0 10px 28px rgba(35,35,51,.10);

  /* Geometría y movimiento */
  --dir-radius-sm:   10px;
  --dir-radius:      16px;
  --dir-radius-lg:   22px;
  --dir-transition:  all .25s cubic-bezier(.4,0,.2,1);
  --dir-spring:      cubic-bezier(.34,1.56,.64,1);
  --dir-font-bump:   clamp(1rem, .95rem + .3vw, 1.1rem);
}

/* ── Base ───────────────────────────────────────────────────── */
.dir-page {
  overflow-x: clip;
  background: var(--dir-white);
  color: var(--dir-text);
}
.dir-page h1, .dir-page h2, .dir-page h3,
.dir-page h4, .dir-page h5 { color: var(--dir-ink); }
.dir-accent   { color: var(--dir-orange) !important; }
.dir-bg-light { background: var(--dir-light); }

/* Accesibilidad: respeta usuarios que piden menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .dir-page *, .dir-page *::before, .dir-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Animaciones base ───────────────────────────────────────── */
@keyframes dirFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dirDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes dirPulse {
  0%   { box-shadow: 0 0 0 0 rgba(31,169,99,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(31,169,99,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,169,99,0); }
}
@keyframes dirPulseOrange {
  0%   { box-shadow: 0 0 0 0 rgba(242,140,40,.40); }
  70%  { box-shadow: 0 0 0 9px rgba(242,140,40,0); }
  100% { box-shadow: 0 0 0 0 rgba(242,140,40,0); }
}
@keyframes dirHeartPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  60%  { transform: scale(.92); }
  100% { transform: scale(1); }
}
@keyframes dirBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes dirFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-12px); }
}
@keyframes dirShimmer {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@keyframes dirGradShift { /* conservada por compatibilidad (sin uso) */
  from { background-position: 0 0; } to { background-position: 100% 0; }
}
@keyframes dirWiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}
@keyframes dirBounce {
  0%, 100% { transform: translateY(0); }
  35%      { transform: translateY(-7px); }
  55%      { transform: translateY(0); }
  70%      { transform: translateY(-3px); }
  85%      { transform: translateY(0); }
}
@keyframes dirBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .2; }
}

/* Aparición al hacer scroll (JS añade .dir-in; stagger vía --dir-d) */
.dir-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease var(--dir-d, 0s),
              transform .55s ease var(--dir-d, 0s);
}
.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-orange);
  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 14px rgba(242,140,40,.28);
}
/* Fondo naranja ⇒ texto, íconos y SVG siempre blancos.
   Selectores reforzados: el tema pinta los .fa de gris con !important,
   así que se necesita mayor especificidad + opacity. */
a.dir-btn-primary i, a.dir-btn-primary i.fa, a.dir-btn-primary .fa,
a.dir-btn-primary svg, a.dir-btn-primary span,
button.dir-btn-primary i, button.dir-btn-primary i.fa, button.dir-btn-primary .fa,
button.dir-btn-primary svg, button.dir-btn-primary span,
.dir-btn-primary i, .dir-btn-primary i.fa, .dir-btn-primary .fa,
.dir-btn-primary svg, .dir-btn-primary span,
.dir-page .dir-btn-primary i, .dir-page .dir-btn-primary .fa,
.dir-page .dir-btn-primary svg, .dir-page .dir-btn-primary span {
  color: #fff !important;
  opacity: 1 !important;
}
.dir-btn-primary:hover {
  background: var(--dir-orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(242,140,40,.34);
  color: #fff !important;
}
.dir-btn-primary:active { transform: translateY(0) scale(.98); }

.dir-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: var(--dir-white);
  color: var(--dir-ink) !important;
  padding: .7rem 1.6rem;
  border-radius: 50px;
  font-weight: 600;
  border: 1.5px solid var(--dir-border-2);
  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);
  transform: translateY(-1px);
}

.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: 1.5px solid var(--dir-border-2);
  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;
}

/* ── Marca (logo + nombre) ──────────────────────────────────── */
.dir-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none !important;
}
.dir-brand-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}
.dir-brand-name {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--dir-ink) !important;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
}
.dir-brand-tag {
  display: inline-block;
  background: var(--dir-orange);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  padding: .18rem .5rem;
  border-radius: 7px;
  margin-left: .35rem;
  vertical-align: 2px;
  letter-spacing: .02em;
}
.dir-hero-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;          /* siempre en una sola línea */
  white-space: nowrap;
  overflow: hidden;
  gap: .4rem;
  margin: .8rem 0 0;
  color: var(--dir-gray-light);
  font-size: clamp(.58rem, 2.3vw, .76rem);
  font-weight: 700;
  letter-spacing: .01em;
}
.dir-hero-tagline span { flex-shrink: 0; }
.dir-hero-tagline i { color: var(--dir-orange); margin-right: .18rem; font-size: .9em; }
.dir-hero-tagline .dir-tagline-sep { color: var(--dir-border-2); }

/* ── 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: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dir-orange);
  margin-bottom: .2rem;
}
.dir-section-title {
  font-size: clamp(1.35rem, 1.2rem + 1vw, 1.85rem);
  font-weight: 800;
  color: var(--dir-ink) !important;
  margin: 0;
  letter-spacing: -.015em;
  position: relative;
  padding-bottom: .45rem;
}
.dir-section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 4px;
  border-radius: 4px;
  background: var(--dir-orange);
}
/* Ícono SVG del título de sección */
.dir-title-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--dir-orange-soft);
  color: var(--dir-orange);
  margin-right: .35rem;
  vertical-align: -9px;
}
.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; color: var(--dir-orange-dark) !important; }

/* ════════════════════════════════════════════════════════════
   HERO (homepage) — blanco, minimalista, estilo app
   ════════════════════════════════════════════════════════════ */
.dir-hero-v2 {
  position: relative;
  padding: 2.2rem 0 2.6rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--dir-white);
  border-bottom: 1px solid var(--dir-border);
}
.dir-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.dir-hero-bg-gradient { display: none; }           /* sin degradados */
.dir-hero-bg-dots {
  position: absolute;
  top: 0; right: 0;
  width: 260px; height: 200px;
  background-image: radial-gradient(var(--dir-border-2) 1.5px, transparent 1.6px);
  background-size: 20px 20px;
  opacity: .8;
  -webkit-mask-image: linear-gradient(215deg, #000 30%, transparent 80%);
  mask-image: linear-gradient(215deg, #000 30%, transparent 80%);
}
/* Formas decorativas planas y sutiles */
.dir-hero-blob {
  position: absolute;
  border-radius: 50%;
  background: var(--dir-orange-soft);
  animation: dirFloat 9s ease-in-out infinite alternate;
}
.dir-blob-1 { width: 300px; height: 300px; top: -160px; left: -140px; }
.dir-blob-2 { width: 190px; height: 190px; bottom: -120px; right: -70px; animation-delay: 2.5s; }
.dir-hero-bg-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed var(--dir-orange-line);
}
.dir-ring-1 { width: 130px; height: 130px; top: 40px; right: 8%; animation: dirFloat 8s ease-in-out infinite alternate; }
.dir-ring-2 { width: 70px; height: 70px; bottom: 30px; left: 6%; animation: dirFloat 7s 1.2s ease-in-out infinite alternate; }

.dir-hero-v2-content { position: relative; text-align: center; }

/* Fila superior: marca + sesión */
.dir-hero-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: 1.6rem;
  text-align: left;
}
.dir-session-pill { display: flex; justify-content: flex-end; }
.dir-session-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--dir-white);
  border: 1.5px solid var(--dir-border-2);
  color: var(--dir-ink);
  font-size: .82rem;
  font-weight: 700;
  padding: .42rem .95rem;
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none !important;
  transition: var(--dir-transition);
  white-space: nowrap;
}
.dir-session-link:hover {
  border-color: var(--dir-orange);
  color: var(--dir-orange);
  background: var(--dir-orange-soft);
}
.dir-session-link svg { color: var(--dir-orange); }

.dir-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--dir-orange-soft);
  border: 1px solid var(--dir-orange-line);
  color: var(--dir-orange-dark);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .35rem .95rem;
  border-radius: 50px;
  margin-bottom: 1rem;
}
.dir-hero-v2-title {
  font-size: clamp(1.7rem, 1.3rem + 2.6vw, 3rem);
  font-weight: 800;
  color: var(--dir-ink);
  letter-spacing: -.02em;
  line-height: 1.16;
  margin-bottom: .55rem;
  animation: dirFadeUp .6s ease both;
}
/* !important: el tema fuerza colores en headings/spans */
.dir-accent-text { color: var(--dir-orange) !important; }
/* Saludo "¡Hola!" naranja con pin de la marca rebotando */
.dir-hero-hello {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--dir-orange) !important;
  position: relative;
}
.dir-hero-hello::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -3px;
  height: 5px;
  border-radius: 5px;
  background: var(--dir-orange-soft);
}
.dir-hello-pin {
  color: var(--dir-orange);
  animation: dirBounce 2.2s ease-in-out infinite;
  filter: drop-shadow(0 4px 6px rgba(242,140,40,.35));
}
.dir-hero-v2-sub {
  font-size: var(--dir-font-bump);
  color: var(--dir-gray);
  max-width: 560px;
  margin: 0 auto 1.7rem;
  animation: dirFadeUp .6s .08s ease both;
}
.dir-hero-highlight {
  color: var(--dir-orange) !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  display: inline !important;
}
@media (min-width: 768px) { .dir-hero-v2-title { white-space: nowrap; } }

/* ── Widget de búsqueda ── */
.dir-search-widget {
  max-width: 680px;
  margin: 0 auto;
  animation: dirFadeUp .6s .14s ease both;
}
.dir-sw-main {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  background: var(--dir-white);
  border: 1.5px solid var(--dir-border-2);
  border-radius: 50px;
  padding: .4rem .4rem .4rem 1.1rem;
  box-shadow: var(--dir-shadow);
  transition: var(--dir-transition);
}
.dir-sw-main:focus-within {
  border-color: var(--dir-orange);
  box-shadow: 0 0 0 4px rgba(242,140,40,.12), var(--dir-shadow);
}
.dir-sw-input-group {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: 1;
  min-width: 0;
}
.dir-sw-icon { color: var(--dir-gray-light); }
.dir-sw-input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: .95rem;
  color: var(--dir-ink);
  padding: .45rem 0;
}
.dir-sw-input::placeholder { color: var(--dir-gray-light); }
.dir-sw-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--dir-orange);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: .92rem;
  padding: .55rem 1.35rem;
  cursor: pointer;
  transition: var(--dir-transition);
  flex-shrink: 0;
}
.dir-sw-btn:hover { background: var(--dir-orange-dark); transform: scale(1.03); }
.dir-sw-btn:active { transform: scale(.97); }

/* Chips de filtros del hero */
.dir-sw-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .9rem;
}
.dir-sw-sep { width: 1px; height: 18px; background: var(--dir-border-2); }
.dir-sw-chip {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  background: var(--dir-white);
  border: 1.5px solid var(--dir-border-2);
  color: var(--dir-text);
  font-size: .82rem;
  font-weight: 700;
  padding: .45rem 1rem;
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none !important;
  transition: var(--dir-transition);
  white-space: nowrap;
}
.dir-sw-chip:hover {
  border-color: var(--dir-orange);
  color: var(--dir-orange-dark);
  background: var(--dir-orange-soft);
  transform: translateY(-1px);
}
/* "Cerca de mí" mientras espera el permiso de ubicación */
.dir-sw-chip-loading, .dir-chip-near:disabled {
  opacity: .65;
  cursor: wait;
  animation: dirPulse 1.4s ease-in-out infinite;
}
/* Regla de oro: fondo naranja ⇒ TODO el contenido en blanco */
.dir-sw-chip.active,
.dir-sw-chip.active span, .dir-sw-chip.active svg, .dir-sw-chip.active i,
.dir-chip.dir-chip-active,
.dir-chip.dir-chip-active span, .dir-chip.dir-chip-active svg,
.dir-chip.dir-chip-active i, .dir-chip.dir-chip-active select,
.dir-sort-btn.active, .dir-sort-btn.active i, .dir-sort-btn.active svg,
.dir-hero-pill.active, .dir-hero-pill:hover {
  color: #fff !important;
}
.dir-sw-chip.active {
  background: var(--dir-orange);
  border-color: var(--dir-orange);
}
.dir-sw-near-chip { color: var(--dir-orange-dark); border-color: var(--dir-orange-line); background: var(--dir-orange-soft); }
.dir-sw-near-chip:hover { background: var(--dir-orange); border-color: var(--dir-orange); color: #fff; }
.dir-open-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dir-green);
  animation: dirPulse 2s infinite;
}
.dir-sw-open-chip.active .dir-open-dot { background: #fff; animation: none; }

/* Dropdowns del buscador */
.dir-sw-filter-wrap { position: relative; }
.dir-sw-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 250px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--dir-white);
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius);
  box-shadow: var(--dir-shadow-lg);
  padding: .45rem;
  z-index: 60;
  text-align: left;
}
.dir-sw-dropdown.show,
.dir-sw-dropdown.open { display: block; animation: dirDropIn .22s ease both; }
.dir-sw-dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .55rem .7rem;
  border-radius: var(--dir-radius-sm);
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  color: var(--dir-text);
  transition: background .15s ease;
}
.dir-sw-dd-item:hover { background: var(--dir-light); }
.dir-sw-dd-item.selected { background: var(--dir-orange-soft); color: var(--dir-orange-dark); }
.dir-dd-main { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.dir-dd-ico {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--dir-light);
  color: var(--dir-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .82rem;
  overflow: hidden;
}
.dir-dd-ico img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.dir-dd-ico .dir-dd-zimg { object-fit: cover; padding: 0; border-radius: 9px; }
.dir-dd-ico .dir-cat-svg { width: 16px; height: 16px; }
.dir-sw-dd-count {
  background: var(--dir-light);
  color: var(--dir-gray);
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  padding: .12rem .55rem;
  flex-shrink: 0;
}
.dir-sw-dd-empty { padding: .8rem; color: var(--dir-gray-light); font-size: .85rem; text-align: center; }
.dir-sw-dd-feat { justify-content: flex-start; }
.dir-sw-dd-feat i { color: var(--dir-orange); width: 18px; text-align: center; }
.dir-sw-dd-feat.selected { background: var(--dir-orange-soft); }
.dir-chip-arrow { color: var(--dir-gray-light); }
.dir-sw-chip[aria-expanded="true"] .dir-chip-arrow { transform: rotate(180deg); }
.dir-sw-cat-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dir-sw-cat-icon { width: 16px; text-align: center; }

/* Tarjeta oscura promocional (estilo app de las capturas) */
.dir-hero-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
  max-width: 680px;
  margin: 1.8rem auto 0;
  background: var(--dir-ink);
  border-radius: var(--dir-radius-lg);
  padding: 1.35rem 1.4rem;
  text-align: left;
  overflow: hidden;
  position: relative;
  box-shadow: 0 14px 34px rgba(35,35,51,.22);
  animation: dirFadeUp .6s .2s ease both;
}
.dir-hero-promo-logo {
  width: 56px;
  height: 56px;
  border-radius: 17px;
  background: #fff;
  padding: 5px;
  object-fit: contain;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  animation: dirFloat 4s ease-in-out infinite alternate;
}
.dir-hero-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--dir-orange);
  color: #fff !important;
  font-size: .78rem;
  font-weight: 800;
  padding: .42rem 1.05rem;
  border-radius: 50px;
  text-decoration: none !important;
  margin-top: .65rem;
  transition: var(--dir-transition);
  box-shadow: 0 4px 12px rgba(242,140,40,.35);
}
.dir-hero-promo-btn:hover {
  background: var(--dir-orange-dark);
  gap: .65rem;
  color: #fff !important;
}
/* Círculo decorativo eliminado a pedido del cliente */
.dir-hero-promo::after { content: none; }
.dir-hero-promo-txt { position: relative; z-index: 1; min-width: 0; }
/* !important: el tema fuerza colores oscuros en p/h y aquí el fondo es navy */
.dir-hero-promo-title {
  color: #fff !important;
  font-size: 1.18rem;
  font-weight: 800;
  margin: 0 0 .2rem;
  letter-spacing: -.01em;
}
.dir-hero-promo-title .dir-accent-text { color: var(--dir-orange) !important; }
.dir-hero-promo-sub {
  color: rgba(255,255,255,.78) !important;
  font-size: .84rem;
  margin: 0;
  max-width: 400px;
}
.dir-hero-promo-ico {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dir-orange);
}

/* Estadísticas — tarjeta compacta de 3 columnas, siempre en una línea */
.dir-hero-stats {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: 520px;
  margin: 1.8rem auto 0;
  background: var(--dir-white);
  border: 1.5px solid var(--dir-border);
  border-radius: var(--dir-radius-lg);
  padding: .85rem .3rem;
  box-shadow: var(--dir-shadow-sm);
  animation: dirFadeUp .6s .26s ease both;
}
.dir-hero-stat { flex: 1; min-width: 0; text-align: center; }
.dir-hero-stat-num {
  display: block;
  font-size: clamp(1.25rem, 4.5vw, 1.55rem);
  font-weight: 800;
  color: var(--dir-orange);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.dir-hero-stat-label {
  display: block;
  font-size: clamp(.58rem, 2.1vw, .72rem);
  color: var(--dir-gray);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dir-hero-stat-sep { width: 1px; align-self: stretch; margin: .15rem 0; background: var(--dir-border-2); flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   TARJETA DE NEGOCIO
   ════════════════════════════════════════════════════════════ */
.dir-card {
  position: relative;
  background: var(--dir-white);
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--dir-shadow-sm);
  transition: transform .28s var(--dir-spring), box-shadow .28s ease, border-color .28s ease;
}
.dir-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--dir-hover);
  border-color: var(--dir-orange-line);
}
.dir-card-cover { position: absolute; inset: 0; z-index: 1; }
.dir-card .dir-card-like, .dir-card .dir-card-wa { position: relative; z-index: 2; }

/* 16:9 con padding-bottom (las imágenes nunca se salen del contenedor,
   aunque el tema fuerce height:auto en <img>) */
.dir-card-media {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  background: var(--dir-light);
  overflow: hidden;
}
.dir-card-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.dir-card:hover .dir-card-banner { transform: scale(1.05); }
.dir-card-banner-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dir-gray-light);
  font-size: 2rem;
  background: var(--dir-light);
}
.dir-card-media-grad {
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to top, rgba(35,35,51,.42), transparent); /* legibilidad de badges sobre foto */
  pointer-events: none;
}
.dir-card-badges {
  position: absolute;
  top: .6rem; left: .6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  z-index: 2;
}
.dir-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 800;
  padding: .24rem .65rem;
  border-radius: 50px;
  letter-spacing: .02em;
  position: relative;
  overflow: hidden;
}
/* !important: el texto SIEMPRE blanco sobre naranja/verde/navy,
   aunque el tema fuerce otros colores */
.dir-badge-featured {
  background: var(--dir-orange);
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(242,140,40,.38);
}
/* Destello sutil que recorre el badge Destacado */
.dir-badge-featured::after {
  content: '';
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: rgba(255,255,255,.35);
  transform: skewX(-20deg);
  animation: dirShineSweep 3.2s ease-in-out infinite;
}
@keyframes dirShineSweep {
  0%, 55%  { left: -70%; }
  75%, 100% { left: 140%; }
}
.dir-badge-open {
  background: var(--dir-green);
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(31,169,99,.32);
}
.dir-badge-closed { background: rgba(35,35,51,.72); color: #fff !important; }
/* Punto de "Abierto": siempre parpadeando + onda expansiva */
.dir-pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: dirPulse 2s infinite, dirBlink 1.3s ease-in-out infinite;
}

/* Selector doble para ganar a reglas genéricas del tema sobre <button> */
.dir-card .dir-card-save,
.dir-card-save {
  position: absolute;
  top: .6rem; right: .6rem;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.95);
  color: var(--dir-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--dir-shadow-sm);
  transition: var(--dir-transition);
  z-index: 3;
}
.dir-card .dir-card-save:hover { color: var(--dir-orange); transform: scale(1.12); }
.dir-card .dir-card-save.dir-saved { background: var(--dir-orange); color: #fff; }
.dir-card .dir-card-save.dir-saved svg { fill: currentColor; }

/* Distancia: fondo naranja con texto blanco forzado (antes se perdía) */
.dir-card-distance {
  position: absolute;
  bottom: .6rem; right: .6rem;
  background: var(--dir-orange);
  color: #fff !important;
  font-size: .7rem;
  font-weight: 800;
  padding: .22rem .65rem;
  border-radius: 50px;
  z-index: 2;
  box-shadow: 0 3px 10px rgba(242,140,40,.35);
}
.dir-card-distance i { color: #fff !important; }

.dir-card-logo-wrap {
  position: absolute;
  bottom: -18px; left: .85rem;
  z-index: 3;
}
.dir-card-logo, .dir-card-logo-placeholder {
  width: 46px; height: 46px;
  border-radius: 13px;
  border: 2.5px 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);
}

.dir-card-body {
  padding: 1.5rem .95rem .85rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.dir-card-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dir-ink);
  margin: 0 0 .35rem;
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dir-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .45rem;
}
.dir-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 50px;
  text-decoration: none !important;
  transition: var(--dir-transition);
}
.dir-tag-category { background: var(--dir-orange-soft); color: var(--dir-orange-dark); }
a.dir-tag-category:hover { background: var(--dir-orange); color: #fff; }
.dir-tag-zone { background: var(--dir-light); color: var(--dir-gray); }
a.dir-tag-zone:hover { background: var(--dir-ink); color: #fff; }

.dir-card-desc {
  font-size: .82rem;
  color: var(--dir-gray);
  margin: 0 0 .55rem;
  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: .55rem;
}
.dir-feat-pill {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .68rem;
  font-weight: 600;
  color: var(--dir-gray);
  background: var(--dir-light);
  border: 1px solid var(--dir-border);
  padding: .16rem .52rem;
  border-radius: 50px;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dir-feat-pill i { color: var(--dir-orange); font-size: .66rem; }
.dir-feat-more {
  font-size: .68rem;
  font-weight: 800;
  color: var(--dir-orange-dark);
  background: var(--dir-orange-soft);
  padding: .16rem .5rem;
  border-radius: 50px;
}

.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 { font-size: .72rem; letter-spacing: .5px; white-space: nowrap; }
.dir-star-filled { color: #f8b84e; }
.dir-star-empty  { color: #d9d9e0; }
.dir-rating-text  { font-size: .8rem; font-weight: 800; color: var(--dir-ink); }
.dir-rating-count { font-size: .74rem; color: var(--dir-gray-light); }
.dir-no-rating { font-size: .74rem; color: var(--dir-gray-light); }
/* Chip de calificación (estrella + promedio) */
.dir-rating-chip {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  background: #fdf3dc;
  color: #9c6c14;
  font-size: .78rem;
  font-weight: 800;
  padding: .24rem .6rem;
  border-radius: 50px;
  white-space: nowrap;
}
.dir-rating-chip svg { color: #f2b01e; }

.dir-card-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.dir-card-like {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border: none;
  background: var(--dir-orange-soft);
  color: var(--dir-orange-dark);
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  padding: .28rem .65rem;
  border-radius: 50px;
  transition: var(--dir-transition);
}
.dir-card-like:hover { background: var(--dir-orange); color: #fff; transform: scale(1.05); }
/* Con like: fondo naranja de marca y número en blanco */
.dir-card-like.dir-liked,
.dir-card-like.dir-liked i,
.dir-card-like.dir-liked .dir-like-count {
  color: #fff !important;
}
.dir-card-like.dir-liked { background: var(--dir-orange); }
.dir-card-like.dir-liked i { animation: dirHeartPop .45s var(--dir-spring); }
.dir-card-wa {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--dir-wa);
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  text-decoration: none !important;
  transition: var(--dir-transition);
}
.dir-card-wa:hover { background: var(--dir-wa-dark); transform: scale(1.12); }

/* ════════════════════════════════════════════════════════════
   CATEGORÍAS Y ZONAS (homepage)
   ════════════════════════════════════════════════════════════ */
/* Grid de categorías: 2 columnas en móvil, más en pantallas grandes */
.dir-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}
@media (min-width: 576px)  { .dir-cat-grid { grid-template-columns: repeat(3, 1fr); gap: .8rem; } }
@media (min-width: 768px)  { .dir-cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px)  { .dir-cat-grid { grid-template-columns: repeat(5, 1fr); } }

.dir-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  background: var(--dir-white);
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius);
  padding: 1.15rem .6rem .95rem;
  height: 100%;
  transition: transform .28s var(--dir-spring), box-shadow .28s ease, border-color .28s ease;
}
.dir-cat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--dir-hover);
  border-color: var(--dir-orange-line);
}
.dir-cat-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--dir-orange-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  transition: transform .28s var(--dir-spring);
}
.dir-cat-card:hover .dir-cat-icon { transform: scale(1.1) rotate(-4deg); }
.dir-cat-img { width: 32px; height: 32px; object-fit: contain; }
/* Ícono SVG por rubro (business_category.icon_key) */
.dir-cat-svg { width: 28px; height: 28px; }
.dir-cat-name {
  font-size: .88rem;
  font-weight: 800;
  color: var(--dir-ink);
  line-height: 1.2;
}
.dir-cat-count { font-size: .72rem; color: var(--dir-gray-light); font-weight: 600; }

/* Grid de zonas: 2 columnas en móvil (top 10 = 5 filas), como categorías */
.dir-zone-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}
@media (min-width: 576px)  { .dir-zone-grid { grid-template-columns: repeat(3, 1fr); gap: .8rem; } }
@media (min-width: 768px)  { .dir-zone-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px)  { .dir-zone-grid { grid-template-columns: repeat(5, 1fr); } }

/* Zonas: tarjeta compacta y amigable — nombre + cantidad de negocios */
.dir-zone-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  border-radius: var(--dir-radius);
  border: 1px solid var(--dir-border);
  background: var(--dir-white);
  height: 100%;
  padding: .7rem .8rem;
  transition: transform .28s var(--dir-spring), box-shadow .28s ease, border-color .28s ease;
}
.dir-zone-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--dir-hover);
  border-color: var(--dir-orange-line);
}
.dir-zone-thumb {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--dir-orange-soft);
  color: var(--dir-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform .28s var(--dir-spring);
}
.dir-zone-card:hover .dir-zone-thumb { transform: scale(1.08); }
.dir-zone-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
}
.dir-zone-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.dir-zone-info strong {
  font-size: .9rem;
  font-weight: 800;
  color: var(--dir-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dir-zone-info small { font-size: .72rem; color: var(--dir-orange-dark); font-weight: 700; }
.dir-zone-arrow { color: var(--dir-gray-light); flex-shrink: 0; transition: var(--dir-transition); }
.dir-zone-card:hover .dir-zone-arrow { color: var(--dir-orange); transform: translateX(3px); }

/* CTA "Cerca de mí" */
.dir-near-cta-section { padding-top: 0; }
.dir-near-cta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: var(--dir-ink);
  border-radius: var(--dir-radius-lg);
  padding: 1.5rem 1.7rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
/* Círculo decorativo eliminado a pedido del cliente */
.dir-near-cta::before { content: none; }
.dir-near-cta-icon {
  width: 58px; height: 58px;
  border-radius: 18px;
  background: var(--dir-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: dirBreath 3.2s ease-in-out infinite;
}
.dir-near-cta-text { flex: 1; min-width: 200px; position: relative; z-index: 1; }
.dir-near-cta-text h3 {
  color: #fff !important;
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: .2rem;
}
.dir-near-cta-text p { color: rgba(255,255,255,.78) !important; margin: 0; font-size: .88rem; }
.dir-near-cta-btn { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════
   SALUDO POR HORA + BADGE PATROCINADO
   ════════════════════════════════════════════════════════════ */
.dir-daypart {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--dir-orange-soft);
  border: 1px solid var(--dir-orange-line);
  color: var(--dir-orange-dark);
  font-size: .8rem;
  font-weight: 600;
  padding: .38rem .95rem;
  border-radius: 50px;
  margin: .15rem 0 .7rem;
  animation: dirFadeUp .6s .1s ease both;
}
.dir-daypart strong { font-weight: 800; }
.dir-daypart-ico { display: inline-flex; color: var(--dir-orange); }

.dir-badge-sponsored {
  background: var(--dir-ink);
  color: #fff !important;
  font-size: .62rem;
  letter-spacing: .04em;
}

/* ════════════════════════════════════════════════════════════
   RECOMENDADOR "¿NO SABES QUÉ PEDIR?"
   ════════════════════════════════════════════════════════════ */
.dir-reco-section { padding-top: 0; }
.dir-reco-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: var(--dir-orange);
  border-radius: var(--dir-radius-lg);
  padding: 1.4rem 1.5rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(242,140,40,.3);
}
.dir-reco-card::after {
  content: '';
  position: absolute;
  right: -36px; bottom: -36px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
}
.dir-reco-ico {
  width: 58px; height: 58px;
  border-radius: 18px;
  background: rgba(255,255,255,.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: dirBreath 3s ease-in-out infinite;
}
.dir-reco-text { flex: 1; min-width: 200px; position: relative; z-index: 1; }
.dir-reco-text h3 { color: #fff !important; font-size: 1.2rem; font-weight: 800; margin-bottom: .2rem; }
.dir-reco-text p { color: rgba(255,255,255,.9) !important; margin: 0; font-size: .88rem; }
/* Botón a todo el ancho de la tarjeta y centrado */
.dir-reco-open {
  background: var(--dir-ink);
  box-shadow: 0 6px 18px rgba(35,35,51,.3);
  position: relative;
  z-index: 1;
  width: 100%;
  justify-content: center;
}
.dir-reco-open:hover { background: var(--dir-dark-3); }

/* Modal */
/* El padding inferior del overlay reserva el espacio del menú de la app:
   la caja NUNCA queda detrás del menú ni se sale de la pantalla, y su
   max-height:100% se limita al área visible real (inmune al vh de iOS). */
/* Patrón "overlay scrolleable": la caja crece con su contenido (los
   productos NUNCA pueden salirse de ella) y lo que scrollea es el
   overlay oscuro. Inmune a los bugs de Safari con flex + max-height. */
.dir-reco-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;   /* por encima del header fijo del tema */
  display: none;
  background: rgba(35,35,51,.6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* el scroll no se "escapa" al fondo */
  /* Arriba: deja libre el header del sitio. Abajo: el menú de la app. */
  padding: calc(74px + env(safe-area-inset-top, 0px)) 1rem
           calc(84px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) { .dir-reco-overlay { padding: 92px 1.2rem 2rem; } }
.dir-reco-overlay.show { display: block; }
.dir-reco-box {
  background: var(--dir-white);
  border-radius: var(--dir-radius-lg);
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem 1.6rem;
  position: relative;
  animation: dirFadeUp .35s var(--dir-spring) both;
}
.dir-reco-close {
  position: absolute;
  top: .8rem; right: .8rem;
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--dir-light);
  color: var(--dir-gray);
  cursor: pointer;
  z-index: 2;
}
.dir-reco-step { text-align: center; animation: dirFadeUp .3s ease both; }
.dir-reco-step-n {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--dir-orange);
  margin-bottom: .3rem;
}
.dir-reco-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--dir-ink) !important;
  margin-bottom: 1.1rem;
  letter-spacing: -.01em;
}
.dir-reco-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
.dir-reco-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  background: var(--dir-white);
  border: 2px solid var(--dir-border);
  border-radius: var(--dir-radius);
  padding: 1rem .6rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--dir-ink);
  cursor: pointer;
  transition: transform .2s var(--dir-spring), border-color .2s ease, box-shadow .2s ease;
}
.dir-reco-opt:hover {
  border-color: var(--dir-orange);
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--dir-hover);
}
.dir-reco-opt:active { transform: scale(.96); }
/* Íconos SVG (sin emojis) en cuadro naranja suave — color forzado:
   el tema pinta los svg/span de negro si no se usa !important */
.dir-reco-opt-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: var(--dir-orange-soft);
  color: var(--dir-orange) !important;
  flex-shrink: 0;
  transition: transform .2s var(--dir-spring);
}
.dir-reco-opt-ico svg {
  color: var(--dir-orange) !important;
  stroke: var(--dir-orange);
  opacity: 1 !important;
}
.dir-reco-opt:hover .dir-reco-opt-ico { transform: scale(1.1) rotate(-4deg); }
.dir-reco-opt-wide { grid-column: 1 / -1; flex-direction: row; justify-content: center; padding: .75rem; }

/* Cargando (3s de suspenso) */
.dir-reco-loader {
  color: var(--dir-orange);
  margin-bottom: .9rem;
  display: inline-block;
  animation: dirBounce 1.2s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(242,140,40,.35));
}
.dir-reco-dots { display: flex; justify-content: center; gap: .45rem; margin-top: .6rem; }
.dir-reco-dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dir-orange);
  animation: dirShimmer 1s ease-in-out infinite;
}
.dir-reco-dots span:nth-child(2) { animation-delay: .2s; }
.dir-reco-dots span:nth-child(3) { animation-delay: .4s; }

/* Resultados */
.dir-reco-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  text-align: left;
}
.dir-reco-item {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius);
  overflow: hidden;
  text-decoration: none !important;
  background: var(--dir-white);
  transition: transform .22s var(--dir-spring), box-shadow .22s ease;
  animation: dirFadeUp .45s ease both;
}
.dir-reco-item:hover { transform: translateY(-3px); box-shadow: var(--dir-hover); }
/* Contenedor de proporción fija: la foto queda SIEMPRE contenida */
.dir-reco-item-media {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 62%;
  background: var(--dir-orange-soft);
  overflow: hidden;
}
.dir-reco-item-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
}
.dir-reco-item-noimg i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dir-orange);
  font-size: 1.3rem;
}
.dir-reco-item-sponsor {
  position: absolute;
  top: .4rem; left: .4rem;
  background: var(--dir-ink);
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .12rem .5rem;
  border-radius: 20px;
}
.dir-reco-item-body {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .55rem .65rem .65rem;
}
.dir-reco-item-body strong {
  font-size: .82rem;
  color: var(--dir-ink);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dir-reco-item-spec { font-size: .64rem; color: var(--dir-orange-dark); font-weight: 800; }
.dir-reco-item-body small { font-size: .7rem; color: var(--dir-gray); }
.dir-reco-item-price {
  font-size: .84rem;
  font-weight: 800;
  color: var(--dir-orange-dark) !important;
  margin-top: .15rem;
}
.dir-reco-empty { color: var(--dir-gray); grid-column: 1 / -1; text-align: center; padding: 1rem 0; }
.dir-reco-foot { margin-top: 1rem; }
/* "Probar otra vez": blanco con borde, texto e ícono naranjas */
.dir-reco-again,
.dir-reco-again i, .dir-reco-again svg, .dir-reco-again span {
  color: var(--dir-orange-dark) !important;
}
.dir-reco-again {
  background: #fff;
  border-color: var(--dir-orange);
}
.dir-reco-again:hover {
  background: var(--dir-orange-soft);
  border-color: var(--dir-orange-dark);
}

/* ════════════════════════════════════════════════════════════
   SECCIÓN INSTALAR APP (PWA)
   ════════════════════════════════════════════════════════════ */
.dir-pwa-section { padding-top: 0; }
.dir-pwa-card {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  background: var(--dir-white);
  border: 1.5px solid var(--dir-orange-line);
  border-radius: var(--dir-radius-lg);
  padding: 1.6rem 1.7rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.dir-pwa-card::after {
  content: '';
  position: absolute;
  right: -30px; top: -30px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--dir-orange-soft);
}
.dir-pwa-card-logo {
  width: 74px; height: 74px;
  border-radius: 22px;
  background: var(--dir-white);
  border: 1px solid var(--dir-border);
  box-shadow: var(--dir-shadow);
  padding: 8px;
  object-fit: contain;
  flex-shrink: 0;
  animation: dirFloat 4s ease-in-out infinite alternate;
}
.dir-pwa-card-text { flex: 1; min-width: 220px; position: relative; z-index: 1; }
.dir-pwa-card-text h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--dir-ink) !important;
  margin-bottom: .25rem;
  letter-spacing: -.01em;
}
.dir-pwa-card-text p { color: var(--dir-gray); font-size: .9rem; margin: 0; max-width: 480px; }
.dir-pwa-card-free {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--dir-green);
  font-weight: 800;
  font-size: .8rem;
  margin-top: .45rem;
}
.dir-pwa-card-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  position: relative;
  z-index: 1;
}
.dir-pwa-hint {
  font-size: .74rem;
  color: var(--dir-gray-light);
  text-align: center;
  margin: 0;
}

/* Botón instalar (reutilizable) */
.dir-pwa-install-btn { white-space: nowrap; }
.dir-pwa-install-btn i { animation: dirWiggle 2.6s ease-in-out infinite; }

/* Banner sutil de instalación (móvil, aparece tras interacción) */
.dir-pwa-banner {
  position: fixed;
  left: .8rem; right: .8rem;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px) + .6rem);
  z-index: 1055;
  display: none;
  align-items: center;
  gap: .75rem;
  background: var(--dir-white);
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius);
  box-shadow: var(--dir-shadow-lg);
  padding: .7rem .8rem;
}
.dir-pwa-banner.show { display: flex; animation: dirFadeUp .4s var(--dir-spring) both; }
.dir-pwa-banner-logo {
  width: 42px; height: 42px;
  border-radius: 12px;
  object-fit: contain;
  background: var(--dir-white);
  border: 1px solid var(--dir-border);
  padding: 3px;
  flex-shrink: 0;
}
.dir-pwa-banner-text { flex: 1; min-width: 0; }
.dir-pwa-banner-text strong {
  display: block;
  font-size: .84rem;
  font-weight: 800;
  color: var(--dir-ink);
  line-height: 1.2;
}
.dir-pwa-banner-text small {
  display: block;
  font-size: .72rem;
  color: var(--dir-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dir-pwa-banner-btn {
  flex-shrink: 0;
  background: var(--dir-orange);
  color: #fff !important;
  border: none;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 800;
  padding: .45rem 1rem;
  cursor: pointer;
  transition: var(--dir-transition);
}
.dir-pwa-banner-btn:hover { background: var(--dir-orange-dark); }
.dir-pwa-banner-close {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: none;
  border-radius: 50%;
  background: var(--dir-light);
  color: var(--dir-gray);
  font-size: .7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .dir-pwa-banner { left: auto; right: 1.2rem; bottom: 1.2rem; max-width: 360px; }
}

/* Modal instrucciones iOS / manual */
.dir-pwa-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(35,35,51,.5);
  padding: 1rem;
}
.dir-pwa-modal.open { display: flex; }
.dir-pwa-modal-box {
  background: var(--dir-white);
  border-radius: var(--dir-radius-lg);
  max-width: 420px;
  width: 100%;
  padding: 1.6rem 1.4rem 1.4rem;
  position: relative;
  animation: dirFadeUp .35s var(--dir-spring) both;
  max-height: 86vh;
  overflow-y: auto;
}
@media (min-width: 576px) { .dir-pwa-modal { align-items: center; } }
.dir-pwa-modal-close {
  position: absolute;
  top: .8rem; right: .8rem;
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--dir-light);
  color: var(--dir-gray);
  cursor: pointer;
}
.dir-pwa-modal-logo {
  width: 62px; height: 62px;
  border-radius: 18px;
  object-fit: contain;
  border: 1px solid var(--dir-border);
  padding: 6px;
  display: block;
  margin: 0 auto .8rem;
  box-shadow: var(--dir-shadow-sm);
}
.dir-pwa-modal-title {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dir-ink) !important;
  margin-bottom: .3rem;
}
.dir-pwa-modal-sub {
  text-align: center;
  font-size: .85rem;
  color: var(--dir-gray);
  margin-bottom: 1.1rem;
}
.dir-pwa-steps { display: flex; flex-direction: column; gap: .6rem; }
.dir-pwa-step {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--dir-light);
  border-radius: var(--dir-radius-sm);
  padding: .65rem .8rem;
  font-size: .86rem;
  color: var(--dir-text);
}
.dir-pwa-step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--dir-orange);
  color: #fff;
  font-weight: 800;
  font-size: .78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dir-pwa-step i { color: var(--dir-orange); }
.dir-pwa-step .dir-ios-share {
  display: inline-flex;
  color: #0a84ff;
  margin: 0 .15rem;
  vertical-align: -2px;
}

/* ════════════════════════════════════════════════════════════
   BREADCRUMB + HERO DE CATEGORÍA / ZONA / LISTADO
   ════════════════════════════════════════════════════════════ */
.dir-breadcrumb-bar {
  background: var(--dir-white);
  border-bottom: 1px solid var(--dir-border);
  padding: .55rem 0;
}
.dir-breadcrumb { font-size: .8rem; }
.dir-breadcrumb .breadcrumb-item a {
  color: var(--dir-gray) !important;
  text-decoration: none;
  transition: color .15s ease;
}
.dir-breadcrumb .breadcrumb-item a:hover { color: var(--dir-orange) !important; }
.dir-breadcrumb .breadcrumb-item.active { color: var(--dir-ink); font-weight: 700; }

.dir-category-hero {
  position: relative;
  background: var(--dir-white);
  border-bottom: 1px solid var(--dir-border);
  padding: 2.4rem 0;
  overflow: hidden;
  isolation: isolate;
}
.dir-category-hero-content { position: relative; }
/* Ícono grande del rubro sobre el hero de categoría */
.dir-hero-cat-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto .8rem;
  border-radius: 20px;
  background: var(--dir-orange-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dirFadeUp .5s ease both;
}
.dir-hero-cat-icon img { width: 34px; height: 34px; object-fit: contain; }
.dir-hero-cat-icon .dir-cat-svg { width: 32px; height: 32px; }
.dir-hero-title {
  font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.3rem);
  font-weight: 800;
  color: var(--dir-ink);
  letter-spacing: -.02em;
  margin-bottom: .35rem;
}
.dir-hero-title i { color: var(--dir-orange); }
.dir-hero-subtitle {
  color: var(--dir-gray);
  font-size: .95rem;
  max-width: 620px;
  margin: 0 auto .3rem;
}
.dir-hero-count {
  display: inline-block;
  background: var(--dir-orange-soft);
  color: var(--dir-orange-dark);
  font-size: .8rem;
  font-weight: 800;
  padding: .3rem .9rem;
  border-radius: 50px;
  margin: .35rem 0 0;
}
.dir-subcategory-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.dir-hero-pill {
  display: inline-flex;
  align-items: center;
  background: var(--dir-white);
  border: 1.5px solid var(--dir-border-2);
  color: var(--dir-text) !important;
  font-size: .8rem;
  font-weight: 700;
  padding: .4rem 1rem;
  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;
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════
   LISTADO — barra sticky de búsqueda y filtros
   ════════════════════════════════════════════════════════════ */
.dir-sticky-search {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--dir-border);
  padding: .7rem 0 .55rem;
}
.dir-search-main-row {
  display: flex;
  align-items: stretch;
  gap: .5rem;
}
/* Variante del widget píldora del inicio para la barra del listado */
.dir-sw-main-listing {
  flex: 1;
  min-width: 0;
  box-shadow: none;
  padding: .3rem .3rem .3rem 1rem;
}
.dir-sw-main-listing .dir-sw-input { font-size: .9rem; padding: .38rem 0; }
.dir-sw-main-listing .dir-sw-btn { padding: .48rem 1.15rem; }
.dir-search-field-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.dir-sf-icon {
  position: absolute;
  left: .9rem; top: 50%;
  transform: translateY(-50%);
  color: var(--dir-gray-light);
  pointer-events: none;
  display: flex;
}
.dir-sf-input {
  width: 100%;
  border: 1.5px solid var(--dir-border-2);
  border-radius: 50px;
  padding: .55rem 1rem .55rem 2.4rem;
  font-size: .9rem;
  color: var(--dir-ink);
  background: var(--dir-white);
  outline: none;
  transition: var(--dir-transition);
}
.dir-sf-input:focus {
  border-color: var(--dir-orange);
  box-shadow: 0 0 0 4px rgba(242,140,40,.12);
}
.dir-sf-select {
  border: 1.5px solid var(--dir-border-2);
  border-radius: 50px;
  padding: .45rem 2rem .45rem 1rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--dir-text);
  background-color: var(--dir-white);
  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-orange);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: .9rem;
  padding: .5rem 1.25rem;
  cursor: pointer;
  transition: var(--dir-transition);
  flex-shrink: 0;
}
.dir-sf-btn:hover { background: var(--dir-orange-dark); }
.dir-sf-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--dir-white);
  border: 1.5px solid var(--dir-border-2);
  color: var(--dir-text);
  border-radius: 50px;
  font-size: .84rem;
  font-weight: 700;
  padding: .5rem .95rem;
  cursor: pointer;
  position: relative;
  transition: var(--dir-transition);
  flex-shrink: 0;
}
.dir-sf-filter-toggle:hover { border-color: var(--dir-orange); color: var(--dir-orange-dark); }
.dir-sf-filter-toggle.active {
  background: var(--dir-orange-soft);
  border-color: var(--dir-orange);
  color: var(--dir-orange-dark);
}
.dir-filter-badge {
  position: absolute;
  top: -6px; right: -4px;
  min-width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--dir-orange);
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.dir-mobile-filters {
  display: none;
  border-top: 1px solid var(--dir-border);
  margin-top: .6rem;
}
.dir-mobile-filters.show,
.dir-mobile-filters.open { display: block; animation: dirDropIn .25s ease both; }
.dir-mf-features {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  padding: .6rem 0 .3rem;
  max-height: 260px;
  overflow-y: auto;
}
.dir-mf-label {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dir-gray);
  margin-bottom: .2rem;
}
.dir-mf-label svg { color: var(--dir-orange); }
/* Pie del panel: cerrar y aplicar siempre a la vista */
.dir-mf-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .65rem 0 .55rem;
  border-top: 1px solid var(--dir-border);
  margin-top: .5rem;
}
.dir-mf-close {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: none;
  background: transparent;
  color: var(--dir-gray);
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
}
.dir-mf-apply {
  padding: .5rem 1.3rem;
  font-size: .86rem;
}

/* Chips scroll horizontales */
.dir-chips-outer { overflow: hidden; margin-top: .55rem; }
.dir-chips-scroll-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  /* !important necesario: theme_voltro/fixes-urgent.css fuerza
     "overflow: visible !important" en TODO div/section/.container del
     sitio, lo que anula cualquier overflow-x:auto sin !important. */
  overflow-x: auto !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.dir-chips-scroll-row::-webkit-scrollbar { display: none; }
.dir-chips-sep { width: 1px; height: 20px; background: var(--dir-border-2); flex-shrink: 0; }
.dir-chip {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  background: var(--dir-white);
  border: 1.5px solid var(--dir-border-2);
  color: var(--dir-text);
  font-size: .8rem;
  font-weight: 700;
  padding: .42rem .95rem;
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: var(--dir-transition);
  flex-shrink: 0;
}
.dir-chip:hover {
  border-color: var(--dir-orange);
  color: var(--dir-orange-dark);
  background: var(--dir-orange-soft);
}
.dir-chip.dir-chip-active {
  background: var(--dir-orange);
  border-color: var(--dir-orange);
  color: #fff;
}
.dir-chip-near { color: var(--dir-orange-dark); border-color: var(--dir-orange-line); background: var(--dir-orange-soft); }
.dir-chip-near:hover { background: var(--dir-orange); color: #fff; border-color: var(--dir-orange); }
/* Chip "Filtros" (móvil): badge contador inline, estado activo naranja */
.dir-chip-filter { color: var(--dir-ink); }
.dir-chip .dir-filter-badge {
  position: static;
  display: inline-flex;
  margin-left: .1rem;
}
.dir-chip-filter.active {
  background: var(--dir-orange);
  border-color: var(--dir-orange);
  color: #fff;
}
.dir-chip-filter.active .dir-filter-badge { background: #fff; color: var(--dir-orange-dark); }
/* Chips con selector nativo (Categorías / Ciudad en móvil) */
.dir-chip-select-wrap { padding-right: .8rem; }
.dir-chip-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  font-size: .8rem;
  font-weight: 700;
  color: inherit;
  max-width: 118px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  padding: 0;
}
.dir-chip-select:focus { outline: none; }
.dir-chip-select option { color: var(--dir-ink); background: #fff; }

/* Dropdown de características (desktop) */
.dir-lf-wrap { position: relative; flex-shrink: 0; }
.dir-lf-count {
  background: #fff;
  color: var(--dir-orange-dark);
  min-width: 18px; height: 18px;
  border-radius: 50%;
  font-size: .66rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.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);
  left: 0;
  width: 430px;
  max-width: 86vw;
  background: var(--dir-white);
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius);
  box-shadow: var(--dir-shadow-lg);
  padding: .8rem;
  z-index: 90;
}
.dir-lf-dd.show,
.dir-lf-dd.open { display: block; animation: dirDropIn .22s ease both; }
.dir-lf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  max-height: 260px;
  overflow-y: auto;
}
.dir-lf-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--dir-white);
  border: 1.5px solid var(--dir-border);
  border-radius: var(--dir-radius-sm);
  padding: .5rem .7rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--dir-text);
  cursor: pointer;
  text-align: left;
  transition: var(--dir-transition);
}
.dir-lf-item i { color: var(--dir-orange); width: 16px; text-align: center; }
.dir-lf-item:hover { border-color: var(--dir-orange-line); background: var(--dir-orange-soft); }
.dir-lf-item.active {
  border-color: var(--dir-orange);
  background: var(--dir-orange-soft);
  color: var(--dir-orange-dark);
}
.dir-lf-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid var(--dir-border);
}
.dir-lf-clear {
  border: none;
  background: transparent;
  color: var(--dir-gray);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.dir-lf-clear:hover { color: var(--dir-red); }
.dir-lf-apply { padding: .45rem 1.2rem; font-size: .85rem; }
.dir-chip-feature i { color: var(--dir-orange); }
.dir-chip-feature.dir-chip-active i { color: #fff; }

/* Orden + contador */
.dir-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  margin-top: .6rem;
  flex-wrap: wrap;
}
.dir-results-count { font-size: .84rem; color: var(--dir-gray); }
.dir-results-count strong {
  color: var(--dir-orange-dark);
  background: var(--dir-orange-soft);
  border-radius: 8px;
  padding: .08rem .45rem;
  margin-right: .15rem;
}
.dir-open-indicator { color: var(--dir-green); font-weight: 700; }
/* Control segmentado moderno para ordenar */
.dir-sort-pills {
  display: flex;
  align-items: center;
  gap: .2rem;
  /* !important: ver nota en .dir-chips-scroll-row (theme_voltro
     fixes-urgent.css fuerza overflow visible en todo div/.container). */
  overflow-x: auto !important;
  scrollbar-width: none;
  max-width: 100%;
  background: var(--dir-light);
  border: 1px solid var(--dir-border);
  border-radius: 50px;
  padding: .25rem;
}
.dir-sort-pills::-webkit-scrollbar { display: none; }
.dir-sort-label { font-size: .76rem; color: var(--dir-gray-light); font-weight: 700; padding-left: .55rem; }
.dir-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  border: none;
  background: transparent;
  color: var(--dir-gray);
  font-size: .78rem;
  font-weight: 700;
  padding: .4rem .85rem;
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--dir-transition);
}
.dir-sort-btn i { color: var(--dir-orange); opacity: .8; }
.dir-sort-btn:hover { color: var(--dir-orange-dark); background: var(--dir-orange-soft); }
.dir-sort-btn.active {
  background: var(--dir-orange);
  color: #fff;
  box-shadow: 0 3px 10px rgba(242,140,40,.32);
}
.dir-sort-btn.active i { color: #fff; opacity: 1; }

.dir-listing-body { padding: 1.6rem 0 3rem; }

/* Paginación */
.dir-pagination .page-link {
  border: 1.5px solid var(--dir-border-2);
  color: var(--dir-text);
  border-radius: 12px !important;
  margin: 0 2px;
  font-weight: 700;
  font-size: .88rem;
  min-width: 38px;
  text-align: center;
  transition: var(--dir-transition);
}
.dir-pagination .page-link:hover {
  border-color: var(--dir-orange);
  color: var(--dir-orange-dark);
  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); }

/* Estado vacío */
.dir-empty-state {
  text-align: center;
  padding: 3.4rem 1rem;
}
.dir-empty-icon {
  width: 86px; height: 86px;
  margin: 0 auto 1.1rem;
  border-radius: 28px;
  background: var(--dir-orange-soft);
  color: var(--dir-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.dir-empty-icon-pulse { animation: dirPulseOrange 2.4s infinite; }
.dir-empty-state h3 { font-weight: 800; color: var(--dir-ink) !important; }

/* ════════════════════════════════════════════════════════════
   CERCA DE MÍ
   ════════════════════════════════════════════════════════════ */
.dir-near-hero {
  position: relative;
  background: var(--dir-white);
  border-bottom: 1px solid var(--dir-border);
  padding: 2.4rem 0;
  overflow: hidden;
  isolation: isolate;
}
.dir-near-hero-content { position: relative; text-align: center; }
.dir-near-title {
  font-size: clamp(1.6rem, 1.25rem + 2vw, 2.5rem);
  font-weight: 800;
  color: var(--dir-ink);
  letter-spacing: -.02em;
  margin-bottom: .4rem;
}
.dir-near-sub { color: var(--dir-gray); max-width: 520px; margin: 0 auto 1.4rem; }
.dir-geo-status { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.dir-geo-btn { animation: dirPulseOrange 2.6s infinite; }
.dir-geo-hint { font-size: .78rem; color: var(--dir-gray-light); margin: 0; }
.dir-geo-message {
  border-radius: var(--dir-radius);
  padding: .9rem 1.1rem;
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
  border: 1px solid var(--dir-border);
  background: var(--dir-light);
  color: var(--dir-text);
}
.dir-geo-message.info  { background: var(--dir-orange-soft); border-color: var(--dir-orange-line); color: var(--dir-orange-dark); }
.dir-geo-message.error { background: var(--dir-red-soft); border-color: #f5c9c9; color: var(--dir-red); }
.dir-geo-message i { margin-right: .3rem; }
.dir-radius-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}
.dir-radius-label { font-size: .8rem; font-weight: 700; color: var(--dir-gray); }
.dir-radius-chip {
  border: 1.5px solid var(--dir-border-2);
  background: var(--dir-white);
  color: var(--dir-text);
  font-size: .8rem;
  font-weight: 700;
  padding: .32rem .85rem;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--dir-transition);
}
.dir-radius-chip:hover { border-color: var(--dir-orange); color: var(--dir-orange-dark); }
.dir-radius-chip.active {
  background: var(--dir-orange);
  border-color: var(--dir-orange);
  color: #fff;
}

/* Skeletons */
.dir-skel-card {
  background: var(--dir-white);
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius);
  overflow: hidden;
}
.dir-skel { background: #ededf1; animation: dirShimmer 1.4s ease-in-out infinite; }
.dir-skel-media { height: 0; padding-bottom: 56.25%; }
.dir-skel-body { padding: .9rem; display: flex; flex-direction: column; gap: .55rem; }
.dir-skel-line { height: 12px; border-radius: 6px; }

/* ════════════════════════════════════════════════════════════
   GUARDADOS
   ════════════════════════════════════════════════════════════ */
.dir-saved-hero {
  background: var(--dir-white);
  border-bottom: 1px solid var(--dir-border);
  padding: 2.2rem 0;
  text-align: center;
}
.dir-saved-title {
  font-size: clamp(1.6rem, 1.25rem + 2vw, 2.4rem);
  font-weight: 800;
  color: var(--dir-ink);
  letter-spacing: -.02em;
  margin-bottom: .3rem;
}
.dir-saved-sub { color: var(--dir-gray); margin: 0; }

/* ════════════════════════════════════════════════════════════
   FICHA DE NEGOCIO
   ════════════════════════════════════════════════════════════ */
.dir-detail-hero { position: relative; }
.dir-detail-banner {
  width: 100%;
  height: clamp(200px, 34vw, 360px);
  object-fit: cover;
  display: block;
}
.dir-detail-banner-placeholder {
  width: 100%;
  height: clamp(170px, 26vw, 280px);
  background: var(--dir-ink);
}
.dir-detail-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(35,35,51,.82) 0%, rgba(35,35,51,.25) 55%, transparent); /* legibilidad sobre foto */
  pointer-events: none;
}
.dir-detail-hero-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 1.1rem;
  padding-bottom: 1.2rem;
}
.dir-detail-logo-wrap { flex-shrink: 0; }
.dir-detail-logo, .dir-detail-logo-placeholder {
  width: clamp(74px, 11vw, 108px);
  height: clamp(74px, 11vw, 108px);
  border-radius: 24px;
  border: 3px solid #fff;
  background: #fff;
  object-fit: cover;
  box-shadow: var(--dir-shadow);
}
.dir-detail-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dir-gray-light);
}
.dir-detail-hero-info { min-width: 0; }
.dir-detail-status-row { margin-bottom: .35rem; }
.dir-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .74rem;
  font-weight: 800;
  padding: .28rem .8rem;
  border-radius: 50px;
  background: #fff;
}
/* En la ficha: estado en naranja y negrita para que destaque */
.dir-status-badge.dir-status-open { color: var(--dir-orange-dark) !important; font-weight: 800; }
.dir-status-open    { color: var(--dir-green); }
.dir-status-closed  { color: var(--dir-red); }
.dir-status-unknown { color: var(--dir-gray); }
.dir-detail-name {
  color: #fff !important;   /* protagonista: siempre claro sobre el banner */
  font-size: clamp(1.5rem, 1.15rem + 2.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: .4rem;
  text-shadow: 0 2px 14px rgba(35,35,51,.55);
}
.dir-detail-status-row { margin-bottom: .45rem; }
.dir-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .55rem;
}
.dir-detail-metrics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
}
.dir-detail-rating { display: flex; align-items: center; font-size: .85rem; }
.dir-page .dir-like-btn-hero, .dir-page .dir-save-btn-hero {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.16);
  border: 1.5px solid rgba(255,255,255,.6);
  color: #fff !important;
  font-size: .82rem;
  font-weight: 700;
  padding: .4rem 1rem;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--dir-transition);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Texto e íconos internos SIEMPRE blancos sobre el banner oscuro */
.dir-page .dir-like-btn-hero span, .dir-page .dir-like-btn-hero i,
.dir-page .dir-like-btn-hero svg, .dir-page .dir-save-btn-hero span,
.dir-page .dir-save-btn-hero i, .dir-page .dir-save-btn-hero svg {
  color: #fff !important;
}
.dir-page .dir-like-btn-hero:hover, .dir-page .dir-save-btn-hero:hover {
  background: #fff;
  border-color: #fff;
}
.dir-page .dir-like-btn-hero:hover, .dir-page .dir-like-btn-hero:hover span,
.dir-page .dir-like-btn-hero:hover i, .dir-page .dir-save-btn-hero:hover,
.dir-page .dir-save-btn-hero:hover span, .dir-page .dir-save-btn-hero:hover svg {
  color: var(--dir-ink) !important;
}
.dir-like-btn-hero.dir-liked { background: var(--dir-orange); border-color: var(--dir-orange); }
.dir-like-btn-hero.dir-liked i { animation: dirHeartPop .45s var(--dir-spring); }
.dir-save-btn-hero.dir-saved { background: var(--dir-orange); border-color: var(--dir-orange); }
.dir-save-btn-hero.dir-saved svg { fill: currentColor; }
.dir-like-count-hero {
  background: rgba(255,255,255,.25);
  border-radius: 20px;
  padding: .05rem .5rem;
  font-size: .76rem;
  font-weight: 800;
}

/* CTA móvil sticky (ficha) */
.dir-mobile-cta {
  position: sticky;
  top: 0;
  z-index: 99;
  display: flex;
  gap: .5rem;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--dir-border);
  padding: .55rem .8rem;
}
.dir-mcta-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border-radius: 50px;
  font-size: .84rem;
  font-weight: 800;
  padding: .55rem .5rem;
  text-decoration: none !important;
  transition: var(--dir-transition);
}
.dir-mcta-btn:active { transform: scale(.97); }
.dir-mcta-wa   { background: var(--dir-wa); color: #fff !important; }
.dir-mcta-call { background: var(--dir-ink); color: #fff !important; }
.dir-mcta-maps { background: var(--dir-orange); color: #fff !important; }

/* FAB WhatsApp */
.dir-wa-fab {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 1040;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--dir-wa);
  color: #fff !important;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(37,211,102,.4);
  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-ink);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  padding: .32rem .7rem;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.dir-wa-fab:hover .dir-wa-fab-tip { opacity: 1; }

/* Tabs de la ficha */
.dir-detail-container { padding: 1.6rem 0 3rem; }
.dir-detail-tabs {
  border-bottom: 1.5px solid var(--dir-border);
  gap: .2rem;
  flex-wrap: nowrap;
  /* !important: ver nota en .dir-chips-scroll-row (theme_voltro
     fixes-urgent.css fuerza overflow visible en todo div/.container). */
  overflow-x: auto !important;
  scrollbar-width: none;
}
.dir-detail-tabs::-webkit-scrollbar { display: none; }
.dir-detail-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: none;
  color: var(--dir-gray);
  font-weight: 700;
  font-size: .9rem;
  padding: .65rem 1rem;
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
  transition: var(--dir-transition);
  background: transparent;
}
.dir-detail-tabs .nav-link:hover { color: var(--dir-ink); }
.dir-detail-tabs .nav-link.active {
  color: var(--dir-orange-dark);
  border-bottom-color: var(--dir-orange);
  background: transparent;
}
/* Íconos SVG de cada pestaña: grises por defecto, naranja si está activa */
.dir-tab-ico { color: var(--dir-gray-light); flex-shrink: 0; transition: color .2s ease; }
.dir-detail-tabs .nav-link:hover .dir-tab-ico { color: var(--dir-gray); }
.dir-detail-tabs .nav-link.active .dir-tab-ico { color: var(--dir-orange); }
.dir-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dir-orange-soft);
  color: var(--dir-orange-dark);
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 800;
  min-width: 20px;
  padding: .1rem .42rem;
  margin-left: .3rem;
}
.dir-detail-tab-content { padding: 1.4rem 0; }
.dir-detail-tab-content .tab-pane.active { animation: dirFadeUp .4s ease both; }

.dir-description { color: var(--dir-text); line-height: 1.75; }
.dir-short-desc { color: var(--dir-text); font-size: 1.02rem; }
.dir-about-features {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.dir-feat-chip-large {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--dir-light);
  border: 1px solid var(--dir-border);
  color: var(--dir-text);
  font-size: .84rem;
  font-weight: 600;
  padding: .45rem .95rem;
  border-radius: 50px;
}

/* Características */
.dir-feature-group { margin-bottom: 1.5rem; }
.dir-feature-group-title {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--dir-gray-light);
  margin-bottom: .7rem;
}
.dir-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .55rem;
}
.dir-feature-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  background: var(--dir-white);
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius-sm);
  padding: .6rem .8rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--dir-text);
  transition: var(--dir-transition);
}
.dir-feature-item:hover { border-color: var(--dir-orange-line); transform: translateY(-2px); 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;
  border-radius: 50px;
  padding: .45rem 1.1rem;
  font-size: .9rem;
  background: var(--dir-light);
}
.dir-schedule-now.dir-status-open   { background: var(--dir-green-soft); color: var(--dir-green); }
.dir-schedule-now.dir-status-closed { background: var(--dir-red-soft);  color: var(--dir-red); }
.dir-schedule-table table { margin: 0; }
.dir-schedule-table td {
  border-color: var(--dir-border) !important;
  padding: .65rem .6rem;
  font-size: .92rem;
  color: var(--dir-text);
}
.dir-schedule-day { font-weight: 700; color: var(--dir-ink); }
.dir-schedule-today { background: var(--dir-orange-soft); }
.dir-today-badge {
  display: inline-block;
  background: var(--dir-orange);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  padding: .12rem .5rem;
  border-radius: 20px;
  margin-left: .4rem;
  vertical-align: 2px;
}
.dir-schedule-open { color: var(--dir-text); font-weight: 600; }
.dir-schedule-closed { color: var(--dir-gray-light); font-style: italic; }

/* Menú / servicios */
.dir-ranking {
  background: var(--dir-orange-soft);
  border: 1px solid var(--dir-orange-line);
  border-radius: var(--dir-radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1.1rem;
}
.dir-ranking-title {
  font-size: .95rem;
  font-weight: 800;
  color: var(--dir-ink) !important;
  margin-bottom: .7rem;
}
.dir-ranking-title i { color: var(--dir-orange); }
.dir-ranking-list { display: flex; flex-direction: column; gap: .5rem; }
.dir-ranking-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--dir-white);
  border-radius: var(--dir-radius-sm);
  padding: .5rem .7rem;
  box-shadow: var(--dir-shadow-sm);
}
.dir-ranking-medal {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .82rem;
  color: #fff;
  flex-shrink: 0;
}
.dir-medal-1 { background: #f2b01e; }
.dir-medal-2 { background: #a8adb8; }
.dir-medal-3 { background: #d29466; }
.dir-ranking-img {
  width: 40px; height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.dir-ranking-info { display: flex; flex-direction: column; min-width: 0; }
.dir-ranking-info strong { font-size: .88rem; color: var(--dir-ink); }
.dir-ranking-votes { font-size: .74rem; color: var(--dir-orange-dark); font-weight: 700; }
.dir-menu-hint {
  font-size: .82rem;
  color: var(--dir-gray);
  background: var(--dir-light);
  border-radius: var(--dir-radius-sm);
  padding: .55rem .8rem;
  margin-bottom: 1rem;
}
.dir-menu-category {
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dir-gray-light);
  margin: 1.2rem 0 .6rem;
}
.dir-menu-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .9rem;
  padding: .95rem 0;
  border-bottom: 1px dashed var(--dir-border-2);
  transition: background .2s ease;
}
.dir-menu-item:last-child { border-bottom: none; }
.dir-menu-left { display: flex; gap: .8rem; min-width: 0; }
.dir-menu-img {
  width: 68px; height: 68px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--dir-border);
}
.dir-menu-text { min-width: 0; }
/* Nombre del producto en naranja y negrita para que destaque */
.dir-menu-name {
  font-size: .96rem;
  font-weight: 800;
  color: var(--dir-orange-dark) !important;
  margin: 0 0 .2rem;
}
.dir-menu-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .25rem; }
.dir-menu-tag {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .66rem;
  font-weight: 800;
  padding: .16rem .55rem;
  border-radius: 50px;
}
.dir-tag-specialty { background: var(--dir-orange); color: #fff; }
.dir-tag-main      { background: var(--dir-orange-soft); color: var(--dir-orange-dark); }
.dir-menu-desc {
  font-size: .8rem;
  color: var(--dir-gray);
  margin: 0 0 .4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dir-menu-price-wrap { text-align: right; flex-shrink: 0; }
.dir-menu-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dir-orange-dark);
  white-space: nowrap;
}
.dir-price-old {
  display: block;
  font-size: .76rem;
  color: var(--dir-gray-light);
  text-decoration: line-through;
}
.dir-price-diff {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .7rem;
  font-weight: 800;
  padding: .1rem .5rem;
  border-radius: 20px;
  margin-top: .2rem;
}
.dir-price-up   { background: var(--dir-red-soft);   color: var(--dir-red); }
.dir-price-down { background: var(--dir-green-soft); color: var(--dir-green); }

/* ════════════════════════════════════════════════════════════
   PRODUCTOS DESTACADOS (home) — carrusel horizontal premium
   Patrocinados primero (lo decide el controlador), diseño exclusivo
   consistente con el resto de la app.
   ════════════════════════════════════════════════════════════ */
.dir-fp-section { padding-top: 0; }
/* Flechas de navegación: forma GARANTIZADA de mover el carrusel,
   sin depender de gestos táctiles/touch-action del navegador. */
.dir-fp-nav-group { display: flex; gap: .4rem; flex-shrink: 0; }
.dir-fp-nav {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--dir-border-2);
  background: var(--dir-white);
  color: var(--dir-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--dir-transition);
}
.dir-fp-nav:hover { background: var(--dir-orange); border-color: var(--dir-orange); color: #fff; }
.dir-fp-nav:active { transform: scale(.92); }
.dir-fp-nav:disabled { opacity: .35; cursor: default; pointer-events: none; }
/* Se mantienen visibles también en móvil: son la forma garantizada
   de mover el carrusel si el swipe no responde en algunos navegadores. */
@media (max-width: 767.98px) {
  .dir-fp-nav { width: 30px; height: 30px; }
}

.dir-fp-scroll {
  display: flex;
  gap: .9rem;
  /* !important: theme_voltro/fixes-urgent.css fuerza
     "overflow: visible !important" en TODO div/section/.container del
     sitio (incluye este <div>), anulando cualquier overflow-x:auto sin
     !important — esta es la causa raíz de que el carrusel no se pudiera
     desplazar ni con swipe ni con las flechas. */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* pan-x: el navegador maneja el swipe horizontal de forma NATIVA
     (scroll nativo con inercia, el más confiable en iOS/Android). El
     gesto vertical pasa de largo hacia el scroll de la página. El JS
     de arrastre (pointer events) solo actúa con mouse, nunca con
     touch, para no competir con el scroll nativo ni bloquearlo. */
  touch-action: pan-x pan-y;
  padding-bottom: .4rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dir-fp-scroll::-webkit-scrollbar { display: none; }
.dir-fp-scroll { cursor: grab; }
.dir-fp-scroll.dir-dragging { cursor: grabbing; scroll-snap-type: none; }
.dir-fp-scroll.dir-dragging .dir-fp-card { pointer-events: none; }
.dir-fp-card {
  position: relative;
  flex: 0 0 auto;
  width: 168px;
  -webkit-user-drag: none;
  user-select: none;
  scroll-snap-align: start;
  background: var(--dir-white);
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius);
  overflow: hidden;
  transition: transform .25s var(--dir-spring), box-shadow .25s ease, border-color .25s ease;
}
.dir-fp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dir-hover);
  border-color: var(--dir-orange-line);
}
.dir-fp-sponsor {
  position: absolute;
  top: .5rem; left: .5rem;
  z-index: 2;
  background: var(--dir-ink);
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .03em;
  padding: .16rem .5rem;
  border-radius: 20px;
}
.dir-fp-media {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 82%;
  background: var(--dir-orange-soft);
  overflow: hidden;
}
.dir-fp-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform .45s ease;
  -webkit-user-drag: none;
  pointer-events: none;   /* el drag nativo de la imagen no debe frenar el swipe */
}
.dir-fp-card:hover .dir-fp-media img { transform: scale(1.07); }
.dir-fp-noimg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dir-orange);
  font-size: 1.4rem;
}
.dir-fp-body { padding: .6rem .7rem .7rem; display: flex; flex-direction: column; gap: .1rem; }
.dir-fp-name {
  font-size: .82rem;
  font-weight: 800;
  color: var(--dir-orange-dark) !important;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dir-fp-biz {
  font-size: .7rem;
  color: var(--dir-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dir-fp-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: .3rem; }
.dir-fp-price { font-size: .82rem; font-weight: 800; color: var(--dir-ink); }
.dir-fp-price-ask { font-size: .72rem; font-style: italic; font-weight: 700; color: var(--dir-gray); }
.dir-fp-votes { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; font-weight: 700; color: var(--dir-orange-dark); }
.dir-fp-votes i { color: var(--dir-orange); }

/* ════════════════════════════════════════════════════════════
   MENÚ / SERVICIOS — grid premium con fotos grandes clicables
   ════════════════════════════════════════════════════════════ */
/* ── Buscador + chips de categoría (solo del negocio actual) ── */
.dir-menu-toolbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.dir-menu-search-wrap {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: .55rem;
  background: var(--dir-light);
  border: 1.5px solid var(--dir-border);
  border-radius: 50px;
  padding: .55rem 1rem;
  transition: var(--dir-transition);
}
.dir-menu-search-wrap:focus-within {
  border-color: var(--dir-orange);
  background: var(--dir-white);
  box-shadow: 0 0 0 4px rgba(242,140,40,.1);
}
.dir-menu-search-wrap svg { color: var(--dir-gray-light); flex-shrink: 0; }
.dir-menu-search-input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: .88rem;
  color: var(--dir-ink);
}
.dir-menu-search-input::placeholder { color: var(--dir-gray-light); }
.dir-menu-cats {
  display: flex;
  align-items: center;
  gap: .4rem;
  /* !important: ver nota en .dir-chips-scroll-row (theme_voltro
     fixes-urgent.css fuerza overflow visible en todo div/.container). */
  overflow-x: auto !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 100%;
}
.dir-menu-cats::-webkit-scrollbar { display: none; }
.dir-menu-cat-chip {
  flex-shrink: 0;
  border: 1.5px solid var(--dir-border);
  background: var(--dir-white);
  color: var(--dir-text);
  font-size: .8rem;
  font-weight: 700;
  padding: .4rem .95rem;
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--dir-transition);
}
.dir-menu-cat-chip:hover { border-color: var(--dir-orange-line); background: var(--dir-orange-soft); }
.dir-menu-cat-chip.active {
  background: var(--dir-orange);
  border-color: var(--dir-orange);
  color: #fff !important;
}
.dir-menu-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--dir-gray);
}
.dir-menu-empty i { font-size: 1.8rem; color: var(--dir-gray-light); margin-bottom: .5rem; display: block; }

/* ── Grid de productos/servicios ── */
.dir-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 576px) { .dir-menu-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .dir-menu-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } }

.dir-menu-card {
  display: flex;
  flex-direction: column;
  background: var(--dir-white);
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius);
  overflow: hidden;      /* recorta la foto a las esquinas redondeadas */
  transition: transform .25s var(--dir-spring), box-shadow .25s ease, border-color .25s ease;
}
.dir-menu-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dir-hover);
  border-color: var(--dir-orange-line);
}
/* Envoltura de la foto: contexto relativo para el botón de votar flotante */
.dir-menu-card-media-wrap { position: relative; }
.dir-menu-card-media {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 78%;    /* proporción fija: la foto nunca se sale de la tarjeta */
  background: var(--dir-orange-soft);
  overflow: hidden;
  cursor: zoom-in;
}
.dir-menu-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.dir-menu-card:hover .dir-menu-card-media img { transform: scale(1.06); }
/* Ícono de "sin foto": va en un SPAN hijo con position:absolute.
   Importante: el div `.dir-menu-card-noimg` es el MISMO elemento que
   `.dir-menu-card-media` (proporción fija con height:0 + padding-top);
   si el ícono fuera position:absolute en ese mismo div, le quitaría su
   aporte de altura al flujo y colapsaría el contenedor a 0px (por eso
   el nombre/categoría quedaban solapados con la foto). Por eso el
   ícono vive en un span aparte, dentro del div que sigue en flujo normal. */
.dir-menu-card-noimg { cursor: default; }
.dir-menu-card-noimg-ico {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dir-orange);
  font-size: 1.8rem;
}
/* Botón "ampliar" visible siempre en móvil, aparece al hover en desktop */
.dir-menu-card-zoom {
  position: absolute;
  bottom: .5rem; right: .5rem;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(35,35,51,.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: .9;
  transition: var(--dir-transition);
  z-index: 2;
}
.dir-menu-card:hover .dir-menu-card-zoom { opacity: 1; background: var(--dir-orange); }
/* Botón "Votar": ícono flotante circular sobre la esquina de la foto */
.dir-vote-fab {
  position: absolute;
  top: .5rem; right: .5rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  min-width: 32px;
  height: 32px;
  padding: 0 .4rem;
  border: none;
  border-radius: 50px;
  background: rgba(255,255,255,.92);
  color: var(--dir-gray);
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(35,35,51,.18);
  transition: var(--dir-transition);
}
.dir-vote-fab i { font-size: .85rem; }
.dir-vote-fab:hover { color: var(--dir-orange-dark); transform: scale(1.08); }
.dir-vote-fab .dir-vote-count:empty { display: none; }
/* Votado: fondo naranja ⇒ ícono y contador en blanco */
.dir-vote-fab.dir-voted,
.dir-vote-fab.dir-voted i,
.dir-vote-fab.dir-voted .dir-vote-count {
  color: #fff !important;
}
.dir-vote-fab.dir-voted { background: var(--dir-orange); }
.dir-vote-fab.dir-voted i { animation: dirHeartPop .45s var(--dir-spring); }
.dir-menu-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: .85rem .9rem .9rem;
}
/* Nombre del producto: tono oscuro premium (el acento naranja queda
   en el tag/precio, como en el diseño de referencia) */
.dir-menu-card-body .dir-menu-name {
  color: var(--dir-ink) !important;
  order: 2;
}
.dir-menu-card-body .dir-menu-badges { order: 1; margin-bottom: .35rem; }
.dir-menu-card-body .dir-menu-desc { order: 3; }
.dir-menu-card-body .dir-menu-card-foot { order: 4; }
.dir-menu-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  padding-top: .55rem;
  flex-wrap: wrap;
}
.dir-menu-price-ask {
  font-size: .78rem;
  font-weight: 700;
  color: var(--dir-gray);
  font-style: italic;
}

.dir-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1.5px solid var(--dir-border-2);
  background: var(--dir-white);
  color: var(--dir-gray);
  font-size: .76rem;
  font-weight: 800;
  padding: .28rem .8rem;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--dir-transition);
}
.dir-vote-btn:hover { border-color: var(--dir-orange); color: var(--dir-orange-dark); }
/* Votado: fondo naranja ⇒ todo el contenido en blanco */
.dir-vote-btn.dir-voted,
.dir-vote-btn.dir-voted i,
.dir-vote-btn.dir-voted .dir-vote-label,
.dir-vote-btn.dir-voted .dir-vote-count {
  color: #fff !important;
}
.dir-vote-btn.dir-voted {
  background: var(--dir-orange);
  border-color: var(--dir-orange);
}
.dir-vote-btn.dir-voted i { animation: dirHeartPop .45s var(--dir-spring); }
.dir-vote-count {
  background: var(--dir-orange-soft);
  color: var(--dir-orange-dark);
  border-radius: 20px;
  min-width: 20px;
  padding: .05rem .45rem;
  text-align: center;
}
.dir-vote-btn.dir-voted .dir-vote-count { background: rgba(255,255,255,.25); color: #fff; }

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

/* ════════════════════════════════════════════════════════════
   OPINIONES RÁPIDAS — votos de características (1 toque, anónimo)
   ════════════════════════════════════════════════════════════ */
.dir-attr-widget {
  background: var(--dir-light);
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius);
  padding: 1.1rem 1.1rem 1.2rem;
  margin-bottom: 1.4rem;
}
.dir-attr-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--dir-ink) !important;
  margin-bottom: .2rem;
}
.dir-attr-title svg { color: var(--dir-orange); flex-shrink: 0; }
.dir-attr-hint { font-size: .8rem; color: var(--dir-gray); margin-bottom: 1rem; }
.dir-attr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .9rem;
}
.dir-attr-row {
  background: var(--dir-white);
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius-sm);
  padding: .8rem .9rem;
}
.dir-attr-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}
.dir-attr-label { font-size: .86rem; font-weight: 800; color: var(--dir-ink); }
.dir-attr-pct { font-size: .74rem; font-weight: 700; color: var(--dir-orange-dark); white-space: nowrap; }
.dir-attr-bar {
  height: 6px;
  border-radius: 4px;
  background: var(--dir-red-soft);
  overflow: hidden;
  margin-bottom: .7rem;
}
.dir-attr-bar-fill {
  height: 100%;
  background: var(--dir-green);
  border-radius: 4px;
  transition: width .35s ease;
}
.dir-attr-btns { display: flex; gap: .4rem; flex-wrap: wrap; }
.dir-attr-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border: 1.5px solid var(--dir-border-2);
  background: var(--dir-white);
  color: var(--dir-gray);
  font-size: .74rem;
  font-weight: 700;
  padding: .4rem .5rem;
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--dir-transition);
}
.dir-attr-btn:hover { border-color: var(--dir-orange-line); background: var(--dir-orange-soft); }
.dir-attr-pos.active {
  background: var(--dir-green);
  border-color: var(--dir-green);
  color: #fff !important;
}
.dir-attr-pos.active i { color: #fff !important; }
.dir-attr-neg.active {
  background: var(--dir-red);
  border-color: var(--dir-red);
  color: #fff !important;
}
.dir-attr-neg.active i { color: #fff !important; }

/* ════════════════════════════════════════════════════════════
   AGENTES BANCARIOS (sidebar de la ficha)
   ════════════════════════════════════════════════════════════ */
.dir-bank-agents {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--dir-border);
}
.dir-bank-agent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .3rem 0;
  font-size: .82rem;
}
.dir-bank-agent-name { font-weight: 700; color: var(--dir-ink); flex: 1; min-width: 0; }
.dir-bank-agent-hours { color: var(--dir-gray); white-space: nowrap; font-size: .78rem; }
.dir-bank-agent-badge {
  font-size: .68rem;
  font-weight: 800;
  padding: .12rem .55rem;
  border-radius: 20px;
  white-space: nowrap;
}
.dir-bank-agent-badge.dir-status-open { background: var(--dir-green-soft); color: var(--dir-green); }
.dir-bank-agent-badge.dir-status-closed { background: var(--dir-red-soft); color: var(--dir-red); }

/* ════════════════════════════════════════════════════════════
   MÉTODOS DE PAGO + WIFI (sidebar de la ficha)
   ════════════════════════════════════════════════════════════ */
.dir-payment-methods, .dir-wifi-block {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--dir-border);
}
.dir-payment-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.dir-payment-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--dir-ink);
  background: var(--dir-orange-soft);
  border: 1px solid var(--dir-orange-line);
  border-radius: 20px;
  padding: .28rem .7rem;
}
.dir-payment-account-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .3rem 0;
  font-size: .82rem;
  border-top: 1px dashed var(--dir-border);
}
.dir-payment-account-row:first-child { border-top: none; }
.dir-payment-account-bank { font-weight: 700; color: var(--dir-ink); }
.dir-payment-account-number { color: var(--dir-gray); font-variant-numeric: tabular-nums; }
.dir-payment-account-holder { color: var(--dir-gray); font-size: .76rem; font-style: italic; }
.dir-wifi-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .84rem;
  flex-wrap: wrap;
}
.dir-wifi-row span:first-child { font-weight: 700; color: var(--dir-ink); }
.dir-wifi-pass {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--dir-light);
  border: 1px solid var(--dir-border);
  border-radius: 6px;
  padding: .1rem .45rem;
  color: var(--dir-gray);
}

/* Reseñas */
.dir-rating-big {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.dir-rating-number {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--dir-ink);
  line-height: 1;
  letter-spacing: -.03em;
}
.dir-stars-big { font-size: 1.05rem; letter-spacing: 2px; }
/* Insignia de tiempo de respuesta, junto al resumen de calificaciones */
.dir-response-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--dir-orange-soft);
  color: var(--dir-orange-dark);
  font-size: .8rem;
  font-weight: 700;
  padding: .38rem .85rem;
  border-radius: 50px;
  margin-bottom: 1.1rem;
}
.dir-response-badge svg { color: var(--dir-orange); flex-shrink: 0; }
.dir-response-badge strong { font-weight: 800; }
.dir-response-badge small { color: var(--dir-gray); font-weight: 600; }
.dir-rate-form-wrap {
  background: var(--dir-light);
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius);
  padding: 1.2rem 1.1rem;
  margin-bottom: 1.2rem;
}
.dir-rate-title { font-size: 1.02rem; font-weight: 800; color: var(--dir-ink) !important; margin-bottom: .2rem; }
.dir-rate-label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--dir-gray);
  margin: .7rem 0 .35rem;
}
.dir-rate-label:first-child { margin-top: 0; }
.dir-rate-label-response { display: inline-flex; align-items: center; gap: .35rem; }
.dir-rate-label-response svg { color: var(--dir-orange); }
.dir-rate-label-response em { color: var(--dir-gray-light); font-style: normal; }
.dir-interactive-stars { font-size: 1.7rem; display: flex; gap: .3rem; }
.dir-interactive-stars-sm { font-size: 1.25rem; gap: .25rem; }
.dir-star-input {
  color: #d9d9e0;
  cursor: pointer;
  transition: transform .15s var(--dir-spring), color .15s ease;
}
.dir-star-input:hover { transform: scale(1.2); }
.dir-star-input.hovered,
.dir-star-input.active,
.dir-star-input.selected { color: #f8b84e; }
.dir-comment-locked {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  background: var(--dir-white);
  border: 1px dashed var(--dir-border-2);
  border-radius: var(--dir-radius-sm);
  padding: .65rem .85rem;
  font-size: .84rem;
  color: var(--dir-gray);
}
.dir-comment-locked i { color: var(--dir-orange); }
.dir-comment-login-btn {
  border: none;
  background: transparent;
  color: var(--dir-orange-dark);
  font-weight: 800;
  font-size: .84rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.dir-already-rated {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--dir-green-soft);
  color: var(--dir-green);
  border-radius: 50px;
  font-weight: 700;
  font-size: .9rem;
  padding: .55rem 1.2rem;
}
.dir-review-card {
  background: var(--dir-white);
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius);
  padding: .95rem 1.05rem;
  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: 38px; height: 38px;
  border-radius: 50%;
  background: var(--dir-orange-soft);
  color: var(--dir-orange-dark);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dir-review-meta strong { font-size: .88rem; color: var(--dir-ink); }
.dir-review-stars { font-size: .7rem; letter-spacing: 1px; }
.dir-review-date { font-size: .74rem; }
.dir-review-text { font-size: .88rem; color: var(--dir-text); margin: 0; line-height: 1.6; }
.dir-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  background: var(--dir-green-soft);
  color: var(--dir-green);
  font-size: .66rem;
  font-weight: 800;
  padding: .1rem .5rem;
  border-radius: 20px;
  margin-left: .35rem;
  vertical-align: 1px;
}

/* Sidebar de contacto */
.dir-contact-card {
  background: var(--dir-white);
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius-lg);
  padding: 1.3rem 1.2rem;
  box-shadow: var(--dir-shadow-sm);
}
.dir-sticky-sidebar { position: sticky; top: 76px; }
.dir-contact-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--dir-ink) !important;
  margin-bottom: .9rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--dir-border);
}
.dir-contact-subtitle { font-size: .9rem; font-weight: 800; color: var(--dir-ink) !important; }
.dir-action-buttons {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1rem;
}
.dir-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 50px;
  font-size: .9rem;
  font-weight: 800;
  padding: .62rem .8rem;
  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); color: #fff !important; }
.dir-action-call     { background: var(--dir-ink); color: #fff !important; }
.dir-action-maps     { background: var(--dir-orange); color: #fff !important; }
.dir-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.dir-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .86rem;
  color: var(--dir-text);
  word-break: break-word;
}
.dir-contact-list a { color: var(--dir-text); text-decoration: none; }
.dir-contact-list a:hover { color: var(--dir-orange-dark); }
.dir-contact-icon {
  color: var(--dir-orange);
  width: 18px;
  text-align: center;
  margin-top: 2px;
  flex-shrink: 0;
}
.dir-quick-schedule {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--dir-border);
}
.dir-quick-schedule-row {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--dir-text);
  padding: .22rem .45rem;
  border-radius: 8px;
}
.dir-qs-today { background: var(--dir-orange-soft); font-weight: 700; }
.dir-qs-day { font-weight: 700; color: var(--dir-ink); }
.dir-status-mini {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  font-size: .72rem;
  font-weight: 800;
  padding: .18rem .6rem;
  border-radius: 20px;
  background: var(--dir-light);
}
.dir-status-mini i { font-size: .5rem; }
.dir-status-mini.dir-status-open   { background: var(--dir-green-soft); color: var(--dir-green); }
.dir-status-mini.dir-status-closed { background: var(--dir-red-soft);  color: var(--dir-red); }
.dir-sidebar-actions { display: flex; flex-direction: column; gap: .5rem; }
.dir-like-btn-sidebar, .dir-save-btn-sidebar {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  border: 1.5px solid var(--dir-border-2);
  background: var(--dir-white);
  color: var(--dir-text);
  font-size: .88rem;
  font-weight: 700;
  padding: .55rem .95rem;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--dir-transition);
}
.dir-like-btn-sidebar:hover { border-color: var(--dir-orange); color: var(--dir-orange-dark); }
.dir-like-btn-sidebar.dir-liked {
  background: var(--dir-orange);
  border-color: var(--dir-orange);
  color: #fff !important;
}
.dir-like-btn-sidebar.dir-liked i,
.dir-like-btn-sidebar.dir-liked .dir-like-count { color: #fff !important; }
.dir-like-btn-sidebar.dir-liked i { animation: dirHeartPop .45s var(--dir-spring); }
.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; }
.dir-sidebar-ad .dir-ad-image { width: 100%; }

/* ════════════════════════════════════════════════════════════
   PUBLICIDAD
   ════════════════════════════════════════════════════════════ */
.dir-ads-strip {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .6rem 0;
}
.dir-ad-item {
  position: relative;
  border-radius: var(--dir-radius);
  overflow: hidden;
  max-width: 1060px;
  margin: 0 auto;
  width: calc(100% - 1.6rem);
  border: 1px solid var(--dir-border);
  background: var(--dir-white);
}
.dir-ad-label {
  position: absolute;
  top: .45rem; left: .45rem;
  z-index: 2;
  background: rgba(35,35,51,.55);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .1rem .45rem;
  border-radius: 6px;
}
.dir-ad-link { display: block; }
.dir-ad-image {
  width: 100%;
  display: block;
  max-height: 260px;
  object-fit: cover;
}

/* Popup publicitario sutil */
.dir-adpop {
  position: fixed;
  right: .9rem;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px) + .8rem);
  z-index: 1050;
  width: min(300px, calc(100vw - 1.8rem));
  background: var(--dir-white);
  border: 1px solid var(--dir-border);
  border-radius: var(--dir-radius);
  box-shadow: var(--dir-shadow-lg);
  overflow: hidden;
  transform: translateX(calc(100% + 1.2rem));
  transition: transform .5s var(--dir-spring);
}
.dir-adpop.show { transform: none; }
@media (min-width: 768px) { .dir-adpop { bottom: 1.2rem; } }
.dir-adpop-label {
  position: absolute;
  top: .4rem; left: .4rem;
  z-index: 2;
  background: rgba(35,35,51,.55);
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .08rem .4rem;
  border-radius: 6px;
}
.dir-adpop-close {
  position: absolute;
  top: .4rem; right: .4rem;
  z-index: 2;
  width: 26px; height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(35,35,51,.55);
  color: #fff;
  font-size: .72rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dir-adpop-img { width: 100%; display: block; }

/* Popup promocional del negocio */
.dir-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1070;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(35,35,51,.55);
  padding: 1rem;
}
.dir-popup-overlay.show,
.dir-popup-overlay.open { display: flex; }
.dir-popup-box {
  background: var(--dir-white);
  border-radius: var(--dir-radius-lg);
  max-width: 420px;
  width: 100%;
  overflow: hidden;
  position: relative;
  animation: dirFadeUp .35s var(--dir-spring) both;
  max-height: 88vh;
  overflow-y: auto;
}
.dir-popup-close {
  position: absolute;
  top: .7rem; right: .7rem;
  z-index: 2;
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(35,35,51,.5);
  color: #fff;
  cursor: pointer;
}
.dir-popup-img { width: 100%; display: block; }
.dir-popup-body { padding: 1.3rem 1.3rem 1.4rem; text-align: center; }
.dir-popup-title { font-size: 1.2rem; font-weight: 800; color: var(--dir-ink) !important; margin-bottom: .5rem; }
.dir-popup-content { color: var(--dir-text); font-size: .9rem; }
.dir-popup-cta { margin-top: .9rem; }

/* ════════════════════════════════════════════════════════════
   MODAL DE AUTENTICACIÓN
   ════════════════════════════════════════════════════════════ */
.dir-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 1075;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(35,35,51,.55);
  padding: 1rem;
}
.dir-auth-overlay.show,
.dir-auth-overlay.open { display: flex; }
.dir-auth-box {
  background: var(--dir-white);
  border-radius: var(--dir-radius-lg);
  max-width: 400px;
  width: 100%;
  padding: 2rem 1.6rem 1.6rem;
  text-align: center;
  position: relative;
  animation: dirFadeUp .35s var(--dir-spring) both;
}
.dir-auth-close {
  position: absolute;
  top: .8rem; right: .8rem;
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--dir-light);
  color: var(--dir-gray);
  cursor: pointer;
}
.dir-auth-icon {
  width: 60px; height: 60px;
  margin: 0 auto .9rem;
  border-radius: 20px;
  background: var(--dir-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(242,140,40,.32);
}
.dir-auth-title { font-size: 1.2rem; font-weight: 800; color: var(--dir-ink) !important; margin-bottom: .4rem; }
.dir-auth-sub { font-size: .88rem; color: var(--dir-gray); margin-bottom: 1.2rem; }
.dir-auth-divider {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: .9rem 0;
  color: var(--dir-gray-light);
  font-size: .78rem;
}
.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-text) !important;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none !important;
  border: 1.5px solid var(--dir-border-2);
  border-radius: 50px;
  padding: .6rem 1.4rem;
  transition: var(--dir-transition);
}
.dir-auth-alt:hover { border-color: var(--dir-orange); color: var(--dir-orange-dark) !important; }
.dir-auth-note {
  margin: 1.1rem 0 0;
  font-size: .76rem;
  color: var(--dir-gray-light);
}
.dir-auth-note i { color: var(--dir-red); }

/* "¿Aún no tienes cuenta?" — enlace al registro con correo y celular */
.dir-auth-newacct {
  margin: .9rem 0 0;
  font-size: .84rem;
  color: var(--dir-gray-light);
}
.dir-auth-newacct a {
  color: var(--dir-orange);
  font-weight: 800;
  text-decoration: none;
}
.dir-auth-newacct a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   FEEDBACK (FAB + modal)
   ════════════════════════════════════════════════════════════ */
.dir-feedback-fab {
  position: fixed;
  left: .9rem;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px) + .8rem);
  z-index: 1042;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--dir-border);
  background: var(--dir-white);
  color: var(--dir-ink);
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 800;
  padding: .55rem .95rem;
  cursor: pointer;
  box-shadow: var(--dir-shadow);
  transition: var(--dir-transition);
}
@media (min-width: 768px) { .dir-feedback-fab { left: 1.2rem; bottom: 1.2rem; } }
.dir-feedback-fab:hover {
  border-color: var(--dir-orange);
  color: var(--dir-orange-dark);
  transform: translateY(-2px);
}
.dir-feedback-fab svg { color: var(--dir-orange); }
.dir-fb-overlay {
  position: fixed;
  inset: 0;
  z-index: 1078;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(35,35,51,.55);
  padding: 1rem;
}
.dir-fb-overlay.show,
.dir-fb-overlay.open { display: flex; }
.dir-fb-box {
  background: var(--dir-white);
  border-radius: var(--dir-radius-lg);
  max-width: 430px;
  width: 100%;
  padding: 2rem 1.6rem 1.6rem;
  text-align: center;
  position: relative;
  animation: dirFadeUp .35s var(--dir-spring) both;
}
.dir-fb-close {
  position: absolute;
  top: .8rem; right: .8rem;
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--dir-light);
  color: var(--dir-gray);
  cursor: pointer;
}
.dir-fb-icon {
  width: 60px; height: 60px;
  margin: 0 auto .9rem;
  border-radius: 20px;
  background: var(--dir-orange-soft);
  color: var(--dir-orange);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dir-fb-title { font-size: 1.15rem; font-weight: 800; color: var(--dir-ink) !important; margin-bottom: .35rem; }
.dir-fb-sub { font-size: .85rem; color: var(--dir-gray); margin-bottom: 1rem; }
.dir-fb-textarea, .dir-fb-input {
  width: 100%;
  border: 1.5px solid var(--dir-border-2);
  border-radius: var(--dir-radius-sm);
  padding: .65rem .8rem;
  font-size: .88rem;
  color: var(--dir-ink);
  outline: none;
  transition: var(--dir-transition);
  margin-bottom: .6rem;
  background: var(--dir-white);
}
.dir-fb-textarea:focus, .dir-fb-input:focus {
  border-color: var(--dir-orange);
  box-shadow: 0 0 0 4px rgba(242,140,40,.12);
}
.dir-fb-msg {
  border-radius: var(--dir-radius-sm);
  font-size: .84rem;
  font-weight: 600;
  padding: .55rem .8rem;
  margin-bottom: .6rem;
}
.dir-fb-msg.ok  { background: var(--dir-green-soft); color: var(--dir-green); }
.dir-fb-msg.err { background: var(--dir-red-soft);  color: var(--dir-red); }
.dir-fb-submit { width: 100%; }

/* ════════════════════════════════════════════════════════════
   BOTTOM NAV MÓVIL (estilo app)
   ════════════════════════════════════════════════════════════ */
.dir-bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1045;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--dir-border);
  padding: .3rem .15rem calc(.3rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 18px rgba(35,35,51,.07);
  overflow: visible;   /* el círculo de "Cerca" nunca se corta */
}
.dir-bnav-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .16rem;
  color: var(--dir-gray);
  font-size: .6rem;
  font-weight: 700;
  text-decoration: none !important;
  border: none;
  background: transparent;
  padding: .28rem 0 .18rem;
  position: relative;
  transition: color .2s ease;
}
/* Etiquetas más finas y elegantes */
.dir-bnav-label {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
  line-height: 1.15;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .015em;
}
.dir-bnav-item:hover { color: var(--dir-orange-dark); }
.dir-bnav-item.active { color: var(--dir-orange-dark); }
/* Píldora contenida alrededor del ícono (nunca se sale del menú) */
.dir-bnav-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 26px;
  border-radius: 50px;
  transition: background .2s ease;
}
.dir-bnav-item.active .dir-bnav-ico { background: var(--dir-orange-soft); }
.dir-bnav-ico svg { transition: transform .2s var(--dir-spring); }
.dir-bnav-item:active .dir-bnav-ico svg { transform: scale(.85); }
.dir-bnav-near {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .14rem;
  color: var(--dir-gray);
  font-size: .6rem;
  font-weight: 700;
  text-decoration: none !important;
  position: relative;
  padding: .28rem 0 .18rem;
}
/* Pin SIEMPRE blanco (el tema lo pintaba oscuro) y círculo más fino */
.dir-bnav-near-circle,
.dir-bnav-near-circle svg {
  color: #fff !important;
  fill: currentColor;
}
.dir-bnav-near-circle {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--dir-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -12px;
  border: 3px solid #fff;
  box-shadow: 0 5px 16px rgba(242,140,40,.4);
  transition: transform .25s var(--dir-spring);
  flex-shrink: 0;
}
.dir-bnav-near:hover .dir-bnav-near-circle,
.dir-bnav-near.active .dir-bnav-near-circle { transform: scale(1.08); }
.dir-bnav-near.active { color: var(--dir-orange); }

/* Deja aire al final en móvil para no tapar contenido con el nav */
@media (max-width: 767.98px) {
  .dir-page { padding-bottom: 66px; }
}

/* ════════════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════════════ */
.dir-toast {
  position: fixed;
  left: 50%;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(14px);
  z-index: 1090;
  background: var(--dir-ink);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  padding: .6rem 1.2rem;
  border-radius: 50px;
  box-shadow: var(--dir-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s var(--dir-spring);
  max-width: calc(100vw - 2rem);
  text-align: center;
}
.dir-toast.show { opacity: 1; transform: translateX(-50%); }
.dir-toast.ok i  { color: #5ad88e; margin-right: .3rem; }
.dir-toast.err i { color: #ff8a8a; margin-right: .3rem; }
@media (min-width: 768px) { .dir-toast { bottom: 2rem; } }

/* ════════════════════════════════════════════════════════════
   LIGHTBOX GALERÍA
   ════════════════════════════════════════════════════════════ */
#dirLightbox {
  position: fixed;
  inset: 0;
  z-index: 1085;
  background: rgba(24,24,34,.93);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1.4rem;
}
#dirLightbox.open { display: flex; }
#dirLightbox img {
  max-width: 94vw;
  max-height: 80vh;
  border-radius: 12px;
  animation: dirFadeUp .3s ease both;
}
#dirLightbox .dir-lb-caption { color: rgba(255,255,255,.85); margin-top: .8rem; font-size: .9rem; }
#dirLightbox .dir-lb-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 38px; height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
#dirLightbox .dir-lb-prev, #dirLightbox .dir-lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
}
#dirLightbox .dir-lb-prev { left: .9rem; }
#dirLightbox .dir-lb-next { right: .9rem; }

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

@media (max-width: 767.98px) {
  .dir-section { padding: 2.2rem 0; }
  .dir-hero-v2 { padding: 1.4rem 0 2rem; }
  .dir-hero-v2-content, .dir-hero-topbar { text-align: left; }
  /* "¡Hola! Descubre lo mejor de tu ciudad" en UNA sola línea: se
     oculta el salto de línea y la fuente se achica proporcional al
     ancho (vw) para que siempre quepa, sin importar el modelo de
     celular. */
  .dir-hero-v2-title {
    white-space: nowrap;
    font-size: clamp(.72rem, 3.6vw, .95rem);
    letter-spacing: -.01em;
  }
  .dir-hero-v2-title br { display: none; }
  .dir-hero-hello { gap: .18rem; }
  .dir-hello-pin { width: 16px; height: 16px; }
  .dir-hero-v2-sub { font-size: .92rem; margin-bottom: 1.2rem; }
  .dir-hero-badge { margin-bottom: .7rem; }
  .dir-brand-logo { width: 38px; height: 38px; }
  .dir-brand-name { font-size: 1.02rem; }
  .dir-session-link span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }

  /* Sin decoraciones que invadan el contenido en pantallas pequeñas */
  .dir-hero-bg-ring, .dir-hero-blob { display: none; }

  .dir-sw-main { padding: .32rem .32rem .32rem .9rem; }
  .dir-sw-btn-text { display: none; }
  .dir-sw-btn { padding: .55rem .8rem; }
  /* Filtros del hero en MÁXIMO 2 filas: los chips crecen para llenar
     todo el ancho de la pantalla (se ve parejo y estético) */
  .dir-sw-filters {
    justify-content: stretch;
    flex-wrap: wrap;
    gap: .35rem;
  }
  .dir-sw-chip {
    font-size: .72rem;
    padding: .46rem .55rem;
    gap: .28rem;
    flex: 1 1 auto;
    justify-content: center;
  }
  .dir-sw-filter-wrap { flex: 1 1 auto; display: flex; }
  .dir-sw-filter-wrap .dir-sw-chip { width: 100%; }
  .dir-sw-chip svg { width: 11px; height: 11px; }
  .dir-sw-chip .dir-chip-arrow { width: 9px; height: 9px; }
  .dir-open-dot { width: 7px; height: 7px; }
  .dir-sw-dropdown { left: 0; transform: none; }

  /* Chips del listado también en varias filas (nada se corta) */
  .dir-chips-scroll-row {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .dir-chip {
    font-size: .74rem;
    padding: .36rem .7rem;
    gap: .3rem;
  }
  .dir-chip-select { font-size: .74rem; max-width: 104px; }
  .dir-hero-stats { max-width: 100%; }
  .dir-hero-promo { padding: 1rem 1.1rem; }
  .dir-hero-promo-ico { display: none; }
  .dir-hero-tagline { justify-content: flex-start; }

  /* Categorías: 2 columnas compactas (top 10 = 5 filas) */
  .dir-cat-card { padding: .85rem .5rem .7rem; gap: .35rem; }
  .dir-cat-icon { width: 46px; height: 46px; border-radius: 15px; }
  .dir-cat-img { width: 26px; height: 26px; }
  .dir-cat-svg { width: 24px; height: 24px; }
  .dir-cat-name { font-size: .8rem; }
  .dir-cat-count { font-size: .66rem; }

  .dir-card-body { padding: 1.35rem .8rem .75rem; }
  .dir-card-title { font-size: .92rem; }
  .dir-card-desc { display: none; }
  .dir-card-features { display: none; }
  .dir-rating-chip { font-size: .74rem; padding: .2rem .5rem; }

  /* Ficha en móvil: la info va DEBAJO del banner sobre fondo navy,
     compacta y sin espacios muertos (nombre siempre visible) */
  .dir-detail-hero { background: var(--dir-ink); padding: 0 0 1rem; }
  .dir-detail-banner { height: 160px; }
  .dir-detail-banner-placeholder { height: 12px; }   /* sin banner: casi nada */
  .dir-detail-hero-overlay { inset: 0 0 auto 0; height: 160px; }
  .dir-detail-hero-content {
    position: relative;
    align-items: center;      /* logo centrado junto al bloque de info */
    gap: .8rem;
    margin-top: 0;
    padding-top: .5rem;
    padding-bottom: 0;
  }
  /* Con foto de portada, el logo se traslapa un poco sobre ella */
  .dir-detail-hero:has(.dir-detail-banner) .dir-detail-hero-content {
    margin-top: -24px;
    padding-top: 0;
  }
  .dir-detail-logo, .dir-detail-logo-placeholder {
    width: 66px;
    height: 66px;
    border-radius: 18px;
  }
  .dir-detail-hero-info { padding-top: 0; min-width: 0; }
  .dir-detail-name { font-size: 1.3rem; margin-bottom: .3rem; }
  .dir-detail-status-row { margin-bottom: .35rem; }
  .dir-detail-meta { margin-bottom: .4rem; }
  .dir-detail-metrics { gap: .45rem; }
  .dir-detail-container { padding-top: 1.1rem; }

  /* Menú/Servicios en móvil: tarjetas compactas pero con foto grande */
  .dir-menu-toolbar { gap: .5rem; }
  .dir-menu-search-wrap { flex: 1 1 100%; }
  .dir-menu-grid { gap: .7rem; }
  .dir-menu-card-body { padding: .65rem .7rem .7rem; }
  .dir-menu-name { font-size: .86rem; }
  .dir-menu-desc { font-size: .74rem; -webkit-line-clamp: 2; }
  .dir-menu-price { font-size: .92rem; }
  .dir-menu-card-foot { gap: .4rem; }
  .dir-vote-fab { min-width: 30px; height: 30px; font-size: .72rem; }

  .dir-near-cta { padding: 1.2rem 1.1rem; }
  .dir-near-cta-btn { width: 100%; }
  .dir-pwa-card { padding: 1.25rem 1.1rem; }
  .dir-pwa-card-actions { width: 100%; }
  .dir-pwa-install-btn { width: 100%; }

  /* Barra del listado: la píldora ocupa todo el ancho */
  .dir-sw-main-listing { padding: .28rem .28rem .28rem .85rem; }
  .dir-sw-main-listing .dir-sw-btn-text { display: none; }
  .dir-sw-main-listing .dir-sw-btn { padding: .5rem .75rem; }
  .dir-sort-bar { flex-direction: column; align-items: stretch; gap: .5rem; }
  .dir-sort-pills { width: 100%; }
  .dir-results-count { padding-left: .2rem; }

  .dir-title-ico { width: 28px; height: 28px; border-radius: 9px; vertical-align: -7px; }
  .dir-title-ico svg { width: 15px; height: 15px; }

  .dir-feedback-fab .dir-feedback-fab-label { display: none; }
  .dir-feedback-fab { padding: .62rem; border-radius: 50%; }
}

@media (max-width: 400px) {
  .dir-hero-stat-num { font-size: 1.25rem; }
  .dir-sort-label { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   v17.0.15 — inicio más limpio, "Más filtros", SEO por ciudad
   ══════════════════════════════════════════════════════════════════════ */
.dir-hero-v2 .dir-daypart { margin: .2rem auto .9rem; }
.dir-hero-v2-title { margin-top: 0; }
.dir-hero-v2-sub { max-width: 620px; margin-left: auto; margin-right: auto; }
.dir-sw-more-btn.active { background: var(--dir-orange, #F28C28); color: #fff; border-color: var(--dir-orange, #F28C28); }
.dir-sw-more { display: contents; }
.dir-sw-more[hidden] { display: none; }
.dir-hero-stats { margin-top: 1.4rem; }
.dir-detail-seoline {
    margin: .15rem 0 .6rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--dir-orange, #F28C28);
    letter-spacing: .01em;
}
.dir-seo-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin: .9rem 0 .4rem;
}
.dir-seo-links-label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6b7280;
    margin-right: .25rem;
}
.dir-seo-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .8rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #1f2937;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
}
.dir-seo-chip small { color: #9ca3af; font-weight: 600; }
.dir-seo-chip:hover { border-color: var(--dir-orange, #F28C28); color: var(--dir-orange, #F28C28); transform: translateY(-1px); }
.dir-payment-chip .cod-ic { vertical-align: -2px; margin-right: 2px; }
@media (max-width: 767px) {
    .dir-hero-v2-title { font-size: 1.7rem; line-height: 1.15; }
    .dir-hero-v2-sub { font-size: .9rem; }
    .dir-seo-links { gap: .35rem; }
    .dir-seo-chip { font-size: .78rem; padding: .32rem .65rem; }
}


/* ── v17.0.16: tarjeta de producto destacado con botón Agregar ── */
.dir-fp-scroll > .dir-fp-card {
  display: flex !important; flex-direction: column;
  flex: 0 0 168px !important; width: 168px !important; max-width: 168px !important;
  overflow: hidden !important;
}
@media (min-width: 768px) { .dir-fp-scroll > .dir-fp-card { flex-basis: 190px !important; width: 190px !important; max-width: 190px !important; } }
/* Flechas del carrusel: el tema pinta los botones de blanco; forzamos el trazo */
.dir-fp-nav { color: #232333 !important; }
.dir-fp-nav svg { width: 16px !important; height: 16px !important; stroke: #232333 !important; color: #232333 !important; display: block; }
.dir-fp-nav:hover, .dir-fp-nav:hover svg { color: #fff !important; stroke: #fff !important; }
.dir-fp-link { display: block; color: inherit; text-decoration: none; }
.dir-fp-link:hover { color: inherit; }
.mca-orders-hint { color: var(--dir-orange-dark, #dd7511) !important; font-weight: 700; }
.mca-orders-hint svg { vertical-align: -3px; }


/* ══════════════════════════════════════════════════════════════════════
   v17.0.16.2: Encabezado de la ficha del negocio (tarjeta sobre banner)
══════════════════════════════════════════════════════════════════════ */
.dir-hero3 { position: relative; margin-bottom: 1.4rem; }
.dir-hero3-bg { position: relative; height: 150px; background: linear-gradient(135deg, #232333 0%, #2b2b3d 60%, #3a2a18 100%); overflow: hidden; color: #fff; }
.dir-hero3-banner { width: 100%; height: 100%; object-fit: cover; display: block; }
.dir-hero3-skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 90px; }
.dir-hero3-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(35,35,51,.55), rgba(35,35,51,.05)); pointer-events: none; }
.dir-hero3-inner { position: relative; margin-top: -64px; }
.dir-hero3-card { background: #fff; border: 1px solid var(--dir-border, #e8e9ee); border-radius: 22px; box-shadow: 0 14px 40px rgba(35,35,51,.12); padding: 16px 16px 14px; animation: dirFadeUp .5s var(--dir-spring, ease) both; }
.dir-hero3-top { display: flex; gap: 14px; align-items: flex-start; }
.dir-hero3-logo { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 18px; border: 1px solid var(--dir-border, #e8e9ee); background: #fff; box-shadow: 0 6px 18px rgba(35,35,51,.10); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--dir-orange, #F28C28); margin-top: -34px; }
.dir-hero3-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dir-hero3-title { min-width: 0; flex: 1; }
.dir-hero3-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 4px; }
.dir-hero3-crumbs a { color: var(--dir-orange-dark, #dd7511) !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 3px; }
.dir-hero3-sep { width: 4px; height: 4px; border-radius: 50%; background: #c9ccd6; display: inline-block; }
.dir-page .dir-hero3-name { font-size: clamp(1.35rem, 1rem + 2vw, 2rem) !important; font-weight: 800 !important; color: #232333 !important; -webkit-text-fill-color: #232333 !important; line-height: 1.15 !important; letter-spacing: -.02em; margin: 0 0 8px !important; text-align: left !important; text-shadow: none !important; }
.dir-hero3-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dir-hero3 .dir-status-badge.dir-hero3-status { background: #f6f7fa; border: 1px solid #e8e9ee; color: #43454e !important; padding: 5px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.dir-hero3 .dir-status-badge.dir-status-open { background: #dff3e8; border-color: #bfe8d1; color: #1e9e63 !important; }
.dir-hero3 .dir-status-badge.dir-status-closed { background: #fbe4e2; border-color: #f3c7c3; color: #c8322b !important; }
.dir-hero3-featured, .dir-hero3-orders { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; text-decoration: none !important; }
.dir-hero3-featured { background: #fff4e8; color: var(--dir-orange-dark, #dd7511) !important; border: 1px solid #fde3c4; }
.dir-hero3-orders { background: #232333; color: #fff !important; border: 1px solid #232333; }
.dir-hero3-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef0f4; }
.dir-hero3-rating { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: #43454e; }
.dir-hero3-stars { display: inline-flex; gap: 1px; color: #F5A623; }
.dir-hero3-rating strong { color: #232333; font-size: 1rem; }
.dir-hero3-rating-n { color: #6b6e76; font-size: .82rem; }
.dir-hero3-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dir-page .dir-hero3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 12px; border: 1.5px solid #e8e9ee; background: #fff; color: #232333 !important; font-weight: 700; font-size: .86rem; cursor: pointer; text-decoration: none !important; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.dir-page .dir-hero3-btn span, .dir-page .dir-hero3-btn i, .dir-page .dir-hero3-btn svg { color: inherit !important; -webkit-text-fill-color: currentColor; }
.dir-page .dir-hero3-btn:hover { border-color: #232333; transform: translateY(-1px); }
.dir-page .dir-hero3-btn:active { transform: scale(.97); }
.dir-hero3-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #f1f2f6; color: #232333 !important; font-size: .74rem; display: inline-flex; align-items: center; justify-content: center; }
.dir-page .dir-hero3-btn.dir-liked { background: var(--dir-orange, #F28C28); border-color: var(--dir-orange, #F28C28); color: #fff !important; }
.dir-page .dir-hero3-btn.dir-liked .dir-hero3-count { background: rgba(255,255,255,.25); color: #fff !important; }
.dir-page .dir-hero3-btn.dir-liked i { animation: dirHeartPop .45s var(--dir-spring, ease); }
.dir-page .dir-hero3-btn.dir-saved { background: #232333; border-color: #232333; color: #fff !important; }
.dir-page .dir-hero3-btn.dir-saved svg { fill: currentColor; }
.dir-page .dir-hero3-btn-wa { background: #25D366; border-color: #25D366; color: #fff !important; }
.dir-page .dir-hero3-btn-wa:hover { background: #1ebe5b; border-color: #1ebe5b; }
@media (max-width: 575.98px) {
  .dir-hero3-bg { height: 120px; }
  .dir-hero3-inner { margin-top: -54px; padding-left: 12px; padding-right: 12px; }
  .dir-hero3-card { padding: 14px 14px 12px; border-radius: 18px; }
  .dir-hero3-logo { flex-basis: 64px; width: 64px; height: 64px; margin-top: -30px; border-radius: 16px; }
  .dir-hero3-actions { width: 100%; }
  .dir-hero3-actions .dir-hero3-btn { flex: 1; }
}
@media (min-width: 992px) {
  .dir-hero3-bg { height: 220px; }
  .dir-hero3-inner { margin-top: -80px; }
  .dir-hero3-card { padding: 22px 24px 18px; }
  .dir-hero3-logo { flex-basis: 96px; width: 96px; height: 96px; border-radius: 22px; margin-top: -48px; }
}

/* Flechas del carrusel dibujadas con CSS (no dependen del SVG ni del tema) */
.dir-fp-nav { position: relative; }
.dir-fp-nav svg { display: none !important; }
.dir-fp-nav::before { content: ""; display: block; width: 9px; height: 9px; border-right: 2.5px solid #232333; border-bottom: 2.5px solid #232333; transform: rotate(135deg); margin-left: 3px; }
.dir-fp-next::before { transform: rotate(-45deg); margin-left: -3px; }
.dir-fp-nav:hover::before { border-color: #fff; }


/* ── v17.0.17: márgenes en móvil (el tema quita el padding del .container) y spans de títulos ── */
@media (max-width: 768.98px) {
  .dir-page .container { padding-left: 16px !important; padding-right: 16px !important; max-width: 100% !important; }
  .dir-page .container-fluid.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .dir-page .row { margin-left: -8px; margin-right: -8px; }
  .dir-page .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
}
.dir-page h1 span, .dir-page h2 span, .dir-page h3 span, .dir-page h4 span,
.dir-page .dir-saved-title span, .dir-page .dir-accent-text { font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; font-family: inherit !important; }
.dir-rate-login { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border: 1px dashed #d9dbe3; border-radius: 16px; background: #f9fafb; }
.dir-rate-login p { margin: 0; color: #43454e; }


/* Píldora de sesión: acceso a Mi cuenta en escritorio */
.dir-session-pill { gap: 8px; flex-wrap: wrap; }
.dir-session-link-primary { background: var(--dir-ink, #232333) !important; border-color: var(--dir-ink, #232333) !important; color: #fff !important; }
.dir-session-link-primary span { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.dir-session-link-primary svg { color: #FFB366 !important; }
.dir-session-link-primary:hover { background: var(--dir-orange, #F28C28) !important; border-color: var(--dir-orange, #F28C28) !important; }


/* ── v17.0.17.2: margen lateral de 24px en móvil (igual que el encabezado del sitio) ── */
@media (max-width: 768.98px) {
  .dir-page .container, .dir-page .mca-container, .dir-page .dir-listing-body > .container { padding-left: 24px !important; padding-right: 24px !important; }
  .dir-page .dir-hero3-inner { padding-left: 16px !important; padding-right: 16px !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   v17.0.17.3 · Menú / servicios: tarjetas compactas y premium
══════════════════════════════════════════════════════════════════════ */
.dir-page .dir-menu-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
@media (min-width: 576px) { .dir-page .dir-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } }
@media (min-width: 992px) { .dir-page .dir-menu-grid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)) !important; gap: 14px !important; } }
.dir-page .dir-menu-card {
  display: flex !important; flex-direction: column; min-width: 0;
  background: #fff; border: 1px solid #ebedf2 !important; border-radius: 16px !important; overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(35,35,51,.04); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  animation: dirFadeUp .45s ease both;
}
.dir-page .dir-menu-card:nth-child(2) { animation-delay: .05s; }
.dir-page .dir-menu-card:nth-child(3) { animation-delay: .1s; }
.dir-page .dir-menu-card:nth-child(4) { animation-delay: .15s; }
.dir-page .dir-menu-card:nth-child(5) { animation-delay: .2s; }
.dir-page .dir-menu-card:nth-child(6) { animation-delay: .25s; }
.dir-page .dir-menu-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(35,35,51,.12); border-color: #f5c99b !important; }
.dir-page .dir-menu-card-media, .dir-page .dir-menu-card-noimg { padding-top: 66% !important; background: linear-gradient(135deg, #fff4e8 0%, #fde9d3 100%) !important; }
.dir-page .dir-menu-card-noimg-ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #e7a866 !important; font-size: 1.35rem !important; }
.dir-page .dir-menu-card-noimg-ico i { font-size: 1.35rem !important; color: #e7a866 !important; }
.dir-page .dir-vote-fab { top: 8px !important; right: 8px !important; height: 28px !important; min-width: 28px; padding: 0 8px !important; border-radius: 999px !important; font-size: .74rem !important; box-shadow: 0 4px 12px rgba(35,35,51,.12); }
.dir-page .dir-vote-fab i { font-size: .74rem !important; }
.dir-page .dir-menu-card-body { padding: 10px 12px 12px !important; display: flex !important; flex-direction: column; gap: 4px; flex: 1; }
.dir-page .dir-menu-badges { order: 0 !important; margin: 0 0 2px !important; gap: 4px !important; }
.dir-page .dir-menu-tag { font-size: .62rem !important; padding: 2px 7px !important; border-radius: 999px !important; letter-spacing: .02em; }
.dir-page .dir-menu-tag i { font-size: .6rem !important; }
.dir-page .dir-menu-name { font-size: .95rem !important; font-weight: 800 !important; line-height: 1.2 !important; margin: 0 !important; color: #232333 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dir-page .dir-menu-desc { font-size: .8rem !important; line-height: 1.35 !important; color: #6b6e76 !important; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dir-page .dir-menu-card-foot { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px; margin-top: auto !important; padding-top: 8px !important; }
.dir-page .dir-menu-price-wrap { text-align: left !important; }
.dir-page .dir-menu-price { font-size: 1rem !important; font-weight: 800 !important; color: #dd7511 !important; line-height: 1.1 !important; }
.dir-page .dir-price-old { font-size: .72rem !important; }
.dir-page .dir-price-diff { font-size: .68rem !important; }
.dir-page .dir-menu-price-ask { font-size: .78rem !important; color: #6b6e76 !important; }
.dir-page .dir-menu-card-foot .mca-add-wrap { margin: 0 !important; justify-content: flex-end !important; flex: 0 0 auto; }
.dir-page .dir-menu-card-foot .mca-add { min-height: 34px !important; padding: 6px 12px !important; font-size: .8rem !important; border-radius: 10px !important; gap: 4px !important; box-shadow: 0 4px 12px rgba(242,140,40,.25) !important; }
.dir-page .dir-menu-card-foot .mca-add svg { width: 14px; height: 14px; }
.dir-page .dir-menu-card-foot .mca-add-login { background: #232333 !important; box-shadow: 0 4px 12px rgba(35,35,51,.2) !important; }
.dir-page .dir-menu-card-foot .mca-qty { padding: 1px !important; border-radius: 10px !important; }
.dir-page .dir-menu-card-foot .mca-qty-btn { width: 28px !important; height: 28px !important; }
.dir-page .dir-menu-card-foot .mca-qty-val { min-width: 20px !important; font-size: .9rem !important; }
.dir-page .mca-unavailable, .dir-page .mca-closed-badge { margin-top: 0 !important; font-size: .7rem !important; padding: 4px 8px !important; }
.dir-page .mca-orders-hint { display: flex; align-items: center; gap: 8px; background: #fff4e8 !important; border: 1px solid #fde3c4; border-radius: 12px; padding: 10px 12px !important; font-size: .85rem !important; }
@media (max-width: 575.98px) {
  .dir-page .dir-menu-card-body { padding: 8px 10px 10px !important; }
  .dir-page .dir-menu-name { font-size: .86rem !important; }
  .dir-page .dir-menu-desc { font-size: .74rem !important; }
  .dir-page .dir-menu-price { font-size: .92rem !important; }
  .dir-page .dir-menu-card-foot .mca-add span { display: none; }
  .dir-page .dir-menu-card-foot .mca-add { width: 34px; padding: 0 !important; justify-content: center; }
  .dir-page .dir-menu-card-foot .mca-add svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .dir-page .dir-menu-card { animation: none !important; transition: none !important; } }


/* ── v17.0.18.3: "Cerrado ahora" / "No disponible" dentro de la tarjeta de producto destacado (móvil y tablet) ── */
.dir-page .dir-fp-card .dir-fp-body { overflow: hidden; }
.dir-page .dir-fp-card .dir-fp-foot { flex-wrap: wrap; row-gap: .35rem; }
.dir-page .dir-fp-card .mca-closed-badge,
.dir-page .dir-fp-card .mca-unavailable { display: block !important; flex: 1 1 100%; width: auto; max-width: 100%; box-sizing: border-box; margin: .35rem 0 0 !important; padding: 6px 8px !important; text-align: center; white-space: normal; font-size: .72rem !important; line-height: 1.2; border-radius: 10px; }
.dir-page .dir-fp-card .mca-add-wrap { padding: 0; margin: .35rem 0 0; flex: 1 1 100%; justify-content: stretch; }
.dir-page .dir-fp-card .mca-add-wrap .mca-add { width: 100%; justify-content: center; }
.dir-page .dir-fp-card .mca-add-wrap .mca-qty { width: 100%; justify-content: space-between; }


/* ── v17.0.18.3.1: tarjeta de producto destacado = un solo bloque (el botón/“Cerrado” quedan dentro) ── */
.dir-page .dir-fp-scroll { align-items: stretch; padding-bottom: 12px !important; }
.dir-page .dir-fp-scroll > .dir-fp-card { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0; background: #fff !important; border: 1px solid var(--dir-border) !important; border-radius: var(--dir-radius) !important; box-shadow: 0 2px 10px rgba(35,35,51,.05); overflow: hidden !important; }
.dir-page .dir-fp-card > .dir-fp-link { display: flex !important; flex-direction: column; flex: 1 1 auto !important; min-height: 0; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; }
.dir-page .dir-fp-card > .dir-fp-link .dir-fp-body { flex: 1 1 auto; }
.dir-page .dir-fp-card > .mca-add-wrap { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 10px 10px !important; }
.dir-page .dir-fp-card > .mca-add-wrap .mca-add { width: 100%; justify-content: center; min-height: 38px; box-shadow: none !important; }
.dir-page .dir-fp-card > .mca-add-wrap .mca-qty { width: 100%; justify-content: space-between; }
.dir-page .dir-fp-card > .mca-closed-badge,
.dir-page .dir-fp-card > .mca-unavailable { flex: 0 0 auto !important; display: block !important; margin: 0 10px 10px !important; padding: 8px !important; text-align: center; border-radius: 10px; font-size: .72rem !important; }

/* ── Menú del negocio: precio y Agregar en una sola línea ── */
.dir-page .dir-menu-card-foot { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; padding-top: 8px !important; margin-top: auto !important; }
.dir-page .dir-menu-card-foot .dir-menu-price-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.dir-page .dir-menu-card-foot .dir-menu-price { font-size: .9rem; white-space: nowrap; }
.dir-page .dir-menu-card-foot .dir-menu-price-ask { flex: 1 1 auto; min-width: 0; font-size: .74rem; }
.dir-page .dir-menu-card-foot .mca-add-wrap { flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; }
.dir-page .dir-menu-card-foot .mca-add { min-height: 34px; padding: 6px 10px; font-size: .8rem; gap: 4px; border-radius: 10px; white-space: nowrap; }
.dir-page .dir-menu-card-foot .mca-add svg { width: 14px; height: 14px; }
.dir-page .dir-menu-card-foot .mca-qty { padding: 1px; }
.dir-page .dir-menu-card-foot .mca-qty-btn { width: 30px; height: 30px; }
.dir-page .dir-menu-card-foot .mca-qty-val { min-width: 22px; font-size: .85rem; }
.dir-page .dir-menu-card-foot .mca-closed-badge,
.dir-page .dir-menu-card-foot .mca-unavailable { flex: 0 0 auto; margin: 0 !important; padding: 5px 8px !important; font-size: .68rem !important; white-space: nowrap; }


/* ── v17.0.18.3.2: pie del menú siempre en una línea; el botón se compacta según el ancho real de la tarjeta ── */
.dir-page .dir-menu-card-body { container-type: inline-size; }
.dir-page .dir-menu-card-foot { overflow: hidden; }
.dir-page .dir-menu-card-foot .dir-menu-price-wrap { flex: 0 1 auto; overflow: hidden; }
.dir-page .dir-menu-card-foot .dir-menu-price { font-size: .88rem !important; }
.dir-page .dir-menu-card-foot .mca-add { padding: 6px 9px !important; font-size: .76rem !important; gap: 3px !important; }
.dir-page .dir-menu-card-foot .mca-add svg { width: 13px; height: 13px; }
@container (max-width: 190px) {
  .dir-page .dir-menu-card-foot .mca-add span { display: none; }
  .dir-page .dir-menu-card-foot .mca-add { width: 34px; padding: 0 !important; justify-content: center; }
  .dir-page .dir-menu-card-foot .mca-add svg { width: 16px; height: 16px; }
  .dir-page .dir-menu-card-foot .mca-qty-btn { width: 28px; height: 28px; }
  .dir-page .dir-menu-card-foot .mca-qty-val { min-width: 18px; }
}