/* =========================================================
TELATIN JOIAS — folha de estilo
Paleta: ouro e caramelo sobre cacau e neutros quentes
========================================================= */
/* O ouro não foi escolhido no chute: #ae8438 é a cor exata das capas dos
destaques do Instagram @telatin.joias, tirada pixel a pixel. Todo o resto
— cacau, caramelo, areia, creme — foi construído em volta dele. */
:root{
--cacau:#2b1b10; /* cacau profundo — fundo escuro principal */
--cacau2:#4a2f18; /* caramelo escuro — variação para gradientes */
--cacau3:#1a0f07; /* fundo mais fechado */
--paper:#f2e9db; /* areia quente */
--bone:#fbf6ee; /* creme — superfícies: cards, formulários */
--gold:#ae8438; /* ouro exato da Telatin Joias */
--gold2:#f0d9a8; /* ouro claro, para texto sobre fundo escuro */
--gold3:#7d5c22; /* ouro fechado, para texto pequeno sobre fundo claro */
--caramelo:#c98f42; /* caramelo — realces e brilhos */
--ink:#2b1b10; /* texto principal */
--muted:#6b5744; /* texto secundário — SÓ sobre fundo claro */
--line:#ddcdb4; /* bordas */
--line2:#4a3218; /* bordas sobre fundo escuro */
--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
--sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
--resp:112px; /* respiro vertical entre seções */
--raio:2px;
--sombra:0 24px 60px rgba(43,27,16,.13);
--sombra-forte:0 30px 80px rgba(43,27,16,.28);
}
/* Sem esta regra, qualquer `display` no CSS anula o atributo hidden */
[hidden]{display:none !important;}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
font-size:16.5px;
line-height:1.72;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
/* A Cormorant Garamond vem com numerais de estilo antigo: o 0 fica do tamanho
de um "o", o 1 vira "I" e o 8 desce abaixo da linha. Em preço e em número de
capítulo isso lê errado. Aplicamos os numerais altos SÓ onde há número —
ligar a feature no body inteiro mexia no encaixe dos acentos das palavras. */
.stat b,.preco,.cap-num,.page-num,.marca-dagua,.card-colecao .num,.step .num,
.seal b,.badge-anos b,.cc-valor b,.cc-p,.consorcio-lista b,.fer-saida .grande,
.fer-saida .linha b,.chat-peca small,.gp-peca small,.ferramenta label b,
.cmp-tabela td,.modal-box .preco,.contato-item b,.contato-item a{
font-variant-numeric:lining-nums;
}
/* trilha do controle deslizante: sem isso o Chrome pinta a metade vazia
de azul, a única cor fria que sobrava no site */
/* Cada pseudo-elemento de fabricante precisa da SUA regra: se o -webkit e o
-moz forem para a mesma lista, o navegador que não conhece um deles descarta
a regra inteira. E o seletor sem pseudo não pode dividir lista com um que
tem — foi assim que a trilha acabou pintando o controle todo de ouro. */
.ferramenta input[type=range],
.fer-tela input[type=range]{
-webkit-appearance:none;appearance:none;background:transparent;
}
.ferramenta input[type=range]::-webkit-slider-runnable-track,
.fer-tela input[type=range]::-webkit-slider-runnable-track{
height:4px;border-radius:4px;
background:linear-gradient(90deg,var(--gold) 0%,var(--gold) var(--preenchido,55%),rgba(240,217,168,.18) var(--preenchido,55%),rgba(240,217,168,.18) 100%);
}
.ferramenta input[type=range]::-moz-range-track,
.fer-tela input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:rgba(240,217,168,.18);}
.ferramenta input[type=range]::-moz-range-progress,
.fer-tela input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--gold);}
.ferramenta input[type=range]::-webkit-slider-thumb,
.fer-tela input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
background:var(--gold2);border:2px solid var(--gold);margin-top:-8px;
box-shadow:0 3px 10px rgba(26,15,7,.5);cursor:pointer;
}
.ferramenta input[type=range]::-moz-range-thumb,
.fer-tela input[type=range]::-moz-range-thumb{
width:18px;height:18px;border-radius:50%;background:var(--gold2);
border:2px solid var(--gold);box-shadow:0 3px 10px rgba(26,15,7,.5);cursor:pointer;
}
/* Quem rola a página é o , não o — travar só o body não
segurava nada. Vale para o menu-gaveta e também para os modais, que
usam a mesma classe. */
body.travado{overflow:hidden;}
html:has(body.travado){overflow:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
button{cursor:pointer;}
::selection{background:var(--gold);color:#fff;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.08;margin:0;letter-spacing:-.005em;}
h1{font-size:clamp(2.9rem,6.6vw,5.2rem);}
h2{font-size:clamp(2.2rem,4.6vw,3.7rem);}
h3{font-size:clamp(1.5rem,2.6vw,2.2rem);}
h4{font-size:clamp(1.25rem,2vw,1.6rem);}
h1 em,h2 em,h3 em,h4 em{font-style:italic;color:var(--gold);font-weight:600;}
p{margin:0 0 1.05em;}
/* ---------- utilidades ---------- */
.center{max-width:1280px;margin:0 auto;padding:0 40px;}
.pular-para{
position:absolute;left:-999px;top:0;z-index:9999;
background:var(--cacau);color:var(--gold2);padding:14px 22px;border-radius:var(--raio);
}
.pular-para:focus{left:12px;top:12px;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.kicker{
display:block;font-family:var(--sans);font-size:.66rem;font-weight:600;
letter-spacing:.24em;text-transform:uppercase;color:var(--gold3);margin-bottom:14px;
}
.chapter-num{
display:block;font-family:var(--sans);font-size:.6rem;font-weight:600;
letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;
}
.chapter-num.claro{color:rgba(232,211,166,.72);}
.rule{
position:relative;width:74px;height:1px;background:var(--gold);margin:26px 0 24px;
}
.rule::before{
content:'✦';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
background:var(--paper);padding:0 9px;color:var(--gold);font-size:.72rem;line-height:1;
}
.rule-c{margin-left:auto;margin-right:auto;}
.section-title{max-width:760px;}
.section-title p{color:var(--muted);font-size:1.03rem;max-width:60ch;}
.center > .section-title,.manifesto-inner .section-title,.processo-inner .section-title,
.atelie-inner .section-title,.curadoria-inner .section-title{margin-left:auto;margin-right:auto;text-align:center;}
.center > .section-title .rule,.manifesto-inner .section-title .rule,
.processo-inner .section-title .rule,.atelie-inner .section-title .rule,
.curadoria-inner .section-title .rule{margin-left:auto;margin-right:auto;}
section{position:relative;padding:var(--resp) 0;}
section > .page-num,.page-num{
position:absolute;top:6%;right:5%;font-family:var(--serif);
font-size:clamp(9rem,22vw,20rem);line-height:.8;color:rgba(43,27,16,.045);
pointer-events:none;user-select:none;z-index:0;
}
.marca-dagua{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
font-family:var(--serif);font-size:clamp(12rem,30vw,26rem);line-height:.78;
color:rgba(43,27,16,.035);pointer-events:none;user-select:none;z-index:0;
}
section.escuro .marca-dagua{color:rgba(232,211,166,.035);}
/* ---------- botões ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:50px;padding:15px 30px;border-radius:var(--raio);
font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
text-decoration:none;border:1px solid transparent;background:none;
transition:transform .3s cubic-bezier(.2,.7,.3,1),background .3s,color .3s,border-color .3s,box-shadow .3s;
position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-2px);}
.btn-sm{min-height:42px;padding:11px 20px;font-size:.68rem;}
.btn-gold{
background:linear-gradient(135deg,var(--gold) 0%,#c9a96a 52%,var(--gold) 100%);
color:#2b1b10;box-shadow:0 12px 30px rgba(174,132,56,.3);
}
.btn-gold:hover{box-shadow:0 18px 42px rgba(174,132,56,.44);}
.btn-outline{border-color:rgba(232,211,166,.5);color:var(--gold2);}
.btn-outline:hover{background:rgba(232,211,166,.1);border-color:var(--gold2);}
.btn-ghost{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.4);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold3);background:#fff;}
.btn-cacau{background:var(--cacau);color:var(--gold2);}
.btn-cacau:hover{background:var(--cacau2);}
/* ---------- grão e barra de progresso ---------- */
.grain{
position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
#progress{
position:fixed;top:0;left:0;height:2px;width:0;z-index:9997;
background:linear-gradient(90deg,var(--gold3),var(--gold),var(--gold2));
}
/* ---------- preloader ---------- */
.preloader{
position:fixed;inset:0;z-index:9996;background:var(--cacau);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
transition:opacity .7s ease,visibility .7s;
}
.preloader.done{opacity:0;visibility:hidden;}
.pre-mono{
font-family:var(--serif);font-size:3.6rem;color:var(--gold2);letter-spacing:.14em;
animation:pulsa 2s ease-in-out infinite;
}
.pre-bar{width:150px;height:1px;background:rgba(232,211,166,.2);overflow:hidden;}
.pre-bar i{display:block;height:100%;width:40%;background:var(--gold);animation:corre 1.3s ease-in-out infinite;}
@keyframes pulsa{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes corre{0%{transform:translateX(-110%)}100%{transform:translateX(310%)}}
/* ---------- tela de boas-vindas ---------- */
.portao{
position:fixed;inset:0;z-index:9990;background:var(--cacau3);
display:none;align-items:center;justify-content:center;text-align:center;padding:40px;
overflow:hidden;
}
.portao.aberto{display:flex;animation:fadeIn .6s ease both;}
.portao.saindo{animation:fadeOut .7s ease both;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0;visibility:hidden}}
.portao-inner{position:relative;z-index:3;max-width:640px;}
.portao-mono{
font-family:var(--serif);font-size:4.4rem;color:var(--gold2);letter-spacing:.14em;
margin-bottom:26px;text-shadow:0 0 44px rgba(174,132,56,.4);
}
/* a tela de boas-vindas usa , não