/* ============================================
   RESPONSIVE — overrides para tablets y moviles
   Breakpoints:
     1024px  laptops chicas / tablets landscape
      768px  tablets portrait / phablets
      640px  moviles landscape / phones grandes
      480px  moviles pequenos verticales
   ============================================ */

/* ---------- 1024px — reduce gutter y secciones ---------- */
@media (max-width: 1024px) {
  :root {
    --gutter: calc(20px * var(--density));
    --section-y: calc(100px * var(--density));
  }

  .service-card { padding: 36px; min-height: auto; }
  .freq-card    { padding: 28px; }

  .chile-map__svg-wrap { height: 560px; }
}

/* ---------- 768px — tablets portrait ---------- */
@media (max-width: 768px) {
  :root {
    --gutter: 18px;
    --section-y: 80px;
  }

  body { font-size: 15px; }

  /* Navbar */
  .nav { padding: 14px var(--gutter); }
  .nav__logo { font-size: 18px; gap: 8px; }
  .nav__logo-mark { width: 28px; height: 28px; font-size: 10px; }
  .nav__cta { padding: 8px 14px; font-size: 12px; }

  /* Hero editorial */
  .hero[data-variant="editorial"] .hero__inner {
    padding: 24px var(--gutter) 48px;
    gap: 28px;
  }
  .hero__editorial-top {
    padding-top: 64px;
    flex-direction: column;
    gap: 12px;
  }
  .hero[data-variant="editorial"] .hero__headline { max-width: none; }
  .hero[data-variant="editorial"] .hero__meta {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 24px;
    padding-top: 24px;
  }

  /* Hero split */
  .hero[data-variant="split"] .hero__left {
    padding: 96px var(--gutter) 40px;
  }

  /* Hero poster */
  .hero[data-variant="poster"] .hero__inner {
    padding: 88px var(--gutter) 32px;
    gap: 28px;
  }
  .hero[data-variant="poster"] .hero__img-wrap { min-height: 280px; }
  .hero[data-variant="poster"] .hero__bottom {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  /* Intro */
  .intro__stats { margin-top: 40px; padding-top: 24px; gap: 18px; }

  /* Routes */
  .routes__map { padding: 32px 0; }
  .routes__header { margin-bottom: 48px; }
  .routes__frequencies { margin-top: 48px; gap: 20px; }

  /* Services */
  .service-card { padding: 28px; gap: 24px; }
  .services__header { margin-bottom: 48px; }

  /* Fleet */
  .fleet__header { margin-bottom: 40px; }

  /* Testimonials */
  .testimonial-meta { grid-template-columns: 1fr; gap: 16px; }
  .testimonial-nav { justify-content: flex-start; }

  /* Clients */
  .clients__logos { gap: 24px; }

  /* Contact */
  .contact__header { padding-bottom: 40px; }
  .contact__info { gap: 28px; margin-top: 40px; }
  .contact__phone { font-size: 20px; }
  .contact__whatsapp { padding: 14px 22px; font-size: 14px; }
  .footer-bottom { margin-top: 48px; }

  /* Chile map */
  .chile-map__svg-wrap { height: 440px; }
  .chile-map__readout-value { font-size: 26px; }

  /* Live runs */
  .live-runs__head { margin-bottom: 32px; }

  /* License plate */
  .license-plate-divider { padding: 32px 16px; }
  .license-plate { padding: 6px 20px; }

  /* Logistics ticker */
  .logistics-ticker__label { padding: 12px 16px; font-size: 10px; }
  .logistics-ticker__track { gap: 32px; padding: 12px 16px; }

  /* Truck ribbon */
  .truck-ribbon { padding: 22px 0; }
  .truck-ribbon__track { gap: 56px; }
  .truck-ribbon__icon { width: 48px; height: 32px; }

  /* Marquee */
  .marquee__track { gap: 40px; }

  /* Tweaks panel — full width sticky bottom */
  .tweaks {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
    max-height: 72vh;
  }

  /* Floating truck — reduce size */
  .floating-truck { width: 120px; bottom: 24px; }
}

/* ---------- 640px — phones grandes ---------- */
@media (max-width: 640px) {
  :root {
    --section-y: 64px;
  }

  /* Hero poster bottom a 1col */
  .hero[data-variant="poster"] .hero__bottom {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 18px;
  }
  .hero[data-variant="poster"] .hero__top {
    padding-bottom: 18px;
  }

  /* Intro stats 2col queda bien pero reducimos num */
  .stat__num { font-size: clamp(36px, 10vw, 56px); }

  /* Services */
  .service-card { padding: 24px; gap: 20px; min-height: auto; }
  .service-card__visual { aspect-ratio: 16 / 9; }

  /* Freq cards */
  .freq-card { padding: 24px; }

  /* Contact: whatsapp y telefono apilados */
  .contact__info { grid-template-columns: 1fr 1fr; }
  .contact__title { font-size: clamp(40px, 11vw, 72px); }

  /* Fleet card 1 por fila con peek minimo */
  .truck-card { flex: 0 0 calc(100% - 20px); }
  .fleet__carousel { margin: 0; padding: 0; }

  /* Floating truck mas chico */
  .floating-truck { width: 100px; bottom: 20px; }
}

/* ---------- 480px — phones pequenos ---------- */
@media (max-width: 480px) {
  :root {
    --gutter: 14px;
    --section-y: 52px;
  }

  body { font-size: 14px; }

  /* Navbar super compacto */
  .nav { padding: 12px var(--gutter); }
  .nav__logo-mark { display: none; }
  .nav__cta { padding: 7px 12px; font-size: 11px; }

  /* Hero paddings aun mas chicos */
  .hero[data-variant="editorial"] .hero__inner,
  .hero[data-variant="poster"] .hero__inner {
    padding-top: 72px;
  }
  .hero__editorial-top { padding-top: 40px; padding-bottom: 12px; }
  .hero[data-variant="split"] .hero__left { padding: 80px var(--gutter) 32px; }
  .hero[data-variant="split"] .hero__right { min-height: 40vh; }

  /* Hero meta 1col para leer comodo */
  .hero[data-variant="editorial"] .hero__meta {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  /* Intro */
  .intro__stats { grid-template-columns: 1fr 1fr; gap: 14px; }

  /* Routes stops alineados */
  .stop { padding: 0 4px; }
  .stop__dot { width: 11px; height: 11px; margin-bottom: 12px; }
  .stop--main .stop__dot { width: 16px; height: 16px; }

  /* Contact info 1col */
  .contact__info { grid-template-columns: 1fr; gap: 20px; }
  .contact__cta-wrap { gap: 10px; }
  .contact__whatsapp {
    padding: 12px 18px;
    font-size: 13px;
    gap: 12px;
  }
  .contact__whatsapp-ico { width: 24px; height: 24px; font-size: 12px; }
  .contact__phone { font-size: 18px; }

  /* Clients 2col -> mantenido, ajusta gap */
  .clients__logos { grid-template-columns: 1fr 1fr; gap: 20px; }
  .client-logo { font-size: 18px; }
  .client-logo.mono { font-size: 12px; }

  /* Odometer compacto */
  .odometer { padding: 14px 16px; gap: 8px; }
  .odometer__digits { font-size: clamp(28px, 8vw, 40px); }

  /* Chile map */
  .chile-map__svg-wrap { height: 360px; }
  .chile-map__title { font-size: clamp(36px, 10vw, 56px); }

  /* License plate */
  .license-plate { padding: 6px 16px; }
  .license-plate__main { font-size: clamp(24px, 7vw, 36px); }
  .license-plate__top, .license-plate__bot { font-size: 8px; letter-spacing: 0.25em; }

  /* Logistics ticker aun mas compacto */
  .logistics-ticker { font-size: 11px; }
  .logistics-ticker__label { padding: 10px 12px; font-size: 9px; }

  /* Footer bottom */
  .footer-bottom { font-size: 10px; }

  /* Tweaks panel solo trigger visible */
  .tweaks { right: 8px; left: 8px; bottom: 8px; }
  .tweaks__body { padding: 14px; gap: 16px; }
  .tweaks__header { padding: 12px 14px; }

  /* Truck ribbon mas pequeno */
  .truck-ribbon__item { gap: 16px; }
  .truck-ribbon__icon { width: 40px; height: 28px; }

  /* Floating truck: ocultar completamente para no molestar */
  .floating-truck { display: none; }
}

/* ---------- Accessibility: respetar prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .floating-truck { display: none; }
}

/* ---------- Touch: remover hovers con translate para evitar jitter ---------- */
@media (hover: none) and (pointer: coarse) {
  .btn--primary:hover,
  .service-card:hover,
  .live-run:hover,
  .contact__whatsapp:hover {
    transform: none;
    box-shadow: none;
  }
}