/* =========================================================================
   JL Representações · Gulf Marine Brasil — tema claro
   Paleta do logo da JL: azul #04356A → #0067B4 → #2EB7E7 e dourado #FDCC46.
   Sobre fundo branco o dourado só funciona como PREENCHIMENTO (1,5:1 como
   texto); para texto dourado existe --gold-deep. O laranja da Gulf aparece
   apenas nos barris 3D, onde é o produto.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  --bg:#FFFFFF;
  --bg-soft:#F2F6FB;
  --bg-tint:#E8F0F8;

  --blue-deep:#04356A;         /* azul profundo do logo */
  --blue:#0067B4;              /* azul médio — texto de destaque e links */
  --blue-bright:#0186D1;
  --cyan:#2EB7E7;
  --navy-900:#02182E;

  --gold:#FDCC46;              /* dourado do logo — preenchimento */
  --gold-600:#E69927;
  --gold-300:#FDE78E;
  --gold-deep:#8A6400;         /* dourado legível como texto sobre claro */
  --gold-ink:#04213F;          /* texto sobre dourado */

  --green:#12A150;
  --green-deep:#0B7A3A;
  --green-soft:#F0FAF4;

  --white:#FFFFFF;
  --ink:#04213F;
  --ink-dim:#42618A;
  --ink-faint:#4E6C8C;

  --line:rgba(4,53,106,.14);
  --line-strong:rgba(4,53,106,.28);
  --surface:#FFFFFF;
  --surface-2:#FFFFFF;

  --shadow-sm:0 1px 2px rgba(4,33,63,.06),0 6px 18px -12px rgba(4,33,63,.22);
  --shadow-md:0 2px 6px rgba(4,33,63,.07),0 18px 40px -24px rgba(4,33,63,.35);
  --shadow-lg:0 4px 10px rgba(4,33,63,.07),0 30px 70px -40px rgba(4,33,63,.45);

  --font-head:'Archivo','Archivo Black',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --shell:1240px;
  --pad:clamp(20px,5vw,40px);
  --radius:4px;
  --radius-lg:8px;

  --ease:cubic-bezier(.22,.8,.3,1);
  --header-h:76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(15px,.4vw + 14px,16.5px);
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:800;line-height:1.04;letter-spacing:-.022em;margin:0;color:var(--ink)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}

:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:2px;
}
/* Sobre o botão dourado um anel de uma cor só não contrasta nas duas bordas:
   o traço escuro resolve o lado do botão, o halo azul resolve o lado do fundo. */
.btn-primary:focus-visible,.skip-link:focus-visible{
  outline:2px solid var(--gold-ink);
  outline-offset:0;
  box-shadow:0 0 0 5px var(--blue);
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:-100px;left:16px;z-index:300;
  background:var(--gold);color:var(--gold-ink);font-weight:700;
  padding:12px 18px;border-radius:var(--radius);transition:top .2s;
}
.skip-link:focus{top:14px}

/* ---------- Layout ---------- */
.shell{width:min(100% - var(--pad)*2,var(--shell));margin-inline:auto}
.section{position:relative;z-index:1;padding:clamp(76px,10vw,136px) 0}
/* Seções densas de tabela: o 3D continua visível, mas recuado atrás de um véu
   branco, para não disputar leitura com especificação técnica. */
.section-quiet{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 7%,rgba(255,255,255,.9) 93%,rgba(255,255,255,0) 100%)}
.section-alt{background:linear-gradient(180deg,rgba(242,246,251,0) 0%,rgba(242,246,251,.82) 10%,rgba(242,246,251,.82) 90%,rgba(242,246,251,0) 100%)}

.section-head{position:relative;max-width:66ch;margin-bottom:clamp(36px,5vw,60px)}
.section-head h2{font-size:clamp(2rem,4.6vw,3.5rem);margin-bottom:18px;text-wrap:balance}
.section-head h2 em{font-style:normal;color:var(--blue)}
.section-head h2 .em-green{color:var(--green-deep)}
.eyebrow{
  font-family:var(--font-head);font-weight:700;font-size:.74rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px;
}
.eyebrow-green{color:var(--green-deep)}
.section-lead{color:var(--ink-dim);font-size:clamp(1rem,.5vw + .9rem,1.175rem);max-width:62ch}
.h-sub{font-size:1.3rem;margin-bottom:18px}
.note{color:var(--ink-faint);font-size:.95rem;max-width:72ch;margin-top:28px;border-left:2px solid var(--line-strong);padding-left:16px}

.grid{display:grid;gap:clamp(16px,2vw,24px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:start}

/* ---------- Cenário 3D ---------- */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none}
#stage-canvas{width:100%;height:100%;opacity:0;transition:opacity .9s ease}
.stage.is-ready #stage-canvas{opacity:1}
.stage-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 80% 16%,rgba(253,204,70,.14),transparent 58%),
    radial-gradient(90% 70% at 6% 76%,rgba(1,134,209,.12),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,.28) 100%);
}
.stage-grain{display:none}
.no-webgl .stage-veil{
  background:
    radial-gradient(70% 55% at 78% 18%,rgba(253,204,70,.3),transparent 62%),
    radial-gradient(80% 60% at 8% 78%,rgba(1,134,209,.22),transparent 66%),
    linear-gradient(180deg,#FFFFFF 0%,#F2F6FB 60%,#E8F0F8 100%);
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -22px rgba(4,33,63,.5);
}
.header-inner{display:flex;align-items:center;gap:24px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;min-width:0}
.brand-mark{width:42px;height:auto;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-text strong{font-family:var(--font-head);font-weight:800;font-size:1.02rem;letter-spacing:-.01em;white-space:nowrap}
.brand-text small{font-size:.695rem;color:var(--ink-faint);letter-spacing:.055em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.site-nav ul{display:flex;gap:4px}
.site-nav a{
  display:block;padding:9px 13px;border-radius:var(--radius);
  font-size:.9rem;font-weight:500;color:var(--ink-dim);
  transition:color .2s,background .2s;
}
.site-nav a:hover{color:var(--ink);background:var(--bg-tint)}
.site-nav a.is-current{color:var(--ink);font-weight:600}
.site-nav a.is-current::after{
  content:"";display:block;height:2px;margin-top:5px;border-radius:2px;background:var(--gold-600);
}
.header-actions{display:flex;align-items:center;gap:12px}

.nav-toggle{
  display:none;width:44px;height:44px;border:1px solid var(--line-strong);
  background:var(--white);border-radius:var(--radius);cursor:pointer;
  padding:0;place-items:center;
}
.nav-toggle span{display:block;width:19px;height:2px;background:var(--ink);margin:4px auto;transition:transform .3s var(--ease),opacity .25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.scroll-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-600),var(--gold));transition:width .08s linear}

/* ---------- Botões ---------- */
.btn{
  --btn-bg:var(--gold);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border:1px solid transparent;border-radius:var(--radius);
  font-family:var(--font-head);font-weight:700;font-size:.93rem;letter-spacing:.01em;
  cursor:pointer;transition:transform .2s var(--ease),background .2s,box-shadow .25s,border-color .2s,color .2s;
  text-align:center;
}
.btn-primary{background:var(--btn-bg);color:var(--gold-ink);box-shadow:0 8px 22px -12px rgba(230,153,39,.85)}
.btn-primary:hover{background:var(--gold-600);color:#fff;transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(230,153,39,.9)}
.btn-ghost{background:var(--white);color:var(--ink);border-color:var(--line-strong);border-radius:999px;padding:15px 32px}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);background:var(--bg-tint);transform:translateY(-2px)}
.btn-sm{padding:10px 18px;font-size:.85rem}
.btn-ghost.btn-sm{padding:9px 20px}

/* ---------- CTA com óleo lubrificante em movimento ----------
   Dois círculos girando fora de fase: o de cima tem a cor da base e recorta a
   crista da onda; o de baixo é o brilho do óleo.
   O texto é azul profundo, não branco: assim ele passa no contraste tanto
   sobre o óleo (6,4:1 no âmbar, 10,7:1 na crista) quanto sobre a base clara
   (15:1), e a onda pode cruzar a palavra sem nunca deixá-la ilegível.
   Com texto branco o óleo precisaria ser tão escuro que sumiria. */
.btn-liquid{
  --oil-crest:#FDCC46;
  --oil:#E69927;
  --oil-deep:#C77F15;
  --oil-air:#FFF6E2;
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--oil-air);color:var(--gold-ink);
  border:2px solid var(--blue-deep);
  border-radius:999px;padding:15px 32px;
  box-shadow:0 10px 26px -14px rgba(4,53,106,.9);
}
.btn-liquid:hover{
  background:var(--oil-air);color:var(--gold-ink);
  transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(4,53,106,1);
}
.btn-liquid .btn-txt{position:relative;z-index:3}

.btn-liquid .liquid{
  position:absolute;left:0;right:0;bottom:0;height:76%;z-index:1;
  background:linear-gradient(180deg,var(--oil) 0%,var(--oil-deep) 100%);
  box-shadow:inset 7px -8px 20px rgba(140,80,10,.55),inset -7px 0 20px rgba(140,80,10,.4);
  transition:height .45s var(--ease);
}
.btn-liquid:hover .liquid{height:90%}

/* Os dois círculos. A largura é relativa ao botão e a borda inferior mergulha
   poucos pixels no óleo, então a crista fica ACIMA da linha do texto. */
.btn-liquid .liquid::before,
.btn-liquid .liquid::after{
  content:"";position:absolute;
  width:185%;aspect-ratio:1;
  left:50%;margin-left:-92.5%;
  bottom:calc(100% - 10px);
  animation:oil-wave 7s linear infinite;
  will-change:transform;
}
.btn-liquid .liquid::before{             /* crista mais clara do óleo */
  background:var(--oil-crest);
  border-radius:38%;
  animation-delay:-1.1s;
}
.btn-liquid .liquid::after{              /* máscara: devolve o ar acima da onda */
  background:var(--oil-air);
  border-radius:45%;
  animation-delay:-2.9s;
}
@keyframes oil-wave{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* o botão pequeno do cabeçalho pede uma onda proporcionalmente menor */
.btn-liquid.btn-sm{padding:9px 20px;border-width:2px}
.btn-liquid.btn-sm .liquid::before,
.btn-liquid.btn-sm .liquid::after{bottom:calc(100% - 7px);width:210%;margin-left:-105%}

@media (prefers-reduced-motion:reduce){
  /* sem rotação a onda congelaria num ângulo qualquer; melhor um nível parado */
  .btn-liquid .liquid::before,.btn-liquid .liquid::after{display:none}
  .btn-liquid .liquid{height:78%;border-top:2px solid var(--oil-crest)}
  .btn-liquid:hover .liquid{height:78%}
}

/* ---------- Hero ---------- */
.hero{position:relative;z-index:1;min-height:100svh;display:flex;align-items:center;padding:calc(var(--header-h) + 48px) 0 110px}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(104deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 28%,rgba(255,255,255,.45) 50%,transparent 68%);
}
.hero-inner{display:grid;align-items:center;gap:40px}
.hero-copy{max-width:min(100%,660px)}
.hero h1{
  font-size:clamp(2.7rem,7.6vw,5.6rem);font-weight:900;letter-spacing:-.035em;
  margin:0 0 26px;text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--blue);display:inline-block}
.hero .lead{color:var(--ink-dim);font-size:clamp(1rem,.6vw + .9rem,1.22rem);max-width:54ch;margin-bottom:34px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}
.hero-tag{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--font-head);font-weight:700;color:var(--gold-deep);
  font-size:1.02rem;letter-spacing:.005em;
}
.hero-tag span{width:30px;height:3px;background:var(--gold);flex:none;border-radius:2px}

/* ---------- Ticker ---------- */
.ticker{position:relative;z-index:1;overflow:hidden;border-block:1px solid var(--line);background:var(--bg-soft);padding:15px 0}
.ticker-track{display:flex;width:max-content;animation:ticker 48s linear infinite}
.ticker-group{display:flex;align-items:center;gap:0;flex:none}
.ticker-group span{
  font-family:var(--font-head);font-weight:600;font-size:.85rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-dim);white-space:nowrap;padding:0 26px;
}
.ticker-group i{width:5px;height:5px;border-radius:50%;background:var(--gold-600);flex:none}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* ---------- Cards ---------- */
.card{
  position:relative;padding:clamp(26px,3vw,38px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),border-color .3s,box-shadow .3s;
  overflow:hidden;
}
.card::after{
  content:"";position:absolute;left:0;top:0;width:3px;height:100%;
  background:linear-gradient(180deg,var(--gold),transparent);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease);
}
.card:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:var(--shadow-md)}
.card:hover::after{transform:scaleY(1)}
.card-icon{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-deep);margin-bottom:20px;flex:none;
}
.card-icon svg{width:24px;height:24px;fill:none;stroke:var(--white);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.24rem;margin-bottom:12px}
.card p{color:var(--ink-dim);font-size:.975rem}
.chipline{
  margin-top:16px;padding:10px 14px;border-radius:var(--radius);
  background:var(--bg-tint);border:1px solid var(--line);
  font-size:.83rem;font-weight:600;color:var(--blue-deep);letter-spacing:.005em;
}

/* ---------- Stats (bloco azul: é onde o dourado vivo tem contraste) ---------- */
.split-aside{position:sticky;top:calc(var(--header-h) + 28px)}
.stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:rgba(255,255,255,.16);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-md);
}
.stat{padding:clamp(22px,2.6vw,32px);background:var(--blue-deep)}
.stat b{
  display:block;font-family:var(--font-head);font-weight:900;color:var(--gold);
  font-size:clamp(2.1rem,4.4vw,3.1rem);line-height:1;letter-spacing:-.035em;margin-bottom:8px;
  font-variant-numeric:tabular-nums;
}
.stat span{font-size:.88rem;color:#C5DBEE;display:block}

.bullets{display:grid;gap:13px;margin:30px 0}
.bullets li{position:relative;padding-left:28px;color:var(--ink-dim);font-size:.985rem}
.bullets li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border:2px solid var(--gold-600);border-radius:50%;
}
.bullets-green li::before{border-color:var(--green-deep)}

.pull{
  margin:0;padding:24px 0 0;border-top:1px solid var(--line);
  font-family:var(--font-head);font-weight:600;font-size:clamp(1.1rem,1.6vw,1.4rem);
  line-height:1.35;color:var(--ink-dim);
}
.pull strong{color:var(--blue-deep);font-weight:800}

/* ---------- Motivos ---------- */
.reason{
  position:relative;padding:clamp(26px,3vw,36px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),border-color .3s,box-shadow .3s;
}
.reason:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:var(--shadow-md)}
.reason-num{
  display:block;font-family:var(--font-head);font-weight:900;font-size:1.7rem;
  color:var(--gold-deep);letter-spacing:-.03em;margin-bottom:14px;
}
.reason h3{font-size:1.15rem;margin-bottom:11px}
.reason p{color:var(--ink-dim);font-size:.95rem}
.reason-accent{background:linear-gradient(165deg,var(--blue-deep),#032a55);border-color:transparent}
.reason-accent h3{color:var(--white)}
.reason-accent p{color:#C5DBEE}
.reason-accent .reason-num{color:var(--gold)}

/* ---------- Chips (portfólio) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chips li{
  padding:14px 22px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);box-shadow:var(--shadow-sm);
  font-family:var(--font-head);font-weight:600;font-size:.95rem;color:var(--ink);
  transition:transform .3s var(--ease),background .3s,border-color .3s,color .3s;
}
.chips li:hover{transform:translateY(-3px);background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.chips .chip-eal{background:var(--green-soft);border-color:rgba(11,122,58,.3);color:var(--green-deep)}
.chips .chip-eal:hover{background:var(--green-deep);color:#fff;border-color:var(--green-deep)}

/* ---------- Abas e tabelas ---------- */
.tablist{
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;
  border-bottom:1px solid var(--line);margin-bottom:0;padding-bottom:0;
  -webkit-overflow-scrolling:touch;
}
.tab{
  flex:none;background:transparent;border:0;border-bottom:2px solid transparent;
  padding:15px 20px;font-family:var(--font-head);font-weight:600;font-size:.92rem;
  color:var(--ink-faint);cursor:pointer;white-space:nowrap;transition:color .25s,border-color .25s;
}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--ink);border-bottom-color:var(--gold-deep)}

.tabpanel{display:none;padding-top:clamp(28px,3.5vw,42px);animation:fadeUp .5s var(--ease)}
.tabpanel.is-active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.panel-head{margin-bottom:26px}
.panel-head h3{font-size:clamp(1.35rem,2.2vw,1.8rem);margin-bottom:10px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.panel-head p{color:var(--ink-dim);max-width:72ch}
.badge{
  display:inline-block;padding:5px 12px;border-radius:40px;
  background:#FFF6DC;border:1px solid rgba(230,153,39,.5);
  font-family:var(--font-body);font-size:.68rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold-deep);
}
.badge-green{background:var(--green-soft);border-color:rgba(11,122,58,.35);color:var(--green-deep);margin-left:8px}

.table-wrap{
  overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--white);box-shadow:var(--shadow-sm);
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
}
.table-wrap:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.table-wrap::-webkit-scrollbar{height:8px}
.table-wrap::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px}
.table-hint{
  display:none;margin-top:10px;font-size:.8rem;color:var(--ink-faint);
  letter-spacing:.02em;
}
.table-hint::after{content:" \2192"}
table.data{min-width:720px;font-size:.92rem}
table.data thead th{
  background:var(--blue-deep);color:#fff;text-align:left;
  font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;padding:15px 20px;white-space:nowrap;
}
table.data tbody th,table.data tbody td{padding:15px 20px;border-top:1px solid var(--line);vertical-align:top}
table.data tbody th{text-align:left;font-weight:700;color:var(--ink);font-family:var(--font-body);white-space:nowrap}
table.data tbody td{color:var(--ink-dim)}
table.data tbody tr{transition:background .2s}
table.data tbody tr:nth-child(even){background:rgba(4,53,106,.035)}
table.data tbody tr:hover{background:#FFF8E6}
.data-vessels{min-width:420px}

.callout{
  margin-top:24px;padding:20px 24px;border-radius:var(--radius);
  background:var(--bg-tint);border-left:3px solid var(--blue);
  color:var(--ink-dim);font-size:.95rem;
}
.callout strong{color:var(--ink)}

.minicards{margin-top:24px}
.minicard{padding:22px 24px;border-radius:var(--radius);background:var(--bg-soft);border:1px solid var(--line)}
.minicard h4{font-size:1.02rem;margin-bottom:9px}
.minicard p{color:var(--ink-dim);font-size:.9rem}

/* ---------- EAL ---------- */
.section-eal{background:linear-gradient(180deg,rgba(240,250,244,0) 0%,rgba(238,250,243,.84) 10%,rgba(238,250,243,.84) 90%,rgba(240,250,244,0) 100%)}
.ealcard{
  padding:26px;border-radius:var(--radius-lg);
  background:var(--white);border:1px solid rgba(11,122,58,.25);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),border-color .3s,box-shadow .3s;
}
.ealcard:hover{transform:translateY(-5px);border-color:rgba(11,122,58,.55);box-shadow:var(--shadow-md)}
.ealcard h3{font-size:1.06rem;margin-bottom:8px}
.ealcard .spec{font-weight:700;color:var(--green-deep);font-size:.88rem;margin-bottom:8px}
.ealcard p:last-child{color:var(--ink-dim);font-size:.9rem}
.split-eal{margin-top:clamp(36px,4vw,56px);grid-template-columns:1fr 1fr}
.definition{
  padding:clamp(26px,3vw,34px);border-radius:var(--radius-lg);
  background:linear-gradient(165deg,var(--blue-deep),#032a55);
  box-shadow:var(--shadow-md);
}
.definition h3{color:var(--gold);font-size:1.18rem;margin-bottom:14px}
.definition p{color:#C5DBEE;font-size:.96rem}
.definition strong{color:var(--white)}

/* ---------- Embarcações ---------- */
.split-vessels{grid-template-columns:1.6fr .9fr;align-items:start}
.docs{
  padding:clamp(28px,3vw,36px);border-radius:var(--radius-lg);
  background:linear-gradient(165deg,var(--blue-deep),#032a55);
  box-shadow:var(--shadow-md);position:sticky;top:calc(var(--header-h) + 28px);
}
.docs-icon{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;margin-bottom:20px}
.docs-icon svg{width:26px;height:26px;fill:none;stroke:#C5DBEE;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.docs h3{font-size:1.24rem;color:var(--white);margin-bottom:12px}
.docs p{color:#C5DBEE;font-size:.96rem}

/* ---------- Regiões ---------- */
.region{
  padding:0;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),border-color .3s,box-shadow .3s;
}
.region:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:var(--shadow-md)}
.region h3{
  background:var(--blue-deep);color:#fff;padding:14px 22px;
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
}
.region ul{padding:22px;display:grid;gap:11px}
.region li{position:relative;padding-left:20px;color:var(--ink-dim);font-size:.95rem}
.region li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gold-600)}

.modals{margin-top:clamp(24px,3vw,36px)}
.modal-item{display:flex;align-items:center;gap:16px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-sm)}
.modal-item svg{width:34px;height:34px;flex:none;fill:none;stroke:var(--blue);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.modal-item p{color:var(--ink-dim);font-size:.92rem}
.modal-item strong{color:var(--ink)}

/* ---------- Timeline ---------- */
.timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative;margin-bottom:clamp(40px,5vw,64px)}
.step{position:relative;padding:0 14px;text-align:center}
.step::before{
  content:"";position:absolute;top:27px;left:50%;width:100%;height:2px;
  background:linear-gradient(90deg,var(--gold-600),rgba(230,153,39,.3));
}
.step-last::before{display:none}
.step-num{
  position:relative;z-index:1;display:grid;place-items:center;
  width:54px;height:54px;margin:0 auto 18px;border-radius:50%;
  background:var(--blue-deep);
  font-family:var(--font-head);font-weight:800;font-size:1.15rem;color:#fff;
  transition:transform .35s var(--ease),background .3s,box-shadow .3s;
}
.step:hover .step-num{transform:scale(1.1);box-shadow:0 0 0 6px rgba(253,204,70,.3)}
.step-last .step-num{background:var(--gold);color:var(--gold-ink)}
.step h3{font-size:1.04rem;margin-bottom:8px}
.step p{color:var(--ink-dim);font-size:.87rem}

.aftercare{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,56px);
  padding:clamp(28px,4vw,46px);border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--blue-deep),#032a55);
  box-shadow:var(--shadow-md);
}
.aftercare .eyebrow{color:var(--gold)}
.aftercare h3{font-size:clamp(1.3rem,2.4vw,1.85rem);color:var(--white)}
.aftercare p{color:#C5DBEE}
.aftercare-contact{margin-top:18px;font-family:var(--font-head);font-weight:700;color:var(--gold);font-size:1.02rem;line-height:1.7}
.aftercare-contact a{transition:color .2s}
.aftercare-contact a:hover{color:var(--gold-300);text-decoration:underline}

/* ---------- Contato ---------- */
.section-contact{background:linear-gradient(180deg,rgba(242,246,251,0),rgba(242,246,251,.86) 22%,rgba(242,246,251,.92))}
.split-contact{grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px)}
.contact-cards{margin-top:8px}
.contact-card{padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-sm)}
.contact-card h3{font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:12px}
.contact-card p{color:var(--ink-dim);font-size:.93rem;word-break:break-word}
.contact-card a{transition:color .2s}
.contact-card a:hover{color:var(--blue);text-decoration:underline}
.split-contact .hero-tag{margin-top:30px}

.quote{
  padding:clamp(28px,3.4vw,40px);border-radius:var(--radius-lg);
  background:var(--white);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
}
.quote h3{font-size:1.5rem;margin-bottom:8px}
.quote-sub{color:var(--ink-dim);font-size:.93rem;margin-bottom:24px}
.field{margin-bottom:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px}
.field label span{color:var(--gold-deep)}
.field input,.field textarea{
  width:100%;padding:13px 15px;border-radius:var(--radius);
  background:var(--bg-soft);border:1px solid var(--line-strong);
  color:var(--ink);transition:border-color .2s,background .2s;resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
.field input:focus,.field textarea:focus{border-color:var(--blue);background:var(--white)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#C62828}
.quote .btn{margin-top:8px}
.quote-alt{margin-top:16px;font-size:.87rem;color:var(--ink-faint);text-align:center}
.quote-alt a{color:var(--blue);text-decoration:underline}
.quote-status{margin-top:12px;font-size:.87rem;color:var(--gold-deep);font-weight:600;text-align:center;min-height:1.2em}

/* ---------- Footer ---------- */
.site-footer{position:relative;z-index:1;background:var(--bg-tint);border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 28px}
.footer-inner{display:grid;grid-template-columns:1.1fr 1.2fr .9fr;gap:clamp(28px,4vw,56px);align-items:start}
.footer-brand{display:flex;gap:16px;align-items:flex-start}
.footer-brand img{width:52px;flex:none}
.footer-brand strong{font-family:var(--font-head);font-weight:800;font-size:1.08rem;display:block;margin-bottom:6px}
.footer-brand p{color:var(--ink-dim);font-size:.88rem;max-width:34ch}
.footer-nav{display:flex;flex-wrap:wrap;gap:10px 22px;align-content:start}
.footer-nav a{color:var(--ink-dim);font-size:.9rem;transition:color .2s}
.footer-nav a:hover{color:var(--blue)}
.footer-meta{display:flex;gap:16px;align-items:flex-start}
.footer-meta img{width:44px;flex:none}
.footer-meta p{color:var(--ink-dim);font-size:.86rem}
.footer-meta a{color:var(--blue)}
.footer-meta a:hover{text-decoration:underline}
.footer-base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;
  margin-top:clamp(36px,4vw,52px);padding-top:24px;border-top:1px solid var(--line);
}
.footer-base p{color:var(--ink-faint);font-size:.79rem}

/* ---------- WhatsApp ---------- */
.whatsapp-fab{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:90;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#1EBE5D;box-shadow:0 10px 26px -10px rgba(30,190,93,.8);
  transition:transform .25s var(--ease),box-shadow .25s;
}
.whatsapp-fab svg{width:30px;height:30px;fill:#fff}
.whatsapp-fab:hover{transform:scale(1.08) translateY(-2px)}

/* ---------- Reveal ---------- */
/* Só esconde quando há JS para revelar de volta — sem script a página
   continua inteira e legível. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.07s}
.reveal[data-delay="2"]{transition-delay:.14s}
.reveal[data-delay="3"]{transition-delay:.21s}
.reveal[data-delay="4"]{transition-delay:.28s}
.reveal[data-delay="5"]{transition-delay:.35s}
.reveal[data-delay="6"]{transition-delay:.42s}

/* =========================================================================
   Responsivo
   ========================================================================= */
@media (max-width:1100px){
  .site-nav a{padding:9px 10px;font-size:.86rem}
  .split{grid-template-columns:1fr;gap:40px}
  .split-aside,.docs{position:static}
  .split-vessels,.split-contact,.split-eal{grid-template-columns:1fr}
  .timeline{grid-template-columns:repeat(3,1fr);gap:36px 0}
  .step::before{display:none}
}

@media (max-width:900px){
  :root{--header-h:66px}
  .nav-toggle{display:grid}
  .site-nav{
    position:fixed;inset:var(--header-h) 0 auto;z-index:99;
    background:rgba(255,255,255,.98);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);
    max-height:0;overflow:hidden;transition:max-height .4s var(--ease);
  }
  .site-nav.is-open{max-height:70vh;overflow-y:auto}
  .site-nav ul{flex-direction:column;gap:0;padding:10px var(--pad) 22px}
  .site-nav a{padding:14px 4px;font-size:1.02rem;border-bottom:1px solid var(--line)}
  .site-nav a.is-current::after{display:none}
  .header-actions .btn-sm{display:none}

  .hero{min-height:auto;padding:calc(var(--header-h) + 64px) 0 96px}
  .hero::before{background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.76) 55%,rgba(255,255,255,.5) 100%)}

  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .grid-4.ealcards,.grid-3.minicards,.grid-3.modals{grid-template-columns:1fr}
  .grid-4.regions{grid-template-columns:repeat(2,1fr)}
  .aftercare{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr;gap:32px}
  .stats{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  .brand-text small{display:none}
  .timeline{grid-template-columns:1fr;gap:28px}
  .step{text-align:left;display:grid;grid-template-columns:auto 1fr;column-gap:18px}
  .step-num{margin:0;width:46px;height:46px;font-size:1rem}
  .step h3{grid-column:2;margin-bottom:4px}
  .step p{grid-column:2}
  .grid-4.regions{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
  .footer-base{flex-direction:column}
  table.data{font-size:.86rem}
  .table-hint{display:block}
  table.data thead th,table.data tbody th,table.data tbody td{padding:12px 14px}
}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1;transform:none}
  .ticker-track{animation:none}
}

@media print{
  .stage,.site-header,.whatsapp-fab,.ticker,.quote{display:none !important}
  body{background:#fff;color:#111}
  .section{padding:24px 0}
  .tabpanel{display:block !important}
}