/* ==========================================================================
   SATS — bloques para contenidos cargados desde el panel (plantillas del editor).
   Conviven con el tema original (style.css): usan sus colores y tipografías.
     <section class="bloque">…</section>             <section class="bloque bloque-alt">…</section>
     <div class="media-texto"> <img> <div>texto</div> </div>     (.invertido: foto a la derecha)
     <div class="tarjetas"> <div class="tarjeta">…</div> </div>  (.dos: dos columnas)
     <ul class="lista-check">   <div class="destacado">   <div class="mapa"><iframe></iframe></div>
   ========================================================================== */
.contenido-pagina > .bloque:first-child { padding-top: clamp(40px, 6vw, 80px); }
.contenido-pagina > .bloque:last-child { padding-bottom: clamp(40px, 6vw, 80px); }
.bloque { padding: clamp(28px, 4vw, 48px) max(16px, calc(50% - 650px)); }
.bloque-alt { background: #f3f6f7; }
.bloque-verde { background: var(--theme-color, #026553); color: #e6f2ef; }
.bloque-verde h2, .bloque-verde h3, .bloque-verde h4 { color: #fff; }
.bloque img { max-width: 100%; height: auto; border-radius: 20px; }
.bloque .lead { font-size: 1.2rem; }
.articulo-cuerpo .bloque { padding-inline: 0; }

.antetitulo { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--theme-color, #026553); margin-bottom: .5rem; }
.antetitulo::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--theme-color2, #5cbf14); }
.bloque-verde .antetitulo { color: var(--theme-color2, #5cbf14); }

.media-texto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.media-texto > img, .media-texto > figure img { width: 100%; object-fit: cover; box-shadow: 0 8px 24px rgba(2, 101, 83, .12); }
.media-texto.invertido > img, .media-texto.invertido > figure { order: 2; }
@media (max-width: 991.98px) {
  .media-texto { grid-template-columns: 1fr; }
  .media-texto.invertido > img, .media-texto.invertido > figure { order: 0; }
}

.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin: 1.5rem 0; }
.tarjetas.dos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.tarjeta { background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 6px 24px rgba(16, 24, 40, .08); height: 100%; }
.tarjeta > img:first-child { width: calc(100% + 48px); max-width: none; margin: -24px -24px 18px; border-radius: 20px 20px 0 0; aspect-ratio: 4 / 3; object-fit: cover; }
.tarjeta h3 { font-size: 1.2rem; margin: 0 0 .5rem; }

.lista-check { list-style: none; padding: 0; margin: 0 0 1rem; }
.lista-check li { position: relative; padding: .3rem 0 .3rem 1.8rem; }
.lista-check li::before { content: "\2713"; position: absolute; left: 0; top: .3rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #e6f2ef; color: var(--theme-color, #026553); font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lista-check.columnas { columns: 2 240px; column-gap: 32px; }
.lista-check.columnas li { break-inside: avoid; }

.destacado { background: #f1f9e9; border-left: 4px solid var(--theme-color2, #5cbf14); border-radius: 12px; padding: 18px 22px; margin: 1.25rem 0; }
.destacado p:last-child { margin-bottom: 0; }

.mapa { position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; margin-top: 1rem; }
.mapa iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }