/* ===== Historia: Vertical Timeline (móvil impecable + desktop intacto) ===== */
:root{
  --verde:#35574d;
  --line:#e6efe9;

  /* Desktop/base */
  --rail-x:30px;             /* posición horizontal de la línea/punto (desktop) */
  --dot:16px;                /* tamaño del punto */
  --text-gap:104px;          /* separación línea → contenido (desktop) */
  --content-left: calc(var(--rail-x) + var(--text-gap));

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* -------- Hero sutil -------- */
.hero--historia{ padding:56px 0 12px; }
.hero--historia .hero__subtitle{ backdrop-filter: blur(3px); }

/* -------- Ancho elegante (desktop) -------- */
.vtl .container{ width:min(980px,92vw); }

/* -------- Viewport -------- */
.vtl__wrap{ position:relative; }
.vtl__viewport{
  background:transparent;
  border:none; border-radius:0; box-shadow:none;
  height:min(82vh,920px);
  overflow:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:y mandatory;
  padding: 6px 12px;
  scrollbar-gutter: stable;               /* evita saltos cuando aparece el scroll */
}

/* -------- Lista + línea vertical -------- */
.vtl__list{
  position:relative;
  list-style:none;
  margin:0; padding:4px 0;
}
/* Línea vertical general (desktop); en móvil se recalibra abajo */
.vtl__list::before{
  content:"";
  position:absolute;
  left: var(--rail-x);
  top:0; bottom:0;
  width:2px; background: var(--line);
  z-index:0;
}

/* -------- Ítems (desktop) -------- */
.vtl__item{
  position:relative;
  padding:12px 0 22px;
  padding-left: var(--content-left);      /* contenido a la derecha de la línea */
  padding-right: clamp(12px, 4vw, 24px);  /* aire derecho */
  scroll-snap-align:center;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
  z-index:1;
}
.vtl__item.is-active{ transform: translateY(-1px); }

/* Punto (desktop) */
.vtl__dot{
  position:absolute;
  left: var(--rail-x);
  top: 28px;                              /* alinea con el título/ano */
  width: var(--dot); height: var(--dot);
  border-radius:999px;
  background:#fff;                        /* centro blanco */
  border:3px solid var(--verde);          /* aro principal */
  box-shadow:
    0 0 0 6px rgba(53,87,77,.08),         /* halo verde suave */
    0 0 0 10px rgba(171,87,18,.06);       /* halo acento piel */
  transform: translate(-50%, -50%);
  pointer-events:none; z-index:2;
}
.vtl__dot::after{
  content:"";
  position:absolute; inset:4px;
  border-radius:inherit; background:var(--verde); opacity:.95;
}

/* Año y tarjeta */
.vtl__year{
  margin:0 0 6px;
  font-size: .95rem; font-weight:800; color:var(--verde); letter-spacing:.2px;
}
.vtl__card{
  position:relative; z-index:1;
  background:transparent; border:none; border-radius:0; padding:0; box-shadow:none;
  max-width: 100%;
}
.vtl__card h3{
  margin:0 0 8px; font-size: clamp(1.08rem, 1.9vw, 1.35rem);
  color:var(--verde); font-weight:800; letter-spacing:.2px; line-height:1.2;
}
.vtl__card p{ margin:0 0 12px; color:#2b4a41; line-height:1.68; }
.vtl__card img{
  width:100%; height:auto; max-height:380px;
  border-radius:14px; object-fit:cover; display:block;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.vtl__item.is-active img:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 16px 40px rgba(0,0,0,.12); }

/* -------- Controles (opcionales) -------- */
.vtl__controls{ display:flex; gap:10px; justify-content:center; margin-top:12px; }
.tl-btn{
  background:#fff; color:var(--verde);
  border:1px solid var(--verde);
  border-radius:999px; padding:8px 12px; font-weight:800;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.tl-btn:hover{ transform: translateY(-1px); background:var(--verde); color:#fff; }
.tl-btn:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(53,87,77,.25), 0 0 0 6px rgba(53,87,77,.12); border-radius:12px;
}

/* ===================== Desktop/Tablet tweaks ===================== */
@media (max-width:1400px){
  :root{ --text-gap:96px; --content-left: calc(var(--rail-x) + var(--text-gap)); }
}
@media (max-width:1200px){
  :root{ --text-gap:88px; --content-left: calc(var(--rail-x) + var(--text-gap)); }
}
@media (max-width:1024px){
  :root{ --text-gap:78px; --rail-x:28px; --content-left: calc(var(--rail-x) + var(--text-gap)); }
  .vtl .container{ width:min(840px,94vw); }
  .vtl__viewport{ height:min(78vh,820px); }
  .vtl__card img{ max-height:320px; }
}

/* ===================== MÓVIL — layout específico ===================== */
/* En móvil usamos GRID por ítem: [columna del punto] [columna del contenido] */
@media (max-width:640px){
  :root{
    --rail-col: 32px;               /* ancho de la columna para el punto */
    --rail-x: calc(var(--rail-col)/2); /* la línea queda centrada en esa columna */
    --dot: 12px;                    /* punto más discreto */
  }

  .vtl .container{ width:min(560px,96vw); }

  .vtl__viewport{
    height:min(72vh,700px);
    padding: 12px 16px;             /* aire simétrico, no pega al borde ni al scrollbar */
  }

  /* Reposicionamos la línea para casar con la columna de puntos */
  .vtl__list::before{
    left: var(--rail-x);             /* línea centrada en la columna del punto */
  }

  .vtl__item{
    display:grid;
    grid-template-columns: var(--rail-col) 1fr;  /* col 1: punto / col 2: contenido */
    grid-template-rows: auto auto;               /* fila 1: año / fila 2: tarjeta */
    column-gap: 12px;
    align-items:start;

    padding: 14px 16px 18px 8px;    /* acolchado general */
    scroll-snap-align: start;       /* más natural en móvil */
  }

  /* Punto: ahora es un elemento de grid, no absoluto */
  .vtl__dot{
    position:static;
    justify-self:center;            /* centrado en su columna */
    align-self:start;
    margin-top: 6px;

    width: var(--dot); height: var(--dot);
    border-radius:999px; background:#fff; border:3px solid var(--verde);
    box-shadow:
      0 0 0 5px rgba(53,87,77,.08),
      0 0 0 8px rgba(171,87,18,.05);
    transform:none; pointer-events:none; z-index:1;
  }
  .vtl__dot::after{ content:""; position:absolute; inset:auto; } /* quito núcleo interno por compat móvil */
  /* Si quieres mantenerlo, comenta la línea de arriba y usa:
     .vtl__dot::after{ content:""; position:absolute; inset:3px; border-radius:inherit; background:var(--verde); }
  */

  /* Año y contenido */
  .vtl__year{
    grid-column:2; grid-row:1;
    margin: 0 0 6px;
    font-size: clamp(.98rem, 4.2vw, 1.12rem);
    font-weight:800; color:var(--verde);
  }
  .vtl__card{
    grid-column:2; grid-row:2;
    max-width: 100%;
  }
  .vtl__card h3{ font-size: clamp(1rem, 4.1vw, 1.16rem); margin-bottom:6px; }
  .vtl__card p{ font-size: clamp(.95rem, 3.7vw, 1rem); }

  .vtl__card img{
    max-height: 260px;
    border-radius:12px;
  }
}

/* ===================== Reduce motion ===================== */
@media (prefers-reduced-motion: reduce){
  .vtl__viewport{ scroll-behavior:auto; }
  .vtl__item{ transition:none; }
  .tl-btn{ transition:none; }
}

/* ===================== Scrollbar moderno de marca ===================== */
/* Firefox */
.vtl__viewport{
  scrollbar-width: thin;                                /* fino */
  scrollbar-color: rgba(53,87,77,.55) transparent;      /* thumb / track */
}
/* WebKit (Chrome, Edge, Safari) */
.vtl__viewport::-webkit-scrollbar{ width:12px; }
.vtl__viewport::-webkit-scrollbar-track{ background:transparent; }
.vtl__viewport::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(53,87,77,.30), rgba(53,87,77,.65));
  border-radius:999px; border:3px solid transparent; background-clip:padding-box;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.vtl__viewport::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(53,87,77,.40), rgba(53,87,77,.85));
}
@media (max-width:1024px){
  .vtl__viewport::-webkit-scrollbar{ width:10px; }
}
@media (max-width:640px){
  .vtl__viewport::-webkit-scrollbar{ width:8px; }
}