/* The chrome every page shares (QA fixes 2026-10-29): the «pesquisas» footer .ft3, the «Recursos gratuitos» trigger and
   menu (.fer, .mm — the car home's, now on every page), and the phone tap targets of the nav and footer.
   Loaded LAST on every page (src/site/novo/shell.ts head(), src/home/carro.ts, src/seguro-auto/pagina.ts), so a page
   sheet cannot fork it. One copy: the duplicates in novo.css, home/carro.css and seguro-auto/breve.css are gone. */

/* ── footer .ft3 (scoped: «.fr» is also a home component) ── */
.ft3 { background: var(--ink-deep); color: #fff; padding: clamp(64px, 7vw, 96px) clamp(18px, 6.5vw, 96px) 28px; }
.ft3__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.8fr); gap: clamp(32px, 5vw, 80px); }
.ft3 .ft2__b { display: grid; gap: 12px; align-content: start; } .ft3 .ft2__b .marca { color: #fff; }
.ft3 .ft2__b p { margin: 0; color: var(--on-dark-60); font-size: 15px; } .ft3 .mail2 { color: #fff !important; }
.ft3 .soc { display: flex; gap: 14px; } .ft3 .soc a { color: #fff; font-size: 14px; }
/* the freshness line (owner 2026-10-29, replaced the «De onde vêm os números» cards): quiet, under the brand */
.ft3 .ft2__b p.ft3__dados { margin-top: 8px; font: 500 12.5px/1.45 var(--font-doc); color: var(--on-dark-60); max-width: 30ch; }
.ft3 .ft2__cols h3 { margin: 0 0 14px; font: 500 12px/1 var(--font-doc); letter-spacing: .07em; text-transform: uppercase; color: var(--peach); }
/* one track per rendered column (--n, set by shell.ts: columns with no live link are dropped) */
.ft3 .ft2__cols { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 24px; }
/* the bottom rows (owner footer layout B, 2026-10-29): the commitment line on its own row (one line on desktop: from
   1250 px it fits the footer's width, 12.5 px up to 1299 px; below it wraps naturally), then the «Greg» links inline
   beside «© 2026 Greg» */
.ft3 .ft2__bar { flex-direction: column; align-items: stretch; gap: 14px; }
.ft3 .ft3__comp { max-width: none; }
@media (min-width: 1250px) { .ft3 .ft2__bar > span:first-child { white-space: nowrap; } }
@media (min-width: 1250px) and (max-width: 1299px) { .ft3 .ft2__bar > span:first-child { font-size: 12.5px; } }
.ft3 .ft3__leg { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; }
.ft3 .ft3__greg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.ft3 .ft3__greg a { color: var(--on-dark-75); text-decoration: none; font-size: 13px; }
.ft3 .ft3__greg a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ft3 .ft3__greg .ft3__soon { color: var(--on-dark-60); font-size: 13px; }
.ft3 .ft2__cols a { display: block; color: var(--on-dark-75); text-decoration: none; font-size: 14.5px; line-height: 1.3; padding: 5px 0; }
/* a page that does not exist yet (owner option B, 2026-10-29): grey text, not a link, with the small «Em breve» chip */
.ft3 .ft2__cols .ft3__soon { display: block; color: var(--on-dark-60); font-size: 14.5px; line-height: 1.3; padding: 5px 0; cursor: default; }
.ft3 .ft3__soon .soon { display: inline-block; margin-left: 4px; vertical-align: 1px; padding: 3px 6px; border-radius: var(--r-pill); background: var(--peach-20); color: var(--peach);
  font: 500 10px/1 var(--font-doc); letter-spacing: .04em; text-transform: none; font-style: normal; white-space: nowrap; }
.ft3 .ft2__bar { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--on-dark-20); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--on-dark-60); }
@media (max-width: 1180px) { .ft3__top { grid-template-columns: 1fr; } .ft3 .ft2__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .ft3__top { grid-template-columns: 1fr; }
  .ft3 .ft2__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  /* tap targets ≥ 44 px */
  .ft3 .ft2__cols { gap: 28px 20px; }
  .ft3 .ft2__cols a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; }
  .ft3 .ft2__cols .ft3__soon { padding: 8px 0; }
  .ft3 .ft3__greg a, .ft3 .ft3__greg .ft3__soon { display: inline-flex; align-items: center; min-height: 44px; }
  .ft3 .marca { min-height: 44px; }
}

/* ── nav .gn: the «Recursos gratuitos» trigger where the pillar links hide; tap targets on phones ── */
/* the trigger shows at every width (owner 2026-10-29): pillars without a page are hidden, so on desktop the
   menu is the way to every free tool */
.gn .fer { display: inline-flex; color: var(--ink-deep); }
.gn__r { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 760px) {
  .gn { padding-top: 10px; padding-bottom: 10px; gap: 12px; }
  .gn .marca, .j__nav .marca { min-height: 44px; }
  .gn__cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; }
  .gn .fer { min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); background: var(--cream); font-size: 14px; }
  /* the ticker (home, /seguro-auto/): 40 px tall so each fact is a 40 px target */
  .tk { height: 42px; }
  .tk a { padding: 14px 0; }
  .j { padding-top: 42px; } .j::after { top: 42px; }
}
@media (max-width: 420px) {
  .gn__cta { padding: 0 12px; font-size: 13px; }
}

/* ── «Recursos gratuitos» trigger and menu (desktop panel; full-screen sheet ≤ 1100 px; one column ≤ 760 px) ── */
.fer { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #fff; font: 500 15px/1 var(--font-ui); cursor: pointer; padding: 10px 4px; }
.fer .chev { width: 12px; height: 12px; transition: transform .15s; }
.fer[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lado .fer { margin-right: 6px; }
@media (max-width: 700px) {
  .lado .fer { padding: 0 14px; min-height: 44px; border-radius: var(--r-pill); background: rgba(255,255,255,.16); backdrop-filter: blur(10px); font-size: 14px; margin-right: 0; }
  .topo .nav__cta, .topo .pre { display: none; }
}
.mm { position: absolute; top: calc(100% - 4px); left: clamp(12px, 3vw, 48px); right: clamp(12px, 3vw, 48px); max-width: 1320px; margin: 0 auto;
  background: var(--paper); color: var(--ink); border-radius: 26px; box-shadow: 0 40px 90px rgba(20,8,7,.45); padding: 26px 30px 20px; text-align: left; }
.mm[hidden] { display: none; }
/* on the white-nav pages the menu follows the sticky .gn (it is the nav's next sibling, not inside it) */
@media (min-width: 1101px) { .gn + .mm { position: fixed; top: 80px; z-index: 30; max-height: calc(100vh - 96px); overflow-y: auto; } }
.mm__top { display: none; }
.mm__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.9fr); gap: 24px; }
.mm__g--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mm__c--w .mm__l { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; align-content: start; }
.mm__c h3 { margin: 0 0 8px; font: 700 18px/1.2 'Fraunces', Georgia, serif; color: var(--ink-deep); letter-spacing: 0; text-transform: none; }
.mm__t { display: grid; gap: 3px; padding: 9px 10px; margin: 0 -10px; border-radius: 12px; text-decoration: none; color: inherit; }
.mm__t:hover { background: var(--cream); }
.mm__t b { font: 600 14.5px/1.3 var(--font-ui); color: var(--ink-deep); }
.mm__t span { font-size: 13.5px; line-height: 1.35; color: var(--ink-60); }
.mm__t em { justify-self: start; margin-top: 3px; font: 500 11px/1 var(--font-doc); font-style: normal; background: var(--band-barato-11); color: var(--band-barato); padding: 4px 7px; border-radius: var(--r-pill); }
.mm__t em.soon { background: var(--peach-pale); color: var(--peach-ink); }
.mm__ft { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: 13.5px; color: var(--ink-60); max-width: none; }
.mm__ft a { color: var(--ink-deep); font-weight: 600; }
@media (max-width: 1100px) {
  .mm { position: fixed; inset: 0; max-width: none; border-radius: 0; padding: 0 18px 40px; overflow-y: auto; overscroll-behavior: contain; z-index: 90; box-shadow: none; }
  .mm__top { display: flex; justify-content: space-between; align-items: center; height: 66px; position: sticky; top: 0; background: var(--paper); z-index: 1; border-bottom: 1px solid var(--hairline); margin: 0 -18px 14px; padding: 0 10px 0 18px; }
  .mm__h { font: 700 24px/1 'Fraunces', Georgia, serif; color: var(--ink-deep); }
  .mm__x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--cream); color: var(--ink-deep); font: 400 26px/1 var(--font-ui); cursor: pointer; }
  .mm__g, .mm__g--4 { grid-template-columns: 1fr 1fr; gap: 22px; }
  html.mm-open, html.mm-open body { overflow: hidden; }
}
@media (max-width: 760px) {
  /* B4: one column on phones, whatever the number of pillars */
  .mm__g, .mm__g--4 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mm__c--w .mm__l { grid-template-columns: 1fr; }
  .mm__c { border-top: 1px solid var(--hairline); padding-top: 16px; }
  .mm__c:first-child { border-top: 0; padding-top: 0; }
  .mm__c h3 { font-size: 24px; }
  .mm__t { padding: 11px 10px; }
  .mm__ft a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── text crumbs (.crumbs, G2/G3 heroes): inline, so a long crumb wraps inside a label and never leaves a «›» at the end
   of a line (QA E15; the markup has no space between items, so there is no break point around a separator); on phones
   each link gets a 40 px hit area from vertical padding, without moving the line. ── */
.crumbs { display: block; line-height: 1.6; }
.crumbs > * { display: inline; }
.crumbs > * + * { margin-left: 8px; }
@media (max-width: 760px) {
  .crumbs a { padding: 11px 0; }
}

/* ── «O passo seguinte» (.rel): the heading and the cards on the same left edge as every .wrap above (QA S12) ── */
.rel h2, .rel.b h2, .rel .relg { max-width: calc(1180px - 2 * clamp(18px, 4vw, 40px)); }

/* ── polish (QA P5, P6, P10): phone tap targets on page-level links and unit inputs, balanced card titles,
   the date token in source lines kept on one line ── */
.rc b, .mm__t b { text-wrap: balance; }
.gmeta span, .src time, .eh-led__fonte { overflow-wrap: normal; }
@media (max-width: 760px) {
  .in--u input { min-height: 40px; }
  .eh-q a, .g3hc__f h3 a { display: inline-block; padding: 6px 0; }
  .elist a { display: inline-block; padding: 10px 0; }
  .eh-inst__q a { display: inline-block; padding: 8px 0; }
  .evk__in input { min-height: 40px; }
  .calert__priv, .rem-form__priv { display: inline-flex; align-items: center; min-height: 40px; }
  a.door { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ── N3, the phone nav on every page (owner pick 2026-10-29, vault/home-agora/r2 «N3 · Separadores»): ≤ 700 px the logo
   row, then two tabs of equal weight («Recursos gratuitos» opens the menu, «Acesso antecipado»), and the tab row stays
   stuck to the top on scroll. The car home and /seguro-auto/ (.topo, dark): the ticker hides on the phone (its figures
   are in the page). The white-nav pages (.gn): the same two tabs, light. Wider screens keep the one-row nav. ── */
.nx { display: none; }
@media (max-width: 700px) {
  html { scroll-padding-top: 60px; } /* an anchor lands under the stuck tabs, not behind them */
  .nx { display: grid; grid-template-columns: 1fr 1fr; height: 52px; }
  .nx__tab { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 51px; margin: 0; padding: 0 6px; border: 0; border-radius: 0;
    background: transparent; font: 600 14.5px/1 var(--font-ui); text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nx__tab:focus-visible { outline-offset: -3px; }
  /* dark (.topo) */
  .topo { position: sticky; top: -64px; margin-bottom: -116px; }
  .topo .tk { display: none; }
  .topo .j__nav { padding: 10px 16px; min-height: 64px; }
  .topo .j__nav .fer { display: none; }
  .topo .nx { background: #1c0c0b; border-top: 1px solid var(--on-dark-20); border-bottom: 1px solid var(--on-dark-20); }
  .topo .nx__tab { color: #fff; }
  .topo .nx__tab.fer { border-right: 1px solid var(--on-dark-20); }
  .topo .nx__tab--cta { background: #fff; color: var(--ink-deep); }
  .topo .nx__tab[aria-expanded="true"] { background: rgba(255,255,255,.1); }
  /* light (.gn): the logo row scrolls away, the tabs stay */
  .gn { flex-wrap: wrap; row-gap: 0; top: -64px; padding-bottom: 0; }
  .gn .gn__r { display: none; }
  .gn .nx { flex: 1 0 100%; margin: 10px calc(-1 * clamp(18px, 4vw, 40px)) 0; border-top: 1px solid var(--tint-10); }
  .gn .nx__tab, .gn .nx__tab.fer { min-height: 51px; padding: 0 6px; border-radius: 0; background: transparent; color: var(--ink-deep); font-size: 14.5px; }
  .gn .nx__tab.fer { border-right: 1px solid var(--tint-10); }
  .gn .nx__tab--cta { background: var(--ink-deep); color: #fff; }
  .gn .nx__tab[aria-expanded="true"] { background: var(--cream); }
}
@media (max-width: 370px) { .nx__tab, .gn .nx__tab, .gn .nx__tab.fer { font-size: 14px; } }
