/**
 * cuidado-de-prendas.css
 * -------------------------------------------------------------------------
 * Estilos propios de esta página: la lista de consejos con ícono, sobre el
 * "hilo dorado" compartido (ver css/paginas-informativas.css).
 * -------------------------------------------------------------------------
 */

/* Los selectores llevan ".pagina-informativa" + tipo + clase a propósito:
   ".pagina-informativa ul" (en paginas-informativas.css) ya pone
   padding-left genérico con esa misma especificidad — sin igualarla acá,
   esta regla perdería contra esa en el cascade sin avisar.

   padding-left va en 26px (no 0) A PROPÓSITO: esta lista también lleva la
   clase ".hilo-dorado" (línea vertical + "nudos", en
   paginas-informativas.css), que espera ese mismo padding para que el
   texto/íconos queden a la derecha de la línea. ".pagina-informativa
   ul.lista-consejos" (2 clases + 1 tipo) es MÁS específico que
   ".pagina-informativa .hilo-dorado" (2 clases) — por eso el valor tiene
   que fijarse acá, y no alcanza con ponerlo solo en la regla de
   ".hilo-dorado" (bug real que pasó: la línea terminaba atravesando los
   íconos porque este padding ganaba con 0). */
.pagina-informativa ul.lista-consejos {
  list-style: none;
  padding-left: 26px;
  margin: 0;
}

.pagina-informativa li.consejo-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.pagina-informativa li.consejo-item:last-child {
  margin-bottom: 0;
}

.consejo-item__icono {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--color-acento-oscuro);
}