/* =========================================================================
   Bienestar Interno — Blog: secciones automáticas por área y tarjetas de
   artículo (Blog y "artículos relacionados"). Se carga en la web y en el
   editor, así el bloque "Áreas del blog" se ve igual al editar.
   Los tamaños, espacios y colores son variables (--bi-…) que se ajustan en
   Apariencia › Personalizar › Bienestar Interno, por dispositivo.
   ========================================================================= */
:root {
  --cream: #F4F1E1; --sand: #E9EBDC; --stone: #FCFBF6; --sage: #DCE4D5;
  --olive: #4F7A5C; --forest: #28392E; --ink-soft: #4D5A4E;
  --serif: 'Fraunces', Georgia, serif; --sans: 'Work Sans', sans-serif; --mono: ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
  --stripes: repeating-linear-gradient(135deg, rgba(40,57,46,.07) 0 1px, transparent 1px 11px);
}
:is(#inner-wrap, .editor-styles-wrapper) .container { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; }
:is(#inner-wrap, .editor-styles-wrapper) .icon { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* Tarjetas de artículo ---------------------------------------------------- */
:is(#inner-wrap, .editor-styles-wrapper) .post-grid { display: grid; grid-template-columns: repeat(var(--bi-card_cols, 3), minmax(0,1fr)); gap: var(--bi-card_gap, 32px); }
:is(#inner-wrap, .editor-styles-wrapper) .post-grid > * { display: flex; }
:is(#inner-wrap, .editor-styles-wrapper) .post-card {
  position: relative; flex: 1; display: flex; flex-direction: column;
  background: linear-gradient(160deg, var(--bi-card_bg1, #E0E0CB) 0%, var(--bi-card_bg2, #ECEAD9) 100%);
  border: 1px solid rgba(79,122,92,.38); border-radius: var(--bi-card_radius, 22px); overflow: hidden;
  box-shadow: 0 12px 28px -24px rgba(40,57,46,.35);
  color: var(--forest); text-decoration: none;
  transition: transform .45s var(--ease), box-shadow .45s ease;
}
:is(#inner-wrap, .editor-styles-wrapper) .post-card:hover {
  transform: translateY(-5px); box-shadow: 0 26px 44px -28px rgba(40,57,46,.45); color: var(--forest);
  background: linear-gradient(160deg, #CAD2C4 0%, #E6E5D2 100%); border-color: rgba(79,122,92,.5);
}
:is(#inner-wrap, .editor-styles-wrapper) .post-card :where(h3, p) { margin: 0; }
:is(#inner-wrap, .editor-styles-wrapper) .post-card__media { position: relative; aspect-ratio: 3/2; overflow: hidden; }
:is(#inner-wrap, .editor-styles-wrapper) .post-card__img {
  width: 100%; height: 100%; position: relative;
  background-color: var(--cream); background-image: var(--stripes);
  display: flex; align-items: flex-end; padding: 1rem;
  transition: transform .7s var(--ease);
}
:is(#inner-wrap, .editor-styles-wrapper) .post-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
:is(#inner-wrap, .editor-styles-wrapper) .post-card--zoom:hover .post-card__img { transform: scale(1.04); }
:is(#inner-wrap, .editor-styles-wrapper) .ph-label { font: 500 .7rem/1.4 var(--mono); color: var(--ink-soft); background: var(--sand); padding: .3rem .55rem; border-radius: 6px; }
:is(#inner-wrap, .editor-styles-wrapper) .post-card__body { flex: 1; display: flex; flex-direction: column; gap: .65rem; padding: var(--bi-card_pad, 24px) var(--bi-card_pad, 24px) calc(var(--bi-card_pad, 24px) + 1.6px); }
:is(#inner-wrap, .editor-styles-wrapper) .post-card__title { color: var(--forest); font: 400 var(--bi-card_title, 20.48px)/1.28 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
:is(#inner-wrap, .editor-styles-wrapper) .post-card__excerpt { color: var(--ink-soft); font-size: var(--bi-card_text, 15.52px); line-height: 1.55; text-wrap: pretty; }
:is(#inner-wrap, .editor-styles-wrapper) .post-card__more { margin-top: auto; padding-top: .5rem; font: 600 .92rem/1 var(--sans); }
:is(#inner-wrap, .editor-styles-wrapper) .post-card__foot { margin-top: auto; padding-top: .6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
:is(#inner-wrap, .editor-styles-wrapper) .post-card__foot span:first-child { font: 600 .92rem/1 var(--sans); }
:is(#inner-wrap, .editor-styles-wrapper) .post-card__min { font: 500 .8rem/1 var(--sans); color: var(--ink-soft); }
/* Variante "Artículos relacionados": fondo liso */
:is(#inner-wrap, .editor-styles-wrapper) .post-card--plain { background: var(--sand); border-color: rgba(40,57,46,.1); }
:is(#inner-wrap, .editor-styles-wrapper) .post-card--plain:hover { background: var(--sand); border-color: rgba(40,57,46,.1); }

/* Áreas del blog (bloque "Áreas del blog") -------------------------------- */
:is(#inner-wrap, .editor-styles-wrapper) .bi-areas { margin: 0; }
/* ancho de la pantalla sin la barra de desplazamiento (si no, la página queda más ancha y se desplaza) */
:is(#inner-wrap, .editor-styles-wrapper) .bi-areas.alignfull { width: auto; max-width: none; margin-left: 0; margin-right: 0; }
:is(#inner-wrap, .editor-styles-wrapper) .cat-section { background: var(--bi-area_bg, #E9EBDC); padding-block: var(--bi-area_pad, 40px); }
:is(#inner-wrap, .editor-styles-wrapper) .cat-section:first-child { padding-top: var(--bi-area_pad_ext, 104px); }
:is(#inner-wrap, .editor-styles-wrapper) .cat-section:last-child { padding-bottom: var(--bi-area_pad_ext, 104px); }
:is(#inner-wrap, .editor-styles-wrapper) .cat-sep { display: flex; align-items: center; gap: 1rem; margin-bottom: var(--bi-area_sep, 56px); }
:is(#inner-wrap, .editor-styles-wrapper) .cat-sep__l { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(79,122,92,0), rgba(79,122,92,.42)); }
:is(#inner-wrap, .editor-styles-wrapper) .cat-sep__r { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(79,122,92,.42), rgba(79,122,92,0)); }
:is(#inner-wrap, .editor-styles-wrapper) .cat-sep__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--olive); box-shadow: 0 0 0 4px var(--bi-area_bg, #E9EBDC), 0 0 0 5px rgba(79,122,92,.3); }
:is(#inner-wrap, .editor-styles-wrapper) .cat-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
:is(#inner-wrap, .editor-styles-wrapper) .cat-head__main { display: flex; align-items: center; gap: 1.1rem; max-width: 40rem; }
:is(#inner-wrap, .editor-styles-wrapper) .cat-head__icon {
  flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--sand); box-shadow: inset 0 0 0 1px rgba(79,122,92,.2), 0 6px 14px -10px rgba(40,57,46,.4);
}
:is(#inner-wrap, .editor-styles-wrapper) .cat-head__icon svg { width: 1.6rem; height: 1.6rem; stroke: var(--forest); stroke-width: 1.4; }
:is(#inner-wrap, .editor-styles-wrapper) .cat-head h2 { margin: 0; font: 400 var(--bi-area_title, 36.8px)/1.15 var(--serif); letter-spacing: -.02em; text-wrap: balance; color: var(--forest); }
:is(#inner-wrap, .editor-styles-wrapper) .cat-head p { margin: .4rem 0 0; color: var(--ink-soft); font-size: var(--bi-area_text, 16px); line-height: 1.55; text-wrap: pretty; }
:is(#inner-wrap, .editor-styles-wrapper) .cat-head__count { font: 600 .74rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--olive); }
:is(#inner-wrap, .editor-styles-wrapper) .cat-section .post-grid { margin-top: var(--bi-grid_mt, 44px); }