/* ==========================================================================
   Blog: listado, artículo y la sección de la portada
   Pantalla 32 del diseño. Los valores salen de los tokens: no inventar acá.
   ========================================================================== */

/* --- Listado -------------------------------------------------------------- */

.sf-blog__migas {
  margin-bottom: var(--sf-esp-4);
  font-size: var(--sf-cuerpo-s);
  color: var(--sf-texto-secundario);
}

.sf-blog__migas a { color: var(--sf-texto-secundario); }
.sf-blog__migas span { margin-inline: var(--sf-esp-1); }

.sf-blog__cabecera {
  max-width: 65ch;
  margin-bottom: var(--sf-esp-6);
  padding-bottom: var(--sf-esp-6);
  border-bottom: 1px solid var(--sf-borde-sutil);
}

.sf-blog__cabecera h1 {
  margin: 0 0 var(--sf-esp-3);
  font-size: var(--sf-h2);
  line-height: var(--sf-h2-alto);
}

.sf-blog__bajada { margin: 0; color: var(--sf-texto-secundario); }

.sf-blog__temas ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-esp-2);
  margin: 0 0 var(--sf-esp-8);
  padding: 0;
  list-style: none;
}

/* El tema en el que estás no es un botón que lleve a otro sitio: es el estado
   de la página. Va relleno y sin borde de acción. */
.sf-chip--activo,
.sf-chip--activo:hover {
  background: var(--sf-accion-primaria);
  color: var(--sf-accion-inversa);
  cursor: default;
}

/* --- Tarjeta de entrada --------------------------------------------------- */

.sf-entradas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-6);
}

@media (min-width: 700px) {
  .sf-entradas { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .sf-entradas { grid-template-columns: repeat(3, 1fr); }
}

.sf-entrada-tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--sf-superficie-bloque);
  border: 1px solid var(--sf-borde-sutil);
}

.sf-entrada-tarjeta__medio {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--sf-superficie-hundida);
}

.sf-entrada-tarjeta__medio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sf-entrada-tarjeta__sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--sf-borde-medio);
}

.sf-entrada-tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sf-esp-2);
  padding: var(--sf-esp-4);
  flex: 1;
}

.sf-entrada-tarjeta__tema {
  text-decoration: none;
  color: var(--sf-acento-texto);
}

.sf-entrada-tarjeta__tema:hover { text-decoration: underline; }

.sf-entrada-tarjeta__titulo {
  margin: 0;
  font-size: var(--sf-h5);
  line-height: var(--sf-h5-alto);
}

.sf-entrada-tarjeta__titulo a {
  color: var(--sf-texto-marca);
  text-decoration: none;
}

.sf-entrada-tarjeta__titulo a:hover { text-decoration: underline; }

.sf-entrada-tarjeta__bajada {
  margin: 0;
  color: var(--sf-texto-secundario);
  font-size: var(--sf-cuerpo-s);
  line-height: var(--sf-cuerpo-s-alto);
}

/* Los datos se pegan abajo: con extractos de distinto largo, si no, cada
   tarjeta los deja a una altura distinta. */
.sf-entrada-tarjeta__datos {
  margin: auto 0 0;
  padding-top: var(--sf-esp-2);
  color: var(--sf-texto-secundario);
  font-size: var(--sf-etiqueta);
  line-height: var(--sf-etiqueta-alto);
}

/* --- La fila compacta de la portada ---------------------------------------- */

/* En la portada los consejos son una salida secundaria: quien está mirando
   marcos puede tener una duda, no viene a leer. Con la foto grande la sección
   medía 587px y competía con los productos, que es lo que se vende. Acá la
   miniatura es chica, va al lado y no hay extracto. */
.sf-entradas--fila {
  gap: var(--sf-esp-4);
}

.sf-entrada-tarjeta--fila {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: stretch;
}

.sf-entrada-tarjeta--fila .sf-entrada-tarjeta__medio {
  aspect-ratio: auto;
  height: 100%;
}

.sf-entrada-tarjeta--fila .sf-entrada-tarjeta__cuerpo {
  gap: var(--sf-esp-1);
  padding: var(--sf-esp-3) var(--sf-esp-4);
  justify-content: center;
}

.sf-entrada-tarjeta--fila .sf-entrada-tarjeta__titulo {
  font-size: var(--sf-cuerpo-m);
  line-height: var(--sf-cuerpo-m-alto);
}

/* Los datos no se pegan abajo: en una tarjeta de dos líneas, el `auto` los
   separaba del título sin ningún motivo. */
.sf-entrada-tarjeta--fila .sf-entrada-tarjeta__datos {
  margin-top: 0;
  padding-top: 0;
}

/* --- La destacada del listado --------------------------------------------- */

.sf-entrada-tarjeta--destacada { margin-bottom: var(--sf-esp-6); }

@media (min-width: 800px) {
  .sf-entrada-tarjeta--destacada {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    align-items: stretch;
  }

  .sf-entrada-tarjeta--destacada .sf-entrada-tarjeta__medio {
    aspect-ratio: auto;
    height: 100%;
  }

  .sf-entrada-tarjeta--destacada .sf-entrada-tarjeta__cuerpo {
    justify-content: center;
    padding: var(--sf-esp-8);
    gap: var(--sf-esp-3);
  }

  .sf-entrada-tarjeta--destacada .sf-entrada-tarjeta__titulo {
    font-size: var(--sf-h3);
    line-height: var(--sf-h3-alto);
  }

  .sf-entrada-tarjeta--destacada .sf-entrada-tarjeta__bajada {
    font-size: var(--sf-cuerpo-m);
    line-height: var(--sf-cuerpo-m-alto);
  }

  /* En la grilla los datos se pegan abajo para que queden todos a la misma
     altura. Acá no hay con quién alinearse, y ese `auto` los mandaba al pie de
     una caja del alto de la foto, a medio metro del texto. */
  .sf-entrada-tarjeta--destacada .sf-entrada-tarjeta__datos {
    margin-top: 0;
  }

  /* La foto de la destacada no puede crecer sin límite: manda ella el alto de
     la caja y una vertical dejaba el texto perdido en el medio. */
  .sf-entrada-tarjeta--destacada .sf-entrada-tarjeta__medio {
    max-height: 340px;
  }
}

/* --- Artículo ------------------------------------------------------------- */

.sf-articulo__cabecera {
  max-width: 65ch;
  margin-bottom: var(--sf-esp-6);
}

.sf-articulo__cabecera .sf-etiqueta {
  display: inline-block;
  margin-bottom: var(--sf-esp-3);
  color: var(--sf-acento-texto);
  text-decoration: none;
}

.sf-articulo__cabecera h1 {
  margin: 0 0 var(--sf-esp-3);
  font-size: var(--sf-h2);
  line-height: var(--sf-h2-alto);
}

.sf-articulo__datos {
  margin: 0;
  color: var(--sf-texto-secundario);
  font-size: var(--sf-cuerpo-s);
}

.sf-articulo__foto {
  margin: 0 0 var(--sf-esp-8);
}

.sf-articulo__foto img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.sf-articulo__foto figcaption {
  margin-top: var(--sf-esp-2);
  color: var(--sf-texto-secundario);
  font-size: var(--sf-cuerpo-s);
}

.sf-articulo__reja {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-8);
}

@media (min-width: 1000px) {
  /* La columna de al lado es fija y angosta: lleva un índice de títulos y una
     caja de ayuda, y a 480px el índice se leía como una segunda columna de
     texto. El cuerpo se queda en sus 65ch y lo que sobra es aire. */
  .sf-articulo__reja {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--sf-esp-12);
    align-items: start;
  }
}

/* Misma columna que las guías de ayuda, 688px medidos en el navegador. Va en
   rem y no en `ch` a propósito: el artículo se lee un punto más grande que una
   guía, y con `65ch` la columna crecía con la letra en vez de quedarse quieta,
   que es justo lo que no se quiere de una medida de lectura. Con esta letra
   caen unos 76 caracteres por línea. */
.sf-articulo__cuerpo {
  max-width: 43rem;
  font-size: var(--sf-cuerpo-l);
  line-height: var(--sf-cuerpo-l-alto);
}

.sf-articulo__cuerpo > * { margin-block: 0 var(--sf-esp-4); }

.sf-articulo__cuerpo h2 {
  margin-top: var(--sf-esp-9);
  font-size: var(--sf-h4);
  line-height: var(--sf-h4-alto);
  /* Al saltar desde el índice, el título quedaría debajo de la cabecera fija. */
  scroll-margin-top: calc(var(--sf-header-fijo-alto) + var(--sf-esp-4));
}

.sf-articulo__cuerpo h3 {
  margin-top: var(--sf-esp-6);
  font-size: var(--sf-h5);
  line-height: var(--sf-h5-alto);
}

.sf-articulo__cuerpo ul,
.sf-articulo__cuerpo ol { padding-left: var(--sf-esp-6); }
.sf-articulo__cuerpo li { margin-bottom: var(--sf-esp-2); }

.sf-articulo__cuerpo img { max-width: 100%; height: auto; }

.sf-articulo__cuerpo blockquote {
  margin-inline: 0;
  padding-left: var(--sf-esp-4);
  border-left: 3px solid var(--sf-accion-acento);
  color: var(--sf-texto-secundario);
}

.sf-articulo__accion {
  margin-top: var(--sf-esp-9);
  padding: var(--sf-esp-6);
  background: var(--sf-aviso-fondo);
  border-left: 3px solid var(--sf-accion-acento);
}

.sf-articulo__accion p {
  margin: 0 0 var(--sf-esp-4);
  font-size: var(--sf-cuerpo-m);
  line-height: var(--sf-cuerpo-m-alto);
}

/* --- La columna de al lado ------------------------------------------------ */

.sf-articulo__lado {
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-6);
}

@media (min-width: 1000px) {
  .sf-articulo__lado {
    position: sticky;
    top: calc(var(--sf-header-fijo-alto) + var(--sf-esp-4));
  }
}

/* En el teléfono el índice solo aleja el texto: se lee de corrido. */
.sf-articulo__indice { display: none; }

@media (min-width: 1000px) {
  .sf-articulo__indice {
    display: block;
    padding: var(--sf-esp-4);
    border: 1px solid var(--sf-borde-sutil);
    background: var(--sf-superficie-bloque);
  }
}

.sf-articulo__indice-titulo {
  margin: 0 0 var(--sf-esp-3);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-etiqueta);
  line-height: var(--sf-etiqueta-alto);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sf-texto-secundario);
}

.sf-articulo__indice ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-2);
}

.sf-articulo__indice a {
  color: var(--sf-texto-principal);
  font-size: var(--sf-cuerpo-s);
  line-height: var(--sf-cuerpo-s-alto);
  text-decoration: none;
}

.sf-articulo__indice a:hover { text-decoration: underline; }

.sf-articulo__ayuda {
  padding: var(--sf-esp-4);
  background: var(--sf-superficie-inversa);
  color: var(--sf-texto-inverso);
}

.sf-articulo__ayuda strong {
  display: block;
  margin-bottom: var(--sf-esp-2);
  font-family: var(--sf-fuente-titulos);
  font-weight: var(--sf-titulos-peso);
  font-size: var(--sf-h5);
  line-height: var(--sf-h5-alto);
}

.sf-articulo__ayuda p {
  margin: 0 0 var(--sf-esp-4);
  color: var(--sf-texto-inverso-suave);
  font-size: var(--sf-cuerpo-s);
  line-height: var(--sf-cuerpo-s-alto);
}

.sf-articulo__ayuda .sf-boton--contorno {
  border-color: var(--sf-accion-inversa);
  color: var(--sf-texto-inverso);
}

.sf-articulo__ayuda .sf-boton--contorno:hover {
  background: var(--sf-accion-inversa);
  color: var(--sf-texto-marca);
}

/* --- Seguir leyendo ------------------------------------------------------- */

.sf-articulo__seguir {
  margin-top: var(--sf-esp-16);
  padding-top: var(--sf-esp-8);
  border-top: 1px solid var(--sf-borde-sutil);
}

.sf-articulo__seguir-titulo {
  margin: 0 0 var(--sf-esp-6);
  font-size: var(--sf-h4);
  line-height: var(--sf-h4-alto);
}

/* --- Sección de la portada ------------------------------------------------ */

.sf-consejos .sf-entradas { margin-top: var(--sf-esp-6); }