/* La página de proyectos. La cabecera está en base.css. */

.hoja { max-inline-size: 900px; }

.filas { margin: 0; padding: 0; list-style: none; }

/* Ni rayas ni números: lo que separa un proyecto de otro es el hueco. */
.fila { padding-block: clamp(2.75rem, 7vw, 4.5rem); }
.fila:first-child { padding-block-start: 0; }

.cont { display: flex; flex-direction: column; gap: 0.6rem; min-inline-size: 0; }

.titulo-fila {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}

.cont h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 500; }

.meta {
  display: flex;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--texto-3);
}
.sep { opacity: 0.45; }
.estado { color: var(--tinte, var(--texto-3)); }

.claim { font-size: 1.02rem; color: var(--texto); }

.detalle { max-inline-size: 58ch; color: var(--texto-2); font-size: 0.95rem; }

.pila {
  margin-block-start: 0.5rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}

.pila li {
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--linea);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--texto-3);
  transition: border-color 260ms ease, color 260ms ease;
}

.fila:hover .pila li { border-color: var(--tinte, var(--linea)); color: var(--texto-2); }


/* -------------------------------------------------------------- Captura */

/* La captura va plegada para que la lista se lea de un tirón. Es un <details>
   normal: funciona sin JavaScript y se abre con el teclado. */
.galeria { margin-block-start: 0.5rem; }

.galeria summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 32px;
  padding-inline-end: 0.2rem;
  color: var(--texto-3);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
  transition: color 220ms ease;
}

.galeria summary::-webkit-details-marker { display: none; }
.galeria summary:hover { color: var(--tinte, var(--texto)); }

.chevron {
  inline-size: 14px;
  block-size: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 300ms var(--salida);
}

.galeria[open] .chevron { transform: rotate(180deg); }

.captura {
  display: block;
  margin-block-start: 0.7rem;
  border: 1px solid var(--linea);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 280ms ease, transform 320ms var(--salida);
}

a.captura:hover {
  border-color: var(--tinte, var(--linea));
  transform: translateY(-3px);
}

.captura img { inline-size: 100%; block-size: auto; }


/* --------------------------------------------------------------- Acceso */

.acceso { margin-block-start: 0.5rem; }

.acceso a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-block-size: 24px;
  color: var(--tinte, var(--acento));
  font-size: 0.9rem;
  text-underline-offset: 4px;
}

.flecha { transition: transform 220ms var(--salida); }
.acceso a:hover .flecha { transform: translate(2px, -2px); }

/* Los proyectos con datos reales no se abren. El candado va en gris y sin
   caja, para no quitarle protagonismo a los que sí se pueden ver. */
.candado {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--texto-3);
}

.icono {
  inline-size: 11px;
  block-size: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pendiente {
  margin-block-start: 2.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--texto-3);
}


/* ------------------------------------------------------------ Movimiento */

/* Un <details> abre y cierra de golpe. Esto lo suaviza en los navegadores que
   saben hacerlo; en los demás se queda como siempre. Va dentro de @supports
   a propósito: sin la comprobación, un navegador que entendiera una parte y
   no la otra dejaría la imagen escondida. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }

    .galeria::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size 400ms var(--salida),
                  content-visibility 400ms allow-discrete;
    }

    .galeria[open]::details-content { block-size: auto; }
  }
}

@media (pointer: coarse), (max-width: 860px) {
  .acceso a, .galeria summary { min-block-size: 44px; }
}

@media (max-width: 620px) {
  .fila { padding-block: 2.4rem; }
}