/* ═══════════════════════════════════════════════════════════════════════════
   Finanzia Consulting — Responsive Styles
   Tablet ≤ 1024px · Mobile ≤ 768px · Small ≤ 480px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet ≤ 1024px ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  :root {
    --text-4xl: 2.75rem;
    --text-3xl: 2.25rem;
    --text-5xl: 3.25rem;
  }

  /* Header: hide CTA button, show hamburger */
  .header__actions .btn { display: none; }
  .menu-toggle { display: flex; }

  /* Offcanvas panel — always in DOM, slides in from right */
  .main-nav {
    position: fixed;
    top: 0; right: 0; left: auto;
    width: min(360px, 85vw);
    height: 100vh;
    height: 100dvh;
    z-index: 310;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    background: var(--c-navy-deep);
    padding: calc(var(--header-h) + var(--sp-8)) var(--sp-6) var(--sp-8);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(.32,0,.67,0),
                visibility 0.35s;
    visibility: hidden;
    pointer-events: none;
    box-shadow: -8px 0 40px rgba(0,0,0,.5);
  }

  .main-nav.nav--open {
    transform: translateX(0);
    transition-timing-function: cubic-bezier(.33,1,.68,1), linear;
    visibility: visible;
    pointer-events: auto;
  }

  /* Nav links inside offcanvas — always dark bg, always white text */
  .main-nav a,
  .header--light .main-nav a {
    width: 100%;
    padding: var(--sp-4) 0;
    font-size: var(--text-base);
    color: rgba(255,255,255,.68);
    border-bottom: 1px solid rgba(255,255,255,.07);
  }

  .main-nav a:last-child { border-bottom: none; }

  .main-nav a:hover,
  .main-nav a.active,
  .header--light .main-nav a:hover,
  .header--light .main-nav a.active {
    color: var(--c-white);
  }

  .main-nav a::after { display: none; }

  /* Hero */
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .hero-visual { max-width: 420px; }

  /* Grids */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-bar__grid { grid-template-columns: repeat(2, 1fr); }

  .stat-item + .stat-item { border-left: none; }
  .stat-item:nth-child(odd) { border-right: 1px solid var(--c-border-light); }
  .stat-item { padding: var(--sp-4) 0; border-top: 1px solid var(--c-border-light); }

  /* Process */
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-steps::before { display: none; }

  /* Contact */
  .contact-layout { grid-template-columns: 1fr; }

  /* Split */
  .split, .split--60-40, .split--40-60 {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  /* Comparison */
  .comparison-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }

  /* Credibility */
  .credibility-block { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}

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

  :root {
    --text-4xl: 2.25rem;
    --text-3xl: 1.875rem;
    --text-2xl: 1.625rem;
    --pad-x:    1rem;
    --header-h: 68px;
  }

  /* Sections */
  .section { padding: var(--sp-16) 0; }
  .section--sm { padding: var(--sp-12) 0; }
  .section--lg { padding: var(--sp-20) 0; }

  /* Hero */
  #hero { padding-bottom: var(--sp-16); }

  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }

  .hero__proof { display: none; }

  .hero-visual { display: none; }

  /* Grids */
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .grid-auto { grid-template-columns: 1fr; }

  .stats-bar__grid { grid-template-columns: repeat(2, 1fr); }

  /* Process */
  .process-steps { grid-template-columns: 1fr; }

  /* Section headers */
  .section-title { font-size: var(--text-2xl); }

  /* Case card */
  .case-card { padding: var(--sp-6); }

  /* Form */
  .form-group--double { grid-template-columns: 1fr; }

  /* CTA actions */
  .cta-block__actions {
    flex-direction: column;
    align-items: center;
  }
  .cta-block__actions .btn { width: 100%; max-width: 340px; justify-content: center; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer__bottom { flex-direction: column; text-align: center; }

  /* Contact form */
  .contact-form { padding: var(--sp-6) var(--sp-4); }

  /* Page hero */
  .page-hero { padding: calc(var(--header-h) + var(--sp-10)) 0 var(--sp-12); }

  /* Stats bar */
  .stats-bar__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Service full cards */
  .service-full__head { padding: var(--sp-6); }
  .service-full__body { padding: var(--sp-6); }
}

/* ── Small ≤ 480px ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  :root {
    --text-4xl: 2rem;
    --text-3xl: 1.75rem;
  }

  /* Stats bar single column */
  .stats-bar__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .stat-item { border: none !important; }
  .stat-item + .stat-item { border-top: 1px solid var(--c-border-light) !important; }

  /* Logo compact */
  .logo__tagline { display: none; }

  /* Credibility */
  .credibility-block {
    padding: var(--sp-6);
    gap: var(--sp-5);
  }

  /* FAQ items */
  .faq-question { padding: var(--sp-4); }
  .faq-answer-inner { padding: var(--sp-3) var(--sp-4) var(--sp-4); }

  /* Buttons */
  .btn--lg { padding: 0.875rem var(--sp-5); font-size: var(--text-sm); }

  /* Hero */
  .hero__actions { gap: var(--sp-2); }
}

/* ── Extra small ≤ 360px ─────────────────────────────────────────────────── */
@media (max-width: 360px) {

  :root {
    --text-4xl: 1.75rem;
    --text-3xl: 1.5rem;
    --text-2xl: 1.375rem;
    --pad-x:    0.875rem;
  }

  /* Allow button text to wrap so it never widens the layout */
  .btn {
    white-space: normal;
    text-align: center;
  }
  .btn--lg { padding: 0.8rem var(--sp-4); }

  /* Label: force it to not overflow */
  .label { letter-spacing: .08em; }

  /* Section titles */
  .section-title { font-size: var(--text-2xl); }

  /* Footer grid */
  .footer__grid { gap: var(--sp-6); }
}