/* ==========================
   HOME CSS
   Colégio dos Magos
   ========================== */


/* ==========================
   CABEÇALHO
   ========================== */

.header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);

    min-height: var(--header-height);

    background-color: rgba(17, 18, 22, 0.94);
    border-bottom: 1px solid var(--color-border);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header__container {
    min-height: var(--header-height);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-lg);
}


/* --------------------------
   Logo
-------------------------- */

.header__logo-link {
    flex-shrink: 0;
}

.header__logo {
    display: block;

    width: auto;
    height: 56px;
}


/* --------------------------
   Navegação
-------------------------- */

.header__navigation {
    flex: 1;

    margin-left: clamp(2rem, 4vw, 4.5rem);
}

.header__menu {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: clamp(0.75rem, 1.25vw, 1.4rem);
}

.header__menu li {
    flex-shrink: 0;
}

.header__menu a {
    position: relative;

    display: inline-block;

    padding-block: var(--space-xs);

    color: var(--color-text-secondary);

    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1.3;

    white-space: nowrap;

    transition: color var(--transition-fast);
}

.header__menu a::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    background-color: var(--color-primary);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform var(--transition-fast);
}

.header__menu a:hover,
.header__menu a:focus-visible {
    color: var(--color-primary);
}

.header__menu a:hover::after,
.header__menu a:focus-visible::after {
    transform: scaleX(1);
}


/* --------------------------
   Página ativa
-------------------------- */

.header__menu a.active,
.header__menu a[aria-current="page"] {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
}

.header__menu a.active::after,
.header__menu a[aria-current="page"]::after {
    transform: scaleX(1);
}


/* --------------------------
   Botão do menu móvel
-------------------------- */

.header__menu-button {
    display: none;

    width: 44px;
    height: 44px;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.header__menu-line {
    display: block;

    width: 22px;
    height: 2px;

    background-color: var(--color-primary);

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast);
}


/* --------------------------
   CTA do cabeçalho
-------------------------- */

.header__menu .header__cta {
    padding: 0.65rem 0.8rem;

    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);

    color: var(--color-primary);

    line-height: 1.2;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.header__menu .header__cta::after {
    display: none;
}

.header__menu .header__cta:hover,
.header__menu .header__cta:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}


/* ==========================
   HERO
   ========================== */

/* ==========================
   HERO
   ========================== */

.hero {
    padding-block: 0;

    background-color: var(--color-background);
}

.hero__container {
    display: grid;
    grid-template-columns: 43% 57%;

    max-width: 1600px;
    min-height:680px;

    padding-right: 0;
}

.hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        var(--space-xl)
        clamp(2rem, 3vw, 3.5rem)
        var(--space-lg)
        0;
}

.hero__title {
    max-width: 620px;

    margin-bottom: var(--space-lg);

    color: var(--color-text);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.15rem, 2.9vw, 3.4rem);
    font-weight: var(--fw-regular);
    line-height: 1.08;
}

.hero__title span {
    color: var(--color-primary);
}

.hero__description {
    max-width: 590px;

    margin-bottom: var(--space-lg);

    color: var(--color-text);

    font-size: clamp(1.05rem, 1.25vw, 1.25rem);
    line-height: 1.5;
}

.hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    gap: var(--space-xl);

    margin-bottom: var(--space-xl);
}

.hero__button {
    min-width: 190px;

    justify-content: space-between;

    padding: 0.5rem 0.75rem;

    border-radius: 2px;

    font-size: 0.75rem;
    font-weight: var(--fw-medium);
    line-height: 1.15;
    text-transform: uppercase;
    text-align: left;
}

.hero__button-arrow {
    margin-left: var(--space-md);

    font-size: 1.3rem;
}

.hero__visual {
    min-height: 680px;

    border: 0;
    border-radius: 0;

    background: none;
    box-shadow: none;

    overflow: hidden;
}

.hero__visual::before,
.hero__visual::after {
    display: none;
}

.hero__image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

/* ==========================
   INDICADORES DO HERO
   ========================== */

.hero__indicators {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;

    gap: var(--space-md);

    margin-top: var(--space-lg);
    padding-top: var(--space-md);

    border-top: 1px solid var(--color-border);
}

.hero__indicators .indicator {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 0;

    text-align: left;
}

.hero__indicators .indicator__icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    flex: 0 0 28px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    margin-bottom: var(--space-xs);

    overflow: hidden;
}

.hero__indicators .indicator__icon img {
    display: block;

    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;

    object-fit: contain;
}

.hero__indicators .indicator__title {
    display: block;

    margin: 0 0 0.25rem;

    color: var(--color-text);

    font-size: 0.72rem;
    font-weight: var(--fw-semibold);
    line-height: 1.25;
    text-align: left;
}

.hero__indicators .indicator__description {
    display: block;

    margin: 0;

    color: var(--color-text-secondary);

    font-size: 0.64rem;
    font-weight: var(--fw-regular);
    line-height: 1.35;
    text-align: left;
}


/* ==========================
   PADRÃO DAS SEÇÕES DA HOME
   ========================== */

.home-section {
    position: relative;
}

.home-section:nth-of-type(even) {
    background-color: var(--color-surface);
}

.home-section:nth-of-type(odd) {
    background-color: var(--color-background);
}

.home-section .section-heading__title {
    color: var(--color-primary);
}

.search__container,
.method__container,
.journey__container,
.cycles__container,
.practice__container,
.formation__container,
.start__container,
.reflections__container,
.testimonials__container,
.continuation__container {
    position: relative;
}


/* ==========================
   A BUSCA
   ========================== */

.search {
    padding-top: 4rem;
    padding-bottom: 2rem;

    background-color: var(--color-background);
}

.search__container {
    max-width: 1480px;
}

.search__heading {
    max-width: 1400px;

    margin: 0 auto var(--space-md);

    text-align: center;
}

.search__title {
    margin-bottom: var(--space-xs);

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.85rem, 2.6vw, 3rem);
    font-weight: var(--fw-regular);
    line-height: 1.1;
}

.search__subtitle {
    color: var(--color-text);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.15rem, 1.7vw, 1.75rem);
    line-height: 1.25;
}

.search__visual {
    max-width: 980px;
    min-height: 500px;

    margin: 0 auto var(--space-sm);

    overflow: hidden;

    border: 0;
    border-radius: 0;

    background: none;
}

.search__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.search__content {
    max-width: 1220px;

    margin-inline: auto;

    text-align: center;
}

.search__description {
    margin-bottom: var(--space-xs);

    color: var(--color-text-secondary);

    font-size: clamp(1rem, 1.25vw, 1.25rem);
    line-height: 1.4;
}

.search__question {
    max-width: 1050px;

    margin-inline: auto;

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.85rem, 2.6vw, 3rem);
    font-weight: var(--fw-regular);
    line-height: 1.1;
}


/* ==========================
   O MÉTODO
   ========================== */

.method {
    padding-top: 4rem;
    padding-bottom: 2rem;

    background-color: var(--color-background);
}

.method__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 5vw, 6rem);

    align-items: center;
}

.method__visual img {
    display: block;

    width: 100%;
    height: auto;
}

.method__heading {
    margin-bottom: var(--space-xl);
}

.method__title {
    margin-bottom: var(--space-lg);

    color: var(--color-primary);

    text-align: center;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 2.8vw, 3.2rem);
    font-weight: var(--fw-regular);

    line-height: 1.1;
}

.method__description {
    color: var(--color-text);

    text-align: center;

    font-size: clamp(1.05rem, 1.35vw, 1.35rem);

    line-height: 1.55;
}

.method__grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: var(--space-2xl);

    margin-block: var(--space-2xl);
}

.method-card {
    text-align: center;
}

.method-card__title {
    margin-bottom: .5rem;

    color: var(--color-primary);

    font-size: clamp(1.3rem, 1.6vw, 2rem);

    font-weight: var(--fw-bold);
}

.method-card__description {
    color: var(--color-text);

    font-size: clamp(.95rem, 1.1vw, 1.15rem);

    line-height: 1.4;
}

.method__question {
    margin-top: var(--space-2xl);

    color: var(--color-primary);

    text-align: center;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(2rem, 2.8vw, 3rem);

    font-weight: var(--fw-regular);

    line-height: 1.1;
}


/* ==========================
   JORNADA DA FORMAÇÃO
   ========================== */

.journey {
    padding-top: 4rem;
    padding-bottom: 2rem;

    background-color: var(--color-background);
}

.journey__container {
    text-align: center;
}

.journey__title {
    margin-bottom: var(--space-sm);

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 2.7vw, 3.1rem);
    font-weight: var(--fw-regular);
    line-height: 1.1;
}

.journey__intro {
    max-width: 1180px;

    margin: 0 auto var(--space-lg);

    color: var(--color-text);

    font-size: clamp(1rem, 1.25vw, 1.25rem);
    line-height: 1.45;
}

.journey__levels {
    max-width: 720px;

     margin: 0.75rem auto 1rem;
}

.journey__level {
    margin-bottom: 0;
}

.journey__level h3 {
    margin: 0;

    color: var(--color-primary);

    font-size: clamp(1.3rem, 1.8vw, 2rem);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
}

.journey__divider {
    display: block;

    width: min(590px, 100%);
    height: 24px;

    margin: -0.1rem auto 0.15rem;

    object-fit: fill;
}

.journey__timeline {
    margin-top: var(--space-md);
}

.journey__timeline-image {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;
}

.journey__stages {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));

    gap: var(--space-xs);

    margin-top: 0.25rem;
}

.journey__stage {
    min-width: 0;

    text-align: center;
}

.journey__stage-title,
.journey__stage-subtitle {
    display: block;
}

.journey__stage-title {
    color: var(--color-text);

    font-size: clamp(0.85rem, 1.1vw, 1.15rem);
    line-height: 1.2;
}

.journey__stage-subtitle {
    margin-top: 0.2rem;

    color: var(--color-primary);

    font-size: clamp(0.82rem, 1vw, 1.05rem);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
}

.journey__footer {
    margin-top: var(--space-md);
}

.journey__duration {
    margin-bottom: .35rem;

    color: var(--color-primary);

    font-size: clamp(1.3rem, 1.55vw, 1.8rem);
    font-weight: var(--fw-semibold);
}

.journey__method{

    color: var(--color-text);

    font-size: clamp(1.35rem, 1.7vw, 2rem);

    font-weight: 400;

    line-height: 1.25;
}

.journey__question {
    max-width: 760px;

    margin: var(--space-md) auto 0;

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 2.7vw, 3rem);
    font-weight: var(--fw-regular);
    line-height: 1.1;
}

/* ==========================
   TRÊS CICLOS
   ========================== */

.cycles {
    padding-top: 4rem;
    padding-bottom: 2rem;

    background-color: var(--color-background);
}

.cycles__container {
    text-align: center;
}

.cycles__heading {
    max-width: 1220px;

    margin: 0 auto var(--space-lg);
}

.cycles__title {
    max-width: 900px;

    margin: 0 auto var(--space-sm);

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 2.7vw, 3.1rem);
    font-weight: var(--fw-regular);
    line-height: 1.1;
}

.cycles__intro {
    color: var(--color-text);

    font-size: clamp(1rem, 1.25vw, 1.25rem);
    line-height: 1.45;
}

.cycles__list {
    max-width: 1180px;

    margin-inline: auto;
}

.cycle {
    text-align: center;
}

.cycle__title {
    margin-bottom: 0.3rem;

    color: var(--color-text);

    font-size: clamp(1.2rem, 1.55vw, 1.65rem);
    font-weight: var(--fw-semibold);
    line-height: 1.25;
}

.cycle__stages {
    margin-bottom: 0.4rem;

    color: var(--color-primary);

    font-size: clamp(1.05rem, 1.35vw, 1.45rem);
    font-weight: var(--fw-semibold);
    line-height: 1.25;
}

.cycle__description {
    max-width: 1080px;

    margin-inline: auto;

    color: var(--color-text);

    font-size: clamp(0.98rem, 1.15vw, 1.15rem);
    font-weight: var(--fw-medium);
    line-height: 1.35;
}

.cycles__divider {
    display: block;

    width: min(800px, 100%);
    height: 22px;

    margin: 0.7rem auto 0.9rem;

    object-fit: fill;
}

.cycles__question {
    max-width: 760px;

    margin: var(--space-lg) auto 0;

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 2.7vw, 3rem);
    font-weight: var(--fw-regular);
    line-height: 1.1;
}


/* ==========================
   A PRÁTICA
   ========================== */

.practice .accordion {
    max-width: 880px;
    margin-inline: auto;
}

.practice .accordion__item {
    background-color: var(--color-surface);
}

.practice .accordion__button {
    position: relative;

    color: var(--color-text);

    font-size: var(--fs-lg);
}

.practice .accordion__button::after {
    content: "+";

    position: absolute;
    top: 50%;
    right: var(--space-lg);

    color: var(--color-primary);

    font-size: var(--fs-xl);
    font-weight: var(--fw-regular);

    transform: translateY(-50%);
}

.practice .accordion__button[aria-expanded="true"]::after {
    content: "−";
}

.practice .accordion__button:hover {
    color: var(--color-primary);
}

.practice .accordion__content {
    background-color: var(--color-background);
}

.practice .accordion__content p {
    color: var(--color-text-secondary);
}

/* ==========================
   FRAME 06
   ESTRUTURA DA FORMAÇÃO
   ACCORDION
   ========================== */

#estrutura-formacao {
    padding-top: 4rem;
    padding-bottom: 2rem;

    background-color: var(--color-surface);
}

#estrutura-formacao .formation__container {
    text-align: center;
}

#estrutura-formacao .formation__header {
    max-width: 1180px;

    margin: 0 auto var(--space-lg);

    text-align: center;
}

#estrutura-formacao .formation__title {
    margin-bottom: var(--space-sm);

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 2.7vw, 3.1rem);
    font-weight: var(--fw-regular);
    line-height: 1.1;
}

#estrutura-formacao .formation__intro,
#estrutura-formacao .formation__instruction {
    color: var(--color-text);

    font-size: clamp(1rem, 1.25vw, 1.25rem);
    font-weight: var(--fw-regular);
    line-height: 1.45;
}

#estrutura-formacao .formation__instruction {
    max-width: 960px;

    margin: var(--space-xs) auto 0;
}

#estrutura-formacao .formation__instruction strong {
    color: var(--color-text);

    font-weight: var(--fw-bold);
}

#estrutura-formacao .formation__accordion {
    width: 100%;

    margin-top: var(--space-lg);

    border-top: 1px solid var(--color-primary);
}

#estrutura-formacao .formation-item {
    border-bottom: 1px solid var(--color-primary);
}

#estrutura-formacao .formation-item summary {
    position: relative;

    display: grid;
    grid-template-columns: minmax(170px, 0.35fr) minmax(0, 1fr);
    align-items: center;

    gap: var(--space-lg);

    min-height: 58px;

    padding:
        0.85rem
        var(--space-md)
        0.85rem
        4.2rem;

    cursor: pointer;

    list-style: none;
}

#estrutura-formacao .formation-item summary::-webkit-details-marker {
    display: none;
}

#estrutura-formacao .formation-item summary::before {
    content: "";

    position: absolute;
    top: 50%;
    left: var(--space-lg);

    width: 12px;
    height: 12px;

    border-right: 1.5px solid var(--color-primary);
    border-bottom: 1.5px solid var(--color-primary);

    transform:
        translateY(-70%)
        rotate(45deg);

    transition: transform var(--transition-fast);
}

#estrutura-formacao .formation-item[open] summary::before {
    transform:
        translateY(-30%)
        rotate(225deg);
}

#estrutura-formacao .formation-item summary:hover {
    background-color: rgba(200, 161, 90, 0.05);
}

#estrutura-formacao .formation-item__stage {
    color: var(--color-text);

    font-size: clamp(1rem, 1.25vw, 1.3rem);
    font-weight: var(--fw-bold);
    line-height: 1.2;
}

#estrutura-formacao .formation-item__name {
    color: var(--color-text-secondary);

    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.3;
}

#estrutura-formacao .formation-item__content {
    padding:
        var(--space-sm)
        clamp(2rem, 6vw, 6rem)
        var(--space-lg);

    border-top: 1px solid rgba(200, 161, 90, 0.22);

    background-color: rgba(255, 255, 255, 0.018);
}

#estrutura-formacao .formation-item__content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--space-lg) var(--space-2xl);
}

#estrutura-formacao .formation-item__block h4 {
    margin-bottom: var(--space-xs);

    color: var(--color-primary);

    font-size: clamp(1rem, 1.15vw, 1.2rem);
    font-weight: var(--fw-semibold);
}

#estrutura-formacao .formation-item__block p {
    color: var(--color-text-secondary);

    font-size: 0.95rem;
    font-weight: var(--fw-regular);
    line-height: 1.55;
}

#estrutura-formacao .formation-item__initiation {
    grid-column: 1 / -1;

    margin-top: var(--space-xs);
    padding: var(--space-sm) var(--space-md);

    border-left: 2px solid var(--color-primary);

    background-color: rgba(200, 161, 90, 0.08);
}

#estrutura-formacao .formation-item__initiation h4 {
    margin-bottom: 0.25rem;

    color: var(--color-primary);

    font-size: 1rem;
}

#estrutura-formacao .formation-item__initiation p {
    color: var(--color-text);

    font-size: 0.92rem;
    font-weight: var(--fw-regular);
    line-height: 1.5;
}

#estrutura-formacao .formation__transition {
    max-width: 900px;

    margin: var(--space-lg) auto 0;

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 2.7vw, 3rem);
    font-weight: var(--fw-regular);
    line-height: 1.1;
    text-align: center;
}


/* ==========================
   FRAME 07
   COMO FUNCIONA SUA FORMAÇÃO
   ========================== */

#como-funciona {
    padding-top: 4rem;
    padding-bottom: 2rem;

    background-color: var(--color-background);
}

#como-funciona .formation__container {
    text-align: center;
}

#como-funciona .formation__header {
    max-width: 1500px;

    margin: 0 auto var(--space-lg);

    text-align: center;
}

#como-funciona .formation__title {
    margin-bottom: 0.9rem;

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 3vw, 3.4rem);
    font-weight: var(--fw-regular);
    line-height: 1.08;
}

#como-funciona .formation__intro {
    max-width: 1380px;

    margin: 0 auto 0.75rem;

    color: var(--color-text);

    font-size: clamp(1.05rem, 1.35vw, 1.45rem);
    font-weight: var(--fw-regular);
    line-height: 1.45;
}

#como-funciona .formation__topics {
    max-width: 1500px;

    margin: 0 auto;
}

#como-funciona .formation-topic {
    padding: 1.2rem 0;
}

#como-funciona .formation-topic:first-child {
    padding-top: 0.75rem;
}

#como-funciona .formation-topic:not(:last-child) {
    border-bottom: 2px solid rgba(200, 161, 90, 0.75);
}

#como-funciona .formation-topic__icon {
    display: block;

    width: 56px;
    height: 56px;

    margin: 0 auto 0.45rem;
}

#como-funciona .formation-topic__title {
    margin-bottom: 0.45rem;

    color: var(--color-primary);

    font-size: clamp(1.65rem, 2vw, 2.3rem);
    font-weight: var(--fw-semibold);
    line-height: 1.15;
}

#como-funciona .formation-topic__description {
    max-width: 1380px;

    margin: 0 auto;

    color: var(--color-text);

    font-size: clamp(1.05rem, 1.35vw, 1.4rem);
    font-weight: var(--fw-regular);
    line-height: 1.45;
}

#como-funciona .formation__question {
    max-width: 900px;

    margin: 1.25rem auto 0;

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.1rem, 2.8vw, 3.3rem);
    font-weight: var(--fw-regular);
    line-height: 1.08;
}


/* ==========================
   FRAME 08
   INICIE SUA FORMAÇÃO
   ========================== */

#inicie-sua-formacao {
    padding-top: 4rem;
    padding-bottom: 2rem;

    background-color: var(--color-surface);
}

#inicie-sua-formacao .course-access__container {
    text-align: center;
}


/* --------------------------
   Cabeçalho
-------------------------- */

#inicie-sua-formacao .course-access__header {
    max-width: 1380px;

    margin: 0 auto var(--space-lg);
}

#inicie-sua-formacao .course-access__title {
    margin-bottom: var(--space-sm);

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.1rem, 2.9vw, 3.4rem);
    font-weight: var(--fw-regular);
    line-height: 1.08;
}

#inicie-sua-formacao .course-access__intro {
    max-width: 1380px;

    margin: 0 auto;

    color: var(--color-text);

    font-size: clamp(1.05rem, 1.35vw, 1.45rem);
    font-weight: var(--fw-regular);
    line-height: 1.45;
}


/* --------------------------
   Blocos de informação
-------------------------- */

#inicie-sua-formacao .course-access__topics {
    max-width: 1460px;

    margin: 0 auto;
}

#inicie-sua-formacao .course-access-topic {
    padding: 1.25rem 0;
}

#inicie-sua-formacao .course-access-topic:not(:last-child) {
    border-bottom: 2px solid rgba(200, 161, 90, 0.75);
}

#inicie-sua-formacao .course-access-topic__icon {
    display: block;

    width: 56px;
    height: 56px;

    margin: 0 auto 0.4rem;

    object-fit: contain;
}

#inicie-sua-formacao .course-access-topic__title {
    margin-bottom: 0.55rem;

    color: var(--color-primary);

    font-size: clamp(1.65rem, 2vw, 2.3rem);
    font-weight: var(--fw-semibold);
    line-height: 1.15;
}

#inicie-sua-formacao .course-access-topic__description {
    max-width: 1280px;

    margin: 0 auto;

    color: var(--color-text);

    font-size: clamp(1.05rem, 1.35vw, 1.4rem);
    font-weight: var(--fw-regular);
    line-height: 1.45;
}


/* --------------------------
   Investimento
-------------------------- */

#inicie-sua-formacao .course-access__investment {
    max-width: 1280px;

    margin: 0 auto;
}

#inicie-sua-formacao .course-access__price {
    margin-bottom: 0.2rem;

    color: var(--color-text);

    font-size: clamp(1.35rem, 1.8vw, 2rem);
    line-height: 1.2;
}

#inicie-sua-formacao .course-access__price strong {
    font-weight: var(--fw-bold);
}

#inicie-sua-formacao .course-access__price span {
    font-weight: var(--fw-regular);
}

#inicie-sua-formacao .course-access__payment-details {
    color: var(--color-text);

    font-size: clamp(1rem, 1.25vw, 1.3rem);
    font-weight: var(--fw-regular);
    line-height: 1.35;
}


/* --------------------------
   Botão
-------------------------- */

#inicie-sua-formacao .course-access__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 250px;
    min-height: 66px;

    margin-top: var(--space-lg);
    padding: 0.8rem 2rem;

    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-full);

    background:
        linear-gradient(
            180deg,
            #d7bb7c 0%,
            #b99556 52%,
            #8d6d3e 100%
        );

    color: var(--color-white);

    font-size: clamp(1.1rem, 1.35vw, 1.4rem);
    font-weight: var(--fw-bold);
    line-height: 1.05;
    text-align: center;
    text-decoration: none;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 8px 20px rgba(0, 0, 0, 0.28);

    transition:
        transform var(--transition-fast),
        filter var(--transition-fast),
        box-shadow var(--transition-fast);
}

#inicie-sua-formacao .course-access__button:hover {
    filter: brightness(1.08);

    transform: translateY(-2px);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 12px 26px rgba(0, 0, 0, 0.34);
}

#inicie-sua-formacao .course-access__button:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 4px;
}


/* --------------------------
   Pergunta de transição
-------------------------- */

#inicie-sua-formacao .course-access__transition {
    max-width: 1100px;

    margin: var(--space-lg) auto 0;

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 2.7vw, 3.2rem);
    font-weight: var(--fw-regular);
    line-height: 1.08;
    text-align: center;
}


/* --------------------------
   Responsividade
-------------------------- */

@media (max-width: 768px) {

    #inicie-sua-formacao {
        padding-top: 3rem;
    }

    #inicie-sua-formacao .course-access__header {
        margin-bottom: var(--space-md);
    }

    #inicie-sua-formacao .course-access-topic {
        padding: 1.4rem 0;
    }

    #inicie-sua-formacao .course-access-topic__icon {
        width: 48px;
        height: 48px;
    }

    #inicie-sua-formacao .course-access__button {
        width: min(280px, 100%);
    }

}


/* ==========================
   FRAME 09
   REFLEXOS NA VIDA COTIDIANA
   ========================== */

#reflexos-na-vida-cotidiana {
    padding-top: 4rem;
    padding-bottom: 2rem;

    background-color: var(--color-background);
}

#reflexos-na-vida-cotidiana .daily-reflections__container {
    text-align: center;
}


/* --------------------------
   Estrutura principal
-------------------------- */

#reflexos-na-vida-cotidiana .daily-reflections__grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.65fr);
    align-items: center;

    gap: clamp(2rem, 4vw, 5rem);
}


/* --------------------------
   Imagem
-------------------------- */

#reflexos-na-vida-cotidiana .daily-reflections__media {
    margin: 0;
}

#reflexos-na-vida-cotidiana .daily-reflections__image {
    display: block;

    width: 100%;
    max-width: 520px;
    aspect-ratio: 4 / 5;

    margin: 0 auto;

    object-fit: cover;
    object-position: center;

    border-radius: var(--radius-sm);
}


/* --------------------------
   Conteúdo
-------------------------- */

#reflexos-na-vida-cotidiana .daily-reflections__content {
    text-align: center;
}

#reflexos-na-vida-cotidiana .daily-reflections__header {
    max-width: 980px;

    margin: 0 auto var(--space-lg);
}

#reflexos-na-vida-cotidiana .daily-reflections__title {
    margin-bottom: var(--space-sm);

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 2.7vw, 3.15rem);
    font-weight: var(--fw-regular);
    line-height: 1.08;
}

#reflexos-na-vida-cotidiana .daily-reflections__intro {
    max-width: 960px;

    margin: 0 auto;

    color: var(--color-text);

    font-size: clamp(1.05rem, 1.35vw, 1.4rem);
    font-weight: var(--fw-regular);
    line-height: 1.45;
}


/* --------------------------
   Benefícios
-------------------------- */

#reflexos-na-vida-cotidiana .daily-reflections__benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--space-lg) var(--space-2xl);

    max-width: 980px;

    margin: 0 auto var(--space-lg);
}

#reflexos-na-vida-cotidiana .daily-reflections__benefit {
    text-align: center;
}

#reflexos-na-vida-cotidiana .daily-reflections__benefit-title {
    margin-bottom: var(--space-xs);

    color: var(--color-primary);

    font-size: clamp(1.35rem, 1.75vw, 1.9rem);
    font-weight: var(--fw-semibold);
    line-height: 1.15;
}

#reflexos-na-vida-cotidiana .daily-reflections__benefit-description {
    color: var(--color-text);

    font-size: clamp(1rem, 1.2vw, 1.25rem);
    font-weight: var(--fw-regular);
    line-height: 1.45;
}


/* --------------------------
   Fechamento
-------------------------- */

#reflexos-na-vida-cotidiana .daily-reflections__closing {
    max-width: 980px;

    margin: 0 auto;

    color: var(--color-text);

    font-size: clamp(1.05rem, 1.3vw, 1.35rem);
    font-weight: var(--fw-regular);
    line-height: 1.45;
}


/* --------------------------
   Pergunta de transição
-------------------------- */

#reflexos-na-vida-cotidiana .daily-reflections__transition {
    max-width: 1100px;

    margin: var(--space-lg) auto 0;

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 2.7vw, 3.15rem);
    font-weight: var(--fw-regular);
    line-height: 1.08;
    text-align: center;
}


/* --------------------------
   Responsividade
-------------------------- */

@media (max-width: 1024px) {

    #reflexos-na-vida-cotidiana .daily-reflections__grid {
        grid-template-columns: 1fr;

        gap: var(--space-2xl);
    }

    #reflexos-na-vida-cotidiana .daily-reflections__image {
        max-width: 560px;
    }

}

@media (max-width: 768px) {

    #reflexos-na-vida-cotidiana {
        padding-top: 3rem;
    }

    #reflexos-na-vida-cotidiana .daily-reflections__benefits {
        grid-template-columns: 1fr;

        gap: var(--space-lg);
    }

    #reflexos-na-vida-cotidiana .daily-reflections__header {
        margin-bottom: var(--space-md);
    }

    #reflexos-na-vida-cotidiana .daily-reflections__image {
        max-width: 100%;
    }

}


/* ==========================
   FRAME 10
   RELATOS DE ALUNOS
   ========================== */

#relatos-de-alunos {
    padding-top: 4rem;
    padding-bottom: 2rem;

    background-color: var(--color-surface);
}

#relatos-de-alunos .student-stories__container {
    text-align: center;
}


/* --------------------------
   Estrutura principal
-------------------------- */

#relatos-de-alunos .student-stories__grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.55fr);
    align-items: center;

    gap: clamp(2rem, 4vw, 5rem);
}


/* --------------------------
   Imagem
-------------------------- */

#relatos-de-alunos .student-stories__media {
    margin: 0;
}

#relatos-de-alunos .student-stories__image {
    display: block;

    width: 100%;
    max-width: 560px;
    aspect-ratio: 3 / 4;

    margin: 0 auto;

    object-fit: cover;
    object-position: center;

    border-radius: var(--radius-sm);
}


/* --------------------------
   Conteúdo
-------------------------- */

#relatos-de-alunos .student-stories__content {
    text-align: center;
}

#relatos-de-alunos .student-stories__header {
    max-width: 980px;

    margin: 0 auto var(--space-md);
}

#relatos-de-alunos .student-stories__title {
    margin-bottom: var(--space-sm);

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 2.7vw, 3.15rem);
    font-weight: var(--fw-regular);
    line-height: 1.08;
}

#relatos-de-alunos .student-stories__intro {
    max-width: 960px;

    margin: 0 auto;

    color: var(--color-text);

    font-size: clamp(1.05rem, 1.35vw, 1.4rem);
    font-weight: var(--fw-regular);
    line-height: 1.45;
}


/* --------------------------
   Carrossel
-------------------------- */

#relatos-de-alunos .student-stories__carousel {
    max-width: 980px;

    margin: 0 auto;
}

#relatos-de-alunos .student-stories__viewport {
    overflow: hidden;
}

#relatos-de-alunos .student-stories__track {
    width: 100%;
}

#relatos-de-alunos .student-stories__slide {
    width: 100%;
}

#relatos-de-alunos .student-stories__slide[hidden] {
    display: none;
}


/* --------------------------
   Depoimentos
-------------------------- */

#relatos-de-alunos .student-testimonial {
    position: relative;

    padding: 1rem 0;

    text-align: left;

    border-top: 2px solid rgba(200, 161, 90, 0.75);
}

#relatos-de-alunos .student-testimonial:last-child {
    border-bottom: 2px solid rgba(200, 161, 90, 0.75);
}

#relatos-de-alunos .student-testimonial__quote {
    margin: 0;
}

#relatos-de-alunos .student-testimonial__quote p {
    display: inline;

    color: var(--color-text);

    font-size: clamp(1.08rem, 1.35vw, 1.4rem);
    font-weight: var(--fw-medium);
    line-height: 1.5;
}

#relatos-de-alunos .student-testimonial__quote p::before {
    content: "“";
}

#relatos-de-alunos .student-testimonial__quote p::after {
    content: "”";
}

#relatos-de-alunos .student-testimonial__author {
    display: inline;

    margin-left: 0.35rem;

    color: var(--color-primary);

    font-size: clamp(1.05rem, 1.25vw, 1.3rem);
    font-weight: var(--fw-medium);
    line-height: 1.45;
}


/* --------------------------
   Controles
-------------------------- */

#relatos-de-alunos .student-stories__controls {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: var(--space-md);

    margin-top: var(--space-md);
}

#relatos-de-alunos .student-stories__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 1px solid var(--color-primary);
    border-radius: var(--radius-full);

    background-color: transparent;
    color: var(--color-primary);

    cursor: pointer;

    font-size: 2rem;
    line-height: 1;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

#relatos-de-alunos .student-stories__button:hover {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);

    transform: translateY(-1px);
}

#relatos-de-alunos .student-stories__button:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 3px;
}

#relatos-de-alunos .student-stories__status {
    min-width: 72px;

    color: var(--color-text-secondary);

    font-size: 0.95rem;
    font-weight: var(--fw-medium);
}


/* --------------------------
   Nota institucional
-------------------------- */

#relatos-de-alunos .student-stories__privacy {
    max-width: 940px;

    margin: var(--space-sm) auto 0;

    color: var(--color-text-secondary);

    font-size: 0.92rem;
    font-weight: var(--fw-regular);
    line-height: 1.45;
}


/* --------------------------
   Pergunta de transição
-------------------------- */

#relatos-de-alunos .student-stories__transition {
    max-width: 1100px;

    margin: var(--space-lg) auto 0;

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 2.7vw, 3.15rem);
    font-weight: var(--fw-regular);
    line-height: 1.08;
    text-align: center;
}


/* --------------------------
   Responsividade
-------------------------- */

@media (max-width: 1024px) {

    #relatos-de-alunos .student-stories__grid {
        grid-template-columns: 1fr;

        gap: var(--space-2xl);
    }

    #relatos-de-alunos .student-stories__image {
        max-width: 560px;
    }

}

@media (max-width: 768px) {

    #relatos-de-alunos {
        padding-top: 3rem;
    }

    #relatos-de-alunos .student-stories__header {
        margin-bottom: var(--space-md);
    }

    #relatos-de-alunos .student-testimonial {
        padding: 1rem 0;
    }

    #relatos-de-alunos .student-testimonial__quote p,
    #relatos-de-alunos .student-testimonial__author {
        font-size: 1rem;
    }

    #relatos-de-alunos .student-stories__image {
        max-width: 100%;
    }

}


/* ==========================
   FRAME 11
   OUTROS CAMINHOS
   ========================== */

#outros-caminhos {
    padding-top: 4rem;
    padding-bottom: 2.5rem;

    background-color: var(--color-background);
}

#outros-caminhos .pathways__container {
    text-align: center;
}


/* --------------------------
   Cabeçalho
-------------------------- */

#outros-caminhos .pathways__header {
    max-width: 1380px;

    margin: 0 auto var(--space-lg);
}

#outros-caminhos .pathways__title {
    margin-bottom: var(--space-sm);

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.1rem, 2.9vw, 3.4rem);
    font-weight: var(--fw-regular);
    line-height: 1.08;
}

#outros-caminhos .pathways__intro {
    max-width: 1280px;

    margin: 0 auto;

    color: var(--color-text);

    font-size: clamp(1.05rem, 1.35vw, 1.45rem);
    font-weight: var(--fw-regular);
    line-height: 1.45;
}


/* --------------------------
   Estrutura principal
-------------------------- */

#outros-caminhos .pathways__grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.65fr);
    align-items: center;

    gap: clamp(2rem, 4vw, 4.5rem);
}


/* --------------------------
   Imagem
-------------------------- */

#outros-caminhos .pathways__media {
    margin: 0;
}

#outros-caminhos .pathways__image {
    display: block;

    width: 100%;
    max-width: 460px;
    aspect-ratio: 18 / 25;

    margin: 0 auto;

    object-fit: cover;
    object-position: center;

    border-radius: var(--radius-sm);
}


/* --------------------------
   Conteúdo
-------------------------- */

#outros-caminhos .pathways__content {
    text-align: center;
}

#outros-caminhos .pathways__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--space-xl) var(--space-2xl);
}


/* --------------------------
   Cards
-------------------------- */

#outros-caminhos .pathways-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#outros-caminhos .pathways-card__title {
    margin-bottom: var(--space-xs);

    color: var(--color-primary);

    font-size: clamp(1.55rem, 1.9vw, 2.15rem);
    font-weight: var(--fw-semibold);
    line-height: 1.15;
    text-transform: uppercase;
}

#outros-caminhos .pathways-card__description {
    max-width: 560px;

    margin: 0 auto var(--space-md);

    color: var(--color-text);

    font-size: clamp(1rem, 1.25vw, 1.3rem);
    font-weight: var(--fw-regular);
    line-height: 1.45;
}


/* --------------------------
   Botões
-------------------------- */

#outros-caminhos .pathways-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 245px;
    min-height: 66px;

    margin-top: auto;
    padding: 0.8rem 1.8rem;

    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-full);

    background:
        linear-gradient(
            180deg,
            #d7bb7c 0%,
            #b99556 52%,
            #8d6d3e 100%
        );

    color: var(--color-white);

    font-size: clamp(1.05rem, 1.3vw, 1.35rem);
    font-weight: var(--fw-bold);
    line-height: 1.08;
    text-align: center;
    text-decoration: none;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 8px 20px rgba(0, 0, 0, 0.28);

    transition:
        transform var(--transition-fast),
        filter var(--transition-fast),
        box-shadow var(--transition-fast);
}

#outros-caminhos .pathways-card__button:hover {
    filter: brightness(1.08);

    transform: translateY(-2px);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 12px 26px rgba(0, 0, 0, 0.34);
}

#outros-caminhos .pathways-card__button:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 4px;
}


/* --------------------------
   Contato
-------------------------- */

#outros-caminhos .pathways__contact {
    margin-top: var(--space-xl);
}

#outros-caminhos .pathways__contact-title {
    margin-bottom: 0.25rem;

    color: var(--color-primary);

    font-size: clamp(1.35rem, 1.7vw, 1.8rem);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
}

#outros-caminhos .pathways__contact-text {
    margin-bottom: 0.15rem;

    color: var(--color-text);

    font-size: clamp(1rem, 1.2vw, 1.25rem);
    font-weight: var(--fw-regular);
    line-height: 1.4;
}

#outros-caminhos .pathways__email {
    color: var(--color-text);

    font-size: clamp(1.2rem, 1.55vw, 1.65rem);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    text-decoration: none;

    transition: color var(--transition-fast);
}

#outros-caminhos .pathways__email:hover {
    color: var(--color-primary);
}

#outros-caminhos .pathways__email:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 4px;
}


/* --------------------------
   Fechamento institucional
-------------------------- */

#outros-caminhos .pathways__closing {
    max-width: 1300px;

    margin: var(--space-xl) auto 0;

    color: var(--color-primary);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 2.7vw, 3.15rem);
    font-weight: var(--fw-regular);
    line-height: 1.08;
    text-align: center;
}


/* --------------------------
   Responsividade
-------------------------- */

@media (max-width: 1100px) {

    #outros-caminhos .pathways__grid {
        grid-template-columns: 1fr;

        gap: var(--space-2xl);
    }

    #outros-caminhos .pathways__image {
        max-width: 520px;
    }

}

@media (max-width: 768px) {

    #outros-caminhos {
        padding-top: 3rem;
    }

    #outros-caminhos .pathways__cards {
        grid-template-columns: 1fr;

        gap: var(--space-xl);
    }

    #outros-caminhos .pathways-card__button {
        width: min(280px, 100%);
    }

    #outros-caminhos .pathways__image {
        max-width: 100%;
    }

}


/* ==========================
   FOOTER
   ========================== */

.site-footer {
    padding: 3.5rem 0;

    border-top: 1px solid rgba(200, 161, 90, 0.22);

    background-color: #0d0e12;
}

.site-footer__container {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.2fr)
        minmax(210px, 0.95fr)
        minmax(250px, 1fr)
        minmax(220px, 0.85fr);

    align-items: start;

    gap: clamp(2rem, 4vw, 4rem);
}


/* --------------------------
   Logo
-------------------------- */

.site-footer__brand {
    display: flex;
    align-items: flex-start;
}

.site-footer__logo-link {
    display: inline-block;
}

.site-footer__logo {
    display: block;

    width: min(500px, 100%);
    height: auto;
}


/* --------------------------
   Navegação
-------------------------- */

.site-footer__navigation {
    display: flex;
    flex-direction: column;

    gap: 0.8rem;
}

.site-footer__navigation a {
    color: var(--color-primary);

    font-size: clamp(1rem, 1.2vw, 1.2rem);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    text-decoration: none;

    transition: color var(--transition-fast);
}

.site-footer__navigation a:hover,
.site-footer__navigation a:focus-visible {
    color: var(--color-primary-light);
}

.site-footer__navigation a:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 4px;
}


/* --------------------------
   Frase institucional
-------------------------- */

.site-footer__institutional {
    display: flex;
    align-items: center;

    width: 100%;
    max-width: 340px;
    min-height: 100%;

    margin-inline: auto;
}

.site-footer__institutional p {
    color: var(--color-text);

    font-size: clamp(1.1rem, 1.35vw, 1.55rem);
    font-weight: var(--fw-regular);
    line-height: 1.45;
    text-align: center;
}


/* --------------------------
   Contato
-------------------------- */

.site-footer__contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.site-footer__contact-title {
    margin-bottom: 0.6rem;

    color: var(--color-primary);

    font-size: clamp(1.2rem, 1.45vw, 1.55rem);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    text-transform: uppercase;
}

.site-footer__email {
    margin-bottom: 0.75rem;

    color: var(--color-text);

    font-size: clamp(1.15rem, 1.4vw, 1.45rem);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    text-decoration: none;

    overflow-wrap: anywhere;

    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}

.site-footer__email:hover,
.site-footer__email:focus-visible {
    color: var(--color-primary);
}

.site-footer__email:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 4px;
}

.site-footer__contact-link {
    margin-bottom: 1.5rem;

    color: var(--color-primary);

    font-size: 1rem;
    line-height: 1.4;
    text-decoration: none;

    transition: color var(--transition-fast);
}

.site-footer__contact-link:hover,
.site-footer__contact-link:focus-visible {
    color: var(--color-primary-light);
}

.site-footer__contact-link:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 4px;
}


/* --------------------------
   Direitos
-------------------------- */

.site-footer__rights {
    margin-bottom: 0.8rem;

    color: var(--color-text-secondary);

    font-size: 1rem;
    line-height: 1.45;
}

.site-footer__copyright {
    margin-top: 1rem;
    padding-top: 1rem;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    color: var(--color-text-secondary);

    font-size: 1rem;
    line-height: 1.45;
}


/* ==========================
   RESPONSIVIDADE
   ========================== */

@media (max-width: 1100px) {

    .site-footer__container {
        grid-template-columns: 1fr 1fr;

        gap: 3rem;
    }

    .site-footer__institutional {
        max-width: 420px;
    }

}

@media (max-width: 768px) {

    .site-footer {
        padding: 3rem 0;
    }

    .site-footer__container {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .site-footer__brand {
        justify-content: center;
    }

    .site-footer__logo {
        width: min(430px, 100%);
    }

    .site-footer__navigation {
        align-items: center;
    }

    .site-footer__institutional {
        max-width: 520px;
    }

    .site-footer__contact {
        align-items: center;
    }

}





/* ==========================
   TABLETS
   ========================== */

@media (max-width: 1024px) {

    .header__menu {
        gap: var(--space-md);
    }

    .header__menu a {
        font-size: 0.8rem;
    }

    .hero__container,
    .search__container,
    .method__container {
        grid-template-columns: 1fr;
    }

    .hero__visual {
        min-height: 360px;
    }

    .cycles__grid,
    .reflections__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

   
}


/* ==========================
   CELULARES
   ========================== */

@media (max-width: 768px) {

    .header__container {
        min-height: 72px;
    }

    .header__logo {
        height: 46px;
    }

    .header__menu-button {
        display: flex;
    }

    .header__navigation {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;

        display: none;

        padding: var(--space-md);

        border-bottom: 1px solid var(--color-border);

        background-color: var(--color-background);
    }

    .header__navigation.is-open {
        display: block;
    }

    .header__menu {
        flex-direction: column;
        align-items: stretch;

        gap: 0;
    }

    .header__menu a {
        display: block;

        padding: var(--space-sm);

        font-size: var(--fs-sm);
    }

    .hero {
        min-height: auto;

        padding-block: var(--space-3xl);
    }

    .hero__container {
        gap: var(--space-xl);
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .button {
        width: 100%;
    }

    .hero__visual {
        min-height: 300px;
    }

    .hero__indicators {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: var(--space-lg);
    }

    .hero__indicators .indicator {
        padding-inline: var(--space-sm);
    }

    .hero__indicators .indicator:nth-child(2) {
        border-right: none;
    }

    .cycles__grid,
    .reflections__grid {
        grid-template-columns: 1fr;
    }

    .formation-topic {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .formation-topic__icon {
        margin-inline: auto;
    }

    .start__content,
    .testimonial {
        padding: var(--space-lg);
    }

    .footer__container {
        grid-template-columns: 1fr;

        gap: var(--space-xl);
    }

    .footer__institutional {
        grid-column: auto;
    }
}


/* ==========================
   CELULARES PEQUENOS
   ========================== */

@media (max-width: 480px) {

    .container {
        width: min(100% - 1.5rem, var(--container-width));
    }

    /* Hero */

    .hero {
        padding-block: 2.5rem;
    }

    .hero__container {
        min-height: auto;
        gap: 1.5rem;
    }

    .hero__content {
        padding-top: 0;
        padding-bottom: 0;
    }

    .hero__indicators {
        grid-template-columns: 1fr;

        gap: 0;

        margin-top: 1.5rem;
        padding-top: 0.75rem;
    }

    .hero__indicators .indicator {
        padding: 1.15rem 0;

        border-right: none !important;
        border-bottom: 1px solid var(--color-border);
    }

    .hero__indicators .indicator:last-child {
        border-bottom: none;
    }

    .hero__visual {
        min-height: 260px;
    }

    /* A Busca */

    .search__visual {
        min-height: 0;
        height: auto;

        margin-bottom: 1.5rem;
    }

    .search__image {
        height: auto;
    }

    /* Controles */

    .testimonials__controls {
        flex-direction: column;
    }

    .testimonials__button {
        width: 100%;
    }

}

/* ==========================
   JORNADA — RESPONSIVIDADE
   ========================== */

@media (max-width: 1024px) {

    .journey__stages {
        grid-template-columns: repeat(4, minmax(0, 1fr));

        gap: 1.2rem 0.8rem;
    }

}

@media (max-width: 640px) {

    .journey__stages {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 1.1rem 0.8rem;
    }

}

@media (max-width: 420px) {

    .journey__stages {
        grid-template-columns: 1fr;

        gap: 0.9rem;
    }

    .journey__stage {
        padding: 0.7rem 0;

        border-bottom: 1px solid rgba(200, 161, 90, 0.14);
    }

    .journey__stage:last-child {
        border-bottom: 0;
    }

}