/* Site institucional da transportadora (/sobre). Usa os tokens de base.css. */

.wrap { width: min(100% - 2 * var(--gutter), 70rem); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2 * var(--gutter), 46rem); }

/* Topo */
.top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: var(--z-sticky); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 4rem; }
.logo { display: inline-flex; align-items: center; min-height: var(--control-h); }
.logo img { height: 2.25rem; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav a:not(.btn) { display: none; color: var(--ink-2); font-weight: var(--fw-semi); text-decoration: none; padding: var(--space-3) 0; }
.nav a:not(.btn):hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; }
.nav-cta { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); min-height: var(--control-h); }
.nav-cta:hover { background: var(--accent-strong); color: var(--accent-ink); }
@media (min-width: 48em) { .nav a:not(.btn) { display: inline-block; } }

/* Faixa principal */
.hero { background: var(--accent); color: #fff; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0 -10% 0 auto; width: 38%; background: linear-gradient(115deg, transparent 49.6%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.07) 78%, var(--highlight) 78.3%, var(--highlight) 83%, transparent 83.3%); pointer-events: none; display: none; }
@media (min-width: 64em) { .hero::after { display: block; } }
.hero-in { position: relative; z-index: 1; padding-block: var(--space-12) var(--space-12); display: grid; gap: var(--space-8); }
.hero h1 { color: #fff; font-size: var(--fs-3xl); line-height: var(--lh-tight); max-width: 20ch; margin: 0; text-wrap: balance; }
.hero-sub { color: #D5DEE8; font-size: var(--fs-lg); line-height: var(--lh-snug); max-width: 52ch; margin: var(--space-4) 0 0; }
.hero-form { max-width: 40rem; }
.hero-label { display: block; font-weight: var(--fw-semi); margin-bottom: var(--space-2); color: #fff; }
.hero-row { display: grid; gap: var(--space-3); }
.hero-row .input { min-height: 3.5rem; font-size: var(--fs-lg); border-color: transparent; }
.hero-btn { min-height: 3.5rem; padding-inline: var(--space-8); background: var(--highlight); color: var(--highlight-ink); border-color: var(--highlight); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.hero-btn:hover { background: #FF7A26; border-color: #FF7A26; color: var(--highlight-ink); }
.hero .input:focus-visible, .hero-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hero-err { margin: var(--space-3) 0 0; display: inline-block; background: #fff; color: var(--danger); font-weight: var(--fw-semi); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); }
@media (min-width: 37.5em) { .hero-row { grid-template-columns: minmax(0, 1fr) auto; } .hero-in { padding-block: var(--space-16); } }

/* Blocos */
.block { padding-block: var(--space-12); }
.block-alt { background: var(--surface); border-block: 1px solid var(--line); }
.block h2 { font-size: var(--fs-2xl); color: var(--accent-text); margin: 0 0 var(--space-8); }
@media (min-width: 37.5em) { .block { padding-block: var(--space-16); } }

.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 37.5em) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); }
.item svg { width: 2rem; height: 2rem; fill: none; stroke: var(--highlight-text); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.item h3 { font-size: var(--fs-lg); margin: var(--space-4) 0 var(--space-2); }
.item p { margin: 0; color: var(--ink-2); }

.steps { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; gap: var(--space-6); }
@media (min-width: 56em) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); } }
.steps li { display: flex; gap: var(--space-4); align-items: flex-start; }
.num { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--font-mono); font-weight: var(--fw-semi); }
.steps h3 { font-size: var(--fs-lg); margin: var(--space-1) 0 var(--space-2); }
.steps p { margin: 0; color: var(--ink-2); }

details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: var(--space-3); }
summary { cursor: pointer; padding: var(--space-4) var(--space-5); font-weight: var(--fw-semi); min-height: var(--control-h); }
summary:hover { color: var(--accent-text); }
details p { margin: 0; padding: 0 var(--space-5) var(--space-5); color: var(--ink-2); max-width: var(--measure); }

/* Rodapé */
.foot { background: var(--surface); border-top: 1px solid var(--line); padding-block: var(--space-8); }
.foot-logo { height: 1.5rem; width: auto; display: block; }
.foot-name { margin: var(--space-3) 0 var(--space-1); font-weight: var(--fw-semi); }
.foot-links { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-5); }
.foot-links a { color: var(--accent-text); display: inline-flex; align-items: center; min-height: var(--control-h); }