/*
* Estilos Home - Editora Jasa
* Versão: 1.0.0
* Data: 2026-03-11
*/

/* ── HERO ── */
.hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 5rem;
    padding: 8rem 5vw 5rem
}

h1 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2.8rem, 5vw, 4.4rem);
    line-height: 1.07;
    letter-spacing: -.02em;
    margin-bottom: 1.4rem
}

h1 em {
    font-style: italic;
    color: var(--roxo2)
}

.hero-desc {
    font-size: .92rem;
    font-weight: 300;
    color: var(--cinza);
    line-height: 1.8;
    max-width: 420px;
    margin-bottom: 2.4rem
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    justify-content: center;
}

/* ── HERO BOOKS ── */
.hero-books {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: .75rem
}

.book {
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 1rem;
    transition: transform .3s
}

.book:hover {
    transform: translateY(-5px)
}

.b1 {
    background: linear-gradient(145deg, #1a3a8a, #0d1f4e);
    grid-row: 1/3
}

.b2 {
    background: linear-gradient(145deg, #2a1245, #1e0940);
    aspect-ratio: 4/3
}

.b3 {
    background: linear-gradient(145deg, #7b1a1a, #2a0606);
    aspect-ratio: 4/3
}

.book-label {
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 5px;
    padding: .55rem .75rem;
    width: 100%
}

.book-label .g {
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    display: block;
    margin-bottom: .2rem
}

.book-label .t {
    font-family: 'DM Serif Display', serif;
    font-size: .82rem;
    color: #fff;
    line-height: 1.2
}

.b1 .t {
    font-size: .98rem
}

/* ── STRIP ── */
.strip {
    border-top: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
    padding: .9rem 0;
    overflow: hidden
}

.strip-track {
    display: flex;
    gap: 2.5rem;
    white-space: nowrap;
    animation: marquee 26s linear infinite
}

.strip-track span {
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cinza);
    flex-shrink: 0
}

.strip-track .sep {
    color: var(--ouro);
    font-size: .45rem
}

/* ── AUTORES CARDS ── */
.autores-cards {
    padding: 5rem 5vw 0
}

.autores-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem
}

.autor-card {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
    cursor: pointer
}

.autor-card:hover {
    box-shadow: 0 6px 28px rgba(42, 18, 69, .09);
    transform: translateY(-3px)
}

.autor-foto {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.af1 {
    background: linear-gradient(150deg, #e8e0f5, #d4c5f0)
}

.af2 {
    background: linear-gradient(150deg, #e0eaf8, #c8d9f5)
}

.af3 {
    background: linear-gradient(150deg, #f5e8e0, #f0d4c5)
}

.af4 {
    background: linear-gradient(150deg, #e0f0e8, #c5ecd4)
}

.autor-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    border: 2px solid rgba(255, 255, 255, .8);
    display: flex;
    align-items: center;
    justify-content: center
}

.autor-foto .estilos {
    position: absolute;
    bottom: .75rem;
    left: .75rem;
    right: .75rem;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem
}

.tag {
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .22rem .6rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, .75);
    color: var(--roxo);
    border: 1px solid rgba(255, 255, 255, .6)
}

.autor-body {
    padding: 1rem 1.1rem
}

.autor-nome {
    font-family: 'DM Serif Display', serif;
    font-size: .95rem;
    color: var(--azul);
    margin-bottom: .2rem
}

.autor-gen {
    font-size: .7rem;
    color: var(--cinza);
    margin-bottom: .75rem
}

.autor-btns {
    display: flex;
    gap: .4rem
}

.autor-btns a {
    flex: 1;
    text-align: center;
    padding: .42rem;
    border-radius: 100px;
    font-size: .65rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s
}

.ab-o {
    border: 1px solid var(--borda);
    color: var(--cinza)
}

.ab-o:hover {
    border-color: var(--azul);
    color: var(--azul)
}

.ab-w {
    background: #25d366;
    color: #fff
}

.ab-w:hover {
    background: #1ebe5d
}

/* ── NOSSOS AUTORES (destaque único) ── */
.autor-destaque {
    padding: 3rem 5vw 5rem;
}

.ad-card-full {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 260px 1fr;
    max-width: 820px;
    margin: 0 auto;
    box-shadow: 0 4px 24px rgba(42, 18, 69, .06);
}

.adf-foto {
    background: linear-gradient(160deg, #ede4f8, #d8ccf2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 320px;
}

.adf-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    border: 2px solid rgba(255, 255, 255, .9);
    display: flex;
    align-items: center;
    justify-content: center
}

.adf-foto .foto-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.2rem;
    background: linear-gradient(to top, rgba(42, 18, 69, .5), transparent)
}

.adf-foto .foto-label span {
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    display: block;
    margin-bottom: .25rem
}

.adf-foto .foto-label strong {
    font-family: 'DM Serif Display', serif;
    font-size: 1.1rem;
    color: #fff;
    display: block
}

.adf-body {
    padding: 2rem 2rem 2rem
}

.adf-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem
}

.tag-dark {
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .25rem .7rem;
    border-radius: 100px;
    border: 1px solid rgba(42, 18, 69, .15);
    color: var(--roxo2);
    background: rgba(61, 26, 110, .05)
}

.adf-body blockquote {
    font-family: 'DM Serif Display', serif;
    font-size: 1.05rem;
    font-style: italic;
    color: var(--azul);
    line-height: 1.5;
    margin-bottom: 1rem;
    border-left: 2px solid var(--ouro);
    padding-left: 1rem
}

.adf-body p {
    font-size: .8rem;
    color: var(--cinza);
    line-height: 1.75;
    margin-bottom: 1.4rem
}

.adf-btn-wa {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .74rem;
    font-weight: 500;
    background: #25d366;
    color: #fff;
    padding: .5rem 1.1rem;
    border-radius: 100px;
    text-decoration: none;
    transition: opacity .2s
}

.adf-btn-wa:hover {
    opacity: .85
}

/* ── CATÁLOGO / LIVROS ── */
.catalogo {
    padding: 5rem 5vw
}

.livros {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem
}

.livro {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .25s, transform .25s
}

.livro:hover {
    box-shadow: 0 6px 28px rgba(13, 31, 78, .07);
    transform: translateY(-3px)
}

.lcapa {
    height: 175px
}

.lc1 {
    background: linear-gradient(145deg, #1a3a8a, #0d1f4e)
}

.lc2 {
    background: linear-gradient(145deg, #4a2080, #1e0940)
}

.lc3 {
    background: linear-gradient(145deg, #8c1c1c, #2a0606)
}

.lc4 {
    background: linear-gradient(145deg, #1a4e3a, #0a2218)
}

.lbody {
    padding: 1.1rem 1.2rem
}

.lgen {
    font-size: .63rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ouro);
    font-weight: 500;
    margin-bottom: .35rem
}

.ltit {
    font-family: 'DM Serif Display', serif;
    font-size: .92rem;
    line-height: 1.2;
    margin-bottom: .2rem
}

.laut {
    font-size: .73rem;
    color: var(--cinza);
    margin-bottom: .9rem
}

.lbtns {
    display: flex;
    gap: .45rem
}

.lbtns a {
    flex: 1;
    text-align: center;
    padding: .46rem;
    border-radius: 100px;
    font-size: .67rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s
}

.lb-o {
    border: 1px solid var(--borda);
    color: var(--cinza)
}

.lb-o:hover {
    border-color: var(--azul);
    color: var(--azul)
}

.lb-f {
    background: var(--azul);
    color: #fff
}

.lb-f:hover {
    background: var(--roxo2)
}

/* ── SERVIÇOS ── */
.servicos {
    padding: 5rem 5vw;
    background: #fff;
    border-top: 1px solid var(--borda)
}

.srv-intro {
    background: var(--bg);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 1.6rem 2rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1.2rem
}

.srv-intro .ic {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--roxo), var(--roxo2));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center
}

.srv-intro p {
    font-size: .86rem;
    color: var(--cinza);
    line-height: 1.75
}

.srv-intro strong {
    color: var(--azul);
    font-weight: 500
}

.srv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

.srv {
    background: var(--bg);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 1.6rem;
    transition: box-shadow .25s, transform .25s, border-color .25s;
    position: relative
}

.srv:hover {
    box-shadow: 0 6px 24px rgba(42, 18, 69, .07);
    transform: translateY(-2px);
    border-color: rgba(42, 18, 69, .13)
}

.srv.pop {
    border-color: rgba(201, 168, 76, .4)
}

.srv.pop::before {
    content: 'Mais contratado';
    position: absolute;
    top: -1px;
    right: 1.2rem;
    background: var(--ouro);
    color: var(--roxo);
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .22rem .65rem;
    border-radius: 0 0 5px 5px
}

.srv-ico {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem
}

.ic1 {
    background: rgba(13, 31, 78, .07)
}

.ic2 {
    background: rgba(42, 18, 69, .07)
}

.ic3 {
    background: rgba(201, 168, 76, .1)
}

.ic4 {
    background: rgba(139, 28, 28, .07)
}

.ic5 {
    background: rgba(26, 78, 58, .07)
}

.ic6 {
    background: rgba(42, 18, 69, .06)
}

.srv h4 {
    font-family: 'DM Serif Display', serif;
    font-size: .95rem;
    color: var(--azul);
    margin-bottom: .45rem
}

.srv p {
    font-size: .76rem;
    color: var(--cinza);
    line-height: 1.7;
    margin-bottom: 1rem
}

.srv-link {
    font-size: .7rem;
    font-weight: 500;
    color: var(--roxo2);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .3rem;
    transition: gap .2s
}

.srv-link:hover {
    gap: .6rem
}

/* ── DISTRIBUIÇÃO ── */
.distribuicao {
    background: linear-gradient(135deg, #0e0516 0%, #1c0a38 100%);
    padding: 6rem 5vw
}

.dist-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start
}

.dist-txt h2 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin-bottom: 1rem
}

.dist-txt h2 em {
    font-style: italic;
    color: var(--ouro)
}

.dist-txt p {
    font-size: .86rem;
    font-weight: 300;
    color: rgba(255, 255, 255, .45);
    line-height: 1.8;
    margin-bottom: 1.5rem
}

.dist-req {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(201, 168, 76, .15);
    border-radius: 10px;
    padding: 1.4rem
}

.dist-req h5 {
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ouro);
    margin-bottom: 1rem
}

.req {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin-bottom: .8rem
}

.rdot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ouro);
    flex-shrink: 0;
    margin-top: .5rem
}

.req p {
    font-size: .76rem;
    color: rgba(255, 255, 255, .42);
    line-height: 1.6
}

.req strong {
    color: rgba(255, 255, 255, .72);
    font-weight: 500
}

.dist-opcoes {
    display: flex;
    flex-direction: column;
    gap: .9rem
}

.dopc {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 1.3rem;
    transition: border-color .2s
}

.dopc:hover {
    border-color: rgba(201, 168, 76, .3)
}

.dopc .dl {
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ouro);
    margin-bottom: .4rem;
    display: block
}

.dopc h4 {
    font-family: 'DM Serif Display', serif;
    font-size: .9rem;
    color: #fff;
    margin-bottom: .35rem
}

.dopc p {
    font-size: .74rem;
    color: rgba(255, 255, 255, .37);
    line-height: 1.65
}

/* ── CTA ── */
.cta {
    padding: 7rem 5vw;
    text-align: center;
    border-top: 1px solid var(--borda)
}

.cta h2 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-bottom: .8rem
}

.cta h2 em {
    font-style: italic;
    color: var(--roxo2)
}

.cta p {
    font-size: .9rem;
    color: var(--cinza);
    font-weight: 300;
    margin-bottom: 2.4rem
}

/* ── RESPONSIVE HOME ── */
@media(max-width:1000px) {

    .autores-grid,
    .livros,
    .srv-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:860px) {
    .hero {
        grid-template-columns: 1fr;
        padding: 7.5rem 5vw 4rem;
        /* Aumentado de 6rem para 7.5rem */
        gap: 3rem
    }

    .dist-inner {
        grid-template-columns: 1fr;
        gap: 3rem
    }

    .ad-card-full {
        grid-template-columns: 1fr
    }

    .adf-foto {
        min-height: 220px
    }
}

@media(max-width:540px) {

    .autores-grid,
    .livros,
    .srv-grid {
        grid-template-columns: 1fr
    }
}