/* =====================================================================
   modelo.css — páginas por modelo (/maquininha/<id>/) · 21/10/2026
   Só ACRESCENTA ao style.css (que continua dono dos tokens, botões, cards
   do catálogo, taxas, depoimentos, FAQ, CTA final e rodapé). Régua = bloco
   L7 do style.css: títulos Anton 33px até o tablet / 42px no computador,
   botões 56px · Inter 14px 600, cartões raio 16/24, conteúdo 1360 + 2×40.
   Zero valor arbitrário fora dos tokens (CONTRATOS.md §1).
   ===================================================================== */

/* ---------- Hero do modelo ---------- */
.mdl-crumbs { margin-bottom: var(--s-5); font-size: 13px; font-weight: 600; color: var(--ink); }
.mdl-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); list-style: none; }
.mdl-crumbs li + li::before { content: "›"; margin-right: var(--s-2); opacity: 0.5; }
.mdl-crumbs a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(27, 34, 31, 0.35); }
.mdl-crumbs a:hover { color: var(--green-deep); }
.mdl-crumbs [aria-current] { color: var(--green-dark); }

.mdl-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "copy gal" "compra gal";
  column-gap: var(--s-12); row-gap: var(--s-6);
  align-items: start;
}
.mdl-hero-copy { grid-area: copy; }
.mdl-galeria { grid-area: gal; align-self: center; }
.mdl-compra { grid-area: compra; }
.mdl-hero .hero-badge { margin-bottom: var(--s-4); }
.mdl-hero h1 { max-width: 600px; }               /* H1 em 2–3 linhas na coluna, como o oficial */
.mdl-hero .hero-sub { max-width: 520px; }

/* Galeria: cartão branco com a foto REAL do produto (mesma luz do card do catálogo) */
.mdl-galeria-main {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--bg-0);
  border: 1px solid var(--badge-gray);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.mdl-galeria-main::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 50% 58%, rgba(136, 255, 0, 0.22), rgba(136, 255, 0, 0) 72%);
  pointer-events: none;
}
.mdl-galeria--retrato .mdl-galeria-main { aspect-ratio: 5 / 6; }
.mdl-galeria-img {
  position: relative;
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(27, 34, 31, 0.22));
}
.mdl-galeria-selos {
  position: absolute; top: var(--s-4); left: var(--s-4); z-index: 1;
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.mdl-galeria-selos .badge-off, .mdl-galeria-selos .badge-cupom { flex: none; }   /* no card eles dividem a linha; aqui são pills soltas */
.mdl-galeria-selos .badge-off { background: var(--lime); color: var(--ink); }
.mdl-galeria-selos .badge-cupom { background: var(--bg-0); border: 1px solid rgba(43, 82, 232, 0.25); }

/* Foto principal: troca suave (o modelo.js põe .is-trocando enquanto carrega a próxima) e
   deslizar com o dedo (pan-y = a rolagem vertical continua com o navegador) */
.mdl-galeria-main { touch-action: pan-y; }
.mdl-galeria-img { transition: opacity var(--d-base) var(--ease-out), transform var(--d-slow) var(--ease-out); }
.mdl-galeria.is-trocando .mdl-galeria-img { opacity: 0; transform: scale(0.97); }

/* Miniaturas: a ativa fica clara (borda + anel verde e foto 100%); as outras ficam um tom abaixo */
.mdl-thumbs { display: flex; gap: var(--s-3); margin-top: var(--s-3); }
.mdl-thumb {
  position: relative;
  width: 72px; height: 72px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-0);
  border: 1px solid var(--badge-gray);
  border-radius: var(--r-md);
  padding: var(--s-2);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-spring);
}
.mdl-thumb img { width: 100%; height: 100%; object-fit: contain; opacity: 0.62; transition: opacity var(--d-fast) var(--ease-out); }
.mdl-thumb:hover { border-color: var(--border); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.mdl-thumb:hover img, .mdl-thumb[aria-pressed="true"] img { opacity: 1; }
.mdl-thumb[aria-pressed="true"] { border-color: var(--green-brand); box-shadow: 0 0 0 1px var(--green-brand), var(--shadow-sm); }
.mdl-thumb:focus-visible { outline: 3px solid var(--green-brand); outline-offset: 3px; border-radius: var(--r-md); }

/* Bloco de compra = card do catálogo aberto (de · por · 12x GRANDE · economia · frete · estoque) */
.mdl-preco {
  background: var(--bg-0);
  border: 1px solid var(--badge-gray);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-card);
  max-width: 460px;
}
.mdl-preco .modelo-preco { margin-top: 0; }
.mdl-preco .preco-de { color: var(--ink-mid); }
.mdl-economia {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-4);
  font-size: 13px; font-weight: 600; color: var(--green-deep);
  background: var(--lime-soft);
  border-radius: var(--r-full);
  padding: 5px 12px;
}
.mdl-economia .ic { width: 16px; height: 16px; }
.mdl-preco .modelo-frete { justify-content: flex-start; }
.mdl-compra .hero-ctas { margin-top: var(--s-5); }
.mdl-compra .hero-ctas .btn { flex: 1 1 200px; }
.mdl-compra .hero-trust { max-width: 460px; }

.mdl-pills {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2);
  margin-top: var(--s-5); max-width: 560px;
}
.mdl-pills li {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(27, 34, 31, 0.08);
  border-radius: var(--r-full);
  padding: 6px 10px;
  white-space: nowrap;
}
.mdl-pills .ic { width: 16px; height: 16px; color: var(--green-deep); }

/* ---------- Taxas ---------- */
.mdl-taxas { padding: var(--s-16) 0; background: var(--bg-0); }
.mdl-taxas .hero-taxas { margin-inline: auto; }
.mdl-taxas-pix {
  display: flex; align-items: flex-start; justify-content: center; gap: var(--s-2);
  max-width: 740px; margin: var(--s-4) auto 0;
  font-size: 13px; color: var(--ink-mid); text-align: left;
}
.mdl-taxas-pix .ic { width: 18px; height: 18px; color: var(--green-brand); margin-top: 2px; }

/* ---------- Bloco "foto real + texto" (Para quem é · Como funciona o pedido) ----------
   Celular/tablet: título → foto → conteúdo. Computador (≥1024): foto numa coluna (altura do texto)
   e título + conteúdo na outra; no pedido a foto troca de lado (ritmo de leitura em zigue-zague). */
.mdl-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "cena" "corpo";
  row-gap: var(--s-6);
}
.mdl-split-head { grid-area: head; margin-bottom: 0; }
.mdl-split-corpo { grid-area: corpo; min-width: 0; }
.mdl-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: var(--s-2);
}

/* Foto de cena (pessoa real usando a Ton). A imagem fica 10% maior que a moldura:
   esconde o canto arredondado que já vem embutido nas fotos do site da Ton e dá folga pro parallax. */
.mdl-cena {
  grid-area: cena;
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--badge-gray);
  box-shadow: var(--shadow-card);
  isolation: isolate;
  contain: size;            /* o tamanho vem só da moldura (proporção/altura do texto), nunca da foto */
}
.mdl-cena img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--foco, 50% 40%);
  transform: scale(1.1);
}
.mdl-cena-rotulo {
  position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 1;
  display: inline-flex; align-items: center; gap: var(--s-2);
  max-width: calc(100% - var(--s-8));
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-md);
  font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ink);
}
.mdl-cena-rotulo .ic { width: 18px; height: 18px; color: var(--green-brand); }

/* ---------- Para quem é ---------- */
.mdl-quem-sec { padding: var(--s-16) 0; background: var(--bg-soft); }
/* 3 situações em LISTA com divisória (não 3 cartões iguais) */
.mdl-quem-lista { list-style: none; }
.mdl-quem {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-4);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--border);
}
.mdl-quem:first-child { border-top: 0; padding-top: 0; }
.mdl-quem-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(136, 255, 0, 0.30));
  border: 1px solid rgba(27, 34, 31, 0.06);
  box-shadow: var(--shadow-sm);
  color: var(--green-deep);
  transition: transform var(--d-base) var(--ease-spring), background-color var(--d-base) var(--ease-out);
}
.mdl-quem-ic .ic { width: 20px; height: 20px; }
.mdl-quem:hover .mdl-quem-ic { transform: scale(1.06); background-color: var(--lime); }
.mdl-quem h3 { font-size: 18px; line-height: 1.3; }
.mdl-quem p { font-size: 15px; color: var(--ink-mid); margin-top: var(--s-1); }
.mdl-nao {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin-top: var(--s-5);
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-left: 4px solid var(--green-brand);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  font-size: 15px; color: var(--ink-body);
}
.mdl-nao .ic { width: 20px; height: 20px; color: var(--green-brand); margin-top: 2px; }
.mdl-nao a { font-weight: 700; color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
.mdl-nao a:hover { color: var(--green-deep); }

/* ---------- O que ela faz + objeções ---------- */
.mdl-recursos { padding: var(--s-16) 0; background: var(--bg-0); }
.mdl-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.mdl-specs li {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  font-size: 15px; font-weight: 600; color: var(--ink);
  min-height: 72px;
}
.mdl-specs .benef-ic { width: 40px; height: 40px; }
.mdl-specs .benef-ic .ic { width: 20px; height: 20px; }
.mdl-obj-titulo { font-size: 22px; text-align: center; margin: var(--s-12) auto var(--s-6); max-width: 680px; }
.mdl-obj { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.mdl-obj li {
  display: grid; grid-template-columns: 24px 1fr; column-gap: var(--s-3);
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.mdl-obj .ic { width: 24px; height: 24px; color: var(--green-brand); grid-row: span 2; }
.mdl-obj strong { font-size: 15px; color: var(--ink); }
.mdl-obj p { font-size: 14.5px; color: var(--ink-mid); margin-top: var(--s-1); }

/* ---------- Como funciona o pedido ---------- */
/* Linha do tempo vertical: número no círculo lima + linha que liga um passo ao outro
   (trilho cinza fixo no ::after; o traço verde .mdl-passo-linha "desenha" no scroll via modelo.js) */
.mdl-pedido { padding: var(--s-16) 0; background: var(--bg-soft); }
.mdl-passos { --passo: 44px; list-style: none; display: flex; flex-direction: column; gap: var(--s-6); }
.mdl-passos li {
  position: relative;
  display: grid; grid-template-columns: var(--passo) minmax(0, 1fr); column-gap: var(--s-4);
}
.mdl-passos li:not(:last-child)::after,
.mdl-passo-linha {
  content: "";
  position: absolute; left: calc(var(--passo) / 2 - 1px); top: calc(var(--passo) + var(--s-2)); bottom: calc(-1 * var(--s-6) + var(--s-2));
  width: 2px; border-radius: var(--r-full);
  background: var(--border);
}
.mdl-passo-linha { z-index: 1; background: var(--green-brand); transform-origin: 50% 0; }
.mdl-passo-num {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--passo); height: var(--passo);
  border-radius: var(--r-full);
  background: var(--lime);
  color: var(--green-deep);
  font: 400 21px/1 var(--font-display);
  box-shadow: var(--shadow-sm);
}
.mdl-passo-tx { padding-top: var(--s-2); }
.mdl-passos h3 { font-size: 18px; line-height: 1.3; margin-bottom: var(--s-1); }
.mdl-passos p { font-size: 15px; color: var(--ink-mid); }
.mdl-passos p b { color: var(--green-dark); }
.mdl-passos-cta { margin-top: var(--s-8); }

/* ---------- Comparativo com o vizinho ---------- */
.mdl-cmp-sec { background: var(--bg-0); }
.mdl-cmp-wrap {
  max-width: 860px; margin: 0 auto;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  background: var(--bg-0);
}
.mdl-cmp { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mdl-cmp th, .mdl-cmp td { padding: var(--s-4); text-align: center; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.mdl-cmp thead th { vertical-align: bottom; background: var(--bg-soft); }
.mdl-cmp thead th.is-este { background: rgba(136, 255, 0, 0.18); }
.mdl-cmp thead img { display: block; height: 120px; width: auto; margin: 0 auto var(--s-2); object-fit: contain; }
.mdl-cmp-nome { display: block; font: 400 24px/1.1 var(--font-display); color: var(--ink); }
.mdl-cmp-parc { display: block; font-size: 14px; color: var(--ink-mid); margin: 2px 0 var(--s-2); }
.mdl-cmp-parc b { color: var(--green-dark); }
.mdl-cmp-este {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green-deep); background: var(--lime); border-radius: var(--r-full); padding: 3px 10px;
}
.mdl-cmp-link { display: inline-block; font-size: 13px; font-weight: 700; color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; line-height: 44px; }
.mdl-cmp-canto { width: 30%; }
.mdl-cmp tbody th { text-align: left; font-size: 15px; font-weight: 600; color: var(--ink); }
.mdl-cmp td { font-size: 14px; color: var(--ink-body); }
.mdl-cmp td .ic { display: block; width: 22px; height: 22px; margin: 0 auto 4px; }
.mdl-cmp td.is-sim .ic { color: var(--green-brand); }
.mdl-cmp td.is-nao .ic { color: var(--danger); }
.mdl-cmp td.is-este { background: rgba(136, 255, 0, 0.08); }
.mdl-cmp tbody tr:last-child > * { border-bottom: 0; }
.mdl-cmp-ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-3); margin-top: var(--s-8); }
.mdl-cmp-extra { flex-basis: 100%; text-align: center; font-size: 14px; font-weight: 700; color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; line-height: 44px; }

/* ---------- Depoimentos (3 cards; grid de 3 no computador, carrossel no resto via style.css) ---------- */
@media (min-width: 1025px) { .mdl-depo-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- FAQ ---------- */
.mdl-faq-wa { margin-top: var(--s-5); }
.mdl-faq-wa .btn { width: 100%; max-width: 320px; }

/* ---------- Veja também ---------- */
.mdl-outros { padding: var(--s-16) 0; background: var(--bg-soft); }
.mdl-outros-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: center; gap: var(--s-5); }
.mdl-outro {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--bg-0);
  border: 1px solid var(--badge-gray);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
.mdl-outro:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.mdl-outro img { height: 150px; width: auto; object-fit: contain; margin-bottom: var(--s-3); }
.mdl-outro .modelo-tag { margin-bottom: var(--s-2); }
.mdl-outro h3 { font: 400 30px/1.1 var(--font-display); color: var(--ink); }
.mdl-outro-desc { font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--ink); margin-top: var(--s-1); min-height: 2.9em; }   /* conserto L9: 2 linhas reservadas */
.mdl-outro-parc { font-size: 14px; line-height: 1.3; color: var(--ink-mid); margin-top: var(--s-3); }
.mdl-outro-parc b { font: 400 29px/1 var(--font-display); color: var(--green-dark); }
.mdl-outro-de { display: block; margin-bottom: var(--s-1); font-size: 12.5px; line-height: 1.3; color: var(--ink-mid); text-decoration: line-through; }   /* conserto L9: o riscado não encosta no preço */
/* conserto L9: botões sempre no pé do cartão (alinhados entre os 3, mesmo se a descrição quebrar) */
.mdl-outro-ctas { display: grid; gap: var(--s-2); width: 100%; margin-top: auto; padding-top: var(--s-4); }
.mdl-outro-ctas .btn { width: 100%; min-height: 48px; font-size: 14px; }

/* ---------- Barra fixa de compra do celular (fallback injetado pelo modelo.js) ---------- */
.mdl-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-fab);
  display: none; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-4) max(var(--s-2), env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(27, 34, 31, 0.10);
  transform: translateY(110%);
  transition: transform var(--d-base) var(--ease-out);
}
.mdl-barra.is-on { transform: translateY(0); }
.mdl-barra-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mdl-barra-nome { font-size: 13px; font-weight: 700; color: var(--ink); }
.mdl-barra-parc { font-size: 15px; font-weight: 800; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.mdl-barra-parc small { font-size: 12px; font-weight: 600; color: var(--ink-mid); }
.mdl-barra .btn { flex: none; min-height: 48px; padding-inline: var(--s-6); font-size: 14px; }
@media (max-width: 900px) {
  .mdl-barra { display: flex; }
  /* Botão do WhatsApp, popups e aviso de cookies sobem o tanto da barra (76px) */
  body.mdl-barra-on .sys-fab { bottom: calc(var(--s-4) + 76px); }
  body.mdl-barra-on .sys-pop { bottom: calc(var(--s-4) + 76px); }
  body.mdl-barra-on .sys-cookie { bottom: calc(var(--s-4) + 76px); }
}

/* ---------- Respiro no celular (ritmo do L6/L7: 48px entre seções) ---------- */
@media (max-width: 900px) {
  .mdl-taxas, .mdl-quem-sec, .mdl-recursos, .mdl-pedido, .mdl-outros { padding: var(--s-12) 0; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1180px) {
  .mdl-hero-grid { column-gap: var(--s-8); }
  .mdl-pills { grid-template-columns: repeat(2, 1fr); }
  .mdl-specs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .mdl-specs { grid-template-columns: repeat(2, 1fr); }
  .mdl-outros-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .mdl-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "gal" "compra";
    row-gap: var(--s-6);
  }
  .mdl-hero h1 { max-width: none; }
  .mdl-galeria { max-width: 420px; margin-inline: auto; width: 100%; }
  .mdl-galeria--retrato .mdl-galeria-main { aspect-ratio: 1 / 1; }   /* celular: foto retrato sem virar uma torre */
  .mdl-galeria-main { padding: var(--s-6); }
  .mdl-preco { max-width: none; }
  .mdl-pills { max-width: none; }
  .mdl-obj { grid-template-columns: 1fr; }
  /* "Veja também" no celular/tablet = carrossel de deslizar (mesmo padrão L6 dos cards do catálogo:
     3 cards empilhados davam 1.780px de rolagem) */
  .mdl-outros-grid {
    display: flex; gap: var(--s-4); justify-content: flex-start;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-6);
    margin-inline: calc(-1 * var(--s-6)); padding: var(--s-1) var(--s-6) var(--s-4);
    scrollbar-width: none;
  }
  .mdl-outros-grid::-webkit-scrollbar { display: none; }
  .mdl-outro { flex: 0 0 min(308px, calc(100% - var(--s-10))); scroll-snap-align: start; }
  .mdl-outro:hover { transform: none; }
  .mdl-cmp th, .mdl-cmp td { padding: var(--s-3); }
  .mdl-cmp thead img { height: 96px; }
  .mdl-cmp-nome { font-size: 21px; }
  .mdl-cmp-canto { width: 34%; }
  .mdl-cmp tbody th { font-size: 13.5px; }
  .mdl-cmp td { font-size: 13px; }
}
/* Tablet (768–900): texto + compra à esquerda e foto à direita, como o hero da home no L7
   (empilhado dava ~1.200px de topo) */
@media (min-width: 768px) and (max-width: 900px) {
  .mdl-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-areas: "copy gal" "compra gal";
    column-gap: var(--s-6);
  }
  .mdl-galeria { max-width: none; }
  .mdl-galeria-main { padding: var(--s-5); }
  .mdl-pills { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .mdl-crumbs { font-size: 12px; }
  .mdl-galeria-main { padding: var(--s-5); }
  .mdl-thumb { width: 64px; height: 64px; }
  .mdl-compra .hero-ctas .btn { width: 100%; flex-basis: 100%; }
  .mdl-pills li { font-size: 12px; white-space: normal; }
  .mdl-outros-grid { margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); scroll-padding-inline: var(--s-4); }
  /* Specs em 2 colunas compactas (1 coluna somava 8 linhas de 60px) */
  .mdl-specs { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
  .mdl-specs li { min-height: 0; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-3); font-size: 13px; line-height: 1.35; }
  .mdl-specs .benef-ic { width: 34px; height: 34px; }
  .mdl-specs .benef-ic .ic { width: 18px; height: 18px; }
  .mdl-obj-titulo { font-size: 20px; margin-top: var(--s-10); }
  .mdl-cmp-ctas .btn { width: 100%; }
  .mdl-cmp td .ic { width: 20px; height: 20px; }
  .mdl-cmp-link { display: inline-flex; align-items: center; line-height: 1.4; min-height: 44px; padding: var(--s-2) 0; }   /* conserto L9: 42 → 44px de toque */
}
@media (max-width: 360px) {
  .mdl-pills { grid-template-columns: 1fr; }
}

/* ---------- 1ª tela do celular (≤767px): H1 → chip de preço → botão de compra → foto → cartão completo ----------
   Antes: H1 → foto (≈420px) → preço/botão, e o botão caía em ~1.000px numa tela de 667px.
   O .mdl-compra vira "display: contents" para os filhos entrarem direto na grade do hero e trocarem de ordem
   sem mexer no HTML do computador. */
.mdl-hero-preco { display: none; }
@media (max-width: 767px) {
  .mdl-hero-preco { display: block; }
  .mdl-hero-grid {
    grid-template-areas: "copy" "cta" "gal" "preco" "wa" "trust" "pills";
    row-gap: var(--s-4);
  }
  .mdl-compra { display: contents; }
  .mdl-compra .hero-ctas { grid-area: cta; margin-top: 0; }
  .mdl-preco { grid-area: preco; }
  .mdl-compra .hero-trust { grid-area: trust; margin-top: 0; max-width: none; }
  .mdl-pills { grid-area: pills; margin-top: 0; }
  .mdl-crumbs { margin-bottom: var(--s-4); }
}
/* até 560px o style.css desmonta o .hero-ctas (display: contents): cada botão ganha a sua linha da grade */
@media (max-width: 560px) {
  .mdl-compra .mdl-cta-principal { grid-area: cta; }
  .mdl-compra .hero-ctas .btn-white { grid-area: wa; margin-top: 0; }
}

/* ---------- Computador (≥1024px): o botão principal sobe para dentro da 1ª tela de 1440×900 ---------- */
@media (min-width: 1024px) {
  #hero.mdl-hero { padding-top: calc(var(--s-5) + var(--hdr-overlap)); }
  .mdl-hero h1 { max-width: none; }                /* coluna inteira: o H1 longo da T3 Smart cai de 3 para 2 linhas */
  .mdl-preco { padding: var(--s-4) var(--s-5); }
  .mdl-preco .modelo-frete { margin-top: var(--s-2); }
  .mdl-preco .modelo-estoque { margin-top: var(--s-2); }
  .mdl-crumbs { margin-bottom: var(--s-3); }
  /* a foto alta (T3 Smart, retrato) sobra para a 2ª linha: o texto e o preço não descem junto */
  .mdl-hero-grid { row-gap: var(--s-4); grid-template-rows: auto 1fr; }
  .mdl-hero .hero-badge { margin-bottom: var(--s-3); }
  .mdl-preco .mdl-economia { margin-top: var(--s-3); }
  .mdl-compra .hero-ctas { margin-top: var(--s-4); }
}

/* ---------- Telas largas (≥1280px): comparativo e "Veja também" ocupam a largura útil (vazio lateral ≤22%) ----------
   O cartão das 4 taxas fica nos 740px medidos no oficial (régua L7). */
@media (min-width: 1280px) {
  .mdl-cmp-wrap { max-width: 1120px; }
  .mdl-cmp-canto { width: 26%; }
  .mdl-outros-grid { grid-template-columns: repeat(3, minmax(0, 400px)); }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .mdl-barra { transition: none; }
}

/* =====================================================================
   RODADA 2 (21/10) — botão "Pedir" dentro da 1ª tela em notebook e tablet
   Antes: 1366×768 → botão em 836–892px; 1280×720 → 882–938; 1024×768 →
   901–957; 768×1024 → até 1052 (o topo com faixa + cronômetro ocupa
   ~234px e é intocável). Só ACRESCENTA regras; o celular (≤767) não muda.
   ===================================================================== */

/* Etiqueta do topo: no tablet e no notebook pequeno fica só a etiqueta curta
   ("Mais vendida"); a frase longa quebrava em 2–3 linhas e empurrava tudo */
@media (min-width: 768px) and (max-width: 1279px) {
  .mdl-badge-desc { display: none; }
}

/* Tablet (768–1023): mesma ordem da 1ª tela do celular — H1 → chip de preço →
   botões → cartão completo. O preço já aparece no chip, colado no botão. */
@media (min-width: 768px) and (max-width: 1023px) {
  .mdl-hero-preco { display: block; }
  .mdl-hero .hero-preco { margin-top: var(--s-4); }
  .mdl-crumbs { margin-bottom: var(--s-4); }
  .mdl-compra { display: flex; flex-direction: column; }
  .mdl-compra .hero-ctas { order: -1; margin-top: 0; margin-bottom: var(--s-4); }
  .mdl-compra .hero-ctas .btn { flex: 1 1 100%; }
  .mdl-hero-grid { row-gap: var(--s-4); }
}

/* Computador (≥1024): cartão de preço e botões LADO A LADO (o botão sobe ~250px)
   e a foto ganha uma coluna um pouco mais estreita (o cartão branco ficava alto
   e vazio em volta da maquininha). */
@media (min-width: 1024px) {
  .mdl-hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .mdl-compra {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
    grid-template-areas: "preco ctas" "preco trust" "pills pills";
    grid-template-rows: auto 1fr auto;
    column-gap: var(--s-4);
  }
  .mdl-compra .mdl-preco { grid-area: preco; max-width: none; }
  .mdl-compra .hero-ctas { grid-area: ctas; margin-top: 0; flex-direction: column; flex-wrap: nowrap; }
  .mdl-compra .hero-ctas .btn { flex: none; width: 100%; padding-inline: var(--s-4); }
  .mdl-compra .hero-trust { grid-area: trust; align-self: start; max-width: none; margin-top: var(--s-3); }
  .mdl-compra .mdl-pills { grid-area: pills; }
  .mdl-preco .mdl-economia { border-radius: var(--r-lg); }   /* se quebrar em 2 linhas, não vira "cápsula" esticada */
  /* T3 Smart (foto em pé + miniaturas): o cartão 5/6 dava ~720px de altura e sobrava vazio sob o preço.
     Mesmo formato dos outros modelos; a foto em pé ocupa a altura toda do cartão. */
  .mdl-galeria--retrato .mdl-galeria-main { aspect-ratio: 4 / 3; padding: var(--s-5); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .mdl-economia-fim { display: none; }   /* cartão mais estreito: "Você economiza R$ X" cabe em 1 linha */
}

/* L9: os 4 modelos usam a galeria HD oficial (720×1080, frente/esquerda/direita) — mesmo enquadramento da T3 Smart,
   sem o zoom que a foto antiga (536×400, com sobra transparente) precisava. */

/* Chip de preço: sem palavra sozinha na 2ª linha */
.mdl-hero-preco .hero-preco-link > span { text-wrap: pretty; }

/* =====================================================================
   L9 "SALTO" (21/10) — fotos REAIS nos blocos "Para quem é" e "Como funciona
   o pedido", galeria com troca suave/deslizar e acabamento do cartão de preço.
   Celular primeiro; o computador ganha o lado a lado (container 1360).
   ===================================================================== */

/* Tablet (768–1023): a foto em faixa larga, sem virar uma torre */
@media (min-width: 768px) and (max-width: 1023px) {
  .mdl-cena { aspect-ratio: 16 / 9; }
}
/* Conserto L9 (conferência, item 1): abaixo de 1024 não há parallax, então cada cena pode ter o seu enquadramento
   (--foco-m) e crescer a partir de outro ponto (--origem-m). Feirante: foco e zoom pelo topo → boné e olhos inteiros
   na moldura 4:3 (celular) e 16:9 (tablet). As outras cenas seguem iguais (sem as variáveis = centro). */
@media (max-width: 1023px) {
  .mdl-cena img { object-position: var(--foco-m, var(--foco, 50% 40%)); transform-origin: var(--origem-m, 50% 50%); }
}

/* Computador: foto numa coluna, título + conteúdo na outra (a foto acompanha a altura do texto) */
@media (min-width: 1024px) {
  .mdl-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "cena head" "cena corpo";
    grid-template-rows: auto 1fr;
    column-gap: var(--s-12); row-gap: var(--s-6);
    align-items: start;
  }
  .mdl-split--inv { grid-template-areas: "head cena" "corpo cena"; }
  .mdl-cena { aspect-ratio: auto; align-self: stretch; min-height: 440px; }
  .mdl-split-head .sec-sub { max-width: 560px; }
}
@media (min-width: 1280px) {
  .mdl-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-16); }
  .mdl-split--inv { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .mdl-quem-lista, .mdl-nao { max-width: none; }   /* conserto L9: a lista termina na mesma borda direita da grade de #recursos */
}

/* Celular: CTA do pedido ocupa a largura; miniaturas centralizadas embaixo da foto */
@media (max-width: 767px) {
  .mdl-passos-cta .btn { width: 100%; }
  .mdl-thumbs { justify-content: center; }
  .mdl-cena-rotulo { left: var(--s-3); bottom: var(--s-3); font-size: 12.5px; }
}
@media (max-width: 360px) {
  .mdl-quem, .mdl-passos li { column-gap: var(--s-3); }
}

/* Cartão de preço: filete lima no topo (etiqueta de oferta), sem mudar a altura do cartão */
.mdl-preco {
  background-image: linear-gradient(90deg, var(--lime), var(--faixa-b));
  background-size: 100% 4px;
  background-repeat: no-repeat;
  background-position: top left;
  overflow: hidden;
}

/* Movimento reduzido: troca de foto sem animação, ícones parados */
@media (prefers-reduced-motion: reduce) {
  .mdl-galeria-img, .mdl-thumb, .mdl-thumb img, .mdl-quem-ic { transition: none; }
  .mdl-galeria.is-trocando .mdl-galeria-img { transform: none; }
}

/* ================= L10 · BLOCO D — bloco de compra completo, barra do pedido e CTA final com comprovante =================
   Os slots ([data-slot]) usam as MESMAS classes do card da home (style.css, bloco L10 · BLOCO C); aqui só o encaixe. */
.mdl-compra [data-slot][hidden] { display: none; }
.mdl-preco .mdl-dia { margin-top: var(--s-2); }
.mdl-preco .mdl-cashback { margin-top: var(--s-4); max-width: 460px; }
.mdl-preco .modelo-caixa { text-align: left; }
.mdl-compra .mdl-share { margin-top: var(--s-3); }
.mdl-compra .mdl-upgrade { margin-top: var(--s-4); max-width: 560px; }

/* Barra do pedido (C6.2): o 1º degrau já está feito — o desconto entra aplicado */
.mdl-progresso {
  display: flex; align-items: center; gap: var(--s-3);
  max-width: 520px; margin-bottom: var(--s-6);
  font-size: 13px; font-weight: 700; line-height: 1.3;
}
.mdl-progresso-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--green-deep); white-space: nowrap; }
.mdl-progresso-ok .ic {
  width: 20px; height: 20px; padding: 3px;
  border-radius: var(--r-full); background: var(--lime); color: var(--green-deep);
}
.mdl-progresso-barra { flex: 1 1 auto; min-width: 40px; height: 6px; border-radius: var(--r-full); background: var(--border); overflow: hidden; }
.mdl-progresso-barra > span { display: block; width: 25%; height: 100%; border-radius: inherit; background: var(--green-brand); }
.mdl-progresso-falta { color: var(--ink-mid); font-weight: 600; white-space: nowrap; }

/* Conferência na matriz (22/10) · celular deitado / tela baixa (B): o botão do hero caía em 514–597 px numa tela de
   375–430. Como no hero da home em B: migalhas, pílula e sub saem só aqui e o H1 encolhe — H1 + chip + botão na 1ª tela. */
@media (max-height: 540px) {
  .mdl-crumbs, .mdl-hero .hero-badge, .mdl-hero .hero-sub { display: none; }
  .mdl-hero h1 { max-width: none; font-size: 28px; }
  .mdl-hero .hero-preco { margin-top: var(--s-3); }
}
/* Celular de 280–359 px: o H1 longo ocupa 4 linhas e o sub mais 3 — o botão caía em 583–637 px (meta ≤ 560; a 320×568
   ficava cortado). O sub sai só aqui: o mesmo texto está logo abaixo, em "Para quem é". */
@media (max-width: 359px) {
  .mdl-hero .hero-sub { display: none; }
}

/* CTA final: o mesmo comprovante da home (aqui sem a cena ao lado) */
.pg-modelo .ctafinal-inner { text-align: center; }
@media (max-height: 540px) {
  .pg-modelo .ctafinal-inner {
    display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    grid-template-areas: "topo topo" "recibo acao";
    align-items: center; column-gap: var(--s-8);
  }
}
@media (max-height: 540px) {
  .pg-modelo .urgency-clock--final { margin-top: var(--s-4); }
  .pg-modelo .urgency-clock--final .t-box { min-width: 56px; font-size: 32px; }
  .pg-modelo .urgency-clock--final .t-sep { font-size: 24px; }
}
/* Celular estreito (≤ 420 px, inclusive o dobrável de 280): a barra do pedido desce para a 2ª linha */
@media (max-width: 420px) {
  .mdl-progresso { flex-wrap: wrap; justify-content: space-between; row-gap: var(--s-2); }
  .mdl-progresso-barra { order: 3; flex: 1 1 100%; }
}
/* O botão final da página diz o modelo E a parcela ("Pedir T3 Smart por 12x de R$ 12,79"): em tela estreita ou baixa ele quebra
   em 2 linhas centradas em vez de passar da tela (dobrável 280, celular deitado com o comprovante ao lado) */
.pg-modelo .ctafinal-cta { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; text-wrap: balance; }

/* L12 · A galeria (LCP da página do modelo) não espera mais o JS (auditoria A3): sobe só com transform desde a
   1ª pintura. Miniaturas na mesma régua do modelo.js antigo. */
@keyframes mdl-galeria-sobe { from { transform: translateY(28px); } }
@keyframes mdl-thumb-sobe { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: no-preference) {
  #hero .mdl-galeria { animation: mdl-galeria-sobe 0.7s var(--ease-out) backwards; }
  .mdl-thumbs > .mdl-thumb { animation: mdl-thumb-sobe 0.45s var(--ease-out) 0.55s backwards; }
  .mdl-thumbs > .mdl-thumb:nth-child(2) { animation-delay: 0.62s; }
  .mdl-thumbs > .mdl-thumb:nth-child(3) { animation-delay: 0.69s; }
  .mdl-thumbs > .mdl-thumb:nth-child(4) { animation-delay: 0.76s; }
}