/*
 * Guia das Plantas Premium 8.0
 * Experiência mobile-first inspirada no modelo visual aprovado:
 * telas inteiras, fotografia botânica, creme, verde profundo e módulos suaves.
 */

html:has(body.gpp-cinematic-body),
body.gpp-cinematic-body {
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
    background: #f3f0e9 !important;
}

body.gpp-cinematic-body,
body.gpp-cinematic-body * {
    box-sizing: border-box;
}

.gpp-cinematic-app {
    --gpp-v8-forest: #173c2a;
    --gpp-v8-forest-2: #264d35;
    --gpp-v8-sage: #dfe7d7;
    --gpp-v8-sage-2: #edf1e8;
    --gpp-v8-cream: #f8f4eb;
    --gpp-v8-cream-2: #efe7da;
    --gpp-v8-earth: #a76743;
    --gpp-v8-gold: #c7a56d;
    --gpp-v8-ink: #173126;
    --gpp-v8-muted: #69756d;
    --gpp-v8-line: rgba(36, 66, 50, .12);
    --gpp-v8-header: 58px;
    --gpp-v8-controls: 62px;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: 100svh !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) var(--gpp-v8-controls) !important;
    overflow: hidden !important;
    isolation: isolate;
    color: var(--gpp-v8-ink) !important;
    background: var(--gpp-v8-cream) !important;
    font-family: var(--gpp-font-body, system-ui, sans-serif) !important;
}

.admin-bar .gpp-cinematic-app {
    height: calc(100svh - 32px) !important;
}

/* Header sobre a tela, como em um aplicativo. */
.gpp-cinematic-app .gpp-learn-header {
    position: absolute !important;
    z-index: 80 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--gpp-v8-header) !important;
    min-height: var(--gpp-v8-header) !important;
    margin: 0 !important;
    padding: max(8px, env(safe-area-inset-top)) 14px 7px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(26, 55, 40, .07) !important;
    border-radius: 0 !important;
    background: rgba(249, 246, 239, .86) !important;
    backdrop-filter: blur(18px) saturate(1.1) !important;
    box-shadow: none !important;
    transition: color .25s ease, background .25s ease, border-color .25s ease !important;
}

.gpp-cinematic-app:has(.gpp-learn-slide.is-active[data-screen="intro"]) .gpp-learn-header,
.gpp-cinematic-app:has(.gpp-learn-slide.is-active[data-screen="related"]) .gpp-learn-header {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(180deg, rgba(7, 25, 17, .56), rgba(7, 25, 17, 0)) !important;
    backdrop-filter: none !important;
}

.gpp-cinematic-app .gpp-learn-brand {
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    color: var(--gpp-v8-forest) !important;
    text-decoration: none !important;
}

.gpp-cinematic-app:has(.is-active[data-screen="intro"]) .gpp-learn-brand,
.gpp-cinematic-app:has(.is-active[data-screen="related"]) .gpp-learn-brand {
    color: #fff !important;
}

.gpp-cinematic-app .gpp-learn-brand > span {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: var(--gpp-v8-forest) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(13, 43, 28, .18) !important;
}

.gpp-cinematic-app:has(.is-active[data-screen="intro"]) .gpp-learn-brand > span,
.gpp-cinematic-app:has(.is-active[data-screen="related"]) .gpp-learn-brand > span {
    background: rgba(14, 38, 26, .58) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
}

.gpp-cinematic-app .gpp-learn-brand > span svg,
.gpp-cinematic-app .gpp-learn-brand > span img {
    width: 19px !important;
    height: 19px !important;
    object-fit: contain !important;
}

.gpp-cinematic-app .gpp-learn-brand div {
    min-width: 0 !important;
}

.gpp-cinematic-app .gpp-learn-brand strong {
    display: block !important;
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font: 750 11px/1.05 var(--gpp-font-ui, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-learn-brand small {
    display: block !important;
    margin-top: 2px !important;
    color: currentColor !important;
    opacity: .58 !important;
    font: 650 7px/1 var(--gpp-font-ui, system-ui, sans-serif) !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

.gpp-cinematic-app .gpp-learn-header-progress {
    min-width: 46px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    color: inherit !important;
    font-family: var(--gpp-font-ui, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-learn-header-progress > span {
    display: none !important;
}

.gpp-cinematic-app .gpp-learn-header-progress b {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    height: 26px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: rgba(31, 72, 49, .08) !important;
    color: var(--gpp-v8-forest) !important;
    font: 750 9px/1 var(--gpp-font-ui, system-ui, sans-serif) !important;
}

.gpp-cinematic-app:has(.is-active[data-screen="intro"]) .gpp-learn-header-progress b,
.gpp-cinematic-app:has(.is-active[data-screen="related"]) .gpp-learn-header-progress b {
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
}

.gpp-cinematic-app .gpp-learn-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
}

.gpp-cinematic-app .gpp-learn-header-actions button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: var(--gpp-v8-forest) !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.gpp-cinematic-app:has(.is-active[data-screen="intro"]) .gpp-learn-header-actions button,
.gpp-cinematic-app:has(.is-active[data-screen="related"]) .gpp-learn-header-actions button {
    color: #fff !important;
    background: rgba(11, 35, 23, .34) !important;
}

.gpp-cinematic-app .gpp-learn-header-actions button svg {
    width: 18px !important;
    height: 18px !important;
}

.gpp-cinematic-app [data-gpp-favorite].is-favorite svg {
    fill: currentColor !important;
}

/* Stage e carrossel. */
.gpp-cinematic-app .gpp-learn-stage {
    position: relative !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--gpp-v8-cream) !important;
}

.gpp-cinematic-app .gpp-learn-progress {
    position: absolute !important;
    z-index: 90 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: rgba(255,255,255,.18) !important;
}

.gpp-cinematic-app .gpp-learn-progress i {
    display: block !important;
    height: 100% !important;
    background: #d7bc78 !important;
    transition: width .25s ease !important;
}

.gpp-cinematic-app .gpp-learn-deck {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    touch-action: pan-x !important;
}

.gpp-cinematic-app .gpp-learn-deck::-webkit-scrollbar {
    display: none !important;
}

.gpp-cinematic-app .gpp-learn-slide {
    position: relative !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    background: var(--gpp-v8-cream) !important;
}

.gpp-cinematic-app .gpp-learn-slide-inner {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: calc(var(--gpp-v8-header) + 16px) 20px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.gpp-cinematic-app .gpp-learn-slide-inner::-webkit-scrollbar {
    display: none !important;
}

/* Tipografia editorial controlada para títulos longos. */
.gpp-cinematic-app .gpp-learn-slide-head {
    flex: 0 0 auto !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 6px !important;
}

.gpp-cinematic-app .gpp-learn-slide-head > span {
    display: none !important;
}

.gpp-cinematic-app .gpp-learn-slide-head > div {
    width: 100% !important;
    min-width: 0 !important;
}

.gpp-cinematic-app .gpp-learn-slide-head small,
.gpp-cinematic-app .gpp-learn-kicker {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 23px !important;
    margin: 0 0 7px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    color: var(--gpp-v8-forest-2) !important;
    background: rgba(43, 80, 54, .07) !important;
    font: 750 9px/1 var(--gpp-font-ui, system-ui, sans-serif) !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.gpp-cinematic-app .gpp-learn-slide-head h2 {
    max-width: 320px !important;
    margin: 0 auto !important;
    color: var(--gpp-v8-forest) !important;
    font: 650 clamp(27px, 8vw, 39px)/.96 var(--gpp-font-heading, Georgia, serif) !important;
    letter-spacing: -.035em !important;
    text-wrap: balance !important;
}

.gpp-cinematic-app .gpp-learn-slide-head p {
    max-width: 300px !important;
    margin: 9px auto 0 !important;
    color: #5f6d65 !important;
    font: 450 clamp(12px, 3.35vw, 14px)/1.45 var(--gpp-font-body, system-ui, sans-serif) !important;
    text-wrap: balance !important;
}

.gpp-cinematic-app .gpp-learn-next,
.gpp-cinematic-app .gpp-learn-primary,
.gpp-cinematic-app .gpp-ad-slide-cta {
    width: 100% !important;
    min-height: 52px !important;
    margin: auto 0 0 !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 17px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--gpp-v8-forest-2), var(--gpp-v8-forest)) !important;
    box-shadow: 0 12px 28px rgba(24, 61, 41, .17) !important;
    text-decoration: none !important;
    font: 750 13px/1 var(--gpp-font-ui, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-learn-next svg,
.gpp-cinematic-app .gpp-learn-primary svg,
.gpp-cinematic-app .gpp-ad-slide-cta svg {
    width: 17px !important;
    height: 17px !important;
}

/* 1. CAPA — a imagem ocupa a própria tela. */
.gpp-cinematic-app .gpp-learn-slide[data-screen="intro"] {
    color: #fff !important;
    background: #173c2a !important;
}

.gpp-cinematic-app .gpp-cinematic-cover {
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
    background: #173c2a !important;
}

.gpp-cinematic-app .gpp-learn-intro-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #345640 !important;
    box-shadow: none !important;
}

.gpp-cinematic-app .gpp-learn-intro-media::before,
.gpp-cinematic-app .gpp-learn-intro-media::after {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    pointer-events: none !important;
}

.gpp-cinematic-app .gpp-learn-intro-media::before {
    background: linear-gradient(180deg, rgba(8, 28, 18, .15) 0%, rgba(8, 28, 18, .02) 33%, rgba(8, 28, 18, .68) 69%, rgba(8, 28, 18, .94) 100%) !important;
}

.gpp-cinematic-app .gpp-learn-intro-media::after {
    background: linear-gradient(90deg, rgba(7, 27, 18, .22), transparent 60%) !important;
}

.gpp-cinematic-app .gpp-learn-intro-media img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: var(--gpp-post-image-fit, cover) !important;
    object-position: var(--gpp-post-image-x, 50%) var(--gpp-post-image-y, 50%) !important;
    transform: scale(var(--gpp-post-image-zoom, 1.02)) !important;
    filter: saturate(1.03) contrast(1.02) !important;
}

.gpp-cinematic-app .gpp-learn-intro-media > span {
    position: absolute !important;
    z-index: 3 !important;
    top: calc(var(--gpp-v8-header) + 22px) !important;
    left: 24px !important;
    max-width: calc(100% - 48px) !important;
    margin: 0 !important;
    padding: 7px 11px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    border: 1px solid rgba(255,255,255,.26) !important;
    border-radius: 9px !important;
    color: #223f2d !important;
    background: rgba(248, 239, 220, .92) !important;
    box-shadow: 0 9px 24px rgba(0,0,0,.12) !important;
    font: 750 9px/1 var(--gpp-font-ui, system-ui, sans-serif) !important;
    text-transform: none !important;
    letter-spacing: .02em !important;
}

.gpp-cinematic-app .gpp-learn-intro-copy {
    position: absolute !important;
    z-index: 4 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-height: 56% !important;
    margin: 0 !important;
    padding: 22px 24px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    color: #fff !important;
    background: transparent !important;
}

.gpp-cinematic-app .gpp-learn-intro-copy .gpp-learn-kicker {
    align-self: flex-start !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255,255,255,.72) !important;
    background: transparent !important;
    font-size: 9px !important;
}

.gpp-cinematic-app .gpp-learn-intro-copy h1 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    max-width: 330px !important;
    max-height: 3em !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #fff !important;
    font: 620 clamp(31px, 9.4vw, 45px)/.98 var(--gpp-font-heading, Georgia, serif) !important;
    letter-spacing: -.045em !important;
    text-wrap: balance !important;
    text-shadow: 0 4px 22px rgba(0,0,0,.2) !important;
}

.gpp-cinematic-app .gpp-learn-scientific {
    margin: -3px 0 0 !important;
    color: rgba(255,255,255,.82) !important;
    font: italic 12px/1.3 var(--gpp-font-heading, Georgia, serif) !important;
}

.gpp-cinematic-app .gpp-learn-summary {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    max-width: 310px !important;
    max-height: 3em !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: rgba(255,255,255,.88) !important;
    font: 450 clamp(12px, 3.5vw, 14px)/1.42 var(--gpp-font-body, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-learn-facts {
    width: 100% !important;
    margin: 3px 0 0 !important;
    padding: 7px 12px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 18px !important;
    color: #fff !important;
    background: rgba(27, 57, 39, .68) !important;
    backdrop-filter: blur(13px) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.14) !important;
}

.gpp-cinematic-app .gpp-learn-facts > div {
    min-width: 0 !important;
    min-height: 37px !important;
    padding: 6px 2px !important;
    display: grid !important;
    grid-template-columns: 28px 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.13) !important;
    background: transparent !important;
}

.gpp-cinematic-app .gpp-learn-facts > div:last-child {
    border-bottom: 0 !important;
}

.gpp-cinematic-app .gpp-learn-facts svg {
    width: 20px !important;
    height: 20px !important;
    color: #e5d7a8 !important;
}

.gpp-cinematic-app .gpp-learn-facts span {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 82px 1fr !important;
    align-items: center !important;
    gap: 8px !important;
}

.gpp-cinematic-app .gpp-learn-facts small,
.gpp-cinematic-app .gpp-learn-facts strong {
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: inherit !important;
    font: 650 11px/1.2 var(--gpp-font-ui, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-learn-facts strong {
    text-align: right !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.82) !important;
}

.gpp-cinematic-app .gpp-learn-intro-copy .gpp-learn-primary {
    min-height: 50px !important;
    margin-top: 2px !important;
    justify-content: space-between !important;
    padding: 0 10px 0 18px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 999px !important;
    background: rgba(30, 65, 44, .9) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
}

.gpp-cinematic-app .gpp-learn-intro-copy .gpp-learn-primary > span {
    min-width: 0 !important;
    text-align: left !important;
}

.gpp-cinematic-app .gpp-learn-intro-copy .gpp-learn-primary strong {
    display: block !important;
    color: #fff !important;
    font: 750 12px/1.1 var(--gpp-font-ui, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-learn-intro-copy .gpp-learn-primary small {
    display: block !important;
    margin-top: 2px !important;
    color: rgba(255,255,255,.66) !important;
    font: 500 8px/1.1 var(--gpp-font-ui, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-learn-intro-copy .gpp-learn-primary > svg {
    width: 34px !important;
    height: 34px !important;
    padding: 9px !important;
    border-radius: 50% !important;
    color: var(--gpp-v8-forest) !important;
    background: #f6f1e6 !important;
}

/* 2. O ESSENCIAL */
.gpp-cinematic-app .gpp-cinematic-essential-slide {
    background:
        radial-gradient(circle at 90% 8%, rgba(166, 184, 144, .22), transparent 24%),
        var(--gpp-v8-cream) !important;
}

.gpp-cinematic-app .gpp-cinematic-essential {
    padding-bottom: 14px !important;
}

.gpp-cinematic-app .gpp-cinematic-essential .gpp-learn-slide-head h2 {
    font-size: clamp(31px, 9vw, 43px) !important;
}

.gpp-cinematic-app .gpp-cinematic-essential-list {
    display: grid !important;
    gap: 10px !important;
}

.gpp-cinematic-app .gpp-cinematic-essential-list article {
    min-height: 74px !important;
    padding: 12px 13px !important;
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid rgba(32, 69, 45, .06) !important;
    border-radius: 18px !important;
    background: rgba(232, 235, 222, .68) !important;
    box-shadow: 0 8px 24px rgba(35, 57, 42, .035) !important;
}

.gpp-cinematic-app .gpp-cinematic-essential-list article:nth-child(2) {
    background: rgba(242, 237, 224, .92) !important;
}

.gpp-cinematic-app .gpp-cinematic-essential-list article > span {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: var(--gpp-v8-forest-2) !important;
    background: rgba(221, 230, 210, .96) !important;
}

.gpp-cinematic-app .gpp-cinematic-essential-list svg {
    width: 24px !important;
    height: 24px !important;
}

.gpp-cinematic-app .gpp-cinematic-essential-list strong {
    display: block !important;
    margin: 0 0 3px !important;
    color: var(--gpp-v8-ink) !important;
    font: 750 13px/1.2 var(--gpp-font-ui, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-cinematic-essential-list p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #617067 !important;
    font: 450 10.5px/1.38 var(--gpp-font-body, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-cinematic-tip {
    min-height: 66px !important;
    margin-top: 1px !important;
    padding: 12px 13px !important;
    display: grid !important;
    grid-template-columns: 38px 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid rgba(164, 105, 67, .08) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #f3e6d4, #f6eddf) !important;
}

.gpp-cinematic-app .gpp-cinematic-tip > span {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: #8c603d !important;
    background: rgba(255,255,255,.52) !important;
}

.gpp-cinematic-app .gpp-cinematic-tip svg {
    width: 20px !important;
    height: 20px !important;
}

.gpp-cinematic-app .gpp-cinematic-tip strong {
    display: block !important;
    margin-bottom: 2px !important;
    color: #67472f !important;
    font: 750 12px/1.2 var(--gpp-font-ui, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-cinematic-tip p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #7c654f !important;
    font: 450 10px/1.35 var(--gpp-font-body, system-ui, sans-serif) !important;
}

/* 3. EXPLORAR A PLANTA */
.gpp-cinematic-app .gpp-viva-explore-slide {
    background:
        radial-gradient(circle at 50% 42%, rgba(207, 222, 193, .45), transparent 42%),
        #faf6ee !important;
}

.gpp-cinematic-app .gpp-viva-explore-slide .gpp-learn-slide-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.gpp-cinematic-app .gpp-viva-explore-stage,
.gpp-cinematic-app .gpp-learn-explore-stage {
    position: relative !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(230px, 1fr) auto !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.gpp-cinematic-app .gpp-viva-explore-image {
    position: relative !important;
    width: 100% !important;
    min-height: 230px !important;
    height: 100% !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #e7eadf !important;
}

.gpp-cinematic-app .gpp-viva-explore-image::after {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: auto 0 0 !important;
    height: 28% !important;
    background: linear-gradient(transparent, rgba(25, 54, 37, .14)) !important;
    pointer-events: none !important;
}

.gpp-cinematic-app .gpp-viva-explore-image > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: saturate(1.02) contrast(1.01) !important;
}

.gpp-cinematic-app .gpp-viva-hotspot {
    z-index: 4 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 5px solid rgba(255,255,255,.92) !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: var(--gpp-v8-forest-2) !important;
    box-shadow: 0 5px 18px rgba(20, 61, 40, .3) !important;
}

.gpp-cinematic-app .gpp-viva-hotspot i {
    display: none !important;
}

.gpp-cinematic-app .gpp-viva-hotspot span {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    left: 50% !important;
    min-width: max-content !important;
    max-width: 110px !important;
    padding: 5px 8px !important;
    transform: translateX(-50%) scale(.94) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border-radius: 999px !important;
    color: var(--gpp-v8-forest) !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 8px 20px rgba(20, 55, 37, .12) !important;
    font: 700 8px/1 var(--gpp-font-ui, system-ui, sans-serif) !important;
    transition: .18s ease !important;
}

.gpp-cinematic-app .gpp-viva-hotspot.is-active span,
.gpp-cinematic-app .gpp-viva-hotspot:focus-visible span {
    opacity: 1 !important;
    transform: translateX(-50%) scale(1) !important;
}

.gpp-cinematic-app .gpp-learn-live-result,
.gpp-cinematic-app .gpp-viva-zone-result {
    position: relative !important;
    z-index: 5 !important;
    min-height: 88px !important;
    margin: -18px 10px 0 !important;
    padding: 13px 14px !important;
    display: grid !important;
    grid-template-columns: 38px 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid rgba(31, 67, 45, .08) !important;
    border-radius: 18px !important;
    color: var(--gpp-v8-ink) !important;
    background: rgba(255, 252, 246, .96) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 14px 34px rgba(36, 57, 43, .11) !important;
}

.gpp-cinematic-app .gpp-learn-live-result > span {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: var(--gpp-v8-forest-2) !important;
    background: #e6eddf !important;
}

.gpp-cinematic-app .gpp-learn-live-result svg {
    width: 19px !important;
    height: 19px !important;
}

.gpp-cinematic-app .gpp-learn-live-result strong {
    display: block !important;
    margin: 0 0 3px !important;
    color: var(--gpp-v8-ink) !important;
    font: 750 12px/1.2 var(--gpp-font-ui, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-learn-live-result p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #66736c !important;
    font: 450 10px/1.35 var(--gpp-font-body, system-ui, sans-serif) !important;
}

/* 4. TELA PATROCINADA — integrada ao mesmo sistema visual. */
.gpp-cinematic-app .gpp-ad-slide,
.gpp-cinematic-app .gpp-media-slide {
    color: var(--gpp-ad-text, var(--gpp-v8-ink)) !important;
    background:
        radial-gradient(circle at 100% 10%, color-mix(in srgb, var(--gpp-ad-accent, #426a4b) 16%, transparent), transparent 34%),
        var(--gpp-ad-bg, #f4eee3) !important;
}

.gpp-cinematic-app .gpp-media-slide-inner {
    padding: calc(var(--gpp-v8-header) + 15px) 20px 16px !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(210px, 1fr) auto auto !important;
    gap: 11px !important;
    overflow: hidden !important;
}

.gpp-cinematic-app .gpp-ad-slide-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.gpp-cinematic-app .gpp-ad-slide-top span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 25px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    color: var(--gpp-ad-text, var(--gpp-v8-forest)) !important;
    background: color-mix(in srgb, var(--gpp-ad-accent, #426a4b) 14%, transparent) !important;
    font: 750 9px/1 var(--gpp-font-ui, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-ad-slide-top strong {
    max-width: 48% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: inherit !important;
    font: 650 10px/1 var(--gpp-font-ui, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-ad-slide-copy {
    text-align: left !important;
}

.gpp-cinematic-app .gpp-ad-slide-copy h2 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    max-width: 310px !important;
    margin: 0 0 8px !important;
    overflow: hidden !important;
    color: var(--gpp-ad-text, var(--gpp-v8-forest)) !important;
    font: 630 clamp(28px, 8.3vw, 40px)/.98 var(--gpp-font-heading, Georgia, serif) !important;
    letter-spacing: -.04em !important;
    text-wrap: balance !important;
}

.gpp-cinematic-app .gpp-ad-slide-copy p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    max-width: 300px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: color-mix(in srgb, var(--gpp-ad-text, #173126) 72%, transparent) !important;
    font: 450 12px/1.42 var(--gpp-font-body, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-media-stage {
    position: relative !important;
    min-height: 210px !important;
    overflow: hidden !important;
    border: 1px solid rgba(37, 65, 49, .07) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.36) !important;
    box-shadow: 0 16px 34px rgba(42, 57, 45, .08) !important;
}

.gpp-cinematic-app .gpp-media-stage::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 0 0 !important;
    height: 22% !important;
    background: linear-gradient(transparent, rgba(30, 48, 36, .12)) !important;
    pointer-events: none !important;
}

.gpp-cinematic-app .gpp-media-stage img,
.gpp-cinematic-app .gpp-media-stage video,
.gpp-cinematic-app .gpp-media-stage iframe,
.gpp-cinematic-app .gpp-media-stage .gpp-media-embed {
    width: 100% !important;
    height: 100% !important;
    min-height: 210px !important;
    display: block !important;
    object-fit: cover !important;
    border: 0 !important;
}

.gpp-cinematic-app .gpp-ad-benefits {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1px !important;
    overflow: hidden !important;
    border: 1px solid rgba(37, 65, 49, .08) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.38) !important;
}

.gpp-cinematic-app .gpp-ad-benefits span {
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 9px 5px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 4px !important;
    text-align: center !important;
    border-right: 1px solid rgba(37, 65, 49, .08) !important;
    font: 600 8px/1.2 var(--gpp-font-ui, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-ad-benefits span:last-child {
    border-right: 0 !important;
}

.gpp-cinematic-app .gpp-ad-benefits svg {
    width: 18px !important;
    height: 18px !important;
    color: var(--gpp-ad-accent, var(--gpp-v8-forest)) !important;
}

.gpp-cinematic-app .gpp-ad-slide-cta {
    margin: 0 !important;
    background: var(--gpp-ad-accent, var(--gpp-v8-forest)) !important;
}

.gpp-cinematic-app .gpp-ad-continue {
    display: none !important;
}

/* 5. COLEÇÃO / PRÓXIMO PASSO */
.gpp-cinematic-app .gpp-cinematic-related-slide {
    color: #fff !important;
    background: var(--gpp-v8-forest) !important;
}

.gpp-cinematic-app .gpp-cinematic-related-slide::before,
.gpp-cinematic-app .gpp-cinematic-related-slide::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
}

.gpp-cinematic-app .gpp-cinematic-related-slide::before {
    background-image: var(--gpp-related-hero, linear-gradient(135deg, #1c4a31, #0f291c)) !important;
    background-size: cover !important;
    background-position: center !important;
    transform: scale(1.03) !important;
}

.gpp-cinematic-app .gpp-cinematic-related-slide::after {
    background: linear-gradient(180deg, rgba(8, 31, 20, .84) 0%, rgba(8, 31, 20, .31) 43%, rgba(8, 31, 20, .13) 58%, rgba(8, 31, 20, .58) 100%) !important;
}

.gpp-cinematic-app .gpp-cinematic-related {
    z-index: 2 !important;
    padding: calc(var(--gpp-v8-header) + 22px) 18px 10px !important;
    overflow: hidden !important;
    color: #fff !important;
    background: transparent !important;
}

.gpp-cinematic-app .gpp-cinematic-related-copy {
    max-width: 285px !important;
    margin: 6px 0 0 !important;
}

.gpp-cinematic-app .gpp-cinematic-related-copy > small {
    display: inline-flex !important;
    min-height: 24px !important;
    padding: 0 9px !important;
    align-items: center !important;
    border-radius: 999px !important;
    color: rgba(255,255,255,.88) !important;
    background: rgba(255,255,255,.14) !important;
    font: 750 8px/1 var(--gpp-font-ui, system-ui, sans-serif) !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.gpp-cinematic-app .gpp-cinematic-related-copy h2 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    margin: 14px 0 8px !important;
    overflow: hidden !important;
    color: #fff !important;
    font: 620 clamp(31px, 9.2vw, 44px)/.98 var(--gpp-font-heading, Georgia, serif) !important;
    letter-spacing: -.04em !important;
}

.gpp-cinematic-app .gpp-cinematic-related-copy p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    max-width: 270px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: rgba(255,255,255,.8) !important;
    font: 450 12px/1.4 var(--gpp-font-body, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-cinematic-collection-cta {
    width: fit-content !important;
    min-height: 42px !important;
    margin-top: 15px !important;
    padding: 0 14px 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    border-radius: 999px !important;
    color: var(--gpp-v8-forest) !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.13) !important;
    text-decoration: none !important;
    font: 750 11px/1 var(--gpp-font-ui, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-cinematic-collection-cta svg {
    width: 15px !important;
    height: 15px !important;
}

.gpp-cinematic-app .gpp-cinematic-recommendations {
    margin-top: auto !important;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 20px !important;
    color: var(--gpp-v8-ink) !important;
    background: rgba(250, 247, 239, .94) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.17) !important;
}

.gpp-cinematic-app .gpp-cinematic-recommendations > strong {
    display: block !important;
    margin: 0 0 9px !important;
    font: 750 11px/1.2 var(--gpp-font-ui, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-cinematic-recommendations > div {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

.gpp-cinematic-app .gpp-cinematic-recommendations a {
    min-width: 0 !important;
    color: var(--gpp-v8-ink) !important;
    text-align: center !important;
    text-decoration: none !important;
}

.gpp-cinematic-app .gpp-cinematic-recommendations a > span {
    width: 100% !important;
    aspect-ratio: 1.2 / 1 !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 13px !important;
    background: #e6eadf !important;
}

.gpp-cinematic-app .gpp-cinematic-recommendations img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.gpp-cinematic-app .gpp-cinematic-recommendations svg {
    width: 24px !important;
    height: 24px !important;
    color: var(--gpp-v8-forest-2) !important;
}

.gpp-cinematic-app .gpp-cinematic-recommendations small {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    min-height: 24px !important;
    margin-top: 5px !important;
    overflow: hidden !important;
    color: #59675f !important;
    font: 650 8px/1.25 var(--gpp-font-ui, system-ui, sans-serif) !important;
}

.gpp-cinematic-app .gpp-cinematic-mini-nav {
    min-height: 42px !important;
    margin-top: 8px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: center !important;
    border-radius: 15px !important;
    color: var(--gpp-v8-forest) !important;
    background: rgba(250, 247, 239, .92) !important;
}

.gpp-cinematic-app .gpp-cinematic-mini-nav > span {
    display: grid !important;
    place-items: center !important;
    gap: 2px !important;
}

.gpp-cinematic-app .gpp-cinematic-mini-nav svg {
    width: 15px !important;
    height: 15px !important;
}

.gpp-cinematic-app .gpp-cinematic-mini-nav small {
    font: 650 7px/1 var(--gpp-font-ui, system-ui, sans-serif) !important;
}

/* Demais telas interativas seguem o mesmo sistema visual, sem moldura externa. */
.gpp-cinematic-app .gpp-engine-compare,
.gpp-cinematic-app .gpp-engine-decision,
.gpp-cinematic-app .gpp-engine-steps,
.gpp-cinematic-app .gpp-viva-light-lab,
.gpp-cinematic-app .gpp-viva-water-lab,
.gpp-cinematic-app .gpp-viva-soil-lab,
.gpp-cinematic-app .gpp-viva-growth-lab,
.gpp-cinematic-app .gpp-viva-visual-diagnosis,
.gpp-cinematic-app .gpp-viva-weather-box,
.gpp-cinematic-app .gpp-viva-glossary-grid,
.gpp-cinematic-app .gpp-viva-chapter-cards,
.gpp-cinematic-app .gpp-learn-chapters {
    border: 0 !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.48) !important;
    box-shadow: 0 12px 30px rgba(35, 57, 42, .055) !important;
}

.gpp-cinematic-app .gpp-learn-insights article,
.gpp-cinematic-app .gpp-engine-step-card,
.gpp-cinematic-app .gpp-engine-compare-result,
.gpp-cinematic-app .gpp-engine-decision-result,
.gpp-cinematic-app .gpp-learn-source,
.gpp-cinematic-app .gpp-viva-chapter-cards button,
.gpp-cinematic-app .gpp-learn-chapters button,
.gpp-cinematic-app .gpp-viva-glossary-grid button {
    border-color: rgba(34, 67, 46, .08) !important;
    border-radius: 17px !important;
    background: rgba(246, 244, 236, .92) !important;
    box-shadow: none !important;
}

.gpp-cinematic-app .gpp-inline-ad {
    overflow: hidden !important;
    border: 1px solid rgba(32, 64, 43, .08) !important;
    border-radius: 18px !important;
    background: var(--gpp-ad-bg, #f2eee4) !important;
    box-shadow: 0 10px 24px rgba(34, 56, 42, .08) !important;
}

/* Barra inferior de navegação. */
.gpp-cinematic-app .gpp-learn-controls {
    position: relative !important;
    z-index: 95 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: var(--gpp-v8-controls) !important;
    min-height: var(--gpp-v8-controls) !important;
    margin: 0 !important;
    padding: 8px 14px max(8px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-top: 1px solid rgba(32, 65, 45, .08) !important;
    background: rgba(248, 245, 237, .95) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 -10px 28px rgba(35, 55, 42, .035) !important;
}

.gpp-cinematic-app:has(.is-active[data-screen="intro"]) .gpp-learn-controls {
    border-top-color: rgba(255,255,255,.08) !important;
    background: #173c2a !important;
    box-shadow: none !important;
}

.gpp-cinematic-app .gpp-learn-controls > button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: var(--gpp-v8-forest) !important;
    background: #e8ece2 !important;
    box-shadow: none !important;
}

.gpp-cinematic-app:has(.is-active[data-screen="intro"]) .gpp-learn-controls > button {
    color: #fff !important;
    background: rgba(255,255,255,.12) !important;
}

.gpp-cinematic-app .gpp-learn-controls > button:disabled {
    opacity: .26 !important;
}

.gpp-cinematic-app .gpp-learn-controls > button svg {
    width: 17px !important;
    height: 17px !important;
}

.gpp-cinematic-app .gpp-learn-controls [data-gpp-story-dots] {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    overflow: hidden !important;
}

.gpp-cinematic-app .gpp-learn-controls [data-gpp-story-dots] button {
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(35, 70, 48, .19) !important;
    transition: width .2s ease, background .2s ease !important;
}

.gpp-cinematic-app .gpp-learn-controls [data-gpp-story-dots] button.is-active {
    width: 20px !important;
    background: var(--gpp-v8-gold) !important;
}

.gpp-cinematic-app:has(.is-active[data-screen="intro"]) .gpp-learn-controls [data-gpp-story-dots] button {
    background: rgba(255,255,255,.19) !important;
}

.gpp-cinematic-app:has(.is-active[data-screen="intro"]) .gpp-learn-controls [data-gpp-story-dots] button.is-active {
    background: #d7bc78 !important;
}

/* Sheets, busca e toast acima da experiência. */
.gpp-cinematic-app .gpp-viva-sheet,
.gpp-cinematic-app .gpp-viva-search {
    z-index: 500 !important;
}

.gpp-cinematic-app .gpp-viva-sheet-panel {
    border-radius: 26px 26px 0 0 !important;
    background: #fbf8f1 !important;
}

.gpp-cinematic-app .gpp-toast {
    z-index: 700 !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: #183d2a !important;
}

/* Telas muito baixas: compactação sem quebrar ou esconder ações. */
@media (max-height: 690px) {
    .gpp-cinematic-app {
        --gpp-v8-header: 52px;
        --gpp-v8-controls: 56px;
    }

    .gpp-cinematic-app .gpp-learn-slide-inner {
        padding-top: calc(var(--gpp-v8-header) + 10px) !important;
        padding-bottom: 10px !important;
        gap: 8px !important;
    }

    .gpp-cinematic-app .gpp-learn-slide-head small {
        display: none !important;
    }

    .gpp-cinematic-app .gpp-learn-slide-head h2 {
        font-size: clamp(25px, 7.5vw, 34px) !important;
    }

    .gpp-cinematic-app .gpp-learn-slide-head p {
        margin-top: 5px !important;
        font-size: 10.5px !important;
        line-height: 1.3 !important;
    }

    .gpp-cinematic-app .gpp-cinematic-essential-list {
        gap: 7px !important;
    }

    .gpp-cinematic-app .gpp-cinematic-essential-list article {
        min-height: 61px !important;
        padding: 8px 10px !important;
        grid-template-columns: 38px 1fr !important;
    }

    .gpp-cinematic-app .gpp-cinematic-essential-list article > span {
        width: 36px !important;
        height: 36px !important;
    }

    .gpp-cinematic-app .gpp-cinematic-tip {
        min-height: 54px !important;
        padding: 8px 10px !important;
    }

    .gpp-cinematic-app .gpp-learn-next,
    .gpp-cinematic-app .gpp-learn-primary,
    .gpp-cinematic-app .gpp-ad-slide-cta {
        min-height: 46px !important;
    }

    .gpp-cinematic-app .gpp-learn-intro-copy {
        min-height: 62% !important;
        padding: 15px 18px 12px !important;
        gap: 7px !important;
    }

    .gpp-cinematic-app .gpp-learn-intro-copy h1 {
        font-size: clamp(27px, 8.2vw, 38px) !important;
    }

    .gpp-cinematic-app .gpp-learn-summary {
        -webkit-line-clamp: 1 !important;
    }

    .gpp-cinematic-app .gpp-learn-facts > div {
        min-height: 31px !important;
        padding: 4px 2px !important;
    }

    .gpp-cinematic-app .gpp-media-slide-inner {
        grid-template-rows: auto auto minmax(160px, 1fr) auto auto !important;
    }

    .gpp-cinematic-app .gpp-media-stage,
    .gpp-cinematic-app .gpp-media-stage img,
    .gpp-cinematic-app .gpp-media-stage video,
    .gpp-cinematic-app .gpp-media-stage iframe,
    .gpp-cinematic-app .gpp-media-stage .gpp-media-embed {
        min-height: 160px !important;
    }
}

/* Desktop/tablet: mostra a experiência como um aplicativo premium centralizado. */
@media (min-width: 700px) {
    body.gpp-cinematic-body {
        display: grid !important;
        place-items: center !important;
        padding: 20px !important;
        background:
            radial-gradient(circle at 12% 88%, rgba(115, 143, 102, .2), transparent 24%),
            radial-gradient(circle at 88% 12%, rgba(190, 157, 110, .17), transparent 27%),
            #f4f1ea !important;
    }

    .gpp-cinematic-app {
        width: min(430px, calc(100vw - 40px)) !important;
        height: min(900px, calc(100svh - 40px)) !important;
        border: 1px solid rgba(27, 57, 39, .12) !important;
        border-radius: 32px !important;
        overflow: hidden !important;
        box-shadow: 0 28px 70px rgba(26, 48, 35, .2) !important;
    }

    .admin-bar .gpp-cinematic-app {
        height: min(868px, calc(100svh - 72px)) !important;
    }

    .gpp-cinematic-app .gpp-learn-header {
        border-radius: 32px 32px 0 0 !important;
    }
}

@media (max-width: 420px) {
    .gpp-cinematic-app .gpp-learn-header-actions [data-gpp-share] {
        display: none !important;
    }

    .gpp-cinematic-app .gpp-learn-brand strong {
        max-width: 116px !important;
    }
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .gpp-cinematic-app .gpp-ad-slide-top span {
        background: rgba(40, 78, 52, .12) !important;
    }

    .gpp-cinematic-app .gpp-ad-slide-copy p {
        color: rgba(24, 49, 37, .72) !important;
    }
}

/*
 * Correção de especificidade contra regras herdadas das versões anteriores.
 * Este bloco fica por último de propósito: a v8 é uma tela inteira, não um card antigo.
 */
body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards {
    width: 100% !important;
    max-width: none !important;
    height: 100svh !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-rows: minmax(0, 1fr) var(--gpp-v8-controls) !important;
    border-radius: 0 !important;
    background: var(--gpp-v8-cream) !important;
}

body.gpp-cinematic-body.admin-bar #gpp-app.gpp-cinematic-app.gpp-readable-cards {
    height: calc(100svh - 32px) !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-stage {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-deck {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    scroll-padding: 0 !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-slide,
body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-slide.is-active,
body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-slide.is-before,
body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-slide.is-after,
body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-slide.is-far {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-slide-inner {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: calc(var(--gpp-v8-header) + 16px) 20px 16px !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-slide:not(.is-intro) .gpp-learn-slide-head {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--gpp-v8-ink) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-slide:not(.is-intro) .gpp-learn-slide-head > span {
    display: none !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-slide:not(.is-intro) .gpp-learn-slide-head small {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 0 7px !important;
    color: var(--gpp-v8-forest-2) !important;
    background: rgba(43, 80, 54, .07) !important;
    font-size: 9px !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-slide:not(.is-intro) .gpp-learn-slide-head h2 {
    display: block !important;
    width: auto !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    color: var(--gpp-v8-forest) !important;
    font-family: var(--gpp-font-heading, Georgia, serif) !important;
    font-size: clamp(27px, 8vw, 39px) !important;
    font-weight: 650 !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
    text-align: center !important;
    -webkit-line-clamp: unset !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-slide:not(.is-intro) .gpp-learn-slide-head p {
    display: block !important;
    width: auto !important;
    max-width: 300px !important;
    margin: 9px auto 0 !important;
    overflow: visible !important;
    color: #5f6d65 !important;
    font-size: clamp(12px, 3.35vw, 14px) !important;
    line-height: 1.45 !important;
    text-align: center !important;
    -webkit-line-clamp: unset !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-slide.is-intro,
body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-slide[data-screen="intro"] {
    background: #173c2a !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-intro.gpp-cinematic-cover {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    background: #173c2a !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-intro-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-intro-media > span {
    top: calc(var(--gpp-v8-header) + 22px) !important;
    bottom: auto !important;
    left: 24px !important;
    padding: 7px 11px !important;
    color: #223f2d !important;
    background: rgba(248, 239, 220, .92) !important;
    font-size: 9px !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-intro-copy {
    position: absolute !important;
    z-index: 4 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-height: 56% !important;
    margin: 0 !important;
    padding: 22px 24px 18px !important;
    display: flex !important;
    flex: none !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    color: #fff !important;
    background: transparent !important;
    text-align: left !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-intro-copy .gpp-learn-kicker {
    justify-content: flex-start !important;
    margin: 0 !important;
    color: rgba(255,255,255,.72) !important;
    background: transparent !important;
    font-size: 9px !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-intro-copy h1 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    max-width: 330px !important;
    max-height: 3em !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #fff !important;
    font-family: var(--gpp-font-heading, Georgia, serif) !important;
    font-size: clamp(31px, 9.4vw, 45px) !important;
    font-weight: 620 !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    text-align: left !important;
    text-shadow: 0 4px 22px rgba(0,0,0,.2) !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-scientific {
    margin: -3px 0 0 !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-summary {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    max-width: 310px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: rgba(255,255,255,.88) !important;
    font-size: clamp(12px, 3.5vw, 14px) !important;
    line-height: 1.42 !important;
    text-align: left !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-facts {
    width: 100% !important;
    margin: 3px 0 0 !important;
    padding: 7px 12px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 18px !important;
    background: rgba(27, 57, 39, .68) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.14) !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-facts > div {
    min-height: 37px !important;
    padding: 6px 2px !important;
    display: grid !important;
    grid-template-columns: 28px 1fr !important;
    gap: 8px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: transparent !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-facts > div:last-child {
    border-bottom: 0 !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-facts svg {
    width: 20px !important;
    height: 20px !important;
    color: #e5d7a8 !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-facts span {
    display: grid !important;
    grid-template-columns: 82px 1fr !important;
    gap: 8px !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-facts small,
body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-facts strong {
    color: #fff !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-facts strong {
    color: rgba(255,255,255,.82) !important;
    text-align: right !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-primary,
body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-next {
    min-height: 52px !important;
    margin: auto 0 0 !important;
    padding: 0 18px !important;
    border-radius: 17px !important;
    background: linear-gradient(135deg, var(--gpp-v8-forest-2), var(--gpp-v8-forest)) !important;
    box-shadow: 0 12px 28px rgba(24, 61, 41, .17) !important;
    font-size: 13px !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-slide.is-intro .gpp-learn-primary {
    min-height: 50px !important;
    margin-top: 2px !important;
    padding: 0 10px 0 18px !important;
    border-radius: 999px !important;
    background: rgba(30, 65, 44, .9) !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-viva-explore-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 230px !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-viva-explore-image > img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-cinematic-related-slide {
    color: #fff !important;
    background: #173c2a !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-cinematic-related-slide .gpp-cinematic-related {
    color: #fff !important;
    background: transparent !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-controls {
    width: 100% !important;
    height: var(--gpp-v8-controls) !important;
    min-height: var(--gpp-v8-controls) !important;
    margin: 0 !important;
    padding: 8px 14px max(8px, env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(32, 65, 45, .08) !important;
    border-radius: 0 !important;
    background: rgba(248, 245, 237, .95) !important;
    box-shadow: 0 -10px 28px rgba(35, 55, 42, .035) !important;
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards:has(.is-active[data-screen="intro"]) .gpp-learn-controls {
    background: #173c2a !important;
}

@media (max-height: 690px) {
    body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-slide-inner {
        padding-top: calc(var(--gpp-v8-header) + 10px) !important;
        padding-bottom: 10px !important;
        gap: 8px !important;
    }

    body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-intro-copy {
        min-height: 62% !important;
        padding: 15px 18px 12px !important;
        gap: 7px !important;
    }

    body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-intro-copy h1 {
        font-size: clamp(27px, 8.2vw, 38px) !important;
        -webkit-line-clamp: 3 !important;
    }

    body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards .gpp-learn-facts > div {
        min-height: 31px !important;
        padding: 4px 2px !important;
    }
}

@media (min-width: 700px) {
    body.gpp-cinematic-body #gpp-app.gpp-cinematic-app.gpp-readable-cards {
        width: min(430px, calc(100vw - 40px)) !important;
        height: min(900px, calc(100svh - 40px)) !important;
        border-radius: 32px !important;
        box-shadow: 0 28px 70px rgba(26, 48, 35, .2) !important;
    }
}

body.gpp-cinematic-body #gpp-app.gpp-cinematic-app .gpp-cinematic-related-bg {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    overflow: hidden !important;
}
body.gpp-cinematic-body #gpp-app.gpp-cinematic-app .gpp-cinematic-related-bg::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(8,31,20,.84) 0%, rgba(8,31,20,.32) 42%, rgba(8,31,20,.16) 58%, rgba(8,31,20,.72) 100%) !important;
}
body.gpp-cinematic-body #gpp-app.gpp-cinematic-app .gpp-cinematic-related-bg img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.03) !important;
    filter: saturate(.92) contrast(1.02) !important;
}
body.gpp-cinematic-body #gpp-app.gpp-cinematic-app .gpp-cinematic-related-slide::before,
body.gpp-cinematic-body #gpp-app.gpp-cinematic-app .gpp-cinematic-related-slide::after {
    display: none !important;
}