.bio-page {
    --bio-fondo: var(--woker-page-bg);
    --bio-ancho: 600px;
    --bio-avatar: 100px;
    --bio-pad-x: 20px;
    --bio-pad-y: 32px;
    min-height: 100vh;
    padding: 40px 16px 48px;
    background: var(--bio-fondo);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.bio-card {
    container-type: inline-size;
    container-name: bioCard;
    width: 100%;
    max-width: var(--bio-ancho);
    background: var(--woker-surface);
    border: 1px solid var(--woker-border);
    border-radius: 20px;
    overflow: hidden;
}

.bio-cuerpo {
    padding: var(--bio-pad-y) var(--bio-pad-x) var(--bio-pad-x);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.bio-productos,
.bio-secciones,
.bio-redes,
.bio-footer { width: 100%; }

.bio-cabecera {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.bio-avatar {
    width: var(--bio-avatar);
    height: var(--bio-avatar);
    border-radius: 50%;
    overflow: hidden;
    background: var(--woker-surface);
    box-shadow: 0 0 0 5px var(--woker-surface), 0 0 0 6px var(--woker-border);
}

.bio-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bio-iniciales {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: var(--woker-violet-soft);
    color: var(--woker-violet);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: .02em;
}

.bio-identidad {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bio-identidad-datos { width: 100%; min-width: 0; }

.bio-titulo {
    margin: 0;
    font-size: 29px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--woker-ink);
    overflow-wrap: anywhere;
}

.bio-matricula {
    margin: 6px 0 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--woker-subtle);
}

.bio-descripcion {
    margin: 14px auto 0;
    max-width: 40ch;
    font-size: 15px;
    line-height: 1.55;
    color: var(--woker-muted);
}

.bio-contactos {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--woker-border);
    border-radius: 12px;
}

.bio-contactos > li { flex: 1 1 1px; min-width: 0; display: flex; border-left: 1px solid var(--woker-border); }
.bio-contactos > li:first-child { border-left: 0; }
.bio-contactos > li:first-child .bio-contacto { border-radius: 11px 0 0 11px; }
.bio-contactos > li:last-child .bio-contacto { border-radius: 0 11px 11px 0; }

.bio-contacto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 8px;
    color: var(--woker-ink);
    text-decoration: none !important;
    text-align: center;
    transition: var(--woker-transicion);
}

.bio-contacto-icono { flex: none; color: var(--woker-violet); font-size: 17px; }

.bio-contacto-texto {
    width: 100%;
    font-size: clamp(9.5px, 3.3cqi, 12px);
    font-weight: 600;
    color: var(--woker-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bio-contacto:hover,
.bio-contacto:focus-visible { background: var(--woker-violet-tint); }
.bio-contacto:hover .bio-contacto-texto,
.bio-contacto:focus-visible .bio-contacto-texto { color: var(--woker-violet); }
.bio-contacto:focus-visible { outline: 2px solid var(--woker-violet); outline-offset: -2px; }

.bio-productos-titulo {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--woker-subtle);
}

.bio-productos-sub { display: none; }

.bio-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }

.bio-producto {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 10px;
    background: var(--woker-violet-tint);
    border-radius: 14px;
    color: var(--woker-ink);
    text-decoration: none !important;
    text-align: center;
    transition: var(--woker-transicion);
}

.bio-producto:hover,
.bio-producto:focus-visible {
    background: var(--woker-violet-soft);
    color: var(--woker-ink);
    transform: translateY(-1px);
}

.bio-producto:focus-visible { outline: 2px solid var(--woker-violet); outline-offset: 2px; }
.bio-producto:active { transform: translateY(0); }

.bio-producto-icono { flex: none; color: var(--woker-violet); font-size: 24px; }
.bio-producto-info { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.bio-producto-titulo { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.bio-producto-sub { margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--woker-muted); overflow-wrap: anywhere; }

.bio-redes { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }

.bio-red {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--woker-subtle) !important;
    text-decoration: none !important;
    font-size: 20px;
    transition: var(--woker-transicion);
}

.bio-red:hover,
.bio-red:focus-visible { color: var(--woker-violet) !important; background: var(--woker-violet-tint); }
.bio-red:focus-visible { outline: 2px solid var(--woker-violet); outline-offset: 2px; }

.bio-secciones { display: flex; flex-direction: column; gap: 20px; }

.bio-texto {
    background: var(--woker-violet-tint);
    border-radius: 14px;
    padding: 18px;
}

.bio-texto p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--woker-muted); }

.bio-seccion-titulo {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--woker-subtle);
}

.bio-video-marco,
.bio-cotizador-marco {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--woker-border);
    background: var(--woker-surface);
}

.bio-video-marco { position: relative; aspect-ratio: 16 / 9; }

.bio-video-marco iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.bio-cotizador-marco iframe { display: block; width: 100%; border: 0; }

/* El cotizador de auto o de moto ya es una tarjeta con su propio borde: el marco lo suma
   solo mientras espera el iframe, si no el borde de abajo se ve doble. El selector de las
   dos ramas no tiene tarjeta propia, así que ese sigue con el marco. */
.bio-cotizador:not([data-rama="combinado"]) .bio-cotizador-marco:has(iframe) { border: 0; background: transparent; }

.bio-footer {
    --bio-footer-icono: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 4px;
    text-align: center;
}

.bio-footer::before {
    content: '';
    flex: 0 0 var(--bio-footer-icono);
}

.bio-footer-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 14px;
    color: var(--woker-muted) !important;
    background: var(--woker-surface-2);
    text-decoration: none !important;
    transition: var(--woker-transicion);
}

.bio-footer-whatsapp:hover,
.bio-footer-whatsapp:focus-visible { background: var(--woker-violet); color: #fff !important; }
.bio-footer-whatsapp:focus-visible { outline: 2px solid var(--woker-violet); outline-offset: 2px; }

.bio-footer-firma,
.bio-footer a {
    font-size: 13px;
    font-weight: 600;
    color: var(--woker-muted) !important;
    text-decoration: none !important;
}

.bio-footer a:hover,
.bio-footer a:focus-visible { color: var(--woker-violet) !important; }
.bio-footer a:focus-visible { outline: 2px solid var(--woker-violet); outline-offset: 3px; border-radius: 4px; }

/* El logo se apoya en la baseline del texto: el `vertical-align: middle` que trae
   Bootstrap para las <img> lo hundía ~1.5px, porque el centro geométrico del PNG
   queda bastante más arriba que el centro óptico de la marca. */
.bio-footer-marca { height: .79em; vertical-align: baseline; }

.plantilla-botones {
    --bio-ancho: 560px;
    --bio-avatar: 96px;
    padding: 28px 16px 44px;
}

.plantilla-botones .bio-card { border-radius: 28px; box-shadow: 0 10px 30px rgba(var(--woker-violet-rgb), .10); }
.plantilla-botones { --bio-pad-x: 22px; --bio-pad-y: 30px; }
.plantilla-botones .bio-avatar { box-shadow: 0 0 0 6px var(--woker-violet-soft); }
.plantilla-botones .bio-titulo { font-size: 24px; letter-spacing: normal; }

.plantilla-botones .bio-matricula {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--woker-violet-soft);
    color: var(--woker-violet);
    font-size: 12px;
    letter-spacing: normal;
    text-transform: none;
}

/* Los contactos van siempre en una fila: con cuatro o más no entraban en el celular y el
   último caía solo a una segunda línea. Cada uno se angosta y el círculo se achica con él. */
.plantilla-botones .bio-contactos {
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    border: 0;
    border-radius: 0;
}

.plantilla-botones .bio-contactos > li { flex: 0 1 auto; min-width: 0; border-left: 0; }
.plantilla-botones .bio-contactos > li .bio-contacto { width: 100px; max-width: 100%; gap: 7px; padding: 0; border-radius: 0; }

.plantilla-botones .bio-contacto-icono {
    width: min(52px, 100%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--woker-violet-soft);
    color: var(--woker-violet);
    font-size: 19px;
    transition: var(--woker-transicion);
}

.plantilla-botones .bio-contacto-texto { font-size: clamp(9.5px, 3.3cqi, 11.5px); }

.plantilla-botones .bio-contacto:hover .bio-contacto-icono,
.plantilla-botones .bio-contacto:focus-visible .bio-contacto-icono { background: var(--woker-violet); color: #fff; }

.plantilla-botones .bio-productos-titulo,
.plantilla-botones .bio-seccion-titulo { font-size: 17px; letter-spacing: normal; text-transform: none; color: var(--woker-ink); }
.plantilla-botones .bio-productos-sub { display: block; margin: 0 auto 14px; max-width: 46ch; font-size: 13px; text-align: center; color: var(--woker-muted); }

.plantilla-botones .bio-grilla { grid-template-columns: minmax(0, 1fr); gap: 10px; }

.plantilla-botones .bio-producto {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 14px;
    padding: 14px 18px;
    min-height: 66px;
    border-radius: 999px;
    border: 1px solid var(--woker-violet-soft);
}

.plantilla-botones .bio-producto-icono {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--woker-surface);
    font-size: 16px;
}

.plantilla-botones .bio-producto-info { align-items: flex-start; }
.plantilla-botones .bio-texto { border-radius: 20px; }
.plantilla-botones .bio-video-marco,
.plantilla-botones .bio-cotizador-marco { border-radius: 20px; border-color: var(--woker-violet-soft); }
.plantilla-botones .bio-red { background: var(--woker-violet-soft); color: var(--woker-violet) !important; }
.plantilla-botones .bio-red:hover { background: var(--woker-violet); color: #fff !important; }

.plantilla-marca {
    --bio-ancho: 620px;
    --bio-avatar: 88px;
}

.plantilla-marca .bio-card {
    border: 0;
    border-radius: 24px;
    box-shadow: 0 18px 44px rgba(24, 24, 27, .10), 0 2px 6px rgba(24, 24, 27, .05);
}

.plantilla-marca .bio-cuerpo { padding: 0 0 26px; align-items: stretch; gap: 28px; }

.plantilla-marca .bio-cabecera {
    gap: 18px;
    padding: 38px 26px 0;
    /* Lo que sigue a la cabecera queda a los mismos 22px que separan la matrícula de los
       contactos: el gap del cuerpo (28px) menos este margen. */
    margin-bottom: -6px;
    border-radius: 0;
    background: var(--woker-violet-soft);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--woker-violet) 12%, #fff) 0%,
        color-mix(in srgb, var(--woker-violet) 4%, #fff) 58%,
        var(--woker-surface) 100%);
}

.plantilla-marca .bio-productos,
.plantilla-marca .bio-secciones,
.plantilla-marca .bio-redes,
.plantilla-marca .bio-footer { padding-left: 26px; padding-right: 26px; }

.plantilla-marca .bio-avatar {
    background: var(--woker-surface);
    box-shadow: 0 0 0 5px var(--woker-surface), 0 0 0 6px var(--woker-violet-soft-border);
}

.plantilla-marca .bio-iniciales { font-size: 30px; }
.plantilla-marca .bio-titulo { font-size: 27px; letter-spacing: -.015em; }
.plantilla-marca .bio-matricula { font-size: 11px; letter-spacing: .16em; }
.plantilla-marca .bio-descripcion { max-width: 36ch; font-size: 15px; }

.plantilla-marca .bio-contactos {
    gap: 0;
    border: 1px solid var(--woker-violet-soft-border);
    border-radius: 14px;
    background: var(--woker-surface);
}

.plantilla-marca .bio-contactos > li { flex: 1 1 1px; border-left: 1px solid var(--woker-violet-soft-border); }
.plantilla-marca .bio-contactos > li:first-child { border-left: 0; }

.plantilla-marca .bio-contactos > li .bio-contacto {
    flex-direction: row;
    gap: 7px;
    padding: 11px 9px;
    border-radius: 0;
}

.plantilla-marca .bio-contactos > li:first-child .bio-contacto { border-radius: 13px 0 0 13px; }
.plantilla-marca .bio-contactos > li:last-child .bio-contacto { border-radius: 0 13px 13px 0; }

.plantilla-marca .bio-contacto-icono { font-size: 14px; }
.plantilla-marca .bio-contacto-texto { font-size: clamp(9.5px, 3.2cqi, 12.5px); color: var(--woker-ink); }

/* El título de las tarjetas lleva abajo su bajada, que ya trae el aire; el de las secciones
   anchas va solo, así que la separación del contenido la pone él. */
.plantilla-marca .bio-productos-titulo,
.plantilla-marca .bio-seccion-titulo { font-size: 20px; letter-spacing: -.01em; text-transform: none; color: var(--woker-ink); margin-bottom: 4px; }
.plantilla-marca .bio-seccion-titulo { margin-bottom: 16px; }
.plantilla-marca .bio-productos-sub { display: block; margin: 0 auto 18px; max-width: 46ch; font-size: 13.5px; text-align: center; color: var(--woker-muted); }

.plantilla-marca .bio-grilla { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }

.plantilla-marca .bio-producto {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 14px;
    padding: 16px;
    background: var(--woker-surface);
    border: 1px solid var(--woker-border);
    border-radius: 16px;
}

.plantilla-marca .bio-producto:hover {
    background: var(--woker-surface);
    border-color: var(--woker-violet-soft-border);
    box-shadow: 0 8px 20px rgba(var(--woker-violet-rgb), .12);
}

.plantilla-marca .bio-producto-icono {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--woker-violet-soft);
    font-size: 17px;
}

.plantilla-marca .bio-producto-info { align-items: flex-start; }

.plantilla-marca .bio-texto { background: var(--woker-surface); border: 1px solid var(--woker-border); border-radius: 16px; padding: 20px; }
.plantilla-marca .bio-video-marco,
.plantilla-marca .bio-cotizador-marco { border-radius: 16px; }
.plantilla-marca .bio-red { border: 1px solid var(--woker-violet-soft-border); color: var(--woker-violet) !important; }
.plantilla-marca .bio-red:hover,
.plantilla-marca .bio-red:focus-visible { border-color: var(--woker-violet); background: var(--woker-violet); color: #fff !important; }

.bio-avatar, .bio-identidad { position: relative; z-index: 1; }

.bio-cabecera::before { content: ''; position: absolute; pointer-events: none; }

.fondo-ninguno .bio-cabecera::before { content: none; }

.fondo-banda .bio-cabecera::before,
.fondo-degrade .bio-cabecera::before {
    inset: calc(var(--bio-pad-y) * -1) calc(var(--bio-pad-x) * -1) auto;
}

.fondo-banda .bio-cabecera::before {
    height: calc(var(--bio-pad-y) + var(--bio-avatar) * .55);
    background: var(--woker-violet-soft);
}

.fondo-banda .bio-avatar { box-shadow: 0 0 0 6px var(--woker-surface), 0 0 0 7px var(--woker-border); }
.fondo-banda .bio-iniciales { background: var(--woker-surface); color: var(--woker-violet); }

.fondo-panel .bio-cabecera::before {
    inset: 0;
    border-radius: 18px;
    background: var(--woker-violet-tint);
    border: 1px solid rgba(var(--woker-violet-rgb), .12);
}

.fondo-panel .bio-cabecera { padding: 22px 16px; }

.fondo-monograma .bio-cabecera::before {
    content: attr(data-iniciales);
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 210px;
    font-weight: 700;
    letter-spacing: -.06em;
    line-height: 1;
    white-space: nowrap;
    color: rgba(var(--woker-violet-rgb), .07);
    user-select: none;
}

.fondo-degrade .bio-cabecera::before {
    height: calc(var(--bio-pad-y) + var(--bio-avatar) + 100px);
    background: linear-gradient(180deg,
        rgba(var(--woker-violet-rgb), .13) 0%,
        rgba(var(--woker-violet-rgb), .03) 55%,
        transparent 100%);
}

.plantilla-marca .bio-cabecera::before { content: none; }

.plantilla-marca .bio-avatar { box-shadow: 0 0 0 5px var(--woker-surface), 0 0 0 6px var(--woker-violet-soft-border); }
.plantilla-marca.fondo-panel .bio-cabecera { padding: 38px 26px 0; }

@media (max-width: 575.98px) {
    .bio-page { --bio-avatar: 88px; --bio-pad-x: 18px; --bio-pad-y: 28px; padding: 0; align-items: stretch; }
    .bio-card { border: 0; border-radius: 0; box-shadow: none; min-height: 100vh; }
    .bio-cuerpo { padding-bottom: var(--bio-pad-x); }
    .bio-titulo { font-size: 25px; }
    .plantilla-botones { padding: 0; }
    .plantilla-marca .bio-cuerpo { padding: 0 0 26px; }

    .plantilla-marca .bio-contactos > li .bio-contacto { flex-direction: column; gap: 5px; padding: 11px 6px; }

    .bio-red { width: 44px; height: 44px; }

    .bio-footer-firma a { display: inline-block; padding: 12px 10px; margin: -12px -10px; }
    .bio-footer { --bio-footer-icono: 34px; }
    .bio-footer-whatsapp { width: 34px; height: 34px; font-size: 16px; }
}

@container bioCard (max-width: 344px) {
    .bio-contacto,
    .plantilla-marca .bio-contactos > li .bio-contacto {
        gap: 0;
        min-height: 52px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .bio-contacto-texto { display: none; }
    .bio-contacto-icono { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .bio-producto, .bio-red, .bio-contacto { transition: none; }
    .bio-producto:hover { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {

    .bio-page.es-viva .bio-cabecera,
    .bio-page.es-viva .bio-productos,
    .bio-page.es-viva .bio-secciones > *,
    .bio-page.es-viva .bio-redes,
    .bio-page.es-viva .bio-footer {
        animation: bioAparecer .45s cubic-bezier(.22, .61, .36, 1) both;
    }

    .bio-page.es-viva .bio-productos { animation-delay: .07s; }
    .bio-page.es-viva .bio-secciones > * { animation-delay: .12s; }
    .bio-page.es-viva .bio-redes { animation-delay: .16s; }
    .bio-page.es-viva .bio-footer { animation-delay: .2s; }

    .bio-page.es-viva .bio-grilla > * {
        animation: bioAparecer .45s cubic-bezier(.22, .61, .36, 1) both;
    }

    .bio-page.es-viva .bio-grilla > *:nth-child(1) { animation-delay: .10s; }
    .bio-page.es-viva .bio-grilla > *:nth-child(2) { animation-delay: .14s; }
    .bio-page.es-viva .bio-grilla > *:nth-child(3) { animation-delay: .18s; }
    .bio-page.es-viva .bio-grilla > *:nth-child(4) { animation-delay: .22s; }
    .bio-page.es-viva .bio-grilla > *:nth-child(n+5) { animation-delay: .26s; }

    @keyframes bioAparecer {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: none; }
    }
}

.bio-producto, .bio-contacto { transition: transform .12s ease; }
.bio-producto:active, .bio-contacto:active { transform: scale(.985); }

.bio-selector-usuario {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    min-width: 0;
}

.bio-selector-usuario-rotulo { font-size: .78rem; font-weight: 600; color: var(--woker-muted); }

.bio-selector-usuario select {
    width: auto;
    max-width: 220px;
    height: auto;
    padding: .25rem 1.6rem .25rem .6rem;
    font-size: .8rem;
}

/* Con select2 el <select> queda oculto y lo que se ve es el contenedor: acá se lo achica al
   alto y la tipografía de los botones de la barra, que si no queda un escalón. El desplegable
   vive en el <body>, así que se queda con el estilo de sistema de modern-ui-new. */
.bio-selector-usuario .select2-container { max-width: 240px; }

/* El mismo alto que los .btn-flat de al lado: texto de .8rem con .4rem de aire arriba y abajo
   (1.5em de línea + .8rem de padding + 2px de borde). */
.bio-selector-usuario .select2-container--default .select2-selection--single {
    height: calc(1.5em + .8rem + 2px) !important;
    font-size: .8rem !important;
    border-radius: 8px !important;
}

.bio-selector-usuario .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 100% !important;
    padding: 0 1.9rem 0 .7rem !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    line-height: calc(1.5em + .8rem) !important;
    color: var(--woker-ink) !important;
}

.bio-selector-usuario .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: .35rem !important;
}

/* ---------- Escritorio: la tarjeta ancha ----------
   De 992px para arriba la página publicada usa el ancho, pero con tope: la tarjeta crece
   hasta --bio-ancho y queda centrada, como una landing. La identidad pasa a una fila (foto,
   datos y el riel de contactos a la derecha) y los bloques entran en grillas de más columnas.
   Va sólo sobre .es-viva —la página publicada— para que el lienzo del editor, angosto y
   zoomeado dentro del panel, siga mostrando la vista de siempre. */
@media (min-width: 992px) {
    .bio-page.es-viva {
        --bio-ancho: 1180px;
        --bio-pad-x: 48px;
        --bio-pad-y: 40px;
        --bio-avatar: 112px;
        /* La tarjeta no va de punta a punta: el tope la centra y el padding lateral le
           garantiza aire a los costados también en monitores chicos. */
        padding: 32px 40px 48px;
    }

    .es-viva .bio-cuerpo { align-items: stretch; gap: 30px; }

    /* --- Identidad en una fila --- */
    .es-viva .bio-cabecera {
        flex-direction: row;
        align-items: center;
        gap: 30px;
        padding-bottom: 30px;
        border-bottom: 1px solid var(--woker-border);
    }

    /* La banda del fondo "banda" cubre la fila entera: taparle sólo la mitad de alto tenía
       sentido con la foto arriba de todo, acá cortaba la cabecera al medio. */
    .fondo-banda.es-viva .bio-cabecera::before { height: calc(100% + var(--bio-pad-y)); }

    /* Los fondos que dibujan una caja de borde duro (panel y banda) ya cierran la cabecera
       solos: la línea divisoria les quedaba apoyada justo sobre el borde de la caja. Mismo
       criterio que la plantilla Marca. Sin la línea, el panel además reparte parejo su
       padding, que traía más aire abajo que arriba para dejarla respirar. */
    .fondo-panel.es-viva .bio-cabecera,
    .fondo-banda.es-viva .bio-cabecera { border-bottom: 0; }

    .fondo-panel.es-viva .bio-cabecera { padding: 30px; }

    /* El monograma es una marca de agua: en el celular va detrás de la foto y el nombre,
       que están centrados y le dejan la columna entera para él. En la fila de escritorio
       se centra sobre la foto —no en el hueco que queda antes de los contactos—, así las
       iniciales quedan DETRÁS de la foto de perfil y asoman por los dos lados, como un
       sello estampado: a la izquierda la tinta se mete en el margen de la tarjeta, que la
       recorta, y a la derecha se derrama hacia el nombre. Mantiene la escala del celular
       —ahí el cuerpo es 2.4 veces la foto— para que la marca pese casi lo mismo en las dos
       vistas: la fila de escritorio es mucho más baja, así que las iniciales la desbordan y
       sigue recortándolas sólo la tarjeta. El corrimiento hacia arriba las apoya sobre el
       aire que deja la tarjeta antes de la cabecera y las despega de la línea gris que
       cierra la fila, que si no les cruzaba las patas. Como pseudo del contenedor se dibuja
       antes que la foto y el nombre —que además llevan z-index—, así que el contenido
       siempre le queda por encima. */
    .fondo-monograma.es-viva .bio-cabecera::before {
        content: attr(data-iniciales);
        inset: 0 auto 0 calc(var(--bio-avatar) * .5);
        transform: translate(-50%, calc(var(--bio-avatar) * -.1));
        display: flex;
        align-items: center;
        font-size: calc(var(--bio-avatar) * 1.85);
        font-weight: 700;
        letter-spacing: -.06em;
        line-height: 1;
        white-space: nowrap;
        color: rgba(var(--woker-violet-rgb), .07);
        user-select: none;
    }

    /* En fila la foto es un ítem flexible y se achicaba a lo ancho: con el alto fijo el
       círculo salía ovalado. */
    .es-viva .bio-avatar { flex: none; }

    .es-viva .bio-identidad { align-items: flex-start; text-align: left; }

    /* Los contactos cuelgan del bloque de datos, no son hermanos de la foto, así que el riel
       derecho se arma acá: una grilla de dos columnas donde título, matrícula y bio caen en
       la primera y la lista de contactos ocupa la segunda, centrada a lo alto. */
    .es-viva .bio-identidad-datos {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        /* Las filas de los contactos son más altas que el texto cuando el productor no
           cargó matrícula ni descripción, y el nombre quedaba colgado arriba de un hueco
           vacío. Las dos filas elásticas de los extremos se reparten lo que sobra, así el
           bloque de texto queda centrado contra los contactos sin separarse entre sí. */
        grid-template-rows: 1fr auto auto auto 1fr;
        column-gap: 40px;
        align-items: start;
    }

    .es-viva .bio-identidad-datos > * { grid-column: 1; }
    .es-viva .bio-titulo { grid-row: 2; }
    .es-viva .bio-matricula { grid-row: 3; }
    .es-viva .bio-descripcion { grid-row: 4; }
    /* La matrícula de la plantilla Botones es una píldora: como ítem de grilla se estiraría
       a toda la columna, así que se la deja en su ancho natural. */
    .plantilla-botones.es-viva .bio-matricula { justify-self: start; }

    .es-viva .bio-titulo { font-size: 31px; }
    .es-viva .bio-descripcion { margin: 14px 0 0; max-width: 62ch; }

    .es-viva .bio-contactos {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: center;
        width: auto;
        margin: 0;
        gap: 10px;
        border: 0;
        border-radius: 0;
    }

    .es-viva .bio-contactos > li { flex: 0 0 106px; border-left: 0; }

    .es-viva .bio-contactos > li .bio-contacto,
    .es-viva .bio-contactos > li:first-child .bio-contacto,
    .es-viva .bio-contactos > li:last-child .bio-contacto {
        padding: 14px 8px;
        border: 1px solid var(--woker-border);
        border-radius: 12px;
        background: var(--woker-surface);
    }

    /* --- Bloques: título a la izquierda y grillas de más columnas --- */
    .es-viva .bio-productos-titulo,
    .es-viva .bio-seccion-titulo { text-align: left; }
    /* Alineada a la izquierda ya no necesita el tope de 46ch que la centra en celular: con
       él se partía en dos renglones teniendo todo el ancho libre. */
    .es-viva .bio-productos-sub { max-width: none; margin-left: 0; text-align: left; }

    /* auto-fill y no auto-fit: las pistas vacías se mantienen, así una sección de dos links
       queda con dos tarjetas de ancho normal a la izquierda y no dos de media pantalla. */
    .es-viva .bio-grilla { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }

    .plantilla-botones.es-viva .bio-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Los contactos de Botones ya son un círculo de color con el texto abajo: la caja con
       borde del riel de escritorio los encerraba en un recuadro gris que en celular no tienen. */
    .plantilla-botones.es-viva .bio-contactos > li .bio-contacto,
    .plantilla-botones.es-viva .bio-contactos > li:first-child .bio-contacto,
    .plantilla-botones.es-viva .bio-contactos > li:last-child .bio-contacto {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }

    /* La cabecera de Marca es un panel de color que se funde con el blanco de abajo: no
       necesita la línea divisoria, y sus paddings acompañan a los de la tarjeta ancha. */
    .plantilla-marca.es-viva .bio-cabecera { padding: 44px var(--bio-pad-x) 16px; margin-bottom: 0; border-bottom: 0; }
    .plantilla-marca.es-viva .bio-productos,
    .plantilla-marca.es-viva .bio-secciones,
    .plantilla-marca.es-viva .bio-redes,
    .plantilla-marca.es-viva .bio-footer { padding-left: var(--bio-pad-x); padding-right: var(--bio-pad-x); }

    /* Marca no usa los fondos de cabecera —trae su propio panel de color y el panel del
       editor ni siquiera los ofrece—, pero la clase del fondo guardado sigue viajando en
       el HTML: acá las reglas de fondo son más específicas que el `content: none` de la
       plantilla y le estampaban el monograma de iniciales detrás de la foto. */
    .plantilla-marca.es-viva .bio-cabecera::before { content: none; }

    /* Los contactos de Marca van en fila —icono y texto uno al lado del otro—, así que en
       el riel de escritorio el ancho fijo de 106px les partía el texto adentro de la
       píldora. Cada uno toma el ancho de su contenido y el riel se apoya en el margen
       derecho de la cabecera. */
    .plantilla-marca.es-viva .bio-contactos { justify-content: flex-end; gap: 8px; background: none; }
    .plantilla-marca.es-viva .bio-contactos > li { flex: 0 0 auto; }

    .plantilla-marca.es-viva .bio-contactos > li .bio-contacto,
    .plantilla-marca.es-viva .bio-contactos > li:first-child .bio-contacto,
    .plantilla-marca.es-viva .bio-contactos > li:last-child .bio-contacto {
        gap: 9px;
        padding: 12px 18px;
        border: 1px solid var(--woker-violet-soft-border);
        border-radius: 999px;
    }

    .plantilla-marca.es-viva .bio-contacto-texto { width: auto; font-size: 13px; }
}