/* iy-dir-20260915: estilos del directorio.
   iy-dirid-20260918: identidad grafica de indexsiteseo.com (Indexsite):
   azul #008FE2 accion · celeste #29ABE2 · tinta #212529 · naranja #FF8201
   acento (rayo del logo) · Open Sans 300-800.
   iy-bruj1-20260922: rediseno "Brujula" manteniendo los colores y el logo
   de la marca (pedido 22-sep): radios suaves y sombras, hero con caja de
   busqueda (texto + categoria) y pastillas populares, categorias con icono
   sobre color pastel, "cerca de ti" a dos columnas (lista + mapa),
   destacados en tarjeta vertical, banda "Para negocios", pie a columnas y
   barra inferior movil de la portada. TODAS las clases previas siguen
   vigentes: las paginas internas (pais/provincia/localidad/buscar) usan
   esta misma hoja. */
:root {
  --azul: #008FE2;
  --celeste: #29ABE2;
  --azul-osc: #0074B8;
  --tinta: #212529;
  --naranja: #FF8201;
  --naranja-osc: #DD720F;
  --fondo: #F4F9FD;
  --borde: #DDEAF3;
  --borde-f: #C8DCEA;
  --blanco: #FFFFFF;
  --texto2: #4a6480;
  --sombra: 0 10px 30px rgba(15, 61, 102, .08);
  /* iy-bruj27-20260929: verde WhatsApp para los botones de contacto/registro
     (pedido "mas llamativo... colores distintivos").
     iy-bruj27b-20260929 (pedido "los botones de la pagina sean de color
     naranja, todos los botones de whatsapp sea de color verde"): los botones
     de accion pasan del azul al naranja de la marca (--naranja/--naranja-osc);
     el azul queda para enlaces, chips y acentos. */
  --wa: #25D366;
  --wa-osc: #1AA851;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  color: #34383d;
  background: var(--fondo);
}
h1, h2, h3, .dir-logo { font-family: 'Open Sans', sans-serif; font-weight: 800; color: var(--tinta); letter-spacing: -.02em; }
/* iy-dirid-20260918: icono hexagono+rayo delante del logo */
.dir-logo { display: inline-flex; align-items: center; gap: 9px; }
.dir-logo-ico { display: block; width: 34px; height: 34px; }
.dir-pie-logo img { vertical-align: middle; margin-right: 8px; }
a { color: var(--azul); }

/* iy-bruj1-20260922: marco mas ancho (1080 -> 1200) */
.dir-marco { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

.dir-cab { background: var(--blanco); border-bottom: 1px solid var(--borde); }
.dir-cab-int { display: flex; align-items: center; gap: 20px; min-height: 72px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.dir-logo { font-size: 22px; font-weight: 700; text-decoration: none; color: var(--tinta); }
.dir-logo em { font-style: normal; color: var(--naranja); }
/* iy-bruj1-20260922: navegacion por secciones (solo portada) */
.dir-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.dir-nav a {
  color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 8px 12px; border-radius: 999px;
}
.dir-nav a:hover { background: var(--fondo); color: var(--azul); }
#dir-paises, #dir-cats, #dir-cerca, #dir-dest, #dir-negocios { scroll-margin-top: 24px; }
.dir-migas { font-size: 14px; color: #5a7590; }
.dir-migas a { text-decoration: none; }
.dir-migas a:hover { text-decoration: underline; }
.dir-miga-act { color: #5a7590; }

.dir-h1 { font-size: 32px; margin: 26px 0 6px; }
.dir-h2 { font-size: 26px; margin: 44px 0 16px; }
.dir-intro { margin: 0 0 20px; color: var(--texto2); }

.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 8px; }
.dir-tarjeta {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 16px;
  padding: 16px 18px; text-decoration: none;
}
.dir-tarjeta:hover { border-color: var(--azul); box-shadow: var(--sombra); }
.dir-tarjeta strong { color: var(--tinta); font-size: 17px; }
.dir-tipo { color: var(--naranja); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.dir-conteo { color: #5a7590; font-size: 14px; }

.dir-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.dir-cat {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blanco); border: 1px solid var(--borde-f); border-radius: 999px;
  padding: 6px 14px; font-size: 14px; text-decoration: none; color: var(--tinta);
}
.dir-cat:hover { border-color: var(--azul); color: var(--azul); }
.dir-cat span { background: var(--fondo); border-radius: 999px; padding: 1px 8px; font-size: 12px; color: var(--azul); }

/* iy-bruj14-20260923: la tarjeta de negocio BASE pasa al formato vertical de
   los destacados (foto/logo grande arriba, pedido 23-sep "la vista del
   negocio debe ser asi como la imagen"); el sello "Destacado" sigue siendo
   exclusivo de .dir-destacado y el "Cerca de ti" conserva su fila compacta
   (override .dir-cercano mas abajo). */
.dir-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; }
.dir-negocio {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 16px;
  padding: 0 0 16px; overflow: hidden; text-decoration: none;
}
.dir-negocio:hover { border-color: var(--azul); box-shadow: var(--sombra); }
.dir-negocio-logo { flex: none; width: 100%; height: 150px; overflow: hidden; background: #E3F3FD; display: flex; align-items: center; justify-content: center; }
.dir-negocio-logo img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.dir-negocio-ini { font-family: 'Open Sans', sans-serif; font-size: 42px; font-weight: 700; color: var(--celeste); }
.dir-negocio-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 16px; }
.dir-negocio-txt strong { color: var(--tinta); font-size: 16px; }
.dir-negocio-cat { color: var(--azul); font-size: 13px; font-weight: 600; }
.dir-negocio-desc { color: var(--texto2); font-size: 14px; }
.dir-negocio-zona { color: #5a7590; font-size: 13px; }

/* Portada (iy-portada-20260915; iy-bruj1-20260922: hero a la izquierda con
   distintivo, titulo grande y caja blanca de busqueda). */
/* iy-bruj3-20260922: hero v4 a una columna (sin la tarjeta alta de
   publicidad de la v3 ni la burbuja eyebrow). */
.dir-hero { padding: 42px 0 6px; }
.dir-hero h1 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.06; letter-spacing: -.03em; margin: 0 0 12px; }
.dir-hero p { color: var(--texto2); margin: 0; font-size: 18px; }
/* iy-bruj5-20260922: hero a 2 columnas con la tarjeta de publicidad (banner
   principal 600x660) a la derecha; sin tarjeta, la izquierda queda como v4. */
.dir-hero-cols { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 44px; align-items: center; }
.dir-hero-izq { max-width: 900px; min-width: 0; }
.dir-hero-pub { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dir-heropub-carta { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 600 / 660; background: var(--fondo); box-shadow: var(--sombra); }
.dir-heropub-item { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .7s; }
.dir-heropub-item.activo { opacity: 1; }
.dir-heropub-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dir-heropub-chip { position: absolute; top: 16px; left: 16px; z-index: 2; background: rgba(15, 61, 102, .55); color: #fff; border-radius: 999px; padding: 6px 15px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dir-heropub-cont { position: absolute; top: 20px; right: 20px; z-index: 2; color: #fff; font-size: 13.5px; font-weight: 700; text-shadow: 0 1px 5px rgba(0, 0, 0, .45); }
.dir-heropub-pie { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dir-heropub-puntos { display: flex; align-items: center; gap: 8px; }
.dir-heropub-punto { border: 0; padding: 0; width: 8px; height: 8px; border-radius: 999px; background: var(--borde-f); cursor: pointer; transition: width .3s, background .3s; }
.dir-heropub-punto.act { width: 28px; background: var(--tinta); }
.dir-heropub-flechas { display: flex; gap: 10px; }
.dir-heropub-fl { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--borde-f); background: var(--blanco); color: var(--tinta); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dir-heropub-fl:hover { border-color: var(--azul); color: var(--azul); }
.dir-heropub-fl svg { width: 18px; height: 18px; }
@media (max-width: 960px) {
  .dir-hero-cols { grid-template-columns: 1fr; gap: 28px; }
  .dir-hero-pub { max-width: 480px; }
}
.dir-busca { display: flex; gap: 8px; }
.dir-busca input, .dir-busca select {
  border: 1px solid var(--borde-f); border-radius: 12px;
  padding: 12px 16px; font-size: 16px; font-family: inherit; background: var(--blanco);
  color: var(--tinta);
}
.dir-busca input { flex: 1; min-width: 0; }
.dir-busca input:focus, .dir-busca select:focus { outline: 2px solid var(--azul); border-color: var(--azul); }
.dir-busca button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 12px; background: var(--naranja); color: var(--blanco);
  font-family: inherit; font-size: 16px; font-weight: 700; padding: 12px 26px; cursor: pointer;
}
.dir-busca button svg { width: 17px; height: 17px; }
.dir-busca button:hover { background: var(--naranja-osc); }
.dir-busca-caja {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 22px;
  padding: 16px; box-shadow: var(--sombra); margin: 24px 0 8px;
}
/* iy-bruj2-20260922: buscador del hero con campos etiquetados en una sola
   caja con divisores (maqueta); el buscador de las paginas internas
   (.dir-busca-cab) sigue con el estilo base de .dir-busca. */
.dir-busca-hero { gap: 0; align-items: stretch; border: 1px solid var(--borde-f); border-radius: 14px; overflow: hidden; }
.dir-busca-hero .dir-campo { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 8px 16px; background: var(--blanco); }
.dir-busca-hero .dir-campo:first-child { flex: 1.2 1 0; }
.dir-busca-hero .dir-campo + .dir-campo { border-left: 1px solid var(--borde-f); }
.dir-busca-hero .dir-campo:focus-within { box-shadow: inset 0 0 0 2px var(--azul); }
.dir-busca-hero label { font-size: 12.5px; font-weight: 700; color: var(--tinta); cursor: pointer; }
.dir-busca-hero input, .dir-busca-hero select {
  border: 0; border-radius: 0; padding: 3px 0; width: 100%; max-width: none;
  font-size: 16px; background: transparent;
}
.dir-busca-hero input:focus, .dir-busca-hero select:focus { outline: none; border-color: transparent; }
.dir-busca-hero button { border-radius: 0; flex: none; }
/* iy-bruj3-20260922: pestañas Todo/Productos/Servicios sobre la caja de
   busqueda y fila de filtros bajo ella (Usar mi ubicacion + pastillas). */
.dir-tabs { display: inline-flex; gap: 4px; background: var(--fondo); border: 1px solid var(--borde); border-radius: 999px; padding: 5px; margin: 2px 0 14px; }
.dir-tab { border: 0; background: transparent; border-radius: 999px; padding: 8px 20px; font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--texto2); cursor: pointer; }
.dir-tab.act { background: var(--blanco); color: var(--tinta); box-shadow: 0 2px 8px rgba(15, 61, 102, .14); }
.dir-tab:not(.act):hover { color: var(--naranja-osc); }
.dir-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 2px 2px; }
.dir-ubi { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--naranja); color: var(--naranja-osc); border-radius: 999px; padding: 7px 16px; font-size: 14px; font-weight: 700; text-decoration: none; background: var(--blanco); cursor: pointer; font-family: inherit; }
.dir-ubi:hover { background: #FFF3E5; }
.dir-ubi svg { width: 16px; height: 16px; }
.dir-filtros-sep { width: 1px; height: 24px; background: var(--borde-f); }
/* iy-bruj4-20260922: panel de autocompletar bajo la caja de busqueda */
.dir-sug-marco { position: relative; }
.dir-sug { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; background: var(--blanco); border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra); padding: 10px; max-height: 340px; overflow-y: auto; }
.dir-sug-tit { margin: 6px 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5a7590; }
.dir-sug-it { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 9px 10px; font-family: inherit; font-size: 15px; color: var(--tinta); text-decoration: none; cursor: pointer; }
.dir-sug-it:hover { background: var(--fondo); }
.dir-sug-it b { font-weight: 800; }
.dir-sug-it small { color: #5a7590; font-size: 13px; flex: none; }
.dir-sug-cnt { background: var(--fondo); border-radius: 999px; padding: 1px 9px; font-size: 12px; color: var(--azul); }
.dir-filtro { border: 1px solid var(--borde-f); background: var(--blanco); border-radius: 999px; padding: 7px 16px; font-size: 14px; font-weight: 600; color: var(--tinta); text-decoration: none; }
.dir-filtro:hover, .dir-filtro.act { border-color: var(--azul); color: var(--azul); }
.dir-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 2px 0; font-size: 13px; color: #5a7590; }
.dir-chip {
  border: 1px solid var(--borde-f); border-radius: 999px; padding: 5px 13px;
  font-size: 13px; font-weight: 600; color: var(--tinta); text-decoration: none;
  background: var(--fondo);
}
.dir-chip:hover { border-color: var(--azul); color: var(--azul); }
.dir-busca-int { margin: 0 0 24px; }
/* iy-bruj1-20260922: tarjeta de pais en pastilla horizontal (bandera + nombre) */
.dir-pais { flex-direction: row; align-items: center; gap: 12px; text-align: left; padding: 14px 18px; }
.dir-pais-bandera { font-size: 34px; line-height: 1; }
.dir-verficha {
  margin-top: 10px; align-self: flex-start;
  background: var(--naranja); color: var(--blanco); border-radius: 999px;
  padding: 7px 16px; font-size: 13px; font-weight: 600;
}
.dir-negocio:hover .dir-verficha { background: var(--naranja-osc); }

/* iy-bruj1-20260922: pie oscuro a columnas (marca + enlaces) */
.dir-pie { margin-top: 48px; padding: 38px 0 26px; background: var(--tinta); }
.dir-pie p { color: #A9C4DC; font-size: 14px; margin: 0; }
.dir-pie-int { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.dir-pie-logo { font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 700; color: var(--blanco) !important; }
.dir-pie-logo em { font-style: normal; color: var(--naranja); }
.dir-pie-nav { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.dir-pie-nav a { color: #D8E7F4; font-size: 14px; text-decoration: none; }
.dir-pie-nav a:hover { color: var(--blanco); text-decoration: underline; }
.dir-pie-cols { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr)); gap: 28px; padding-bottom: 26px; }
.dir-pie-col h4 { margin: 0 0 12px; color: var(--blanco); font-size: 15px; letter-spacing: 0; }
.dir-pie-col a { display: block; color: #D8E7F4; font-size: 14px; text-decoration: none; margin-bottom: 9px; }
.dir-pie-col a:hover { color: var(--blanco); text-decoration: underline; }
.dir-pie-marca .dir-pie-logo { display: block; margin-bottom: 12px; }
.dir-pie-marca img { height: 34px; width: auto; display: block; }
.dir-pie-tag { max-width: 280px; line-height: 1.55; }
/* iy-bruj21c-20260925 (pedido "el icono de instagram no esta centrado dentro
   del circulo en el footer"): en el pie, .dir-pie-col a (0,1,1) le gana a
   .dir-red (0,1,0) y el circulo pierde el inline-flex centrado y el color
   azul -> regla mas especifica que lo restaura. */
.dir-pie-col .dir-red { display: inline-flex; color: var(--azul); margin-bottom: 0; }
.dir-pie-col .dir-red:hover { color: var(--blanco); }
/* iy-bruj21c-20260925: copyright centrado (pedido). */
.dir-pie-baja { border-top: 1px solid #3a4046; padding-top: 18px; text-align: center; }
@media (max-width: 800px) { .dir-pie-cols { grid-template-columns: 1fr 1fr; } }

@media (max-width: 480px) {
  .dir-h1 { font-size: 24px; }
  .dir-busca { flex-direction: column; }
  .dir-lista, .dir-grid { grid-template-columns: 1fr; }
  .dir-pie-cols { grid-template-columns: 1fr; gap: 20px; }
}

/* iy-dirban-20260916: banners vendidos desde el portal (dir_publicidad).
   iy-dirban4-20260917: el banner de abajo respira mas (margin-top).
   iy-dirid-20260918: hasta 4 imagenes por espacio rotando en carrusel
   (.dir-car); la visibilidad esc/mov va sobre el CONTENEDOR (.dir-pub-esc /
   .dir-pub-mov con .dir-pub delante para ganarle a ".dir-pub img"). */
.dir-pub { display: flex; justify-content: center; margin: 4px 0 20px; }
.dir-pub img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
/* iy-bruj3-20260922: el banner ancho de arriba con esquinas de pastilla
   (maqueta v4); el 300x250 de abajo conserva el radio normal. */
.dir-pub-arriba img { border-radius: 999px; }
.dir-pub .dir-pub-mov { display: none; }
.dir-pub-abajo { margin-top: 30px; }
@media (max-width: 600px) {
  .dir-pub .dir-pub-esc { display: none; }
  .dir-pub .dir-pub-mov { display: block; }
}
/* iy-bruj6-20260923: tarjeta ancha de publicidad al pie de la PORTADA
   (escritorio 1200x300, movil 600x300) con rotulo PUBLICIDAD centrado. */
.dir-pub-carta { flex-direction: column; align-items: center; }
.dir-pub-tit { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #8a9bad; text-align: center; }
.dir-pub-carta img { border-radius: 28px; }
.dir-pub-carta .dir-car-esc { max-width: 1200px; }
.dir-pub-carta .dir-car-mov { max-width: 600px; }
.dir-pub-carta .dir-car[data-car].dir-car-esc { aspect-ratio: 1200 / 300; }
.dir-pub-carta .dir-car[data-car].dir-car-mov { aspect-ratio: 600 / 300; }
.dir-pub-carta .dir-car[data-car] .dir-car-item img { border-radius: 28px; }
.dir-car { position: relative; width: 100%; }
.dir-car-esc { max-width: 970px; }
.dir-car-mov { max-width: 320px; }
.dir-car[data-car].dir-car-esc { aspect-ratio: 970 / 90; }
.dir-car[data-car].dir-car-mov { aspect-ratio: 320 / 100; }
.dir-car .dir-car-item { display: block; }
.dir-car .dir-car-item img { width: 100%; }
.dir-car[data-car] .dir-car-item {
  position: absolute; inset: 0; opacity: 0; transition: opacity .7s;
}
.dir-car[data-car] .dir-car-item.activo { opacity: 1; }
.dir-car[data-car] .dir-car-item img { height: 100%; object-fit: cover; }

/* iy-dirid-20260918: icono circular en tarjetas de provincia/estado, localidad
   y ciudad, e icono en las pastillas de categoria (sin numeros de conteo). */
.dir-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.dir-tarjeta .dir-ico {
  width: 46px; height: 46px; border-radius: 50%;
  background: #E3F3FD; color: var(--azul); margin-bottom: 4px;
}
.dir-tarjeta .dir-ico svg { width: 24px; height: 24px; }
.dir-pais .dir-ico { margin-bottom: 0; }
.dir-cat .dir-ico { color: var(--azul); }
.dir-cat .dir-ico svg { width: 15px; height: 15px; }

/* iy-dirban-20260916: tarjetas de pais de la maqueta v5 (bandera circular +
   numero azul; gris cuando el pais aun no llega a DIR_MIN_PAGINA negocios) */
.dir-pais-bandera img {
  width: 44px; height: 44px; border-radius: 50%; display: block;
  box-shadow: 0 1px 5px rgba(15, 61, 102, .22);
}
.dir-conteo-az b, .dir-conteo-gr b {
  display: block; font-family: 'Open Sans', sans-serif;
  font-size: 26px; font-weight: 700; line-height: 1.1;
}
.dir-conteo-az b { color: var(--azul); }
.dir-conteo-gr { color: #8a9bab; }
.dir-conteo-gr b { color: #8a9bab; }
.dir-conteo-gr small { display: block; font-size: 12px; }

/* iy-porta2-20260918: encabezado de la portada — redes sociales a la derecha
   y boton Contacto; grupos de categorias desplegables; negocios cerca. */
.dir-cab-der { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.dir-red {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: #E3F3FD; color: var(--azul);
}
.dir-red svg { width: 19px; height: 19px; }
.dir-red:hover { background: var(--azul); color: var(--blanco); }
/* iy-bruj27-20260929: el boton de contacto por WhatsApp pasa de naranja a
   verde WhatsApp con icono y sombra (pedido "mas llamativo... colores
   distintivos"); mismo verde para el boton de registro de las internas. */
.dir-btn-contacto {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; border-radius: 999px; padding: 9px 20px;
  background: var(--wa); color: var(--blanco);
  font-weight: 700; font-size: 15px; text-decoration: none;
  box-shadow: 0 4px 14px rgba(37, 211, 102, .4);
}
.dir-btn-contacto:hover { background: var(--wa-osc); color: var(--blanco); }
.dir-btn-contacto svg { width: 19px; height: 19px; flex: none; }
/* iy-bruj1-20260922: selector de pais con bandera en el encabezado de la
   portada (details sin JS) + enlace Ingresar; las redes pasaron al pie. */
.dir-pais-sel { position: relative; }
.dir-pais-sel summary {
  list-style: none; display: inline-flex; align-items: center; gap: 9px;
  cursor: pointer; background: var(--fondo); border: 1px solid var(--borde-f);
  border-radius: 999px; padding: 6px 16px 6px 7px;
  font-weight: 700; font-size: 15px; color: var(--tinta); white-space: nowrap;
}
.dir-pais-sel summary::-webkit-details-marker { display: none; }
.dir-pais-sel summary:hover { border-color: var(--azul); }
.dir-pais-sel summary::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;
}
.dir-pais-sel[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.dir-pais-sel summary img { width: 30px; height: 30px; border-radius: 50%; display: block; box-shadow: 0 1px 4px rgba(15, 61, 102, .22); }
/* iy-bruj21-20260925: globo neutro "Países" en la portada (sin pais elegido) */
.dir-pais-sel summary svg { width: 26px; height: 26px; display: block; color: var(--azul); flex: none; }
.dir-pais-menu {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 265px; background: var(--blanco); border: 1px solid var(--borde);
  border-radius: 18px; box-shadow: var(--sombra); padding: 10px;
}
.dir-pais-menu-tit {
  margin: 4px 8px 8px; font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: #5a7590;
}
.dir-pais-menu a {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px;
  border-radius: 12px; text-decoration: none; color: var(--tinta);
  font-weight: 700; font-size: 15px;
}
.dir-pais-menu a:hover { background: var(--fondo); }
.dir-pais-menu img { width: 34px; height: 34px; border-radius: 50%; flex: none; box-shadow: 0 1px 4px rgba(15, 61, 102, .22); }
.dir-pais-menu a.act { background: #E8F5FE; }
.dir-pais-menu a.act::after {
  content: ""; width: 6px; height: 11px; margin-left: auto; margin-right: 6px;
  border-right: 2.4px solid var(--azul); border-bottom: 2.4px solid var(--azul);
  transform: rotate(40deg);
}
.dir-ingresar {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  color: var(--tinta); font-weight: 600; font-size: 15px; text-decoration: none;
  padding: 8px 10px; border-radius: 999px;
}
.dir-ingresar:hover { color: var(--azul); }
.dir-ingresar svg { width: 18px; height: 18px; }
.dir-pie-redes { margin-top: 14px; display: flex; gap: 8px; }
/* iy-bruj1-20260922: grupos de categorias en tarjeta con icono pastel
   (el color de cada grupo llega inline desde la portada; en las paginas
   internas dir_icono('categoria') usa el fondo celeste por defecto). */
.dir-catgrupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin-bottom: 8px; }
.dir-catgrupo {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 18px;
  padding: 0 18px;
}
.dir-catgrupo[open], .dir-catgrupo:hover { border-color: var(--azul); }
.dir-catgrupo summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 15px 0; font-weight: 700; color: var(--tinta); font-size: 16px;
  list-style: none;
}
.dir-catgrupo summary::-webkit-details-marker { display: none; }
.dir-catgrupo summary::after {
  content: ""; margin-left: auto; width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--azul); border-bottom: 2px solid var(--azul);
  transform: rotate(45deg); transition: transform .2s;
}
.dir-catgrupo[open] summary::after { transform: rotate(-135deg); }
.dir-catgrupo .dir-ico {
  width: 46px; height: 46px; border-radius: 14px;
  background: #E3F3FD; color: var(--tinta);
}
.dir-catgrupo .dir-ico svg { width: 22px; height: 22px; }
.dir-catgrupo-nom { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dir-catgrupo-nom small { font-size: 12.5px; font-weight: 400; color: #5a7590; }
.dir-catgrupo .dir-cats { margin: 0 0 16px; }
/* iy-bruj3-20260922: rejilla de tarjetas de categorias de la PORTADA
   (pantallazo 3): cabecera con "Ver todas", tarjetas angostas con icono
   arriba, nombre y ejemplos; el grupo abierto ocupa todo el ancho. Scoped
   a .dir-catgrupos-bruj para NO alterar dir_pinta_catgrupos (paginas de
   pais/provincia usan .dir-catgrupos a secas). */
.dir-cats-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 14px; }
.dir-cats-cab .dir-h2 { margin-bottom: 16px; }
.dir-vertodas { font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.dir-vertodas:hover { text-decoration: underline; }
.dir-catgrupos-bruj { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); }
.dir-catgrupos-bruj .dir-catgrupo[open] { grid-column: 1 / -1; }
.dir-catgrupos-bruj .dir-catgrupo[open], .dir-catgrupos-bruj .dir-catgrupo:hover { box-shadow: var(--sombra); }
.dir-catgrupos-bruj .dir-catgrupo summary { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 0 15px; }
.dir-catgrupos-bruj .dir-catgrupo summary::after { display: none; }
.dir-catgrupos-bruj .dir-catgrupo-nom { gap: 3px; }
.dir-catgrupos-bruj .dir-catgrupo-nom small { font-size: 13px; line-height: 1.45; }
.dir-negocio-dist { color: var(--naranja); font-size: 13px; font-weight: 600; }
@media (max-width: 600px) {
  .dir-cab-der { gap: 6px; }
  .dir-red { width: 32px; height: 32px; }
  .dir-btn-contacto { padding: 8px 14px; font-size: 14px; }
}
@media (max-width: 700px) {
  /* la barra inferior ya lleva el acceso al portal */
  .dir-ingresar { display: none; }
}
@media (max-width: 480px) {
  /* iy-bruj41-20261002: el nombre del pais vuelve a verse en angosto
     (maqueta "PA Panamá"); solo se compacta la pastilla. */
  .dir-pais-sel summary { padding: 5px 12px 5px 5px; gap: 7px; font-size: 14px; }
}

/* iy-cabusca-20260917: buscador en el encabezado (maqueta v5) de las paginas
   internas + boton "¿Tienes un negocio?"; las migas pasan a su propia linea. */
.dir-busca-cab { flex: 1 1 260px; max-width: 640px; margin: 0; }
.dir-busca-cab input { padding: 10px 16px; }
.dir-busca-cab button { padding: 10px 22px; }
/* iy-bruj22-20260925 (pedido "en el buscador que tambien sea autoompletable"):
   el buscador de cabecera va dentro de .dir-sug-marco-cab (clase PROPIA, no
   .dir-sug-marco: el JS del hero toma el primer .dir-sug-marco del DOM) para
   colgar el panel .dir-sug; el marco hereda el reparto flex del form. */
.dir-sug-marco-cab { position: relative; flex: 1 1 260px; max-width: 640px; }
.dir-sug-marco-cab .dir-busca-cab { max-width: none; }
/* iy-bruj22-20260925 (pedido "la ruta del directorio sacala de la cabecera y
   colocalo abajo"): barra de migas propia justo debajo del encabezado. */
.dir-migas-barra { padding: 13px 0 2px; }
.dir-btn-negocio {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; border: 0; border-radius: 999px;
  padding: 10px 18px; text-decoration: none; color: var(--blanco);
  font-weight: 700; font-size: 15px; background: var(--wa);
  box-shadow: 0 4px 14px rgba(37, 211, 102, .4);
}
.dir-btn-negocio:hover { background: var(--wa-osc); color: var(--blanco); }
.dir-btn-negocio svg { width: 19px; height: 19px; flex: none; }
/* iy-bruj22-20260925: la regla .dir-cab .dir-migas (migas dentro del header)
   se retiro; las migas viven en .dir-migas-barra bajo el encabezado. En
   angosto el que baja a su propia fila es el marco del buscador (el form ya
   no es hijo directo del flex del header). */
@media (max-width: 700px) {
  .dir-sug-marco-cab { flex-basis: 100%; order: 3; }
  .dir-btn-negocio { font-size: 14px; padding: 8px 14px; }
}

/* iy-porta3-20260918: logo INDEXSITE en cabecera y pie; paises en una misma
   linea sin nota de indexacion; subgrupos de categorias; mapa de cercanos. */
.dir-logo-img { display: block; height: 52px; width: auto; }
.dir-pie-logo img { height: 34px; width: auto; display: block; margin: 0 auto; }
.dir-pie-marca .dir-pie-logo img { margin: 0; }
.dir-grid.dir-paises {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr;
  overflow-x: auto;
}
.dir-pais strong { font-size: 15px; }
.dir-subgrupo { margin: 0 0 14px; }
.dir-subgrupo-tit {
  margin: 0 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--azul-osc);
  border-bottom: 1px solid var(--borde); padding-bottom: 6px;
}
.dir-subgrupo .dir-cats { margin: 0; }
#dir-cerca-mapa {
  height: 380px; border-radius: 16px; margin: 16px 0 8px;
  border: 1px solid var(--borde); z-index: 0;
}
@media (max-width: 600px) {
  .dir-logo-img { height: 40px; }
  .dir-grid.dir-paises { grid-auto-columns: minmax(150px, 1fr); }
  .dir-pais { padding: 12px 12px; gap: 9px; }
  .dir-pais-bandera img { width: 36px; height: 36px; }
  .dir-pais strong { font-size: 13px; }
  #dir-cerca-mapa { height: 280px; }
  .dir-busca-hero { flex-direction: column; }
  .dir-busca-hero .dir-campo + .dir-campo { border-left: 0; border-top: 1px solid var(--borde-f); }
}

/* iy-bruj1-20260922: "Cerca de ti" en caja blanca a dos columnas
   (lista desplazable + mapa); en movil se apilan. Solo la portada trae el
   envoltorio .dir-cerca-cols; el bloque compartido de paises/provincias
   (inc/cercabloque.php) conserva el layout de arriba. */
#dir-cerca { margin-top: 44px; }
.dir-cerca-caja {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 24px;
  padding: 8px 22px 22px; box-shadow: var(--sombra);
}
.dir-cerca-caja .dir-h2 { margin: 18px 0 4px; }
.dir-cerca-nota { margin: 0 0 16px; color: #5a7590; font-size: 14px; }
.dir-cerca-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: stretch; }
.dir-cerca-cols .dir-lista {
  grid-template-columns: 1fr; align-content: start; gap: 12px;
  max-height: 540px; overflow-y: auto; padding-right: 6px;
}
.dir-cerca-cols #dir-cerca-mapa { height: 540px; margin: 0; }
@media (max-width: 900px) {
  .dir-nav { display: none; }
  .dir-cerca-cols { grid-template-columns: 1fr; }
  .dir-cerca-cols .dir-lista { max-height: none; overflow: visible; padding-right: 0; }
  .dir-cerca-cols #dir-cerca-mapa { height: 320px; }
}
/* iy-bruj3-20260922: "Cerca de ti" v4 (pantallazo 4): cabecera con selector
   de radio, conteo, aviso "Activa tu ubicacion", tarjetas numeradas con
   acciones, chip "Buscar en esta zona" y pines numerados en el mapa. */
.dir-cerca-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; }
.dir-cerca-cab .dir-h2 { margin: 0 0 4px; }
.dir-cerca-cab .dir-cerca-nota { margin: 0; }
.dir-radios { display: inline-flex; align-items: center; gap: 2px; background: var(--fondo); border: 1px solid var(--borde); border-radius: 999px; padding: 4px; }
.dir-radios b { font-weight: 600; color: #5a7590; font-size: 14px; padding: 0 10px; }
.dir-radio { border: 0; background: transparent; border-radius: 999px; padding: 7px 14px; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--tinta); cursor: pointer; }
.dir-radio.act { background: var(--naranja); color: var(--blanco); }
.dir-cerca-conteo { margin: 12px 0; font-weight: 700; color: var(--tinta); font-size: 15px; }
.dir-cerca-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: #E8F5FE; border: 1px solid var(--borde); border-radius: 14px; padding: 12px 16px; font-size: 14.5px; color: var(--tinta); margin: 14px 0 12px; }
.dir-cerca-aviso svg { width: 20px; height: 20px; flex: none; color: var(--azul); }
.dir-cerca-aviso button { margin-left: auto; border: 0; background: var(--naranja); color: var(--blanco); border-radius: 999px; padding: 9px 22px; font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.dir-cerca-aviso button:hover { background: var(--naranja-osc); }
/* iy-bruj25d-20260929: display:flex de arriba le gana al atributo hidden
   (estilo de autor > estilo del navegador) — el JS ponia aviso.hidden=true
   y el aviso seguia visible con los resultados cargados. */
.dir-cerca-aviso[hidden] { display: none !important; }
.dir-cercano { position: relative; }
.dir-num { position: absolute; top: 10px; left: 10px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; background: var(--tinta); color: var(--blanco); font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dir-cercano-nom { text-decoration: none; }
.dir-cercano-nom strong { color: var(--tinta); font-size: 16px; }
.dir-cercano-nom:hover strong { color: var(--azul); }
.dir-negocio-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dir-acc { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde-f); background: var(--blanco); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 700; color: var(--tinta); text-decoration: none; cursor: pointer; font-family: inherit; }
.dir-acc:hover { border-color: var(--naranja); color: var(--naranja-osc); }
.dir-acc.pri { background: var(--naranja); border-color: var(--naranja); color: var(--blanco); }
.dir-acc.pri:hover { background: var(--naranja-osc); border-color: var(--naranja-osc); color: var(--blanco); }
.dir-acc svg { width: 15px; height: 15px; }
#dir-cerca-mapa { position: relative; }
.dir-mapa-chip { position: absolute; z-index: 3; top: 14px; left: 50%; transform: translateX(-50%); border: 0; background: var(--blanco); border-radius: 999px; box-shadow: 0 2px 10px rgba(15, 61, 102, .18); font-size: 13.5px; font-weight: 700; color: var(--tinta); padding: 8px 15px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.dir-mapa-chip:hover { color: var(--naranja-osc); }
/* pin numerado: MapLibre pisa el transform del elemento del marker, por eso
   el circulo con cola va DENTRO de la caja y no en el elemento raiz. */
.dir-pin-caja { width: 30px; height: 39px; cursor: pointer; }
.dir-pin { position: relative; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--azul); border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(15, 61, 102, .35); color: #fff; font-size: 13px; font-weight: 700; }
.dir-pin::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top: 9px solid var(--azul); margin-top: -2px; }

/* iy-bruj1-20260922: sello "Destacado" de dir_tarjeta_destacado.
   iy-bruj14-20260923: el formato vertical paso a la tarjeta BASE (arriba);
   aqui solo queda la insignia, exclusiva de los destacados. */
.dir-destacado .dir-negocio-logo { position: relative; }
/* iy-bruj39-20261001: el sello gana la estrella de la maqueta */
.dir-destacado .dir-negocio-logo::after {
  content: "★ Destacado"; position: absolute; top: 10px; left: 10px;
  background: var(--tinta); color: var(--blanco); border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 4px 11px;
}

/* iy-bruj14-20260923: los bloques "Cerca de ti" (aprobados en bruj13: lista
   numerada junto al mapa, y fichas cerca del centro en provincias) conservan
   la fila horizontal compacta, pese al cambio de la tarjeta base. */
.dir-negocio.dir-cercano,
.dir-cerca-cols .dir-lista .dir-negocio { flex-direction: row; gap: 14px; align-items: flex-start; padding: 16px; }
.dir-cercano .dir-negocio-logo,
.dir-cerca-cols .dir-lista .dir-negocio-logo { flex: 0 0 60px; width: 60px; height: 60px; border-radius: 12px; background: var(--fondo); }
.dir-cercano .dir-negocio-logo img,
.dir-cerca-cols .dir-lista .dir-negocio-logo img { padding: 0; }
.dir-cercano .dir-negocio-ini,
.dir-cerca-cols .dir-lista .dir-negocio-ini { font-size: 26px; }
.dir-cercano .dir-negocio-txt,
.dir-cerca-cols .dir-lista .dir-negocio-txt { padding: 0; }

/* iy-bruj1-20260922: banda "Para negocios" (CTA al portal + 3 beneficios) */
.dir-cta {
  margin-top: 48px; background: #E8F5FE; border: 1px solid var(--borde);
  border-radius: 28px; padding: 34px 30px;
  display: grid; grid-template-columns: minmax(260px, 5fr) minmax(0, 7fr);
  gap: 28px; align-items: center;
}
.dir-cta-eyebrow {
  margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--azul-osc);
}
.dir-cta h2 { margin: 0 0 10px; font-size: 32px; line-height: 1.12; }
.dir-cta-txt p { margin: 0 0 18px; color: var(--texto2); }
/* iy-bruj27-20260929: los CTA de registro/anuncios van al WhatsApp de
   contacto — verde WhatsApp con icono; el segundo boton en contorno. */
.dir-cta-botones { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dir-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--wa); color: var(--blanco);
  border-radius: 999px; padding: 13px 26px; font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 14px rgba(37, 211, 102, .4);
}
.dir-cta-btn:hover { background: var(--wa-osc); }
.dir-cta-btn svg { width: 19px; height: 19px; flex: none; }
.dir-cta-btn.dir-cta-btn2 {
  background: var(--blanco); color: var(--wa-osc);
  border: 2px solid var(--wa); box-shadow: none; padding: 11px 24px;
}
.dir-cta-btn.dir-cta-btn2:hover { background: var(--wa); color: var(--blanco); }
.dir-cta-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.dir-plan { background: var(--blanco); border: 1px solid var(--borde); border-radius: 18px; padding: 18px; }
.dir-plan strong { display: block; color: var(--tinta); font-size: 16px; margin-bottom: 8px; }
.dir-plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dir-plan li { display: flex; gap: 7px; align-items: flex-start; font-size: 13.5px; color: var(--texto2); }
.dir-plan li svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--azul); }
@media (max-width: 900px) { .dir-cta { grid-template-columns: 1fr; padding: 26px 20px; } }

/* iy-bruj27-20260929 (pedido "Añadir UI"): boton flotante "volver arriba".
   [hidden] con !important porque display:flex le ganaria al atributo
   (leccion iy-bruj25d). En movil sube para librar la barra inferior. */
.dir-subir {
  position: fixed; right: 20px; bottom: 22px; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--naranja); color: var(--blanco);
  box-shadow: 0 6px 18px rgba(15, 61, 102, .3);
}
.dir-subir:hover { background: var(--naranja-osc); color: var(--blanco); }
.dir-subir svg { width: 22px; height: 22px; }
.dir-subir[hidden] { display: none !important; }
@media (max-width: 700px) {
  .dir-subir { right: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* iy-bruj1-20260922: barra inferior movil de la portada (accesos rapidos);
   si no gusta, basta con quitar el <nav class="dir-barra"> de portada.php. */
.dir-barra { display: none; }
@media (max-width: 700px) {
  .dir-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; background: var(--blanco); border-top: 1px solid var(--borde-f);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .dir-barra a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 600; color: #5a7590; text-decoration: none; padding: 4px 0;
  }
  .dir-barra a svg { width: 21px; height: 21px; }
  .dir-barra a.activo { color: var(--azul); }
  body:has(.dir-barra) .dir-pie { padding-bottom: 88px; }
}

/* iy-bruj11-20260923 (maqueta 23-sep): tarjetas de lugar tipo pildora —
   insignia circular oscura con las siglas (CR/CO/MX en la maqueta; aqui la
   ciudad/provincia/localidad), nombre en negrita y el nivel padre en gris
   debajo. Las usan pais.php (ciudades) e index.php (provincias y
   localidades de /pa/). */
.dir-tarjeta.dir-lugar { flex-direction: row; align-items: center; gap: 14px; }
.dir-sig {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: #23364e; color: #fff;
  font-weight: 800; font-size: 15px; letter-spacing: .04em;
}
.dir-lugar-nom { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dir-lugar-nom strong { line-height: 1.25; }
.dir-lugar-nom small { color: #5a7590; font-size: 13px; }

/* iy-bruj11: los ejemplos bajo el nombre del grupo de categorias son ahora
   enlaces azules (maqueta 23-sep); dir_pinta_catgrupos los pinta en todas
   las paginas, no solo en la portada. */
.dir-catgrupo-nom small a { color: var(--azul); text-decoration: none; font-weight: 600; }
.dir-catgrupo-nom small a:hover { text-decoration: underline; }

/* ============ iy-bruj14-20260923: ficha de negocio (dir/ficha.php) ============
   Adaptacion de la maqueta 23-sep a la identidad Interyellow: galeria arriba,
   encabezado con pildoras y acciones, 2 columnas (contenido + panel lateral
   de contacto/horarios/publicidad) y negocios similares. */
.dir-ficha-gal { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; margin-top: 18px; }
.dir-ficha-gal.solo { grid-template-columns: minmax(0, 1fr); }
.dir-ficha-foto { border-radius: 16px; overflow: hidden; background: #E3F3FD; height: 400px; display: flex; align-items: center; justify-content: center; }
.dir-ficha-foto img { width: 100%; height: 100%; object-fit: cover; }
.dir-ficha-foto.logo { height: 280px; }
.dir-ficha-foto.logo img { object-fit: contain; padding: 24px; }
.dir-ficha-ini { font-family: 'Open Sans', sans-serif; font-size: 72px; font-weight: 700; color: var(--celeste); }
.dir-ficha-minis { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 195px; gap: 10px; }
.dir-ficha-mini { position: relative; border: 0; padding: 0; border-radius: 14px; overflow: hidden; background: #E3F3FD; cursor: pointer; }
.dir-ficha-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* iy-bruj28-20260929: fuera ".mas" y ".dir-ficha-todas" (la galeria queda en
   foto principal + 4 miniaturas, sin "+N fotos" ni rejilla inferior). */
.dir-ficha-cab { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dir-ficha-cab-izq { min-width: 0; }
.dir-ficha-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.dir-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 700; background: #E8F5FE; color: var(--azul-osc); }
.dir-pill.dest { background: var(--tinta); color: var(--blanco); }
.dir-ficha-cab h1 { margin: 0 0 8px; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.12; letter-spacing: -.02em; color: var(--tinta); }
.dir-ficha-dir { margin: 0; color: #5a7590; font-size: 15px; }
.dir-ficha-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
/* iy-bruj28-20260929 (pedido 29-sep "mover la seccion de contacto de la
   derecha hacia la izquierda"): en escritorio el panel lateral (contacto/
   horarios/publicidad) pasa a la COLUMNA IZQUIERDA via order; en movil (media
   900px) se restaura el orden del documento (contenido primero). */
/* iy-bruj32-20261001 (ajuste 1-oct con captura: "el banner lateral no esta en
   la derecha"): columnas al derecho — contenido a la IZQUIERDA (ancha) y el
   banner lateral a la DERECHA (380px); fuera el order:-1 de bruj28b. */
.dir-ficha-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; margin-top: 26px; }
.dir-ficha-main, .dir-ficha-lado { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dir-carta { background: var(--blanco); border: 1px solid var(--borde); border-radius: 16px; padding: 20px; }
.dir-carta h2 { margin: 0 0 12px; font-size: 18px; color: var(--tinta); }
.dir-ficha-texto { color: var(--texto2); font-size: 15px; line-height: 1.65; margin: 0; white-space: pre-line; }
.dir-tel-grande { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; color: var(--tinta); text-decoration: none; }
.dir-tel-grande:hover { color: var(--azul); }
.dir-contacto-filas { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dir-contacto-filas a, .dir-contacto-filas span { color: var(--texto2); font-size: 14.5px; text-decoration: none; word-break: break-word; }
.dir-contacto-filas a:hover { color: var(--azul); }
.dir-btn-sitio { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; background: var(--naranja); color: var(--blanco); border-radius: 999px; padding: 12px 20px; font-weight: 700; font-size: 15px; text-decoration: none; }
.dir-btn-sitio:hover { background: var(--naranja-osc); }
.dir-btn-sitio.sec { background: var(--blanco); color: var(--tinta); border: 1px solid var(--borde-f); margin-top: 10px; }
.dir-btn-sitio.sec:hover { background: var(--blanco); border-color: var(--naranja); color: var(--naranja-osc); }
.dir-horario-fila { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--texto2); padding: 6px 0; border-bottom: 1px dashed var(--borde); }
.dir-horario-fila:last-child { border-bottom: 0; }
.dir-horario-fila b { color: var(--tinta); font-weight: 600; }
.dir-horario-fila .cerrado { color: var(--naranja); font-weight: 700; }
#dir-ficha-mapa { height: 320px; border-radius: 14px; overflow: hidden; }
.dir-ficha-redes { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) {
  .dir-ficha-gal { grid-template-columns: 1fr; }
  .dir-ficha-foto { height: 260px; }
  .dir-ficha-minis { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 84px; }
  .dir-ficha-cols { grid-template-columns: 1fr; }
  /* iy-bruj32-20261001: sin order en escritorio ya no hace falta revertirlo;
     en movil el main va primero por orden natural del HTML */
}

/* iy-bruj14c-20260923: ficha — estado abierto/cerrado, pestañas de la
   maqueta, boton "Agendar cita", corazon "Guardado" y publicidad lateral
   300x250 (tarjeta 600x500 @2x en la columna derecha; el override de
   max-width/aspect le gana a las reglas de .dir-pub-carta por ir despues). */
.dir-ficha-estado { margin: 8px 0 0; font-size: 14.5px; font-weight: 700; }
.dir-ficha-estado.ab { color: #1E9E4C; }
.dir-ficha-estado.ce { color: var(--naranja); }
/* iy-bruj28c-20260929: fuera la barra de pestañas de la ficha (estaban aqui
   las reglas .dir-ficha-tabs). */
.dir-acc.on { border-color: #e2554f; color: #e2554f; }
.dir-btn-agenda { display: flex; align-items: center; justify-content: center; margin-top: 12px; background: var(--naranja); color: var(--blanco); border-radius: 999px; padding: 12px 20px; font-weight: 700; font-size: 15px; text-decoration: none; }
.dir-btn-agenda:hover { background: var(--naranja-osc); color: var(--blanco); }
/* iy-bruj27b-20260929: en la ficha, los botones que abren WhatsApp (Escribir
   por WhatsApp y Agendar cita via wa.me) van en verde; van DESPUES de
   .dir-btn-sitio.sec para ganarle con la misma especificidad (0,2,0). */
.dir-btn-sitio.dir-btn-wa, .dir-btn-agenda.dir-btn-wa { background: var(--wa); border-color: var(--wa); color: var(--blanco); }
.dir-btn-sitio.dir-btn-wa:hover, .dir-btn-agenda.dir-btn-wa:hover { background: var(--wa-osc); border-color: var(--wa-osc); color: var(--blanco); }
/* iy-bruj28b-20260929: Contacto y Horarios viven ahora en la columna ancha
   (dir-ficha-main); tope de ancho para que botones y filas no se estiren. */
.dir-ficha-main .dir-btn-sitio, .dir-ficha-main .dir-btn-agenda,
.dir-ficha-main .dir-horario-fila { max-width: 460px; }
/* iy-bruj28c-20260929: "Mostrar telefono" en AZUL (el id gana a cualquier
   clase); "Agendar cita" queda naranja al quitarle .dir-btn-wa en ficha.php */
#dir-btn-tel { background: var(--azul); }
#dir-btn-tel:hover { background: var(--azul-osc); }
.dir-pub-lateral { margin: 0; }
.dir-pub-lateral .dir-car { max-width: 100%; }
/* iy-bruj16-20260924: el lateral es la imagen vertical 350x650 del sidebar de
   los indexsites (e2/detalles.php, pos 11): sin tarjeta blanca ni rotulo,
   esquinas 20px y hover que se eleva con sombra; en resultados la columna
   ademas queda pegada (sticky) como el sidebar de alla. */
.dir-pub-lateral img, .dir-pub-lateral .dir-car[data-car] .dir-car-item img { border-radius: 20px; }
.dir-pub-lateral .dir-car[data-car].dir-car-esc { aspect-ratio: 350 / 650; }
.dir-pub-lateral .dir-car-item img { transition: transform .25s ease, box-shadow .25s ease; }
.dir-pub-lateral a.dir-car-item:hover img { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 18px rgba(15, 23, 42, .16), 0 26px 50px -12px rgba(15, 23, 42, .30); }
@media (min-width: 901px) { .dir-busca-lado { position: sticky; top: 24px; } }

/* iy-bruj15-20260923: resultados de busqueda (pedido 23-sep): dos columnas
   como la ficha (listado + banner lateral), banner principal 970x90 arriba
   del listado y las fichas en fila horizontal, una por linea, con el sello
   "Destacado" en la esquina de la tarjeta (el del logo se apaga aqui: en el
   logo chico de 84px taparia la imagen). */
.dir-busca-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; margin-top: 18px; }
.dir-busca-main, .dir-busca-lado { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dir-busca-main .dir-pub-arriba { margin: 0; }
.dir-busca-main .dir-intro { margin: 0; }
@media (max-width: 900px) {
  .dir-busca-cols { grid-template-columns: 1fr; }
}
.dir-lista.dir-lista-filas { grid-template-columns: 1fr; }
.dir-lista-filas .dir-negocio { position: relative; flex-direction: row; gap: 16px; align-items: flex-start; padding: 16px; }
.dir-lista-filas .dir-negocio-logo { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 14px; background: var(--fondo); }
.dir-lista-filas .dir-negocio-logo img { padding: 6px; }
.dir-lista-filas .dir-negocio-ini { font-size: 30px; }
.dir-lista-filas .dir-negocio-txt { padding: 0; }
.dir-lista-filas .dir-destacado { border-color: var(--azul); }
.dir-lista-filas .dir-destacado .dir-negocio-logo::after { content: none; }
.dir-lista-filas .dir-destacado::after {
  content: "Destacado"; position: absolute; top: 14px; right: 14px;
  background: var(--tinta); color: var(--blanco); border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 4px 11px;
}
.dir-lista-filas .dir-destacado .dir-negocio-txt strong { padding-right: 88px; }
@media (max-width: 480px) {
  .dir-lista-filas .dir-destacado::after { top: 10px; right: 10px; }
  .dir-lista-filas .dir-negocio-logo { flex-basis: 64px; width: 64px; height: 64px; }
}

/* iy-bruj23-20260925 (pedido 25-sep "las fichas de los negocios debe salir en
   una columna un poco mas grande con botenes de accion de whatsapp, redes"):
   tarjeta de fila GRANDE de los listados de categoria/lugar y resultados:
   logo mayor, descripcion y botonera de accion (WhatsApp verde, redes como
   pildoras de la ficha y "Ver ficha completa" azul). */
.dir-lista-filas .dir-negocio-fila { padding: 18px; gap: 18px; }
.dir-lista-filas .dir-negocio-fila .dir-negocio-logo { flex-basis: 104px; width: 104px; height: 104px; }
.dir-negocio-fila .dir-negocio-txt { gap: 4px; }
.dir-negocio-fila .dir-negocio-txt strong { font-size: 17px; }
.dir-negocio-fila .dir-negocio-txt strong a { color: inherit; text-decoration: none; }
.dir-negocio-fila .dir-negocio-txt strong a:hover { color: var(--azul); }
.dir-fila-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* iy-bruj27-20260929: el WhatsApp de las tarjetas pasa de contorno a verde
   solido (pedido "mas llamativo... colores distintivos"). */
.dir-acc.dir-acc-wa { background: var(--wa); border-color: var(--wa); color: var(--blanco); font-weight: 700; }
.dir-acc.dir-acc-wa:hover { background: var(--wa-osc); border-color: var(--wa-osc); color: var(--blanco); }
/* iy-bruj27b-20260929 (pedido "y ver en mapa en azul"): Ver en mapa de las
   tarjetas Cerca de ti en azul solido — azul/naranja/verde por accion. */
.dir-acc.dir-acc-mapa { background: var(--azul); border-color: var(--azul); color: var(--blanco); font-weight: 700; }
.dir-acc.dir-acc-mapa:hover { background: var(--azul-osc); border-color: var(--azul-osc); color: var(--blanco); }
/* iy-bruj27b-20260929 (pedido "que lleven los colores de las redes
   sociales"): pildoras de redes (tarjeta de fila y ficha) con el color de
   marca de cada red; van despues de .dir-acc:hover para ganarle (0,2,0). */
.dir-acc.dir-red-facebook { background: #1877F2; border-color: #1877F2; color: var(--blanco); }
.dir-acc.dir-red-facebook:hover { background: #145FCC; border-color: #145FCC; color: var(--blanco); }
.dir-acc.dir-red-instagram { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); border-color: #DD2A7B; color: var(--blanco); }
.dir-acc.dir-red-instagram:hover { background: linear-gradient(45deg, #DD741F, #C21E6A, #6E2B95); border-color: #C21E6A; color: var(--blanco); }
.dir-acc.dir-red-tiktok { background: #010101; border-color: #010101; color: var(--blanco); }
.dir-acc.dir-red-tiktok:hover { background: #2E2E2E; border-color: #2E2E2E; color: #25F4EE; }
.dir-acc.dir-red-youtube { background: #FF0000; border-color: #FF0000; color: var(--blanco); }
.dir-acc.dir-red-youtube:hover { background: #CC0000; border-color: #CC0000; color: var(--blanco); }
.dir-acc.dir-red-linkedin { background: #0A66C2; border-color: #0A66C2; color: var(--blanco); }
.dir-acc.dir-red-linkedin:hover { background: #084F96; border-color: #084F96; color: var(--blanco); }
.dir-acc.dir-red-x { background: #0F1419; border-color: #0F1419; color: var(--blanco); }
.dir-acc.dir-red-x:hover { background: #34404A; border-color: #34404A; color: var(--blanco); }
/* iy-bruj29-20260930: en la tarjeta de FILA las redes y WhatsApp salen como
   ICONOS redondos con su color (mismos hex que las pildoras de arriba); el
   unico boton con texto es Ver ficha completa. */
.dir-icored { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--blanco); flex: none; }
.dir-icored svg { width: 20px; height: 20px; fill: currentColor; }
.dir-icored:hover { color: var(--blanco); }
.dir-icored.dir-acc-wa { background: var(--wa); }
.dir-icored.dir-acc-wa:hover { background: var(--wa-osc); }
.dir-icored.dir-red-facebook { background: #1877F2; }
.dir-icored.dir-red-facebook:hover { background: #145FCC; }
.dir-icored.dir-red-instagram { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.dir-icored.dir-red-instagram:hover { background: linear-gradient(45deg, #DD741F, #C21E6A, #6E2B95); }
.dir-icored.dir-red-tiktok { background: #010101; }
.dir-icored.dir-red-tiktok:hover { background: #2E2E2E; }
.dir-icored.dir-red-youtube { background: #FF0000; }
.dir-icored.dir-red-youtube:hover { background: #CC0000; }
.dir-icored.dir-red-linkedin { background: #0A66C2; }
.dir-icored.dir-red-linkedin:hover { background: #084F96; }
.dir-icored.dir-red-x { background: #0F1419; }
.dir-icored.dir-red-x:hover { background: #34404A; }
.dir-fila-acc { align-items: center; }

/* iy-bruj30-20260930 (pedido 30-sep): en la FICHA, icono SVG de cada red
   dentro de su pildora, y los botones Mostrar telefono / Escribir por
   WhatsApp llevan el icono en un chip redondo translucido en vez de emoji. */
.dir-ficha-redes .dir-acc svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.dir-btn-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .22); flex: none; }
.dir-btn-ico svg { width: 15px; height: 15px; fill: currentColor; }
.dir-btn-sitio.sec .dir-btn-ico { background: rgba(0, 0, 0, .06); }
.dir-btn-sitio.dir-btn-wa .dir-btn-ico { background: rgba(255, 255, 255, .22); }

/* iy-bruj31-20260930 (pedido 30-sep): el popup Compartir este negocio usa
   los iconos redondos .dir-icored en vez de pildoras de texto; fondo gris
   pizarra para la opcion Correo. */
.dir-icored.dir-red-correo { background: #64748B; }
.dir-icored.dir-red-correo:hover { background: #52606D; }
@media (max-width: 480px) {
  .dir-lista-filas .dir-negocio-fila { padding: 14px; gap: 12px; }
  .dir-lista-filas .dir-negocio-fila .dir-negocio-logo { flex-basis: 72px; width: 72px; height: 72px; }
}

/* iy-bruj24-20260925 (pedido 25-sep "debe mostrar en paginacion. que contenga
   15 fichas de negocio"): paginador de los listados — pildoras numeradas,
   la actual azul, Anterior/Siguiente en los extremos. */
.dir-pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.dir-pager-n { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 13px; border: 1px solid var(--borde-f); background: var(--blanco); border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--tinta); text-decoration: none; }
a.dir-pager-n:hover { border-color: var(--naranja); color: var(--naranja-osc); }
.dir-pager-n.act { background: var(--naranja); border-color: var(--naranja); color: var(--blanco); }
.dir-pager-p { color: #5a7590; font-weight: 700; }

/* ============ iy-bruj28-20260929: popup propio de compartir de la ficha
   (pedido 29-sep "popup propio para compartir que permita copiar la URL o
   difundir en redes sociales"). Los botones de redes reusan dir-red-* de
   bruj27b (color de marca) y dir-acc-wa (verde). z-index 200 > los 60 del
   boton subir/barra movil. ============ */
.dir-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dir-modal[hidden] { display: none !important; }
.dir-modal-fondo { position: absolute; inset: 0; background: rgba(15, 42, 68, .55); }
.dir-modal-caja { position: relative; background: var(--blanco); border-radius: 16px; padding: 24px; width: 100%; max-width: 460px; box-shadow: 0 18px 50px rgba(15, 42, 68, .3); }
.dir-modal-caja h3 { margin: 0 0 16px; font-size: 18px; color: var(--tinta); padding-right: 28px; }
.dir-modal-x { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 26px; line-height: 1; color: #5a7590; cursor: pointer; padding: 2px 6px; font-family: inherit; }
.dir-modal-x:hover { color: var(--tinta); }
.dir-comp-redes { display: flex; flex-wrap: wrap; gap: 8px; }
.dir-comp-copia { display: flex; gap: 8px; margin-top: 16px; }
.dir-comp-copia input { flex: 1; min-width: 0; border: 1px solid var(--borde-f); border-radius: 999px; padding: 10px 14px; font-size: 13.5px; color: var(--texto2); background: #F6FAFD; font-family: inherit; }

/* iy-bruj35-20261001 (pedido 1-oct "aplica este codigo para mejorar la vista
   de contacto": tarjeta aportada por el usuario, adaptada a los colores de
   marca; reemplaza las filas chip de bruj34): cabecera Contacto + Ver en
   Interyellow, botones en rejilla de 2 columnas con Agendar cita arriba a lo
   ancho, filas con icono en caja redondeada suave y utilidades Copiar /
   Como llegar. Los botones reusan .dir-btn-sitio/.dir-btn-agenda (tel azul
   por #dir-btn-tel de bruj28c, WA verde, cita naranja); dentro de la rejilla
   se les quita el margen y el tope de 460px de bruj28b. */
.dir-cont-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dir-cont-head h2 { margin: 0; }
.dir-cont-ver { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--texto2); text-decoration: none; padding: 6px 10px; border-radius: 999px; }
.dir-cont-ver:hover { background: #F4F7FB; color: var(--azul); }
.dir-cont-ver svg { width: 14px; height: 14px; }
.dir-cont-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; max-width: 560px; }
.dir-cont-acts .dir-btn-agenda { grid-column: 1 / -1; gap: 10px; }
.dir-cont-acts .dir-btn-sitio, .dir-cont-acts .dir-btn-agenda { margin-top: 0; max-width: none; min-height: 48px; }
.dir-cont-acts .dir-btn-agenda svg { width: 20px; height: 20px; flex: none; }
.dir-cont-lista { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--borde); max-width: 560px; }
.dir-cont-fila { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--borde); }
.dir-cont-fila:last-child { border-bottom: 0; padding-bottom: 4px; }
.dir-cont-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: #F4F7FB; flex: none; }
.dir-cont-ico svg { width: 18px; height: 18px; fill: var(--azul); display: block; }
.dir-cont-val { flex: 1; min-width: 0; color: var(--texto2); font-size: 14.5px; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
a.dir-cont-val:hover { color: var(--azul); }
.dir-cont-util { display: inline-flex; align-items: center; gap: 6px; flex: none; border: 1px solid var(--borde-f); background: var(--blanco); color: var(--texto2); font-family: inherit; font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 9px; cursor: pointer; text-decoration: none; }
.dir-cont-util:hover { border-color: var(--azul); color: var(--azul); }
.dir-cont-util svg { width: 14px; height: 14px; }
.dir-cont-util.ok { border-color: var(--wa); color: var(--wa); }
@media (max-width: 520px) {
  .dir-cont-acts { grid-template-columns: 1fr; }
  .dir-cont-util span { display: none; }
}

/* iy-bruj36-20261001 (pedido 1-oct con captura: iconos svg en las acciones
   del encabezado y todo en una misma linea): iconos stroke azules (blanco en
   el boton naranja), corazon lleno en rojo al guardar, y la fila NO envuelve
   — en pantallas angostas se desplaza de lado en vez de partirse en dos. */
.dir-ficha-acciones { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.dir-ficha-acciones .dir-acc { flex: none; white-space: nowrap; }
.dir-ficha-acciones .dir-acc svg { width: 16px; height: 16px; flex: none; stroke: var(--azul); }
.dir-ficha-acciones .dir-acc.pri svg { stroke: var(--blanco); }
.dir-ficha-acciones .dir-acc.on svg { fill: #e2554f; stroke: #e2554f; }

/* ---- iy-bruj37-20261001: ficha — Contacto sube antes de Ubicacion y la
   direccion de Ubicacion lleva el mismo chip de icono de Contacto ---- */
.dir-ubica-dir { border-bottom: 0; padding: 0 0 12px; }

/* ---- iy-bruj38-20261001: "Cerca de ti" con el diseño de la maqueta —
   pastilla Usar mi ubicacion en la cabecera, chip de distancia, botones
   pastel en rejilla (azul/naranja/verde suaves), tarjeta elegida con borde
   azul y circulo naranja del radio en el mapa (capas dir-circ en el JS de
   cercabloque). El logo del negocio se mantiene; la inicial sigue siendo
   solo el respaldo de los negocios sin imagen. ---- */
.dir-cerca-usar { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; margin-left: 6px; border: 0; background: #E6F3FC; color: var(--azul); border-radius: 999px; padding: 8px 16px; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.dir-cerca-usar svg { width: 15px; height: 15px; flex: none; }
.dir-cerca-usar:hover { background: #D2E9F9; color: var(--azul-osc); }
.dir-cercano-dist { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; background: #FFF1E0; color: #D96E00; border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.dir-cercano-dist svg { width: 13px; height: 13px; flex: none; }
.dir-negocio.dir-cercano { border-radius: 16px; }
.dir-cercano.sel { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul), 0 10px 24px rgba(0, 143, 226, .14); }
.dir-cercano.sel .dir-num { background: var(--azul); }
.dir-cercano .dir-negocio-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dir-cercano .dir-acc { justify-content: center; }
.dir-cercano .dir-acc.dir-acc-mapa { background: #E6F3FC; border-color: #E6F3FC; color: var(--azul); }
.dir-cercano .dir-acc.dir-acc-mapa:hover { background: #D2E9F9; border-color: #D2E9F9; color: var(--azul-osc); }
.dir-cercano .dir-acc.pri { background: #FFF1E0; border-color: #FFF1E0; color: #D96E00; }
.dir-cercano .dir-acc.pri:hover { background: #FFE6C7; border-color: #FFE6C7; color: #B85D00; }
.dir-cercano .dir-acc.dir-acc-wa { grid-column: 1 / -1; background: #E7F8EE; border-color: #E7F8EE; color: #1E9E4C; }
.dir-cercano .dir-acc.dir-acc-wa:hover { background: #D5F2E1; border-color: #D5F2E1; color: #167A3A; }

/* ---- iy-bruj39-20261001 (maqueta 1-oct de la tarjeta de rejilla): la
   tarjeta base deja de ser un unico enlace; categoria en pastilla celeste
   arriba, nombre enlazado con insignia azul, filas de telefono y zona con
   icono svg gris, y pie con el boton naranja (chevron) mas un boton cuadrado
   celeste que llama al negocio. El logo del negocio se mantiene y la inicial
   sigue siendo solo respaldo. Los contextos de fila (dir-cercano con markup
   propio y dir-cerca-cols que si usa la tarjeta) conservan su compacto.
   iy-bruj39b-20261001: los iconos de las filas y del boton de llamada pasan
   a CONTORNO (dir_ico_dato, stroke currentColor — por eso aqui va color y
   no fill) y la fila del pin lleva la direccion con la zona detras. ---- */
.dir-negocio-txt { gap: 5px; }
.dir-cat-pild { align-self: flex-start; background: #E6F3FC; color: var(--azul); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 700; }
.dir-negocio-nom { text-decoration: none; color: var(--tinta); display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.dir-negocio-nom:hover strong { color: var(--azul); }
.dir-verif { width: 16px; height: 16px; flex: none; fill: var(--azul); }
.dir-negocio-dato { display: flex; align-items: flex-start; gap: 8px; color: #5a7590; font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.dir-negocio-dato svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: #8CA3B8; }
.dir-negocio-pie { margin-top: 8px; display: flex; align-items: stretch; gap: 8px; }
.dir-negocio-pie .dir-verficha { margin-top: 0; align-self: auto; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; padding: 9px 14px; border-radius: 12px; }
.dir-negocio-pie .dir-verficha svg { width: 13px; height: 13px; flex: none; }
.dir-tel-cuad { flex: none; width: 38px; border-radius: 12px; background: #E6F3FC; color: var(--azul); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.dir-tel-cuad svg { width: 16px; height: 16px; }
.dir-tel-cuad:hover { background: #D2E9F9; color: var(--azul-osc); }
.dir-cerca-cols .dir-lista .dir-negocio-pie { margin-top: 6px; }

/* iy-bruj41-20261002: cabecera MOVIL (maqueta como referencia): aparece una
   hamburguesa con el menu (secciones + Ingresar + Publica tu negocio) que en
   escritorio no existe porque alli ya esta la nav / el boton verde. Por
   pedido (41b) el logo Indexsite y la bandera circular del pais se MANTIENEN
   tal cual en movil; solo el boton verde pasa al menu en angosto. */
.dir-menu { display: none; position: relative; }
.dir-menu summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer; color: var(--tinta);
}
.dir-menu summary::-webkit-details-marker { display: none; }
.dir-menu summary:hover { background: var(--fondo); }
.dir-menu summary svg { width: 26px; height: 26px; }
.dir-menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
  min-width: 235px; background: var(--blanco); border: 1px solid var(--borde);
  border-radius: 18px; box-shadow: var(--sombra); padding: 10px;
}
.dir-menu-panel a {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  border-radius: 12px; text-decoration: none; color: var(--tinta);
  font-weight: 700; font-size: 15px;
}
.dir-menu-panel a:hover { background: var(--fondo); }
.dir-menu-panel .dir-menu-wa { justify-content: center; margin-top: 6px; background: var(--wa); color: var(--blanco); }
.dir-menu-panel .dir-menu-wa:hover { background: var(--wa-osc); }
.dir-menu-panel .dir-menu-wa svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 900px) {
  .dir-menu { display: block; }
}
@media (max-width: 700px) {
  .dir-menu { margin-left: auto; }
  .dir-cab-int { gap: 10px; }
  .dir-cab-der, .dir-btn-negocio { display: none; }
}