/* =========================================================
   ON MOSTRADOR

   Markup: templates/mostrador.php
   Visor:  assets/js/mostrador.js

   Reutiliza los tokens del tema (--brand, --brand-dark, --muted…) con un valor
   de respaldo en cada var() para que la sección siga siendo legible si algún día
   se pinta fuera del tema ON Publicidad.

   La sección va al final del Home: arriba queda "call to action" (fondo
   --bg-2) y debajo el footer (--coal), así que el mostrador se pinta en blanco
   para separar los tres bloques sin necesidad de líneas.
   ========================================================= */

.on-mostrador {
    position: relative;
    background: var(--paper, #fff);
}

/* El tema hereda el box-sizing de Bootstrap, pero la sección no debe depender de
   que Bootstrap siga estando: sin esto, el botón del perfil (que va al 100 % del
   ancho en móvil) suma su relleno y desborda la pantalla. */
.on-mostrador,
.on-mostrador *,
.on-mostrador *::before,
.on-mostrador *::after {
    box-sizing: border-box;
}

/* Filo superior con los colores de marca: hace de "borde de mostrador" y separa
   la sección del bloque anterior sin cargarla con un título más. */
.on-mostrador::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--brand-dark, #061225),
        var(--brand-light, #D41B50) 45%,
        var(--brand, #EC6527)
    );
}

/* =========================================================
   FICHA DE PERFIL
   Avatar + datos + botón. Es el equivalente a la cabecera de un perfil de
   Instagram, con el avatar en cuadrado redondeado (y no en círculo) para no
   leerse como una copia.
   ========================================================= */
.on-mostrador_perfil {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.2em 1.6em;
    padding-bottom: 1.8em;
    margin-bottom: 2em;
    border-bottom: 1px solid #ececec;
}

.on-mostrador_avatar {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    padding: 3px;
    border-radius: 26px;
    background: linear-gradient(135deg, var(--brand-light, #D41B50), var(--brand, #EC6527));
    box-shadow: 0 8px 22px rgba(6, 18, 37, .12);
}

.on-mostrador_avatar_img {
    width: 100%;
    height: 100%;
    padding: 8px;
    border-radius: 23px;
    background: var(--paper, #fff);
    /* Contain y no cover: el respaldo del avatar es el logo del sitio y un logo
       recortado se lee como un error. */
    object-fit: contain;
}

.on-mostrador_avatar_inicial {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 23px;
    background: var(--paper, #fff);
    color: var(--brand, #EC6527);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
}

.on-mostrador_perfil_datos {
    min-width: 0;
}

/* Antetítulo con punto, igual que el de la sección "call to action" del tema. */
.on-mostrador_eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0 0 0.5em;
    color: var(--brand, #EC6527);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.on-mostrador_dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand, #EC6527);
}

.on-mostrador_titulo {
    margin: 0;
    color: var(--brand-dark, #061225);
    font-weight: 800;
    line-height: 1.1;
}

.on-mostrador_alias {
    margin: 0.35em 0 0;
    color: var(--muted, #495A64);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.on-mostrador_bio {
    max-width: 52ch;
    margin: 0.8em 0 0;
    color: var(--muted, #495A64);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ----- Cifras del perfil ----- */
.on-mostrador_stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em 1.6em;
    margin: 1.1em 0 0;
    padding: 0;
    list-style: none;
}

.on-mostrador_stat {
    display: flex;
    align-items: baseline;
    gap: 0.4em;
}

.on-mostrador_stat_valor {
    color: var(--brand-dark, #061225);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
}

.on-mostrador_stat_label {
    color: var(--muted, #495A64);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* ----- Botón del perfil ----- */
.on-mostrador_cta {
    gap: 0.55em;
    padding: 0.7rem 1.6rem;
    font-weight: 700;
}

.on-mostrador_cta .on-mostrador_icon {
    width: 15px;
    height: 15px;
}

/* Aviso de contenido de muestra: solo lo ve quien puede editar. */
.on-mostrador_aviso {
    margin: 0 0 1.6em;
    padding: 0.8em 1em;
    border: 1px dashed var(--brand, #EC6527);
    border-radius: 10px;
    background: rgba(236, 101, 39, .05);
    color: var(--muted, #495A64);
    font-size: 0.82rem;
    line-height: 1.5;
}

.on-mostrador_aviso a {
    color: var(--brand, #EC6527);
    font-weight: 700;
}

/* =========================================================
   CUADRÍCULA
   Celdas cuadradas. La primera ocupa 2x2: hace de escaparate y rompe la
   retícula uniforme de un feed de Instagram.
   ========================================================= */
.on-mostrador_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row dense;
    gap: 0.7em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.on-mostrador_item {
    display: grid;
    min-width: 0;
}

/* La celda destacada ocupa las dos columnas. A dos columnas (móvil) NO puede
   ocupar además dos filas: al abarcar la fila entera se queda sin vecinas que
   marquen el alto de esas filas y se aplasta, así que en su lugar toma la
   proporción 4:3 y hace de portada apaisada. Desde tres columnas sí ocupa 2x2
   (ver el bloque de escritorio). */
.on-mostrador_item--destacado {
    grid-column: span 2;
}

/* =========================================================
   CELDA
   Es un <button>: abre el visor. Las celdas normales fijan su alto con la
   proporción 1:1 y son las que marcan el alto de las filas; la destacada no
   lleva proporción y se estira a las dos filas que ocupa, así ambas encajan
   exactamente.
   ========================================================= */
.on-mostrador_card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: #f1f1ef;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(6, 18, 37, .07);
    transition: box-shadow .3s ease, transform .3s ease;
}

.on-mostrador_item--destacado .on-mostrador_card {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
}

.on-mostrador_card:hover,
.on-mostrador_card:focus-visible {
    box-shadow: 0 14px 34px rgba(6, 18, 37, .16);
    transform: translateY(-2px);
}

.on-mostrador_card:focus-visible {
    outline: 2px solid var(--brand, #EC6527);
    outline-offset: 3px;
}

.on-mostrador_card_img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.on-mostrador_card:hover .on-mostrador_card_img,
.on-mostrador_card:focus-visible .on-mostrador_card_img {
    transform: scale(1.06);
}

/* Velo inferior: el título se lee siempre, no solo al pasar el ratón (en móvil
   no hay ratón y el título es la mitad de la información de cada trabajo). */
.on-mostrador_card_velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(6, 18, 37, .88) 0%,
        rgba(6, 18, 37, .55) 28%,
        rgba(6, 18, 37, 0) 62%
    );
    transition: opacity .3s ease;
}

.on-mostrador_card:hover .on-mostrador_card_velo,
.on-mostrador_card:focus-visible .on-mostrador_card_velo {
    opacity: .92;
}

.on-mostrador_card_info {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45em;
    padding: 0.9em 0.95em;
    text-align: left;
}

.on-mostrador_card_etiqueta {
    padding: 0.25em 0.7em;
    border-radius: 50px;
    background: var(--brand, #EC6527);
    color: var(--paper, #fff);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
}

.on-mostrador_card_titulo {
    color: var(--paper, #fff);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    /* Dos líneas como máximo: los títulos largos no deben tapar la foto. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.on-mostrador_item--destacado .on-mostrador_card_info {
    padding: 1.3em 1.4em;
}

.on-mostrador_item--destacado .on-mostrador_card_titulo {
    font-size: 1.05rem;
    -webkit-line-clamp: 3;
}

/* Lupa: aparece al pasar el ratón para dejar claro que la celda se puede abrir. */
.on-mostrador_card_lupa {
    position: absolute;
    top: 0.7em;
    right: 0.7em;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--paper, #fff);
    color: var(--brand-dark, #061225);
    opacity: 0;
    transform: scale(.7);
    transition: opacity .25s ease, transform .25s ease;
}

.on-mostrador_card_lupa .on-mostrador_icon {
    width: 15px;
    height: 15px;
}

.on-mostrador_card:hover .on-mostrador_card_lupa,
.on-mostrador_card:focus-visible .on-mostrador_card_lupa {
    opacity: 1;
    transform: scale(1);
}

/* =========================================================
   PIE DE LA SECCIÓN
   ========================================================= */
.on-mostrador_pie {
    margin-top: 2em;
    padding-top: 1.5em;
    border-top: 1px solid #ececec;
    text-align: center;
}

.on-mostrador_pie_link {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    color: var(--brand-dark, #061225);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .25s ease, gap .25s ease;
}

.on-mostrador_pie_link .on-mostrador_icon {
    width: 16px;
    height: 16px;
    color: var(--brand, #EC6527);
}

.on-mostrador_pie_link:hover,
.on-mostrador_pie_link:focus-visible {
    color: var(--brand, #EC6527);
    gap: 0.9em;
}

/* =========================================================
   VISOR
   Superposición propia: no depende de Bootstrap ni de los modales del tema, así
   que la sección se puede llevar tal cual a otro sitio.
   ========================================================= */
.on-mostrador_visor {
    /* Relleno propio y hueco superior, reutilizados por el botón de cerrar. */
    --on-mostrador-visor-pad: clamp(1em, 4vw, 3em);

    /* Hueco de la barra de administración de WordPress: va fija y en z-index
       99999, así que ninguna superposición puede taparla. El tema publica su
       alto en --admin-bar-h y el núcleo en --wp-admin--admin-bar--height; sin
       sesión iniciada no existe ninguna de las dos y vale 0. */
    --on-mostrador-visor-top: var(--admin-bar-h, var(--wp-admin--admin-bar--height, 0px));

    position: fixed;
    inset: 0;
    /* Escala de apilamiento del tema: barras pegajosas 100, botón "volver
       arriba" 900, barra de navegación 9990, modales 9999. El visor es una
       superposición a pantalla completa, así que va en la capa de los modales:
       por debajo tapaba la barra de navegación a medias y la foto chocaba con
       ella. */
    z-index: 9999;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5em;
    padding: calc(var(--on-mostrador-visor-pad) + var(--on-mostrador-visor-top))
             var(--on-mostrador-visor-pad)
             var(--on-mostrador-visor-pad);
    /* Casi opaco: la barra de navegación es blanca y con un velo más ligero se
       transparentaba por detrás de la foto. */
    background: rgba(6, 18, 37, .97);
    opacity: 0;
    transition: opacity .25s ease;
}

/* El atributo hidden manda sobre el display:grid de arriba. */
.on-mostrador_visor[hidden] {
    display: none;
}

.on-mostrador_visor.is-open {
    opacity: 1;
}

.on-mostrador_visor_figura {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    margin: 0;
    min-width: 0;
}

.on-mostrador_visor_img {
    max-width: 100%;
    max-height: 72vh;
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    object-fit: contain;
}

.on-mostrador_visor_pie {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45em;
    text-align: center;
}

.on-mostrador_visor_etiqueta {
    color: var(--brand, #EC6527);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.on-mostrador_visor_etiqueta:empty {
    display: none;
}

.on-mostrador_visor_titulo {
    max-width: 60ch;
    color: var(--paper, #fff);
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-weight: 700;
    line-height: 1.4;
}

.on-mostrador_visor_contador {
    color: rgba(255, 255, 255, .55);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

/* ----- Botones del visor ----- */
.on-mostrador_visor_btn {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: var(--paper, #fff);
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.on-mostrador_visor_btn .on-mostrador_icon {
    width: 20px;
    height: 20px;
}

.on-mostrador_visor_btn:hover,
.on-mostrador_visor_btn:focus-visible {
    background: var(--brand, #EC6527);
    border-color: var(--brand, #EC6527);
}

.on-mostrador_visor_btn:focus-visible {
    outline: 2px solid var(--paper, #fff);
    outline-offset: 2px;
}

.on-mostrador_visor_cerrar {
    position: absolute;
    /* Baja lo que ocupe la barra de administración, si la hay. */
    top: calc(clamp(0.8em, 3vw, 1.6em) + var(--on-mostrador-visor-top, 0px));
    right: clamp(0.8em, 3vw, 1.6em);
    z-index: 1;
}

/* Con una sola publicación las flechas no tienen a dónde ir: el JS las oculta. */
.on-mostrador_visor_btn[hidden] {
    display: none;
}

/* Mientras el visor está abierto se bloquea el desplazamiento del fondo. */
body.on-mostrador-visor-abierto {
    overflow: hidden;
}

/* =========================================================
   RESPONSIVE: MÓVILES / TABLET (≤ 959px)
   ========================================================= */
@media (max-width: 959px) {
    .on-mostrador .section_container {
        padding: 3em 7%;
    }

    .on-mostrador_perfil {
        grid-template-columns: auto 1fr;
    }

    .on-mostrador_titulo {
        font-size: clamp(1.5rem, 5.5vw, 1.9rem);
    }

    /* El botón baja a su propia fila, bajo el avatar y los datos. */
    .on-mostrador_perfil_accion {
        grid-column: 1 / -1;
    }

    /* La biografía se lee mejor a todo el ancho disponible. */
    .on-mostrador_bio {
        max-width: none;
    }
}

/* Solo en pantallas estrechas el botón ocupa todo el ancho: en tablet quedaría
   una pastilla de 700 px de largo para dos palabras. */
@media (max-width: 599px) {
    .on-mostrador_cta {
        width: 100%;
    }
}

@media (min-width: 600px) and (max-width: 959px) {
    .on-mostrador_grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================================================
   CELDA DESTACADA A PARTIR DE TRES COLUMNAS
   Con tres o más columnas quedan vecinas en las mismas filas, y son ellas las
   que fijan el alto: la destacada puede ocupar 2x2 y estirarse a su hueco.
   ========================================================= */
@media (min-width: 600px) {
    .on-mostrador_item--destacado {
        grid-row: span 2;
    }

    .on-mostrador_item--destacado .on-mostrador_card {
        aspect-ratio: auto;
        height: 100%;
    }
}

/* =========================================================
   RESPONSIVE: ESCRITORIO (≥ 960px)
   ========================================================= */
@media (min-width: 960px) {
    .on-mostrador .section_container {
        padding: 4.5em 15% 4em;
    }

    .on-mostrador_perfil {
        grid-template-columns: auto 1fr auto;
        gap: 1.4em 2.2em;
    }

    .on-mostrador_avatar {
        width: 104px;
        height: 104px;
        border-radius: 30px;
    }

    .on-mostrador_titulo {
        font-size: 2rem;
    }

    .on-mostrador_grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1em;
    }

    .on-mostrador_card_titulo {
        font-size: 0.86rem;
    }

    .on-mostrador_item--destacado .on-mostrador_card_titulo {
        font-size: 1.2rem;
    }
}

/* =========================================================
   PANTALLAS MUY ESTRECHAS
   ========================================================= */
@media (max-width: 419px) {
    .on-mostrador_avatar {
        width: 66px;
        height: 66px;
        border-radius: 20px;
    }

    .on-mostrador_avatar_img,
    .on-mostrador_avatar_inicial {
        border-radius: 17px;
    }

    .on-mostrador_grid {
        gap: 0.5em;
    }
}

/* =========================================================
   VISOR EN MÓVIL
   Las flechas bajan bajo la foto: a los lados se comen la mitad del ancho
   disponible, que es justo lo que hace falta para ver el trabajo.
   ========================================================= */
@media (max-width: 599px) {
    .on-mostrador_visor {
        grid-template-columns: 1fr;
        /* Las dos filas (foto y flechas) se juntan en el centro de la pantalla:
           sin esto se reparten el alto y las flechas acaban pegadas al borde
           inferior, lejos de la foto a la que se refieren. */
        align-content: center;
        justify-items: center;
        row-gap: 1.4em;
    }

    .on-mostrador_visor_prev {
        grid-row: 2;
        justify-self: start;
    }

    .on-mostrador_visor_next {
        grid-row: 2;
        justify-self: end;
    }

    .on-mostrador_visor_figura {
        grid-row: 1;
    }
}

/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .on-mostrador_card,
    .on-mostrador_card_img,
    .on-mostrador_card_velo,
    .on-mostrador_card_lupa,
    .on-mostrador_pie_link,
    .on-mostrador_visor,
    .on-mostrador_visor_btn {
        transition: none !important;
    }

    .on-mostrador_card:hover,
    .on-mostrador_card:focus-visible {
        transform: none;
    }

    .on-mostrador_card:hover .on-mostrador_card_img,
    .on-mostrador_card:focus-visible .on-mostrador_card_img {
        transform: none;
    }

    .on-mostrador_card_lupa {
        opacity: 1;
        transform: none;
    }
}