/* === SOLO para el marquee de esta sección === */
.marquee-block .swiper { overflow: hidden; }

/* Cada slide debe medir lo que ocupa su contenido */
.marquee-block .swiper-slide {
  width: auto !important;
  display: flex;
  align-items: center;
}

/* Evitar que el H2 se parta en dos líneas */
.marquee-block .pbmit-element-title {
  display: inline-block;
  white-space: nowrap;
  line-height: 1;           /* más compacto */
  word-break: normal;
  overflow-wrap: normal;
  max-width: none;          /* por si el tema pone límites */
  margin: 0 3rem;           /* espacio entre items */
  /* opcional: tamaño fluido */
  /* font-size: clamp(28px, 8vw, 120px); */
}

/* transición lineal para efecto “marquee” continuo */
.marquee-block .swiper-wrapper {
  transition-timing-function: linear !important;
  -webkit-transition-timing-function: linear !important;
}


.swiper-button-next { display: none !important; }
.pbmit-slider-one .hero-dummy-nav,
.pbmit-slider-one .hero-dummy-nav::after { display: none !important; }















/* ===== Portada Trancargo (aislada) ===== */
/* === Hero ocupa toda la pantalla === */
:root{ --tc-header-h: 0px; } /* si el header es overlay, pon su alto real */

.tc-hero, .tc-hero-track{
  height: calc(100svh - var(--tc-header-h));
  min-height: 560px;
}

/* === Slides (igual) === */
.tc-hero-track{ position:relative; overflow:hidden; }
.tc-slide{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .8s ease; }
.tc-slide.is-active{ opacity:1; pointer-events:auto; }

/* Fondo (igual) */
.tc-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.tc-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); }

/* === CONTENIDO ABAJO === */
/* Hacemos que el contenedor del texto ocupe toda la altura del slide
   y lo anclamos al borde inferior. */
.tc-hero-content{
  position: relative; z-index: 2; color:#fff;
  height: 100%;            /* 👈 ocupa toda la altura del hero */
  display: flex;
  align-items: flex-end;    /* 👈 pega el bloque al fondo */
  padding: 0 0 4rem 0;      /* 👈 solo padding inferior (separación del borde) */
  padding-top: calc(var(--tc-header-h) + 0px); /* por si el header es overlay */
}

/* Tipografías y caja derecha (igual) */
.tc-subtitle{ font-size:clamp(14px,2vw,18px); letter-spacing:.06em; opacity:.95; margin:0 0 .25rem; color: #fff; }
.tc-title{ font-size:clamp(32px,6vw,64px); line-height:1.05; font-weight:800; margin:0 0 1rem; text-shadow:0 6px 24px rgba(0,0,0,.35); color: #fff; }
.tc-right{ background:rgba(0,0,0,.28); backdrop-filter:blur(4px); border-radius:18px; padding:1.25rem 1.25rem 1.5rem; max-width:520px; }
.tc-desc{ font-size:clamp(14px,2vw,16px); line-height:1.6; }
.tc-cta{ margin-top:1rem; }
.tc-btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:.85rem 1.35rem; background:#ff6b2c; color:#fff; font-weight:700; text-decoration:none; transition: transform .15s, box-shadow .15s, filter .2s; }
.tc-btn:hover{ transform: translateY(-1px); box-shadow:0 10px 30px rgba(255,107,44,.35); filter:brightness(1.05); }

/* === Dots a la derecha, centrados verticalmente === */
.tc-hero-dots{
  position:absolute;
  right: 18px;             /* 👈 a la derecha */
  top: 50%; transform: translateY(-50%); /* 👈 centrados vertical */
  z-index: 3;
  display:flex; flex-direction: column; gap:10px; /* 👈 vertical */
}
.tc-dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.45); border:0; cursor:pointer; transition:transform .2s, background .2s; }
.tc-dot.active{ background:#fff; transform: scale(1.15); }

/* === Línea del hero: 2 columnas reales (izq + der) === */
.tc-hero-line{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px); /* ← derecha máx 520 */
  gap: 24px;
  align-items: end;         /* ambos apoyados abajo */
}

/* Neutraliza los wrappers de Bootstrap dentro de la grid */
.tc-hero-line > [class*="col-"],
.tc-hero-line > .row{
  display: contents;        /* ← los ignora para el layout de grid */
  padding: 0 !important;
  margin: 0 !important;
}

/* Ajustes finos para que no “salten” los márgenes */
.tc-left{ display:flex; flex-direction:column; justify-content:flex-end; }
.tc-title{ margin:0; }
.tc-subtitle{ margin:0 0 .5rem; }
.tc-right{ margin:0; }

/* En móvil, columna única */
@media (max-width: 991px){
  .tc-hero-line{ grid-template-columns: 1fr; margin: 10px;}
  .tc-right{ margin-top: 1rem; }
}


/* En móvil, volvemos los dots abajo para no tapar contenido */
@media (max-width: 991px){
  .tc-hero-content{ padding-bottom: 3rem; }
  .tc-hero-dots{
    right: 50%; transform: translateX(50%); /* truco para centrar desde la derecha */
    left: 50%; transform: translate(-50%, 0); /* o simplemente usa left:50% */
    bottom: 18px; top: auto; flex-direction: row;
  }
}
.tc-hero { touch-action: pan-y; cursor: grab; }
.tc-hero.is-dragging { cursor: grabbing; }