/* ============================================================
   MED ESTÚDIO — sistema visual
   Direção Moderna: fundo escuro, acento verde-ácido puxado para a
   família do muted olive do manual, tipografia Archivo com tracking
   fechado. O bloco de destaque inverte e vira o próprio acento —
   um único momento de cor forte, e o resto quieto.
   ============================================================ */

:root {
  --bg:            #0F110E;
  --superficie:    #171A15;
  --superficie-2:  #1F231C;
  --tinta:         #F1F3EE;
  --tinta-2:       #ADB2A6;
  --tinta-3:       #7C8177;
  --linha:         #272B23;
  --linha-forte:   #3E4437;

  --escuro:        #C8F04A;   /* inversão: o bloco de destaque é o acento */
  --escuro-2:      #B9E23B;
  --sobre-escuro:  #0F110E;
  --sobre-escuro-2:#39490F;

  --acento:        #C8F04A;
  --acento-tinta:  #0F110E;
  --acento-claro:  #24310B;
  --apoio:         #C8F04A;

  --rodape-bg:       #171A15;
  --rodape-tinta:    #F1F3EE;
  --rodape-tinta-2:  #ADB2A6;
  --linha-rodape:    rgba(241, 243, 238, .14);
  --linha-sobre-escuro: rgba(15, 17, 14, .22);
  --filtro-logo:      invert(1);  /* logo branco vira preto sobre o acento */
  --filtro-logo-topo: invert(1);  /* logo preto vira branco sobre o topo escuro */

  --display: "Archivo", system-ui, sans-serif;
  --corpo:   "Archivo", system-ui, sans-serif;
  --peso-display: 700;
  --track-display: -0.035em;
  --raio: 4px;
  --raio-g: 6px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: 32px;
}

section { padding-block: 96px; }

/* ---------- tipografia ---------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: var(--peso-display);
  letter-spacing: var(--track-display);
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(38px, 5.4vw, 60px); }
h2 { font-size: clamp(28px, 3.6vw, 40px); }
h3 { font-size: 19px; line-height: 1.3; }

p { margin: 0; max-width: 66ch; }

.rotulo {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0;
}

.chapeu {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 62ch;
  margin-bottom: 52px;
}
.chapeu p:not(.rotulo) { color: var(--tinta-2); font-size: 17px; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 15px 26px;
  border-radius: var(--raio);
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .12s ease, background-color .16s ease, color .16s ease;
}
.btn-principal { background: var(--acento); color: var(--acento-tinta); }
.btn-principal:hover { transform: translateY(-1px); }
.btn-vazado { border-color: var(--linha-forte); color: var(--tinta); }
.btn-vazado:hover { border-color: var(--tinta); }
.btn-sobre-escuro { border-color: var(--linha-sobre-escuro); color: var(--sobre-escuro); }
.btn-sobre-escuro:hover { border-color: var(--sobre-escuro); }

.acoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- cabeçalho ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}
.topo .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
}
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca img { height: 42px; width: auto; filter: var(--filtro-logo-topo); }
.marca span {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-3);
  max-width: 8ch;
  line-height: 1.25;
}

.menu { display: flex; gap: 26px; align-items: center; }
.menu a {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--tinta-2);
  padding-block: 4px;
  border-bottom: 1px solid transparent;
}
.menu a:hover { color: var(--tinta); border-bottom-color: var(--acento); }

.topo .btn { padding: 11px 20px; font-size: 14px; }

.abrir-menu {
  display: none;
  background: none;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 9px 14px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
}

/* ---------- hero ---------- */
.hero { padding-block: 84px 96px; }
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.hero-texto { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.hero-texto h1 { max-width: 16ch; }
.hero-texto .sub { font-size: 18.5px; color: var(--tinta-2); max-width: 46ch; }

/* O nome do produto carrega o acento; o verbo da marca fica acima,
   pequeno e neutro, como complemento. Um verde por hero, nao dois. */
.hero-texto h1 .destaque { color: var(--acento); }
.hero-texto .rotulo { color: var(--tinta-3); }

.assinatura {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-3);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 8px;
  border-top: 1px solid var(--linha);
  width: 100%;
}

/* painel do hero — ocupa o lugar da fotografia definitiva */
.painel-hero {
  background: var(--escuro);
  border-radius: var(--raio-g);
  padding: 44px 40px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  color: var(--sobre-escuro);
}
/* align-self impede o stretch do flex-column de esmagar a proporção */
.painel-hero .selo-logo {
  height: 68px; width: auto; align-self: flex-start; opacity: .96;
  filter: var(--filtro-logo);
}
.painel-hero .frase {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: var(--track-display);
  color: var(--sobre-escuro);
  max-width: 18ch;
}
.painel-hero .frase em { font-style: normal; color: var(--acento-claro); }
.painel-hero .nota {
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sobre-escuro-2);
  border-top: 1px solid var(--linha-sobre-escuro);
  padding-top: 16px;
}

/* ---------- clientes ---------- */
.clientes { padding-block: 0; }
.clientes .container {
  border-block: 1px solid var(--linha);
  padding-block: 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.clientes .rotulo { color: var(--tinta-3); }
/* Ladrilhos quadrados: cada logo vem sobre a cor da própria marca,
   então o quadrado colorido é o destaque — sem cinza, sem apagar. */
.grade-clientes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.grade-clientes img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: var(--raio-g);
  transition: transform .2s ease;
}
.grade-clientes img:hover { transform: translateY(-3px); }

/* ---------- pilares ---------- */
.grade-pilares {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.pilar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 32px 30px 30px;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.pilar:hover { border-color: var(--linha-forte); transform: translateY(-2px); }
.pilar-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}
.pilar-produto {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.pilar p { font-size: 15.5px; color: var(--tinta-2); }
.pilar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.pilar li {
  font-size: 12.5px;
  font-family: var(--display);
  color: var(--tinta-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 4px 10px;
}
.pilar .ir {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  color: var(--acento);
}
.pilar-destaque { border-color: var(--linha-forte); }
.marca-foco {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
  border: 1px solid currentColor;
  border-radius: var(--raio);
  padding: 3px 8px;
  white-space: nowrap;
}

/* ---------- trabalhos ---------- */
.trabalhos { background: var(--superficie); border-block: 1px solid var(--linha); }
.grade-trabalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 14px; }
.trabalho { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.trabalhos .slot { background: var(--bg); min-height: 0; aspect-ratio: 4 / 3; }
.trabalho figcaption { display: flex; flex-direction: column; gap: 2px; padding-left: 1px; }
.trabalho figcaption b { font-size: 14.5px; font-weight: 600; }
.trabalho figcaption span {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* ---------- momentos ---------- */
.momentos { background: var(--superficie); border-block: 1px solid var(--linha); }
.grade-momentos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  overflow: hidden;
}
.momento {
  background: var(--bg);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.momento h3 { font-size: 16.5px; }
.momento p { font-size: 14.5px; color: var(--tinta-2); }
.momento .leva {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* ---------- método (seção escura) ---------- */
.metodo { background: var(--escuro); color: var(--sobre-escuro); }
.metodo h2 { color: var(--sobre-escuro); }
.metodo .chapeu p:not(.rotulo) { color: var(--sobre-escuro-2); }
.metodo .rotulo { color: var(--acento-claro); }
.grade-metodo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.passo { display: flex; flex-direction: column; gap: 10px; }
.passo .n {
  font-family: var(--display);
  font-weight: var(--peso-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--acento-claro);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linha-sobre-escuro);
}
.passo h3 { color: var(--sobre-escuro); }
.passo p { font-size: 14.5px; color: var(--sobre-escuro-2); }

/* ---------- verdade industrial ---------- */
.verdade .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.lista-essencia {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--linha);
  border-block: 1px solid var(--linha);
}
.lista-essencia li {
  background: var(--bg);
  padding: 15px 4px 15px 20px;
  font-family: var(--display);
  font-size: 14.5px;
  letter-spacing: 0.02em;
  border-left: 2px solid var(--acento);
}

/* ---------- chamada final ---------- */
.chamada .container {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 60px 56px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
.chamada h2 { max-width: 20ch; }
.chamada p { font-size: 17.5px; color: var(--tinta-2); }

/* ---------- rodapé ---------- */
.rodape {
  background: var(--rodape-bg);
  color: var(--rodape-tinta-2);
  padding-block: 56px 40px;
}
.rodape .container { display: flex; flex-direction: column; gap: 40px; }
.rodape-linhas {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.rodape img { height: 52px; width: auto; margin-bottom: 18px; }
.rodape p { font-size: 14.5px; max-width: 34ch; }
.rodape h3 {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rodape-tinta);
  margin-bottom: 14px;
  font-weight: 600;
}
.rodape ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.rodape a { color: var(--rodape-tinta-2); text-decoration: none; font-size: 14.5px; }
.rodape a:hover { color: var(--rodape-tinta); }
.rodape-fim {
  border-top: 1px solid var(--linha-rodape);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ============================================================
   FICHA TÉCNICA — o registro de laboratório do Volume 03.
   Especificação, não vitrine: rótulo de espécime, pares
   termo/valor alinhados, números tabulares.
   ============================================================ */
.fichas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.ficha {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 28px 30px 30px;
}
.ficha > header { display: flex; flex-direction: column; gap: 6px; }
.ficha-id {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.ficha-uso {
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.spec { margin: 0; display: grid; gap: 1px; background: var(--linha); border-block: 1px solid var(--linha); }
.spec > div {
  background: var(--superficie);
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 14px;
  padding: 11px 2px;
}
.spec dt {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-3);
  padding-top: 2px;
}
.spec dd { margin: 0; font-size: 14.5px; color: var(--tinta); }

.ficha-nota { font-size: 14.5px; color: var(--tinta-2); margin-top: auto; }

.aviso-tecnico {
  margin-top: 26px;
  padding-left: 16px;
  border-left: 2px solid var(--linha-forte);
  font-size: 14px;
  color: var(--tinta-2);
  max-width: 74ch;
}

/* ---------- tabela de medidas ---------- */
.tabela-scroll { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio-g); }
.medidas { border-collapse: collapse; width: 100%; min-width: 560px; }
.medidas caption {
  caption-side: top;
  text-align: left;
  padding: 16px 20px 0;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.medidas th, .medidas td {
  padding: 14px 20px;
  text-align: center;
  border-bottom: 1px solid var(--linha);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}
.medidas thead th {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.medidas th[scope="row"],
.medidas thead th:first-child {
  text-align: left;
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta);
}
.medidas tbody tr:last-child th,
.medidas tbody tr:last-child td { border-bottom: none; }

/* ---------- o que está incluso ---------- */
.incluso { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.incluso > div {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 28px 30px;
}
.incluso h3 {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 16px;
}
.incluso ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.incluso li {
  font-size: 15px;
  color: var(--tinta-2);
  padding-left: 18px;
  position: relative;
}
.incluso li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 1px;
  background: var(--linha-forte);
}

/* ============================================================
   SLOT DE IMAGEM
   Marca onde entra fotografia real. Enquanto vazio, mostra o
   que precisa ser fotografado — placeholder honesto em vez de
   bloco de cor fingindo ser design.
   Com <img> dentro, o rótulo some sozinho.
   ============================================================ */
.slot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--raio-g);
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  min-height: 240px;
}
.slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot:has(img) { border-style: solid; }
.slot:not(:has(img)) { border-style: dashed; }
.slot-info {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
}
.slot:has(img) .slot-info { display: none; }
.slot-info b {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
}
.slot-info span { font-size: 13.5px; color: var(--tinta-2); }

.slot-alto { min-height: 440px; }
.slot-largo { min-height: 320px; }

/* ---------- redes sociais ---------- */
.redes { display: flex; flex-wrap: wrap; gap: 10px; }
.redes a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--linha-rodape);
  border-radius: var(--raio);
  padding: 9px 14px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--rodape-tinta-2);
}
.redes a:hover { border-color: var(--rodape-tinta); color: var(--rodape-tinta); }
.redes a[aria-disabled="true"] { opacity: .7; pointer-events: none; }
.redes svg { width: 17px; height: 17px; flex: none; }
/* ícone na cor da própria rede — o rótulo segue a cor do rodapé */
.redes a[data-rede="instagram"] svg { fill: #E1306C; }
.redes a[data-rede="linkedin"]  svg { fill: #0A66C2; }
.redes a[data-rede="youtube"]   svg { fill: #FF0000; }

/* ---------- whatsapp flutuante ---------- */
.zap {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--acento);
  color: var(--acento-tinta);
  border-radius: 999px;
  padding: 14px 22px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  box-shadow: 0 10px 30px rgba(20,22,20,.22);
}

/* ---------- responsivo ---------- */
@media (max-width: 1000px) {
  section { padding-block: 72px; }
  .hero .container,
  .verdade .container { grid-template-columns: 1fr; gap: 44px; }
  .grade-metodo { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .grade-momentos { grid-template-columns: repeat(2, 1fr); }
  .grade-clientes { grid-template-columns: repeat(3, 1fr); }
  .rodape-linhas { grid-template-columns: 1fr 1fr; }
  .menu { display: none; }
  .abrir-menu { display: block; }
  .topo .btn { display: none; }
  .menu.aberto {
    display: flex;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--linha);
    padding: 8px 32px 20px;
  }
  .menu.aberto a { padding-block: 12px; width: 100%; border-bottom: 1px solid var(--linha); }
}

@media (max-width: 720px) {
  .container { padding-inline: 22px; }
  section { padding-block: 60px; }
  .grade-pilares,
  .fichas,
  .incluso { grid-template-columns: 1fr; }
  .grade-trabalhos { grid-template-columns: repeat(2, 1fr); }
  .spec > div { grid-template-columns: 108px 1fr; gap: 10px; }
  .chamada .container { padding: 40px 28px; }
  .painel-hero { min-height: 340px; padding: 32px 28px; }
  .zap { padding: 13px 18px; right: 16px; bottom: 88px; }
  .comparador { bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}