/* ==========================================================================
   UdiSpace — Home (home.css)
   Complementa base.css. Mobile-first; tokens e classes do design system.
   ========================================================================== */

/* ---------- 1. Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--header-h) + 40px) 0 96px;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-3}
.hero-bg img{filter:saturate(1.05) brightness(.9)}
.hero-overlay{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(180deg,rgba(14,15,20,.55) 0%,rgba(14,15,20,.25) 35%,rgba(14,15,20,.72) 75%,var(--ink) 100%),
  linear-gradient(90deg,rgba(14,15,20,.75) 0%,rgba(14,15,20,.35) 55%,rgba(14,15,20,.05) 100%)}
.hero .blob{z-index:-1}
.hero-blob-1{width:52vw;height:52vw;max-width:720px;max-height:720px;left:-18vw;bottom:-22vw;opacity:.32}
.hero-blob-2{width:34vw;height:34vw;max-width:480px;max-height:480px;right:-8vw;top:8vh;opacity:.28}
.hero-blob-3{width:28vw;height:28vw;max-width:400px;max-height:400px;right:22vw;bottom:-10vw;opacity:.35}

.hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.hero-content{max-width:820px;min-width:0}
.hero-title{font-size:clamp(3rem,6.1vw,5.8rem);line-height:.94;letter-spacing:-.04em;margin:0 0 26px;text-wrap:balance}
.hero-title em.accent{padding-right:.06em}
.hero-lead{color:rgba(246,242,234,.72);max-width:54ch;margin-bottom:34px}

.hero-search{color:var(--ink);box-shadow:var(--shadow-l),0 0 0 1px rgba(255,255,255,.08)}
.hero-search .sb-item input[type="date"]{color-scheme:light;min-height:28px}
.hero-search .sb-item input::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}

.hero-trust{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.85rem;font-weight:600;color:rgba(246,242,234,.72)}
.hero-trust li{display:inline-flex;align-items:center;gap:10px}
.hero-trust li + li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--ipe);opacity:.7}

/* mini-cards flutuantes */
.hero-floats{position:relative;display:none;min-height:520px}
.hf{position:absolute;will-change:transform;transition:transform .25s ease-out}
.hf-inner{opacity:0;transform:translateY(40px)}
.hf-card{display:block;width:250px;background:rgba(246,242,234,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow-l);border:1px solid rgba(255,255,255,.5);transition:transform .5s var(--ease-out)}
.hf-card:hover{transform:translateY(-4px) rotate(-1deg)}
.hf-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px}
.hf-card .hf-name{font-family:var(--font-display);font-weight:700;font-size:.98rem;margin:10px 2px 2px;letter-spacing:-.01em}
.hf-card .hf-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 2px 2px;font-size:.76rem;color:var(--mist)}
.hf-card .hf-meta b{font-family:var(--font-display);color:var(--ink);font-size:.86rem}
.hf-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--pill);background:var(--ipe);color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:.8rem;box-shadow:var(--shadow);white-space:nowrap}
.hf-pill.pill-dark{background:var(--ink-2);color:var(--paper);border:1px solid var(--line-dark)}
.hf-1{right:0;top:0}
.hf-2{right:210px;top:190px}
.hf-3{right:20px;top:360px}
.hf-4{right:250px;top:60px}
.hf-5{right:0;bottom:-10px}
.hf-2 .float{animation-delay:-2s}
.hf-3 .float{animation-delay:-4s}

/* indicador de scroll */
.scroll-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(246,242,234,.6);font-family:var(--font-display);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;transition:color .3s}
.scroll-hint:hover{color:var(--ipe)}
.scroll-hint-line{width:1px;height:56px;background:rgba(246,242,234,.18);overflow:hidden;position:relative;display:block}
.scroll-hint-line i{position:absolute;left:0;top:0;width:100%;height:40%;background:var(--ipe);animation:scrollHint 2.2s var(--ease) infinite}
@keyframes scrollHint{0%{transform:translateY(-100%)}60%,100%{transform:translateY(260%)}}

@media (min-width:1100px){
  .hero-inner{grid-template-columns:minmax(0,1.3fr) minmax(360px,.8fr)}
  .hero-floats{display:block}
}
@media (max-width:640px){
  .hero{padding-top:calc(var(--header-h) + 24px);padding-bottom:110px}
  .hero-title{font-size:clamp(2.2rem,9.6vw,3.6rem)}
  .hero-trust{gap:8px 14px;font-size:.78rem}
  .hero-trust li + li::before{display:none}
  .scroll-hint{bottom:20px}
}

/* ---------- 2. Marquee ---------- */
.marquee-wrap{padding:clamp(28px,4vw,44px) 0;border-bottom:1px solid var(--line);background:var(--paper)}
.marquee-track > *{color:var(--ink)}
.marquee-track > .mq-alt{color:transparent;-webkit-text-stroke:1.2px var(--ink)}
.marquee-track > .mq-alt::after{-webkit-text-stroke:0}

/* ---------- 3. Tipos de evento (bento) ---------- */
.cat-grid{display:grid;gap:clamp(14px,1.8vw,24px);grid-template-columns:1fr}
.cat-card{position:relative;display:block;border-radius:var(--radius-l);overflow:hidden;aspect-ratio:4/3;color:var(--paper);background:var(--ink-2);isolation:isolate;transform:translateZ(0)}
.cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease-out),filter .6s;z-index:-1}
.cat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,20,.05) 20%,rgba(14,15,20,.55) 62%,rgba(14,15,20,.9) 100%);z-index:-1;transition:opacity .5s}
.cat-card:hover img{transform:scale(1.07)}
.cat-body{position:absolute;inset:auto 0 0 0;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:6px;transform:translateY(8px);transition:transform .6s var(--ease-out)}
.cat-card:hover .cat-body{transform:translateY(0)}
.cat-index{font-family:var(--font-display);font-size:.7rem;letter-spacing:.22em;color:var(--ipe);font-weight:700}
.cat-body h3{font-size:clamp(1.35rem,2vw,1.8rem);letter-spacing:-.02em;color:var(--paper)}
.cat-body p{margin:0;font-size:.9rem;color:rgba(246,242,234,.72);max-width:38ch;transition:opacity .5s,transform .6s var(--ease-out)}
.cat-card:hover .cat-body p{opacity:1;transform:none}
.cat-arrow{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;background:rgba(246,242,234,.14);backdrop-filter:blur(8px);display:grid;place-items:center;font-size:1.2rem;font-weight:700;color:var(--paper);transition:background .4s,color .4s,transform .6s var(--ease-out)}
.cat-card:hover .cat-arrow{background:var(--ipe);color:var(--ink);transform:rotate(45deg)}
@media (min-width:700px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .cat-card{aspect-ratio:auto;min-height:320px}
}
@media (min-width:1024px){
  .cat-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:340px}
  .cat-wide{grid-column:span 2}
  .cat-card{min-height:0}
}
@media (min-width:1024px) and (hover:hover){
  .cat-body p{opacity:0;transform:translateY(8px)}
  .cat-card:hover .cat-body p{opacity:1;transform:none}
}

/* ---------- 5. Destaques (carrossel) ---------- */
.destaques{overflow:hidden}
.destaques-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.carousel-nav{display:flex;gap:8px}
.carousel-nav .btn-icon{font-size:1.1rem}
.carousel-wrap{position:relative}
.carousel{display:flex;gap:clamp(16px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:12px max(var(--gutter),calc((100% - var(--container))/2)) 28px;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.carousel::-webkit-scrollbar{display:none}
.carousel.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.carousel.dragging .card{pointer-events:none}
.carousel > .card{flex:0 0 min(340px,80vw);scroll-snap-align:start}
.carousel > .card .card-media{aspect-ratio:4/3}
.carousel-progress{height:2px;background:var(--line);margin:0 auto;width:min(var(--container),100% - var(--gutter)*2);border-radius:2px;overflow:hidden}
.carousel-progress i{display:block;height:100%;width:20%;background:var(--terra);border-radius:2px;transform-origin:left;transition:transform .2s linear}

/* ---------- 4. Como funciona ---------- */
.steps{position:relative;display:grid;grid-template-columns:1fr;gap:clamp(28px,3vw,40px)}
.steps-line{position:absolute;z-index:0;background:var(--line);left:27px;top:0;bottom:0;width:2px}
.steps-line i{display:block;width:100%;height:100%;background:linear-gradient(180deg,var(--terra),var(--ipe));transform:scaleY(0);transform-origin:top;transition:transform 1.6s var(--ease-out)}
.steps.in .steps-line i{transform:scaleY(1)}
.step{position:relative;z-index:1}
.step-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.step .icon-box{background:var(--paper-2);box-shadow:0 0 0 8px var(--paper);transition:background .4s,color .4s,transform .6s var(--ease-out)}
.step:hover .icon-box{background:var(--ink);color:var(--ipe);transform:rotate(-6deg)}
.step-num{position:relative;z-index:1;font-family:var(--font-display);font-weight:800;font-size:2.2rem;letter-spacing:-.04em;line-height:1;color:var(--ink);opacity:.9;background:var(--paper);padding:4px 12px 4px 4px}
.step h3{font-size:1.35rem;margin-bottom:10px}
.step p{color:var(--mist);margin:0;max-width:34ch}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(4,1fr)}
  .steps-line{left:0;right:0;top:27px;bottom:auto;width:auto;height:2px}
  .steps-line i{background:linear-gradient(90deg,var(--terra),var(--ipe));transform:scaleX(0);transform-origin:left}
  .steps.in .steps-line i{transform:scaleX(1)}
  .step-top{justify-content:flex-start;gap:14px}
  .step .icon-box{box-shadow:0 0 0 10px var(--paper)}
}

/* ---------- 6. Números + depoimento ---------- */
.numeros{position:relative;overflow:hidden;isolation:isolate}
.numeros .blob{z-index:-1}
.num-blob-1{width:40vw;height:40vw;max-width:560px;max-height:560px;right:-10vw;top:-10vw;opacity:.22}
.num-blob-2{width:36vw;height:36vw;max-width:520px;max-height:520px;left:-12vw;bottom:-14vw;opacity:.35}
.numeros-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,48px)}
.numeros-grid .stat .muted{max-width:22ch;font-size:.92rem}
.numeros-divider{margin:clamp(48px,6vw,80px) 0}
.big-quote{margin:0;max-width:1080px}
.big-quote blockquote{margin:0 0 32px;font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:clamp(1.7rem,3.6vw,3.2rem);line-height:1.18;letter-spacing:-.01em;color:var(--paper);text-wrap:balance}
.big-quote blockquote .word:nth-child(4n+2) > span{color:var(--ipe)}
.big-quote figcaption{display:flex;align-items:center;gap:16px;font-size:.95rem;line-height:1.35}
.avatar-initials{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:.95rem;letter-spacing:-.02em;flex:none}
.av-ipe{background:var(--ipe);color:var(--ink)}
.av-terra{background:var(--terra);color:#fff}
.av-cerrado{background:var(--cerrado);color:#fff}
@media (min-width:900px){.numeros-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- 7. Busco / Tenho ---------- */
.duo-grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,28px)}
.duo-card{position:relative;display:flex;align-items:flex-end;min-height:min(560px,80vh);border-radius:var(--radius-xl);overflow:hidden;color:var(--paper);background:var(--ink-2);isolation:isolate;will-change:transform}
.duo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform 1.4s var(--ease-out)}
.duo-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,15,20,.1) 0%,rgba(14,15,20,.35) 45%,rgba(14,15,20,.92) 100%)}
.duo-card:hover img{transform:scale(1.05)}
.duo-body{padding:clamp(26px,3.5vw,48px);display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:520px}
.duo-body .eyebrow{color:var(--ipe);margin-bottom:4px}
.duo-body .h2{font-size:clamp(2rem,3.6vw,3.2rem);color:var(--paper)}
.duo-body .h2 em.accent{color:var(--ipe)}
.duo-body p{color:rgba(246,242,234,.75);margin:0 0 10px;max-width:42ch}
@media (min-width:860px){.duo-grid{grid-template-columns:1fr 1fr}}

/* ---------- 8. Bairros ---------- */
.bairro-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,22px)}
.bairro-card{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--radius-l);overflow:hidden;color:var(--paper);background:var(--ink-2);isolation:isolate}
.bairro-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform 1.3s var(--ease-out)}
.bairro-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,15,20,0) 40%,rgba(14,15,20,.85) 100%)}
.bairro-card:hover img{transform:scale(1.08)}
.bairro-body{position:absolute;inset:auto 0 0 0;padding:20px;display:flex;flex-direction:column;gap:4px}
.bairro-body h3{font-size:1.25rem;letter-spacing:-.02em;color:var(--paper)}
.bairro-count{font-size:.8rem;color:rgba(246,242,234,.72);display:inline-flex;align-items:center;gap:6px}
.bairro-count::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ipe)}
.bairro-tag{position:absolute;top:14px;left:14px;padding:6px 12px;border-radius:var(--pill);background:rgba(246,242,234,.16);backdrop-filter:blur(8px);font-family:var(--font-display);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;transform:translateY(-6px);opacity:0;transition:.5s var(--ease-out)}
.bairro-card:hover .bairro-tag{transform:none;opacity:1}
@media (min-width:900px){.bairro-grid{grid-template-columns:repeat(4,1fr)}.bairro-card{aspect-ratio:3/4}}

/* ---------- 9. Depoimentos ---------- */
.testi-grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,28px)}
.testi{display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.testi::before{content:"“";position:absolute;right:22px;top:-6px;font-family:var(--font-serif);font-size:7rem;line-height:1;color:var(--paper-2);pointer-events:none}
.testi-text{font-family:var(--font-serif);font-style:italic;font-size:1.35rem;line-height:1.35;margin:0;position:relative;flex:1}
.testi-author{display:flex;align-items:center;gap:14px;font-size:.95rem;line-height:1.3;padding-top:18px;border-top:1px solid var(--line)}
@media (min-width:900px){.testi-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- 10. Blog ---------- */
.post-grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,28px)}
.post-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-s);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.post-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.post-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.post-card:hover .post-media img{transform:scale(1.06)}
.post-media .badge{position:absolute;top:14px;left:14px}
.post-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-body h3{font-size:1.25rem;letter-spacing:-.02em;line-height:1.2}
.post-body p{margin:0;font-size:.92rem}
.post-body .link{margin-top:auto;padding-top:8px;font-size:.9rem}
@media (min-width:900px){.post-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- 11. CTA final ---------- */
.cta-final{position:relative;background:var(--ipe);color:var(--ink);overflow:hidden;padding:clamp(80px,10vw,150px) 0 clamp(120px,16vw,220px)}
.cta-final .eyebrow{color:var(--ink)}
.cta-inner{display:grid;grid-template-columns:1fr;gap:48px;align-items:center;position:relative;z-index:1}
.cta-title{font-size:clamp(3rem,8.5vw,7.4rem);line-height:.92;letter-spacing:-.045em;margin:0 0 24px;text-wrap:balance}
.cta-title em.accent{color:var(--terra)}
.cta-lead{font-size:clamp(1.05rem,1.4vw,1.25rem);max-width:46ch;color:rgba(14,15,20,.72);margin-bottom:32px}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.cta-final .btn-ghost{--fg:var(--ink)}
.cta-visual{position:relative;display:none;justify-content:center}
.cta-photo{position:relative;width:min(420px,100%);border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-l);transform:rotate(-4deg)}
.cta-photo img{aspect-ratio:4/5;width:100%;object-fit:cover}
.cta-photo .badge{position:absolute;left:16px;bottom:16px}
.cta-badge{position:absolute;width:160px;height:160px;right:-10px;top:-40px;fill:var(--ink);font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.cta-giant{position:absolute;left:0;right:0;bottom:-.08em;font-family:var(--font-display);font-weight:800;font-size:clamp(5rem,19vw,19rem);letter-spacing:-.06em;line-height:.8;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(14,15,20,.22);text-align:center;pointer-events:none;user-select:none}
@media (min-width:960px){
  .cta-inner{grid-template-columns:1.2fr .8fr}
  .cta-visual{display:flex}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .scroll-hint-line i{animation:none;transform:translateY(60%)}
  .hf-inner{opacity:1;transform:none}
  .steps-line i{transform:none!important;transition:none}
  .cat-body p{opacity:1;transform:none}
}