/* ══════════════════════════════════════════════════════════════════════════
   descripcion-larga.css — Descripción larga del artículo (refs Tipo 1)

   HTML generado por cr_desc_larga_html() (catalogo/descripcion_lib.inc.php).
   Lo cargan la ficha pública (catalogo/online.php), la ficha de la tienda
   logic y la vista previa del editor del CMS. Las variables son las de
   main.css con respaldo para logic, que no las define.

   Las clases que escribe el diseñador (class="nota") salen con prefijo dl-
   para no chocar con el resto del CSS. Lista en cr_desc_clases().
   ══════════════════════════════════════════════════════════════════════════ */

.descripcion__larga{
  line-height: var(--lhS, 1.5);
  overflow-wrap: anywhere;
}

/* Espacio entre párrafos: algo más que un salto de línea */
.descripcion__larga p{ margin: 0 0 0.5em; }
.descripcion__larga > :last-child{ margin-bottom: 0; }

.descripcion__larga h3,
.descripcion__larga h4{
  margin: 1.1em 0 0.4em;
  color: var(--gO, #1b1c1d);
  line-height: 1.3;
}
.descripcion__larga h3{ font-size: var(--fM, 1.12rem); font-weight: 600; }
.descripcion__larga h4{
  font-size: var(--fS, 1rem);
  font-weight: 600;
  color: var(--g, #545759);
}
.descripcion__larga > h3:first-child,
.descripcion__larga > h4:first-child{ margin-top: 0; }

.descripcion__larga ul,
.descripcion__larga ol{
  margin: 0 0 0.5em;
  padding-left: 1.3em;
}
.descripcion__larga ul{ list-style: disc; }
.descripcion__larga ol{ list-style: decimal; }
.descripcion__larga li{ margin: 0 0 0.25em; }
.descripcion__larga li::marker{ color: var(--r, #8e1f30); }
.descripcion__larga li > ul,
.descripcion__larga li > ol{ margin: 0.25em 0 0; }

.descripcion__larga hr{
  border: 0;
  border-top: 1px solid var(--gC, #ddd);
  margin: 1em 0;
}

.descripcion__larga b,
.descripcion__larga strong{ font-weight: 600; }
.descripcion__larga small{ font-size: 0.85em; }
.descripcion__larga sup,
.descripcion__larga sub{ font-size: 0.7em; line-height: 0; }

/* Enlaces: rojo sin negrita y subrayado animado al pasar, como los enlaces
   globales de main.css (repetido aquí para la tienda logic, que no lo tiene) */
.descripcion__larga a{
  position: relative;
  color: var(--r, #8e1f30);
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s ease-out;
}
.descripcion__larga a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.12em;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease-out;
}
.descripcion__larga a:hover,
.descripcion__larga a:focus-visible{ color: var(--gO, #1b1c1d); }
.descripcion__larga a:hover::after,
.descripcion__larga a:focus-visible::after{ transform: scaleX(1); }

/* ── Clases del diseñador ── */
.descripcion__larga .dl-entradilla{
  font-size: var(--fM, 1.12rem);
  color: var(--g, #545759);
}
.descripcion__larga .dl-destacado{
  color: var(--gO, #1b1c1d);
  font-weight: 600;
}
.descripcion__larga .dl-nota{
  font-size: var(--fXS, 0.9rem);
  color: var(--g2, #6b6e70);
}
.descripcion__larga .dl-aviso,
.descripcion__larga .dl-recuadro{
  padding: 0.6em 0.85em;
  border-radius: var(--rP, 8px);
}
.descripcion__larga .dl-aviso{
  background: #fff8e1;
  border: 1px solid #f0c060;
  color: #5a4500;
}
.descripcion__larga .dl-recuadro{
  background: var(--w2, #faf7f2);
  border: 1px solid var(--gC, #ddd);
}
/* Una caja dentro de una línea (span) no lleva relleno de bloque */
.descripcion__larga span.dl-aviso,
.descripcion__larga span.dl-recuadro{ padding: 0.05em 0.35em; border-radius: 4px; }
.descripcion__larga ul.dl-aviso,
.descripcion__larga ol.dl-aviso,
.descripcion__larga ul.dl-recuadro,
.descripcion__larga ol.dl-recuadro{ padding-left: 2em; }
.descripcion__larga .dl-centrado{ text-align: center; }
.descripcion__larga ul.dl-centrado,
.descripcion__larga ol.dl-centrado{ list-style-position: inside; padding-left: 0; }
.descripcion__larga .dl-mayusculas{
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 0.88em;
}