/* ===========================
   REDCON PROPOSAL 2026
   PipeCreativo
=========================== */

:root{
    --bg:#050816;
    --bg2:#0b1023;
    --primary:#00D9FF;
    --secondary:#005DFF;
    --green:#00FFAE;
    --red:#ff5f6d;
    --white:#ffffff;
    --text:#d7d7d7;
    --card:rgba(255,255,255,.06);
    --border:rgba(255,255,255,.08);
    --shadow:0 20px 60px rgba(0,0,0,.45);
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:linear-gradient(180deg,#050816,#09142d,#050816);
    color:white;
    overflow-x:hidden;
}

/* Fondo luminoso */

body::before{

content:"";

position:fixed;

width:700px;

height:700px;

background:#00D9FF22;

filter:blur(160px);

top:-250px;

right:-250px;

z-index:-2;

}

body::after{

content:"";

position:fixed;

width:600px;

height:600px;

background:#005DFF22;

filter:blur(160px);

bottom:-250px;

left:-250px;

z-index:-2;

}

/* NAV */

nav{

position:fixed;

top:0;

left:0;

width:100%;

padding:20px 8%;

display:flex;

justify-content:space-between;

align-items:center;

backdrop-filter:blur(14px);

background:rgba(5,8,22,.45);

z-index:999;

border-bottom:1px solid rgba(255,255,255,.05);

}

.logo{

font-size:30px;

font-weight:800;

letter-spacing:2px;

}

.logo span{

color:var(--primary);

}

.btnNav{

padding:12px 26px;

border-radius:50px;

background:linear-gradient(90deg,var(--primary),var(--secondary));

color:white;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.btnNav:hover{

transform:translateY(-3px);

box-shadow:0 10px 35px rgba(0,217,255,.4);

}

/* HERO */

.hero{

min-height:100vh;

background:

linear-gradient(rgba(3,8,20,.78),rgba(3,8,20,.88)),

url('../img/mesitas.jpg');

background-size:cover;

background-position:center;

background-attachment:fixed;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 8%;

}

.heroContent{

max-width:700px;

}

.smallTitle{

letter-spacing:4px;

color:var(--primary);

margin-bottom:25px;

}

.hero h1{

font-size:70px;

font-weight:800;

line-height:1.05;

margin-bottom:25px;

}

.hero h1 span{

background:linear-gradient(90deg,#00D9FF,#00FFAE);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:20px;

color:var(--text);

line-height:1.8;

margin-bottom:40px;

}

.btnPrincipal{

display:inline-block;

padding:18px 40px;

border-radius:60px;

text-decoration:none;

background:linear-gradient(90deg,#00D9FF,#005DFF);

color:white;

font-weight:700;

transition:.3s;

}

.btnPrincipal:hover{

transform:scale(1.05);

box-shadow:0 20px 45px rgba(0,217,255,.4);

}

/* CÍRCULO */

.heroCircle{

display:flex;

justify-content:center;

align-items:center;

}

.circle{

width:430px;

height:430px;

border-radius:50%;

background:radial-gradient(circle,#00D9FF,#005DFF,#09142d);

box-shadow:0 0 120px #00D9FF55;

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

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-25px);

}

}

/* SECTION */

.section{

padding:120px 8%;

text-align:center;

}

.dark{

background:#091223;

}

.section h2{

font-size:48px;

margin-bottom:60px;

}

/* CARDS */

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}

.card{

padding:40px;

border-radius:22px;

background:var(--card);

backdrop-filter:blur(18px);

border:1px solid var(--border);

transition:.4s;

box-shadow:var(--shadow);

font-size:45px;

}

.card h3{

margin-top:20px;

font-size:20px;

}

.card:hover{

transform:translateY(-12px);

}

.red{

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

}

/* TIMELINE */

.timeline{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:25px;

font-size:28px;

font-weight:600;

}

/* NUMBERS */

.numbers{

padding:140px 8%;

text-align:center;

}

#contador{

font-size:120px;

font-weight:800;

color:var(--primary);

margin:25px 0;

}

/* SERVICES */

.services{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}

.service{

background:var(--card);

border:1px solid var(--border);

border-radius:20px;

padding:40px;

font-size:50px;

transition:.35s;

backdrop-filter:blur(16px);

}

.service h3{

margin-top:20px;

font-size:22px;

}

.service:hover{

transform:translateY(-12px) rotate(-1deg);

box-shadow:0 25px 45px rgba(0,217,255,.2);

}

/* ROADMAP */

.roadmap{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:30px;

}

.roadmap div{

background:linear-gradient(180deg,#101b37,#0d152c);

padding:40px;

border-radius:20px;

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

}

.roadmap div:first-child{

border-color:var(--primary);

}

/* PRICING */

.pricing{

padding:120px 8%;

text-align:center;

}

.pricingCards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

margin-top:60px;

}

.price{

padding:50px;

border-radius:25px;

background:var(--card);

backdrop-filter:blur(20px);

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

transition:.4s;

}

.price.active{

transform:scale(1.06);

border:2px solid var(--primary);

box-shadow:0 25px 55px rgba(0,217,255,.35);

}

.price h1{

font-size:52px;

margin:25px 0;

color:var(--primary);

}

/* FINAL */

.final{

padding:180px 8%;

text-align:center;

}

.final h1{

font-size:64px;

margin-bottom:25px;

}

.final p{

font-size:22px;

color:var(--text);

margin-bottom:45px;

}

.btnFinal{

display:inline-block;

padding:22px 60px;

border-radius:60px;

background:linear-gradient(90deg,#00D9FF,#005DFF);

font-size:22px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.btnFinal:hover{

transform:scale(1.10);

box-shadow:0 30px 80px rgba(0,217,255,.55);

}

/* CANVAS */

canvas{

max-width:900px;

margin:auto;

}

/* RESPONSIVE */

@media(max-width:900px){

.hero{

flex-direction:column;

justify-content:center;

text-align:center;

padding-top:120px;

}

.hero h1{

font-size:48px;

}

.circle{

width:260px;

height:260px;

}

#contador{

font-size:80px;

}

.final h1{

font-size:42px;

}

}

.card,
.service,
.price{

transform-style:preserve-3d;

transition:.35s ease;

}
/*=========================
PARTÍCULAS
=========================*/

#particles{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

z-index:-5;

}

/*=========================
CURSOR GLOW
=========================*/

.cursorGlow{

position:fixed;

width:300px;

height:300px;

border-radius:50%;

pointer-events:none;

background:radial-gradient(circle,
rgba(0,217,255,.18),
transparent 70%);

filter:blur(40px);

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

z-index:-2;

}

/*=========================
TEXTOS
=========================*/

.hero h1{

text-shadow:0 0 40px rgba(0,217,255,.15);

}

.section h2{

text-shadow:0 0 25px rgba(0,217,255,.15);

}

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

.card::before,
.service::before,
.price::before{

content:"";

position:absolute;

left:-150%;

top:0;

width:80%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.18),

transparent

);

transform:skewX(-25deg);

transition:.8s;

}

.card:hover::before,
.service:hover::before,
.price:hover::before{

left:180%;

}

.card,
.service,
.price{

overflow:hidden;

position:relative;

}

.heroStats{

display:flex;

flex-direction:column;

gap:25px;

}

.glassCard{

width:330px;

padding:30px;

border-radius:20px;

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

backdrop-filter:blur(20px);

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

transition:.35s;

box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.glassCard:hover{

transform:translateY(-10px) scale(1.04);

border-color:#00D9FF;

box-shadow:0 30px 60px rgba(0,217,255,.25);

}

.glassCard span{

font-size:45px;

}

.glassCard h3{

margin:15px 0;

}