/* =====================================================
   Tyavipa — Ajustes de marca sobre el tema base Tranzporz
   ===================================================== */
:root {
  --theme-color: #CE1B28;
  --theme-color2: #F8F5F1;
  --title-color: #0B2836;
  --body-color: #52585D;
  --smoke-color: #F4F1EC;
  --yellow-color: #F2A20C;
}

/* -------- Cinta de color detrás del logo: el theme calcula su ancho
   asumiendo un logotipo angosto (right:-42px de sobrante). Nuestro
   nombre completo hace el logo-lockup más ancho, así que sin este
   ajuste la cinta roja se mete sobre el primer link del menú ("Inicio").
   La fila del header (logo + menú + botón) vive casi al límite de su
   ancho disponible: agrandar .header-logo aunque sea 4px hace que el
   navegador reparta el flex row de otra forma y el menú "salta" muy
   lejos. Por eso el padding a la derecha del texto no se agrega como
   ancho extra: se le resta al espacio icono-texto (--gap) para que el
   ancho total de .header-logo no cambie nada. -------- */
.header-layout2 .header-logo::before,
.header-layout3 .header-logo::before {
  height: 102px;
  right: 0 !important;
  left: -30px;
}
.header-layout2 .header-logo,
.header-layout3 .header-logo {
  gap: 2px;
  padding-right: 12px;
}

/* -------- Estado activo de navegación -------- */
.main-menu > ul > li.is-active > a,
.vs-mobile-menu > ul > li.is-active > a {
  color: var(--theme-color);
}

/* -------- Logo con texto (icono + nombre de la empresa) -------- */
.header-logo {
  position: relative;
  text-align: center;
  display: block;
}
.header-layout3 .header-logo a {
  position: relative;
  z-index: 1;
  left: 0;
}
.header-logo .logo-mark {
  height: 46px;
  width: auto;
}
.header-logo .logo-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
}
.header-logo .logo-text strong {
  font-family: var(--title-font);
  font-weight: 800;
  font-size: 18px;
  color: var(--title-color);
  letter-spacing: 0.2px;
}
.header-logo .logo-text span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--theme-color);
}
/* El bloque de color detrás del logo (::before del theme, siempre visible en
   header-layout2 y en header-layout3 antes de hacer scroll) es rojo, por eso
   el logo principal del header usa la variante blanca (logo-white.png). */
.header-logo .logo-text strong {
  color: var(--white-color);
}
.header-logo .logo-text span {
  color: var(--yellow-color);
}

/* Al hacer scroll el theme oculta la cinta roja y la barra pasa a blanca
   (clases reales: .will-sticky en el contenedor + .active en
   .sticky-active). Esto pasa tanto en header-layout2 (páginas internas,
   regla propia del theme en la línea ~5538 de style.css) como en
   header-layout3 (portada) — no es exclusivo de la portada como se
   pensó al principio. Con la cinta oculta, el logo blanco y el texto
   blanco/amarillo quedan invisibles sobre la barra blanca, así que en
   ese estado regresamos todo a colores oscuros. El corrimiento -23px
   del ancla (pensado para el layout normal) solo aplica en layout3. */
.will-sticky .sticky-active.active .header-logo .logo-mark {
  filter: brightness(0) saturate(100%);
}
.will-sticky .sticky-active.active .header-logo .logo-text strong {
  color: var(--title-color);
}
.will-sticky .sticky-active.active .header-logo .logo-text span {
  color: var(--theme-color);
}
.header-layout3 .will-sticky .sticky-active.active .header-logo a {
  left: 0;
}

/* En móvil el logo + nombre completo no caben en una fila sin partirse en
   3 líneas; se apilan verticalmente para dejar todo el ancho al texto. */
@media (max-width: 767.98px) {
  /* .logo-text es inline-flex: se dimensiona al ancho natural de su
     contenido ("Transportes y Asociados VIPA" en una sola línea), más
     ancho que la pantalla, y como no hay nada que lo detenga se desborda
     por la izquierda en vez de partirse en más líneas. Lo pasamos a
     flex (ancho completo del contenedor) para que el texto sí pueda
     ajustarse/partirse dentro del espacio disponible. */
  .header-logo {
    max-width: 100%;
    overflow: hidden;
  }
  /* .header-layout2 .header-logo (regla del theme, @media 991px) trae
     14px arriba/abajo con más especificidad que un ".header-logo" solo;
     iguala la especificidad para poder ganarle y darle más aire. */
  .header-layout2 .header-logo,
  .header-layout3 .header-logo {
    padding-top: 22px;
    padding-bottom: 22px;
  }
  .header-logo .logo-text {
    display: flex;
    align-items: center;
    max-width: 100%;
  }
  .header-logo .logo-mark {
    height: 36px;
  }
  .header-logo .logo-text strong {
    font-size: 15px;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .header-logo .logo-text span {
    font-size: 10px;
    white-space: normal;
  }

  /* En móvil quitamos la cinta roja de fondo: el logo (blanco por diseño
     para leerse sobre esa cinta) se regresa a negro con un filtro CSS —
     así no hace falta un segundo archivo de imagen — y todo el texto
     del logotipo pasa a negro sobre fondo blanco/transparente. */
  .header-layout2 .header-logo::before,
  .header-layout3 .header-logo::before {
    display: none;
  }
  .header-logo .logo-mark {
    filter: brightness(0) saturate(100%);
  }
  .header-logo .logo-text strong,
  .header-logo .logo-text span,
  .sticky-active:not(.sticky-menu) .header-logo .logo-text strong,
  .transparent-header .header-logo .logo-text strong,
  .transparent-header .header-logo .logo-text span {
    background: none;
    color: #000 !important;
  }
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.footer-logo .logo-mark {
  height: 44px;
  width: auto;
}
.footer-logo .logo-text strong {
  display: block;
  font-family: var(--title-font);
  font-weight: 800;
  font-size: 17px;
  color: var(--white-color);
}
.footer-logo .logo-text span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--yellow-color);
}

.mobile-logo,
.vs-widget-about .mb-4 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-logo .logo,
.vs-widget-about .logo {
  height: 38px;
  width: auto;
}
.mobile-logo .logo-text strong {
  font-weight: 800;
  font-size: 15px;
  color: var(--title-color);
  display: block;
}
.mobile-logo .logo-text span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--theme-color);
  text-transform: uppercase;
}

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.preloader-inner img {
  height: 60px;
  width: auto;
}

/* -------- Franjas de cobertura / permisos -------- */
.coverage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 22px;
}
.coverage-strip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 30px;
  background: var(--smoke-color);
  color: var(--title-color);
  font-size: 14px;
  font-weight: 600;
}
.coverage-strip span i {
  color: var(--theme-color);
}

/* -------- Tarjetas de valor / proceso reutilizables -------- */
.value-card {
  height: 100%;
  padding: 34px 28px;
  background: var(--white-color);
  border-radius: 12px;
  border: 1px solid #ECECEC;
  transition: 0.3s;
}
.value-card:hover {
  border-color: var(--theme-color);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
}
.value-card .value-icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--theme-color2);
  color: var(--theme-color);
  font-size: 24px;
  margin-bottom: 20px;
}
.value-card h3 {
  font-size: 19px;
  margin-bottom: 10px;
}
.value-card p {
  margin-bottom: 0;
  font-size: 15px;
}

/* -------- Bloque de servicio expandido (página de detalle) -------- */
.service-highlights {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}
.service-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--body-color);
}
.service-highlights li i {
  color: var(--theme-color);
  margin-top: 4px;
}
@media (max-width: 575px) {
  .service-highlights {
    grid-template-columns: 1fr;
  }
}

.related-services-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* .is-current marca de forma persistente cuál es la página actual dentro del
   listado de servicios (main.js reserva ".active" para el efecto de hover del
   theme, que por defecto siempre vuelve a resaltar el primer elemento). Le
   damos aquí el mismo tratamiento visual de bloque que ".active" del theme. */
.related-services-list li.is-current {
  background-color: var(--theme-color);
  border-color: transparent;
}
.related-services-list li.is-current a,
.related-services-list li.is-current a i {
  color: var(--white-color);
}

/* -------- Aviso de placeholder editable (dirección) -------- */
.map-note {
  font-size: 13px;
  color: var(--body-color);
  margin-top: 10px;
}

/* -------- El tema aplica text-transform:capitalize a casi todo el
   texto de párrafo; en español eso capitaliza cada palabra de una
   oración y se ve incorrecto, así que se desactiva en el contenido
   de texto largo (títulos y párrafos), dejando intactos los menús,
   botones y etiquetas cortas donde el theme sí lo usa a propósito. */
p, li, blockquote,
.hero-title, .hero-text,
.sec-title, .sec-text,
.about-text, .about-text2,
.details-title, .details-title2, .details-text,
.service-title, .service-text,
.faq-title, .faq-text,
.choose-title, .choose-text,
.work-title, .work-text,
.media-text,
.footer-text,
.contact-title, .contact-number,
.breadcumb-title,
.accordion-button,
.cta-title, .cta-call,
.emergency-title, .emergency-text,
.storage-box .title, .storage-box .text,
.contact-media .media-contact,
.testi-text, .author-title,
.blog-title,
.widget_title,
.value-card h3, .value-card p,
.form-messages {
  text-transform: none;
}

/* -------- Línea punteada de "¿Cómo trabajamos?": el theme la centra al
   50% de la altura de .work-body asumiendo una segunda fila de contenido
   superpuesta (custom-position) que aquí no usamos; con nuestra versión
   simplificada (círculo + título + texto en una sola columna) ese 50%
   cae a la mitad del texto. La fijamos justo debajo de los círculos
   numerados, pegada a su borde inferior rojo. -------- */
.work-body::after {
  top: 71px;
  transform: translateX(-50%);
}

/* -------- Tarjetas de contacto (teléfono/correo/ubicación/monitoreo):
   el theme las deja como un bloque gris plano. Les damos degradado
   oscuro de marca + un ícono gigante de fondo a modo de contexto
   visual, sin depender de fotos de stock que no aplican para los
   cuatro casos (teléfono/correo no tienen una foto natural). -------- */
.contact-media .media-style1 {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--title-color) 0%, #081821 100%);
}
.contact-media .media-bg-icon {
  position: absolute;
  right: -14px;
  bottom: -20px;
  font-size: 108px;
  line-height: 1;
  color: var(--white-color);
  opacity: 0.07;
  transform: rotate(-10deg);
  z-index: 0;
  pointer-events: none;
  transition: all 0.5s ease;
}
.contact-media .media-style1 > *:not(.media-bg-icon) {
  position: relative;
  z-index: 1;
}
.contact-media .media-style1 .media-title {
  color: var(--white-color);
}
.contact-media .media-style1 .media-contact,
.contact-media .media-style1 .media-contact a {
  color: rgba(255, 255, 255, 0.72);
}
.contact-media .media-style1 .media-contact a:hover {
  color: var(--white-color);
}
.contact-media .media-style1:hover .media-bg-icon {
  opacity: 0.14;
  transform: rotate(-4deg) scale(1.08);
}

/* -------- Encabezado (breadcrumb) de páginas internas: mismo criterio
   que .cta-band, para que se vea más del camión y no tanto cielo. -------- */
.breadcumb-wrapper.background-image {
  background-position-y: 80%;
}

/* -------- "Por qué elegirnos" (index): un poco más de aire antes de
   que termine la sección con imagen de fondo. -------- */
.choose-layout1.background-image {
  padding-bottom: 20px;
}

/* -------- Franja de estadísticas -------- */
.stats-strip {
  padding: 50px 0 20px;
}
.stats-strip .media-title {
  font-size: 46px;
  color: var(--theme-color);
  margin-bottom: 6px;
}
.stats-strip .media-text {
  font-weight: 600;
  color: var(--title-color);
  margin-bottom: 0;
}

/* -------- Banda CTA con imagen de fondo -------- */
.cta-band {
  position: relative;
  padding: 90px 0;
  background-size: cover;
  background-position: center 80%;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 40, 54, 0.93) 0%, rgba(11, 40, 54, 0.75) 60%, rgba(206, 27, 40, 0.55) 100%);
  z-index: -1;
}
.cta-band h2 {
  color: var(--white-color);
  font-size: 38px;
}
.cta-band p {
  color: #E7EBEC;
  font-size: 17px;
}
@media (max-width: 575px) {
  .cta-band h2 {
    font-size: 28px;
  }
}