/* ═══════════════════════════════════════════════════════════════
   mobile.css — TODOS los estilos responsive/adaptativos de
   Coffee Transporttees (móvil y tablet). index.html solo debe
   contener estilos base/desktop — cualquier @media nuevo va aquí,
   nunca de vuelta al <style> inline, para no duplicar/confundir.

   Este archivo se enlaza DESPUÉS del <style> inline de index.html
   (justo antes de </head>), así sus reglas ganan el cascade de
   forma natural sin necesitar !important.

   Breakpoints usados (de mayor a menor ancho):
   900px · 860px · 820px · 768px · 700px · 640px · 600px · 560px · 480px
═══════════════════════════════════════════════════════════════ */

/* ── La Ruta del Café — explorador (≤900px) ──────────────────── */
@media (max-width:900px) {
  .route-explorer { width: calc(100% - 2rem); }
  .route-cover { border-radius: 16px; }
  .route-steps { border-radius:16px; }
}

/* ── Navegación: hamburger / menú + grids a 1 columna (≤860px) ── */
@media (max-width:860px) {
  .nav { opacity:1; pointer-events:all; }
  .nav-links, .nav-cta { display:none; }
  .hamburger { display:flex; }
  .fab { display:flex; }
  .nav-logo-img { height:44px; }

  .about-vtc-grid, .mvv-grid, .rules-grid { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { justify-content:center; text-align:center; }
}

/* ── La Ruta del Café — explorador apilado (≤820px) ───────────── */
@media (max-width:820px) {
  .route-steps { grid-template-columns:1fr; aspect-ratio:auto; max-height:none; }
  .route-steps-media { aspect-ratio:16/9; }
}

/* ── Principal ≤768px ────────────────────────────────────────── */
@media (max-width:768px) {

  /* Hero: una sola pantalla, sin pin sticky — el candado gatea el scroll (ver JS) */
  .hero-pin { height:100vh; }
  .hero-sticky { position:relative; }
  .scroll-hint { display:none; }
  .mobile-lock-btn { display:flex; }

  /* Logo y bandera quitados de la vista móvil (probado en columna,
     al cliente no le gustó el resultado) — solo queda la placa
     central, más grande ahora que no tiene que competir por espacio. */
  .side-emblem { display:none; }
  .sign-plaque-bg .plate { width:min(240px, 60vw); height:190px; }
  .door .sign, .sign-plaque-bg { top:40%; }

  /* Vides de café en las esquinas: más visibles en móvil (antes casi
     no se notaban). Sin drop-shadow: son grandes Y se mueven con la
     puerta durante la animación — un filtro de sombra recalculándose
     cuadro a cuadro sobre una imagen grande en movimiento es carga
     real de GPU en un celular y se sentía en la fluidez de la puerta. */
  .vine-corner { width:min(280px, 46vw); opacity:1; filter:none; }

  /* Puertas y letrero con will-change: le avisamos al navegador de
     antemano que van a animar, para que arranque en una capa GPU
     aparte desde el primer frame en vez de crearla a mitad de la
     animación (esa creación tardía es una causa común de tirones) */
  .door { will-change: transform; }
  .hero-vtc-portal { will-change: opacity, transform; }

  /* Flechas de scroll: más grandes y pegadas al texto (antes quedaban
     muy abajo, lejos del letrero). Aparecen junto con el texto del
     portal al abrir las puertas, con un "bob" similar al del candado,
     y se apagan solas apenas el usuario empieza a bajar de verdad
     (ver JS) */
  .scroll-down-cue {
    display:block; position:absolute; top:64%; left:50%; transform:translateX(-50%);
    z-index:6; opacity:0; pointer-events:none; transition:opacity .5s ease;
    will-change: opacity;
  }
  .scroll-down-cue.doors-open { opacity:1; }
  .scroll-down-cue.scroll-cue-hide { opacity:0 !important; }
  .scroll-down-cue-inner {
    display:flex; flex-direction:column; align-items:center;
    animation: scrollCueBob 2s ease-in-out infinite;
  }
  .scroll-down-cue .chevron {
    width:38px; height:20px; color:var(--gold-light); margin-top:-11px;
  }
  .scroll-down-cue .chevron:first-child { margin-top:0; }
  .scroll-down-cue .chevron-2 { opacity:.5; }
  @keyframes scrollCueBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(9px); }
  }

  /* Strip de video en móvil */
  .video-info-strip { font-size:.68rem; padding:.55rem .8rem; }

  /* Stats bar: 2×2 */
  .about-stats-bar { grid-template-columns:repeat(2,1fr); }
  .about-stat-item:nth-child(2) { border-right:none; }
  .about-stat-item:nth-child(3) {
    border-right:1px solid rgba(201,135,42,0.12);
    border-top:1px solid rgba(201,135,42,0.12);
  }
  .about-stat-item:nth-child(4) { border-top:1px solid rgba(201,135,42,0.12); }
  .about-stat-label { font-size:.72rem; }
  .about-stat-detail { font-size:.82rem; }

  /* Plataformas: 2 columnas (1 columna real más abajo, ≤560px) */
  .platforms-grid { grid-template-columns:repeat(2,1fr); }
  .platform-logo-area { height:clamp(120px, 26vw, 130px); }
  .platform-title { font-size:.92rem; }
  .platform-desc { font-size:.78rem; }

  /* Valores: 2 columnas en móvil (eran 4 en desktop) */
  .values-grid { grid-template-columns:repeat(2,1fr); max-width:none; }

  /* Flota: 1 columna */
  .fleet-grid { grid-template-columns:1fr; }

  /* Galería: el auto-scroll sigue activo en móvil (ver JS). Nota: NO
     usar scroll-snap-type aquí — pelea con el scrollLeft incremental
     del auto-scroll (el navegador lo "snapea" de vuelta cada frame y
     el carrusel se queda congelado) */

  /* Footer: labels/targets un poco más grandes para lectura y toque */
  .footer-icon-label { font-size:.76rem; }
  .footer-bottom { font-size:.84rem; }
  .footer-icon-badge { width:44px; height:44px; }

  /* Section label/title: ajuste fluido más agresivo */
  .section-label { font-size:.65rem; }
  .section-title { font-size:clamp(1.5rem,6vw,2.4rem); }
}

/* ── La Ruta del Café — portada en móvil: menos alta para no
   recortar tanto el video del camión (a 16:9 nativo, 4:5 dejaba ver
   solo ~45% del ancho del video; a 4:3 se ve ~75%) y el bloque de
   texto usa el ancho real disponible en vez de encogerse ───────── */
@media (max-width:700px) {
  .route-cover { aspect-ratio: 4/3; max-height: none; }
  .route-hero-block { width:88%; }
  /* Menos alto = menos espacio vertical: achicamos un poco el bloque
     de texto para que no choque con el botón "Descubre la ruta" */
  .route-hero-eyebrow { margin-bottom:.25rem; font-size:.68rem; }
  .route-hero-title { margin-bottom:0; font-size:1.9rem; }
  /* La bajada ("Desde las montañas...") se quita en móvil — tapaba al
     camión de fondo en una portada ya de por sí más baja */
  .route-hero-line { display:none; }
  /* Botón "Descubre la ruta" más delgado y alargado — se veía muy
     grueso y tapaba el camión de fondo */
  .route-cta-btn { padding:.5rem 1.8rem; font-size:.8rem; white-space:nowrap; }
}

/* ── Galería: ocultar flechas (ya no hacen falta, swipe nativo) ── */
@media (max-width:640px) {
  .gallery-arrow { display:none; }
}

/* ── Video strip ≤600px ──────────────────────────────────────── */
@media (max-width:600px) {
  .video-strip { aspect-ratio:4/3; }
}

/* ── Plataformas: 1 columna real (antes se quedaba en 2 y dejaba
   una tarjeta huérfana con 5 items) ──────────────────────────── */
@media (max-width:560px) {
  .platforms-grid { grid-template-columns:1fr; }
}

/* ── Pantallas pequeñas ≤480px ───────────────────────────────── */
@media (max-width:480px) {
  :root { --nav-h:60px; }

  .door .sign { font-size:clamp(1.4rem,5.5vw,2rem); }
  .side-emblem .plaque, .side-emblem-col .plaque { width:min(54px, 15vw); }
  .sign-plaque-bg .plate { width:min(190px, 54vw); height:170px; }
  .cta-group { flex-direction:column; align-items:center; }
  .btn-primary, .btn-outline { width:100%; max-width:280px; justify-content:center; }

  /* Stats bar: 1 columna */
  .about-stats-bar { grid-template-columns:1fr; }
  .about-stat-item:nth-child(2),
  .about-stat-item:nth-child(3),
  .about-stat-item:nth-child(4) {
    border-right:none;
    border-top:1px solid rgba(201,135,42,0.12);
  }

  /* Valores: 1 columna en pantalla muy pequeña */
  .values-grid { grid-template-columns:1fr; }
}

/* ── Modal de Únete: hoja inferior en pantallas angostas ──────── */
@media (max-width:600px) {
  .join-modal { padding:0; align-items:flex-end; }
  .join-modal-panel { max-width:100%; max-height:92vh; border-radius:20px 20px 0 0; padding:2rem 1.3rem 1.6rem; }
  .join-form-row { grid-template-columns:1fr; }
}

/* ── Bloqueo de scroll reutilizable (clases añadidas/quitadas por
   JS): candado del Hero en móvil, y el modal de Únete en cualquier
   tamaño de pantalla — no está dentro de un @media a propósito ─── */
html.scroll-locked, body.scroll-locked { overflow:hidden; height:100%; overscroll-behavior:none; }