/* =========================================================
   ALGAMOS — site institucional
   Paleta oficial: Verdes #133f2e #498c60 · Azuis #12394f #7295ac
                   Marrons #875136 #c99457 · Claros #d9d3c8 #f4f2ec
   Tipografia: Radley (títulos) · Josefin Sans (textos)
   ========================================================= */

:root{
  /* --- paleta da marca --- */
  --verde-profundo:#133f2e;
  --verde:#498c60;
  --petroleo:#12394f;
  --azul-claro:#7295ac;
  --marrom:#875136;
  --ocre:#c99457;
  --areia:#d9d3c8;
  --isabelline:#f4f2ec;

  /* --- papéis --- */
  --ground:var(--isabelline);
  --ground-deep:var(--petroleo);
  --ground-card:#eceadf;
  --ink:#182a22;
  --ink-soft:#4a574e;
  --ink-faint:#7b8178;
  --on-deep:var(--isabelline);
  --on-deep-soft:rgba(244,242,236,.74);
  --on-deep-faint:rgba(244,242,236,.5);
  --line:var(--areia);
  --line-deep:rgba(244,242,236,.18);

  /* --- ritmo --- */
  --measure:1180px;
  --gut:clamp(20px,5vw,56px);
  --sec-y:clamp(72px,11vw,140px);

  --ease:cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Josefin Sans","Trebuchet MS",system-ui,sans-serif;
  font-size:clamp(16px,.55vw + 15px,17.5px);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,.display{
  font-family:"Radley","Iowan Old Style",Georgia,serif;
  font-weight:400;
  line-height:1.15;
  text-wrap:balance;
  margin:0;
}
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; }

::selection{ background:var(--ocre); color:var(--isabelline); }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--petroleo); color:var(--isabelline);
  padding:.7em 1.2em; font-size:.9rem;
}
.skip:focus{ left:1rem; top:1rem; }

.wrap{
  width:100%;
  max-width:var(--measure);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* Rótulos pequenos usam o tom mais escuro de cada família sobre fundo
   claro e o mais quente sobre o petróleo — os dois passam em AA.
   Ocre sobre Isabelline dá só 2,4:1 e não serve para texto. */
.eyebrow{
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--marrom);
  margin:0 0 1.4em;
}
.eyebrow.on-deep{ color:var(--ocre); }

/* ---------------------------------------------------------
   Ornamento: a linha d'água do símbolo, usada como divisor
   --------------------------------------------------------- */
.onda{
  width:64px; height:auto;
  color:var(--ocre);
  opacity:.85;
  margin-inline:auto;
}
.onda.on-deep{ color:var(--azul-claro); }
.onda.left{ margin-inline:0; }

/* =========================================================
   HEADER
   ========================================================= */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:90;
  background:rgba(18,57,79,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-deep);
  transform:translateY(-100%);
  transition:transform .45s var(--ease);
}
.hd.show{ transform:translateY(0); }
.hd-in{
  display:flex; align-items:center; gap:2rem;
  min-height:88px;
}
.hd-logo{ width:clamp(140px,15vw,175px); color:var(--isabelline); flex:none; }
.hd-logo svg{ width:100%; height:auto; }

.hd-nav{ margin-left:auto; display:flex; align-items:center; gap:1.5rem; }
.hd-nav a{
  font-size:.82rem;
  letter-spacing:.06em;
  text-decoration:none;
  color:var(--on-deep-soft);
  padding:.3em 0;
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
  white-space:nowrap;
}
.hd-nav a:hover{ color:var(--isabelline); }
.hd-nav a[aria-current="true"]{ color:var(--isabelline); border-bottom-color:var(--ocre); }

.hd-cta{
  flex:none;
  font-size:.8rem; letter-spacing:.06em;
  text-decoration:none;
  color:var(--petroleo);
  background:var(--isabelline);
  padding:.55em 1.1em;
  border-radius:100px;
  font-weight:600;
  transition:background .2s,transform .2s;
}
.hd-cta:hover{ background:var(--ocre); color:var(--petroleo); transform:translateY(-1px); }

/* --- botão de menu (só no mobile) --- */
.hd-burger{
  display:none;
  flex:none;
  align-items:center; gap:.55em;
  background:none; border:1px solid rgba(244,242,236,.34);
  color:var(--isabelline);
  font-family:inherit; font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase;
  padding:.5em .9em; border-radius:100px;
  cursor:pointer;
  transition:border-color .2s,background .2s;
}
.hd-burger:hover{ border-color:var(--isabelline); background:rgba(244,242,236,.08); }
.hd-burger .bars{
  position:relative; width:15px; height:9px; flex:none;
}
.hd-burger .bars::before,
.hd-burger .bars::after{
  content:""; position:absolute; left:0; right:0; height:1.5px;
  background:currentColor; transition:transform .25s var(--ease),opacity .2s;
}
.hd-burger .bars::before{ top:0; }
.hd-burger .bars::after{ bottom:0; }
.hd-burger[aria-expanded="true"] .bars::before{ transform:translateY(3.75px) rotate(45deg); }
.hd-burger[aria-expanded="true"] .bars::after{ transform:translateY(-3.75px) rotate(-45deg); }

/* --- painel do menu mobile --- */
.hd-panel{
  display:none;
  border-top:1px solid var(--line-deep);
  padding-block:.6em 1.2em;
  max-height:calc(100svh - 88px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
/* com o menu aberto o fundo precisa ser opaco: o texto da página
   não pode aparecer por trás dos itens */
.hd.open{ background:var(--petroleo); }
.hd-panel a{
  display:block;
  padding:.72em .2em;
  font-size:.95rem;
  text-decoration:none;
  color:var(--on-deep-soft);
  border-bottom:1px solid rgba(244,242,236,.08);
}
.hd-panel a:last-child{ border-bottom:none; }
.hd-panel a[aria-current="true"]{ color:var(--isabelline); }

@media (max-width:920px){
  .hd-nav{ display:none; }
  .hd-in{ gap:.7rem; }
  /* O botão de WhatsApp já flutua fixo no canto da tela no mobile —
     repeti-lo aqui só espreme o cabeçalho ao lado do menu. */
  .hd-cta{ display:none; }
  .hd-burger{ display:inline-flex; margin-left:auto; }
  .hd.open .hd-panel{ display:block; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  overflow:hidden;
  background:var(--petroleo);
  color:var(--on-deep);
  isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media video,.hero-media img{
  width:100%; height:100%; object-fit:cover;
}
/* vídeo a 100% de opacidade — sem véu escurecendo por cima, a
   vinheta já vem trabalhada/graduada pronta */
.hero-veil{
  position:absolute; inset:0; z-index:-1;
  background:none;
}

.hero-in{
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
  padding-block:clamp(70px,10vh,110px) clamp(40px,8vh,70px);
  gap:clamp(34px,5.5vh,54px);
}

/* --- logo --- */
/* com a tela mais limpa, o logotipo pode ocupar mais espaço */
.hero-logo{
  width:clamp(250px,36vw,380px);
  color:var(--isabelline);
}
.hero-logo svg{ width:100%; height:auto; }

/* Sem menu na primeira tela: a navegação entra na barra fixa
   assim que o visitante começa a rolar. O centro do hero é só
   o logotipo, a frase e os botões. */
.hero-sub{
  max-width:54ch;
  color:var(--on-deep-soft);
  font-size:clamp(1rem,1.5vw,1.16rem);
}
.hero-sub em{ font-style:italic; color:var(--isabelline); }
/* quebras manuais só na tela larga — em telas estreitas o texto já
   quebra naturalmente, e as duas juntas deixavam linhas curtas
   demais (picadas) */
@media (max-width:600px){ .br-desktop{ display:none; } }

.hero-ctas{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }

.btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.8em 1.6em;
  border-radius:100px;
  font-size:.9rem; font-weight:600; letter-spacing:.04em;
  text-decoration:none;
  border:1px solid transparent;
  transition:background .22s,color .22s,border-color .22s,transform .22s;
  cursor:pointer;
}
/* Texto petróleo sobre o ocre: 4,56:1. O inverso (claro sobre ocre)
   fica em 2,4:1 e reprova — por isso o botão principal é escuro sobre quente. */
.btn-solid{ background:var(--ocre); color:var(--petroleo); }
.btn-solid:hover{ background:var(--isabelline); color:var(--petroleo); transform:translateY(-2px); }
.btn-ghost{ border-color:rgba(244,242,236,.42); color:var(--isabelline); }
.btn-ghost:hover{ border-color:var(--isabelline); background:rgba(244,242,236,.1); transform:translateY(-2px); }
.btn-dark{ background:var(--petroleo); color:var(--isabelline); }
.btn-dark:hover{ background:var(--verde-profundo); transform:translateY(-2px); }
.btn-outline{ border-color:var(--petroleo); color:var(--petroleo); }
.btn-outline:hover{ background:var(--petroleo); color:var(--isabelline); transform:translateY(-2px); }

/* --- indicador de rolagem --- */
.hero-cue{
  display:flex; flex-direction:column; align-items:center; gap:.7em;
  padding-bottom:clamp(20px,4vh,36px);
  color:var(--on-deep-soft);
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
}
.hero-cue .rail{
  width:1px; height:44px;
  background:linear-gradient(180deg,rgba(244,242,236,.45),transparent);
  position:relative; overflow:hidden;
}
.hero-cue .rail::after{
  content:""; position:absolute; inset:0 auto auto 0;
  width:1px; height:14px; background:var(--ocre);
  animation:drip 2.4s var(--ease) infinite;
}
@keyframes drip{ 0%{ transform:translateY(-16px); opacity:0; } 30%{ opacity:1; } 100%{ transform:translateY(46px); opacity:0; } }

/* =========================================================
   SEÇÕES
   ========================================================= */
.sec{
  padding-block:var(--sec-y);
  position:relative;
  /* o cabeçalho fixo não pode cobrir o título ao chegar por link */
  scroll-margin-top:92px;
}
.sec-deep{ background:var(--petroleo); color:var(--on-deep); }
.sec-deep h2,.sec-deep h3{ color:var(--isabelline); }
.sec-deep p{ color:var(--on-deep-soft); }
.sec-sand{ background:var(--ground-card); }

/* Grão sutil nos fundos claros — textura de papel, não decoração óbvia.
   Vive atrás de todo o conteúdo (z-index negativo pinta acima só da
   cor de fundo da seção, nunca por cima de texto ou imagem). */
.sec:not(.sec-deep)::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* Nas seções azuis, o grão vira luz: manchas suaves das cores da marca
   que derivam devagar, como caudal ou reflexo de luz debaixo d'água —
   a mesma ideia de fluidez do grão, só que como movimento em vez de textura. */
.sec-deep::before{
  content:"";
  position:absolute; inset:0; z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(38% 46% at 18% 22%, rgba(114,149,172,.22), transparent 70%),
    radial-gradient(32% 40% at 82% 68%, rgba(73,140,96,.16), transparent 72%),
    radial-gradient(26% 30% at 55% 92%, rgba(201,148,87,.09), transparent 75%);
  animation:driftLight 24s ease-in-out infinite alternate;
}
@keyframes driftLight{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(2.5%,-3%) scale(1.05); }
  100%{ transform:translate(-2%,2.5%) scale(1); }
}

.sec-h{
  font-size:clamp(1.75rem,4vw,2.9rem);
  color:var(--verde-profundo);
  max-width:22ch;
}
.sec-deep .sec-h{ color:var(--isabelline); }
/* "Por que algas" promove uma frase inteira a título — precisa de
   mais largura que um título curto, e um pouco menos de tamanho. */
.sec-h.quote{
  max-width:30ch;
  font-size:clamp(1.5rem,3.2vw,2.35rem);
}
.sec-lead{
  margin-top:1.1em;
  max-width:60ch;
  color:var(--ink-soft);
  font-size:clamp(1rem,1.3vw,1.12rem);
}
.sec-deep .sec-lead{ color:var(--on-deep-soft); }

.prose{ display:flex; flex-direction:column; gap:1.15em; max-width:60ch; }
.prose p{ color:var(--ink-soft); }
.sec-deep .prose p{ color:var(--on-deep-soft); }
.prose strong{ color:var(--ink); font-weight:600; }
.sec-deep .prose strong{ color:var(--isabelline); }
.prose em{ font-style:italic; }
.prose p.prose-callout{
  font-family:"Radley",Georgia,serif;
  font-size:1.2em;
  line-height:1.4;
  color:var(--verde-profundo);
  border-left:3px solid var(--ocre);
  padding-left:.85em;
}
.sec-deep .prose p.prose-callout{ color:var(--isabelline); }

/* =========================================================
   HISTÓRIA — texto + foto, com linha do tempo horizontal abaixo
   ========================================================= */
.hist{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(36px,6vw,80px);
  align-items:start;
}
@media (max-width:880px){ .hist{ grid-template-columns:1fr; } }

.hist-fig{ margin:0; }
.hist-frame{
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:4px;
}
.hist-frame img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:880px){ .hist-frame{ aspect-ratio:16/10; } }

/* linha do tempo horizontal, abaixo do bloco texto+foto */
.tl{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(20px,3vw,32px);
  margin-top:clamp(48px,7vw,76px);
  padding-top:2.4rem;
}
/* a linha reta virou uma corrente ondulada — um ladrilho de onda em
   SVG que se repete na horizontal e escoa devagar, como água corrente,
   com as pontas esmaecidas por uma máscara de opacidade */
.tl::before{
  content:""; position:absolute; left:0; right:0; top:.9rem;
  height:1px;
  background:linear-gradient(90deg,var(--areia),var(--verde) 45%,var(--areia));
}
.tl-item{ position:relative; }
.tl-item::before{
  content:""; position:absolute; left:0; top:-1.85rem;
  width:11px; height:11px; border-radius:50%;
  background:var(--ground);
  border:1.5px solid var(--verde);
}
.tl-item.mark::before{ background:var(--verde); box-shadow:0 0 0 4px rgba(73,140,96,.16); }
.tl-when{
  display:block;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--marrom); font-weight:600;
}
.tl-what{ display:block; margin-top:.25em; color:var(--ink-soft); font-size:.9rem; line-height:1.5; }

@media (max-width:880px){
  .tl{
    display:flex; grid-template-columns:unset;
    overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:.6rem;
    /* esmaece as bordas — sinaliza que dá pra arrastar antes mesmo
       de tocar, sem depender só de o card ficar cortado */
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
  }
  .tl-item{ flex:0 0 200px; scroll-snap-align:start; }
}
@media (max-width:600px){
  .scroll-hint{
    display:flex; align-items:center; gap:.5em;
    margin-top:.9em;
    font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--marrom); font-weight:600;
  }
  .scroll-hint svg{ width:15px; height:15px; flex:none; }
}
@media (min-width:601px){ .scroll-hint{ display:none; } }
.sec-deep .scroll-hint{ color:var(--ocre); }

/* =========================================================
   PLACEHOLDER DE FOTO
   ========================================================= */
.ph{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.85em;
  text-align:center;
  padding:clamp(24px,4vw,40px);
  background:
    repeating-linear-gradient(135deg,
      rgba(201,148,87,.05) 0 12px,
      rgba(201,148,87,.11) 12px 24px);
  border:1px dashed rgba(201,148,87,.6);
  border-radius:4px;
  color:var(--ink-soft);
  min-height:200px;
}
.sec-deep .ph{
  background:
    repeating-linear-gradient(135deg,
      rgba(244,242,236,.04) 0 12px,
      rgba(244,242,236,.08) 12px 24px);
  border-color:rgba(244,242,236,.35);
  color:var(--on-deep-soft);
}
.ph[data-ratio="4-5"]{ aspect-ratio:4/5; }
.ph[data-ratio="3-2"]{ aspect-ratio:3/2; }
.ph[data-ratio="1-1"]{ aspect-ratio:1/1; }
.ph[data-ratio="16-9"]{ aspect-ratio:16/9; }
.ph .ph-tag{
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--marrom);
}
.sec-deep .ph .ph-tag{ color:var(--ocre); }
.ph .ph-what{
  font-family:"Radley",Georgia,serif;
  font-size:1.02rem; color:var(--ink);
  max-width:26ch; line-height:1.35;
}
.sec-deep .ph .ph-what{ color:var(--isabelline); }
.ph .ph-note{ font-size:.83rem; max-width:34ch; line-height:1.5; opacity:.9; }
.ph .onda{ width:38px; opacity:.55; }

.hist-photo{
  display:block; width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:4px;
}

/* =========================================================
   POR QUE ALGAS — declaração + foto sangrando
   ========================================================= */
.why{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(36px,6vw,72px);
  align-items:start;
}
@media (max-width:880px){ .why{ grid-template-columns:1fr; } }
/* a foto acompanha a rolagem do texto em vez de terminar cedo e
   deixar um vão vazio abaixo dela — e ganha um recorte mais alto,
   fechado (4:5), para pesar visualmente como o bloco de texto */
.why-fig{
  position:sticky;
  top:calc(88px + 32px);
  margin:0;
}
.why-fig .why-fig-frame{
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:4px;
}
.why-fig img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 30%;
  filter:saturate(.96);
}
.why-fig figcaption{
  margin-top:.9em;
  font-size:.8rem; letter-spacing:.04em;
  color:var(--on-deep-soft);
}
@media (max-width:880px){
  .why-fig{ position:static; }
  .why-fig .why-fig-frame{ aspect-ratio:16/10; }
}
.why-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(28px,4vw,20px);
  margin-top:clamp(48px,7vw,76px);
  padding-top:clamp(40px,6vw,56px);
  border-top:1px solid var(--line-deep);
}
@media (max-width:760px){ .why-stats{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .why-stats{ grid-template-columns:1fr; } }

.why-stat{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  gap:.9em;
}
/* especificidade dupla de propósito: .why-stat span (a legenda) também
   é um span e não pode vencer a cor do ícone */
.why-stat .why-stat-icon{
  width:34px; height:34px;
  color:var(--azul-claro);
}
.why-stat-icon svg{ width:100%; height:100%; }
.why-stat b{
  font-family:"Radley",Georgia,serif;
  font-size:1.15rem;
  font-weight:400;
  color:var(--isabelline);
}
.why-stat span{
  font-size:.87rem; color:var(--on-deep-soft); line-height:1.55;
  max-width:20ch;
}

.why-highlight{
  margin-top:clamp(28px,4vw,40px);
  display:flex; align-items:center; gap:1.1em;
  padding:1.1em 1.4em;
  border:1px solid rgba(201,148,87,.35);
  border-radius:6px;
  background:rgba(201,148,87,.08);
}
.why-highlight-icon{ flex:none; width:30px; height:30px; color:var(--ocre); }
.why-highlight-icon svg{ width:100%; height:100%; }
.why-highlight p{ font-size:.92rem; color:var(--on-deep-soft); line-height:1.6; margin:0; }
.why-highlight strong{ color:var(--isabelline); }
@media (max-width:520px){ .why-highlight{ flex-direction:column; align-items:flex-start; } }

/* =========================================================
   PRODUTOS — cor por linha
   ========================================================= */
.prods{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(18px,2.4vw,26px);
  margin-top:clamp(36px,5vw,56px);
}
.prod{
  display:flex; flex-direction:column;
  background:var(--isabelline);
  border:1px solid var(--line);
  border-top:3px solid var(--accent,var(--verde));
  border-radius:3px;
  overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.sec-sand .prod{ background:var(--isabelline); }
.prod:hover{ transform:translateY(-4px); box-shadow:0 14px 34px -18px rgba(19,63,46,.4); }
.prod .ph{ border:none; border-radius:0; min-height:0; aspect-ratio:4/3; }
.prod .prod-photo{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.prod-body{ padding:1.3em 1.4em 1.5em; display:flex; flex-direction:column; gap:.55em; flex:1; }
.prod-kind{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600;
  /* --accent tinge a borda e o marcador; --accent-ink garante o contraste do texto */
  color:var(--accent-ink,var(--accent,var(--verde)));
  display:flex; align-items:center; gap:.5em;
}
.prod-kind::before{
  content:""; width:8px; height:8px; border-radius:2px;
  background:var(--accent,var(--verde)); flex:none;
}
.prod h3{ font-size:1.22rem; color:var(--verde-profundo); }
.prod p{ font-size:.94rem; color:var(--ink-soft); }
.prod-link{
  margin-top:auto; padding-top:.6em;
  font-size:.84rem; font-weight:600; letter-spacing:.04em;
  color:var(--accent-ink,var(--accent,var(--verde)));
  text-decoration:none;
  display:inline-flex; align-items:center; gap:.4em;
  align-self:flex-start;
}
.prod-link::after{ content:"→"; transition:transform .2s; }
.prod-link:hover::after{ transform:translateX(3px); }

/* =========================================================
   ALGA IN NATURA
   ========================================================= */
.innatura{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,6vw,72px);
  align-items:center;
}
@media (max-width:880px){ .innatura{ grid-template-columns:1fr; } }
.innatura-fig{ margin:0; }
.innatura-frame{
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:4px;
}
.innatura-frame img{
  width:100%; height:100%;
  object-fit:cover;
}
.innatura-fig figcaption{
  margin-top:.9em;
  font-size:.8rem; letter-spacing:.04em;
  color:var(--ink-soft);
}

/* =========================================================
   DIFERENCIAIS
   ========================================================= */
.diffs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px;
  margin-top:clamp(36px,5vw,56px);
  background:var(--line);
  border:1px solid var(--line);
}
.diff{ background:var(--ground); padding:clamp(22px,3vw,32px); }
/* Um ícone de traço fino por diferencial — no mesmo espírito do
   símbolo da marca (linhas orgânicas, sem preenchimento) — em vez
   de um ornamento repetido que não dizia nada sobre o item. */
.diff-icon{
  display:block; width:34px; height:34px;
  color:var(--verde-profundo);
  margin-bottom:1.1em;
}
.diff-icon svg{ width:100%; height:100%; }
.diff h3{ font-size:1.14rem; color:var(--verde-profundo); }
.diff p{ margin-top:.6em; font-size:.94rem; color:var(--ink-soft); }

/* =========================================================
   MÍDIA
   ========================================================= */

/* --- fundo de oceano por trás da seção inteira --- */
#midia{ position:relative; overflow:hidden; isolation:isolate; }
.midia-bg{ position:absolute; inset:0; z-index:-2; }
.midia-bg img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.85);
  animation:driftZoom 26s ease-in-out infinite alternate;
}
@keyframes driftZoom{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
/* o mesmo tratamento de véu do hero: a foto dá fluidez,
   o véu garante que o texto continua lendo em cima do petróleo */
.midia-veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(14,44,61,.95) 0%, rgba(18,57,79,.9) 40%, rgba(18,57,79,.9) 65%, rgba(14,44,61,.96) 100%);
}
@media (prefers-reduced-motion:reduce){ .midia-bg img{ animation:none; } }

/* carrossel horizontal: uma linha só, arrasta/rola para o lado */
.press{
  --press-gap:clamp(16px,2vw,24px);
  display:flex;
  gap:var(--press-gap);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding-bottom:2px;
  scrollbar-width:none;
}
.press::-webkit-scrollbar{ display:none; }
.press .vcard{ flex:0 0 clamp(260px,28vw,320px); scroll-snap-align:start; }
/* em telas largas o card é recalculado para caber exatamente 3 por
   vez — sem nenhum pedaço de um 4º aparecendo cortado na borda.
   .press mantém a largura natural (alinhada com o título acima);
   as setas ficam sobrepostas, não empurram o carrossel. */
@media (min-width:981px){
  .press .vcard{ flex-basis:calc((100% - 2 * var(--press-gap)) / 3); }
}

/* setas sobre a quina de fora do 1º/último card — perto o bastante
   pra pertencer visualmente ao carrossel, sem empurrar os cards e
   desalinhar do título acima */
.press-wrap{ position:relative; margin-top:clamp(36px,5vw,56px); }
.press-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--petroleo);
  border:1px solid rgba(244,242,236,.4);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.5);
  color:var(--isabelline);
  cursor:pointer; padding:0;
  transition:background .2s,border-color .2s,transform .2s var(--ease);
}
.press-nav:hover{ background:var(--ocre); border-color:var(--ocre); color:var(--petroleo); }
.press-nav svg{ width:20px; height:20px; }
.press-nav--prev{ left:-16px; }
.press-nav--next{ right:-16px; }
@media (max-width:760px){
  .press-nav{ display:none; }
  .press{
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
  }
}

/* --- cartão de vídeo: miniatura + play + legenda --- */
.vcard{
  display:flex; flex-direction:column;
  border:1px solid var(--line-deep);
  border-radius:6px;
  overflow:hidden;
  text-decoration:none;
  background:rgba(14,28,38,.35);
  backdrop-filter:blur(2px);
  transition:background .25s,border-color .25s,transform .25s var(--ease);
}
.vcard:hover{ background:rgba(244,242,236,.08); border-color:rgba(244,242,236,.4); transform:translateY(-3px); }

.vcard-thumb{
  position:relative;
  aspect-ratio:16/9;
  display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center;
  overflow:hidden;
}
.vcard-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vcard-thumb::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,44,61,.12) 0%, rgba(14,44,61,.58) 100%);
}
.vcard-play{
  position:relative; z-index:2;
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(14,28,38,.55);
  border:1px solid rgba(244,242,236,.5);
  color:var(--isabelline);
  padding:0; margin:0; cursor:pointer; font:inherit;
  transition:transform .25s var(--ease),background .2s,color .2s,border-color .2s;
}
.vcard-play svg{ width:18px; height:18px; margin-left:3px; }
.vcard:hover .vcard-play,
.vcard-play:hover,
.vcard-play:focus-visible{ transform:scale(1.08); background:var(--ocre); border-color:var(--ocre); color:var(--petroleo); }

.vcard-body{
  padding:1.1em 1.3em 1.3em;
  display:flex; flex-direction:column; gap:.55em;
}
.press-src{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ocre); font-weight:600;
}
.vcard-body h3{ font-size:1.05rem; color:var(--isabelline); line-height:1.3; }
.press-go{
  margin-top:auto; font-size:.83rem; color:var(--on-deep-soft);
  display:inline-flex; align-items:center; gap:.4em;
  text-decoration:none;
}
.press-go:hover{ color:var(--isabelline); }
.press-go::after{ content:"↗"; }

/* --- player real do YouTube, carregado só ao clicar --- */
.vcard-thumb--yt.is-playing{ cursor:default; }
.vcard-thumb--yt.is-playing::before,
.vcard-thumb--yt.is-playing .vcard-play{ display:none; }
.vcard-thumb--yt iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

.apoio{
  margin-top:clamp(44px,6vw,70px);
  padding-top:clamp(28px,4vw,40px);
  border-top:1px solid var(--line-deep);
}
.apoio-t{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ocre); margin-bottom:1.6em;
}
.apoio-row{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(26px,4.5vw,50px);
}
.apoio-row img{
  height:clamp(30px,4vw,42px); width:auto;
  opacity:.92;
  transition:opacity .25s;
}
.apoio-row img:hover{ opacity:1; }
.apoio-row .sebrae{
  background:var(--isabelline);
  padding:.5em .8em; border-radius:3px;
  height:clamp(40px,5vw,54px);
}
/* Epagri, UFRJ e UFSC vêm sobre fundo branco no arquivo original —
   uma placa clara por trás mantém o logo legível sobre o azul escuro */
.apoio-row .placa{
  display:flex; align-items:center;
  background:var(--isabelline);
  padding:.45em .75em; border-radius:3px;
  height:clamp(38px,4.6vw,50px);
}
.apoio-row .placa img{ height:100%; opacity:1; }
.apoio-row .txt{
  font-size:.85rem; color:var(--on-deep-soft);
  letter-spacing:.04em;
}

/* =========================================================
   CAFÉ COM ALGAS
   ========================================================= */
.cafe{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,6vw,72px);
  align-items:center;
}
@media (max-width:880px){ .cafe{ grid-template-columns:1fr; } }
.cafe-fig img{ width:100%; height:auto; border-radius:3px; }

/* =========================================================
   CONTATO
   ========================================================= */
/* A seção de contato agora é duas faixas separadas: primeiro a
   mensagem (centralizada, como um fechamento de página), depois —
   após um respiro e o ornamento da onda — os dados práticos junto
   do mapa. Duas vozes diferentes, cada uma com seu próprio espaço. */
.contato-intro{
  max-width:640px;
  margin-inline:auto;
  text-align:center;
  padding:clamp(40px,6vw,64px) clamp(28px,5vw,56px);
  border:1px solid rgba(244,242,236,.16);
  border-radius:8px;
  background:rgba(244,242,236,.045);
}
.contato-intro .sec-h{ margin-inline:auto; }
.contato-lead{
  margin-top:1.15em;
  max-width:46ch;
  margin-inline:auto;
  font-size:clamp(1rem,1.3vw,1.14rem);
  color:var(--on-deep-soft);
}
.contato-intro .hero-ctas{ margin-top:2.2em; justify-content:center; }

.contato-details{
  display:grid;
  margin-top:clamp(64px,8vw,96px);
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(36px,6vw,72px);
  align-items:center;
}
@media (max-width:880px){ .contato-details{ grid-template-columns:1fr; } }

.cinfo-rows{ display:flex; flex-direction:column; gap:1.5em; }
.cinfo-row{ display:flex; flex-direction:column; gap:.2em; }
.cinfo-l{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ocre); font-weight:600;
}
.cinfo-v{
  font-size:1.02rem; color:var(--isabelline);
  text-decoration:none; line-height:1.5;
  transition:color .2s;
}
a.cinfo-v:hover{ color:var(--ocre); }

.cinfo-map{
  aspect-ratio:4/3;
  border-radius:6px;
  overflow:hidden;
  border:1px solid rgba(244,242,236,.18);
  /* filtro leve para o mapa não brigar com o petróleo ao redor —
     sem alterar as cores a ponto de prejudicar a leitura do mapa */
  filter:saturate(.85) brightness(.96);
}
.cinfo-map iframe{
  width:100%; height:100%; border:0; display:block;
}

/* =========================================================
   RODAPÉ
   ========================================================= */
/* Um azul mais profundo que o --petroleo das outras seções escuras —
   mantém o rodapé na família azul (sem cair no verde) e ainda marca
   uma separação sutil de quem vem logo acima, o Contato. */
.ft{
  background:color-mix(in srgb, var(--petroleo) 82%, black);
  color:var(--on-deep-soft);
  padding-block:clamp(46px,6vw,66px) clamp(28px,4vw,36px);
  border-top:1px solid rgba(114,149,172,.3);
}
.ft-top{
  display:flex; flex-wrap:wrap; gap:2rem;
  align-items:center; justify-content:center;
  padding-bottom:clamp(28px,4vw,40px);
  border-bottom:1px solid rgba(244,242,236,.14);
}
.ft-logo{ width:clamp(150px,18vw,190px); color:var(--isabelline); }
.ft-logo svg{ width:100%; height:auto; }
/* o selo é o único elemento do topo do rodapé agora — o menu já
   está fixo no cabeçalho, repeti-lo aqui embaixo era redundante */
.ft-logo--seal{ width:clamp(120px,13vw,152px); }
.ft-bot{
  display:flex; flex-wrap:wrap; gap:.8em 2rem;
  justify-content:space-between;
  padding-top:clamp(20px,3vw,28px);
  font-size:.8rem; color:rgba(244,242,236,.55);
}
.ft-bot a{ text-decoration:none; }
.ft-bot a:hover{ color:var(--isabelline); }

/* =========================================================
   WHATSAPP FLUTUANTE
   ========================================================= */
.zap{
  position:fixed; right:clamp(16px,2.5vw,26px); bottom:clamp(16px,2.5vw,26px);
  z-index:95;
  display:inline-flex; align-items:center; gap:.6em;
  padding:.8em 1.25em;
  border-radius:100px;
  /* verde-profundo, não o verde médio: claro sobre #498c60 dá 3,6:1 */
  background:var(--verde-profundo);
  color:var(--isabelline);
  font-size:.88rem; font-weight:600; letter-spacing:.03em;
  text-decoration:none;
  box-shadow:0 8px 26px -8px rgba(19,63,46,.55);
  opacity:0; transform:translateY(14px) scale(.96);
  pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),box-shadow .2s;
}
.zap.show{ opacity:1; transform:none; pointer-events:auto; }
.zap.show:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px -8px rgba(19,63,46,.7), 0 0 0 3px rgba(73,140,96,.45);
}
.zap svg{ width:19px; height:19px; flex:none; }
@media (max-width:560px){ .zap span{ display:none; } .zap{ padding:.95em; } }

/* =========================================================
   ANIMAÇÃO DO LOGOTIPO — a alga se formando
   Ordem: linha d'água → base → filetes crescendo → ALGAMOS → assinatura
   ========================================================= */
.hero-logo svg .lg-water,
.hero-logo svg .lg-base,
.hero-logo svg .lg-strand,
.hero-logo svg .lg-letter,
.hero-logo svg .lg-tagline{
  opacity:0;
}

.js .hero-logo.run svg .lg-water{ animation:fadeIn .5s var(--ease) .1s both; }
.js .hero-logo.run svg .lg-base{ animation:fadeIn .55s var(--ease) .28s both; }

/* cada filete brota da própria base, da esquerda para a direita */
.js .hero-logo.run svg .lg-strand{
  transform-box:fill-box;
  transform-origin:50% 100%;
  animation:sprout .62s var(--ease) both;
  animation-delay:calc(.42s + var(--i) * .075s);
}
.js .hero-logo.run svg .lg-letter{
  transform-box:fill-box;
  transform-origin:50% 100%;
  animation:riseIn .5s var(--ease) both;
  animation-delay:calc(1.24s + var(--i) * .05s);
}
.js .hero-logo.run svg .lg-tagline{ animation:fadeIn .6s var(--ease) 1.72s both; }

@keyframes sprout{
  0%{ opacity:0; transform:scaleY(.02) scaleX(.72); }
  55%{ opacity:1; }
  100%{ opacity:1; transform:scaleY(1) scaleX(1); }
}
@keyframes riseIn{
  0%{ opacity:0; transform:translateY(14%) scaleY(.9); }
  100%{ opacity:1; transform:none; }
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* nas visitas seguintes (ou sem JS) o logo já entra formado */
.hero-logo.instant svg .lg-water,
.hero-logo.instant svg .lg-base,
.hero-logo.instant svg .lg-strand,
.hero-logo.instant svg .lg-letter,
.hero-logo.instant svg .lg-tagline{ opacity:1; animation:none; }

/* o resto do hero entra depois do logo */
.js .hero-stagger > *{ opacity:0; }
.js .hero-in.run .hero-stagger > *{
  animation:riseSoft .7s var(--ease) both;
}
.js .hero-in.run .hero-stagger > *:nth-child(1){ animation-delay:2.0s; }
.js .hero-in.run .hero-stagger > *:nth-child(2){ animation-delay:2.12s; }
.js .hero-in.run .hero-stagger > *:nth-child(3){ animation-delay:2.24s; }
.js .hero-in.run .hero-stagger > *:nth-child(4){ animation-delay:2.36s; }
.hero-in.instant .hero-stagger > *{ opacity:1; animation:none; }

@keyframes riseSoft{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}

/* =========================================================
   REVELAÇÃO NO SCROLL
   ========================================================= */
.js .rv{ opacity:0; transform:translateY(22px); }
.js .rv.in{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
.js .rv-d1.in{ transition-delay:.09s; }
.js .rv-d2.in{ transition-delay:.18s; }
.js .rv-d3.in{ transition-delay:.27s; }
.js .rv-d4.in{ transition-delay:.36s; }

/* =========================================================
   MOVIMENTO REDUZIDO — tudo estático
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .rv{ opacity:1; transform:none; }
  .hero-logo svg .lg-water,
  .hero-logo svg .lg-base,
  .hero-logo svg .lg-strand,
  .hero-logo svg .lg-letter,
  .hero-logo svg .lg-tagline{ opacity:1; }
  .js .hero-stagger > *{ opacity:1; }
  .hero-cue .rail::after{ display:none; }
}

/* =========================================================
   IMPRESSÃO
   ========================================================= */
@media print{
  .hd,.zap,.hero-cue,.hero-media,.hero-veil{ display:none !important; }
  body{ background:#fff; color:#000; }
  .sec-deep{ background:#fff; color:#000; }
}

/* Seletor compacto: abre uma janela de idiomas por clique, sem depender de JS. */
.locale-control{position:fixed;top:max(1rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right));z-index:100;color:var(--isabelline);font-size:.85rem}
.locale-control .locale-toggle{width:84px;box-sizing:border-box;justify-content:center;display:flex;align-items:center;gap:.4rem;min-height:44px;padding:.5rem .8rem;cursor:pointer;list-style:none;border:1px solid rgba(244,242,236,.45);border-radius:24px;background:var(--petroleo);box-shadow:0 3px 14px #0002}
.locale-control .locale-toggle::-webkit-details-marker{display:none}
.locale-control .locale-toggle:focus-visible{outline:2px solid var(--ocre);outline-offset:3px}
.locale-options{position:absolute;top:calc(100% + .6rem);right:0;width:180px;padding:.5rem;background:var(--isabelline);color:var(--petroleo);border:1px solid var(--areia);border-radius:16px;box-shadow:0 10px 35px #0003}
.locale-options a{display:flex;align-items:center;gap:.65rem;min-height:44px;padding:.6rem .8rem;text-decoration:none;border-radius:10px}
.locale-options a:hover,.locale-options a[aria-current="page"]{background:var(--areia)}
/* Espaço para o botão compacto quando a barra de navegação aparece. */
.hd-in{gap:.75rem}
.hd-in .locale-control{position:relative;top:auto;right:auto;flex:0 0 84px}
.hd-in .hd-burger{margin-left:auto}
@media(max-width:1400px){
 .hd-nav{display:none}
 .hd-burger{display:inline-flex;margin-left:auto}
 .hd-cta{display:none}
 .hd.open .hd-panel{display:block}
}
@media(max-width:600px){
 .locale-control{top:max(16px,env(safe-area-inset-top));right:12px}
 .hd-in{min-height:76px;gap:16px}
 .hd-logo{width:110px}
 .hd-burger{width:44px;height:44px;padding:0;justify-content:center;min-height:44px}
 .hd-burger>span:last-child{display:none}
}
@media print{.locale-control{display:none}}

.locale-toggle{font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
.locale-options[hidden]{display:none!important}