@import url('/assets/css/ebook-campanha-matriculas-ferias.css');

/* LP E-book O Guia Completo da Campanha de Matrículas */

/* =============================================
   CAPA DO E-BOOK (reproduzida em CSS)
   ============================================= */
.em-book-mockup {
    container-type: inline-size;
}

.gc-cover-art {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    aspect-ratio: 1 / 1.414;
    overflow: hidden;
    padding: 7% 8% 8.5%;
    text-align: center;
    color: #fff;
    border-radius: inherit;
    background: linear-gradient(157deg, #1B3ED2 0%, #2A44DB 30%, #4A48E0 58%, #7B5CEC 82%, #9E6EF4 100%);
    font-size: 10px;
    font-size: 2.78cqw;
}

/* ---- formas decorativas do fundo ---- */
.gc-cover-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.gc-cover-shape {
    position: absolute;
    display: block;
    background: rgba(255, 255, 255, 0.055);
}

.gc-cover-shape--a {
    top: -34%;
    right: -46%;
    width: 118%;
    height: 70%;
    border-radius: 14%;
    transform: rotate(34deg);
}

.gc-cover-shape--b {
    left: -30%;
    bottom: -24%;
    width: 86%;
    aspect-ratio: 1;
    border-radius: 50%;
}

.gc-cover-shape--c {
    right: -24%;
    top: 54%;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.042);
}

/* ---- bloco central ---- */
.gc-cover-main {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 3%;
}

.gc-cover-logo {
    width: 8.5em;
    height: auto;
}

.gc-cover-edition {
    margin-top: 2.7em;
    font-family: var(--font-family-headings);
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.gc-cover-title {
    margin: 0.45em 0 0;
    font-family: var(--font-family-headings);
    font-size: 2.45em;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.015em;
}

.gc-cover-title em {
    display: block;
    font-style: normal;
    font-size: 1.12em;
    color: var(--secondary-color);
}

.gc-cover-desc {
    margin: 1.3em 0 0;
    max-width: 28.5em;
    font-family: var(--font-family-body);
    font-size: 0.78em;
    font-weight: 400;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}

.gc-cover-rule {
    width: 5.6em;
    height: 1px;
    margin-top: 1em;
    background: rgba(255, 255, 255, 0.45);
}

.gc-cover-pill {
    margin-top: 2.2em;
    padding: 0.75em 1.6em;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    font-family: var(--font-family-headings);
    font-size: 0.58em;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

/* ---- rodapé da capa ---- */
.gc-cover-footer {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25em;
}

.gc-cover-brand {
    font-family: var(--font-family-headings);
    font-size: 0.62em;
    font-weight: 700;
    color: #fff;
}

.gc-cover-links {
    font-family: var(--font-family-body);
    font-size: 0.58em;
    color: rgba(255, 255, 255, 0.7);
}

@supports not (container-type: inline-size) {
    .gc-cover-art { font-size: 10px; }

    @media (max-width: 1024px) {
        .gc-cover-art { font-size: 8.3px; }
    }

    @media (max-width: 768px) {
        .gc-cover-art { font-size: 7.2px; }
    }

    @media (max-width: 560px) {
        .gc-cover-art { font-size: 6.1px; }
    }
}

/* =============================================
   CABEÇALHO DE SEÇÃO ALINHADO À ESQUERDA
   ============================================= */
.gc-head--left {
    text-align: left;
    align-items: flex-start;
    margin-bottom: 0;
}

.gc-head--left .em-section-title,
.gc-head--left .em-section-subtitle {
    max-width: none;
}

/* =============================================
   COMPARATIVO (antes / depois)
   ============================================= */
.gc-compare {
    padding: var(--spacing-xxl) 0;
    background: #fff;
}

.gc-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.gc-compare-panel {
    padding: var(--spacing-lg);
    border-radius: 18px;
}

.gc-compare-panel--now {
    background: #fff7f3;
    border: 1px solid #ffd7c7;
}

.gc-compare-panel--next {
    background: #f4f7ff;
    border: 1px solid #d4e0ff;
}

.gc-compare-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-family-headings);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

.gc-compare-panel--now .gc-compare-label { color: #c2421a; }
.gc-compare-panel--next .gc-compare-label { color: var(--primary-color); }

.gc-compare-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.gc-compare-list li {
    display: flex;
    gap: 0.7rem;
}

.gc-compare-list li > svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.gc-compare-panel--now li > svg { color: #e0603a; }
.gc-compare-panel--next li > svg { color: var(--primary-color); }

.gc-compare-item-title {
    display: block;
    font-family: var(--font-family-headings);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.35;
    margin-bottom: 0.2rem;
}

.gc-compare-item-desc {
    font-family: var(--font-family-body);
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-light);
}

/* =============================================
   SUMÁRIO DO E-BOOK
   ============================================= */
.gc-summary {
    padding: var(--spacing-xxl) 0;
    background: #fafbff;
}

.gc-summary-layout {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: var(--spacing-xxl);
    align-items: start;
}

.gc-summary-aside {
    position: sticky;
    top: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.gc-summary-aside .em-section-title {
    font-size: 2rem;
}

.gc-summary-aside .btn {
    margin-top: var(--spacing-sm);
}

.gc-chapters {
    list-style: none;
    border-top: 1px solid var(--border-color);
}

.gc-chapter {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-color);
}

.gc-chapter-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--senary-color);
    font-family: var(--font-family-headings);
    font-size: 0.92rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--primary-color);
    transition: background-color 0.25s ease, color 0.25s ease;
}

.gc-chapter:hover .gc-chapter-num {
    background: var(--secondary-color);
    color: #fff;
}

.gc-chapter-title {
    font-family: var(--font-family-headings);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.35;
    margin-bottom: 0.3rem;
}

.gc-chapter-desc {
    font-family: var(--font-family-body);
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-light);
}

/* =============================================
   FAIXA DE DESTAQUE
   ============================================= */
.gc-band {
    padding: var(--spacing-xl) 0;
    background: #0b1e5c;
}

.gc-band-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    padding-left: var(--spacing-md);
    border-left: 3px solid var(--secondary-color);
}

.gc-band-copy {
    max-width: 620px;
    color: #fff;
}

.gc-band-title {
    font-family: var(--font-family-headings);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.gc-band-desc {
    font-family: var(--font-family-body);
    font-size: 0.98rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* =============================================
   PARA QUEM É
   ============================================= */
.gc-audience {
    padding: var(--spacing-xxl) 0;
    background: #fff;
}

.gc-audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.gc-audience-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: #fff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.gc-audience-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(8, 63, 207, 0.08);
}

.gc-audience-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--primary-color);
    color: var(--primary-color);
}

.gc-audience-role {
    font-family: var(--font-family-headings);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-color);
}

.gc-audience-text {
    font-family: var(--font-family-body);
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-light);
}

.gc-audience-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--spacing-lg);
    font-family: var(--font-family-body);
    font-size: 0.9rem;
    color: var(--text-light);
    text-align: center;
}

.gc-audience-note svg {
    flex-shrink: 0;
    color: var(--primary-color);
}

/* =============================================
   FAQ
   ============================================= */
.gc-faq {
    padding: var(--spacing-xxl) 0;
    background: #fafbff;
}

.gc-faq-list {
    max-width: 760px;
    margin: 0 auto;
    border-top: 1px solid var(--border-color);
}

.gc-faq-item {
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-md) 0;
}

.gc-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-family-headings);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
}

.gc-faq-item summary::-webkit-details-marker {
    display: none;
}

.gc-faq-item summary svg {
    flex-shrink: 0;
    color: var(--primary-color);
    transition: transform 0.25s ease;
}

.gc-faq-item[open] summary svg {
    transform: rotate(45deg);
}

.gc-faq-answer {
    font-family: var(--font-family-body);
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-light);
    margin-top: 0.75rem;
    padding-right: var(--spacing-lg);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
    .gc-summary-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .gc-summary-aside {
        position: static;
    }
}

@media (max-width: 768px) {
    .gc-compare-grid {
        grid-template-columns: 1fr;
    }

    .gc-band-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .gc-audience-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .gc-audience-note {
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 560px) {
    .gc-summary-aside .em-section-title,
    .gc-band-title {
        font-size: 1.5rem;
    }

    .gc-chapter {
        grid-template-columns: 42px 1fr;
        gap: var(--spacing-sm);
    }

    .gc-faq-answer {
        padding-right: 0;
    }
}