:root{
    --bg-main:#050505;
    --text-main:#fff;
    --text-soft:rgba(255,255,255,0.85);
    --text-muted:rgba(255,255,255,0.55);
    --glass-strong:rgba(255,255,255,0.12);
    --glass-soft:rgba(255,255,255,0.03);
    --radius-lg:22px;
    --radius-md:14px;
    --ease-cine:cubic-bezier(0.16,1,0.3,1);
}

/* ===== RESET ===== */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    font-family:'Inter',system-ui,sans-serif;
    background:radial-gradient(circle at 50% 0%,rgba(255,255,255,0.08),transparent 45%),var(--bg-main);
    color:var(--text-soft);
    overflow-x:hidden;
    line-height:1.65;
    perspective:1000px;
}
body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:repeating-radial-gradient(circle at 20% 30%,rgba(255,255,255,0.018),transparent 1px);
    opacity:0.15;
    z-index:999;
}

/* ===== HERO ===== */
.hero{
    min-height:100svh;
    display:grid;
    place-items:center;
    text-align:center;
    padding:clamp(90px,12vw,120px) 20px;
    position:relative;
    overflow:hidden;
}
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 38%,rgba(255,255,255,0.15),transparent 65%);
    z-index:0;
    filter:blur(70px);
}

/* ===== LOGO CINEMATIC ESQUINA ===== */
.logo-intro{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    position:absolute;
    top:40px;
    left:40px;
    transform:translate(0,0);
    z-index:10;
    will-change:transform,opacity;
}
.logo-x{
    display:inline-block;
    width:120px;
    height:120px;
    transform:translateX(-200px) scale(0);
    opacity:0;
    cursor:pointer;
    transition:transform .8s var(--ease-cine),opacity .8s;
    filter:drop-shadow(0 15px 25px rgba(255,255,255,0.45));
}
.logo-x:hover{
    transform:scale(1.1);
    filter:drop-shadow(0 20px 35px rgba(255,255,255,0.65));
}
.logo-ction{
    display:inline-block;
    font-weight:900;
    color:#fff;
    font-size:4rem;
    transform:translateX(200px) scale(0);
    opacity:0;
    transition:transform .7s ease,opacity .7s;
    text-shadow:0 0 10px rgba(255,255,255,0.6);
}

/* ===== HERO CONTENT ===== */
.hero-content{
    max-width:820px;
    position:relative;
    z-index:2;
}
.hero-content h1{
    font-size:clamp(2.6rem,6vw,5rem);
    font-weight:900;
    margin-bottom:22px;
    text-shadow:0 0 8px rgba(255,255,255,0.45);
    transition:text-shadow 1s ease-in-out;
}
.hero-content h1:hover{
    text-shadow:0 0 20px rgba(255,255,255,0.85),0 0 50px rgba(255,255,255,0.45);
}
.hero-content p{
    font-size:clamp(1rem,2.4vw,1.25rem);
    margin-bottom:48px;
    color:var(--text-muted);
    text-shadow:0 0 4px rgba(255,255,255,0.25);
}

/* ===== TITLES ===== */
h1,h2,h3{
    text-transform:uppercase;
    letter-spacing:0.09em;
    color:var(--text-main);
    transition:text-shadow .35s ease,filter .35s ease;
    will-change:text-shadow,filter;
}
@media(hover:hover){
    h1:hover,h2:hover,h3:hover{
        text-shadow:0 0 10px rgba(255,255,255,0.95),0 0 28px rgba(255,255,255,0.65),0 0 60px rgba(255,255,255,0.35);
        filter:brightness(1.3);
    }
}

/* ===== BUTTONS ===== */
.btn,.btn-card,.btn-footer{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(180deg,#fff,#e4e4e4);
    color:#000;
    padding:15px 38px;
    border-radius:var(--radius-md);
    font-weight:800;
    letter-spacing:.08em;
    text-decoration:none;
    cursor:pointer;
    transition:transform .35s var(--ease-cine),box-shadow .35s var(--ease-cine);
    box-shadow:0 12px 38px rgba(255,255,255,0.25),0 0 10px rgba(255,255,255,0.1) inset;
}
.btn:hover,.btn-card:hover,.btn-footer:hover{
    transform:translateY(-4px) scale(1.06);
    box-shadow:0 45px 95px rgba(255,255,255,0.38),0 0 18px rgba(255,255,255,0.15) inset;
    animation: glowPulse 1.8s infinite;
}
@keyframes glowPulse{
    0%,100%{box-shadow:0 45px 95px rgba(255,255,255,0.38),0 0 18px rgba(255,255,255,0.15) inset;}
    50%{box-shadow:0 50px 105px rgba(255,255,255,0.45),0 0 20px rgba(255,255,255,0.2) inset;}
}

/* ===== SECTIONS ===== */
section{
    padding:clamp(75px,10vw,120px) 20px;
    text-align:center;
}
h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:65px;}
.cards,.proceso-steps{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:32px;
    max-width:1100px;
    margin:0 auto;
}

/* ===== CARDS 3D HOVER ===== */
.card,.step{
    background:linear-gradient(180deg,var(--glass-strong),var(--glass-soft));
    backdrop-filter:blur(30px);
    padding:36px;
    border-radius:var(--radius-lg);
    box-shadow:0 25px 80px rgba(255,255,255,0.18),inset 0 0 0 1px rgba(255,255,255,0.05);
    transition:transform .45s var(--ease-cine),box-shadow .45s var(--ease-cine);
    transform-style: preserve-3d;
    will-change:transform;
}
.card:hover,.step:hover{
    transform:translateY(-14px) scale(1.02) rotateX(0deg) rotateY(0deg);
    box-shadow:0 60px 120px rgba(255,255,255,0.28),inset 0 0 5px rgba(255,255,255,0.08);
}

/* ===== SCROLL APPEAR ===== */
.pre-appear{
    opacity:0;
    transform:translateY(40px);
    filter:blur(8px);
}
.appear{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
    transition:opacity .9s ease,transform .9s var(--ease-cine),filter .9s ease;
}

/* ===== FOOTER ===== */
footer{
    padding:90px 20px;
    text-align:center;
    color:var(--text-muted);
}
footer a:hover{
    color:#fff;
    text-shadow:0 0 8px rgba(255,255,255,0.55);
}

/* ===== MOBILE ===== */
@media(max-width:480px){
    .btn,.btn-card,.btn-footer{width:100%;}
    .logo-x{width:80px;height:80px;filter:drop-shadow(0 10px 20px rgba(255,255,255,0.4));}
    .logo-ction{font-size:2.5rem;text-shadow:0 0 6px rgba(255,255,255,0.5);}
}