/* ==========================================================================
   qTransportes 2027 — servicos.css
   Páginas de serviço, índice de serviços, seguradoras e preço.
   Carrega DEPOIS de base.css e paginas.css (usa .pg-head de lá).
   Gerado junto com as páginas por tools/gerar_paginas.py — edite aqui, não no HTML.
   ========================================================================== */

/* ---------- migalhas (breadcrumb) ---------- */
.crumbs { margin-bottom: 1.5rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-size: var(--fs-sm); color: var(--muted-ink); }
.crumbs li { display: flex; align-items: center; gap: .5rem; }
.crumbs li + li::before { content: ""; width: .375rem; height: .375rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7; }
.crumbs a { color: var(--paper); text-underline-offset: 3px; }
.crumbs [aria-current="page"] { color: var(--muted-ink); }

/* ---------- cabeça ---------- */
.sv-head .pg-head__in { grid-template-columns: minmax(0, 1fr); align-items: start; }
.sv-head .pg-h1 { font-size: clamp(2.5rem, 5.4vw, 5rem); max-width: 18ch; }
.sv-head .sec__lead { max-width: 44rem; }
.sv-acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ---------- corpo: texto + lateral ---------- */
.sv__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 1023px) { .sv__grid { grid-template-columns: minmax(0, 1fr); } }

.sv-doc { max-width: 46rem; display: grid; gap: clamp(2.25rem, 4vw, 3.25rem); }
.sv-doc > section { display: grid; gap: 1rem; scroll-margin-top: calc(var(--hdr-h) + 1rem); }
.sv-doc h2 { font-size: clamp(1.625rem, 2.6vw, 2.25rem); font-stretch: 75%; font-weight: 800; line-height: 1.08; text-wrap: balance; }
.sv-doc h3 { font-size: var(--fs-h3); font-stretch: 85%; font-weight: 750; line-height: 1.2; }
.sv-doc p, .sv-doc li { color: var(--muted); line-height: var(--lh-body); }
.sv-doc strong { color: var(--text); font-weight: 700; }
.sv-doc a:not(.btn) { color: var(--blue-deep); font-weight: 600; text-underline-offset: 3px; }
.sv-doc a:not(.btn):hover { color: var(--ink); }
.sv-doc ul:not(.checks):not(.sv-steps) { display: grid; gap: .5rem; padding-left: 1.25rem; list-style: disc; }
.sv-doc ul:not(.checks):not(.sv-steps) li::marker { color: var(--blue-deep); }

/* resposta curta logo no topo do texto */
.sv-answer { display: grid; gap: .75rem; }
.sv-answer p { color: var(--text); font-size: var(--fs-lead); line-height: 1.6; }

/* passos numerados (ordem real do atendimento) */
.sv-steps { display: grid; gap: .625rem; counter-reset: sv; }
.sv-steps li { counter-increment: sv; position: relative; padding: 1rem 1.125rem 1rem 3.75rem; border: 1px solid var(--line); border-radius: var(--r-plate); background: var(--warm); }
.sv-steps li::before { content: counter(sv); position: absolute; left: 1.125rem; top: .95rem; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; background: var(--ink); color: var(--paper); border-radius: var(--r-sm); font-stretch: 75%; font-weight: 800; font-size: 1rem; line-height: 1; }
.sv-steps strong { display: block; margin-bottom: .125rem; }

/* dado medido da operação, com fonte e período */
.sv-data { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line-2); }
.sv-data > div { padding: 1rem 1rem 1rem 0; display: grid; gap: .25rem; align-content: start; }
.sv-data > div + div { padding-left: 1rem; border-left: 1px solid var(--line); }
@media (max-width: 559px) { .sv-data > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }
.sv-data b { font-size: clamp(2rem, 3.4vw, 2.75rem); font-stretch: 68%; font-weight: 850; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.sv-data span { font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); }
.sv-src { font-size: .875rem; color: var(--muted); }

/* aviso de segurança */
.sv-safe { border-left: 0; padding: 1.125rem 1.25rem; border-radius: var(--r-plate); background: var(--yellow); color: var(--ink); display: grid; gap: .375rem; }
.sv-safe p, .sv-safe li { color: var(--ink); }
.sv-safe .lbl { color: var(--ink); }

/* tabela simples (o que muda o preço, categorias) */
.sv-tbl { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-plate); background: var(--paper); }
.sv-tbl table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.sv-tbl th, .sv-tbl td { text-align: left; vertical-align: top; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.sv-tbl th { font-size: var(--fs-lbl); letter-spacing: .1em; text-transform: uppercase; font-stretch: 116%; font-weight: 600; color: var(--muted); background: var(--warm); }
.sv-tbl tr:last-child td { border-bottom: 0; }
.sv-tbl td:first-child { color: var(--text); font-weight: 650; }

/* lateral: chame agora + base */
.sv-aside { display: grid; gap: 1rem; position: sticky; top: calc(var(--hdr-h) + 1.5rem); }
@media (max-width: 1023px) { .sv-aside { position: static; } }
.sv-call { display: grid; gap: .875rem; }
.sv-call .lbl { color: var(--muted-ink); }
.sv-call__tel { font-size: clamp(2rem, 3vw, 2.5rem); font-stretch: 68%; font-weight: 850; line-height: 1; color: var(--paper); text-decoration: none; font-variant-numeric: tabular-nums; }
.sv-call__tel:hover { color: var(--blue-hi); }
.sv-call p { color: var(--muted-ink); font-size: var(--fs-sm); }
.sv-call .btn { justify-content: center; }
.sv-base { display: grid; gap: .5rem; font-size: var(--fs-sm); }
.sv-base address { font-style: normal; color: var(--text); line-height: 1.5; }
.sv-base a { color: var(--blue-deep); font-weight: 600; }
.sv-rev { font-size: .875rem; color: var(--muted); display: flex; align-items: center; gap: .625rem; }

/* ---------- relacionados ---------- */
.sv-rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .75rem; }
.sv-rel a { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem; align-items: center; gap: .875rem; padding: 1rem 1.125rem; min-height: 4.25rem; border: 1px solid var(--line-2); border-radius: var(--r-plate); background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.25; transition: border-color .2s, background-color .2s; }
.sv-rel a:hover { border-color: var(--ink); background: var(--warm-2); }
.sv-rel .ico { width: 2rem; height: 2rem; color: var(--blue-deep); }
.sv-rel .ico:last-child { width: 1.125rem; height: 1.125rem; color: var(--muted); }

/* ---------- perguntas da página ---------- */
.sv-faq .qa summary { grid-template-columns: minmax(0, 1fr) 2.75rem; }
.sv-faq .qa__a { padding: 0 3.5rem 1.5rem 0; }
@media (max-width: 559px) { .sv-faq .qa__a { padding-right: 0; } }
.sv-faq__head { max-width: 46rem; margin-bottom: 1.5rem; }

/* ---------- índice de serviços ---------- */
.sv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(.75rem, 1.4vw, 1.25rem); }
.sv-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: .75rem; padding: clamp(1.25rem, 2.2vw, 1.75rem); border: 1px solid var(--line-2); border-radius: var(--r-plate); background: var(--paper); color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
a.sv-card:hover { border-color: var(--ink); box-shadow: var(--shadow-card); }
.sv-card .ico { width: 2.5rem; height: 2.5rem; color: var(--blue-deep); }
.sv-card h3 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-stretch: 75%; font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.sv-card p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }
.sv-card__go { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: var(--fs-sm); color: var(--blue-deep); }
.sv-card__go .ico { width: 1.125rem; height: 1.125rem; }
.sv-card--plain { background: var(--warm); }

/* ---------- fecho com as três ações ---------- */
.sv-end { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; }
@media (max-width: 767px) { .sv-end { grid-template-columns: minmax(0, 1fr); } }
.sv-end .h2 { font-size: var(--fs-h2-md); }
.sv-end .sec__lead { margin-top: .75rem; }
.sv-end .sv-acts { margin-top: 0; }