/* efeitos.css — fase 3: abertura com a logo do Instagram, fonte gótica nos detalhes (casa com o lettering da logo),
   quatro assinaturas, seção de técnicas com preço, fundos que se movem, cursor de tinta e microinterações. */
:root { --goth: "Archivo", "UnifrakturCook", "Old English Text MT", Georgia, serif; --cor1: #ff4d6d; --cor2: #ffb347; --cor3: #5ad1ff; }
.goth { font-family: var(--goth); font-weight: 400; text-transform: none; letter-spacing: .01em; }
em.goth { font-style: normal; color: var(--accent); }
.cor { background: linear-gradient(90deg, var(--cor1), var(--cor2), var(--cor3)); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-stroke: 0 !important; }

/* ---------- abertura: a logo do Instagram ---------- */
#preloader .pre { gap: 18px; }
.pre__selo { position: relative; width: min(190px, 46vw); aspect-ratio: 1; display: grid; place-items: center; }
.pre__anel { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); transform: rotate(-90deg); overflow: visible; }
.pre__anel circle { fill: none; stroke-width: 2.4; }
.pre__anel-fundo { stroke: var(--line); }
.pre__anel-vivo { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 597; stroke-dashoffset: 597; filter: drop-shadow(0 0 6px rgba(233,228,220,.8)); }
.pre__logo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 60px rgba(233,228,220,.5); }
/* o degradê vai em CADA letra: o GSAP anima as letras com transform e o Chrome não pinta background-clip:text do pai por trás de filhos transformados (o nome ficava invisível) */
#preloader .pre__marca { font-family: var(--goth); font-size: clamp(40px, 8vw, 76px); letter-spacing: .02em; text-transform: none; line-height: 1; color: #efe7e0; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
#preloader .pre__marca em { font-style: normal; color: #e9e4dc; }
#preloader .pre__marca .c { display: inline-block; background: linear-gradient(180deg, #fff 8%, #d9d1ca 50%, #8a8480 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#preloader .pre__marca em .c { background: linear-gradient(180deg, #ff6b7d 10%, #e9e4dc 55%, #97948f 100%); -webkit-background-clip: text; background-clip: text; }

/* ---------- menu e rodapé com o brasão ---------- */
.marca { gap: 11px; }
.marca__logo { width: 38px; height: 38px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 16px rgba(233,228,220,.35); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.marca:hover .marca__logo { transform: rotate(360deg) scale(1.06); }
.marca__nome { font-family: var(--goth); font-size: 27px; letter-spacing: .02em; text-transform: none; line-height: 1; }
.marca__nome em { font-style: normal; color: var(--accent); }
.rodape__marca { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rodape__marca img { border-radius: 50%; }
.rodape__marca .goth { font-size: 20px; color: var(--fg); letter-spacing: .02em; }
.cta__logo { border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 50px rgba(233,228,220,.5); animation: flutua 5s ease-in-out infinite; }
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- herói: gótico no "além do" e a linha de técnicas ---------- */
.heroi__titulo .l2 { font-family: var(--goth); text-transform: none; font-size: 1.12em; line-height: .82; letter-spacing: .01em; margin-block: -.04em .02em; text-shadow: 0 0 40px rgba(233,228,220,.35); }
.heroi__tecs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.heroi__tecs li { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; padding: 7px 12px; border: 1px solid rgba(243,235,228,.22); border-radius: 999px; background: rgba(11,11,11,.5); backdrop-filter: blur(6px); }
.heroi__tecs li.is-cor { border-color: transparent; background: linear-gradient(rgba(11,11,11,.82), rgba(11,11,11,.82)) padding-box, linear-gradient(90deg, var(--cor1), var(--cor2), var(--cor3)) border-box; border: 1px solid transparent; }
.faixa__grupo .cor { -webkit-text-stroke: 0; }

/* ---------- quatro assinaturas ---------- */
.pilares { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pilares { grid-template-columns: 1fr; } }
.pilar h3 { font-size: 30px; }
.pilar__img { aspect-ratio: 3 / 4; }
.pilar__img img { object-position: center; }

/* ---------- fundos de seção com movimento ---------- */
.secao > .wrap, .tecnicas > .tec__pin { position: relative; z-index: 1; }
.secao, .tecnicas { overflow: hidden; }
.fundo-sec { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; opacity: .13; filter: blur(16px) saturate(.85); pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); will-change: transform; }
.cta-final .fundo-sec { opacity: .22; }

/* ---------- brilho que acompanha o ponteiro ---------- */
.has-brilho { position: relative; }
.has-brilho::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(233,228,220,.17), transparent 62%); }
.has-brilho:hover::after { opacity: 1; }
.btn--mag { will-change: transform; }

/* ---------- barra de progresso, cursor e tinta ---------- */
.progresso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 75; pointer-events: none; }
.progresso i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent), #ff6b7d); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 10px rgba(233,228,220,.7); }
#tinta { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 45; }
.cursor { position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgba(243,235,228,.75); border-radius: 50%; pointer-events: none; z-index: 95; mix-blend-mode: difference; opacity: 0; transition: width .22s ease, height .22s ease, margin .22s ease, background .22s ease, opacity .3s ease; will-change: transform; }
.cursor.is-visivel { opacity: 1; }
.cursor.is-link { width: 62px; height: 62px; margin: -31px 0 0 -31px; background: rgba(255,255,255,.9); border-color: transparent; }
.cursor.is-foto { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: rgba(233,228,220,.9); border-color: transparent; }
@media (hover: none), (pointer: coarse) { .cursor, #tinta { display: none; } }
html.sem-anim .cursor, html.sem-anim #tinta { display: none; }

/* ---------- técnicas e valores ---------- */
.tecnicas { position: relative; background: radial-gradient(900px 480px at 85% 10%, rgba(233,228,220,.16), transparent 60%), var(--bg); border-block: 1px solid var(--line); }
.tec__pin { min-height: 100svh; display: grid; align-items: center; padding-block: clamp(84px, 9vw, 120px) clamp(40px, 5vw, 64px); }
.tec__in { display: grid; gap: clamp(20px, 3vw, 36px); }
.tec__cabeca { display: grid; gap: 12px; max-width: 70ch; }
.tec__cabeca h2 { font-size: clamp(36px, 5.4vw, 70px); }
.tec__cabeca .lead { max-width: 62ch; }
.tec__palco { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 4vw, 56px); align-items: stretch; }
.tec__foto { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); aspect-ratio: 3 / 4; max-height: 66svh; width: 100%; justify-self: center; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.tec__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .7s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); }
.tec__foto img.is-ativa { opacity: 1; transform: scale(1); }
.tec__foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(11,11,11,.85)); }
.tec__foto-tag { position: absolute; left: 14px; bottom: 14px; z-index: 2; font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--fg); }
.tec__painel { display: grid; gap: 14px; align-content: center; min-width: 0; }
.tec__nivel { display: flex; align-items: baseline; gap: 12px; font-family: var(--display); color: var(--accent); font-size: 18px; letter-spacing: .08em; }
.tec__rotulo { font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--muted); }
.tec__nome { font-size: clamp(54px, 8vw, 112px); line-height: .9; margin: 0; background: linear-gradient(180deg, #fff 10%, #d9d1ca 55%, #8a8480); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.tec__nome.is-cor { background: linear-gradient(90deg, var(--cor1), var(--cor2), var(--cor3)); -webkit-background-clip: text; background-clip: text; }
.tec__sub { margin: 0; font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 14px; color: var(--accent); }
.tec__desc { margin: 0; color: var(--muted); font-size: 16px; max-width: 54ch; min-height: 3.2em; }
.tec__regua { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; position: relative; padding-top: 14px; }
.tec__regua::before { content: ""; position: absolute; left: 10%; right: 10%; top: 6px; height: 2px; background: var(--line); }
.tec__regua::after { content: ""; position: absolute; left: 10%; top: 6px; height: 2px; width: calc(var(--p, 0) * 80%); background: var(--accent); box-shadow: 0 0 10px rgba(233,228,220,.7); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.tec__tick { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 6px 2px 4px; color: var(--muted); }
.tec__tick::before { content: ""; position: absolute; top: -12px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); z-index: 1; transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.tec__tick b { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; line-height: 1.15; }
.tec__tick span { font-family: var(--display); font-size: 13px; letter-spacing: .04em; opacity: .75; }
.tec__tick.is-feito::before { border-color: var(--accent); }
.tec__tick.is-ativo { color: var(--fg); }
.tec__tick.is-ativo::before { background: var(--accent); border-color: var(--accent); transform: scale(1.35); box-shadow: 0 0 14px rgba(233,228,220,.9); }
.tec__calc { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; background: rgba(23,18,18,.78); display: grid; gap: 12px; }
.tec__calc-topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--muted); }
.tec__delta { color: var(--accent); }
.tec__promos { display: flex; flex-wrap: wrap; gap: 6px; }
.tecp { padding: 8px 12px; min-height: 40px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; color: var(--muted); background: var(--surface-2); transition: color .2s ease, border-color .2s ease, background .2s ease; }
.tecp:hover { color: var(--fg); border-color: var(--muted); }
.tecp.is-sel { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.tecp[disabled] { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.tec__valor { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.tec__valor-n { font-family: var(--display); font-size: clamp(44px, 6vw, 70px); line-height: 1; font-variant-numeric: tabular-nums; }
.tec__valor-sinal { font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; color: var(--muted); }
.tec__aviso { margin: 0; padding: 10px 12px; border: 1px dashed var(--muted); border-radius: 6px; font-size: 14px; color: var(--muted); }
.tec__calc .btn { justify-self: start; }
@media (max-width: 900px) {
  .tec__pin { min-height: 0; }
  .tec__palco { grid-template-columns: 1fr; }
  .tec__foto { max-height: 52svh; aspect-ratio: 4 / 3; }
  .tec__regua { grid-template-columns: repeat(5, minmax(60px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
}

/* ---------- cartões de promoção: as outras técnicas ---------- */
.promo__base { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--muted); }
.promo__base b { color: var(--accent-texto); }
.promo__tecs { display: flex; flex-wrap: wrap; gap: 6px; }
.ptec { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--muted); transition: border-color .2s ease, color .2s ease; }
.ptec b { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.ptec:hover { border-color: var(--accent); color: var(--fg); }
.ptec.is-base { border-color: var(--accent); color: var(--fg); }
.ptec.is-base::after { content: "base"; font-size: 10px; letter-spacing: .12em; color: var(--accent-texto); }

/* ---------- filtros e lightbox ---------- */
.filtro[data-filtro="colorido"].is-ativo { background: linear-gradient(90deg, var(--cor1), var(--cor2), var(--cor3)); border-color: transparent; color: #0b0b0b; }
.obra__tag--cor { background: linear-gradient(90deg, var(--cor1), var(--cor2), var(--cor3)); color: #0b0b0b; border-color: transparent; }
.vcard__tag--cor { background: linear-gradient(90deg, var(--cor1), var(--cor2)); color: #0b0b0b; }

/* a foto já traz o fundo tratado: sem véu extra e sem zoom que corta */
.vcard img, .obra img { object-position: center; }
html.sem-anim .fundo-sec { transform: none !important; }