/* =========================================================
   NEXXA PRO — PÁGINA DE DIMENSIÓN (capa visual)
   VERSIÓN: v19-a (título ~80 % color protagonista · imagen que aparece y se desvanece) · Solo afecta a .pro-dim. Se carga después de
   nexxa-pro.css y antes de nexxa-glass-v15.css.
   Para revertir: quitar su <link> en nexxa-pro-dimension.php.

   REGLA DE IDENTIDAD POR CATEGORÍA (permanente, para todo desarrollo futuro)
   · Cada dimensión tiene UN color protagonista que domina título,
     etiquetas, marcos, nodos y brillos:
        Descanso  → turquesa  78, 219, 211
        Alimentación → violeta 173, 137, 239
        Movimiento → fucsia   239, 79, 193
   · Los otros dos colores aparecen solo como destellos pequeños
     (~15 % del degradado), nunca como protagonistas.
   ========================================================= */

.pro-dim.is-rest {
    --c-main: rgb(78, 219, 211);
    --c-hint-a: rgb(173, 137, 239);
    --c-hint-b: rgb(239, 79, 193);
}
.pro-dim.is-food {
    --c-main: rgb(173, 137, 239);
    --c-hint-a: rgb(78, 219, 211);
    --c-hint-b: rgb(239, 79, 193);
}
.pro-dim.is-move {
    --c-main: rgb(239, 79, 193);
    --c-hint-a: rgb(78, 219, 211);
    --c-hint-b: rgb(173, 137, 239);
}

.pro-dim {
    --c-soft: color-mix(in srgb, var(--c-main) 78%, white);
}

/* ---------- Título: color protagonista + destellos ---------- */
.pro-dim .pro-dim-copy h1 {
    background:
        linear-gradient(
            110deg,
            var(--c-main) 0%,
            var(--c-soft) 14%,
            var(--c-main) 28%,
            var(--c-main) 36%,
            var(--c-hint-a) 41%,
            var(--c-main) 46%,
            var(--c-main) 62%,
            var(--c-soft) 70%,
            var(--c-main) 76%,
            var(--c-hint-b) 82%,
            var(--c-main) 88%,
            var(--c-main) 100%
        );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    filter:
        drop-shadow(0 0 10px color-mix(in srgb, var(--c-main) 45%, transparent))
        drop-shadow(0 0 26px color-mix(in srgb, var(--c-main) 28%, transparent));
}

.pro-dim .pro-eyebrow,
.pro-dim .pro-card-label {
    color: var(--c-soft);
    text-shadow: 0 0 16px color-mix(in srgb, var(--c-main) 55%, transparent);
}

/* ---------- Pantalla de cristal (imagen de la dimensión) ---------- */
.pro-screen {
    position: relative;
    width: 100%;
}

.pro-screen-btn {
    --tint: 1;
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    font: inherit;
    color: inherit;
    border-radius: 26px;
    border: 1px solid color-mix(in srgb, var(--c-main) 55%, rgba(255, 255, 255, 0.25));
    background: rgba(24, 12, 44, 0.35);
    -webkit-backdrop-filter: blur(4px) saturate(175%);
    backdrop-filter: blur(4px) saturate(175%);
    box-shadow:
        0 0 34px color-mix(in srgb, var(--c-main) 34%, transparent),
        0 0 70px color-mix(in srgb, var(--c-main) 16%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 0 38px color-mix(in srgb, var(--c-main) 18%, transparent);
    transition: box-shadow 500ms ease, transform 500ms ease;
}

.pro-screen-btn:hover,
.pro-screen-btn:focus-visible {
    --tint: 0.45;
    transform: translateY(-4px);
    outline: none;
}

.pro-screen-btn:focus-visible {
    box-shadow:
        0 0 0 2px var(--c-main),
        0 0 40px color-mix(in srgb, var(--c-main) 45%, transparent);
}

.pro-screen-btn img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--foco, 50% 25%);
    opacity: 0.2;
    filter: saturate(0.8) brightness(0.9) contrast(1.05);
    transform: scale(1.04);
    animation: proAparece 6.5s ease-in-out infinite;
    transition: filter 600ms ease, transform 900ms ease;
}

/* Reposo: la imagen aparece y se desvanece, como una señal en pantalla */
@keyframes proAparece {
    0%, 100% { opacity: 0.16; }
    50%      { opacity: 0.74; }
}

/* Cursor encima: se queda visible y más clara (aún con el cristal) */
.pro-screen-btn:hover img,
.pro-screen-btn:focus-visible img {
    animation: none;
    opacity: 0.88;
    filter: saturate(0.95) brightness(0.98) contrast(1.05);
}

/* Capa de color de la categoría + líneas de pantalla + destello */
.pro-screen-tint,
.pro-screen-lines,
.pro-screen-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: opacity 600ms ease;
}

.pro-screen-tint {
    opacity: calc(0.85 * var(--tint));
    mix-blend-mode: soft-light;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--c-main) 80%, transparent),
            rgba(38, 18, 64, 0.65) 70%
        );
}

.pro-screen-lines {
    opacity: var(--tint);
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.07) 0 1px,
            transparent 1px 4px
        );
}

.pro-screen-sheen {
    opacity: var(--tint);
    background:
        linear-gradient(
            105deg,
            transparent 38%,
            rgba(255, 255, 255, 0.22) 50%,
            transparent 62%
        );
    background-size: 260% 100%;
    background-position: 130% 0;
    animation: proSheen 7s ease-in-out infinite;
}

@keyframes proSheen {
    0%, 55%  { background-position: 130% 0; }
    100%     { background-position: -30% 0; }
}

/* Marco luminoso NEXXA alrededor de la pantalla */
.pro-screen::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 2;
    padding: 2px;
    border-radius: 27px;
    pointer-events: none;
    opacity: 0.7;
    background:
        linear-gradient(
            120deg,
            var(--c-main) 0%,
            color-mix(in srgb, var(--c-main) 20%, transparent) 30%,
            var(--c-hint-a) 48%,
            color-mix(in srgb, var(--c-main) 20%, transparent) 66%,
            var(--c-main) 100%
        );
    background-size: 300% 100%;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box exclude,
        linear-gradient(#000 0 0);
    animation: proBorder 7s linear infinite;
    transition: opacity 500ms ease, filter 500ms ease;
}

.pro-screen.is-revealed::after {
    opacity: 1;
    filter: drop-shadow(0 0 10px var(--c-main)) drop-shadow(0 0 24px var(--c-main));
}

.pro-screen.is-revealed .pro-screen-btn {
    box-shadow:
        0 0 46px color-mix(in srgb, var(--c-main) 55%, transparent),
        0 0 110px color-mix(in srgb, var(--c-main) 28%, transparent),
        inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Esquinas luminosas */
.pro-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    border-color: var(--c-soft);
    border-style: solid;
    border-width: 0;
    filter: drop-shadow(0 0 6px var(--c-main));
    transition: opacity 500ms ease;
}
.pro-corner.tl { top: 12px;    left: 12px;  border-top-width: 2px;    border-left-width: 2px; }
.pro-corner.tr { top: 12px;    right: 12px; border-top-width: 2px;    border-right-width: 2px; }
.pro-corner.bl { bottom: 12px; left: 12px;  border-bottom-width: 2px; border-left-width: 2px; }
.pro-corner.br { bottom: 12px; right: 12px; border-bottom-width: 2px; border-right-width: 2px; }

.pro-screen-chip {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--c-main) 60%, transparent);
    background: rgba(24, 12, 44, 0.55);
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    white-space: nowrap;
    color: var(--c-soft);
    transition: opacity 400ms ease;
}

/* Estado revelado: imagen completa, sin capas */
.pro-screen.is-revealed .pro-screen-btn {
    --tint: 0;
    transform: none;
}
.pro-screen.is-revealed img {
    animation: none;
    opacity: 1;
    filter: none;
    transform: scale(1);
}
.pro-screen.is-revealed .pro-screen-chip { opacity: 0; }
.pro-screen.is-revealed .pro-corner      { opacity: 0.45; }

.pro-screen-btn.is-empty { cursor: default; }

@media (prefers-reduced-motion: reduce) {
    .pro-screen-btn img { opacity: 0.6; }
}

/* ---------- Paneles: marco luminoso con el color de la categoría ---------- */
.pro-dim .pro-panel {
    position: relative;
    isolation: isolate;
    border-color: transparent;
}

.pro-dim .pro-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1.5px;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(
            120deg,
            var(--c-main) 0%,
            color-mix(in srgb, var(--c-main) 25%, transparent) 28%,
            var(--c-hint-a) 46%,
            color-mix(in srgb, var(--c-main) 25%, transparent) 62%,
            var(--c-main) 100%
        );
    background-size: 280% 100%;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box exclude,
        linear-gradient(#000 0 0);
    animation: proBorder 9s linear infinite;
}

@keyframes proBorder {
    0%   { background-position: 0% 50%; }
    100% { background-position: 280% 50%; }
}

.pro-dim .pro-panel h2 {
    color: var(--c-soft);
    text-shadow: 0 0 22px color-mix(in srgb, var(--c-main) 40%, transparent);
}

/* ---------- Acciones: nodos luminosos ---------- */
.pro-dim .pro-acciones li {
    position: relative;
    padding-left: 48px;
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.pro-dim .pro-acciones li::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--c-main);
    box-shadow:
        0 0 10px var(--c-main),
        0 0 22px color-mix(in srgb, var(--c-main) 60%, transparent);
    animation: proNode 3.2s ease-in-out infinite;
}

.pro-dim .pro-acciones li:hover {
    transform: translateX(6px);
    border-color: color-mix(in srgb, var(--c-main) 65%, transparent);
    box-shadow: 0 0 22px color-mix(in srgb, var(--c-main) 28%, transparent);
}

@keyframes proNode {
    0%, 100% { transform: scale(1);   opacity: 0.85; }
    50%      { transform: scale(1.3); opacity: 1; }
}

/* ---------- Accesibilidad y respaldo ---------- */
@media (prefers-reduced-motion: reduce) {
    .pro-dim .pro-dim-copy h1,
    .pro-screen-sheen,
    .pro-screen::after,
    .pro-screen-btn img,
    .pro-dim .pro-panel::before,
    .pro-dim .pro-acciones li::before {
        animation: none;
    }
}

@media (max-width: 900px) {
    .pro-screen-btn { aspect-ratio: 16 / 11; }
}