/* ==========================================================================
   El Hair — Child theme (Blocksy)
   1. Tokens
   2. Base
   3. Tipografia
   4. Botões e ligações
   5. Layout de secções
   6. Componentes
   7. Patterns por página
   8. Skin do tema (Blocksy header/footer, WooCommerce)
   9. Movimento
   ========================================================================== */

/* 1. TOKENS ================================================================ */

:root {
  /* Cor — claro */
  --el-fundo:          #F2EDE6;
  --el-superficie:     #FCFAF7;
  --el-superficie-2:   #E8E0D4;
  --el-texto:          #141210;
  --el-texto-suave:    #4A443D;
  --el-marca:          #B98B57;
  --el-marca-texto:    #785526;
  --el-erro:           #B32D24;
  --el-linha:          #D6CBBB;
  --el-foco:           #785526;

  /* Cor — escuro (footer, secções ink) */
  --el-escuro-fundo:   #141210;
  --el-escuro-texto:   #F2EDE6;
  --el-escuro-suave:   #B8AFA3;
  --el-escuro-linha:   #37312B;
  --el-escuro-erro:    #E8A49E;
  --el-escuro-tenue:   #7C736A;

  /* Tipografia */
  --el-display: "Bodoni Moda", "Times New Roman", Georgia, serif;
  --el-ui:      "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  --el-t-etiqueta:   0.66rem;
  --el-t-corpo:      1.03rem;
  --el-t-pequeno:    0.9rem;
  --el-t-botao:      0.95rem;
  --el-t-display-m:  1.5rem;
  --el-t-display-l:  clamp(1.9rem, 4vw, 2.75rem);
  --el-t-display-pg: clamp(2.75rem, 7vw, 5rem);
  --el-t-display-xl: clamp(2.75rem, 9vw, 6.5rem);

  /* Espaço — escala base 8 */
  --el-e1: 8px;
  --el-e2: 16px;
  --el-e3: 24px;
  --el-e4: 40px;
  --el-e5: 64px;
  --el-e6: 96px;
  --el-e7: 144px;

  /* Layout */
  --el-container: 1240px;
  --el-goteira:   24px;
  --el-estreito:  820px;
  --el-header-h:  76px;
}

/* 2. BASE ================================================================== */

body.elhair {
  background: var(--el-fundo);
  color: var(--el-texto);
  font-family: var(--el-ui);
  font-weight: 400;
  font-size: var(--el-t-corpo);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Raio 0 em tudo. Sem sombras. Filetes 1px. */
body.elhair :where(a, button, input, select, textarea, img,
  .wp-block-button__link, .wp-block-group, .wp-block-cover,
  .wp-block-image img, .el-cartao) {
  border-radius: 0;
}

body.elhair :where(.wp-block-group, .wp-block-cover, .wp-block-image, .el-cartao) {
  box-shadow: none;
}

body.elhair a { color: var(--el-marca-texto); }
body.elhair a:hover { color: var(--el-texto); }

/* Anel de foco — 3px, offset 2px */
body.elhair :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--el-foco);
  outline-offset: 2px;
}

body.elhair img { max-width: 100%; height: auto; }

/* Números tabulares onde há preços e durações */
body.elhair :where(.el-num, .el-preco, .el-duracao, .el-meta, .el-chip, time) {
  font-variant-numeric: tabular-nums;
}

/* 3. TIPOGRAFIA ============================================================ */

body.elhair :where(h1, h2, h3, h4, .el-display-xl, .el-display-l, .el-display-m) {
  font-family: var(--el-display);
  font-weight: 400;
  color: inherit;
}

.el-display-xl {
  font-size: var(--el-t-display-xl);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--el-e3);
}

.el-display-pagina {
  font-family: var(--el-display);
  font-weight: 400;
  font-size: var(--el-t-display-pg);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 var(--el-e3);
}

.el-display-l {
  font-size: var(--el-t-display-l);
  line-height: 1.12;
  margin: 0 0 var(--el-e2);
}

.el-display-m {
  font-family: var(--el-display);
  font-weight: 400;
  font-size: var(--el-t-display-m);
  line-height: 1.25;
  margin: 0 0 var(--el-e1);
}

.el-italico { font-style: italic; }

/* Etiqueta — Karla 700 · 0.66rem · uppercase · ls 0.22em · #785526 */
.el-etiqueta {
  font-family: var(--el-ui);
  font-weight: 700;
  font-size: var(--el-t-etiqueta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--el-marca-texto);
  margin: 0 0 12px;
  line-height: 1.4;
}

.el-etiqueta a { color: inherit; text-decoration: none; }

/* Corpo — máx 68ch */
.el-corpo {
  font-family: var(--el-ui);
  font-size: var(--el-t-corpo);
  line-height: 1.7;
  color: var(--el-texto-suave);
  max-width: 68ch;
  margin: 0 0 var(--el-e2);
}

.el-corpo--curto { max-width: 52ch; }
.el-corpo--medio { max-width: 60ch; }
.el-corpo--largo { max-width: 68ch; }
.el-corpo--forte { color: var(--el-texto); font-size: 1.15rem; max-width: 56ch; }

.el-pequeno {
  font-family: var(--el-ui);
  font-size: var(--el-t-pequeno);
  line-height: 1.7;
  color: var(--el-texto-suave);
  margin: 0;
}

/* Contexto escuro */
.el-ink { background: var(--el-escuro-fundo); color: var(--el-escuro-texto); }
.el-ink .el-corpo,
.el-ink .el-pequeno { color: var(--el-escuro-suave); }
.el-ink .el-etiqueta { color: var(--el-marca); }
.el-ink a { color: var(--el-escuro-texto); }
.el-ink a:hover { color: var(--el-marca); }

/* 4. BOTÕES E LIGAÇÕES ===================================================== */

/* Botão — Karla 600 · 0.95rem · ls 0.02em · sem uppercase · altura 48px · raio 0 */
body.elhair .el-btn,
body.elhair .is-style-el-primario .wp-block-button__link,
body.elhair .is-style-el-secundario .wp-block-button__link,
body.elhair .is-style-el-claro .wp-block-button__link {
  font-family: var(--el-ui);
  font-weight: 600;
  font-size: var(--el-t-botao);
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  height: 48px;
  min-height: 48px;
  padding: 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 0;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* Primário: ink → hover camel-texto → premido inversão (150ms, sem deslocamento) */
body.elhair .el-btn--primario,
body.elhair .is-style-el-primario .wp-block-button__link {
  background: var(--el-texto);
  color: var(--el-fundo);
  border-color: var(--el-texto);
}
body.elhair .el-btn--primario:hover,
body.elhair .is-style-el-primario .wp-block-button__link:hover {
  background: var(--el-marca-texto);
  border-color: var(--el-marca-texto);
  color: var(--el-superficie);
}
body.elhair .el-btn--primario:active,
body.elhair .is-style-el-primario .wp-block-button__link:active {
  background: var(--el-fundo);
  color: var(--el-texto);
  border-color: var(--el-texto);
}

/* Secundário: transparente + borda ink → hover inversão */
body.elhair .el-btn--secundario,
body.elhair .is-style-el-secundario .wp-block-button__link {
  background: transparent;
  color: var(--el-texto);
  border-color: var(--el-texto);
}
body.elhair .el-btn--secundario:hover,
body.elhair .is-style-el-secundario .wp-block-button__link:hover {
  background: var(--el-texto);
  color: var(--el-fundo);
}
body.elhair .el-btn--secundario:active,
body.elhair .is-style-el-secundario .wp-block-button__link:active {
  background: var(--el-marca-texto);
  border-color: var(--el-marca-texto);
  color: var(--el-superficie);
}

/* Sobre fundo escuro: primário creme → hover camel */
body.elhair .el-ink .el-btn--primario,
body.elhair .el-ink .is-style-el-primario .wp-block-button__link,
body.elhair .el-btn--claro,
body.elhair .is-style-el-claro .wp-block-button__link {
  background: var(--el-fundo);
  color: var(--el-texto);
  border-color: var(--el-fundo);
}
body.elhair .el-ink .el-btn--primario:hover,
body.elhair .el-ink .is-style-el-primario .wp-block-button__link:hover,
body.elhair .el-btn--claro:hover,
body.elhair .is-style-el-claro .wp-block-button__link:hover {
  background: var(--el-marca);
  border-color: var(--el-marca);
  color: var(--el-texto);
}
body.elhair .el-ink .el-btn--primario:active,
body.elhair .el-btn--claro:active {
  background: var(--el-texto);
  color: var(--el-fundo);
  border-color: var(--el-fundo);
}

/* Secundário sobre escuro */
body.elhair .el-ink .el-btn--secundario,
body.elhair .el-btn--secundario-claro {
  background: transparent;
  color: var(--el-fundo);
  border-color: var(--el-fundo);
}
body.elhair .el-ink .el-btn--secundario:hover,
body.elhair .el-btn--secundario-claro:hover {
  background: var(--el-fundo);
  color: var(--el-texto);
}
body.elhair .el-btn--secundario-claro:active {
  background: var(--el-marca);
  border-color: var(--el-marca);
  color: var(--el-texto);
}

/* Ligação com filete camel */
body.elhair .el-link-filete {
  font-family: var(--el-ui);
  font-weight: 600;
  font-size: var(--el-t-botao);
  letter-spacing: 0.02em;
  color: var(--el-marca-texto);
  text-decoration: none;
  border-bottom: 1px solid var(--el-marca);
  padding-bottom: 4px;
  display: inline-block;
  transition: color 150ms ease, border-color 150ms ease;
}
body.elhair .el-link-filete:hover { color: var(--el-texto); border-color: var(--el-texto); }
body.elhair .el-ink .el-link-filete { color: var(--el-marca); }
body.elhair .el-ink .el-link-filete:hover { color: var(--el-escuro-texto); border-color: var(--el-escuro-texto); }

/* Grupo de botões */
.el-botoes { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* 5. LAYOUT DE SECÇÕES ===================================================== */

.el-container {
  max-width: var(--el-container);
  margin-inline: auto;
  padding-inline: var(--el-goteira);
  box-sizing: border-box;
  width: 100%;
}

.el-container--estreito { max-width: calc(var(--el-estreito) + var(--el-goteira) * 2); }
.el-container--medio    { max-width: calc(920px + var(--el-goteira) * 2); }

/* Secções: 96px entre si */
.el-seccao { padding-block: var(--el-e6) 0; }
.el-seccao--primeira { padding-block: var(--el-e5) 0; }
.el-seccao--fecho { padding-block: var(--el-e6); }
.el-seccao--cheia { padding-block: var(--el-e6); }
.el-seccao--sem-topo { padding-block: 0; }

@media (max-width: 780px) {
  :root { --el-e6: 64px; --el-e7: 96px; }
}

.el-duas-colunas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--el-e4) var(--el-e6);
  align-items: flex-start;
}
.el-duas-colunas--centro { align-items: center; }
.el-col-4 { flex: 4 1 280px; min-width: 0; }
.el-col-5 { flex: 5 1 300px; min-width: 0; }
.el-col-6 { flex: 6 1 320px; min-width: 0; }
.el-col-7 { flex: 7 1 360px; min-width: 0; }
.el-col-1 { flex: 1 1 320px; min-width: 0; }
.el-inverte { flex-direction: row-reverse; }
.el-desce-64 { margin-top: var(--el-e5); }

.el-grelha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--el-e3);
  align-items: start;
}
.el-grelha--240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.el-grelha--300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

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

/* Separador swash */
.el-swash { display: block; margin: 10px 0 14px; }
.el-swash--centro { margin-inline: auto; }

/* Placeholder de imagem — creme 2 + inicial Bodoni em camel */
.el-placeholder {
  background: var(--el-superficie-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.el-placeholder > span {
  font-family: var(--el-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--el-marca);
}
.el-placeholder--pequeno > span { font-size: 4rem; }
.el-ratio-3-4  { aspect-ratio: 3 / 4; }
.el-ratio-4-3  { aspect-ratio: 4 / 3; }
.el-ratio-2-1  { aspect-ratio: 2 / 1; }
.el-ratio-9-16 { aspect-ratio: 9 / 16; }

/* Foto com zoom no hover */
.el-foto { overflow: hidden; display: block; }
.el-foto > img,
.el-foto > .el-foto-bg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  transition: transform 400ms ease;
}
.el-foto:hover > img,
.el-foto:hover > .el-foto-bg,
a:hover > .el-foto > img,
a:hover > .el-foto > .el-foto-bg { transform: scale(1.03); }

/* Cartão de serviço — sem moldura, sem sombra, foto 3:4, alturas desiguais */
.el-cartao-servico { text-decoration: none; color: var(--el-texto); display: block; }
.el-cartao-servico:hover { color: var(--el-texto); }
.el-cartao-servico .el-etiqueta { margin: var(--el-e2) 0 6px; }
.el-cartao-servico .el-display-m { margin: 0 0 6px; }
.el-cartao-servico .el-meta { font-size: var(--el-t-pequeno); color: var(--el-texto-suave); margin: 0; }
.el-desloca-40 { margin-top: var(--el-e4); }
.el-desloca-80 { margin-top: 80px; }
@media (max-width: 780px) {
  .el-desloca-40, .el-desloca-80, .el-desce-64 { margin-top: 0; }
}

/* Cartão de superfície com filete camel no topo */
.el-cartao {
  background: var(--el-superficie);
  border-top: 1px solid var(--el-marca);
  padding: 28px var(--el-e3);
}
.el-cartao .el-display-m { margin: 0 0 12px; }
.el-cartao .el-corpo { margin: 0; }
.el-cartao .el-corpo + .el-link-filete { margin-top: var(--el-e2); }

/* Chip / meta */
.el-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 var(--el-e4); }
.el-chip {
  font-family: var(--el-ui);
  font-weight: 700;
  font-size: var(--el-t-etiqueta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--el-marca);
  color: var(--el-marca-texto);
  padding: 8px 14px;
  line-height: 1.2;
}
.el-chip--neutro {
  font-weight: 400;
  font-size: var(--el-t-pequeno);
  letter-spacing: normal;
  text-transform: none;
  border-color: var(--el-linha);
  color: var(--el-texto-suave);
  padding: 6px 14px;
}

/* Tabela de preços — filete 1px, sem moldura exterior */
.el-tabela {
  background: var(--el-superficie);
  border-top: 1px solid var(--el-texto);
}
.el-tabela--ink { background: transparent; border: 1px solid var(--el-escuro-linha); }

.el-linha-preco {
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--el-e3);
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 20px;
  border-bottom: 1px solid var(--el-linha);
}
.el-tabela--ink .el-linha-preco { border-bottom-color: var(--el-escuro-linha); padding: 18px 20px; }
.el-tabela--ink .el-linha-preco:last-child { border-bottom: 0; }

.el-linha-preco .el-nome    { font-size: 0.98rem; flex: 2 1 200px; margin: 0; }
.el-linha-preco .el-duracao { font-size: var(--el-t-pequeno); color: var(--el-texto-suave); margin: 0; white-space: nowrap; }
.el-linha-preco .el-preco   { font-weight: 600; font-size: 0.98rem; margin: 0; white-space: nowrap; min-width: 82px; text-align: right; }
.el-tabela--ink .el-linha-preco .el-nome,
.el-tabela--ink .el-linha-preco .el-preco { color: var(--el-escuro-texto); font-weight: 400; }
.el-tabela--ink .el-linha-preco .el-duracao { color: var(--el-escuro-suave); }

.el-linha-preco--larga { padding: 20px; }
.el-linha-preco--larga .el-nome { font-size: 1rem; }
.el-linha-preco--larga .el-preco { font-size: 1rem; flex: 0 0 92px; }

/* Grupos de preços — 2 colunas a partir de 480px por coluna */
.el-grupos-preco {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: var(--el-e4) var(--el-e6);
  align-items: start;
}
.el-grupo-preco h2,
.el-grupo-preco .el-display-m { margin: 0 0 4px; }
.el-grupo-preco .el-swash { margin: 0 0 12px; }

/* Lista editorial numerada */
.el-lista-editorial { border-top: 1px solid var(--el-texto); }
.el-lista-editorial > a {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  align-items: baseline;
  padding: 28px 8px;
  border-bottom: 1px solid var(--el-linha);
  text-decoration: none;
  color: var(--el-texto);
  transition: background-color 400ms ease;
}
.el-lista-editorial > a:hover { background: var(--el-superficie); color: var(--el-texto); }
.el-lista-editorial .el-num { flex: 0 0 110px; }
.el-lista-editorial .el-centro { flex: 2 1 240px; }
.el-lista-editorial .el-centro .el-display-m { display: block; margin: 0 0 6px; }
.el-lista-editorial .el-centro .el-angulo {
  font-size: var(--el-t-botao);
  line-height: 1.6;
  color: var(--el-texto-suave);
  display: block;
  max-width: 52ch;
  margin: 0;
}
.el-lista-editorial .el-meta {
  font-size: var(--el-t-botao);
  color: var(--el-texto-suave);
  flex: 1 1 160px;
  text-align: right;
  white-space: nowrap;
  margin: 0;
}
@media (max-width: 640px) {
  .el-lista-editorial .el-meta { text-align: left; flex-basis: 100%; }
}

/* Secções numeradas (Antes da tua marcação) */
.el-seccao-num { border-top: 1px solid var(--el-texto); padding: var(--el-e4) 0; }
.el-seccao-num h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin: 0 0 20px; }
.el-seccao-num .el-corpo { margin: 0 0 14px; }
.el-seccao-num .el-corpo:last-child { margin-bottom: 0; }

/* Passos "Como fazemos" */
.el-passo { border-top: 1px solid var(--el-marca); padding: var(--el-e3) 0 0; }
.el-passo .el-etiqueta { margin: 0 0 10px; }
.el-passo .el-display-m { margin: 0 0 10px; }
.el-passo .el-corpo { font-size: var(--el-t-botao); margin: 0; }

/* Tabelas e FAQ são blocos do core (editáveis no Gutenberg): é preciso
   neutralizar o espaçamento de fluxo que o core aplica entre irmãos. */
body.elhair :where(.el-tabela, .el-grupos-preco, .el-faq, .el-linha-preco,
  .el-faq-item, .el-grupo-preco, .el-legal-seccao) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}
body.elhair .el-grupo-preco > .el-tabela { margin-top: 0; }

/* FAQ */
.el-faq { border-top: 1px solid var(--el-texto); max-width: 820px; }
.el-faq > div,
.el-faq-item { border-bottom: 1px solid var(--el-linha); padding: var(--el-e3) 8px; }
body.elhair .el-faq .el-pergunta {
  font-family: var(--el-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 10px;
}
body.elhair .el-faq .el-corpo { font-size: 1rem; margin: 0; max-width: 68ch; }

/* Destaques — faixa 9:16 com scroll-snap */
.el-destaques {
  display: flex;
  gap: var(--el-e2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: calc(var(--el-goteira) * -1);
  padding: 0 var(--el-goteira) 8px;
}
.el-destaques::-webkit-scrollbar { display: none; }
.el-destaque { flex: 0 0 auto; width: min(240px, 66vw); scroll-snap-align: start; }
.el-destaque .el-moldura {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--el-superficie-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-destaque .el-moldura > img,
.el-destaque .el-moldura > video,
.el-destaque .el-moldura > .el-foto-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center top;
  transition: transform 400ms ease;
}
.el-destaque:hover .el-moldura > img,
.el-destaque:hover .el-moldura > .el-foto-bg { transform: scale(1.03); }
.el-destaque .el-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(20, 18, 16, 0.45), rgba(20, 18, 16, 0) 40%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.el-destaque .el-play {
  width: 56px;
  height: 56px;
  border: 1px solid var(--el-fundo);
  background: rgba(20, 18, 16, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-destaque .el-etiqueta { margin: 14px 0 4px; }
.el-destaque .el-nome { font-family: var(--el-display); font-size: 1.25rem; margin: 0; }

/* Lightbox de vídeo */
.el-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(20, 18, 16, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--el-e3);
}
.el-lightbox[hidden] { display: none; }
.el-lightbox video {
  max-width: min(420px, 92vw);
  max-height: 86vh;
  aspect-ratio: 9 / 16;
  width: 100%;
  background: #000;
  border: 0;
}
.el-lightbox .el-fechar {
  position: absolute;
  top: var(--el-e3);
  right: var(--el-e3);
  background: none;
  border: 1px solid var(--el-fundo);
  color: var(--el-fundo);
  font-family: var(--el-ui);
  font-weight: 700;
  font-size: var(--el-t-etiqueta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  min-height: 48px;
  padding: 0 18px;
  cursor: pointer;
}

/* Galeria — filtros + masonry por CSS columns */
.el-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 var(--el-e4); }
.el-filtro {
  font-family: var(--el-ui);
  font-weight: 700;
  font-size: var(--el-t-etiqueta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  color: var(--el-texto);
  border: 1px solid var(--el-linha);
  padding: 12px 18px;
  min-height: 44px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.el-filtro:hover { border-color: var(--el-texto); }
.el-filtro[aria-pressed="true"] {
  background: var(--el-texto);
  color: var(--el-fundo);
  border-color: var(--el-texto);
}
.el-masonry { columns: 320px 3; column-gap: var(--el-e3); }
.el-masonry > figure,
.el-masonry > .el-item {
  break-inside: avoid;
  margin: 0 0 var(--el-e3);
  display: block;
}
.el-masonry .el-etiqueta { margin: 12px 0 2px; }
.el-masonry figcaption { font-size: var(--el-t-pequeno); color: var(--el-texto-suave); }
.el-item[hidden] { display: none; }

/* Estado vazio */
.el-vazio {
  border-top: 1px solid var(--el-marca);
  background: var(--el-superficie);
  padding: var(--el-e5) var(--el-e3);
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.el-vazio .el-display-m { margin: 0 0 12px; }
.el-vazio .el-corpo { margin: 0 auto var(--el-e4); max-width: 44ch; }
.el-vazio .el-corpo:last-child { margin-bottom: 0; }
.el-vazio[hidden] { display: none; }

/* Tabs (A minha conta) */
.el-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--el-texto); margin: 0 0 var(--el-e6); }
.el-tab {
  font-family: var(--el-ui);
  font-weight: 700;
  font-size: var(--el-t-etiqueta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: transparent;
  color: var(--el-texto);
  border: 0;
  padding: 16px var(--el-e3);
  min-height: 48px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.el-tab[aria-selected="true"] { background: var(--el-texto); color: var(--el-fundo); }
.el-painel[hidden] { display: none; }

/* Campo de formulário — filete só inferior, etiqueta sempre visível */
.el-campo { display: block; margin: 0 0 28px; }
.el-campo > span.el-rotulo {
  font-family: var(--el-ui);
  font-weight: 700;
  font-size: var(--el-t-etiqueta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--el-texto-suave);
  display: block;
  margin-bottom: 8px;
}
body.elhair .el-campo input,
body.elhair .el-campo textarea,
body.elhair .el-campo select,
body.elhair .el-form-linha input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--el-ui);
  font-size: 1rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--el-texto);
  border-radius: 0;
  padding: 10px 0;
  min-height: 48px;
  color: var(--el-texto);
  box-shadow: none;
}
.el-campo .el-ajuda { font-size: 0.8rem; color: var(--el-texto-suave); display: block; margin-top: 6px; }
.el-erro { font-family: var(--el-ui); font-size: var(--el-t-pequeno); color: var(--el-erro); margin: 12px 0 0; }
.el-erro::before { content: "\26A0  "; }
.el-erro[hidden] { display: none; }
.el-ink .el-erro { color: var(--el-escuro-erro); }
.el-ink .el-campo input,
.el-ink .el-form-linha input { border-bottom-color: var(--el-fundo); color: var(--el-fundo); }
.el-ink .el-campo input::placeholder,
.el-ink .el-form-linha input::placeholder { color: var(--el-escuro-suave); }

.el-form-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 520px;
  margin-inline: auto;
}
.el-form-linha input { flex: 1 1 240px; width: auto; }
.el-form-linha button { flex: 0 0 auto; }

/* Barra de confiança */
.el-confianca {
  border-top: 1px solid var(--el-linha);
  border-bottom: 1px solid var(--el-linha);
  background: var(--el-superficie);
}
.el-confianca .el-container {
  padding-block: var(--el-e4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--el-e3);
}
.el-confianca p { margin: 0; color: var(--el-texto); }

/* Bloco de fecho com filetes ink */
.el-fecho {
  border-top: 1px solid var(--el-texto);
  border-bottom: 1px solid var(--el-texto);
  padding: var(--el-e5) 0;
  text-align: center;
}
.el-fecho .el-display-l { margin: 0 auto 20px; max-width: 22ch; }
.el-fecho .el-corpo { margin: 0 auto var(--el-e4); max-width: 56ch; }
.el-fecho--linha {
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  gap: var(--el-e3);
  align-items: center;
  justify-content: space-between;
  padding: 56px 0;
}
.el-fecho--linha .el-display-l { margin: 0; max-width: 24ch; }

/* Caixa ink centrada (CTA de serviços / academia / loja) */
.el-caixa-ink {
  background: var(--el-escuro-fundo);
  color: var(--el-escuro-texto);
  padding: var(--el-e5) var(--el-e3);
  text-align: center;
}
.el-caixa-ink .el-display-l { margin: 0 auto 20px; max-width: 24ch; }
.el-caixa-ink .el-corpo { margin: 0 auto var(--el-e4); max-width: 52ch; color: var(--el-escuro-suave); }

/* 7. PATTERNS POR PÁGINA =================================================== */

/* Hero "capa de revista"
   As regras de posicionamento repetem o CSS do core/cover de propósito:
   se um plugin de optimização remover o block library CSS, o hero continua
   a funcionar. */
body.elhair .el-hero.wp-block-cover,
body.elhair .el-hero .wp-block-cover {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: calc(100dvh - var(--el-header-h));
  padding: 0;
  align-items: flex-end;
  border-radius: 0;
}
body.elhair .el-hero .wp-block-cover__background,
body.elhair .el-hero .wp-block-cover__gradient-background {
  position: absolute;
  inset: 0;
  z-index: 1;
}
body.elhair .el-hero .wp-block-cover__image-background,
body.elhair .el-hero img.wp-block-cover__image-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: center 20%;
  z-index: 0;
  animation: el-img-in 1200ms ease-out both;
}
body.elhair .el-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
}
.el-hero-conteudo { padding-block: var(--el-e6) 56px; }
.el-hero-conteudo .el-etiqueta { color: var(--el-marca); }
.el-hero-conteudo h1 { color: var(--el-fundo); max-width: 14ch; }
.el-hero-conteudo h1 em { font-style: italic; color: #E8D5BC; }
.el-hero-conteudo .el-corpo { color: var(--el-superficie-2); max-width: 46ch; margin-bottom: var(--el-e4); }

/* Marcação — Passo 0 + Amelia */
.el-passo-zero { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.el-passo-zero a { text-decoration: none; color: var(--el-texto); display: block; }
.el-passo-zero .el-nome { font-family: var(--el-display); font-size: 1.25rem; display: block; margin: 12px 0 4px; }
.el-passo-zero .el-meta { font-size: 0.85rem; color: var(--el-texto-suave); display: block; margin: 0; }

.el-amelia { scroll-margin-top: calc(var(--el-header-h) + 16px); }

/* ---- Blog ---------------------------------------------------------------- */

/* Chips de categoria */
.el-chips-cat { display: flex; flex-wrap: wrap; gap: var(--el-e1); }
body.elhair .el-chip-cat {
  font-family: var(--el-ui);
  font-size: 0.85rem;
  color: var(--el-texto-suave);
  border: 1px solid var(--el-linha);
  padding: 6px 14px;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease;
}
body.elhair .el-chip-cat:hover,
body.elhair .el-chip-cat.is-activo {
  border-color: var(--el-texto);
  color: var(--el-texto);
}

/* Artigo em destaque */
body.elhair .el-destaque-artigo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--el-e6);
  align-items: center;
  text-decoration: none;
  color: var(--el-texto);
  border-top: 1px solid var(--el-texto);
  padding-top: var(--el-e4);
}
body.elhair .el-destaque-artigo:hover { color: var(--el-texto); }
.el-destaque-artigo .el-display-l { margin: 0 0 16px; }
.el-destaque-artigo .el-corpo { margin: 0 0 20px; }
.el-destaque-artigo .el-meta { font-size: 0.85rem; color: var(--el-texto-suave); margin: 0; }

/* Grelha de artigos */
.el-grelha-artigos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--el-e4) 32px;
}

body.elhair .el-cartao-artigo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: var(--el-texto);
}
body.elhair .el-cartao-artigo:hover { color: var(--el-texto); }
.el-cartao-artigo .el-etiqueta { margin: 0; }
.el-cartao-artigo .el-titulo {
  font-family: var(--el-display);
  font-weight: 400;
  font-size: var(--el-t-display-m);
  line-height: 1.2;
}
.el-cartao-artigo .el-excerto {
  font-size: var(--el-t-botao);
  line-height: 1.65;
  color: var(--el-texto-suave);
}
.el-cartao-artigo .el-meta { font-size: 0.85rem; color: var(--el-texto-suave); }
.el-cartao-artigo .el-foto img,
.el-cartao-artigo .el-placeholder { width: 100%; }

/* Paginação */
body.elhair .el-paginacao { margin-top: var(--el-e5); }
body.elhair .el-paginacao .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--el-e1);
  align-items: center;
}
body.elhair .el-paginacao .page-numbers {
  font-family: var(--el-ui);
  font-weight: 700;
  font-size: var(--el-t-etiqueta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--el-texto);
  text-decoration: none;
  border: 1px solid var(--el-linha);
  min-height: 44px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
body.elhair .el-paginacao .page-numbers:hover { border-color: var(--el-texto); }
body.elhair .el-paginacao .page-numbers.current {
  background: var(--el-texto);
  color: var(--el-fundo);
  border-color: var(--el-texto);
}
body.elhair .el-paginacao .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- Artigo -------------------------------------------------------------- */

.el-artigo-titulo {
  font-family: var(--el-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.el-artigo-meta { font-size: 0.9rem; color: var(--el-texto-suave); margin: 0 0 var(--el-e4); }

.el-artigo-capa { margin: 0 0 var(--el-e4); }
.el-artigo-capa img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.el-artigo-lead {
  font-family: var(--el-ui);
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--el-texto);
  margin: 0;
}

/* Corpo vindo do editor — alinhado aos tokens sem obrigar a formatar à mão */
.el-artigo { padding-top: var(--el-e4); }

.el-artigo > * { margin-block: 0 16px; }

.el-artigo h2 {
  font-family: var(--el-display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.2;
  margin: var(--el-e4) 0 14px;
}
.el-artigo h3 {
  font-family: var(--el-display);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.25;
  margin: var(--el-e3) 0 12px;
}
.el-artigo p,
.el-artigo li {
  font-family: var(--el-ui);
  font-size: var(--el-t-corpo);
  line-height: 1.75;
  color: var(--el-texto-suave);
}
.el-artigo ul,
.el-artigo ol { padding-left: 20px; margin-bottom: 16px; }
.el-artigo li { margin-bottom: 8px; }
.el-artigo li::marker { color: var(--el-marca); }

.el-artigo a { color: var(--el-marca-texto); }

.el-artigo img,
.el-artigo .wp-block-image img { width: 100%; height: auto; display: block; }
.el-artigo figure { margin: var(--el-e4) 0; }
.el-artigo figcaption {
  font-family: var(--el-ui);
  font-size: 0.85rem;
  color: var(--el-texto-suave);
  margin-top: 8px;
}

/* Citação — filete esquerdo camel */
.el-artigo blockquote,
.el-artigo .wp-block-quote {
  margin: var(--el-e6) 0;
  padding: 0 0 0 var(--el-e3);
  border-left: 1px solid var(--el-marca);
  border-top: 0;
  background: none;
}
.el-artigo blockquote p,
.el-artigo .wp-block-quote p {
  font-family: var(--el-display);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.35;
  color: var(--el-texto);
  margin: 0;
}
.el-artigo blockquote cite {
  font-family: var(--el-ui);
  font-style: normal;
  font-size: 0.85rem;
  color: var(--el-texto-suave);
  display: block;
  margin-top: 12px;
}

/* Caixa de destaque ("sinais") */
.el-caixa-sinais {
  background: var(--el-superficie);
  border-top: 1px solid var(--el-marca);
  padding: 32px 28px;
  margin: var(--el-e4) 0 var(--el-e6);
}
.el-caixa-sinais .el-etiqueta { margin: 0 0 16px; }
.el-caixa-sinais ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.el-caixa-sinais li {
  font-family: var(--el-ui);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--el-texto-suave);
  margin: 0;
  padding-left: 18px;
  position: relative;
}
.el-caixa-sinais li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--el-marca);
}
.el-caixa-sinais li::marker { content: none; }
.el-caixa-sinais > p:last-child {
  font-size: var(--el-t-botao);
  line-height: 1.6;
  color: var(--el-texto-suave);
  margin: 20px 0 0;
}

/* ---- Páginas legais ------------------------------------------------------ */

.el-legal-seccao {
  border-bottom: 1px solid var(--el-linha);
  padding: var(--el-e4) 0;
}
.el-legal-seccao:first-of-type { padding-top: var(--el-e3); }
.el-legal-seccao h2 {
  font-family: var(--el-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  margin: 0 0 20px;
}
.el-legal-seccao .el-etiqueta { margin: 0 0 12px; }
.el-legal-seccao .el-corpo { margin: 0 0 14px; }
.el-legal-seccao .el-corpo:last-child { margin-bottom: 0; }

/* ---- 404 ----------------------------------------------------------------- */

.el-404 { text-align: center; padding-block: 120px 60px; }
.el-404-numero {
  font-family: var(--el-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(6rem, 18vw, 11rem);
  line-height: 1;
  color: var(--el-marca);
  margin: 0;
}
.el-404 .el-swash { margin: 16px auto 32px; }
.el-404 .el-display-l { margin: 0 0 16px; }
.el-404 .el-corpo { max-width: 44ch; margin: 0 auto var(--el-e4); }
.el-404-botoes { justify-content: center; }

/* Nota de implementação / pendente do kick-off */
.el-nota {
  font-family: var(--el-ui);
  font-size: var(--el-t-pequeno);
  color: var(--el-texto-suave);
  margin: var(--el-e2) 0 0;
}

/* Mapa */
.el-mapa { width: 100%; height: 520px; border: 1px solid var(--el-linha); display: block; }

/* 8. SKIN DO TEMA ========================================================== */

/* ---- Cabeçalho próprio (Header.dc.html) ---------------------------------- */

body.elhair.el-header-proprio #header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: block;
  background: var(--el-fundo);
  border-bottom: 1px solid var(--el-linha);
}

.el-header-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--el-e3);
  height: var(--el-header-h);
}

/* Marca */
body.elhair .el-header-marca {
  display: flex;
  align-items: baseline;
  gap: var(--el-e1);
  text-decoration: none;
  color: var(--el-texto);
  min-width: 0;
}
body.elhair .el-header-marca:hover { color: var(--el-texto); }

.el-header-marca .el-marca {
  font-family: var(--el-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.el-header-marca .el-marca em { font-style: italic; }

.el-header-marca .el-marca-tagline {
  font-family: var(--el-ui);
  font-weight: 700;
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--el-marca-texto);
  white-space: nowrap;
}
/* A tagline só entra quando há espaço, como no protótipo */
@media (max-width: 1099px) {
  .el-header-marca .el-marca-tagline { display: none; }
}

.el-header-marca .el-logo-img {
  display: block;
  max-height: 44px;
  width: auto;
}

/* Navegação desktop */
.el-header-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

body.elhair .el-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.elhair .el-nav li { margin: 0; padding: 0; list-style: none; }

body.elhair .el-nav a {
  font-family: var(--el-ui);
  font-weight: 700;
  font-size: var(--el-t-etiqueta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--el-texto);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease;
}
body.elhair .el-nav a:hover { color: var(--el-marca-texto); }

/* Link activo: filete inferior camel-texto */
body.elhair .el-nav .current-menu-item > a,
body.elhair .el-nav .current-menu-ancestor > a,
body.elhair .el-nav .current_page_item > a,
body.elhair .el-nav .current_page_parent > a {
  border-bottom-color: var(--el-marca-texto);
}

/* Bloco mobile do cabeçalho */
.el-header-mobile {
  display: none;
  align-items: center;
  gap: 12px;
}

body.elhair .el-header-cta { padding: 0 28px; }

body.elhair .el-header-cta-mobile {
  font-size: 0.9rem;
  padding: 0 20px;
}

body.elhair .el-header-menu-btn {
  font-family: var(--el-ui);
  font-weight: 700;
  font-size: var(--el-t-etiqueta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--el-texto);
  color: var(--el-texto);
  padding: 0 16px;
  min-height: 48px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
body.elhair .el-header-menu-btn:hover {
  background: var(--el-texto);
  color: var(--el-fundo);
}

@media (max-width: 999px) {
  .el-header-nav { display: none; }
  .el-header-mobile { display: flex; }
}

/* Overlay creme em ecrã inteiro */
.el-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--el-fundo);
  padding: 120px var(--el-goteira) calc(var(--el-e3) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--el-e1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.el-menu-overlay[hidden] { display: none; }

body.elhair .el-nav-mobile {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
body.elhair .el-nav-mobile li { margin: 0; padding: 0; list-style: none; }

body.elhair .el-nav-mobile a {
  font-family: var(--el-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--el-texto);
  text-decoration: none;
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--el-linha);
}
body.elhair .el-nav-mobile a:hover { color: var(--el-marca-texto); }
body.elhair .el-nav-mobile .current-menu-item > a { color: var(--el-marca-texto); }

body.elhair .el-menu-cta {
  margin-top: var(--el-e3);
  width: 100%;
}
body.elhair .el-menu-whatsapp {
  font-family: var(--el-ui);
  font-weight: 600;
  font-size: var(--el-t-botao);
  letter-spacing: 0.02em;
  color: var(--el-marca-texto);
  text-decoration: none;
  text-align: center;
  padding: 14px 0;
}

/* Overlay aberto: trava o scroll da página por trás */
body.el-menu-aberto { overflow: hidden; }

@media (min-width: 1000px) {
  .el-menu-overlay { display: none !important; }
}

/* Com cabeçalho próprio, silencia restos do header do Blocksy */
body.elhair.el-header-proprio .ct-header,
body.elhair.el-header-proprio #offcanvas { display: none; }

/* ---- Skin do header do Blocksy (se preferires o dele) -------------------- */

/* Header Blocksy */
body.elhair .ct-header [data-row] { background: var(--el-fundo); }
body.elhair .ct-header [data-row="middle"] { border-bottom: 1px solid var(--el-linha); }
body.elhair .site-logo-container .site-title,
body.elhair .ct-header .site-title {
  font-family: var(--el-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--el-texto);
}
body.elhair .ct-header .site-description {
  font-family: var(--el-ui);
  font-weight: 700;
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--el-marca-texto);
}
body.elhair .ct-menu-link,
body.elhair .ct-header .menu-item > a {
  font-family: var(--el-ui);
  font-weight: 700;
  font-size: var(--el-t-etiqueta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--el-texto);
}
body.elhair .ct-menu-link:hover { color: var(--el-marca-texto); }
body.elhair .ct-header .current-menu-item > .ct-menu-link,
body.elhair .ct-header .current-menu-ancestor > .ct-menu-link {
  color: var(--el-texto);
  border-bottom: 1px solid var(--el-marca-texto);
  padding-bottom: 4px;
}

/* Menu mobile — overlay creme full-screen */
body.elhair #offcanvas .ct-panel-inner,
body.elhair .ct-panel .ct-panel-inner { background: var(--el-fundo); }
body.elhair #offcanvas .ct-menu-link {
  font-family: var(--el-display);
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--el-texto);
  border-bottom: 1px solid var(--el-linha);
  padding: 12px 0;
}

/* Footer Blocksy */
body.elhair .ct-footer { background: var(--el-escuro-fundo); color: var(--el-escuro-texto); }
body.elhair .ct-footer a { color: var(--el-escuro-texto); text-decoration: none; }
body.elhair .ct-footer a:hover { color: var(--el-marca); }
body.elhair .ct-footer .widget-title,
body.elhair .ct-footer h3 {
  font-family: var(--el-ui);
  font-weight: 700;
  font-size: var(--el-t-etiqueta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--el-marca);
}
body.elhair .ct-footer [data-row="bottom"] { border-top: 1px solid var(--el-escuro-linha); }
body.elhair .ct-footer [data-row="bottom"] * { color: var(--el-escuro-tenue); font-size: 0.8rem; }

/* Com rodapé próprio, silencia o do Blocksy */
body.elhair.el-footer-proprio .ct-footer { display: none; }
body.elhair.el-footer-proprio #footer { display: block; }

/* Rodapé próprio (Footer.dc.html) */
.el-rodape {
  background: var(--el-escuro-fundo);
  color: var(--el-escuro-texto);
  margin-top: var(--el-e6);
}
.el-rodape .el-container { padding-block: var(--el-e5) var(--el-e4); }
.el-rodape-grelha { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--el-e4); }
.el-rodape-col { display: flex; flex-direction: column; gap: 10px; }

/* Sobre fundo escuro o camel é permitido em texto — e é o do design.
   Prefixado com body.elhair para ganhar à regra global de ligações. */
body.elhair .el-rodape .el-etiqueta { color: var(--el-marca); margin: 0 0 6px; }

body.elhair .el-rodape-col a,
body.elhair .el-rodape-col p,
body.elhair .el-rodape-col .el-num a {
  font-size: var(--el-t-botao);
  color: var(--el-escuro-texto);
  text-decoration: none;
  margin: 0;
  line-height: 1.7;
}
body.elhair .el-rodape-col a:hover,
body.elhair .el-rodape-col .el-num a:hover { color: var(--el-marca); }
body.elhair .el-rodape-col .el-tenue { color: var(--el-escuro-suave); }
.el-rodape-marca { font-family: var(--el-display); font-size: 32px; margin: 0; }
.el-rodape-base { border-top: 1px solid var(--el-escuro-linha); }
.el-rodape-base .el-container {
  padding-block: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}
.el-rodape-base p { font-size: 0.8rem; color: var(--el-escuro-tenue); margin: 0; }

.el-rodape-legais { display: flex; flex-wrap: wrap; gap: 16px; }
body.elhair .el-rodape-legais a {
  font-family: var(--el-ui);
  font-size: 0.8rem;
  color: var(--el-escuro-tenue);
  text-decoration: none;
  transition: color 150ms ease;
}
body.elhair .el-rodape-legais a:hover { color: var(--el-marca); }

/* Crédito de autoria — continua o rodapé escuro, em qualquer configuração */
.el-creditos {
  background: var(--el-escuro-fundo);
  border-top: 1px solid var(--el-escuro-linha);
  padding: 18px var(--el-goteira);
  text-align: center;
}
.el-creditos p {
  font-family: var(--el-ui);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--el-escuro-tenue);
  margin: 0;
}
body.elhair .el-creditos a {
  color: var(--el-escuro-suave);
  text-decoration: none;
  border-bottom: 1px solid var(--el-escuro-linha);
  padding-bottom: 2px;
  transition: color 150ms ease, border-color 150ms ease;
}
body.elhair .el-creditos a:hover {
  color: var(--el-marca);
  border-bottom-color: var(--el-marca);
}
/* Não fica escondido atrás da barra fixa em mobile */
@media (max-width: 999px) {
  .el-creditos { padding-bottom: calc(18px + 69px + env(safe-area-inset-bottom)); }
}

/* Barra inferior fixa em mobile — a decisão de conversão mais importante */
.el-barra-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 58;
  background: var(--el-escuro-fundo);
  border-top: 1px solid var(--el-marca);
  display: flex;
  gap: 1px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform 300ms ease;
}
.el-barra-mobile.is-visivel { transform: translateY(0); }
.el-barra-mobile a {
  font-family: var(--el-ui);
  font-weight: 600;
  font-size: var(--el-t-botao);
  letter-spacing: 0.02em;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}
.el-barra-mobile .el-barra-marcar { flex: 2; background: var(--el-fundo); color: var(--el-texto); }
.el-barra-mobile .el-barra-whatsapp { flex: 1; background: none; border: 1px solid var(--el-fundo); color: var(--el-fundo); }
@media (min-width: 1000px) { .el-barra-mobile { display: none; } }

/* WooCommerce — alinhar ao sistema, sem redesenhar */
body.elhair.woocommerce-page :where(.button, button.button, input.button, .wc-block-components-button) {
  font-family: var(--el-ui);
  font-weight: 600;
  font-size: var(--el-t-botao);
  letter-spacing: 0.02em;
  text-transform: none;
  background: var(--el-texto);
  color: var(--el-fundo);
  border-radius: 0;
  min-height: 48px;
  padding: 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.elhair.woocommerce-page :where(.button:hover, button.button:hover, .wc-block-components-button:hover) {
  background: var(--el-marca-texto);
  color: var(--el-superficie);
}
body.elhair.woocommerce-page .price,
body.elhair.woocommerce-page .amount { font-variant-numeric: tabular-nums; }
body.elhair.woocommerce-page :where(input, select, textarea) { border-radius: 0; }

/* Tutor LMS — apenas o essencial */
body.elhair .tutor-btn {
  border-radius: 0;
  font-family: var(--el-ui);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* 9. MOVIMENTO ============================================================= */

@keyframes el-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes el-img-in {
  from { transform: scale(1.04); }
  to   { transform: scale(1); }
}

/* Entrada de secção: fade + translateY 24px, 600ms ease-out, escalonado 60ms.
   Falha aberta: o conteúdo só é escondido depois de o JS o ter armado
   (.is-armada) e há um temporizador de segurança que revela tudo. Sem JS,
   com JS partido ou sem IntersectionObserver, o conteúdo fica sempre visível. */
.el-revela.is-armada { opacity: 0; }
.el-revela.is-armada.is-dentro {
  opacity: 1;
  animation: el-fade-up 600ms ease-out both;
  animation-delay: var(--el-atraso, 0ms);
}

@media print {
  .el-revela.is-armada { opacity: 1 !important; animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.elhair *,
  body.elhair *::before,
  body.elhair *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .el-revela.is-armada { opacity: 1; }
}