/*
RUTA: wwwroot/css/pages/bobesponja.css
----------------------------------------------------------
Wegmüller Freelancer - Detalle colección Bob Esponja
Qué hace:
- Define solo estructura específica de /BobEsponja.
- Usa las variables globales de site.css, claro y oscuro.
- Mantiene texto histórico obligatorio.
- Tarjeta de solo figura: nombre centrado e imagen grande, sin textos bajo imagen.
- Zoom modal: una sola imagen elegida.
Última modificación: 2026-06-07 - ajuste estándar Actimel compacto
----------------------------------------------------------
*/

.wf-bobesponja-page {
    position: relative;
    z-index: 0;
    padding: 1rem 1rem 2.25rem;
    color: var(--wf-text);
    background: transparent !important;
    scroll-margin-top: 6rem;
}

.wf-bobesponja-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(16rem, .55fr);
    gap: 1.25rem;
    align-items: stretch;
    padding: 1.15rem;
    margin-bottom: 1.05rem;
    border: 1px solid var(--wf-border-soft);
    border-radius: var(--wf-radius-panel);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, 0) 38%),
        var(--wf-panel-bg) !important;
    box-shadow: var(--wf-shadow-soft);
}

.wf-bobesponja-hero-copy,
.wf-bobesponja-hero-media {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
}

.wf-bobesponja-hero-copy {
    padding: 1.35rem;
    border: 1px solid rgba(255, 255, 255, .88);
    background: rgba(255, 255, 255, .56);
}

.wf-bobesponja-eyebrow,
.wf-bobesponja-group-kicker,
.wf-bobesponja-modal-kicker {
    margin: 0 0 .34rem;
    color: var(--wf-title-soft);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.wf-bobesponja-hero h1 {
    margin: 0 0 1rem;
    color: var(--wf-title);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: clamp(2.1rem, 3.5vw, 3.25rem);
    line-height: 1.02;
    font-weight: 800;
    text-shadow: var(--wf-heading-shadow);
}

.wf-bobesponja-history-text {
    max-width: 64rem;
    margin-bottom: 1.05rem;
    color: var(--wf-text);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.02rem;
    line-height: 1.58;
    text-align: justify;
}

.wf-bobesponja-history-text p {
    margin: 0 0 .85rem;
}

.wf-bobesponja-hero-media {
    min-height: 19rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 1px solid var(--wf-border-soft);
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .28) 48%, rgba(255, 255, 255, 0) 72%),
        linear-gradient(180deg, var(--wf-blue-0) 0%, var(--wf-cream-1) 100%);
}

.wf-bobesponja-hero-image {
    width: min(100%, 23rem);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 1rem 1.2rem rgba(23, 63, 109, .15));
}

.wf-bobesponja-logo-wrap {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: 4.8rem;
    height: 4.8rem;
    padding: .45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--wf-border-soft);
    background: linear-gradient(180deg, #ffffff 0%, var(--wf-cream-1) 100%);
    box-shadow: var(--wf-shadow-soft);
}

.wf-bobesponja-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.wf-bobesponja-metrics {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.wf-bobesponja-metric {
    min-width: 0;
    padding: .72rem .55rem;
    border: 1px solid var(--wf-blue-border);
    border-radius: 1rem;
    background: var(--wf-count-bg);
    text-align: center;
    box-shadow: var(--wf-shadow-soft);
}

.wf-bobesponja-metric-count,
.wf-bobesponja-metric-label {
    display: block;
}

.wf-bobesponja-metric-count {
    color: var(--wf-blue-3);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.65rem;
    line-height: 1;
    font-weight: 800;
}

.wf-bobesponja-metric-label {
    margin-top: .22rem;
    color: var(--wf-text-soft);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wf-bobesponja-group {
    margin-top: 1.05rem;
    padding: 1rem;
    border: 1px solid var(--wf-border-soft);
    border-radius: var(--wf-radius-panel);
    background: var(--wf-panel-bg) !important;
    box-shadow: var(--wf-shadow-soft);
}

.wf-bobesponja-group-heading {
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--wf-border-soft);
    border-radius: 1.1rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, 0) 45%),
        linear-gradient(180deg, #ffffff 0%, var(--wf-cream-1) 100%);
}

.wf-bobesponja-group-heading h2 {
    margin: 0;
    color: var(--wf-title);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: clamp(1.28rem, 1.85vw, 1.72rem);
    font-weight: 800;
    line-height: 1.12;
    text-shadow: var(--wf-heading-shadow);
}

.wf-bobesponja-items {
    align-items: stretch;
}

.wf-bobesponja-card {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    border: 1px solid var(--wf-border-soft) !important;
    border-radius: var(--wf-radius-card) !important;
    background: var(--wf-card-bg) !important;
    box-shadow: var(--wf-shadow-soft);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.wf-bobesponja-card:hover,
.wf-bobesponja-card:focus-within {
    transform: translateY(-2px);
    border-color: var(--wf-border) !important;
    box-shadow: var(--wf-shadow);
}

.wf-bobesponja-card::before {
    content: "";
    position: absolute;
    inset: .32rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(216, 174, 69, .20);
    pointer-events: none;
}

.wf-bobesponja-card-name {
    position: relative;
    z-index: 1;
    min-height: 2.75rem;
    margin: 0;
    padding: .72rem .45rem .42rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wf-title);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: clamp(1.02rem, 1.2vw, 1.24rem);
    font-weight: 800;
    line-height: 1.12;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: var(--wf-heading-shadow);
}

.wf-bobesponja-card-name::after {
    content: "✦";
    position: absolute;
    left: 50%;
    bottom: -.18rem;
    transform: translateX(-50%);
    color: var(--wf-gold-2);
    font-size: .62rem;
}

.wf-bobesponja-image-button {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 1.4rem);
    min-width: 0;
    min-height: 13rem;
    margin: .62rem .7rem .8rem;
    padding: .55rem;
    border: 1px solid var(--wf-blue-border);
    border-radius: 1.05rem;
    background:
        radial-gradient(circle at 50% 10%, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .26) 52%, rgba(255, 255, 255, 0) 76%),
        linear-gradient(180deg, #ffffff 0%, var(--wf-blue-0) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .74);
    cursor: zoom-in;
}

.wf-bobesponja-image-button:focus-visible {
    outline: 3px solid var(--wf-focus);
    outline-offset: 3px;
}

.wf-bobesponja-figure {
    width: 100%;
    max-width: 11.8rem;
    max-height: 11.8rem;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 .8rem 1rem rgba(23, 63, 109, .15));
    transition: transform .16s ease, filter .16s ease;
}

.wf-bobesponja-image-button:hover .wf-bobesponja-figure,
.wf-bobesponja-image-button:focus-visible .wf-bobesponja-figure {
    transform: translateY(-2px) scale(1.03);
    filter: drop-shadow(0 1rem 1.15rem rgba(23, 63, 109, .20));
}

.wf-bobesponja-bottom-actions {
    margin-top: 1.4rem;
    display: flex;
    justify-content: center;
}

.wf-bobesponja-back-button {
    min-width: 16rem;
    padding: .72rem 1.6rem;
    border: 1px solid var(--wf-blue-border);
    border-radius: 999px;
    color: var(--wf-title) !important;
    background: var(--wf-button-bg);
    font-weight: 850;
    letter-spacing: .02em;
    box-shadow: var(--wf-shadow-soft);
}

.wf-bobesponja-back-button:hover,
.wf-bobesponja-back-button:focus {
    border-color: var(--wf-blue-2);
    color: var(--wf-link-hover) !important;
    background: linear-gradient(180deg, #ffffff 0%, #dcefff 100%);
}

.wf-bobesponja-lightbox[hidden] {
    display: none !important;
}

.wf-bobesponja-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.wf-bobesponja-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 22, 35, .58);
    backdrop-filter: blur(4px);
}

.wf-bobesponja-lightbox-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 50rem);
    max-height: min(94vh, 56rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--wf-border);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, 0) 36%),
        var(--wf-card-bg);
    box-shadow: var(--wf-shadow-strong);
}

.wf-bobesponja-lightbox-header {
    position: relative;
    min-height: 4.75rem;
    padding: .9rem 4.2rem .75rem 1.1rem;
    border-bottom: 1px solid var(--wf-border-soft);
    text-align: center;
}

.wf-bobesponja-lightbox-header h2 {
    margin: 0;
    color: var(--wf-title);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 800;
    line-height: 1.02;
    text-shadow: var(--wf-heading-shadow);
}

.wf-bobesponja-modal-kicker {
    display: none;
}

.wf-bobesponja-lightbox-close {
    position: absolute;
    top: .78rem;
    right: .9rem;
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wf-border);
    border-radius: 999px;
    color: var(--wf-gold-3);
    background: linear-gradient(180deg, #ffffff 0%, var(--wf-cream-1) 100%);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--wf-shadow-soft);
}

.wf-bobesponja-lightbox-close:hover,
.wf-bobesponja-lightbox-close:focus {
    background: linear-gradient(180deg, #ffffff 0%, var(--wf-gold-0) 100%);
    border-color: var(--wf-border-strong);
}

.wf-bobesponja-lightbox-body {
    min-height: 0;
    padding: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.wf-bobesponja-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: calc(94vh - 8rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: .8rem;
    box-shadow: 0 .9rem 1.8rem rgba(13, 43, 78, .16);
}

body.wf-bobesponja-lightbox-open {
    overflow: hidden;
}

@media only screen and (max-width: 1199px) {
    .wf-bobesponja-image-button {
        min-height: 12.2rem;
    }

    .wf-bobesponja-figure {
        max-height: 11.5rem;
    }
}

@media only screen and (max-width: 991px) {
    .wf-bobesponja-hero {
        grid-template-columns: 1fr;
    }

    .wf-bobesponja-hero-media {
        min-height: 15rem;
    }

    .wf-bobesponja-hero-image {
        width: min(100%, 20rem);
    }
}

@media only screen and (max-width: 575px) {
    .wf-bobesponja-page {
        padding: .6rem .6rem 1.4rem;
    }

    .wf-bobesponja-hero,
    .wf-bobesponja-group {
        padding: .72rem;
        border-radius: 1rem;
    }

    .wf-bobesponja-hero-copy {
        padding: .9rem;
    }

    .wf-bobesponja-history-text {
        font-size: .96rem;
        text-align: left;
    }

    .wf-bobesponja-metrics {
        grid-template-columns: 1fr;
    }

    .wf-bobesponja-card-name {
        min-height: 2.65rem;
    }

    .wf-bobesponja-image-button {
        min-height: 12.2rem;
    }

    .wf-bobesponja-figure {
        max-height: 11.5rem;
    }

    .wf-bobesponja-lightbox {
        padding: .45rem;
    }

    .wf-bobesponja-lightbox-dialog {
        max-height: 94vh;
        border-radius: .9rem;
    }

    .wf-bobesponja-lightbox-header {
        min-height: 4.4rem;
        padding: .75rem 3.6rem .7rem .9rem;
    }

    .wf-bobesponja-lightbox-close {
        top: .65rem;
        right: .7rem;
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.75rem;
    }

    .wf-bobesponja-lightbox-body {
        padding: .65rem;
    }

    .wf-bobesponja-lightbox-image {
        max-height: calc(94vh - 6.5rem);
    }
}

/* Modo oscuro oficial: mantiene tamaños y estructura, solo cambia superficies. */
html[data-theme="dark"] .wf-bobesponja-hero,
html[data-theme="dark"] .wf-bobesponja-group,
html[data-theme="dark"] .wf-bobesponja-card {
    background: var(--wf-panel-bg) !important;
}

html[data-theme="dark"] .wf-bobesponja-card {
    background: var(--wf-card-bg) !important;
}

html[data-theme="dark"] .wf-bobesponja-hero-copy {
    border-color: rgba(126, 199, 255, .18);
    background: rgba(11, 18, 27, .28);
}

html[data-theme="dark"] .wf-bobesponja-hero-media,
html[data-theme="dark"] .wf-bobesponja-group-heading,
html[data-theme="dark"] .wf-bobesponja-image-button {
    background:
        radial-gradient(circle at 50% 12%, rgba(126, 199, 255, .18) 0%, rgba(126, 199, 255, 0) 52%),
        linear-gradient(180deg, #1d3045 0%, #111e2c 100%) !important;
}

html[data-theme="dark"] .wf-bobesponja-logo-wrap,
html[data-theme="dark"] .wf-bobesponja-lightbox-close {
    background: var(--wf-panel-title-bg) !important;
}