/* Páginas de proyectos: el catálogo «Lo que usamos cada día», el Cerebro, Batutia y Cuadre.
   La cabecera, el pie, los botones y los enlaces son los de la portada (estilo.css). Aquí va lo suyo:
   hojas de panel sobre el ciclorama, capturas reales y la pantalla en tinta. Sin 3D ni JS. */

/* ---------- Cabecera y pie ---------- */

/* Sin JS nadie le pone el filete al bajar: se lo pone la línea de tiempo del scroll, donde exista. */
@supports (animation-timeline: scroll()) {
  .cabecera {
    animation: filete-cabecera linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 8px;
  }
}
@keyframes filete-cabecera {
  from { border-bottom-color: transparent; }
  to { border-bottom-color: var(--canto); }
}

.navegacion a[aria-current="page"] { font-weight: 700; }
.pie a[aria-current="page"] { text-decoration: none; font-weight: 650; }

/* ---------- Página ---------- */

.pagina { padding: 40px var(--margen) 112px; }
.pagina-in { max-width: 1120px; margin: 0 auto; }

.migas { font-size: 15px; color: var(--rotulo); }
.migas ol { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.migas li + li::before { content: "/"; content: "/" / ""; margin-right: 10px; color: var(--canto); }
.migas a { color: var(--tinta); text-decoration-color: var(--canto); }
.migas a:hover { text-decoration-color: var(--rojo); text-decoration-thickness: 2px; }

.pagina h1 {
  margin-top: 20px;
  font-stretch: 112%;
  font-weight: 760;
  font-size: clamp(2.25rem, 4.4vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 21ch;
}
.pagina .entrada { margin-top: 24px; max-width: 58ch; }
.pagina .acciones { margin-top: 28px; }

/* ---------- Bloques ---------- */

.bloque { margin-top: clamp(72px, 10vh, 120px); }
.bloque > h2 { max-width: 24ch; }
.bloque > p { margin-top: 18px; max-width: 62ch; text-wrap: pretty; }
.bloque > p + p { margin-top: 14px; }
.bloque > p a, .tarjeta p a, .nota a { text-decoration-color: var(--canto); text-underline-offset: 0.2em; }
.bloque > p a:hover, .tarjeta p a:hover, .nota a:hover { text-decoration-color: var(--rojo); text-decoration-thickness: 2px; }

/* Las filas: título y frase entre filetes, como las normas de la portada. */
.filas { margin-top: 36px; border-bottom: 1px solid var(--canto); }
.filas li { padding: 22px 0 24px; border-top: 1px solid var(--canto); }
.filas h3 {
  font-size: 21px;
  font-weight: 700;
  font-stretch: 104%;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.filas p { margin-top: 8px; font-size: 17px; line-height: 1.55; color: var(--rotulo); max-width: 56ch; text-wrap: pretty; }

@media (min-width: 1024px) {
  .filas li {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 32px;
    align-items: baseline;
  }
  .filas p { margin-top: 0; }
}

/* ---------- Capturas ---------- */

.figura {
  margin-top: 36px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid transparent; /* en alto contraste se dibuja */
  border-radius: 10px;
}
@media (min-width: 768px) { .figura { padding: 14px; } }
.figura img { width: 100%; height: auto; border-radius: 6px; background: var(--tinta); }
.figura figcaption {
  margin-top: 12px;
  padding: 0 4px 2px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--rotulo);
  max-width: 72ch;
}
/* La oficina es más alta que ancha en proporción: que no ocupe una pantalla entera en escritorio. */
.figura-media { max-width: 880px; }

/* ---------- La pantalla: la voz de la máquina, estrecha, blanca y sobre tinta ---------- */

.pantalla {
  padding: 16px 18px;
  background: var(--tinta);
  color: var(--blanco);
  border-radius: 6px;
  font-stretch: 88%;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}

/* ---------- Catálogo ---------- */

.tarjetas { margin-top: 44px; display: grid; gap: 24px; }
@media (min-width: 1024px) { .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tarjeta {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--panel);
  border: 1px solid transparent; /* en alto contraste se dibuja */
  border-radius: 10px;
}
@media (min-width: 768px) { .tarjeta { padding: 32px; } }
/* En la tarjeta, la pantalla ocupa lo mismo que una captura: así las tarjetas de una fila quedan parejas. */
.tarjeta .pantalla {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: flex-end;
  margin-top: 0;
  margin-bottom: 26px;
  padding: 22px 24px;
  font-size: clamp(22px, 2.1vw, 28px);
}
.tarjeta-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  margin-bottom: 26px;
  border-radius: 6px;
  background: var(--tinta);
}
.tarjeta-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}
.tarjeta h2 {
  font-size: 24px;
  font-weight: 700;
  font-stretch: 104%;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.tarjeta p { margin-top: 12px; font-size: 17px; line-height: 1.55; max-width: 56ch; text-wrap: pretty; }
.tarjeta .que-es { margin-top: 6px; font-size: 15px; font-weight: 650; color: var(--rotulo); }
.tarjeta .enlace { margin-top: auto; padding-top: 22px; align-self: flex-start; }

.nota { margin-top: 28px; font-size: 15px; color: var(--rotulo); max-width: 66ch; }

/* ---------- Llamada final ---------- */

.llamada {
  margin-top: clamp(80px, 11vh, 132px);
  padding: 32px 24px 36px;
  background: var(--panel);
  border: 1px solid transparent; /* en alto contraste se dibuja */
  border-radius: 10px;
}
@media (min-width: 768px) { .llamada { padding: 48px; } }
.llamada h2 { max-width: 22ch; }
.llamada p { margin-top: 18px; max-width: 58ch; color: var(--rotulo); text-wrap: pretty; }
.llamada .acciones { margin-top: 28px; }

/* ---------- Móvil ---------- */

@media (max-width: 767px) {
  .pagina { padding-top: 24px; padding-bottom: 72px; }
  .pagina .entrada { font-size: 18px; }
  .figura, .tarjeta, .llamada { margin-inline: calc(-1 * var(--margen) + 8px); }
  .pantalla { font-size: 18px; }
  .boton-grande { width: 100%; white-space: normal; text-align: center; }
}

/* ---------- Impresión ---------- */

@media print {
  .cabecera { position: static; }
  .navegacion, .idioma, .boton-cabecera, .saltar { display: none; }
  .figura, .tarjeta, .llamada { padding: 0; border: 0; background: none; }
}