/* ==========================================================================
   IGREJA JESUS É BOM
   HOME / INDEX

   Direção visual:
   - Moderna
   - Minimalista
   - Acolhedora
   - Premium
   - Editorial
   - Responsiva
   ========================================================================== */


/* ==========================================================================
   VARIÁVEIS
   ========================================================================== */

:root {

    --dourado: #dc9a5c;
    --dourado-claro: #e9b57f;
    --dourado-escuro: #b9783f;

    --preto: #080808;
    --preto-2: #0e0e0f;
    --preto-3: #151516;

    --creme: #f5f1ea;
    --creme-2: #ece5da;

    --branco: #ffffff;

    --texto: #171717;
    --texto-suave: #65615c;

    --borda-clara: rgba(19, 18, 17, .10);
    --borda-escura: rgba(255, 255, 255, .10);

    --container: 1320px;

    --header-h: 92px;

    --ease-suave: cubic-bezier(.22, 1, .36, 1);
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
}


/* ==========================================================================
   RESET
   ========================================================================== */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    background: var(--creme);
    color: var(--texto);

    font-family:
        "Manrope",
        "Segoe UI",
        Arial,
        sans-serif;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


body,
button,
a {
    -webkit-tap-highlight-color: transparent;
}


img,
svg,
video {
    display: block;
}


img,
video {
    max-width: 100%;
}


button,
a {
    font: inherit;
}


a {
    color: inherit;
}


::selection {
    background: var(--dourado);
    color: var(--preto);
}


/* ==========================================================================
   ACESSIBILIDADE
   ========================================================================== */

.sr-only {

    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


.skip-link {

    position: fixed;

    top: -80px;
    left: 24px;

    z-index: 9999;

    padding: 12px 18px;

    background: var(--dourado);
    color: var(--preto);

    border-radius: 999px;

    text-decoration: none;

    font-weight: 700;

    transition: top .25s ease;
}


.skip-link:focus {
    top: 20px;
}


a:focus-visible,
button:focus-visible {

    outline: 2px solid var(--dourado);
    outline-offset: 4px;
}


/* ==========================================================================
   CONTAINERS
   ========================================================================== */

.section-container,
.hero-container,
.horarios-container,
.footer-container {

    width: min(
        calc(100% - 96px),
        var(--container)
    );

    margin-inline: auto;
}


/* ==========================================================================
   EYEBROW / PEQUENOS TÍTULOS
   ========================================================================== */

.section-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    font-size: .72rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: var(--dourado-escuro);
}


.section-eyebrow::before {

    content: "";

    width: 28px;
    height: 1px;

    background: currentColor;

    opacity: .8;
}


.section-eyebrow--light {
    color: var(--dourado-claro);
}


/* ==========================================================================
   BOTÃO PRINCIPAL
   ========================================================================== */

.btn-primary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0 28px;

    background: var(--dourado);
    color: #111;

    border:
        1px solid
        var(--dourado);

    border-radius: 999px;

    text-decoration: none;

    font-size: .83rem;

    font-weight: 700;

    letter-spacing: .035em;

    transition:
        transform .3s var(--ease-suave),
        background .3s ease,
        box-shadow .3s ease;
}


.btn-primary:hover {

    background: var(--dourado-claro);

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 38px
        rgba(220, 154, 92, .22);
}


.btn-primary--dark {
    color: #111;
}


/* ==========================================================================
   BOTÃO EM FORMATO DE LINK
   ========================================================================== */

.btn-texto {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    font-size: .84rem;

    font-weight: 700;

    letter-spacing: .02em;
}


.btn-texto svg {

    width: 19px;
    height: 19px;

    transition:
        transform .3s
        var(--ease-suave);
}


.btn-texto:hover svg {

    transform:
        translateX(5px);
}


.btn-texto--light {
    color:
        rgba(
            255,
            255,
            255,
            .86
        );
}


.btn-texto--dark {
    color: var(--texto);
}


/* ==========================================================================
   ANIMAÇÕES DE REVEAL
   ========================================================================== */

.reveal,
.horarios [data-reveal] {

    opacity: 0;

    transform:
        translateY(28px);

    transition:
        opacity .8s var(--ease-suave),
        transform .8s var(--ease-suave);
}


.reveal-visible,
.horarios [data-reveal].is-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.header {

    position: absolute;

    inset:
        0
        0
        auto;

    z-index: 1000;

    height:
        var(--header-h);

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .58),
            rgba(0, 0, 0, .08)
        );
}


/* ==========================================================================
   CONTAINER DA NAVEGAÇÃO
   ========================================================================== */

.nav-container {

    width:
        min(
            calc(100% - 72px),
            1540px
        );

    height: 100%;

    margin-inline: auto;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 32px;
}


/* ==========================================================================
   LOGO
   ========================================================================== */

.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

    color: #fff;

    text-decoration: none;
}


.logo img {

    width: 48px;
    height: 48px;

    object-fit: contain;
}


.logo span {

    font-size: .96rem;

    font-weight: 700;

    letter-spacing: .01em;
}


/* ==========================================================================
   MENU PRINCIPAL
   ========================================================================== */

.menu {

    display: flex;

    align-items: center;

    gap: 28px;
}


.menu > a,
.drop-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 10px 0;

    border: 0;

    background: transparent;

    color:
        rgba(
            255,
            255,
            255,
            .84
        );

    text-decoration: none;

    font-size: .77rem;

    font-weight: 600;

    white-space: nowrap;

    cursor: pointer;

    transition:
        color .25s ease;
}


/* Linha inferior */
.menu > a:not(.btn-contato)::after,
.drop-btn::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 2px;

    height: 1px;

    background:
        var(--dourado);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform
        .3s
        var(--ease-suave);
}


.menu > a:hover,
.drop-btn:hover,
.dropdown.open .drop-btn {

    color: #fff;
}


.menu > a:not(.btn-contato):hover::after,
.dropdown:hover .drop-btn::after,
.dropdown.open .drop-btn::after {

    transform:
        scaleX(1);

    transform-origin:
        left;
}


/* ==========================================================================
   CHEVRON
   ========================================================================== */

.nav-chevron {

    width: 16px;
    height: 16px;

    transition:
        transform .25s ease;
}


.dropdown:hover .nav-chevron,
.dropdown.open .nav-chevron {

    transform:
        rotate(180deg);
}


/* ==========================================================================
   BOTÃO FALE CONOSCO
   ========================================================================== */

.btn-contato {

    min-height: 42px;

    padding:
        0 20px !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .24
        );

    border-radius: 999px;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    backdrop-filter:
        blur(10px);

    color:
        #fff !important;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s
        var(--ease-suave) !important;
}


.btn-contato:hover {

    background:
        var(--dourado);

    border-color:
        var(--dourado);

    color:
        #111 !important;

    transform:
        translateY(-2px);
}


/* ==========================================================================
   DROPDOWNS
   ========================================================================== */

.dropdown {
    position: relative;
}


.dropdown-menu {

    position: absolute;

    top:calc(100% + 8px);
    left: -18px;

    min-width: 228px;

    padding: 10px;

    background:
        rgba(
            12,
            12,
            13,
            .94
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    border-radius: 16px;

    box-shadow:
        0 26px 70px
        rgba(
            0,
            0,
            0,
            .34
        );

    backdrop-filter:
        blur(18px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(10px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s
        var(--ease-suave);
}

.dropdown-menu::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 0;

    width: 100%;
    height: 12px;

    background: transparent;
}

.dropdown:hover .dropdown-menu,
.dropdown.open .dropdown-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0);
}


.dropdown-menu a {

    display: block;

    padding: 12px 13px;

    border-radius: 10px;

    color:
        rgba(
            255,
            255,
            255,
            .72
        );

    text-decoration: none;

    text-align: left;

    font-size: .78rem;

    line-height: 1.35;

    transition:
        background .22s ease,
        color .22s ease,
        transform .22s ease;
}


.dropdown-menu a:hover {

    background:
        rgba(
            255,
            255,
            255,
            .06
        );

    color:
        var(--dourado-claro);

    transform:
        translateX(3px);
}


/* ==========================================================================
   BOTÃO MENU MOBILE
   ========================================================================== */

.menu-toggle {

    width: 44px;
    height: 44px;

    display: none;

    position: relative;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .18
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            .06
        );

    cursor: pointer;
}


.menu-toggle-line {

    position: absolute;

    left: 12px;

    width: 18px;

    height: 1px;

    background: #fff;

    transition:
        transform .25s ease,
        top .25s ease;
}


.menu-toggle-line:first-child {
    top: 17px;
}


.menu-toggle-line:last-child {
    top: 24px;
}


.menu-toggle[aria-expanded="true"]
.menu-toggle-line:first-child {

    top: 20px;

    transform:
        rotate(45deg);
}


.menu-toggle[aria-expanded="true"]
.menu-toggle-line:last-child {

    top: 20px;

    transform:
        rotate(-45deg);
}


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

.hero-video {

    position: relative;

    min-height: 820px;

    height: 100svh;

    max-height: 1040px;

    overflow: hidden;

    isolation: isolate;

    background: #050505;
}


/* Vídeo */
.hero-video-media {

    position: absolute;

    inset: 0;

    z-index: -4;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


/* Overlay */
.hero-video-overlay {

    position: absolute;

    inset: 0;

    z-index: -3;

    background:

        linear-gradient(
            90deg,
            rgba(6, 6, 7, .90) 0%,
            rgba(6, 6, 7, .70) 37%,
            rgba(6, 6, 7, .24) 72%,
            rgba(6, 6, 7, .22) 100%
        ),

        linear-gradient(
            0deg,
            rgba(6, 6, 7, .54) 0%,
            transparent 42%,
            rgba(6, 6, 7, .16) 100%
        );
}


/* Textura muito sutil */
.hero-grain {

    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    opacity: .16;

    background-image:
        radial-gradient(
            rgba(
                255,
                255,
                255,
                .18
            )
            .6px,
            transparent .6px
        );

    background-size:
        5px 5px;

    mix-blend-mode:
        soft-light;
}


/* Container */
.hero-container {

    height: 100%;

    display: flex;

    align-items: center;
}


/* Conteúdo */
.hero-video-conteudo {

    width:
        min(
            760px,
            68vw
        );

    padding-top: 62px;

    color: #fff;

    text-align: left;
}


/* Título */
.hero-video-conteudo h1 {
    margin: 24px 0 24px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            4.6rem,
            7.2vw,
            7.6rem
        );

    font-weight: 500;

    line-height: .99;

    letter-spacing: -.045em;
}


/* Destaques itálicos */
.hero-video-conteudo h1 em,
.essencia h2 em,
.horarios h2 em,
.primeira-vez h2 em,
.cta-final h2 em {

    color:
        var(--dourado-claro);

    font-weight: 400;
}


/* Descrição */
.hero-video-conteudo p {
    width: max-content;
    max-width: 760px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            .72
        );

    font-size:
        clamp(
            .98rem,
            1.15vw,
            1.08rem
        );

    line-height: 1.8;
}


/* Ações */
.hero-acoes {

    display: flex;

    align-items: center;

    gap: 28px;

    margin-top: 38px;
}


/* ==========================================================================
   NOSSA ESSÊNCIA
   ========================================================================== */

.essencia {

    position: relative;

    padding:
        138px 0 126px;

    background:
        var(--creme);

    overflow: hidden;
}


/* Marca gigante no fundo */
.essencia::after {

    content: "IJB";

    position: absolute;

    right: -20px;

    top: 58px;

    color:
        rgba(23, 23, 23, .025);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            12rem,
            28vw,
            31rem
        );

    font-weight: 700;

    line-height: .7;

    letter-spacing: -.08em;

    pointer-events: none;
}


/* Cabeçalho */
.essencia-intro {

    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(280px, .6fr);

    gap: 80px;

    align-items: end;

    padding-bottom: 68px;

    border-bottom:
        1px solid
        var(--borda-clara);
}


/* Títulos */
.essencia h2,
.primeira-vez h2 {

    margin:
        20px 0 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            3.8rem,
            6vw,
            6.4rem
        );

    font-weight: 50;

    line-height: .99;

    letter-spacing: -.045em;
}

.essencia h2 em,
.primeira-vez h2 em {
    color: var(--dourado-escuro);
}

.essencia h2 em {
    display: inline-block;
    transform: translateX(32px);
}

/* Texto lateral */
.essencia-intro > p {

    max-width: 440px;

    margin:
        0 0 8px;

    color:
        var(--texto-suave);

    font-size: .98rem;

    line-height: 1.85;
}


/* ==========================================================================
   GRID DOS VALORES
   ========================================================================== */

.valores-grid {

    position: relative;

    z-index: 1;

    display: grid;

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

    margin-top: 0;
}


/* Card editorial */
.valor-item {

    min-height: 390px;

    padding:
        42px
        34px
        36px
        0;

    border-right:
        1px solid
        var(--borda-clara);
}


.valor-item:not(:first-child) {

    padding-left: 34px;
}


.valor-item:last-child {

    border-right: 0;
}


/* Número */
.valor-numero {

    display: block;

    margin-bottom: 58px;

    color:
        rgba(
            23,
            23,
            23,
            .35
        );

    font-size: .68rem;

    font-weight: 700;

    letter-spacing: .16em;
}


/* Ícone */
.valor-icone {

    width: 42px;
    height: 42px;

    margin-bottom: 30px;

    color:
        var(--dourado-escuro);
}


.valor-icone svg {

    width: 100%;
    height: 100%;
}


/* Título */
.valor-item h3 {

    margin:
        0 0 14px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.75rem;

    font-weight: 600;

    line-height: 1.05;
}


/* Texto */
.valor-item p {

    margin: 0;

    color:
        var(--texto-suave);

    font-size: .84rem;

    line-height: 1.72;
}


/* Link final */
.essencia-link {

    position: relative;

    z-index: 1;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 54px;

    color: var(--texto);

    text-decoration: none;

    font-size: .84rem;

    font-weight: 700;
}


.essencia-link svg {

    width: 19px;
    height: 19px;

    transition:
        transform
        .3s
        var(--ease-suave);
}


.essencia-link:hover svg {

    transform:
        translateX(5px);
}


/* ==========================================================================
   NOSSOS ENCONTROS
   ========================================================================== */

.horarios {

    position: relative;

    isolation: isolate;

    padding:
        138px 0 122px;

    overflow: hidden;

    background:
        var(--preto);

    color: #fff;
}


/* ==========================================================================
   FUNDO DOS HORÁRIOS
   ========================================================================== */

.horarios-bg {

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;
}


/* Grid extremamente sutil */
.horarios-bg::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .16;

    background-image:

        linear-gradient(
            rgba(
                255,
                255,
                255,
                .032
            )
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(
                255,
                255,
                255,
                .032
            )
            1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 80%
        );
}


/* Glows */
.glow {

    position: absolute;

    border-radius: 50%;

    filter:
        blur(100px);

    opacity: .10;
}


.glow-1 {

    width: 460px;
    height: 460px;

    top: -120px;

    right: 8%;

    background:
        var(--dourado);
}


.glow-2 {

    width: 360px;
    height: 360px;

    bottom: -160px;

    left: 10%;

    background:
        #8b5a2e;
}


/* ==========================================================================
   CABEÇALHO DOS HORÁRIOS
   ========================================================================== */

.horarios-header {

    margin-bottom: 72px;
}


.horarios-heading-row {

    display: grid;

    grid-template-columns:
        1.35fr
        .65fr;

    gap: 80px;

    align-items: end;

    margin-top: 24px;
}


.horarios h2 {

    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            4.2rem,
            6.7vw,
            7rem
        );

    font-weight: 500;

    line-height: .82;

    letter-spacing: -.045em;
}


.horarios-heading-row > p {

    max-width: 420px;

    margin:
        0 0 5px;

    color:
        rgba(
            255,
            255,
            255,
            .52
        );

    font-size: .95rem;

    line-height: 1.8;
}


/* ==========================================================================
   GRID DE HORÁRIOS
   ========================================================================== */

.horarios-grid {

    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        var(--borda-escura);

    border-bottom:
        1px solid
        var(--borda-escura);
}


/* ==========================================================================
   CARD DE HORÁRIO
   ========================================================================== */

.horario-card {

    position: relative;

    min-height: 410px;

    display: flex;

    flex-direction: column;

    padding:
        34px 26px 30px;

    border-right:
        1px solid
        var(--borda-escura);

    background:
        transparent;

    overflow: hidden;

    transition:
        background .35s ease,
        transform .35s
        var(--ease-suave);
}


.horario-card:last-child {

    border-right: 0;
}


/* Overlay dourado */
.horario-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(
                220,
                154,
                92,
                .12
            ),
            rgba(
                220,
                154,
                92,
                .02
            )
        );

    opacity: 0;

    transition:
        opacity .35s ease;
}


.horario-card:hover::before,
.horario-card--proximo::before {

    opacity: 1;
}


.horario-card:hover {

    background:
        rgba(
            255,
            255,
            255,
            .018
        );
}


/* ==========================================================================
   SELO DO PRÓXIMO ENCONTRO
   ========================================================================== */

.horario-selo {

    position: relative;

    z-index: 1;

    min-height: 24px;

    align-self: flex-start;

    display: inline-flex;

    align-items: center;

    padding:
        0 10px;

    border:
        1px solid
        rgba(
            220,
            154,
            92,
            .30
        );

    border-radius: 999px;

    color:
        var(--dourado-claro);

    font-size: .58rem;

    font-weight: 700;

    letter-spacing: .11em;

    text-transform: uppercase;

    opacity: 0;

    visibility: hidden;
}


.horario-card--proximo
.horario-selo {

    opacity: 1;

    visibility: visible;
}


/* ==========================================================================
   TOPO DO CARD
   ========================================================================== */

.horario-topo,
.horario-card-content {

    position: relative;

    z-index: 1;
}


.horario-topo {

    margin-top: 42px;
}


.horario-dia {

    display: block;

    margin-bottom: 10px;

    color:
        rgba(
            255,
            255,
            255,
            .42
        );

    font-size: .66rem;

    font-weight: 700;

    letter-spacing: .15em;

    text-transform: uppercase;
}


.horario-hora {

    display: flex;

    align-items: baseline;

    gap: 2px;
}


.hora-numero {

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 4.15rem;

    font-weight: 500;

    line-height: .9;

    letter-spacing: -.04em;
}


.hora-unidade {

    color:
        var(--dourado);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.7rem;
}


/* ==========================================================================
   CONTEÚDO DO CARD
   ========================================================================== */

.horario-card-content {

    display: flex;

    flex: 1;

    flex-direction: column;

    margin-top: 36px;
}


.horario-nome {

    margin:
        0 0 10px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.48rem;

    font-weight: 600;

    line-height: 1.05;
}


.horario-obs {

    margin:
        -3px 0 10px;

    color:
        var(--dourado-claro);

    font-size: .66rem;

    font-weight: 600;
}


.horario-desc {

    margin:
        0 0 22px;

    color:
        rgba(
            255,
            255,
            255,
            .46
        );

    font-size: .78rem;

    line-height: 1.68;
}


/* ==========================================================================
   METADADOS
   ========================================================================== */

.horario-meta {

    display: none;

    gap: 8px;

    flex-direction: column;

    margin-top: auto;

    margin-bottom: 16px;

    padding-top: 16px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );
}


.horario-card--proximo
.horario-meta {

    display: flex;
}


.horario-meta-item {

    color:
        rgba(
            255,
            255,
            255,
            .40
        );

    font-size: .67rem;
}


/* ==========================================================================
   LINK DO HORÁRIO
   ========================================================================== */

.horario-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: auto;

    color:
        var(--dourado-claro);

    text-decoration: none;

    font-size: .74rem;

    font-weight: 700;

    transition:
        gap .25s
        var(--ease-suave),
        color .25s ease;
}


.horario-link:hover {

    gap: 12px;

    color: #fff;
}

/* ==========================================================================
   PREGAÇÕES
   ========================================================================== */

.pregacoes {

    position: relative;

    padding:
        138px 0 120px;

    background:
        var(--preto);

    color: #fff;

    overflow: hidden;
}


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

.pregacoes-header {

    margin-bottom: 64px;
}


.pregacoes-heading-row {

    display: grid;

    grid-template-columns:
        1.35fr
        .65fr;

    gap: 80px;

    align-items: end;

    margin-top: 24px;
}

.pregacoes h2 {
    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            4.2rem,
            6.4vw,
            6.8rem
        );

    font-weight: 500;

    line-height: .98;

    letter-spacing: -.045em;
}

.pregacoes h2 em {
    display: inline-block;

    margin-top: 6px;

    transform: translateX(14px);

    color: var(--dourado-claro);

    font-weight: 400;
}

.pregacoes-heading-row > p {

    max-width: 420px;

    margin:
        0 0 6px;

    color:
        rgba(
            255,
            255,
            255,
            .52
        );

    font-size: .94rem;

    line-height: 1.8;
}


/* ==========================================================================
   SANFONA
   ========================================================================== */

.pregacoes-grid {

    display: flex;

    gap: 16px;

    width: 100%;
}


/* Card normal */
.pregacao-card {

    flex: 1 1 0;

    min-width: 0;

    transition:
        flex .55s var(--ease-suave);
}


/* Quando o mouse entra na área */
.pregacoes-grid:hover
.pregacao-card {

    flex: .82 1 0;
}


/* Card ativo */
.pregacoes-grid
.pregacao-card:hover {

    flex: 1.75 1 0;
}


/* ==========================================================================
   LINK
   ========================================================================== */

.pregacao-link {

    display: block;

    width: 100%;

    color: inherit;

    text-decoration: none;
}


/* ==========================================================================
   THUMBNAIL
   ========================================================================== */

.pregacao-thumb {

    position: relative;

    width: 100%;
    height: 360px;

    overflow: hidden;

    border-radius: 18px;

    background: #111;

    isolation: isolate;
}


/* Imagem */
.pregacao-thumb > img {

    position: absolute;

    inset: 0;

    z-index: -3;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform .7s var(--ease-suave),
        filter .45s ease;
}


/* ==========================================================================
   OVERLAY
   ========================================================================== */

.pregacao-overlay {

    position: absolute;

    inset: 0;

    z-index: -2;

    background:

        linear-gradient(
            180deg,
            rgba(0, 0, 0, .05) 10%,
            rgba(0, 0, 0, .08) 35%,
            rgba(0, 0, 0, .32) 62%,
            rgba(0, 0, 0, .90) 100%
        );

    transition:
        background .4s ease;
}


/* Overlay extra lateral no hover */
.pregacao-thumb::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .30),
            transparent 58%
        );

    opacity: 0;

    transition:
        opacity .4s ease;
}


/* ==========================================================================
   INFORMAÇÕES
   ========================================================================== */

.pregacao-info {

    position: absolute;

    left: 22px;
    right: 22px;

    bottom: 22px;

    z-index: 3;

    transform:
        translateY(0);

    transition:
        transform .45s var(--ease-suave);
}


/* Tema */
.pregacao-info h3 {

    margin:
        0 0 8px;

    color: #fff;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

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

    font-weight: 600;

    line-height: 1.05;

    letter-spacing: -.02em;

    transition:
        font-size .45s var(--ease-suave),
        color .3s ease;
}


/* Pregador */
.pregacao-pregador {

    display: block;

    margin-bottom: 5px;

    color:
        rgba(
            255,
            255,
            255,
            .76
        );

    font-size: .70rem;

    font-weight: 600;

    line-height: 1.3;
}


/* Data */
.pregacao-data {

    display: block;

    color:
        var(--dourado-claro);

    font-size: .60rem;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;
}


/* ==========================================================================
   BOTÃO PLAY
   ========================================================================== */

.pregacao-play {

    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 3;

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .26
        );

    border-radius: 50%;

    background:
        rgba(
            0,
            0,
            0,
            .26
        );

    color: #fff;

    backdrop-filter:
        blur(8px);

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .35s var(--ease-suave);
}


.pregacao-play svg {

    width: 18px;
    height: 18px;
}


/* ==========================================================================
   HOVER
   ========================================================================== */

.pregacao-card:hover
.pregacao-thumb > img {

    transform:
        scale(1.055);
}


/* Escurece os outros cards */
.pregacoes-grid:hover
.pregacao-card:not(:hover)
.pregacao-thumb > img {

    filter:
        brightness(.64);
}


/* Card ativo continua vivo */
.pregacao-card:hover
.pregacao-thumb > img {

    filter:
        brightness(1);
}


.pregacao-card:hover
.pregacao-thumb::after {

    opacity: 1;
}


.pregacao-card:hover
.pregacao-play {

    background:
        var(--dourado);

    border-color:
        var(--dourado);

    color: #111;

    transform:
        scale(1.07);
}


.pregacao-card:hover
.pregacao-info {

    transform:
        translateY(-4px);
}


.pregacao-card:hover
.pregacao-info h3 {

    color:
        var(--dourado-claro);

    font-size:
        clamp(
            1.55rem,
            1.8vw,
            2rem
        );
}


/* ==========================================================================
   FOOTER DA SEÇÃO
   ========================================================================== */

.pregacoes-footer {

    display: flex;

    justify-content:
        flex-end;

    margin-top: 44px;
}


.pregacoes-ver-todas {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding:
        14px 0 8px;

    border-bottom:
        1px solid
        rgba(
            220,
            154,
            92,
            .48
        );

    color: #fff;

    text-decoration: none;

    font-size: .80rem;

    font-weight: 700;
}


.pregacoes-ver-todas svg {

    width: 19px;
    height: 19px;

    color:
        var(--dourado);

    transition:
        transform .3s var(--ease-suave);
}


.pregacoes-ver-todas:hover svg {

    transform:
        translateX(5px);
}


/* ==========================================================================
   NOTEBOOK
   ========================================================================== */

@media (max-width: 1180px) {

    .pregacao-thumb {

        height: 320px;
    }


    .pregacoes-grid
    .pregacao-card:hover {

        flex: 1.55 1 0;
    }

}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .pregacoes-heading-row {

        grid-template-columns:
            1fr;

        gap: 34px;
    }


    .pregacoes-grid {

        display: grid;

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

        gap: 18px;
    }


    .pregacao-card,
    .pregacoes-grid:hover .pregacao-card,
    .pregacoes-grid .pregacao-card:hover {

        flex: none;
    }


    .pregacao-thumb {

        height: auto;

        aspect-ratio: 16 / 10;
    }


    .pregacoes-grid:hover
    .pregacao-card:not(:hover)
    .pregacao-thumb > img {

        filter:
            brightness(1);
    }

}


/* ==========================================================================
   CELULAR
   ========================================================================== */

@media (max-width: 640px) {

    .pregacoes {

        padding:
            94px 0;
    }


    .pregacoes-header {

        margin-bottom: 42px;
    }


    .pregacoes h2 {

        font-size:
            clamp(
                3.5rem,
                15vw,
                4.8rem
            );

        line-height: .88;
    }


    .pregacoes-heading-row > p {

        font-size: .88rem;

        line-height: 1.75;
    }


    .pregacoes-grid {

        grid-template-columns:
            1fr;

        gap: 18px;
    }


    .pregacao-thumb {

        aspect-ratio: 16 / 10;

        border-radius: 16px;
    }


    .pregacao-info {

        left: 18px;
        right: 18px;

        bottom: 18px;
    }


    .pregacao-info h3 {

        font-size: 1.55rem;
    }


    .pregacao-pregador {

        font-size: .68rem;
    }


    .pregacao-data {

        font-size: .57rem;
    }


    .pregacao-play {

        top: 16px;
        right: 16px;

        width: 40px;
        height: 40px;
    }


    .pregacoes-footer {

        justify-content:
            flex-start;

        margin-top: 34px;
    }

}

/* ==========================================================================
   CTA PROGRAMAÇÃO
   ========================================================================== */

.horarios-cta {

    display: flex;

    justify-content:
        flex-end;

    margin-top: 46px;
}


.btn-programacao {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding:
        15px 0 9px;

    border-bottom:
        1px solid
        rgba(
            220,
            154,
            92,
            .48
        );

    color: #fff;

    text-decoration: none;

    font-size: .81rem;

    font-weight: 700;
}


.btn-programacao svg {

    width: 20px;
    height: 20px;

    color:
        var(--dourado);

    transition:
        transform
        .3s
        var(--ease-suave);
}


.btn-programacao:hover svg {

    transform:
        translateX(5px);
}


/* ==========================================================================
   PRIMEIRA VEZ AQUI
   ========================================================================== */

.primeira-vez {

    padding:
        142px 0;

    background:
        var(--creme);

    overflow: hidden;
}


.primeira-vez-grid {

    display: grid;

    grid-template-columns:
        .95fr
        1.05fr;

    gap: 100px;

    align-items: center;
}


/* Texto */
.primeira-vez-conteudo p {

    max-width: 570px;

    margin:
        30px 0 0;

    color:
        var(--texto-suave);

    font-size: .97rem;

    line-height: 1.85;
}


/* Botões */
.primeira-vez-acoes {

    display: flex;

    align-items: center;

    gap: 26px;

    margin-top: 38px;
}


/* ==========================================================================
   IMAGEM DA PRIMEIRA VEZ
   ========================================================================== */

.primeira-vez-visual {

    position: relative;

    min-height: 520px;

    overflow: hidden;

    border-radius: 28px;

    background: #e9e3da;

    box-shadow:
        0 28px 70px
        rgba(0, 0, 0, .08);
}


.primeira-vez-imagem {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform .8s
        var(--ease-suave);
}


.primeira-vez-visual:hover
.primeira-vez-imagem {

    transform:
        scale(1.025);
}


/* ==========================================================================
   CTA FINAL
   ========================================================================== */

.cta-final {

    position: relative;

    isolation: isolate;

    min-height: 660px;

    display: grid;

    place-items: center;

    overflow: hidden;

    background:
        var(--preto-2);

    color: #fff;
}


.cta-final-bg {

    position: absolute;

    inset: 0;

    z-index: -1;

    background:

        radial-gradient(
            circle at 78% 30%,
            rgba(
                220,
                154,
                92,
                .16
            ),
            transparent 28%
        ),

        linear-gradient(
            110deg,
            rgba(
                220,
                154,
                92,
                .04
            ),
            transparent 42%
        );
}


.cta-final-bg::before {

    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    right: -150px;

    top: -80px;

    border:
        1px solid
        rgba(
            220,
            154,
            92,
            .12
        );

    border-radius: 50%;

    box-shadow:

        0 0 0 90px
        rgba(
            220,
            154,
            92,
            .025
        ),

        0 0 0 180px
        rgba(
            220,
            154,
            92,
            .012
        );
}


.cta-final-conteudo {

    text-align: center;
}


.cta-final h2 {

    margin:
        24px 0 24px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            4.2rem,
            7vw,
            7.4rem
        );

    font-weight: 500;

    line-height: .82;

    letter-spacing: -.045em;
}


.cta-final-conteudo > p {

    max-width: 580px;

    margin:
        0 auto 34px;

    color:
        rgba(
            255,
            255,
            255,
            .54
        );

    font-size: .95rem;

    line-height: 1.8;
}


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

.footer {

    background: #060606;

    color: #fff;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .07
        );
}


/* ==========================================================================
   PARTE SUPERIOR
   ========================================================================== */

.footer-topo {

    display: grid;

    grid-template-columns:
        1.4fr
        .65fr
        .65fr
        1fr;

    gap: 72px;

    padding:
        82px 0 66px;
}


/* Logo */
.footer-logo {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;
}


.footer-logo img {

    width: 46px;
    height: 46px;

    object-fit: contain;
}


.footer-logo span {

    font-weight: 700;

    font-size: .94rem;
}


.footer-marca > p {

    max-width: 280px;

    margin:
        18px 0 0;

    color:
        rgba(
            255,
            255,
            255,
            .42
        );

    font-size: .78rem;

    line-height: 1.7;
}


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

.footer-coluna {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
}


.footer-coluna h3 {

    margin:
        0 0 8px;

    color:
        rgba(
            255,
            255,
            255,
            .38
        );

    font-size: .64rem;

    font-weight: 700;

    letter-spacing: .15em;

    text-transform: uppercase;
}


.footer-coluna a {

    color:
        rgba(
            255,
            255,
            255,
            .66
        );

    text-decoration: none;

    font-size: .77rem;

    transition:
        color .2s ease,
        transform .2s ease;
}


.footer-coluna a:hover {

    color:
        var(--dourado-claro);

    transform:
        translateX(2px);
}


.footer-coluna--destaque p {

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            .42
        );

    font-size: .76rem;

    line-height: 1.7;
}


.footer-coluna
.footer-cta {

    margin-top: 5px;

    color:
        var(--dourado-claro);

    font-weight: 700;
}


/* ==========================================================================
   BASE DO FOOTER
   ========================================================================== */

.footer-base {

    min-height: 82px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 24px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .07
        );
}


.footer-base p {

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            .30
        );

    font-size: .67rem;
}


/* ==========================================================================
   VOLTAR AO TOPO
   ========================================================================== */

.back-to-top {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-radius: 50%;

    background:
        transparent;

    color:
        rgba(
            255,
            255,
            255,
            .70
        );

    cursor: pointer;

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(8px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        background .25s ease,
        color .25s ease;
}


.back-to-top.visible {

    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(0);
}


.back-to-top:hover {

    background:
        var(--dourado);

    color: #111;
}


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

@media (max-width: 1180px) {

    :root {
        --header-h: 82px;
    }


    .section-container,
    .hero-container,
    .horarios-container,
    .footer-container {

        width:
            min(
                calc(100% - 64px),
                var(--container)
            );
    }


    .nav-container {

        width:
            calc(100% - 48px);
    }


    .logo span {

        display: none;
    }


    .menu {

        gap: 20px;
    }


    .menu > a,
    .drop-btn {

        font-size: .72rem;
    }


    /* HORÁRIOS */

    .horarios-grid {

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


    .horario-card:nth-child(3) {

        border-right: 0;
    }


    .horario-card:nth-child(n+4) {

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


    .horario-card:nth-child(4) {

        grid-column:
            1 / 2;
    }


    /* FOOTER */

    .footer-topo {

        grid-template-columns:
            1.2fr
            .7fr
            .7fr;
    }


    .footer-coluna--destaque {

        grid-column:
            1 / -1;

        padding-top: 26px;

        border-top:
            1px solid
            rgba(
                255,
                255,
                255,
                .07
            );
    }
}


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

@media (max-width: 900px) {

    .hero-video-conteudo {

        width: 82%;
    }
.essencia-intro,
    .horarios-heading-row,
    .primeira-vez-grid {

        grid-template-columns:
            1fr;

        gap: 38px;
    }


    .valores-grid {

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


    .valor-item:nth-child(2) {

        border-right: 0;
    }


    .valor-item:nth-child(n+3) {

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


    .primeira-vez-visual {

        min-height: 460px;
    }
}


/* ==========================================================================
   RESPONSIVIDADE
   MENU MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    .header {

        height: 78px;
    }


    .nav-container {

        width:
            calc(100% - 40px);
    }


    .logo img {

        width: 44px;
        height: 44px;
    }


    .menu-toggle {

        display: block;

        z-index: 1002;
    }


    /* Menu tela cheia */
    .menu {

        position: fixed;

        inset: 0;

        z-index: 1001;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding:
            108px
            28px
            34px;

        background:
            rgba(
                8,
                8,
                8,
                .985
            );

        overflow-y: auto;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(-12px);

        transition:
            opacity .3s ease,
            visibility .3s ease,
            transform
            .3s
            var(--ease-suave);
    }


    .menu.active {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0);
    }


    /* Links principais */
    .menu > a,
    .drop-btn {

        width: 100%;

        min-height: 62px;

        display: flex;

        justify-content:
            space-between;

        padding: 0;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                .09
            );

        color:
            rgba(
                255,
                255,
                255,
                .88
            );

        font-family:
            "Cormorant Garamond",
            Georgia,
            serif;

        font-size: 1.65rem;

        font-weight: 500;
    }


    .menu > a:not(.btn-contato)::after,
    .drop-btn::after {

        display: none;
    }


    /* Fale conosco */
    .btn-contato {

        min-height:
            54px !important;

        justify-content:
            center !important;

        margin-top: 24px;

        padding:
            0 22px !important;

        border-color:
            var(--dourado);

        background:
            var(--dourado);

        color:
            #111 !important;

        font-family:
            "Manrope",
            sans-serif !important;

        font-size:
            .82rem !important;

        font-weight:
            700 !important;
    }


    /* DROPDOWNS */

    .dropdown {

        width: 100%;
    }


    .dropdown-menu {

        position: static;

        min-width: 0;

        max-height: 0;

        padding:
            0 0 0 16px;

        border: 0;

        border-radius: 0;

        background:
            transparent;

        box-shadow: none;

        backdrop-filter: none;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        overflow: hidden;

        transform: none;

        transition:
            max-height
            .35s
            var(--ease-suave),
            padding .35s ease;
    }


    .dropdown.open
    .dropdown-menu {

        max-height: 320px;

        padding-top: 7px;
        padding-bottom: 10px;
    }


    .dropdown-menu a {

        padding:
            10px 0;

        color:
            rgba(
                255,
                255,
                255,
                .54
            );

        font-size: .78rem;
    }


    /* HERO */

    .hero-video {

        min-height: 720px;
    }


    .hero-video-conteudo {

        width: 82%;
    }
/* CONTEÚDO */

    .essencia-intro,
    .horarios-heading-row,
    .primeira-vez-grid {

        grid-template-columns:
            1fr;

        gap: 38px;
    }


    /* VALORES */

    .valores-grid {

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


    .valor-item:nth-child(2) {

        border-right: 0;
    }


    .valor-item:nth-child(n+3) {

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


    .primeira-vez-visual {

        min-height: 460px;
    }
}


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

@media (max-width: 640px) {

    .section-container,
    .hero-container,
    .horarios-container,
    .footer-container {

        width:
            calc(100% - 40px);
    }


    .nav-container {

        width:
            calc(100% - 32px);
    }


    /* EYEBROW */

    .section-eyebrow {

        font-size: .62rem;

        letter-spacing: .15em;
    }


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

    .hero-video {

        min-height: 700px;

        height: 100svh;

        max-height: 860px;
    }


    .hero-video-media {

        object-position:
            61% center;
    }


    .hero-video-overlay {

        background:

            linear-gradient(
                90deg,
                rgba(
                    6,
                    6,
                    7,
                    .88
                ) 0%,
                rgba(
                    6,
                    6,
                    7,
                    .64
                ) 66%,
                rgba(
                    6,
                    6,
                    7,
                    .36
                ) 100%
            ),

            linear-gradient(
                0deg,
                rgba(
                    6,
                    6,
                    7,
                    .58
                ),
                transparent 48%
            );
    }


    .hero-video-conteudo {

        width: 100%;

        padding-top: 74px;
    }


    .hero-video-conteudo h1 {

        margin-top: 20px;

        font-size:
            clamp(
                3.6rem,
                17vw,
                5rem
            );

        line-height: .87;
    }

    .hero-video-conteudo p {

        width: auto;

        max-width: 100%;
    }


    .hero-acoes,
    .primeira-vez-acoes {

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }


    .btn-primary {

        min-height: 52px;

        padding-inline: 24px;
    }


    /* ======================================================================
       ESPAÇAMENTO DAS SEÇÕES
       ====================================================================== */

    .essencia,
    .horarios,
    .primeira-vez {

        padding:
            94px 0;
    }


    /* ======================================================================
       ESSÊNCIA
       ====================================================================== */

    .essencia-intro {

        padding-bottom: 44px;
    }


    .essencia h2,
    .primeira-vez h2 {

        font-size:
            clamp(
                3.25rem,
                15vw,
                4.4rem
            );
    }


    .essencia h2 em {

        transform:
            translateX(12px);
    }


    .essencia-intro > p,
    .primeira-vez-conteudo p {

        font-size: .9rem;

        line-height: 1.75;
    }


    /* Valores */
    .valores-grid {

        grid-template-columns:
            1fr;
    }


    .valor-item,
    .valor-item:not(:first-child) {

        min-height: auto;

        padding:
            34px 0 38px;

        border-right: 0;

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


    .valor-numero {

        margin-bottom: 30px;
    }


    .valor-icone {

        margin-bottom: 22px;
    }


    .essencia-link {

        margin-top: 34px;
    }


    /* ======================================================================
       HORÁRIOS
       ====================================================================== */

    .horarios-header {

        margin-bottom: 48px;
    }


    .horarios h2 {

        font-size:
            clamp(
                3.7rem,
                16vw,
                5rem
            );
    }


    .horarios-heading-row > p {

        font-size: .88rem;
    }


    .horarios-grid {

        grid-template-columns:
            1fr;

        border-bottom: 0;
    }


    .horario-card,
    .horario-card:nth-child(3),
    .horario-card:nth-child(4),
    .horario-card:nth-child(n+4) {

        min-height: 330px;

        grid-column: auto;

        border-right: 0;

        border-bottom:
            1px solid
            var(--borda-escura);

        border-top: 0;

        padding:
            30px
            20px
            28px;
    }


    .horario-topo {

        margin-top: 30px;
    }


    .hora-numero {

        font-size: 3.7rem;
    }


    .horarios-cta {

        justify-content:
            flex-start;

        margin-top: 34px;
    }


    /* ======================================================================
       PRIMEIRA VEZ
       ====================================================================== */

    .primeira-vez-grid {

        gap: 58px;
    }


    .primeira-vez-visual {

        min-height: 380px;

        border-radius: 20px;
    }


    .primeira-vez-imagem {

        object-position: center;
    }

/* ======================================================================
       CTA FINAL
       ====================================================================== */

    .cta-final {

        min-height: 570px;

        padding:
            80px 0;
    }


    .cta-final h2 {

        font-size:
            clamp(
                3.6rem,
                16vw,
                5.2rem
            );
    }


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

    .footer-topo {

        grid-template-columns:
            1fr 1fr;

        gap:
            44px 28px;

        padding:
            64px 0 54px;
    }


    .footer-marca,
    .footer-coluna--destaque {

        grid-column:
            1 / -1;
    }


    .footer-coluna--destaque {

        padding-top: 28px;
    }


    .footer-base {

        min-height: 100px;
    }


    .footer-base p {

        max-width: 230px;

        line-height: 1.6;
    }
}


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

@media (max-width: 380px) {

    .section-container,
    .hero-container,
    .horarios-container,
    .footer-container {

        width:
            calc(100% - 30px);
    }


    .hero-video-conteudo h1 {

        font-size: 3.35rem;
    }


    .footer-topo {

        grid-template-columns:
            1fr;
    }


    .footer-marca,
    .footer-coluna--destaque {

        grid-column: auto;
    }
}


/* ==========================================================================
   ACESSIBILIDADE
   REDUZIR MOVIMENTOS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }


    .reveal,
    .horarios [data-reveal] {

        opacity: 1;

        transform: none;
    }
}