/* ═══════════════════════════════════════════════════════
   CLIM VAAR — Mejoras Mobile-First
   Carga después del CSS inline para sobrescribir
   ═══════════════════════════════════════════════════════ */

/* ─── TABLET (1024px) ─────────────────────────────────── */
@media (max-width: 1024px) {
  .w { padding: 0 32px !important; }
  .nav { padding: 0 32px !important; }
  .prod-grid,
  .prod-layout { grid-template-columns: 1fr !important; gap: 48px !important; }
  .img-wrap { position: static !important; }
  .rel-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .specs-grid { grid-template-columns: 1fr !important; }
  .foot-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
}

/* ─── MÓVIL ESTÁNDAR (768px) ──────────────────────────── */
@media (max-width: 768px) {
  /* Tipografía base mejorada para legibilidad móvil */
  body { font-size: 15px; -webkit-text-size-adjust: 100%; }

  /* Padding container */
  .w { padding: 0 18px !important; }
  .nav { padding: 0 14px !important; height: 64px !important; }

  /* Logo y branding */
  .logo { gap: 10px !important; }
  .logo img { height: 40px !important; padding: 2px 6px !important; }
  .logo-sub { display: none !important; }
  .logo-name { font-size: 17px !important; letter-spacing: 0.06em !important; }

  /* TOUCH TARGETS mínimos 44x44px (Apple HIG / Material) */
  .btn-contact {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .btn-main {
    min-height: 48px !important;
    padding: 14px 24px !important;
    font-size: 11px !important;
    width: 100% !important;
    justify-content: center !important;
  }
  .btn-ghost {
    min-height: 48px !important;
    padding: 14px 24px !important;
    font-size: 11px !important;
    width: 100% !important;
    text-align: center !important;
  }
  .nav-back {
    min-width: 44px !important;
    min-height: 44px !important;
    justify-content: center !important;
    font-size: 0 !important;
    gap: 0 !important;
  }
  .nav-back svg { width: 22px !important; height: 22px !important; }

  /* Breadcrumb móvil: scroll horizontal cuando sea largo */
  .bc {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 9px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }
  .bc::-webkit-scrollbar { display: none !important; }
  .bc a, .bc span { white-space: nowrap !important; flex-shrink: 0 !important; }
  .breadcrumb { padding: 80px 0 12px !important; }

  /* Hero / títulos: tamaños responsivos suaves */
  .sec-title { font-size: clamp(38px, 9vw, 56px) !important; line-height: 1 !important; }
  .sec-desc { font-size: 14px !important; }
  .prod-title { font-size: clamp(36px, 8vw, 52px) !important; line-height: 1 !important; }
  .prod-sub { font-size: 18px !important; margin-bottom: 22px !important; }
  .prod-desc { font-size: 14px !important; line-height: 1.75 !important; }

  /* Grids principales: 1 columna en móvil */
  .prod-grid,
  .prod-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
  .img-wrap { position: static !important; }
  .img-main { aspect-ratio: 1/1 !important; }
  .specs-grid { grid-template-columns: 1fr !important; }
  .rel-grid { grid-template-columns: 1fr !important; gap: 1px !important; }

  /* CTA stack vertical en móvil */
  .cta-row { flex-direction: column !important; gap: 10px !important; }
  .cta-row a { width: 100% !important; }

  /* Precio más grande para destacar en móvil */
  .price-box { padding: 18px !important; }
  .price-val { font-size: 30px !important; }

  /* Tabla técnica: más compacta */
  .tech-table td { font-size: 12px !important; padding: 11px 14px !important; }
  .tech-table td:first-child { width: 45% !important; font-size: 9px !important; }

  /* Specs */
  .spec { padding: 12px 14px !important; }
  .spec-v { font-size: 16px !important; }

  /* Footer: stack vertical pero compacto */
  .foot-grid { grid-template-columns: 1fr !important; gap: 32px !important; padding-bottom: 32px !important; }
  .foot-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; text-align: left !important; }
  .foot-brand-p { max-width: 100% !important; }
  footer { padding: 48px 0 24px !important; }

  /* Video placeholder */
  .video-box { padding: 32px 16px !important; }

  /* Mejorar focus visible en móvil (accesibilidad) */
  a:focus-visible, button:focus-visible {
    outline: 2px solid #E01230 !important;
    outline-offset: 3px !important;
  }
}

/* ─── MÓVIL PEQUEÑO (480px) ───────────────────────────── */
@media (max-width: 480px) {
  .w { padding: 0 14px !important; }
  .nav { padding: 0 10px !important; height: 58px !important; }
  .logo img { height: 36px !important; }
  .logo-name { font-size: 15px !important; }
  .btn-contact { padding: 8px 12px !important; font-size: 9px !important; letter-spacing: 0.1em !important; min-height: 38px !important; }

  .sec-title { font-size: clamp(32px, 9vw, 44px) !important; }
  .prod-title { font-size: clamp(30px, 8.5vw, 40px) !important; }
  .prod-sub { font-size: 16px !important; }
  .price-val { font-size: 26px !important; }

  .img-main { aspect-ratio: 4/5 !important; }
  .specs-grid .spec-v { font-size: 15px !important; }

  .breadcrumb { padding: 70px 0 10px !important; }
  .sec-hero { padding: 24px 0 32px !important; }
  .prod-hero { padding: 24px 0 48px !important; }

  /* Tabla técnica más compacta aún */
  .tech-table td { font-size: 11px !important; padding: 9px 12px !important; }
  .tech-table td:first-child { width: 50% !important; font-size: 8.5px !important; letter-spacing: 0.12em !important; }

  /* Footer texto más pequeño */
  footer h5 { font-size: 8.5px !important; margin-bottom: 14px !important; }
  footer a, footer li { font-size: 12px !important; }
}

/* ─── MÓVIL EXTRA PEQUEÑO (360px) ─────────────────────── */
@media (max-width: 360px) {
  .w { padding: 0 12px !important; }
  .logo-name { font-size: 14px !important; }
  .btn-contact { padding: 7px 10px !important; font-size: 8.5px !important; }
  .sec-title, .prod-title { font-size: 30px !important; }
  .price-val { font-size: 24px !important; }
}

/* ─── MEJORAS GLOBALES MÓVIL ──────────────────────────── */

/* Evitar zoom automático en iOS al hacer focus en inputs */
@media (max-width: 768px) {
  input, textarea, select { font-size: 16px !important; }
}

/* Smooth scroll para anclas */
html { scroll-padding-top: 80px; }

/* Mejorar tap-highlight en móviles */
a, button, [role="button"] {
  -webkit-tap-highlight-color: rgba(224, 18, 48, 0.18);
  touch-action: manipulation;
}

/* Prevenir overflow horizontal accidental */
html, body { overflow-x: hidden !important; max-width: 100% !important; }
img, video, iframe { max-width: 100% !important; height: auto; }

/* Reducir motion para usuarios que lo prefieren */
@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;
  }
}

/* Modo oscuro del sistema: ya estamos en oscuro, pero ajustar contraste si pide más */
@media (prefers-contrast: more) {
  body { color: #FFFFFF !important; }
  .prod-desc, .sec-desc, .feat { color: rgba(255,255,255,0.95) !important; }
}