/* ===========================================================
   LAIKA LANDING PAGE V2
   STYLE.CSS
=========================================================== */

/* RESET */

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

:root{
    --pink:#ff78b8;
    --pink-dark:#ff4fa3;
    --pink-soft:#ffe5f2;
    --pink-pale:#fff6fb;
    --white:#ffffff;
    --text:#56444e;
    --muted:#8d7482;
    --shadow:0 28px 70px rgba(224,77,148,.20);
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    overflow-x:hidden;
    font-family:'Poppins',sans-serif;
    color:var(--text);

    background:
        linear-gradient(
            180deg,
            #ffdcea 0%,
            #ffedf6 38%,
            #fff8fc 72%,
            #ffffff 100%
        );
}

img{
    max-width:100%;
}

a{
    color:inherit;
}

/* ===========================================================
   BACKGROUND
=========================================================== */

.background{
    position:fixed;
    inset:0;
    z-index:-1;
    overflow:hidden;
    pointer-events:none;
}

.blob{
    position:absolute;
    border-radius:50%;
    filter:blur(75px);
    opacity:.42;
    animation:floatBlob 18s ease-in-out infinite;
}

.blob1{
    width:430px;
    height:430px;
    top:-130px;
    left:-110px;
    background:#ff8fc5;
}

.blob2{
    width:390px;
    height:390px;
    top:95px;
    right:-130px;
    background:#ffc4df;
    animation-delay:4s;
}

.blob3{
    width:340px;
    height:340px;
    bottom:-130px;
    left:40%;
    background:#ffdced;
    animation-delay:8s;
}

.stars{
    position:absolute;
    inset:0;
    opacity:.34;

    background-image:
        radial-gradient(circle, rgba(255,255,255,.95) 1.2px, transparent 1.4px);

    background-size:42px 42px;
}

/* ===========================================================
   LAYOUT
=========================================================== */

.container{
    width:100%;
    min-height:100vh;

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

    padding:42px 18px;
}

.card{
    width:100%;
    max-width:470px;

    position:relative;
    overflow:hidden;
    isolation:isolate;

    padding:0;

    text-align:center;

    border:1px solid rgba(255,255,255,.82);
    border-radius:38px;

background:
    linear-gradient(
        180deg,
        rgba(255,250,253,.96) 0%,
        rgba(255,244,250,.98) 55%,
        rgba(255,238,247,.98) 100%
    );

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    box-shadow:var(--shadow);

    animation:fadeUp .85s ease both;
}

.card::before{
    content:"";
    position:absolute;
    width:270px;
    height:270px;
    top:-175px;
    right:-120px;
    z-index:0;

    border-radius:50%;
    background:rgba(255,255,255,.38);

    pointer-events:none;
}

.card::after{
    content:"";
    position:absolute;
    width:230px;
    height:230px;
    left:-130px;
    bottom:-145px;
    z-index:0;

    border-radius:50%;
    background:rgba(255,255,255,.28);

    pointer-events:none;
}

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

.hero{

    position:relative;

    width:100%;

    height:480px;

    overflow:hidden;

    border-radius:38px 38px 0 0;

    background:#f4bdd8;

    isolation:isolate;

}


/* FOTO */

.hero-photo{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center 18%;

    display:block;

    z-index:0;

    transform:scale(1.015);

}


/* ILUMINACIÓN ROSA */

.hero-light{

    position:absolute;

    width:310px;
    height:310px;

    top:15px;
    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,230,243,.42) 0%,
            rgba(255,147,199,.15) 45%,
            transparent 72%
        );

    filter:blur(7px);

    z-index:1;

    pointer-events:none;

}

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

.hero-bubbles{

    position:absolute;

    inset:0;

    z-index:2;

    pointer-events:none;

}

.bubble{

    position:absolute;

    border-radius:50%;

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

    backdrop-filter:blur(3px);

    box-shadow:
        0 0 18px rgba(255,255,255,.35);

    animation:floatBubble 7s ease-in-out infinite;

}

.b1{

    width:18px;
    height:18px;

    top:52px;
    left:95px;

}

.b2{

    width:10px;
    height:10px;

    top:118px;
    left:65px;

    animation-delay:1s;

}

.b3{

    width:14px;
    height:14px;

    top:70px;
    right:85px;

    animation-delay:2s;

}

.b4{

    width:8px;
    height:8px;

    top:170px;
    right:48px;

    animation-delay:3s;

}

.b5{

    width:12px;
    height:12px;

    top:250px;
    left:42px;

    animation-delay:1.5s;

}

@keyframes floatBubble{

    0%,
    100%{

        transform:translateY(0);

        opacity:.45;

    }

    50%{

        transform:translateY(-8px);

        opacity:.9;

    }

}


/* DEGRADADO INFERIOR */

.hero-shade{

    position:absolute;

    inset:0;

    z-index:2;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.01) 0%,
            rgba(255,255,255,0) 42%,
            rgba(99,20,62,.07) 64%,
            rgba(255,170,213,.20) 78%,
            rgba(255,247,252,.95) 100%
        );

    pointer-events:none;

}


/* NOMBRE */

.hero-heading{

    position:absolute;

    left:24px;
    right:24px;

    bottom:55px;

    z-index:6;

    text-align:center;

}


.hero-heading h1{

    margin:0 0 8px;

    font-family:'Fredoka',sans-serif;

    font-size:76px;

    font-weight:700;

    line-height:.88;

    letter-spacing:-1px;

    color:#ff98c4;

    -webkit-text-stroke:2px #ffffff;

    paint-order:stroke fill;

    text-shadow:

        /* Trazo exterior */

        -2px -2px 0 #fff,
         2px -2px 0 #fff,
        -2px  2px 0 #fff,
         2px  2px 0 #fff,

         0 -2px 0 #fff,
         0  2px 0 #fff,
        -2px 0 0 #fff,
         2px 0 0 #fff,

        /* Volumen rosa */

        0 4px 0 #f6a4ca,

        /* Sombra */

        0 10px 18px rgba(255,120,184,.18);

}


.hero-subtitle{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin:0;

    font-size:17px;

    font-weight:700;

    color:#ff78b8;

    letter-spacing:.2px;

    text-shadow:

        -1px -1px 0 #fff,
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff,

         0px -1px 0 #fff,
         0px  1px 0 #fff,
        -1px  0px 0 #fff,
         1px  0px 0 #fff,

         0 3px 10px rgba(255,120,184,.20);

}

.cloud-icon{

    font-size:20px;

    color:#ffffff;

    text-shadow:

        0 2px 5px rgba(255,120,184,.35);

}


/* SVG DECORATIVOS */

.hero-art{

    position:absolute;

    z-index:4;

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

    filter:
        drop-shadow(0 3px 8px rgba(255,79,163,.28));

    pointer-events:none;

    user-select:none;

}


/* CORAZÓN */

.hero-art-heart{

    width:58px;
    height:58px;

    top:35px;
    left:27px;

    transform:rotate(-12deg);

    animation:heartFloat 4.8s ease-in-out infinite;

}


/* HUELLA */

.hero-art-paw{

    width:54px;
    height:54px;

    top:137px;
    right:28px;

    transform:rotate(10deg);

    animation:pawFloat 5.4s ease-in-out infinite;

}


/* ESTRELLA */

.hero-art-star{

    width:42px;
    height:42px;

    top:54px;
    right:36px;

    animation:starTwinkle 2.7s ease-in-out infinite;

}


/* DESTELLO */

.hero-art-sparkle{

    width:31px;
    height:31px;

    top:152px;
    left:38px;

    animation:starTwinkle 3.2s ease-in-out infinite .5s;

}


/* CÍRCULOS DECORATIVOS */

.hero-dot{

    position:absolute;

    z-index:4;

    display:block;

    border-radius:50%;

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

    box-shadow:
        0 2px 8px rgba(255,79,163,.28);

    pointer-events:none;

}


.hero-dot-one{

    width:10px;
    height:10px;

    top:108px;
    left:78px;

}


.hero-dot-two{

    width:7px;
    height:7px;

    top:111px;
    right:84px;

}


.hero-dot-three{

    width:12px;
    height:12px;

    top:206px;
    right:48px;

}


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

.hero-clouds{

    position:absolute;

    left:-3px;
    right:-3px;
    bottom:-1px;

    width:calc(100% + 6px);
    height:60px;

    z-index:7;

    overflow:visible;

    fill:#fff7fb;

    filter:
        drop-shadow(0 -5px 10px rgba(255,145,197,.16));

    pointer-events:none;

}

.hero-clouds path{

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

    stroke-width:2px;

    stroke-linejoin:round;

}


/* ANIMACIONES */

@keyframes heartFloat{

    0%,
    100%{

        transform:
            translateY(0)
            rotate(-12deg)
            scale(1);

    }

    50%{

        transform:
            translateY(-9px)
            rotate(-6deg)
            scale(1.04);

    }

}


@keyframes pawFloat{

    0%,
    100%{

        transform:
            translateY(0)
            rotate(10deg);

    }

    50%{

        transform:
            translateY(-7px)
            rotate(5deg);

    }

}


@keyframes starTwinkle{

    0%,
    100%{

        opacity:.55;

        transform:
            scale(.82)
            rotate(0deg);

    }

    50%{

        opacity:1;

        transform:
            scale(1.18)
            rotate(12deg);

    }

}

/* ===========================================================
   CONTENT
=========================================================== */

.page-content{
    position:relative;
    z-index:2;

    padding:18px 32px 34px;

    background:
        linear-gradient(
            180deg,
            var(--pink-pale) 0%,
            rgba(255,255,255,.94) 48%,
            #fff7fb 100%
        );
}

/* ===========================================================
   WELCOME BOX
=========================================================== */

.welcome-box{

    width:96%;

    margin:-4px auto 28px;

    padding:18px 20px;

    border:1px solid rgba(255,255,255,.95);

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.92),
            rgba(255,250,253,.82)
        );

    box-shadow:
        0 10px 28px rgba(255,120,184,.12),
        inset 0 1px 0 rgba(255,255,255,.95);

}

.welcome-box p{

    margin:0;

    font-size:14px;

    line-height:1.65;

    font-weight:500;

    color:#5f4c56;

}

.welcome-box strong{

    display:inline;

    color:#ff6eae;

    font-weight:700;

}

.welcome-box p > span{

    margin-left:4px;

    color:#ff79b5;

    font-size:16px;

}

/* ===========================================================
   FEATURES
=========================================================== */

.features{

    display:grid;

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

    width:100%;

    margin:0 0 30px;

}


.feature{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    min-width:0;

    padding:0 8px;

}


/* Separadores verticales */

.feature:not(:last-child)::after{

    content:"";

    position:absolute;

    top:8px;
    right:0;

    width:1px;
    height:82px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,120,184,.32),
            transparent
        );

}


/* Iconos */

.feature i{

    width:auto;
    height:auto;

    margin-bottom:10px;

    display:block;

    color:#f58ab8;

    background:none;

    border-radius:0;

    box-shadow:none;

    font-size:38px;

}


/* Tamaños particulares */

.feature .fa-camera{

    font-size:36px;

}

.feature .fa-comment-dots{

    font-size:37px;

}

.feature .fa-star{

    font-size:39px;

}


/* Texto */

.feature span{

    font-size:12px;

    line-height:1.35;

    font-weight:600;

    color:#5d4a54;

}

/* ===========================================================
   MAIN CTA — PREMIUM STICKER BUTTON
=========================================================== */

.main-cta{

    position:relative;
    isolation:isolate;

    width:100%;
    min-height:96px;

    display:grid;
    grid-template-columns:64px 1fr 34px;
    align-items:center;
    gap:12px;

    margin:10px 0 34px;
    padding:16px 22px;

    overflow:visible;

    border:4px solid rgba(255,255,255,.98);
    border-radius:42px;

    text-decoration:none;
    color:#ffffff;

    background:
        linear-gradient(
            180deg,
            #ff9ac8 0%,
            #ff79b8 46%,
            #ff55a5 100%
        );

    box-shadow:
        0 10px 0 rgba(238,90,157,.18),
        0 20px 36px rgba(255,79,163,.30),
        inset 0 2px 0 rgba(255,255,255,.40),
        inset 0 -3px 0 rgba(225,63,137,.18);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        filter .28s ease;

    animation:ctaPulse 2.8s ease-in-out infinite;

}


/* Halo rosa exterior */

.main-cta::before{

    content:"";

    position:absolute;
    inset:-22px;

    z-index:-2;

    border-radius:56px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,93,169,.42) 0%,
            rgba(255,120,184,.26) 42%,
            transparent 74%
        );

    filter:blur(22px);

    pointer-events:none;

}


/* Brillo de plástico superior */

.main-cta::after{

    content:"";

    position:absolute;

    left:7%;
    right:7%;
    top:7px;

    height:42%;

    z-index:0;

    border-radius:34px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.52) 0%,
            rgba(255,255,255,.12) 58%,
            transparent 100%
        );

    pointer-events:none;

}


/* Hover */

.main-cta:hover{

    transform:
        translateY(-4px)
        scale(1.012);

    filter:saturate(1.05);

    box-shadow:
        0 12px 0 rgba(238,90,157,.18),
        0 28px 48px rgba(255,79,163,.40),
        inset 0 2px 0 rgba(255,255,255,.46),
        inset 0 -3px 0 rgba(225,63,137,.20);

}


/* Accesibilidad por teclado */

.main-cta:focus-visible{

    outline:3px solid rgba(255,79,163,.34);
    outline-offset:5px;

}


/* Corazón izquierdo — Font Awesome */

.main-cta-icon{

    position:relative;
    z-index:2;

    width:52px;
    height:52px;

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

    flex-shrink:0;

    font-size:40px;

    color:#ffffff;

    text-shadow:
        0 3px 8px rgba(190,44,112,.25);

    transition:
        transform .25s ease;

}

.main-cta:hover .main-cta-icon{

    transform:
        scale(1.08)
        rotate(-4deg);

}


/* Texto central */

.main-cta-text{

    position:relative;
    z-index:2;

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

    line-height:1.05;

}

.main-cta-text strong{

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

    letter-spacing:.65px;

    text-shadow:
        0 2px 5px rgba(190,44,112,.20);

}

.main-cta-text small{

    margin-top:8px;

    font-size:13px;
    font-weight:800;

    letter-spacing:1.35px;

    color:#fff3a8;

    text-shadow:
        0 2px 4px rgba(190,44,112,.18);

}


/* Flecha derecha */

.main-cta-arrow{

    position:relative;
    z-index:2;

    font-size:25px;

    color:#ffffff;

    opacity:.98;

    text-shadow:
        0 3px 7px rgba(190,44,112,.22);

}


/* Animación suave */

@keyframes ctaPulse{

    0%,
    100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.016);
    }

}

/* ===========================================================
   CUTE DIVIDER
=========================================================== */

.cute-divider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin:2px 0 24px;

    color:#f48ab7;

}


.cute-divider i{

    font-size:14px;

}


.cute-divider .fa-paw{

    font-size:16px;

}


.cute-divider .fa-star{

    font-size:15px;

}


.cute-divider span{

    font-size:8px;

    color:#f6a8c8;

    opacity:.85;

}

/* ===========================================================
   LEGAL FOOTER
=========================================================== */

.legal-footer{

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:2px;

    color:#ed7faf;

}


/* Cápsula 18+ */

.age-badge{

    width:auto;
    height:auto;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin:0;

    padding:5px 12px;

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

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            #ffb2d3,
            #ff8cbd
        );

    color:#ffffff;

    font-size:14px;

    font-weight:700;

    line-height:1;

    box-shadow:
        0 5px 12px rgba(255,120,184,.22),
        inset 0 1px 0 rgba(255,255,255,.45);

}


/* Adults Only */

.legal-footer strong{

    font-size:14px;

    font-weight:700;

    letter-spacing:0;

    color:#ed7faf;

}

/* ===========================================================
   ANIMATIONS
=========================================================== */

@keyframes floatBlob{
    0%,
    100%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(25px,-35px);
    }
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(34px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes heroFloat{
    0%,
    100%{
        transform:translateY(0) rotate(-8deg);
    }

    50%{
        transform:translateY(-8px) rotate(-3deg);
    }
}

@keyframes heroTwinkle{
    0%,
    100%{
        opacity:.52;
        transform:scale(.84) rotate(0);
    }

    50%{
        opacity:1;
        transform:scale(1.16) rotate(12deg);
    }
}

@keyframes featureFade{
    from{
        opacity:0;
        transform:translateY(14px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes ctaPulse{
    0%,
    100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.018);
    }
}

@keyframes ctaShine{
    0%,
    62%{
        left:-42%;
        opacity:0;
    }

    72%{
        opacity:1;
    }

    100%{
        left:125%;
        opacity:0;
    }
}

/* ===========================================================
   RESPONSIVE
=========================================================== */

@media (max-width:520px){

    .container{
        align-items:flex-start;
        padding:0;
    }

    .card{
        max-width:none;
        min-height:100vh;

        border-radius:0;
        border-left:0;
        border-right:0;
    }

.hero{

    height:470px;

    border-radius:0;

}

    .page-content{
        padding:16px 22px 30px;
    }

}

@media (max-width:390px){

    .hero{
        height:430px;
    }

    .hero-heading{
        left:18px;
        right:18px;
        bottom:46px;
    }

.hero-heading h1{

    margin:0 0 8px;

    font-family:'Fredoka',sans-serif;

    font-size:76px;

    font-weight:700;

    line-height:.88;

    letter-spacing:-1px;

    color:#ffacd0;

    -webkit-text-stroke:3px #ffffff;

    paint-order:stroke fill;

    text-shadow:
        0 4px 0 #f27eae,
        0 9px 18px rgba(221,73,139,.34);

}

    .hero-heading p{
        font-size:13px;
    }

    .page-content{
        padding-left:16px;
        padding-right:16px;
    }

    .welcome-box{
        padding:16px 17px;
    }

    .feature{
        padding-left:4px;
        padding-right:4px;
    }

    .feature i{
        width:43px;
        height:43px;
        font-size:17px;
    }

    .feature span{
        font-size:10px;
    }

    .main-cta{
        grid-template-columns:64px 1fr 34px;
        min-height:80px;
        padding-left:14px;
        padding-right:14px;
    }

    .main-cta-icon{
        width:42px;
        height:42px;
    }

    .main-cta-text strong{
        font-size:14px;
    }

}

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

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

}

.laika-logo{

    margin:0 0 -25px;

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

}

.laika-logo-img{

    width:300px;
    height:auto;

    display:block;

    transform:translateY(20px);

}

.logo-i{
    position:relative;
    display:inline-block;
}

.logo-heart{
    position:absolute;

    left:50%;
    top:-5px;

    transform:translateX(-50%);

    font-size:24px;
    line-height:1;

    color:#ff8fbe;

    -webkit-text-stroke:3px #ffffff;
    paint-order:stroke fill;

    text-shadow:
        0 3px 0 #f27eae,
        0 5px 10px rgba(221,73,139,.28);

    pointer-events:none;
}

.inline-heart{

    width:16px;
    height:16px;

    margin-left:3px;

    vertical-align:-2px;

    display:inline-block;

}

/* ===========================================================
   AJUSTE DE ESPACIADO — VERSIÓN MÁS COMPACTA
=========================================================== */

@media (max-width:520px){

    .page-content{
        padding:
            10px
            22px
            24px;
    }

    .welcome-box{
        margin:
            -4px
            auto
            20px;

        padding:
            15px
            18px;
    }

    .features{
        margin-bottom:20px;
    }

    .feature i{
        margin-bottom:7px;
    }

    .main-cta{
        margin:
            4px
            0
            22px;
    }

    .cute-divider{
        margin:
            0
            0
            15px;
    }

    .legal-footer{
        margin-top:0;
    }

}