/* =========================================================
   ESMALTE — layout de cada página
   ========================================================= */

/* =========================================================
   INÍCIO
   ========================================================= */

/* ---- Hero: texto à esquerda, leque de abas à direita ---- */
.hero {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(110% 80% at 92% 20%, var(--nevoa) 0, rgba(224,207,230,0) 55%),
    radial-gradient(60% 55% at 100% 100%, rgba(191,227,214,.7) 0, rgba(191,227,214,0) 60%),
    var(--porcelana);
  padding-block: clamp(40px, 7vw, 96px) clamp(56px, 8vw, 112px);
}
.hero__grade {
  display: grid;
  gap: var(--e-8);
  align-items: center;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 600;
  color: var(--grafite);
  margin-bottom: var(--e-4);
}
.hero__eyebrow::before {          /* mini aba marfim como marcador */
  content: "";
  width: 12px; height: 18px;
  border-radius: 4px 4px 8px 8px;
  background: var(--marfim-3);
  box-shadow: inset 0 0 0 1px rgba(46,26,54,.12);
}
.hero h1 {
  font-size: var(--t-hero);
  line-height: var(--lh-hero);
  letter-spacing: -.01em;
}
.hero .sub { max-width: 46ch; margin-top: var(--e-6); }

/* Composição: escala pelo tamanho da própria caixa (cqw) */
.leque {
  position: relative;
  width: min(100%, 520px);
  margin-inline: auto;
  aspect-ratio: 1 / .92;
  container-type: inline-size;
}
.leque .forma--menta { width: 58cqw; height: 58cqw; right: -4cqw; top: 0; }
.leque .forma--nevoa { width: 38cqw; height: 38cqw; left: 2cqw; bottom: 2cqw; }
.leque .forma--marfim { width: 11cqw; height: 11cqw; left: 16cqw; top: 14cqw; }
.leque__abas { position: absolute; inset: 0; }
.leque .aba { width: 18cqw; height: 46cqw; bottom: 10cqw; font-size: max(.75rem, 2.8cqw); }
.leque .aba--c3 { left: 18cqw; transform: rotate(-14deg); }
.leque .aba--a3 { left: 33cqw; transform: rotate(-5deg); }
.leque .aba--a2 { left: 48cqw; transform: rotate(4deg); }
.leque .aba--a1 { left: 63cqw; transform: rotate(13deg); }
.leque__simbolo { position: absolute; width: 19cqw; right: 6cqw; top: 6cqw; }

@media (min-width: 1024px) {
  .hero__grade { grid-template-columns: 1.08fr .92fr; gap: var(--e-12); }
  .hero { min-height: calc(100svh - 72px); display: flex; align-items: center; }
  .hero > .envolve { width: 100%; }
}

/* ---- Por que aqui: 3 itens, o do meio mais baixo ---- */
.motivos {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--e-12);
}
.motivo { position: relative; }
.motivo__ico { position: relative; width: 72px; height: 72px; margin-bottom: var(--e-4); }
.motivo__ico::before {             /* gota menta atrás do traço */
  content: "";
  position: absolute;
  inset: 10px 4px 0 14px;
  border-radius: 50% 50% 46% 54%;
  background: var(--menta);
}
.motivo__ico svg { position: relative; width: 72px; height: 72px; }
.motivo h3 { margin-bottom: var(--e-2); }
@media (min-width: 768px) {
  .motivos { grid-template-columns: repeat(3, 1fr); gap: var(--e-8); }
  .motivo:nth-child(2) { margin-top: var(--e-16); }
}

/* ---- Tratamentos em destaque: grade que quebra ---- */
.destaques {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--e-4);
}
.destaque { display: flex; flex-direction: column; }
.destaque__ico { width: 56px; height: 56px; margin-bottom: var(--e-4); }
.destaque p { color: var(--grafite); }
.destaque .link { margin-top: auto; padding-top: var(--e-3); }
.destaque--alto .destaque__ilustra { width: min(220px, 70%); margin: var(--e-2) 0 var(--e-6); }
.destaques__fim { margin-top: var(--e-8); }

@media (min-width: 640px) {
  .destaques { grid-template-columns: 1fr 1fr; gap: var(--e-6); }
}
@media (min-width: 1024px) {
  .destaques {
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-template-areas: "alto b c" "alto d d";
  }
  .destaque--alto { grid-area: alto; }
  .destaque:nth-child(2) { grid-area: b; }
  .destaque:nth-child(3) { grid-area: c; }
  .destaque--largo { grid-area: d; display: grid; grid-template-columns: auto 1fr; column-gap: var(--e-6); align-items: start; }
  .destaque--largo .destaque__ico { grid-row: span 3; width: 72px; height: 72px; }
  .destaque--largo .link { margin-top: 0; }
}

/* ---- Equipe resumida ---- */
.equipe-mini {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-8) var(--e-4);
}
.equipe-mini li { display: grid; gap: var(--e-3); align-content: start; }
.equipe-mini strong { display: block; color: var(--tinta); font-weight: 600; line-height: 1.3; }
.equipe-mini span { color: var(--cinza); }
.equipe-mini__fim { margin-top: var(--e-8); }
@media (min-width: 768px) {
  .equipe-mini { grid-template-columns: repeat(4, 1fr); gap: var(--e-6); }
  .equipe-mini li:nth-child(even) { margin-top: var(--e-8); }
}

/* Avatar ilustrado sem rosto: forma de porcelana + inicial */
.avatar {
  position: relative;
  width: 88px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--av, var(--menta));
  box-shadow: inset 0 0 0 1px rgba(46,26,54,.08);
}
.avatar::before {           /* reflexo */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.9) 0 9%, rgba(255,255,255,0) 36%);
}
.avatar::after {            /* ombros em forma de aba */
  content: "";
  position: absolute;
  left: 18%; right: 18%; bottom: -26%;
  height: 52%;
  border-radius: 40% 40% 0 0;
  background: rgba(255,255,255,.55);
}
.avatar b {
  position: relative;
  z-index: 1;
  margin-top: -14%;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--tinta);
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
.av-menta  { --av: var(--menta); }
.av-nevoa  { --av: var(--nevoa); }
.av-marfim { --av: var(--marfim-2); }
.av-marfim2 { --av: var(--marfim); }

/* ---- Depoimentos (ameixa-noite) ---- */
.falas {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--e-8);
}
.fala { display: grid; gap: var(--e-3); justify-items: start; }
.estrelas { display: flex; gap: 4px; color: var(--menta); }
.estrelas svg { width: 20px; height: 20px; fill: currentColor; }
.fala blockquote p {
  font-family: var(--fonte-display);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.3;
  color: var(--porcelana);
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
.falas > li:first-child blockquote p { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.fala figcaption { color: var(--cinza-claro); font-weight: 600; }
@media (min-width: 1024px) {
  .falas { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--e-12); align-items: start; }
  .falas > li:nth-child(n+2) { padding-top: var(--e-6); }
  .falas > li:nth-child(3) { margin-top: var(--e-12); }
}

/* ---- Chamada final: abas que se alinham ---- */
.chamada__grade { display: grid; gap: var(--e-12); align-items: center; }
.chamada__abas {
  display: flex;
  gap: clamp(8px, 2vw, 16px);
  justify-content: flex-start;
  align-items: flex-end;
  height: 200px;
}
.chamada__abas .aba { position: relative; width: clamp(56px, 12vw, 84px); height: 180px; }
@media (min-width: 1024px) {
  .chamada__grade { grid-template-columns: 1.2fr .8fr; }
  .chamada__abas { justify-content: flex-end; height: 240px; }
  .chamada__abas .aba { height: 220px; }
}

/* =========================================================
   CABEÇALHO DAS PÁGINAS INTERNAS
   ========================================================= */
.cabeca {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(70% 90% at 96% 10%, var(--nevoa) 0, rgba(224,207,230,0) 60%),
    var(--porcelana);
  padding-block: clamp(40px, 6vw, 80px) clamp(40px, 6vw, 72px);
}
.cabeca__grade { display: grid; gap: var(--e-6); align-items: center; }
.cabeca .sub { max-width: 44ch; }
.cabeca__rotulo { margin-top: var(--e-4); }
.cabeca--curta { padding-bottom: var(--e-8); }

/* Arte da direita: uma composição pequena diferente em cada página */
.cabeca__arte {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 5 / 3;
  justify-self: start;
  container-type: inline-size;
}
.cabeca__arte .forma--menta { width: 46cqw; height: 46cqw; right: 6cqw; top: 2cqw; }
.cabeca__arte .forma--nevoa { width: 52cqw; height: 52cqw; right: 2cqw; top: 0; }
.cabeca__arte .forma--marfim { width: 12cqw; height: 12cqw; left: 22cqw; bottom: 8cqw; }
.cabeca__arte--abas .aba { width: 15cqw; height: 40cqw; bottom: 6cqw; }
.cabeca__arte--abas .aba--a3 { left: 26cqw; transform: rotate(-10deg); }
.cabeca__arte--abas .aba--a2 { left: 42cqw; transform: rotate(-1deg); }
.cabeca__arte--abas .aba--a1 { left: 58cqw; transform: rotate(9deg); }
.cabeca__arte--avatares .avatar { position: absolute; width: 30cqw; border: 3px solid var(--porcelana); }
.cabeca__arte--avatares .avatar b { font-size: 9cqw; }
.cabeca__arte--avatares .av-menta { left: 14cqw; top: 22cqw; }
.cabeca__arte--avatares .av-marfim { left: 36cqw; top: 6cqw; }
.cabeca__arte--avatares .av-nevoa { left: 58cqw; top: 24cqw; }
.cabeca__arte--simbolo img { position: absolute; width: 22cqw; right: 24cqw; top: 10cqw; }

@media (max-width: 639px) {
  .cabeca__arte { display: none; }   /* no celular, o título vem direto */
}
@media (min-width: 768px) {
  .cabeca__grade { grid-template-columns: 1fr auto; gap: var(--e-12); }
  .cabeca__arte { width: 320px; }
}

/* Faixa final (névoa, com uma forma menta saindo pela direita) */
.faixa { overflow: clip; }
.faixa::after {
  content: "";
  position: absolute;
  right: -80px; top: 50%;
  width: clamp(200px, 30vw, 380px);
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0 10%, rgba(255,255,255,0) 38%), var(--menta);
  pointer-events: none;
}
.faixa--esq::after { right: auto; left: -90px; top: auto; bottom: -120px; translate: none; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0 10%, rgba(255,255,255,0) 38%), var(--marfim-2); }
@media (min-width: 768px) { .faixa--esq .faixa-final { padding-left: clamp(0px, 16vw, 220px); } }
.faixa-final { position: relative; z-index: 1; }
.faixa-final .sub { max-width: 40ch; }
@media (max-width: 639px) { .faixa::after { width: 160px; right: -70px; top: 24px; translate: none; opacity: .7; } }

/* =========================================================
   TRATAMENTOS — abas por categoria
   ========================================================= */
.secao--abas, .secao--junto { padding-top: var(--e-8); }
.abas__lista {
  position: relative;
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
  padding: 4px;
  margin: -4px -4px 0;
}
.abas__lista::-webkit-scrollbar { display: none; }
.abas__aba {
  flex: none;
  min-height: var(--toque);
  padding: 0 var(--e-4);
  border: 2px solid rgba(46,26,54,.14);
  border-radius: 999px;
  background: var(--branco);
  color: var(--grafite);
  font-weight: 600;
  scroll-snap-align: start;
  transition: background-color var(--rapido) ease, color var(--rapido) ease, border-color var(--rapido) ease;
}
.abas__aba:hover { border-color: var(--ameixa); color: var(--ameixa); }
.abas__aba[aria-selected="true"] { background: var(--ameixa); border-color: var(--ameixa); color: var(--branco); }
.abas__rotulo { margin-top: var(--e-4); }
.abas__painel { margin-top: var(--e-8); }
.abas__painel:focus-visible { outline-offset: 8px; }
/* Sem JavaScript: todas as categorias aparecem uma depois da outra */
[data-abas]:not(.abas--ativas) .abas__lista { display: none; }
[data-abas]:not(.abas--ativas) .abas__painel h2 { position: static !important; width: auto; height: auto; clip-path: none; white-space: normal; margin-bottom: var(--e-4); }

.tratamentos {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--e-4);
}
.trat { display: flex; flex-direction: column; scroll-margin-top: 120px; }
.trat > p { color: var(--grafite); }
.trat__info {
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid rgba(46,26,54,.1);
  display: grid;
  gap: var(--e-3);
}
.trat__info dt { font-size: 1rem; font-weight: 700; color: var(--tinta); }
.trat__info dd { margin: 0; color: var(--grafite); }
.trat__agendar { margin-top: auto; padding-top: var(--e-3); align-self: flex-start; }
/* Card aberto por âncora (vindo do Início) ganha um contorno calmo */
.trat:target { box-shadow: 0 0 0 2px var(--menta), var(--sombra); }

@media (min-width: 640px) {
  .tratamentos { grid-template-columns: 1fr 1fr; gap: var(--e-6); }
}
@media (min-width: 1024px) {
  .tratamentos { grid-template-columns: repeat(3, 1fr); }
  .tratamentos > :nth-child(2) { margin-top: var(--e-8); }     /* grade que quebra */
  .estetica { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--e-6); align-items: start; }
  .tratamentos--estetica { grid-template-columns: 1fr 1fr; }
  .tratamentos--estetica > :nth-child(3) { grid-column: 1 / -1; }
  .escala { position: sticky; top: 96px; }
}

/* ---- Escala de cor (componente de clareamento) ---- */
.escala { margin-top: var(--e-6); background: var(--porcelana); }
@media (min-width: 1024px) { .escala { margin-top: 0; } }
.escala__texto { margin-top: var(--e-2); }
.escala__grade { display: flex; gap: var(--e-6); align-items: center; margin-top: var(--e-6); flex-wrap: wrap; }
.escala__dente { width: 110px; height: auto; flex: none; }
.escala__esmalte {
  fill: var(--tom, var(--marfim-2));
  stroke: var(--grafite);
  stroke-width: 3;
  stroke-linejoin: round;
  transition: fill var(--medio) var(--curva-movimento);
}
.escala__reflexo { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; opacity: .9; }
.escala[data-tom="c3"] { --tom: var(--marfim-3); }
.escala[data-tom="a3"] { --tom: var(--marfim-2); }
.escala[data-tom="a2"] { --tom: var(--marfim); }
.escala[data-tom="a1"] { --tom: #FFFDF8; }

.escala__tons { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; gap: var(--e-2); flex-wrap: wrap; }
.escala__tons legend { font-weight: 600; color: var(--tinta); margin-bottom: var(--e-3); padding: 0; float: left; width: 100%; }
.tom {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: var(--toque);
  padding: 6px 6px 8px;
  border-radius: 14px;
  cursor: pointer;
}
.tom input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tom__aba {
  width: 34px; height: 54px;
  border-radius: 10px 10px 20px 20px;
  background: var(--t);
  box-shadow: inset 0 0 0 1px rgba(46,26,54,.18);
  transition: transform var(--rapido) var(--curva-entrada);
}
.tom--c3 { --t: var(--marfim-3); }
.tom--a3 { --t: var(--marfim-2); }
.tom--a2 { --t: var(--marfim); }
.tom--a1 { --t: #FFFDF8; }
/* Círculo de seleção visível (o professor pede o "radio" à mostra) */
.tom__nome { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9375rem; color: var(--grafite); }
.tom__nome::before {
  content: "";
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--cinza);
  background: var(--branco);
  transition: border-width var(--rapido) ease, border-color var(--rapido) ease;
}
.tom:has(input:checked) { background: var(--branco); box-shadow: inset 0 0 0 2px var(--ameixa); }
.tom:has(input:checked) .tom__nome { color: var(--ameixa); }
.tom:has(input:checked) .tom__nome::before { border: 5px solid var(--ameixa); }
.tom:has(input:checked) .tom__aba { transform: translateY(-3px); }
.tom:has(input:focus-visible) { outline: 3px solid var(--ameixa); outline-offset: 2px; }
.escala__atual { margin-top: var(--e-4); font-weight: 600; color: var(--tinta); }
.escala .rotulo { margin-top: var(--e-2); }

/* =========================================================
   EQUIPE
   ========================================================= */
.dentistas { list-style: none; padding: 0; display: grid; gap: var(--e-4); }
.dentista { display: grid; grid-template-columns: auto 1fr; gap: var(--e-6); align-items: start; }
.avatar--g { width: 104px; }
.avatar--g b { font-size: 3rem; }
.dentista h3 { margin-bottom: 2px; }
.dentista__area { font-weight: 600; color: var(--grafite); }
.dentista__frase { margin-top: var(--e-3); font-family: var(--fonte-display); font-size: 1.1875rem; line-height: 1.4; color: var(--tinta); font-variation-settings: "SOFT" 100, "WONK" 0; }
.dentista__registro { margin-top: var(--e-3); color: var(--cinza); }
@media (max-width: 420px) {
  .dentista { grid-template-columns: 1fr; gap: var(--e-4); }
}
@media (min-width: 768px) {
  .dentistas { grid-template-columns: 1fr 1fr; gap: var(--e-6); }
  .dentistas > :nth-child(even) { margin-top: var(--e-12); }
}

/* =========================================================
   A CLÍNICA
   ========================================================= */
/* Etapas da primeira consulta: cada uma marcada por uma aba da escala */
.etapas { list-style: none; padding: 0; display: grid; gap: var(--e-8); }
.etapa { position: relative; padding-left: 76px; min-height: 80px; }
.etapa__aba {
  position: absolute;
  left: 0; top: 0;
  width: 52px; height: 80px;
  display: flex; justify-content: center;
  padding-top: 12px;
  border-radius: var(--raio-aba);
  box-shadow: var(--sombra), inset 0 0 0 1px rgba(46,26,54,.08);
  font-family: var(--fonte-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tinta);
  overflow: hidden;
}
.etapa__aba.aba--c3 { background: var(--marfim-3); }
.etapa__aba.aba--a3 { background: var(--marfim-2); }
.etapa__aba.aba--a1 { background: #FFFDF8; }
.etapa__aba::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--angulo-brilho), transparent 30%, rgba(255,255,255,.75) 42%, transparent 54%); }
.etapa__passo { font-size: 1rem; font-weight: 700; color: var(--cinza); margin-bottom: var(--e-1); }
.etapa h3 { margin-bottom: var(--e-2); }
@media (min-width: 768px) {
  .etapas { grid-template-columns: repeat(3, 1fr); gap: var(--e-6); }
  .etapa { padding-left: 0; padding-top: 104px; }
  .etapa:nth-child(2) { margin-top: var(--e-8); }
  .etapa:nth-child(3) { margin-top: var(--e-16); }
}

/* O espaço: um card grande + dois menores */
.espacos { list-style: none; padding: 0; display: grid; gap: var(--e-4); }
.espaco__ilustra { margin: calc(var(--e-6) * -1) calc(var(--e-6) * -1) var(--e-4); padding: var(--e-6) var(--e-6) var(--e-2); background: var(--porcelana); }
.espaco__ilustra svg { width: 100%; height: auto; }
.espaco .rotulo { margin-bottom: var(--e-2); }
.espaco--grande { display: flex; flex-direction: column; }
.espaco--grande .espaco__ilustra { flex: 1; display: grid; place-items: center; }
@media (min-width: 768px) {
  .espacos { grid-template-columns: 1.3fr 1fr; gap: var(--e-6); }
  .espaco--grande { grid-row: span 2; }
}

/* Perguntas frequentes (acordeão) */
.faq__grade { display: grid; gap: var(--e-6); }
.faq { max-width: 720px; }
.faq__item { border-bottom: 1px solid rgba(46,26,54,.14); }
.faq__item:first-child { border-top: 1px solid rgba(46,26,54,.14); }
.faq__item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 64px;
  padding-block: var(--e-3);
  cursor: pointer;
  font-family: var(--fonte-display);
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--tinta);
  line-height: 1.3;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .ico { color: var(--ameixa); transition: transform var(--medio) var(--curva-movimento); }
.faq__item summary:hover { color: var(--ameixa); }
.faq__item[open] summary .ico { transform: rotate(45deg); }
.faq__resposta { padding-bottom: var(--e-6); }
.faq .acoes { margin-top: var(--e-8); }
/* Altura animada suave onde o navegador permite */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    height: 0;
    overflow: clip;
    transition: height var(--medio) var(--curva-movimento), content-visibility var(--medio) allow-discrete;
  }
  .faq__item[open]::details-content { height: auto; }
}
@media (min-width: 1024px) {
  .faq__grade { grid-template-columns: .8fr 1.2fr; gap: var(--e-12); align-items: start; }
}

/* =========================================================
   CONTATO
   ========================================================= */
.secao--contato { padding-top: var(--e-8); }
.contato__grade { display: grid; gap: var(--e-12); align-items: start; }
@media (min-width: 1024px) {
  .contato__grade { grid-template-columns: 1.25fr .9fr; gap: var(--e-16); }
  .info { position: sticky; top: 96px; }
}
.form-caixa { max-width: 600px; }

/* ---- Formulário (regras do professor §4.6) ---- */
.form { position: relative; display: grid; gap: var(--e-8); }    /* ~32px entre grupos */
.campo { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--e-1); }   /* ~4px rótulo → campo */
.campo > label:not(.caixa),
.campo legend { font-weight: 600; color: var(--tinta); padding: 0; }
.campo legend { margin-bottom: var(--e-2); }
.campo__tipo { font-weight: 400; color: var(--cinza); }
.campo__dica { font-size: 1rem; color: var(--cinza); }
.entrada {
  width: 100%;
  min-height: 52px;
  padding: var(--e-3) var(--e-4);
  border: 2px solid var(--cinza);
  border-radius: 12px;
  background: var(--branco);
  color: var(--tinta);
  font-size: 1rem;
  transition: border-color var(--rapido) ease, box-shadow var(--rapido) ease;
}
.entrada:hover { border-color: var(--grafite); }
.entrada:focus-visible { outline: none; border-color: var(--ameixa); box-shadow: 0 0 0 3px rgba(106,55,122,.3); }
.entrada--curta { max-width: 15rem; }
textarea.entrada { min-height: 120px; resize: vertical; line-height: 1.5; }

/* Cards de opção com o círculo visível */
.opcoes { display: grid; gap: var(--e-2); }
@media (min-width: 480px) { .opcoes { grid-template-columns: 1fr 1fr; } }
.opcao, .radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 56px;
  padding: var(--e-3) var(--e-4);
  border: 2px solid rgba(46,26,54,.3);
  border-radius: 14px;
  background: var(--branco);
  color: var(--tinta);
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color var(--rapido) ease, background-color var(--rapido) ease;
}
.opcao input, .radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.opcao__circulo, .radio::before {
  content: "";
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--cinza);
  background: var(--branco);
  transition: border-width var(--rapido) ease, border-color var(--rapido) ease;
}
.opcao:hover, .radio:hover { border-color: var(--ameixa); }
.opcao:has(input:checked), .radio:has(input:checked) { border-color: var(--ameixa); background: #FBF8FC; }
.opcao:has(input:checked) .opcao__circulo, .radio:has(input:checked)::before { border: 7px solid var(--ameixa); }
.opcao:has(input:focus-visible), .radio:has(input:focus-visible) { outline: 3px solid var(--ameixa); outline-offset: 2px; }
.radios { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.radio { min-height: var(--toque); padding-block: var(--e-2); }

/* Caixa de autorização */
.caixa { display: flex; gap: var(--e-3); align-items: flex-start; min-height: var(--toque); cursor: pointer; color: var(--tinta); }
.caixa input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--ameixa); cursor: pointer; }

/* Erros: vermelho + ícone + texto específico */
.campo__erro { display: flex; gap: var(--e-2); align-items: flex-start; margin-top: var(--e-1); color: var(--erro); font-weight: 600; font-size: .9375rem; }
.campo__erro[hidden] { display: none; }
.campo__erro .ico { width: 20px; height: 20px; margin-top: 1px; }
.campo--erro .entrada { border-color: var(--erro); }
.campo--erro .opcao { border-color: rgba(180,35,24,.6); }
.campo--erro .caixa input { outline: 2px solid var(--erro); outline-offset: 2px; }
.form__resumo { display: flex; gap: var(--e-3); align-items: center; padding: var(--e-4); border-radius: 14px; background: #FDF0EF; color: var(--erro); font-weight: 600; border: 1px solid rgba(180,35,24,.3); }
.form__resumo[hidden] { display: none; }

/* Anti-spam: fora da tela, mas sem "display:none" (alguns robôs pulam esses) */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.form__acoes .btn--p { min-width: 12rem; }
.btn[aria-busy="true"] { cursor: progress; }

/* Sucesso (demo) */
.sucesso { padding: var(--e-8) var(--e-6); border-radius: var(--raio-card); background: #EEF7F1; border: 1px solid rgba(30,123,70,.3); }
.sucesso:focus { outline: none; }
.sucesso__ico { width: 40px; height: 40px; color: var(--sucesso); margin-bottom: var(--e-4); }
.sucesso h2 { font-size: var(--t-h3); color: var(--sucesso); }
.sucesso p { margin: var(--e-2) 0 var(--e-6); }
@media (prefers-reduced-motion: no-preference) {
  .sucesso:not([hidden]) { animation: sucesso-entra var(--medio) var(--curva-entrada); }
}
@keyframes sucesso-entra { from { opacity: 0; filter: blur(4px); } }

/* ---- Cartão de informações ---- */
.info { display: grid; gap: var(--e-6); background: var(--porcelana); }
.info h3 { display: flex; align-items: center; gap: var(--e-2); font-size: 1.25rem; margin-bottom: var(--e-2); }
.info h3 .ico { color: var(--grafite); }
.info__bloco p + p { margin-top: 2px; }
.info__bloco .rotulo { margin-top: var(--e-2); }
.info__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-6); }
.mapa { margin: 0; }
.mapa svg { width: 100%; height: auto; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(46,26,54,.08); }
.mapa .rotulo { margin-top: var(--e-2); }