/* ==========================================================
   Caramela Mini Donuts
   Landing Page Premium
   Desenvolvido com LIF Framework
   Syselo Digital
========================================================== */

/* Fontes: carregadas via <link> em index.html (evita download duplicado) */

/* ==========================================================
   01 - VARIÁVEIS
========================================================== */

:root{

    /* Cores — chocolate + rosa pó (modelo) */

    --primary:#5D3A29;
    --primary-dark:#4A2C2A;
    --secondary:#4A2C2A;
    --accent:#E9B35D;
    --pink:#D68E8E;
    --pink-soft:#F6E4E4;
    --pink-deep:#C47E7E;

    --background:#FFF8F2;
    --surface:#FFFFFF;

    --text:#2E2E2E;
    --text-light:#777777;

    --success:#2E7D32;

    /* Tipografia */

    --font-family:'Poppins',sans-serif;
    --font-script:'Great Vibes',cursive;
    --font-display:'Cormorant Garamond',Georgia,serif;

    --font-xs:.75rem;
    --font-sm:.875rem;
    --font-md:1rem;
    --font-lg:1.25rem;
    --font-xl:2rem;
    --font-2xl:3rem;
    --font-3xl:4.5rem;

    /* Espaçamento */

    --space-1:.25rem;
    --space-2:.5rem;
    --space-3:1rem;
    --space-4:1.5rem;
    --space-5:2rem;
    --space-6:3rem;
    --space-7:5rem;
    --space-8:7rem;

    /* Radius */

    --radius-sm:8px;
    --radius-md:16px;
    --radius-lg:24px;
    --radius-xl:36px;
    --radius-round:999px;

    /* Sombras */

    --shadow-sm:0 8px 20px rgba(0,0,0,.06);
    --shadow-md:0 20px 40px rgba(0,0,0,.10);
    --shadow-lg:0 30px 60px rgba(0,0,0,.15);

    /* Transições */

    --transition:.35s ease;

}

/* ==========================================================
   03 - RESET
========================================================== */

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

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text);

    font-family:var(--font-family);

    line-height:1.6;

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

ul{

    list-style:none;

}

/* ==========================================================
   04 - SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:999px;

}

::-webkit-scrollbar-track{

    background:#F5F5F5;

}

/* ==========================================================
   05 - TIPOGRAFIA
========================================================== */

h1{

    font-size:var(--font-3xl);

    font-weight:800;

    line-height:1.1;

    color:var(--secondary);

}

h2{

    font-size:var(--font-2xl);

    color:var(--secondary);

    margin-bottom:1rem;

}

h3{

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

    color:var(--secondary);

}

p{

    color:var(--text-light);

    font-size:1.05rem;

}

/* ==========================================================
   06 - LAYOUT
========================================================== */

.lif-container{

    width:min(1180px,92%);

    margin:auto;

}

.lif-section{

    padding:7rem 0;

}

.lif-grid{

    display:grid;

    gap:2rem;

}

.lif-grid-2{

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

}

.lif-grid-3{

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

}

.lif-grid-4{

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

}

/* ==========================================================
   07 - BOTÕES
========================================================== */

.lif-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    padding:16px 34px;

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

    font-weight:600;

    transition:var(--transition);

}

.lif-btn-primary{

    background:var(--primary);

    color:#FFF;

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

}

.lif-btn-primary:hover{

    transform:translateY(-4px);

    background:var(--primary-dark);

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

}

.lif-btn-outline{

    border:2px solid var(--pink);

    color:var(--pink-deep);

}

.lif-btn-outline:hover{

    background:var(--pink);

    color:#FFF;
    border-color:var(--pink);

}

.ca-btn-pink{

    border:2px solid var(--pink);

    color:var(--pink-deep);

    background:transparent;

}

.ca-btn-pink:hover{

    background:var(--pink);

    color:#FFF;

    transform:translateY(-4px);

}

.ca-btn-pink--on-dark{

    border-color:rgba(255,255,255,.85);

    color:#FFF;

}

.ca-btn-pink--on-dark:hover{

    background:rgba(255,255,255,.15);

    color:#FFF;

}

/* ==========================================================
   08 - BADGES
========================================================== */

.lif-badge{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:10px 18px;

    background:var(--pink-soft);

    color:var(--pink-deep);

    border-radius:999px;

    font-size:.9rem;

    font-weight:600;

}

.ca-badge-soft{

    background:var(--pink-soft);

    color:var(--pink-deep);

}

/* ==========================================================
   09 - CARDS BASE
========================================================== */

.lif-card{

    background:var(--surface);

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

    padding:2rem;

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

    transition:var(--transition);

}

.lif-card:hover{

    transform:translateY(-8px);

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

}

/* ==========================================================
   10 - UTILITÁRIOS
========================================================== */

.text-center{

    text-align:center;

}

.mt-1{

    margin-top:1rem;

}

.mt-2{

    margin-top:2rem;

}

.mt-3{

    margin-top:3rem;

}

.mb-1{

    margin-bottom:1rem;

}

.mb-2{

    margin-bottom:2rem;

}

.mb-3{

    margin-bottom:3rem;

}

/* ==========================================================
   11 - ANIMAÇÕES
========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .8s ease forwards;

}

.floating{

    animation:floating 5s ease-in-out infinite;

}

/* ==========================================================
   12 - RESPONSIVIDADE BASE
========================================================== */

@media(max-width:992px){

    .lif-grid-4{

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

    }

    .lif-grid-3{

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

    }

}

@media(max-width:768px){

    h1{

        font-size:3rem;

    }

    h2{

        font-size:2.2rem;

    }

    .lif-grid-2,
    .lif-grid-3,
    .lif-grid-4{

        grid-template-columns:1fr;

    }

    .lif-section{

        padding:5rem 0;

    }

}

@media(max-width:480px){

    h1{

        font-size:2.4rem;

    }

    .lif-btn{

        width:100%;

    }

}

/* ==========================================================
   13 - HEADER
========================================================== */

.lif-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:82px;

    display:flex;

    align-items:center;

    z-index:1000;

    transition:all .35s ease;

}

.lif-header.scrolled{

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(16px);

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

}

.lif-header .lif-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.lif-logo{

    display:flex;

    align-items:center;

    gap:.75rem;

}

.lif-logo img{

    height:58px;

    width:auto;

}

.lif-nav{

    display:flex;

    align-items:center;

    gap:2.5rem;

}

.lif-nav a{

    position:relative;

    font-weight:500;

    color:var(--secondary);

    transition:var(--transition);

}

.lif-nav a:hover{

    color:var(--primary);

}

.lif-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

.lif-nav a:hover::after{

    width:100%;

}

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

.header-actions{

    display:flex;

    align-items:center;

    gap:1rem;

}

.header-whatsapp{

    white-space:nowrap;

}

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

.menu-toggle{

    display:none;

    width:46px;

    height:46px;

    border-radius:50%;

    background:#FFF;

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

    align-items:center;

    justify-content:center;

    cursor:pointer;

}

.menu-toggle span{

    width:24px;

    height:2px;

    background:var(--secondary);

    position:relative;

}

.menu-toggle span::before,
.menu-toggle span::after{

    content:"";

    position:absolute;

    left:0;

    width:24px;

    height:2px;

    background:var(--secondary);

}

.menu-toggle span::before{

    top:-7px;

}

.menu-toggle span::after{

    top:7px;

}

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

.hero{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:90px;

    background:linear-gradient(
        180deg,
        #FFF9F5 0%,
        #FFF5ED 100%
    );

}

/* ==========================================================
   DECORAÇÃO
========================================================== */

.hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    background:rgba(233,179,93,.12);

    right:-250px;

    top:-250px;

}

.hero::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(184,107,50,.08);

    left:-180px;

    bottom:-180px;

}

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

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:5rem;

}

/* ==========================================================
   TEXTO
========================================================== */

.hero-content{

    position:relative;

    z-index:2;

}

.hero-content h1{

    margin:1rem 0 1.25rem;

}

.hero-content p{

    max-width:520px;

    margin-bottom:2rem;

    font-size:1.15rem;

}

.ca-brand-script{

    font-family:var(--font-script);

    font-size:clamp(2.4rem, 5vw, 3.6rem);

    color:var(--secondary);

    line-height:1;

    margin:0;

}

.ca-brand-script--sm{

    font-size:2.2rem;

}

.ca-brand-tag{

    margin:.15rem 0 0;

    font-size:.85rem;

    letter-spacing:.22em;

    text-transform:uppercase;

    font-weight:600;

    color:var(--pink-deep);

}

.ca-hero-title{

    display:flex;

    flex-direction:column;

    gap:.35rem;

    font-size:clamp(2rem, 4.5vw, 3.35rem);

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.02em;

    line-height:1.08;

}

.ca-hero-line{

    color:var(--secondary);

}

.ca-hero-accent{

    color:var(--pink-deep);

}

.ca-hero-subtitle{

    margin-bottom:1.75rem !important;

    color:rgba(74,46,31,.78);

}

.ca-hero-location{

    margin-top:1.25rem;

}

.ca-heart{

    color:var(--pink);

    font-weight:400;

    margin-left:.2rem;

}

.hero-buttons{

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

}

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

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img,
.hero-image .hero-video{

    width:100%;

    max-width:520px;

    border-radius:36px;

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

    animation:floating 6s ease-in-out infinite;

}

.hero-image .hero-video{

    display:block;

    height:auto;

    aspect-ratio:1 / 1;

    object-fit:cover;

    background:#1a1a1a;

}

/* ==========================================================
   CÍRCULO DECORATIVO
========================================================== */

.hero-circle{

    position:absolute;

    width:520px;

    height:520px;

    background:linear-gradient(
        135deg,
        var(--accent),
        var(--primary)
    );

    border-radius:50%;

    opacity:.12;

    z-index:-1;

}

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

.hero-feature{

    display:flex;

    align-items:center;

    gap:.75rem;

    margin-top:2rem;

    color:var(--secondary);

    font-weight:600;

}

.hero-feature i{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#FFF;

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

}

/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.scroll-down{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:.5rem;

    color:var(--primary);

    font-size:.9rem;

}

.scroll-down::after{

    content:"";

    width:2px;

    height:45px;

    background:var(--primary);

    animation:fadeUp 1.5s infinite;

}

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

@media(max-width:992px){

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

        gap:3rem;

    }

    .hero-content{

        order:2;

    }

    .hero-image{

        order:1;

    }

    .hero-content p{

        margin:auto auto 2rem;

    }

    .hero-buttons{

        justify-content:center;

    }

}

@media(max-width:768px){

    .lif-nav{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

    .header-actions .lif-btn{

        display:none;

    }

    .hero{

        padding-top:120px;

    }

    .hero-image img,
    .hero-image .hero-video{

        max-width:380px;

    }

}

@media(max-width:480px){

    .hero-image img,
    .hero-image .hero-video{

        max-width:300px;

    }

    .hero-buttons{

        flex-direction:column;

    }

}

/* ==========================================================
   14 - PRODUCTS
========================================================== */

.products{

    background:var(--surface);

}

.products-header{

    text-align:center;

    margin-bottom:4rem;

}

.products-header p{

    max-width:650px;

    margin:auto;

}

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

.products-grid{

    display:grid;

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

    gap:2rem;

}

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

.product-card{

    position:relative;

    overflow:hidden;

    background:#FFF;

    border-radius:28px;

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

    transition:all .35s ease;

}

.product-card:hover{

    transform:translateY(-10px);

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

}

/* ==========================================================
   IMAGEM
========================================================== */

.product-image{

    position:relative;

    overflow:hidden;

    height:260px;

    background:#FFF7F0;

    display:flex;

    align-items:center;

    justify-content:center;

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center;

    padding:12px;

    transition:.45s;

}

.product-card:hover .product-image img{

    transform:scale(1.02);

}

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

.product-badge{

    position:absolute;

    top:18px;

    left:18px;

    background:var(--primary);

    color:#FFF;

    padding:8px 16px;

    border-radius:999px;

    font-size:.80rem;

    font-weight:600;

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

}

/* ==========================================================
   FAVORITO
========================================================== */

.product-favorite{

    position:absolute;

    top:18px;

    right:18px;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#FFF;

    display:flex;

    align-items:center;

    justify-content:center;

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

    font-size:1.1rem;

}

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

.product-content{

    padding:1.8rem;

}

.product-category{

    color:var(--primary);

    font-size:.85rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.product-title{

    margin-top:.4rem;

    font-size:1.5rem;

    color:var(--secondary);

    font-weight:700;

}

.product-description{

    margin-top:1rem;

    font-size:.95rem;

    min-height:60px;

}

/* ==========================================================
   RATING
========================================================== */

.product-rating{

    display:flex;

    gap:.2rem;

    margin-top:1rem;

    color:#FDBB2D;

    font-size:1rem;

}

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

.product-footer{

    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:1rem;

    margin-top:2rem;

}

.product-price{

    display:flex;

    flex-direction:column;

}

.product-price small{

    color:var(--text-light);

    font-size:.80rem;

}

.product-price strong{

    font-size:1.45rem;

    color:var(--secondary);

}

.product-order{

    position:relative;

    z-index:2;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:100%;

    padding:14px 22px;

    border:none;

    border-radius:999px;

    background:var(--primary);

    color:#FFF;

    font-weight:600;

    font-size:1rem;

    white-space:nowrap;

    transition:.3s;

    cursor:pointer;

    text-decoration:none;

}

.product-order:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

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

.product-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        transparent,

        rgba(184,107,50,.05)

    );

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.product-card:hover::before{

    opacity:1;

}

/* ==========================================================
   DESTAQUE
========================================================== */

.product-card.featured{

    border:2px solid rgba(233,179,93,.35);

}

.product-card.featured::after{

    content:"⭐ Mais Pedido";

    position:absolute;

    top:22px;

    right:-40px;

    width:180px;

    text-align:center;

    transform:rotate(45deg);

    background:var(--accent);

    color:var(--secondary);

    padding:6px 0;

    font-size:.75rem;

    font-weight:700;

}

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

@media(max-width:768px){

    .products-grid{

        gap:1.5rem;

    }

    .product-image{

        height:220px;

    }

    .product-footer{

        gap:1rem;

    }

    .product-order{

        width:100%;

        text-align:center;

    }

}

/* ==========================================================
   15 - BENEFÍCIOS
========================================================== */

.benefits{

    background:#FFF7F1;

    position:relative;

    overflow:hidden;

}

.benefits::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:rgba(233,179,93,.08);

    border-radius:50%;

    top:-180px;

    right:-180px;

}

.benefits-header{

    text-align:center;

    margin-bottom:4rem;

}

.benefits-grid{

    display:grid;

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

    gap:2rem;

}

.benefit-card{

    position:relative;

    background:#FFF;

    padding:2.5rem;

    border-radius:28px;

    text-align:center;

    transition:.35s;

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

}

.benefit-card:hover{

    transform:translateY(-10px);

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

}

.benefit-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--accent),
        var(--primary)
    );

    color:#FFF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    margin-bottom:1.5rem;

}

.benefit-card h3{

    margin-bottom:1rem;

}

.benefit-card p{

    font-size:.95rem;

}

/* ==========================================================
   16 - GALERIA
========================================================== */

.gallery{

    background:var(--surface);

}

.gallery-header{

    text-align:center;

    margin-bottom:4rem;

}

.gallery-grid{

    display:grid;

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

    gap:1.5rem;

}

.gallery-item{

    overflow:hidden;

    border-radius:24px;

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

    cursor:pointer;

}

.gallery-item img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.45s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

/* ==========================================================
   17 - CTA FINAL
========================================================== */

.cta{

    padding:7rem 0;

    text-align:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#FFF;

}

.cta h2{

    color:#FFF;

    margin-bottom:1rem;

}

.cta p{

    color:rgba(255,255,255,.85);

    max-width:650px;

    margin:auto auto 2.5rem;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:1rem;

    flex-wrap:wrap;

}

.cta .lif-btn-primary{

    background:#FFF;

    color:var(--primary);

}

.cta .lif-btn-primary:hover{

    background:#F6F6F6;

}

.cta .lif-btn-outline{

    border:2px solid rgba(255,255,255,.5);

    color:#FFF;

}

.cta .lif-btn-outline:hover{

    background:#FFF;

    color:var(--primary);

}

/* ==========================================================
   PEQUENO DESTAQUE
========================================================== */

.cta-badge{

    display:inline-flex;

    padding:10px 20px;

    border-radius:999px;

    background:rgba(255,255,255,.15);

    margin-bottom:2rem;

    font-weight:600;

}

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

@media(max-width:992px){

    .benefits-grid{

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

    }

    .gallery-grid{

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

    }

}

@media(max-width:768px){

    .benefits-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-item img{

        height:260px;

    }

}

/* ==========================================================
   18 - FOOTER
========================================================== */

.footer{

    background:var(--secondary);

    color:#FFF;

    padding:5rem 0 2rem;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:3rem;

}

.footer-brand img{

    height:88px;

    width:auto;

    max-width:220px;

    object-fit:contain;

    margin-bottom:1rem;

    border-radius:12px;

}

.footer-brand p{

    color:rgba(255,255,255,.75);

    max-width:420px;

}

.footer h4{

    margin-bottom:1rem;

    font-size:1.1rem;

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:.75rem;

}

.footer-links a{

    color:rgba(255,255,255,.75);

    transition:.3s;

}

.footer-links a:hover{

    color:#FFF;

    padding-left:6px;

}

.footer-bottom{

    margin-top:4rem;

    padding-top:2rem;

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

    text-align:center;

    color:rgba(255,255,255,.55);

    font-size:.9rem;

}

/* ==========================================================
   19 - FLOATING WHATSAPP
========================================================== */

.floating-whatsapp{

    position:fixed;

    right:28px;

    bottom:28px;

    width:68px;

    height:68px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#FFF;

    font-size:2rem;

    text-decoration:none;

    box-shadow:0 18px 35px rgba(37,211,102,.35);

    z-index:9999;

    transition:.35s;

    animation:whatsappPulse 2.5s infinite;

}

.floating-whatsapp:hover{

    transform:translateY(-6px) scale(1.05);

}

@keyframes whatsappPulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.45);

    }

    70%{

        box-shadow:0 0 0 20px rgba(37,211,102,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}

/* ==========================================================
   20 - MENU MOBILE
========================================================== */

.mobile-menu{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    visibility:hidden;

    opacity:0;

    transition:.35s;

    z-index:9998;

}

.mobile-menu.active{

    visibility:visible;

    opacity:1;

}

.mobile-menu-content{

    width:320px;

    max-width:85%;

    height:100%;

    background:#FFF;

    margin-left:auto;

    padding:2rem;

    display:flex;

    flex-direction:column;

}

.mobile-menu-content nav{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

    margin-top:2rem;

}

.mobile-menu-content a{

    font-size:1.1rem;

    font-weight:600;

    color:var(--secondary);

}

.mobile-menu-close{

    align-self:flex-end;

    font-size:2rem;

    cursor:pointer;

}

/* ==========================================================
   21 - SCROLL REVEAL
========================================================== */

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:1s;

}

.reveal.visible{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================
   22 - LOADING
========================================================== */

body.loading{

    overflow:hidden;

}

.loader{

    position:fixed;

    inset:0;

    background:#FFF;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:99999;

}

.loader::after{

    content:"🍩";

    font-size:3rem;

    animation:loaderSpin 1.5s infinite ease-in-out;

}

@keyframes loaderSpin{

    0%{

        transform:rotate(0deg) scale(1);

    }

    50%{

        transform:rotate(180deg) scale(1.2);

    }

    100%{

        transform:rotate(360deg) scale(1);

    }

}

/* ==========================================================
   23 - SELECTION
========================================================== */

::selection{

    background:var(--primary);

    color:#FFF;

}

/* ==========================================================
   24 - BACK TO TOP
========================================================== */

.back-top{

    position:fixed;

    left:30px;

    bottom:30px;

    width:54px;

    height:54px;

    border-radius:50%;

    background:#FFF;

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

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

}

.back-top.show{

    opacity:1;

    visibility:visible;

}

/* ==========================================================
   25 - RESPONSIVO FINAL
========================================================== */

@media(max-width:992px){

    .footer-grid{

        grid-template-columns:1fr 1fr;

    }

}

@media(max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-brand img{

        margin:auto auto 1rem;

    }

    .floating-whatsapp{

        width:60px;

        height:60px;

        right:18px;

        bottom:18px;

    }

}

@media(max-width:480px){

    .lif-container{

        width:94%;

    }

    .floating-whatsapp{

        width:56px;

        height:56px;

        font-size:1.7rem;

    }

}

/* ==========================================================
   SPRINT 1.2 — HERO PREMIUM
   Overrides (carrega após hero-studio.css)
   Identidade Caramela preservada · elementos ocultos via CSS
========================================================== */

.ca-hero.hero{
    background:
        linear-gradient(
            165deg,
            #FFFBF7 0%,
            var(--background) 42%,
            #FFF3EA 100%
        ) !important;
    min-height:100vh !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column;
    justify-content:center;
    align-items:stretch !important;
    overflow:hidden;
}

.ca-hero::before,
.ca-hero::after{
    display:none !important;
}

/* Wave decorativa — oculta (reativável) */
.ca-hero > .ca-wave{
    display:none !important;
}

.ca-hero-shell{
    flex:1;
    width:min(1240px, 88%);
    margin:0 auto;
    padding:8rem 0 5.5rem;
    display:grid;
    grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.25fr);
    align-items:center;
    gap:clamp(2rem, 4.5vw, 4.5rem);
    min-height:calc(100vh - 1rem);
    position:relative;
}

.ca-hero--text-only .ca-hero-shell{
    grid-template-columns:1fr;
    max-width:640px;
}

.ca-hero-copy{
    position:relative;
    z-index:3;
    padding:0 1rem 0 0;
    max-width:420px;
    animation:caHeroIn .9s ease both;
}

.ca-hero-brand{
    margin-bottom:1rem;
}

.ca-brand-script{
    font-family:var(--font-script);
    font-size:clamp(2.5rem, 4.5vw, 3.6rem);
    color:var(--secondary);
    line-height:.92;
    margin:0;
}

.ca-brand-script .ca-heart{
    font-size:.36em;
    vertical-align:super;
    margin-left:.1rem;
    color:var(--pink);
}

.ca-brand-tag{
    margin:.5rem 0 0;
    font-family:var(--font-family);
    font-size:.68rem;
    letter-spacing:.3em;
    text-transform:uppercase;
    font-weight:500;
    color:var(--pink-deep);
    opacity:.8;
}

/* Título: Cormorant (conteúdo uppercase vem do componente) */
.ca-hero-title{
    display:flex;
    flex-direction:column;
    gap:.4rem;
    margin:1.75rem 0 1.35rem !important;
    font-family:var(--font-display);
    font-size:clamp(2.35rem, 4.2vw, 3.5rem);
    font-weight:600;
    text-transform:none;
    letter-spacing:.02em;
    line-height:1.08;
}

.ca-hero-line{
    color:var(--secondary);
}

.ca-hero-accent{
    color:var(--pink-deep);
    display:inline-flex;
    align-items:flex-start;
    gap:.35rem;
    font-style:italic;
    font-weight:500;
}

.ca-hero-accent .ca-heart{
    font-size:.4em;
    margin-top:.22em;
    color:var(--pink);
    font-style:normal;
}

.ca-hero-subtitle{
    margin:0 0 2.75rem !important;
    max-width:360px;
    font-family:var(--font-family);
    font-size:1.02rem;
    font-weight:400;
    line-height:1.8;
    color:rgba(46, 46, 46, .68);
}

.ca-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:0.85rem 1.15rem;
    align-items:center;
}

/* Localização — oculta (reativável) */
.ca-hero-location{
    display:none !important;
}

/* Ícones dos pills — ocultos no hero (reativável) */
.ca-hero-actions .ca-pill-icon{
    display:none !important;
}

.ca-hero-actions .ca-pill{
    --pill-h: 52px;
    gap:0;
    min-height:var(--pill-h);
    height:var(--pill-h);
    padding:0 1.75rem;
    border-radius:999px;
    font-family:var(--font-family);
    font-size:.92rem;
    font-weight:600;
    letter-spacing:.015em;
    will-change:auto;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease,
        border-color .3s ease,
        color .3s ease;
}

.ca-hero-actions .ca-pill-label{
    padding-right:0;
}

.ca-hero-actions .ca-pill--primary{
    color:#FFF;
    background:var(--primary);
    border-color:transparent;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .14) inset,
        0 12px 28px rgba(93, 58, 41, .18);
}

.ca-hero-actions .ca-pill--primary:hover{
    transform:translateY(-2px);
    background:var(--primary-dark);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .16) inset,
        0 16px 36px rgba(93, 58, 41, .24);
    color:#FFF;
}

.ca-hero-actions .ca-pill--primary:active{
    transform:translateY(0);
}

.ca-hero-actions .ca-pill--primary:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
}

.ca-hero-actions .ca-pill--ghost{
    color:var(--secondary);
    background:transparent;
    border:1.5px solid rgba(74, 44, 42, .22);
    box-shadow:none;
    font-weight:500;
}

.ca-hero-actions .ca-pill--ghost::before{
    display:none;
}

.ca-hero-actions .ca-pill--ghost:hover{
    transform:translateY(-2px);
    color:var(--secondary);
    background:rgba(255, 255, 255, .55);
    border-color:rgba(74, 44, 42, .4);
    box-shadow:none;
}

.ca-hero-actions .ca-pill--ghost:focus-visible{
    outline:2px solid var(--pink);
    outline-offset:3px;
}

/* Mídia dominante — protagonista visual */
.ca-hero-media{
    position:relative;
    z-index:1;
    height:min(82vh, 700px);
    min-height:480px;
    margin-left:0;
    width:100%;
    justify-self:stretch;
    animation:caHeroMediaIn 1.05s ease .12s both;
}

.ca-hero-media-frame{
    width:100%;
    height:100%;
    border-radius:32px;
    overflow:hidden;
    background:var(--pink-soft);
    box-shadow:
        0 28px 56px rgba(93, 58, 41, .12),
        0 6px 16px rgba(93, 58, 41, .05);
}

.ca-hero-photo{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
    transform:scale(1.01);
    transition:transform 1.4s ease;
    border-radius:0 !important;
    box-shadow:none !important;
    animation:none !important;
    max-width:none !important;
}

.ca-hero-media:hover .ca-hero-photo{
    transform:scale(1.035);
}

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

    .ca-hero-copy,
    .ca-hero-media,
    .ca-hero-media:hover .ca-hero-photo,
    .ca-hero-actions .ca-pill--primary:hover,
    .ca-hero-actions .ca-pill--ghost:hover{
        animation:none !important;
        transform:none !important;
        transition:none !important;
    }

}

@media (max-width:980px){

    .ca-hero-shell{
        grid-template-columns:1fr;
        width:min(640px, 90%);
        padding:6.75rem 0 3.75rem;
        min-height:auto;
        gap:2.5rem;
    }

    .ca-hero-copy{
        max-width:none;
        padding:0;
        order:1;
        text-align:left;
    }

    .ca-hero-media{
        order:2;
        margin-left:0;
        width:100%;
        height:min(54vh, 440px);
        min-height:300px;
    }

    .ca-hero-media-frame{
        border-radius:24px;
    }

    .ca-hero-subtitle{
        max-width:none;
        margin-bottom:2.25rem !important;
    }

    .ca-hero-actions{
        flex-direction:column;
        align-items:stretch;
        gap:.75rem;
    }

    .ca-hero-actions .ca-pill{
        justify-content:center;
        width:100%;
    }

    .ca-hero-actions .ca-pill-label{
        white-space:normal;
        text-align:center;
    }

}

@media (max-width:480px){

    .ca-hero-shell{
        width:92%;
        padding:5.5rem 0 3rem;
        gap:1.85rem;
    }

    .ca-hero-title{
        font-size:clamp(1.95rem, 8.5vw, 2.4rem);
        margin:1.35rem 0 1.1rem !important;
    }

    .ca-brand-script{
        font-size:clamp(2.25rem, 9.5vw, 2.85rem);
    }

    .ca-hero-subtitle{
        font-size:.98rem;
        margin-bottom:2rem !important;
    }

    .ca-hero-media{
        height:min(46vh, 320px);
        min-height:240px;
    }

    .ca-hero-media-frame{
        border-radius:20px;
    }

}

/* ==========================================================
   SPRINT 2.0 — SITE OFICIAL / EXPERIENCE REDESIGN
========================================================== */

.ca-section-eyebrow{
    margin:0 0 .65rem;
    font-family:var(--font-family);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--pink-deep);
}

.ca-hero-title--site{
    display:block !important;
    font-family:var(--font-display) !important;
    font-size:clamp(2rem, 4vw, 3.1rem) !important;
    font-weight:600 !important;
    text-transform:none !important;
    letter-spacing:-0.015em !important;
    line-height:1.15 !important;
    color:var(--secondary) !important;
    margin:1.25rem 0 1.1rem !important;
}

.ca-hero--site .ca-hero-subtitle{
    max-width:420px;
}

.ca-hero--site .ca-pill-icon{
    display:none !important;
}

/* Como funciona */
.ca-how{
    background:var(--surface);
    padding:4.5rem 0 !important;
}

.ca-how-header,
.ca-paths-header,
.ca-why-header{
    text-align:center;
    margin-bottom:2.75rem;
}

.ca-paths--invite .ca-paths-header{
    margin-bottom:0;
    max-width:36rem;
    margin-left:auto;
    margin-right:auto;
}

.ca-paths-lead{
    margin:1rem auto 1.75rem;
    max-width:28rem;
    color:rgba(74,44,42,.72);
    font-size:1.05rem;
    line-height:1.5;
}

.ca-paths--invite .ca-path-cta{
    display:inline-flex;
    width:auto;
    min-width:200px;
}

.ca-how-title,
.ca-paths-title,
.ca-why-title,
.ca-instagram-title,
.ca-contato-title{
    font-family:var(--font-display);
    font-size:clamp(1.85rem, 3.5vw, 2.75rem);
    font-weight:600;
    color:var(--secondary);
    margin:0;
    line-height:1.15;
}

.ca-how-grid{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.5rem;
}

.ca-how-step{
    text-align:center;
    padding:1.5rem 1rem;
}

.ca-how-num{
    display:block;
    font-family:var(--font-display);
    font-size:1.75rem;
    font-weight:600;
    color:var(--pink);
    margin-bottom:.75rem;
    letter-spacing:.04em;
}

.ca-how-step h3{
    font-family:var(--font-family);
    font-size:1rem;
    font-weight:600;
    color:var(--secondary);
    margin:0 0 .4rem;
}

.ca-how-step p{
    margin:0;
    font-size:.9rem;
    color:rgba(46, 46, 46, .65);
    line-height:1.5;
}

/* Escolha seu pedido — dois cards */
.ca-paths{
    background:var(--background);
    padding:4.5rem 0 5rem !important;
}

.ca-paths-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1.75rem;
}

.ca-path-card{
    display:flex;
    flex-direction:column;
    background:#FFF;
    border-radius:28px;
    overflow:hidden;
    border:1px solid rgba(93, 58, 41, .08);
    box-shadow:0 16px 40px rgba(93, 58, 41, .08);
}

.ca-path-media{
    aspect-ratio:4 / 5;
    max-height:420px;
    overflow:hidden;
    background:var(--pink-soft);
}

.ca-path-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.ca-path-body{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:1.6rem 1.5rem 1.6rem;
    text-align:left;
}

.ca-path-body h3{
    font-family:var(--font-display);
    font-size:clamp(1.45rem, 2.5vw, 1.85rem);
    font-weight:600;
    color:var(--secondary);
    margin:0 0 .65rem;
    line-height:1.2;
}

.ca-path-price{
    margin:0 0 .35rem !important;
    font-family:var(--font-family);
    font-size:1.55rem;
    font-weight:700;
    color:var(--secondary);
    line-height:1;
}

.ca-path-price span{
    font-size:.85rem;
    font-weight:500;
    color:rgba(74, 44, 42, .55);
}

.ca-path-meta{
    margin:0 0 .75rem !important;
    font-size:.8rem;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--pink-deep);
}

.ca-path-text{
    margin:0 0 1.35rem !important;
    font-size:.95rem;
    color:rgba(46, 46, 46, .68);
    line-height:1.55;
}

.ca-path-cta{
    margin-top:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:52px;
    padding:0 1.5rem;
    border:none;
    border-radius:999px;
    font-family:var(--font-family);
    font-size:.95rem;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
    color:#FFF;
    background:var(--primary);
    box-shadow:0 12px 28px rgba(93, 58, 41, .18);
    transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}

.ca-path-cta:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
    color:#FFF;
}

.ca-path-cta:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
}

.ca-path-cta--outline{
    background:transparent;
    color:var(--secondary);
    border:1.5px solid rgba(74, 44, 42, .28);
    box-shadow:none;
}

.ca-path-cta--outline:hover{
    background:rgba(255, 255, 255, .7);
    color:var(--secondary);
    border-color:rgba(74, 44, 42, .45);
    box-shadow:none;
}

/* Por que Caramela */
.ca-why{
    background:#FFF;
    padding:4.5rem 0 !important;
}

.ca-why-grid{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2rem;
}

.ca-why-item{
    text-align:center;
    padding:1rem .5rem;
}

.ca-why-item h3{
    font-family:var(--font-display);
    font-size:1.45rem;
    font-weight:600;
    color:var(--secondary);
    margin:0 0 .55rem;
}

.ca-why-item p{
    margin:0;
    font-size:.95rem;
    color:rgba(46, 46, 46, .68);
    line-height:1.6;
    max-width:280px;
    margin-inline:auto;
}

/* Instagram */
.ca-instagram{
    background:var(--background);
    padding:4rem 0 !important;
}

.ca-instagram-banner{
    text-align:center;
    padding:3rem 1.5rem;
    border-radius:28px;
    background:linear-gradient(165deg, #FFF 0%, var(--pink-soft) 100%);
    border:1px solid rgba(214, 142, 142, .25);
}

.ca-instagram-copy p{
    margin:.75rem auto 1.5rem;
    max-width:360px;
    color:rgba(46, 46, 46, .68);
}

.ca-instagram-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 1.75rem;
    border-radius:999px;
    font-weight:600;
    color:#FFF;
    background:var(--primary);
    text-decoration:none;
    transition:background .3s ease, transform .3s ease;
}

.ca-instagram-cta:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
    color:#FFF;
}

/* Contato */
.ca-contato,
.ca-footer-cta.ca-contato{
    background:var(--secondary) !important;
    padding:4.5rem 0 !important;
}

.ca-footer-cta.ca-contato .ca-wave{
    display:none !important;
}

.ca-contato-banner{
    text-align:center;
    color:#FFF;
    display:block !important;
    grid-template-columns:unset !important;
}

.ca-contato-title{
    color:#FFF !important;
    margin-bottom:.75rem;
}

.ca-contato-banner > p{
    margin:0 auto 1.75rem;
    max-width:400px;
    color:rgba(255, 255, 255, .78);
}

.ca-contato-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.85rem;
    justify-content:center;
}

.ca-contato .ca-path-cta--outline{
    color:#FFF;
    border-color:rgba(255, 255, 255, .45);
}

.ca-contato .ca-path-cta--outline:hover{
    background:rgba(255, 255, 255, .12);
    color:#FFF;
    border-color:#FFF;
}

.ca-contato .ca-path-cta:not(.ca-path-cta--outline){
    background:#FFF;
    color:var(--primary);
    box-shadow:none;
}

.ca-contato .ca-path-cta:not(.ca-path-cta--outline):hover{
    background:#F6F6F6;
    color:var(--primary);
}

/* Footer nav links */
.ca-footer-links a{
    color:rgba(255, 255, 255, .75);
    text-decoration:none;
    font-size:.9rem;
}

.ca-footer-links a:hover{
    color:#FFF;
}

@media (max-width:900px){

    .ca-how-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:1rem;
    }

    .ca-paths-grid{
        grid-template-columns:1fr;
        max-width:440px;
        margin:0 auto;
    }

    .ca-path-media{
        max-height:360px;
        aspect-ratio:1;
    }

    .ca-why-grid{
        grid-template-columns:1fr;
        gap:1.75rem;
    }

    .ca-contato-actions{
        flex-direction:column;
        align-items:stretch;
        max-width:360px;
        margin:0 auto;
    }

    .ca-hero-actions .ca-pill,
    .ca-path-cta{
        width:100%;
    }

}

@media (max-width:600px){

    .ca-how{
        padding:3.25rem 0 !important;
    }

    .ca-how-grid{
        grid-template-columns:1fr;
    }

    .ca-paths{
        padding:3.25rem 0 3.5rem !important;
    }

    .ca-path-body{
        padding:1.35rem 1.25rem 1.35rem;
    }

}