:root{
    --bg: #f7f8fc;
    --bg-2: #ffffff;
    --bg-3: #eef2ff;
    --surface: rgba(255,255,255,.78);
    --surface-strong: rgba(255,255,255,.92);
    --surface-dark: #0b0b14;

    --txt: #141626;
    --txt-soft: #4f5773;
    --txt-muted: #6d7693;

    --border: rgba(106, 91, 255, .12);
    --border-strong: rgba(106, 91, 255, .22);

    --shadow-sm: 0 10px 25px rgba(25, 30, 60, .06);
    --shadow-md: 0 18px 50px rgba(25, 30, 60, .10);
    --shadow-lg: 0 30px 80px rgba(25, 30, 60, .14);

    --c1: #ff4fd8;
    --c2: #6a5bff;
    --c3: #38f2ff;
    --c4: #ffe35a;

    --g-main: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4));
    --g-soft: linear-gradient(135deg, rgba(255,79,216,.16), rgba(106,91,255,.14), rgba(56,242,255,.14));
    --g-card: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70));

    --success: #17b26a;
    --warning: #f79009;
    --danger: #f04438;

    --radius-xs: 10px;
    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 30px;

    --container-max: 1320px;
    --header-height: 82px;
}

*{
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

body{
    margin: 0;
    /*font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;*/
    font-family: Oswald, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--txt);
    background:
        radial-gradient(900px 500px at 8% 0%, rgba(255,79,216,.10), transparent 60%),
        radial-gradient(900px 540px at 92% 8%, rgba(56,242,255,.11), transparent 58%),
        radial-gradient(760px 460px at 50% 100%, rgba(255,227,90,.10), transparent 56%),
        linear-gradient(180deg, #fbfbff 0%, #f7f8fc 48%, #f2f5ff 100%);
    overflow-x: hidden;
    position: relative;
}

body::before{
    content: "";
    pointer-events: none;
    position: fixed;
    inset: 0;
    opacity: .035;
    background-image:
        linear-gradient(to right, rgba(20,22,38,.35) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(20,22,38,.35) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at 50% 40%, black 25%, transparent 72%);
}

img{
    max-width: 100%;
    display: block;
}

a{
    color: inherit;
    text-decoration: none;
    transition: color .18s ease, opacity .18s ease, transform .18s ease;
}

a:hover{
    color: inherit;
}

h1,h2,h3,h4,h5,h6{
    margin-top: 0;
    color: var(--txt);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -.03em;
}

p{
    color: var(--txt-soft);
    line-height: 1.72;
}

strong{
    color: var(--txt);
}

small,
.text-muted{
    color: var(--txt-muted) !important;
}

::selection{
    background: rgba(106,91,255,.18);
    color: var(--txt);
}

/* ===== Bootstrap refinements ===== */

.container,
.container-lg,
.container-xl,
.container-xxl{
    max-width: var(--container-max);

}

.btn{
    border-radius: 14px;
    font-weight: 800;
    letter-spacing: .01em;
    padding: .86rem 1.25rem;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
    box-shadow: none;
}

.btn:hover{
    transform: translateY(-1px);
}

.btn-dark,
.btn-primary{
    color: #090910;
    border: 0;
    background: var(--g-main);
    background-size: 220% 220%;
    animation: pixerGradient 8s ease infinite;
    box-shadow: 0 14px 35px rgba(106,91,255,.20);
}

.btn-dark:hover,
.btn-primary:hover,
.btn-dark:focus,
.btn-primary:focus{
    color: #090910;
    background: var(--g-main);
    background-size: 220% 220%;
}

.btn-outline-dark{
    color: var(--txt);
    border-color: rgba(20,22,38,.10);
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(8px);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus{
    color: var(--txt);
    border-color: rgba(20,22,38,.18);
    background: rgba(255,255,255,.94);
}

.btn-light{
    color: var(--txt);
    border: 1px solid rgba(20,22,38,.08);
    background: rgba(255,255,255,.88);
}

.btn-light:hover,
.btn-light:focus{
    color: var(--txt);
    background: #fff;
}

.form-control,
.form-select{
    min-height: 52px;
    border-radius: 14px;
    border: 1px solid rgba(20,22,38,.10);
    background: rgba(255,255,255,.88);
    color: var(--txt);
    box-shadow: none;
}

.form-control::placeholder{
    color: rgba(79,87,115,.58);
}

.form-control:focus,
.form-select:focus{
    border-color: rgba(106,91,255,.36);
    box-shadow: 0 0 0 .22rem rgba(106,91,255,.10);
    background: #fff;
}

textarea.form-control{
    min-height: 140px;
}

.alert{
    border: 0;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.badge{
    border-radius: 999px;
    padding: .58rem .86rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.badge-soft{
    color: var(--txt);
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(20,22,38,.08);
}

.table{
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(20,22,38,.06);
    --bs-table-color: var(--txt);
}

/* ===== Helpers ===== */

.section-space-sm{
    padding: 64px 0;
}

.eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(106,91,255,.12);
    color: var(--txt);
    font-size: .79rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .10em;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
}

.eyebrow::before{
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, #fff, var(--c3));
    box-shadow: 0 0 18px rgba(56,242,255,.42);
}

.section-title{
    font-size: clamp(2rem, 3.8vw, 3.5rem);
    margin-bottom: 16px;
}

.section-subtitle{
    max-width: 66ch;
    font-size: 1.08rem;
    color: var(--txt-soft);
}

.gradient-text{
    background: var(--g-main);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.glass-card{
    background: var(--g-card);
    border: 1px solid rgba(255,255,255,.52);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(14px);
}

.soft-panel{
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(20,22,38,.06);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.icon-badge{
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.68));
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 12px 28px rgba(106,91,255,.10);
    position: relative;
}

.icon-badge::before{
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--c1), var(--c3));
    box-shadow: 0 0 12px rgba(56,242,255,.28);
}

.bg-grid{
    position: relative;
}

.bg-grid::before{
    content: "";
    position: absolute;
    inset: -40px;
    pointer-events: none;
    opacity: .18;
    background:
        linear-gradient(to right, rgba(106,91,255,.06) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(to bottom, rgba(106,91,255,.06) 1px, transparent 1px) 0 0 / 44px 44px;
    mask-image: radial-gradient(circle at 50% 45%, black 30%, transparent 78%);
}

.shadow-hover{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.shadow-hover:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* ===== Header / nav ===== */

.site-header,
header{
    position: sticky;
    top: 0;
    z-index: 1030;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.navbar{
    min-height: var(--header-height);
    padding: 14px 0;
    background: rgba(255,255,255,.76) !important;
    border-bottom: 1px solid rgba(106,91,255,.10);
    box-shadow: 0 10px 32px rgba(35, 38, 80, .06);
}

.navbar-brand{
    font-size: 1.52rem;
    font-weight: 900;
    letter-spacing: -.03em;
    color: var(--txt) !important;
}

.navbar-brand img{
    max-height: 50px;
    width: auto;
}

.navbar-nav{
    gap: 6px;
}

.nav-link{
    color: var(--txt-soft) !important;
    font-weight: 700;
    padding: .78rem 1rem !important;
    border-radius: 12px;
}

.nav-link:hover,
.nav-link.active{
    color: var(--txt) !important;
    background: rgba(106,91,255,.07);
}

.navbar-toggler{
    border: 1px solid rgba(20,22,38,.10);
    border-radius: 12px;
    padding: .55rem .7rem;
    box-shadow: none !important;
}
.home-sports-slider{
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border-radius: 28px;
    max-width: (var(--container-max));
}

.home-sports-slide{
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
}

.home-sports-slide-image{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-sports-slide-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10,12,20,.72) 0%, rgba(10,12,20,.48) 40%, rgba(10,12,20,.14) 100%);
}

.home-sports-slide-content{
    position: relative;
    z-index: 2;
    max-width: 620px;
    padding: 60px;
    color: #fff;
}

.home-sports-slide-eyebrow{
    display: inline-block;
    margin-bottom: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.home-sports-slide-title{
    font-size: clamp(2rem, 4vw, 3.8rem);
    line-height: 1.02;
    font-weight: 900;
    margin-bottom: 16px;
    color: #fff;
}

.home-sports-slide-subtitle{
    font-size: 1.12rem;
    line-height: 1.6;
    margin-bottom: 24px;
    color: rgba(255,255,255,.92);
}

.home-sports-slide-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.home-sports-slider .carousel-control-prev,
.home-sports-slider .carousel-control-next{
    width: 64px;
}

.home-sports-slider .carousel-control-prev-icon,
.home-sports-slider .carousel-control-next-icon{
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background-color: rgba(17,24,39,.65);
    background-size: 55%;
}

.home-sports-slider .carousel-indicators{
    margin-bottom: 20px;
}

.home-sports-slider .carousel-indicators [data-bs-target]{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 0;
    opacity: .8;
}
.page-hero-custom .page-title{
    max-width: 980px;
}

.page-hero-custom .page-lead{
    max-width: 760px;
}

.sticky-form-wrap{
    position: sticky;
    top: 110px;
}

.section-mini-title{
    font-size: 2rem;
    margin-bottom: 8px;
}

.section-mini-subtitle{
    color: var(--txt-soft);
    margin-bottom: 0;
}
 /* Como funciona el proceso */
.process-box{
    overflow: hidden;
    padding-bottom: 5px;
}

.section-head-left{
    text-align: left;
}

.process-timeline{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 22px;
    align-items: start;
    margin-bottom: 5px;
}

.process-step-card{
    position: relative;
    height: 100%;
}

.process-step-top{
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.process-step-number{
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 900;
    color: #0c1020;
    background: linear-gradient(135deg, #ff4fd8, #6a5bff, #38f2ff);
    box-shadow: 0 10px 24px rgba(106,91,255,.20);
}

.process-step-line{
    height: 4px;
    flex: 1;
    margin-left: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,79,216,.65), rgba(56,242,255,.65));
}

.process-step-line-hidden{
    opacity: 0;
}

.process-step-content{
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.process-step-content h3{
    font-size: 1.15rem;
    margin-bottom: 8px;
    font-weight: 800;
}

.process-step-content p{
    margin-bottom: 0;
    color: var(--txt-soft);
    line-height: 1.7;
    max-width: 320px;
}
@media (max-width: 767.98px){

    .process-timeline{
        display: flex;
        flex-direction: column;
        gap: 28px;
        position: relative;
    }

    /* Línea vertical */
    .process-timeline::before{
        content: '';
        position: absolute;
        left: 22px;
        top: 10px;
        bottom: 10px;
        width: 3px;
        background: linear-gradient(180deg, #ff4fd8, #6a5bff, #38f2ff);
        border-radius: 2px;
        opacity: .5;
    }

    .process-step-card{
        display: flex;
        align-items: flex-start;
        gap: 16px;
        position: relative;
    }

    /* Quitamos la línea horizontal */
    .process-step-top{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .process-step-line{
        display: none;
    }

    .process-step-number{
        width: 44px;
        height: 44px;
        font-size: 1rem;
        z-index: 2;
    }

    .process-step-content{
        padding-top: 4px;
    }

    .process-step-content h3{
        font-size: 1.1rem;
    }

    .process-step-content p{
        font-size: .95rem;
    }
}
/*productos personalizados en custom*/
.custom-products-showcase{
    margin-bottom: 2rem;
}

.custom-products-heading{
    text-align: left;
    max-width: 760px;
}

.custom-products-title{
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.05;
    font-weight: 900;
    margin-bottom: 6px;
    color: var(--txt);
}

.custom-products-subtitle{
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 0;
    background: linear-gradient(90deg, #ff4fd8, #6a5bff, #38f2ff, #9be06d, #f1d74c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.custom-showcase-card-soft{
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(20,22,38,.06);
    box-shadow: var(--shadow-sm);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.custom-showcase-card-soft:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(106,91,255,.12);
}

.custom-showcase-media-soft{
    overflow: hidden;
    background: #fff;
}

.custom-showcase-media-soft img{
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    transition: transform .28s ease;
}

.custom-showcase-card-soft:hover .custom-showcase-media-soft img{
    transform: scale(1.03);
}

.custom-showcase-body-soft{
    padding: 18px 18px 20px;
    text-align: center;
}

.custom-showcase-body-soft h3{
    font-size: 1.15rem;
    margin-bottom: 6px;
}

.custom-showcase-body-soft p{
    margin: 0;
    color: var(--txt-soft);
    line-height: 1.5;
    font-size: .96rem;
}
.content-column{
    min-width: 0;
}

.sticky-form-wrap{
    position: sticky;
    top: 110px;
    width: 100%;
}

.form-card,
.cta-band{
    width: 100%;
}

.custom-products-showcase,
.glass-card{
    width: 100%;
}

@media (max-width: 991.98px){
    .sticky-form-wrap{
        position: static;
        top: auto;
    }
}
@media (max-width: 767.98px){
    .custom-showcase-media-soft img{
        height: 190px;
    }

    .custom-showcase-body-soft h3{
        font-size: 1.05rem;
    }

    .custom-showcase-body-soft p{
        font-size: .9rem;
    }
}
@media (max-width: 991.98px){
    .process-timeline{
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .process-step-top{
        margin-bottom: 12px;
    }

    .process-step-line{
        display: none;
    }

    .process-step-content{
        padding: 20px 18px;
    }
}


.benefit-box{
    padding: 20px;
    border-radius: 20px;
    background: rgba(255,255,255,.68);
    border: 1px solid rgba(20,22,38,.06);
}

.benefit-box h3{
    font-size: 1.08rem;
    margin-bottom: 8px;
}

.benefit-box p{
    margin-bottom: 0;
    color: var(--txt-soft);
}

.examples-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
}

.example-pill{
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(20,22,38,.06);
    font-weight: 800;
    color: var(--txt);
}

.direct-contact-box{
    border-top: 1px solid rgba(20,22,38,.08);
    padding-top: 20px;
}

.direct-contact-box h3{
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.direct-contact-box li{
    margin-bottom: 8px;
    color: var(--txt);
}
.custom-hero-claim{
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--txt);
    margin-top: 10px;
    margin-bottom: 0;
}

.ideas-grid-box{
    display: grid;
    gap: 14px;
}

.idea-row-card{
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(20,22,38,.06);
}

.idea-row-title{
    font-weight: 800;
    color: var(--txt);
    margin-bottom: 4px;
}

.idea-row-text{
    color: var(--txt-soft);
    line-height: 1.6;
}
.idea-chip-card{
    padding: 18px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(20,22,38,.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cta-gradient-card{
    background: linear-gradient(135deg, rgba(173,140,255,0.25), rgba(120,220,255,0.25));
    border: 1px solid rgba(20,22,38,.06);
}

.idea-chip-card strong{
    font-size: 1rem;
    color: var(--txt);
}

.idea-chip-card span{
    color: var(--txt-soft);
    line-height: 1.55;
    font-size: .95rem;
}
.section-eyebrow{
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--txt-soft);
    margin-bottom: 10px;
}

.custom-category-card{
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all .25s ease;
}

.custom-category-card img{
    width: 100%;
    border-radius: 20px;
    margin-bottom: 14px;
    transition: transform .3s ease;
}

.custom-category-card h3{
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.custom-category-card p{
    font-size: .95rem;
    color: var(--txt-soft);
    margin: 0;
}

.custom-category-card:hover img{
    transform: scale(1.04);
}

.custom-category-card:hover h3{
    text-decoration: underline;
}
.section-head-narrow{
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.audience-card{
    padding: 28px 24px;
    border-radius: 24px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(20,22,38,.06);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.audience-card:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(106,91,255,.12);
}

.audience-card-icon{
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,79,216,.12), rgba(56,242,255,.12));
    font-size: 1.35rem;
    margin-bottom: 18px;
}

.audience-card h3{
    font-size: 1.18rem;
    margin-bottom: 10px;
}

.audience-card p{
    margin-bottom: 0;
    color: var(--txt-soft);
    line-height: 1.7;
}

.audience-cta{
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.testimonial-card-pro{
    position: relative;
    padding: 28px 24px 24px;
    border-radius: 24px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(20,22,38,.06);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.testimonial-card-pro:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(106,91,255,.12);
}

.testimonial-quote-mark{
    font-size: 3rem;
    line-height: 1;
    font-weight: 900;
    color: rgba(106,91,255,.18);
    margin-bottom: 10px;
}

.testimonial-header h3{
    font-size: 1.15rem;
    margin-bottom: 4px;
}

.testimonial-company{
    margin-bottom: 16px;
    font-size: .95rem;
    color: var(--txt-soft);
    font-weight: 600;
}

.testimonial-text{
    color: var(--txt-soft);
    line-height: 1.75;
}
.final-cta-box{
    padding: 60px 40px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(255,79,216,.08), rgba(56,242,255,.08));
    border: 1px solid rgba(20,22,38,.06);
    box-shadow: var(--shadow-sm);
    margin: 0 auto;
}

.final-cta-title{
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;
    margin-bottom: 14px;
}

.final-cta-subtitle{
    color: var(--txt-soft);
    max-width: 620px;
    margin: 0 auto 26px;
    line-height: 1.7;
}

.final-cta-actions{
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
@media (max-width: 991.98px){
    .custom-hero-claim{
        font-size: 1.05rem;
    }
}

@media (max-width: 991.98px){
    .sticky-form-wrap{
        position: static;
        top: auto;
    }

    .examples-grid{
        grid-template-columns: 1fr;
    }
}
@media (max-width: 991.98px){
    .home-sports-slide{
        min-height: 420px;
    }

    .home-sports-slide-content{
        padding: 34px 26px 42px;
        max-width: 100%;
    }
}

@media (max-width: 575.98px){
    .home-sports-slide{
        min-height: 360px;
    }

    .home-sports-slide-content{
        padding: 28px 20px 34px;
    }

    .home-sports-slide-subtitle{
        font-size: 1rem;
    }
}
/* bloque calcetines personalizados */
.section-head-narrow{
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.title-gradient{
    background: linear-gradient(90deg, #ff4fd8, #6a5bff, #38f2ff, #9be06d, #f1d74c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.audience-card{
    padding: 28px 24px;
    border-radius: 24px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(20,22,38,.06);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.audience-card:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(106,91,255,.12);
}

.audience-card-icon{
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,79,216,.12), rgba(56,242,255,.12));
    font-size: 1.35rem;
    margin-bottom: 18px;
}

.audience-card h3{
    font-size: 1.18rem;
    margin-bottom: 10px;
}

.audience-card p{
    margin-bottom: 0;
    color: var(--txt-soft);
    line-height: 1.7;
}
.example-card{
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(20,22,38,.06);
    box-shadow: var(--shadow-sm);
    height: 100%;
}

.example-card img{
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.example-card:hover img{
    transform: scale(1.03);
}

.why-pixer-box{
    overflow: hidden;
}

.why-pixer-list{
    margin-bottom: 18px;
}

.why-pixer-item{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(20,22,38,.06);
    height: 100%;
}

.why-pixer-icon{
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(255,79,216,.14), rgba(56,242,255,.14));
    color: var(--txt);
}

.why-pixer-item h3{
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.why-pixer-item p{
    margin-bottom: 0;
    color: var(--txt-soft);
    line-height: 1.65;
}

.why-pixer-note{
    margin-top: 10px;
    color: var(--txt-soft);
}
@media (max-width: 767.98px){
    .example-card img{
        height: 220px;
    }
}
/* productos*/
.product-gallery-main-wrap{
    position: relative;
}

.product-gallery-main{
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
}

.product-gallery-main img{
    width: 100%;
    display: block;
}

.gallery-main-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(20,22,38,.68);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s ease;
}

.gallery-main-arrow:hover{
    background: rgba(20,22,38,.9);
}

.gallery-main-prev{
    left: 14px;
}

.gallery-main-next{
    right: 14px;
}

.product-gallery-thumbs-wrap{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
}

.product-gallery-thumbs-viewport{
    flex: 1;
    overflow: hidden;
}

.product-gallery-thumbs{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.product-gallery-thumbs::-webkit-scrollbar{
    display: none;
}

.product-gallery-thumb{
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    opacity: .72;
    transition: .2s ease;
}

.product-gallery-thumb.active{
    opacity: 1;
    outline: 3px solid rgba(106,91,255,.35);
}

.product-gallery-thumb img{
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}

.gallery-thumbs-arrow{
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(20,22,38,.08);
    color: #111;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s ease;
    flex: 0 0 38px;
}

.gallery-thumbs-arrow:hover{
    background: rgba(20,22,38,.14);
}

.gallery-thumbs-arrow:disabled{
    opacity: .35;
    cursor: not-allowed;
}


@media (max-width: 767.98px){
    .product-gallery-thumbs{
        grid-template-columns: repeat(2, 1fr);
    }

    .product-gallery-thumb img{
        height: 68px;
    }
}
.product-detail-sections{
    margin-top: 2rem;
    display: grid;
    gap: 1.25rem;
}
.product-detail-card{
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(20,22,38,.06);
    border-radius: 22px;
    padding: 26px;
    box-shadow: var(--shadow-sm);
    transition: .25s ease;
}

.product-detail-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.product-detail-card h2{
    font-size: 1.6rem;
    margin-bottom: 16px;
}

.product-detail-content{
    color: var(--txt-soft);
    line-height: 1.7;
    font-size: .95rem;
}

.product-detail-content p{
    margin-bottom: 12px;
}

/* Lista de lavado más visual */
.product-wash-list{
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-wash-list li{
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(20,22,38,.03);
    margin-bottom: 10px;
    font-weight: 500;
}
/*banner en productos*/ 
.split-banner{
    position: relative;
    height: 360px;
    border-radius: 28px;
    overflow: hidden;
}

/* Imagen */
.split-banner-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Corte visual */
.split-banner-mask{
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        100deg,
        rgba(168, 85, 247, 0.95) 0%,   /* morado */
        rgba(59, 130, 246, 0.85) 40%,  /* azul */
        rgba(59, 130, 246, 0.4) 60%,
        rgba(0,0,0,0) 75%
    );

    clip-path: polygon(
        0 0,
        60% 0,
        48% 100%,
        0% 100%
    );
}

/* Contenido */
.split-banner-content{
    position: relative;
    z-index: 2;
    max-width: 480px;
    padding: 60px;
    color: white;
}

/* Título */
.split-banner-content h2{
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 15px;
}

/* Texto */
.split-banner-content p{
    opacity: .9;
    margin-bottom: 20px;
    color:white;
}

/* Botón */
.split-banner-btn{
    background: linear-gradient(135deg, #38f2ff, #8ef08a, #f4ef5a);
    border: none;
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 700;
    color: #000;
}

/* Hover */
.split-banner-btn:hover{
    transform: translateY(-2px);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    display: none;
}
.carousel-control-prev,
.carousel-control-next {
    width: 50px;
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    opacity: 1;
    z-index: 20;
}

.carousel-control-prev {
    left: 20px;
}

.carousel-control-next {
    right: 20px;
}

/* Flechas con icono */
.carousel-control-prev::after,
.carousel-control-next::after {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
}

.carousel-control-prev::after {
    content: "‹";
}

.carousel-control-next::after {
    content: "›";
}

/* Hover */
.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
}
.split-banner-content {
    position: relative;
    z-index: 10;
}
.shop-category-filters{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.shop-filter{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(20,22,38,.08);
    color: var(--txt);
    font-weight: 800;
    text-decoration: none;
}

.shop-filter.active,
.shop-filter:hover{
    background: linear-gradient(135deg, #a855f7, #38bdf8, #a3e635);
    color: #111;
}
.free-shipping-progress-box{
    background: linear-gradient(135deg, rgba(56,242,255,.16), rgba(163,230,53,.16), rgba(255,79,216,.14));
    border: 1px solid rgba(56,242,255,.22);
    color: var(--txt);
    border-radius: 18px;
    padding: 18px 22px;
    max-width: 560px;
}

.free-shipping-progress-box p{
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 900;
}

.free-shipping-bar{
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    overflow: hidden;
}
.product-extra-toggle{
    width: 100%;
    border: 0;
    background: transparent;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 900;
    color: var(--txt);
    text-align: left;
}
.product-extra-actions{
    display: grid;
    gap: 14px;
    max-width: 560px;
    margin-top: 22px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(20,22,38,.06);
    box-shadow: var(--shadow-sm);
}

.product-extra-content{
    padding: 0 20px 20px;
    color: var(--txt-soft);
}

.product-extra-content p{
    margin-bottom: 14px;
}

.free-shipping-bar span{
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff4fd8, #38bdf8, #a3e635, #f4ef5a);
}
.breadcrumb-pixer-line{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 18px;
}

.breadcrumb-pixer-line a{
    color: var(--txt);
    text-decoration: none;
    opacity: .82;
    transition: .2s ease;
}

.breadcrumb-pixer-line a:hover{
    opacity: 1;
}

.breadcrumb-home-pixer{
    font-size: 17px;
    background: linear-gradient(135deg, #ff4fd8, #5b7cff, #38f2ff, #d8f45a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.breadcrumb-slash{
    color: rgba(20,22,38,.35);
    font-weight: 900;
}

.breadcrumb-current-pixer{
    font-weight: 900;
    background: linear-gradient(135deg, #ff4fd8, #8b5cf6, #38bdf8, #a3e635, #f4ef5a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 576px){
    .breadcrumb-pixer-line{
        font-size: 12px;
        gap: 5px;
    }

    .breadcrumb-home-pixer{
        font-size: 15px;
    }
}
@media (max-width: 767.98px){

    .editable-hero-banner,
    .split-banner{
        min-height: 300px;
        height: auto;
        border-radius: 22px;
        margin-bottom: 26px;
    }

    .split-banner-img{
        object-position: center;
    }

    .split-banner-mask{
        clip-path: none;
        background: linear-gradient(
            180deg,
            rgba(124, 58, 237, .78) 0%,
            rgba(59, 130, 246, .58) 45%,
            rgba(5, 7, 16, .72) 100%
        );
    }

    .split-banner-content{
        padding: 34px 28px;
        max-width: 100%;
        min-height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .split-banner-content h2{
        font-size: 2rem;
        line-height: 1.05;
        margin-bottom: 14px;
        color: #fff;
        text-shadow: 0 4px 18px rgba(0,0,0,.45);
    }

    .split-banner-content p{
        font-size: .95rem;
        line-height: 1.5;
        margin-bottom: 18px;
        color: rgba(255,255,255,.95);
        max-width: 95%;
    }

    .split-banner-btn{
        width: fit-content;
        padding: 12px 18px;
        font-size: .95rem;
    }

    #productsBannerSlider .carousel-control-prev,
    #productsBannerSlider .carousel-control-next{
        width: 36px;
        height: 36px;
        top: 50%;
        opacity: .9;
    }

    #productsBannerSlider .carousel-control-prev{
        left: 10px;
    }

    #productsBannerSlider .carousel-control-next{
        right: 10px;
    }

    #productsBannerSlider .carousel-indicators{
        margin-bottom: 8px;
    }

    #productsBannerSlider .carousel-indicators [data-bs-target]{
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }
}
/* Responsive ajuste */
@media (max-width: 991px){
    .product-detail-card{
        padding: 22px;
    }
}

/* boton subir arriba */
.back-to-top{
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    font-weight: bold;

    background: linear-gradient(135deg, #a855f7, #22d3ee);
    color: #fff;

    box-shadow: 0 10px 25px rgba(0,0,0,0.15);

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .25s ease;
    z-index: 999;
}

.back-to-top.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover{
    transform: translateY(-3px);
}
/* ===== Hero ===== */

.hero{
    position: relative;
    overflow: hidden;
    padding: 84px 0 72px;
}

.hero::before{
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 560px;
    height: 560px;
    /*background:
        radial-gradient(circle at 30% 30%, rgba(255,79,216,.22), transparent 55%),
        radial-gradient(circle at 52% 42%, rgba(106,91,255,.22), transparent 60%),
        radial-gradient(circle at 65% 55%, rgba(56,242,255,.16), transparent 62%);*/
    filter: blur(12px);
    opacity: .95;
    pointer-events: none;
}

.hero::after{
    content: "";
    position: absolute;
    left: -120px;
    bottom: -120px;
    width: 420px;
    height: 420px;
    background:
        radial-gradient(circle at 40% 40%, rgba(255,227,90,.18), transparent 58%),
        radial-gradient(circle at 55% 45%, rgba(56,242,255,.12), transparent 62%);
    filter: blur(12px);
    pointer-events: none;
}

.hero > .container{
    position: relative;
    z-index: 1;
}

.hero-copy{
    max-width: 760px;
}

.hero-title{
    font-size: clamp(2.7rem, 6vw, 5rem);
    line-height: .96;
    margin: 18px 0 18px;
}

.hero-title strong,
.hero-title .accent{
    background: var(--g-main);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.accent{
    background: var(--g-main);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-lead{
    font-size: 1.14rem;
    max-width: 60ch;
    color: var(--txt-soft);
}

.hero-actions{
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.hero-kpis{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
    max-width: 900px;
}

.hero-kpi{
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: var(--shadow-sm);
}

.hero-kpi::before{
    content: "";
    position: absolute;
    inset: -60px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,79,216,.14), transparent 45%),
        radial-gradient(circle at 70% 40%, rgba(56,242,255,.12), transparent 45%),
        radial-gradient(circle at 50% 80%, rgba(255,227,90,.10), transparent 45%);
    transform: rotate(8deg);
}

.hero-kpi > *{
    position: relative;
}

.hero-kpi .kpi-label{
    display: block;
    color: var(--txt-muted);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .10em;
}

.hero-kpi .kpi-value{
    display: block;
    margin-top: 8px;
    color: var(--txt);
    font-size: 1.05rem;
    font-weight: 900;
}

.hero-side-card{
    padding: 28px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(11,11,20,.92), rgba(16,16,28,.88));
    color: #f5f7ff;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 60px rgba(8,9,18,.35);
    overflow: hidden;
    position: relative;
}

.hero-side-card::before{
    content: "";
    position: absolute;
    inset: -120px -120px auto auto;
    width: 360px;
    height: 360px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,79,216,.18), transparent 55%),
        radial-gradient(circle at 55% 45%, rgba(106,91,255,.16), transparent 60%),
        radial-gradient(circle at 65% 55%, rgba(56,242,255,.14), transparent 62%);
    filter: blur(10px);
    pointer-events: none;
}

.hero-side-card > *{
    position: relative;
    z-index: 1;
}

.hero-side-title{
    color: #fff;
    font-size: .88rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 16px;
}

.hero-feature-list{
    display: grid;
    gap: 12px;
    padding: 0;
    list-style: none;
    margin: 0;
}

.hero-feature-item{
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
}

.hero-feature-item b{
    display: block;
    color: #fff;
    margin-bottom: 4px;
    font-size: .98rem;
}

.hero-feature-item p{
    margin: 0;
    color: rgba(245,247,255,.72);
    font-size: .94rem;
    line-height: 1.58;
}

/* ===== Sections ===== */

.section-head{
    margin-bottom: 30px;
}

.section-head.center{
    text-align: center;
}

.section-head.center .section-subtitle{
    margin-left: auto;
    margin-right: auto;
}

.trust-strip{
    padding: 20px 0 0;
}

.trust-card{
    padding: 22px;
    border-radius: 22px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: var(--shadow-sm);
    height: 100%;
}

.trust-card h3{
    font-size: 1.06rem;
    margin-bottom: 10px;
}

.trust-card p{
    margin-bottom: 0;
}

.feature-card{
    height: 100%;
    padding: 26px;
    border-radius: 22px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.feature-card::before{
    content: "";
    position: absolute;
    inset: auto auto -90px -90px;
    width: 220px;
    height: 220px;
    background:
        radial-gradient(circle at 50% 50%, rgba(106,91,255,.10), transparent 62%);
    pointer-events: none;
}

.feature-card .icon-badge{
    margin-bottom: 16px;
}

.feature-card h3{
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.feature-card p{
    margin: 0;
}

.metric-band{
    position: relative;
    padding: 26px;
    border-radius: 26px;
    background: linear-gradient(120deg, rgba(255,79,216,.12), rgba(106,91,255,.12), rgba(56,242,255,.12));
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.metric-band::after{
    content: "";
    position: absolute;
    inset: auto -80px -80px auto;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle at center, rgba(255,255,255,.65), transparent 62%);
    opacity: .45;
}

.metric-box{
    position: relative;
    z-index: 1;
    padding: 10px 4px;
}

.metric-box .metric-number{
    display: block;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--txt);
    line-height: 1;
}

.metric-box .metric-text{
    display: block;
    margin-top: 8px;
    color: var(--txt-soft);
    font-weight: 700;
}

/* ===== Product cards / catalog ===== */

.card{
    border: 1px solid rgba(20,22,38,.06);
    border-radius: 22px;
    background: rgba(255,255,255,.84);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-body{
    padding: 1.3rem;
}

.card-title,
.card h5{
    font-size: 1.08rem;
    font-weight: 900;
    margin-bottom: 10px;
}

.card p{
    margin-bottom: 0;
}

.product-card{
    height: 100%;
    border-radius: 22px;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.product-card:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(106,91,255,.16);
}

.product-card-media{
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(180deg, #fff, #f3f6ff);
}

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

.product-card-badge{
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(255,255,255,.7);
    color: var(--txt);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    box-shadow: var(--shadow-sm);
}

.product-card-body{
    padding: 20px;
}

.product-card-title{
    font-size: 1.12rem;
    margin-bottom: 8px;
}

.product-card-text{
    font-size: .98rem;
    color: var(--txt-soft);
    margin-bottom: 14px;
}

.product-card-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
}

.product-price{
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.product-price-current{
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--txt);
}

.product-price-old{
    font-size: .95rem;
    color: var(--txt-muted);
    text-decoration: line-through;
}

.catalog-header{
    padding: 26px;
    border-radius: 24px;
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

.catalog-filters{
    padding: 22px;
    border-radius: 22px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: var(--shadow-sm);
}

/* ===== Product detail ===== */

.product-detail{
    padding: 26px;
    border-radius: 28px;
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(255,255,255,.74);
    box-shadow: var(--shadow-md);
}

.product-gallery-main{
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg, #fff, #f2f5ff);
    border: 1px solid rgba(255,255,255,.7);
}

.product-gallery-main img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.product-gallery-thumbs{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.product-gallery-thumb{
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(20,22,38,.08);
    background: #fff;
    cursor: pointer;
}

.product-gallery-thumb img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.product-detail-title{
    font-size: clamp(2rem, 4vw, 3.1rem);
    margin-bottom: 14px;
}

.product-detail-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.product-meta-pill{
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(106,91,255,.07);
    color: var(--txt);
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.product-detail-price{
    margin: 22px 0 18px;
}

.product-detail-price .product-price-current{
    font-size: 2rem;
}

.product-box{
    margin-top: 22px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(20,22,38,.06);
    box-shadow: var(--shadow-sm);
}

.product-box + .product-box{
    margin-top: 14px;
}

/* ===== B2B / custom ===== */

.b2b-hero,
.custom-hero{
    position: relative;
    padding: 78px 0;
}

.b2b-highlight{
    padding: 28px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(255,255,255,.80), rgba(255,255,255,.62));
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: var(--shadow-md);
    height: 100%;
}

.b2b-highlight h3{
    font-size: 1.15rem;
    margin-bottom: 12px;
}

.use-case-card{
    height: 100%;
    padding: 26px;
    border-radius: 22px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(255,255,255,.74);
    box-shadow: var(--shadow-sm);
}

.use-case-card h3{
    font-size: 1.06rem;
    margin-bottom: 10px;
}

.process-step{
    position: relative;
    height: 100%;
    padding: 24px;
    border-radius: 22px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: var(--shadow-sm);
}

.process-step .step-number{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--g-main);
    color: #090910;
    font-weight: 900;
    box-shadow: 0 12px 25px rgba(106,91,255,.18);
}

.process-step h3{
    font-size: 1.04rem;
    margin-bottom: 10px;
}

/* ===== Contact / forms ===== */

.contact-card,
.form-card{
    padding: 28px;
    border-radius: 24px;
    background: rgba(255,255,255,.80);
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: var(--shadow-md);
}

.contact-info-card{
    padding: 24px;
    border-radius: 22px;
    background: linear-gradient(180deg, #0d0d16, #111122);
    color: #f5f7ff;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 60px rgba(8,9,18,.28);
}

.contact-info-card h3,
.contact-info-card h4{
    color: #fff;
}

.contact-info-card p,
.contact-info-card li,
.contact-info-card a{
    color: rgba(245,247,255,.76);
}

.form-label{
    font-weight: 800;
    color: var(--txt);
    margin-bottom: 8px;
}

.form-section-title{
    font-size: 1.06rem;
    margin-bottom: 14px;
}

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

.accordion{
    --bs-accordion-border-width: 0;
    --bs-accordion-border-color: transparent;
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-icon-width: 1rem;
}

.accordion-item{
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 20px !important;
    background: rgba(255,255,255,.80);
    box-shadow: var(--shadow-sm);
}

.accordion-item + .accordion-item{
    margin-top: 14px;
}

.accordion-button{
    padding: 1.2rem 1.3rem;
    background: transparent !important;
    color: var(--txt) !important;
    font-size: 1.02rem;
    font-weight: 800;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed){
    color: var(--txt) !important;
}

.accordion-body{
    padding: 0 1.3rem 1.2rem;
    color: var(--txt-soft);
    line-height: 1.74;
}

/* ===== CTA band ===== */

.cta-band{
    position: relative;
    overflow: hidden;
    padding: 34px;
    border-radius: 30px;
    background: linear-gradient(120deg, rgba(255,79,216,.14), rgba(106,91,255,.16), rgba(56,242,255,.14));
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: var(--shadow-lg);
}

.cta-band::before{
    content: "";
    position: absolute;
    inset: auto -120px -120px auto;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle at center, rgba(255,255,255,.7), transparent 62%);
    opacity: .5;
}

.cta-band > *{
    position: relative;
    z-index: 1;
}

.cta-band h2{
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin-bottom: 12px;
}

.cta-band p{
    max-width: 60ch;
    margin-bottom: 0;
}

/* ===== Breadcrumbs ===== */

.breadcrumb-wrap{
    padding-top: 18px;
}

.breadcrumb{
    margin-bottom: 0;
}

.breadcrumb-item,
.breadcrumb-item a{
    color: var(--txt-muted);
    font-weight: 700;
    font-size: .92rem;
}

.breadcrumb-item.active{
    color: var(--txt);
}

/* ===== Footer ===== */

footer{
    position: relative;
    margin-top: 70px;
    color: #f5f7ff;
    background:
        radial-gradient(700px 300px at 15% 0%, rgba(255,79,216,.14), transparent 60%),
        radial-gradient(700px 320px at 85% 0%, rgba(56,242,255,.14), transparent 58%),
        linear-gradient(180deg, #0a0a12 0%, #090910 100%);
    border-top: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}

footer::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at 50% 0%, black 22%, transparent 70%);
    opacity: .24;
}

footer .container{
    position: relative;
    z-index: 1;
}

footer h5,
footer h6{
    color: #fff;
    font-size: 1.04rem;
    margin-bottom: 16px;
}

footer p,
footer li,
footer a{
    color: rgba(245,247,255,.72);
}

footer a:hover{
    color: #fff;
}

footer ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

footer li + li{
    margin-top: 10px;
}

/* ===== Utilities for current views ===== */

.bg-light{
    background: transparent !important;
}

.border-bottom{
    border-bottom-color: rgba(20,22,38,.06) !important;
}

.py-5{
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
}

.mt-5{
    margin-top: 3rem !important;
}

.display-5{
    font-weight: 900;
    letter-spacing: -.04em;
}

.lead{
    color: var(--txt-soft);
}

.list-unstyled{
    padding-left: 0;
    list-style: none;
}

/* ===== Optional page-specific hooks ===== */

.page-hero{
    padding: 64px 0 34px;
}

.page-title{
    font-size: clamp(2.2rem, 4.2vw, 3.6rem);
    margin-bottom: 12px;
}

.page-lead{
    max-width: 60ch;
    font-size: 1.05rem;
}


/* ===== Size selector ===== */

.size-selector{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:14px;
}

.size-card{
    display:block;
    cursor:pointer;
    margin:0;
}

.size-card input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.size-card-inner{
    display:block;
    padding:16px;
    padding-top: 24px;
    padding-left: 24px;
    border-radius:18px;
    background:rgba(255,255,255,.85);
    border:1px solid rgba(20,22,38,.08);
    box-shadow:var(--shadow-sm);
    transition:.18s ease;
}

.size-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.size-name{
    font-size:1.02rem;
    font-weight:900;
    color:var(--txt);
}

.size-price{
    font-size:.92rem;
    font-weight:800;
    color:var(--txt-soft);
}

.size-stock{
    display:inline-flex;
    align-items:center;
    padding:8px 12px;
    border-radius:999px;
    font-size:.72rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.size-stock.ok{
    color:#0f5132;
    background:rgba(23,178,106,.12);
}

.size-stock.low{
    color:#8a5a00;
    background:rgba(247,144,9,.14);
}

.size-stock.out{
    color:#a61b1b;
    background:rgba(240,68,56,.12);
}

.size-card input:checked + .size-card-inner{
    border-color:rgba(106,91,255,.34);
    box-shadow:0 18px 35px rgba(106,91,255,.12);
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,249,255,.92));
    transform:translateY(-2px);
}

.size-card:hover .size-card-inner{
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

.size-card.disabled{
    cursor:not-allowed;
}

.size-card.disabled .size-card-inner{
    opacity:.55;
    filter:grayscale(.1);
}

.precio-producto {
    font-size: 2rem;
    font-weight: 900;
    color: var(--txt);
}

.cantidad-producto {
    width: 25%;
    text-align: center;
}

/* ===== Payment selector ===== */

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

.payment-card{
    display:block;
    cursor:pointer;
    margin:0;
}

.payment-card input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.payment-card-inner{
    display:block;
    min-height:132px;
    padding:18px;
    border-radius:20px;
    background:rgba(255,255,255,.86);
    border:1px solid rgba(20,22,38,.08);
    box-shadow:var(--shadow-sm);
    transition:.18s ease;
}

.payment-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.payment-title{
    font-size:1rem;
    font-weight:900;
    color:var(--txt);
}

.payment-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(106,91,255,.08);
    color:var(--txt);
    font-size:.68rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.payment-desc{
    color:var(--txt-soft);
    font-size:.95rem;
    line-height:1.6;
    margin:0;
}

.payment-card input:checked + .payment-card-inner{
    border-color:rgba(106,91,255,.34);
    box-shadow:0 18px 35px rgba(106,91,255,.12);
    background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,249,255,.92));
    transform:translateY(-2px);
}

.payment-card:hover .payment-card-inner{
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}


.hero-home{
padding:120px 0;
background:#f6f7f9;
}

.hero-home h1{
font-size:48px;
font-weight:800;
line-height:1.2;
}

.hero-subtitle{
font-size:18px;
margin:25px 0;
color:#555;
}

.hero-image{
max-width:420px;
}

/* ===== Home hero visual ===== */

.hero-home-main{
    padding-top:72px;
}

.hero-visual-card{
    position:relative;
    border-radius:28px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.72));
    border:1px solid rgba(255,255,255,.72);
    box-shadow:var(--shadow-lg);
    min-height:520px;
}

.hero-visual-image{
    width:100%;
    height:100%;
    min-height:520px;
    object-fit:cover;
    display:block;
}

.section-title{
font-size:34px;
font-weight:700;
margin-bottom:40px;
}

.benefits{
padding:80px 0;
}

.product-card{
text-align:center;
padding:20px;
border-radius:12px;
background:#fff;
box-shadow:0 5px 15px rgba(0,0,0,.05);
margin-bottom:30px;
}



.product-card{
    height: 100%;
    border-radius: 22px;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.product-card:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(106,91,255,.16);
}

.product-card-media{
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(180deg, #fff, #f3f6ff);
}

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

.product-card-body{
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-card-title{
    font-size: 1.12rem;
    margin-bottom: 8px;
    line-height: 1.2;
}

.product-card-text{
    font-size: .98rem;
    color: var(--txt-soft);
    margin-bottom: 14px;
}

.product-card-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
}

.product-price-current{
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--txt);
}



.product-card img{
width:100%;
border-radius:10px;
margin-bottom:15px;
}

.card{
    border-radius: 22px;
    overflow: hidden;
    height: 100%;
}

.card-img-top{
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.card-body{
    height: 100%;
}

.card-body p{
    margin-bottom: 1rem;
}

.instagram-section{
padding:90px 0;
background:#fafafa;
}

.cta-b2b{
padding:100px 0;
background:#111;
color:#fff;
}

.seo-content{
padding:100px 0;
}


/* ===== Color selector ===== */

.color-selector{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:12px;
}

.color-card{
    display:block;
    cursor:pointer;
    margin:0;
}

.color-card input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.color-card-inner{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-radius:18px;
    background:rgba(255,255,255,.85);
    border:1px solid rgba(20,22,38,.08);
    box-shadow:var(--shadow-sm);
    transition:.18s ease;
}

.color-chip{
    width:22px;
    height:22px;
    border-radius:999px;
    border:2px solid rgba(20,22,38,.12);
    flex-shrink:0;
}

.color-name{
    font-weight:800;
    color:var(--txt);
    line-height:1.2;
}

.color-card input:checked + .color-card-inner{
    border-color:rgba(106,91,255,.34);
    box-shadow:0 18px 35px rgba(106,91,255,.12);
    background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,249,255,.92));
    transform:translateY(-2px);
}

.color-card:hover .color-card-inner{
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}


/* ===== Header cart ===== */

.header-cart-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:14px;
    background:rgba(255,255,255,.86);
    border:1px solid rgba(20,22,38,.08);
    box-shadow:var(--shadow-sm);
    color:var(--txt);
    font-weight:800;
}

.header-cart-btn:hover{
    color:var(--txt);
    transform:translateY(-1px);
}

.header-cart-count{
    min-width:22px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:var(--g-main);
    /*color:#090910;*/
    color: #fefefe;
    font-size:1.15rem;
    font-weight:900;
    padding:0 6px;
}

.header-cart-icon{
    font-size:1rem;
}

.navbar-brand img{
    height:56px;
    width:auto;
}


.footer-dev{
    margin-top:6px;
    font-size:.95rem;
    color:rgba(245,247,255,.72);
}

.footer-dev a{
    color:#fff;
    font-weight:600;
}

.footer-dev a:hover{
    text-decoration:underline;
}


/* ===== Animations ===== */

@keyframes pixerGradient{
    0%,100%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
}

/* ===== Responsive ===== */

@media (max-width: 1199px){
    .hero-title{
        font-size: clamp(2.4rem, 5.8vw, 4.3rem);
    }
}

@media (max-width: 991px){
    .section-space{
        padding: 72px 0;
    }

    .hero{
        padding: 64px 0 56px;
    }

    .hero-kpis{
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .product-detail{
        padding: 22px;
    }

    footer{
        margin-top: 56px;
    }
}

@media (max-width: 767px){
    .navbar{
        min-height: 74px;
    }

    .section-title{
        font-size: clamp(1.9rem, 9vw, 2.8rem);
    }

    .hero-title{
        font-size: clamp(2.2rem, 10vw, 3.4rem);
    }

    .hero-actions{
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn{
        width: 100%;
    }

    .cta-band{
        padding: 26px;
    }

    .contact-card,
    .form-card,
    .hero-side-card,
    .catalog-header,
    .catalog-filters{
        padding: 22px;
    }

    .product-gallery-thumbs{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 575px){
    .section-space{
        padding: 58px 0;
    }

    .hero{
        padding: 54px 0 46px;
    }

    .eyebrow{
        font-size: .72rem;
        padding: 9px 13px;
    }

    .hero-lead,
    .section-subtitle,
    .page-lead{
        font-size: 1rem;
    }

    .feature-card,
    .use-case-card,
    .process-step,
    .trust-card,
    .hero-kpi{
        padding: 20px;
    }

    .card-body,
    .product-card-body{
        padding: 18px;
    }

    .product-detail{
        padding: 18px;
        border-radius: 22px;
    }

    .contact-card,
    .form-card{
        padding: 18px;
        border-radius: 20px;
    }

    .cta-band{
        padding: 22px;
        border-radius: 24px;
    }

    .btn{
        padding: .82rem 1.1rem;
    }
}