/* Capa "visual con efectos y 3D". Va encima de base.css + estilo.css y usa sus mismos colores.
   html.visual               la web es visual (lo pone la plantilla)
   html.vx                   hay movimiento (lo quita "reducir movimiento" del sistema)
   html[data-intensidad]     fiesta | media | suave */

/* ------------------------------------------------------------------ portada */

.visual .portada { min-height: 100svh; }
.visual .portada__texto { position: relative; z-index: 1; will-change: transform, opacity; }
.visual .portada__foto { transform: scale(1.08); will-change: transform; }

/* Aurora de color que se mueve despacio por detrás del título */
.visual .portada::before {
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side at 30% 40%, color-mix(in srgb, var(--principal) 55%, transparent), transparent),
    radial-gradient(closest-side at 70% 60%, color-mix(in srgb, var(--principal-contorno) 40%, transparent), transparent);
  filter: blur(60px); opacity: .45; mix-blend-mode: screen;
  animation: vx-aurora 22s ease-in-out infinite alternate;
}
.visual[data-intensidad="suave"] .portada::before { opacity: .25; }
@keyframes vx-aurora {
  0% { transform: translate(-6%, -4%) rotate(0deg) scale(1); }
  50% { transform: translate(5%, 3%) rotate(20deg) scale(1.15); }
  100% { transform: translate(-2%, 6%) rotate(-12deg) scale(1.05); }
}

/* El objeto 3D: arriba en el móvil, a la derecha en el ordenador */
.escena { position: absolute; z-index: 0; left: 0; right: 0; top: 64px; height: 50svh; }
.escena canvas {
  display: block; width: 100%; height: 100%; cursor: grab; opacity: 0; transition: opacity 1.2s ease;
  /* Bordes difuminados: que no se note dónde acaba el lienzo */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}
.escena--lista canvas { opacity: 1; }
.escena--arrastrando canvas { cursor: grabbing; }
.visual .portada { align-items: flex-end; }
@media (min-width: 880px) {
  .escena { top: 64px; bottom: 0; left: 44%; height: auto; }
  .visual .portada { align-items: center; }
  .visual .portada__texto { padding-right: 46%; }
  .visual .portada h1 { max-width: 12ch; }
}

.escena__pista {
  position: absolute; left: 50%; bottom: 4%; translate: -50% 0;
  padding: 6px 14px; border-radius: 999px; font-size: .8rem; letter-spacing: .06em; color: #fff;
  background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px); pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
.escena--lista .escena__pista { opacity: .85; animation: vx-pista 3s ease-in-out 1.5s infinite; }
.escena--tocada .escena__pista { opacity: 0; animation: none; }
@keyframes vx-pista { 50% { translate: calc(-50% + 8px) 0; } }
@media (max-width: 879px) { .escena__pista { bottom: auto; top: 2%; } }

/* Sin objeto en la portada: el título ocupa todo el ancho */
.visual .portada:not(:has(.escena)) .portada__texto { padding-right: 20px; }
/* ...y todo va centrado, en vertical y en horizontal (menos en el editorial, que tiene la foto en su columna) */
.visual:not([data-diseno="editorial"]) .portada:not(:has(.escena)) { align-items: center; justify-content: center; text-align: center; padding-block: 96px; }
.visual:not([data-diseno="editorial"]) .portada:not(:has(.escena)) .portada__texto { display: flex; flex-direction: column; align-items: center; }
.visual:not([data-diseno="editorial"]) .portada:not(:has(.escena)) h1 { max-width: 16ch; margin-inline: auto; }
.visual:not([data-diseno="editorial"]) .portada:not(:has(.escena)) .portada__eslogan { margin-inline: auto; }
.visual:not([data-diseno="editorial"]) .portada:not(:has(.escena)) .botones { justify-content: center; }

/* Fondo animado (partículas, burbujas, humo...): detrás del título y del objeto */
.fondo-animado { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.visual:not([data-fondo="auto"]):not([data-fondo="aurora"]) .portada::before { display: none; }

/* Sin 3D (móvil modesto, sin WebGL o "reducir movimiento"): un halo de luz en su lugar */
.escena--estatica::before {
  content: ""; position: absolute; inset: 18% 22%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--principal) 70%, transparent), transparent 68%);
  filter: blur(8px); animation: vx-latido 4s ease-in-out infinite;
}
.escena--estatica .escena__pista { display: none; }
@keyframes vx-latido { 50% { transform: scale(1.12); opacity: .75; } }

/* Flecha que invita a bajar */
.vx-bajar {
  position: absolute; left: 50%; bottom: 22px; z-index: 1; translate: -50% 0;
  width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, .6); border-radius: 14px;
}
.vx-bajar::after {
  content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px; background: #fff; animation: vx-bajar 1.8s ease-in-out infinite;
}
@keyframes vx-bajar { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 879px) { .vx-bajar { display: none; } }

/* ------------------------------------------------------------ título letra a letra */

.vx-palabra { display: inline-block; white-space: nowrap; }
.vx-letra { display: inline-block; }
.vx .vx-letra {
  opacity: 0; transform: translateY(.55em) rotateX(-70deg); transform-origin: 50% 100%;
  animation: vx-letra .9s cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: calc(var(--i) * 38ms + .2s);
}
@keyframes vx-letra { to { opacity: 1; transform: none; } }
.vx .portada__eslogan, .vx .portada__etiqueta, .vx .portada .botones { animation: vx-subir .9s cubic-bezier(.2, .8, .2, 1) both; }
.vx .portada__etiqueta { animation-delay: .1s; }
.vx .portada__eslogan { animation-delay: .7s; }
.vx .portada .botones { animation-delay: .9s; }
@keyframes vx-subir { from { opacity: 0; transform: translateY(24px); } }

/* Neón (fiesta): el título brilla y alguna letra parpadea como un letrero viejo */
.visual[data-intensidad="fiesta"] .portada h1 {
  text-shadow: 0 0 6px color-mix(in srgb, var(--principal) 90%, #fff), 0 0 22px var(--principal), 0 0 60px color-mix(in srgb, var(--principal) 60%, transparent);
}
.vx .vx-parpadeo { animation: vx-letra .9s cubic-bezier(.2, .8, .2, 1) forwards, vx-parpadeo 6s linear 2.2s infinite; animation-delay: calc(var(--i) * 38ms + .2s), 2.4s; }
@keyframes vx-parpadeo {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .25; text-shadow: none; }
}
.visual[data-intensidad="fiesta"] .cabeza h2 { text-shadow: 0 0 18px color-mix(in srgb, var(--principal) 45%, transparent); }
.visual[data-intensidad="fiesta"] .antetitulo { animation: vx-respirar 3.5s ease-in-out infinite; }
@keyframes vx-respirar { 50% { opacity: .65; } }

/* ------------------------------------------------------------ apariciones */

.vx [data-aparece] {
  transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--orden, 0) * 70ms);
}
.vx [data-aparece="subir"]:not(.vx-visto) { opacity: 0; transform: translateY(34px); }
.vx [data-aparece="lado"]:not(.vx-visto) { opacity: 0; transform: translateX(-28px); }
.vx [data-aparece="zoom"]:not(.vx-visto) { opacity: 0; transform: scale(.92); }
.vx .vx-visto { transition-delay: calc(var(--orden, 0) * 70ms); }

/* Línea de luz bajo los títulos de sección */
.visual .cabeza h2::after {
  content: ""; display: block; width: 72px; height: 2px; margin-top: 16px;
  background: linear-gradient(90deg, transparent, var(--principal), transparent);
  transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) .35s;
}
.visual .cabeza--centro h2::after { margin-inline: auto; }
.visual .cabeza.vx-visto h2::after, .visual:not(.vx) .cabeza h2::after { transform: scaleX(1); }

/* ------------------------------------------------------ inclinación 3D */

.vx-inclinable { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; will-change: transform; }
.vx-inclinable:hover { box-shadow: 0 24px 50px rgba(0, 0, 0, .28); }
.tarjeta.vx-inclinable { background-image: radial-gradient(circle at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, .1), transparent 50%); }
.vx .nosotros__foto, .vx .persona__foto, .vx .articulo__foto { will-change: transform; }

/* ------------------------------------------------------------ botones */

.visual .boton { transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease, translate .25s cubic-bezier(.2, .8, .2, 1); }
.visual .boton--principal { position: relative; overflow: hidden; isolation: isolate; }
.vx .boton--principal::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); animation: vx-destello 4.5s ease-in-out 2s infinite;
}
@keyframes vx-destello { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.visual[data-intensidad="fiesta"] .boton--principal { box-shadow: 0 0 0 1px color-mix(in srgb, var(--principal) 60%, transparent), 0 0 28px color-mix(in srgb, var(--principal) 55%, transparent); }

/* ------------------------------------------------------ franja que desfila */

.vx-desfile-caja { display: flex; overflow: hidden; max-width: none; padding-inline: 0; justify-content: flex-start; gap: 0; }
.vx-desfile { display: flex; flex: none; animation: vx-desfile 30s linear infinite; }
.vx-desfile > span { display: inline-flex; align-items: center; gap: 10px; padding-inline: 2.2rem; white-space: nowrap; }
@keyframes vx-desfile { to { transform: translateX(-100%); } }

/* ------------------------------------------------------ ambiente */

.vx-progreso {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--principal), var(--principal-contorno));
  box-shadow: 0 0 12px var(--principal);
  transform: scaleX(0); transform-origin: 0 50%;
}
.vx-brillos { position: fixed; inset: 0; z-index: 45; width: 100%; height: 100%; pointer-events: none; }
.vx-foco {
  position: fixed; inset: 0; z-index: 44; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(520px circle at var(--fx, -999px) var(--fy, -999px), color-mix(in srgb, var(--principal) 13%, transparent), transparent 65%);
}
.visual[data-intensidad="fiesta"] .seccion--alt { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--principal) 35%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--principal) 35%, transparent); }
.visual .carrusel__item img { transition: transform .6s ease, filter .4s ease; }
.visual .carrusel__pista:hover .carrusel__item:not(:hover) img { filter: saturate(.6) brightness(.8); }

/* Móviles modestos: sin brillos ni foco */
.vx-ligero .vx-brillos, .vx-ligero .vx-foco { display: none; }