.tcp-section { margin-block: 2rem; color: inherit; container-type: inline-size; container-name: tcp-section; }
.tcp-section .tcp-heading { margin: 0 0 1rem; }
.tcp-body { display: flow-root; }
.tcp-section .tcp-image { float: left; width: var(--tcp-image-width, 280px); max-width: 38%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; margin: 0 1.25rem 1rem 0; border: 0; border-radius: 0; box-shadow: none; }
.tcp-body > :first-child:not(.tcp-image) { margin-top: 0; }
/* v1.0.8: alinea visualmente la primera línea con el borde superior de la imagen. */
.tcp-body > p:first-of-type { margin-block-start: -0.35em; }
.tcp-body ul, .tcp-body ol { list-style-position: inside; }
.tcp-body figure, .tcp-body table, .tcp-body .wp-block-table { clear: both; }
.tcp-card { display: flex; align-items: flex-start; gap: 1.25rem; }
.tcp-card .tcp-image { float: none; flex-shrink: 0; margin: 0; }
.tcp-card-text { flex: 1; min-width: 0; }
.tcp-summary p { margin-top: 0; }
.tcp-section .tcp-link { color: #2954E1; text-decoration: underline; }
.tcp-section .tcp-link:hover { color: #000080; }
.tcp-section .tcp-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.tcp-editor-note { font-size: 13px; padding: .6rem; background: #f0f0f0; color: #222; margin-bottom: 1rem; }
.tcp-editor .tcp-editor-body { display: flow-root; }
.tcp-editor .block-editor-inner-blocks { display: contents; }
.tcp-editor .block-editor-block-list__layout { display: contents; }
@media (max-width: 767px) {
  .tcp-section .tcp-image { float: none; display: block; width: var(--tcp-image-width, 280px); max-width: 100%; margin: 0 auto 1rem; }
  .tcp-card { display: block; }
}

/* El ancho útil del bloque gobierna el diseño en tablets, columnas y editor. */
@supports (container-type: inline-size) {
  @media (max-width: 767px) {
    .tcp-section .tcp-image { float: left; display: inline; width: var(--tcp-image-width, 280px); max-width: 38%; margin: 0 1.25rem 1rem 0; }
    .tcp-card { display: flex; }
    .tcp-card .tcp-image { float: none; display: block; margin: 0; }
  }
}
@container tcp-section (max-width: 620px) {
  .tcp-section .tcp-image { float: none; display: block; width: var(--tcp-image-width, 280px); max-width: 100%; margin: 0 auto 1rem; }
  .tcp-card { display: block; }
}

/* Compatibilidad con imágenes envolventes insertadas como HTML.
   Solo esta clase participa; no afecta a destacadas ni a Tiwala Grid.
   !important permite sustituir los estilos inline de las entradas existentes. */
.entry-content figure.tiwala-imagen-envolvente {
  float: left !important;
  width: var(--tcp-image-width, 240px) !important;
  max-width: 38% !important;
  margin: 0 1.25rem 1rem 0 !important;
}
.entry-content figure.tiwala-imagen-envolvente img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .entry-content figure.tiwala-imagen-envolvente {
    float: none !important;
    max-width: 100% !important;
    margin: 0 auto 1rem !important;
  }
}

/* v1.0.3: controles por bloque y apilado obligatorio en móvil. */
.tcp-image-position--right .tcp-image { float:right; margin:0 0 1rem 1.25rem; }
.tcp-image-position--right .tcp-card { flex-direction:row-reverse; }
.tcp-card .tcp-image { float:none; margin:0; }
@container tcp-section (max-width:620px) {
 .tcp-section .tcp-image { float:none; display:block; margin:0 auto 1rem; max-width:100%; }
 .tcp-section.tcp-mobile-width--full .tcp-image { width:100%; }
 .tcp-card { display:block; }
}
@media (max-width:767px) {
 .tcp-section .tcp-image { float:none !important; display:block !important; max-width:100%; margin:0 auto 1rem !important; }
 .tcp-section.tcp-mobile-width--full .tcp-image { width:100%; }
 .tcp-section .tcp-card { display:block; }
}


/* v1.0.9: el desplegable comienza donde se marca el primer bloque que debe plegarse.
   Se reduce solo el espacio superior; el inferior se conserva para separar el H2 siguiente. */
/* v1.0.10: margen superior negativo para compensar el margen inferior del bloque visible anterior. El margen inferior se conserva. */
.tcp-accordion { clear: both; margin-block-start: -.5rem; margin-block-end: 1rem; }
.tcp-accordion > summary { cursor: pointer; color: #2954E1; text-decoration: underline; text-underline-offset: .15em; }
.tcp-accordion > summary:hover { color: #000080; }
.tcp-accordion > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.tcp-accordion-content { padding-block-start: .75rem; }
.tcp-accordion-content > :first-child { margin-top: 0; }