/* ============================================================
   Ricardo Maia 1555 — gerado a partir de TEMPLATE.psd (1080x3605)
   Todas as medidas em unidades de design: 1u = largura/1080
   ============================================================ */
@font-face {
  font-family: 'Uni Sans Heavy';
  src: url('../assets/fonts/UniSansHeavyCAPS.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Aspekta';
  src: url('../assets/fonts/Aspekta-450.woff2') format('woff2');
  font-weight: 450;
  font-style: normal;
  font-display: block;
}

:root {
  --u: calc(min(100vw, 1080px) / 1080);
  --blue: #185396;
  --uni: 'Uni Sans Heavy', 'Arial Black', sans-serif;
  --asp: 'Aspekta', 'Helvetica Neue', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }
body {
  background: #fff;
  font-family: var(--asp);
}

/* faixa do hero estendida para telas > 1080px */
.bleed {
  position: absolute;
  top: 0;
  height: calc(var(--u) * 702);
  width: 50%;
  z-index: 0;
}
.bleed-l { left: 0;  background: linear-gradient(180deg, #89ec5e 0.0%, #97eb57 3.71%, #96e756 4.28%, #91df59 4.85%, #83ce5f 5.56%, #71b965 6.13%, #4b8b74 7.13%, #316e7e 7.85%, #255f83 8.27%, #174f88 8.99%, #124a89 9.42%, #0f468a 10.27%, #0f468b 69.76%, #175296 98.15%, #ffffff 98.29%, #ffffff 100.0%); }
.bleed-r { right: 0; background: linear-gradient(180deg, #2769a9 0.0%, #367ebb 30.81%, #3780bd 30.96%, #51a4db 31.1%, #51a4db 33.52%, #4fa1d9 33.67%, #3880bd 33.81%, #3982bf 36.8%, #3a97cb 36.95%, #4195d1 37.09%, #2061bf 37.23%, #2495e5 37.38%, #37b5ed 37.52%, #43b6dd 37.66%, #347cb9 37.8%, #295fb1 37.95%, #3789cd 38.09%, #5cd2f2 38.23%, #72fbfd 38.37%, #70f7fc 38.52%, #65e5f8 38.66%, #5edaf1 38.94%, #5bd4ee 39.51%, #58c7e7 40.09%, #56c5e5 40.37%, #55c1e3 40.51%, #4babd7 43.37%, #449ace 44.79%, #4193cb 45.79%, #4191ca 46.93%, #4190c9 48.64%, #4394cc 51.5%, #4498cd 52.35%, #499dd1 55.63%, #50abd9 59.34%, #51adda 59.49%, #61c7e8 59.77%, #62cae9 59.91%, #63c9e9 60.34%, #60c7e8 60.77%, #5abce2 61.77%, #5fc5e9 62.77%, #6ddff9 62.91%, #6ae6fc 63.05%, #4baae1 63.2%, #2969c8 63.34%, #3079d1 63.48%, #4691d1 63.62%, #50a5d9 63.77%, #4fb3e4 63.91%, #3697de 64.05%, #3ca3e5 64.19%, #3aa2e6 64.34%, #62d2f2 64.48%, #5cc0e8 64.62%, #59c1eb 64.76%, #58ddfb 64.91%, #50bfea 65.05%, #4795cf 65.19%, #4694ce 65.34%, #4a9bd4 77.6%, #4b9dd2 79.03%, #4ca3cb 80.03%, #4dadbf 80.74%, #51cf95 82.31%, #51dc84 83.17%, #4ee47d 83.88%, #4ce67a 84.88%, #41e780 88.16%, #3de384 89.44%, #3dde8c 90.3%, #3cd993 90.73%, #48afc7 93.01%, #4da4d7 94.29%, #50a2da 95.58%, #50a4db 99.43%, #73b6e2 99.57%, #ffffff 99.71%, #ffffff 100.0%); }

#page {
  position: relative;
  width: calc(var(--u) * 1080);
  height: calc(var(--u) * 3605);
  margin: 0 auto;
  z-index: 1;
}
#page img { display: block; }

.abs { position: absolute; }

/* ---------- HERO ---------- */
.hero-bg {
  left: 0; top: 0;
  width: calc(var(--u) * 1080); height: calc(var(--u) * 702);
}
.logo-mdb    { left: calc(var(--u) * 968); top: calc(var(--u) * 34);  width: calc(var(--u) * 70);  height: calc(var(--u) * 49); }
.logo-ricardo{ left: calc(var(--u) * 73);  top: calc(var(--u) * 283); width: calc(var(--u) * 389); height: calc(var(--u) * 159); }
.logo-1555   { left: calc(var(--u) * 52);  top: calc(var(--u) * 476); width: calc(var(--u) * 432); height: calc(var(--u) * 185); }

.hero-slogan {
  left: calc(var(--u) * 943.07);
  top: calc(var(--u) * 359.9);
  transform: translateX(-50%);
  font-family: var(--uni);
  font-size: calc(var(--u) * 34.23);
  line-height: calc(var(--u) * 36.55);
  letter-spacing: 0.025em;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- NAV ---------- */
.nav a { text-decoration: none; }
.nav-link {
  top: calc(var(--u) * 146.03);
  transform: translateX(-50%);
  font-family: var(--uni);
  font-size: calc(var(--u) * 24.36);
  line-height: calc(var(--u) * 24.36);
  letter-spacing: 0.025em;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}
.nav-link::before {
  content: '';
  position: absolute;
  left: calc(var(--u) * -28);
  right: calc(var(--u) * -28);
  top: calc(50% - calc(var(--u) * 5.2));
  height: calc(var(--u) * 70);
  transform: translateY(-50%);
  border-radius: calc(var(--u) * 35);
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.15) 55%, rgba(255,255,255,.22));
  border: max(1px, calc(var(--u) * 2)) solid rgba(255,255,255,.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .18s ease;
  z-index: -1;
}
.nav-link:hover::before { opacity: 1; }
.nl-propostas { left: calc(var(--u) * 123.52); }
.nl-nosso-mandato { left: calc(var(--u) * 341.35); }
.nl-fotos { left: calc(var(--u) * 521.28); }
.nl-redes { left: calc(var(--u) * 641.77); }
.nl-jingles { left: calc(var(--u) * 774.33); }

.nav-zap {
  left: calc(var(--u) * 835); top: calc(var(--u) * 118);
  width: calc(var(--u) * 216); height: calc(var(--u) * 70);
  z-index: 2;
}
.nav-zap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: calc(var(--u) * 35);
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.15) 55%, rgba(255,255,255,.22));
  border: max(1px, calc(var(--u) * 2)) solid rgba(255,255,255,.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .18s ease;
  z-index: -1;
}
.nav-zap:hover::before { opacity: 1; }
.nav-zap .zap-label {
  position: absolute;
  left: calc(var(--u) * 91.04);
  top: calc(var(--u) * 28.03);
  transform: translateX(-50%);
  font-family: var(--uni);
  font-size: calc(var(--u) * 24.36);
  line-height: calc(var(--u) * 24.36);
  letter-spacing: 0.025em;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-zap .zap-ico {
  position: absolute;
  left: calc(var(--u) * 153); top: calc(var(--u) * 10);
  width: calc(var(--u) * 38); height: calc(var(--u) * 38);
}

/* ---------- BIO ---------- */
.bio-title {
  left: calc(var(--u) * 540.28);
  top: calc(var(--u) * 752.37);
  transform: translateX(-50%);
  font-family: var(--uni);
  font-size: calc(var(--u) * 51.45);
  line-height: calc(var(--u) * 51.45);
  letter-spacing: -0.025em;
  color: var(--blue);
  text-transform: uppercase;
  white-space: nowrap;
}
.bio-text {
  left: calc(var(--u) * 76.6);
  top: calc(var(--u) * 839.7);
  width: calc(var(--u) * 926.4);
  font-family: var(--asp);
  font-weight: 450;
  font-size: calc(var(--u) * 25.0);
  line-height: calc(var(--u) * 30.0);
  letter-spacing: -0.033em;
  color: var(--blue);
}
.bio-text .jl {
  display: block;
  text-align: justify;
  text-align-last: justify;
}
.bio-text .ll {
  display: block;
  text-align: center;
}

/* ---------- CARDS ---------- */
/* o <a> e apenas o retangulo visivel do card; a foto estoura por cima
   como decoracao (pointer-events none) para o hover nao vazar */
.card {
  display: block;
}
.card img {
  position: absolute;
  width: calc(var(--u) * 1080);
  max-width: none;
  pointer-events: none;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: calc(var(--u) * 48);
  box-shadow: 0 calc(var(--u) * 28) calc(var(--u) * 55) calc(var(--u) * -20) rgba(13, 47, 94, .50);
  opacity: 0;
  transition: opacity .3s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.card:hover::after { opacity: 1; }
.card:hover .card-title { transform: translateX(calc(var(--u) * 12)); }

/* alvo do #fragmento: elemento nao-focavel, para o navegador nao desenhar
   anel de foco ao abrir um link compartilhado como /#redes */
.card .anchor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* foco por teclado: anel que acompanha o retangulo do card.
   Desenhado no ::after (unico que pinta acima da foto) porque o
   outline:auto do Chrome se expande para o conteudo que transborda. */
.card:focus-visible { outline: none; }
.card:focus-visible::after {
  opacity: 1;
  box-shadow:
    inset 0 0 0 max(3px, calc(var(--u) * 5)) #fff,
    inset 0 0 0 max(5px, calc(var(--u) * 8)) rgba(13, 47, 94, .65),
    0 calc(var(--u) * 28) calc(var(--u) * 55) calc(var(--u) * -20) rgba(13, 47, 94, .50);
}
.card-title {
  position: absolute;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
  font-family: var(--uni);
  font-size: calc(var(--u) * 88.46);
  line-height: calc(var(--u) * 87.48);
  letter-spacing: -0.025em;
  color: #fff;
  text-transform: uppercase;
  pointer-events: none;
}
.card-propostas { left: calc(var(--u) * 60); top: calc(var(--u) * 1124); width: calc(var(--u) * 961); height: calc(var(--u) * 278); }
.card-propostas .anchor { scroll-margin-top: calc(var(--u) * 180); }
.card-propostas img { left: calc(var(--u) * -60); top: calc(var(--u) * -160); height: calc(var(--u) * 439); }
.card-propostas .card-title { left: calc(var(--u) * 64.24); top: calc(var(--u) * 104.33); }
.card-nosso-mandato { left: calc(var(--u) * 60); top: calc(var(--u) * 1510); width: calc(var(--u) * 961); height: calc(var(--u) * 278); }
.card-nosso-mandato .anchor { scroll-margin-top: calc(var(--u) * 180); }
.card-nosso-mandato img { left: calc(var(--u) * -60); top: calc(var(--u) * -160); height: calc(var(--u) * 439); }
.card-nosso-mandato .card-title { left: calc(var(--u) * 64.24); top: calc(var(--u) * 72.43); }
.card-fotos { left: calc(var(--u) * 58); top: calc(var(--u) * 1895); width: calc(var(--u) * 962); height: calc(var(--u) * 278); }
.card-fotos .anchor { scroll-margin-top: calc(var(--u) * 284); }
.card-fotos img { left: calc(var(--u) * -58); top: calc(var(--u) * -264); height: calc(var(--u) * 543); }
.card-fotos .card-title { left: calc(var(--u) * 65.02); top: calc(var(--u) * 104.86); }
.card-redes { left: calc(var(--u) * 60); top: calc(var(--u) * 2282); width: calc(var(--u) * 961); height: calc(var(--u) * 278); }
.card-redes .anchor { scroll-margin-top: calc(var(--u) * 375); }
.card-redes img { left: calc(var(--u) * -60); top: calc(var(--u) * -355); height: calc(var(--u) * 634); }
.card-redes .card-title { left: calc(var(--u) * 59.24); top: calc(var(--u) * 104.56); }
.card-jingles { left: calc(var(--u) * 60); top: calc(var(--u) * 2668); width: calc(var(--u) * 961); height: calc(var(--u) * 278); }
.card-jingles .anchor { scroll-margin-top: calc(var(--u) * 212); }
.card-jingles img { left: calc(var(--u) * -60); top: calc(var(--u) * -192); height: calc(var(--u) * 471); }
.card-jingles .card-title { left: calc(var(--u) * 64.24); top: calc(var(--u) * 116.56); }
.card-maia-zap { left: calc(var(--u) * 60); top: calc(var(--u) * 3054); width: calc(var(--u) * 961); height: calc(var(--u) * 278); }
.card-maia-zap .anchor { scroll-margin-top: calc(var(--u) * 194); }
.card-maia-zap img { left: calc(var(--u) * -60); top: calc(var(--u) * -174); height: calc(var(--u) * 453); }
.card-maia-zap .card-title { left: calc(var(--u) * 64.24); top: calc(var(--u) * 60.02); }

/* ---------- FOOTER ---------- */
/* mesmo hover dos cards: elevacao por sombra, sem veu sobre o icone */
.social a { position: absolute; }
.social img {
  width: 100%;
  height: 100%;
  transition: filter .3s cubic-bezier(.16, 1, .3, 1);
}
.social a:hover img {
  filter: drop-shadow(0 calc(var(--u) * 9) calc(var(--u) * 16) rgba(13, 47, 94, .50));
}
.so-instagram { left: calc(var(--u) * 357); top: calc(var(--u) * 3452); width: calc(var(--u) * 65); height: calc(var(--u) * 65); }
.so-facebook { left: calc(var(--u) * 438); top: calc(var(--u) * 3453); width: calc(var(--u) * 62); height: calc(var(--u) * 62); }
.so-tik-tok { left: calc(var(--u) * 517); top: calc(var(--u) * 3452); width: calc(var(--u) * 55); height: calc(var(--u) * 63); }
.so-social { left: calc(var(--u) * 589); top: calc(var(--u) * 3452); width: calc(var(--u) * 54); height: calc(var(--u) * 64); }
.so-whatsapp-2 { left: calc(var(--u) * 661); top: calc(var(--u) * 3453); width: calc(var(--u) * 63); height: calc(var(--u) * 63); }

a:focus:not(:focus-visible) { outline: none; }

::selection { background: #185396; color: #fff; }