/*!
 * Diplomado Fórmula Correctiva — página de venda
 * assets/css/style.css
 *
 * NOMES DAS CLASSES — padrão BEM
 *
 *     bloco              .hero            a seção / o componente
 *     bloco__elemento    .hero__title     uma peça de dentro dele
 *     bloco--modificador .btn--primary    uma variação do bloco
 *     is-estado          .is-active       estado, ligado/desligado pelo JS
 *     u-utilitario       .u-hidden        utilitário solto, sem semântica
 *
 * COMO O ARQUIVO É ORGANIZADO
 *
 * 1. BASE — reset, tipografia e os componentes globais (.container,
 *    .row, .col, .btn, .form, .field, .carousel). Valem para a página
 *    inteira, então ficam FORA de qualquer aninhamento.
 *
 * 2. COMPARTILHADO — classes usadas em MAIS DE UMA seção. Também ficam
 *    no topo: aninhá-las dentro de uma seção as apagaria de todas as
 *    outras onde são usadas.
 *
 * 3. AS 16 SEÇÕES — cada uma é um bloco FECHADO, aninhado dentro do
 *    seletor da própria seção, na mesma ordem do index.html:
 *
 *        .topics {                       ← a seção
 *          background-color: #fff;       ← o estilo dela
 *
 *          & .topics__container { … }    ← tudo que vive dentro dela
 *          & .topics__card { … }
 *        }
 *
 *    O "&" é o aninhamento nativo do CSS: `& .topics__card` dentro de
 *    `.topics` significa `.topics .topics__card`. Nada de pré-
 *    processador, nada de build — o navegador entende direto.
 *
 * 4. RESPONSIVO — a @media de cada regra vem DENTRO da própria regra,
 *    logo depois do CSS de desktop, sempre nesta ordem:
 *        991px (tablet) → 767px (celular deitado) → 479px (celular)
 *    Para mudar como algo se comporta no celular, não é preciso rolar
 *    até o fim do arquivo: está dentro da própria classe.
 *
 * REQUISITO: aninhamento nativo de CSS — Chrome 112+, Safari 16.5+,
 * Firefox 117+ (todos de 2023). Navegador mais antigo que isso ignora
 * as regras aninhadas.
 */

/* ======================================================================
   1 · BASE — CSS global (fora do aninhamento)
   ====================================================================== */

/* ---- Normalize ----------------------------------------------------- */

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box;
  padding: 0;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  height: auto;
}

input[type='search'] {
  -webkit-appearance: none;
}

input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/* ---- Ícones (fonte embutida em base64 — setas do carrossel) -------- */

@font-face {
  font-family: 'webflow-icons';
  src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.icon--chevron-left,
.icon--chevron-right {
  font-family: 'webflow-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon--chevron-right:before {
  content: "\e600";
}

.icon--chevron-left:before {
  content: "\e601";
}

/* ---- Reset base ---------------------------------------------------- */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}

img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}

html.is-touch * {
  background-attachment: scroll !important;
}

/* ---- Utilitários (u-*) --------------------------------------------- */

.u-block {
  display: block;
}

.u-inline-block {
  max-width: 100%;
  display: inline-block;
}

.u-clearfix:before,
.u-clearfix:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}

.u-clearfix:after {
  clear: both;
}

.u-hidden {
  display: none;
}

.btn {
  display: inline-block;
  padding: 9px 15px;
  background-color: #3898EC;
  color: white;
  border: 0;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}

input.btn {
  -webkit-appearance: button;
}

html[data-w-dynpage] [data-w-cloak] {
  color: transparent !important;
}

/* ---- Botões (.btn e suas variantes) -------------------------------- */

button,
[type='button'],
[type='reset'] {
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}

.btn--primary {
  color: #191919;
  background-image: linear-gradient(90deg, #7fd111, #aeec5b 50%, #7fd111);
  border-radius: 50px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 398px;
  height: 64px;
  font-size: 18px;
  font-weight: 700;
  display: flex;

  @media (max-width: 479px) {
    /* celular */
    text-align: center;
    width: 340px;
    font-size: 16px;
  }
}

.btn--gold {
  color: #191919;
  background-image: linear-gradient(90deg, #7fd111, #aeec5b 50%, #7fd111);
  border-radius: 50px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 381px;
  height: 64px;
  margin: 8px;
  font-size: 18px;
  font-weight: 700;
  display: flex;

  @media (max-width: 479px) {
    /* celular */
    width: 340px;
  }
}

.btn--wide {
  color: #4a0303;
  text-transform: none;
  background-image: linear-gradient(121deg, #e5aa50, #7f5e2c);
  border-radius: 19px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 78px;
  margin-top: 27px;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  display: flex;

  @media (max-width: 479px) {
    /* celular */
    text-align: center;
    width: 320px;
    font-size: 17px;
  }
}

.btn--block {
  color: #191919;
  background-image: linear-gradient(90deg, #7fd111, #aeec5b 50%, #7fd111);
  border-radius: 50px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 510px;
  height: 64px;
  font-size: 18px;
  font-weight: 700;
  line-height: 97.5%;
  display: flex;

  @media (max-width: 479px) {
    /* celular */
    text-align: center;
    width: 340px;
  }
}

/* ---- Tipografia ---------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  margin-bottom: 10px;
}

h1 {
  font-size: 38px;
  line-height: 44px;
  margin-top: 20px;
}

h2 {
  font-size: 32px;
  line-height: 36px;
  margin-top: 20px;
}

h3 {
  font-size: 24px;
  line-height: 30px;
  margin-top: 20px;
}

h4 {
  font-size: 18px;
  line-height: 24px;
  margin-top: 10px;
}

h5 {
  font-size: 14px;
  line-height: 20px;
  margin-top: 10px;
}

h6 {
  font-size: 12px;
  line-height: 18px;
  margin-top: 10px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

blockquote {
  margin: 0 0 10px 0;
  padding: 10px 20px;
  border-left: 5px solid #E2E2E2;
  font-size: 18px;
  line-height: 22px;
}

figure {
  margin: 0;
  margin-bottom: 10px;
}

figcaption {
  margin-top: 5px;
  text-align: center;
}

ul,
ol {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 40px;
}

.u-list-plain {
  padding-left: 0;
  list-style: none;
}

.u-embed:before,
.u-embed:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}

.u-embed:after {
  clear: both;
}

.u-video {
  width: 100%;
  position: relative;
  padding: 0;
}

.u-video iframe,
.u-video object,
.u-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ---- Formulário (.form, .field) ------------------------------------ */

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

.form {
  margin: 0 0 15px;
}

.form__success {
  display: none;
  padding: 20px;
  text-align: center;
  background-color: #dddddd;
}

.form__error {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffdede;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

/* As regras de <input> que vinham do Webflow (.w-input / .w-select) foram
   removidas daqui: quem estiliza os campos agora é .field__input e
   .field__ddi, logo abaixo. Elas colidiam com .field, que nesta página é
   o CONTÊINER de cada campo — a div do wrapper ganhava fundo branco,
   borda cinza e 38px de altura, e era isso que quebrava o popup. */

.form__label {
  display: inline-block;
  cursor: pointer;
  font-weight: normal;
  margin-bottom: 0px;
}

.radio {
  display: block;
  margin-bottom: 5px;
  padding-left: 20px;
}

.radio:before,
.radio:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}

.radio:after {
  clear: both;
}

.radio__input {
  margin: 4px 0 0;
  line-height: normal;
  float: left;
  margin-left: -20px;
}

.radio__input {
  margin-top: 3px;
}

/* ---- Grid (.container, .row, .col) --------------------------------- */

.container--grid {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;

  @media (max-width: 991px) {
    /* tablet */
    max-width: 728px;
  }

  @media (max-width: 479px) {
    /* celular */
    max-width: none;
  }
}

.container--grid:before,
.container--grid:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}

.container--grid:after {
  clear: both;
}

.container--grid .row {
  margin-left: -10px;
  margin-right: -10px;
}

.row:before,
.row:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}

.row:after {
  clear: both;
}

.row .row {
  margin-left: 0;
  margin-right: 0;
}

.col {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
}

.col .col {
  padding-left: 0;
  padding-right: 0;
}

.col--1 {
  width: 8.33333333%;
}

.col--2 {
  width: 16.66666667%;
}

.col--3 {
  width: 25%;
}

.col--4 {
  width: 33.33333333%;
}

.col--5 {
  width: 41.66666667%;
}

.col--6 {
  width: 50%;
}

.col--7 {
  width: 58.33333333%;
}

.col--8 {
  width: 66.66666667%;
}

.col--9 {
  width: 75%;
}

.col--10 {
  width: 83.33333333%;
}

.col--11 {
  width: 91.66666667%;
}

.col--12 {
  width: 100%;
}

/* ATENÇÃO À ORDEM: este bloco tem de vir DEPOIS de todas as .col--N.
   As duas regras têm a mesma especificidade (0,1,0), então quem ganha é
   quem vem por último. Com ele antes, o .col--6 continuava valendo 50%
   no celular e as colunas nunca empilhavam — foi o que quebrou a seção
   da Rayane e o rodapé. No CSS original do Webflow este bloco ficava no
   fim do arquivo, e é essa ordem que se preserva aqui. */
@media (max-width: 767px) {   /* tablet pequeno / celular deitado */
  .col {
    width: 100%;
    left: auto;
    right: auto;
  }
}

.u-hidden-desktop {
  display: none !important;

  @media (max-width: 991px) {
    /* tablet */
    display: inherit !important;
  }

  @media (max-width: 767px) {
    /* tablet pequeno / celular deitado */
    display: inherit !important;
  }

  @media (max-width: 479px) {
    /* celular */
    display: inherit !important;
  }
}

.u-hidden-md {
  @media (max-width: 991px) {
    /* tablet */
    display: none !important;
  }

  @media (max-width: 767px) {
    /* tablet pequeno / celular deitado */
    display: inherit !important;
  }

  @media (max-width: 479px) {
    /* celular */
    display: inherit !important;
  }
}

.col-md--1 {
  @media (max-width: 991px) {
    /* tablet */
    width: 8.33333333%;
  }
}

.col-md--2 {
  @media (max-width: 991px) {
    /* tablet */
    width: 16.66666667%;
  }
}

.col-md--3 {
  @media (max-width: 991px) {
    /* tablet */
    width: 25%;
  }
}

.col-md--4 {
  @media (max-width: 991px) {
    /* tablet */
    width: 33.33333333%;
  }
}

.col-md--5 {
  @media (max-width: 991px) {
    /* tablet */
    width: 41.66666667%;
  }
}

.col-md--6 {
  @media (max-width: 991px) {
    /* tablet */
    width: 50%;
  }
}

.col-md--7 {
  @media (max-width: 991px) {
    /* tablet */
    width: 58.33333333%;
  }
}

.col-md--8 {
  @media (max-width: 991px) {
    /* tablet */
    width: 66.66666667%;
  }
}

.col-md--9 {
  @media (max-width: 991px) {
    /* tablet */
    width: 75%;
  }
}

.col-md--10 {
  @media (max-width: 991px) {
    /* tablet */
    width: 83.33333333%;
  }
}

.col-md--11 {
  @media (max-width: 991px) {
    /* tablet */
    width: 91.66666667%;
  }
}

.col-md--12 {
  @media (max-width: 991px) {
    /* tablet */
    width: 100%;
  }
}

.col--stack {
  @media (max-width: 991px) {
    /* tablet */
    width: 100%;
    left: auto;
    right: auto;
  }
}

.u-hidden-sm {
  @media (max-width: 767px) {
    /* tablet pequeno / celular deitado */
    display: none !important;
  }

  @media (max-width: 479px) {
    /* celular */
    display: inherit !important;
  }
}

.row,
.container--grid .row {
  @media (max-width: 767px) {
    /* tablet pequeno / celular deitado */
    margin-left: 0;
    margin-right: 0;
  }
}

.col-sm--1 {
  @media (max-width: 767px) {
    /* tablet pequeno / celular deitado */
    width: 8.33333333%;
  }
}

.col-sm--2 {
  @media (max-width: 767px) {
    /* tablet pequeno / celular deitado */
    width: 16.66666667%;
  }
}

.col-sm--3 {
  @media (max-width: 767px) {
    /* tablet pequeno / celular deitado */
    width: 25%;
  }
}

.col-sm--4 {
  @media (max-width: 767px) {
    /* tablet pequeno / celular deitado */
    width: 33.33333333%;
  }
}

.col-sm--5 {
  @media (max-width: 767px) {
    /* tablet pequeno / celular deitado */
    width: 41.66666667%;
  }
}

.col-sm--6 {
  @media (max-width: 767px) {
    /* tablet pequeno / celular deitado */
    width: 50%;
  }
}

.col-sm--7 {
  @media (max-width: 767px) {
    /* tablet pequeno / celular deitado */
    width: 58.33333333%;
  }
}

.col-sm--8 {
  @media (max-width: 767px) {
    /* tablet pequeno / celular deitado */
    width: 66.66666667%;
  }
}

.col-sm--9 {
  @media (max-width: 767px) {
    /* tablet pequeno / celular deitado */
    width: 75%;
  }
}

.col-sm--10 {
  @media (max-width: 767px) {
    /* tablet pequeno / celular deitado */
    width: 83.33333333%;
  }
}

.col-sm--11 {
  @media (max-width: 767px) {
    /* tablet pequeno / celular deitado */
    width: 91.66666667%;
  }
}

.col-sm--12 {
  @media (max-width: 767px) {
    /* tablet pequeno / celular deitado */
    width: 100%;
  }
}

.u-hidden-xs {
  @media (max-width: 479px) {
    /* celular */
    display: none !important;
  }
}

.col-xs--1 {
  @media (max-width: 479px) {
    /* celular */
    width: 8.33333333%;
  }
}

.col-xs--2 {
  @media (max-width: 479px) {
    /* celular */
    width: 16.66666667%;
  }
}

.col-xs--3 {
  @media (max-width: 479px) {
    /* celular */
    width: 25%;
  }
}

.col-xs--4 {
  @media (max-width: 479px) {
    /* celular */
    width: 33.33333333%;
  }
}

.col-xs--5 {
  @media (max-width: 479px) {
    /* celular */
    width: 41.66666667%;
  }
}

.col-xs--6 {
  @media (max-width: 479px) {
    /* celular */
    width: 50%;
  }
}

.col-xs--7 {
  @media (max-width: 479px) {
    /* celular */
    width: 58.33333333%;
  }
}

.col-xs--8 {
  @media (max-width: 479px) {
    /* celular */
    width: 66.66666667%;
  }
}

.col-xs--9 {
  @media (max-width: 479px) {
    /* celular */
    width: 75%;
  }
}

.col-xs--10 {
  @media (max-width: 479px) {
    /* celular */
    width: 83.33333333%;
  }
}

.col-xs--11 {
  @media (max-width: 479px) {
    /* celular */
    width: 91.66666667%;
  }
}

.col-xs--12 {
  @media (max-width: 479px) {
    /* celular */
    width: 100%;
  }
}

/* ---- Carrossel (.carousel) ----------------------------------------- */

.carousel {
  position: relative;
  height: 300px;
  text-align: center;
  background: #dddddd;
  clear: both;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
}

.carousel__viewport {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 1;
  left: 0;
  right: 0;
  height: 100%;
  white-space: nowrap;
}

.carousel__slide {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 100%;
  white-space: normal;
  text-align: left;
}

.carousel__dots {
  position: absolute;
  z-index: 2;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  padding-top: 10px;
  height: 40px;
  text-align: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
}

.carousel__dots.carousel__dots--round>div {
  border-radius: 100%;
}

.carousel__dots.carousel__dots--shadow>div {
  box-shadow: 0 0 3px rgba(51, 51, 51, 0.4);
}

.carousel__dots--invert {
  color: #fff;
}

.carousel__dots--invert>div {
  background-color: rgba(34, 34, 34, 0.4);
}

.carousel__dots--invert>div.is-active {
  background-color: #222;
}

.carousel__dot {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  margin: 0 3px 0.5em;
  transition: background-color 100ms, color 100ms;
}

.carousel__dot.is-active {
  background-color: #fff;
}

.carousel__dot:focus {
  outline: none;
  box-shadow: 0px 0px 0px 2px #fff;
}

.carousel__dot:focus.is-active {
  box-shadow: none;
}

.carousel__arrow--prev,
.carousel__arrow--next {
  position: absolute;
  width: 80px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  cursor: pointer;
  overflow: hidden;
  color: white;
  font-size: 40px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
}

.carousel__arrow--prev .icon--chevron-left,
.carousel__arrow--next .icon--chevron-left,
.carousel__arrow--prev .icon--chevron-right,
.carousel__arrow--next .icon--chevron-right {
  position: absolute;
}

.carousel__arrow--prev:focus,
.carousel__arrow--next:focus {
  outline: 0;
}

.carousel__arrow--prev {
  z-index: 3;
  right: auto;
}

.carousel__arrow--next {
  z-index: 4;
  left: auto;
}

.icon--chevron-left,
.icon--chevron-right {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 1em;
  height: 1em;
}

.u-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.carousel__slide--force-show {
  display: block !important;
}

/* ---- Rede de segurança do responsivo ------------------------------- */
/* O export do Webflow só escreveu regras de celular no breakpoint de
   479px. Entre 480 e 767px NADA se aplicava, e as larguras fixas do
   desktop (573px de card, 476px de parágrafo, 430px de foto) estouravam
   a tela. Este bloco faz cada peça encolher até caber.

   Está no fim do BASE, com !important só onde há um "max-width: none"
   herdado do Webflow para vencer. Não muda nada no desktop: lá a largura
   fixa já cabe e o max-width nunca entra em ação. */
@media (max-width: 767.98px) {
  main section,
  main section div,
  main section p,
  main section h1,
  main section h2,
  main section h3 {
    max-width: 100%;
  }

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

  /* Os slides do carrossel são a exceção: eles PRECISAM medir 100% da
     pista, e a imagem dentro deles tem tamanho próprio. */
  .carousel__slide img {
    max-width: 100% !important;
  }
}

/* Nenhuma tela deve rolar na horizontal. Se algo escapar da rede acima,
   isto impede a barra de rolagem lateral — o sintoma mais visível de
   layout quebrado no celular.

   CUIDADO com o que se escreve aqui. Antes estava "html, body { overflow-x:
   hidden }" e isso criava uma SEGUNDA barra de rolagem vertical dentro da
   página, ao lado da barra do navegador. O motivo:

     1. o overflow do <html> é sempre transferido para o viewport — é ele
        que desenha a barra normal do navegador — e o próprio <html> passa
        a se comportar como "visible";
     2. essa transferência só acontece a partir do <body> quando o <html>
        é "visible". Como aqui não era, o overflow-x do <body> passou a
        valer para o <body> em si;
     3. pela especificação, quando um eixo não é "visible", o "visible" do
        outro eixo vira "auto". Ou seja: overflow-x:hidden no <body> ligou
        um overflow-y:auto invisível — e o <body> virou uma caixa rolável,
        com barra própria.

   A correção é deixar o corte horizontal só no <html> (que propaga para o
   viewport) e usar "clip" no <body>. "clip" corta igual ao "hidden", mas
   não é rolável, então NÃO contamina o eixo vertical: o overflow-y do
   <body> continua "visible" e nenhuma segunda barra aparece. */
html {
  overflow-x: hidden;
}

body {
  overflow-x: clip;
}

/* ---- Aparecer ao rolar e pintura diferida -------------------------- */
/* Duas camadas independentes, de dois módulos diferentes:

   1) lazy-sections.js — desempenho. Põe .is-deferred nas <section>
      abaixo do hero: o navegador pula o layout e a pintura delas
      enquanto estão fora da tela. O hero nunca é tocado (é o LCP).
      A mesma classe também as anima com .will-reveal → .is-revealed.

   2) animations.js — efeito. Revela elementos [data-reveal] (cards,
      itens de lista) quando entram na tela, marcando-os com .is-visible.

   Por que NÃO se usa display:none nas seções de baixo: sem altura não há
   o que rolar, o leitor de tela perde o conteúdo e o Google o desvaloriza.
   Com opacity/transform o espaço já está reservado e o CLS segue em 0. */

.is-deferred {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;   /* altura presumida antes de pintar */
}

.will-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.will-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Quem pediu menos movimento no sistema vê tudo parado e já visível.
   Sem esta regra, um visitante com "reduzir movimento" ligado poderia
   ficar com a página inteira em opacity:0 se o IntersectionObserver
   falhasse. */
@media (prefers-reduced-motion: reduce) {
  .will-reveal,
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Variáveis e utilitários restantes ----------------------------- */

:root {
  --combine-library-grey-600: #5f6570;
  --combine-library-grey-800: #1f2c3d;
  --flowstica-webflow-library--black: #010b15;
  --flowstica-webflow-library--white-smoke: #f7f7f7;
  --combine-library-grey-050: #f2f3f7;
  --combine-library-white: white;
}

.container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;

  @media (max-width: 991px) {
    /* tablet */
    max-width: 728px;
  }

  @media (max-width: 767px) {
    /* tablet pequeno / celular deitado */
    max-width: none;
  }
}

.page {
  background-color: #461312;
  font-family: Montserrat, sans-serif;
}

.cta-pill {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  background-color: #c7ff7c24;
  border-radius: 50px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 416px;
  height: 80px;
  margin-left: 0;
  display: flex;

  @media (max-width: 479px) {
    /* celular */
    width: 360px;
  }
}

.carousel__icon--next,
.carousel__icon--prev {
  color: #00000080;
}

.carousel__icon--next {
  @media (max-width: 479px) {
    /* celular */
    margin-right: 0;
  }
}

.carousel__icon--prev {
  @media (max-width: 479px) {
    /* celular */
    margin-left: 0;
  }
}

/* ---- Pista do carrossel + botões ---------------------------------- */

/* A .carousel__track está no HTML e é ela que se desloca com
   translateX(); o .carousel__viewport fica parado fazendo o recorte
   (overflow:hidden). Quem move é o carousel.js. */
.carousel__viewport > .carousel__track {
  display: flex;
  height: 100%;
  transition: transform .5s ease;
  will-change: transform;
}

.carousel__viewport > .carousel__track > .carousel__slide {
  flex: 0 0 100%;
}

/* As setas e os pontinhos são <button> de verdade (foco e teclado de
   graça), então precisam perder a aparência nativa de botão. */
.carousel__arrow--prev,
.carousel__arrow--next {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.carousel__dot {
  border: 0;
  padding: 0;
  cursor: pointer;
}

.carousel__dot:focus-visible,
.carousel__arrow--prev:focus-visible,
.carousel__arrow--next:focus-visible {
  outline: 2px solid #e4ae5f;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .carousel__viewport > .carousel__track {
    transition: none;
  }
}

/* ======================================================================
   3 · AS 16 SEÇÕES DA PÁGINA (na ordem do index.html)
   ====================================================================== */

/* ======================================================================
   03 · HERO / ABERTURA   (.hero)
   ====================================================================== */

.hero {
  background-image: url("../images/Group-2522.webp");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 1920px;
  border-bottom: 4px solid #ffc76c;

  @media (max-width: 479px) {
    /* celular */
    background-color: #2f0303;
    background-image: url("../images/bg-1_1.webp");
    background-position: 50% 100%;
    background-size: 480px;
  }

  & .hero__container {
    max-width: 1120px;

    @media (max-width: 479px) {
      /* celular */
      flex-flow: column;
      justify-content: flex-start;
      align-items: center;
      padding-left: 0;
      padding-right: 0;
      display: flex;
    }
  }

  & .hero__inner {
    width: 469px;
    margin-top: 60px;
    margin-bottom: 70px;

    @media (max-width: 479px) {
      /* celular */
      flex-flow: column;
      justify-content: flex-start;
      align-items: center;
      width: 360px;
      margin-top: 18px;
      margin-bottom: 460px;
      padding-left: 10px;
      padding-right: 10px;
      display: flex;
    }
  }

  & .hero__logo {
    width: 200px;
    max-width: none;
    height: auto;
    margin-top: 0;

    @media (max-width: 479px) {
      /* celular */
      width: 164px;
      max-width: none;
      height: 80.2656px;
      margin-top: 0;
    }
  }

  & .hero__text {
    color: #fff;
    margin-top: 20px;
    padding-right: 0;
    font-size: 26.49px;
    line-height: 39.9px;

    @media (max-width: 479px) {
      /* celular */
      color: #fff;
      text-align: center;
      width: 360px;
      padding-right: 0;
      font-family: Montserrat, sans-serif;
      font-size: 20px;
      line-height: 27.7px;
    }
  }

  & .hero__text-strong {
    color: #ffc76c;
  }

  & .hero__cta {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    margin-top: 10px;
    margin-bottom: 18px;
    display: flex;
  }

  & .hero__note {
    color: #ffffff94;
    text-align: justify;
    width: 424px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;

    @media (max-width: 479px) {
      /* celular */
      width: 340px;
      font-size: 11.05px;
      line-height: 14.7px;
    }
  }

    & .hero__note-link {
      color: #e4ae5f;
      text-decoration: underline;
    }

}

/* ======================================================================
   04 · O QUE VOCÊ VAI APRENDER   (.topics)
   ====================================================================== */

.topics {
  /* O degradê radial faz o vinho clarear no centro, atrás das cartas. */
  background-color: #4a0303;
  /* background-image: radial-gradient(circle at 50% 45%, #7a1414 0%, #4a0303 70%); */
  padding-top: 25px;
  padding-bottom: 8px;

  & .topics__container {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      width: 350px;
      padding-left: 0;
      padding-right: 0;
    }
  }

  & .topics__title {
    color: #fff;
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 28px;
    line-height: 100%;

    @media (max-width: 479px) {
      /* celular */
      text-align: center;
    }
  }

  & .topics__title-strong {
    color: #e8b25f;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* As quatro cartas: duas por fileira no desktop (flex-wrap quebra),
     UMA EMBAIXO DA OUTRA no celular. Sem carrossel — a leitura vertical
     é mais direta e ninguém precisa descobrir que dá para arrastar. */
  & .topics__grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    margin-top: 10px;
    margin-bottom: 8px;

    @media (max-width: 767.98px) {   /* celular */
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin-bottom: 34px;
    }
  }

    @media (max-width: 767.98px) {
      & .topics__card,
      & .topics__card--alt {
        width: 100%;
        max-width: 420px;
        height: auto;
        margin-left: 0;
        margin-right: 0;
      }
    }

  & .topics__card,
  & .topics__card--alt {
    outline-offset: 0px;
    background-color: #650a0a;
    border-radius: 10px;
    outline: 1px solid #ffffff26;
    flex-flow: column;
    justify-content: center;
    align-items: stretch;
    width: 383.81px;
    height: 257px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 10px 15px 15px;
    display: flex;
    margin-bottom: 10px;
  }

  & .topics__card {
    @media (max-width: 479px) {
      /* celular */
      width: 350px;
      margin-left: 0;
      margin-right: 0;
    }
  }

  & .topics__icon-wrap {
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
    padding-left: 10px;
    display: flex;
  }

  & .topics__icon {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    display: flex;
  }

  & .topics__icon-img--alt,
  & .topics__icon-img {
    width: 60px;
    height: 60px;
  }

  & .topics__body {
    margin-top: 10px;
    margin-left: 10px;
  }

  & .topics__card-title {
    color: #fff;
    /* color: #000; */
    font-size: 20px;
    font-weight: 700;
    line-height: 100%;
  }

  & .topics__card-text {
    color: #ffffffcf;
    /* color: #0009; */
    width: 333.81px;
    margin-top: 10px;
    font-size: 16px;

    @media (max-width: 479px) {
      /* celular */
      width: 313.81px;
    }
  }

  & .topics__card--alt {
    @media (max-width: 479px) {
      /* celular */
      width: 350px;
      margin-top: 10px;
      margin-left: 0;
      margin-right: 0;
    }
  }

  & .topics__icon-wrap--alt {
    justify-content: flex-start;
    align-items: center;
    margin-top: 39px;
    padding-left: 10px;
    display: flex;
  }

}

/* ======================================================================
   05 · FAIXA DECORATIVA   (.divider)
   ====================================================================== */

/* A faixa dourada corre da direita para a esquerda, em loop infinito.

   ANTES ERA IMAGEM, E APARECIA UM CORTE. A versão anterior repetia o
   faixa.svg com background-repeat e animava background-position de 0 até
   -1920px. Em teoria fecha; na prática não, porque a posição do fundo é
   resolvida em pixels do dispositivo. Num monitor com escala fracionária
   (125%, 150%) 1920px CSS não caem num número inteiro de pixels físicos,
   o ladrilho seguinte começa meio pixel adiante e sobra um fio da cor de
   trás — a emenda que aparecia depois de uns segundos de animação.

   AGORA É TEXTO. A pista tem quatro .divider__set idênticas e o que se
   anima é translateX de 0 a -25% da própria pista, ou seja, exatamente
   a largura de uma cópia. Como a porcentagem é medida sobre o elemento
   que se move, ela acompanha qualquer largura de fonte ou de tela: não
   há número mágico para errar e as cópias sempre coincidem. O transform
   também roda na GPU, sem repintar a faixa a cada quadro.

   Por que QUATRO cópias e não duas: ao deslocar uma, restam três para
   cobrir a tela. Só apareceria um vazio à direita num monitor mais largo
   que três cópias (~4000px) — o que não existe nesta largura de fonte.

   As cores e a fonte saíram do próprio faixa.svg: fundo #FFC76C e texto
   #4A0303, um só tom; o que muda entre as palavras é a espessura, que
   alterna forte/normal. */
@keyframes divider-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }   /* = uma .divider__set */
}

.divider {
  display: flex;
  align-items: center;
  height: 62px;
  background-color: #ffc76c;

  /* Recorta a pista, que é de propósito mais larga que a tela. Tem de
     ser "hidden" e nunca "auto": "auto" viraria barra de rolagem. */
  overflow: hidden;

  & .divider__track {
    display: flex;
    flex: none;          /* não encolhe para caber: precisa transbordar */
    width: max-content;
    animation: divider-scroll 30s linear infinite;
    will-change: transform;
  }

  & .divider__set {
    display: flex;
    flex: none;
  }

  & .divider__word {
    color: #4a0303;
    white-space: nowrap;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;

    /* O marcador vai em TODAS as palavras, inclusive na última de cada
       cópia: é ele que separa uma cópia da seguinte. */
    &::after {
      content: "•";
      margin: 0 .8em 0 .9em;
      font-weight: 700;
      letter-spacing: 0;
    }
  }

  & .divider__word--strong {
    font-weight: 700;
  }
}

/* Quem pediu menos movimento vê a faixa parada. */
@media (prefers-reduced-motion: reduce) {
  .divider .divider__track {
    animation: none;
  }
}

/* ======================================================================
   06 · 100% ONLINE E EM ESPANHOL   (.online)
   ====================================================================== */

.online {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;

  @media (max-width: 479px) {
    /* celular */
    padding-left: 10px;
    padding-right: 10px;
  }

  & .online__inner {
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    margin-bottom: 60px;
    display: flex;
  }

  & .online__icon {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  & .online__icon-img {
    width: 102px;
    height: 73px;

    @media (max-width: 479px) {
      /* celular */
      width: 102px;
      max-width: none;
      height: 73px;
    }
  }

  & .online__body {
    justify-content: center;
    align-items: center;
    width: 425.49px;
    height: 64px;
    margin-left: 20px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      width: auto;
    }
  }

  & .online__text {
    color: #fff;
    font-size: 25.94px;
    line-height: 25px;

    @media (max-width: 479px) {
      /* celular */
      font-size: 22px;
    }
  }

  & .online__text-strong {
    color: #cd924c;
    text-decoration: underline;
  }

  & .online__text-strong--alt {
    text-decoration: underline;
  }

}

/* ======================================================================
   07 · PARA QUEM É O DIPLOMADO   (.audience)
   ====================================================================== */

.audience {
  background-color: #fff;

  & .audience__container {
    max-width: 1040px;

    @media (max-width: 479px) {
      /* celular */
      width: 360px;
    }
  }

  & .audience__inner {
    flex-flow: row;
    justify-content: center;
    align-items: flex-start;
    margin-top: 60px;
    margin-bottom: 60px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      flex-flow: column-reverse;
      margin-top: 40px;
    }
  }

  & .audience__media {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      margin-right: 0;
    }
  }

  & .audience__img {
    width: 496.85px;
    max-width: none;
    height: 622.15px;

    @media (max-width: 479px) {
      /* celular */
      width: 360px;
      height: 448.875px;
      margin-right: 0;
    }
  }

  & .audience__body {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 490.29px;
    height: auto;
    margin-top: 45px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      width: auto;
      margin-top: 0;
      margin-bottom: 33px;
    }
  }

  & .audience__title {
    color: #4a0303;
    text-align: center;
    margin-bottom: 0;
    font-size: 28px;
    line-height: 35px;
  }

  & .audience__item {
    justify-content: center;
    align-items: flex-start;
    margin-top: 30px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      width: 350px;
    }
  }

  & .audience__bullet {
    width: 31.7813px;
    height: 30.6875px;

    @media (max-width: 479px) {
      /* celular */
      width: 33px;
      max-width: none;
      height: 33px;
    }
  }

  & .audience__item-body {
    width: 470.92px;
    margin-left: 5px;

    @media (max-width: 479px) {
      /* celular */
      width: auto;
    }
  }

  & .audience__item-text {
    color: #000;
    font-size: 19px;
    line-height: 25px;
  }

}

/* ======================================================================
   08 · FORMATO: TEÓRICO · LABORATORIAL · CLÍNICO   (.format)
   ====================================================================== */

.format {
  background-color: #360b09;
  border-bottom: 4px solid #ffc76c;

  & .format__container {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    max-width: 1100px;
    display: flex;
  }

  & .format__title-img {
    width: 348px;
    height: 190px;
    margin-top: 40px;

    @media (max-width: 479px) {
      /* celular */
      width: 318px;
      height: 173.609px;
    }
  }

  & .format__list {
    justify-content: center;
    align-items: flex-start;
    height: 471.15px;
    margin-top: -36px;
    margin-bottom: 110px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      flex-flow: column;
      height: auto;
      margin-bottom: 0;
    }
  }

  & .format__item {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      margin-bottom: 30px;
    }
  }

  & .format__badge {
    z-index: 1;
    background-image: linear-gradient(90deg, #8e1414, #8e1414 49% 73%, #771414 91%, #6e1414);
    border-radius: 120px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 132.72px;
    height: 132.72px;
    margin-bottom: -66px;
    display: flex;
    position: relative;
  }

  & .format__badge-icon {
    background-color: #fff;
    border-radius: 100px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 105.17px;
    height: 105.17px;
    display: flex;
  }

  & .format__badge-img {
    width: 54px;
    height: 53px;
  }

  & .format__body {
    background-image: url("../images/Group-2539.svg");
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: auto;
    width: 348.35px;
    height: 326.39px;
    margin-top: 0;
    margin-bottom: -66px;
    padding-left: 40px;
    padding-right: 40px;

    @media (max-width: 479px) {
      /* celular */
      margin-bottom: 0;
    }
  }

  & .format__label {
    color: #711414;
    margin-top: 81px;
    font-size: 18.21px;
    font-weight: 700;
  }

  & .format__text {
    color: #000;
    margin-top: 10px;
    font-size: 16.39px;
    line-height: 25.5px;
  }

  & .format__item--lab {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 66px;
    margin-bottom: 0;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      margin-top: 0;
      margin-bottom: 30px;
    }
  }

  & .format__badge--lab-a {
    z-index: 1;
    background-image: linear-gradient(90deg, #ffc261, #fdbf5e 49%, #f8b957 73%, #f0ad4a 91%, #efab48);
    border-radius: 120px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 132.72px;
    height: 132.72px;
    margin-top: 0;
    margin-bottom: 0;
    display: none;
    position: relative;

    @media (max-width: 479px) {
      /* celular */
      margin-bottom: -66px;
      display: flex;
    }
  }

  & .format__body--lab {
    background-image: url("../images/Group-2540.svg");
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: auto;
    width: 348.35px;
    height: 326.39px;
    margin-top: 0;
    margin-bottom: -66px;
    padding-left: 35px;
    padding-right: 35px;

    @media (max-width: 479px) {
      /* celular */
      margin-bottom: 0;
    }
  }

  & .format__label--lab {
    color: #f4b145;
    margin-top: 36px;
    font-size: 18.21px;
    font-weight: 700;

    @media (max-width: 479px) {
      /* celular */
      margin-top: 78px;
    }
  }

  & .format__text--lab {
    margin-top: 5px;
    font-size: 15px;
    line-height: 24px;
  }

  & .format__badge--lab-b {
    z-index: 1;
    background-image: linear-gradient(90deg, #ffc261, #fdbf5e 49%, #f8b957 73%, #f0ad4a 91%, #efab48);
    border-radius: 120px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 132.72px;
    height: 132.72px;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    position: relative;

    @media (max-width: 479px) {
      /* celular */
      display: none;
    }
  }

  & .format__badge--clinic {
    z-index: 1;
    background-image: linear-gradient(90deg, #e00202, #dd0202 49%, #c90202 73%, #b60202 91%, #9d0202);
    border-radius: 120px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 132.72px;
    height: 132.72px;
    margin-bottom: -66px;
    display: flex;
    position: relative;
  }

  & .format__badge-img--clinic {
    width: 53px;
    height: 54px;
  }

  & .format__body--clinic {
    background-image: url("../images/Group-2541.svg");
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: auto;
    width: 348.35px;
    height: 326.39px;
    margin-top: 0;
    margin-bottom: -66px;
    padding-left: 35px;
    padding-right: 35px;

    @media (max-width: 479px) {
      /* celular */
      margin-bottom: 0;
    }
  }

  & .format__label--clinic {
    color: #b00202;
    margin-top: 81px;
    font-size: 18.21px;
    font-weight: 700;
  }

  & .format__cta {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    margin-top: 10px;
    margin-bottom: 18px;
    display: none;

    @media (max-width: 479px) {
      /* celular */
      margin-bottom: 36px;
      display: flex;
    }
  }

}

/* ======================================================================
   09 · MÓDULOS (ACORDEÃO) + CERTIFICADO   (.modules)
   ====================================================================== */

.modules {
  background-image: url("../images/Rectangle-304-1.webp");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 1920px;
  border-bottom: 4px solid #ffc76c;

  @media (max-width: 479px) {
    /* celular */
    background-image: url("../images/bg_nov.webp");
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
  }

  & .modules__container {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      width: 360px;
    }
  }

  & .modules__title {
    text-transform: uppercase;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #ffc76c, #cc9f56 50%, #ffc76c);
    -webkit-background-clip: text;
    background-clip: text;
    width: 686.75px;
    margin-top: 78px;
    font-size: 125.18px;
    font-weight: 700;
    line-height: 100%;

    @media (max-width: 479px) {
      /* celular */
      width: auto;
      margin-top: 10px;
      font-size: 58px;
    }
  }

  & .modules__title-img {
    width: 686.75px;
    max-width: none;
    height: 343.516px;
    margin-top: -6px;

    @media (max-width: 479px) {
      /* celular */
      width: 360px;
      height: 180.063px;
    }
  }

  & .modules__cycle {
    width: 686.75px;
    margin-top: 20px;

    @media (max-width: 479px) {
      /* celular */
      width: 360px;
    }
  }

  & .modules__cycle-head {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-color: #4a030399;
    border: 1.21px solid #af30365e;
    border-radius: 93.3px;
    justify-content: center;
    align-items: center;
    width: 214.1px;
    height: 37.56px;
    display: flex;
  }

  & .modules__cycle-bullet {
    width: 27px;
    height: 27px;
  }

  & .modules__cycle-name {
    color: #fff;
    margin-left: 5px;
    font-size: 21.21px;
    line-height: 23.6px;
  }

  & .modules__accordion-wrap {
    margin-top: 12px;
    padding: 0 0%;

    @media (max-width: 991px) {
      /* tablet */
      padding-top: 5rem;
      padding-bottom: 5rem;
    }

    @media (max-width: 767px) {
      /* tablet pequeno / celular deitado */
      padding: 2rem 2%;
    }

    @media (max-width: 479px) {
      /* celular */
      padding: 0 0%;
    }
  }

  & .modules__accordion-inner {
    width: 100%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;

    @media (max-width: 479px) {
      /* celular */
      width: auto;
      max-width: 360px;
    }
  }

  & .accordion {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-direction: column;
    align-items: center;
    width: 686.75px;
    margin-left: auto;
    margin-right: auto;
    display: flex;

    @media (max-width: 991px) {
      /* tablet */
      width: 100%;
    }
  }

  & .accordion__item {
    border-bottom: 2px #010b151a;
    width: 686.75px;
    margin-bottom: 0;
    padding-bottom: 10px;

    @media (max-width: 479px) {
      /* celular */
      width: 340px;
      margin-bottom: 0;
      padding-bottom: 10px;
    }
  }

  & .accordion__head {
    grid-column-gap: 20px;
    grid-row-gap: 10px;
    cursor: pointer;
    border-bottom: 1px solid #ffe9c6;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    display: flex;
  }

  & .accordion__title {
    color: #fff;
    width: 572px;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Montserrat, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 25px;

    @media (max-width: 479px) {
      /* celular */
      width: 340px;
      height: auto;
      padding-right: 0;
      font-size: 16px;
    }
  }

  & .accordion__title-strong {
    color: #ffe9c6;
  }

  & .accordion__toggle {
    background-color: #ffe9c6;
    border-radius: 20px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      border-radius: 30px;
      width: 20px;
      height: 20px;
    }
  }

  & .accordion__icon {
    justify-content: center;
    align-items: center;
    width: 10px;
    height: 10px;
    display: flex;
    position: relative;
  }

  & .accordion__icon-bar {
    background-color: #4a0303;
    width: 10px;
    height: 2px;
  }

  & .accordion__icon-bar--v {
    background-color: #4a0303;
    width: 10px;
    height: 2px;
    position: absolute;
    inset: auto 0%;
    transform: rotate(90deg);
  }

  & .accordion__panel {
    padding-top: 10px;
    overflow: hidden;
  }

  & .accordion__list {
    color: #ffffff87;
    font-family: Montserrat, sans-serif;
    font-size: 17.48px;
  }

  & .modules__certificate {
    justify-content: center;
    align-items: center;
    margin-top: 51px;
    margin-bottom: 51px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      display: none;
    }
  }

  & .modules__certificate-body {
    width: 518px;
  }

  & .modules__certificate-title {
    color: #ffc76c;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: 700;
    line-height: 100%;
    text-decoration: underline;
  }

  & .modules__certificate-text {
    color: #fff;
    margin-top: 20px;
    font-size: 18px;
    line-height: 24px;
  }

  & .modules__certificate-img {
    margin-left: 20px;
  }

}

/* ======================================================================
   10 · INVESTIMENTO · OPORTUNIDADE · BÔNUS   (.pricing)
   ====================================================================== */

.pricing {
  background-color: #340b0a;
  background-image: url("../images/Frame-2557.webp");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 1920px;

  & .pricing__container {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    max-width: 1059.03px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      width: 360px;
    }
  }

  & .pricing__price {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 100px;
    display: flex;
    position: relative;      /* âncora das duas imagens decorativas */

    @media (max-width: 479px) {
      /* celular */
      margin-top: 40px;
      margin-bottom: 40px;
    }
  }

  & .pricing__deco {
    position: absolute;
    z-index: 4;
    pointer-events: none;    /* nunca roubam o clique do botão */
    height: auto;
  }

  & .pricing__deco--alicate {
    top: 65px;
    right: -140px;
    width: 220px;

    @media (max-width: 991px) {   /* tablet */
      top: 55px;
      right: -80px;
      width: 175px;
    }

    /* NO CELULAR O ALICATE VAI PARA BAIXO.
       Ancorado pelo topo (top: 70px) ele caía exatamente sobre o preço:
       o card estreita, o texto sobe, e os dois passam a disputar o mesmo
       lugar. Ancorando pelo RODAPÉ ele acompanha o fim do card, onde
       sempre há espaço à direita do "Pago 100% seguro" — e faz par com a
       dentadura, que já vive no canto de baixo à esquerda.

       O "top: auto" é obrigatório: sem ele o valor de 65px do desktop
       continuaria valendo e brigaria com o bottom. */
    @media (max-width: 767.98px) {   /* celular */
      top: auto;
      bottom: -32px;
      right: -20px;
      width: 100px;
      rotate: 42deg;
    }
  }

  & .pricing__deco--dentadura {
    bottom: -52px;
    left: -55px;
    width: 220px;

    @media (max-width: 991px) {   /* tablet */
      bottom: -40px;
      left: -25px;
      width: 180px;
    }

    @media (max-width: 767.98px) {   /* celular */
      bottom: -10px;
      left: -18px;
      width: 130px;
    }
  }

  /* A TARJA DO DESCONTO — substitui o parágrafo que ficava lá embaixo.
     Subiu para o topo do card de propósito: é a informação que faz o
     visitante ler o preço com outros olhos, e ela tem de chegar ANTES
     do número, não depois do botão.

     Some sozinha no lote cheio: o ui-precos.js a esconde quando a oferta
     não tem preço riscado — o mesmo sinal que apaga a linha "De:". */
  & .pricing__badge {
    flex-flow: column;
    align-items: center;
    width: 406px;
    max-width: 100%;
    margin-bottom: 20px;
    padding: 10px 16px;
    border-radius: 9px;
    background-color: #5c0d0d;
    outline: 1px solid #ffffff1f;
    color: #fff;
    text-align: center;
    line-height: 1.35;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      width: 100%;
      padding: 9px 12px;
    }
  }

  /* [hidden] tem de vencer o display:flex acima, senão a tarja
     apareceria também no lote cheio, onde não há desconto nenhum. */
  & .pricing__badge[hidden] {
    display: none;
  }

  & .pricing__badge-linha {
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;

    @media (max-width: 479px) {
      /* celular */
      font-size: 13px;
    }
  }

  & .pricing__badge-data {
    font-size: 14px;
    font-weight: 500;

    /* A data em dourado: é o pedaço que muda de um lançamento para o
       outro, e o que o visitante precisa reter. */
    & strong {
      color: #e8b25f;
      font-weight: 700;
    }

    @media (max-width: 479px) {
      /* celular */
      font-size: 12.5px;
    }
  }

  & .pricing__from {
    margin-bottom: 30px;
    color: #ffffffb8;
    font-size: 16px;

  & s {
      text-decoration-thickness: 1.5px;
    }
  }

  /* A ETIQUETA "INVERSIÓN". Fica POR CIMA da borda de cima do card: o
     margin-bottom negativo puxa o corpo para dentro dela, e o fundo
     opaco esconde o trecho de borda que passa atrás — é isso que produz
     o corte na linha dourada, sem precisar desenhar corte nenhum. */
  & .pricing__price-head {
    z-index: 3;
    text-align: center;
    background-color: #b58243;
    border-radius: 20px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 290px;
    height: 64px;
    margin-bottom: -32px;
    display: flex;
    position: relative;

    @media (max-width: 479px) {
      /* celular */
      background-color: #926734;
    }
  }

  & .pricing__price-label {
    color: #fff;
    text-transform: uppercase;
    font-size: 40px;
    font-weight: 700;
    line-height: 100%;

    @media (max-width: 479px) {
      /* celular */
      font-size: 34px;
    }
  }

  & .pricing__price-body {
    position: relative;
    z-index: 2;              /* o conteúdo fica na frente da decoração */
    border: 1px solid #cd924c;
    border-radius: 28px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    width: 560.76px;
    padding-top: 55px;
    padding-bottom: 24px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      background-image: none;
      border-style: none;
      width: auto;
    }
  }

  & .pricing__value {
    color: #fff;
    height: auto;
    font-size: 36px;
    line-height: 100%;
  }

  & .pricing__value-currency {
    color: #cd924c;
    font-size: 77.18px;
    font-weight: 700;
  }

  & .pricing__value-cents {
    color: #cd924c;
    font-size: 47.42px;
    font-weight: 700;
  }

  & .pricing__cash {
    color: #fff;
    margin-top: 12px;
    font-size: 20px;
  }

  & .pricing__amount {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  & .pricing__cta {
    text-align: center;
    background-color: #c7ff7c24;
    border-radius: 50px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: 80px;
    margin-top: 34px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      width: 360px;
    }
  }

  & .pricing__secure {
    justify-content: center;
    align-items: center;
    width: 200px;
    margin-top: 15px;
    margin-bottom: 0;
    margin-left: 0;
    display: flex;
  }

  & .pricing__secure-icon {
    width: 11px;
    height: 13px;
  }

  & .pricing__secure-text {
    color: #fff;
    margin-left: 5px;
    font-size: 12px;
  }
  & .offer {
    background-color: #fff;
    border-radius: 43.29px;
    flex-flow: column;
    justify-content: flex-start;
    align-self: center;
    align-items: center;
    width: 495.63px;
    margin-bottom: 60px;
    padding: 26px 0 30px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      width: 360px;
    }
  }

  & .offer__title {
    color: #cd924c;
    margin-bottom: 18px;
    padding: 0 20px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;

    @media (max-width: 479px) {
      /* celular */
      font-size: 25px;
    }
  }

  /* Um item só, sem altura: quem separa é a linha de baixo, e quem dá o
     respiro é o padding — em cima e embaixo, igual para todos. */
  & .offer__item {
    border-bottom: .58px solid #4a030333;
    width: 443px;
    padding: 13px 0;

    @media (max-width: 479px) {
      /* celular */
      width: 320px;
    }
  }

  & .offer__text {
    color: #461312;
    font-size: 20.05px;
    font-weight: 400;
    line-height: 1.25;

    @media (max-width: 479px) {
      /* celular */
      font-size: 18px;
    }
  }

  & .offer__cta {
    background-color: #c7ff7c24;
    border-radius: 50px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 397px;
    height: 80px;
    margin-top: 20px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      width: 360px;
    }
  }

  & .bonus {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    width: 1059.03px;
    margin-top: 50px;
    margin-bottom: 80px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      width: auto;
    }
  }

  & .bonus__title {
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 40px;
    font-size: 70px;
    font-weight: 700;
    line-height: 100%;

    @media (max-width: 479px) {
      /* celular */
      display: none;
    }
  }

  & .bonus__title-strong {
    color: #cd924c;
  }

  & .bonus__row {
    justify-content: center;
    align-items: center;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      flex-flow: column;
    }
  }

  & .bonus__card {
    background-image: url("../images/Group-2558.svg");
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: auto;
    border-radius: 6px;
    width: 347.68px;
    height: 463.9px;
    margin: 5px;
  }

  & .bonus__card-head {
    border: 1px #000;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    height: 276.23px;
    display: flex;
  }

  & .bonus__card-title {
    color: #461312;
    text-align: center;
    margin-top: 25px;
    font-size: 16.32px;
  }

  & .bonus__img--mentoria {
    width: 242px;
    max-width: none;
    height: 166.078px;
    margin-top: 0;
    transform: translate(0);
    box-shadow: 26px 24px 22px 10px #0000001a;
  }

  & .bonus__card-body {
    background-color: #f4f4f4;
    border-radius: 6px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    height: 187.67px;
    display: flex;
  }

  & .bonus__card-text {
    color: #4a0303;
    width: 292.97px;
    margin-top: 25px;
    font-size: 16px;
  }

  & .bonus__img--clases {
    width: 272px;
    max-width: none;
    height: auto;
    margin-top: 27px;

    @media (max-width: 479px) {
      /* celular */
      height: 157.766px;
    }
  }

  & .bonus__img--biblioteca {
    width: 167px;
    max-width: none;
    height: 209.453px;
    transform: translate(0);
  }

  & .bonus__card-text--sm {
    color: #4a0303;
    width: 292.97px;
    margin-top: 25px;
    font-size: 15px;
  }

  & .bonus__img--clinico {
    width: 242px;
    max-width: none;
    height: 166.078px;
    margin-top: 27px;
    transform: translate(0);
  }

  & .bonus__img--preguntas {
    width: 122.31px;
    max-width: none;
    height: 182.516px;
    margin-top: 27px;
  }

  & .bonus__img--portal {
    width: 174.83px;
    max-width: none;
    height: 183.906px;
    margin-top: 27px;
    transform: translate(0);
  }

  & .bonus__img--articulos {
    width: 246.8px;
    max-width: none;
    height: 183.016px;
    margin-top: 27px;
  }

  & .bonus__img--material {
    width: 266.8px;
    max-width: none;
    height: 192px;
    margin-top: 18px;
    transform: translate(0);
  }

  & .bonus__img--clase-extra {
    width: 283.04px;
    max-width: none;
    height: auto;
    margin-top: -18px;
    transform: translate(0);

    @media (max-width: 479px) {
      /* celular */
      height: 236.031px;
    }
  }

  & .bonus__img--masterclass {
    width: 272px;
    max-width: none;
    height: auto;
    margin-top: 22px;
  }

  & .bonus__img--whatsapp {
    width: 176px;
    max-width: none;
    height: auto;
    margin-top: 18px;
  }

  & .bonus__img--grabacion {
    width: 224.51px;
    max-width: none;
    height: 150.328px;
    margin-top: 18px;
    transform: translate(0);
  }

}

/* ======================================================================
   11 · DEPOIMENTOS (CARROSSÉIS)   (.testimonials)
   ====================================================================== */

.testimonials {
  background-color: #fff;

  & .testimonials__container {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    max-width: 1350.04px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      width: 360px;
    }
  }

  & .testimonials__title {
    text-align: center;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #4a0303, #9f2828);
    -webkit-background-clip: text;
    background-clip: text;
    width: 868.32px;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 700;
    line-height: 100%;

    @media (max-width: 479px) {
      /* celular */
      width: auto;
    }
  }

  & .testimonials__carousel {
    background-color: #ddd0;
    width: 950.04px;
    height: 662.72px;
    margin-bottom: 20px;

    @media (max-width: 479px) {
      /* celular */
      display: none;
    }
  }

  & .testimonials__slide {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 950.031px;
    margin-top: 24px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      width: auto;
      margin-top: 0;
    }
  }

  & .testimonials__img {
    border-radius: 19.5px;
    width: 695.15px;
    max-width: none;
    height: 562.656px;

    @media (max-width: 479px) {
      /* celular */
      width: 230px;
      height: 415.859px;
    }
  }

  & .testimonials__slide--wide {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 950.031px;
    margin-top: 69px;
    display: flex;
  }

  & .testimonials__img--wide {
    border-radius: 19.5px;
    width: 779px;
    max-width: none;
    height: 495.547px;
    box-shadow: 1px 3px 8px 3px #0003;
  }

  & .testimonials__carousel--mobile {
    background-color: #ddd0;
    width: 950.04px;
    height: 662.72px;
    margin-bottom: 20px;
    display: none;

    @media (max-width: 479px) {
      /* celular */
      width: 360.04px;
      height: 454.313px;
      display: flex;
    }
  }

  & .testimonials__img--m1,
  & .testimonials__img--m2,
  & .testimonials__img--m3,
  & .testimonials__img--m4 {
    border-radius: 19.5px;
    width: 695.15px;
    max-width: none;
    height: 562.656px;
  }

  & .testimonials__img--m1 {
    @media (max-width: 479px) {
      /* celular */
      width: 250px;
      height: 414.313px;
    }
  }

  & .testimonials__img--m2 {
    @media (max-width: 479px) {
      /* celular */
      width: 230px;
      height: 409.313px;
    }
  }

  & .testimonials__img--m3 {
    @media (max-width: 479px) {
      /* celular */
      width: 230px;
      height: 415.859px;
    }
  }

  & .testimonials__img--m4 {
    @media (max-width: 479px) {
      /* celular */
      width: 230px;
      height: 409.313px;
    }
  }

}

/* ======================================================================
   12 · ONDE VOCÊ ESTARÁ EM 4 MESES   (.future)
   ====================================================================== */

.future {
  background-image: url("../images/Frame-1988.webp");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 1920px;
  border-bottom: 10.3px solid #ffc76c;

  @media (max-width: 479px) {
    /* celular */
    border-bottom-style: none;
  }

  & .future__container {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-end;
    max-width: 1020px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      justify-content: flex-start;
      align-items: center;
      width: 360px;
    }
  }

  & .future__inner {
    -webkit-backdrop-filter: blur(23.4px);
    backdrop-filter: blur(23.4px);
    border: 1px solid #ffffff45;
    border-radius: 46px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 573.88px;
    height: 984.98px;
    margin-top: 35px;
    margin-bottom: 40px;
    padding: 30px 50px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      justify-content: flex-start;
      align-items: center;
      width: 360px;
      height: auto;
      padding-left: 25px;
      padding-right: 25px;
    }
  }

  & .future__title {
    color: #cd924c;
    margin-top: 36px;
    font-size: 40px;
    font-weight: 700;
    line-height: 35px;

    @media (max-width: 479px) {
      /* celular */
      text-align: center;
      margin-top: 3px;
      font-size: 23px;
      line-height: 30px;
    }
  }

  & .future__lead {
    color: #fff;
    width: 476px;
    margin-top: 30px;
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;

    @media (max-width: 479px) {
      /* celular */
      text-align: center;
      width: auto;
      font-size: 16px;
    }
  }

  & .future__text {
    color: #fff;
    width: 476px;
    margin-top: 10px;
    font-size: 24px;
    line-height: 28px;

    @media (max-width: 479px) {
      /* celular */
      text-align: center;
      width: auto;
      font-size: 16px;
      line-height: 25px;
    }
  }

  & .future__rule {
    background-color: #ffe9c6;
    width: 444px;
    height: 1px;
    margin-top: 20px;
    margin-bottom: 20px;

    @media (max-width: 479px) {
      /* celular */
      width: 300px;
    }
  }

  & .future__text--b {
    color: #cd924c;
    width: 476px;
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
  }

  & .future__text--c {
    color: #fff;
    width: 476px;
    margin-top: 10px;
    font-size: 24px;
    line-height: 28px;
  }

  /* Esta @media vale para os DOIS parágrafos e tem de vir depois de
     ambos: a especificidade é a mesma, então ganha quem vem por último.
     Antes ela ficava acima do .future__text--c e o parágrafo continuava
     com 476px no celular, estourando o card. */
  & .future__text--b,
  & .future__text--c {
    @media (max-width: 479px) {
      /* celular */
      text-align: center;
      width: auto;
      font-size: 16px;
      line-height: 25px;
    }
  }

}

/* ======================================================================
   13 · GARANTIA + QUEM É RAYANE PINTO   (.guarantee)
   ====================================================================== */

/* Cor chapada, a mesma em qualquer largura. Antes eram DOIS degradês
   quase pretos — um para o desktop e outro para o celular — e é por isso
   que a seção saía bem mais escura que o layout. */
.guarantee {
  background-color: #6b0606;

  & .guarantee__container {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    max-width: 1231.73px;
    padding-top: 55px;
    padding-bottom: 45px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      width: auto;
    }
  }

  & .guarantee__box {
    justify-content: center;
    align-items: center;
    margin-top: 84px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      flex-flow: column-reverse;
      width: 360px;
      margin-top: 36px;
    }
  }

  & .guarantee__body {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  & .guarantee__head {
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      margin-bottom: 12px;
    }
  }

  & .guarantee__icon {
    width: 58px;
    height: 100%;
  }

  & .guarantee__label {
    color: #cd924c;
    margin-left: 10px;
    font-size: 48px;
    font-weight: 700;
    line-height: 100%;
  }

  & .guarantee__text {
    color: #fff;
    text-align: center;
    width: 621.33px;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;

    @media (max-width: 479px) {
      /* celular */
      width: auto;
      font-size: 16px;
      line-height: 21px;
    }
  }

  & .guarantee__seal {
    margin-left: 53px;

    @media (max-width: 479px) {
      /* celular */
      margin-bottom: 27px;
      margin-left: 0;
    }
  }

  & .guarantee__seal-img {
    width: 253px;
    height: 253px;

    @media (max-width: 479px) {
      /* celular */
      width: 202px;
      max-width: none;
      height: 202px;
    }
  }

  & .guarantee__cta {
    background-color: #c7ff7c24;
    border-radius: 50px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 531px;
    height: 80px;
    margin-top: 39px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      width: 360px;
    }
  }

  & .guarantee__note {
    color: #fff;
    text-align: center;
    margin-top: 20px;
    font-weight: 700;

    @media (max-width: 479px) {
      /* celular */
      width: 360px;
    }
  }

  /* O RESPIRO ATÉ O CARD BRANCO MORA AQUI, e só aqui. A observação
     "*Si los cupos se agotan..." colava no card porque ninguém separava
     os dois: a nota terminava e o branco começava.

     O espaço é margin-top do card, não margin-bottom da nota, para ter
     um dono só. E ele soma mesmo: .guarantee__container é flex, e em
     flex as margens de irmãos NÃO se fundem — se as duas regras tivessem
     margem, o resultado seria a soma das duas. */
  & .author {
    background-color: #fff;
    border-radius: 16px;
    flex-direction: column;
    align-items: center;
    width: 1231.73px;
    height: 665.13px;
    margin-top: 100px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      border-radius: 0;
      width: auto;
      max-width: none;
      height: auto;
      margin-top: 45px;
      margin-bottom: 0;
    }
  }

  & .author__row {
    width: 100%;
    max-width: 100%;
    margin-top: 66px;

    @media (max-width: 479px) {
      /* celular */
      margin-top: 39px;
    }
  }

  & .author__col-media {
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      justify-content: center;
      align-items: center;
    }
  }

  & .author__title--mobile {
    color: #4a0303;
    font-family: Montserrat, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 28px;
    display: none;

    @media (max-width: 479px) {
      /* celular */
      text-align: center;
      width: 100%;
      margin-top: 0;
      font-size: 24px;
      display: block;
    }
  }

  & .author__img {
    width: 429.87px;
    max-width: none;
    height: 482.109px;
    margin-top: -117px;

    @media (max-width: 479px) {
      /* celular */
      width: 355px;
      height: 398.141px;
      margin-top: 0;
    }
  }

  & .author__body {
    margin-left: 23px;

    @media (max-width: 479px) {
      /* celular */
      width: 100%;
      margin-left: 0;
    }
  }

  & .author__title {
    color: #4a0303;
    font-family: Montserrat, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 28px;

    @media (max-width: 479px) {
      /* celular */
      text-align: center;
      width: 100%;
      margin-top: 21px;
      font-size: 24px;
      display: none;
    }
  }

  & .author__text {
    color: #4a0303;
    text-align: justify;
    text-indent: 30px;
    width: 455.63px;
    margin-top: 21px;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    line-height: 28px;
  }

  & .author__bio {
    color: #4a0303;
    text-align: justify;
    width: auto;
    margin-top: 36px;
    padding-left: 170px;
    padding-right: 120px;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    line-height: 28px;
  }

  /* Esta @media vale para o texto E para a bio, e tem de vir depois das
     duas: mesma especificidade, ganha quem vem por último. Antes ela
     ficava acima da .author__bio e o padding de 170px do desktop
     continuava valendo no celular, espremendo o texto numa coluna. */
  & .author__text,
  & .author__bio {
    @media (max-width: 479px) {
      /* celular */
      width: 100%;
      padding-left: 20px;
      padding-right: 20px;
    }
  }

}

/* ======================================================================
   14 · FAQ   (.faq)
   ====================================================================== */

.faq {
  background-color: #fff;

  & .faq__container {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }

  & .faq__inner {
    flex-direction: column;
    align-items: center;
    width: 808px;
    margin-top: 60px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      width: 100%;
    }
  }

  & .faq__title {
    color: #751d1d;
    width: 100%;
    font-family: Montserrat, sans-serif;
    font-size: 28px;
    font-weight: 700;

    @media (max-width: 479px) {
      /* celular */
      text-align: center;
      width: 100%;
      margin-top: 30px;
      padding-left: 20px;
      padding-right: 20px;
      font-size: 24px;
    }
  }

  & .faq__section {
    background-color: #0000;

    @media (max-width: 479px) {
      /* celular */
      flex-direction: column;
      align-items: center;
      width: 100%;
      display: flex;
    }
  }

  & .faq__pad {
    padding-left: 1.25rem;
    padding-right: 1.25rem;

    @media (max-width: 991px) {
      /* tablet */
      padding-left: 2.5rem;
      padding-right: 2.5rem;
    }

    @media (max-width: 767px) {
      /* tablet pequeno / celular deitado */
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }

    @media (max-width: 479px) {
      /* celular */
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding-left: 1rem;
      padding-right: 1rem;
      display: flex;
    }
  }

  & .faq__pad-inner {
    padding-top: 4rem;
    padding-bottom: 4rem;

    @media (max-width: 479px) {
      /* celular */
      flex-direction: column;
      align-items: center;
      width: 100%;
      display: flex;
    }
  }

  & .faq__wrap {
    width: 100%;
    max-width: 58rem;
    margin-left: auto;
    margin-right: auto;

    @media (max-width: 479px) {
      /* celular */
      flex-direction: column;
      align-items: center;
      display: flex;
    }
  }

  & .faq__list {
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
    grid-template-rows: auto;
    grid-template-columns: 100%;
    grid-auto-columns: 1fr;
    align-items: start;
    display: grid;

    @media (max-width: 479px) {
      /* celular */
      place-items: start center;
      width: 100%;
    }
  }

  & .faq__item {
    color: #fff;
    background-color: #cd924c;
    border-radius: 14px;
    width: 808px;
    font-family: Montserrat, sans-serif;

    @media (max-width: 479px) {
      /* celular */
      width: 360px;
      margin-left: 20px;
      margin-right: 20px;
    }
  }

  & .faq__item {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  & .faq__q {
    width: 100%;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
    cursor: pointer;
    justify-content: flex-start;
    align-items: center;
    padding: 1.25rem 1.5rem;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      width: 360px;
    }
  }

  & .faq__q-text {
    color: #fff;
    text-transform: uppercase;
    order: 9999;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
  }

  & .faq__chevron-color {
    color: var(--combine-library-grey-600);
  }

  & .faq__chevron-icon {
    color: #fff;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      height: 30px;
    }
  }

  /* A setinha gira quando o faq.js marca o item aberto. */
  & .faq__item.is-open .faq__chevron {
    transform: rotate(180deg);
  }

  & .faq__chevron {
    transition: transform .3s ease;
  }

  & .faq__a {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    overflow: hidden;

    /* O faq.js anima por max-height: fixa o scrollHeight ao abrir e 0 ao
       fechar. Foi max-height (e não height) porque o truque de
       grid-template-rows:0fr não colapsa no Chromium e deixava a
       primeira linha da resposta aparecendo. */
    max-height: 0;
    transition: max-height .3s ease;

    @media (max-width: 479px) {
      /* celular */
      width: 360px;
    }
  }

  & .faq__a-text {
    color: #fff;
    margin-bottom: 0;
    font-family: Montserrat, sans-serif;
    font-size: 20.17px;
    font-weight: 400;
    line-height: 128%;
  }

  & .faq__a-space {
    width: 100%;
    height: 1.5rem;
  }

}

/* ======================================================================
   15 · CONTATO COM O TIME   (.contact)
   ====================================================================== */

.contact {
  background-color: #fff;

  @media (max-width: 479px) {
    /* celular */
    width: 100%;
    overflow: hidden;
  }

  & .contact__container {
    @media (max-width: 479px) {
      /* celular */
      flex-direction: column;
      align-items: center;
      width: 100%;
      display: flex;
    }
  }

  & .contact__title {
    color: #a15a3e;
    margin-top: 51px;
    font-family: Montserrat, sans-serif;
    font-size: 28px;
    font-weight: 700;

    @media (max-width: 479px) {
      /* celular */
      width: 323.969px;
    }
  }

  & .contact__lead {
    color: #4a0303;
    margin-top: 12px;
    font-family: Montserrat, sans-serif;
    font-size: 20px;
    font-weight: 500;

    @media (max-width: 479px) {
      /* celular */
      text-align: center;
      width: 375px;
      margin-top: 24px;
    }
  }

  & .contact__text {
    color: #4a030399;
    margin-top: 20px;
    font-family: Montserrat, sans-serif;
    font-size: 20px;
    font-weight: 500;

    @media (max-width: 479px) {
      /* celular */
      text-align: center;
      width: 375px;
    }
  }

  & .contact__row {
    /* Um botão só, centralizado — o de e-mail saiu. */
    display: flex;
    justify-content: center;
    margin-top: 27px;
    margin-bottom: 51px;

    @media (max-width: 479px) {
      /* celular */
      flex-flow: column;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      display: flex;
    }
  }

  & .contact__card {
    @media (max-width: 479px) {
      /* celular */
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      margin-right: 0;
      display: flex;
    }
  }

  /* O ÍCONE ESCREVIA POR CIMA DO TEXTO. Ele vinha do Webflow fora do
     <a>, encaixado por cima com "float: right" mais "margin-top: -54px"
     e "margin-right: 74px" — números que só funcionavam quando havia
     DOIS botões lado a lado nesta linha. Quando o de e-mail saiu e o de
     WhatsApp foi centralizado, os 74px deixaram de cair na sobra da
     direita e o ícone pousou em cima da frase.

     Agora o ícone é filho do <a> e o botão é uma linha flex: texto e
     ícone dividem o espaço em vez de disputá-lo, com "gap" no lugar das
     margens negativas. Não há medida para recalcular se a copy mudar —
     e, de quebra, clicar no ícone passou a abrir o WhatsApp, o que antes
     não acontecia porque ele estava fora do link. */
  & .contact__btn--whatsapp {
    color: #000;
    background-color: #7fd111;
    border-radius: 8px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 14px;
    width: 430px;
    height: 70px;
    padding: 0 20px;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      gap: 10px;
      width: 350px;
      height: 60.3px;
      font-size: 13px;
    }
  }

  & .contact__icon--whatsapp {
    flex: none;              /* nunca é espremido pelo texto */
    width: 41px;
    height: 40px;

    @media (max-width: 479px) {
      /* celular */
      width: 32px;
      height: 31px;
    }
  }

}

/* ======================================================================
   16 · RODAPÉ   (.footer)
   ====================================================================== */

.footer {
  background-color: #fff;
  border-top: 1px solid #cd924c;

  @media (max-width: 479px) {
    /* celular */
    width: 100%;
    overflow: hidden;
  }

  & .footer__container {
    @media (max-width: 479px) {
      /* celular */
      width: 360px;
    }
  }

  /* No celular o rodapé empilha: os textos em cima, a marca embaixo,
     tudo centralizado. Vale até 767px (e não só até 479) porque entre
     480 e 767 o export do Webflow não definia nada e as duas colunas
     ficavam espremidas lado a lado. */
  & .footer__row {
    margin-top: 30px;

    @media (max-width: 767.98px) {   /* celular e tablet pequeno */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 100%;
    }
  }

  & .footer__col {
    margin-top: 30px;

    @media (max-width: 767.98px) {   /* celular e tablet pequeno */
      float: none;
      width: 100%;
      text-align: center;
    }
  }

  & .footer__col--brand {
    @media (max-width: 767.98px) {   /* celular e tablet pequeno */
      float: none;
      width: 100%;
      margin-top: 8px;
    }
  }

  & .footer__copy {
    color: #a15a3e;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 500;

    @media (max-width: 479px) {
      /* celular */
      color: #820e13;
      font-weight: 700;
    }
  }

  & .footer__links {
    color: #000;
    text-align: center;
    margin-top: 15px;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    display: none;

    @media (max-width: 479px) {
      /* celular */
      color: #fff;
      font-size: 19px;
      line-height: 30px;
      display: block;
    }
  }

  & .footer__link {
    color: #a15a3e;
    text-decoration: none;

    @media (max-width: 479px) {
      /* celular */
      color: #820e13;
    }
  }

  & .footer__links--inline {
    color: #fff;
    text-align: center;
    margin-top: 15px;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    display: block;
  }

  & .footer__links--inline {
    color: #fff;
    text-align: center;
    margin-top: 15px;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    display: block;

    @media (max-width: 479px) {
      /* celular */
      color: #820e13;
      font-size: 18px;
      line-height: 30px;
      display: none;
    }
  }

  & .footer__col--brand {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;

    @media (max-width: 479px) {
      /* celular */
      flex-direction: column;
      justify-content: center;
      align-items: center;
      display: flex;
    }
  }

  & .footer__brand {
    margin-top: 0;
    margin-left: 41px;

    @media (max-width: 479px) {
      /* celular */
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 48px;
      margin-left: 0;
      display: flex;
    }
  }

  & .footer__brand-label {
    color: #a15a3e;
    text-align: left;
    padding-left: 30px;
    font-family: Montserrat, sans-serif;
    font-size: 18px;

    @media (max-width: 479px) {
      /* celular */
      color: #820e13;
      padding-left: 0;
      font-weight: 700;
    }
  }

  & .footer__brand-img {
    margin-top: -33px;

    @media (max-width: 479px) {
      /* celular */
      width: 200px;
      height: 200px;
    }
  }

}