/* ==========================================================================
   PAPEYO v2 — sistema visual de la plantilla nueva
   ========================================================================== */
:root{
  --naranja:#F2661C;
  --naranja-osc:#D8540E;
  --naranja-suave:#FFF1E8;
  --tinta:#15161A;
  --gris:#6B6F76;
  --gris-claro:#9AA0A6;
  --linea:#E7E8EA;
  --fondo:#FFFFFF;
  --fondo-alt:#FAFAFB;
  --oscuro:#1C1D21;
  --radio:14px;
  --radio-sm:10px;
  --sombra:0 1px 2px rgba(16,17,20,.04), 0 4px 16px rgba(16,17,20,.05);
  --sombra-alta:0 8px 32px rgba(16,17,20,.10);
  --header-h:64px;
  --max:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit}

.contenedor{max-width:var(--max); margin:0 auto; padding:0 24px}

/* ---------- HEADER ---------- */
.header{
  position:sticky; top:0; z-index:100;
  background:var(--naranja); height:var(--header-h);
  display:flex; align-items:center;
}
.header .contenedor{display:flex; align-items:center; gap:28px; width:100%}
.logo{display:flex; align-items:center; gap:9px; color:#fff; font-weight:700; font-size:1.28rem; letter-spacing:-.02em}
.logo svg{width:26px; height:26px; flex:none}
.nav{display:flex; align-items:center; gap:26px; margin-left:14px}
.nav a{color:rgba(255,255,255,.94); font-size:.875rem; font-weight:500; padding:6px 0; border-bottom:2px solid transparent; transition:border-color .15s}
.nav a:hover,.nav a.activo{border-bottom-color:#fff}
.header-acciones{margin-left:auto; display:flex; align-items:center; gap:10px}
.btn-blanco{background:#fff; color:var(--tinta); border:none; border-radius:8px; padding:9px 16px; font-size:.8125rem; font-weight:600; cursor:pointer; white-space:nowrap}
.btn-blanco:hover{background:#F5F5F5}
.btn-borde{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.6); border-radius:8px; padding:8px 16px; font-size:.8125rem; font-weight:600; cursor:pointer; white-space:nowrap}
.btn-borde:hover{border-color:#fff; background:rgba(255,255,255,.12)}
.menu-btn{display:none; background:none; border:none; color:#fff; cursor:pointer; padding:6px}

/* ---------- BOTONES ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:9px; padding:11px 22px; font-size:.875rem; font-weight:600; cursor:pointer; transition:background .15s, transform .1s}
.btn:active{transform:translateY(1px)}
.btn-primario{background:var(--naranja); color:#fff}
.btn-primario:hover{background:var(--naranja-osc)}
.btn-suave{background:#fff; color:var(--tinta); border:1px solid var(--linea)}
.btn-suave:hover{border-color:var(--gris-claro)}
.btn-sm{padding:8px 15px; font-size:.8125rem}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:430px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; background:var(--oscuro)}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55}
.hero::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,16,20,.35) 0%, rgba(15,16,20,.72) 100%)}
.hero-contenido{position:relative; z-index:2; color:#fff; padding:64px 24px; max-width:760px; width:100%}
.hero h1{font-size:clamp(2rem,5vw,3.1rem); font-weight:700; line-height:1.14; margin:0 0 16px; letter-spacing:-.025em}
.hero p{font-size:1.0625rem; color:rgba(255,255,255,.9); margin:0 0 30px; line-height:1.5}
.hero-buscador{display:flex; gap:8px; background:#fff; border-radius:11px; padding:7px; max-width:560px; margin:0 auto; box-shadow:var(--sombra-alta)}
.hero-buscador input{flex:1; border:none; outline:none; padding:11px 15px; font-size:.9375rem; font-family:inherit; background:transparent; color:var(--tinta)}
.hero-buscador input::placeholder{color:var(--gris-claro)}
.hero-atajos{display:flex; justify-content:center; gap:36px; margin-top:34px; flex-wrap:wrap}
.hero-atajo{display:flex; flex-direction:column; align-items:center; gap:7px; color:rgba(255,255,255,.92); font-size:.8125rem; font-weight:500; cursor:pointer; transition:color .15s}
.hero-atajo:hover{color:#fff}
.hero-atajo svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* ---------- SECCIONES ---------- */
.seccion{padding:56px 0}
.seccion-alt{background:var(--fondo-alt)}
.seccion-cabecera{text-align:center; margin-bottom:36px}
.seccion-cabecera.izq{text-align:left}
.seccion-cabecera h2{font-size:clamp(1.5rem,3vw,2.05rem); font-weight:700; margin:0 0 9px; letter-spacing:-.02em}
.seccion-cabecera p{color:var(--gris); margin:0; font-size:.9375rem}
.titulo-fila{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.titulo-fila h2{font-size:1.5rem; font-weight:700; margin:0; letter-spacing:-.02em}

/* ---------- BUSCADOR DE SECCIÓN ---------- */
.buscador-linea{max-width:560px; margin:0 auto 34px; position:relative}
.buscador-linea input{width:100%; border:1px solid var(--linea); border-radius:10px; padding:12px 16px 12px 42px; font-size:.9375rem; font-family:inherit; outline:none; background:#fff; transition:border-color .15s}
.buscador-linea input:focus{border-color:var(--naranja)}
.buscador-linea svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; stroke:var(--gris-claro); fill:none; stroke-width:2}

/* ---------- TARJETAS FOTO (ciudades / categorías populares) ---------- */
.rejilla-foto{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px}
.rejilla-foto.compacta{grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:14px}
.card-foto{position:relative; border-radius:var(--radio); overflow:hidden; aspect-ratio:16/10; cursor:pointer; background:var(--oscuro); box-shadow:var(--sombra)}
.card-foto.alta{aspect-ratio:4/3}
.card-foto img{width:100%; height:100%; object-fit:cover; transition:transform .45s ease}
.card-foto:hover img{transform:scale(1.06)}
.card-foto::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 38%,rgba(12,13,16,.82) 100%)}
.card-foto-txt{position:absolute; left:16px; bottom:14px; z-index:2; color:#fff}
.card-foto-txt strong{display:block; font-size:1.0625rem; font-weight:600; letter-spacing:-.01em}
.card-foto-txt span{font-size:.75rem; color:rgba(255,255,255,.82)}
.rejilla-foto.compacta .card-foto-txt strong{font-size:.9375rem}

/* ---------- TARJETAS ICONO (categorías) ---------- */
.rejilla-iconos{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px}
.card-icono{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:24px 18px; text-align:center; cursor:pointer;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.card-icono:hover{border-color:var(--naranja); box-shadow:var(--sombra); transform:translateY(-2px)}
.card-icono svg{width:34px; height:34px; color:var(--naranja); margin:0 auto 12px; display:block; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.card-icono strong{display:block; font-size:.9375rem; font-weight:600; margin-bottom:3px}
.card-icono span{font-size:.75rem; color:var(--gris); line-height:1.35; display:block}

/* ---------- BANNER ---------- */
.banner{position:relative; border-radius:var(--radio); overflow:hidden; min-height:150px; display:flex; align-items:center; background:var(--oscuro)}
.banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42}
.banner-txt{position:relative; z-index:2; padding:28px 32px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; flex-wrap:wrap}
.banner-txt h3{font-size:1.375rem; font-weight:700; margin:0 0 5px; letter-spacing:-.01em}
.banner-txt p{margin:0; font-size:.875rem; color:rgba(255,255,255,.85)}
.banner-naranja{background:var(--naranja); border-radius:var(--radio); padding:26px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; color:#fff; flex-wrap:wrap}
.banner-naranja h3{font-size:1.1875rem; font-weight:700; margin:0 0 4px}
.banner-naranja p{margin:0; font-size:.875rem; color:rgba(255,255,255,.9)}

/* ---------- TIRA DE PASOS ---------- */
.pasos{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:26px; background:var(--naranja-suave); border-radius:var(--radio); padding:24px 30px}
.paso{display:flex; align-items:flex-start; gap:12px}
.paso svg{width:22px; height:22px; flex:none; margin-top:2px; color:var(--naranja); stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.paso strong{display:block; font-size:.9375rem; font-weight:600}
.paso span{font-size:.8125rem; color:var(--gris)}

/* ---------- LISTADO + FILTROS ---------- */
.layout-listado{display:grid; grid-template-columns:255px 1fr; gap:30px; align-items:start}
/* SIN barra propia. Se probó darle techo y desplazamiento interno para que
   `sticky` no dejara su parte de abajo fuera de alcance, y el remedio fue peor:
   dos barras que mover en vez de una. La salida correcta era ACHICAR el panel
   —tres municipios y tres rubros en vez de ocho y seis—, no darle su propio
   scroll. */
.filtros{background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:20px; position:sticky; top:calc(var(--header-h) + 20px)}
.filtros h3{font-size:.9375rem; font-weight:700; margin:0 0 16px}
.filtro-grupo{margin-bottom:16px}
.filtro-grupo label{display:block; font-size:.75rem; font-weight:600; color:var(--gris); margin-bottom:6px; text-transform:none}
.filtro-grupo select,.filtro-grupo input{width:100%; border:1px solid var(--linea); border-radius:8px; padding:9px 11px; font-size:.8125rem; font-family:inherit; outline:none; background:#fff}
.filtro-grupo select:focus,.filtro-grupo input:focus{border-color:var(--naranja)}
/* Gana sobre `.filtro-grupo label{display:block}`, que apilaba la casilla
   encima de su texto en vez de dejarla al lado. */
.filtro-grupo label.filtro-check{display:flex; align-items:center; gap:8px; font-size:.8125rem; font-weight:400; color:var(--tinta); margin-bottom:8px; cursor:pointer}
.filtro-grupo label.filtro-check input{width:auto; margin:0; accent-color:var(--naranja)}

.listado-barra{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap}
.listado-barra .cuenta{font-size:.8125rem; color:var(--gris)}
.listado-barra select{border:1px solid var(--linea); border-radius:8px; padding:8px 11px; font-size:.8125rem; font-family:inherit; background:#fff; outline:none}

.item{display:flex; gap:16px; background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:14px; cursor:pointer; transition:border-color .18s, box-shadow .18s; margin-bottom:12px}
.item:hover{border-color:var(--naranja); box-shadow:var(--sombra)}
.item-foto{width:104px; height:82px; border-radius:var(--radio-sm); flex:none; object-fit:cover; background:var(--naranja-suave); display:flex; align-items:center; justify-content:center}
.item-foto svg{width:34px; height:34px; color:var(--naranja); stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.item-cuerpo{flex:1; min-width:0}
.item-cuerpo h3{font-size:.9375rem; font-weight:600; margin:0 0 2px}
.item-cuerpo .cat{font-size:.75rem; color:var(--gris); margin-bottom:5px}
.item-meta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:.75rem; color:var(--gris)}
.item-lado{display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; flex:none}
.chip{display:inline-flex; align-items:center; gap:4px; font-size:.6875rem; font-weight:600; padding:3px 9px; border-radius:999px}
.chip-ok{background:#E7F6EC; color:#136B34}
.chip-nar{background:var(--naranja-suave); color:var(--naranja-osc)}
.chip-gris{background:#F1F2F4; color:var(--gris)}
/* Punto medio: el lugar existe y está bien ubicado en su pueblo, pero el pin no cae
   exacto. Ni verde ni gris: decirlo es lo honesto. */
.chip-medio{background:#FFF4E0; color:#8A5200}
.estrella{color:var(--naranja); font-weight:600}

/* ---------- FICHA ---------- */
.migas{font-size:.75rem; color:var(--gris); padding:16px 0; display:flex; gap:7px; flex-wrap:wrap}
.migas a:hover{color:var(--naranja)}
.galeria{display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:9px; height:330px; margin-bottom:26px}
.galeria > *{border-radius:var(--radio-sm); overflow:hidden; background:var(--naranja-suave); display:flex; align-items:center; justify-content:center}
.galeria > *:first-child{grid-row:span 2}
.galeria svg{width:52px; height:52px; color:var(--naranja); opacity:.55; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.galeria img{width:100%; height:100%; object-fit:cover}

.ficha-cabecera{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px}
.ficha-cabecera h1{font-size:1.875rem; font-weight:700; margin:0 0 4px; letter-spacing:-.02em}
.ficha-cabecera .sub{font-size:.875rem; color:var(--gris); margin-bottom:9px}
.ficha-acciones{display:flex; gap:9px; flex-wrap:wrap}
.ficha-datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0; border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; margin-bottom:26px}
.dato{padding:15px 18px; border-left:3px solid var(--naranja); background:#fff}
.dato + .dato{border-top:1px solid var(--linea)}
@media(min-width:720px){ .dato + .dato{border-top:none; border-left:3px solid var(--naranja)} }
.dato strong{display:block; font-size:.8125rem; font-weight:600; margin-bottom:1px}
.dato span{font-size:.75rem; color:var(--gris)}

.tabs{display:flex; gap:26px; border-bottom:1px solid var(--linea); margin-bottom:24px; overflow-x:auto}
.tabs button{background:none; border:none; padding:11px 0; font-size:.875rem; font-weight:600; color:var(--gris); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap}
.tabs button.activo{color:var(--naranja); border-bottom-color:var(--naranja)}
.ficha-cuerpo{display:grid; grid-template-columns:1fr 340px; gap:34px; align-items:start}
.ficha-cuerpo h3{font-size:1rem; font-weight:700; margin:0 0 9px}
.ficha-cuerpo p{color:var(--gris); font-size:.875rem; margin:0 0 22px; line-height:1.65}
.servicios{display:flex; gap:8px; flex-wrap:wrap}
.mapa-caja{border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; height:250px; background:#F1F2F4; display:flex; align-items:center; justify-content:center; position:relative}
.mapa-pin{width:34px; height:34px; color:var(--naranja); stroke:currentColor; fill:none; stroke-width:1.6}

/* ---------- EXPERIENCIAS ---------- */
.pills{display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-bottom:30px}
.pill{border:1px solid var(--linea); background:#fff; border-radius:999px; padding:8px 18px; font-size:.8125rem; font-weight:500; cursor:pointer; transition:all .15s}
.pill:hover{border-color:var(--naranja)}
.pill.activo{background:var(--naranja); color:#fff; border-color:var(--naranja)}
.card-exp{border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; background:#fff; cursor:pointer; transition:box-shadow .18s, transform .18s}
.card-exp:hover{box-shadow:var(--sombra); transform:translateY(-2px)}
.card-exp .foto{aspect-ratio:4/3; overflow:hidden; background:var(--naranja-suave)}
.card-exp .foto img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
.card-exp:hover .foto img{transform:scale(1.05)}
.card-exp .cuerpo{padding:14px}
.card-exp h3{font-size:.9375rem; font-weight:600; margin:0 0 2px}
.card-exp .tipo{font-size:.75rem; color:var(--gris); margin-bottom:7px}
.card-exp .pie{display:flex; align-items:center; justify-content:space-between; font-size:.8125rem}

/* ---------- PAGINADOR ---------- */
.paginador{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:30px; flex-wrap:wrap}
.paginador span{font-size:.8125rem; color:var(--gris); padding:0 10px}

/* ---------- VACÍO / CARGA ---------- */
.vacio{text-align:center; padding:56px 20px; color:var(--gris)}
.vacio strong{display:block; font-size:1.0625rem; color:var(--tinta); margin-bottom:5px}
.esqueleto{background:linear-gradient(90deg,#F1F2F4 25%,#E7E8EA 50%,#F1F2F4 75%); background-size:200% 100%; animation:brillo 1.3s infinite; border-radius:var(--radio)}
@keyframes brillo{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--linea); padding:44px 0 26px; margin-top:56px; background:#fff}
.footer-grid{display:grid; grid-template-columns:1.6fr repeat(3,1fr) 1.5fr; gap:34px}
.footer .logo{color:var(--naranja); margin-bottom:11px}
.footer-intro{font-size:.8125rem; color:var(--gris); line-height:1.6; max-width:250px}
.footer h4{font-size:.8125rem; font-weight:700; margin:0 0 12px}
.footer ul{list-style:none; padding:0; margin:0}
.footer li{margin-bottom:8px}
.footer li a{font-size:.8125rem; color:var(--gris)}
.footer li a:hover{color:var(--naranja)}
.news{display:flex; gap:8px; margin-top:11px}
.news input{flex:1; border:1px solid var(--linea); border-radius:8px; padding:9px 12px; font-size:.8125rem; font-family:inherit; outline:none; min-width:0}
.news input:focus{border-color:var(--naranja)}
.footer-pie{display:flex; justify-content:space-between; gap:16px; margin-top:34px; padding-top:20px; border-top:1px solid var(--linea); font-size:.75rem; color:var(--gris-claro); flex-wrap:wrap}

/* ---------- RESPONSIVE ---------- */
@media(max-width:960px){
  .layout-listado{grid-template-columns:1fr}
  .filtros{position:static}
  .ficha-cuerpo{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr; gap:26px}
}
@media(max-width:760px){
  .nav{display:none}
  .menu-btn{display:block; margin-left:auto}
  .header-acciones .btn-blanco{display:none}
  .galeria{grid-template-columns:1fr 1fr; height:250px}
  .galeria > *:first-child{grid-column:span 2; grid-row:span 1}
  .hero-atajos{gap:22px}
  .footer-grid{grid-template-columns:1fr}
}

/* Ciudad sin foto: degradado de marca en vez de una imagen equivocada */
.card-foto.sin-foto{background:linear-gradient(135deg,var(--naranja) 0%,#B8410A 100%)}
.card-foto.sin-foto::after{background:linear-gradient(180deg,transparent 45%,rgba(12,13,16,.55) 100%)}

/* ---------- ENLACE "VER MÁS" ---------- */
.ver-mas{color:var(--naranja); font-size:.875rem; font-weight:600; white-space:nowrap}
.ver-mas:hover{text-decoration:underline}

/* ---------- 5 CATEGORÍAS DESTACADAS (con foto) ----------
   La primera manda: ocupa dos columnas y dos filas, el resto la rodea.
   En móvil se apila todo por igual. */
.rejilla-destacadas{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:14px}
.rejilla-destacadas .card-foto{aspect-ratio:auto; height:100%}
.rejilla-destacadas .card-foto:first-child{grid-column:span 2; grid-row:span 2}
.rejilla-destacadas .card-foto:first-child .card-foto-txt strong{font-size:1.375rem}
@media(max-width:860px){
  .rejilla-destacadas{grid-template-columns:repeat(2,1fr); grid-auto-rows:140px}
  .rejilla-destacadas .card-foto:first-child{grid-column:span 2; grid-row:span 1}
}

/* ---------- DESTINOS IMPERDIBLES ---------- */
.rejilla-destinos{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px}
.card-destino{background:#fff; border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; transition:box-shadow .18s, transform .18s}
.card-destino:hover{box-shadow:var(--sombra); transform:translateY(-2px)}
.destino-foto{aspect-ratio:16/10; overflow:hidden; background:var(--naranja-suave)}
.destino-foto img{width:100%; height:100%; object-fit:cover; transition:transform .45s}
.card-destino:hover .destino-foto img{transform:scale(1.05)}
.destino-txt{padding:14px 16px 17px}
.destino-txt strong{display:block; font-size:.9375rem; font-weight:600; margin-bottom:5px}
.destino-txt p{margin:0; font-size:.8125rem; color:var(--gris); line-height:1.5}

/* ---------- NÚMEROS DE EMERGENCIA ---------- */
.emergencias-seccion{background:#FFF7F3; border-top:1px solid #F6DCCB}
.rejilla-emergencias{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px}
.card-emergencia{
  display:block; background:#fff; border:1px solid #F3D5C2; border-left:4px solid var(--naranja);
  border-radius:var(--radio-sm); padding:15px 17px; transition:box-shadow .18s, transform .18s;
}
.card-emergencia:hover{box-shadow:var(--sombra); transform:translateY(-2px)}
.emg-num{display:block; font-size:1.5rem; font-weight:700; color:var(--naranja); letter-spacing:-.02em; line-height:1.15}
.emg-nom{display:block; font-size:.875rem; font-weight:600; margin-top:3px}
.emg-nota{display:block; font-size:.75rem; color:var(--gris); margin-top:1px}

/* ---------- LOGO ----------
   El wordmark oficial es oscuro. Sobre el header naranja se pasa a blanco
   puro con filtro (brightness(0) invert(1)); en el footer va tal cual. */
.logo img{height:30px; width:auto; display:block}
.header .logo img{filter:brightness(0) invert(1)}
.footer .logo img{height:34px}
.logo-tagline{font-size:.75rem; color:rgba(255,255,255,.85); font-weight:500; letter-spacing:.01em; margin-left:2px; white-space:nowrap}
@media(max-width:900px){ .logo-tagline{display:none} }

/* ---------- LOGO + ESLOGAN APILADOS ---------- */
.logo-bloque{display:flex; flex-direction:column; align-items:flex-start; gap:1px; flex:none}
.logo-tagline{font-size:.625rem; color:rgba(255,255,255,.8); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; margin-left:2px; line-height:1}
@media(max-width:900px){ .logo-tagline{display:none} }


/* Categoría sin foto propia: degradado de marca + su ícono, en vez de
   pedir prestada la foto de un negocio concreto. */
.card-foto .sin-foto-icono{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1}
.card-foto .sin-foto-icono svg{width:56px; height:56px; color:#fff; opacity:.9; stroke:currentColor; fill:none; stroke-width:1.5}

/* ---------- EMERGENCIAS (compacta) ----------
   Antes ocupaba media pantalla; ahora es una tira de fichas chicas. */
.emergencias-seccion{padding:30px 0}
.emergencias-seccion .seccion-cabecera{margin-bottom:16px}
.emergencias-seccion .seccion-cabecera h2{font-size:1.125rem; margin-bottom:2px}
.emergencias-seccion .seccion-cabecera p{font-size:.8125rem}
.rejilla-emergencias{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:9px}
.card-emergencia{padding:9px 12px; border-left-width:3px; border-radius:8px}
.card-emergencia:hover{transform:none; box-shadow:var(--sombra)}
.emg-num{font-size:1.0625rem; line-height:1.2}
.emg-nom{font-size:.75rem; font-weight:600; margin-top:0}
.emg-nota{display:none}

/* ==========================================================================
   SELECTOR DE PAÍS
   ========================================================================== */
.pais-selector{position:relative}
.btn-pais{display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.16);
  border:1.5px solid rgba(255,255,255,.45); color:#fff; border-radius:999px;
  padding:6px 12px 6px 10px; font-size:.8125rem; font-weight:600; cursor:pointer; white-space:nowrap}
.btn-pais:hover{background:rgba(255,255,255,.26)}
.btn-pais svg{width:14px; height:14px; opacity:.9}
.pais-bandera{font-size:1.0625rem; line-height:1}
.pais-menu{display:none; position:absolute; right:0; top:calc(100% + 9px); z-index:200;
  background:#fff; border:1px solid var(--linea); border-radius:12px; box-shadow:var(--sombra-alta);
  min-width:212px; padding:6px; overflow:hidden}
.pais-menu.abierto{display:block}
.pais-item{display:flex; align-items:center; gap:9px; width:100%; background:none; border:none;
  padding:9px 11px; border-radius:8px; font-size:.875rem; font-family:inherit; color:var(--tinta);
  cursor:pointer; text-align:left}
.pais-item:hover:not(:disabled){background:var(--naranja-suave)}
.pais-item.proximamente{color:var(--gris-claro); cursor:not-allowed}
.pais-check{margin-left:auto; color:var(--naranja); font-weight:700}
.pais-pronto{margin-left:auto; font-size:.6875rem; background:#F1F2F4; color:var(--gris);
  padding:2px 7px; border-radius:999px; font-weight:600}

/* ==========================================================================
   MÓVIL — barra inferior, hoja de búsqueda y reordenado de la home
   ========================================================================== */
.barra-movil{display:none}
.hoja-buscar{display:none}

@media(max-width:760px){
  /* --- Barra de navegación inferior --- */
  .barra-movil{
    display:grid; grid-template-columns:repeat(5,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:150;
    background:#fff; border-top:1px solid var(--linea);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 14px rgba(16,17,20,.07);
  }
  /* Con cinco columnas "Planificador" ya no cabe en una línea en pantallas
     angostas: el texto se recorta con puntos suspensivos en vez de empujar la
     rejilla y descuadrar los otros cuatro. */
  .barra-movil a,.barra-movil button{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; padding:5px 2px; cursor:pointer;
    color:var(--gris); font-size:.625rem; font-weight:600; font-family:inherit;
    min-width:0;
  }
  .barra-movil span{
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  @media(max-width:340px){ .barra-movil{font-size:.5625rem} }
  .barra-movil svg{width:21px; height:21px}
  .barra-movil a.activo{color:var(--naranja)}
  /* Que la barra no tape el final de la página ni el footer */
  body{padding-bottom:66px}

  /* --- Hoja de búsqueda --- */
  .hoja-buscar{display:none; position:fixed; inset:0; z-index:200; background:rgba(15,16,20,.5); align-items:flex-start}
  .hoja-buscar.abierta{display:flex}
  .hoja-buscar-caja{background:#fff; width:100%; padding:20px 18px 24px; border-radius:0 0 18px 18px; position:relative}
  .hoja-buscar-caja label{display:block; font-size:.9375rem; font-weight:700; margin-bottom:11px}
  .hoja-fila{display:flex; gap:8px}
  .hoja-fila input{flex:1; min-width:0; border:1px solid var(--linea); border-radius:9px;
    padding:11px 13px; font-size:1rem; font-family:inherit; outline:none}
  .hoja-fila input:focus{border-color:var(--naranja)}
  .hoja-cerrar{position:absolute; right:12px; top:10px; background:none; border:none;
    font-size:1.75rem; line-height:1; color:var(--gris-claro); cursor:pointer; padding:2px 8px}

  /* --- Header: sin nav, el país se queda --- */
  .menu-btn{display:none}
  .header-acciones .btn-blanco{display:none}
  .pais-nombre{display:none}
  .btn-pais{padding:6px 9px}

  /* --- Reordenar la home: "Impulsa tu negocio" entre ciudades y destinos --- */
  #vista{display:flex; flex-direction:column}
  #vista > .hero        {order:1}
  #vista > .s-pasos     {order:2}
  #vista > .s-categorias{order:3}
  #vista > .s-ciudades  {order:4}
  #vista > .s-impulsa   {order:5; padding-top:38px !important}
  #vista > .s-destinos  {order:6}
  #vista > .emergencias-seccion{order:7}

  /* --- Busca · Encuentra · Conecta: en columna, no apretado en 3 --- */
  .pasos{grid-template-columns:1fr; gap:14px; padding:18px 20px}
  .paso{align-items:center}
  .paso svg{width:20px; height:20px; margin-top:0}
  .paso strong{font-size:.875rem}
  .paso span{font-size:.75rem}

  /* --- Destinos: dos columnas compactas, igual que las ciudades --- */
  .rejilla-destinos{grid-template-columns:1fr 1fr; gap:12px}
  .destino-txt{padding:11px 12px 14px}
  .destino-txt strong{font-size:.8125rem}
  .destino-txt p{font-size:.75rem; line-height:1.4}

  /* --- Ciudades: dos por fila --- */
  .rejilla-foto{grid-template-columns:1fr 1fr; gap:12px}
  .card-foto-txt{left:11px; bottom:10px}
  .card-foto-txt strong{font-size:.875rem}
  .card-foto-txt span{font-size:.6875rem}

  /* --- Banner "Impulsa tu negocio" centrado --- */
  .banner{min-height:0}
  .banner-txt{flex-direction:column; text-align:center; padding:24px 20px; gap:14px}
  .banner-txt h3{font-size:1.125rem}
  .hero{min-height:0}
  .hero-contenido{padding:44px 20px}
  .hero-atajos{gap:18px 22px; margin-top:26px}
  .seccion{padding:36px 0}
}

@media(max-width:420px){
  .rejilla-destinos{grid-template-columns:1fr}
  .barra-movil a,.barra-movil button{font-size:.5625rem}
}

/* ---------- FORMULARIO DE ALTA ---------- */
.form-alta{background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:26px}
.form-alta .campo{margin-bottom:16px}
.form-alta label{display:block; font-size:.8125rem; font-weight:600; margin-bottom:6px}
.form-alta input,.form-alta select,.form-alta textarea{
  width:100%; border:1px solid var(--linea); border-radius:9px; padding:11px 13px;
  font-size:.9375rem; font-family:inherit; outline:none; background:#fff; color:var(--tinta);
  transition:border-color .15s}
.form-alta input:focus,.form-alta select:focus,.form-alta textarea:focus{border-color:var(--naranja)}
.form-alta textarea{resize:vertical; min-height:92px}
.form-fila{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-nota{font-size:.8125rem; color:var(--gris); margin:12px 0 0; text-align:center}
.form-nota.error{color:var(--naranja-osc); font-weight:600}
.alta-ok{text-align:center; padding:18px 8px}
.alta-ok-icono{width:54px; height:54px; margin:0 auto 16px; border-radius:50%;
  background:#E7F6EC; color:#136B34; display:flex; align-items:center; justify-content:center;
  font-size:1.75rem; font-weight:700}
.alta-ok h3{font-size:1.25rem; margin:0 0 8px}
.alta-ok p{color:var(--gris); font-size:.875rem; margin:0 0 20px; line-height:1.6}
@media(max-width:600px){ .form-fila{grid-template-columns:1fr; gap:0} .form-alta{padding:20px} }

/* ---------- ESLOGAN CENTRADO BAJO EL LOGO ---------- */
.logo-bloque{align-items:center}
.logo-tagline{margin-left:0; text-align:center}

/* ---------- LUPA DEL HEADER ----------
   La hoja de búsqueda ya existía para móvil; el ícono la abre también en
   escritorio, así el buscador está a mano fuera del inicio. */
.btn-lupa{display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.45);
  color:#fff; cursor:pointer; padding:0}
.btn-lupa:hover{background:rgba(255,255,255,.28)}
.btn-lupa svg{width:17px; height:17px}

/* La hoja de búsqueda vale en cualquier tamaño, no solo en móvil */
.hoja-buscar{display:none; position:fixed; inset:0; z-index:200;
  background:rgba(15,16,20,.5); align-items:flex-start}
.hoja-buscar.abierta{display:flex}
.hoja-buscar-caja{background:#fff; width:100%; max-width:620px; margin:0 auto;
  padding:26px 24px 30px; border-radius:0 0 18px 18px; position:relative}
.hoja-buscar-caja label{display:block; font-size:1rem; font-weight:700; margin-bottom:12px}
.hoja-fila{display:flex; gap:9px}
.hoja-fila input{flex:1; min-width:0; border:1px solid var(--linea); border-radius:9px;
  padding:12px 14px; font-size:1rem; font-family:inherit; outline:none}
.hoja-fila input:focus{border-color:var(--naranja)}
.hoja-cerrar{position:absolute; right:14px; top:12px; background:none; border:none;
  font-size:1.75rem; line-height:1; color:var(--gris-claro); cursor:pointer; padding:2px 8px}

@media(max-width:760px){
  /* En móvil la lupa vive en la barra inferior, no en el header */
  .btn-lupa{display:none}
  .hoja-buscar-caja{max-width:none; padding:20px 18px 24px}
}

/* ==========================================================================
   BUSCADOR — panel centrado y suave (antes bajaba como cortina opaca)
   ========================================================================== */
.hoja-buscar{
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(20,21,26,.34); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  align-items:center; justify-content:center; padding:24px;
}
.hoja-buscar.abierta{display:flex; animation:velo .18s ease}
.hoja-buscar-caja{
  background:rgba(255,255,255,.97); width:100%; max-width:540px; margin:0;
  padding:26px 26px 28px; border-radius:16px; position:relative;
  box-shadow:0 20px 60px rgba(16,17,20,.22); animation:panel .2s cubic-bezier(.2,.9,.3,1);
}
@keyframes velo{from{opacity:0}to{opacity:1}}
@keyframes panel{from{opacity:0; transform:translateY(-10px) scale(.98)}to{opacity:1; transform:none}}
.hoja-buscar-caja label{display:block; font-size:1rem; font-weight:700; margin-bottom:12px}
.hoja-cerrar{position:absolute; right:12px; top:9px; background:none; border:none;
  font-size:1.625rem; line-height:1; color:var(--gris-claro); cursor:pointer; padding:2px 8px; border-radius:8px}
.hoja-cerrar:hover{background:#F1F2F4; color:var(--tinta)}

/* ==========================================================================
   CIUDADES — franja bajo el texto para que se lea sobre cualquier foto
   ========================================================================== */
.card-foto-txt{
  left:0; right:0; bottom:0; padding:26px 16px 13px;
  background:linear-gradient(180deg, transparent 0%, rgba(12,13,16,.55) 45%, rgba(12,13,16,.8) 100%);
  transition:background .22s ease;
}
.card-foto:hover .card-foto-txt{
  background:linear-gradient(180deg, transparent 0%, rgba(216,84,14,.72) 40%, rgba(200,72,10,.92) 100%);
}
.card-foto:hover .card-foto-txt span{color:rgba(255,255,255,.95)}

/* ==========================================================================
   FORMULARIO — casillas de ciudad y días
   ========================================================================== */
.campo-ayuda{font-size:.75rem; color:var(--gris); margin:0 0 9px}
.rejilla-check{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:7px;
  border:1px solid var(--linea); border-radius:10px; padding:12px; background:#fff;
}
.rejilla-check.con-error{border-color:var(--naranja); background:var(--naranja-suave)}
.check{display:flex; align-items:center; gap:8px; font-size:.8125rem; font-weight:400; cursor:pointer; margin:0}
.check input{width:auto !important; margin:0; accent-color:var(--naranja); flex:none}
.rejilla-dias{display:flex; flex-wrap:wrap; gap:7px}
.check.dia{
  border:1px solid var(--linea); border-radius:999px; padding:7px 13px;
  font-size:.8125rem; font-weight:500; background:#fff; transition:all .15s;
}
.check.dia:has(input:checked){background:var(--naranja-suave); border-color:var(--naranja); color:var(--naranja-osc); font-weight:600}

/* ==========================================================================
   SUBIDA DE IMÁGENES EN EL FORMULARIO
   ========================================================================== */
/* El recuadro del logo va chico: es un indicador, no protagonista. */
.subir-logo{display:flex; align-items:center; gap:14px;
  border:1px solid var(--linea); border-radius:10px; padding:12px 14px; background:#fff}
.logo-preview{width:52px; height:52px; flex:none; border-radius:10px;
  background:var(--naranja-suave); display:flex; align-items:center; justify-content:center; overflow:hidden}
.logo-preview svg{width:22px; height:22px; color:var(--naranja); opacity:.65}
.logo-preview img{width:100%; height:100%; object-fit:contain}
.subir-txt{display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0}
.subir-txt span{font-size:.75rem; color:var(--gris-claro)}
.subir-txt span.ok{color:#136B34; font-weight:600}
.subir-txt span.error{color:var(--naranja-osc); font-weight:600}

.rejilla-fotos{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:9px}
.rejilla-fotos:empty{display:none}
.foto-mini{position:relative; aspect-ratio:1; border-radius:9px; overflow:hidden; border:1px solid var(--linea)}
.foto-mini img{width:100%; height:100%; object-fit:cover}
.foto-quitar{position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:rgba(15,16,20,.72); color:#fff; border:none; cursor:pointer;
  font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center}
.foto-quitar:hover{background:var(--naranja)}

/* ==========================================================================
   LOGO DEL NEGOCIO en listado y ficha
   ========================================================================== */
.item-logo{width:100%; height:100%; object-fit:contain; padding:8px; background:#fff}
.ficha-titulo{display:flex; align-items:flex-start; gap:16px}
.ficha-logo{width:68px; height:68px; flex:none; border-radius:12px; object-fit:contain;
  background:#fff; border:1px solid var(--linea); padding:7px}

/* ==========================================================================
   HEADER — menú centrado, botón compacto, país solo bandera
   ========================================================================== */
.header .contenedor{gap:16px}
.nav{margin:0 auto}                        /* el menú queda centrado en la página */
.header-acciones{margin-left:0}
.btn-blanco{padding:8px 13px; font-size:.8125rem}
.btn-blanco .txt-largo{display:inline}
.pais-nombre{display:none}                  /* solo la banderita */
.btn-pais{padding:6px 10px 6px 11px; gap:5px}

@media(max-width:1100px){
  .btn-blanco .txt-largo{display:none}      /* se reduce a "+ Empresa" */
}
@media(max-width:760px){
  .nav{margin:0}
}

/* ---------- NEGOCIO EN REVISIÓN ----------
   El alta pública se ve en el directorio al instante, con este sello, para que
   el dueño encuentre su ficha apenas la envía. Al aprobarla el sello se cae. */
.chip-rev{background:#FFF4E0; color:#8A5200; border:1px solid #F0C98A}
.chip-rev::before{content:''; display:inline-block; width:.45em; height:.45em;
  border-radius:50%; background:#E08A00; margin-right:.15em}
.aviso-revision{background:#FFF7ED; border:1px solid #F6D9B8; border-left:4px solid #E08A00;
  border-radius:10px; padding:12px 16px; font-size:.8125rem; color:#7A4A00; margin-bottom:20px}

/* ---------- COMBO DE CATEGORÍA (buscable) ---------- */
.combo{position:relative}
.combo input[type="text"]{width:100%}
.combo-lista{display:none; position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:60;
  background:#fff; border:1px solid var(--linea); border-radius:10px; box-shadow:var(--sombra-alta);
  max-height:290px; overflow-y:auto; padding:5px}
.combo-lista.abierta{display:block}
.combo-item{display:flex; align-items:center; gap:10px; width:100%; background:none; border:none;
  padding:9px 11px; border-radius:8px; cursor:pointer; text-align:left; font-family:inherit;
  font-size:.875rem; color:var(--tinta)}
.combo-item:hover{background:var(--naranja-suave)}
.combo-item svg{width:20px; height:20px; flex:none; color:var(--naranja);
  stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.combo-item span{flex:1}
.combo-item small{font-size:.6875rem; color:var(--gris-claro)}
.combo-vacio{padding:14px; font-size:.8125rem; color:var(--gris); text-align:center}

/* ---------- SUCURSALES ---------- */
.sucursal{border:1px solid var(--linea); border-radius:10px; padding:14px; margin-bottom:10px; background:#fff}
.sucursal-cab{display:flex; align-items:center; gap:8px; font-size:.875rem; font-weight:600; margin-bottom:12px}
.sucursal-num{width:22px; height:22px; border-radius:50%; background:var(--naranja); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; flex:none}

/* ---------- HORARIO POR DÍA ---------- */
.horario-cab{display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:14px 0 10px; font-size:.8125rem; font-weight:600; flex-wrap:wrap}
.horario-fila{display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid var(--linea)}
.horario-fila:last-child{border-bottom:none}
.horario-dia{width:46px; font-size:.8125rem; font-weight:600; flex:none}
.horario-fila select{flex:1; min-width:0; border:1px solid var(--linea); border-radius:8px;
  padding:8px 10px; font-size:.8125rem; font-family:inherit; background:#fff}
.horario-sep{font-size:.75rem; color:var(--gris); flex:none}

/* ---------- SUCURSALES EN LA FICHA ---------- */
.sucursales-lista{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin-bottom:22px}
.sucursal-card{border:1px solid var(--linea); border-radius:10px; padding:13px}
.sucursal-card .sucursal-cab{margin-bottom:8px}
.sucursal-dato{font-size:.8125rem; color:var(--gris); margin-bottom:9px; line-height:1.45}
.sucursal-acciones{display:flex; gap:7px; flex-wrap:wrap}
.sucursal-acciones .chip{cursor:pointer}

/* ---------- ACCIONES AL TERMINAR EL ALTA ---------- */
.alta-ok-acciones{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

/* ---------- AVISO DE ENLACE COPIADO ---------- */
.aviso-copia{position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px);
  background:var(--tinta); color:#fff; padding:11px 18px; border-radius:999px;
  font-size:.8125rem; font-weight:500; z-index:300; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; max-width:90vw; text-align:center}
.aviso-copia.visible{opacity:1; transform:translate(-50%,0)}
@media(max-width:760px){ .aviso-copia{bottom:80px} }

/* ==========================================================================
   FICHA · slider, galería, semáforo, amenidades y menú
   ========================================================================== */

/* --- Slider de portada ---------------------------------------------------
   Una pista que se corre por transform: sin librería, sin reflow por foto.
   La relación 16:9 fija la altura para que no salte al cambiar de imagen. */
.slider{position:relative; border-radius:var(--radio-sm); overflow:hidden;
        background:var(--naranja-suave); width:100%; height:clamp(230px,34vw,430px); margin-bottom:26px}
/* Altura por clamp y no aspect-ratio: con aspect-ratio + max-height el navegador
   angosta el ANCHO para respetar la proporcion y el slider queda corto. */
.slider-pista{display:flex; height:100%; transition:transform .38s cubic-bezier(.4,0,.2,1)}
.slider-lam{flex:0 0 100%; height:100%}
.slider-lam img{width:100%; height:100%; object-fit:cover; display:block}
.slider-vacio{display:flex; align-items:center; justify-content:center}
.slider-vacio svg{width:64px; height:64px; color:var(--naranja); opacity:.5;
                  stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.slider-flecha{position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px;
               border-radius:50%; border:0; background:rgba(255,255,255,.9); color:#111;
               font-size:26px; line-height:1; cursor:pointer; display:grid; place-items:center;
               box-shadow:0 3px 12px rgba(0,0,0,.2); transition:background .15s}
.slider-flecha:hover{background:#fff}
.slider-flecha.izq{left:12px}
.slider-flecha.der{right:12px}
.slider-puntos{position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
               display:flex; gap:7px; padding:6px 10px; border-radius:20px; background:rgba(0,0,0,.35)}
.slider-puntos button{width:7px; height:7px; border-radius:50%; border:0; padding:0;
                      background:rgba(255,255,255,.55); cursor:pointer; transition:width .2s,background .2s}
.slider-puntos button.activo{width:20px; border-radius:4px; background:#fff}

/* --- Semáforo abierto/cerrado ------------------------------------------- */
.semaforo{display:inline-flex; align-items:center; gap:7px; font-size:.8125rem; font-weight:600;
          padding:5px 11px; border-radius:20px}
.semaforo i{width:8px; height:8px; border-radius:50%; flex:0 0 8px}
.semaforo.abierto{color:#15803d; background:#dcfce7}
.semaforo.abierto i{background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.semaforo.cerrado{color:#b91c1c; background:#fee2e2}
.semaforo.cerrado i{background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.22)}

/* --- Descripción + amenidades, antes de las pestañas -------------------- */
.ficha-intro{margin:22px 0 26px}
.amenidades{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:11px; margin-top:18px}
.amenidad{display:flex; align-items:center; gap:10px; padding:11px 13px;
          border:1px solid var(--linea); border-radius:var(--radio-sm); background:#fff; font-size:.875rem}
.amenidad svg{width:22px; height:22px; flex:0 0 22px; color:var(--naranja)}

/* --- Galería (pestaña) --------------------------------------------------- */
.galeria-mosaico{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:11px}
.gal-celda{border:0; padding:0; border-radius:var(--radio-sm); overflow:hidden; cursor:pointer;
           background:var(--naranja-suave); aspect-ratio:4/3; display:block}
.gal-celda img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s}
.gal-celda:hover img{transform:scale(1.05)}

/* --- Horario día por día ------------------------------------------------- */
.horario-tabla{border:1px solid var(--linea); border-radius:var(--radio-sm); overflow:hidden}
.horario-fila{display:flex; justify-content:space-between; gap:12px; padding:9px 14px; font-size:.875rem}
.horario-fila+.horario-fila{border-top:1px solid var(--linea)}
.horario-fila>span:last-child{font-weight:600}
.horario-fila.cerrado{color:var(--gris-claro)}
.horario-fila.cerrado>span:last-child{font-weight:400}

/* --- Menú en PDF ---------------------------------------------------------
   El <object> lo embebe donde el navegador puede; el botón de arriba está
   siempre porque en móvil casi nunca puede. */
.menu-cab{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.menu-cab h3{margin:0}
.menu-visor{border:1px solid var(--linea); border-radius:var(--radio-sm); overflow:hidden;
            height:min(78vh,900px); background:#f6f7f9}
.menu-visor object{width:100%; height:100%}
.menu-fallback{height:100%; display:flex; flex-direction:column; align-items:center;
               justify-content:center; gap:14px; text-align:center; padding:24px}

/* --- Formulario: amenidades y menú --------------------------------------- */
.rejilla-amenidades{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px}
.check-amenidad{cursor:pointer}
.check-amenidad input{position:absolute; opacity:0; pointer-events:none}
.check-amenidad-cara{display:flex; align-items:center; gap:10px; padding:12px 14px;
                     border:1.5px solid var(--linea); border-radius:var(--radio-sm);
                     font-size:.875rem; background:#fff; transition:border-color .15s,background .15s}
.check-amenidad-cara svg{width:22px; height:22px; flex:0 0 22px; color:var(--gris-claro); transition:color .15s}
.check-amenidad input:checked + .check-amenidad-cara{border-color:var(--naranja); background:var(--naranja-suave)}
.check-amenidad input:checked + .check-amenidad-cara svg{color:var(--naranja)}
.check-amenidad input:focus-visible + .check-amenidad-cara{outline:2px solid var(--naranja); outline-offset:2px}
.subir-menu{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
            padding:14px; border:1.5px dashed var(--linea); border-radius:var(--radio-sm)}
.subir-menu span{font-size:.8125rem; color:var(--gris)}

@media(max-width:760px){
  /* En el teléfono la portada se muestra ENTERA, no recortada.
     Estas piezas son artes publicitarios anchos —el de KM Motos trae texto en
     las dos puntas— y con `cover` en una pantalla angosta el recorte se comía
     justamente el mensaje: se leía "ZA EL 25" en lugar de "EMPIEZA EL 2025".
     Con la altura libre y `contain`, entra completa. El fondo suave rellena lo
     que sobra cuando la imagen no tiene la proporción del hueco. */
  /* Sin color propio: el hueco que deja la imagen al entrar entera se funde
     con la página en vez de dibujar dos franjas de otro tono. Lo que se ve es
     el arte del negocio, no el marco. */
  .slider{height:auto; aspect-ratio:16/9; max-height:70vh; background:var(--fondo)}
  .slider-lam img{object-fit:contain}
  .slider-lam{background:var(--fondo)}
  .slider-flecha{width:34px; height:34px; font-size:22px}
  .galeria-mosaico{grid-template-columns:1fr 1fr; gap:8px}
  .menu-visor{height:70vh}
  .menu-cab{flex-direction:column; align-items:flex-start}
}

/* ==========================================================================
   FICHA v2 — cabecera centrada, galería con visor, carta y datos en tarjetas
   ========================================================================== */

/* --- Cabecera ------------------------------------------------------------
   El logo se monta sobre el borde del slider (margin-top negativo) para que
   los dos se lean como una sola pieza. */
.ficha-cabecera{display:flex; flex-direction:column; align-items:center; text-align:center;
                gap:12px; margin:-64px 0 26px; position:relative; z-index:2}
.ficha-logo-caja{width:112px; height:112px; border-radius:26px; background:#fff;
                 box-shadow:0 10px 34px rgba(15,23,42,.16); display:grid; place-items:center;
                 overflow:hidden; border:1px solid var(--linea)}
.ficha-logo-caja img{width:100%; height:100%; object-fit:contain; padding:12px}
.ficha-nombre{font-size:clamp(1.9rem,4.6vw,3rem); line-height:1.12; letter-spacing:-.02em;
              margin:6px 0 0}
.sello-ok{width:30px; height:30px; border-radius:50%; background:#22c55e; color:#fff;
          display:inline-grid; place-items:center; vertical-align:middle; margin-left:10px}
.sello-ok svg{width:17px; height:17px}
.ficha-lema{color:var(--gris); font-size:1.0625rem; max-width:640px}
.ficha-sellos{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; align-items:center}
.ficha-sellos .chip{display:inline-flex; align-items:center; gap:5px}
.ficha-cabecera .ficha-acciones{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:6px}

/* Sin fotos el slider es un placeholder bajito: el logo no debe salirse */
.slider-vacio + .ficha-cabecera,
.aviso-revision + .ficha-cabecera{margin-top:-40px}

/* --- Galería: más grande y en dos filas ---------------------------------- */
.galeria-mosaico{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:14px}
.gal-celda{position:relative; aspect-ratio:3/2}
.gal-lupa{position:absolute; inset:0; display:grid; place-items:center; opacity:0;
          background:rgba(15,23,42,.34); transition:opacity .2s}
.gal-lupa svg{width:34px; height:34px; color:#fff}
.gal-celda:hover .gal-lupa,
.gal-celda:focus-visible .gal-lupa{opacity:1}

/* --- Visor a pantalla completa ------------------------------------------- */
.visor{position:fixed; inset:0; z-index:200; background:rgba(9,11,17,.94);
       display:flex; align-items:center; justify-content:center; padding:34px 62px;
       animation:visorEntra .18s ease-out}
@keyframes visorEntra{from{opacity:0}to{opacity:1}}
.visor img{max-width:100%; max-height:100%; object-fit:contain; border-radius:10px}
.visor-cerrar{position:absolute; top:16px; right:18px; width:42px; height:42px; border:0;
              border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:27px;
              line-height:1; cursor:pointer; display:grid; place-items:center}
.visor-cerrar:hover{background:rgba(255,255,255,.26)}
.visor-flecha{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px;
              border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff;
              font-size:31px; line-height:1; cursor:pointer; display:grid; place-items:center}
.visor-flecha:hover{background:rgba(255,255,255,.26)}
.visor-flecha.izq{left:14px}
.visor-flecha.der{right:14px}
.visor-pie{position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
           color:rgba(255,255,255,.75); font-size:.8125rem}
.visor-carta{padding:24px}
.visor-hoja{width:min(920px,100%); height:100%; background:#fff; border-radius:12px; overflow:hidden}
.visor-hoja object{width:100%; height:100%}

/* --- Carta (el menú, sin cara de PDF) ------------------------------------
   Portada a la izquierda con el nombre del local, hojas a la derecha. La barra
   del visor de PDF va apagada con #toolbar=0: es lo que delataba el archivo. */
.carta{display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:stretch}
.carta-cara{background:linear-gradient(160deg,#1c1f28,#2c313f); color:#fff; border-radius:var(--radio-sm);
            padding:30px 24px; display:flex; flex-direction:column; align-items:center;
            justify-content:center; text-align:center; gap:12px}
.carta-logo{width:74px; height:74px; border-radius:18px; background:#fff; object-fit:contain; padding:8px}
.carta-etiqueta{font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.55)}
.carta-cara h3{margin:0; font-size:1.375rem; color:#fff; line-height:1.2}
.carta-precio{font-size:.9375rem; color:#fbbf24; font-weight:700}
.carta-cara .btn{margin-top:6px}
.carta-alt{font-size:.75rem; color:rgba(255,255,255,.6)}
.carta-alt:hover{color:#fff}
.carta-hojas{border:1px solid var(--linea); border-radius:var(--radio-sm); overflow:hidden;
             background:#fff; height:min(74vh,780px)}
.carta-hojas object{width:100%; height:100%}
.carta-sin{height:100%; display:flex; flex-direction:column; align-items:center;
           justify-content:center; gap:14px; text-align:center; padding:24px; color:var(--gris)}

/* --- Información en tarjetas --------------------------------------------- */
.info-tarjetas{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin-bottom:26px}
.info-tarjeta{display:flex; align-items:center; gap:12px; padding:14px 16px; background:#fff;
              border:1px solid var(--linea); border-radius:var(--radio-sm); color:inherit;
              text-decoration:none; transition:border-color .15s, transform .15s, box-shadow .15s}
.info-tarjeta.accionable:hover{border-color:var(--naranja); transform:translateY(-2px);
                               box-shadow:0 6px 18px rgba(15,23,42,.07)}
.info-ico{width:38px; height:38px; flex:0 0 38px; border-radius:11px; background:var(--naranja-suave);
          color:var(--naranja); display:grid; place-items:center}
.info-ico svg{width:19px; height:19px}
.info-txt{min-width:0; display:flex; flex-direction:column; gap:2px}
.info-txt small{font-size:.6875rem; color:var(--gris-claro); text-transform:uppercase; letter-spacing:.06em}
.info-txt strong{font-size:.875rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.info-columnas{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
.info-bloque{background:#fff; border:1px solid var(--linea); border-radius:var(--radio-sm); padding:18px}
.info-bloque h3{margin:0 0 10px; font-size:1rem}
.info-bloque p{margin:0; color:var(--gris); font-size:.875rem; line-height:1.65}
.info-bloque-cab{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.info-bloque-cab h3{margin:0}
.horario-fila.hoy{background:var(--naranja-suave); font-weight:600; margin:0 -14px; padding-left:14px; padding-right:14px}

@media(max-width:860px){
  .carta{grid-template-columns:1fr}
  .carta-hojas{height:60vh}
  .info-columnas{grid-template-columns:1fr}
}
@media(max-width:640px){
  .ficha-cabecera{margin-top:-48px; gap:10px}
  /* El logo montado tapaba los puntos del carrusel: se corren a la izquierda */
  .slider-puntos{left:14px; transform:none}
  .ficha-logo-caja{width:88px; height:88px; border-radius:22px}
  .galeria-mosaico{grid-template-columns:1fr 1fr; gap:9px}
  .gal-celda{aspect-ratio:1}
  .visor{padding:16px}
  .visor-flecha{width:38px; height:38px; font-size:25px}
}

/* ==========================================================================
   FICHA — pasada de simplificación
   Menos color y menos peso: el naranja se reserva para lo accionable (botones,
   enlaces) y lo estructural pasa a negro. Una ficha con acentos naranjas en
   cada borde compite consigo misma.
   ========================================================================== */

/* --- Una sola línea: estado · qué es · dónde ----------------------------- */
.ficha-linea{display:flex; align-items:center; justify-content:center;
             flex-wrap:wrap; gap:14px; color:var(--gris)}
.ficha-que{font-size:1.0625rem; color:var(--tinta,#111827); font-weight:500}
.ficha-donde{font-size:.875rem; color:var(--gris)}
/* Separadores como puntos, no como cajas: menos ruido que un chip por dato */
.ficha-linea > * + *::before{content:'·'; margin-right:14px; color:var(--linea)}
.ficha-linea .semaforo{background:none; padding:0; font-size:.875rem}
.ficha-sellos .chip-sutil{background:#f3f4f6; color:var(--gris); font-weight:500;
                          display:inline-flex; align-items:center; gap:5px}
.ficha-sellos .chip-sutil svg{width:12px; height:12px}

/* --- Barra de datos: detalles negros -------------------------------------
   El borde naranja de cada celda peleaba con los botones. En negro la barra
   se lee como estructura y el naranja queda libre para lo que se toca. */
.ficha-datos .dato{border-left:3px solid #111827; background:#fff}
.ficha-datos .dato strong{color:#111827; letter-spacing:-.01em}
.ficha-datos .dato a{color:#111827; text-decoration:underline; text-underline-offset:3px;
                     text-decoration-color:var(--linea)}
.ficha-datos .dato a:hover{text-decoration-color:var(--naranja); color:var(--naranja)}

/* --- Amenidades chicas ---------------------------------------------------
   Son un detalle de apoyo, no un bloque: cuatro tarjetas grandes pesaban más
   que la descripción del negocio. */
.amenidades{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; justify-content:center}
.amenidad{gap:6px; padding:6px 11px; border-radius:20px; font-size:.75rem;
          color:var(--gris); background:#f8f9fb; border-color:transparent}
.amenidad svg{width:14px; height:14px; flex:0 0 14px; color:#111827}

/* --- Pestañas con más aire ----------------------------------------------- */
.tabs{gap:30px; margin-bottom:28px}
.tabs button{padding:13px 0; font-size:.9375rem; color:var(--gris-claro)}
.tabs button:hover{color:#111827}
.tabs button.activo{color:#111827; border-bottom-color:#111827}

/* --- Descripción con más respiro ----------------------------------------- */
.ficha-intro{margin:24px 0 28px; text-align:center}
/* El párrafo se centra como BLOQUE pero su texto queda alineado a la
   izquierda: un texto largo centrado línea por línea obliga a buscar dónde
   empieza cada renglón. Los chips de abajo sí van centrados. */

/* --- Sello de verificado más discreto ------------------------------------ */
.sello-ok{width:26px;height:26px;margin-left:8px}
.sello-ok svg{width:15px; height:15px}

/* --- Aviso de revisión: nota al margen, no alarma ------------------------ */
.aviso-revision{font-size:.8125rem}

@media(max-width:640px){
  /* En pantalla angosta la línea se parte y el punto separador quedaba
     huérfano al principio del renglón siguiente. Sin puntos: separa el gap. */
  .desc-texto{font-size:1rem; line-height:1.7}
  .ficha-linea{gap:6px 12px}
  .ficha-linea > * + *::before{content:none}
  .ficha-que{font-size:.9375rem}
  .ficha-donde{font-size:.8125rem}
  .tabs{gap:20px}
  .tabs button{font-size:.875rem}
}

/* Segundo turno del día (cierra al mediodía y vuelve a abrir) */
.horario-turno{border:1px dashed var(--linea); background:none; color:var(--gris);
               font:inherit; font-size:.75rem; padding:4px 9px; border-radius:7px;
               cursor:pointer; white-space:nowrap}
.horario-turno:hover{border-color:var(--naranja); color:var(--naranja)}
.horario-turno.quitar{border-style:solid; padding:4px 8px; font-size:.9375rem; line-height:1}
.horario-fila{flex-wrap:wrap}

/* --- Descripción con jerarquía -------------------------------------------
   Un solo párrafo gris no daba dónde entrar. La primera oración va grande y
   en negro; el resto de cuerpo. La comilla no es decoración vacía: marca
   dónde empieza la voz del negocio. */
.ficha-intro{margin:32px 0 28px}
.desc-titulo{font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
             color:var(--gris-claro); text-align:center; margin:0 0 14px}
.desc-texto{font-size:1rem; line-height:1.7; color:#374151; max-width:100%;
            margin:0 auto; text-align:center}

/* --- Botón de solo ícono (redes) ----------------------------------------- */
.btn-icono{padding-left:12px; padding-right:12px}
.btn-icono svg{width:18px; height:18px; display:block}

/* --- Ciudades con la dirección al pasar el mouse -------------------------
   Es <button> y no <span> a propósito: así el :focus lo abre con un toque en
   el celular y con el tabulador, donde no hay hover. */
.dato-ciudades{display:flex; flex-wrap:wrap; gap:4px 10px}
/* Una cadena lista sus sucursales agrupadas por ciudad; un negocio con dos
   locales no entra acá y sigue mostrando los pines sueltos. */
.dato-ciudad-grupo{margin-top:10px}
.dato-ciudad-grupo:first-child{margin-top:4px}
.dato-ciudad-tit{display:block; font-style:normal; font-size:.75rem; font-weight:600;
  letter-spacing:.02em; text-transform:uppercase; color:var(--gris); margin-bottom:3px}
/* Semáforo de cada sucursal en su tarjeta */
.suc-card-estado{margin:2px 0 6px}
/* Por qué salió este resultado, cuando no coincide por nombre */
.item-motivo{font-size:.75rem; color:var(--gris); font-style:italic; margin-top:2px}

/* Las tres maneras de coincidir: por nombre, por rubro, por dirección */
.pestanas-busqueda{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px}
.pestanas-busqueda:empty{margin:0}
.pest{border:1px solid var(--linea); background:var(--fondo); color:var(--gris);
  padding:7px 13px; border-radius:999px; cursor:pointer; font:inherit; font-size:.8125rem;
  display:inline-flex; align-items:center; gap:7px; transition:background .15s, color .15s, border-color .15s}
.pest:hover{border-color:var(--naranja); color:var(--tinta)}
.pest.activa{background:var(--naranja); border-color:var(--naranja); color:#fff; font-weight:600}
.pest-ayuda{flex-basis:100%; margin:2px 0 0; font-size:.8125rem; color:var(--gris)}

/* La dirección escrita, visible de una — sin depender de pasar el mouse */
.dato-direccion{display:block; line-height:1.45}
.dato-ciudad-suelta{display:block; color:var(--gris); font-size:.875rem}
/* Las sucursales de una cadena en la ficha gratuita */
.ficha-sucursales{margin:0 0 18px; padding:18px; border:1px solid var(--linea);
  border-radius:var(--radio); background:var(--fondo)}
/* Cuántas están abiertas de las que se están viendo */
.suc-abiertas{display:inline-flex; align-items:center; gap:6px; margin-left:10px;
  padding:4px 11px; border-radius:999px; font-size:.8125rem; font-weight:600;
  background:#E9F7EF; color:#1B7F4B}
.suc-abiertas::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor}
.suc-abiertas-cero{background:var(--fondo-alt); color:var(--gris); font-weight:500}
/* Con "todas", cada tarjeta dice de qué ciudad es */
.suc-card-tit small{display:block; font-weight:500; font-size:.75rem;
  color:var(--gris); margin-top:2px}

/* La dirección, pegada abajo de los botones de acción */
.ficha-direccion{display:flex; align-items:flex-start; justify-content:center; gap:7px;
  margin:14px 0 0; color:var(--gris); font-size:.9375rem; line-height:1.4; text-align:left}
.ficha-direccion svg{width:17px; height:17px; flex:0 0 auto; margin-top:1px; color:var(--naranja)}

/* El mapa dentro de la ficha, que se arma al tocar "Mapa".
   La barra de arriba NO es decoración: el iframe de Google se queda con la
   rueda del mouse, así que sin ese botón no hay cómo volver a la ficha. */
.ficha-mapa{margin:0 0 18px; border:1px solid var(--linea);
  border-radius:var(--radio); overflow:hidden; background:var(--fondo-alt)}
.ficha-mapa-barra{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 12px; background:var(--fondo); border-bottom:1px solid var(--linea)}
.ficha-mapa-barra span{font-size:.875rem; color:var(--gris); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; min-width:0}
.ficha-mapa-barra .btn{flex:0 0 auto}
.ficha-mapa-lienzo{height:320px}
.ficha-mapa-lienzo iframe{display:block; width:100%; height:100%}
.btn.activo{background:var(--naranja-suave); border-color:var(--naranja); color:var(--naranja-osc)}

/* Separa lo que se buscó de lo que se sugiere */
.lista-rotulo{font-size:.75rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--gris); margin:0 0 8px}
.lista-rotulo-sug{margin-top:22px; padding-top:16px; border-top:1px solid var(--linea)}
.pin-ciudad{position:relative; border:0; background:none; padding:0; cursor:help;
            font:inherit; font-size:.75rem; color:var(--gris);
            border-bottom:1px dotted var(--gris-claro)}
.pin-ciudad:hover, .pin-ciudad:focus-visible{color:#111827; border-bottom-color:#111827; outline:none}
.pin-ciudad::after{content:attr(data-dir); position:absolute; bottom:calc(100% + 9px); left:50%;
                   transform:translateX(-50%); background:#111827; color:#fff;
                   font-size:.75rem; line-height:1.4; padding:7px 11px; border-radius:8px;
                   white-space:normal; width:max-content; max-width:230px; text-align:center;
                   opacity:0; visibility:hidden; transition:opacity .14s; z-index:6;
                   box-shadow:0 6px 20px rgba(15,23,42,.22)}
.pin-ciudad::before{content:''; position:absolute; bottom:calc(100% + 4px); left:50%;
                    transform:translateX(-50%); border:5px solid transparent;
                    border-top-color:#111827; opacity:0; visibility:hidden; transition:opacity .14s}
.pin-ciudad:hover::after, .pin-ciudad:hover::before,
.pin-ciudad:focus::after,  .pin-ciudad:focus::before{opacity:1; visibility:visible}

/* Ubicación al final de la galería */
.galeria-mapa{margin-top:30px}
.galeria-mapa .menu-cab{margin-bottom:8px}
.galeria-mapa-dir{color:var(--gris); font-size:.875rem; margin:0 0 12px}

/* ==========================================================================
   FICHA DEL PLAN FREE
   La tarjeta de contacto: lo justo para que lo encuentren y lo llamen.
   Todo lo que la distingue de Premium —portada, galería, menú, mapa— no está
   acá a propósito; abajo va la invitación a mejorarla.
   ========================================================================== */
.ficha-free{display:flex; flex-direction:column; align-items:center; text-align:center;
            gap:12px; padding:38px 20px 26px}
.free-marca{width:96px; height:96px; border-radius:24px; background:var(--naranja-suave);
            display:grid; place-items:center; overflow:hidden; border:1px solid var(--linea)}
.free-marca img{width:100%; height:100%; object-fit:contain; padding:10px; background:#fff}
.free-marca svg{width:44px; height:44px; color:var(--naranja); opacity:.7;
                stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.ficha-free .ficha-acciones{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:6px}

/* Invitación a Premium */
.mejora{display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
        margin-top:30px; padding:24px 26px; border-radius:var(--radio);
        background:linear-gradient(135deg,#fff7ed,#fff); border:1px solid #fed7aa}
.mejora h3{margin:0 0 6px; font-size:1.125rem}
.mejora p{margin:0; color:var(--gris); font-size:.875rem; line-height:1.65; max-width:62ch}
.mejora .btn{flex:0 0 auto}

@media(max-width:640px){
  .ficha-free{padding:26px 12px 20px}
  .free-marca{width:78px; height:78px; border-radius:20px}
  .mejora{flex-direction:column; align-items:flex-start; text-align:left; padding:20px}
}

/* El semáforo dentro de la celda del horario: en línea, sin fondo */
.ficha-datos .dato .semaforo{background:none; padding:0; font-size:.75rem; margin-top:2px}

/* ---------- Aviso de país sin directorio ----------
   Un país nuevo entra sin negocios. No es un error ni una lista rota: se dice
   con todas las letras, arriba de todo, y se deja seguir navegando el turismo.
   Va en franja suave, no en rojo de alerta: no hay nada que arreglar. */
.aviso-pais{background:var(--naranja-suave); border-bottom:1px solid var(--linea); padding:18px 0}
.aviso-pais strong{display:block; font-size:.9375rem; color:var(--tinta)}
.aviso-pais p{margin:.35rem 0 0; font-size:.875rem; color:var(--gris); line-height:1.5}
.aviso-pais a{color:var(--naranja); font-weight:600}

/* ---------- Crédito de foto ----------
   Obligatorio en las fotos prestadas con licencia CC BY / CC BY-SA. Va discreto
   —es una nota legal, no contenido— pero legible y con enlace al original. */
.credito-foto{display:block; margin-top:8px; font-size:.6875rem; color:var(--gris-claro); line-height:1.3}
.credito-foto a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.credito-foto a:hover{color:var(--naranja)}
.hero-credito{position:absolute; right:12px; bottom:8px; z-index:2}
.hero-credito .credito-foto{margin:0; color:rgba(255,255,255,.72); text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* ---------- Sello de membresía ----------
   No compite con el sello verde de verificado: ese dice que los datos son
   ciertos, este dice qué membresía tiene. Van juntos pero se leen distinto. */
.sello-plan{display:inline-block; vertical-align:middle; margin-left:8px;
  font-size:.625rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 8px; border-radius:99px; white-space:nowrap}
.sello-plan.plan-free{background:#EEF0F3; color:var(--gris)}
.sello-plan.plan-premium{background:var(--naranja); color:#fff}
.sello-plan.plan-plus{background:var(--tinta); color:#fff}

/* ---------- Amenidades por grupo ----------
   Veinte casillas sueltas no se llenan; por grupo, el dueño va a lo suyo. */
.grupo-amenidades{margin-top:16px}
.grupo-amenidades-tit{font-size:.8125rem; font-weight:700; color:var(--tinta); margin-bottom:8px}
.grupo-amenidades-tit small{display:block; font-weight:500; font-size:.75rem;
  color:var(--gris); margin-top:2px}

/* ---------- Sucursales por ciudad ----------
   Con 33 locales, una lista plana no se lee. Primero la ciudad —con cuántos
   hay en cada una— y después los locales de esa ciudad. */
.suc-cab{display:flex; align-items:baseline; gap:10px; margin-bottom:14px}
.suc-cab h3{margin:0; font-size:1.125rem}
.suc-cab span{color:var(--gris); font-size:.875rem}
.suc-ciudades{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.suc-ciudad{display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--linea); background:#fff; color:var(--tinta);
  border-radius:99px; padding:8px 14px; font-size:.8125rem; font-weight:600;
  font-family:inherit}
.suc-ciudad small{background:var(--naranja-suave); color:var(--naranja);
  border-radius:99px; padding:1px 7px; font-size:.6875rem; font-weight:700}
.suc-ciudad:hover{border-color:var(--naranja)}
.suc-ciudad.activo{background:var(--naranja); color:#fff; border-color:var(--naranja)}
.suc-ciudad.activo small{background:rgba(255,255,255,.24); color:#fff}
.suc-lista{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px}
.suc-card{border:1px solid var(--linea); border-radius:12px; padding:14px}
.suc-card-tit{font-weight:700; font-size:.9375rem}
.suc-card-dir{color:var(--gris); font-size:.8125rem; margin:4px 0 10px; line-height:1.4}
/* El horario de la sucursal va pegado al semáforo, antes de la dirección: es
   la continuación de "Abierto", no un dato aparte. */
.suc-card-horario{color:var(--gris); font-size:.75rem; margin:2px 0 0; line-height:1.35}
.suc-card-acciones{display:flex; flex-wrap:wrap; gap:6px}
.suc-elegir{margin-bottom:18px}
.suc-elegir label{display:block; font-size:.8125rem; font-weight:600; margin-bottom:6px}
.suc-elegir select{width:100%; max-width:340px; border:1px solid var(--linea);
  border-radius:9px; padding:11px 13px; font-size:.9375rem; font-family:inherit; background:#fff}
.mejora-acciones{display:flex; flex-wrap:wrap; gap:8px}
.reclamo-linea{color:var(--gris); font-size:.875rem; padding-top:8px}
.enlace-boton{background:none; border:none; padding:0; font:inherit; cursor:pointer;
  color:var(--naranja); font-weight:600; text-decoration:underline; text-underline-offset:2px}

/* ---------- Descripción recortada en el teléfono ----------
   El texto completo siempre está en el HTML —se recorta con CSS, no con JS—
   para que el buscador lo lea entero aunque el visitante no lo despliegue. */
.desc-texto.recortable{display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
  overflow:hidden}
.desc-mas{background:none; border:none; padding:4px 0 0; font:inherit; cursor:pointer;
  color:var(--naranja); font-weight:600; font-size:.875rem}
@media(min-width:761px){
  /* En escritorio hay ancho de sobra: se muestra entera y el botón sobra. */
  .desc-texto.recortable{-webkit-line-clamp:unset; display:block}
  .desc-mas{display:none}
}
@media(max-width:760px){
  /* Las amenidades en el teléfono: pastillas chicas en dos columnas, no
     tarjetas anchas apiladas que estiran la página. */
  .amenidades{display:grid; grid-template-columns:1fr 1fr; gap:7px; justify-content:stretch}
  .amenidad{padding:8px 10px; font-size:.75rem; border-radius:10px}
  .amenidad svg{width:16px; height:16px; flex:none}
  .amenidad span{overflow:hidden; text-overflow:ellipsis}
}

/* Lugares de interés en un municipio sin comercio */
.lugares-titulo{font-size:1.0625rem;margin:0 0 14px}

/* ==========================================================================
   CADENAS — 3 sucursales o más
   La ficha deja de tener "una" dirección y "un" horario: cada local tiene los
   suyos, y van juntos en la misma tarjeta.
   ========================================================================== */
.btn-cuenta{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
            margin-left:6px;border-radius:10px;background:var(--naranja);color:#fff;
            font-size:.6875rem;font-weight:700}
.suc-buscar{width:100%;padding:11px 14px;border:1px solid var(--linea);border-radius:11px;
            font:inherit;font-size:.875rem;margin-bottom:16px}
.suc-buscar:focus{outline:none;border-color:var(--naranja)}
.suc-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.suc-card{border:1px solid var(--linea);border-radius:var(--radio-sm);padding:15px 16px;background:#fff}
.suc-card-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.suc-card-cab strong{font-size:.9375rem;line-height:1.3}
.suc-card-cab .semaforo{padding:3px 8px;font-size:.6875rem;flex:0 0 auto}
.suc-card-lugar,.suc-card-hora{display:flex;gap:8px;align-items:flex-start;
                               font-size:.8125rem;color:var(--gris);margin-bottom:7px;line-height:1.5}
.suc-card-lugar svg,.suc-card-hora svg{width:15px;height:15px;flex:0 0 15px;margin-top:2px;color:#111827}
.suc-card-pie{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.suc-vacio{color:var(--gris);font-size:.875rem;grid-column:1/-1}

/* Diálogo "¿a cuál sucursal?" */
.visor-suc{padding:22px}
.suc-hoja{position:relative;background:#fff;border-radius:18px;padding:26px 24px 20px;
          width:min(560px,100%);max-height:86vh;display:flex;flex-direction:column}
.suc-hoja h3{margin:0 0 4px;font-size:1.1875rem;padding-right:38px}
.suc-hoja .visor-cerrar{background:#f1f3f6;color:#111827;width:34px;height:34px;font-size:22px;top:14px;right:14px}
.suc-hoja .visor-cerrar:hover{background:#e2e6ec}
.suc-sub{margin:0 0 14px;font-size:.8125rem;color:var(--gris)}
.suc-hoja input{width:100%;padding:10px 13px;border:1px solid var(--linea);border-radius:10px;
                font:inherit;font-size:.875rem;margin-bottom:12px}
.suc-hoja input:focus{outline:none;border-color:var(--naranja)}
.suc-lista{overflow-y:auto;margin:0 -8px;padding:0 8px}
.suc-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;
          padding:12px 13px;border-radius:11px;text-decoration:none;color:inherit;
          border:1px solid transparent;transition:background .12s,border-color .12s}
.suc-fila:hover{background:var(--naranja-suave);border-color:#fed7aa}
.suc-fila+.suc-fila{border-top:1px solid var(--linea)}
.suc-fila:hover+.suc-fila{border-top-color:transparent}
.suc-fila-txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.suc-fila-txt strong{font-size:.875rem}
.suc-fila-txt>span{font-size:.75rem;color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suc-fila-txt .semaforo{padding:0;background:none;font-size:.6875rem;align-self:flex-start}
.suc-ir{flex:0 0 auto;font-size:.8125rem;font-weight:600;color:var(--naranja)}

@media(max-width:640px){
  .suc-rejilla{grid-template-columns:1fr}
  .suc-hoja{padding:22px 16px 14px;border-radius:16px}
}
.suc-bloque-free{margin:28px 0}
.suc-nota{font-size:.8125rem;color:var(--gris);margin:14px 0 0;text-align:center}

/* Atajos de municipio en el filtro: los que la gente busca por nombre, a un
   toque, sin pasar por el árbol de departamentos. */
.atajos-ciudad { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.chip-ciudad {
  border: 1px solid var(--borde, #dcdcdc); background: #fff; color: var(--gris, #555);
  border-radius: 999px; padding: 4px 10px; font-size: .8125rem; cursor: pointer;
  line-height: 1.4;
}
.chip-ciudad:hover { border-color: var(--primario, #0a7); color: var(--primario, #0a7); }
.chip-ciudad.activo { background: var(--primario, #0a7); border-color: var(--primario, #0a7); color: #fff; }

/* ==========================================================================
   AVISO DE NEGOCIO REPETIDO
   Aparece antes de enviar el alta, cuando el nombre+ciudad+rubro+teléfono ya
   existen, o cuando solo el teléfono ya está en otra ficha.
   ========================================================================== */
.visor-dup{padding:20px}
.dup-hoja{background:#fff;border-radius:18px;padding:30px 26px 24px;width:min(460px,100%);
          text-align:center;max-height:90vh;overflow-y:auto}
.dup-icono{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;
           background:var(--naranja-suave);color:var(--naranja);
           display:grid;place-items:center;font-size:26px;font-weight:700}
.dup-hoja h3{margin:0 0 8px;font-size:1.25rem;line-height:1.25}
.dup-hoja p{margin:0;color:var(--gris);font-size:.9375rem;line-height:1.6}
.dup-ficha{display:flex;align-items:center;gap:12px;text-align:left;margin:18px 0;
           padding:13px 15px;border:1px solid var(--linea);border-radius:var(--radio-sm);background:#fafbfc}
.dup-ficha img,.dup-sinlogo{width:46px;height:46px;flex:0 0 46px;border-radius:12px;object-fit:contain;
                            background:#fff;border:1px solid var(--linea)}
.dup-sinlogo{display:grid;place-items:center;font-size:1.25rem;font-weight:700;color:var(--naranja)}
.dup-ficha div{min-width:0;display:flex;flex-direction:column;gap:2px}
.dup-ficha strong{font-size:.9375rem;line-height:1.3}
.dup-ficha span{font-size:.8125rem;color:var(--gris)}
.dup-pregunta{font-weight:600;color:#111827 !important;margin-bottom:16px !important}
.dup-botones{display:flex;flex-direction:column;gap:9px}
.dup-botones .btn{width:100%}
.dup-ver{margin-top:14px;background:none;border:0;color:var(--naranja);font:inherit;
         font-size:.875rem;font-weight:600;cursor:pointer;padding:6px}
.dup-ver:hover{text-decoration:underline}

/* "Ver todo el departamento": va antes que las tarjetas de municipio porque
   es la salida más usada — se busca en el departamento, no en un municipio
   que uno no sabe cuál es. */
.btn-depto-todo {
  display: block; width: 100%; text-align: center; margin: 0 auto 18px;
  max-width: 560px; background: var(--primario, #0a7); color: #fff;
  border-radius: 12px; padding: 13px 18px; font-weight: 600; text-decoration: none;
}
.btn-depto-todo:hover { filter: brightness(.94); }

/* La dirección del local, con el filtro "abierto ahora" puesto. Va en su
   propio renglón y en gris: es la referencia para llegar, no el titular. */
.item-meta .item-dir{flex-basis:100%;margin-top:-4px;color:var(--gris);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  /* `min-width:0` NO es decorativo: sin esto el ancho MINIMO de este renglon
     es el largo entero de la direccion sin cortar —`white-space:nowrap` manda
     sobre `overflow:hidden` a la hora de calcular min-content—, y ese minimo
     sube por .item-cuerpo, .item, la columna del grid y la pagina entera.
     En un telefono de 375px, "Bodega Salgado, frente al Monumento a la Madre"
     estiraba el layout a 593px: se veia como la version de escritorio y el
     pellizco no lo devolvia, porque el ancho era real.
     Solo aparece con sucursal a la vista —"abierto ahora" y "cerca de mi"—,
     por eso se veia recien despues de conceder la ubicacion. */
  min-width:0}

/* Red de seguridad: una celda de grid no encoge por debajo de su contenido
   (min-width:auto). Un solo texto largo sin cortes basta para reventar el
   ancho de toda la pagina. Que la columna mande sobre el contenido. */
.layout-listado > *{min-width:0}

/* "● Abierto" en la tarjeta de un local, con el filtro de abierto ahora.
   Verde más saturado que el de "Verificado": son dos cosas distintas y a
   dos centímetros una de otra se confundían. */
.chip-abre{background:#0F9D58;color:#fff}
.item-lado.apilado{justify-content:flex-start}

/* Atajos de rubro. Comparten el chip con los de ciudad, pero SÍ llevan rótulo:
   pegados debajo de "Tegucigalpa · San Pedro Sula", un "Restaurantes" suelto
   se lee como si fuera otro lugar. */
.atajos-rubro { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.atajos-rubro label { flex-basis: 100%; margin-bottom: 2px; }

/* ---------- Panel de filtros plegable ---------- */
/* El rótulo de cada grupo de atajos ocupa su propio renglón: sin esto queda
   pegado al primer chip y se lee "Municipios de Cortés San Pedro Sula". */
.atajos-ciudad { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.atajos-ciudad label { flex-basis: 100%; margin-bottom: 2px; }
.filtros-tit { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* En pantalla grande el panel siempre está abierto: no hay nada que plegar. */
.filtros-abrir { display: none; }

@media (max-width: 960px) {
  .filtros { max-height: none; overflow: visible; }
  .filtros h3 { margin-bottom: 0; }
  .filtros-abrir { display: inline-block; background: var(--naranja-suave); color: var(--naranja-osc);
                   border: 0; border-radius: 999px; padding: 6px 14px; font: inherit;
                   font-size: .8125rem; font-weight: 600; cursor: pointer; }
  .filtros-cuerpo { display: none; padding-top: 16px; }
  .filtros.abierto .filtros-cuerpo { display: block; }
}

/* ---------- La tarjeta de resultado, en el teléfono ----------
   Con 354 px de tarjeta, la foto se llevaba 104 y la columna de sellos 88: al
   NOMBRE le quedaban 100. "Servicios (electricista, plomería, A/C)" salía en
   tres renglones y "San Pedro Sula" en dos. El nombre es lo que se lee, así
   que en pantalla angosta la foto se achica y los sellos bajan a su propio
   renglón, en fila, donde ocupan alto en vez de robar ancho. */
@media (max-width: 560px) {
  .item { flex-wrap: wrap; gap: 12px; }
  .item-foto { width: 68px; height: 68px; }
  .item-cuerpo { flex: 1 1 auto; }
  .item-lado { flex-basis: 100%; flex-direction: row; align-items: center;
               justify-content: flex-start; gap: 6px; flex-wrap: wrap; }
  /* El margen que los separaba en columna sobra cuando van en fila. */
  .item-lado .chip { margin-top: 0 !important; }
}

/* El panel mide ~750 px. En una pantalla baja, `sticky` lo clava por arriba y
   deja "Limpiar filtros" fuera de alcance hasta el final de la página. La
   alternativa —darle su propia barra— resultó peor: dos barras que mover. Así
   que donde no cabe, no se pega: baja con la página y se recorre entero con
   el scroll de siempre. */
@media (max-height: 820px) {
  .filtros { position: static; }
}

/* ---------- RESEÑAS ----------
   El formulario está apagado pero NO se ve apagado: en gris entero parecería
   roto o de mentira. Se ve como el formulario que va a ser, y el único que
   avisa es el botón —desactivado— y su nota. */
.resenas-vacio{text-align:center;padding:34px 20px;border:1px dashed var(--linea);
  border-radius:var(--radio);margin-bottom:22px;background:#fff}
.resenas-icono{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;
  background:var(--naranja-suave);color:var(--naranja);display:grid;place-items:center;font-size:26px}
.resenas-vacio h3{margin:0 0 6px;font-size:1.0625rem}
.resenas-vacio p{margin:0;color:var(--gris);font-size:.875rem}

.resena-form{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:22px}
.resena-form h4{margin:0 0 14px;font-size:1rem}
.resena-estrellas{display:flex;align-items:center;gap:4px;margin-bottom:14px;flex-wrap:wrap}
.estrella{background:none;border:0;padding:0 2px;font-size:1.75rem;line-height:1;cursor:pointer;
  color:var(--linea);transition:color .12s,transform .12s}
.estrella:hover{transform:scale(1.12)}
.estrella.activa{color:#F5A623}
.resena-nota{margin-left:10px;font-size:.8125rem;color:var(--gris)}
.resena-texto{width:100%;border:1px solid var(--linea);border-radius:10px;padding:11px 13px;
  font:inherit;font-size:.875rem;resize:vertical;outline:none}
.resena-texto:focus{border-color:var(--naranja)}
/* La foto se anuncia, no se promete: sin subida detrás, un botón que abre el
   explorador y después no hace nada es peor que decir "muy pronto". */
.resena-foto{display:flex;flex-direction:column;gap:2px;margin:12px 0 16px;padding:12px 14px;
  border:1px dashed var(--linea);border-radius:10px;color:var(--gris)}
.resena-foto span{font-size:.875rem;font-weight:600;color:var(--tinta)}
.resena-foto small{font-size:.75rem}
.resena-form .btn[disabled]{opacity:.5;cursor:not-allowed}
.resena-aviso{margin:12px 0 0;font-size:.8125rem;color:var(--gris);line-height:1.6}
.resena-aviso strong{color:var(--tinta)}

/* ==========================================================================
   MÓVIL — la franja naranja cortada, y la bandera al borde
   ========================================================================== */
/* `main` es `display:flex`, así que `.contenedor` es un ítem de flex y se
   estira hasta el contenido más ancho que tenga adentro en vez de quedarse en
   el ancho de la pantalla. La fila de pestañas —"Sucursales y horarios" entre
   otras— lo empujaba a 440 px en una pantalla de 375: la página quedaba con
   scroll horizontal y, como el header solo pinta el ancho de la VENTANA, al
   correrse a la derecha la franja naranja se cortaba y salía el pedazo blanco.

   `min(1240px, 100%)` y no `max-width:100%` a secas: la segunda pisaría el
   tope de 1240 px del escritorio —solo un `max-width` puede ganar—. Y no
   `min-width:0`, que se probó y no alcanza: acá el contenedor no se está
   achicando de más, se está estirando de más.

   Con el tope puesto, las pestañas se desplazan solas: ya traían overflow-x. */
main > .contenedor { max-width: min(1240px, 100%); }

/* Reseñas: bloque fijo al final de la ficha, fuera de las pestañas. */
.resenas-bloque { max-width: 780px; margin: 34px auto 0; padding-top: 28px;
  border-top: 1px solid var(--linea); }

@media (max-width: 760px) {
  /* En pantalla ancha `.nav{margin:0 auto}` centra el menú y por eso
     `.header-acciones` lleva `margin-left:0`. Acá el menú no existe —está
     `display:none`— y sin devolverle el `auto` la bandera se queda pegada al
     logo, a media pantalla, en vez de irse al borde. */
  .header-acciones { margin-left: auto; }
  .resenas-bloque { margin-top: 26px; }
}

/* ---------- Buscar por cercanía ---------- */
.item-meta .item-km{font-weight:700;color:var(--naranja,#e8590c)}
.barra-radio{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  padding:.6rem .75rem;margin:0 0 .75rem;border:1px solid var(--borde,#e5e7eb);
  border-radius:10px;font-size:.8125rem;color:var(--gris,#6b7280)}
.barra-radio em{font-style:normal;opacity:.8}
.chip-radio{border:1px solid var(--borde,#e5e7eb);background:#fff;color:inherit;
  border-radius:999px;padding:.25rem .7rem;font-size:.8125rem;cursor:pointer}
.chip-radio.activo{background:var(--naranja,#e8590c);border-color:var(--naranja,#e8590c);color:#fff}
.aviso-radio{padding:.6rem .75rem;margin:0 0 .75rem;border-radius:10px;
  background:var(--suave,#fff7ed);font-size:.8125rem;line-height:1.45}

/* ---------- iOS: nada de campos por debajo de 16 px ----------
   Safari en iPhone HACE ZOOM a la página entera cuando se toca un campo con
   font-size menor a 16px, y NO lo deshace al salir: la página queda con el
   ancho estirado y se ve como la versión de escritorio. Pellizcar no la
   devuelve, porque el layout quedó ancho de verdad.

   Se veía al buscar "km motos cerca de mí": tocar el campo dispara el zoom, y
   el diálogo de ubicación devuelve el foco al campo y lo dispara otra vez. El
   listado no tenía nada mal —ni desbordes ni media queries rotas—; el culpable
   eran los 13px de los filtros y del "Ordenar por".

   16px es el mínimo exacto que exige Safari. Solo en pantalla angosta: en
   escritorio el tamaño chico está bien y no hay zoom que evitar. */
@media (max-width: 760px) {
  input, select, textarea, .filtro-grupo input, .filtro-grupo select,
  .listado-barra select, .news input, .hero-buscador input, .buscador-linea input {
    font-size: 16px;
  }
}


/* ---------- Que nada estire la pagina en un telefono ----------
   Los `min-width:0` de arriba arreglan cada caso donde un texto sin cortes
   empuja el ancho. Esto es la red por si aparece uno nuevo: en pantalla
   angosta, lo que sobresalga se recorta y la pagina conserva su ancho.

   `clip` y no `hidden` a proposito: `hidden` convierte al elemento en
   contenedor de scroll y rompe el `position:sticky` del panel de filtros y de
   la cabecera. `clip` recorta sin crear scroll.

   Es una red, no la solucion: si algo se recorta, el arreglo sigue siendo el
   `min-width:0` que falte, no dejarlo escondido aca. */
@media (max-width: 760px) {
  #vista { overflow-x: clip; }
}

/* "Sugerido": lo que compra un negocio con plan premium y ficha verificada.
   Sube al tope del radio en las búsquedas "cerca de mí". Se distingue del
   verde de "Verificado" —que es un hecho— porque esto es una recomendación. */
.chip-sugerido{display:inline-block;margin:0 0 5px;padding:2px 9px;border-radius:99px;
  background:var(--naranja,#e8590c);color:#fff;font-size:.6875rem;font-weight:700;
  letter-spacing:.02em}

/* Aviso de que se buscó con menos palabras de las que se escribieron. Va
   arriba de la lista y no como una alerta roja: no es un error de la persona,
   es el buscador diciendo qué entendió. */
.aviso-rescate{background:var(--naranja-suave); color:var(--naranja-osc);
  border-radius:var(--radio-sm); padding:11px 14px; margin-bottom:14px;
  font-size:.8125rem; line-height:1.5}
.aviso-rescate strong{color:inherit}

/* ---------- "+ Empresa" también en el teléfono ----------
   Estaba escondido en móvil (dos reglas distintas lo apagaban) y con eso el
   camino para que un negocio se inscriba solo existía en computadora — que es
   justo donde NO está el dueño de la pulpería. Es la acción que hace crecer el
   directorio: no puede ser la única que se esconde.

   Entra sin apretar nada: el texto ya se reduce a "+ Empresa" con `.txt-largo`,
   y en pantallas muy angostas el logo se achica en vez de empujarlo afuera. */
@media (max-width: 760px) {
  .header-acciones .btn-blanco { display: inline-flex; align-items: center; }
  .btn-blanco .txt-largo { display: none; }
  .header-acciones { gap: 7px; }
  .btn-blanco { padding: 8px 11px; font-size: .78rem; }
}
@media (max-width: 400px) {
  /* El logo cede primero: la marca ya está en la franja naranja entera. */
  .logo-bloque .logo img, .logo-bloque img { max-width: 92px; }
  .logo-bloque small, .logo-tagline { display: none; }
  .btn-blanco { padding: 8px 9px; font-size: .75rem; }
}
.aviso-rescate a{color:inherit; text-decoration:underline; text-underline-offset:2px}

/* Confirmación de /?nocontar=0|1. Va sobre todo, se va sola a los 6 segundos. */
.aviso-contador{position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:400; max-width:min(520px,92vw); background:#101114; color:#fff;
  border-radius:12px; padding:13px 18px; font-size:.875rem; line-height:1.45;
  box-shadow:0 8px 30px rgba(0,0,0,.28); transition:opacity .4s, transform .4s}
.aviso-contador.falla{background:#8A1C1C}
.aviso-contador.ido{opacity:0; transform:translate(-50%,12px); pointer-events:none}
@media(max-width:760px){ .aviso-contador{bottom:78px} }  /* arriba de la barra */

/* El vacío deja de ser un callejón sin salida: dice qué pasa con lo que se
   buscó y ofrece la única acción que da resultado hoy mismo. */
.vacio strong{display:block; font-size:1.0625rem; margin-bottom:8px}
.vacio p{margin:0 0 8px; color:var(--gris); font-size:.875rem; line-height:1.6}
.vacio .vacio-nota{font-size:.8125rem}
.vacio .btn{margin-top:8px}