h1, h2, h3, h4, h5, h6, .font-heading { font-family: 'Outfit', sans-serif; }
    body { font-family: 'Archivo', sans-serif; color: #333; background-color: #f8f9fa; }
    
    /* Efectos visuales modernos */
    .glass {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    .glass-dark {
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    
    /* Utilidades de fondos */
    .bg-hero-home { 
        background-image: url('../img/equipo-furgoneta-lg.jpg'); 
        background-size: cover; 
        background-position: center 30%; 
        background-attachment: fixed;
    }
    
    .hide-scrollbar::-webkit-scrollbar { display: none; }
    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }


/* ---------- Menú desplegable de servicios (escritorio) ---------- */
.nav-dd { position: relative; }
.nav-dd-panel {
    position: absolute; left: 50%; top: 100%; min-width: 320px; padding-top: 16px;
    transform: translateX(-50%) translateY(8px); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-dd:hover .nav-dd-panel,
.nav-dd:focus-within .nav-dd-panel,
.nav-dd.open .nav-dd-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dd .dd-chevron { transition: transform .2s ease; }
.nav-dd:hover .dd-chevron, .nav-dd.open .dd-chevron { transform: rotate(180deg); }

/* Menú móvil: acordeón de servicios */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] > summary .dd-chevron { transform: rotate(180deg); }

/* ---------- Transición entre páginas ---------- */
#page-loader {
    position: fixed; inset: 0; z-index: 100; background: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 1; visibility: visible; transition: opacity .35s ease, visibility .35s;
    animation: plFallback .01s linear 4s forwards; /* por si el JS no llega a cargar */
}
#page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.pl-logo { width: 76px; height: auto; animation: plPulse 1.2s ease-in-out infinite; }
.pl-bar { width: 120px; height: 3px; background: #e5e7eb; border-radius: 9999px; overflow: hidden; margin-top: 20px; }
.pl-bar span { display: block; height: 100%; width: 40%; background: #3FB148; border-radius: 9999px; animation: plSlide 1s ease-in-out infinite; }
@keyframes plPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .8; } }
@keyframes plSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@keyframes plFallback { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
    .pl-logo, .pl-bar span { animation: none; }
    #page-loader { transition-duration: .01s; }
}

/* ---------- Vídeo vertical (Vimeo) con carga bajo demanda ---------- */
.video-facade { position: relative; width: 100%; max-width: 320px; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 1.5rem; overflow: hidden; background: #1A1A1A; box-shadow: 0 25px 50px -12px rgba(0,0,0,.35); }
.video-facade > button { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; color: #fff; background: none; border: 0; }
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade .vf-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); transition: transform .5s ease; }
.video-facade > button:hover .vf-poster { transform: scale(1.05); }
.video-facade .vf-play { width: 76px; height: 76px; border-radius: 9999px; background: #3FB148; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px rgba(63,177,72,.25); transition: transform .2s ease; }
.video-facade > button:hover .vf-play { transform: scale(1.08); }

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-float {
    position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60;
    width: 60px; height: 60px; border-radius: 9999px; background: #25D366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.wa-float:hover { transform: scale(1.08); background: #1ebe5a; box-shadow: 0 12px 28px rgba(0,0,0,.3); }
.wa-float::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; background: #25D366; opacity: .5; z-index: -1;
    animation: waPulse 2.2s ease-out infinite;
}
@keyframes waPulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }
@media (max-width: 640px) { .wa-float { right: 16px; width: 56px; height: 56px; } }
@media (prefers-reduced-motion: reduce) { .wa-float::before { animation: none; opacity: 0; } }

/* ---------- Imágenes de cabecera con degradado lateral (se ve la foto, el texto sigue legible) ---------- */
.hero-shade-l { background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.72) 45%, rgba(0,0,0,.35) 100%); }
.hero-shade-c { background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.82) 100%); }
@media (max-width: 1023px) { .hero-shade-l { background: linear-gradient(180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.78) 100%); } }

/* ---------- Blog: filtros por categoría ---------- */
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; border-radius: 9999px; font-size: .85rem; font-weight: 600; background: #fff; color: #374151; border: 1px solid #e5e7eb; transition: all .2s ease; cursor: pointer; }
.chip:hover { border-color: #3FB148; color: #3FB148; }
.chip.is-active { background: #3FB148; border-color: #3FB148; color: #fff; }
.chip-n { font-size: .7rem; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(0,0,0,.07); }
.chip.is-active .chip-n { background: rgba(255,255,255,.25); }