/* Jupá · Pie del sitio (parejas, organizadores y guías). Lo enlaza el propio pie (site.py → foot): en el sitio entra en el
   CSS de cada página (css-pages.py) y en las guías se carga al final. En compu ocupa la pantalla; en el celular, lo justo.
   Fondo: luces lila suaves y un adorno de la marca (.foot-orn): el arco de la tarjeta de invitación con el monograma tenue
   adentro y destellos lila. Va al costado de la frase (en el celular, en una franja arriba), nunca detrás de las columnas.
   Movimiento: m.js / guia.js le ponen .foot-on al aparecer (el arco y la línea se dibujan, entra el texto) y .foot-vis
   mientras se ve (luces y destellos se mueven lento solo entonces). Sin JS o con "menos movimiento": todo visible y quieto. */
.foot{--fmo:.2;--fbg:#1a1320;--fl:#e8dcf7;--ft:rgba(255,255,255,.8);--fk:rgba(232,220,247,.62);--e2:cubic-bezier(.16,1,.3,1);
  position:relative;isolation:isolate;overflow:hidden;background:var(--fbg);color:var(--ft);font:400 15px/1.5 var(--font-body);
  padding:150px 0 calc(26px + env(safe-area-inset-bottom))}
.foot-in{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column}

/* Fondo: luces lila difusas, nada más */
.foot-fx{position:absolute;inset:0;z-index:0;pointer-events:none}
.foot-g{position:absolute;border-radius:50%;will-change:transform}
.foot-g1{width:70vmax;height:70vmax;left:-24vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(205,184,236,.2),transparent)}
.foot-g2{width:62vmax;height:62vmax;right:-22vmax;bottom:-34vmax;background:radial-gradient(closest-side,rgba(113,84,146,.42),transparent)}
.foot-g3{width:34vmax;height:34vmax;left:46%;top:18%;background:radial-gradient(closest-side,rgba(232,220,247,.08),transparent)}

/* Adorno: arco de invitación + monograma + destellos (posiciones en % del arco, para que acompañen su tamaño) */
.foot-orn{position:absolute;top:26px;right:20px;width:80px;aspect-ratio:200/290}
.foot-arc{display:block;width:100%;height:100%;overflow:visible}
.foot-arc path{stroke-linecap:round;stroke-linejoin:round}
.foot-arc-g{stroke:#cdb8ec;stroke-width:26;opacity:.3}
.foot-arc-l{stroke:rgba(232,220,247,.62);stroke-width:5.5}
.foot-mono{opacity:var(--fmo)}
.foot-mono-a{fill:#cdb8ec}.foot-mono-b{fill:#e8dcf7}
.foot-sp,.foot-dot{position:absolute;display:block;opacity:var(--o)}
.foot-sp{fill:#e8dcf7}
.foot-sp1{width:13px;height:13px;left:-34%;top:6%;--o:.8}
.foot-sp2{width:9px;height:9px;left:108%;top:46%;--o:.55}
.foot-sp3{width:15px;height:15px;left:-118%;top:68%;--o:.7;fill:#cdb8ec}
.foot-sp4{width:8px;height:8px;left:-62%;top:94%;--o:.5}
.foot-sp5{width:10px;height:10px;left:70%;top:-12%;--o:.6;fill:#cdb8ec}
.foot-dot{width:5px;height:5px;border-radius:50%;background:#cdb8ec}
.foot-dot1{left:-80%;top:30%;--o:.45}
.foot-dot2{left:94%;top:104%;--o:.35;background:#e8dcf7}
.foot-dot3{left:-22%;top:112%;--o:.3}

/* Arriba: tagline y la frase de cierre */
.foot-top{display:grid;gap:22px}
.foot-tag{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0;font:600 12px/1.3 var(--font-body);letter-spacing:.24em;text-transform:uppercase;color:var(--fk)}
.foot-tag img{width:96px;height:auto}
.foot-tag{flex-direction:column;align-items:flex-start;letter-spacing:.2em}
.foot-tag span{display:flex;align-items:center;gap:18px}
@media (min-width:900px){.foot-tag{flex-direction:row;align-items:center;letter-spacing:.24em}.foot-tag span::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}}
.foot-h{margin:0;font:500 clamp(42px,12vw,64px)/1.02 var(--font-display);letter-spacing:-.02em;text-transform:uppercase;color:#fff;text-wrap:balance}
.foot-h span,.foot-h em{display:inline-block}
.foot-h em{font:italic 400 1.1em/1 var(--font-accent);letter-spacing:-.01em;text-transform:none;color:#d9c7f0;padding:0 .06em .08em 0}

/* La línea que se dibuja */
.foot-rule{display:block;height:1px;margin:36px 0 30px;background:linear-gradient(90deg,rgba(232,220,247,.55),rgba(232,220,247,.14) 70%,transparent);transform-origin:left}

/* Columnas */
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px}
.foot-k{margin:0 0 10px;font:600 12px/1.3 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--fk)}
.foot-c ul{list-style:none;margin:0;padding:0}
.foot-c a{display:inline-block;padding:7px 0;color:var(--ft);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 7px)/0 1px no-repeat;transition:color .25s,background-size .35s var(--e2)}
.foot-c a:focus-visible{outline:2px solid var(--fl);outline-offset:2px;border-radius:4px}
@media (hover:hover){.foot-c a:hover{color:#fff;background-size:100% 1px}}

/* Abajo */
.foot-s{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:rgba(255,255,255,.62)}
.foot-s p{margin:0}
.foot-n{display:block;margin-top:4px;color:rgba(255,255,255,.5)}

@media (min-width:900px){
  .foot{min-height:100svh;display:flex;padding:clamp(96px,14vh,150px) 0 30px}
  .foot-in{flex:1;width:100%;padding:0 clamp(20px,4vw,48px)}
  .foot-top{gap:clamp(22px,3.4vh,36px)}
  .foot-h{font-size:clamp(64px,7.4vw,140px);line-height:.98}
  .foot-rule{margin:auto 0 clamp(34px,5vh,56px);padding-top:0}
  .foot-top{margin-bottom:clamp(48px,8vh,96px)}
  .foot-cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .foot-c a{padding:6px 0}
  .foot-s{margin-top:clamp(40px,7vh,80px)}
  .foot-n{display:inline;margin:0}.foot-n::before{content:" · "}
  /* el arco, a la derecha de la frase y arriba de la línea */
  .foot-orn{top:calc(clamp(96px,14vh,150px) - 14px);right:clamp(16px,3.2vw,44px);width:clamp(120px,13vw,172px)}
  .foot-arc-g{stroke-width:16}.foot-arc-l{stroke-width:3.5}
  .foot{--fmo:.16}
  .foot-sp1{width:16px;height:16px}.foot-sp3{width:20px;height:20px}.foot-sp2{width:11px;height:11px}
  .foot-dot{width:6px;height:6px}
}

/* ——— Movimiento (solo con JS y sin "menos movimiento") ——— */
@media (prefers-reduced-motion:no-preference){
  .foot-js .foot-rule{transform:scaleX(0);transition:transform 1.6s var(--e2) .35s}
  .foot-js .foot-tag,.foot-js .foot-h1,.foot-js .foot-h2,.foot-js .foot-c,.foot-js .foot-s{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s ease,transform 1.2s var(--e2)}
  .foot-js .foot-h1{transition-delay:.08s}.foot-js .foot-h2{transition-delay:.2s}
  .foot-js .foot-c:nth-child(1){transition-delay:.45s}.foot-js .foot-c:nth-child(2){transition-delay:.53s}
  .foot-js .foot-c:nth-child(3){transition-delay:.61s}.foot-js .foot-c:nth-child(4){transition-delay:.69s}.foot-js .foot-s{transition-delay:.8s}
  .foot-js.foot-on .foot-rule{transform:none}
  /* el arco se dibuja, después aparece el monograma y por último los destellos */
  .foot-js .foot-arc path{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 2.8s var(--e2) .3s}
  .foot-js .foot-arc-g{transition-delay:.55s}
  .foot-js.foot-on .foot-arc path{stroke-dashoffset:0}
  .foot-js .foot-mono{opacity:0;transition:opacity 1.8s ease 1.5s}
  .foot-js.foot-on .foot-mono{opacity:var(--fmo)}
  .foot-js .foot-sp,.foot-js .foot-dot{opacity:0;transition:opacity 1.6s ease 2s}
  .foot-js.foot-on .foot-sp,.foot-js.foot-on .foot-dot{opacity:var(--o)}
  .foot-js.foot-on .foot-tag,.foot-js.foot-on .foot-h1,.foot-js.foot-on .foot-h2,.foot-js.foot-on .foot-c,.foot-js.foot-on .foot-s{opacity:1;transform:none}
  /* las luces se mueven lento, solo mientras el pie se ve */
  .foot-g1{animation:foot-a 22s ease-in-out infinite alternate}
  .foot-g2{animation:foot-b 26s ease-in-out infinite alternate}
  .foot-g3{animation:foot-a 18s ease-in-out -6s infinite alternate-reverse}
  /* destellos y confeti: flotan y titilan lento (solo transform, liviano) */
  .foot-sp,.foot-dot{animation:foot-fl 9s ease-in-out infinite alternate}
  .foot-sp2{animation-duration:7s;animation-delay:-3s}.foot-sp3{animation-duration:11s;animation-delay:-5s}
  .foot-sp4{animation-duration:8s;animation-delay:-2s}.foot-sp5{animation-duration:10s;animation-delay:-6s}
  .foot-dot{animation-name:foot-fd;animation-duration:12s}.foot-dot2{animation-delay:-4s}.foot-dot3{animation-delay:-8s;animation-duration:14s}
  .foot-arc-g{animation:foot-br 7s ease-in-out infinite alternate}
  .foot-g,.foot-sp,.foot-dot,.foot-arc-g{animation-play-state:paused}
  .foot-vis .foot-g,.foot-vis .foot-sp,.foot-vis .foot-dot,.foot-vis .foot-arc-g{animation-play-state:running}
}
@keyframes foot-a{to{transform:translate3d(9vmax,6vmax,0) scale(1.08)}}
@keyframes foot-b{to{transform:translate3d(-8vmax,-5vmax,0) scale(1.12)}}
@keyframes foot-fl{0%{transform:translate3d(0,0,0) rotate(0) scale(.7)}50%{transform:translate3d(3px,-8px,0) rotate(20deg) scale(1.1)}100%{transform:translate3d(-2px,-14px,0) rotate(45deg) scale(.85)}}
@keyframes foot-fd{to{transform:translate3d(-8px,-18px,0)}}
@keyframes foot-br{from{opacity:.2}to{opacity:.36}}
@media print{.foot{display:none}}