@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
*{font-family: "Montserrat", sans-serif !important;}
/* === FULL BLEED para romper el contenedor centrado de HubSpot === */
.time-scroll--bleed{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}

/* Base */
.time-scroll { position: relative; }
.time-scroll__sticky {
  position: sticky;
  top: 0;
  height: 100svh;    /* alto de viewport real en móviles */
  min-height: 100vh;
  overflow: hidden;
}
.time-scroll__spacer { height: calc(var(--slides, 4) * 100vh); }

/* Cada slide ocupa todo el sticky */
.time-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .6s ease;
  display: block;           /* antes: grid; evita “centrado” forzado */
}
.time-slide.is-active { opacity: 1; }

/* Fondo ABSOLUTO + cover */
.time-slide__bg { position:absolute; inset:0; z-index:0; }
.time-slide__bg img, .time-slide__bg source { width:100%; height:100%; object-fit:cover; object-position:center; }

/* Panel (derecha, centrado vertical) */
.time-slide__content {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: flex-end;
  height: 100%; width: 100%;
  padding: 24px clamp(24px, 5vw, 72px);
}
.time-slide__panel {
  max-width: 820px; width: 100%;
  background: rgba(255,255,255,.92);
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  padding: 28px 28px 22px;
}

/* Texto / visual */
.time-slide__tag{ color:#f4a62a; font-weight:500; margin-bottom:10px; font-size:16px; }
.time-pill{ display:inline-flex; align-items:center; gap:10px; background:#1c2a4a; padding: 15px 20px; color:#fff; border-radius:999px; padding:15px 16px; margin-bottom:14px; }
.time-pill__icon{ width:36px; height:36px; }
.time-pill__text{ font-weight: 100; font-size: 3rem;letter-spacing:.2px; }
.time-slide__title{
      font-size: 28px;
      line-height: 30px;
      margin: 6px 0 8px;
      color: var(--secondary-blue);
      font-weight: 700;
}
.time-slide__subtitle{
    color: #6b7280;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px #0000007d;
}
.time-slide__desc{ margin-top:10px; }

/* Badges como IMÁGENES en fila */
.badgeimg-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.badgeimg{ display:inline-flex; align-items:center; justify-content:center; background:#f3f5f9; border-radius:10px; padding:6px 8px; }
.badgeimg img{ height:20px; width:auto; display:block; }

/* Comodidad */
.time-slide__features{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }
.feature {
    align-items: center;
    background: transparent;
    border-radius: 12px;
    display: flex;
    gap: 10px;
    padding: 0;
}
.feature__icon{
    background: transparent;
    border-radius: 10px;
    display: grid;
    height: 100%;
    place-items: center;
    width: 68px;
}
.feature__icon img{ width:100%; height:auto; }
.feature__text{
    color: var(--text-purple);
    font-size: 1.3rem;
    max-width: 80%;
}

/* Thumbs superpuestas (desktop) */
.time-thumbs{
  position:absolute;
  left:clamp(16px, 6vw, 72px);
  bottom:clamp(16px, 6vw, 52px);
  z-index:1;
  display:grid; grid-auto-flow:column; grid-auto-columns: 280px; gap:16px;
}
.time-thumb{ display:block; border-radius:16px; overflow:hidden; box-shadow:0 14px 30px rgba(0,0,0,.18); }
.time-thumb img{ width:100%; height:160px; object-fit:cover; display:block; }

/* Móvil: el “fondo” son 3 imágenes */
.time-mobile-bg{ position:absolute; inset:0; z-index:0; display:none; overflow:hidden; }
.time-mobile-bg img{ width:100%; height:auto; display:block; }

@media (max-width: 767px){
  .time-slide__bg--desktop{ display:none; }
  .time-thumbs{ display:none; }
  .time-mobile-bg{ display:block; }

  /* Composición móvil: 1/2 + 1/4 + 1/4 de la altura */
  .time-mobile-bg img:nth-child(1){ height:50vh; object-fit:cover; }
  .time-mobile-bg img:nth-child(n+2){ height:25vh; object-fit:cover; }

  .time-slide__content{ justify-content:center; padding:16px; }
  .time-slide__panel{ border-radius:20px; }
}

/* Lightbox */
.ts-lightbox{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  z-index:100000;
  background:rgba(0,0,0,.75);
  display:flex; align-items:center; justify-content:center; padding:24px;
  overscroll-behavior:contain;    /* evita scroll chaining en móviles */
}
@supports (height: 100dvh){
  .ts-lightbox{ height:100dvh; }
}
.ts-lightbox[hidden]{ display:none; }
.ts-lightbox__img{
  max-width:min(1100px, 92vw);
  max-height:86vh;
  border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.ts-lightbox__close{
  position:absolute; top:14px; right:14px; width:42px; height:42px;
  border:0; border-radius:50%; font-size:28px; line-height:1; cursor:pointer;
  background:#fff; color:#111; box-shadow:0 8px 24px rgba(0,0,0,.25);
}

/* Evita artefactos de stacking contexts raros */
.ts-lightbox{ z-index: 100000; box-sizing: border-box; }

/* --- Layout 2 columnas más firme (panel más ancho) --- */
.time-layout{
  display:grid;
  /* izq (thumbs) fijo/moderado, der (panel) con mínimo cómodo */
  grid-template-columns: minmax(300px, 380px) minmax(620px, 1fr);
  column-gap: clamp(16px, 5vw, 56px);
  align-items: end;
  height: 100%;
  width: 100%;
}
.time-col{ min-width: 0; }
.time-col--thumbs{ align-self: end; }
.time-col--panel{ align-self: center; justify-self: end; }

/* Thumbs DENTRO del layout */
.time-layout .time-thumbs{
  position: static;
  left: auto; bottom: auto; z-index: auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: 14px;
  max-width: 100%;
}
.time-layout .time-thumb img{
  height: 140px;
  object-fit: cover;
}

/* (Por si olvidamos borrar el bloque absoluto) -> escóndelo */
.time-slide > .time-thumbs{ display: none !important; }

/* Panel un poco más holgado sin romper el diseño */
.time-slide__panel{
  max-width: 880px;           /* antes 820px */
  width: 100%;
}

/* Responsive: tableta -> reduce thumbs y da más espacio al panel */
@media (max-width: 1200px){
  .time-layout{
    grid-template-columns: minmax(260px, 320px) 1fr;
    column-gap: clamp(14px, 4vw, 36px);
  }
  .time-layout .time-thumb img{ height: 120px; }
}

/* Móvil: se apilan (sigues usando las 3 imágenes de fondo) */
@media (max-width: 991px){
  .time-layout{ grid-template-columns: 1fr; align-items: center; }
  .time-col--thumbs{ display: none; }
  .time-slide__panel{ border-radius: 20px; max-width: 720px; }
}

/* ===== Ajuste de proporciones ===== */

/* Panel + columnas */
.time-slide__content{
  position: relative; z-index: 3;       /* por encima del gradiente */
  display: block;                        /* el grid vive dentro */
  height: 100%; width: 100%;
  padding: 24px clamp(32px, 6vw, 96px);  /* más respiración desde el borde */
}

.time-layout{
  display: grid;
  /* izq = thumbs; der = panel */
  grid-template-columns: minmax(300px, 360px) minmax(640px, 1fr);
  column-gap: clamp(20px, 5vw, 64px);
  align-items: end;                       /* thumbs pegadas abajo */
  height: 100%;
}

.time-col{ min-width: 0; }
.time-col--panel{ align-self: center; justify-self: end; }

/* Panel un poco más compacto (como el mockup) */
.time-slide__panel{
  max-width: clamp(560px, 42vw, 720px);
  padding: clamp(22px, 2.2vw, 28px);
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}


/* Thumbs dentro del layout (sin absolutas) */
.time-layout .time-thumbs{
  position: static; left: auto; bottom: auto; z-index: auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: 14px;
  max-width: 100%;
}
.time-layout .time-thumb{ border-radius: 16px; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.time-layout .time-thumb img{ width: 100%; height: 140px; object-fit: cover; }

/* Si quedara el bloque de thumbs absoluto por error, escóndelo */
.time-slide > .time-thumbs{ display: none !important; }

/* Gradiente inferior para dar contraste (como la referencia) */
.time-slide::after{
  content: "";
  position: absolute; inset: auto 0 0 0; height: 36vh;
  background: linear-gradient(to top, rgba(17,27,46,.55) 0%, rgba(17,27,46,.38) 36%, rgba(17,27,46,0) 100%);
  pointer-events: none; z-index: 1;
}

/* Fondo absoluto y cobertura total (aseguramos proporción) */
.time-slide__bg,
.time-mobile-bg{ position: absolute; inset: 0; z-index: 0; }
.time-slide__bg img, .time-slide__bg source{ width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Desktop ancho: da un poco más al panel y reduce thumbs */
@media (min-width: 1440px){
  .time-layout{
    grid-template-columns: minmax(300px, 340px) minmax(680px, 1fr);
    column-gap: clamp(24px, 5vw, 72px);
  }
  .time-layout .time-thumb img{ height: 150px; }
  .time-slide__panel{ max-width: 760px; }
}

/* Tablet/Móvil: apilar, seguimos con fondo de 3 imágenes */
@media (max-width: 991px){
  .time-layout{ grid-template-columns: 1fr; align-items: center; }
  .time-col--thumbs{ display: none; }
  .time-slide__panel{ max-width: 720px; border-radius: 20px; }
}

/* ===== FIX de posicionamiento: 2 columnas + panel anclado a la derecha ===== */

/* El grid interno: thumbs (izq) más estrechas, panel (der) ocupa el resto */
.time-layout{
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr; /* izq más compacta */
  column-gap: clamp(16px, 3.5vw, 40px);
  align-items: center;            /* centrado vertical del conjunto */
  height: 100%;
  width: 100%;
}
.time-col{ min-width: 0; }

/* Columna de thumbs: alinea abajo para el look del mockup */
.time-col--thumbs{ align-self: end; }

/* Columna del panel: FLEX para anclar el panel a la DERECHA */
.time-col--panel{
  align-self: center;
  justify-self: stretch;          /* ocupa toda la columna */
  display: flex;
  justify-content: flex-end;      /* empuja el panel al borde derecho */
  align-items: center;
  padding-right: clamp(24px, 5vw, 72px); /* margen seguro al borde */
}

/* Panel más “compacto” y controlado */
.time-slide__panel{
  width: auto;                    /* deja que el flex lo encoja al max-width */
  max-width: clamp(600px, 42vw, 760px);
  padding: clamp(22px, 2.2vw, 28px);
}

/* Ajusta padding del contenedor para no alejar el panel del borde derecho */
.time-slide__content{
  padding-left: clamp(24px, 6vw, 96px);
  padding-right: 0;               /* el espacio derecho lo da la col del panel */
}

/* Thumbs DENTRO del layout (no absolutas) */
.time-layout .time-thumbs{
  position: static !important;
  left: auto; bottom: auto; z-index: auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);
  gap: 14px;
  max-width: 100%;
}
.time-layout .time-thumb{ border-radius:16px; overflow:hidden; box-shadow:0 14px 30px rgba(0,0,0,.18); }
.time-layout .time-thumb img{ width:100%; height:140px; object-fit:cover; }

/* Si quedó el BLOQUE de thumbs ABSOLUTO por fuera del layout, escóndelo */
.time-slide > .time-thumbs{ display: none !important; }

/* Gradiente inferior para contraste (como la referencia) */
.time-slide::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:36vh;
  background: linear-gradient(to top, rgba(17,27,46,.55) 0%, rgba(17,27,46,.38) 36%, rgba(17,27,46,0) 100%);
  pointer-events:none; z-index:1;
}

/* Tablet/móvil: apilar y mantener look */
@media (max-width: 1200px){
  .time-layout{
    grid-template-columns: minmax(240px, 300px) 1fr;
    column-gap: clamp(14px, 4vw, 28px);
  }
  .time-layout .time-thumb img{ height: 120px; }
}
@media (max-width: 991px){
  .time-layout{ grid-template-columns: 1fr; }
  .time-col--thumbs{ display:none; }     /* en móvil ya usas las 3 imágenes de fondo */
  .time-slide__panel{ max-width: 720px; border-radius: 20px; }
}

/* === FIX FINAL: panel a la derecha con ancho fijo y thumbs sin empujar === */

/* El contenedor del contenido no agrega padding a la derecha;
   el aire lo damos con gap y un pequeño padding simétrico */
.time-slide__content{
  padding: 24px clamp(32px, 6vw, 64px);
}

/* Grid interno: izquierda = fluida, derecha = ancho fijo controlado */
.time-layout{
  display: grid;
  grid-template-columns: 1fr minmax(620px, 760px); /* <- clave */
  column-gap: clamp(20px, 4vw, 56px);
  align-items: center;
  height: 100%;
  width: 100%;
}

.time-col{ min-width: 0; }

/* Thumbs a la izquierda, pegadas abajo */
.time-col--thumbs{ align-self: end;    width: 65%; }
.time-layout .time-thumbs{
  position: static !important;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: 14px;
  max-width: 100%;
}
.time-layout .time-thumb{ border-radius:16px; overflow:hidden; box-shadow:0 14px 30px rgba(0,0,0,.18); }
.time-layout .time-thumb img{ width:100%; height:140px; object-fit:cover; }

/* Columna del panel: sin paddings extra; el panel se alinea al borde derecho */
.time-col--panel{
  align-self: center;
  justify-self: stretch;
  display: flex;
  justify-content: flex-end;   /* ancla el panel al borde derecho */
  align-items: center;
  padding: 0;                   /* <- importante: quita el empuje extra */
}

/* Caja del panel: ancho controlado y compacto (coincide con referencia) */
.time-slide__panel{
  width: 100%;
  max-width: 550px;
  padding: clamp(22px, 2.2vw, 28px);
  border-radius: 28px;
}

/* Si quedara alguna thumbs "absoluta" fuera del layout, forzamos a ocultarla */
.time-slide > .time-thumbs{ display: none !important; }

/* Desktop ancho: puedes darle un poquito más si quieres */
@media (min-width: 1440px){
  .time-layout{ grid-template-columns: 1fr minmax(680px, 800px); }
  .time-layout .time-thumb img{ height: 150px; }
}

/* Tablet/Móvil: apilar; ya usas fondo con 3 imágenes */
@media (max-width: 991px){
  .time-layout{ grid-template-columns: 1fr; }
  .time-col--thumbs{ display: none; }
  .time-slide__panel{ max-width: 720px; border-radius: 20px; }
}

/* ====== MÓVIL: carrusel con efecto cover + panel debajo (fix visibilidad) ====== */
@media (max-width: 767px){
  /* Asegura que la columna de thumbs (donde vive el carrusel) NO esté oculta */
  .time-col--thumbs{ display:block !important; order:1;width: 100%;padding: 0;}
  .time-col--panel{ order:2;margin: 15px 0px 50px; }

  /* Oculta las thumbs de escritorio y el fondo móvil antiguo */
  .time-col--thumbs > .time-thumbs{ display:none !important; }
  .time-mobile-bg{ display:none !important; }

  /* Carrusel */
  .time-carousel{
    display:block !important;       /* <- clave si alguna regla previa lo ocultó */
    width:100%;
    position:relative;
    margin:0 0 8px 0;
    z-index:2;
  }
  .time-carousel__track{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    height: var(--tc-h, 56vh);       /* fallback si JS no llegó a correr */
    gap:0;
    border-radius:18px;
    background:#0b13241a;
    scrollbar-width:none;
  }
  .time-carousel__track::-webkit-scrollbar{ display:none; }
  .time-carousel__item{
    min-width:100%;
    height:100%;
    scroll-snap-align:center;
    display:block;
    overflow:hidden;
    border-radius:0px;
  }
  .time-carousel__item img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
  }
  .time-carousel__dots{
    position:absolute; left:0; right:0; bottom:10px;
    display:flex; justify-content:center; gap:8px;
    pointer-events:none; z-index:5;
  }
  .time-carousel__dot{ width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.55); }
  .time-carousel__dot.is-active{ background:#f4a62a; }
}

/* ====== MÓVIL: carrusel 16:9 arriba del contenido ====== */
.time-carousel{display:none;}
@media (max-width: 767px){
  .time-layout{grid-template-columns: 1fr;display: grid;align-content: center;align-items: start;background:#F1F0EB;}
  .time-slide__content{padding:0;}
  .time-slide__panel {
    margin: 0px 20px;
  }
  /* El contenedor define el alto con relación 16:9 */
  .time-carousel{
    position: relative;
    height: 50vh;
  }
  .time-carousel::before{
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 = 9/16 => 56.25% */
  }

  /* La pista se posiciona encima y rellena el rectángulo 16:9 */
  .time-carousel__track{
    position: absolute;
    inset: 0;
    height: 100% !important;   /* anula cualquier height previo (56vh, etc.) */
    border-radius: 0px;
  }

  /* Cada slide e imagen rellenan el área */
  .time-carousel__item{ height: 109%; }
  .time-carousel__item img{
    height: 107%;
    width: 107%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Dots dentro del rectángulo */
  .time-carousel__dots{
    bottom: 8px;
  }
}

/* ===== MÓVIL: SIN STICKY, LISTA NORMAL ===== */
@media (max-width: 767px){
  /* Nada de sticky ni spacer */
  .time-scroll__sticky{
    position: static;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .time-scroll__spacer{
    display: none !important;
    height: 0 !important;
  }

  /* Cada slide ocupa su lugar en el flujo (apilados) */
  .time-slide{
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    transition: none !important;
    /* opcional: separación entre tarjetas */
    /* margin-bottom: 16px; */
  }
  .time-slide.is-active{ opacity: 1; }

  /* Sin gradiente inferior del efecto sticky */
  .time-slide::after{ display: none; }

  /* Ya ocultas el fondo desktop en móvil, por si acaso: */
  .time-slide__bg{ display: none; }
}