/* Página «Qué es ARCA» — presentación del proyecto.
 *
 * Hoja propia para no seguir engordando catalogo.css. Reutiliza los tokens del
 * tema (--cat-*) y no redefine ninguno. Todo el movimiento se anula bajo
 * prefers-reduced-motion, al final del fichero.
 */

/* ------------------------------------------------------------------ hero */

/* .cat-about-hero era un hero completo por sí solo (grid, fondo, padding,
   tamaño de h1 propios) de antes de que esta cabecera se uniera al sistema
   .cat-hero (2026-08-14). Al añadir "cat-hero" a esta plantilla sin quitar
   esto, quedaron dos sistemas de hero activos a la vez sobre el mismo
   elemento; como este archivo se carga después de catalogo.css, ganaba
   siempre en los empates (padding, tamaño de h1), y esta página salía con
   medidas distintas a las otras 17. Confirmado en vivo: 29,6px de h1 y
   19,2px/16px de padding aquí frente a 32px y 56px/21,6px/32px en el resto.
   Se quitan aquí el grid, el padding, el fondo y el tamaño de h1 propios
   para que gobierne el sistema unificado; se conserva la maquetación de
   .cat-about-hero__figure (la imagen), que ahora cae en flujo normal
   después del texto en vez de en una segunda columna.

   Addenda 2026-08-14 (misma jornada): esta línea también fijaba el color
   del kicker a #f1cb6c, distinto del estándar #f0c76c que da
   ".cat-hero .cat-kicker" en catalogo.css (línea 8223). Se detectó al
   reconstruir y volver a medir en vivo, no en la primera pasada. Se quita
   para que el color lo gobierne también el sistema unificado. */

.cat-about-hero__lead {
  max-width: 62ch;
  margin: 0 0 1rem;
  color: #e4ebef;
  font-size: 1.02rem;
  line-height: 1.72;
}

.cat-about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.5rem;
  margin: 1.6rem 0 0;
}

/* Los botones salieron de la cabecera oscura a fondo crema el 2026-08-14:
   el dorado sobre crema no tiene contraste suficiente, se usa el rojo del
   tema, que es el color de enlace del cuerpo del catálogo. */
.cat-about-hero__actions .cat-text-link { color: var(--cat-red); }

/* Addenda 2026-08-14 (misma jornada, tras aviso del propietario con
   captura): al quitar el "display:grid" de ".cat-about-hero" (arreglo de
   antes), esta figura dejó de tener columna propia y su imagen, con
   "width:100%" y sin ningún max-width en escritorio (el max-width:18rem
   de abajo solo se aplicaba por debajo de 900px), pasaba a ocupar el
   ancho completo de la cabecera. Confirmado con captura: imagen
   desproporcionada. Se le pone un ancho máximo razonable en todos los
   anchos, no solo en móvil.

   Addenda posterior del mismo día: la figura se sacó del <header> en la
   plantilla, porque aun con el ancho limitado hacía esta cabecera mucho más
   alta que las otras 16. Ahora es una figura de página sobre fondo claro,
   así que el pie de foto pasa de gris claro a tinta suave (sobre crema, el
   gris claro era ilegible). */
.cat-about-hero__figure { max-width: 26rem; margin: 0 0 2.5rem; }

.cat-about-hero__figure img {
  display: block;
  width: 100%;
  border: 1px solid #8f7441;
  background: #fffdf8;
}

.cat-about-hero__figure figcaption {
  margin-top: .55rem;
  color: var(--cat-ink-soft);
  font-size: .72rem;
  line-height: 1.45;
}

/* -------------------------------------------------------------- secciones */

.cat-about-section {
  max-width: 78rem;
  margin: clamp(2.4rem, 5vw, 4rem) 0 0;
}

.cat-about-section h2 {
  max-width: 30ch;
  margin: .25rem 0 1.2rem;
  color: var(--cat-blue-deep);
  font: 650 clamp(1.7rem, 3.2vw, 2.6rem)/1.1 var(--cat-serif);
}

.cat-about-prose { max-width: min(100%, 62rem); }

.cat-about-prose p {
  margin: 0 0 1.05rem;
  color: var(--cat-ink);
  font-size: 1.01rem;
  line-height: 1.78;
}

.cat-about-prose strong { color: var(--cat-blue-deep); }

.cat-about-impacto-list {
  margin: 0 0 1.05rem;
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.cat-about-impacto-list li {
  color: var(--cat-ink);
  font-size: 1.01rem;
  line-height: 1.72;
}
.cat-about-impacto-list strong { color: var(--cat-blue-deep); }

.cat-about-source {
  max-width: 74ch;
  margin: .9rem 0 0;
  color: var(--cat-ink-soft);
  font-size: .8rem;
  line-height: 1.6;
}

.cat-about-links,
.cat-about-prose .cat-about-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.6rem;
}

.cat-about-section--closing {
  margin-bottom: 2.5rem;
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  border-left: 5px solid var(--cat-gold);
  background: #fbf8f0;
}

/* ------------------------------------------------------------- contadores */

.cat-about-counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  margin: 0 0 1.2rem;
  border: 1px solid var(--cat-line);
  background: var(--cat-line);
}

.cat-about-counter {
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.3rem;
  background: var(--cat-surface);
  transition: background .25s ease;
}

.cat-about-counter:hover { background: #fffaf0; }

.cat-about-counter strong {
  color: var(--cat-red);
  font: 2.5rem/1 var(--cat-serif);
  /* Evita el salto de ancho mientras el contador sube. */
  font-variant-numeric: tabular-nums;
}

.cat-about-counter span {
  margin-top: .45rem;
  color: var(--cat-blue-deep);
  font-weight: 700;
  font-size: .9rem;
}

.cat-about-counter small {
  margin-top: .2rem;
  color: var(--cat-ink-soft);
  font-size: .76rem;
  line-height: 1.4;
}

.cat-about-counters--data .cat-about-counter { background: #f7f4ec; }
.cat-about-counters--data .cat-about-counter:hover { background: #fffdf6; }
.cat-about-counters--data .cat-about-counter strong { color: var(--cat-blue); }

/* --------------------------------------------------- datos abiertos, hero */

.cat-about-data-hero {
  margin-top: clamp(2.4rem, 5vw, 4rem);
  padding: clamp(1.8rem, 4vw, 3rem);
  border-top: 5px solid var(--cat-gold);
  background:
    radial-gradient(120% 140% at 88% 0%, rgb(185 138 60 / 18%), transparent 58%),
    var(--cat-blue-deep);
  color: #fff;
}

.cat-about-data-hero .cat-kicker { color: #f1cb6c; }

.cat-about-data-hero h2 {
  max-width: 34ch;
  color: #fff;
}

.cat-about-data-hero .cat-about-prose p { color: #e4ebef; }
.cat-about-data-hero .cat-about-prose strong { color: #fff; }

.cat-about-data-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1.2rem, 3vw, 2.2rem);
  margin: 1.8rem 0 0;
}

.cat-about-data-kpi strong {
  display: block;
  color: #fff;
  font: 700 clamp(2.4rem, 5vw, 3.4rem)/1 var(--cat-serif);
  font-variant-numeric: tabular-nums;
}

.cat-about-data-kpi span {
  display: block;
  margin-top: .5rem;
  color: #e4ebef;
  font-size: .92rem;
  line-height: 1.45;
}

.cat-about-data-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.5rem;
  margin: 2rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgb(255 255 255 / 16%);
}

.cat-about-data-hero__actions .cat-text-link { color: #f1cb6c; }

/* --------------------------------------------------- los pueblos del ambito */

.cat-about-places {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .6rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.cat-about-place a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .2rem .6rem;
  height: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--cat-line);
  border-left: 3px solid var(--cat-gold);
  background: var(--cat-surface);
  color: var(--cat-blue-deep);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.cat-about-place a:hover,
.cat-about-place a:focus-visible {
  border-left-color: var(--cat-red);
  box-shadow: 0 6px 0 rgb(20 63 77 / 8%);
  transform: translateY(-2px);
}

.cat-about-place strong { font: 650 1.05rem var(--cat-serif); }

.cat-about-place__pop {
  grid-column: 1 / -1;
  color: var(--cat-ink-soft);
  font-size: .76rem;
}

.cat-about-place__go { color: var(--cat-red); font-weight: 800; }

/* -------------------------------------------------------------- grafico */

.cat-about-section--chart {
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
  border: 1px solid var(--cat-line);
  border-top: 5px solid var(--cat-red);
  background: var(--cat-surface);
}

.cat-about-chart { margin: 1.5rem 0 1.2rem; }

.cat-about-chart__canvas {
  min-height: 260px;
  background: #fbf8f0;
}

.cat-about-chart__svg { display: block; width: 100%; height: auto; }

.cat-about-chart__grid { stroke: #c9bda6; stroke-width: 1; }

.cat-about-chart__axis {
  fill: #55666d;
  font-family: var(--cat-sans);
  font-size: 13px;
}

.cat-about-chart__band { fill: rgb(142 36 43 / 8%); }

.cat-about-chart__band-label {
  fill: var(--cat-red);
  font-family: var(--cat-sans);
  font-size: 13px;
  font-weight: 700;
}

.cat-about-chart__line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cat-about-chart__line--1 { stroke: var(--cat-red); }
.cat-about-chart__line--2 { stroke: var(--cat-blue); }

.cat-about-chart__dot--1 { fill: var(--cat-red); }
.cat-about-chart__dot--2 { fill: var(--cat-blue); }

.cat-about-chart__serie-label {
  font-family: var(--cat-sans);
  font-size: 14px;
  font-weight: 800;
}

.cat-about-chart__serie-label--1 { fill: var(--cat-red); }
.cat-about-chart__serie-label--2 { fill: var(--cat-blue); }

.cat-about-chart figcaption {
  margin-top: .6rem;
  color: var(--cat-ink-soft);
  font-size: .8rem;
}

.cat-about-readings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  margin: 0 0 1.6rem;
  border: 1px solid var(--cat-line);
  background: var(--cat-line);
}

.cat-about-reading {
  padding: 1.1rem 1.25rem;
  background: #fbf8f0;
}

.cat-about-reading .cat-eyebrow { margin: 0 0 .3rem; }

.cat-about-reading strong {
  display: block;
  font: 2.1rem/1 var(--cat-serif);
  font-variant-numeric: tabular-nums;
}

.cat-about-reading--1 strong { color: var(--cat-red); }
.cat-about-reading--2 strong { color: var(--cat-blue); }

.cat-about-reading span {
  display: block;
  margin-top: .35rem;
  color: var(--cat-ink-soft);
  font-size: .82rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------- linea de vuelos */

.cat-about-flights {
  margin: 1.6rem 0;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--cat-line);
  background: #f7f4ec;
}

.cat-about-flights .cat-eyebrow { margin: 0 0 1rem; color: var(--cat-red); }

.cat-about-flights__track {
  display: flex;
  overflow-x: auto;
  margin: 0;
  padding: 0 0 .6rem;
  gap: 0;
  list-style: none;
  scrollbar-width: thin;
}

.cat-about-flight {
  position: relative;
  flex: 1 0 auto;
  min-width: 8.5rem;
  padding: 1.4rem .6rem 0 0;
}

/* La línea de tiempo: un trazo continuo detrás de los puntos. */
.cat-about-flight::before {
  content: "";
  position: absolute;
  top: .48rem;
  right: 0;
  left: 0;
  height: 2px;
  background: #cfc3ac;
}

.cat-about-flight:last-child::before { right: 50%; }
.cat-about-flight:first-child::before { left: 0; }

.cat-about-flight__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  border: 3px solid var(--cat-surface);
  border-radius: 50%;
  background: var(--cat-blue);
  box-shadow: 0 0 0 1px #cfc3ac;
}

.cat-about-flight--jcyl .cat-about-flight__dot { background: var(--cat-red); }

.cat-about-flight__label {
  display: block;
  max-width: 8rem;
  color: var(--cat-ink);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.35;
}

.cat-about-flight--jcyl .cat-about-flight__label { color: var(--cat-red-deep); }

/* ------------------------------------------------------------- acordeones */

.cat-about-accordions { margin-top: 1.4rem; }

.cat-about-details {
  border: 1px solid var(--cat-line);
  background: var(--cat-surface);
}

.cat-about-details + .cat-about-details { border-top: 0; }

.cat-about-details summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  color: var(--cat-blue-deep);
  cursor: pointer;
  font: 650 1.08rem var(--cat-serif);
  list-style: none;
  transition: background .2s ease;
}

.cat-about-details summary::-webkit-details-marker { display: none; }

.cat-about-details summary:hover { background: #fffaf0; }

.cat-about-details summary i {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border: 1px solid var(--cat-gold);
  color: var(--cat-red);
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 700;
  transition: transform .25s ease, background .25s ease;
}

.cat-about-details[open] summary { background: #f7f4ec; }
/* Blanco sobre --cat-gold daba 3.1:1 (la alerta de contraste que marca WAVE
   en los acordeones abiertos). var(--cat-ink) sobre el mismo dorado da 5.06:1. */
.cat-about-details[open] summary i { background: var(--cat-gold); color: var(--cat-ink); transform: rotate(45deg); }

.cat-about-details__body {
  padding: .2rem 1.2rem 1.3rem;
  border-top: 1px solid var(--cat-line);
}

.cat-about-details__body p {
  max-width: 74ch;
  margin: 1rem 0 0;
  color: var(--cat-ink);
  font-size: .98rem;
  line-height: 1.75;
}

.cat-about-details__body strong { color: var(--cat-blue-deep); }

.cat-about-details--data { margin-top: 1.4rem; }

/* Apertura suave del contenido del acordeón. */
.cat-about-details[open] .cat-about-details__body {
  animation: cat-about-open .28s ease;
}

@keyframes cat-about-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ chips */

.cat-about-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.cat-about-chips a {
  display: block;
  padding: .4rem .8rem;
  border: 1px solid var(--cat-line);
  background: #f7f4ec;
  color: var(--cat-blue-deep);
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.cat-about-chips a:hover,
.cat-about-chips a:focus-visible {
  border-color: var(--cat-red);
  background: #fff;
  color: var(--cat-red);
  transform: translateY(-2px);
}

/* ------------------------------------------------------------------ tabla */

.cat-about-table {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
  font-size: .87rem;
}

.cat-about-table caption {
  margin-bottom: .6rem;
  color: var(--cat-ink-soft);
  font-size: .8rem;
  text-align: left;
}

.cat-about-table th,
.cat-about-table td {
  padding: .45rem .7rem;
  border-bottom: 1px solid var(--cat-line);
  text-align: right;
}

.cat-about-table thead th { color: var(--cat-red); font-size: .76rem; text-transform: uppercase; }
.cat-about-table thead th:first-child,
.cat-about-table tbody th { text-align: left; }
.cat-about-table tbody th { color: var(--cat-blue-deep); font-variant-numeric: tabular-nums; }
.cat-about-table td { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ pasos */

.cat-about-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 0;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.cat-about-steps li {
  padding: 1.2rem 1.25rem;
  border-top: 4px solid var(--cat-gold);
  background: var(--cat-surface);
}

.cat-about-steps li + li { border-left: 1px solid var(--cat-line); }

.cat-about-steps__num {
  display: block;
  color: var(--cat-red);
  font: 1.5rem/1 var(--cat-serif);
}

.cat-about-steps strong {
  display: block;
  margin-top: .45rem;
  color: var(--cat-blue-deep);
  font-size: .98rem;
}

.cat-about-steps li > span:last-child {
  display: block;
  margin-top: .35rem;
  color: var(--cat-ink-soft);
  font-size: .82rem;
  line-height: 1.55;
}

/* ---------------------------------------------------------------- fuentes */

.cat-about-sources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .55rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.cat-about-sources li {
  padding: .8rem .95rem;
  border: 1px solid var(--cat-line);
  border-top: 3px solid var(--cat-blue);
  background: #f7f4ec;
}

.cat-about-sources small { display: block; color: var(--cat-red); font-size: .7rem; text-transform: uppercase; }
.cat-about-sources strong { display: block; margin-top: .2rem; color: var(--cat-blue-deep); font: 650 .98rem var(--cat-serif); }
.cat-about-sources span { display: block; margin-top: .25rem; color: var(--cat-ink-soft); font-size: .76rem; line-height: 1.45; }

/* --------------------------------------------------- aparicion escalonada */

.will-reveal { opacity: 0; transform: translateY(14px); }

.will-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s ease;
}

/* Entrada nativa por scroll, sin JS: donde el navegador la soporta, las
   secciones aparecen al entrar en viewport. Sin soporte (@supports not) el
   contenido queda visible desde el primer instante -- nunca se oculta a la
   espera de una animacion que podria no llegar a activarse. */
@supports (animation-timeline: view()) {
  .cat-about-section:not(.cat-about-hero),
  .cat-about-data-kpi,
  .cat-about-counter {
    animation: cat-about-scroll-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }

  @keyframes cat-about-scroll-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .cat-about-hero { grid-template-columns: 1fr; }
  .cat-about-hero__figure { max-width: 18rem; }
  .cat-about-steps li + li { border-left: 0; }
}

@media (max-width: 620px) {
  .cat-about-counter strong { font-size: 2.1rem; }
  .cat-about-places { grid-template-columns: 1fr; }
  .cat-about-data-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
  .cat-about-data-kpi strong { font-size: 2.3rem; }
}

/* --------------------------------------------- respeto al reduced motion */

@media (prefers-reduced-motion: reduce) {
  .will-reveal,
  .will-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cat-about-place a,
  .cat-about-chips a,
  .cat-about-counter,
  .cat-about-details summary,
  .cat-about-details summary i {
    transition: none;
  }

  .cat-about-place a:hover,
  .cat-about-chips a:hover { transform: none; }

  .cat-about-details[open] .cat-about-details__body { animation: none; }

  .cat-about-section:not(.cat-about-hero),
  .cat-about-data-kpi,
  .cat-about-counter {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------ sello y lista de accesibilidad */

/* Sello de conformidad. Reescrito 2026-08-14: los colores anteriores
   (#f1cb6c sobre blanco al 6%, cifra en #fff, nota en #c8d3d9) estaban
   pensados para vivir dentro de la cabecera azul. Al sacarlo a fondo crema
   quedaba ilegible —era el peor fallo de contraste del sitio, y precisamente
   en la página que declara conformidad de contraste—. Ahora usa la tinta
   oscura del tema sobre crema: el azul profundo sobre #fffdf8 supera con
   holgura el 4.5:1 que exige WCAG AA para texto normal. */
.cat-a11y-badge {
  display: grid;
  justify-items: center;
  align-content: center;
  max-width: 22rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 1.4rem 1.2rem;
  border: 2px solid var(--cat-gold);
  border-left: 6px solid var(--cat-gold);
  background: #fffdf8;
  text-align: center;
}

.cat-a11y-badge__level {
  display: grid;
  gap: .1rem;
  margin: 0;
  color: var(--cat-red-deep);
  font-family: var(--cat-sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cat-a11y-badge__level strong {
  color: var(--cat-blue-deep);
  font: 650 3rem/1 var(--cat-serif);
  letter-spacing: 0;
}

.cat-a11y-badge__note {
  margin: .8rem 0 0;
  color: var(--cat-ink);
  font-size: .78rem;
  line-height: 1.45;
}

.cat-a11y-list {
  max-width: 74ch;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.cat-a11y-list li {
  padding: .9rem 0 .9rem 1.2rem;
  border-left: 3px solid var(--cat-gold);
  color: var(--cat-ink);
  font-size: .98rem;
  line-height: 1.75;
}

.cat-a11y-list li + li { margin-top: .6rem; }

.cat-a11y-list strong { color: var(--cat-blue-deep); }

kbd {
  padding: .1rem .4rem;
  border: 1px solid var(--cat-line);
  border-bottom-width: 2px;
  background: #f7f4ec;
  font-family: var(--cat-sans);
  font-size: .85em;
}