/* ============================================================
   MOBILE.CSS — Optimización UX/UI para dispositivos móviles
   Breakpoints: 768px (tablet) · 480px (phone) · 360px (small)
============================================================ */

/* ══════════════════════════════════════
   GLOBAL
══════════════════════════════════════ */
@media (max-width: 768px) {

  /* Spacing general más compacto */
  .section-pad { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .container    { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* Tipografía fluida */
  body { font-size: 15px; }

  /* Botones más altos y fáciles de tocar */
  .btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn--lg { font-size: 14px; padding: 14px 24px; }

}


/* ══════════════════════════════════════
   SPLASH SCREEN
══════════════════════════════════════ */
@media (max-width: 480px) {
  #splash-logo img  { width: 80px; height: 80px; }
  #splash-text span { font-size: 10px; }
  #splash-text strong { font-size: 18px; }
}


/* ══════════════════════════════════════
   NAV MOBILE
══════════════════════════════════════ */
@media (max-width: 768px) {

  /* Ocultar info de contacto en nav — ocupa espacio innecesario */
  .nav__contact-info { display: none; }

  /* Nav inner más compacto */
  .nav__inner { padding: 0 1.25rem; height: 60px; }

  /* Logo text solo una línea en mobile */
  .nav__logo-text span:first-child { display: none; }
  .nav__logo-text span:last-child  {
    font-size: 15px;
    font-weight: 700;
  }

  /* Menú móvil mejorado */
  .nav__mobile {
    padding: 5rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .nav__mobile-link {
    padding: 1rem 0;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav__mobile .nav__cta {
    margin-top: 1.5rem;
    text-align: center;
    padding: 14px;
    font-size: 15px;
  }

}


/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
@media (max-width: 768px) {

  .hero { min-height: 88vh; }
  .hero__content { padding: 5rem 1.25rem 2.5rem; }

  .hero__eyebrow { font-size: 10px; }

  .hero__title {
    font-size: clamp(2.8rem, 12vw, 4.5rem) !important;
    line-height: 1.05;
  }

  .hero__subtitle {
    font-size: 14px;
    line-height: 1.65;
    max-width: none;
  }

  /* Botones en columna, ancho completo */
  .hero__actions {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .hero__scroll-hint { display: none; }

  /* Stats — 2x2 más compacto */
  .hero__stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero__stat { padding: 1rem; }
  .hero__stat-num { font-size: 1.4rem; }
  .hero__stat-label { font-size: 10px; }

  /* Ticker más rápido en mobile */
  .hero__ticker-track { animation-duration: 20s; }

}


/* ══════════════════════════════════════
   ABOUT — Video + texto
══════════════════════════════════════ */
@media (max-width: 768px) {

  /* Video arriba, texto abajo */
  .about__grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }

  /* Video 16:9 en mobile — más proporcional */
  .about__video-wrap { aspect-ratio: 16/9 !important; }

  .about__tag    { font-size: 11px; }
  .about__title  { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }
  .about__text   { font-size: 14px; }

  /* Botones columna */
  .about__grid .btn { width: 100%; justify-content: center; }

}


/* ══════════════════════════════════════
   CARDS DE MUSEOS
══════════════════════════════════════ */
@media (max-width: 768px) {

  /* 2 columnas en tablet */
  .museos__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }

  .museos__eyebrow { font-size: 10px; }
  .museos__title   { font-size: clamp(1.5rem, 6vw, 2rem) !important; }

  /* Header sin flex-row en mobile */
  .museos .container > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem;
  }
  .museos__desc { display: none; } /* Descripción solo desktop */

  /* Cards más compactas */
  .mc__img { aspect-ratio: 3/4; }
  .mc__body { padding: 12px 12px 16px; }
  .mc__name { font-size: 13px; }
  .mc__desc { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mc__overlay-title { font-size: clamp(0.9rem, 3.5vw, 1.1rem); padding: 14px 12px 0; }

}

@media (max-width: 420px) {
  /* 1 columna en teléfonos pequeños */
  .museos__grid { grid-template-columns: 1fr !important; }
  .mc__img { aspect-ratio: 4/3; }
}


/* ══════════════════════════════════════
   MAPA INTERACTIVO
══════════════════════════════════════ */
@media (max-width: 768px) {

  /* Stack: mapa arriba, sidebar abajo */
  .mi-wrap {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .mi-map-area { width: 100%; border-radius: 0; }

  /* Sidebar debajo del mapa, horizontal scroll */
  .mi-sidebar {
    width: 100% !important;
    max-height: 220px;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  #ml-list { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0; padding-bottom: 0.5rem; }
  #ml-list li { flex: 0 0 200px; border-bottom: none !important; border-right: 1px solid rgba(255,255,255,0.06); }

  /* Filtros scrolleables horizontal */
  .mi-filters {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }
  .mi-filters::-webkit-scrollbar { display: none; }
  .mf-btn { white-space: nowrap; flex-shrink: 0; font-size: 11px; padding: 5px 10px; }

  /* Header del mapa */
  .mi-header {
    flex-direction: column !important;
    gap: 1rem;
    align-items: flex-start;
  }
  .mi-title { font-size: clamp(1.4rem, 6vw, 2rem); }
  .mi-desc  { font-size: 13px; }

  /* Panel glassmorphism — pantalla completa en mobile */
  #mp-panel {
    width: calc(100% - 2rem) !important;
    max-width: none !important;
    left: 1rem !important;
    right: 1rem !important;
    bottom: 1rem !important;
    top: auto !important;
  }

  /* Strip stats más compacta */
  .mi-strip { gap: 0; }
  .mi-strip__item { padding: 0.75rem 1rem; font-size: 12px; }
  .mi-strip__ico  { font-size: 1.2rem; }

}


/* ══════════════════════════════════════
   PRECIOS
══════════════════════════════════════ */
@media (max-width: 768px) {

  /* Cards de precio en scroll horizontal — UX más fluida */
  .precios__grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 1rem;
    scrollbar-width: none;
  }
  .precios__grid::-webkit-scrollbar { display: none; }

  .precio-card {
    flex: 0 0 220px;
    scroll-snap-align: start;
  }

  /* Hint de scroll para precios */
  .precios__grid::after {
    content: '';
    flex: 0 0 1px; /* spacer */
  }

  .precios__note { font-size: 12px; }
  .precios__title { font-size: clamp(1.6rem, 7vw, 2.5rem); }

}


/* ══════════════════════════════════════
   TIMELINE HORIZONTAL
══════════════════════════════════════ */
@media (max-width: 768px) {

  .htl-header { padding-top: 3rem; padding-bottom: 2rem; }
  .htl-title   { font-size: clamp(1.8rem, 8vw, 3rem); }
  .htl-subtitle { font-size: 12px; }

  /* Cards más angostas para ver que hay más */
  .htl-card          { flex: 0 0 260px; width: 260px; height: 420px; }
  .htl-card--featured { flex: 0 0 300px; width: 300px; }

  /* Hint más visible */
  .htl-scroll-hint__text { font-size: 12px; color: rgba(255,255,255,0.5); }

  /* Padding del track */
  .htl-track { padding-left: 1.25rem; padding-right: 1.25rem; }

}


/* ══════════════════════════════════════
   QUÉ OFRECEMOS
══════════════════════════════════════ */
@media (max-width: 768px) {

  .ofrecemos__grid { gap: 2rem !important; }

  /* Imagen más pequeña */
  .ofrecemos__img-wrap { max-height: 280px; overflow: hidden; border-radius: 16px; }
  .ofrecemos__img-wrap img { width: 100%; height: 280px; object-fit: cover; }

  .ofrecemos__title { font-size: clamp(1.4rem, 6vw, 2rem); }
  .ofrecemos__item  { gap: 0.75rem; }
  .ofrecemos__item-num { font-size: 2rem; }
  .ofrecemos__item-desc { font-size: 13px; }

  .btn--naranja { width: 100%; justify-content: center; }

}


/* ══════════════════════════════════════
   CÓMO VISITAR
══════════════════════════════════════ */
@media (max-width: 768px) {

  .visit__header { flex-direction: column !important; align-items: flex-start !important; gap: 1rem; }
  .visit__header .btn { width: 100%; justify-content: center; }
  .visit__title { font-size: clamp(1.4rem, 6vw, 2rem); }

  /* Steps en 2 col */
  .visit__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem; }
  .visit__step-num { font-size: 2.5rem; }
  .visit__step-title { font-size: 14px; }
  .visit__step-desc  { font-size: 12px; }

}

@media (max-width: 420px) {
  .visit__grid { grid-template-columns: 1fr !important; }
}


/* ══════════════════════════════════════
   MUSEOS 360°
══════════════════════════════════════ */
@media (max-width: 768px) {

  .tours__title { font-size: clamp(1.4rem, 6vw, 2rem); }

  /* Tours en columna */
  .tours__grid { grid-template-columns: 1fr !important; gap: 8px; }

  .tour__item { padding: 1rem 1.25rem; }
  .tour__item-name { font-size: 14px; }
  .tour__item-sub  { font-size: 11px; }

}


/* ══════════════════════════════════════
   FAQ — Accordion en mobile
══════════════════════════════════════ */
@media (max-width: 768px) {

  .faq__title { font-size: clamp(1.4rem, 6vw, 2rem); }

  /* Columna única */
  .faq__grid { grid-template-columns: 1fr !important; gap: 0; }

  /* Cada item es un accordion */
  .faq__item {
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 0 !important;
    overflow: hidden;
  }

  .faq__q {
    cursor: pointer;
    padding: 1.1rem 1rem;
    font-size: 14px;
    font-weight: 600;
    position: relative;
    padding-right: 2.5rem;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Ícono de toggle */
  .faq__q::after {
    content: '+';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 300;
    color: var(--c-azul);
    transition: transform 0.25s ease;
    line-height: 1;
  }
  .faq__item.open .faq__q::after {
    transform: translateY(-50%) rotate(45deg);
  }

  .faq__a {
    max-height: 0;
    overflow: hidden;
    font-size: 13px;
    padding: 0 1rem;
    color: #666;
    line-height: 1.7;
    transition: max-height 0.35s ease, padding 0.25s ease;
  }
  .faq__item.open .faq__a {
    max-height: 300px;
    padding: 0 1rem 1.1rem;
  }

}


/* ══════════════════════════════════════
   APP
══════════════════════════════════════ */
@media (max-width: 768px) {

  .app__grid { grid-template-columns: 1fr !important; text-align: center; }
  .app__img-wrap { display: none; } /* Ocultar imagen de teléfono en mobile */

  .app__title { font-size: clamp(1.4rem, 6vw, 2rem); }
  .app__desc  { font-size: 14px; }
  .app__eyebrow { justify-content: center; }

  /* Botones de stores centrados */
  .app__btns {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .app__store-btn { width: 100%; max-width: 260px; justify-content: center; }

}


/* ══════════════════════════════════════
   CONTACTO
══════════════════════════════════════ */
@media (max-width: 768px) {

  .contacto__grid { grid-template-columns: 1fr !important; gap: 2rem; }
  .contacto__title { font-size: clamp(1.4rem, 6vw, 2rem); }
  .contacto__desc  { font-size: 14px; }

  /* Botón ticket ancho completo */
  .contacto__grid .btn--primary { width: 100%; justify-content: center; }

  .contacto__info-item { font-size: 13px; gap: 0.6rem; }

  /* Mapa altura reducida */
  .contacto__map--full { min-height: 280px !important; }
  .contacto__map--full iframe { min-height: 280px !important; }

}


/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
@media (max-width: 768px) {

  .footer__top--simple {
    grid-template-columns: 1fr !important;
    gap: 2rem;
    text-align: center;
  }

  .footer__logo { justify-content: center; }
  .footer__social { justify-content: center; }
  .footer__nav { align-items: center; }
  .footer__hours-item { justify-content: center; }
  .footer__top--simple > div:last-child { display: flex; flex-direction: column; align-items: center; }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
    font-size: 11px;
  }

  /* Más espacio al fondo por el FAB */
  .footer { padding-bottom: 5rem; }

}


/* ══════════════════════════════════════
   FAB — Ticket flotante
══════════════════════════════════════ */
@media (max-width: 768px) {

  /* En mobile, siempre expandido abajo al centro */
  .fab-ticket {
    bottom: 1rem !important;
    right: 1rem !important;
    left: auto !important;
    padding: 13px 20px !important;
    gap: 8px !important;
  }
  .fab-ticket .fab-ticket__label {
    max-width: 140px !important;
    opacity: 1 !important;
  }

}


/* ══════════════════════════════════════
   ACCORDION FAQ — JavaScript
══════════════════════════════════════ */
/* Los estilos de accordion están arriba, el JS está abajo como inline */