/* ==========================================================================
   Elige tu cafetera · la capa editorial
   --------------------------------------------------------------------------
   Sólo lo cargan las páginas de artículo y el índice. Quien entra a comparar
   cafeteras no descarga nada de esto.

   Hereda los tokens de estilos.css: mismo blanco, mismos grises azulados,
   mismo azul de interfaz y la misma tipografía de palo seco. Aquí no se
   declara ninguna familia: todo hereda de `body`, que es Inter. Un artículo
   con serifas sería otro sitio.

   La diferencia con el catálogo es la medida. La rejilla de producto quiere
   densidad; un texto de 1.500 palabras quiere una columna estrecha, interlínea
   alta y sitio para respirar. Lo único que rompe esa columna es el bloque de
   producto, y lo rompe a propósito.
   ========================================================================== */

/* --- La hoja ------------------------------------------------------------ */
/* El catálogo va sobre gris para que las tarjetas blancas se recorten. Un
   texto de 1.500 palabras no es una rejilla: se lee mejor sobre blanco, así
   que el artículo se sirve como una hoja y no como una tarjeta más. */

.art {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: clamp(1.2rem, 3vw, 2.6rem) clamp(1.1rem, 3vw, 3rem);
  margin-block: clamp(1rem, 3vw, 2rem);
}

/* --- Cabecera ----------------------------------------------------------- */

.art-cab { margin-bottom: 1.8rem; }

.art-bloque {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accion);
  background: var(--accion-suave); border: 1px solid var(--accion-borde);
  border-radius: 100px; padding: .22rem .6rem; margin-bottom: .9rem;
}

.art .art-cab h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.45rem); }

.art-entradilla {
  font-size: 1.12rem; line-height: 1.55; color: var(--texto-medio);
  max-width: 62ch; margin-top: .7rem;
}

.art-firma {
  font-size: .82rem; color: var(--texto-tenue);
  border-top: 1px solid var(--borde); padding-top: .7rem; margin-top: 1.1rem;
}

/* --- Imágenes ----------------------------------------------------------- */
/* `aspect-ratio` heredado de los atributos width/height del HTML: el hueco
   está reservado antes de que llegue el primer byte, así que la página no
   salta a media lectura. `height:auto` para que el alto real lo mande el
   ancho disponible y no el atributo. */

.art-portada, .art-imagen { margin: 0 0 1.6rem; }
.art-imagen { margin: 1.8rem 0; }

.art-portada img, .art-imagen img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radio); background: var(--fondo-3);
}

/* La portada se recorta a 16:9. A 3:2 y al ancho de la columna se comía la
   pantalla entera y empujaba la entrada del texto por debajo del pliegue.
   El `aspect-ratio` explícito mantiene el hueco reservado, así que recortar
   no reintroduce el salto de maquetación. */
.art-portada img { aspect-ratio: 16 / 9; object-fit: cover; }

.art-portada figcaption, .art-imagen figcaption {
  font-size: .82rem; color: var(--texto-tenue); line-height: 1.45;
  margin-top: .5rem; max-width: 62ch;
}

/* En el cuerpo, una imagen puede salirse un poco de la columna de texto:
   ayuda a que se lea como ilustración y no como adorno intercalado. */
@media (min-width: 900px) {
  .art-cuerpo .art-imagen { width: calc(100% + 4rem); margin-inline: -2rem; }
  .art-cuerpo .art-imagen figcaption { margin-inline: 2rem; }
}

/* --- Índice interno ------------------------------------------------------ */
/* A partir de tres apartados. Con dos es un adorno que empuja el texto hacia
   abajo sin ayudar a nadie. */

.art-indice {
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1rem 1.2rem; margin-bottom: 2rem;
}
.art-indice h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-tenue); margin-bottom: .5rem;
}
.art-indice ol {
  margin: 0; padding-left: 1.1rem;
  display: grid; gap: .3rem;
  font-size: .93rem;
}
.art-indice a { color: var(--texto); }
.art-indice a:hover { color: var(--accion); }

/* --- El cuerpo del texto ------------------------------------------------- */

.art-cuerpo { max-width: 68ch; }

.art-cuerpo p {
  font-size: 1.02rem; line-height: 1.72; margin-bottom: 1.05rem;
  color: var(--texto);
}

.art-cuerpo h2 {
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.55rem);
  margin-top: 2.4rem; margin-bottom: .7rem;
  padding-top: 1.4rem; border-top: 1px solid var(--borde);
}
.art-cuerpo h3 {
  font-size: 1.08rem; margin-top: 1.7rem; margin-bottom: .45rem;
}

.lista-art {
  margin: 0 0 1.05rem; padding-left: 1.15rem;
  display: grid; gap: .45rem;
  font-size: 1.02rem; line-height: 1.6;
}
.lista-art li::marker { color: var(--accion); }

/* La frase que resume el artículo. Sin comillas decorativas: una barra azul y
   un cuerpo mayor bastan, y no fingen ser una cita de nadie. */
.art-clave {
  border-left: 3px solid var(--accion);
  padding: .15rem 0 .15rem 1rem;
  margin: 1.6rem 0;
  font-size: 1.12rem; line-height: 1.55; font-weight: 600;
  color: var(--texto);
}
.art-cuerpo .art-clave { margin-bottom: 1.6rem; }

.art-limite { margin: 1.8rem 0; }
.art-limite p { font-size: .93rem; color: var(--texto-medio); margin-bottom: 0; }

/* --- El bloque de producto contextual ------------------------------------ */
/* Esto es lo único que sale de la columna de texto, y por eso funciona: la
   interrupción es la señal de que aquí hay una recomendación, no más prosa.
   La barra de color es la del formato, la misma del catálogo. */

.prod-ctx {
  margin: 1.9rem 0;
  /* Gris claro sobre la hoja blanca: el bloque tiene que separarse del texto
     sin necesidad de gritar. El color fuerte lo pone la barra del formato. */
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--color-formato, var(--accion));
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.05rem 1.15rem;
}

.prod-ctx-porque {
  font-size: .93rem; line-height: 1.55; color: var(--texto-medio);
  margin: 0 0 .95rem; padding-bottom: .85rem;
  border-bottom: 1px dashed var(--borde);
}
.prod-ctx-porque b { color: var(--texto); }

/* 176px y no 150: con dos cifras al lado, «340 g» partía la unidad a la línea
   siguiente y quedaba un «g» suelto debajo del número. */
.prod-ctx-int { display: grid; grid-template-columns: 176px 1fr; gap: 1.1rem; }

.prod-ctx-tile {
  display: flex; flex-direction: column; justify-content: center;
  border-radius: var(--radio-s); padding: .8rem .85rem; min-height: 132px;
  /* El mismo tinte de formato que en la rejilla del catálogo: el bloque se
     reconoce como «esto es un producto» antes de leer el nombre. */
  background: var(--tinte, var(--fondo-2)); border: 1px solid var(--borde);
  color: var(--texto); text-decoration: none;
}
.prod-ctx-tile:hover { text-decoration: none; border-color: var(--borde-fuerte); }

.prod-ctx-meta {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .76rem; color: var(--texto-tenue); margin: 0 0 .3rem;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}

.prod-ctx-nombre { font-size: 1.12rem; margin: 0 0 .7rem; }
.prod-ctx-nombre a { color: var(--texto); }
.prod-ctx-nombre a:hover { color: var(--accion); text-decoration: none; }

.prod-ctx-filas { margin-bottom: .85rem; }
.prod-ctx-fila {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .8rem; padding: .32rem 0; font-size: .86rem;
  border-bottom: 1px solid var(--borde);
}
.prod-ctx-fila:last-child { border-bottom: 0; }
.prod-ctx-fila > span:first-child { color: var(--texto-medio); }

/* Donde un artículo de afiliación pondría el precio. Aquí no hay precio que
   publicar: hay un botón que lleva a donde el precio está vivo. */
.prod-ctx-precio {
  font-size: .8rem; color: var(--texto-tenue); margin: 0 0 .35rem;
}

.prod-ctx-ficha { font-size: .84rem; margin: .55rem 0 0; }

@media (max-width: 620px) {
  .prod-ctx-int { grid-template-columns: 1fr; gap: .85rem; }
  .prod-ctx-tile { min-height: 0; padding: .7rem .8rem; }
}

/* --- Cierre: citados, puente y hermanos ---------------------------------- */

.art-citados {
  margin: 2.6rem 0 0; padding: 1.1rem 1.2rem;
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.art-citados h2 {
  font-size: .95rem; margin-bottom: .6rem;
  padding: 0; border: 0;
}
.art-citados ul { margin: 0 0 .7rem; padding-left: 1.1rem; display: grid; gap: .3rem; }
.art-citados li { font-size: .93rem; }
.art-citado-cat { color: var(--texto-tenue); font-size: .82rem; }
.art-citados-nota {
  font-size: .82rem; color: var(--texto-tenue); margin: 0; line-height: 1.5;
}

.art-puente {
  margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--borde);
}

/* --- Fuentes ------------------------------------------------------------ */
/* Van al final y sin adornos. La fecha de consulta al lado de cada enlace es
   lo que convierte una lista de enlaces en una lista de comprobaciones. */

.art-fuentes {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--borde);
}
.art-fuentes h2 { font-size: 1.05rem; margin-bottom: .7rem; }
.art-fuentes ul { margin: 0 0 .9rem; padding-left: 1.1rem; display: grid; gap: .6rem; }
.art-fuentes li { font-size: .92rem; line-height: 1.5; }
.art-fuente-nota { display: block; color: var(--texto-medio); font-size: .88rem; }
.art-fuente-fecha { display: block; color: var(--texto-tenue); font-size: .8rem; }
.art-fuentes-nota {
  font-size: .84rem; color: var(--texto-tenue); line-height: 1.55;
  max-width: 62ch; margin: 0;
}
.art-puente p { font-size: .95rem; color: var(--texto-medio); margin-bottom: .7rem; }

.art-hermanos { margin-top: 2.6rem; }
.art-hermanos h2 { font-size: 1.1rem; margin-bottom: .9rem; }
.art-hermanos-rejilla {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.art-hermano {
  display: block; padding: .9rem 1rem;
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--radio); color: var(--texto);
  transition: border-color .15s var(--salida), box-shadow .15s var(--salida);
}
.art-hermano:hover {
  text-decoration: none; border-color: var(--accion-borde);
  box-shadow: var(--sombra-alta);
}
.art-hermano-bloque {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accion); margin-bottom: .3rem;
}
.art-hermano-titulo {
  display: block; font-weight: 700; line-height: 1.3; margin-bottom: .3rem;
}
.art-hermano-pie {
  display: block; font-size: .83rem; color: var(--texto-medio); line-height: 1.45;
}

/* --- El índice del blog -------------------------------------------------- */

.art-bloques {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin: 1.5rem 0 2.4rem;
}
.art-bloques a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border-radius: 100px;
  border: 1px solid var(--borde-fuerte); background: var(--fondo);
  font-size: .87rem; font-weight: 600; color: var(--texto);
}
.art-bloques a:hover {
  text-decoration: none; border-color: var(--accion-borde);
  background: var(--accion-suave); color: var(--accion-oscuro);
}
.art-bloques .num { color: var(--texto-tenue); font-weight: 700; }

.art-seccion { margin-bottom: 2.8rem; scroll-margin-top: calc(var(--nav-alto) + 16px); }
.art-seccion h2 {
  font-size: 1.3rem; padding-top: 1.2rem; border-top: 2px solid var(--texto);
  margin-bottom: .35rem;
}
.art-seccion-entradilla {
  color: var(--texto-medio); font-size: .96rem; max-width: 62ch;
  margin-bottom: 1.1rem; line-height: 1.55;
}

.art-rejilla {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.art-ficha {
  display: flex; flex-direction: column; padding: 1.05rem 1.1rem;
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--radio); color: var(--texto); box-shadow: var(--sombra);
  transition: border-color .15s var(--salida), box-shadow .15s var(--salida);
}
.art-ficha:hover {
  text-decoration: none; border-color: var(--accion-borde);
  box-shadow: var(--sombra-alta);
}
.art-ficha { padding: 0; overflow: hidden; }
.art-ficha-img {
  display: block; width: 100%; height: 148px; object-fit: cover;
  background: var(--fondo-3); border-bottom: 1px solid var(--borde);
}
.art-ficha h3,
.art-ficha p,
.art-ficha-pie { margin-inline: 1.1rem; }
.art-ficha h3 { font-size: 1.04rem; line-height: 1.3; margin-bottom: .4rem; margin-top: 1.05rem; }
.art-ficha-pie { margin-bottom: 1.05rem; }
.art-ficha p {
  font-size: .89rem; color: var(--texto-medio); line-height: 1.5;
  margin-bottom: .7rem; flex: 1;
}
.art-ficha-pie { font-size: .78rem; color: var(--texto-tenue); }