/*==========================*
* IGLU-CAR - responsivo.css *
*==========================*/

/* Desktop Grande */
@media (max-width:1200px){

.container{
max-width:1000px;
}

#hero h1{
font-size:2.7rem;
}

section h2{
font-size:2rem;
}

}

/* Notebook */
@media (max-width:992px){

.logo{
width:210px;
}

#hero{
padding:30px 0;
}

#hero h1{
font-size:2.2rem;
line-height:1.2;
}

.hero-text{
font-size:1.05rem;
}

.hero-video{
width:100%;
max-width:440px;
margin:20px auto 0;
}

.cards{
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.economia-destaque{
padding:30px;
}

}

/* Tablet */
@media (max-width:768px){

.container{
padding:0 18px;
}

section{
padding:60px 0;
}

#hero{
padding:25px 15px 35px;
}

.logo{
width:180px;
margin-bottom:25px;
}

.badge{
font-size:.9rem;
padding:8px 18px;
}

#hero h1{
font-size:2rem;
line-height:1.3;
}

.hero-text{
font-size:1rem;
margin-bottom:30px;
}

.hero-video{
width:100%;
max-width:430px;
margin:20px auto 0;
}

section h2{
font-size:1.8rem;
}

section > div > p{
font-size:1rem;
margin-bottom:30px;
}

.cards{
grid-template-columns:1fr;
gap:18px;
}

.card,
.cards article{
padding:20px;
}

.card h3,
.cards article h3{
font-size:1.15rem;
}

.youtube-info{
font-size:1rem;
}

.economia-destaque{
padding:25px;
}

.economia-destaque h3{
font-size:1.6rem;
}

#vehicle-search{
font-size:1rem;
padding:16px;
}

#search-btn{
width:100%;
padding:16px;
font-size:1rem;
}

}

/* Celulares */
@media (max-width:576px){

body{
font-size:15px;
}

#hero{
padding:20px 12px 30px;
}

.logo{
width:180px;
max-width:70%;
margin:0 auto 15px;
}

#hero h1{
font-size:1.7rem;
line-height:1.2;
}

.hero-text{
font-size:.95rem;
}

.hero-video{
width:95vw;
max-width:430px;
margin:15px auto 0;
border:6px solid #FFD54D;
border-radius:18px;
}

.hero-video video{
display:block;
width:100%;
height:auto;
aspect-ratio:9/16;
object-fit:contain;
}

section{
padding:50px 0;
}

section h2{
font-size:1.55rem;
}

.card,
.cards article{
padding:18px;
border-radius:14px;
}

.card img{
border-radius:10px;
}

.card h3,
.cards article h3{
font-size:1.05rem;
}

.card p,
.cards article p{
font-size:.93rem;
}

.economia-destaque{
padding:20px;
border-radius:14px;
}

.economia-destaque h3{
font-size:1.4rem;
}

.economia-destaque p{
font-size:.95rem;
}

#vehicle-search{
padding:15px;
border-radius:10px;
}

#search-btn{
padding:15px;
border-radius:10px;
}

#rodape{
padding:45px 20px;
}

#rodape h2{
font-size:1.6rem;
}

}

/* Celulares Pequenos */
@media (max-width:360px){

.container{
padding:0 12px;
}

#hero h1{
font-size:1.45rem;
line-height:1.2;
}

.hero-text{
font-size:.9rem;
}

.hero-video{
width:94vw;
border-width:5px;
}

section h2{
font-size:1.35rem;
}

.badge{
font-size:.8rem;
padding:8px 14px;
}

.card,
.cards article{
padding:15px;
}

#vehicle-search{
font-size:.9rem;
}

#search-btn{
font-size:.95rem;
}

}