/* ==========================
   ACONECTARME PREMIUM UI
========================== */

:root{

--primary:#0A66C2;
--secondary:#D4AF37;
--dark:#0f172a;
--light:#ffffff;
--gray:#f8fafc;
--text:#334155;
--success:#16a34a;

--radius:20px;

--shadow:
0 15px 40px rgba(0,0,0,.08);

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;
background:#fff;
color:var(--text);
line-height:1.6;

}

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

.container{

width:90%;
max-width:1400px;
margin:auto;

}

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

.navbar{

position:fixed;
top:0;
left:0;
width:100%;

z-index:999;

backdrop-filter:blur(12px);

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

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

}

.nav-container{

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

padding:18px 0;

}

.logo img{

height:60px;

}

.nav-links{

display:flex;
gap:35px;
list-style:none;

}

.nav-links a{

text-decoration:none;

font-weight:600;

color:var(--dark);

transition:.3s;

}

.nav-links a:hover{

color:var(--primary);

}

/* ==========================
   BUTTONS
========================== */

.btn-primary{

display:inline-block;

padding:14px 28px;

background:
linear-gradient(
135deg,
#0A66C2,
#2563eb
);

color:white;

border-radius:50px;

text-decoration:none;

font-weight:700;

transition:.3s;

box-shadow:
0 10px 30px rgba(37,99,235,.25);

}

.btn-primary:hover{

transform:
translateY(-3px);

}

.btn-secondary{

display:inline-block;

padding:14px 28px;

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

border-radius:50px;

text-decoration:none;

font-weight:700;

color:var(--primary);

}

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

.hero{

height:100vh;

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

position:relative;

overflow:hidden;

background:
linear-gradient(
135deg,
#f8fafc,
#e2e8f0
);

}

.hero::before{

content:"";

position:absolute;

width:900px;
height:900px;

background:
radial-gradient(
circle,
rgba(10,102,194,.18),
transparent
);

top:-300px;
right:-300px;

}

.hero-content{

position:relative;

text-align:center;

max-width:900px;

z-index:2;

}

.hero-badge{

display:inline-block;

padding:10px 20px;

background:
rgba(10,102,194,.1);

border-radius:50px;

color:var(--primary);

font-weight:700;

margin-bottom:20px;

}

.hero h1{

font-size:4rem;

line-height:1.1;

font-weight:900;

color:var(--dark);

margin-bottom:20px;

}

.hero p{

font-size:1.3rem;

margin-bottom:40px;

}

.hero-buttons{

display:flex;
justify-content:center;
gap:20px;

flex-wrap:wrap;

}

/* ==========================
   PARTNERS
========================== */

.partners{

padding:80px 0;

background:white;

}

.partners h3{

text-align:center;

margin-bottom:40px;

}

.partners-grid{

display:grid;

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

gap:25px;

}

.partner{

background:white;

padding:30px;

text-align:center;

border-radius:var(--radius);

box-shadow:var(--shadow);

font-weight:700;

}

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

.stats{

padding:100px 0;

background:var(--gray);

}

.stats-grid{

display:grid;

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

gap:25px;

}

.stat-card{

background:white;

padding:40px;

text-align:center;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.stat-card h2{

font-size:3rem;

color:var(--primary);

margin-bottom:10px;

}

/* ==========================
   HOW IT WORKS
========================== */

.how-it-works{

padding:120px 0;

}

.how-it-works h2{

text-align:center;

margin-bottom:60px;

font-size:2.5rem;

}

.steps{

display:grid;

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

gap:30px;

}

.step{

padding:40px;

border-radius:var(--radius);

background:white;

box-shadow:var(--shadow);

}

.step span{

font-size:3rem;

font-weight:900;

color:var(--secondary);

}

.step h3{

margin:15px 0;

}

/* ==========================
   PROJECTS MARKETPLACE
========================== */

.projects{

padding:120px 0;

background:#ffffff;

}

.projects h2{

text-align:center;
font-size:2.8rem;
margin-bottom:60px;
color:var(--dark);

}

.projects-grid{

display:grid;

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

gap:35px;

}

.project-card{

background:white;

border-radius:25px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.4s;

}

.project-card:hover{

transform:
translateY(-8px);

}

.project-card img{

width:100%;
height:220px;
object-fit:cover;

}

.project-content{

padding:25px;

}

.project-region{

color:var(--primary);

font-weight:700;

margin-bottom:10px;

}

.project-title{

font-size:1.3rem;

font-weight:800;

margin-bottom:15px;

}

.progress{

height:10px;

background:#e5e7eb;

border-radius:20px;

overflow:hidden;

margin:15px 0;

}

.progress-bar{

height:100%;

width:65%;

background:
linear-gradient(
90deg,
#16a34a,
#22c55e
);

}

.project-meta{

display:flex;

justify-content:space-between;

margin-top:15px;

font-size:.9rem;

}

/* ==========================
   MAPA DEL PERU
========================== */

.peru-section{

padding:120px 0;

background:#f8fafc;

}

.peru-section h2{

text-align:center;

font-size:2.8rem;

margin-bottom:20px;

}

.peru-section p{

text-align:center;

margin-bottom:60px;

}

.peru-wrapper{

display:flex;

gap:50px;

align-items:center;

}

.map-container{

flex:1;

background:white;

padding:30px;

border-radius:30px;

box-shadow:var(--shadow);

}

.map-container object{

width:100%;

height:700px;

}

.info-panel{

width:380px;

background:white;

padding:35px;

border-radius:25px;

box-shadow:var(--shadow);

}

.info-panel h3{

font-size:2rem;

margin-bottom:25px;

color:var(--primary);

}

.metric{

display:flex;

justify-content:space-between;

padding:18px 0;

border-bottom:1px solid #e2e8f0;

}

.metric strong{

color:var(--dark);

}

/* ==========================
   GAMIFICATION
========================== */

.gamification{

padding:120px 0;

background:white;

}

.gamification h2{

text-align:center;

margin-bottom:60px;

font-size:2.8rem;

}

.badges{

display:grid;

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

gap:25px;

}

.badge-card{

padding:40px;

text-align:center;

font-size:1.2rem;

font-weight:800;

border-radius:25px;

background:
linear-gradient(
135deg,
#fff8e1,
#fef3c7
);

box-shadow:var(--shadow);

}

/* ==========================
   TRANSPARENCIA
========================== */

.transparency{

padding:120px 0;

background:#0f172a;

color:white;

}

.transparency h2{

text-align:center;

margin-bottom:60px;

font-size:2.8rem;

}

.transparency-grid{

display:grid;

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

gap:30px;

}

.transparency-grid div{

padding:40px;

border-radius:20px;

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

text-align:center;

font-weight:700;

}

/* ==========================
   TESTIMONIOS
========================== */

.testimonials{

padding:120px 0;

background:white;

}

.testimonials h2{

text-align:center;

margin-bottom:60px;

font-size:2.8rem;

}

.testimonial-grid{

display:grid;

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

gap:30px;

}

.testimonial{

padding:35px;

border-radius:25px;

background:#fff;

box-shadow:var(--shadow);

}

/* ==========================
   BENEFITS
========================== */

.benefits{

padding:120px 0;

background:#f8fafc;

}

.benefits h2{

text-align:center;

margin-bottom:60px;

font-size:2.8rem;

}

.benefits-grid{

display:grid;

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

gap:30px;

}

.benefits-grid div{

background:white;

padding:40px;

border-radius:25px;

box-shadow:var(--shadow);

}

/* ==========================
   FAQ
========================== */

.faq{

padding:120px 0;

background:white;

}

.faq h2{

text-align:center;

margin-bottom:60px;

font-size:2.8rem;

}

.faq-item{

padding:25px;

margin-bottom:20px;

border-radius:15px;

background:#f8fafc;

cursor:pointer;

font-weight:600;

}

/* ==========================
   CTA FINAL
========================== */

.cta-final{

padding:140px 0;

text-align:center;

background:
linear-gradient(
135deg,
#0A66C2,
#2563eb
);

color:white;

}

.cta-final h2{

font-size:3rem;

max-width:900px;

margin:auto auto 40px;

}

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

.footer{

padding:80px 0;

background:#0f172a;

color:white;

text-align:center;

}

.footer img{

height:80px;

margin-bottom:20px;

}

.footer-links{

display:flex;

justify-content:center;

gap:25px;

margin-top:25px;

flex-wrap:wrap;

}

.footer-links a{

color:white;

text-decoration:none;

}

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

@media(max-width:992px){

.hero h1{

font-size:3rem;

}

.peru-wrapper{

flex-direction:column;

}

.info-panel{

width:100%;

}

.nav-links{

display:none;

}

}

@media(max-width:768px){

.hero{

padding:100px 20px;

}

.hero h1{

font-size:2.3rem;

}

.hero p{

font-size:1rem;

}

.btn-primary,
.btn-secondary{

width:100%;

text-align:center;

}

.hero-buttons{

flex-direction:column;

}

.projects-grid,
.stats-grid,
.steps,
.badges,
.transparency-grid,
.testimonial-grid,
.benefits-grid{

grid-template-columns:1fr;

}

.map-container object{

height:450px;

}

}
.show{

opacity:1 !important;
transform:translateY(0) !important;

}

.stat-card,
.step,
.project-card,
.badge-card,
.testimonial{

opacity:0;

transform:
translateY(40px);

transition:
all .8s ease;

}

.faq-item.active{

background:#0A66C2;
color:white;

}