/* ==========================================================================
   GARIANNA INSURANCE — RESPONSIVE
   El menú desplegable (main-nav) ya funciona igual en todos los tamaños,
   así que estas reglas se enfocan en tipografía, grillas y layout.
   ========================================================================== */

/* ---- Pantallas grandes / TV: 1920px+ ---- */
@media (min-width: 1920px) {
  :root {
    --content-max: 1440px;
  }
  .hero-top,
  .product-hero-inner { gap: var(--sp-2xl); }
}

/* ---- Desktop estándar: hasta 1279px ajustes ---- */
@media (max-width: 1279px) {
  .insurance-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
  .process-list { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-lg); }
  .reviews-grid,
  .reviews-skeleton { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Tablet: 768–1023px ---- */
@media (max-width: 1023px) {
  .hero-top { grid-template-columns: 1fr; }
  .hero-visual { max-width: 460px; margin-inline: auto; order: -1; }
  .hero-bottom { max-width: none; }
  .hero-trust { gap: var(--sp-md); }

  .product-hero-inner { grid-template-columns: 1fr; }
  .product-hero-visual { max-width: 340px; margin-inline: auto; order: -1; }

  .content-columns { grid-template-columns: 1fr; }
  .sidebar-card { position: static; }

  .contact-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Móvil: hasta 640px ---- */
@media (max-width: 640px) {
  body { padding-bottom: 72px; }
  .mobile-contact-bar { display: block; }

  .main-nav {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
  }
}

/* ---- Móvil: 320–767px ---- */
@media (max-width: 767px) {
  .insurance-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .process-list { grid-template-columns: 1fr; }
  .reviews-grid,
  .reviews-skeleton { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .form-grid { grid-template-columns: 1fr; }

  .category-tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

  .reviews-summary { flex-direction: column; align-items: flex-start; }
  .review-cta-box { flex-direction: column; text-align: center; align-items: center; }

  h1 { font-size: var(--fs-3xl); }
  .section { padding-block: var(--sp-xl); }
}

/* ---- Móvil muy pequeño: <380px ---- */
@media (max-width: 380px) {
  :root { --gutter: 1rem; }
  .brand-text { font-size: 1.05rem; }
}

/* ---- Header: evitar apretujamiento en pantallas muy angostas ---- */
@media (max-width: 480px) {
  .header-inner { gap: var(--sp-xs); }
  .header-left { gap: 0.5rem; }
  .brand-text span { display: none; }
  .header-actions { gap: 6px; }
  .lang-toggle { padding: 0.5em; }
  .lang-toggle span[data-lang-current] { display: none; }
  .header-actions .btn--primary { padding: 0.6em 0.9em; font-size: 0.72rem; }
}

/* ---- Pantallas muy anchas: contenido de producto no se estira demasiado ---- */
@media (min-width: 2560px) {
  .container { max-width: 1600px; }
  .hero-visual, .product-hero-visual { max-width: 640px; }
}