/* ==========================================
   DESARROLLO MOTOR 2.0
   PARTE 1
========================================== */

.hero-desarrollo-motor{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

text-align:center;

color:#fff;

background-image:
linear-gradient(
rgba(0,0,0,.25),
rgba(0,0,0,.35)
),
url('/img/desarrollo-motor-hero.jpg');

background-size:cover;

background-position:center center;

background-repeat:no-repeat;

}

.hero-overlay{

display:none;

}

.hero-content{

position:relative;

z-index:2;

max-width:900px;

padding:40px;

}

.hero-tag{

display:inline-block;

padding:10px 22px;

border-radius:40px;

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

backdrop-filter:blur(12px);

font-size:.85rem;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:25px;

}

.hero-content h1{

font-size:clamp(3.5rem,8vw,7rem);

line-height:.95;

margin-bottom:25px;

font-weight:800;

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

}

.hero-subtitle{

font-size:1.6rem;

max-width:800px;

margin:auto;

margin-bottom:25px;

font-weight:600;

}

.hero-content p{

max-width:700px;

margin:auto;

font-size:1.15rem;

line-height:1.8;

}

.btn-hero{

display:inline-block;

margin-top:40px;

padding:18px 40px;

border-radius:60px;

font-weight:700;

transition:.3s;

}

.btn-hero:hover{

transform:translateY(-4px);

}

/* ============================= */

.intro{

padding:120px 20px;

background:#ffffff;

}

.narrow{

max-width:900px;

margin:auto;

}

.intro h2{

font-size:clamp(2rem,5vw,3.5rem);

text-align:center;

margin-bottom:30px;

}

.intro p{

font-size:1.2rem;

line-height:2;

text-align:center;

}

/* ============================= */

.motor-gallery{

padding:40px 20px 120px;

background:#fff;

}

.motor-gallery-grid{

max-width:1300px;

margin:auto;

display:grid;

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

gap:25px;

}

.gallery-item{

height:420px;

border-radius:24px;

overflow:hidden;

background-size:cover;

background-position:center;

transition:.4s;

}

.gallery-item:hover{

transform:translateY(-10px);

}

.gallery-item:nth-child(1){

background-image:
url('/img/desarrollo-motor-01.jpg');

}

.gallery-item:nth-child(2){

background-image:
url('/img/desarrollo-motor-02.jpg');

}

.gallery-item:nth-child(3){

background-image:
url('/img/desarrollo-motor-03.jpg');

}

/* ============================= */

#video-desarrollo{

padding:120px 20px;

background:#f6f7f8;

}

#video-desarrollo h2{

text-align:center;

font-size:clamp(2rem,5vw,3rem);

margin-bottom:20px;

}

#video-desarrollo p{

text-align:center;

max-width:800px;

margin:auto;

margin-bottom:50px;

font-size:1.1rem;

}

.video-wrapper{

max-width:1100px;

margin:auto;

}

.video-placeholder{

height:620px;

display:flex;

align-items:center;

justify-content:center;

border-radius:30px;

background:
linear-gradient(
135deg,
#e9ecef,
#dfe4ea
);

font-size:1.3rem;

font-weight:700;

box-shadow:
0 15px 50px rgba(0,0,0,.10);

}

/* ============================= */

#que-es{

padding:120px 20px;

background:white;

}

#que-es h2{

font-size:clamp(2rem,5vw,3rem);

text-align:center;

margin-bottom:40px;

}

#que-es p{

font-size:1.12rem;

line-height:2;

margin-bottom:25px;

}
/* ============================= */

#beneficios{

padding:120px 20px;

background:#fafafa;

}

#beneficios h2{

text-align:center;

font-size:clamp(2rem,5vw,3rem);

margin-bottom:70px;

}

.beneficios-grid{

max-width:1300px;

margin:auto;

display:grid;

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

gap:35px;

}

.beneficio-card{

background:
linear-gradient(
135deg,
#ffffff,
#f7f7f7
);

padding:40px;

border-radius:24px;

box-shadow:
0 12px 35px rgba(0,0,0,.08);

transition:.35s;

}

.beneficio-card:hover{

transform:translateY(-10px);

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

}

.beneficio-card h3{

font-size:1.5rem;

margin-bottom:18px;

}

.beneficio-card p{

line-height:1.9;

font-size:1.05rem;

}

/* ============================= */

#habilidades{

padding:120px 20px;

background:#ffffff;

}

#habilidades h2{

text-align:center;

font-size:clamp(2rem,5vw,3rem);

margin-bottom:20px;

}

.section-intro{

text-align:center;

max-width:800px;

margin:0 auto 60px;

font-size:1.15rem;

line-height:1.8;

}

.habilidades-grid{

max-width:1200px;

margin:auto;

display:grid;

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

gap:22px;

}

.habilidad{

padding:25px;

border-radius:18px;

background:
linear-gradient(
135deg,
#f9f9f9,
#ececec
);

font-size:1.05rem;

font-weight:600;

transition:.3s;

box-shadow:
0 5px 20px rgba(0,0,0,.05);

}

.habilidad:hover{

transform:translateY(-6px);

background:
linear-gradient(
135deg,
#ffffff,
#f2f2f2
);

}

/* ============================= */

.impacto{

padding:140px 20px;

background:
linear-gradient(
135deg,
#1c1c1c,
#303030
);

color:white;

}

.impacto h2{

text-align:center;

font-size:clamp(2rem,5vw,3.5rem);

margin-bottom:35px;

}

.impacto p{

text-align:center;

max-width:900px;

margin:auto;

font-size:1.15rem;

line-height:2;

}

/* ============================= */

#testimonios{

padding:120px 20px;

background:#f8f8f8;

}

#testimonios h2{

text-align:center;

font-size:clamp(2rem,5vw,3rem);

margin-bottom:70px;

}

.testimonios-grid{

max-width:1200px;

margin:auto;

display:grid;

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

gap:35px;

}

.testimonio{

padding:40px;

border-radius:24px;

background:white;

box-shadow:
0 12px 35px rgba(0,0,0,.08);

transition:.3s;

}

.testimonio:hover{

transform:translateY(-8px);

}

.testimonio p{

font-style:italic;

line-height:2;

font-size:1.05rem;

}

.testimonio h4{

margin-top:30px;

font-size:1rem;

font-weight:700;

}
/* ============================= */

#horarios{

padding:120px 20px;

background:#ffffff;

}

.horario-box{

max-width:850px;

margin:auto;

padding:80px 50px;

text-align:center;

border-radius:30px;

background:
linear-gradient(
135deg,
#ffffff,
#f4f4f4
);

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

}

.horario-box h2{

font-size:clamp(2rem,5vw,3rem);

margin-bottom:25px;

}

.horario-box h3{

font-size:2.2rem;

margin-bottom:25px;

}

.hora{

font-size:4rem;

font-weight:800;

line-height:1;

margin-bottom:25px;

color:#ff7043;

}

.horario-box p{

font-size:1.1rem;

}

/* ============================= */

.cta-desarrollo{

padding:160px 20px;

text-align:center;

color:white;

background-image:
linear-gradient(
rgba(0,0,0,.45),
rgba(0,0,0,.45)
),
url('/img/desarrollo-motor-cta.jpg');

background-size:cover;

background-position:center;

background-repeat:no-repeat;

}

.cta-desarrollo h2{

font-size:clamp(2.5rem,6vw,4.5rem);

margin-bottom:30px;

}

.cta-desarrollo p{

max-width:850px;

margin:auto;

font-size:1.25rem;

line-height:2;

margin-bottom:45px;

}

.cta-desarrollo .btn{

display:inline-block;

padding:18px 42px;

border-radius:60px;

background:white;

color:#222;

font-weight:700;

transition:.3s;

}

.cta-desarrollo .btn:hover{

transform:translateY(-4px);

}

/* ============================= */

.contact{

padding:120px 20px;

background:#ffffff;

}

.contact h2{

text-align:center;

font-size:clamp(2rem,5vw,3rem);

margin-bottom:20px;

}

.contact p{

text-align:center;

max-width:800px;

margin:0 auto 50px;

font-size:1.1rem;

}

.contact iframe{

width:100%;

min-height:800px;

border:none;

}

/* ============================= */
/* ANIMACIONES */
/* ============================= */

.fade-item{

opacity:0;

transform:translateY(40px);

transition:
opacity .8s ease,
transform .8s ease;

}

.fade-item.visible{

opacity:1;

transform:translateY(0);

}

.plazas-info{

margin-top:30px;

padding:18px;

border-radius:15px;

background:#f3f3f3;

font-weight:600;

}

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

@media(max-width:900px){

.motor-gallery-grid{

grid-template-columns:1fr;

}

.gallery-item{

height:350px;

}

.video-placeholder{

height:320px;

}

.hora{

font-size:2.5rem;

}

.horario-box{

padding:50px 25px;

}

}

@media(max-width:768px){

.hero-content{

padding:30px;

}

.hero-content h1{

font-size:3rem;

}

.hero-subtitle{

font-size:1.2rem;

}

.intro,
#video-desarrollo,
#que-es,
#beneficios,
#habilidades,
#testimonios,
#horarios,
.contact{

padding:80px 20px;

}

.cta-desarrollo{

padding:100px 20px;

}

.cta-desarrollo h2{

font-size:2.2rem;

}

.cta-desarrollo p{

font-size:1.05rem;

}

.video-placeholder{

height:250px;

font-size:1rem;

}

}