/* F&A Digital · landing beleza BR na Espanha
   Tokens: ver design/COMMIT-SHEET.md */
:root {
  color-scheme: light;
  /* Identidade nas cores do logo (variação 1, 14/10): marfim + dourado; preto só na comanda e no convite final. */
  --ouro-logo: #D8B460;          /* dourado claro do logo: botões, sublinhados, números grandes */
  --ouro-logo-2: #B48430;        /* dourado escuro do logo: fios e detalhes */
  --acento: var(--ouro-logo);
  --acento-texto: #7A5718;       /* dourado para texto pequeno: 5,9:1 no marfim */
  --fundo: #F7F2EA;              /* marfim */
  --fundo-2: #FFFDF8;            /* off-white quente */
  --fundo-semana: #EFE6D6;       /* marfim dourado da faixa da semana */
  --grafite: #14110D;            /* preto quente: os blocos de contraste */
  --cartao: #FFFDF8;             /* ticket, comanda, bloco-chave */
  --texto: #14110D;
  --texto-suave: #5E5446;
  --tinta: #14110D;
  --tinta-suave: #3B3227;
  --sobre-tinta: #F7F2EA;
  --sobre-tinta-suave: #C9BFB0;
  --linha: #E3D8C6;

  --f-display: "Gloock", "Times New Roman", serif;
  --f-texto: "Geist", system-ui, sans-serif;

  --t-h1: clamp(2.45rem, 1.6rem + 3.6vw, 4.6rem);
  --t-h2: clamp(1.9rem, 1.4rem + 2vw, 3.1rem);
  --t-sub: clamp(1.06rem, 1rem + 0.3vw, 1.25rem);

  --margem: 1rem;
  --saida: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 48rem) { :root { --margem: clamp(2rem, 5vw, 5rem); } }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 1rem/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
em { font-style: italic; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }

/* ---------- Topo ---------- */
.topo {
  display: grid;
  gap: 2.75rem;
  padding: 1.25rem var(--margem) 0;
  max-width: 90rem;
  margin-inline: auto;
  overflow-x: clip;
}
.marca {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none;
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
}
.marca img { width: 2.6rem; height: 2.6rem; border-radius: 50%; box-shadow: 0 0 0 1px rgb(226 84 127 / 0.25); }

.topo h1 {
  margin-top: 2.25rem;
  font-family: var(--f-display);
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.topo h1 em { color: var(--acento); display: block; margin-top: 0.12em; }

.topo__sub {
  margin-top: 1.25rem;
  max-width: 36ch;
  font-size: var(--t-sub);
  color: var(--texto-suave);
}

.topo__acoes { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.5rem; padding: 0.9rem 1.5rem;
  border-radius: 999px;
  background: var(--acento); color: var(--tinta);
  font-weight: 700; font-size: 1.05rem; text-decoration: none;
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.35) inset, 0 10px 30px -12px rgb(226 84 127 / 0.55);
  transition: background-color 140ms var(--saida), transform 140ms var(--saida);
}
.botao:active { transform: scale(0.98); }
@media (hover: hover) { .botao:hover { background: var(--acento-texto); } }
.link-semana {
  font-weight: 500; text-underline-offset: 0.3em; text-decoration-color: var(--acento);
  color: var(--texto);
}
.topo__nota { margin-top: 1rem; font-size: 0.9rem; color: var(--texto-suave); max-width: 40ch; }

/* palco: celular + ticket */
.topo__palco {
  position: relative;
  display: grid;
  justify-items: center;
  padding-bottom: 2.5rem;
  z-index: 2;
}
.celular { margin: 0; width: min(17rem, 72vw); }
.celular__tela {
  position: relative;
  aspect-ratio: 9 / 19;
  border-radius: 2.4rem;
  overflow: hidden;
  container-type: size;
  background: oklch(0.20 0.02 50);
  padding-top: 2rem;
  border: 0.55rem solid oklch(0.10 0.005 85);
  outline: 1px solid var(--linha);
  box-shadow: 0 40px 80px -30px rgb(58 18 34 / 0.28), 0 0 0 1px rgb(226 84 127 / 0.18);
}
.celular__tela::before { /* câmera, sobre a barra de status */
  content: ""; position: absolute; z-index: 2; top: 0.55rem; left: 50%; translate: -50% 0;
  width: 4.6rem; height: 1.25rem; border-radius: 1rem; background: oklch(0.08 0 0);
}
.celular__tela::after { /* barra de status */
  content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 2rem; background: oklch(0.20 0.02 50);
}
.celular__tela::before { z-index: 3; }
.celular__site { width: 100%; will-change: transform; }
.celular figcaption {
  margin-top: 0.9rem; text-align: center;
  font-size: 0.85rem; color: var(--texto-suave);
}

.balao {
  position: absolute; left: 0.5rem; right: 0.5rem; top: 2.3rem; z-index: 3;
  padding: 0.65rem 0.8rem;
  border-radius: 1rem;
  background: oklch(0.97 0.006 150 / 0.96); color: var(--tinta);
  font-size: 0.82rem; line-height: 1.3; font-weight: 500;
  box-shadow: 0 12px 30px -10px rgb(58 18 34 / 0.24);
  opacity: 0; transform: translateY(-0.75rem) scale(0.96);
}
.balao__de { display: block; font-size: 0.7rem; font-weight: 700; color: oklch(0.45 0.12 150); margin-bottom: 0.15rem; }

.ticket {
  position: relative;
  width: min(19rem, 86vw);
  margin-top: -5.5rem;
  padding: 1.1rem 1.3rem 1rem;
  background: var(--cartao); color: var(--tinta);
  border-radius: 1rem;
  box-shadow: 0 30px 60px -24px rgb(58 18 34 / 0.26);
  rotate: -2deg;
  /* recortes laterais do ticket */
  -webkit-mask: radial-gradient(circle 0.7rem at 0 62%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 0.7rem at 100% 62%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 0.7rem at 0 62%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 0.7rem at 100% 62%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.ticket__topo {
  display: flex; justify-content: space-between;
  font-size: 0.85rem; font-weight: 600; color: var(--tinta-suave);
}
.ticket__preco { margin-top: 0.2rem; font-family: var(--f-display); font-size: 2.9rem; line-height: 1; }
.ticket__preco small { font-family: var(--f-texto); font-size: 1rem; font-weight: 600; }
.ticket__fixo { font-size: 0.88rem; color: var(--tinta-suave); }
.ticket ul {
  list-style: none; margin: 0.85rem 0 0; padding: 0.85rem 0 0;
  border-top: 1.5px dashed rgb(22 11 16 / 0.35);
  display: grid; gap: 0.3rem; font-size: 0.92rem; font-weight: 500;
}
.ticket li { display: flex; gap: 0.5rem; align-items: baseline; }
.ticket li::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--acento); translate: 0 -0.1em; }
.ticket__pe {
  margin-top: 0.85rem; padding: 0.5rem 0.7rem; border-radius: 0.5rem;
  background: var(--tinta); color: var(--acento);
  font-size: 0.86rem; font-weight: 700; text-align: center;
}

/* celular: a legenda (prova real) vem depois do ticket, para não ficar escondida */
@media (max-width: 59.99rem) {
  .celular { display: contents; }
  .celular__tela { width: min(17rem, 72vw); order: 1; }
  .ticket { order: 2; }
  .celular figcaption { order: 3; margin-top: 1.1rem; }
}

@media (min-width: 60rem) {
  .topo {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 2rem;
    min-height: min(100svh, 58rem);
    padding-top: 2rem;
  }
  .topo__texto { align-self: start; padding-top: 0.5rem; }
  .topo h1 { margin-top: clamp(3rem, 9vh, 6.5rem); }
  .topo__palco { padding-bottom: 0; justify-items: end; padding-right: 4rem; }
  .celular { width: 19rem; margin-top: 1.5rem; }
  .ticket {
    position: absolute; right: calc(19rem + 4rem - 3.5rem); bottom: 9%;
    margin: 0; width: 17.5rem; rotate: -3deg;
  }
}

/* ---------- A semana (1ª dobra, dourado) ---------- */
.semana {
  background: var(--acento);
  color: var(--tinta);
  padding: 3rem var(--margem) 3.5rem;
  position: relative; z-index: 1;
}
.semana > * { max-width: 80rem; margin-inline: auto; }
.semana__cabeca h2 { font-family: var(--f-display); font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.015em; }
.semana__cabeca h2 em { display: block; }
.semana__cabeca p { margin-top: 0.6rem; font-weight: 500; color: var(--tinta-suave); }

.agenda {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  column-gap: 0.6rem;
}
.agenda__dias, .agenda__grade { display: grid; grid-template-rows: repeat(7, 3.6rem); }
.agenda__dias {
  list-style: none; margin: 0; padding: 0;
  font-size: 0.8rem; font-weight: 700; color: var(--tinta-suave);
}
.agenda__dias li { padding-top: 0.35rem; border-top: 1px solid rgb(22 11 16 / 0.22); }
.agenda__grade {
  background: repeating-linear-gradient(to bottom, rgb(22 11 16 / 0.22) 0 1px, transparent 1px 3.6rem);
}
.bloco {
  grid-row: var(--de) / var(--ate);
  grid-column: 1;
  margin: 0.2rem 0;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0 0.9rem;
  border: 0; border-radius: 0.6rem;
  background: var(--tinta); color: var(--sobre-tinta);
  font: 600 0.98rem/1.2 var(--f-texto); text-align: left;
  cursor: pointer;
  transition: background-color 140ms var(--saida), transform 140ms var(--saida), box-shadow 140ms var(--saida);
}
.bloco__quando { font-size: 0.75rem; font-weight: 700; color: var(--acento); white-space: nowrap; }
.bloco--chave { background: var(--cartao); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.bloco--chave .bloco__quando { color: var(--tinta-suave); }
.bloco[aria-selected="true"] { box-shadow: 0 0 0 3px var(--acento), 0 0 0 5px var(--tinta); }
.bloco:active { transform: scale(0.985); }
@media (hover: hover) { .bloco:hover { transform: translateY(-2px); } }

.agenda__detalhe { grid-column: 1 / -1; margin-top: 1.25rem; }
.agenda__detalhe [role="tabpanel"] {
  padding: 1.1rem 1.2rem;
  border-radius: 0.9rem;
  background: rgb(22 11 16 / 0.08);
  border: 1.5px solid rgb(22 11 16 / 0.5);
}
.agenda__detalhe h3 { font-family: var(--f-display); font-size: 1.45rem; line-height: 1.15; }
.agenda__detalhe p { margin-top: 0.45rem; max-width: 62ch; }

@media (min-width: 60rem) {
  .semana { padding-block: 4.5rem 5rem; }
  .agenda { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 0; }
  .agenda__dias, .agenda__grade { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-rows: none; }
  .agenda__dias li { border-top: 0; border-left: 1px solid rgb(22 11 16 / 0.22); padding: 0 0 0.6rem 0.7rem; }
  .agenda__grade {
    grid-template-rows: repeat(5, 3.9rem);
    background: none;
    border-top: 1px solid rgb(22 11 16 / 0.3);
    position: relative;
  }
  .agenda__grade::before { /* colunas dos dias */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(to right, rgb(22 11 16 / 0.22) 0 1px, transparent 1px calc(100% / 7));
  }
  .bloco { grid-row: var(--linha); grid-column: var(--de) / var(--ate); margin: 0.35rem 0.35rem; }
  .agenda__detalhe { margin-top: 1.75rem; }
  .agenda__detalhe [role="tabpanel"] { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem; align-items: baseline; padding: 1.4rem 1.6rem; }
  .agenda__detalhe [role="tabpanel"][hidden] { display: none; }
  .agenda__detalhe p { margin-top: 0; }
}

/* ---------- Barra do WhatsApp (celular) ---------- */
.barra-whats {
  position: fixed; z-index: 20; left: 0.75rem; right: 0.75rem; bottom: max(0.75rem, env(safe-area-inset-bottom));
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  min-height: 3.4rem; padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--tinta); color: var(--sobre-tinta);
  outline: 1.5px solid var(--acento);
  font-weight: 700; text-decoration: none;
  box-shadow: 0 14px 30px -10px rgb(58 18 34 / 0.26);
  transition: transform 200ms var(--saida), opacity 200ms var(--saida);
}
.barra-whats { justify-content: center; gap: 0.55rem; }
.barra-whats .ico { color: var(--acento); }
.js .barra-whats:not(.is-visivel) { transform: translateY(150%); opacity: 0; pointer-events: none; }
@media (min-width: 60rem) { .barra-whats { display: none; } }

/* ---------- Movimento ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .celular__site { animation: rolar-site 22s var(--saida) infinite; }
  .js .balao { animation: balao 22s var(--saida) infinite; }
  .js .celular.is-pausado .celular__site,
  .js .celular.is-pausado .balao { animation-play-state: paused; }

  .js .agenda:not(.is-dentro) .bloco { opacity: 0; transform: translateX(-0.6rem); }
  .js .agenda .bloco { transition: opacity 420ms var(--saida), transform 420ms var(--saida), background-color 140ms var(--saida), box-shadow 140ms var(--saida); }
  .js .agenda.is-dentro .bloco { transition-delay: calc(var(--de) * 70ms); }
  .js .agenda.is-dentro.is-pronta .bloco { transition-delay: 0ms; }

  .agenda__detalhe [role="tabpanel"]:not([hidden]) { animation: detalhe 200ms var(--saida); }
}
@keyframes rolar-site {
  0%, 10%   { transform: translateY(0); }
  70%, 92%  { transform: translateY(calc(-100% + 100cqh)); }
  100%      { transform: translateY(0); }
}
@keyframes balao {
  0%, 72%   { opacity: 0; transform: translateY(-0.75rem) scale(0.96); }
  76%, 90%  { opacity: 1; transform: translateY(0) scale(1); }
  94%, 100% { opacity: 0; transform: translateY(-0.4rem) scale(0.98); }
}
@keyframes detalhe { from { opacity: 0; transform: translateY(0.4rem); } }

/* movimento reduzido: celular parado no topo do site, balão já visível */
@media (prefers-reduced-motion: reduce) {
  .balao { opacity: 1; transform: none; }
}

/* =====================================================================
   Página completa (14/10, após aprovação do topo)
   ===================================================================== */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ico { width: 1.25em; height: 1.25em; flex: none; }
.topo__marca { display: flex; align-items: center; gap: 1.5rem; }
.idioma { font-size: 0.9rem; font-weight: 500; color: var(--texto-suave); text-underline-offset: 0.3em; }
@media (hover: hover) { .idioma:hover { color: var(--acento); } }

/* largura de leitura comum às seções */
.dor > *, .portfolio > *, .video, .inclui > *, .faq > *, .final > *, .rodape > * { max-width: 76rem; margin-inline: auto; }
:is(.dor, .portfolio, .faq) h2, .video h2, .inclui h2 {
  font-family: var(--f-display); font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.015em;
}

/* picote: a borda do ticket separando as seções (semicírculos da cor de cima) */
.picote { position: relative; }
.picote::before {
  content: ""; position: absolute; inset: -1px 0 auto; height: 0.9rem; pointer-events: none;
  background: radial-gradient(circle at 50% 0, var(--cor-acima) 0.55rem, transparent 0.6rem) 0 0 / 1.6rem 0.9rem repeat-x;
}

/* ---------- Dor: hoje x com o seu site ---------- */
.dor {
  background: var(--fundo-2);
  padding: 4rem var(--margem) 4.5rem;
  transition: background-color 420ms var(--saida);
}
.dor h2 { max-width: 20ch; margin-inline: 0; }
.dor > h2 { margin-left: max(0px, calc((100% - 76rem) / 2)); }
.chave {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
  margin: 1.75rem 0 0; padding: 0.3rem; border: 1.5px solid rgb(226 84 127 / 0.6); border-radius: 999px;
  min-width: min(22rem, 100%);
}
.dor > .chave { margin-left: max(0px, calc((100% - 76rem) / 2)); }
.chave label {
  position: relative; z-index: 1; display: grid; place-items: center;
  min-height: 2.9rem; padding: 0 1.1rem; border-radius: 999px;
  font-weight: 700; cursor: pointer; color: var(--texto);
  transition: color 200ms var(--saida);
}
.chave input { position: absolute; opacity: 0; pointer-events: none; }
.chave label:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.chave label:has(input:checked) { color: var(--tinta); }
.chave__marcador {
  position: absolute; inset: 0.3rem auto 0.3rem 0.3rem; width: calc(50% - 0.3rem);
  border-radius: 999px; background: var(--acento);
  transition: transform 320ms var(--saida);
}
.dor:has(input[value="site"]:checked) .chave__marcador, .dor.is-site .chave__marcador { transform: translateX(100%); }
.dor:has(input[value="site"]:checked), .dor.is-site { background: var(--fundo-semana); }

.dor__lista { list-style: none; margin: 2.25rem auto 0; padding: 0; display: grid; gap: 0; }
.dor__lista li {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem;
  padding: 1.4rem 0; border-bottom: 1px solid var(--linha);
}
.dor__tema { font-weight: 700; font-size: 0.9rem; color: var(--acento-texto); }
.dor__hoje, .dor__site {
  grid-area: 2 / 1; font-family: var(--f-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); line-height: 1.2;
  transition: opacity 320ms var(--saida), transform 320ms var(--saida), visibility 320ms allow-discrete;
}
.dor__site { color: var(--acento-texto); opacity: 0; visibility: hidden; transform: translateY(0.5rem); }
.dor:has(input[value="site"]:checked) .dor__hoje, .dor.is-site .dor__hoje { opacity: 0; visibility: hidden; transform: translateY(-0.4rem); }
.dor:has(input[value="site"]:checked) .dor__site, .dor.is-site .dor__site { opacity: 1; visibility: visible; transform: none; }
.dor li:nth-child(2) :is(.dor__hoje, .dor__site) { transition-delay: 50ms; }
.dor li:nth-child(3) :is(.dor__hoje, .dor__site) { transition-delay: 100ms; }
@media (min-width: 48rem) {
  .dor__lista li { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; gap: 2rem; padding: 1.8rem 0; }
  .dor__tema { grid-area: 1 / 1; }
  .dor__hoje, .dor__site { grid-area: 1 / 2; max-width: 34ch; }
}

/* ---------- Portfólio ---------- */
.portfolio { background: var(--fundo); padding: 4.5rem var(--margem) 5rem; overflow-x: clip; }
.portfolio > h2 { margin-bottom: 2.5rem; }

.cliente { display: grid; gap: 2rem; margin-bottom: 4.5rem; }
.cliente__telas { position: relative; padding-right: 18%; padding-bottom: 2.5rem; }
.navegador {
  margin: 0; border-radius: 0.8rem; overflow: hidden; background: var(--fundo-2);
  box-shadow: 0 30px 70px -30px rgb(58 18 34 / 0.28), 0 0 0 1px var(--linha);
}
.navegador__barra {
  display: flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.8rem;
  font-size: 0.72rem; color: var(--texto-suave); background: #EFE8DC;
}
.navegador__barra span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--linha); }
.navegador__barra span:last-of-type { margin-right: 0.5rem; }
.navegador img { width: 100%; aspect-ratio: 960 / 600; object-fit: cover; }
.cliente .fone { position: absolute; right: 0; bottom: 0; width: 34%; max-width: 13rem; }

.fone {
  position: relative; border-radius: 1.6rem; padding: 0.35rem;
  background: oklch(0.10 0.005 85); box-shadow: 0 24px 50px -20px rgb(58 18 34 / 0.30), 0 0 0 1px var(--linha);
}
.fone__tela { position: relative; border-radius: 1.3rem; overflow: hidden; aspect-ratio: 390 / 844; background: var(--fundo-2); }
.fone__tela img, .fone__tela video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fone__play {
  position: absolute; left: 50%; bottom: 0.8rem; translate: -50% 0; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
  min-height: 2.5rem; padding: 0.4rem 0.9rem; border-radius: 999px;
  background: var(--tinta); color: var(--sobre-tinta); outline: 1px solid rgb(226 84 127 / 0.6);
  font-size: 0.8rem; font-weight: 700; text-decoration: none;
  transition: transform 140ms var(--saida), background-color 140ms var(--saida);
}
.fone__play .ico { color: var(--acento); width: 1em; height: 1em; }
.fone__play:active { transform: scale(0.97); }
@media (hover: hover) { .fone__play:hover { background: #3A2A31; } }
.fone.is-tocando .fone__play { opacity: 0; pointer-events: none; }
.fone video { opacity: 0; transition: opacity 320ms var(--saida); }
.fone.is-tocando video { opacity: 1; }

.cliente__texto h3 { font-family: var(--f-display); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.05; margin-top: 0.6rem; }
.cliente__texto p:not(.selo) { margin-top: 0.8rem; color: var(--texto-suave); max-width: 46ch; }
.selo {
  display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--acento); color: var(--acento); font-size: 0.8rem; font-weight: 700;
}
.link-seta {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1.1rem;
  font-weight: 600; color: var(--texto); text-underline-offset: 0.3em; text-decoration-color: var(--acento);
}
@media (min-width: 60rem) {
  .cliente { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 4rem; }
  .cliente--inverso .cliente__telas { order: 2; }
  .cliente--inverso { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
}

.demos__cabeca h3 { font-family: var(--f-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.1; }
.demos__cabeca p { margin-top: 0.6rem; color: var(--texto-suave); max-width: 60ch; }
.filtros {
  display: flex; gap: 0.5rem; margin: 1.5rem calc(-1 * var(--margem)) 0; padding: 0.2rem var(--margem);
  overflow-x: auto; scrollbar-width: none;
}
.filtros button {
  flex: none; min-height: 2.6rem; padding: 0 1rem; border-radius: 999px;
  border: 1px solid var(--linha); background: transparent; color: var(--texto);
  font: 600 0.92rem var(--f-texto); cursor: pointer;
  transition: background-color 140ms var(--saida), color 140ms var(--saida), border-color 140ms var(--saida);
}
.filtros button[aria-pressed="true"] { background: var(--acento); color: var(--tinta); border-color: var(--acento); }
@media (hover: hover) { .filtros button:not([aria-pressed="true"]):hover { border-color: var(--acento); } }
.no-js .filtros { display: none; }

.trilho { position: relative; margin-top: 1.5rem; }
.trilho__lista {
  list-style: none; margin: 0 calc(-1 * var(--margem)); padding: 0.5rem var(--margem) 1.25rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(14.5rem, 60vw); gap: 1.25rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem);
  overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--linha) transparent;
}
.trilho__lista:focus-visible { outline-offset: -2px; }
.demo { scroll-snap-align: start; }
.demo[hidden] { display: none; }
.demo__nome { margin-top: 0.9rem; font-weight: 700; }
.demo__ramo { font-size: 0.9rem; color: var(--texto-suave); }
.demo__rotulo { margin-top: 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--acento); }
.trilho__setas { display: none; }
@media (min-width: 60rem) {
  .trilho__lista { grid-auto-columns: 15rem; }
  .trilho__setas { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.5rem; }
  .seta {
    display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
    border: 1px solid var(--linha); background: transparent; color: var(--texto); cursor: pointer;
    transition: border-color 140ms var(--saida), transform 140ms var(--saida);
  }
  .seta:active { transform: scale(0.95); }
  @media (hover: hover) { .seta:hover { border-color: var(--acento); } }
}

/* ---------- Vídeo ---------- */
.video {
  background: var(--fundo-2); padding: 4.5rem var(--margem);
  display: grid; gap: 2rem; max-width: none;
}
.video__texto, .video__quadro { width: 100%; max-width: 76rem; margin-inline: auto; }
.video__texto p { margin-top: 0.8rem; color: var(--texto-suave); max-width: 40ch; }
.video__quadro { margin-block: 0; }
.video video {
  display: block; width: 100%; max-width: 26rem; height: auto; aspect-ratio: 4 / 5;
  border-radius: 1rem; background: var(--fundo); box-shadow: 0 30px 70px -30px rgb(58 18 34 / 0.30);
}
@media (min-width: 60rem) {
  .video { grid-template-columns: minmax(0, 1fr) 26rem; align-items: center; gap: 4rem; padding-inline: max(var(--margem), calc((100% - 76rem) / 2)); }
  .video__texto, .video__quadro { max-width: none; margin: 0; }
}

/* ---------- O que inclui: a comanda ---------- */
.inclui { background: var(--acento); color: var(--tinta); padding: 4.5rem var(--margem) 5.5rem; display: grid; gap: 2.5rem; }
.inclui > h2 { margin: 0; }
.comanda {
  position: relative; width: min(30rem, 100%); margin: 0 0 1rem; padding: 1.4rem 1.4rem 1.6rem;
  background: var(--cartao); color: var(--tinta);
  box-shadow: 0 28px 50px -26px rgb(58 18 34 / 0.35);
  font-variant-numeric: tabular-nums; rotate: -1deg;
}
.comanda::after { /* borda rasgada */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.6rem;
  background: conic-gradient(from 315deg at 50% 100%, var(--cartao) 90deg, transparent 0) 0 0 / 1.2rem 0.6rem repeat-x;
}
.comanda__topo {
  display: flex; justify-content: space-between; padding-bottom: 0.8rem;
  border-bottom: 1.5px dashed rgb(22 11 16 / 0.35); font-weight: 700; font-size: 0.9rem;
}
.comanda__itens { list-style: none; margin: 0; padding: 0.6rem 0; }
.comanda__itens li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding: 0.45rem 0; }
.comanda__itens li span:last-child { font-size: 0.82rem; font-weight: 600; color: var(--tinta-suave); }
.comanda__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 0.8rem; border-top: 1.5px dashed rgb(22 11 16 / 0.35);
  font-weight: 700;
}
.comanda__total span:last-child { font-family: var(--f-display); font-size: 2.5rem; font-weight: 400; line-height: 1; }
.comanda__total small { font-family: var(--f-texto); font-size: 1rem; font-weight: 600; }
.comanda__pagamento { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.95rem; }
.comanda__pagamento strong { display: inline-block; min-width: 3.2rem; }
.comanda__pe {
  margin-top: 1.1rem; padding: 0.6rem 0.8rem; border-radius: 0.5rem;
  background: var(--tinta); color: var(--acento); font-weight: 700; text-align: center;
}
.inclui__depois { max-width: 40ch; font-weight: 500; color: var(--tinta-suave); }
@media (min-width: 60rem) {
  .inclui { grid-template-columns: minmax(0, 1fr) 30rem; grid-template-areas: "titulo comanda" "depois comanda"; align-items: start; column-gap: 5rem; padding-inline: max(var(--margem), calc((100% - 76rem) / 2)); }
  .inclui > * { max-width: none; margin-inline: 0; }
  .inclui > h2 { grid-area: titulo; align-self: end; }
  .inclui__depois { grid-area: depois; }
  .comanda { grid-area: comanda; }
}

/* ---------- FAQ ---------- */
.faq { background: var(--fundo); padding: 4.5rem var(--margem); }
.faq__lista { margin-top: 2rem; max-width: 52rem; margin-left: max(0px, calc((100% - 76rem) / 2)); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 3.6rem; padding: 1rem 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { color: var(--acento); transition: transform 200ms var(--saida); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq details p { padding: 0 0 1.3rem; color: var(--texto-suave); max-width: 60ch; }
@media (hover: hover) { .faq summary:hover { color: var(--acento-texto); } }

/* ---------- CTA final ---------- */
.final { background: var(--acento); color: var(--tinta); padding: 5rem var(--margem) 5.5rem; text-align: center; }
.final h2 { font-family: var(--f-display); font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.8rem); line-height: 1.04; letter-spacing: -0.015em; max-width: 22ch; }
.final h2 em { display: block; margin-top: 0.15em; }
.final > p { margin-top: 1rem; font-weight: 500; color: var(--tinta-suave); }
.final .botao { margin-top: 1.8rem; }
.botao--escuro { background: var(--tinta); color: var(--sobre-tinta); box-shadow: 0 14px 30px -14px rgb(58 18 34 / 0.35); }
@media (hover: hover) { .botao--escuro:hover { background: #3A2A31; } }
.final__fone { font-weight: 700; letter-spacing: 0.02em; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--fundo); padding: 2.5rem var(--margem) 6.5rem; display: grid; gap: 0.6rem; font-size: 0.9rem; color: var(--texto-suave); }
.rodape .marca { color: var(--texto); }
.rodape a:not(.marca) { color: var(--texto); text-underline-offset: 0.25em; }
@media (min-width: 60rem) { .rodape { padding-bottom: 2.5rem; } }

/* ---------- Efeitos ligados à rolagem (CSS puro; sem suporte, tudo já aparece) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* painel dourado que se abre ao entrar */
    .painel-abre { animation: painel-abre linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    /* comanda saindo da impressora */
    .imprime { animation: imprime linear both; animation-timeline: view(); animation-range: entry 15% cover 45%; }
    /* títulos revelados da esquerda para a direita */
    .revela { animation: revela linear both; animation-timeline: view(); animation-range: entry 20% entry 90%; }
  }
}
@keyframes painel-abre { from { clip-path: inset(0 6% 0 6% round 2.5rem 2.5rem 0 0); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes imprime { from { clip-path: inset(0 -2rem 100% -2rem); } to { clip-path: inset(0 -2rem -2rem -2rem); } }
@keyframes revela { from { clip-path: inset(-0.2em 100% -0.3em 0); } to { clip-path: inset(-0.2em 0 -0.3em 0); } }

@media (prefers-reduced-motion: no-preference) {
  .faq details[open] p { animation: detalhe 200ms var(--saida); }
  ::view-transition-group(*) { animation-duration: 320ms; animation-timing-function: var(--saida); }
}
.js .barra-whats.is-escondida { transform: translateY(150%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .barra-whats { transition: opacity 140ms linear; }
  .js .barra-whats:not(.is-visivel), .js .barra-whats.is-escondida { transform: none; }
}

/* ---------- Páginas legais ---------- */
.legal { max-width: 46rem; margin: 0 auto; padding: 2rem var(--margem) 4rem; }
.legal h1 { margin-top: 2.5rem; font-family: var(--f-display); font-size: clamp(2rem, 1.6rem + 2vw, 3rem); line-height: 1.05; }
.legal h2 { margin-top: 2.25rem; font-family: var(--f-display); font-size: 1.5rem; line-height: 1.15; }
.legal p, .legal li { margin-top: 0.75rem; color: var(--texto-suave); max-width: 68ch; }
.legal ul { padding-left: 1.2rem; }
.legal strong { color: var(--texto); }
.legal .pendente { color: var(--acento-texto); font-weight: 700; }
.legal__voltar { display: inline-block; margin-top: 3rem; font-weight: 600; color: var(--texto); text-underline-offset: 0.3em; }

/* =====================================================================
   Identidade nas cores do logo (variação 1): marfim + dourado,
   preto só na comanda e no convite final. Mesma estrutura, textos e efeitos.
   ===================================================================== */
h1, h2, h3, .ticket__preco, .comanda__total span:last-child { font-weight: 400; letter-spacing: -0.015em; }
.marca img { box-shadow: none; }

.topo { background: var(--fundo); max-width: 90rem; }
.topo h1 { color: var(--tinta); line-height: 1.04; }
.topo h1 em, .semana__cabeca h2 em { color: var(--acento-texto); }
.topo__sub, .topo__nota, .celular figcaption, .topo .idioma { color: var(--texto-suave); }

.botao { background: var(--ouro-logo); color: var(--tinta); box-shadow: 0 10px 26px -14px rgb(120 84 24 / 0.55); }
@media (hover: hover) { .botao:hover { background: #E3C47A; } }
.botao--escuro, .barra-whats { background: var(--tinta); color: var(--sobre-tinta); }
.barra-whats { outline-color: var(--ouro-logo); }
.barra-whats .ico, .botao--escuro .ico { color: var(--ouro-logo); }
.link-semana, .link-seta { color: var(--tinta); text-decoration-color: var(--ouro-logo-2); }

.celular__tela { outline: 0; box-shadow: 0 40px 70px -34px rgb(60 40 10 / 0.5); }
.ticket { box-shadow: 0 26px 50px -24px rgb(60 40 10 / 0.4), 0 0 0 1px var(--linha); }
.ticket__pe { background: var(--tinta); color: var(--ouro-logo); }
.ticket li::before { background: var(--ouro-logo-2); }

.dor { background: var(--fundo-2); }
.chave { border-color: var(--ouro-logo-2); }
.chave__marcador { background: var(--ouro-logo); }
.dor:has(input[value="site"]:checked), .dor.is-site { background: #F1E8D8; }
.dor__site { color: var(--acento-texto); }

.semana { background: var(--fundo-semana); }
.bloco:not(.bloco--chave) { background: var(--tinta); color: var(--sobre-tinta); }
.bloco__quando { color: var(--ouro-logo); }
.bloco--chave { color: var(--tinta); }
.bloco--chave .bloco__quando { color: var(--tinta-suave); }
.bloco[aria-selected="true"] { box-shadow: 0 0 0 3px var(--ouro-logo), 0 0 0 5px var(--tinta); }

.selo { border-color: var(--ouro-logo-2); color: var(--acento-texto); }
.demo__rotulo { color: var(--acento-texto); }
.filtros button[aria-pressed="true"] { background: var(--ouro-logo); border-color: var(--ouro-logo); color: var(--tinta); }
.fone__play .ico { color: var(--ouro-logo); }
.faq summary .ico { color: var(--ouro-logo-2); }

.inclui { background: var(--grafite); color: var(--sobre-tinta); }
.inclui > h2 { color: var(--sobre-tinta); }
.inclui__depois { color: var(--sobre-tinta-suave); }
.comanda { box-shadow: 0 30px 60px -26px rgb(0 0 0 / 0.6); }
.comanda__pe { background: var(--tinta); color: var(--ouro-logo); }

.final { background: var(--grafite); color: var(--sobre-tinta); }
.final h2 { color: var(--sobre-tinta); }
.final h2 em { color: var(--ouro-logo); }
.final > p, .final__fone { color: var(--sobre-tinta-suave); }
.final :focus-visible, .inclui :focus-visible { outline-color: var(--ouro-logo); }
.final .botao--escuro { background: var(--ouro-logo); color: var(--tinta); }
.final .botao--escuro .ico { color: var(--tinta); }
@media (hover: hover) { .final .botao--escuro:hover { background: #E3C47A; } }

.rodape { border-top: 1px solid var(--linha); }

/* =====================================================================
   Rodada interativa (15/10): botões premium, cabeçalho com selo,
   dor com o celular do Maps, semana com a prévia se montando e convite com a conversa.
   ===================================================================== */
:root {
  --altura-botao: 3.25rem;          /* 52 px: CTA */
  --altura-sec: 3rem;               /* 48 px: secundários, chips, filtros */
  --ouro-metal: linear-gradient(180deg, #EDD290 0%, #D8B460 46%, #C29844 100%);
}
.no-js .so-js { display: none !important; }
#semana { scroll-margin-top: 4.5rem; }

/* ---------- Botões ---------- */
.botao, .barra-whats, .botao-sec { position: relative; isolation: isolate; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.botao {
  min-height: var(--altura-botao); padding: 0 1.6rem; background: var(--ouro-metal); color: var(--tinta);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -1px 0 rgb(122 87 24 / 0.35), 0 1px 0 rgb(122 87 24 / 0.2), 0 12px 26px -14px rgb(120 84 24 / 0.6);
  transition: transform 140ms var(--saida), box-shadow 140ms var(--saida), filter 140ms var(--saida);
}
@media (hover: hover) { .botao:hover { background: var(--ouro-metal); filter: brightness(1.05); } }
.botao:active { transform: translateY(1px) scale(0.985); box-shadow: inset 0 2px 5px rgb(110 76 18 / 0.45), 0 4px 10px -8px rgb(120 84 24 / 0.6); }
.botao:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.botao::after, .barra-whats::after, .botao-sec::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.6) 47%, rgb(255 255 255 / 0.12) 56%, transparent 70%);
  transform: translateX(-130%);
}
.barra-whats::after, .botao-sec--forte::after { background: linear-gradient(105deg, transparent 30%, rgb(216 180 96 / 0.35) 48%, transparent 66%); }
.barra-whats { min-height: 3.4rem; transition: transform 200ms var(--saida), opacity 200ms var(--saida); }
.barra-whats:active { transform: translateY(1px) scale(0.985); }

.botao-sec {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--altura-sec); padding: 0 1.2rem; border-radius: 999px;
  border: 1.5px solid var(--ouro-logo-2); background: var(--fundo-2); color: var(--tinta);
  font: 600 0.95rem var(--f-texto); cursor: pointer;
  transition: transform 140ms var(--saida), background-color 140ms var(--saida), border-color 140ms var(--saida);
}
.botao-sec--forte { background: var(--tinta); border-color: var(--tinta); color: var(--sobre-tinta); }
.botao-sec--forte .ico { color: var(--ouro-logo); }
.botao-sec:active { transform: translateY(1px) scale(0.985); }
.botao-sec:disabled { opacity: 0.45; cursor: default; }
@media (hover: hover) { .botao-sec:not(:disabled):hover { border-color: var(--ouro-logo); } .botao-sec--forte:hover { background: #2A241C; } }

.link-semana, .link-seta { display: inline-flex; align-items: center; gap: 0.35rem; min-height: var(--altura-sec); }
.filtros button, .chave label { min-height: var(--altura-sec); }
.filtros button:active, .chips button:active, .chave label:active { transform: translateY(1px) scale(0.985); }
.filtros button[aria-pressed="true"] { background: var(--ouro-metal); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5); }
.fone__play { min-height: var(--altura-sec); padding-inline: 1rem; }
.fone__play:active { transform: scale(0.97); }

@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) {
    .botao:hover::after, .barra-whats:hover::after, .botao-sec:hover::after { transform: translateX(130%); transition: transform 700ms var(--saida); }
    .botao:hover .ico, .barra-whats:hover .ico { animation: aceno 600ms var(--saida); }
  }
  .brilha::after { animation: brilho 700ms var(--saida); }
  .brilha .ico { animation: aceno 600ms var(--saida); }
}
@keyframes brilho { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes aceno {
  0% { transform: none; } 25% { transform: rotate(-12deg) scale(1.08); } 55% { transform: rotate(8deg) scale(1.08); }
  80% { transform: rotate(-3deg); } 100% { transform: none; }
}

/* ---------- Cabeçalho com o selo, que encolhe ao rolar ---------- */
.cabecalho {
  position: sticky; top: 0; z-index: 30; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 4.5rem; padding-inline: max(var(--margem), calc((100% - 90rem) / 2 + var(--margem)));
  transition: transform 320ms var(--saida);
}
.cabecalho::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fundo); box-shadow: 0 1px 0 var(--linha), 0 12px 26px -22px rgb(60 40 10 / 0.5);
  opacity: 0; transition: opacity 320ms var(--saida);
}
.cabecalho .marca, .cabecalho .idioma { transition: transform 320ms var(--saida); }
.cabecalho .marca { gap: 0.7rem; min-height: var(--altura-sec); }
.cabecalho .marca img {
  width: 3rem; height: 3rem; border-radius: 50%; transform-origin: left center;
  box-shadow: 0 0 0 1px rgb(180 132 48 / 0.5), 0 6px 14px -8px rgb(60 40 10 / 0.6);
  transition: transform 320ms var(--saida);
}
.cabecalho .marca span { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: -0.01em; transform-origin: left center; transition: transform 320ms var(--saida); }
.cabecalho .idioma { display: inline-flex; align-items: center; min-height: var(--altura-sec); color: var(--texto-suave); }
.cabecalho.is-compacto { transform: translateY(-0.6rem); }
.cabecalho.is-compacto::before { opacity: 1; }
.cabecalho.is-compacto .marca, .cabecalho.is-compacto .idioma { transform: translateY(0.3rem); }
.cabecalho.is-compacto .marca img { transform: scale(0.78); }
.cabecalho.is-compacto .marca span { transform: translateX(-0.65rem) scale(0.94); }
.cabecalho__sentinela { position: absolute; top: 4.5rem; width: 1px; height: 1px; }
.topo { padding-top: 0.25rem; }
.topo h1 { margin-top: 1rem; }
.rodape .marca img { border-radius: 50%; }
@media (min-width: 60rem) {
  .cabecalho { height: 5.5rem; }
  .cabecalho .marca img { width: 3.75rem; height: 3.75rem; }
  .cabecalho .marca span { font-size: 1.5rem; }
  .cabecalho.is-compacto { transform: translateY(-1rem); }
  .cabecalho.is-compacto .marca, .cabecalho.is-compacto .idioma { transform: translateY(0.5rem); }
  .cabecalho.is-compacto .marca img { transform: scale(0.7); }
  .cabecalho.is-compacto .marca span { transform: translateX(-1.1rem) scale(0.92); }
  .topo { padding-top: 0; min-height: min(calc(100svh - 5.5rem), 54rem); }
  .topo h1 { margin-top: clamp(1rem, 5vh, 3.5rem); }
}

/* ---------- Dor: cartões + celular do Maps ---------- */
.dor__dica { margin-top: 1rem; font-size: 0.9rem; color: var(--texto-suave); }
.dor > .dor__dica { margin-left: max(0px, calc((100% - 76rem) / 2)); }
.dor__palco { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
.dor__lista {
  border: 0; min-width: 0; margin: 0 calc(-1 * var(--margem)); padding: 0.5rem var(--margem) 1rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 0.75rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem); scrollbar-width: none;
}
.cartao-dor {
  position: relative; display: grid; align-content: start; gap: 0.4rem; scroll-snap-align: start;
  padding: 1.1rem 1.2rem 1.25rem; border-radius: 1rem; background: var(--cartao); cursor: pointer;
  box-shadow: 0 0 0 1px var(--linha);
  transition: transform 200ms var(--saida), box-shadow 200ms var(--saida);
}
.cartao-dor input { position: absolute; opacity: 0; pointer-events: none; }
.cartao-dor:has(input:checked) { box-shadow: 0 0 0 2px var(--ouro-logo), 0 16px 30px -20px rgb(60 40 10 / 0.5); transform: translateY(-2px); }
.cartao-dor:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 3px; }
.cartao-dor .dor__tema { grid-area: 1 / 1; }
.cartao-dor .dor__hoje, .cartao-dor .dor__site {
  grid-area: 2 / 1; max-width: none; font-family: var(--f-display); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.25;
}
.mapa { order: -1; justify-self: center; width: min(16.5rem, 74vw); }
.mapa__tela {
  position: relative; aspect-ratio: 9 / 18; overflow: hidden; border-radius: 2rem;
  border: 0.5rem solid #0B0A08; background: #ECE5D8; touch-action: pan-y; user-select: none;
  box-shadow: 0 34px 60px -30px rgb(60 40 10 / 0.55);
}
.mapa__legenda { margin-top: 0.6rem; text-align: center; font-size: 0.8rem; color: var(--texto-suave); }
.cena { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateX(8%); transition: opacity 320ms var(--saida), transform 320ms var(--saida), visibility 320ms allow-discrete; }
.dor:has(input[value="instagram"]:checked) .cena--instagram,
.dor:has(input[value="google"]:checked) .cena--google,
.dor:has(input[value="espanhol"]:checked) .cena--espanhol,
.dor:has(input[value="web"]:checked) .cena--web { opacity: 1; visibility: visible; transform: none; }
.mapa .so-site { opacity: 0; transform: translateY(0.8rem) scale(0.97); transition: opacity 320ms var(--saida), transform 420ms var(--saida); }
.mapa .so-hoje { transition: opacity 320ms var(--saida), transform 320ms var(--saida); }
.dor:has(input[value="site"]:checked) .mapa .so-site { opacity: 1; transform: none; }
.dor:has(input[value="site"]:checked) .mapa .so-hoje { opacity: 0; transform: translateY(-0.4rem); }
.mapa .ico { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }

/* Google Maps */
.mapa__ruas { position: absolute; inset: 0; width: 100%; height: 100%; }
.busca {
  position: absolute; top: 0.9rem; left: 0.6rem; right: 0.6rem; z-index: 2;
  display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.8rem; border-radius: 999px;
  background: #fff; font-size: 0.78rem; color: #3B3227; box-shadow: 0 4px 12px -6px rgb(60 40 10 / 0.5);
}
.pino { position: absolute; left: var(--x); top: var(--y); }
.pino--outro { width: 0.85rem; height: 0.85rem; border-radius: 50% 50% 50% 0; rotate: -45deg; background: #A69B8E; box-shadow: 0 0 0 2px #fff; }
.pino--ela { translate: -50% -100%; font-size: 2.6rem; line-height: 0; color: #B48430; filter: drop-shadow(0 6px 6px rgb(60 40 10 / 0.35)); }
.mapa .pino--ela.so-site { transform: translateY(-1.5rem); }
.dor:has(input[value="site"]:checked) .mapa .pino--ela.so-site { transform: none; transition-delay: 120ms; }
.ficha {
  position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; z-index: 2; display: grid; gap: 0.45rem;
  padding: 0.75rem 0.8rem; border-radius: 1rem; background: #fff; font-size: 0.74rem; color: #3B3227;
  box-shadow: 0 -6px 18px -10px rgb(60 40 10 / 0.4);
}
.ficha p { display: flex; justify-content: space-between; gap: 0.5rem; }
.ficha b { color: var(--tinta); }
.ficha--ela p:first-child { display: grid; gap: 0.1rem; }
.ficha--ela b { font-size: 0.95rem; }
.ficha__botoes span { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; flex: 1; padding: 0.4rem; border-radius: 999px; border: 1px solid var(--linha); font-weight: 600; }
.ficha__botoes .ficha__wa { background: var(--ouro-metal); border-color: transparent; color: var(--tinta); }

/* Instagram */
.cena--instagram { background: #fff; padding: 1rem 0.8rem; }
.ig__topo { display: flex; align-items: center; gap: 0.7rem; }
.ig__avatar { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: url("../img/mystic-beauty-celular.webp") 50% 2% / 220% auto; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #D8B460; }
.ig__topo p { display: grid; font-size: 0.8rem; color: #5E5446; }
.ig__topo b { color: var(--tinta); font-size: 0.9rem; }
.ig__link { position: absolute; top: 5rem; left: 0.8rem; font-size: 0.78rem; color: #8F8576; }
.ig__link--site { color: #1F4FAF; font-weight: 600; display: flex; align-items: center; gap: 0.25rem; }
.ig__grade { position: absolute; top: 6.8rem; left: 0.8rem; right: 0.8rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.2rem; }
.ig__grade span { aspect-ratio: 1; background: radial-gradient(circle at 30% 30%, rgb(255 255 255 / 0.35), transparent 60%), var(--c, #D9C3A5); }
.ig__grade span:nth-child(2) { --c: #B98E6A; } .ig__grade span:nth-child(3) { --c: #E8D9C4; }
.ig__grade span:nth-child(4) { --c: #8C6A52; } .ig__grade span:nth-child(5) { --c: #D8B460; } .ig__grade span:nth-child(6) { --c: #CDB9A8; }
.ig__previa { position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; height: 46%; overflow: hidden; border-radius: 1rem; box-shadow: 0 -8px 24px -10px rgb(60 40 10 / 0.5); }
.ig__previa img, .site-card img, .web-nova img, .peca--foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Espanhol (PT) e Tu web (ES) */
.cena--espanhol, .cena--web { background: #FFFDF8; }
.nota { position: absolute; inset: 1rem 0.8rem; display: grid; align-content: start; gap: 0.6rem; font-size: 0.8rem; color: #3B3227; }
.nota__titulo { font-weight: 700; color: var(--tinta); }
.nota__item { display: grid; padding: 0.7rem; border-radius: 0.7rem; background: #FFF6D9; }
.nota__item b { font-size: 0.95rem; color: var(--tinta); }
.nota__duvida { justify-self: end; max-width: 85%; padding: 0.5rem 0.7rem; border-radius: 0.8rem 0.8rem 0.2rem 0.8rem; background: #EFE6D6; }
.site-card { position: absolute; inset: 0.5rem; display: grid; grid-template-rows: 45% auto auto 1fr; gap: 0.4rem; padding-bottom: 0.7rem; border-radius: 1.2rem; overflow: hidden; background: #fff; font-size: 0.8rem; color: #3B3227; }
.site-card > p, .site-card__botao { margin-inline: 0.7rem; }
.site-card > p:not(.site-card__tag) { display: grid; }
.site-card b { font-size: 1rem; color: var(--tinta); }
.site-card__tag { justify-self: start; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--tinta); color: var(--ouro-logo); font-weight: 700; font-size: 0.7rem; }
.site-card__botao { align-self: end; display: flex; justify-content: center; align-items: center; gap: 0.3rem; padding: 0.55rem; border-radius: 999px; background: var(--ouro-metal); color: var(--tinta); font-weight: 700; }
.web-velha, .web-nova { position: absolute; inset: 0; }
.web-velha { padding-top: 1rem; background: #fff; }
.web-velha img { width: 100%; height: auto; }

@media (min-width: 60rem) {
  .dor__palco { grid-template-columns: minmax(0, 1fr) 19rem; gap: 4rem; align-items: center; max-width: 76rem; }
  .dor__lista { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .mapa { order: 0; width: 19rem; }
}

/* ---------- Semana: progresso, prévia que se monta, navegação ---------- */
.agenda__progresso { grid-column: 1 / -1; height: 0.35rem; margin-top: 1.25rem; border-radius: 999px; background: rgb(20 17 13 / 0.12); overflow: hidden; }
.agenda__progresso span { display: block; height: 100%; background: var(--ouro-metal); transform-origin: left center; transform: scaleX(var(--p, 0.2)); transition: transform 420ms var(--saida); }
.agenda__detalhe { display: grid; gap: 1.5rem; align-items: center; }
.agenda__textos { display: grid; gap: 1rem; }
.agenda__detalhe [role="tabpanel"] { display: block; }
.agenda__detalhe [role="tabpanel"][hidden] { display: none; }
.agenda__detalhe [role="tabpanel"] p { margin-top: 0.45rem; }
.agenda__nav { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.agenda__nav .ico { width: 1.1em; height: 1.1em; }
.montagem { justify-self: center; width: min(16.5rem, 74vw); }
.montagem__tela {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 1.8rem;
  border: 0.45rem solid #0B0A08; background: #FFFDF8; touch-action: pan-y; user-select: none;
  box-shadow: 0 30px 56px -30px rgb(60 40 10 / 0.6);
}
.montagem .ico { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.chat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; padding: 0.8rem; background: #EFE6D6; transition: opacity 320ms var(--saida); }
.chat__msg { align-self: flex-start; max-width: 86%; padding: 0.5rem 0.65rem; border-radius: 0.8rem 0.8rem 0.8rem 0.2rem; background: #fff; font-size: 0.76rem; line-height: 1.35; color: #3B3227; }
.chat__msg--dela { align-self: flex-end; border-radius: 0.8rem 0.8rem 0.2rem 0.8rem; background: #F3E6C4; }
.site { position: absolute; inset: 2.5rem 0.7rem 0.7rem; display: grid; align-content: start; gap: 0.55rem; }
.peca { display: block; opacity: 0; transform: translateY(-1.4rem) rotate(-2deg); transition: opacity 420ms var(--saida), transform 420ms var(--saida); }
.peca:nth-child(2) { transition-delay: 70ms; } .peca:nth-child(3) { transition-delay: 140ms; }
.peca:nth-child(4) { transition-delay: 210ms; } .peca:nth-child(5) { transition-delay: 280ms; }
.peca--topo { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-display); font-size: 1rem; }
.peca--topo i { width: 1rem; height: 0.55rem; border-block: 2px solid var(--tinta); }
.peca--foto { height: 8.5rem; overflow: hidden; border-radius: 0.7rem; }
.peca--linha { height: 0.55rem; border-radius: 999px; background: #E3D8C6; }
.peca--curta { width: 62%; }
.peca--servicos { display: grid; gap: 0.35rem; }
.peca--servicos i { display: flex; justify-content: space-between; padding: 0.45rem 0.55rem; border-radius: 0.5rem; background: #F4EDE1; }
.peca--servicos i::before, .peca--servicos i::after { content: ""; height: 0.4rem; border-radius: 999px; background: #D9CBB4; }
.peca--servicos i::before { width: 55%; } .peca--servicos i::after { width: 18%; }
.peca:nth-child(6) { transition-delay: 350ms; }
.peca--botao { justify-self: start; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.45rem 0.8rem; border-radius: 999px; background: var(--ouro-metal); font-size: 0.72rem; font-weight: 700; }
.montagem__url { position: absolute; top: 0.6rem; left: 0.6rem; right: 0.6rem; display: flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.6rem; border-radius: 999px; background: #EFE8DC; font-size: 0.68rem; color: #3B3227; opacity: 0; transform: translateY(-0.5rem); transition: opacity 320ms var(--saida), transform 320ms var(--saida); }
.carimbo { position: absolute; right: 0.9rem; top: 42%; padding: 0.25rem 0.6rem; border: 2px solid #8A6424; border-radius: 0.4rem; color: #7A5718; background: rgb(255 253 248 / 0.85); font-family: var(--f-display); font-size: 1.05rem; rotate: -12deg; opacity: 0; transform: scale(1.3); transition: opacity 200ms var(--saida), transform 320ms var(--saida); }
.ficha-google { position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.6rem; display: grid; grid-template-columns: auto 1fr; column-gap: 0.4rem; padding: 0.55rem 0.7rem; border-radius: 0.8rem; background: #fff; font-size: 0.7rem; color: #5E5446; box-shadow: 0 -6px 20px -10px rgb(60 40 10 / 0.45); opacity: 0; transform: translateY(110%); transition: opacity 320ms var(--saida), transform 420ms var(--saida); }
.ficha-google .ico { grid-row: span 2; align-self: center; width: 1.6rem; height: 1.6rem; color: #B48430; }
.ficha-google b { color: var(--tinta); font-size: 0.8rem; }
.selo-no-ar { position: absolute; top: 3.3rem; right: 1.1rem; display: flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.6rem; border-radius: 999px; background: var(--tinta); color: var(--sobre-tinta); font-size: 0.7rem; font-weight: 700; opacity: 0; transform: scale(0.9); transition: opacity 320ms var(--saida), transform 320ms var(--saida); }
.selo-no-ar .ico { color: var(--ouro-logo); }
.montagem:not([data-dia="1"]) .chat { opacity: 0; }
.montagem:not([data-dia="1"]) .peca { opacity: 1; transform: none; }
.montagem:is([data-dia="3"], [data-dia="4"], [data-dia="5"]) .carimbo { opacity: 1; transform: none; }
.montagem:is([data-dia="4"], [data-dia="5"]) .carimbo { opacity: 0; }
.montagem:is([data-dia="4"], [data-dia="5"]) .montagem__url,
.montagem:is([data-dia="4"], [data-dia="5"]) .ficha-google { opacity: 1; transform: none; }
.montagem[data-dia="5"] .selo-no-ar { opacity: 1; transform: none; }
.montagem[data-dia="1"] .chat__msg { animation: entra-msg 420ms var(--saida) both; }
.montagem[data-dia="1"] .chat__msg:nth-child(2) { animation-delay: 160ms; }
.montagem[data-dia="1"] .chat__msg:nth-child(3) { animation-delay: 320ms; }
@keyframes entra-msg { from { opacity: 0; transform: translateY(0.5rem) scale(0.97); } }
@media (min-width: 60rem) {
  .agenda__detalhe { grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; margin-top: 1.75rem; }
  .montagem { width: 17rem; }
}

/* ---------- Convite final: a conversa que monta a mensagem ---------- */
.conversa { width: min(27rem, 100%); margin: 2rem auto 0; border-radius: 1.2rem; overflow: hidden; background: #EFE6D6; text-align: left; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7); }
.conversa__topo { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; background: #241F18; color: var(--sobre-tinta); }
.conversa__topo img { width: 2.25rem; height: 2.25rem; border-radius: 50%; box-shadow: 0 0 0 1px rgb(216 180 96 / 0.5); }
.conversa__topo p { display: grid; font-size: 0.8rem; line-height: 1.2; color: var(--sobre-tinta-suave); }
.conversa__topo b { font-size: 0.95rem; color: var(--sobre-tinta); }
.conversa__corpo { display: grid; gap: 0.6rem; padding: 1rem; }
.msg { justify-self: start; max-width: 88%; padding: 0.55rem 0.8rem; border-radius: 0.9rem 0.9rem 0.9rem 0.25rem; background: #fff; color: var(--tinta); font-size: 0.95rem; line-height: 1.4; }
.msg--voce { justify-self: end; margin-top: 0.4rem; border-radius: 0.9rem 0.9rem 0.25rem 0.9rem; background: #F3E6C4; box-shadow: 0 1px 0 rgb(60 40 10 / 0.12); }
.msg--voce.is-mudou { animation: pulso-msg 260ms var(--saida); }
@keyframes pulso-msg { from { opacity: 0.55; transform: scale(0.98); } }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips button {
  min-height: var(--altura-sec); padding: 0 1rem; border-radius: 999px; border: 1px solid #CDBFA6;
  background: #FFFDF8; color: var(--tinta); font: 600 0.9rem var(--f-texto); cursor: pointer;
  transition: background-color 140ms var(--saida), border-color 140ms var(--saida), transform 140ms var(--saida);
}
.chips button[aria-pressed="true"] { background: var(--ouro-metal); border-color: #B48430; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5); }
@media (hover: hover) { .chips button:not([aria-pressed="true"]):hover { border-color: #B48430; } }
.no-js .chips { display: none; }
.final__dica { margin-top: 0.8rem; font-size: 0.85rem; color: var(--sobre-tinta-suave); }
.final .botao { margin-top: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .cena, .mapa .so-site, .mapa .so-hoje, .peca, .carimbo, .ficha-google, .selo-no-ar, .montagem__url, .chat,
  .cabecalho, .cabecalho::before, .cabecalho .marca, .cabecalho .marca img, .cabecalho .marca span, .cabecalho .idioma,
  .agenda__progresso span, .cartao-dor, .barra-whats { transition: none; }
  .montagem[data-dia="1"] .chat__msg, .msg--voce.is-mudou { animation: none; }
}
.montagem img, .mapa img { pointer-events: none; -webkit-user-drag: none; }

/* =====================================================================
   Correção de composição (15/10, após rolagem real):
   semana com agenda vertical + prévia AO LADO (desktop) e LOGO ABAIXO (celular);
   Maps do tamanho dos outros celulares; trilho da dor com indicação de deslizar.
   ===================================================================== */

/* ---------- Semana ---------- */
.agenda__detalhe, .agenda__textos { display: contents; }
.agenda {
  grid-template-columns: 3.2rem minmax(0, 1fr);
  grid-template-areas: "dias grade" "prog prog" "nav nav" "prev prev" "txt txt";
  column-gap: 0.6rem; align-items: start;
}
.agenda__dias { grid-area: dias; }
.agenda__grade { grid-area: grade; }
.agenda__dias, .agenda__grade { grid-template-rows: repeat(7, 3.3rem); }
.agenda__grade { background: repeating-linear-gradient(to bottom, rgb(22 11 16 / 0.22) 0 1px, transparent 1px 3.3rem); }
.bloco { margin: 0.1rem 0; min-height: 3rem; }
.agenda__progresso { grid-area: prog; margin-top: 1rem; }
.agenda__nav { grid-area: nav; margin-top: 1rem; }
.montagem { grid-area: prev; margin-top: 1rem; width: min(13rem, 60vw); }
.montagem__tela { aspect-ratio: 9 / 15; container-type: inline-size; }
.agenda__detalhe [role="tabpanel"] { grid-area: txt; margin-top: 1.25rem; }

@media (min-width: 60rem) {
  .agenda {
    grid-template-columns: 3.6rem minmax(0, 1fr) 17rem;
    grid-template-rows: none;
    grid-template-areas: "dias grade prev" "prog prog prev" "txt txt prev" "nav nav prev";
    column-gap: 1rem; margin-top: 1.5rem;
  }
  .agenda__dias, .agenda__grade { grid-column: auto; grid-template-columns: none; grid-template-rows: repeat(7, 3.5rem); }
  .agenda__dias li { border-left: 0; border-top: 1px solid rgb(22 11 16 / 0.22); padding: 0.4rem 0 0; }
  .agenda__grade { border-top: 0; background: repeating-linear-gradient(to bottom, rgb(22 11 16 / 0.22) 0 1px, transparent 1px 3.5rem); }
  .agenda__grade::before { display: none; }
  .bloco { grid-row: var(--de) / var(--ate); grid-column: 1; margin: 0.15rem 0; }
  .montagem { grid-column: 3; grid-row: 1 / span 4; align-self: start; position: sticky; top: 6rem; width: 17rem; margin: 0 0 0 2rem; }
  .montagem__tela { aspect-ratio: 9 / 16; }
  .agenda__detalhe [role="tabpanel"] { padding: 1.1rem 1.3rem; }
}

/* a prévia escala com o próprio celular: o texto nunca fica minúsculo */
.chat { gap: 2.4cqi; padding: 4cqi; }
.chat__msg { font-size: 5cqi; padding: 2.6cqi 3.4cqi; }
.site { inset: 13cqi 4cqi 4cqi; gap: 2.8cqi; }
.peca--topo { font-size: 6.2cqi; }
.peca--foto { height: 42cqi; }
.peca--linha { height: 2.8cqi; }
.peca--servicos i { padding: 2.4cqi 3cqi; }
.peca--botao { font-size: 4.4cqi; padding: 2.4cqi 4.2cqi; }
.montagem__url { font-size: 4.2cqi; padding: 1.6cqi 3.4cqi; top: 3cqi; left: 3cqi; right: 3cqi; }
.carimbo { font-size: 6.6cqi; }
.ficha-google { font-size: 4.2cqi; padding: 3cqi 3.6cqi; }
.ficha-google b { font-size: 4.8cqi; }
.selo-no-ar { font-size: 4.2cqi; top: 17cqi; }

/* ---------- Dor ---------- */
.mapa { width: min(15rem, 64vw); }
.mapa__tela { container-type: inline-size; }
.busca { font-size: 4.8cqi; }
.ficha { font-size: 4.6cqi; }
.ficha--ela b { font-size: 5.6cqi; }
@media (min-width: 60rem) {
  .dor__palco { grid-template-columns: minmax(0, 1fr) 17rem; gap: 3.5rem; align-items: center; }
  .mapa { width: 17rem; }
  .dor__lista { gap: 1rem; }
}
/* trilho no celular: borda que esmaece + pontos que mostram onde se está */
.dor__pontos { display: none; }
@media (max-width: 59.99rem) {
  .dor__lista { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .dor__pontos { display: flex; align-items: center; justify-content: center; gap: 0.45rem; margin-top: -0.25rem; font-size: 0.85rem; color: var(--texto-suave); }
  .dor__pontos span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--linha); transition: background-color 200ms var(--saida), transform 200ms var(--saida); }
  .dor:has(input[value="instagram"]:checked) .dor__pontos span:nth-child(1),
  .dor:has(input[value="google"]:checked) .dor__pontos span:nth-child(2),
  .dor:has(input:is([value="espanhol"], [value="web"]):checked) .dor__pontos span:nth-child(3) { background: var(--ouro-logo-2); transform: scale(1.25); }
  .dor__pontos .ico { width: 1.1em; height: 1.1em; color: var(--ouro-logo-2); }
}
/* celular: agenda + prévia cabem juntas na tela (844 px); botões de dia logo abaixo da prévia */
@media (max-width: 59.99rem) {
  .agenda { grid-template-areas: "dias grade" "prog prog" "prev prev" "nav nav" "txt txt"; }
  .agenda__dias, .agenda__grade { grid-template-rows: repeat(7, 3.15rem); }
  .agenda__grade { background: repeating-linear-gradient(to bottom, rgb(22 11 16 / 0.22) 0 1px, transparent 1px 3.15rem); }
  .bloco { margin: 0.05rem 0; min-height: 3rem; }
  .agenda__progresso { margin-top: 0.75rem; }
  .montagem { width: min(12rem, 56vw); margin-top: 0.85rem; }
  .agenda__nav { justify-content: center; margin-top: 0.85rem; }
}

/* =====================================================================
   Semana v3 (15/10): linha do tempo vertical + prévia ao lado preenchida.
   Acordeão nativo (<details name="semana">): funciona sem JS, um passo aberto por vez.
   ===================================================================== */
.semana { padding: 3rem var(--margem) 3.25rem; }
.semana__corpo { display: grid; gap: 1.25rem; max-width: 76rem; margin-inline: auto; }
.semana__cabeca h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem); }
.semana__cabeca p { margin-top: 0.4rem; font-size: 0.92rem; }

.linha-tempo {
  --marco: 2.4rem;
  position: relative; list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: grid; gap: 0.45rem; interpolate-size: allow-keywords;
}
.linha-tempo::before, .linha-tempo::after {
  content: ""; position: absolute; left: calc(var(--marco) / 2 - 1px); width: 2px;
  top: var(--l-topo, 1.5rem); height: var(--l-alt, calc(100% - 3rem)); border-radius: 2px;
}
.linha-tempo::before { background: rgb(180 132 48 / 0.25); }
.linha-tempo::after { background: var(--ouro-logo-2); transform-origin: top center; transform: scaleY(var(--p, 0)); transition: transform 420ms var(--saida); }
.passo { position: relative; }
.passo summary {
  list-style: none; display: grid; grid-template-columns: var(--marco) minmax(0, 1fr); column-gap: 0.85rem;
  align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.passo summary::-webkit-details-marker { display: none; }
.passo summary:focus-visible { outline: none; }
.passo summary:focus-visible .passo__cabeca { outline: 2px solid var(--tinta); outline-offset: 2px; }
.passo__marco {
  position: relative; z-index: 1; width: var(--marco); height: var(--marco); border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-display); font-size: 1.05rem; line-height: 1;
  background: var(--fundo-semana); color: var(--acento-texto); box-shadow: inset 0 0 0 1.5px rgb(180 132 48 / 0.55);
  transition: background-color 320ms var(--saida), color 320ms var(--saida), transform 320ms var(--saida);
}
.passo:nth-child(4) .passo__marco { font-size: 0.78rem; }
.passo.is-feito .passo__marco { background: var(--ouro-metal); color: var(--tinta); box-shadow: none; }
.passo details[open] .passo__marco { background: var(--tinta); color: var(--ouro-logo); box-shadow: 0 0 0 4px rgb(216 180 96 / 0.35); transform: scale(1.06); }
.passo__cabeca {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.6rem; align-items: baseline;
  min-height: 3rem; padding: 0.55rem 0.9rem; border-radius: 0.9rem;
  background: var(--cartao); box-shadow: 0 0 0 1px var(--linha);
  transition: background-color 320ms var(--saida), border-radius 320ms var(--saida), box-shadow 200ms var(--saida);
}
@media (hover: hover) { .passo details:not([open]) summary:hover .passo__cabeca { box-shadow: 0 0 0 1px var(--ouro-logo-2); } }
.passo__quando { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 700; color: var(--acento-texto); white-space: nowrap; }
.passo__quando .ico { width: 1.15rem; height: 1.15rem; }
.passo__titulo { font-weight: 600; font-size: 1rem; color: var(--tinta); }
.passo__resumo { grid-column: 1 / -1; font-size: 0.86rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.passo details[open] .passo__cabeca { background: var(--tinta); border-radius: 0.9rem 0.9rem 0 0; box-shadow: none; }
.passo details[open] .passo__quando { color: var(--ouro-logo); }
.passo details[open] .passo__titulo { color: var(--sobre-tinta); }
.passo details[open] .passo__resumo { display: none; }
.passo__texto {
  margin-left: calc(var(--marco) + 0.85rem); padding: 0.1rem 0.9rem 0.85rem;
  border-radius: 0 0 0.9rem 0.9rem; background: var(--tinta); color: #E9E1D3; font-size: 0.93rem; line-height: 1.5;
}
.passo details::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size 320ms var(--saida), opacity 320ms var(--saida), content-visibility 320ms allow-discrete; }
.passo details[open]::details-content { block-size: auto; opacity: 1; }

.semana__nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.botao-sec--icone { width: var(--altura-sec); padding: 0; }
.semana__nav .ico { width: 1.1em; height: 1.1em; }
.auto__play, .auto__pausa { display: inline-flex; align-items: center; gap: 0.45rem; }
.auto__pausa, [data-auto][aria-pressed="true"] .auto__play { display: none; }
[data-auto][aria-pressed="true"] .auto__pausa { display: inline-flex; }
[data-auto][aria-pressed="true"] { border-color: var(--ouro-logo); background: #FFF6DE; }

/* a prévia: tela cheia, barra no topo, conteúdo distribuído */
.semana .montagem { grid-area: auto; grid-column: auto; grid-row: auto; position: static; margin: 0; justify-self: center; align-self: center; width: min(11.5rem, 54vw); }
.semana .montagem__tela { aspect-ratio: 9 / 15; }
.tela-whats, .tela-site { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity 320ms var(--saida); }
.tela-whats { background: #EFE6D6; }
.tw__topo { display: flex; align-items: center; gap: 2.4cqi; padding: 3.4cqi 4cqi; background: #241F18; color: var(--sobre-tinta); font-size: 4.4cqi; line-height: 1.2; }
.tw__topo img { width: 9cqi; height: 9cqi; border-radius: 50%; }
.tw__topo span { display: grid; }
.tw__topo i { font-style: normal; font-size: 3.6cqi; color: var(--sobre-tinta-suave); }
.tw__msgs { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2.6cqi; padding: 4cqi; }
.tw__campo { margin: 0 3cqi 3cqi; padding: 2.6cqi 4cqi; border-radius: 999px; background: #fff; color: #8F8576; font-size: 4.2cqi; }
.montagem[data-dia="1"] .chat__msg:nth-child(4) { animation-delay: 480ms; }
.tela-site { background: #FFFDF8; opacity: 0; }
.ts__barra { display: flex; align-items: center; gap: 1.6cqi; margin: 3cqi; padding: 1.8cqi 3.4cqi; border-radius: 999px; background: #EFE8DC; font-size: 4cqi; color: #3B3227; white-space: nowrap; overflow: hidden; }
.ts__barra .ico { flex: none; }
.ts__dominio { display: none; font-weight: 600; }
.semana .site { position: relative; inset: auto; flex: 1; display: flex; flex-direction: column; gap: 2.6cqi; padding: 0 4cqi 4cqi; }
.semana .peca--foto { flex: 1 1 auto; min-height: 28cqi; height: auto; }
.montagem:not([data-dia="1"]) .tela-whats { opacity: 0; }
.montagem:not([data-dia="1"]) .tela-site { opacity: 1; }
.montagem:is([data-dia="4"], [data-dia="5"]) .ts__previa { display: none; }
.montagem:is([data-dia="4"], [data-dia="5"]) .ts__dominio { display: inline; }

@media (max-width: 59.99rem) {
  .linha-tempo { --marco: 2.2rem; gap: 0.35rem; }
  .passo__resumo { display: none; }
  .passo__cabeca { padding-block: 0.5rem; }
  .semana__nav { justify-content: center; }
  .semana__nav .botao-sec { padding-inline: 0.85rem; font-size: 0.88rem; }
  .semana__nav .botao-sec--icone { padding: 0; }
}
@media (min-width: 60rem) {
  .semana { padding-block: 2.5rem 2.75rem; }
  .semana__corpo { grid-template-columns: minmax(0, 1fr) 17rem; column-gap: 4.5rem; align-items: center; }
  .semana__cabeca h2 em { display: inline; }
  .semana .montagem { width: 17rem; }
  .semana .montagem__tela { aspect-ratio: 9 / 16; }
}
@media (prefers-reduced-motion: reduce) {
  .linha-tempo::after, .passo__marco, .passo__cabeca, .tela-whats, .tela-site { transition: none; }
  .passo details::details-content { transition: none; }
}
/* ajustes da semana v3 após rolagem real */
.semana .peca--foto { flex: 0 0 40%; min-height: 0; }
.semana .site { justify-content: space-between; }
@media (max-width: 59.99rem) {
  .semana__esq { display: contents; }
  .semana__cabeca { order: 1; } .linha-tempo { order: 2; } .semana .montagem { order: 3; margin-top: 0.25rem; } .semana__nav { order: 4; margin-top: 0.25rem; }
  .semana__corpo { gap: 0.9rem; }
  .linha-tempo { margin-top: 0.4rem; }
  .semana__nav { gap: 0.4rem; flex-wrap: nowrap; }
  .semana__nav .botao-sec { padding-inline: 0.7rem; font-size: 0.85rem; white-space: nowrap; }
}
@media (min-width: 60rem) {
  .semana { padding-block: 2rem 2.25rem; }
  .linha-tempo { gap: 0.4rem; margin-top: 0.9rem; }
}
.semana .site { justify-content: flex-start; gap: 3cqi; }
.semana .peca--foto { flex: 1 1 0; min-height: 30cqi; }
.semana .peca--topo { margin-top: 1cqi; }
.semana .peca--botao { align-self: flex-start; }
.semana .selo-no-ar { top: 31cqi; right: 7cqi; }
.tw__campo { color: #6E6458; }