/* ============================================================
   TEMASEK COWORKING — estilo.css
   Identidade visual oficial (Marjorie Barra, 2023) — v5
   v5: ícones de cidade nas 8 salas, motivos decorativos do
   globo (manual "Elementos Visuais"), Archivo Expanded para
   destaques editoriais (fiel ao Aktiv Grotesk Ex do manual).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@700;800&display=swap');

:root{
  --sage:#A3A594;
  --brown:#71553D;
  --dark-green:#425F50;
  --ink:#171B1E;
  --gold:#AD9A70;
  --mauve:#926F5D;
  --teal-green:#307A69;
  --rust:#9C6839;
  --cream:#F7F5F0;
  --white:#FFFFFF;
  --tint-sage:#EBEDE3;
  --tint-gold:#F4EEE1;
  --tint-teal:#E4EFEC;
  --tint-rust:#F5E9DD;
  --ink-soft:#20252A;
  --max-width:1200px;
  --radius:3px;
  --font-display:'Source Code Pro', monospace;
  --font-body:'Work Sans', sans-serif;
  --font-expanded:'Archivo Expanded', 'Work Sans', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
ul,ol{margin-bottom:20px;}
ul li,ol li{margin-bottom:8px; line-height:1.6;}
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 24px;
}
.wrap{max-width:100%; overflow-x:hidden;}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--ink);
  line-height:1.2;
  letter-spacing:-0.01em;
  text-wrap:balance;
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
}
h1{font-size:clamp(2.1rem, 5vw, 3.4rem); margin-bottom:20px; max-width:20ch;}
h2{font-size:clamp(1.8rem, 3.8vw, 2.7rem); margin:56px 0 22px; max-width:26ch;}
.h2-balanced{max-width:34ch; margin-left:auto; margin-right:auto;}
h3{font-size:clamp(1.25rem, 2.3vw, 1.65rem); margin:34px 0 14px; max-width:32ch;}
h4{font-size:1.1rem; margin:26px 0 10px; font-family:var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--dark-green);}
h5{font-size:1rem; margin:18px 0 8px; font-weight:700;}
h6{font-size:.9rem; margin:14px 0 6px; font-weight:700; color:var(--brown);}
p{margin-bottom:18px; max-width:70ch; text-wrap:pretty; overflow-wrap:break-word;}
li{text-wrap:pretty; overflow-wrap:break-word;}
.lead{font-size:1.15rem; color:var(--brown); max-width:58ch; text-wrap:pretty; overflow-wrap:break-word;}

.section-center{text-align:center;}
.section-center h2{margin-left:auto; margin-right:auto;}
.section-center p{margin-left:auto; margin-right:auto;}

.eyebrow{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:1.05rem;
  color:var(--teal-green);
  display:block;
  margin-bottom:14px;
}

/* ---------- HEADER ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #E4E1D6;
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.02em;
}
.logo-img{height:60px; width:auto; display:block;}
.logo-img-footer{height:60px; width:auto; display:block;}
.nav-cta-group{display:flex; gap:10px; align-items:center; margin-top:8px;}
@media (max-width:680px){
  .logo-img{height:60px;}
}
.logo .globe{width:26px; height:26px; flex-shrink:0;}
.logo small{display:block; font-size:.6rem; font-weight:400; letter-spacing:.15em; color:var(--brown); text-transform:uppercase;}

nav.main-nav{display:flex; gap:22px; align-items:center;}
nav.main-nav a{
  font-size:.92rem; font-weight:500; color:var(--ink);
  position:relative; padding:6px 0;
  border-bottom:2px solid transparent;
}
nav.main-nav a:hover{color:var(--teal-green); border-bottom-color:var(--gold);}
.has-sub{position:relative;}
.subnav{
  display:none; position:absolute; top:100%; left:0;
  background:var(--white); border:1px solid #E4E1D6; border-top:3px solid var(--gold); min-width:220px;
  box-shadow:0 16px 32px rgba(23,27,30,.12); padding:8px 0;
}
.has-sub:hover .subnav{display:block;}
.subnav a{display:block; padding:10px 18px; font-size:.88rem; border-bottom:none;}
.subnav a:hover{background:var(--tint-sage); border-bottom:none;}

.btn{
  display:inline-block; padding:12px 26px; border-radius:var(--radius);
  font-family:var(--font-display); font-size:.85rem; font-weight:600;
  letter-spacing:.03em; text-transform:uppercase;
  border:1.5px solid var(--ink); transition:.2s;
}
.btn-primary{background:var(--ink); color:var(--white);}
.btn-primary:hover{background:var(--teal-green); border-color:var(--teal-green);}
.btn-outline{background:transparent; color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--white);}
.btn-light{border-color:var(--white); color:var(--white);}
.btn-light:hover{background:var(--gold); border-color:var(--gold); color:var(--ink);}
.btn-gold{background:var(--gold); color:var(--ink); border:1.5px solid var(--accent-dark, #8F7D53); padding:14px 32px;}
.btn-green{background:var(--teal-green); color:var(--white); border:1.5px solid var(--teal-green); padding:14px 32px;}
.btn-green:hover{background:#255F52; border-color:#255F52;}
.btn.nav-cta{padding:12px 22px; font-size:.75rem; white-space:nowrap; font-weight:800;}
.btn-gold:hover{background:#8F7D53; border-color:#8F7D53; color:var(--white);}

.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.menu-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0;}

/* ---------- HERO ---------- */
main > section.hero{
  background:
    radial-gradient(circle at 88% 15%, rgba(48,122,105,.45), transparent 55%),
    radial-gradient(circle at 8% 92%, rgba(173,154,112,.28), transparent 50%),
    var(--ink);
  color:var(--white);
  padding:96px 0 84px; position:relative; overflow:hidden;
}
.hero .container{position:relative; z-index:2;}
.hero h1{color:var(--white); max-width:27ch;}
.hero .lead{color:#D8D4C8; max-width:55ch; margin-bottom:32px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}
.hero-bg-icon{
  position:absolute; right:-80px; top:50%; transform:translateY(-50%);
  width:420px; height:420px; opacity:.08;
}
.tagline-line{
  font-family:var(--font-expanded); font-weight:800; text-transform:uppercase;
  letter-spacing:.02em; font-size:.85rem; color:var(--gold);
  margin:18px 0 0; max-width:34ch;
}

main > section.hero-sm{
  background:linear-gradient(115deg, var(--sage) 0%, #AFA47E 55%, var(--gold) 100%);
  color:var(--ink); padding:64px 0;
}
.hero-sm h1{max-width:22ch;}
.hero-sm .lead{color:var(--brown);}
.room-hero-icon{width:52px; height:52px; margin-bottom:16px; opacity:.85;}
main > section.hero-sm{position:relative; overflow:hidden;}
main > section.hero-sm .container{position:relative; z-index:1;}
main > section.hero-sm::after{
  content:""; position:absolute; right:-40px; top:-40px;
  width:260px; height:260px; opacity:.07; pointer-events:none;
  background:url('assets/motivo-globo-hexagonos-ink.svg') no-repeat center/contain;
}

/* ---------- SECTIONS — ritmo de cor deliberado, explorando a paleta ---------- */
section{padding:96px 0;}
.section-tight{padding:64px 0;}

/* alternância automática entre seções de conteúdo (sem precisar marcar cada uma) */
main > section:nth-of-type(3n+2){background:var(--tint-sage);}
main > section:nth-of-type(3n){background:var(--tint-gold);}

/* variantes nomeadas — especificidade combinada pra sempre vencer a alternância acima */
main > section.section-alt{background:var(--tint-teal);}
main > section.section-dark{background:
    radial-gradient(circle at 15% 20%, rgba(173,154,112,.22), transparent 55%),
    var(--ink); color:var(--white);}
main > section.section-dark h1, main > section.section-dark h2, main > section.section-dark h3,
main > section.section-dark h4, main > section.section-dark h5, main > section.section-dark h6{color:var(--white);}
main > section.section-sage{background:var(--sage); color:var(--ink);}
main > section.section-rust{background:var(--tint-rust);}

.grid{display:grid; gap:28px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

/* cards com sotaque de cor cíclico — usa a paleta inteira, não só cinza/branco */
.card{
  background:var(--white); border:1px solid #E4E1D6; border-top:3px solid var(--teal-green);
  border-radius:var(--radius);
  padding:28px; height:100%;
  box-shadow:0 1px 2px rgba(23,27,30,.03);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 12px 24px rgba(23,27,30,.08);}
.grid .card:nth-child(4n+2){border-top-color:var(--gold);}
.grid .card:nth-child(4n+3){border-top-color:var(--rust);}
.grid .card:nth-child(4n){border-top-color:var(--dark-green);}
.card-dark{background:var(--ink); color:var(--white); border-color:var(--ink); border-top-color:var(--gold);}
.card h3{margin-top:0;}
.card-icon{width:40px; height:40px; margin-bottom:16px; color:var(--teal-green);}
.card-icon-img{width:38px; height:38px; margin-bottom:14px; object-fit:contain;}

.video-embed{position:relative; width:100%; padding-top:56.25%; margin:24px 0 32px; background:var(--ink); overflow:hidden; border-radius:var(--radius);}
.video-embed iframe, .video-embed video{position:absolute; top:0; left:0; width:100%; height:100%; border:0; object-fit:cover;}
.hero-photo{width:100%; overflow:hidden; max-height:520px;}
.hero-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0;}
.photo-grid img{width:100%; height:220px; object-fit:cover; border-radius:var(--radius);}
.room-photo{width:100%; max-height:460px; overflow:hidden; border-radius:var(--radius); margin:24px 0;}
.room-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.room-photo-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0;}
.room-photo-grid img{width:100%; height:280px; object-fit:cover; border-radius:var(--radius);}
@media (max-width:680px){
  .photo-grid{grid-template-columns:1fr; }
  .photo-grid img{height:200px;}
  .room-photo-grid{grid-template-columns:1fr;}
  .room-photo-grid img{height:220px;}
  .hero-photo{max-height:280px;}
}

.tag{
  display:inline-block; padding:5px 14px; border-radius:20px;
  background:var(--sage); color:var(--ink); font-size:.78rem;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em;
  margin-bottom:12px;
}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}

.stat-row{display:flex; gap:40px; flex-wrap:wrap; margin-top:32px;}
.stat{}
.stat b{font-family:var(--font-display); font-size:2rem; display:block; color:var(--teal-green);}
.stat span{font-size:.85rem; color:var(--brown);}
.stat-card{display:flex; flex-direction:row; align-items:center; gap:18px; padding:22px;}
.stat-card .card-icon-img{margin-bottom:0; flex-shrink:0;}
.stat-card b{font-family:var(--font-display); font-size:1.8rem; display:block; color:var(--teal-green); line-height:1.1;}
.stat-card span{font-size:.85rem; color:var(--brown);}

.table-wrap{width:100%; overflow-x:auto; margin:24px 0; -webkit-overflow-scrolling:touch; border:1px solid #E4E1D6; border-radius:var(--radius);}
table{width:100%; border-collapse:collapse; margin:0;}
@media (max-width:680px){
  .unit-card table{min-width:0;}
}
th,td{padding:14px 16px; text-align:left; border-bottom:1px solid #E4E1D6; font-size:.92rem;}
th{font-family:var(--font-display); text-transform:uppercase; font-size:.78rem; letter-spacing:.04em; background:var(--ink); color:var(--white);}
tr:nth-child(even) td{background:rgba(163,165,148,.10);}

.faq-item{border-bottom:1px solid #E4E1D6; padding:22px 0;}
.faq-item:first-child{padding-top:0;}
.faq-item h3{margin:0 0 8px; color:var(--teal-green);}

.breadcrumb{font-size:.82rem; color:var(--brown); padding:16px 0 0;}
.breadcrumb a{color:var(--brown);}
.breadcrumb a:hover{color:var(--teal-green);}

.unit-card{
  border:1px solid #E4E1D6; border-top:4px solid var(--teal-green);
  background:var(--white);
  padding:32px; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 1px 2px rgba(23,27,30,.03);
}
.unit-card:nth-of-type(even){border-top-color:var(--gold);}
.unit-card .addr{font-size:.9rem; color:var(--brown);}

.cta-band{
  background:
    radial-gradient(circle at 80% 30%, rgba(173,154,112,.30), transparent 55%),
    var(--dark-green);
  color:var(--white); text-align:center; padding:64px 0;
}
.cta-band h2{margin-left:auto; margin-right:auto;}
.cta-band p{margin-left:auto; margin-right:auto;}
.cta-band h2{color:var(--white);}

/* ---------- FOOTER ---------- */
footer.site{
  background:var(--ink); color:#C9C6BC; padding:64px 0 24px; font-size:.9rem;
  border-top:3px solid; border-image:linear-gradient(90deg, var(--gold), var(--teal-green), var(--rust)) 1;
  position:relative; overflow:hidden;
}
footer.site::before{
  content:""; position:absolute; right:-60px; bottom:-60px;
  width:280px; height:280px; opacity:.06; pointer-events:none;
  background:url('assets/motivo-globo-listrado.svg') no-repeat center/contain;
}
footer.site .container{position:relative; z-index:1;}
footer.site h5{color:var(--white); font-family:var(--font-display); text-transform:uppercase; font-size:.8rem; letter-spacing:.06em; margin-bottom:16px;}
footer.site a{color:#C9C6BC;}
.social-icon{display:inline-flex; color:#C9C6BC; transition:color .2s;}

.whatsapp-float{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:60px; height:60px; border-radius:50%;
  background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float svg{width:40px; height:40px;}
.whatsapp-float:hover{transform:scale(1.08); box-shadow:0 6px 22px rgba(0,0,0,.3);}
@media (max-width:680px){
  .whatsapp-float{width:52px; height:52px; right:16px; bottom:16px;}
  .whatsapp-float svg{width:34px; height:34px;}
}
.social-icon:hover{color:var(--gold);}
footer.site a:hover{color:var(--gold);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
.foot-grid li{margin-bottom:8px;}
.foot-bottom{
  border-top:1px solid #33342F; margin-top:40px; padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.8rem;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .two-col{grid-template-columns:1fr; gap:32px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .hero-bg-icon{display:none;}
  section{padding:72px 0;}
  h2{margin:44px 0 18px;}
}
@media (max-width:960px){
  nav.main-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--white); flex-direction:column; align-items:flex-start;
    padding:16px 24px 24px; border-bottom:1px solid #ECEAE3; gap:4px;
  }
  nav.main-nav.open{display:flex;}
  nav.main-nav a{padding:10px 0; width:100%;}
  .nav-cta-group{flex-direction:column; align-items:stretch; width:100%; gap:10px;}
  .nav-cta{text-align:center;}
  .has-sub .subnav{display:block; position:static; box-shadow:none; border:none; padding:0 0 0 12px;}
  .menu-toggle{display:block;}
}
@media (max-width:680px){
  .grid-4, .grid-3, .grid-2{grid-template-columns:1fr;}
  main > section.hero{padding:48px 0 40px;}
  .hero h1{max-width:100%;}
  section{padding:40px 0;}
  .section-tight{padding:32px 0;}
  .foot-grid{grid-template-columns:1fr;}
  .stat-row{gap:20px 32px;}
  h1{font-size:1.85rem; max-width:100%; margin-bottom:14px;}
  h2{margin:36px 0 14px; max-width:100%;}
  h3{margin:26px 0 10px; max-width:100%;}
  p{margin-bottom:14px;}
  .card{padding:22px;}
  .grid{gap:16px;}
  .two-col{gap:28px;}
  table{font-size:.82rem;}
  th,td{padding:10px 8px;}
  .cta-band{padding:44px 0;}
}