/*
 * bloques/proyectos-destacados — proyectos en mosaico (tarjetas grandes con la
 * foto a sangre) o en rejilla (foto con las categorías y el nombre debajo).
 *
 * El bloque no depende de web/public/css/proyectos.css (que solo se carga en
 * las páginas de proyectos): se ve igual en cualquier página.
 */

.bl-pd-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Mosaico: tarjetas grandes a dos columnas ───────────────────────── */
.bl-pd-mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* Bajo la foto, fondo oscuro: si tarda o falla, el nombre en blanco se sigue
   leyendo. La tarjeta sin foto toma la superficie del tema. */
.bl-pd-mosaico .bl-pd-tarjeta { position: relative; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--vk-oscuro-2, #2f2e2c); }
.bl-pd-mosaico .bl-pd-tarjeta.sin-imagen { background: var(--vk-crema-2, #efe9e1); }
.bl-tema-oscuro .bl-pd-mosaico .bl-pd-tarjeta.sin-imagen { background: var(--vk-oscuro-2, #2f2e2c); }
/* Con un número impar, la última ocupa la fila entera a la misma altura. */
.bl-pd-mosaico .bl-pd-tarjeta.es-ancha { grid-column: 1 / -1; aspect-ratio: 32 / 9; }

.bl-pd-mosaico .bl-pd-enlace {
    position: absolute; inset: 0; z-index: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
    padding: clamp(20px, 2.6vw, 36px);
    color: inherit; text-decoration: none;
}
/* El foco se dibuja por dentro: la tarjeta recorta lo que sobresale. */
.bl-pd-mosaico .bl-pd-enlace:focus-visible { outline-offset: -5px; }
.bl-pd-mosaico .bl-pd-tarjeta:not(.sin-imagen) .bl-pd-enlace { color: #fff; }

.bl-pd-mosaico .bl-pd-imagen { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.bl-pd-mosaico .bl-pd-imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
/* Degradado sutil abajo para que el nombre se lea sobre cualquier foto. */
.bl-pd-mosaico .bl-pd-imagen::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(20, 19, 18, .66) 0%, rgba(20, 19, 18, .24) 40%, rgba(20, 19, 18, 0) 66%);
}
.bl-pd-mosaico .bl-pd-enlace:hover .bl-pd-imagen img,
.bl-pd-mosaico .bl-pd-enlace:focus-visible .bl-pd-imagen img { transform: scale(1.04); }

.bl-pd-mosaico .bl-pd-tarjeta:not(.sin-imagen) .bl-pd-chip { background: rgba(38, 37, 36, .74); color: #fff; }
.bl-pd-mosaico .bl-pd-nombre {
    margin: auto 0 0; max-width: 18em;
    font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance;
}

/* ── Rejilla: foto y, debajo, categorías y nombre ───────────────────── */
.bl-pd-rejilla {
    display: grid; grid-template-columns: repeat(var(--bl-pd-columnas, 2), minmax(0, 1fr));
    gap: clamp(32px, 4vw, 56px) clamp(16px, 2vw, 28px);
}
.bl-pd-col-2 { --bl-pd-columnas: 2; }
.bl-pd-col-3 { --bl-pd-columnas: 3; }
.bl-pd-col-4 { --bl-pd-columnas: 4; }

.bl-pd-rejilla .bl-pd-tarjeta { min-width: 0; }
.bl-pd-rejilla .bl-pd-enlace { display: flex; flex-direction: column; gap: 16px; color: inherit; text-decoration: none; }
.bl-pd-rejilla .bl-pd-imagen { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--vk-crema-2, #efe9e1); }
.bl-tema-oscuro .bl-pd-rejilla .bl-pd-imagen { background: var(--vk-oscuro-2, #2f2e2c); }
.bl-pd-rejilla .bl-pd-imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.bl-pd-rejilla .bl-pd-enlace:hover .bl-pd-imagen img,
.bl-pd-rejilla .bl-pd-enlace:focus-visible .bl-pd-imagen img { transform: scale(1.04); }

.bl-pd-info { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bl-pd-rejilla .bl-pd-nombre {
    margin: 0; font-size: clamp(21px, 1.9vw, 26px); font-weight: 500; line-height: 1.2;
    text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .2em;
    transition: text-decoration-color .2s;
}
.bl-pd-rejilla .bl-pd-enlace:hover .bl-pd-nombre,
.bl-pd-rejilla .bl-pd-enlace:focus-visible .bl-pd-nombre { text-decoration-color: var(--vk-amarillo, #dfbe2d); }
.bl-pd-rejilla.bl-pd-col-3 .bl-pd-nombre,
.bl-pd-rejilla.bl-pd-col-4 .bl-pd-nombre { font-size: clamp(19px, 1.6vw, 22px); }

/* ── Casos (repetidor `casos`): foto, sector, cliente, titular y «Hoy:» ── */
.bl-pd-casos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.bl-pd-caso { display: flex; flex-direction: column; min-width: 0; background: var(--vk-crema-2, #efe9e1); }
.bl-tema-oscuro .bl-pd-caso { background: var(--vk-oscuro-2, #2f2e2c); }
.bl-pd-caso .bl-pd-imagen { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(38, 37, 36, .08); }
.bl-pd-caso .bl-pd-imagen img { width: 100%; height: 100%; object-fit: cover; }
/* Sin foto: panel gris oscuro con las iniciales, sobre cualquier fondo (como en opiniones). */
.bl-pd-caso .bl-pd-sin-foto { position: relative; background: var(--vk-oscuro-3, #3b3a37); }
.bl-pd-iniciales {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-weight: 500; font-size: clamp(64px, 7vw, 104px); line-height: 1; letter-spacing: -.03em;
    color: rgba(255, 255, 255, .9);
}
/* Dos casos: foto apaisada para que las tarjetas no crezcan tanto; cuatro, en una fila. */
.bl-pd-casos--n2 .bl-pd-imagen { aspect-ratio: 16 / 9; }
@media (min-width: 1101px) { .bl-pd-casos--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bl-pd-caso-cuerpo { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(22px, 2.4vw, 32px); }
.bl-pd-caso-meta { margin: 0; font-family: var(--fuente-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .04em; line-height: 1.5; text-transform: uppercase; color: var(--vk-texto-2, #5f5c58); }
.bl-tema-oscuro .bl-pd-caso-meta { color: rgba(255, 255, 255, .62); }
.bl-pd-caso .bl-pd-nombre { margin: 0; font-size: clamp(20px, 1.8vw, 25px); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.bl-pd-caso-texto { margin: 0; font-size: 16px; line-height: 1.55; }
.bl-tema-oscuro .bl-pd-caso-texto { color: rgba(255, 255, 255, .86); }
.bl-pd-caso-bloque { display: flex; flex-direction: column; gap: 6px; font-size: 15.5px; line-height: 1.5; }
.bl-pd-caso-bloque p { margin: 0; }
.bl-pd-caso-bloque ul { margin: 0; padding-left: 1.1em; }
.bl-pd-caso-etq { font-family: var(--fuente-mono, ui-monospace, monospace); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--vk-texto-2, #5f5c58); }
.bl-tema-oscuro .bl-pd-caso-bloque { color: rgba(255, 255, 255, .86); }
.bl-tema-oscuro .bl-pd-caso-etq { color: rgba(255, 255, 255, .6); }
.bl-pd-caso-hoy {
    width: 100%; margin: 0; padding-top: 14px; border-top: 1px solid var(--vk-linea, rgba(38, 37, 36, .14));
    font-family: var(--fuente-mono, ui-monospace, monospace); font-size: 12.5px; line-height: 1.6; letter-spacing: .03em; text-transform: uppercase;
    color: var(--vk-texto-2, #5f5c58);
}
.bl-tema-oscuro .bl-pd-caso-hoy { border-top-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .72); }
.bl-pd-caso-hoy-etq { font-weight: 500; color: var(--vk-oscuro, #262524); }
.bl-tema-oscuro .bl-pd-caso-hoy-etq { color: var(--vk-amarillo, #dfbe2d); }
.bl-pd-caso-enlace { margin-top: auto; padding-top: 6px; color: inherit; }

.bl-pd .bl-ancla { display: block; scroll-margin-top: var(--alto-cabecera, 120px); }

/* ── Botón final ────────────────────────────────────────────────────── */
.bl-pd-cta { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }

@media (max-width: 1100px) {
    .bl-pd .bl-pd-rejilla.bl-pd-col-3,
    .bl-pd .bl-pd-rejilla.bl-pd-col-4 { --bl-pd-columnas: 2; }
}
@media (max-width: 700px) {
    .bl-pd-mosaico { grid-template-columns: minmax(0, 1fr); }
    .bl-pd-mosaico .bl-pd-tarjeta,
    .bl-pd-mosaico .bl-pd-tarjeta.es-ancha { grid-column: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
    .bl-pd .bl-pd-rejilla.bl-pd-col-2,
    .bl-pd .bl-pd-rejilla.bl-pd-col-3,
    .bl-pd .bl-pd-rejilla.bl-pd-col-4 { --bl-pd-columnas: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .bl-pd-mosaico .bl-pd-imagen img,
    .bl-pd-rejilla .bl-pd-imagen img { transition: none; }
    .bl-pd .bl-pd-enlace:hover .bl-pd-imagen img,
    .bl-pd .bl-pd-enlace:focus-visible .bl-pd-imagen img { transform: none; }
}

/* Un solo caso: foto y texto en dos columnas, no una tarjeta a todo el ancho. */
@media (min-width: 761px) {
    .bl-pd-casos--uno .bl-pd-caso { flex-direction: row; }
    .bl-pd-casos--uno .bl-pd-imagen { flex: 0 0 50%; aspect-ratio: 4 / 3; }
    .bl-pd-casos--uno .bl-pd-caso-cuerpo { justify-content: center; }
}