/* ===========================================================
   HARA Construções Inteligentes — estilo do site
   Cores e tipografia vêm do design system da marca.
   =========================================================== */

:root{
  --azul:#446983; --aco:#88acbf; --grafite:#1a1a1a; --branco:#fff;
  --fundo:#fff; --elevado:#f4f7f9; --rebaixado:#e7eef2;
  --texto:#1a1a1a; --texto-2:#48596a; --texto-3:#5c6c79;
  --sobre-escuro:#dce5eb; --linha:#d9e1e7; --borda-campo:#7e8b96;
  --claro-1:#cfd9e0; --claro-2:#9aa7b1; --claro-3:#7e8b96;
  --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px; --e9:96px;
  --larg:1280px; --gut:24px; --topo-h:76px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:Poppins,"Segoe UI",system-ui,sans-serif;
  background:var(--fundo); color:var(--texto);
  font-size:16px; line-height:1.62; font-weight:400;
  /* clip em vez de hidden: hidden cria um container de rolagem e mata
     todo position:sticky da página (trilho horizontal e colunas fixas). */
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,figure,ul,ol,form{margin:0;padding:0}
ul{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--aco);color:var(--grafite)}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:3px}
.escuro :focus-visible{outline-color:var(--aco)}

.env{width:100%;max-width:var(--larg);margin:0 auto;padding:0 var(--gut)}
.sec{padding:var(--e9) 0}
.sec.adiavel{content-visibility:auto;contain-intrinsic-size:auto 900px}
.sec-curta{padding:var(--e8) 0}
@media(max-width:720px){ .sec{padding:var(--e8) 0} .sec-curta{padding:var(--e7) 0} :root{--gut:20px} }

/* ---------------- tipografia ---------------- */
.sobre{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--azul);display:block;margin-bottom:var(--e5)}
.escuro .sobre{color:var(--aco)}
.d1{font-size:clamp(2.4rem,6vw,5rem);line-height:.99;font-weight:600;letter-spacing:-.035em}
.d2{font-size:clamp(2rem,5vw,4.1rem);line-height:1.03;font-weight:600;letter-spacing:-.03em}
.d3{font-size:clamp(1.5rem,3.1vw,2.5rem);line-height:1.12;font-weight:600;letter-spacing:-.022em}
.d4{font-size:clamp(1.2rem,2.1vw,1.6rem);line-height:1.22;font-weight:600;letter-spacing:-.018em}
.lead{font-size:clamp(1.05rem,1.55vw,1.3rem);line-height:1.6;color:var(--texto-2);font-weight:300}
.escuro .lead{color:var(--sobre-escuro)}
.corpo{font-size:16.5px;line-height:1.68;color:var(--texto-2);font-weight:300}
.escuro .corpo{color:var(--claro-1)}
.fino{font-weight:300}
.escuro{background:var(--grafite);color:var(--branco)}
.mt4{margin-top:var(--e4)} .mt5{margin-top:var(--e5)} .mt6{margin-top:var(--e6)}
.mt7{margin-top:var(--e7)} .mt8{margin-top:var(--e8)}
.max-50{max-width:50ch} .max-60{max-width:60ch} .max-20c{max-width:20ch}

/* ---------------- botões e links ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;padding:16px 28px;border-radius:8px;
  border:1px solid transparent;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;
  transition:background .3s,color .3s,border-color .3s,transform .3s;background:var(--azul);color:#fff;
}
.btn:hover{background:#35546a;transform:translateY(-2px)}
.btn .seta{transition:transform .35s var(--ease)}
.btn:hover .seta{transform:translateX(5px)}
.btn.vazado{background:transparent;color:var(--texto);border-color:var(--linha)}
.btn.vazado:hover{background:var(--grafite);color:#fff;border-color:var(--grafite)}
.escuro .btn.vazado,.capa .btn.vazado{color:#fff;border-color:#ffffff59;background:transparent}
.escuro .btn.vazado:hover,.capa .btn.vazado:hover{background:#fff;color:var(--grafite);border-color:#fff}
.btn.claro{background:#fff;color:var(--grafite)}
.btn.claro:hover{background:var(--aco);color:var(--grafite)}
.lk{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:14px;padding-bottom:6px;position:relative;color:var(--azul)}
.lk::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.lk:hover::after{transform:scaleX(1)}
.escuro .lk{color:var(--aco)}

/* ---------------- cabeçalho ---------------- */
.topo{position:fixed;inset:0 0 auto 0;z-index:90;border-bottom:1px solid transparent;
  /* o menu corre sobre a foto da capa: a sombra garante leitura */
  background:linear-gradient(rgba(26,26,26,.78),rgba(26,26,26,.34) 62%,rgba(26,26,26,0));
  transition:transform .45s var(--ease),background .4s,backdrop-filter .4s,border-color .4s}
.topo.solido{background:rgba(26,26,26,.92);backdrop-filter:blur(14px);border-bottom-color:#ffffff1f}
.topo.oculto{transform:translateY(-100%)}
.topo-in{display:flex;align-items:center;gap:var(--e6);height:var(--topo-h)}
.marca{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.marca img{height:26px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav a{text-decoration:none;color:#fff;font-size:13.5px;font-weight:500;opacity:.8;transition:opacity .25s;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;text-decoration-color:var(--aco)}
.topo .btn{padding:12px 20px;font-size:13px}
.menu-btn{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.menu-btn span{display:block;width:22px;height:1.5px;background:#fff;margin:5px 0;transition:transform .35s var(--ease),opacity .25s}
.menu-aberto .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-aberto .menu-btn span:nth-child(2){opacity:0}
.menu-aberto .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:1060px){
  .menu-btn{display:block}
  .nav{position:fixed;inset:var(--topo-h) 0 auto 0;background:var(--grafite);flex-direction:column;align-items:flex-start;gap:0;
    padding:var(--e5) var(--gut) var(--e7);margin:0;transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .3s,transform .4s var(--ease);border-bottom:1px solid #ffffff1f;max-height:calc(100vh - var(--topo-h));overflow:auto}
  .menu-aberto .nav{opacity:1;transform:none;pointer-events:auto}
  .nav a{font-size:19px;padding:13px 0;width:100%;opacity:1;font-weight:400}
  .nav .btn{margin-top:var(--e4);width:100%;justify-content:center;padding:16px}
}

/* ---------------- botão fixo ---------------- */
.fixo{position:fixed;right:24px;bottom:24px;z-index:80;box-shadow:0 10px 30px rgba(26,26,26,.28);
  opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;transition:opacity .45s,transform .45s var(--ease)}
.fixo.ver{opacity:1;transform:none;pointer-events:auto}
@media(max-width:720px){
  body{padding-bottom:76px}
  .fixo{left:0;right:0;bottom:0;border-radius:0;justify-content:center;padding:20px;font-size:14px;
    box-shadow:0 -6px 24px rgba(26,26,26,.22);transform:translateY(100%)}
  .fixo.ver,.fixo:hover{transform:none}
}

/* ---------------- reveals ---------------- */
.js .rv{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.js .rv.vis{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}
.rv-d4{transition-delay:.36s}.rv-d5{transition-delay:.45s}
.corta{position:relative;overflow:hidden}
.js .corta>img{transform:scale(1.13);transition:transform 1.6s var(--ease)}
.js .corta::after{content:"";position:absolute;inset:0;background:var(--grafite);transform-origin:bottom;transition:transform 1.15s var(--ease)}
.corta.vis::after{transform:scaleY(0)}
.corta.vis>img{transform:scale(1)}
.linha-cresce{height:1px;background:var(--linha)}
.js .linha-cresce{transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.linha-cresce.vis{transform:scaleX(1)}
.escuro .linha-cresce{background:#333}

/* ---------------- capa partida ---------------- */
.capa{display:grid;grid-template-columns:1.06fr 1fr;background:var(--grafite);color:#fff;min-height:100svh;position:relative}
.capa-tx{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--topo-h) + var(--e8)) var(--e8) var(--e8) 0;
  max-width:calc(var(--larg) / 2 + 40px);margin-left:auto;padding-left:var(--gut);width:100%}
.capa h1{max-width:15ch;margin-bottom:var(--e5)}
.capa .lead{max-width:50ch;color:#e4ebf0;margin-bottom:var(--e7)}
.capa-ctas{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:var(--e7)}
.capa-meta{display:flex;flex-wrap:wrap;gap:10px 26px;padding-top:var(--e5);border-top:1px solid #ffffff2e;
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--claro-1);font-weight:500}
.capa-ft{position:relative;overflow:hidden;background:#232323}
.capa-ft img{width:100%;height:100%;object-fit:cover;will-change:transform}
.capa-ft figcaption{position:absolute;left:22px;bottom:20px;z-index:2;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.65)}
.capa-ft::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(#1a1a1a00,#1a1a1a8c)}
@media(max-width:980px){
  .capa{grid-template-columns:1fr;min-height:0}
  .capa-tx{padding:calc(var(--topo-h) + var(--e7)) var(--gut) var(--e7);max-width:none;margin:0}
  .capa-ft{height:56vh;min-height:360px}
}

/* capa interna, mais baixa */
.capa.interna{min-height:76svh}
.capa.interna h1{max-width:17ch}
@media(max-width:980px){ .capa.interna .capa-ft{height:42vh;min-height:280px} }

/* ---------------- duas colunas ---------------- */
.duas{display:grid;grid-template-columns:1fr 1fr;gap:var(--e8) var(--e9);align-items:start}
.duas.estreita{gap:var(--e7) var(--e8)}
@media(max-width:900px){ .duas{grid-template-columns:1fr;gap:var(--e6)} }
.gruda{position:sticky;top:calc(var(--topo-h) + 44px)}
@media(max-width:900px){ .gruda{position:static} }

/* ---------------- grade de blocos ---------------- */
.blocos{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--linha);margin-top:var(--e8)}
.escuro .blocos{background:#333}
.blocos li{background:var(--fundo);padding:var(--e6) var(--e5) var(--e7);transition:background .4s}
.escuro .blocos li{background:var(--grafite)}
.escuro .blocos li:hover{background:#232323}
.blocos b{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--azul);font-weight:600;margin-bottom:var(--e4)}
.escuro .blocos b{color:var(--aco)}
.blocos p{font-size:15px;line-height:1.6;color:var(--texto-2);font-weight:300}
.escuro .blocos p{color:var(--claro-1)}
.blocos .num{display:block;font-size:11px;color:var(--texto-3);margin-bottom:var(--e5);font-variant-numeric:tabular-nums}
.escuro .blocos .num{color:var(--claro-2)}

/* lista de atributos */
.atrib{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--e6)}
.atrib li{border:1px solid var(--borda-campo);border-radius:999px;padding:9px 18px;font-size:14px;font-weight:500;color:var(--texto-2)}
.escuro .atrib li{border-color:#3a3a3a;color:var(--claro-1)}

/* lista de escopo em duas colunas */
.escopo{columns:2;column-gap:var(--e8);margin-top:var(--e6)}
.escopo li{break-inside:avoid;padding:13px 0;border-bottom:1px solid var(--linha);font-size:16px;color:var(--texto-2);font-weight:300}
.escuro .escopo li{border-color:#333;color:var(--claro-1)}
@media(max-width:700px){ .escopo{columns:1} }

/* ---------------- equação de custo ---------------- */
.eq{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;
  padding:var(--e7) var(--e5);background:var(--elevado);border-radius:16px;margin:var(--e7) 0}
.escuro .eq{background:#232323}
.eq span{font-size:clamp(.95rem,1.9vw,1.5rem);font-weight:600;letter-spacing:-.01em}
.eq i{font-style:normal;color:var(--aco);font-size:clamp(.95rem,1.9vw,1.5rem);font-weight:300}
.custos li{padding:var(--e5) 0;border-top:1px solid var(--linha);font-size:15.5px;line-height:1.55;color:var(--texto-2);font-weight:300}
.escuro .custos li{border-color:#333;color:var(--claro-1)}

/* ---------------- cartões de tipo de obra ---------------- */
.tipos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e5);margin-top:var(--e8)}
@media(max-width:900px){ .tipos{grid-template-columns:1fr} }
.tipo{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.tipo .foto{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:4/5;background:var(--rebaixado)}
.tipo .foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.tipo:hover .foto img{transform:scale(1.055)}
.tipo .foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#1a1a1a00 45%,#1a1a1ab8 100%)}
.tipo .rot{position:absolute;left:22px;bottom:20px;z-index:2;color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.tipo h3{margin:var(--e5) 0 12px;font-size:1.2rem;font-weight:600;line-height:1.3;letter-spacing:-.015em}
.tipo p{font-size:15px;color:var(--texto-2);font-weight:300;margin-bottom:var(--e4);flex:1}

/* ---------------- passos ---------------- */
.passos{position:relative;margin-top:var(--e8)}
.passos::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--linha)}
.passos::after{content:"";position:absolute;left:0;top:0;width:1px;background:var(--azul);height:var(--prog,0%);transition:height .15s linear}
.escuro .passos::before{background:#333}
.escuro .passos::after{background:var(--aco)}
.passo{position:relative;padding:var(--e6) 0 var(--e6) var(--e7);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--e5) var(--e6)}
@media(max-width:800px){ .passo{grid-template-columns:1fr;padding-left:var(--e5)} }
.passo::before{content:"";position:absolute;left:-4px;top:calc(var(--e6) + 12px);width:9px;height:9px;border-radius:50%;
  background:var(--fundo);border:1px solid var(--linha);transition:background .4s,border-color .4s,transform .4s}
.escuro .passo::before{background:var(--grafite);border-color:#444}
.passo.vis::before{background:var(--azul);border-color:var(--azul);transform:scale(1.25)}
.escuro .passo.vis::before{background:var(--aco);border-color:var(--aco)}
.passo .n{font-size:12px;letter-spacing:.12em;color:var(--texto-3);font-weight:600;margin-bottom:10px;display:block}
.escuro .passo .n{color:var(--claro-2)}
.passo h3{font-size:clamp(1.3rem,2.4vw,1.95rem);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.passo p{color:var(--texto-2);font-weight:300;font-size:16px;padding-top:6px}
.escuro .passo p{color:var(--claro-1)}

/* ---------------- portfólio com troca de imagem ---------------- */
.port{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--e8);align-items:center;margin-top:var(--e8)}
@media(max-width:980px){ .port{grid-template-columns:1fr;gap:var(--e6)} }
.port-visor{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#232323}
.port-visor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);
  transition:opacity .65s var(--ease),transform 1.3s var(--ease)}
.port-visor img.on{opacity:1;transform:scale(1)}
.port-lista li{border-top:1px solid #333}
.port-lista li:last-child{border-bottom:1px solid #333}
.port-lista button{width:100%;background:none;border:0;text-align:left;cursor:pointer;padding:20px 4px;
  display:flex;align-items:baseline;gap:var(--e4);transition:padding-left .45s var(--ease)}
.port-lista .nome{font-size:clamp(1.1rem,2.3vw,1.7rem);font-weight:500;letter-spacing:-.02em;color:var(--claro-2);transition:color .4s;line-height:1.2}
.port-lista .ond{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--claro-3);margin-left:auto;white-space:nowrap;transition:color .4s}
.port-lista button:hover,.port-lista button[aria-current="true"]{padding-left:18px}
.port-lista button:hover .nome,.port-lista button[aria-current="true"] .nome{color:#fff}
.port-lista button:hover .ond,.port-lista button[aria-current="true"] .ond{color:var(--aco)}
@media(max-width:560px){ .port-lista .ond{display:none} }

/* ---------------- grade de obras ---------------- */
.filtros{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--e7)}
.filtros button{background:none;border:1px solid var(--borda-campo);border-radius:999px;padding:10px 20px;
  font-size:14px;font-weight:500;cursor:pointer;color:var(--texto-2);transition:background .3s,color .3s,border-color .3s}
.filtros button:hover{border-color:var(--azul);color:var(--azul)}
.filtros button[aria-pressed="true"]{background:var(--grafite);border-color:var(--grafite);color:#fff}
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e5);margin-top:var(--e7)}
@media(max-width:980px){ .grade{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .grade{grid-template-columns:1fr} }
.obra{opacity:1;transition:opacity .4s,transform .4s var(--ease)}
.obra[hidden]{display:none}
.obra .foto{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:4/3;background:var(--rebaixado)}
.obra .foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.obra:hover .foto img{transform:scale(1.05)}
.obra .tags{position:absolute;left:14px;top:14px;z-index:2;display:flex;gap:6px}
.obra .tags span{background:rgba(26,26,26,.82);backdrop-filter:blur(6px);color:#fff;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:6px 10px;border-radius:4px}
.obra h3{margin:var(--e4) 0 4px;font-size:1.12rem;font-weight:600;letter-spacing:-.015em}
.obra p{font-size:13.5px;color:var(--texto-3);letter-spacing:.04em;text-transform:uppercase;font-weight:500}

/* ---------------- cascata de palavras ---------------- */
.cascata{display:flex;flex-wrap:wrap;gap:8px 14px;margin:var(--e7) 0 var(--e8)}
.cascata span{font-size:clamp(1.05rem,2.6vw,2rem);font-weight:300;letter-spacing:-.02em;color:var(--texto-3)}
.js .cascata span{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.escuro .cascata span{color:var(--claro-2)}
.cascata.vis span{opacity:1;transform:none}

/* ---------------- sanfona ---------------- */
.obj{margin-top:var(--e8);border-top:1px solid var(--linha)}
.obj>li{border-bottom:1px solid var(--linha)}
.obj h3{margin:0}
.obj button{width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:26px 48px 26px 0;position:relative;
  font-size:clamp(1.02rem,1.9vw,1.4rem);font-weight:500;letter-spacing:-.015em;line-height:1.3;transition:color .3s}
.obj button:hover{color:var(--azul)}
.obj button::after,.obj button::before{content:"";position:absolute;right:6px;top:50%;background:var(--azul);transition:transform .4s var(--ease),opacity .3s}
.obj button::before{width:15px;height:1.5px;margin-top:-.75px}
.obj button::after{width:1.5px;height:15px;margin-top:-7.5px;right:12.75px}
.obj button[aria-expanded="true"]::after{transform:rotate(90deg);opacity:0}
.obj .resp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.obj .resp>div{overflow:hidden}
.obj .resp p{padding:0 var(--e8) 14px 0;color:var(--texto-2);font-weight:300;font-size:16.5px;line-height:1.65;max-width:68ch}
.obj .resp p:last-child{padding-bottom:30px}
.obj li.aberto .resp{grid-template-rows:1fr}
@media(max-width:720px){ .obj .resp p{padding-right:0} }

/* ---------------- formulário ---------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--e5);margin-top:var(--e7)}
@media(max-width:760px){ .form{grid-template-columns:1fr} }
.campo{display:flex;flex-direction:column;gap:9px}
.campo.largo{grid-column:1 / -1}
.campo label{font-size:14px;font-weight:500}
.campo input,.campo select,.campo textarea{
  padding:15px 16px;border:1px solid var(--borda-campo);border-radius:8px;background:var(--fundo);
  font-size:16px;font-weight:400;transition:border-color .25s,box-shadow .25s}
.campo textarea{min-height:140px;resize:vertical;line-height:1.6}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px #4469831f}
.campo .ajuda{font-size:13px;color:var(--texto-3)}
fieldset{border:0;padding:0;margin:0;grid-column:1 / -1}
legend{font-size:14px;font-weight:500;padding:0;margin-bottom:12px}
.opcoes{display:flex;flex-wrap:wrap;gap:9px}
.opcoes label{position:relative;cursor:pointer}
.opcoes input{position:absolute;opacity:0;width:0;height:0}
.opcoes span{display:inline-block;border:1px solid var(--borda-campo);border-radius:999px;padding:10px 18px;
  font-size:14.5px;font-weight:500;color:var(--texto-2);transition:background .25s,color .25s,border-color .25s}
.opcoes input:checked + span{background:var(--grafite);border-color:var(--grafite);color:#fff}
.opcoes input:focus-visible + span{outline:2px solid var(--azul);outline-offset:3px}
.form-fim{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--e5);margin-top:var(--e4)}
.form-fim .ajuda{font-size:13.5px;color:var(--texto-3);max-width:44ch}

/* ---------------- CTA final ---------------- */
.cta-final{position:relative;overflow:hidden;background:var(--azul)}
.cta-final .env{position:relative;z-index:2;text-align:center;padding-top:var(--e9);padding-bottom:var(--e9)}
.cta-final h2{color:#fff;max-width:18ch;margin:0 auto var(--e5)}
.cta-final p{color:#dce5eb;max-width:52ch;margin:0 auto var(--e7);font-weight:300;font-size:1.08rem}

/* ---------------- rodapé ---------------- */
.rod{background:var(--grafite);color:#fff;padding:var(--e9) 0 var(--e6)}
.rod-grade{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:var(--e7)}
@media(max-width:860px){ .rod-grade{grid-template-columns:1fr;gap:var(--e6)} }
.rod img{height:30px;margin-bottom:var(--e5)}
.rod p{color:var(--claro-2);font-size:15px;font-weight:300;max-width:38ch}
.rod h4{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--aco);margin:0 0 var(--e4);font-weight:600}
.rod li{margin-bottom:11px}
.rod a{color:var(--claro-1);text-decoration:none;font-size:15px;font-weight:300;transition:color .25s}
.rod a:hover{color:#fff}
.rod-fim{margin-top:var(--e8);padding-top:var(--e5);border-top:1px solid #333;display:flex;flex-wrap:wrap;
  gap:12px 24px;justify-content:space-between;color:var(--claro-2);font-size:13px}

/* ---------------- acessibilidade ---------------- */
.pular{position:absolute;left:-9999px;top:0;background:#fff;color:#1a1a1a;padding:14px 20px;z-index:200;border-radius:0 0 8px 0}
.pular:focus{left:0}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .rv,.cascata span{opacity:1;transform:none}
  .corta::after{transform:scaleY(0)}
  .corta>img{transform:none}
  .linha-cresce{transform:scaleX(1)}
}

/* ===========================================================
   Camada de movimento e de prova — adicionada na revisão
   =========================================================== */

/* barra de progresso de leitura */
.progresso{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;
  background:var(--aco);z-index:95;pointer-events:none;will-change:transform}

/* título que sobe por linha, atrás de uma máscara */
.js .revela-linhas .ln{display:block;overflow:hidden}
.js .revela-linhas .ln > i{display:block;font-style:inherit;transform:translateY(104%);
  transition:transform 1s var(--ease);transition-delay:var(--d,0s)}
.js .revela-linhas.vis .ln > i{transform:none}

/* moldura com deslocamento suave da foto dentro dela */
.moldura{position:relative;overflow:hidden;border-radius:12px;background:var(--rebaixado)}
.moldura img{width:100%;height:100%;object-fit:cover;will-change:transform}

/* faixa de marcas */
.marcas{overflow:hidden;position:relative;padding:var(--e6) 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marcas-trilho{display:flex;gap:var(--e8);width:max-content;align-items:center}
.js .marcas-trilho{animation:desliza 46s linear infinite}
.marcas:hover .marcas-trilho,.marcas:focus-within .marcas-trilho{animation-play-state:paused}
.marcas img{height:38px;width:auto;object-fit:contain;opacity:.62;filter:grayscale(1);
  transition:opacity .35s,filter .35s}
.marcas img:hover{opacity:1;filter:none}
@keyframes desliza{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(max-width:720px){ .marcas img{height:30px} .marcas-trilho{gap:var(--e7)} }

/* faixa de prova */
.prova{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha);margin-top:var(--e7)}
.escuro .prova{background:#333}
.prova li{background:var(--fundo);padding:var(--e6) var(--e5)}
.escuro .prova li{background:var(--grafite)}
.prova .n{display:block;font-size:clamp(2rem,4.4vw,3.4rem);font-weight:600;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--texto)}
.escuro .prova .n{color:#fff}
.prova .r{display:block;margin-top:12px;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:500;color:var(--texto-3)}
.escuro .prova .r{color:var(--claro-2)}
@media(max-width:700px){ .prova{grid-template-columns:1fr} }

/* chip que aparece no cartão de obra */
.obra .foto .ver{position:absolute;left:14px;bottom:14px;z-index:2;background:#fff;color:var(--grafite);
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;padding:8px 13px;border-radius:999px;
  opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .4s var(--ease)}
.obra:hover .foto .ver,.obra:focus-within .foto .ver{opacity:1;transform:none}
.obra .foto::after{content:"";position:absolute;inset:0;background:linear-gradient(#1a1a1a00 55%,#1a1a1a73);
  opacity:0;transition:opacity .4s}
.obra:hover .foto::after{opacity:1}

/* transição entre páginas */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:sai .2s ease both}
  ::view-transition-new(root){animation:entra .32s var(--ease) both}
}
@keyframes sai{to{opacity:0}}
@keyframes entra{from{opacity:0;transform:translateY(10px)}}

@media(prefers-reduced-motion:reduce){
  .js .revela-linhas .ln > i{transform:none}
  .js .marcas-trilho{animation:none}
  .progresso{display:none}
  .moldura img{transform:none !important}
}

/* ===========================================================
   Segunda camada de movimento
   =========================================================== */

/* saída da capa: o texto sobe e some ao rolar */
.js .capa-tx{will-change:transform,opacity}

/* texto que acende palavra por palavra conforme passa pela tela */
.acende{font-size:clamp(1.4rem,3.4vw,2.9rem);line-height:1.28;font-weight:500;letter-spacing:-.025em;max-width:22ch}
.acende w{color:var(--linha);transition:color .35s var(--ease)}
.escuro .acende w{color:#3d3d3d}
.acende w.on{color:var(--texto)}
.escuro .acende w.on{color:#fff}
@media(prefers-reduced-motion:reduce){ .acende w{color:var(--texto)} .escuro .acende w{color:#fff} }

/* trilho horizontal preso na tela */
.trilho-fora{position:relative}
.trilho-colado{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.trilho{display:flex;gap:var(--e5);padding:0 var(--gut);will-change:transform}
.trilho-cartao{flex:0 0 clamp(260px,32vw,400px);background:#232323;border-radius:14px;padding:var(--e6) var(--e5) var(--e7);
  display:flex;flex-direction:column;min-height:min(60vh,430px)}
.trilho-cartao .num{font-size:12px;letter-spacing:.14em;color:var(--aco);font-weight:600;margin-bottom:auto}
.trilho-cartao b{display:block;font-size:clamp(1.25rem,2.1vw,1.7rem);font-weight:600;letter-spacing:-.02em;margin:var(--e6) 0 14px;line-height:1.15}
.trilho-cartao p{font-size:15.5px;line-height:1.6;color:var(--claro-1);font-weight:300}
.trilho-dica{position:absolute;left:var(--gut);bottom:var(--e7);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--claro-3);display:flex;align-items:center;gap:12px}
.trilho-dica::after{content:"";width:46px;height:1px;background:currentColor}
@media(max-width:900px){
  .trilho-fora{height:auto !important}
  .trilho-colado{position:static;height:auto;display:block}
  .trilho{flex-direction:column;transform:none !important;padding:0}
  .trilho-cartao{flex:none;min-height:0}
  .trilho-dica{display:none}
}

/* botão que puxa levemente o cursor */
.js .magnetico{will-change:transform}

/* grade de obras entra escalonada */
.js .grade .obra{transition-delay:var(--atraso,0s)}

/* ===========================================================
   Terceira camada — vinda das referências
   Désourdy (assinatura gigante, grade editorial),
   Lightship / Salterra (janela que abre para tela cheia)
   =========================================================== */

/* ---- janela que abre: a foto começa recuada e vira sangria total ---- */
.abre-fora{position:relative}
.abre{position:relative;overflow:hidden;background:#232323;margin:0 auto;
  width:100%;border-radius:0;max-height:86svh}
.js .abre{width:var(--aw,72%);border-radius:var(--ar,22px)}
.abre img{width:100%;height:100%;object-fit:cover;will-change:transform}
.abre figcaption{position:absolute;left:24px;bottom:20px;z-index:2;color:#fff;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  text-shadow:0 1px 12px rgba(0,0,0,.7);opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .7s var(--ease)}
.abre.vis figcaption{opacity:1;transform:none}
.abre::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;
  background:linear-gradient(#1a1a1a00,#1a1a1a85);pointer-events:none}
@media(max-width:720px){ .js .abre{width:var(--aw,86%);border-radius:var(--ar,14px)} .abre figcaption{left:16px} }

/* ---- assinatura gigante que corre em outro ritmo ---- */
.assinatura{overflow:hidden;position:relative;padding:var(--e7) 0;pointer-events:none;
  -webkit-user-select:none;user-select:none}
.assinatura img{height:clamp(64px,13vw,190px);width:auto;max-width:none;opacity:.12;
  will-change:transform;margin-left:-4vw}
.escuro .assinatura img{opacity:.14}
@media(prefers-reduced-motion:reduce){ .assinatura img{transform:none !important} }

/* ---- indicador de rolagem na capa ---- */
.role{position:absolute;right:var(--gut);bottom:var(--e6);z-index:4;display:flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#ffffffb0;transition:opacity .5s}
.role::after{content:"";width:1px;height:42px;background:linear-gradient(#ffffff00,#ffffffcc);
  animation:desceLinha 2.6s var(--ease) infinite}
@keyframes desceLinha{
  0%{transform:scaleY(.15);transform-origin:top}
  48%{transform:scaleY(1);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(.15);transform-origin:bottom}
}
@media(max-width:980px){ .role{display:none} }
@media(prefers-reduced-motion:reduce){ .role::after{animation:none;transform:scaleY(1)} }

/* ---- grade editorial de obras ---- */
.editorial{display:grid;grid-template-columns:1fr 1fr;gap:var(--e9) var(--e8);margin-top:var(--e8)}
.editorial .obra:nth-child(even){margin-top:var(--e9)}
.editorial .obra .foto{aspect-ratio:4/3;border-radius:4px}
.editorial .obra:nth-child(3n+2) .foto{aspect-ratio:3/4}
.editorial .ficha{display:flex;align-items:baseline;gap:var(--e4);
  margin-top:var(--e5);padding-bottom:10px;border-bottom:1px solid var(--texto)}
.editorial .ficha .ponto{width:7px;height:7px;border-radius:50%;background:var(--texto);flex:0 0 auto;
  transform:translateY(-3px);transition:background .35s,transform .35s var(--ease)}
.editorial .obra:hover .ficha .ponto{background:var(--azul);transform:translateY(-3px) scale(1.5)}
.editorial .ficha h3{font-size:clamp(1.1rem,1.9vw,1.45rem);font-weight:600;letter-spacing:-.02em;margin:0}
.editorial .ficha .idx{margin-left:auto;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--texto-3)}
.editorial .meta{display:flex;gap:var(--e4);margin-top:10px;font-size:13.5px;color:var(--texto-3)}
.editorial .meta .tipo{text-transform:capitalize}
.editorial .obra[hidden]{display:none}
@media(max-width:820px){
  .editorial{grid-template-columns:1fr;gap:var(--e8)}
  .editorial .obra:nth-child(even){margin-top:0}
  .editorial .obra:nth-child(3n+2) .foto{aspect-ratio:4/3}
}