.elementor-583 .elementor-element.elementor-element-1de5ef5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:0;}.elementor-583 .elementor-element.elementor-element-8795d25 .elementor-repeater-item-b2700e5 .swiper-slide-bg{background-color:var( --e-global-color-41a2b96 );background-image:url(https://kosmetall.com/wp-content/uploads/2026/02/Banners-2.webp);background-size:cover;}.elementor-583 .elementor-element.elementor-element-8795d25 .elementor-repeater-item-9877b76 .swiper-slide-bg{background-color:var( --e-global-color-41a2b96 );background-image:url(https://kosmetall.com/wp-content/uploads/2026/02/Banner-1.webp);background-size:cover;}.elementor-583 .elementor-element.elementor-element-8795d25 .elementor-repeater-item-d7c6e84 .swiper-slide-bg{background-color:var( --e-global-color-41a2b96 );background-image:url(https://kosmetall.com/wp-content/uploads/2026/02/Banner-2.webp);background-size:cover;}.elementor-583 .elementor-element.elementor-element-8795d25 .elementor-repeater-item-80d80fb .swiper-slide-bg{background-color:var( --e-global-color-41a2b96 );background-image:url(https://kosmetall.com/wp-content/uploads/2026/02/Banner-3.webp);background-size:cover;}.elementor-583 .elementor-element.elementor-element-8795d25 .elementor-repeater-item-385630d .swiper-slide-bg{background-color:var( --e-global-color-41a2b96 );background-image:url(https://kosmetall.com/wp-content/uploads/2026/02/Banner-5.webp);background-size:cover;}.elementor-583 .elementor-element.elementor-element-8795d25 .elementor-repeater-item-8657d44 .swiper-slide-bg{background-color:var( --e-global-color-41a2b96 );background-image:url(https://kosmetall.com/wp-content/uploads/2026/02/Banners-1.webp);background-size:cover;}.elementor-583 .elementor-element.elementor-element-8795d25 .elementor-repeater-item-b1d50a9 .swiper-slide-bg{background-color:var( --e-global-color-41a2b96 );background-image:url(https://kosmetall.com/wp-content/uploads/2026/02/Banners-4.webp);background-size:cover;}.elementor-583 .elementor-element.elementor-element-8795d25 .elementor-repeater-item-eff49a6 .swiper-slide-bg{background-color:var( --e-global-color-41a2b96 );background-image:url(https://kosmetall.com/wp-content/uploads/2026/02/Banners-7.webp);background-size:cover;}.elementor-583 .elementor-element.elementor-element-8795d25 .elementor-repeater-item-78e047c .swiper-slide-bg{background-color:var( --e-global-color-41a2b96 );background-image:url(https://kosmetall.com/wp-content/uploads/2026/02/Banners-8.webp);background-size:cover;}.elementor-583 .elementor-element.elementor-element-8795d25 .elementor-repeater-item-e0cf900 .swiper-slide-bg{background-color:var( --e-global-color-41a2b96 );background-image:url(https://kosmetall.com/wp-content/uploads/2026/02/Banners-10.webp);background-size:cover;}.elementor-583 .elementor-element.elementor-element-8795d25 .swiper-slide{transition-duration:calc(5000ms*1.2);height:400px;}.elementor-583 .elementor-element.elementor-element-8795d25{z-index:0;}.elementor-583 .elementor-element.elementor-element-8795d25 .swiper-slide-inner{text-align:center;}.elementor-583 .elementor-element.elementor-element-8795d25 .swiper-pagination-bullet{height:12px;width:12px;}.elementor-583 .elementor-element.elementor-element-8795d25 .swiper-horizontal .swiper-pagination-progressbar{height:12px;}.elementor-583 .elementor-element.elementor-element-8795d25 .swiper-pagination-fraction{font-size:12px;}.elementor-583 .elementor-element.elementor-element-8795d25 .swiper-pagination-bullet:not(.swiper-pagination-bullet-active){background-color:var( --e-global-color-primary );opacity:var( --e-global-color-primary );}.elementor-583 .elementor-element.elementor-element-8795d25 .swiper-pagination-bullet-active{background-color:var( --e-global-color-accent );}.elementor-583 .elementor-element.elementor-element-42963c7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-583 .elementor-element.elementor-element-76898eb > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-583 .elementor-element.elementor-element-3c67488{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-583 .elementor-element.elementor-element-0bbbeab{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-583 .elementor-element.elementor-element-99f606e{text-align:end;}.elementor-583 .elementor-element.elementor-element-99f606e .elementor-heading-title{font-family:"Montserrat", Jost, Sans-serif;font-size:24px;font-weight:600;text-transform:capitalize;font-style:normal;letter-spacing:1px;color:var( --e-global-color-primary );}.elementor-583 .elementor-element.elementor-element-3d9058c{--swiper-slides-to-display:4;--swiper-slides-gap:10px;--arrow-prev-left-align:0%;--arrow-prev-translate-x:0px;--arrow-prev-left-position:0px;--arrow-prev-top-align:50%;--arrow-prev-translate-y:-50%;--arrow-prev-top-position:0px;--arrow-next-right-align:0%;--arrow-next-translate-x:0%;--arrow-next-right-position:0px;--arrow-next-top-align:50%;--arrow-next-translate-y:-50%;--arrow-next-top-position:0px;--swiper-pagination-size:11px;--dots-normal-color:var( --e-global-color-41a2b96 );--swiper-pagination-spacing:5px;}.elementor-583 .elementor-element.elementor-element-3d9058c .swiper-slide > .elementor-element{height:100%;}.elementor-583 .elementor-element.elementor-element-f633403{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-583 .elementor-element.elementor-element-942b1d0 img{border-radius:15px 15px 15px 15px;}.elementor-583 .elementor-element.elementor-element-b1b3fa1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-583 .elementor-element.elementor-element-3860e42 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-583 .elementor-element.elementor-element-50e26c3{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-583 .elementor-element.elementor-element-1a73f7f{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--margin-top:50px;--margin-bottom:50px;--margin-left:50px;--margin-right:50px;}.elementor-583 .elementor-element.elementor-element-a1ee3bb .elementor-button{background-color:var( --e-global-color-b01d8d8 );font-family:"Montserrat", Jost, Sans-serif;font-size:24px;font-weight:600;text-transform:capitalize;font-style:normal;letter-spacing:1px;fill:var( --e-global-color-text );color:var( --e-global-color-text );border-style:solid;border-width:0px 0px 02px 0px;border-color:var( --e-global-color-text );border-radius:0px 0px 5px 5px;padding:0px 0px 2px 0px;}.elementor-583 .elementor-element.elementor-element-a1ee3bb > .elementor-widget-container{border-style:none;border-radius:0px 0px 0px 0px;}.elementor-583 .elementor-element.elementor-element-a1ee3bb:hover > .elementor-widget-container{border-radius:0px 0px 0px 0px;}.elementor-583 .elementor-element.elementor-element-6e58515{text-align:end;}.elementor-583 .elementor-element.elementor-element-6e58515 .elementor-heading-title{font-family:var( --e-global-typography-451d43b-font-family ), Jost, Sans-serif;font-size:var( --e-global-typography-451d43b-font-size );font-weight:var( --e-global-typography-451d43b-font-weight );text-transform:var( --e-global-typography-451d43b-text-transform );font-style:var( --e-global-typography-451d43b-font-style );line-height:var( --e-global-typography-451d43b-line-height );color:var( --e-global-color-primary );}.elementor-583 .elementor-element.elementor-element-1ed48bf{--swiper-slides-to-display:5;--swiper-slides-gap:10px;--arrow-prev-left-align:0%;--arrow-prev-translate-x:0px;--arrow-prev-left-position:0px;--arrow-prev-top-align:50%;--arrow-prev-translate-y:-50%;--arrow-prev-top-position:0px;--arrow-next-right-align:0%;--arrow-next-translate-x:0%;--arrow-next-right-position:0px;--arrow-next-top-align:50%;--arrow-next-translate-y:-50%;--arrow-next-top-position:0px;--swiper-pagination-size:11px;--dots-normal-color:var( --e-global-color-41a2b96 );--swiper-pagination-spacing:5px;}.elementor-583 .elementor-element.elementor-element-1ed48bf .swiper-slide > .elementor-element{height:100%;}.elementor-583 .elementor-element.elementor-element-362cc48{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-583 .elementor-element.elementor-element-7580a5b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-583 .elementor-element.elementor-element-6be1ea8 img{border-radius:15px 15px 15px 15px;}.elementor-583 .elementor-element.elementor-element-ba2671f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-583 .elementor-element.elementor-element-046c98b img{border-radius:15px 15px 15px 15px;}.elementor-583 .elementor-element.elementor-element-18f2b86{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:20px 20px 20px 20px;--margin-top:0px;--margin-bottom:0px;--margin-left:20px;--margin-right:20px;}.elementor-583 .elementor-element.elementor-element-18f2b86:not(.elementor-motion-effects-element-type-background), .elementor-583 .elementor-element.elementor-element-18f2b86 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-583 .elementor-element.elementor-element-3ba987d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-583 .elementor-element.elementor-element-3ba987d.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-583 .elementor-element.elementor-element-c88b027{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-583 .elementor-element.elementor-element-c88b027.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-583 .elementor-element.elementor-element-903440e .elementor-icon-box-wrapper{text-align:start;gap:15px;}.elementor-583 .elementor-element.elementor-element-903440e.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-583 .elementor-element.elementor-element-903440e.elementor-view-framed .elementor-icon, .elementor-583 .elementor-element.elementor-element-903440e.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-583 .elementor-element.elementor-element-903440e .elementor-icon-box-title, .elementor-583 .elementor-element.elementor-element-903440e .elementor-icon-box-title a{font-family:"Jost", Jost, Sans-serif;font-size:23px;font-weight:500;}.elementor-583 .elementor-element.elementor-element-903440e .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-583 .elementor-element.elementor-element-903440e .elementor-icon-box-description{font-family:var( --e-global-typography-secondary-font-family ), Jost, Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );font-style:var( --e-global-typography-secondary-font-style );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );color:var( --e-global-color-b01d8d8 );}.elementor-583 .elementor-element.elementor-element-18d0bd3{--swiper-slides-to-display:3;--swiper-slides-gap:10px;--arrow-prev-left-align:0%;--arrow-prev-translate-x:0px;--arrow-prev-left-position:0px;--arrow-prev-top-align:50%;--arrow-prev-translate-y:-50%;--arrow-prev-top-position:0px;--arrow-next-right-align:0%;--arrow-next-translate-x:0%;--arrow-next-right-position:0px;--arrow-next-top-align:50%;--arrow-next-translate-y:-50%;--arrow-next-top-position:0px;--swiper-pagination-size:11px;--dots-normal-color:var( --e-global-color-41a2b96 );--swiper-pagination-spacing:5px;}.elementor-583 .elementor-element.elementor-element-18d0bd3 .swiper-slide > .elementor-element{height:100%;}.elementor-583 .elementor-element.elementor-element-82db61c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-583 .elementor-element.elementor-element-caf8add > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-583 .elementor-element.elementor-element-1de5ef5{--width:100%;}.elementor-583 .elementor-element.elementor-element-7580a5b{--width:50%;}.elementor-583 .elementor-element.elementor-element-ba2671f{--width:50%;}.elementor-583 .elementor-element.elementor-element-3ba987d{--width:88.474%;}.elementor-583 .elementor-element.elementor-element-c88b027{--width:19.112%;}}@media(max-width:1024px){.elementor-583 .elementor-element.elementor-element-99f606e .elementor-heading-title{font-size:22px;line-height:1.3em;letter-spacing:0.8px;}.elementor-583 .elementor-element.elementor-element-3d9058c{--swiper-slides-to-display:2;}.elementor-583 .elementor-element.elementor-element-a1ee3bb .elementor-button{font-size:22px;line-height:1.3em;letter-spacing:0.8px;}.elementor-583 .elementor-element.elementor-element-6e58515 .elementor-heading-title{font-size:var( --e-global-typography-451d43b-font-size );line-height:var( --e-global-typography-451d43b-line-height );}.elementor-583 .elementor-element.elementor-element-1ed48bf{--swiper-slides-to-display:3;}.elementor-583 .elementor-element.elementor-element-903440e .elementor-icon-box-description{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-583 .elementor-element.elementor-element-18d0bd3{--swiper-slides-to-display:2;}}@media(max-width:767px){.elementor-583 .elementor-element.elementor-element-99f606e .elementor-heading-title{font-size:20px;line-height:1.4em;letter-spacing:0.5px;}.elementor-583 .elementor-element.elementor-element-3d9058c{--swiper-slides-to-display:1;}.elementor-583 .elementor-element.elementor-element-a1ee3bb .elementor-button{font-size:20px;line-height:1.4em;letter-spacing:0.5px;}.elementor-583 .elementor-element.elementor-element-6e58515 .elementor-heading-title{font-size:var( --e-global-typography-451d43b-font-size );line-height:var( --e-global-typography-451d43b-line-height );}.elementor-583 .elementor-element.elementor-element-1ed48bf{--swiper-slides-to-display:1;}.elementor-583 .elementor-element.elementor-element-903440e .elementor-icon-box-description{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-583 .elementor-element.elementor-element-18d0bd3{--swiper-slides-to-display:1;}}/* Start custom CSS for html, class: .elementor-element-76898eb *//* ==========================================================================
   KOSMETALL INFINITY ENGINE v6.0 (MOBILE PERFECTION)
   Design: "Liquid Glass"
   Physics: Desktop = Infinite Loop | Mobile = Native Snap Scroll
   ========================================================================== */

/* --- 0. VARIÁVEIS DO SISTEMA --- */
.kt-infinity-system {
    --card-width-mob: 165px; /* Ligeiramente menor para ver o próximo card (encoraja scroll) */
    --card-width-dt: 240px;
    --gap: 15px;
    
    /* Fontes */
    --f-title: 'Montserrat', sans-serif;
    --f-body: 'Poppins', sans-serif;
    --f-hand: 'Marko One', cursive;

    /* Cores Nucleares */
    --k-midnight: #0A0E14;
    --k-white: #FFFFFF;
    --k-peony: #D473A5;
    --k-sapphire: #0F52BA;
    --k-gold: #D4AF37;

    /* Velocidade do Loop Desktop */
    --scroll-speed: 45s; 
}

/* --- 1. ESTRUTURA E FUNDO --- */
.kt-infinity-system {
    position: relative;
    padding: 30px 0 50px 0;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, #FFFFFF 0%, #FDF8F9 100%);
    font-family: var(--f-body);
}

/* --- 2. HEADER --- */
.kt-infinity-header {
    max-width: 1200px;
    margin: 0 auto 25px auto;
    padding: 0 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.kt-badge-pulse {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--k-gold);
    background: rgba(212, 175, 55, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.dot {
    width: 6px;
    height: 6px;
    background: var(--k-gold);
    border-radius: 50%;
    animation: blink 2s infinite;
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.kt-main-title {
    font-family: var(--f-title);
    font-size: 22px;
    font-weight: 700;
    color: var(--k-midnight);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.kt-gradient-text {
    background: linear-gradient(120deg, var(--k-peony), var(--k-sapphire));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Dica de Swipe (Mobile) */
.kt-swipe-hint {
    display: none; /* Desktop hide */
}

@media (max-width: 768px) {
    .kt-swipe-hint {
        display: flex;
        font-size: 10px;
        text-transform: uppercase;
        color: var(--k-midnight);
        opacity: 0.6;
        flex-direction: column;
        align-items: center;
        margin-bottom: 5px;
    }
    .kt-line-anim {
        width: 40px;
        height: 2px;
        background: rgba(0,0,0,0.1);
        margin-top: 4px;
        position: relative;
        overflow: hidden;
        border-radius: 2px;
    }
    .kt-line-anim::after {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--k-peony);
        transform: translateX(-100%);
        animation: swipeRight 2s infinite;
    }
}

/* --- 3. O MOTOR HÍBRIDO (A CORREÇÃO CRUCIAL) --- */

.kt-marquee-wrapper {
    display: flex;
    width: 100%;
}

.kt-marquee-track {
    display: flex;
    gap: var(--gap);
}

/* =========================================
   COMPORTAMENTO DESKTOP (LOOP INFINITO)
   ========================================= */
@media (min-width: 1024px) {
    .kt-marquee-wrapper {
        overflow: hidden; /* Esconde barra de scroll */
        mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    }

    .kt-marquee-track {
        width: max-content;
        /* Animação só no Desktop */
        animation: infinityScroll var(--scroll-speed) linear infinite; 
    }

    .kt-marquee-wrapper:hover .kt-marquee-track {
        animation-play-state: paused;
    }
}

@keyframes infinityScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - (var(--gap) / 2))); }
}

/* =========================================
   COMPORTAMENTO MOBILE (SCROLL NATIVO)
   ========================================= */
@media (max-width: 1023px) {
    .kt-marquee-wrapper {
        overflow-x: auto; /* Permite scroll real */
        scroll-snap-type: x mandatory; /* Efeito magnético */
        -webkit-overflow-scrolling: touch; /* Física iOS */
        padding-bottom: 20px; /* Espaço para sombra não cortar */
        
        /* Esconder Scrollbar mas manter funcionalidade */
        scrollbar-width: none; /* Firefox */
        padding-left: 20px; /* Padding inicial */
        padding-right: 20px;
    }
    
    .kt-marquee-wrapper::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .kt-marquee-track {
        animation: none !important; /* DESLIGA animação automática */
        width: auto;
    }

    /* Ajuste para o segundo grupo não ser redundante no mobile se não quiser loop */
    /* Mas mantemos para dar a sensação de lista longa */
}

.kt-card-group {
    display: flex;
    gap: var(--gap);
}


/* --- 4. O CARD "FLUX" --- */
.kt-flux-card {
    flex: 0 0 auto;
    width: var(--card-width-mob);
    height: 230px;
    position: relative;
    border-radius: 20px;
    text-decoration: none !important;
    overflow: hidden;
    background: #FFF;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.04);
    
    /* Scroll Snap para Mobile */
    scroll-snap-align: start;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (min-width: 768px) {
    .kt-flux-card {
        width: var(--card-width-dt);
        height: 280px;
        border-radius: 24px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    }
}

/* Vidro de Fundo */
.kt-flux-glass {
    position: absolute;
    inset: 0;
    background: var(--theme-grad);
    opacity: 0.08;
    transition: opacity 0.4s ease;
}

/* Efeito Hover Desktop */
.kt-flux-card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.9), transparent 60%);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.5s ease;
    z-index: 1;
}

/* Conteúdo */
.kt-flux-content {
    z-index: 2;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Ícone */
.kt-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--theme-color);
    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Texto */
.kt-info-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kt-sub {
    font-family: var(--f-hand);
    font-size: 11px;
    color: #999;
}

.kt-name {
    font-family: var(--f-title);
    font-size: 16px;
    font-weight: 700;
    color: var(--k-midnight);
    margin: 0;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .kt-icon-box { width: 64px; height: 64px; font-size: 26px; }
    .kt-name { font-size: 18px; }
    .kt-sub { font-size: 12px; }
}

/* Botão */
.kt-action-btn {
    margin-top: 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--k-white);
    background: var(--theme-color);
    padding: 8px 20px;
    border-radius: 20px;
    
    /* Desktop: Escondido | Mobile: Visível */
    opacity: 1; 
    transform: translateY(0);
    box-shadow: 0 4px 10px var(--theme-shadow);
    transition: all 0.3s ease;
}

@media (min-width: 1024px) {
    .kt-action-btn {
        opacity: 0;
        transform: translateY(15px);
    }
}


/* --- 5. INTERAÇÕES (HOVER) --- */
@media (hover: hover) {
    .kt-flux-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    }
    .kt-flux-card:hover .kt-flux-glass { opacity: 0.25; }
    .kt-flux-card:hover .kt-icon-box {
        transform: scale(1.15) rotate(-8deg);
        background: var(--theme-color);
        color: #FFF;
    }
    .kt-flux-card:hover .kt-action-btn {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 6. TEMAS DE COR (BRANDS) --- */

/* Peony (Cosméticos) */
.theme-peony {
    --theme-color: #D473A5;
    --theme-grad: linear-gradient(135deg, #FAE3EF, #D473A5);
    --theme-shadow: rgba(212, 115, 165, 0.3);
}

/* Gold (Acessórios) */
.theme-gold {
    --theme-color: #D4AF37;
    --theme-grad: linear-gradient(135deg, #FCF5D9, #D4AF37);
    --theme-shadow: rgba(212, 175, 55, 0.3);
}

/* Sapphire (Cabelo) */
.theme-sapphire {
    --theme-color: #0F52BA;
    --theme-grad: linear-gradient(135deg, #DAE6FC, #0F52BA);
    --theme-shadow: rgba(15, 82, 186, 0.3);
}

/* Diamond (Skincare) */
.theme-diamond {
    --theme-color: #20B2AA;
    --theme-grad: linear-gradient(135deg, #E0FFFF, #20B2AA);
    --theme-shadow: rgba(32, 178, 170, 0.3);
}

/* Midnight (Perfumes) */
.theme-midnight {
    --theme-color: #0A0E14;
    --theme-grad: linear-gradient(135deg, #E5E7EB, #0A0E14);
    --theme-shadow: rgba(10, 14, 20, 0.3);
}

/* Rose (Corpo) */
.theme-rose {
    --theme-color: #C71585;
    --theme-grad: linear-gradient(135deg, #FFF0F5, #C71585);
    --theme-shadow: rgba(199, 21, 133, 0.3);
}

/* Glamour (Maquilhagem) */
.theme-glamour {
    --theme-color: #E91E63;
    --theme-grad: linear-gradient(135deg, #FCE4EC, #E91E63);
    --theme-shadow: rgba(233, 30, 99, 0.3);
}

/* Masculine (Homem) */
.theme-masculine {
    --theme-color: #2C3E50;
    --theme-grad: linear-gradient(135deg, #ECF0F1, #2C3E50);
    --theme-shadow: rgba(44, 62, 80, 0.3);
}

/* Gift (Kits) */
.theme-gift {
    --theme-color: #E67E22;
    --theme-grad: linear-gradient(135deg, #FDEBD0, #E67E22);
    --theme-shadow: rgba(230, 126, 34, 0.3);
}

/* Oil (Óleos) */
.theme-oil {
    --theme-color: #B7950B;
    --theme-grad: linear-gradient(135deg, #FEF9E7, #B7950B);
    --theme-shadow: rgba(183, 149, 11, 0.3);
}

/* SOS (Soluções) */
.theme-sos {
    --theme-color: #C0392B;
    --theme-grad: linear-gradient(135deg, #F9EBEA, #C0392B);
    --theme-shadow: rgba(192, 57, 43, 0.3);
}

/* Sale (Outlet) */
.theme-sale {
    --theme-color: #27AE60;
    --theme-grad: linear-gradient(135deg, #EAFAF1, #27AE60);
    --theme-shadow: rgba(39, 174, 96, 0.3);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3860e42 *//* ==========================================================================
   KOSMETALL SMART RITUAL ENGINE
   Style: Interactive App-Like Interface
   ========================================================================== */

.kt-ritual-system {
    padding: 80px 20px;
    background: #FAFAFA; /* Fundo Clean */
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

/* HEADER */
.kt-ritual-header {
    margin-bottom: 40px;
}

.kt-ritual-tag {
    font-family: 'Marko One', cursive;
    color: #D473A5;
    font-size: 14px;
    margin-bottom: 10px;
    display: block;
}

.kt-ritual-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    color: #0A0E14;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.kt-text-gradient {
    background: linear-gradient(120deg, #D473A5, #0F52BA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.kt-ritual-sub {
    color: #666;
    font-size: 15px;
}

/* TABULEIRO DE NAVEGAÇÃO (BOTÕES) */
.kt-ritual-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.kt-tab-btn {
    background: #FFF;
    border: 1px solid #EEE;
    padding: 12px 25px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    display: flex;
    align-items: center;
    gap: 8px;
}

.kt-tab-btn i { font-size: 16px; }

/* Estado Ativo (Selecionado) */
.kt-tab-btn.active {
    background: #0A0E14;
    color: #FFF;
    border-color: #0A0E14;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(10, 14, 20, 0.2);
}

.kt-tab-btn:hover:not(.active) {
    background: #F4F4F6;
    transform: translateY(-2px);
}

/* ÁREA DE EXIBIÇÃO (CARDS) */
.kt-ritual-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    flex-wrap: wrap; /* Para Mobile */
}

/* O Cartão do Passo */
.kt-step-card {
    background: #FFF;
    width: 260px;
    padding: 30px 20px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.03);
    text-align: left;
    transition: transform 0.3s ease;
}

.kt-step-card:hover { transform: translateY(-5px); }

/* Cartão do Meio (Destaque) */
.kt-step-card.main-step {
    border: 1px solid #D4AF37;
    background: #FFFEFA;
    transform: scale(1.05);
    z-index: 2;
}

/* Badge Essencial */
.kt-best-seller-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #D4AF37;
    color: #FFF;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.4);
}

/* Conteúdo Interno */
.kt-step-number {
    font-size: 40px;
    font-weight: 900;
    color: #F0F0F0;
    position: absolute;
    top: 10px; right: 20px;
    line-height: 1;
}

.kt-step-icon {
    width: 50px; height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #FFF;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.theme-peony { background: #D473A5; box-shadow: 0 8px 20px rgba(212, 115, 165, 0.3); }
.theme-gold { background: #D4AF37; box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3); }
.theme-sapphire { background: #0F52BA; box-shadow: 0 8px 20px rgba(15, 82, 186, 0.3); }

.kt-step-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    font-weight: 600;
    letter-spacing: 1px;
}

.kt-step-card h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #0A0E14;
    margin: 5px 0 10px 0;
    font-weight: 700;
}

.kt-step-card p {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Conectores (Setas) */
.kt-connector {
    color: #DDD;
    font-size: 20px;
}

/* BOTÃO FINAL */
.kt-ritual-footer {
    margin-top: 50px;
}

.kt-ritual-cta {
    display: inline-block;
    background: #0A0E14;
    color: #FFF;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(10, 14, 20, 0.2);
}

.kt-ritual-cta:hover {
    background: #D473A5;
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(212, 115, 165, 0.4);
}

/* RESPONSIVIDADE */
@media (max-width: 768px) {
    .kt-ritual-display { flex-direction: column; gap: 30px; }
    .kt-connector { transform: rotate(90deg); }
    .kt-step-card { width: 100%; }
    .kt-step-card.main-step { transform: scale(1); }
    .kt-tab-btn { flex: 1 1 40%; font-size: 12px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-caf8add *//* ==========================================================================
   KOSMETALL MANIFESTO ENGINE
   Style: Professional Trust & High-End Editorial
   ========================================================================== */

/* --- VARIÁVEIS LOCAIS --- */
.kt-manifesto-system {
    --km-gold: #D4AF37;
    --km-sapphire: #0F52BA;
    --km-peony: #D473A5;
    --km-midnight: #0A0E14;
    --km-bg: #F9FAFB;
    
    /* Fontes */
    --f-head: 'Montserrat', sans-serif;
    --f-body: 'Poppins', sans-serif;
    --f-acc: 'Marko One', cursive;
}

/* --- ESTRUTURA --- */
.kt-manifesto-system {
    padding: 80px 20px;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--km-bg) 100%);
    position: relative;
    font-family: var(--f-body);
    overflow: hidden;
}

/* Decorative Background element (Sutil) */
.kt-manifesto-system::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
}

/* --- HEADER --- */
.kt-man-header {
    max-width: 800px;
    margin: 0 auto 60px auto;
    text-align: center;
}

.kt-man-badge {
    display: inline-block;
    font-family: var(--f-acc);
    color: var(--km-sapphire);
    font-size: 13px;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 5px;
}

.kt-man-badge::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 2px;
    background: var(--km-sapphire);
    opacity: 0.3;
}

.kt-man-title {
    font-family: var(--f-head);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    color: var(--km-midnight);
    line-height: 1.15;
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.kt-text-gradient {
    background: linear-gradient(135deg, var(--km-peony), var(--km-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.kt-man-subtitle {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* --- GRID SYSTEM --- */
.kt-man-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .kt-man-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- O CARD "MANIFESTO" --- */
.kt-man-card {
    background: #FFF;
    border-radius: 20px;
    padding: 40px 30px;
    position: relative;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    /* Sombras suaves de luxo */
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

/* Icon Halo (Círculo Brilhante) */
.kt-icon-halo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--theme-soft);
    color: var(--theme-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 25px;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Títulos e Texto */
.kt-card-title {
    font-family: var(--f-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--km-midnight);
    margin: 0 0 15px 0;
}

.kt-card-desc {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    margin: 0 0 25px 0;
    flex-grow: 1; /* Empurra a lista para baixo */
}

.kt-card-desc strong {
    color: var(--theme-main);
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
}

/* Checklist Visual */
.kt-check-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 20px;
}

.kt-check-list span {
    font-size: 13px;
    font-weight: 500;
    color: var(--km-midnight);
    display: flex;
    align-items: center;
    gap: 10px;
}

.kt-check-list i {
    color: var(--theme-main);
    font-size: 12px;
    background: var(--theme-soft);
    padding: 4px;
    border-radius: 50%;
}

/* --- THEMES --- */
.theme-gold { 
    --theme-main: var(--km-gold); 
    --theme-soft: #FCF5D9; 
    border-bottom: 3px solid var(--km-gold);
}
.theme-sapphire { 
    --theme-main: var(--km-sapphire); 
    --theme-soft: #DAE6FC;
    border-bottom: 3px solid var(--km-sapphire);
}
.theme-peony { 
    --theme-main: var(--km-peony); 
    --theme-soft: #FAE3EF;
    border-bottom: 3px solid var(--km-peony);
}

/* --- HOVER EFFECTS --- */
@media (hover: hover) {
    .kt-man-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    }
    
    .kt-man-card:hover .kt-icon-halo {
        transform: scale(1.1) rotate(-5deg);
        background: var(--theme-main);
        color: #FFF;
    }
}


/* --- CTA FOOTER (A Barra Final) --- */
.kt-man-footer {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

.kt-cta-box {
    background: var(--km-midnight);
    padding: 15px 15px 15px 40px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 30px;
    box-shadow: 0 15px 40px rgba(10, 14, 20, 0.2);
    flex-wrap: wrap;
    justify-content: center;
}

.kt-cta-text {
    color: #FFF;
    margin: 0;
    font-family: var(--f-head);
    font-size: 16px;
    font-weight: 600;
}

.kt-cta-button {
    background: var(--km-peony);
    color: #FFF;
    text-decoration: none !important;
    padding: 12px 30px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.kt-cta-button:hover {
    background: #FFF;
    color: var(--km-peony);
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .kt-cta-box {
        padding: 25px;
        flex-direction: column;
        border-radius: 20px;
        text-align: center;
        gap: 15px;
        width: 100%;
    }
    .kt-cta-button { width: 100%; justify-content: center; }
}/* End custom CSS */
/* Start custom CSS *//* ==========================================================================
   UNIVERSAL DESIGN SYSTEM — ROOT 5.1 (KOSMETALL ULTIMATE EDITION)
   Hyper Visual Engine — Marketplace de Beleza, Luxo & Consultoria
   ==========================================================================
   • Base: Root 5.1 Original (Marketplace Edition)
   • Identidade: KosmeTall (Rosa Peônia, Ouro Real, Azul Safira, Midnight)
   • Estrutura: Expansão Máxima (400+ linhas de definições)
   • Cobertura: Cores 50-900, Sombras Físicas/Coloridas, Grid, Motion, Z-Index.
   ========================================================================== */

:root {

  /* ========================================================================== */
  /* 1. PALETA DE CORES — DNA KOSMETALL (PRIMITIVAS)                            */
  /* ========================================================================== */

  /* --- BRAND: PEONY (Principal / Feminilidade Moderna) --- */
  --peony-50:  #FDF2F8;
  --peony-100: #FAE3EF;
  --peony-200: #F3C6DE;
  --peony-300: #E699C1;
  --peony-400: #D473A5; /* [MAIN BRAND COLOR] */
  --peony-500: #BF5A8F;
  --peony-600: #A84C7D;
  --peony-700: #853861;
  --peony-800: #6B264A;
  --peony-900: #4A1731;

  /* --- BRAND: SAPPHIRE (Complementar / Tecnologia / Confiança) --- */
  --sapphire-50:  #F0F5FF;
  --sapphire-100: #DAE6FC;
  --sapphire-200: #B8D0FA;
  --sapphire-300: #8FB5F7;
  --sapphire-400: #4D8AF0;
  --sapphire-500: #0F52BA; /* [SECONDARY BRAND COLOR] */
  --sapphire-600: #0A3F96;
  --sapphire-700: #083680;
  --sapphire-800: #052354;
  --sapphire-900: #03183D;

  /* --- BRAND: GOLD (Luxo / Acento / VIP) --- */
  --gold-50:  #FEFDF5;
  --gold-100: #FCF5D9;
  --gold-200: #F5E6B3;
  --gold-300: #EBD488;
  --gold-400: #DEBF60;
  --gold-500: #D4AF37; /* [ACCENT BRAND COLOR] */
  --gold-600: #AA8C2C;
  --gold-700: #806921;
  --gold-800: #554616;
  --gold-900: #2B230B;

  /* --- NEUTRALS: MIDNIGHT & CLOUD (Texto & Fundo) --- */
  --midnight-900: #0A0E14; /* [TEXT BASE] - Azul Meia-noite Profundo */
  --midnight-800: #151920;
  --midnight-700: #2A2F3A;
  --midnight-600: #4A4F5C;
  --midnight-500: #6B7280; /* Text Muted */
  --midnight-400: #9CA3AF;
  --midnight-300: #D1D5DB;
  --midnight-200: #E5E7EB; /* Bordas */
  --midnight-100: #F3F4F6;
  --cloud-50:     #FDF8F9; /* [SECTION BG] - Nuvem Rosada */
  --pure-white:   #FFFFFF; /* [MAIN BG] */


  /* ========================================================================== */
  /* 2. MAPEAMENTO SEMÂNTICO (O SISTEMA LÓGICO)                                 */
  /* ========================================================================== */

  /* Cores de Ação */
  --color-primary:       var(--peony-400);
  --color-primary-hover: var(--peony-500);
  --color-primary-active:var(--peony-600);
  
  --color-secondary:     var(--sapphire-500);
  --color-secondary-hover: var(--sapphire-400);
  
  --color-accent:        var(--gold-500);
  --color-highlight:     var(--gold-300);

  /* Texto e Tipografia */
  --color-title:         var(--midnight-900);
  --color-txt:           var(--midnight-900);
  --color-muted:         #9AA0B4; /* Cool Gray (Mantido do original para compatibilidade) */
  --color-placeholder:   var(--midnight-300);
  --color-inverse:       var(--pure-white);

  /* Superfícies (Backgrounds) */
  --color-bg:            var(--pure-white);     /* Fundo Principal */
  --color-section:       var(--cloud-50);       /* Fundo Secundário */
  --color-card:          var(--pure-white);
  --color-surface-soft:  var(--midnight-100);   /* Cinza muito leve */
  --color-glass-bg:      rgba(255, 255, 255, 0.75);
  
  /* Estados Funcionais (Feedback) */
  --color-success:       #2ECC71; /* Emerald Green */
  --color-danger:        #E74C3C; /* Red (Erro não deve ser rosa) */
  --color-warning:       #F1C40F; /* Sunflower */
  --color-info:          var(--sapphire-400);

  /* Legado / Compatibilidade (Mapeando antigas variáveis para novas) */
  --color-royal:         var(--sapphire-500);
  --color-black:         #000000;
  --color-white:         #FFFFFF;
  --color-gray-100:      var(--midnight-100);
  --color-gray-200:      var(--midnight-200);
  --color-gray-300:      var(--midnight-300);
  --color-gray-500:      var(--color-muted);
  --color-gray-900:      var(--midnight-900);


  /* ========================================================================== */
  /* 3. GRADIENTES (ATMOSFERA DE LUXO)                                          */
  /* ========================================================================== */

  /* Marca */
  --grad-corporate:   linear-gradient(135deg, var(--peony-400), var(--sapphire-500));
  --grad-brand:       linear-gradient(135deg, var(--peony-500), #D473A5, var(--gold-300));
  
  /* Luxo e Metais */
  --grad-gold:        linear-gradient(120deg, var(--gold-200), var(--gold-500));
  --grad-lux:         linear-gradient(135deg, #FCEabb 0%, #F8B500 50%, #FCEabb 100%);
  --grad-sunset:      linear-gradient(120deg, var(--peony-400), var(--gold-400));
  
  /* Tech e Vidro */
  --grad-tech:        linear-gradient(120deg, var(--sapphire-500), #3ACEFA);
  --grad-glass-light: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.5));
  --grad-glass-dark:  linear-gradient(180deg, rgba(10,14,20,0.9), rgba(10,14,20,0.7));
  
  /* Marketing */
  --grad-hot:         linear-gradient(45deg, #FF6B6B, var(--peony-500));
  --grad-sale:        linear-gradient(45deg, var(--gold-400), var(--peony-400));
  --grad-radial-glow: radial-gradient(circle, rgba(212,115,165,0.15), transparent 70%);


  /* ========================================================================== */
  /* 4. SOMBRAS & LUZ (SISTEMA FÍSICO COMPLETO)                                 */
  /* ========================================================================== */

  /* Sombras Neutras (Depth) */
  --shadow-xs: 0 2px 4px rgba(10,14,20,0.02);
  --shadow-sm: 0 4px 8px rgba(10,14,20,0.04);
  --shadow-md: 0 8px 16px rgba(10,14,20,0.08);
  --shadow-lg: 0 16px 32px rgba(10,14,20,0.12);
  --shadow-xl: 0 24px 48px rgba(10,14,20,0.18);

  /* Sombras Coloridas (Brand Glow) */
  --shadow-soft:          0 10px 40px rgba(212,115,165,0.10); /* Peony Glow */
  --shadow-neon-pink:     0 0 20px rgba(212,115,165,0.5);
  --shadow-neon-blue:     0 0 20px rgba(15,82,186,0.5);
  --shadow-neon-gold:     0 0 25px rgba(212,175,55,0.4);

  /* Sombras Legado / Específicas (Compatibilidade Root 5.1) */
  --shadow-lift:          0 18px 45px rgba(15,82,186,0.15);
  --shadow-floating:      0 30px 90px rgba(10,14,20,0.20);
  --shadow-inner:         inset 0 2px 4px rgba(0,0,0,0.05);
  
  /* Shadow Variants (Complexas) */
  --shadow-blue-5-15-030: 0 5px 15px rgba(15,82,186,0.3);
  --shadow-blue-10-25-030: 0 10px 25px rgba(15,82,186,0.3);
  --shadow-gold-5-15-030: 0 5px 15px rgba(212,175,55,0.3);


  /* ========================================================================== */
  /* 5. BORDAS, RAIO E FORMAS                                                   */
  /* ========================================================================== */

  --border-hairline: 1px solid rgba(0,0,0,0.05);
  --border-default:  1px solid var(--midnight-200);
  --border-strong:   2px solid var(--midnight-900);
  --border-focus:    2px solid var(--sapphire-500);
  --border-lux:      1px solid var(--gold-500);
  
  --glass-border:    1px solid rgba(255, 255, 255, 0.4);

  /* Radius System (Estética Suave KosmeTall) */
  --rd-xs:   4px;
  --rd-sm:   6px;
  --rd-md:   8px;   /* Padrão Cards */
  --rd-lg:   15px;  /* Botões Principais */
  --rd-xl:   24px;
  --rd-2xl:  32px;
  --rd-3xl:  48px;
  --rd-pill: 999px;


  /* ========================================================================== */
  /* 6. TIPOGRAFIA (FONT STACK KOSMETALL)                                       */
  /* ========================================================================== */

  --font-heading: 'Montserrat', sans-serif;
  --font-ui:      'Poppins', sans-serif;
  --font-body:    'Poppins', sans-serif;
  --font-accent:  'Marko One', cursive; /* Assinaturas */
  --font-mono:    'JetBrains Mono', monospace;

  /* Tamanhos (Modular Scale 1.25) */
  --fs-2xs: 10px;
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px; /* Base */
  --fs-lg:  20px;
  --fs-xl:  25px;
  --fs-2xl: 31px;
  --fs-3xl: 39px;
  --fs-4xl: 48px;
  --fs-hero: 64px;

  /* Pesos */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* Line Heights */
  --lh-tight:   1.1;
  --lh-heading: 1.2;
  --lh-normal:  1.6;
  --lh-loose:   1.9;

  /* Letter Spacing */
  --ls-tight: -0.5px;
  --ls-normal: 0;
  --ls-wide:   1px; /* Uppercase headings */
  --ls-widest: 2px;


  /* ========================================================================== */
  /* 7. ESPAÇAMENTO, GRID & LAYOUT                                              */
  /* ========================================================================== */

  --sz-3xs: 2px;
  --sz-2xs: 4px;
  --sz-xs:  8px;
  --sz-sm:  12px;
  --sz-md:  16px;
  --sz-lg:  24px;
  --sz-xl:  32px;
  --sz-2xl: 48px;
  --sz-3xl: 64px;
  --sz-4xl: 96px;
  --sz-5xl: 144px;

  /* Breakpoints */
  --bp-xs: 480px;
  --bp-sm: 768px;
  --bp-md: 992px;
  --bp-lg: 1200px;
  --bp-xl: 1440px;

  /* Grid System */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
  
  --grid-gap-xs:  8px;
  --grid-gap-sm:  16px;
  --grid-gap-md:  24px;
  --grid-gap-lg:  32px;


  /* ========================================================================== */
  /* 8. MOTION & FÍSICA (ANIMAÇÕES)                                             */
  /* ========================================================================== */

  --ease-linear: linear;
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy */
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  --speed-micro: 0.1s;
  --speed-fast:  0.2s;
  --speed-norm:  0.3s;
  --speed-slow:  0.5s;
  --speed-long:  0.8s;

  /* Presets */
  --motion-hover: transform var(--speed-fast) var(--ease-out);
  --motion-fade:  opacity var(--speed-norm) var(--ease-in-out);
  --motion-card:  transform var(--speed-norm) var(--ease-spring), box-shadow var(--speed-norm) ease;


  /* ========================================================================== */
  /* 9. ÍCONES & Z-INDEX                                                        */
  /* ========================================================================== */

  --icon-xs: 16px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 48px;
  --icon-color: var(--peony-400);

  --z-negative: -1;
  --z-base:     1;
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-fixed:    1030;
  --z-modal:    1050;
  --z-popover:  1060;
  --z-tooltip:  1070;
  --z-toast:    1080;
  --z-header:   1200;
  --z-loader:   9999;


  /* ========================================================================== */
  /* 10. EFEITOS VISUAIS (FX)                                                   */
  /* ========================================================================== */

  --fx-noise:      url("/assets/noise-light.png");
  --fx-blur-sm:    blur(4px);
  --fx-blur-md:    blur(10px);
  --fx-blur-lg:    blur(20px);
  --fx-grain:      repeating-linear-gradient(0deg,rgba(255,255,255,0.03),rgba(255,255,255,0.03) 1px,transparent 1px,transparent 2px);
  
  --overlay-bg:    rgba(10, 14, 20, 0.65);
  --overlay-blur:  var(--fx-blur-md);


  /* ========================================================================== */
  /* 11. COMPONENTES ESPECÍFICOS (TOKENS DE UI)                                 */
  /* ========================================================================== */

  /* Buttons */
  --btn-bg:         var(--peony-400);
  --btn-bg-hover:   var(--sapphire-500);
  --btn-txt:        var(--pure-white);
  --btn-radius:     var(--rd-lg);
  --btn-shadow:     0 4px 14px rgba(212,115,165,0.4);

  /* Inputs */
  --input-bg:       var(--cloud-50);
  --input-border:   var(--midnight-200);
  --input-radius:   var(--rd-sm);
  --input-focus:    var(--gold-500);
  --input-height:   48px;

  /* Cards */
  --card-bg:        var(--pure-white);
  --card-radius:    var(--rd-md);
  --card-shadow:    var(--shadow-md);
  
  /* Badges */
  --badge-bg:       var(--peony-100);
  --badge-txt:      var(--peony-700);
  --badge-radius:   var(--rd-pill);
  
  /* Alerts */
  --alert-bg-success: #E6F9F0;
  --alert-bg-danger:  #FFF5F5;
  --alert-bg-warning: #FFF9E5;
  --alert-txt-success:var(--color-success);
  --alert-txt-danger: var(--color-danger);

  /* Header & Footer */
  --header-bg:      rgba(255,255,255,0.95);
  --header-txt:     var(--midnight-900);
  --footer-bg:      var(--midnight-900);
  --footer-txt:     var(--pure-white);


  /* ========================================================================== */
  /* 12. UTILITÁRIOS & ACESSIBILIDADE                                           */
  /* ========================================================================== */

  --focus-ring:       0 0 0 3px rgba(212,175,55,0.5); /* Gold Ring */
  --focus-outline:    2px solid var(--gold-500);
  
  --util-border-dashed: 1px dashed var(--midnight-300);
  --util-radius-circle: 50%;
  --util-bg-transparent: transparent;
  
  /* Estados */
  --state-hover-bg:   var(--peony-50);
  --state-active-bg:  var(--peony-100);
  --state-disabled:   0.5;
}


/* ========================================================================== */
/* 13. DARK MODE (INVERSÃO INTELIGENTE KOSMETALL)                             */
/* ========================================================================== */

[data-theme="dark"] {
  
  /* Redefinição de Primitivas para Dark */
  --color-bg:          #05080D; /* Quase preto */
  --color-section:     #0A0E14; /* Midnight Base */
  --color-card:        #151920; /* Surface Light */
  
  --color-txt:         #FDF8F9; /* Nuvem (Legibilidade) */
  --color-title:       #FFFFFF;
  --color-muted:       #9AA0B4;
  --color-inverse:     #0A0E14;

  --color-border:      #23272F;
  --color-shadow:      rgba(0,0,0,0.5);
  --overlay-bg:        rgba(0,0,0,0.85);

  /* Ajuste de Cores de Marca (Vibrancy Control) */
  --color-primary:     #D473A5; /* Peony mantém-se */
  --color-secondary:   #4D8AF0; /* Sapphire clareia */
  --color-accent:      #F8B500; /* Gold mais brilhante */
  
  /* Inputs & UI */
  --input-bg:          #151920;
  --input-border:      #2A2F3A;
  --input-focus:       #D4AF37;
  
  --btn-txt:           #FFFFFF;
  --badge-bg:          #2A1822; /* Dark Pink BG */
  --badge-txt:         #F3C6DE; /* Light Pink Txt */

  /* Gradientes Dark */
  --grad-cloud:        linear-gradient(180deg, #0A0E14 0%, #05080D 100%);
  --grad-glass-light:  linear-gradient(180deg, rgba(21,25,32,0.8), rgba(21,25,32,0.6));
  --grad-corporate:    linear-gradient(135deg, #853861, #083680); /* Versão escura do gradiente */

  /* Sombras Neon (Cyber/Luxury Night) */
  --shadow-soft:       0 0 30px rgba(212,115,165,0.15);
  --shadow-neon-pink:  0 0 30px rgba(212,115,165,0.4);
  --shadow-neon-gold:  0 0 30px rgba(212,175,55,0.3);
}/* End custom CSS */