/* ════════════════════════════════════════════
   TRANSPORTES TLJ – style.css
   Paleta: #cc0000 rojo | #0d1b2a azul oscuro | #f5f5f5 gris claro | #ffffff blanco
   Tipografía: Montserrat (display/titles) | Open Sans (body)
════════════════════════════════════════════ */

:root {
  --rojo: #cc0000;
  --rojo-hover: #aa0000;
  --azul-oscuro: #0d1b2a;
  --gris-claro: #f5f5f5;
  --gris-medio: #e0e0e0;
  --texto: #1a1a1a;
  --blanco: #ffffff;
}

html,
body {
  overflow-x: hidden;
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  color: var(--texto);
  background: var(--blanco);
}

/* ── BOTONES ── */
.btn-rojo {
  display: inline-block;
  background: var(--rojo);
  color: var(--blanco);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .05em;
  padding: .7rem 2rem;
  border: 2px solid var(--rojo);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.btn-rojo:hover {
  background: var(--rojo-hover);
  border-color: var(--rojo-hover);
  color: var(--blanco);
}

.btn-blanco {
  display: inline-block;
  background: var(--blanco);
  color: var(--texto);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .05em;
  padding: .7rem 2rem;
  border: 2px solid var(--blanco);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.btn-blanco:hover {
  background: transparent;
  color: var(--blanco);
}

.btn-outline-rojo {
  display: inline-block;
  background: transparent;
  color: var(--rojo);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  padding: .55rem 1.5rem;
  border: 2px solid var(--rojo);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.btn-outline-rojo:hover {
  background: var(--rojo);
  color: var(--blanco);
}

/* ════════════════════════════════════════════
   HERO
════════════════════════════════════════════ */
#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 520px;
  overflow: hidden;
}
#hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Vimeo iframe escalado para cubrir todo el hero (efecto cover) */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-video-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Cubre por ancho manteniendo 16:9; en pantallas altas se sobredimensiona verticalmente */
  width: 100vw;
  height: 56.25vw;      /* 100vw * 9/16 */
  min-height: 100%;
  min-width: 177.78vh;  /* 100vh * 16/9 */
  border: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 1;
}
.hero-logo {
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.hero-logo img {
  max-width: 220px;
  width: 100%;
  height: auto;
}

/* ════════════════════════════════════════════
   BIENVENIDA
════════════════════════════════════════════ */
.section-bienvenida {
  background: var(--rojo);
  padding: 3.5rem 1rem;
}
.titulo-bienvenida {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 2.2rem;
  color: var(--blanco);
  margin-bottom: 1.2rem;
}
.texto-bienvenida {
  color: rgba(255, 255, 255, .92);
  font-size: 1.2rem;
  margin-bottom: 1.6rem;
}

/* ════════════════════════════════════════════
   UNIDADES
════════════════════════════════════════════ */
.section-unidades {
  background: var(--blanco);
  padding: 4rem 1rem;
}
.titulo-seccion {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--azul-oscuro);
}
.titulo-unidades {
  color: var(--rojo);
}
.unidad-card {
  padding: 1rem;
}
.unidad-img-wrap {
  width: 290px;
  height: 290px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  overflow: hidden;

}
.unidad-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.unidad-titulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--azul-oscuro);
  margin-bottom: .6rem;
}
.unidad-texto {
  font-size: 1.1rem;
  color: #444;
}

/* ════════════════════════════════════════════
   DISCLAIMER BANNER
════════════════════════════════════════════ */
.section-disclaimer {
  background: var(--azul-oscuro);
  padding: 2.2rem 1rem;
}
.disclaimer-texto {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 2vh, 3.5rem);
  color: var(--blanco);
  margin: 0;
  line-height: 1.5;
}

/* ════════════════════════════════════════════
   SECCIONES DE VEHÍCULOS
════════════════════════════════════════════ */
.section-vehiculos {
  padding: 3.5rem 1rem;
}
.section-dark {
  background: var(--azul-oscuro);
}
.section-rojo {
  background: var(--rojo);
}
.titulo-vehiculo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 2vh, 3.5rem);
  color: var(--rojo);
  margin-bottom: .8rem;
}
.section-dark .titulo-vehiculo {
  color: var(--rojo);
}
.vehiculo-img {
  border-radius: 4px;
  display: block;
  object-fit: cover;
}
.vehiculo-caption {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--texto);
}
.section-dark .vehiculo-caption {
  color: #ddd;
}
.section-rojo .vehiculo-caption {
  color: var(--blanco);
}

/* ════════════════════════════════════════════
   LOWBOY
════════════════════════════════════════════ */
.section-lowboy {
  background: var(--gris-claro);
  padding: 3.5rem 1rem;
}
.section-lowboy .titulo-vehiculo {
  color: var(--azul-oscuro);
  font-size: 2.1rem;
}

/* ════════════════════════════════════════════
   CLIENTES — Swiper
════════════════════════════════════════════ */
.section-clientes {
  background: #efefef;
  padding: 3.5rem 1rem;
}
.swiper-clientes {
  padding: 0 2.5rem;
}
.cliente-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
}
.cliente-slide img {
  max-height: 100px;
  object-fit: contain;
  filter: grayscale(40%);
  transition: filter .2s;
}
.cliente-slide img:hover {
  filter: grayscale(0%);
}
.swiper-clientes .swiper-button-prev,
.swiper-clientes .swiper-button-next {
  color: var(--rojo);
}

/* ════════════════════════════════════════════
   CONTACTO + MAPA (bloques 50/50 full-height)
════════════════════════════════════════════ */
.section-contacto {
  background: var(--blanco);
  border-top: 4px solid var(--rojo);
}
.section-contacto .row {
  min-height: 480px;
}
.contacto-info {
  padding: 3.5rem 2.5rem;
}
.titulo-contacto {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 2.3vh, 3.8rem);
  color: var(--azul-oscuro);
  margin-bottom: 1.4rem;
}
.contacto-dato {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: 1.1rem;
  font-size: 1.1rem;
  color: var(--texto);
}
.contacto-dato i {
  color: var(--rojo);
  margin-top: .2rem;
  flex-shrink: 0;
}
.mapa-wrap {
  width: 100%;
  height: 100%;
  min-height: 480px;
}
.mapa-wrap iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 480px;
}

/* ════════════════════════════════════════════
   MODELO DE SERVICIO (bloques 50/50 full-height)
════════════════════════════════════════════ */
.section-modelo {
  overflow: hidden;
}
.section-modelo .row {
  min-height: 460px;
}
.modelo-img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  background-size: cover;
  background-position: center;
}
.modelo-contenido {
  background: var(--azul-oscuro);
  height: 100%;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem 3rem;
}
.modelo-titulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 2vh, 3.5rem);
  color: var(--blanco);
  margin-bottom: 1.2rem;
}
.modelo-lista {
  list-style: none;
  padding: 0;
  margin: 0;
}
.modelo-lista li {
  color: rgba(255, 255, 255, .95);
  font-size: 1.2rem;
  margin-bottom: .6rem;
}
.modelo-lista li i {
  color: var(--rojo);
}

/* ── TAGLINE ── */
.section-tagline {
  background: var(--blanco);
  padding: 2.5rem 1rem;
}
.modelo-tagline {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: #666;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0;
}

/* ════════════════════════════════════════════
   VÍDEOS
════════════════════════════════════════════ */
.section-video {
padding-bottom: 40px;
padding-top: 40px ;
}
.section-video-dark {
  background: #08101a;
}
.video-label-bar {
  background: var(--rojo);
  color: var(--blanco);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  padding: .7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.video-label-dark {
  background: #1a1a1a;
  color: rgba(255, 255, 255, .85);
}
.video-embed-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}
.video-embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ════════════════════════════════════════════
   FLETES A TODO MÉXICO (imagen de fondo sin overlay)
════════════════════════════════════════════ */
.section-fletes {
  background: url('images/12.webp') center/cover no-repeat;
  background-color: #13293d;
  padding: 6rem 1rem;
  position: relative;
}
.fletes-titulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  color: var(--blanco);
  margin: 0;
  line-height: 1.3;

}

.contenido-fletes{
    position: relative;
  z-index: 4;
}
.fletes-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .25);
  z-index: 1;
  left:0;
  top: 0;
}



/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
.site-footer {
  background: var(--azul-oscuro);
  color: rgba(255, 255, 255, .7);
  padding: 2.5rem 1rem;
  border-top: 4px solid var(--rojo);
}
.footer-logo {
  max-width: 160px;
  height: auto;
}
.footer-copy {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .6);
}

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .titulo-bienvenida { font-size: 1.7rem; }
  .titulo-seccion { font-size: 1.5rem; }

  .section-lowboy .titulo-vehiculo { font-size: 1.6rem; }
  
  .titulo-contacto { font-size: 1.6rem; }
  .modelo-titulo { font-size: 1.5rem; }
  .fletes-titulo { font-size: 1.5rem; }
  .contacto-info { padding: 2.5rem 1.5rem; }
  .modelo-contenido { padding: 2.5rem 1.5rem; min-height: auto; }
  .modelo-img { min-height: 260px; }
  .section-modelo .row,
  .section-contacto .row { min-height: auto; }
  .mapa-wrap,
  .mapa-wrap iframe { min-height: 340px; }
}