/**
 * NearVisual — La lechuza
 * Pixel art de 8 bits: 10 secuencias de 4 cuadros de 48 × 40, cuatro colores
 * (img/lechuza/*.png, una tira horizontal por secuencia; los dibuja
 * scratch/lechuza8/construir.py). Se escala solo por enteros (--k).
 *
 *   <span class="nv-owl" data-owl="web" aria-hidden="true"></span>
 *   <span class="nv-owl" data-owls="marca video contenido" …>   (rota; lechuza.js)
 *
 * Cada cuadro dura lo suyo (medidas.json), por eso cada secuencia tiene sus
 * propios @keyframes. Solo corre mientras se ve (lechuza.js le pone .is-vis).
 * Con movimiento reducido, o con «movimiento: no» en Ajustes, se queda en el
 * primer cuadro.
 */
.nv-owl {
    --k: 3;
    display: inline-block;
    flex: none;
    width: calc(var(--k) * 48px);
    height: calc(var(--k) * 40px);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: calc(var(--k) * 384px) calc(var(--k) * 40px);
    image-rendering: pixelated;
    animation-timing-function: step-end;
    animation-iteration-count: infinite;
    animation-play-state: paused;
    pointer-events: none;
}
.nv-owl.is-vis { animation-play-state: running; }

/* Generado desde img/lechuza/medidas.json: 8 cuadros por secuencia (la acción
   y luego un gesto propio de cada una). */
.nv-owl[data-owl="reposo"] { background-image: url(../img/lechuza/reposo.png?v=5); animation-name: nv-owl-reposo; animation-duration: 2120ms; }
@keyframes nv-owl-reposo {
    0.00% { background-position: calc(var(--k) * 0px) 0; }
    42.45% { background-position: calc(var(--k) * -48px) 0; }
    46.70% { background-position: calc(var(--k) * -96px) 0; }
    51.42% { background-position: calc(var(--k) * -144px) 0; }
    55.66% { background-position: calc(var(--k) * -192px) 0; }
    59.91% { background-position: calc(var(--k) * -240px) 0; }
    89.15% { background-position: calc(var(--k) * -288px) 0; }
    94.34% { background-position: calc(var(--k) * -336px) 0; }
    100% { background-position: 0 0; }
}
.nv-owl[data-owl="marca"] { background-image: url(../img/lechuza/marca.png?v=5); animation-name: nv-owl-marca; animation-duration: 2660ms; }
@keyframes nv-owl-marca {
    0.00% { background-position: calc(var(--k) * 0px) 0; }
    20.68% { background-position: calc(var(--k) * -48px) 0; }
    27.44% { background-position: calc(var(--k) * -96px) 0; }
    36.84% { background-position: calc(var(--k) * -144px) 0; }
    43.61% { background-position: calc(var(--k) * -192px) 0; }
    54.89% { background-position: calc(var(--k) * -240px) 0; }
    73.68% { background-position: calc(var(--k) * -288px) 0; }
    88.72% { background-position: calc(var(--k) * -336px) 0; }
    100% { background-position: 0 0; }
}
.nv-owl[data-owl="ideas"] { background-image: url(../img/lechuza/ideas.png?v=5); animation-name: nv-owl-ideas; animation-duration: 1980ms; }
@keyframes nv-owl-ideas {
    0.00% { background-position: calc(var(--k) * 0px) 0; }
    27.78% { background-position: calc(var(--k) * -48px) 0; }
    36.87% { background-position: calc(var(--k) * -96px) 0; }
    49.49% { background-position: calc(var(--k) * -144px) 0; }
    58.59% { background-position: calc(var(--k) * -192px) 0; }
    62.12% { background-position: calc(var(--k) * -240px) 0; }
    90.40% { background-position: calc(var(--k) * -288px) 0; }
    94.44% { background-position: calc(var(--k) * -336px) 0; }
    100% { background-position: 0 0; }
}
.nv-owl[data-owl="redes"] { background-image: url(../img/lechuza/redes.png?v=5); animation-name: nv-owl-redes; animation-duration: 2240ms; }
@keyframes nv-owl-redes {
    0.00% { background-position: calc(var(--k) * 0px) 0; }
    24.55% { background-position: calc(var(--k) * -48px) 0; }
    32.59% { background-position: calc(var(--k) * -96px) 0; }
    43.75% { background-position: calc(var(--k) * -144px) 0; }
    51.79% { background-position: calc(var(--k) * -192px) 0; }
    56.70% { background-position: calc(var(--k) * -240px) 0; }
    63.84% { background-position: calc(var(--k) * -288px) 0; }
    68.75% { background-position: calc(var(--k) * -336px) 0; }
    100% { background-position: 0 0; }
}
.nv-owl[data-owl="video"] { background-image: url(../img/lechuza/video.png?v=5); animation-name: nv-owl-video; animation-duration: 2580ms; }
@keyframes nv-owl-video {
    0.00% { background-position: calc(var(--k) * 0px) 0; }
    21.32% { background-position: calc(var(--k) * -48px) 0; }
    28.29% { background-position: calc(var(--k) * -96px) 0; }
    37.98% { background-position: calc(var(--k) * -144px) 0; }
    44.96% { background-position: calc(var(--k) * -192px) 0; }
    61.24% { background-position: calc(var(--k) * -240px) 0; }
    72.87% { background-position: calc(var(--k) * -288px) 0; }
    80.62% { background-position: calc(var(--k) * -336px) 0; }
    100% { background-position: 0 0; }
}
.nv-owl[data-owl="contenido"] { background-image: url(../img/lechuza/contenido.png?v=5); animation-name: nv-owl-contenido; animation-duration: 2710ms; }
@keyframes nv-owl-contenido {
    0.00% { background-position: calc(var(--k) * 0px) 0; }
    20.30% { background-position: calc(var(--k) * -48px) 0; }
    26.94% { background-position: calc(var(--k) * -96px) 0; }
    36.16% { background-position: calc(var(--k) * -144px) 0; }
    42.80% { background-position: calc(var(--k) * -192px) 0; }
    61.25% { background-position: calc(var(--k) * -240px) 0; }
    70.48% { background-position: calc(var(--k) * -288px) 0; }
    77.86% { background-position: calc(var(--k) * -336px) 0; }
    100% { background-position: 0 0; }
}
.nv-owl[data-owl="codigo"] { background-image: url(../img/lechuza/codigo.png?v=5); animation-name: nv-owl-codigo; animation-duration: 2420ms; }
@keyframes nv-owl-codigo {
    0.00% { background-position: calc(var(--k) * 0px) 0; }
    8.26% { background-position: calc(var(--k) * -48px) 0; }
    16.53% { background-position: calc(var(--k) * -96px) 0; }
    24.79% { background-position: calc(var(--k) * -144px) 0; }
    33.06% { background-position: calc(var(--k) * -192px) 0; }
    38.84% { background-position: calc(var(--k) * -240px) 0; }
    76.03% { background-position: calc(var(--k) * -288px) 0; }
    93.39% { background-position: calc(var(--k) * -336px) 0; }
    100% { background-position: 0 0; }
}
.nv-owl[data-owl="web"] { background-image: url(../img/lechuza/web.png?v=5); animation-name: nv-owl-web; animation-duration: 2540ms; }
@keyframes nv-owl-web {
    0.00% { background-position: calc(var(--k) * 0px) 0; }
    21.65% { background-position: calc(var(--k) * -48px) 0; }
    28.74% { background-position: calc(var(--k) * -96px) 0; }
    38.58% { background-position: calc(var(--k) * -144px) 0; }
    45.67% { background-position: calc(var(--k) * -192px) 0; }
    65.35% { background-position: calc(var(--k) * -240px) 0; }
    80.31% { background-position: calc(var(--k) * -288px) 0; }
    92.13% { background-position: calc(var(--k) * -336px) 0; }
    100% { background-position: 0 0; }
}
.nv-owl[data-owl="panel"] { background-image: url(../img/lechuza/panel.png?v=5); animation-name: nv-owl-panel; animation-duration: 2660ms; }
@keyframes nv-owl-panel {
    0.00% { background-position: calc(var(--k) * 0px) 0; }
    20.68% { background-position: calc(var(--k) * -48px) 0; }
    27.44% { background-position: calc(var(--k) * -96px) 0; }
    36.84% { background-position: calc(var(--k) * -144px) 0; }
    43.61% { background-position: calc(var(--k) * -192px) 0; }
    60.53% { background-position: calc(var(--k) * -240px) 0; }
    71.80% { background-position: calc(var(--k) * -288px) 0; }
    88.72% { background-position: calc(var(--k) * -336px) 0; }
    100% { background-position: 0 0; }
}
.nv-owl[data-owl="despegue"] { background-image: url(../img/lechuza/despegue.png?v=5); animation-name: nv-owl-despegue; animation-duration: 1760ms; }
@keyframes nv-owl-despegue {
    0.00% { background-position: calc(var(--k) * 0px) 0; }
    25.57% { background-position: calc(var(--k) * -48px) 0; }
    34.09% { background-position: calc(var(--k) * -96px) 0; }
    46.59% { background-position: calc(var(--k) * -144px) 0; }
    55.11% { background-position: calc(var(--k) * -192px) 0; }
    61.93% { background-position: calc(var(--k) * -240px) 0; }
    66.48% { background-position: calc(var(--k) * -288px) 0; }
    71.59% { background-position: calc(var(--k) * -336px) 0; }
    100% { background-position: 0 0; }
}
.nv-owl[data-owl="sentada"] { background-image: url(../img/lechuza/sentada.png?v=5); animation-name: nv-owl-sentada; animation-duration: 2390ms; }
@keyframes nv-owl-sentada {
    0.00% { background-position: calc(var(--k) * 0px) 0; }
    41.84% { background-position: calc(var(--k) * -48px) 0; }
    45.61% { background-position: calc(var(--k) * -96px) 0; }
    55.65% { background-position: calc(var(--k) * -144px) 0; }
    65.69% { background-position: calc(var(--k) * -192px) 0; }
    68.62% { background-position: calc(var(--k) * -240px) 0; }
    92.05% { background-position: calc(var(--k) * -288px) 0; }
    95.40% { background-position: calc(var(--k) * -336px) 0; }
    100% { background-position: 0 0; }
}

/* Blanco y negro: la lechuza también. */
html[data-tema="byn"] .nv-owl { filter: grayscale(1); }

@media (prefers-reduced-motion: reduce) {
    .nv-owl { animation: none; }
}
html[data-movimiento="no"] .nv-owl { animation: none; background-position: 0 0; }

/* ── Escenario: el recuadro de la lechuza en las tarjetas de Servicios.
      En el celular no se muestra (movil.css). ── */
.nv-owl-stage {
    display: grid;
    place-items: center;
    padding: 6px 0;
    margin-bottom: 16px;
    border: 1px solid var(--nv-line, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    background:
        radial-gradient(120% 90% at 50% 100%, rgba(84, 218, 245, 0.09), transparent 60%),
        #141517;
}

/* ── Escritorio: portada ── */
.nv-home-brand { position: relative; }
/* Posada encima de la última letra del logo. El cuadro lleva 8 filas vacías
   bajo las patas; el margen negativo las descuenta. */
.nv-owl-home {
    --k: 2;
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: calc(var(--k) * -8px);
}

/* ── Cabecera de sección con lechuza a la derecha ── */
.nv-view-head.nv-con-owl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 28px;
    align-items: end;
}
.nv-view-head.nv-con-owl > :not(.nv-owl) { grid-column: 1; }
.nv-view-head.nv-con-owl > .nv-owl { grid-column: 2; grid-row: 1 / span 3; align-self: end; }

/* ── Paneles sin tarjeta de resumen (Extras, Cursos) ── */
.nv-pane-cabeza {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}
.nv-pane-cabeza .nv-owl { --k: 2; }
.nv-pane-cabeza .nv-owl-stage {
    min-height: 0;
    padding: 0;
    margin: -8px 0 6px;
    border: 0;
    background: none;
}

@media (max-width: 1180px) {
    .nv-owl-home { display: none; }
}

/* Desfile: cada lechuza arranca en otro punto de su ciclo, así no parpadean
   ni sonríen todas a la vez. (La segunda tanda repite los mismos desfases.) */
.m-desfile-item:nth-child(9n+1) .nv-owl { animation-delay: -0.3s; }
.m-desfile-item:nth-child(9n+2) .nv-owl { animation-delay: -1.9s; }
.m-desfile-item:nth-child(9n+3) .nv-owl { animation-delay: -0.8s; }
.m-desfile-item:nth-child(9n+4) .nv-owl { animation-delay: -2.6s; }
.m-desfile-item:nth-child(9n+5) .nv-owl { animation-delay: -1.2s; }
.m-desfile-item:nth-child(9n+6) .nv-owl { animation-delay: -3.1s; }
.m-desfile-item:nth-child(9n+7) .nv-owl { animation-delay: -0.5s; }
.m-desfile-item:nth-child(9n+8) .nv-owl { animation-delay: -2.2s; }
.m-desfile-item:nth-child(9n+9) .nv-owl { animation-delay: -1.5s; }