/* ============================================================
   15Diez · sistema v2 · assets/css/insights.css
   Solo lo que el sistema no tiene: cabecera de la publicación,
   el destacado como enlace, la línea de fecha y lectura, la pieza
   de archivo y los campos del Monitor.
   Ronda 3 (5-oct-2026): el destacado es la dupla del sistema
   (.dupla.dupla--texto-ancho), no una portada de 1,280 × 640 con el
   texto debajo; los demás artículos van cuatro por fila
   (.articulos--cuatro del sistema) sobre banda arena; el Monitor es
   la banda de carbón (.seccion--carbon + .cierre), sin foto.
   Aquí ya no se fija el tamaño de ninguna imagen: lo fija el sistema.
   ============================================================ */

/* ---------- cabecera de la publicación ---------- */
.revista { padding-block: var(--apertura) calc(var(--seccion) / 2); }
/* el subtítulo cabe en un renglón en escritorio: título de la página, foto y texto del destacado se ven juntos al abrir */
.revista__cabecera { max-width: 48rem; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.revista__cabecera .apoyo { max-width: none; }

/* categoría · fecha · lectura (textos 2: vuelven el día y los minutos del sitio actual). Los separadores los pone el CSS.
   Fecha y lectura viajan juntas (.meta__cuando); si la fila no cabe bajan a un segundo renglón y su punto,
   que cuelga a la izquierda, queda fuera del recorte: nunca hay un separador suelto al inicio ni al final. */
.meta { display: flex; flex-wrap: wrap; column-gap: 1em; row-gap: .25rem; overflow: hidden; }
.meta__cuando { position: relative; white-space: nowrap; }
.meta__cuando::before { content: "\00b7"; position: absolute; left: -.68em; }
.meta__lectura::before { content: "\00b7\00a0"; }

/* ---------- artículo destacado: la dupla del sistema hecha enlace ----------
   a.destacado.dupla.dupla--texto-ancho > .dupla__imagen.destacado__portada + .dupla__texto.destacado__texto.
   El sistema pone la retícula (foto de 5 columnas, texto de 7), el 3:2 y el tope de alto; aquí solo va lo que es de
   un enlace: sin subrayado, la foto crece al pasar el cursor y el título se subraya. */
.destacado { text-decoration: none; color: inherit; }
.destacado__portada { overflow: hidden; border-radius: var(--radio); }
.destacado__portada img { transition: transform var(--m-imagen) ease; }
@media (hover: hover) { .destacado:hover .destacado__portada img { transform: scale(1.02); } }   /* Ronda 4: ningún :hover sin cursor (al tacto se quedaba pegado) */
.destacado__texto { gap: 1rem; justify-items: start; }
.destacado__texto .enlace { margin-top: .25rem; }
.destacado__titulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; text-decoration-color: transparent; transition: text-decoration-color var(--m-rapido); }
@media (hover: hover) { .destacado:hover .destacado__titulo { text-decoration-color: currentColor; } }

/* ---------- los demás artículos: cuatro por fila (.articulos--cuatro del sistema) ----------
   Aquí solo el texto que el índice añade a la tarjeta del sistema: fecha y lectura, extracto y «Leer más».
   La etiqueta va siempre en dos renglones (categoría / fecha · lectura): así los cuatro títulos arrancan parejos. */
.articulos--cuatro .meta { flex-direction: column; }
/* tras la crítica (Ronda 3) · los «Leer más» de una fila van en la misma línea. Cada enlace colgaba de su extracto, y los
   extractos miden de cuatro a cinco renglones (la pieza de archivo lleva además su rótulo): quedaban a cuatro alturas.
   La tarjeta, que ya se estira al alto de su fila, pasa de rejilla a columna flexible (mismo hueco, el del sistema) y el
   enlace se ancla al pie con margin-top: auto. El aire mínimo entre extracto y enlace (el .25rem que antes llevaba el
   enlace) lo pone ahora el extracto, así la tarjeta más alta mide lo mismo y la sección no crece. */
.articulos--cuatro .articulo { display: flex; flex-direction: column; }
.articulos--cuatro .articulo__portada { flex: none; }
.articulos--cuatro .articulo__linea { font-size: .9375rem; line-height: 1.5; text-wrap: pretty; margin-bottom: .25rem; }
/* textos 2 · «Leer más» en cada tarjeta, como en el sitio actual: el enlace con flecha del sistema, a la talla de la línea */
.articulos--cuatro .articulo .enlace { align-self: flex-start; margin-top: auto; font-size: .9375rem; }
@media (hover: hover) { .articulo:hover .enlace::after, .destacado:hover .enlace::after { transform: translateX(3px); } }

/* ---------- pieza de archivo (cierre, recorrido final): rótulo «Archivo» y su fecha en una frase, bajo el título y antes del
   extracto. Para artículos cuyo título lleva una cuenta que ya pasó («52 días al Mundial 2026…») ---------- */
.articulo__archivo { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; font-size: .875rem; line-height: 1.5; color: var(--gris); }
.articulo__archivo .rotulo { margin-right: 0; }

/* ---------- Monitor: los dos campos del boletín (índice y los cinco artículos) ----------
   Van sueltos sobre la banda de carbón. El foco es el de la banda (--foco: crema sobre carbón), el mismo de sus botones
   y de la otra banda de carbón del sitio; antes era dorado (tras la crítica de la Ronda 3).
   7-oct-2026 (decisión de Julio): cada campo lleva su nombre encima, a la vista («Nombre», «Correo electrónico»). La
   etiqueta y su distancia al campo son del sistema (.formulario__campo y su label, en sitio.css) y el aire entre los dos
   campos, también (.formulario__campos, que ahora los envuelve): aquí no se añadió ninguna regla. La etiqueta va a paño
   con la píldora, como en los demás formularios; el aviso y la nota conservan su sangría de antes (1.25rem). */
.monitor__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; } /* minmax(0,…): el ancho propio de los campos (20 caracteres) ya no ensancha la columna bajo 360 px */
.monitor .campo-linea { max-width: 30rem; border-color: var(--blanco); }
.monitor .campo-linea:focus-within { border-color: var(--blanco); }   /* el contorno de foco, por fuera de la píldora, lo pone el sistema sobre la banda */
.monitor .formulario__campo { gap: .5rem; grid-template-columns: minmax(0, 1fr); }
.monitor .formulario__error { font-size: .875rem; font-weight: 500; color: var(--crema); padding-left: 1.25rem; }
.monitor .dato { padding-left: 1.25rem; max-width: 30rem; } /* textos 2: la nota íntegra parte en dos renglones bajo las píldoras, sin pasarse de su ancho */
/* el aviso de éxito va suelto sobre la banda, con un filo en el gris de la banda (el del sistema no lleva marco) */
.monitor .formulario__exito { padding: 1.5rem; border: 1px solid var(--gris); border-radius: var(--radio); color: var(--crema); }
.monitor__form[data-estado="enviado"] > :not(.formulario__exito) { display: none; }
/* tras la crítica · píldora sola para el Nombre (piso 8.1), apilada sobre la del correo; mismas medidas que .campo-linea bajo 480 px */
.monitor__pildora {
  width: 100%; max-width: 30rem; min-height: 3rem; padding: .75rem 1.25rem;
  background: var(--blanco); border: 1px solid var(--blanco); border-radius: var(--radio-boton);
}
.monitor__pildora::placeholder { color: var(--gris); }
/* el input hereda el color de la banda (crema): sobre la píldora blanca el texto escrito va en carbón */
.monitor .campo-linea input, .monitor__pildora { color: var(--carbon); }
.monitor__pildora:focus { outline: 2px solid var(--foco, var(--carbon)); outline-offset: 3px; }
.monitor__pildora[aria-invalid="true"] { border: 2px solid var(--carbon); }
/* error de envío: .formulario__fallo del sistema (en claro sobre la banda); aquí, solo su ancho */
.monitor .formulario__fallo { max-width: 30rem; }

/* ---------- Monitor sobre la banda de carbón (.seccion--carbon + .cierre.monitor del sistema) ----------
   Los dos campos van a la derecha del texto, sueltos sobre la banda. */
.seccion--carbon .monitor .cierre__texto { gap: 1rem; }
.seccion--carbon .monitor__form { justify-self: end; width: 100%; max-width: 30rem; }

/* ---------- responsive ---------- */
/* tableta: el cierre se apila (texto y, debajo, los campos, alineados a la izquierda) */
@media (max-width: 63.99rem) {
  .seccion--carbon .monitor__form { justify-self: start; }
}
/* tableta: la columna de texto del destacado es estrecha; el título baja un paso para no pasar de cuatro renglones */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .destacado__titulo { font-size: 1.5rem; }
}
/* en teléfono el destacado sigue la misma regla que las tarjetas: los cinco artículos llevan la etiqueta en dos renglones */
@media (max-width: 47.99rem) {
  .meta { flex-direction: column; }
  /* textos 2 · tres renglones en teléfono, uno por frase (a 26 px el tercero se pasaba por 3 px y el titular caía a cuatro) */
  .destacado__titulo { font-size: clamp(1.25rem, 5.9vw, 1.5rem); text-wrap: pretty; }
  /* Ronda 4 · las filas compactas son del sistema (miniatura, etiqueta y título arriba; extracto y «Leer más» debajo, a
     todo el ancho). La página solo da talla al extracto: 16 px, el piso de lectura del teléfono. Salió de aquí la regla
     que daba talla al título de la fila (la fija el sistema: 17 px, 16 a 360 px de ancho, y pesaba más que esta). */
  .articulos--cuatro .articulo__linea { font-size: 1rem; }
  .monitor .campo-linea, .monitor__pildora, .monitor .formulario__fallo { max-width: none; }
  .seccion--carbon .monitor__form { justify-self: stretch; max-width: none; }

  /* ---------- Ronda 4 · teléfono (brief/RONDA-4-MOVIL.md; medidas en _notas/ronda4-insights.md) ---------- */
  /* la cabecera de la página deja 24 px hasta el destacado, el paso de toda .cabecera del sistema en teléfono (la regla
     de arriba, de escritorio, le ganaba con 32 px) */
  .revista__cabecera { margin-bottom: 1.5rem; }
  /* el campo «Nombre» con aviso conserva su tamaño: su borde de error (2 px en carbón) no se ve sobre la banda de
     carbón y solo encogía la píldora 2 px por lado junto a la del correo, que no cambia. El aviso va en su renglón,
     pegado al campo. (En escritorio pasa lo mismo y no se toca en esta ronda: anotado en _notas/ronda4-insights.md.) */
  .monitor__pildora[aria-invalid="true"] { border: 1px solid var(--blanco); }
  /* respuesta al toque del destacado, que es un enlace propio de esta página: se atenúa mientras el dedo está encima,
     igual que una fila del sistema, y solo entonces se quita el destello gris del navegador (receta 13). Se atenúan
     la foto y el texto, no el enlace: el enlace lleva .revelar y su opacidad cambia en 500 ms (la del revelado); con
     un toque corto no llegaba a notarse */
  html.js .destacado { -webkit-tap-highlight-color: transparent; }
  .destacado:active > * { opacity: .6; }
  /* «Leer más» vive dentro de un enlace que ya se atenúa entero (la fila o el destacado): sin esto, al tocar justo
     sobre él se atenuaba dos veces (.6 × .6) y casi desaparecía bajo el dedo. (El selector pesa lo que el del sistema.) */
  a.articulo span.enlace:active, a.destacado span.enlace:active { opacity: 1; }
}
/* ronda 2 · bajo 480 px el campo lleva su propia píldora: el foco va en el campo, no en el contenedor */
@media (max-width: 29.99rem) {
  /* textos 2 · «Suscribirme al Monitor» no ensancha la columna en teléfonos de 320 a 360 px: si no cabe, parte en dos */
  .monitor .campo-linea .boton { white-space: normal; padding-inline: 1rem; }
  .monitor .campo-linea, .monitor .campo-linea:focus-within { border: 0; outline: none; }
  /* el foco del correo, igual que el de la píldora del nombre que tiene encima: el de la banda, a 3 px */
  .monitor .campo-linea input:focus { outline-color: var(--foco, var(--carbon)); outline-offset: 3px; border-color: var(--blanco); }
  /* Ronda 4 · propio del Monitor (es el único campo de una línea con aviso) · con el campo apilado (el campo y, debajo, su botón) el aviso «Email
     inválido.» salía bajo el botón, a 68 px de su campo, mientras «Ingresa tu nombre.» sale pegado al suyo. Aquí el
     aviso va entre el campo y el botón: junto a lo que la persona está escribiendo y siempre por encima del teclado.
     El contenedor del campo deja de pintar su caja (ya no tenía borde ni fondo a este ancho) y campo, aviso y botón
     se ordenan en la rejilla de .formulario__campo; sin aviso, campo y botón siguen a 12 px. El HTML no cambia. */
  .monitor .campo-linea { display: contents; }
  .monitor .campo-linea input { width: 100%; }   /* ya es celda de la rejilla: ocupa la columna en cualquier navegador, como la píldora del nombre */
  .monitor .formulario__campo > .formulario__error { order: 1; }
  .monitor .campo-linea .boton { order: 2; margin-top: .25rem; }

  /* (La foto del destacado, que abre la página, va en 16:9 en el teléfono en vertical: lo pide su dupla en el marcado
     con .dupla--portada-movil, del sistema. En 390 × 664 se ven sin scroll el título de la página, la foto, la
     etiqueta, el título del artículo y el arranque de su extracto. De 480 a 767 px sigue en 3:2.) */
}