/* CODECSA — índice editorial.
 *
 * El sistema sale del símbolo de la marca: un barrido radial de teselas que va
 * del cian al azul. De ahí salen las tres reglas del sitio:
 *
 *   1. Tesela rectangular de canto recto. Nada de esquinas redondeadas.
 *   2. El barrido es una progresión, y una progresión mide. Aquí mide potencia.
 *   3. Anillos concéntricos = niveles: familia de producto -> variantes.
 *
 * Los tres azules de la marca son claros. Ninguno sirve para texto sobre
 * blanco: el cian da 1.66:1. El contraste de cada token contra cada fondo donde
 * se usa está medido en tools/contraste.py y anotado aquí al lado.
 */

:root {
  --papel:        #FFFFFF;
  --papel-2:      #F5F6F8;
  --tinta:        #121418;  /* 18.44:1 sobre papel   AAA */
  --tinta-suave:  #55595F;  /*  7.05:1 sobre papel   AAA */
  --tenue:        #6A6F77;  /*  5.16:1 sobre papel   AA  */
  --regla:        #DCDEE3;  /*  decorativo, nunca texto  */
  --enlace:       #2B44C4;  /*  7.70:1 sobre papel   AAA */
  --papel-tenue:  #9BA0A8;  /*  7.01:1 sobre tinta   AAA */

  /* el barrido del símbolo, de cian a azul: 37 grados de matiz */
  --barrido-0:    #62D8F4;
  --barrido-1:    #5596ED;
  --barrido-2:    #4B68E5;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --margen: clamp(1.25rem, 5vw, 5rem);
  --ancho:  76rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--enlace); }
h1, h2, h3 { margin: 0; font-weight: 400; }

.env { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.saltar {
  position: absolute; left: var(--margen); top: -4rem; z-index: 10;
  background: var(--tinta); color: var(--papel);
  padding: .6rem 1rem; text-decoration: none;
  transition: top .15s;
}
.saltar:focus { top: .75rem; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--enlace);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- cabecera
 * Es el encabezado corriente de un libro, no una barra de navegación que se
 * transforma: la marca a la izquierda, el título de sección a la derecha, y
 * una regla debajo. No cambia de estado al hacer scroll — esa transformación
 * ya la usaron los tres proyectos anteriores.
 */
.cabecera {
  position: sticky; top: 0; z-index: 5;
  background: var(--papel);
  border-bottom: 1px solid var(--regla);
}
.cabecera .env {
  display: flex; align-items: center; gap: .5rem 1rem;
  min-height: 4rem; justify-content: space-between;
  flex-wrap: wrap; padding-block: .5rem;
}
.marca { display: inline-flex; flex: 0 0 auto; }
.marca img { height: 34px; width: auto; }
.menu {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: .375rem clamp(.75rem, 3vw, 1.75rem);
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
}
.menu a { color: var(--tinta-suave); text-decoration: none; white-space: nowrap; }
.menu a:hover, .menu a[aria-current] { color: var(--tinta); text-decoration: underline; text-underline-offset: .3em; }

/* ---------------------------------------------------------------- portada */
.portada { padding-block: clamp(3rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4.5rem); }
.encima {
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tenue); margin: 0 0 1.75rem;
}
.portada h1 {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 6.2vw, 4.25rem);
  line-height: 1.08; letter-spacing: -.015em;
  max-width: 19ch; text-wrap: balance;
}
.entrada {
  margin: 1.75rem 0 0; max-width: 52ch;
  font-size: clamp(1rem, 1.6vw, 1.125rem); color: var(--tinta-suave);
}

/* ------------------------------------------------------------------ índice
 * El recurso central del sitio: el catálogo presentado como el índice de un
 * libro, con puntos conductores. El punteado es un pseudoelemento que crece
 * para llenar el hueco, así que se adapta a cualquier ancho sin medir nada.
 */
.indice { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--regla); }
.indice li { border-bottom: 1px solid var(--regla); }
.indice a {
  display: flex; align-items: baseline; gap: .75rem;
  padding-block: 1rem; text-decoration: none; color: var(--tinta);
}
.indice a:hover .indice-nombre { text-decoration: underline; text-underline-offset: .25em; }
.indice-nombre { font-family: var(--serif); font-size: clamp(1.125rem, 2.4vw, 1.5rem); }
.indice-puntos {
  flex: 1 1 auto; min-width: 1.5rem;
  border-bottom: 1px dotted var(--regla);
  transform: translateY(-.25em);
}
.indice-cuenta {
  flex: 0 0 auto; font-size: .8125rem; color: var(--tenue);
  letter-spacing: .04em; white-space: nowrap;
}

/* ------------------------------------------------------------------ bandas */
.banda { padding-block: clamp(2.75rem, 7vw, 5rem); border-top: 1px solid var(--regla); }
.banda-gris { background: var(--papel-2); }
.banda-tinta { background: var(--tinta); color: var(--papel); border-top: 0; }
.banda-tinta a { color: var(--barrido-0); }        /* 11.10:1 sobre tinta AAA */
.banda-tinta .rotulo { color: var(--papel-tenue); }

.rotulo {
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tenue); margin: 0 0 1.5rem;
}
.banda h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  line-height: 1.15; max-width: 24ch; text-wrap: balance;
}
.banda p { max-width: 58ch; color: inherit; }
.banda-gris p, .banda p { color: var(--tinta-suave); }
.banda-tinta p { color: var(--papel-tenue); }

/* --------------------------------------------------------- muro de marcas
 * Tipográfico, no con logotipos: CODECSA no entregó los kits de marca de los
 * fabricantes y publicar sus logotipos afirmaría una relación que no está
 * documentada. "Marcas en catálogo" es verdad y no compromete a nadie.
 */
.marcas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.marcas li {
  border: 1px solid var(--regla); padding: .55rem 1rem;
  font-size: .9375rem; letter-spacing: .01em;
}
.banda-tinta .marcas li { border-color: #33373F; }

/* ----------------------------------------------------------------- catálogo
 * Renglones, no tarjetas. Con fotos de 269 a 673 px de lado la miniatura chica
 * se ve nítida y una tarjeta grande no, y además el dato manda sobre la foto.
 */
.catalogo { padding-block: clamp(2rem, 5vw, 3.5rem); }
.catalogo-doble { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }

.riel { position: sticky; top: 5.5rem; }
.riel ol { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.riel li + li { margin-top: .5rem; }
.riel a { color: var(--tenue); text-decoration: none; display: block; }
.riel a:hover { color: var(--tinta); }
.riel a[aria-current="true"] { color: var(--tinta); font-weight: 600; }
.riel-num { color: var(--tenue); margin-right: .5rem; font-variant-numeric: tabular-nums; }
.riel a[aria-current="true"] .riel-num { color: var(--barrido-2); }

.familia + .familia { margin-top: clamp(2.5rem, 6vw, 4rem); }
.familia-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: .875rem; border-bottom: 2px solid var(--tinta);
}
.familia-cab h2 { font-family: var(--serif); font-size: clamp(1.375rem, 3vw, 1.875rem); }
.familia-cuenta { font-size: .8125rem; color: var(--tenue); letter-spacing: .04em; }

.filas { list-style: none; margin: 0; padding: 0; }
.fila {
  display: grid;
  /* el nombre se queda con la holgura y las teselas se pegan a la derecha,
   * que es la misma lógica del índice de la portada: concepto a la izquierda,
   * cifra a la derecha. Con las teselas alineadas a la izquierda quedaba una
   * franja muerta de 300 px en todas las filas. */
  /* El nombre se dimensiona a su contenido, con tope, y la holgura se va a las
   * teselas, que se pegan a la derecha: misma lógica que el índice de la
   * portada. Con `auto` en la última columna la holgura se la quedaba el
   * nombre, la columna de teselas se encogía a su mínimo —56 px— y una familia
   * de ocho potencias se apilaba en vertical. */
  grid-template-columns: 5.5rem minmax(9rem, 20rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--regla);
}

/* La placa va en aspect-ratio con la imagen en position:absolute e inset.
 * Con la imagen en max-height:100% el porcentaje se resuelve contra una altura
 * automática y cada placa termina midiendo lo que mide su foto, así que los
 * nombres de una misma fila dejan de alinear.
 */
.placa {
  position: relative; aspect-ratio: 1; background: var(--papel-2);
  border: 1px solid var(--regla);
}
.placa img {
  position: absolute; inset: 10%;
  width: 80%; height: 80%; object-fit: contain;
  /* drop-shadow sigue el alfa del recorte: solo le devuelve contorno a lo que
   * lo necesita. Los paneles son negros y los inversores son cajas blancas; si
   * se oscureciera la placa desaparecerían los paneles. */
  filter: drop-shadow(0 1px 2px rgba(18, 20, 24, .28));
}
.placa-vacia { display: grid; place-items: center; }
.placa-vacia span {
  font-size: .5625rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tenue); text-align: center; padding: .25rem; line-height: 1.4;
}

.fila-nombre { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.3; }

/* Teselas: el valor tal como lo publica el catálogo, ordenado de menor a mayor
 * y teñido a lo largo del barrido de la marca. El tinte dice el orden dentro de
 * la familia; NO se convirtió ninguna potencia ni se dedujo ningún vatiaje.
 * El color del texto de cada tesela se elige midiendo el contraste contra su
 * propio fondo, porque el barrido cruza de claro a oscuro.
 */
.teselas {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: .3125rem; margin: 0; padding: 0; list-style: none;
}
.tesela {
  font-size: .8125rem; line-height: 1; letter-spacing: .02em;
  padding: .4375rem .5625rem;
}
.tesela-sola { background: var(--papel-2); color: var(--tinta-suave); border: 1px solid var(--regla); }

.notas-catalogo { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--regla); }
.notas-catalogo h2 { font-family: var(--serif); font-size: 1.25rem; margin-bottom: .75rem; }
.notas-catalogo p { font-size: .875rem; color: var(--tinta-suave); max-width: 62ch; }

/* --------------------------------------------------------------------- pie */
/* La banda de marcas también va en tinta, así que sin esta regla el pie se
 * funde con ella en un solo bloque oscuro sin costura. */
.pie { background: var(--tinta); color: var(--papel); padding-block: clamp(2.75rem, 7vw, 4.5rem); border-top: 1px solid #33373F; }
.pie a { color: var(--barrido-0); }
/* 11rem, no 13: con 13 las tres columnas solo caben pasados los 900 px y en
 * pantallas medianas Horario caía sola a una segunda fila, dejando un hueco
 * bajo Correo. */
.pie-rejilla { display: grid; gap: 2rem clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.pie h2 { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--papel-tenue); margin-bottom: .75rem; font-family: var(--sans); }
.pie p { margin: 0; color: var(--papel); font-size: .9375rem; }
.pie-legal { margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.5rem; border-top: 1px solid #33373F; font-size: .8125rem; color: var(--papel-tenue); }
.pie img { height: 30px; width: auto; margin-bottom: 1.25rem; }

/* ------------------------------------------------------------ angostos */
@media (max-width: 60rem) {
  .catalogo-doble { grid-template-columns: minmax(0, 1fr); }
  .riel { position: static; padding-bottom: 1.25rem; border-bottom: 1px solid var(--regla); }
  .riel ol { display: flex; flex-wrap: wrap; gap: .375rem 1rem; }
  .riel li + li { margin-top: 0; }
}

@media (max-width: 40rem) {
  .fila {
    grid-template-columns: 4rem minmax(0, 1fr);
    align-items: start;
    row-gap: .75rem;
  }
  .teselas { grid-column: 1 / -1; justify-content: flex-start; }
  .menu { font-size: .6875rem; letter-spacing: .06em; }
  .marca img { height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}