/* bloques/pestanas-carrusel — lista de pestañas y un carrusel de imágenes por pestaña */

.bl-pc-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 48px); align-items: start; }
.bl-pc-cuerpo.sin-escenario { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

/* ── Lista de pestañas ──────────────────────────────────────────────────
   Un tablist solo puede contener pestañas, así que el detalle de cada una
   (texto, dato, enlace y barra) va fuera, como hermano del tablist, en la
   fila siguiente a su pestaña: el tablist abarca todas las filas con subgrid
   y sus botones se intercalan con los detalles. */
.bl-pc-izq { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; }
.bl-pc-lista { grid-column: 1; grid-row: 1 / span var(--filas, 2); display: grid; grid-template-rows: subgrid; }
.bl-pc-boton {
    grid-row: var(--fila, auto);
    display: block; width: 100%; margin: 0; padding: 20px 0 19px;
    border: 0; border-radius: 0; background: none; color: inherit; cursor: pointer;
    font-family: inherit; font-size: clamp(18px, 1.45vw, 20px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; text-align: left;
    transition: color .15s linear, padding-bottom .3s ease;
}
.bl-pc-boton[data-bl-tab="0"] { padding-top: 0; }
.bl-pc-boton.es-activo { cursor: default; }
.bl-pc-boton.es-activo:not(.sin-detalle) { padding-bottom: 12px; }

/* Detalle: cerrado salvo el de la pestaña seleccionada (aria-selected lo pone
   base.js). Como está fuera del tablist se enlaza con :has(), y el estado
   abierto se reparte en variables. Se despliega pasando la fila de 0fr a
   1fr; los cerrados quedan con visibility:hidden para que su enlace no reciba
   el foco. El filete inferior separa las pestañas. */
.bl-pc-detalle {
    --pc-filas: 0fr; --pc-vis: hidden; --pc-retardo: .3s; --pc-op: 0; --pc-y: -8px; --pc-escala: 0; --pc-anim: none;
    grid-column: 1; grid-row: var(--fila, auto);
    position: relative; display: grid; grid-template-rows: var(--pc-filas);
    border-bottom: 1px solid var(--vk-linea, rgba(38, 37, 36, .14));
    transition: grid-template-rows .3s ease;
}
.bl-pc-izq:has([data-bl-tab="0"][aria-selected="true"]) > [data-k="0"],
.bl-pc-izq:has([data-bl-tab="1"][aria-selected="true"]) > [data-k="1"],
.bl-pc-izq:has([data-bl-tab="2"][aria-selected="true"]) > [data-k="2"],
.bl-pc-izq:has([data-bl-tab="3"][aria-selected="true"]) > [data-k="3"],
.bl-pc-izq:has([data-bl-tab="4"][aria-selected="true"]) > [data-k="4"],
.bl-pc-izq:has([data-bl-tab="5"][aria-selected="true"]) > [data-k="5"],
.bl-pc-izq:has([data-bl-tab="6"][aria-selected="true"]) > [data-k="6"],
.bl-pc-izq:has([data-bl-tab="7"][aria-selected="true"]) > [data-k="7"] {
    --pc-filas: 1fr; --pc-vis: visible; --pc-retardo: 0s; --pc-op: 1; --pc-y: 0px; --pc-escala: 1; --pc-anim: bl-pc-llenar;
}
/* Navegadores sin :has(): queda abierta la primera. Sin subgrid: los
   detalles van todos debajo de la lista. */
@supports not selector(:has(*)) {
    .bl-pc-detalle.es-abierta { --pc-filas: 1fr; --pc-vis: visible; --pc-retardo: 0s; --pc-op: 1; --pc-y: 0px; --pc-escala: 1; }
}
@supports not (grid-template-rows: subgrid) {
    .bl-pc-lista, .bl-pc-boton { grid-row: auto; }
    .bl-pc-boton { border-bottom: 1px solid var(--vk-linea, rgba(38, 37, 36, .14)); }
    .bl-pc-detalle { grid-row: 2; }
}

.bl-pc-detalle-in {
    min-height: 0; overflow: hidden; margin-inline: -6px; padding-inline: 6px;
    visibility: var(--pc-vis); transition: visibility 0s linear var(--pc-retardo);
}
.bl-pc-detalle-cont {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 20px;
    opacity: var(--pc-op); transform: translateY(var(--pc-y)); transition: opacity .2s, transform .3s ease;
}

.bl-pc-texto { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--vk-texto-2, #5f5c58); max-width: 36em; }
.bl-pc-dato {
    margin: 0; display: flex; align-items: baseline; gap: 9px;
    font-family: var(--fuente-mono, ui-monospace, monospace); font-size: 12.5px; letter-spacing: .03em; line-height: 1.5; text-transform: uppercase;
}
.bl-pc-dato::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--vk-amarillo, #dfbe2d); transform: translateY(-1px); }
.bl-pc-dato strong { font-weight: 500; }
.bl-pc-enlace { margin-top: 2px; }

/* Barra bajo la pestaña activa: llena mientras corre el cambio automático
   (al acabar la animación, base.js pasa a la siguiente) y llena del todo
   cuando no hay cambio automático. Se para con el ratón o el foco dentro. */
.bl-pc-barra {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: currentColor; transform: scaleX(var(--pc-escala)); transform-origin: 0 50%; pointer-events: none;
}
.bl-tabs-auto .bl-pc-barra { animation: var(--pc-anim) var(--bl-tabs-duracion, 8s) linear both; }
/* Va después y con el mismo peso: el `animation` de arriba repone el play-state. */
.bl-tabs-pausa .bl-pc-barra,
.bl-pc-cuerpo:focus-within .bl-pc-barra { animation-play-state: paused; }
@keyframes bl-pc-llenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Al pasar por las pestañas se apagan las que no están bajo el ratón. */
@media (hover: hover) {
    .bl-pc-lista:has(.bl-pc-boton:hover) .bl-pc-boton { color: var(--vk-texto-2, #5f5c58); }
    .bl-pc-lista:has(.bl-pc-boton:hover) .bl-pc-boton:hover { color: var(--vk-texto, #262524); }
}

/* ── Escenario: un panel por pestaña, cada uno con su carrusel ─────── */
.bl-pc-escenario { min-width: 0; }
.bl-pc-panel[hidden] { display: none; }
.bl-tabs-listo .bl-pc-panel.es-activo { animation: bl-pc-aparecer .45s ease both; }
@keyframes bl-pc-aparecer { from { opacity: 0; } to { opacity: 1; } }

/* Diapositivas y controles comparten celda: los controles van encima. */
.bl-pc-car { display: grid; padding: 6px 6px 0; background: var(--vk-crema-2, #efe9e1); }
.bl-pc-diapos, .bl-pc-controles { grid-area: 1 / 1; min-width: 0; }
.bl-pc-diapos { display: grid; touch-action: pan-y; }

/* Fundido: la que entra aparece encima y la que sale se apaga al terminar. */
.bl-pc-diapo { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity 0s linear .5s, visibility 0s linear .5s; }
.bl-pc-diapo.es-activo { z-index: 1; opacity: 1; visibility: visible; transition: opacity .5s ease; }
.bl-pc-diapo-in { display: block; height: 100%; margin: 0; color: inherit; text-decoration: none; background: var(--vk-crema-2, #efe9e1); }
.bl-pc-foto { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(38, 37, 36, .06); }
.bl-pc-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
a.bl-pc-diapo-in:hover .bl-pc-foto img { transform: scale(1.03); }

/* Barra de pie: nombre y categorías del elemento visible (los puntos van encima, a la derecha). */
.bl-pc-pie { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 68px; padding: 12px 14px; }
.con-controles .bl-pc-pie { padding-right: calc(var(--bl-car-n, 1) * 24px + 28px); }
.bl-pc-pie-titulo { font-size: 16px; font-weight: 500; line-height: 1.3; }
.bl-pc-pie-sub { font-family: var(--fuente-mono, ui-monospace, monospace); font-size: 11.5px; letter-spacing: .03em; line-height: 1.4; text-transform: uppercase; color: var(--vk-texto-2, #5f5c58); }
a.bl-pc-diapo-in:hover .bl-pc-pie-titulo { text-decoration: underline; text-decoration-color: var(--vk-amarillo, #dfbe2d); text-decoration-thickness: 2px; text-underline-offset: .2em; }

.bl-pc-controles { z-index: 2; display: flex; flex-direction: column; pointer-events: none; }
.bl-pc-flechas { position: relative; aspect-ratio: 16 / 10; }
.bl-pc-flecha {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--vk-crema, #f8f5f1); color: var(--vk-oscuro, #262524); cursor: pointer; pointer-events: auto;
    transition: background-color .2s, color .2s;
}
.bl-pc-flecha svg { width: 16px; height: 16px; display: block; }
.bl-pc-flecha--ant { left: 16px; }
.bl-pc-flecha--sig { right: 16px; }
.bl-pc-flecha:hover { background: var(--vk-oscuro, #262524); color: #fff; }

.bl-pc-puntos { flex: 1; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; }
.bl-pc-punto {
    width: 24px; height: 24px; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; pointer-events: auto;
    display: inline-flex; align-items: center; justify-content: center;
}
.bl-pc-punto::before { content: ""; width: 6px; height: 6px; background: rgba(38, 37, 36, .22); transition: background-color .2s; }
.bl-pc-punto:hover::before { background: rgba(38, 37, 36, .55); }
.bl-pc-punto.es-activo::before { background: var(--vk-oscuro, #262524); }

/* ── Tema oscuro ────────────────────────────────────────────────────── */
.bl-tema-oscuro .bl-pc-detalle { border-color: var(--vk-linea-inv, rgba(255, 255, 255, .16)); }
.bl-tema-oscuro .bl-pc-texto,
.bl-tema-oscuro .bl-pc-pie-sub { color: rgba(255, 255, 255, .7); }
.bl-tema-oscuro .bl-pc-car,
.bl-tema-oscuro .bl-pc-diapo-in { background: var(--vk-oscuro-2, #2f2e2c); }
.bl-tema-oscuro .bl-pc-foto { background: rgba(255, 255, 255, .06); }
.bl-tema-oscuro .bl-pc-punto::before { background: rgba(255, 255, 255, .25); }
.bl-tema-oscuro .bl-pc-punto:hover::before { background: rgba(255, 255, 255, .6); }
.bl-tema-oscuro .bl-pc-punto.es-activo::before { background: var(--vk-crema, #f8f5f1); }
@media (hover: hover) {
    .bl-tema-oscuro .bl-pc-lista:has(.bl-pc-boton:hover) .bl-pc-boton { color: rgba(255, 255, 255, .6); }
    .bl-tema-oscuro .bl-pc-lista:has(.bl-pc-boton:hover) .bl-pc-boton:hover { color: #fff; }
}
@supports not (grid-template-rows: subgrid) {
    .bl-tema-oscuro .bl-pc-boton { border-color: var(--vk-linea-inv, rgba(255, 255, 255, .16)); }
}

/* ── Móvil: lista arriba y el carrusel de la pestaña activa debajo ──── */
@media (max-width: 860px) {
    .bl-pc-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .bl-pc-boton { font-size: 18px; padding-top: 16px; padding-bottom: 15px; }
    .bl-pc-boton.es-activo:not(.sin-detalle) { padding-bottom: 10px; }
}
@media (max-width: 600px) {
    .bl-pc-car { padding: 4px 4px 0; }
    .bl-pc-foto, .bl-pc-flechas { aspect-ratio: 4 / 3; }
    .bl-pc-flecha { width: 36px; height: 36px; }
    .bl-pc-flecha--ant { left: 10px; }
    .bl-pc-flecha--sig { right: 10px; }
    .bl-pc-pie { min-height: 60px; padding-left: 12px; }
    .con-controles .bl-pc-pie { padding-right: calc(var(--bl-car-n, 1) * 20px + 20px); }
    .bl-pc-puntos { padding: 0 6px; }
    .bl-pc-punto { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .bl-pc-boton, .bl-pc-detalle, .bl-pc-detalle-in, .bl-pc-detalle-cont,
    .bl-pc-diapo, .bl-pc-diapo.es-activo, .bl-pc-foto img { transition: none; }
    a.bl-pc-diapo-in:hover .bl-pc-foto img { transform: none; }
    .bl-tabs-listo .bl-pc-panel.es-activo { animation: none; }
}