/* ==========================================================================
   logo-vivo.css · EL OJO VIVO (29/09/2026, Claude Code en la nube · inc/logo-vivo.php, interruptor VL_LOGO_VIVO)
   Encargo de Sergio: «que se ilumine el ojo con el rosa que toque en modo día o noche; una luz que lo recorre y, al acabar,
   se queda iluminado con borde de neón. En la cabecera y en el pie. Sin cambiar el icono».

   Cómo, sin tocar el dibujo (misma técnica que socialvideohub: CSS en el público, React solo en los paneles):
   · La imagen del logo sigue igual. Encima van dos capas del propio enlace (::before y ::after):
     1. ::before = la LUZ. Un degradado cónico que gira alrededor del ojo, recortado con la forma EXACTA del ojo (máscara =
        la misma imagen del logo, solo su parte izquierda: el ojo ocupa 118 de los 507 px de ancho, medido). La luz avanza
        como una aguja de reloj (--vl-ojo-p de 0 % a 110 %), con una cabeza más brillante, y deja el ojo encendido.
     2. ::after = el HALO de neón. Rosa recortado con ojo-halo.png (la silueta del ojo difuminada, generada del original por
        herramientas/marca-generar.cjs, con 24 px de margen). Se enciende a la vez que la luz y se queda.
   · Día (fondo blanco): rosa de la casa, #a91b6f → #d946ef (el neón #d946ef solo en adornos, como manda CLAUDE.md).
     Noche (html[data-tema="oscuro"]) y el pie (siempre azul noche): rosa vivo, #f5a3fb → #d946ef, con más halo.
   · «Reducir movimiento»: sin animación, ya encendido. Sin @property (navegadores viejos): encendido directamente.
   · Sin !important y sin @layer. Transiciones de 120 ms (CLAUDE.md, receta del neón).
   29/09/2026 (tarde, papel 53): la luz y el halo (apartados 1 y 2) SOLO se aplican con la clase vl-ojo-luz, es decir, con
   VL_OJO_DIBUJO en false (marcha atrás). Lo que se ve ahora es el ojo que se dibuja: apartado 7, al final de este fichero.
   ========================================================================== */

@property --vl-ojo-p {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 110%;
}

/* Colores: día por defecto; noche y pie, más vivos. */
html body.vl-ojo-vivo {
  --vl-ojo-1: #a91b6f;
  --vl-ojo-2: #d946ef;
  --vl-ojo-cabeza: #f0abfc;
  --vl-ojo-halo: rgba(217, 70, 239, 0.75);   /* sobre blanco el halo se ve menos: más fuerte que en la noche */
  --vl-ojo-halo-max: 0.95;
}
html[data-tema="oscuro"] body.vl-ojo-vivo,
html body.vl-ojo-vivo .vl-footer {
  --vl-ojo-1: #f5a3fb;
  --vl-ojo-2: #d946ef;
  --vl-ojo-cabeza: #ffffff;
  --vl-ojo-halo: rgba(232, 121, 249, 0.8);
  --vl-ojo-halo-max: 1;
}

/* Las capas se colocan sobre el enlace. OJO (medido el 29/09): no se cambia su «display». Woodmart lo pone en inline-flex
   (la imagen va centrada en una caja de 48 px) y esconde con display:none el logo de la cabecera fija; tocarlo subía el
   logo 8 px y en el móvil sacaba dos logos. Así que las capas van centradas en vertical y su alto sale de su proporción. */
html body.vl-ojo-vivo :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo) {
  position: relative;
  isolation: isolate;
}
html body.vl-ojo-vivo :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo) img {
  position: relative;
  z-index: 1;
}

/* 1 · La luz (encima de la imagen). */
html body.vl-ojo-vivo.vl-ojo-luz :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo)::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  top: 50%;
  width: 23.28%;             /* 118 / 507 */
  aspect-ratio: 118 / 73;    /* el alto del ojo = el alto de la imagen */
  transform: translateY(-50%);
  pointer-events: none;
  background: conic-gradient(from -100deg at 52% 50%,
    var(--vl-ojo-1) 0%,
    var(--vl-ojo-2) calc(var(--vl-ojo-p) * 0.5),
    var(--vl-ojo-1) calc(var(--vl-ojo-p) - 9%),
    var(--vl-ojo-cabeza) calc(var(--vl-ojo-p) - 2%),
    transparent var(--vl-ojo-p));
  /* Al acabar (--vl-ojo-p = 110 %) el color vuelve al del principio justo donde empezó: sin costura (medido el 29/09: había
     una raya clara en el punto de salida). La cabeza brillante queda fuera, más allá del 100 %. */
  -webkit-mask: var(--vl-ojo-forma) 0 0 / 429.66% 100% no-repeat;   /* 507 / 118 */
  mask: var(--vl-ojo-forma) 0 0 / 429.66% 100% no-repeat;
  animation: vl-ojo-recorre 1.6s cubic-bezier(0.55, 0.1, 0.35, 1) 0.35s both;
}

/* 2 · El halo de neón (debajo de la imagen, para que no ensucie las letras). */
html body.vl-ojo-vivo.vl-ojo-luz :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo)::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -4.734%;             /* 24 / 507 */
  top: 50%;
  width: 109.467%;           /* 555 / 507 */
  aspect-ratio: 555 / 121;   /* ojo-halo.png: el logo con 24 px de margen alrededor */
  transform: translateY(-50%);
  pointer-events: none;
  /* Dos capas (29/09, 2.ª petición de Sergio: «un borde de 1 px de neón blanco»):
     · arriba, el FILO BLANCO del ojo (ojo-borde.svg: el mismo trazado que el ojo, solo 1 px por fuera, en vector);
     · abajo, el halo rosa. El filo va encima del halo: de día se ve blanco sobre rosa, de noche blanco sobre la noche.
     Colocación del filo dentro de esta capa (medido en el calco): el SVG cubre el logo de x −4 a 122 y de y −4 a 77, y esta
     capa va de x −24 a 531 y de y −24 a 97 → tamaño 126/555 = 22,703 % × 81/121 = 66,942 %, y posición
     20/(555−126) = 4,663 % en horizontal y 50 % en vertical. */
  background: var(--vl-ojo-borde) 4.663% 50% / 22.703% 66.942% no-repeat, var(--vl-ojo-halo);
  -webkit-mask: var(--vl-ojo-halo-img) 0 0 / 100% 100% no-repeat, var(--vl-ojo-borde) 4.663% 50% / 22.703% 66.942% no-repeat;
  mask: var(--vl-ojo-halo-img) 0 0 / 100% 100% no-repeat, var(--vl-ojo-borde) 4.663% 50% / 22.703% 66.942% no-repeat;
  opacity: var(--vl-ojo-halo-max);
  animation: vl-ojo-halo 1.9s ease-out 0.35s both;
  transition: opacity 120ms ease;
}
html body.vl-ojo-vivo.vl-ojo-luz :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo):is(:hover, :focus-visible)::after {
  opacity: 1;
  filter: saturate(1.25);
}

/* Qué forma recorta cada logo (su propia imagen, copiada en el tema hijo: no depende de «Medios»). */
html body.vl-ojo-vivo .whb-header .wd-logo {
  --vl-ojo-forma: url("../img/marca/logo-negro-original.png");
  --vl-ojo-halo-img: url("../img/marca/ojo-halo.png");
  --vl-ojo-borde: url("../img/marca/ojo-borde.svg");
}
/* La cabecera fija de Woodmart (al bajar) usa el logo BLANCO, que no es píxel a píxel igual que el negro (medido el 29/09:
   el ojo coincide en un 82,94 %, está algo más fino y desplazado): su luz se recorta con su propia imagen. */
html body.vl-ojo-vivo .whb-header .wd-logo:has(img[src*="letras-blancas"]),
html body.vl-ojo-vivo .vl-footer .vl-footer__logo {
  --vl-ojo-forma: url("../img/marca/logo-blanco-original.png");
  --vl-ojo-halo-img: url("../img/marca/ojo-halo.png");
  --vl-ojo-borde: url("../img/marca/ojo-borde.svg");
}

@keyframes vl-ojo-recorre {
  from { --vl-ojo-p: 0%; }
  to   { --vl-ojo-p: 110%; }
}
@keyframes vl-ojo-halo {
  0%   { opacity: 0; }
  55%  { opacity: 0.35; }
  85%  { opacity: 1; }
  100% { opacity: var(--vl-ojo-halo-max); }
}

/* La cabecera fija de Woodmart (al bajar) aparece más tarde: su luz arranca al aparecer, sin la espera del principio. */
html body.vl-ojo-vivo.vl-ojo-luz .whb-sticked .wd-logo::before,
html body.vl-ojo-vivo.vl-ojo-luz .whb-clone .wd-logo::before { animation-delay: 0s; }
html body.vl-ojo-vivo.vl-ojo-luz .whb-sticked .wd-logo::after,
html body.vl-ojo-vivo.vl-ojo-luz .whb-clone .wd-logo::after { animation-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  html body.vl-ojo-vivo.vl-ojo-luz :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo)::before,
  html body.vl-ojo-vivo.vl-ojo-luz :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo)::after {
    animation: none;
  }
}

/* ==========================================================================
   6 · LOGO GRANDE Y CABECERA FIJA EN TODOS LOS APARATOS (29/09/2026, Claude Code del iMac, orden de Sergio: «aumenta el tamaño
   de todo el logo… que se vea perfecto… y que sea pegajoso en cualquier dispositivo, sí o sí»).
   Medido en la web real antes de tocar:
   · El logo se veía pequeño porque NO llenaba su caja: Woodmart le da 153×32 (ordenador) y 138×30 (móvil), pero la imagen es
     muy alargada (507×73) y con object-fit se pintaba a 22 y 20 px de alto. Además la caja <picture> tiene tope de ancho
     (138 / 210 px). Ahora la imagen y su caja miden lo que dice --vl-logo-h y el ancho sale de la proporción 507/73.
   · La cabecera SÍ se pega al bajar (Woodmart: whb-sticked), pero su opción «hide on scroll» la escondía 500 px después
     (whb-scroll-down → translateY(-100%)): en el móvil parecía que no había cabecera fija. Se anula solo ese esconder.
   Tamaños (alto del logo): móvil 38 px (34 a ≤360) · tableta 44 · ordenador 24–40 según el sitio que deja el menú, medido en
   1201 · 1280 · 1366 · 1440 · 1600 · 1800 · 1920 sin montarse (≥20 px de aire con el menú). Fija: una sola fila de 56 px en el
   móvil (menú a la izquierda, logo en el centro) y la fila de 64 px de siempre en el ordenador.
   Sin !important. Las capas de luz del ojo (arriba) se miden en % del enlace: crecen con el logo sin tocarlas.
   ========================================================================== */
html body.vl-ojo-vivo .whb-header .whb-main-header .whb-column .site-logo .wd-logo :is(picture, img) {
  display: block;            /* medido con la cabecera fija del móvil: sin esto la caja se comportaba como una línea de texto (20 px) y la luz bajaba */
  width: calc(var(--vl-logo-h, 32px) * 507 / 73);   /* ancho exacto: la caja <picture> del móvil tiene 138 px fijos y la luz del ojo se mide sobre ella */
  max-width: none;
  height: var(--vl-logo-h, 32px);
  max-height: none;
}
/* El enlace del logo mide lo mismo que el dibujo: las capas de luz se colocan sobre el enlace (Woodmart le daba 48 px de alto y,
   con la cabecera fija del móvil, el dibujo quedaba arriba y la luz 9 px más abajo; medido). Toque: 24 px o más (WCAG 2.2). */
html body.vl-ojo-vivo .whb-header .whb-main-header .whb-column .site-logo .wd-logo {
  height: var(--vl-logo-h, 32px);
  min-height: 0;
  max-height: none;
  align-items: center;
}
html body.vl-ojo-vivo .whb-header .whb-main-header .whb-column .site-logo .wd-logo img {
  padding: 0;                /* Woodmart le pone 5 px arriba y abajo: con el alto fijo el dibujo se encogía por dentro y la luz del ojo quedaba desplazada (medido) */
  aspect-ratio: 507 / 73;
  object-fit: contain;
  transition: height 200ms ease;
}
/* No se esconde al bajar (whb-scroll-down de Woodmart). */
html body.vl-ojo-vivo .whb-header.whb-scroll-stick.whb-scroll-down .whb-main-header { transform: none; }
/* Los enlaces a un apartado de la misma página (#…) no quedan tapados por la cabecera fija. */
html:has(body.vl-ojo-vivo) { scroll-padding-top: 80px; }

/* ---- Móvil y tableta (la cabecera de móvil llega hasta 1200 px: inc/cabecera-1200.php) ---- */
/* Pegajosa con el «sticky» del navegador, NO con la fija de Woodmart: esa se anuló a propósito el 25/09 en todo el tramo de la
   cabecera de móvil (cabecera-1200.css §5: dejaba 55 px en blanco y la barra de iconos tapaba el botón MENÚ) y se respeta.
   El sticky no deja hueco: la cabecera sigue en su sitio y solo se queda arriba al bajar. La clase whb-sticked de Woodmart (que
   pone su JavaScript al bajar) se usa solo para encogerla a una fila.
   Alturas con dos variables en la cabecera: --vl-logo-h (alto del logo) y --vl-fila (alto de la fila del logo). La fila, su caja
   interior y su columna miden lo mismo: reparo-a.css las fijaba las tres a 44 px. */
@media (max-width: 1200px) {
  html body.vl-ojo-vivo .whb-header { position: sticky; top: var(--wd-admin-bar-h, 0px); z-index: 390; }
  html body.vl-ojo-vivo .whb-header .whb-main-header { --vl-logo-h: 38px; --vl-fila: 64px; background-color: var(--vl-bg); transition: box-shadow 200ms ease; }
  html body.vl-ojo-vivo .whb-header .whb-main-header .whb-top-bar,
  html body.vl-ojo-vivo .whb-header .whb-main-header .whb-top-bar :is(.whb-flex-row, .whb-column) {
    height: var(--vl-fila);
    min-height: var(--vl-fila);
    max-height: var(--vl-fila);
    transition: height 200ms ease, min-height 200ms ease, max-height 200ms ease;
  }
  /* Fija (al bajar): una sola fila, con sombra suave y el filo rosa de la casa. */
  html body.vl-ojo-vivo .whb-header.whb-sticked .whb-main-header {
    --vl-logo-h: 30px;
    --vl-fila: 56px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.10), 0 1px 0 rgba(217, 70, 239, 0.18);
  }
  html body.vl-ojo-vivo .whb-header.whb-sticked .whb-general-header {
    position: absolute;
    inset: 0 0 auto 0;
    background: transparent;
    border: 0;
    pointer-events: none;           /* la fila entera queda encima del logo: solo el botón del menú recibe el toque */
  }
  /* .whb-main-header de más: cabecera-1200.css (1025–1200 px) fija la pegada a 100 px con un selector de 5 clases. */
  html body.vl-ojo-vivo .whb-header.whb-sticked .whb-main-header,
  html body.vl-ojo-vivo .whb-header.whb-sticked .whb-main-header .whb-general-header,
  html body.vl-ojo-vivo .whb-header.whb-sticked .whb-main-header .whb-general-header :is(.whb-flex-row, .whb-column) {
    height: var(--vl-fila);
    min-height: var(--vl-fila);
    max-height: var(--vl-fila);
  }
  html body.vl-ojo-vivo .whb-header.whb-sticked .whb-general-header .wd-header-mobile-nav { pointer-events: auto; }
  /* La palabra «Menú» se esconde a la vista (el lector de pantalla la sigue leyendo): el logo necesita el sitio. */
  html body.vl-ojo-vivo .whb-header.whb-sticked .whb-general-header .wd-header-mobile-nav .wd-tools-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  html body.vl-ojo-vivo .whb-header .whb-main-header { --vl-logo-h: 44px; --vl-fila: 72px; }
  html body.vl-ojo-vivo .whb-header.whb-sticked .whb-main-header { --vl-logo-h: 34px; --vl-fila: 60px; }
}
@media (max-width: 360px) {
  html body.vl-ojo-vivo .whb-header .whb-main-header { --vl-logo-h: 34px; }
  html body.vl-ojo-vivo .whb-header.whb-sticked .whb-main-header { --vl-logo-h: 27px; }
}

/* ---- Ordenador ---- */
@media (min-width: 1201px) { html body.vl-ojo-vivo .whb-header .whb-general-header { --vl-logo-h: 30px; } }
@media (min-width: 1201px) and (max-width: 1279px) { html body.vl-ojo-vivo .whb-header .whb-general-header { --vl-logo-h: 24px; } }
@media (min-width: 1280px) and (max-width: 1365px) { html body.vl-ojo-vivo .whb-header .whb-general-header { --vl-logo-h: 27px; } }
/* Sitio para el logo: «Inicio» se recoge también de 1440 a 1599 (hasta 1439 ya lo hacía diseno-final.css; el logo lleva a la portada). */
@media (min-width: 1440px) and (max-width: 1599px) { html body.vl-df .whb-header .wd-nav.wd-nav-main > li.menu-item-home { display: none; } }
@media (min-width: 1600px) and (max-width: 1799px) { html body.vl-ojo-vivo .whb-header .whb-general-header { --vl-logo-h: 34px; } }
@media (min-width: 1900px) { html body.vl-ojo-vivo .whb-header .whb-general-header { --vl-logo-h: 40px; } }


/* ==========================================================================
   7 · EL OJO QUE SE DIBUJA (29/09/2026, papel 53 · inc/logo-vivo.php apartado 6, interruptor VL_OJO_DIBUJO)
   Sergio: «que no tenga nada alrededor ni borde; que se vaya formando el ojo como un GIF y que se quede fijo».
   · Al lado de la imagen del logo hay un dibujo SVG del ojo (.vl-ojo), justo encima de su ojo. Sus 4 trazos son la línea
     central del ojo, con un grosor de sobra (110), recortados con la forma exacta del ojo: al avanzar el trazo
     (stroke-dashoffset de 1 a 0) aparece el ojo tal cual, como si lo pintara un bolígrafo.
   · Colocación (medida en el calco): el lienzo de ojo.svg cubre el logo de x −4 a 122 y de y −4 a 77 (de 507 × 73) →
     left −4/507 = −0,789 %, ancho 126/507 = 24,852 %, centrado en vertical (el centro del lienzo es el de la imagen).
   · Mientras se dibuja, el ojo de la imagen se esconde con una máscara que tapa su cuarto izquierdo (el ojo va de x 1 a 116 y
     las letras empiezan en 138: corte en 127/507 = 25,05 %). En color «logo», al acabar vuelve el ojo de la imagen por debajo
     y después se aparta el dibujo: lo que se queda es la imagen de siempre, idéntica, sin parpadeo.
   · Tiempos (1,7 s en total; papel 53: 1,2–1,8 s): contorno 0,15–0,70 s · curva del corazón 0,70–0,89 s (misma velocidad,
     sin levantar el bolígrafo) · círculo 0,95–1,25 s · diagonal 1,28–1,43 s · el ojo de la imagen vuelve 1,42–1,60 s.
   · Sin JavaScript, con «reducir movimiento», en la segunda página de la visita o si algo falla: el logo quieto de siempre
     (el dibujo con opacidad 0 y sin máscara). Sin !important y sin @layer.
   ========================================================================== */
@property --vl-ojo-img {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

/* Fuera de la cabecera y del pie el dibujo no se enseña nunca (por si la imagen del logo saliera en un texto). */
.vl-ojo { display: none; }

/* La tinta: el color del ojo de la imagen en cada fondo (negro de día; blanco de noche, en el pie y en el logo blanco). */
html body.vl-ojo-dibujo { --vl-ojo-tinta: #000; }
html[data-tema="oscuro"] body.vl-ojo-dibujo .whb-header,
html body.vl-ojo-dibujo .whb-header .wd-logo:has(img[src*="letras-blancas"]),
html body.vl-ojo-dibujo .vl-footer { --vl-ojo-tinta: #fff; }
/* Opción «rosa» (VL_OJO_COLOR): el rosa que se lee de la casa, que también cumple contraste sobre su fondo. */
html body.vl-ojo-dibujo.vl-ojo-rosa { --vl-ojo-tinta: #a91b6f; }
html[data-tema="oscuro"] body.vl-ojo-dibujo.vl-ojo-rosa .whb-header,
html body.vl-ojo-dibujo.vl-ojo-rosa .whb-header .wd-logo:has(img[src*="letras-blancas"]),
html body.vl-ojo-dibujo.vl-ojo-rosa .vl-footer { --vl-ojo-tinta: #f5a3fb; }

html body.vl-ojo-dibujo :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo) .vl-ojo {
  display: block;
  position: absolute;
  z-index: 2;
  left: calc(-0.789% + 0.4px);   /* +0,4 px: medido a 375, 850, 1200 y 1440 (el navegador pinta la imagen reducida medio píxel más a la derecha) */
  top: 50%;
  width: 24.852%;
  height: auto;
  aspect-ratio: 1008 / 648;
  transform: translateY(-50%);
  overflow: visible;
  pointer-events: none;
  color: var(--vl-ojo-tinta);
  opacity: 0;
}
/* El pie no es de Woodmart: su enlace mide 44 px de alto (zona de toque) y la imagen 40, pegada arriba; el dibujo se centra en
   el enlace y quedaba 2 px más abajo que el ojo (medido el 29/09). La imagen se centra en su enlace: los dos centros coinciden. */
html body.vl-ojo-dibujo .vl-footer .vl-footer__logo {
  display: inline-flex;
  align-items: center;
  position: relative;
  line-height: 0;
}

/* La máscara que esconde el ojo de la imagen (y deja las letras). --vl-ojo-img: 0 = escondido · 1 = a la vista.
   Solo si el enlace lleva el dibujo (:has(.vl-ojo)): si un día el logo fuera otra imagen (sin dibujo), no se le borra el ojo
   (revisión de código del 29/09). */
html.vl-ojo-anima body.vl-ojo-dibujo :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo):has(.vl-ojo):not(.vl-ojo--hecho) img,
html body.vl-ojo-dibujo.vl-ojo-rosa :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo):has(.vl-ojo) img {
  --vl-ojo-img: 0;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / var(--vl-ojo-img)) 25.05%, #000 25.05%);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / var(--vl-ojo-img)) 25.05%, #000 25.05%);
}
html.vl-ojo-anima body.vl-ojo-dibujo :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo):not(.vl-ojo--hecho) .vl-ojo,
html body.vl-ojo-dibujo.vl-ojo-rosa :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo) .vl-ojo {
  opacity: 1;
}
/* Antes de verse: los trazos sin pintar. */
html.vl-ojo-anima body.vl-ojo-dibujo :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo):not(.vl-ojo--hecho) .vl-ojo__t {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
}
/* Al verse: se dibuja. */
html.vl-ojo-anima body.vl-ojo-dibujo :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo).vl-ojo--dibuja .vl-ojo__t1 { animation: vl-ojo-traza 0.55s linear 0.15s both; }
html.vl-ojo-anima body.vl-ojo-dibujo :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo).vl-ojo--dibuja .vl-ojo__t2 { animation: vl-ojo-traza 0.19s linear 0.7s both; }
html.vl-ojo-anima body.vl-ojo-dibujo :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo).vl-ojo--dibuja .vl-ojo__t3 { animation: vl-ojo-traza 0.3s cubic-bezier(0.45, 0, 0.25, 1) 0.95s both; }
html.vl-ojo-anima body.vl-ojo-dibujo :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo).vl-ojo--dibuja .vl-ojo__t4 { animation: vl-ojo-traza 0.15s ease-out 1.28s both; }
/* Color «logo»: vuelve el ojo de la imagen por debajo (el dibujo aún lo tapa) y después se aparta el dibujo. */
html.vl-ojo-anima body.vl-ojo-dibujo:not(.vl-ojo-rosa) :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo).vl-ojo--dibuja img { animation: vl-ojo-vuelve 0.18s linear 1.42s both; }
html.vl-ojo-anima body.vl-ojo-dibujo:not(.vl-ojo-rosa) :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo).vl-ojo--dibuja .vl-ojo { animation: vl-ojo-aparta 0.12s linear 1.6s both; }

@keyframes vl-ojo-traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes vl-ojo-vuelve { from { --vl-ojo-img: 0; } to { --vl-ojo-img: 1; } }
@keyframes vl-ojo-aparta { from { opacity: 1; } to { opacity: 0; } }

/* Segunda red: si la persona activa «reducir movimiento» con la página ya abierta (la primera la pone el script de <head>). */
@media (prefers-reduced-motion: reduce) {
  html.vl-ojo-anima body.vl-ojo-dibujo :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo) :is(img, .vl-ojo, .vl-ojo__t) { animation: none; }
  html.vl-ojo-anima body.vl-ojo-dibujo :is(.whb-header .wd-logo, .vl-footer .vl-footer__logo) .vl-ojo__t { stroke-dasharray: none; }
}

/* ==========================================================================
   8 · BARRA DE ADMINISTRADOR EN DOS FILAS (29/09/2026, papel 53 punto 5 · inc/logo-vivo.php apartado 7, VL_BARRA_ADMIN_FILAS)
   Solo con la clase vl-barra-2filas, que pone el JavaScript cuando los botones de la barra fija bajan a una segunda fila.
   --vl-barra-admin = hasta dónde llegan de verdad (64 px con 2 filas, medido). WordPress baja la página 32 px (html, con
   !important en su CSS): el cuerpo baja lo que falta. Woodmart y la cabecera del móvil pegan la cabecera a --wd-admin-bar-h.
   ========================================================================== */
html.vl-barra-2filas body.admin-bar { --wd-admin-bar-h: var(--vl-barra-admin, 32px); padding-top: calc(var(--vl-barra-admin, 32px) - 32px); }
html.vl-barra-2filas body.admin-bar #wpadminbar { height: var(--vl-barra-admin, 32px); }