/*
Theme Name: Espaço Kaeru
Theme URI: https://espacokaeru.com
Author: Espaço Kaeru
Description: Tema institucional do Espaço Kaeru — v3 (nav brand grafite, arquitetura 95% overlay, features padronizadas, closing com lista + degradê, footer em grid).
Version: 3.0.0
License: GPL-2.0-or-later
Text Domain: kaeru
*/

/* ================= TOKENS ================= */
:root{
  --architect:#F6F5F2;
  --concrete:#8D8A84;
  --graphite:#2E2E2E;
  --stone:#B8A99A;
  --champagne:#C8A978;
  --ink:#1A1A1A;
  --border:rgba(246,245,242,.15);
  --font-display:"Cormorant Garamond",Georgia,serif;
  --font-sans:"Inter",system-ui,-apple-system,sans-serif;
}

/* ================= RESET ================= */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100%}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--architect);color:var(--graphite);font-family:var(--font-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:300;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--graphite);color:var(--architect)}

/* ================= UTILITIES ================= */
.font-display{font-family:var(--font-display);font-weight:300;letter-spacing:-.02em}
.italic{font-style:italic}
.eyebrow{display:inline-block;font-family:var(--font-sans);font-size:.6875rem;text-transform:uppercase;letter-spacing:.28em;color:var(--concrete)}
.eyebrow--gold{color:var(--champagne)}
.container{width:100%;max-width:1400px;margin:0 auto;padding:0 1.25rem}
@media(min-width:768px){.container{padding:0 3rem}}
@media(min-width:1280px){.container{padding:0 4rem}}

.grid-12{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:768px){.grid-12{grid-template-columns:repeat(12,1fr);gap:4rem}
  .col-4{grid-column:span 4}
  .col-8{grid-column:span 8}
}

.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s cubic-bezier(.22,1,.36,1)}
.reveal.is-visible{opacity:1;transform:none}

/* ================= NAV ================= */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .35s ease,backdrop-filter .35s ease,border-color .35s,color .35s;background:rgba(13,13,13,.18);backdrop-filter:blur(3px);border-bottom:1px solid transparent;color:var(--architect)}
.site-nav__inner{max-width:1600px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;gap:1rem}
@media(min-width:768px){.site-nav__inner{padding:1.25rem 3rem}}
.site-nav .brand{font-family:var(--font-display);font-size:1.4rem;letter-spacing:.3em}
.site-nav .menu{display:none;gap:2.25rem}
.site-nav .menu a{font-size:.6875rem;text-transform:uppercase;letter-spacing:.28em;opacity:.75;transition:opacity .2s,color .2s}
.site-nav .menu a:hover{opacity:1}
.site-nav .cta{display:inline-flex;align-items:center;gap:.6rem;border:1px solid currentColor;padding:.6rem 1rem;font-size:.625rem;text-transform:uppercase;letter-spacing:.24em;transition:background .25s,color .25s}
@media(min-width:480px){.site-nav .cta{font-size:.6875rem;padding:.7rem 1.2rem}}
@media(min-width:1024px){.site-nav .menu{display:flex}}

/* NAV ROLADA — fundo branco / texto grafite */
.site-nav.is-scrolled{background:rgba(246,245,242,.92);backdrop-filter:blur(12px);color:var(--graphite);border-bottom-color:rgba(46,46,46,.15)}
.site-nav.is-scrolled .brand,
.site-nav.is-scrolled .menu a,
.site-nav.is-scrolled .cta{color:var(--graphite)}
.site-nav.is-scrolled .menu a{opacity:.7}
.site-nav.is-scrolled .menu a:hover{opacity:1;color:var(--graphite)}
.site-nav.is-scrolled .cta{border-color:var(--graphite)}
.site-nav.is-scrolled .cta:hover{background:var(--graphite);color:var(--architect)}

/* ================= HERO ================= */
.hero{position:relative;min-height:100vh;width:100%;overflow:hidden;background:var(--graphite);color:var(--architect)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(46,46,46,.3),rgba(46,46,46,.1) 40%,rgba(46,46,46,.75))}
.hero__meta{position:absolute;top:5.5rem;left:0;right:0;display:flex;justify-content:space-between;z-index:2}
.hero__meta .eyebrow{color:rgba(246,245,242,.7)}
.hero__content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;padding-top:8rem;padding-bottom:4rem}
.hero__kicker{color:rgba(246,245,242,.8);margin-bottom:1.5rem}
.hero__title{font-family:var(--font-display);color:var(--architect);font-size:clamp(2.75rem,11vw,7rem);line-height:.95;max-width:1100px}
.hero__bottom{margin-top:2.5rem;display:flex;flex-direction:column;gap:1.75rem;max-width:680px}
.hero__desc{color:rgba(246,245,242,.8);font-size:1rem;line-height:1.65}
.btn-outline{display:inline-flex;align-items:center;gap:.75rem;border:1px solid var(--architect);color:var(--architect);padding:.85rem 1.4rem;font-size:.6875rem;text-transform:uppercase;letter-spacing:.24em;align-self:flex-start;transition:background .3s,color .3s}
.btn-outline:hover{background:var(--architect);color:var(--graphite)}

/* ================= SECTION DARK ================= */
.section-dark{position:relative;background-color:var(--graphite);background-size:cover;background-position:center;color:var(--architect);padding:5rem 0;overflow:hidden}
@media(min-width:768px){.section-dark{padding:9rem 0}}

/* ================= PRESENTATION ================= */
.presentation{padding:2.5rem 0 3rem}
@media(min-width:768px){.presentation{padding:3.5rem 0 4.5rem}}
.presentation__head{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:3rem}
@media(min-width:768px){.presentation__head{flex-direction:row;justify-content:space-between;align-items:flex-end;margin-bottom:4rem}}
.presentation__title{margin-top:1rem;font-size:clamp(2.25rem,5vw,3.75rem);color:var(--architect);max-width:36rem}
.presentation__desc{max-width:22rem;color:rgba(246,245,242,.65);font-size:.875rem;line-height:1.6}
.presentation__video{position:relative;aspect-ratio:16/9;width:100%;max-width:1200px;margin:0 auto;background:var(--ink);overflow:hidden}
.presentation__video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video__play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--architect);background:rgba(26,26,26,.3);transition:background .3s}
.video__play:hover{background:rgba(26,26,26,.45)}
.video__circle{width:4.5rem;height:4.5rem;border-radius:50%;border:1px solid rgba(246,245,242,.5);display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;transition:transform .3s,border-color .3s,background .3s}
.video__play:hover .video__circle{transform:scale(1.08);border-color:var(--champagne);background:rgba(200,169,120,.1)}
.video__play--sm .video__circle{width:3rem;height:3rem;font-size:.95rem}

/* ================= MANIFESTO ================= */
.manifesto__title{font-size:clamp(2rem,5.5vw,4.5rem);line-height:1.05;color:var(--architect)}
.manifesto__title em{color:var(--champagne);font-style:italic}
.manifesto__body{margin-top:2.5rem;display:flex;flex-direction:column;gap:1.5rem;max-width:52ch;color:rgba(246,245,242,.78);line-height:1.7}
.manifesto__lead{margin-top:2.25rem;color:rgba(246,245,242,.78)}
.dash-list{margin-top:1.75rem;display:grid;grid-template-columns:1fr;gap:1rem 2.5rem}
@media(min-width:640px){.dash-list--2col{grid-template-columns:1fr 1fr}}
.dash-list li{display:flex;align-items:flex-start;gap:1rem;color:var(--architect);line-height:1.55}
.dash{display:block;flex:0 0 auto;margin-top:.7em;height:1px;width:1.5rem;background:var(--champagne)}

/* ================= EXPERIENCES ================= */
.experiences__head{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:3.5rem}
@media(min-width:768px){.experiences__head{flex-direction:row;justify-content:space-between;align-items:flex-end;margin-bottom:5rem}}
.experiences__title{margin-top:1.25rem;font-size:clamp(2rem,5vw,3.75rem);color:var(--architect);max-width:32rem}
.experiences__desc{color:rgba(246,245,242,.7);max-width:22rem;font-size:.875rem;line-height:1.6}
.experiences__grid{display:grid;grid-template-columns:1fr;gap:3rem 1.5rem}
@media(min-width:640px){.experiences__grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.experiences__grid{grid-template-columns:1fr 1fr 1fr}}
.exp-card__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#222}
.exp-card__media img,.exp-card__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s ease}
.exp-card:hover .exp-card__media img,.exp-card:hover .exp-card__media video{transform:scale(1.05)}
.exp-card__foot{margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgba(246,245,242,.2);display:flex;justify-content:space-between;align-items:baseline}
.exp-card__foot h3{font-family:var(--font-display);font-size:1.4rem;color:var(--architect)}
.exp-card__n{font-family:var(--font-display);color:var(--champagne);font-size:.875rem}

/* ================= BASTIDORES ================= */
.bastidores__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(min-width:768px){.bastidores__grid{grid-template-columns:repeat(4,1fr);gap:1.5rem}}
.tile{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ink);margin:0}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s ease}
.tile:hover img{transform:scale(1.05)}
.tile__grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(46,46,46,.85),rgba(46,46,46,.1) 60%,transparent)}
.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:1rem;color:rgba(246,245,242,.9)}

/* ================= FEATURES — padronizado ================= */
.features{padding:5rem 0}
@media(min-width:768px){.features{padding:9rem 0}}
.features > .container{padding-left:clamp(1.5rem,6vw,6rem);padding-right:clamp(1.5rem,6vw,6rem);max-width:1500px}
.feature{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.feature+.feature{margin-top:5rem}
@media(min-width:768px){
  .feature{grid-template-columns:7fr 5fr;gap:5rem}
  .feature+.feature{margin-top:9rem}
  .feature--reverse > :first-child{order:2}
}
.feature__img{aspect-ratio:4/3;overflow:hidden;background:#222;width:100%;display:block}
.feature__img img{width:100%;height:100%;object-fit:cover;display:block}
.feature__text{display:flex;flex-direction:column;gap:1.5rem;max-width:36rem}
.feature__text .eyebrow{margin:0}
.feature__title{font-family:var(--font-display);font-size:clamp(1.75rem,3.5vw,3rem);color:var(--architect);margin:0;line-height:1.1}
.feature__desc{color:rgba(246,245,242,.7);line-height:1.7;margin:0;max-width:32rem}

/* ================= GALERIA ================= */
.gallery{background:var(--graphite)}
.gallery__count{color:rgba(246,245,242,.5);font-size:.8125rem;letter-spacing:.2em;text-transform:uppercase}
.gallery__grid{columns:1;column-gap:1rem}
@media(min-width:640px){.gallery__grid{columns:2}}
@media(min-width:1024px){.gallery__grid{columns:3}}
.g-tile{display:block;width:100%;padding:0;margin:0 0 1rem;break-inside:avoid;overflow:hidden;background:var(--ink)}
.g-tile img{width:100%;height:auto;display:block;transition:transform 1.2s ease}
.g-tile:hover img{transform:scale(1.04)}

.lightbox{position:fixed;inset:0;z-index:100;background:rgba(13,13,13,.92);display:flex;align-items:center;justify-content:center;padding:2rem}
.lightbox[hidden]{display:none}
.lightbox img{max-width:95vw;max-height:90vh;object-fit:contain}
.lightbox__close{position:absolute;top:1rem;right:1.25rem;color:var(--architect);font-size:2rem;line-height:1}

/* ================= SOCIAL PROOF ================= */
.social-proof{border-top:1px solid rgba(246,245,242,.15);border-bottom:1px solid rgba(246,245,242,.15);padding:4rem 0}
.social-proof__title{display:block;text-align:center;margin-bottom:2.5rem}
.social-proof__brands{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.25rem 3rem}
.brand{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.15em;color:rgba(246,245,242,.8);transition:color .2s}
.brand:hover{color:var(--architect)}
@media(min-width:768px){.brand{font-size:1.5rem}}

/* ================= ARQUITETURA (RUY) — imagem de fundo com overlay grafite 95% ================= */
.ruy{position:relative;background:var(--graphite);overflow:hidden}
.ruy__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:1;pointer-events:none}
.ruy__bg::after{content:"";position:absolute;inset:0;background:rgba(46,46,46,.95);pointer-events:none}
.ruy > .container{position:relative;z-index:1}
.ruy__p{margin-top:2rem;max-width:52ch;color:rgba(246,245,242,.72);line-height:1.7}
.ruy__p:first-of-type{margin-top:3rem}

/* ================= FAQ ================= */
.faq{padding:5rem 0;background:var(--architect);color:var(--graphite)}
@media(min-width:768px){.faq{padding:9rem 0}}
.faq__title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);color:var(--graphite);margin-top:1.25rem}
.faq-item{border-bottom:1px solid #e6e3dd}
.faq-item summary{list-style:none;display:flex;gap:1rem;align-items:center;padding:1.5rem 0;cursor:pointer;font-family:var(--font-display);font-size:1.15rem;color:var(--graphite)}
.faq-item summary::-webkit-details-marker{display:none}
@media(min-width:768px){.faq-item summary{font-size:1.4rem;padding:1.75rem 0}}
.faq-item__n{color:var(--champagne);font-size:.8125rem;letter-spacing:.2em;min-width:2.5rem}
.faq-item__q{flex:1}
.faq-item__chev{font-size:1.4rem;color:var(--concrete);transition:transform .25s}
.faq-item[open] .faq-item__chev{transform:rotate(45deg)}
.faq-item__a{padding:0 0 1.5rem 3.5rem;color:var(--concrete);line-height:1.7;max-width:60ch}

/* ================= CLOSING ================= */
.closing{position:relative;min-height:85vh;padding:6rem 0;overflow:hidden;color:var(--architect);padding-left:clamp(1.25rem,4vw,3rem);padding-right:clamp(1.25rem,4vw,3rem)}
@media(min-width:768px){.closing{padding:9rem clamp(2rem,6vw,5rem)}}
.closing__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.closing__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(46,46,46,.45),rgba(46,46,46,.35) 40%,rgba(46,46,46,.88));z-index:1;pointer-events:none}
.closing__inner{position:relative;z-index:2;text-align:center;max-width:1100px;margin:0 auto;padding:0}
.closing__title{font-family:var(--font-display);color:var(--architect);font-size:clamp(2.5rem,7vw,6rem);line-height:.95;margin-top:1.5rem}
.closing__title em{color:var(--champagne);font-style:italic}
.closing__desc{margin:1.75rem auto 0;max-width:36rem;color:rgba(246,245,242,.8)}

/* Lista de atividades do closing */
.closing__list{margin:3rem auto 0;display:grid;grid-template-columns:1fr;gap:.65rem 2.5rem;max-width:64rem;text-align:left;padding:0;list-style:none}
@media(min-width:640px){.closing__list{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.closing__list{grid-template-columns:repeat(3,1fr)}}
.closing__list li{display:flex;align-items:flex-start;gap:.85rem;color:rgba(246,245,242,.88);font-size:.95rem;line-height:1.55;list-style:none}
.closing__list li::before{content:"";flex:0 0 auto;margin-top:.7em;height:1px;width:1.25rem;background:var(--champagne)}

.btn-primary{display:inline-flex;align-items:center;gap:1rem;margin-top:2.5rem;padding:1.1rem 2rem;background:var(--architect);color:var(--graphite);border:1px solid var(--architect);font-size:.6875rem;text-transform:uppercase;letter-spacing:.28em;transition:background .3s,color .3s}
.btn-primary:hover{background:transparent;color:var(--architect)}

/* ================= FOOTER ================= */
.site-footer{background:var(--ink);color:var(--architect);padding:4rem 0 2rem}
.site-footer .container{padding-left:clamp(1.25rem,4vw,4rem);padding-right:clamp(1.25rem,4vw,4rem)}
.site-footer__grid{display:grid;grid-template-columns:1fr;gap:2.5rem;text-align:left}
@media(min-width:640px){.site-footer__grid{grid-template-columns:1fr 1fr;gap:2.5rem 2rem}}
@media(min-width:900px){.site-footer__grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;align-items:start}}
.site-footer__col {margin-bottom: 20px;}
.site-footer__col h4{font-family:var(--font-sans);font-size:.6875rem;text-transform:uppercase;letter-spacing:.28em;color:rgba(246,245,242,.55);margin:0 0 1rem;font-weight:500}
.site-footer__col a{display:block;padding:.25rem 0;color:rgba(246,245,242,.85);font-size:.9rem;transition:color .2s}
.site-footer__col a:hover{color:var(--champagne)}
.site-footer__col p{color:rgba(246,245,242,.7);font-size:.875rem;line-height:1.7;margin:0}
.site-footer__brand{font-family:var(--font-display);font-size:1.6rem;letter-spacing:.3em;color:var(--architect)}
.site-footer__lede{margin-top:1rem;color:rgba(246,245,242,.6);max-width:28rem;font-size:.875rem;line-height:1.7}
.site-footer__bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(246,245,242,.12);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,245,242,.45);text-align:center}

/* ================= Correção NAV ================= */

@media (max-width: 767px) {
  .site-nav__inner {
    width: 100%;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
  }

  .site-nav .brand {
    flex: 0 0 auto;
    font-size: 1.25rem;
    letter-spacing: .24em;
    white-space: nowrap;
  }

  .site-nav .cta {
    flex: 0 0 auto;
    margin-left: auto;
    padding: .65rem .95rem;
    font-size: .62rem;
    letter-spacing: .22em;
    white-space: nowrap;
  }

  .site-nav .cta span {
    display: none;
  }
}

/* ================= YOUTUBE PRESENTATION VIDEO ================= */

.presentation__video--youtube {
  position: relative;
}

.presentation__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.presentation__video--youtube::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26,26,26,.18);
  pointer-events: none;
  z-index: 1;
}

.presentation__video--youtube .video__play {
  z-index: 2;
}

.presentation__video--youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 3;
}