/*======================================
        RESET
======================================*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:'Montserrat',sans-serif;
background:#fcf8f3;
color:#222;
overflow-x:hidden;
}
img{
max-width:100%;
display:block;
}
a{
text-decoration:none;
}
section{
padding:120px 0;
}
.dashboard-container{
width:min(1320px,calc(100% - 40px));
margin:auto;
}

/*======================================
        HEADER
======================================*/
.dashboard-header{
position:fixed;
top:20px;
left:50%;
transform:translateX(-50%);
width:min(1350px,calc(100% - 40px));
height:82px;
background:rgba(255,255,255,.75);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border-radius:999px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 30px;
box-shadow:0 20px 50px rgba(0,0,0,.08);
z-index:999;
}
.dashboard-logo img{
height:55px;
}
.dashboard-back{
display:flex;
align-items:center;
gap:10px;
padding:15px 28px;
border-radius:999px;
background:#e1aa69;
color:#fff;
font-weight:700;
transition:.35s;
box-shadow:0 15px 35px rgba(225,170,105,.30);
}
.dashboard-back:hover{
background:#cf944d;
transform:translateY(-3px);
}

/*======================================
        HERO
======================================*/
.hero-dashboard{
min-height:100vh;
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:90px;
width:min(1320px,calc(100% - 40px));
margin:auto;
padding-top:160px;
position:relative;
}
.hero-dashboard::before{
content:"";
position:absolute;
width:650px;
height:650px;
background:radial-gradient(circle,#f3dfc6 0%,transparent 70%);
top:-150px;
right:-200px;
opacity:.55;
pointer-events:none;
}
.hero-badge{
display:inline-flex;
align-items:center;
padding:12px 24px;
background:#fff;
border-radius:999px;
box-shadow:0 12px 30px rgba(0,0,0,.08);
font-weight:700;
color:#b77d3e;
margin-bottom:30px;
}
.hero-text h1{
font-size:68px;
line-height:1.08;
margin-bottom:30px;
font-weight:800;
letter-spacing:-2px;
}
.hero-text p{
font-size:20px;
line-height:1.9;
color:#666;
margin-bottom:45px;
max-width:640px;
}
.hero-buttons{
display:flex;
gap:18px;
margin-bottom:60px;
}
.hero-btn{
padding:18px 34px;
background:#e1aa69;
color:#fff;
border-radius:999px;
font-weight:700;
box-shadow:0 20px 40px rgba(225,170,105,.30);
transition:.35s;
}
.hero-btn:hover{
background:#cf944d;
transform:translateY(-4px);
}
.hero-btn-secondary{
padding:18px 34px;
border:2px solid #e1aa69;
border-radius:999px;
color:#b77d3e;
font-weight:700;
transition:.35s;
}
.hero-btn-secondary:hover{
background:#e1aa69;
color:#fff;
}
.hero-stats{
display:flex;
gap:50px;
flex-wrap:wrap;
}
.hero-stats h3{
font-size:28px;
margin-bottom:8px;
}
.hero-stats span{
color:#777;
font-size:15px;
}
.hero-image{
display:flex;
justify-content:center;
position:relative;
}
.hero-image::before{
content:"";
position:absolute;
width:520px;
height:520px;
background:radial-gradient(circle,#fff 0%,transparent 75%);
border-radius:50%;
z-index:0;
}
.hero-image img{
position:relative;
z-index:2;
width:100%;
max-width:720px;
border-radius:26px;
box-shadow:0 40px 90px rgba(0,0,0,.18);
transition:.45s;
}
.hero-image img:hover{
transform:translateY(-10px) scale(1.02);
}

/*======================================
        SHOWCASE
======================================*/
.dashboard-showcase{
position:relative;
padding:140px 0;
}
.dashboard-showcase::before{
content:"";
position:absolute;
left:-250px;
top:150px;
width:500px;
height:500px;
background:radial-gradient(circle,#f3dfc6 0%,transparent 70%);
opacity:.45;
pointer-events:none;
}
.dashboard-title{
max-width:850px;
margin:0 auto 80px;
text-align:center;
}
.dashboard-title span{
display:inline-block;
padding:10px 22px;
background:#fff;
border-radius:999px;
font-size:14px;
font-weight:700;
color:#b77d3e;
box-shadow:0 12px 30px rgba(0,0,0,.06);
margin-bottom:25px;
}
.dashboard-title h2{
font-size:56px;
line-height:1.1;
margin-bottom:25px;
letter-spacing:-2px;
}
.dashboard-title p{
font-size:19px;
line-height:1.9;
color:#666;
max-width:760px;
margin:auto;
}
.dashboard-image-large{
margin:80px auto;
display:flex;
justify-content:center;
}
.dashboard-image-large img{
width:100%;
max-width:1150px;
border-radius:28px;
box-shadow:0 45px 100px rgba(0,0,0,.18);
transition:.45s;
}
.dashboard-image-large img:hover{
transform:translateY(-8px) scale(1.01);
}

/*======================================
        BENEFICIOS
======================================*/
.dashboard-info-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
margin-top:80px;
}
.dashboard-card{
background:rgba(255,255,255,.55);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.65);
border-radius:28px;
padding:40px;
transition:.35s;
box-shadow:0 20px 50px rgba(0,0,0,.05);
position:relative;
overflow:hidden;
}
.dashboard-card::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:2px;
background:linear-gradient(90deg,transparent,#e1aa69,transparent);
transition:.6s;
}
.dashboard-card:hover::before{
left:100%;
}
.dashboard-card:hover{
transform:translateY(-10px);
box-shadow:0 35px 70px rgba(0,0,0,.10);
}
.dashboard-card i{
width:72px;
height:72px;
display:flex;
justify-content:center;
align-items:center;
background:#e1aa69;
border-radius:20px;
color:#fff;
font-size:28px;
margin-bottom:28px;
box-shadow:0 20px 40px rgba(225,170,105,.30);
}
.dashboard-card h3{
font-size:26px;
margin-bottom:18px;
}
.dashboard-card p{
font-size:17px;
line-height:1.8;
color:#666;
}

/*======================================
        FEATURES SECTION
======================================*/
.dashboard-features-section{
position:relative;
padding:160px 0;
overflow:hidden;
}
.dashboard-features-section::before{
content:"";
position:absolute;
right:-250px;
top:120px;
width:650px;
height:650px;
background:radial-gradient(circle,#f3dfc6 0%,transparent 70%);
opacity:.45;
pointer-events:none;
}
.dashboard-features-container{
width:min(1320px,calc(100% - 40px));
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:90px;
}
.dashboard-device{
position:relative;
display:flex;
justify-content:center;
align-items:center;
}
.dashboard-device-glow{
position:absolute;
width:520px;
height:520px;
border-radius:50%;
background:radial-gradient(circle,rgba(225,170,105,.35) 0%,transparent 70%);
filter:blur(20px);
z-index:0;
animation:pulseGlow 5s ease-in-out infinite;
}

.imac{
position:relative;
width:100%;
max-width:760px;
display:flex;
flex-direction:column;
align-items:center;
z-index:2;
transition:.45s;
}
.imac-screen{
width:100%;
background:#111;
padding:14px;
border-radius:24px;
box-shadow:0 45px 100px rgba(0,0,0,.18);
overflow:hidden;
position:relative;
}
.imac-screen::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:45%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
transform:skewX(-25deg);
transition:1.2s;
z-index:5;
pointer-events:none;
}
.imac:hover .imac-screen::before{
left:140%;
}
.imac-screen img{
width:100%;
display:block;
border-radius:12px;
transition:.45s;
}
.imac-bottom{
width:130px;
height:12px;
background:linear-gradient(#dcdcdc,#bdbdbd);
border-radius:0 0 18px 18px;
}
.imac-stand{
width:34px;
height:95px;
background:linear-gradient(#d8d8d8,#b8b8b8);
}
.imac-base{
width:170px;
height:18px;
border-radius:50%;
background:linear-gradient(#d7d7d7,#b6b6b6);
box-shadow:0 25px 45px rgba(0,0,0,.18);
}
.imac:hover{
transform:translateY(-12px) rotate(-1deg);
}
.imac:hover img{
transform:scale(1.02);
}

.dashboard-content{
position:relative;
z-index:2;
}
.section-mini-title{
display:inline-flex;
padding:10px 22px;
background:#fff;
border-radius:999px;
font-size:14px;
font-weight:700;
color:#b77d3e;
box-shadow:0 12px 30px rgba(0,0,0,.08);
margin-bottom:28px;
}
.dashboard-content h2{
font-size:58px;
line-height:1.08;
letter-spacing:-2px;
margin-bottom:28px;
}
.dashboard-content p{
font-size:19px;
line-height:1.9;
color:#666;
margin-bottom:45px;
}
.dashboard-list{
display:flex;
flex-direction:column;
gap:18px;
}
.dashboard-item{
display:flex;
align-items:center;
gap:16px;
padding:18px 24px;
background:#fff;
border-radius:18px;
box-shadow:0 15px 35px rgba(0,0,0,.05);
transition:.35s;
}
.dashboard-item:hover{
transform:translateX(12px);
box-shadow:0 25px 50px rgba(0,0,0,.10);
}
.dashboard-item i{
font-size:22px;
color:#e1aa69;
}
.dashboard-item span{
font-size:17px;
font-weight:600;
color:#444;
}

/*======================================
        ANIMACIONES
======================================*/
@keyframes pulseGlow{
0%{
transform:scale(1);
opacity:.35;
}
50%{
transform:scale(1.08);
opacity:.55;
}
100%{
transform:scale(1);
opacity:.35;
}
}

/*======================================
        CTA
======================================*/
.dashboard-cta{
padding:170px 0;
position:relative;
overflow:hidden;
}
.dashboard-cta::before{
content:"";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:900px;
height:900px;
background:radial-gradient(circle,rgba(225,170,105,.18) 0%,transparent 70%);
pointer-events:none;
}
.dashboard-cta-content{
position:relative;
width:min(1100px,calc(100% - 40px));
margin:auto;
background:linear-gradient(135deg,#ffffff,#f9f4ee);
border-radius:36px;
padding:90px;
text-align:center;
box-shadow:0 35px 90px rgba(0,0,0,.08);
overflow:hidden;
}
.dashboard-cta-content::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:3px;
background:linear-gradient(90deg,transparent,#e1aa69,transparent);
animation:ctaLine 5s linear infinite;
}
.dashboard-cta-content span{
display:inline-flex;
padding:10px 22px;
background:#fff;
border-radius:999px;
font-size:14px;
font-weight:700;
color:#b77d3e;
box-shadow:0 10px 25px rgba(0,0,0,.08);
margin-bottom:30px;
}
.dashboard-cta-content h2{
font-size:58px;
line-height:1.08;
letter-spacing:-2px;
margin-bottom:30px;
}
.dashboard-cta-content p{
max-width:760px;
margin:0 auto 45px;
font-size:20px;
line-height:1.9;
color:#666;
}
.dashboard-cta-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}
.dashboard-cta-primary{
padding:20px 40px;
background:#e1aa69;
color:#fff;
font-weight:700;
border-radius:999px;
box-shadow:0 20px 40px rgba(225,170,105,.30);
transition:.35s;
}
.dashboard-cta-primary:hover{
background:#cf944d;
transform:translateY(-4px);
}
.dashboard-cta-secondary{
padding:20px 40px;
border:2px solid #e1aa69;
border-radius:999px;
font-weight:700;
color:#b77d3e;
transition:.35s;
}
.dashboard-cta-secondary:hover{
background:#e1aa69;
color:#fff;
}

/*======================================
        FOOTER
======================================*/
.dashboard-footer{
padding:50px 20px;
text-align:center;
background:#1d1d1d;
color:#fff;
}
.dashboard-footer p{
font-size:15px;
opacity:.8;
}

/*======================================
        ANIMACIONES EXTRA
======================================*/
@keyframes ctaLine{
0%{
left:-100%;
}
100%{
left:100%;
}
}

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

/* Portátiles pequeños */
@media (max-width:1200px){
.hero-dashboard,
.dashboard-features-container{
gap:60px;
}
.hero-text h1{
font-size:54px;
}
.dashboard-title h2,
.dashboard-content h2,
.dashboard-cta-content h2{
font-size:48px;
}
}

/* Tablets */
@media (max-width:992px){
section{
padding:90px 0;
}
.hero-dashboard{
grid-template-columns:1fr;
min-height:auto;
gap:60px;
padding-top:150px;
padding-bottom:60px;
text-align:center;
}
.hero-text p{
margin-left:auto;
margin-right:auto;
}
.hero-buttons,
.hero-stats{
justify-content:center;
}
.hero-image::before{
width:100%;
max-width:520px;
height:100%;
}
.dashboard-showcase{
padding:90px 0;
}
.dashboard-title{
margin-bottom:50px;
}
.dashboard-image-large{
margin:50px auto;
}
.dashboard-info-grid{
grid-template-columns:repeat(2,1fr);
gap:22px;
margin-top:50px;
}
.dashboard-features-section{
padding:100px 0;
}
.dashboard-features-container{
grid-template-columns:1fr;
gap:60px;
}
.dashboard-content{
text-align:center;
}
.dashboard-list{
text-align:left;
max-width:620px;
margin:0 auto;
}
.dashboard-cta{
padding:100px 0;
}
.dashboard-cta-content{
padding:60px 40px;
}
}

/* Móviles */
@media (max-width:768px){
section{
padding:70px 0;
}
.dashboard-container,
.hero-dashboard,
.dashboard-features-container,
.dashboard-cta-content{
width:calc(100% - 32px);
}

/* Header */
.dashboard-header{
top:12px;
width:calc(100% - 24px);
height:66px;
padding:0 10px 0 18px;
}
.dashboard-logo img{
height:40px;
}
.dashboard-back{
padding:11px 18px;
font-size:14px;
gap:8px;
}

/* Hero */
.hero-dashboard{
padding-top:120px;
padding-bottom:40px;
gap:45px;
}
.hero-dashboard::before{
width:400px;
height:400px;
right:-150px;
top:-80px;
}
.hero-badge{
padding:10px 20px;
font-size:14px;
margin-bottom:22px;
}
.hero-text h1{
font-size:38px;
letter-spacing:-1px;
margin-bottom:22px;
}
.hero-text p{
font-size:17px;
line-height:1.75;
margin-bottom:32px;
}
.hero-buttons{
flex-direction:column;
align-items:stretch;
gap:14px;
margin-bottom:40px;
}
.hero-btn,
.hero-btn-secondary{
text-align:center;
padding:16px 28px;
}
.hero-stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}
.hero-stats h3{
font-size:20px;
}
.hero-stats span{
font-size:13px;
}
.hero-image img{
border-radius:18px;
box-shadow:0 25px 60px rgba(0,0,0,.15);
}

/* Showcase */
.dashboard-showcase{
padding:70px 0;
}
.dashboard-showcase::before{
width:300px;
height:300px;
left:-150px;
}
.dashboard-title span{
font-size:12px;
padding:9px 18px;
}
.dashboard-title h2{
font-size:34px;
letter-spacing:-1px;
}
.dashboard-title p{
font-size:16px;
line-height:1.75;
}
.dashboard-image-large{
margin:40px auto;
}
.dashboard-image-large img{
border-radius:16px;
box-shadow:0 25px 60px rgba(0,0,0,.15);
}
.dashboard-info-grid{
grid-template-columns:1fr;
gap:18px;
margin-top:40px;
}
.dashboard-card{
padding:28px;
border-radius:22px;
}
.dashboard-card i{
width:58px;
height:58px;
font-size:22px;
border-radius:16px;
margin-bottom:20px;
}
.dashboard-card h3{
font-size:22px;
margin-bottom:12px;
}
.dashboard-card p{
font-size:16px;
}

/* Features / iMac */
.dashboard-features-section{
padding:70px 0;
}
.dashboard-features-section::before{
width:350px;
height:350px;
right:-150px;
}
.dashboard-features-container{
gap:45px;
}
.dashboard-device-glow{
width:300px;
height:300px;
}
.imac-screen{
padding:8px;
border-radius:14px;
}
.imac-screen img{
border-radius:8px;
}
.imac-bottom{
width:80px;
height:8px;
}
.imac-stand{
width:22px;
height:50px;
}
.imac-base{
width:110px;
height:12px;
}
.section-mini-title{
font-size:12px;
padding:9px 18px;
margin-bottom:22px;
}
.dashboard-content h2{
font-size:32px;
letter-spacing:-1px;
margin-bottom:20px;
}
.dashboard-content p{
font-size:16px;
line-height:1.75;
margin-bottom:32px;
}
.dashboard-list{
gap:12px;
}
.dashboard-item{
padding:14px 18px;
gap:12px;
border-radius:14px;
}
.dashboard-item:hover{
transform:none;
}
.dashboard-item i{
font-size:19px;
flex-shrink:0;
}
.dashboard-item span{
font-size:15px;
}

/* CTA */
.dashboard-cta{
padding:70px 0;
}
.dashboard-cta::before{
width:500px;
height:500px;
}
.dashboard-cta-content{
padding:44px 22px;
border-radius:24px;
}
.dashboard-cta-content span{
font-size:12px;
padding:9px 18px;
margin-bottom:22px;
}
.dashboard-cta-content h2{
font-size:30px;
letter-spacing:-1px;
margin-bottom:20px;
}
.dashboard-cta-content p{
font-size:16px;
line-height:1.75;
margin-bottom:32px;
}
.dashboard-cta-buttons{
flex-direction:column;
gap:14px;
}
.dashboard-cta-primary,
.dashboard-cta-secondary{
padding:16px 28px;
text-align:center;
}

/* Footer */
.dashboard-footer{
padding:35px 20px;
}
.dashboard-footer p{
font-size:13px;
line-height:1.6;
}
}

/* Móviles pequeños */
@media (max-width:480px){
.dashboard-back span{
display:none;
}
.dashboard-back{
width:46px;
height:46px;
padding:0;
justify-content:center;
font-size:16px;
}
.hero-text h1{
font-size:32px;
}
.hero-stats{
grid-template-columns:1fr;
gap:18px;
}
.dashboard-title h2,
.dashboard-content h2{
font-size:28px;
}
.dashboard-cta-content h2{
font-size:26px;
}
}

/* Evitar scroll horizontal por los círculos decorativos */
html,body{
overflow-x:hidden;
}
.hero-dashboard,
.dashboard-showcase{
overflow-x:clip;
}
@media (max-width:768px){
.hero-buttons,
.dashboard-cta-buttons{
max-width:420px;
margin-left:auto;
margin-right:auto;
width:100%;
}
.hero-buttons{
margin-bottom:40px;
}
}