/*==========================================
HERO TRANSPORTE PERSONAL
==========================================*/

.hero-personal{

    position:relative;

    overflow:hidden;

    background:#f8fbfd;

    padding:110px 0;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(237,118,21,.08),
    transparent 35%);

    pointer-events:none;

}

.hero-content{

    position:relative;

    z-index:2;

}

.hero-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:#eaf5fa;

    color:#005b81;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.hero-content h1{

    font-size:54px;

    line-height:1.1;

    color:#17324d;

    font-weight:700;

    margin-bottom:25px;

}

.hero-content p{

    font-size:18px;

    line-height:1.8;

    color:#66717a;

    max-width:540px;

    margin-bottom:35px;

}

.btn-primary-telemetric{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 34px;

    background:#ed7615;

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    transition:.30s;

    font-weight:600;

}

.btn-primary-telemetric:hover{

    background:#d76710;

    color:#fff;

    transform:translateY(-3px);

}

.hero-image{

    text-align:center;

}

.hero-image img{

    width:100%;

    max-width:620px;

}

.hero-metrics{

    display:flex;

    gap:35px;

    margin-top:55px;

}

.metric{

    border-left:3px solid #ed7615;

    padding-left:18px;

}

.metric h3{

    color:#005b81;

    font-size:34px;

    margin:0;

    font-weight:700;

}

.metric span{

    color:#66717a;

    font-size:14px;

}

@media(max-width:991px){

.hero-personal{

padding:80px 0;

}

.hero-content{

text-align:center;

}

.hero-content h1{

font-size:40px;

}

.hero-content p{

margin:auto auto 35px;

}

.hero-metrics{

justify-content:center;

flex-wrap:wrap;

}

.hero-image{

margin-top:60px;

}

}

@media(max-width:576px){

.hero-content h1{

font-size:32px;

}

.hero-content p{

font-size:16px;

}

.hero-metrics{

gap:20px;

}

.metric{

padding-left:12px;

}

.metric h3{

font-size:26px;

}

}

/*=====================================
DEL CAOS AL CONTROL
======================================*/

.challenge-section{

padding:100px 0;

background:#f7fafc;

}

.challenge-card{

height:100%;

border-radius:28px;

padding:45px;

transition:.35s;

position:relative;

overflow:hidden;

}

.problem{

background:#ffffff;

border-top:6px solid #dc3545;

box-shadow:0 20px 45px rgba(0,0,0,.06);

}

.problem {
    color: #005b81;
}

.solution{

background:linear-gradient(135deg,#005b81,#0e3b5f);

color:#fff;

box-shadow:0 25px 55px rgba(0,91,129,.20);

}

.challenge-header{

display:flex;

align-items:center;

gap:15px;

margin-bottom:35px;

}

.challenge-header i{

font-size:2rem;

}

.problem .challenge-header i{

color:#dc3545;

}

.solution .challenge-header i{

color:#ed7615;

}

.challenge-header h3{

margin:0;

font-size:1.6rem;

font-weight:700;

color:#fff;

}

.challenge-card ul{

padding:0;

margin:0;

list-style:none;

}

.challenge-card li{

display:flex;

align-items:flex-start;

gap:15px;

margin-bottom:22px;

font-size:1rem;

line-height:1.7;

}

.problem li i{

color:#dc3545;

font-size:1.2rem;

margin-top:3px;

}

.solution li i{

color:#ed7615;

font-size:1.2rem;

margin-top:3px;

}

.solution li{

color:rgba(255,255,255,.92);

}

.challenge-card:hover{

transform:translateY(-8px);

}

/*=====================================
CENTRO DE CONTROL
======================================*/

.control-center-section{

padding:100px 0;

background:#ffffff;

}

.control-image{

border-radius:28px;

overflow:hidden;

box-shadow:0 30px 60px rgba(0,91,129,.12);

}

.control-image img{

width:100%;

transition:.5s;

}

.control-image:hover img{

transform:scale(1.03);

}

.control-grid{

display:grid;

gap:18px;

margin-top:35px;

}

.control-item{

display:flex;

align-items:flex-start;

gap:18px;

padding:22px;

background:#f7fafc;

border-radius:18px;

transition:.35s;

border-left:4px solid transparent;

}

.control-item:hover{

border-left:4px solid #ed7615;

transform:translateX(8px);

background:#ffffff;

box-shadow:0 15px 35px rgba(0,91,129,.08);

}

.control-item i{

font-size:1.8rem;

color:#005b81;

margin-top:3px;

flex-shrink:0;

}

.control-item h5{

margin-bottom:6px;

font-size:1rem;

font-weight:700;

color:#0e3b5f;

}

.control-item p{

margin:0;

font-size:.92rem;

line-height:1.6;

color:#6f7c87;

}

/*=====================================
PANEL EJECUTIVO
======================================*/

.executive-panel{

padding:100px 0;

background:linear-gradient(135deg,#f7fafc,#eef6fb);

}

.kpi-grid{

display:grid;

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

gap:25px;

}

.kpi-card{

background:#fff;

padding:35px 28px;

border-radius:24px;

box-shadow:0 18px 40px rgba(0,91,129,.08);

transition:.35s;

height:100%;

position:relative;

overflow:hidden;

}

.kpi-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:#005b81;

transition:.35s;

}

.kpi-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 55px rgba(0,91,129,.15);

}

.kpi-card:hover::before{

background:#ed7615;

}

.kpi-icon{

width:70px;

height:70px;

border-radius:18px;

background:#eef6fb;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

transition:.35s;

}

.kpi-card:hover .kpi-icon{

background:#ed7615;

}

.kpi-card:hover i{

color:#fff;

}

.kpi-icon i{

font-size:2rem;

color:#005b81;

transition:.35s;

}

.kpi-card h3{

font-size:1.2rem;

font-weight:700;

color:#0e3b5f;

margin-bottom:15px;

}

.kpi-card p{

font-size:.94rem;

line-height:1.7;

color:#6f7c87;

margin:0;

}

@media(max-width:991px){

.kpi-grid{

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

margin-top:50px;

}

}

@media(max-width:768px){

.kpi-grid{

grid-template-columns:1fr;

}

}

/*=====================================
APP MÓVIL
======================================*/

.employee-app-section{

padding:100px 0;

background:#ffffff;

}

.phone-wrapper{

position:relative;

}

.phone-image{

max-width:340px;

margin:auto;

filter:drop-shadow(0 35px 60px rgba(0,91,129,.18));

transition:.4s;

}

.phone-image:hover{

transform:translateY(-10px);

}

.journey{

position:relative;

padding-left:35px;

}

.journey::before{

content:"";

position:absolute;

left:18px;

top:10px;

bottom:10px;

width:3px;

background:#dce8f1;

}

.journey-item{

position:relative;

display:flex;

gap:25px;

margin-bottom:45px;

}

.journey-item:last-child{

margin-bottom:0;

}

.journey-icon{

width:65px;

height:65px;

border-radius:18px;

background:#005b81;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:1.5rem;

flex-shrink:0;

position:relative;

z-index:2;

transition:.35s;

}

.journey-item:hover .journey-icon{

background:#ed7615;

transform:scale(1.08);

}

.journey-item h5{

font-size:1.1rem;

font-weight:700;

color:#0e3b5f;

margin-bottom:8px;

}

.journey-item p{

margin:0;

color:#6f7c87;

line-height:1.7;

}

@media(max-width:991px){

.phone-image{

margin-bottom:60px;

}

.journey{

padding-left:15px;

}

}

/*=====================================
RUTAS INTELIGENTES
======================================*/

.routes-section{

padding:100px 0;

background:#f8fbfd;

}

.routes-map{

position:relative;

margin-top:50px;

border-radius:30px;

overflow:hidden;

box-shadow:0 25px 60px rgba(0,91,129,.12);

}

.routes-map img{

width:100%;

display:block;

transition:.4s;

}

.routes-map:hover img{

transform:scale(1.02);

}

.map-tag{

position:absolute;

background:#fff;

padding:12px 20px;

border-radius:40px;

display:flex;

align-items:center;

gap:10px;

font-weight:600;

box-shadow:0 15px 35px rgba(0,91,129,.15);

}

.map-tag i{

color:#ed7615;

}

.tag-1{

top:12%;

left:8%;

}

.tag-2{

bottom:22%;

right:12%;

}

.tag-3{

top:48%;

left:52%;

transform:translateX(-50%);

}

.routes-benefits{

margin-top:40px;

display:grid;

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

gap:20px;

}

.routes-benefits div{

background:#fff;

padding:22px;

border-radius:18px;

text-align:center;

font-weight:600;

color:#0e3b5f;

box-shadow:0 15px 35px rgba(0,91,129,.08);

transition:.35s;

}

.routes-benefits div:hover{

transform:translateY(-8px);

}

.routes-benefits i{

display:block;

font-size:2rem;

color:#ed7615;

margin-bottom:15px;

}

@media(max-width:991px){

.routes-benefits{

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

}

.map-tag{

display:none;

}

}

@media(max-width:576px){

.routes-benefits{

grid-template-columns:1fr;

}

}

/*=====================================
TRANSFORMA TU OPERACIÓN
======================================*/

.operation-transform{

padding:100px 0;

background:linear-gradient(180deg,#ffffff,#f8fbfd);

}

.operation-card{

height:100%;

padding:45px;

border-radius:28px;

transition:.35s;

}

.before-card{

background:#ffffff;

border:1px solid #e5edf4;

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

}

.after-card{

background:linear-gradient(135deg,#005b81,#0e3b5f);

color:#fff;

box-shadow:0 25px 60px rgba(0,91,129,.22);

}

.card-title{

display:flex;

align-items:center;

gap:15px;

font-size:1.35rem;

font-weight:700;

margin-bottom:35px;

}

.before-card .card-title i{

color:#dc3545;

}

.after-card .card-title i{

color:#ed7615;

}

.operation-card ul{

margin:0;

padding:0;

list-style:none;

}

.operation-card li{

display:flex;

align-items:flex-start;

gap:15px;

margin-bottom:22px;

line-height:1.7;

}

.before-card li i{

color:#dc3545;

margin-top:3px;

}

.after-card li i{

color:#ed7615;

margin-top:3px;

}

.after-card h4{
    color:#fff
}

.transform-arrow{

display:flex;

justify-content:center;

align-items:center;

height:100%;

}

.transform-arrow i{

font-size:5rem;

color:#ed7615;

animation:moveArrow 2.2s infinite;

}

@keyframes moveArrow{

0%{

transform:translateX(0);

}

50%{

transform:translateX(15px);

}

100%{

transform:translateX(0);

}

}

.operation-result{

margin-top:70px;

padding:45px;

border-radius:24px;

background:#eef6fb;

text-align:center;

}

.operation-result h3{

color:#005b81;

margin-bottom:18px;

font-size:2rem;

font-weight:700;

}

.operation-result p{

max-width:760px;

margin:auto;

}

@media(max-width:991px){

.transform-arrow{

padding:15px 0 25px;

}

.transform-arrow i{

transform:rotate(90deg);

animation:none;

font-size:4rem;

}

.operation-card{

padding:35px;

}

.operation-result{

margin-top:50px;

padding:35px;

}

}

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

.cta-personal{

padding:90px 0;

background:#f7fafc;

}

.cta-box{

background:linear-gradient(135deg,#005b81,#0e3b5f);

padding:60px;

border-radius:30px;

box-shadow:0 30px 70px rgba(0,91,129,.18);

}

.cta-box h2{

color:#fff;

margin:20px 0;

}

.cta-box p{

color:rgba(255,255,255,.88);

line-height:1.8;

}

.cta-benefits{

display:grid;

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

gap:15px;

margin-top:35px;

}

.cta-benefits span{

display:flex;

align-items:center;

gap:10px;

color:#fff;

font-weight:600;

}

.cta-benefits i{

color:#ed7615;

}

.cta-form{

background:#fff;

padding:35px;

border-radius:24px;

}

.cta-form h4{

color:#005b81;

font-weight:700;

margin-bottom:10px;

}

.cta-form p{

color:#6f7c87;

margin-bottom:30px;

}

.cta-form .form-control{

height:55px;

border-radius:14px;

border:1px solid #d9e4ec;

}

.cta-form .form-control:focus{

border-color:#005b81;

box-shadow:0 0 0 .2rem rgba(0,91,129,.12);

}

.btn-send{

width:100%;

height:56px;

border:none;

border-radius:50px;

background:#ed7615;

color:#fff;

font-weight:700;

transition:.3s;

}

.btn-send:hover{

background:#ff8f2f;

transform:translateY(-2px);

}

@media(max-width:991px){

.cta-box{

padding:40px 30px;

}

.cta-benefits{

grid-template-columns:1fr;

margin-bottom:40px;

}

}