/* =============================================================
   Coliga · responsive.css
   Mobile + tablet overrides. Loads after colors_and_type.css.
   Uses !important to override inline styles in the JSX components.
   Breakpoints:
     ≤ 768px  — phone & small tablet portrait
     ≤ 480px  — narrow phone
   ============================================================= */

@media (max-width: 768px) {

  html, body { overflow-x: hidden; }

  /* ==== Header ==================================================== */
  .site-header-inner {
    padding: 14px 20px !important;
    gap: 10px !important;
  }
  .site-nav { display: none !important; }
  .site-cta-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  .site-header-logo { height: 28px !important; }

  /* ==== Hero — split ============================================== */
  .hero-split {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 64px 20px 56px !important;
  }
  .hero-eyebrow { margin-bottom: 20px !important; }
  .hero-h1 {
    font-size: 44px !important;
    line-height: 1.04 !important;
    margin-bottom: 20px !important;
  }
  .hero-lead {
    font-size: 17px !important;
    margin-bottom: 28px !important;
  }
  .hero-panel {
    min-height: 300px !important;
    padding: 24px !important;
  }
  .hero-panel-logo { height: 64px !important; }

  /* ==== Hero — centered =========================================== */
  .hero-centered { padding: 80px 20px 64px !important; }
  .hero-centered-h1 { font-size: 48px !important; }

  /* ==== Generic section =========================================== */
  .section-pad { padding: 64px 20px 56px !important; }
  .section-head {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
  }
  .section-title { font-size: 24px !important; }
  .section-intro { font-size: 17px !important; line-height: 1.5 !important; }

  /* ==== 3-up tenets / why points ================================== */
  .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .grid-3 > .grid-3-cell {
    padding: 28px 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--border) !important;
  }
  .grid-3 > .grid-3-cell:first-child {
    border-top: none !important;
  }

  /* ==== Criteria — tearsheet + table ============================== */
  .crit-row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .crit-tear { padding: 18px 20px !important; }
  .crit-table tr {
    display: block !important;
    padding: 18px 0 !important;
  }
  .crit-table td {
    display: block !important;
    width: auto !important;
    padding: 4px 0 !important;
  }
  .crit-table td.crit-k { font-size: 11px !important; }
  .crit-table td.crit-v {
    font-size: 19px !important;
    padding: 6px 0 !important;
  }
  .crit-table td.crit-n { font-size: 14px !important; }

  /* ==== Team (WhyUs > Team) ======================================= */
  .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .team-card {
    grid-template-columns: 64px 1fr !important;
    gap: 16px !important;
  }
  .team-card-avatar {
    width: 64px !important;
    height: 64px !important;
    font-size: 22px !important;
  }

  /* ==== Contact =================================================== */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 72px 20px 64px !important;
  }
  .contact-h {
    font-size: 36px !important;
    line-height: 1.08 !important;
  }
  .contact-lead {
    font-size: 17px !important;
    margin-bottom: 24px !important;
  }
  .contact-form { padding: 24px 20px !important; }

  /* ==== Footer ==================================================== */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer-bottom {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .footer-bottom > span:last-child { margin-left: 0 !important; }

  /* ==== Legal pages (privacy, aviso-legal, disclaimer) ============ */
  .page-header-inner {
    padding: 14px 20px !important;
    gap: 12px !important;
  }
  .page-header img { height: 28px !important; }
  main.legal { padding: 64px 20px 64px !important; }
  h1.legal-title { font-size: 36px !important; }
  p.lead-legal { font-size: 17px !important; margin-bottom: 36px !important; }
  h2.legal-h2 {
    font-size: 22px !important;
    margin-top: 40px !important;
  }
  .data-table tr { display: block !important; padding: 14px 0 !important; }
  .data-table td { display: block !important; width: 100% !important; padding: 4px 0 !important; }
  .data-table td.k { padding-bottom: 4px !important; }
  .footer-inner {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 24px 20px !important;
  }
  .footer-inner .spacer { margin-left: 0 !important; }
  .lang-note { font-size: 10px !important; }
}

@media (max-width: 480px) {
  .hero-h1 { font-size: 38px !important; }
  .hero-centered-h1 { font-size: 40px !important; }
  .contact-h { font-size: 28px !important; }
  h1.legal-title { font-size: 28px !important; }
  .site-cta-btn { padding: 7px 10px !important; }
}