/*
Theme Name: Coletivo Baio
Theme URI: https://coletivobaio.com.br/
Author: Coletivo Baio
Author URI: https://coletivobaio.com.br/
Description: Tema de página única para o Coletivo Baio — times de comunicação sob demanda, especialistas em turismo, hospitalidade e parques. Fundo preto, tipografia forte e acento em latão.
Version: 1.0.0
Requires at least: 5.6
Tested up to: 6.6
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coletivo-baio
*/

:root{
  --bg:#000000;
  --paper:#ECEAE3;
  --muted:#8B867C;
  --faint:rgba(236,234,227,0.12);
  --faint-strong:rgba(236,234,227,0.22);
  --brass:#C8A253;
  --brass-hi:#E2C583;
  --sans:"Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:"Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
a:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:2px;}
img{max-width:100%;height:auto;}

.wrap{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 clamp(1.4rem,5vw,4rem);
}

/* ---------- header ---------- */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:clamp(1.6rem,4vw,2.6rem);
}
.wordmark{
  font-weight:700;
  font-size:1.35rem;
  letter-spacing:-.02em;
  display:inline-flex;
  align-items:baseline;
}
.wordmark i{color:var(--brass);font-style:normal;}
.wordmark img{height:52px;width:auto;display:block;}
.header-link{
  font-family:var(--mono);
  font-size:.82rem;
  color:var(--muted);
  transition:color .2s ease;
}
.header-link:hover{color:var(--paper);}

/* ---------- hero ---------- */
.hero{
  padding:clamp(4rem,15vh,9rem) 0 clamp(3.4rem,9vh,6rem);
  border-bottom:1px solid var(--faint);
}
.hero__title{
  margin:0;
  font-weight:600;
  font-size:clamp(2.5rem,7.2vw,5.1rem);
  line-height:1.02;
  letter-spacing:-.025em;
  max-width:16ch;
}
.hero__title .line{display:block;}
.hero__sub{
  margin:clamp(1.6rem,4vw,2.4rem) 0 0;
  font-size:clamp(1.05rem,2.2vw,1.4rem);
  line-height:1.4;
  color:var(--muted);
  max-width:34ch;
}
.hero__sub strong{color:var(--paper);font-weight:500;}

/* ---------- generic section ---------- */
.section{
  padding:clamp(3rem,7vw,4.6rem) 0;
}
.label{
  margin:0 0 1.6rem;
  font-family:var(--mono);
  font-size:.82rem;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--muted);
}
.label b{color:var(--brass);font-weight:400;}

.lead{
  margin:0;
  font-size:clamp(1.15rem,2.4vw,1.5rem);
  line-height:1.5;
  max-width:30ch;
  font-weight:400;
}
.prose{
  margin:1.4rem 0 0;
  max-width:56ch;
  color:var(--muted);
  line-height:1.65;
}

/* ---------- especialidades ---------- */
.specs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0 clamp(1.2rem,3vw,2.4rem);
  margin-top:.4rem;
}
.spec{
  padding:1.8rem 0;
  border-top:1px solid var(--faint-strong);
}
.spec__name{
  margin:0 0 .5rem;
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:-.02em;
}
.spec__desc{
  margin:0;
  color:var(--muted);
  font-size:.98rem;
  line-height:1.5;
  max-width:24ch;
}

/* ---------- link grids ---------- */
.links{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:.1rem 2rem;
}
.links li{border-top:1px solid var(--faint);}
.links a{
  display:block;
  padding:.72rem 0;
  font-family:var(--mono);
  font-size:.92rem;
  color:var(--paper);
  transition:color .18s ease, padding-left .18s ease;
}
.links a:hover{color:var(--brass-hi);padding-left:.4rem;}

/* ---------- contato ---------- */
.contact{display:grid;gap:1.4rem;margin-top:.4rem;}
.contact__row{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 2rem;
  align-items:baseline;
  padding-top:1.4rem;
  border-top:1px solid var(--faint-strong);
}
.contact__row a{transition:color .18s ease;}
.contact__mail{font-size:1.15rem;font-weight:500;}
.contact__mail:hover{color:var(--brass-hi);}
.contact__tel{font-family:var(--mono);font-size:.9rem;color:var(--muted);}
.contact__tel:hover{color:var(--paper);}
.contact__social{margin-top:1.8rem;}
.contact__social a{
  font-family:var(--mono);
  font-size:.86rem;
  color:var(--muted);
  border-bottom:1px solid var(--faint-strong);
  padding-bottom:2px;
  transition:color .18s ease,border-color .18s ease;
}
.contact__social a:hover{color:var(--paper);border-color:var(--brass);}

/* ---------- footer ---------- */
.site-footer{
  padding:2.6rem 0 3rem;
  font-family:var(--mono);
  font-size:.76rem;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.6rem;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .specs{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .specs{grid-template-columns:1fr;}
  .spec__desc{max-width:none;}
}

/* ---------- construção ao rolar (scroll build-in) ---------- */
[data-build]{position:relative;}
[data-build]::after{
  content:"";position:absolute;left:0;bottom:0;
  height:1px;width:100%;background:var(--faint);
  transform:scaleX(1);transform-origin:left center;
}
.js [data-build]::after{
  transform:scaleX(0);
  transition:transform .85s cubic-bezier(.2,.7,.2,1);
}
.js [data-build].is-visible::after{transform:scaleX(1);}

.js [data-build] .label,
.js [data-build] .lead,
.js [data-build] .prose,
.js [data-build] .contact,
.js [data-build] .contact__social{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.js [data-build] .spec{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.js [data-build] .links li{
  opacity:0;transform:translateY(10px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}

[data-build].is-visible .label{opacity:1;transform:none;transition-delay:.02s;}
[data-build].is-visible .lead{opacity:1;transform:none;transition-delay:.10s;}
[data-build].is-visible .prose{opacity:1;transform:none;transition-delay:.18s;}
[data-build].is-visible .contact{opacity:1;transform:none;transition-delay:.10s;}
[data-build].is-visible .contact__social{opacity:1;transform:none;transition-delay:.30s;}
[data-build].is-visible .spec{opacity:1;transform:none;}
[data-build].is-visible .spec:nth-child(1){transition-delay:.16s;}
[data-build].is-visible .spec:nth-child(2){transition-delay:.24s;}
[data-build].is-visible .spec:nth-child(3){transition-delay:.32s;}
[data-build].is-visible .spec:nth-child(4){transition-delay:.40s;}
[data-build].is-visible .links li{opacity:1;transform:none;}

/* ---------- como funcionamos: montagem do time ---------- */
.cf-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
.team{border:1px solid var(--faint-strong);border-radius:12px;padding:1.5rem 1.6rem;max-width:380px;background:linear-gradient(180deg,rgba(236,234,227,.025),rgba(236,234,227,0));}
.team__head{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;color:var(--muted);margin-bottom:1.2rem;}
.team__dot{width:7px;height:7px;border-radius:50%;background:var(--brass);animation:dotPulse 2.6s ease-in-out infinite;}
.team__roles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem;}
.role{display:flex;align-items:center;gap:.75rem;font-family:var(--sans);font-size:1.02rem;color:var(--paper);}
.role__check{position:relative;flex:none;width:19px;height:19px;border-radius:5px;border:1px solid var(--faint-strong);}
.role__check::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:9px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);}
.team__foot{margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--faint);font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;color:var(--brass);}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(200,162,83,.5);}50%{box-shadow:0 0 0 7px rgba(200,162,83,0);}}
@keyframes roleIn{from{opacity:0;transform:translateX(12px);}to{opacity:1;transform:none;}}
@keyframes checkOn{to{background:var(--brass);border-color:var(--brass);}}
@keyframes tickIn{to{transform:rotate(45deg) scale(1);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.js [data-build] .role{opacity:0;}
.js [data-build] .team__foot{opacity:0;}
[data-build].is-visible .role{animation:roleIn .5s ease var(--d) both;}
[data-build].is-visible .role .role__check{animation:checkOn .3s ease calc(var(--d) + .22s) both;}
[data-build].is-visible .role .role__check::after{animation:tickIn .3s ease calc(var(--d) + .32s) both;}
[data-build].is-visible .team__foot{animation:fadeUp .6s ease 1.05s both;}

/* ---------- especialidades: ícones ---------- */
.spec__icon{display:inline-flex;width:34px;height:34px;color:var(--muted);margin-bottom:.7rem;animation:specCycle 9s ease-in-out infinite;}
.spec__icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.specs .spec:nth-child(1) .spec__icon{animation-delay:0s;}
.specs .spec:nth-child(2) .spec__icon{animation-delay:2.25s;}
.specs .spec:nth-child(3) .spec__icon{animation-delay:4.5s;}
.specs .spec:nth-child(4) .spec__icon{animation-delay:6.75s;}
@keyframes specCycle{0%{color:var(--brass);transform:translateY(-3px);}11%{color:var(--brass);transform:translateY(-3px);}26%{color:var(--muted);transform:none;}100%{color:var(--muted);}}
@media (max-width:820px){ .cf-grid{grid-template-columns:1fr;} .cf-anim{margin-top:2.2rem;} }

/* ---------- one orchestrated hero reveal ---------- */
@keyframes riseIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.hero__title .line,.hero__sub{animation:riseIn .7s cubic-bezier(.2,.7,.2,1) both;}
.hero__title .line:nth-child(2){animation-delay:.09s;}
.hero__sub{animation-delay:.2s;}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .js [data-build] .label,
  .js [data-build] .lead,
  .js [data-build] .prose,
  .js [data-build] .contact,
  .js [data-build] .contact__social,
  .js [data-build] .spec,
  .js [data-build] .links li,
  .js [data-build] .role,
  .js [data-build] .team__foot{opacity:1!important;transform:none!important;}
  .js [data-build]::after{transform:scaleX(1)!important;}
  .js [data-build] .role__check{background:var(--brass)!important;border-color:var(--brass)!important;}
  .js [data-build] .role .role__check::after{transform:rotate(45deg) scale(1)!important;}
  .spec__icon{color:var(--brass)!important;transform:none!important;}
}