/* File: main.css — Foundations & Utilities (kept as the single source of tokens, grid, typography) */

/* ===== Foundations / Utilities – Gradient Health ===== */

/* === Tokens (brand & UI) === */
:root {
  /* Footer (unchanged) */
  --footer-bg:  #0b1020;
  --footer-fg:  #dfe6f9;
  --footer-dim: #b7c2d9;
  --footer-line: rgba(255,255,255,.12);

  /* Brand palette (core) */
  --brand-blue-700:  #455fac; /* deep blue */
  --brand-blue-600:  #3989c9; /* blue */
  --brand-cyan-400:  #66cdec; /* cyan */
  --brand-indigo-700:#5a4fa1; /* indigo */

  /* Role colors */
  --gh-primary:   var(--brand-indigo-700); /* solid primary for buttons, links */
  --gh-secondary: var(--brand-blue-600);   /* supporting accents, links on light */
  --gh-accent:    var(--brand-cyan-400);   /* subtle accents, outlines, chips */
  --gh-deep:      var(--brand-blue-700);   /* headings, strong text tints */

  /* On-colors (text/icons on solid fills) */
  --on-primary:   #ffffff;
  --on-secondary: #0b1020; /* better contrast over blue-600 */
  --on-accent:    #0b1020;

  /* Theme Gradient (CTA) – AA with white text */
  --gh-grad-start: var(--brand-cyan-400);   
  --gh-grad-end:   var(--brand-indigo-700);
  --gh-gradient:   linear-gradient(90deg, var(--gh-grad-start), var(--gh-grad-end));

  /* Text and Surfaces */
  --gh-text:        #6b7280;
  --gh-text-strong: var(--gh-deep);
  --gh-bg:          #F9FAFB;
  --gh-surface:     #F6F8FC;

  --gh-iris:  #9aa6ff;
  --gh-mist:  #eef0ff;
  --gh-blush: #efe8ff;

  /* Radius and Shadows */
  --gh-radius-xl: 24px;
  --gh-radius:    16px;
  --gh-radius-sm: 10px;
  --gh-shadow-sm: 0 10px 30px rgba(0,0,0,.12);

  /* Focus ring */
  --gh-focus: rgba(57,137,201,.35); /* derived from blue-600 */

  /* Typography */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* Base */
html, body { margin: 0; }
section { margin-bottom: 30px;}

/* ================================
   Typography (global elements)
   ================================ */
body {
  font-family: var(--font-sans);
  color: var(--gh-text);
  line-height: 1.6;
}

/* H1 — Page hero title (one per page for SEO) */
h1 {
  color: #ffffff;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 0.75em;
}

/* H2 — Section titles */
h2 {
  color: var(--brand-indigo-700);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 1.25em 0 0.6em;
}

/* H3 — Secondary section titles */
h3 {
  color: var(--brand-blue-600);
  font-weight: 600;
  font-size: 1.333rem;
  line-height: 1.3;
  margin: 1.1em 0 0.55em;
}

/* H4 — Subtitle */
h4 {
  color: #0b1020;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.35;
  margin: 1em 0 0.5em;
}

/* Paragraph */
p {
  color: var(--gh-text);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1em;
}

/* Blockquote */
blockquote {
  color: var(--brand-blue-700);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  margin: 1.25em 0;
  padding-left: 1em;
  border-left: 3px solid var(--brand-blue-700);
}

/* ===========================
   Container & 12-col Grid
   =========================== */
:root {
  --container-padding-x: 16px;
  --grid-gap: 24px;
}
.container {
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
  max-width: 100%;
}
.container-fluid {
  width: 100%;
  margin-inline: 0;
  padding-inline: var(--container-padding-x);
}
@media (min-width: 640px)  { .container { max-width: 640px;  } }
@media (min-width: 768px)  { .container { max-width: 768px;  } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1200px) { .container { max-width: 1200px; } }

.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* Gap utilities */
.g-0  { --grid-gap: 0;   }
.g-8  { --grid-gap: 8px; }
.g-12 { --grid-gap: 12px;}
.g-16 { --grid-gap: 16px;}
.g-24 { --grid-gap: 24px;}
.g-32 { --grid-gap: 32px;}
.g-48 { --grid-gap: 48px;}

.gx-0  { column-gap: 0 !important; }
.gx-8  { column-gap: 8px !important; }
.gx-12 { column-gap: 12px !important; }
.gx-16 { column-gap: 16px !important; }
.gx-24 { column-gap: 24px !important; }
.gx-32 { column-gap: 32px !important; }
.gx-48 { column-gap: 48px !important; }

.gy-0  { row-gap: 0 !important; }
.gy-8  { row-gap: 8px !important; }
.gy-12 { row-gap: 12px !important; }
.gy-16 { row-gap: 16px !important; }
.gy-24 { row-gap: 24px !important; }
.gy-32 { row-gap: 32px !important; }
.gy-48 { row-gap: 48px !important; }

.col { grid-column: 1 / -1; }
.col-auto { width: auto; }

.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
.col-span-full { grid-column: 1 / -1; }

.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-6  { grid-column-start: 6; }
.col-start-7  { grid-column-start: 7; }
.col-start-8  { grid-column-start: 8; }
.col-start-9  { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }

.items-start   { align-items: start; }
.items-center  { align-items: center; }
.items-end     { align-items: end; }
.justify-start { justify-items: start; }
.justify-center{ justify-items: center; }
.justify-end   { justify-items: end; }

/* Responsive columns */
/* sm ≥ 640px */
@media (min-width: 640px) {
  .col-sm        { grid-column: auto; }
  .col-sm-1      { grid-column: span 1; }
  .col-sm-2      { grid-column: span 2; }
  .col-sm-3      { grid-column: span 3; }
  .col-sm-4      { grid-column: span 4; }
  .col-sm-5      { grid-column: span 5; }
  .col-sm-6      { grid-column: span 6; }
  .col-sm-7      { grid-column: span 7; }
  .col-sm-8      { grid-column: span 8; }
  .col-sm-9      { grid-column: span 9; }
  .col-sm-10     { grid-column: span 10; }
  .col-sm-11     { grid-column: span 11; }
  .col-sm-12     { grid-column: span 12; }
  .col-sm-start-1  { grid-column-start: 1; }
  .col-sm-start-2  { grid-column-start: 2; }
  .col-sm-start-3  { grid-column-start: 3; }
  .col-sm-start-4  { grid-column-start: 4; }
  .col-sm-start-5  { grid-column-start: 5; }
  .col-sm-start-6  { grid-column-start: 6; }
  .col-sm-start-7  { grid-column-start: 7; }
  .col-sm-start-8  { grid-column-start: 8; }
  .col-sm-start-9  { grid-column-start: 9; }
  .col-sm-start-10 { grid-column-start: 10; }
  .col-sm-start-11 { grid-column-start: 11; }
  .col-sm-start-12 { grid-column-start: 12; }
}

/* md ≥ 768px */
@media (min-width: 768px) {
  .col-md        { grid-column: auto; }
  .col-md-1      { grid-column: span 1; }
  .col-md-2      { grid-column: span 2; }
  .col-md-3      { grid-column: span 3; }
  .col-md-4      { grid-column: span 4; }
  .col-md-5      { grid-column: span 5; }
  .col-md-6      { grid-column: span 6; }
  .col-md-7      { grid-column: span 7; }
  .col-md-8      { grid-column: span 8; }
  .col-md-9      { grid-column: span 9; }
  .col-md-10     { grid-column: span 10; }
  .col-md-11     { grid-column: span 11; }
  .col-md-12     { grid-column: span 12; }
  .col-md-start-1  { grid-column-start: 1; }
  .col-md-start-2  { grid-column-start: 2; }
  .col-md-start-3  { grid-column-start: 3; }
  .col-md-start-4  { grid-column-start: 4; }
  .col-md-start-5  { grid-column-start: 5; }
  .col-md-start-6  { grid-column-start: 6; }
  .col-md-start-7  { grid-column-start: 7; }
  .col-md-start-8  { grid-column-start: 8; }
  .col-md-start-9  { grid-column-start: 9; }
  .col-md-start-10 { grid-column-start: 10; }
  .col-md-start-11 { grid-column-start: 11; }
  .col-md-start-12 { grid-column-start: 12; }
}

/* lg ≥ 1024px */
@media (min-width: 1024px) {
  .col-lg        { grid-column: auto; }
  .col-lg-1      { grid-column: span 1; }
  .col-lg-2      { grid-column: span 2; }
  .col-lg-3      { grid-column: span 3; }
  .col-lg-4      { grid-column: span 4; }
  .col-lg-5      { grid-column: span 5; }
  .col-lg-6      { grid-column: span 6; }
  .col-lg-7      { grid-column: span 7; }
  .col-lg-8      { grid-column: span 8; }
  .col-lg-9      { grid-column: span 9; }
  .col-lg-10     { grid-column: span 10; }
  .col-lg-11     { grid-column: span 11; }
  .col-lg-12     { grid-column: span 12; }
  .col-lg-start-1  { grid-column-start: 1; }
  .col-lg-start-2  { grid-column-start: 2; }
  .col-lg-start-3  { grid-column-start: 3; }
  .col-lg-start-4  { grid-column-start: 4; }
  .col-lg-start-5  { grid-column-start: 5; }
  .col-lg-start-6  { grid-column-start: 6; }
  .col-lg-start-7  { grid-column-start: 7; }
  .col-lg-start-8  { grid-column-start: 8; }
  .col-lg-start-9  { grid-column-start: 9; }
  .col-lg-start-10 { grid-column-start: 10; }
  .col-lg-start-11 { grid-column-start: 11; }
  .col-lg-start-12 { grid-column-start: 12; }
}

/* xl ≥ 1200px */
@media (min-width: 1200px) {
  .col-xl        { grid-column: auto; }
  .col-xl-1      { grid-column: span 1; }
  .col-xl-2      { grid-column: span 2; }
  .col-xl-3      { grid-column: span 3; }
  .col-xl-4      { grid-column: span 4; }
  .col-xl-5      { grid-column: span 5; }
  .col-xl-6      { grid-column: span 6; }
  .col-xl-7      { grid-column: span 7; }
  .col-xl-8      { grid-column: span 8; }
  .col-xl-9      { grid-column: span 9; }
  .col-xl-10     { grid-column: span 10; }
  .col-xl-11     { grid-column: span 11; }
  .col-xl-12     { grid-column: span 12; }
  .col-xl-start-1  { grid-column-start: 1; }
  .col-xl-start-2  { grid-column-start: 2; }
  .col-xl-start-3  { grid-column-start: 3; }
  .col-xl-start-4  { grid-column-start: 4; }
  .col-xl-start-5  { grid-column-start: 5; }
  .col-xl-start-6  { grid-column-start: 6; }
  .col-xl-start-7  { grid-column-start: 7; }
  .col-xl-start-8  { grid-column-start: 8; }
  .col-xl-start-9  { grid-column-start: 9; }
  .col-xl-start-10 { grid-column-start: 10; }
  .col-xl-start-11 { grid-column-start: 11; }
  .col-xl-start-12 { grid-column-start: 12; }
}

/* Spacing helpers */
.mt-0{margin-top:0}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.py-4{padding-block:16px}.py-6{padding-block:24px}.py-8{padding-block:32px}.py-12{padding-block:48px}
.px-3{padding-inline:12px}.px-4{padding-inline:16px}.px-6{padding-inline:24px}

/* Display & flex */
.d-flex{display:flex}.ai-center{align-items:center}.jc-center{justify-content:center}.jc-between{justify-content:space-between}.gap-3{gap:12px}.gap-4{gap:16px}

/* Background helpers */
.bg-surface{background: var(--gh-surface)}
.bg-gradient{background: var(--gh-gradient)}
.bg-body{background: var(--gh-bg)}

/* =======================
     Buttons (global) 
 ======================= */

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:.5rem;
      --btn-py:10px; --btn-px:16px; --btn-radius:10px;
      padding:var(--btn-py) var(--btn-px);
      border-radius:var(--btn-radius);
      border:1px solid transparent;
      font-weight:600; line-height:1.2; text-decoration:none; font-family: 'Poppins', sans-serif; font-size:1rem;
      cursor:pointer; white-space:nowrap;
      transition:background-color .2s, color .2s, border-color .2s, box-shadow .2s, filter .2s, transform .06s;
      text-decoration: none;
    }
    .btn:hover{ filter:brightness(1.06); }
    .btn:active{ transform:translateY(1px); }
    .btn:focus-visible{
      outline:0;
      box-shadow:0 0 0 3px rgba(0,0,0,.06), 0 0 0 6px rgba(28,38,63,.16);
    }
    .btn:disabled,
    .btn[aria-disabled="true"]{
      opacity:.6; pointer-events:none;
    }

    /* 1) CTA (brand gradient) */
    .btn-cta{
          width: 100%;
          border-radius: 999px;
          padding: 14px 18px;
          font-weight: 700;
          color: #fff;
          background: var(--gh-gradient);
          border: 0;
          box-shadow: 0 10px 26px rgba(28, 38, 63, .16);
          transition: transform .06s ease, box-shadow .18s ease, filter .18s ease;
          text-decoration: none;
      }
    

    /* 2) Solid primary */
    .btn-primary{
      background:var(--gh-primary);
      color:#fff;
      border-color:var(--gh-primary);
      box-shadow:0 6px 24px rgba(28,38,63,.12);
    }

    /* 3) Outlined (light) */
    .btn-outline{
      background:transparent;
      color:var(--gh-text-strong);
      border-color:currentColor;
    }
    .btn-outline:hover{
      /* gentle hover fill without hard-coding brand tones */
      background:rgba(0,0,0,.04);
    }


/* Cards / images / misc */
.card{background:var(--gh-surface); border-radius:var(--gh-radius); box-shadow: 0 4px 20px rgba(28,38,63,.08); padding:24px; border:1px solid rgba(31,42,64,.06)}
.img-fluid{max-width:100%; height:auto; display:block; margin:auto}
.rounded{border-radius:16px}
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* === Forms mobile safety (calculator & afins) === */
@media (max-width: 767.98px){
  /* Em formulários, cada item da grid ocupa a linha inteira no mobile */
  .gh-form .row > * { grid-column: 1 / -1 !important; }

  /* Campos sempre 100% */
  .gh-form input[type="text"],
  .gh-form input[type="email"],
  .gh-form input[type="tel"],
  .gh-form input[type="number"],
  .gh-form select,
  .gh-form textarea,
  .gh-form .form-control { width: 100%; }

  /* Tamanho de fonte para evitar zoom do iOS */
  .gh-form input,
  .gh-form select,
  .gh-form textarea { font-size: 16px; }

  /* Botões em largura total no mobile */
  .gh-form .btn,
  .gh-form .btn-soft,
  .gh-form .btn-cta { width: 100%; }
}

/* Caso esteja usando .form-soft sem estilo no tema, garanta largura total */
.gh-form .form-soft { width: 100%; min-height: 44px; }