/* =========================================================================
   Pós Flex — base (tokens, reset, utilitários).
   GERADO por scripts/pos_flex/build.py — não editar o css/styles.css das pastas.
   Ordem do styles.css: este arquivo + :root { meta.css_vars do curso } + css/<layout>/NN-*.css.
   DESKTOP PRIMEIRO: regra base = desktop; mobile em @media (max-width: 800px).
   Fontes: Kanit e Open Sans vêm do <link> .../_shared/gfonts/css/a9ddc0570181.css no <head>
   (byte-idêntico); por isso não há @import aqui.
   ========================================================================= */

/* Kanit 500/600: só a tabela do comparativo usa; o <link> de fontes do <head> traz apenas 400/700 */
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(https://minio.uniscale.tec.br/lp-assets/_shared/gfonts/kanit-v17-nKKU-Go6G5tXcr5mOBWnVaE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(https://minio.uniscale.tec.br/lp-assets/_shared/gfonts/kanit-v17-nKKU-Go6G5tXcr5KPxWnVaE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* neutros */
  --color-white: #fff;
  --color-black: #000;
  --color-text: rgb(0, 0, 0);
  --color-footer-background: rgb(28, 28, 28);       /* fundo do rodapé */
  --color-link: rgb(81, 142, 255);       /* link "Política de privacidade:" */
  --color-faq-question: rgb(64, 84, 95);        /* pergunta do FAQ fechada */
  --color-table-gray: rgb(136, 136, 136); /* coluna Uniguaçu da tabela (ajustar na Task 6, se preciso) */

  /* fontes */
  --font-family-base: Kanit, sans-serif;
  --font-family-alt: "Open Sans", sans-serif; /* FAQ e link da política */

  /* layout */
  --container-max-width: 960px;
  --container-gutter: 16px;

  /* cor do curso: valores reais vêm de meta.css_vars (bloco :root logo abaixo deste arquivo).
     Os fallbacks abaixo são os de Fitoterapia, só para o CSS não quebrar sem css_vars. */
  --color-course: rgb(202, 0, 234);
  --color-highlight: rgb(202, 0, 234);
  --color-accent: rgb(0, 137, 96);
  --color-panel: rgb(54, 107, 91);
  --color-tag: rgb(54, 107, 91);
  --color-border: rgb(54, 107, 91);
  --color-gradient-start: rgb(54, 107, 91);
  --color-gradient-end: rgb(202, 0, 234);
  --hero-badge-font-weight: 400;
  --inscreva-title-font-size: 48px;
  --obrigada-text-font-size: 43px;
  --carousel-arrow-prev-image: none;
  --carousel-arrow-next-image: none;
}

/* gradientes derivados (var() resolve no elemento, então pegam o css_vars do curso) */
:root {
  --gradient-course: linear-gradient(to left, var(--color-gradient-start), var(--color-gradient-end));     /* horizontal, como no GP */
  --gradient-course-vertical: linear-gradient(to bottom, var(--color-gradient-end), var(--color-gradient-start)); /* vertical: cabeçalho da tabela */
}

/* reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-family-base); color: var(--color-text); background: var(--color-white); line-height: 1.2; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }
a { color: inherit; }
strong, b { font-weight: 700; }

/* container: 960px centrado, fluido abaixo disso */
.container { width: 100%; max-width: var(--container-max-width); margin-inline: auto; padding-inline: var(--container-gutter); }

/* destaque de cor no texto (campos *_html): <span class="hl"> */
.hl { color: var(--color-highlight); }

/* texto com gradiente do curso (títulos de docentes, valor/preço) */
.grad-text {
  background: var(--gradient-course);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* CTA interno: <a class="cta <secao>__cta" href="#inscreva-se">. Tamanho/fonte ficam na seção. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-family-base);
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
  /* gradiente verde em CSS (substitui a antiga imagem cta-bg.webp, igual nos 3 cursos); raio igual em todos os CTAs */
  background: linear-gradient(to bottom, rgb(0, 178, 2), rgb(0, 116, 1));
  border-radius: 20px;
  cursor: pointer;
}

/* setas dos carrosséis (botões; imagem por curso via --carousel-arrow-prev-image/--carousel-arrow-next-image) */
.carousel { position: relative; }
.carousel__prev,
.carousel__next {
  width: 60px;
  height: 90px;
  background: center / contain no-repeat;
  flex: none;
}
.carousel__prev { background-image: var(--carousel-arrow-prev-image); }
.carousel__next { background-image: var(--carousel-arrow-next-image); }

/* slides inativos esmaecidos e levemente menores; o ativo volta a 100% com transição */
.carousel .swiper-slide {
  opacity: .5;
  scale: .9; /* propriedade individual: o Swiper define transform no slide (backface-hidden) e ele venceria */
  /* --carousel-transition-duration = "speed" do Swiper daquele carrossel (definido pelo js/main.js) */
  transition: opacity var(--carousel-transition-duration, .3s) ease, scale var(--carousel-transition-duration, .3s) ease;
}
.carousel .swiper-slide-active { opacity: 1; scale: none; }
@media (prefers-reduced-motion: reduce) { .carousel .swiper-slide { transition: none; } }

/* só para leitores de tela */
.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;
}

@media (max-width: 800px) {
  .cta { border-radius: 10px; }
}

:root {
  --color-course: rgb(0, 79, 235);
  --color-highlight: rgb(0, 235, 163);
  --color-accent: rgb(0, 79, 235);
  --color-panel: rgb(0, 79, 235);
  --color-tag: rgb(32, 196, 147);
  --color-border: rgb(0, 235, 163);
  --color-gradient-start: rgb(0, 79, 235);
  --color-gradient-end: rgb(32, 196, 147);
  --hero-badge-font-weight: 400;
  --inscreva-title-font-size: clamp(26px, 1.77vw, 34px);
  --obrigada-text-font-size: 32px;
  --carousel-arrow-prev-image: url("../assets/seta-anterior.webp");
  --carousel-arrow-next-image: url("../assets/seta-proxima.webp");
  --hero-background-image: url("../assets/hero-bg.webp");
  --hero-background-image-mobile: url("../assets/hero-bg-m.webp");
  --inscreva-background-image: url("../assets/inscreva-bg.webp");
  --inscreva-background-image-mobile: url("../assets/inscreva-bg.webp");
  --dores-background-image: url("../assets/dores-bg.webp");
  --dores-background-image-mobile: url("../assets/dores-bg-m.webp");
  --comparativo-background-image: url("../assets/comparativo-bg.webp");
  --comparativo-background-image-mobile: url("../assets/comparativo-bg-m.webp");
  --jornada-arrows-image: url("../assets/jornada-bg.webp");
  --jornada-arrows-image-mobile: url("../assets/jornada-bg-m.webp");
  --jornada-leaves-image: none;
  --aprender-background-image: url("../assets/aprender-bg.webp");
  --aprender-background-image-mobile: url("../assets/aprender-bg-m.webp");
  --docentes-frame-image: url("../assets/docentes-painel.webp");
  --docentes-frame-image-mobile: url("../assets/docentes-painel-m.webp");
  --custo-background-image: url("../assets/custo-bg.webp");
  --custo-background-image-mobile: url("../assets/custo-bg-m.webp");
  --custo-check-icon: url("../assets/custo-check.webp");
  --custo-check-icon-mobile: url("../assets/custo-check-m.webp");
  --valor-frame-image: url("../assets/valor-frame.webp");
  --valor-frame-image-mobile: url("../assets/valor-frame-m.webp");
  --faq-background-image: url("../assets/faq-bg.webp");
  --obrigada-background-image: url("../assets/obrigada-bg.webp");
  --obrigada-social-background-image: none;
  --comparativo-table-scale-desktop: .94;
  --comparativo-table-scale-mobile: 1;
  --comparativo-min-height: 2442px;
  --comparativo-box-width-mobile: 358px;
  --comparativo-card-width-mobile: 360px;
  --jornada-background-color-mobile: #fff;
  --aprender-background-position: 49.1133% 100%;
  --aprender-group1-margin-top: 89.75px;
  --aprender-carousel1-margin-top: 42.5px;
  --aprender-group2-margin-top: 69.7px;
  --aprender-carousel2-margin-top: 38.8px;
  --aprender-cta-margin-top: 121.15px;
  --aprender-padding-bottom: 92.2px;
  --aprender-padding-top-mobile: 46px;
  --aprender-subtitle-margin-top-mobile: 8.3px;
  --aprender-group1-margin-top-mobile: 43.9px;
  --aprender-carousel1-margin-top-mobile: 12.8px;
  --aprender-carousel-width-mobile: 265.5px;
  --aprender-group2-margin-top-mobile: 44.8px;
  --aprender-carousel2-margin-top-mobile: 14px;
  --aprender-cta-margin-top-mobile: 83.3px;
  --aprender-padding-bottom-mobile: 71.6px;
  --aprender-arrow-offset-mobile: -34px;
  --docentes-frame-margin-left: -1.3;
  --docentes-title-margin-left: 299.5;
  --docentes-title-padding-top: 35.5;
  --docentes-subtitle-margin-top: -1;
  --docentes-subtitle-margin-left: 174.56;
  --docentes-panel-margin-top: 43.7;
  --docentes-panel-padding-top: 0;
  --docentes-carousel-margin-left: 108.45;
  --aprender-carousel-offset-x-mobile: 1px;
  --docentes-title-width-mobile: 324.5px;
  --docentes-title-margin-left-mobile: 17.75px;
  --docentes-title-padding-top-mobile: 20.3px;
  --docentes-title-font-size-mobile: 24px;
  --docentes-title-line-height-mobile: 24px;
  --docentes-subtitle-width-mobile: 339px;
  --docentes-subtitle-margin-left-mobile: 10.5px;
  --docentes-subtitle-font-size-mobile: 17px;
  --docentes-subtitle-line-height-mobile: 17px;
  --docentes-frame-image-override-mobile: none;
  --docentes-frame-fill-color-mobile: transparent;
  --docentes-frame-outline-display-mobile: block;
  --docentes-frame-outline-border-mobile: 2px solid rgba(32, 196, 147, 0.42);
  --docentes-frame-outline-radius-mobile: 10px;
  --docentes-panel-margin-top-mobile: 59px;
  --docentes-panel-width-mobile: 336px;
  --docentes-panel-margin-left-mobile: 12px;
  --docentes-panel-padding-y-mobile: 15px;
  --docentes-carousel-width-mobile: 300px;
  --docentes-carousel-margin-left-mobile: 18px;
  --docentes-arrow-offset-mobile: 8px;
  --docentes-cta-margin-top-mobile: 17px;
  --docentes-padding-bottom-mobile: 76.6px;
}

/* Fonte da versão publicada (uniguacu.com.br/pos-flex-*): MADE Outer Sans em quase toda a página.
   Ficam em Kanit só a tabela do comparativo (lá é imagem) e o rodapé — ver --font-family-kanit em 04 e 11.
   Igual à publicada, cada variante é uma família própria com uma face só (peso 400), e o peso
   aplicado em cima é o mesmo da publicada: 600 = negrito sintetizado pelo navegador sobre a face.
     --font-family-light   (Thin e Light da publicada; não temos o arquivo Thin) peso 600, ou 400 em listas/FAQ
     --font-family-regular (títulos e <strong>)                                   peso 600
     --font-family-bold    (CTAs)                                                 peso 500
   Arquivos em <pasta>/assets/fonts/, copiados de scripts/pos_flex/fonts/ pelo build (caminho relativo a <pasta>/css/styles.css). */
@font-face { font-family: 'MADE Outer Sans Light'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/made-outer-sans-light.woff2) format('woff2'); }
@font-face { font-family: 'MADE Outer Sans Regular'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/made-outer-sans-regular.woff2) format('woff2'); }
@font-face { font-family: 'MADE Outer Sans Bold'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/made-outer-sans-bold.woff2) format('woff2'); }

:root {
  --font-family-kanit: Kanit, sans-serif;
  --font-family-light: 'MADE Outer Sans Light', Kanit, sans-serif;
  --font-family-regular: 'MADE Outer Sans Regular', Kanit, sans-serif;
  --font-family-bold: 'MADE Outer Sans Bold', Kanit, sans-serif;
  --font-family-base: var(--font-family-light);
  --cta-font-size: clamp(20px, 1.56vw, 30px); /* fonte dos CTAs no desktop (antes até 34px: textos longos quebravam em 3 linhas) */
}
body { font-weight: 600; }
strong, b, .hl { font-family: var(--font-family-regular); font-weight: 600; }
.cta { font-family: var(--font-family-bold); font-weight: 500; text-wrap: balance; }

/* captura 01-hero — <section id="hero" class="hero hero--<curso>">. Dono: Task 5.
   Seletores sempre começando por .hero. Desktop primeiro; mobile em @media (max-width: 800px).
   Os modificadores .hero--fito/--musc/--nutri só ajustam espaçamentos (o layout original tinha
   posições diferentes por curso). */
.hero {
  --hero-logo-top: 62px;        /* topo do logo */
  --hero-logo-height: 103px;         /* altura do logo */
  --hero-logo-width: 365px;
  --hero-title-margin-top: 71px;       /* selos -> título (inclui o respiro de 12px da 1a linha) */
  --hero-padding-bottom: 227px;          /* CTA -> fim da seção */
  --hero-badge-gap: clamp(12px, 1.04vw, 20px);  /* espaço entre selos (desktop) */
  --hero-badge-font-size: clamp(16px, 0.94vw, 18px); /* selos numa linha só a partir de ~1100px; abaixo quebram */
  position: relative;
  z-index: 1;            /* as folhas do pé (.hero__leaves) avançam sobre o topo da seção seguinte */
  overflow-x: clip;
  background: var(--hero-background-image) 50% 50% / cover no-repeat;
  color: var(--color-white);
}
.hero--musc  { --hero-logo-top: 56px; --hero-logo-height: 140px; --hero-logo-width: 299px; --hero-title-margin-top: 62px; --hero-padding-bottom: 133px; }
.hero--nutri { --hero-logo-top: 45px; --hero-logo-height: 140px; --hero-logo-width: 309px; --hero-title-margin-top: 61px; --hero-padding-bottom: 133px; }

/* folhas no pé (só fito): dois ramos separados dentro de um container centralizado
   com largura = max(1920px, largura da tela). Acima de 1920px os ramos grudam nas bordas
   da tela; abaixo, o container fica em 1920px (ramos fixos, sem colidir nem invadir o texto)
   e o excedente é cortado pelo overflow-x: clip da .hero. No mobile, mesma regra com mínimo de 420px. */
.hero .hero__leaves {
  position: absolute;
  left: 50%;
  bottom: -111px;
  width: max(1920px, 100%);
  height: 227px;
  transform: translateX(-50%);
  pointer-events: none;
}
.hero .hero__leaf {
  position: absolute;
  top: 0;
  width: 427px;
  height: 100%;
  background: var(--hero-leaf-left-image) 0 0 / 100% 100% no-repeat;
}
.hero .hero__leaf--l { left: 0; }
.hero .hero__leaf--r { right: 0; background-image: var(--hero-leaf-right-image); }

.hero .hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1253px; /* mesma largura da barra de selos: título em ~5 linhas no desktop */
  padding-top: var(--hero-logo-top);
  padding-bottom: var(--hero-padding-bottom);
}
.hero .hero__logo {
  width: var(--hero-logo-width);
  height: var(--hero-logo-height);
  object-fit: contain;
  margin-bottom: calc(245px - var(--hero-logo-top) - var(--hero-logo-height));
}

.hero .hero__badges {
  will-change: transform;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: var(--hero-badge-gap);
  width: min(1253px, calc(100vw - 32px));
  padding: 12.2px 30px;
  border: 2px solid var(--color-border);
  border-radius: 30px;
}
.hero .hero__badge {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: var(--hero-badge-font-size);
  line-height: 1;
  font-weight: var(--hero-badge-font-weight);
  white-space: nowrap;
}
.hero .hero__badge > span { margin-left: 8px; }
.hero .hero__badge-icon { width: 32px; height: 28px; flex: none; object-fit: contain; }

.hero .hero__title {
  will-change: transform;
  width: min(1253px, 100%);
  min-height: 240px;
  margin-top: var(--hero-title-margin-top);
  font-size: 48px;
  line-height: 48px;
  font-weight: 600;
  text-align: center;
  font-family: var(--font-family-regular);
}

.hero .hero__cta {
  will-change: transform;
  width: 18.88em;
  max-width: 100%;
  margin-top: calc(155px - var(--hero-title-margin-top));
  padding: 0.59em 1.47em;
  font-size: var(--cta-font-size);
  line-height: 1;
}

@media (max-width: 800px) {
  .hero {
    --hero-logo-top: 18px;
    --hero-logo-height: 59px;
    --hero-logo-width: 210px;
    --hero-logo-offset-x: 2px;
    --hero-badges-offset-x: 0px;
    --hero-logo-margin-bottom: 36px;      /* logo -> selos */
    --hero-badges-width: 360px;
    --hero-badges-row-gap: 11px;     /* espaço entre as 2 linhas de selos */
    --hero-badge-font-size: 11px;
    --hero-title-margin-top: 17.5px;
    --hero-title-width: 362px;
    --hero-title-font-size: clamp(14px, 4.42vw, 19px);
    --hero-cta-margin-top: 27.5px;
    --hero-cta-width: 293px;
    --hero-cta-padding: 15px;
    --hero-cta-offset-x: 0px;
    --hero-padding-bottom: 47px;
  }
  .hero--musc  { --hero-logo-offset-x: -2px; --hero-badges-offset-x: 3px; --hero-logo-width: 126px; --hero-logo-margin-bottom: 20px; --hero-badges-width: 377px; --hero-badges-row-gap: 7.8px; --hero-badge-font-size: 13px; --hero-title-margin-top: 19.5px; --hero-title-width: 350px; --hero-title-font-size: clamp(20px, 6.05vw, 26px); --hero-cta-margin-top: 40.5px; --hero-cta-offset-x: 9px; --hero-padding-bottom: 49.5px; }
  .hero--nutri { --hero-logo-offset-x: 0px; --hero-logo-width: 126px; --hero-logo-margin-bottom: 11px; --hero-badges-row-gap: 3.2px; --hero-title-margin-top: 28.5px; --hero-title-font-size: clamp(20px, 6.05vw, 26px); --hero-cta-margin-top: 41.5px; --hero-padding-bottom: 56.5px; }

  .hero .hero__leaves { bottom: -34px; width: max(420px, 100%); height: 70px; }
  .hero .hero__leaf { width: 116px; background-image: var(--hero-leaf-left-image-mobile); }
  .hero .hero__leaf--r { width: 115px; background-image: var(--hero-leaf-right-image-mobile); }
  .hero {
    background-image: var(--hero-background-image-mobile);
  }
  .hero .hero__logo { margin-bottom: var(--hero-logo-margin-bottom); margin-left: var(--hero-logo-offset-x); }
  .hero .hero__badges {
    justify-content: center;
    align-content: center;
    column-gap: 8px;
    row-gap: var(--hero-badges-row-gap);
    width: min(var(--hero-badges-width), 100%);
    margin-right: var(--hero-badges-offset-x);
    padding: calc((66px - 2 * max(17px, var(--hero-badge-font-size) * 1.4) - var(--hero-badges-row-gap)) / 2) 4px;
    border-width: 1px;
    border-radius: 15px;
  }
  .hero--nutri .hero__badge:nth-child(3) { order: 1; } /* nutri mobile: "100% ONLINE" vai para o fim da 2a linha */
  /* selos sempre em 2 linhas (2 + 3): a 2a linha (os 3 selos menores) cabe na largura interna da barra
     = min(--hero-badges-width, 100vw - 32px) - 10px (padding + borda). O ícone (--hero-badge-icon-size) encolhe primeiro
     com a tela (17px a partir de 390px, 10px em 340px) e a fonte usa o espaço que sobra:
     3 x (ícone + 3px) + 2 gaps de 8px; 25 = largura do texto dos 3 selos por px de fonte. */
  .hero .hero__badges { --hero-badge-icon-size: clamp(10px, 14vw - 37.6px, 17px); }
  .hero .hero__badge { font-size: max(8px, min(var(--hero-badge-font-size), (min(var(--hero-badges-width), 100vw - 32px) - 10px - 3 * (var(--hero-badge-icon-size) + 3px) - 16px) / 25)); }
  .hero .hero__badge > span { margin-left: 3px; }
  .hero .hero__badge-icon { width: var(--hero-badge-icon-size); height: calc(var(--hero-badge-icon-size) * 15 / 17); }
  .hero .hero__title {
    width: min(var(--hero-title-width), 100%);
    min-height: 0;
    font-size: var(--hero-title-font-size);
    line-height: var(--hero-title-font-size);
  }
  .hero .hero__cta {
    width: min(var(--hero-cta-width), 100%);
    margin-top: var(--hero-cta-margin-top);
    padding: var(--hero-cta-padding);
    margin-right: var(--hero-cta-offset-x);
    font-size: 16px;
    line-height: 1;
  }
}

/* captura 02-inscreva-se — <section id="inscreva-se" class="inscreva inscreva--<curso>">. Dono: Task 5.
   Seletores sempre começando por .inscreva. Desktop primeiro; mobile em @media (max-width: 800px).
   Caixa com título + formulário (injetado em #cmp-form-main), altura automática. */
.inscreva {
  --inscreva-box-padding-y: 35px;        /* respiro acima do título e abaixo do formulário (iguais) */
  --inscreva-box-gap: 24px;       /* título -> formulário */
  --inscreva-padding-bottom: 61px;
  --inscreva-title-width: 830px;
  background: var(--inscreva-background-image) 50% 50% / cover no-repeat;
  padding: 31px 0 var(--inscreva-padding-bottom);
}
.inscreva--musc,
.inscreva--nutri { --inscreva-padding-bottom: 30px; }

.inscreva .inscreva__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--inscreva-box-gap);
  width: 919px;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--inscreva-box-padding-y) 45px;
  border: 1px solid var(--color-white);
  border-radius: 20px;
}
.inscreva .inscreva__title {
  will-change: transform;
  width: var(--inscreva-title-width);
  max-width: 100%;
  font-size: var(--inscreva-title-font-size);
  line-height: 1;
  font-weight: 600;
  text-align: center;
  color: var(--color-white);
  font-family: var(--font-family-regular);
}
.inscreva #cmp-form-main { width: 830px; max-width: 100%; }

@media (max-width: 800px) {
  .inscreva {
    --inscreva-box-padding-y: 24px;
    --inscreva-box-gap: 16px;
    --inscreva-padding-bottom: 39.5px;
    --inscreva-title-width: 100%;
    --inscreva-title-font-size-mobile: clamp(14px, 4vw, 16px);
    --inscreva-box-width: 360px;
    padding-top: 37.5px;
    background-image: var(--inscreva-background-image-mobile);
  }
  .inscreva--nutri { padding-top: 36.5px; }

  .inscreva .inscreva__box { width: min(var(--inscreva-box-width), 100%); padding-inline: 10px; border-radius: 15px; }
  .inscreva .inscreva__title { font-size: var(--inscreva-title-font-size-mobile); }
  .inscreva #cmp-form-main { width: 343px; }
}

/* captura 03-dores — <section id="dores" class="dores dores--<curso>">. Dono: Task 5.
   Seletores sempre começando por .dores. Desktop primeiro; mobile em @media (max-width: 800px).
   Os modificadores .dores--fito/--musc/--nutri só ajustam espaçamentos/tamanhos (o layout original
   tinha posições diferentes por curso). */
.dores {
  --dores-padding-top: 122.5px;          /* topo da seção -> título */
  --dores-title-width: 980px;
  --dores-title-margin-bottom: 86.5px;    /* título -> caixa */
  --dores-list-margin-top: 30px;        /* introdução -> lista */
  --dores-outro-margin-top: 92.5px;    /* caixa -> fechamento */
  min-height: 1452px;
  padding-top: var(--dores-padding-top);
  /* --dores-background-offset-y sobe a imagem (ilustrações) sem escalar; a 2ª camada (mesma imagem, sem
     deslocamento) preenche a faixa que sobra embaixo com o próprio degradê do rodapé da imagem */
  background:
    var(--dores-background-image) 50% calc(50% - var(--dores-background-offset-y, 0px)) / cover no-repeat,
    var(--dores-background-image) 50% 50% / cover no-repeat;
  color: var(--color-text);
}
/* fito: flores subiam no texto abaixo da caixa depois que a caixa perdeu a altura fixa */
.dores--fito  { --dores-background-offset-y: 40px; background-color: #f8f8f8; }
.dores--musc  { --dores-padding-top: 87.5px; --dores-title-margin-bottom: 49.5px; --dores-list-margin-top: 46px; --dores-outro-margin-top: 76.5px; }
.dores--nutri { --dores-padding-top: 90.5px; --dores-title-margin-bottom: 45.5px; --dores-list-margin-top: 78px; --dores-outro-margin-top: 77.5px; }

.dores .dores__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1012px;
}

.dores .dores__title,
.dores .dores__outro {
  will-change: transform;
  font-size: 46px;
  line-height: 46px;
  font-weight: 400; /* 400: as partes em <strong> se destacam */
  text-align: center;
}
.dores .dores__title { width: min(var(--dores-title-width), 100%); margin-bottom: var(--dores-title-margin-bottom); font-size: 44px; line-height: 46px; }
.dores .dores__outro { width: min(980px, 100%); margin-top: var(--dores-outro-margin-top); font-size: 42px; line-height: 42px; }

.dores .dores__box {
  width: 890px;
  max-width: 100%;
  padding: 50px;
  border-radius: 20px;
  background: var(--color-panel);
  color: var(--color-white);
}
.dores .dores__intro,
.dores .dores__item { will-change: transform; font-size: 32px; line-height: 32px; }
.dores .dores__intro { font-weight: 600; font-family: var(--font-family-regular); font-size: 27px; line-height: 32px; }

.dores .dores__list { margin-top: var(--dores-list-margin-top); }
.dores .dores__item {
  position: relative;
  min-height: 64px;
  margin-bottom: 29.5px;
  padding-left: 40px;
  font-weight: 400;
  font-size: 25px;
  line-height: normal;
}
.dores .dores__item:last-child { margin-bottom: 0; }
.dores .dores__item::before {
  content: "\2022";
  position: absolute;
  left: 15px;
  top: 0;
  font-size: 32px;
  line-height: 32px;
}

.dores .dores__cta {
  will-change: transform;
  width: 24em; /* nutri: 2 linhas */
  max-width: 100%;
  margin-top: 92.5px;
  padding: 0.59em 1.47em;
  font-size: var(--cta-font-size);
  line-height: 1;
}

@media (max-width: 800px) {
  .dores {
    --dores-padding-top: 14.5px;
    --dores-title-width: 350px;
    --dores-title-font-size: min(17px, 4.45vw);
    --dores-title-margin-bottom: 9px;
    --dores-box-width: 360px;
    --dores-intro-font-size: 16px;
    --dores-intro-line-height: 18px;
    --dores-item-font-size: 14px;
    --dores-item-line-height: normal;
    --dores-item-margin-bottom: 6.5px;
    --dores-item-padding-left: 12px;
    --dores-bullet-left: -1px;
    --dores-list-margin-top: 11.75px;
    --dores-outro-margin-top: 24.5px;
    --dores-outro-width: 354px;
    --dores-outro-font-size: 14px;
    --dores-cta-margin-top: 19.5px;
    --dores-cta-width: 333px;
    --dores-cta-padding: 15px;
    --dores-list-padding-right: 13px;
    --dores-intro-margin-right: 0px;
    background-image: var(--dores-background-image-mobile);
    --dores-background-offset-y: 0px;
    --dores-padding-bottom: 25px;
    min-height: 0;
    padding-bottom: var(--dores-padding-bottom);
  }
  .dores--musc {
    --dores-padding-top: 25.25px; --dores-title-width: 300px; --dores-title-font-size: 25px; --dores-title-margin-bottom: 15.75px; --dores-box-width: 320px;
    --dores-intro-line-height: 17px; --dores-item-font-size: 14px; --dores-item-line-height: 16px; --dores-item-margin-bottom: 8px;
    --dores-item-padding-left: 23px; --dores-bullet-left: 11px; --dores-list-margin-top: 14px; --dores-outro-margin-top: 25.5px;
    --dores-outro-width: 345px; --dores-intro-margin-right: 11px; --dores-list-padding-right: 0px; --dores-cta-margin-top: 14.5px; --dores-padding-bottom: 33px;
  }
  .dores--nutri {
    --dores-padding-top: 19.75px; --dores-title-width: 340px; --dores-title-font-size: 19px; --dores-title-margin-bottom: 16.25px; --dores-box-width: 360px;
    --dores-item-font-size: 16px; --dores-item-line-height: 16px; --dores-item-margin-bottom: 11px; --dores-item-padding-left: 15px;
    --dores-bullet-left: -3px; --dores-list-margin-top: 28px; --dores-outro-margin-top: 15.75px; --dores-outro-width: 357px;
    --dores-outro-font-size: 19px; --dores-list-padding-right: 0px; --dores-cta-margin-top: 16.25px; --dores-padding-bottom: 19px;
  }

  /* posições manuais do original (itens não tinham espaçamento uniforme) */
  .dores--nutri .dores__item:nth-child(1) { margin-bottom: 14px; translate: 1px 0; }
  .dores--nutri .dores__item:nth-child(4) { translate: 1px 0; }
  .dores--nutri .dores__item:nth-child(2),
  .dores--nutri .dores__item:nth-child(3) { margin-bottom: 10px; }
  .dores--musc .dores__item:nth-child(1) { margin-bottom: 16px; }
  .dores--fito .dores__item:nth-child(1) { margin-bottom: 6px; }
  .dores--fito .dores__item:nth-child(2) { margin-bottom: 8px; translate: 1px 0; }
  .dores--fito .dores__item:nth-child(3) { margin-bottom: 10px; }
  .dores--fito .dores__item:nth-child(4) { translate: 1px 0; }

  .dores--nutri .dores__cta { margin-right: 2px; }
  .dores .dores__title { font-size: var(--dores-title-font-size); line-height: var(--dores-title-font-size); }
  .dores .dores__box {
    width: min(var(--dores-box-width), 100%);
    padding: 20px;
    border-radius: 20px;
  }
  .dores .dores__intro { margin-right: var(--dores-intro-margin-right); font-size: var(--dores-intro-font-size); line-height: var(--dores-intro-line-height); }
  .dores .dores__list { padding-right: var(--dores-list-padding-right); }
  .dores .dores__item {
    min-height: 0;
    margin-bottom: var(--dores-item-margin-bottom);
    padding-left: var(--dores-item-padding-left);
    font-size: var(--dores-item-font-size);
    line-height: var(--dores-item-line-height);
  }
  .dores .dores__item::before { left: var(--dores-bullet-left); font-size: 12px; line-height: var(--dores-item-line-height); }
  .dores .dores__outro { width: min(var(--dores-outro-width), 100%); font-size: var(--dores-outro-font-size); line-height: var(--dores-outro-font-size); }
  .dores .dores__cta {
    width: min(var(--dores-cta-width), 100%);
    margin-top: var(--dores-cta-margin-top);
    padding: var(--dores-cta-padding);
    font-size: 16px;
    line-height: 1;
  }
}

/* captura 04-comparativo — <section id="comparativo" class="comparativo">. Dono: Task 6.
   Seletores sempre começando por .comparativo. Desktop primeiro; mobile em @media (max-width: 800px). */
.comparativo {
  --comparativo-table-scale: var(--comparativo-table-scale-desktop, 1);
  --comparativo-table-width-scale: 1.12;          /* largura da tabela um pouco maior no desktop (só nas regras desktop) */
  --comparativo-table-font-scale: 1.15;          /* fonte da tabela um pouco maior no desktop (no mobile volta a 1) */
  min-height: var(--comparativo-min-height, 2535px);
  background: var(--comparativo-background-image) center / cover no-repeat;
  color: var(--color-white);
  padding: 127px 0 105px;
}
.comparativo .comparativo__inner { display: flex; flex-direction: column; align-items: center; max-width: 1240px; }
.comparativo .comparativo__title {
  font-size: 44px; line-height: 1; font-weight: 400; text-align: center; /* 400: as partes em <strong> se destacam */
  max-width: 1000px;
}
.comparativo .comparativo__title strong { font-weight: 700; }
.comparativo .comparativo__box {
  width: 1074px; max-width: 100%;
  margin-top: 64px;
  padding: 37px 51px 43px;
  /* degradê que reproduz a antiga imagem da caixa (mesma nos 3 cursos): cinza translúcido, mais escuro no centro */
  background: linear-gradient(to right, rgba(66, 66, 66, .58), rgba(2, 2, 2, .69) 50%, rgba(99, 99, 99, .58));
  border: 1px solid var(--color-white);
  border-radius: 20px;
}
.comparativo .comparativo__text { font-size: 37px; line-height: 38px; font-weight: 400; } /* 400: as partes em <strong> se destacam */
.comparativo .comparativo__note { margin-top: 31px; font-size: 18px; line-height: 38px; font-weight: 600; }
.comparativo .comparativo__card {
  width: 1177px; max-width: 100%;
  margin-top: 65px;
  padding: 43px 0;
  display: flex; flex-direction: column; align-items: center;
  background: var(--color-white);
  border-radius: 40px;
  color: #000;
}
.comparativo .compare__title {
  font-size: 43px; line-height: 1; font-weight: 600; text-align: center;
  font-family: var(--font-family-regular);
}
.comparativo .compare__title::after {
  content: ""; display: block; width: 540px; max-width: 100%; height: 2px;
  margin: 16px auto 0; background: var(--color-accent); /* fito: verde, como a linha da jornada; musc/nutri: cor do curso */
}
.comparativo .compare {
  font-family: var(--font-family-kanit); /* tabela segue em Kanit (na versão publicada ela é imagem) */
  width: calc(642px * var(--comparativo-table-scale) * var(--comparativo-table-width-scale)); max-width: 100%;
  margin-top: 30px;
  table-layout: fixed;
  border-collapse: separate; border-spacing: 0;
  /* linha de baixo da tabela inteira: pintada no fundo da tabela, fica atrás das células,
     então a coluna Uniguaçu (fundo + borda roxa arredondada) passa por cima dela, sem vão no canto */
  --comparativo-table-line-width: 2px;
  background: linear-gradient(#242424, #242424) left bottom / 100% var(--comparativo-table-line-width) no-repeat;
  /* mesmo raio do canto inferior da coluna Uniguaçu: recorta a linha para não vazar sob a curva */
  border-bottom-right-radius: calc(14px * var(--comparativo-table-scale));
}
.comparativo .compare__corner { width: calc(203px * var(--comparativo-table-scale) * var(--comparativo-table-width-scale)); }
.comparativo .compare thead th { width: calc(215px * var(--comparativo-table-scale) * var(--comparativo-table-width-scale)); }
.comparativo .compare thead th + th { width: calc(224px * var(--comparativo-table-scale) * var(--comparativo-table-width-scale)); }
.comparativo .compare__head {
  position: relative; isolation: isolate;
  height: calc(163px * var(--comparativo-table-scale)); padding: 0 0 calc(27px * var(--comparativo-table-scale));
  vertical-align: middle; text-align: center;
  font-size: calc(20px * var(--comparativo-table-scale) * var(--comparativo-table-font-scale)); line-height: 1.1; font-weight: 700; color: var(--color-white);
}
.comparativo .compare__head strong { font-weight: 700; }
.comparativo .compare__head::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0 calc(16px * var(--comparativo-table-scale)) calc(27px * var(--comparativo-table-scale));
  border-radius: calc(20px * var(--comparativo-table-scale));
}
.comparativo .compare__head--outras::before { background: #242424; }
.comparativo .compare__head--uniguacu { font-weight: 400; }
.comparativo .compare__head--uniguacu::before { background: var(--gradient-course-vertical); inset: 0 calc(20px * var(--comparativo-table-scale)) calc(27px * var(--comparativo-table-scale)); }
.comparativo .compare tbody tr:nth-child(1) > * { height: calc(119px * var(--comparativo-table-scale)); }
.comparativo .compare tbody tr:nth-child(2) > * { height: calc(199px * var(--comparativo-table-scale)); }
.comparativo .compare tbody tr:nth-child(3) > * { height: calc(186px * var(--comparativo-table-scale)); }
.comparativo .compare tbody tr:nth-child(4) > * { height: calc(271px * var(--comparativo-table-scale)); }
.comparativo .compare tbody tr:nth-child(5) > * { height: calc(270px * var(--comparativo-table-scale)); }
.comparativo .compare tbody tr:nth-child(6) > * { height: calc(201px * var(--comparativo-table-scale)); }
.comparativo .compare tbody th,
.comparativo .compare tbody td {
  box-sizing: border-box;
  vertical-align: middle;
  border-bottom: 2px solid #242424;
  font-size: calc(19px * var(--comparativo-table-scale) * var(--comparativo-table-font-scale)); line-height: 1.2; font-weight: 500;
  text-align: center;
  padding: 0 8px;
}
.comparativo .compare tbody .compare__criterio { text-align: left; font-size: calc(21.5px * var(--comparativo-table-scale) * var(--comparativo-table-font-scale)); font-weight: 600; line-height: 1; padding: 0 calc(40px * var(--comparativo-table-scale)) 0 0; }
.comparativo .compare tbody .compare__outras { border-left: 2px solid #cbcbcb; color: #111; padding: 0 calc(26px * var(--comparativo-table-scale)); font-weight: 400; } /* mesmo respiro da coluna Uniguaçu: com a fonte maior, 44px estreitava demais o texto */
.comparativo .compare tbody .compare__uniguacu {
  padding: 0 calc(26px * var(--comparativo-table-scale));
  background: var(--color-table-gray);
  color: var(--color-white);
  border-left: 2px solid var(--color-course);
  border-right: 2px solid var(--color-course);
  font-weight: 400;
}
.comparativo .compare tbody tr:first-child .compare__uniguacu { border-top: 2px solid var(--color-course); border-radius: calc(14px * var(--comparativo-table-scale)) calc(14px * var(--comparativo-table-scale)) 0 0; }
.comparativo .compare tbody tr:last-child > * { border-bottom: 0; }
.comparativo .compare tbody tr:last-child .compare__uniguacu { border-bottom: 2px solid var(--color-course); border-radius: 0 0 calc(14px * var(--comparativo-table-scale)) calc(14px * var(--comparativo-table-scale)); }
.comparativo .comparativo__cta {
  width: 24em; max-width: 100%; /* textos longos (fito/nutri): largura para caber em 2 linhas */
  margin-top: 33px; padding: 0.59em 1.47em;
  font-size: var(--cta-font-size);
  line-height: 1;
}

@media (max-width: 800px) {
  .comparativo { --comparativo-table-font-scale: 1; --comparativo-cta-height: 67px; --comparativo-cta-gap: 24px; --comparativo-table-margin-bottom: 48px; --comparativo-table-scale: var(--comparativo-table-scale-mobile, 1); min-height: 0; padding: 9px 0 24px; background-image: var(--comparativo-background-image-mobile, var(--comparativo-background-image)); } /* altura pelo conteúdo: a tabela encolheu */
  .comparativo .comparativo__inner { max-width: 100%; padding-inline: 0; }
  /* texto do título com a mesma largura da caixa logo abaixo (+ 20px de padding de cada lado) */
  .comparativo .comparativo__title { font-size: clamp(15px, 4.1vw, 17px); line-height: 1; max-width: min(100%, var(--comparativo-box-width-mobile, 358px) + 24px); padding-inline: 12px; }
  .comparativo .comparativo__box { width: var(--comparativo-box-width-mobile, 358px); margin-top: 11px; padding: 11px 10px; border-radius: 12px; }
  .comparativo .comparativo__text { font-size: 16px; line-height: 18px; }
  .comparativo .comparativo__note { margin-top: 0; font-size: 14px; line-height: 16px; }
  .comparativo .comparativo__card { width: var(--comparativo-card-width-mobile, 360px); margin-top: 21px; margin-bottom: calc(var(--comparativo-cta-height) + var(--comparativo-cta-gap)); padding: 16px 0 0; border-radius: 25px; }
  .comparativo .compare__title { font-size: 14px; }
  .comparativo .compare__title::after { width: calc(250px * var(--comparativo-table-scale)); margin-top: 16px; }
  .comparativo .compare { --comparativo-table-line-width: 1px; border-bottom-right-radius: 8px; width: calc(333px * var(--comparativo-table-scale)); margin-top: 25px; margin-bottom: calc(var(--comparativo-table-margin-bottom) + var(--comparativo-cta-gap)); }
  .comparativo .compare__corner { width: calc(105px * var(--comparativo-table-scale)); }
  .comparativo .compare thead th { width: calc(112px * var(--comparativo-table-scale)); }
  .comparativo .compare thead th + th { width: calc(116px * var(--comparativo-table-scale)); }
  .comparativo .compare__head { height: calc(84px * var(--comparativo-table-scale)); padding-bottom: calc(12px * var(--comparativo-table-scale)); font-size: calc(12px * var(--comparativo-table-scale)); line-height: 1.15; font-weight: 500; }
  .comparativo .compare__head::before { inset: 0 8px calc(12px * var(--comparativo-table-scale)); border-radius: calc(10px * var(--comparativo-table-scale)); }
  .comparativo .compare__head--uniguacu::before { inset: 0 calc(11px * var(--comparativo-table-scale)) calc(12px * var(--comparativo-table-scale)); }
  /* linhas com altura pelo conteúdo (antes: alturas fixas do layout, com muito espaço vazio);
     --comparativo-cell-padding-y dá o respiro vertical e a altura abaixo é só o mínimo */
  .comparativo .compare { --comparativo-cell-padding-y: 12px; }
  .comparativo .compare tbody tr:nth-child(n) > * { height: calc(56px * var(--comparativo-table-scale)); } /* :nth-child(n) iguala a especificidade das alturas do desktop */
  .comparativo .compare tbody th,
  .comparativo .compare tbody td { font-size: calc(12.5px * var(--comparativo-table-scale)); line-height: 1.15; padding: var(--comparativo-cell-padding-y) 4px; border-bottom-width: 1px; }
  .comparativo .compare tbody .compare__criterio { font-size: calc(12.5px * var(--comparativo-table-scale)); font-weight: 600; padding: var(--comparativo-cell-padding-y) 4px var(--comparativo-cell-padding-y) 0; }
  .comparativo .compare tbody .compare__outras { border-left-width: 1px; padding: var(--comparativo-cell-padding-y) calc(6px * var(--comparativo-table-scale)); }
  .comparativo .compare tbody .compare__uniguacu { border-left-width: 1px; border-right-width: 1px; padding: var(--comparativo-cell-padding-y) calc(5px * var(--comparativo-table-scale)); }
  .comparativo .compare tbody tr:first-child .compare__uniguacu { border-top-width: 1px; border-radius: 8px 8px 0 0; }
  .comparativo .compare tbody tr:last-child .compare__uniguacu { border-bottom-width: 1px; border-radius: 0 0 8px 8px; }
  .comparativo .comparativo__cta { width: 340px; min-height: var(--comparativo-cta-height); margin-top: 0; margin-bottom: calc(-1 * (var(--comparativo-cta-height) + var(--comparativo-cta-gap))); font-size: 15px; line-height: 1; padding: 10px; }

  /* musc (mobile): caixa e texto menores, tabela mais perto do topo, CTA fora do cartão mais abaixo */
  .comparativo--musc { --comparativo-cta-height: 71px; --comparativo-cta-gap: 27px; --comparativo-table-margin-bottom: 102px; }
  .comparativo--musc .comparativo__box { margin-top: 2px; padding: 9px 10px; }
  .comparativo--musc .comparativo__text { font-size: 13px; line-height: 15px; }
  .comparativo--musc .comparativo__note { margin-top: 5px; font-size: 12px; line-height: 16px; }
  .comparativo--musc .comparativo__card { margin-top: 23px; padding-top: 11px; }
  .comparativo--musc .compare__title::after { width: 210px; margin-top: 7px; }
  .comparativo--musc .compare { margin-top: 25px; }

  /* nutri (mobile): título/caixa mais espaçados, nota maior */
  .comparativo--nutri { --comparativo-cta-height: 78px; --comparativo-cta-gap: 18px; --comparativo-table-margin-bottom: 54px; padding-top: 40px; }
  .comparativo--nutri .comparativo__box { margin-top: 35px; padding: 17px 10px; }
  .comparativo--nutri .comparativo__text { font-size: 18px; }
  .comparativo--nutri .comparativo__note { margin-top: 9px; font-size: 15px; line-height: 19.5px; }
  .comparativo--nutri .comparativo__card { margin-top: 17px; padding-top: 22px; }
}

/* telas estreitas (até 430px): caixa, cartão e CTA ganham respiro lateral; a tabela passa a caber
   no cartão (colunas em % na mesma proporção 105/112/116 do layout mobile; as alturas das linhas
   continuam como mínimo e crescem se o texto quebrar mais). Sem efeito enquanto houver espaço. */
@media (max-width: 430px) {
  .comparativo .comparativo__box,
  .comparativo .comparativo__card { max-width: calc(100% - 16px); }
  .comparativo .compare { width: min(calc(333px * var(--comparativo-table-scale)), calc(100% - 12px)); }
  .comparativo .compare__corner { width: 31.5%; }
  .comparativo .compare thead th { width: 33.6%; }
  .comparativo .compare thead th + th { width: 34.9%; }
  .comparativo .comparativo__cta { max-width: calc(100% - 32px); font-size: clamp(13px, 3.8vw, 15px); } /* nutri: 2 linhas a partir de 360px */
}

/* captura 05-jornada — <section id="jornada" class="jornada">. Dono: Task 6.
   Seletores sempre começando por .jornada. Desktop primeiro; mobile em @media (max-width: 800px). */
.jornada {
  background: var(--jornada-leaves-image, none) center bottom / 1983px 248px no-repeat;
  overflow-x: clip;
  padding: 53px 0 83px;
}
.jornada .jornada__inner { display: flex; flex-direction: column; align-items: center; max-width: 1340px; } /* mais largo que o .container (960px): título em 2 linhas no desktop */
.jornada .jornada__title {
  font-size: 40px; line-height: 1; font-weight: 600; text-align: center; width: 900px; max-width: 100%; text-wrap: balance;
  font-family: var(--font-family-regular);
}
.jornada .jornada__title::after {
  content: ""; display: block; width: 240px; height: 2px;
  margin: 18px auto 0; background: var(--color-accent);
}
.jornada .jornada__subtitle {
  margin-top: 20px; max-width: 680px;
  font-size: 32px; line-height: 34px; font-weight: 400; text-align: center; /* mesmo peso do texto das etapas; o <strong> segue 600 */
}
/* Etapas: o <ol> tem o tamanho do retângulo das setas (desenho de 1407x1164, retângulo em
   x 443, y 17, 825x1145) e é centralizado pelo flex do .jornada__inner. A imagem inteira fica no
   ::before, posicionada em % do próprio <ol>, então as linhas acompanham qualquer largura.
   Dentro do <ol>, --jornada-unit = 1px do desenho (100cqi / largura do retângulo): alturas, ícones e fontes
   escalam juntos quando o retângulo encolhe. */
.jornada .jornada__steps {
  --jornada-arrows-image-width: 1407; --jornada-arrows-image-height: 1164; --jornada-arrows-box-x: 443; --jornada-arrows-box-y: 27; --jornada-arrows-box-width: 825; --jornada-arrows-box-height: 1145;
  --jornada-unit: calc(100cqi / var(--jornada-arrows-box-width));
  position: relative; isolation: isolate; container-type: inline-size;
  display: flex; flex-direction: column;
  /* --jornada-steps-padding-x: respiro extra além do gutter quando o bloco encosta nas bordas (as pontas das setas
     saem ~18px para fora do retângulo no desktop, ~6px no mobile) */
  --jornada-steps-padding-x: 24px;
  width: min(calc(var(--jornada-arrows-box-width) * 1px), 100% - 2 * var(--jornada-steps-padding-x));
  aspect-ratio: var(--jornada-arrows-box-width) / var(--jornada-arrows-box-height);
  margin-top: 72px; /* 55px até o topo da imagem + 17px até a primeira linha */
}
.jornada .jornada__steps::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(var(--jornada-arrows-box-x) / var(--jornada-arrows-box-width) * -100%);
  top: calc(var(--jornada-arrows-box-y) / var(--jornada-arrows-box-height) * -100%);
  width: calc(var(--jornada-arrows-image-width) / var(--jornada-arrows-box-width) * 100%);
  height: calc(var(--jornada-arrows-image-height) / var(--jornada-arrows-box-height) * 100%);
  background: var(--jornada-arrows-image) center / 100% 100% no-repeat;
}
/* cada etapa ocupa uma faixa entre duas linhas horizontais (proporção do desenho);
   ícone + texto formam colunas de largura fixa centralizadas na faixa */
.jornada .jornada__step {
  flex: 1 1 0;
  display: grid; grid-template-columns: calc(150 * var(--jornada-unit)) minmax(0, calc(480 * var(--jornada-unit)));
  column-gap: calc(26 * var(--jornada-unit)); justify-content: center; align-items: center;
}
.jornada .jornada__step:nth-child(1) { flex-grow: 286.5; }
.jornada .jornada__step:nth-child(2) { flex-grow: 286; }
.jornada .jornada__step:nth-child(3) { flex-grow: 291; }
.jornada .jornada__step:nth-child(4) { flex-grow: 281.5; }
.jornada .jornada__step-body { grid-column: 2; grid-row: 1; }
.jornada .jornada__icon { grid-column: 1; grid-row: 1; justify-self: center; width: calc(140 * var(--jornada-unit)); height: auto; }
.jornada .jornada__step:nth-child(2) .jornada__icon { width: calc(120 * var(--jornada-unit)); }
.jornada .jornada__step:nth-child(3) .jornada__icon { width: calc(150 * var(--jornada-unit)); }
.jornada .jornada__step:nth-child(4) .jornada__icon { width: calc(117 * var(--jornada-unit)); }
.jornada .jornada__step-title { font-size: calc(29 * var(--jornada-unit)); line-height: 1; font-weight: 600; color: var(--color-accent); }
.jornada .jornada__step-text { margin-top: calc(10 * var(--jornada-unit)); font-size: calc(29 * var(--jornada-unit)); line-height: 1; font-weight: 400; }
.jornada .jornada__cta {
  width: 27em; max-width: 100%; /* texto longo: largura para caber em 2 linhas */
  margin-top: 99px; padding: 0.59em 1.47em;
  font-size: var(--cta-font-size); line-height: 1;
}

@media (max-width: 800px) {
  /* fundo da seção = mesma cor pintada atrás das setas (--jornada-background-color-mobile), sem faixa cinza em volta do bloco */
  .jornada { background: var(--jornada-background-color-mobile, #f9f9f9); padding: 40px 0 50px; }
  .jornada .jornada__title { font-size: clamp(17px, 5.12vw, 22px); max-width: 330px; }
  .jornada .jornada__title::after { width: 156px; margin-top: 12px; }
  .jornada .jornada__subtitle { margin-top: 16px; max-width: 370px; font-size: 14px; line-height: 14px; }
  /* setas mobile: desenho de 420x480, retângulo em x 22, y 7, 340x471 */
  .jornada .jornada__steps {
    --jornada-arrows-image-width: 420; --jornada-arrows-image-height: 480; --jornada-arrows-box-x: 22; --jornada-arrows-box-y: 13; --jornada-arrows-box-width: 340; --jornada-arrows-box-height: 471;
    --jornada-steps-padding-x: 10px;
    margin-top: 19px;
  }
  .jornada .jornada__steps::before { background-image: var(--jornada-arrows-image-mobile); }
  .jornada .jornada__step {
    grid-template-columns: calc(70 * var(--jornada-unit)) minmax(0, calc(195 * var(--jornada-unit)));
    column-gap: calc(18 * var(--jornada-unit));
  }
  .jornada .jornada__step:nth-child(1) { flex-grow: 118; }
  .jornada .jornada__step:nth-child(2) { flex-grow: 118; }
  .jornada .jornada__step:nth-child(3) { flex-grow: 119; }
  .jornada .jornada__step:nth-child(4) { flex-grow: 116; }
  .jornada .jornada__icon,
  .jornada .jornada__step:nth-child(n) .jornada__icon { width: calc(62 * var(--jornada-unit)); }
  .jornada .jornada__step:nth-child(3) .jornada__icon { width: calc(68 * var(--jornada-unit)); }
  .jornada .jornada__step-title { font-size: calc(12 * var(--jornada-unit)); }
  .jornada .jornada__step-text { margin-top: calc(3 * var(--jornada-unit)); font-size: calc(12 * var(--jornada-unit)); line-height: calc(12 * var(--jornada-unit)); }
  .jornada .jornada__cta { width: 360px; margin-top: 34px; font-size: clamp(12px, 3.6vw, 14px); line-height: 1.1; padding: 10px 14px; } /* texto longo: 2 linhas a partir de 360px */

  /* nutri (mobile): imagem das setas esticada em 335x488, título menor, ícone/texto mais à esquerda */
  .jornada--nutri { padding: 40px 0 33px; }
  .jornada--nutri .jornada__title { font-size: clamp(14px, 4.19vw, 18px); max-width: 340px; }
  .jornada--nutri .jornada__title::after { margin-top: 21px; }
  .jornada--nutri .jornada__subtitle { margin-top: 11px; font-size: 16px; line-height: 19px; max-width: 320px; }
  /* nutri: mesma imagem esticada para 399x496 (retângulo 323x487 em x 21, y 7) */
  .jornada--nutri .jornada__steps {
    --jornada-arrows-image-width: 399; --jornada-arrows-image-height: 496; --jornada-arrows-box-x: 21; --jornada-arrows-box-y: 13; --jornada-arrows-box-width: 323; --jornada-arrows-box-height: 487;
    margin-top: 18px;
  }
  .jornada--nutri .jornada__step {
    grid-template-columns: calc(60 * var(--jornada-unit)) minmax(0, calc(185 * var(--jornada-unit)));
    column-gap: calc(11 * var(--jornada-unit));
  }
  .jornada--nutri .jornada__step:nth-child(n) .jornada__icon { width: calc(58 * var(--jornada-unit)); }
  .jornada--nutri .jornada__step-title { font-size: calc(13.5 * var(--jornada-unit)); }
  .jornada--nutri .jornada__step-text { font-size: calc(12 * var(--jornada-unit)); line-height: calc(14 * var(--jornada-unit)); }
  .jornada--nutri .jornada__cta { margin-top: 23px; }
}

/* captura 06-aprender — <section id="aprender" class="aprender">. Dono: Task 7.
   Seletores sempre começando por .aprender. Desktop primeiro; mobile em @media (max-width: 800px). */
.aprender {
  position: relative;
  z-index: 1;            /* acima da seção anterior (jornada): as folhas (.aprender__leaves) sobem sobre o pé dela */
  overflow-x: clip;      /* corta só na horizontal; as folhas podem passar do topo */
  background: var(--aprender-background-image) var(--aprender-background-position, 50% 50%) / cover no-repeat #fff;
  color: var(--color-white);
}
/* folhas no topo (só fito): mesmas imagens e mesmo comportamento das folhas do pé da hero
   (ver 01-hero.css): dois ramos num container centralizado de largura max(1920px, 100%),
   metade acima e metade abaixo do topo da seção. */
.aprender .aprender__leaves {
  position: absolute;
  left: 50%;
  top: -116px;
  width: max(1920px, 100%);
  height: 227px;
  transform: translateX(-50%);
  pointer-events: none;
}
.aprender .aprender__leaf {
  position: absolute;
  top: 0;
  width: 427px;
  height: 100%;
  background: var(--hero-leaf-left-image) 0 0 / 100% 100% no-repeat;
}
.aprender .aprender__leaf--l { left: 0; }
.aprender .aprender__leaf--r { right: 0; background-image: var(--hero-leaf-right-image); }

.aprender .aprender__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 161.5px 0 var(--aprender-padding-bottom, 132px);
}
.aprender .aprender__title {
  font-size: 46px;
  line-height: 1;
  font-weight: 600;
  text-align: center;
  font-family: var(--font-family-regular);
}
.aprender .aprender__title::after {
  content: "";
  display: block;
  width: 240px;
  margin: 20px auto 0;
  border-bottom: 2px solid var(--color-course);
}
.aprender .aprender__subtitle {
  max-width: 915.7px;
  margin-top: 20px;
  font-size: 38px;
  line-height: 1;
  font-weight: 600;
  text-align: center;
}
.aprender .aprender__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.aprender .aprender__subtitle + .aprender__group { margin-top: var(--aprender-group1-margin-top, 103.75px); }
.aprender .aprender__group + .aprender__group { margin-top: var(--aprender-group2-margin-top, 157.7px); }
.aprender .aprender__label {
  /* sem largura/altura fixas (como na publicada): a caixa acompanha o texto */
  width: fit-content;
  max-width: 100%;
  padding: 15px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--color-tag);
  font-size: clamp(34px, 2.14vw, 41px);
  line-height: 1;
  font-weight: 600;
  text-align: center;
}
.aprender .aprender__carousel {
  display: flex;
  align-items: flex-start;
  width: 910px;
  max-width: 100%;
  margin-top: var(--aprender-carousel1-margin-top, 27.5px);
}
.aprender .aprender__group + .aprender__group .aprender__carousel { margin-top: var(--aprender-carousel2-margin-top, 35px); }
.aprender .aprender__carousel .swiper { flex: 1; min-width: 0; }
.aprender .aprender__carousel .swiper-slide img { width: 100%; height: auto; }
/* setas sobrepostas 20px para fora das bordas do carrossel */
.aprender .aprender__carousel .carousel__prev,
.aprender .aprender__carousel .carousel__next {
  position: relative;
  z-index: 10;
  align-self: center;
}
.aprender .aprender__carousel .carousel__prev { margin: 0 -40px 0 -20px; }
.aprender .aprender__carousel .carousel__next { margin: 0 -20px 0 -40px; }
.aprender .aprender__cta {
  width: 20em; /* 2 linhas */
  max-width: 100%;
  margin-top: var(--aprender-cta-margin-top, 114.9px);
  padding: 0.59em 1.47em;
  font-size: var(--cta-font-size);
}

@media (max-width: 800px) {
  .aprender { background-image: var(--aprender-background-image-mobile); }
  .aprender .aprender__leaves { top: -36px; width: max(420px, 100%); height: 70px; }
  .aprender .aprender__leaf { width: 116px; background-image: var(--hero-leaf-left-image-mobile); }
  .aprender .aprender__leaf--r { width: 115px; background-image: var(--hero-leaf-right-image-mobile); }
  /* respiro lateral = gutter do .container; a largura útil continua 360px a partir de 392px de tela */
  .aprender .aprender__inner { max-width: calc(360px + 2 * var(--container-gutter)); padding: var(--aprender-padding-top-mobile, 33.6px) var(--container-gutter) var(--aprender-padding-bottom-mobile, 77.1px); }
  .aprender .aprender__title { font-size: var(--aprender-title-font-size-mobile, 20px); }
  .aprender .aprender__title::after { width: 161px; margin-top: 5.4px; }
  .aprender .aprender__subtitle { max-width: 339px; margin-top: var(--aprender-subtitle-margin-top-mobile, 8.3px); font-size: 15px; }
  .aprender .aprender__subtitle + .aprender__group { margin-top: var(--aprender-group1-margin-top-mobile, 13.2px); }
  .aprender .aprender__group + .aprender__group { margin-top: var(--aprender-group2-margin-top-mobile, 24.6px); }
  .aprender .aprender__label { padding: 10px; border-radius: 8px; font-size: 12px; }
  .aprender .aprender__carousel { width: var(--aprender-carousel-width-mobile, 332.5px); margin-top: var(--aprender-carousel1-margin-top-mobile, 18.2px);  left: var(--aprender-carousel-offset-x-mobile, 0px); }
  .aprender .aprender__group + .aprender__group .aprender__carousel { margin-top: var(--aprender-carousel2-margin-top-mobile, 20.2px); }
  .aprender .aprender__carousel .carousel__prev,
  .aprender .aprender__carousel .carousel__next { width: var(--aprender-arrow-width-mobile, 30px); }
  .aprender .aprender__carousel .carousel__prev { margin: 0 calc(-1 * (var(--aprender-arrow-width-mobile, 30px) + var(--aprender-arrow-offset-mobile, -20px))) 0 var(--aprender-arrow-offset-mobile, -20px); }
  .aprender .aprender__carousel .carousel__next { margin: 0 var(--aprender-arrow-offset-mobile, -20px) 0 calc(-1 * (var(--aprender-arrow-width-mobile, 30px) + var(--aprender-arrow-offset-mobile, -20px))); }
  .aprender .aprender__cta {
    width: 333px;
    margin-top: var(--aprender-cta-margin-top-mobile, 67.5px);
    padding: 10px 20px;
    font-size: 16px;
  }
}

/* telas estreitas (até 430px): as setas ficam |--aprender-arrow-offset-mobile| para fora do carrossel; o
   carrossel encolhe para as setas não saírem da tela (mín. 4px da borda). */
@media (max-width: 430px) {
  .aprender .aprender__carousel { max-width: min(100%, calc(100vw - 8px + 2 * var(--aprender-arrow-offset-mobile, -20px))); }
  .aprender .aprender__cta { max-width: 100%; }
}

/* captura 07-docentes — <section id="docentes" class="docentes">. Dono: Task 7.
   Seletores sempre começando por .docentes. Desktop primeiro; mobile em @media (max-width: 800px). */
.docentes {
  overflow: hidden;
  background: #fff;
  /* --docentes-unit = 1px do layout desktop (moldura de 1176.72px). Abaixo de 1208.72px de tela a moldura
     encolhe junto com tudo dentro (título, subtítulo, painel, carrossel): --docentes-unit = (tela - 32px) / 1176.72.
     As variáveis desktop por curso (--docentes-frame-margin-left, --docentes-title-margin-left, ...) são números (px do layout). */
  container-type: inline-size;
}
.docentes .docentes__inner {
  --docentes-unit: min(1px, (100cqi - 32px) / 1176.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 33px 0 84.4px;
}
/* moldura: a borda vem do fundo (--docentes-frame-image); o título (caixa branca) a interrompe */
.docentes .docentes__frame {
  flex: none;
  width: calc(1176.72 * var(--docentes-unit));
  margin-left: calc(var(--docentes-frame-margin-left, -9) * var(--docentes-unit));
  background: var(--docentes-frame-image) 0 calc(73.5 * var(--docentes-unit)) / calc(1176.72 * var(--docentes-unit)) calc(597.1 * var(--docentes-unit)) no-repeat;
}
.docentes .docentes__title {
  width: calc(566 * var(--docentes-unit));
  height: calc(147 * var(--docentes-unit));
  margin-left: calc(var(--docentes-title-margin-left, 311.4) * var(--docentes-unit));
  padding: calc(var(--docentes-title-padding-top, 16.5) * var(--docentes-unit)) 0 0;
  background-color: #fff;
  font-size: min(clamp(29px, 1.98vw, 38px), 38 * var(--docentes-unit));
  line-height: calc(38 * var(--docentes-unit));
  font-weight: 600;
  text-align: center;
}
.docentes .docentes__subtitle {
  width: calc(827.7 * var(--docentes-unit));
  margin: calc(var(--docentes-subtitle-margin-top, 31.6) * var(--docentes-unit)) 0 0 calc(var(--docentes-subtitle-margin-left, 180.35) * var(--docentes-unit));
  font-size: min(clamp(23px, 1.56vw, 30px), 30 * var(--docentes-unit));
  line-height: calc(30 * var(--docentes-unit));
  font-weight: 600;
  text-align: center;
  color: #000;
}
.docentes .docentes__panel {
  height: calc(429 * var(--docentes-unit));
  margin-top: calc(var(--docentes-panel-margin-top, 47.1) * var(--docentes-unit));
  padding-top: calc(var(--docentes-panel-padding-top, 59.5) * var(--docentes-unit));
  border-radius: calc(45 * var(--docentes-unit));
  background: var(--color-panel);
}
.docentes .docentes__carousel {
  display: flex;
  align-items: flex-start;
  width: calc(960 * var(--docentes-unit));
  margin: 0 0 0 calc(var(--docentes-carousel-margin-left, 114.2) * var(--docentes-unit));
}
.docentes .docentes__carousel .swiper { flex: 1; min-width: 0; }
.docentes .docentes__carousel .swiper-wrapper { align-items: flex-end; }
.docentes .docentes__carousel .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.docentes .docentes__carousel .swiper-slide img { width: 100%; height: auto; }
.docentes .docentes__carousel .carousel__prev,
.docentes .docentes__carousel .carousel__next {
  position: relative;
  z-index: 10;
  align-self: center;
}
.docentes .docentes__carousel .carousel__prev { margin: 0 -40px 0 -20px; }
.docentes .docentes__carousel .carousel__next { margin: 0 -20px 0 -40px; }
.docentes .docentes__cta {
  width: 24.82em;
  max-width: 100%;
  margin-top: 68.9px;
  padding: 0.59em 1.47em;
  font-size: var(--cta-font-size);
}

@media (max-width: 800px) {
  .docentes .docentes__inner { max-width: 360px; padding: 0 0 var(--docentes-padding-bottom-mobile, 56px); }
  .docentes .docentes__frame {
    position: relative;
    isolation: isolate;
    /* contorno (imagem 360x439.2) + preenchimento: a altura acompanha a moldura (o painel tem altura
       automática) e termina 30px acima da base do painel, escondida atrás dele (fora das curvas) */
    --docentes-frame-background-height: calc(100% - var(--docentes-frame-top-mobile, 44.3px) - 30px);
    width: 360px;
    margin-left: 0;
    background:
      var(--docentes-frame-image-override-mobile, var(--docentes-frame-image-mobile)) 0 var(--docentes-frame-top-mobile, 44.3px) / 360px var(--docentes-frame-background-height) no-repeat,
      linear-gradient(var(--docentes-frame-fill-color-mobile, #f9f9f9), var(--docentes-frame-fill-color-mobile, #f9f9f9)) 0 var(--docentes-frame-top-mobile, 44.3px) / 360px var(--docentes-frame-background-height) no-repeat;
  }
  /* moldura desenhada em CSS (só nutri): contorno atrás do título/painel. Em vez de altura fixa,
     desce até 29.9px abaixo do CTA (o texto do CTA/subtítulo quebra em mais linhas e a moldura
     cresce; com altura fixa o contorno cortava o botão) */
  .docentes .docentes__frame::before {
    content: "";
    display: var(--docentes-frame-outline-display-mobile, none);
    position: absolute;
    z-index: -1;
    top: var(--docentes-frame-top-mobile, 44.3px);
    bottom: calc(-1 * (var(--docentes-cta-margin-top-mobile, 45.9px) + var(--docentes-cta-height-mobile, 55.4px) + 29.9px));
    left: 0;
    width: 100%;
    border: var(--docentes-frame-outline-border-mobile, 0);
    border-radius: var(--docentes-frame-outline-radius-mobile, 0);
  }
  .docentes .docentes__title {
    width: var(--docentes-title-width-mobile, 321px);
    height: auto;
    min-height: 104px; /* cresce em telas muito estreitas (título em mais linhas) em vez de invadir o subtítulo */
    margin: var(--docentes-title-margin-top-mobile, 0px) 0 0 var(--docentes-title-margin-left-mobile, 19px);
    padding: var(--docentes-title-padding-top-mobile, 20.5px) 0 0;
    /* a caixa branca só precisa esconder a linha (2px no topo da moldura); abaixo dela repete o
       preenchimento da moldura (--docentes-frame-fill-color-mobile), senão o retângulo branco aparece sobre o fundo cinza */
    background: linear-gradient(#fff calc(var(--docentes-frame-top-mobile, 44.3px) - var(--docentes-title-margin-top-mobile, 0px) + 4px), var(--docentes-frame-fill-color-mobile, #f9f9f9) 0);
    font-size: var(--docentes-title-font-size-mobile, 16px);
    line-height: var(--docentes-title-line-height-mobile, 16px);
  }
  .docentes .docentes__subtitle {
    width: var(--docentes-subtitle-width-mobile, 333px);
    margin: var(--docentes-subtitle-margin-top-mobile, 22px) 0 0 var(--docentes-subtitle-margin-left-mobile, 13.5px);
    font-size: var(--docentes-subtitle-font-size-mobile, 16px);
    line-height: var(--docentes-subtitle-line-height-mobile, 16px);
  }
  .docentes .docentes__panel {
    width: var(--docentes-panel-width-mobile, 360px);
    height: auto; /* acompanha o slider: respiro embaixo = respiro em cima */
    margin: var(--docentes-panel-margin-top-mobile, 55.9px) 0 0 var(--docentes-panel-margin-left-mobile, 0px);
    padding-top: var(--docentes-panel-padding-y-mobile, 21.8px);
    padding-bottom: var(--docentes-panel-padding-y-mobile, 21.8px);
    border-radius: 25px;
  }
  .docentes .docentes__carousel { width: var(--docentes-carousel-width-mobile, 308.5px); margin: 0 0 0 var(--docentes-carousel-margin-left-mobile, 25.8px); }
  .docentes .docentes__carousel .swiper { height: var(--docentes-carousel-height-mobile, auto); }
  .docentes .docentes__carousel .swiper-slide img {
    height: var(--docentes-carousel-height-mobile, auto);
    object-fit: contain;
    object-position: center bottom;
  }
  .docentes .docentes__carousel .carousel__prev,
  .docentes .docentes__carousel .carousel__next { width: var(--docentes-arrow-width-mobile, 30px); }
  .docentes .docentes__carousel .carousel__prev { margin: 0 calc(-1 * (var(--docentes-arrow-width-mobile, 30px) + var(--docentes-arrow-offset-mobile, -20px))) 0 var(--docentes-arrow-offset-mobile, -20px); }
  .docentes .docentes__carousel .carousel__next { margin: 0 var(--docentes-arrow-offset-mobile, -20px) 0 calc(-1 * (var(--docentes-arrow-width-mobile, 30px) + var(--docentes-arrow-offset-mobile, -20px))); }
  .docentes .docentes__cta {
    width: 285px;
    max-width: 100%;
    min-height: var(--docentes-cta-height-mobile, 55.4px);
    margin-top: var(--docentes-cta-margin-top-mobile, 45.9px);
    padding: 15px;
    font-size: 16px;
  }
}

/* telas estreitas (até 430px): a moldura de 360px passa a caber na tela (8px de cada lado) e
   título, subtítulo, painel e carrossel mantêm as margens laterais do layout mobile. */
@media (max-width: 430px) {
  .docentes .docentes__frame {
    width: min(360px, 100vw - 16px);
    background-size: 100% var(--docentes-frame-background-height), 100% var(--docentes-frame-background-height);
  }
  .docentes .docentes__title { max-width: calc(100% - 2 * var(--docentes-title-margin-left-mobile, 19px)); }
  .docentes .docentes__subtitle { max-width: calc(100% - 2 * var(--docentes-subtitle-margin-left-mobile, 13.5px)); }
  .docentes .docentes__panel { max-width: calc(100% - 2 * var(--docentes-panel-margin-left-mobile, 0px)); }
  .docentes .docentes__carousel { max-width: calc(100% - 2 * var(--docentes-carousel-margin-left-mobile, 25.8px)); }
}

/* musc: as fotos têm alturas diferentes (a cabeça passa do card em alturas variadas), mas o card
   ocupa sempre a mesma fração da largura e fica alinhado na base. As fotos mantêm a largura do slide
   (sem encolher pela altura) e as setas ficam no centro do card (47.3% da largura do slide acima da
   base), não no centro do carrossel, que acompanha a foto mais alta.
   --docentes-slide-width = largura do slide do Swiper: (largura do carrossel - gaps) / slidesPerView. */
.docentes--musc .docentes__carousel { container-type: inline-size; --docentes-slide-width: calc((100cqi - 20px) / 3); }
.docentes--musc .docentes__carousel .carousel__prev,
.docentes--musc .docentes__carousel .carousel__next {
  align-self: flex-end;
  margin-bottom: calc(0.473 * var(--docentes-slide-width) - 45px);
}
@media (max-width: 800px) {
  .docentes--musc .docentes__carousel { --docentes-slide-width: calc((100cqi - 5.5px) / 1.55); }
  .docentes--musc .docentes__carousel .swiper-slide { justify-content: flex-end; }
  .docentes--musc .docentes__carousel .swiper-slide img { height: auto; }
}
@media (max-width: 551px) {
  .docentes--musc .docentes__carousel { --docentes-slide-width: calc((100cqi - 3.6px) / 1.45); }
}

/* captura 08-custo — <section id="custo" class="custo">. Dono: Task 8.
   Seletores sempre começando por .custo. Desktop primeiro; mobile em @media (max-width: 800px). */
.custo {
  min-height: 1400px;
  padding: 81px 0 69px;
  background: #fff var(--custo-background-image) 50% 50% / cover no-repeat;
  color: var(--color-white);
}
.custo .custo__inner { display: flex; flex-direction: column; align-items: center; }

.custo .custo__title {
  width: 915.7px;
  max-width: 100%;
  font-size: 50px;
  line-height: 50px;
  font-weight: 600;
  text-align: center;
  font-family: var(--font-family-regular);
}

.custo .custo__list { width: 786.8px; max-width: 100%; margin-top: 29px; }
.custo .custo__item {
  display: flex;
  font-size: 36px;
  line-height: normal;
  font-weight: 400;
  text-align: left;
}
.custo .custo__item + .custo__item { margin-top: 45px; }
.custo .custo__item::before { content: "\2022"; flex: none; width: 40px; text-align: center; }

.custo .custo__card {
  width: 1092px;
  max-width: calc(100vw - 32px);
  min-height: 625px;
  margin-top: 45px;
  padding: 27.5px 50px 27.5px 65.7px;
  border-radius: 35px;
  background: var(--color-white);
  color: var(--color-black);
}
.custo .custo__compare-title {
  max-width: 864.7px;
  font-size: clamp(41px, 2.86vw, 55px);
  line-height: 1;
  font-weight: 600;
  text-align: left;
  font-family: var(--font-family-regular);
}
.custo .custo__checks { display: flex; flex-direction: column; gap: 29px; margin-top: 47.5px; }
.custo .custo__check {
  display: flex;
  align-items: flex-start;
  font-size: 34px;
  line-height: 44px;
  font-weight: 400;
}
.custo .custo__check::before {
  content: "";
  flex: none;
  width: 43px;
  height: 38px;
  margin: -1px 20px 0 0;
  background: var(--custo-check-icon) 0 0 / 100% 100% no-repeat;
}

.custo--musc .custo__check::before { margin: -1px 17px 0 3px; }

.custo .custo__cta {
  width: 24.35em;
  max-width: 100%;
  margin-top: 73.8px;
  padding: 0.59em 1.47em;
  font-size: var(--cta-font-size);
}

@media (max-width: 800px) {
  .custo { min-height: 623.188px; padding: 20.5px 0 40px; background-image: var(--custo-background-image-mobile); }
  .custo .custo__inner { width: min(100%, 360px); padding-inline: 0; }
  .custo .custo__title { width: 100%; margin-left: -1px; font-size: min(19px, 5vw); line-height: 1; text-align: left; }
  .custo .custo__list { width: 100%; margin-top: 28px; }
  .custo .custo__item { font-size: 13px; line-height: normal; }
  .custo .custo__item + .custo__item { margin-top: 11.1px; }
  .custo .custo__item:nth-child(3) { margin-top: 12.6px; }
  .custo .custo__item::before { width: 31.3px; padding-right: 3px; }
  .custo .custo__card { align-self: flex-start; width: 360px; max-width: 100%; min-height: 258px; margin: 23.7px 0 0 -1px; padding: 14.2px 15.8px 14.2px 19px; border-radius: 15px; }
  .custo .custo__compare-title { font-size: clamp(14px, 4.19vw, 18px); max-width: 318px; }
  .custo .custo__checks { gap: 0; margin-top: 13.6px; }
  .custo .custo__check + .custo__check { margin-top: 17.8px; }
  .custo .custo__check:nth-child(3) { margin-top: 15.3px; }
  .custo .custo__check:nth-child(4) { margin-top: 20.6px; }
  .custo .custo__check { font-size: 11px; line-height: 17px; }
  .custo .custo__check:nth-child(2) { padding-right: 7.2px; }
  .custo .custo__check:last-child { padding-right: 16px; }
  .custo .custo__check::before { width: 19.2px; height: 17px; margin: 0 8.1px 0 0; background-image: var(--custo-check-icon-mobile); }
  .custo .custo__cta { width: 303px; margin-top: 43.5px; padding: 15px; font-size: 16px; }

  /* ---- musc (mobile): título 21px, itens 16px, checks 14px, CTA de 3 linhas ---- */
  .custo--musc { min-height: 634.2px; padding-top: 28.4px; }
  .custo--musc .custo__title { align-self: flex-start; width: 342px; margin-left: 15.9px; font-size: min(19px, 5vw); line-height: 1; }
  .custo--musc .custo__list { margin-top: 27.1px; }
  .custo--musc .custo__checks { margin-top: 12.8px; }
  .custo--musc .custo__item { font-size: 14px; line-height: 14px; }
  .custo--musc .custo__item::before { margin-top: 1.5px; font-size: 14px; line-height: 14px; }
  .custo--musc .custo__item + .custo__item { margin-top: 6.9px; }
  .custo--musc .custo__item:nth-child(3) { margin-top: 8.4px; }
  .custo--musc .custo__card { margin-top: 19.7px; }
  .custo--musc .custo__check { font-size: 13px; line-height: 13px; }
  .custo--musc .custo__check + .custo__check { margin-top: 15.8px; }
  .custo--musc .custo__check:nth-child(3) { margin-top: 13.3px; }
  .custo--musc .custo__check:nth-child(4) { margin-top: 18.6px; }
  .custo--musc .custo__cta { margin-top: 33.1px; }

  /* ---- nutri (mobile): lista deslocada à esquerda, itens 16px, checks 15px ---- */
  .custo--nutri { min-height: 634.2px; padding-top: 28.2px; }
  .custo--nutri .custo__title { align-self: flex-start; width: 358px; margin-left: 1px; }
  .custo--nutri .custo__list { align-self: flex-start; width: 376.9px; max-width: none; margin: 16.4px 0 0 -17.2px; }
  .custo--nutri .custo__item { font-size: 14px; line-height: 14px; }
  .custo--nutri .custo__item::before { margin-top: -4.7px; font-size: 14px; line-height: 14px; }
  .custo--nutri .custo__item + .custo__item { margin-top: 10px; }
  .custo--nutri .custo__card { margin-top: 20.5px; padding: 8.9px 22.7px 8.9px 10.2px; }
  .custo--nutri .custo__compare-title { font-size: clamp(17px, 5.35vw, 23px); max-width: 339px; }
  .custo--nutri .custo__checks { margin-top: 14.7px; }
  .custo--nutri .custo__check { font-size: 13px; line-height: 13px; }
  .custo--nutri .custo__check::before { margin: 0 8.1px 0 1.9px; }
  .custo--nutri .custo__check + .custo__check { margin-top: 14.6px; }
  .custo--nutri .custo__check:nth-child(3) { margin-top: 9.8px; }
  .custo--nutri .custo__check:nth-child(4) { margin-top: 16.7px; }
  .custo--nutri .custo__cta { align-self: flex-start; margin: 41.3px 0 0 42.3px; }
}

/* telas estreitas (até 430px): o conteúdo (360px no layout mobile) mantém 16px de respiro lateral;
   título, lista e CTA com deslocamento próprio por curso não passam da borda. Sem efeito >= 392px. */
@media (max-width: 430px) {
  .custo .custo__inner { width: min(100% - 32px, 360px); }
  .custo--musc .custo__title { max-width: calc(100% - 15.9px); }
  .custo--nutri .custo__title { max-width: calc(100% - 1px); }
  .custo--nutri .custo__list { max-width: calc(100% + 17.2px); margin-left: max(-17.2px, (min(100vw - 32px, 360px) - 100vw) / 2 + 2px); }
  .custo--nutri .custo__cta { max-width: 100%; margin-left: clamp(0px, 100% - 303px, 42.3px); }
}

/* captura 09-valor — <section id="valor" class="valor">. Dono: Task 8.
   Seletores sempre começando por .valor. Desktop primeiro; mobile em @media (max-width: 800px). */
.valor { min-height: 978.953px; padding: 54.6px 0 94px; background: var(--color-white); }
.valor .valor__inner { display: flex; flex-direction: column; align-items: center; }

.valor .valor__title {
  width: 1079.7px;
  max-width: calc(100vw - 32px);
  font-size: 38px;
  line-height: 42px;
  font-weight: 400; /* 400: as partes em <strong> se destacam */
  text-align: left;
}

.valor .valor__banner {
  width: 960px;
  max-width: 100%;
  min-height: 161px;
  margin-top: 18.8px;
  padding: 0 135px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: var(--gradient-course);
  color: var(--color-white);
  font-size: 38px;
  line-height: 38px;
  font-weight: 600;
  text-align: center;
}

/* moldura do preço: grade com as 3 colunas (R$ | valor | /MÊS) sobre a imagem da moldura.
   No desktop a moldura inteira (colunas, alturas, margens e fontes) escala junto com o valor:
   --valor-unit = 1px do layout de 1920px multiplicado pela mesma escala do clamp de .valor__value. */
.valor .valor__price {
  --valor-unit: calc(clamp(173px, 12.03vw, 231px) / 231);
  display: grid;
  grid-template-columns: calc(153.5 * var(--valor-unit)) calc(742.1 * var(--valor-unit)) calc(147.8 * var(--valor-unit));
  grid-template-rows: calc(172.8 * var(--valor-unit));
  width: calc(1043.4 * var(--valor-unit));
  height: calc(172.8 * var(--valor-unit));
  margin: calc(75.8 * var(--valor-unit)) 0 0 calc(-7.2 * var(--valor-unit));
  background: var(--valor-frame-image) 0 0 / 100% 100% no-repeat;
  text-align: center;
}
.valor .valor__lead {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  margin-top: calc(-40 * var(--valor-unit));
  font-size: calc(40 * var(--valor-unit));
  line-height: calc(40 * var(--valor-unit));
  font-weight: 600;
}
.valor .valor__lead-line { display: block; width: fit-content; margin-inline: auto; }
.valor .valor__value {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin-top: calc(34.3 * var(--valor-unit));
  font-size: clamp(150px, 10.42vw, 200px);
  line-height: calc(200 * var(--valor-unit));
  font-weight: 600;
  color: var(--color-black);
  font-family: var(--font-family-regular);
}
.valor .valor__currency,
.valor .valor__period {
  grid-row: 1;
  align-self: start;
  margin-top: calc(149.8 * var(--valor-unit));
  font-size: calc(35 * var(--valor-unit));
  line-height: calc(35 * var(--valor-unit));
  font-weight: 600;
}
.valor .valor__currency { grid-column: 1; justify-self: start; width: calc(62.5 * var(--valor-unit)); margin-left: calc(72.5 * var(--valor-unit)); }
.valor .valor__period { grid-column: 3; justify-self: start; width: calc(115.5 * var(--valor-unit)); margin-left: calc(-19.5 * var(--valor-unit)); }

.valor .valor__cta {
  width: 25.44em;
  max-width: 100%;
  margin-top: 151.2px;
  padding: 0.59em 1.47em;
  font-size: var(--cta-font-size);
}

/* ---- musc / nutri (desktop): faixa do curso mais baixa, texto do CTA mais estreito ---- */
.valor--musc .valor__banner,
.valor--nutri .valor__banner { min-height: 144px; margin-top: 35.8px; }
.valor--musc .valor__price { margin-left: 0; grid-template-columns: calc(150.6 * var(--valor-unit)) calc(742.1 * var(--valor-unit)) calc(150.7 * var(--valor-unit)); }
.valor--musc .valor__currency { margin-left: calc(68.6 * var(--valor-unit)); }
.valor--musc .valor__period { margin-left: calc(-19.6 * var(--valor-unit)); }
.valor--nutri .valor__currency { margin-left: calc(71.5 * var(--valor-unit)); }

@media (max-width: 800px) {
  .valor { min-height: 465.875px; padding: 28px 0 25px; }
  .valor .valor__inner { width: min(100%, 360px); padding-inline: 0; }
  .valor .valor__title { width: 100%; max-width: 100%; font-size: 16px; line-height: 18px; }
  .valor .valor__banner { min-height: 81px; margin-top: 19px; padding: 0 53px; border-radius: 10px; font-size: 15px; line-height: 15px; }
  .valor .valor__price {
    --valor-unit: 1px;
    grid-template-columns: 41.5px 258px 67px;
    grid-template-rows: 60.7px;
    width: 366.5px;
    max-width: 100vw;
    height: 60.7px;
    margin: 31px 0 0;
    background-image: var(--valor-frame-image-mobile);
    clip-path: inset(-100px 3.8px -100px 0);
  }
  .valor .valor__lead { margin-top: -14px; font-size: 14px; line-height: 14px; }
  .valor .valor__value { margin: 20.8px 0 0 2px; font-size: 59px; line-height: 59px; }
  .valor .valor__currency,
  .valor .valor__period { margin-top: 50.8px; font-size: 13px; line-height: 13px; }
  .valor .valor__currency { width: 40px; margin-left: 16px; }
  .valor .valor__period { width: 53.5px; margin-left: -7px; }
  .valor .valor__cta { width: 370px; margin-top: 92.8px; margin-left: 2.25px; margin-right: auto; padding: 15px; font-size: clamp(13px, 3.8vw, 15px); } /* 2 linhas a partir de 360px */

  /* ---- musc / nutri (mobile): canto inferior arredondado sobre a FAQ ---- */
  .valor--musc,
  .valor--nutri { position: relative; z-index: 3; overflow: hidden; border-radius: 0 0 28px 28px; background: var(--color-white); }
  .valor--musc { margin-bottom: -40px; }
  .valor--nutri { margin-bottom: -44px; }
  .valor--musc .valor__banner,
  .valor--nutri .valor__banner { min-height: 63px; }
  .valor--musc .valor__value,
  .valor--nutri .valor__value { margin-left: 0; }
  .valor--musc .valor__price,
  .valor--nutri .valor__price { margin-left: 0; margin-right: 0; clip-path: none; }
  .valor--musc .valor__cta,
  .valor--nutri .valor__cta { margin-inline: auto; }

  .valor--musc .valor__title { line-height: 15px; }
  .valor--musc .valor__banner { margin-top: 46px; }
  .valor--musc .valor__price { width: 360px; grid-template-columns: 38.5px 258px 63.5px; margin-top: 31.1px; }
  .valor--musc .valor__currency { margin-left: 17.8px; }
  .valor--musc .valor__period { margin-left: -7px; }
  .valor--musc .valor__cta { margin-top: 79.2px; }

  .valor--nutri { padding-top: 19.95px; }
  .valor--nutri .valor__title { font-size: 19px; line-height: 19px; }
  .valor--nutri .valor__banner { margin-top: 25px; padding: 0 27.4px 0 25.4px; }
  .valor--nutri .valor__price { width: 361px; grid-template-columns: 39.8px 258px 63.2px; margin-top: 31.1px; margin-left: -1px; }
  .valor--nutri .valor__lead { margin-top: -6px; }
  .valor--nutri .valor__currency { margin-left: 19px; }
  .valor--nutri .valor__period { margin-left: -7.06px; }
  .valor--nutri .valor__cta { margin-top: 71.2px; }
}

/* telas estreitas (até 430px): conteúdo com 16px de respiro lateral. A moldura do preço (imagem +
   colunas R$ | valor | /MÊS) escala inteira, como no desktop: --valor-unit = 1px do layout mobile reduzido na
   proporção da viewport (1px enquanto couber 366.5px + 8px de cada lado). */
@media (max-width: 430px) {
  .valor .valor__inner { width: min(100% - 32px, 360px); }
  .valor .valor__price {
    --valor-unit: min(1px, (100vw - 16px) / 366.5);
    grid-template-columns: calc(41.5 * var(--valor-unit)) calc(258 * var(--valor-unit)) calc(67 * var(--valor-unit));
    grid-template-rows: calc(60.7 * var(--valor-unit));
    width: calc(366.5 * var(--valor-unit));
    height: calc(60.7 * var(--valor-unit));
    margin-top: calc(31 * var(--valor-unit));
    clip-path: inset(-100px calc(3.8 * var(--valor-unit)) -100px 0);
  }
  .valor .valor__lead { margin-top: calc(-14 * var(--valor-unit)); font-size: calc(14 * var(--valor-unit)); line-height: calc(14 * var(--valor-unit)); }
  .valor .valor__value { margin: calc(20.8 * var(--valor-unit)) 0 0 calc(2 * var(--valor-unit)); font-size: calc(59 * var(--valor-unit)); line-height: calc(59 * var(--valor-unit)); }
  .valor .valor__currency,
  .valor .valor__period { margin-top: calc(50.8 * var(--valor-unit)); font-size: calc(13 * var(--valor-unit)); line-height: calc(13 * var(--valor-unit)); }
  .valor .valor__currency { width: calc(40 * var(--valor-unit)); margin-left: calc(16 * var(--valor-unit)); }
  .valor .valor__period { width: calc(53.5 * var(--valor-unit)); margin-left: calc(-7 * var(--valor-unit)); }
  .valor .valor__cta { max-width: calc(100% - 2.25px); }
  /* faixa do curso: recuo lateral de 53px diminui junto com a largura (mín. 16px) */
  .valor--fito .valor__banner,
  .valor--musc .valor__banner { padding-inline: clamp(16px, 100% - 254px, 53px); }

  .valor--musc .valor__value,
  .valor--nutri .valor__value { margin-left: 0; }
  .valor--musc .valor__price,
  .valor--nutri .valor__price { clip-path: none; }
  .valor--musc .valor__cta,
  .valor--nutri .valor__cta { max-width: 100%; }

  .valor--musc .valor__price { width: calc(360 * var(--valor-unit)); grid-template-columns: calc(38.5 * var(--valor-unit)) calc(258 * var(--valor-unit)) calc(63.5 * var(--valor-unit)); margin-top: calc(31.1 * var(--valor-unit)); }
  .valor--musc .valor__currency { margin-left: calc(17.8 * var(--valor-unit)); }

  .valor--nutri .valor__price { width: calc(361 * var(--valor-unit)); grid-template-columns: calc(39.8 * var(--valor-unit)) calc(258 * var(--valor-unit)) calc(63.2 * var(--valor-unit)); margin-top: calc(31.1 * var(--valor-unit)); margin-left: calc(-1 * var(--valor-unit)); }
  .valor--nutri .valor__lead { margin-top: calc(-6 * var(--valor-unit)); }
  .valor--nutri .valor__currency { margin-left: calc(19 * var(--valor-unit)); }
  .valor--nutri .valor__period { margin-left: calc(-7.06 * var(--valor-unit)); }
}

/* captura 10-faq — <section id="faq" class="faq">. Dono: Task 8.
   Seletores sempre começando por .faq. Desktop primeiro; mobile em @media (max-width: 800px). */
.faq {
  position: relative;
  min-height: 1049px;
  padding: 116px 0 40px;
  background: #fff var(--faq-background-image) 50% 50% / cover no-repeat;
}
/* faixa branca arredondada no topo (continuação da seção anterior) — decoração */
.faq::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 43px;
  border-radius: 0 0 45px 45px;
  background: var(--color-white);
}
.faq .faq__inner { position: relative; display: flex; flex-direction: column; align-items: center; }

.faq .faq__title {
  width: 703px;
  max-width: 100%;
  margin-inline: auto;
  font-family: var(--font-family-kanit); /* fontes da FAQ iguais à publicada: título Kanit 400, perguntas/respostas Open Sans */
  font-size: 53px;
  line-height: 1;
  font-weight: 400;
  text-align: center;
  color: var(--color-white);
}
.faq .faq__title::after {
  content: "";
  display: block;
  width: 484px;
  max-width: 100%;
  margin: 24.9px auto 0;
  border-bottom: 1px solid var(--color-white);
}

.faq .faq__list { width: 960px; max-width: calc(100vw - 32px); margin: 33.8px 0 0; }
.faq .faq__item {
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-white);
  font-family: var(--font-family-alt);
  font-size: 16px;
}
/* duração da abertura/fechamento (accordion original: 0.22s em musc/nutri, 0.4s em fito) */
.faq { --faq-transition-duration: 0.22s; }
.faq--fito { --faq-transition-duration: 0.4s; }
.faq .faq__item + .faq__item { margin-top: 10px; }
.faq .faq__heading { margin: 0; font: inherit; }
.faq .faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px;
  font-family: var(--font-family-alt);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  text-align: left;
  color: var(--color-faq-question);
  transition: color 0.18s;
}
.faq .faq__q[aria-expanded="true"] { color: var(--color-black); }
.faq .faq__q > span { flex: 0 0 calc(100% - 21.12px); min-width: 0; }
.faq .faq__q::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: -4px 4px 0 0;
  border-right: 2px solid var(--color-black);
  border-bottom: 2px solid var(--color-black);
  transform: rotate(45deg);
  transition: transform 0.25s ease, margin-top 0.25s ease;
}
.faq .faq__q[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(-135deg); }

/* padding fica no filho para o painel poder animar a altura até 0 */
.faq .faq__a { overflow: hidden; font-size: 13.76px; line-height: 1.5; color: var(--color-black); transition: height var(--faq-transition-duration) ease; font-weight: 400; }
.faq .faq__a > div { padding: 0 12px 12px; }
@media (prefers-reduced-motion: reduce) {
  .faq .faq__q, .faq .faq__q::after, .faq .faq__a { transition: none; }
}

/* ---- musc / nutri (desktop): lista da FAQ mais baixa ---- */
.faq--musc .faq__list { margin-top: 36.8px; }
.faq--nutri .faq__list { margin-top: 53.8px; }

@media (max-width: 800px) {
  .faq { min-height: 1015.94px; padding: 56px 0 40px; }
  .faq .faq__inner { width: min(100%, 360px); padding-inline: 0; }
  .faq .faq__title { width: 100%; font-size: min(27px, 7vw); }
  .faq .faq__title::after { width: 236px; margin-top: 19px; }
  .faq .faq__list { width: 100%; max-width: 100%; margin-top: 22.7px; }

  /* ---- musc / nutri (mobile): sem a faixa branca (o valor, com canto arredondado, sobrepõe a FAQ) ---- */
  .faq--musc::before,
  .faq--nutri::before { display: none; }
  .faq--musc,
  .faq--nutri { min-height: 0; }

  .faq--musc { padding-top: 88px; }
  .faq--musc .faq__title::after { width: 220px; margin-top: 20px; }
  .faq--musc .faq__list { margin-top: 31px; }
  .faq--musc .faq__q { min-height: 50px; padding: 12px 14px; }
  .faq--musc .faq__q > span { flex-basis: calc(100% - 28px); }

  .faq--nutri { min-height: 1146px; padding-top: 90px; }
  .faq--nutri .faq__title::after { margin-top: 14px; }
  .faq--nutri .faq__list { margin-top: 27px; }
}

/* telas estreitas (até 430px): lista com 16px de respiro lateral (sem efeito >= 392px). */
@media (max-width: 430px) {
  .faq .faq__inner { width: min(100% - 32px, 360px); }
}

/* captura 11-footer — <footer class="site-footer"> (fora do <main>). Dono: Task 8.
   Seletores sempre começando por .site-footer. Desktop primeiro; mobile em @media (max-width: 800px). */
.site-footer { font-family: var(--font-family-kanit); font-weight: 400; min-height: 185.375px; background: var(--color-footer-background); color: var(--color-white); }
.site-footer .site-footer__inner {
  display: flex;
  align-items: flex-start;
  max-width: 960px;
  padding: 50.7px 0 0;
}

.site-footer .site-footer__logos { display: flex; align-items: flex-start; margin: 14.2px 0 0 18.9px; }
.site-footer .site-footer__logo--pos { width: 99px; height: 57px; }
.site-footer .site-footer__logo--faculdade { width: 261px; height: 57px; }
.site-footer .site-footer__sep { flex: none; width: 2px; height: 71px; background: var(--color-white); }
.site-footer .site-footer__logos .site-footer__sep { margin: -6.6px 0 0 24.1px; }
.site-footer .site-footer__logo--faculdade { margin-left: 25px; }
.site-footer .site-footer__logos .site-footer__sep--logos { margin-left: 25px; }

.site-footer .site-footer__address {
  width: 253px;
  margin-left: 25px;
  font-style: normal;
  font-size: 12px;
  line-height: 16.8px;
  text-align: left;
}
.site-footer .site-footer__line { display: block; }

.site-footer .site-footer__contact {
  display: grid;
  grid-template-columns: 2px 30.3px 155px;
  grid-template-rows: 19.25px 23px;
  margin: 22.6px 0 0 19.6px;
}
.site-footer .site-footer__sep--contact { grid-column: 1; grid-row: 1 / 3; align-self: start; margin-top: -16.2px; }
.site-footer .site-footer__phone {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 7.2px;
  font-size: 12px;
  line-height: 16.8px;
}
.site-footer .site-footer__phone-icon { width: 19.25px; height: 19.25px; }
.site-footer .site-footer__phone > span { margin-left: 11.5px; }
.site-footer .site-footer__privacy {
  grid-column: 3;
  grid-row: 2;
  align-self: start;
  margin-top: 1.2px;
  font-family: var(--font-family-alt);
  font-size: 12px;
  line-height: 23px;
  text-align: center;
  text-decoration: none;
  color: var(--color-link);
}

@media (max-width: 800px) {
  .site-footer { min-height: 312.891px; }
  .site-footer .site-footer__inner { flex-direction: column; align-items: center; width: min(100%, 360px); padding: 39px 0 34px; }
  .site-footer .site-footer__logos { width: 100%; height: 49.8px; margin: 0; }
  .site-footer .site-footer__logo--pos { width: 86.5px; height: 49.8px; }
  .site-footer .site-footer__logo--faculdade { width: 228.1px; height: 49.8px; margin-left: 25.94px; }
  .site-footer .site-footer__logos .site-footer__sep { height: 62px; margin: -5.2px 0 0 17.5px; }
  .site-footer .site-footer__logos .site-footer__sep--logos { display: none; }
  .site-footer .site-footer__address { width: 248px; margin: 31.8px 0 0; text-align: center; }
  .site-footer .site-footer__contact {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 22px 0 0;
    padding: 24px 0 0 59.1px;
    border-top: 2px solid var(--color-white);
  }
  .site-footer .site-footer__phone { order: 1; margin-left: 0; }
  .site-footer .site-footer__phone > span { margin-left: 10.7px; }
  .site-footer .site-footer__sep--contact { order: 2; height: 25px; margin: 0 17px 0 10px; }
  .site-footer .site-footer__privacy { order: 3; margin-top: 0; line-height: 1; }
}

/* telas estreitas (até 430px): os logos (360px somados) encolhem juntos para caber, e a linha de
   contato perde o recuo à esquerda só o necessário (telefone não quebra). Sem efeito >= 392px. */
@media (max-width: 430px) {
  .site-footer .site-footer__inner { width: min(100% - 32px, 360px); }
  .site-footer .site-footer__logo { flex: 0 1 auto; min-width: 0; object-fit: contain; }
  .site-footer .site-footer__contact { padding-left: clamp(0px, 100% - 301px, 59.1px); }
  .site-footer .site-footer__phone { white-space: nowrap; }
}

/* Banner Pré-Black */
#ug-pre-black-banner {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 0;
}

#ug-pre-black-banner > img {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1920 / 200;
  margin: 0;
  padding: 0;
  border: 0;
}

@media (max-width: 767px) {
  #ug-pre-black-banner > img {
    aspect-ratio: 430 / 240;
  }
}