/* ==========================================================
   AAM · Contenidos dinámicos (popups y secciones de contenidos_destacados)
   Versión en el sistema de diseño para las páginas que no cargan style.css.
   El JS (js/contenidos-dinamicos.js) sigue aplicando los estilos_json de la BD.
   ========================================================== */

.contenido-modal {
    display: none; position: fixed; inset: 0; z-index: 99999;
    background: rgba(0, 11, 31, .72); backdrop-filter: blur(6px);
    justify-content: center; align-items: center; padding: var(--esp-4); overflow-y: auto;
    opacity: 0; transition: opacity .3s ease;
}
.contenido-modal.show { opacity: 1; }
.contenido-modal-content {
    position: relative; width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto;
    background: var(--superficie); color: var(--texto); border-radius: var(--radio-tarjeta);
    padding: var(--esp-12) var(--esp-8) var(--esp-8);
    box-shadow: 0 24px 64px rgba(0, 11, 31, .35);
    transform: translateY(16px); transition: transform .3s ease;
}
.contenido-modal.show .contenido-modal-content { transform: none; }
.contenido-modal-content:focus { outline: none; }
.contenido-modal-content:focus-visible { outline: none; }
.modal-close {
    position: absolute; top: var(--esp-4); right: var(--esp-4); width: 40px; height: 40px;
    display: grid; place-items: center; background: none; color: var(--texto-suave);
    border: 1px solid var(--linea); border-radius: var(--radio-control); cursor: pointer;
}
.modal-close:hover { color: var(--texto); border-color: var(--borde-control); }
.modal-icon {
    width: 56px; height: 56px; margin: 0 auto var(--esp-6); display: grid; place-items: center;
    background: var(--marca-azul-tinte); color: var(--color-primary, var(--marca-azul)); border-radius: var(--radio-control);
}
.modal-icon i { font-size: 26px; color: inherit; }
.modal-title { font: 600 28px/1.2 var(--font-display); color: var(--texto); text-align: center; margin: 0 0 var(--esp-6); }
.modal-body { font: 400 16px/1.6 var(--font-sans); color: var(--texto-suave); }
.modal-body p + p { margin-top: var(--esp-3); }
.modal-body a { color: var(--enlace); }
.modal-btn {
    display: flex; margin: var(--esp-8) auto 0; min-height: 44px; padding: var(--esp-3) var(--esp-6);
    font: 600 15px/20px var(--font-sans); letter-spacing: .02em; cursor: pointer;
    background: var(--color-primary, var(--primario)); color: #fff; border: 0; border-radius: var(--radio-control);
}
.modal-btn:hover { filter: brightness(.92); }

.contenido-seccion-destacada { padding: var(--esp-12) 0; background: var(--marca-azul-tinte); }
.contenido-seccion-destacada .container { max-width: var(--ancho-max); margin: 0 auto; padding: 0 var(--esp-6); }
.seccion-header { display: flex; align-items: center; gap: var(--esp-4); margin-bottom: var(--esp-4); }
.seccion-icon {
    width: 48px; height: 48px; flex: none; display: grid; place-items: center;
    background: var(--superficie); color: var(--color-primary, var(--marca-azul)); border-radius: var(--radio-control);
}
.seccion-icon i { font-size: 22px; }
.seccion-title { font: 600 28px/1.2 var(--font-display); color: var(--texto); }
.seccion-body { font: 400 16px/1.6 var(--font-sans); color: var(--texto-suave); max-width: 72ch; }
.seccion-body p + p { margin-top: var(--esp-3); }
.seccion-cta { margin-top: var(--esp-6); }
.btn-seccion {
    display: inline-flex; align-items: center; gap: var(--esp-2); min-height: 44px; padding: var(--esp-3) var(--esp-6);
    font: 600 15px/20px var(--font-sans); text-decoration: none; color: #fff;
    background: var(--color-primary, var(--primario)); border-radius: var(--radio-control);
}
.btn-seccion:hover { filter: brightness(.92); }
@media (max-width: 640px) {
    .contenido-modal-content { padding: var(--esp-12) var(--esp-6) var(--esp-6); }
    .modal-title, .seccion-title { font-size: 22px; }
}

/* Dentro de páginas en modo oscuro (Premio Mercurio): la sección toma la superficie oscura */
[data-theme="dark"] .contenido-seccion-destacada { background: var(--superficie); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
[data-theme="dark"] .seccion-icon { background: var(--mercurio-petroleo); color: var(--mercurio-lima); }
[data-theme="dark"] .btn-seccion { background: var(--primario); color: var(--sobre-primario); }