/* =========================
   ANIMAÇÕES
========================= */

@keyframes fade-in {

    from {
        opacity: 0;
        transform: translateX(25rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================
   CONFIGURAÇÕES GERAIS
========================= */

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    background-color: rgb(250, 246, 240);
    overflow-x: hidden;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1000;
    padding: 0.75rem 1rem;
    border-radius: 0.35rem;
    background: rgb(245, 184, 65);
    color: rgb(58, 11, 12);
    font-weight: 700;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: translateY(0);
}

:where(a, button, [role="button"]):focus-visible {
    outline: 3px solid rgb(245, 184, 65);
    outline-offset: 3px;
}

main {
    flex: 1;
    width: 100%;
}

main.smartphone {
    display: none;
}


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

.header {

    width: 100%;
    height: 7rem;

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

    padding-inline: 1rem;

    background-color: rgb(58, 11, 12);

    position: relative;
    z-index: 10;
}


.header>img,
.header-brand img {

    width: 100px;
    height: 100px;

}

.header-brand {
    display: inline-flex;
}


.header nav .menu {

    display: flex;
    align-items: center;

    gap: 1rem;

}


.header nav .menu li {

    list-style: none;

}


.header nav .menu a {

    display: block;

    padding: 0.5rem 1rem;

    border: 2px solid rgb(107, 70, 71);

    border-radius: 1.5rem;

    background-color: rgb(58, 11, 12);

    color: white;

    font-size: 1.125rem;

    text-decoration: none;

    transition:
        transform 0.1s ease-in-out,
        box-shadow 0.1s ease-in-out,
        color 0.1s ease-in-out;
}


.header nav .menu a:hover {

    transform: scale(1.05);

    box-shadow:
        4px 4px 5px rgba(255, 255, 255, 0.2);

    color: rgb(245, 184, 65);

}


/* =========================
   BANNER
========================= */

.banner {

    position: relative;

    width: 100%;

    height: 400px;

    overflow: hidden;

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

    text-align: center;

}


/* IMAGEM DO BANNER */

.banner>img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    /* background-size: cover; */

    object-fit: cover;

    object-position: center;

    z-index: 0;

}


/* CAMADA ESCURA */

.banner::before {

    content: "";

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        rgba(0, 0, 0, 0.38);

    z-index: 1;

}


/* TEXTO DO BANNER */

#frase-dinamica {

    position: relative;

    z-index: 2;

    width: 800px;
    max-width: 90%;

    margin: 0 auto;

    padding: 1rem;

    color: white;

    font-size:
        clamp(2rem, 5vw, 4rem);

    font-weight: bold;

    line-height: 1.2;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.9),

        0 5px 15px rgba(0, 0, 0, 0.8);

    transition:
        opacity 0.5s ease,
        transform 0.5s ease;

}


/* usado pelo JavaScript
   para troca das frases */

#frase-dinamica.fade-out {

    opacity: 0;

    transform:
        translateY(10px);

}


/* =========================
   ÁREA DAS CACHAÇAS
========================= */

.cachacas-area {

    width: 100%;

    padding:
        4rem 1rem;

    background-color:
        rgb(250, 246, 240);

}


/* =========================
   TÍTULO DA SEÇÃO
========================= */

.titulo-cachacas {

    width: 100%;

    max-width: 900px;

    margin:
        0 auto 2.5rem;

    text-align: center;

}


.titulo-cachacas h2 {

    margin-bottom: 0.75rem;

    color:
        rgb(58, 11, 12);

    font-size:
        clamp(1.8rem, 4vw, 2.5rem);

}


.titulo-cachacas p {

    color:
        rgb(80, 80, 80);

    font-size: 1.1rem;

    line-height: 1.5;

}


/* =========================
   CONTAINER DO CARROSSEL
========================= */

.cachacas-area .container {
    width: 100%;

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

    gap: 1.5rem;

    margin: 0 auto;
}








/* =========================
   TAGS DAS CACHAÇAS
========================= */

.cachaca-tags {
    width: 80%;

    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    gap: 0.4rem;

    margin-top: 0.6rem;
    margin-bottom: 0.7rem;
}


/* TAG PADRÃO */

.cards .tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.30rem 0.60rem;

    border-radius: 1rem;

    font-size: 0.75rem;
    font-weight: 400;

    line-height: 1;

    text-align: center;
}


/* LOCAL / FAZENDA / ALAMBIQUE */

.tag-local {
    background-color: rgb(250, 240, 213);

    color: rgb(96, 61, 12);

    border:
        1px solid
        rgb(220, 176, 87);
}


/* PRODUTOR */

.tag-produtor {
    background-color: rgb(245, 232, 232);

    color: rgb(58, 11, 12);

    border:
        1px solid
        rgb(107, 70, 71);
}


/* =========================
   BOTÕES DE NAVEGAÇÃO
========================= */

.go-back,
.go-forward {

    flex-shrink: 0;

    width: 2.8rem;
    height: 2.8rem;

    padding: 0.6rem;

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

    border: 2px solid transparent;

    border-radius: 50%;

    background-color:
        rgb(245, 184, 65);

    cursor: pointer;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;

}


.go-back img,
.go-forward img {

    width: 100%;
    height: 100%;

}


.go-back:hover,
.go-forward:hover {

    transform: scale(1.1);

    border-color:
        rgb(58, 11, 12);

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.2);

}


/* =========================
   SEÇÃO DOS CARDS
========================= */

.cachacas-section {
    display: flex;

    gap: 1rem;

    overflow: hidden;

    width: 100%;
    max-width: 75rem;

    padding: 1rem;
}


/* =========================
   CARD DA CACHAÇA
========================= */

.cards {
    flex: 1 1 0;

    min-width: 0;
    height: 25rem;

    padding: 1.25rem 1rem;

    background-color: white;

    border: 2px solid rgb(58, 9, 10);
    border-radius: 1rem;

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

    box-sizing: border-box;

    overflow: hidden;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.cards[hidden] {
    display: none !important;
}


.cards:hover {
    transform: translateY(-4px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.15);
}


/* =========================
   ANIMAÇÃO DOS CARDS
========================= */

.cards.fade-in {
    animation: cachacaEntrada 0.5s ease forwards;
}

@keyframes cachacaEntrada {

    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================
   IMAGEM DOS CARDS
========================= */

.cards>img {
    width: 100%;
    height: 13.5rem;

    object-fit: cover;

    border-radius: 1rem;

    margin-bottom: 0.8rem;
}


/* =========================
   NOME DA CACHAÇA
========================= */

.cards .cachaca-nome {
    color: rgb(58, 9, 10);

    font-size: 1.1rem;

    font-weight: bold;

    text-align: center;
}

/* =========================
   BOTÃO VER MAIS
========================= */

.ver-mais {
    width: 100%;

    padding: 0.75rem 1rem;

    /* joga o botão para o final do card */
    margin-top: auto;

    border: none;
    border-radius: 1.5rem;

    background-color: rgb(250, 246, 240);

    color: rgb(58, 9, 10);

    font-weight: bold;

    text-align: center;
    text-decoration: none;

    box-sizing: border-box;

    transition:
        background-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease,
        color 0.15s ease;
}


.ver-mais:hover {
    background-color: rgb(58, 11, 12);

    color: white;

    transform: scale(1.03);

    box-shadow:
        4px 4px 5px rgba(0, 0, 0, 0.3);
}


/* ==========================================
   FESTIVAL DA CACHAÇA
========================================== */

.festival-section {

    width: 100%;

    padding: 5rem 1.5rem;

    background:
        linear-gradient(135deg,
            rgb(38, 5, 7),
            rgb(58, 11, 12),
            rgb(81, 20, 18));

    color: white;

    overflow: hidden;
}


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

.festival-header {

    width: 100%;

    max-width: 900px;

    margin:
        0 auto 3rem;

    text-align: center;
}


.festival-subtitulo {

    display: inline-block;

    margin-bottom: 0.8rem;

    color:
        rgb(245, 184, 65);

    font-size: 0.9rem;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 0.2rem;
}


.festival-header h2 {

    margin-bottom: 1rem;

    color: white;

    font-size:
        clamp(2rem, 5vw, 3.5rem);

    line-height: 1.1;
}


.festival-header p {

    max-width: 650px;

    margin: 0 auto;

    color:
        rgba(255, 255, 255, 0.75);

    font-size: 1.1rem;

    line-height: 1.6;
}


/* ==========================================
   BOTÕES DOS DIAS
========================================== */

.festival-days {

    max-width: 900px;

    margin:
        0 auto 2.5rem;

    display: flex;

    justify-content: center;

    gap: 0.8rem;

    flex-wrap: wrap;
}


.festival-day {

    min-width: 120px;

    padding:
        0.8rem 1.4rem;

    border:
        1px solid rgba(255, 255, 255, 0.25);

    border-radius: 2rem;

    background:
        rgba(255, 255, 255, 0.07);

    color: white;

    cursor: pointer;

    display: flex;

    flex-direction: column;

    align-items: center;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease;
}


.festival-day span {

    font-size: 1rem;

    font-weight: bold;
}


.festival-day small {

    margin-top: 0.15rem;

    color:
        rgba(255, 255, 255, 0.6);

    font-size: 0.7rem;
}


.festival-day:hover {

    transform:
        translateY(-3px);

    border-color:
        rgb(245, 184, 65);
}


.festival-day.active {

    background:
        rgb(245, 184, 65);

    border-color:
        rgb(245, 184, 65);

    color:
        rgb(58, 11, 12);
}


.festival-day.active small {

    color:
        rgba(58, 11, 12, 0.7);
}


/* ==========================================
   CONTEÚDO PRINCIPAL
========================================== */

.festival-showcase {

    width: 100%;

    max-width: 1100px;

    min-height: 500px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.5fr 0.8fr;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius: 1.5rem;

    background:
        rgba(0, 0, 0, 0.25);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.3);
}


/* ==========================================
   ATRAÇÃO PRINCIPAL
========================================== */

.festival-main {

    position: relative;

    min-height: 500px;

    overflow: hidden;
}


.festival-main>img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.8s ease,
        opacity 0.4s ease;
}


.festival-main-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(to top,
            rgba(15, 2, 3, 0.98) 0%,
            rgba(15, 2, 3, 0.65) 40%,
            rgba(15, 2, 3, 0.15) 80%);
}


.festival-main-content {

    position: absolute;

    left: 0;

    bottom: 0;

    z-index: 2;

    width: 100%;

    padding:
        2.5rem;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}


.festival-badge {

    display: inline-block;

    margin-bottom: 1rem;

    padding:
        0.45rem 0.9rem;

    border-radius: 2rem;

    background:
        rgb(245, 184, 65);

    color:
        rgb(58, 11, 12);

    font-size: 0.8rem;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 0.05rem;
}


.festival-current-day {

    margin-bottom: 0.3rem;

    color:
        rgba(255, 255, 255, 0.7);

    font-size: 1rem;
}


.festival-main-content h3 {

    max-width: 650px;

    margin-bottom: 1.2rem;

    color: white;

    font-size:
        clamp(2rem, 5vw, 4rem);

    line-height: 1;
}


/* ==========================================
   HORÁRIO
========================================== */

.festival-time {

    display: inline-flex;

    align-items: center;

    gap: 0.7rem;

    padding:
        0.6rem 1rem;

    border-left:
        3px solid rgb(245, 184, 65);

    background:
        rgba(0, 0, 0, 0.3);
}


.festival-time span {

    color:
        rgba(255, 255, 255, 0.7);
}


.festival-time strong {

    color:
        rgb(245, 184, 65);

    font-size: 1.3rem;
}


/* ==========================================
   OUTRAS ATRAÇÕES
========================================== */

.festival-other-shows {

    padding:
        2.5rem 2rem;

    background:
        rgba(26, 3, 5, 0.75);

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.festival-other-header {

    margin-bottom: 2rem;
}


.festival-other-header>span {

    color:
        rgb(245, 184, 65);

    font-size: 0.75rem;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 0.15rem;
}


.festival-other-header h3 {

    margin-top: 0.5rem;

    color: white;

    font-size: 1.5rem;
}


/* ==========================================
   LISTA DE SHOWS
========================================== */

.festival-lineup {

    display: flex;

    flex-direction: column;

    gap: 0.9rem;
}


.festival-artist {

    padding:
        1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius: 0.8rem;

    background:
        rgba(255, 255, 255, 0.05);

    opacity: 0;

    transform:
        translateX(25px);

    animation:
        festivalArtistEntry 0.45s ease forwards;
}


.festival-artist:hover {

    border-color:
        rgba(245, 184, 65, 0.5);

    background:
        rgba(245, 184, 65, 0.08);
}


.festival-artist-name {

    display: flex;

    flex-direction: column;

    gap: 0.2rem;
}


.festival-artist-name strong {

    color: white;

    font-size: 1rem;
}


.festival-artist-name span {

    color:
        rgba(255, 255, 255, 0.55);

    font-size: 0.75rem;
}


.festival-artist-time {

    color:
        rgb(245, 184, 65);

    font-weight: bold;

    white-space: nowrap;
}


/* ==========================================
   ANIMAÇÃO DOS ARTISTAS
========================================== */

@keyframes festivalArtistEntry {

    from {

        opacity: 0;

        transform:
            translateX(25px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


/* ==========================================
   TROCA DO DIA
========================================== */

.festival-showcase.is-changing .festival-main-content {

    opacity: 0;

    transform:
        translateY(20px);
}


.festival-showcase.is-changing .festival-main>img {

    opacity: 0.4;

    transform:
        scale(1.04);
}


/* ==========================================
   INDICADORES
========================================== */

.festival-indicators {

    margin-top: 2rem;

    display: flex;

    justify-content: center;

    gap: 0.6rem;
}


.festival-indicator {

    width: 44px;

    height: 44px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(255, 255, 255, .7) 0 5px, transparent 6px);

    cursor: pointer;

    transition:
        width 0.3s ease,
        border-radius 0.3s ease,
        background-color 0.3s ease;
}


.festival-indicator.active {

    width: 44px;

    border-radius: 1rem;

    background: radial-gradient(ellipse, rgb(245, 184, 65) 0 14px, transparent 15px);
}


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

@media (max-width: 850px) {

    .festival-showcase {

        grid-template-columns: 1fr;

    }


    .festival-main {

        min-height: 450px;

    }


    .festival-other-shows {

        padding:
            2rem 1.5rem;

    }

}


@media (max-width: 600px) {

    .festival-section {

        padding:
            4rem 1rem;

    }


    .festival-days {

        display: grid;

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

    }


    .festival-day {

        width: 100%;

        min-width: 0;

    }


    .festival-main {

        min-height: 420px;

    }


    .festival-main-content {

        padding:
            1.5rem;

    }


    .festival-main-content h3 {

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

    }


    .festival-other-shows {

        padding:
            2rem 1rem;

    }

}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .cards,
    .festival-artist {
        opacity: 1;
        transform: none;
    }
}









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

.footer {

    width: 100%;

    padding:
        2.5rem 2rem 1.2rem;

    background-color:
        rgb(58, 11, 12);

    color: white;
}


/* PARTE SUPERIOR */

.footer-content {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

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

    gap: 2rem;
}


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

.footer-brand {

    display: flex;

    align-items: center;

    gap: 1rem;
}


.footer-brand img {

    width: 6rem;

    height: auto;
}


.footer-brand p {

    max-width: 200px;

    color:
        rgba(255, 255, 255, 0.7);

    font-size: 0.9rem;

    line-height: 1.5;
}


/* =========================
   REDES SOCIAIS
========================= */

.footer-social {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 0.8rem;
}


.footer-social h2 {


    margin: 0;

    color: white;

    font-size: 1rem;

    font-weight: bold;
}


.social {

    display: flex;

    align-items: center;

    gap: 0.8rem;

    padding: 0;
}


.social a {

    width: 2.8rem;

    height: 2.8rem;

    display: flex;

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

    border:
        2px solid rgb(107, 70, 71);

    border-radius: 50%;

    background-color: white;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}


.social a:hover {

    transform:
        translateY(-3px);

    border-color:
        rgb(245, 184, 65);

    background-color:
        rgb(245, 184, 65);
}


.social img {

    width: 1.4rem;

    height: 1.4rem;
}


/* =========================
   PARTE INFERIOR
========================= */

.footer-bottom {

    width: 100%;

    max-width: 1200px;

    margin:
        2rem auto 0;

    padding-top: 1.2rem;

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

    text-align: center;
}


.footer-bottom p {

    color:
        rgba(255, 255, 255, 0.6);

    font-size: 0.85rem;
}

/* ==========================================
   HISTÓRIA
========================================== */

.historia-section {
    width: 100%;

    padding: 6rem 1.5rem;

    background-color: rgb(250, 246, 240);

    color: rgb(58, 11, 12);
}


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

.historia-header {
    width: 100%;
    max-width: 850px;

    margin: 0 auto 5rem;

    text-align: center;
}


.historia-subtitulo {
    display: inline-block;

    margin-bottom: 0.8rem;

    color: rgb(151, 99, 16);

    font-size: 0.85rem;
    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 0.18rem;
}


.historia-header h2 {
    margin-bottom: 1rem;

    color: rgb(58, 11, 12);

    font-size:
        clamp(2rem, 5vw, 3.3rem);

    line-height: 1.15;
}


.historia-header p {
    max-width: 700px;

    margin: 0 auto;

    color: rgb(85, 70, 70);

    font-size: 1.05rem;

    line-height: 1.7;
}


/* ==========================================
   LINHA DO TEMPO
========================================== */

.timeline {
    position: relative;

    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
}


/* linha central */

.timeline::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 3px;

    background:
        linear-gradient(
            to bottom,
            rgb(245, 184, 65),
            rgb(126, 75, 24)
        );

    transform: translateX(-50%);
}


/* ==========================================
   ITEM
========================================== */

.timeline-item {
    position: relative;

    width: 50%;

    padding:
        0 4rem 5rem 0;

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


/* itens da direita */

.timeline-item:nth-child(even) {
    margin-left: 50%;

    padding:
        0 0 5rem 4rem;
}


/* quando aparece */

.timeline-item.timeline-visible {
    opacity: 1;

    transform: translateY(0);
}


/* ==========================================
   MARCADOR / ANO
========================================== */

.timeline-marker {
    position: absolute;

    top: 1.2rem;
    right: -2.8rem;

    z-index: 2;

    width: 5.6rem;
    height: 5.6rem;

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

    border:
        4px solid
        rgb(250, 246, 240);

    border-radius: 50%;

    background-color:
        rgb(245, 184, 65);

    color:
        rgb(58, 11, 12);

    box-shadow:
        0 5px 15px
        rgba(58, 11, 12, 0.25);
}


.timeline-item:nth-child(even)
.timeline-marker {
    right: auto;
    left: -2.8rem;
}


.timeline-marker span {
    font-size: 1rem;

    font-weight: 800;
}


.timeline-marker-text span {
    font-size: 0.85rem;
}


/* ==========================================
   CARD
========================================== */

.timeline-content {
    position: relative;

    padding: 2rem;

    border:
        1px solid
        rgba(58, 11, 12, 0.12);

    border-radius: 1.2rem;

    background-color: white;

    box-shadow:
        0 10px 30px
        rgba(58, 11, 12, 0.07);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.timeline-content:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px
        rgba(58, 11, 12, 0.13);
}


/* pequeno traço dourado */

.timeline-content::before {
    content: "";

    position: absolute;

    top: 0;
    left: 2rem;

    width: 4rem;
    height: 4px;

    border-radius:
        0 0 1rem 1rem;

    background-color:
        rgb(245, 184, 65);
}


/* ==========================================
   TEXTOS
========================================== */

.timeline-label {
    display: inline-block;

    margin-bottom: 0.7rem;

    color:
        rgb(151, 99, 16);

    font-size: 0.72rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.12rem;
}


.timeline-content h3 {
    margin-bottom: 1rem;

    color:
        rgb(58, 11, 12);

    font-size:
        clamp(1.3rem, 3vw, 1.8rem);

    line-height: 1.25;
}


.timeline-content p {
    margin-bottom: 0.8rem;

    color:
        rgb(80, 70, 70);

    font-size: 0.95rem;

    line-height: 1.7;
}


.timeline-content p:last-child {
    margin-bottom: 0;
}


/* ==========================================
   DESTAQUE 2026
========================================== */

.timeline-item-destaque
.timeline-content {
    border-color:
        rgba(245, 184, 65, 0.7);

    background:
        linear-gradient(
            145deg,
            white,
            rgb(255, 249, 235)
        );
}


/* ==========================================
   DATA DO FESTIVAL
========================================== */

.timeline-evento {
    margin-top: 1.5rem;

    padding: 1rem;

    display: flex;

    align-items: center;

    gap: 1rem;

    border-radius: 0.8rem;

    background-color:
        rgb(58, 11, 12);

    color: white;
}


.timeline-evento > span {
    padding-right: 1rem;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.25);

    color:
        rgb(245, 184, 65);

    font-size: 1.3rem;

    font-weight: 800;
}


.timeline-evento div {
    display: flex;

    flex-direction: column;

    gap: 0.15rem;
}


.timeline-evento strong {
    color: white;
}


.timeline-evento small {
    color:
        rgba(255, 255, 255, 0.7);
}


.historia-saiba-mais {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;

    margin-top: 3.5rem;

    padding: 0.8rem 1.3rem;

    border-radius: 2rem;

    background-color: rgb(58, 11, 12);
    color: white;

    font-weight: 700;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

.historia-saiba-mais:hover {
    transform: translateY(-3px);

    background-color: rgb(245, 184, 65);
    color: rgb(58, 11, 12);
}


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

@media (max-width: 768px) {

    .historia-section {
        padding:
            4rem 1rem;
    }


    .historia-header {
        margin-bottom: 3.5rem;
    }


    /* linha vai para esquerda */

    .timeline::before {
        left: 2.2rem;

        transform: none;
    }


    .timeline-item,
    .timeline-item:nth-child(even) {
        width: 100%;

        margin-left: 0;

        padding:
            0 0 3.5rem 5.5rem;
    }


    .timeline-marker,
    .timeline-item:nth-child(even)
    .timeline-marker {
        top: 1rem;

        left: 0;
        right: auto;

        width: 4.4rem;
        height: 4.4rem;
    }


    .timeline-marker span {
        font-size: 0.8rem;
    }


    .timeline-content {
        padding: 1.5rem;
    }

}


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

@media (max-width: 480px) {

    .timeline::before {
        left: 1.65rem;
    }


    .timeline-item,
    .timeline-item:nth-child(even) {
        padding-left: 4.3rem;
    }


    .timeline-marker,
    .timeline-item:nth-child(even)
    .timeline-marker {
        width: 3.3rem;
        height: 3.3rem;
    }


    .timeline-marker span {
        font-size: 0.67rem;
    }


    .timeline-content {
        padding: 1.25rem;
    }


    .timeline-evento {
        align-items: flex-start;
    }

}


/* ==========================================
   ACESSIBILIDADE - MENOS ANIMAÇÕES
========================================== */

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

    .timeline-item {
        opacity: 1;

        transform: none;

        transition: none;
    }


    .timeline-content {
        transition: none;
    }

}


/* =========================
   RESPONSIVO
========================= */

@media (max-width: 650px) {

    .footer {

        padding:
            2rem 1rem 1rem;
    }


    .footer-content {

        flex-direction: column;

        text-align: center;
    }


    .footer-brand {

        flex-direction: column;
    }


    .footer-brand p {

        max-width: 320px;
    }


    .footer-social {

        align-items: center;
    }


    .footer-bottom {

        margin-top: 1.5rem;
    }

}