/* ==========================================================================
   SOMOS SAMARIA — Guía Comercial Digital
   Design tokens grounded in the brand mark: rojo + dorado sobre blanco,
   tipografía redondeada y amigable para una guía de barrio.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  /* Color — tomado del isotipo: avión rojo/dorado, texto azul-noche */
  --rojo: #D81E3F;
  --rojo-oscuro: #A8172F;
  --rojo-suave: #FBE7EA;
  --dorado: #F2A900;
  --dorado-suave: #FDF0CC;
  --noche: #17212B;
  --noche-60: #5C6672;
  --noche-40: #8A929C;
  --blanco: #FFFFFF;
  --arena: #F7F4EE;          /* banda de fondo suave, no la tarjeta */
  --linea: #E9E3D6;
  --whatsapp: #25D366;
  --whatsapp-oscuro: #1DA851;

  /* Tipografía */
  --f-display: 'Fredoka', system-ui, sans-serif;
  --f-body: 'Manrope', system-ui, sans-serif;

  /* Radios — variados a propósito según jerarquía, no un único valor */
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 10px;
  --r-pill: 999px;

  /* Sombra — solo para elementos realmente elevados */
  --sombra-flotante: 0 8px 24px -8px rgba(23, 33, 43, 0.18);
  --sombra-suave: 0 2px 10px -4px rgba(23, 33, 43, 0.10);

  --ancho-maximo: 480px;      /* lienzo móvil de referencia */
  --ancho-maximo-tablet: 720px;
  --ancho-maximo-desktop: 1080px;
}

/* Colores de identidad por categoría — permiten reconocer cada
   sección de un vistazo sin depender solo del texto */
:root {
  --cat-comida-bg: #FDEAE4;   --cat-comida-fg: #C6431B;
  --cat-belleza-bg: #FBE7F1;  --cat-belleza-fg: #C22876;
  --cat-tecnologia-bg: #E7EEF7; --cat-tecnologia-fg: #29527A;
  --cat-salud-bg: #E7F5EC;    --cat-salud-fg: #1F7A46;
  --cat-mercado-bg: #FDF0DA;  --cat-mercado-fg: #B5720B;
  --cat-reparaciones-bg: #ECEAF6; --cat-reparaciones-fg: #4A3F91;
  --cat-ropa-bg: #F3E8FA;     --cat-ropa-fg: #7A2FA3;
  --cat-licores-bg: #F6E8EC;  --cat-licores-fg: #8B2942;
  --cat-mascotas-bg: #E3F3F1; --cat-mascotas-fg: #157C6D;
  --cat-empleos-bg: #E5F0FB;  --cat-empleos-fg: #1D5C99;
  --cat-casas-bg: #FBEFE2; --cat-casas-fg: #A85A1A;
  --cat-servicios-bg: #EAF2E4; --cat-servicios-fg: #4C7A2B;
  --cat-otros-bg: #EDEBE6;    --cat-otros-fg: #5C5347;
}

/* ---------- Reset base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--noche);
  background: var(--blanco);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2.5px solid var(--rojo);
  outline-offset: 2px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Layout ---------- */
.envoltorio {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 700px) {
  .envoltorio { max-width: var(--ancho-maximo-tablet); }
}
@media (min-width: 1024px) {
  .envoltorio { max-width: var(--ancho-maximo-desktop); }
}

.pagina { min-height: 100dvh; display: flex; flex-direction: column; }
.contenido { flex: 1; padding-bottom: 56px; }

/* ---------- Encabezado (home) ---------- */
.encabezado-home {
  padding: 18px 0 6px;
  text-align: center;
}
.encabezado-home img {
  height: 128px;
  width: auto;
  margin: 0 auto;
}

/* ---------- Barra superior (subpáginas) ---------- */
.barra-superior {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--linea);
}
.barra-superior .envoltorio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.boton-atras {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--arena);
  border: none;
  color: var(--noche);
}
.boton-atras svg { width: 20px; height: 20px; }
.titulo-barra {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Hero de búsqueda ---------- */
.hero {
  padding: 10px 0 22px;
  text-align: center;
}
.hero h1 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.2;
  color: var(--noche);
  letter-spacing: -0.01em;
}
.hero p {
  margin-top: 8px;
  color: var(--noche-60);
  font-size: 0.95rem;
  max-width: 34ch;
  margin-inline: auto;
}

/* ---------- Buscador ---------- */
.buscador {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--blanco);
  border: 1.5px solid var(--linea);
  border-radius: var(--r-pill);
  padding: 6px 8px 6px 18px;
  box-shadow: var(--sombra-flotante);
}
.buscador svg { width: 20px; height: 20px; color: var(--noche-40); flex: none; }
.buscador input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 10px 0;
  font-size: 0.98rem;
  color: var(--noche);
  min-width: 0;
}
.buscador input::placeholder { color: var(--noche-40); }
.buscador button.enviar {
  flex: none;
  background: var(--rojo);
  color: var(--blanco);
  border: none;
  border-radius: var(--r-pill);
  padding: 11px 18px;
  font-weight: 700;
  font-size: 0.9rem;
}

/* ---------- Categorías ---------- */
.seccion-categorias { padding: 28px 0 8px; }
.seccion-categorias h2 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 15px;
}
.seccion-categorias h2::after {
  content: "";
  width: 28px;
  height: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--rojo), var(--dorado));
  transform: translateY(2px);
}
.grid-categorias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (min-width: 700px) {
  .grid-categorias { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}
.tarjeta-categoria {
  --cat-bg-2: color-mix(in srgb, var(--cat-bg) 58%, white);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 76px;
  padding: 6px 6px 6px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.82);
  background: linear-gradient(145deg, var(--cat-bg-2) 0%, var(--cat-bg) 62%, color-mix(in srgb, var(--cat-bg) 82%, var(--cat-fg)) 100%);
  box-shadow: 0 3px 12px -7px rgba(23,33,43,.30);
  text-align: center;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.tarjeta-categoria::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 76px;
  height: 64px;
  top: -31px;
  right: -22px;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
}
.tarjeta-categoria::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 64px;
  height: 52px;
  bottom: -30px;
  left: -20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cat-fg) 8%, transparent);
}
.tarjeta-categoria .emoji {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 2px 7px -5px rgba(23,33,43,.35);
  font-size: 1.48rem;
  line-height: 1;
  transition: transform .18s ease;
}
.tarjeta-categoria span.etiqueta {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: .77rem;
  letter-spacing: -.01em;
  color: var(--cat-fg, var(--noche));
}
@media (hover: hover) {
  .tarjeta-categoria:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 20px -10px rgba(23,33,43,.34);
    filter: saturate(1.04);
  }
  .tarjeta-categoria:hover .emoji { transform: scale(1.06) rotate(-2deg); }
}
.tarjeta-categoria:active { transform: scale(.965); }
@media (prefers-reduced-motion: reduce) {
  .tarjeta-categoria,
  .tarjeta-categoria .emoji { transition: none; }
}

/* ---------- Destacados (home) ---------- */
.seccion-destacados { padding: 28px 0 10px; }
.seccion-destacados h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 14px;
}
.rieles-destacados {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.rieles-destacados::-webkit-scrollbar { display: none; }
/* Tarjeta de patrocinador: solo imagen, sin texto. La insignia va
   superpuesta sobre la esquina de la foto. */
.tarjeta-mini {
  position: relative;
  flex: none;
  width: 152px;
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--arena);
  overflow: hidden;
  display: block;
}
.tarjeta-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tarjeta-mini .mini-marcador {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  background: var(--cat-bg, var(--arena));
}
.badge-sobre-foto {
  position: absolute;
  top: 8px;
  left: 8px;
  /* fondo sólido para que la insignia se lea sobre cualquier foto */
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--sombra-suave);
}


/* ---------- Carrusel de destacados (home) ---------- */
.carrusel { position: relative; }
.carrusel-flecha {
  display: none;               /* solo se muestran en computador (ver abajo) */
  position: absolute;
  top: calc(50% - 3px);
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--noche);
  box-shadow: var(--sombra-flotante);
  cursor: pointer;
}
.carrusel-flecha svg { width: 18px; height: 18px; }
.carrusel-flecha-prev { left: 4px; }
.carrusel-flecha-sig { right: 4px; }
@media (hover: hover) {
  .carrusel.con-flechas .carrusel-flecha { display: inline-flex; }
  .carrusel-flecha:hover { background: #fff; color: var(--rojo); }
}


/* ---------- Insignias ---------- */
.badge-nivel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--dorado-suave);
  color: #8A5B00;
}
.badge-nivel svg { width: 11px; height: 11px; }
.badge-samaria {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--noche);
  color: var(--blanco);
}

/* ---------- Filtros (resultados) ---------- */
.barra-filtros {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 0 4px;
  -webkit-overflow-scrolling: touch;
}
.barra-filtros::-webkit-scrollbar { display: none; }
.barra-filtros[hidden] { display: none; }
.barra-operacion { padding-top: 6px; }
.chip-filtro {
  flex: none;
  border: 1.5px solid var(--linea);
  background: var(--blanco);
  color: var(--noche-60);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  gap: 6px;
}
.chip-filtro svg { width: 15px; height: 15px; }
.chip-filtro[aria-pressed="true"] {
  background: var(--noche);
  border-color: var(--noche);
  color: var(--blanco);
}
.selector-orden {
  border: 1.5px solid var(--linea);
  background: var(--blanco);
  color: var(--noche);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 9px 12px;
  border-radius: var(--r-pill);
}

.contador-resultados {
  padding: 14px 0 4px;
  color: var(--noche-60);
  font-size: 0.86rem;
}

/* ---------- Tarjeta de negocio (lista de resultados) ---------- */
.lista-negocios { display: flex; flex-direction: column; gap: 12px; padding: 12px 0 20px; }

.tarjeta-negocio {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  align-items: flex-start;
  cursor: pointer;
}
.tarjeta-negocio:active { background: var(--arena); }
.tarjeta-negocio .foto {
  width: 96px;
  height: 96px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex: none;
  background: var(--arena);
}



/* =========================================
   TARJETAS ESPECIALES — SOMOS SAMARIA
   ========================================= */

.tarjeta-negocio {
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Reserva espacio para la cinta en la fila del nombre */
.tarjeta-negocio.nivel-destacado .fila-top,
.tarjeta-negocio.nivel-patrocinado .fila-top,
.tarjeta-negocio.nivel-premium .fila-top {
  padding-right: 48px;
}

/* DESTACADO: dorado y crema */
.tarjeta-negocio.nivel-destacado {
  background: linear-gradient(110deg, #fff9e8, #fffdf6);
  border: 1.5px solid #e8b52e;
  border-left: 5px solid #f0b400;
  box-shadow: 0 3px 12px rgba(205, 151, 0, .10);
}

/* PATROCINADO: rojo pastel */
.tarjeta-negocio.nivel-patrocinado {
  background: linear-gradient(110deg, #fff3f2, #fffafa);
  border: 1.5px solid #ffaaa9;
  border-left: 5px solid #ff7779;
  box-shadow: 0 3px 12px rgba(230, 80, 85, .09);
}

/* PREMIUM: rojo intenso con fondo cálido */
.tarjeta-negocio.nivel-premium {
  background: linear-gradient(110deg, #fff0eb, #fffafa);
  border: 1.5px solid #f0443e;
  border-left: 5px solid #ed2929;
  box-shadow: 0 3px 14px rgba(210, 30, 30, .12);
}

/* CINTA DECORATIVA EN LA ESQUINA SUPERIOR DERECHA */
.cinta-nivel {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 14px;
  width: 40px;
  height: 57px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
  box-sizing: border-box;
  color: white;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  pointer-events: none;
}

.cinta-nivel svg {
  width: 23px;
  height: 23px;
  display: block;
}

/* Cinta dorada con estrella */
.cinta-destacado {
  background: linear-gradient(150deg, #f8c52c, #d99600);
  color: #fff8dc;
}

/* Cinta rojo pastel con corona */
.cinta-patrocinado {
  background: linear-gradient(150deg, #ff7779, #ed4248);
  color: #fff;
}

/* Cinta premium roja con corona dorada */
.cinta-premium {
  background: linear-gradient(150deg, #ff3737, #c90000);
  color: #ffd34e;
}

/* INSIGNIAS DE CATEGORÍA */
.badge-nivel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .2px;
}

.badge-nivel svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* Destacado */
.badge-destacado {
  background: #ffebad;
  color: #956300;
}

/* Patrocinado: tamaño y presencia similares a Destacado */
.badge-patrocinado {
  background: #ff6266;
  color: #fff;
}

/* Premium */
.badge-premium {
  background: #e51e25;
  color: #fff;
  border: 1px solid #f4c447;
}

/* Conserva una apariencia limpia al pasar el cursor */
@media (hover: hover) {
  .tarjeta-negocio.nivel-destacado:hover {
    box-shadow: 0 5px 16px rgba(205, 151, 0, .16);
  }

  .tarjeta-negocio.nivel-patrocinado:hover {
    box-shadow: 0 5px 16px rgba(230, 80, 85, .15);
  }

  .tarjeta-negocio.nivel-premium:hover {
    box-shadow: 0 5px 18px rgba(210, 30, 30, .18);
  }
}



.tarjeta-negocio .foto-marcador {
  width: 96px;
  height: 96px;
  border-radius: var(--r-sm);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: var(--cat-bg, var(--arena));
}
.tarjeta-negocio .cuerpo { flex: 1; min-width: 0; }
.tarjeta-negocio .fila-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  justify-content: space-between;
}
.tarjeta-negocio .nombre {
  font-weight: 800;
  font-size: 1rem;
  color: var(--noche);
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}
.tarjeta-negocio .descripcion-tarjeta {
  margin: 4px 0 0;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--noche-60);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta-negocio .linea-dato {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.84rem;
  color: var(--noche-60);
}
.tarjeta-negocio .linea-dato svg { width: 14px; height: 14px; flex: none; color: var(--noche-40); }
/* Contacto en tarjetas: icono circular con color de marca y cápsula transparente. */
.tarjeta-negocio .boton-contacto-lista {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  margin-top: 9px;
  padding: 3px 14px 3px 3px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: transparent;
  text-decoration: none;
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.2;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tarjeta-negocio .boton-contacto-lista:hover { transform: translateY(-1px); box-shadow: 0 2px 7px #00000012; }
.tarjeta-negocio .boton-contacto-lista .contacto-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
}
.tarjeta-negocio .boton-contacto-lista .contacto-icono svg { width: 18px; height: 18px; color: currentColor; }
.tarjeta-negocio .boton-contacto-lista .contacto-texto { min-width: 0; overflow-wrap: anywhere; }
.tarjeta-negocio .boton-contacto-lista.whatsapp { color: #159447; border-color: #25D366; }
.tarjeta-negocio .boton-contacto-lista.whatsapp .contacto-icono { background: #20C95A; }
.tarjeta-negocio .boton-contacto-lista.instagram { color: #C13584; border-color: #C13584; }
.tarjeta-negocio .boton-contacto-lista.instagram .contacto-icono { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.tarjeta-negocio .boton-contacto-lista.facebook { color: #1769D2; border-color: #1877F2; }
.tarjeta-negocio .boton-contacto-lista.facebook .contacto-icono { background: #1877F2; }

/* ---------- "También en Samaria" (fin de resultados/categoría) ----------
   Muestra los negocios nivel Premium que no aparecen ya en la categoría
   o búsqueda actual. Reutiliza .lista-negocios (misma grilla en tablet/
   desktop) y .tarjeta-negocio; solo aquí las tarjetas llevan descripción. */
.seccion-tambien-samaria { padding: 20px 0 10px; }
.seccion-tambien-samaria[hidden] { display: none; }
.seccion-tambien-samaria h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 14px;
}

/* ---------- Estado vacío ---------- */
.estado-vacio {
  text-align: center;
  padding: 48px 20px;
  color: var(--noche-60);
}
.estado-vacio .emoji { font-size: 2rem; margin-bottom: 10px; }
.estado-vacio p { font-size: 0.92rem; }

/* ---------- Perfil de negocio ---------- */
/* ---------- Cabecera del perfil: portada + foto superpuesta ---------- */
.perfil-cabecera {
  position: relative;
  /* espacio inferior para que quepa la mitad del avatar que sobresale */
  margin-bottom: 52px;
}
.perfil-portada {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  display: block;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--arena);
}
.perfil-portada-marcador {
  /* sin portada propia: banda suave con el color de la categoría */
  background:
    linear-gradient(135deg, var(--cat-bg, var(--arena)) 0%, var(--blanco) 140%),
    var(--cat-bg, var(--arena));
}
.perfil-avatar {
  position: absolute;
  left: 20px;
  bottom: -44px;
  width: 96px;
  height: 96px;
  border-radius: 20px;
  object-fit: cover;
  background: var(--blanco);
  border: 3px solid var(--blanco);
  box-shadow: var(--sombra-flotante);
}
.perfil-avatar-marcador {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  background: var(--cat-bg, var(--arena));
}
.perfil-encabezado { padding: 20px 0 4px; }

/* En pantallas anchas el texto va en una columna centrada, así que la
   cabecera se limita al mismo ancho para que el avatar quede alineado
   con el nombre del negocio y no pegado al borde de la pantalla. */
@media (min-width: 700px) {
  .perfil-cabecera {
    max-width: var(--ancho-maximo-tablet);
    margin-inline: auto;
  }
  .perfil-portada { border-radius: var(--r-lg); }
}
@media (min-width: 1024px) {
  .perfil-cabecera { max-width: var(--ancho-maximo-desktop); }
}
.perfil-encabezado .etiquetas-top {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.perfil-encabezado h1 {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--noche);
}
.perfil-encabezado .categoria {
  margin-top: 4px;
  color: var(--noche-60);
  font-size: 0.92rem;
  font-weight: 600;
}
.perfil-descripcion {
  padding: 14px 0 4px;
  color: var(--noche);
  font-size: 0.95rem;
  line-height: 1.6;
}
.perfil-direccion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 0;
  color: var(--noche-60);
  font-size: 0.9rem;
}
.perfil-direccion svg { width: 16px; height: 16px; color: var(--rojo); flex: none; }

.acciones-perfil {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 20px 0 6px;
}
.boton-accion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 10px;
  border-radius: var(--r-md);
  border: none;
  font-weight: 800;
  font-size: 0.88rem;
  text-align: center;
}
.boton-accion svg { width: 18px; height: 18px; flex: none; }
.boton-accion.primario { background: var(--whatsapp); color: var(--blanco); grid-column: 1 / -1; padding: 17px 10px; font-size: 0.95rem; }
.boton-accion.secundario { background: var(--noche); color: var(--blanco); }
.boton-accion.terciario { background: var(--arena); color: var(--noche); }

.seccion-perfil {
  padding: 20px 0;
  border-top: 1px solid var(--linea);
}
.seccion-perfil h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 10px;
}
.lista-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-info {
  background: var(--arena);
  color: var(--noche);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: var(--r-pill);
}
.tabla-horario { font-size: 0.9rem; color: var(--noche-60); display: flex; align-items: center; gap: 6px; }
.icono-linea { display: inline-flex; width: 15px; height: 15px; flex: none; color: var(--rojo); }
.icono-linea svg { width: 100%; height: 100%; }
.chip-info .icono-linea { color: var(--noche-60); margin-right: 4px; vertical-align: -3px; }
.pie-perfil {
  padding: 20px 0 8px;
  color: var(--noche-40);
  font-size: 0.76rem;
  text-align: center;
}

/* ---------- Sección "¿Tienes un negocio?" ---------- */
.cta-registro {
  margin: 30px 0 0;
  padding: 22px 18px;
  background: var(--noche);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--blanco);
}
.cta-registro h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.1rem;
}
.cta-registro p {
  margin-top: 6px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.72);
}
.cta-registro a.boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  background: var(--dorado);
  color: var(--noche);
  font-weight: 800;
  font-size: 0.88rem;
  padding: 12px 20px;
  border-radius: var(--r-pill);
}

/* ---------- Botón "Activar notificaciones" ---------- */
.boton-notificaciones {
  display: block;
  margin: 16px auto 0;
  padding: 12px 20px;
  border: 1.5px solid var(--noche);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--noche);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
}
.boton-notificaciones:disabled { opacity: 0.6; cursor: default; }
.boton-notificaciones[hidden] { display: none; }

/* ---------- Sección "Síguenos en nuestras redes" ---------- */
.seccion-redes {
  margin-top: 26px;
  text-align: center;
}
.seccion-redes[hidden] { display: none; }
.seccion-redes h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--noche);
  margin-bottom: 14px;
}
.fila-redes {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.boton-red {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  color: var(--blanco);
  transition: transform 0.12s ease;
}
.boton-red:active { transform: scale(0.94); }
.boton-red svg { width: 24px; height: 24px; }
.red-facebook { background: #1877F2; }
.red-instagram { background: linear-gradient(45deg, #F09433, #DC2743 45%, #BC1888); }
.red-tiktok { background: var(--noche); }

footer.pie-sitio {
  text-align: center;
  padding: 28px 20px 90px;
  color: var(--noche-40);
  font-size: 0.78rem;
}

/* ---------- Cargando ---------- */
.cargando { padding: 40px 0; text-align: center; color: var(--noche-40); font-size: 0.88rem; }
.esqueleto {
  background: linear-gradient(90deg, var(--arena) 25%, #efece3 37%, var(--arena) 63%);
  background-size: 400% 100%;
  animation: brillo 1.4s ease infinite;
  border-radius: var(--r-md);
}
@keyframes brillo {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------- Desktop / tablet: más aire, sin perder el marco móvil ---------- */
@media (min-width: 700px) {
  .hero h1 { font-size: 2.1rem; }
  .lista-negocios { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .lista-negocios { grid-template-columns: 1fr 1fr 1fr; }
  .acciones-perfil { grid-template-columns: repeat(4, 1fr); }
  .boton-accion.primario { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Página oculta: /search-statics ---------- */
.stats-resumen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 18px 0 6px;
}
.stats-tarjeta {
  background: var(--arena);
  border-radius: var(--r-md);
  padding: 14px 10px;
  text-align: center;
}
.stats-tarjeta .valor {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--noche);
  line-height: 1.15;
}
.stats-tarjeta .etiqueta {
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--noche-60);
  font-weight: 700;
}
.stats-seccion { padding: 22px 0 4px; }
.stats-seccion h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 12px;
}
.stats-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linea);
}
.stats-fila .rango {
  flex: none;
  width: 22px;
  font-weight: 800;
  color: var(--noche-40);
  font-size: 0.85rem;
  text-align: right;
}
.stats-fila .info { flex: 1; min-width: 0; }
.stats-fila .termino {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--noche);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-fila .barra {
  margin-top: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--linea);
  overflow: hidden;
}
.stats-fila .barra > span {
  display: block;
  height: 100%;
  background: var(--rojo);
  border-radius: var(--r-pill);
}
.stats-fila .conteo {
  flex: none;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--noche);
  min-width: 28px;
  text-align: right;
}
.stats-nota {
  margin-top: 4px;
  color: var(--noche-40);
  font-size: 0.78rem;
}

.promo-media { padding: 16px 0 4px; }
.promo-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: #000; }
.promo-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.promo-video-directo { width: 100%; max-height: 75vh; border-radius: var(--r-lg); background: #000; display: block; }
.promo-imagen { width: 100%; max-height: 75vh; object-fit: contain; border-radius: var(--r-lg); background: var(--arena); display: block; }
.boton-volver-perfil { width: 100%; justify-content: center; margin-top: 18px; }




#modal-instalar-app { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-end; justify-content: center; }
.modal-instalar-fondo { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.modal-instalar-caja {
  position: relative; background: #fff; width: 100%; max-width: 420px;
  border-radius: 18px 18px 0 0; padding: 24px 20px 28px; text-align: center;
  box-shadow: 0 -6px 24px rgba(0,0,0,.2);
}
.modal-instalar-caja h3 { margin: 10px 0 6px; }
.modal-instalar-caja .boton { width: 100%; margin-top: 14px; }
.modal-instalar-caja .boton-texto { background: none; border: none; margin-top: 8px; color: var(--noche); opacity: .6; }


/* Opiniones de Google (Places UI Kit) — con la identidad de Somos Samaria.
   Las variables --gmp-mat-* son las que Google permite personalizar. */
gmp-place-details {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto 14px;
  color-scheme: light; /* la web es siempre clara: evita que el widget se oscurezca solo */

  --gmp-mat-font-family: var(--f-body);
  --gmp-mat-color-surface: var(--blanco);
  --gmp-mat-color-on-surface: var(--noche);
  --gmp-mat-color-on-surface-variant: var(--noche-60);
  --gmp-mat-color-primary: var(--rojo);
  --gmp-mat-color-secondary-container: var(--rojo-suave);
  --gmp-mat-color-on-secondary-container: var(--rojo-oscuro);
  --gmp-mat-color-neutral-container: var(--arena);
  --gmp-mat-color-on-neutral-container: var(--noche-60);
  --gmp-mat-color-disabled-surface: var(--linea);
  --gmp-mat-color-outline-decorative: var(--linea);
  --gmp-mat-color-positive: var(--whatsapp-oscuro);
  --gmp-mat-color-negative: var(--rojo);

  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  overflow: hidden;
}

.boton-resena {
  max-width: 400px;
  margin: 0 auto;
  background: var(--rojo);
  color: var(--blanco);
}