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

html{
scroll-behavior:smooth;
}

.container{

max-width:1200px;

margin-left:auto;
margin-right:auto;

padding-left:20px;
padding-right:20px;

width:100%;

}

body{
font-family:'Inter', sans-serif;
color:#222;
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
transition:all 0.3s ease;
}

.logo img{
height:55px;
object-fit:contain;
}


.navbar.scrolled{
background:rgba(15,23,42,0.9);
backdrop-filter:blur(8px);
box-shadow:0 5px 20px rgba(0,0,0,0.2);
}

.navbar ul{
display:flex;
gap:25px;
list-style:none;
}

.navbar a{
color:white;
}

.hero{

height:100vh;

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

text-align:center;

position:relative;
overflow:hidden;

color:white;

padding:140px 20px 120px;

background-image:
linear-gradient(
rgba(15,23,42,0.75),
rgba(15,23,42,0.85)
),
url("../img/hero/hero-bg.jpg");

background-size:cover;
background-position:center;
transition:background-position 0.1s linear;

}

.hero::before{
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:700px;
height:700px;

background:radial-gradient(
circle,
rgba(14,165,233,0.35),
transparent 60%
);

filter:blur(120px);
z-index:0;
}

.hero-content{
max-width:700px;
margin:0 auto;
padding:50px;
border-radius:16px;
position:relative;
z-index:2;
background:linear-gradient(
135deg,
rgba(255,255,255,0.15),
rgba(255,255,255,0.05)
);
box-shadow:0 20px 60px rgba(0,0,0,0.4);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.15);
position:relative;
z-index:2;

opacity:0;
transform:translateY(40px);
animation:heroFade 1.2s ease forwards;
animation-delay:0.3s;
}

@keyframes heroFade{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}

@keyframes gradientMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

.hero h1{

font-size:clamp(2.8rem,5vw,4.2rem);
line-height:1.1;
font-weight:700;

background:linear-gradient(
90deg,
#ffffff,
#ff6a3d
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero p{

font-size:1.15rem;
line-height:1.6;

max-width:640px;

margin:0 auto 30px;

opacity:0.9;

}

.hero-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.hero-glow{

position:absolute;
width:700px;
height:700px;

background:radial-gradient(
circle,
rgba(56,189,248,0.35) 0%,
rgba(56,189,248,0.15) 30%,
transparent 70%
);

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

filter:blur(80px);

z-index:0;

animation:glowMove 12s ease-in-out infinite;

}

@keyframes glowMove{

0%{
transform:translate(-50%,-50%) scale(1);
}

50%{
transform:translate(-48%,-52%) scale(1.1);
}

100%{
transform:translate(-50%,-50%) scale(1);
}

}

.btn-primary{
background:#38bdf8;
padding:14px 28px;
border-radius:8px;
text-decoration:none;
color:white;
font-weight:600;
transition:0.3s;
}

.btn-primary:hover{
transform:translateY(-3px);
}

.btn-secondary{
border:1px solid white;
padding:14px 28px;
border-radius:8px;
text-decoration:none;
color:white;
transition:0.3s;
}

.btn-secondary:hover{
background:white;
color:#0f172a;
}

.growth-line{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
pointer-events:none;
}

.growth-line{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
pointer-events:none;
}

.growth-line path{
fill:rgba(255,255,255,0.08);
filter:drop-shadow(0 0 10px rgba(80,180,255,0.25));
}

@keyframes lineFloat{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-20px);
}

100%{
transform:translateY(0px);
}

}

.servicios{
padding:120px 20px 80px;
text-align:center;
}

.services-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.service-card{

background:white;

padding:40px 30px;

border-radius:14px;

transition:
transform 0.35s ease,
box-shadow 0.35s ease;

position:relative;
overflow:hidden;

transform-style:preserve-3d;

box-shadow:
0 15px 35px rgba(0,0,0,0.1);

}

.service-card::before{

content:"";
position:absolute;
top:-50%;
left:-50%;

width:200%;
height:200%;

background:radial-gradient(
circle,
rgba(14,165,233,0.25),
transparent 60%
);

opacity:0;
transition:opacity 0.3s ease;

}

.service-card:hover{

transform:translateY(-10px);
box-shadow:0 25px 60px rgba(0,0,0,0.18);

}

.service-card:hover::before{
opacity:1;
}

.service-card h3{

font-size:1.4rem;
margin-bottom:12px;

}

.service-card:nth-child(1){ transition-delay:0.1s; }
.service-card:nth-child(2){ transition-delay:0.2s; }
.service-card:nth-child(3){ transition-delay:0.3s; }

.services-detailed{

padding:120px 20px 80px;
max-width:1100px;
margin:auto;
}

.services-detailed h2{

text-align:center;
font-size:2.4rem;

margin-bottom:80px;

}

.service-row{

display:flex;
align-items:center;

gap:60px;

margin-bottom:50px;

}

.service-row:last-child{

margin-bottom:0;

}


.service-text{

opacity:0;
transform:scale(0.96);

transition:all 0.7s ease;
transition-delay:0.25s;

}

.service-row img{
width:50%;
border-radius:12px;
transition-delay:0.1s;
transition:transform 0.4s ease, box-shadow 0.4s ease;
}

.service-row img:hover{

transform:scale(1.03);
box-shadow:0 12px 30px rgba(0,0,0,0.2);

}

.show{

opacity:1;
transform:scale(1);

}

.services-title{

font-size:clamp(2.2rem, 4vw, 3rem);

text-align:center;

margin-bottom:15px;

line-height:1.2;

font-weight:700;

opacity:0;
transform:translateY(30px);

transition:all 0.8s ease;

}
.services-subtitle{
max-width:700px;

margin:20px auto 60px;

text-align:center;

font-size:1.15rem;

line-height:1.6;

opacity:0.85;
transform:translateY(30px);

transition:all 0.8s ease;

}

.show-title{

opacity:1;
transform:translateY(0);

}

.services-title::after{

content:"";

display:block;

width:70px;
height:3px;

background:#ff6a3d;

margin:18px auto 0;

border-radius:2px;

transform:scaleX(0);

transition:transform 0.6s ease;

}

.show-title.services-title::after{

transform:scaleX(1);

}

.service-text h3{

font-size:1.8rem;
margin-bottom:15px;

}

.service-text p{

line-height:1.6;
margin-bottom:20px;

}

.service-text ul{

list-style:none;
padding:0;

}

.service-text li{

margin-bottom:8px;

}

.reverse{

flex-direction:row-reverse;

}

@media(max-width:768px){

.service-row{

flex-direction:column;

}

.reverse{

flex-direction:column;

}

.service-row img,
.service-text{

width:100%;

}

}

.portfolio{

background:#e9f0f8;

padding:140px 0 120px;

}

.portfolio::before{

content:"";

position:absolute;

top:-80px;
left:0;

width:100%;
height:80px;

background:#e9f0f8;

transform:skewY(-4deg);

transform-origin:left top;

}

.portfolio-container{

max-width:1200px;

margin:auto;

padding:0 20px;

}

.portfolio-title{

text-align:center;

font-size:clamp(2.2rem,4vw,3rem);

margin-bottom:20px;

}

.portfolio-subtitle{

text-align:center;

max-width:700px;
margin:0 auto 60px;

opacity:0.85;

}

.portfolio-grid{

display:grid;
grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
gap:40px;
margin-top:60px;
align-items:start;
}

.project-card{

background:white;

border:1px solid rgba(0,0,0,0.04);

border-radius:14px;

padding:20px;

text-align:center;

transition:transform 0.3s ease;

}

.project-card:hover{

transform:translateY(-6px);

}

.project-card img{

width:100%;
display:block;

}


.project-info{

padding:20px;

}

/* ---------- PROCESS SECTION ---------- */

.process{

padding:120px 20px;
background:#f7f7f9;
width:100%;
text-align:center;
position: relative;
z-index: 2;
}

.process-container{

max-width:1200px;
margin:0 auto;

}

.process-title{

font-size:2.3rem;
margin-bottom:80px;

}

/* ---------- TIMELINE GRID ---------- */

.process-timeline{

display:grid;

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

gap:60px 40px;

position:relative;

}


/* ---------- STEP ---------- */

.step{

display:flex;
flex-direction:column;
align-items:center;

position:relative;

}

/* ---------- DOT ---------- */

.dot{
position: absolute;

top: -25px;
left: 50%;
transform: translateX(-50%);

width:50px;
height:50px;

border-radius:50%;

background:#ff6a3d;
color:white;

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

font-weight:bold;

z-index: 10;
}

.dot:hover{

transform:scale(1.12);

box-shadow:
0 10px 20px rgba(0,0,0,0.18),
0 0 0 6px rgba(255,106,61,0.18);

}

/* ---------- CARD ---------- */

.step-card{

margin-top:25px;

background:white;

padding:25px 20px;

border-radius:12px;

box-shadow:0 10px 25px rgba(0,0,0,0.08);

transition:transform 0.3s ease,
box-shadow 0.3s ease;

max-width:320px;

}

.step-card h3{

font-size:1.3rem;
margin-bottom:10px;

transition:color 0.3s ease;

}

.step:hover .step-card{

transform:translateY(-6px);

box-shadow:0 15px 35px rgba(0,0,0,0.12);

}

.step:hover .step-card h3{

color:#ff6a3d;

}

/* ---------- RESPONSIVE ---------- */

@media (max-width:900px){

.process-timeline{

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

}

}

@media (max-width:600px){

.process-timeline{

grid-template-columns:1fr;

}

.process-timeline::before{

display:none;

}

}

.about{

padding:120px 20px;

background:#ffffff;

}

.about-container{

max-width:1200px;

margin:0 auto;

}

.about-intro{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

margin-bottom:80px;

}

.about-text h2{

font-size:2.3rem;

margin-bottom:20px;

}

.about-text p{

font-size:1.1rem;

line-height:1.7;

color:#4b5563;

}

.about-image img{

width:100%;

border-radius:12px;

box-shadow:0 15px 35px rgba(0,0,0,0.12);

}

.about-values{

display:grid;

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

gap:30px;

}

.value-card{

background:#f7f7f9;

padding:30px;

border-radius:12px;

text-align:center;

transition:transform 0.3s ease,
box-shadow 0.3s ease;

}

.value-card h3{

margin-bottom:12px;

color:#ff6a3d;

}

.value-card p{

font-size:0.95rem;

color:#4b5563;

line-height:1.6;

}

.value-card:hover{

transform:translateY(-6px);

box-shadow:0 12px 25px rgba(0,0,0,0.1);

}

@media (max-width:768px){

.about-intro{

grid-template-columns:1fr;

text-align:center;

}

}

.about-image{

position:relative;

}


.about-image img{

width:100%;

border-radius:12px;

position:relative;

z-index:2;

box-shadow:0 15px 35px rgba(0,0,0,0.12);

}


.about-image::before{

content:"";

position:absolute;

width:100%;
height:100%;

top:20px;
left:-20px;

background:#ff6a3d;

border-radius:12px;

z-index:1;

opacity:0.18;

}


@media (max-width:768px){

.about-image::before{

top:15px;
left:-15px;

}

}

.laptop-mockup{

background:#111;

border-radius:14px;

padding:12px;

max-width:420px;

margin:0 auto 20px;

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

}

.laptop-mockup::before{

content:"";

display:block;

height:12px;

background:#333;

border-radius:8px;

margin-bottom:10px;

}

.laptop-mockup img{

width:100%;

display:block;

border-radius:8px;

}

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

.header{

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

background:transparent;

z-index:1000;

transition:
background 0.3s ease,
backdrop-filter 0.3s ease,
box-shadow 0.3s ease;

}

/* estado cuando haces scroll */

.header.scrolled{

background:rgba(15,23,42,0.35);

backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);

box-shadow:0 8px 25px rgba(0,0,0,0.25);

}

.header.scrolled .navbar{
padding:12px 60px;
}

.nav-menu{
display:flex;
gap:35px;
list-style:none;
align-items:center;
}

.nav-menu a{

text-decoration:none;
color:white;

font-size:1.1rem;
font-weight:600;

letter-spacing:0.5px;

position:relative;
padding:8px 0;

transition:color 0.3s ease;

}

.nav-menu a::after{

content:"";
position:absolute;

left:0;
bottom:-4px;

width:0%;
height:2px;

background:#38bdf8;

transition:width 0.3s ease;

}

.nav-menu a:hover{
color:#38bdf8;
}

.nav-menu a:hover::after{
width:100%;
}

/* scroll general del sitio */

.reveal{
opacity:0;
transform:translateY(40px);

transition:
opacity 0.8s ease,
transform 0.8s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

.highlight{
position:relative;
display:inline-block;
}

.cta{

padding:110px 20px;

background:linear-gradient(
135deg,
#ff6a3d,
#ff8a5c
);

text-align:center;

color:white;

position:relative;

overflow:hidden;


}

.cta::before{

content:"";

position:absolute;

width:400px;
height:400px;

background:rgba(255,255,255,0.08);

border-radius:50%;

top:-150px;
left:-150px;

}

.cta::after{

content:"";

position:absolute;

width:350px;
height:350px;

background:rgba(255,255,255,0.06);

border-radius:50%;

bottom:-150px;
right:-120px;

}

.cta-container{

max-width:800px;

margin:0 auto;

}

.cta h2{

font-size:2.2rem;

margin-bottom:20px;

}

.cta p{

font-size:1.1rem;

line-height:1.7;

margin-bottom:35px;

opacity:0.95;

}

.cta-button{

display:inline-block;

background:white;

color:#ff6a3d;

padding:14px 34px;

border-radius:30px;

text-decoration:none;

font-weight:600;

font-size:1rem;

transition:
transform 0.25s ease,
box-shadow 0.25s ease;

}

.cta-button:hover{

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(0,0,0,0.25);

}

.contact{

padding:120px 20px;

background:#f3f5f9;

}

.contact-container{

max-width:1100px;

margin:0 auto;

}

.contact-title{

text-align:center;

font-size:2.2rem;

margin-bottom:70px;

}

.contact-grid{

display:grid;

grid-template-columns:1.2fr 0.8fr;

gap:60px;

align-items:start;

}

.contact-form form{

display:flex;

flex-direction:column;

gap:18px;

}

.contact-form input,
.contact-form textarea{

padding:14px 16px;

border-radius:8px;

border:1px solid #d1d5db;

font-size:0.95rem;

font-family:inherit;

}

.contact-form textarea{

min-height:130px;

resize:vertical;

}

.contact-form button{

margin-top:10px;

background:#ff6a3d;

color:white;

border:none;

padding:14px;

border-radius:30px;

font-weight:600;

cursor:pointer;

transition:
transform 0.25s ease,
box-shadow 0.25s ease;

}

.contact-form button:hover{

transform:translateY(-2px);

box-shadow:0 10px 20px rgba(0,0,0,0.2);

}

.form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  gap: 1rem;
}

.form-success-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
}

.form-success h3 {
  font-size: 1.5rem;
  color: white;
  margin: 0;
}

.form-success p {
  color: #9ca3af;
  margin: 0;
}

.form-success button {
  margin-top: 0.5rem;
  padding: 0.6rem 1.5rem;
  border: 1px solid #6366f1;
  background: transparent;
  color: #6366f1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.form-success button:hover {
  background: #6366f1;
  color: white;
}

.contact-info{

background:white;

padding:35px;

border-radius:12px;

box-shadow:0 10px 30px rgba(0,0,0,0.08);

}

.contact-info h3{

margin-bottom:15px;

color:#ff6a3d;

}

.contact-info p{

margin-bottom:20px;

color:#4b5563;

line-height:1.6;

}

.contact-info ul{

list-style:none;

padding:0;

display:flex;

flex-direction:column;

gap:12px;

color:#374151;

}

@media (max-width:768px){

.contact-grid{

grid-template-columns:1fr;

gap:40px;

}

}

.footer{

padding:40px 20px;

background:#111;

color:#fff;

}

.footer-container{

max-width:1200px;

margin:0 auto;

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

flex-wrap:wrap;

}

/* LOGO */

.footer-logo img{

height:40px;

}

/* REDES */

.footer-social{

display:flex;

gap:20px;

}

.footer-social a{

color:white;

text-decoration:none;

font-weight:500;

transition:opacity 0.3s ease;

}

.footer-social a:hover{

opacity:0.7;

}

/* CONTACTO */

.footer-contact{

text-align:right;

font-size:0.9rem;

line-height:1.5;

}

/* linea inferior */

.footer-bottom{

margin-top:30px;

padding-top:20px;

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

text-align:center;

font-size:0.8rem;

color:#aaa;

}

.footer-social{

display:flex;
gap:20px;
align-items:center;

}

.footer-social a{

color:white;
display:flex;

}

.footer-social svg{

width:22px;
height:22px;

transition:
transform 0.25s ease,
opacity 0.25s ease;

}

.footer-social a:hover svg{

transform:scale(1.15);
opacity:0.8;

}


/* responsive */

@media (max-width:700px){

.footer-container{

flex-direction:column;

text-align:center;

}

.footer-contact{

text-align:center;

}

}

.whatsapp-float{

position:fixed;

bottom:25px;
right:25px;

width:60px;
height:60px;

border-radius:50%;

background:#25D366;
box-shadow:0 10px 25px rgba(0,0,0,0.25);


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

cursor:pointer;

opacity:0;

transform:translateY(20px);

z-index:999;

transition:
opacity 0.35s ease,
transform 0.35s ease,
box-shadow 0.35s ease;

}

.whatsapp-float.show{

opacity:1;

transform:translateY(0);

}


.whatsapp-float svg{
width:30px;
height:30px;
}

.whatsapp-float:hover{

transform:scale(1.1);

box-shadow:0 12px 30px rgba(0,0,0,0.35);

}

.whatsapp-float::before{

content:"";

position:absolute;

width:100%;
height:100%;

border-radius:50%;

background:rgba(37,211,102,0.5);

z-index:-1;

animation:whatsappPulse 2.5s infinite;

}

.whatsapp-tooltip{

position:fixed;

bottom:40px;
right:95px;

background:#1f2937;

color:white;

padding:8px 12px;

border-radius:6px;

font-size:0.8rem;

opacity:0;

transform:translateX(10px);

transition:all 0.3s ease;

pointer-events:none;

}

.whatsapp-float:hover + .whatsapp-tooltip{

opacity:1;

transform:translateX(0);

}


@keyframes whatsappPulse{

0%{
transform:scale(1);
opacity:0.6;
}

70%{
transform:scale(1.8);
opacity:0;
}

100%{
transform:scale(1.8);
opacity:0;
}

}

@keyframes whatsappAppear{

0%{
opacity:0;
transform:scale(0.6);
}

100%{
opacity:1;
transform:scale(1);
}

}

/* ============================= */
/* PLANES */
/* ============================= */

.planes{
padding:120px 20px;
background:#f7f7f9;
text-align:center;
z-index: 1;
}

.planes-title{
font-size:clamp(2.2rem,4vw,3rem);
margin-bottom:15px;
}

.planes-subtitle{
max-width:700px;
margin:0 auto 60px;
opacity:0.85;
}

.planes-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}

.plan-card{
background:white;
padding:40px 30px;
border-radius:14px;
box-shadow:0 15px 35px rgba(0,0,0,0.1);
transition:all 0.35s ease;
}

.plan-card:hover{
transform:translateY(-12px) scale(1.02);
box-shadow:0 30px 70px rgba(0,0,0,0.2);
}

.plan-card h3{
font-size:1.5rem;
margin-bottom:15px;
}

.plan-card ul{
list-style:none;
padding:0;
margin-bottom:20px;
}

.plan-card li{
margin-bottom:8px;
}

.precio{
font-size:1.8rem;
font-weight:700;
color:#ff6a3d;
}

.cuotas{
font-size:1.4rem;
font-weight:350;
color:#212121;
}

.plan-card.destacado{
position:relative;
overflow:hidden;
}

.destacado{
border:2px solid #ff6a3d;
transform:scale(1.05);
}

.planes-cta{
margin-top:60px;
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

/* ============================= */
/* SLIDER PLANES */
/* ============================= */

.planes-slider{
position:relative;
height:400px;
border-radius:16px;
overflow:hidden;
margin-bottom:60px;
}

.slide{
position:absolute;
width:100%;
height:100%;
background-size:cover;
background-position:center;
opacity:0;
transition:opacity 0.8s ease-in-out;
}

.slide.active{
opacity:1;
}

.slide-overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
}

.slide-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:white;
z-index:2;
padding:20px;
}

.slide-content h3{
font-size:2rem;
margin-bottom:10px;
}

.slide-content p{
font-size:1.1rem;
opacity:0.9;
}

.slider-dots{
position:absolute;
bottom:15px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:10px;
z-index:3;
}

.slider-dot{
width:10px;
height:10px;
border-radius:50%;
background:white;
opacity:0.5;
cursor:pointer;
transition:0.3s;
}

.slider-dot.active{
opacity:1;
transform:scale(1.2);
}

/* Animación texto slider */
.slide-content{
opacity:0;
transform:translate(-50%, -40%);
transition:all 0.8s ease;
}

.slide.active .slide-content{
opacity:1;
transform:translate(-50%, -50%);
}

.slide{
transform:scale(1);
transition:opacity 0.8s ease-in-out, transform 6s ease;
}

.slide.active{
transform:scale(1.05);
}

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

/* tablets */

@media (max-width:1024px){

.navbar{
padding:20px 30px;
}

.service-row{
gap:40px;
}

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

}


/* tablets pequeñas */

@media (max-width:768px){

.navbar{
padding:18px 20px;
}

.nav-menu{
display:none;
}

.hero{
padding:120px 20px 80px;
}

.hero-content{
padding:30px 20px;
}

.service-row{
flex-direction:column;
text-align:center;
}

.service-row img{
width:100%;
}

.service-text{
width:100%;
}

.about-intro{
grid-template-columns:1fr;
text-align:center;
}

.contact-grid{
grid-template-columns:1fr;
gap:40px;
}

.servicios,
.services-detailed,
.portfolio,
.process,
.about,
.contact{
padding:80px 20px;
}

}


/* móviles */

@media (max-width:480px){

.hero h1{
font-size:2.2rem;
}

.hero p{
font-size:1rem;
}

.hero-buttons{
flex-direction:column;
gap:15px;
}

.process-timeline{
grid-template-columns:1fr;
}

.portfolio-grid{
grid-template-columns:1fr;
}

.footer-container{
flex-direction:column;
text-align:center;
}

.footer-contact{
text-align:center;
}

}

/* ============================= */
/* HAMBURGER */
/* ============================= */

.hamburger{
display:none;
flex-direction:column;
gap:5px;
background:none;
border:none;
cursor:pointer;
}

.hamburger span{
width:25px;
height:3px;
background:white;
transition:0.3s;
}

/* animación a X */

.hamburger.active span:nth-child(1){

transform:rotate(45deg) translate(5px,5px);

}

.hamburger.active span:nth-child(2){

opacity:0;

}

.hamburger.active span:nth-child(3){

transform:rotate(-45deg) translate(6px,-6px);

}

body.legal-page {
    background-color: #162b43 !important;
}

.legal {
	background: transparent;
    padding: 80px 20px;
    position: relative;
    z-index: 1;
}

/* Fondo especial para páginas legales */
.legal-page {
    background-color: #162b43;
    color: #ffffff;
    min-height: 100vh;
}

.legal-page::before {
    content: "";
    position: fixed;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0,123,255,0.2), transparent 70%);
    top: -100px;
    right: -100px;
    z-index: 0;
}

.legal-container {
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.75;
    font-size: 1.05rem;    

    padding: 60px 60px;

    border-radius: 20px;

    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.12),
        rgba(255,255,255,0.04)
    );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255,255,255,0.18);

    box-shadow:
        0 20px 60px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.15);
}

.legal-container p {
    color: #e0ecff;
}

.legal-container h1,
.legal-container h2 {
    color: #ffffff;
}


/* ============================= */
/* MOBILE MENU */
/* ============================= */

@media(max-width:768px){

.hamburger{
display:flex;
}

.nav-menu{

position:fixed;

top:80px;
right:-280px;

width:260px;

padding:40px 30px;

background:rgba(15,23,42,0.85);
backdrop-filter:blur(16px);

border-radius:16px;

flex-direction:column;

align-items:flex-start;

gap:25px;

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

transition:right 0.35s ease;

z-index:1000;

}

.nav-menu.active{
right:20px;
}

.nav-menu li{
width:100%;
}

.nav-menu a{
font-size:1.1rem;
display:block;
width:100%;
}

/* overlay oscuro */

.menu-overlay{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.45);

opacity:0;
visibility:hidden;

transition:opacity 0.3s ease;

z-index:900;

}

.menu-overlay.active{

opacity:1;
visibility:visible;

}


}

/* === FIX TOTAL POLITICA PRIVACIDAD === */
body.legal-page {
    background-color: #162b43 !important;
}

body.legal-page * {
    background-color: transparent;
}

body.legal-page .legal-container {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff;
}

body.legal-page p {
    color: #e0ecff !important;
}

body.legal-page h1,
body.legal-page h2 {
    color: #ffffff !important;
}

.legal-back {
    max-width: 900px;
    margin: 0 auto 30px;
    padding: 0 10px;
    position: relative;
    z-index: 2;
}

.back-home {
    display: inline-block;
    text-decoration: none;
    color: #c7e3ff;

    font-weight: 500;

    padding: 10px 16px;
    border-radius: 8px;

    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);

    border: 1px solid rgba(255,255,255,0.15);

    transition: all 0.25s ease;
}

.back-home:hover {
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    transform: translateX(-3px);
}