/* GROUP MESA SAC — estilos del sitio. Un solo archivo, sin compilación.
   Sigue el orden de la página; cada bloque lleva un rótulo en mayúsculas.
   Colores, sombras y niveles de apilamiento salen de :root.
   Las animaciones dependen de la clase .anim en <html>. */

/* ===== VARIABLES DE DISEÑO ===== */

:root {
  
  --color-primary-dark: #0A1D37;      
  --color-primary: #0F2E59;           
  --color-primary-light: #1A447E;     
  --color-secondary: #1E56A0;         
  --color-accent: #C98816;            
  --color-accent-hover: #B45309;
  --color-success: #15803D;
  --color-whatsapp: #25D366;          
  --color-whatsapp-dark: #1EBE5D;

  --bg-page: #FFFFFF;
  --bg-subtle: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-muted: #F1F5F9;
  --bg-dark: #08162A;
  --bg-card-dark: #0D223F;

  --border-light: #E2E8F0;
  --border-medium: #CBD5E1;
  --border-dark: #1E3A5F;

  --text-dark: #0F172A;
  --text-body: #334155;
  --text-muted: #64748B;
  --text-light: #F8FAFC;
  --text-white: #FFFFFF;

  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;

  --shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 4px 10px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-hover: 0 10px 22px rgba(15, 23, 42, 0.1);
  --shadow-dropdown: 0 14px 28px rgba(10, 29, 55, 0.15);

  --bg-info-soft: #EFF6FF;
  --text-subtle: #94A3B8;
  --border-on-dark: #C7D3E1;

  /* Verdes de marca de WhatsApp */
  --color-whatsapp-press: #20BA5A;
  --color-whatsapp-deep: #128C7E;
  --color-whatsapp-darkest: #075E54;

  --status-success-bg: #DCFCE7;
  --status-success-text: #166534;
  --status-success-border: #86EFAC;
  --status-error-bg: #FEE2E2;
  --status-error-text: #991B1B;
  --status-error-border: #FCA5A5;
  --status-info-bg: #E0F2FE;
  --status-info-text: #075985;
  --status-info-border: #7DD3FC;

  /* Apilamiento de la página; el visor usa valores locales aparte */
  --z-floating: 999;
  --z-header: 1000;
  --z-progress: 1001;
  --z-modal: 3000;
  --z-skip-link: 4000;

  --container-max: 1240px;
  --container-wide: 1380px;
  /* Enumeradas, no "all": lo que anime otra cosa lo declara en su regla */
  --transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out,
                border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
                transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* ===== REINICIO Y BASE ===== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  max-width: 100%;
  /* clip, no hidden: hidden crea contenedor de scroll y rompe position:sticky */
  overflow-x: clip;
  overscroll-behavior-x: none;
  touch-action: pan-y pinch-zoom;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: var(--z-skip-link);
  padding: 10px 14px;
  background-color: var(--color-primary-dark);
  color: var(--text-white);
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* La cabecera fija taparía el título del ancla */
section[id] {
  scroll-margin-top: 96px;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-page);
  color: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  word-break: break-word;
}

img, picture, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* El <picture> debe ocupar el alto, o el height:100% de la imagen se ignora */
.fleet-card-img-wrap picture,
.ops-gallery-item picture,
.about-media picture {
  display: block;
  width: 100%;
  height: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

address {
  font-style: normal;
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

header,
main,
footer,
section,
.top-bar,
.hero-section,
.about-section,
.services-section,
.fleet-section,
.ops-coverage-section,
.commitments-section,
.faq-section,
.quote-section,
.location-section {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  box-sizing: border-box;
}

/* ===== CONTENEDORES ===== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* ===== BARRA SUPERIOR ===== */

.top-bar {
  background-color: var(--color-primary-dark);
  color: var(--border-medium);
  font-size: 0.78125rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 0;
}

.top-bar .container-wide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.top-bar-info, .top-bar-contact {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.top-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.top-bar-item svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
}

.top-bar-item a:hover {
  color: var(--text-white);
  text-decoration: underline;
}

/* ===== CABECERA Y NAVEGACIÓN ===== */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-light);
  transition: var(--transition);
}

.header.scrolled {
  box-shadow: 0 4px 14px rgba(10, 29, 55, 0.08);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 105px;
  position: relative;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 15px;
  /* Sin esto flex comprime la marca y el título desborda sobre el menú */
  flex-shrink: 0;
}

.brand-logo img {
  height: 78px;
  width: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.brand-logo:hover img {
  transform: scale(1.02);
}

.brand-meta {
  display: flex;
  flex-direction: column;
}

.brand-meta .brand-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.58rem;
  color: var(--color-primary-dark);
  letter-spacing: 0.5px;
  line-height: 1.1;
  white-space: nowrap;
}

.brand-meta .brand-ruc {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.nav-menu {
  display: flex;
  align-items: center;
}

.nav-links-list {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-link {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 0;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  /* Única transición de width del sitio */
  transition: width 0.2s ease-in-out;
}

.nav-link:hover, .nav-link.active {
  color: var(--color-primary);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.navbar {
  transition: height 0.3s var(--ease-out);
}

.brand-logo img {
  transition: height 0.3s var(--ease-out), transform 0.2s ease;
}

.header.scrolled .navbar {
  height: 82px;
}

.header.scrolled .brand-logo img {
  height: 60px;
}

.header.scrolled .brand-meta .brand-title {
  font-size: 1.35rem;
}

.header.scrolled .brand-meta .brand-ruc {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.brand-meta .brand-ruc {
  transition: opacity 0.25s ease, max-height 0.3s var(--ease-out);
  max-height: 24px;
}

.brand-meta .brand-title {
  transition: font-size 0.3s var(--ease-out);
}

/* Entrada suave la primera vez que la cabecera se despega */
@keyframes headerIn {
  from { box-shadow: 0 0 0 rgba(10, 29, 55, 0); }
  to   { box-shadow: 0 4px 14px rgba(10, 29, 55, 0.08); }
}

.anim .header.scrolled {
  animation: headerIn 0.32s var(--ease-out);
}

.mobile-nav-actions {
  display: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 8px;
  background-color: var(--bg-subtle);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: var(--transition);
}

.mobile-toggle:hover {
  background-color: var(--border-light);
}

.mobile-toggle span {
  display: block;
  height: 2.5px;
  width: 22px;
  background-color: var(--color-primary-dark);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.25s ease;
  transform-origin: center;
}

.mobile-toggle.is-active span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.mobile-toggle.is-active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.mobile-toggle.is-active span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ===== BOTONES ===== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--text-white);
  border: 1px solid var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn-outline {
  background-color: var(--bg-surface);
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--bg-muted);
}

.btn-whatsapp {
  background-color: var(--bg-surface);
  color: var(--color-whatsapp-deep);
  border: 1.5px solid var(--color-whatsapp);
}

.btn-whatsapp:hover {
  background-color: #F0FDF4;
  color: var(--color-whatsapp-darkest);
}

.btn-whatsapp svg {
  fill: var(--color-whatsapp);
}

.btn-whatsapp-solid {
  background-color: var(--color-whatsapp);
  color: var(--text-white);
  border: 1px solid var(--color-whatsapp-dark);
}

.btn-whatsapp-solid:hover {
  background-color: var(--color-whatsapp-dark);
}

.btn-whatsapp-solid svg {
  fill: var(--bg-surface);
}

.btn-lg {
  padding: 12px 26px;
  font-size: 0.9375rem;
}

.btn-block {
  width: 100%;
}

/* ===== PORTADA ===== */

.hero-section {
  background-color: var(--bg-surface);
  padding: 44px 0 0 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-light);
}

/* La portada se lleva la columna ancha: al ir recortada y sin marco, con
   menos sitio se veia pequena al lado del bloque de texto. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 40px;
}

.hero-content {
  padding-right: 15px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-secondary);
  background-color: #EBF3FA;
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  margin-bottom: 18px;
  border-left: 3px solid var(--color-secondary);
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
  box-sizing: border-box;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 3.5vw + 0.8rem, 3.25rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.hero-lead {
  font-size: clamp(0.9375rem, 1vw + 0.5rem, 1.125rem);
  line-height: 1.65;
  color: var(--text-body);
  margin-bottom: 28px;
  max-width: 580px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.hero-lead strong {
  color: var(--color-primary-dark);
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 100%;
}

/* ===== BARRA DE CONFIANZA ===== */

.trust-bar {
  background-color: var(--color-primary);
  color: var(--text-white);
  padding: 20px 0;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 10px;
}

.trust-item:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.trust-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-icon svg {
  width: 22px;
  height: 22px;
  fill: var(--bg-surface);
}

.trust-text {
  min-width: 0;
}

.trust-text .trust-title {
  /* .trust-text p tambien la alcanza y le pondria el gris del subtitulo */
  color: var(--text-white);
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 2px;
  letter-spacing: 0.2px;
  line-height: 1.25;
  white-space: normal;
}

.trust-text p {
  font-size: 0.75rem;
  color: var(--border-medium);
  line-height: 1.3;
}

/* ===== NOSOTROS, MISIÓN Y VISIÓN ===== */

.about-section {
  padding: 64px 0;
  background-color: var(--bg-subtle);
  border-bottom: 1px solid var(--border-light);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  /* Sin misión y visión la columna es corta: centrar evita el hueco al pie */
  align-items: center;
  margin-bottom: 32px;
}

.section-tag {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  display: block;
}

.section-tag.center {
  text-align: center;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.5vw + 0.8rem, 2.125rem);
  font-weight: 800;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin-bottom: 16px;
}

.section-title.center {
  text-align: center;
}

.section-subtitle {
  font-size: 0.96875rem;
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: 20px;
}

.section-subtitle.center {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Misión y Visión: panel pareado a ancho completo.
   Reutiliza el azul oscuro de la barra de confianza y el footer. */

/* Responde el icono, no la tarjeta: no son enlaces, no deben prometer un clic */

/* Misión y Visión: entrada orquestada */

@keyframes mvRule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes mvIcon {
  from { opacity: 0; transform: scale(0.3) rotate(-35deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes mvPulse {
  from { opacity: 0.75; transform: scale(1); }
  to   { opacity: 0;    transform: scale(2.1); }
}

@keyframes mvRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes mvSheen {
  from { transform: translateX(-105%); }
  to   { transform: translateX(105%); }
}

.about-media {
  display: flex;
}

.about-media picture {
  width: 100%;
  height: 100%;
  display: flex;
}

.about-media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
}

/* ===== SERVICIOS ===== */

.services-section {
  padding: 64px 0;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-light);
}

.services-tag-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 40px;
}

.service-tag-item {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: var(--transition);
}

.service-tag-item:hover {
  background-color: var(--bg-surface);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.service-tag-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-tag-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--color-primary);
}

.service-tag-info h3 {
  font-size: 0.84375rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.25;
}

.service-tag-info span {
  font-size: 0.71875rem;
  color: var(--text-muted);
}

.featured-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.service-feature-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.service-feature-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--color-secondary);
  transform: translateY(-3px);
}

.service-feature-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background-color: var(--bg-muted);
}

.service-feature-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.service-feature-body h3 {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}

.service-feature-body p {
  font-size: 0.84375rem;
  color: var(--text-body);
  line-height: 1.55;
  margin-bottom: 18px;
  flex-grow: 1;
}

.service-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.service-feature-link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.service-feature-card:hover .service-feature-link svg {
  transform: translateX(4px);
}

/* ===== FLOTA Y FILTRO ===== */

.fleet-section {
  padding: 64px 0;
  background-color: var(--bg-subtle);
  border-bottom: 1px solid var(--border-light);
}

.fleet-filter-bar {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.fleet-filter-btn {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-muted);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--transition);
}

.fleet-filter-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.fleet-filter-btn.active {
  background-color: var(--color-primary);
  color: var(--text-white);
  border-color: var(--color-primary);
}

.fleet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.fleet-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  /* El filtro necesita opacity aquí: se apoya en transitionend */
  transition:
    opacity 0.2s ease-in-out,
    transform 0.28s var(--ease-out),
    box-shadow 0.28s var(--ease-out),
    border-color 0.2s ease;
  cursor: pointer;
}

.fleet-card:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--border-medium);
}

/* Salida del filtro: el JS solo pone la clase, la duración vive aquí */
.fleet-card.is-filtered-out {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

.fleet-card-img-wrap {
  position: relative;
  height: 180px;
  background-color: var(--bg-muted);
  overflow: hidden;
}

.fleet-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.fleet-card:hover .fleet-card-img {
  transform: scale(1.03);
}

.fleet-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(10, 29, 55, 0.85);
  color: var(--text-white);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
}

.fleet-card-body {
  padding: 16px;
  text-align: center;
  background-color: var(--bg-surface);
}

.fleet-card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.fleet-card-type {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.fleet-card-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  border-top: 1px solid var(--border-light);
  padding-top: 10px;
  font-size: 0.71875rem;
  color: var(--text-body);
}

.fleet-card-specs strong {
  display: block;
  color: var(--color-primary-dark);
  font-size: 0.78125rem;
}

/* ===== OPERACIONES Y COBERTURA ===== */

.ops-coverage-section {
  padding: 64px 0;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-light);
}

.ops-block-title {
  font-family: var(--font-heading);
  font-size: 1.3125rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  margin-bottom: 16px;
  letter-spacing: -0.2px;
}

.ops-block-lead {
  font-size: 0.84375rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.ops-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.ops-gallery-item {
  position: relative;
  height: 120px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  border: 1px solid var(--border-light);
  cursor: pointer;
}

.ops-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.ops-gallery-item:hover img {
  transform: scale(1.08);
}

.ops-gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 29, 55, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition);
}

.ops-gallery-overlay svg {
  width: 24px;
  height: 24px;
  fill: var(--bg-surface);
}

.ops-gallery-item:hover .ops-gallery-overlay {
  opacity: 1;
}

.coverage-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.coverage-icon-badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background-color: var(--bg-info-soft);
  border: 1px solid #DBEAFE;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.coverage-icon-badge svg {
  width: 20px;
  height: 20px;
  fill: var(--color-primary);
}

.coverage-details h3 {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}

.coverage-details p {
  font-size: 0.8125rem;
  color: var(--text-body);
  line-height: 1.5;
  margin-bottom: 8px;
}

.routes-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.route-tag {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-body);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
}

/* ===== COMPROMISOS ===== */

.commitments-section {
  padding: 60px 0;
  background-color: var(--bg-subtle);
  border-bottom: 1px solid var(--border-light);
}

.commitments-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 32px;
}

.commitments-grid {
  counter-reset: compromiso;
}

.commitment-card {
  position: relative;
  counter-increment: compromiso;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 26px 22px 24px;
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
  transition: var(--transition);
}

/* Número de fondo: 01, 02… */
.commitment-card::after {
  content: counter(compromiso, decimal-leading-zero);
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.08;
  pointer-events: none;
}

.commitment-card:hover {
  border-color: var(--border-light);
  border-top-color: var(--color-accent);
  box-shadow: var(--shadow-card);
}

.commitment-icon {
  width: 48px;
  height: 48px;
  background-color: var(--color-primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.commitment-icon svg {
  width: 24px;
  height: 24px;
  fill: var(--text-white);
}

.commitment-card:hover .commitment-icon {
  background-color: var(--color-accent);
}

.commitment-card h3 {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-bottom: 8px;
}

.commitment-card p {
  font-size: 0.875rem;
  color: var(--text-body);
  line-height: 1.55;
}

/* ===== PREGUNTAS FRECUENTES ===== */

.faq-section {
  padding: 64px 0;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-light);
}

.faq-list {
  max-width: 860px;
  margin: 32px auto 0;
  display: grid;
  gap: 10px;
}

.faq-item {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--border-medium);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
  border-left-color: var(--color-primary);
}

.faq-item[open] {
  background-color: var(--bg-surface);
  border-left-color: var(--color-accent);
  box-shadow: var(--shadow-card);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.faq-question {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* Signo + que gira a × al abrir */
.faq-toggle {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--bg-info-soft);
  transition: transform 0.25s ease, background-color 0.2s ease;
}

.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  background-color: var(--color-primary);
}

.faq-toggle::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-toggle {
  transform: rotate(45deg);
  background-color: var(--color-accent);
}

.faq-item[open] .faq-toggle::before,
.faq-item[open] .faq-toggle::after {
  background-color: var(--text-white);
}

.faq-answer {
  padding: 0 20px 20px;
}

.faq-answer p {
  font-size: 0.9375rem;
  color: var(--text-body);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .faq-section {
    padding: 48px 0;
  }

  .faq-item summary {
    padding: 16px;
  }

  .faq-answer {
    padding: 0 16px 16px;
  }

  .faq-question {
    font-size: 0.9375rem;
  }
}

/* ===== COTIZACIÓN Y FORMULARIO ===== */

.quote-section {
  padding: 64px 0;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-light);
}

.quote-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 30px;
  align-items: stretch;
}

.quote-info-box {
  background-color: var(--color-primary-dark);
  color: var(--text-white);
  border-radius: var(--radius-sm);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.quote-info-box::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}

.quote-info-top h3 {
  font-family: var(--font-heading);
  font-size: 1.5625rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 12px;
}

.quote-info-top p {
  font-size: 0.875rem;
  color: var(--border-medium);
  line-height: 1.55;
  margin-bottom: 22px;
}

.quote-contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.quote-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--text-light);
}

.quote-contact-item svg {
  width: 18px;
  height: 18px;
  fill: var(--bg-surface);
  opacity: 0.85;
  flex-shrink: 0;
}

.quote-contact-item a:hover {
  text-decoration: underline;
}

.quote-badge-ruc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xs);
  padding: 14px 16px;
}

.quote-badge-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.quote-badge-name {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-white);
}

.quote-badge-ruc-code {
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-xs);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-subtle);
  white-space: nowrap;
}

.quote-badge-note {
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-subtle);
}

.quote-form-card {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 28px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.form-group.no-margin {
  margin-bottom: 0;
}

.form-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  font-size: 0.875rem;
  color: var(--text-dark);
  transition: var(--transition);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(15, 46, 89, 0.12);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-submit-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.form-status-msg {
  display: none;
  margin-top: 12px;
  padding: 10px;
  border-radius: var(--radius-xs);
  font-size: 0.8125rem;
  font-weight: 600;
}

.form-privacy-note {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 0.71875rem;
  line-height: 1.45;
}

.form-status-msg.success {
  display: block;
  background-color: var(--status-success-bg);
  color: var(--status-success-text);
  border: 1px solid var(--status-success-border);
}

.form-status-msg.error {
  display: block;
  background-color: var(--status-error-bg);
  color: var(--status-error-text);
  border: 1px solid var(--status-error-border);
}

.form-status-msg.info {
  display: block;
  background-color: var(--status-info-bg);
  color: var(--status-info-text);
  border: 1px solid var(--status-info-border);
}

.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ===== CONTACTOS ===== */

.contact-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-people li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 0.84375rem;
  line-height: 1.4;
}

.contact-person {
  font-weight: 700;
  color: var(--color-primary-dark);
  min-width: 118px;
}

.contact-people a {
  color: var(--color-secondary);
  font-weight: 600;
}

.contact-people a:hover {
  text-decoration: underline;
}

.contact-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-accent);
  background-color: #FEF3C7;
  border-radius: var(--radius-xs);
  padding: 1px 6px;
}

/* ===== SEDES Y MAPA ===== */

.location-section {
  padding: 64px 0;
  background-color: var(--bg-subtle);
  border-bottom: 1px solid var(--border-light);
}

.location-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px;
  /* stretch, no center: el mapa debe llegar al mismo alto que la columna
     de contacto. Con center se quedaba corto y dejaba un escalón. */
  align-items: stretch;
}

.location-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.location-info-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: var(--shadow-subtle);
}

.location-card-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background-color: var(--bg-info-soft);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-card-icon svg {
  width: 18px;
  height: 18px;
  fill: var(--color-primary);
}

.location-card-body h3 {
  font-size: 0.84375rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.location-card-body p, .location-card-body a {
  font-size: 0.8125rem;
  color: var(--text-body);
  line-height: 1.4;
}

/* Selector de sedes: botones reales, no divs con rol de botón */
.location-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.location-tab {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 140px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 11px 16px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.25s var(--ease-out),
              transform 0.2s var(--ease-out), background-color 0.2s ease;
}

.location-tab::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.34s var(--ease-out);
}

.location-tab.is-active::after {
  transform: scaleX(1);
}

.location-tab:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.location-tab:hover .location-tab-name {
  color: var(--color-primary);
}

.location-tab:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.location-tab.is-active {
  border-color: var(--color-primary);
  background-color: var(--bg-subtle);
  /* El acento va por dentro para no abrir el borde del recuadro */
  box-shadow: inset 3px 0 0 var(--color-accent), var(--shadow-card);
}

.location-tab-kind {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

.location-tab.is-active .location-tab-kind {
  color: var(--color-accent);
}

.location-tab-name {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.2;
}

/* Ficha de la sede elegida, encima del mapa */
.location-view {
  display: flex;
  flex-direction: column;
}

.location-view-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background-color: var(--bg-card-dark);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* Al cambiar de sede, la ficha entra en vez de saltar */
.anim .location-view-head.is-changing h3,
.anim .location-view-head.is-changing p {
  animation: locationSwap 0.42s var(--ease-out);
}

@keyframes locationSwap {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.location-view-head h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-white);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0 0 3px;
}

.location-view-head p {
  font-size: 0.8125rem;
  color: var(--border-on-dark);
  line-height: 1.45;
  margin: 0;
}

.btn-sm {
  padding: 8px 14px;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.location-view .location-map-container {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  border-top: 0;
  /* Anula el alto fijo de abajo: aquí manda el flex */
  height: auto;
  min-height: 220px;
  flex: 1;
}

@media (max-width: 640px) {
  .location-tab {
    flex: 1 1 100%;
  }
  .location-view-head {
    flex-direction: column;
  }
}

.location-map-container {
  position: relative;
  height: 330px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  background-color: var(--border-light);
}

.location-map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== PIE DE PÁGINA ===== */

.footer {
  background-color: var(--color-primary-dark);
  color: var(--text-subtle);
  padding: 56px 0 20px 0;
  font-size: 0.8125rem;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 28px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand {
  padding-right: 20px;
}

.footer-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-surface);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-logo-badge img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.footer-brand-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 14px;
  color: var(--border-medium);
  max-width: 320px;
}

.footer-badge-ruc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xs);
  padding: 6px 12px;
  font-size: 0.75rem;
}

.footer-badge-ruc .ruc-tag {
  color: var(--text-white);
  font-weight: 700;
}

.footer-badge-ruc .ruc-sep {
  color: rgba(255, 255, 255, 0.4);
}

.footer-badge-ruc .ruc-name {
  color: var(--text-subtle);
  font-weight: 500;
}

.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links a:hover {
  color: var(--text-white);
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.75rem;
}

/* ===== BOTONES FLOTANTES ===== */

.floating-actions {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-floating);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.float-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: var(--color-whatsapp);
  color: var(--text-white);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s ease, background-color 0.2s ease, box-shadow 0.25s ease;
}

.float-whatsapp:hover {
  background-color: var(--color-whatsapp-press);
  transform: scale(1.1);
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.5);
}

.float-whatsapp svg {
  width: 32px;
  height: 32px;
  fill: var(--bg-surface);
  display: block;
}

.back-to-top {
  width: 42px;
  height: 42px;
  background-color: var(--color-primary-dark);
  color: var(--text-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

.back-to-top:hover {
  background-color: var(--color-primary);
  transform: translateY(-2px);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
  fill: var(--bg-surface);
}

/* ===== VISOR DE IMÁGENES ===== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(6, 11, 20, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.lightbox-dialog {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  z-index: 2;
}

.lightbox-topbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: env(safe-area-inset-top);
  flex-shrink: 0;
  z-index: 10;
}

.lightbox-counter {
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-heading), monospace;
  color: var(--border-medium);
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.85);
  padding: 6px 14px;
  border-radius: 0px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 3px solid var(--color-secondary);
}

.lightbox-btn-close {
  width: 38px;
  height: 38px;
  border-radius: 0px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  margin-left: auto;
}

.lightbox-btn-close:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-white);
}

.lightbox-btn-close:active {
  transform: scale(0.96);
}

.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 0px;
  background: rgba(10, 18, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

.lightbox-nav-btn.prev {
  left: 20px;
}

.lightbox-nav-btn.next {
  right: 20px;
}

.lightbox-nav-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.lightbox-nav-btn:active {
  transform: translateY(-50%) scale(0.96);
}

.lightbox-media-container {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 0;
  padding: 10px 0;
  overflow: hidden;
}

.lightbox-media-container img {
  max-width: 95vw;
  max-height: calc(100vh - 90px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.9);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox-media-container img.is-zoomed {
  cursor: zoom-out;
  transform: scale(1.6);
}

/* La barra necesita 1221px para caber justa
   (336px marca + 627px menú + 218px botón + 40px padding).
   Colapsamos a 1280px para dejar holgura visual entre los bloques. */
@media (max-width: 1280px) {
  .mobile-toggle {
    display: flex;
  }
  .nav-actions .btn {
    display: none;
  }

  .nav-menu {
    position: absolute;
    /* Sigue al alto real de la barra, que cambia al compactarse */
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-light);
    border-bottom: 3px solid var(--color-primary);
    box-shadow: var(--shadow-dropdown);
    display: flex;
    flex-direction: column;
    padding: 0;
    /* El alto lo mide el JS con el hueco que queda en pantalla. Con un valor
       fijo el menú salía cortado en los navegadores que meten su propia barra
       inferior, como el de WhatsApp. */
    max-height: var(--menu-max, 70vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* translate3d y will-change fuerzan una capa propia. iOS rasteriza la
       cabecera sticky como una sola capa y no siempre la repinta cuando el
       panel crece dentro: el menú salía recortado a unos pocos píxeles. */
    transform: translate3d(0, -10px, 0);
    will-change: transform, opacity;
    /* Solo opacity y transform: animar max-height dentro de una cabecera
       sticky deja el panel sin repintar en el Safari de iOS. */
    transition: opacity 0.22s var(--ease-out),
                transform 0.26s var(--ease-out),
                visibility 0.26s;
    z-index: var(--z-header);
  }

  .nav-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }

  .nav-links-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 0 0;
    width: 100%;
  }

  .nav-links-list li {
    width: 100%;
  }

  .nav-link {
    display: block;
    padding: 13px 24px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-dark);
    border-bottom: 1px solid var(--bg-muted);
    letter-spacing: 0.5px;
  }

  .nav-link:hover, .nav-link.active {
    background-color: var(--bg-subtle);
    color: var(--color-primary);
  }

  .nav-link::after {
    display: none;
  }

  .mobile-nav-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px 20px 20px;
    background-color: var(--bg-subtle);
    width: 100%;
  }

  .mobile-contact-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
  }

  .mobile-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78125rem;
    color: var(--text-muted);
    font-weight: 600;
  }

  .mobile-contact-item svg {
    width: 13px;
    height: 13px;
    fill: var(--color-primary);
    flex-shrink: 0;
  }
}

@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .hero-content {
    padding-right: 0;
  }
  
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .trust-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
  }
  .trust-item:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }
  .services-tag-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .featured-services-grid {
    grid-template-columns: 1fr;
  }
  .fleet-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .quote-grid {
    grid-template-columns: 1fr;
  }
  .location-grid {
    grid-template-columns: 1fr;
  }
  .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .header.scrolled .navbar {
    height: 76px;
  }
  .header.scrolled .brand-logo img {
    height: 54px;
  }
  section[id] {
    scroll-margin-top: 86px;
  }
  .top-bar {
    display: block;
    padding: 7px 0;
    font-size: 0.75rem;
  }
  .top-bar-contact {
    display: none;
  }
  .top-bar-info {
    justify-content: center;
    width: 100%;
    gap: 6px;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .top-bar-item {
    justify-content: center;
    text-align: center;
    max-width: 100%;
    word-break: break-word;
  }
  .navbar {
    height: 94px;
    max-width: 100%;
  }
  .brand-logo img {
    height: 68px;
  }
  .brand-meta .brand-title {
    font-size: 1.42rem;
  }
  .brand-meta .brand-ruc {
    font-size: 0.8125rem;
  }

  
}

@media (max-width: 640px) {
  p {
    hyphens: auto;
  }

  
  /* Misión y Visión se mantienen alineadas a la izquierda:
     en columna estrecha el justificado abre huecos entre palabras. */

  
  
  

  .hero-title {
    font-size: 2.15rem;
  }
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }
  .hero-cta-group .btn {
    width: 100%;
  }
  .about-grid {
    grid-template-columns: 1fr;
  }
  
  .fleet-grid {
    grid-template-columns: 1fr;
  }
  .ops-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .commitments-grid {
    grid-template-columns: 1fr;
  }
  .form-grid-2, .form-submit-row {
    grid-template-columns: 1fr;
  }
  .footer-top-grid {
    grid-template-columns: 1fr;
  }
  .lightbox-dialog {
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }
  .lightbox-topbar {
    padding-top: env(safe-area-inset-top);
    margin-bottom: 2px;
  }
  .lightbox-btn-close {
    width: 36px;
    height: 36px;
    border-radius: 0px;
  }
  .lightbox-counter {
    font-size: 0.6875rem;
    padding: 4px 10px;
    border-radius: 0px;
  }
  .lightbox-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 0px;
    background: rgba(10, 18, 32, 0.85);
  }
  .lightbox-nav-btn.prev {
    left: 4px;
  }
  .lightbox-nav-btn.next {
    right: 4px;
  }
  .lightbox-media-container {
    padding: 4px 0;
  }
  .lightbox-media-container img {
    border-radius: 0px;
    max-height: calc(100vh - 80px);
    max-width: 96vw;
  }
  .lightbox-media-container img.is-zoomed {
    transform: scale(1.75);
  }
}

@media (max-width: 480px) {
  .container,
  .container-wide {
    padding-left: 16px;
    padding-right: 16px;
  }
  .top-bar {
    display: block;
    padding: 6px 0;
    font-size: 0.71875rem;
  }
  .top-bar-item {
    gap: 5px;
    font-size: 0.71875rem;
  }
  .navbar {
    height: 86px;
    max-width: 100%;
  }
  .brand-logo {
    gap: 10px;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
  }
  .brand-logo img {
    height: 56px;
    flex-shrink: 0;
  }
  .brand-meta {
    min-width: 0;
    overflow: hidden;
  }
  .brand-meta .brand-title {
    font-size: clamp(0.95rem, 4.2vw, 1.22rem);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .brand-meta .brand-ruc {
    font-size: 0.74rem;
  }
  .hero-badge {
    font-size: 0.72rem;
    letter-spacing: 0.3px;
    padding: 5px 10px;
  }
  .hero-title {
    font-size: clamp(1.65rem, 6vw, 2.15rem);
    letter-spacing: -0.3px;
  }
  .btn {
    white-space: normal;
    text-align: center;
    padding: 11px 16px;
    font-size: 0.84375rem;
  }
  .trust-grid {
    grid-template-columns: 1fr;
  }
  .services-tag-grid {
    grid-template-columns: 1fr;
  }
  .location-map-container {
    height: 270px;
  }
  .floating-actions {
    bottom: 16px;
    right: 16px;
  }
}

.lightbox-caption {
  text-align: center;
  padding: 12px 16px 4px;
  max-width: 720px;
  margin: 0 auto;
}

.lightbox-caption h4 {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-white);
  letter-spacing: 0.3px;
  margin: 0;
  line-height: 1.3;
}

.lightbox-caption p {
  font-size: 0.8125rem;
  color: var(--border-medium);
  line-height: 1.5;
  margin: 5px 0 0;
  text-align: center;
}

.fleet-card:focus-visible,
.ops-gallery-item:focus-visible,
.fleet-filter-btn:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.section-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border-light);
  text-align: center;
}

.section-cta p {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin: 0;
  max-width: 46ch;
}

.section-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 480px) {
  .section-cta-buttons {
    width: 100%;
    flex-direction: column;
  }
  .section-cta-buttons .btn {
    width: 100%;
  }
}

/* Animaciones de entrada */

:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-in: 0.62s;
}

/* Aparición al hacer scroll */
/* Sin will-change: decenas de capas gastan memoria sin mejorar nada */

/* ===== ANIMACIONES DE ENTRADA ===== */

.anim [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
}

.anim [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-in) var(--ease-out),
    transform var(--dur-in) var(--ease-out);
  transition-delay: calc(var(--order, 0) * 80ms);
}

.anim [data-reveal="left"] { transform: translateX(-26px); }
.anim [data-reveal="right"]   { transform: translateX(26px); }
.anim [data-reveal="scale"]    { transform: scale(0.965); }

@media (max-width: 900px) {
  .anim [data-reveal="left"],
  .anim [data-reveal="right"] {
    transform: translateY(20px);
  }
}

/* Entrada del hero al cargar la página */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeZoom {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}

.anim .hero-badge,
.anim .hero-title,
.anim .hero-lead,
.anim .hero-cta-group {
  opacity: 0;
  animation: fadeUp 0.7s var(--ease-out) forwards;
}

.anim .hero-badge     { animation-delay: 0.10s; }
.anim .hero-title     { animation-delay: 0.20s; }
.anim .hero-lead      { animation-delay: 0.32s; }
.anim .hero-cta-group { animation-delay: 0.44s; }

/* Micro-interacciones */
.service-feature-card,
.commitment-card {
  transition:
    transform 0.28s var(--ease-out),
    box-shadow 0.28s var(--ease-out),
    border-color 0.2s ease;
}

.service-feature-card:hover,
.commitment-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.service-feature-card picture {
  overflow: hidden;
  display: block;
}

.service-feature-card:hover .service-feature-img {
  transform: scale(1.05);
}

.service-feature-img {
  transition: transform 0.45s var(--ease-out);
}

.fleet-card:hover {
  transform: translateY(-4px);
}

.service-feature-link svg {
  transition: transform 0.25s var(--ease-out);
}

.service-feature-link:hover svg {
  transform: translateX(4px);
}

.route-tag {
  transition: transform 0.2s var(--ease-out), background-color 0.2s ease, color 0.2s ease;
}

.route-tag:hover {
  transform: translateY(-2px);
}

.btn {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.18s var(--ease-out),
    box-shadow 0.22s var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
  transition-duration: 0.06s;
}

.float-whatsapp {
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.float-whatsapp:hover {
  transform: scale(1.08);
}

/* Visor de imágenes: entrada con escala */
.lightbox-dialog {
  transition: transform 0.32s var(--ease-out), opacity 0.26s ease;
}

.anim .modal-overlay:not(.active) .lightbox-dialog {
  transform: scale(0.97) translateY(8px);
  opacity: 0;
}

.anim .modal-overlay.active .lightbox-dialog {
  transform: none;
  opacity: 1;
}

/* Menú móvil: los enlaces entran escalonados */
.anim .nav-menu.open .nav-links-list li {
  animation: fadeUp 0.34s var(--ease-out) backwards;
}

.anim .nav-menu.open .nav-links-list li:nth-child(1) { animation-delay: 0.04s; }
.anim .nav-menu.open .nav-links-list li:nth-child(2) { animation-delay: 0.08s; }
.anim .nav-menu.open .nav-links-list li:nth-child(3) { animation-delay: 0.12s; }
.anim .nav-menu.open .nav-links-list li:nth-child(4) { animation-delay: 0.16s; }
.anim .nav-menu.open .nav-links-list li:nth-child(5) { animation-delay: 0.20s; }
.anim .nav-menu.open .nav-links-list li:nth-child(6) { animation-delay: 0.24s; }

/* Seguro final: si se pide reducir movimiento, todo queda quieto */
@media (prefers-reduced-motion: reduce) {
  .anim [data-reveal],
.anim .hero-badge,
.anim .hero-title,
.anim .hero-lead,
.anim .hero-cta-group {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

.contact-mails {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contact-mails a {
  font-size: 0.84375rem;
  color: var(--color-secondary);
  font-weight: 600;
  word-break: break-word;
}

.contact-mails a:hover {
  text-decoration: underline;
}

/* Con las sedes fuera, la columna de contacto es más corta:
   el mapa se adapta a esa altura en vez de imponer 330 px fijos. */
.location-map-container {
  height: 100%;
  min-height: 300px;
}

/* Movimiento del resto de la página. Imita peso: las cosas se asientan, no rebotan */

.anim [data-reveal] .fleet-card-img,
.anim [data-reveal] .service-feature-img,
.anim [data-reveal] .ops-gallery-item img,
.anim [data-reveal].ops-gallery-item img {
  transform: scale(1.06);
  transition: transform 0.9s var(--ease-out);
}

.anim [data-reveal].is-visible .fleet-card-img,
.anim [data-reveal].is-visible .service-feature-img,
.anim [data-reveal].is-visible img {
  transform: scale(1);
}

/* El hover de la flota y servicios sigue mandando por encima */
.fleet-card:hover .fleet-card-img,
.service-feature-card:hover .service-feature-img {
  transform: scale(1.05);
}

.anim .fleet-card.is-visible .fleet-card-specs > div {
  animation: specRise 0.5s var(--ease-out) backwards;
}

.anim .fleet-card.is-visible .fleet-card-specs > div:nth-child(1) { animation-delay: 0.30s; }
.anim .fleet-card.is-visible .fleet-card-specs > div:nth-child(2) { animation-delay: 0.38s; }
.anim .fleet-card.is-visible .fleet-card-specs > div:nth-child(3) { animation-delay: 0.46s; }

@keyframes specRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.anim .coverage-block.is-visible .route-tag {
  animation: routeIn 0.42s var(--ease-out) backwards;
  animation-delay: calc(0.35s + var(--order, 0) * 55ms);
}

@keyframes routeIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

.anim .trust-item[data-reveal] {
  transform: translateX(-22px);
}

.anim .trust-item[data-reveal].is-visible {
  transform: none;
}

.commitment-icon,
.location-card-icon,
.service-tag-icon,
.coverage-icon-badge {
  transition: transform 0.3s var(--ease-out), background-color 0.25s ease;
}

.commitment-card:hover .commitment-icon,
.location-info-card:hover .location-card-icon,
.service-tag-item:hover .service-tag-icon,
.coverage-item:hover .coverage-icon-badge {
  transform: scale(1.1) translateY(-1px);
}

.fleet-filter-btn {
  position: relative;
}

.fleet-filter-btn::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background-color: var(--color-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.32s var(--ease-out);
}

.fleet-filter-btn.active::after {
  transform: scaleX(1);
}

.form-input,
.form-select,
.form-textarea {
  transition: border-color 0.2s ease, box-shadow 0.25s var(--ease-out),
              transform 0.2s var(--ease-out);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 46, 89, 0.1);
}

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: var(--z-progress);
  background: transparent;
  pointer-events: none;
}

.reading-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  transform-origin: left center;
  transition: width 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .anim [data-reveal] .fleet-card-img,
  .anim [data-reveal] .service-feature-img,
  .anim .trust-item[data-reveal] {
    transform: none !important;
  }
  .anim .fleet-card.is-visible .fleet-card-specs > div,
  .anim .coverage-block.is-visible .route-tag {
    animation: none !important;
  }
  .reading-progress {
    display: none;
  }
}

/* La barra superior se va con el scroll; la cabecera se queda */
@media (prefers-reduced-motion: reduce) {
  .navbar,
  .brand-logo img,
  .brand-meta .brand-title,
  .brand-meta .brand-ruc {
    transition: none !important;
  }
  .anim .header.scrolled {
    animation: none !important;
  }
}

/* Segundo correo, en la misma línea de contacto pero sin repetir la etiqueta */
.quote-contact-alt {
  display: block;
  margin-top: 3px;
  font-size: 0.8125rem;
  color: var(--text-subtle);
}

.quote-contact-alt a {
  color: var(--border-medium);
}

.quote-contact-alt a:hover {
  color: var(--text-white);
}

/* ===== PORTADA A PANTALLA COMPLETA =====
   Estructura de la portada: foto de fondo, texto y botones encima y barra
   de confianza debajo. Va después de las reglas base para sobrescribirlas. */

.hero-section {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-bottom: 0;
  background-color: var(--bg-dark);
}

.hero-stage {
  position: relative;
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding: 72px 0 88px;
  overflow: hidden;
}

.hero-bg,
.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Posición y degradado de la foto: ver el bloque "PORTADA · FOTO" al final */
.hero-bg {
  left: auto;
  width: 60%;
}

.hero-bg img {
  object-fit: cover;
  /* que el recorte nunca corte la cabina */
  object-position: left center;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 22, 42, 1) 0%, rgba(8, 22, 42, 0.97) 6%, rgba(8, 22, 42, 0.82) 15%, rgba(8, 22, 42, 0.5) 27%, rgba(8, 22, 42, 0.2) 40%, rgba(8, 22, 42, 0.05) 52%, rgba(8, 22, 42, 0) 60%),
    radial-gradient(ellipse 45% 40% at 100% 0%, rgba(8, 22, 42, 0.35), rgba(8, 22, 42, 0) 100%),
    linear-gradient(0deg, rgba(8, 22, 42, 0.5) 0%, rgba(8, 22, 42, 0) 22%),
    linear-gradient(90deg, rgba(15, 46, 89, 0) 0%, rgba(15, 46, 89, 0.12) 30%);
}

.hero-content {
  max-width: 540px;
}

/* Tablet en horizontal y portátiles pequeños: foto algo más estrecha y
   texto más compacto para no pisar la cabina */
@media (min-width: 768px) and (max-width: 1365px) and (orientation: landscape) {
  .hero-bg {
    width: 56%;
  }

  .hero-content {
    max-width: 440px;
  }

  .hero-title {
    font-size: clamp(2.25rem, 3.4vw + 0.5rem, 3.25rem);
  }
}

.hero-stage > .container-wide {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-grid {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 0;
}

.hero-content {
  max-width: 640px;
  padding-right: 0;
}

.hero-badge {
  color: #F0B44A;
  background-color: rgba(8, 22, 42, 0.55);
  border-left-color: var(--color-accent);
}

.hero-title {
  color: var(--text-white);
  font-size: clamp(2.25rem, 3.8vw + 0.7rem, 4.5rem);
  line-height: 1;
  letter-spacing: -1px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.hero-title-accent {
  color: #F0B44A;
}

.hero-lead {
  color: #DCE4EE;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.hero-lead strong {
  color: var(--text-white);
}

/* Sobre la foto el botón principal pasa a ámbar y el de WhatsApp a contorno blanco */
.hero-section .btn-primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary-dark);
}

.hero-section .btn-primary:hover {
  background-color: #E09A1F;
  border-color: #E09A1F;
}

.hero-section .btn-whatsapp {
  background-color: rgba(8, 22, 42, 0.35);
  color: var(--text-white);
  border-color: rgba(255, 255, 255, 0.6);
}

.hero-section .btn-whatsapp:hover {
  background-color: rgba(8, 22, 42, 0.6);
  color: var(--text-white);
  border-color: var(--text-white);
}

.hero-section .btn-whatsapp svg {
  fill: var(--color-whatsapp);
}

/* Franja azul, blanco y rojo del logo entre la foto y la barra de confianza */
.trust-bar {
  background-color: var(--bg-dark);
  padding: 24px 0 26px;
  border-top: 0;
  background-image: linear-gradient(180deg,
    var(--color-secondary) 0, var(--color-secondary) 4px,
    var(--text-white) 4px, var(--text-white) 6px,
    #C8102E 6px, #C8102E 10px,
    transparent 10px);
  background-repeat: no-repeat;
  padding-top: 34px;
}

.trust-icon {
  background-color: rgba(201, 136, 22, 0.14);
}

.trust-icon svg {
  fill: var(--color-accent);
}

@media (min-width: 1025px) {
  /* Pantalla completa: el alto de la ventana menos la barra superior y la cabecera */
  .hero-section {
    min-height: calc(100svh - 138px);
  }
}

/* Teléfono y tablet en vertical: la foto a pantalla completa, recortada
   sobre la cabina. El texto va arriba y los botones abajo, cada uno sobre
   un degradado oscuro. */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  .hero-stage {
    min-height: max(600px, calc(100svh - 140px));
    align-items: stretch;
    padding: 28px 0 24px;
  }

  .hero-stage > .container-wide,
  .hero-grid,
  .hero-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .hero-content {
    max-width: none;
  }

  .hero-badge {
    align-self: flex-start;
    margin-bottom: 14px;
  }

  .hero-lead {
    margin-bottom: 0;
  }

  .hero-cta-group {
    margin-top: auto;
    padding-top: 24px;
  }

  /* La foto ocupa la mitad de abajo, con el camión entero; el texto va
     arriba sobre el azul liso */
  .hero-bg {
    top: auto;
    left: 0;
    width: 100%;
    height: 56%;
  }

  .hero-bg img {
    object-position: 30% center;
  }

  .hero-bg::after {
    background: linear-gradient(180deg,
      rgba(8, 22, 42, 1) 0%,
      rgba(8, 22, 42, 0) 22%,
      rgba(8, 22, 42, 0) 62%,
      rgba(8, 22, 42, 0.85) 100%);
  }
}

/* En teléfono, arriba del todo, el WhatsApp flotante taparía el de la
   portada: aparece al bajar, igual que el botón de volver arriba. */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  .float-whatsapp {
    transition: opacity 0.25s ease, transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  }

  .float-whatsapp.at-top {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
  }
}

/* Barra de confianza compacta: sin cajas, en dos columnas */
@media (max-width: 1024px) {
  .trust-bar {
    padding: 30px 0 22px;
  }

  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
  }

  .trust-item,
  .trust-item:not(:last-child) {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    align-items: flex-start;
    gap: 10px;
  }

  .trust-icon {
    width: 34px;
    height: 34px;
  }

  .trust-icon svg {
    width: 18px;
    height: 18px;
  }

  .trust-text .trust-title {
    font-size: 0.8125rem;
  }

  .trust-text p {
    font-size: 0.71875rem;
  }
}

/* ===== SERVICIOS DESTACADOS: FOTO A TODO EL ALTO ===== */

.service-feature-card {
  position: relative;
  min-height: 460px;
  justify-content: flex-end;
  border: 0;
  background-color: var(--color-primary-dark);
}

.service-feature-card picture {
  position: absolute;
  inset: 0;
}

.service-feature-card picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 29, 55, 0) 25%, rgba(10, 29, 55, 0.78) 58%, rgba(10, 29, 55, 0.97) 100%);
}

.service-feature-img {
  height: 100%;
}

.service-feature-body {
  position: relative;
  z-index: 1;
  flex-grow: 0;
  padding: 26px 24px 24px;
}

.service-feature-body h3::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 14px;
  background-color: var(--color-accent);
}

.service-feature-body h3 {
  color: var(--text-white);
  font-size: 1.25rem;
}

.service-feature-body p {
  color: #D7DEE8;
  flex-grow: 0;
}

.service-feature-link {
  color: #F0B44A;
}

.service-feature-card:hover {
  border-color: transparent;
}

@media (max-width: 640px) {
  .service-feature-card {
    min-height: 400px;
  }
}

/* ===== DETALLES DE MARCA EN EL RESTO DE LA PÁGINA ===== */

/* Rótulos de sección en ámbar oscuro (el ámbar claro no llega a contraste sobre blanco) */
.section-tag {
  color: var(--color-accent-hover);
}

/* Las tres franjas del logo cierran también la página, encima del pie */
.footer {
  border-top: 0;
  background-image: linear-gradient(180deg,
    var(--color-secondary) 0, var(--color-secondary) 6px,
    var(--text-white) 6px, var(--text-white) 9px,
    #C8102E 9px, #C8102E 15px,
    transparent 15px);
  background-repeat: no-repeat;
}

/* ===== OPERACIONES: BLOQUE OSCURO =====
   Fondo azul oscuro liso. Arriba, cobertura a la izquierda y tablero de rutas a la derecha; debajo,
   la galería. */

.ops-coverage-section {
  position: relative;
  padding: 96px 0;
  border-bottom: 0;
  color: #C7D3E1;
  background-color: var(--color-primary-dark);
}

.ops-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin-bottom: 64px;
}

.ops-intro-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ops-coverage-section .section-tag {
  color: #F0B44A;
}

.ops-coverage-section .section-title {
  color: var(--text-white);
  font-size: clamp(1.9rem, 2.6vw + 1rem, 3rem);
  line-height: 1.05;
}

.ops-coverage-section .section-subtitle {
  color: #C7D3E1;
  font-size: 1.0625rem;
  margin-bottom: 28px;
}

.ops-coverage-section .coverage-item {
  margin-bottom: 28px;
}

.ops-coverage-section .coverage-icon-badge {
  background-color: rgba(201, 136, 22, 0.16);
  border-color: rgba(201, 136, 22, 0.35);
}

.ops-coverage-section .coverage-icon-badge svg {
  fill: var(--color-accent);
}

.ops-coverage-section .coverage-details h3 {
  color: var(--text-white);
  font-size: 1.0625rem;
}

.ops-coverage-section .coverage-details p {
  color: #C7D3E1;
  font-size: 0.9375rem;
  margin-bottom: 0;
}

.ops-coverage-section .btn-primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary-dark);
}

.ops-coverage-section .btn-primary:hover {
  background-color: #E09A1F;
  border-color: #E09A1F;
}

.ops-coverage-section .ops-block-title {
  color: var(--text-white);
  font-size: 1.375rem;
  margin-bottom: 8px;
}

.ops-coverage-section .ops-block-lead {
  color: #AFC0D6;
  font-size: 0.9375rem;
  margin-bottom: 20px;
}

/* Tablero de rutas: dos columnas de celdas con un punto ámbar */
.ops-coverage-section .routes-tag-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 0;
  background-color: var(--border-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ops-coverage-section .route-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background-color: rgba(8, 22, 42, 0.92);
  border: 0;
  border-radius: 0;
  color: var(--text-white);
  font-size: 0.9375rem;
  font-weight: 600;
}

.ops-coverage-section .route-tag::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.ops-coverage-section .route-tag:hover {
  transform: none;
  background-color: rgba(26, 68, 126, 0.55);
}

/* Galería sobre fondo oscuro, fotos más grandes */
.ops-coverage-section .ops-block {
  border-top: 1px solid var(--border-dark);
  padding-top: 48px;
}

.ops-coverage-section .ops-gallery-grid {
  gap: 12px;
}

.ops-coverage-section .ops-gallery-item {
  height: 190px;
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
}

@media (max-width: 900px) {
  .ops-coverage-section {
    padding: 64px 0;
  }

  .ops-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    margin-bottom: 48px;
  }

  .ops-coverage-section .ops-block {
    padding-top: 36px;
  }

  .ops-coverage-section .ops-gallery-item {
    height: 150px;
  }
}

@media (max-width: 480px) {
  .ops-coverage-section .route-tag {
    padding: 14px 14px;
    font-size: 0.875rem;
  }

  .ops-coverage-section .ops-gallery-item {
    height: 120px;
  }
}

/* ===== FLOTA: FICHAS =====
   Cabecera alineada a la izquierda, filtros tipo píldora y fichas con foto
   grande, tipo de unidad en ámbar, nombre grande y datos en fila. */

.fleet-section {
  padding: 96px 0;
  background-color: var(--bg-surface);
  border-bottom: 0;
}

.fleet-section .section-tag,
.fleet-section .section-title,
.fleet-section .section-subtitle {
  text-align: left;
  margin-left: 0;
}

.fleet-section .section-title {
  font-size: clamp(1.9rem, 2.6vw + 1rem, 3rem);
  line-height: 1.05;
  max-width: 760px;
}

.fleet-section .section-subtitle {
  max-width: 680px;
  font-size: 1.0625rem;
}

.fleet-filter-bar {
  justify-content: flex-start;
  margin: 8px 0 36px;
}

/* Filtros con la misma estética que los botones de la web: esquinas de
   4 px, mayúsculas; el activo como el botón principal (relleno azul) y el
   resto como el botón de contorno. */
.fleet-filter-btn {
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background-color: var(--bg-surface);
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
}

.fleet-filter-btn::after {
  display: none;
}

.fleet-filter-btn:hover {
  background-color: var(--bg-muted);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.fleet-filter-btn.active,
.fleet-filter-btn.active:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-white);
}

.fleet-grid {
  gap: 26px;
}

.fleet-card {
  border-radius: var(--radius-md);
  box-shadow: none;
  border-color: var(--border-light);
}

.fleet-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-hover);
}

.fleet-card-img-wrap {
  height: 230px;
}

.fleet-card-badge {
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  background-color: var(--color-accent);
  color: var(--color-primary-dark);
  font-size: 0.71875rem;
  letter-spacing: 0.5px;
}

.fleet-card-body {
  padding: 22px 24px 24px;
  text-align: left;
}

.fleet-card-title {
  font-size: 1.625rem;
  line-height: 1.1;
  margin-bottom: 4px;
}

.fleet-card-type {
  font-size: 0.875rem;
  margin-bottom: 18px;
}

.fleet-card-specs {
  gap: 12px;
  padding-top: 16px;
}

.fleet-card-specs span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.fleet-card-specs {
  /* Cada columna toma el ancho de su dato: "Contenedores" no se parte */
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
}

.fleet-card-specs strong {
  font-size: 0.9375rem;
  line-height: 1.3;
  word-break: normal;
  overflow-wrap: normal;
}

@media (max-width: 900px) {
  .fleet-section {
    padding: 64px 0;
  }

  .fleet-card-img-wrap {
    height: 200px;
  }
}

@media (max-width: 640px) {
  /* Los filtros en una fila que se desliza, sin partir en varias líneas */
  .fleet-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -20px;
    padding-right: 20px;
    scrollbar-width: none;
  }

  .fleet-filter-bar::-webkit-scrollbar {
    display: none;
  }

  .fleet-filter-btn {
    flex-shrink: 0;
  }
}

/* ===== SIMPLIFICACIÓN DE BLOQUES =====
   Nosotros sin la fila de tarjetas pequeñas: los botones van junto al texto
   y los 20 años de la gerencia en un recuadro ámbar sobre la foto.
   Servicios: los que no tienen tarjeta grande van debajo de ellas.
   Títulos de sección alineados a la izquierda en toda la página. */

.about-section {
  padding: 96px 0;
}

.about-section .section-title {
  font-size: clamp(1.9rem, 2.6vw + 1rem, 3rem);
  line-height: 1.05;
}

.about-grid {
  margin-bottom: 64px;
  gap: 56px;
}

.services-more-title {
  margin: 48px 0 16px;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  text-transform: uppercase;
}

.services-tag-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0;
}

/* Títulos a la izquierda: los bloques que iban centrados bajo el título
   también se alinean a la izquierda */
.section-subtitle {
  max-width: 720px;
}

.faq-list {
  margin-left: 0;
}

.services-section .section-title,
.commitments-section .section-title,
.faq-section .section-title,
.location-section .section-title {
  font-size: clamp(1.9rem, 2.6vw + 1rem, 3rem);
  line-height: 1.05;
}

@media (max-width: 1024px) {

  .services-tag-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .about-section {
    padding: 64px 0;
  }

  .services-tag-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== BARRA DE SCROLL (azul de marca) ===== */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) #EEF2F6;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #EEF2F6;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-primary);
  border-radius: 999px;
  border: 3px solid #EEF2F6;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-primary-light);
}

/* ===== NOSOTROS =====
   Foto de Group Mesa a la izquierda con el recuadro ámbar de los años de
   experiencia;
   a la derecha el texto, misión y visión en filas con icono y los botones. */

.about-section {
  background-color: var(--bg-surface);
}

.about-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  margin-bottom: 0;
}

.about-media {
  position: relative;
  padding: 0 0 36px 0;
}

.about-media img {
  min-height: 0;
  height: 520px;
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
}

.about-badge {
  position: absolute;
  right: -24px;
  bottom: 0;
  padding: 24px 30px;
  background-color: var(--color-accent);
  color: var(--color-primary-dark);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover);
}

.about-badge strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 6px;
}

.about-badge span {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
}

.about-content .section-subtitle {
  margin-bottom: 8px;
}

.about-mv {
  display: flex;
  flex-direction: column;
  margin-bottom: 26px;
}

.about-mv-row {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-light);
}

.about-mv-row:first-child {
  border-top: 1px solid var(--border-light);
}

.about-mv-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary);
  color: #F0B44A;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-mv-icon svg {
  width: 22px;
  height: 22px;
}

.about-mv-row h3 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}

.about-mv-row p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-body);
}

.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 1024px) {
  .about-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .about-media img {
    height: 420px;
  }

  .about-badge {
    right: 16px;
  }
}

@media (max-width: 640px) {
  .about-media img {
    height: 280px;
  }

  .about-badge {
    right: 12px;
    padding: 16px 20px;
  }

  .about-badge strong {
    font-size: 2rem;
  }
}

/* ===== BLOQUES DE COLOR =====
   Secciones alternas en gris azulado, azul oscuro y blanco para que la
   página no se sienta toda blanca. */

:root {
  --bg-band: #EEF2F7;
}

.services-section,
.commitments-section,
.location-section {
  background-color: var(--bg-band);
  border-bottom: 0;
}

.fleet-section,
.faq-section {
  background-color: var(--bg-surface);
  border-bottom: 0;
}

.services-section .service-tag-item,
.location-section .location-info-card {
  background-color: var(--bg-surface);
}

.faq-section .faq-item {
  background-color: var(--bg-band);
}

.faq-section .faq-item[open] {
  background-color: var(--bg-surface);
}

/* Cotización: bloque azul de marca; el formulario queda como tarjeta blanca */
.quote-section {
  padding: 96px 0;
  background-color: var(--color-primary);
  border-bottom: 0;
}

.quote-info-box {
  background-color: var(--color-primary-dark);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.quote-form-card {
  background-color: var(--bg-surface);
  border: 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* ===== VISOR DE FOTOS =====
   Fondo con la propia foto difuminada, foto con esquinas y sombra, pie
   pegado a la foto con botón para cotizar, flechas redondas y miniaturas. */

.lightbox-backdrop {
  background-color: #08162A;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

.lightbox-backdrop-photo {
  position: absolute;
  inset: -40px;
  background-size: cover;
  background-position: center;
  filter: blur(32px) saturate(0.7);
  opacity: 0.4;
  transition: background-image 0.3s ease;
}

.lightbox-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 22, 42, 0.72);
}

.lightbox-dialog {
  max-width: 1320px;
  justify-content: flex-start;
  gap: 16px;
  padding: 20px 24px calc(18px + env(safe-area-inset-bottom));
}

.lightbox-counter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-main);
}

.lightbox-group {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #F0B44A;
}

.lightbox-count {
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.875rem;
  font-weight: 600;
  color: #C7D3E1;
}

.lightbox-btn-close,
.lightbox-nav-btn {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--text-white);
}

.lightbox-btn-close {
  width: 46px;
  height: 46px;
}

.lightbox-btn-close:hover,
.lightbox-nav-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
}

.lightbox-stage {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.lightbox-nav-btn {
  position: static;
  transform: none;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}

.lightbox-nav-btn:active {
  transform: scale(0.96);
}

.lightbox-nav-btn.next {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary-dark);
}

.lightbox-nav-btn.next:hover {
  background: #E09A1F;
  border-color: #E09A1F;
}

.lightbox-frame {
  margin: 0;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-width: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-primary-dark);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.lightbox-media-container {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background-color: #050D18;
}

.lightbox-media-container img {
  display: block;
  max-width: min(1080px, 100vw - 220px);
  max-height: calc(100svh - 300px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.lightbox-caption {
  /* Que el texto no ensanche el marco más que la foto */
  contain: inline-size;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: none;
  margin: 0;
  padding: 16px 22px;
  text-align: left;
  border-top: 3px solid var(--color-accent);
  background-color: var(--color-primary-dark);
}

.lightbox-caption h4 {
  font-size: 1.25rem;
  font-weight: 800;
}

.lightbox-caption p {
  text-align: left;
  font-size: 0.875rem;
  color: #AFC0D6;
  margin-top: 4px;
}

.btn-accent {
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: var(--color-primary-dark);
}

.btn-accent:hover {
  background-color: #E09A1F;
  border-color: #E09A1F;
}

.lightbox-cta {
  flex-shrink: 0;
}

.lightbox-thumbs {
  display: flex;
  gap: 10px;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: none;
}

.lightbox-thumbs::-webkit-scrollbar {
  display: none;
}

.lightbox-thumb {
  flex-shrink: 0;
  width: 96px;
  height: 62px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: none;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lightbox-thumb:hover {
  opacity: 0.85;
}

.lightbox-thumb.is-active {
  opacity: 1;
  border-color: var(--color-accent);
}

@media (max-width: 768px) {
  .lightbox-dialog {
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    gap: 12px;
  }

  .lightbox-btn-close {
    width: 40px;
    height: 40px;
  }

  /* En el celular las flechas van sobre la foto */
  .lightbox-stage {
    position: relative;
    gap: 0;
  }

  .lightbox-nav-btn {
    position: absolute;
    top: 40%;
    z-index: 5;
    width: 42px;
    height: 42px;
    background: rgba(8, 22, 42, 0.7);
  }

  .lightbox-nav-btn.prev { left: 8px; }
  .lightbox-nav-btn.next { right: 8px; }

  .lightbox-media-container img {
    max-width: calc(100vw - 24px);
    max-height: calc(100svh - 330px);
  }

  .lightbox-caption {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
  }

  .lightbox-caption h4 {
    font-size: 1.0625rem;
  }

  .lightbox-cta {
    width: 100%;
  }

  .lightbox-thumb {
    width: 72px;
    height: 48px;
  }
}

/* Cierre de la flota: el mismo aire encima y debajo de "¿No ves la unidad
   que necesitas?" */
.fleet-section {
  padding-bottom: 48px;
}

.fleet-section .section-cta {
  margin-top: 48px;
  padding-top: 44px;
}

/* Seis sedes: en el celular, dos columnas en vez de una lista larga */
@media (max-width: 640px) {
  .location-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .location-tab {
    min-width: 0;
  }
}

/* Galería de operaciones: la primera foto, destacada a doble tamaño */
.ops-gallery-item.ops-gallery-featured {
  grid-column: span 2;
  grid-row: span 2;
}

.ops-coverage-section .ops-gallery-item.ops-gallery-featured {
  height: auto;
}

/* Foto de "Quiénes somos": la cabina está a la derecha de la imagen */
.about-media img {
  object-position: 78% center;
}

/* ===== PORTADA · FOTO =====
   La foto ocupa toda la portada con sus colores reales. Una sombra negra
   suave a la izquierda permite leer el texto. La barra de confianza es
   blanca, enmarcando la foto junto con la cabecera. */

.hero-section {
  background-color: #111418;
}

.hero-bg,
.hero-bg img {
  left: 0;
  width: 100%;
}

.hero-bg img {
  object-position: 30% 60%;
}

.hero-bg::after {
  left: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.5) 32%, rgba(0, 0, 0, 0.08) 58%, rgba(0, 0, 0, 0) 75%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 25%);
}

.hero-badge {
  background-color: rgba(0, 0, 0, 0.45);
}

.hero-section .btn-whatsapp {
  background-color: rgba(0, 0, 0, 0.3);
}

.hero-section .btn-whatsapp:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) and (max-width: 1365px) and (orientation: landscape) {
  .hero-bg {
    width: 100%;
  }
}

/* Celular y tablet en vertical: foto completa, sombra arriba (texto) y
   abajo (botones) */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  .hero-bg {
    top: 0;
    height: 100%;
  }

  .hero-bg img {
    object-position: 28% center;
  }

  .hero-bg::after {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.55) 35%,
      rgba(0, 0, 0, 0.05) 58%,
      rgba(0, 0, 0, 0.1) 72%,
      rgba(0, 0, 0, 0.7) 100%);
  }
}

/* Barra de confianza blanca: texto azul oscuro y una línea ámbar por punto */
.trust-bar {
  background-color: var(--bg-surface);
  background-image: none;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 26px 0;
}

.trust-icon {
  display: none;
}

.trust-item,
.trust-item:not(:last-child) {
  border: 0;
  border-left: 3px solid var(--color-accent);
  border-radius: 0;
  background: none;
  padding: 0 0 0 16px;
}

.trust-text .trust-title {
  color: var(--color-primary-dark);
}

.trust-text p {
  color: var(--text-body);
}

@media (max-width: 1024px) {
  .trust-bar {
    padding: 22px 0;
  }

  .trust-item,
  .trust-item:not(:last-child) {
    padding: 0 0 0 12px;
  }
}

/* Encuadre de la foto: prioriza la cabina */
.hero-bg img {
  object-position: 30% 45%;
}

/* Pantallas bajas de escritorio (p. ej. 1366 × 657): menos aire vertical
   para que la barra de confianza siga entrando sin bajar */
@media (min-width: 1025px) and (max-height: 820px) {
  .hero-stage {
    padding: 28px 0 32px;
  }

  .hero-badge {
    margin-bottom: 12px;
  }

  .hero-title {
    font-size: clamp(2.25rem, 3vw + 0.6rem, 3.6rem);
    margin-bottom: 14px;
  }

  .hero-lead {
    margin-bottom: 20px;
  }

  .trust-bar {
    padding: 18px 0;
  }
}

/* El eslogan de la portada no debe partirse con guiones en el celular */
.hero-title {
  hyphens: none;
}

/* Casilla de consentimiento del formulario (Ley 29733) */
.form-consent {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
}

.form-consent input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.form-consent label {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
}

.form-consent a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}