/* ==========================================================================
   cronologiaISA.css — Componente "CronologiaISA"
   ==========================================================================
   Hoja de estilos EXCLUSIVA de cronologiaISA.html. No modifica ni depende de
   ningún selector de los CSS existentes del proyecto (variables.css,
   base.css, layout.css, components.css, utilities.css, icons.css,
   animations.css). Reutiliza ÚNICAMENTE las variables de diseño ya
   definidas en variables.css (--color-primary, --color-secondary,
   --font-heading, --font-body, etc.) para heredar la paleta e identidad
   tipográfica del sitio sin duplicar valores ni agregar fuentes externas.

   Todas las clases están encapsuladas bajo el prefijo "cronologia-isa"
   (BEM) para evitar cualquier colisión con clases utilitarias del resto
   del proyecto (ej. .item, .content, .text ya podrían existir en otro
   contexto — aquí siempre van como .cronologia-isa__item, etc.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Contenedor de página y encabezado introductorio
   -------------------------------------------------------------------------- */
#cronologia-main{
  padding-top: 5rem; /* pt-20 — idéntico al <main> de index.html; el hero es su primer hijo */
  padding-bottom: 5rem;
  background: var(--color-bg, #f4f4f4);
  min-height: 60vh;
}

.cronologia-isa-wrapper{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.cronologia-isa-intro{
  text-align: center;
  max-width: 46rem;
  margin: 0 auto 2.75rem;
}
.cronologia-isa-intro__eyebrow{
  display: inline-block;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-secondary, #800040);
  margin-bottom: .75rem;
}
.cronologia-isa-intro__title{
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--color-primary, #053f87);
  margin-bottom: .75rem;
  line-height: 1.2;
}
.cronologia-isa-intro__subtitle{
  font-family: var(--font-body);
  color: var(--gray-600, #4b5563);
  font-size: 1rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   2. Tarjeta principal — fondo azul, borde rojo delgado, esquinas redondeadas
   -------------------------------------------------------------------------- */
.cronologia-isa{
  position: relative;
  background: linear-gradient(160deg, var(--color-primary, #053f87) 0%, #041d3f 100%);
  border: 1.5px solid var(--color-secondary, #800040);
  border-radius: 22px;
  padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.25rem, 5vw, 3.5rem);
  box-shadow: 0 25px 50px -12px rgba(4, 20, 46, 0.45);
  overflow: hidden;

  /* Animación de entrada del CONTENEDOR (se activa por JS agregando .is-visible) */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.cronologia-isa.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Fondo sólido en degradado azul de marca (sin textura de cuadrícula) */

/* --------------------------------------------------------------------------
   3. Estructura de la lista (grid: logo | línea+hito | contenido)
   -------------------------------------------------------------------------- */
.cronologia-isa__list{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 126px 40px 1fr;
  column-gap: clamp(.75rem, 2.5vw, 1.75rem);
}

.cronologia-isa__item{
  display: contents; /* el <li> es semántico pero no altera el grid */
}

/* -- Columna de logos ------------------------------------------------- */
.cronologia-isa__logo-col{
  grid-column: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: .15rem;
}
.cronologia-isa__logo-frame{
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 3px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .55rem;
  overflow: hidden; /* nunca deja que la imagen se salga del círculo, sin importar su proporción */

  /* Animación de logos */
  opacity: 0;
  transform: scale(.75);
  transition: opacity .6s ease, transform .6s cubic-bezier(.34,1.56,.64,1), border-color .3s ease, box-shadow .3s ease;
}
.cronologia-isa__item.is-visible .cronologia-isa__logo-frame{
  opacity: 1;
  transform: scale(1);
}
.cronologia-isa__logo-frame:hover{
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 0 0 6px rgba(255,255,255,.05);
}
.cronologia-isa__logo{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* ajusta la imagen ENTERA dentro del círculo, sin recortarla ni desbordarla, sin importar su proporción original */
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.cronologia-isa__logo-fallback{
  font-family: var(--font-body);
  font-size: .6rem;
  color: rgba(255,255,255,.5);
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
  padding: .25rem;
}

/* Etapa 3: logotipo actual — el color del círculo ya NO se diferencia de
   los otros 2 (los 3 comparten el mismo fondo/borde blanco translúcido);
   el único diferenciador que queda es el brillo pulsante (animación), no
   un color de círculo distinto. */
.cronologia-isa__logo-frame--current{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}
.cronologia-isa__item--current.is-visible .cronologia-isa__logo-frame--current{
  animation: cronologiaCurrentGlow 2.6s ease-in-out .6s infinite;
}
@keyframes cronologiaCurrentGlow{
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,184,0,.35); }
  50%      { box-shadow: 0 0 0 15px rgba(255,184,0,0); }
}

/* -- Columna de línea vertical + hito ----------------------------------- */
.cronologia-isa__marker-col{
  grid-column: 2;
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 1.65rem; /* centra el hito con el año */
}
.cronologia-isa__marker-col::before,
.cronologia-isa__marker-col::after{
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  background: rgba(255,255,255,.22);
  transform: translateX(-50%);
  transform-origin: top;
  /* Animación de la línea vertical (crece hacia abajo) */
  transform: translateX(-50%) scaleY(0);
  transition: transform .7s cubic-bezier(.65,0,.35,1);
}
.cronologia-isa__marker-col::before{ top: 0; bottom: 50%; }
.cronologia-isa__marker-col::after{ top: 50%; bottom: -1.5px; }
.cronologia-isa__item.is-visible .cronologia-isa__marker-col::before,
.cronologia-isa__item.is-visible .cronologia-isa__marker-col::after{
  transform: translateX(-50%) scaleY(1);
}
.cronologia-isa__item:first-child .cronologia-isa__marker-col::before{ display: none; }
.cronologia-isa__item:last-child .cronologia-isa__marker-col::after{ display: none; }

.cronologia-isa__marker{
  position: relative;
  z-index: 2;
  width: 22.5px;
  height: 22.5px;
  border-radius: 50%;
  background: var(--color-primary, #053f87);
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);

  /* Animación de los hitos */
  opacity: 0;
  transform: scale(.4);
  transition: opacity .5s ease .15s, transform .5s cubic-bezier(.34,1.56,.64,1) .15s;
}
.cronologia-isa__item.is-visible .cronologia-isa__marker{
  opacity: 1;
  transform: scale(1);
}
.cronologia-isa__marker--current{
  background: var(--color-accent, #ffb800);
  border-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(255,184,0,.2);
}

/* -- Columna de contenido ------------------------------------------------ */
.cronologia-isa__content{
  grid-column: 3;
  padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.cronologia-isa__item:last-child .cronologia-isa__content{ padding-bottom: 0; }

.cronologia-isa__year{
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: .3rem;

  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .55s ease .05s, transform .55s cubic-bezier(.16,1,.3,1) .05s;
}
.cronologia-isa__item.is-visible .cronologia-isa__year{
  opacity: 1;
  transform: translateX(0);
}

.cronologia-isa__period{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #ec7c9e; /* variante clara del rojo/borgoña de marca (--color-secondary), contraste AA verificado (5.28:1) sobre el fondo oscuro de la tarjeta */
  margin-bottom: .9rem;

  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .55s ease .15s, transform .55s cubic-bezier(.16,1,.3,1) .15s;
}
.cronologia-isa__item.is-visible .cronologia-isa__period{
  opacity: 1;
  transform: translateX(0);
}

.cronologia-isa__text{
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.75;
  color: rgba(255,255,255,.82);
  max-width: 46rem;
  margin-bottom: .85rem;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.cronologia-isa__text:last-of-type{ margin-bottom: 0; }
.cronologia-isa__item.is-visible .cronologia-isa__text{
  opacity: 1;
  transform: translateY(0);
}
/* Retraso progresivo entre párrafos del mismo bloque (animación progresiva de textos) */
.cronologia-isa__text:nth-of-type(1){ transition-delay: .22s; }
.cronologia-isa__text:nth-of-type(2){ transition-delay: .34s; }
.cronologia-isa__text:nth-of-type(3){ transition-delay: .46s; }
.cronologia-isa__text:nth-of-type(4){ transition-delay: .58s; }

.cronologia-isa__signature{
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: .9rem;
  color: var(--color-accent, #ffb800);
  margin-top: 1.5rem;

  opacity: 0;
  transition: opacity .6s ease .55s;
}
.cronologia-isa__signature-company{
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-top: .2rem;

  opacity: 0;
  transition: opacity .6s ease .65s;
}
.cronologia-isa__item.is-visible .cronologia-isa__signature,
.cronologia-isa__item.is-visible .cronologia-isa__signature-company{
  opacity: 1;
}

/* -- Separadores horizontales entre etapas -------------------------------- */
.cronologia-isa__divider{
  grid-column: 1 / -1;
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: .25rem 0 clamp(1.5rem, 3.5vw, 2.25rem) 0;

  /* Animación del separador: se dibuja de izquierda a derecha */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s cubic-bezier(.65,0,.35,1);
}
.cronologia-isa__divider.is-visible{
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   4. Accesibilidad — respeta prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .cronologia-isa,
  .cronologia-isa__logo-frame,
  .cronologia-isa__marker-col::before,
  .cronologia-isa__marker-col::after,
  .cronologia-isa__marker,
  .cronologia-isa__year,
  .cronologia-isa__period,
  .cronologia-isa__text,
  .cronologia-isa__signature,
  .cronologia-isa__signature-company,
  .cronologia-isa__divider{
    transition-duration: .01ms !important;
    animation: none !important;
  }
  .cronologia-isa,
  .cronologia-isa__logo-frame,
  .cronologia-isa__marker-col::before,
  .cronologia-isa__marker-col::after,
  .cronologia-isa__marker,
  .cronologia-isa__year,
  .cronologia-isa__period,
  .cronologia-isa__text,
  .cronologia-isa__divider{
    opacity: 1 !important;
    transform: none !important;
  }
  .cronologia-isa__signature,
  .cronologia-isa__signature-company{
    opacity: 1 !important;
  }
}

/* ==========================================================================
   5. RESPONSIVE — breakpoint específico para móvil (no es un "encogimiento"
   proporcional: reestructura logo+línea+contenido en una sola columna con
   riel izquierdo, conservando jerarquía, fechas y colores)
   ========================================================================== */
@media (max-width: 640px){
  #cronologia-main{ padding-top: 5.5rem; }

  .cronologia-isa{
    padding: 1.5rem 1rem 1.75rem;
    border-radius: 16px;
  }

  /* Riel de línea temporal a la izquierda, logo compacto junto al texto:
     se reordenan los TRACKS del grid, sin duplicar ni mover elementos del DOM. */
  .cronologia-isa__list{
    grid-template-columns: 26px 69px 1fr;
    column-gap: .65rem;
  }

  .cronologia-isa__marker-col{ grid-column: 1; padding-top: .3rem; }
  .cronologia-isa__logo-col{ grid-column: 2; padding-top: 0; }
  .cronologia-isa__content{ grid-column: 3; }

  .cronologia-isa__logo-frame{ width: 69px; height: 69px; padding: .35rem; }

  .cronologia-isa__year{ font-size: 1.25rem; }
  .cronologia-isa__period{ font-size: .78rem; margin-bottom: .6rem; }
  .cronologia-isa__text{ font-size: .88rem; line-height: 1.65; }
}

/* --------------------------------------------------------------------------
   6. Utilidades puntuales del hero de esta página (NO existen en el
   utilities.css compartido del proyecto, y no debemos tocarlo — se generan
   aquí, exclusivas de cronologiaISA.html).
   -------------------------------------------------------------------------- */
.h-\[48vh\]{ height:48vh; }
.min-h-\[360px\]{ min-height:360px; }