@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ==========================================================
   COALA HUB V1
   ========================================================== */

:root{

    --bg:#F6F7F3;
    --surface:#FFFFFF;

    --text:#222222;
    --text-light:#555555;

    --primary:#FFB000;
    --secondary:#BADA55;

    --border:#E8E8E8;

    --shadow-sm:0 6px 20px rgba(0,0,0,.05);
    --shadow:0 14px 40px rgba(0,0,0,.08);

    --radius:28px;

    --container:760px;

    --transition:.28s cubic-bezier(.22,1,.36,1);

}

/* ==========================================================
RESET
========================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Manrope",sans-serif;

    background:var(--bg);

    color:var(--text);

    line-height:1.55;

    -webkit-font-smoothing:antialiased;

    padding:24px 18px 60px;

}

img{

    display:block;

    max-width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

/* ==========================================================
LAYOUT
========================================================== */

.hub{

    width:100%;
    max-width:var(--container);

    margin:auto;

}

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

.hero-image{

    border-radius:32px;

    overflow:hidden;

    box-shadow:var(--shadow);

    background:white;

}

.hero-image img{

    width:100%;

    height:300px;

    object-fit:cover;

    object-position:center;

}

/* ==========================================================
BRAND
========================================================== */

.brand{

    text-align:center;

    margin-top:-72px;

    position:relative;

    z-index:20;

}

.brand img{

    width:220px;

    margin:auto;

    padding:18px 22px;

    background:#fff;

    border-radius:26px;

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

}

.brand h1{

    margin-top:24px;

    font-size:clamp(1.7rem,3.8vw,2.3rem);

    line-height:1.15;

    font-weight:700;

}

.brand p{

    margin-top:18px;

    max-width:445px;

    margin-left:auto;

    margin-right:auto;

    color:var(--text-light);

    font-size:1.06rem;

    line-height:1.7;

}

/* ==========================================================
LINKS
========================================================== */

.links{

    margin-top:48px;

    display:flex;

    flex-direction:column;

    gap:16px;

}

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

.card{

    display:flex;

    align-items:center;

    gap:24px;

    background:var(--surface);

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

    border-radius:var(--radius);

    padding:26px;

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

    transition:var(--transition);

    position:relative;

    overflow:hidden;

}

.card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:5px;
    height:100%;

    background:var(--primary);

    transform:scaleY(0);

    transform-origin:top;

    transition:transform var(--transition);

}

.card:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow);

    border-color:var(--border);

}

/* Toque no celular */
.card:active{

    transform:scale(.99);

    box-shadow:0 8px 24px rgba(0,0,0,.12);

}

.card:hover .icon{

    color:var(--primary);

}

.card:hover .icon svg{

    transform:scale(1.05);

}

.card:hover::before{

    transform:scaleY(1);

}

/* ==========================================================
ÍCONE
========================================================== */

.icon{

    width:64px;

    height:64px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:rgba(255,176,0,.12);

    color:var(--text);

    transition:var(--transition);

}

.icon svg{

    width:28px;

    height:28px;

    stroke-width:2;

    transition:var(--transition);

}

/* ==========================================================
TEXTO DO CARD
========================================================== */

.content{

    flex:1;

}

.content h2{

    font-size:1.08rem;

    font-weight:800;

    letter-spacing:.02em;

    margin-bottom:4px;

}

.content p{

    color:#555;

    font-size:.96rem;

    line-height:1.5;

}

/* ==========================================================
SETA
========================================================== */

.arrow{

    display:none;
    margin-left:auto;
    margin-right:-8px;
    
    font-size:1.8rem;

    color:var(--text-light);

    font-weight:700;

    opacity:.55;

    transition:var(--transition);

}

.card:hover .arrow{

    transform:translateX(4px);

    color:var(--primary);

    opacity:1;

}

/* ==========================================================
RODAPÉ
========================================================== */

footer{

    margin-top:12px;

    padding:24px 20px 12px;

    text-align:center;

    color:var(--text-light);

}

footer p{

    font-size:.95rem;

}

footer a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin:12px 0 10px;

    padding:12px 22px;

    border-radius:999px;

    background:white;

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

    font-weight:700;

    transition:var(--transition);

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

}

footer a:hover{

    background:var(--primary);

    color:#222;

    transform:translateY(-2px);

}

footer small{

    display:block;

    opacity:.65;

    font-size:.82rem;

}

/* ==========================================================
SELEÇÃO
========================================================== */

::selection{

    background:var(--primary);

    color:#222;

}

/* ==========================================================
SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#ECEEE7;

}

::-webkit-scrollbar-thumb{

    background:#C8D98B;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}

/* ==========================================================
RESPONSIVO
========================================================== */

@media (max-width:900px){

    body{

        padding:20px 16px 50px;

    }

    .hero-image img{

        height:270px;

    }

    .brand{

        margin-top:-44px;

    }

    .brand img{

        width:250px;

    }

    .brand h1{

        font-size:2.4rem;

    }

}

@media (max-width:768px){

    body{

        padding:10px 14px 36px;

    }

    .hero-image{

        border-radius:22px;

    }

    .hero-image img{

        height:185px;

    }

    .brand{

        margin-top:-66px;

    }

    .brand img{

    width:180px;

    padding:8px 10px;

    background: linear-gradient(
    to bottom,
    rgba(255,255,255,.85),
    rgba(255,255,255,.55)
);

    border-radius:24px;

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

    }

    .brand h1{

    margin-top:4px;

    font-size:1.6rem;

    line-height:1.12;

    }

    .brand p{

        margin-top:10px;

        font-size:.95rem;

        line-height:1.6;

        padding:0 8px;

    }

    .links{

        margin-top:22px;

        gap:12px;

    }

    .card{

    padding:10px 14px;

    gap:16px;

    border-radius:20px;

    }

    .icon{

        width:46px;

        height:46px;

        font-size:1.25rem;

        border-radius:13px;

    }

    .content h2{

        font-size:.95rem;

    }

    .content p{

        font-size:.86rem;

    }

    .arrow{

        font-size:1.5rem;

    }

    footer{

        margin-top:12px;

        padding-top:24px;

        padding-bottom:12px;

    }

}

@media (min-width:641px){

    .card{

        cursor:pointer;

    }

}

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/* ==========================================================
FOCUS
========================================================== */

.card:focus-visible,
footer a:focus-visible{

    outline:3px solid var(--primary);

    outline-offset:4px;

    border-radius:var(--radius);

}

/* ==========================================================
UTILIDADES
========================================================== */

.hidden{

    display:none !important;

}

.center{

    text-align:center;

}