/* ════════════════════════════════════════════════════════════
   Bia Ruta Mundialista 2026 — Optimización Mobile
   ────────────────────────────────────────────────────────────
   GARANTÍA: este archivo NO afecta desktop.
   · TODAS las reglas viven dentro de @media (max-width: …) o @supports.
   · CERO reglas globales (nada de html / body / * a nivel raíz).
   · El único cambio JS asociado es un guard mobile-only en
     initStickyCards (desactiva el apilado sticky en ≤768px).
   Incluye: rediseño de la card de cliente (scroll normal, logo a la
   izquierda + título, tags, botón "Ver detalles" azul, galería en
   mosaico con encabezado), áreas táctiles, scroll de modal, safe-area
   iOS, hero con altura dinámica y limpieza del footer.
════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ═══════════════════════════════════════════════════════
     A. CARD DE CLIENTE → SCROLL NORMAL (estilo referencia)
        El motor sticky no corre en móvil (guard en JS), así que
        convertimos cada card en una sección de scroll normal con
        layout en grid: logo (izq) + info (der), y tags / botones /
        galería a todo el ancho debajo.
  ═══════════════════════════════════════════════════════ */

  /* La barra de progreso sticky no aplica a un scroll normal */
  .biz-progress-wrap { display: none; }

  /* Contenedor: alto natural. !important anula cualquier altura inline en píxeles
     que el motor sticky de escritorio pudiera haber dejado al cruzar el breakpoint
     (rotación / device toolbar). Sin esto, una altura fija más corta que el
     contenido desborda la última card sobre la sección "clientes confían en Bia". */
  #businesses-grid { height: auto !important; }

  .sticky-card {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    row-gap: 0;
    /* Márgenes de seguridad: más aire en los lados y respeto al notch */
    padding-top: 30px;
    padding-bottom: 38px;
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Quitamos cromos del modo sticky que no aplican en scroll normal */
  .sticky-card::before { display: none; }   /* acento Colombia superior */
  .sc-overlay,
  .sc-progress { display: none; }

  /* El panel de contenido desaparece como caja: sus hijos pasan a ser
     items del grid de la card (logo/título/tags/botones se posicionan). */
  .sc-panel-content { display: contents; }

  /* El reveal animado depende de .card-active (que no se activa en móvil):
     forzamos todo el contenido visible. */
  .sc-logo-wrap, .sc-logo-dual,
  .sc-meta-row, .sc-name, .sc-location,
  .sc-highlights, .sc-cta, .sc-ig-btn,
  .sc-gallery-item {
    opacity: 1;
    transform: none;
  }

  /* ── Logo (columna izquierda) ── */
  .sc-panel-visual {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
    width: 100px;
    height: 100px;
    min-height: 0;
    background: transparent;
    flex-shrink: 0;
  }
  .sc-logo-glow,
  .sc-bg-number { display: none; }

  .sc-logo-wrap {
    width: 100%;
    height: 100%;
    padding: 14px;
    border-radius: 20px;
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  /* Logo dual (Andrés): dos logos compactos dentro del recuadro */
  .sc-logo-dual { gap: 5px; }
  .sc-logo-dual-item img {
    width: 44px;
    height: 44px;
    padding: 6px;
    border-radius: 12px;
  }

  /* ── Info (columna derecha): categoría / nombre / ubicación ── */
  .sc-meta-row {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }
  .sc-category {
    font-size: 12px;
    letter-spacing: 0.14em;
  }

  .sc-name {
    grid-column: 2;
    grid-row: 2;
    margin: 6px 0 0;
    font-size: clamp(26px, 7.6vw, 34px);
    line-height: 1.05;
    text-transform: none;          /* título en mixed-case, como la referencia */
    letter-spacing: -0.02em;
    word-break: break-word;
  }

  .sc-divider { display: none; }   /* se reemplaza por la barra de la ubicación */

  .sc-location {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    margin: 12px 0 0;
    border-left: 3px solid var(--bp-brand-500);
    padding-left: 12px;
  }
  .sc-city {
    font-size: 16px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.5);
  }
  .sc-addr { display: none; }

  /* ── Tags (todo el ancho) — mostrar las 3 ── */
  .sc-highlights {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 24px;
    gap: 10px;
  }
  .sc-highlight-tag {
    font-size: 11px;
    padding: 9px 14px;
    border-radius: 999px;            /* pastilla, como la referencia */
    letter-spacing: 0.06em;
  }
  /* El breakpoint de 480px ocultaba la 3ª tag: la volvemos a mostrar */
  .sc-highlight-tag:nth-child(n+3) { display: inline-flex; }

  /* ── Botones (todo el ancho): "Ver detalles" azul + "Instagram" outline ── */
  .sc-actions {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: 16px;
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  /* Mismo aspecto que desktop: fondo oscuro + borde + sombra (heredados de
     la base, sin azul plano). Solo ajustamos tamaño/proporción para móvil. */
  .sc-cta {
    flex: 1 1 0;
    min-height: 50px;
    justify-content: center;
    border-radius: 12px;
    font-size: 14px;
  }
  .sc-ig-btn {
    flex: 0 0 auto;
    min-height: 50px;
    justify-content: center;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 14px;
  }
  /* Interacción como desktop: glow índigo al presionar "Ver detalles",
     borde naranja en "Instagram" (replica el :hover de escritorio en el tap). */
  .sc-cta:hover,
  .sc-cta:active,
  .sticky-card:active .sc-cta {
    background: var(--bp-brand-950);
    border-color: var(--bp-brand-700);
    box-shadow: 2px 2px 6px 0 #07080C, 0 0 1px 2px #000 inset, 0 0 14px rgba(97, 114, 243, 0.25);
    color: #ffffff;
  }
  .sc-ig-btn:hover,
  .sc-ig-btn:active {
    border-color: #e6683c;
    box-shadow: 2px 2px 6px 0 #07080C, 0 0 1px 2px #000 inset, 0 0 14px rgba(220, 39, 67, 0.25);
    color: #ffffff;
  }

  /* ── Galería de fotos: encabezado + mosaico full-width ── */
  .sc-panel-gallery {
    grid-column: 1 / -1;
    grid-row: 6;
    position: static;
    width: auto;
    height: auto;
    min-height: 0;
    margin-top: 26px;
    background: transparent;
    overflow: visible;
  }
  .sc-panel-gallery::before {
    content: "Galería del Lugar";
    display: block;
    font-size: 21px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
  }

  .sc-gallery {
    position: static;
    inset: auto;
    display: grid;
    gap: 8px;
  }
  .sc-gallery-item { border-radius: 14px; }

  /* 1 foto → completa */
  .sc-gallery--1 {
    grid-template-columns: 1fr;
    grid-template-rows: 56vw;
  }
  /* 2 fotos → lado a lado */
  .sc-gallery--2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 40vw;
  }
  /* 3 fotos → 1 grande izq + 2 apiladas der */
  .sc-gallery--3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 30vw 30vw;
  }
  .sc-gallery--3 .sc-gallery-item--0 { grid-row: 1 / 3; }
  /* 4 fotos → mosaico 2×2 */
  .sc-gallery--4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 31vw 31vw;
  }
  /* 5 fotos → 1 ancha arriba + 2×2 debajo */
  .sc-gallery--5 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 29vw);
  }
  .sc-gallery--5 .sc-gallery-item--0 { grid-column: 1 / -1; }


  /* ═══════════════════════════════════════════════════════
     B. AJUSTES GENERALES MÓVIL (modal, footer, táctil)
  ═══════════════════════════════════════════════════════ */

  /* Botón cerrar del modal, más cómodo para el pulgar */
  .modal-close { width: 40px; height: 40px; }

  /* Modal: un solo contexto de scroll (sin scroll anidado en sedes) */
  .modal-locations-grid {
    max-height: none;
    overflow: visible;
  }

  /* Feedback táctil limpio en elementos interactivos */
  .sele-btn,
  .yt-channel-btn,
  .cc-cta-btn,
  .btn-descubrir-hero,
  .modal-close,
  .modal-location-btn,
  .modal-maps-btn,
  .modal-ig-btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Botón "Conocer la Ruta": centrado horizontalmente en móvil
     (en desktop sigue abajo-derecha). Mantiene su posición vertical
     y respeta el safe-area de iOS. */
  .btn-descubrir-hero {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  /* Conserva el centrado durante el hover/tap (el desktop hace translateY) */
  .btn-descubrir-hero:hover {
    transform: translateX(-50%) translateY(-3px);
  }

  /* Footer: ocultar el separador "—" (el slogan se oculta en móvil) */
  .footer-brand-sep { display: none; }

  /* ── Portada (hero): usar el video VERTICAL en móvil ──
     El horizontal (--desktop) se oculta y se muestra el vertical
     (--mobile). El !important sobrescribe el display:none inline que
     mantiene el vertical oculto en desktop. */
  .hero-bg-video--desktop { display: none; }
  .hero-bg-video--mobile  { display: block !important; }
}

/* ════════════════════════════════════════
   Hero con altura dinámica del viewport
   ── Solo móvil. El hero NO participa del cálculo de scroll de las
      cards, así que es seguro. 100dvh evita el salto del video al
      aparecer/ocultarse la barra del navegador.
════════════════════════════════════════ */
@supports (height: 100dvh) {
  @media (max-width: 768px) {
    #hero { height: 100dvh; }
  }
}