/* ═══════════════════════════════════════════════════════════════════
   COMPONENTE: CÓDIGO HTML / EMBED
   ═══════════════════════════════════════════════════════════════════ */

.comp-html--space-none   { padding-block: 0; }
.comp-html--space-small  { padding-block: clamp(12px, 2vw, 20px); }
.comp-html--space-normal { padding-block: clamp(28px, 4vw, 56px); }
.comp-html--space-large  { padding-block: clamp(48px, 7vw, 96px); }

.comp-html--bg-transparent { background: transparent; }
.comp-html--bg-white       { background: #ffffff; }
.comp-html--bg-alt         { background: var(--color-bg-alt, #f5f6fa); }

.comp-html--bg-dark {
    background: var(--color-brand-primary, #405481);
    color: #ffffff;
}

.comp-html__inner { width: 100%; }

.comp-html__inner--narrow {
    max-width: 720px;
    margin-inline: auto;
}

/* Embeds responsivos por defecto */
.comp-html__inner iframe,
.comp-html__inner video,
.comp-html__inner embed,
.comp-html__inner object {
    max-width: 100%;
}

.comp-html__inner img {
    max-width: 100%;
    height: auto;
}

/* Contenedor de video 16:9 si el embed viene sin dimensiones */
.comp-html__inner .responsive-embed {
    position: relative;
    aspect-ratio: 16 / 9;
}

.comp-html__inner .responsive-embed > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}