/* ============================================================
   NUNES & SOUZA ADVOCACIA — SITE INSTITUCIONAL
   Design: editorial premium · preto/branco · acento prata
============================================================ */

:root{
  --ink: #0A0A0A;
  --ink-2: #141414;
  --ink-3: #1C1C1C;
  --ink-4: #262626;
  --line: #2A2A2A;
  --line-soft: #E5E3DE;
  --paper: #FAFAF7;
  --paper-2: #F2F0EB;
  --paper-3: #E9E6DF;
  --bone: #D8D4CC;
  --mute: #8A8780;
  --mute-2: #6B6864;
  --text-dark: #1A1A1A;
  --text-light: #FAFAF7;

  /* Antigo dourado -> agora prata/champagne neutro */
  --silver: #A8A29E;
  --silver-2: #C7C2BC;
  --silver-deep: #5E5A56;
  --silver-soft: rgba(168, 162, 158, .20);
  --silver-line: rgba(168, 162, 158, .35);

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-2: cubic-bezier(.65,.05,.36,1);

  --nav-h: 78px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text-dark);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1;
}
/* Padronização global de números — todos os algarismos em proporção uniforme */
input, textarea, select, button,
.num, .vc-num, .svc-num, .sd-num, .di-num, .ms-num, .crumbs,
.cat, .article-meta, .ci-value, .stat-num, .stat-label,
.hero-meta-item, h1, h2, h3, h4, h5, h6,
.eyebrow, .lead, p, time, address, .form-field, .form-row,
.dash-stat, .dash-num, .dash-trend{
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1;
}
::selection{background: var(--silver); color: var(--ink);}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input,textarea,select{font-family:inherit; color:inherit;}

/* ====== TYPOGRAPHY UTILITIES ====== */
.eyebrow{
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--silver);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before{
  content:"";
  width: 32px; height: 1px;
  background: var(--silver);
  display: inline-block;
}
.dark-section .eyebrow{color: var(--silver-2);}
.dark-section .eyebrow::before{background: var(--silver-2);}
.eyebrow.center{justify-content:center;}
.eyebrow.no-line::before{display:none;}

h1,h2,h3,h4,h5{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.05;
  color: inherit;
}
.display-xl{font-size: clamp(48px, 8vw, 124px); line-height: .98; letter-spacing: -.03em;}
.display-lg{font-size: clamp(40px, 6vw, 88px); line-height: 1.02; letter-spacing: -.025em;}
.display-md{font-size: clamp(32px, 4.5vw, 64px); line-height: 1.05;}
.display-sm{font-size: clamp(26px, 3.5vw, 44px); line-height: 1.1;}
.italic{font-style: italic;}
.silver-dot{color: var(--silver);}

p.lead{font-size: clamp(17px, 1.3vw, 20px); font-weight: 300; color: var(--mute-2); max-width: 60ch; line-height: 1.65;}
.dark p.lead, .dark-section p.lead{color: rgba(250,250,247,.66);}

/* ====== JUSTIFY UTILITY ====== */
/* Aplicado a parágrafos institucionais — exclui títulos, eyebrow, botões, menus */
.justify, .justify p{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.story-body p,
.values .value-card p,
.service-detail .sd-desc,
.diff .lead,
.method .method-quote,
.about-intro p,
.about-history p,
.blog-intro p,
.contact-info > p,
.form-block .form-sub{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Garantia: nunca justificar títulos, eyebrow, botões, menus, navegação */
h1, h2, h3, h4, h5, h6,
.eyebrow, .btn, .nav-cta, .nav-links a, .mobile-menu a,
.crumbs, .blog-filter, .sd-go, .svc-arrow, .article-readmore,
.sd-title, .vc-num, .svc-num, .di-num, .di-label, .ms-num{
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}
/* Centro permanece centro (impact, final-cta) */
.impact h2, .final-cta h2, .impact .author{text-align: center;}

/* ====== LAYOUT ====== */
.container{max-width: 1360px; margin: 0 auto; padding: 0 40px;}
.container-narrow{max-width: 1080px; margin: 0 auto; padding: 0 40px;}
@media (max-width: 768px){
  .container, .container-narrow{padding: 0 22px;}
}

section{position: relative;}
.section{padding: 140px 0;}
.section-sm{padding: 100px 0;}
@media (max-width: 768px){
  .section{padding: 90px 0;}
  .section-sm{padding: 70px 0;}
}

.dark, .dark-section{background: var(--ink); color: var(--text-light);}
.dark h1,.dark h2,.dark h3,.dark h4,
.dark-section h1,.dark-section h2,.dark-section h3,.dark-section h4{color: var(--text-light);}

.divider{
  width: 100%; height: 1px;
  background: var(--line-soft);
}
.dark .divider{background: var(--line);}

/* ====== NAVBAR ====== */
.nav{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled{
  background: rgba(10,10,10,.82);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: rgba(255,255,255,.06);
}
.nav-inner{
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px;
}
.brand{
  display: inline-flex; align-items: center;
  color: var(--text-light);
  line-height: 0;
}
.brand img{
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}
@media (max-width: 480px){.brand img{height: 30px;}}

.nav-links{
  display: flex; align-items: center; gap: 36px;
  list-style: none;
}
.nav-links a{
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  position: relative;
  padding: 6px 0;
  transition: color .3s var(--ease);
}
.nav-links a::after{
  content:"";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--silver-2);
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.nav-links a:hover{color: var(--silver-2);}
.nav-links a:hover::after,
.nav-links a.active::after{
  transform: scaleX(1); transform-origin: left;
}
.nav-links a.active{color: var(--silver-2);}

.nav-cta{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--paper);
  transition: all .4s var(--ease);
}
.nav-cta:hover{
  background: transparent;
  color: var(--paper);
}

.burger{
  display: none;
  width: 32px; height: 32px;
  position: relative;
  cursor: pointer;
  color: var(--text-light);
}
.burger span{
  position: absolute; left: 4px; right: 4px; height: 1px;
  background: currentColor;
  transition: all .4s var(--ease);
}
.burger span:nth-child(1){top: 11px;}
.burger span:nth-child(2){top: 21px;}
.burger.open span:nth-child(1){top: 16px; transform: rotate(45deg);}
.burger.open span:nth-child(2){top: 16px; transform: rotate(-45deg);}

.mobile-menu{
  position: fixed; inset: 0;
  background: var(--ink);
  z-index: 95;
  padding: calc(var(--nav-h) + 30px) 26px 40px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease);
}
.mobile-menu.open{opacity: 1; pointer-events: auto;}
.mobile-menu ul{list-style:none; display:flex; flex-direction:column; gap: 4px;}
.mobile-menu a{
  display: block;
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--text-light);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  letter-spacing: -.01em;
  transition: color .3s var(--ease), padding .3s var(--ease);
}
.mobile-menu a:hover, .mobile-menu a.active{color: var(--silver-2); padding-left: 10px;}
.mobile-footer{
  color: rgba(255,255,255,.5);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}
.mobile-footer .silver{color: var(--silver-2);}

@media (max-width: 1100px){
  .nav-links, .nav-cta{display: none;}
  .burger{display: inline-block;}
  .nav-inner{padding: 0 22px;}
}

/* ====== BUTTONS ====== */
.btn{
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 32px;
  font-size: 11px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: all .5s var(--ease);
  cursor: pointer;
  position: relative;
}
.btn-arrow{
  width: 16px; height: 1px; background: currentColor;
  position: relative;
  transition: width .4s var(--ease);
}
.btn-arrow::after{
  content:"";
  position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .btn-arrow{width: 28px;}
.btn-primary{
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn-primary:hover{
  background: transparent;
  color: var(--paper);
}
.dark .btn-primary:hover, .dark-section .btn-primary:hover{color: var(--paper);}
.btn-ghost{
  background: transparent;
  color: var(--text-light);
  border-color: rgba(255,255,255,.25);
}
.btn-ghost:hover{
  border-color: var(--silver-2);
  color: var(--silver-2);
}
.btn-ghost-dark{
  background: transparent;
  color: var(--ink);
  border-color: rgba(0,0,0,.18);
}
.btn-ghost-dark:hover{
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-2);
}
.btn-dark{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-dark:hover{
  background: transparent;
  color: var(--ink);
}

/* ====== PAGE TRANSITIONS ====== */
.page{display:none; animation: pageFade .8s var(--ease);}
.page.active{display:block;}
@keyframes pageFade{
  from{opacity:0; transform: translateY(8px);}
  to{opacity:1; transform: translateY(0);}
}

/* ====== HERO ====== */
.hero{
  min-height: 100vh;
  background: var(--ink);
  color: var(--text-light);
  display: flex; align-items: center;
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + 80px) 0 100px;
}
.hero-bg{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 80% 30%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(255,255,255,.025), transparent 70%),
    linear-gradient(180deg, #0A0A0A 0%, #0E0E0E 100%);
}
.hero-grain{
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: .85;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 70%);
}
.hero-content{
  position: relative; z-index: 2;
  width: 100%;
}
.hero-layout{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 1100px){
  .hero-layout{grid-template-columns: 1fr; gap: 60px;}
  .hero-photo-col{order: -1;}
}
.hero-top{
  display: flex; flex-direction: column; gap: 40px;
}
.hero h1{
  font-size: clamp(46px, 7vw, 116px);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -.035em;
  max-width: 14ch;
  padding-bottom: .12em;
}
.hero h1 .line{display:block; overflow:hidden; padding: .04em 0 .14em;}
.hero h1 .line span{
  display: inline-block;
  transform: translateY(110%);
  animation: rise 1.2s var(--ease) forwards;
}
.hero h1 .line:nth-child(1) span{animation-delay: .15s;}
.hero h1 .line:nth-child(2) span{animation-delay: .3s;}
.hero h1 .line:nth-child(3) span{animation-delay: .45s;}
@keyframes rise{to{transform: translateY(0);}}

.hero-sub{
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 300;
  color: rgba(250,250,247,.66);
  max-width: 50ch;
  line-height: 1.65;
  opacity: 0; transform: translateY(20px);
  animation: fadeUp 1s var(--ease) .8s forwards;
}
.hero-actions{
  display: flex; flex-wrap: wrap; gap: 16px;
  opacity: 0; transform: translateY(20px);
  animation: fadeUp 1s var(--ease) 1s forwards;
}
@keyframes fadeUp{to{opacity:1; transform: translateY(0);}}

/* Hero photo column */
.hero-photo{
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  opacity: 0;
  animation: photoIn 1.6s var(--ease) .6s forwards;
}
@keyframes photoIn{
  from{opacity: 0; transform: scale(1.05) translateY(20px);}
  to{opacity: 1; transform: scale(1) translateY(0);}
}
.hero-photo img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.15) contrast(1.02);
}
.hero-photo::before{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(10,10,10,.45) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-photo::after{
  content:"";
  position: absolute; inset: 16px;
  border: 1px solid rgba(255,255,255,.15);
  z-index: 2;
  pointer-events: none;
}
.hero-photo-caption{
  position: absolute;
  bottom: 32px; left: 32px; right: 32px;
  z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px;
}
.hero-photo-caption .pc-text{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: rgba(255,255,255,.85);
  line-height: 1.3;
  max-width: 22ch;
}
.hero-photo-caption .pc-tag{
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--silver-2);
  white-space: nowrap;
}

.hero-meta{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 50px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 36px;
  margin-top: 90px;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 1.2s forwards;
}
.hero-meta-item .num{
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 50px);
  font-weight: 300;
  letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 4px;
}
.hero-meta-item .num sup{color: var(--silver-2); font-size: .5em; vertical-align: super;}
.hero-meta-item .lbl{
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-top: 6px;
}
@media (max-width: 700px){
  .hero-meta{flex-wrap: wrap; gap: 30px;}
  .hero-meta-item{flex: 1 1 40%;}
}

/* ====== MARQUEE removido ====== */

/* ====== SECTION HEADER ====== */
.sec-head{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 90px;
}
.sec-head h2{margin-top: 24px;}
@media (max-width: 900px){
  .sec-head{grid-template-columns: 1fr; gap: 30px; margin-bottom: 60px;}
}

/* ====== ABOUT (HOME PREVIEW) ====== */
.about{background: var(--paper);}
.about-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
@media (max-width: 1000px){
  .about-grid{grid-template-columns: 1fr; gap: 60px;}
}
.about-visual{
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.about-visual img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.1);
  transition: transform 1.4s var(--ease);
}
.about-visual:hover img{transform: scale(1.04);}
.about-visual::before{
  content:"";
  position: absolute; inset: 22px;
  border: 1px solid rgba(255,255,255,.2);
  z-index: 2;
  pointer-events: none;
}
.about-visual::after{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(10,10,10,.5) 100%);
  z-index: 1;
  pointer-events: none;
}
.about-visual .badge{
  position: absolute;
  bottom: 50px; left: 50px;
  color: var(--text-light);
  z-index: 3;
}
.about-visual .badge-line{
  width: 36px; height: 1px;
  background: var(--silver-2);
  margin-bottom: 16px;
}
.about-visual .badge-title{
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  color: white;
}
.about-visual .badge-title .ital{font-style: italic; color: var(--silver-2);}
.about-visual .badge-sub{
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-top: 10px;
}
@media (max-width: 600px){
  .about-visual .badge{bottom: 28px; left: 28px;}
  .about-visual .badge-title{font-size: 22px;}
}
.about-text h2{margin: 24px 0 32px;}
.about-text p{font-size: 17px; line-height: 1.75; color: var(--mute-2); margin-bottom: 22px;}
.about-text .sig{
  font-family: var(--font-display); font-style: italic;
  font-size: 19px; color: var(--ink);
  margin-top: 30px;
  display: flex; align-items: center; gap: 16px;
}
.about-text .sig::before{
  content:""; width: 28px; height: 1px; background: var(--silver);
}

/* ====== VALUES (MISSION / CULTURE) ====== */
.values{background: var(--paper-2);}
.values-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line-soft);
  background: var(--paper);
}
.value-card{
  padding: 70px 56px;
  border-right: 1px solid var(--line-soft);
  position: relative;
}
.value-card:last-child{border-right: none;}
.value-card .vc-num{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--silver-deep);
  margin-bottom: 30px;
}
.value-card h3{font-size: 42px; margin-bottom: 22px;}
.value-card .ital{color: var(--silver-deep); font-style: italic;}
.value-card p{font-size: 16px; color: var(--mute-2); line-height: 1.7;}
@media (max-width: 800px){
  .values-grid{grid-template-columns: 1fr;}
  .value-card{padding: 50px 30px; border-right: none; border-bottom: 1px solid var(--line-soft);}
  .value-card:last-child{border-bottom: none;}
}

/* ====== SERVICES ====== */
.services{background: var(--paper);}
.services-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
}
.service-card{
  display: block;
  padding: 60px 44px 70px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  transition: background .5s var(--ease);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.service-card:hover{background: var(--ink); color: var(--text-light);}
.service-card:hover .svc-num{color: var(--silver-2);}
.service-card:hover h3{color: var(--text-light);}
.service-card:hover p{color: rgba(255,255,255,.65);}
.service-card:hover .svc-arrow{color: var(--silver-2); transform: translateX(8px);}
.svc-num{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--mute);
  letter-spacing: .05em;
  transition: color .4s var(--ease);
}
.service-card h3{
  font-size: 28px;
  margin: 30px 0 18px;
  line-height: 1.15;
  transition: color .4s var(--ease);
  max-width: 14ch;
}
.service-card p{
  font-size: 14px;
  color: var(--mute-2);
  line-height: 1.65;
  margin-bottom: 40px;
  transition: color .4s var(--ease);
}
.svc-arrow{
  font-family: var(--font-display); font-style: italic;
  font-size: 13px;
  color: var(--mute);
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: all .4s var(--ease);
  display: inline-flex; align-items: center; gap: 10px;
}
.svc-arrow::after{content:"→";}
.service-card.featured{
  background: var(--ink-2);
  color: var(--text-light);
}
.service-card.featured h3{color: var(--text-light);}
.service-card.featured p{color: rgba(255,255,255,.6);}
.service-card.featured .svc-num{color: var(--silver-2);}
.service-card.featured .svc-arrow{color: var(--silver-2);}
.service-card.featured:hover{background: var(--silver); color: var(--ink);}
.service-card.featured:hover h3,
.service-card.featured:hover .svc-num,
.service-card.featured:hover p,
.service-card.featured:hover .svc-arrow{color: var(--ink);}

@media (max-width: 1000px){
  .services-grid{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 640px){
  .services-grid{grid-template-columns: 1fr;}
  .service-card{padding: 44px 28px 50px;}
}

/* ====== DIFFERENTIALS ====== */
.diff{background: var(--ink); color: var(--text-light);}
.diff-grid{
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 100px;
  align-items: start;
}
@media (max-width: 1000px){
  .diff-grid{grid-template-columns: 1fr; gap: 50px;}
}
.diff-list{display: flex; flex-direction: column;}
.diff-item{
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 30px;
  padding: 36px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  cursor: default;
  transition: padding .5s var(--ease);
}
.diff-item:last-child{border-bottom: 1px solid rgba(255,255,255,.08);}
.diff-item:hover{padding-left: 14px;}
.diff-item:hover .di-num{color: var(--silver-2);}
.diff-item:hover .di-label{color: var(--silver-2);}
.di-num{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: rgba(255,255,255,.4);
  letter-spacing: .1em;
  transition: color .4s var(--ease);
}
.di-label{
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: 400;
  letter-spacing: -.01em;
  transition: color .4s var(--ease);
}
.di-mark{
  width: 24px; height: 1px;
  background: rgba(255,255,255,.2);
  transition: all .4s var(--ease);
}
.diff-item:hover .di-mark{background: var(--silver-2); width: 38px;}

/* ====== METHODOLOGY / HOW WE WORK ====== */
.method{background: var(--paper);}
.method-quote{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2vw, 28px);
  color: var(--mute-2);
  max-width: 60ch;
  line-height: 1.4;
  margin-top: 28px;
}
.method-steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 90px;
  position: relative;
}
.method-step{
  padding: 50px 36px 50px 0;
  border-left: 1px solid var(--line-soft);
  padding-left: 36px;
  position: relative;
}
.method-step:first-child{border-left: 1px solid var(--silver);}
.method-step .ms-num{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--silver-deep);
  letter-spacing: .1em;
}
.method-step h4{
  font-size: 28px;
  margin: 22px 0 18px;
  font-weight: 400;
}
.method-step p{
  font-size: 14px;
  color: var(--mute-2);
  line-height: 1.65;
}
@media (max-width: 1000px){
  .method-steps{grid-template-columns: 1fr 1fr; gap: 0;}
  .method-step{padding: 36px 24px 36px 24px;}
}
@media (max-width: 600px){
  .method-steps{grid-template-columns: 1fr;}
  .method-step{border-left-color: var(--line-soft); padding: 30px 0 30px 24px;}
  .method-step:first-child{border-left-color: var(--silver);}
}

/* ====== IMPACT QUOTE ====== */
.impact{
  background: var(--ink);
  color: var(--text-light);
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}
.impact.impact-compact{padding: 90px 0;}
.impact.impact-compact .quote-mark{font-size: 64px; margin-bottom: 28px;}
.impact.impact-compact h2{font-size: clamp(28px, 3.6vw, 52px); max-width: 22ch;}
.impact.impact-compact .author{margin-top: 32px;}
.impact::before{
  content:"";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(255,255,255,.04), transparent 60%);
}
.impact-inner{position: relative; text-align: center;}
.impact .quote-mark{
  font-family: var(--font-display); font-style: italic;
  font-size: 100px; color: var(--silver-2);
  line-height: 0;
  display: block;
  margin-bottom: 50px;
}
.impact h2{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 5.5vw, 84px);
  line-height: 1.05;
  letter-spacing: -.025em;
  max-width: 18ch;
  margin: 0 auto;
}
.impact h2 em{color: var(--silver-2); font-style: italic;}
.impact .author{
  margin-top: 50px;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
@media (max-width: 768px){
  .impact{padding: 90px 0;}
  .impact.impact-compact{padding: 70px 0;}
}

/* ====== TEAM ====== */
.team{background: var(--paper);}
.team-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
@media (max-width: 1200px){.team-grid{grid-template-columns: repeat(3, 1fr); gap: 28px;}}
@media (max-width: 800px){.team-grid{grid-template-columns: 1fr 1fr; gap: 24px;}}
@media (max-width: 540px){.team-grid{grid-template-columns: 1fr;}}

.team-card{
  text-align: left;
  cursor: pointer;
}
.team-portrait{
  aspect-ratio: 3/4;
  background: linear-gradient(180deg, var(--ink-3) 0%, var(--ink) 100%);
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  transition: transform .8s var(--ease);
}
.team-portrait img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
  filter: grayscale(.12) contrast(1.02);
  transition: transform 1s var(--ease), filter .6s var(--ease);
}
.team-card:hover .team-portrait img{
  transform: scale(1.05);
  filter: grayscale(0) contrast(1.02);
}
.team-portrait::before{
  content:"";
  position: absolute; inset: 14px;
  border: 1px solid rgba(255,255,255,.15);
  transition: border-color .5s var(--ease);
  z-index: 2;
  pointer-events: none;
}
.team-card:hover .team-portrait::before{border-color: rgba(255,255,255,.4);}
.team-portrait .tag{
  position: absolute;
  top: 28px; left: 28px;
  z-index: 3;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  display: flex; align-items: center;
}
.team-portrait .tag::before{
  content:"";
  width: 14px; height: 1px;
  background: var(--silver-2);
  margin-right: 8px;
  display: inline-block;
}

/* Placeholder team card (no photo yet) */
.team-portrait.placeholder{
  background: linear-gradient(135deg, var(--ink-3) 0%, var(--ink-2) 100%);
}
.team-portrait.placeholder .ph-mono{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic;
  font-weight: 300;
  font-size: 92px;
  color: var(--silver);
  opacity: .5;
  letter-spacing: -.02em;
  transition: opacity .5s var(--ease);
}
.team-card:hover .team-portrait.placeholder .ph-mono{opacity: .9;}
.team-portrait.placeholder .ph-add{
  position: absolute;
  bottom: 28px; left: 28px; right: 28px;
  z-index: 3;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.team-portrait.placeholder .ph-add em{color: var(--silver-2); font-style: italic; text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-size: 13px;}

.team-card .name{
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -.005em;
  margin-bottom: 6px;
}
.team-card .role{
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--silver-deep);
  margin-bottom: 14px;
}
.team-card .bio{
  font-size: 13.5px;
  color: var(--mute-2);
  line-height: 1.6;
}

/* ====== FINAL CTA ====== */
.final-cta{
  background: var(--ink);
  color: var(--text-light);
  padding: 180px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before{
  content:"";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.04), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.03), transparent 40%);
}
.final-cta-inner{position: relative;}
.final-cta h2{
  font-size: clamp(38px, 6vw, 92px);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -.025em;
  max-width: 18ch;
  margin: 30px auto 50px;
}
.final-cta h2 em{font-style: italic; color: var(--silver-2);}
.final-cta .actions{
  display: flex; justify-content: center; flex-wrap: wrap; gap: 16px;
  margin-top: 20px;
}

/* ====== FOOTER ====== */
.footer{
  background: var(--ink);
  color: var(--text-light);
  padding: 100px 0 40px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
}
@media (max-width: 900px){.footer-grid{grid-template-columns: 1fr 1fr; gap: 50px;}}
@media (max-width: 540px){.footer-grid{grid-template-columns: 1fr;}}

.footer-brand img{
  height: 50px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 22px;
}
.footer-brand p{
  font-size: 14px;
  color: rgba(255,255,255,.55);
  line-height: 1.7;
  max-width: 34ch;
}
.footer-col h5{
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--silver-2);
  margin-bottom: 26px;
}
.footer-col ul{list-style: none;}
.footer-col li{margin-bottom: 12px;}
.footer-col a, .footer-col span{
  font-size: 14px;
  color: rgba(255,255,255,.65);
  transition: color .3s var(--ease);
}
.footer-col a:hover{color: var(--silver-2);}

.footer-bottom{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-wrap: wrap; gap: 20px;
}
.footer-bottom small{
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.footer-social{display:flex; gap: 16px;}
.footer-social a{
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all .4s var(--ease);
  color: rgba(255,255,255,.7);
}
.footer-social a:hover{
  border-color: var(--silver-2);
  color: var(--silver-2);
  transform: translateY(-2px);
}
.footer-social svg{width: 15px; height: 15px;}

/* ====== PAGE BANNER (inner pages) ====== */
.page-banner{
  background: var(--ink);
  color: var(--text-light);
  padding: calc(var(--nav-h) + 100px) 0 100px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.page-banner::before{
  content:"";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 50% at 80% 50%, rgba(255,255,255,.03), transparent 60%);
}
.page-banner-inner{position: relative;}
.page-banner h1{
  font-size: clamp(48px, 7vw, 110px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
  margin: 22px 0 24px;
}
.page-banner h1 em{font-style: italic; color: var(--silver-2);}
.page-banner .pb-sub{
  font-size: 18px;
  color: rgba(255,255,255,.6);
  max-width: 56ch;
  line-height: 1.6;
}
.crumbs{
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 50px;
}
.crumbs .sep{color: var(--silver-2);}

/* ============================================================
   PAGE: ABOUT (full)
============================================================ */
.story{background: var(--paper); padding: 140px 0;}
.story-grid{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
}
@media (max-width: 900px){.story-grid{grid-template-columns: 1fr; gap: 30px;}}
.story-grid h6{
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--silver-deep); font-weight: 500;
  position: sticky; top: 120px;
}
.story-body p{
  font-size: 18px;
  color: var(--text-dark);
  line-height: 1.75;
  margin-bottom: 24px;
}
.story-body p:first-child{
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 36px;
  letter-spacing: -.005em;
}
.story-body p:first-child::first-letter{
  font-size: 1.5em;
  color: var(--silver-deep);
}

.story-image{
  margin: 90px 0;
  position: relative;
  aspect-ratio: 21/9;
  overflow: hidden;
  background: var(--ink);
}
.story-image img{
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.15);
}
.story-image::after{
  content:"";
  position: absolute; inset: 20px;
  border: 1px solid rgba(255,255,255,.15);
}
.story-image-caption{
  position: absolute;
  bottom: 40px; left: 40px;
  color: white;
  z-index: 2;
  max-width: 30ch;
}
.story-image-caption .ic-tag{
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--silver-2);
  margin-bottom: 10px;
}
.story-image-caption .ic-text{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
}
@media (max-width: 600px){
  .story-image-caption{bottom: 24px; left: 24px;}
  .story-image-caption .ic-text{font-size: 16px;}
}

/* ============================================================
   PAGE: SERVICES (full)
============================================================ */
.service-detail{
  display: grid;
  grid-template-columns: 80px 1fr 1.4fr 200px;
  gap: 40px;
  padding: 50px 0;
  border-top: 1px solid var(--line-soft);
  align-items: start;
  cursor: pointer;
  transition: padding .5s var(--ease);
  color: inherit;
  text-decoration: none;
}
.service-detail:last-child{border-bottom: 1px solid var(--line-soft);}
.service-detail:hover{padding-left: 20px;}
.service-detail:hover .sd-title{color: var(--silver-deep);}
.service-detail:hover .sd-go{color: var(--silver-deep); transform: translateX(8px);}
.sd-num{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--silver-deep);
}
.sd-title{
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.005em;
  transition: color .4s var(--ease);
}
.sd-title em{font-style: italic; color: var(--silver-deep);}
.sd-desc{
  font-size: 15px;
  color: var(--mute-2);
  line-height: 1.7;
}
.sd-go{
  font-family: var(--font-display); font-style: italic;
  font-size: 14px;
  color: var(--mute);
  text-align: right;
  transition: all .4s var(--ease);
  white-space: nowrap;
}
.sd-go::after{content:" →";}
@media (max-width: 900px){
  .service-detail{
    grid-template-columns: 50px 1fr;
    gap: 20px;
  }
  .sd-desc, .sd-go{grid-column: 2;}
  .sd-go{text-align: left; margin-top: 14px;}
}

/* ============================================================
   PAGE: BLOG
============================================================ */
.blog-filters{
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 60px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-soft);
}
.blog-filter{
  padding: 10px 22px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mute-2);
  border: 1px solid var(--line-soft);
  transition: all .3s var(--ease);
  cursor: pointer;
  background: transparent;
}
.blog-filter:hover{border-color: var(--ink); color: var(--ink);}
.blog-filter.active{
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.blog-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 30px;
}
@media (max-width: 1000px){.blog-grid{grid-template-columns: 1fr 1fr;}}
@media (max-width: 640px){.blog-grid{grid-template-columns: 1fr;}}
.article-card{cursor: pointer;}
.article-thumb{
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
  background: var(--ink);
}
.article-thumb-inner{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1s var(--ease);
}
.article-card:hover .article-thumb-inner{transform: scale(1.05);}
.article-thumb-inner.t1{
  background-image: linear-gradient(135deg, rgba(168,162,158,.2), transparent), linear-gradient(180deg, #0E0D0A 0%, #1A1714 100%);
}
.article-thumb-inner.t2{
  background-image: linear-gradient(135deg, rgba(168,162,158,.15), transparent), linear-gradient(180deg, #181612 0%, #0C0B09 100%);
}
.article-thumb-inner.t3{
  background-image: linear-gradient(45deg, rgba(168,162,158,.18), transparent), linear-gradient(180deg, #14110D 0%, #1F1A14 100%);
}
.article-thumb-inner.t4{
  background-image: linear-gradient(225deg, rgba(168,162,158,.12), transparent), linear-gradient(180deg, #1A1814 0%, #0A0908 100%);
}
.article-thumb-inner.t5{
  background-image: linear-gradient(180deg, rgba(168,162,158,.18), transparent), linear-gradient(180deg, #100E0B 0%, #1B1814 100%);
}
.article-thumb-inner.t6{
  background-image: linear-gradient(90deg, rgba(168,162,158,.15), transparent), linear-gradient(180deg, #1C1813 0%, #0E0C09 100%);
}
.article-thumb-inner::after{
  content:"";
  position: absolute; inset: 20px;
  border: 1px solid rgba(168,162,158,.25);
}
.article-thumb-inner .mono{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic;
  font-size: 90px;
  color: var(--silver-2);
  opacity: .35;
  letter-spacing: -.02em;
}
.article-meta{
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mute);
}
.article-meta .cat{color: var(--silver-deep); font-weight: 500;}
.article-meta .dot{width: 3px; height: 3px; background: var(--bone); border-radius: 50%;}
.article-card h3{
  font-size: 24px;
  margin-bottom: 14px;
  line-height: 1.2;
  font-weight: 400;
  transition: color .3s var(--ease);
}
.article-card:hover h3{color: var(--silver-deep);}
.article-card p{
  font-size: 14.5px;
  color: var(--mute-2);
  line-height: 1.6;
  margin-bottom: 18px;
}
.article-readmore{
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
}
.article-readmore::after{
  content:"→";
  transition: transform .3s var(--ease);
}
.article-card:hover .article-readmore::after{transform: translateX(6px);}

/* ============================================================
   PAGE: CONTACT
============================================================ */
.contact-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 100px;
  align-items: start;
}
@media (max-width: 1000px){.contact-grid{grid-template-columns: 1fr; gap: 60px;}}
.contact-info h6{
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--silver-deep); font-weight: 500;
  margin-bottom: 14px;
}
.contact-block{
  padding: 30px 0;
  border-bottom: 1px solid var(--line-soft);
}
.contact-block:first-of-type{border-top: 1px solid var(--line-soft);}
.contact-block .ci-label{
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 12px;
}
.contact-block .ci-value{
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
}
.contact-block a.ci-value{transition: color .3s var(--ease);}
.contact-block a.ci-value:hover{color: var(--silver-deep);}

.wa-cta{
  margin-top: 50px;
  display: inline-flex; align-items: center; gap: 16px;
  padding: 22px 30px;
  background: var(--ink);
  color: var(--paper);
  transition: all .5s var(--ease);
}
.wa-cta:hover{background: var(--silver); color: var(--ink);}
.wa-cta svg{width: 22px; height: 22px;}
.wa-cta-text{
  display: flex; flex-direction: column;
}
.wa-cta-text small{
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  opacity: .6;
}
.wa-cta-text strong{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .01em;
}

/* ====== SOCIAL CARDS GRID (WhatsApp + Instagram) ====== */
.social-cta-grid{
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px){.social-cta-grid{grid-template-columns: 1fr;}}
.social-card{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  background: var(--ink);
  color: var(--paper);
  transition: all .5s var(--ease);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ink);
}
.social-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 60%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.social-card:hover::before{opacity: 1;}
.social-card:hover{transform: translateY(-3px);}
.social-card.sc-wa:hover{background: #1f2a26; border-color: #1f2a26;}
.social-card.sc-ig:hover{
  background: linear-gradient(135deg, #2a1338, #5a1e3a 45%, #c2643a);
  border-color: transparent;
}
.social-card svg{width: 22px; height: 22px; flex-shrink: 0;}
.social-card .sc-text{display: flex; flex-direction: column; min-width: 0;}
.social-card .sc-text small{
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .6;
  font-weight: 500;
}
.social-card .sc-text strong{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .01em;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ====== ONDE ESTAMOS — MAP ====== */
.map-block{
  margin-top: 24px;
  position: relative;
  border: 1px solid var(--line);
  background: var(--paper-2);
  overflow: hidden;
}
.map-block::after{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(168,162,158,.18);
  pointer-events: none;
  z-index: 2;
}
.map-frame{
  width: 100%;
  height: 460px;
  border: 0;
  display: block;
  filter: grayscale(.45) contrast(1.02);
  transition: filter .6s var(--ease);
}
.map-block:hover .map-frame{filter: grayscale(0) contrast(1);}
.map-caption{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 26px 30px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.map-caption .mc-left{display: flex; flex-direction: column; gap: 6px;}
.map-caption .mc-tag{
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--silver-deep);
  font-weight: 500;
}
.map-caption .mc-address{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -.005em;
}
.map-caption .mc-link{
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--silver);
  padding-bottom: 4px;
  transition: all .3s var(--ease);
  white-space: nowrap;
}
.map-caption .mc-link:hover{border-color: var(--ink); transform: translateX(2px);}
@media (max-width: 640px){
  .map-frame{height: 340px;}
  .map-caption{flex-direction: column; align-items: flex-start; padding: 22px;}
  .map-caption .mc-address{font-size: 16px;}
}

/* ====== STORY KEYWORD HIGHLIGHT ====== */
.story-body p b, .story-body p strong{
  font-weight: 500;
  color: var(--ink);
  font-family: var(--font-body);
  letter-spacing: .002em;
}

.form-block{
  padding: 50px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
}
@media (max-width: 600px){.form-block{padding: 30px 22px;}}
.form-block h3{
  font-size: 32px;
  margin-bottom: 8px;
  font-weight: 400;
}
.form-block .form-sub{
  font-size: 14px; color: var(--mute-2);
  margin-bottom: 36px;
}
.form-field{margin-bottom: 22px;}
.form-field label{
  display: block;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--mute-2); font-weight: 500;
  margin-bottom: 10px;
}
.form-field input,
.form-field textarea,
.form-field select{
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
  color: var(--ink);
  font-weight: 300;
  transition: border-color .3s var(--ease);
  outline: none;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{border-bottom-color: var(--ink);}
.form-field textarea{min-height: 120px; resize: vertical;}
.form-row{display:grid; grid-template-columns: 1fr 1fr; gap: 22px;}
@media (max-width: 600px){.form-row{grid-template-columns: 1fr;}}
.form-submit{
  width: 100%;
  margin-top: 12px;
  padding: 20px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  font-weight: 500;
  transition: all .4s var(--ease);
  border: 1px solid var(--ink);
}
.form-submit:hover{background: var(--paper); color: var(--ink);}
.form-success{
  display: none;
  padding: 22px;
  background: rgba(168,162,158,.12);
  border-left: 2px solid var(--silver);
  color: var(--ink);
  font-size: 14px;
  margin-top: 22px;
}
.form-success.show{display:block;}

/* ============================================================
   PAGE: CLIENT AREA
============================================================ */
.client-area{
  min-height: calc(100vh - var(--nav-h));
  background: var(--ink);
  color: var(--text-light);
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + 60px) 22px 80px;
  position: relative;
  overflow: hidden;
}
.client-area::before{
  content:"";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(255,255,255,.03), transparent 60%);
}
.login-card{
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--ink-2);
  border: 1px solid rgba(255,255,255,.08);
  padding: 56px 50px;
}
@media (max-width: 480px){.login-card{padding: 40px 26px;}}
.login-card::before{
  content:"";
  position: absolute;
  top: -1px; left: 60px; right: 60px;
  height: 1px; background: var(--silver-2);
}
.login-card .login-eye{
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--silver-2); margin-bottom: 30px;
}
.login-card h2{
  font-size: 38px;
  font-weight: 400;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.login-card .login-sub{
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin-bottom: 40px;
  line-height: 1.6;
}
.login-field{margin-bottom: 22px;}
.login-field label{
  display: block;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.5); font-weight: 500;
  margin-bottom: 10px;
}
.login-field input{
  width: 100%;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.15);
  color: var(--paper);
  font-size: 15px;
  font-weight: 300;
  transition: border-color .3s var(--ease);
  outline: none;
}
.login-field input:focus{border-bottom-color: var(--silver-2);}
.login-extras{
  display: flex; justify-content: space-between; align-items: center;
  margin: 22px 0 36px;
  font-size: 12px;
}
.login-extras label{color: rgba(255,255,255,.6); display: flex; gap: 8px; align-items: center;}
.login-extras a{color: var(--silver-2);}
.login-btn{
  width: 100%;
  padding: 18px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; font-weight: 500;
  transition: all .4s var(--ease);
}
.login-btn:hover{background: transparent; color: var(--paper);}
.login-footer{
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.5);
}
.login-footer span.silver{color: var(--silver-2);}
.login-footer small{
  display: block; margin-top: 10px;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

.dashboard{
  display: none;
  background: var(--paper);
  min-height: calc(100vh - var(--nav-h));
  padding: calc(var(--nav-h) + 60px) 0 80px;
}
.dashboard.show{display:block;}
.dash-header{
  display: flex; justify-content: space-between; align-items: end;
  flex-wrap: wrap; gap: 20px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 50px;
}
.dash-header .dh-greet{
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
}
.dash-header .dh-greet em{color: var(--silver-deep); font-style: italic;}
.dash-logout{
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--mute-2);
  border: 1px solid var(--line-soft);
  padding: 12px 22px;
  transition: all .3s var(--ease);
}
.dash-logout:hover{border-color: var(--ink); color: var(--ink);}
.dash-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 900px){.dash-grid{grid-template-columns: 1fr 1fr;}}
@media (max-width: 500px){.dash-grid{grid-template-columns: 1fr;}}
.dash-stat{
  padding: 30px 28px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  transition: border-color .3s var(--ease);
}
.dash-stat:hover{border-color: var(--silver);}
.dash-stat .ds-label{
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 18px;
}
.dash-stat .ds-val{
  font-family: var(--font-display);
  font-size: 42px; font-weight: 400; line-height: 1;
  margin-bottom: 8px;
}
.dash-stat .ds-val .small{font-size: 18px; color: var(--silver-deep); margin-left: 4px;}
.dash-stat .ds-foot{font-size: 12px; color: var(--mute-2);}
.dash-panels{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 30px;
}
@media (max-width: 900px){.dash-panels{grid-template-columns: 1fr;}}
.dash-panel{
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  padding: 36px;
}
.dash-panel h4{
  font-size: 22px;
  margin-bottom: 26px;
  font-weight: 400;
  display: flex; align-items: center; justify-content: space-between;
}
.dash-panel h4 .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--silver); display: inline-block;
  box-shadow: 0 0 0 4px rgba(168,162,158,.18);
}
.dash-item{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
  gap: 12px;
}
.dash-item:first-of-type{border-top: none; padding-top: 0;}
.dash-item .di-t{font-size: 14px; font-weight: 500;}
.dash-item .di-s{font-size: 12px; color: var(--mute-2); margin-top: 4px;}
.dash-item .di-status{
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--silver-deep);
  padding: 4px 10px;
  border: 1px solid var(--silver);
  background: rgba(168,162,158,.08);
}
.dash-item .di-status.gray{color: var(--mute-2); border-color: var(--line-soft); background: transparent;}
.dash-cta{
  margin-top: 26px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--silver-deep);
}
.dash-cta::after{content:"→";}

.integration-note{
  margin-top: 40px;
  padding: 24px;
  background: var(--ink);
  color: var(--paper);
  border-left: 2px solid var(--silver-2);
  font-size: 13px;
  line-height: 1.7;
}
.integration-note strong{color: var(--silver-2);}

/* Floating WhatsApp */
.wa-float{
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 90;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
  transition: all .4s var(--ease);
  border: 1px solid rgba(255,255,255,.15);
}
.wa-float:hover{background: var(--paper); color: var(--ink); transform: translateY(-3px);}
.wa-float svg{width: 24px; height: 24px;}

/* Reveal on scroll */
.reveal{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.visible{opacity: 1; transform: translateY(0);}
.reveal-delay-1{transition-delay: .1s;}
.reveal-delay-2{transition-delay: .2s;}
.reveal-delay-3{transition-delay: .3s;}
.reveal-delay-4{transition-delay: .4s;}

/* Scrollbar */
::-webkit-scrollbar{width: 8px; height: 8px;}
::-webkit-scrollbar-track{background: var(--paper);}
::-webkit-scrollbar-thumb{background: var(--bone); border-radius: 4px;}
::-webkit-scrollbar-thumb:hover{background: var(--silver);}