/* mobile.css — TODOS los media queries del sitio */

/* ═══════════════════════════════════════════════════════
   BUG ADICIONAL — Overflow horizontal global
   ═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .section-full, section {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* ═══════════════════════════════════════════════════════
   BREAKPOINT PRINCIPAL — 900px
   ═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Navbar ── */
  nav { padding: 1.2rem 2rem; }
  .nav-links { display: none; }
  .hamburger { display: flex; }

  /* ─── MEJORA 1 — Navbar logo en 1 línea ─── */
  .nav-logo {
    font-size: 0.62rem !important;
    letter-spacing: 0.18em !important;
    white-space: nowrap !important;
  }

  /* ── Layout general ── */
  section { padding: 5rem 2rem; }

  /* ─── MEJORA 3 — Experiencias: reducir espacio superior ─── */
  #experiencias { padding-top: 3.5rem !important; }

  /* ─────────────────────────────────────────────────────
     BUG 1 FIX — Hero: texto cortado por la izquierda
     Diagnóstico: .hero-content tenía padding 0 2rem en desktop y
     .hero-title usaba clamp(3.5rem, 8vw, 7rem) — mínimo 3.5rem (56px)
     era demasiado grande para iPhone SE (375px).
     hero-bg usa scale(1.12) pero overflow:hidden en #hero lo contiene.
  ───────────────────────────────────────────────────── */
  #hero {
    overflow-x: hidden;
  }
  #hero .hero-content {
    padding: 0 1.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    /* Cancelar el transform inicial de la animación fadeUp en móvil
       para evitar que un translateY cause scroll horizontal */
    transform: none;
    opacity: 1;
    animation: none;
  }
  #hero .hero-title {
    font-size: clamp(2.2rem, 8vw, 2.8rem);
    word-break: break-word;
    line-height: 1;
  }
  #hero .hero-subtitle {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
  }
  #hero .hero-phrase {
    padding: 0 0.5rem;
    max-width: 100%;
    font-size: 0.8rem;
  }
  #hero .btn-primary {
    display: block;
    width: calc(100% - 3rem);
    max-width: 280px;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
  }

  /* ─────────────────────────────────────────────────────
     BUG 3 FIX — Historia: columna derecha tapada por FABs
     Diagnóstico: #historia usa grid 2 columnas.
     En móvil debe colapsar a 1 columna y tener espacio
     suficiente para no solaparse con el FAB bottom bar.
  ───────────────────────────────────────────────────── */
  #historia {
    grid-template-columns: 1fr;
    gap: 3rem;
    /* max-width deja espacio de 60px para los FABs laterales */
    max-width: calc(100% - 0px);
    padding-right: 2rem;
    padding-left: 2rem;
  }

  /* ── Scroll reveal — desactivar en móvil para no bloquear contenido ── */
  .sr-hidden {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  section:not(#hero) {
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── Experiencias ── */
  .exp-card { grid-template-columns: 2rem 1fr; gap: 0 1rem; }
  .exp-card-right { grid-column: 2; }

  /* ─────────────────────────────────────────────────────
     BUG 2 FIX — Catas Mensuales: grid 3 columnas no colapsa
     Diagnóstico: las tarjetas usan inline style
     style="display:grid;grid-template-columns:repeat(3,1fr);gap:2px"
     Solo !important puede sobrescribir inline styles.
  ───────────────────────────────────────────────────── */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Tarjetas individuales dentro del grid */
  [style*="grid-template-columns:repeat(3,1fr)"] > div,
  [style*="grid-template-columns: repeat(3, 1fr)"] > div {
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  /* ─────────────────────────────────────────────────────
     BUG 6 FIX — "El whisky no se bebe con prisa": CTA fuera
     Diagnóstico: grid-template-columns:1fr auto — en móvil el
     botón "auto" ocupa 247px y empuja el texto a 127px.
  ───────────────────────────────────────────────────── */
  [style*="grid-template-columns:1fr auto"],
  [style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 2.5rem 1.5rem !important;
  }
  [style*="grid-template-columns:1fr auto"] a,
  [style*="grid-template-columns:1fr auto"] button,
  [style*="grid-template-columns: 1fr auto"] a,
  [style*="grid-template-columns: 1fr auto"] button {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* ─────────────────────────────────────────────────────
     BUG 5 FIX — Gift Card: grid 2 columnas muy angosto
     Diagnóstico: el div usa inline style grid-template-columns:1fr 1fr
     con gap:3rem — en viewport ~535px las columnas quedan de ~100px.
  ───────────────────────────────────────────────────── */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* ── Videos ── */
  .videos-grid { grid-template-columns: 1fr; }
  #videos [style*="grid-template-columns:1.6fr"],
  #videos [style*="grid-template-columns: 1.6fr"] {
    grid-template-columns: 1fr !important;
  }
  .video-featured { grid-column: 1; aspect-ratio: 16/9; }
  #videos .section-full,
  [id="videos"] > div > div:first-of-type {
    grid-template-columns: 1fr !important;
  }

  /* ── Galería ── */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 3px;
  }
  /* Reset todos los spans desktop */
  :is(.gallery-item,
      .gallery-item:nth-child(1),
      .gallery-item:nth-child(5),
      .gallery-item:nth-child(9),
      .gallery-item:first-child) {
    grid-column: span 1;
    grid-row: span 1;
    min-height: 160px;
    aspect-ratio: 1;
  }
  /* Primera foto: ancho completo */
  .gallery-item:first-child {
    grid-column: span 2;
    aspect-ratio: 16/9;
    min-height: 200px;
  }

  /* ── Ubicación ── */
  .ubicacion-inner { grid-template-columns: 1fr; }

  /* ── Footer ── */
  footer { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 2rem; }
  .footer-bottom { flex-direction: column; gap: 1rem; padding: 1.5rem 2rem; }

  /* ── Chatbot ── */
  #chatbot-panel { width: calc(100vw - 3rem); right: 1.5rem; }

  /* ── Menú ── */
  .menu-tabs { overflow-x: auto; }

  /* ── Lightbox ── */
  #lightbox-prev { left: 0.5rem; }
  #lightbox-next { right: 0.5rem; }

  /* ─────────────────────────────────────────────────────
     BUG 4 FIX — FABs (Instagram/Facebook/YouTube/WhatsApp/Chatbot)
     tapan contenido en todas las secciones en móvil.
     Diagnóstico: #fab-column tiene position:fixed; right:2.5rem;
     con flex-direction:column y z-index:2000 — ocupa toda la altura
     lateral derecha y solapa el texto.
     Fix: mover a barra horizontal fija en la parte inferior.
  ───────────────────────────────────────────────────── */
  #fab-column {
    /* Barra inferior centrada */
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    /* Fila horizontal */
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8px !important;
    /* Fondo */
    background: rgba(10, 8, 6, 0.95) !important;
    border-top: 1px solid rgba(201,168,76,0.15) !important;
    padding: 8px 16px !important;
    border-radius: 0 !important;
    backdrop-filter: blur(12px) !important;
    z-index: 9000 !important;
    /* Soporte área segura iPhone (notch / home indicator) */
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
  #fab-column a,
  #fab-column button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
  /* Chatbot panel: abre hacia arriba sobre la barra FAB */
  #chatbot-panel {
    bottom: 70px !important;
    right: 1rem !important;
    width: calc(100vw - 2rem) !important;
    max-height: calc(100vh - 120px) !important;
  }
  /* Chatbot button: inline style width/height 52px → 40px en FAB bar */
  #chatbot-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
  }
  /* ─── MEJORA 2 — Hero CTA: fondo sólido dorado para mayor visibilidad ─── */
  #hero .btn-primary {
    background: var(--gold) !important;
    color: var(--black) !important;
    border-color: var(--gold) !important;
    font-weight: 600 !important;
  }
  #hero .btn-primary:active {
    background: var(--gold-dark) !important;
    border-color: var(--gold-dark) !important;
  }

  /* ─── MEJORA 4 — Menu tabs: más visibles ─── */
  .menu-tabs {
    background: rgba(10,8,6,0.6) !important;
    border-bottom: 1px solid rgba(201,168,76,0.2) !important;
    padding: 0.5rem !important;
    gap: 4px !important;
    display: flex !important;
  }
  .menu-tab {
    background: rgba(201,168,76,0.07) !important;
    border: 1px solid rgba(201,168,76,0.15) !important;
    border-radius: 4px !important;
    color: var(--text-muted) !important;
    flex: 1 !important;
    text-align: center !important;
  }
  .menu-tab.active {
    background: rgba(201,168,76,0.18) !important;
    border-color: rgba(201,168,76,0.6) !important;
    color: var(--gold) !important;
  }

  /* ─── MEJORA 5 — Videos: thumbnails secundarios ancho completo ─── */
  [style*="grid-template-columns:1.6fr 1fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  [style*="grid-template-columns:1.6fr 1fr 1fr"] > div,
  [style*="grid-template-columns: 1.6fr 1fr 1fr"] > div {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
  }

  /* ─── MEJORA 6 — Reseñas: estrellas más grandes ─── */
  #resenas [style*="gap:3px"] svg,
  #resenas [style*="gap: 3px"] svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* ─── MEJORA 7 — Footer: ocultar link redundante "Sitio Web" ─── */
  .footer-col:last-child li:last-child {
    display: none !important;
  }

  /* Padding inferior en body para que el FAB no tape el último contenido */
  body {
    padding-bottom: 60px !important;
  }
  /* Padding inferior extra en cada sección para CTAs visibles */
  section,
  #experiencias,
  #historia,
  #menu,
  #galeria,
  #resenas,
  #ubicacion,
  footer {
    padding-bottom: 5rem;
  }
}

/* ═══════════════════════════════════════════════════════
   TIPOGRAFÍA MÓVIL — < 900px
   ═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Hero ── */
  .hero-eyebrow { font-size: 0.7rem; letter-spacing: 0.2em; }
  .hero-phrase  { font-size: 0.9rem; }
  .scroll-indicator { font-size: 0.65rem; }

  /* ── Section headers ── */
  .section-label { font-size: 0.68rem; letter-spacing: 0.22em; }

  /* ── Botones ── */
  .btn-primary { font-size: 0.7rem; padding: 0.9rem 2rem; letter-spacing: 0.22em; }

  /* ── Experiencias ── */
  .exp-price { font-size: 0.8rem; }
  .exp-tag   { font-size: 0.68rem; padding: 0.25rem 0.6rem; }

  /* ── Menú / Carta ── */
  .menu-tab { font-size: 0.68rem; padding: 0.6rem 0.9rem; letter-spacing: 0.12em; }
  .menu-item-info p, .menu-note { font-size: 0.78rem; line-height: 1.65; }

  /* ── Videos ── */
  .video-label { font-size: 0.75rem; }

  /* ── Footer ── */
  .info-row strong { font-size: 0.76rem; }
  .footer-brand p  { font-size: 0.75rem; }
  .footer-col h4   { font-size: 0.68rem; letter-spacing: 0.2em; }
  .footer-bottom p { font-size: 0.7rem; }
  .social-links a  { font-size: 0.7rem; }

  /* ── Chatbot ── */
  .chat-header p { font-size: 0.72rem; }
  .quick-reply   { font-size: 0.72rem; padding: 0.45rem 0.9rem; }

  /* ── Preloader ── */
  .pl-eyebrow  { font-size: 0.58rem; letter-spacing: 0.3em; }
  .pl-subtitle { font-size: 0.62rem; }

  /* ── Mobile menu ── */
  .mobile-menu-eyebrow { font-size: 0.58rem; }
  .mobile-nav-link     { font-size: 0.72rem; padding: 0.7rem 0; }
  .mobile-nav-link::before { font-size: 0.52rem; }
  .mobile-social       { font-size: 0.62rem; }
}

/* ═══════════════════════════════════════════════════════
   EXTRA PEQUEÑO — 480px
   ═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .section-label   { font-size: 0.72rem; }
  .hero-eyebrow    { font-size: 0.72rem; }
  .btn-primary     { font-size: 0.72rem; }
  .menu-tab        { font-size: 0.7rem;  }
  .exp-tag         { font-size: 0.7rem;  }
  .quick-reply     { font-size: 0.75rem; }
  .footer-col h4   { font-size: 0.7rem;  }
  .footer-bottom p { font-size: 0.72rem; }
}

/* ═══════════════════════════════════════════════════════
   TOUCH INTERACTIONS — Solo dispositivos sin hover real
   ═══════════════════════════════════════════════════════ */
@media (hover: none) {

  * { cursor: auto !important; }
  #cursor-dot, #cursor-ring { display: none !important; }

  /* Exp cards — tap feedback */
  .exp-card:active {
    transform: scale(0.98);
    border-color: rgba(201,168,76,0.4);
    transition: transform 0.15s ease, border-color 0.15s ease;
  }

  /* Botones — press feedback */
  .btn-primary:active {
    transform: scale(0.97);
    opacity: 0.9;
    transition: transform var(--transition-fast);
  }

  /* Nav links mobile */
  .mobile-nav-link:active {
    color: var(--gold);
    padding-left: 8px;
    transition: color 0.1s, padding-left 0.1s;
  }

  /* Menu tabs */
  .menu-tab:active {
    background: rgba(201,168,76,0.15);
    color: var(--gold);
    transition: background 0.1s, color 0.1s;
  }

  /* Quick reply chips */
  .quick-reply:active {
    background: rgba(201,168,76,0.2);
    border-color: var(--gold);
    transition: background 0.1s, border-color 0.1s;
  }

  /* Gallery tap feedback */
  .gallery-item:active::after { background: rgba(10,8,6,0.35); }
  .gallery-item:active img    { transform: scale(1.03); transition: transform 0.2s ease; }

  /* FAB buttons tap */
  .social-float-btn:active { transform: scale(0.94) !important; }
  a[href*="wa.me"]:active  { transform: scale(0.94); transition: transform var(--transition-fast); }

  /* Deshabilitar hover CSS animations en touch */
  .gallery-item:hover img       { transform: none; }
  .gallery-item:hover::after    { background: rgba(10,8,6,0); }
  .exp-card:hover               { transform: none; border-color: rgba(201,168,76,0.15); }
  .btn-primary:hover            { transform: none; }
}

/* ═══════════════════════════════════════════════════════
   REDUCE MOTION
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .sr-hidden { opacity: 1; transform: none; transition: none; }
  .sr-line   { width: 60px !important; transition: none !important; }
}