/* ==========================================================================
   Veries - folha de estilo do site público (veries.com.br)
   Sem framework: o HTML é só semântico e este arquivo o estiliza pela
   estrutura (landmarks, seções com id, listas). Mesmo visual do layout
   anterior em Next/Tailwind (paleta do logo, Poppins).
   ========================================================================== */

/* ---------- Fontes (Poppins, só a faixa latina, servidas daqui) ---------- */
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/poppins-400.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/poppins-500.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/poppins-600.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/poppins-700.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/poppins-800.woff2) format("woff2"); }
/* Arial ajustada às métricas da Poppins: o texto não "pula" quando a fonte chega. */
@font-face { font-family: "Poppins Fallback"; src: local(Arial); ascent-override: 93.62%; descent-override: 31.21%; line-gap-override: 8.92%; size-adjust: 112.16%; }

/* ---------- Cores e medidas (paleta do logo) ---------- */
:root {
  --primaria: #001341;        /* azul-marinho do logo */
  --destaque: #0a4fe6;        /* azul royal do degradê do logo */
  --destaque-escuro: #0838b0;
  --superficie: #eef3ff;
  --texto: #16213a;
  --texto-suave: #55607a;
  --borda: #d7e0f2;
  --raio: .75rem;
  --raio-card: 1.125rem;
  --raio-grande: 1.5rem;
  --margem: 1rem;             /* respiro lateral do conteúdo */
  --largura: 72rem;           /* largura máxima do conteúdo (com o respiro) */
  --lado: calc(max(0px, (100% - var(--largura)) / 2) + var(--margem));
  --transicao: .15s cubic-bezier(.4, 0, .2, 1);
  --sombra: 0 10px 30px rgb(0 19 65 / .08);
}
@media (min-width: 40rem) { :root { --margem: 1.5rem; } }

/* ---------- Base ---------- */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { line-height: 1.5; font-family: Poppins, "Poppins Fallback", Arial, sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body { display: flex; flex-direction: column; min-height: 100vh; background: #fff; color: var(--texto); }
main { flex: 1; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
ul, ol { list-style: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; background: transparent; }
button, summary { cursor: pointer; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
small { font-size: inherit; }
mark { color: inherit; background: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--destaque); outline-offset: 2px; }

/* Conteúdo centralizado sem div de "container": o respiro lateral da própria
   seção deixa o conteúdo em --largura e o fundo vai de ponta a ponta. */
main > section, main > nav, body:where(:not([data-casca])) > footer { padding-inline: var(--lado); }

/* Card inteiro clicável pelo link do título (sem embrulhar o título num <a>). */
article { position: relative; }
article h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
article h3 a:focus-visible { outline: none; }
article:focus-within { box-shadow: 0 0 0 4px rgb(10 79 230 / .3); }

/* ==========================================================================
   CABEÇALHO
   ========================================================================== */
body:where(:not([data-casca])) > header {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; column-gap: 2rem;
  padding-inline: var(--lado); background: #fff; border-bottom: 1px solid var(--borda);
}

/* Faixa azul-marinho com o recado e os links rápidos */
#faixa {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.5rem;
  padding-block: .5rem;
  background: var(--primaria); color: rgb(255 255 255 / .8); font-size: 13px;
  /* fundo de ponta a ponta, com o texto alinhado ao conteúdo */
  box-shadow: 0 0 0 100vmax var(--primaria); clip-path: inset(0 -100vmax);
}
#faixa strong { font-weight: 600; color: #fff; }
#faixa ul { display: none; gap: 1.25rem; }
#faixa a:hover { color: #fff; }
@media (min-width: 40rem) { #faixa ul { display: flex; } }

/* Logo */
body:where(:not([data-casca])) > header > a[href="/"] { grid-column: 1; padding-block: 1rem; }
body:where(:not([data-casca])) > header > a[href="/"] img { width: auto; height: 2.5rem; }
@media (min-width: 40rem) { body:where(:not([data-casca])) > header > a[href="/"] img { height: 2.75rem; } }

/* Menu principal (desktop) */
body:where(:not([data-casca])) #menu { grid-column: 2; justify-self: end; display: none; }
body:where(:not([data-casca])) #menu > ul { display: flex; align-items: center; gap: 1.75rem; }
body:where(:not([data-casca])) #menu > ul > li > a, body:where(:not([data-casca])) #menu summary {
  display: inline-flex; align-items: center; gap: .25rem; padding-block: 1.5rem;
  font-size: 15px; font-weight: 600; color: var(--texto); transition: color var(--transicao);
}
body:where(:not([data-casca])) #menu summary svg { width: 16px; height: 16px; opacity: .6; transition: transform var(--transicao); }
body:where(:not([data-casca])) #menu details[open] summary svg { transform: rotate(180deg); }
body:where(:not([data-casca])) #menu > ul > li > a:hover, body:where(:not([data-casca])) #menu summary:hover, body:where(:not([data-casca])) #menu details[open] summary { color: var(--destaque); }
body:where(:not([data-casca])) #menu details { position: relative; }
body:where(:not([data-casca])) #menu details > ul {
  position: absolute; z-index: 50; top: calc(100% - .5rem); left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; width: 560px; padding: .75rem;
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-card);
  box-shadow: 0 18px 40px rgb(0 19 65 / .14);
}
body:where(:not([data-casca])) #menu details > ul a { display: block; padding: .625rem .75rem; border-radius: var(--raio); font-size: 15px; font-weight: 600; color: var(--primaria); }
body:where(:not([data-casca])) #menu details > ul a:hover { background: var(--superficie); }
body:where(:not([data-casca])) #menu details > ul strong { display: block; font-weight: 600; }
body:where(:not([data-casca])) #menu details > ul small { display: block; font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--texto-suave); }

/* Botão de cotação */
body:where(:not([data-casca])) > header > a[href="/#cotacao"] {
  grid-column: 3; display: none; align-items: center;
  padding: .625rem 1.25rem; border-radius: 999px;
  background: var(--destaque); color: #fff; font-size: 14px; font-weight: 700;
  transition: background var(--transicao);
}
body:where(:not([data-casca])) > header > a[href="/#cotacao"]:hover { background: var(--destaque-escuro); }
@media (min-width: 40rem) { body:where(:not([data-casca])) > header > a[href="/#cotacao"] { display: inline-flex; } }

/* Botão do menu do celular */
body:where(:not([data-casca])) > header > button {
  grid-column: 4; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 999px; color: var(--primaria);
}
body:where(:not([data-casca])) > header > button:hover { background: var(--superficie); }
body:where(:not([data-casca])) > header > button svg { width: 24px; height: 24px; }
body:where(:not([data-casca])) > header > button[aria-expanded="false"] svg:last-child, body:where(:not([data-casca])) > header > button[aria-expanded="true"] svg:first-of-type { display: none; }

/* Menu do celular */
body:where(:not([data-casca])) #menu-movel { grid-column: 1 / -1; max-height: 75vh; overflow-y: auto; padding: .75rem 0 1.25rem; border-top: 1px solid var(--borda); }
body:where(:not([data-casca])) #menu-movel > p { padding: .5rem .5rem .25rem; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--destaque); }
body:where(:not([data-casca])) #menu-movel > p + ul + p { padding-top: 1rem; }
body:where(:not([data-casca])) #menu-movel ul a { display: block; padding: .5rem; border-radius: var(--raio); font-size: 15px; font-weight: 600; color: var(--primaria); }
body:where(:not([data-casca])) #menu-movel ul a:hover { background: var(--superficie); }
body:where(:not([data-casca])) #menu-movel > a { display: flex; justify-content: center; margin-top: .75rem; padding: .75rem 1.25rem; border-radius: 999px; background: var(--destaque); color: #fff; font-size: 14px; font-weight: 700; }

@media (min-width: 64rem) {
  body:where(:not([data-casca])) #menu { display: block; }
  body:where(:not([data-casca])) > header > button, body:where(:not([data-casca])) #menu-movel { display: none !important; }
}

/* ==========================================================================
   PARTES COMUNS DAS SEÇÕES
   ========================================================================== */
/* Abertura de seção: rótulo + título à esquerda, texto de apoio à direita */
:is(main, main > article) > section > header { display: grid; gap: .5rem 1rem; margin-bottom: 2rem; }
:is(main, main > article) > section > header > p:first-child { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--destaque); }
:is(main, main > article) > section > header > h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--primaria); text-wrap: balance; }
:is(main, main > article) > section > header > h2 + p { font-size: 16px; color: var(--texto-suave); }
@media (min-width: 48rem) {
  :is(main, main > article) > section > header { grid-template-columns: minmax(0, 36rem) minmax(0, 28rem); justify-content: space-between; align-items: end; }
  :is(main, main > article) > section > header > p:first-child, :is(main, main > article) > section > header > h2 { grid-column: 1; }
  :is(main, main > article) > section > header > h2 + p { grid-column: 2; grid-row: 1 / 3; }
}

/* Botões redondos */
#inicio > p:last-child a {
  display: inline-flex; align-items: center; gap: .5rem; padding: .875rem 1.75rem; border-radius: 999px;
  font-size: 15px; font-weight: 700; color: #fff; transition: background var(--transicao);
}
#inicio > p:last-child a svg { width: 16px; height: 16px; }

/* Lista com marcador "check" */
main > #comparar ul li svg, [data-tipo="cotacao"] ul li svg, [data-tipo="checklist"] li svg {
  flex: none; width: 1.5rem; height: 1.5rem; padding: .3rem; border-radius: 999px; background: var(--destaque); color: #fff; stroke-width: 3;
}

/* Perguntas em acordeão (home e pilares) */
main > #faq details, #perguntas details { margin-top: .75rem; padding-inline: 1.25rem; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-card); }
main > #faq summary, #perguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
main > #faq summary h3, #perguntas summary h3 { font-size: 16px; font-weight: 700; color: var(--primaria); }
main > #faq summary svg, #perguntas summary svg { flex: none; width: 22px; height: 22px; color: var(--destaque); transition: transform var(--transicao); }
main > #faq details[open] summary svg, #perguntas details[open] summary svg { transform: rotate(45deg); }
main > #faq details > p, #perguntas details > p { padding-bottom: 1.25rem; font-size: 15px; line-height: 1.65; color: var(--texto-suave); }

/* ==========================================================================
   FORMULÁRIO DE COTAÇÃO
   ========================================================================== */
#cotacao, output[for="cotacao"] {
  scroll-margin-top: 8rem; width: 100%; padding: 1.5rem; background: #fff; color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio-grande); box-shadow: 0 18px 44px rgb(0 19 65 / .12);
}
#cotacao { display: grid; gap: .75rem; }
#cotacao > h3 { font-size: 20px; font-weight: 700; color: var(--primaria); }
#cotacao > h3 + p { margin-top: -.5rem; font-size: 15px; color: var(--texto-suave); }
#cotacao > h3, #cotacao > h3 + p, #cotacao fieldset, #cotacao [role="alert"], #cotacao button, #cotacao > p:last-child { grid-column: 1 / -1; }
#cotacao fieldset { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-top: .5rem; }
#cotacao legend { float: left; grid-column: 1 / -1; }
#cotacao legend, #cotacao label { display: block; margin-bottom: .375rem; font-size: 13px; font-weight: 600; color: var(--texto-suave); }
#cotacao fieldset label { position: relative; margin: 0; }
#cotacao fieldset input { position: absolute; opacity: 0; pointer-events: none; }
#cotacao fieldset span {
  display: block; padding: .625rem .5rem; border: 2px solid var(--borda); border-radius: var(--raio);
  text-align: center; font-size: 14px; font-weight: 700; color: var(--texto); transition: all var(--transicao);
}
#cotacao fieldset input:checked + span { border-color: var(--destaque); background: var(--superficie); color: var(--destaque); }
#cotacao fieldset input:focus-visible + span { box-shadow: 0 0 0 4px rgb(10 79 230 / .25); }
#cotacao input:not([type="radio"]), #cotacao select {
  width: 100%; height: 3rem; padding-inline: .875rem; background: #fff;
  border: 1px solid var(--borda); border-radius: var(--raio); font-size: 15px; color: var(--texto);
}
#cotacao input::placeholder { color: #94a3b8; }
#cotacao input:focus, #cotacao select:focus { outline: none; border-color: var(--destaque); box-shadow: 0 0 0 4px rgb(10 79 230 / .15); }
#cotacao [aria-invalid="true"] { border-color: #b42318; }
#cotacao p > small { display: block; margin-top: .25rem; font-size: 13px; color: #b42318; }
#cotacao [role="alert"] { padding: .5rem .75rem; border-radius: var(--raio); background: #fef3f2; font-size: 14px; color: #b42318; }
#cotacao button {
  height: 3rem; margin-top: .25rem; border-radius: 999px; background: var(--destaque);
  font-size: 15px; font-weight: 700; color: #fff; transition: background var(--transicao);
}
#cotacao button:hover { background: var(--destaque-escuro); }
#cotacao button:disabled { opacity: .6; cursor: wait; }
#cotacao > p:last-child small { display: block; text-align: center; font-size: 12px; color: var(--texto-suave); }
output[for="cotacao"] { display: grid; justify-items: center; gap: .5rem; padding-block: 2.5rem; text-align: center; }
output[for="cotacao"] svg { width: 48px; height: 48px; color: var(--destaque); }
output[for="cotacao"] strong { font-size: 20px; font-weight: 700; color: var(--primaria); }
output[for="cotacao"] span { font-size: 15px; color: var(--texto-suave); }
@media (min-width: 40rem) {
  #cotacao { grid-template-columns: 1fr 1fr; padding: 1.75rem; }
  #cotacao fieldset { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   HOME
   ========================================================================== */
/* Primeira dobra: foto + véu azul-marinho à esquerda */
#inicio {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: 4rem; padding-bottom: 9rem; background: var(--primaria); color: #fff;
}
#inicio > img {
  position: absolute; inset: 0; z-index: -2; width: 100%; max-width: none; height: 100%;
  object-fit: cover; object-position: 60% 50%; filter: saturate(1.2) brightness(1.08);
}
#inicio::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(0 19 65 / .95) 0%, rgb(0 19 65 / .86) 45%, rgb(0 19 65 / .5) 68%, rgb(0 19 65 / 0) 90%);
}
#inicio > h1, #inicio > p { max-width: 540px; }
#inicio > h1 {
  font-size: clamp(2rem, 3.6vw, 2.6rem); font-weight: 800; line-height: 1.3; letter-spacing: -.02em;
  text-shadow: 0 2px 18px rgb(0 10 40 / .45); text-wrap: balance;
}
#inicio mark { white-space: nowrap; padding: .125rem .625rem; border-radius: .5rem; background: var(--destaque); color: #fff; }
#inicio > h1 + p { margin-top: 1.5rem; font-size: 18px; font-weight: 500; line-height: 1.65; text-shadow: 0 1px 10px rgb(0 10 40 / .5); }
#inicio > p:last-child { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
#inicio > p:last-child a:first-child { background: var(--destaque); box-shadow: 0 10px 24px rgb(10 79 230 / .35); }
#inicio > p:last-child a:first-child:hover { background: var(--destaque-escuro); }
#inicio > p:last-child a:last-child { border: 2px solid #fff; background: rgb(255 255 255 / .1); backdrop-filter: blur(4px); }
#inicio > p:last-child a:last-child:hover { background: rgb(255 255 255 / .2); }
@media (min-width: 40rem) { #inicio { padding-top: 7rem; } }
@media (min-width: 64rem) { #inicio { padding-bottom: 12rem; } }

/* Atalhos: uma barra única sobreposta à primeira dobra, dividida em quatro */
body:where(:not([data-casca])) #atalhos { position: relative; z-index: 10; margin-top: -3.5rem; }
body:where(:not([data-casca])) #atalhos ul { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; background: #fff; border-radius: var(--raio-grande); box-shadow: 0 18px 40px rgb(0 19 65 / .12); }
body:where(:not([data-casca])) #atalhos li { box-shadow: -1px 0 0 var(--borda), 0 -1px 0 var(--borda); }
body:where(:not([data-casca])) #atalhos a { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .75rem; row-gap: .125rem; height: 100%; padding: 1.125rem 1.25rem; transition: background var(--transicao); }
body:where(:not([data-casca])) #atalhos a:hover { background: var(--superficie); }
body:where(:not([data-casca])) #atalhos svg { grid-row: 1 / span 2; width: 1.5rem; height: 1.5rem; color: var(--destaque); }
body:where(:not([data-casca])) #atalhos strong { font-size: 15.5px; font-weight: 700; color: var(--primaria); }
body:where(:not([data-casca])) #atalhos small { font-size: 13.5px; line-height: 1.35; color: var(--texto-suave); }
@media (min-width: 64rem) {
  body:where(:not([data-casca])) #atalhos ul { grid-template-columns: repeat(4, 1fr); }
  body:where(:not([data-casca])) #atalhos a { padding: 1.5rem 1.75rem; }
}

/* Perfis */
main > #perfis, main > #operadoras, main > #como-funciona, main > #cidades, main > #guias, main > #faq { padding-block: 5rem; scroll-margin-top: 7rem; }
main > #operadoras, main > #como-funciona, main > #guias { background: var(--superficie); }

/* Cartões com foto (perfis na home e tipos de plano nos pilares): foto real,
   título e uma linha de texto, sem caixa nem botão - o cartão inteiro é o link. */
main > #perfis > ul, [data-tipo="cards"] { display: grid; gap: 2.25rem 1.5rem; }
main > #perfis article, [data-tipo="cards"] article { display: flex; flex-direction: column; gap: .5rem; height: 100%; border-radius: var(--raio-grande); }
main > #perfis article img, [data-tipo="cards"] article img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: .75rem;
  border-radius: var(--raio-grande); transition: transform .35s ease, box-shadow .35s ease;
}
main > #perfis article:hover img, [data-tipo="cards"] article:hover img { transform: translateY(-4px); box-shadow: 0 16px 34px rgb(0 19 65 / .18); }
main > #perfis h3, [data-tipo="cards"] h3 { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--primaria); }
main > #perfis h3 a, [data-tipo="cards"] h3 a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .3s ease, color .3s ease;
}
main > #perfis article:hover h3 a, [data-tipo="cards"] article:hover h3 a { background-size: 100% 2px; color: var(--destaque); }
main > #perfis article > p, [data-tipo="cards"] article > p { font-size: 15px; line-height: 1.65; color: var(--texto-suave); }
main > #perfis article:focus-within, [data-tipo="cards"] article:focus-within { box-shadow: none; }
main > #perfis article:focus-within img, [data-tipo="cards"] article:focus-within img { outline: 3px solid var(--destaque); outline-offset: 3px; }
@media (min-width: 40rem) { main > #perfis > ul, [data-tipo="cards"] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { main > #perfis > ul, [data-tipo="cards"] { grid-template-columns: repeat(3, 1fr); } }

/* Operadoras: parede de logos (células divididas por linhas finas) */
main > #operadoras > ul, [data-tipo="operadoras"] {
  display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden;
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-grande);
}
main > #operadoras > ul li, [data-tipo="operadoras"] li { box-shadow: 1px 0 0 var(--borda), 0 1px 0 var(--borda); }
main > #operadoras > ul a, [data-tipo="operadoras"] a {
  display: flex; align-items: center; justify-content: center; gap: .375rem; height: 6.5rem; padding: 1rem;
  font-size: 15px; font-weight: 700; color: var(--destaque); transition: background var(--transicao);
}
main > #operadoras > ul a:hover, [data-tipo="operadoras"] a:hover { background: var(--superficie); }
main > #operadoras > ul img, [data-tipo="operadoras"] img { width: auto; max-width: 120px; height: 38px; object-fit: contain; transition: transform .25s ease; }
main > #operadoras > ul a:hover img, [data-tipo="operadoras"] a:hover img { transform: scale(1.06); }
main > #operadoras > ul svg, [data-tipo="operadoras"] svg { width: 18px; height: 18px; }
main > #operadoras > p { margin-top: 1.5rem; font-size: 15px; color: var(--texto-suave); }
main > #operadoras > p a { font-weight: 600; color: var(--primaria); text-decoration: underline; text-decoration-color: var(--borda); text-underline-offset: 4px; }
main > #operadoras > p a:hover { text-decoration-color: var(--destaque); }
@media (min-width: 40rem) { main > #operadoras > ul, [data-tipo="operadoras"] { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { main > #operadoras > ul, [data-tipo="operadoras"] { grid-template-columns: repeat(5, 1fr); } }

/* Cotação (caixa azul-marinho com o formulário) */
main > #comparar {
  display: grid; align-items: center; gap: 2.5rem;
  margin: 5rem var(--lado); padding: 1.5rem; border-radius: 28px; background: var(--primaria); color: #fff;
}
main > #comparar > header { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; margin: 0; }
main > #comparar > header > p:first-child { color: #9fbcff; }
main > #comparar > header > h2 { margin-top: 0; color: #fff; }
main > #comparar > header > h2 + p { font-size: 16px; line-height: 1.65; color: rgb(255 255 255 / .8); }
main > #comparar ul { display: flex; flex-direction: column; gap: .625rem; margin-top: .5rem; }
main > #comparar li { display: flex; align-items: center; gap: .625rem; font-size: 15px; font-weight: 600; }
@media (min-width: 40rem) { main > #comparar { padding: 2.5rem; } }
@media (min-width: 64rem) { main > #comparar { grid-template-columns: 1fr 1.05fr; padding: 3rem; } }
@media (min-width: 72rem) { main > #comparar { margin-inline: calc((100% - var(--largura)) / 2 + var(--margem)); } }

/* Passo a passo (home e pilares): número grande vazado, fio no topo, sem caixa */
main > #como-funciona ol, [data-tipo="passos"] { display: grid; gap: 2.25rem 2rem; counter-reset: passo; }
main > #como-funciona li, [data-tipo="passos"] li { position: relative; counter-increment: passo; padding-top: 1.25rem; border-top: 2px solid var(--borda); }
main > #como-funciona li::after, [data-tipo="passos"] li::after { content: ""; position: absolute; top: -2px; left: 0; width: 3.5rem; height: 2px; background: var(--destaque); }
main > #como-funciona li::before, [data-tipo="passos"] li::before {
  content: counter(passo, decimal-leading-zero); display: block; margin-bottom: .875rem;
  font-size: 2.75rem; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px var(--destaque);
}
main > #como-funciona h3, [data-tipo="passos"] h3 { font-size: 18px; font-weight: 700; color: var(--primaria); }
main > #como-funciona li p, [data-tipo="passos"] p { margin-top: .375rem; font-size: 15px; line-height: 1.65; color: var(--texto-suave); }
@media (min-width: 64rem) { main > #como-funciona ol, [data-tipo="passos"] { grid-template-columns: repeat(3, 1fr); } }

/* Cidades */
main > #cidades > ul { display: flex; flex-wrap: wrap; gap: .625rem; }
main > #cidades > ul a {
  display: inline-flex; align-items: center; gap: .375rem; padding: .5rem 1rem;
  background: #fff; border: 1px solid var(--borda); border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--primaria); transition: all var(--transicao);
}
main > #cidades > ul a:hover { border-color: var(--destaque); color: var(--destaque); }
main > #cidades > ul li:last-child a { background: var(--primaria); border-color: var(--primaria); color: #fff; }
main > #cidades > ul svg { width: 16px; height: 16px; }

/* Guias: lista editorial com fio no topo, sem caixa */
main > #guias > ul { display: grid; gap: 2rem 1.75rem; }
main > #guias article { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding-top: 1.25rem; border-top: 2px solid var(--primaria); }
main > #guias article:focus-within { box-shadow: none; }
main > #guias article > p:first-child { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--destaque); }
main > #guias h3 { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--primaria); transition: color var(--transicao); }
main > #guias article:hover h3 { color: var(--destaque); }
main > #guias article > p:last-child { font-size: 14.5px; line-height: 1.55; color: var(--texto-suave); }
@media (min-width: 40rem) { main > #guias > ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { main > #guias > ul { grid-template-columns: repeat(4, 1fr); } }

/* Perguntas frequentes (coluna estreita e centralizada) */
main > #faq { padding-inline: calc(max(0px, (100% - 48rem) / 2) + var(--margem)); }
main > #faq > header { display: block; text-align: center; }
main > #faq > header > h2 { margin-top: .5rem; }

/* ==========================================================================
   PÁGINAS PILAR (/plano-de-saude, ...) - mesmo formato da home:
   1ª dobra com foto (#inicio), atalhos sobrepostos (#atalhos) e dobras de
   largura total alternando o fundo.
   ========================================================================== */
article > #inicio, main > article > nav { padding-inline: var(--lado); }
main > article > section { padding: 5rem var(--lado); scroll-margin-top: 7rem; }
main > article > section:nth-of-type(even) { background: var(--superficie); }
main > article > section > header { margin-bottom: 2rem; }
main > article > section > header + * { margin-top: 0; }
main > article > section > * + * { margin-top: 1.25rem; }

/* Texto corrido: linha confortável de ler */
main > article > section > p, main > article > section > ul:not([role]), main > article > section > ol:not([role]), main > article > section > aside { max-width: 52rem; }
main > article > section > p, main > article > section > ul:not([role]) > li, main > article > section > ol:not([role]) > li { font-size: 16.5px; line-height: 1.75; color: var(--texto); }
main > article strong { font-weight: 600; color: var(--primaria); }
main > article > section > ul:not([role]) { list-style: disc; padding-left: 1.25rem; }
main > article > section > ol:not([role]) { list-style: decimal; padding-left: 1.25rem; }
main > article > section > ul:not([role]) > li, main > article > section > ol:not([role]) > li { padding-left: .25rem; }
main > article > section > ul:not([role]) > li + li, main > article > section > ol:not([role]) > li + li { margin-top: .5rem; }
main > article li::marker { color: var(--destaque); }
main > article > section > p a, main > article > section > ul:not([role]) a, main > article > section > ol:not([role]) a, main > article td a, main > article aside a, main > article figcaption a, [data-tipo="passos"] p a, [data-tipo="grade"] p a, [data-tipo="checklist"] a, #perguntas details > p a, main > article > footer a {
  font-weight: 600; color: var(--destaque); text-decoration: underline; text-decoration-color: var(--borda); text-underline-offset: 4px;
}
main > article a:hover { text-decoration-color: var(--destaque); }

/* Tabelas */
main > article figure > div { overflow-x: auto; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-card); }
main > article table { width: 100%; min-width: 560px; border-collapse: collapse; text-align: left; font-size: 15px; }
main > article caption { padding: .875rem 1.25rem; border-bottom: 1px solid var(--borda); background: var(--superficie); text-align: left; font-size: 14px; font-weight: 700; color: var(--primaria); }
main > article > section:nth-of-type(even) caption { background: #f6f9ff; }
main > article th, main > article td { padding: .875rem 1.25rem; vertical-align: top; }
main > article thead th { border-bottom: 1px solid var(--borda); font-weight: 700; color: var(--primaria); }
main > article tbody th, main > article tbody td { border-top: 1px solid var(--borda); }
main > article tbody tr:first-child th, main > article tbody tr:first-child td { border-top: 0; }
main > article tbody th { font-weight: 600; color: var(--primaria); }
main > article tbody td { line-height: 1.6; color: var(--texto); }
main > article tbody tr:nth-child(even) { background: rgb(238 243 255 / .45); }
main > article figcaption { margin-top: .625rem; font-size: 13.5px; color: var(--texto-suave); }



/* Itens sem link (segmentações, opções, fatores de preço): lista editorial em
   duas colunas, título + texto separados por fios finos, sem caixa. */
[data-tipo="grade"] { display: grid; column-gap: 3.5rem; }
[data-tipo="grade"] li { padding: 1.375rem 0; border-top: 1px solid var(--borda); }
[data-tipo="grade"] h3 { font-size: 17px; font-weight: 700; color: var(--primaria); }
[data-tipo="grade"] p { margin-top: .375rem; font-size: 15.5px; line-height: 1.7; color: var(--texto); }
@media (min-width: 64rem) { [data-tipo="grade"] { grid-template-columns: repeat(2, 1fr); } }



/* Lista com check */
[data-tipo="checklist"] { display: grid; gap: .875rem 2rem; }
[data-tipo="checklist"] li { display: flex; gap: .75rem; font-size: 16px; line-height: 1.65; }
[data-tipo="checklist"] li svg { width: 1.375rem; height: 1.375rem; margin-top: .2rem; padding: .28rem; }
@media (min-width: 64rem) { [data-tipo="checklist"] { grid-template-columns: repeat(2, 1fr); } }

/* Destaque */
main > article > section > aside { padding: 1.125rem 1.5rem; border-left: 4px solid var(--destaque); border-radius: var(--raio-card); background: var(--superficie); }
main > article > section:nth-of-type(even) > aside { background: #fff; }
main > article > section > aside h3 { margin-bottom: .25rem; font-size: 16px; font-weight: 700; color: var(--primaria); }
main > article > section > aside p { font-size: 15.5px; line-height: 1.65; }



/* Cotação: caixa azul-marinho com texto + formulário (mesmo desenho da home) */
main > article > section[data-tipo="cotacao"] {
  display: grid; align-items: center; gap: 2.5rem;
  margin: 5rem var(--lado); padding: 1.5rem; border-radius: 28px; background: var(--primaria); color: #fff;
}
main > article > section[data-tipo="cotacao"] > * + * { margin-top: 0; }
section[data-tipo="cotacao"] > header { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; margin: 0; }
section[data-tipo="cotacao"] > header > p:first-child { color: #9fbcff; }
section[data-tipo="cotacao"] > header > h2 { color: #fff; }
section[data-tipo="cotacao"] > header > h2 + p { font-size: 16px; line-height: 1.65; color: rgb(255 255 255 / .8); }
section[data-tipo="cotacao"] ul { display: flex; flex-direction: column; gap: .625rem; margin-top: .5rem; }
section[data-tipo="cotacao"] li { display: flex; align-items: center; gap: .625rem; font-size: 15px; font-weight: 600; }
section[data-tipo="cotacao"] li svg { flex: none; width: 1.5rem; height: 1.5rem; padding: .3rem; border-radius: 999px; background: var(--destaque); color: #fff; stroke-width: 3; }
@media (min-width: 40rem) { main > article > section[data-tipo="cotacao"] { padding: 2.5rem; } }
@media (min-width: 64rem) { main > article > section[data-tipo="cotacao"] { grid-template-columns: 1fr 1.05fr; padding: 3rem; } }

/* Perguntas frequentes: coluna estreita e centralizada, como na home */
main > article > #perguntas { padding-inline: calc(max(0px, (100% - 48rem) / 2) + var(--margem)); }
main > article > #perguntas > header { display: block; text-align: center; }
main > article > #perguntas > header > h2 { margin-top: .5rem; }
main > article > #perguntas > * + * { margin-top: .75rem; }

/* Primeira dobra do pilar: mesmas cores e mesmo véu azul-marinho da home
   (pedido do Guigo, 13/10/2026). A foto fica à direita para os rostos não
   saírem do enquadramento nem ficarem atrás do véu. */
@media (min-width: 64rem) {
  article > #inicio { background: rgb(0 19 65); }
  article > #inicio > img { left: auto; right: 0; width: 60%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); }
  article > #inicio::before { background: linear-gradient(90deg, rgb(0 19 65 / .95) 0%, rgb(0 19 65 / .86) 40%, rgb(0 19 65 / .35) 50%, rgb(0 19 65 / 0) 60%); }
}

/* Dobra com foto ao lado do texto */
/* Fotos em pé: no celular, recorte 4:3; no computador, a foto acompanha a altura do texto ao lado. */
figure[data-tipo="foto"] img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raio-grande); box-shadow: 0 18px 44px rgb(0 19 65 / .14); }
@media (min-width: 64rem) {
  main > article > section[data-foto] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4rem; align-items: start; }
  section[data-foto] > * { grid-column: 1; }
  section[data-foto] > figure[data-tipo="foto"] { grid-column: 2; grid-row: 1 / span 8; align-self: stretch; position: relative; min-height: 28rem; margin-top: 0; }
  section[data-foto] > figure[data-tipo="foto"] img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  section[data-foto="esquerda"] > * { grid-column: 2; }
  section[data-foto="esquerda"] > figure[data-tipo="foto"] { grid-column: 1; }
  section[data-foto] > figure:not([data-tipo]), section[data-foto] > [data-tipo]:not([data-tipo="foto"]) { grid-column: 1 / -1; margin-top: 2.5rem; }
  section[data-foto] > header { display: block; }
  section[data-foto] > header > h2 + p { margin-top: .75rem; }
  section[data-foto] > p, section[data-foto] > aside { max-width: none; }
}

/* Data de atualização e base legal */
main > article > footer { padding: 2rem var(--lado) 3rem; border-top: 1px solid var(--borda); text-align: center; font-size: 14px; line-height: 1.65; color: var(--texto-suave); }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
body:where(:not([data-casca])) > footer {
  display: grid; gap: 2.5rem; padding-top: 3.5rem; padding-bottom: 2rem;
  background: var(--primaria); color: rgb(255 255 255 / .75);
}
body:where(:not([data-casca])) #rodape-marca { max-width: 20rem; }
body:where(:not([data-casca])) #rodape-marca img { width: auto; height: 2.5rem; margin-bottom: 1rem; }
body:where(:not([data-casca])) #rodape-marca p { font-size: 15px; line-height: 1.65; }
body:where(:not([data-casca])) #rodape-marca a { display: inline-flex; margin-top: 1.25rem; padding: .625rem 1.25rem; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--primaria); }
body:where(:not([data-casca])) #rodape-marca a:hover { background: rgb(255 255 255 / .9); }
body:where(:not([data-casca])) > footer nav h2 { margin-bottom: 1rem; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #fff; }
body:where(:not([data-casca])) > footer nav ul { display: flex; flex-direction: column; gap: .625rem; }
body:where(:not([data-casca])) > footer nav a { font-size: 15px; transition: color var(--transicao); }
body:where(:not([data-casca])) > footer nav a:hover { color: #fff; }
body:where(:not([data-casca])) > footer > p:last-child { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .5rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / .15); font-size: 13px; }
@media (min-width: 40rem) {
  body:where(:not([data-casca])) > footer { grid-template-columns: repeat(2, 1fr); }
  body:where(:not([data-casca])) > footer > p:last-child { flex-direction: row; justify-content: space-between; }
}
@media (min-width: 64rem) { body:where(:not([data-casca])) > footer { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; } }

/* Títulos das páginas pilar costumam ser mais longos que o da home: um pouco
   mais de largura e fonte levemente menor para caberem em 2 linhas. */
article > #inicio > h1 { max-width: 640px; font-size: clamp(1.85rem, 3vw, 2.35rem); }
article > #inicio > h1 + p { max-width: 560px; }

/* Números grandes (prazos e limites): fio fino no topo, sem caixa. */
[data-tipo="numeros"] { display: grid; gap: 2rem 2.5rem; margin-top: 2.5rem; }
[data-tipo="numeros"] > div { padding-top: 1.25rem; border-top: 1px solid var(--borda); position: relative; }
[data-tipo="numeros"] > div::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 2px; background: var(--destaque); }
[data-tipo="numeros"] dt { font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--primaria); white-space: nowrap; }
[data-tipo="numeros"] dd { margin-top: .75rem; font-size: 15px; line-height: 1.6; color: var(--texto-suave); }
[data-tipo="numeros"] dd strong { display: block; margin-bottom: .125rem; font-size: 16px; font-weight: 700; color: var(--primaria); }
[data-tipo="numeros"] dd a { color: var(--destaque); font-weight: 600; }
@media (min-width: 40rem) { [data-tipo="numeros"] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { [data-tipo="numeros"]:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } [data-tipo="numeros"]:has(> div:nth-child(4)) { grid-template-columns: repeat(4, 1fr); } }

/* Caso prático: texto maior entre fios, sem caixa colorida. */
figure[data-tipo="exemplo"] { max-width: 52rem; margin-top: 2.75rem; padding: 1.75rem 0; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
figure[data-tipo="exemplo"] figcaption { margin: 0 0 .75rem; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--destaque); }
figure[data-tipo="exemplo"] blockquote p { font-size: clamp(1.125rem, 2vw, 1.3125rem); line-height: 1.6; font-weight: 500; color: var(--primaria); }
section[data-foto] > figure[data-tipo="exemplo"] { grid-column: 1; margin-top: 2rem; }
section[data-foto="esquerda"] > figure[data-tipo="exemplo"] { grid-column: 2; }

/* Cards com foto dentro das dobras do pilar: um pouco mais de ar acima. */
main > article > section > [data-tipo="cards"] { margin-top: 2.5rem; }

/* 1ª dobra com o azul cobrindo mais a foto (hero.veu = "forte" no JSON da página). */
@media (min-width: 64rem) {
  article > #inicio[data-veu="forte"] > img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%); mask-image: linear-gradient(90deg, transparent 0%, #000 18%); }
  article > #inicio[data-veu="forte"]::before { background: linear-gradient(90deg, rgb(0 19 65 / .97) 0%, rgb(0 19 65 / .92) 40%, rgb(0 19 65 / .72) 58%, rgb(0 19 65 / .45) 78%, rgb(0 19 65 / .3) 100%); }
}

/* ---------- Título com trecho em destaque (azul itálico) ---------- */
main > article h2 em { font-style: normal; color: var(--destaque); }

/* ---------- Fotos dos cards dentro de um <span> (recebe o degradê) ---------- */
[data-tipo="cards"] article > span[data-foto-card] { position: relative; display: block; border-radius: var(--raio-grande); }

/* ---------- Verificador: perguntas -> caminhos ---------- */
[data-tipo="verificador"] { margin-top: 2.5rem; }
[data-tipo="verificador"] form { display: grid; gap: 1.75rem 3rem; }
[data-tipo="verificador"] fieldset { min-width: 0; margin: 0; padding: 1.25rem 0 0; border: 0; border-top: 1px solid var(--borda); }
[data-tipo="verificador"] legend { float: left; width: 100%; margin-bottom: .875rem; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--primaria); }
[data-tipo="verificador"] legend span { margin-right: .375rem; color: var(--destaque); }
[data-tipo="verificador"] fieldset > div { clear: both; display: flex; flex-wrap: wrap; gap: .5rem; }
[data-tipo="verificador"] label { position: relative; cursor: pointer; }
[data-tipo="verificador"] label input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
[data-tipo="verificador"] label span { display: inline-block; padding: .625rem 1.125rem; border: 1.5px solid var(--borda); border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 600; color: var(--primaria); transition: background var(--transicao), border-color var(--transicao), color var(--transicao); }
[data-tipo="verificador"] label:hover span { border-color: var(--destaque); }
[data-tipo="verificador"] label input:checked + span { border-color: var(--destaque); background: var(--destaque); color: #fff; }
[data-tipo="verificador"] label input:focus-visible + span { outline: 3px solid rgb(10 79 230 / .35); outline-offset: 2px; }
[data-tipo="verificador"] button { justify-self: start; padding: .875rem 1.75rem; border: 0; border-radius: 999px; background: var(--destaque); box-shadow: 0 10px 24px rgb(10 79 230 / .3); font: inherit; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer; }
[data-tipo="verificador"] button:hover { background: var(--destaque-escuro); }
[data-tipo="verificador"] [data-resultado] { margin-top: 2.5rem; padding-top: 2rem; border-top: 2px solid var(--primaria); }
[data-tipo="verificador"] [data-resultado] > p { font-size: clamp(1.375rem, 2.6vw, 1.75rem); font-weight: 700; color: var(--primaria); }
[data-tipo="verificador"] [data-resultado] > p[data-nivel="zero"] { color: var(--destaque); }
[data-tipo="verificador"] [data-resultado] ul { display: grid; gap: 1.25rem 2.5rem; margin-top: 1.25rem; }
[data-tipo="verificador"] [data-resultado] li { padding-left: 1.125rem; border-left: 4px solid var(--borda); }
[data-tipo="verificador"] [data-resultado] li[data-nivel="zero"] { border-color: var(--destaque); }
[data-tipo="verificador"] [data-resultado] li[data-nivel="reduz"] { border-color: #7aa2f7; }
[data-tipo="verificador"] [data-resultado] h3 { font-size: 17px; font-weight: 700; color: var(--primaria); }
[data-tipo="verificador"] [data-resultado] li p { margin-top: .25rem; font-size: 15px; line-height: 1.65; }
[data-tipo="verificador"] [data-resultado] li a { display: inline-block; margin-top: .375rem; font-size: 14.5px; font-weight: 600; color: var(--destaque); }
[data-tipo="verificador"] [data-resultado] a[data-cta] { display: inline-block; margin-top: 1.75rem; padding: .875rem 1.75rem; border-radius: 999px; background: var(--primaria); font-size: 15px; font-weight: 700; color: #fff; }
@media (min-width: 64rem) {
  [data-tipo="verificador"] form { grid-template-columns: repeat(2, 1fr); }
  [data-tipo="verificador"] button { grid-column: 1 / -1; }
  [data-tipo="verificador"] [data-resultado] ul { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Calculadora de carência ---------- */
[data-tipo="calculadora"] { margin-top: 2.5rem; }
[data-tipo="calculadora"] > label { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; font-size: 16px; font-weight: 700; color: var(--primaria); }
[data-tipo="calculadora"] input[type="date"] { padding: .7rem 1rem; border: 1.5px solid var(--borda); border-radius: 999px; background: #fff; font: inherit; font-size: 15px; color: var(--primaria); }
[data-tipo="calculadora"] input[type="date"]:focus { outline: 3px solid rgb(10 79 230 / .3); border-color: var(--destaque); }
[data-tipo="calculadora"] dl { display: grid; gap: 2rem 2.5rem; margin-top: 2rem; }
[data-tipo="calculadora"] dl > div { text-align: center; }
[data-tipo="calculadora"] dt { font-size: 15px; font-weight: 700; color: var(--primaria); }
[data-tipo="calculadora"] dd[data-data] { margin-top: .5rem; font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 700; color: var(--destaque); }
[data-tipo="calculadora"] dd[data-data]::after { content: ""; display: block; width: 70%; height: 7px; margin: .75rem auto 0; border-radius: 999px; background: var(--destaque); }
[data-tipo="calculadora"] dd:last-child { margin-top: .625rem; font-size: 14px; line-height: 1.55; color: var(--texto-suave); }
[data-tipo="calculadora"] > p { margin-top: 1.75rem; font-size: 14px; color: var(--texto-suave); }
@media (min-width: 40rem) { [data-tipo="calculadora"] dl { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { [data-tipo="calculadora"] dl { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Estilo "claro" (referência Vitta): branco, arejado, números
   centrados com barra azul arredondada, fotos com degradê azul e barra lateral ---------- */
article[data-estilo="claro"] > section:nth-of-type(even):not([data-tipo="cotacao"]) { background: #f5f7fb; }
article[data-estilo="claro"] [data-tipo="numeros"] > div { padding-top: 0; border-top: 0; text-align: center; }
article[data-estilo="claro"] [data-tipo="numeros"] > div::before { content: none; }
article[data-estilo="claro"] [data-tipo="numeros"] dt { color: var(--destaque); }
article[data-estilo="claro"] [data-tipo="numeros"] dt::after { content: ""; display: block; width: 70%; height: 8px; margin: 1rem auto 0; border-radius: 999px; background: var(--destaque); }
article[data-estilo="claro"] [data-tipo="numeros"] dd { margin-top: 1rem; }
article[data-estilo="claro"] figure[data-tipo="foto"] { position: relative; }
article[data-estilo="claro"] figure[data-tipo="foto"] img { border-radius: 28px; box-shadow: none; }
article[data-estilo="claro"] figure[data-tipo="foto"]::after, article[data-estilo="claro"] [data-tipo="cards"] span[data-foto-card]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(200deg, rgb(10 79 230 / .08) 0%, rgb(10 79 230 / .18) 45%, rgb(0 19 65 / .62) 100%);
}
article[data-estilo="claro"] figure[data-tipo="foto"]::after { border-radius: 28px; }
article[data-estilo="claro"] figure[data-tipo="foto"]::before {
  content: ""; position: absolute; z-index: 1; left: -12px; bottom: 10%; width: 12px; height: 34%; border-radius: 999px; background: var(--destaque);
}
article[data-estilo="claro"] section[data-foto="esquerda"] figure[data-tipo="foto"]::before { left: auto; right: -12px; top: 8%; bottom: auto; background: var(--primaria); }
article[data-estilo="claro"] [data-tipo="cards"] article img { box-shadow: none; }
article[data-estilo="claro"] [data-tipo="cards"] span[data-foto-card] { transition: transform .25s ease; }
article[data-estilo="claro"] [data-tipo="cards"] article:hover img { transform: none; box-shadow: none; }
article[data-estilo="claro"] [data-tipo="cards"] article:hover span[data-foto-card] { transform: translateY(-4px); }
article[data-estilo="claro"] [data-tipo="cards"] span[data-foto-card]::before {
  content: ""; position: absolute; z-index: 1; left: 1.25rem; bottom: -5px; width: 3.5rem; height: 10px; border-radius: 999px; background: var(--destaque);
}
article[data-estilo="claro"] [data-tipo="cards"] h3 { margin-top: .75rem; }
article[data-estilo="claro"] [data-tipo="grade"] li { border-top: 0; padding: 1.25rem 0 1.25rem 1.125rem; border-left: 4px solid var(--destaque); margin-bottom: 1rem; }
article[data-estilo="claro"] table { border-radius: 20px; }

/* Passos: 4 itens ficam numa linha só (sem item sobrando embaixo). */
@media (min-width: 64rem) { [data-tipo="passos"]:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); } }

/* Dobra só de texto: título à esquerda, conteúdo à direita (layout "lado"). */
@media (min-width: 64rem) {
  main > article > section[data-layout="lado"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); column-gap: 4.5rem; align-items: start; }
  main > article > section[data-layout="lado"] > header { display: block; grid-column: 1; grid-row: 1 / span 6; position: sticky; top: 7rem; }
  main > article > section[data-layout="lado"] > header > p + h2 + p { margin-top: 1rem; max-width: none; }
  main > article > section[data-layout="lado"] > :not(header) { grid-column: 2; max-width: none; margin-top: 0; }
  main > article > section[data-layout="lado"] > :not(header) + :not(header) { margin-top: 1.25rem; }
}