:root {
    --ink:#171525;
    --navy:#17152a;
    --cyan:#00c5ec;
    --pink:#ff2d91;
    --yellow:#ffdf36;
    --cream:#faf9f6;
    --muted:#6e6b79;
    --max:1250px
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:'DM Sans',sans-serif;
    color:var(--ink);
    background:var(--cream);
    overflow-x:hidden
}

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

a {
    text-decoration:none;
    color:inherit
}

button {
    font:inherit;
    cursor:pointer
}

.skip {
    position:absolute;
    top:-100px;
    left:15px;
    z-index:999;
    background:#fff;
    padding:12px
}

.skip:focus {
    top:15px
}

.topline {
    height:29px;
    background:var(--yellow);
    text-align:center;
    font-size:10px;
    letter-spacing:2.4px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center
}

.header {
    height:336px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 max(4%,calc((100% - 1380px)/2));
    background:#fff;
    position:relative;
    z-index:20
}

.brand {
    width:164px;
    height:120px;
    display:flex;
    align-items:center;
    overflow:hidden
}

.brand img {
    width:160px;
    height:113px;
    object-fit:contain
}

.header nav {
    display:flex;
    gap:35px
}

.header nav a {
    font-size:15px;
    font-weight:800;
    transition:color .2s
}

.header nav a:hover {
    color:var(--pink)
}

.nav-cta {
    background:var(--navy);
    color:white;
    border-radius:99px;
    padding:14px 20px;
    font-size:12px;
    font-weight:800
}

.nav-cta span {
    margin-left:10px;
    color:var(--yellow)
}

.hamburger {
    display:none;
    border:0;
    background:none;
    font-size:26px
}

.hero {
    min-height:680px;
    background:var(--navy);
    position:relative;
    color:white;
    display:grid;
    grid-template-columns:53% 47%;
    overflow:hidden;
    padding:90px max(5%,calc((100% - 1270px)/2)) 100px
}

.hero:before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 76% 49%,#332e62 0,transparent 42%),linear-gradient(120deg,#17152a 40%,#1e1a3d);
    pointer-events:none
}

.hero-noise {
    position:absolute;
    inset:0;
    opacity:.08;
    background-image:radial-gradient(#fff 1px,transparent 1px);
    background-size:24px 24px
}

.hero-copy {
    position:relative;
    z-index:3;
    align-self:center
}

.eyebrow,.kicker {
    font-size:11px;
    letter-spacing:2.1px;
    font-weight:900
}

.eyebrow {
    color:#c8c5db;
    display:flex;
    gap:10px;
    align-items:center
}

.pulse {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 0 7px #00c5ec20
}

.hero h1,.section h2,.statement h2,.cta-section h2 {
    font-family:Outfit,sans-serif;
    letter-spacing:-.065em;
    font-weight:900
}

.hero h1 {
    font-size:clamp(60px,6.7vw,105px);
    line-height:.99;
    margin:30px 0
}

.hero h1 em {
    color:var(--yellow);
    font-style:normal
}

.hero h1 span {
    color:var(--cyan)
}

.hero-copy>p {
    max-width:480px;
    color:#d1cfdf;
    font-size:17px;
    line-height:1.8
}

.hero-actions {
    display:flex;
    align-items:center;
    gap:26px;
    margin:30px 0 42px
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    padding:18px 24px;
    border-radius:100px;
    font-weight:900;
    font-size:13px;
    transition:transform .25s,box-shadow .25s
}

.button:hover {
    transform:translateY(-4px);
    box-shadow:0 14px 30px #0002
}

.button-yellow {
    background:var(--yellow);
    color:var(--ink)
}

.button span {
    font-size:22px;
    line-height:10px
}

.text-link {
    font-size:13px;
    font-weight:800;
    border-bottom:1px solid #ffffff60;
    padding-bottom:6px
}

.hero-pills {
    display:flex;
    flex-wrap:wrap;
    gap:12px
}

.hero-pills span {
    font-size:11px;
    color:#dad8e6;
    border:1px solid #ffffff30;
    border-radius:99px;
    padding:9px 13px
}

.hero-art {
    position:relative;
    min-height:530px;
    align-self:center;
    transform:translate(var(--mx,0),var(--my,0));
    transition:transform .4s ease-out
}

.mascot {
    position:absolute;
    z-index:5;
    bottom:-75px;
    left:3%;
    width:93%;
    max-height:640px;
    object-fit:contain;
    filter:drop-shadow(0 30px 30px #0006);
    animation:mascotFloat 5s ease-in-out infinite
}

.hero-splash {
    position:absolute;
    border-radius:46% 54% 66% 34%/47% 43% 57% 53%;
    filter:blur(.5px)
}

.splash-cyan {
    width:80%;
    height:74%;
    background:var(--cyan);
    top:15%;
    left:11%;
    transform:rotate(-17deg)
}

.splash-pink {
    width:43%;
    height:37%;
    background:var(--pink);
    top:4%;
    right:0;
    transform:rotate(35deg)
}

.splash-yellow {
    width:38%;
    height:33%;
    background:var(--yellow);
    bottom:1%;
    left:-3%;
    transform:rotate(-28deg)
}

.orbit {
    position:absolute;
    border:2px dashed #ffffff55;
    border-radius:50%;
    width:97%;
    height:93%;
    top:1%;
    left:3%;
    transform:rotate(25deg)
}

.orbit-two {
    width:78%;
    height:80%;
    top:9%;
    left:12%;
    transform:rotate(-25deg)
}

.hero-bubble {
    position:absolute;
    z-index:8;
    background:white;
    color:var(--ink);
    font-family:Outfit;
    font-weight:900;
    box-shadow:0 12px 30px #0003
}

.bubble-one {
    right:2%;
    top:5%;
    padding:16px 23px;
    border-radius:25px 25px 25px 3px;
    transform:rotate(10deg)
}

.bubble-two {
    left:-3%;
    bottom:8%;
    background:var(--yellow);
    border-radius:16px;
    padding:16px 24px;
    transform:rotate(-9deg);
    font-size:22px;
    line-height:1.1
}

.sparkle {
    position:absolute;
    z-index:7;
    font-size:45px;
    animation:twinkle 3s ease-in-out infinite
}

.s1 {
    right:0;
    bottom:26%;
    color:var(--yellow)
}

.s2 {
    left:3%;
    top:13%;
    color:white;
    animation-delay:1s
}

.s3 {
    right:12%;
    top:24%;
    color:var(--pink);
    animation-delay:1.7s
}

.scroll-tip {
    position:absolute;
    bottom:27px;
    left:5%;
    font-size:10px;
    letter-spacing:2px;
    font-weight:900;
    color:#a4a1b6
}

.scroll-tip span {
    font-size:22px;
    margin-left:8px
}

.marquee {
    height:66px;
    background:var(--pink);
    color:white;
    display:flex;
    align-items:center;
    overflow:hidden;
    transform:rotate(-1deg) scale(1.01);
    position:relative;
    z-index:4
}

.marquee-track {
    white-space:nowrap;
    font-family:Outfit;
    font-size:25px;
    font-weight:900;
    letter-spacing:2px;
    animation:marquee 30s linear infinite
}

.section {
    padding:115px max(5%,calc((100% - var(--max))/2))
}

.intro {
    background:#fff
}

.intro-badge {
    display:inline-block;
    padding:10px 15px;
    background:#e3f9ff;
    border-radius:7px;
    font-size:11px;
    font-weight:900;
    letter-spacing:1px;
    color:#13748c
}

.intro-grid {
    display:grid;
    grid-template-columns:1.25fr 1fr;
    gap:90px;
    align-items:center
}

.intro h2 {
    font-size:clamp(48px,5.5vw,84px);
    line-height:1.07;
    margin:35px 0
}

.highlight-pink {
    color:var(--pink)
}

.intro-right p {
    font-size:20px;
    line-height:1.8;
    color:#565361
}

.underlined {
    display:inline-flex;
    gap:40px;
    font-weight:900;
    padding:12px 0;
    border-bottom:3px solid var(--pink)
}

.stats {
    border-top:1px solid #e7e6ec;
    margin-top:60px;
    padding-top:35px;
    display:grid;
    grid-template-columns:repeat(3,1fr)
}

.stats div {
    display:flex;
    flex-direction:column
}

.stats strong {
    font-family:Outfit;
    font-size:55px;
    line-height:1
}

.stats strong span {
    color:var(--pink)
}

.stats small {
    font-size:12px;
    font-weight:700;
    color:var(--muted);
    margin-top:6px
}

.products {
    background:#f5f4f9
}

.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:28px;
    margin-bottom:42px
}

.kicker {
    color:var(--pink)
}

.section-heading h2 {
    font-size:clamp(44px,5.1vw,74px);
    margin:16px 0 10px;
    line-height:1.1
}

.section-heading h2 i {
    font-style:normal;
    color:var(--pink)
}

.section-heading p {
    color:var(--muted);
    font-size:16px
}

.filterbar {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    max-width:480px;
    justify-content:flex-end
}

.filter {
    border:1px solid #d9d8df;
    background:white;
    border-radius:99px;
    padding:11px 17px;
    font-size:11px;
    font-weight:800;
    transition:.2s
}

.filter:hover,.filter.active {
    background:var(--ink);
    border-color:var(--ink);
    color:white
}

.product-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px
}

.product-card {
    background:white;
    border-radius:22px;
    overflow:hidden;
    transition:transform .35s,box-shadow .35s
}

.product-card:hover {
    transform:translateY(-8px);
    box-shadow:0 24px 50px #1b173016
}

.product-card[hidden] {
    display:none!important
}

.product-image {
    position:relative;
    aspect-ratio:1.2;
    overflow:hidden
}

.product-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .65s
}

.product-card:hover .product-image img {
    transform:scale(1.07) rotate(-2deg)
}

.card-index {
    position:absolute;
    top:20px;
    left:20px;
    color:#33304b88;
    font-size:12px;
    font-weight:900
}

.product-arrow {
    position:absolute;
    bottom:18px;
    right:18px;
    width:48px;
    height:48px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--navy);
    color:white;
    font-size:25px;
    transition:.2s
}

.product-arrow:hover {
    background:var(--pink);
    transform:rotate(45deg)
}

.product-body {
    padding:23px 25px 29px
}

.category {
    font-size:10px;
    letter-spacing:1.6px;
    text-transform:uppercase;
    font-weight:900;
    color:var(--pink)
}

.product-body h3 {
    font-family:Outfit;
    font-size:25px;
    letter-spacing:-.6px;
    margin:9px 0
}

.product-body p {
    font-size:13px;
    color:var(--muted);
    line-height:1.6;
    margin:0
}

.catalog-end {
    text-align:center;
    margin-top:45px;
    font-size:16px;
    font-weight:700
}

.catalog-end a {
    color:#d5237c;
    text-decoration:underline;
    text-underline-offset:5px
}

.statement {
    background:var(--yellow);
    min-height:650px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:100px max(5%,calc((100% - var(--max))/2))
}

.statement-blob {
    position:absolute;
    width:600px;
    height:600px;
    border-radius:50%;
    background:#ffbb3d;
    right:-170px;
    top:-100px;
    box-shadow:-100px 300px 0 #ffe96a
}

.statement-inner {
    position:relative;
    z-index:2;
    max-width:900px
}

.statement .kicker {
    color:#6b4d00
}

.statement h2 {
    font-size:clamp(70px,9vw,138px);
    line-height:.94;
    margin:24px 0
}

.statement h2 em {
    font-style:normal;
    color:var(--pink)
}

.statement h2 strong {
    color:var(--navy)
}

.statement p {
    max-width:520px;
    font-size:18px;
    line-height:1.7
}

.button-dark {
    background:var(--navy);
    color:white
}

.statement-stickers {
    position:absolute;
    right:5%;
    top:35%;
    display:flex;
    flex-direction:column;
    gap:25px;
    transform:rotate(12deg)
}

.sticker {
    padding:15px 20px;
    font-family:Outfit;
    font-size:25px;
    font-weight:900;
    box-shadow:7px 8px 0 #1b163e
}

.sticker-a {
    background:var(--cyan);
    transform:rotate(-10deg)
}

.sticker-b {
    background:var(--pink);
    color:white;
    transform:rotate(9deg)
}

.sticker-c {
    background:white;
    transform:rotate(-7deg)
}

.how {
    background:#fff
}

.steps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}

.step {
    border:1px solid #e6e5ed;
    padding:38px 30px;
    border-radius:22px;
    position:relative;
    min-height:270px
}

.step-no {
    font-family:Outfit;
    font-weight:900;
    font-size:13px;
    color:#aaa6b6
}

.step-icon {
    font-size:55px;
    margin:12px 0;
    color:var(--pink)
}

.step:nth-child(2) .step-icon {
    color:var(--cyan)
}

.step:nth-child(3) .step-icon {
    color:#e9b700
}

.step h3 {
    font-family:Outfit;
    font-size:24px;
    margin:8px 0
}

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

.cta-section {
    background:var(--cyan);
    min-height:640px;
    position:relative;
    overflow:hidden;
    padding:100px max(5%,calc((100% - var(--max))/2));
    display:flex;
    align-items:center
}

.cta-inner {
    position:relative;
    z-index:2
}

.cta-section .kicker {
    color:#15556b
}

.cta-section h2 {
    font-size:clamp(68px,9vw,125px);
    line-height:.95;
    margin:20px 0
}

.cta-section h2 em {
    font-style:normal;
    color:white
}

.cta-section p {
    max-width:500px;
    font-size:18px;
    line-height:1.7
}

.cta-button {
    margin-top:15px
}

.cta-number {
    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
    margin-top:24px
}

.cta-doodle {
    position:absolute;
    font-size:650px;
    right:-110px;
    top:-180px;
    color:#ffffff44;
    animation:rotateSlow 35s linear infinite
}

.footer {
    background:#171525;
    color:white;
    padding:60px max(5%,calc((100% - var(--max))/2)) 25px
}

.footer-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px
}

.footer-brand {
    width:180px;
    height:115px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#fff;
    border-radius:12px
}

.footer-brand img {
    width:100%;
    height:140px;
    object-fit:contain
}

.footer-top p {
    color:#c2bfd3;
    line-height:1.8;
    font-size:13px
}

.back-top {
    font-size:13px;
    font-weight:800
}

.footer-bottom {
    border-top:1px solid #ffffff22;
    margin-top:45px;
    padding-top:22px;
    display:flex;
    justify-content:space-between;
    color:#b5b1c6;
    font-size:11px
}

.float-wa {
    position:fixed;
    bottom:25px;
    right:24px;
    background:#22c55e;
    color:white;
    z-index:40;
    display:flex;
    align-items:center;
    gap:10px;
    border-radius:100px;
    padding:14px 20px;
    box-shadow:0 10px 35px #0003;
    font-weight:900;
    font-size:12px;
    transition:transform .2s
}

.float-wa:hover {
    transform:translateY(-4px)
}

.float-wa svg {
    width:27px;
    height:27px
}

.reveal {
    opacity:0;
    transform:translateY(35px);
    transition:opacity .7s,transform .7s
}

.reveal.visible {
    opacity:1;
    transform:translateY(0)
}

@keyframes mascotFloat {
    0%,100% {
        transform:translateY(0)
    }
    50% {
        transform:translateY(-18px)
    }
}

@keyframes twinkle {
    0%,100% {
        transform:scale(1) rotate(0)
    }
    50% {
        transform:scale(1.35) rotate(30deg)
    }
}

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

@keyframes rotateSlow {
    to {
        transform:rotate(360deg)
    }
}

@media(max-width:1050px) {
    .header nav {
        gap:18px
    }
    .hero {
        grid-template-columns:1fr 1fr;
        padding:80px 5%
    }
    .hero h1 {
        font-size:clamp(52px,6.3vw,78px)
    }
    .hero-art {
        min-height:460px
    }
    .intro-grid {
        gap:35px
    }
    .statement-stickers {
        opacity:.3;
        right:-4%
    }
    .section-heading {
        align-items:start;
        flex-direction:column
    }
    .filterbar {
        max-width:none;
        justify-content:start
    }
}

@media(max-width:760px) {
    .header {
        height:132px;
        padding:0 5%
    }
    .brand {
        width:145px
    }
    .brand img {
        width:145px
    }
    .nav-cta {
        margin-left:auto;
        margin-right:12px;
        padding:11px 14px;
        font-size:10px
    }
    .hamburger {
        display:block
    }
    .header nav {
        position:absolute;
        top:132px;
        left:0;
        right:0;
        display:none;
        background:white;
        flex-direction:column;
        gap:0;
        padding:10px 5% 25px;
        box-shadow:0 18px 24px #0001
    }
    .header nav.open {
        display:flex
    }
    .header nav a {
        padding:14px;
        border-bottom:1px solid #eee
    }
    .hero {
        display:flex;
        flex-direction:column;
        padding:65px 6% 65px;
        min-height:unset
    }
    .hero-copy {
        align-self:stretch
    }
    .hero h1 {
        font-size:clamp(55px,12vw,83px)
    }
    .hero-copy>p {
        font-size:15px
    }
    .hero-art {
        min-height:420px;
        width:100%;
        max-width:530px;
        margin:20px auto 0
    }
    .mascot {
        bottom:-40px;
        width:88%;
        left:6%
    }
    .bubble-two {
        left:0
    }
    .hero-actions {
        gap:16px;
        flex-wrap:wrap
    }
    .scroll-tip {
        display:none
    }
    .section {
        padding:75px 6%
    }
    .intro-grid {
        grid-template-columns:1fr;
        gap:5px
    }
    .intro h2 {
        font-size:55px
    }
    .intro-right p {
        font-size:17px
    }
    .stats strong {
        font-size:42px
    }
    .stats small {
        font-size:10px
    }
    .product-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px
    }
    .product-body {
        padding:16px
    }
    .product-body h3 {
        font-size:19px
    }
    .product-body p {
        font-size:12px
    }
    .product-arrow {
        width:38px;
        height:38px
    }
    .statement {
        min-height:560px;
        padding:75px 6%
    }
    .statement h2 {
        font-size:clamp(62px,11vw,95px)
    }
    .statement-stickers {
        display:none
    }
    .steps {
        grid-template-columns:1fr
    }
    .step {
        min-height:0
    }
    .cta-section {
        min-height:570px;
        padding:80px 6%
    }
    .cta-section h2 {
        font-size:clamp(60px,11vw,100px)
    }
    .footer {
        padding:45px 6% 25px
    }
    .footer-top {
        align-items:start;
        flex-direction:column
    }
    .footer-bottom {
        gap:15px;
        flex-wrap:wrap
    }
}

@media(max-width:450px) {
    .topline {
        font-size:8px;
        letter-spacing:1px
    }
    .nav-cta {
        font-size:0;
        padding:10px 14px
    }
    .nav-cta span {
        font-size:19px;
        margin:0
    }
    .hero h1 {
        font-size:52px
    }
    .hero-art {
        min-height:340px
    }
    .bubble-one {
        right:-4%
    }
    .bubble-two {
        font-size:15px
    }
    .section-heading h2 {
        font-size:45px
    }
    .product-grid {
        grid-template-columns:1fr
    }
    .product-image {
        aspect-ratio:1.4
    }
    .stats {
        gap:12px
    }
    .stats strong {
        font-size:35px
    }
    .statement h2 {
        font-size:60px
    }
    .float-wa span {
        display:none
    }
    .float-wa {
        padding:15px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important
    }
    .reveal {
        opacity:1;
        transform:none
    }
}

/* V4 — Fotografía de producto y marcas adaptadas a cada fondo */
.product-photo {
    overflow:hidden;
    background:#f1f0ee
}

.product-photo>img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s cubic-bezier(.2,.8,.2,1);
    filter:saturate(.95)
}

.product-card:hover .product-photo>img {
    transform:scale(1.065)
}

.photo-note {
    font-size:.8rem;
    color:#696673;
    text-align:center;
    margin:1.5rem auto;
    max-width:730px
}

.mascot-inline {
    display:block;
    width:min(210px,48%);
    height:auto;
    object-fit:contain;
    float:right;
    margin:-2.5rem 0 0 1rem;
    filter:drop-shadow(0 16px 22px #14122520)
}

.cta-section {
    overflow:hidden
}

.cta-mascot {
    position:absolute;
    right:2%;
    bottom:-5%;
    width:clamp(180px,25vw,360px);
    max-height:90%;
    object-fit:contain;
    object-position:bottom;
    pointer-events:none;
    filter:drop-shadow(0 12px 25px #0002)
}

.footer-phone {
    display:inline-block;
    margin-top:.6rem;
    font-weight:800;
    color:#14c6e9;
    text-decoration:none
}

.footer-phone:hover {
    text-decoration:underline
}

.footer-brand img {
    object-fit:contain;
    max-width:300px;
    width:100%;
    height:auto;
    background:transparent;
    border-radius:0
}

@media(max-width:800px) {
    .cta-mascot {
        opacity:.22;
        right:-65px;
        width:280px
    }
    .mascot-inline {
        width:125px;
        margin:-.5rem 0 0 .5rem
    }
    .footer-brand img {
        max-width:220px
    }
}

/* V6: logotipo transparente, sin recuadro ni fondo */
.footer-brand,.footer-brand img {
    background:transparent!important;
    border-radius:0!important;
    overflow:visible!important
}

.footer-brand {
    width:260px;
    height:auto;
    min-height:115px;
    display:flex;
    align-items:center
}

.footer-brand img {
    width:100%;
    max-width:260px;
    height:auto;
    object-fit:contain
}

.product-photo {
    background:#f6f4ff
}

.product-photo img {
    object-fit:cover
}

@media(max-width:760px) {
    .footer-brand {
        width:220px
    }
}

/* V7: Logotipo original sin fondo ni contenedor blanco */
.footer-brand {
    background:none!important;
    border:0!important;
    box-shadow:none!important;
    border-radius:0!important;
    overflow:visible!important;
    width:260px!important;
    height:auto!important;
    min-height:0!important;
    padding:0!important
}

.footer-brand img {
    background:none!important;
    width:100%!important;
    height:auto!important;
    max-height:150px!important;
    object-fit:contain!important;
    border-radius:0!important;
    mix-blend-mode:normal!important
}

.product-photo img {
    object-fit:cover!important
}