/* ==========================================================================
   Plasjope — folha de estilo do site
   Paleta e tipografia extraídas do arquivo original da marca.
   ========================================================================== */

/* Lexend — fonte da marca, servida pelo próprio site (licença OFL, ver fontes/Lexend-OFL.txt) */
@font-face{
  font-family:"Lexend";
  src:url("../fontes/Lexend-var.woff2") format("woff2-variations"),
      url("../fontes/Lexend-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* Merriweather — titulos e numeros (licenca OFL, ver fontes/Merriweather-OFL.txt).
   Serifa classica e firme, escolhida em 30/09/2026 no lugar da Fraunces.
   Arquivos reduzidos: romano peso 500-700 com tamanho optico fixo em 48,
   italico peso 400-600 com tamanho optico fixo em 28. */
@font-face{
  font-family:"Merriweather";
  src:url("../fontes/merriweather-var.woff2") format("woff2-variations"),
      url("../fontes/merriweather-var.woff2") format("woff2");
  font-weight:500 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Merriweather";
  src:url("../fontes/merriweather-italic-var.woff2") format("woff2-variations"),
      url("../fontes/merriweather-italic-var.woff2") format("woff2");
  font-weight:400 600; font-style:italic; font-display:swap;
}

@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fontes/plex-mono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fontes/plex-mono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

:root{
  /* marca */
  --azul:#3866F3;
  --azul-d:#2A4FC7;
  --azul-claro:#EEF2FE;
  --navy:#0E0E51;
  --navy-sup:#181B66;
  --verde:#0A8343;         /* acao principal — branco sobre ele da 4,84:1 */
  --verde-d:#076A34;
  --azul-luz:#8CA6FF;      /* azul royal claro, para acento sobre fundo escuro */
  --coral:#FC5652;         /* cor oficial da marca, hoje so em estado de erro */

  /* neutros com viés azul */
  --branco:#FFFFFF;
  --gelo:#F4F6FC;
  --linha:#DCE2F2;
  --linha-2:#BFCAE6;
  --texto:#111535;
  --texto-2:#4A5375;
  --texto-3:#646D8B;

  /* sobre fundo escuro */
  --d-texto:#FFFFFF;
  --d-texto-2:#B9C1E6;
  --d-texto-3:#8890C4;
  --d-linha:rgba(255,255,255,.14);

  --display:"Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --serif:"Merriweather", Georgia, "Times New Roman", serif;

  --raio:14px;
  --raio-sm:10px;
  --sombra:0 1px 2px rgba(14,14,81,.05), 0 10px 30px -18px rgba(14,14,81,.35);
  --sombra-alta:0 2px 4px rgba(14,14,81,.06), 0 24px 50px -26px rgba(14,14,81,.45);

  --topo:72px;
  --gutter:clamp(18px, 4vw, 40px);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:calc(var(--topo) + 14px)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--branco);
  color:var(--texto);
  font-family:var(--display);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{max-width:100%; display:block}
a{color:var(--azul-d); text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit}

:focus-visible{outline:3px solid var(--azul); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--gutter)}
.wrap-estreito{max-width:880px}

h1,h2,h3,h4{margin:0; font-family:var(--display); text-wrap:balance; letter-spacing:-.025em; line-height:1.1}
h1,h2{font-family:var(--serif); font-weight:600; letter-spacing:-.015em; font-optical-sizing:auto}
h1{font-size:clamp(2.3rem, 6vw, 4.2rem); line-height:1.04}
h2{font-size:clamp(1.85rem, 4vw, 2.9rem); line-height:1.08}
h1 em, h2 em{font-style:italic; font-weight:500}
h3{font-size:clamp(1.05rem, 2vw, 1.3rem); font-weight:600; letter-spacing:-.015em; line-height:1.25}
p{margin:0}

.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

.rotulo{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--azul-d);
}
.rotulo::before{content:""; width:22px; height:2px; background:var(--azul); border-radius:2px}
.escuro .rotulo{color:#93AAFF}
.escuro .rotulo::before{background:var(--azul-luz)}

.sub{color:var(--texto-2); font-size:clamp(1rem,1.5vw,1.09rem); max-width:62ch}
.escuro .sub{color:var(--d-texto-2)}

/* ---------- seções ---------- */
.secao{padding-block:clamp(3.4rem, 8vw, 6.5rem)}
.secao-gelo{background:var(--gelo)}
.escuro{background:var(--navy); color:var(--d-texto)}
.escuro h2,.escuro h3{color:#fff}
/* royal: faixa de destaque entre as seções claras e o marinho */
.royal{background:linear-gradient(170deg,#3866F3 0%,#3360EC 50%,#2A4FC7 100%); color:#fff}
.royal h2{color:#fff}
.royal .rotulo{color:#fff}
.royal .rotulo::before{background:rgba(255,255,255,.75)}
.royal .sub{color:#fff}

.cab-secao{display:flex; flex-direction:column; gap:.85rem; margin-bottom:clamp(2rem,4vw,3rem); max-width:70ch}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:600; font-size:.97rem; letter-spacing:-.01em;
  padding:.92rem 1.6rem; border-radius:var(--raio-sm); border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primario{background:var(--azul); color:#fff}
.btn-primario:hover{background:var(--azul-d)}
.btn-acao{background:var(--verde); color:#fff}
.btn-acao:hover{background:var(--verde-d)}
.btn-zap{background:var(--verde); color:#fff}
.btn-zap:hover{background:var(--verde-d)}
.btn-contorno{background:transparent; color:var(--navy); border-color:var(--linha-2)}
.btn-contorno:hover{border-color:var(--azul); color:var(--azul-d)}
.escuro .btn-contorno,
.hero .btn-contorno,
.topo .btn-contorno{color:#fff; border-color:rgba(255,255,255,.35)}
.escuro .btn-contorno:hover,
.hero .btn-contorno:hover,
.topo .btn-contorno:hover{border-color:#fff; background:rgba(255,255,255,.08); color:#fff}
.btn svg{width:18px; height:18px; flex:none}

/* ---------- topo ---------- */
.topo{
  position:sticky; top:0; z-index:60;
  background:rgba(14,14,81,.96);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--d-linha);
  transition:background .25s, box-shadow .25s;
}
.topo.encolhido{box-shadow:0 8px 30px -18px rgba(0,0,0,.9)}
.topo-int{display:flex; align-items:center; gap:1rem; min-height:72px}
.topo-marca{display:flex; align-items:center; flex:none}
/* logotipo recortado so para o topo (o arquivo original tem a margem de respiro embutida) */
.topo-marca img{height:26px; width:auto}
@media (min-width:600px){ .topo-marca img{height:30px} }
@media (min-width:1200px){ .topo-marca img{height:34px} }

/* assinatura da marca, ao lado do logotipo */
.topo-frase{
  margin:0; padding-left:.85rem; border-left:1px solid rgba(255,255,255,.22);
  font-family:var(--serif); font-style:italic; font-weight:500; letter-spacing:.005em;
  font-size:.84rem; line-height:1.22; color:#CDD4F2; max-width:9.6rem;
}
/* frase em duas linhas no celular e no desktop (onde divide a linha com o índice);
   em uma linha no tablet, onde o índice desce para a segunda faixa */
@media (min-width:480px) and (max-width:1199px){ .topo-frase{max-width:none; white-space:nowrap; font-size:.9rem} }
@media (min-width:1200px){ .topo-frase{font-size:.9rem; max-width:10.4rem} }
/* páginas com botão "Voltar ao site" no topo: no celular estreito a frase sai para o botão caber na mesma linha */
@media (max-width:519px){ .topo:has(.topo-acoes .btn) .topo-frase{display:none} }

/* indice do site */
.topo-nav{display:flex; gap:.15rem; margin-left:auto}
.topo-nav a{
  color:var(--d-texto-2); font-size:.93rem; font-weight:500; padding:.5rem .72rem; white-space:nowrap;
  border-radius:8px; text-decoration:none; transition:color .16s, background .16s, border-color .16s;
}
.topo-nav a:hover,.topo-nav a.ativo{color:#fff; background:rgba(255,255,255,.1); text-decoration:none}

.topo-acoes{display:flex; align-items:center; gap:.7rem}
.topo-fone{
  display:none; align-items:center; gap:.45rem; color:#fff; font-weight:600;
  font-size:.92rem; text-decoration:none; white-space:nowrap; padding:.35rem .2rem;
}
.topo-fone:hover{text-decoration:none; color:var(--azul-luz)}
.topo-fone .ico-zap{width:20px; height:20px; flex:none; color:#25D366}
.topo .btn{padding:.62rem 1.05rem; font-size:.9rem; white-space:nowrap}

/* telas largas: tudo numa linha so */
@media (min-width:1200px){
  .topo-fone{display:inline-flex}
  .topo-acoes{margin-left:.4rem}
}
/* ate 1199 px: logotipo e frase em cima, indice embaixo, como faixa que desliza para o lado.
   Fica fixo no topo o tempo todo, entao qualquer secao esta a um toque. */
@media (max-width:1199px){
  .topo-int{flex-wrap:wrap; min-height:0; padding-top:.72rem; row-gap:.5rem}
  .topo-int .topo-acoes{margin-left:auto}
  .topo-nav{
    order:3; flex:0 0 calc(100% + 2 * var(--gutter)); margin:0 calc(-1 * var(--gutter));
    padding:0 var(--gutter) .62rem; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; scroll-padding-inline:var(--gutter); scrollbar-width:none; gap:.4rem;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 2.4rem),transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 2.4rem),transparent 100%);
  }
  .topo-nav::-webkit-scrollbar{display:none}
  .topo-nav a{
    scroll-snap-align:start; font-size:.88rem; padding:.44rem .9rem; border-radius:999px;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  }
  .topo-nav a.ativo{background:var(--azul); border-color:var(--azul); color:#fff}
  .topo-nav a:last-child{margin-right:1.6rem}
}
/* com o indice embaixo do logotipo, o topo fica mais alto: as ancoras param logo abaixo dele */
@media (max-width:1199px){ :root:has(.topo-nav){--topo:102px} }

/* botao voltar ao topo, em cima do WhatsApp flutuante */
.voltar-topo{
  position:fixed; right:16px; bottom:calc(84px + env(safe-area-inset-bottom, 0px)); z-index:70;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:#fff; color:var(--navy); border:1px solid var(--linha); cursor:pointer;
  box-shadow:0 2px 6px rgba(14,14,81,.18), 0 12px 28px -12px rgba(14,14,81,.55);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .22s, transform .22s, visibility .22s, background .2s;
}
.voltar-topo svg{width:20px; height:20px}
.voltar-topo.visivel{opacity:1; visibility:visible; transform:none}
.voltar-topo:hover{background:var(--azul); border-color:var(--azul); color:#fff}
.voltar-topo:focus-visible{outline:3px solid var(--azul-luz); outline-offset:3px}
@media (min-width:600px){ .voltar-topo{right:20px; bottom:calc(80px + env(safe-area-inset-bottom, 0px))} }
.voltar-topo.sozinho{bottom:calc(18px + env(safe-area-inset-bottom, 0px))}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--navy); color:#fff; overflow:hidden; isolation:isolate}
.hero-foto{position:absolute; inset:0; z-index:-2}
.hero-foto img{width:100%; height:100%; object-fit:cover; object-position:60% 46%}
.hero-veu{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(14,14,81,.96) 0%, rgba(14,14,81,.89) 42%, rgba(14,14,81,.58) 76%, rgba(14,14,81,.34) 100%),
    linear-gradient(180deg, rgba(14,14,81,.55) 0%, rgba(14,14,81,0) 28%, rgba(14,14,81,.75) 100%);
}
.hero-int{padding-block:clamp(3.4rem, 9vw, 7rem) clamp(3.4rem,8vw,6rem)}

/* No celular o texto ocupa a largura toda, entao o veu vira vertical:
   escurece em cima, onde ficam o titulo e o paragrafo, e abre embaixo
   para a foto aparecer. O recorte tambem desloca para o balao ficar no
   centro da tela estreita. */
@media (max-width:720px){
  .hero-foto img{object-position:60% 40%}
  .hero-veu{
    background:
      linear-gradient(180deg, rgba(14,14,81,.96) 0%, rgba(14,14,81,.94) 48%, rgba(14,14,81,.70) 76%, rgba(14,14,81,.36) 100%);
  }
}

.hero-grade{display:grid; gap:clamp(2rem,4vw,3.4rem); align-items:center; max-width:52rem}

.hero h1{color:#fff}
.hero h1 em{font-style:italic; font-weight:500; color:var(--azul-luz)}

/* Link dentro de texto corrido: sublinhado, para nao depender so da cor,
   e a cor clara quando o fundo e escuro. */
.sub a, .nota a, .form-nota a, .campo-ajuda a, .q .r a, .doc p a, .doc li a, .doc dd a{
  text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:.06em;
}
.escuro .sub a, .hero .sub a, .rodape p a, .ouvidoria p a{color:var(--azul-luz)}
.hero-texto{margin-top:1.3rem; color:#D9DEF7; font-size:clamp(1.04rem,1.7vw,1.18rem); max-width:56ch}
.hero-ctas{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.hero-chips{
  display:flex; flex-wrap:wrap; gap:.5rem .65rem; margin-top:2.2rem;
  padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.16);
}
.chip{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.84rem; color:#C6CDEE; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13); border-radius:999px; padding:.34rem .8rem;
}
.chip svg{width:14px; height:14px; color:var(--azul-luz); flex:none}
/* Os chips do heroi ficam sobre a foto: carregam o proprio fundo para
   nao depender do que passa atras deles. */
.hero .chip{background:rgba(11,11,64,.66); border-color:rgba(255,255,255,.2); color:#D5DBF4}

/* ---------- ticker de linhas ---------- */
.ticker{background:var(--azul); color:#fff; overflow:hidden; padding-block:.7rem}
.ticker-pista{display:flex; width:max-content; gap:0; animation:corre 38s linear infinite}
.ticker-grupo{display:flex; gap:0; flex:none}
.ticker span{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding-inline:1.5rem; white-space:nowrap; display:inline-flex; align-items:center; gap:1.5rem;
}
.ticker span::after{content:""; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.55)}
@keyframes corre{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){ .ticker-pista{animation:none; width:100%; overflow-x:auto} }

/* ---------- números ---------- */
.nums{display:grid; gap:1px; background:var(--linha); border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden}
@media (min-width:600px){ .nums{grid-template-columns:repeat(2,1fr)} }
@media (min-width:920px){ .nums{grid-template-columns:repeat(4,1fr)} }
.num{background:var(--branco); padding:clamp(1.4rem,3vw,2rem)}
.num b{
  display:block; font-family:var(--serif); font-size:clamp(2.4rem,5.2vw,3.3rem); font-weight:600; letter-spacing:-.02em;
  line-height:1; color:var(--navy); font-variant-numeric:tabular-nums;
}
.num b .un{color:var(--azul)}
.num strong{display:block; margin-top:.7rem; font-size:1rem; font-weight:600; color:var(--texto)}
.num > span{display:block; margin-top:.15rem; font-size:.88rem; color:var(--texto-3)}

/* ---------- diferenciais ---------- */
.difs{display:grid; gap:1rem}
@media (min-width:640px){ .difs{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .difs{grid-template-columns:repeat(4,1fr)} }
.dif{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:1.3rem 1.35rem 1.45rem; display:flex; flex-direction:column; gap:.6rem;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.dif:hover{border-color:var(--azul); transform:translateY(-3px); box-shadow:var(--sombra)}
.dif-icone{
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:var(--azul-claro); color:var(--azul-d); margin-bottom:.2rem;
}
.dif-icone svg{width:21px; height:21px}
.dif h3{font-size:1.02rem}
.dif p{font-size:.91rem; color:var(--texto-2); line-height:1.55}
.royal .dif{color:var(--texto); border-color:transparent; box-shadow:0 1px 2px rgba(14,14,81,.12), 0 18px 40px -24px rgba(14,14,81,.7)}
.royal .dif:hover{border-color:#fff; box-shadow:0 2px 4px rgba(14,14,81,.14), 0 26px 50px -24px rgba(14,14,81,.8)}

/* faixa com foto de resina */


/* ---------- produtos ---------- */
.familias{display:grid; gap:1.2rem}
@media (min-width:900px){ .familias{grid-template-columns:repeat(3,1fr)} }
.familia{
  display:flex; flex-direction:column;
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  overflow:hidden; transition:box-shadow .22s, border-color .22s, transform .22s;
}
.familia:hover{box-shadow:var(--sombra-alta); border-color:var(--linha-2); transform:translateY(-3px)}
.familia-img{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:radial-gradient(120% 90% at 30% 15%, #1B2478 0%, #0E0E51 62%, #0A0A3C 100%);
}
.familia-img img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
/* foto com fundo proprio: so aproxima, sem girar o quadro */
.familia:hover .familia-img img{transform:scale(1.04)}
.familia-tag{
  position:absolute; top:.85rem; left:.85rem; z-index:2;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  color:#fff; padding:.28rem .6rem; border-radius:999px; backdrop-filter:blur(4px);
}
.familia-corpo{padding:1.3rem 1.35rem 1.5rem; display:flex; flex-direction:column; gap:.75rem; flex:1}
.familia-corpo h3{font-size:1.22rem}
.familia-corpo > p{font-size:.93rem; color:var(--texto-2); line-height:1.55}
.especs{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.1rem}
.espec{
  font-family:var(--mono); font-size:.73rem; color:var(--texto-2);
  background:var(--gelo); border:1px solid var(--linha); border-radius:6px; padding:.24rem .5rem;
}
.familia dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.35rem .8rem; font-size:.87rem}
.familia dt{color:var(--texto-3); font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding-top:.15rem}
.familia dd{margin:0; color:var(--texto)}
.familia .btn{margin-top:auto; align-self:flex-start}

/* texto só para leitor de tela */
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* botão "Ver em uso" sobre a foto do cartão */
.ver-uso{
  position:absolute; top:.7rem; right:.7rem; z-index:3;
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  background:#fff; color:var(--navy); border:0; border-radius:999px;
  padding:.42rem .8rem .42rem .55rem; font-family:var(--display); font-weight:500; font-size:.8rem; line-height:1;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.55); transition:background .18s, color .18s, transform .18s;
}
.ver-uso svg{width:18px; height:18px; flex:none; padding:3px; border-radius:50%; background:var(--azul); color:#fff}
.ver-uso:hover{background:var(--azul); color:#fff; transform:translateY(-1px)}
.ver-uso:hover svg{background:#fff; color:var(--azul)}
.ver-uso:focus-visible{outline:3px solid var(--azul-luz); outline-offset:2px}
.ver-uso[hidden]{display:none}

/* janela do vídeo */
.modal-video{
  width:min(1100px, calc(100vw - 2 * var(--gutter))); max-width:none; max-height:calc(100vh - 2rem);
  padding:clamp(.8rem,2vw,1.2rem); border:0; border-radius:var(--raio);
  background:var(--navy); color:#fff; box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
}
.modal-video::backdrop{background:rgba(9,9,52,.82); backdrop-filter:blur(3px)}
.modal-video-cab{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.7rem}
.modal-video-titulo{margin:0; font-weight:600; font-size:1rem; color:#fff}
.modal-video-fechar{
  width:44px; height:44px; flex:none; display:grid; place-items:center; cursor:pointer;
  border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff;
}
.modal-video-fechar svg{width:20px; height:20px}
.modal-video-fechar:hover{background:rgba(255,255,255,.2)}
.modal-video-fechar:focus-visible{outline:3px solid var(--azul-luz); outline-offset:2px}
.modal-video video{display:block; width:100%; height:auto; aspect-ratio:16/9; background:#000; border-radius:var(--raio-sm)}
.modal-video-nota{margin:.7rem 0 0; font-size:.8rem; color:var(--d-texto-2)}
:root:has(.modal-video[open]){overflow:hidden}

/* galeria de variações dentro do cartão */
.galeria{position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; gap:.4rem; padding:.6rem .7rem;
  background:linear-gradient(180deg, rgba(10,10,60,0) 0%, rgba(10,10,60,.75) 55%);}
.galeria button{
  flex:1; min-width:0; cursor:pointer; border-radius:8px; padding:.3rem .2rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); color:#D8DEFA;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  transition:background .18s, color .18s, border-color .18s;
}
.galeria button:hover{background:rgba(255,255,255,.22); color:#fff}
.galeria button[aria-pressed="true"]{background:#fff; color:var(--navy); border-color:#fff; font-weight:500}

/* ---------- aplicações (segmentos) ---------- */
/* celular e tablet: faixa que desliza para o lado; desktop: 5 colunas */
.aplics{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(78%, 300px); gap:12px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  margin-inline:calc(-1 * var(--gutter)); padding:2px var(--gutter) 6px; scroll-padding-inline:var(--gutter);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.aplics::-webkit-scrollbar{display:none}
.aplics:focus-visible{outline:2px solid var(--azul-luz); outline-offset:4px; border-radius:var(--raio)}
.aplic{
  scroll-snap-align:start; background:var(--navy-sup); border:1px solid var(--d-linha);
  border-radius:var(--raio); overflow:hidden; display:flex; flex-direction:column;
  transition:background .22s;
}
.aplic-foto{aspect-ratio:3/2; overflow:hidden; background:#070733}
/* "Ver em uso" do segmento: na mesma linha do ícone, metade sobre a foto, sem cobrir a cena */
.aplic-corpo .ver-uso{top:0; right:1.15rem; transform:translateY(-50%)}
.aplic-corpo .ver-uso:hover{transform:translateY(calc(-50% - 1px))}
.aplic-foto img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.aplic-corpo{position:relative; padding:0 1.15rem 1.5rem; display:flex; flex-direction:column; gap:.5rem}
.aplic-icone{
  width:44px; height:44px; border-radius:12px; margin-top:-22px; margin-bottom:.25rem;
  background:var(--navy); border:1px solid rgba(255,255,255,.18); box-shadow:0 6px 16px rgba(0,0,0,.35);
  display:grid; place-items:center; color:var(--azul-luz); position:relative;
}
.aplic-icone svg{width:20px; height:20px}
.aplic h3{font-size:1rem; line-height:1.2}
.aplic p{font-size:.86rem; color:var(--d-texto-2); line-height:1.5}
@media (hover:hover){
  .aplic:hover{background:#1E2275}
  .aplic:hover .aplic-foto img{transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){ .aplic-foto img{transition:none} .aplic:hover .aplic-foto img{transform:none} }

.aplics-pontos{display:flex; justify-content:center; gap:4px; margin-top:.9rem}
.aplics-pontos[hidden]{display:none}
.aplics-pontos button{
  width:20px; height:24px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; border-radius:50%;
}
.aplics-pontos button::before{
  content:""; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3);
  transition:background .2s, transform .2s;
}
.aplics-pontos button[aria-current="true"]::before{background:#fff; transform:scale(1.25)}
.aplics-pontos button:focus-visible{outline:2px solid var(--azul-luz); outline-offset:1px}
.aplics-nota{margin-top:.9rem; font-size:.78rem; color:var(--d-texto-2); text-align:center}

@media (min-width:1000px){
  .aplics{
    grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(5,1fr); gap:14px;
    overflow:visible; margin-inline:0; padding:0; scroll-snap-type:none;
  }
  .aplics-pontos{display:none}
  .aplics-nota{text-align:left}
  /* em 5 colunas o card fica estreito: "Ver em uso" desce para o pé do card, alinhado na linha */
  .aplic-corpo{flex:1}
  .aplic-corpo p{margin-bottom:.45rem}
  .aplic-corpo .ver-uso{
    position:static; transform:none; align-self:flex-start; margin-top:auto;
    background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); box-shadow:none;
  }
  .aplic-corpo .ver-uso:hover{transform:translateY(-1px); border-color:var(--azul)}
}

/* ---------- vitrine dos segmentos (proposta de 06/10/2026) ----------
   Um vídeo grande por vez. Celular: chips com os nomes em cima, vídeo que
   desliza para o lado, texto embaixo. Computador: vídeo à esquerda e a
   lista dos 10 segmentos à direita (passar o mouse troca o vídeo).        */
.vitrine{display:grid; gap:14px; grid-template-areas:"lista" "palco"}
.vit-lista{
  grid-area:lista; position:relative; display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain;
  margin-inline:calc(-1 * var(--gutter)); padding:2px var(--gutter) 4px; scrollbar-width:none;
}
.vit-lista::-webkit-scrollbar{display:none}
.vit-item{
  flex:none; display:inline-flex; align-items:center; gap:.5rem; min-height:40px; cursor:pointer;
  padding:.4rem .95rem .4rem .45rem; border-radius:999px; white-space:nowrap; text-align:left;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#D8DEFA;
  font-family:var(--display); font-weight:500; font-size:.84rem; line-height:1.15;
  transition:background .18s, color .18s, border-color .18s;
}
.vit-item-icone{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.1); color:var(--azul-luz); transition:background .18s, color .18s}
.vit-item-icone svg{width:15px; height:15px}
.vit-item .longo{display:none}
.vit-item:hover{background:rgba(255,255,255,.12); color:#fff}
.vit-item[aria-current="true"]{background:#fff; border-color:#fff; color:var(--navy)}
.vit-item[aria-current="true"] .vit-item-icone{background:var(--azul); color:#fff}
.vit-item:focus-visible{outline:3px solid var(--azul-luz); outline-offset:2px}

.vit-palco{grid-area:palco; min-width:0}
.vit-midia{position:relative; aspect-ratio:16/9; border-radius:var(--raio); overflow:hidden; background:#070733; box-shadow:0 28px 60px -32px rgba(0,0,0,.85)}
.vit-trilho{display:flex; height:100%; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none}
.vit-trilho::-webkit-scrollbar{display:none}
.vit-trilho.arrastando{scroll-snap-type:none; cursor:grabbing}
.vit-trilho:focus-visible{outline:3px solid var(--azul-luz); outline-offset:-3px; border-radius:var(--raio)}
@media (hover:hover) and (pointer:fine){ .vit-trilho{cursor:grab} }
.vit-slide{position:relative; flex:0 0 100%; height:100%; margin:0; scroll-snap-align:center; scroll-snap-stop:always}
.vit-slide img, .vit-slide video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; -webkit-user-select:none; user-select:none}
.vit-slide video{opacity:0; transition:opacity .35s ease}
.vit-slide video.pronto{opacity:1}

.vit-seta, .vit-pausa{
  position:absolute; z-index:2; display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer; color:#fff;
  background:rgba(14,14,81,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .18s;
}
.vit-seta{top:50%; width:44px; height:44px; transform:translateY(-50%)}
.vit-ant{left:10px}
.vit-prox{right:10px}
.vit-seta svg{width:22px; height:22px}
.vit-pausa{right:10px; bottom:16px; width:40px; height:40px}
.vit-pausa svg{width:17px; height:17px}
.vit-pausa .ico-play, .vit-pausa[data-estado="pausado"] .ico-pausa{display:none}
.vit-pausa[data-estado="pausado"] .ico-play{display:block}
.vit-seta:hover, .vit-pausa:hover{background:var(--azul)}
.vit-seta:focus-visible, .vit-pausa:focus-visible{outline:3px solid var(--azul-luz); outline-offset:2px}
.vit-contador{
  position:absolute; z-index:2; top:10px; left:10px; padding:.32rem .62rem; border-radius:999px;
  background:rgba(14,14,81,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#D8DEFA; font-size:.72rem; letter-spacing:.06em;
}
.vit-contador b{color:#fff; font-weight:500}
.vit-barra{position:absolute; z-index:2; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.16)}
.vit-barra i{display:block; height:100%; width:0; background:var(--azul-luz); transition:width .26s linear}

.vit-textos{margin-top:16px}
.vit-texto{display:flex; gap:.9rem; align-items:flex-start}
.vit-texto[hidden]{display:none}
.vit-texto .aplic-icone{margin:0; flex:none}
.vit-texto h3{font-size:1.12rem; line-height:1.2; margin-bottom:.3rem}
.vit-texto p{margin:0; font-size:.92rem; line-height:1.55; color:var(--d-texto-2); max-width:62ch}

@media (max-width:599px){
  .vit-seta{width:38px; height:38px}
  .vit-seta svg{width:20px; height:20px}
  .vit-ant{left:6px} .vit-prox{right:6px}
  .vit-pausa{width:38px; height:38px; right:6px; bottom:12px}
  .vit-contador{top:8px; left:8px}
}
@media (min-width:1000px){
  .vitrine{grid-template-columns:minmax(0,1.9fr) minmax(250px,1fr); grid-template-areas:"palco lista"; gap:28px; align-items:start}
  .vit-lista{flex-direction:column; gap:4px; overflow:visible; margin:0; padding:0}
  .vit-item{
    width:100%; min-height:44px; gap:.7rem; padding:.3rem .8rem .3rem .35rem; white-space:normal;
    border-radius:12px; border-color:transparent; background:transparent; font-size:.95rem;
  }
  .vit-item .curto{display:none}
  .vit-item .longo{display:inline}
  .vit-item-icone{width:34px; height:34px; border-radius:10px}
  .vit-item-icone svg{width:17px; height:17px}
  .vit-item:hover{background:rgba(255,255,255,.07)}
  .vit-item[aria-current="true"]{background:var(--navy-sup); border-color:rgba(255,255,255,.18); color:#fff}
}
@media (prefers-reduced-motion:reduce){ .vit-slide video, .vit-barra i{transition:none} }

/* ---------- processo ---------- */
.processo{display:grid; gap:1.2rem}
@media (min-width:760px){ .processo{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .processo{grid-template-columns:repeat(4,1fr)} }
.etapa{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .22s, transform .22s;
}
.etapa:hover{box-shadow:var(--sombra-alta); transform:translateY(-3px)}
.etapa-img{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--navy)}
.etapa-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.etapa:hover .etapa-img img{transform:scale(1.05)}
.etapa-n{
  position:absolute; left:0; bottom:0;
  font-family:var(--mono); font-size:.76rem; font-weight:500; letter-spacing:.1em;
  background:var(--azul); color:#fff; padding:.35rem .75rem; border-radius:0 8px 0 0;
}
.etapa-corpo{padding:1.15rem 1.25rem 1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1}
.etapa-corpo h3{font-size:1.1rem}
.etapa-corpo p{font-size:.91rem; color:var(--texto-2); line-height:1.55}
.etapa ul{margin:.2rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.35rem}
.etapa li{display:flex; gap:.5rem; font-size:.85rem; color:var(--texto-2)}
.etapa li::before{content:""; flex:none; width:5px; height:5px; border-radius:1px; background:var(--azul); margin-top:.55rem}

/* ---------- sobre ---------- */
.sobre{display:grid; gap:clamp(2rem,4vw,3.2rem); align-items:start}
@media (min-width:920px){ .sobre{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)} }
.sobre-lado{display:grid; gap:1rem; align-content:start}
/* desktop: a coluna da foto acompanha o texto, que e mais longo */
@media (min-width:920px){ .sobre-lado{position:sticky; top:6.5rem} }
/* celular: foto, depois o texto, e os numeros por ultimo, antes da linha do tempo */
@media (max-width:919px){
  .sobre-lado{display:contents}
  .sobre-lado .sobre-foto{order:1}
  .sobre > :not(.sobre-lado){order:2}
  .sobre-lado .nums-3{order:3}
}
.sobre-foto{position:relative; border-radius:var(--raio); overflow:hidden}
/* os numeros da empresa, realocados embaixo da foto: tres colunas em qualquer tela */
.nums.nums-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.nums-3 .num{padding:clamp(1rem,2.2vw,1.4rem) clamp(.8rem,1.8vw,1.2rem)}
.nums-3 .num b{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.nums-3 .num strong{margin-top:.5rem; font-size:clamp(.86rem,1.3vw,.95rem); line-height:1.3}
.nums-3 .num > span{font-size:clamp(.76rem,1.1vw,.84rem); line-height:1.35}
.sobre-foto img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover}
.sobre p + p{margin-top:1rem}
.pilares{display:grid; gap:.8rem; margin-top:1.8rem}
@media (min-width:560px){ .pilares{grid-template-columns:repeat(3,1fr)} }
.pilar{background:var(--gelo); border:1px solid var(--linha); border-radius:var(--raio-sm); padding:1rem 1.05rem}
.pilar b{display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--azul-d); margin-bottom:.4rem}
.pilar p{font-size:.88rem; color:var(--texto-2); line-height:1.5}

/* linha do tempo */
.linha-tempo{display:grid; gap:0; margin-top:clamp(2.4rem,5vw,3.6rem)}
@media (min-width:760px){ .linha-tempo{grid-template-columns:repeat(4,1fr)} }
.marco{position:relative; padding-top:2.2rem; padding-right:1.2rem}
.marco::before{
  content:""; position:absolute; top:.45rem; left:0; right:0; height:2px;
  background:var(--linha);
}
.marco::after{
  content:""; position:absolute; top:0; left:0; width:12px; height:12px;
  border-radius:50%; background:var(--azul); border:3px solid var(--branco);
  box-shadow:0 0 0 2px var(--azul);
}
.marco:last-child::before{background:linear-gradient(90deg,var(--linha) 0 40%, transparent 40%)}
.secao-gelo .marco::after{border-color:var(--gelo)}
.marco b{display:block; font-family:var(--serif); font-size:1.7rem; line-height:1; color:var(--azul-d); font-weight:600; letter-spacing:-.01em}
.marco strong{display:block; margin-top:.3rem; font-size:1.02rem; font-weight:600}
.marco p{margin-top:.35rem; font-size:.88rem; color:var(--texto-2); line-height:1.5}
@media (max-width:759px){
  .marco{padding-left:1.6rem; padding-top:.3rem; padding-bottom:1.6rem; padding-right:0}
  .marco::before{left:5px; top:0; bottom:0; right:auto; width:2px; height:auto}
  .marco::after{top:.3rem}
  .marco:last-child::before{background:linear-gradient(180deg,var(--linha) 0 30%, transparent 30%)}
}

/* Sobre em fundo marinho: números, pilares e linha do tempo */
.escuro .nums{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.14)}
.escuro .num{background:var(--navy-sup)}
.escuro .num b{color:#fff}
.escuro .num b .un{color:var(--azul-luz)}
.escuro .num strong{color:#fff}
.escuro .num > span{color:var(--d-texto-2)}
.escuro .pilar{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14)}
.escuro .pilar b{color:#93AAFF}
.escuro .pilar p{color:var(--d-texto-2)}
.escuro .marco::before{background:rgba(255,255,255,.2)}
.escuro .marco:last-child::before{background:linear-gradient(90deg,rgba(255,255,255,.2) 0 40%, transparent 40%)}
.escuro .marco::after{background:var(--azul-luz); border-color:var(--navy); box-shadow:0 0 0 2px var(--azul-luz)}
.escuro .marco b{color:var(--azul-luz)}
.escuro .marco strong{color:#fff}
.escuro .marco p{color:var(--d-texto-2)}
@media (max-width:759px){
  .escuro .marco:last-child::before{background:linear-gradient(180deg,rgba(255,255,255,.2) 0 30%, transparent 30%)}
}

/* ---------- contato ---------- */
.contato{display:grid; gap:clamp(1.6rem,3.5vw,2.6rem); align-items:start}
@media (min-width:920px){ .contato{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} }
.info{display:grid; grid-auto-rows:1fr; gap:1rem}
.info-item{
  display:flex; gap:1rem; align-items:center;
  background:rgba(255,255,255,.06); border:1px solid var(--d-linha);
  border-radius:var(--raio-sm); padding:1.05rem 1.15rem;
  text-decoration:none; transition:background .2s, border-color .2s;
}
a.info-item:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); text-decoration:none}
.info-icone{width:44px; height:44px; flex:none; border-radius:12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; color:var(--azul-luz)}
.info-icone svg{width:20px; height:20px; display:block}
.info-item b{display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#8D95C8; font-weight:500}
.info-item > span:last-child{display:flex; flex-direction:column; justify-content:center; gap:.25rem; min-width:0}
.info-item span span{display:block; color:#fff; font-size:1rem; font-weight:500; line-height:1.35}

.form-card{
  background:var(--branco); color:var(--texto);
  border-radius:var(--raio); padding:clamp(1.3rem,3vw,2rem);
  box-shadow:var(--sombra-alta);
}
.escuro .form-card h3,
.form-card h3{color:var(--texto); font-size:1.25rem; margin-bottom:.3rem}
.form-card > p{font-size:.9rem; color:var(--texto-2); margin-bottom:1.4rem}
.campos{display:grid; gap:.95rem}
@media (min-width:600px){ .campos{grid-template-columns:repeat(2,1fr)} .campo-full{grid-column:1 / -1} }
.campo{display:flex; flex-direction:column; gap:.32rem}
.campo label{font-size:.83rem; font-weight:600; color:var(--texto-2)}
.campo label .req{color:var(--azul-d)}
.campo input,.campo select,.campo textarea{
  font:inherit; font-size:.95rem; color:var(--texto);
  background:var(--branco); border:1.5px solid var(--linha); border-radius:9px;
  padding:.72rem .85rem; width:100%; transition:border-color .16s, box-shadow .16s;
}
.campo textarea{resize:vertical; min-height:96px}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(56,102,243,.16);
}
.campo input:user-invalid,.campo select:user-invalid{border-color:var(--coral)}
.pote{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.pular{
  position:absolute; left:10px; top:-60px; z-index:90;
  background:var(--verde); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 9px 9px;
  font-weight:600; font-size:.92rem; text-decoration:none; transition:top .18s;
}
.pular:focus{top:0; text-decoration:none}
.form-acoes{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.3rem}
.form-acoes .btn{flex:1 1 auto; min-width:190px}
.form-nota{margin-top:1rem; font-size:.8rem; color:var(--texto-3)}
.form-aviso{
  margin-top:1rem; padding:.85rem 1rem; border-radius:9px; font-size:.9rem;
  border:1px solid; display:none;
}
.form-aviso.ok{display:block; background:#EAF7EF; border-color:#9ED5B4; color:#14633A}
.form-aviso.erro{display:block; background:#FDECEC; border-color:#F5B4B2; color:#98221F}

/* ---------- rodapé ---------- */
.rodape{background:#090934; color:var(--d-texto-2); padding-block:clamp(2.6rem,5vw,4rem) 0}
.rodape-grade{display:grid; gap:2rem}
@media (min-width:760px){ .rodape-grade{grid-template-columns:1.6fr 1fr 1fr 1.2fr} }
.rodape h4, .rodape .rodape-col-t{font-size:.74rem; font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#7F87BC; margin-bottom:.9rem; font-weight:500}
.rodape ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem}
.rodape a{color:var(--d-texto-2); font-size:.93rem; text-decoration:none}
.rodape li{font-size:.93rem; line-height:1.5}
.rodape a:hover{color:#fff; text-decoration:none}
.rodape-marca img{height:30px; width:auto; margin-bottom:1.1rem}
.rodape-marca p{font-size:.9rem; line-height:1.6; max-width:38ch}
.rodape-razao{margin-top:.9rem; font-family:var(--mono); font-size:.74rem; color:#767EB6; line-height:1.6}
.sociais{display:flex; gap:.6rem; margin-top:1.1rem}
.sociais a{
  width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:#fff; transition:background .2s;
}
.sociais a:hover{background:var(--azul)}
.sociais svg{width:18px; height:18px}
.rodape-base{
  margin-top:clamp(2rem,4vw,3rem); border-top:1px solid rgba(255,255,255,.1);
  padding-block:1.3rem; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem;
  align-items:center; justify-content:space-between; font-size:.83rem; color:#767EB6;
}
/* o fim da página fica livre dos botões flutuantes (WhatsApp e voltar ao topo) */
.rodape-base{padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px))}
@media (min-width:600px){ .rodape-base{padding-bottom:calc(132px + env(safe-area-inset-bottom, 0px))} }

/* ---------- botão WhatsApp flutuante ---------- */
.zap-flut{
  position:fixed; right:16px; bottom:16px; z-index:70;
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--verde); color:#fff; font-weight:600; font-size:.92rem;
  padding:.8rem 1.1rem; border-radius:999px; text-decoration:none;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
  padding-bottom:calc(.8rem + env(safe-area-inset-bottom, 0px));
  transition:transform .2s, background .2s;
}
.zap-flut:hover{background:var(--verde-d); transform:translateY(-2px); text-decoration:none}
.zap-flut svg{width:20px; height:20px; flex:none}
.zap-flut span{display:none}
@media (min-width:600px){ .zap-flut span{display:inline} }

/* ---------- animações de entrada (só com JS) ---------- */
.js .revela{opacity:0; transform:translateY(18px)}
.js .revela.dentro{
  opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}
.js .revela.d1{transition-delay:.07s}
.js .revela.d2{transition-delay:.14s}
.js .revela.d3{transition-delay:.21s}
@media (prefers-reduced-motion: reduce){
  .js .revela{opacity:1 !important; transform:none !important; transition:none !important}
}

/* ---------- FAQ ---------- */
.faq{display:flex; flex-direction:column; gap:.7rem}
.q{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  overflow:hidden; transition:border-color .2s, box-shadow .2s;
}
.q[open]{border-color:var(--linha-2); box-shadow:var(--sombra)}
.q summary{
  cursor:pointer; list-style:none; padding:1.05rem 3rem 1.05rem 1.25rem; position:relative;
  font-family:var(--display); font-weight:600; font-size:1.02rem; letter-spacing:-.01em;
  color:var(--texto); line-height:1.4;
}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--azul-d)}
.q summary::after{
  content:""; position:absolute; right:1.25rem; top:1.45rem;
  width:11px; height:11px; border-right:2px solid var(--azul); border-bottom:2px solid var(--azul);
  transform:rotate(45deg); transition:transform .22s;
}
.q[open] summary::after{transform:rotate(-135deg); top:1.6rem}
.q .r{padding:0 1.25rem 1.3rem; display:flex; flex-direction:column; gap:.75rem}
.q .r p{font-size:.94rem; color:var(--texto-2); line-height:1.6; max-width:68ch}
.q .r p.nota{font-size:.82rem; color:var(--texto-3)}
.q .r ul{margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.3rem}
.q .r li{font-size:.94rem; color:var(--texto-2)}
.q .r li b{color:var(--texto); font-weight:600}
.q .r .t-medida{
  margin:.4rem 0 0; font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--azul-d);
}
.q .r a{font-weight:500}

.material{margin:0; display:flex; flex-direction:column; gap:.2rem}
.material dt{font-weight:600; font-size:.94rem; color:var(--texto); margin-top:.5rem}
.material dd{margin:0; font-size:.92rem; color:var(--texto-2); line-height:1.6; max-width:68ch}

.medidas{display:flex; flex-wrap:wrap; gap:.35rem}
.medidas span{
  font-family:var(--mono); font-size:.78rem; color:var(--texto);
  background:var(--gelo); border:1px solid var(--linha); border-radius:6px; padding:.24rem .55rem;
  font-variant-numeric:tabular-nums;
}

/* ---------- aviso de pedido mínimo ---------- */
.form-minimo{
  font-size:.86rem; color:var(--texto-2); line-height:1.55;
  background:var(--azul-claro); border:1px solid #CBD8FB; border-left:3px solid var(--azul);
  border-radius:0 8px 8px 0; padding:.8rem .95rem; margin-bottom:1.3rem;
}
.form-minimo b{color:var(--texto)}
.form-minimo .fm-titulo{
  font-family:var(--display); font-weight:600; color:var(--texto);
  font-size:.9rem; margin:0 0 .5rem;
}
.form-minimo ul{list-style:none; margin:0; padding:0; display:grid; gap:.42rem}
.form-minimo li{position:relative; padding-left:1.15rem}
.form-minimo li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:6px; height:6px; border-radius:50%; background:var(--azul);
}
.form-minimo .fm-nota{
  margin:.7rem 0 0; padding-top:.6rem; border-top:1px solid #CBD8FB;
  font-size:.82rem; color:var(--texto-2);
}

/* lista de criterios dentro do FAQ */
.lista-criterios{list-style:none; margin:.9rem 0; padding:0; display:grid; gap:.55rem}
.lista-criterios li{position:relative; padding-left:1.25rem}
.lista-criterios li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px; border-radius:50%; background:var(--azul);
}
.lista-criterios b{color:var(--texto)}

/* ---------- ouvidoria no rodapé ---------- */
.ouvidoria{
  margin-top:clamp(2rem,4vw,3rem); padding:clamp(1.2rem,3vw,1.7rem);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--raio);
  background:rgba(255,255,255,.04);
  display:grid; gap:1rem; align-items:center;
}
@media (min-width:860px){ .ouvidoria{grid-template-columns:auto minmax(0,1fr) auto; gap:1.3rem} }
.ouvidoria-icone{
  width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:var(--azul-luz);
}
.ouvidoria-icone svg{width:23px; height:23px}
.ouvidoria-txt h4{
  font-family:var(--display); font-size:1.05rem; font-weight:600; letter-spacing:-.015em;
  color:#fff; text-transform:none; margin-bottom:.35rem;
}
.ouvidoria-txt p{font-size:.9rem; color:var(--d-texto-2); line-height:1.6; max-width:62ch}
.ouvidoria-acao{display:flex; flex-direction:column; gap:.6rem; align-items:flex-start}
@media (min-width:860px){ .ouvidoria-acao{align-items:flex-end; text-align:right} }
.ouvidoria-acao .btn{padding:.7rem 1.1rem; font-size:.9rem; white-space:nowrap}
.ouvidoria-acao > a:not(.btn){font-size:.84rem; color:#8D95C8}
.ouvidoria-acao > a:not(.btn):hover{color:#fff}

.rodape-legais{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.2rem}
.rodape-legais a{font-size:.83rem; display:inline-block; padding-block:.7rem}

/* ---------- páginas de documento ---------- */
.doc{padding-block:clamp(2.6rem,6vw,4.5rem)}
.doc .wrap{max-width:820px}
.doc-volta{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.88rem;
  color:var(--texto-3); margin-bottom:1rem; min-height:44px;
}
.doc-volta:hover{color:var(--azul-d)}
.doc h1{font-size:clamp(1.8rem,4.4vw,2.7rem); margin-bottom:.6rem}
.doc-data{font-family:var(--mono); font-size:.78rem; color:var(--texto-3); margin-bottom:2rem}
.doc h2{font-size:clamp(1.15rem,2.4vw,1.4rem); margin-top:2.4rem; margin-bottom:.7rem}
.doc h3{font-size:1rem; margin-top:1.4rem; margin-bottom:.4rem}
.doc p, .doc li{color:var(--texto-2); font-size:.97rem; line-height:1.7; max-width:70ch}
.doc p + p{margin-top:.8rem}
.doc ul, .doc ol{margin:.7rem 0 0; padding-left:1.3rem; display:flex; flex-direction:column; gap:.45rem}
.doc ul + p, .doc ol + p, .doc dl + p{margin-top:1.1rem}
.doc li b{color:var(--texto)}
.topo-int.solo .topo-acoes{margin-left:auto}
.doc .destaque{
  background:var(--gelo); border:1px solid var(--linha); border-left:3px solid var(--azul);
  border-radius:0 10px 10px 0; padding:1rem 1.2rem; margin-top:1.2rem;
}
.doc .destaque p{margin:0}
.doc dl{margin:.8rem 0 0; display:flex; flex-direction:column; gap:.6rem}
.doc dt{font-weight:600; color:var(--texto); font-size:.95rem}
.doc dd{margin:.15rem 0 0; color:var(--texto-2); font-size:.95rem; line-height:1.65; max-width:70ch}

/* ---------- aviso de pedido mínimo ---------- */
.chip-alerta{
  color:#fff; background:rgba(140,166,255,.18); border-color:rgba(140,166,255,.45);
  text-decoration:none; font-weight:500; transition:background .18s, border-color .18s;
}
.chip-alerta:hover{background:rgba(140,166,255,.3); border-color:rgba(140,166,255,.7); text-decoration:none; color:#fff}
.chip-alerta svg{color:var(--azul-luz)}

.aviso-minimo{
  display:flex; gap:.8rem; align-items:flex-start;
  margin-top:clamp(1.4rem,3vw,2rem);
  background:var(--azul-claro); border:1px solid #CBD8FB; border-left:3px solid var(--azul);
  border-radius:0 var(--raio-sm) var(--raio-sm) 0; padding:1rem 1.15rem;
  font-size:.92rem; color:var(--texto-2); line-height:1.6;
}
.aviso-minimo svg{width:20px; height:20px; flex:none; color:var(--azul-d); margin-top:.15rem}
.aviso-minimo b{color:var(--texto); font-weight:600}
.aviso-minimo span{max-width:82ch}

/* ---------- canal de denúncias (só para funcionários) ---------- */
.canal{
  margin-top:clamp(2rem,4vw,3rem); padding:clamp(1.3rem,3vw,2rem);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--raio);
  background:rgba(255,255,255,.04);
}
.canal-cab{max-width:70ch; margin-bottom:clamp(1.3rem,3vw,1.8rem)}
.canal-cab h3{
  font-family:var(--display); font-size:clamp(1.1rem,2.2vw,1.3rem); font-weight:600;
  letter-spacing:-.015em; color:#fff; margin-bottom:.45rem; text-transform:none;
}
.canal-cab p{font-size:.92rem; color:var(--d-texto-2); line-height:1.6}

.canal-vias{display:grid; gap:1rem}
/* um cartão só: no computador o texto fica à esquerda e o botão à direita */
@media (min-width:860px){
  .canal-vias .via{display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:1.3rem; row-gap:.5rem; align-items:start}
  .canal-vias .via-icone{grid-row:1 / span 3}
  .canal-vias .via > :not(.via-icone):not(.btn):not(.via-nota){grid-column:2}
  .canal-vias .via .btn{grid-column:3; grid-row:1 / span 2; align-self:center; margin-top:0; white-space:nowrap}
  .canal-vias .via .via-nota{grid-column:3; grid-row:3; max-width:30ch; text-align:right}
}
.via{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--raio-sm); padding:1.25rem 1.3rem 1.4rem;
  display:flex; flex-direction:column; gap:.6rem; align-items:flex-start;
}
.via-icone{
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:var(--azul-luz); margin-bottom:.15rem;
}
.via-icone svg{width:21px; height:21px}
.via h4{
  font-family:var(--display); font-size:1rem; font-weight:600; letter-spacing:-.01em;
  color:#fff; text-transform:none;
}
.via p{font-size:.9rem; color:var(--d-texto-2); line-height:1.6; max-width:70ch}
.via .via-prazo{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.02em; color:var(--azul-luz);
  line-height:1.5;
}
.via .btn{margin-top:.3rem; padding:.7rem 1.1rem; font-size:.9rem}
.via .via-nota{font-size:.8rem; color:#7F87BC; line-height:1.5}

.rodape .canal-compromissos{
  list-style:none; margin:clamp(1.2rem,2.5vw,1.6rem) 0 0; padding:clamp(1rem,2vw,1.2rem) 0 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:grid; grid-template-columns:1fr; gap:.6rem;
}
@media (min-width:860px){ .rodape .canal-compromissos{grid-template-columns:repeat(3,1fr); gap:1.2rem} }
.canal-compromissos li{
  display:flex; gap:.55rem; font-size:.84rem; color:var(--d-texto-2); line-height:1.55;
}
.canal-compromissos li::before{
  content:""; flex:none; width:6px; height:6px; border-radius:2px;
  background:var(--azul-luz); margin-top:.5rem;
}

/* ---------- formulário do canal de denúncias ---------- */
.form-denuncia{
  margin-top:1.2rem; display:flex; flex-direction:column; gap:1rem;
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:clamp(1.2rem,3vw,1.8rem);
}
.form-denuncia .campo-full{width:100%}
.opcional{
  font-family:var(--mono); font-size:.68rem; font-weight:400; letter-spacing:.1em;
  text-transform:uppercase; color:var(--texto-3); margin-left:.4rem;
}
.campo-ajuda{margin-top:.35rem; font-size:.8rem; color:var(--texto-3)}
.form-denuncia .form-acoes{margin-top:.3rem}

/* ---------- ajustes de toque e leitura no celular (30/09/2026) ---------- */
@media (max-width:759px), (pointer:coarse){
  /* alvos de toque com pelo menos 40 px de altura */
  .galeria button{min-height:40px; font-size:.75rem}
  .ver-uso{min-height:40px; padding:.5rem .95rem .5rem .6rem; font-size:.84rem}
  .chip-alerta{min-height:40px}
  .aplics-pontos{gap:0}
  .aplics-pontos button{width:28px; height:36px}
  /* rótulos em mono: nada abaixo de 12 px */
  .familia-tag{font-size:.75rem}
  .info-item b, .pilar b, .opcional{font-size:.75rem}
}
@media (max-width:919px){
  /* no celular os cartões de contato ficam do tamanho do próprio conteúdo */
  .info{grid-auto-rows:auto}
}
/* telas bem estreitas (abaixo de 360 px): no cartão Sacos a etiqueta repetiria as abas
   PEBD/PEAD/PP da galeria e encostaria no "Ver em uso", então sai */
@media (max-width:359px){ #galSacos .familia-tag{display:none} }
/* celular deitado e telas baixas: o vídeo cabe inteiro na janela, sem rolar */
@media (max-height:520px){
  .modal-video{max-height:calc(100dvh - 1rem); padding:.6rem .8rem}
  .modal-video-cab{margin-bottom:.4rem}
  .modal-video-fechar{width:40px; height:40px}
  .modal-video video{width:auto; max-width:100%; height:auto; max-height:calc(100dvh - 6.5rem); margin-inline:auto}
  .modal-video-nota{margin-top:.4rem; font-size:.75rem}
}
/* abaixo de 360 px: logotipo e frase continuam lado a lado, sem empurrar o índice para uma terceira linha */
@media (max-width:359px){
  .topo-int{column-gap:.7rem}
  .topo-marca img{height:22px}
  .topo-frase{padding-left:.7rem; font-size:.78rem; max-width:8.8rem}
}
/* campo apontado pela validação do formulário */
.campo [aria-invalid="true"]{border-color:var(--coral); box-shadow:0 0 0 3px rgba(252,86,82,.18)}