/* ==========================================================================
   Creare Visual: o hero da repaginação (prévia de 22/10/2026), com o reel de fundo,
   enxertado no site que está no ar. Preso a #hero-creare, pra não encostar no resto
   do site; o portfólio continua o do ar.
   ========================================================================== */
#hero-creare{
  --linha:rgba(244,245,247,.12);
  --azul-fundo:#0B5EB1;
  --chao:#07080E;
  --chao-3:#121729;
  --tinta:#F4F5F7;
  --tinta-2:rgba(244,245,247,.7);
  --tinta-3:rgba(244,245,247,.5);
  --azul:#0F6DBF;
  --ciano:#20AAEE;
  --marinho:#101461;
  --diafragma:linear-gradient(115deg,var(--marinho) 0%,var(--azul) 48%,var(--ciano) 100%);
  --raio:14px;
  --ease:cubic-bezier(.22,.7,.2,1);
  --f-titulo:'Inter Tight',system-ui,sans-serif;
  --f-texto:'Inter',system-ui,sans-serif;
  --f-serif:'Instrument Serif',Georgia,serif;
}

/* ---- hero: o da repaginação, com o reel de fundo, embaixo do cabeçalho fixo do site ---- */
/* o texto alinha com o cabeçalho do site: mesmo recuo do .section-padding e largura do .container-creare */
#hero-creare{--pad:1.5rem;color:var(--tinta);font:400 16px/1.6 var(--f-texto);-webkit-font-smoothing:antialiased}
@media (min-width:768px){#hero-creare{--pad:3rem}}
@media (min-width:1024px){#hero-creare{--pad:5rem}}
@media (min-width:1280px){#hero-creare{--pad:8rem}}
#hero-creare *{-webkit-tap-highlight-color:transparent}
#hero-creare :focus:not(:focus-visible){outline:none}
#hero-creare a:focus-visible{outline:3px solid var(--ciano);outline-offset:3px}
#hero-creare svg{flex:none}
#hero-creare .wrap{width:100%;padding-inline:max(var(--pad),calc((100% - 80rem) / 2))}
#hero-creare .kicker{display:inline-flex;align-items:center;gap:12px;font:600 12px/1.2 var(--f-texto);letter-spacing:.16em;text-transform:uppercase;color:var(--ciano)}
#hero-creare .kicker::before{content:'';width:28px;height:2px;border-radius:2px;background:var(--diafragma)}
#hero-creare .h1{font:700 clamp(40px,min(6vw,10svh),84px)/1.02 var(--f-titulo);letter-spacing:-.035em;text-wrap:balance;color:var(--tinta)}
#hero-creare em.s{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
#hero-creare .grad{background:linear-gradient(115deg,#3B8FE6 0%,var(--ciano) 55%,#9BDCFB 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
#hero-creare .lead{font-size:clamp(17px,1.4vw,19px);line-height:1.6;max-width:58ch}
#hero-creare .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 24px;border-radius:999px;
  font:600 15px/1.2 var(--f-texto);white-space:nowrap;touch-action:manipulation;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
#hero-creare .btn svg{width:18px;height:18px}
#hero-creare .btn-p{background:var(--azul);color:#fff}
#hero-creare .btn-p:hover{background:var(--azul-fundo);transform:translateY(-1px)}
#hero-creare .btn-g{border:1px solid rgba(244,245,247,.35);color:var(--tinta)}
#hero-creare .btn-g:hover{background:rgba(244,245,247,.08);border-color:rgba(244,245,247,.6)}
#hero-creare .hero{position:relative;min-height:clamp(620px,100svh,960px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:var(--chao)}
#hero-creare .hero-midia{position:absolute;inset:0;z-index:-2;background:#000 url(/img/poster-reel-hd.jpg) center/cover}
#hero-creare .hero-midia video{width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:cv-respira 18s var(--ease) infinite alternate}
@keyframes cv-respira{to{transform:scale(1)}}
#hero-creare .hero::before{content:'';position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(7,8,14,.94) 0%,rgba(7,8,14,.8) 40%,rgba(7,8,14,.35) 72%,rgba(7,8,14,.15) 100%),
  linear-gradient(0deg,#000 0%,rgba(7,8,14,.7) 26%,rgba(7,8,14,0) 58%),
  linear-gradient(180deg,rgba(7,8,14,.6) 0%,rgba(7,8,14,0) 18%)}
#hero-creare .hero .wrap{padding-top:120px;padding-bottom:clamp(40px,6vw,72px)}
#hero-creare .hero h1{margin:22px 0 22px;max-width:15ch}
#hero-creare .hero h1 .l2{display:block}
#hero-creare .hero .lead{color:rgba(244,245,247,.9)}
/* o texto passa por cima de vídeo claro: sombra larga e macia, não contorno */
#hero-creare .kicker,#hero-creare h1,#hero-creare .lead,#hero-creare .creditos{text-shadow:0 1px 2px rgba(0,0,0,.45),0 4px 28px rgba(0,0,0,.55)}
#hero-creare h1 .grad{text-shadow:none;filter:drop-shadow(0 4px 22px rgba(0,0,0,.55))}
#hero-creare .hero-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
#hero-creare .creditos{margin-top:clamp(40px,6vw,72px);padding-top:22px;border-top:1px solid var(--linha);display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;
  font-size:14px;color:var(--tinta-2)}
#hero-creare .creditos span:first-child{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3);margin-right:4px}
#hero-creare .rec{position:absolute;right:max(var(--pad),calc((100% - 80rem) / 2));top:112px;display:flex;align-items:center;gap:8px;font:500 12px/1 var(--f-texto);letter-spacing:.14em;color:rgba(244,245,247,.75);text-transform:uppercase}
#hero-creare .rec i{width:8px;height:8px;border-radius:50%;background:#ff3b3b;animation:cv-pisca 1.6s steps(1) infinite}
@keyframes cv-pisca{50%{opacity:0}}
@media (max-width:700px){
  #hero-creare .hero{min-height:clamp(600px,96svh,860px)}
  #hero-creare .hero::before{background:linear-gradient(0deg,#000 0%,rgba(7,8,14,.9) 40%,rgba(7,8,14,.55) 66%,rgba(7,8,14,.4) 82%,rgba(7,8,14,.6) 100%)}
  #hero-creare .hero-midia{background-image:url(/img/poster-reel-cel-hd.jpg)}
  #hero-creare .hero-acoes .btn{flex:1 1 100%}
  #hero-creare .creditos{gap:6px 18px}
  #hero-creare .creditos span:first-child{flex:1 1 100%}
  #hero-creare .creditos span[aria-hidden]{display:none}
  #hero-creare .rec{display:none}
}

/* o cabeçalho do site fica transparente no topo, em cima do reel: letra clara até ele ficar sólido,
   em qualquer tema do aparelho. O menu aberto do celular, no topo, vira um vidro fosco sobre o reel
   (o vídeo segue aparecendo, desfocado), numa folha só do cabeçalho ao pé da tela, em vez do painel
   branco do site, que estourava em cima do vídeo; descendo a página, volta ao do site */
header.bg-transparent>.section-padding,header.bg-transparent>div.absolute{color:#FAFAFA}
header.bg-transparent .text-foreground\/80{color:rgba(250,250,250,.85)}
header.bg-transparent>.section-padding button:hover{background:rgba(250,250,250,.14)}
header.bg-transparent a.bg-muted{background:rgba(250,250,250,.14);color:#FAFAFA}
header.bg-transparent a.bg-muted:hover{background:#0061FF}
header.bg-transparent>div.absolute{background:transparent;border-color:transparent;box-shadow:none;min-height:calc(100svh - 100%)}
header.bg-transparent:has(>div.absolute)::before{content:'';position:absolute;inset:0 0 auto;height:100svh;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,8,14,.42) 0%,rgba(7,8,14,.5) 45%,rgba(7,8,14,.72) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);animation:cv-vidro .3s cubic-bezier(.22,.7,.2,1)}
@keyframes cv-vidro{from{opacity:0}}
header.bg-transparent>div.absolute nav>a.text-foreground\/80{text-shadow:0 1px 12px rgba(0,0,0,.35)}
header.bg-transparent>div.absolute nav>a.text-foreground\/80:hover{color:#20AAEE}
/* sem contorno no botão do menu, nem no toque nem no clique; pelo teclado ele ganha o fundo claro */
header button:focus{outline:none;box-shadow:none}
header.bg-transparent button:focus-visible{background:rgba(250,250,250,.14)}

/* aviso de cookies do site, mais compacto (classes postas pelo remendar.js) */
.cv-cookies-pos{padding:.75rem}
.cv-cookies>div{padding:.75rem .9rem!important}
.cv-cookies>div>div:first-child{margin-bottom:.6rem}
.cv-cookies h3{margin-bottom:.15rem}
.cv-cookies button{padding:.45rem .75rem!important;border-radius:.6rem!important;font-size:.8125rem!important}
@media (min-width:768px){
  .cv-cookies-pos{padding:0}
  .cv-cookies{max-width:20rem!important}
}

@media (prefers-reduced-motion:reduce){
  #hero-creare *{animation:none!important;transition:none!important}
}