/* ==========================================================
   AXISPRO
   STYLE.CSS
   VERSION: REVELACIÓN
========================================================== */

:root{

--bg:#07111f;
--bg2:#0d1a2d;
--bg3:#14253e;

--text:#f7f8fb;
--muted:#aeb7c6;

--line:rgba(255,255,255,.08);

--gold:#e5c87b;
--gold-soft:#f4dfab;

--cyan:#8dd9ff;

--radius:22px;

--container:1280px;

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

}

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

html{
scroll-behavior:smooth;
}

body{

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

background:
linear-gradient(
180deg,
#050c16 0%,
#09121f 40%,
#0f1d30 100%
);

color:var(--text);

overflow-x:hidden;

}

/* ==========================================================
PRELOADER
========================================================== */

#preloader{

position:fixed;
inset:0;

z-index:99999;

background:#050c16;

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

transition:1s;

}

.preloader-center{
text-align:center;
}

.axis-symbol{

width:90px;
height:90px;

border-radius:50%;

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

margin:auto;

position:relative;

animation:spin 10s linear infinite;

}

.axis-symbol::before{

content:"";

position:absolute;

inset:12px;

border-radius:50%;

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

}

.preloader-title{

margin-top:20px;

font-size:28px;
font-weight:700;
letter-spacing:8px;

}

.preloader-subtitle{

margin-top:10px;

font-size:13px;

color:var(--muted);

letter-spacing:3px;

text-transform:uppercase;

}

@keyframes spin{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}

/* ==========================================================
CONTAINER
========================================================== */

.container{

width:min(
92%,
var(--container)
);

margin:auto;

}

.narrow{

max-width:900px;

}

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

.hero{

position:relative;

height:100vh;

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

overflow:hidden;

}

#heroVideo{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

}

.hero-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
180deg,
rgba(0,0,0,.45),
rgba(0,0,0,.65)
);

backdrop-filter:blur(3px);

}

.hero-content{

position:relative;

z-index:3;

text-align:center;

max-width:900px;

padding:30px;

}

.hero-kicker{

letter-spacing:6px;

font-size:13px;

color:var(--gold);

margin-bottom:24px;

}

.hero h1{

font-size:clamp(
42px,
6vw,
86px
);

line-height:1.05;

font-weight:800;

margin-bottom:30px;

}

.hero-text{

font-size:22px;

line-height:1.8;

color:var(--muted);

max-width:800px;

margin:auto;

}

.primary-button{

display:inline-flex;

margin-top:40px;

padding:
18px 42px;

border-radius:999px;

text-decoration:none;

color:#08121f;

font-weight:700;

background:
linear-gradient(
135deg,
var(--gold),
var(--gold-soft)
);

transition:.3s;

}

.primary-button:hover{

transform:
translateY(-4px);

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

}

/* ==========================================================
SECTIONS
========================================================== */

.section{

padding:
140px 0;

position:relative;

}

.section-header{

text-align:center;

margin-bottom:80px;

}

.section-header h2{

font-size:
clamp(
34px,
4vw,
62px
);

line-height:1.1;

margin-top:18px;

}

.section-header p{

margin-top:20px;

color:var(--muted);

font-size:20px;

line-height:1.8;

}

.eyebrow{

color:var(--gold);

font-size:13px;

letter-spacing:4px;

text-transform:uppercase;

}

/* ==========================================================
RECEPCION
========================================================== */

.reception-panels{

display:grid;

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

gap:30px;

}

.panel-card{

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

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

border-radius:
var(--radius);

padding:40px;

backdrop-filter:
blur(10px);

transition:.4s;

}

.panel-card:hover{

transform:
translateY(-10px);

border-color:
rgba(255,255,255,.18);

}

.panel-card h3{

font-size:28px;

margin-bottom:18px;

}

.panel-card p{

color:var(--muted);

line-height:1.8;

}

.path-button{

margin-top:30px;

background:none;

border:none;

color:var(--gold);

font-weight:700;

cursor:pointer;

}

/* ==========================================================
LA LLAVE
========================================================== */

.mystery-section{

text-align:center;

background:
linear-gradient(
180deg,
rgba(255,255,255,.02),
rgba(255,255,255,.01)
);

}

.mystery-symbol{

font-size:90px;

color:var(--gold);

margin-bottom:20px;

}

.mystery-label{

letter-spacing:8px;

font-size:13px;

color:var(--gold);

margin-bottom:30px;

}

.mystery-section h2{

font-size:52px;

margin-bottom:20px;

}

.mystery-section p{

color:var(--muted);

font-size:22px;

}

/* ==========================================================
PILARES
========================================================== */

.pillars-grid{

display:grid;

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

gap:24px;

}

.pillar{

border-radius:
var(--radius);

padding:40px;

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

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

text-align:center;

}

.pillar span{

display:block;

font-size:12px;

color:var(--gold);

letter-spacing:3px;

margin-bottom:20px;

}

.pillar h3{

font-size:24px;

}

/* ==========================================================
REVELACION
========================================================== */

.revelation-section{

text-align:center;

}

.revelation-section p{

font-size:24px;

line-height:2;

margin-bottom:24px;

color:var(--muted);

}

/* ==========================================================
COMPARACION
========================================================== */

.comparison-grid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:40px;

}

.comparison-card{

padding:50px;

border-radius:
var(--radius);

}

.old-model{

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

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

}

.new-model{

background:
linear-gradient(
135deg,
rgba(229,200,123,.08),
rgba(229,200,123,.03)
);

border:
1px solid rgba(229,200,123,.20);

}

.comparison-card h3{

margin-bottom:30px;

font-size:32px;

}

.comparison-card ul{

list-style:none;

}

.comparison-card li{

padding:14px 0;

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

}

/* ==========================================================
VISION
========================================================== */

.future-section{

text-align:center;

}

.future-section p{

font-size:26px;

line-height:2;

color:var(--muted);

}

/* ==========================================================
FORMULARIO
========================================================== */

#axisForm{

display:grid;

gap:18px;

}

#axisForm input,
#axisForm textarea{

padding:18px;

border-radius:18px;

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

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

color:white;

font-size:16px;

}

#axisForm textarea{

min-height:180px;

resize:vertical;

}

#axisForm button{

padding:20px;

border:none;

border-radius:18px;

cursor:pointer;

font-weight:700;

background:
linear-gradient(
135deg,
var(--gold),
var(--gold-soft)
);

}

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

footer{

padding:
100px 0;

text-align:center;

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

}

.footer-logo{

font-size:32px;

font-weight:800;

letter-spacing:8px;

}

.footer-text{

margin-top:15px;

color:var(--muted);

}

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

@media(max-width:1100px){

.reception-panels,
.pillars-grid,
.comparison-grid{

grid-template-columns:1fr;

}

.hero-text{

font-size:18px;

}

.section{

padding:100px 0;

}

}