/* ==========================================================================
   Farmácias Aguiar · sob-medida.css · landing de venda do Aguiar Sob Medida
   Sub-identidade da manipulação (Linho, Floresta, Argila em itálico), azul da
   marca mãe no cabeçalho, no selo e na garantia. Amarelo só como traço e luz.
   Prefixo sm-. Nada aqui mostra ativo, efeito, dose ou preço de fórmula.
   ========================================================================== */

[data-sub="sob-medida"] {
  --sm-escura: #173A2B;
  --sm-verde-claro: #E3ECE6;
  --sm-raio: 28px;
  --secao: clamp(4rem, 2.6rem + 5vw, 8rem);
}
/* o botão fixo do núcleo vira a barra de avaliação desta página */
[data-sub="sob-medida"] .flutuante { display: none !important; }

.m-enfase {
  font-family: var(--f-editorial); font-style: italic; font-weight: 400;
  color: var(--argila); letter-spacing: -0.02em; padding-right: .04em;
}
.gesto { stroke: var(--argila-viva); }
.sm-cab { display: grid; gap: var(--e-4); max-width: 780px; margin-bottom: clamp(2.25rem, 1.8rem + 2.6vw, 4rem); }
.sm-cab--centro { margin-inline: auto; text-align: center; justify-items: center; }
.sm-cab--centro .texto-l { margin-inline: auto; }
.kicker { color: var(--folha); }

svg[viewBox="0 0 24 24"]:not([fill]) { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- CTA principal ---------- */
.sm-cta {
  --bg: var(--floresta); --fg: #fff;
  min-height: 60px; padding: .5em .55em .5em 1.6em; gap: 1em; font-size: 1.0625rem;
  box-shadow: 0 16px 36px -14px rgba(31,74,55,.65), inset 0 0 0 1px rgba(255,255,255,.06);
}
.sm-cta:hover { --bg: var(--sm-escura); box-shadow: 0 20px 44px -14px rgba(31,74,55,.75); }
.sm-cta__seta {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--amarelo); color: var(--azul-900); flex: none;
  transition: transform var(--dur-2) var(--ease-padrao);
}
.sm-cta__seta svg { width: 20px; height: 20px; }
.sm-cta:hover .sm-cta__seta { transform: translateX(3px) rotate(-8deg); }
.sm-cta--cheio { width: 100%; justify-content: space-between; }
.sm-cta--claro { --bg: var(--amarelo); --fg: var(--azul-900); box-shadow: var(--s-amarelo); }
.sm-cta--claro:hover { --bg: var(--amarelo-400); }
.sm-cta--claro .sm-cta__seta { background: var(--azul-900); color: var(--amarelo); }
.sm-sec { --fg: var(--floresta); --bd: rgba(31,74,55,.45); min-height: 60px; }
.sm-sec:hover { --bg: var(--sm-verde-claro); --bd: var(--floresta); }
.sm-sec--claro { --fg: #fff; --bd: rgba(255,255,255,.5); }
.sm-sec--claro:hover { --bg: rgba(255,255,255,.08); --bd: #fff; }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.sm-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(1.25rem, .5rem + 3vw, 3.5rem) clamp(2.5rem, 2rem + 2vw, 3.5rem);
  background:
    radial-gradient(55% 65% at 80% 38%, rgba(169,194,175,.42), transparent 70%),
    radial-gradient(40% 50% at 95% 90%, rgba(217,164,65,.14), transparent 70%),
    var(--fundo);
}
.sm-hero__grade { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); align-items: center; }
@media (min-width: 1024px) {
  .sm-hero__grade { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; }
}
.sm-hero__texto { position: relative; z-index: 2; }
.sm-hero__selo {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: var(--r-pill);
  background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--s-1);
  font-size: .9375rem; font-weight: 600; color: var(--tinta); margin-bottom: var(--e-5);
}
.sm-pulso { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--folha); flex: none; }
.sm-pulso::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--folha); opacity: 0; animation: sm-pulso 2.2s var(--ease-saida) infinite; }
@keyframes sm-pulso { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }

.sm-hero__dor {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  letter-spacing: -0.02em; line-height: 1.2; color: var(--folha); margin-bottom: var(--e-3); min-height: 1.25em;
}
.sm-dor__giro { position: relative; display: inline-grid; }
.sm-dor__item { grid-area: 1 / 1; opacity: 0; transform: translateY(.45em); transition: opacity .45s var(--ease-padrao), transform .55s var(--ease-saida); white-space: nowrap; }
.sm-dor__item.is-ativo { opacity: 1; transform: none; }
.sm-dor__item.is-saindo { opacity: 0; transform: translateY(-.45em); }

.sm-hero__titulo {
  font-family: var(--f-display); font-weight: 800; color: var(--tinta);
  font-size: clamp(2.875rem, 1.6rem + 4.6vw, 5.5rem); line-height: .95; letter-spacing: -0.04em;
  margin-bottom: var(--e-5);
}
.sm-hero__titulo .m-enfase { font-size: 1.06em; letter-spacing: -0.03em; }
.sm-linha { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.sm-linha > span { display: inline-block; }
.sm-hero__lead { font-size: var(--t-lead); line-height: 1.55; color: var(--corpo); max-width: 56ch; margin-bottom: var(--e-6); text-wrap: pretty; }
.sm-hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sm-hero__micro { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: var(--e-5); font-size: .9375rem; color: var(--corpo); font-weight: 500; }
.sm-hero__micro li { display: inline-flex; align-items: center; gap: 8px; }
.sm-hero__micro svg { width: 18px; height: 18px; color: var(--folha); }
@media (max-width: 519px) {
  .sm-hero__acoes .botao { width: 100%; }
  .sm-hero__acoes .sm-cta { justify-content: space-between; }
  .sm-hero__micro { gap: 8px 16px; font-size: .875rem; }
}

/* palco do hero */
.sm-palco { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 580px; justify-self: center; }
.sm-palco__disco { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFFDF9 0%, #ECE4D7 72%); box-shadow: inset 0 0 0 1px #E2D9CA, 0 40px 80px -40px rgba(31,74,55,.35); }
.sm-palco__regua { position: absolute; inset: 1%; width: 98%; height: 98%; color: var(--argila); }
.sm-palco__regua circle { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: .6 3.4; opacity: .55; }
.sm-palco__regua .sm-regua--g { stroke-width: 2.4; stroke-dasharray: .8 19.2; opacity: .8; }
.sm-palco__traco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.sm-palco__traco path { stroke-width: 7; opacity: .95; }
.sm-palco__capsula { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; z-index: 1; filter: drop-shadow(0 30px 40px rgba(31,74,55,.2)); animation: sm-flutua 7s ease-in-out infinite; }
@keyframes sm-flutua { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-1.5deg); } }

.sm-ficha {
  position: absolute; z-index: 3; left: -2%; bottom: 4%; width: min(270px, 56%);
  background: rgba(255,253,249,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--linha); border-radius: 18px; box-shadow: var(--s-3); padding: 14px 16px 12px;
  transform: rotate(-3deg);
}
.sm-ficha__topo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .875rem; color: var(--tinta); padding-bottom: 10px; border-bottom: 1px dashed var(--linha); }
.sm-ficha__lote { margin-left: auto; flex: none; font-size: .6875rem; color: var(--folha); background: var(--sm-verde-claro); padding: 3px 7px; border-radius: 6px; white-space: nowrap; }
.sm-ficha dl { display: grid; gap: 6px; margin-top: 10px; }
.sm-ficha dl > div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: baseline; }
.sm-ficha dt { font-family: var(--f-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.sm-ficha dd { font-size: .875rem; font-weight: 600; color: var(--tinta); line-height: 1.3; }
.sm-ficha__nome { font-family: var(--f-editorial); font-style: italic; font-weight: 500; font-size: 1.25rem !important; color: var(--argila) !important; }

.sm-progresso {
  position: absolute; z-index: 3; right: -1%; top: 6%; width: min(240px, 50%);
  background: var(--floresta); color: #E9F1EC; border-radius: 18px; padding: 14px 16px; box-shadow: 0 24px 50px -20px rgba(23,58,43,.7);
  transform: rotate(2.5deg);
}
.sm-progresso__rot { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--amarelo); }
.sm-progresso ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.sm-progresso li { position: relative; padding-left: 24px; font-size: .875rem; line-height: 1.3; color: rgba(233,241,236,.72); }
.sm-progresso li::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(233,241,236,.45); }
.sm-progresso li.is-feito { color: #fff; }
.sm-progresso li.is-feito::before { background: var(--folha-clara); border-color: var(--folha-clara); box-shadow: inset 0 0 0 3px var(--floresta); }
.sm-progresso li.is-agora { color: #fff; font-weight: 700; }
.sm-progresso li.is-agora::before { border-color: var(--amarelo); background: radial-gradient(circle, var(--amarelo) 0 3px, transparent 3.5px); animation: sm-agora 1.6s ease-in-out infinite; }
@keyframes sm-agora { 50% { box-shadow: 0 0 0 5px rgba(247,234,35,.18); } }

@media (max-width: 1023px) {
  .sm-palco { max-width: 460px; margin-top: 8px; }
}
@media (max-width: 519px) {
  .sm-palco { max-width: 360px; }
  .sm-ficha { left: 0; bottom: 0; width: 64%; padding: 11px 12px 9px; }
  .sm-ficha dl > div { grid-template-columns: 78px 1fr; }
  .sm-ficha dd { font-size: .8125rem; }
  .sm-ficha__topo { font-size: .8125rem; }
  .sm-progresso { display: none; }
  .sm-ficha { width: 70%; left: -2%; bottom: -2%; }
}

/* faixa de confiança */
.sm-confianca {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  background: var(--linha); border: 1px solid var(--linha); border-radius: 20px; overflow: hidden; box-shadow: var(--s-1);
}
.sm-confianca li { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--superficie); font-size: .9375rem; line-height: 1.35; color: var(--corpo); }
.sm-confianca strong { display: block; font-size: 1rem; }
.sm-confianca__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sm-verde-claro); color: var(--floresta); flex: none; }
.sm-confianca__ico svg { width: 24px; height: 24px; }
.sm-confianca li:last-child { background: var(--sm-verde-claro); }
.sm-confianca__num { font-family: var(--f-display); font-weight: 800; font-size: 1.75rem; letter-spacing: -0.03em; color: var(--floresta); flex: none; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .sm-confianca { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .sm-confianca { grid-template-columns: minmax(0, 1fr); }
  .sm-confianca li { padding: 13px 14px; }
}

/* ==========================================================================
   2. DORES
   ========================================================================== */
.sm-dores__grade { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .sm-dores__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.sm-dor {
  width: 100%; height: 100%; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 22px 20px 18px; border-radius: 22px; border: 1px solid var(--linha); background: var(--superficie);
  box-shadow: var(--s-1); color: var(--corpo); position: relative; overflow: hidden;
  transition: transform var(--dur-2) var(--ease-padrao), box-shadow var(--dur-2), border-color var(--dur-2), background-color var(--dur-2);
}
.sm-dor:hover { transform: translateY(-4px); box-shadow: var(--s-3); border-color: #CFDDD4; }
.sm-dor__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--sm-verde-claro); color: var(--floresta); margin-bottom: 4px; transition: background-color var(--dur-2), color var(--dur-2); }
.sm-dor__ico svg { width: 28px; height: 28px; }
.sm-dor:hover .sm-dor__ico { background: var(--floresta); color: #fff; }
.sm-dor:hover .sm-dor__ico .gesto { stroke: var(--amarelo); }
.sm-dor__nome { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.015em; color: var(--tinta); }
.sm-dor__txt { font-size: .9375rem; line-height: 1.5; flex: 1; }
.sm-dor__ir { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 700; font-size: .9375rem; color: var(--folha); }
.sm-dor__ir::after { content: "→"; transition: transform var(--dur-2) var(--ease-padrao); }
.sm-dor:hover .sm-dor__ir::after { transform: translateX(4px); }
@media (max-width: 599px) {
  .sm-dores__grade { gap: 10px; }
  .sm-dor { padding: 16px 14px 14px; border-radius: 18px; gap: 7px; }
  .sm-dor__ico { width: 44px; height: 44px; border-radius: 12px; }
  .sm-dor__ico svg { width: 24px; height: 24px; }
  .sm-dor__nome { font-size: 1.0625rem; }
  .sm-dor__txt { font-size: .875rem; }
  .sm-dor__ir { font-size: .875rem; }
}
.sm-dores__nota { margin-top: var(--e-6); text-align: center; color: var(--corpo); }
.sm-dores__nota a { color: var(--folha); font-weight: 700; }

/* ==========================================================================
   3. PASSOS
   ========================================================================== */
.sm-trilho { position: relative; }
.sm-trilho__linha { position: absolute; left: 0; right: 0; top: 4px; width: 100%; height: 60px; display: none; }
.sm-trilho__linha path { fill: none; stroke-linecap: round; }
.sm-trilho__fundo { stroke: var(--linha); stroke-width: 2; stroke-dasharray: 2 8; }
.sm-trilho__vivo { stroke: var(--amarelo); stroke-width: 4; }
.sm-passos__lista { display: grid; gap: 16px; position: relative; }
.sm-passo {
  position: relative; background: var(--superficie); border: 1px solid var(--linha); border-radius: 24px;
  padding: 26px 24px 24px; box-shadow: var(--s-1);
}
.sm-passo__no {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; margin-bottom: 18px;
  background: var(--floresta); color: #fff; box-shadow: 0 12px 24px -12px rgba(31,74,55,.7); position: relative; z-index: 1;
}
.sm-passo__no .mono { font-size: 1.25rem; font-weight: 600; color: var(--amarelo); }
.sm-passo__tempo { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--argila); background: #F6E9DF; border-radius: var(--r-pill); padding: 5px 11px; margin-bottom: 12px; }
.sm-passo__tempo svg { width: 15px; height: 15px; }
.sm-passo h3 { font-size: var(--t-h4); font-weight: 700; color: var(--tinta); line-height: 1.2; margin-bottom: 8px; letter-spacing: -0.01em; }
.sm-passo p { font-size: 1rem; line-height: 1.55; }
@media (min-width: 1024px) {
  .sm-trilho__linha { display: block; top: 6px; }
  .sm-passos__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .sm-passo { background: transparent; border: 0; box-shadow: none; padding: 0 8px 0 0; }
}
@media (max-width: 1023px) {
  .sm-passos__lista::before { content: ""; position: absolute; left: 55px; top: 40px; bottom: 40px; width: 2px; background: repeating-linear-gradient(to bottom, var(--areia) 0 4px, transparent 4px 10px); }
  .sm-passo { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; padding: 20px 18px; }
  .sm-passo__no { grid-row: 1 / span 3; margin-bottom: 0; width: 56px; height: 56px; }
  .sm-passo__tempo { justify-self: start; }
}
.sm-passos__cta { display: grid; justify-items: center; gap: 12px; margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); text-align: center; }

/* ==========================================================================
   4. QUIZ
   ========================================================================== */
.sm-quiz-sec { background: linear-gradient(180deg, var(--fundo) 0%, #EFE7DA 100%); }
.sm-quiz-grade { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: center; }
@media (min-width: 1024px) { .sm-quiz-grade { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.sm-quiz__lado > * + * { margin-top: var(--e-5); }
.sm-quiz__garantias { display: grid; gap: 10px; }
.sm-quiz__garantias li { position: relative; padding-left: 30px; font-weight: 600; color: var(--tinta); }
.sm-quiz__garantias li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--floresta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7EA23' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }

.sm-quiz {
  position: relative; background: var(--superficie); border: 1px solid var(--linha); border-radius: 30px;
  padding: clamp(1.25rem, 1rem + 1.6vw, 2.5rem); box-shadow: var(--s-4); scroll-margin-top: 96px;
}
.sm-quiz::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(247,234,35,.9), transparent 30%, transparent 70%, rgba(47,110,82,.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.sm-quiz__topo { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.sm-quiz__passo { font-size: .875rem; font-weight: 600; color: var(--folha); white-space: nowrap; }
.sm-quiz__barra { flex: 1; height: 6px; border-radius: 6px; background: var(--fundo-2); overflow: hidden; }
.sm-quiz__barra i { display: block; height: 100%; width: 33.333%; border-radius: inherit; background: linear-gradient(90deg, var(--floresta), var(--folha)); transition: width .5s var(--ease-saida); }
.sm-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.sm-q legend { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--tinta); margin-bottom: 18px; padding: 0; }
.js .sm-q:not(.is-ativa) { display: none; }
.js .sm-quiz__semjs { display: none; }
.sm-op-grade { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .sm-op-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) { .sm-op-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sm-op-grade--1 { grid-template-columns: minmax(0, 1fr) !important; }
.sm-op { position: relative; display: block; cursor: pointer; }
.sm-op--largo { grid-column: 1 / -1; }
.sm-op input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sm-op span {
  display: flex; align-items: center; min-height: 58px; height: 100%; padding: 12px 16px 12px 44px; border-radius: 16px;
  border: 1.5px solid var(--linha); background: var(--fundo); font-weight: 600; font-size: 1rem; line-height: 1.25; color: var(--tinta);
  position: relative; transition: border-color var(--dur-2), background-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-1);
}
.sm-op span::before { content: ""; position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid var(--areia); background: var(--superficie); transition: all var(--dur-2); }
@media (max-width: 519px) {
  .sm-op-grade { gap: 8px; }
  .sm-op span { padding: 10px 10px 10px 38px; font-size: .9375rem; min-height: 54px; border-radius: 14px; }
  .sm-op span::before { left: 12px; width: 16px; height: 16px; margin-top: -8px; }
}
.sm-op:hover span { border-color: var(--folha); background: var(--superficie); }
.sm-op input:focus-visible + span { outline: 3px solid var(--floresta); outline-offset: 2px; }
.sm-op input:checked + span { border-color: var(--floresta); background: var(--sm-verde-claro); box-shadow: 0 0 0 1px var(--floresta); }
.sm-op input:checked + span::before { border-color: var(--floresta); background: var(--floresta); box-shadow: inset 0 0 0 4px var(--superficie); }
.sm-op:active span { transform: scale(.985); }

.sm-quiz__fim { outline: none; }
.sm-quiz__ok { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--folha); }
.sm-quiz__ok svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--floresta); color: var(--amarelo); stroke-width: 3; }
.sm-quiz__resumo { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--tinta); margin: 12px 0 10px; }
.sm-quiz__resumo em { font-family: var(--f-editorial); font-style: italic; font-weight: 500; color: var(--argila); }
.sm-quiz__dica { color: var(--corpo); margin-bottom: 22px; }
.sm-quiz__nota { font-size: .9375rem; margin-top: 14px; }
.sm-quiz__nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--linha); }
.sm-quiz__voltar { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 8px 4px; font-weight: 700; color: var(--corpo); min-height: 44px; }
.sm-quiz__voltar svg { width: 18px; height: 18px; }
.sm-quiz__voltar:hover { color: var(--tinta); }
.sm-quiz__receita { margin-left: auto; font-weight: 700; color: var(--folha); min-height: 44px; display: inline-flex; align-items: center; }

/* ==========================================================================
   5. O QUE VOCÊ RECEBE
   ========================================================================== */
.sm-recebe__grade { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
@media (min-width: 1024px) { .sm-recebe__grade { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.sm-recebe__texto > * + * { margin-top: var(--e-5); }
@media (max-width: 1023px) { .sm-recebe__texto { order: -1; } .sm-acompanha { right: 0; } }
.sm-recebe__arte { position: relative; max-width: 480px; width: 100%; justify-self: center; padding: 0 0 70px; }
.sm-rotulo {
  position: relative; background: #FFFDF9; border-radius: 26px; border: 1px solid var(--linha); padding: 22px 24px 26px;
  box-shadow: var(--s-4); transform: rotate(-2deg); overflow: hidden;
}
.sm-rotulo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg, var(--floresta) 0 50%, var(--argila-viva) 50% 100%); }
.sm-rotulo__topo { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--tinta); padding: 6px 0 14px; border-bottom: 1px solid var(--linha); }
.sm-rotulo__lote { margin-left: auto; white-space: nowrap; flex: none; font-size: .75rem; color: var(--folha); background: var(--sm-verde-claro); border-radius: 6px; padding: 3px 8px; }
.sm-rotulo__para { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 6px; }
.sm-rotulo__para .mono { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }
.sm-rotulo__para strong { font-family: var(--f-editorial); font-style: italic; font-weight: 500; font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); line-height: 1; color: var(--argila); }
.sm-rotulo__campos { display: grid; gap: 12px; margin-top: 14px; }
.sm-rotulo__campos dt { font-family: var(--f-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); margin-bottom: 4px; }
.sm-rotulo__campos dd { font-weight: 600; color: var(--tinta); font-size: .9375rem; }
.sm-rotulo__campos dd i { display: block; height: 9px; width: var(--w); border-radius: 5px; background: #E9E2D5; margin-top: 4px; }
.sm-rotulo__comp { font-family: var(--f-editorial); font-style: italic; font-weight: 400 !important; color: var(--folha) !important; font-size: 1.0625rem !important; }
.sm-rotulo__duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sm-rotulo__traco { position: absolute; right: -14px; bottom: -18px; width: 140px; height: 150px; opacity: .9; }
.sm-acompanha {
  position: absolute; right: -4%; bottom: 0; width: min(270px, 70%); background: var(--floresta); color: #E9F1EC;
  border-radius: 20px; padding: 16px 18px; box-shadow: 0 30px 50px -20px rgba(23,58,43,.7); transform: rotate(2deg);
}
.sm-acompanha__rot { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--amarelo); }
.sm-acompanha ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.sm-acompanha li { position: relative; padding-left: 22px; font-size: .875rem; color: rgba(233,241,236,.7); }
.sm-acompanha li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(233,241,236,.45); }
.sm-acompanha li.is-feito { color: #fff; }
.sm-acompanha li.is-feito::before { background: var(--folha-clara); border-color: var(--folha-clara); }
.sm-acompanha li.is-agora { color: #fff; font-weight: 700; }
.sm-acompanha li.is-agora::before { border-color: var(--amarelo); background: var(--amarelo); animation: sm-agora 1.6s ease-in-out infinite; }

.sm-lista { display: grid; gap: 4px; }
.sm-lista li { position: relative; padding: 14px 0 14px 44px; border-bottom: 1px solid var(--linha); line-height: 1.5; }
.sm-lista li:last-child { border-bottom: 0; }
.sm-lista li::before { content: ""; position: absolute; left: 0; top: 13px; width: 28px; height: 28px; border-radius: 9px; background: var(--sm-verde-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A37' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 16px no-repeat; }

/* ==========================================================================
   6. PROVA
   ========================================================================== */
.sm-prova { padding-block: var(--secao) 0; }
.sm-prova__faixa {
  position: relative; overflow: hidden; border-radius: 36px; padding: clamp(2rem, 1.4rem + 3vw, 4.5rem);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(134,195,164,.22), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(247,234,35,.10), transparent 60%),
    var(--floresta);
  color: #D6E4DB; --tinta: #fff; --corpo: #D6E4DB; --suave: #A9C2AF; --foco: var(--amarelo);
}
.sm-prova__faixa .kicker { color: var(--amarelo); }
.sm-prova__faixa .m-enfase { color: #F2C9A8; }
.sm-prova__cab { max-width: 820px; }
.sm-prova__cab .titulo-m { color: #fff; margin-top: var(--e-4); }
.sm-prova__nums { display: grid; gap: 24px; margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .sm-prova__nums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.sm-prova__nums li { border-top: 1px solid rgba(255,255,255,.18); padding-top: 18px; }
.sm-prova__nums strong { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(3rem, 2.2rem + 3.4vw, 5.5rem); line-height: .95; letter-spacing: -0.045em; color: #fff; font-variant-numeric: tabular-nums; }
.sm-prova__nums span:not([data-contar]) { display: block; margin-top: 10px; font-size: 1rem; max-width: 28ch; }
.sm-prova__fonte { margin-top: 20px; font-size: .875rem; color: #A9C2AF; }
.sm-prova__cards { display: grid; gap: 14px; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 900px) { .sm-prova__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.sm-prova__card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 22px; }
.sm-prova__card h3 { font-size: 1.1875rem; font-weight: 700; color: #fff; margin: 14px 0 6px; }
.sm-prova__card p { font-size: 1rem; line-height: 1.55; }
.sm-prova__card a { color: var(--amarelo); font-weight: 700; }
.sm-prova__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(247,234,35,.14); color: var(--amarelo); }
.sm-prova__ico svg { width: 24px; height: 24px; }
.sm-prova__crf { margin-top: 12px; font-size: .875rem; color: #fff; background: rgba(0,0,0,.18); padding: 8px 10px; border-radius: 10px; overflow-wrap: anywhere; }

/* ==========================================================================
   7. PREÇO
   ========================================================================== */
.sm-preco__grade { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
@media (min-width: 1024px) { .sm-preco__grade { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.sm-preco__texto > * + * { margin-top: var(--e-5); }
.sm-regra { background: var(--superficie); border: 1px solid var(--linha); border-left: 4px solid var(--amarelo); border-radius: 16px; padding: 18px 20px; box-shadow: var(--s-1); }
.sm-regra__titulo { font-size: 1.125rem; line-height: 1.45; color: var(--tinta); margin-bottom: 6px; }

.sm-grafico {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 28px; padding: 28px 24px 20px; box-shadow: var(--s-3);
  min-height: 340px;
}
.sm-grafico__col { position: relative; display: grid; grid-template-rows: 220px auto; align-items: end; justify-items: center; }
.sm-grafico__par { display: flex; align-items: flex-end; justify-content: center; gap: 8px; height: 100%; width: 100%; }
.sm-grafico__frasco {
  width: 52%; max-width: 86px; height: var(--h); border-radius: 14px 14px 10px 10px;
  background: linear-gradient(180deg, rgba(196,106,63,.25), rgba(196,106,63,.55)); border: 2px solid rgba(164,83,47,.55);
  position: relative; transform-origin: bottom; transition: transform 1s var(--ease-saida);
}
.sm-grafico__frasco::before { content: ""; position: absolute; left: 22%; right: 22%; top: -12px; height: 10px; border-radius: 4px 4px 0 0; background: var(--argila); }
.sm-grafico__barra {
  width: 18px; height: var(--v); border-radius: 8px 8px 3px 3px; flex: none;
  background: var(--floresta); transform-origin: bottom; transition: transform 1s var(--ease-saida) .15s;
}
.sm-grafico__rot { margin-top: 12px; font-size: .875rem; font-weight: 600; color: var(--corpo); text-align: center; line-height: 1.3; }
.sm-grafico figcaption { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding-top: 14px; border-top: 1px dashed var(--linha); font-size: .875rem; }
.sm-grafico__leg { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--tinta); }
.sm-grafico__leg::before { content: ""; width: 14px; height: 14px; border-radius: 4px; }
.sm-grafico__leg--f::before { background: rgba(196,106,63,.5); border: 1.5px solid rgba(164,83,47,.6); }
.sm-grafico__leg--b::before { background: var(--floresta); }
.sm-grafico figcaption .suave { margin-left: auto; }
.js .sm-grafico:not(.is-visto) .sm-grafico__frasco, .js .sm-grafico:not(.is-visto) .sm-grafico__barra { transform: scaleY(0); }
@media (max-width: 519px) {
  .sm-grafico { padding: 22px 14px 16px; gap: 10px; min-height: 0; }
  .sm-grafico__col { grid-template-rows: 170px auto; }
  .sm-grafico__rot { font-size: .8125rem; }
  .sm-grafico figcaption .suave { margin-left: 0; }
}

.sm-garantia {
  display: grid; gap: 24px; align-items: center; margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  background: var(--azul-800); color: #DADCF0; border-radius: 32px; padding: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  --tinta: #fff; --corpo: #DADCF0; position: relative; overflow: hidden;
}
.sm-garantia .kicker { color: var(--amarelo); }
.sm-garantia h3 { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; color: #fff; margin: 10px 0 18px; line-height: 1.15; }
@media (min-width: 900px) { .sm-garantia { grid-template-columns: 160px minmax(0, 1fr); gap: 44px; } }
.sm-garantia__selo { width: 140px; height: 140px; }
.sm-garantia__selo svg { width: 100%; height: 100%; }
.sm-garantia__marcas { transform-origin: 60px 60px; animation: sm-gira 40s linear infinite; }
.sm-garantia__aro { fill: none; stroke: rgba(247,234,35,.35); stroke-width: 1; }
.sm-garantia__marcas { fill: none; stroke: var(--amarelo); stroke-width: 4; stroke-dasharray: .5 2.5; }
@keyframes sm-gira { to { transform: rotate(360deg); } }
.sm-garantia__lista { display: grid; gap: 12px; }
@media (min-width: 760px) { .sm-garantia__lista { grid-template-columns: 1fr 1fr; gap: 14px 28px; } }
.sm-garantia__lista li { position: relative; padding-left: 30px; line-height: 1.5; }
.sm-garantia__lista li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--amarelo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315173A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* ==========================================================================
   8. OBJEÇÕES
   ========================================================================== */
.sm-obj__grade { display: grid; gap: 16px; }
@media (min-width: 760px) { .sm-obj__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.sm-obj__card { background: var(--superficie); border: 1px solid var(--linha); border-radius: 24px; padding: clamp(1.4rem, 1.1rem + 1vw, 2.1rem); box-shadow: var(--s-1); }
.sm-obj__q { display: inline-block; font-size: .875rem; font-weight: 600; color: var(--argila); margin-bottom: 10px; }
.sm-obj__card h3 { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--tinta); margin-bottom: 10px; }
.sm-obj__card a { color: var(--folha); font-weight: 700; }

/* ==========================================================================
   10. JÁ TENHO RECEITA
   ========================================================================== */
.sm-receita { padding-block: var(--secao) calc(var(--secao) * .6); }
.sm-receita__cartao {
  display: grid; gap: 24px; align-items: center; background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 32px; padding: clamp(1.5rem, 1.1rem + 2vw, 3rem); box-shadow: var(--s-2);
}
@media (min-width: 1024px) { .sm-receita__cartao { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 40px; } }
.sm-receita__ico { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 22px; background: var(--azul-50); color: var(--azul); border: 1px solid var(--azul-100); }
.sm-receita__ico svg { width: 40px; height: 40px; }
.sm-receita__texto > * + * { margin-top: var(--e-4); }
.sm-receita__texto .titulo-m { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem); }
.sm-receita__acoes { display: grid; gap: 12px; justify-items: start; }
.sm-receita__link { font-weight: 700; color: var(--folha); }
@media (max-width: 519px) { .sm-receita__acoes .botao { width: 100%; } }

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.sm-faq__grade { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 4rem); }
@media (min-width: 1024px) { .sm-faq__grade { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } .sm-faq__cab { position: sticky; top: 110px; } }
.sm-faq__cab > * + * { margin-top: var(--e-4); }
.sm-faq__tel { --fg: var(--floresta); --bd: rgba(31,74,55,.45); }
.sm-faq__tel:hover { --bg: var(--sm-verde-claro); }
.sm-acordeao { border-top: 1px solid var(--linha); }
.sm-qa { border-bottom: 1px solid var(--linha); }
.sm-qa h3 { margin: 0; }
.sm-qa button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left;
  background: none; border: 0; padding: 22px 2px; font-family: var(--f-display); font-weight: 700; font-size: 1.1875rem; line-height: 1.3; color: var(--tinta); letter-spacing: -0.01em;
}
.sm-qa button:hover { color: var(--folha); }
.sm-qa__mais { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--linha); flex: none; transition: background-color var(--dur-2), border-color var(--dur-2), transform var(--dur-2); }
.sm-qa__mais::before, .sm-qa__mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; border-radius: 2px; transition: transform var(--dur-2); }
.sm-qa__mais::after { transform: rotate(90deg); }
.sm-qa button[aria-expanded="true"] .sm-qa__mais { background: var(--floresta); border-color: var(--floresta); color: #fff; }
.sm-qa button[aria-expanded="true"] .sm-qa__mais::after { transform: rotate(0deg); }
.sm-qa__painel { overflow: hidden; }
.sm-qa__painel p { padding: 0 52px 22px 2px; max-width: 64ch; }

/* ==========================================================================
   12. FINAL
   ========================================================================== */
.sm-final { padding-block: var(--secao); }
.sm-final__faixa {
  position: relative; overflow: hidden; text-align: center; border-radius: 40px;
  padding: clamp(3rem, 2rem + 5vw, 7rem) clamp(1.25rem, 1rem + 3vw, 4rem);
  background:
    radial-gradient(70% 90% at 50% 120%, rgba(247,234,35,.22), transparent 60%),
    radial-gradient(50% 70% at 0% 0%, rgba(134,195,164,.25), transparent 60%),
    var(--sm-escura);
  color: #D6E4DB; --foco: var(--amarelo);
}
.sm-final__faixa .kicker { color: var(--amarelo); justify-content: center; }
.sm-final__titulo { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.375rem, 1.6rem + 3.6vw, 4.75rem); line-height: 1; letter-spacing: -0.035em; color: #fff; max-width: 15ch; margin: 18px auto 18px; }
.sm-final__titulo .m-enfase { color: #F2C9A8; }
.sm-final__lead { font-size: var(--t-lead); max-width: 52ch; margin: 0 auto; line-height: 1.5; }
.sm-final__acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: var(--e-7); }
.sm-final__traco { position: absolute; right: -40px; top: -30px; width: 260px; height: 290px; opacity: .25; }
@media (max-width: 519px) {
  .sm-final__acoes .botao { width: 100%; }
  .sm-final__acoes .sm-cta { justify-content: space-between; }
  .sm-final__traco { width: 150px; height: 170px; right: -70px; top: -70px; opacity: .14; }
}
.sm-legal { margin-top: var(--e-6); font-size: .875rem; color: var(--suave); line-height: 1.6; max-width: 110ch; }

/* ==========================================================================
   Barra fixa no celular
   ========================================================================== */
.sm-barra { display: none; }
@media (max-width: 1023px) {
  .sm-barra {
    position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: var(--z-flutuante);
    display: flex; gap: 8px; padding: 8px; border-radius: 22px;
    background: rgba(255,253,249,.92); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid var(--linha); box-shadow: 0 18px 40px -14px rgba(21,23,58,.4);
    transform: translateY(140%); opacity: 0; pointer-events: none;
    transition: transform .45s var(--ease-saida), opacity .3s;
  }
  .sm-barra.is-visivel { transform: none; opacity: 1; pointer-events: auto; }
  .sm-barra__ir {
    flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 0 8px 0 18px;
    border-radius: 16px; background: var(--floresta); color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none;
  }
  .sm-barra__ir svg { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: var(--amarelo); color: var(--azul-900); flex: none; }
  .sm-barra__rec {
    display: grid; place-items: center; align-content: center; gap: 2px; width: 64px; min-height: 54px; border-radius: 16px;
    border: 1.5px solid var(--linha); color: var(--floresta); text-decoration: none; font-size: .75rem; font-weight: 700;
  }
  .sm-barra__rec svg { width: 22px; height: 22px; }
  [data-sub="sob-medida"] .rod { padding-bottom: 96px; }
}

/* ==========================================================================
   Entrada e movimento
   ========================================================================== */
.anima .sm-linha > span { animation: sm-sobe .95s var(--ease-saida) both; }
.anima .sm-linha:nth-child(2) > span { animation-delay: .08s; }
.anima .sm-linha:nth-child(3) > span { animation-delay: .16s; }
@keyframes sm-sobe { from { transform: translateY(105%); } to { transform: none; } }
.anima .sm-hero__selo, .anima .sm-hero__dor, .anima .sm-hero__lead, .anima .sm-hero__acoes, .anima .sm-hero__micro { animation: sm-surge .7s var(--ease-padrao) both; }
.anima .sm-hero__dor { animation-delay: .05s; }
.anima .sm-hero__lead { animation-delay: .3s; }
.anima .sm-hero__acoes { animation-delay: .4s; }
.anima .sm-hero__micro { animation-delay: .5s; }
@keyframes sm-surge { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.anima .sm-ficha { animation: sm-cartao 1s var(--ease-saida) .55s both; }
.anima .sm-progresso { animation: sm-cartao2 1s var(--ease-saida) .75s both; }
@keyframes sm-cartao { from { opacity: 0; transform: translateY(30px) rotate(-8deg); } to { opacity: 1; transform: rotate(-3deg); } }
@keyframes sm-cartao2 { from { opacity: 0; transform: translateY(-24px) rotate(8deg); } to { opacity: 1; transform: rotate(2.5deg); } }

@media (prefers-reduced-motion: reduce) {
  .sm-palco__capsula, .sm-garantia__marcas, .sm-pulso::after, .sm-progresso li.is-agora::before, .sm-acompanha li.is-agora::before { animation: none !important; }
  .sm-dor__item { transition: none; }
}
