/* Home: proporções, cores e formas do arquivo Charlots Home.dc.html. */
.hero-shell {
    position:relative;
    padding:clamp(12px,2vw,22px) clamp(12px,4vw,44px) 0
}

.hero {
    position:relative;
    max-width:1440px;
    margin:auto;
    border-radius:clamp(24px,3vw,40px);
    overflow:hidden;
    height:clamp(480px,74vh,720px);
    background:#e9e7e3
}

.hero-track {
    position:absolute;
    inset:0;
    display:flex;
    transition:transform .8s cubic-bezier(.65,0,.2,1)
}

.hero-slide {
    position:relative;
    flex:0 0 100%;
    overflow:hidden
}

.hero-slide>img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover
}

.hero-shade {
    position:absolute;
    inset:0;
    background:linear-gradient(100deg,#141414db 0%,#14141494 42%,#1414141f 78%)
}

.hero-content {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    padding:clamp(24px,5vw,72px)
}

.hero-copy {
    max-width:660px;
    display:flex;
    flex-direction:column;
    gap:20px;
    align-items:flex-start;
    color:#fff
}

.hero-copy h1,.hero-copy h2 {
    font-size:clamp(36px,6vw,74px);
    line-height:1.02;
    letter-spacing:-.03em;
    text-wrap:balance
}

.hero-copy p {
    max-width:460px;
    font-size:clamp(15px,1.5vw,18px);
    line-height:1.6;
    color:#ffffffdb
}

.hero-tag {
    padding:8px 16px;
    border-radius:999px;
    background:#ffffff29;
    backdrop-filter:blur(6px);
    font-size:12px;
    letter-spacing:.1em;
    text-transform:uppercase;
    font-weight:600
}

.hero-controls {
    position:absolute;
    right:clamp(16px,3vw,36px);
    bottom:clamp(16px,3vw,32px);
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px;
    border-radius:999px;
    background:#fff3;
    backdrop-filter:blur(10px);
    color:#fff
}

.hero-controls span {
    min-width:44px;
    text-align:center;
    font-family:var(--font-heading);
    font-size:13px;
    font-weight:600
}

.hero-dots {
    position:absolute;
    left:clamp(24px,5vw,72px);
    bottom:clamp(20px,3vw,34px);
    display:flex;
    gap:8px
}

.hero-dots button {
    height:24px;
    width:14px;
    padding:0;
    border:0;
    background:transparent;
    position:relative
}

.hero-dots button::after {
    content:'';
    display:block;
    height:5px;
    background:#ffffff73;
    border-radius:999px
}

.hero-dots button[aria-pressed=true] {
    width:40px
}

.hero-dots button[aria-pressed=true]::after {
    background:#fff
}

.marquee-shell {
    padding:clamp(20px,3vw,34px) clamp(12px,4vw,44px) 0
}

.marquee {
    max-width:1440px;
    margin:auto;
    border-radius:999px;
    background:linear-gradient(90deg,#1f1f1f,#3d3d3d 55%,#222);
    color:#f6f5f3;
    overflow:hidden;
    padding:14px 0
}

.marquee>div {
    display:flex;
    width:max-content;
    animation:charlots-marquee 38s linear infinite;
    font-family:var(--font-heading);
    font-size:13px;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:600
}

.marquee span {
    padding-right:40px
}

.marquee:hover>div {
    animation-play-state:paused
}

@keyframes charlots-marquee {
    to {
        transform:translateX(-50%)
    }

}

.line-card {
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:200px 200px 28px 28px;
    overflow:hidden;
    box-shadow:0 2px 10px #1f1f1f0d
}

.line-card:nth-child(even) {
    border-radius:28px 28px 200px 200px
}

.line-card:nth-child(even) .line-photo {
    order:2
}

.line-card:hover,.product-card:hover {
    box-shadow:0 18px 40px #1f1f1f21
}

.line-photo {
    position:relative;
    aspect-ratio:4/5;
    background:linear-gradient(160deg,#efeeeb,#dedbd6)
}

.line-photo img {
    width:100%;
    height:100%;
    object-fit:cover
}

.line-copy {
    padding:22px 24px 26px;
    display:flex;
    flex-direction:column;
    gap:10px
}

.line-copy h3 {
    font-size:24px
}

.line-copy p {
    font-size:14px;
    color:var(--color-muted);
    line-height:1.6
}

.line-copy .text-link {
    margin-top:4px
}

.benefits {
    max-width:1440px;
    margin:auto;
    background:linear-gradient(135deg,#fff,#efeeea 55%,#e6e3de);
    padding:clamp(28px,4vw,52px);
    border-radius:clamp(24px,3vw,36px);
    gap:clamp(20px,2.5vw,34px)
}

.benefit-icon {
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(140deg,#1f1f1f,#4a4a4a);
    color:#fff;
    font-size:22px
}

.benefits h3 {
    font-size:19px;
    letter-spacing:-.01em
}

.benefits p {
    font-size:14px;
    color:#5f5f5f;
    line-height:1.6
}

.product-card {
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:26px;
    overflow:hidden;
    box-shadow:0 2px 10px #1f1f1f0d
}

.product-photo {
    position:relative;
    aspect-ratio:1;
    margin:12px;
    border-radius:20px;
    overflow:hidden;
    background:linear-gradient(150deg,#f3f2ef,#e2dfda)
}

.product-photo img {
    width:100%;
    height:100%;
    object-fit:cover
}

.product-tag {
    position:absolute;
    top:12px;
    left:12px;
    padding:6px 12px;
    border-radius:999px;
    background:#ffffffe6;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:700
}

.product-copy {
    padding:6px 20px 22px;
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1
}

.product-copy h3 {
    font-size:20px
}

.product-copy p {
    font-size:13px;
    color:var(--color-muted)
}

.product-copy .text-link {
    margin-top:auto;
    padding-top:12px
}

.about-grid {
    max-width:1440px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(28px,4vw,64px);
    align-items:center
}

.about-photo {
    aspect-ratio:5/4;
    min-height:280px;
    border-radius:52% 48% 46% 54% / 48% 52% 46% 54%;
    overflow:hidden;
    background:#e9e7e3
}

.about-photo img {
    width:100%;
    height:100%;
    object-fit:cover
}

.about-grid h2 {
    font-size:clamp(28px,3.6vw,46px);
    line-height:1.06;
    letter-spacing:-.03em
}

.about-grid p {
    max-width:540px;
    font-size:16px;
    line-height:1.7;
    color:#5f5f5f
}

.about-stats {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
    gap:12px;
    margin-top:4px
}

.about-stats>div {
    background:#fff;
    border-radius:20px;
    padding:18px 20px
}

.about-stats strong {
    font-family:var(--font-heading);
    font-size:34px;
    font-weight:600;
    line-height:1;
    letter-spacing:-.03em
}

.about-stats span {
    display:block;
    margin-top:6px;
    font-size:12px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#5f5f5f
}

.review {
    background:linear-gradient(150deg,#fff,#f1f0ec);
    border-radius:26px 26px 26px 60px;
    padding:28px 26px;
    display:flex;
    flex-direction:column;
    gap:14px
}

.review:nth-child(2) {
    border-radius:26px 26px 60px 26px
}

.review:nth-child(3) {
    border-radius:60px 26px 26px 26px
}

.review blockquote {
    margin:0;
    font-family:var(--font-heading);
    font-size:19px;
    line-height:1.45;
    letter-spacing:-.01em
}

.review figcaption {
    font-size:13px;
    color:var(--color-muted)
}

.stores-cta {
    padding-block:var(--space-section)
}

.stores-panel {
    max-width:1440px;
    margin:auto;
    padding:clamp(32px,5vw,72px);
    border-radius:clamp(28px,3.5vw,44px);
    background:radial-gradient(ellipse at 90% 20%,#ffffff14,transparent 55%),linear-gradient(125deg,#1a1a1a,#333 48%,#1f1f1f);
    color:#f6f5f3;
    gap:clamp(28px,4vw,56px);
    align-items:center
}

.stores-panel .eyebrow {
    color:#f6f5f3b3
}

.stores-panel h2 {
    font-size:clamp(28px,3.8vw,48px);
    line-height:1.06;
    letter-spacing:-.03em
}

.stores-panel p {
    max-width:500px;
    font-size:16px;
    line-height:1.7;
    color:#f6f5f3d1
}

.store-feature {
    background:#f6f5f314;
    border-radius:22px;
    padding:20px 22px;
    display:flex;
    align-items:center;
    gap:16px
}

.store-feature:hover {
    background:#ffffff24
}

.store-feature>i {
    font-size:26px
}

.store-feature h3 {
    font-size:17px;
    letter-spacing:0
}

.store-feature p {
    font-size:13px;
    color:#f6f5f3b8
}

.page-internal .about-section {
    padding-bottom:var(--space-section)
}

@media(max-width:899px) {
    .about-grid {
        grid-template-columns:1fr
    }

    .about-photo {
        max-width:650px;
        width:100%;
        margin:auto
    }

    .hero-content {
        padding-bottom:100px
    }

}

@media(max-width:619px) {
    .hero {
        height:650px;
        max-height:none
    }

    .hero-copy {
        gap:18px
    }

    .hero-copy h1,.hero-copy h2 {
        font-size:40px
    }

    .hero-copy p {
        font-size:15px
    }

    .hero-controls {
        bottom:18px;
        right:16px;
        gap:4px
    }

    .hero-controls .icon-btn {
        width:36px;
        height:36px
    }

    .hero-dots {
        left:24px;
        bottom:31px
    }

    .hero-copy .btn {
        padding:15px 21px;
        font-size:14px
    }

    .line-card,.line-card:nth-child(even) {
        max-width:460px;
        width:100%;
        margin:auto
    }

}

@media(max-width:359px) {
    .hero-dots {
        display:none
    }

    .hero-copy h1,.hero-copy h2 {
        font-size:34px
    }

}