/* =================================================================
   BLOG · LAS PIEZAS DE UNA ENTRADA (bloques del editor)
   Valores de material/mockup-blog-entrada.html. En la web solo en las
   entradas del blog (head.php: blog-entrada.php) y en el editor de
   «Entradas del blog» (blog-bloques.php). Por eso los bloques nativos van
   con :is(.bl-body, .editor-styles-wrapper …): la misma regla vale en la
   web y en el editor (también en su iframe). La maquetación de la entrada
   (cabecera, índice, autor…) está en 26-blog-entrada.css.
   Nada se mueve al cargar (CLS 0); los efectos al pasar el ratón se apagan
   con prefers-reduced-motion.
   ================================================================= */

:root {
    --bb-ink: #0D1411;
    --bb-ink2: #3F4F4A;
    --bb-mut: #66766F;
    --bb-g: #1E9E5A;
    --bb-gd: #1A6B40;
    --bb-gm: #5BD08F;
    --bb-gl: #E9F7EF;
    --bb-gb: #CDEBD9;
    --bb-line: rgba(13, 20, 17, .09);
    --bb-metal-ink: linear-gradient(100deg, #0D1411 0%, #0D1411 38%, #5E6E68 50%, #0D1411 62%, #0D1411 100%);
    --bb-metal-g: linear-gradient(100deg, #1A6B40 0%, #1E9E5A 36%, #8FE6B5 50%, #1E9E5A 64%, #1A6B40 100%);
    --bb-metal-bg: linear-gradient(135deg, #14634A 0%, #1E9E5A 55%, #2BB56C 100%);
    --bb-hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    --bb-font: 'Manrope Cm', 'Manrope Cm Fb', 'Manrope', 'Segoe UI', Arial, sans-serif;
    /* «glass» de la maqueta sobre fondo blanco: tarjeta blanca con su sombra (sin backdrop-filter: aquí no se ve y cuesta) */
    --bb-glass-bg: rgba(255, 255, 255, .76);
    --bb-glass-sh: 0 22px 46px -30px rgba(13, 40, 25, .4), 0 2px 6px rgba(13, 20, 17, .04), inset 0 1px 0 #fff;
    --bb-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l9-10'/%3E%3C/svg%3E");
}

/* ---------- Texto y bloques nativos ---------- */

.bl-body {
    font-family: var(--bb-font);
    color: var(--bb-ink2);
}

:is(.bl-body, .editor-styles-wrapper .is-root-container) {
    counter-reset: bl-h2;
}

.bl-body :is(h2, h3, h4, h5, h6) {
    font-family: var(--bb-font);
}

.bl-body p {
    margin: 0 0 22px;
    font-size: 18px;
    line-height: 1.78;
    color: var(--bb-ink2);
}

.bl-body :is(p, li, td) :is(b, strong) {
    color: var(--bb-ink);
}

/* Enlaces del texto: subrayado verde que se rellena al pasar el ratón */
.bl-body :is(p, li, td, th) a:not([class]) {
    color: var(--bb-gd);
    font-weight: 700;
    text-decoration: none;
    background-image: linear-gradient(var(--bb-gm), var(--bb-gm));
    background-size: 100% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .3s;
}

.bl-body :is(p, li, td, th) a:not([class]):hover {
    background-image: var(--bb-metal-bg);
    background-size: 100% 100%;
    color: #fff;
}

/* Títulos h2: hexágono numerado con contadores CSS (el texto no se toca). En
   la web, los que marca opogc_l_blog_indice (.bl-h2: los del texto y el de la
   FAQ); en el editor, los core/heading. */
:is(.bl-body h2.bl-h2, .editor-styles-wrapper .is-root-container > h2[data-type="core/heading"]) {
    position: relative;
    margin: 56px 0 18px;
    font-family: var(--bb-font);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: var(--bb-ink);
    counter-increment: bl-h2;
    scroll-margin-top: 96px;
}

:is(.bl-body h2.bl-h2, .editor-styles-wrapper .is-root-container > h2[data-type="core/heading"])::before {
    content: counter(bl-h2);
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 38px;
    margin-right: 12px;
    vertical-align: -6px;
    clip-path: var(--bb-hex);
    background: var(--bb-metal-bg);
    color: #fff;
    font: 800 14px/1 var(--bb-font);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.bl-body > h2.bl-h2:first-child {
    margin-top: 0;
}

.bl-body h3 {
    margin: 34px 0 12px;
    font-family: var(--bb-font);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--bb-ink);
    scroll-margin-top: 96px;
}

/* Listas con viñetas: hexágonos. Las numeradas, con su número en verde. */
:is(.bl-body ul.wp-block-list, .bl-body > ul:not([class]), .editor-styles-wrapper ul[data-type="core/list"]) {
    display: grid;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

:is(.bl-body ul.wp-block-list, .bl-body > ul:not([class]), .editor-styles-wrapper ul[data-type="core/list"]) > li {
    position: relative;
    padding-left: 30px;
    font-size: 17.5px;
    line-height: 1.65;
    color: var(--bb-ink2);
}

:is(.bl-body ul.wp-block-list, .bl-body > ul:not([class]), .editor-styles-wrapper ul[data-type="core/list"]) > li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    width: 12px;
    height: 13px;
    clip-path: var(--bb-hex);
    background: var(--bb-metal-bg);
}

:is(.bl-body, .editor-styles-wrapper) li :is(ul.wp-block-list, ul[data-type="core/list"]) {
    margin: 10px 0 0;
}

:is(.bl-body, .editor-styles-wrapper) li :is(ul.wp-block-list, ul[data-type="core/list"]) > li::before {
    top: 10px;
    width: 10px;
    height: 11px;
    background: #9ED9B8;
}

:is(.bl-body ol.wp-block-list, .bl-body > ol:not([class])) {
    display: grid;
    gap: 10px;
    margin: 0 0 24px;
    padding-left: 1.5rem;
}

:is(.bl-body ol.wp-block-list, .bl-body > ol:not([class])) > li {
    padding-left: 4px;
    font-size: 17.5px;
    line-height: 1.65;
}

:is(.bl-body ol.wp-block-list, .bl-body > ol:not([class])) > li::marker {
    color: var(--bb-g);
    font-weight: 800;
}

/* Tablas: la «tabla premium» de la maqueta. Las del editor (.wp-block-table)
   y las del blog de siempre (.bl-tabla). */
:is(.bl-body .wp-block-table, .bl-body .bl-tabla, .editor-styles-wrapper .wp-block-table) {
    margin: 4px 0 30px;
    overflow: hidden;
    border: 1px solid var(--bb-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 36px -28px rgba(13, 40, 25, .45);
}

:is(.bl-body, .editor-styles-wrapper) :is(.wp-block-table, .bl-tabla) table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
}

:is(.bl-body, .editor-styles-wrapper) :is(.wp-block-table, .bl-tabla) :is(td, tbody th) {
    padding: 12px 16px;
    border: 0;
    border-top: 1px solid var(--bb-line);
    color: var(--bb-ink2);
    text-align: left;
    vertical-align: top;
}

:is(.bl-body, .editor-styles-wrapper) :is(.wp-block-table, .bl-tabla) thead {
    border: 0;
}

:is(.bl-body, .editor-styles-wrapper) :is(.wp-block-table, .bl-tabla) thead th {
    padding: 12px 16px;
    border: 0;
    background: var(--bb-metal-bg);
    color: #fff;
    font: 800 11.5px/1.35 var(--bb-font);
    letter-spacing: .12em;
    text-align: left;
    text-transform: uppercase;
}

:is(.bl-body, .editor-styles-wrapper) :is(.wp-block-table, .bl-tabla) tbody tr:nth-child(even) > * {
    background: #F8FBF9;
}

.bl-body :is(.wp-block-table, .bl-tabla) tbody tr:hover > * {
    background: #EEF8F2;
}

:is(.bl-body, .editor-styles-wrapper) :is(.wp-block-table, .bl-tabla) tbody th {
    font-weight: 700;
    color: var(--bb-ink);
}

:is(.bl-body, .editor-styles-wrapper) .wp-block-table :is(figcaption, .wp-element-caption) {
    margin: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--bb-line);
    font-size: 13px;
    color: var(--bb-mut);
    text-align: left;
}

/* Imágenes: esquinas redondeadas y pie de foto. Ancho y alto los pone
   WordPress (wp_filter_content_tags, con lazy y srcset): height:auto
   respeta la proporción y el hueco está reservado antes de que llegue. */
:is(.bl-body, .editor-styles-wrapper) .wp-block-image {
    margin: 8px 0 34px;
}

:is(.bl-body, .editor-styles-wrapper) .wp-block-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 22px;
    box-shadow: 0 30px 60px -36px rgba(13, 40, 25, .55);
}

:is(.bl-body, .editor-styles-wrapper) .wp-block-image.aligncenter img {
    margin-inline: auto;
}

:is(.bl-body, .editor-styles-wrapper) .wp-block-image :is(figcaption, .wp-element-caption) {
    max-width: 600px;
    margin: 12px auto 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--bb-mut);
    text-align: center;
}

@media (min-width: 761px) {
    .bl-body .wp-block-image.alignleft {
        float: left;
        max-width: 48%;
        margin: 6px 24px 16px 0;
    }

    .bl-body .wp-block-image.alignright {
        float: right;
        max-width: 48%;
        margin: 6px 0 16px 24px;
    }
}

/* Separador: tres hexágonos. */
:is(.bl-body, .editor-styles-wrapper) hr.wp-block-separator {
    width: 48px;
    height: 12px;
    margin: 40px auto;
    border: 0;
    opacity: 1;
    background: center / 48px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cg fill='%231E9E5A'%3E%3Cpath d='M6 0l5.2 3v6L6 12L.8 9V3z'/%3E%3Cpath d='M24 0l5.2 3v6L24 12l-5.2-3V3z' opacity='.55'/%3E%3Cpath d='M42 0l5.2 3v6L42 12l-5.2-3V3z' opacity='.25'/%3E%3C/g%3E%3C/svg%3E");
}

:is(.bl-body, .editor-styles-wrapper) hr.wp-block-separator::before {
    content: none;
}

/* Citas del blog de siempre («> »): como la cita de la maqueta. */
.bl-body > blockquote {
    margin: 8px 0 34px;
    padding: 22px 26px;
    border: 1px solid var(--bb-line);
    border-radius: 22px;
    background: #F6FAF8;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.55;
    color: var(--bb-ink);
}

/* ---------- opv/en-corto: «En corto» ---------- */

.bl-corto {
    margin: 0 0 34px;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 22px;
    background: var(--bb-glass-bg);
    box-shadow: var(--bb-glass-sh);
    font-family: var(--bb-font);
    scroll-margin-top: 96px;
}

.bl-corto .bl-corto__h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--bb-gd);
}

.bl-corto .bl-hx {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--bb-gl);
    color: var(--bb-gd);
}

.bl-corto .bl-hx svg {
    width: 15px;
    height: 15px;
}

.bl-corto .bl-corto__l {
    display: grid;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.bl-corto .bl-corto__l li {
    position: relative;
    padding-left: 28px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--bb-ink2);
}

.bl-corto .bl-corto__l li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    background: var(--bb-g);
    -webkit-mask: var(--bb-check) center / contain no-repeat;
    mask: var(--bb-check) center / contain no-repeat;
}

.bl-corto .bl-corto__l :is(strong, b) {
    font-weight: 800;
    color: var(--bb-ink);
}

/* ---------- opv/cifras: el «dato clave» ---------- */

.bl-cifras,
.bl-body .bl-cifras {
    --n: 3;
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    gap: 12px;
    margin: 8px 0 30px;
    padding: 0;
    list-style: none;
}

.bl-cifras--2 { --n: 2; }
.bl-cifras--4 { --n: 4; }
.bl-body .bl-cifras--2 { --n: 2; }
.bl-body .bl-cifras--4 { --n: 4; }

.bl-cifras .bl-cifra {
    padding: 18px 16px;
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 20px;
    background: var(--bb-glass-bg);
    box-shadow: var(--bb-glass-sh);
    font-family: var(--bb-font);
    text-align: center;
}

.bl-cifras .bl-cifra__n {
    display: block;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--bb-ink);
    font-variant-numeric: tabular-nums;
}

.bl-cifras .bl-cifra__t {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bb-mut);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .bl-cifras .bl-cifra__n {
        background: var(--bb-metal-ink) 0 0 / 260% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }

    .bl-cifras .bl-cifra--ultima .bl-cifra__n {
        background-image: var(--bb-metal-g);
    }
}

/* ---------- opv/aviso: consejo (verde) y ojo (ámbar) ---------- */

.bl-aviso {
    display: flex;
    gap: 14px;
    margin: 6px 0 28px;
    padding: 18px 20px;
    border: 1px solid var(--bb-gb);
    border-radius: 18px;
    background: #F2FAF5;
    font-family: var(--bb-font);
}

.bl-aviso--ojo {
    border-color: #F3DDB0;
    background: #FFF6E5;
}

.bl-aviso .bl-aviso__ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--bb-metal-bg);
    color: #fff;
}

.bl-aviso--ojo .bl-aviso__ic {
    background: linear-gradient(180deg, #F2C14E, #B7791F);
}

.bl-aviso .bl-aviso__ic svg {
    width: 18px;
    height: 18px;
}

.bl-aviso .bl-aviso__tx {
    min-width: 0;
}

.bl-aviso .bl-aviso__t {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--bb-gd);
}

.bl-aviso--ojo .bl-aviso__t {
    color: #8A5A0B;
}

.bl-aviso .bl-aviso__x {
    margin: 4px 0 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--bb-ink2);
}

/* ---------- opv/descargas-boe: dos tarjetas por fila ---------- */

.bl-desc {
    margin: 6px 0 30px;
    font-family: var(--bb-font);
}

.bl-desc .bl-desc__h {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--bb-gd);
}

.bl-desc .bl-desc__l {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bl-desc .bl-desc__i {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 18px;
    background: var(--bb-glass-bg);
    box-shadow: var(--bb-glass-sh);
    transition: transform .3s, box-shadow .3s;
}

.bl-desc .bl-desc__i:hover {
    transform: translateY(-2px);
}

.bl-desc .bl-desc__bt {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.bl-desc .bl-desc__ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 44px;
    border: 1px solid var(--bb-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 10px -6px rgba(13, 20, 17, .3);
    font-size: 9px;
    font-weight: 800;
    color: var(--bb-gd);
}

.bl-desc :is(.bl-desc__ic--pdf, .bl-desc__ic--boe) {
    color: #C8102E;
}

.bl-desc :is(.bl-desc__ic--onu, .bl-desc__ic--ue) {
    color: #1A4D8F;
}

.bl-desc .bl-desc__n {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bb-ink);
}

.bl-desc .bl-desc__m {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bb-mut);
    font-variant-numeric: tabular-nums;
}

.bl-desc .bl-desc__acc {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.bl-desc .bl-desc__b {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--bb-line);
    border-radius: 10px;
    background: #fff;
    color: var(--bb-ink2);
    font: 800 12.5px/1 var(--bb-font);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s, color .2s, filter .2s;
}

.bl-desc .bl-desc__b:hover {
    border-color: #BFE6CF;
    color: var(--bb-gd);
}

.bl-desc .bl-desc__b--pdf {
    border: 0;
    background: var(--bb-metal-bg);
    color: #fff;
}

.bl-desc .bl-desc__b--pdf:hover {
    color: #fff;
    filter: brightness(1.06);
}

.bl-desc .bl-desc__b:focus-visible {
    outline: 3px solid rgba(30, 158, 90, .45);
    outline-offset: 2px;
}

.bl-desc .bl-desc__b svg {
    flex: none;
    width: 14px;
    height: 14px;
}

/* ---------- opv/cita: la cita del autor ---------- */

.bl-cita {
    position: relative;
    margin: 8px 0 34px;
    padding: 26px 26px 22px 30px;
    border: 1px solid var(--bb-line);
    border-radius: 22px;
    background: #F6FAF8;
    font-family: var(--bb-font);
}

.bl-cita::before {
    content: '\201C';
    position: absolute;
    left: 18px;
    top: -18px;
    font-size: 90px;
    font-weight: 800;
    line-height: 1;
    color: var(--bb-g);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .bl-cita::before {
        background: var(--bb-metal-g);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

.bl-cita .bl-cita__q {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.bl-cita .bl-cita__q p {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -.01em;
    color: var(--bb-ink);
}

.bl-cita .bl-cita__a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bb-mut);
}

.bl-cita .bl-cita__a b {
    color: var(--bb-ink);
}

.bl-cita .bl-cita__av {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bb-metal-bg);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--bb-gb);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    object-fit: cover;
}

/* ---------- opv/tema-gratis: la franja del tema gratis ---------- */

.bl-gift {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: 10px 0 34px;
    padding: 20px 22px;
    border-radius: 24px;
    background: var(--bb-metal-bg);
    box-shadow: 0 26px 50px -26px rgba(20, 99, 74, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
    color: #fff;
    font-family: var(--bb-font);
}

.bl-gift .bl-gift__hx {
    display: grid;
    place-items: center;
    width: 54px;
    height: 60px;
    clip-path: var(--bb-hex);
    background: #fff;
    color: var(--bb-gd);
    font-size: 18px;
    font-weight: 800;
}

.bl-gift .bl-gift__tx b {
    display: block;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.bl-gift .bl-gift__tx small {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: #DFF7EA;
}

.bl-gift .bl-gift__bw {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .4);
    color: var(--bb-gd);
    font-size: 14.5px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.bl-gift .bl-gift__bw:hover {
    color: var(--bb-gd);
}

.bl-gift .bl-gift__bw:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .7);
    outline-offset: 3px;
}

.bl-gift .bl-gift__bw svg {
    width: 15px;
    height: 15px;
}

/* ---------- opv/faq: preguntas frecuentes ---------- */

.bl-faq {
    margin: 0;
}

.bl-fqs {
    display: grid;
    gap: 10px;
    margin: 4px 0 30px;
}

.bl-fq {
    overflow: hidden;
    border: 1px solid var(--bb-line);
    border-radius: 18px;
    background: #fff;
    font-family: var(--bb-font);
    transition: box-shadow .3s, border-color .3s;
}

.bl-fq[open] {
    border-color: var(--bb-gb);
    box-shadow: 0 18px 36px -28px rgba(20, 99, 74, .5);
}

.bl-fq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    font-size: 16.5px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--bb-ink);
}

.bl-fq summary::-webkit-details-marker {
    display: none;
}

.bl-fq summary:focus-visible {
    outline: 3px solid rgba(30, 158, 90, .45);
    outline-offset: -3px;
}

.bl-fq summary i {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bb-gl);
    color: var(--bb-g);
    transition: transform .3s, background .3s, color .3s;
}

.bl-fq[open] summary i {
    transform: rotate(45deg);
    background: var(--bb-metal-bg);
    color: #fff;
}

.bl-fq summary svg {
    width: 14px;
    height: 14px;
}

.bl-body .bl-fq p {
    margin: 0;
    padding: 0 18px 18px;
    font-size: 16px;
    line-height: 1.65;
}

/* ---------- opv/fuentes: caja de líneas discontinuas ---------- */

.bl-src {
    margin: 34px 0 0;
    padding: 20px 22px;
    border: 1px dashed #C9D5CF;
    border-radius: 20px;
    font-family: var(--bb-font);
}

.bl-src .bl-src__h {
    margin: 0 0 10px;
    font-family: var(--bb-font);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--bb-mut);
}

.bl-src .bl-src__l {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 20px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--bb-ink2);
}

.bl-src .bl-src__l a {
    color: var(--bb-gd);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- opv/temario-boe: los 25 temas con sus normas ---------- */

.bl-temas,
.bl-body .bl-temas {
    display: grid;
    gap: 10px;
    margin: 6px 0 30px;
    padding: 0;
    list-style: none;
    font-family: var(--bb-font);
    counter-reset: tema;
}

.bl-temas .bl-tema {
    position: relative;
    counter-increment: tema;
    padding: 16px 18px 16px 58px;
    border: 1px solid var(--bb-line);
    border-radius: 18px;
    background: #fff;
    scroll-margin-top: 96px;
}

.bl-temas .bl-tema::before {
    content: counter(tema);
    position: absolute;
    left: 16px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 29px;
    clip-path: var(--bb-hex);
    background: var(--bb-gl);
    color: var(--bb-gd);
    font-size: 11.5px;
    font-weight: 800;
}

.bl-temas .bl-tema__t {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--bb-ink);
}

.bl-temas :is(.bl-tema__bloques, .bl-tema__leyes) {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bl-temas .bl-tema__leyes {
    margin-top: 6px;
    padding-left: 14px;
}

.bl-temas :is(.bl-tema__b, .bl-tema__leyes li) {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--bb-ink2);
}

.bl-temas .bl-tema__bn {
    font-weight: 800;
    color: var(--bb-ink);
}

.bl-temas .bl-ley {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-left: 4px;
}

.bl-temas .bl-ley__o {
    padding: 2px 6px;
    border-radius: 6px;
    background: #FCEDEF;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #A3102A;
}

.bl-temas .bl-ley a {
    color: var(--bb-gd);
    font-size: 13px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

/* ---------- opv/video: el vídeo que se carga al pulsar ---------- */

.bl-video {
    position: relative;
    margin: 8px 0 34px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 22px;
    background: #10171c;
    box-shadow: 0 30px 60px -36px rgba(13, 40, 25, .55);
}

.bl-video__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: 100%;
    padding: 24px;
    border: 0;
    background:
        radial-gradient(ellipse 60% 70% at 30% 30%, rgba(91, 208, 143, .32), transparent 60%),
        linear-gradient(135deg, #0F2A1F 0%, #14402D 55%, #10171c 100%);
    color: #fff;
    font-family: var(--bb-font);
    text-align: center;
    cursor: pointer;
}

.bl-video__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bb-metal-bg);
    box-shadow: 0 10px 30px rgba(76, 175, 125, .45);
    transition: transform .22s ease;
}

.bl-video__btn:hover .bl-video__play {
    transform: scale(1.08);
}

.bl-video__play svg {
    width: 30px;
    height: 30px;
    margin-left: 4px;
    fill: #fff;
}

.bl-video__tx {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bl-video__k {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8FE6B5;
}

.bl-video__t {
    max-width: 520px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.bl-video__n {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .65);
}

.bl-video__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- Móvil ---------- */

@media (max-width: 760px) {
    .bl-body p {
        font-size: 17px;
    }

    :is(.bl-body h2.bl-h2, .editor-styles-wrapper .is-root-container > h2[data-type="core/heading"]) {
        margin-top: 44px;
        font-size: 25px;
    }

    .bl-body :is(.wp-block-table, .bl-tabla) {
        overflow-x: auto;
    }

    .bl-body :is(.wp-block-table, .bl-tabla) table {
        min-width: 520px;
    }

    .bl-cifras .bl-cifra__n {
        font-size: 30px;
    }

    .bl-desc .bl-desc__l {
        grid-template-columns: minmax(0, 1fr);
    }

    .bl-gift {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
    }

    .bl-gift .bl-gift__bw {
        grid-column: 1 / -1;
    }

    .bl-temas .bl-tema {
        padding-left: 52px;
    }

    .bl-temas .bl-tema::before {
        left: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bl-body :is(p, li, td, th) a:not([class]),
    .bl-desc .bl-desc__i,
    .bl-desc .bl-desc__b,
    .bl-fq,
    .bl-fq summary i,
    .bl-video__play {
        transition: none;
    }

    .bl-desc .bl-desc__i:hover,
    .bl-video__btn:hover .bl-video__play {
        transform: none;
    }
}