/* ============================================================
   Bloques de case study.
   Un bloque = una sección del caso. Todos comparten la grilla
   .bq para alinearse con el resto de la página.
   ============================================================ */

.bq {
    width: 100%;
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding-inline: var(--padding-lado);
}

/* ============================================================
   1 — Estadística grande
   Una o más estadísticas apiladas a la izquierda (.bq-stat__items) +
   una nota lateral opcional que queda al costado de TODO el grupo,
   no de una estadística individual — por eso la nota es hija directa
   de .bq-stat, hermana de .bq-stat__items, y no de cada .bq-stat__item.
   ============================================================ */
.bq-stat {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--sp-8), 5vw, var(--sp-16));
}
/* Segunda columna opcional (ver render_stat_grande): sólo aparece si el
   bloque trae nota lateral, así los stat_grande de siempre no cambian.
   max-content en vez de 1fr: si no, la columna de números+texto se
   estira a ocupar todo el espacio disponible aunque el texto (topeado
   a 52ch, ver .bq-stat__item) sea mucho más angosto, y la nota queda
   pegada contra el borde derecho con un hueco enorme en el medio. */
.bq-stat--con-nota {
    grid-template-columns: max-content minmax(200px, 260px);
}
@media (max-width: 1100px) {
    .bq-stat--con-nota { grid-template-columns: 1fr; }
}

.bq-stat__items {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--sp-10), 6vw, var(--sp-16));
}

.bq-stat__item {
    display: grid;
    /* minmax(0, 52ch) en vez de 1fr: coincide con el max-width de
       .bq-stat__texto, así la columna no reserva más ancho que el que
       el texto realmente usa (ver .bq-stat--con-nota arriba). Sin nota
       no cambia nada a la vista: el sobrante de la grilla no se ve. */
    grid-template-columns: minmax(240px, auto) minmax(0, 52ch);
    gap: clamp(var(--sp-8), 5vw, var(--sp-16));
    align-items: center;
    margin: 0;
}
@media (max-width: 800px) {
    .bq-stat__item { grid-template-columns: 1fr; gap: var(--sp-6); }
}

.bq-stat__cifra {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding-left: var(--sp-6);
    /* La regla de color a la izquierda es la que identifica el sentido
       del dato; el número siempre va en la escala bordó. */
    border-left: 3px solid var(--bordo-500);
}

.bq-stat__valor {
    font-family: var(--font-titulo);
    font-weight: 700;
    /* Escala propia: este número tiene que dominar la sección */
    font-size: clamp(4rem, 2rem + 9vw, 8.5rem);
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--bordo-300);
    /* Cifras de igual ancho: si el número anima al entrar, no baila */
    font-variant-numeric: tabular-nums;
}

.bq-stat__unidad {
    font-family: var(--font-titulo);
    font-weight: 500;
    font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--bordo-400);
}

.bq-stat__flecha {
    align-self: center;
    width: clamp(28px, 3vw, 44px);
    flex: none;
    color: var(--gris);
}
.bq-stat__flecha svg { width: 100%; height: auto; display: block; }

/* Sentido del dato: si el movimiento fue bueno o malo. Es por ítem
   (bq-stat__item--*), no por grupo — un grupo puede tener una
   estadística buena y otra mala. Va desacoplado de la flecha a
   propósito — "tiempo de tarea −41%" baja y es una buena noticia. */
.bq-stat__item--bueno .bq-stat__flecha { color: var(--exito-texto); }
.bq-stat__item--bueno .bq-stat__cifra  { border-left-color: var(--exito); }
.bq-stat__item--malo  .bq-stat__flecha { color: var(--error-texto); }
.bq-stat__item--malo  .bq-stat__cifra  { border-left-color: var(--error); }

.bq-stat__texto {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    max-width: 52ch;
}
.bq-stat__titulo { font-size: var(--t-h3); color: var(--hueso); }
.bq-stat__contexto { font-size: var(--t-body-lg); color: var(--hueso-dim); }
.bq-stat__fuente { margin-top: var(--sp-1); }

/* Nota lateral opcional — chica a propósito: es un complemento del
   grupo, no otro bloque compitiendo por atención. Ocupa todo el alto
   de .bq-stat (grid-row de una sola fila): el border-left se lee como
   un separador de punta a punta entre las dos columnas, y el
   contenido se centra adentro en vez de quedar pegado arriba. */
.bq-stat__nota {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-2);
    padding-left: var(--sp-6);
    border-left: 1px solid var(--borde);
}
.bq-stat__nota-img {
    width: 100%;
    max-width: 160px;
    border-radius: var(--r-xs);
    display: block;
}
.bq-stat__nota-titulo { margin: 0; }
.bq-stat__nota-texto { margin: 0; font-size: var(--t-sm); color: var(--hueso-dim); }

/* ============================================================
   2 — Tarjeta de persona
   ============================================================ */
.bq-persona {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--superficie);
    border: 1px solid var(--borde);
    /* El filete petróleo a la izquierda es el mismo recurso que usa
       el bloque de tipografía en el documento de identidad */
    border-left: 3px solid var(--petroleo-400);
    border-radius: var(--r-sm);
    overflow: hidden;
}

/* --- Cabecera --- */
.bq-persona__head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-5) var(--sp-6);
    align-items: center;
    padding: clamp(var(--sp-6), 3vw, var(--sp-10));
}

.bq-persona__foto {
    width: 120px;
    height: 120px;
    border-radius: var(--r-sm);
    object-fit: cover;
    display: block;
    background: var(--tierra-800);
}
.bq-persona__foto--vacia {
    display: grid;
    place-items: center;
    font-family: var(--font-titulo);
    font-size: 3rem;
    font-weight: 500;
    color: var(--tierra-300);
    background: var(--tierra-800);
    border: 1px solid var(--tierra-600);
}

.bq-persona__id { display: flex; flex-direction: column; gap: var(--sp-1); }
.bq-persona__nombre { font-size: var(--t-h2); color: var(--hueso); }
.bq-persona__rol { font-size: var(--t-body); color: var(--gris); }

.bq-persona__datos {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-5);
    margin: 0;
    padding-top: var(--sp-5);
    border-top: 1px solid var(--borde);
}
.bq-persona__dato dt {
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--gris);
    margin-bottom: var(--sp-1);
}
.bq-persona__dato dd {
    margin: 0;
    font-size: var(--t-body);
    color: var(--hueso);
}

/* --- Cita destacada --- */
.bq-persona__cita {
    /* Inset respecto del borde de la card (no de punta a punta): mismo
       margen horizontal que el padding de .bq-persona__head, para que
       quede alineada con la foto y el nombre de arriba. */
    margin: 0 clamp(var(--sp-6), 3vw, var(--sp-10)) var(--sp-6);
    padding: clamp(var(--sp-5), 2.5vw, var(--sp-8));
    /* Tierra rojiza: la escala puente, acá separa la voz de la persona
       del resto de los datos sin competir con petróleo ni bordó */
    background: var(--tierra-800);
    border: 1px solid var(--tierra-600);
    border-radius: var(--r-sm);
    position: relative;
}
.bq-persona__cita p {
    font-family: var(--font-titulo);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--hueso);
    max-width: 46ch;
}
.bq-persona__cita p::before { content: '\201C'; }
.bq-persona__cita p::after  { content: '\201D'; }

/* --- Dos columnas: metas / frustraciones --- */
.bq-persona__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.bq-persona__col {
    padding: clamp(var(--sp-6), 3vw, var(--sp-10));
}
.bq-persona__col--metas { border-right: 1px solid var(--borde); }

.bq-persona__col-titulo {
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    font-weight: 500;
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    margin-bottom: var(--sp-5);
}
.bq-persona__col--metas .bq-persona__col-titulo { color: var(--petroleo-300); }
.bq-persona__col--frustraciones .bq-persona__col-titulo { color: var(--tierra-300); }

.bq-persona__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.bq-persona__lista li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: var(--sp-3);
    align-items: start;
    font-size: var(--t-body);
    line-height: 1.55;
    color: var(--hueso-dim);
}

.bq-persona__bullet {
    display: block;
    width: 18px;
    height: 18px;
    margin-top: 3px;
}
.bq-persona__bullet svg { width: 100%; height: 100%; display: block; }
.bq-persona__col--metas .bq-persona__bullet { color: var(--petroleo-400); }
.bq-persona__col--frustraciones .bq-persona__bullet { color: var(--tierra-400); }

@media (max-width: 720px) {
    .bq-persona__head { grid-template-columns: 1fr; }
    .bq-persona__foto { width: 88px; height: 88px; }
    .bq-persona__cols { grid-template-columns: 1fr; }
    .bq-persona__col--metas {
        border-right: 0;
        border-bottom: 1px solid var(--borde);
    }
}

/* ============================================================
   3 — Callouts sobre imagen
   Variantes: --fijo (línea conectora permanente) y --click (tooltip)
   ============================================================ */

.bq-callouts__titulo {
    margin-bottom: var(--sp-8);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--borde);
}

.bq-callouts__wrap {
    display: grid;
    gap: clamp(var(--sp-6), 4vw, var(--sp-12));
}
/* En la variante fija la lista va al costado: ahí es donde la línea
   conectora tiene sentido. En la de click, la imagen ocupa todo. */
.bq-callouts--fijo .bq-callouts__wrap {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
    align-items: start;
}

/* --- Lienzo (imagen + marcadores) --- */
.bq-callouts__lienzo {
    position: relative;
    border: 1px solid var(--borde);
    border-radius: var(--r-sm);
    background: var(--tierra-800);
    /* Sin overflow:hidden — los tooltips de la variante click
       tienen que poder salirse del borde de la imagen. */
}
.bq-callouts__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

/* SVG donde bloques.js dibuja las líneas conectoras */
.bq-callouts__lineas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
.bq-callouts__linea {
    stroke: var(--petroleo-400);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.55;
    transition: opacity var(--dur-rapido) var(--ease),
                stroke-width var(--dur-rapido) var(--ease);
}
.bq-callouts__linea.is-activa {
    opacity: 1;
    stroke-width: 1.5;
    stroke-dasharray: none;
}

/* --- Marcador --- */
.bq-callouts__punto {
    position: absolute;
    /* left/top llegan en el style inline como porcentaje */
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    background: var(--petroleo-400);
    border: 2px solid var(--negro);
    border-radius: 50%;
    color: var(--negro);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    box-shadow: var(--sombra-sm);
    transition: transform var(--dur-rapido) var(--ease),
                background-color var(--dur-rapido) var(--ease);
}
/* Área táctil de 44px sin agrandar el círculo visible.
   inset se mide contra el padding box (24px: el borde de 2px no cuenta),
   así que -10px da 24 + 20 = 44px reales. Con -8px quedaban 40. */
.bq-callouts__punto::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
}

button.bq-callouts__punto { cursor: pointer; }
button.bq-callouts__punto:hover,
.bq-callouts__punto.is-activo {
    background: var(--petroleo-300);
    transform: translate(-50%, -50%) scale(1.15);
}
button.bq-callouts__punto[aria-expanded="true"] {
    background: var(--bordo-400);
    color: var(--hueso);
}

/* --- Lista de callouts (variante fija) --- */
.bq-callouts__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.bq-callouts__item {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    cursor: default;
    transition: background-color var(--dur-rapido) var(--ease),
                border-color var(--dur-rapido) var(--ease);
}
.bq-callouts__item.is-activo {
    background: var(--superficie);
    border-color: var(--petroleo-700);
}

.bq-callouts__item-num {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--petroleo-700);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--petroleo-300);
    transition: background-color var(--dur-rapido) var(--ease),
                color var(--dur-rapido) var(--ease);
}
.bq-callouts__item.is-activo .bq-callouts__item-num {
    background: var(--petroleo-400);
    border-color: var(--petroleo-400);
    color: var(--negro);
}

.bq-callouts__item-titulo {
    font-size: var(--t-body);
    color: var(--hueso);
    margin-bottom: var(--sp-1);
}
.bq-callouts__item-texto {
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--gris);
}

/* --- Tooltip (variante click) --- */
.bq-callouts__tip {
    position: absolute;
    z-index: 5;
    width: min(300px, 70vw);
    padding: var(--sp-5);
    background: var(--superficie);
    border: 1px solid var(--petroleo-700);
    border-radius: var(--r-sm);
    box-shadow: var(--sombra-lg);
    /* Por defecto arriba del punto. bloques.js lo pasa abajo si el punto
       está en el tercio superior, y usa --nudge para empujarlo en
       horizontal cuando se saldría de la pantalla. */
    --nudge: 0px;
    transform: translate(-50%, calc(-100% - 22px)) translateX(var(--nudge));
}
.bq-callouts__tip[hidden] { display: none; }

.bq-callouts__tip--abajo {
    transform: translate(-50%, 22px) translateX(var(--nudge));
}

.bq-callouts__tip-titulo {
    font-size: var(--t-body);
    color: var(--hueso);
    margin-bottom: var(--sp-2);
    padding-right: var(--sp-6);
}
.bq-callouts__tip-texto {
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--hueso-dim);
}

.bq-callouts__tip-cerrar {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    border-radius: var(--r-xs);
    color: var(--gris);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--dur-rapido) var(--ease),
                background-color var(--dur-rapido) var(--ease);
}
.bq-callouts__tip-cerrar:hover {
    color: var(--hueso);
    background: rgba(255, 255, 255, 0.06);
}

/* Ayuda de uso: sólo en la variante click, y sólo hasta el primer click */
.bq-callouts--click .bq-callouts__lienzo::after {
    content: 'Tocá los puntos para ver el detalle';
    position: absolute;
    left: var(--sp-4);
    bottom: var(--sp-4);
    padding: var(--sp-2) var(--sp-4);
    background: rgba(26, 26, 26, 0.88);
    backdrop-filter: blur(6px);
    border: 1px solid var(--borde);
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--gris);
    pointer-events: none;
    transition: opacity var(--dur-medio) var(--ease);
}
.bq-callouts--click.ya-interactuado .bq-callouts__lienzo::after { opacity: 0; }

@media (max-width: 900px) {
    .bq-callouts--fijo .bq-callouts__wrap { grid-template-columns: 1fr; }
    /* Sin columna al costado no hay a dónde tirar la línea */
    .bq-callouts__lineas { display: none; }
}

/* ============================================================
   4 — Texto enriquecido
   El HTML lo escribe el admin en el editor del panel y lo sanitiza el
   servidor, así que acá se estilan TAGS y no clases: no hay forma de
   pedirle al editor que ponga una clase en cada párrafo.
   ============================================================ */
/* Sin max-width de lectura: el texto usa todo el ancho de .bq (1600px
   menos el padding lateral), alineado con el título del caso.

   Antes estaba limitado a 72ch y centrado, que es la medida clásica de
   legibilidad — pero dejaba la columna flotando en el medio y
   desalineada del encabezado, y en pantallas grandes se veía
   comprimida. Decisión tomada a conciencia: se prioriza que el bloque
   acompañe el ancho del resto de la página.

   Si alguna vez se quiere volver al ancho de lectura, es esta línea:
   max-width: calc(72ch + var(--padding-lado) * 2). Ojo que
   .bq-imagen--normal está atada a la misma medida y hay que cambiarla
   junto, o una imagen entre dos párrafos queda desalineada. */
.bq-texto {
    color: var(--hueso-dim);
    font-size: var(--t-body);
    line-height: var(--lh-body);
}
.bq-texto > *:first-child { margin-top: 0; }
.bq-texto > *:last-child  { margin-bottom: 0; }

.bq-texto p { margin: 0 0 var(--sp-4); }

.bq-texto h2,
.bq-texto h3 {
    margin: var(--sp-10) 0 var(--sp-3);
    font-family: var(--font-titulo);
    color: var(--hueso);
    line-height: var(--lh-tight);
}
.bq-texto h2 { font-size: var(--t-h2); }
.bq-texto h3 { font-size: var(--t-h3); }

.bq-texto strong { color: var(--hueso); font-weight: 600; }

.bq-texto a {
    color: var(--petroleo-300);
    text-underline-offset: 3px;
}

.bq-texto ul,
.bq-texto ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.bq-texto li { margin-bottom: var(--sp-2); }

.bq-texto blockquote {
    margin: var(--sp-6) 0;
    padding-left: var(--sp-5);
    border-left: 2px solid var(--petroleo-500);
    color: var(--hueso);
    font-size: var(--t-body-lg);
}

.bq-texto img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-sm);
    margin: var(--sp-4) 0;
}

/* ============================================================
   5 — Lista con flechas
   ============================================================ */
.bq-filas__etiqueta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-4);
    color: var(--bordo-300);
}
.bq-filas__etiqueta-flecha svg { width: 13px; height: 13px; display: block; }

.bq-filas__titulo {
    margin: 0 0 var(--sp-8);
    max-width: 24ch;
    font-family: var(--font-titulo);
    font-size: var(--t-h2);
    line-height: var(--lh-tight);
    color: var(--hueso);
}

.bq-filas__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 78ch;
    /* Línea de arriba: cierra la primera fila contra el título. Las de
       abajo las pone cada fila, así no hace falta un elemento separador
       entre medio de cada una. */
    border-top: 1px solid var(--borde);
}

.bq-filas__fila {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-5) 0;
    border-bottom: 1px solid var(--borde);
}

.bq-filas__flecha {
    flex: none;
    color: var(--bordo-300);
    /* 0.35em de arriba: alinea la flecha con la primera línea del texto,
       no con el centro del bloque — con filas de dos líneas o más,
       centrarla la dejaba flotando en el medio. */
    margin-top: 0.35em;
}
.bq-filas__flecha svg { width: 15px; height: 15px; display: block; }

.bq-filas__texto {
    color: var(--hueso-dim);
    font-size: var(--t-body);
}

/* ============================================================
   6 — Grilla de números
   ============================================================ */
.bq-numeros__grid {
    display: grid;
    /* auto-fit + minmax: con 2 números quedan lado a lado, con 4 en dos
       filas de 2, y en mobile se apilan — sin escribir un breakpoint
       por cada cantidad posible. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    border-top: 1px solid var(--borde);
    /* Cada celda pone su propio border-right (línea entre números) y
       border-bottom, así que sin este border-left la caja queda cerrada
       arriba/abajo/derecha pero abierta del todo a la izquierda — se lee
       como un borde cortado, no como una celda sin más. */
    border-left: 1px solid var(--borde);
}

.bq-numeros__celda {
    position: relative;
    padding: var(--sp-10) var(--sp-8) var(--sp-12);
    border-bottom: 1px solid var(--borde);
    /* La línea vertical va como borde derecho de cada celda y se le
       saca a la última de cada fila con :last-child… pero como la
       cantidad de columnas la decide auto-fit, no se puede saber cuál
       es la última de cada fila desde CSS. Se deja en todas y se tapa
       la del borde con overflow del contenedor. */
    border-right: 1px solid var(--borde);
}
.bq-numeros__grid { overflow: hidden; }

.bq-numeros__indice {
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-6);
    font-size: var(--t-xs);
    color: var(--gris-apagado);
}

.bq-numeros__valor {
    margin: 0 0 var(--sp-4);
    font-family: var(--font-titulo);
    font-size: clamp(3rem, 2rem + 5vw, 5.5rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--hueso);
}

.bq-numeros__etiqueta {
    margin: 0;
    max-width: 30ch;
    color: var(--gris);
}

@media (max-width: 720px) {
    .bq-numeros__celda { padding: var(--sp-8) var(--sp-5) var(--sp-10); }
}

/* ============================================================
   6 — Imagen suelta
   Dos anchos: "normal" se alinea con la columna de texto (ver
   .bq-texto: las dos usan el ancho completo de .bq, para que una
   imagen intercalada entre dos párrafos no se desalinee), y
   "completo" rompe el contenedor .bq y ocupa todo el viewport.
   ============================================================ */

.bq-imagen {
    margin: var(--sp-10) auto;
}

/* Sin max-width propio: sigue al texto. Si .bq-texto vuelve al ancho de
   lectura, esta tiene que volver con él. */

/* Full-bleed: .bq ya trae max-width y padding-inline, así que hay
   que anularlos los dos, no sólo el ancho. */
.bq-imagen--completo {
    max-width: none;
    padding-inline: 0;
}

.bq-imagen__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-md);
}

/* Un <video> arranca con 300×150 propios hasta que llegan los metadatos.
   El fondo evita el flash blanco del hueco mientras tanto, y height:auto
   (heredado de .bq-imagen__img) lo deja seguir su proporción real. */
.bq-imagen__video {
    background: var(--superficie);
}

/* A todo el ancho no hay margen que respete el radio, y la esquina
   redondeada contra el borde de la pantalla se ve como un error. */
.bq-imagen--completo .bq-imagen__img {
    border-radius: 0;
}

.bq-imagen__pie {
    margin-top: var(--sp-3);
    color: var(--gris);
    font-size: var(--t-sm);
    line-height: var(--lh-body);
    max-width: 60ch;
}

.bq-imagen--completo .bq-imagen__pie {
    padding-inline: var(--padding-lado);
}

/* ============================================================
   8 — Espaciado
   Bloque sin contenido: sólo aire. El alto lo pone el panel como
   style inline (0 a 100px, acotado en el servidor por
   render_espaciado()), así que acá no hay nada que fijar.

   flex-shrink: 0 porque .caso__cuerpo es un flex column: sin esto,
   un contenedor apretado le comería justo lo único que este bloque
   aporta.
   ============================================================ */
.bq-espaciado {
    flex-shrink: 0;
    width: 100%;
}

/* ============================================================
   Bloque: prototipo de Figma

   Un <iframe> a embed.figma.com dentro de una caja con proporción
   fija. La proporción la pone el PHP como style inline, porque la
   elige el admin por bloque (escritorio / tablet / celular).

   La caja con aspect-ratio + el iframe en position:absolute e inset:0
   no es adorno: reserva el espacio ANTES de que el prototipo cargue.
   Un iframe sin alto declarado mide 150px por defecto y después salta
   al tamaño real, empujando todo el caso hacia abajo — el mismo
   problema de CLS que ya nos costó caro en el hero.

   Mismo criterio de ancho que el bloque de imagen: "normal" sigue a la
   columna de texto y "completo" rompe el contenedor.
   ============================================================ */
.bq-figma {
    margin: var(--sp-10) auto;
}

.bq-figma--completo {
    max-width: none;
    padding-inline: 0;
}

.bq-figma__marco {
    position: relative;
    width: 100%;
    /* aspect-ratio lo pone el PHP inline, por bloque. */
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    overflow: hidden;
}

.bq-figma--completo .bq-figma__marco {
    border-radius: 0;
    border-inline: 0;
}

.bq-figma__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.bq-figma__pie {
    margin-top: var(--sp-3);
    color: var(--gris);
    font-size: var(--t-sm);
    line-height: var(--lh-body);
}

/* En pantallas chicas un prototipo de escritorio queda ilegible igual,
   pero al menos que no obligue a hacer scroll horizontal ni se salga de
   la caja: la proporción manda sobre el ancho disponible, nunca al
   revés. */
@media (max-width: 720px) {
    .bq-figma { margin-block: var(--sp-8); }
}