/* =====================================================================
   ARCO · arco-public-polish.css
   Camada final de acabamento do SITE PÚBLICO (carregar por último).
   Não altera identidade, cores, logo, camaleão nem rotas.
   Foco: vídeo da vinheta, imagens verticais sem cortar cabeça,
   encaixe desktop, botões/WhatsApp, setas refinadas, animações,
   header mobile, formulário, rodapé e página de obrigado.
   Sem estilos inline (respeita o CSP do projeto).
   ===================================================================== */

:root{
  --arco-purple:#4B355F;
  --arco-deep:#2D2039;
  --arco-deeper:#21162B;
  --arco-yellow:#F3D112;
  --arco-cream:#F8F5EF;
  --arco-muted:#6F6675;
  --arco-ink:#111111;
  --arco-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------------
   0. Base / segurança geral
   --------------------------------------------------------------------- */
html{scroll-behavior:smooth}
img,video{max-width:100%}
/* Decorativos nunca capturam clique nem cobrem o texto */
.hero-v3__glow,.hero-v3__mark,.reading:before,.offer:before{pointer-events:none;z-index:0}
.hero-v3__copy,.route-card__content,.manifesto-v3__copy,.section-heading,
.capability-card,.explore-card,.method-v3__intro,.contact-v3__copy{position:relative;z-index:2}

/* =====================================================================
   1. VINHETA / VÍDEO DA LOGO  (mobile + desktop)
   Vídeo visível, quadrado, logo sem cortar, object-fit:contain,
   sem blur pesado, sem opacidade baixa, sem overlay escuro.
   Fallback automático para a imagem da logo (.video-failed).
   ===================================================================== */
.brand-stage{
  width:min(82vw,400px);
  aspect-ratio:1/1;
  margin:auto;
  position:relative;
  display:grid;
  place-items:center;
  padding:14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:30px;
  background:linear-gradient(150deg,#3a2a4d 0%,#2d2039 60%,#21162b 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.34);
  overflow:hidden;
}
/* remove o bloco/quina agressivo e o véu escuro anteriores */
.brand-stage::after{display:none !important;}
.brand-stage__veil{display:none !important;}

/* vídeo agora é o protagonista: nítido, inteiro, centralizado */
.brand-stage .brand-video{
  position:absolute !important;
  inset:14px !important;
  width:calc(100% - 28px) !important;
  height:calc(100% - 28px) !important;
  object-fit:contain !important;
  object-position:center !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
  background:transparent !important;
  border-radius:18px;
  z-index:1;
}

/* logo só aparece como fallback (quando o vídeo falha) */
.brand-stage__logo{
  position:relative;
  z-index:2;
  width:62%;
  height:auto;
  aspect-ratio:auto;
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  opacity:0;
  visibility:hidden;
  transition:opacity .4s var(--arco-ease);
}
.brand-stage.video-failed .brand-video{display:none !important;}
.brand-stage.video-failed .brand-stage__logo{opacity:1;visibility:visible;}

.brand-stage__caption{
  position:absolute;
  z-index:3;
  left:18px;
  bottom:14px;
  color:rgba(255,255,255,.62);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.14em;
}

/* leve presença viva, discreta (respeita reduced-motion mais abaixo) */
.brand-stage{animation:arco-stage-in .9s var(--arco-ease) both}
@keyframes arco-stage-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* =====================================================================
   2. IMAGENS VERTICAIS / RETRATOS — nunca cortar cabeça
   ===================================================================== */
/* utilitários pedidos no briefing */
.portrait-safe img,.story-safe img,.vertical-media.cover-safe img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
}
.vertical-media.contain img,.editorial-card--portrait img{
  object-fit:contain !important;object-position:center !important;
}

/* Home — cards de caminho: preserva o topo (rosto) */
.route-card figure{background:linear-gradient(160deg,#3a2a4d,#21162b)}
.route-card figure img{object-position:center top !important;}

/* Home — editorial/stories: molduras premium, foco no topo da imagem */
.editorial-card>div{background:linear-gradient(160deg,#3a2a4d,#21162b)}
.editorial-card img{object-position:center top !important;}
/* o retrato vertical central exibido inteiro, sem corte */
.editorial-card:nth-child(2) img,
.editorial-card:nth-child(3) img{object-fit:contain !important;object-position:center !important;}

/* Páginas internas — hero em retrato: imagem inteira, emoldurada */
.page-hero .portrait-card{background:rgba(255,255,255,.05)}
.page-hero .vertical-media{max-height:560px}
.page-hero .vertical-media img,
.founder .portrait-card .vertical-media img{
  object-fit:contain !important;object-position:center !important;
}
/* asset dinâmico vertical sem corte */
.section-asset.vertical img,.section-asset.portrait img{object-fit:contain !important}

/* =====================================================================
   3. HEADER MOBILE — limpo, baixo, menu suave
   ===================================================================== */
@media(max-width:1079px){
  .site-header{height:64px;min-height:64px;padding:10px clamp(14px,4vw,22px);gap:10px}
  .site-header .brand img{width:38px;height:38px}
  .site-header .brand span{font-size:15px}

  /* menu desliza suave em vez de aparecer seco */
  .site-header nav{
    display:block;
    top:64px;left:12px;right:12px;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .26s var(--arco-ease),transform .26s var(--arco-ease),visibility .26s;
  }
  .site-header nav.open{opacity:1;visibility:visible;transform:none}
  .site-header nav a{font-size:15px}

  /* botão hambúrguer vira X */
  .nav-toggle span{transition:transform .25s var(--arco-ease),opacity .2s}
  .nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

  /* CTA visível sem esmagar o layout */
  .header-cta{padding:9px 12px;font-size:10px;white-space:nowrap}
}
@media(max-width:360px){
  .header-cta .cta-label{display:none}      /* em telas mínimas, só o ícone */
  .header-cta{padding:9px;border-radius:50%}
}

/* ícone WhatsApp dentro de botões */
.wa-ico{width:1.05em;height:1.05em;flex:0 0 auto;fill:currentColor}
.header-cta{display:inline-flex;align-items:center;gap:7px}

/* =====================================================================
   4. BOTÕES PREMIUM + SETAS REFINADAS (sem caractere solto)
   ===================================================================== */
.btn{transition:transform .25s var(--arco-ease),box-shadow .25s var(--arco-ease),background .25s,color .25s;gap:8px}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(243,209,18,.34)}
.btn.outline:hover{background:rgba(255,255,255,.10)}
.btn.dark-button:hover,.btn.dark-button:focus-visible{transform:translateY(-2px);box-shadow:0 16px 34px rgba(33,22,43,.4)}

/* seta minimalista desenhada em CSS (chevron) */
.btn.arrow::after,
.text-link::after,
.route-card b::after,
.explore-card b::after,
.capability-card a::after,
.contact-v3__copy>a::after,
.contact-section .text-link::after{
  content:"";
  display:inline-block;
  width:7px;height:7px;
  margin-left:9px;
  border-right:2px solid currentColor;
  border-top:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .25s var(--arco-ease);
  vertical-align:middle;
}
.btn.arrow:hover::after,
.text-link:hover::after,
.route-card:hover b::after,
.explore-card:hover b::after,
.capability-card a:hover::after,
.contact-v3__copy>a:hover::after{transform:rotate(45deg) translate(2px,-2px)}

/* indicador de rolagem do hero (substitui o ↓ solto) */
.hero-v3__scroll{align-items:center}
.hero-v3__scroll::after{
  content:"";width:7px;height:7px;margin-left:2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  animation:arco-bounce 1.8s var(--arco-ease) infinite;
}
@keyframes arco-bounce{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(3px)}}

/* setas do carrossel editorial desenhadas em CSS */
.story-controls button{position:relative;font-size:0;color:var(--arco-deep)}
.story-controls button::before{
  content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
}
.story-controls button[data-story-prev]::before{transform:translateX(2px) rotate(45deg)}
.story-controls button[data-story-next]::before{transform:translateX(-2px) rotate(-135deg)}
.story-controls button:hover{background:var(--arco-cream)}

/* círculo de navegação das páginas internas (substitui ↗) */
.page-journey__links b{font-size:0}
.page-journey__links b::after{
  content:"";width:8px;height:8px;
  border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg);
}

/* =====================================================================
   5. ENCAIXE DESKTOP — respiro premium, sem sobreposição
   ===================================================================== */
@media(min-width:760px){
  .hero-v3{align-items:center}
  .hero-v3__copy{max-width:760px}
  .brand-stage{width:min(34vw,440px)}
  /* nada de texto invadindo imagem nos route-cards */
  .route-card{align-items:stretch}
  .route-card figure{min-height:100%}
  /* método: respiro entre coluna de texto e accordion */
  .method-v3{align-items:start}
}
@media(min-width:1100px){
  .hero-v3{gap:6vw}
  .section{padding-left:8vw;padding-right:8vw}
}
/* moldura do manifesto: camaleão não estoura o container */
.manifesto-v3__art img{object-position:center}

/* =====================================================================
   6. ANIMAÇÕES SUAVES (entrada de seções + hover)
   ===================================================================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--arco-ease),transform .7s var(--arco-ease);will-change:opacity,transform}
.reveal.visible{opacity:1;transform:none}
/* leve escalonamento dos cards em grade */
.route-grid .reveal:nth-child(2){transition-delay:.08s}
.capability-grid .reveal:nth-child(2){transition-delay:.06s}
.capability-grid .reveal:nth-child(3){transition-delay:.12s}
.explore-grid .reveal:nth-child(2){transition-delay:.06s}
.explore-grid .reveal:nth-child(3){transition-delay:.12s}
.editorial-grid .reveal:nth-child(2){transition-delay:.06s}
.editorial-grid .reveal:nth-child(3){transition-delay:.12s}

/* hover discreto reforçado */
.capability-card,.explore-card,.route-card{will-change:transform}
.floating-wa{transition:transform .25s var(--arco-ease),box-shadow .25s var(--arco-ease)}
.floating-wa:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 18px 42px rgba(0,0,0,.3)}

/* =====================================================================
   7. FORMULÁRIO — campos grandes, foco claro, botão forte
   ===================================================================== */
.lead-form{gap:18px}
.lead-form label{font-size:12.5px;letter-spacing:.02em}
.lead-form input,
.lead-form select,
.lead-form textarea{
  margin-top:8px;
  padding:15px 16px;
  font-size:16px;                 /* evita zoom no iOS */
  border:1px solid #ded6df;
  border-radius:14px;
  background:#fbfaf8;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus{
  outline:none;
  border-color:var(--arco-purple);
  background:#fff;
  box-shadow:0 0 0 3px rgba(75,53,95,.14);
}
.lead-form textarea{resize:vertical;min-height:118px}
.lead-form button.btn{min-height:56px;font-size:15px}
@media(max-width:759px){
  .lead-form{padding:22px}
  .lead-form input,.lead-form select,.lead-form textarea{padding:16px}
}

/* =====================================================================
   8. RODAPÉ — limpo, espaçado, WhatsApp como ícone
   ===================================================================== */
.site-footer{row-gap:30px}
.site-footer nav a{transition:color .2s,padding-left .2s}
.site-footer nav a:hover{color:#fff;padding-left:4px}
.floating-wa{font-size:0}                 /* remove o ↗ caso ainda exista */
.floating-wa .wa-ico{width:26px;height:26px;fill:var(--arco-deep)}

/* =====================================================================
   9. PÁGINA OBRIGADO — identidade premium
   ===================================================================== */
.thanks{background:radial-gradient(120% 90% at 50% 0%,#3a2a4d 0%,#2d2039 55%,#21162b 100%)}
.thanks main{padding:30px 22px}
.thanks img{box-shadow:0 18px 50px rgba(0,0,0,.32)}
.thanks h1{font-size:clamp(32px,9vw,52px);line-height:1.04;letter-spacing:-.03em}
.thanks .actions{display:flex;flex-direction:column;gap:14px;align-items:center;margin-top:30px}
.thanks .btn{min-width:min(320px,82vw)}
.thanks .btn.whatsapp{background:var(--arco-yellow);color:var(--arco-deep)}
.thanks .back{color:rgba(255,255,255,.66);font-weight:600}
.thanks .back:hover{color:#fff}

/* =====================================================================
   10. prefers-reduced-motion — sem exageros
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .brand-stage{animation:none}
  .hero-v3__scroll::after{animation:none}
  .btn,.floating-wa,.capability-card,.explore-card,.route-card{transition:none}
}