/* CleanDent: a embalagem de grau cirúrgico (gerado por scripts/gerar-cleandent.mjs; não editar à mão) */
:root {
  --fundo: #f3f8f9;
  --papel: #ffffff;
  --tinta: #10303a;
  --suave: #4b6670;
  --marca: #116089;
  --marca-2: #02b8bf;
  --verde: #7dd12a;
  --lilas: #c6a4dc;
  --linha: #d3e4e8;
  --cartao: #ffffff;
  --filme: rgb(2 184 191 / .13);
  --selo: rgb(2 150 160 / .30);
  --fonte-titulo: "Anybody", "Open Sans", system-ui, sans-serif;
  --fonte-texto: "Open Sans", system-ui, sans-serif;
  --fonte-print: "Azeret Mono", ui-monospace, monospace;
  --raio: 4px;
}
body { background: var(--fundo); }
h1, h2, h3 { font-weight: 800; font-stretch: 100%; letter-spacing: -.01em; }
h2 { font-size: clamp(30px, 3.6vw, 50px); text-transform: uppercase; color: var(--marca); font-stretch: 112%; letter-spacing: 0; }
.botao { border-radius: 6px; }
.botao--claro { --b-fundo: #fff; --b-tinta: var(--marca); border-color: var(--linha); }
.botao--linha { --b-fundo: transparent; --b-tinta: var(--marca); border-color: color-mix(in srgb, var(--marca) 45%, transparent); margin-top: 14px; }

/* ---------- Embalagem: papel, selagem e janela de filme ---------- */
.emb { position: relative; background: var(--papel); padding: 10px 10px 4px; box-shadow: 0 1px 0 rgb(16 48 58 / .06), 0 22px 44px -32px rgb(16 48 58 / .45); }
.emb__selo { padding: 9px; background:
  repeating-linear-gradient(45deg, var(--selo) 0 1px, transparent 1px 4px),
  repeating-linear-gradient(-45deg, var(--selo) 0 1px, transparent 1px 4px), #fff; }
.emb__janela { position: relative; overflow: hidden; background: #dfeef0; }
.emb__janela img { width: 100%; height: 100%; object-fit: cover; }
.emb__janela::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, transparent 0 34%, rgb(255 255 255 / .26) 40%, transparent 47%, transparent 64%, rgb(255 255 255 / .12) 68%, transparent 72%), var(--filme); }
.impresso { display: block; width: 100%; height: 16px; overflow: hidden; }
.impresso text { font: 500 12px var(--fonte-print); letter-spacing: .16em; fill: color-mix(in srgb, var(--marca-2) 70%, var(--tinta)); }

/* ---------- Cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / .96); border-bottom: 1px solid var(--linha); transition: transform .35s; }
.topo.escondido { transform: translateY(-100%); }
.topo__linha { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.topo__marca { display: flex; align-items: center; min-height: 48px; flex: none; }
.topo__marca img { height: 40px; width: auto; flex: none; }
.topo__nav { display: flex; gap: 22px; margin-left: auto; font-weight: 600; font-size: 15px; }
.topo__nav a { padding: 8px 0; color: var(--suave); }
.topo__nav a:hover { color: var(--marca); }
.topo__cta { padding: .8em 1.15em; }

/* ---------- Primeira tela ---------- */
.inicio { padding: 22px 0 0; }
.inicio__in { position: relative; padding-bottom: 64px; }
.emb--hero .emb__janela { aspect-ratio: 1898 / 798; }
.etiqueta { position: absolute; right: clamp(20px, 4vw, 56px); bottom: 0; width: min(560px, 46%); background: var(--papel); padding: 32px 32px 28px; box-shadow: 0 30px 60px -34px rgb(16 48 58 / .55), 0 1px 0 rgb(16 48 58 / .08); }
.etiqueta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 10px; background:
  repeating-linear-gradient(45deg, var(--selo) 0 1px, transparent 1px 4px),
  repeating-linear-gradient(-45deg, var(--selo) 0 1px, transparent 1px 4px); }
.etiqueta h1 { font-size: clamp(30px, 2.9vw, 44px); line-height: 1.04; color: var(--tinta); }
.etiqueta p { margin: 14px 0 18px; color: var(--suave); }
.etiqueta .botao { margin-top: 18px; }
.fita { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px 8px 8px; border: 1px solid var(--linha); background: #fbfdfd; width: fit-content; max-width: 100%; }
.fita__tinta { display: flex; gap: 4px; flex: none; padding: 5px 6px; background: #eef5f6; }
.fita__tinta i { width: 9px; height: 22px; transform: skewX(-18deg); background: var(--lilas); animation: vira 1.4s ease .9s both; }
.fita__tinta i:nth-child(2) { animation-delay: 1.05s; } .fita__tinta i:nth-child(3) { animation-delay: 1.2s; } .fita__tinta i:nth-child(4) { animation-delay: 1.35s; }
@keyframes vira { from { background: var(--lilas); } to { background: var(--verde); } }
.fita__txt { font-family: var(--fonte-print); font-size: 14px; color: var(--tinta); }
.fita__txt b { font-family: var(--fonte-titulo); font-size: 18px; }
.fita:hover .fita__txt { color: var(--marca); }

/* ---------- Quem somos ---------- */
.quem { padding: clamp(80px, 9vw, 130px) 0 clamp(60px, 7vw, 100px); }
.quem__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.quem__texto p { margin-top: 18px; max-width: 58ch; }
.quem__texto h2 { margin-bottom: 8px; }
.quem__fatos { display: grid; grid-template-columns: repeat(3, auto); gap: 0; margin: 30px 0 0; border-top: 1px solid var(--linha); }
.quem__fatos div { padding: 14px 18px 0 0; }
.quem__fatos dt { font-family: var(--fonte-print); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--marca-2); filter: brightness(.8); }
.quem__fatos dd { margin: 4px 0 0; font-weight: 600; }
.quem__predio { position: relative; }
.emb--predio { max-width: 420px; margin-inline: auto; }
.emb--predio .emb__janela { aspect-ratio: 711 / 1013; }
.quem__maca { position: absolute; width: 180px; left: -40px; bottom: -36px; z-index: 2; filter: drop-shadow(0 18px 24px rgb(16 48 58 / .25)); }

/* ---------- Tratamentos: embalagens de pé na caixa ---------- */
.tratamentos { padding: clamp(60px, 7vw, 100px) 0; background: linear-gradient(#e6f2f4, var(--fundo) 60%); }
.cabeca { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; margin-bottom: 34px; }
.caixa { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: end; padding: 0 22px; margin-top: 46px; }
.caixa::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(#0c4d6f, #0a4363); border-radius: 6px 6px 0 0; z-index: 0; }
.caixa::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: -4px; height: 84px; background: linear-gradient(#1b77a6, var(--marca) 45%, #0d5378); border-radius: 4px 4px 10px 10px; box-shadow: 0 24px 40px -26px rgb(10 50 70 / .7), inset 0 1px 0 rgb(255 255 255 / .25); z-index: 2; }
.caixa__div { display: none; }
.env { position: relative; z-index: 1; background: var(--papel); padding: calc(4px + var(--sobra)) 14px 96px; box-shadow: 0 -1px 0 rgb(16 48 58 / .05), 0 10px 26px -18px rgb(0 0 0 / .45); }
.env__abrir { display: block; height: 16px; margin: 0 -14px 10px; background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16'%3E%3Cpath d='M1 15 9 4l8 11' fill='none' stroke='%2302a4ab' stroke-opacity='.55' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x 0 0 / 18px 16px; }
.env__janela { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 8px solid transparent; background:
  linear-gradient(var(--filme), var(--filme)) padding-box,
  linear-gradient(#fff, #fff) padding-box,
  repeating-linear-gradient(45deg, var(--selo) 0 1px, transparent 1px 4px) border-box,
  repeating-linear-gradient(-45deg, var(--selo) 0 1px, #fff 1px 4px) border-box; }
.env__janela::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, transparent 0 36%, rgb(255 255 255 / .35) 42%, transparent 50%); pointer-events: none; }
.env__janela img { width: 74%; height: auto; }
.env__papel { padding-top: 14px; }
.env h3 { font-size: 19px; line-height: 1.12; color: var(--tinta); }
.env p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--suave); }

/* ---------- Equipe ---------- */
.equipe { padding: clamp(70px, 8vw, 120px) 0; }
.lema { font-family: var(--fonte-titulo); font-weight: 600; font-stretch: 112%; font-size: 18px; color: var(--suave); }
.emb--largo .emb__janela { aspect-ratio: 1898 / 798; }
.emb--largo img { object-position: 50% 30%; }
.pessoas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 40px); margin-top: clamp(40px, 5vw, 64px); }
.pessoa { margin: 0; }
.emb--retrato .emb__janela { aspect-ratio: 4 / 5; }
.emb--retrato img { object-position: 50% 18%; }
.pessoa figcaption { padding: 14px 4px 0; display: grid; gap: 3px; }
.pessoa b { font-family: var(--fonte-titulo); font-size: 19px; line-height: 1.2; }
.pessoa span { color: var(--marca); font-weight: 600; font-size: 15px; }
.pessoa small { color: var(--suave); font-size: 14px; }
.art43 { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 14px; color: var(--suave); }

/* ---------- Estrutura: rolo contínuo ---------- */
.estrutura { padding: clamp(60px, 7vw, 100px) 0; background: #e8f3f5; }
.rolo { background: var(--papel); padding: 6px 10px; box-shadow: 0 26px 50px -36px rgb(16 48 58 / .5); }
.rolo__trechos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 14px; background:
  repeating-linear-gradient(45deg, var(--selo) 0 1px, transparent 1px 4px),
  repeating-linear-gradient(-45deg, var(--selo) 0 1px, transparent 1px 4px), #fff; }
.trecho { margin: 0; background: #fff; }
.trecho__janela { position: relative; overflow: hidden; aspect-ratio: 3 / 2; }
.trecho__janela a { display: block; height: 100%; }
.trecho__janela img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.trecho__janela:hover img { transform: scale(1.03); }
.trecho__janela::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, transparent 0 34%, rgb(255 255 255 / .22) 40%, transparent 47%), var(--filme); }
.trecho figcaption { padding: 10px 12px 12px; font-family: var(--fonte-print); font-weight: 500; font-size: 13px; letter-spacing: .04em; }
.impresso--rolo { margin: 4px 0; }

/* ---------- Agendar ---------- */
.agendar { padding: clamp(70px, 8vw, 120px) 0; }
.agendar__in { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.agendar__form > p { margin: 12px 0 22px; color: var(--suave); }
.form { position: relative; background: var(--papel); padding: 30px 28px 26px; box-shadow: 0 22px 44px -32px rgb(16 48 58 / .45); }
.form::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 10px; background:
  repeating-linear-gradient(45deg, var(--selo) 0 1px, transparent 1px 4px),
  repeating-linear-gradient(-45deg, var(--selo) 0 1px, transparent 1px 4px); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo--largo { grid-column: 1 / -1; }
.campo span { font-size: 14px; font-weight: 600; }
.campo i { color: var(--marca); font-style: normal; }
.campo input, .campo textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #c3d8dd; border-radius: 4px; background: #fbfdfd; }
.campo textarea { resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--marca-2); outline-offset: 1px; }
.form__enviar { margin-top: 20px; }
.form__ok p { margin-bottom: 12px; }
.agendar__info { display: grid; gap: 26px; padding-top: 8px; }
.bloco { padding-top: 16px; border-top: 1px solid var(--linha); }
.bloco__rot { font-family: var(--fonte-print); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); margin-bottom: 8px; }
.bloco__forte { font-family: var(--fonte-titulo); font-weight: 700; font-size: 20px; }
.bloco--lei { font-size: 14px; color: var(--suave); }
.bloco a[data-email], .bloco a[data-wa] { display: inline-flex; min-height: 40px; align-items: center; }

/* ---------- Rodapé ---------- */
.rodape { background: #e3eff2; padding: 54px 0 calc(28px + env(safe-area-inset-bottom)); font-size: 14px; color: var(--suave); }
.rodape__in { display: grid; grid-template-columns: 1.1fr 1.3fr .8fr; gap: 32px; }
.rodape__marca img { width: 220px; height: auto; margin-bottom: 14px; }
.rodape p + p { margin-top: 6px; }
.rodape a { display: inline-flex; min-height: 36px; align-items: center; color: var(--tinta); }
.rodape__miudo { margin-top: 30px; padding-top: 14px; border-top: 1px solid #cddfe3; font-size: 13px; }

/* ---------- Telas médias ---------- */
@media (max-width: 1100px) {
  .topo__nav { display: none; }
  .topo__cta { margin-left: auto; }
  .caixa { grid-template-columns: repeat(2, 1fr); padding: 0 14px; }
  .caixa__div { display: block; grid-column: 1 / -1; height: 14px; margin: 0 -14px; background: var(--marca); border-radius: 3px; position: relative; z-index: 2; }
  .caixa::before { height: 100%; border-radius: 6px; }
  .env { padding-bottom: 22px; }
  .caixa::after { height: 26px; }
  .rodape__in { grid-template-columns: 1fr 1fr; }
}

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  .topo__linha { min-height: 62px; gap: 12px; }
  .topo__marca img { height: 30px; }
  .topo__cta { padding: .7em .9em; font-size: 15px; }
  .topo__cta span { display: none; }
  .topo__cta svg { width: 22px; height: 22px; }
  .inicio { padding-top: 12px; }
  .inicio__in { padding-bottom: 0; }
  .emb--hero .emb__janela { aspect-ratio: 4 / 3; }
  .emb--hero img { object-position: 22% 50%; }
  .etiqueta { position: relative; right: auto; bottom: auto; width: auto; margin: -38px 10px 0; padding: 30px 20px 22px; }
  .etiqueta h1 { font-size: clamp(28px, 8.4vw, 36px); }
  .fita { gap: 10px; }
  .fita__txt { font-size: 14px; }
  .quem__in { grid-template-columns: 1fr; }
  .quem__fatos { grid-template-columns: 1fr; }
  .quem__fatos div { padding: 12px 0 0; }
  .quem__maca { width: 120px; left: -6px; bottom: -24px; }
  .emb--predio { max-width: 300px; }
  .cabeca { align-items: start; flex-direction: column; }
  .caixa { gap: 10px; padding: 0 10px; }
  .caixa__div { margin: 0 -10px; }
  .env { padding: calc(2px + var(--sobra) / 2) 10px 20px; }
  .env__abrir { margin: 0 -10px 8px; }
  .env__janela { border-width: 6px; }
  .env h3 { font-size: 17px; }
  .env p { font-size: 14px; }
  .emb--largo .emb__janela { aspect-ratio: 4 / 3; }
  .pessoas { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .pessoa b { font-size: 16px; }
  .pessoa span, .pessoa small { font-size: 13px; }
  .emb { padding: 6px 6px 2px; }
  .emb__selo { padding: 6px; }
  .rolo { padding: 4px 6px; }
  .rolo__trechos { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
  .agendar__in { grid-template-columns: 1fr; }
  .campos { grid-template-columns: 1fr; }
  .form { padding: 26px 16px 20px; }
  .rodape__in { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .fita__tinta i { animation: none; background: var(--verde); } }