/*==================================================
MiCarga.mx
STYLE.CSS
PARTE 1
==================================================*/

/*==============================
RESET
===============================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#F5F7FA;
    color:#2D3748;
    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;
    color:inherit;

}

ul{

    list-style:none;

}

button{

    border:none;
    outline:none;
    cursor:pointer;

}

/*==============================
VARIABLES
===============================*/

:root{

--primary:#0F4C81;
--secondary:#2BB673;
--accent:#F39C12;

--white:#FFFFFF;

--gray:#F5F7FA;
--gray2:#E5E7EB;

--text:#2D3748;

--radius:18px;

--shadow:

0 10px 30px rgba(15,76,129,.10);

--transition:.30s;

}

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

.container{

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

}

/*==============================
HEADER
===============================*/

header{

position:fixed;

top:0;
left:0;

width:100%;

background:white;

height:85px;

display:flex;

align-items:center;

z-index:9999;

transition:.35s;

}

header.scroll{

box-shadow:

0 8px 30px rgba(0,0,0,.10);

}

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

.nav{

display:flex;

justify-content:space-between;

align-items:center;

height:85px;

}

/*==============================
LOGO
===============================*/

.logo{

font-size:34px;

font-weight:700;

color:var(--primary);

}

.logo span{

color:var(--secondary);

}

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

.desktop{

display:flex;

align-items:center;

gap:28px;

}

.desktop a{

font-size:15px;

font-weight:500;

transition:.25s;

}

.desktop a:hover{

color:var(--primary);

}

/*==============================
BOTONES
===============================*/

.btn-primary{

background:var(--secondary);

color:white;

padding:14px 28px;

border-radius:10px;

font-weight:600;

transition:.3s;

display:inline-flex;

align-items:center;

justify-content:center;

}

.btn-primary:hover{

transform:translateY(-3px);

box-shadow:

0 12px 25px rgba(43,182,115,.30);

}

.btn-secondary{

border:2px solid white;

padding:14px 28px;

border-radius:10px;

font-weight:600;

color:white;

transition:.3s;

display:inline-flex;

align-items:center;

justify-content:center;

}

.btn-secondary:hover{

background:white;

color:var(--primary);

}

.btn-outline{

padding:12px 24px;

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

border-radius:10px;

font-weight:600;

color:var(--primary);

transition:.3s;

}

.btn-outline:hover{

background:var(--primary);

color:white;

}

/*==============================
ICONOS MOVIL
===============================*/

.mobile-icons{

display:none;

gap:25px;

font-size:30px;

color:var(--primary);

cursor:pointer;

}

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

.hero{

margin-top:85px;

padding:90px 0;

background:

linear-gradient(

135deg,

#0F4C81,

#1877F2

);

color:white;

}

.hero-grid{

display:grid;

grid-template-columns:

1fr 520px;

gap:70px;

align-items:center;

}

.badge{

display:inline-block;

padding:10px 18px;

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

border-radius:50px;

margin-bottom:25px;

font-size:14px;

}

.hero h1{

font-size:58px;

font-weight:800;

line-height:1.15;

margin-bottom:25px;

}

.hero p{

font-size:19px;

line-height:1.8;

margin-bottom:35px;

opacity:.95;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

margin-bottom:45px;

}

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

.hero-stats{

display:flex;

gap:45px;

}

.hero-stats strong{

display:block;

font-size:34px;

margin-bottom:6px;

}

.hero-stats span{

font-size:15px;

opacity:.90;

}

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

.hero-card{

background:white;

color:var(--text);

padding:35px;

border-radius:22px;

box-shadow:

0 20px 50px rgba(0,0,0,.20);

}

.card-head{

display:flex;

align-items:center;

gap:10px;

color:var(--secondary);

font-weight:700;

margin-bottom:30px;

}

.ruta{

font-size:28px;

font-weight:700;

color:var(--primary);

display:flex;

justify-content:center;

align-items:center;

gap:18px;

margin-bottom:35px;

}

.datos{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:20px;

margin-bottom:35px;

}

.datos div{

background:#F7F9FC;

padding:18px;

border-radius:12px;

}

.datos span{

display:block;

font-size:13px;

color:#777;

margin-bottom:6px;

}

.datos strong{

font-size:18px;

color:var(--primary);

}

.full{

width:100%;

}

/*==============================
NUMBERS
===============================*/

.numbers{

padding:70px 0;

background:white;

}

.numbers-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:30px;

}

.number-card{

background:#F8FAFC;

padding:35px;

border-radius:18px;

text-align:center;

transition:.30s;

box-shadow:

0 8px 25px rgba(0,0,0,.05);

}

.number-card:hover{

transform:translateY(-8px);

box-shadow:

0 20px 35px rgba(15,76,129,.12);

}

.number-card h2{

font-size:48px;

color:var(--primary);

margin-bottom:12px;

}

.number-card p{

color:#666;

font-size:17px;

}
/*==================================================
STYLE.CSS
PARTE 2
SECCIONES
==================================================*/

/*==============================
TÍTULOS DE SECCIÓN
===============================*/

section{

padding:90px 0;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

background:#EAF6FF;

color:var(--primary);

padding:8px 18px;

border-radius:50px;

font-size:14px;

font-weight:600;

margin-bottom:18px;

}

.section-title h2{

font-size:44px;

color:var(--primary);

margin-bottom:18px;

font-weight:700;

}

.section-title p{

max-width:700px;

margin:auto;

font-size:18px;

color:#6B7280;

line-height:1.8;

}

/*==============================
CÓMO FUNCIONA
===============================*/

.how{

background:#F8FAFC;

}

.steps{

display:grid;

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

gap:30px;

}

.step{

background:white;

padding:40px 30px;

border-radius:20px;

text-align:center;

transition:.35s;

box-shadow:var(--shadow);

}

.step:hover{

transform:translateY(-10px);

}

.step .icon{

width:90px;

height:90px;

margin:auto;

background:linear-gradient(135deg,var(--primary),#1877F2);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:white;

font-size:34px;

margin-bottom:25px;

}

.step h3{

margin-bottom:18px;

font-size:24px;

color:var(--primary);

}

.step p{

line-height:1.8;

color:#666;

}

/*==============================
SERVICIOS
===============================*/

.services{

background:white;

}

.services-grid{

display:grid;

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

gap:30px;

}

.service{

background:#F8FAFC;

padding:40px;

border-radius:20px;

transition:.35s;

text-align:center;

border:1px solid transparent;

}

.service:hover{

transform:translateY(-8px);

border-color:var(--secondary);

box-shadow:var(--shadow);

}

.service i{

font-size:48px;

color:var(--secondary);

margin-bottom:25px;

}

.service h3{

font-size:24px;

margin-bottom:15px;

color:var(--primary);

}

.service p{

line-height:1.8;

color:#666;

}

/*==============================
BENEFICIOS
===============================*/

.benefits{

background:#F8FAFC;

}

.benefits-grid{

display:grid;

grid-template-columns:1fr 420px;

gap:70px;

align-items:center;

}

.small-title{

display:inline-block;

background:#E8F8F1;

padding:8px 18px;

border-radius:50px;

color:var(--secondary);

font-weight:600;

margin-bottom:20px;

}

.benefits h2{

font-size:42px;

margin-bottom:25px;

color:var(--primary);

}

.benefits p{

font-size:18px;

line-height:1.8;

margin-bottom:35px;

color:#555;

}

.benefit-list{

display:flex;

flex-direction:column;

gap:18px;

}

.benefit-list li{

display:flex;

align-items:center;

gap:12px;

font-size:17px;

}

.benefit-list i{

color:var(--secondary);

font-size:20px;

}

.benefit-card{

display:flex;

flex-direction:column;

gap:30px;

}

.mini-card{

background:white;

padding:35px;

border-radius:20px;

box-shadow:var(--shadow);

}

.mini-card h4{

margin-bottom:15px;

color:#666;

}

.mini-card h1{

font-size:52px;

color:var(--primary);

margin-bottom:10px;

}

.mini-card.blue{

background:linear-gradient(135deg,var(--primary),#1877F2);

color:white;

}

.mini-card.blue h1,

.mini-card.blue h4,

.mini-card.blue p{

color:white;

}

/*==============================
TIPOS DE UNIDADES
===============================*/

.fleet{

background:white;

}

.fleet-grid{

display:grid;

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

gap:30px;

}

.fleet-card{

background:#F8FAFC;

padding:40px;

border-radius:20px;

text-align:center;

transition:.35s;

}

.fleet-card:hover{

background:var(--primary);

color:white;

transform:translateY(-10px);

}

.fleet-card:hover h3,

.fleet-card:hover p,

.fleet-card:hover i{

color:white;

}

.fleet-card i{

font-size:52px;

margin-bottom:25px;

color:var(--secondary);

}

.fleet-card h3{

font-size:24px;

margin-bottom:15px;

color:var(--primary);

}

.fleet-card p{

color:#666;

line-height:1.7;

}

/*==============================
EMPRESAS
===============================*/

.companies{

background:#F8FAFC;

}

.company-grid{

display:grid;

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

gap:25px;

}

.company-card{

background:white;

padding:35px;

border-radius:18px;

text-align:center;

font-size:22px;

font-weight:600;

color:var(--primary);

transition:.35s;

box-shadow:var(--shadow);

}

.company-card:hover{

background:var(--secondary);

color:white;

transform:translateY(-8px);

}
/*==================================================
STYLE.CSS
PARTE 3
CARGAS - TESTIMONIOS - FAQ - CTA - FOOTER
==================================================*/

/*==============================
CARGAS RECIENTES
===============================*/

.loads{

background:white;

}

.loads-grid{

display:grid;

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

gap:30px;

}

.load-card{

background:white;

padding:35px;

border-radius:20px;

box-shadow:var(--shadow);

transition:.35s;

border-top:5px solid var(--secondary);

position:relative;

overflow:hidden;

}

.load-card:hover{

transform:translateY(-10px);

}

.status{

position:absolute;

top:18px;

right:18px;

background:var(--secondary);

color:white;

padding:8px 15px;

border-radius:30px;

font-size:13px;

font-weight:600;

}

.load-card h3{

font-size:26px;

color:var(--primary);

margin-top:20px;

margin-bottom:15px;

}

.load-card p{

color:#666;

margin-bottom:25px;

}

.load-info{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.load-info span{

color:#666;

}

.load-info strong{

font-size:28px;

color:var(--secondary);

}

.load-card a{

display:block;

text-align:center;

background:var(--primary);

color:white;

padding:14px;

border-radius:10px;

font-weight:600;

transition:.3s;

}

.load-card a:hover{

background:var(--secondary);

}

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

.testimonials{

background:#F8FAFC;

}

.testimonial-grid{

display:grid;

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

gap:30px;

}

.testimonial{

background:white;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

position:relative;

transition:.35s;

}

.testimonial:hover{

transform:translateY(-8px);

}

.testimonial::before{

content:"★★★★★";

display:block;

color:#F39C12;

font-size:20px;

margin-bottom:20px;

letter-spacing:3px;

}

.testimonial p{

line-height:1.8;

color:#555;

margin-bottom:25px;

font-style:italic;

}

.testimonial h4{

color:var(--primary);

}

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

.faq{

background:white;

}

.faq-grid{

display:grid;

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

gap:30px;

}

.faq-item{

background:#F8FAFC;

padding:35px;

border-radius:18px;

transition:.35s;

}

.faq-item:hover{

background:white;

box-shadow:var(--shadow);

}

.faq-item h3{

margin-bottom:15px;

color:var(--primary);

font-size:22px;

}

.faq-item p{

line-height:1.8;

color:#666;

}

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

.final-cta{

background:linear-gradient(135deg,var(--primary),#1877F2);

text-align:center;

color:white;

}

.final-cta h2{

font-size:52px;

margin-bottom:20px;

}

.final-cta p{

font-size:20px;

margin-bottom:40px;

opacity:.95;

}

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

footer{

background:#0B1F33;

color:white;

padding:80px 0 40px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr 1.5fr;

gap:40px;

margin-bottom:50px;

}

.footer-grid h2{

font-size:34px;

margin-bottom:20px;

}

.footer-grid h2 span{

color:var(--secondary);

}

.footer-grid h3{

margin-bottom:18px;

font-size:20px;

}

.footer-grid p{

line-height:1.8;

color:#D1D5DB;

}

.footer-grid li{

margin-bottom:14px;

color:#D1D5DB;

transition:.25s;

cursor:pointer;

}

.footer-grid li:hover{

color:white;

padding-left:6px;

}

footer hr{

border:none;

height:1px;

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

margin-bottom:30px;

}

.footer-copy{

text-align:center;

color:#BFC6CE;

font-size:15px;

}

/*==============================
BOTON SUBIR
===============================*/

#btnTop{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

border-radius:50%;

background:var(--secondary);

color:white;

font-size:22px;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.35s;

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

z-index:999;

}

#btnTop.show{

opacity:1;

visibility:visible;

}

#btnTop:hover{

transform:translateY(-6px);

background:var(--primary);

}

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

.step,
.service,
.fleet-card,
.company-card,
.load-card,
.testimonial,
.faq-item,
.number-card{

opacity:0;

transform:translateY(40px);

transition:.8s;

}

.visible{

opacity:1 !important;

transform:translateY(0) !important;

}
/*==================================================
STYLE.CSS
PARTE 4
RESPONSIVE + MENÚ MÓVIL
==================================================*/

/*==============================
OVERLAY
===============================*/

.overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.55);

opacity:0;
visibility:hidden;

transition:.35s;

z-index:9998;

}

.overlay.active{

opacity:1;

visibility:visible;

}

/*==============================
SIDEBAR
===============================*/

.sidebar{

position:fixed;

top:0;
left:-340px;

width:320px;

height:100vh;

background:white;

z-index:9999;

transition:.35s;

overflow-y:auto;

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

padding:30px;

}

.sidebar.active{

left:0;

}

.sidebar-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:40px;

}

.sidebar-header h2{

font-size:30px;

color:var(--primary);

}

.sidebar-header span{

color:var(--secondary);

}

.sidebar-header i{

font-size:28px;

cursor:pointer;

color:#666;

}

.perfil{

text-align:center;

margin-bottom:40px;

}

.avatar{

font-size:80px;

color:var(--primary);

margin-bottom:15px;

}

.perfil h3{

margin-bottom:10px;

}

.perfil p{

color:#666;

font-size:15px;

line-height:1.6;

}

.sidebar a{

display:flex;

align-items:center;

gap:15px;

padding:16px 20px;

border-radius:12px;

margin-bottom:10px;

font-weight:500;

transition:.3s;

}

.sidebar a:hover{

background:#EEF6FF;

color:var(--primary);

}

.sidebar a i{

width:25px;

text-align:center;

}

/*==============================
TABLETS
===============================*/

@media(max-width:1200px){

.hero-grid{

grid-template-columns:1fr;

gap:60px;

text-align:center;

}

.hero-card{

max-width:600px;

margin:auto;

}

.benefits-grid{

grid-template-columns:1fr;

}

.footer-grid{

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

}

}

/*==============================
TABLET
===============================*/

@media(max-width:992px){

.desktop{

display:none;

}

.mobile-icons{

display:flex;

}

.hero h1{

font-size:46px;

}

.steps{

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

}

.services-grid{

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

}

.fleet-grid{

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

}

.company-grid{

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

}

.loads-grid{

grid-template-columns:1fr;

}

.testimonial-grid{

grid-template-columns:1fr;

}

.faq-grid{

grid-template-columns:1fr;

}

.numbers-grid{

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

}

}

/*==============================
CELULARES
===============================*/

@media(max-width:768px){

.hero{

padding:70px 0;

}

.hero h1{

font-size:36px;

}

.hero p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons a{

width:100%;

justify-content:center;

}

.hero-stats{

flex-direction:column;

gap:20px;

}

.section-title h2{

font-size:34px;

}

.section-title p{

font-size:16px;

}

.steps{

grid-template-columns:1fr;

}

.services-grid{

grid-template-columns:1fr;

}

.fleet-grid{

grid-template-columns:1fr;

}

.company-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-grid ul{

padding:0;

}

.benefits h2{

font-size:34px;

}

.final-cta h2{

font-size:38px;

}

.number-card h2{

font-size:40px;

}

}

/*==============================
CELULARES PEQUEÑOS
===============================*/

@media(max-width:480px){

.container{

width:94%;

}

.logo{

font-size:28px;

}

.hero{

margin-top:80px;

}

.hero-card{

padding:25px;

}

.ruta{

font-size:22px;

flex-direction:column;

gap:8px;

}

.datos{

grid-template-columns:1fr;

}

.section-title{

margin-bottom:45px;

}

.section-title h2{

font-size:30px;

}

.step,
.service,
.load-card,
.testimonial,
.faq-item{

padding:28px;

}

.sidebar{

width:290px;

}

#btnTop{

right:20px;

bottom:20px;

width:48px;

height:48px;

font-size:18px;

}

}