/* Caminho no servidor: /home/andr6085/public_html/tetolivre/assets/css/pages.css
   Estilos da home. Mobile-first, design moderno com cards refinados. */

/* === HERO INTENCAO === */
.hero-intencao { padding: var(--tl-space-6) 0 var(--tl-space-3); }
.hero-intencao__interno { text-align: center; }
.hero-intencao__saudacao {
    font-size: 14px;
    color: var(--tl-pedra);
    margin-bottom: var(--tl-space-1);
    letter-spacing: 0.02em;
}
.hero-intencao__pergunta {
    font-family: var(--tl-font-display);
    font-weight: 600;
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--tl-carvao);
    margin: 0 auto;
    max-width: 14ch;
    text-wrap: balance;
}
.hero-intencao__slogan {
    margin-top: var(--tl-space-2);
    font-size: 15px;
    color: var(--tl-pedra);
}
.hero-intencao__slogan em { font-family: var(--tl-font-display); color: var(--tl-bordo); font-style: italic; }

@media (min-width: 768px) {
    .hero-intencao { padding: var(--tl-space-8) 0 var(--tl-space-4); }
    .hero-intencao__pergunta { font-size: 52px; }
}
@media (min-width: 1024px) {
    .hero-intencao__pergunta { font-size: 64px; }
}

/* === GRID DE CARDS IMERSIVOS === */
.grid-cards-imersivos { padding: var(--tl-space-3) 0 var(--tl-space-6); }
.grid-cards-imersivos__lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tl-space-2);
}
@media (min-width: 768px) {
    .grid-cards-imersivos { padding: var(--tl-space-6) 0 var(--tl-space-8); }
    .grid-cards-imersivos__lista {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--tl-space-3);
    }
}
@media (min-width: 1280px) {
    .grid-cards-imersivos__lista {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--tl-space-2);
    }
}

/* === CARD IMERSIVO MODERNO === */
.card-imersivo {
    --cor-intencao: var(--tl-terracota);
    position: relative;
    display: block;
    height: 280px;
    border-radius: 20px;
    overflow: hidden;
    color: var(--tl-pergaminho);
    background-color: var(--tl-bordo);
    box-shadow: 0 2px 8px rgba(45, 45, 45, 0.08);
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1);
    text-decoration: none;
    isolation: isolate;
}
.card-imersivo:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(45, 45, 45, 0.18);
}
.card-imersivo:focus-visible {
    outline: 3px solid var(--cor-intencao);
    outline-offset: 4px;
}

@media (min-width: 768px) { .card-imersivo { height: 320px; } }
@media (min-width: 1280px) { .card-imersivo { height: 360px; } }

/* Midia de fundo (gradiente padrao por intencao) */
.card-imersivo__midia {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(160deg, var(--cor-intencao) 0%, var(--tl-bordo) 100%);
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.card-imersivo:hover .card-imersivo__midia { transform: scale(1.04); }

.card-imersivo--curtir .card-imersivo__midia {
    background: linear-gradient(160deg, var(--tl-mostarda) 0%, #c97a2a 50%, var(--tl-bordo) 100%);
}
.card-imersivo--empreender .card-imersivo__midia {
    background: linear-gradient(160deg, var(--tl-bordo) 0%, #5a2614 100%);
}
.card-imersivo--conquistar .card-imersivo__midia {
    background: linear-gradient(160deg, var(--tl-verde) 0%, #2f4f29 100%);
}

.card-imersivo__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(45,45,45,0) 0%, rgba(45,45,45,0.45) 100%);
}

/* Conteudo */
.card-imersivo__conteudo {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    justify-content: space-between;
}
@media (min-width: 768px) { .card-imersivo__conteudo { padding: 24px; } }

/* Topo: icone + badge */
.card-imersivo__topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.card-imersivo__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(245, 240, 232, 0.18);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(245, 240, 232, 0.28);
    color: var(--tl-pergaminho);
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.card-imersivo:hover .card-imersivo__icone {
    transform: scale(1.08) rotate(-4deg);
}

.card-imersivo__badge {
    padding: 6px 12px;
    border-radius: var(--tl-radius-pill);
    background-color: rgba(245, 240, 232, 0.95);
    color: var(--cor-intencao);
    font-family: var(--tl-font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Base: titulo + descritor + cta */
.card-imersivo__base { display: flex; flex-direction: column; gap: 10px; }

.card-imersivo__titulo {
    font-family: var(--tl-font-display);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--tl-pergaminho);
    margin: 0;
    max-width: 18ch;
    text-wrap: balance;
}
@media (min-width: 768px) { .card-imersivo__titulo { font-size: 22px; } }
@media (min-width: 1280px) { .card-imersivo__titulo { font-size: 24px; } }

.card-imersivo__descritor {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(245, 240, 232, 0.82);
    margin: 0;
    max-width: 32ch;
}

.card-imersivo__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 9px 16px 9px 18px;
    background-color: rgba(245, 240, 232, 0.95);
    color: var(--tl-carvao);
    border-radius: var(--tl-radius-pill);
    font-family: var(--tl-font-ui);
    font-weight: 600;
    font-size: 13px;
    margin-top: 4px;
    transition: gap 300ms cubic-bezier(0.22, 1, 0.36, 1),
                background-color 300ms ease;
    min-height: 36px;
}
.card-imersivo:hover .card-imersivo__cta {
    gap: 14px;
    background-color: var(--tl-pergaminho);
}

/* === FAIXA DE CONFIANCA === */
.faixa-confianca {
    background-color: var(--tl-areia);
    padding: var(--tl-space-6) 0;
}
.faixa-confianca__interno {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tl-space-4);
    text-align: center;
}
@media (min-width: 768px) {
    .faixa-confianca__interno { grid-template-columns: repeat(3, 1fr); }
}
.faixa-confianca__selo { display: flex; flex-direction: column; align-items: center; gap: var(--tl-space-1); }
.faixa-confianca__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--tl-pergaminho);
    color: var(--tl-terracota);
    margin-bottom: var(--tl-space-1);
}
.faixa-confianca__titulo {
    font-family: var(--tl-font-ui);
    font-size: 17px;
    font-weight: 700;
    color: var(--tl-carvao);
}
.faixa-confianca__texto {
    font-size: 14px;
    color: var(--tl-pedra);
    max-width: 30ch;
}