html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
.container,
.row{
max-width:100%;
}
/*=========================================================
TABLET
=========================================================*/
@media (max-width:992px){
section{
padding:90px 0;
}
.hero{
text-align:center;
}
.hero .row{
flex-direction:column-reverse;
}
.hero-img{
max-width:420px;
margin-bottom:50px;
}
.hero-buttons{
justify-content:center;
flex-wrap:wrap;
}
.about{
text-align:center;
}
.about-img{
max-width:420px;
margin-bottom:40px;
}
.timeline::before{
left:25px;
}
.timeline-item{
width:100%;
left:0!important;
text-align:left!important;
padding-left:70px;
padding-right:0;
}
.timeline-item::before{
left:14px!important;
}
.footer-bottom{
flex-direction:column;
text-align:center;
}
/*=========================================================
NAVBAR MÓVIL
=========================================================*/
.navbar{
width:100%;
padding:14px 0;
}
.navbar .container{
width:100%;
max-width:100%;
padding-left:20px;
padding-right:20px;
}
.navbar-collapse{
width:100%;
background:var(--primary);
margin-top:12px;
padding:15px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,.20);
}
.navbar-nav{
width:100%;
gap:0;
}
.navbar .nav-link{
display:block;
width:100%;
padding:12px 10px !important;
}
.navbar-toggler{
flex-shrink:0;
padding:6px 8px;
border:1px solid rgba(255,255,255,.5);
}
.navbar-toggler:focus{
box-shadow:none;
}
}
/*=========================================================
MÓVILES
=========================================================*/
@media (max-width:768px){
section{
padding:70px 0;
}
.hero{
padding-top:110px;
padding-bottom:60px;
text-align:center;
}
.hero .row{
min-height:auto !important;
}
.hero .col-lg-6{
position:relative;
width:100%;
}
.hero-img{
display:block;
width:100%;
max-width:320px;
height:auto;
margin:0 auto 50px;
display:block;
}
.hero h1{
font-size:2.7rem;
}
.hero h2{
font-size:1.35rem;
}
.hero p{
font-size:1rem;
}
.hero .col-lg-6{
width:100%;
}
.hero .col-lg-6:first-child{
position:relative;
z-index:1;
}
.hero .col-lg-6:last-child{
position:relative;
z-index:2;
}
.hero-buttons{
display:flex;
flex-direction:column;
gap:15px;
align-items:center;
}
.hero-buttons .btn{
width:100%;
max-width:320px;
}
.section-title{
font-size:2.2rem;
}
.section-text{
font-size:1rem;
}
.highlight-card,
.value-box,
.practice-card,
.skill-card,
.education-card{
padding:30px 25px;
}
.contact{
text-align:center;
}
.contact-info{
margin-bottom:40px;
}
.contact-item{
justify-content:center;
text-align:left;
}
.contact-form .btn{
width:100%;
}
.cta-title{
font-size:2.2rem;
}
.cta-text{
font-size:1rem;
}
.footer{
text-align:center;
}
.footer-links{
margin-top:20px;
}
.about .row{
margin-left:0;
margin-right:0;
}
.about .col-lg-6{
width:100%;
padding-left:15px;
padding-right:15px;
}
.about .about-img{
display:block !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
object-fit:contain;
margin:0 auto 40px;
}
.about .row{
width:100%;
margin-left:0;
margin-right:0;
}
.about .col-lg-5,
.about .col-lg-7{
min-width:0;
max-width:100%;
}
/*=========================================================
BOTONES FLOTANTES — MÓVIL
=========================================================*/
.whatsapp-float{
width:54px;
height:54px;
right:18px;
bottom:18px;
font-size:1.6rem;
z-index:1100;
}
#backToTop{
width:46px;
height:46px;
right:18px;
bottom:84px;
z-index:1099;
}
/*=========================================================
CONTACTO — MÓVIL
=========================================================*/
.contact{
text-align:center;
}
.contact-info{
display:flex;
flex-direction:column;
align-items:center;
gap:24px;
margin-bottom:40px;
}
.contact-item{
width:100%;
max-width:320px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:15px;
text-align:left;
}
.contact-item i{
flex:0 0 48px;
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
}
.contact-item div{
flex:1;
}
/*=========================================================
FOOTER — MÓVIL
=========================================================*/
.footer{
text-align:center;
}
.footer .container{
width:100%;
}
.footer-links{
margin-top:25px;
}
.footer-links ul{
padding:0;
margin:0;
list-style:none;
}
.footer-bottom{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
text-align:center;
margin-top:30px;
}
.footer-bottom p{
margin:0;
}
}
/*=========================================================
MÓVILES PEQUEÑOS
=========================================================*/
@media (max-width:576px){
section{
padding:60px 0;
}
.container{
width:92%;
}
.hero h1{
font-size:2.2rem;
}
.hero h2{
font-size:1.2rem;
}
.hero-subtitle{
font-size:.9rem;
}
.hero-img{
max-width:260px;
}
.section-title{
font-size:1.9rem;
}
.section-subtitle{
font-size:.9rem;
}
.highlight-card,
.value-box,
.practice-card,
.skill-card,
.education-card,
.timeline-content{
padding:25px 20px;
}
.timeline-content h3{
font-size:1.35rem;
}
.timeline-content h5{
font-size:.95rem;
}
.contact-item{
flex-direction:column;
text-align:center;
gap:10px;
}
.contact-item i{
font-size:2.2rem;
}
.footer h3{
font-size:1.8rem;
}
.footer h4{
font-size:1.2rem;
}
.footer-bottom{
font-size:.9rem;
}
.whatsapp-float{
width:50px;
height:50px;
right:15px;
bottom:15px;
}
#backToTop{
width:44px;
height:44px;
right:15px;
bottom:76px;
}
.about-img{
max-width:280px;
}
}
/*=========================================================
EXTRA SMALL DEVICES
=========================================================*/
@media (max-width:390px){
.hero{
min-height:auto;
padding-top:120px;
}
.hero h1{
font-size:2rem;
line-height:1.15;
}
.hero h2{
font-size:1.05rem;
}
.hero p{
font-size:.95rem;
}
.hero-img{
max-width:220px;
}
.section-title{
font-size:1.7rem;
}
.section-text{
font-size:.95rem;
}
.hero-buttons .btn,
.contact-form .btn{
width:100%;
}
.timeline-item{
padding-left:55px;
}
.timeline-content{
padding:20px 18px;
}
.timeline-item::before{
width:18px;
height:18px;
}
.contact-form .form-control{
padding:14px 16px;
}
.whatsapp-float{
width:48px;
height:48px;
right:14px;
bottom:14px;
}
#backToTop{
width:42px;
height:42px;
right:14px;
bottom:72px;
}
}