/* ==========================
   PRINTTURA V2
   ========================== */
:root {
    --primary: #22C7E8;
    --primary-dark: #1798B5;

    --dark: #1C2430;
    --dark-light: #2D3748;

    --light: #F7FAFC;
    --white: #FFFFFF;

    --border: #E2E8F0;

    --radius: 18px;

    --shadow:
        0 10px 25px rgba(0,0,0,.08);

    --transition: .25s ease;
}

/* ==========================
   RESET
   ========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Inter', sans-serif;
    background: var(--light);
    color: var(--dark);
    line-height: 1.6;
}

/* ==========================
   CONTAINER
   ========================== */
.container {
    width: min(1180px, 90%);
    margin: auto;
}

/* ==========================
   HEADER
   ========================== */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(18px);
    box-shadow:
        0 4px 18px rgba(0,0,0,.04);
    border-bottom:1px solid rgba(226,232,240,.75);
	transition:
        background .3s,
        box-shadow .3s
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: .8rem;
    text-decoration: none;
    color: var(--dark);
    font-weight: 700;
    font-size: 1.2rem;
    transition:.35s;
}

.logo img {
    height: 46px;
	transition:
    transform .35s ease;
}

.logo:hover img{
    transform:
        rotate(-3deg)
        scale(1.04);
}

nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
}

nav a{
    position:relative;
    text-decoration:none;
    color:var(--dark);
    font-weight:500;
    transition:.25s;
}

nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--primary);
    transition:.25s;
}

nav a:hover{
    color:var(--primary-dark);
}

nav a:hover::after{
    width:100%;
}

/* ==========================
   BOTÕES
   ========================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 25px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-3px);
    background: var(--primary-dark);
	box-shadow:
        0 14px 30px rgba(34,199,232,.30);
}

.btn-secondary {
    border: 2px solid var(--primary);
    color: var(--primary-dark);
    background: transparent;
}

.btn-secondary:hover {
    background: var(--primary);
    color: white;
}

.btn-whatsapp {
    background:#25D366;
    color:white;
    border:none;
}

.btn-whatsapp:hover {
    transform: translateY(-3px);
    background: var(--primary-dark);
    box-shadow:
        0 16px 35px rgba(37,211,102,.30);
}

.back-button{
    font-size:.95rem;
    color:#64748b;
    font-weight:500;
    transition:.25s;
	
	display:inline-flex;
    align-items:center;
    gap:.5rem;
    color:var(--primary);
    font-weight:600;
    text-decoration:none;
    margin-bottom:2rem;
	padding:.4rem 0;
	background:none;
	border:none;
	box-shadow:none;
	cursor:pointer;
}

.back-button:hover{
	color:var(--primary);
    transform:translateX(-4px);
}

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

.hero{
    display:flex;
    align-items:center;
    overflow:hidden;
    min-height:calc(100vh - 74px);
    background:
	radial-gradient(
	circle at 70% 40%,
	rgba(34,199,232,.08),
	transparent 60%
	)
    linear-gradient(
        135deg,
        #fff,
        #f8fcfe
    );
}

.hero-content{
    display:grid;
    grid-template-columns:
		620px
		minmax(480px,1fr);
    gap:40px;
    align-items:center;
}

.hero h1{
    font-size:5.8rem;
    line-height:.90;
    font-weight:800;
    letter-spacing:-.04em;
    margin-bottom:1rem;
}

.hero h1 span{
    display:block;
    font-size:4.3rem;
    font-weight:400;
    color:var(--primary-dark);
    margin-top:.4rem;
}

.hero p{
    max-width:560px;
    font-size:1.2rem;
    margin-bottom:2.5rem;
}

.hero-buttons{
    display:flex;
    gap:18px;
    flex-wrap:nowrap;
    margin-bottom:2rem;
	animation: fadeUp 1.1s ease;
}

.hero-buttons .btn{
    min-width:220px;
}

.hero-text{
    max-width:650px;
	align-self:center;
	animation: fadeUp .8s ease;
}

.hero-image{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    transform:translateY(95px);
    animation:heroAppear .8s ease forwards;
}

.hero-image::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:360px;
    height:38px;
    bottom:20px;
    background:rgba(0,0,0,.18);
    border-radius:50%;
    filter:blur(35px);
    opacity:.22;
    z-index:1;
}

.hero-image::before{
    content:"";
    position:absolute;
    left:50%;
    top:48%;
    transform:translate(-50%,-50%);
    width:480px;
    height:480px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(34,199,232,.18),
            rgba(34,199,232,.08) 45%,
            transparent 75%
        );
    z-index:0;
}

.hero-composition{
    width:min(930px,100%);
    height:auto;
    filter:
        drop-shadow(0 55px 55px rgba(0,0,0,.18))
        drop-shadow(0 18px 24px rgba(0,0,0,.12))
        drop-shadow(0 8px 12px rgba(0,0,0,.08));
    animation:
        floatHero 8s ease-in-out .8s infinite;
}

.hero-badges{
    display:flex;
	gap:18px;
	padding:14px 20px;
	flex-wrap:nowrap;
	opacity:.85;
	font-size:.95rem;
	animation: fadeUp 1.3s ease;
}

.hero-badges span{
    white-space:nowrap;
    background:#fff;
    border-radius:999px;
    padding:.6rem 1rem;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
}

@keyframes floatHero{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-13px); }
    100%{ transform:translateY(0); }
}

@keyframes heroAppear{
    from{ opacity:0; }
    to{ opacity:1; }
}

/* ==========================
   SECTIONS
   ========================== */
.section {
    padding: 6rem 0;
}

.section-alt {
    background: white;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
	position:relative;
	padding-bottom:1rem;
}

.section-header::after{
    content:"";
    width:80px;
    height:4px;
    border-radius:999px;
    background:var(--primary);
    display:block;
    margin:1.2rem auto 0;
    transform:scaleX(0);
    transform-origin:center;
    animation:lineGrow .8s ease forwards;
}

.section-header h2 {
    font-size: 2.2rem;
    margin-bottom: .8rem;
}

.section-header p {
    color: var(--dark-light);
    max-width: 700px;
    margin: auto;
}

/* ==========================
   COLEÇÕES
   ========================== */
.collections-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );
    gap: 2rem;
}

.collection-card {
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
	padding-bottom:28px;
	box-shadow:
		0 12px 30px rgba(0,0,0,.06);
	transition:
		transform .35s ease,
		box-shadow .35s ease;
    cursor: pointer;
	position:relative;
	animation: cardEnter .5s ease both;
}

.collection-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:320px;
    background:
        linear-gradient(
            transparent 45%,
            rgba(0,0,0,.20)
        );
    opacity:0;
    transition:.35s;
    pointer-events:none;
}

.collection-card:hover::before{
    opacity:1;
}

.collection-card:hover {
	transform:
        translateY(-12px)
        scale(1.025);
	box-shadow:
		0 35px 60px rgba(0,0,0,.14);
}

.card-image {
    width: 100%;
    height: 320px;
    object-fit: contain;
    background: #000;
    padding: 1rem;
	display:block;
	transition:
		transform .45s ease;
}

.collection-card:hover .card-image{
    transform:
        scale(1.05)
        translateY(-4px);
}

.collection-content {
    padding: 1.4rem;
	display:flex;
    flex-direction:column;
	gap:.6rem;
}

.collection-content h3 {
	font-size:1.55rem;
    line-height:1.25;
    margin-bottom:.4rem;
	transition:.30s;
}

.collection-title{
    font-size:2.2rem;
    font-weight:700;
    margin-bottom:.6rem;
    color:var(--dark);
}

.collection-card:hover h3{
    color:var(--primary-dark);
}

.collection-count{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.45rem .9rem;
    border-radius:999px;
    background:#EEF8FB;
    color:var(--primary-dark);
    font-weight:600;
    margin-top:.8rem;
}

.collection-link{
    margin-top:.6rem;
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    color:var(--primary-dark);
    font-weight:600;
    transition:.30s;
}

.collection-card:hover .collection-link{
    opacity:1;
    transform:translateY(0);
    gap:.8rem;

    color:var(--primary);
}

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

.features {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );
    gap: 1rem;
}

.feature {
    background: var(--light);
    padding: 1.2rem;
    border-radius: var(--radius);
    text-align: center;
    font-weight: 600;
}

/* ==========================
   FAQ
   ========================== */

.faq{
    padding:110px 0;
}

.faq details{
    background:#fff;
    border-radius:18px;
    margin:16px 0;
    padding:22px 28px;
    box-shadow:0 12px 30px rgba(0,0,0,.05);
}

.faq summary{
    cursor:pointer;
    font-weight:600;
    font-size:1.05rem;
}

.faq p{
    margin-top:16px;
    color:#64748b;
    line-height:1.8;
}

/* ==========================
   CONTATO
   ========================== */
.contact-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.contact-note{
    margin-top:18px;
    color:#64748b;
    font-size:.95rem;
}

/* ==========================
   FOOTER
   ========================== */
footer {
    background: var(--dark);
    color: white;
    text-align: center;
    padding: 2rem 0;
}

footer p {
    opacity: .9;
}


/* ==========================
   ANIMAÇÕES
   ========================== */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}   

@keyframes lineGrow{
    from{
        transform:scaleX(0);
    }
    to{
        transform:scaleX(1);
    }
}

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

@media (max-width: 900px) {
    nav ul {
        gap: 1rem;
    }

    .hero {
        min-height: auto;
        padding: 5rem 0;
    }

    .hero h1 {
        font-size: 3rem;
    }

	.hero-content{
		grid-template-columns:1fr;
		text-align:center;
	}

	.hero-text{
		margin:auto;
	}
	
	.hero-badges{
		justify-content:center;
		flex-wrap:wrap;
	}
}

@media (max-width: 700px) {
    .header .container {
        flex-direction: column;
        gap: 1rem;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero {
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .section {
        padding: 4rem 0;
    }
}

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

@media (max-width: 768px) {

	.hero-buttons{
        flex-direction:column;
    }
}