/* ============================================================
   ILUMINA CARE, componentes e seções
   Depende de tokens.css. Nenhum hex solto aqui.
   ============================================================ */

/* ------------------------------------------------------------
   barra de aviso
   ------------------------------------------------------------ */
.aviso-topo {
  background: var(--fundo);
  color: var(--tinta);
  text-align: center;
  border-bottom: 1px solid var(--linha);
}
.aviso-topo p {
  padding: 11px var(--e4);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.aviso-topo b { color: var(--acento); font-weight: var(--peso-forte); }

/* ------------------------------------------------------------
   cabeçalho
   ------------------------------------------------------------ */
.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo__grade {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--e4);
  min-height: 76px;
}
/* o logo entra por máscara CSS para herdar a cor do contexto (manual, item 2.1) */
.logo-ilumina {
  display: block;
  width: 92px;
  aspect-ratio: 99 / 53;
  background: currentColor;
  -webkit-mask: url("../assets/logo-ilumina.svg") no-repeat center / contain;
  mask: url("../assets/logo-ilumina.svg") no-repeat center / contain;
}
.topo__marca { justify-self: center; color: var(--caramelo); }

.menu { display: flex; align-items: center; gap: var(--e5); }
.menu a {
  font-size: var(--t-peq);
  font-weight: 500;
  color: var(--tinta-suave);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--acento); border-color: var(--acento); }

.topo__acoes { display: flex; align-items: center; justify-content: flex-end; gap: var(--e4); }
.icone-btn { display: inline-flex; color: var(--tinta); transition: color var(--transicao); }
.icone-btn:hover { color: var(--acento); }
.icone-btn svg { width: 20px; height: 20px; }
.icone-btn__sacola { position: relative; }
.icone-btn__sacola span {
  position: absolute;
  top: -5px; right: -7px;
  min-width: 16px; height: 16px;
  display: grid; place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--acento);
  color: var(--branco);
  font-size: 10px; font-weight: var(--peso-forte);
}
.abrir-menu { display: none; }

/* ------------------------------------------------------------
   abertura
   ------------------------------------------------------------ */
.abertura { background: var(--fundo); overflow: hidden; }
.abertura__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(var(--e5), 5vw, var(--e7));
  padding-top: clamp(var(--e5), 6vw, var(--e7));
  padding-bottom: clamp(var(--e5), 6vw, var(--e7));
}
.abertura__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e4); }
.abertura__texto .display { margin-block: var(--e1) 0; }
.abertura__assinatura {
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--t-peq); font-weight: 500; letter-spacing: .06em;
  color: var(--tinta-suave);
}
.abertura__acoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e2); }
.abertura__selos {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4);
  margin-top: var(--e3); padding-top: var(--e4);
  border-top: 1px solid var(--linha);
  width: 100%;
}
.abertura__selos li {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--t-micro); color: var(--tinta-suave);
}
.abertura__foto { position: relative; }
.abertura__foto .foto { box-shadow: var(--sombra); }
.abertura__foto .foto__brief { top: var(--e3); bottom: auto; }
.abertura__nota {
  position: absolute;
  left: calc(var(--e5) * -1);
  bottom: var(--e5);
  max-width: 232px;
  padding: var(--e3) var(--e4);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  border: 1px solid var(--linha);
}
.abertura__nota strong { display: block; font-size: var(--t-h3); font-weight: var(--peso-display); line-height: 1.1; }
.abertura__nota span { display: block; margin-top: 5px; font-size: var(--t-micro); color: var(--tinta-suave); line-height: 1.45; }

/* ------------------------------------------------------------
   diagnóstico de pele
   ------------------------------------------------------------ */
.peles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--e3);
}
.pele {
  display: flex; flex-direction: column;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  overflow: hidden;
  transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.pele:hover { border-color: var(--caramelo-40); transform: translateY(-3px); box-shadow: var(--sombra); }
.pele .foto__brief { padding: 5px 8px; font-size: 10px; gap: 6px; }
.pele .foto__brief b { font-size: 9px; }
.pele__corpo { display: flex; flex-direction: column; gap: 6px; padding: var(--e4) var(--e3) var(--e4); }
.pele__nome { font-size: 15px; font-weight: var(--peso-forte); }
.pele__sinal { font-size: var(--t-micro); color: var(--tinta-suave); line-height: 1.45; min-height: 3.2em; }
.pele__cta { margin-top: var(--e2); }

/* ------------------------------------------------------------
   a dermatologista
   ------------------------------------------------------------ */
.medica__grade {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--e5), 5vw, var(--e7));
}
.medica__texto { display: flex; flex-direction: column; gap: var(--e4); align-items: flex-start; }
.medica__credenciais { display: flex; flex-direction: column; gap: var(--e3); width: 100%; }
.medica__credenciais li {
  display: grid; grid-template-columns: 14px 1fr; gap: var(--e3);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-peq);
  color: var(--tinta-suave);
  line-height: 1.5;
}
.medica__credenciais li:last-child { border-bottom: 0; padding-bottom: 0; }
.medica__credenciais b { display: block; color: var(--tinta); font-weight: var(--peso-forte); }
.medica__assinatura {
  margin-top: var(--e2);
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acento);
}

/* ------------------------------------------------------------
   rotinas
   ------------------------------------------------------------ */
.rotinas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
.rotina {
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--superficie);
  height: 100%;
}
.rotina--destaque { border-color: var(--caramelo); box-shadow: var(--sombra); }
.rotina__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); min-height: 26px; }
.rotina__passos { font-size: var(--t-rotulo); font-weight: var(--peso-forte); letter-spacing: var(--track-rotulo); text-transform: uppercase; color: var(--tinta-tenue); }
.rotina__marcador {
  padding: 4px 9px; border-radius: 999px;
  background: var(--rosa); color: var(--acento-escuro);
  font-size: 10px; font-weight: var(--peso-forte); letter-spacing: .1em; text-transform: uppercase;
}
.rotina__nome { font-size: var(--t-h3); font-weight: var(--peso-titulo); line-height: 1.2; }
.rotina__itens { display: flex; flex-direction: column; gap: 9px; padding-block: var(--e2); }
.rotina__itens li { display: grid; grid-template-columns: 12px 1fr; gap: 10px; align-items: start; font-size: var(--t-peq); color: var(--tinta-suave); line-height: 1.45; }
.rotina__itens svg { margin-top: 5px; }
.rotina__preco { margin-top: auto; padding-top: var(--e3); border-top: 1px solid var(--linha); }
.rotina__de { font-size: var(--t-micro); color: var(--tinta-tenue); text-decoration: line-through; }
.rotina__por { display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.rotina__por strong { font-size: 28px; font-weight: var(--peso-display); letter-spacing: -.01em; }
.rotina__economia { font-size: var(--t-micro); font-weight: var(--peso-forte); color: var(--acento); }
.rotina__parcela { display: block; margin-top: 3px; font-size: var(--t-micro); color: var(--tinta-suave); }

/* ------------------------------------------------------------
   prova social
   ------------------------------------------------------------ */
.prova__resumo__texto { max-width: 36ch; }
.prova__resumo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e5);
  padding-bottom: var(--e5); margin-bottom: var(--e5);
  border-bottom: 1px solid var(--linha);
}
.nota-grande { display: flex; align-items: baseline; gap: var(--e2); }
.nota-grande strong { font-size: 46px; font-weight: var(--peso-display); line-height: 1; }
.nota-grande span { font-size: var(--t-peq); color: var(--tinta-suave); }
.estrelas { display: inline-flex; gap: 3px; color: var(--caramelo); }
.estrelas svg { width: 15px; height: 15px; }

.depoimentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
.depoimento {
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
}
.depoimento p { font-size: var(--t-peq); line-height: 1.6; color: var(--tinta-suave); }
.depoimento .rascunho { align-self: flex-start; }
.depoimento footer { display: flex; align-items: center; gap: var(--e3); margin-top: auto; padding-top: var(--e3); border-top: 1px solid var(--linha); }
.depoimento .foto { width: 40px; height: 40px; border-radius: 999px; flex: none; }
.depoimento cite { font-style: normal; font-size: var(--t-micro); font-weight: var(--peso-forte); }
.depoimento cite span { display: block; font-weight: var(--peso-corpo); color: var(--tinta-tenue); }

/* ------------------------------------------------------------
   ciência
   ------------------------------------------------------------ */
.ativos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e4); }
.ativo { display: flex; flex-direction: column; gap: var(--e3); }
.ativo__nome { font-size: 15px; font-weight: var(--peso-forte); }
.ativo__nome sup { font-size: 9px; vertical-align: super; color: var(--tinta-tenue); }
.ativo p { font-size: var(--t-peq); color: var(--tinta-suave); line-height: 1.55; }

/* ------------------------------------------------------------
   perguntas
   ------------------------------------------------------------ */
.perguntas { border-top: 1px solid var(--linha); }
.pergunta { border-bottom: 1px solid var(--linha); }
.pergunta__botao {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  width: 100%; padding: var(--e4) 0;
  text-align: left;
  font-size: var(--t-corpo); font-weight: 500;
  transition: color var(--transicao);
}
.pergunta__botao:hover { color: var(--acento); }
.pergunta__botao svg { width: 15px; height: 15px; flex: none; color: var(--acento); transition: transform var(--transicao); }
.pergunta__botao[aria-expanded="true"] svg { transform: rotate(45deg); }
.pergunta__corpo { display: none; padding-bottom: var(--e4); }
.pergunta__corpo p { font-size: var(--t-peq); color: var(--tinta-suave); line-height: 1.65; max-width: var(--leitura); }
.pergunta__botao[aria-expanded="true"] + .pergunta__corpo { display: block; }

/* ------------------------------------------------------------
   rodapé
   ------------------------------------------------------------ */
.rodape { background: var(--fundo); color: var(--tinta-suave); border-top: 1px solid var(--linha); }
.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--e5);
  padding-top: var(--e7);
  padding-bottom: var(--e6);
}
.rodape__marca { color: var(--acento); }
.rodape__marca .logo-ilumina { width: 112px; }
.rodape__marca p { margin-top: var(--e4); font-size: var(--t-peq); line-height: 1.6; max-width: 32ch; color: var(--tinta-suave); }
.rodape h4 {
  font-size: var(--t-rotulo); font-weight: var(--peso-forte);
  letter-spacing: var(--track-rotulo); text-transform: uppercase;
  color: var(--tinta); margin-bottom: var(--e4);
}
.rodape li + li { margin-top: 11px; }
.rodape a { font-size: var(--t-peq); transition: color var(--transicao); }
.rodape a:hover { color: var(--acento); }
.rodape__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3);
  padding-block: var(--e4);
  border-top: 1px solid var(--linha);
  font-size: var(--t-micro);
  color: var(--tinta-tenue);
}

/* ============================================================
   página de produto
   ============================================================ */

.migalhas { display: flex; gap: var(--e2); padding-top: var(--e4); font-size: var(--t-micro); color: var(--tinta-tenue); }
.migalhas a:hover { color: var(--acento); }

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(var(--e5), 5vw, var(--e7));
  align-items: start;
  padding-top: var(--e5);
  padding-bottom: var(--secao-y);
}

.galeria { display: flex; flex-direction: column; gap: var(--e3); position: sticky; top: 96px; }
.galeria__principal { box-shadow: var(--sombra); }
.galeria__tiras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2); }
.galeria__tiras .foto { cursor: pointer; border: 1px solid transparent; transition: border-color var(--transicao); }
.galeria__tiras .foto:hover, .galeria__tiras .foto[aria-current="true"] { border-color: var(--caramelo); }
.galeria__tiras .foto__brief { display: none; }
.galeria__tiras .foto__marca { width: 42%; }

.compra { display: flex; flex-direction: column; gap: var(--e4); }
.compra__nota { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-micro); color: var(--tinta-suave); }
.compra__nota a { text-decoration: underline; text-underline-offset: 3px; }
.compra h1 { font-size: var(--t-h1); font-weight: var(--peso-display); line-height: 1.06; }
.compra__promessa { font-size: var(--t-corpo-g); font-weight: 300; color: var(--tinta-suave); line-height: 1.5; }

.preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e2) var(--e3); }
.preco strong { font-size: 34px; font-weight: var(--peso-display); letter-spacing: -.01em; }
.preco__parcela { width: 100%; font-size: var(--t-peq); color: var(--tinta-suave); }

.beneficios { display: flex; flex-direction: column; gap: 11px; padding: var(--e4); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--fundo); }
.beneficios li { display: grid; grid-template-columns: 12px 1fr; gap: 11px; align-items: start; font-size: var(--t-peq); line-height: 1.5; }
.beneficios svg { margin-top: 5px; }

.escolha-formato { display: flex; flex-direction: column; gap: var(--e2); }
.formato {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.formato:hover { border-color: var(--caramelo-40); }
.formato:has(input:checked) { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.formato input { appearance: none; width: 18px; height: 18px; border: 1px solid var(--fio); border-radius: 999px; display: grid; place-items: center; margin: 0; }
.formato input:checked { border-color: var(--acento); }
.formato input:checked::after { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--acento); }
.formato__nome { font-size: var(--t-peq); font-weight: 500; }
.formato__nome span { display: block; font-size: var(--t-micro); font-weight: var(--peso-corpo); color: var(--tinta-suave); }
.formato__valor { text-align: right; font-size: var(--t-peq); font-weight: var(--peso-forte); }
.formato__valor span { display: block; font-size: var(--t-micro); font-weight: var(--peso-corpo); color: var(--acento); }

.entrega {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linha); border-radius: var(--raio);
  font-size: var(--t-micro); color: var(--tinta-suave); line-height: 1.45;
}
.entrega svg { width: 18px; height: 18px; color: var(--acento); flex: none; }

.selos-pdp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); padding-top: var(--e3); }
.selo-pdp { display: flex; flex-direction: column; align-items: center; gap: var(--e2); text-align: center; }
.selo-pdp svg { width: 26px; height: 26px; color: var(--acento); }
.selo-pdp span { font-size: 11px; line-height: 1.3; color: var(--tinta-suave); }

.tabela-ativos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
.ativo-card {
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e4);
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie);
}
.ativo-card ul { display: flex; flex-direction: column; gap: 7px; }
.ativo-card li { display: grid; grid-template-columns: 12px 1fr; gap: 10px; align-items: start; font-size: var(--t-peq); color: var(--tinta-suave); line-height: 1.45; }
.ativo-card svg { margin-top: 5px; }

.ritual { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5); counter-reset: passo; }
.ritual__passo { counter-increment: passo; display: flex; flex-direction: column; gap: var(--e2); }
.ritual__passo::before {
  content: counter(passo, decimal-leading-zero);
  font-size: var(--t-h2); font-weight: var(--peso-display); line-height: 1;
  color: var(--rosa);
}
.ritual__passo h3 { font-size: var(--t-h3); font-weight: var(--peso-forte); }
.ritual__passo p { font-size: var(--t-peq); color: var(--tinta-suave); line-height: 1.55; }

.completa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
.completa__item { display: flex; flex-direction: column; gap: var(--e3); }
.completa__item h3 { font-size: var(--t-peq); font-weight: var(--peso-forte); }
.completa__item p { font-size: var(--t-micro); color: var(--tinta-suave); line-height: 1.45; }
.completa__preco { display: flex; align-items: baseline; gap: var(--e2); font-size: var(--t-peq); font-weight: var(--peso-forte); }
.completa__preco s { font-weight: var(--peso-corpo); color: var(--tinta-tenue); font-size: var(--t-micro); }

/* ============================================================
   responsivo
   ============================================================ */

@media (max-width: 1040px) {
  .peles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ativos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abertura__nota { left: var(--e4); }
}

@media (max-width: 900px) {
  .menu, .topo__acoes .so-desktop { display: none; }
  .abrir-menu { display: inline-flex; }
  .topo__grade { grid-template-columns: 1fr auto 1fr; min-height: 64px; }
  .topo__marca .logo-ilumina { width: 78px; }

  .abertura__grade { grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
  .abertura__foto { order: -1; }
  .abertura__nota { position: static; max-width: none; margin-top: var(--e3); display: flex; align-items: baseline; gap: var(--e2); }
  .abertura__nota strong { font-size: var(--t-h3); }
  .abertura__nota span { margin-top: 0; }

  .medica__grade { grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
  .rotinas { grid-template-columns: minmax(0, 1fr); }
  .depoimentos { grid-template-columns: minmax(0, 1fr); }
  .pdp { grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
  .galeria { position: static; }
  .tabela-ativos { grid-template-columns: minmax(0, 1fr); }
  .ritual { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
  .completa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .faixa { padding-left: var(--e3); padding-right: var(--e3); }
  .peles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ativos { grid-template-columns: minmax(0, 1fr); }
  .selos-pdp { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4) var(--e3); }
  .rodape__grade { grid-template-columns: minmax(0, 1fr); gap: var(--e5); padding-top: var(--e6); }
  .aviso-topo p { letter-spacing: .06em; font-size: 11px; }
  .abertura__acoes .btn { width: 100%; }
  .completa { grid-template-columns: minmax(0, 1fr); }
  .prova__resumo__texto { max-width: 36ch; }
.prova__resumo { gap: var(--e3) var(--e4); }
}