/* ==========================================================================
   compania.css — la página /compania/
   ==========================================================================
   Solo la cronología necesita estilos propios. El texto de Estrategia usa
   .gt-prose, la misma prosa de los artículos y las páginas legales, y el cierre
   usa la banda estándar del sitio.

   Se carga únicamente en esta página. Ver functions.php.
   ========================================================================== */

/* Las tres secciones son destino de salto: desde el menú —Compañía despliega
   Historia, Estrategia y Equipo humano— y desde el pie. Sin scroll-margin-top,
   la sección aterriza pegada al borde y por debajo de 1024px, donde la cabecera
   del padre es fija, queda además tapada por ella. */
.gt-compania {
  background-color: var(--color-bg);
  padding-block: 40px;
  scroll-margin-top: 76px;
}

.gt-compania--alt {
  background-color: var(--color-bg-alt);
}

.gt-compania__lead {
  margin: 0 0 28px;

  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-primary);
}

/* 1200px POR DECISIÓN DEL USUARIO (2026-08-24). Estuvo en 800 —la medida de
   lectura del sitio, la misma que un artículo— y lo descartó: al lado de una
   cronología que ocupa los 1.232px, el texto se veía estrecho.

   LO QUE CUESTA, dicho aquí porque no se ve en pantalla: a 17px caben unas 130
   letras por renglón, muy por encima de las 80 que marca la referencia de
   accesibilidad. En un renglón tan largo, al saltar de línea el ojo pierde el
   principio del siguiente.

   Se compensa como en el artículo: con el interlineado de 1.8 que ya trae
   .gt-prose en escritorio, que es lo único que de verdad ayuda en una medida
   larga. Si algún día se estrecha, ver [[ancho-de-linea-de-lectura]]. */
.gt-compania__texto {
  max-width: 1200px;
}


/* --------------------------------------------------------------------------
   .gt-timeline-nav — el índice de años
   --------------------------------------------------------------------------
   Catorce años en varias pantallas de scroll: sin esto, la cronología solo se
   puede leer entera. Con los años delante también se puede consultar.

   Fichas pequeñas y no una lista con comas: cada una es un objetivo pulsable de
   sobra en un teléfono, y en fila envuelven solas cuando no caben.
   -------------------------------------------------------------------------- */

/* El índice no es parte de la cronología: es lo que hay ANTES de ella. Con poco
   aire debajo se leía como si 2005 colgara de él, y no es eso: uno es el mando y
   la otra el contenido. */
.gt-timeline-nav {
  margin: 0 0 44px;
}

.gt-timeline-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin: 0;
  padding: 0;
  list-style: none;
}

/* EN ROJO, y en el rojo OSCURECIDO —el mismo de los asteriscos y de los enlaces
   de acción—, no en el acento puro: sobre blanco, el acento tal cual no llega al
   contraste exigible para un texto de 14px. La regla del sitio es que el rojo
   decora pero no escribe; aquí escribe, así que hay que oscurecerlo. */
.gt-timeline-nav a {
  display: block;
  padding: 7px 14px;

  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  font-variant-numeric: tabular-nums;

  color: #a03836;
  color: color-mix(in srgb, var(--color-accent) 86%, #000);

  background-color: #fdf5f5;
  background-color: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg));
  border: 1px solid #e9b9b8;
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-radius: 999px;

  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Al pasar por encima se rellena del todo: el año que se va a pulsar se ve sin
   tener que comparar dos rojos parecidos. */
.gt-timeline-nav a:hover,
.gt-timeline-nav a:focus-visible {
  color: var(--color-bg);

  background-color: #a03836;
  background-color: color-mix(in srgb, var(--color-accent) 86%, #000);
  border-color: #a03836;
  border-color: color-mix(in srgb, var(--color-accent) 86%, #000);
}

.gt-timeline-nav a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   .gt-timeline — la cronología
   --------------------------------------------------------------------------
   UNA RAYA VERTICAL Y LOS AÑOS COLGANDO DE ELLA. Es la forma que todo el mundo
   reconoce como «línea de tiempo», y la que deja claro de un vistazo que 2005
   está antes que 2025 aunque solo se lea media pantalla.

   La raya y los puntos son PSEUDOELEMENTOS, no marcado: si el CSS no cargara,
   queda una lista de años con sus hitos dentro, que se entiende igual.

   Va de más antiguo a más nuevo, que es como se lee una historia. El orden lo
   decide el plugin; aquí no se invierte nada.
   -------------------------------------------------------------------------- */

.gt-timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 24px;
  list-style: none;
}

/* La raya. Arranca en el primer año y muere en el último: si se dejara correr
   hasta el borde del bloque, parecería que la historia sigue y no hay nada. */
.gt-timeline::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 4px;

  width: 2px;
  background-color: #dde3e8;
  background-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

/* EL AIRE ENTRE AÑOS ES EL DOBLE QUE ENTRE FICHAS, y esa proporción es la que
   hace que se lean como bloques: con 32px arriba y 12 entre fichas, la última de
   2010 y el año 2012 quedaban casi a la misma distancia que dos fichas del mismo
   año, y la cronología se leía como una lista seguida. */
.gt-timeline__group {
  position: relative;
  padding-bottom: 52px;
}

.gt-timeline__group:last-child {
  padding-bottom: 0;
}

/* El punto del año, encima de la raya. */
.gt-timeline__group::before {
  content: "";
  position: absolute;
  top: 9px;
  left: -24px;

  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

/* EL AÑO, EN ROJO. Es lo único de la cronología que no es contenido sino
   estructura —dice dónde estás—, y en rojo se separa de los treinta títulos
   azules de las fichas. Oscurecido, por lo mismo de arriba: aquí el rojo escribe.

   Es además lo que hace que la página deje de leerse toda azul sin tener que
   pintar de rojo nada que sea contenido. */
.gt-timeline__year {
  margin: 0 0 14px;

  font-family: var(--font-primary);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;

  color: #a03836;
  color: color-mix(in srgb, var(--color-accent) 86%, #000);
}

.gt-timeline__items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;

  margin: 0;
  padding: 0;
  list-style: none;
}


/* --------------------------------------------------------------------------
   .gt-milestone — un hito
   --------------------------------------------------------------------------
   Ficha con filo, como las tarjetas de sede y las filas de documento: es el
   lenguaje del sitio para «una unidad de información que se lee entera».
   -------------------------------------------------------------------------- */

/* EN GRIS Y SIN FILO. Una ficha blanca sobre fondo blanco necesita un borde para
   existir, y treinta bordes seguidos son treinta rectángulos dibujados. Con el
   gris del sitio la ficha se ve por su fondo, el filo sobra y la cronología pasa
   de parecer una tabla a parecer una serie de bloques. */
.gt-milestone {
  padding: 16px 18px;

  background-color: var(--color-bg-alt);
  border: 0;
  border-radius: 3px;
}

.gt-milestone__title {
  margin: 0 0 8px;

  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-primary);
}

/* 14px, un peldaño POR DEBAJO del título de su ficha y dos por debajo del cuerpo
   del sitio. No es texto que se lea seguido: son veintiséis fichas que se
   recorren de un vistazo, y a 15px cada una pedía la misma atención que un
   artículo. */
.gt-milestone__text {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* El párrafo que trae el editor no añade su propio margen: la ficha ya lo pone. */
.gt-milestone__text p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.gt-milestone__text p + p {
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   El enlace a la noticia
   --------------------------------------------------------------------------
   En rojo oscurecido y con flecha, como el resto de enlaces de acción del sitio.
   Es el acento rebajado, no el puro: sobre blanco, el acento tal cual no llega
   al contraste exigible para un texto de 15px.
   -------------------------------------------------------------------------- */

.gt-milestone__news {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin-top: 12px;

  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;

  color: #a03836;
  color: color-mix(in srgb, var(--color-accent) 86%, #000);
}

.gt-milestone__news:hover,
.gt-milestone__news:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gt-milestone__news:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}


@media (min-width: 768px) {

  .gt-compania { padding-block: 64px; }

  .gt-timeline-nav { margin-bottom: 56px; }

  .gt-timeline { padding-left: 32px; }

  .gt-timeline::before { left: 6px; }

  .gt-timeline__group::before {
    left: -32px;
    width: 14px;
    height: 14px;
    top: 8px;
  }

  .gt-timeline__group { padding-bottom: 72px; }

  .gt-timeline__year { font-size: 1.625rem; }

  /* DOS COLUMNAS de hitos desde tablet. Los años densos —2010 con cinco, 2024
     con cuatro— se recorren de un vistazo en vez de en scroll; y los años de un
     solo hito no se ven raros, porque la ficha ocupa su columna y ya está. */
  .gt-timeline__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter);
  }

  .gt-milestone { padding: 20px 22px; }

}


@media (min-width: 1024px) {

  /* EL AÑO SE VA A SU PROPIA COLUMNA Y SE QUEDA PEGADO ARRIBA mientras pasan sus
     hitos. En 2010, con cinco fichas, para cuando se llega a la última el año ya
     se ha perdido de vista y se lee sin saber de cuándo se está hablando.

     `align-self: start` es lo que permite que `position: sticky` funcione dentro
     de una rejilla: sin él, la celda se estira a lo alto de la fila y no hay
     recorrido donde pegarse. */
  .gt-timeline__group {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    column-gap: var(--gutter);
  }

  .gt-timeline__marker {
    position: sticky;
    top: 24px;
    align-self: start;
  }

  .gt-timeline__year {
    margin: 0;
    font-variant-numeric: tabular-nums;
  }

  /* El punto vuelve a la altura del año, que ahora manda en su propia columna. */
  .gt-timeline__group::before {
    top: 12px;
  }

}


/* --------------------------------------------------------------------------
   El año que no existe: «…»
   --------------------------------------------------------------------------
   Cierra la cronología sin cerrarla. Va más flojo que los años de verdad —no es
   un año, es una promesa— y sin ficha al lado.
   -------------------------------------------------------------------------- */

.gt-timeline__group--sigue {
  padding-bottom: 0;
}

.gt-timeline__group--sigue .gt-timeline__year {
  margin: 0;
  color: #c9a2a1;
  color: color-mix(in srgb, var(--color-accent) 45%, var(--color-bg));
}

/* Su punto también, para que no compita con el del último año real. */
.gt-timeline__group--sigue::before {
  background-color: #e3c4c3;
  background-color: color-mix(in srgb, var(--color-accent) 32%, var(--color-bg));
}