/* =====================================================================
   extras.css  ·  Mejoras sobre styles.css (no modifica logo ni tipografía)
   Animaciones · estados de horario · redes · mapa · responsive
   ===================================================================== */

/* ---------- Base / entrada de página ---------- */
body { animation: pageIn .5s ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(24px,-28px) scale(1.08); } }
@keyframes floatChip { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-12px) rotate(var(--r,0deg)); } }
@keyframes gradShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 100% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } }

::selection { background: var(--blue-100); color: var(--slate-900); }
:focus-visible { outline: 3px solid rgba(59,130,246,.45); outline-offset: 2px; border-radius: 8px; }

/* ---------- Barra de progreso + header ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 300;
  background: linear-gradient(90deg, var(--blue-500), var(--violet-500));
  transition: width .1s linear;
}
header .header-flex { transition: height .25s ease; }
header { transition: box-shadow .25s ease, background .25s ease; }
header.scrolled { box-shadow: 0 8px 24px -12px rgba(15,23,42,.18); background: rgba(255,255,255,.92); }
header.scrolled .header-flex { height: 62px; }

.menu-toggle {
  display: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--slate-200); background: white; color: var(--slate-700);
  cursor: pointer; align-items: center; justify-content: center; font-size: 1.05rem;
  transition: var(--transition);
}
.menu-toggle:hover { border-color: var(--blue-500); color: var(--blue-600); background: var(--blue-50); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; }
.reveal.in { animation: fadeUp .65s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
.reveal.done { opacity: 1; animation: none; }

/* ---------- Hero ---------- */
.hero .blob {
  position: absolute; border-radius: 50%; filter: blur(70px);
  opacity: .45; pointer-events: none; animation: floaty 16s ease-in-out infinite; z-index: 0;
}
.hero .blob.b1 { width: 340px; height: 340px; background: #bfdbfe; top: -40px; left: -80px; }
.hero .blob.b2 { width: 300px; height: 300px; background: #ddd6fe; top: 120px; right: -60px; animation-delay: -6s; }
.hero .blob.b3 { width: 220px; height: 220px; background: #fde68a; bottom: -60px; left: 30%; opacity: .3; animation-delay: -10s; }
.hero .badge-local, .hero h1, .hero > p, .hero .search-box, .hero .hero-stats { animation: fadeUp .8s cubic-bezier(.2,.7,.2,1) both; }
.hero .badge-local { animation-delay: .05s; }
.hero h1 { animation-delay: .15s; }
.hero > p { animation-delay: .25s; }
.hero .search-box { animation-delay: .35s; }
.hero .hero-stats { animation-delay: .45s; }
.hero h1 .gradient-text { background-size: 220% 220%; animation: gradShift 7s ease infinite; }
.badge-local i { animation: pulse 2s infinite; }

.hero .chip-float {
  position: absolute !important; z-index: 1; display: flex; align-items: center; gap: 10px;
  background: white; border: 1px solid var(--slate-200); border-radius: 18px;
  padding: 10px 16px; box-shadow: var(--shadow-lg); font-weight: 700; font-size: .85rem;
  color: var(--slate-800); animation: floatChip 6s ease-in-out infinite;
}
.chip-float .ci { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: .9rem; }
.chip-float small { display: block; font-weight: 500; color: var(--slate-400); font-size: .7rem; }
.chip-float.c1 { left: 2%; top: 290px; --r: -4deg; }
.chip-float.c1 .ci { background: linear-gradient(135deg, var(--amber-400), var(--amber-500)); }
.chip-float.c2 { right: 2%; top: 330px; --r: 3deg; animation-delay: -2s; }
.chip-float.c2 .ci { background: linear-gradient(135deg, var(--blue-500), var(--violet-500)); }
.chip-float.c3 { left: 3%; bottom: 100px; --r: 3deg; animation-delay: -4s; }
.chip-float.c3 .ci { background: linear-gradient(135deg, #34d399, var(--green-600)); }
.chip-float.c4 { right: 3%; bottom: 130px; --r: -3deg; animation-delay: -1s; }
.chip-float.c4 .ci { background: linear-gradient(135deg, #fb7185, var(--red-500)); }

/* ---------- Barra de herramientas del listado ---------- */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.result-count { font-size: .85rem; color: var(--slate-500); font-weight: 600; margin-right: 4px; }
.result-count b { color: var(--slate-900); }
.toggle-abierto {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none;
  background: white; border: 1.5px solid var(--slate-200); border-radius: var(--radius-full);
  padding: 8px 16px 8px 12px; font-size: .85rem; font-weight: 600; color: var(--slate-600);
  transition: var(--transition);
}
.toggle-abierto:hover { border-color: var(--slate-300); color: var(--slate-900); }
.toggle-abierto input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-abierto .sw { width: 34px; height: 20px; border-radius: 99px; background: var(--slate-300); position: relative; transition: var(--transition); flex-shrink: 0; }
.toggle-abierto .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: var(--shadow-sm); transition: var(--transition); }
.toggle-abierto input:checked + .sw { background: var(--green-500); }
.toggle-abierto input:checked + .sw::after { transform: translateX(14px); }
.toggle-abierto:has(input:checked) { border-color: var(--green-500); color: var(--green-600); background: #f0fdf4; }
.toggle-abierto input:focus-visible + .sw { outline: 3px solid rgba(34,197,94,.4); outline-offset: 2px; }
.select-orden {
  appearance: none; -webkit-appearance: none; font-family: var(--font); font-size: .85rem; font-weight: 600;
  color: var(--slate-700); background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1.5px solid var(--slate-200); border-radius: var(--radius-full); padding: 9px 38px 9px 18px; cursor: pointer; transition: var(--transition);
}
.select-orden:hover { border-color: var(--slate-300); }
.select-orden:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(59,130,246,.12); }

/* ---------- Tarjetas ---------- */
.sponsor-card { outline-offset: 3px; }
.sponsor-card:hover { box-shadow: 0 28px 50px -16px rgba(37,99,235,.28), var(--shadow-lg); }
.sponsor-card.destacado:hover { box-shadow: 0 28px 50px -16px rgba(245,158,11,.35), var(--shadow-lg); }
.sponsor-image img { opacity: 0; transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .6s ease; }
.sponsor-image img.loaded { opacity: 1; }
.sponsor-name { transition: color .25s; }
.sponsor-card:hover .sponsor-name { color: var(--blue-700); }
.estado-badge.pronto { background: rgba(245,158,11,.97); color: white; }
.estado-badge.abierto .dot { animation: pulse 2s infinite; }

.horario-estado { display: flex; flex-direction: column; gap: 1px; }
.estado-linea { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: .82rem; line-height: 1.35; flex-wrap: wrap; }
.estado-linea.abierto { color: var(--green-600); }
.estado-linea.cerrado { color: var(--red-500); }
.estado-linea.pronto { color: var(--amber-600); }
.estado-linea .sep { color: var(--slate-300); font-weight: 400; }
.estado-linea .det { font-weight: 600; color: var(--slate-600); }
.estado-sub { font-size: .74rem; color: var(--slate-400); }
.sponsor-meta-row .estado-linea span, .info-texto .estado-linea span { flex: none; }
.mini-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; display: inline-block; }
.estado-linea.abierto .mini-dot { animation: ping 1.8s infinite; }

.card-redes { display: flex; gap: 6px; align-items: center; }
.card-redes i { width: 26px; height: 26px; border-radius: 50%; background: var(--slate-50); border: 1px solid var(--slate-200); color: var(--slate-500); display: flex; align-items: center; justify-content: center; font-size: .68rem; transition: var(--transition); }
.sponsor-card:hover .card-redes i { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-600); }

/* Skeleton de carga */
.skeleton-card { background: white; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); overflow: hidden; }
.skeleton-card .sk-img { height: 190px; }
.skeleton-card .sk-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.sk { background: linear-gradient(90deg, var(--slate-100) 0%, var(--slate-200) 50%, var(--slate-100) 100%); background-size: 800px 100%; animation: shimmer 1.4s linear infinite; border-radius: 8px; }
.sk-line { height: 12px; } .sk-line.w60 { width: 60%; } .sk-line.w90 { width: 90%; } .sk-line.w40 { width: 40%; height: 18px; }

/* ---------- Sección "Así de fácil" ---------- */
.como-funciona { padding: 8px 0 64px; }
.pasos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.paso {
  background: white; border: 1px solid var(--slate-200); border-radius: var(--radius-xl);
  padding: 32px 28px; position: relative; overflow: hidden; box-shadow: var(--shadow-xs);
  transition: var(--transition);
}
.paso:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--blue-100); }
.paso .num { position: absolute; top: 14px; right: 22px; font-size: 4.2rem; font-weight: 900; letter-spacing: -.05em; color: var(--slate-100); line-height: 1; transition: color .3s; }
.paso:hover .num { color: var(--blue-100); }
.paso .ico { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; margin-bottom: 20px; box-shadow: var(--shadow-blue); background: linear-gradient(135deg, var(--blue-500), var(--violet-500)); position: relative; }
.paso:nth-child(2) .ico { background: linear-gradient(135deg, var(--amber-400), var(--amber-600)); box-shadow: 0 12px 28px -8px rgba(245,158,11,.4); }
.paso:nth-child(3) .ico { background: linear-gradient(135deg, #4ade80, var(--green-600)); box-shadow: 0 12px 28px -8px rgba(34,197,94,.4); }
.paso h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--slate-900); margin-bottom: 6px; position: relative; }
.paso p { color: var(--slate-500); font-size: .92rem; line-height: 1.6; position: relative; }

/* ---------- Detalle ---------- */
.foto-principal { cursor: zoom-in; }
.foto-principal img { transition: opacity .35s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.foto-principal:hover img { transform: scale(1.03); }
.galeria-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px); color: var(--slate-800);
  box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center;
  transition: var(--transition); opacity: 0;
}
.foto-principal:hover .galeria-nav, .galeria-nav:focus-visible { opacity: 1; }
.galeria-nav:hover { background: white; transform: translateY(-50%) scale(1.1); }
.galeria-nav.prev { left: 14px; } .galeria-nav.next { right: 14px; }
.galeria-contador {
  position: absolute; bottom: 14px; right: 14px; z-index: 3; background: rgba(15,23,42,.8);
  backdrop-filter: blur(8px); color: white; font-size: .75rem; font-weight: 700;
  padding: 5px 12px; border-radius: var(--radius-full);
}
.detalle-info > * { animation: fadeUp .6s cubic-bezier(.2,.7,.2,1) both; }
.detalle-info > *:nth-child(1) { animation-delay: .05s; } .detalle-info > *:nth-child(2) { animation-delay: .1s; }
.detalle-info > *:nth-child(3) { animation-delay: .15s; } .detalle-info > *:nth-child(4) { animation-delay: .2s; }
.detalle-info > *:nth-child(5) { animation-delay: .25s; } .detalle-info > *:nth-child(6) { animation-delay: .3s; }
.detalle-info > *:nth-child(7) { animation-delay: .35s; }
.detalle-galeria { animation: fadeUp .6s cubic-bezier(.2,.7,.2,1) both; }
.info-texto .estado-linea { margin-top: 3px; }
.info-item a { color: inherit; text-decoration: none; }
.info-item a:hover { color: var(--blue-600); }

.btn-llamar, .btn-web {
  padding: 15px 26px; border-radius: var(--radius-full); font-weight: 700; font-size: .95rem;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: var(--transition); font-family: var(--font); flex: 1; min-width: 160px; cursor: pointer; border: none;
}
.btn-llamar { background: var(--blue-50); color: var(--blue-700); border: 1.5px solid var(--blue-100); }
.btn-llamar:hover { background: var(--blue-600); color: white; border-color: var(--blue-600); transform: translateY(-2px); box-shadow: var(--shadow-blue); }
/* Botón de la web: mismo degradado que el logo del sitio */
.btn-web { background: linear-gradient(135deg, var(--blue-500), var(--violet-500)); color: white; box-shadow: 0 8px 20px -6px rgba(59,130,246,.5); }
.btn-web:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -6px rgba(99,102,241,.6); filter: brightness(1.06); }

.redes-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--slate-200); }
.redes-titulo { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--slate-400); margin-right: 4px; }
.red-btn {
  width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: white; border: 1.5px solid var(--slate-200); color: var(--slate-600); text-decoration: none;
  font-size: .95rem; transition: var(--transition);
}
.red-btn:hover { background: var(--c, var(--blue-600)); border-color: var(--c, var(--blue-600)); color: white; transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 20px -8px var(--c, var(--blue-600)); }

.ubicacion-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; margin-bottom: 0; align-items: stretch; }
.ubicacion-grid .detalle-extra { margin-bottom: 24px; display: flex; flex-direction: column; }
.mapa-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--slate-200); flex: 1; min-height: 300px; background: var(--slate-100); }
.mapa-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa-dir { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.mapa-dir span { color: var(--slate-600); font-size: .9rem; font-weight: 500; display: flex; gap: 8px; align-items: flex-start; flex: 1; min-width: 180px; }
.mapa-dir span i { color: var(--blue-600); margin-top: 4px; }
.mapa-dir .btn-mapa { flex: 0 0 auto; min-width: 0; padding: 11px 22px; font-size: .88rem; }

.contacto-lista { display: flex; flex-direction: column; gap: 8px; }
.contacto-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--slate-200); background: var(--slate-50); text-decoration: none; color: var(--slate-800);
  transition: var(--transition);
}
.contacto-row:hover { background: white; border-color: var(--c, var(--blue-500)); transform: translateX(4px); box-shadow: var(--shadow-sm); }
.contacto-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--c, var(--blue-600)); color: white; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
.contacto-txt { flex: 1; min-width: 0; line-height: 1.25; }
.contacto-txt strong { display: block; font-size: .85rem; font-weight: 700; }
.contacto-txt small { display: block; font-size: .76rem; color: var(--slate-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contacto-row > .fa-arrow-up-right-from-square { font-size: .7rem; color: var(--slate-300); transition: var(--transition); }
.contacto-row:hover > .fa-arrow-up-right-from-square { color: var(--c, var(--blue-600)); }

.similares { padding: 8px 0 40px; }
.similares .section-header { margin-bottom: 24px; }
.similares .sponsors-grid { grid-template-columns: repeat(3, 1fr); }

.detalle-extra { transition: var(--transition); }
.detalle-extra:hover { box-shadow: var(--shadow-md); }

/* ---------- Barra inferior móvil + subir ---------- */
.barra-movil {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--slate-200); gap: 10px; animation: fadeUp .5s .3s both;
}
.barra-movil a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 10px;
  border-radius: var(--radius-full); font-weight: 700; font-size: .9rem; text-decoration: none;
  font-family: var(--font); transition: var(--transition);
}
.barra-movil a:active { transform: scale(.96); }
.barra-movil .bm-wa { background: var(--whatsapp); color: white; flex: 1.6; box-shadow: 0 8px 18px -6px rgba(37,211,102,.55); }
.barra-movil .bm-tel { background: var(--blue-50); color: var(--blue-700); }
.barra-movil .bm-map { background: var(--slate-900); color: white; }

.to-top {
  position: fixed; right: 20px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--slate-900); color: white; cursor: pointer; z-index: 140; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(14px) scale(.9);
  pointer-events: none; transition: var(--transition);
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--blue-600); transform: translateY(-3px); box-shadow: var(--shadow-blue); }

/* Botones con brillo al pasar el cursor */
.btn-primary, .btn-cta, .btn-whatsapp, .btn-web { position: relative; overflow: hidden; }
.btn-primary::after, .btn-cta::after, .btn-whatsapp::after, .btn-web::after {
  content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
}
.btn-primary:hover::after, .btn-cta:hover::after, .btn-whatsapp:hover::after, .btn-web:hover::after { left: 130%; }

.footer-social a:hover { box-shadow: 0 8px 18px -6px rgba(37,99,235,.6); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1360px) {
  .hero .chip-float { display: none; }
}
@media (max-width: 1024px) {
  .ubicacion-grid { grid-template-columns: 1fr; gap: 0; }
  .mapa-wrap { min-height: 280px; }
  .similares .sponsors-grid { grid-template-columns: 1fr 1fr; }
  .detalle-extra-grid { gap: 0; }
}
@media (max-width: 768px) {
  .container { padding: 0 18px; }
  header.scrolled .header-flex { height: 60px; }
  .header-flex { height: 64px; position: relative; gap: 10px; }
  .header-flex .btn-primary { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 4px;
    background: rgba(255,255,255,.98); backdrop-filter: blur(18px); padding: 12px 18px 18px;
    border-bottom: 1px solid var(--slate-200); box-shadow: 0 20px 30px -16px rgba(15,23,42,.2);
    display: none !important; animation: fadeUp .25s ease both;
  }
  header.menu-open .nav-links { display: flex !important; }
  .nav-links a { padding: 13px 16px; font-size: 1rem; text-align: left; }
  .nav-links .btn-outline { text-align: center; }
  .hero { padding: 48px 0 36px; }
  .hero p { font-size: 1.02rem; margin-bottom: 28px; }
  .search-box { margin-bottom: 32px; }
  .search-box input { padding: 16px 20px 16px 52px; }
  .section-header { align-items: flex-start; }
  .toolbar { width: 100%; }
  .result-count { width: 100%; margin: 0; }
  .select-orden { flex: 1; min-width: 150px; }
  .pasos-grid { grid-template-columns: 1fr; gap: 14px; }
  .paso { padding: 24px; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: start; }
  .paso .ico { margin-bottom: 0; grid-row: span 2; }
  .paso .num { font-size: 3rem; top: 8px; right: 16px; }
  .detalle-header { padding: 20px 0 16px; }
  .detalle-grid { gap: 24px; }
  .galeria-nav { opacity: 1; width: 38px; height: 38px; }
  .foto-principal { cursor: default; }
  .miniatura { height: 64px; }
  .similares .sponsors-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .barra-movil { display: flex; }
  body.con-barra { padding-bottom: 76px; }
  body.con-barra .to-top { bottom: 90px; }
  .to-top { right: 14px; }
  .cta-negocios { margin-bottom: 40px; }
}
@media (max-width: 520px) {
  .container { padding: 0 16px; }
  .header-flex .btn-primary { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .header-flex .btn-primary .btn-text { display: none; }
  .logo { font-size: 1.2rem; }
  .logo small { margin-left: 42px; }
  .hero h1 { letter-spacing: -.035em; }
  .hero-stats { padding: 20px 0; }
  .stat-item { min-width: 0; padding: 0 8px; }
  .stat-number { font-size: 1.35rem; }
  .stat-label { font-size: .68rem; }
  .sponsors-grid, .similares .sponsors-grid { grid-template-columns: 1fr; }
  .sponsor-image { height: 180px; }
  .toggle-abierto { flex: 1 1 100%; justify-content: center; }
  .detalle-acciones { display: grid; grid-template-columns: 1fr 1fr; }
  .detalle-acciones .btn-whatsapp { grid-column: 1 / -1; }
  .detalle-acciones .btn-mapa, .detalle-acciones .btn-llamar, .detalle-acciones .btn-web { min-width: 0; width: 100%; padding: 14px 12px; }
  .detalle-acciones .btn-web { grid-column: 1 / -1; }
  .detalle-extra { padding: 22px 18px; border-radius: var(--radius-lg); }
  .foto-principal { height: 250px; border-radius: var(--radius-lg); }
  .mapa-wrap { min-height: 240px; }
  .mapa-dir .btn-mapa { width: 100%; }
  .redes-fila { justify-content: flex-start; }
  .cta-negocios { padding: 40px 20px; }
  .cta-negocios p { font-size: .98rem; }
  .footer-social { justify-content: center; }
}
@media (max-width: 360px) {
  .stat-number { font-size: 1.15rem; }
  .filter-btn { padding: 8px 14px; }
  .detalle-acciones { grid-template-columns: 1fr; }
}
@media (min-width: 1500px) {
  .container { max-width: 1360px; }
}

/* Accesibilidad: respeta "reducir movimiento" */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; }
}
/* detalles del estado en la ficha */
.info-texto .estado-linea span { font-size: .84rem; }
.info-texto .estado-linea .sep { color: var(--slate-300); }

/* ---- Ficha: columna izquierda llena (galería + servicios + pagos) ---- */
.detalle-galeria { position: static; }
.detalle-extra.compacto { padding: 24px 26px; margin-bottom: 0; border-radius: var(--radius-lg); }
.detalle-extra.compacto > p { margin-bottom: 14px; }
.detalle-extra.compacto h2 { font-size: 1.05rem; }

/* Botones de acción en cuadrícula: WhatsApp y web a todo el ancho */
.detalle-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.detalle-acciones > a { min-width: 0 !important; width: 100%; white-space: nowrap; }
.detalle-acciones .btn-whatsapp, .detalle-acciones .btn-web { grid-column: 1 / -1; }

/* Datos del negocio: 2 columnas también en escritorio */
.datos-extra { grid-template-columns: 1fr 1fr; }
@media (max-width: 1024px) { .detalle-extra.compacto { padding: 22px; } }
@media (max-width: 768px) {
  .hero { padding-bottom: 52px; }
  .negocios-section { padding-top: 24px; }
  .datos-extra { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .miniaturas { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .miniatura { height: 56px; }
  .detalle-acciones .btn-mapa, .detalle-acciones .btn-llamar, .detalle-acciones .btn-web { padding: 14px 10px; }
  .detalle-extra.compacto { padding: 20px 18px; }
}
@media (max-width: 360px) {
  .detalle-acciones { grid-template-columns: 1fr; }
}

/* Hero sin recorte lateral (los destellos se difuminan en lugar de cortarse) */
.hero { overflow: visible; }
main { overflow-x: clip; }
@media (min-width: 1200px) {
  .foto-principal { height: 520px; }
  .miniatura { height: 88px; }
}

/* ---- Distribución de la ficha: escritorio (galería + extras a la izquierda, info a la derecha) ---- */
.detalle-grid {
  grid-template-areas: "gal info" "ext info";
  grid-template-rows: auto 1fr;
  row-gap: 14px;
}
.detalle-galeria { grid-area: gal; }
.detalle-info { grid-area: info; }
.detalle-extras-col { grid-area: ext; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1024px) {
  .detalle-grid { grid-template-areas: "gal" "info" "ext"; grid-template-rows: auto; row-gap: 28px; }
}

/* ---- Modo "foto completa" (ajusteFoto: "completa" en data.js): carteles y fotos con texto no se recortan ----
   La imagen se ve entera y los lados se rellenan con una versión difuminada de la misma foto. */
.img-completa { isolation: isolate; background: var(--slate-800); }
.img-completa::before {
  content: ''; position: absolute; inset: -24px; z-index: -1;
  background: var(--bg) center / cover no-repeat;
  filter: blur(22px) saturate(1.25) brightness(.85);
}
.sponsor-image.img-completa img, .foto-principal.img-completa img, .miniatura.img-completa img { object-fit: contain; }
.sponsor-card:hover .sponsor-image.img-completa img, .foto-principal.img-completa:hover img { transform: none; }
.sponsor-image.img-completa::after { background: linear-gradient(to top, rgba(15,23,42,.35) 0%, transparent 35%); }

/* =====================================================================
   v3 · Ciudades · contacto sin repeticiones · animaciones más ligeras
   (solo transform/opacity, sin filtros animados ni sombras animadas)
   ===================================================================== */

/* ---------- Rendimiento ---------- */
/* Barra de progreso: transform en lugar de width */
.scroll-progress { width: 100%; transform: scaleX(0); transform-origin: 0 50%; transition: none; will-change: transform; }
/* Destellos del hero: degradados radiales (sin filter:blur) y solo se mueven con transform */
.hero .blob { filter: none; opacity: .55; animation: floaty 22s ease-in-out infinite; will-change: transform; }
.hero .blob.b1 { background: radial-gradient(circle, rgba(147,197,253,.85), transparent 68%); }
.hero .blob.b2 { background: radial-gradient(circle, rgba(196,181,253,.85), transparent 68%); }
.hero .blob.b3 { background: radial-gradient(circle, rgba(253,230,138,.8), transparent 68%); opacity: .4; }
@keyframes floaty { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(18px,-20px,0); } }
.hero .chip-float { will-change: transform; }
.hero h1 .gradient-text { animation: none; background-size: 100% 100%; }
/* Puntito "abierto": ping con transform/opacity (antes animaba box-shadow) */
.mini-dot { position: relative; }
.estado-linea.abierto .mini-dot { animation: none; }
.estado-linea.abierto .mini-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor;
  animation: ping2 2.2s ease-out infinite;
}
@keyframes ping2 { 0% { transform: scale(1); opacity: .5; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
/* Se pausan las animaciones infinitas cuando el hero ya no se ve */
.hero-fuera .hero .blob, .hero-fuera .hero .chip-float { animation-play-state: paused; }
/* Tarjetas: transiciones solo de lo necesario; insignias sin backdrop-filter */
.sponsor-card { transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease; }
.image-category-badge, .image-rating { backdrop-filter: none; -webkit-backdrop-filter: none; }
.image-rating { background: rgba(15,23,42,.88); }
.image-category-badge { background: rgba(255,255,255,.96); }
/* Entradas más cortas y suaves */
@keyframes fadeUp2 { from { opacity: 0; transform: translate3d(0,16px,0); } to { opacity: 1; transform: none; } }
.reveal.in { animation: fadeUp2 .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
/* Transición suave al navegar entre páginas (Chrome/Edge; el resto la ignora) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
/* Cambio de texto al elegir ciudad */
.swap { animation: swapIn .35s ease both; }
@keyframes swapIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Pestañas de ciudades ---------- */
.ciudad-tabs {
  position: relative; display: flex; gap: 4px; padding: 6px; width: fit-content; max-width: 100%;
  background: white; border: 1px solid var(--slate-200); border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none;
}
.ciudad-tabs::-webkit-scrollbar { display: none; }
.ciudad-tab {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  padding: 11px 18px; border: none; background: transparent; border-radius: var(--radius-full);
  font-family: var(--font); font-weight: 700; font-size: .92rem; color: var(--slate-600);
  cursor: pointer; white-space: nowrap; transition: color .25s ease;
}
.ciudad-tab i { font-size: .85rem; opacity: .85; }
.ciudad-tab:hover { color: var(--slate-900); }
.ciudad-tab.active, .ciudad-tab.active:hover { color: #fff; }
.ct-count {
  font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 99px;
  background: var(--slate-100); color: var(--slate-500); transition: background .25s, color .25s;
}
.ciudad-tab.active .ct-count { background: rgba(255,255,255,.22); color: #fff; }
.tab-ind {
  position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: var(--radius-full); z-index: 0;
  background: linear-gradient(135deg, var(--blue-500), var(--violet-500)); box-shadow: 0 8px 18px -8px rgba(59,130,246,.65);
  transition: transform .38s cubic-bezier(.4,0,.2,1), width .38s cubic-bezier(.4,0,.2,1); will-change: transform;
}

/* ---------- Estado vacío de ciudad / búsqueda ---------- */
.empty-ciudad {
  grid-column: 1 / -1; text-align: center; padding: 56px 24px; border: 1.5px dashed var(--slate-300);
  border-radius: var(--radius-xl); background: linear-gradient(180deg, #fff, var(--slate-50));
}
.empty-ciudad .ec-ico {
  width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; color: #fff; background: linear-gradient(135deg, var(--blue-500), var(--violet-500)); box-shadow: var(--shadow-blue);
}
.empty-ciudad h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--slate-900); margin-bottom: 8px; }
.empty-ciudad p { color: var(--slate-500); max-width: 460px; margin: 0 auto 22px; line-height: 1.6; }
.empty-ciudad .btn-cta { display: inline-flex; }
.ec-otras { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ---------- Ficha: contacto y redes (cada dato una sola vez) ---------- */
.detalle-extra-grid.una-columna { grid-template-columns: 1fr; }
.detalle-extra .redes-titulo { margin: 20px 0 10px; display: block; }
.redes-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.red-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-full);
  border: 1.5px solid var(--slate-200); background: white; color: var(--slate-700); font-size: .84rem; font-weight: 600;
  text-decoration: none; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.red-chip i { color: var(--c); transition: color .2s ease; }
.red-chip:hover { background: var(--c); border-color: var(--c); color: #fff; transform: translateY(-2px); }
.red-chip:hover i { color: #fff; }
.web-row {
  display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border-radius: var(--radius-md);
  text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--blue-500), var(--violet-500));
  box-shadow: 0 10px 22px -12px rgba(59,130,246,.7); transition: transform .2s ease, box-shadow .2s ease;
}
.web-row:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -12px rgba(99,102,241,.8); }
.wr-ico { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wr-txt { flex: 1; min-width: 0; line-height: 1.25; }
.wr-txt strong { display: block; font-size: .85rem; font-weight: 700; }
.wr-txt small { display: block; font-size: .76rem; opacity: .88; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-row > .fa-arrow-up-right-from-square { font-size: .72rem; opacity: .8; }
.contacto-row:hover { transform: translateX(3px); }
.mapa-wrap { min-height: 320px; }

@media (max-width: 768px) {
  .ciudad-tabs { width: 100%; }
  .ciudad-tab { padding: 10px 15px; font-size: .88rem; }
  .empty-ciudad { padding: 40px 18px; }
}
@media (max-width: 520px) {
  .red-chip { padding: 8px 12px; }
}

/* Ficha: horarios + mapa abajo; contacto y datos en la columna derecha */
.ubicacion-grid.horarios-mapa { grid-template-columns: 1fr 1.6fr; }
.detalle-info > .detalle-extra.compacto { margin-top: 18px; }
.detalle-info > .detalle-extra.compacto:first-of-type { margin-top: 22px; }
.detalle-info .detalle-extra.compacto .datos-extra { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.detalle-info .detalle-extra.compacto .dato-extra { padding: 12px 10px; }
.detalle-info .detalle-extra.compacto .dato-valor { font-size: 1rem; }
@media (max-width: 1024px) { .ubicacion-grid.horarios-mapa { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .detalle-info .detalle-extra.compacto .datos-extra { grid-template-columns: 1fr 1fr; } }