/* La foto de la semana (D-118). Casi todo viene de tokens.css: aquí la
   columna, la foto grande, la rejilla y el formulario. Ninguna letra baja de
   1rem. Cabe en 4 KB. */
main { max-width: 34rem; margin: 0 auto; padding: var(--s-4) var(--s-3) var(--s-6); }
h1 { font-size: 1.6rem; margin: 0 0 var(--s-3); }
h2 { font-size: 1.35rem; margin: var(--s-5) 0 var(--s-2); }
.nota { font-size: 1rem; }
.btn-ancho { width: 100%; box-sizing: border-box; }
.grande { margin: 0; display: grid; gap: var(--s-2); }
.ampliar { display: block; width: 100%; min-height: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
.grande img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--linea); cursor: zoom-in; }
.chip { justify-self: start; margin: 0; padding: 2px var(--s-3); border-radius: 999px; background: var(--casa-suave); color: var(--casa); font-weight: 700; font-size: 1rem; }
.grande figcaption { display: grid; gap: var(--s-1); }
.pie-foto { font-size: 1.15rem; white-space: pre-line; overflow-wrap: anywhere; }
.firma { font-size: 1rem; color: var(--tinta-suave); }
/* «Por qué esta foto» (D-123): papel con filete, como «Lo tuyo». Ni azul (es
   «dónde estoy» y «qué pulso») ni amarillo (es el reloj). */
.comentario { margin: 0; padding: var(--s-4); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); display: grid; gap: var(--s-2); }
.comentario p { margin: 0; }
.comentario-titulo { font-size: 1rem; font-weight: 700; color: var(--tinta-suave); }
.comentario-texto { font-size: 1.2rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.comentario-quien { font-size: 1rem; font-weight: 700; }
/* Tres columnas en el móvil más estrecho: `minmax(0, 1fr)` para que una foto
   no empuje la columna (lección de la casa: medir el desbordamiento). */
.rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.miniatura { display: block; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--linea); cursor: zoom-in; }
.miniatura img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.vacio { font-size: 1.1rem; }
.lo-tuyo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.lo-tuyo li { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); padding: var(--s-3); }
.lo-tuyo .texto { margin: 0 0 var(--s-1); font-size: 1.05rem; overflow-wrap: anywhere; }
form { display: flex; flex-direction: column; gap: var(--s-3); }
input, textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.05rem; padding: var(--s-3); border: 1.5px solid var(--linea); border-radius: 8px; background: var(--papel); color: var(--tinta); }
textarea { min-height: 6rem; resize: vertical; }
.etiqueta-campo { display: block; margin-bottom: var(--s-1); font-size: 1rem; }
.casilla { display: flex; gap: var(--s-2); align-items: flex-start; font-size: 1rem; }
.casilla input { min-height: 0; width: 44px; height: 44px; margin: 0; flex: none; accent-color: var(--casa); }
.acciones-fila { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: 0; }
.foto-zona { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.hecho { font-size: 1.2rem; font-weight: 700; }
.pie { margin-top: var(--s-6); font-size: 1rem; }