/* ============================================================
HAULER · PREMIUM DESIGN SYSTEM v10 (2026)
- Limpio, ordenado, sin código redundante
- Azul corporativo primario, naranja en hover (swoosh)
- Universal icon transition system
- FAQ accordion arrow con color animado
============================================================ */
/* ============================================================
1. VARIABLES & FONT
============================================================ */
:root {
--hauler-blue: #002a4e;
--hauler-blue-2: #003a6e;
--hauler-blue-soft: #eef3f9;
--hauler-orange: #ff7a00;
--text-body: #4a5868;
--glass-blur: 18px;
--glass-border: rgba(0, 42, 78, 0.07);
/* Sistema de sombras por capas — profundidad realista, no contornos */
--shadow-soft:
0 1px 2px rgba(0, 42, 78, 0.04),
0 4px 14px rgba(0, 42, 78, 0.05);
--shadow-medium:
0 2px 4px rgba(0, 42, 78, 0.05),
0 10px 28px rgba(0, 42, 78, 0.09);
--shadow-strong:
0 4px 8px rgba(0, 42, 78, 0.06),
0 18px 44px rgba(0, 42, 78, 0.13);
--shadow-orange:
0 2px 6px rgba(255, 122, 0, 0.18),
0 8px 24px rgba(255, 122, 0, 0.22);
/* Tipografía premium: Sora (display) + Manrope (body) */
--font-display: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--t-fast: 0.3s;
--t-base: 0.45s;
--t-slow: 0.6s;
}
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700;800&display=swap'); /* fallback; el en es la carga primaria */
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.006em;
text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================================
2. TIPOGRAFÍA
============================================================ */
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
letter-spacing: -0.022em;
font-weight: 700;
color: var(--hauler-blue);
}
h1 { font-weight: 700; letter-spacing: -0.03em; }
::selection { background: var(--hauler-blue); color: #fff; }
/* ============================================================
3. SISTEMA UNIVERSAL DE ÍCONOS — Swoosh blue → orange
============================================================ */
/* Transición base aplicada a TODOS los íconos FA */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands,
[class*="fa-"]:not(.navbar-toggler-icon):not(.btn-close) {
transition: color var(--t-base) var(--ease),
transform var(--t-base) var(--ease),
filter var(--t-base) var(--ease);
display: inline-block;
}
/* Color por defecto: forzar azul Hauler en cualquier ícono con text-primary o text-success */
.text-primary.fa, .text-primary[class*="fa-"],
.fa.text-primary, [class*="fa-"].text-primary {
color: var(--hauler-blue) !important;
}
/* Hover en valor-box: swoosh ícono */
.valor-box i {
color: var(--hauler-blue) !important;
}
.valor-box:hover i {
color: var(--hauler-orange) !important;
transform: translateY(-3px) scale(1.1);
filter: drop-shadow(0 4px 12px rgba(255, 122, 0, 0.4));
}
/* Hover en service card: swoosh ícono principal + checks */
.servicios-detallados .fa-users,
.servicios-detallados .fa-truck {
color: var(--hauler-blue) !important;
}
.servicios-detallados .p-4.bg-white:hover .fa-users,
.servicios-detallados .p-4.bg-white:hover .fa-truck {
color: var(--hauler-orange) !important;
transform: translateY(-2px) scale(1.08);
filter: drop-shadow(0 4px 10px rgba(255, 122, 0, 0.35));
}
.servicios-detallados .fa-check,
.servicios-detallados .text-success {
color: var(--hauler-blue) !important;
}
.servicios-detallados .p-4.bg-white:hover .fa-check,
.servicios-detallados .p-4.bg-white:hover .text-success {
color: var(--hauler-orange) !important;
transform: translateX(2px);
}
.servicios-detallados .p-4.bg-white:hover li:nth-child(1) .fa-check { transition-delay: 0.05s; }
.servicios-detallados .p-4.bg-white:hover li:nth-child(2) .fa-check { transition-delay: 0.12s; }
.servicios-detallados .p-4.bg-white:hover li:nth-child(3) .fa-check { transition-delay: 0.19s; }
/* Hover en footer contact list: swoosh íconos */
.footer ul li {
transition: transform var(--t-fast) var(--ease);
}
.footer ul li:hover {
transform: translateX(3px);
}
.footer ul li:hover i {
color: var(--hauler-orange) !important;
transform: scale(1.15);
}
/* Hover en modales: íconos h6 */
.modal-body h6 i {
color: var(--hauler-blue) !important;
}
.modal-body h6:hover i {
color: var(--hauler-orange) !important;
transform: scale(1.1);
}
/* Hover en accordion items: ícono del título también cambia */
.accordion-item:hover .fa,
.accordion-item:hover .fas,
.accordion-item:hover [class*="fa-"] {
color: var(--hauler-orange) !important;
}
/* Catchall: cualquier ícono dentro de cualquier h2, h3, h4, h5 al hover del padre */
h2:hover > i, h3:hover > i, h4:hover > i, h5:hover > i,
h2:hover .fa, h3:hover .fa, h4:hover .fa, h5:hover .fa {
color: var(--hauler-orange) !important;
}
/* ============================================================
4. NAVBAR
============================================================ */
.navbar {
background: rgba(255, 255, 255, 0.75) !important;
backdrop-filter: blur(var(--glass-blur)) saturate(160%);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
border-bottom: 1px solid rgba(0, 42, 78, 0.05);
transition: background var(--t-base) var(--ease),
box-shadow var(--t-base) var(--ease),
transform 0.5s var(--ease);
will-change: transform;
}
.navbar.scrolled {
background: rgba(255, 255, 255, 0.92) !important;
box-shadow: 0 1px 12px rgba(0, 42, 78, 0.06);
}
/* Auto-hide al hacer scroll hacia abajo */
.navbar.navbar-hidden {
transform: translateY(-100%);
}
/* Logo: animación de entrada al cargar la página */
.navbar-brand img {
transition: transform var(--t-base) var(--ease), filter var(--t-base) var(--ease);
animation: logo-entrance 1.1s var(--ease) 0.15s backwards;
}
.navbar-brand:hover img {
transform: scale(1.04);
filter: drop-shadow(0 2px 8px rgba(0, 42, 78, 0.15));
}
@keyframes logo-entrance {
0% {
opacity: 0;
transform: translateX(-12px) scale(0.96);
filter: blur(4px);
}
60% {
opacity: 1;
filter: blur(0);
}
100% {
opacity: 1;
transform: translateX(0) scale(1);
filter: blur(0);
}
}
.navbar .nav-link {
position: relative;
font-weight: 500;
color: var(--hauler-blue) !important;
transition: color var(--t-fast) var(--ease),
background var(--t-fast) var(--ease);
}
/* DESKTOP: línea inferior sutil */
@media (min-width: 992px) {
.navbar .nav-link::after {
content: '';
position: absolute;
bottom: 2px;
left: 50%;
width: 0;
height: 1.5px;
background: var(--hauler-blue);
transition: width var(--t-base) var(--ease),
background var(--t-base) var(--ease);
transform: translateX(-50%);
}
.navbar .nav-link:hover::after { width: 40%; }
.navbar .nav-link.active::after {
width: 50%;
background: var(--hauler-orange);
height: 2px;
}
}
/* MOBILE: pill pattern moderno (tendencia 2026 UX)
En lugar de línea, fondo soft azul cuando está activo */
@media (max-width: 991px) {
.navbar .nav-link::after {
display: none; /* eliminamos línea inferior en mobile */
}
.navbar .nav-link {
border-radius: 8px;
padding: 0.7rem 1rem !important;
margin: 2px 0;
border-bottom: none !important;
}
.navbar .nav-link:hover {
background: var(--hauler-blue-soft);
}
.navbar .nav-link.active {
background: var(--hauler-blue-soft);
color: var(--hauler-blue) !important;
font-weight: 600;
position: relative;
}
/* Borde lateral naranja sutil para reforzar estado activo en mobile */
.navbar .nav-link.active::before {
content: '';
position: absolute;
left: 0;
top: 25%;
bottom: 25%;
width: 3px;
background: var(--hauler-orange);
border-radius: 2px;
}
}
.navbar .nav-link.active { font-weight: 600; }
/* ============================================================
5. HERO
============================================================ */
.hero h1 {
color: #ffffff;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}
.hero .lead {
color: rgba(255, 255, 255, 0.92);
font-weight: 400;
}
.hero .btn {
padding: 12px 28px;
border-radius: 10px;
font-weight: 600;
letter-spacing: 0.005em;
border: 1px solid transparent;
transition: transform var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease),
background var(--t-fast) var(--ease);
}
.hero .btn-warning,
.hero .custom-orange {
background: var(--hauler-orange);
color: #fff;
box-shadow: 0 4px 14px rgba(255, 122, 0, 0.3);
animation: gentle-float 4s ease-in-out infinite;
}
.hero .btn-warning:hover,
.hero .custom-orange:hover {
background: #e96e00;
color: #fff;
box-shadow: 0 6px 18px rgba(255, 122, 0, 0.4);
animation-play-state: paused;
transform: translateY(-2px);
}
.hero .btn-light {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.25);
}
.hero .btn-light:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff !important;
transform: translateY(-1px);
}
@keyframes gentle-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
/* ============================================================
6. SECCIÓN QUIÉNES SOMOS
============================================================ */
.texto-quienes h2 {
font-size: 2.2rem;
margin-bottom: 1.25rem;
}
.texto-quienes ul li {
padding: 4px 0;
}
/* ============================================================
7. MISIÓN & VISIÓN — Cards sólidas con más separación
============================================================ */
/* Más espacio respecto a la sección anterior */
#quienes-somos .row.mt-5 {
margin-top: 4.5rem !important;
}
/* Separación entre las cards Misión y Visión.
Cada una ocupa 50% menos la mitad del espacio entre ellas (1.5rem total). */
#quienes-somos .row.mt-5.g-4 > .mision,
#quienes-somos .row.mt-5.g-4 > .vision {
flex: 0 0 calc(50% - 0.75rem);
max-width: calc(50% - 0.75rem);
}
/* Misión a la izquierda, Visión a la derecha, con 1.5rem (24px) de gap entre ellas */
#quienes-somos .row.mt-5.g-4 {
justify-content: space-between;
}
/* Cards Misión / Visión */
.mision, .vision {
background: #ffffff;
border: 1px solid var(--glass-border);
border-radius: 12px;
padding: 1.75rem 1.9rem;
box-shadow: var(--shadow-soft);
transition: transform var(--t-base) var(--ease),
box-shadow var(--t-base) var(--ease);
}
.mision:hover, .vision:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-medium);
}
/* Títulos h3 — anula margin-top:-45px del HTML original */
.mision h3, .vision h3 {
margin-top: 0 !important;
margin-bottom: 0.9rem !important;
padding-left: 0 !important;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 12px;
}
/* Anula cualquier ::before previo y reemplaza por ícono */
.mision h3::before,
.vision h3::before {
content: '';
position: static !important;
width: 36px !important;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: var(--hauler-blue-soft) !important;
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 1.05rem;
color: var(--hauler-blue);
transition: color var(--t-base) var(--ease),
background var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
.mision h3::before { content: "\f140"; } /* fa-bullseye */
.vision h3::before { content: "\f06e"; } /* fa-eye */
/* Swoosh al hover */
.mision:hover h3::before,
.vision:hover h3::before {
color: var(--hauler-orange);
background: rgba(255, 122, 0, 0.1) !important;
transform: translateY(-2px) scale(1.05);
}
.mision p, .vision p {
margin: 0;
color: var(--text-body);
line-height: 1.7;
font-size: 0.94rem;
}
/* ============================================================
8. CARRUSEL — Minimal, sin contador, Ken Burns sutil
============================================================ */
.carrusel-wrapper {
position: relative;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-soft);
transition: box-shadow var(--t-base) var(--ease);
}
.carrusel-wrapper:hover { box-shadow: var(--shadow-medium); }
.carrusel-contenedor {
border-radius: 16px;
overflow: hidden;
}
.carrusel-slide img {
width: 100%;
display: block;
animation: kenburns 14s ease-in-out infinite alternate;
transition: transform var(--t-slow) var(--ease);
}
.carrusel-slide:hover img { animation-play-state: paused; }
@keyframes kenburns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.04) translate(-1%, -1%); }
}
/* Ocultar contador 1/6 */
.carrusel-counter { display: none !important; }
/* Flechas: minimalistas */
.carrusel-btn {
width: 38px !important;
height: 38px !important;
background: rgba(255, 255, 255, 0.65) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: none !important;
border-radius: 50% !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
color: var(--hauler-blue) !important;
opacity: 0.7;
transition: opacity var(--t-fast) var(--ease),
background var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease),
color var(--t-fast) var(--ease) !important;
}
.carrusel-btn svg {
width: 16px; height: 16px;
stroke-width: 2 !important;
}
.carrusel-wrapper:hover .carrusel-btn { opacity: 1; }
.carrusel-btn:hover {
background: rgba(255, 255, 255, 0.95) !important;
color: var(--hauler-orange) !important;
transform: translateY(-50%) scale(1.05);
}
/* ============================================================
9. SERVICIOS DETALLADOS
============================================================ */
.servicios-detallados {
padding: 4rem 0;
background: #fafbfc;
}
.servicios-detallados .container h1 {
font-size: 2rem;
}
.servicios-detallados .p-4.bg-white {
background: #ffffff !important;
border: 1px solid var(--glass-border);
border-radius: 16px !important;
box-shadow: var(--shadow-soft);
transition: transform var(--t-base) var(--ease),
box-shadow var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
}
.servicios-detallados .p-4.bg-white:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-medium);
border-color: rgba(0, 42, 78, 0.15);
}
.servicios-detallados h4 {
color: var(--hauler-blue);
}
/* ============================================================
10. VALORES
============================================================ */
.valores-section {
background: #ffffff;
padding: 4rem 0;
}
.valor-box {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: 14px;
transition: transform var(--t-base) var(--ease),
box-shadow var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
}
.valor-box:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-medium);
border-color: rgba(0, 42, 78, 0.18);
}
.valor-box h5 {
margin-top: 0.5rem;
}
/* ============================================================
11. FAQ — Accordion con flechas en swoosh
============================================================ */
#preguntas-frecuentes {
background: #fafbfc !important;
padding: 4rem 0;
}
#preguntas-frecuentes .accordion-item {
background: #ffffff !important;
border: 1px solid var(--glass-border) !important;
border-radius: 12px !important;
margin-bottom: 10px;
overflow: hidden;
transition: box-shadow var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease);
}
#preguntas-frecuentes .accordion-item:hover {
box-shadow: var(--shadow-soft);
border-color: rgba(0, 42, 78, 0.15) !important;
}
#preguntas-frecuentes .accordion-button {
background: transparent !important;
font-weight: 600;
color: var(--hauler-blue) !important;
box-shadow: none !important;
padding: 1.1rem 1.5rem;
font-size: 0.97rem;
transition: color var(--t-fast) var(--ease);
}
#preguntas-frecuentes .accordion-item:hover .accordion-button {
color: var(--hauler-orange) !important;
}
#preguntas-frecuentes .accordion-button:not(.collapsed) {
background: var(--hauler-blue-soft) !important;
color: var(--hauler-blue) !important;
}
/* FLECHAS DEL ACCORDION — Swoosh con mask-image (cambian de color) */
#preguntas-frecuentes .accordion-button::after {
background-image: none !important;
background-color: var(--hauler-blue) !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat center / contain;
width: 1.1rem; height: 1.1rem;
transition: background-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease) !important;
}
/* Hover sobre la card: flecha se pone naranja */
#preguntas-frecuentes .accordion-item:hover .accordion-button::after {
background-color: var(--hauler-orange) !important;
transform: translateX(2px) scale(1.1);
}
/* Cuando está abierto: flecha rotada Y en naranja */
#preguntas-frecuentes .accordion-button:not(.collapsed)::after {
background-color: var(--hauler-orange) !important;
transform: rotate(-180deg);
}
#preguntas-frecuentes .accordion-body {
color: var(--text-body);
line-height: 1.65;
padding: 0.4rem 1.5rem 1.3rem;
font-size: 0.93rem;
}
/* ============================================================
12. FORMULARIO COTIZACIÓN
============================================================ */
#cotizar {
background: #ffffff !important;
padding: 4rem 0;
}
.form-container {
background: rgba(255, 255, 255, 0.7) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
border-radius: 18px;
padding: 2rem !important;
box-shadow: var(--shadow-soft);
}
.form-container label {
font-weight: 500;
color: var(--hauler-blue);
font-size: 0.88rem;
margin-bottom: 5px;
display: block;
transition: color var(--t-fast) var(--ease);
}
.form-container .mb-3:focus-within label,
.form-container [class*="col-"]:focus-within label {
color: var(--hauler-orange);
}
.form-control,
.form-select {
background: #ffffff !important;
border: 1px solid rgba(0, 42, 78, 0.12) !important;
border-radius: 10px !important;
padding: 11px 14px !important;
font-size: 0.93rem;
transition: border-color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease) !important;
}
.form-control:focus,
.form-select:focus {
border-color: var(--hauler-blue) !important;
box-shadow: 0 0 0 3px rgba(0, 42, 78, 0.1) !important;
}
.form-container .btn-primary {
background: var(--hauler-blue) !important;
border: none !important;
padding: 13px 28px !important;
border-radius: 10px !important;
font-weight: 600;
letter-spacing: 0.005em;
position: relative;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0, 42, 78, 0.2);
transition: background var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease) !important;
}
.form-container .btn-primary::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
transition: left 0.7s var(--ease);
pointer-events: none;
}
.form-container .btn-primary:hover {
background: var(--hauler-blue-2) !important;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 42, 78, 0.28);
}
.form-container .btn-primary:hover::after { left: 100%; }
/* ============================================================
13. FOOTER
============================================================ */
.footer.bg-dark-blue {
background: var(--hauler-blue) !important;
}
.footer h5 {
color: #fff;
position: relative;
padding-bottom: 10px;
margin-bottom: 14px;
font-size: 1rem;
}
.footer h5::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 24px; height: 1.5px;
background: rgba(255, 255, 255, 0.4);
border-radius: 2px;
}
.footer a {
transition: color var(--t-fast) var(--ease);
}
.footer a:hover {
color: rgba(255, 255, 255, 0.85) !important;
}
/* Social icons — Estilizamos el que envuelve al
El selector apunta al anchor en el div.d-flex.gap-3 */
.footer .d-flex.gap-3 > a {
width: 38px;
height: 38px;
display: inline-flex !important;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
border-radius: 8px;
font-size: 16px !important;
color: #fff !important;
text-decoration: none;
transition: background var(--t-base) var(--ease),
color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
.footer .d-flex.gap-3 > a:hover {
background: var(--hauler-orange) !important;
transform: translateY(-3px) scale(1.05);
color: #fff !important;
}
/* Ícono dentro del anchor: que ocupe el espacio correctamente */
.footer .d-flex.gap-3 > a > .fab,
.footer .d-flex.gap-3 > a > i {
font-size: 16px;
line-height: 1;
width: auto;
height: auto;
background: transparent !important;
border-radius: 0;
display: inline-block;
}
/* Anulamos la regla genérica anterior para que no afecte al */
.footer .fab {
background: transparent;
width: auto;
height: auto;
border-radius: 0;
}
/* ============================================================
14. WHATSAPP FLOAT — Pulso + CTA "Cotiza ahora"
============================================================ */
.whatsapp-float {
position: fixed;
bottom: 24px; right: 24px;
width: 56px; height: 56px;
border-radius: 50%;
background: #25D366;
color: #fff !important;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
text-decoration: none;
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
z-index: 9999;
transition: transform var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease);
}
/* Anillo de pulso continuo */
.whatsapp-float::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: #25D366;
z-index: -1;
animation: wa-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes wa-pulse {
0% { transform: scale(1); opacity: 0.55; }
70% { transform: scale(1.55); opacity: 0; }
100% { transform: scale(1.55); opacity: 0; }
}
/* Burbuja CTA "Cotiza ahora" persistente en desktop */
.whatsapp-float::after {
content: 'Cotiza ahora';
position: absolute;
right: calc(100% + 14px);
top: 50%;
transform: translateY(-50%);
background: var(--hauler-blue);
color: #fff;
padding: 8px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
font-family: 'Inter', sans-serif;
white-space: nowrap;
box-shadow: 0 6px 16px rgba(0, 42, 78, 0.2);
letter-spacing: -0.005em;
pointer-events: none;
transition: background var(--t-fast) var(--ease);
}
.whatsapp-float:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(37, 211, 102, 0.5);
}
.whatsapp-float:hover::after {
background: #001f3a;
}
@media (max-width: 991px) {
.whatsapp-float::after { display: none; }
}
/* ============================================================
15. MODALES
============================================================ */
.modal-content {
background: #ffffff !important;
border: 1px solid var(--glass-border);
border-radius: 16px !important;
box-shadow: var(--shadow-strong);
}
.modal-header {
border-bottom: 1px solid var(--glass-border);
}
.modal-title { color: var(--hauler-blue); }
/* ============================================================
16. SCROLL REVEAL
============================================================ */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal-stagger > * {
opacity: 0;
transform: translateY(15px);
transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
/* ============================================================
17. RESPONSIVE — Optimizado para móvil
============================================================ */
@media (max-width: 768px) {
.hero h1 { font-size: 1.7rem; line-height: 1.25; }
.hero .lead { font-size: 1rem; }
.texto-quienes h2 { font-size: 1.7rem; }
.form-container { padding: 1.5rem !important; }
.whatsapp-float { width: 50px; height: 50px; font-size: 24px; }
/* CTA del WhatsApp se oculta en móvil */
.whatsapp-float::after { display: none !important; }
/* Padding lateral consistente para todos los containers en móvil */
.container, .container-fluid {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
/* Misión/Visión: ancho completo apilados con buen padding */
#quienes-somos .row.mt-5.g-4 > .mision,
#quienes-somos .row.mt-5.g-4 > .vision {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
margin: 0;
padding: 1.5rem !important;
}
#quienes-somos .row.mt-5.g-4 {
--bs-gutter-x: 0;
--bs-gutter-y: 1rem;
margin-left: 0;
margin-right: 0;
}
/* Servicios: padding más cómodo en móvil */
.servicios-detallados .container h1 {
font-size: 1.6rem;
padding-bottom: 20px !important;
}
.servicios-detallados .p-4 {
padding: 1.5rem !important;
}
/* Valores: mismo tratamiento */
.valor-box {
padding: 1.5rem !important;
}
/* FAQ: padding más cómodo */
#preguntas-frecuentes .accordion-button,
.seccion-faq .accordion-button {
padding: 0.95rem 1.2rem;
font-size: 0.92rem;
}
/* Footer: más respiro entre columnas */
.footer .row > [class*="col-"] {
margin-bottom: 1.5rem;
}
/* Banner final: texto más legible */
.texto-banner {
font-size: 1.5rem;
text-align: center;
}
.logo-banner {
max-width: 220px;
}
/* Sección registro proveedores: padding cómodo */
.vehiculo-form {
padding: 1.5rem !important;
}
}
@media (max-width: 991px) {
/* Menú colapsado: glass + buen padding */
.navbar-collapse {
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 12px;
padding: 0.6rem 0.5rem;
margin-top: 12px;
box-shadow: var(--shadow-medium);
}
/* En móvil ocultar el CTA bubble */
.whatsapp-float::after { display: none; }
}
/* ============================================================
18. SCROLLBAR CUSTOM
============================================================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb {
background: var(--hauler-blue);
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--hauler-blue-2);
}
/* ============================================================
19. MÁS GLASS — Refinamientos adicionales v6
============================================================ */
/* Hero overlay con glass sutil (encima del video) */
.hero-overlay {
background: linear-gradient(135deg,
rgba(0, 42, 78, 0.65) 0%,
rgba(0, 26, 48, 0.55) 100%) !important;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
/* Hero video — visible siempre (carga nativa con autoplay) */
.hero-video {
opacity: 1;
}
/* Misión / Visión — Glass más profundo + animación de entrada al hover */
.mision, .vision {
background: rgba(255, 255, 255, 0.65) !important;
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
overflow: hidden;
position: relative;
}
/* Shine sweep sutil al hover de Misión/Visión */
.mision::after, .vision::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 122, 0, 0.06),
transparent);
transition: left 0.9s var(--ease);
pointer-events: none;
}
.mision:hover::after, .vision:hover::after {
left: 150%;
}
/* Service cards — Glass refinado */
.servicios-detallados .p-4.bg-white {
background: rgba(255, 255, 255, 0.75) !important;
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
}
/* Valores — Glass más visible */
.valor-box {
background: rgba(255, 255, 255, 0.7) !important;
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
}
/* FAQ items con glass sutil */
#preguntas-frecuentes .accordion-item {
background: rgba(255, 255, 255, 0.75) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* ============================================================
20. ANIMACIONES SUTILES — Polish v6
============================================================ */
/* Ícono de Misión/Visión: rotación sutil al hover */
.mision:hover h3::before {
animation: icon-pulse-orange 0.6s var(--ease);
}
.vision:hover h3::before {
animation: icon-pulse-orange 0.6s var(--ease);
}
@keyframes icon-pulse-orange {
0% { transform: translateY(0) scale(1); }
40% { transform: translateY(-3px) scale(1.12); }
100% { transform: translateY(-2px) scale(1.05); }
}
/* Valor box: animación de entrada al ícono (rebote sutil) */
.valor-box:hover i {
animation: icon-bounce 0.5s var(--ease);
}
@keyframes icon-bounce {
0% { transform: translateY(0) scale(1); }
50% { transform: translateY(-5px) scale(1.15); }
100% { transform: translateY(-3px) scale(1.1); }
}
/* Service card: el ícono principal hace un swing más definido */
.servicios-detallados .p-4.bg-white:hover .fa-users,
.servicios-detallados .p-4.bg-white:hover .fa-truck {
animation: icon-swing 0.6s var(--ease);
}
@keyframes icon-swing {
0% { transform: translateY(0) scale(1) rotate(0); }
30% { transform: translateY(-3px) scale(1.1) rotate(-5deg); }
60% { transform: translateY(-2px) scale(1.08) rotate(3deg); }
100% { transform: translateY(-2px) scale(1.08) rotate(0); }
}
/* Botones del hero: animación de entrada al cargar página */
.hero .btn {
animation: btn-fade-in 0.8s var(--ease) backwards;
}
.hero .btn:nth-child(1) { animation-delay: 0.3s; }
.hero .btn:nth-child(2) { animation-delay: 0.45s; }
@keyframes btn-fade-in {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
/* H1 y lead del hero: fade-in elegante */
.hero h1 {
animation: hero-fade-up 0.9s var(--ease) backwards;
animation-delay: 0.1s;
}
.hero .lead {
animation: hero-fade-up 0.9s var(--ease) backwards;
animation-delay: 0.25s;
}
@keyframes hero-fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Carrusel: borde sutil que cambia a naranja al hover */
.carrusel-wrapper {
transition: box-shadow var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
}
.carrusel-wrapper:hover {
border-color: rgba(255, 122, 0, 0.25);
}
/* Form: animación al campo enfocado */
.form-control,
.form-select {
transform: scale(1);
transition: border-color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease) !important;
}
.form-control:focus,
.form-select:focus {
transform: translateY(-1px);
}
/* WhatsApp: el ícono interno hace wiggle muy ocasional */
.whatsapp-float i {
animation: wa-wiggle 6s ease-in-out infinite;
}
@keyframes wa-wiggle {
0%, 90%, 100% { transform: rotate(0); }
92% { transform: rotate(-10deg); }
94% { transform: rotate(10deg); }
96% { transform: rotate(-6deg); }
98% { transform: rotate(0); }
}
/* Smooth fade-in para imágenes del carrusel — combinado con Ken Burns */
.carrusel-slide img {
animation: kenburns 14s ease-in-out infinite alternate,
img-fade-in 0.8s var(--ease) backwards;
}
@keyframes img-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* ============================================================
21. PÁGINA PROVEEDORES — Aplicación de glass + swoosh
============================================================ */
/* Beneficios proveedores — cards con glass + hover swoosh */
.beneficios-proveedores {
background: #fafbfc !important;
}
.beneficios-proveedores h2 {
color: var(--hauler-blue);
}
.card-beneficio {
background: rgba(255, 255, 255, 0.75) !important;
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid var(--glass-border) !important;
border-radius: 16px !important;
box-shadow: var(--shadow-soft) !important;
transition: transform var(--t-base) var(--ease),
box-shadow var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
position: relative;
overflow: hidden;
}
.card-beneficio::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 122, 0, 0.06), transparent);
transition: left 0.9s var(--ease);
pointer-events: none;
}
.card-beneficio:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-medium) !important;
border-color: rgba(0, 42, 78, 0.15) !important;
}
.card-beneficio:hover::after {
left: 150%;
}
.card-beneficio i {
color: var(--hauler-blue) !important;
}
.card-beneficio:hover i {
color: var(--hauler-orange) !important;
transform: translateY(-3px) scale(1.1);
filter: drop-shadow(0 4px 12px rgba(255, 122, 0, 0.4));
animation: icon-bounce 0.5s var(--ease);
}
.card-beneficio h5 {
color: var(--hauler-blue);
}
/* Sección registro proveedores — fondo + form glass */
.seccionproveedores {
background: linear-gradient(135deg, var(--hauler-blue) 0%, #001a30 100%) !important;
position: relative;
overflow: hidden;
}
.seccionproveedores::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255, 122, 0, 0.06), transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.seccionproveedores .container {
position: relative;
z-index: 1;
}
.seccionproveedores h2 {
color: #fff !important;
}
.vehiculo-form {
background: rgba(255, 255, 255, 0.96) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.5) !important;
border-radius: 18px !important;
box-shadow: 0 20px 60px rgba(0, 42, 78, 0.25) !important;
}
.vehiculo-form h5 {
color: var(--hauler-blue);
}
.vehiculo-form .form-label {
font-weight: 500;
color: var(--hauler-blue);
font-size: 0.88rem;
margin-bottom: 5px;
}
.vehiculo-form .btn-primary,
.seccion-agenda-cita .btn-primary {
background: var(--hauler-blue) !important;
border: none !important;
padding: 13px 28px !important;
border-radius: 10px !important;
font-weight: 600;
letter-spacing: 0.005em;
position: relative;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0, 42, 78, 0.2);
transition: background var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease) !important;
}
.vehiculo-form .btn-primary::after,
.seccion-agenda-cita .btn-primary::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
transition: left 0.7s var(--ease);
pointer-events: none;
}
.vehiculo-form .btn-primary:hover,
.seccion-agenda-cita .btn-primary:hover {
background: var(--hauler-blue-2) !important;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 42, 78, 0.28);
}
.vehiculo-form .btn-primary:hover::after,
.seccion-agenda-cita .btn-primary:hover::after {
left: 100%;
}
/* Alert primary en proveedores */
.seccionproveedores .alert-primary {
background: var(--hauler-blue-soft) !important;
border-color: rgba(0, 42, 78, 0.15) !important;
color: var(--hauler-blue) !important;
border-radius: 10px !important;
}
/* Sección agenda cita */
.seccion-agenda-cita {
background: #ffffff;
padding: 4rem 0;
}
.seccion-agenda-cita h2 {
color: var(--hauler-blue);
}
.seccion-agenda-cita form {
background: rgba(255, 255, 255, 0.7) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border) !important;
border-radius: 18px !important;
box-shadow: var(--shadow-soft) !important;
}
.seccion-agenda-cita h5 {
color: var(--hauler-blue);
}
/* Radio boxes */
.radio-box {
border: 1px solid var(--glass-border);
border-radius: 10px;
padding: 1rem 1.2rem;
margin-bottom: 0.75rem;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease),
background var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
}
.radio-box:hover {
border-color: var(--hauler-blue);
transform: translateY(-1px);
}
.radio-box input[type="radio"] {
accent-color: var(--hauler-blue);
width: 18px;
height: 18px;
}
.radio-box label {
margin: 0;
cursor: pointer;
flex: 1;
}
.radio-box input[type="radio"]:checked + label {
color: var(--hauler-blue);
}
.radio-box:has(input[type="radio"]:checked) {
border-color: var(--hauler-blue);
background: rgba(232, 239, 247, 0.8);
}
/* FAQ proveedores — mismos estilos que el FAQ del index */
.seccion-faq {
background: #fafbfc !important;
}
.seccion-faq h2 {
color: var(--hauler-blue);
}
.seccion-faq .accordion-item {
background: rgba(255, 255, 255, 0.75) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border) !important;
border-radius: 12px !important;
margin-bottom: 10px;
overflow: hidden;
transition: box-shadow var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease);
}
.seccion-faq .accordion-item:hover {
box-shadow: var(--shadow-soft);
border-color: rgba(0, 42, 78, 0.15) !important;
}
.seccion-faq .accordion-button {
background: transparent !important;
font-weight: 600;
color: var(--hauler-blue) !important;
box-shadow: none !important;
padding: 1.1rem 1.5rem;
font-size: 0.97rem;
transition: color var(--t-fast) var(--ease);
}
.seccion-faq .accordion-item:hover .accordion-button {
color: var(--hauler-orange) !important;
}
.seccion-faq .accordion-button:not(.collapsed) {
background: var(--hauler-blue-soft) !important;
color: var(--hauler-blue) !important;
}
.seccion-faq .accordion-button::after {
background-image: none !important;
background-color: var(--hauler-blue) !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat center / contain;
width: 1.1rem; height: 1.1rem;
transition: background-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease) !important;
}
.seccion-faq .accordion-item:hover .accordion-button::after {
background-color: var(--hauler-orange) !important;
transform: translateX(2px) scale(1.1);
}
.seccion-faq .accordion-button:not(.collapsed)::after {
background-color: var(--hauler-orange) !important;
transform: rotate(-180deg);
}
/* Proceso evaluación */
.seccion-evaluacion {
background: #ffffff;
padding: 4rem 0;
}
.seccion-evaluacion h2 {
color: var(--hauler-blue);
}
.seccion-evaluacion .card {
background: rgba(255, 255, 255, 0.75) !important;
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid var(--glass-border) !important;
border-radius: 16px !important;
box-shadow: var(--shadow-soft) !important;
transition: transform var(--t-base) var(--ease),
box-shadow var(--t-base) var(--ease);
}
.seccion-evaluacion .card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-medium) !important;
}
.seccion-evaluacion .card h5 {
color: var(--hauler-blue);
}
.seccion-evaluacion .bg-primary.bg-opacity-10 {
background: var(--hauler-blue-soft) !important;
transition: background var(--t-base) var(--ease);
}
.seccion-evaluacion .card:hover .bg-primary.bg-opacity-10 {
background: rgba(255, 122, 0, 0.12) !important;
}
.seccion-evaluacion .card i {
color: var(--hauler-blue) !important;
transition: color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
.seccion-evaluacion .card:hover i {
color: var(--hauler-orange) !important;
transform: scale(1.1);
}
/* Banner final */
.seccion-banner {
background: linear-gradient(135deg, var(--hauler-blue) 0%, #001a30 100%);
padding: 4rem 0 2rem;
color: #fff;
position: relative;
overflow: hidden;
}
.seccion-banner::before {
content: '';
position: absolute;
top: -30%;
left: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255, 122, 0, 0.08), transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.seccion-banner .container {
position: relative;
z-index: 1;
}
.texto-banner {
color: #fff;
font-weight: 700;
letter-spacing: -0.02em;
font-size: 2.2rem;
line-height: 1.25;
}
.logo-banner {
max-width: 320px;
transition: transform var(--t-base) var(--ease);
}
.logo-banner:hover {
transform: scale(1.02);
}
/* Hero proveedores (mismos h1 + lead animations que index) */
.hero h1 {
animation: hero-fade-up 0.9s var(--ease) backwards;
animation-delay: 0.1s;
}
.hero .lead {
animation: hero-fade-up 0.9s var(--ease) backwards;
animation-delay: 0.25s;
}
/* ════════════════════════════════════════════════════════════
★ PREMIUM REFINEMENT LAYER v10 ★
Luxury-tech · Linear/Stripe/Apple-grade
Profundidad por luz y sombra, glass realista, motion cinematográfico
Esta capa sobreescribe intencionalmente reglas previas.
════════════════════════════════════════════════════════════ */
/* ---- 1. RITMO TIPOGRÁFICO Y JERARQUÍA ELEVADA ---- */
.hero h1 {
font-size: clamp(2.1rem, 5.2vw, 3.5rem);
line-height: 1.05;
letter-spacing: -0.035em;
font-weight: 700;
max-width: 16ch;
text-shadow: 0 2px 40px rgba(0, 0, 0, 0.22);
}
.hero .lead {
font-size: clamp(1rem, 1.8vw, 1.22rem);
line-height: 1.6;
font-weight: 400;
max-width: 60ch;
margin-top: 1.5rem;
color: rgba(255, 255, 255, 0.9);
letter-spacing: -0.005em;
}
.texto-quienes h2,
.servicios-detallados h2,
.valores-section h2,
#preguntas-frecuentes h2,
#cotizar h2 {
font-size: clamp(1.7rem, 3.2vw, 2.35rem);
line-height: 1.12;
letter-spacing: -0.028em;
font-weight: 700;
}
p { letter-spacing: -0.005em; }
.lead, .texto-quienes p { line-height: 1.7; }
/* ---- 2. ATMÓSFERA & PROFUNDIDAD DE SECCIONES ---- */
.servicios-detallados {
background:
radial-gradient(1200px 600px at 85% -10%, rgba(0, 58, 110, 0.04), transparent 60%),
radial-gradient(900px 500px at 0% 110%, rgba(255, 122, 0, 0.03), transparent 55%),
#fafbfc;
padding: clamp(4rem, 8vw, 6.5rem) 0;
}
.valores-section {
padding: clamp(4rem, 8vw, 6.5rem) 0;
background:
radial-gradient(800px 400px at 100% 0%, rgba(0, 42, 78, 0.025), transparent 60%),
#ffffff;
}
#quienes-somos { padding-top: clamp(4rem, 7vw, 6rem); }
#preguntas-frecuentes {
background:
radial-gradient(1000px 500px at 50% 0%, rgba(0, 42, 78, 0.03), transparent 65%),
#f7f9fb !important;
padding: clamp(4rem, 8vw, 6rem) 0 !important;
}
/* ---- 3. NAVBAR · GLASS POR CAPAS CON HIGHLIGHT SUPERIOR ---- */
.navbar {
background: rgba(255, 255, 255, 0.62) !important;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 0 rgba(0, 42, 78, 0.04);
position: relative;
}
/* Línea de luz superior — diffusion sutil */
.navbar::after {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
pointer-events: none;
}
.navbar.scrolled {
background: rgba(255, 255, 255, 0.88) !important;
box-shadow:
0 1px 0 rgba(0, 42, 78, 0.05),
0 8px 30px rgba(0, 42, 78, 0.07);
}
/* ---- 4. HERO · OVERLAY CINEMATOGRÁFICO + GRANO ATMOSFÉRICO ---- */
.hero { position: relative; }
.hero-overlay {
background:
linear-gradient(105deg,
rgba(0, 26, 48, 0.82) 0%,
rgba(0, 42, 78, 0.6) 42%,
rgba(0, 42, 78, 0.34) 100%) !important;
backdrop-filter: blur(1.5px);
-webkit-backdrop-filter: blur(1.5px);
}
/* Viñeta inferior para fundir el hero con la siguiente sección */
.hero::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 38%;
background: linear-gradient(to top, rgba(255,255,255,0.06), transparent);
pointer-events: none;
z-index: 1;
}
/* ---- 5. BOTONES PREMIUM ---- */
.hero .btn,
.btn-primary {
border-radius: 12px;
font-family: var(--font-body);
font-weight: 600;
letter-spacing: -0.01em;
position: relative;
overflow: hidden;
}
.hero .btn-warning,
.hero .custom-orange {
background: linear-gradient(135deg, #ff8c1a, var(--hauler-orange));
box-shadow: var(--shadow-orange);
padding: 13px 30px;
}
.hero .btn-warning:hover,
.hero .custom-orange:hover {
background: linear-gradient(135deg, #ff8208, #ec6f00);
transform: translateY(-2px);
box-shadow:
0 4px 10px rgba(255, 122, 0, 0.24),
0 14px 34px rgba(255, 122, 0, 0.3);
}
/* Sheen sutil al pasar el mouse */
.hero .btn-warning::before,
.hero .custom-orange::before {
content: '';
position: absolute;
top: 0; left: -120%;
width: 60%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
transform: skewX(-18deg);
transition: left 0.7s var(--ease-out-expo);
pointer-events: none;
}
.hero .btn-warning:hover::before,
.hero .custom-orange:hover::before { left: 140%; }
.hero .btn-light {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.22);
padding: 13px 28px;
}
.hero .btn-light:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-2px);
}
/* ---- 6. CARDS PREMIUM · CASI SIN BORDE, PROFUNDIDAD POR LUZ ---- */
.servicios-detallados .p-4.bg-white,
.valor-box,
.mision, .vision {
border: 1px solid rgba(0, 42, 78, 0.05);
border-radius: 18px !important;
background: #ffffff;
box-shadow: var(--shadow-soft);
position: relative;
transition:
transform 0.5s var(--ease-out-expo),
box-shadow 0.5s var(--ease-out-expo),
border-color 0.5s var(--ease-out-expo);
will-change: transform;
}
/* Highlight interno superior — sensación de vidrio iluminado */
.servicios-detallados .p-4.bg-white::before,
.valor-box::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent 30%);
opacity: 0;
transition: opacity 0.5s var(--ease);
pointer-events: none;
}
.servicios-detallados .p-4.bg-white:hover,
.valor-box:hover,
.mision:hover, .vision:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-strong);
border-color: rgba(0, 42, 78, 0.09);
}
.servicios-detallados .p-4.bg-white:hover::before,
.valor-box:hover::before { opacity: 1; }
.valor-box {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
}
/* Ícono de servicio: contenedor premium con glow al hover */
.servicios-detallados .p-4.bg-white .fa-users,
.servicios-detallados .p-4.bg-white .fa-briefcase,
.servicios-detallados .p-4.bg-white .fa-plane,
.servicios-detallados .p-4.bg-white .fa-headset {
width: 52px; height: 52px;
display: inline-flex !important;
align-items: center;
justify-content: center;
background: var(--hauler-blue-soft);
border-radius: 13px;
font-size: 1.3rem !important;
transition:
background 0.45s var(--ease),
color 0.45s var(--ease),
transform 0.45s var(--ease-out-expo),
box-shadow 0.45s var(--ease);
}
.servicios-detallados .p-4.bg-white:hover .fa-users,
.servicios-detallados .p-4.bg-white:hover .fa-briefcase,
.servicios-detallados .p-4.bg-white:hover .fa-plane,
.servicios-detallados .p-4.bg-white:hover .fa-headset {
background: rgba(255, 122, 0, 0.12);
color: var(--hauler-orange) !important;
transform: translateY(-2px) scale(1.04);
box-shadow: 0 8px 20px rgba(255, 122, 0, 0.18);
}
/* Valor-box ícono premium */
.valor-box i {
width: 56px; height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--hauler-blue-soft);
border-radius: 14px;
margin-bottom: 1rem !important;
}
.valor-box:hover i {
background: rgba(255, 122, 0, 0.12);
transform: translateY(-3px) scale(1.06);
}
/* ---- 7. SERVICE CARD · listas refinadas ---- */
.servicios-detallados h6 {
font-family: var(--font-display);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #94a3b8;
font-weight: 600;
margin: 1.4rem 0 0.7rem;
}
.servicios-detallados ul li {
font-size: 0.9rem;
line-height: 1.55;
color: var(--text-body);
margin-bottom: 0.6rem !important;
}
/* ---- 8. FAQ · ACCORDION PREMIUM ---- */
.accordion-item {
border: none !important;
background: #ffffff !important;
border-radius: 16px !important;
margin-bottom: 0.85rem;
box-shadow: var(--shadow-soft);
overflow: hidden;
transition: box-shadow 0.4s var(--ease);
}
.accordion-item:hover { box-shadow: var(--shadow-medium); }
.accordion-button {
font-family: var(--font-display);
font-weight: 600;
font-size: 1rem;
letter-spacing: -0.015em;
color: var(--hauler-blue) !important;
background: #ffffff !important;
padding: 1.25rem 1.5rem;
border: none !important;
}
.accordion-button:not(.collapsed) {
background: var(--hauler-blue-soft) !important;
box-shadow: none !important;
color: var(--hauler-blue) !important;
}
.accordion-button:focus {
box-shadow: none !important;
border: none !important;
}
.accordion-button::after {
background-size: 1rem;
transition: transform 0.4s var(--ease-out-expo);
}
.accordion-body {
padding: 0 1.5rem 1.4rem;
color: var(--text-body);
line-height: 1.7;
font-size: 0.94rem;
}
/* ---- 9. FORMULARIO COTIZACIÓN · INPUTS PREMIUM ---- */
.form-container {
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 22px;
box-shadow: var(--shadow-medium);
padding: 2.5rem !important;
}
.form-container label {
font-size: 0.82rem;
font-weight: 600;
color: var(--hauler-blue);
letter-spacing: -0.01em;
margin-bottom: 0.35rem;
}
.form-container .form-control,
.form-container .form-select {
border: 1px solid rgba(0, 42, 78, 0.1);
border-radius: 11px;
padding: 0.7rem 0.95rem;
font-size: 0.92rem;
background: rgba(255, 255, 255, 0.7);
transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.form-container .form-control:focus,
.form-container .form-select:focus {
border-color: var(--hauler-orange);
box-shadow: 0 0 0 4px rgba(255, 122, 0, 0.1);
background: #ffffff;
outline: none;
}
.btn-primary {
background: linear-gradient(135deg, #003a6e, var(--hauler-blue)) !important;
border: none !important;
padding: 0.85rem !important;
border-radius: 12px !important;
letter-spacing: -0.01em;
box-shadow: 0 4px 14px rgba(0, 42, 78, 0.2);
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease) !important;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 26px rgba(0, 42, 78, 0.28);
background: linear-gradient(135deg, #00457f, #00305a) !important;
}
/* ---- 10. CARRUSEL · marco premium ---- */
.carrusel-wrapper {
border: 1px solid rgba(0, 42, 78, 0.05);
border-radius: 20px;
box-shadow: var(--shadow-medium);
}
.carrusel-wrapper:hover { box-shadow: var(--shadow-strong); }
.carrusel-contenedor { border-radius: 20px; }
/* ---- 11. PAGE-LOAD CINEMATOGRÁFICO · stagger orquestado ---- */
@keyframes hero-rise {
0% { opacity: 0; transform: translateY(26px); filter: blur(6px); }
60% { filter: blur(0); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero h1 {
animation: hero-rise 1s var(--ease-out-expo) 0.15s backwards;
}
.hero .lead {
animation: hero-rise 1s var(--ease-out-expo) 0.32s backwards;
}
.hero .d-flex {
animation: hero-rise 1s var(--ease-out-expo) 0.5s backwards;
}
/* ---- 12. SCROLL REVEAL refinado (usado por animations-v10.js) ---- */
.reveal {
opacity: 0;
transform: translateY(34px);
transition:
opacity 0.8s var(--ease-out-expo),
transform 0.8s var(--ease-out-expo);
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger entre cards hermanas */
.reveal[data-stagger="1"] { transition-delay: 0.08s; }
.reveal[data-stagger="2"] { transition-delay: 0.16s; }
.reveal[data-stagger="3"] { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
.hero h1, .hero .lead, .hero .d-flex,
.reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* ---- 13. WHATSAPP · refinamiento ---- */
.whatsapp-float {
box-shadow:
0 4px 14px rgba(37, 211, 102, 0.35),
0 10px 30px rgba(37, 211, 102, 0.2);
transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease);
}
.whatsapp-float:hover {
transform: translateY(-3px) scale(1.06);
box-shadow:
0 6px 18px rgba(37, 211, 102, 0.4),
0 14px 36px rgba(37, 211, 102, 0.28);
}
/* ---- 14. SCROLLBAR PREMIUM ---- */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(0, 42, 78, 0.18);
border-radius: 10px;
border: 3px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 42, 78, 0.32); background-clip: content-box; }
/* ---- 15. FOOTER · refinamiento ---- */
.footer { background: var(--hauler-blue) !important; }
.footer h5 { font-family: var(--font-display); letter-spacing: -0.01em; }
/* ---- 16. SELECCIÓN DE TEXTO ---- */
::selection { background: var(--hauler-orange); color: #fff; }
/* ---- 17. MÓVIL · ajustes finos premium ---- */
@media (max-width: 768px) {
.hero h1 { max-width: 100%; }
.form-container { padding: 1.6rem !important; border-radius: 18px; }
.servicios-detallados .p-4.bg-white:hover,
.valor-box:hover, .mision:hover, .vision:hover {
transform: translateY(-3px);
}
.accordion-button { font-size: 0.94rem; padding: 1.05rem 1.2rem; }
}