.elementor-widget-container.premium-cursor-ftext .premium-global-cursor-{{ID}} .premium-cursor-follow-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-container .premium-global-cursor-{{ID}}{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-widget-container .premium-global-badge-{{ID}} .premium-badge-text{color:var( --e-global-color-secondary );}.elementor-widget-container:not(.premium-gbadge-custom) .premium-global-badge-{{ID}} .premium-badge-container, .elementor-widget-container.premium-gbadge-custom .premium-global-badge-{{ID}} .premium-badge-container{background-color:var( --e-global-color-primary );}.elementor-widget-container .premium-global-badge-{{ID}} .premium-badge-icon{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}.elementor-70233 .elementor-element.elementor-element-d60e1f8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-html.premium-cursor-ftext .premium-global-cursor-{{ID}} .premium-cursor-follow-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-html .premium-global-cursor-{{ID}}{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-widget-html .premium-global-badge-{{ID}} .premium-badge-text{color:var( --e-global-color-secondary );}.elementor-widget-html:not(.premium-gbadge-custom) .premium-global-badge-{{ID}} .premium-badge-container, .elementor-widget-html.premium-gbadge-custom .premium-global-badge-{{ID}} .premium-badge-container{background-color:var( --e-global-color-primary );}.elementor-widget-html .premium-global-badge-{{ID}} .premium-badge-icon{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}/* Start custom CSS for html, class: .elementor-element-b73b2d9 *//* Sección que se "pinea" mientras haces scroll */
#poalgi-horizontal {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #f7f3ef; /* tu color de fondo */
}
#svg-poalgi {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  /* width se calcula por JS */
}

.poalgi-pin {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.theLine {
  /* el dasharray se calculará por JS según la longitud real del path */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* Track horizontal: ancho fijo en px, da igual cuántos hitos pongas */
.poalgi-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: max-content;     /* ← ANTES estaba en 10400px o lo que tuvieras */
  height: 100vh;
  will-change: transform;
  z-index: 2;
}

/* Cada hito */
.hito {
  flex: 0 0 1000px;  /* ancho fijo de cada hito */
  padding: 0 60px;
  max-width: 380px;
  position: relative;
  /* Posición vertical media por defecto */
  align-self: center;
  transform: translateY(0);
}

.hito-alto { transform: translateY(-25vh); }  /* hitos arriba */
.hito-bajo { transform: translateY(25vh); }   /* hitos abajo */

.hito h2 {
  font-size: 14px;
  letter-spacing: 2px;
  color: #004a32;
  margin: 0 0 8px;
}

.hito h3 {
  font-size: 28px;
  margin: 0 0 16px;
  color: #1a1a1a;
}

.hito p {
  font-size: 14px;
  line-height: 1.6;
  color: #444;
}



/* ============ ENCABEZADO "SUMÉRGETE..." ============ */
.hito-intro {
  flex: 0 0 700px;          /* Ocupa menos espacio que un hito normal */
  align-self: flex-start;   /* Lo pega arriba */
  padding-top: 80px;        /* Margen desde arriba */
  padding-left: 80px;
  max-width: 500px;
  transform: none !important;
}

.hito-intro .claim {
  font-size: 22px;
  line-height: 1.4;
  color: #1a1a1a;
  font-style: italic;
  margin: 0;
}

/* ============ HITO DOBLE (1989 estilo PDF) ============ */
.hito-doble {
  flex: 0 0 1100px;          /* Más ancho porque tiene varios elementos */
  max-width: none;
  height: 100vh;
  position: relative;
  padding: 0;
  display: block;            /* Anulamos el flex del .hito normal */
  transform: none !important;
}

/* Imagen grande izquierda */
.hito-doble .img-grande {
  position: absolute;
  top: 30%;
  left: 0;
  width: 220px;
  height: 320px;
}

/* Bloque del año + título */
.hito-doble .bloque-texto {
  position: absolute;
  top: 28%;
  left: 270px;
  width: 280px;
}

.hito-doble .bloque-texto h2 {
  font-size: 18px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 12px;
  letter-spacing: 0;
}

.hito-doble .bloque-texto h3 {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 0;
}

/* Imagen pequeña centro-abajo */
.hito-doble .img-pequena {
  position: absolute;
  top: 48%;
  left: 320px;
  width: 220px;
  height: 260px;
}

/* Párrafo a la derecha */
.hito-doble .parrafo {
  position: absolute;
  top: 50%;
  left: 600px;
  width: 280px;
  transform: translateY(-50%);
}

.hito-doble .parrafo p {
  font-size: 13px;
  line-height: 1.6;
  color: #444;
  margin: 0;
}

/* Las imágenes ocupan todo su contenedor */
.hito-doble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;          /* Para ver el bloque negro mientras no haya imagen */
  margin: 0;                 /* Anula el margin-bottom de .hito img */
  max-height: none;          /* Anula el max-height de .hito img */
  border-radius: 0;
}

/* ============================================================
   HITO TIPO TARJETA (año + título + párrafo + imagen derecha)
   Usado por: 1994, 2002, 2005, 2019, 2020, 2022, 2024, 2025
   ============================================================ */
.hito-card {
  flex: 0 0 700px;
  max-width: none;
  height: 100vh;
  position: relative;
  padding: 0;
  display: block;
  transform: none !important;
}

/* Año + título */
.hito-card .titulo {
  position: absolute;
  top: 22%;            /* posición por defecto */
  left: 40px;
  width: 240px;
}

.hito-card .titulo h2 {
  font-size: 18px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 8px;
  letter-spacing: 0;
}

.hito-card .titulo h3 {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 0;
}

/* Párrafo (separado del título por defecto) */
.hito-card .parrafo {
  position: absolute;
  top: 42%;
  left: 40px;
  width: 240px;
}

.hito-card .parrafo p {
  font-size: 13px;
  line-height: 1.6;
  color: #444;
  margin: 0;
}

/* Imagen derecha */
.hito-card .imagen {
  position: absolute;
  top: 28%;
  left: 340px;
  width: 280px;
  height: 380px;
}

.hito-card .imagen img,
.hito-card .imagen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  margin: 0;
  max-height: none;
  border-radius: 0;
}

/* ====== MODIFICADORES DE POSICIÓN VERTICAL ======
   Combinables con .hito-card. Aplica el que toque a cada hito */

/* Título y párrafo PEGADOS (estilo 1994) */
.hito-card.juntar .parrafo { top: 32%; }

/* Subir todo el bloque */
.hito-card.subir-poco   { transform: translateY(-8vh)  !important; }
.hito-card.subir         { transform: translateY(-15vh) !important; }
.hito-card.subir-mucho   { transform: translateY(-22vh) !important; }

/* Bajar todo el bloque */
.hito-card.bajar-poco   { transform: translateY(8vh)   !important; }
.hito-card.bajar         { transform: translateY(15vh)  !important; }
.hito-card.bajar-mucho   { transform: translateY(22vh)  !important; }

/* ============ HITO FINAL ============ */
.hito-final {
  flex: 0 0 100vw !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  align-self: center !important;
  z-index: 3;
  transform: none !important;
  max-width: none !important;
  display: block !important;
  overflow: hidden;
}

.hito-final img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  max-height: none !important;
  border-radius: 0 !important;
}

/* ============================================================
   TABLET Y MÓVIL (≤ 1024px) — apilado vertical
   ============================================================ */
@media (max-width: 1024px) {
  /* La sección y el pin dejan de tener altura fija */
  #poalgi-horizontal,
  .poalgi-pin {
    height: auto !important;
    overflow: visible !important;
  }
  /* ── Anular TODOS los modificadores de posición vertical ── */
.hito-card.subir-poco,
.hito-card.subir,
.hito-card.subir-mucho,
.hito-card.bajar-poco,
.hito-card.bajar,
.hito-card.bajar-mucho,
.hito.hito-alto,
.hito.hito-bajo {
  transform: none !important;
}
  

  /* Ocultamos la línea SVG */
  #svg-poalgi {
    display: none !important;
  }

  /* El track pasa a columna */
  .poalgi-track {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }

  /* Reset general de TODOS los tipos de hito */
  .hito,
  .hito-card,
  .hito-doble,
  .hito-intro,
  .hito-final {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 60px 40px !important;
    margin: 0 !important;
    display: block !important;
    align-self: auto !important;
    position: relative !important;
    transform: none !important;
  }

  /* ===== INTRO ===== */
  .hito-intro {
    padding: 80px 40px 40px !important;
  }
  .hito-intro .claim {
    font-size: 22px;
  }

  /* ===== HITO DOBLE (1989) ===== */
  .hito-doble .img-grande,
  .hito-doble .bloque-texto,
  .hito-doble .img-pequena,
  .hito-doble .parrafo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto 24px !important;
    transform: none !important;
  }
  .hito-doble .img-grande,
  .hito-doble .img-pequena {
    height: 320px !important;
    background: #000;
  }

  /* ===== HITOS CARD ===== */
  .hito-card .titulo,
  .hito-card .parrafo,
  .hito-card .imagen {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto 24px !important;
  }
  .hito-card .imagen {
    height: 380px !important;
    background: #000;
  }

  /* ===== HITO FINAL ===== */
  .hito-final {
    padding: 0 !important;
    height: 60vh !important;
  }
  .hito-final img {
    height: 100% !important;
  }

  /* ===== TIPOGRAFÍA ===== */
  .hito h2 { font-size: 16px; letter-spacing: 1.5px; }
  .hito h3 { font-size: 26px; }
  .hito p  { font-size: 15px; }
  .hito-card .titulo h3 { font-size: 26px; }
  .hito-doble .bloque-texto h3 { font-size: 26px; }
}

/* ============================================================
   MÓVIL PEQUEÑO (≤ 600px) — ajustes finos
   ============================================================ */
@media (max-width: 600px) {
  .hito,
  .hito-card,
  .hito-doble,
  .hito-intro {
    padding: 40px 20px !important;
  }
  
  /* ── Anular TODOS los modificadores de posición vertical ── */
.hito-card.subir-poco,
.hito-card.subir,
.hito-card.subir-mucho,
.hito-card.bajar-poco,
.hito-card.bajar,
.hito-card.bajar-mucho,
.hito.hito-alto,
.hito.hito-bajo {
  transform: none !important;
}

  .hito-intro .claim            { font-size: 20px; }
  .hito h3                       { font-size: 22px; }
  .hito-card .titulo h3          { font-size: 22px; }
  .hito-doble .bloque-texto h3   { font-size: 24px; }

  .hito-doble .img-grande,
  .hito-doble .img-pequena       { height: 260px !important; }
  .hito-card .imagen             { height: 320px !important; }

  .hito-final                    { height: 50vh !important; }
}


/* Vídeo del 2007: contenedor horizontal y más grande */
.hito-card[data-year="2007"] {
  flex: 0 0 1200px !important;     /* hito más ancho */
}

.hito-card[data-year="2007"] .imagen {
  width: 850px !important;
  height: 480px !important;
  left: 280px !important;         /* posición desde la izquierda */
  top: 30% !important;
  background: transparent !important;
}

.hito-card[data-year="2007"] .imagen video {
  object-fit: contain !important;
  background: transparent !important;
}

/* 1) Todas las fechas en verde, igual que 2013 */
#poalgi-horizontal .hito h2 {
  color: #004a32;
}/* End custom CSS */