/* 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;
}
}

body{
    background-color: black;
}








/* ==================================================
GALERÍA TIPO REELS
================================================== */
.reels-page{
position:relative;
padding:1.5rem 0;
background:#080808;
color:#fff;
overflow:hidden;
}

/* Encabezado */
.reels-header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:1rem;
margin-bottom:1rem;
}
.reels-eyebrow{
display:block;
margin-bottom:.25rem;
color:#c9c9c8;
font-size:.7rem;
font-weight:600;
letter-spacing:.1em;
text-transform:uppercase;
}
.reels-header h1{
margin:0;
font-size:1.7rem;
font-weight:800;
}
.reels-counter{
display:flex;
gap:.25rem;
color:rgba(255,255,255,.35);
font-size:.75rem;
font-weight:600;
}
#reelCurrent{
color:#dcb96e;
}

/* Contenedor vertical */
.reels-container{
position:relative;
height:72svh;
min-height:510px;
max-height:780px;
overflow-y:auto;
border:1px solid rgba(255,255,255,.1);
border-radius:1rem;
background:#0d0d0d;
scroll-snap-type:y mandatory;
scroll-behavior:smooth;
overscroll-behavior-y:contain;
scrollbar-width:none;
outline:none;
}
.reels-container::-webkit-scrollbar{
display:none;
}
.reels-container:focus-visible{
border-color:rgba(220,185,110,.6);
}

/* Cada reel */
.reel{
position:relative;
width:100%;
height:100%;
min-height:100%;
overflow:hidden;
scroll-snap-align:start;
scroll-snap-stop:always;
background:#111;
isolation:isolate;
}

/* ==================================================
FONDO DIFUMINADO
================================================== */
.reel-bg{
position:absolute;
inset:-35px;
z-index:0;
background-image:var(--reel-image);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
filter:blur(28px);
transform:scale(1.15);
opacity:.5;
}

/* Oscurecimiento adicional del fondo */
.reel-bg::after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,.28);
}

/* Imagen principal completa */
.reel-main-img{        
position:absolute;
top:50%;
left:50%;
z-index:1;
width:94%;
height:76%;
object-fit:contain;
object-position:center;
border-radius:.65rem;
transform:translate(-50%,-54%) scale(.985);
filter:drop-shadow(0 1rem 1.8rem rgba(0,0,0,.45));
transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s ease;
}

/* Reel activo */
.reel.active .reel-main-img{
transform:translate(-50%,-54%) scale(1);
}

/* Degradado para texto */
.reel-overlay{
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
background:
linear-gradient(
180deg,
rgba(0,0,0,.08) 0%,
rgba(0,0,0,.02) 45%,
rgba(0,0,0,.38) 67%,
rgba(0,0,0,.94) 100%
);
}

/* Contenido */
.reel-content{
position:absolute;
left:1rem;
right:1rem;
bottom:1.2rem;
z-index:3;
max-width:430px;
opacity:.65;
transform:translateY(12px);
transition:opacity .35s ease,transform .35s ease;
}
.reel.active .reel-content{
opacity:1;
transform:translateY(0);
}

/* Categoría */
.reel-category{
display:inline-flex;
align-items:center;
margin-bottom:.55rem;
padding:.35rem .65rem;
border:1px solid rgba(220,185,110,.45);
border-radius:999px;
background:rgba(10,10,10,.65);
backdrop-filter:blur(8px);
color:#dcb96e;
font-size:.67rem;
font-weight:600;
letter-spacing:.06em;
text-transform:uppercase;
}

/* Título */
.reel-content h2{
margin:0 0 .35rem;
font-size:1.65rem;
font-weight:800;
line-height:1.05;
}

/* Descripción */
.reel-content p{
max-width:360px;
margin:0 0 .9rem;
color:rgba(255,255,255,.7);
font-size:.85rem;
line-height:1.45;
}

/* Número */
.reel-number{
position:absolute;
top:1rem;
right:1rem;
z-index:4;
padding:.3rem .5rem;
border-radius:.4rem;
background:rgba(0,0,0,.4);
backdrop-filter:blur(6px);
color:rgba(255,255,255,.6);
font-size:.7rem;
font-weight:700;
letter-spacing:.08em;
}

/* Navegación */
.reels-navigation{
display:none;
}

/* ==================================================
TABLET / DESKTOP
================================================== */
@media(min-width:768px){
.reels-page{
padding:2.5rem 0;
}
.reels-header{
width:min(760px,90%);
margin:0 auto 1rem;
}
.reels-header h1{
font-size:2.1rem;
}
.reels-container{
width:min(760px,90%);
height:78vh;
min-height:620px;
max-height:850px;
margin:0 auto;
}
.reel-main-img{
width:90%;
height:76%;
}
.reel-content{
left:2rem;
bottom:2rem;
}
.reel-content h2{
font-size:2.1rem;
}
.reel-content p{
font-size:.92rem;
}
.reels-navigation{
position:absolute;
top:50%;
right:max(1.5rem,calc((100% - 880px)/2));
z-index:10;
display:flex;
flex-direction:column;
gap:.55rem;
transform:translateY(-50%);
}
.reels-navigation button{
width:46px;
height:46px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.12);
border-radius:50%;
background:#151515;
color:#fff;
transition:border-color .2s ease,color .2s ease,transform .2s ease,background .2s ease;
}
.reels-navigation button:hover,
.reels-navigation button:focus{
border-color:#dcb96e;
background:#1b1b1b;
color:#dcb96e;
transform:scale(1.05);
}
}

/* Desktop grande */
@media(min-width:1200px){
.reels-container{
width:min(820px,90%);
}
}

/* Accesibilidad */
@media(prefers-reduced-motion:reduce){
.reels-container{
scroll-behavior:auto;
}
.reel-main-img,
.reel-content{
transition:none;
}
}


/*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);
}
}



/* 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;
}
}