@import url(../css/global.css);


body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* <main> é apenas um contêiner semântico/de acessibilidade aqui —
   "desaparece" do layout para não quebrar o flex do body acima,
   que centraliza header, seção-intro, cards e footer. */
main {
    display: contents;
}

:root {
  --pink:       #FC136A;
  --pink-hover: #e0105a;
  --dark:       #1A1625;
  --mid:        #5A5470;
  --cream:      #FAF6F0;
  --border:     #e8dfd5;
  --bg:         #fffdf9;
  --radius-pill: 50px;
  --transition:  .25s ease;
}

section {
    width: 100%;
    height: 360px;

    background-color: linear-gradient(to bottom, #a8d2ff 30%, #f5f0e8 70%);;

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

section span{
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 4px;
    text-transform: uppercase;

    color: #e90053;

    margin-bottom: 18px;
}

section h1{
    font-size: 76px;
    font-weight: 700;

    font-family: "Cormorant Garamond", serif;

    margin-bottom: 12px;
}

section p{
    font-size: 22px;

    color: #726b7d;

    font-family: "Cormorant Garamond", serif;
    font-style: italic;
}

.card {

    display: flex; /* Une o .side e o .content lado a lado */
    width: 100%;
    max-width: 700px;
    min-height: 240px;
    background-color: #ffffff;
    border-radius: 16px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    overflow: hidden; /* Garante que as pontas do gradiente sigam o border-radius */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.09);
}

.card .side {
    width: 220px; /* Largura da faixa da esquerda (era 120px, estreito
                     demais pra mostrar um personagem inteiro) */
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.card .side img {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 104%;
    width: auto;
    max-width: none;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18));
}

.card .content {
    padding: 30px 40px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tag {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 4px 8px;
    border-radius: 4px;
    width: fit-content;
    margin-bottom: 12px;
}

.card h2 {
    font-family: var(--font-title);
    font-size: 1.8rem;
    margin: 0 0 12px 0;
}

.card h2 span {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 300;
    font-style: italic;
    color: #767676;
    margin-left: 8px;
}

.card p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 16px 0;
    color: #4a4a4a;
}

/* Customização para as Citações (Quotes) e Linhas */
.quotes {
    border-left: 2px solid rgba(0,0,0,0.1);
    padding-left: 15px;
    margin-bottom: 15px;
}

.quotes p {
    font-style: italic;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.card hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: 15px 0;
}

.card small {
    font-style: italic;
    color: #747474;
}

/* Hashtags do Joãozinho */
.hashtags span {
    font-size: 0.8rem;
    color: #4c78b2;
    margin-right: 12px;
    font-weight: 500;
}

.card.blue .side {
    background: linear-gradient(180deg, #b3cde3 0%, #648bbd 100%);
}
.card.blue .tag {
    background-color: #e3effd;
    color: #446e9f;
}
.card.blue h2 {
    color: #1c2d42;
}

/* --- CARD DARK (Nox) --- */
.card.dark {
    background-color: #14111c; /* Fundo do card fica escuro */
}
.card.dark .side {
    background: linear-gradient(180deg, #231b30 0%, #11091c 100%);
    border-right: 2px solid #5a3d75; /* Linha roxa vertical sutil */
}
.card.dark .tag {
    background-color: #261936;
    color: #a384c7;
}
.card.dark h2 {
    color: #ffffff;
}
.card.dark p, .card.dark small {
    color: #b0a8ba;
}
.card.dark .quotes {
    border-left-color: #5a3d75;
}
.card.dark hr {
    border-top-color: rgba(255, 255, 255, 0.1);
}


/*parte da lumen*/
.card.yellow .side {
    background: linear-gradient(180deg, #fff3b0 0%, #ca9e32 100%);
    border-right: 2px solid #f0ca65;
}
.card.yellow .tag {
    background-color: #fffbeb;
    color: #8f6c0f;
}
.card.yellow h2 {
    color: #42330b;
}
.card.yellow .quotes {
    border-left-color: #f0ca65;
}

@media (max-width: 1024px){

    .card{
        width: 90%;
        max-width: 700px;
    }

    section h1{
        font-size: 4rem;
    }

}

@media (max-width: 768px){

    section{
        height: auto;
        padding: 60px 20px;
        text-align: center;
    }

    section h1{
        font-size: 3rem;
        line-height: 1;
    }

    section p{
        font-size: 1rem;
    }

    .card{
        width: 95%;
        flex-direction: column;
        margin: 20px auto;
    }

    .card .side{
        width: 100%;
        height: 260px;
    }

    .card .side img {
        height: 100%;
        max-height: 260px;
    }

    .card .content{
        padding: 20px;
    }

    .card .content h2{
        font-size: 2rem;
    }

    .hashtags{
        flex-wrap: wrap;
    }

}

@media (max-width: 480px){

    section h1{
        font-size: 2.4rem;
    }

    .content{
        padding: 16px;
    }

    .content h2{
        font-size: 1.7rem;
    }

    .content h2 span{
        display: block;
        margin-top: 5px;
    }

    .content p{
        font-size: 13px;
        line-height: 1.7;
    }

    .hashtags span{
        font-size: 10px;
    }

}

/* ================================================================
   INTERAÇÕES (personagens)
   ================================================================ */
.card .side { transition: filter .5s ease; }
.card:hover .side { filter: saturate(1.35) brightness(1.05); }

.card .tag { transition: letter-spacing .4s var(--ease-out); }
.card:hover .tag { letter-spacing: .14em; }

.quotes p { transition: transform .35s var(--ease-out), opacity .3s ease; }
.quotes p:hover { transform: translateX(10px); }

.hashtags span {
  display: inline-block;
  transition: transform .3s var(--ease-spring);
}
.hashtags span:hover { transform: translateY(-3px) scale(1.08); }


/* contraste AA */
.card.dark h2 span { color: #7f7f7f; }