/* Navbar ASMX */
.navbar{
padding:.75rem 0;
background:#000!important;
}
.navbar-brand img{
width:auto;
max-height:42px;
}
.navbar-toggler{
padding:.25rem;
}
.navbar-nav .nav-link{
color:#e4b95f;
font-size:.95rem;
font-weight:500;
padding:.75rem 0;
transition:opacity .2s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{
color:#fff;
opacity:.65;
}
@media (min-width:992px){
.navbar-nav{
gap:1.25rem;
}
.navbar-nav .nav-link{
padding:.5rem 0;
}
}
/* Animación del menú desplegable en móviles */
@media (max-width:991.98px){
.navbar-collapse{
opacity:0;
transform:translateY(-8px);
transition:opacity .25s ease,transform .25s ease;
}
.navbar-collapse.show{
opacity:1;
transform:translateY(0);
}
.navbar-collapse.collapsing{
opacity:0;
transform:translateY(-8px);
transition:height .35s ease,opacity .25s ease,transform .25s ease;
}
}

/*Leyenda +1000 servicios*/
.vehicles-count{
background-color: #0b0b0b;
display:flex;
align-items:baseline;
justify-content:center;
gap:.5rem;
flex-wrap:wrap;
}

.vehicles-number{
position:relative;
display:inline-block;
color:#dcb96e;
font-size:2rem;
font-weight:800;
line-height:1;
}

.vehicles-text{
color:rgba(255,255,255,.78);
font-size:.95rem;
font-weight:500;
line-height:1.2;
}

/* Brillo */
.vehicles-number.shine{
animation:numberShine 1.2s ease;
}

@keyframes numberShine{
0%{
text-shadow:0 0 0 rgba(220,185,110,0);
filter:brightness(1);
}
35%{
text-shadow:0 0 8px rgba(220,185,110,.65),0 0 18px rgba(220,185,110,.35);
filter:brightness(1.25);
}
100%{
text-shadow:0 0 0 rgba(220,185,110,0);
filter:brightness(1);
}
}







/* HERO PRINCIPAL */
.hero{
position:relative;
min-height:220px;
display:flex;
align-items:flex-end;
background-image:url("../img/FondoInicio.png"); /* Cambia esta imagen por la tuya */
background-size:cover;
background-position:center;
background-repeat:no-repeat;
color:#fff;
overflow:hidden;
}
/* Capa oscura para mejorar la lectura sobre la fotografía */
.hero::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,.92) 100%);
}
/* Contenido por encima de la capa oscura */
.hero-content{
position:relative;
z-index:1;
padding-top:5rem;
padding-bottom:2rem;
}
/* Título principal */
.hero-title{
margin:0 0 1rem;
font-size:2.3rem;
font-weight:800;
line-height:.98;
letter-spacing:-.04rem;
}
/* Texto descriptivo */
.hero-text{
max-width:330px;
margin-bottom:1.4rem;
font-size:1.05rem;
line-height:1.4;
color:rgba(255,255,255,.9);
}
/* Botón de WhatsApp */
.btn-whatsapp{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.6rem;
width:100%;
max-width:330px;
padding:.85rem 1rem;
border:none;
border-radius:.65rem;
background:#25d366;
color:#fff;
font-size:1rem;
font-weight:600;
transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;
}
/* Efecto del botón */
.btn-whatsapp:hover,
.btn-whatsapp:focus{
background:#20bd5a;
color:#fff;
transform:translateY(-2px);
box-shadow:0 .5rem 1.5rem rgba(37,211,102,.25);
}
/* Icono provisional de WhatsApp */
.whatsapp-icon{
font-size:1.4rem;
line-height:1;
}
/* Texto de cobertura */
.hero-location{
margin:1rem 0 0;
font-size:.85rem;
font-weight:500;
color:rgba(255,255,255,.85);
}
/* Separadores */
.hero-location span{
margin:0 .2rem;
color:rgba(255,255,255,.55);
}
/* TABLET Y ESCRITORIO */
@media (min-width:768px){
.hero{
min-height:680px;
align-items:center;
background-position:center;
}
.hero::before{
background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.08) 75%);
}
.hero-content{
padding-top:6rem;
padding-bottom:6rem;
}
.hero-title{
font-size:3.5rem;
}
.hero-text{
font-size:1.15rem;
max-width:390px;
}
.btn-whatsapp{
width:auto;
padding:.9rem 1.5rem;
}
.hero-location{
font-size:.95rem;
}
}
/* ESCRITORIO GRANDE */
@media (min-width:1200px){
.hero{
min-height:720px;
}
.hero-title{
font-size:4.2rem;
}
}

/* SECCIÓN SERVICIOS */
.servicios{
background:#0b0b0b;
color:#fff;
}
.servicios-title{
margin:0;
font-size:1.8rem;
font-weight:800;
}
/* Tarjeta */
.service-card{
position:relative;
min-height:220px;
display:flex;
align-items:flex-end;
overflow:hidden;
border:1px solid rgba(220,185,110,.65);
border-radius:1rem;
background-size:cover;
background-position:center;
isolation:isolate;
}
/* Oscurece la imagen para mejorar legibilidad */
.service-overlay{
position:absolute;
inset:0;
z-index:-1;
background:linear-gradient(180deg,rgba(0,0,0,.08) 20%,rgba(0,0,0,.88) 100%);
}
/* Contenido inferior */
.service-content{
width:100%;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:1rem;
padding:1rem;
}
.service-content h3{
margin:0 0 .2rem;
font-size:1.15rem;
font-weight:700;
}
.service-content p{
margin:0;
color:#d8b76f;
font-size:.95rem;
}
/* Botón circular */
.service-btn{
width:46px;
height:46px;
flex:0 0 46px;
display:grid;
place-items:center;
border:0;
border-radius:50%;
background:#e4b95f;
color:#111;
font-size:1.25rem;
transition:transform .2s ease,background-color .2s ease;
}
.service-btn:hover,
.service-btn:focus{
background:#f0cb7a;
transform:translateX(3px);
}
/* MODALES ASMX */
.asmx-modal{
border:1px solid rgba(220,185,110,.35);
border-radius:1rem;
background:#111;
color:#fff;
overflow:hidden;
}
.asmx-modal .modal-header{
padding:1rem 1.25rem;
border-bottom:1px solid rgba(255,255,255,.08);
}
.asmx-modal .modal-body{
padding:1.25rem;
color:rgba(255,255,255,.85);
}
.modal-service-text{
margin:0;
font-size:.98rem;
line-height:1.5;
color:rgba(255,255,255,.86);
}
.service-modal-top{
display:flex;
flex-direction:column;
gap:.9rem;
}
.service-duration{
display:inline-flex;
align-items:center;
gap:.55rem;
width:fit-content;
padding:.7rem .95rem;
border:1px solid rgba(255,255,255,.08);
border-radius:.75rem;
background:#1a1a1a;
color:#fff;
font-size:.92rem;
font-weight:500;
}
.service-duration i{
font-size:1rem;
color:#dcb96e;
}
.service-subtitle{
margin:0 0 .85rem;
font-size:1rem;
font-weight:700;
color:#fff;
}
.service-list{
margin:0;
padding-left:1.1rem;
display:grid;
gap:.45rem;
}
.service-list li{
font-size:.95rem;
line-height:1.45;
color:rgba(255,255,255,.85);
}
.service-pack{
height:100%;
padding:1rem;
border:1px solid rgba(255,255,255,.08);
border-radius:.9rem;
box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.service-pack h4{
margin:0 0 .45rem;
font-size:1rem;
font-weight:800;
letter-spacing:.04em;
color:#fff;
}
.service-pack p{
margin:0 0 .65rem;
font-size:.9rem;
line-height:1.45;
color:rgba(255,255,255,.78);
}
.service-pack span{
display:block;
font-size:.78rem;
font-weight:600;
color:#dcb96e;
}
.pack-auto{
background:linear-gradient(180deg,#303030 0%,#242424 100%);
}
.pack-suv{
background:linear-gradient(180deg,#252525 0%,#191919 100%);
}
.pack-camioneta{
background:linear-gradient(180deg,#1b1b1b 0%,#0e0e0e 100%);
}
.pack-moto{
background:linear-gradient(180deg,#292929 0%,#1d1d1d 100%);
}
.pack-moto-premium{
background:linear-gradient(180deg,#1b1b1b 0%,#101010 100%);
}
/* Animación de apertura */
.modal.fade .modal-dialog{
transform:translateY(30px) scale(.94);
opacity:0;
transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s ease;
}
.modal.show .modal-dialog{
transform:translateY(0) scale(1);
opacity:1;
}
/* Tablet */
@media(min-width:768px){
.asmx-modal .modal-body{
padding:1.5rem;
}
.service-modal-top{
flex-direction:row;
align-items:flex-start;
justify-content:space-between;
gap:1rem;
}
}
/* Desktop */
@media(min-width:992px){
.asmx-modal .modal-body{
padding:1.75rem;
}
}
.service-pack a{
color:#dcb96e;
text-decoration:underline;
text-underline-offset:3px;
}

.service-pack a:hover,
.service-pack a:focus{
color:#f0cf84;
}


/* Animación personalizada de los modales */
.modal.fade .modal-dialog{
transform:translateY(20px) scale(.96);
opacity:0;
transition:transform .25s ease,opacity .25s ease;
}
.modal.show .modal-dialog{
transform:translateY(0) scale(1);
opacity:1;
}
/* Fondo oscuro del popup con transición suave */
.modal-backdrop{
transition:opacity .25s ease;
}

.resultados{
background:#080808;
color:#fff;
}
.resultados-title{
margin:0;
font-size:1.8rem;
font-weight:800;
}
.resultados-subtitle{
margin:.5rem 0 0;
color: #807d7676;
font-size:.95rem;
}




/* Pulso alrededor de la forma de las letras */
/* Texto principal */
.text-ripple{
position:relative;
display:inline-block;
color:#fff;
font-weight:70;
isolation:isolate;
}

/* Ondas que conservan la forma de las letras */
.text-ripple::before,
.text-ripple::after{
content:attr(data-text);
position:absolute;
inset:0;
z-index:-1;
color:transparent;  
-webkit-text-stroke:1px #fdfdfc;
-webkit-text-stroke:1px #f6f5f3;
pointer-events:none;
transform-origin:center;
opacity:0;
}

/* Primera onda */
.text-ripple::before{
animation:textRipple 4s ease-out infinite;
}

/* Segunda onda, ligeramente retrasada */
.text-ripple::after{
animation:textRipple 4s ease-out .35s infinite;
}

/* Efecto tipo gota en agua */
@keyframes textRipple{
0%,60%{
opacity:0;
transform:scale(1);
}
62%{
opacity:.8;
transform:scale(1);
}
75%{
opacity:.5;
transform:scale(1.035);
}
90%{
opacity:.2;
transform:scale(1.075);
}
100%{
opacity:0;
transform:scale(1.11);
}
}





.before-after{
position:relative;
width:100%;
aspect-ratio:16/9;
overflow:hidden;
border:1px solid rgba(220,185,110,.55);
border-radius:1rem;
background:#111;
user-select:none;
}
.before-after-img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
.after-image{
position:absolute;
inset:0;
width:50%;
overflow:hidden;
}
.after-image .before-after-img{
max-width:none;
}
.before-after-divider{
position:absolute;
top:0;
bottom:0;
left:50%;
width:2px;
background:#fff;
transform:translateX(-50%);
pointer-events:none;
}
.before-after-handle{
position:absolute;
top:50%;
left:50%;
width:46px;
height:46px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#fff;
color:#111;
font-size:.9rem;
transform:translate(-50%,-50%);
box-shadow:0 3px 15px rgba(0,0,0,.35);
}
.before-after-range{
position:absolute;
inset:0;
z-index:5;
width:100%;
height:100%;
margin:0;
opacity:0;
cursor:ew-resize;
}
.before-after-label{
position:absolute;
bottom:1rem;
z-index:4;
padding:.45rem .8rem;
border-radius:.4rem;
font-size:.75rem;
font-weight:700;
pointer-events:none;
}
.label-before{
left:1rem;
background:rgba(0,0,0,.75);
color:#fff;
}
.label-after{
right:1rem;
background:#e4b95f;
color:#111;
}
@media(min-width:768px){
.resultados-title{
font-size:2.2rem;
}
.before-after{
max-height:520px;
}
}

/* CTA FINAL */
.cta-final{
position:relative;
min-height:520px;
display:flex;
align-items:center;
background-image:url("../img/FondoFinal.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
color:#fff;
overflow:hidden;
}
.cta-final-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.75);
}
.cta-final-content{
position:relative;
z-index:1;
max-width:560px;
padding-top:3rem;
padding-bottom:3rem;
}
.cta-final h2{
margin:0 0 1.5rem;
font-size:2rem;
font-weight:800;
line-height:1.05;
}
.btn-whatsapp-final{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.65rem;
width:100%;
max-width:360px;
padding:.9rem 1.2rem;
border:0;
border-radius:.65rem;
background:#25d366;
color:#fff;
font-size:1rem;
font-weight:600;
transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.btn-whatsapp-final i{
font-size:1.3rem;
}
.btn-whatsapp-final:hover,
.btn-whatsapp-final:focus{
background:#20bd5a;
color:#fff;
transform:translateY(-2px);
box-shadow:0 .5rem 1.5rem rgba(37,211,102,.25);
}
.cta-pagos{
margin:1rem 0 0;
font-size:.85rem;
color:rgba(255,255,255,.7);
}
.cta-divider{
width:100%;
height:1px;
margin:1.5rem 0;
background:rgba(255,255,255,.18);
}
.cta-logo{
display:block;
width:auto;
max-width:140px;
max-height:70px;
margin:0 auto 1rem;
object-fit:contain;
}
.privacy-link{
display:inline-block;
color:rgba(255,255,255,.8);
font-size:.85rem;
text-decoration:underline;
text-underline-offset:3px;
transition:color .2s ease;
}
.privacy-link:hover,
.privacy-link:focus{
color:#fff;
}
.copyright{
margin:.75rem 0 0;
font-size:.75rem;
color:rgba(255,255,255,.45);
}
@media(min-width:768px){
.cta-final{
min-height:560px;
}
.cta-final h2{
font-size:2.6rem;
}
}


/* Botón flotante de WhatsApp */
/* Contenedor flotante */
.whatsapp-smart-wrap{
position:fixed;
right:1rem;
bottom:1rem;
z-index:1050;
transition:opacity .55s ease,visibility .55s ease,transform .55s ease;
}

/* Botón inteligente */
.whatsapp-smart{
height:58px;
width:58px;
display:flex;
align-items:center;
overflow:hidden;
border:1px solid rgba(220,185,110,.7);
border-radius:999px;
background:#111;
color:#fff;
text-decoration:none;
box-shadow:0 .5rem 1.5rem rgba(0,0,0,.4);
transition:width .35s cubic-bezier(.2,.8,.2,1),transform .2s ease,background-color .2s ease;
}

/* Área del icono */
.whatsapp-smart-icon{
position:relative;
width:58px;
height:58px;
min-width:58px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.75rem;
color:#25d366;
}

/* Punto de estado */
.whatsapp-status{
position:absolute;
right:9px;
bottom:9px;
width:8px;
height:8px;
border-radius:50%;
background:#25d366;
border:2px solid #111;
}

/* Texto oculto inicialmente */
.whatsapp-smart-text{
padding-right:1.15rem;
font-size:.88rem;
font-weight:600;
white-space:nowrap;
opacity:0;
transform:translateX(8px);
transition:opacity .2s ease,transform .25s ease;
}

/* Estado expandido */
.whatsapp-smart.is-expanded{
width:210px;
}

.whatsapp-smart.is-expanded .whatsapp-smart-text{
opacity:1;
transform:translateX(0);
}

/* Hover desktop */
.whatsapp-smart:hover,
.whatsapp-smart:focus{
width:210px;
background:#171717;
color:#fff;
transform:translateY(-2px);
}

.whatsapp-smart:hover .whatsapp-smart-text,
.whatsapp-smart:focus .whatsapp-smart-text{
opacity:1;
transform:translateX(0);
}

/* Pulso suave del punto */
.whatsapp-status::after{
content:"";
position:absolute;
inset:-4px;
border:1px solid #25d366;
border-radius:50%;
animation:whatsappPulse 2s infinite;
}

@keyframes whatsappPulse{
0%{
opacity:.7;
transform:scale(.7);
}
70%{
opacity:0;
transform:scale(1.7);
}
100%{
opacity:0;
transform:scale(1.7);
}
}

/* Ocultar cuando otro botón principal está visible */
.whatsapp-smart-wrap.is-hidden{
opacity:0;
visibility:hidden;
transform:translateY(15px);
pointer-events:none;
}

/* Desktop */
@media(min-width:768px){
.whatsapp-smart-wrap{
right:1.5rem;
bottom:1.5rem;
}
}