.elementor-13185 .elementor-element.elementor-element-e485ae1{--display:flex;}.elementor-13185 .elementor-element.elementor-element-e485ae1.e-con{--flex-grow:0;--flex-shrink:0;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-13185 .elementor-element.elementor-element-e485ae1{--width:100%;}}/* Start custom CSS for shortcode, class: .elementor-element-f11b02a *//* ============================================================
   HN TIMELINE — Travel in Time (v5 final)
   ============================================================ */

#hn-timeline-root {
  --hn-blue:        #175CD3;
  --hn-blue-light:  #EFF8FF;
  --hn-blue-mid:    #84CAFF;
  --hn-blue-dark:   #0A0D12;
  --hn-gray:        #A8B0B8;
  --hn-gray-text:   #5D6A7B;
  --hn-stroke:      #DEE5EC;
  --hn-white:       #ffffff;
  --hn-egg-bar-h:   80px;
  --hn-anim:        380ms cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;
  width: 100%;
  height: 800px; /* JS sobreescribe */
  background: var(--hn-blue-light);
  overflow: hidden;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  user-select: none;
}

/* ── VIEWPORT ── */
.hn-canvas-viewport {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: var(--hn-egg-bar-h);
  overflow: hidden;
  cursor: grab;
}
.hn-canvas-viewport.dragging { cursor: grabbing; }

/* ── CANVAS ── */
.hn-canvas {
  position: absolute;
  top: 0; left: 0;
  will-change: transform;
  pointer-events: none;
}
.hn-canvas > * { pointer-events: all; }

/* ============================================================
   NODO DE ERA
   ============================================================ */
.hn-era-node {
  position: absolute;
  border-radius: 50%;
  background: rgba(239,248,255,0.5);
  border: 1px solid #A8B0B8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 10;
  overflow: hidden; /* clip la imagen al círculo */
  transition: border-color var(--hn-anim), box-shadow var(--hn-anim);
}

/* Imagen de fondo — pseudo-elemento fijo, no se mueve */
.hn-era-node::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: var(--cover-img, none);
  background-size: cover;
  background-position: center center;
  background-color: rgba(239,248,255,0.5);
  /* NO transition en background-image para evitar flash */
  transition: opacity var(--hn-anim);
  z-index: 0;
  pointer-events: none;
  transform: none; /* garantizar que no se mueve */
}

/* Overlay azul — otro pseudo que aparece en hover/active */
.hn-era-node::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--hn-blue);
  opacity: 0;
  transition: opacity var(--hn-anim);
  z-index: 1;
  pointer-events: none;
}

/* Hover — mostrar overlay azul */
.hn-era-node:hover::after  { opacity: 1; }
.hn-era-node.active::after { opacity: 1; }
.hn-era-node.active {
  border-color: var(--hn-blue);
  box-shadow: 0 16px 48px rgba(23,92,211,0.35);
}

/* Contenido — z-index 2 para estar encima del overlay */
.hn-era-content {
  position: relative;
  z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  pointer-events: none;
  /* Oculto por defecto si hay imagen, visible en hover/active */
  opacity: 1;
  transition: opacity var(--hn-anim);
}
/* Con imagen: contenido oculto hasta hover/active */
.hn-era-node.has-cover .hn-era-content { opacity: 0; }
.hn-era-node.has-cover:hover .hn-era-content,
.hn-era-node.has-cover.active .hn-era-content { opacity: 1; }

/* Sin imagen: el hover sólo pone overlay azul translúcido */
.hn-era-node:not(.has-cover)::after {
  background: rgba(23,92,211,0.1);
}
.hn-era-node:not(.has-cover).active::after {
  background: var(--hn-blue);
}

/* Colores del texto — siempre blanco en hover/active */
.hn-era-icon {
  color: #5D6A7B; /* fill="currentColor" en SVG lo usará */
  transition: color var(--hn-anim);
  display: flex; align-items: center; justify-content: center;
}
.hn-era-node:hover .hn-era-icon,
.hn-era-node.active .hn-era-icon { color: white; }

.hn-era-label {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 16px; font-weight: 600;
  color: var(--hn-blue); text-align: center;
  line-height: 1.3; padding: 0 16px;
  transition: color var(--hn-anim);
}
.hn-era-node:hover .hn-era-label,
.hn-era-node.active .hn-era-label { color: white; }

.hn-era-sublabel {
  font-size: 13px; color: var(--hn-gray-text);
  text-align: center; transition: color var(--hn-anim);
}
.hn-era-node:hover .hn-era-sublabel,
.hn-era-node.active .hn-era-sublabel { color: rgba(255,255,255,0.85); }

/* ============================================================
   ANILLOS — posicionados en absoluto en el container (fuera del nodo)
   El hover y los estados los gestiona el JS directamente via style.
   El CSS solo define la base.
   ============================================================ */
.hn-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid #A8B0B8; /* SIEMPRE #A8B0B8 — solo JS cambia a azul */
  background: transparent;
  cursor: pointer;
  pointer-events: all;
  transition: background 380ms cubic-bezier(0.4,0,0.2,1),
              border-color 380ms cubic-bezier(0.4,0,0.2,1);
  transform: translate(-50%, -50%);
}

/* ============================================================
   HUEVITOS — sobre las líneas de los anillos
   ============================================================ */
.hn-inner-egg {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 15;
  transition: transform 200ms ease;
}
.hn-inner-egg:hover { transform: translate(-50%,-50%) scale(1.2) !important; }

/* SVG fill/stroke en estado normal */
.hn-inner-egg svg path { transition: fill var(--hn-anim); }

/* Huevito activo — fill azul */
.hn-inner-egg.active svg path { fill: var(--hn-blue) !important; }
/* Huevito hover — fill azul */
.hn-inner-egg:hover svg path  { fill: var(--hn-blue) !important; }

/* ── Botón play del canvas ── */
#hn-timeline-root .hn-play-btn {
  position: absolute;
  border-radius: 50%;
  background: none !important;
  border: 3px solid transparent !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 12;
  transform: translate(-50%, -50%);
  padding: 0;
  overflow: hidden; /* clip la imagen al círculo */
  transition: border-color var(--hn-anim), transform var(--hn-anim);
  color: transparent !important;
}
#hn-timeline-root .hn-play-btn:focus,
#hn-timeline-root .hn-play-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
#hn-timeline-root .hn-play-btn:hover {
  border-color: var(--hn-blue-mid) !important;
  transform: translate(-50%, -50%) scale(1.05);
}

/* Imagen de fondo usando ::before (mismo patrón que .hn-era-node) */
#hn-timeline-root .hn-play-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: var(--cover-img, none);
  background-size: cover;
  background-position: center center;
  background-color: rgba(239,248,255,0.5);
  z-index: 0;
  pointer-events: none;
  transition: opacity var(--hn-anim);
}
/* Overlay azul en hover (igual que .hn-era-node) */
#hn-timeline-root .hn-play-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(23,92,211,0.35);
  opacity: 0;
  transition: opacity var(--hn-anim);
  z-index: 1;
  pointer-events: none;
}
#hn-timeline-root .hn-play-btn:hover::after { opacity: 1; }

/* SVG e icono encima del overlay */
#hn-timeline-root .hn-play-btn .hn-play-btn-icon {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

/* Sin imagen: comportamiento por defecto */
#hn-timeline-root .hn-play-btn:not(.has-era-img)::before {
  background-image: none;
  background-color: transparent;
}

/* ── Play btn de la barra inferior: mismo efecto border azul en hover ── */
.hn-egg-bar .hn-bar-item:first-child {
  border: 2px solid transparent;
  border-radius: 50%;
  padding: 4px;
  transition: border-color var(--hn-anim), background var(--hn-anim);
}
.hn-egg-bar .hn-bar-item:first-child:hover {
  border-color: var(--hn-blue-mid) !important;
  background: transparent !important;
}

/* ============================================================
   PANEL — fixed en desktop (el canvas necesita overflow:hidden)
   ============================================================ */
.hn-panel {
  position: absolute;
  bottom: calc(var(--hn-egg-bar-h) + 24px);
  right: 24px;
  max-height: calc(100vh - var(--hn-egg-bar-h) - 48px);
  width: 760px;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--hn-anim), transform var(--hn-anim);
  display: block;
}
.hn-panel.open {
  pointer-events: all;
  opacity: 1;
  transform: translateY(0);
}

/* ── CARD ── */
.hn-slide-card {
  background: white;
  box-shadow: 0 4px 12px rgba(2,2,2,0.06), 0 4px 4px rgba(2,2,2,0.04);
  border-radius: 16px;
  outline: 1px solid var(--hn-stroke);
  outline-offset: -1px;
  overflow: hidden;
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Botón X — 32px, border transparente → blanco visible, hover oscuro */
.hn-card-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0) !important; /* transparente en reposo */
  outline: none !important;
  padding: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 25;
  color: transparent !important;
  transition: background var(--hn-anim), border-color var(--hn-anim);
}
.hn-card-close svg path { fill: white; }
.hn-card-close:focus,
.hn-card-close:focus-visible { outline: none !important; }
.hn-card-close:hover {
  background: rgba(2,2,2,0.20) !important;
  border-color: white !important;
}

/* Zona de imagen — carrusel */
.hn-card-image {
  width: 100%;
  height: 341px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: #eef2f7;
}
/* Track de imágenes — posición absoluta para no tapar flechas */
#hn-card-img-track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 350ms cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
  /* transform se aplica en el track, las flechas están fuera en .hn-card-image */
  will-change: transform;
}
#hn-card-img-track > div {
  flex: 0 0 100%;  /* no crece ni encoge, ocupa 100% del track por frame */
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
#hn-card-img-track img {
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
#hn-card-img-track iframe {
  width: 100%; height: 100%; border: none;
  pointer-events: all;
}
.hn-card-image.no-img {
  display: flex; align-items: center; justify-content: center;
  color: var(--hn-gray-text); font-size: 14px;
}

/* Flechas del carrusel — 48px, border transparente → blanco en hover */
.hn-card-prev, .hn-card-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.5) !important; /* semitransparente en reposo */
  outline: none !important;
  padding: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--hn-anim), border-color var(--hn-anim),
              opacity var(--hn-anim);
  z-index: 20;
  color: transparent !important;
  pointer-events: all;
}
.hn-card-prev svg path,
.hn-card-next svg path { fill: white; }
.hn-card-prev:focus,
.hn-card-next:focus,
.hn-card-prev:focus-visible,
.hn-card-next:focus-visible { outline: none !important; }
.hn-card-prev:hover, .hn-card-next:hover {
  background: rgba(2,2,2,0.20) !important;
  border-color: white !important;
}
.hn-card-prev:disabled, .hn-card-next:disabled { opacity: 0.3; cursor: default; }
.hn-card-prev { left: 12px; }
.hn-card-next { right: 12px; }

/* Dots */
.hn-card-dots {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 5;
}
.hn-card-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background var(--hn-anim), transform var(--hn-anim);
}
.hn-card-dot.active { background: white; transform: scale(1.4); }

/* Cuerpo de texto — seleccionable */
.hn-card-body {
  padding: 24px 24px 32px;
  overflow-y: auto; flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--hn-blue-mid) transparent;
  user-select: text;
  -webkit-user-select: text;
}
.hn-card-year {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px; font-weight: 400;
  line-height: 20px;
  color: #5D6A7B; /* Figma: text-secondary — NO azul */
  margin-bottom: 4px;
}
.hn-card-title {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 24px; font-weight: 400;
  line-height: 32px; color: var(--hn-blue-dark);
  margin: 0 0 16px;
  user-select: text;
  -webkit-user-select: text;
}
.hn-card-text {
  font-size: 16px; font-weight: 400;
  line-height: 24px; color: var(--hn-gray-text);
  user-select: text;
  -webkit-user-select: text;
  pointer-events: all;
}
.hn-card-text p { margin: 0 0 12px; }
.hn-card-text p:last-child { margin-bottom: 0; }
.hn-card-links { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.hn-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--hn-blue); font-size: 14px; font-weight: 500;
  text-decoration: none;
}
.hn-card-link:hover { text-decoration: underline; }

/* (nav prev/next eliminado — la navegación es solo via anillos/huevitos) */

/* ============================================================
   BARRA DE HUEVOS — FIXED bottom viewport
   ============================================================ */
.hn-egg-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--hn-egg-bar-h);
  background: var(--hn-blue-light);
  border-top: 1px solid var(--hn-stroke);
  display: flex;
  align-items: stretch; /* items se estiran a toda la altura */
  overflow-x: auto; overflow-y: hidden;
  padding: 0 12px; gap: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--hn-blue-mid) transparent;
  z-index: 50;
}
.hn-egg-bar.anchored {
  position: absolute; bottom: 0; left: 0; right: auto; width: 100%;
}
.hn-egg-bar::-webkit-scrollbar { height: 3px; }
.hn-egg-bar::-webkit-scrollbar-thumb { background: var(--hn-blue-mid); border-radius: 2px; }

.hn-bar-item {
  flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px; /* padding horizontal, sin padding vertical para ocupar toda la altura */
  border-radius: 0;
  transition: background var(--hn-anim);
  min-width: 36px;
}
.hn-bar-item:hover  { background: rgba(23,92,211,0.08); }
.hn-bar-item.active { background: rgba(23,92,211,0.15); }

/* Separador de era — más padding horizontal */
.hn-bar-item.era-sep { padding: 0 8px; }

/* SVGs de la barra — tamaño controlado por CSS, no por atributos inline */
.hn-bar-item svg {
  display: block;
  flex-shrink: 0;
}
/* Play btn (primer item): 56px */
.hn-bar-item:nth-child(1) svg {
  width: 56px;
  height: 56px;
}
/* Slide eggs: 24x24 */
.hn-bar-item:not(.era-sep):not(:first-child) svg {
  width: 24px;
  height: 24px;
}
/* Era eggs (separadores): 32x32 */
.hn-bar-item.era-sep svg {
  width: 32px;
  height: 32px;
}

.hn-bar-item svg path { transition: fill var(--hn-anim); }

/* Hover: cambiar fill en TODOS los items EXCEPTO el primero (play btn)
   El play tiene 2 paths: círculo azul y triángulo blanco — no deben cambiar */
.hn-bar-item:not(:first-child):hover svg path { fill: var(--hn-blue) !important; }

/* Active: el SVG ya es egg-travel con fill azul, no sobreescribir */
.hn-bar-item.active { background: rgba(23,92,211,0.15); }

/* ── OVERLAY (muy suave, no tapa el canvas) ── */
.hn-overlay {
  position: fixed; inset: 0;
  background: transparent;
  z-index: 99;
  opacity: 0; pointer-events: none;
  transition: opacity var(--hn-anim);
}
.hn-overlay.active { opacity: 1; pointer-events: none; }

/* ── Reset global para botones del timeline (anula theme WordPress #c36) ──
   Mayor especificidad que button {} del theme */
#hn-timeline-root button,
#hn-timeline-root button:hover,
#hn-timeline-root button:focus,
#hn-timeline-root button:active {
  border-color: transparent;
  color: transparent;
  outline: none;
  box-shadow: none;
}
/* Sobrescribir específicamente el play btn del canvas */
#hn-timeline-root .hn-play-btn {
  border: 3px solid transparent !important;
  color: transparent !important;
  outline: none !important;
  background: none !important;
}
#hn-timeline-root .hn-play-btn:hover {
  border-color: var(--hn-blue-mid) !important;
}
#hn-timeline-root .hn-play-btn:focus,
#hn-timeline-root .hn-play-btn:focus-visible {
  outline: none !important;
  border-color: transparent !important;
}
/* ============================================================
   HN TIMELINE — Mobile / Tablet  (≤ 1024px)
   Layout: timeline sticky izquierda + scroll de cards
   ============================================================ */

@media (max-width: 1024px) {

  /* ── Ocultar canvas/barra cuando el JS mobile está activo ── */
  #hn-timeline-root:has(.hn-mobile-timeline) .hn-canvas-viewport,
  #hn-timeline-root:has(.hn-mobile-timeline) .hn-egg-bar,
  #hn-timeline-root:has(.hn-mobile-timeline) .hn-panel,
  #hn-timeline-root:has(.hn-mobile-timeline) .hn-overlay,
  #hn-timeline-root:has(.hn-mobile-timeline) .hn-play-btn {
    display: none !important;
  }

  /* ── Root: flex row, altura auto, no overflow hidden ── */
  #hn-timeline-root:has(.hn-mobile-timeline) {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
    background: var(--hn-blue-light);
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    position: relative !important;
  }

  /* ============================================================
     TIMELINE VERTICAL — sticky dentro del contenedor del shortcode
     ============================================================ */
  .hn-mobile-timeline {
    position: sticky;
    top: 0;
    width: 56px;
    flex-shrink: 0;
    height: 100vh;
    background: var(--hn-blue-light);
    border-right: 1px solid var(--hn-stroke);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 10;
    padding: 8px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Sticky respeta el contenedor — NO sale al header/footer */
  }
  .hn-mobile-timeline::-webkit-scrollbar { display: none; }

  /* Línea vertical central decorativa */
  .hn-mobile-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 1px;
    background: var(--hn-stroke);
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
  }

  /* ── Items del timeline ── */
  .hn-mtl-item {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 50%;
    transition: background var(--hn-anim);
    margin: 1px 0;
  }
  .hn-mtl-item:hover  { background: rgba(23,92,211,0.08); }
  .hn-mtl-item.active { background: rgba(23,92,211,0.15); }

  .hn-mtl-item svg { display: block; }
  .hn-mtl-item.is-play  svg { width: 32px; height: 32px; }
  .hn-mtl-item.is-era   svg { width: 24px; height: 24px; }
  .hn-mtl-item.is-slide svg { width: 18px; height: 18px; }

  .hn-mtl-item.active svg path { fill: var(--hn-blue) !important; }

  /* Separador entre eras en el timeline */
  .hn-mtl-era-sep {
    width: 24px;
    height: 1px;
    background: var(--hn-stroke);
    margin: 3px 0;
    flex-shrink: 0;
  }

  /* ============================================================
     SCROLL AREA — a la derecha del timeline
     ============================================================ */
  .hn-mobile-scroll {
    flex: 1;
    min-width: 0; /* evita overflow */
    padding-bottom: 60px;
    background: var(--hn-blue-light);
  }

  /* Padding horizontal responsive del contenido */
  .hn-mobile-scroll-inner {
    padding: 0 32px; /* tablet: 768–1024px */
  }

  /* ── Historic Videos section ── */
  .hn-mobile-play-section {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .hn-mobile-play-title {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    color: #0A0D12;
    margin: 0 0 16px;
  }
  .hn-mobile-play-card {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: white;
    position: relative;
    cursor: pointer;
    outline: 1px solid var(--hn-stroke);
    box-shadow: 0px 4px 12px rgba(2,2,2,0.04), 0px 4px 4px rgba(2,2,2,0.04);
  }
  .hn-mobile-play-card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
  }
  .hn-mobile-play-card-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: #eef2f7;
  }
  .hn-mobile-play-btn-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 300ms;
  }
  .hn-mobile-play-card:hover .hn-mobile-play-btn-overlay {
    background: rgba(23,92,211,0.15);
  }

  /* ── Era section wrapper ── */
  .hn-mobile-era-section {
    padding-bottom: 0;
  }

  /* Era header — solo texto, sin icono SVG */
  .hn-mobile-era-header {
    padding-top: 24px; /* gap de 24px desde la última card de la era anterior */
    padding-bottom: 16px; /* gap de 16px hasta la primera card */
    background: transparent;
  }
  .hn-mobile-era-label {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    color: #0A0D12;
    display: block;
  }
  .hn-mobile-era-sublabel {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #5D6A7B;
    display: block;
  }

  /* ── Lista de slides de una era ── */
  .hn-mobile-slides-list {
    display: flex;
    flex-direction: column;
    gap: 16px; /* 16px entre slides de la misma era */
  }

  /* ── Card individual de slide ── */
  .hn-mobile-slide {
    width: 100%;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    outline: 1px solid #DEE5EC;
    outline-offset: -1px;
    box-shadow: 0px 4px 12px rgba(2,2,2,0.04), 0px 4px 4px rgba(2,2,2,0.04);
  }

  /* Carrusel de imágenes */
  .hn-mobile-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #eef2f7;
    border-radius: 0; /* el border-radius lo gestiona el padre */
  }
  .hn-mobile-carousel-track {
    display: flex;
    transition: transform 350ms cubic-bezier(0.4,0,0.2,1);
  }
  .hn-mobile-carousel-track > div {
    flex: 0 0 100%;
    overflow: hidden;
  }
  .hn-mobile-carousel-track img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
  }
  .hn-mobile-carousel-track iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border: none;
    display: block;
  }
  .hn-mobile-carousel-dots {
    position: absolute;
    bottom: 8px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 5px;
    z-index: 5;
  }
  .hn-mobile-carousel-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 200ms;
  }
  .hn-mobile-carousel-dot.active { background: white; }

  /* No-image placeholder */
  .hn-mobile-slide-no-img {
    width: 100%;
    aspect-ratio: 16/9;
    background: #eef2f7;
  }

  /* Cuerpo del slide */
  .hn-mobile-slide-body {
    padding: 16px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .hn-mobile-slide-texts {
    display: flex;
    flex-direction: column;
    gap: 4px; /* entre overtitle y title */
  }
  .hn-mobile-slide-year {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #5D6A7B;
    display: block;
  }
  .hn-mobile-slide-title {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    color: #0A0D12;
    margin: 0;
  }
  .hn-mobile-slide-text {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #5D6A7B;
  }
  .hn-mobile-slide-text p { margin: 0 0 8px; }
  .hn-mobile-slide-text p:last-child { margin-bottom: 0; }

  /* Links */
  .hn-mobile-slide-links {
    display: flex; flex-direction: column; gap: 8px;
  }
  .hn-mobile-slide-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--hn-blue);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 14px; font-weight: 500;
    text-decoration: none;
  }
  .hn-mobile-slide-link:hover { text-decoration: underline; }

} /* end @media (max-width: 1024px) */

/* ── Mobile puro (≤ 767px): padding 16px ── */
@media (max-width: 767px) {
  .hn-mobile-scroll-inner {
    padding: 0 16px;
  }
}/* End custom CSS */