/* ftltech.com.br: papel claro e tinta, com um anel de lente (o trabalho da FTL é imagem clínica) como único ornamento. */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --papel: #f3efe6;
  --papel-2: #ebe5d8;
  --tinta: #16181b;
  --tinta-2: #4a4d52;
  --tinta-3: #7b7d80;
  --linha: rgba(22, 24, 27, .14);
  --linha-forte: rgba(22, 24, 27, .32);
  --acento: #0e6b63;
  --acento-tinta: #f3efe6;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #0f1012;
    --papel-2: #17191c;
    --tinta: #ece7dc;
    --tinta-2: #b4afa5;
    --tinta-3: #85817a;
    --linha: rgba(236, 231, 220, .12);
    --linha-forte: rgba(236, 231, 220, .3);
    --acento: #5fbfb3;
    --acento-tinta: #0f1012;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--papel); color: var(--tinta);
  font: 400 17px/1.65 var(--sans); font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* Grão leve sobre o papel. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--acento); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 2px; }

.moldura { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.rotulo { font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }

/* Capa: uma tela só, centralizada. */
.capa { display: flex; flex-direction: column; }
.palco { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 48px 24px 24px; }
.palco .lente { justify-self: auto; width: min(64vw, 300px); max-width: none; margin-bottom: 8px; }
.palco h1 { font: 400 clamp(88px, 16vw, 168px)/.85 var(--serif); letter-spacing: -.035em; margin: 0; }
.palco p { font: 400 clamp(20px, 2.4vw, 26px)/1.2 var(--serif); color: var(--tinta-2); margin: 10px 0 40px; }
.palco p em { color: var(--acento); }
.capa .palco { min-height: 100svh; }
.descer { position: absolute; bottom: 28px; left: 50%; translate: -50% 0; color: var(--tinta-3); padding: 8px; }
.descer:hover { color: var(--acento); }

/* Contato: dados à esquerda, formulário à direita. */
.contato { position: relative; z-index: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: 72px 24px 64px;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; border-top: 1px solid var(--linha); }
.dados address { font: 400 26px/1.3 var(--serif); font-style: normal; margin: 18px 0 20px; }
.dados p { margin: 0 0 6px; color: var(--tinta-2); }
.dados p.rotulo { margin: 0; }
.dados p.rotulo + address, .dados .sites { margin-top: 16px; }
.dados > p:not(.rotulo) a { text-decoration: none; font-size: 18px; }
.dados > p.rotulo:last-of-type { margin-top: 36px; }
.sites { list-style: none; padding: 0; margin: 0; font: 400 14px/2 var(--mono); }
.sites a { text-decoration: none; color: var(--tinta-2); }
.sites a:hover { color: var(--acento); }
.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 6px; font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-3); }
.form input, .form textarea { font: 400 17px/1.4 var(--sans); color: var(--tinta); background: transparent;
  border: 0; border-bottom: 1px solid var(--linha-forte); padding: 8px 0 10px; border-radius: 0; resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-bottom-color: var(--acento); }
.form .aceite { display: flex; gap: 10px; align-items: flex-start; text-transform: none; letter-spacing: 0;
  font: 400 14px/1.5 var(--sans); color: var(--tinta-2); }
.form .aceite input { accent-color: var(--acento); margin-top: 3px; }
.form .botao { justify-self: start; border: 0; cursor: pointer; }
.form .botao:disabled { opacity: .6; cursor: wait; }
.armadilha { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso { min-height: 1.5em; margin: 0; font-size: 14px; color: var(--tinta-3); }
.aviso.ok { color: var(--acento); }
.aviso.erro { color: #b4442d; }
@media (prefers-color-scheme: dark) { .aviso.erro { color: #e3866f; } }
@media (max-width: 760px) { .contato { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; } }

.marcas-linha { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 0; font: 400 15px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.marcas-linha li + li::before { content: "·"; margin: 0 16px; color: var(--acento); }
.marcas-linha a { text-decoration: none; }
@media (max-width: 600px) {
  .marcas-linha { display: grid; grid-template-columns: repeat(2, auto); gap: 14px 32px; }
  .marcas-linha li + li::before { content: none; }
}
.pe { position: relative; z-index: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px;
  padding: 0 24px 32px; font: 400 12px/1 var(--mono); letter-spacing: .06em; color: var(--tinta-3); }
.pe a { text-decoration: none; }

/* Topo */
.topo { display: flex; align-items: center; justify-content: space-between; padding: 28px 0;
  border-bottom: 1px solid var(--linha); }
.marca { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; }
.marca b { font: 400 30px/1 var(--serif); letter-spacing: -.01em; }
.marca span { font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.topo nav { display: flex; gap: 22px; font-size: 15px; }
.topo nav a { text-decoration: none; color: var(--tinta-2); }
.topo nav a:hover { color: var(--acento); }

/* Abertura */
.abertura { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 40px; align-items: center; padding: 96px 0 104px; }
.abertura h1 { font: 400 clamp(52px, 8.4vw, 112px)/.95 var(--serif); letter-spacing: -.025em; margin: 22px 0 28px; }
.abertura h1 em { font-style: italic; color: var(--acento); }
.abertura p { max-width: 30em; font-size: 19px; color: var(--tinta-2); margin: 0 0 36px; }
.acoes { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.botao { display: inline-flex; align-items: center; gap: 12px; padding: 15px 22px; border-radius: 999px;
  background: var(--tinta); color: var(--papel); text-decoration: none; font-weight: 500; font-size: 16px;
  transition: transform .25s ease, background .25s ease; }
.botao:hover { background: var(--acento); color: var(--acento-tinta); transform: translateY(-2px); }
.botao svg { transition: transform .25s ease; }
.botao:hover svg { transform: translateX(4px); }
.discreto { font-size: 15px; color: var(--tinta-3); }

/* Lente: anéis concêntricos e uma escala que gira devagar, como o anel de foco de um dermatoscópio. */
.lente { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; justify-self: end; }
.lente svg { width: 100%; height: 100%; overflow: visible; }
.lente .escala { transform-origin: 200px 200px; animation: girar 90s linear infinite; }
.lente .foco { transform-origin: 200px 200px; animation: respirar 7s ease-in-out infinite; }
.lente figcaption { position: absolute; left: 0; bottom: -6px; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes respirar { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }

/* Seções numeradas */
.secao { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; padding: 56px 0;
  border-top: 1px solid var(--linha); }
.secao h2 { font: 400 clamp(32px, 4vw, 44px)/1.05 var(--serif); letter-spacing: -.015em; margin: 0 0 16px; }
.secao p { margin: 0 0 14px; max-width: 38em; color: var(--tinta-2); }
.secao .rotulo { padding-top: 10px; }

.marcas { list-style: none; padding: 0; margin: 24px 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--linha); }
.marcas li { border-bottom: 1px solid var(--linha); }
.marcas a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 4px;
  text-decoration: none; }
.marcas a b { font: 400 26px/1.1 var(--serif); }
.marcas a span { font: 400 12px/1 var(--mono); color: var(--tinta-3); }
.marcas a:hover span { color: var(--acento); }
@media (min-width: 700px) { .marcas li:nth-child(odd) a { padding-right: 24px; }
  .marcas li:nth-child(even) { border-left: 1px solid var(--linha); } .marcas li:nth-child(even) a { padding-left: 24px; } }

.email { font: 400 clamp(26px, 3.4vw, 36px)/1.2 var(--serif); text-decoration: none;
  border-bottom: 1px solid var(--linha-forte); }
.email:hover { border-color: var(--acento); }

/* Rodapé */
.rodape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 28px 0 40px;
  border-top: 1px solid var(--linha); font-size: 14px; color: var(--tinta-3); }

/* Entrada escalonada */
.entra { opacity: 0; transform: translateY(14px); animation: entrar .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .18s; } .d3 { animation-delay: .32s; } .d4 { animation-delay: .46s; }
@keyframes entrar { to { opacity: 1; transform: none; } }

/* Política de privacidade */
.texto { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; padding: 72px 0 40px; }
.texto h1 { font: 400 clamp(44px, 6vw, 76px)/1 var(--serif); letter-spacing: -.02em; margin: 18px 0 24px; }
.texto .intro { font-size: 19px; color: var(--tinta-2); max-width: 36em; margin: 0 0 24px; }
.indice { position: sticky; top: 32px; align-self: start; display: flex; flex-direction: column; gap: 8px;
  font-size: 14px; padding-top: 6px; }
.indice a { text-decoration: none; color: var(--tinta-3); }
.indice a:hover { color: var(--acento); }
.topico { border-top: 1px solid var(--linha); padding: 28px 0 12px; scroll-margin-top: 24px; }
.topico h2 { display: flex; gap: 16px; align-items: baseline; font: 400 28px/1.15 var(--serif); margin: 0 0 12px; }
.topico h2 small { font: 400 12px/1 var(--mono); color: var(--acento); }
.topico p, .topico li { color: var(--tinta-2); max-width: 40em; }
.topico ul { padding-left: 20px; margin: 0 0 14px; }
.topico li { margin-bottom: 8px; }
.topico li::marker { color: var(--acento); }

@media (max-width: 860px) {
  .abertura { grid-template-columns: 1fr; padding: 56px 0 64px; }
  .lente { order: -1; max-width: 220px; justify-self: start; margin-bottom: -8px; }
  .lente figcaption { display: none; }
  .secao, .texto { grid-template-columns: 1fr; gap: 12px; }
  .texto { padding-top: 40px; }
  .indice { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  .topo nav { gap: 16px; }
  .topo nav .opcional { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .entra { animation: none; opacity: 1; transform: none; }
  .lente .escala, .lente .foco { animation: none; }
  .botao, .botao svg { transition: none; }
}