:root{
  --c-prim:#0d6efd;
  --c-bg:#f8fafc;
  --radius:1.25rem;

  --card-img-h-sm: 150px;   /* móvil */
  --card-img-h-lg: 190px;   /* desktop */
}

/* ====== Reset y base ====== */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{background:var(--c-bg)}
.navbar{box-shadow:0 2px 18px rgba(0,0,0,.04)}

/* ================= HERO ================= */
.hero{
  position:relative;
  min-height:clamp(560px,92vh,860px);
  display:flex; align-items:center;
  overflow:hidden;
  background:
    radial-gradient(1200px 600px at -10% -20%, #e8f1ff 0%, rgba(231,241,255,0) 60%),
    radial-gradient(900px 500px at 110% 120%, #e8f1ff 0%, rgba(231,241,255,0) 60%),
    linear-gradient(180deg,#ffffff 0%, #f6f9ff 100%);
}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.72) 28%,
      rgba(255,255,255,.34) 55%,
      rgba(255,255,255,.12) 72%,
      rgba(255,255,255,0) 100%),
    radial-gradient(60% 50% at 20% 40%,
      rgba(255,255,255,.70) 0%,
      rgba(255,255,255,.28) 55%,
      rgba(255,255,255,.06) 100%);
}
.hero-slide{
  position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center;
  transform:scale(1.04);
  animation:heroFade 30s infinite ease-in-out;
  will-change:opacity,transform;
}
.hero-slide:first-child{opacity:1}
.hero-slide:nth-child(1){animation-delay:0s}
.hero-slide:nth-child(2){animation-delay:5s}
.hero-slide:nth-child(3){animation-delay:10s}
.hero-slide:nth-child(4){animation-delay:15s}
.hero-slide:nth-child(5){animation-delay:20s}
.hero-slide:nth-child(6){animation-delay:25s}
@keyframes heroFade{
  0%{opacity:0;transform:scale(1.04)}
  4%{opacity:1}
  16%{opacity:1}
  20%{opacity:0;transform:scale(1)}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .hero-slide{animation:none}
  .hero-slide:first-child{opacity:1}
}
.hero .container{position:relative; z-index:1}
.hero h1{ color:#0b1220; text-wrap:balance; text-shadow:0 2px 8px rgba(0,0,0,.10) }
.hero p.lead{ color:#2d3748; text-shadow:0 1px 6px rgba(0,0,0,.08) }

/* ================= PANEL BUSCADOR ================= */
.search-panel{
  position:relative;
  border:1px solid rgba(255,255,255,.45);
  background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.22));
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(13,110,253,.14), inset 0 1px 0 rgba(255,255,255,.35);
  padding: 1.25rem;
}
.search-panel::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 0 40px rgba(13,110,253,.08) inset;
  pointer-events:none;
}
@media (min-width:992px){ .search-panel{ padding:1.5rem 1.75rem } }

.search-panel .form-control,
.search-panel .form-select{ height:48px }
.search-panel .btn{ height:48px; white-space:nowrap }
.search-panel .input-group-text{ background:transparent; border-right:0 }
.search-panel .input-group .form-control{ border-left:0 }
.input-group .form-select{ border-right:0 }

/* Fix: que el select dentro del input-group no “empuje” el botón */
.search-panel .input-group .form-select{ min-width:0; flex:1 1 auto; }
.search-panel .input-group>.btn{ border-top-left-radius:0; border-bottom-left-radius:0; flex:0 0 auto; }

/* Ajuste de alturas en móvil */
@media (max-width:576px){
  .search-panel .form-control,
  .search-panel .form-select,
  .search-panel .btn { height:44px; }
}

/* ================= CHIPS ================= */
.chip{
  position:relative; z-index:1;
  background: rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.6);
  border-radius:999px; padding:.45rem .9rem;
  cursor:pointer; transition:all .15s ease;
}
.chip:hover{ border-color:#0d6efd22; box-shadow:0 4px 12px rgba(13,110,253,.08) }
.chip.active{ background:rgba(13,110,253,.10); border-color:#0d6efd; color:#0d6efd }
.chip:focus-visible{ outline:3px solid rgba(13,110,253,.35); outline-offset:2px }

/* ================= MISC ================= */
.icon-round{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:#e7f1ff;color:#0d6efd}
.card{border-radius:1rem}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:#eef5ff;color:#0b5ed7;border-radius:999px;padding:.35rem .75rem;font-weight:600;font-size:.85rem}
.eyebrow i{font-size:1rem}
footer{background:#0b1220}
footer, footer a{color:#cbd5e1}
@media (max-width:576px){ .hero .display-5{font-size:2rem} }

/* Badges (unificado) */
.badge-open{background:#e8f7ee;color:#0f766e;border-radius:12px;padding:2px 8px;font-size:.85rem}
.badge-closed{background:#fee2e2;color:#991b1b;border-radius:12px;padding:2px 8px;font-size:.85rem}

/* Leaflet */
.leaflet-map{ height:420px; border-radius:12px; }
@media (min-width: 992px){ .leaflet-map{ height:520px; } }

/* Popup bonito */
.leaflet-popup-content { margin: 10px 12px; }
.popup-biz h6 { margin:0; font-weight:600; }
.popup-biz small { color:#6b7280; display:block; }
.popup-biz .section { margin-top:.5rem; }
.popup-biz .social-icons .btn-icon{
  width:30px;height:30px;border-radius:999px;display:inline-grid;place-items:center;
  border:1px solid #e6ecf5;background:#fff
}
.popup-biz .social-icons .btn-icon i{ font-size:16px;line-height:1 }

/* --- Card de resultados (base) --- */
.card-result{
  border:1px solid #e9eef5; border-radius:16px; overflow:hidden; background:#fff;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card-result:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(13,110,253,.12) }
.card-result .media{ position:relative; aspect-ratio:16/9; background:#f3f6fb; }
.card-result .media>img{ width:100%; height:100%; object-fit:cover; display:block }
.card-result .media::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.06) 70%);
}
.status-badge{
  position:absolute; top:.75rem; right:.75rem; padding:.35rem .65rem;
  border-radius:999px; font-weight:600; font-size:.75rem;
  backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.55);
}
.status-badge.open   { background:rgba(16,185,129,.16); color:#047857 }
.status-badge.closed { background:rgba(239,68,68,.16);  color:#991b1b }
.card-result .card-body{ padding:.9rem 1rem .5rem }
.card-result h6{ margin:0 0 .15rem }
.card-result small{ color:#6b7280 }
.pill-list{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.45rem }
.pill{ font-size:.75rem; padding:.28rem .6rem; border-radius:999px; border:1px solid #e6ecf5; background:#f9fbff; }
.pill.secondary{ background:#f3f4f6; border-color:#e5e7eb }
.social-icons{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.5rem }
.btn-icon{
  width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
  border:1px solid #e6ecf5; background:#fff; transition:box-shadow .15s ease, transform .15s ease;
}
.btn-icon:hover{ box-shadow:0 6px 16px rgba(13,110,253,.12); transform:translateY(-1px) }
.card-result .card-footer{ background:#fff; border-top:1px solid #eef2f7; padding:.65rem .8rem }
.card-result .btn{ border-radius:12px }
@media (max-width:576px){
  .card-result .card-footer{ display:grid; grid-template-columns:1fr; gap:.5rem }
}

/* --- Card de resultados compacta --- */
.card-result.compact{
  border:1px solid #e9eef5; border-radius:12px; overflow:hidden; background:#fff;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card-result.compact:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(13,110,253,.10); }
.card-result.compact .media{ position:relative; background:#f6f8fc; aspect-ratio: 4/3; }
@media (min-width: 992px){ .card-result.compact .media{ aspect-ratio: 16/10; } }

/* Dot status */
.card-result.compact .status-badge{
  position:absolute; top:.5rem; right:.5rem; padding:0; width:10px; height:10px;
  border-radius:999px; border:2px solid #fff; backdrop-filter:none; background:#ddd;
}
.card-result.compact .status-badge.open{  background:#10b981; }
.card-result.compact .status-badge.closed{ background:#ef4444; }

/* Cuerpo compacto */
.card-result.compact .card-body{ padding:.65rem .75rem .4rem; }
.card-result.compact h6{ margin:0 0 .1rem; font-size:.95rem; font-weight:700; }

/* Multilínea con elipsis (sin errors de linter) */
.line-2{ overflow:hidden; }
@supports (line-clamp: 2){
  .line-2{ line-clamp:2; }
}


.pill-list.tight{ gap:.3rem; margin-top:.35rem }
.pill-list.tight .pill{ font-size:.68rem; padding:.18rem .5rem }

/* Footer compacto con 3 íconos */
.card-result.compact .card-footer{
  background:#fff; border-top:1px solid #eef2f7; padding:.5rem .6rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem;
}
.btn-icon-ghost{
  height:36px; border:1px solid #e6ecf5; border-radius:10px; background:#fff;
  display:grid; place-items:center; color:#0b1220; transition:box-shadow .15s ease, transform .15s ease;
}
.btn-icon-ghost:hover{ box-shadow:0 6px 16px rgba(13,110,253,.12); transform:translateY(-1px) }
.btn-icon-ghost i{ font-size:18px; }

/* Más densidad entre tarjetas */
#listaResultados.row.g-3{ row-gap:.75rem; }

/* ====== Pricing ====== */
.pricing-card .price .currency{font-size:1.1rem;vertical-align:top;}
.pricing-card .price strong{font-size:2.5rem;letter-spacing:-.5px;}
.pricing-card.featured{
  border:2px solid var(--bs-primary);
  box-shadow:0 .75rem 1.5rem rgba(13,110,253,.15);
}


/* Aplica a ambas variantes: normal y compacta */
.card-result .media,
.card-result.compact .media{
  height: var(--card-img-h-sm);
  aspect-ratio: auto;              /* usamos altura fija, no ratio */
  background:#f6f8fc;              /* por si hay PNG/SVG con fondo transparente */
  overflow:hidden;                 /* oculta el exceso al hacer crop */
}
@media (min-width: 992px){
  .card-result .media,
  .card-result.compact .media{
    height: var(--card-img-h-lg);
  }
}

/* La imagen siempre llena ese contenedor con recorte elegante */
.card-result .media>img,
.card-result.compact .media>img{
  width:100%;
  height:100%;
  object-fit:cover;        /* recorte para uniformar */
  object-position:center;  /* centrado del recorte */
}

/* Aplica a ambas variantes: normal y compacta */
.card-result .media,
.card-result.compact .media{
  height: var(--card-img-h-sm);
  aspect-ratio: auto;              /* usamos altura fija, no ratio */
  background:#f6f8fc;              /* por si hay PNG/SVG con fondo transparente */
  overflow:hidden;                 /* oculta el exceso al hacer crop */
}
@media (min-width: 992px){
  .card-result .media,
  .card-result.compact .media{
    height: var(--card-img-h-lg);
  }
}

/* La imagen siempre llena ese contenedor con recorte elegante */
.card-result .media>img,
.card-result.compact .media>img{
  width:100%;
  height:100%;
  object-fit:cover;        /* recorte para uniformar */
  object-position:center;  /* centrado del recorte */
}


/* ===== Sección Categorías (look) ===== */
.secc-categorias {
  position: relative;
  background:
    radial-gradient(900px 500px at 120% -10%, #e8f1ff 0%, rgba(231,241,255,0) 60%),
    radial-gradient(900px 500px at -20% 120%, #e8f1ff 0%, rgba(231,241,255,0) 60%);
}

.panel-filters{
  border-radius: var(--radius);
  border: 1px solid #e9eef5;
}

.map-wrap{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e9eef5;
}
.map-wrap .leaflet-map{ height: 460px; }
@media (min-width: 992px){ .map-wrap .leaflet-map{ height: 560px; } }

.map-legend{
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(255,255,255,.9);
  border: 1px solid #e9eef5;
  padding: .4rem .65rem;
  border-radius: 10px;
  font-size: .85rem;
  color: #334155;
  backdrop-filter: blur(6px);
}

/* ===== Cards compactas en la lista =====
   Ya tienes estilos .card-result.compact en tu CSS.
   Forzamos esa variante y hacemos el pie con 3 iconos. */
.card-result.compact .card-footer{
  grid-template-columns: repeat(3,1fr);
}
.card-result.compact .btn-icon-ghost i{ font-size: 18px; }

/* Opcional: reducir aún más la imagen en móvil */
@media (max-width: 576px){
  :root{
    --card-img-h-sm: 120px;
  }
}


/* ===== POPUP compacto ===== */
.biz-popup .leaflet-popup-content { margin: 8px 10px; }
.leaflet-container .leaflet-popup-close-button { transform: scale(.9); }

.popup-biz.compact { max-width: 300px; }
.popup-biz.compact .popup-img{
  width:100%; height:140px; object-fit:cover; object-position:center;
  border-radius:10px; margin-bottom:.5rem;
}
.popup-biz.compact .hdr{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-bottom:.15rem;
}
.popup-biz.compact .ttl{ margin:0; font-weight:700; font-size:.98rem; }
.popup-biz.compact .dir{ color:#6b7280; display:block; margin-bottom:.25rem; }

.popup-biz.compact .pill-list.tight{ gap:.28rem; }
.popup-biz.compact .pill{ font-size:.68rem; padding:.18rem .5rem; }

.popup-biz.compact .social-icons .btn-icon{ width:28px; height:28px; }
.popup-biz.compact .social-icons .btn-icon i{ font-size:15px; }

.popup-biz.compact .actions{
  margin-top:.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem;
}
.popup-biz.compact .btn-icon-ghost{
  height:34px; border-radius:10px; border:1px solid #e6ecf5; background:#fff;
  display:grid; place-items:center;
}
.popup-biz.compact .btn-icon-ghost i{ font-size:18px; }
.popup-biz.compact .btn-icon-ghost.disabled{ pointer-events:none; opacity:.5; }


/* ========== MOBILE LUXE CARDS ========== */
@media (max-width: 576px){
  :root{
    --card-img-h-sm: 140px; /* un poco más alta para lucir el logo/foto */
  }

  /* Más redondeo, más sombra, toque premium */
  .card-result.compact{
    border-radius: 16px;
    box-shadow: 0 16px 32px rgba(13,110,253,.10);
    border: 1px solid #eef2f7;
  }

  .card-result.compact .media{
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #eef2f7;
  }
  /* brillo sutil en la imagen */
  .card-result.compact .media::before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(0,0,0,0) 40%);
    pointer-events:none;
  }

  /* status: pastilla pequeña + texto (más elegante que solo el “dot”) */
  .card-result.compact .status-badge{
    padding: .25rem .55rem;
    width:auto; height:auto; border:1px solid rgba(255,255,255,.55);
    backdrop-filter: blur(6px);
  }
  .card-result.compact .status-badge.open{  background:rgba(16,185,129,.16); }
  .card-result.compact .status-badge.closed{ background:rgba(239,68,68,.16); }

  /* Tipografía más jerárquica */
  .card-result.compact h6{
    font-size: 1rem; font-weight: 800; letter-spacing: -.2px;
  }
  .card-result.compact small{
    color:#64748b;
  }

  /* Pastillas más finas */
  .pill-list.tight .pill{
    border-color:#e2e8f0; background:#f8fafc;
  }

  /* Footer táctil con etiqueta + icono */
  .card-result.compact .card-footer{
    grid-template-columns: repeat(3,1fr);
    gap:.45rem;
  }
  .btn-icon-ghost{
    display:flex; align-items:center; justify-content:center;
    gap:.35rem; height:42px; font-size:.9rem;
  }
  .btn-icon-ghost i{ font-size:18px; }
}

/* Pulsación sutil al tocar */
.card-result:active{ transform: translateY(0); box-shadow:0 10px 24px rgba(13,110,253,.10) }


/* Skeleton */
.skel-card{
  border:1px solid #e9eef5; border-radius:12px; background:#fff;
  overflow:hidden; animation:skelPulse 1.4s ease-in-out infinite;
}
.skel-media{ height: var(--card-img-h-sm); background:#eef2f7; }
.skel-line{ height:12px; background:#eef2f7; border-radius:999px; margin:.4rem 0; }
@keyframes skelPulse{ 0%{opacity:.65} 50%{opacity:1} 100%{opacity:.65} }