/* ==========================================================================
   style.css — intro · impacto · benefits · passos · faq · cta-band · footer
   (as camadas foram declaradas em critical.css)
   ========================================================================== */

@layer sections {

  .section { padding-block: var(--section-y); }
  .section--alt { background: var(--surface); border-block: 1px solid var(--line); }

  /* ------------------------------------------------------------------------
     INTRO — o que um acidente realmente significa
     ------------------------------------------------------------------------ */
  .consequences {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-4);   /* entre cartões; o subgrid define o seu próprio row-gap interno */
    padding: 0;
    list-style: none;
  }

  /* subgrid: ícone, título, texto e link alinham-se na mesma linha em todos os cartões */
  .consequence {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: var(--s-3);
    padding: var(--s-5);
    border-radius: var(--r-card);
    background: var(--bg);
    border: 1px solid var(--line);

    & > .bi {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: var(--brand-tint);
      color: var(--brand-strong);
      font-size: 1.375rem;
    }
    & h3 { font-size: var(--step-1); }
    & p  { font-size: .9375rem; color: var(--ink-soft); }
  }

  .consequence__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding-block-start: var(--s-3);
    border-block-start: 1px dashed var(--line-strong);
    font-size: .875rem;
    font-weight: 600;
    color: var(--brand-strong);
    text-decoration: none;
    &:hover { text-decoration: underline; text-underline-offset: .2em; }
  }

  /* ------------------------------------------------------------------------
     IMPACTO — "E se…?" como uma estrada com três paragens
     ------------------------------------------------------------------------ */
  .impact {
    --_road: color-mix(in oklab, var(--signal) 85%, transparent);
    position: relative;
    isolation: isolate;
    padding-block: var(--section-y);
    background: light-dark(#0f2a33, #0b1c22);
    color: #e6f0f2;
    overflow: clip;

    & h2, & h3 { color: #fff; }
    & .section-head p { color: #a9c2c9; }
  }

  .route {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--s-6);
    row-gap: 0;
    padding: 0;
    list-style: none;

    /* a estrada: faixa escura com tracejado âmbar ao centro */
    &::before {
      content: "";
      position: absolute;
      inset-inline: calc(-1 * var(--gutter) - 50vw);
      inset-block-start: 31px;
      height: 2px;
      background: repeating-linear-gradient(90deg, var(--_road) 0 28px, transparent 28px 52px);
      z-index: -1;
    }
  }

  .route__stop {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--s-5);
  }

  .route__node {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #0f2a33;
    border: 2px solid var(--_road);
    color: var(--signal);
    font-size: 1.5rem;
    box-shadow: 0 0 0 8px light-dark(#0f2a33, #0b1c22);
  }

  .route__question {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: #fff;
    max-width: 18ch;
  }

  .route__answer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-card);
    background: rgb(255 255 255 / .06);
    border: 1px solid rgb(255 255 255 / .12);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: background-color .2s, border-color .2s;

    & small { display: block; font-weight: 400; font-size: .8125rem; color: #a9c2c9; }
    & .bi   { font-size: 1.25rem; color: var(--signal); transition: translate .2s var(--ease-out); }
    &:hover { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .24); }
    &:hover .bi { translate: 4px 0; }
  }

  .impact__close {
    display: grid;
    gap: var(--s-5);
    justify-items: center;
    margin-block-start: clamp(3rem, 2rem + 3vw, 5rem);
    text-align: center;

    & p { font-size: var(--step-1); color: #a9c2c9; max-width: 48ch; }
    & strong { display: block; font-family: var(--font-display); font-size: var(--step-2); color: #fff; font-weight: 600; margin-block-end: var(--s-2); }
  }

  /* ------------------------------------------------------------------------
     BENEFITS — três coberturas, estrutura idêntica
     ------------------------------------------------------------------------ */
  .coverages {
    display: grid;
    gap: var(--s-5);
    padding: 0;
    list-style: none;
  }

  .coverage {
    container: coverage / inline-size;
    border-radius: var(--r-panel);
    background: var(--surface);
    border: 1px solid var(--line);
    scroll-margin-top: calc(var(--header-h) + var(--s-5));
  }

  .coverage__grid {
    display: grid;
    gap: var(--s-6);
    padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);

    @container coverage (min-width: 760px) {
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
      gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    }
  }

  .coverage__main {
    display: grid;
    align-content: start;
    gap: var(--s-4);

    & .coverage__icon {
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      border-radius: 14px;
      background: var(--brand-strong);
      color: light-dark(#fff, #06222a);
      font-size: 1.625rem;
    }
    & h3 { font-size: var(--step-3); }
    & .coverage__claim { font-size: var(--step-1); font-weight: 600; color: var(--ink); }
    & p { color: var(--ink-soft); }
    & .btn { justify-self: start; margin-block-start: var(--s-2); }
  }

  .coverage__side {
    display: grid;
    align-content: start;
    gap: var(--s-4);
  }

  .coverage__subtitle {
    font-family: var(--font-body);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0;
  }

  .practice {
    display: grid;
    gap: var(--s-3);
    padding: 0;
    list-style: none;

    & li {
      display: grid;
      grid-template-columns: 40px 1fr;
      gap: var(--s-3);
      padding: var(--s-4);
      border-radius: var(--r-card);
      background: var(--bg);
      border: 1px solid var(--line);
    }
    & .bi {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: var(--brand-tint);
      color: var(--brand-strong);
      font-size: 1.125rem;
    }
    & strong { display: block; margin-block-end: 2px; line-height: 1.35; }
    & span   { display: block; font-size: .9375rem; color: var(--ink-soft); line-height: 1.5; }
  }

  .pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    padding: 0;
    list-style: none;

    & li {
      display: inline-flex;
      align-items: center;
      gap: var(--s-2);
      padding: .375rem .875rem;
      border-radius: 999px;
      background: var(--brand-tint);
      color: var(--brand-strong);
      font-size: .875rem;
      font-weight: 600;
    }
  }

  .scenario {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-card);
    border-inline-start: 4px solid var(--signal);
    background: color-mix(in oklab, var(--signal) 10%, var(--surface));

    & > .bi { color: light-dark(#a86a00, var(--signal)); font-size: 1.25rem; line-height: 1.5; }
    & p { font-size: .9375rem; color: var(--ink); }
    & strong { display: block; }
  }

  /* ------------------------------------------------------------------------
     COMO FUNCIONA — sequência real, por isso numerada
     ------------------------------------------------------------------------ */
  .steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-6);
    padding: 0;
    list-style: none;
    counter-reset: step;
  }

  .step {
    counter-increment: step;
    display: grid;
    gap: var(--s-3);
    padding-block-start: var(--s-5);
    border-block-start: 2px solid var(--line);

    &::before {
      content: counter(step);
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      margin-block-start: calc(-1 * var(--s-5) - 21px);
      border-radius: 50%;
      background: var(--bg);
      border: 2px solid var(--brand);
      color: var(--brand-strong);
      font-family: var(--font-display);
      font-weight: 700;
    }
    & h3 { font-size: var(--step-1); }
    & p  { color: var(--ink-soft); font-size: .9375rem; }
  }
  .section--alt .step::before { background: var(--surface); }

  /* ------------------------------------------------------------------------
     FAQ — <details name> (acordeão exclusivo nativo)
     ------------------------------------------------------------------------ */
  .faq {
    display: grid;
    gap: var(--s-6);

    @media (min-width: 960px) {
      grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
      gap: clamp(2rem, 1rem + 4vw, 5rem);
      & .section-head { position: sticky; top: calc(var(--header-h) + var(--s-6)); align-self: start; }
    }
  }

  .faq__list { display: grid; gap: var(--s-3); }

  .faq__item {
    border-radius: var(--r-card);
    border: 1px solid var(--line);
    background: var(--surface);
    transition: border-color .2s;

    &[open] { border-color: var(--line-strong); }

    & summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--s-4);
      padding: var(--s-4) var(--s-5);
      font-weight: 650;
      cursor: pointer;
      list-style: none;
      &::-webkit-details-marker { display: none; }
      & .bi { flex-shrink: 0; font-size: 1.125rem; color: var(--brand-strong); transition: rotate .25s var(--ease-out); }
    }
    &[open] summary .bi { rotate: 45deg; }

    &::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size .3s var(--ease-out), content-visibility .3s allow-discrete;
    }
    &[open]::details-content { block-size: auto; }

    & .faq__answer {
      padding: 0 var(--s-5) var(--s-5);
      color: var(--ink-soft);
      & p + p { margin-block-start: var(--s-3); }
    }
  }

  /* ------------------------------------------------------------------------
     CTA BAND
     ------------------------------------------------------------------------ */
  .cta-band { padding-block: 0 var(--section-y); }

  .cta-band__box {
    position: relative;
    overflow: clip;
    display: grid;
    gap: var(--s-6);
    align-items: center;
    padding: clamp(2rem, 1.25rem + 3.5vw, 4rem);
    border-radius: var(--r-panel);
    background: var(--brand-strong);
    color: light-dark(#fff, #06222a);

    @media (min-width: 960px) { grid-template-columns: minmax(0, 1fr) auto; }

    & h2 { color: inherit; font-size: var(--step-3); max-width: 22ch; }
    & p  { margin-block-start: var(--s-3); opacity: .88; max-width: 52ch; }

    /* tracejado de via a atravessar o bloco */
    &::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-end: 22px;
      height: 3px;
      background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--signal) 70%, transparent) 0 36px, transparent 36px 64px);
      opacity: .6;
    }
  }

  .cta-band__actions {
    display: grid;
    gap: var(--s-3);
    & .btn--ghost { --_fg: inherit; --_bd: currentColor; }
    & .btn--ghost:hover { --_bg: rgb(255 255 255 / .1); }
  }

  /* ------------------------------------------------------------------------
     FOOTER
     ------------------------------------------------------------------------ */
  .site-footer {
    padding-block: var(--s-8) calc(var(--s-6) + env(safe-area-inset-bottom));
    background: var(--surface);
    border-block-start: 1px solid var(--line);
    font-size: .9375rem;
    color: var(--ink-soft);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
    gap: var(--s-6);
    padding-block-end: var(--s-6);
    border-block-end: 1px solid var(--line);

    & h2 {
      margin-block-end: var(--s-4);
      font-family: var(--font-body);
      font-size: .9375rem;
      font-weight: 700;
      letter-spacing: 0;
    }
    & ul { display: grid; gap: var(--s-3); padding: 0; list-style: none; }
    & a  { text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-2); }
    & a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
    & .bi { color: var(--brand-strong); }
  }

  .footer-brand {
    display: grid;
    gap: var(--s-4);
    align-content: start;
    & img { height: 48px; width: auto; }
    & p { max-width: 42ch; }
  }

  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-3) var(--s-6);
    padding-block-start: var(--s-5);
    font-size: .8125rem;
    & p { max-width: 80ch; }
  }

  /* ------------------------------------------------------------------------
     BARRA DE CONVERSÃO MÓVEL
     ------------------------------------------------------------------------ */
  .mobile-cta {
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    display: none;
    grid-template-columns: 1fr auto;
    gap: var(--s-2);
    padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-block-start: 1px solid var(--line);
    translate: 0 110%;
    transition: translate .3s var(--ease-out);

    &.is-visible { translate: 0 0; }
    & .icon-btn { width: 50px; height: 50px; color: #1da851; }
  }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@layer sections {

  @media (max-width: 1099px) {
    .consequences { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 959px) {
    .route {
      grid-template-columns: 1fr;
      row-gap: var(--s-7);
      padding-inline-start: 0;

      /* a estrada passa a vertical, a unir os nós à esquerda */
      &::before {
        inset-inline: auto;
        inset-inline-start: 31px;
        inset-block: 0;
        width: 2px;
        height: auto;
        background: repeating-linear-gradient(180deg, var(--_road) 0 20px, transparent 20px 36px);
      }
    }
    .route__stop {
      grid-row: auto;
      grid-template-columns: 64px 1fr;
      grid-template-rows: auto auto;
      column-gap: var(--s-4);
      row-gap: var(--s-4);
      & .route__node   { grid-row: 1 / span 2; }
      & .route__question { align-self: center; }
      & .route__answer { grid-column: 2; }
    }

    .steps { grid-template-columns: 1fr; gap: var(--s-7); }

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

    .mobile-cta { display: grid; }
    body { padding-block-end: calc(76px + env(safe-area-inset-bottom)); }
  }

  @media (max-width: 599px) {
    .consequences { grid-template-columns: 1fr; }
    .footer-grid  { grid-template-columns: 1fr; }
    .cta-band__actions .btn { width: 100%; }
    .route__question { font-size: var(--step-1); }
  }

  @media print {
    .site-header, .mobile-cta, .drawer, .cta-band, .quote-card { display: none !important; }
  }
}