/* ==========================================================================
   DERMATECH MEDICAL — styles.css
   Sistema visual do site institucional. Um único arquivo, sem pré-processador.

   Sumário
   1. Tokens (cores, fontes, medidas) e tema escuro
   2. Reset
   3. Fundo marmorizado e grão
   4. Tipografia
   5. Layout (container, seções, grades)
   6. Componentes
      6.1 Rótulo (eyebrow)      6.6 Placeholder de material pendente
      6.2 Botões e links        6.7 Galeria e lightbox
      6.3 Moldura               6.8 Régua de passos
      6.4 Filete dourado        6.9 Ficha técnica (details) e FAQ
      6.5 Citação               6.10 Formulário
   7. Cabeçalho
   8. Rodapé
   9. Páginas
      9.1 Home                  9.4 Sobre
      9.2 Equipamentos          9.5 Como funciona
      9.3 Tecnologia            9.6 Contato, Obrigado, 404
   10. Responsivo
   11. Acessibilidade e movimento reduzido
   12. Guia de estilo (revisao/)
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   Valores de partida definidos no briefing. Ajustes feitos por contraste:
   --dourado-texto é o dourado escurecido para texto pequeno (passa AA sobre bege);
   --tinta-suave foi escurecida de #877B6B para #6F6355 pelo mesmo motivo.
   ========================================================================== */
:root {
  color-scheme: light;   /* o site tem um tema so: o bege. */

  /* superfícies
     11/09/2026, orientacoes por escrito dela: "substituir o atual cinza/esverdeado
     por off-white/marfim quente, claro e sofisticado. Referência aproximada:
     #F5F1E9". Os tres degraus abaixo sao as "pequenas variacoes entre off-white,
     bege muito claro e branco" que ela pediu para dar profundidade. */
  --areia-fundo:    #F5F1E9;   /* off-white/marfim: o fundo da página */
  /* titulo do topo: um so valor para a Home e a Sobre, porque ela pediu
     "DIMINUIR O TAMANHO DO TITULO DEIXANDO DO MESMO TAMANHO DA PAGINA 1" */
  --t-hero: clamp(1.7rem, 1.05rem + 2.3vw, 3.2rem);
  --areia-clara:    #FCFAF6;   /* quase branco: superfície de bloco */
  --areia-media:    #F2EDE2;   /* bege muito claro */
  --areia-escura:   #EBE4D6;   /* faixa levemente mais funda */

  /* texto
     Ela pediu "off-white/marfim + preto/chumbo + dourado" como cores principais e
     "manter bom contraste e evitar cinza muito claro". O marrom-carvao virou um
     quase-preto com um resto de calor, para nao brigar com o marfim, e os dois
     tons de apoio escureceram. */
  --tinta:          #1C1916;   /* quase preto, morno */
  --tinta-media:    #4A433A;
  --tinta-suave:    #5E5648;

  /* linhas */
  --linha:          #DED5C4;
  --linha-suave:    #EBE3D4;
  /* So para borda de campo de formulario. A --linha da 1,40:1 contra o
     preenchimento e 1,29:1 contra a pagina: a caixa do campo praticamente
     desaparece, e a WCAG 1.4.11 pede 3:1 para a borda de um controle. Este
     tom mantem o matiz da --linha (H 39) com a saturacao baixa, para nao
     virar dourado: 3,28:1 contra o campo e 3,04:1 contra a pagina. */
  --linha-campo:    #918A7D;

  /* dourado — só como detalhe */
  /* Dourados de TRAÇO: filete, moldura, borda, ícone e numeral grande (24px ou mais).
     Nunca em texto pequeno — nesse tamanho nenhum dos dois passa em AA sobre o bege. */
  --dourado:        #9C7C33;
  --dourado-claro:  #B79345;
  --dourado-lavado: #F3EAD4;   /* fundo de selo, não é cor de texto */
  /* Dourado de TEXTO: único que pode ir em texto pequeno.
     5,3:1 sobre a faixa mais escura (#E3DBCB) e 5,9:1 sobre o fundo da página. */
  --dourado-texto:  #6E5520;

  /* superfície clara que fica atrás de imagens de catálogo com fundo branco,
     igual nos dois temas para o mix-blend-mode: multiply funcionar */
  --superficie-imagem: #FBF8F3;   /* "manter os fundos mais limpos nas áreas onde os equipamentos aparecem" */

  /* tipografia */
  /* 10/09/2026, pedido da Luciana: Cinzel nos títulos, nos nomes de produto, nas frases de
     impacto e nos numerais. Só tem caixa alta (as minúsculas saem em versalete) e não tem
     itálico — o que isso muda está na seção 18. A Cormorant fica como reserva. */
  --fonte-display: 'Cinzel', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fonte-corpo:   'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;   /* a sans do estande e dos posts */
  --fonte-rotulo:  'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* escala tipográfica (fluida) */
  --t-display: clamp(2.6rem, 1.7rem + 3vw, 4.5rem);
  --t-h1:      clamp(2.5rem, 1.8rem + 2.8vw, 4.25rem);
  --t-h2:      clamp(2rem, 1.5rem + 1.8vw, 3.1rem);
  --t-h3:      clamp(1.5rem, 1.3rem + .7vw, 1.95rem);
  --t-h4:      1.3rem;
  --t-lead:    clamp(1.05rem, 1rem + .3vw, 1.2rem);
  --t-corpo:   1rem;
  --t-pequeno: .9rem;
  --t-rotulo:  .72rem;

  /* medidas */
  --medida: 60ch;                          /* ~66 caracteres por linha em serifa */
  --margem: clamp(1.25rem, 4vw, 3rem);
  --largura-max: 1240px;
  --secao: clamp(4rem, 8vw, 7.5rem);
  --raio: 2px;
  --transicao: 180ms ease;
  --cabecalho-altura: 5rem;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecalho-altura) + 1rem); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  line-height: 1.6;
  color: var(--tinta);
  background-color: var(--areia-fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }
::selection { background: var(--dourado-lavado); color: var(--tinta); }

/* ==========================================================================
   3. FUNDO MARMORIZADO E GRÃO
   O fundo não é cor chapada: três gradientes radiais quase da mesma cor do bege,
   mais duas "veias" diagonais suaves, num pseudo-elemento fixo. Usar um elemento
   fixo em vez de background-attachment: fixed evita o bug do iOS, que ignora
   o fixed e faz o mármore rolar junto com a página.
   ========================================================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--areia-fundo);
  /* A textura de marmore com veio dourado que ela mandou em 18/09 ("essa e uma
     ideia do fundo para o site todo"). O arquivo dela vem com duas fitas
     douradas nos cantos: elas ficaram de fora porque um fundo que cobre a tela
     inteira repetiria a fita em lugar imprevisivel, e dourado em bloco grande e
     justamente o que ela nao quer. O veio ficou a 45% sobre o bege, forte o
     bastante para ler de perto e leve o bastante para o texto passar por cima. */
  background-image:
    radial-gradient(ellipse 70% 55% at 12% 8%,  rgba(255, 254, 250, .55), transparent 64%),
    radial-gradient(ellipse 60% 48% at 88% 28%, rgba(226, 209, 180, .20), transparent 63%),
    radial-gradient(ellipse 85% 60% at 45% 100%, rgba(255, 253, 247, .45), transparent 68%),
    linear-gradient(112deg, transparent 40%, rgba(255, 255, 255, .20) 45%, transparent 49%, transparent 64%, rgba(222, 205, 175, .10) 68%, transparent 73%),
    linear-gradient(165deg, transparent 21%, rgba(255, 255, 255, .15) 26%, transparent 30%),
    url("../img/marmore-veios-1920.jpg");
  background-image:
    radial-gradient(ellipse 70% 55% at 12% 8%,  rgba(255, 254, 250, .55), transparent 64%),
    radial-gradient(ellipse 60% 48% at 88% 28%, rgba(226, 209, 180, .20), transparent 63%),
    radial-gradient(ellipse 85% 60% at 45% 100%, rgba(255, 253, 247, .45), transparent 68%),
    linear-gradient(112deg, transparent 40%, rgba(255, 255, 255, .20) 45%, transparent 49%, transparent 64%, rgba(222, 205, 175, .10) 68%, transparent 73%),
    linear-gradient(165deg, transparent 21%, rgba(255, 255, 255, .15) 26%, transparent 30%),
    image-set(url("../img/marmore-veios-1920.webp") type("image/webp"),
              url("../img/marmore-veios-1920.jpg")  type("image/jpeg"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* grão: perceptível de perto, invisível de longe */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .32;
  background-image:
    repeating-linear-gradient(0deg,  rgba(28, 25, 22, .018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(28, 25, 22, .013) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
}

/* ==========================================================================
   4. TIPOGRAFIA
   ========================================================================== */
h1, h2, h3, h4, .display {
  font-family: var(--fonte-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--tinta);
  text-wrap: balance;
}
h1, .display { letter-spacing: -.015em; }
h1 { font-size: var(--t-h1); font-weight: 500; }
h2 { font-size: var(--t-h2); font-weight: 500; }
h3 { font-size: var(--t-h3); font-weight: 600; }
h4 { font-size: var(--t-h4); font-weight: 500; }
.display { font-size: var(--t-display); font-weight: 500; }

p { max-width: var(--medida); text-wrap: pretty; }
.lead, .legenda, li { text-wrap: pretty; }
p + p { margin-top: 1.1em; }
.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--tinta-media); }
.pequeno { font-size: var(--t-pequeno); color: var(--tinta-media); }
.italico { font-style: italic; }
strong { font-weight: 600; }
em { font-style: italic; }
.centro { text-align: center; }
.centro p { margin-inline: auto; }

/* texto corrido em coluna estreita, para as páginas de leitura */
.prosa { max-width: var(--medida); }
.prosa p { line-height: 1.8; }
.prosa p + p { margin-top: 1.25em; }
.prosa h2, .prosa h3 { margin-top: 1.6em; margin-bottom: .5em; }
/* o primeiro titulo da coluna nao herda esse respiro: em grade a margem nao
   colapsa para fora e empurraria o titulo para baixo da foto ao lado */
.prosa > h2:first-child, .prosa > h3:first-child { margin-top: 0; }

/* espaçamentos utilitários */
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }  .mt-5 { margin-top: 3rem; } .mt-6 { margin-top: 4rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; }

/* ==========================================================================
   5. LAYOUT
   ========================================================================== */
.container { width: min(100% - 2 * var(--margem), var(--largura-max)); margin-inline: auto; }
.container--estreito { width: min(100% - 2 * var(--margem), 820px); margin-inline: auto; }
.container--medio { width: min(100% - 2 * var(--margem), 1000px); margin-inline: auto; }

main { display: block; }
.secao { padding-block: var(--secao); position: relative; }
.secao--compacta { padding-block: calc(var(--secao) * .6); }
.secao--clara { background: color-mix(in srgb, var(--areia-clara) 70%, transparent); }
.secao--escura { background: var(--areia-escura); }
.secao--marmore {
  background-image:
    radial-gradient(ellipse 55% 60% at 20% 30%, rgba(255, 254, 250, .6), transparent 66%),
    radial-gradient(ellipse 50% 60% at 85% 70%, rgba(226, 209, 180, .18), transparent 64%),
    linear-gradient(108deg, transparent 43%, rgba(255, 255, 255, .22) 47%, transparent 51%);
}

.cabeca-secao { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cabeca-secao--centro { margin-inline: auto; text-align: center; }
.cabeca-secao--centro p { margin-inline: auto; }
.cabeca-secao h2 { margin-top: .75rem; }
.cabeca-secao .lead { margin-top: 1.25rem; }

.grade { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade--texto-imagem { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
.grade--imagem-texto { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; }

/* ==========================================================================
   6. COMPONENTES
   ========================================================================== */

/* 6.1 Rótulo (eyebrow) ---------------------------------------------------- */
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: .9em;
  font-family: var(--fonte-rotulo);
  font-size: var(--t-rotulo);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dourado-texto);
  line-height: 1.4;
}
/* 18/09/2026, nos dois videos dela: "faltou o padrãozinho do risquinho, voce
   colocou no inicio, faltou colocar aqui no final" e "so pra deixar igual todos,
   ai voce adiciona um risquinho aqui tambem". O traco deixa de ser privilegio do
   rotulo centralizado: agora todo rotulo tem os dois, alinhado ou nao. */
.rotulo::before,
.rotulo::after { content: ""; width: 2rem; height: 1px; background: var(--dourado); flex: none; }
.rotulo--sem-traco::before,
.rotulo--sem-traco::after { display: none; }
.rotulo--centro { justify-content: center; }
.rotulo--tinta { color: var(--tinta-media); }
.rotulo--tinta::before,
.rotulo--tinta::after { background: var(--linha); }

/* 6.2 Botões e links ------------------------------------------------------ */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75em;
  min-height: 3.25rem;
  padding: .9em 1.9em;
  font-family: var(--fonte-rotulo);
  font-size: var(--t-rotulo);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--raio);
  transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
  white-space: nowrap;
}
.botao--primario { background: var(--tinta); color: var(--areia-clara); border-color: var(--tinta); }
.botao--primario:hover { background: var(--dourado-texto); border-color: var(--dourado-texto); color: #fff; }
.botao--secundario { background: transparent; color: var(--tinta); border-color: var(--tinta-media); }
.botao--secundario:hover { border-color: var(--dourado); color: var(--dourado-texto); }
.botao--pequeno { min-height: 2.75rem; padding: .7em 1.3em; font-size: .7rem; }
.botao__icone { width: 1.05em; height: 1.05em; flex: none; }
.botao:focus-visible { outline-offset: 4px; }

.botoes { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.link {
  color: var(--dourado-texto);
  text-decoration: none;
  font-family: var(--fonte-rotulo);
  font-size: var(--t-rotulo);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--dourado);
  padding-bottom: .25em;
  transition: color var(--transicao), border-color var(--transicao);
}
.link:hover { color: var(--tinta); border-color: var(--tinta); }
.prosa a:not(.botao):not(.link), .texto-link { color: var(--dourado-texto); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.prosa a:not(.botao):not(.link):hover { color: var(--tinta); }

/* aviso discreto exibido pela roleta fora do horário comercial */
.whats-aviso { display: block; margin-top: .6rem; font-size: .8125rem; color: var(--tinta-media); font-style: italic; }

/* 6.3 Moldura — o detalhe dourado --------------------------------------- */
.moldura { position: relative; border: 1px solid var(--linha); padding: 1rem; background: transparent; }
.moldura::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--linha);
  pointer-events: none;
}
.moldura--dourada { border-color: rgba(156, 124, 51, .55); }
.moldura--dourada::after { border-color: rgba(156, 124, 51, .35); }
.moldura--clara { background: var(--areia-clara); }
.moldura--folgada { padding: clamp(1.5rem, 4vw, 3rem); }
.moldura > * { position: relative; z-index: 1; }

/* imagem dentro de moldura: nunca deixar o branco do catálogo encostar no bege */
.moldura__imagem { display: block; background: var(--superficie-imagem); overflow: hidden; }
.moldura__imagem picture { height: 100%; }
.moldura__imagem img { width: 100%; height: 100%; object-fit: cover; }
.imagem--fundo-branco { background: var(--superficie-imagem); }
.imagem--fundo-branco img { mix-blend-mode: multiply; object-fit: contain; padding: 4%; }

/* legenda própria, em português, por baixo de toda imagem */
.legenda {
  margin-top: .75rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--tinta-media);
}
.legenda--rotulo {
  font-style: normal;
  font-family: var(--fonte-rotulo);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dourado-texto);
}

/* 6.4 Filete dourado ------------------------------------------------------ */
.filete { display: block; height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--dourado) 18%, var(--dourado) 82%, transparent); opacity: .8; }
.filete--curto { width: 4rem; background: var(--dourado); opacity: 1; }
.filete--ornamento { position: relative; overflow: visible; }
.filete--ornamento::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--areia-fundo);
  border: 1px solid var(--dourado);
}
.filete--suave { background: linear-gradient(90deg, transparent, var(--linha) 18%, var(--linha) 82%, transparent); }

/* 6.5 Citação ------------------------------------------------------------- */
.citacao { position: relative; padding: .5rem 0 .5rem clamp(1.5rem, 4vw, 2.5rem); border-left: 1px solid var(--dourado); max-width: 40rem; }
.citacao p { font-family: var(--fonte-display); font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); font-weight: 400; font-style: italic; line-height: 1.35; color: var(--tinta); max-width: none; }
.citacao footer { margin-top: 1rem; }
.citacao cite { font-style: normal; }

/* 6.6 Placeholder de material pendente ----------------------------------- */
.placeholder {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 12rem;
  aspect-ratio: var(--proporcao, 4 / 3);
  background-color: var(--areia-media);
  background-image:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(156, 124, 51, .09) 14px 15px),
    radial-gradient(ellipse at 40% 30%, rgba(255, 255, 255, .5), transparent 60%);
  color: var(--tinta-media);
  text-align: center;
  padding: 1.5rem;
  overflow: hidden;
}
.placeholder--retrato { --proporcao: 4 / 5; }
.placeholder--quadrado { --proporcao: 1; }
.placeholder--paisagem { --proporcao: 16 / 9; }
.placeholder--redondo { border-radius: 50%; aspect-ratio: 1; min-height: 0; }
.placeholder__rotulo {
  display: block;
  font-family: var(--fonte-rotulo);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dourado-texto);
  margin-bottom: .6rem;
}
.placeholder__texto { font-size: .9rem; line-height: 1.5; max-width: 26ch; margin: 0 auto; }
/* grade dourada sobreposta — a referência aprovada para o hero */
.grade-dourada::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(156, 124, 51, .28) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(156, 124, 51, .28) 0 1px, transparent 1px 44px);
  mask-image: radial-gradient(ellipse at 55% 45%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 55% 45%, #000 30%, transparent 78%);
}

/* marcação de texto pendente dentro de parágrafo ou bloco */
.pendente {
  display: block;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--dourado);
  background: color-mix(in srgb, var(--dourado-lavado) 55%, transparent);
  font-size: .9rem;
  line-height: 1.55;
  color: var(--tinta-media);
}
.pendente strong { display: block; font-family: var(--fonte-rotulo); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dourado-texto); font-weight: 500; margin-bottom: .35rem; }
.pendente--inline { display: inline; margin: 0; padding: .05em .4em; border-style: dotted; font-size: .9em; }
.rascunho { position: relative; padding-left: 1.25rem; border-left: 3px solid var(--dourado); }
.rascunho::before { content: "Rascunho — substituir pelo texto da cliente"; display: block; font-family: var(--fonte-rotulo); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dourado-texto); margin-bottom: .75rem; }

/* 6.7 Galeria e lightbox -------------------------------------------------- */
.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.galeria--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.galeria--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.galeria__item { margin: 0; }
.galeria__botao { display: block; width: 100%; text-align: left; }
.galeria__botao:focus-visible { outline-offset: 6px; }
.galeria__quadro { aspect-ratio: 1; }
.galeria__quadro--4x3 { aspect-ratio: 4 / 3; }
.galeria__quadro img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.galeria__botao:hover .galeria__quadro img { transform: scale(1.025); }
.galeria__quadro.imagem--fundo-branco img { object-fit: contain; }

/* Print de tela inteiro, sem corte -- 19/09/2026. As telas do software sao 16:9 ou mais
   largas (a do sebo tem 2,15:1). Num quadro 4:3 com cover, o object-fit comia ate 38% da
   largura: sumia metade do comparativo, o selo 50X da deteccao rapida, a pontuacao do
   laudo de sebo. Com contain a tela inteira cabe, e a sobra fica na cor de fundo das
   molduras de imagem, que ja existe para nao deixar o branco do catalogo encostar no bege. */
.galeria__quadro--inteiro { background: var(--superficie-imagem); }
.galeria__quadro--inteiro img { object-fit: contain; }
.galeria__legenda { margin-top: .75rem; }

/* comparativo dos três espectros — mesma área, mesmo tamanho, nome embaixo */
.comparativo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.5rem); }
.comparativo__item { margin: 0; }
.comparativo__quadro { aspect-ratio: 4 / 3; }
.comparativo__nome { display: block; margin-top: .75rem; font-family: var(--fonte-rotulo); font-size: var(--t-rotulo); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dourado-texto); }
.comparativo__texto { margin-top: .3rem; font-size: .875rem; color: var(--tinta-media); line-height: 1.5; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: 1fr auto;
  background: rgba(20, 17, 13, .92);
  padding: clamp(1rem, 4vw, 3rem);
  color: #EFE8DA;
}
.lightbox__figura { margin: 0; display: grid; grid-template-rows: 1fr auto; min-height: 0; gap: 1rem; }
.lightbox__imagem { min-height: 0; display: grid; place-items: center; }
.lightbox__imagem img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border: 1px solid rgba(201, 169, 97, .5); padding: 6px; background: var(--superficie-imagem); }
.lightbox__legenda { text-align: center; font-style: italic; font-size: .95rem; color: #CFC5B3; }
.lightbox__controles { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; }
.lightbox__controle { min-width: 3rem; min-height: 3rem; padding: .5rem 1rem; border: 1px solid rgba(201, 169, 97, .6); color: #EFE8DA; font-family: var(--fonte-rotulo); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.lightbox__controle:hover { background: rgba(201, 169, 97, .2); }
.lightbox__fechar { position: absolute; top: 1rem; right: 1rem; }
body.lightbox-aberto, body.menu-aberto { overflow: hidden; }

/* 6.8 Régua de passos ---------------------------------------------- */
.regua { --regua-cor: var(--dourado); position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem; counter-reset: passo; }
.regua::before { content: ""; position: absolute; left: 6%; right: 6%; top: 1.45rem; height: 1px; background: linear-gradient(90deg, transparent, var(--regua-cor) 8%, var(--regua-cor) 92%, transparent); }
.regua__passo { position: relative; text-align: center; padding-top: .25rem; }
.regua__numero {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; margin: 0 auto 1.25rem;
  font-family: var(--fonte-display); font-size: 1.25rem; font-weight: 500; color: var(--dourado-texto);
  background: var(--areia-fundo); border: 1px solid var(--dourado); border-radius: 50%;
  position: relative; z-index: 1;
}
.secao--clara .regua__numero, .secao--marmore .regua__numero { background: var(--areia-clara); }
/* Mesmo problema do numero da regua, no losango do filete: ele e pintado com a
   cor do fundo da pagina para "furar" a linha dourada, mas dentro de uma secao
   clara a superficie e outra e o losango aparecia mais escuro que a faixa.
   .secao--clara e 70% de --areia-clara sobre --areia-fundo; a mistura abaixo
   reproduz exatamente essa composicao. */
.secao--clara .filete--ornamento::after { background: color-mix(in srgb, var(--areia-clara) 70%, var(--areia-fundo)); }
.regua__nome { font-family: var(--fonte-display); font-size: 1.5rem; font-weight: 500; letter-spacing: .02em; }
.regua__texto { margin-top: .5rem; font-size: .9375rem; line-height: 1.55; color: var(--tinta-media); max-width: 22ch; margin-inline: auto; }

/* 6.9 Ficha técnica e perguntas frequentes (details) --------------------- */
.ficha { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.ficha > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; font-family: var(--fonte-rotulo); font-size: var(--t-rotulo); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--tinta); }
.ficha > summary::-webkit-details-marker { display: none; }
.ficha > summary::after { content: "+"; font-family: var(--fonte-display); font-size: 1.6rem; line-height: 1; color: var(--dourado); transition: transform var(--transicao); }
.ficha[open] > summary::after { transform: rotate(45deg); }
/* a barra inteira e clicavel e atravessa a pagina: sem hover, ninguem descobre */
.ficha > summary { cursor: pointer; transition: color var(--transicao); }
.ficha > summary:hover { color: var(--dourado-texto); }
.ficha__corpo { padding: .5rem 0 2rem; }
.ficha__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
.ficha dt { font-family: var(--fonte-rotulo); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dourado-texto); margin-bottom: .5rem; }
.ficha dd { font-size: .95rem; line-height: 1.6; color: var(--tinta-media); }
.ficha dd + dt { margin-top: 1.25rem; }
.ficha ul { padding-left: 1.1em; margin: .25rem 0 0; }
.ficha li + li { margin-top: .2rem; }
.ficha .pendente { margin: .75rem 0 0; }

.faq { border-top: 1px solid var(--linha); }
.faq__item { border-bottom: 1px solid var(--linha); }
.faq__item > summary { list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1.25rem 0; font-family: var(--fonte-display); font-size: 1.35rem; font-weight: 500; line-height: 1.3; }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after { content: "+"; font-size: 1.6rem; color: var(--dourado); flex: none; transition: transform var(--transicao); }
.faq__item[open] > summary::after { transform: rotate(45deg); }
.faq__resposta { padding: 0 0 1.5rem; color: var(--tinta-media); }
.faq__resposta p { max-width: var(--medida); text-wrap: pretty; }
.lead, .legenda, li { text-wrap: pretty; }

/* 6.10 Formulário --------------------------------------------------------- */
.formulario { display: grid; gap: 1.5rem; }
.formulario__linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.campo { display: grid; gap: .45rem; }
.campo__rotulo { font-family: var(--fonte-rotulo); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-media); font-weight: 500; }
.campo__rotulo abbr { text-decoration: none; color: var(--dourado-texto); }
.campo__ajuda { font-size: .8125rem; color: var(--tinta-suave); line-height: 1.45; }
.campo__entrada {
  width: 100%;
  min-height: 3.25rem;
  padding: .75rem 1rem;
  background: var(--areia-clara);
  border: 1px solid var(--linha-campo);
  border-radius: var(--raio);
  color: var(--tinta);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
/* outline transparente, nao "none": na renderizacao normal e invisivel e o anel
   dourado continua igual; no modo de alto contraste do Windows o navegador pinta
   este outline e o campo em foco volta a ter marca. */
.campo__entrada:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--dourado); box-shadow: 0 0 0 1px var(--dourado); }
/* .7 misturava a --tinta-suave com o preenchimento e dava 3,42:1, abaixo dos
   4,5:1. Com .85 a cor efetiva vira #766F62, 4,77:1, e o exemplo continua
   visivelmente mais leve que um valor digitado. */
.campo__entrada::placeholder { color: var(--tinta-suave); opacity: .85; }
textarea.campo__entrada { min-height: 9rem; resize: vertical; }
select.campo__entrada { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinta-media) 50%), linear-gradient(135deg, var(--tinta-media) 50%, transparent 50%); background-position: calc(100% - 1.4rem) 55%, calc(100% - 1rem) 55%; background-size: .4rem .4rem; background-repeat: no-repeat; padding-right: 2.75rem; }
.campo__erro { display: none; font-size: .8125rem; color: #8A2E1F; line-height: 1.4; }
.campo--invalido .campo__entrada { border-color: #A8412F; }
.campo--invalido .campo__erro { display: block; }
.campo--oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario__aviso { font-size: .8125rem; color: var(--tinta-suave); line-height: 1.5; }
.formulario__estado { padding: 1rem 1.25rem; border: 1px solid var(--linha); background: var(--areia-clara); font-size: .95rem; }
.formulario__estado--erro { border-color: #A8412F; color: #8A2E1F; }

/* lista de canais diretos (página de contato e rodapé) */
.canais { display: grid; gap: 1.5rem; }
.canal { display: grid; gap: .3rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--linha-suave); }
.canal:last-child { border-bottom: 0; padding-bottom: 0; }
.canal__rotulo { font-family: var(--fonte-rotulo); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dourado-texto); }
.canal__valor { font-family: var(--fonte-display); font-size: 1.45rem; font-weight: 500; line-height: 1.2; }
.canal__valor a { text-decoration: none; }
.canal__valor a:hover { color: var(--dourado-texto); }
.canal__nota { font-size: .875rem; color: var(--tinta-media); }

/* desenhos em SVG (corte da pele): só tokens de cor, funcionam nos dois temas */
.svg-pele { width: 100%; height: auto; display: block; }
.svg-camada--epiderme { fill: var(--areia-clara); }
.svg-camada--derme { fill: var(--dourado-lavado); }
.svg-camada--hipoderme { fill: var(--areia-media); }
.svg-superficie { stroke: var(--tinta-media); stroke-width: 1.2; }
.svg-divisa { stroke: var(--linha); stroke-width: 1; stroke-dasharray: 3 4; }
.svg-detalhe { stroke: var(--tinta-suave); stroke-width: 1; }
.svg-fio { stroke: var(--tinta); stroke-width: 1.4; stroke-linecap: round; }
.svg-vaso { stroke: var(--dourado-claro); stroke-width: 1.4; }
.svg-melanina { fill: var(--tinta-suave); opacity: .7; }
.svg-feixe { stroke: var(--dourado); stroke-width: 1.6; stroke-linecap: round; }
.svg-feixe-brilho { stroke: var(--dourado); stroke-width: 9; opacity: .12; stroke-linecap: round; }
.svg-alcance { fill: var(--areia-fundo); stroke: var(--dourado); stroke-width: 1.2; }
.svg-alcance-linha { stroke: var(--dourado); stroke-width: 1; stroke-dasharray: 2 3; }
.svg-rotulo { font-family: var(--fonte-rotulo); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; fill: var(--tinta-media); }
.svg-rotulo--feixe { fill: var(--dourado-texto); font-size: 8.5px; }

/* numeral romano dourado usado nos pilares e nos passos */
.numeral { font-family: var(--fonte-display); font-weight: 400; font-size: clamp(2.6rem, 2rem + 2vw, 4rem); line-height: 1; color: var(--dourado); letter-spacing: .04em; }
.numeral--grande { font-size: clamp(4rem, 3rem + 4vw, 7rem); }

/* ==========================================================================
   7. CABEÇALHO
   ========================================================================== */
.pular {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  padding: .75rem 1.25rem; background: var(--tinta); color: var(--areia-clara);
  font-family: var(--fonte-rotulo); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  transition: top var(--transicao);
}
.pular:focus { top: 1rem; }

.cabecalho {
  position: sticky; top: 0; z-index: 50;
  transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
  border-bottom: 1px solid transparent;
}
/* O fundo e o desfoque do cabecalho rolado moram neste ::before, e nao no
   proprio <header>. Motivo (bug do celular, 15/09/2026): backdrop-filter faz do
   elemento o bloco de referencia de todo position:fixed que vive dentro dele.
   Com a pagina rolada o cabecalho ganhava .cabecalho--rolado, e o menu do
   celular — .navegacao, que e fixed com inset:0 e mora dentro do <header> —
   passava a medir o cabecalho em vez da tela: abria com 116px de altura,
   espremido no topo, em vez dos 812px da tela. No topo da pagina, sem a classe,
   o mesmo menu abria certo. Num pseudo-elemento o efeito e identico e o
   cabecalho volta a ser um elemento comum para quem esta fixed dentro dele. */
.cabecalho::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  opacity: 0; transition: opacity 250ms ease;
}
.cabecalho--rolado::before {
  opacity: 1;
  /* 92%: onde o backdrop-filter nao se aplica, 84% deixava passar um fantasma
     legivel do texto — que e exatamente o que ela reclamou */
  background: color-mix(in srgb, var(--areia-fundo) 92%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
.cabecalho--rolado {
  border-bottom-color: var(--linha-suave);
}
.cabecalho__interno {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: var(--cabecalho-altura);
}
/* Logo oficial da cliente, remontado deitado (emblema à esquerda, palavra à direita):
   no empilhado original a palavra sairia com 5px de altura num cabeçalho de 80px.
   Altura fixa e largura automática — o width/height do <img> reserva o espaço e evita
   o pulo da página enquanto a imagem carrega. */
.marca { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; }
.marca__logo { display: block; height: 2.75rem; width: auto; }
.marca--rodape .marca__logo { height: 3.25rem; }
@media (max-width: 600px) { .marca__logo { height: 2.35rem; } }

.navegacao ul { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); list-style: none; margin: 0; padding: 0; }
.navegacao a {
  display: inline-block; padding: .5rem .1rem;
  font-family: var(--fonte-rotulo); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-media); text-decoration: none; position: relative;
  transition: color var(--transicao);
}
.navegacao a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 1px; background: var(--dourado); transform: scaleX(0); transform-origin: left; transition: transform 220ms ease; }
.navegacao a:hover, .navegacao a[aria-current="page"] { color: var(--tinta); }
.navegacao a:hover::after, .navegacao a[aria-current="page"]::after { transform: scaleX(1); }
.navegacao__rodape { display: none; }
.cabecalho__acoes { display: flex; align-items: center; gap: 1rem; }
.menu-botao {
  display: none; align-items: center; gap: .6rem;
  min-width: 44px; min-height: 44px; padding: .5rem .25rem;
  font-family: var(--fonte-rotulo); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta);
}
.menu-botao__icone { width: 22px; height: 12px; position: relative; }
.menu-botao__icone::before, .menu-botao__icone::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform 220ms ease, top 220ms ease; }
.menu-botao__icone::before { top: 0; } .menu-botao__icone::after { top: 11px; }
.menu-botao[aria-expanded="true"] .menu-botao__icone::before { top: 5px; transform: rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__icone::after { top: 5px; transform: rotate(-45deg); }

/* ==========================================================================
   8. RODAPÉ
   ========================================================================== */
.rodape { margin-top: var(--secao); position: relative; }
.rodape__interno { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(3rem, 6vw, 5rem); }
.rodape__coluna h2 { font-family: var(--fonte-rotulo); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dourado-texto); font-weight: 500; margin-bottom: 1.25rem; }
.rodape__frase { margin-top: 1.25rem; font-family: var(--fonte-display); font-size: 1.35rem; font-style: italic; line-height: 1.35; max-width: 22em; color: var(--tinta-media); }
.rodape__posicionamento { margin-top: 1rem; font-family: var(--fonte-rotulo); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.rodape__nav { display: grid; gap: .6rem; }
.rodape__nav a { text-decoration: none; color: var(--tinta-media); font-size: .95rem; transition: color var(--transicao); }
.rodape__nav a:hover { color: var(--dourado-texto); text-decoration: underline; text-decoration-color: var(--dourado); text-underline-offset: .35em; text-decoration-thickness: 1px; }
.rodape__contato { display: grid; gap: .9rem; font-size: .95rem; color: var(--tinta-media); }
.rodape__contato a { text-decoration: none; }
.rodape__contato a:not(.botao):hover { color: var(--dourado-texto); text-decoration: underline; text-decoration-color: var(--dourado); text-underline-offset: .35em; text-decoration-thickness: 1px; }
.rodape__contato .botao { justify-self: start; margin-top: .5rem; }
.rodape__linha { border-top: 1px solid var(--linha-suave); padding-block: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; font-family: var(--fonte-rotulo); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }

/* ==========================================================================
   9. PÁGINAS
   ========================================================================== */

/* 9.1 Home ---------------------------------------------------------------- */
.hero { position: relative; min-height: 85vh; min-height: 85svh; display: grid; align-items: center; padding-block: clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero__grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.hero h1 { margin-top: 1.25rem; font-size: var(--t-display); }
.hero .lead { margin-top: 1.5rem; max-width: 30em; }
.hero .botoes { margin-top: 2.25rem; }
.hero__imagem { position: relative; }
.hero__imagem .moldura { aspect-ratio: 4 / 5; padding: 1rem; }
.hero__imagem .placeholder { height: 100%; aspect-ratio: auto; }
/* círculo fino dourado atrás da imagem, como na referência da cliente */
.hero__ornamento { position: absolute; width: 118%; aspect-ratio: 1; right: -22%; top: 50%; transform: translateY(-50%); border: 1px solid rgba(156, 124, 51, .28); border-radius: 50%; pointer-events: none; z-index: -1; }
.hero__ornamento::after { content: ""; position: absolute; inset: 9%; border: 1px solid rgba(156, 124, 51, .16); border-radius: 50%; }
.hero__nota { position: absolute; left: 0; bottom: -1.75rem; font-family: var(--fonte-rotulo); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }

/* HERO A — tipográfico. Sem moldura: enquanto não há foto de rosto com autorização,
   uma caixa vazia anuncia a falta em vez de ser neutra. A grade dourada sai do papel
   de conteúdo e vira camada de fundo, sangrando pela direita. */
.hero--tipografico { min-height: 78vh; min-height: 78svh; }
.hero--tipografico .hero__texto { max-width: 41rem; }
/* o rótulo do hero cabe numa linha a partir de 700px; abaixo disso pode quebrar */
@media (min-width: 700px) { .hero .rotulo { white-space: nowrap; } }
.hero--tipografico h1 { max-width: 14ch; }
.hero--tipografico .lead { max-width: 33rem; }
.hero__campo {
  position: absolute; inset: 0 0 0 auto; width: min(62%, 46rem); pointer-events: none; z-index: -1;
  background-image:
    repeating-linear-gradient(to right, rgba(156, 124, 51, .30) 0 1px, transparent 1px 4.5rem),
    repeating-linear-gradient(to bottom, rgba(156, 124, 51, .30) 0 1px, transparent 1px 4.5rem);
  -webkit-mask-image: radial-gradient(115% 95% at 100% 50%, #000 30%, transparent 74%);
          mask-image: radial-gradient(115% 95% at 100% 50%, #000 30%, transparent 74%);
}
.hero__campo::after {
  content: ""; position: absolute; width: 76%; aspect-ratio: 1; right: 6%; top: 50%;
  transform: translateY(-50%); border: 1px solid rgba(156, 124, 51, .26); border-radius: 50%;
}
@media (max-width: 900px) { .hero__campo { width: 100%; opacity: .55; } }

/* HERO B — mapa de leitura. Campo em tom de pele com a grade dourada e quatro pontos
   de medição, usando o mesmo vocabulário dos diagramas da página Tecnologia. */
.mapa-leitura { display: block; width: 100%; height: auto; }
.mapa__grade { stroke: var(--dourado); stroke-width: 1; opacity: .30; }
.mapa__halo { fill: none; stroke: var(--dourado); stroke-width: 1; opacity: .40; }

/* entrada suave: começa quase visível e termina no lugar; nada fica invisível esperando rolagem */
@keyframes entrada { from { opacity: .001; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__texto > * { animation: entrada 700ms cubic-bezier(.2, .7, .2, 1) both; }
.hero__texto > *:nth-child(2) { animation-delay: 80ms; }
.hero__texto > *:nth-child(3) { animation-delay: 160ms; }
.hero__texto > *:nth-child(4) { animation-delay: 240ms; }
.hero__imagem { animation: entrada 900ms 200ms cubic-bezier(.2, .7, .2, 1) both; }

.faixa { padding-block: clamp(3rem, 6vw, 5rem); text-align: center; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.faixa__titulo { font-family: var(--fonte-display); font-size: clamp(2.4rem, 1.6rem + 4vw, 5.2rem); font-weight: 600; letter-spacing: .12em; line-height: 1; color: var(--tinta); text-transform: uppercase; }
.faixa__titulo span { color: var(--dourado); }
.faixa__sub { margin: 1rem auto 0; font-family: var(--fonte-display); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem); color: var(--tinta-media); }

.pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pilar { padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 3rem); border-left: 1px solid var(--linha); }
.pilar:first-child { border-left: 0; padding-left: 0; }
.pilar .filete--curto { margin: 1.25rem 0 1.5rem; }
.pilar h3 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); }
.pilar p { margin-top: 1rem; color: var(--tinta-media); }

.diagrama { padding: clamp(1.25rem, 3vw, 2.5rem); }
.diagrama svg { width: 100%; height: auto; }
.diagrama__legenda { margin-top: 1rem; }

.faixa-destaque { padding: clamp(3rem, 8vw, 7rem) clamp(1.5rem, 6vw, 6rem); text-align: center; }
.faixa-destaque h2 { font-size: clamp(2.4rem, 1.8rem + 2.8vw, 4.4rem); font-weight: 400; }
.faixa-destaque .lead { margin: 1.5rem auto 0; max-width: 34em; }
.faixa-destaque .botoes { justify-content: center; margin-top: 2.25rem; }
/* três públicos dentro da faixa em moldura */
.publicos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2rem, 4vw, 3rem); text-align: left; }
.publico { padding-left: clamp(1rem, 2vw, 1.75rem); border-left: 1px solid var(--linha); }
.publico:first-child { border-left: 0; padding-left: 0; }
.publico h3 { font-size: var(--t-h4); }
.publico p { margin-top: .75rem; font-size: var(--t-pequeno); color: var(--tinta-media); }
@media (max-width: 780px) {
  .publicos { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .publico { border-left: 0; padding-left: 0; padding-top: 1.25rem; border-top: 1px solid var(--linha); }
  .publico:first-child { padding-top: 0; border-top: 0; }
}

.presenca__imagem .moldura { padding: 1rem; }
/* estande grande com o brinde de feira em quadro menor logo abaixo */
.feiras__imagens { display: grid; gap: 1.5rem; }
.feiras__imagens .moldura { padding: 1rem; }
.feiras__brinde { max-width: 58%; }
@media (max-width: 900px) { .feiras__brinde { max-width: 48%; } }

.chamada { text-align: center; }
.chamada h2 { font-size: clamp(2.2rem, 1.7rem + 2vw, 3.6rem); font-weight: 400; }
.chamada p { margin: 1.25rem auto 0; }
.chamada .botoes { justify-content: center; margin-top: 2rem; }

/* 9.2 Equipamentos -------------------------------------------------------- */
.abertura { padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 6vw, 5rem); }
/* topo mais curto quando a abertura tem imagem ao lado: com o respiro cheio, o primeiro
   bloco de conteúdo caía inteiro abaixo da dobra em telas de 900px */
.abertura--compacta { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.abertura--compacta .grade { align-items: center; }
.abertura h1 { margin-top: 1rem; }
.abertura .lead { margin-top: 1.5rem; }

.equipamento { padding-block: var(--secao); scroll-margin-top: var(--cabecalho-altura); }
.equipamento__cabeca { max-width: 46rem; }
.equipamento__nome { margin-top: .75rem; font-size: clamp(2.6rem, 2rem + 2.6vw, 4.4rem); font-weight: 400; }
.equipamento__categoria { margin-top: .75rem; font-family: var(--fonte-display); font-style: italic; font-size: 1.4rem; color: var(--tinta-media); }
.equipamento__corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(2.5rem, 5vw, 4rem); }
.equipamento__foto { position: sticky; top: calc(var(--cabecalho-altura) + 1.5rem); }
.equipamento__foto .moldura { padding: 1.25rem; }
.equipamento__foto .moldura__imagem { aspect-ratio: 4 / 3; }
.equipamento__foto .imagem--fundo-branco img { padding: 6%; }
.equipamento__foto .moldura__imagem--quadrado { aspect-ratio: 1; }
/* Logo da linha no topo de cada bloco. A hierarquia é do fabricante: SkinVision assina
   o conjunto, Lumera vem "by SkinVision", Trichovision tem assinatura própria.
   A Dermatech distribui — por isso a marca dela não se repete aqui. */
.equipamento__marca { display: block; width: auto; margin-bottom: 1.25rem; }
.equipamento__marca--skinvision { height: 2.6rem; }
.equipamento__marca--lumera { height: 4.5rem; }
.equipamento__marca--trichovision { height: 2.2rem; }
/* o texto que a própria cliente escreveu, em corpo maior que o técnico que vem depois
   (o corpo maior só vale de fato pela regra composta da seção 18, que vence `.equipamento__texto p`) */
.equipamento__abertura { font-family: var(--fonte-display); font-size: var(--t-lead); line-height: 1.5; color: var(--tinta); margin-bottom: 1.5rem; }

/* render do catálogo em quadro menor, abaixo da foto real do equipamento montado */
.equipamento__render { margin-top: 1.5rem; max-width: 62%; }
.equipamento__render .moldura { padding: .75rem; }
.equipamento__render .moldura__imagem { aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .equipamento__render { max-width: 50%; } }
.equipamento__texto { max-width: var(--medida); }
.equipamento__texto p { font-size: 1.02rem; line-height: 1.7; }
.equipamento__texto p + p { margin-top: 1.4em; }
.equipamento__texto .botoes { margin-top: 2rem; }
.equipamento__galeria { margin-top: clamp(3rem, 6vw, 5rem); }
.equipamento__galeria h3 { margin-bottom: 1.75rem; }
.equipamento__ficha { margin-top: clamp(2.5rem, 5vw, 4rem); }
.equipamento__destaque { display: grid; gap: 1.25rem; }
.equipamento__destaque .comparativo__quadro { aspect-ratio: 4 / 3; }
.equipamento__inset { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: 1.25rem; align-items: stretch; }
.equipamento__inset .moldura { padding: 1rem; }
.equipamento__inset .moldura__imagem { height: 100%; aspect-ratio: auto; min-height: 12rem; }

/* 9.3 Tecnologia ---------------------------------------------------------- */
.espectros { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.espectro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--linha); }
.espectro:nth-child(even) .espectro__texto { order: 2; }
.espectro__texto h3 { margin-top: .5rem; }
.espectro__texto p { margin-top: 1rem; color: var(--tinta-media); }
.espectro__desenho { padding: 1rem; }
.espectro__desenho svg { width: 100%; height: auto; display: block; }
.espectro__profundidade { margin-top: .75rem; font-family: var(--fonte-rotulo); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.microscopia-faixa { margin-top: clamp(2rem, 4vw, 3rem); }
.beneficios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.beneficio { padding: clamp(1.5rem, 3vw, 2.5rem); }
.beneficio .numeral { font-size: 2.2rem; }
.beneficio h3 { margin-top: 1rem; font-size: 1.6rem; }
.beneficio p { margin-top: .75rem; color: var(--tinta-media); }

/* 9.4 Sobre --------------------------------------------------------------- */
.valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.valor { padding: clamp(1.5rem, 3vw, 2.5rem); }
.valor h3 { margin-top: 1rem; }
.valor p { margin-top: .75rem; color: var(--tinta-media); }
/* 9.4 e 9.4b (Equipe: quatro colunas, e depois tres retratos em moldura) sairam em
   19/09/2026 junto com a propria secao Equipe -- retorno 10. Estavam dormentes desde
   17/09, quando o bloco virou tipografico. Se voltarem, estao no commit da nota. */

/* 9.5 Como funciona ------------------------------------------------------- */
.passos { position: relative; display: grid; gap: clamp(2rem, 5vw, 4rem); }
.passo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; position: relative; }
.passo__numero { text-align: right; }
.passo:nth-child(even) .passo__numero { order: 2; text-align: left; }
.passo__numero .numeral--grande { display: block; }
.passo__numero small { display: block; margin-top: .5rem; font-family: var(--fonte-rotulo); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.passo__texto h3 { font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.6rem); }
.passo__texto p { margin-top: 1rem; color: var(--tinta-media); }
.passo + .passo::before { content: ""; position: absolute; left: 50%; top: calc(-1 * clamp(2rem, 5vw, 4rem)); height: clamp(2rem, 5vw, 4rem); width: 1px; background: var(--dourado); opacity: .6; }

.linha-tempo { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.linha-tempo::before { content: ""; position: absolute; left: 4%; right: 4%; top: .6rem; height: 1px; background: var(--dourado); opacity: .7; }
.etapa { position: relative; padding-top: 2rem; }
.etapa::before { content: ""; position: absolute; left: 0; top: .25rem; width: 11px; height: 11px; transform: rotate(45deg); background: var(--areia-fundo); border: 1px solid var(--dourado); }
.etapa__nome { font-family: var(--fonte-display); font-size: 1.45rem; font-weight: 500; }
.etapa__texto { margin-top: .5rem; font-size: .9375rem; color: var(--tinta-media); line-height: 1.55; }

/* 9.6 Contato, Obrigado, 404 ---------------------------------------------- */
.contato__grade { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.contato__lateral { position: sticky; top: calc(var(--cabecalho-altura) + 1.5rem); }
.contato__lateral .moldura { padding: clamp(1.5rem, 3vw, 2.5rem); }
.contato__horario { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linha-suave); font-size: .95rem; color: var(--tinta-media); }
.pagina-simples { min-height: 60vh; display: grid; align-items: center; text-align: center; padding-block: clamp(4rem, 10vw, 8rem); }
.pagina-simples .moldura { padding: clamp(2.5rem, 6vw, 5rem); }
.pagina-simples h1 { font-size: clamp(2.6rem, 2rem + 3vw, 5rem); }
.pagina-simples p { margin: 1.25rem auto 0; }
.pagina-simples .botoes { justify-content: center; margin-top: 2rem; }
.lista-paginas { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; margin-top: 2rem; }
.lista-paginas a { font-family: var(--fonte-rotulo); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--tinta-media); border-bottom: 1px solid var(--linha); padding-bottom: .2em; }
.lista-paginas a:hover { color: var(--dourado-texto); border-color: var(--dourado); }

/* ==========================================================================
   10. RESPONSIVO
   ========================================================================== */
@media (max-width: 1100px) {
  .galeria--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --cabecalho-altura: 4.25rem; }
  /* cabeçalho: menu em tela cheia */
  .menu-botao { display: inline-flex; }
  .cabecalho__whats { display: none; }
  .navegacao {
    position: fixed; inset: 0; z-index: 60;
    display: none;
    padding: calc(var(--cabecalho-altura) + 1rem) var(--margem) 2rem;
    background-color: var(--areia-fundo);
    background-image: radial-gradient(ellipse 70% 55% at 12% 8%, rgba(255, 254, 250, .55), transparent 64%), radial-gradient(ellipse 60% 48% at 88% 28%, rgba(226, 209, 180, .20), transparent 63%);
    overflow-y: auto;
  }
  .navegacao--aberta { display: flex; flex-direction: column; }
  .navegacao ul { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .navegacao a { font-family: var(--fonte-display); font-size: clamp(2rem, 8vw, 2.8rem); font-weight: 400; letter-spacing: 0; text-transform: none; padding: .55rem 0; }
  .navegacao a::after { bottom: .4rem; }
  .navegacao__rodape { display: block; margin-top: auto; padding-top: 2rem; border-top: 1px solid var(--linha); }
  .navegacao__rodape .botao { width: 100%; }
  .cabecalho__interno { position: relative; z-index: 70; }
  /* O painel do menu (.navegacao, z-index 60) mora DENTRO do .cabecalho__interno,
     entao o z-index 70 daqui sobe os dois juntos e nao decide a briga la dentro:
     quem nao tem position — a marca e as acoes — ficava por baixo do painel. Na
     pratica o X que fecha o menu estava coberto pelo proprio menu, e no celular
     so dava para sair tocando num link (nao ha Esc). Sobem os dois acima do 60. */
  .cabecalho__interno > .marca,
  .cabecalho__interno > .cabecalho__acoes { position: relative; z-index: 80; }
  .cabecalho--menu { background: var(--areia-fundo); }

  .hero { min-height: 0; }
  .hero__grade, .grade--2, .grade--texto-imagem, .grade--imagem-texto, .equipamento__corpo, .espectro, .passo, .contato__grade { grid-template-columns: minmax(0, 1fr); }
  .hero__imagem { max-width: 28rem; }
  .hero__ornamento { display: none; }
  .equipamento__foto, .contato__lateral { position: static; }
  .espectro:nth-child(even) .espectro__texto { order: 0; }
  .passo__numero, .passo:nth-child(even) .passo__numero { text-align: left; order: 0; }
  .passo + .passo::before { left: 1.2rem; }
  .pilares { grid-template-columns: minmax(0, 1fr); }
  .pilar { border-left: 0; padding-inline: 0; border-top: 1px solid var(--linha); }
  .pilar:first-child { border-top: 0; }
  .valores, .grade--3 { grid-template-columns: minmax(0, 1fr); }
  .beneficios { grid-template-columns: minmax(0, 1fr); }
  /* de 601 a 900px o comparativo segurava tres colunas e a microscopia -- a imagem
     mais forte do site -- aparecia com 142x107 px. Colapsa junto com os irmaos. */
  .comparativo { grid-template-columns: minmax(0, 1fr); }
  .comparativo__item { max-width: 26rem; margin-inline: auto; }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__interno { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .regua { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .regua::before { left: 1.2rem; right: auto; top: 1rem; bottom: 1rem; width: 1px; height: auto; background: linear-gradient(180deg, transparent, var(--regua-cor) 6%, var(--regua-cor) 94%, transparent); }
  .regua__passo { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1.25rem; text-align: left; align-items: start; }
  .regua__numero { margin: 0; }
  .regua__texto { margin-inline: 0; max-width: none; }
  .regua__conteudo { padding-top: .25rem; }
  .linha-tempo { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .linha-tempo::before { left: .3rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .etapa { padding-top: 0; padding-left: 2rem; }
  .etapa::before { left: 0; top: .5rem; }
  .ficha__grade { grid-template-columns: minmax(0, 1fr); }
  .equipamento__inset { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  :root { --t-corpo: 1rem; }
  .galeria, .galeria--2, .galeria--4 { grid-template-columns: minmax(0, 1fr); }
  /* Print de tela em uma coluna so: o 4:3 existia para alinhar fileira, e aqui nao ha
     fileira. O contain so deixava faixa clara em cima e embaixo, de 12 a 81px por
     quadro, cada uma diferente. O print fica com a altura que ele tem. */
  .galeria__quadro--inteiro { aspect-ratio: auto; }
  .galeria__quadro--inteiro img { height: auto; }
  .formulario__linha { grid-template-columns: minmax(0, 1fr); }
  .botoes .botao { width: 100%; white-space: normal; text-align: center; }
  .faixa__titulo { letter-spacing: .08em; }
  .equipe { grid-template-columns: minmax(0, 1fr); }
  .rodape__linha { flex-direction: column; }
  .moldura--folgada { padding: 1.25rem; }
  .faixa-destaque { padding-inline: 1.25rem; }
  .lightbox__fechar { top: .5rem; right: .5rem; }
}

/* ==========================================================================
   11. ACESSIBILIDADE E MOVIMENTO REDUZIDO
   ========================================================================== */
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .galeria__botao:hover .galeria__quadro img { transform: none; }
}
@media (forced-colors: active) {
  .botao { border: 1px solid ButtonText; }
  .moldura, .moldura::after { border-color: CanvasText; }
}

/* ==========================================================================
   12. GUIA DE ESTILO (revisao/styleguide.html e revisao/imagens.html)
   Só para aprovação interna; não é carregado pelas páginas do site.
   ========================================================================== */
.guia__bloco { padding-block: 2.5rem; border-top: 1px solid var(--linha); }
.guia__bloco > h2 { font-family: var(--fonte-rotulo); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dourado-texto); margin-bottom: 1.5rem; font-weight: 500; }
.paleta { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; }
.amostra { border: 1px solid var(--linha); }
.amostra__cor { height: 4.5rem; }
.amostra__nome { padding: .6rem .75rem; font-family: var(--fonte-rotulo); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; }
.amostra__nome span { display: block; color: var(--tinta-suave); text-transform: none; letter-spacing: .04em; }
.escala > * + * { margin-top: 1.25rem; }
.escala small { display: block; font-family: var(--fonte-rotulo); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: .25rem; }
.folha { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.5rem; }
.folha__item { margin: 0; }
.folha__meta { font-family: var(--fonte-rotulo); font-size: .62rem; letter-spacing: .1em; color: var(--tinta-suave); margin-top: .5rem; line-height: 1.6; }


/* ==========================================================================
   14. CONTROLES DA APRESENTAÇÃO — idioma e tema
   ========================================================================== */
.controles {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.idiomas {
  display: flex;
  align-items: center;
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 2px;
  background: color-mix(in srgb, var(--areia-clara) 70%, transparent);
}
.idiomas__opcao {
  font-family: var(--fonte-rotulo);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding: .34rem .58rem;
  border-radius: 999px;
  line-height: 1;
  transition: color .18s ease, background-color .18s ease;
}
.idiomas__opcao:hover { color: var(--tinta); }
.idiomas__opcao[aria-pressed="true"] {
  background: var(--dourado-lavado);
  color: var(--dourado-texto);
}


/* no celular os controles descem para dentro do menu */
.navegacao__controles { display: none; }
@media (max-width: 900px) {
  .cabecalho__acoes .controles { display: none; }
  .navegacao__controles {
    display: flex;
    justify-content: center;
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid var(--linha-suave);
  }
}

/* aviso de versão de apresentação: fica no rodapé, discreto */
.nota-apresentacao {
  font-family: var(--fonte-rotulo);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* enquanto a foto nao chega, o lugar dela nao pode piscar claro no tema escuro.
   A superficie clara continua valendo para imagem de catalogo com fundo branco,
   que depende dela para o mix-blend-mode: multiply funcionar. */

/* as palavras da faixa sao <span> para poderem ser traduzidas e por padrao herdam
   a cor do paragrafo. O dourado que a cliente pediu entra pela variante em 17.3. */
.faixa__titulo span { color: inherit; }


/* ==========================================================================
   15. LAPIDAÇÃO — proporção no celular e mais matéria na página
   ========================================================================== */

/* O botão do WhatsApp dentro do menu do celular saía com a fonte display de
   2rem+, porque a regra .navegacao a vale para todo <a> do menu — inclusive o
   botão. O ícone acompanhava e virava um balão. Aqui o botão volta a ser botão. */
.navegacao .botao {
  font-family: var(--fonte-rotulo); font-size: var(--t-rotulo); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
  padding: .9em 1.9em; display: inline-flex;
}
.navegacao .botao::after { display: none; }

/* ícone em proporção com a altura do botão: 1.05em ficava um pontinho de 12px
   num botão de 52px */
.botao { gap: .65em; }
.botao__icone { width: 1.3em; height: 1.3em; }
.botao--pequeno .botao__icone { width: 1.35em; height: 1.35em; }

/* controles de idioma e tema: mais presença, e alvo de toque de 44px no celular */
.idiomas__opcao { font-size: .72rem; padding: .5rem .72rem; }
@media (max-width: 900px) {
  .navegacao__controles .controles { gap: 1.1rem; }
  .navegacao__controles .idiomas { padding: 3px; }
  .navegacao__controles .idiomas__opcao { font-size: .82rem; padding: .72rem 1.05rem; min-height: 44px; }
}

/* ícone de traço dourado em cada pilar, no lugar do filete curto */
.pilar__icone { display: block; width: 2.5rem; height: 2.5rem; margin: 1.25rem 0 1.4rem; color: var(--dourado); }
.pilar__icone svg { display: block; width: 100%; height: 100%; }

/* trio de microscopia na Home: a mesma área sob três luzes */
.comparativo__fonte { margin-top: 1.25rem; text-align: center; }
/* O trio na Home saiu a pedido dela; .comparativo--home nao existe em nenhum HTML
   desde entao. As tres regras que sobraram diziam "tres colunas ate 600px", o
   contrario do que o comparativo faz hoje, e voltariam a valer se a classe
   voltasse. Removidas em 19/09/2026. */

/* marca d'água do emblema, fechando a página */
.marca-dagua { position: relative; overflow: hidden; }
.marca-dagua::before {
  content: ""; position: absolute; right: -5%; bottom: -16%;
  width: clamp(15rem, 30vw, 26rem); aspect-ratio: 1;
  background: url("../img/marca/dermatech-simbolo-agua.png") center / contain no-repeat;
  opacity: .075; pointer-events: none;
}
.marca-dagua--alto::before { bottom: auto; top: -12%; right: -6%; }
.marca-dagua > .container { position: relative; }

/* respiro do topo no celular: o hero começava colado no cabeçalho */
@media (max-width: 600px) {
  .hero--tipografico { padding-top: 2.5rem; }
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3rem); }
  /* 18/09/2026: esta linha gravava padding-block com valor literal, e por vir
     depois da regra .secao da seção 5 (mesma especificidade) descartava o
     --secao inteiro abaixo de 601px. Todo aperto de respiro que se fizesse pelo
     token — inclusive o que ela pediu nos vídeos — morria no celular, que é
     onde a maior parte das pessoas vai ler. Agora o valor mora no token, que
     cada página ainda pode apertar mais. */
  :root { --secao: clamp(2.75rem, 9vw, 3.5rem); }
}

/* cabeça do pilar: numeral à esquerda, fio, ícone à direita — uma linha só,
   nos dois tamanhos de tela. Antes empilhava três coisas antes do título. */
.pilar__cabeca { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.pilar__fio { flex: 1; height: 1px; background: var(--linha); }
.pilar__cabeca .pilar__icone { margin: 0; width: 2.1rem; height: 2.1rem; }

/* ==========================================================================
   16. HANDOFF DE DESIGN (06/09/2026)
   Hero com campo de captura, barra de controles, WhatsApp flutuante, entradas
   sutis, equipe em pranchas, faixa em banda. Tokens e classes de sempre.
   ========================================================================== */

/* 16.1 Entradas sutis. Só com html.js (posto pelo script do <head>): sem JS nada
   fica oculto. Com movimento reduzido, tudo aparece. --i escalona irmãos (máx. 3). */
.js .revelar { opacity: 0; transform: translateY(8px); transition: opacity .7s cubic-bezier(.2, .6, .2, 1), transform .7s cubic-bezier(.2, .6, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
.js .revelar.revelar--visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .revelar { opacity: 1; transform: none; transition: none; } }

/* 16.2 Hero com campo: textura de pele (catálogo) como abstração, grade dourada de
   44 px, véu que dissolve tudo no papel antes do texto, retículo de 96 px.
   Celular: campo no canto superior direito, sem moldura, texto no terço inferior.
   Desktop: o campo vira prancha 4:5 com a moldura dupla do site e legenda. */
.hero--campo { min-height: calc(100svh - var(--cabecalho-altura)); display: grid; align-content: end; padding-block: 2rem 3rem; }
.hero--campo .hero__texto { position: relative; z-index: 1; }
.hero--campo .hero__campo { display: none; }
.hero__prancha { position: absolute; z-index: 0; right: -2.5rem; top: 1.5rem; width: 380px; max-width: 100%; height: 400px; margin: 0; pointer-events: none; }
.hero__prancha .moldura { padding: 0; border: 0; height: 100%; background: none; }
.hero__prancha .moldura::after { display: none; }
.hero__prancha .legenda { display: none; }
.hero__campo2 { position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-mask-image: radial-gradient(60% 55% at 62% 45%, #000 20%, transparent 100%); mask-image: radial-gradient(60% 55% at 62% 45%, #000 20%, transparent 100%); }
.hero__campo2 > * { position: absolute; inset: 0; }
.hero__campo2 picture { display: block; }
.hero__textura { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.45) sepia(.18) contrast(1.08); opacity: .62; }

.hero__linhas { background-image: linear-gradient(to right, color-mix(in srgb, var(--dourado) 28%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--dourado) 28%, transparent) 1px, transparent 1px); background-size: 44px 44px; }
/* A linha de varredura, no pedido dela (audio de 09/09, 17h11): "tem uma linha
   que desce e que sobe, como se ele estivesse fazendo a analise ali". Antes ela
   so descia e reiniciava do topo; com alternate ela desce e volta. O halo curto
   abaixo do fio existe para a passagem se ler sobre a foto, e nao so sobre o
   quadriculado de antes. */
.hero__varredura {
  inset: 0 0 auto; height: 100%;
  border-top: 1px solid var(--dourado);
  opacity: .35;
  /* alternate por causa do audio dela: "uma linha que desce e que sobe". Antes
     ela so descia e reiniciava do topo. O resto e o desenho original, que ela
     disse ter achado "bem legal". */
  animation: varredura 9s ease-in-out infinite alternate;
}
@keyframes varredura { from { transform: translateY(0); } to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .hero__varredura { display: none; } }
.reticulo { inset: auto; left: 188px; top: 132px; width: 96px; height: 96px; }
.reticulo i { position: absolute; width: 14px; height: 14px; border: 0 solid var(--dourado); }
.reticulo i:nth-child(1) { left: 0; top: 0; border-top-width: 1px; border-left-width: 1px; }
.reticulo i:nth-child(2) { right: 0; top: 0; border-top-width: 1px; border-right-width: 1px; }
.reticulo i:nth-child(3) { left: 0; bottom: 0; border-bottom-width: 1px; border-left-width: 1px; }
.reticulo i:nth-child(4) { right: 0; bottom: 0; border-bottom-width: 1px; border-right-width: 1px; }
.legenda__fig { font-family: var(--fonte-rotulo); font-size: .64rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--dourado-texto); margin-right: .6em; }
@media (min-width: 901px) {
  .hero--campo { min-height: min(calc(100svh - var(--cabecalho-altura)), 760px); align-content: center; padding-block: clamp(3rem, 6vw, 5rem); }
  /* "O ESPACO VAZIO FICOU GRANDE": o texto se centralizava verticalmente contra
     a coluna da imagem, que e mais alta, e por isso descia ~114px. Comecando as
     duas colunas no topo, o vao passa a ser so o padding do hero. */
  .hero__grade2 { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .hero--campo .hero__texto { max-width: 36rem; }
  .hero__prancha { position: relative; inset: auto; width: 100%; max-width: 480px; height: auto; justify-self: end; pointer-events: auto; animation: entrada 900ms 200ms cubic-bezier(.2, .7, .2, 1) both; }
  .hero__prancha .moldura { padding: .5rem; border: 1px solid rgba(156, 124, 51, .55); height: auto; }
  .hero__prancha .moldura::after { display: block; }
  .hero__prancha .legenda { display: block; }
  .hero__prancha .moldura { background: var(--areia-clara); }
  .hero__campo2 { aspect-ratio: 4 / 5; height: auto; -webkit-mask-image: radial-gradient(75% 65% at 55% 45%, #000 25%, transparent 100%); mask-image: radial-gradient(75% 65% at 55% 45%, #000 25%, transparent 100%); }
  .reticulo { left: calc(50% - 36px); top: calc(50% - 88px); }
}
@media (max-width: 900px) { .hero--campo .hero__texto > * { animation: none; } .hero--campo .hero__texto { animation: entrada 700ms cubic-bezier(.2, .7, .2, 1) both; } }

/* 16.3 Barra de controles do cabeçalho: uma moldura só, células de 44 px com
   hairline entre elas. Celular: PT + seta abre a lista; tema; menu. Desktop: PT | EN | ES | tema. */
.barra-controles { display: flex; height: 44px; border: 1px solid color-mix(in srgb, var(--dourado) 55%, transparent); }
.barra-controles > * + * { border-left: 1px solid color-mix(in srgb, var(--dourado) 55%, transparent); }
.barra-controles button { min-width: 44px; height: 100%; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: none; border: 0; border-radius: 0; color: var(--tinta-media); cursor: pointer; font-family: var(--fonte-rotulo); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1; transition: color .18s ease, background-color .18s ease; }
.barra-controles button:hover { color: var(--tinta); }
.barra-controles button:focus-visible { outline-offset: -3px; }
.barra-controles .idiomas { position: relative; display: flex; height: 100%; border: 0; border-radius: 0; padding: 0; background: none; }
.barra-controles .idiomas__opcao { border-radius: 0; padding: 0 14px; font-size: .68rem; color: var(--tinta-media); }
.barra-controles .idiomas__opcao[aria-pressed="true"] { color: var(--tinta); background: var(--areia-clara); }
.barra-controles .idiomas__atual { color: var(--tinta); }
.barra-controles .idiomas__atual svg { width: 8px; height: 8px; }
.barra-controles .idiomas__lista { display: flex; height: 100%; }
.barra-controles .idiomas__lista > * + * { border-left: 1px solid color-mix(in srgb, var(--dourado) 55%, transparent); }
.barra-controles .menu-botao { width: 44px; padding: 0; border: 0; gap: 0; color: var(--tinta); }
.barra-controles .menu-botao__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 901px) { .barra-controles .idiomas__atual, .barra-controles .menu-botao { display: none; } }
@media (max-width: 900px) {
  .cabecalho__acoes .barra-controles { display: flex; }
  .barra-controles .idiomas__lista { display: none; position: absolute; right: -1px; top: calc(100% + 1px); min-width: calc(100% + 2px); height: auto; background: var(--areia-fundo); border: 1px solid color-mix(in srgb, var(--dourado) 55%, transparent); z-index: 5; }
  .barra-controles .idiomas__lista--aberta { display: grid; }
  .barra-controles .idiomas__lista > * + * { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--dourado) 28%, transparent); }
  .barra-controles .idiomas__lista button { width: 100%; min-height: 44px; justify-content: flex-start; }
  .cabecalho__whats { display: none; }
  .marca__logo { height: 2.4rem; }
}

/* 16.4 WhatsApp flutuante na paleta: papel, glifo em tinta, filete dourado e anel de
   papel no lugar de sombra. Aparece quando o hero (ou a abertura) sai da tela. */
.zap-flutuante { position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 56px; height: 56px; padding: 0; border-radius: 28px; background: var(--areia-fundo); color: var(--tinta); border: 1px solid var(--dourado); outline: 4px solid var(--areia-fundo); text-decoration: none; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s, color .18s ease; }
.zap-flutuante--ativo { opacity: 1; visibility: visible; transition-delay: 0s; }
.zap-flutuante:hover { color: var(--dourado-texto); }
.zap-flutuante:focus-visible { outline: 4px solid var(--areia-fundo); box-shadow: 0 0 0 6px var(--dourado); }
.zap-flutuante svg { width: 26px; height: 26px; fill: currentColor; }
.zap-flutuante span { display: none; }
@media (min-width: 901px) { .zap-flutuante { padding: 0 20px 0 16px; } .zap-flutuante span { display: inline; font-family: var(--fonte-rotulo); font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; } }
@media (prefers-reduced-motion: reduce) { .zap-flutuante { transition: none; } }
body.menu-aberto .zap-flutuante { opacity: 0; visibility: hidden; }

/* 16.6 Faixa "Olhe. Analise. Descubra." como banda: no tema claro a tinta vira fundo,
   a terceira "cor" entre o papel e o papel tingido. No tema escuro a faixa já é a
   superfície mais escura da página e fica como está. */
.faixa.secao--escura { background: var(--tinta); color: var(--areia-clara); border-color: transparent; }
.faixa.secao--escura .faixa__titulo { color: var(--areia-clara); }
.faixa.secao--escura .faixa__sub { color: var(--areia-media); }


/* 16.8 Hifenização onde a língua permite (depende do lang do <html>) */
:lang(pt-BR) p, :lang(es) p { hyphens: auto; -webkit-hyphens: auto; }


/* ==========================================================================
   17. PRIMEIRO FEEDBACK DA LUCIANA — 08/09/2026
   Tudo que veio no documento CORREÇÕES SITE e nos áudios do WhatsApp.
   ========================================================================== */

/* 17.1 A cor da palavra DERMATECH no logotipo, amostrada do próprio arquivo da
   marca (#925900). Sobre o bege da página dá 4,7:1 de contraste, o que passa em
   AA até para texto pequeno. No tema escuro esse âmbar some no fundo, então lá
   quem entra é o dourado claro, que dá 8,5:1. */
:root { --dourado-logotipo: #925900; }

/* 17.2 Título do hero: caixa alta, na cor do logotipo, sem ponto final.
   Caixa alta ocupa mais espaço por letra, então a medida abre de 14ch para 21ch
   e o corpo recua um pouco — senão a frase vira quatro linhas no notebook. */
.titulo--marca {
  color: var(--dourado-logotipo);
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: 1.06;
  text-wrap: balance;   /* evita a ultima linha com uma palavra so */
}
.hero--tipografico h1.titulo--marca { max-width: 21ch; font-size: var(--t-hero); }
/* sem regra separada de celular: o --t-hero cobre a faixa inteira, senao o
   titulo encolhe quando a tela cresce e a Sobre diverge da Home no celular */

/* 17.3 Faixa "OLHE ANALISE DESCUBRA" (revisto em 09/09): as palavras em dourado,
   sem os pontos, como ela pediu. Só tirar os pontos deixava as três palavras
   soltas e quebrando em duas linhas tortas, então entra como separador o mesmo
   losango do filete ornamental — o traço que ela elogiou no áudio.
   No computador as três ficam em uma linha; no celular, uma por linha, com o
   losango entre elas. */
.faixa__titulo--dourado {
  --faixa-gap: clamp(.65rem, 2.4vw, 2.2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--faixa-gap);
  word-spacing: normal;
  letter-spacing: .14em;
  font-size: clamp(1.9rem, 1rem + 3.4vw, 4.2rem);
  line-height: 1.05;
}
.faixa__titulo--dourado span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--faixa-gap);
  color: var(--dourado-claro);
}
.faixa.secao--escura .faixa__titulo--dourado span { color: var(--dourado-claro); }
.faixa__titulo--dourado span + span::before {
  content: "";
  flex: none;
  width: .3em; height: .3em;
  transform: rotate(45deg);
  border: 1px solid color-mix(in srgb, var(--dourado-claro) 70%, transparent);
}
@media (min-width: 760px) {
  .faixa__titulo--dourado,
  .faixa__titulo--dourado span { flex-direction: row; align-items: center; }
  .faixa__titulo--dourado { flex-wrap: wrap; justify-content: center; }
}
/* empilhada no celular, a frase termina perto demais da linha de baixo */
.faixa__titulo--dourado + .faixa__sub { margin-top: clamp(1.4rem, 4vw, 1.75rem); }

/* 17.4 Bloco de texto centrado, para a seção que passou a ter a arte em cima da
   largura toda em vez de imagem ao lado. */
.prosa--centro { max-width: 62ch; margin-inline: auto; text-align: center; }
.prosa--centro .rotulo { justify-content: center; }

/* 17.5 A arte de espectros que a cliente enviou é panorâmica (quase 3:1). Ela
   ocupa a largura do texto e um pouco mais, para os rótulos pequenos da
   ilustração continuarem legíveis. */
.arte-espectros { margin: clamp(2.5rem, 5vw, 4rem) auto 0; max-width: 1100px; }
.arte-espectros .moldura__imagem { background: var(--superficie-imagem); }
.arte-espectros img { display: block; width: 100%; height: auto; }
.arte-espectros .legenda { margin-top: 1rem; text-align: center; }

/* 17.6 A régua ganhou um sexto passo. Em telas largas continuam os seis numa
   linha; entre 900px e 1200px vira 3 + 3, e aí a linha dourada contínua sai,
   porque ela só faz sentido numa fileira única. */
.regua--seis { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
.regua--seis .regua__nome { font-size: 1.35rem; }
.regua--seis .regua__texto { max-width: 24ch; }
@media (max-width: 1200px) and (min-width: 901px) {
  .regua--seis { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; }
  .regua--seis::before { display: none; }
}
@media (max-width: 900px) { .regua--seis { grid-template-columns: minmax(0, 1fr); } }

/* 17.7 Contato do rodapé: o telefone geral e o comercial em blocos rotulados,
   no lugar da linha única com o número da Luciana. */
.rodape__contato-bloco { display: grid; gap: .2rem; }
.rodape__contato-rotulo {
  font-family: var(--fonte-rotulo);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dourado-texto);
}
.rodape__pendente { color: var(--tinta-suave); font-style: italic; }

/* 17.8 A arte de espectros e panoramica: em 375px de largura os rotulos dela
   ficariam ilegiveis. No celular a ilustracao mantem um tamanho minimo e desliza
   na horizontal dentro da propria moldura, como uma prancha. */
@media (max-width: 760px) {
  /* a moldura e item de grid: sem min-width 0 ela cresce junto com a imagem
     e quem rola passa a ser a pagina inteira, nao a prancha */
  .arte-espectros .moldura { min-width: 0; max-width: 100%; }
  .arte-espectros .moldura__imagem { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .arte-espectros img { min-width: 620px; }
  .arte-espectros .moldura__imagem::-webkit-scrollbar { height: 4px; }
  .arte-espectros .moldura__imagem::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--dourado) 45%, transparent); }
}

/* 17.9 Redes sociais no rodape. Chegaram na ficha de implantacao de 09/09/2026.
   Ficam na coluna da marca, logo abaixo da linha de posicionamento: e onde o
   olho procura, e a coluna de contato ja esta cheia. O icone e monocromatico
   para nao brigar com o dourado; a cor de marca de cada rede entraria em choque
   com a paleta bege que ela escolheu. */
.rodape__redes { display: flex; gap: .75rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.rodape__redes a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--linha);
  border-radius: 50%;
  color: var(--tinta-media);
  transition: color var(--transicao), border-color var(--transicao);
}
.rodape__redes a:hover, .rodape__redes a:focus-visible { color: var(--dourado-texto); border-color: var(--dourado); }
.rodape__redes svg { width: 1.05rem; height: 1.05rem; }

/* 17.10 Faixa legal: razao social, CNPJ, endereco e responsavel tecnica.
   Nao herda o caixa-alta da .rodape__linha — endereco em versalete nao se le. */
.rodape__legal {
  border-top: 1px solid var(--linha-suave);
  padding-top: 1.25rem;
  display: grid;
  gap: .35rem;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}
.rodape__legal p { margin: 0; }
.rodape__legal + .rodape__linha { border-top: 0; padding-top: 1rem; }

/* 17.11 Agenda de feiras. Um item por evento, com o filete dourado a esquerda:
   e o mesmo vocabulario do resto da pagina (filete, rotulo em caixa alta,
   numeral), que foi o que ela elogiou no primeiro retorno. */
.agenda { margin-top: 1.75rem; display: grid; gap: 1.1rem; padding: 0; list-style: none; }
.agenda li { display: grid; gap: .2rem; padding-left: 1.15rem; border-left: 1px solid var(--dourado); }
.agenda__quando {
  font-family: var(--fonte-rotulo);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dourado-texto);
}
.agenda__nome { color: var(--tinta); }
.agenda__onde { font-size: .9rem; color: var(--tinta-suave); }

/* 17.12 Pagina Sobre, revisao de 09/09/2026 (CORRECOES SITE3).
   Ela pediu, na abertura: titulo menor "do mesmo tamanho da pagina 1" e texto de
   apoio "no mesmo tamanho padrao dos textos da pagina 1". As duas medidas passaram
   a sair das mesmas variaveis do topo da Home, entao os dois titulos batem em
   qualquer largura. Leitura adotada do segundo pedido: "o texto da pagina 1" e o
   lead do topo dela, que ocupa o lugar equivalente — nao o corpo de 16 px do miolo.
   Se ela quiser o corpo, e trocar --t-lead por --t-corpo na regra abaixo. */
/* "DIMINUIR O TAMANHO DO TITULO DEIXANDO DO MESMO TAMANHO DA PAGINA 1" e
   "ALTERAR O TEXTO E DEIXAR NO MESMO TAMANHO PADRAO DOS TEXTOS DA PAGINA 1":
   o mesmo --t-hero do topo da Home, e o apoio no tamanho do lead do topo dela. */
/* Equipamentos e Privacidade abrem sem --sobre, entao o paragrafo de apoio
   nascia colado no h1, em corpo de 16px e tinta cheia, enquanto nas outras
   seis paginas ele fica 24px abaixo, no tamanho do lead e em marrom medio. */
.abertura__apoio { margin-top: 1.5rem; font-size: var(--t-lead); line-height: 1.7; color: var(--tinta-media); }

.abertura--sobre h1 { font-size: var(--t-hero); text-wrap: balance; }
.abertura--sobre .abertura__apoio { margin-top: 1.5rem; font-size: var(--t-lead); line-height: 1.7; color: var(--tinta-media); }

/* "o titulo e o texto na mesma altura da foto": a .grade--2 centraliza as duas
   colunas uma em relacao a outra, e por isso a foto subia acima do titulo. Aqui
   elas se alinham pelo topo. */
.grade--topo { align-items: start; }

/* "justificar o texto" */
.prosa--justificada p { text-align: justify; text-align-last: left; hyphens: auto; }
/* prosa centralizada por bloco, mas com o texto justificado dentro da medida */
.prosa--medida { max-width: var(--medida); margin-inline: auto; }

/* "diminuir o escrito abaixo da foto" */
.legenda--miuda { font-size: .78rem; }

/* o filete divisor solto entre duas secoes precisa de ar em volta */
.container > .filete--ornamento { margin-block: clamp(2rem, 5vw, 3.5rem); }

/* =============================================================================
   17.13 Correcoes da Home — CORRECOES SITE2, 09/09/2026
   ========================================================================== */

/* --- A logo espremida ("a logo juntou rsrs") ------------------------------
   .marca era item de flex com flex-shrink: 1, e o <img> herda max-width: 100%
   do reset. Entre 900 e 1200 px a barra ficava apertada, a caixa da marca
   encolhia e a imagem era achatada junto: a 1000 px a logo media 42 px em vez
   de 187. Abaixo de 950 px sumia. Agora ela nao encolhe nunca; quem cede
   espaco e a navegacao. */
.cabecalho .marca { flex: none; }
.cabecalho .marca__logo { max-width: none; }

/* --- WhatsApp menor e PT/EN/ES discreto, como ela pediu -------------------
   De quebra, e o que libera a largura que a logo passou a exigir. */
.cabecalho__whats { min-height: 2.3rem; padding: .55em 1.05em; font-size: .63rem; }
/* o rotulo do botao e minusculo de proposito, mas o glifo nao pode encolher
   junto: em em ele ficava com 9,5px e virava um borrao. Tamanho proprio. */
.cabecalho__whats .botao__icone { width: 1rem; height: 1rem; }
.cabecalho .idiomas {
  border-color: transparent;
  background: none;
  padding: 0;
}
.cabecalho .idiomas__opcao { font-size: .6rem; padding: .3rem .42rem; letter-spacing: .1em; }
.cabecalho .idiomas__opcao[aria-pressed="true"] {
  background: none;
  color: var(--dourado-texto);
  text-decoration: underline;
  text-underline-offset: .35em;
  text-decoration-thickness: 1px;
}

/* entre o menu de celular (900) e a folga confortavel (1320) a barra precisa
   de uma navegacao mais compacta para caber com a logo inteira. O limite de cima
   foi medido: com a logo em 187px, os seis itens de menu, o botao e os tres
   idiomas, a linha so passa a sobrar espaco a partir de 1320px. */
@media (min-width: 901px) and (max-width: 1320px) {
  .cabecalho__interno { gap: 1.25rem; }
  /* Ela pediu "DIMINUIR O TAMANHO DO WHATSAPP" e "O PT EN E ES DEIXAR BEM
     PEQUENO E SUTIL" — diminuir, nao tirar. Nesta faixa a logo inteira, os seis
     itens de menu, o botao e os tres idiomas nao cabem na mesma linha, entao o
     botao fica so com o icone: encolhe o bastante e continua clicavel no lugar. */
  .cabecalho__whats span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cabecalho__whats { padding: 0; width: 2.3rem; min-height: 2.3rem; justify-content: center; }
  .navegacao ul { gap: clamp(.6rem, 1.1vw, 1rem); }
  .navegacao a { font-size: .63rem; letter-spacing: .05em; }
  .cabecalho .marca__logo { height: 2.3rem; }
  .cabecalho .idiomas__opcao { padding: .3rem .32rem; font-size: .56rem; }
}

/* --- Sem palavra quebrada com hifen, em todo o site -----------------------
   Pedido dela: "EM VARIAS PARTES DO SITE TEM ISSO. CORRIGIR EM TODAS ELAS".
   A regra antiga ligava hyphens: auto em portugues e espanhol. */
:lang(pt-BR) p, :lang(es) p, :lang(en) p { hyphens: none; -webkit-hyphens: none; }
.prosa--justificada p { hyphens: none; -webkit-hyphens: none; }

/* --- Rotulo com o risquinho do lado direito -------------------------------
   Ela pediu isso no topo da Home e na "Analise por imagem". Diferente do
   .rotulo--centro, que poe um traco de cada lado: aqui e so o da direita. */
.rotulo--fim::before { display: none; }
.rotulo--fim::after { content: ""; width: 2rem; height: 1px; background: var(--dourado); flex: none; }

/* --- Topo da Home --------------------------------------------------------- */
/* "o espaco vazio ficou grande": o hero abria com padding de ate 8rem sobre um
   cabecalho de 5rem. E o titulo precisa de mais ar em relacao ao rotulo. */
.hero--campo { padding-block: clamp(2rem, 4.5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.hero__texto .rotulo { font-size: .78rem; }
/* so o afastamento: "DEIXAR O TITULO UM POUCO MAIS AFASTADO DA FRASE".
   O tamanho e o --t-hero, ja reduzido como ela pediu em "DIMINUIR UM POUCO A LETRA". */
.hero h1.titulo--marca { margin-top: 2.25rem; }
.hero .lead { margin-top: 1.75rem; text-align: justify; text-align-last: left; }

/* --- Pilares -------------------------------------------------------------- */
/* "diminuir este espaco um pouco", "centralizar a frase Da imagem a informacao",
   "justificar o texto do I II e III" */
.pilares-cabeca { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.pilar p { text-align: justify; text-align-last: left; }

/* --- "Cada estrutura revela algo diferente" -------------------------------
   "considerar o mesmo tamanho de letra para os 2 paragrafos, considerar a menor" */
.prosa--centro .lead.lead--corpo { font-size: var(--t-corpo); line-height: 1.7; }

/* "diminuir a letra" da legenda do diagrama, e a legenda do estande no mesmo
   tamanho dela */
.diagrama__legenda, .legenda--miuda { font-size: .74rem; }

/* --- Presenca em feiras ---------------------------------------------------
   "subir o texto para ficar na mesma altura que a imagem", "justificar o texto
   e centralizar o titulo" */
.grade--texto-imagem.grade--topo { align-items: start; }
.presenca__texto { text-align: center; }
.presenca__texto p { text-align: justify; text-align-last: left; }
.presenca__texto .agenda { text-align: left; }

/* --- Espacamento dos filetes divisores ------------------------------------
   "sempre quando for colocar o risco que divide manter o mesmo espacamento da
   escrita de baixo em todos os topicos da pagina". A referencia e o fecho da
   Home, que ela aprovou: filete, depois 1.5rem ate o rotulo. */
/* .filete--divisor sozinha (0-1-0) perdia para .container > .filete--ornamento
   (0-2-0) em quatro dos cinco filetes da Home. Com as duas classes no mesmo
   seletor a conta empata e, vindo depois, esta vence. O 4.75rem e a distancia
   medida no fecho "Fale com a Dermatech", que ela aprovou como modelo. */
/* O modelo (fecho da Home) e fluido: clamp(2rem,5vw,3.5rem) do filete mais
   1.25rem do .chamada p. Copiar 76px fixos so acertava acima de 1120px e no
   celular deixava o divisor com mais respiro que a propria secao. */
.filete--ornamento.filete--divisor { margin-bottom: calc(clamp(2rem, 5vw, 3.5rem) + 1.25rem); }
/* O vao que se ve nao e so a margem do filete: o bloco seguinte soma a margem
   do proprio titulo ou rotulo, que varia de secao para secao (8px aqui, 15px
   ali). Zerando essa primeira margem, o vao passa a ser exatamente o valor
   acima em todas elas — que e a conta do modelo: margem do filete + 1.25rem. */
.filete--ornamento.filete--divisor + * > :first-child,
.filete--ornamento.filete--divisor + :is(h1, h2, h3, p) { margin-top: 0; }
/* O rotulo e inline-flex; dentro de uma caixa de texto ele ganha a meia-entrelinha
   do pai (7px em .prosa, que tem line-height 1.8) e desce sozinho. Como bloco
   flex a entrelinha some e ele encosta na margem, como os titulos das outras. */
.filete--ornamento.filete--divisor + * > .rotulo:first-child { display: flex; }

/* ==========================================================================
   18. QUARTO RETORNO DA LUCIANA — 10/09/2026: CINZEL + MONTSERRAT
   Mensagem dela no WhatsApp (12h20): Cinzel para os nomes SKINVISION X5 PRO,
   LUMERA e TRICHOVISION, para os títulos principais das seções, frases de
   impacto e "eventualmente números ou pequenos destaques" — "aquele aspecto
   luxuoso, sofisticado e tecnológico". Montserrat para o resto: textos
   explicativos, perguntas e respostas, menus, botões, legendas, informações
   técnicas e chamadas secundárias — "mais limpa e muito mais confortável para
   leitura, principalmente no celular".

   Duas coisas que a Cinzel muda de verdade:
   1. Só tem caixa alta. As minúsculas saem em versalete (capitular maior, o
      resto em maiúsculas pequenas), então todo título passa a ler como caixa
      alta. Uma frase em Cinzel é uns 30% mais larga que a mesma frase em
      Cormorant no mesmo corpo: a escala dos títulos desce para a mancha ocupar
      o mesmo lugar, e a entrelinha sobe (maiúscula acentuada precisa de ar).
   2. Não tem itálico. O navegador inclinaria a letra à força, e fica feio.
      Tudo que era display em itálico (citação, subtítulo da faixa, categoria do
      equipamento, frase do rodapé) muda de fonte ou perde o itálico aqui.
   ========================================================================== */
:root {
  /* escala dos títulos refeita para a Cinzel; os valores antigos estão na seção 1 */
  --t-display: clamp(1.9rem, 1.3rem + 2vw, 3.1rem);
  --t-h1:      clamp(1.8rem, 1.35rem + 1.9vw, 3rem);
  --t-h2:      clamp(1.45rem, 1.1rem + 1.25vw, 2.25rem);
  --t-h3:      clamp(1.05rem, .95rem + .45vw, 1.35rem);
  --t-h4:      1rem;
  /* título do topo das seis páginas de conteúdo (Home via .titulo--marca, as demais
     via .abertura h1, a 404 via .cabeca-secao h1, abaixo): 36px em 1280 (era 46) */
  --t-hero:    clamp(1.4rem, .92rem + 1.65vw, 2.4rem);
}
h1, h2, h3, h4, .display { font-weight: 400; line-height: 1.2; letter-spacing: .035em; }
h1, .display { letter-spacing: .04em; }
h3, h4 { font-weight: 500; letter-spacing: .05em; }
/* caixa alta forçada pede ainda mais ar entre as letras; a medida em ch acompanha a fonte */
.titulo--marca { letter-spacing: .07em; line-height: 1.18; }
.hero--tipografico h1.titulo--marca { max-width: 24ch; }
/* Ela pediu o título da Sobre "do mesmo tamanho da página 1". Com a Cinzel, o título
   padrão de abertura (--t-h1, 46px em 1280) ficava 10px maior que o da Home e o da
   Sobre; agora toda abertura de página usa a mesma medida do topo da Home. */
.abertura h1 { font-size: var(--t-hero); }

/* faixa OLHE ANALISE DESCUBRA: a Cinzel 600 é pesada demais em corpo grande, e
   a frase em caixa alta com o espaçamento antigo não cabia numa linha de 1240px */
.faixa__titulo { font-weight: 500; }
/* A frase mede 27,7 vezes o corpo (medido em 1280: 1169px com 42,24px). A reta abaixo
   foi ajustada para caber na largura útil do container em toda a faixa em que as três
   palavras ficam numa linha (a partir de 760px): 25px em 760, 33px em 1024, 40px em
   1280 e 44px de 1440 em diante, sempre uns 15px abaixo do limite. */
.faixa__titulo--dourado { font-size: clamp(1.45rem, .24rem + 2.8vw, 2.75rem); letter-spacing: .12em; line-height: 1.15; }
@media (max-width: 600px) { .faixa__titulo--dourado { letter-spacing: .08em; } }
/* o subtítulo da faixa era Cormorant itálico: vira Montserrat leve, "chamada secundária" */
.faixa__sub { font-family: var(--fonte-corpo); font-style: normal; font-weight: 300; font-size: clamp(.95rem, .85rem + .5vw, 1.25rem); letter-spacing: .04em; line-height: 1.5; }

/* numerais romanos, números da régua, nomes de passo e de pessoa: é o "números
   ou pequenos destaques" dela. Só o corpo desce, porque o desenho é mais largo. */
.numeral { font-size: clamp(2rem, 1.6rem + 1.4vw, 3rem); letter-spacing: .04em; }
.numeral--grande { font-size: clamp(3rem, 2.3rem + 3vw, 5.2rem); }
.beneficio .numeral { font-size: 1.8rem; }
.regua__numero { font-size: 1rem; font-weight: 500; }
.regua__nome, .regua--seis .regua__nome { font-size: 1rem; font-weight: 500; letter-spacing: .06em; }
.etapa__nome { font-size: 1rem; font-weight: 500; letter-spacing: .05em; }

/* nomes de produto: em caixa alta, como ela os escreveu na mensagem */
.equipamento__nome { font-size: clamp(1.65rem, 1.25rem + 1.5vw, 2.7rem); text-transform: uppercase; letter-spacing: .08em; line-height: 1.15; }
/* a categoria (era display itálico) e a abertura escrita pela cliente (era display)
   são texto explicativo: Montserrat. A abertura precisa do seletor composto porque
   `.equipamento__texto p` (seção 9) vence `.equipamento__abertura` e igualava o corpo ao
   dos parágrafos técnicos; enquanto era serifada a diferença de fonte disfarçava isso.
   Em Montserrat ela some, então o corpo maior (--t-lead) e a cor média voltam aqui. */
.equipamento__categoria { font-family: var(--fonte-corpo); font-style: normal; font-size: 1.05rem; line-height: 1.6; }
.equipamento__texto .equipamento__abertura { font-family: var(--fonte-corpo); font-size: var(--t-lead); line-height: 1.55; color: var(--tinta-media); }

/* títulos com tamanho próprio, todos reescalados na mesma proporção */
.pilar h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); }
.beneficio h3 { font-size: 1.15rem; }
.faixa-destaque h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem); }
.chamada h2 { font-size: clamp(1.45rem, 1.1rem + 1.25vw, 2.25rem); }
.passo__texto h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.55rem); }
/* a 404 não tem .abertura: o h1 dela fica em .cabeca-secao (único h1 do site nessa
   posição) e entra na mesma medida das outras páginas. .pagina-simples só existe no
   site antigo da raiz; a regra fica como reserva. */
.cabeca-secao h1, .pagina-simples h1 { font-size: var(--t-hero); }

/* perguntas e respostas, informações técnicas, menu do celular e citação:
   Montserrat, como na lista dela */
.faq__item > summary { font-family: var(--fonte-corpo); font-size: 1rem; font-weight: 500; line-height: 1.45; }
.canal__valor { font-family: var(--fonte-corpo); font-size: 1.05rem; font-weight: 500; line-height: 1.4; }
.ficha > summary::after { font-family: var(--fonte-corpo); font-weight: 300; }
.citacao p { font-family: var(--fonte-corpo); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); font-weight: 400; font-style: italic; line-height: 1.6; }
@media (max-width: 900px) {
  .navegacao a { font-family: var(--fonte-rotulo); font-size: 1.1rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: .85rem 0; }
}
/* a frase do rodapé é frase de impacto: Cinzel, sem o itálico que a fonte não tem */
.rodape__frase { font-style: normal; font-size: .9rem; letter-spacing: .05em; line-height: 1.6; max-width: 26em; }

/* 18.1 Página Tecnologia (CORREÇÕES SITE4): as seis ilustrações dela são
   panorâmicas (2,4:1) e entram como a arte de espectros da Home — largura do
   texto e um pouco mais, moldura dourada, legenda centrada; no celular deslizam
   na horizontal dentro da moldura, como uma prancha, para não virarem uma tira
   de 150px de altura. Mesmas regras de 17.5 e 17.8, com nome genérico. */
.arte-panoramica { margin: clamp(2.5rem, 5vw, 4rem) auto 0; max-width: 1100px; }
.arte-panoramica .moldura__imagem { background: var(--superficie-imagem); }
.arte-panoramica img { display: block; width: 100%; height: auto; }
.arte-panoramica .legenda { margin-top: 1rem; text-align: center; }
@media (max-width: 760px) {
  .arte-panoramica .moldura { min-width: 0; max-width: 100%; }
  .arte-panoramica .moldura__imagem { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .arte-panoramica img { min-width: 620px; }
  .arte-panoramica .moldura__imagem::-webkit-scrollbar { height: 4px; }
  .arte-panoramica .moldura__imagem::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--dourado) 45%, transparent); }
}

/* ==========================================================================
   19. QUARTO RETORNO DA LUCIANA — 11/09/2026: UMA PAGINA POR EQUIPAMENTO

   Audio dela de 10/09 as 21h43, dois pedidos de estrutura:
   - submenu com os tres nomes ao chegar com o mouse em Equipamentos;
   - uma pagina para cada equipamento, porque "se a gente colocar os equipamentos
     numa tela so, vai ficar muito confuso".

   Entram aqui: o submenu, o carrossel das fontes de luz (ela pediu tres por vez),
   a grade de indicadores, os cartoes de relatorio, os recursos, o fecho em duas
   linhas e as tres portas da pagina de Equipamentos. Tudo com o vocabulario que
   ela ja aprovou: filete com losango, moldura dourada, rotulo em caixa alta,
   Cinzel no titulo, dourado so como detalhe.
   ========================================================================== */

/* -------------------------------------------------------------- 19.1 submenu */
.navegacao__grupo { position: relative; display: flex; align-items: center; gap: .3rem; }

.navegacao__seta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; padding: 0;
  border: 0; background: none; color: inherit; cursor: pointer;
  font-size: .75rem; line-height: 1;
  transition: transform var(--transicao), color var(--transicao);
}
.navegacao__seta:hover { color: var(--dourado-texto); }
.navegacao__seta[aria-expanded="true"] { transform: rotate(180deg); }
/* No computador o submenu abre no hover, mas a faixa 901-1320px inclui o tablet
   em paisagem (1024px), onde hover nao existe e esta seta e o unico jeito de
   abrir a lista dos tres equipamentos. 28x28 e alvo de dedo pequeno demais. */
@media (min-width: 901px) and (max-width: 1320px) and (pointer: coarse) {
  .navegacao__seta { width: 2.75rem; height: 2.75rem; margin-inline: -.5rem; }
}

.submenu {
  position: absolute; top: 100%; left: -1rem; z-index: 90;
  min-width: 15rem; margin: 0; padding: .45rem 0;
  list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-.35rem);
  background: var(--areia-clara);
  border: 1px solid var(--linha);
  box-shadow: 0 14px 34px rgba(40, 34, 27, .10);
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
/* no computador abre ao passar o mouse, como ela descreveu; pelo teclado abre no foco */
.navegacao__grupo:hover .submenu,
.navegacao__grupo:focus-within .submenu,
.submenu--aberto { opacity: 1; visibility: visible; transform: translateY(0); }

.submenu li { margin: 0; }
.submenu a {
  display: block; padding: .6rem 1.1rem;
  font-family: var(--fonte-corpo); font-size: .92rem; font-weight: 500;
  letter-spacing: .03em; text-transform: none; white-space: nowrap;
  text-decoration: none; color: var(--tinta-media);
  transition: background var(--transicao), color var(--transicao);
}
/* .navegacao ul (0,1,1) ganha de .submenu (0,1,0) e devolveria display:flex,
   deitando os tres nomes lado a lado. Por isso o display do submenu vem sempre
   com .navegacao na frente, aqui e no bloco do celular. */
.navegacao .submenu { display: block; }
.submenu a::after { display: none; }
.submenu a:hover,
.submenu a:focus-visible { background: var(--areia-media); color: var(--dourado-texto); }

@media (max-width: 900px) {
  /* no toque nao existe passar o mouse: a seta abre a lista dentro do menu inteiro,
     e o link Equipamentos continua levando para a porta de entrada */
  .navegacao__grupo { flex-wrap: wrap; width: 100%; }
  .navegacao__seta { width: 3rem; height: 3rem; font-size: 1.2rem; }
  .submenu {
    position: static;
    width: 100%; min-width: 0; padding: 0 0 .9rem 1rem;
    opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; border-left: 1px solid var(--linha); box-shadow: none;
  }
  .navegacao .submenu,
  .navegacao .navegacao__grupo:hover .submenu,
  .navegacao .navegacao__grupo:focus-within .submenu { display: none; }
  .navegacao .submenu--aberto { display: block; }
  .submenu a { font-size: 1.1rem; padding: .65rem 0; white-space: normal; }
}

/* --------------------------------------------- 19.2 carrossel das fontes de luz */
.carrossel { position: relative; margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }

.carrossel__trilho {
  display: flex; gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  /* sem scroll-behavior: smooth aqui. No Chrome ele briga com o scroll-snap
     mandatory e cancela a rolagem das setas; quem pede o suave e o JS. */
  padding-bottom: .5rem;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--dourado) 45%, transparent) transparent;
}
.carrossel__trilho:focus-visible { outline: 2px solid var(--dourado); outline-offset: 6px; }
.carrossel__trilho::-webkit-scrollbar { height: 4px; }
.carrossel__trilho::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--dourado) 45%, transparent); }

/* tres por vez no computador, como ela pediu */
/* Tres por vez: e pedido dela, do retorno 5 ("carrossel tres por vez no
   computador"), e o conferir-pedidos.mjs vigia isso. Cheguei a testar quatro
   porque o material espectral do catalogo e pequeno (330 px no Lumera, 168 no
   SkinVision) e o quadro de tres passa de 380, mas o pedido dela vem antes. */
.carrossel__item {
  flex: 0 0 calc((100% - 2 * clamp(1rem, 2vw, 1.75rem)) / 3);
  scroll-snap-align: start;
}
.carrossel__quadro { margin-bottom: .9rem; }
.carrossel__quadro .moldura__imagem { aspect-ratio: 5 / 6; }
/* Retrato, nao mais a faixa 2/1. Em 21/09/2026 a Luciana pediu os rostos inteiros
   do catalogo nos dois carrosseis ("colocar os rostos completos que estao no
   catalogo"), e rosto nao cabe deitado: em 2/1 o cover cortava testa e queixo,
   que e justamente o que ela quer ver. 5/6 e a proporcao em que os 17 arquivos
   foram gerados, entao o cover nao corta nada. */
/* Desde 19/09/2026 os nove quadros dos dois carrosseis tem imagem: as regras da
   moldura vazia (--vazio, .carrossel__vazio, .quadro-ornamento, .quadro-numero)
   sairam junto. Se algum dia um quadro voltar a ficar sem foto, elas estao no
   commit "Retorno 10, item 3 e 5". */
.carrossel__nome {
  font-family: var(--fonte-display); font-size: 1rem; font-weight: 500;
  letter-spacing: .06em; line-height: 1.35; text-transform: uppercase;
  color: var(--dourado-texto);
}
.carrossel__texto { margin-top: .5rem; font-size: .93rem; line-height: 1.65; color: var(--tinta-media); }

.carrossel__controles { display: flex; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.carrossel__botao {
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--dourado); background: none; color: var(--dourado-texto);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.carrossel__botao:hover { background: var(--dourado); color: var(--areia-clara); }
.carrossel__botao[disabled] { opacity: .3; cursor: default; }
.carrossel__botao[disabled]:hover { background: none; color: var(--dourado-texto); }

.carrossel__ajuda { display: none; margin-top: .9rem; text-align: center; }

@media (max-width: 900px) { .carrossel__item { flex-basis: calc((100% - clamp(1rem, 2vw, 1.75rem)) / 2); } }
@media (max-width: 640px) {
  .carrossel__item { flex-basis: 82%; }
  .carrossel__controles { display: none; }   /* no toque o dedo arrasta */
  .carrossel__ajuda { display: block; }
}

/* ------------------------------------------------ 19.3 indicadores, selos, cartoes */
/* Nas telas dela cada indicador vem com um icone proprio. Esses icones nao vieram no
   material; desenhar oito novos seria inventar identidade. O losango do filete ja e o
   marcador da casa e mantem a pagina coerente com o resto do site. */
.grade-indicadores {
  display: grid; gap: .8rem clamp(1rem, 3vw, 2.5rem);
  margin: 1.5rem auto 0; max-width: 52rem; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.grade-indicadores__item { display: flex; align-items: center; gap: .6rem; }
.grade-indicadores__item::before {
  content: ""; flex: none; width: .4rem; height: .4rem;
  border: 1px solid var(--dourado); transform: rotate(45deg);
}
.grade-indicadores__nome { font-size: .97rem; letter-spacing: .01em; }

.grupos-indicadores {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.grupo-indicadores { padding-top: 1.1rem; border-top: 1px solid var(--linha); }
.grupo-indicadores__nome {
  font-family: var(--fonte-display); font-size: .98rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--dourado-texto);
}
.grupo-indicadores__itens { margin-top: .55rem; font-size: .93rem; line-height: 1.85; color: var(--tinta-media); }

.selos { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem .8rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.selo {
  padding: .4rem 1rem; border: 1px solid var(--linha);
  font-family: var(--fonte-rotulo); font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-media);
}

.cartoes {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.cartoes--quatro { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.cartao { padding-top: 1.1rem; border-top: 1px solid var(--dourado); }
.cartao__nome {
  font-family: var(--fonte-display); font-size: 1.02rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
}
.cartao__texto { margin-top: .5rem; font-size: .93rem; line-height: 1.65; color: var(--tinta-media); }

.recursos {
  display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.recurso { padding-top: 1.1rem; border-top: 1px solid var(--linha); }
.recurso__rotulo {
  font-family: var(--fonte-rotulo); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dourado-texto);
}
.recurso__nome {
  margin-top: .4rem; font-family: var(--fonte-display); font-size: 1.02rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
}
.recurso__texto { margin-top: .5rem; font-size: .93rem; line-height: 1.65; color: var(--tinta-media); }

.lista-inline { font-size: .97rem; line-height: 1.95; color: var(--tinta-media); }

/* o fecho que ela repete nos dois documentos: duas linhas, a segunda em dourado */
.fecho-duplo { text-align: center; }
.fecho-duplo__linha {
  margin: 0; font-family: var(--fonte-display); font-weight: 400;
  font-size: clamp(1.15rem, .95rem + .75vw, 1.65rem);
  letter-spacing: .12em; line-height: 1.5; text-transform: uppercase;
}
.fecho-duplo__linha--dourada { color: var(--dourado-texto); }

/* ------------------------------------------------------ 19.4 as tres portas */
.portas {
  display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); margin: 0; padding: 0; list-style: none;
  /* 15rem, nao 16: com 16rem (256px) o auto-fit so alcanca tres colunas a partir
     de ~940px de janela, entao 901-939 caia em 2+1 -- o mesmo buraco que o @media
     de baixo resolve abaixo de 901. Com 15rem as tres portas entram lado a lado
     logo no 901 (3x240 + 2x28 de vao = 776, dentro dos 820 do container). */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.porta__link { display: block; text-decoration: none; color: inherit; }
.porta__link::after { display: none; }
.porta__link .moldura { transition: transform var(--transicao); }
.porta__link:hover .moldura,
.porta__link:focus-visible .moldura { transform: translateY(-4px); }
/* 20/09/2026: 7:6, e nao mais quadrado. O print dela do cartao do Lumera veio com
   "Aqui cortou o lumera", e estava certo: o recorte quadrado comecava 143px abaixo do
   topo do capuz e terminava 297px antes da borda do tablet.

   A proporcao nao e escolha de gosto, e o que sobra entre dois limites medidos nos tres
   banners. Do lado esquerdo o limite e o logotipo dela, que encosta no equipamento:
   o "N" de SKINVISION vai ate x=815 e a cupula comeca em x=813; o "A" de LUMERA termina
   em x=948; o "N" de TRICHOVISION em x=775. Do lado direito e de baixo o limite e a borda
   da folha. Isso da, por equipamento, [1,28 maximo], [1,02 a 1,44] e [0,89 a 1,30] - e a
   intersecao dos tres e [1,02 ; 1,28]. 4:3 (1,333) fica de fora; 3:2 nem perto.
   7:6 = 1,1667 cai no meio e e o valor que deixa as margens mais parelhas.
   Regerar os arquivos: ferramentas/cartoes-porta-7x6.py */
.porta__link .moldura__imagem { aspect-ratio: 7 / 6; }
.porta__nome {
  margin-top: 1.1rem; font-family: var(--fonte-display); font-weight: 500;
  font-size: clamp(1.15rem, 1rem + .55vw, 1.5rem);
  letter-spacing: .06em; text-transform: uppercase;
}
.porta__texto { margin-top: .6rem; font-size: .95rem; line-height: 1.65; color: var(--tinta-media); }
/* 19/09/2026: abaixo de 901 nunca duas colunas. Sao exatamente tres portas, entao a
   faixa de duas colunas (587-895 px, que cobre todo iPad retrato: 768, 810, 820, 834)
   deixava a terceira sozinha com um vazio do tamanho de um cartao ao lado.
   21/09/2026: este @media estava ESCRITO DENTRO do bloco .porta__cta, e por isso
   nunca valeu -- o navegador lia .portas como descendente de .porta__cta, que nao
   existe. Medido antes da correcao: 768, 820, 834, 899 e 901 px todos em 2+1, com
   o buraco que o comentario acima diz ter resolvido ha dois dias. */
@media (max-width: 900px) {
  .portas { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .porta { width: 100%; max-width: 26rem; }
}
.porta__cta {
  display: inline-block; margin-top: .9rem;
  font-family: var(--fonte-rotulo); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dourado-texto);
}
.porta__link:hover .porta__cta,
.porta__link:focus-visible .porta__cta { text-decoration: underline; text-underline-offset: .35em; }

/* ------------------------------------------------------------ 19.5 miudezas */
.duas-colunas {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.botoes--centro { justify-content: center; }
.abertura__apoio--curto { max-width: 46rem; font-size: 1rem; color: var(--tinta-suave); }
.equipamento--pagina { padding-block: 0; }            /* a pagina inteira ja e o equipamento */
.pendente__titulo {
  margin: 0 0 .5rem; font-family: var(--fonte-rotulo); font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dourado-texto);
}
.campo__ajuda--privacidade { display: inline-block; margin-top: .6rem; text-decoration: underline; text-underline-offset: .3em; }

/* ---------------------------------------- 19.6 pranchas: a foto solta (11/09) */
/* Cada figura solta agora respeita a largura que o proprio sizes ja declarava, fica
   centrada, e nenhuma imagem aparece maior do que e. Ampliar um recorte de catalogo
   nao acrescenta detalhe nenhum: so borra o que ja estava la. */
.prancha { max-width: min(100%, var(--prancha, 40rem)); margin-inline: auto; }
.prancha .moldura__imagem { aspect-ratio: auto; }
.prancha .moldura__imagem img { width: 100%; height: auto; object-fit: contain; }
.prancha > figcaption { text-align: center; }

/* A leitura quantitativa do SkinVision e 1600x546 (2,93:1), a imagem mais alongada
   do site. Esticada em 390px de tela ela virava uma tira de 108px de altura, mais
   fina que o limite que o proprio CSS cita em 18.1. No celular desliza dentro da
   moldura, como a arte de espectros da Home e as faixas da Tecnologia. */
@media (max-width: 760px) {
  .prancha--deslizante .moldura { min-width: 0; max-width: 100%; }
  .prancha--deslizante .moldura__imagem { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .prancha--deslizante .moldura__imagem img { min-width: 620px; }
  .prancha--deslizante .moldura__imagem::-webkit-scrollbar { height: 4px; }
  .prancha--deslizante .moldura__imagem::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--dourado) 45%, transparent); }
}

/* 19.7 duas fotos irmas lado a lado -------------------------------------- */
/* Quando as duas colunas sao duas fotos, as molduras tem que sair do mesmo tamanho.
   No Trichovision uma era 562x702 e a outra 446x446: 116px de diferenca de largura,
   256px de altura, e as legendas em alturas e alinhamentos diferentes. Quadrado pelo
   mesmo motivo das portas: e a forma que contem o equipamento inteiro. A coluna para

/* ==========================================================================
   19.7 O QUE SE TOCA NO CELULAR — 11/09/2026
   Varredura de UI pedida pelo João. Medido em 375 px de largura, alvo por alvo:
   os tres icones de rede social tinham 36 x 36, os sete links do rodape tinham
   24 px de altura com 9,6 px de respiro entre eles, e os telefones da pagina de
   Contato, 20 px. Dedo de adulto pede 44 px; abaixo disso o erro de toque cai no
   link vizinho. No computador nada muda: ali quem aponta e o mouse.
   ========================================================================== */
@media (max-width: 900px) {
  .rodape__redes { gap: .6rem; }
  .rodape__redes a { width: 2.75rem; height: 2.75rem; }
  .rodape__redes svg { width: 1.15rem; height: 1.15rem; }

  /* o link ja ocupa a linha toda; falta altura. O respiro entra por dentro,
     para o bloco do rodape nao esticar mais do que o necessario. */
  .rodape__nav { gap: 0; }
  .rodape__nav a { display: block; padding-block: .8rem; }

  .rodape__contato > a,
  .rodape__contato-bloco a { display: block; padding-block: .65rem; }
  .rodape__contato-bloco { gap: 0; }

  /* telefones e e-mail da pagina de Contato */
  .canal__valor a { display: inline-block; padding-block: .5rem; }
  .canal__nota a { display: inline-block; padding-block: .6rem; }

  /* o atalho para a ficha tecnica era so uma linha de texto sublinhada */
  a.link { display: inline-block; padding-block: .6rem; }

  /* a ficha tecnica abre no toque do titulo: ele precisa de area */
  .ficha > summary { padding-block: 1.4rem; min-height: 2.75rem; }
}

/* ==========================================================================
   20. A CAPA DA HOME — 11/09/2026
   Ela mandou o mockup da Home feito por ela e o Joao pediu a pagina "daquele
   jeito". O que muda em relacao ao hero anterior:

   - o rosto deixa de ser uma prancha emoldurada de 480 px com legenda e passa a
     sangrar ate a borda direita da tela, como no mockup;
   - o titulo deixa de ser inteiro na cor do logotipo. No mockup a primeira e a
     terceira linha sao quase pretas e so a do meio e dourada. Alem de ser o que
     ela desenhou, sobe o contraste do titulo de 4,0:1 para 15,4:1;
   - o risquinho do rotulo volta para a esquerda, que e onde ele esta no mockup
     (em 08/09 ela tinha pedido do lado direito -- avisar);
   - entra o botao cheio "Conheca nossos equipamentos". Os dois botoes que ela
     mandou tirar em 08/09 eram o de WhatsApp e o de contato; este e outro e veio
     do desenho dela;
   - o fundo ganha o marmore de verdade. Veio de marmore serpenteia, e gradiente
     linear de CSS so sabe fazer faixa reta -- por isso a textura e imagem,
     gerada em ferramentas/marmore.py (10 KB em webp).
   ========================================================================== */
.hero--capa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(calc(100svh - var(--cabecalho-altura)), 860px);
  display: grid;
  align-content: center;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* o marmore. image-set escolhe o webp e cai no jpg em quem nao souber ler. */
.hero__marmore {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--areia-fundo);
  background-image: url("../img/marmore-veios-1920.jpg");
  background-image: image-set(url("../img/marmore-veios-1920.webp") type("image/webp"),
                              url("../img/marmore-veios-1920.jpg")  type("image/jpeg"));
  background-size: cover;
  background-position: center;
}

/* o arco dourado do canto de baixo. Um so: na mesma lista ela escreveu "nao
   exagerar no dourado" e "evitar muitas linhas". */
.hero__arco {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -32vw;
  bottom: -64vw;
  width: 98vw;
  height: 98vw;
  max-width: 1280px;
  max-height: 1280px;
  border: 1px solid rgba(156, 124, 51, .28);
  border-radius: 50%;
}

.hero__rosto {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: clamp(340px, 47vw, 780px);
  margin: 0;
  pointer-events: none;
}
.hero__rosto picture { display: block; height: 100%; }
.hero__rosto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 30%;   /* 30% em vez de centro: sobra um respiro acima da cabeca */
  /* o recorte sai do mockup com fundo creme proprio; sem a mascara aparece um
     degrau de cor no meio da tela, onde o creme dele encosta no marmore daqui. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
          mask-image: linear-gradient(90deg, transparent 0, #000 30%);
}

/* A varredura volta para cima do rosto. Ela pediu isso no audio de 09/09, as 17h11
   -- "eu queria ver se tem como colocar essa linha mexendo, subindo e descendo,
   fazendo a analise no rosto dessa mulher" -- quando o hero ainda era so um
   quadriculado. A capa de 11/09 trouxe o rosto e levou a linha junto por engano.
   O quadriculado nao volta: a malha dourada agora esta dentro da propria foto, e
   ela escreveu "evitar muitas linhas" na lista de 11/09. */
.hero__rosto { overflow: hidden; }
.hero__rosto .hero__varredura {
  position: absolute;
  inset: 0 0 auto;
  height: 100%;
  z-index: 1;
  border-top: 1px solid var(--dourado);
  /* o halo curto embaixo do fio: sobre foto, 1 px sozinho quase nao se le */
  background: linear-gradient(180deg, color-mix(in srgb, var(--dourado) 20%, transparent) 0, transparent 56px);
  opacity: .5;
  /* a mesma mascara da foto, senao a linha aparece sozinha na metade esquerda,
     onde nao ha imagem nenhuma. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
          mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  animation: varredura 9s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .hero__rosto .hero__varredura { display: none; } }

.hero__capa-texto { position: relative; z-index: 1; }
.hero__capa-texto > * { max-width: 36rem; }
.hero--capa .rotulo { font-size: .78rem; }
.hero--capa h1.titulo--marca {
  /* No mockup a linha mais longa ocupa 47% da largura da tela. A medida aqui e essa,
     e o corpo acompanha: e o que faz as tres linhas cairem onde ela desenhou.
     Em espanhol a terceira linha e sete caracteres mais longa e quebra em duas --
     de proposito: e melhor quatro linhas certas do que uma linha estourando a
     coluna por cima do rosto. */
  /* Medido no navegador, em Cinzel: a linha mais longa do portugues ("OS OLHOS
     CONSEGUEM VER") ocupa 15,6 vezes o corpo da fonte. Para ela caber inteira numa
     linha so, corpo e coluna tem que andar juntos -- dai os dois em vw. 3,25 x 15,6
     = 50,7% da tela, e a coluna tem 52%. O titulo passa por cima da beirada do rosto
     de proposito: aqueles 30% da esquerda estao mascarados e nao tem imagem nenhuma,
     e e assim que o mockup dela faz. */
  max-width: min(100%, 52vw);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(1.7rem, 3.25vw, 3rem);
  color: var(--tinta);
  text-wrap: pretty;
}
.titulo--capa > span { display: block; }
.titulo--capa .titulo__ouro { color: var(--dourado-logotipo); }
.hero--capa .lead {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  text-align: left;    /* no mockup o paragrafo e alinhado a esquerda, nao justificado */
}
.hero__acao { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* o botao cheio do mockup. E o unico bloco dourado da pagina, e mesmo assim e um
   botao -- a regra dela e "dourado nunca como fundo de bloco grande".
   #6E5520 sob #FCFAF6 da 7,4:1; o hover em #1C1916 da 16,7:1. */
.botao--ouro {
  background: var(--dourado-texto);
  color: var(--areia-clara);
  border-color: var(--dourado-texto);
}
.botao--ouro:hover,
.botao--ouro:focus-visible {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--areia-clara);
}
.botao__seta { width: 1.5em; height: .75em; flex: none; transition: transform var(--transicao); }
.botao--ouro:hover .botao__seta { transform: translateX(.25em); }

/* No celular o rosto nao cabe ao lado do texto: ele desce para uma faixa inteira
   logo abaixo, com a mascara virando para baixo. O texto continua em primeiro. */
@media (max-width: 900px) {
  .hero--capa {
    min-height: 0;
    align-content: start;
    row-gap: clamp(1.5rem, 5vw, 2.25rem);
    padding-block: clamp(1.75rem, 5vw, 2.5rem) 0;
  }
  .hero__capa-texto > * { max-width: none; }
  .hero--capa h1.titulo--marca { max-width: none; text-wrap: wrap; }
  .titulo--capa > span { display: inline; }
  .titulo--capa .titulo__ouro::after { content: " "; }
  .hero__rosto {
    position: relative;
    inset: auto;
    width: 100%;
    /* o recorte e retrato (714 x 886) e a faixa e deitada: faixa baixa demais corta
       o rosto no nariz. 92vw deixa a faixa quase quadrada no celular. */
    /* o teto sobe junto com a largura: travado em 470px a faixa deitava entre 512 e
       900px e o corte subia ate o labio. Ate 511px nada muda. */
    height: clamp(340px, 92vw, 700px);
  }
  .hero__rosto img {
    object-position: center 16%;
    -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
  }
  /* no celular a foto ocupa a largura toda e desbota para baixo: a varredura tem
     que usar a mesma mascara dela, senao some no lado esquerdo sem motivo. */
  .hero__rosto .hero__varredura {
    -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
  }
  .hero__arco { left: -48vw; bottom: -72vw; width: 136vw; height: 136vw; }
  .hero__acao .botao { width: 100%; }
}

/* entre 901 e 1100 o rosto morde o texto: aperta a coluna dele.
   Os 26rem daqui nunca pegaram no titulo nem no paragrafo de apoio: .hero .lead
   (0,2,0) e .hero--capa h1.titulo--marca (0,2,1) ganham deste seletor (0,1,0).
   Quem cuida dos dois nesta faixa e o bloco 23.1a, logo abaixo. */
@media (min-width: 901px) and (max-width: 1100px) {
  .hero__capa-texto > * { max-width: 26rem; }
  .hero__rosto { width: 42vw; }
}

@media (prefers-reduced-motion: reduce) {
  .botao__seta { transition: none; }
}

/* ==========================================================================
   21. O DESENHO DA PAGINA DO SKINVISION — 15/09/2026

   Ela mandou em 10/09 um documento com a pagina do SkinVision inteira desenhada
   com IA, e disse no audio: "voce chega o maximo perto que voce conseguir da
   criacao que eu fiz". O texto dela entrou palavra por palavra na epoca; o
   DESENHO nao entrou. Foi isso que ela cobrou agora.

   Uma auditoria leu as 53 imagens dos seis documentos dela, item a item, e
   confirmou 15 tratamentos visuais faltando -- todos nesta pagina. Sao eles que
   este bloco resolve:

   - abertura escura com a marca SKIN(dourado)VISION e o equipamento recortado;
   - titulo de secao em duas linhas, a segunda dourada;
   - medalhoes com icone nos oito indicadores;
   - tira de quatro itens com folha dourada no couro cabeludo;
   - fecho de tres linhas com a do meio dourada e em negrito;
   - medalhao escuro nos quatro cartoes de relatorio, com filete entre eles;
   - fileira Antes / Acompanhamento / Evolucao;
   - cinco recursos em colunas separadas por filete dourado;
   - pontinhos de paginacao no carrossel.

   O que NAO entrou, de proposito: os titulos "EVOLUCAO QUE PODE SER COMPROVADA"
   e "...apresentar resultados de forma clara e objetiva para o seu paciente",
   que aparecem em dois quadros dela. Sao promessa de resultado, e promessa de
   resultado derruba a campanha inteira nas politicas de saude do Meta e do
   Google. O resto do quadro entrou.
   ========================================================================== */

/* 21.1 Abertura escura -----------------------------------------------------
   Fundo preto numa pagina off-white pede explicacao. Na lista de 11/09 ela
   escreveu as cores principais como "off-white/marfim + preto/chumbo + dourado":
   o preto e dela. E o quadro que ela desenhou para esta abertura e preto. O que
   a mesma lista proibe e fundo FRIO e cinza, nao o preto quente daqui. A pagina
   volta ao marfim logo abaixo, na borda de marmore. */
/* ==========================================================================
   21.1 O TOPO: a arte completa dela, sangrada
   21/09/2026, a noite. Luciana, por WhatsApp as 20h04: "as imagens quando
   abrimos fica diferente", "nao esta muito bacana", "e como se os equipamentos
   nao tivesse dentro da imagem de fundo", "e como se ela tivesse sobreposta".
   O Joao perguntou se o que ela queria eram as tres imagens inteiras e ela
   respondeu "Isso". Depois mandou os tres arquivos: IMG_0275, IMG_0288 e
   IMG_0362, com o recado "imagem completa desses arquivos".

   E o fim de um mal-entendido de tres rodadas. Os arquivos dela NAO sao foto de
   equipamento: sao a arte pronta, com o nome em letreiro dourado, a assinatura,
   os arcos de luz e a bancada de marmore, tudo composto e fechado. O site vinha
   pegando so o lado do equipamento e redesenhando o resto -- o mesmo letreiro em
   texto vivo, os mesmos arcos em CSS, a mesma bancada em CSS. Duas camadas
   desenhando a mesma coisa nunca casam, e era isso que ela via como recorte
   (20/09), depois como sobreposicao (21/09).

   Agora a arte e a secao. Uma imagem, ponta a ponta, sem nada por cima e nada
   por baixo. Nao ha retangulo dentro de outro retangulo, entao nao ha costura
   possivel. O preto do arquivo encosta no cabecalho, que tambem e escuro, e o
   marmore do arquivo encosta no creme da pagina, que e a secao seguinte.

   O que saiu daqui: .hero-equip__arco--um e --dois, .hero-equip__bancada,
   .hero-equip__interno, .hero-equip__texto, .marca-equip e suas partes,
   .hero-equip__apoio, .hero-equip__foto. Eram 238 linhas em 21/09 de manha,
   72 a tarde, e agora sao estas.

   O preco, registrado: a assinatura ("ANALISE PROFISSIONAL DA PELE...") esta
   queimada na arte, em portugues. Quem abrir em ingles ou espanhol vai ler
   portugues ali. O texto alternativo troca de idioma; a imagem nao. Isso esta
   no item 47 da lista de pendencias.
   ========================================================================== */
.hero-equip {
  background: #0A0908;   /* a cor do proprio canto do arquivo, para o caso de a arte demorar */
}
.hero-equip__arte {
  display: block;
  width: 100%;
  height: auto;
}

/* 21.2 Titulo de secao em duas linhas ---------------------------------------
   Em todo quadro dela o titulo tem duas linhas: a de cima quase preta, a de
   baixo dourada. E a assinatura visual da pagina inteira. */
.titulo-par > span { display: block; }
.titulo-par__ouro { color: var(--dourado-logotipo); }

/* 21.3 Medalhao com icone ---------------------------------------------------
   Dois feitios: claro nos indicadores, escuro nos cartoes de relatorio e nos
   tres marcos -- exatamente como nos quadros dela. */
.medalhao {
  display: grid; place-items: center;
  width: clamp(3.6rem, 7vw, 4.6rem); aspect-ratio: 1;
  margin-inline: auto; border-radius: 50%;
  border: 1px solid var(--dourado);
  background: var(--areia-clara);
}
.medalhao svg { width: 52%; height: 52%; color: var(--dourado-texto); }
.medalhao--escuro { border-width: 2px; background: radial-gradient(circle at 34% 28%, #35302A 0, #16130F 72%); }
.medalhao--escuro svg { color: #D8B76A; }

/* 21.4 Grade dos oito indicadores -------------------------------------------
   A grade nasceu como lista: losango a esquerda, nome a direita, em linha. Com o
   medalhao do quadro dela isso virou losango + circulo + nome lado a lado, tres
   coisas na horizontal onde o desenho pede duas na vertical. Por isso a variante:
   o item empilha, centraliza e dispensa o losango, que ali so repetia o medalhao.
   A lista sem medalhao -- os treze indicadores do Trichovision, longos demais
   para virar icone sem inventar identidade -- continua como era. */
.grade-indicadores--medalhoes {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem) 1rem;
}
.grade-indicadores--medalhoes .grade-indicadores__item {
  display: grid; justify-items: center; text-align: center; gap: 0;
}
.grade-indicadores--medalhoes .grade-indicadores__item::before { content: none; }
.grade-indicadores--medalhoes .medalhao { margin-bottom: .85rem; }
/* oito indicadores em quatro colunas fecham duas fileiras cheias; deixados no
   auto-fit davam cinco em cima e tres sobrando embaixo */
@media (min-width: 900px) {
  .grade-indicadores--medalhoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 21.5 Tira de quatro com folha dourada ------------------------------------- */
.tira-folhas {
  display: grid; gap: clamp(1.25rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none;
}
.tira-folhas__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem; align-items: start; }
.tira-folhas__folha { width: 1.6rem; height: 1.6rem; flex: none; color: var(--dourado); margin-top: .1rem; }
.tira-folhas__titulo {
  margin: 0; font-family: var(--fonte-rotulo); font-size: .84rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--tinta); line-height: 1.35;
}
.tira-folhas__texto { margin: .5rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--tinta-media); }

/* 21.6 Fecho de tres linhas, a do meio dourada ------------------------------ */
.fecho-tres { margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 46rem; text-align: center; }
/* :not(.rotulo) porque o rotulo do bloco e um <p> e mora aqui dentro: sem isso
   ele saia em 19,2px de marrom, contra os 11,52px dourados de todos os outros
   rotulos da mesma pagina. O .fecho-capilar ja tinha a regra de .rotulo; faltava
   tirar o <p> generico da frente dela. */
.fecho-tres p:not(.rotulo) { margin: 0; font-size: clamp(1rem, 1.9vw, 1.2rem); line-height: 1.75; color: var(--tinta-media); }
.fecho-tres p:not(.rotulo) + p:not(.rotulo) { margin-top: .15rem; }
.fecho-tres__forte {
  font-family: var(--fonte-rotulo); font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem); color: var(--dourado-logotipo);
}

/* 21.7 Cartoes de relatorio com medalhao e filete entre eles ---------------- */
.cartoes--medalhao { gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cartoes--medalhao .cartao { text-align: center; padding-inline: clamp(1rem, 2.5vw, 1.75rem); border: 0; background: none; }
.cartoes--medalhao .cartao + .cartao { border-left: 1px solid var(--linha); }
.cartoes--medalhao .cartao__nome { margin-top: 1.1rem; }
.cartoes--medalhao .cartao__texto { margin-top: .75rem; }
@media (max-width: 900px) {
  /* uma coluna so: com duas ou tres, o cartao da direita nascia 28px mais baixo
     que o da esquerda e com um fio por cima que cortava a fileira pela metade. */
  .cartoes--medalhao { grid-template-columns: minmax(0, 1fr); }
  .cartoes--medalhao .cartao + .cartao { border-left: 0; border-top: 1px solid var(--linha); padding-top: 1.75rem; margin-top: 1.75rem; }
}

/* 21.8 Antes / Acompanhamento / Evolucao ------------------------------------ */
.marcos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none;
}
.marcos__item { text-align: center; padding-inline: clamp(1rem, 2.5vw, 2rem); }
.marcos__item + .marcos__item { border-left: 1px solid var(--linha); }
.marcos__nome {
  margin: 1.1rem 0 0; font-family: var(--fonte-display); font-size: 1.05rem; font-weight: 400;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tinta);
}
.marcos__texto { margin: .6rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--tinta-media); }
@media (max-width: 720px) {
  /* mesmo motivo dos cartoes: com duas ou tres colunas o filete de cima
     cortava a fileira pela metade em vez de separar os itens. */
  .marcos { grid-template-columns: minmax(0, 1fr); }
  .marcos__item + .marcos__item { border-left: 0; border-top: 1px solid var(--linha); padding-top: 1.75rem; margin-top: 1.75rem; }
}

/* 21.9 Cinco recursos em colunas -------------------------------------------- */
.colunas-recursos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none;
}
.colunas-recursos li {
  text-align: center; padding: .35rem clamp(.65rem, 1.6vw, 1.15rem);
  font-family: var(--fonte-display); font-size: clamp(.95rem, 1.7vw, 1.1rem);
  font-weight: 400; letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.35; color: var(--tinta);
}
.colunas-recursos li + li { border-left: 1px solid var(--dourado); }
/* Cinco rotulos so cabem lado a lado a partir de 1280px. Medido em 21/09/2026 na
   pagina do SkinVision, com a Cinzel carregada: em 901, 1024 e 1100px o texto do
   item mais longo pintava 28 a 40px fora da celula, em portugues e em espanhol --
   atravessando o filete dourado do vizinho. A tira de quatro do Trichovision cabe
   e nao leva esta classe. */
@media (min-width: 901px) and (max-width: 1279px) {
  .colunas-recursos--cinco { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
  .colunas-recursos--cinco li + li { border-left: 0; border-top: 1px solid var(--dourado); margin-top: 1rem; padding-top: 1rem; }
}
/* 900, nao 700: entre 701 e 826 px cabiam quatro faixas e o quinto item descia
   sozinho com um filete dourado a esquerda apontando para o vazio. */
@media (max-width: 900px) {
  /* uma coluna so: com duas, o filete de cima cortava a fileira pela metade */
  .colunas-recursos { grid-template-columns: 1fr; }
  .colunas-recursos li + li { border-left: 0; border-top: 1px solid var(--dourado); margin-top: 1rem; padding-top: 1rem; }
}

/* 21.10 Fecho de duas linhas com filete dos dois lados ---------------------- */
/* No quadro dela o filete nao esta em cima e embaixo: esta um de cada lado da
   primeira linha, como no rotulo centrado. */
.fecho-duplo__linha:first-child { display: flex; align-items: center; justify-content: center; gap: 1.25rem; }
.fecho-duplo__linha:first-child::before,
.fecho-duplo__linha:first-child::after {
  content: ""; width: clamp(2rem, 8vw, 7rem); height: 1px; background: var(--dourado); flex: none;
}

/* 21.11 Pontinhos do carrossel ---------------------------------------------- */
.carrossel__pontos { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .55rem; margin-top: 1.1rem; }
.carrossel__ponto {
  /* 44 x 44 e o alvo de dedo; flex: none porque no celular sao nove pontos e o
     flex os espremia para 29 px de largura. Com quebra de linha eles cabem. */
  flex: none;
  width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.carrossel__ponto::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  border: 1px solid var(--dourado); background: transparent;
  transition: background-color var(--transicao), transform var(--transicao);
}
.carrossel__ponto[aria-current="true"]::before { background: var(--dourado); transform: scale(1.25); }
.carrossel__ponto:hover::before { background: color-mix(in srgb, var(--dourado) 55%, transparent); transform: scale(1.15); }
.carrossel__ponto[aria-current="true"]:hover::before { transform: scale(1.25); }
.carrossel__ponto:focus-visible { outline: 2px solid var(--dourado); outline-offset: -6px; }

/* 21.12 Fecho centralizado do couro cabeludo -------------------------------- */
.fecho-capilar { margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; max-width: 44rem; text-align: center; }
.fecho-capilar .rotulo { justify-content: center; }
.fecho-capilar p:not(.rotulo) { margin: 1rem 0 0; font-size: clamp(1rem, 1.9vw, 1.15rem); line-height: 1.7; color: var(--tinta-media); }

@media (prefers-reduced-motion: reduce) {
  .carrossel__ponto::before { transition: none; }
}

/* ==========================================================================
   22. FECHAR OS SINAIS DE OBRA — 17/09/2026, encerrada em 19/09/2026

   Tres blocos anunciavam que o site estava inacabado: as silhuetas "Exemplo" da
   equipe, as molduras vazias do carrossel e as caixas de pendencia. Os tres
   sairam. Em 19/09 (retorno 10) cairam os dois ultimos: a secao Equipe inteira,
   a pedido dela, e as nove molduras vazias dos carrosseis, que ganharam imagem
   de verdade -- ampliacoes de regiao de pele recortadas das paginas espectrais
   dos catalogos. Nao sobrou nenhum quadro sem foto, entao as regras
   .quadro-ornamento, .quadro-numero e .carrossel__quadro--vazio sairam daqui.
   ========================================================================== */

/* ==========================================================================
   23. O RETORNO DE 18/09/2026 — OS VIDEOS DELA
   ==========================================================================
   Ela gravou dois videos passando pelas paginas. Na Tecnologia disse, com estas
   palavras: "o espacamento de um para o outro esta ficando muito grande", "esse
   aqui pode subir bem, deixar o minimo de espacamento possivel", "isso esta
   fazendo com que a pagina fique muito grande, mas ela nao tem nem tanta
   informacao assim". A pagina media 9.264px de altura com sete blocos de tres
   paragrafos e uma imagem cada — dez telas e meia de rolagem para pouco texto.

   O aperto e por pagina (body[data-pagina="tec"]), nao global: a Home, a Sobre
   e as tres paginas de equipamento tem mais conteudo por bloco e ela ja aprovou
   o ritmo delas. O respiro continua existindo — ela reprovou uma versao por ser
   "muito branca, muito simples" —, so deixa de ser o dobro do necessario.      */

body[data-pagina="tec"] {
  --secao: clamp(2rem, 3.6vw, 3.25rem);
}
/* a cabeca da secao (rotulo + titulo) encostava 64px abaixo do texto */
body[data-pagina="tec"] .cabeca-secao { margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }
/* a ilustracao vinha 64px depois do ultimo paragrafo */
body[data-pagina="tec"] .arte-panoramica { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
/* o filete entre secoes reservava 100px so para ele: 56 em cima, 44 embaixo,
   logo abaixo dos 57 de respiro da propria secao. O ultimo da pagina, o do bloco
   ponte, nao tem a classe --divisor; sem o seletor de baixo ele ficava sozinho
   com o ritmo antigo, no unico bloco que ela disse que estava ok. */
body[data-pagina="tec"] .container > .filete--ornamento,
body[data-pagina="tec"] .filete--ornamento.filete--divisor {
  margin-top: clamp(.5rem, 1.4vw, 1.25rem);
  margin-bottom: calc(clamp(1rem, 2vw, 1.5rem) + .5rem);
}
/* a abertura da pagina tinha o mesmo folego de uma capa */
body[data-pagina="tec"] .abertura { padding-block: clamp(3rem, 6vw, 5rem); }

/* 23.1 A capa da Home: nenhuma palavra sobre o rosto -------------------------
   Ela, no video da Home: "essa frase completa, essa parte vira aqui, pegou bem no
   nariz dela... eu nao sei se e melhor diminuir um pouco a letra pra gente terminar
   menos aqui, o rosto dela ficar livre, ou jogar mais pra ca, enfim, a intencao e
   nao deixar nenhuma palavra no rosto dela".

   Medido antes: em 1024px o paragrafo de apoio entrava 28px dentro da caixa do
   rosto e em 1600px o titulo entrava 88px. A causa e que a coluna de texto tinha
   medida fixa (52vw / 36rem) enquanto o rosto e ancorado na borda direita da
   janela: quanto mais larga a tela, mais o container centralizado empurra o texto
   para dentro dele.

   A correcao troca a medida fixa pela distancia ate o rosto. A caixa do rosto
   comeca em 53vw (100vw menos os 47vw dele); (100vw - 100%)/2 e a margem esquerda
   do container centralizado. O que sobra, menos 1,5rem de respiro, e o maximo que
   o texto pode ocupar em qualquer largura. O corpo do titulo desce junto, senao a
   linha mais longa ("OS OLHOS CONSEGUEM VER", 15,6x o corpo da fonte) quebraria em
   duas — e ela aprovou o titulo em tres linhas.                                */
@media (min-width: 1101px) {
  /* --limite-rosto: do inicio da coluna de texto ate 1,5rem antes do rosto.
     A margem esquerda do container e max(--margem, (100vw - 1240px) / 2), que e o
     proprio min() do .container aberto; sem percentual aqui de proposito, porque
     dentro de max-width um "100%" se resolve contra a caixa que estamos medindo. */
  .hero__capa-texto {
    --limite-rosto: calc(53vw - max(var(--margem), (100vw - var(--largura-max)) / 2) - 1.5rem);
  }
  .hero__capa-texto > * { max-width: min(36rem, var(--limite-rosto)); }
  /* .hero .lead (secao 12) fixa 30em e ganha em especificidade de quem so tem
     .hero__capa-texto > *; sem esta linha o paragrafo de apoio era o unico que
     continuava entrando no rosto. */
  .hero--capa .lead { max-width: min(30em, var(--limite-rosto)); }
  .hero--capa h1.titulo--marca {
    max-width: var(--limite-rosto);
    font-size: clamp(1.7rem, 2.75vw, 2.4rem);
  }
}

/* 23.1a A mesma conta na faixa 901-1100 --------------------------------------
   Aqui o rosto tem 42vw (regra de cima), entao a caixa dele comeca em 58vw. Sem
   este bloco a correcao valia so a partir de 1101px e o paragrafo de apoio
   continuava no rosto em 1024px, que e a largura de muito notebook. Os 26rem que
   ja existiam nesta faixa nunca pegaram no titulo nem no paragrafo: .hero .lead
   e .hero--capa h1.titulo--marca ganham daquele seletor em especificidade.      */
@media (min-width: 901px) and (max-width: 1100px) {
  .hero__capa-texto {
    --limite-rosto: calc(58vw - max(var(--margem), (100vw - var(--largura-max)) / 2) - 2.5rem);
  }
  .hero__capa-texto > * { max-width: min(26rem, var(--limite-rosto)); }
  .hero--capa .lead { max-width: min(30em, var(--limite-rosto)); }
  .hero--capa h1.titulo--marca {
    max-width: var(--limite-rosto);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  }
  /* o rotulo do topo tem white-space: nowrap desde os 700px e nao encolhe; com o
     traco novo na ponta direita ele passou a encostar no rosto nesta faixa. */
  .hero--capa .rotulo { white-space: normal; }
}

/* 23.2 O rotulo centralizado que lia como torto -----------------------------
   Ela, no video da Home: "aqui a analise por imagem, faltou centralizar que ela
   ta torta, ne, ela nao ta centralizada, entao e so centralizar ela aqui".

   Estava mesmo. O rotulo e um <p> dentro da coluna de texto, e recebia a medida
   de leitura da coluna calculada no corpo dele, que e miudo: caixa de 461px
   dentro de uma coluna de 657px, encostada a esquerda. O justify-content: center
   centralizava o conteudo dentro dos 461, nao dentro dos 657 — dai o desalinho
   de quase 100px em relacao ao titulo logo abaixo, que ocupa a coluna inteira.  */
.rotulo--centro { width: 100%; max-width: none; }

/* 23.3 A proporcao do filete ao titulo, e o respiro geral -------------------
   Ela, no fim do video da Home: "espacamento, diminuir, talvez se puder subir um
   pouquinho aqui... ai faz isso em todos, ta? Deixou um pouquinho mais perto ai
   com essa divisao e o titulo um pouquinho mais aqui em cima, porque do titulo
   pra o subtitulo ta bem mais perto, entao ta desproporcional."

   Ela tem razao e da para medir: do filete ate o rotulo/titulo eram 84px (56 de
   margem do filete + 64 da regra do divisor + 20), e do titulo ate o subtitulo,
   20px. Quatro para um. O bloco abaixo aproxima o titulo do filete e afrouxa o
   par titulo/subtitulo, ate a razao ficar perto de dois para um — que e o que se
   le como "um grupo" em vez de duas coisas soltas.

   Vale em todas as paginas ("faz isso em todos"). A Tecnologia continua mais
   apertada que as outras, pelo bloco 23 acima, porque la ela pediu o minimo.    */
:root { --secao: clamp(3rem, 5.5vw, 5rem); }
.container > .filete--ornamento { margin-block: clamp(1.5rem, 3vw, 2.25rem); }

/* Em Equipamentos, Privacidade e nas dezesseis secoes das tres paginas de
   equipamento o filete divisor e filho direto de <section>: nao casava com o
   seletor de cima, entao saia com a largura da janela (a 1440px, 130px mais
   largo que na Home) e sem o respiro. O "faz isso em todos" vale para eles. */
.secao > .filete--ornamento.filete--divisor {
  width: min(100% - 2 * var(--margem), var(--largura-max));
  margin-inline: auto;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.filete--ornamento.filete--divisor { margin-bottom: calc(clamp(1.25rem, 2.4vw, 1.75rem) + .5rem); }
.cabeca-secao { margin-bottom: clamp(2rem, 3.4vw, 2.75rem); }
.cabeca-secao h2 { margin-top: .5rem; }
.cabeca-secao .lead { margin-top: 1rem; }
/* quando a cabeca da secao mora dentro de .prosa (Home e Contato), o titulo
   herdava o 1.6em de respiro que a regra de texto corrido da a um h2 no meio do
   assunto — 55px entre o rotulo e o titulo, mais do que do filete ate o rotulo.
   Rotulo e titulo sao a mesma coisa; ficam colados. */
.prosa .rotulo + h1,
.prosa .rotulo + h2,
.prosa .rotulo + h3 { margin-top: .5rem; }

/* 23.4 O retrato da fundadora na secao "Sobre nos" ---------------------------
   O Joao, olhando a pagina: "acho que da pra melhorar a disposicao da foto dela".
   Dava. Media 488px de foto contra 115px de texto, alinhados pelo topo: 373px de
   vazio embaixo do paragrafo, e ela pequena dentro de um 4:3 largo. Tres mudancas:
   o recorte virou retrato 4:5 (ela vira o assunto e o logotipo da parede aparece
   inteiro), a coluna da foto ficou mais estreita que a do texto, e as duas se
   alinham pelo meio em vez de pelo topo. A legenda saiu de baixo da foto e virou
   assinatura embaixo do paragrafo, que e onde ela responde ao "eu" do texto —
   de quebra, a foto fica sem legenda, como ela pediu para todas as imagens.     */
.grade--retrato { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); align-items: center; }
.retrato-fundadora .moldura__imagem { aspect-ratio: 4 / 5; }
.retrato-fundadora img { width: 100%; height: 100%; object-fit: cover; }

/* a assinatura usa o mesmo traco dourado dos rotulos, na horizontal, para nao
   parecer um paragrafo solto que ficou faltando ponto final */
.assinatura {
  margin-top: 1.5rem;
  font-family: var(--fonte-rotulo);
  font-size: var(--t-rotulo);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dourado-texto);
  text-align: left;
}
.assinatura::before {
  content: "";
  display: block;
  width: 2rem; height: 1px;
  background: var(--dourado);
  margin-bottom: .85rem;
}

@media (max-width: 900px) {
  /* no celular a foto vai para cima do texto e nao precisa ocupar a tela inteira */
  .grade--retrato { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .retrato-fundadora { max-width: 340px; width: 100%; }
  .grade--retrato .prosa { width: 100%; }
}

/* ------------------------------------------- 23.5 reescrita do Trichovision */
/* Documento dela de 18/09: cada fonte de luz ganhou um subtitulo entre o nome
   e a descricao, e o bloco final ganhou uma linha de impacto centrada. */
.comparativo__sub {
  margin-top: .25rem; font-family: var(--fonte-display); font-weight: 400;
  font-size: .95rem; line-height: 1.35; color: var(--tinta);
}
.comparativo__sub + .comparativo__texto { margin-top: .45rem; }
.linha-impacto {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; text-align: center; text-wrap: balance;
  font-family: var(--fonte-display); font-weight: 400;
  font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem);
  letter-spacing: .1em; line-height: 1.5; text-transform: uppercase;
  color: var(--dourado-texto);
}

/* ==========================================================================
   24. ESTADO APERTADO
   O site tinha normal, hover e foco, e nenhum estado de clique. No toque nao
   existe hover: o dedo aperta o botao dourado do formulario e nada acontece
   ate o WhatsApp abrir, entao quem esta com internet lenta aperta de novo --
   e o rodizio pula para o outro consultor. Um pixel de afundamento resolve.
   ========================================================================== */
.botao:active,
.carrossel__botao:active,
.navegacao__seta:active,
.zap-flutuante:active,
.porta__link:active .moldura {
  transform: translateY(1px);
}
.botao--primario:active { background: var(--tinta); border-color: var(--tinta); }
.ficha > summary:active { color: var(--dourado); }
@media (prefers-reduced-motion: reduce) {
  .botao:active, .carrossel__botao:active, .navegacao__seta:active,
  .zap-flutuante:active, .porta__link:active .moldura { transform: none; }
}

/* ==========================================================================
   25. IMPRESSAO
   As entradas de .revelar nascem em opacity 0 e so acendem quando o bloco
   cruza a tela. Quem abre a pagina e manda imprimir sem rolar leva as secoes
   de baixo em branco -- e este e o unico jeito de um bloco do site ficar
   invisivel de forma permanente. Uma dona de clinica avaliando um equipamento
   deste porte imprime ou salva em PDF para mostrar ao socio.
   ========================================================================== */
@media print {
  .js .revelar { opacity: 1 !important; transform: none !important; }
  .cabecalho, .zap-flutuante, .carrossel__controles, .carrossel__pontos,
  .carrossel__ajuda, .idiomas, .menu-botao { display: none !important; }
  .ficha[open] > summary::after, .ficha > summary::after { content: ""; }
  /* quem abre a ficha na impressao e o beforeprint do apresentacao.js: forcar
     <details> por CSS nao e confiavel entre navegadores. */
  .carrossel__trilho { overflow: visible !important; display: block; }
  .carrossel__item { break-inside: avoid; page-break-inside: avoid; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
  section, figure, .moldura { break-inside: avoid; page-break-inside: avoid; }
}