/* ============================================================================
   FOUP · foup-premium.css  —  CAMADA PREMIUM (publicada site-wide, incondicional)
   Âncora de gosto (refs Thales): cards arredondados, paleta da marca
   (laranja #FCBC1A / navy #09355D / branco), minimalista, MUITO respiro.
   Glass com tint sutil da marca. Motion sutil. Fontes da marca preservadas.
   Escopo: NAV + globais de marca = todas as páginas; regras específicas da home
   ficam sob body.fp-home (classe posta pelo JS só quando existe #home-hero).
   Progressive enhancement: estados de reveal só sob html.fp-ready (JS).
   Conteúdo, Arquitetura de Informação e links intactos.
   ============================================================================ */

:root{
  /* — cores da marca — */
  --fp-orange:#FCBC1A; --fp-orange-2:#fb8500; --fp-orange-soft:rgba(252,188,26,.14);
  --fp-navy:#09355D;          /* navy DA MARCA — cards, texto, acentos */
  --fp-navy-2:#0c4474;        /* navy claro p/ gradientes */
  --fp-navy-deep:#06223c;     /* navy profundo p/ contraste / feather do herói */
  --fp-navy-soft:rgba(9,53,93,.08);
  --fp-teal:#0f74a8;
  --fp-ink:#0a1020; --fp-paper:#ffffff;
  /* — raios — */
  --fp-r-sm:10px; --fp-r:14px; --fp-r-lg:22px; --fp-radius:22px; --fp-r-pill:999px;
  /* — sombras (tint navy da marca) — */
  --fp-sh-sm:0 4px 14px rgba(9,53,93,.08);
  --fp-sh:0 14px 40px rgba(9,53,93,.10);
  --fp-sh-lg:0 24px 56px rgba(9,53,93,.16);
  /* — motion — */
  --fp-e-out:cubic-bezier(.16,1,.3,1); --fp-e-io:cubic-bezier(.65,.05,.36,1);
  --fp-dur:.3s; --fp-dur-slow:.55s;
  --fp-ring:0 0 0 3px rgba(252,188,26,.55);   /* focus ring da marca */
  /* — tipografia fluida (fontes da marca preservadas) — */
  --fp-h1:clamp(2.4rem,9vw,5.5rem);
  --fp-h2:clamp(1.9rem,6vw,3.4rem);
  --fp-lead:clamp(1.02rem,2.6vw,1.3rem);
}

/* ============================================================================
   GLOBAIS DE MARCA — cada detalhe personalizado (premium-wide)
   ============================================================================ */
/* seleção de texto */
::selection{ background:var(--fp-orange); color:var(--fp-navy); }
::-moz-selection{ background:var(--fp-orange); color:var(--fp-navy); }
/* focus-visible acessível na cor da marca */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,.offcanvas-nav .nav-link:focus-visible,
.swiper-pagination-bullet:focus-visible,.hamburger:focus-visible{
  outline:2px solid var(--fp-orange) !important; outline-offset:2px; border-radius:var(--fp-r-sm);
}
/* scrollbar da marca */
html{ scrollbar-color:var(--fp-navy) rgba(9,53,93,.07); scrollbar-width:thin; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:rgba(9,53,93,.06); }
::-webkit-scrollbar-thumb{ background:var(--fp-navy); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--fp-orange-2); }   /* border/clip herdados da base — não repetir */
/* links de conteúdo: hover na marca */
.content-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.more):not(.navbar-brand){ transition:color .25s var(--fp-e-out); }
.content-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.more):not(.navbar-brand):hover{ color:var(--fp-orange-2) !important; }
/* botões — estados completos */
.btn:disabled,.btn.disabled{ opacity:.5; filter:grayscale(.2); cursor:not-allowed; transform:none !important; }
.btn-primary,.btn-orange{ box-shadow:0 .4rem 1rem rgba(252,188,26,.22); }
.btn-primary:hover,.btn-orange:hover{ box-shadow:0 .7rem 1.5rem rgba(252,188,26,.32); }
.btn-outline-primary:hover,.btn-outline-dark:hover{ box-shadow:var(--fp-sh-sm); }
/* badges */
.badge.border-dark{ border-color:rgba(9,53,93,.28) !important; color:var(--fp-navy) !important; border-radius:var(--fp-r-pill) !important; }
/* dividers */
hr{ border-color:rgba(9,53,93,.12); opacity:1; }
.dropdown-divider{ border-color:rgba(9,53,93,.12); }
/* swiper bullets na cor da marca */
.swiper-pagination-bullet{ background:var(--fp-navy) !important; opacity:.22; transition:opacity .3s var(--fp-e-out),transform .3s var(--fp-e-out); }
.swiper-pagination-bullet-active{ background:var(--fp-orange) !important; opacity:1; transform:scale(1.25); }
/* inputs / formulários (quando houver) */
.content-wrapper input:not([type=checkbox]):not([type=radio]):not([type=range]),
.content-wrapper textarea,.content-wrapper select{ border-radius:var(--fp-r-sm); transition:border-color .25s var(--fp-e-out),box-shadow .25s var(--fp-e-out); }
.content-wrapper input:not([type=checkbox]):not([type=radio]):focus,
.content-wrapper textarea:focus,.content-wrapper select:focus{ border-color:var(--fp-orange) !important; box-shadow:var(--fp-ring) !important; outline:none !important; }
.content-wrapper ::placeholder{ color:rgba(9,53,93,.42); opacity:1; }
/* link "Ver Todas / more" — sublinhado da marca */
.more.link-yellow,.text-orange{ color:var(--fp-orange-2) !important; }

/* ---- Smooth scroll base (Lenis) ---- */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---- Grão/textura sutil global (perf-safe, pointer-events none) ---- */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Tipografia fluida + ritmo generoso (mobile) ---- */
@media (max-width:991.98px){
  #content-wrapper h1,.display-1{ font-size:var(--fp-h1) !important; line-height:1.02 !important; letter-spacing:-.02em; }
  section h2,.display-2,.display-3,.display-4,.display-5{ font-size:var(--fp-h2) !important; line-height:1.08 !important; letter-spacing:-.015em; }
  section p.lead{ font-size:var(--fp-lead) !important; line-height:1.6 !important; }
  h1,h2,h3{ overflow-wrap:anywhere; }
}

/* ============================================================================
   NAVBAR — vidro fino e delicado
   · Desktop: barra horizontal completa (intacta) + véu de vidro sutil
   · Mobile : SEM barra cheia — só um gatilho glass flutuante (pílula hambúrguer)
   ============================================================================ */
.navbar{ padding-top:.16rem !important; padding-bottom:.16rem !important; min-height:0 !important; }
.navbar .nav-link{ padding-top:.4rem !important; padding-bottom:.4rem !important; transition:color .25s var(--fp-e-out); }
.navbar .nav-link:hover{ color:var(--fp-orange-2) !important; }
.navbar .nav-link.active{ position:relative; color:var(--fp-orange-2) !important; }
.navbar .nav-link.active::after{ content:""; position:absolute; left:.7rem; right:.7rem; bottom:.14rem; height:2px; background:var(--fp-orange); border-radius:2px; }
.navbar .dropdown-menu{ border-radius:16px !important; overflow:hidden; }
.navbar .navbar-brand img{ width:46px !important; height:auto !important; }
@media (min-width:992px){ .navbar .navbar-brand img{ width:58px !important; } }

/* topo (sobre o herói escuro): véu de vidro claro warm-white + whisper de marca */
#navbar .navbar.transparent:not(.navbar-clone){
  top:.7rem !important; left:1rem !important; right:1rem !important; width:auto !important;
  padding:.2rem 1.1rem !important; border-radius:20px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07)) !important;
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 8px 26px rgba(6,17,34,.16), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(252,188,26,.10) !important;
}

/* DESKTOP: nav BASE (topo, sobre o herói) = TRANSPARENTE — sem véu/barra opaca, a imagem do herói
   aparece atrás. A pílula branca compacta continua SÓ no scroll (.navbar-clone.fixed). */
@media (min-width:992px){
  #navbar .navbar.transparent:not(.navbar-clone){
    top:0 !important; left:0 !important; right:0 !important; width:100% !important;
    padding:.55rem 1.4rem !important; border-radius:0 !important;
    background:transparent !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    border:0 !important; box-shadow:none !important;
  }
  /* legibilidade do texto/logo branco sobre a imagem (sem barra) */
  #navbar .navbar.transparent:not(.navbar-clone) .nav-link{ text-shadow:0 1px 10px rgba(0,0,0,.45); }
  #navbar .navbar.transparent:not(.navbar-clone) .navbar-brand img{ filter:drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
}

/* clone fixo (aparece no scroll) = vidro claro sobre conteúdo */
.navbar-clone.fixed{
  top:.6rem !important; left:1rem !important; right:1rem !important; width:auto !important;
  padding:.12rem 1.1rem !important; border-radius:18px !important;
  background:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.7) !important;
  box-shadow:0 10px 30px rgba(9,53,93,.12), inset 0 1px 0 rgba(255,255,255,.6) !important;
  transition:transform .55s var(--fp-e-out), box-shadow .4s var(--fp-e-out);
}
.navbar-clone.fixed.fp-nav-hidden{ transform:translate3d(0,calc(-100% - 1.4rem),0); }
.navbar-clone.fixed .logo-light{ display:none !important; }
.navbar-clone.fixed .logo-dark{ display:inline-block !important; }
.navbar-clone.fixed .nav-link{ color:var(--fp-navy) !important; }
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .navbar-clone.fixed{ background:rgba(255,255,255,.96) !important; }
  #navbar .navbar.transparent:not(.navbar-clone){ background:rgba(9,53,93,.42) !important; }
}

/* ============================================================================
   NAV DESKTOP PREMIUM (≥992px) — dropdowns elegantes, hover/active na marca,
   underline animada, sticky COMPACTO no scroll, tipografia/espaçamento premium.
   Coerente com o mobile. (Estrutura, links e Arquitetura de Informação intactos.)
   ============================================================================ */
@media (min-width:992px){
  /* tipografia + espaçamento dos itens */
  #navbar .navbar .navbar-nav .nav-link{
    font-weight:600 !important; letter-spacing:.004em; font-size:.9rem !important;
    padding:.5rem .74rem !important; position:relative; border-radius:10px;
    transition:color .22s var(--fp-e-out), background .22s var(--fp-e-out) !important;
  }
  /* underline animada na marca (hover / item aberto / ativo) */
  #navbar .navbar .navbar-nav .nav-link::after{
    content:""; position:absolute; left:.74rem; right:.74rem; bottom:.2rem; height:2px;
    background:linear-gradient(90deg,var(--fp-orange),var(--fp-orange-2)); border-radius:2px;
    transform:scaleX(0); transform-origin:left; transition:transform .26s var(--fp-e-out);
  }
  #navbar .navbar .navbar-nav .nav-link:hover::after,
  #navbar .navbar .navbar-nav .nav-link.active::after,
  #navbar .navbar .navbar-nav .nav-item.dropdown:hover > .nav-link::after{ transform:scaleX(1); }
  #navbar .navbar .navbar-nav .nav-link:hover,
  #navbar .navbar .navbar-nav .nav-item.dropdown:hover > .nav-link{ color:var(--fp-orange-2) !important; }

  /* DROPDOWNS elegantes — card de vidro claro, cantos, sombra, itens com hover de marca */
  #navbar .navbar .nav-item.dropdown{ position:relative; }
  #navbar .navbar .dropdown-menu{
    margin-top:.45rem !important; padding:.5rem !important; min-width:14.5rem;
    border:1px solid rgba(9,53,93,.08) !important; border-radius:16px !important;
    background:rgba(255,255,255,.92) !important;
    -webkit-backdrop-filter:blur(22px) saturate(180%) !important; backdrop-filter:blur(22px) saturate(180%) !important;
    box-shadow:0 18px 50px rgba(9,53,93,.18), inset 0 1px 0 rgba(255,255,255,.7) !important;
    overflow:visible !important;
  }
  /* PONTE DE HOVER: cobre o vão item↔dropdown — o mouse não "escapa" no vão; subitens ficam clicáveis */
  #navbar .navbar .nav-item.dropdown > .dropdown-menu::before{
    content:""; position:absolute; left:0; right:0; top:-.6rem; height:.65rem;
  }
  #navbar .navbar .dropdown-menu .dropdown-item{
    border-radius:10px !important; padding:.55rem .8rem !important; font-size:.86rem !important;
    font-weight:500 !important; color:var(--fp-navy) !important; white-space:normal; line-height:1.3;
    transition:background .2s var(--fp-e-out), color .2s var(--fp-e-out), padding-left .2s var(--fp-e-out) !important;
  }
  #navbar .navbar .dropdown-menu .dropdown-item:hover,
  #navbar .navbar .dropdown-menu .dropdown-item:focus{
    background:rgba(252,188,26,.15) !important; color:var(--fp-orange-2) !important; padding-left:1.05rem !important;
  }
  #navbar .navbar .dropdown-menu.show{ animation:fpDD .26s var(--fp-e-out); }
  @keyframes fpDD{ from{ opacity:0; transform:translateY(-7px); } to{ opacity:1; transform:none; } }

  /* STICKY COMPACTO no scroll — clone com logo + padding reduzidos (sensação de compactar) */
  .navbar-clone.fixed{ padding-top:.02rem !important; padding-bottom:.02rem !important; }
  .navbar-clone.fixed .navbar-brand img{ width:44px !important; transition:width .3s var(--fp-e-out); }
  .navbar-clone.fixed .navbar-nav .nav-link{ padding-top:.42rem !important; padding-bottom:.42rem !important; }
  .navbar-clone.fixed .navbar-nav .nav-link:hover,
  .navbar-clone.fixed .navbar-nav .nav-item.dropdown:hover > .nav-link{ color:var(--fp-orange-2) !important; }

  /* Faça Parte (desktop) — botão premium na marca */
  #navbar .navbar .fp-faca, #navbar .navbar a.btn-orange{
    box-shadow:0 6px 18px rgba(252,188,26,.32) !important;
    transition:transform .2s var(--fp-e-out), box-shadow .2s var(--fp-e-out) !important;
  }
  #navbar .navbar .fp-faca:hover, #navbar .navbar a.btn-orange:hover{ transform:translateY(-2px); box-shadow:0 9px 24px rgba(252,188,26,.42) !important; }
}

/* ---- MOBILE: gatilho glass flutuante (sem barra cheia) ---- */
@media (max-width:991.98px){
  #navbar .navbar.transparent:not(.navbar-clone),
  .navbar-clone.fixed{
    background:transparent !important; border:0 !important; box-shadow:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    padding:0 !important; top:.7rem !important; left:.7rem !important; right:.7rem !important;
  }
  /* logo da barra escondida no mobile (a marca já aparece no herói) */
  .navbar .navbar-brand{ display:none !important; }
  /* pílula gatilho — vidro com tint sutil da marca */
  .hamburger.offcanvas-nav-btn{
    width:48px !important; height:48px !important; padding:0 !important; margin-top:.25rem;
    display:inline-flex !important; align-items:center; justify-content:center; border-radius:16px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.08)) !important;
    -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
    border:1px solid rgba(255,255,255,.24) !important;
    box-shadow:0 6px 20px rgba(6,17,34,.22), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(252,188,26,.18) !important;
    transition:transform .25s var(--fp-e-out), background .3s var(--fp-e-out);
  }
  .hamburger.offcanvas-nav-btn:active{ transform:scale(.93); }
  /* clone (scroll) sobre conteúdo claro: pílula clara + linhas navy */
  .navbar-clone.fixed .hamburger.offcanvas-nav-btn{
    background:rgba(255,255,255,.76) !important; border:1px solid rgba(9,53,93,.10) !important;
    box-shadow:0 8px 22px rgba(9,53,93,.16), inset 0 1px 0 rgba(255,255,255,.7) !important;
  }
  .navbar-clone.fixed .hamburger span,
  .navbar-clone.fixed .hamburger span::before,
  .navbar-clone.fixed .hamburger span::after{ background:var(--fp-navy) !important; }
}

/* ============================================================================
   MENU MOBILE (offcanvas) — vidro claro minimalista + ACCORDION (paridade desktop)
   ============================================================================ */
@media (max-width:991.98px){
  .offcanvas-nav{
    width:min(87vw,372px) !important; max-width:372px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88)) !important;
    -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
    border:0 !important; border-right:1px solid rgba(252,188,26,.20) !important;
    border-radius:0 30px 30px 0 !important; box-shadow:0 12px 60px rgba(9,53,93,.20) !important;
    height:100dvh !important; max-height:100dvh !important; top:0 !important; bottom:0 !important;
    overflow-y:auto !important; display:flex !important; flex-direction:column !important;
    padding:.5rem .6rem 1.1rem !important;
  }
  @supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .offcanvas-nav{ background:#fff !important; }
  }
  .offcanvas-nav .offcanvas-header{ padding:.7rem .55rem .25rem !important; }
  .offcanvas-nav .offcanvas-header h3{ color:var(--fp-navy) !important; font-weight:700; letter-spacing:.02em; }
  .offcanvas-nav .offcanvas-header .logo-light{ display:none !important; }
  .offcanvas-nav .offcanvas-header .logo-dark{ display:inline-block !important; }
  /* botão fechar (X): o tema usa btn-close-white (glifo branco) = invisível no painel claro.
     filter:none reverte pro X ESCURO padrão do Bootstrap + área de toque maior. */
  .offcanvas-nav .offcanvas-header .btn-close,
  .offcanvas-nav .offcanvas-header .btn-close-white{ filter:none !important; opacity:.7 !important; padding:.85rem !important; background-size:1rem !important; }
  .offcanvas-nav .offcanvas-header .btn-close:hover,
  .offcanvas-nav .offcanvas-header .btn-close-white:hover{ opacity:1 !important; }
  .offcanvas-nav .offcanvas-footer,.offcanvas-nav .offcanvas-footer *{ color:var(--fp-navy) !important; }
  .offcanvas-nav .offcanvas-footer a{ color:var(--fp-orange-2) !important; }

  .offcanvas-nav .nav-link,.offcanvas-nav .dropdown-item{
    min-height:48px; display:flex; align-items:center;
    border-radius:14px; font-weight:500; padding:.2rem .8rem !important; letter-spacing:.004em;
  }
  /* COR navy com especificidade alta — vence o navbar-dark do tema (clone incluso) */
  .offcanvas-nav .navbar-nav li .nav-link,
  .offcanvas-nav .navbar-nav li .dropdown-item{ color:var(--fp-navy) !important; }
  .offcanvas-nav .navbar-nav li .nav-link:hover,
  .offcanvas-nav .navbar-nav li .nav-link.active,
  .offcanvas-nav .navbar-nav li .dropdown-item:hover{ color:var(--fp-orange-2) !important; background:rgba(252,188,26,.14); }
  .offcanvas-nav .navbar-nav li .nav-link.dropdown-toggle::after{ border-top-color:currentColor; opacity:.7; }
  /* personalização MODERNA dos itens: barra-accent laranja deslizante + leve indent (hover/aberto/ativo) */
  .offcanvas-nav .navbar-nav li > .nav-link{ position:relative !important; transition:background .22s var(--fp-e-out),color .22s var(--fp-e-out),padding-left .22s var(--fp-e-out) !important; }
  .offcanvas-nav .navbar-nav li > .nav-link::before{
    content:""; position:absolute; left:.32rem; top:50%; transform:translateY(-50%) scaleY(0);
    width:3px; height:52%; border-radius:3px; background:linear-gradient(180deg,var(--fp-orange),var(--fp-orange-2));
    transition:transform .26s var(--fp-e-out); transform-origin:center;
  }
  .offcanvas-nav .navbar-nav li > .nav-link:hover::before,
  .offcanvas-nav .navbar-nav li.fp-open > .nav-link::before,
  .offcanvas-nav .navbar-nav li > .nav-link.active::before{ transform:translateY(-50%) scaleY(1); }
  .offcanvas-nav .navbar-nav li > .nav-link:hover{ padding-left:1.05rem !important; }
  .offcanvas-nav .navbar-nav li.fp-open > .nav-link{ color:var(--fp-orange-2) !important; background:rgba(252,188,26,.10); }

  /* ACCORDION — submenus = todas as sub-opções do desktop. Exclui language-select (Bootstrap). */
  .offcanvas-nav .nav-item.dropdown:not(.language-select) > .dropdown-menu{
    display:none !important; position:static !important; float:none !important; transform:none !important;
    inset:auto !important; border:0 !important; box-shadow:none !important; background:transparent !important;
    margin:0 !important; padding:.1rem 0 .5rem .95rem !important; min-width:0 !important;
    opacity:1 !important; visibility:visible !important;
  }
  .offcanvas-nav .nav-item.dropdown.fp-open > .dropdown-menu{ display:block !important; animation:fpSub .34s var(--fp-e-out); }
  @keyframes fpSub{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
  .offcanvas-nav .nav-item.dropdown:not(.language-select) > .dropdown-toggle::after{ margin-left:auto; transition:transform .3s var(--fp-e-out); }
  .offcanvas-nav .nav-item.dropdown.fp-open > .dropdown-toggle::after{ transform:rotate(180deg); }
  .offcanvas-nav .dropdown-menu .dropdown-item{ font-size:.92rem; min-height:44px; opacity:.92; white-space:normal !important; line-height:1.25; padding-right:.4rem !important; }
  .offcanvas-nav .dropdown-menu .dropdown-item:hover{ color:var(--fp-orange-2) !important; background:rgba(252,188,26,.12); }
}

/* ============================================================================
   HERÓI — layout de PRODUÇÃO mantido; imagem nova (IMG_9143) como CARD flutuante
   delicado: inset sutil da borda + cantos arredondados + sombra + marca d'água atrás.
   (Mobile/phone. Desktop = produção intacta.)
   ============================================================================ */

/* ============================================================================
   ÂNCORA DE GOSTO — cards arredondados + respiro + sombras suaves da marca
   ============================================================================ */
body.fp-home .card{ border-radius:var(--fp-radius) !important; }
/* mesma sombra suave/difusa nos cards do carrossel (coerência, sem corte aparente) */
body.fp-home section.wrapper .card{ box-shadow:0 1px 2px rgba(9,53,93,.045), 0 6px 14px rgba(9,53,93,.05), 0 16px 34px rgba(9,53,93,.055), 0 34px 70px rgba(9,53,93,.06) !important; }

/* ============================================================================
   SISTEMA DE REVEAL (GSAP/IO) — estados iniciais só sob html.fp-ready
   ============================================================================ */
html.fp-ready .fp-reveal{ opacity:0; transform:translateY(26px); }
html.fp-ready .fp-reveal.fp-in{ opacity:1; transform:none; transition:opacity .9s var(--fp-e-out),transform .9s var(--fp-e-out); transition-delay:var(--fp-d,0ms); }
/* botões / cards — micro-interações sutis */
.btn{ transition:transform .3s var(--fp-e-out),box-shadow .3s var(--fp-e-out),background-color .3s var(--fp-e-out),color .3s var(--fp-e-out); }
.btn:active{ transform:scale(.97); }
@media (hover:hover){
  .btn:hover{ transform:translateY(-2px); }
  .card{ transition:transform .5s var(--fp-e-out),box-shadow .5s var(--fp-e-out); }
  body.fp-home .card:hover{ transform:translateY(-6px); box-shadow:0 2px 6px rgba(9,53,93,.05), 0 14px 30px rgba(9,53,93,.07), 0 34px 70px rgba(9,53,93,.09); }
}
.progress-wrap:active{ transform:scale(.9); }

/* ---- reduced-motion ---- */
@media (prefers-reduced-motion:reduce){
  body::after{ display:none; }
  html.fp-ready .fp-reveal{ opacity:1 !important; transform:none !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
/* freeze p/ screenshot */
html.fp-freeze .fp-reveal{ opacity:1 !important; transform:none !important; }
html.fp-freeze *,html.fp-freeze *::before,html.fp-freeze *::after{ transition:none !important; animation-play-state:paused !important; }

/* ============================================================================
   NAV PREMIUM — Faça Parte + idiomas PT/EN/ES (header) / idiomas + social (painel)
   ============================================================================ */
@media (max-width:991.98px){
  /* esconde o language-select de texto no painel (substituído por letras PT/EN/ES) */
  .offcanvas-nav .language-select.fp-langhidden{ display:none !important; }

  /* LOGO real do FOUP (globo + wordmark) no topo do painel, no lugar do texto */
  .offcanvas-nav .offcanvas-header{ display:flex !important; align-items:center !important; justify-content:space-between !important; }
  .offcanvas-nav .offcanvas-header h3{ display:none !important; }
  .offcanvas-nav .offcanvas-header > a{ display:inline-flex !important; align-items:center; margin:0 !important; }
  .offcanvas-nav .offcanvas-header .logo-dark{ display:inline-block !important; width:80px !important; height:auto !important; }
  .offcanvas-nav .offcanvas-header .logo-light{ display:none !important; }

  /* MARCA D'ÁGUA — UMA imagem (símbolo da marca) preenchendo TODO o painel (cover), bem sutil */
  .offcanvas-nav{
    background-image:url("../img/foup-watermark-single.webp"), linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.9)) !important;
    background-repeat:no-repeat, no-repeat !important;
    background-size:cover, cover !important;
    background-position:center, center !important;
  }

  /* HEADER fechado: bandeiras à esquerda; Faça Parte + hambúrguer à direita */
  #navbar .navbar.transparent:not(.navbar-clone) .d-flex.d-lg-none,
  .navbar-clone.fixed .d-flex.d-lg-none{ align-items:center !important; }
  .fp-head-flags{ display:flex; }
  .navbar-clone.fixed .fp-head-flags .fp-flag{ border-color:rgba(9,53,93,.2); }
  .fp-faca-li{ display:flex !important; align-items:center; margin-right:.45rem !important; }
  .fp-faca{ font-size:.76rem !important; padding:.42rem .82rem !important; line-height:1 !important; white-space:nowrap; box-shadow:0 .4rem 1rem rgba(252,188,26,.3) !important; }

  /* bandeiras — círculos nítidos */
  .fp-flags{ display:flex; align-items:center; gap:.4rem; }
  /* IDIOMA EM LETRAS (PT/EN/ES) — sem bandeira; idioma ativo destacado na marca; clique /lang.php */
  .fp-lang{ font-weight:700 !important; font-size:.8rem !important; letter-spacing:.04em; line-height:1; padding:.3rem .4rem !important; border-radius:9px; text-decoration:none !important; position:relative; display:inline-flex; align-items:center; transition:color .2s var(--fp-e-out), background .2s var(--fp-e-out); }
  .fp-lang::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; }
  .fp-flags-head .fp-lang{ color:rgba(255,255,255,.82) !important; text-shadow:0 1px 6px rgba(0,0,0,.45); }
  .fp-flags-head .fp-lang.fp-lang-on{ color:var(--fp-orange) !important; }
  .fp-flags-foot .fp-lang{ color:var(--fp-navy) !important; }
  .fp-flags-foot .fp-lang.fp-lang-on{ color:var(--fp-orange-2) !important; background:rgba(252,188,26,.16); }
  .fp-lang:hover{ color:var(--fp-orange-2) !important; }
  .fp-lang:active{ transform:scale(.93); }
  .fp-flag{ width:24px; height:24px; border-radius:50%; overflow:visible; position:relative; display:inline-flex; box-shadow:0 2px 6px rgba(6,17,34,.28); border:1.5px solid rgba(255,255,255,.85); transition:transform .2s var(--fp-e-out),box-shadow .2s var(--fp-e-out); }
  .fp-flag svg{ width:100%; height:100%; display:block; border-radius:50%; }
  /* área de toque ≥44px (invisível) sem mudar o visual da bandeira — a11y (WCAG 2.5.5) */
  .fp-flag::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; }
  .fp-flag.fp-flag-on{ border-color:var(--fp-orange) !important; box-shadow:0 0 0 2px rgba(252,188,26,.55),0 2px 6px rgba(6,17,34,.28); }
  .fp-flag:active{ transform:scale(.92); }

  /* rodapé do painel: bandeiras maiores + email + social (WhatsApp/Instagram) */
  .offcanvas-nav .offcanvas-footer .fp-flags-foot{ gap:.55rem; margin-bottom:1rem; }
  .fp-flags-foot .fp-flag{ width:30px; height:30px; border:1.5px solid rgba(9,53,93,.2); box-shadow:0 3px 8px rgba(9,53,93,.16); }
  .fp-flags-foot .fp-flag.fp-flag-on{ border-color:var(--fp-orange) !important; box-shadow:0 0 0 2px rgba(252,188,26,.5),0 3px 8px rgba(9,53,93,.16); }
  /* e-mail: navy + sublinhado = contraste AA (laranja sobre branco dava 2.46:1) + padding p/ tap target */
  .offcanvas-nav .offcanvas-footer .fp-email{ display:inline-block; color:var(--fp-navy) !important; font-weight:600; margin-bottom:.7rem; padding:.45rem 0; text-decoration:underline; text-underline-offset:2px; }
  .offcanvas-nav .offcanvas-footer .fp-email:hover{ color:var(--fp-orange-2) !important; }
  .fp-social{ display:flex; gap:.7rem; }
  .fp-ic{ width:44px; height:44px; border-radius:50%; display:inline-flex !important; align-items:center; justify-content:center; background:var(--fp-navy) !important; color:#fff !important; box-shadow:0 4px 13px rgba(9,53,93,.24); transition:background .25s var(--fp-e-out),transform .2s var(--fp-e-out),box-shadow .25s var(--fp-e-out); }
  /* glyph BRANCO garantido — alta especificidade vence o fill navy do tema */
  .offcanvas-nav .offcanvas-footer .fp-social a.fp-ic svg,
  .offcanvas-nav .fp-social a.fp-ic svg{ width:21px !important; height:21px !important; display:block !important; fill:#fff !important; }
  .offcanvas-nav .offcanvas-footer .fp-social a.fp-ic{ color:#fff !important; }
  .fp-ic:hover{ background:var(--fp-orange-2) !important; box-shadow:0 6px 16px rgba(252,188,26,.4); transform:translateY(-2px); }
  .fp-ic:active{ transform:scale(.92); }
}

/* ============================================================================
   REVISÃO MOBILE — centralização coerente + correções de alinhamento/quebra
   (só mobile; não toca produção, Arquitetura de Informação nem conteúdo)
   ============================================================================ */
@media (max-width:767.98px){
  /* títulos de seção que destoavam à esquerda → centralizados (coerência com os demais) */
  .container.py-10 > h2.mb-10{ text-align:center !important; }                 /* "Algumas Instituições..." */
  .container.py-10 > p.mt-10:has(a.more){ text-align:center !important; }      /* link "Ver Todas" */
  body.fp-home [class*="crescimento-inspira"] .col-lg-7{ text-align:center !important; }    /* "Crescimento que Inspira..." */
  body.fp-home [class*="crescimento-inspira"] .col-lg-7 .d-flex{ justify-content:center !important; }
  /* cards Voluntariado/Instituições — título não quebra no meio da palavra */
  .volunteering-title{ font-size:1.05rem !important; line-height:1.18 !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; }
  /* GLOBO (rede internacional) — UM só globo no mobile: o da MARCA (com anel "Fórum de
     Universidades pela Paz"), centralizado. Esconde a versão lisa pra NÃO duplicar (o swap de
     hover não faz sentido no mobile). Especificidade .img-globo-container X (0,2,0) vence
     regras (0,1,0) de outros arquivos. Desktop 100% intacto. */
  .img-globo-container{ margin-left:auto !important; margin-right:auto !important; float:none !important; text-align:center !important; }
  /* HOME: globo da marca (com anel) sobre o backdrop escuro do mobile-ux — aprovado */
  body.fp-home .img-globo-container .img-globo{ display:none !important; }
  body.fp-home .img-globo-container .img-globo-hover{ display:block !important; margin-left:auto !important; margin-right:auto !important; }
  /* DEMAIS PÁGINAS (sobre etc.) = PRODUÇÃO: seção CLARA + globo liso, 1 só (sem card escuro) */
  body:not(.fp-home) .img-globo-container{ background:none !important; }
  body:not(.fp-home) .img-globo-container .img-globo{ display:block !important; margin-left:auto !important; margin-right:auto !important; }
  body:not(.fp-home) .img-globo-container .img-globo-hover{ display:none !important; }
  /* instituições-signatárias — stat (imagem + número lado a lado dentro do col-12) estourava
     2–8px no mobile; limita a imagem responsivamente p/ caber (sem mexer no conteúdo). */
  .col-xl-4.d-flex.flex-row.p-0.justify-content-center > img.img-fluid.float-end{ max-width:min(250px,46vw) !important; }
}

/* ============================================================================
   CWV / CLS — reservar espaço de mídia que carrega tarde (evita layout shift).
   Sem mexer em conteúdo/links; só garante espaço antes da imagem/form chegar.
   ============================================================================ */
/* blog/notícias: a figura do card é 360×250 (ratio 1,44) mas reserva 0 até a imagem
   lazy carregar → empurrava o card (CLS ~0,51). aspect-ratio reserva o espaço. */
figure.overlay-1{ aspect-ratio:36/25; overflow:hidden; }
figure.overlay-1 > a{ display:block; width:100%; height:100%; }
figure.overlay-1 > a > img, figure.overlay-1 > img{ width:100% !important; height:100% !important; object-fit:cover; display:block; }
/* rodapé: logo FOUP (314×82) e form de newsletter (Mailchimp) carregam/assentam tarde
   (~6–10 s) e empurram as colunas. Reserva o espaço deles. */
footer .widget img.mb-4{ height:auto; aspect-ratio:314/82; max-width:160px; }
footer #mc_embed_signup_scroll2{ min-height:54px; }
footer .newsletter-wrapper{ min-height:118px; }
footer #mce-responses2{ min-height:0; }

/* ============================================================================
   GOVERNANÇA — organograma (Conselho Gestor → Grupo de Trabalho / Conselho de
   Reitores / Voluntários): cards consistentes, sombra suave, ritmo, hierarquia,
   conector discreto, tátil, respiro no mobile. Escopo .fp-org (só na governança).
   ============================================================================ */
.fp-org{ text-align:center; }
.fp-org > .row{ --bs-gutter-x:0; margin-left:0; margin-right:0; }
.fp-org .col-12{ display:flex; flex-wrap:wrap; gap:1rem 1.15rem; justify-content:center; align-items:stretch; }
.fp-org .botao{
  margin:0 !important; width:auto !important; min-width:208px; height:auto !important; min-height:116px;
  border-radius:1.2rem !important; font-size:clamp(1.05rem,2.3vw,1.32rem) !important; font-weight:700 !important; line-height:1.12; letter-spacing:-.01em;
  display:inline-flex !important; align-items:center; justify-content:center; text-align:center; padding:1.05rem 1.25rem; border-width:2px;
  box-shadow:0 6px 18px rgba(9,53,93,.10);
  transition:transform .22s var(--fp-e-out), box-shadow .26s var(--fp-e-out), background .2s var(--fp-e-out), color .2s var(--fp-e-out);
}
.fp-org .btn-orange.botao{ box-shadow:0 10px 26px rgba(252,188,26,.32); }     /* Conselho Gestor — destaque (hierarquia) */
.fp-org .botao:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(9,53,93,.17); }
.fp-org .btn-outline-orange.botao:hover{ background:var(--fp-orange) !important; color:var(--fp-navy) !important; border-color:var(--fp-orange) !important; }
.fp-org .botao:active{ transform:scale(.97); }
.fp-org .row.my-5 img{ width:32px !important; height:auto; opacity:.62; }      /* conector (triângulo) discreto */
@media (max-width:575.98px){
  .fp-org .col-12{ flex-direction:column; align-items:center; gap:.85rem; }
  .fp-org .botao{ width:100% !important; max-width:330px; min-width:0; min-height:94px; }
  .fp-org .row.my-5{ margin-top:1rem !important; margin-bottom:1rem !important; }
}

/* ============================================================================
   TERMO / ADESÃO — form num painel limpo + campos premium + etapas na marca.
   Escopo #area_inscricao (só na página do termo). NÃO altera campos/nomes/lógica/envio.
   ============================================================================ */
#area_inscricao:not(:empty){
  background:rgba(255,255,255,.975); border-radius:22px; padding:1.7rem 1.5rem 1.35rem;
  box-shadow:0 1px 2px rgba(9,53,93,.05), 0 20px 54px rgba(9,53,93,.20);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
#area_inscricao .display-2{ font-size:clamp(1.5rem,5vw,2.05rem) !important; color:var(--fp-navy) !important; margin-bottom:1.1rem !important; }
/* etapas (1 Cadastro / 2 Indicação / 3 Confirmação) — chips na marca */
#area_inscricao .card.bg-soft-orange{ background:var(--fp-orange-soft) !important; border:1px solid rgba(252,188,26,.32) !important; border-radius:14px !important; box-shadow:0 4px 14px rgba(9,53,93,.06) !important; }
#area_inscricao .card.bg-soft-orange .card-body{ padding:.85rem .95rem !important; }
#area_inscricao .card.bg-soft-orange .icon.btn-circle{ background:var(--fp-orange) !important; color:var(--fp-navy) !important; width:34px !important; height:34px !important; }
#area_inscricao .card.bg-soft-orange h3{ color:var(--fp-navy) !important; font-size:1.02rem !important; }
#area_inscricao .card.bg-soft-orange p{ color:rgba(9,53,93,.68) !important; }
/* textos antes brancos (p/ foto) agora sobre painel claro */
#area_inscricao .text-light{ color:rgba(9,53,93,.72) !important; }
#area_inscricao .lead.text-light{ color:var(--fp-navy) !important; }
/* campos: altura ≥44 (form-floating ~58), foco na marca, raio coerente */
#area_inscricao .form-control, #area_inscricao .form-select{ min-height:54px; border-radius:12px !important; border:1.5px solid rgba(9,53,93,.16) !important; background:#fff; transition:border-color .2s var(--fp-e-out), box-shadow .2s var(--fp-e-out); }
#area_inscricao .form-control:focus, #area_inscricao .form-select:focus{ border-color:var(--fp-orange) !important; box-shadow:0 0 0 3px rgba(252,188,26,.32) !important; outline:none !important; }
#area_inscricao .form-floating{ margin-bottom:.4rem; }
#area_inscricao .form-floating > label{ color:rgba(9,53,93,.6); }
/* cabeçalho de grupo (subtítulos que eu adiciono p/ agrupar) */
#area_inscricao .fp-grp{ font-size:.8rem !important; font-weight:800 !important; letter-spacing:.08em; text-transform:uppercase; color:var(--fp-orange-2) !important; margin:1rem 0 .15rem !important; padding-top:.7rem; border-top:1px solid rgba(9,53,93,.1); }
/* botão continuar/enviar */
#area_inscricao .btn-primary{ min-height:50px; border-radius:12px !important; font-weight:600 !important; padding-left:1.5rem; padding-right:1.5rem; }
#area_inscricao .btn-primary:active{ transform:scale(.98); }

/* ============================================================================
   MENU MOBILE — correção do "painel fantasma" (29/07)
   O tema mantém DOIS .offcanvas-nav (o do navbar original + o do navbar-clone
   que fica fixo ao rolar) e o JS abre os dois juntos. Como o .navbar recebe
   transform na animação de esconder, ele vira o containing block do painel
   `position:fixed` que está dentro dele — resultado: um painel encosta em
   left:0 e o outro em left:14px, aparecendo como borda dupla/sombra fantasma.
   Correções: (1) enquanto o menu está aberto o navbar não usa transform;
   (2) quando o clone fixo está com o painel aberto, o painel do navbar
   original não é pintado (evita conteúdo duplicado sobreposto).
   ========================================================================== */
@media (max-width:991.98px){
  body:has(.offcanvas-nav.show) .navbar{ transform:none !important; }
  body:has(.navbar-clone .offcanvas-nav.show) .navbar:not(.navbar-clone) .offcanvas-nav{
    visibility:hidden !important; pointer-events:none !important;
  }
}

/* ==========================================================================
   Nav lateral mobile — acabamento final (29/07/2026)
   1) O e-mail no rodapé do menu tinha 39px de altura de toque. O mínimo
      confortável no dedo é 44px. Usa a MESMA solução já aplicada aos
      seletores de idioma: área de toque invisível via ::after, sem mexer
      no layout nem no visual.
   2) Aparelhos com recorte (iPhone X+) desenham a barra de gestos por cima
      do rodapé do painel. env() devolve 0 onde não existe recorte, então o
      max() preserva os 22px atuais em todo o resto.
   ========================================================================== */
@media (max-width:991.98px){
  .offcanvas-nav .offcanvas-footer .fp-email{ position:relative; }
  .offcanvas-nav .offcanvas-footer .fp-email::after{
    content:""; position:absolute; left:0; right:0; top:50%;
    height:44px; transform:translateY(-50%);
  }
  .offcanvas-nav{ padding-bottom:max(22px, env(safe-area-inset-bottom)); }
}