/* ─────────────────────────────────────────────────────────────
   Hidden Porto — Final CTA block (v2)
   Estilos para a nova secção final com o livro aberto.
   Substitui o ficheiro original em:
     plugins/hidden-porto-core/blocks/final-cta/final-cta.css
   ───────────────────────────────────────────────────────────── */

.hp-final-cta {
    background: var(--hp-navy-deep);
    color: #F0EBE0;
    /* Symmetric, trimmed navy margins (cliente 2026-06-05): was 100/110, which
     * left ~180px navy above the eyebrow and ~190px void below the lang strip.
     * Equal top/bottom so the section reads balanced against the cream
     * testimonial above and the cream footer below. */
    padding: 48px 0;
    position: relative;
    overflow: hidden;
}

/* ghost title in background */
.hp-fcta-ghost {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--hp-font-display, Georgia, serif);
    font-size: clamp(80px, 12vw, 160px);
    font-style: italic;
    color: transparent;
    -webkit-text-stroke: 1px rgba(201, 160, 99, 0.10);
            text-stroke: 1px rgba(201, 160, 99, 0.10);
    letter-spacing: -5px;
    pointer-events: none;
    white-space: nowrap;
    user-select: none;
}

/* warm radial under the book */
.hp-final-cta::before {
    content: "";
    position: absolute;
    top: 280px;
    left: 50%;
    transform: translateX(-50%);
    width: 720px;
    height: 520px;
    background: radial-gradient(ellipse at center, rgba(201, 160, 99, 0.16), transparent 65%);
    pointer-events: none;
}

/* ── HEAD ── */
.hp-fcta-head {
    text-align: center;
    margin-bottom: 64px;
    position: relative;
}
.hp-fcta-head .hp-section-eyebrow {
    justify-content: center;
    margin-bottom: 18px;
    color: var(--hp-gold);
}
.hp-fcta-head h2 {
    font-family: var(--hp-font-display, Georgia, serif);
    font-size: clamp(34px, 4.5vw, 54px);
    line-height: 1.05;
    margin: 0 auto;
    max-width: 980px;
    color: #F0EBE0;
}
.hp-fcta-head h2 em {
    color: var(--hp-gold);
    font-style: italic;
}

/* ── STAGE (book + callouts) ──
   Stage breaks out of the 1180px .hp-container constraint so the book can
   breathe (~800px wide) and the callout connector lines visually anchor on
   the book itself instead of stopping in mid-air. Head + foot stay inside
   the container — only the visual stage is widened. */
.hp-fcta-stage {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 220px 1fr 220px;
    gap: 40px;
    align-items: start;
}

/* book */
.hp-fcta-book {
    grid-column: 2;
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
}
.hp-fcta-book img {
    width: 100%;
    height: auto;
    display: block;
    filter:
        drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55))
        drop-shadow(0 18px 28px rgba(0, 0, 0, 0.45));
}

/* callouts (lists, semantic) */
.hp-fcta-callouts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding-top: 48px;
    position: relative;
    z-index: 2;
}
.hp-fcta-callouts li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hp-fcta-num {
    font-family: var(--hp-font-body, 'Courier New', monospace);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--hp-gold);
    font-weight: 700;
}
.hp-fcta-title {
    font-family: var(--hp-font-display, Georgia, serif);
    font-size: 18px;
    line-height: 1.3;
    color: #F0EBE0;
}
.hp-fcta-desc {
    font-family: var(--hp-font-body, 'Courier New', monospace);
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(240, 235, 224, 0.78);
}

/* connector line on each callout */
.hp-fcta-callouts li::after {
    content: "";
    position: absolute;
    top: 26px;
    width: 170px;
    height: 1px;
    background: var(--hp-gold);
    opacity: 0.4;
}
.hp-fcta-callouts li::before {
    content: "";
    position: absolute;
    top: 22px;
    width: 9px;
    height: 9px;
    border: 1.5px solid var(--hp-gold);
    border-radius: 50%;
    background: var(--hp-navy-deep);
    z-index: 1;
}

/* left side — line on the right of the text, dot lands inside the book */
.hp-fcta-callouts--left {
    padding-right: 16px;
}
.hp-fcta-callouts--left li::after  { right: -140px; }
.hp-fcta-callouts--left li::before { right: -144px; }

/* right side — text-align right, line on the left, dot lands inside the book */
.hp-fcta-callouts--right {
    padding-left: 16px;
    text-align: right;
}
.hp-fcta-callouts--right li { align-items: flex-end; }
.hp-fcta-callouts--right li::after  { left: -140px; }
.hp-fcta-callouts--right li::before { left: -144px; }

/* ── FOOT ── */
.hp-fcta-foot {
    text-align: center;
    margin-top: 72px;
    position: relative;
}
.hp-fcta-lead {
    font-family: var(--hp-font-body, 'Courier New', monospace);
    font-size: 14.5px;
    line-height: 1.7;
    opacity: 0.72;
    max-width: 600px;
    margin: 0 auto 36px;
    color: #F0EBE0;
}
.hp-final-cta .hp-price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--hp-font-display, Georgia, serif);
    color: var(--hp-gold);
    margin-bottom: 28px;
}
.hp-final-cta .hp-price-num { font-size: 72px; line-height: 1; }
.hp-final-cta .hp-price-cur { font-size: 30px; }

.hp-fcta-foot .hp-btn-primary {
    padding: 20px 36px;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hp-fcta-langs {
    margin-top: 40px;
    font-family: var(--hp-font-body, 'Courier New', monospace);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.55;
    color: #F0EBE0;
}
.hp-fcta-langs span { margin-left: 8px; }

/* ── RESPONSIVE ──
   Stack the layout at 1180px instead of 1024 because the widened 1400px stage
   needs the full center column to keep the book ≥600px; between 1025-1180
   the 3-col grid leaves the book at ~480-560px which looks cramped next to
   the floating callouts. Anything below 1180 collapses to the stacked
   variant: book on top, callouts in a 2-col grid below. */
@media (max-width: 1180px) {
    .hp-fcta-stage {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 0 24px;
    }
    .hp-fcta-book { grid-column: 1; order: -1; max-width: 480px; }

    .hp-fcta-callouts {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 0;
        gap: 28px 32px;
    }
    .hp-fcta-callouts li {
        flex: 0 0 calc(50% - 16px);
        max-width: 260px;
        text-align: left;
        align-items: flex-start;
    }
    /* hide connector lines on smaller layouts */
    .hp-fcta-callouts li::after,
    .hp-fcta-callouts li::before { display: none; }

    .hp-fcta-callouts--right { text-align: left; padding-left: 0; }
    .hp-fcta-callouts--right li { align-items: flex-start; }
    .hp-fcta-callouts--left  { padding-right: 0; }
}

@media (max-width: 720px) {
    .hp-final-cta { padding: 44px 0; }
    .hp-fcta-head { margin-bottom: 40px; }
    .hp-fcta-head h2 { font-size: 32px; }
    .hp-fcta-ghost { top: 36px; font-size: 18vw; }
    .hp-fcta-foot { margin-top: 56px; }
    .hp-final-cta .hp-price-num { font-size: 56px; }
    .hp-final-cta .hp-price-cur { font-size: 24px; }
    .hp-fcta-callouts li { flex-basis: 100%; max-width: none; }
}

.hp-fcta-foot .hp-price {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 4px;
    margin: 0 auto 28px;
}
.hp-fcta-foot .hp-btn-primary {
    display: inline-block;
    margin: 0 auto;
}