/* sitio.css — Spiquers (Point Web, nov-2026). Generado por build/plantillas.py: no editar a mano. */
/* el papel blanco gastado de Spiquers de fondo, quieto mientras el contenido pasa por encima */
body{background:#F2F2F0 url(/wp-content/mu-plugins/spq/img/papel.webp) center/cover fixed no-repeat;color:#333333}
@media(max-width:1024px){body{background:#F2F2F0 url(/wp-content/mu-plugins/spq/img/papel.webp) center top/1400px auto repeat}}
::selection{background:#FC6600;color:#fff}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:110px}
.elementor-widget-heading .elementor-heading-title a{color:inherit}
.e-loop-item .elementor-widget-heading:not(:has(.elementor-heading-title)){display:none}
@keyframes spq-gira{to{transform:rotate(360deg)}}
@keyframes spq-late{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(-1deg) scale(1.04)}}
@keyframes spq-cinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spq-sube{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes spq-baja{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@keyframes spq-pulso{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
/* la foto que sigue al cursor en el afiche: su retrato con el rayo naranja y el sello */
.spq-cursor-foto{position:fixed;left:0;top:0;width:220px;aspect-ratio:614/859;pointer-events:none;z-index:999;opacity:0;
  transform:translate(-50%,-45%) scale(.85) rotate(-4deg);transition:opacity .25s,transform .35s cubic-bezier(.2,.7,.2,1);
  filter:drop-shadow(0 30px 40px rgba(10,30,70,.45))}
.spq-cursor-foto.on{opacity:1;transform:translate(-50%,-45%) scale(1) rotate(-4deg)}
.spq-cursor-foto::before{content:'';position:absolute;inset:0;background:#FC6600 url(/wp-content/mu-plugins/spq/img/naranja.webp) 50% 50%/320% auto;
  -webkit-mask:url(/wp-content/mu-plugins/spq/img/rayo-completo.svg) center/100% 100% no-repeat;mask:url(/wp-content/mu-plugins/spq/img/rayo-completo.svg) center/100% 100% no-repeat}
.spq-cursor-foto::after{content:'';position:absolute;left:27.36%;top:59.25%;width:31.92%;aspect-ratio:196/106;
  background:url(/wp-content/mu-plugins/spq/img/sello.png) center/100% 100% no-repeat}
.spq-cursor-foto img{position:absolute;left:0;top:0;display:block;width:100%;aspect-ratio:614/508;object-fit:contain}
@media(hover:none),(max-width:1024px){.spq-cursor-foto{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
/* tarjeta-speaker */
.elementor .e-con{max-width:100%}
.elementor-widget-text-editor p:last-child{margin-bottom:0}
.elementor-element-e997660{position:absolute!important;left:0;top:0;z-index:2;margin:0!important;width:100%!important}
.elementor-element-e997660 img{display:block;width:100%;aspect-ratio:614/508;object-fit:contain;object-position:50% 100%;transform-origin:50% 100%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.elementor-element-e997660::after{content:'';position:absolute;left:27.36%;top:100%;width:31.92%;aspect-ratio:196/106;z-index:3;background:url(/wp-content/mu-plugins/spq/img/sello.png) center/100% 100% no-repeat;filter:drop-shadow(0 6px 10px rgba(10,30,70,.25))}
.elementor-element-ef3d934{position:relative;aspect-ratio:614/859;overflow:visible}
.elementor-element-ef3d934::before{content:'';position:absolute!important;inset:0!important;z-index:1;-webkit-mask:url(/wp-content/mu-plugins/spq/img/rayo-completo.svg) center/100% 100% no-repeat;mask:url(/wp-content/mu-plugins/spq/img/rayo-completo.svg) center/100% 100% no-repeat;background:#17478E url(/wp-content/mu-plugins/spq/img/azul.webp) 30% 40%/260% auto no-repeat;opacity:1}
.elementor-element-ef3d934::after{content:'';position:absolute!important;inset:0!important;z-index:1;-webkit-mask:url(/wp-content/mu-plugins/spq/img/rayo-completo.svg) center/100% 100% no-repeat;mask:url(/wp-content/mu-plugins/spq/img/rayo-completo.svg) center/100% 100% no-repeat;background:#FC6600 url(/wp-content/mu-plugins/spq/img/naranja.webp) 50% 50%/320% auto no-repeat;opacity:0;transition:opacity .45s}
.elementor-element-755337d .elementor-heading-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.elementor-element-47e7c65{margin-top:10px!important}
.elementor-element-29c475c{position:relative;height:100%;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.elementor-element-29c475c:hover{transform:translateY(-6px) rotate(-1.2deg)}
.elementor-element-29c475c:hover .elementor-element-ef3d934::after{opacity:1}
.elementor-element-29c475c:hover .elementor-element-e997660 img{transform:translateY(-10px) scale(1.07)}
.elementor-element-29c475c:hover .elementor-element-47e7c65 .elementor-heading-title{color:#C24600}
.elementor-element-29c475c:focus-visible{outline:3px solid #FC6600;outline-offset:6px;border-radius:8px}
/* nombre-afiche */
.elementor .e-con{max-width:100%}
.elementor-widget-text-editor p:last-child{margin-bottom:0}
.elementor-element-e113253 .elementor-heading-title{transition:color .3s}
.elementor-element-e113253 a:hover{color:#FC6600!important}
.elementor-element-16d3d2b{display:none}
/* fila-tematica */
.elementor .e-con{max-width:100%}
.elementor-widget-text-editor p:last-child{margin-bottom:0}
.elementor-element-e4634f2{flex:none;width:auto!important}
.elementor-element-e4634f2 .elementor-heading-title{white-space:nowrap;transition:color .35s}
.elementor-element-3d844b9{flex:none;width:auto!important;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.elementor-element-3d844b9 .elementor-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(23,71,142,.35);transition:background .35s,border-color .35s,color .35s}
.elementor-element-3d844b9 .elementor-icon i{transition:color .35s}
.elementor-element-d524479{flex:1 1 auto}
.elementor-element-d524479 .elementor-heading-title{transition:color .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.elementor-element-a5efe02{position:relative;isolation:isolate;overflow:hidden;border-bottom:1.5px dashed rgba(20,20,20,.22);height:100%%}
.elementor-element-a5efe02::before{content:counter(spq-set,decimal-leading-zero);position:absolute;left:18px;top:50%;transform:translateY(-50%);font-family:'Rustico',sans-serif;font-size:26px;color:#C24600;transition:color .35s}
.elementor-element-a5efe02::after{content:'';position:absolute;inset:0;z-index:-1;background:#17478E url(/wp-content/mu-plugins/spq/img/azul.webp) center/cover;transform:scaleX(0);transform-origin:0 50%;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.elementor-element-a5efe02:hover::after{transform:scaleX(1)}
.elementor-element-a5efe02:hover::before{color:#FF8A1F}
.elementor-element-a5efe02:hover .elementor-element-d524479 .elementor-heading-title{transform:translateX(8px);color:#fff}
.elementor-element-a5efe02:hover .elementor-element-e4634f2 .elementor-heading-title{color:#DCE5F5}
.elementor-element-a5efe02:hover .elementor-element-3d844b9 .elementor-icon{background:#E65C00;border-color:#E65C00}
.elementor-element-a5efe02:hover .elementor-element-3d844b9 .elementor-icon i{color:#fff}
.elementor-element-a5efe02:hover .elementor-element-3d844b9{transform:rotate(-45deg)}
@media(max-width:767px){.elementor-element-a5efe02::before{left:12px!important;font-size:21px}.elementor-element-a5efe02 .elementor-element-e4634f2{display:none}}

/* ═══════════ IMPACTO (3-nov-2026): la entrada, el pase entre páginas y el movimiento al recorrer ═══════════
   El <head> (mu/spq.php) decide el modo: html.spq-intro (primera página de la visita) o html.spq-llega (vino por un link del
   sitio) — los dos con spq-cubre: la página arranca TAPADA. Cuando sitio.js está listo pone html.spq-ya (+ --lev y --spq-d0):
   se levanta el telón / se va la cortina y entra la coreografía. Sin JS el telón se va solo a los 5 s y todo queda quieto.
   Si la página se abrió directo (recarga, link en pestaña nueva) no hay coreografía: se ve quieta desde el primer cuadro. */
:root{--spq-d0:.2s;--lev:0s}
@keyframes spq-fade-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes spq-late-r{to{scale:1.05}}

/* 1 · LA ENTRADA: cae el rayo, relampaguea, aparece el sello y se levanta el telón */
.spq-intro-capa,.spq-cortina{display:none}
html.spq-intro .spq-intro-capa{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4vh;position:fixed;left:0;top:0;width:100%;
  height:124vh;padding-bottom:24vh;z-index:100001;overflow:hidden;
  background:linear-gradient(rgba(14,44,100,.42),rgba(14,44,100,.42)),url(/wp-content/mu-plugins/spq/img/azul.webp) center/cover,#0F3470;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12vh),0 100%);animation:spq-telon-seguro .8s cubic-bezier(.76,0,.24,1) 5s forwards}
html.spq-intro.spq-ya .spq-intro-capa{animation:spq-telon .8s cubic-bezier(.76,0,.24,1) var(--lev) forwards}
.spq-intro-flash{position:absolute;inset:0;background:#fff;opacity:0;animation:spq-relampago .5s linear .36s both}
.spq-intro-rayo{position:relative;width:min(38vh,58vw);aspect-ratio:614/859;filter:drop-shadow(0 0 46px rgba(255,138,31,.5));
  animation:spq-cae .64s cubic-bezier(.2,1.25,.35,1) .06s both,spq-late-r 1.3s ease-in-out 1.2s infinite alternate}
.spq-intro-rayo::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,#FF8A1F,#FC6600 55%,#E85A00);clip-path:polygon(33.55% 3.61%,87.46% 3.61%,57.49% 38.53%,88.60% 25.03%,15.47% 98.25%,30.29% 52.27%,5.86% 62.86%)}
.spq-intro-rayo::after{content:'';position:absolute;left:27.36%;top:59.25%;width:31.92%;aspect-ratio:196/106;
  background:url(/wp-content/mu-plugins/spq/img/sello.png) center/100% 100% no-repeat;animation:spq-sello .5s cubic-bezier(.2,1.6,.4,1) .52s both}
.spq-intro-txt{position:relative;font-family:'Knockout Sumo',sans-serif;color:#fff;font-size:clamp(34px,5.6vw,72px);line-height:.95;letter-spacing:.01em;
  text-transform:uppercase;text-align:center;animation:spq-fade-up .6s cubic-bezier(.16,1,.3,1) .7s both}
.spq-intro-txt span{display:block;font-family:'Rustico',sans-serif;text-transform:none;letter-spacing:0;color:#FF8A1F;font-size:.6em;margin-top:.12em;transform:rotate(-3deg)}
@keyframes spq-telon{to{transform:translateY(-126vh);visibility:hidden}}
@keyframes spq-telon-seguro{to{transform:translateY(-126vh);visibility:hidden}}
@keyframes spq-cae{0%{opacity:0;transform:translateY(-40vh) scale(.5) rotate(-16deg)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes spq-sello{from{opacity:0;transform:scale(0) rotate(-25deg)}to{opacity:1;transform:none}}
@keyframes spq-relampago{0%{opacity:0}14%{opacity:.42}28%{opacity:.04}40%{opacity:.26}100%{opacity:0}}

/* 2 · EL PASE ENTRE PÁGINAS: una cortina naranja con el rayo azul cruza en diagonal; en la página nueva se va cuando está lista */
html.spq-sale .spq-cortina,html.spq-llega .spq-cortina{display:flex;align-items:center;justify-content:center;position:fixed;top:-12vh;bottom:-12vh;left:-25vw;right:-25vw;
  z-index:100000;pointer-events:none;background:url(/wp-content/mu-plugins/spq/img/naranja.webp) center/cover,#FC6600}
html.spq-sale .spq-cortina{animation:spq-cortina-in .48s cubic-bezier(.76,0,.24,1) both}
html.spq-llega .spq-cortina{transform:skewX(-12deg);animation:spq-cortina-seguro .64s cubic-bezier(.76,0,.24,1) 4s both}
html.spq-llega.spq-ya .spq-cortina{animation:spq-cortina-out .64s cubic-bezier(.76,0,.24,1) var(--lev) both}
.spq-cortina-rayo{width:min(24vh,32vw);aspect-ratio:614/859;transform:skewX(12deg);background:linear-gradient(160deg,#2A63B8,#17478E 55%,#0F3470);
  clip-path:polygon(33.55% 3.61%,87.46% 3.61%,57.49% 38.53%,88.60% 25.03%,15.47% 98.25%,30.29% 52.27%,5.86% 62.86%);animation:spq-late-r .9s ease-in-out .5s infinite alternate}
@keyframes spq-cortina-in{from{transform:translateX(120%) skewX(-12deg)}to{transform:translateX(0) skewX(-12deg)}}
@keyframes spq-cortina-out{from{transform:translateX(0) skewX(-12deg)}to{transform:translateX(-120%) skewX(-12deg);visibility:hidden}}
@keyframes spq-cortina-seguro{from{transform:translateX(0) skewX(-12deg)}to{transform:translateX(-120%) skewX(-12deg);visibility:hidden}}

/* 3 · EL ESCENARIO: el público que se acerca, las luces que barren y los flashes de las cámaras (portada y 404);
       en las cabeceras internas, solo las luces a los costados */
.spq-show{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.spq-show-foto{position:absolute;inset:-3%;
  background:linear-gradient(180deg,rgba(15,52,112,.64),rgba(15,52,112,.8)),url(/wp-content/mu-plugins/spq/img/publico.webp) center 30%/cover no-repeat;
  translate:calc(var(--mx,0)*12px) calc(var(--my,0)*9px);scale:calc(1 + var(--sp,0)*.08);animation:spq-respira 24s ease-in-out infinite alternate}
html.spq-cubre.spq-ya .spq-show-foto{animation:spq-acerca 2.6s cubic-bezier(.16,1,.3,1) var(--lev) both,spq-respira 24s ease-in-out calc(var(--lev) + 2.6s) infinite alternate}
@keyframes spq-acerca{from{transform:scale(1.2)}to{transform:scale(1)}}
@keyframes spq-respira{from{transform:scale(1)}to{transform:scale(1.06) translateY(-1%)}}
.spq-haz{position:absolute;top:-14%;width:30%;height:135%;transform-origin:50% 0;opacity:0;filter:blur(7px);
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 50%,rgba(255,255,255,0) 82%);
  clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);
  animation:spq-haz-in 1.4s ease-out calc(var(--spq-d0) + .2s) forwards,spq-barre 11s ease-in-out -2s infinite alternate}
.spq-haz-1{left:-9%}
.spq-haz-2{left:50%;animation-duration:1.4s,13s;animation-delay:calc(var(--spq-d0) + .4s),-7s;
  background:linear-gradient(180deg,rgba(255,138,31,.26),rgba(255,138,31,.06) 50%,rgba(255,138,31,0) 82%)}
.spq-haz-3{left:78%;animation-duration:1.4s,9.5s;animation-delay:calc(var(--spq-d0) + .55s),-4s}
.spq-cabecera .spq-haz-1{left:-14%}.spq-cabecera .spq-haz-2,.spq-error .spq-haz-2{display:none}.spq-cabecera .spq-haz-3{left:84%}
@keyframes spq-haz-in{to{opacity:1}}
@keyframes spq-barre{from{transform:rotate(-17deg)}to{transform:rotate(15deg)}}
.spq-flash{position:absolute;width:var(--t,40px);height:var(--t,40px);margin:calc(var(--t,40px)/-2) 0 0 calc(var(--t,40px)/-2);border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fff 0 12%,rgba(255,255,255,.5) 24%,rgba(255,255,255,0) 66%);
  animation:spq-flash var(--dur,5s) linear var(--del,0s) infinite}
@keyframes spq-flash{0%,90%,100%{opacity:0;transform:scale(.4)}91.5%{opacity:1;transform:scale(1.5)}94.5%{opacity:.12;transform:scale(1)}}
/* el seguidor: una luz de escenario que acompaña al mouse por las bandas azules */
.spq-seguidor{position:absolute;left:0;top:0;width:660px;height:660px;margin:-330px 0 0 -330px;border-radius:50%;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.15) 0%,rgba(255,255,255,.06) 34%,rgba(255,255,255,0) 66%);transition:opacity .6s}
.spq-seguidor.on{opacity:1}

/* 4 · LA COREOGRAFÍA de la cabecera (solo cuando la página arrancó tapada): el texto entra en orden, los speakers suben,
       el retrato cae con su rayo; y siempre: el hero responde al mouse y se aleja al bajar */
html.spq-cubre.spq-ya .spq-entra{animation:spq-fade-up .95s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--spq-d0)}
html.spq-cubre.spq-ya .spq-entra-2{animation-delay:calc(var(--spq-d0) + .45s)}
html.spq-cubre.spq-ya .spq-entra-3{animation-delay:calc(var(--spq-d0) + .58s)}
html.spq-cubre.spq-ya .spq-entra-4{animation-delay:calc(var(--spq-d0) + .7s)}
html.spq-cubre.spq-ya .spq-entra-5{animation-delay:calc(var(--spq-d0) + .82s)}
html.spq-cubre.spq-ya .spq-hero-der .spq-desfile{animation:spq-desfile-in 1.4s cubic-bezier(.16,1,.3,1) calc(var(--spq-d0) + .15s) both}
@keyframes spq-desfile-in{from{opacity:0;transform:translateY(90px)}to{opacity:1;transform:none}}
html.spq-cubre.spq-ya .spq-retrato{animation:spq-rayo-cae 1.15s cubic-bezier(.2,1.2,.35,1) calc(var(--spq-d0) + .2s) both}
@keyframes spq-rayo-cae{from{opacity:0;transform:translateY(-70px) scale(.82) rotate(-8deg)}to{opacity:1;transform:none}}
.spq-hero-der{translate:calc(var(--mx,0)*-16px) calc(var(--my,0)*-12px + var(--sp,0)*-50px)}
.spq-hero-txt{translate:0 calc(var(--sp,0)*-90px);opacity:calc(1 - var(--sp,0)*.7)}

/* 5 · LOS TÍTULOS caen palabra por palabra (el H1 al levantarse el telón, cada H2 cuando aparece); lo de pincel se pinta de un trazo */
.spq-pm{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.16em 0 .12em;margin:-.16em 0 -.12em}
.spq-pm-pincel{overflow:visible}
.spq-p{display:inline-block}
.spq-partido:not(.spq-listo) .spq-p{transform:translateY(118%)}
.spq-partido:not(.spq-listo) .spq-pm-pincel .spq-p{transform:none;clip-path:inset(-40% 100% -40% -12%)}
.spq-listo .spq-p{animation:spq-palabra 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--spq-dt,0s) + var(--i,0)*65ms)}
.spq-listo .spq-pm-pincel .spq-p{animation:spq-pincel .75s cubic-bezier(.65,0,.2,1) both;animation-delay:calc(var(--spq-dt,0s) + var(--i,0)*65ms + .18s)}
.spq-fin .spq-pm{overflow:visible}
.spq-fin .spq-p{animation:none!important;transform:none!important;clip-path:none!important}
@keyframes spq-palabra{from{transform:translateY(118%) rotate(5deg)}to{transform:none}}
@keyframes spq-pincel{from{clip-path:inset(-40% 100% -40% -12%)}to{clip-path:inset(-40% -12% -40% -12%)}}

/* 6 · AL BAJAR: las tarjetas suben y se acomodan en cascada; la cinta se inclina con la velocidad del scroll */
.spq-js .spq-rv{opacity:0;transform:translateY(50px) rotate(-2.5deg) scale(.95);
  transition:opacity .7s ease,transform 1s cubic-bezier(.16,1,.3,1);transition-delay:var(--rd,0s)}
.spq-js .spq-rv.spq-rv-ancho{transform:translateX(-46px)}
.spq-js .spq-rv.spq-in{opacity:1;transform:none}
.spq-cinta .elementor-heading-title{will-change:transform}
/* la barra de avance: cuánto falta de la página */
.spq-progreso{position:fixed;left:0;top:0;width:100%;height:3px;z-index:100002;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#FC6600,#FF8A1F)}
@media(prefers-reduced-motion:reduce){
  .spq-entra,.spq-retrato,.spq-hero-der .spq-desfile,.spq-show-foto{animation:none!important}
  .spq-haz,.spq-flash,.spq-seguidor,.spq-progreso{display:none}}