/* ==========================================================
   COMPONENTS
   Crescendo em Graça
   v2.0
========================================================== */


/* ==========================================================
   BUTTONS
========================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.65rem;

    min-height:52px;

    padding:0 1.75rem;

    border:none;

    border-radius:14px;

    font-family:inherit;

    font-size:.97rem;

    font-weight:600;

    line-height:1;

    text-decoration:none;

    white-space:nowrap;

    cursor:pointer;

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

}

.btn:hover{

    transform:translateY(-2px);

}

.btn:active{

    transform:translateY(0);

}

.btn-primary{

    background:linear-gradient(
        180deg,
        #2E7BFF 0%,
        #1F63D8 100%
    );

    color:#ffffff;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        0 10px 24px rgba(31,99,216,.30);

}

.btn-primary:hover{

    background:linear-gradient(
        180deg,
        #4B90FF 0%,
        #2E7BFF 100%
    );

    color:#ffffff;

    transform:translateY(-2px);

    box-shadow:
        0 16px 34px rgba(31,99,216,.42);

}

.btn-secondary{

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f6f9ff 100%
    );

    color:#1F63D8;

    border:1px solid rgba(31,99,216,.16);

    box-shadow:
        0 10px 24px rgba(15,23,42,.08);

}

.btn-secondary:hover{

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #eef5ff 100%
    );

    color:#174AA8;

    border-color:rgba(31,99,216,.28);

    box-shadow:
        0 16px 34px rgba(31,99,216,.16);

}


/* ==========================================================
   CARD
========================================================== */

.card{

    background:var(--color-surface);

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

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

    box-shadow:var(--shadow-sm);

    padding:var(--space-6);

    transition:
        transform .30s ease,
        box-shadow .30s ease;

}

.card:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-lg);

}


/* ==========================================================
   BADGES
========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.40rem .90rem;

    border-radius:999px;

    font-size:var(--font-size-xs);

    font-weight:600;

}

.badge-primary{

    background:var(--color-primary);

    color:#ffffff;

}

.badge-gold{

    background:var(--color-secondary);

    color:#111111;

}


/* ==========================================================
   INPUTS
========================================================== */

.input{

    width:100%;

    padding:1rem;

    background:var(--color-surface);

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

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

    transition:
        border-color .25s ease,
        box-shadow .25s ease;

}

.input:focus{

    outline:none;

    border-color:var(--color-primary);

    box-shadow:
        0 0 0 4px rgba(14,78,166,.08);

}

.textarea{

    min-height:180px;

    resize:vertical;

}

.label{

    display:block;

    margin-bottom:.55rem;

    font-size:var(--font-size-sm);

    font-weight:600;

}


/* ==========================================================
   AVATAR
========================================================== */

.avatar{

    width:64px;

    aspect-ratio:1;

    overflow:hidden;

    border-radius:50%;

}

.avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/* ==========================================================
   DIVIDER
========================================================== */

.divider{

    width:100%;

    height:1px;

    background:var(--color-border);

}


/* ==========================================================
   ALERTS
========================================================== */

.alert{

    padding:1rem 1.25rem;

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

    font-weight:600;

}

.alert-success{

    background:var(--color-success);

    color:#ffffff;

}

.alert-warning{

    background:var(--color-warning);

    color:#111111;

}

.alert-danger{

    background:var(--color-danger);

    color:#ffffff;

}


/* ==========================================================
   HELPERS
========================================================== */

.shadow-sm{

    box-shadow:var(--shadow-sm);

}

.shadow-md{

    box-shadow:var(--shadow-md);

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}

.rounded{

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

}

.rounded-lg{

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

}

.rounded-full{

    border-radius:999px;

}


/* ==========================================================
   HEADER
========================================================== */

.header{

    position:sticky;

    top:0;

    z-index:1000;

    width:100%;

    background:#0B2248;

    backdrop-filter:blur(18px);

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

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

    transition:
        background .30s ease,
        box-shadow .30s ease;

}

.header.scrolled{

   background:#0B2248;

    box-shadow:
        0 12px 34px rgba(0,0,0,.20);


}


/* ==========================================================
   NAVBAR
========================================================== */

.navbar{

    display:grid;

    grid-template-columns:220px 1fr auto;

    align-items:center;

    height:74px;

    padding:0 32px;

    column-gap:40px;

}


/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    flex:0 0 260px;

}

.logo img{

    display:block;

    width:150px;

    height:auto;

}


/* ==========================================================
   MENU
========================================================== */

.navbar-menu{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:2.8rem;

}

.navbar-menu a{

    position:relative;

    display:flex;

    align-items:center;

    height:86px;

    text-decoration:none;

    color:#ffffff;

    font-weight:600;

    transition:color .25s ease;
	
	white-space: nowrap;

}

.navbar-menu a:hover{

    color:#D4AF37;
}

.navbar-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:18px;

    width:0;

    height:2px;

    border-radius:999px;

    background:#D4AF37;

    transition:width .25s ease;

}

.navbar-menu a:hover::after{

    width:100%;

}


/* ==========================================================
   ACTIONS
========================================================== */

.navbar-actions{

    display:flex;

    align-items:center;

    gap:.85rem;

    margin-right:28px;

}

.navbar-actions .btn{

    min-height:46px;

    padding-inline:1.40rem;

}


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

.navbar-toggle{

    display:none;

    justify-content:center;

    align-items:center;

    width:48px;

    height:48px;

    border:none;

    border-radius:12px;

    background:transparent;

    cursor:pointer;

    transition:
        background .25s ease,
        transform .25s ease;

}

.navbar-toggle:hover{

    background:rgba(14,78,166,.08);

}

.navbar-toggle:active{

    transform:scale(.95);

}


/* ==========================================================
   HERO
========================================================== */

.hero{

    position:relative;

    overflow:hidden;

    padding:clamp(6rem,10vw,9rem) 0;

    background:
        radial-gradient(
            circle at top left,
            rgba(14,78,166,.08),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 100%
        );

}

.hero::before{

    content:"";

    position:absolute;

    top:-260px;

    right:-260px;

    width:620px;

    height:620px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(14,78,166,.06),
            transparent 70%
        );

    pointer-events:none;

}

.hero .container{

    position:relative;

    z-index:2;

}

.hero-grid{

    display:grid;

    grid-template-columns:55% 45%;

    align-items:center;

    gap:clamp(2rem,4vw,4rem);

}

.hero-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    max-width:800px;

    margin-inline:auto;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.65rem 1rem;

    margin-bottom:1.6rem;

    border-radius:999px;

    background:rgba(14,78,166,.08);

    border:1px solid rgba(14,78,166,.12);

    color:var(--color-primary);

    font-size:.88rem;

    font-weight:700;

    letter-spacing:.03em;

}

.hero h1{

    margin:0 0 1.5rem;

    max-width:12ch;

    font-size:clamp(3rem,5vw,4.8rem);

    line-height:1.05;

    letter-spacing:-.045em;

    color:var(--color-text-primary);

}

.hero p{

    max-width:600px;

    margin:0 0 2.4rem;

    font-size:1.15rem;

    line-height:1.85;

    color:var(--color-text-secondary);

}

.hero-actions{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:1rem;

    flex-wrap:wrap;

}

.hero-actions .btn{

    min-width:220px;

}

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;
	
	

}

.hero-image::before{

    content:"";

    position:absolute;

    width:560px;

    height:560px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(14,78,166,.10),
            transparent 72%
        );

    filter:blur(12px);

    z-index:0;

}



.hero-image:hover img{

    transform:translateY(-10px);

    filter:drop-shadow(0 28px 40px rgba(0,0,0,.12));

}

.hero-mockup{

    display:block;

    width:100%;

    max-width:800px;

    height:auto;

    filter:
        drop-shadow(0 30px 50px rgba(0,0,0,.12));

    transition:
        transform .45s ease;

}


/* ==========================================================
   SECTION HEADER
========================================================== */

.section-header{

    max-width:780px;

    margin:0 auto 5rem;

    text-align:center;

}


/* ==========================================================
   SECTION BADGE
========================================================== */

.section-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.78rem 1.35rem;

    margin-bottom:2.2rem;

    border-radius:999px;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.96) 0%,
        rgba(244,247,255,.94) 100%
    );

    border:1px solid rgba(23,70,161,.10);

    box-shadow:
        0 4px 12px rgba(15,23,42,.05),
        inset 0 1px 0 rgba(255,255,255,.95);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    color:var(--color-primary);

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.12em;

    text-transform:uppercase;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}

.section-badge:hover{

    transform:translateY(-2px);

    border-color:rgba(23,70,161,.18);

    box-shadow:
        0 8px 22px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.98);

}

/* ==========================================================
   SECTION TITLE
========================================================== */

.section-title{

    max-width:760px;

    margin:0 auto 1.9rem;

    font-size:clamp(2.45rem,4vw,3.45rem);

    font-weight:700;

    line-height:1.10;

    letter-spacing:-.04em;

    color:var(--color-text-primary);

}

/* ==========================================================
   SECTION DESCRIPTION
========================================================== */

.section-description{

    max-width:700px;

    margin:0 auto;

    font-size:1.08rem;

    font-weight:400;

    line-height:1.95;

    color:var(--color-text-secondary);

}

/* ==========================================================
   SECTION SPACING
========================================================== */

.section{

    padding:6rem 0;

}

.section-sm{

    padding:5rem 0;

}

.section-lg{

    padding:9rem 0;

}



/* ==========================================================
   FEATURES GRID
========================================================== */

.features{

    position:relative;

    background:#F5F7FB;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(15,23,42,.04);

}


.features-grid{

    display:grid;

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

    gap:1.75rem;

    align-items:stretch;

}



/* ==========================================================
   FEATURE CARD
========================================================== */

.feature-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    padding:2.15rem 2rem 2rem;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.06);

    border-radius:20px;

    text-align:center;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

/* ==========================================================
   FEATURE CARD HOVER
========================================================== */

.feature-card:hover{

    transform:translateY(-5px);

    border-color:rgba(30,86,200,.16);

    box-shadow:

        0 20px 46px rgba(15,23,42,.09),

        0 6px 18px rgba(30,86,200,.06);

}


/* ==========================================================
   FEATURE CARD INTERACTIONS
========================================================== */

.feature-card:hover .feature-icon{

    transform:translateY(-2px) scale(1.04);

    box-shadow:

        0 18px 36px rgba(37,95,215,.28),

        inset 0 2px 4px rgba(255,255,255,.40),

        inset 0 -5px 10px rgba(0,0,0,.08);

}


.feature-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        120deg,

        transparent 0%,

        rgba(255,255,255,.35) 48%,

        transparent 100%

    );

    transform:translateX(-140%);

    transition:transform .7s ease;

    pointer-events:none;

}

.feature-card:hover::before{

    transform:translateX(140%);

}


/* ==========================================================
   FEATURE ICON
========================================================== */

.feature-icon{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:72px;

    height:72px;

    margin:0 auto 1.15rem;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 28% 25%,
            #4E8DFF 0%,
            #2D6EE6 58%,
            #1E56C8 100%
        );

    border:1px solid rgba(255,255,255,.28);

    color:#ffffff;

    font-size:1.9rem;

    box-shadow:

        0 14px 30px rgba(37,95,215,.24),

        inset 0 2px 4px rgba(255,255,255,.34),

        inset 0 -5px 10px rgba(0,0,0,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.feature-icon svg{

    width:34px;

    height:34px;

}




/* ==========================================================
   FEATURE TITLE
========================================================== */

.feature-card h3{

    margin:0 0 1.25rem;

    font-size:1.32rem;

    font-weight:600;

    line-height:1.25;

    letter-spacing:-.02em;

    color:var(--color-text-primary);

}

/* ==========================================================
   FEATURE DESCRIPTION
========================================================== */

.feature-card p{

    margin:0;

    font-size:1rem;

    line-height:1.95;

    color:var(--color-text-secondary);

}



/* ==========================================================
   SEARCH SECTION
========================================================== */

.search-section{

    position:relative;

    padding:5.5rem 0;

    background:#EEF5FF;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(15,23,42,.04);

}


.search-section::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:min(1180px,92%);

    height:1px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(30,86,200,.18),

            transparent

        );

}

/* ==========================================================
   SEARCH BOX
========================================================== */

.search-box{

    max-width:760px;

    margin:0 auto;

}

.search-input-wrapper{

    position:relative;

}

.search-input-wrapper input{

    width:100%;

    height:68px;

    padding:0 28px 0 68px;

    border:none;

    border-radius:18px;

    background:#ffffff;

    font-size:1rem;

    color:var(--color-text-primary);

    box-shadow:

        0 12px 36px rgba(15,23,42,.06),

        0 2px 8px rgba(15,23,42,.03);

    transition:
        border-color .30s ease,
        box-shadow .30s ease,
        transform .30s ease;

}

.search-icon{

    position:absolute;

    left:24px;

    top:50%;

    transform:translateY(-50%);

    color:#2D6EE6;

    pointer-events:none;

}

.search-input-wrapper input::placeholder{

    color:#94A3B8;

}

.search-input-wrapper input:focus{

    outline:none;

    transform:translateY(-1px);

    box-shadow:

        0 18px 44px rgba(37,95,215,.10),

        0 0 0 4px rgba(37,95,215,.08);

}

/* ==========================================================
   CATEGORY FILTER
========================================================== */

.category-filter{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:2.5rem;

}

/* ==========================================================
   CATEGORY CHIP
========================================================== */

.category-chip{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.85rem 1.35rem;

    border-radius:999px;

    border:1px solid rgba(15,23,42,.08);

    background:#ffffff;

    color:var(--color-text-primary);

    font-size:.95rem;

    font-weight:600;

    cursor:pointer;

    transition:

        background .30s ease,

        color .30s ease,

        border-color .30s ease,

        transform .30s ease,

        box-shadow .30s ease;

}

.category-chip:hover{

    transform:translateY(-2px);

    border-color:rgba(45,110,230,.22);

    box-shadow:

        0 10px 22px rgba(15,23,42,.06);

}

.category-chip.active{

    color:#ffffff;

    background:linear-gradient(

        135deg,

        #3D7DFF,

        #1E56C8

    );

    border-color:transparent;

    box-shadow:

        0 12px 28px rgba(37,95,215,.25);

}

/* ==========================================================
   LIBRARY TOOLBAR
========================================================== */

.library-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:2rem;

    margin:2.25rem 0;

    padding:1.25rem 1.5rem;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.06);

    border-radius:18px;

    box-shadow:

        0 10px 30px rgba(15,23,42,.05);

}

.library-results{

    display:flex;

    align-items:center;

    gap:.75rem;

    color:var(--color-text-secondary);

    font-size:.97rem;

}

.library-toolbar-icon{

    color:#2D6EE6;

    flex-shrink:0;

}


.library-results strong{

    color:#1E56C8;

    font-weight:700;

}


.library-sort{

    display:flex;

    align-items:center;

    gap:.75rem;

}

.library-sort label{

    font-size:.92rem;

    color:var(--color-text-secondary);

}

.library-sort select{

    height:44px;

    padding:0 .95rem;

    border-radius:12px;

    border:1px solid rgba(15,23,42,.08);

    background:#ffffff;

    color:var(--color-text-primary);

    cursor:pointer;

    transition:

        border-color .30s ease,

        box-shadow .30s ease;

}

.library-sort select:focus{

    outline:none;

    border-color:#2D6EE6;

    box-shadow:

        0 0 0 4px rgba(45,110,230,.08);

}


/* ==========================================================
   LIBRARY — PREMIUM PRODUCT CARDS
   Crescendo em Graça
========================================================== */

.library{

    background:#ffffff;

}


/* ==========================================================
   LIBRARY GRID
========================================================== */

.library-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(245px,1fr));

    gap:32px;

    align-items:stretch;

}


/* ==========================================================
   LIBRARY CARD
========================================================== */

.library-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-width:0;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.075);

    border-radius:22px;

    overflow:hidden;

    box-shadow:
        0 8px 24px rgba(15,23,42,.045),
        0 2px 6px rgba(15,23,42,.025);

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease,
        border-color .35s ease;

}


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

.library-card:hover{

    transform:translateY(-7px);

    border-color:rgba(37,99,235,.14);

    box-shadow:
        0 22px 48px rgba(15,23,42,.10),
        0 8px 20px rgba(37,99,235,.045);

}


/* ==========================================================
   CAPA / MOCKUP AREA
========================================================== */

.library-cover{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    height:235px;

    padding:14px 16px 10px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(255,255,255,.98) 0%,
            rgba(248,250,252,.98) 58%,
            rgba(243,246,250,.98) 100%
        );

    border-bottom:1px solid rgba(15,23,42,.055);

}


/* ==========================================================
   SOFT LIGHT
========================================================== */

.library-cover::before{

    content:"";

    position:absolute;

    left:50%;

    bottom:-75px;

    transform:translateX(-50%);

    width:190px;

    height:120px;

    border-radius:50%;

    background:rgba(30,86,200,.055);

    filter:blur(28px);

    pointer-events:none;

}


/* ==========================================================
   BOOK MOCKUP
========================================================== */

.library-cover img{

    position:relative;

    z-index:1;

    display:block;

    width:158px;

    height:205px;

    max-width:100%;

    object-fit:contain;

    object-position:center;

    filter:
        drop-shadow(0 16px 22px rgba(15,23,42,.16));

    transition:
        transform .40s cubic-bezier(.22,1,.36,1),
        filter .40s ease;

}


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

.library-card:hover .library-cover img{

    transform:
        translateY(-5px)
        scale(1.035);

    filter:
        drop-shadow(0 20px 28px rgba(15,23,42,.20));

}


/* ==========================================================
   CONTENT
========================================================== */

.library-card-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    flex:1;

    min-height:145px;

    padding:20px 18px 22px;

    text-align:center;

    background:#ffffff;

}


/* ==========================================================
   CATEGORY
========================================================== */

.library-category{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    align-self:center;

    margin-left:auto;
    margin-right:auto;

    min-height:24px;

    padding:5px 11px;

    margin-bottom:9px;

    border-radius:999px;

    background:#f4f7fb;

    border:1px solid rgba(37,99,235,.10);

    color:#42628f;

    font-size:9px;

    font-weight:700;

    line-height:1;

    letter-spacing:.14em;

    text-transform:uppercase;

}


/* ==========================================================
   TITLE
========================================================== */

.library-title{

    max-width:100%;

    margin:2px 0 16px;

    font-size:1.08rem;

    font-weight:650;

    line-height:1.35;

    letter-spacing:-.015em;

    color:#17233a;

    text-align:center;

}


/* ==========================================================
   META
========================================================== */

.library-meta{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:16px;

    margin:2px 0 7px;

    color:#718096;

    font-size:.80rem;

}


/* ==========================================================
   META ITEMS
========================================================== */

.library-meta span{

    display:flex;

    align-items:center;

    gap:5px;

}


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

.library-link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    align-self:center;

    margin-left:auto;
    margin-right:auto;

    margin-top:auto;

    min-height:40px;

    padding:0 18px;

    border-radius:10px;

    background:#2563eb;

    color:#ffffff;

    font-size:.86rem;

    font-weight:700;

    line-height:1;

    text-decoration:none;

    box-shadow:
        0 6px 16px rgba(37,99,235,.20);

    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;

}


/* ==========================================================
   LINK ARROW
========================================================== */

.library-link::after{

    content:"→";

    color:#ffffff;

    margin-left:6px;

    transition:
        transform .25s ease;

}


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

.library-link:hover{

    background:#1d4ed8;

    color:#ffffff;

    transform:translateY(-2px);

    box-shadow:
        0 9px 20px rgba(37,99,235,.28);

}


.library-link:hover::after{

    transform:translateX(3px);

}


/* ==========================================================
   ACTIONS
========================================================== */

.library-actions{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    margin-top:auto;

    padding-top:13px;

}


/* ==========================================================
   SHARE BUTTON
========================================================== */

.library-actions .share-button{

    position:absolute;

    right:0;

    top:50%;

    transform:translateY(-50%);

}


.share-button svg{

    width:15px;

    height:15px;

    transition:
        transform .25s ease;

}


.share-button:hover{

    color:#2563eb;

    opacity:1;

}


.share-button:hover svg{

    transform:
        translate(2px,-2px);

}


.share-button:active{

    transform:scale(.96);

}


.share-button:focus-visible{

    outline:
        2px solid rgba(37,99,235,.25);

    outline-offset:4px;

    border-radius:6px;

}


/* ==========================================================
   FIM DA PARTE 2A
   A próxima seção será BLOG
========================================================== */
/* ==========================================================
   BLOG
========================================================== */

.blog{

    position:relative;

    background:#FAFBFD;

    overflow:hidden;

}

.blog-grid{

    display:grid;

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

    gap:26px;

    align-items:start;

}

.blog-featured{

    display:block;

}

.blog-sidebar{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.blog-card{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:#ffffff;

    border:1px solid #e9eef5;

    border-radius:18px;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

    box-shadow:
        0 6px 20px rgba(15,23,42,.05);

}

.blog-card-featured{

    height:100%;

}

.blog-featured .blog-cover{

    position:relative;

    overflow:hidden;

    isolation:isolate;

}

.blog-featured .blog-cover::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.38),

            rgba(0,0,0,.08) 45%,

            transparent 70%

        );

    pointer-events:none;

}

.blog-featured .blog-cover img{

    display:block;

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

}

.blog-featured .blog-content{

    padding:32px;

}

.blog-featured .blog-category{

    position:static;

    display:inline-flex;

    align-self:flex-start;

    margin-bottom:10px;

    padding:6px 12px;

    border-radius:999px;

    background:#f5f7fb;

    border:1px solid #e8edf6;

    color:#355a97;

    font-size:10px;

    font-weight:700;

    letter-spacing:.10em;

    text-transform:uppercase;

}

.blog-featured .blog-title{

    margin:0 0 18px;

    font-size:1.65rem;

    line-height:1.28;

    font-weight:700;

}

.blog-featured .blog-meta{

    margin-bottom:22px;

}

.blog-featured .blog-description{

    font-size:1rem;

    line-height:1.9;

    -webkit-line-clamp:4;

}

.blog-sidebar .blog-card{

    min-height:100%;

}

.blog-sidebar .blog-cover img{

    aspect-ratio:16/8;

}

.blog-sidebar .blog-title{

    font-size:1.05rem;

}

.blog-sidebar .blog-description{

    -webkit-line-clamp:2;

}

.blog-card:hover{

    transform:translateY(-5px);

    border-color:#d9e5f6;

    box-shadow:
        0 18px 36px rgba(15,23,42,.09);

}

.blog-cover{

    overflow:hidden;

    background:#f5f7fb;

    border-bottom:1px solid #edf2f7;

}

.blog-cover img{

    display:block;

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

    transition:transform .35s ease;

}

.blog-card:hover .blog-cover img{

    transform:scale(1.04);

}

.blog-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:22px;

}

.blog-category{

    display:inline-flex;

    align-self:flex-start;

    padding:5px 10px;

    border-radius:999px;

    background:#f5f7fb;

    border:1px solid #e8edf6;

    color:#355a97;

    font-size:10px;

    font-weight:700;

    letter-spacing:.10em;

    text-transform:uppercase;

}

.blog-title{

    margin:18px 0 14px;

    font-size:1.20rem;

    font-weight:600;

    line-height:1.35;

    color:#16233b;

}

.blog-meta{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    color:#7b8797;

    font-size:.82rem;

}

.blog-meta span+span::before{

    content:"•";

    margin-right:12px;

    color:#c5ced9;

}

.blog-description{

    margin:0;

    color:#64748b;

    line-height:1.7;

    font-size:.95rem;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

.blog-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:24px;

    font-weight:700;

    color:#2563eb;

    text-decoration:none;

}

.blog-link::after{

    content:"→";

    transition:.25s;

}

.blog-link:hover::after{

    transform:translateX(4px);

}


/* ==========================================================
   PLATFORM BENEFITS
========================================================== */

.platform-benefits{

    position:relative;

    padding:120px 0;

    background:#EEF5FF;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(15,23,42,.04);

}

/* ---------- Cabeçalho ---------- */

.platform-benefits .section-header{

    max-width:760px;

    margin:0 auto 72px;

    text-align:center;

}

.platform-benefits .section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    margin-bottom:30px;

    border-radius:999px;

    border:1px solid rgba(47,102,208,.14);

    background:linear-gradient(
        180deg,
        #ffffff,
        #f6f9ff
    );

    color:#2f66d0;

    font-size:.76rem;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    box-shadow:
        0 10px 24px rgba(47,102,208,.06);

}

.platform-benefits .section-title{

    margin-bottom:24px;

}

.platform-benefits .section-description{

    max-width:680px;

    margin:0 auto;

}

/* ---------- Grid ---------- */

.platform-grid{

    display:grid;

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

    gap:28px;

    align-items:stretch;

}

/* ---------- Cards ---------- */

.platform-card{

    display:flex;

    flex-direction:column;

    padding:34px 32px;

    background:#ffffff;

    border:1px solid #e5edf8;

    border-radius:22px;

    box-shadow:

        0 10px 28px rgba(15,23,42,.05);

    transition:

        transform .28s ease,

        box-shadow .28s ease,

        border-color .28s ease;

}

.platform-card:hover{

    transform:translateY(-6px);

    border-color:#d6e3f7;

    box-shadow:

        0 20px 42px rgba(15,23,42,.08);

}

/* ---------- Ícone ---------- */

.platform-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:72px;

    height:72px;

    margin-bottom:26px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #f8fbff,
        #edf4ff
    );

    border:1px solid #d8e5f9;

    color:#2f66d0;

    transition:.30s;

}

.platform-icon svg{

    width:34px;

    height:34px;

}

.platform-card:hover .platform-icon{

    background:linear-gradient(
        135deg,
        #2f66d0,
        #4d83f2
    );

    color:#ffffff;

    transform:scale(1.05);

}

/* ---------- Conteúdo ---------- */

.platform-card h3{

    margin:0 0 18px;

    color:#16233b;

    font-size:1.28rem;

    font-weight:600;

    line-height:1.35;

}

.platform-card p{

    margin:0;

    color:#64748b;

    line-height:1.85;

    flex:1;

}

/* ---------- Lista ---------- */

.platform-card ul{

    margin:28px 0 0;

    padding:22px 0 0;

    list-style:none;

    border-top:1px solid #edf2f7;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.platform-card li{

    color:#355a97;

    font-size:.94rem;

    font-weight:500;

}


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

.cta{

    position:relative;

    overflow:hidden;

    padding:105px 0 130px;

    background:
        radial-gradient(
            circle at center,
            rgba(46,123,255,.06) 0%,
            rgba(46,123,255,.025) 38%,
            transparent 72%
        ),
        #ffffff;

    border-top:1px solid rgba(15,23,42,.05);

    border-bottom:1px solid rgba(15,23,42,.05);

}

.cta::before{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:620px;

    height:620px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(46,123,255,.06),

            transparent 72%

        );

    pointer-events:none;

}

.cta .container{

    position:relative;

    z-index:2;

}

.cta-content{

    max-width:900px;

    margin:0 auto;

    text-align:center;

}

.cta .section-badge{

    margin-bottom:24px;

}

.cta .section-title{

    max-width:840px;

    margin:0 auto 26px;

    font-size:clamp(2.9rem,5vw,4.4rem);

    line-height:1.10;

    letter-spacing:-.045em;

}

.cta .section-description{

    max-width:700px;

    margin:0 auto 34px;

    font-size:1.10rem;

    line-height:1.95;

    color:#64748b;

}

.cta .btn{

    min-width:260px;

    min-height:60px;

    border-radius:16px;

    font-size:1rem;

    box-shadow:

        0 18px 38px rgba(31,99,216,.24);

    transition:
        transform .30s ease,
        box-shadow .30s ease;

}

.cta .btn:hover{

    transform:translateY(-4px);

    box-shadow:

        0 24px 46px rgba(31,99,216,.30);

}


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

@media (max-width:992px){

    .cta{

        padding:90px 0 110px;

    }

}


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

@media (max-width:768px){

    .cta{

        padding:80px 0 90px;

    }

    .cta .section-title{

        max-width:100%;

        font-size:2.35rem;

    }

    .cta .section-description{

        font-size:1rem;

        line-height:1.85;

        margin-bottom:30px;

    }

    .cta .btn{

        width:100%;

        max-width:320px;

    }

}


/* ==========================================================
   FOOTER
========================================================== */

.footer{

    background:#0f172a;

    color:#cbd5e1;

    padding:90px 0 30px;

    border-top:1px solid rgba(255,255,255,.06);

}

.footer-grid{

    display:grid;

    grid-template-columns:
        1.45fr
        .9fr
        .9fr
        .9fr
        1.35fr;

    gap:60px;

    align-items:flex-start;

}

.footer-logo{

    display:inline-flex;

    margin-bottom:26px;

}

.footer-logo img{

    height:54px;

    width:auto;

    display:block;

}

.footer-brand p{

    max-width:360px;

    font-size:.97rem;

    line-height:1.9;

    color:#94a3b8;

}

.footer-column h3{

    margin-bottom:22px;

    font-size:1rem;

    font-weight:700;

    color:#ffffff;

}

.footer-column ul{

    list-style:none;

    margin:0;

    padding:0;

}

.footer-column li{

    margin-bottom:14px;

}

.footer-column a{

    color:#94a3b8;

    text-decoration:none;

    transition:
        color .25s ease,
        padding-left .25s ease;

}

.footer-column a:hover{

    color:#ffffff;

    padding-left:6px;

}

.footer-services p{

    margin-bottom:28px;

    font-size:.96rem;

    line-height:1.9;

    color:#94a3b8;

}

.footer-service-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border:1px solid rgba(255,255,255,.20);

    border-radius:14px;

    color:#ffffff;

    text-decoration:none;

    font-weight:600;

    transition:
        background .30s ease,
        border-color .30s ease,
        transform .30s ease;

}

.footer-service-button:hover{

    background:#1f63d8;

    border-color:#1f63d8;

    transform:translateY(-3px);

}

.footer-bottom{

    margin-top:70px;

    padding-top:28px;

    border-top:1px solid rgba(255,255,255,.08);

    display:flex;

    justify-content:center;

    text-align:center;

}

.footer-bottom p{

    margin:0;

    font-size:.92rem;

    color:#64748b;

}


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

@media (max-width:1100px){

    .footer-grid{

        grid-template-columns:

            repeat(2,1fr);

        gap:50px;

    }

    .footer-brand{

        grid-column:1/-1;

    }

    .footer-services{

        grid-column:1/-1;

    }

}


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

@media (max-width:768px){

    .footer{

        padding:70px 0 30px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:42px;

    }

    .footer-brand p{

        max-width:100%;

    }

    .footer-column{

        padding-bottom:6px;

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

    }

    .footer-column:last-child{

        border-bottom:none;

        padding-bottom:0;

    }

    .footer-service-button{

        width:100%;

        max-width:320px;

    }

    .footer-bottom{

        margin-top:50px;

        padding-top:24px;

    }

}



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

@media (max-width:992px){

    .cta{

        padding:110px 0;

    }

}


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

@media (max-width:768px){

    .cta{

        padding:90px 0;

    }

    .cta .section-title{

        font-size:2.4rem;

    }

    .cta .section-description{

        font-size:1rem;

        line-height:1.9;

    }

    .cta .btn{

        width:100%;

        max-width:320px;

    }

}


/* ---------- Tablet ---------- */

@media (max-width:992px){

    .platform-grid{

        grid-template-columns:1fr;

    }

}

/* ---------- Mobile ---------- */

@media (max-width:768px){

    .platform-benefits{

        padding:90px 0;

    }

    .platform-benefits .section-header{

        margin-bottom:50px;

    }

    .platform-card{

        padding:28px;

    }

    .platform-icon{

        width:64px;

        height:64px;

    }

    .platform-icon svg{

        width:30px;

        height:30px;

    }

}