/* ============================================================================
   SEGURATIS · CUERPO DE CONTENIDO
   Los bloques del cuerpo flexible: `parts/cuerpo/*.php`

   HOJA APARTE Y SIEMPRE CARGADA, por el mismo motivo que formularios.css.
   Estos bloques los pintan CINCO plantillas —artículo, página de intención,
   página flexible, ficha de glosario y la página suelta— y cada una carga una
   hoja distinta. Vivían solo en articulo.css, así que de las cinco solo el
   artículo los veía con estilo: en las otras cuatro el cuerpo salía con los
   valores por defecto del navegador. Se veía como «todo pegado»: sin aire
   entre párrafos ni bajo los H2, las listas con su punto y su sangría de
   serie, y las cajas de definición, la tabla, los pasos, los pros y contras y
   el top de productos sin ninguna forma.

   Aquí va SOLO lo que es del bloque. La columna que lo contiene —el ancho, el
   sticky del lateral, el índice del hero— es de cada plantilla y se queda en
   su hoja.
   ============================================================================ */

/* ---- El bloque base: un H2 y su texto ------------------------------------ */
.art-bloque      { padding-top: 36px; }
.art-bloque__h2  { margin: 0; font-size: 25px; line-height: 1.14; letter-spacing: -.028em; font-weight: 800; }
.art-bloque__h3  { margin: 0 0 16px; font-size: 21px; line-height: 1.16; letter-spacing: -.024em; font-weight: 800; }
.art-texto       { margin-top: 14px; }
.art-texto p     { margin-top: 14px; font-size: 16.5px; line-height: 1.65; color: var(--c-ink-article); text-wrap: pretty; }
.art-texto p:first-child { margin-top: 0; }
.art-texto ul,
.art-texto ol    { margin: 14px 0 0; padding-left: 22px; }
.art-texto li    { margin-top: 8px; font-size: 16.5px; line-height: 1.65; color: var(--c-ink-article); }
.art-texto a     { text-decoration: underline; }
.art-texto strong { color: var(--c-ink); }
/* El H3 del contenido rico va sin clase: lo escribe quien redacta. */
.art-texto h3    { margin: 26px 0 0; font-size: 21px; line-height: 1.16; letter-spacing: -.024em; font-weight: 800; color: var(--c-ink); }

/* El texto corrido de la madre de ramo, del perfil de marca y del directorio.
   Es el mismo párrafo con otro nombre de bloque, y vivía en ramo.css: el
   perfil y el directorio cargan perfil.css, así que allí salía sin estilo. */
.ramo-texto p { margin-top: 12px; font-size: 16.5px; line-height: 1.65; color: var(--c-ink-article); text-wrap: pretty; }
.ramo-texto p:first-child { margin-top: 12px; }
@media (min-width: 1024px) {
  .ramo-texto p     { margin-top: 22px; font-size: 18px; line-height: 1.7; }
  .ramo-texto p + p { margin-top: 16px; }
}

/* ---- Cajas: definición, consejo, recuerda, cita -------------------------- */
.art-def         { margin-top: 20px; }
.art-def__txt    { display: block; }
.art-def__que    { font-size: 12px; letter-spacing: .08em; }
.art-def__termino{ margin-top: 5px; font-size: 16px; font-weight: 800; color: var(--c-ink); }
.art-def__glosario { margin-top: 10px; font-size: 14px; }
.art-nota        { margin-top: 20px; }
.art-nota__cta   { margin-top: 14px; }
.art-cita        { margin-top: 24px; }

/* ---- Tabla dentro del contenido ----------------------------------------- */
.art-tabla          { margin: 24px 0 0; }
.art-tabla__caption { margin-bottom: 12px; font-size: 15px; font-weight: 700; color: var(--c-ink); }
.art-tabla__scroll  { overflow-x: auto; border: var(--bd) solid var(--c-border); border-radius: var(--r); }
.art-tabla__tabla   { width: 100%; border-collapse: collapse; }
.art-tabla__tabla th,
.art-tabla__tabla td { padding: 12px 14px; font-size: 15px; line-height: 1.4; text-align: left; }
.art-tabla__tabla thead th { background: var(--c-primary); color: var(--c-white); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.art-tabla__tabla tbody tr { border-top: var(--bd) solid var(--c-divider); }
.art-tabla__tabla tbody tr:nth-child(even) { background: var(--c-row-alt); }
.art-tabla__tabla tbody th { font-weight: 700; color: var(--c-ink); }
.art-tabla__tabla tbody td { font-weight: 600; color: var(--c-ink-2); }

/* ---- Lista de pasos ------------------------------------------------------ */
.art-pasos__lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.art-paso     { display: flex; gap: 14px; }
.art-paso__num{ background: var(--c-primary); color: var(--c-white); }
.art-paso__txt{ flex: 1 1 auto; padding-top: 6px; font-size: 16px; line-height: 1.6; color: var(--c-ink-article); }

/* ---- Pros y contras · dos cajas blancas, una debajo de otra en móvil.
   El verde es SOLO del check y el rojo SOLO del aspa: el texto de la caja
   negativa no se pinta de rojo, se apaga a --c-ink-2. */
.art-proscons__grid  { display: grid; gap: 10px; }
.art-proscons__caja  {
  padding: 18px; border-radius: var(--r);
  background: var(--c-white); border: var(--bd) solid var(--c-border);
  box-shadow: var(--sh-card);
}
.art-proscons__titulo { font-size: 16.5px; font-weight: 800; color: var(--c-ink); }
.art-proscons__lista  { display: grid; gap: 9px; margin-top: 12px; }
.art-proscons__item   { display: flex; gap: 9px; font-size: 15.5px; line-height: 1.45; color: var(--c-ink-article); }
.art-proscons__caja--no .art-proscons__item { color: var(--c-ink-2); }
.art-proscons__marca      { flex: 0 0 auto; font-weight: 800; color: var(--c-positive); }
.art-proscons__marca--no  { color: var(--c-negative); }

/* ---- Top de productos ---------------------------------------------------- */
.art-top__intro { margin-bottom: 16px; font-size: 16px; line-height: 1.6; color: var(--c-ink-2); }
.art-top__lista { display: grid; gap: 10px; }
.art-top__item  { display: flex; align-items: center; gap: 14px; padding: 16px; }
.art-top__puesto {
  flex: 0 0 32px; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-primary); color: var(--c-white); font-size: 15px; font-weight: 800;
}
.art-top__txt   { flex: 1 1 auto; display: block; min-width: 0; }
.art-top__marca { display: block; font-size: 17px; font-weight: 800; color: var(--c-ink); }
.art-top__claim { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--c-ink-2); }
.art-top__dato  { flex: 0 0 auto; text-align: right; }
.art-top__precio{ display: block; font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--c-primary); }

/* ---- Formulario y FAQ como bloque del cuerpo ----------------------------- */
.art-form { padding-top: 36px; }
.art-faq  { padding-top: 36px; }

@media (min-width: 1024px) {
  .art-bloque     { padding-top: 48px; }
  .art-bloque__h2 { font-size: 36px; line-height: 1.12; letter-spacing: -.03em; }
  .art-bloque__h3 { font-size: 26px; letter-spacing: -.026em; }
  .art-texto p    { margin-top: 20px; font-size: 18px; line-height: 1.7; }
  .art-texto li   { font-size: 18px; line-height: 1.7; }
  .art-texto h3   { margin-top: 34px; font-size: 26px; letter-spacing: -.026em; }

  .art-def__que      { font-size: 12.5px; }
  .art-def__termino  { margin-top: 6px; font-size: 19px; }
  .art-def__glosario { margin-top: 12px; font-size: 15.5px; }

  .art-tabla__tabla th,
  .art-tabla__tabla td { padding: 15px 22px; font-size: 16px; }

  /* En desktop caben las dos cajas al lado. Sin sombra: en la maqueta de
     escritorio estas dos solo llevan el borde. */
  .art-proscons__grid   { grid-template-columns: 1fr 1fr; gap: 16px; }
  .art-proscons__caja   { padding: 26px; box-shadow: none; }
  .art-proscons__titulo { font-size: 19px; }
  .art-proscons__lista  { gap: 11px; margin-top: 16px; }
  .art-proscons__item   { gap: 10px; font-size: 16.5px; line-height: 1.5; }

  .art-top__item   { padding: 20px 22px; }
  .art-top__marca  { font-size: 19px; }
  .art-top__precio { font-size: 24px; }
}