/* ==========================================================================
   noticias.css
   --------------------------------------------------------------------------
   Módulo de noticias: el listado de la categoría (category-noticias.php) y la
   entrada suelta (single.php). Van juntos en un archivo porque son las dos
   caras de la misma sección y se editan a la vez.

   SE CARGA SOLO EN ESAS DOS VISTAS, con is_category() e is_singular() en
   functions.php, mismo criterio que calidad.css y servicio.css.

   Lo que NO está aquí, porque se reutiliza: la cabecera de página
   (.gt-page-header), la rejilla y la tarjeta de noticia (.gt-news-grid,
   .gt-news-card), el botón (.gt-btn) y la banda de CTA final
   (.gt-service-cta), todos en components.css.

   Mobile-first: los estilos base son los de móvil.
   ========================================================================== */


/* --------------------------------------------------------------------------
   .gt-archive — envoltorio del listado
   Fondo blanco y no gris: el pie del sitio ya es gris y la última sección
   antes de él no puede serlo, o se funden. Aquí el listado ES la última
   sección, así que va en blanco por obligación, no por gusto.
   -------------------------------------------------------------------------- */

.gt-archive {
  background-color: var(--color-bg);
  padding-block: 48px;
}


/* --------------------------------------------------------------------------
   .gt-pagination
   --------------------------------------------------------------------------
   paginate_links() con type 'list' devuelve un <ul class="page-numbers"> con
   <li> dentro, y cada uno lleva un <a class="page-numbers"> o, para la página
   actual, un <span class="page-numbers current">. Los estilos van sobre esas
   clases del núcleo, que son las que WordPress genera: inventarse otras
   obligaría a filtrar el HTML de la función.

   Los números son objetivos táctiles, así que miden 44px de lado — el mínimo
   recomendado para el dedo—, y no la altura del texto.
   -------------------------------------------------------------------------- */

.gt-pagination {
  margin-top: 40px;
}

.gt-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;

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

.gt-pagination li {
  display: flex;
}

.gt-pagination a.page-numbers,
.gt-pagination span.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 44px;
  height: 44px;
  padding-inline: 12px;

  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 4px;

  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  color: var(--color-primary);
  text-decoration: none;

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

.gt-pagination a.page-numbers:hover,
.gt-pagination a.page-numbers:focus-visible {
  background-color: var(--color-bg-alt);
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

/* Página actual: relleno azul macizo. Es estado, no acción, y por eso no es un
   enlace ni responde al ratón. */
.gt-pagination span.page-numbers.current {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
  font-weight: 600;
}

/* Los puntos suspensivos que mete WordPress cuando hay muchas páginas no son
   un botón: se les quita la caja para que no parezcan pulsables. */
.gt-pagination span.page-numbers.dots {
  min-width: 24px;
  border-color: transparent;
  color: rgba(0, 0, 0, 0.45);
}

/* "Anterior" y "Siguiente" llevan palabra en vez de número, así que necesitan
   más aire lateral que un dígito suelto. */
.gt-pagination .prev.page-numbers,
.gt-pagination .next.page-numbers {
  padding-inline: 18px;
}

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


/* --------------------------------------------------------------------------
   Estado vacío
   -------------------------------------------------------------------------- */

.gt-archive__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;

  padding-block: 32px;
  text-align: center;
}

.gt-archive__empty p {
  margin: 0;
  max-width: 46ch;

  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  text-wrap: pretty;
}


/* ==========================================================================
   Ampliaciones por breakpoint
   ========================================================================== */

@media (min-width: 768px) {

  .gt-archive     { padding-block: 64px; }
  .gt-pagination  { margin-top: 48px; }

}


@media (min-width: 1024px) {

  .gt-archive     { padding-block: 80px; }
  .gt-pagination  { margin-top: 56px; }

}


@media (prefers-reduced-motion: reduce) {

  .gt-pagination a.page-numbers,
  .gt-pagination span.page-numbers {
    transition: none;
  }

}



/* ==========================================================================
   ENTRADA SUELTA (single.php)
   ==========================================================================
   Una columna de lectura, sin barra lateral. En un texto corrido lo que manda
   es el ancho de línea: por encima de unos 75 caracteres el ojo pierde el
   renglón al saltar, y por debajo de 45 salta demasiadas veces. Todo lo de
   aquí abajo existe para sostener ese ancho.
   ========================================================================== */

/* EL AIRE DE ARRIBA ES MENOR QUE EL DE ABAJO, y no por capricho: arriba hay una
   franja azul que ya separa por color, y debajo viene el cierre de la página,
   que necesita despegarse del texto. Con los 40px iguales por los dos lados, la
   foto quedaba flotando entre el titular y su propia ficha. */
.gt-post {
  background-color: var(--color-bg);
  padding-block: 28px 40px;
}


/* La tipografía del cuerpo del artículo está en prose.css, con el nombre
   .gt-prose: la comparten la entrada y las páginas legales. */



/* --------------------------------------------------------------------------
   Navegación entre entradas
   -------------------------------------------------------------------------- */

.gt-post__nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;

  max-width: 72ch;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.gt-post__nav-link {
  display: block;
  padding: 16px 18px;

  background-color: var(--color-bg-alt);
  border-radius: 8px;

  /* Reservado desde el principio para que al aparecer en hover la caja no
     crezca y empuje a la de al lado. */
  border: 2px solid transparent;

  text-decoration: none;

  transition: border-color 0.2s ease, transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gt-post__nav-link:hover,
.gt-post__nav-link:focus-visible {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  text-decoration: none;
}

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

.gt-post__nav-label {
  display: block;
  margin-bottom: 4px;

  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent);
  color: color-mix(in srgb, var(--color-accent) 86%, #000);
}

.gt-post__nav-title {
  display: block;

  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-primary);
  text-wrap: pretty;
}

/* La entrada siguiente se alinea a la derecha en las dos columnas de
   escritorio: el sentido de lectura refuerza hacia dónde lleva cada una. */
.gt-post__nav-link--next {
  text-align: right;
}




@media (min-width: 768px) {

  .gt-post              { padding-block: 56px; }

  .gt-post__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Si solo hay una entrada contigua, ocupa su columna y no se estira a lo
     ancho: una caja del doble de ancho que su pareja se leería como otra cosa.
     Cuando la única es la siguiente, se va a la columna derecha. */
  .gt-post__nav-link--next:only-child {
    grid-column: 2;
  }

}


@media (min-width: 1024px) {

  .gt-post { padding-block: 40px 72px; }




}


@media (prefers-reduced-motion: reduce) {

  .gt-post__nav-link { transition: border-color 0.2s ease; }

  .gt-post__nav-link:hover,
  .gt-post__nav-link:focus-visible { transform: none; }

}


/* --------------------------------------------------------------------------
   El salto al pulsar un punto del índice.
   --------------------------------------------------------------------------
   scroll-margin-top deja aire por encima del apartado al que se salta: sin él
   el título aterriza pegado al borde superior de la ventana —o debajo de la
   cabecera del sitio— y parece que el enlace ha fallado.

   El desplazamiento suave va SOLO para quien no haya pedido movimiento
   reducido, y por eso se declara dentro de la consulta y no al revés.
   -------------------------------------------------------------------------- */


@media (prefers-reduced-motion: no-preference) {

  html {
    scroll-behavior: smooth;
  }

}


/* ==========================================================================
   Entrada: cabecera con foto, índice a la izquierda y cierre
   ==========================================================================
   Todo cuelga de .gt-article-hero y .gt-longform--article: el índice y la
   tipografía son compartidos con las páginas legales, y esas no cambian.
   ========================================================================== */

/* Mismo azul de marca, con profundidad: más oscuro hacia la esquina y una luz
   muy suave detrás de la foto. Sobre un azul plano la cabecera se ve vacía. */
.gt-article-hero.gt-page-header {
  padding-bottom: 40px;

  background-image:
    radial-gradient(60% 90% at 85% 15%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(135deg, var(--color-primary) 0%, #16303f 100%);
}

/* EN MÓVIL LA FOTO SE MONTA SOBRE EL CORTE entre el azul y el blanco. Apilada
   dentro del azul quedaba pegada al final, como un bloque suelto, y alargaba la
   cabecera. Por eso aquí no hay relleno inferior ni recorte, y el artículo
   empieza más abajo para dejarle sitio. */
.gt-article-hero--cover.gt-page-header {
  z-index: 1;
  padding-bottom: 0;
  overflow: visible;
}

.gt-article-hero--cover .gt-article-hero__cover {
  margin-bottom: -48px;
}

.gt-article-hero--cover + .gt-post {
  padding-top: 84px;
}

.gt-article-hero__inner {
  display: grid;
  gap: 24px;
}

.gt-article-hero__text {
  min-width: 0;
}

.gt-article-hero .gt-page-header__breadcrumb {
  margin-bottom: 14px;
}

/* Sin la raya lateral del resto de cabeceras: aquí el titular va encabezado por
   la miga y la fecha, y la raya lo sacaba de la línea de todo lo demás. */
.gt-article-hero .gt-page-header__title {
  margin-top: 0;
  padding-left: 0;
  border-left: 0;

  font-size: clamp(1.625rem, 7.2vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.gt-article-hero .gt-page-header__subtitle {
  margin-top: 14px;
  max-width: 60ch;

  font-size: 1.0625rem;
  line-height: 1.6;
}

.gt-article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;

  margin-bottom: 14px;

  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}

/* La foto se ve entera, a su proporción: recortarla para cuadrar la cabecera
   le quitaría justo lo que se quería enseñar. */
.gt-article-hero__cover {
  min-width: 0;
  margin: 0;
}

.gt-article-hero__img {
  display: block;
  width: 100%;
  height: auto;

  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);

  /* Un filo claro: cierra las fotos de cielo o pared blanca sobre el blanco. */
  outline: 1px solid rgba(255, 255, 255, 0.14);
  outline-offset: -1px;
}

.gt-article-hero__pie {
  margin-top: 10px;

  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

.gt-post {
  padding-block: 40px 56px;
}

/* El índice de la columna solo existe en escritorio; hasta ahí va plegado. */
.gt-longform--article .gt-longform__aside {
  display: none;
}

.gt-toc-details {
  margin-bottom: 28px;
  padding: 14px 18px;

  background-color: var(--color-bg);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

.gt-toc-details__summary {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
}

.gt-toc-details .gt-toc__list {
  margin-top: 14px;
}

.gt-longform--article .gt-prose {
  font-size: 1.0625rem;
}

.gt-longform--article .gt-prose h2 {
  font-size: 1.5rem;
}

.gt-longform--article .gt-prose h3 {
  font-size: 1.25rem;
}

.gt-longform--article .gt-prose figure img {
  border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Compartir
   -------------------------------------------------------------------------- */

.gt-share {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.gt-share__label {
  margin-right: 4px;

  font-size: 0.875rem;
  color: #5a5a5a;
}

.gt-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  background-color: var(--color-bg-alt);
  border-radius: 50%;
  color: var(--color-primary);

  transition: background-color 0.2s ease, color 0.2s ease;
}

.gt-share__link svg {
  width: 18px;
  height: 18px;
}

.gt-share__link:hover,
.gt-share__link:focus-visible {
  background-color: var(--color-primary);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Navegación y relacionados
   -------------------------------------------------------------------------- */

.gt-longform--article .gt-post__nav {
  max-width: none;
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}

.gt-longform--article .gt-post__nav-link {
  border-radius: 12px;
}

.gt-related {
  padding-block: 48px;
  background-color: var(--color-bg-alt);
}

.gt-related__title {
  margin: 0 0 24px;

  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--color-primary);
}

@media (min-width: 768px) {

  /* Desde tableta, titular y foto en paralelo: apilada, la foto medía 772px de
     ancho y la cabecera se iba a 860px de alto. */
  .gt-article-hero--cover.gt-page-header {
    padding-bottom: 48px;
    overflow: hidden;
  }

  .gt-article-hero--cover .gt-article-hero__cover {
    margin-bottom: 0;
  }

  .gt-article-hero--cover + .gt-post {
    padding-top: 40px;
  }

  .gt-article-hero__inner--cover {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
  }

  .gt-article-hero .gt-page-header__title {
    font-size: 1.875rem;
  }

  .gt-related { padding-block: 64px; }
  .gt-related__title { font-size: 1.75rem; }

  .gt-longform--article .gt-prose h2 { font-size: 1.75rem; }
  .gt-longform--article .gt-prose h3 { font-size: 1.375rem; }
}

@media (min-width: 1024px) {

  /* El tema padre pone `overflow-x: hidden` en body, y eso anula position: sticky
     del índice. El desbordamiento lateral ya lo recorta html con `clip`
     (layout.css). Solo desde aquí: por debajo no hay índice fijo. */
  body.single {
    overflow: visible;
  }

  .gt-article-hero.gt-page-header,
  .gt-article-hero--cover.gt-page-header {
    padding-bottom: 64px;
  }

  .gt-article-hero__inner--cover {
    gap: 56px;
  }

  .gt-article-hero .gt-page-header__title {
    font-size: 2.5rem;
    line-height: 1.15;
  }

  .gt-post,
  .gt-article-hero--cover + .gt-post {
    padding-block: 64px 72px;
  }

  /* El índice a la izquierda y el texto centrado en lo que queda, a su ancho
     de lectura. El texto no se estira: el sobrante se reparte a sus lados. */
  .gt-longform--article.gt-longform--toc {
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 56px;
    justify-content: stretch;
  }

  .gt-longform--article.gt-longform--toc .gt-longform__aside {
    display: block;
    grid-column: 1;
    grid-row: 1;

    /* Por debajo de la cabecera fija, que mide 60px. */
    top: 84px;
  }

  .gt-longform--article.gt-longform--toc .gt-longform__main {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
  }

  .gt-longform--article:not(.gt-longform--toc) .gt-longform__main {
    width: 100%;
    margin-inline: auto;
  }

  .gt-toc-details {
    display: none;
  }

  .gt-longform--article .gt-toc__list a {
    font-size: 0.875rem;
  }
}

@media (min-width: 1280px) {

  .gt-article-hero__inner--cover {
    gap: 72px;
  }

  .gt-article-hero .gt-page-header__title {
    font-size: 2.875rem;
  }

  .gt-article-hero .gt-page-header__subtitle {
    font-size: 1.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .gt-share__link {
    transition: none;
  }
}