/* ==========================================================================
   MIC · Mazatlán International Center — Landing
   mobile.css — capa móvil/tablet (≤899px) + ajustes globales sin media query
   ========================================================================== */

/* ---------- NAV móvil (menú overlay) ---------- */
@media (max-width: 899px) {
  .page-width { width: min(var(--page), calc(100% - 32px)); }
  .section { padding: 80px 0; }

  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    padding: 10px;
    cursor: pointer;
    z-index: 110;
  }
  .nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.3s var(--ease), opacity 0.3s;
  }
  body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-menu {
    position: fixed;
    inset: 0;
    z-index: 105;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease);
  }
  body.menu-open .nav-menu { opacity: 1; pointer-events: auto; }
  .nav-menu a:not(.btn) { font-size: 1.05rem; color: var(--ink); }
  .nav-menu .nav-cta { margin-top: 10px; }

  /* Sin JavaScript el botón ☰ no puede abrir nada: el menú se muestra en línea
     para que la navegación siga existiendo. */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .nav-menu {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    opacity: 1;
    pointer-events: auto;
    background: none;
    padding-top: 10px;
  }
  html:not(.js) .nav-inner { flex-wrap: wrap; justify-content: center; }
}

/* ---------- HERO ---------- */
@media (max-width: 899px) {
  .hero-content { padding: 130px 0 110px; }
  .hero-ctas { flex-direction: column; align-items: stretch; max-width: 340px; margin-inline: auto; }
  .hero-ctas .btn { width: 100%; }
  .scroll-cue { display: none; }
}

/* ---------- DANIEL ---------- */
@media (max-width: 899px) {
  .daniel-grid { grid-template-columns: 1fr; gap: 36px; }
  .daniel-media { max-width: 340px; margin-inline: auto; }
  .daniel-media img { aspect-ratio: 4 / 5; }
}

/* ---------- CIFRAS ---------- */
@media (max-width: 899px) {
  /* Con 6 cifras la rejilla de 2 columnas cierra exacta: ya no hace falta
     que la última ocupe el ancho completo. */
  .cifras-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 40px; }
}

/* ---------- PLANEADOR ---------- */
@media (max-width: 899px) {
  .planner { padding: 28px 20px; margin-top: 40px; }
  .need-group { grid-template-columns: 1fr 1fr; }
  .chip { flex: 1 1 auto; text-align: center; padding: 12px 14px; }
}

/* ---------- EVENTOS ---------- */
@media (max-width: 899px) {
  .eventos-grid { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
  .evento-body { padding: 18px 18px 22px; }
}

/* ---------- ESPACIOS ---------- */
@media (max-width: 899px) {
  .espacios-list { margin-top: 40px; gap: 48px; }
  .espacio { grid-template-columns: 1fr; gap: 20px; }
  .espacio:nth-child(even) img { order: 0; }
  .espacio-montaje { flex-wrap: wrap; }
  .espacio-montaje div { flex: 1 1 30%; }
}

/* ---------- MAZATLÁN ---------- */
@media (max-width: 899px) {
  .mazatlan-bg > img { min-height: 640px; }
  .mazatlan-scrim { background: linear-gradient(180deg, rgba(11, 29, 42, 0.82) 0%, rgba(11, 29, 42, 0.9) 100%); }
  .mazatlan-inner { padding: 90px 0; max-width: 100%; width: min(var(--page), calc(100% - 32px)); margin-inline: auto; }
  .mazatlan-list { max-width: 100%; }
  .mazatlan-extra { padding: 60px 0 70px; }
  .atractivos { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
  /* En táctil no hay hover: el texto va DEBAJO de la foto (encima se encimaba) */
  .atractivo { display: flex; flex-direction: column; }
  .atractivo::after { display: none; }
  .atractivo-txt {
    position: static;
    padding: 10px 12px 13px;
    transform: none;
  }
  .atractivo-txt strong { font-size: 0.95rem; }
  .atractivo-txt span { opacity: 1; transform: none; font-size: 0.76rem; }
}

/* ---------- EL RECINTO DESDE EL AIRE ---------- */
@media (max-width: 899px) {
  .sobrevuelo { margin-top: 36px; }
  /* El texto pasa DEBAJO de la imagen: en pantalla chica no cabe encima
     sin chocar con las flechas ni tapar la toma. */
  .js .sobrevuelo-info {
    position: static;
    padding: 16px 18px 18px;
    background: var(--petroleum);
    border-top: 1px solid var(--line);
  }
  .js .sobrevuelo-media::after { height: 40%; }
  .sobrevuelo-titulo { font-size: 1.25rem; text-shadow: none; }
  .sobrevuelo-pie { font-size: 0.86rem; text-shadow: none; opacity: 0.75; }
  .sobrevuelo-nav { opacity: 1; width: 40px; height: 40px; background: rgba(6, 15, 22, 0.62); }
  .sobrevuelo-prev { left: 10px; }
  .sobrevuelo-next { right: 10px; }
  /* 6 miniaturas no caben: se hacen carrusel horizontal deslizable
     (con el prefijo .js: sin JavaScript la tira está vacía y dejaba una franja) */
  .js .sobrevuelo-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .sobrevuelo-thumbs::-webkit-scrollbar { height: 3px; }
  .sobrevuelo-thumbs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
  .sobrevuelo-thumbs li { flex: 0 0 92px; scroll-snap-align: start; }
}

/* ---------- CONFIANZA ---------- */
@media (max-width: 899px) {
  .confianza-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }
}

/* ---------- ATENCIÓN ---------- */
@media (max-width: 899px) {
  .personas { gap: 20px; margin-top: 40px; }
  .persona { flex: 1 1 100%; max-width: 520px; }
}

/* ---------- VIDEOS Y MODAL ---------- */
@media (max-width: 899px) {
  .video-frame { margin-top: 34px; }
  .video-play svg { width: 54px; height: 54px; padding: 13px; }
  .evento-cifras { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
  .modal-card { padding: 30px 22px 24px; }
}

/* ---------- FOOTER ---------- */
@media (max-width: 899px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-credit { text-align: left; }
}

/* ---------- FAB móvil (solo icono) + barra inferior ---------- */
@media (max-width: 899px) {
  .fab { right: 18px; bottom: 18px; padding: 14px; border-radius: 10px; }
  .fab span { display: none; }
}

/* ==========================================================================
   Móvil pequeño (≤560px)
   ========================================================================== */
@media (max-width: 560px) {
  .section-title { font-size: 1.7rem; }
  .hero-title { font-size: 2.1rem; }
  .hero-sub { font-size: 0.98rem; }
  .eventos-grid { grid-template-columns: 1fr; }
  .cifras-grid { grid-template-columns: 1fr 1fr; }
  .need-group { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .persona .btn { width: calc(50% - 8px); }
  .cierre-ctas .btn { width: 100%; }
  .espacio-montaje div { flex: 1 1 100%; }
  .recorrido { padding-left: 26px; }
}