/* ============================================================
   DIGITAL E COMPANIA
   PORTA DE ENTRADA — style.css
   ============================================================ */


/* ============================================================
   01. RESET
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;

    background: #111111;

    color-scheme: dark;
}


body {
    width: 100%;
    min-width: 320px;
    min-height: 100vh;

    background: #111111;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;
}


body.menu-open {
    overflow: hidden;
}


img {
    display: block;
    max-width: 100%;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
select,
textarea {
    font: inherit;
}


button {
    border: 0;
    cursor: pointer;
}


ul {
    list-style: none;
}


[hidden] {
    display: none !important;
}


/* ============================================================
   02. VARIABLES
   ============================================================ */

:root {

    --black:
        #111111;

    --black-soft:
        #151515;

    --black-card:
        #1c1c1c;

    --black-light:
        #222222;

    --yellow:
        #f4c430;

    --yellow-light:
        #ffd54f;

    --white:
        #ffffff;

    --white-soft:
        rgba(255, 255, 255, 0.72);

    --white-muted:
        rgba(255, 255, 255, 0.52);

    --white-faint:
        rgba(255, 255, 255, 0.10);

    --border:
        rgba(255, 255, 255, 0.08);

    --container:
        1180px;

    --radius-small:
        10px;

    --radius-medium:
        16px;

    --radius-large:
        24px;

    --shadow:
        0 24px 70px rgba(0, 0, 0, 0.30);

}


/* ============================================================
   03. GLOBAL CONTAINER
   ============================================================ */

.container {
    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin: 0 auto;
}


/* ============================================================
   04. BUTTONS
   ============================================================ */

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding:
        0 20px;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-small);

    font-size: 13px;
    font-weight: 900;

    line-height: 1;

    white-space: nowrap;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}


.btn:hover {
    transform: translateY(-2px);
}


.btn:active {
    transform: translateY(0);
}


.btn-primary {
    background:
        var(--yellow);

    color:
        #111111;

    box-shadow:
        0 10px 28px rgba(244, 196, 48, 0.16);
}


.btn-primary:hover {
    background:
        var(--yellow-light);

    box-shadow:
        0 14px 34px rgba(244, 196, 48, 0.22);
}


.btn-secondary {
    background:
        rgba(255, 255, 255, 0.04);

    border-color:
        rgba(255, 255, 255, 0.16);

    color:
        var(--white);
}


.btn-secondary:hover {
    background:
        rgba(255, 255, 255, 0.08);

    border-color:
        rgba(244, 196, 48, 0.45);

    color:
        var(--yellow-light);
}


.btn-large {
    min-height: 52px;

    padding:
        0 25px;

    font-size: 14px;
}


/* ============================================================
   05. HEADER
   ============================================================ */

.header {
    position: sticky;
    top: 0;
    z-index: 100;

    width: 100%;

    background:
        rgba(17, 17, 17, 0.94);

    border-bottom:
        1px solid var(--border);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


.navbar {
    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 76px;

    gap: 24px;
}


/* ============================================================
   06. LOGO
   ============================================================ */

.logo,
.footer-logo {
    display: inline-flex;

    flex-direction: column;

    flex-shrink: 0;

    line-height: 0.92;

    letter-spacing:
        -0.055em;
}


.logo-main {
    color:
        var(--white);

    font-size: 21px;
    font-weight: 900;
}


.logo-accent {
    margin-top: 4px;

    color:
        var(--yellow);

    font-size: 10px;
    font-weight: 900;

    letter-spacing:
        0.08em;
}

/* ============================================================
   LOGO + NOME OFICIAL DA MARCA
   ============================================================ */

.brand-lockup {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    transition:
        transform 0.2s ease;
}


.brand-lockup:hover {
    transform:
        translateY(-1px);
}


.brand-logo {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 10px;
}


.brand-logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


.brand-name {
    display: flex;

    flex-direction: column;

    justify-content: center;

    line-height: 0.95;
}


.brand-name-main {
    color:
        var(--white);

    font-size: 15px;

    font-weight: 900;

    letter-spacing:
        -0.04em;
}


.brand-name-accent {
    margin-top: 4px;

    color:
        var(--yellow);

    font-size: 8px;

    font-weight: 900;

    letter-spacing:
        0.12em;
}


/* ============================================================
   07. NAVIGATION
   ============================================================ */

.navbar-menu {
    display: flex;

    align-items: center;

    gap: 26px;

    margin-left: auto;
}


.navbar-menu li a {
    position: relative;

    color:
        var(--white-muted);

    font-size: 12px;
    font-weight: 800;

    transition:
        color 0.2s ease;
}


.navbar-menu li a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -8px;

    height: 2px;

    background:
        var(--yellow);

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform 0.2s ease;
}


.navbar-menu li a:hover {
    color:
        var(--white);
}


.navbar-menu li a:hover::after {
    transform:
        scaleX(1);
}


.menu-close {
    display: none;
}


.navbar-actions {
    display: flex;

    align-items: center;

    gap: 8px;
}

/* ==================================================
   USUÁRIO AUTENTICADO
================================================== */

/* ==================================================
   USUÁRIO MOBILE — OCULTO NO DESKTOP
================================================== */

.home-mobile-user {
    display: none;
}


.home-user {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-width: 0;

    max-width: 180px;

    padding: 7px 10px;

    border: 1px solid
        rgba(
            17,
            17,
            17,
            0.10
        );

    border-radius: 8px;

    background:
        rgba(
            17,
            17,
            17,
            0.04
        );

    color:
        #111111;

}


.home-user-icon {

    width: 25px;

    height: 25px;

    flex: 0 0 25px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(
            17,
            17,
            17,
            0.08
        );

    font-size: 13px;

    line-height: 1;

}


.home-user-name {

    display: inline-block;

    min-width: 0;

    max-width: 140px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.2;

    color: var(--white);

    visibility: visible;

    opacity: 1;

}

.navbar-toggle {
    display: none;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    background:
        rgba(255, 255, 255, 0.05);

    border:
        1px solid var(--border);

    border-radius:
        10px;

    color:
        var(--white);

    font-size: 20px;
}


/* ============================================================
   08. MENU OVERLAY
   ============================================================ */

.menu-overlay {
    display: none;
}


/* ============================================================
   09. HERO
   ============================================================ */

.hero {
    position: relative;

    min-height:
        calc(100vh - 76px);

    min-height:
        calc(100dvh - 76px);

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(244, 196, 48, 0.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(244, 196, 48, 0.04),
            transparent 28%
        ),
        var(--black);
}


.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(17, 17, 17, 0.95) 0%,
            rgba(17, 17, 17, 0.72) 46%,
            rgba(17, 17, 17, 0.25) 100%
        );
}


.hero-grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(380px, 0.95fr);

    align-items: center;

    min-height:
        calc(100vh - 76px);

    min-height:
        calc(100dvh - 76px);

    gap: 50px;
}


/* ============================================================
   10. HERO CONTENT
   ============================================================ */

.hero-content {
    max-width: 650px;
}


.hero-badge,
.section-eyebrow {
    display: inline-flex;

    align-items: center;

    color:
        var(--yellow);

    font-size: 10px;
    font-weight: 900;

    letter-spacing:
        0.18em;
}


.hero-badge {
    margin-bottom: 18px;

    padding:
        7px 11px;

    background:
        rgba(244, 196, 48, 0.08);

    border:
        1px solid rgba(244, 196, 48, 0.24);

    border-radius:
        999px;
}


.hero-title {
    max-width: 720px;

    font-size:
        clamp(42px, 6vw, 76px);

    line-height:
        0.98;

    font-weight:
        900;

    letter-spacing:
        -0.06em;
}


.hero-title span,
.section-heading h2 span,
.library-heading h2 span,
.final-cta h2 span,
.about-content h2 span {
    color:
        var(--yellow);
}


.hero-subtitle {
    max-width: 610px;

    margin-top: 24px;

    color:
        var(--white-soft);

    font-size:
        clamp(16px, 1.7vw, 20px);

    line-height:
        1.55;

    font-weight:
        600;
}


.hero-description {
    max-width: 590px;

    margin-top: 12px;

    color:
        var(--white-muted);

    font-size: 14px;

    line-height:
        1.7;
}


.hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}


.hero-trust {
    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 22px;

    color:
        rgba(255, 255, 255, 0.46);

    font-size: 11px;
    font-weight: 700;
}


.hero-trust span::first-letter {
    color:
        var(--yellow);
}


/* ============================================================
   11. HERO VISUAL
============================================================ */

.hero-visual {
    position: relative;

    min-height: 560px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.hero-glow {
    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(244, 196, 48, 0.18),
            rgba(244, 196, 48, 0.04) 42%,
            transparent 70%
        );

    filter:
        blur(10px);
}


.hero-books {
    position: relative;

    width: 380px;
    height: 470px;

    transform:
        translateY(5px);
}


.hero-book {
    position: absolute;

    top: 50%;

    width: 250px;
    height: 350px;

    border-radius:
        5px 12px 12px 5px;

    background:
        linear-gradient(
            135deg,
            #292929,
            #0e0e0e
        );

    border:
        1px solid rgba(255, 255, 255, 0.10);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55);

    transform:
        translateY(-50%);
}


.hero-book--back {
    left: 28px;

    opacity: 0.48;

    transform:
        translateY(-50%)
        rotate(-10deg);
}


.hero-book--front {
    right: 20px;

    background:
        linear-gradient(
            145deg,
            #222222,
            #111111
        );

    transform:
        translateY(-50%)
        rotate(7deg);

    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.65);
}


.hero-book::after {
    content: "";

    position: absolute;

    top: 0;
    right: -8px;
    bottom: 0;

    width: 8px;

    border-radius:
        0 8px 8px 0;

    background:
        linear-gradient(
            180deg,
            #2e2e2e,
            #0b0b0b
        );
}


.hero-book-placeholder {
    position: absolute;

    inset: 16px;

    border:
        1px solid rgba(244, 196, 48, 0.20);

    border-radius:
        2px;

    background:
        linear-gradient(
            145deg,
            rgba(244, 196, 48, 0.12),
            rgba(255, 255, 255, 0.02)
        );
}


.hero-book-placeholder::before {
    content:
        "DIGITAL";

    position: absolute;

    left: 20px;
    right: 20px;
    top: 45%;

    transform:
        translateY(-50%);

    color:
        rgba(255, 255, 255, 0.88);

    font-size: 25px;
    font-weight: 900;

    text-align:
        center;

    letter-spacing:
        -0.04em;
}


.hero-book-placeholder::after {
    content:
        "E COMPANIA";

    position: absolute;

    left: 20px;
    right: 20px;
    top: 55%;

    color:
        var(--yellow);

    font-size: 9px;
    font-weight: 900;

    text-align:
        center;

    letter-spacing:
        0.12em;
}


/* ============================================================
   12. GENERIC SECTIONS
   ============================================================ */

.benefits,
.library-section,
.how-it-works,
.about-section {
    position: relative;

    padding:
        110px 0;
}


.benefits {
    background:
        #151515;
}


.library-section {
    background:
        #111111;
}


.how-it-works {
    background:
        #151515;
}


.about-section {
    background:
        #111111;
}


.section-heading {
    max-width: 700px;

    margin:
        0 auto 52px;

    text-align:
        center;
}


.section-heading h2 {
    margin-top: 12px;

    font-size:
        clamp(32px, 4vw, 50px);

    line-height:
        1.03;

    font-weight:
        900;

    letter-spacing:
        -0.05em;
}


.section-heading p {
    max-width: 620px;

    margin:
        18px auto 0;

    color:
        var(--white-muted);

    font-size: 15px;

    line-height:
        1.7;
}


/* ============================================================
   13. BENEFITS
   ============================================================ */

.benefits-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.benefit-card {
    min-height: 230px;

    padding: 28px;

    background:
        linear-gradient(
            145deg,
            #1c1c1c,
            #151515
        );

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease;
}


.benefit-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(244, 196, 48, 0.30);
}


.benefit-number {
    display: block;

    margin-bottom: 28px;

    color:
        var(--yellow);

    font-size: 11px;
    font-weight: 900;

    letter-spacing:
        0.12em;
}


.benefit-card h3 {
    font-size: 21px;
    font-weight: 900;

    letter-spacing:
        -0.035em;
}


.benefit-card p {
    margin-top: 12px;

    color:
        var(--white-muted);

    font-size: 13px;

    line-height:
        1.65;
}


/* ============================================================
   14. LIBRARY HEADER
   ============================================================ */

.library-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 36px;
}


.library-heading h2 {
    margin-top: 10px;

    font-size:
        clamp(32px, 4vw, 52px);

    line-height:
        1.02;

    font-weight:
        900;

    letter-spacing:
        -0.05em;
}


.library-heading p {
    max-width: 600px;

    margin-top: 14px;

    color:
        var(--white-muted);

    font-size: 14px;

    line-height:
        1.65;
}


.library-app-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

    min-height: 44px;

    padding:
        0 16px;

    background:
        rgba(244, 196, 48, 0.06);

    border:
        1px solid rgba(244, 196, 48, 0.22);

    border-radius:
        var(--radius-small);

    color:
        var(--yellow);

    font-size: 12px;
    font-weight: 900;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.library-app-link:hover {
    background:
        rgba(244, 196, 48, 0.12);

    border-color:
        rgba(244, 196, 48, 0.42);

    transform:
        translateY(-2px);
}


/* ============================================================
   15. LIBRARY TOOLBAR
   ============================================================ */

.library-toolbar {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        230px;

    gap: 14px;

    margin-bottom: 24px;

    padding: 18px;

    background:
        #151515;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);
}


.library-search,
.library-filter {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.library-search label,
.library-filter label,
.library-sort label {
    color:
        var(--white-muted);

    font-size: 10px;
    font-weight: 900;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


.search-wrapper {
    position: relative;
}


.library-search input,
.library-filter select,
.library-sort select {
    width: 100%;

    min-height: 46px;

    padding:
        0 42px 0 14px;

    background:
        #111111;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius:
        10px;

    outline: none;

    color:
        var(--white);

    font-size: 13px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.library-search input::placeholder {
    color:
        rgba(255, 255, 255, 0.34);
}


.library-search input:focus,
.library-filter select:focus,
.library-sort select:focus {
    border-color:
        rgba(244, 196, 48, 0.55);

    box-shadow:
        0 0 0 3px rgba(244, 196, 48, 0.08);
}


.library-filter select,
.library-sort select {
    padding-right: 12px;

    appearance: auto;
}


#product-search-clear {
    position: absolute;

    top: 50%;
    right: 7px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    transform:
        translateY(-50%);

    background:
        transparent;

    color:
        rgba(255, 255, 255, 0.42);

    border-radius:
        50%;

    font-size: 19px;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


#product-search-clear:hover {
    background:
        rgba(255, 255, 255, 0.08);

    color:
        var(--white);
}


/* ============================================================
   16. RESULTS HEADER
   ============================================================ */

.library-results-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}


#library-count {
    color:
        var(--white-muted);

    font-size: 12px;
    font-weight: 700;
}


.library-sort {
    display: flex;

    align-items: center;

    gap: 8px;
}


.library-sort select {
    width: auto;

    min-height: 38px;

    padding:
        0 12px;

    font-size: 11px;
}


/* ============================================================
   HOME — GRADE DE LIVROS
   DESKTOP: 6 LIVROS EM UMA ÚNICA LINHA
   ============================================================ */

.products-grid {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 18px;

    width: 100%;

    align-items: stretch;
}


/* ============================================================
   18. PRODUCT CARD
   ============================================================ */

.product-card {
    position: relative;

    display: grid;

    grid-template-columns:
        190px minmax(0, 1fr);

    min-width: 0;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #1c1c1c,
            #151515
        );

    border:
        1px solid var(--border);

    border-radius:
        18px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.product-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(244, 196, 48, 0.28);

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.30);
}


.product-card__cover {
    position: relative;

    min-height: 270px;

    overflow: hidden;

    background:
        #090909;
}


.product-card__cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;

    background:
        #090909;
}


.product-card__content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding:
        20px;
}


.product-card__category {
    margin-bottom: 6px;

    color:
        var(--yellow);

    font-size: 9px;
    font-weight: 900;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.product-card__title {
    color:
        var(--white);

    font-size: 23px;
    line-height:
        1.06;

    font-weight:
        900;

    letter-spacing:
        -0.04em;
}


.product-card__description {
    margin-top: 8px;

    color:
        var(--white-muted);

    font-size: 12px;

    line-height:
        1.5;
}


.product-card__price {
    margin-top: 13px;

    color:
        var(--yellow);

    font-size: 20px;
    font-weight: 900;
}


.product-card__actions {
    display: flex;

    gap: 8px;

    margin-top: 14px;
}


.product-card__actions .btn {
    width: 100%;

    min-height: 44px;

    font-size: 11px;
}


.product-card__badge {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 2;

    padding:
        6px 9px;

    background:
        var(--yellow);

    color:
        #111111;

    border-radius:
        999px;

    font-size: 8px;
    font-weight: 900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* ============================================================
   19. EMPTY STATE
   ============================================================ */

.library-empty {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 260px;

    padding: 30px;

    background:
        #151515;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);

    text-align:
        center;
}


.library-empty > span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    margin-bottom: 14px;

    background:
        rgba(244, 196, 48, 0.08);

    border-radius:
        50%;

    font-size: 20px;
}


.library-empty h3 {
    font-size: 18px;
    font-weight: 900;
}


.library-empty p {
    margin-top: 7px;

    color:
        var(--white-muted);

    font-size: 13px;
}


/* ============================================================
   20. HOW IT WORKS
   ============================================================ */

.steps-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}


.step-card {
    position: relative;

    min-height: 250px;

    padding:
        26px 22px;

    background:
        #1c1c1c;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);
}


.step-number {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 28px;

    background:
        rgba(244, 196, 48, 0.08);

    border:
        1px solid rgba(244, 196, 48, 0.20);

    border-radius:
        50%;

    color:
        var(--yellow);

    font-size: 10px;
    font-weight: 900;
}


.step-card h3 {
    font-size: 18px;
    font-weight: 900;

    letter-spacing:
        -0.025em;
}


.step-card p {
    margin-top: 10px;

    color:
        var(--white-muted);

    font-size: 12px;

    line-height:
        1.65;
}


/* ============================================================
   21. FINAL CTA
   ============================================================ */

.final-cta {
    position: relative;

    padding:
        110px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(244, 196, 48, 0.12),
            transparent 48%
        ),
        #111111;

    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);
}


.final-cta-content {
    max-width: 760px;

    margin: 0 auto;

    text-align:
        center;
}


.final-cta h2 {
    margin-top: 12px;

    font-size:
        clamp(34px, 5vw, 58px);

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        -0.055em;
}


.final-cta p {
    max-width: 610px;

    margin:
        18px auto 0;

    color:
        var(--white-muted);

    font-size: 15px;

    line-height:
        1.7;
}


.final-cta-actions {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 28px;
}


/* ============================================================
   22. ABOUT
   ============================================================ */

.about-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.85fr);

    gap: 70px;

    align-items: center;
}


.about-content h2 {
    margin-top: 12px;

    font-size:
        clamp(32px, 4vw, 50px);

    line-height:
        1.03;

    font-weight:
        900;

    letter-spacing:
        -0.05em;
}


.about-content p {
    max-width: 650px;

    margin-top: 18px;

    color:
        var(--white-muted);

    font-size: 14px;

    line-height:
        1.75;
}


.about-highlight {
    min-height: 360px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 40px;

    background:
        linear-gradient(
            145deg,
            #1c1c1c,
            #151515
        );

    border:
        1px solid rgba(244, 196, 48, 0.18);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow);

    text-align:
        center;
}


.about-highlight strong {
    color:
        var(--white);

    font-size:
        clamp(42px, 6vw, 70px);

    line-height:
        0.9;

    font-weight:
        900;

    letter-spacing:
        -0.07em;
}


.about-highlight span {
    margin-top: 8px;

    color:
        var(--yellow);

    font-size: 12px;
    font-weight: 900;

    letter-spacing:
        0.15em;
}


.about-highlight p {
    max-width: 260px;

    margin-top: 25px;

    color:
        var(--white-muted);

    font-size: 12px;

    line-height:
        1.6;
}


/* ============================================================
   23. FOOTER
   ============================================================ */

.footer {
    padding:
        70px 0 25px;

    background:
        #0c0c0c;

    border-top:
        1px solid rgba(255, 255, 255, 0.06);
}


.footer-grid {
    display: grid;

    grid-template-columns:
        1.5fr
        repeat(3, 1fr);

    gap: 50px;

    padding-bottom: 50px;
}


.footer-brand p {
    max-width: 330px;

    margin-top: 18px;

    color:
        var(--white-muted);

    font-size: 12px;

    line-height:
        1.7;
}


.footer-column h3 {
    margin-bottom: 17px;

    color:
        var(--white);

    font-size: 12px;
    font-weight: 900;

    letter-spacing:
        0.02em;
}


.footer-column ul {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.footer-column a {
    color:
        rgba(255, 255, 255, 0.48);

    font-size: 11px;

    transition:
        color 0.2s ease;
}


.footer-column a:hover {
    color:
        var(--yellow);
}


.footer-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-top: 22px;

    border-top:
        1px solid rgba(255, 255, 255, 0.06);
}


.footer-bottom p,
.footer-bottom a {
    color:
        rgba(255, 255, 255, 0.34);

    font-size: 10px;
}


.footer-bottom a:hover {
    color:
        var(--yellow);
}



/* ============================================================
   LOGO OFICIAL — FOOTER
   ============================================================ */

.footer-brand-logo {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 76px;
    height: 76px;

    margin-bottom: 16px;

    border-radius: 13px;

    transition:
        transform 0.2s ease;
}


.footer-brand-logo:hover {
    transform:
        translateY(-2px);
}


.footer-brand-logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}



/* ============================================================
   24. TABLET
   ============================================================ */

@media (max-width: 1023px) {

    .navbar-menu {
        gap: 17px;
    }


    .navbar-menu li a {
        font-size: 11px;
    }


    .navbar-actions .btn {
        padding:
            0 14px;

        font-size: 11px;
    }


    .hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.72fr);

        gap: 25px;
    }


    .hero-visual {
        min-height: 480px;
    }


    .hero-books {
        transform:
            scale(0.82);
    }


    .benefits-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .benefit-card:last-child {
        grid-column:
            1 / -1;
    }


    .products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .product-card {
        grid-template-columns:
            145px minmax(0, 1fr);
    }


    .product-card__cover {
        min-height: 230px;
    }


    .product-card__content {
        padding:
            16px;
    }


    .product-card__title {
        font-size: 20px;
    }


    .steps-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .about-grid {
        gap: 35px;
    }


    .footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .footer-brand {
        grid-column:
            1 / -1;
    }

}


/* ============================================================
   25. MOBILE NAVIGATION
   ============================================================ */

@media (max-width: 767px) {

    .container {
        width:
            min(
                calc(100% - 28px),
                var(--container)
            );
    }


    .navbar {
        min-height: 66px;
    }


   .navbar-actions {
    display: none;
	}


	.home-user {
		display: none;
	}


    .navbar-toggle {
        display: flex;
    }


    .navbar-menu {
        position: fixed;

        top: 0;
        right: 0;
        bottom: 0;

        z-index: 200;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        width:
            min(320px, 86vw);

        margin: 0;

        padding:
            80px 24px 30px;

        background:
            #151515;

        border-left:
            1px solid var(--border);

        box-shadow:
            -30px 0 80px rgba(0, 0, 0, 0.50);

        transform:
            translateX(110%);

        transition:
            transform 0.3s ease;
    }


    .navbar-menu.is-open {
        transform:
            translateX(0);
    }


    .navbar-menu li {
        border-bottom:
            1px solid rgba(255, 255, 255, 0.06);
    }


    .navbar-menu li a {
        display: flex;

        align-items: center;

        min-height: 52px;

        font-size: 14px;
    }


    .navbar-menu li a::after {
        display: none;
    }


    .menu-close {
        position: absolute;

        top: 18px;
        right: 18px;

        display: flex;

        align-items: center;
        justify-content: center;

        width: 42px;
        height: 42px;

        background:
            rgba(255, 255, 255, 0.06);

        border:
            1px solid var(--border);

        border-radius:
            50%;

        color:
            var(--white);

        font-size: 26px;
    }


    .menu-overlay {
        position: fixed;

        inset: 0;

        z-index: 150;

        display: block;

        background:
            rgba(0, 0, 0, 0.60);

        opacity:
            0;

        visibility:
            hidden;

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease;
    }


    body.menu-open .menu-overlay {
        opacity:
            1;

        visibility:
            visible;
    }


    body.menu-open .navbar-menu {
        transform:
            translateX(0);
    }
	
	
	.brand-name {
		display: none;
	}


	.brand-logo {
		width: 48px;
		height: 48px;
	}
	
	
	/* ==================================================
   USUÁRIO AUTENTICADO — MENU MOBILE
================================================== */

#home-mobile-user:not([hidden]) {

    display: block;

}


.home-mobile-user {

    margin:
        8px
        0
        14px;

    padding:
        14px
        16px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    border-radius:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            0.05
        );

}


.home-mobile-user__identity {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.home-mobile-user__icon {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );

    font-size:
        17px;

}


.home-mobile-user__info {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.home-mobile-user__label {

    font-size:
        10px;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;

    color:
        rgba(
            255,
            255,
            255,
            0.55
        );

}


.home-mobile-user__name {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        14px;

    font-weight:
        700;

    color:
        #ffffff;

}
	

}


/* ============================================================
   26. MOBILE
   ============================================================ */

@media (max-width: 599px) {

    .container {
        width:
            calc(100% - 28px);
    }


    .hero {
        min-height:
            auto;

        padding:
            72px 0 80px;
    }


    .hero-grid {
        display: flex;

        flex-direction: column;

        gap: 45px;

        min-height:
            auto;
    }


    .hero-content {
        max-width:
            none;

        text-align:
            center;
    }


    .hero-badge {
        margin-bottom:
            15px;
    }


    .hero-title {
        font-size:
            clamp(38px, 12vw, 55px);
    }


    .hero-subtitle {
        margin-top:
            18px;

        font-size:
            15px;
    }


    .hero-description {
        font-size:
            12px;
    }


    .hero-actions {
        flex-direction:
            column;

        align-items:
            stretch;

        margin-top:
            24px;
    }


    .hero-actions .btn {
        width:
            100%;
    }


    .hero-trust {
        justify-content:
            center;

        gap:
            9px 14px;

        font-size:
            9px;
    }


    .hero-visual {
        width:
            100%;

        min-height:
            370px;
    }


    .hero-books {
        width:
            300px;

        height:
            360px;

        transform:
            scale(0.82);
    }


    .hero-book {
        width:
            205px;

        height:
            290px;
    }


    .hero-book--back {
        left:
            8px;
    }


    .hero-book--front {
        right:
            5px;
    }


    .benefits,
    .library-section,
    .how-it-works,
    .about-section {
        padding:
            75px 0;
    }


    .section-heading {
        margin-bottom:
            35px;
    }


    .section-heading h2 {
        font-size:
            33px;
    }


    .section-heading p {
        font-size:
            13px;
    }


    .benefits-grid {
        grid-template-columns:
            1fr;

        gap:
            12px;
    }


    .benefit-card:last-child {
        grid-column:
            auto;
    }


    .benefit-card {
        min-height:
            auto;

        padding:
            23px;
    }


    .library-heading {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            18px;

        margin-bottom:
            25px;
    }


    .library-heading h2 {
        font-size:
            34px;
    }


    .library-heading p {
        font-size:
            12px;
    }


    .library-app-link {
        width:
            100%;
    }


    .library-toolbar {
        grid-template-columns:
            1fr;

        padding:
            13px;

        gap:
            10px;
    }


    .library-results-header {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;
    }


    .library-sort {
        width:
            100%;

        justify-content:
            space-between;
    }


    .library-sort select {
        width:
            160px;
    }


    .products-grid {
        grid-template-columns:
            1fr;

        gap:
            15px;
    }


    .product-card {
        grid-template-columns:
            125px minmax(0, 1fr);

        border-radius:
            15px;
    }


    .product-card__cover {
        min-height:
            205px;
    }


    .product-card__content {
        padding:
            15px;
    }


    .product-card__category {
        font-size:
            8px;
    }


    .product-card__title {
        font-size:
            18px;
    }


    .product-card__description {
        font-size:
            10px;

        line-height:
            1.4;
    }


    .product-card__price {
        margin-top:
            9px;

        font-size:
            17px;
    }


    .product-card__actions {
        margin-top:
            10px;
    }


    .product-card__actions .btn {
        min-height:
            40px;

        padding:
            0 10px;

        font-size:
            10px;
    }


    .product-card__badge {
        top:
            8px;

        left:
            8px;

        padding:
            5px 7px;

        font-size:
            7px;
    }


    .steps-grid {
        grid-template-columns:
            1fr;
    }


    .step-card {
        min-height:
            auto;

        padding:
            23px;
    }


    .about-grid {
        grid-template-columns:
            1fr;

        gap:
            35px;
    }


    .about-content h2 {
        font-size:
            33px;
    }


    .about-content p {
        font-size:
            12px;
    }


    .about-highlight {
        min-height:
            280px;
    }


    .about-highlight strong {
        font-size:
            48px;
    }


    .final-cta {
        padding:
            80px 0;
    }


    .final-cta h2 {
        font-size:
            35px;
    }


    .final-cta p {
        font-size:
            13px;
    }


    .final-cta-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .final-cta-actions .btn {
        width:
            100%;
    }


    .footer {
        padding:
            55px 0 22px;
    }


    .footer-grid {
        grid-template-columns:
            1fr;

        gap:
            30px;

        padding-bottom:
            35px;
    }


    .footer-brand {
        grid-column:
            auto;
    }


    .footer-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;
    }
	
	
	.footer-brand-logo {
    width: 68px;
    height: 68px;
}

}


/* ============================================================
   27. VERY SMALL SCREENS
   ============================================================ */

@media (max-width: 380px) {

    .hero-title {
        font-size:
            36px;
    }


    .hero-books {
        transform:
            scale(0.72);
    }


    .product-card {
        grid-template-columns:
            110px minmax(0, 1fr);
    }


    .product-card__cover {
        min-height:
            185px;
    }


    .product-card__content {
        padding:
            13px;
    }


    .product-card__title {
        font-size:
            16px;
    }


    .product-card__description {
        font-size:
            9px;
    }


    .product-card__actions .btn {
        padding:
            0 7px;

        font-size:
            9px;
    }

}


/* ============================================================
   28. FOCUS ACCESSIBILITY
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline:
        2px solid var(--yellow);

    outline-offset:
        3px;
}


/* ============================================================
   29. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}


/* ============================================================
   HERO — MOCKUPS REAIS
   ============================================================ */

.hero-book {
    background: transparent;
    border: 0;
    box-shadow: none;
}


.hero-book::after {
    display: none;
}


.hero-book img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;
}


/* ============================================================
   HOME — CARDS DA BIBLIOTECA
   DIGITAL E COMPANIA
   ============================================================ */

.library-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #1c1c1c,
            #151515
        );

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius:
        16px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.library-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(244, 196, 48, 0.35);

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(244, 196, 48, 0.05);
}


.library-cover {
    position: relative;

    width: 100%;
    height: 250px;

    overflow: hidden;

    background: #0b0b0b;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    display: flex;
    align-items: center;
    justify-content: center;
}


.library-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;

    transition:
        transform 0.35s ease;
}


.library-card:hover .library-cover img {
    transform:
        scale(1.035);
}


.library-card-content {
    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 14px 14px 15px;
}

.library-category {
    margin-bottom: 7px;

    padding: 4px 7px;

    font-size: 7px;
}

.library-title {
    font-size: 14px;

    line-height: 1.2;
}

/* ============================================================
   BOTÃO DOS CARDS — DIGITAL E COMPANIA
   ============================================================ */

.library-link {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 38px;

    margin-top: auto;
    padding: 0 10px;

    background: linear-gradient(
        135deg,
        #f4c430 0%,
        #ffc928 100%
    );

    border: 1px solid rgba(255, 215, 70, 0.65);

    border-radius: 9px;

    color: #111111;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: -0.01em;

    text-decoration: none;

    box-shadow:
        0 6px 16px rgba(244, 196, 48, 0.16);

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}


.library-link:hover {
    background: linear-gradient(
        135deg,
        #ffd84a 0%,
        #f4c430 100%
    );

    border-color:
        rgba(255, 220, 90, 0.95);

    color: #111111;

    transform:
        translateY(-2px);

    box-shadow:
        0 9px 22px rgba(244, 196, 48, 0.28);
}


.library-link:active {
    transform:
        translateY(0);

    box-shadow:
        0 4px 10px rgba(244, 196, 48, 0.16);
}


.library-badge {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 2;

    padding:
        6px 9px;

    background:
        var(--yellow);

    color:
        #111111;

    border-radius:
        999px;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

@media (max-width: 1199px) {

    .products-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


@media (max-width: 899px) {

    .products-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 599px) {

    .products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .library-cover {
        height: 230px;
    }

}


@media (max-width: 420px) {

    .products-grid {
        grid-template-columns:
            1fr;
    }

    .library-cover {
        height: 280px;
    }

}

/* ============================================================
   BOTÃO BUSCAR — HOME
============================================================ */

#product-search-submit {

    position: absolute;

    top: 50%;
    right: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 82px;
    height: 34px;

    padding: 0 14px;

    transform: translateY(-50%);

    border: 1px solid rgba(244, 196, 48, 0.45);

    border-radius: 8px;

    background:
        #f4c430;

    color:
        #111111;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;

}


#product-search-submit:hover {

    background:
        #ffd447;

    border-color:
        rgba(255, 212, 71, 0.85);

    box-shadow:
        0 5px 16px rgba(244, 196, 48, 0.20);

}


#product-search-submit:active {

    transform:
        translateY(-50%) scale(0.96);

}


/* ============================================================
   ESPAÇO PARA BUSCAR + LIMPAR
============================================================ */

.library-search input {

    padding-right:
        140px;

}

/* ==========================================================
   MENU MOBILE — VISUAL PREMIUM
   ========================================================== */

@media (max-width: 767px) {

    /* PAINEL */

    .navbar-menu {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        width: 78vw !important;
        max-width: 320px !important;

        height: 100vh !important;
        max-height: 100vh !important;

        background: #151515 !important;

        opacity: 1 !important;
        visibility: visible;

        overflow-y: auto !important;
        overflow-x: hidden;

        z-index: 200 !important;

        padding: 90px 26px 40px !important;

        box-sizing: border-box;

        -webkit-overflow-scrolling: touch;
    }


    /* ESTADO ABERTO */

    .navbar-menu.is-open {
        transform: translateX(0) !important;

        background: #151515 !important;

        opacity: 1 !important;
        visibility: visible;
    }


    /* LISTA */

    .navbar-menu ul {
        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    /* LINKS */

    .navbar-menu li {
        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;

        border: 0 !important;
    }


    .navbar-menu li a {
        position: relative;

        display: flex !important;
        align-items: center;

        min-height: 64px;

        padding: 0 6px !important;

        color: #f5f5f5 !important;

        font-size: 17px !important;
        font-weight: 700 !important;

        letter-spacing: 0.2px;

        text-decoration: none !important;

        border: 0 !important;
        border-bottom: none !important;

        transition:
            color 0.25s ease,
            transform 0.25s ease;
    }


    /* REMOVE QUALQUER LINHA DOS LINKS */

    .navbar-menu li a::before,
    .navbar-menu li a::after {
        border: 0 !important;
        box-shadow: none !important;
    }


    /* INDICADOR AMARELO */

    .navbar-menu li a::after {
        content: "";

        position: absolute;

        left: 6px;
        bottom: 8px;

        width: 0;
        height: 2px;

        background: #f5c400;

        border-radius: 10px;

        opacity: 0;

        transition:
            width 0.25s ease,
            opacity 0.25s ease;
    }


    /* INTERAÇÃO */

    .navbar-menu li a:hover,
    .navbar-menu li a:focus-visible,
    .navbar-menu li a:active {
        color: #f5c400 !important;

        transform: translateX(5px);
    }


    .navbar-menu li a:hover::after,
    .navbar-menu li a:focus-visible::after,
    .navbar-menu li a:active::after {
        width: 28px;

        opacity: 1;
    }


    /* OVERLAY */

    .menu-overlay {
        position: fixed !important;

        inset: 0 !important;

        background: rgba(0, 0, 0, 0.68) !important;

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        z-index: 150 !important;

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease;
    }


    body.menu-open .menu-overlay {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;
    }

}


/* ==================================================
   POPUP — DETALHES DO LIVRO
================================================== */

.book-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


/* ==================================================
   ESTADO OCULTO
================================================== */

.book-modal[hidden] {
    display: none !important;
}


/* ==================================================
   FUNDO
================================================== */

.book-modal__backdrop {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        rgba(0, 0, 0, 0.76);

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);
}


/* ==================================================
   CONTAINER
================================================== */

.book-modal__dialog {
    position: relative;

    z-index: 2;

    width:
        min(920px, 100%);

    max-height:
        calc(100vh - 48px);

    overflow-y: auto;

    background:
        #ffffff;

    border-radius:
        22px;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.30);

    transform:
        translateY(0)
        scale(1);

    animation:
        bookModalEnter
        0.28s
        ease-out;

    scrollbar-width:
        thin;
}


@keyframes bookModalEnter {

    from {

        opacity: 0;

        transform:
            translateY(18px)
            scale(0.97);

    }


    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* ==================================================
   BOTÃO FECHAR
================================================== */

.book-modal__close {
    position: absolute;

    top: 16px;

    right: 16px;

    z-index: 10;

    width: 42px;

    height: 42px;

    display: flex !important;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.06);

    color:
        #222222;

    font-size: 28px;

    line-height: 1;

    cursor: pointer;

    opacity: 1;

    visibility: visible;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.book-modal__close:hover {

    background:
        rgba(0, 0, 0, 0.12);

    transform:
        rotate(90deg);

}


.book-modal__close span {

    display: block;

    transform:
        translateY(-1px);

}


/* ==================================================
   CONTEÚDO
================================================== */

.book-modal__content {

    display: grid;

    grid-template-columns:
        minmax(240px, 300px)
        minmax(0, 1fr);

    gap: 44px;

    padding: 48px;

}


/* ==================================================
   CAPA
================================================== */

.book-modal__cover {

    display: flex;

    align-items:
        center;

    justify-content:
        center;

    min-width: 0;

}


.book-modal__cover img {

    display: block !important;

    width: auto !important;

    max-width: 280px !important;

    max-height:
        calc(100vh - 150px);

    height: auto !important;

    object-fit:
        contain !important;

    border-radius:
        10px;

    opacity: 1 !important;

    visibility: visible !important;

    box-shadow:
        0 18px 40px
        rgba(0, 0, 0, 0.20);

}


/* ==================================================
   INFORMAÇÕES
================================================== */

.book-modal__info {

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding-right: 18px;

}


/* ==================================================
   CATEGORIA
================================================== */

.book-modal__category {

    display: inline-flex !important;

    align-self: flex-start;

    margin-bottom: 12px;

    padding:
        6px 11px;

    border-radius:
        999px;

    background:
        rgba(0, 0, 0, 0.06);

    color:
        #555555;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    line-height:
        1.2;

    text-transform:
        uppercase;

}


/* ==================================================
   TÍTULO
================================================== */

.book-modal__title {

    margin:
        0 48px 28px 0;

    color:
        #111111;

    font-size:
        clamp(
            28px,
            4vw,
            42px
        );

    font-weight:
        800;

    line-height:
        1.08;

    letter-spacing:
        -0.025em;

}


/* ==================================================
   SOBRE ESSE LIVRO
================================================== */

.book-modal__about {

    margin-bottom:
        28px;

}


.book-modal__about h3 {

    margin:
        0 0 10px;

    color:
        #111111;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    line-height:
        1.2;

    text-transform:
        uppercase;

}


.book-modal__about p {

    margin:
        0;

    color:
        #555555;

    font-size:
        16px;

    line-height:
        1.7;

}


/* ==================================================
   METADADOS
================================================== */

.book-modal__meta {

    display: flex !important;

    flex-wrap: wrap;

    align-items: center;

    gap:
        18px 28px;

    width: 100%;

    margin-bottom:
        32px;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(0, 0, 0, 0.08);

    opacity: 1 !important;

    visibility: visible !important;

}


/* ==================================================
   ITEM DOS METADADOS
================================================== */

.book-modal__meta-item {

    display: inline-flex !important;

    align-items: center;

    justify-content: flex-start;

    gap:
        9px;

    min-height:
        24px;

    color:
        #333333 !important;

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1.3;

    opacity: 1 !important;

    visibility: visible !important;

}


/* ==================================================
   ÍCONES
================================================== */

.book-modal__meta-icon {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    flex:
        0 0 auto;

    width:
        22px;

    height:
        22px;

    margin: 0;

    padding: 0;

    color:
        #111111 !important;

    font-size:
        18px !important;

    line-height:
        1 !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

}


/* ==================================================
   TEXTO DOS METADADOS
================================================== */

#book-modal-pages,
#book-modal-author {

    display: inline-block !important;

    color:
        #333333 !important;

    font-size:
        14px !important;

    font-weight:
        600 !important;

    line-height:
        1.3 !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

}


/* ==================================================
   ÁREA DO CTA
================================================== */

.book-modal__actions {

    display: flex !important;

    align-items:
        center;

    justify-content:
        flex-start;

    width:
        100%;

    min-height:
        52px;

    opacity:
        1 !important;

    visibility:
        visible !important;

}


/* ==================================================
   CTA PRINCIPAL
================================================== */

.book-modal__actions .btn,
#book-modal-buy {

    display: inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    width:
        auto !important;

    min-width:
        210px !important;

    min-height:
        52px !important;

    margin:
        0 !important;

    padding:
        0 26px !important;

    background:
        #f5c400 !important;

    color:
        #111111 !important;

    border:
        1px solid
        #f5c400 !important;

    border-radius:
        12px !important;

    font-size:
        14px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    text-align:
        center !important;

    text-decoration:
        none !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    pointer-events:
        auto;

    box-shadow:
        0 10px 24px
        rgba(245, 196, 0, 0.20);

    cursor:
        pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.book-modal__actions .btn:hover,
#book-modal-buy:hover {

    background:
        #ffd52a !important;

    color:
        #111111 !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 28px
        rgba(245, 196, 0, 0.28);

}


/* ==================================================
   SETA DO CTA
================================================== */

#book-modal-buy > span {

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    font-size:
        16px;

    line-height:
        1;

    opacity:
        1 !important;

    visibility:
        visible !important;

}


/* ==================================================
   CTA SEM CHECKOUT
================================================== */

#book-modal-buy.is-disabled {

    background:
        #d8d8d8 !important;

    border-color:
        #d8d8d8 !important;

    color:
        #777777 !important;

    box-shadow:
        none !important;

    cursor:
        not-allowed;

    pointer-events:
        none;

    transform:
        none !important;

}


/* ==================================================
   BODY QUANDO MODAL ABERTO
================================================== */

body.book-modal-open {

    overflow:
        hidden;

}


/* ==================================================
   TABLET
================================================== */

@media (
    max-width: 760px
) {

    .book-modal {

        padding:
            16px;

    }


    .book-modal__dialog {

        max-height:
            calc(100vh - 32px);

        border-radius:
            18px;

    }


    .book-modal__content {

        grid-template-columns:
            190px
            minmax(0, 1fr);

        gap:
            28px;

        padding:
            36px 28px;

    }


    .book-modal__cover img {

        max-width:
            190px !important;

        max-height:
            calc(100vh - 120px);

    }


    .book-modal__info {

        padding-right:
            0;

    }


    .book-modal__title {

        margin-right:
            30px;

        font-size:
            28px;

    }


    .book-modal__about p {

        font-size:
            15px;

    }


    .book-modal__actions .btn,
    #book-modal-buy {

        min-width:
            200px !important;

    }

}


/* ==================================================
   MOBILE
================================================== */

@media (
    max-width: 560px
) {

    .book-modal {

        align-items:
            center;

        padding:
            12px;

    }


    .book-modal__dialog {

        width:
            100%;

        max-height:
            calc(100vh - 24px);

        border-radius:
            16px;

    }


    .book-modal__content {

        display:
            flex;

        flex-direction:
            column;

        gap:
            24px;

        padding:
            38px 22px 26px;

    }


    .book-modal__cover {

        justify-content:
            center;

    }


    .book-modal__cover img {

        width:
            155px !important;

        max-width:
            155px !important;

        max-height:
            280px;

        border-radius:
            8px;

    }


    .book-modal__info {

        padding-right:
            0;

    }


    .book-modal__category {

        margin-bottom:
            9px;

    }


    .book-modal__title {

        margin:
            0 34px 22px 0;

        font-size:
            26px;

        line-height:
            1.12;

    }


    .book-modal__about {

        margin-bottom:
            22px;

    }


    .book-modal__about h3 {

        font-size:
            12px;

    }


    .book-modal__about p {

        font-size:
            14px;

        line-height:
            1.65;

    }


    .book-modal__meta {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            12px;

        margin-bottom:
            24px;

        padding-top:
            17px;

    }


    .book-modal__meta-item {

        font-size:
            13px;

    }


    #book-modal-pages,
    #book-modal-author {

        font-size:
            13px !important;

    }


    .book-modal__actions {

        width:
            100%;

    }


    .book-modal__actions .btn,
    #book-modal-buy {

        width:
            100% !important;

        min-width:
            0 !important;

        min-height:
            50px !important;

    }


    .book-modal__close {

        top:
            10px;

        right:
            10px;

        width:
            38px;

        height:
            38px;

        font-size:
            25px;

    }

}


/* ==================================================
   REDUÇÃO DE MOVIMENTO
================================================== */

@media (
    prefers-reduced-motion: reduce
) {

    .book-modal,
    .book-modal__dialog,
    .book-modal__close {
        animation: none;

        transition: none;
    }

}

/* ============================================================
   POPUP — AJUSTE FINAL DE META + CTA
   DIGITAL E COMPANIA
   ============================================================ */


/* ============================================================
   META — ESTRUTURA VISUAL
   ============================================================ */

.book-modal__meta-item {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    min-height: 30px;

    color: #333333;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.2;
}


/* ============================================================
   ÍCONES DOS METADADOS
   ============================================================ */

.book-modal__meta-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    flex-shrink: 0;

    color: #111111;

    font-size: 18px;

    line-height: 1;
}



/* ============================================================
   CTA — COMPRAR AGORA
   ============================================================ */

.book-modal__actions {
    display: flex;

    align-items: center;

    margin-top: 0;
}


/*
 * Força o estilo visual do botão independentemente
 * de outras regras .btn existentes na página.
 */

.book-modal__actions .btn,
.book-modal__actions a#book-modal-buy {

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    min-width: 210px;

    min-height: 52px;

    padding:
        0 24px;

    background:
        #f4c430 !important;

    border:
        1px solid rgba(244, 196, 48, 0.70) !important;

    border-radius:
        10px;

    color:
        #111111 !important;

    font-size:
        13px;

    font-weight:
        900;

    line-height:
        1;

    text-align:
        center;

    text-decoration:
        none;

    opacity:
        1 !important;

    visibility:
        visible !important;

    box-shadow:
        0 10px 25px rgba(244, 196, 48, 0.20);

    cursor:
        pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}


/* ============================================================
   HOVER
   ============================================================ */

.book-modal__actions .btn:hover,
.book-modal__actions a#book-modal-buy:hover {

    background:
        #ffd447 !important;

    border-color:
        rgba(255, 212, 71, 0.95) !important;

    color:
        #111111 !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 32px rgba(244, 196, 48, 0.28);
}


/* ============================================================
   ACTIVE
   ============================================================ */

.book-modal__actions .btn:active,
.book-modal__actions a#book-modal-buy:active {

    transform:
        translateY(0);

    box-shadow:
        0 6px 15px rgba(244, 196, 48, 0.18);
}


/* ============================================================
   BOTÃO SEM LINK
   ============================================================ */

.book-modal__actions .btn.is-disabled,
.book-modal__actions a#book-modal-buy.is-disabled {

    opacity:
        0.45 !important;

    cursor:
        not-allowed;

    pointer-events:
        none;

    box-shadow:
        none;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 560px) {

    .book-modal__meta-item {
        width: 100%;

        min-height: 28px;

        font-size: 13px;
    }


    .book-modal__meta-icon {
        width: 23px;
        height: 23px;

        font-size: 17px;
    }


    .book-modal__actions {
        width: 100%;
    }


    .book-modal__actions .btn,
    .book-modal__actions a#book-modal-buy {

        width: 100%;

        min-width: 0;

        min-height: 50px;

        padding:
            0 20px;

        font-size: 13px;
    }

}

/* ============================================================
   CORREÇÃO FINAL — MENU MOBILE
   Impede deslocamento horizontal durante o gesto lateral
   ============================================================ */

@media (max-width: 767px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.menu-open {
        overflow: hidden;
        overflow-x: hidden;
        overscroll-behavior: none;
        touch-action: pan-y;
    }

    .navbar-menu {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        width: min(78vw, 320px) !important;
        max-width: 320px !important;

        height: 100dvh !important;
        max-height: 100dvh !important;

        margin: 0 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        overscroll-behavior-x: contain;
        touch-action: pan-y;

        transform: translate3d(110%, 0, 0) !important;

        will-change: transform;

        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .navbar-menu.is-open,
    body.menu-open .navbar-menu {
        transform: translate3d(0, 0, 0) !important;
    }

}

/* ==================================================
   USUÁRIO MOBILE — OCULTO NO DESKTOP
================================================== */

#home-mobile-user[hidden] {

    display: none !important;

}

/* ============================================================
   HERO — DESKTOP COM ALTURA REDUZIDA
   Ajuste para notebooks / telas de até aproximadamente
   15 polegadas sem alterar desktop grande.
   ============================================================ */

@media (min-width: 768px) and (max-height: 800px) {

    .hero {
        min-height:
            calc(100vh - 76px);

        padding-top:
            28px;

        padding-bottom:
            28px;
    }


    .hero-grid {
        min-height:
            calc(100vh - 132px);

        align-items:
            center;
    }


    .hero-badge {
        margin-top:
            10px;

        margin-bottom:
            18px;
    }

}