/* ============================================================
   Be Fantastic — befantastic.pt
   Stylesheet
   ------------------------------------------------------------
   Sections:
   1.  Design tokens (colours, type, spacing)
   2.  Base / reset
   3.  Layout helpers
   4.  Navbar
   5.  Hero
   6.  Value pillars
   7.  Values icon strip
   8.  Business areas
   9.  Contact
   10. Marquee
   11. Footer
   12. Scroll-reveal animation
   13. Responsive — tablet (<=1023px)
   14. Responsive — mobile (<=767px)
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  --navy:   #0A2346;
  --orange: #FF6600;
  --orange-dark: #e25600;
  --blue:   #085BA6;
  --white:  #FFFFFF;
  --grey:   #F4F6F9;
  --grey-line: #e3e8ef;
  --ink:    #324155;   /* body text */
  --ink-soft: #5a6b80; /* secondary text */

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --nav-h: 78px;
  --container: 1240px;
  --radius: 14px;
  --shadow-card: 0 24px 60px -28px rgba(10, 35, 70, .35);
  --shadow-soft: 0 14px 40px -24px rgba(10, 35, 70, .45);
}

/* ---------- 2. Base / reset ---------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

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

/* brand wordmark helper */
.bf-be   { color: var(--navy); font-weight: 800; }
.bf-fan  { color: var(--orange); font-weight: 800; }
.on-dark .bf-be { color: #fff; }

/* ---------- 3. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.section { padding-block: clamp(64px, 8vw, 110px); }
.section--grey { background: var(--grey); }

.section-head { text-align: center; max-width: 760px; margin-inline: auto; margin-bottom: clamp(40px, 5vw, 64px); }
.section-title {
  font-weight: 800;
  color: var(--navy);
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.section-title .accent { color: var(--orange); }

/* generic buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: 0 1.6em;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn--primary { background: var(--orange); color: #fff; }
.btn--outline { border: 2px solid rgba(255,255,255,.85); color: #fff; }
.btn--block { width: 100%; }
@media (hover: hover) {
  .btn--primary:hover { background: var(--orange-dark); }
  .btn--outline:hover { background: rgba(255,255,255,.14); }
  .btn:hover { transform: translateY(-1px); }
}

/* ---------- 4. Navbar ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--grey-line);
}
.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand__mark { height: 46px; width: auto; }
.brand__divider {
  width: 2.5px;
  height: 38px;
  border-radius: 2px;
  background: var(--navy);
  flex-shrink: 0;
  transition: height .3s ease;
}
.brand__type { font-size: 1.5rem; letter-spacing: -0.01em; white-space: nowrap; }

.nav__links { display: flex; align-items: center; gap: 30px; margin-left: 12px; }
.nav__link {
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
  padding: 6px 2px;
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--orange);
  transition: right .25s ease;
}
@media (hover: hover) { .nav__link:hover::after { right: 0; } }
.nav__link.is-active::after { right: 0; }

.nav__right { display: flex; align-items: center; gap: 18px; margin-left: auto; }

/* language toggle */
.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--grey-line);
  border-radius: 8px;
  overflow: hidden;
}
.lang__btn {
  padding: 8px 12px;
  font-weight: 700;
  font-size: .82rem;
  color: var(--ink-soft);
  letter-spacing: .04em;
  transition: background-color .2s, color .2s;
}
.lang__btn.is-active { background: var(--navy); color: #fff; }

/* hamburger */
.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  border-radius: 10px;
  border: 1px solid var(--grey-line);
  position: relative;
  margin-left: auto;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 2px;
  background: var(--navy);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .2s ease;
}
.nav__toggle span::before { transform: translate(-50%, -7px); }
.nav__toggle span::after  { transform: translate(-50%,  7px); }
body.menu-open .nav__toggle span { background: transparent; }
body.menu-open .nav__toggle span::before { transform: translate(-50%, 0) rotate(45deg); background: var(--navy); }
body.menu-open .nav__toggle span::after  { transform: translate(-50%, 0) rotate(-45deg); background: var(--navy); }

/* mobile dropdown panel */
.nav__drawer {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--grey-line);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px clamp(20px, 5vw, 32px) 26px;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
body.menu-open .nav__drawer { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav__drawer .nav__link { font-size: 1.15rem; padding: 12px 4px; border-bottom: 1px solid var(--grey-line); }
.nav__drawer .nav__link::after { display: none; }
.nav__drawer-foot { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.nav__drawer-foot .btn { flex: 1; }

/* ---------- 5. Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(560px, 92vh, 880px);
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  background: #0a2346 url("assets/hero-wave.png") center right / cover no-repeat;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(7,22,45,.95) 0%, rgba(7,22,45,.86) 30%, rgba(7,22,45,.55) 52%, rgba(7,22,45,.12) 74%, rgba(7,22,45,0) 88%);
}
.hero .container { position: relative; z-index: 2; }
.hero__inner { max-width: 640px; padding-block: clamp(40px, 6vw, 70px); }

.hero__brand {
  margin-top: clamp(28px, 5vw, 64px);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: .55em;
}
.hero__brand .be  { color: #fff; }
.hero__brand .fan { color: var(--orange); }

.hero__tagline {
  font-size: clamp(1.85rem, 4.6vw, 3.15rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #fff;
}
.hero__tagline .l2 { color: var(--orange); display: block; }

.hero__sub {
  position: absolute;
  left: 0;
  right: 0;
  top: 68%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  padding-inline: clamp(20px, 4vw, 40px);
  text-align: center;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  color: #5aa0e6;
  z-index: 3;
}
.hero__sub::before,
.hero__sub::after { content: ""; height: 3px; width: 34px; background: var(--orange); border-radius: 2px; flex-shrink: 0; }

.hero__desc {
  margin-top: 26px;
  max-width: 560px;
  color: rgba(255,255,255,.9);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}

.hero__cta {
  margin-top: clamp(110px, 18vw, 230px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ---------- 6. Value pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); }
.pillar {
  position: relative;
  aspect-ratio: 1.13 / 1;   /* matches source panels (~694x575) so the image shows fully, no zoom-crop */
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.pillar__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  transition: transform .7s cubic-bezier(.2,.6,.2,1);
}
.pillar::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(7,17,33,.95) 0%, rgba(7,17,33,.82) 30%, rgba(7,17,33,.45) 58%, rgba(7,17,33,.18) 82%, rgba(7,17,33,.08) 100%);
}
@media (hover: hover) { .pillar:hover .pillar__img { transform: scale(1.06); } }
.pillar__body { padding: clamp(28px, 3vw, 44px); color: #fff; }
.pillar__title { font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; }
.pillar__title .sub { display: block; color: var(--orange); }
.pillar__text { margin-top: 12px; font-size: 1rem; color: rgba(255,255,255,.86); max-width: 34ch; }

/* ---------- 7. Values icon strip ---------- */
.values { display: grid; grid-template-columns: repeat(5, 1fr); }
.value {
  text-align: center;
  padding: clamp(10px, 2vw, 26px) clamp(12px, 1.6vw, 22px);
  border-left: 1px solid var(--grey-line);
}
.value:first-child { border-left: none; }
.value__icon { width: 112px; height: 112px; margin: 0 auto 18px; color: var(--navy); }
.value__icon svg,
.value__icon img { width: 100%; height: 100%; object-fit: contain; }
.value__label { font-weight: 700; font-size: 1.12rem; color: var(--blue); margin-bottom: 8px; }
.value__text { font-size: .94rem; color: var(--ink-soft); max-width: 24ch; margin-inline: auto; }

/* ---------- 8. Business areas ---------- */
.areas { display: flex; flex-direction: column; gap: clamp(44px, 5vw, 72px); }
.area {
  display: grid;
  align-items: center;
  gap: clamp(28px, 4vw, 60px);
  grid-template-columns: 1fr 1.05fr;   /* text | media */
}
.area--reverse { grid-template-columns: 1.05fr 1fr; }
.area--reverse .area__text  { order: 2; }
.area--reverse .area__media { order: 1; }

/* header: badge sits to the LEFT of the title + subtitle */
.area__head {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 20px);
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.area__head-text { padding-top: 2px; }

.area__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 1.55rem;
  color: #fff;
  flex-shrink: 0;
}
.area__badge--orange { background: var(--orange); }
.area__badge--navy   { background: var(--navy); }

.area__title {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.area__title .accent { color: var(--orange); }
.area__sub {
  margin-top: 8px;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
}
.area__sub--blue   { color: var(--blue); }
.area__sub--orange { color: var(--orange); }

.area__list { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px); }
.area__item { display: flex; align-items: flex-start; gap: 16px; }
.area__item-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  color: var(--navy);
}
.area__item-icon svg,
.area__item-icon img { width: 100%; height: 100%; object-fit: contain; }
.area__item-text { font-weight: 600; color: var(--navy); font-size: 1.05rem; padding-top: 7px; }

.area__media img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}
.area__media--dark img { background: var(--navy); }

/* ---------- 9. Contact ---------- */
.contact { background: var(--navy); color: #fff; }
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.contact__title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.contact__body { margin-top: 22px; max-width: 460px; color: rgba(255,255,255,.82); font-size: 1.08rem; }
.contact__meta { margin-top: 38px; display: flex; flex-direction: column; gap: 22px; }
.contact__label { font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: #5aa0e6; text-transform: uppercase; margin-bottom: 4px; }
.contact__value { font-size: 1.12rem; font-weight: 600; }
.contact__value a { transition: color .2s; }
@media (hover: hover) { .contact__value a:hover { color: var(--orange); } }

/* form card */
.form {
  background: #fff;
  border-radius: 20px;
  padding: clamp(26px, 3vw, 44px);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.6);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--navy);
  background: var(--grey);
  border: 1.5px solid var(--grey-line);
  border-radius: 10px;
  padding: 13px 15px;
  transition: border-color .2s, background-color .2s;
}
.field input::placeholder,
.field textarea::placeholder { color: #93a1b5; }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--orange); background: #fff; }
.field textarea { resize: vertical; min-height: 130px; }
.form .btn--primary { margin-top: 6px; }

#formSuccess[hidden] { display: none !important; }
.form--success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  min-height: 320px;
}
.form__success-icon { width: 60px; height: 60px; color: var(--orange); margin-bottom: 8px; }
.form__success-title { font-size: 1.4rem; font-weight: 700; color: var(--navy); }
.form__success-text { color: var(--ink-soft); font-size: 1rem; }
.form__error { color: #c0392b; font-weight: 600; font-size: .92rem; margin: -6px 0 4px; }
.form__error[hidden] { display: none; }

/* ---------- 10. Marquee ---------- */
.marquee {
  background: var(--navy);
  overflow: hidden;
  padding-block: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee__group { display: flex; flex-shrink: 0; }
.marquee__item {
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding-inline: 30px;
  white-space: nowrap;
}
.marquee__item .dot { color: var(--orange); margin-left: 60px; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation-duration: 120s; } }

/* ---------- 11. Footer ---------- */
.footer {
  position: relative;
  background: #fff url("assets/footer-wave.jpg") center 65% / cover no-repeat;
  min-height: 320px;
  display: flex;
  align-items: stretch;
}
.footer__inner {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__brand .brand__mark { height: 48px; }
.footer__brand .brand__divider { height: 40px; }
.footer__brand .brand__type { font-size: 1.6rem; }
.footer__copy { align-self: flex-end; color: rgba(255,255,255,.92); font-size: .92rem; font-weight: 500; }

/* ---------- 12. Scroll-reveal ---------- */
/* Only hide when JS is alive (html.js) so a no-JS load shows everything. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   13. Responsive — tablet (<= 1023px)
   ============================================================ */
@media (max-width: 1023px) {
  :root { --nav-h: 68px; }

  .nav__links,
  .nav__right { display: none; }
  .nav__toggle { display: block; }

  /* pillars stack — keep the source aspect-ratio so the full image still shows (no zoom) */
  .pillars { grid-template-columns: 1fr; }
  .pillar { aspect-ratio: 1.13 / 1; }

  /* values: 3 + 2 */
  .values { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
  .value { border-left: 1px solid var(--grey-line); }
  .value:nth-child(3n+1) { border-left: none; }
  .value:nth-child(n+4) { padding-top: 6px; }

  /* business areas: text block then image, stacked */
  .area,
  .area--reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .area--reverse .area__text,
  .area--reverse .area__media { order: 0; }

  /* contact stacks */
  .contact__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Secção Missão — imagem da rede global + frase sobreposta no
   topo-centro (sobre a faixa branca livre da imagem).
   ============================================================ */
.mission { padding-block: clamp(40px, 5vw, 72px) clamp(8px, 1vw, 14px); }
.mission .container { max-width: 1400px; }
.mission__wrap {
  position: relative;
  max-width: 1400px;          /* maior, ocupa melhor a largura da secção */
  margin-inline: auto;
}
/* aproxima a secção dos 5 ícones que vem a seguir à Missão */
.mission + .section { padding-top: clamp(8px, 1vw, 14px); }
.mission__img {
  display: block;
  width: 100%;
  height: auto;
}
/* trocar imagem por contexto: PC vê a landscape, mobile vê a vertical */
.mission__img--m { display: none; }
.mission__text {
  position: static;
  width: min(72%, 760px);
  margin: 0 auto clamp(18px, 2.4vw, 32px);
  text-align: center;
  font-weight: 800;
  font-size: clamp(1.05rem, 1.95vw, 1.65rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.mission__label { color: var(--orange); }

/* ============================================================
   14. Responsive — mobile (<= 767px)
   ============================================================ */
@media (max-width: 767px) {
  .brand__type { font-size: 1.3rem; }
  .brand__mark { height: 40px; }
  .brand__divider { height: 32px; }

  .hero {
    text-align: center;
    align-items: flex-start;
    /* imagem vertical dedicada ao mobile (a versão desktop é landscape) */
    background-image: url("assets/hero-wave-mobile.png");
    background-position: center center;
    background-size: cover;
  }
  .hero::before {
    background: linear-gradient(180deg, rgba(7,22,45,.78) 0%, rgba(7,22,45,.55) 45%, rgba(7,22,45,.72) 100%);
  }
  .hero__inner { max-width: 100%; margin-inline: auto; padding-top: 104px; }
  /* mobile: tamanhos de letra pedidos */
  .hero__brand { font-size: 50px; margin-top: 0; }
  .hero__tagline { font-size: 40px; margin-top: 210px; }
  /* mobile: sub-assinatura volta ao fluxo normal (imagem vertical tem outra linha de água) */
  .hero__sub { position: static; top: auto; padding-inline: 0; margin-top: 22px; justify-content: center; }
  .hero__sub::after { display: block; }
  .hero__desc { margin-inline: auto; }
  .hero__cta { flex-direction: column; margin-top: 28px; }
  .hero__cta .btn { width: 100%; }

  /* values: 2 + 2 + 1 */
  .values { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .value { border-left: 1px solid var(--grey-line); }
  .value:nth-child(3n+1) { border-left: 1px solid var(--grey-line); }
  .value:nth-child(2n+1) { border-left: none; }

  /* último ícone (5º) sozinho na última linha — ocupa as 2 colunas e centra */
  .value:nth-child(5) { grid-column: 1 / -1; }

  /* contact form single column */
  .form__row { grid-template-columns: 1fr; gap: 0; }

  /* footer — manter alinhamento como no PC (logo à esquerda, copyright em baixo à direita) */
  .footer {
    min-height: 280px;
    /* imagem já recortada (sem faixas brancas): a onda encosta ao marquee
       em cima; o footer dá altura para a frase ficar ABAIXO da onda */
    background-image: url("assets/footer-wave-mobile.png");
    background-position: center 70%;
    background-size: cover;
  }
  /* logo no topo (acima do pico da onda); copyright junto ao fundo, abaixo da onda */
  .footer__inner {
    padding-top: clamp(26px, 7vw, 40px);
    padding-bottom: clamp(14px, 4vw, 22px);
    padding-right: clamp(12px, 3.5vw, 22px);
  }
  .footer__brand .brand__mark { height: 40px; }
  .footer__brand .brand__divider { height: 34px; }
  .footer__brand .brand__type { font-size: 1.3rem; }

  .marquee__item { font-size: .9rem; padding-inline: 20px; }
  .marquee__item .dot { margin-left: 40px; }
}

@media (max-width: 380px) {
  .area__list .area__item-text { font-size: 1rem; }
}

/* ============================================================
   15. Motion layer — modern micro-interactions
   ------------------------------------------------------------
   All wrapped so reduced-motion users get a calm, static page.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* ---- Scroll progress bar (injected by JS) ---- */
  .scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--orange), #ffa14d);
    z-index: 200;
    will-change: transform;
  }

  /* ---- Navbar: lift + condense on scroll ---- */
  .nav {
    transition: box-shadow .3s ease, background-color .3s ease, height .3s ease;
  }
  .nav.is-scrolled {
    height: calc(var(--nav-h) - 10px);
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 30px -18px rgba(10,35,70,.45);
  }
  .brand__mark { transition: height .3s ease; }
  .nav.is-scrolled .brand__mark { height: 38px; }
  .nav.is-scrolled .brand__divider { height: 31px; }

  /* ---- Hero entrance (transition-based: always settles visible) ---- */
  .js .hero__inner > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1);
  }
  body.is-loaded .hero__inner > * { opacity: 1; transform: none; }
  body.is-loaded .hero__brand   { transition-delay: .10s; }
  body.is-loaded .hero__tagline { transition-delay: .22s; }
  body.is-loaded .hero__sub     { transition-delay: .34s; }
  body.is-loaded .hero__desc    { transition-delay: .46s; }
  body.is-loaded .hero__cta     { transition-delay: .58s; }
  /* subtle warm glow settling in behind the hero text */
  .hero::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 80% at 80% 50%, rgba(255,102,0,.12), transparent 60%);
    opacity: 0;
    transition: opacity 1.4s ease .5s;
    pointer-events: none;
    z-index: 1;
  }
  body.is-loaded .hero::after { opacity: 1; }

  /* ---- Staggered child reveals inside .reveal blocks ---- */
  /* value strip cards */
  .js .values .value,
  .js .area__head,
  .js .area__media,
  .js .area__list .area__item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .js .reveal.in .value,
  .js .reveal.in .area__head,
  .js .reveal.in .area__media,
  .js .reveal.in .area__list .area__item { opacity: 1; transform: none; }

  /* value strip cascade */
  .reveal.in .value:nth-child(1) { transition-delay: .05s; }
  .reveal.in .value:nth-child(2) { transition-delay: .13s; }
  .reveal.in .value:nth-child(3) { transition-delay: .21s; }
  .reveal.in .value:nth-child(4) { transition-delay: .29s; }
  .reveal.in .value:nth-child(5) { transition-delay: .37s; }

  /* area: media slides in from the side, head leads, bullets cascade */
  .js .area__media { transform: translateY(20px) scale(.97); }
  .js .area:not(.area--reverse) .area__media { transform: translateX(34px) scale(.98); }
  .js .area--reverse .area__media { transform: translateX(-34px) scale(.98); }
  .js .reveal.in .area__media { transform: none; transition-delay: .12s; }
  .reveal.in .area__head { transition-delay: .04s; }
  .reveal.in .area__list .area__item:nth-child(1) { transition-delay: .18s; }
  .reveal.in .area__list .area__item:nth-child(2) { transition-delay: .26s; }
  .reveal.in .area__list .area__item:nth-child(3) { transition-delay: .34s; }
  .reveal.in .area__list .area__item:nth-child(4) { transition-delay: .42s; }
  .reveal.in .area__list .area__item:nth-child(5) { transition-delay: .50s; }

  /* ---- Hover micro-interactions (desktop pointers only) ---- */
  @media (hover: hover) {
    /* value cards lift + icon pops to orange */
    .value { transition: transform .3s ease; }
    .value__icon { transition: transform .35s cubic-bezier(.2,.7,.2,1), color .3s ease; }
    .value:hover { transform: translateY(-6px); }
    .value:hover .value__icon { transform: translateY(-2px) scale(1.12); color: var(--orange); }

    /* area bullet nudges + icon pops on row hover */
    .area__item { transition: transform .25s ease; }
    .area__item-icon { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
    .area__item:hover { transform: translateX(5px); }
    .area__item:hover .area__item-icon { transform: scale(1.14); }

    /* area image: gentle zoom + deeper shadow */
    .area__media img { transition: transform .55s cubic-bezier(.2,.6,.2,1), box-shadow .4s ease; }
    .area__media:hover img { transform: scale(1.025); box-shadow: 0 34px 70px -30px rgba(10,35,70,.5); }

    /* pillar: lift body text & brighten on hover */
    .pillar__body { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
    .pillar:hover .pillar__body { transform: translateY(-8px); }

    /* button shine sweep */
    .btn { position: relative; overflow: hidden; }
    .btn::after {
      content: "";
      position: absolute; top: 0; left: -130%;
      width: 60%; height: 100%;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
      transform: skewX(-18deg);
      transition: left .6s ease;
    }
    .btn:hover::after { left: 140%; }

    /* nav CTA gentle scale already covered by .btn:hover translateY */
    .lang__btn { transition: background-color .2s, color .2s, transform .15s ease; }
    .lang__btn:hover { transform: translateY(-1px); }

    /* logo subtle pop on hover */
    .brand:hover .brand__mark { transform: scale(1.06) rotate(-2deg); }
    .brand .brand__mark { transition: transform .3s ease, height .3s ease; }
  }

  /* ---- Marquee pauses on hover for readability ---- */
  .marquee:hover .marquee__track { animation-play-state: paused; }
}

/* ============================================================
   16. Área 01 — duas imagens lado a lado
   ESQUERDA: imagem com nº 01 + ícones, texto editável sobreposto
   (título/subtítulo ao lado do "01"; frases ao lado de cada ícone).
   DIREITA: foto das pessoas (mesma altura da imagem da esquerda).
   Desktop ≥1000px: sobreposição escalada com unidades de container.
   <1000px: empilha — foto, título/subtítulo, lista ícone+texto.
   ============================================================ */
.area01 { display: block; }              /* anula a grelha de .area */
.area01__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  border-radius: 18px;
  box-shadow: var(--shadow-card);   /* sombra na peça inteira, não em cada metade */
}

/* coluna esquerda — imagem-infográfico + texto sobreposto */
.area01__stage {
  position: relative;
  container-type: inline-size;
  border-radius: 18px 0 0 18px;   /* só os cantos exteriores (esquerda) */
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.area01__fig { display: block; width: 100%; height: auto; }

/* título + subtítulo, centrados na linha do badge "01" */
.area01__head {
  position: absolute;
  top: 14.9%;
  left: 20%;
  width: 76%;
  transform: translateY(-50%);
}
.area01__head .area__title { font-size: 5cqw; line-height: 1.08; }
.area01__head .area__sub   { font-size: 2.1cqw; margin-top: .6cqw; line-height: 1.25; }

/* etiquetas — cada uma centrada na linha vertical do seu ícone */
.area01__list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.area01__item {
  position: absolute;
  left: 20%;
  top: var(--t);
  transform: translateY(-50%);
  width: 76%;
  pointer-events: auto;
}
.area01__tx {
  display: block;
  font-size: 2.25cqw;
  line-height: 1.22;
  font-weight: 600;
  color: var(--navy);
}
.area01__item--ai .area01__tx { font-size: 2cqw; }

/* coluna direita — foto das pessoas, encosta à altura da imagem esquerda */
.area01__photo {
  position: relative;
  border-radius: 0 18px 18px 0;   /* só os cantos exteriores (direita) */
  overflow: hidden;
  min-height: 100%;
}
.area01__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* lista mobile — escondida no desktop */
.area01__mlist { display: none; }

/* --- abaixo de 1000px: empilhar (a sobreposição ficaria minúscula) --- */
@media (max-width: 999px) {
  .area01__grid { grid-template-columns: 1fr; gap: 0; }

  /* foto das pessoas primeiro */
  .area01__photo { order: 1; min-height: 0; border-radius: 18px 18px 0 0; box-shadow: none; }
  .area01__photo img { position: static; height: auto; }

  /* a "imagem-infográfico" passa a ser só o título/subtítulo em texto */
  .area01__stage {
    order: 2;
    container-type: normal;
    border-radius: 0;
    box-shadow: none;
    background: var(--grey);
  }
  .area01__fig,
  .area01__list { display: none; }
  .area01__head {
    position: static;
    transform: none;
    width: auto;
    padding: clamp(22px, 4vw, 30px) clamp(20px, 5vw, 32px) 4px;
  }
  .area01__head .area__title { font-size: clamp(1.5rem, 4.4vw, 2.1rem); }
  .area01__head .area__sub   { font-size: clamp(1rem, 2.3vw, 1.18rem); margin-top: 8px; }

  /* lista ícone + texto */
  .area01__mlist {
    order: 3;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    list-style: none;
    background: var(--grey);
    border-radius: 0 0 18px 18px;
    padding: clamp(16px, 3.5vw, 24px) clamp(20px, 5vw, 32px) clamp(24px, 4vw, 32px);
  }
  .area01__mitem { display: flex; align-items: flex-start; gap: 14px; font-weight: 600; color: var(--navy); }
  .area01__mic { display: inline-flex; width: 42px; height: 42px; flex-shrink: 0; }
  .area01__mic img { width: 100%; height: 100%; object-fit: contain; }
  .area01__mitem span:last-child { font-size: 1.05rem; line-height: 1.5; padding-top: 7px; }
}

/* ============================================================
   Área 02 — imagem IA (esquerda) + imagem nº 02/ícones (direita)
   com texto editável sobreposto. Espelho da Área 01.
   ============================================================ */
.area02 { display: block; }
.area02__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

/* esquerda — imagem da IA (preenche a altura da peça) */
.area02__photo {
  position: relative;
  border-radius: 18px 0 0 18px;   /* só os cantos exteriores (esquerda) */
  overflow: hidden;
  min-height: 100%;
}
.area02__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* direita — imagem nº 02 + ícones, define a altura; texto sobreposto */
.area02__stage {
  position: relative;
  container-type: inline-size;
  border-radius: 0 18px 18px 0;   /* só os cantos exteriores (direita) */
  overflow: hidden;
  background: #fff;
}
.area02__fig { display: block; width: 100%; height: auto; }

/* título + subtítulo, centrados na linha do badge "02" */
.area02__head {
  position: absolute;
  top: 20.9%;
  left: 21.6%;
  width: 72%;
  transform: translateY(-50%);
}
.area02__head .area__title { font-size: 5cqw; line-height: 1.08; }
.area02__head .area__sub   { font-size: 2.1cqw; margin-top: .6cqw; line-height: 1.25; max-width: 55cqw; }

/* etiquetas — cada uma centrada na linha vertical do seu ícone */
.area02__list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.area02__item {
  position: absolute;
  left: 20%;
  top: var(--t);
  transform: translateY(-50%);
  width: 74%;
  pointer-events: auto;
}
.area02__tx {
  display: block;
  font-size: 2.95cqw;
  line-height: 1.22;
  font-weight: 600;
  color: var(--navy);
}

/* lista mobile — escondida no desktop */
.area02__mlist { display: none; }

/* --- abaixo de 1000px: empilhar --- */
@media (max-width: 999px) {
  .area02__grid { grid-template-columns: 1fr; gap: 0; }

  /* imagem IA primeiro */
  .area02__photo { order: 1; min-height: 0; border-radius: 18px 18px 0 0; box-shadow: none; }
  .area02__photo img { position: static; height: auto; }

  /* a "imagem nº 02" passa a ser só o título/subtítulo em texto */
  .area02__stage {
    order: 2;
    container-type: normal;
    border-radius: 0;
    box-shadow: none;
    background: var(--grey);
  }
  .area02__fig,
  .area02__list { display: none; }
  .area02__head {
    position: static;
    transform: none;
    width: auto;
    padding: clamp(22px, 4vw, 30px) clamp(20px, 5vw, 32px) 4px;
  }
  .area02__head .area__title { font-size: clamp(1.5rem, 4.4vw, 2.1rem); }
  .area02__head .area__sub   { font-size: clamp(1rem, 2.3vw, 1.18rem); margin-top: 8px; }

  /* lista ícone + texto */
  .area02__mlist {
    order: 3;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    list-style: none;
    background: var(--grey);
    border-radius: 0 0 18px 18px;
    padding: clamp(16px, 3.5vw, 24px) clamp(20px, 5vw, 32px) clamp(24px, 4vw, 32px);
  }
  .area02__mitem { display: flex; align-items: flex-start; gap: 14px; font-weight: 600; color: var(--navy); }
  .area02__mic { display: inline-flex; width: 42px; height: 42px; flex-shrink: 0; }
  .area02__mic img { width: 100%; height: 100%; object-fit: contain; }
  .area02__mitem span:last-child { font-size: 1.05rem; line-height: 1.5; padding-top: 7px; }
}

/* ============================================================
   Área 03 — imagem nº 03/ícones (esquerda) com texto editável
   sobreposto + foto (direita). Estrutura como a Área 01.
   ============================================================ */
.area03 { display: block; }
.area03__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

/* esquerda — imagem nº 03 + ícones, define a altura; texto sobreposto */
.area03__stage {
  position: relative;
  container-type: inline-size;
  border-radius: 18px 0 0 18px;   /* só os cantos exteriores (esquerda) */
  overflow: hidden;
  background: #fff;
}
.area03__fig { display: block; width: 100%; height: auto; }

/* título + subtítulo, topo alinhado com a caixa do badge "03" */
.area03__head {
  position: absolute;
  top: 8%;
  left: 21.6%;
  width: 72%;
  transform: none;
}
.area03__head .area__title { font-size: 5cqw; line-height: 1.1; max-width: 63cqw; }
.area03__head .area__sub   { font-size: 2.1cqw; margin-top: .6cqw; line-height: 1.25; }

/* etiquetas — cada uma centrada na linha vertical do seu ícone */
.area03__list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.area03__item {
  position: absolute;
  left: 19%;
  top: var(--t);
  transform: translateY(-50%);
  width: 77%;
  pointer-events: auto;
}
.area03__tx {
  display: block;
  font-size: 2.95cqw;
  line-height: 1.22;
  font-weight: 600;
  color: var(--navy);
}

/* direita — foto (preenche a altura da peça) */
.area03__photo {
  position: relative;
  border-radius: 0 18px 18px 0;   /* só os cantos exteriores (direita) */
  overflow: hidden;
  min-height: 100%;
}
.area03__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* lista mobile — escondida no desktop */
.area03__mlist { display: none; }

/* --- abaixo de 1000px: empilhar --- */
@media (max-width: 999px) {
  .area03__grid { grid-template-columns: 1fr; gap: 0; }

  /* foto primeiro */
  .area03__photo { order: 1; min-height: 0; border-radius: 18px 18px 0 0; box-shadow: none; }
  .area03__photo img { position: static; height: auto; }

  /* a "imagem nº 03" passa a ser só o título/subtítulo em texto */
  .area03__stage {
    order: 2;
    container-type: normal;
    border-radius: 0;
    box-shadow: none;
    background: var(--grey);
  }
  .area03__fig,
  .area03__list { display: none; }
  .area03__head {
    position: static;
    transform: none;
    width: auto;
    padding: clamp(22px, 4vw, 30px) clamp(20px, 5vw, 32px) 4px;
  }
  .area03__head .area__title { font-size: clamp(1.5rem, 4.4vw, 2.1rem); }
  .area03__head .area__sub   { font-size: clamp(1rem, 2.3vw, 1.18rem); margin-top: 8px; }

  /* lista ícone + texto */
  .area03__mlist {
    order: 3;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    list-style: none;
    background: var(--grey);
    border-radius: 0 0 18px 18px;
    padding: clamp(16px, 3.5vw, 24px) clamp(20px, 5vw, 32px) clamp(24px, 4vw, 32px);
  }
  .area03__mitem { display: flex; align-items: flex-start; gap: 14px; font-weight: 600; color: var(--navy); }
  .area03__mic { display: inline-flex; width: 42px; height: 42px; flex-shrink: 0; }
  .area03__mic img { width: 100%; height: 100%; object-fit: contain; }
  .area03__mitem span:last-child { font-size: 1.05rem; line-height: 1.5; padding-top: 7px; }

  /* Missão — em mobile a frase fica acima da imagem (a faixa branca
     superior fica demasiado curta para sobrepor texto legível) */
  .mission__wrap { display: block; }
  .mission__text {
    position: static;
    transform: none;
    width: auto;
    max-width: 100%;
    margin: 0 auto clamp(4px, 1vw, 8px);
    padding-inline: clamp(16px, 5vw, 28px);
    font-size: 35px;
  }
  .mission__img { border-radius: 12px; }
  .mission__img--pc { display: none; }
  .mission__img--m { display: block; }

  /* imagem bastante maior no mobile — vai até às margens do ecrã */
  .mission { padding-block: clamp(24px, 6vw, 40px) 0px; margin-bottom: -48px; }
  .mission .container { padding-inline: 0; max-width: 100%; }
  .mission__wrap { max-width: 100%; }
  .mission + .section { padding-top: 0px; }
}


/* ============================================================
   17. Ajustes específicos de TABLET (768–1199px)
   ------------------------------------------------------------
   Só afeta tablets reais (não PC ≥1200, não Mobile ≤767, nem o
   preview Mobile via .vp-force-mobile). !important para vencer os
   estilos inline dos títulos/subtítulos/bullets das áreas.
   ============================================================ */

/* títulos dos pontos 1, 2 e 3 — todos iguais e mais pequenos (26px),
   tanto no layout empilhado (768–999) como lado-a-lado (1000–1199),
   em PT e EN */
@media (min-width: 768px) and (max-width: 1199px) {
  html:not(.vp-force-mobile) .area01__head .area__title,
  html:not(.vp-force-mobile) .area02__head .area__title,
  html:not(.vp-force-mobile) .area03__head .area__title {
    font-size: 26px !important;
    line-height: 1.12 !important;
  }
}

/* layout lado-a-lado em tablet (1000–1199): subtítulos e textos à frente
   dos ícones uniformes — todos com o tamanho do texto dos ícones do
   ponto 2 (2.95cqw). Os bullets do ponto 1 deixam de usar os 17px fixos. */
@media (min-width: 1000px) and (max-width: 1199px) {
  html:not(.vp-force-mobile) .area01__head .area__sub,
  html:not(.vp-force-mobile) .area02__head .area__sub,
  html:not(.vp-force-mobile) .area03__head .area__sub {
    font-size: 2.95cqw !important;
    line-height: 1.35 !important;
  }
  html:not(.vp-force-mobile) .area01__tx,
  html:not(.vp-force-mobile) .area01__item--ai .area01__tx {
    font-size: 2.95cqw !important;
  }
}

/* ============================================================
   18. Fallback p/ browsers SEM container queries (cqw)
   ------------------------------------------------------------
   Os textos dos infográficos das Áreas usam unidades cqw (escalam
   com a largura da imagem). Browsers atuais suportam todos cqw e
   IGNORAM este bloco — não afeta o design atual. Só browsers muito
   antigos (pré-2022/23) caem aqui e recebem tamanhos rem razoáveis,
   evitando texto a colapsar para o tamanho por defeito.
   ============================================================ */
@supports not (width: 1cqw) {
  .area01__head .area__title,
  .area02__head .area__title,
  .area03__head .area__title { font-size: 1.85rem; }

  .area01__head .area__sub,
  .area02__head .area__sub,
  .area03__head .area__sub { font-size: .95rem; margin-top: .4rem; }

  .area01__tx { font-size: .95rem; }
  .area01__item--ai .area01__tx { font-size: .88rem; }
  .area02__tx,
  .area03__tx { font-size: 1.05rem; }
}