/* ==========================================
   DANKA 3D
   Premium Landing Page
   Estilo Apple
========================================== */

/* RESET */

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

/* VARIABLES */

:root{

    --primary:#49D9E6;
    --primary-light:#DDF9FB;

    --black:#1B1B1B;
    --gray:#6B7280;

    --white:#FFFFFF;

    --glass:rgba(255,255,255,.55);

    --shadow:0 25px 60px rgba(0,0,0,.08);

    --radius:28px;

    --transition:.35s ease;

}

/* HTML */

html{

    scroll-behavior:smooth;

}

/* BODY */

body{

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

    background:#ffffff;

    color:var(--black);

    overflow-x:hidden;

}

/* LINKS */

a{

    text-decoration:none;

    color:inherit;

}

/* IMAGES */

img{

    width:100%;

    display:block;

}

/* LISTAS */

ul{

    list-style:none;

}

/* ==========================
        NAVBAR
========================== */

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

}

.navbar{

    width:min(1200px,92%);

    margin:auto;

    margin-top:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 30px;

    backdrop-filter:blur(20px);

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

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

    border-radius:999px;

    box-shadow:var(--shadow);

}

.logo img{

    width:150px;

}

.navbar ul{

    display:flex;

    gap:35px;

}

.navbar a{

    font-weight:500;

    transition:var(--transition);

}

.navbar a:hover{

    color:var(--primary);

}

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

.hero{

    width:min(1250px,92%);

    margin:auto;

    min-height: auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

.hero-content{

    animation:fadeUp 1s ease;

}

.badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:var(--primary-light);

    color:#0097a7;

    font-size:.9rem;

    margin-bottom:28px;

}

.hero h1{

    font-size:4.3rem;

    line-height:1.05;

    margin-bottom:28px;

}

.hero p{

    font-size:1.2rem;

    color:var(--gray);

    line-height:1.8;

    max-width:520px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}

.btn-primary{

    background:linear-gradient(

    135deg,

    #49D9E6,

    #67E7F1

    );

    color:white;

    border-radius:999px;

    padding:20px 42px;

    font-weight:700;

    box-shadow:

    0 25px 50px rgba(73,217,230,.35);

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-6px);

}

.btn-secondary{

    background:white;

    border:2px solid #ECECEC;

    border-radius:999px;

    padding:20px 42px;

    transition:.35s;

}

.btn-secondary:hover{

    background:#F8F8F8;

}



.hero-image{

    animation:float 6s ease-in-out infinite;

}

/* ==========================
        STATS
========================== */

.stats{

    width:min(1200px,92%);

    margin:120px auto;

    display:grid;

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

    gap:30px;

}

.stat{

    background:white;

    border-radius:30px;

    padding:45px;

    text-align:center;

    box-shadow:var(--shadow);

}

.stat h2{

    font-size:2.4rem;

    color:var(--primary);

    margin-bottom:10px;

}

.stat p{

    color:var(--gray);

}

/* ==========================
    ANIMACIONES
========================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-20px);

    }

    100%{

        transform:translateY(0px);

    }

}/* ==========================================
   TITULOS GENERALES
========================================== */

section{

    padding:120px 0;

}

section h2{

    font-size:3rem;

    text-align:center;

    margin-bottom:70px;

    font-weight:700;

}


/* ==========================================
   SERVICES
========================================== */

.services{

    width:min(1200px,92%);

    margin:auto;

}

.cards{

    display:grid;

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

    gap:30px;

}

.card{

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

    backdrop-filter:blur(20px);

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

    border-radius:32px;

    padding:45px 35px;

    text-align:center;

    transition:.45s;

    box-shadow:0 25px 50px rgba(0,0,0,.06);

}

.card:hover{

    transform:translateY(-15px);

    box-shadow:0 35px 70px rgba(73,217,230,.25);

}

.card h3{

    font-size:3rem;

    margin-bottom:25px;

}

.card h4{

    font-size:1.3rem;

    margin-bottom:18px;

}

.card p{

    color:var(--gray);

    line-height:1.7;

}


/* ==========================================
   GALERIA
========================================== */

.gallery{

    width:min(1350px,94%);

    margin:auto;

}

.gallery-grid{

    display:grid;

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

    gap:30px;

}

.gallery-grid img{

    border-radius:30px;

    aspect-ratio:1/1;

    object-fit:cover;

    transition:.6s;

    cursor:pointer;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.gallery-grid img:hover{

    transform:scale(1.05);

    box-shadow:0 35px 70px rgba(73,217,230,.30);

}


/* ==========================================
   PROCESO
========================================== */

.process{

    width:min(1200px,92%);

    margin:auto;

}

.timeline{

    display:grid;

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

    gap:20px;

}

.timeline div{

    background:white;

    border-radius:30px;

    padding:45px;

    text-align:center;

    font-size:1.2rem;

    font-weight:600;

    box-shadow:var(--shadow);

    transition:.4s;

}

.timeline div:hover{

    transform:translateY(-10px);

}


/* ==========================================
   CONTACTO
========================================== */

.contact{

    width:min(1000px,90%);

    margin:auto;

    text-align:center;

}

.contact p{

    font-size:1.15rem;

    color:var(--gray);

    max-width:700px;

    margin:30px auto 60px;

    line-height:1.8;

}

.socials{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}

.socials a{

    padding:18px 34px;

    border-radius:999px;

    background:var(--primary);

    color:white;

    font-weight:600;

    transition:.35s;

}

.socials a:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(73,217,230,.35);

}


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

footer{

    padding:50px 0;

    text-align:center;

    color:var(--gray);

    border-top:1px solid #eeeeee;

    margin-top:60px;

}

footer p:first-child{

    font-weight:700;

    margin-bottom:10px;

}


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

@media(max-width:1100px){

.hero{

grid-template-columns:1fr;

text-align:center;

padding-top:180px;

}

.hero p{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.cards{

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

}

.gallery-grid{

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

}

.timeline{

grid-template-columns:1fr;

}

.stats{

grid-template-columns:1fr;

}

}


@media(max-width:768px){

.navbar{

padding:16px 20px;

}

.navbar ul{

display:none;

}

.hero h1{

font-size:2.8rem;

}

.cards{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

text-align:center;

}

section{

padding:80px 0;

}

section h2{

font-size:2.2rem;

}

}/* ==========================================
   TITULOS GENERALES
========================================== */

section{

    padding:120px 0;

}

section h2{

    font-size:3rem;

    text-align:center;

    margin-bottom:70px;

    font-weight:700;

}


/* ==========================================
   SERVICES
========================================== */

.services{

    width:min(1200px,92%);

    margin:auto;

}

.cards{

    display:grid;

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

    gap:30px;

}

.card{

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

    backdrop-filter:blur(20px);

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

    border-radius:32px;

    padding:45px 35px;

    text-align:center;

    transition:.45s;

    box-shadow:0 25px 50px rgba(0,0,0,.06);

}

.card:hover{

    transform:translateY(-15px);

    box-shadow:0 35px 70px rgba(73,217,230,.25);

}

.card h3{

    font-size:3rem;

    margin-bottom:25px;

}

.card h4{

    font-size:1.3rem;

    margin-bottom:18px;

}

.card p{

    color:var(--gray);

    line-height:1.7;

}


/* ==========================================
   GALERIA
========================================== */

.gallery{

    width:min(1350px,94%);

    margin:auto;

}

.gallery-grid{

    display:grid;

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

    gap:30px;

}

.gallery-grid img{

    border-radius:30px;

    aspect-ratio:1/1;

    object-fit:cover;

    transition:.6s;

    cursor:pointer;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.gallery-grid img:hover{

    transform:scale(1.05);

    box-shadow:0 35px 70px rgba(73,217,230,.30);

}


/* ==========================================
   PROCESO
========================================== */

.process{

    width:min(1200px,92%);

    margin:auto;

}

.timeline{

    display:grid;

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

    gap:20px;

}

.timeline div{

    background:white;

    border-radius:30px;

    padding:45px;

    text-align:center;

    font-size:1.2rem;

    font-weight:600;

    box-shadow:var(--shadow);

    transition:.4s;

}

.timeline div:hover{

    transform:translateY(-10px);

}


/* ==========================================
   CONTACTO
========================================== */

.contact{

    width:min(1000px,90%);

    margin:auto;

    text-align:center;

}

.contact p{

    font-size:1.15rem;

    color:var(--gray);

    max-width:700px;

    margin:30px auto 60px;

    line-height:1.8;

}

.socials{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}

.socials a{

    padding:18px 34px;

    border-radius:999px;

    background:var(--primary);

    color:white;

    font-weight:600;

    transition:.35s;

}

.socials a:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(73,217,230,.35);

}


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

footer{

    padding:50px 0;

    text-align:center;

    color:var(--gray);

    border-top:1px solid #eeeeee;

    margin-top:60px;

}

footer p:first-child{

    font-weight:700;

    margin-bottom:10px;

}


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

@media(max-width:1100px){

.hero{

grid-template-columns:1fr;

text-align:center;

padding-top:180px;

}

.hero p{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.cards{

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

}

.gallery-grid{

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

}

.timeline{

grid-template-columns:1fr;

}

.stats{

grid-template-columns:1fr;

}

}


@media(max-width:768px){

.navbar{

padding:16px 20px;

}

.navbar ul{

display:none;

}

.hero h1{

font-size:2.8rem;

}

.cards{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

text-align:center;

}

section{

padding:80px 0;

}

section h2{

font-size:2.2rem;

}

}/*==================================
NAVBAR PREMIUM
===================================*/

.navbar{

    position:fixed;

    top:25px;

    left:50%;

    transform:translateX(-50%);

    width:min(1200px,92%);

    height:80px;

    padding:0 35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-radius:50px;

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

    backdrop-filter:blur(30px);

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

    transition:.45s;

}

.logo img{

    width:165px;

}

.nav-links{

    display:flex;

    gap:38px;

}

.nav-links a{

    font-weight:500;

    transition:.35s;

}

.nav-links a:hover{

    color:#49D9E6;

}

.nav-btn{

    padding:14px 28px;

    border-radius:999px;

    background:#49D9E6;

    color:white;

    font-weight:600;

    transition:.35s;

}

.nav-btn:hover{

    transform:translateY(-3px);

}/*==================================
    PREMIUM BACKGROUND
==================================*/

body{

    background:#ffffff;

    background-image:

    radial-gradient(circle at 10% 10%,
    rgba(73,217,230,.18),
    transparent 30%),

    radial-gradient(circle at 90% 80%,
    rgba(73,217,230,.12),
    transparent 25%),

    radial-gradient(circle at 50% 50%,
    rgba(73,217,230,.08),
    transparent 45%);

}

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

.hero{

    position:relative;

}

.hero::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:linear-gradient(

    180deg,

    rgba(73,217,230,.30),

    rgba(73,217,230,0)

    );

    filter:blur(140px);

    top:50%;

    left:65%;

    transform:translate(-50%,-50%);

    z-index:-1;

}/*==================================
HISTORIAS HECHAS REALIDAD
===================================*/

.stories{

    width:min(1300px,92%);

    margin:auto;

}

.stories-header{

    text-align:center;

    max-width:700px;

    margin:0 auto 70px;

}

.stories-header span{

    color:#49D9E6;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}

.stories-header h2{

    font-size:3.5rem;

    margin:20px 0;

}

.stories-header p{

    color:#6B7280;

    line-height:1.8;

}

.stories-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:35px;

}

.story-large{

    position:relative;

    overflow:hidden;

    border-radius:40px;

}

.story-large img{

    width:100%;

    height:700px;

    object-fit:cover;

    transition:.7s;

}

.story-large:hover img{

    transform:scale(1.05);

}

.story-text{

    position:absolute;

    left:50px;

    bottom:50px;

    color:white;

    max-width:420px;

}

.story-text h3{

    font-size:2.2rem;

    margin-bottom:15px;

}

.story-text p{

    line-height:1.8;

}

.story-card{

    display:flex;

    flex-direction:column;

    background:white;

    border-radius:30px;

    overflow:hidden;

    box-shadow:0 25px 50px rgba(0,0,0,.08);

    transition:.4s;

}

.story-card:hover{

    transform:translateY(-10px);

}

.story-card img{

    height:300px;

    object-fit:cover;

}

.story-card div{

    padding:30px;

}

.story-card h3{

    margin-bottom:15px;

}

.story-card p{

    color:#6B7280;

    line-height:1.6;

}

/* RESPONSIVE */

@media(max-width:900px){

.stories-grid{

grid-template-columns:1fr;

}

.story-large img{

height:450px;

}

}/*==================================
CALL TO ACTION
===================================*/

.cta{

    width:min(1200px,92%);
    margin:120px auto;

}

.cta-card{

    padding:90px 70px;

    border-radius:40px;

    text-align:center;

    background:linear-gradient(
        135deg,
        #49D9E6,
        #7CEEF5
    );

    color:white;

    box-shadow:
    0 35px 80px rgba(73,217,230,.35);

    position:relative;

    overflow:hidden;

}

.cta-card::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

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

    top:-180px;

    right:-150px;

}

.cta-card::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

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

    bottom:-150px;

    left:-100px;

}

.cta span{

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.cta h2{

    font-size:3.2rem;

    margin:25px 0;

}

.cta p{

    max-width:700px;

    margin:0 auto 45px;

    line-height:1.8;

    font-size:1.1rem;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta .btn-secondary{

    background:white;

    color:#1B1B1B;

}

.cta .btn-secondary:hover{

    background:#F5F5F5;

}/*==================================
FOOTER PREMIUM
===================================*/

footer{

    background:#F8FCFD;

    padding:80px 0;

}

.footer-content{

    width:min(1000px,92%);

    margin:auto;

    text-align:center;

}

.footer-logo{

    width:180px;

    margin:0 auto 30px;

}

.footer-content p{

    color:#6B7280;

    margin-bottom:35px;

}

.footer-social{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    margin-bottom:40px;

}

.footer-social a{

    font-weight:600;

    transition:.3s;

}

.footer-social a:hover{

    color:#49D9E6;

}

footer small{

    color:#9CA3AF;

}/*==================================
ANIMACIONES
===================================*/

.fade{

    opacity:0;

    transform:translateY(70px);

    transition:1s ease;

}

.fade.show{

    opacity:1;

    transform:translateY(0);

}


/*==================================
NAVBAR SCROLL
===================================*/

.navbar-scroll{

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

    backdrop-filter:blur(40px);

    box-shadow:

    0 20px 60px rgba(0,0,0,.08);

}


/*==================================
FLOAT
===================================*/

.hero-image{

    transition:transform .2s linear;

}


/*==================================
BOTONES
===================================*/

.btn-primary,
.btn-secondary{

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-6px) scale(1.03);

}

.btn-secondary:hover{

    transform:translateY(-6px);

}


/*==================================
IMAGENES
===================================*/

.story-large img,
.story-card img{

    transition:.7s;

}

.story-large:hover img,
.story-card:hover img{

    transform:scale(1.08);

}


/*==================================
TARJETAS
===================================*/

.card,
.story-card,
.stat,
.timeline div{

    transition:.45s;

}

.card:hover,
.story-card:hover,
.stat:hover,
.timeline div:hover{

    transform:translateY(-12px);

}.hero-circle{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:

    radial-gradient(

    circle,

    rgba(73,217,230,.28),

    rgba(73,217,230,0)

    );

    filter:blur(10px);

    z-index:-1;

}/*==================================
LOADER
===================================*/

#loader{

    position:fixed;

    inset:0;

    background:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:opacity .8s ease,
               visibility .8s ease;

}

#loader.hide{

    opacity:0;

    visibility:hidden;

}

.loader-content{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.loader-logo{

    width:220px;

    animation:logoIntro 1.6s ease;

}

.loader-line{

    width:0;

    height:4px;

    margin-top:30px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #49D9E6,
        #8DECF5
    );

    animation:loaderLine 1.5s ease forwards;

}

@keyframes logoIntro{

    0%{

        opacity:0;

        transform:scale(.8);

    }

    40%{

        opacity:1;

        transform:scale(1);

    }

    80%{

        transform:scale(1.05);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes loaderLine{

    from{

        width:0;

    }

    to{

        width:180px;

    }

}.stories-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.stories-grid img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
    display: block !important;
}