/* =========================================================================
   Bienestar Interno — contenido de los artículos (Entradas)
   Se aplica solo a los bloques del artículo, en la web y DENTRO DEL EDITOR,
   así al escribir se ve el diseño real:
   Párrafo (el primero = entradilla) · Título H2 · Lista · Lista numerada (= pasos)
   · Cita · Lista con estilo "Lista con títulos" · Grupo "Caja destacada" / "Nota".
   Tamaños y espacios: variables --bi-… que se ajustan por dispositivo en
   Apariencia › Personalizar › Bienestar Interno › Artículos.
   ========================================================================= */

/* ---- Editor: fondo, ancho y título como en el artículo publicado ---- */
.editor-styles-wrapper.post-type-post { background: var(--bi-art_bg, #F4F1E1); }
.editor-styles-wrapper.post-type-post .is-root-container { max-width: var(--bi-art_width, 704px); margin-inline: auto; padding-bottom: 6rem; }
.editor-styles-wrapper.post-type-post .is-root-container > * { max-width: none; margin-left: 0; margin-right: 0; }
.editor-styles-wrapper.post-type-post .editor-post-title {
  max-width: 832px; margin: 2.5rem auto 3rem; text-align: center;
  font: 400 var(--bi-art_title, 59.2px)/1.08 var(--serif); letter-spacing: -.025em; color: var(--forest); text-wrap: balance;
}

/* ---- Bloques del contenido ---- */
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > p { margin-top: var(--bi-art_gap, 20px); margin-bottom: 0; font-size: var(--bi-art_text, 17.5px); line-height: var(--bi-art_lh, 1.78); color: var(--forest); text-wrap: pretty; }
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > p:first-child { margin-top: 0; font-size: var(--bi-art_lead, 20.48px); }
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > h2 { margin-top: var(--bi-art_h2_mt, 52px); margin-bottom: 0; font: 400 var(--bi-art_h2, 31.2px)/1.2 var(--serif); letter-spacing: -.018em; text-wrap: balance; color: var(--forest); }
/* Lista con títulos */
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > ul.is-style-bi-definiciones { list-style: none; padding: 0; margin-top: 1.5rem; margin-bottom: 0; display: flex; flex-direction: column; gap: .9rem; }
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > ul.is-style-bi-definiciones > li { position: relative; margin: 0; padding-left: 1.7rem; font-size: var(--bi-art_list, 17px); line-height: 1.65; color: var(--ink-soft); }
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > ul.is-style-bi-definiciones > li::before { content: ""; position: absolute; left: 0; top: .62em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--sage); border: 1.5px solid var(--olive); box-sizing: border-box; }
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > ul.is-style-bi-definiciones strong { color: var(--forest); font-weight: 600; }
/* Lista */
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > ul:not(.is-style-bi-definiciones) { list-style: none; padding: 0; margin-top: 1.25rem; margin-bottom: 0; display: flex; flex-direction: column; gap: .6rem; }
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > ul:not(.is-style-bi-definiciones) > li { position: relative; margin: 0; padding-left: 1.6rem; font-size: var(--bi-art_list, 17px); line-height: 1.6; color: var(--forest); }
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > ul:not(.is-style-bi-definiciones) > li::before { content: ""; position: absolute; left: .15rem; top: .65em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--olive); }
/* Lista numerada = pasos (título en negrita + descripción) */
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > ol {
  list-style: none; counter-reset: bi-paso; padding: .5rem var(--bi-art_box_pad_x, 25.6px); margin-top: 1.75rem; margin-bottom: 0;
  background: linear-gradient(165deg, var(--sand) 0%, var(--sand) 55%, rgba(220,228,213,.75) 100%);
  border: 1px solid rgba(40,57,46,.1); border-radius: 22px; box-shadow: 0 12px 28px -24px rgba(40,57,46,.35);
}
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > ol > li {
  position: relative; counter-increment: bi-paso; margin: 0; padding: 1.15rem 0 1.15rem 3.2rem; min-height: calc(2.2rem + 2.3rem);
  border-top: 1px solid rgba(40,57,46,.1); font-size: 1rem; line-height: 1.6; color: var(--ink-soft);
}
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > ol > li:first-child { border-top: 0; }
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > ol > li::before {
  content: counter(bi-paso); position: absolute; left: 0; top: 1.15rem;
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: linear-gradient(145deg, var(--olive), var(--forest)); color: var(--sage);
  font: 500 .95rem/1 var(--serif); box-shadow: 0 4px 10px -4px rgba(40,57,46,.5);
}
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > ol > li > strong:first-child,
.editor-styles-wrapper.post-type-post .is-root-container > ol > li > [role="textbox"] > strong:first-child { display: block; margin-bottom: .3rem; font: 500 calc(var(--bi-art_box_title, 17.92px) - .32px)/1.35 var(--serif); color: var(--forest); }
/* Caja destacada */
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > .is-style-bi-caja {
  margin-top: 1.75rem; margin-bottom: 0; padding: var(--bi-art_box_pad, 29.6px);
  background: linear-gradient(150deg, var(--sage) 0%, var(--sand) 100%);
  border: 1px solid rgba(79,122,92,.24); border-radius: 22px;
  box-shadow: 0 14px 30px -24px rgba(40,57,46,.4), inset 0 1px 0 rgba(233,235,220,.6);
}
/* (en el editor, los grupos llevan un contenedor interior: .wp-block-group__inner-container) */
:is(#inner-wrap .art-body > .is-style-bi-caja, .editor-styles-wrapper.post-type-post .is-root-container > .is-style-bi-caja, .editor-styles-wrapper.post-type-post .is-root-container > .is-style-bi-caja > .wp-block-group__inner-container) > p { margin: 0; }
:is(#inner-wrap .art-body > .is-style-bi-caja, .editor-styles-wrapper.post-type-post .is-root-container > .is-style-bi-caja, .editor-styles-wrapper.post-type-post .is-root-container > .is-style-bi-caja > .wp-block-group__inner-container) > p:first-child { font: 500 var(--bi-art_box_title, 17.92px)/1.35 var(--serif); color: var(--forest); }
:is(#inner-wrap .art-body > .is-style-bi-caja, .editor-styles-wrapper.post-type-post .is-root-container > .is-style-bi-caja, .editor-styles-wrapper.post-type-post .is-root-container > .is-style-bi-caja > .wp-block-group__inner-container) > p + p { margin-top: .55rem; font-size: 1.03rem; line-height: 1.65; color: var(--forest); text-wrap: pretty; }
/* Cita */
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > .wp-block-quote { margin: var(--bi-art_quote_m, 52px) 0; padding: 0 var(--bi-art_quote_px, 32px); border: 0; background: none; text-align: center; box-shadow: none; }
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > .wp-block-quote::before { content: ""; display: block; width: 2.5rem; height: 2px; margin: 0 auto 1.25rem; background: var(--olive); }
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > .wp-block-quote p { margin: 0; font: 400 var(--bi-art_quote, 28.8px)/1.42 var(--serif); letter-spacing: -.01em; color: var(--forest); text-wrap: balance; }
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > .wp-block-quote cite { display: none; }
/* Nota */
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > .is-style-bi-nota {
  margin-top: 1.5rem; margin-bottom: 0; display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.3rem clamp(1.15rem, 3vw, 1.6rem); background: var(--sand);
  border: 1px solid rgba(40,57,46,.12); border-radius: 20px;
}
:is(#inner-wrap .art-body, .editor-styles-wrapper.post-type-post .is-root-container) > .is-style-bi-nota::before {
  content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23576D3A' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E") center / 1rem no-repeat, var(--sage);
  box-shadow: inset 0 0 0 1px rgba(79,122,92,.3);
}
:is(#inner-wrap .art-body > .is-style-bi-nota, .editor-styles-wrapper.post-type-post .is-root-container > .is-style-bi-nota, .editor-styles-wrapper.post-type-post .is-root-container > .is-style-bi-nota > .wp-block-group__inner-container) > p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--forest); text-wrap: pretty; }
