/* =================================================================
   QUADRATTA CAPITAL — Premium design system
   Squared geometry · slate / ivory / platinum · ruled editorial
   ================================================================= */

:root{
  /* Brand */
  --slate:        #353742;   /* logo background — signature */
  --slate-deep:   #24262F;
  --slate-deeper: #191A20;
  --slate-line:   #41434E;

  --ink:          #1B1D24;   /* deepest text on light */
  --ink-soft:     #2E313B;

  /* Light surfaces */
  --paper:        #F4F2EC;   /* warm ivory — primary light bg */
  --bone:         #ECEAE3;   /* slightly deeper band */
  --card:         #FBFAF6;   /* card / input surface */
  --white:        #FFFFFF;

  /* Text */
  --on-light:     #2B2D36;   /* body on light */
  --on-light-2:   #5C5F69;   /* muted on light */
  --on-dark:      #ECEDEA;   /* text on slate */
  --on-dark-2:    #9FA2AD;   /* muted on slate */

  /* Metal */
  --platinum:     #C7C9CF;
  --silver:       #E6E7E8;
  --metal:        linear-gradient(135deg,#EDEEF0 0%,#BFC2C9 42%,#EFF0F2 66%,#A9ACB4 100%);

  /* Lines */
  --line:         rgba(27,29,36,.14);
  --line-2:       rgba(27,29,36,.26);
  --line-dark:    rgba(255,255,255,.12);
  --line-dark-2:  rgba(255,255,255,.20);

  /* Type */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --sec-pad: clamp(4.5rem, 9vw, 8.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------- Reset ----------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1rem,.96rem + .25vw,1.075rem);
  line-height:1.72;
  color:var(--on-light);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:600; line-height:1.08; letter-spacing:-.01em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
em{ font-style:italic; }
sup{ font-size:.55em; vertical-align:super; font-weight:500; }
::selection{ background:var(--slate); color:#fff; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

.display{
  font-family:var(--display);
  font-stretch:118%;
  font-variation-settings:"wght" 600,"wdth" 118;
  letter-spacing:-.012em;
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--slate); color:#fff; padding:.7rem 1.1rem;
  font-size:.8rem; letter-spacing:.04em;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ------------------------- Shared atoms -------------------------- */
.eyebrow{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--mono);
  font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-light-2);
  margin:0 0 1.4rem;
}
.eyebrow--light{ color:var(--on-dark-2); }
.sqmark{ width:8px; height:8px; background:var(--ink); display:inline-block; flex:0 0 auto; }
.sqmark--metal{ background:var(--metal); }

.sec-head{ max-width:62ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.sec-title{
  font-size:clamp(1.7rem,1.2rem + 2.1vw,2.9rem);
  color:var(--ink); line-height:1.12;
}
.sec-sub{ margin-top:1.1rem; color:var(--on-light-2); max-width:60ch; }
.muted{ color:var(--on-light-2); }
.hero__lead,.firma__lead,.area p,.pillar p,.footer__legal p{ text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
@media (max-width:600px){
  .hero__lead,.firma__lead,.area p,.pillar p,.footer__legal p{ text-align:left; -webkit-hyphens:none; hyphens:none; }
}

/* Buttons */
.btn{
  --bw:1px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:1rem 1.9rem;
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  border:var(--bw) solid transparent; cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
}
.btn--solid{ background:var(--ink); color:#fff; }
.btn--solid:hover{ background:var(--slate); }
.btn--light{ background:var(--silver); color:var(--ink); }
.btn--light:hover{ background:#fff; }
.btn--ghost-light{ border-color:var(--line-dark-2); color:var(--on-dark); background:transparent; }
.btn--ghost-light:hover{ border-color:var(--silver); background:rgba(255,255,255,.06); }
.btn--block{ width:100%; }
.btn:focus-visible{ outline:2px solid var(--platinum); outline-offset:3px; }

/* =============================== NAV ============================== */
.topbar{
  background:var(--slate-deeper); color:var(--on-dark-2);
  border-bottom:1px solid var(--line-dark);
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
}
.topbar__inner{ display:flex; justify-content:space-between; align-items:center; min-height:36px; gap:1rem; }
.topbar__loc{ color:var(--on-dark-2); }
@media (max-width:640px){ .topbar__loc{ display:none; } }

.nav{
  position:sticky; top:0; z-index:100;
  background:var(--slate); color:var(--on-dark);
  border-bottom:1px solid var(--line-dark);
  transition:box-shadow .4s var(--ease), background .4s var(--ease);
}
.nav.is-scrolled{ box-shadow:0 14px 40px -24px rgba(0,0,0,.7); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; min-height:76px; gap:2rem; transition:min-height .4s var(--ease); }
.nav.is-scrolled .nav__inner{ min-height:64px; }
.nav__logo{ height:30px; width:auto; transition:height .4s var(--ease); }
.nav.is-scrolled .nav__logo{ height:26px; }

.nav__menu{ display:flex; align-items:center; gap:2.1rem; }
.nav__menu a{
  position:relative; font-family:var(--mono); font-size:.73rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--on-dark-2);
  padding:.4rem 0; transition:color .3s var(--ease);
}
.nav__menu a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--silver); transition:width .35s var(--ease);
}
.nav__menu a:hover{ color:#fff; }
.nav__menu a:hover::after{ width:100%; }
.nav__menu .nav__cta{
  color:var(--on-dark); border:1px solid var(--line-dark-2);
  padding:.6rem 1.25rem; letter-spacing:.14em;
}
.nav__menu .nav__cta::after{ display:none; }
.nav__menu .nav__cta:hover{ background:rgba(255,255,255,.07); border-color:var(--silver); color:#fff; }

.nav__toggle{ display:none; flex-direction:column; gap:6px; width:42px; height:42px;
  border:1px solid var(--line-dark-2); background:transparent; cursor:pointer; align-items:center; justify-content:center; }
.nav__toggle span{ width:18px; height:1.5px; background:var(--on-dark); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav__mobile{ display:none; }

@media (max-width:900px){
  .nav__menu{ display:none; }
  .nav__toggle{ display:flex; }
  .nav__mobile{
    display:grid; gap:.25rem;
    max-height:0; overflow:hidden;
    background:var(--slate-deep); border-top:1px solid var(--line-dark);
    transition:max-height .45s var(--ease);
  }
  .nav__mobile.is-open{ max-height:60vh; }
  .nav__mobile a{
    padding:1rem var(--gutter); color:var(--on-dark-2);
    font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
    border-bottom:1px solid var(--line-dark);
  }
  .nav__mobile a:hover{ color:#fff; background:rgba(255,255,255,.04); }
  .nav__toggle.is-open span:first-child{ transform:translateY(3.75px) rotate(45deg); }
  .nav__toggle.is-open span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }
}

/* ============================== HERO ============================= */
.hero{
  --p:0; /* 0 = foto da capa · 1 = grelha quadrada (definido no scroll) */
  background:var(--slate); color:var(--on-dark);
  position:relative; overflow:hidden; isolation:isolate;
  padding-top:clamp(3.5rem,7vw,6rem);
  border-bottom:1px solid var(--line-dark);
}
.hero .wrap{ position:relative; z-index:1; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__photo{ position:absolute; inset:0; opacity:calc(1 - var(--p)); transition:opacity .12s linear;
  background:
    linear-gradient(100deg, rgba(22,23,30,.95) 0%, rgba(22,23,30,.82) 30%, rgba(22,23,30,.46) 64%, rgba(22,23,30,.34) 100%),
    linear-gradient(0deg, rgba(22,23,30,.74) 0%, rgba(22,23,30,.12) 32%),
    url("../img/towers.jpg") center 35% / cover no-repeat;
}
.hero::before{ /* grelha quadrada — surge conforme o scroll (var --p) */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:calc(var(--p) * .55); transition:opacity .12s linear;
  background-image:
    linear-gradient(var(--line-dark) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(140% 100% at 50% 25%,#000 55%,transparent 100%);
          mask-image:radial-gradient(140% 100% at 50% 25%,#000 55%,transparent 100%);
}
.hero__inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  min-height:clamp(460px,76svh,840px);
  padding-bottom:clamp(3rem,6vw,5rem);
}
.hero__copy{ max-width:780px; margin-top:clamp(1.5rem,5vh,3.5rem); }
.hero__title{
  font-size:clamp(2.05rem,1.4rem + 3.1vw,3.6rem);
  color:#fff; margin:.2rem 0 1.6rem; max-width:22ch; text-wrap:balance;
}
.hero__title em{ color:var(--platinum); font-style:normal; }
.hero__lead{ color:var(--on-dark-2); max-width:50ch; font-size:1.06rem; line-height:1.78; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }

.hero__chip{
  margin-top:auto; padding-top:1.5rem; max-width:max-content;
  border-top:1px solid var(--line-dark);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--on-dark-2);
}
@media (max-width:600px){
  .hero__inner{ min-height:auto; }
  .hero__chip{ margin-top:2.4rem; }
}

/* Stats ribbon */
.stats{ border-top:1px solid var(--line-dark); padding-bottom:clamp(3rem,6vw,5rem); }
.stats__intro{ color:var(--on-dark-2); font-size:.86rem; letter-spacing:.02em; padding:1.5rem 0 0; max-width:60ch; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:1.5rem; border:1px solid var(--line-dark); }
.stat{ padding:clamp(1.4rem,2.5vw,2.2rem); border-right:1px solid var(--line-dark); }
.stat:last-child{ border-right:0; }
.stat__num{ display:block; color:#fff; font-size:clamp(1.7rem,1.1rem + 2.4vw,2.6rem); line-height:1; }
.stat__num sup{ color:var(--platinum); }
.stat__label{ display:block; margin-top:.7rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--on-dark-2); }
@media (max-width:760px){
  .stats__grid{ grid-template-columns:1fr 1fr; }
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line-dark); }
}

/* ============================ SECTIONS =========================== */
.section{ padding-block:var(--sec-pad); }
.section--paper{ background:var(--paper); }
.section--bone{ background:var(--bone); }

/* Pillars */
.firma__grid{ margin-bottom:clamp(2.5rem,5vw,3.8rem); }
.firma__lead{ font-size:clamp(1.05rem,1rem + .5vw,1.28rem); line-height:1.7; color:var(--ink-soft); max-width:75ch; }
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-2); }
.pillar{ padding:2.2rem 2rem 2.2rem 0; border-right:1px solid var(--line); margin-right:2rem; }
.pillar:last-child{ border-right:0; margin-right:0; }
.pillar__idx{ font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.12em; color:var(--on-light-2); }
.pillar__title{ font-size:1.35rem; color:var(--ink); margin:.9rem 0 .7rem; }
.pillar p{ color:var(--on-light-2); font-size:.98rem; }
@media (max-width:780px){
  .pillars{ grid-template-columns:1fr; }
  .pillar{ border-right:0; margin-right:0; padding:1.8rem 0; border-bottom:1px solid var(--line); }
  .pillar:last-child{ border-bottom:0; }
}

/* Manifesto */
.manifesto{ position:relative; background:var(--slate-deep); color:#fff; padding-block:clamp(4.5rem,8vw,7.5rem); overflow:hidden; }
.manifesto__bg{ position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:
    linear-gradient(var(--line-dark) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 110% at 8% 0%,#000,transparent 72%);
          mask-image:radial-gradient(120% 110% at 8% 0%,#000,transparent 72%); }
.manifesto::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--slate-deep),transparent 60%,var(--slate-deep)); }
.manifesto__inner{ position:relative; z-index:2; max-width:1000px; }
.manifesto__quote{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(1.35rem,1rem + 1.9vw,2.3rem); line-height:1.44; letter-spacing:-.01em;
  color:#fff; margin:.4rem 0 0; max-width:36ch; text-wrap:balance;
}
.manifesto__sig{ margin-top:2rem; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-2); }

/* Areas */
.areas{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); }
.area{ padding:clamp(1.8rem,3vw,2.6rem); border-right:1px solid var(--line); background:var(--card);
  transition:background .4s var(--ease); }
.area:last-child{ border-right:0; }
.area:hover{ background:#fff; }
.area__idx{ display:inline-block; font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.08em; color:#fff;
  background:var(--ink); padding:.3rem .55rem; margin-bottom:1.4rem; }
.area__title{ font-size:1.4rem; color:var(--ink); margin-bottom:.9rem; }
.area p{ color:var(--on-light-2); font-size:.97rem; }
@media (max-width:820px){
  .areas{ grid-template-columns:1fr; }
  .area{ border-right:0; border-bottom:1px solid var(--line); }
  .area:last-child{ border-bottom:0; }
}

/* Steps */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line-2); }
.step{ position:relative; padding:2.2rem 1.4rem 0 0; }
.step:not(:last-child){ border-right:1px solid var(--line); margin-right:1.2rem; }
.step__n{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:1px solid var(--line-2); color:var(--ink); font-family:var(--mono); font-weight:500; font-size:.92rem; margin-bottom:1.2rem; }
.step__title{ font-size:1.1rem; color:var(--ink); margin-bottom:.6rem; }
.step p{ font-size:.9rem; color:var(--on-light-2); }
@media (max-width:880px){
  .steps{ grid-template-columns:1fr; border-top:0; }
  .step{ padding:1.6rem 0 1.6rem 0; border-top:1px solid var(--line); margin-right:0; }
  .step:not(:last-child){ border-right:0; margin-right:0; }
}

/* Contact */
.contact{ display:grid; grid-template-columns:.95fr 1.05fr; gap:0; border:1px solid var(--line); }
.contact__details{ background:var(--slate); color:var(--on-dark); padding:clamp(1.6rem,3vw,2.6rem); }
.contact__row{ display:block; padding:1.3rem 0; border-bottom:1px solid var(--line-dark); transition:padding-left .3s var(--ease); }
.contact__row:first-child{ padding-top:0; }
.contact__row:last-child{ border-bottom:0; padding-bottom:0; }
a.contact__row:hover{ padding-left:.5rem; }
.contact__k{ display:block; font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-2); margin-bottom:.45rem; }
.contact__v{ display:block; color:#fff; font-size:1.02rem; line-height:1.5; overflow-wrap:anywhere; }
.contact__details a.contact__row .contact__v{ color:var(--platinum); }

.form{ background:var(--card); padding:clamp(1.6rem,3vw,2.6rem); }
.field{ margin-bottom:1.3rem; }
.field label{ display:block; font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--on-light-2); margin-bottom:.55rem; }
.field label span{ color:#9a6b2f; }
.field input,.field textarea{
  width:100%; font-family:var(--sans); font-size:.98rem; color:var(--ink);
  background:#fff; border:1px solid var(--line-2); padding:.85rem .95rem;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus,.field textarea:focus{ outline:0; border-color:var(--ink); box-shadow:inset 0 -2px 0 var(--ink); }
.field input:user-invalid,.field textarea:user-invalid{ border-color:#a4452f; }
.form__status{ margin-top:1rem; font-size:.86rem; min-height:1.2em; }
.form__status.is-ok{ color:#2f6b46; }
.form__status.is-err{ color:#a4452f; }
@media (max-width:780px){ .contact{ grid-template-columns:1fr; } .contact__details{ order:2; } }

/* ============================= FOOTER ============================ */
.footer{ background:var(--slate-deeper); color:var(--on-dark-2); padding-top:clamp(3.5rem,6vw,5rem); }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2.8rem; border-bottom:1px solid var(--line-dark); }
.footer__logo{ height:34px; width:auto; margin-bottom:1.3rem; }
.footer__tag{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--platinum); margin-bottom:1rem; }
.footer__addr{ font-size:.86rem; line-height:1.6; color:var(--on-dark-2); }
.footer__nav,.footer__contact{ display:grid; gap:.85rem; align-content:start; }
.footer__nav a,.footer__contact a{ font-size:.86rem; letter-spacing:.04em; color:var(--on-dark-2); transition:color .3s var(--ease); width:max-content; }
.footer__nav a:hover,.footer__contact a:hover{ color:#fff; }
.footer__contact a{ letter-spacing:.02em; }
.footer__legal{ padding:1.8rem 0 2.4rem; }
.footer__legal p{ font-size:.78rem; line-height:1.72; color:#9498A3; max-width:none; }
.footer__copy{ margin-top:1rem !important; letter-spacing:.04em; color:var(--on-dark-2) !important; }
@media (max-width:780px){
  .footer__top{ grid-template-columns:1fr; gap:2rem; }
}

/* ============================ MOTION ============================= */
/* Progressive enhancement: só esconde p/ revelar se o JS estiver ativo (classe .js).
   Sem JS, o conteúdo aparece normalmente — nunca fica em branco. */
[data-reveal]{ transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal]{ opacity:0; transform:translateY(16px); }
[data-reveal].is-in{ opacity:1; transform:none; }
.js [data-reveal]:nth-child(2){ transition-delay:.06s; }
.js [data-reveal]:nth-child(3){ transition-delay:.12s; }
.js [data-reveal]:nth-child(4){ transition-delay:.18s; }
.js [data-reveal]:nth-child(5){ transition-delay:.24s; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
}