/* ==========================================================================
   Nutri 20k — réplica estática da landing page eniatec.com.br/nutri-10k
   Estrutura espelha o Divi: section > row > column > module
   ========================================================================== */

:root {
  --navy: #091744;
  --purple: #1a1844;
  --cyan: #14f1d9;
  --teal: #33cccc;
  --pink: #d9486e;
  --orange: #c9361c;
  --muted: #9fa5d6;
  --img-border: #27e2e5;
  --font-lato: "Lato", Helvetica, Arial, Lucida, sans-serif;
  --font-rubik: "Rubik", Helvetica, Arial, Lucida, sans-serif;
  --font-open: "Open Sans", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-open);
  font-size: 14px;
  line-height: 1.7em;
  font-weight: 500;
  color: #666;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

#page { overflow: hidden; position: relative; }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding-bottom: 10px;
  line-height: 1em;
  font-weight: 500;
  color: #fff;
}

p { margin: 0; padding-bottom: 1em; }
.text p:last-of-type { padding-bottom: 0; }

a { color: #2ea3f2; text-decoration: none; }
strong { font-weight: 700; }

.c-teal  { color: var(--teal); }
.c-pink  { color: var(--pink); }
.c-white { color: #fff; }
.u       { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Grid (Divi: section 4% / row 2% / gutter 5.5%)
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  padding: 4% 0;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.row {
  position: relative;
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 2% 0;
  display: flex;
  align-items: flex-start;
  column-gap: 5.5%;
}

.col { position: relative; min-width: 0; z-index: 2; display: flow-root; }
.col-4_4 { flex: 0 0 100%; width: 100%; }
.col-1_2 { flex: 0 0 47.25%; width: 47.25%; }
.col-1_3 { flex: 0 0 29.6667%; width: 29.6667%; }
.col-3_5 { flex: 0 0 58.2%; width: 58.2%; }

/* espaçamento entre módulos (Divi: % da largura da coluna) */
.col-4_4 > .mod { margin-bottom: 2.75%; }
.col-1_2 > .mod { margin-bottom: 5.82%; }
.col-1_3 > .mod { margin-bottom: 9.27%; }
.col-3_5 > .mod { margin-bottom: 4.76%; }
.col > .mod:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Módulos genéricos
   -------------------------------------------------------------------------- */
.text {
  color: #fff;
  font-family: var(--font-lato);
  font-size: 16px;
  line-height: 2em;
  word-wrap: break-word;
}

.h2-spacer { height: 10px; }

.divider { position: relative; width: 100%; }
.divider::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
}
.divider-cyan { height: 4px; max-width: 90px; margin-left: auto; margin-right: auto; }
.divider-cyan::before { border-top: 4px solid var(--cyan); }
.divider-orange { height: 4px; max-width: 400px; margin-left: auto; margin-right: auto; }
.divider-orange::before { border-top: 4px solid var(--orange); }
.divider-faint { height: 23px; max-width: 120px; margin-left: auto; margin-right: auto; }
.divider-faint.w80 { max-width: 80px; }
.divider-left { margin-left: 0; margin-right: auto; }

.btn-wrap { text-align: center; }

.btn {
  display: inline-block;
  font-family: var(--font-rubik);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.7em;
  text-align: center;
  cursor: pointer;
  transition: all 300ms ease 0ms;
}
.btn-cta {
  font-size: 11px;
  color: var(--navy);
  background-color: var(--cyan);
  border-radius: 100px;
  padding: 16px 40px;
}
.btn-cta:hover { letter-spacing: 2px; }
.btn-cta-lg { font-size: 13px; }

.btn-more {
  position: relative;
  font-size: 12px;
  color: var(--cyan);
  background-color: var(--navy);
  padding: .3em 2em .3em .7em;
  box-shadow: 0 2px 0 0 rgba(20, 241, 217, .24);
}
.btn-more:hover { letter-spacing: 2px; }
.btn-more .ico {
  position: absolute;
  right: .6em;
  top: 50%;
  width: 1em;
  height: 1em;
  margin-top: -.5em;
  color: var(--cyan);
}

.img-mod { line-height: 0; text-align: center; }
.img-mod .img-wrap {
  display: inline-block;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  vertical-align: top;
}
.img-mod img { position: relative; display: inline-block; vertical-align: top; }
.img-wrap.r5 { border-radius: 5px; }
.img-wrap.r28 { display: block; width: 100%; border-radius: 28px; border: 2px solid var(--img-border); }
.img-wrap.r28 img { display: block; width: 100%; }
.img-w61 { width: 61%; margin-left: auto; margin-right: auto; text-align: left; }
.img-etapas { margin-top: -60px !important; width: 100%; }
.img-etapas .img-wrap { display: block; width: 100%; }
.img-etapas img { display: block; width: 100%; }

/* --------------------------------------------------------------------------
   Seção 0 · Hero
   -------------------------------------------------------------------------- */
.hero { background-image: url("../img/hero-bg.webp"); }
.hero .row-hero { width: 87%; }

.text-hero-sub { font-size: 16px; font-style: italic; line-height: 2em; }
.text-hero-sub p.sub { font-size: 22px; line-height: 1em; font-weight: 700; text-align: center; padding-bottom: 10px; }

.text-hero-title { font-size: 15px; line-height: 2em; }
.text-hero-title h1 {
  font-family: var(--font-rubik);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 28px;
  letter-spacing: 1px;
  line-height: 1.3em;
}

.text-hero-lead {
  font-size: 21px;
  line-height: 1em;
  margin-top: -42px !important;
  margin-bottom: -31px !important;
}

.col-photo {
  background-image: url("../img/hero-raul.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 27px;
}
.spacer-hero { height: 563px; margin: 50px 0 !important; }

.hero .curve {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 14vw;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: 100% 14vw;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxNHZ3IiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iIzA5MTc0NCI+PHBhdGggZD0iTTAgMTQwaDEyODBDNTczLjA4IDE0MCAwIDAgMCAweiIgZmlsbC1vcGFjaXR5PSIuMyIvPjxwYXRoIGQ9Ik0wIDE0MGgxMjgwQzU3My4wOCAxNDAgMCAzMCAwIDMweiIgZmlsbC1vcGFjaXR5PSIuNSIvPjxwYXRoIGQ9Ik0wIDE0MGgxMjgwQzU3My4wOCAxNDAgMCA2MCAwIDYweiIvPjwvZz48L3N2Zz4=");
}

/* --------------------------------------------------------------------------
   Seção 1 · Metodologia / resultados / card
   -------------------------------------------------------------------------- */
.s1 {
  background-image: url("../img/gaming-02.webp");
  background-position: center top;
  padding-top: 5px;
}
.s1 .row-s1-title { width: 91%; }

.text-metodo { font-size: 15px; line-height: 2em; }
.text-metodo h2 {
  font-family: var(--font-rubik);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 40px;
  letter-spacing: 1px;
  line-height: 1.3em;
  text-align: left;
}

.text-resultados {
  max-width: 700px;
  margin-left: auto !important;
  margin-right: auto !important;
  color: var(--muted);
  text-align: center;
}
.text-resultados h2 {
  font-family: var(--font-rubik);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 39px;
  letter-spacing: 1px;
  line-height: 1.3em;
  text-align: left;
  text-shadow: 0 .08em 0 rgba(0, 0, 0, .4);
}

.row-videos { padding-top: 0 !important; }
.col-videos {
  background-image: url("../img/gaming-01.webp");
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  padding: 100px 30px 0;
}
.video-first { margin-top: -55px !important; }
.video {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
}
.video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Galeria em carrossel (Divi gallery slider) */
.gallery { position: relative; width: 100%; overflow: hidden; }
.gallery .slides { position: relative; }
.gallery .slide { display: none; margin: 0; line-height: 0; }
.gallery .slide.active { display: block; animation: fadeIn .6s ease; }
.gallery .slide img { width: 100%; height: auto; display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.gallery .arrow {
  position: absolute;
  top: 50%;
  margin-top: -24px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s, background .3s;
  z-index: 2;
}
.gallery .arrow svg { width: 32px; height: 32px; }
.gallery .arrow.prev { left: 16px; }
.gallery .arrow.next { right: 16px; }
.gallery:hover .arrow, .gallery:focus-within .arrow { opacity: 1; }
.gallery .arrow:hover { background: rgba(0, 0, 0, .6); }

@media (hover: none) { .gallery .arrow { opacity: .85; } }

/* Card com gradiente */
.row-card {
  width: 100%;
  max-width: 90%;
  margin: 1vw auto -5vw 0;
  padding: 100px 100px 100px 10vw;
  background-color: #fff;
  background-image: linear-gradient(210deg, #00b0db 0%, #1a448b 100%);
  border-radius: 0 20px 120px 0;
  overflow: hidden;
  box-shadow: inset 0 3px 0 0 rgba(255, 255, 255, .21);
}
.text-card h2 {
  font-family: var(--font-rubik);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 44px;
  letter-spacing: 1px;
  line-height: 1.3em;
}

/* --------------------------------------------------------------------------
   Seções 2 e 5 · fundo roxo com detalhe no canto
   -------------------------------------------------------------------------- */
.s2, .s5 {
  background-color: var(--purple);
  background-image: url("../img/podcast-03.webp");
  background-size: contain;
  background-position: left top;
}

.text-h-lato { font-family: var(--font-open); font-size: 14px; line-height: 1.7em; }
.text-h-lato h2 {
  font-family: var(--font-lato);
  font-weight: 700;
  font-size: 52px;
  line-height: 1.2em;
  text-align: center;
}

.text-lg { font-family: var(--font-open); font-size: 23px; line-height: 2em; width: 100%; }

/* --------------------------------------------------------------------------
   Seção 3 · Nutris que confiaram
   -------------------------------------------------------------------------- */
.s3 { background-image: none; }
.text-nutris h2, .text-serv h2 {
  font-family: var(--font-rubik);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 44px;
  letter-spacing: 1px;
  line-height: 1.3em;
  text-align: center;
}
.text-nutris-p p { text-align: left; }

/* --------------------------------------------------------------------------
   Seção 4 · Serviços
   -------------------------------------------------------------------------- */
.s4 {
  background-image: url("../img/gaming-02.webp");
  background-position: center top;
  padding-top: 5px;
}
.text-serv {
  max-width: 700px;
  margin-left: auto !important;
  margin-right: auto !important;
  color: var(--muted);
  text-align: center;
}

.card {
  background-image: url("../img/gaming-01.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 100px 30px 0;
}
.blurb {
  font-family: var(--font-lato);
  color: var(--muted);
  line-height: 1.9em;
  text-align: center;
}
.blurb-content { max-width: 550px; margin: 0 auto; position: relative; width: 100%; word-wrap: break-word; }
.blurb .icon { display: inline-block; margin-bottom: 30px; line-height: 0; max-width: 100%; }
.blurb h4 {
  font-family: var(--font-rubik);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6em;
  color: #fff;
  padding-bottom: 10px;
}
.blurb .desc p { font-size: 14px; line-height: 1.9em; }
.blurb .desc p:last-of-type { padding-bottom: 0; }

/* --------------------------------------------------------------------------
   Seção 5 · Sobre mim
   -------------------------------------------------------------------------- */
.text-sobre { font-family: var(--font-open); font-size: 14px; line-height: 1.7em; }
.text-sobre h2 {
  font-family: var(--font-lato);
  font-weight: 700;
  font-size: 52px;
  line-height: 1.2em;
  text-align: left;
}
.text-sobre-p { font-family: var(--font-open); font-size: 19px; line-height: 2em; max-width: 600px; margin-bottom: 5.82% !important; }

.team {
  width: 100%;
  max-width: 68%;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
  color: #fff;
  font-family: var(--font-open);
  font-size: 14px;
  line-height: 1.7em;
}
.team .photo {
  max-width: 320px;
  margin: 0 auto 12px;
  border-radius: 100px 50px 50px 100px;
  overflow: hidden;
  line-height: 0;
}
.team .photo img { width: 100%; display: block; }
.team h4 {
  font-family: var(--font-lato);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.8em;
  color: #fff;
  padding-bottom: 10px;
}
.team .position { color: #aaa; padding-bottom: 0; }
.team .social { list-style: none; margin: 20px 0 9px; padding: 0; }
.team .social li { display: inline-block; margin-right: 15px; }
.team .social li:last-child { margin-right: 0; }
.team .social a { display: inline-block; color: #fff; line-height: 0; vertical-align: top; transition: color .3s; }
.team .social a:hover { color: var(--cyan); }
.team .social svg { display: block; width: 32px; height: 32px; }

.follow { list-style: none; margin: 0 0 30px !important; padding: 0 0 23px 14px; text-align: center; }
.follow li { display: inline-block; margin-bottom: 8px; position: relative; }
.follow a { display: inline-block; text-decoration: none; text-align: center; position: relative; vertical-align: middle; }
.follow a.icon {
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-right: 8px;
  border-radius: 3px;
  background-color: #ea2c59;
  color: #fff;
  transition: color .3s;
}
.follow a.icon svg { vertical-align: middle; }
.follow a.icon:hover { color: rgba(255, 255, 255, .7); }
.follow a.follow_button {
  padding: 0 12px;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6em;
  border-radius: 3px;
  color: #fff;
  background-color: #0c71c3;
  text-shadow: 0 .1em .1em rgba(0, 0, 0, .4);
  transition: all .3s;
}
.follow a.follow_button:hover { background-color: #0a5fa5; }

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(0, 0, 0, .85);
  cursor: zoom-out;
}
.lb.open { display: flex; }
.lb-fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.lb img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
  border-radius: 4px;
  animation: fadeIn .25s ease;
  cursor: default;
}
.lb-cap { margin-top: 12px; color: #fff; font: 14px/1.4 var(--font-open); text-align: center; opacity: .9; }
.lb-close {
  position: absolute;
  top: 12px;
  right: 16px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
}
.lb-close:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Tablet (≤ 980px) — colunas empilham
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 980px) {
  .section { padding: 50px 0; }
  .s1, .s4 { padding-top: 5px; }
  .row { padding: 30px 0; display: block; }
  .col, .col-4_4, .col-1_2, .col-1_3, .col-3_5 { width: 100% !important; margin-bottom: 30px; }
  .col:last-child { margin-bottom: 0; }
  .col > .mod { margin-bottom: 30px; }
  .col > .mod:last-child { margin-bottom: 0; }

  .text-hero-title h1, .text-metodo h2, .text-resultados h2, .text-card h2 { font-size: 34px; }
  .spacer-hero { height: 523px; }

  .text-sobre-p { margin-bottom: 30px !important; }
  .team { max-width: 100%; }
  .team .photo { margin: 0 30px 12px 0; }

  .video-mod { margin-top: -55px !important; }
  .row-card { padding: 100px 10vw; margin: 1vw auto -5vw; }


  .text-nutris h2, .text-serv h2 { font-size: 34px; }

  .team h4 { font-size: 16px; }
  .team .social svg { width: 26px; height: 26px; }
}

/* --------------------------------------------------------------------------
   Celular (≤ 767px)
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .hero .row-hero { margin-top: -45px !important; margin-bottom: -10px !important; }
  .divider-hero { margin-top: -31px !important; }
  .text-hero-title h1 { font-size: 21px; }
  .text-hero-lead { font-size: 18px; line-height: 1em; }
  .col-photo { padding-top: 15px; }
  .spacer-hero { height: 381px; }

  .s1 { margin-top: -98px; }
  .text-metodo h2 { font-size: 26px; }
  .divider-orange { margin-top: -34px !important; max-width: 150px; }
  .text-resultados h2, .text-card h2 { font-size: 24px; }
  .row-videos { width: 100%; }
  .video-first { margin-top: -109px !important; margin-right: -15px !important; margin-left: -15px !important; }
  .video-mod:not(.video-first) { margin-top: -12px !important; margin-right: -15px !important; margin-left: -15px !important; }
  .row-card { padding: 60px 2vw 100px; margin: 1vw auto -5vw; }
  .btn-cta-lg { font-size: 8px !important; }

  .text-h-lato h2 { font-size: 30px; }
  .text-lg, .text-sobre-p { font-size: 15px; }
  .img-dados { margin-top: -40px !important; }

  .text-nutris h2, .text-serv h2 { font-size: 24px; }
  .img-w61 { width: 100%; }

  .btn-wrap { margin: 23px 0 !important; }
  .card .btn-wrap { margin: 0 !important; }

  .text-sobre h2 { font-size: 36px; }
  .row-sobre { margin-top: -40px !important; }
  .team { max-width: 100%; }
  .team .photo { margin: 0 auto 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gallery .slide.active, .lb img { animation: none; }
  .btn, .gallery .arrow, .gallery .dots button { transition: none; }
}