/* WordPress envuelve el contenido de la página en .entry-content, así que las
   reglas del blog pensadas para esa clase alcanzan a las secciones de la home.
   Aquí se acotan a los pies de foto reales del artículo. */
.entry-content .person-identity,
.entry-content figure:not(.wp-block-image) > figcaption {
  text-align: inherit;
  margin-top: 0;
  color: inherit;
  font-size: inherit;
}

/* El contenedor de contenido de WordPress no debe limitar el ancho: las
   secciones Beesible gestionan el suyo con .container. */
.wp-site-blocks > main,
.wp-block-post-content,
.entry-content.wp-block-post-content {
  max-width: none;
}

/* Las secciones ocupan el ancho completo, como en el diseño original. */
.wp-block-post-content > .section,
.wp-block-post-content > .hero,
.wp-block-post-content > .pricing-sticky-region {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.admin-bar .site-header { top: 32px; }
.admin-bar .pricing-sticky-region > .proof-pricing { top: calc(7rem + 32px); }
.pricing-sticky-region > .proof-pricing { pointer-events: none; margin-top: var(--section-space); }
.proof-pricing .price-card { pointer-events: auto; }
.pricing-sticky-region .proof > .container > .section-heading { max-width: calc((100% - var(--space-7)) * .62); margin-left: 0; }
/* El hueco multimedia no impone ancho propio: sus contenedores centran con
   justify-items, y un width:100% dejaba el contenido pegado a la izquierda.
   Solo se limita el desbordamiento. */
.beesible-resource { max-width: 100%; overflow: hidden; }
/* Cuando lleva medios sí ocupa el ancho disponible, como el figure original. */
.beesible-resource:has(img, video, iframe) { width: 100%; }
/* En la maqueta el párrafo cuelga directamente del contenedor en rejilla y se
   centra en todo su ancho. Aquí lo envuelve este div, que al encogerse dejaba
   el texto descentrado: se hace transparente al layout con display:contents. */
.beesible-resource:not(:has(img, video, iframe)) { display: contents; }

/* display:contents no afecta a los selectores, así que el párrafo deja de
   coincidir con las reglas «> p» del diseño y perdía su relleno. */
.scope-intro-media .beesible-resource > p,
.customer-journey__media .beesible-resource > p,
.beelma-action__media .beesible-resource > p {
  margin: 0;
  padding: var(--space-5);
  color: var(--color-text-muted);
  text-align: center;
}
.beesible-resource img, .beesible-resource video, .beesible-resource iframe { max-width: 100%; }
.beesible-resource iframe { width: 100%; border: 0; aspect-ratio: 16 / 9; }
/* Hueco de las entradas sin imagen destacada: el logo corporativo centrado
   sobre blanco. Hereda la proporción de su contenedor (8/5 en la tarjeta,
   16/10 en el destacado) para servir en cualquier tamaño. */
.blog-card__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 12%;
  background: var(--surface-page, #fff);
  border: 1px solid var(--color-border, #eee);
}

/* El logo se escala con el hueco sin recortarse: la regla general de las
   imágenes de tarjeta usa object-fit: cover, que aquí lo cortaría. */
.blog-card__placeholder img {
  width: min(60%, 220px);
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  transform: none !important;
}

/* La tarjeta sin imagen conserva su proporción; el destacado no la fija: su
   columna ya define el alto (align-items: stretch) y forzarla lo desbordaba
   sobre el texto. */
.blog-card__media:has(.blog-card__placeholder) { aspect-ratio: 8 / 5; }
.blog-featured__media:has(.blog-card__placeholder) {
  aspect-ratio: auto;
  height: 100%;
  min-height: 14rem;
}
.nav-links a { text-decoration: none; }
.landing-bento__grid:has(.landing-bento__card--editable) { height: auto; grid-template-areas: none; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; grid-auto-rows: minmax(15rem,auto); }
.landing-bento__card--editable { grid-area: auto; min-height: 15rem; }
.person-avatar { object-fit: cover; }
@media(max-width:620px) { .landing-bento__grid:has(.landing-bento__card--editable) { grid-template-columns: 1fr; } }
@media (max-width:1100px) {
  .pricing-sticky-region > .proof-pricing { margin-top: 0; }
  .pricing-sticky-region .proof > .container > .section-heading { max-width: none; }
}
@media (max-width:782px) { .admin-bar .site-header { top: 46px; } }
.how-animation__heading { max-width:var(--container-narrow); margin-bottom:0; }
.how-animation__heading h1 { font-size:var(--font-size-3xl); }
.how-animation__media:not(:empty) { margin-top:var(--space-5); }