/* Estilos de refuerzo para edicion07.html.
   Los bloques de los 9 artículos usan clases "cid-*" nuevas que no existen en
   mbr-additional.css (ese archivo solo define reglas para los cid de la edición 06).
   Aquí se restituyen, por tipo de bloque, los mismos valores que la edición 06 usa
   para esas clases genéricas, para que el resultado visual sea idéntico.
   Nota: assets/theme/css/style.css define "section { background-color: #fff; }"
   con especificidad real, así que las reglas de fondo de aquí necesitan
   especificidad normal (no :where()) para poder ganar esa base. La única
   excepción es .article12, que si reutiliza un cid real de la edición 06
   (la Carta Editorial, cid-vfpJGO0eKs): ahí sí se usa :where() para no pisar
   sus valores propios. */
.header14 { padding-top: 10rem; padding-bottom: 10rem; }
@media (max-width: 767px) {
  .header14 .card-wrapper { padding: 2rem 1.5rem; margin-bottom: 1rem; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .header14 .card-wrapper { padding: 2.25rem; }
}
@media (min-width: 992px) {
  .header14 .card-wrapper { padding: 4rem; }
}

.article15 { padding-top: 5rem; padding-bottom: 5rem; background-color: #f7f7f7; }
.article15 .mbr-text { color: #000000; text-align: justify; }
.article15 .mbr-section-subtitle { color: #003a70; }

:where(.article12) { padding-top: 5rem; padding-bottom: 5rem; background-color: #ffffff; }
:where(.article12) .mbr-text { color: #000000; text-align: justify; }
:where(.article12) .mbr-section-subtitle { color: #000000; }
:where(.article12) .mbr-section-title { color: #003a70; }
.cid-vfr07legal { padding-top: 3rem; padding-bottom: 3rem; }
.cid-vfr07legal .mbr-text { color: #000000; text-align: center; font-size: 1rem; }
.cid-vfr07legal img { border-radius: 0 !important; max-width: 150px; margin: auto; }
@media (max-width: 767px) {
  .cid-vfr07legal img { max-width: 75px; }
}

.start.article4 { padding-top: 8rem; padding-bottom: 8rem; background-color: #ffffff; }
.start.article4 .mbr-section-title,
.start.article4 .mbr-text,
.start.article4 .mbr-section-btn { color: #000000; }
.start.article4 .row { align-items: center; }
/* Marca manual para alternar el fondo gris suave de la edición 6 (#f7f7f7)
   en secciones puntuales que Jesús vaya indicando (figuras o bloques de texto). */
.start.article4.bg-alt,
.image01.bg-alt,
.article12.bg-alt,
.article15.bg-alt { background-color: #f7f7f7; }

/* Ajustes puntuales de tamaño de imagen que Jesús va indicando por figura. */
@media (min-width: 992px) {
  #article04-a1-1 .image-wrapper,
  #article04-a1-2 .image-wrapper,
  #article04-a1-3 .image-wrapper,
  #article04-a2-1 .image-wrapper,
  #article04-a2-2 .image-wrapper,
  #article04-a2-3 .image-wrapper,
  #article04-a2-4 .image-wrapper,
  #article04-a2-5 .image-wrapper,
  #article04-a3-1 .image-wrapper,
  #article04-a4-1 .image-wrapper,
  #article04-a4-2 .image-wrapper,
  #article04-a6-1 .image-wrapper,
  #article04-a6-2 .image-wrapper { width: 53.33%; }
}

/* Tarjeta de reseña (bloques "Renueva tus conocimientos"): portada a la
   izquierda y texto a la derecha, tarjeta blanca sobre fondo gris suave.
   Se omite el recorte de altura fija para mostrar completas las portadas
   verticales de libro y de cartel de película. */
.cid-vfr07cover { padding-top: 8rem; padding-bottom: 8rem; background-color: #f7f7f7; }
.cid-vfr07cover .card-wrapper { overflow: hidden; background: #ffffff; }
.cid-vfr07cover .row { align-items: center; margin-right: -1rem; margin-left: -1rem; }
.cid-vfr07cover .image-wrapper { padding: 0 1rem; }
.cid-vfr07cover .text-wrapper { padding: 4rem 3rem; }
@media (min-width: 768px) and (max-width: 991px) {
  .cid-vfr07cover .text-wrapper { padding: 2.25rem; }
}
@media (max-width: 767px) {
  .cid-vfr07cover .text-wrapper { padding: 1.5rem; }
}
.cid-vfr07cover .mbr-section-title { color: #003a70; }
.cid-vfr07cover .mbr-text { color: #000000; text-align: justify; }

.image01 { padding-top: 6rem; padding-bottom: 6rem; background-color: #ffffff; }

.article17 { padding-top: 5rem; padding-bottom: 5rem; background-color: #ffffff; }
.article17 .counter-container ol { margin-bottom: 0; padding-left: 2.25rem; counter-reset: myCounter; }
.article17 .counter-container ol li { margin-bottom: 2rem; list-style: none; position: relative; }
.article17 .counter-container ol li:before { font-weight: 700; position: absolute; left: -1.5em; counter-increment: myCounter; content: counter(myCounter); color: #003a70; display: flex; align-items: center; justify-content: center; }
.article17 .mbr-section-title { text-align: justify; color: #003a70; }
.article17 .mbr-section-subtitle { text-align: center; }

/* ── Color por sección ──────────────────────────────────────────────
   Los subtítulos de los artículos, los marcadores de las referencias y
   el subtítulo «Referencias» toman el color de su sección (el mismo del
   fondo del contenedor en el banner del título). «Autoría situada»
   permanece siempre en azul (regla .article15 .mbr-section-subtitle).
   Las secciones azules (Tendencias, a1–a2) usan el color por defecto. */

/* Energía y sociedad (a3) — verde */
[id^="article12-a3-"] .mbr-section-title,
#article17-a3 .mbr-section-title,
#article17-a3 .counter-container ol li:before { color: #7EBB00; }

/* Ventana a las energías renovables (a4–a6) — morado */
[id^="article12-a4-"] .mbr-section-title,
[id^="article12-a5-"] .mbr-section-title,
[id^="article12-a6-"] .mbr-section-title,
#article17-a4 .mbr-section-title,
#article17-a5 .mbr-section-title,
#article17-a6 .mbr-section-title,
#article17-a4 .counter-container ol li:before,
#article17-a5 .counter-container ol li:before,
#article17-a6 .counter-container ol li:before { color: #a11194; }

/* Entrevista con (a7) — dorado (esta sección no lleva referencias) */
[id^="article12-a7-"] .mbr-section-title { color: #C69113; }

/* Renueva tus conocimientos (a8–a9) — naranja */
[id^="article12-a8-"] .mbr-section-title,
[id^="article12-a9-"] .mbr-section-title,
#article17-a8 .mbr-section-title,
#article17-a9 .mbr-section-title,
#article17-a8 .counter-container ol li:before,
#article17-a9 .counter-container ol li:before { color: #F79420; }

.footer1 { padding-top: 6rem; padding-bottom: 6rem; background-image: url('../images/mbr-1920x1280.jpg'); background-size: cover; background-position: center center; }
.footer1 .footer-col { justify-content: space-between; display: flex; }
@media (max-width: 767px) {
  .footer1 .footer-col { flex-direction: column; }
}
.footer1 .row { background: #ffffff; padding: 4rem 3rem; border-radius: 2rem; margin: 0; }
@media (max-width: 767px) {
  .footer1 .row { padding: 2rem 0.5rem; text-align: center; }
  .footer1 .social-row { justify-content: center; }
  .footer1 .mbr-section-btn { text-align: center; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .footer1 .row { padding: 2.25rem 1.25rem; }
}
@media (min-width: 992px) {
  .footer1 .row { padding: 4rem 3rem; }
}
.footer1 .social-row { display: flex; flex-wrap: wrap; }
.footer1 .soc-item { margin: 8px; }
.footer1 .soc-item a .mbr-iconfont { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 100%; font-size: 20px; background-color: #edefeb; color: #003a70; transition: all 0.3s ease-in-out; }
.footer1 .soc-item a:hover .mbr-iconfont,
.footer1 .soc-item a:focus .mbr-iconfont { background-color: #f7f7f7; }
.footer1 .list { list-style: none; padding-left: 0; }
@media (max-width: 991px) {
  .footer1 .list { margin-bottom: 2rem; }
}
@media (min-width: 992px) {
  .footer1 .list { margin-bottom: 0rem; }
}
.footer1 .list,
.footer1 .item-wrap { color: #232323; }
.footer1 .mbr-section-subtitle { color: #003a70; }