/* =============================================
   TOKENS — Virtual Engenharia · Cream Mode
   ============================================= */
:root {
  /* CREAM PALETTE */
  --bg:         #ECEDE6;    /* fundo principal */
  --bg-white:   #FAFAF8;    /* branco levemente quente */
  --bg-alt:     #E4E5DE;    /* seções alternadas */
  --bg-dark:    #2D3142;    /* blocos escuros */
  --border:     rgba(45,49,66,0.12);
  --border-s:   rgba(45,49,66,0.06);

  /* BRAND */
  --teal:       #2085A8;
  --teal-l:     #3A9FBD;
  --teal-d:     #1E7FA0;
  --mint:       #B5D8C0;
  --mint-2:     #9DCEB4;

  /* TEXT */
  --ink:        #1E2133;    /* texto principal */
  --ink-mid:    #4A5068;    /* texto médio */
  --ink-muted:  #888EA8;    /* texto suave */

  /* GRADIENTS */
  --g-brand:    linear-gradient(135deg,#B5D8C0 0%,#3A9FBD 50%,#1E7FA0 100%);
  --g-brand-h:  linear-gradient(90deg,#B5D8C0 0%,#2085A8 100%);

  /* TYPE */
  --fd:  'Montserrat', sans-serif;
  --fb:  'Montserrat', sans-serif;

  /* EFFECTS */
  --sh:  0 4px 24px rgba(45,49,66,0.1);
  --sh2: 0 12px 48px rgba(45,49,66,0.14);
  --ease:    cubic-bezier(0.4,0,0.2,1);
  --ease-sp: cubic-bezier(0.34,1.56,0.64,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--fb);background:var(--bg);color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-feature-settings:'kern' 1,'liga' 1;
  text-rendering:optimizeLegibility}
img{vertical-align:top;max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{border:none;cursor:pointer;font:inherit}
input,textarea,select{font:inherit}
::selection{background:var(--ink);color:var(--bg)}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg-alt)}
::-webkit-scrollbar-thumb{background:rgba(45,49,66,0.2);border-radius:2px}

/* ---- READING UX — Base typography improvements ---- */
p{font-size:16px;line-height:1.75;color:var(--ink-mid)}
h1,h2,h3,h4,h5,h6{line-height:1.1;color:var(--ink);letter-spacing:-.01em}
strong,b{font-weight:700;color:var(--ink)}

/* ---- PRELOADER ---- */
.preloader{position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;
  transition:opacity .5s var(--ease)}
.preloader.hide{opacity:0;pointer-events:none}
.pre-logo{display:flex;align-items:center;gap:12px;font-family:var(--fd);
  font-size:18px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.pre-bar-wrap{width:200px;height:1px;background:var(--border)}
.pre-bar{height:100%;background:var(--g-brand-h);width:0%;
  transition:width 1.1s var(--ease)}

/* ---- VERTICAL GRID GUIDES (digital-architect style) ---- */
.grid-guides{position:fixed;inset:0;pointer-events:none;z-index:0;
  display:grid;grid-template-columns:repeat(12,1fr);padding:0 5rem}
.grid-guides span{border-right:1px solid var(--border-s);height:100%}

/* ---- CONTAINER ---- */
.w{width:100%;max-width:1400px;margin:0 auto;padding:0 5rem}

/* ---- HEADER — luxury style ---- */
.header{position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid var(--border);background:var(--bg);
  transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.header.scrolled{background:rgba(236,237,230,0.95);backdrop-filter:blur(20px);
  box-shadow:0 1px 0 var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;
  height:88px;gap:40px}
/* left nav */
.h-nav-l,.h-nav-r{display:flex;gap:36px;align-items:center}
.h-nav-l a,.h-nav-r a{font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mid);
  transition:color .25s;position:relative;padding-bottom:3px}
.h-nav-l a::after,.h-nav-r a::after{content:'';position:absolute;bottom:0;left:0;
  width:0;height:1.5px;background:var(--teal);transition:width .3s var(--ease)}
.h-nav-l a:hover,.h-nav-r a:hover{color:var(--ink)}
.h-nav-l a:hover::after,.h-nav-r a:hover::after{width:100%}
.h-nav-l a.active,.h-nav-r a.active{color:var(--teal);font-weight:700}
.h-nav-l a.active::after,.h-nav-r a.active::after{width:100%}
/* center brand */
.h-logo{position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px}
.h-logo img{max-height:44px!important;}
/* right CTA */
.h-cta{border:1.5px solid var(--ink);padding:10px 24px;font-size:12px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:transparent;transition:all .3s var(--ease);
  white-space:nowrap}
.h-cta:hover{background:var(--ink);color:var(--bg)}

/* ---- MOBILE HAMBURGER + OVERLAY MENU ---- */
.h-burger{display:none;flex-direction:column;justify-content:center;
  align-items:center;gap:5px;width:40px;height:40px;background:none;
  border:none;cursor:pointer;padding:0;z-index:600}
.h-burger span{display:block;width:24px;height:2px;background:var(--ink);
  border-radius:2px;transition:transform .35s var(--ease),opacity .25s var(--ease)}
.h-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.h-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.h-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-overlay{position:fixed;inset:0;z-index:500;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:32px;opacity:0;visibility:hidden;transform:translateY(-12px);
  overflow-y:auto;padding:96px 24px 40px;
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s linear .4s}
.mobile-overlay.open{opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s}
.mobile-overlay-close{position:absolute;top:28px;right:28px;width:44px;height:44px;
  background:none;border:none;cursor:pointer;display:flex;align-items:center;
  justify-content:center}
.mobile-overlay-close span{position:absolute;width:26px;height:2px;background:var(--ink);
  border-radius:2px}
.mobile-overlay-close span:first-child{transform:rotate(45deg)}
.mobile-overlay-close span:last-child{transform:rotate(-45deg)}
.mobile-overlay-nav{display:flex;flex-direction:column;align-items:center;gap:28px;
  width:100%;max-width:340px;text-align:center}
.mobile-overlay-nav a{font-family:var(--fd);font-size:1.5rem;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);
  transition:color .25s var(--ease)}
.mobile-overlay-nav a.active{color:var(--teal)}
.mobile-overlay-nav a:hover{color:var(--teal)}
.mobile-overlay-nav a.h-cta{display:inline-block;border:1.5px solid var(--ink);
  padding:14px 36px;font-size:1rem;margin-top:12px;white-space:nowrap}
.mobile-overlay-nav a.h-cta:hover{background:var(--ink);color:var(--bg)}
body.no-scroll{overflow:hidden}

/* ---- AOS ---- */
[data-aos]{opacity:0;transition:opacity 800ms var(--ease),transform 800ms var(--ease)}
[data-aos].aos-animate{opacity:1}
[data-aos="fade-up"]{transform:translateY(40px)}
[data-aos="fade-up"].aos-animate{transform:translateY(0)}
[data-aos="fade-left"]{transform:translateX(40px)}
[data-aos="fade-left"].aos-animate{transform:translateX(0)}
[data-aos="fade-right"]{transform:translateX(-40px)}
[data-aos="fade-right"].aos-animate{transform:translateX(0)}

/* ---- TEXT REVEAL (digital-architect style) ---- */
.tr-wrap{display:inline-block;overflow:hidden;vertical-align:top}
.tr-content{display:inline-block;transform:translateY(105%);
  transition:transform 1s cubic-bezier(0.22,1,0.36,1)}
.tr-content.revealed{transform:translateY(0)}

/* ---- FILL TEXT (hajster style) ---- */
.fill-text{font-family:var(--fd);font-weight:500;line-height:1.05;text-transform:uppercase}
.fill-text p{position:relative;display:block;padding:3px 0;
  border-bottom:1px solid var(--border-s)}
.fill-text p:last-child{border-bottom:none}
.fill-list{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.fill-line{position:absolute;top:0;left:0;width:100%;height:100%;
  background:var(--bg);transform:translateX(100%);
  transition:transform .9s var(--ease)}
.fill-text p.revealed .fill-line{transform:translateX(0%)}

/* ---- KEYFRAMES ---- */
@keyframes gFlow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes scaleIn{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}

/* ---- SECTIONS ---- */
.section{padding:120px 0;position:relative}
.section-white{background:var(--bg-white)}
.section-alt{background:var(--bg-alt)}
.s-num{display:flex;align-items:center;gap:16px;font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:16px}
.s-num::after{content:'';flex:1;height:1px;background:var(--border)}
.s-h{font-family:var(--fd);font-size:clamp(2.8rem,5.5vw,5rem);font-weight:500;
  line-height:1;text-transform:uppercase;margin-bottom:80px}
.s-h .accent{background:var(--g-brand);background-size:300% 300%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;animation:gFlow 6s ease infinite}
hr.div{border:none;height:1px;background:var(--border);margin:64px 0}

/* ---- HERO ---- */
.banner{min-height:100vh;background:var(--bg);position:relative;
  display:flex;align-items:flex-end;overflow:hidden}

/* vertical grid in hero */
.b-guides{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);
  pointer-events:none;padding:0 5rem}
.b-guides span{border-right:1px solid var(--border-s);height:100%}

.banner-inner{position:relative;z-index:1;padding:220px 0 100px;width:100%}
.b-eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mid);margin-bottom:28px}
.b-eyebrow::before{content:'';width:32px;height:1px;background:var(--teal)}
.b-h1{font-family:var(--fd);font-size:clamp(5rem,11vw,10rem);font-weight:500;
  line-height:.9;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:40px;
  color:var(--ink)}
.b-h1 .g{background:var(--g-brand);background-size:300% 300%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;animation:gFlow 6s ease infinite}
.b-desc{font-size:17px;line-height:1.75;color:var(--ink-mid);max-width:520px;margin-bottom:48px}
.b-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:80px}

/* stats sidebar (digital-architect inspired) */
.b-stats-col{position:absolute;right:0;bottom:0;top:180px;width:320px;
  border-left:1px solid var(--border);display:flex;flex-direction:column}
.b-stat{flex:1;border-bottom:1px solid var(--border);padding:32px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:background .3s var(--ease);cursor:default}
.b-stat:last-child{border-bottom:none}
.b-stat:hover{background:var(--bg-white)}
.b-stat-icon{font-size:28px;color:var(--ink-muted);margin-bottom:auto}
.b-stat-val{font-family:var(--fd);font-size:3.5rem;font-weight:500;
  line-height:1;color:var(--ink);margin-bottom:4px}
.b-stat-lbl{font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-muted)}

.b-arrow{position:absolute;bottom:40px;left:50%;transform:translateX(-50%)}
.b-arrow a{display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  border:1.5px solid var(--border);border-radius:50%;color:var(--ink-mid);
  animation:float 3s ease-in-out infinite;transition:all .3s;background:transparent}
.b-arrow a:hover{border-color:var(--teal);color:var(--teal);background:rgba(32,133,168,.06)}

/* ---- MARQUEE (luxury style) ---- */
.mq{padding:20px 0;overflow:hidden;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);background:var(--bg-alt)}
.mq-track{display:flex;width:max-content;animation:marquee 24s linear infinite}
.mq-item{display:flex;align-items:center;gap:20px;padding:0 36px;white-space:nowrap;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-muted)}
.mq-dot{width:5px;height:5px;border-radius:50%;background:var(--teal);opacity:.6}

/* ---- INTRO ---- */
.intro-layout{display:grid;grid-template-columns:1fr 380px;gap:80px;align-items:start}
.intro-huge{font-family:var(--fd);font-size:clamp(3.5rem,7vw,6rem);font-weight:500;
  line-height:1;text-transform:uppercase;color:var(--ink)}
.intro-aside{position:sticky;top:100px;align-self:flex-start}

/* ---- TYPOGRAPHY ---- */
.type-row{display:grid;grid-template-columns:160px 1fr 180px;align-items:center;
  padding:24px 0;gap:24px;border-bottom:1px solid var(--border-s);
  transition:background .2s,padding-left .2s}
.type-row:last-child{border-bottom:none}
.type-row:hover{background:rgba(32,133,168,.03);padding-left:8px;border-radius:4px}
.t-meta{font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-muted)}
.t-spec{font-size:10px;font-family:monospace;color:var(--ink-muted);text-align:right;opacity:.7}
.tx-xl{font-family:var(--fd);font-size:90px;font-weight:500;line-height:.9;
  text-transform:uppercase;letter-spacing:-.02em;color:var(--ink)}
.tx-lg{font-family:var(--fd);font-size:60px;font-weight:500;line-height:1;
  text-transform:uppercase;color:var(--ink)}
.tx-md{font-family:var(--fd);font-size:42px;font-weight:500;line-height:1.05;
  text-transform:uppercase;color:var(--ink)}
.tx-sm{font-family:var(--fd);font-size:28px;font-weight:600;line-height:1.1;color:var(--ink)}
.tx-xs{font-family:var(--fd);font-size:20px;font-weight:700;line-height:1.2;color:var(--ink)}
.tx-bxl{font-size:22px;font-weight:300;line-height:1.65;color:var(--ink-mid)}
.tx-blg{font-size:18px;font-weight:300;line-height:1.75;color:var(--ink-mid)}
.tx-bmd{font-size:16px;font-weight:400;line-height:1.65;color:var(--ink)}
.tx-bbold{font-size:16px;font-weight:700;line-height:1.4;color:var(--ink)}
.tx-cap{font-size:13px;font-weight:400;line-height:1.6;color:var(--ink-mid)}
.tx-over{font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal)}
.tx-mono{font-family:monospace;font-size:13px;color:var(--teal)}
.g-txt{background:var(--g-brand);background-size:300% 300%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;animation:gFlow 6s ease infinite}

/* ---- SWATCHES ---- */
.pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sw{border-radius:8px;overflow:hidden;border:1px solid var(--border);
  transition:transform .3s var(--ease),box-shadow .3s}
.sw:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.sw-c{height:72px}
.sw-i{background:var(--bg-white);padding:12px 14px}
.sw-n{font-size:11px;font-weight:700;color:var(--ink);margin-bottom:2px}
.sw-h{font-size:10px;font-family:monospace;color:var(--ink-mid)}
.sw-r{font-size:9px;color:var(--ink-muted);margin-top:2px}
.grad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.gc{border-radius:8px;overflow:hidden;border:1px solid var(--border)}
.gc-c{height:72px}
.gc-i{background:var(--bg-white);padding:12px 14px}

/* ---- CARDS ---- */
.c-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* Card padrão — digital-architect hover-white */
.card{background:var(--bg);border:1px solid var(--border);padding:28px;
  transition:background .4s var(--ease),transform .3s var(--ease),box-shadow .3s;cursor:pointer}
.card:hover{background:var(--bg-white);transform:translateY(-2px);box-shadow:var(--sh2)}
/* Card outline */
.card-out{background:transparent;border:1.5px solid var(--border);padding:28px;
  border-radius:2px;transition:all .3s var(--ease)}
.card-out:hover{border-color:var(--teal);background:rgba(32,133,168,.04)}
/* Card dark (luxury) */
.card-dk{background:var(--bg-dark);border:none;padding:28px;color:#F4F4F0;
  transition:all .35s var(--ease)}
.card-dk:hover{background:#353A52;transform:translateY(-2px);box-shadow:var(--sh2)}
/* Card glass (luxury search bar style) */
.card-gl{background:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.8);
  padding:28px;backdrop-filter:blur(12px);
  transition:all .35s var(--ease);box-shadow:0 2px 16px rgba(45,49,66,.06)}
.card-gl:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
/* Card listing (luxury real estate) */
.card-listing{background:var(--bg-white);border:1px solid var(--border);
  cursor:pointer;overflow:hidden;transition:all .5s var(--ease)}
.card-listing:hover{box-shadow:var(--sh2)}
.listing-img{aspect-ratio:4/5;overflow:hidden;background:var(--bg-alt);position:relative}
.listing-img img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease)}
.card-listing:hover .listing-img img{transform:scale(1.06)}
.listing-tag{position:absolute;top:14px;right:14px;background:var(--bg-white);
  color:var(--ink);padding:5px 12px;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;box-shadow:var(--sh)}
.listing-body{padding:20px}
.c-icon-sq{width:44px;height:44px;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  transition:background .3s}
.card:hover .c-icon-sq{background:var(--bg-alt)}

/* ---- PROJECT ROW (digital-architect style) ---- */
.proj-row{border-bottom:1px solid var(--border);background:var(--bg);
  cursor:pointer;overflow:hidden;transition:background .5s var(--ease)}
.proj-row:hover{background:var(--bg-white)}
.proj-inner{display:grid;grid-template-columns:5fr 7fr;min-height:220px}
.proj-text{padding:40px 48px;border-right:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:center}
.proj-num{font-size:11px;font-family:monospace;color:var(--ink-muted);margin-bottom:8px}
.proj-title{font-family:var(--fd);font-size:2.8rem;font-weight:500;
  text-transform:uppercase;color:var(--ink);line-height:1;
  transition:transform .5s var(--ease),color .3s}
.proj-row:hover .proj-title{transform:translateX(8px);color:var(--teal)}
.proj-desc{font-size:14px;color:var(--ink-mid);margin-top:12px;max-width:360px}
.proj-img{position:relative;overflow:hidden;background:var(--bg-alt)}
.proj-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(20%);
  transition:filter .7s,transform .7s var(--ease)}
.proj-row:hover .proj-img img{filter:grayscale(0%);transform:scale(1.04)}

/* ---- BUTTONS ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fb);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:14px 32px;border-radius:4px;
  transition:all .3s var(--ease);cursor:pointer;border:none;
  line-height:1;white-space:nowrap;text-decoration:none;vertical-align:middle}
.btn-ink{background:var(--ink);color:var(--bg)!important}
.btn-ink:hover{background:#353A52;color:var(--bg)!important;
  transform:translateY(-1px);box-shadow:var(--sh2)}
.btn-outline{background:transparent;color:var(--ink)!important;
  border:1.5px solid currentColor}
.btn-outline:hover{background:var(--ink);color:var(--bg)!important;
  border-color:var(--ink)}
.btn-teal{background:var(--teal);color:#fff!important;border:none}
.btn-teal:hover{background:var(--teal-l);color:#fff!important;transform:translateY(-1px)}
.btn-mint{background:var(--g-brand);background-size:200% 200%;
  color:var(--ink)!important;border:none;
  font-weight:700;animation:gFlow 5s ease infinite}
.btn-mint:hover{transform:translateY(-1px);box-shadow:0 8px 32px rgba(181,216,192,.4)}
.btn-ghost{background:transparent;color:var(--ink-mid)!important;
  border:1.5px solid var(--border)}
.btn-ghost:hover{color:var(--ink)!important;border-color:rgba(45,49,66,.25)}
/* sizes */
.btn-pill{border-radius:9999px}
.btn-sm{padding:9px 20px;font-size:10px}
.btn-lg{padding:18px 40px;font-size:13px;letter-spacing:.1em}
.btn-xl{padding:22px 56px;font-size:15px}
.btn:disabled{opacity:.35;pointer-events:none}

/* ---- INPUTS ---- */
.f-group{display:flex;flex-direction:column;gap:7px}
.f-label{font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mid)}
.f-inp{background:var(--bg-white);border:1px solid var(--border);padding:14px 18px;
  font-family:var(--fb);font-size:15px;color:var(--ink);
  transition:all .3s var(--ease);outline:none;width:100%}
.f-inp::placeholder{color:var(--ink-muted);opacity:.7}
.f-inp:hover{border-color:rgba(45,49,66,.2)}
.f-inp:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(32,133,168,.12)}
.f-inp.err{border-color:#D0574A;box-shadow:0 0 0 3px rgba(208,87,74,.1)}
.f-inp.ok{border-color:var(--mint);box-shadow:0 0 0 3px rgba(181,216,192,.18)}
.f-ta{resize:vertical;min-height:100px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---- BADGES ---- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bm{background:rgba(181,216,192,.18);color:#1E7FA0;border:1px solid rgba(181,216,192,.4)}
.bt{background:rgba(32,133,168,.1);color:var(--teal-d);border:1px solid rgba(32,133,168,.22)}
.bn{background:rgba(45,49,66,.07);color:var(--ink-mid);border:1px solid var(--border)}
.bs{background:rgba(109,201,138,.1);color:#3A9B65;border:1px solid rgba(109,201,138,.24)}
.bw{background:rgba(200,150,40,.1);color:#9E7620;border:1px solid rgba(200,150,40,.22)}
.bd{background:rgba(208,87,74,.1);color:#C0473A;border:1px solid rgba(208,87,74,.22)}
.badge .dot{width:5px;height:5px;border-radius:50%;background:currentColor}

/* ---- SPACING ---- */
.sp-row{display:grid;grid-template-columns:80px 1fr 80px;align-items:center;gap:12px;padding:6px 0}
.sp-l{font-size:10px;font-family:monospace;color:var(--ink-muted);text-align:right}
.sp-b{height:16px;background:var(--g-brand-h);border-radius:2px;opacity:.55}
.sp-v{font-size:10px;font-family:monospace;color:var(--ink-muted)}

/* ---- LAYOUT DEMOS ---- */
.l-demo{border:1px dashed var(--border);padding:24px;margin-bottom:16px}
.l-lbl{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:16px}
.l-ph{background:rgba(45,49,66,.04);border:1px solid var(--border-s);
  display:flex;align-items:center;justify-content:center;min-height:72px;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);font-family:monospace}
.l-ph.tall{min-height:140px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ---- MOTION ---- */
.mot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px}
.mot-card{background:var(--bg-white);border:1px solid var(--border);padding:28px;
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.mot-box{width:58px;height:58px;background:var(--g-brand);
  display:flex;align-items:center;justify-content:center}
.m-fl{animation:float 3s ease-in-out infinite}
.m-sh{background:linear-gradient(90deg,var(--teal-d),var(--mint),var(--teal-d));
  background-size:200% 100%;animation:shimmer 2s linear infinite}
.m-sp{animation:spin 4s linear infinite}
.m-gf{background-size:300% 300% !important;animation:gFlow 3s ease infinite}
.m-pu{animation:pulse 1.8s ease-in-out infinite}
.m-li{transition:transform .5s var(--ease-sp),box-shadow .3s;cursor:pointer}
.m-li:hover{transform:translateY(-6px) scale(1.04);box-shadow:var(--sh2)}
.mot-n{font-size:13px;font-weight:700;color:var(--ink)}
.mot-c{font-size:10px;font-family:monospace;color:var(--teal);opacity:.7}

/* ---- LOGOS ---- */
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.logo-card{padding:44px;display:flex;align-items:center;justify-content:center;
  min-height:150px;border:1px solid var(--border);
  transition:transform .3s var(--ease),box-shadow .3s}
.logo-card:hover{transform:scale(1.02);box-shadow:var(--sh2)}
.logo-card img{max-height:72px;object-fit:contain}
.logo-lbl{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);text-align:center;margin-top:10px}
.logo-item{display:flex;flex-direction:column}
.lb-white{background:#fff}
.lb-dk{background:#2D3142}
.lb-cream{background:#ECEDE6}

/* ---- STATES ---- */
.st-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px 0;border-bottom:1px solid var(--border-s)}
.st-row:last-child{border-bottom:none}
.st-lbl{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-muted);min-width:90px;flex-shrink:0}

/* ---- RADIUS ---- */
.rad-row{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
.rad-item{display:flex;flex-direction:column;align-items:center;gap:8px}
.rad-box{width:52px;height:52px;background:var(--teal)}

/* ---- FOOTER — dark (luxury + digital-architect) ---- */
.ds-ft{background:var(--bg-dark);color:#F4F4F0;padding:96px 0 56px;
  position:relative;overflow:hidden}
.ds-ft-wordmark{position:absolute;bottom:-48px;left:0;right:0;text-align:center;
  font-family:var(--fd);font-size:clamp(6rem,16vw,18rem);font-weight:800;
  letter-spacing:-.03em;text-transform:uppercase;color:rgba(255,255,255,.03);
  pointer-events:none;user-select:none;white-space:nowrap}
.ds-ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:64px;margin-bottom:80px}
.ds-ft-brand{font-family:var(--fd);font-size:22px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#F4F4F0;margin-bottom:16px}
.ds-ft-desc{font-size:14px;color:rgba(244,244,240,.7);line-height:1.85;
  max-width:260px;margin-bottom:32px}
/* Social icons */
.ft-social{display:flex;gap:12px;margin-top:4px}
.ft-soc-a{width:40px;height:40px;border:1px solid rgba(255,255,255,.2);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:rgba(244,244,240,.65);transition:all .3s var(--ease)}
.ft-soc-a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff}
.ft-soc-a svg{width:16px;height:16px;fill:currentColor}
/* Nav columns */
.ft-title{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,244,240,.55);margin-bottom:24px;padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.1)}
.ft-h{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(244,244,240,.55);margin-bottom:24px}
.ft-links{display:flex;flex-direction:column;gap:12px}
.ft-links a{font-size:14px;font-weight:400;color:rgba(244,244,240,.75);
  transition:color .25s;letter-spacing:.01em;line-height:1.4}
.ft-links a:hover{color:#fff}
.ds-ft-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:28px;margin-top:0;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.ds-ft-copy{font-size:11px;color:rgba(244,244,240,.45);letter-spacing:.08em}

/* ---- UTILS ---- */
.mb4{margin-bottom:16px}.mb6{margin-bottom:24px}.mb8{margin-bottom:32px}
.mb12{margin-bottom:48px}
.g-texth{background:var(--g-brand-h);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text}

/* ---- RESPONSIVE ---- */
@media(max-width:1100px){
  .w{padding:0 2.5rem}
  .b-guides{padding:0 2.5rem}
  .intro-layout{grid-template-columns:1fr}
  .intro-aside{position:relative;top:auto}
  .b-stats-col{display:none}
  .ds-ft-grid{grid-template-columns:1fr 1fr}
  .c-row{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .w{padding:0 1.5rem}
  .b-guides{padding:0 1.5rem}
  .section{padding:80px 0}
  .b-h1{font-size:4rem}
  .c-row,.g2,.g3{grid-template-columns:1fr}
  .proj-inner{grid-template-columns:1fr}
  .proj-img{min-height:200px}
  .type-row{grid-template-columns:120px 1fr}
  .t-spec{display:none}
  .h-nav-l,.h-nav-r,.h-cta{display:none}
  .h-burger{display:flex;margin-left:auto}
  .ds-ft-grid{grid-template-columns:1fr}
  .ds-ft-wordmark{display:none}
}

/* ---- WHATSAPP FLOATING BUTTON ---- */
.whatsapp-btn-premium {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  background: #25D366;
  border: none;
  padding: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.15);
  transition: all 0.3s var(--ease);
  cursor: pointer;
}
.whatsapp-btn-premium:hover {
  background: #1ebe5d;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 32px rgba(37,211,102,0.5), 0 4px 12px rgba(0,0,0,0.2);
}
.whatsapp-btn-premium svg {
  fill: #fff;
  width: 28px;
  height: 28px;
}

/* ---- FAQ ACCORDION ---- */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
}
.faq-item:first-child {
  border-top: 1px solid var(--border);
}
.faq-q {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  font-family: var(--fb);
}
.faq-q::after {
  content: '+';
  font-size: 20px;
  font-weight: 300;
  color: var(--teal);
  transition: transform 0.3s;
}
.faq-item.active .faq-q::after {
  content: '−';
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease), margin-top 0.3s;
  color: var(--ink-mid);
  font-size: 14px;
  line-height: 1.6;
}
.faq-item.active .faq-a {
  max-height: 250px;
  margin-top: 12px;
}

/* ---- TIMELINE ---- */
.timeline {
  position: relative;
  margin-top: 48px;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 2px;
  background: var(--border);
}
.timeline-item {
  position: relative;
  padding-left: 56px;
  margin-bottom: 40px;
}
.timeline-item:last-child {
  margin-bottom: 0;
}
.timeline-marker {
  position: absolute;
  left: 10px;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-white);
  border: 2px solid var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--teal);
}
.timeline-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

@media(min-width: 769px) {
  .timeline {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    padding-bottom: 40px;
  }
  .timeline::before {
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    width: auto;
    bottom: auto;
  }
  .timeline-item {
    padding-left: 0;
    padding-top: 48px;
    margin-bottom: 0;
  }
  .timeline-marker {
    left: 0;
    top: 10px;
  }
}