/* =====================================================================
   ABSCHNITT 1: DESIGN-TOKENS
   Farben, Schriften und Abstände ausschließlich hier definieren.
   Im restlichen Stylesheet nur var(--...) verwenden, keine Hex-Werte.
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
:root{
  --ink:#0b0b0d;
  --ink-soft:#131316;
  --panel:#18181c;
  --panel-2:#1f1f24;
  --line:rgba(246,242,233,0.10);
  --line-strong:rgba(246,242,233,0.18);

  --gold:#cda45c;
  --gold-2:#e4c377;
  --gold-deep:#8a6a30;

  --purple:#6d28d9;
  --purple-2:#4c1d95;
  --purple-glow:rgba(76,29,149,0.5);
  /* Helleres Lila ausschließlich für Fließtext/Labels: reines --purple
     bzw. --purple-2 fällt auf dunklem Grund unter 4.5:1 Kontrast
     (z.B. 1.6:1 für --purple-2 auf --panel). --purple-text besteht den
     Kontrast-Test (>=4.5:1 auf --ink und --panel) und ersetzt --purple/
     --purple-2 überall dort, wo Lila als Textfarbe (nicht Rahmen/
     Hintergrund) verwendet wird. */
  --purple-text:#9d76ea;

  --bone:#f3eee2;
  --white:#ffffff;
  --ash:#a6a2ad;
  /* Von #77747d auf #82808a angehoben: Original lag mit 4.29:1 knapp
     unter der geforderten Kontrastgrenze von 4.5:1 auf --ink. */
  --ash-dim:#82808a;

  --font-display:'Anton',sans-serif;
  --font-label:'Oswald',sans-serif;
  --font-body:'Inter',sans-serif;

  --nav-h:70px;
  --radius:4px;
  --radius-sm:2px;
  --max:1180px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media(min-width:1080px){:root{--nav-h:84px;}}

html,body{background:var(--ink);color:var(--bone);}
body{
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,textarea{font:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:0.01em;font-weight:400;}
section{position:relative;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 20px;}
@media(min-width:1080px){.wrap{padding:0 32px;}}

.skip-link{position:absolute;left:12px;top:-60px;background:var(--gold);color:#0b0b0d;padding:10px 16px;border-radius:8px;font-family:var(--font-label);font-weight:600;z-index:999;transition:top .2s var(--ease);}
.skip-link:focus{top:12px;}

:focus-visible{outline:2px solid var(--purple-text);outline-offset:3px;border-radius:4px;}

/* grain texture overlay */
.grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.09;mix-blend-mode:overlay;}

/* shared angular "cut corner" shape — echoes the logo's diagonal slant */
:root{ --notch: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }

/* eyebrow / labels */
.eyebrow{
  font-family:var(--font-label);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-weight:600;
}
.eyebrow::before{content:'';width:22px;height:2px;background:var(--gold);display:inline-block;}

/* section title with shadow-duplicate (matches print flyers) */
.round-title{position:relative;display:inline-block;font-size:clamp(2.6rem,8.4vw,5.6rem);line-height:.86;margin:.3em 0 .38em;color:var(--white);transform:rotate(-1.1deg);}
.round-title .ghost{position:absolute;top:.14em;left:-.07em;color:transparent;-webkit-text-stroke:1.5px rgba(246,242,233,0.14);z-index:0;user-select:none;}
.round-title .fg{position:relative;z-index:1;color:var(--gold);}
.round-title.on-bone .ghost{-webkit-text-stroke:1.5px rgba(11,11,13,0.12);}
.round-title.on-bone .fg{color:#171207;}

.section-head{margin-bottom:1.9rem;}
.section-head p.lede{max-width:52ch;color:var(--ash);font-size:1.02rem;}
.on-bone .section-head p.lede{color:#54504a;}

.placeholder-flag{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-label);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--purple-text);background:rgba(109,40,217,.12);border:1px solid rgba(109,40,217,.35);
  padding:.5em .9em;border-radius:0;clip-path:var(--notch);margin-bottom:1.4rem;
}
.on-bone .placeholder-flag{color:#4c1d95;background:rgba(109,40,217,.08);}
.info-flag{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-label);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-2);background:rgba(205,164,92,.1);border:1px solid rgba(205,164,92,.4);
  padding:.5em .9em;border-radius:0;clip-path:var(--notch);margin-bottom:1.4rem;font-weight:600;
}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-label);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.86rem;
  padding:.95em 1.7em;border-radius:0;clip-path:var(--notch);
  transition:transform .18s var(--ease),filter .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
  white-space:nowrap;
}
.btn-gold{background:var(--gold);color:#171105;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.65));}
.btn-gold:hover{transform:translate(-2px,-2px);background:var(--gold-2);filter:drop-shadow(6px 6px 0 rgba(0,0,0,.65));}
.btn-gold:active{transform:translate(1px,1px);filter:drop-shadow(2px 2px 0 rgba(0,0,0,.65));}
.btn-outline{border:1.5px solid var(--line-strong);color:var(--bone);background:rgba(255,255,255,.02);}
.btn-outline:hover{border-color:var(--purple);color:var(--purple-text);background:rgba(109,40,217,.1);transform:translate(-2px,-2px);filter:drop-shadow(4px 4px 0 rgba(109,40,217,.35));}
.btn-outline:active{transform:translate(1px,1px);filter:none;}
.btn-sm{padding:.7em 1.3em;font-size:.76rem;}
.btn svg{width:1.1em;height:1.1em;}

/* ============ HEADER ============ */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);display:flex;align-items:center;
  background:rgba(11,11,13,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),height .3s var(--ease);
}
header.scrolled{background:rgba(11,11,13,.86);border-bottom-color:var(--line);}
header .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;}
.brand{display:flex;align-items:center;gap:.7em;}
.brand img{height:30px;width:auto;}
@media(min-width:1080px){.brand img{height:38px;}}

/* Keine waagerechte Navigationsleiste mehr: neun Einträge nebeneinander
   wirkten in der Kopfzeile überladen. Alle Bereiche liegen jetzt auf jeder
   Bildschirmgröße hinter dem Menü-Button (#mobileMenu). */
.nav-actions{display:flex;align-items:center;gap:.7rem;}
.hamburger{display:flex;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:3px;transition:border-color .2s,color .2s;}
.hamburger:hover{border-color:var(--gold);color:var(--gold);}
.hamburger svg{width:20px;height:20px;}
.nav-actions .btn-gold{display:none;}
@media(min-width:640px){.nav-actions .btn-gold{display:inline-flex;}}

.mobile-menu{
  /* voll deckend statt .98: sonst schimmert die Überschrift des Hero durch
     und stört die Lesbarkeit -- das Menü ist die einzige Navigation */
  position:fixed;inset:var(--nav-h) 0 0 0;z-index:99;background:var(--ink);
  transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .28s var(--ease),transform .28s var(--ease);
  display:flex;flex-direction:column;padding:1.6rem 1.4rem;overflow-y:auto;
}
body.menu-open .mobile-menu{opacity:1;transform:translateY(0);pointer-events:auto;}
.mobile-menu a{
  display:flex;align-items:baseline;gap:.8em;padding:1.05em .2em;border-bottom:1px solid var(--line);
  font-family:var(--font-label);font-size:1.15rem;text-transform:uppercase;letter-spacing:.03em;color:var(--bone);
}
.mobile-menu a span.rn{font-family:var(--font-label);font-size:.7rem;color:var(--gold);letter-spacing:.1em;}
/* Beim Öffnen sieht man, in welchem Bereich man gerade ist */
.mobile-menu a.active{color:var(--gold);}
.mobile-menu .btn{margin-top:1.6rem;align-self:flex-start;}
/* Auf großen Bildschirmen läuft dasselbe Menü über den Burger. Neun Einträge
   nebeneinander in der Kopfzeile wirkten gedrängt, deshalb liegen sie hier
   in einem mehrspaltigen Raster statt in einer langen Spalte. */
@media(min-width:960px){
  .mobile-menu{padding:3rem max(32px,calc((100vw - var(--max))/2 + 32px));}
  .mobile-menu a{
    display:flex;font-size:1.45rem;padding:1.1em .2em;
    transition:color .2s var(--ease),padding-left .2s var(--ease);
  }
  .mobile-menu a:hover{color:var(--gold);padding-left:.8em;}
  .mobile-menu a span.rn{font-size:.78rem;}
  .mobile-menu .btn{margin-top:2.2rem;}
}
@media(min-width:960px) and (min-height:620px){
  /* Zweispaltig, damit die Liste ohne Scrollen ins Bild passt */
  .mobile-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3.5rem;align-content:start;}
  .mobile-menu .btn{grid-column:1 / -1;justify-self:start;}
}

/* ============ RING-APRON TICKER ============ */
.ticker{
  background:linear-gradient(90deg,#171214,#0b0b0d 40%,#171214);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:.85rem 0;transform:skewY(-1.2deg);margin:0 0 -.4rem;
}
.ticker-track{display:flex;width:max-content;animation:tick 26s linear infinite;}
.ticker-track span{
  font-family:var(--font-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;
  color:var(--gold-2);padding:0 1.6rem;white-space:nowrap;display:flex;align-items:center;gap:1.6rem;
}
/* ============ ANKÜNDIGUNGSLEISTE ============ */
/* Steht fest unter der Kopfzeile, statt im laufenden Band mitzuwandern --
   ein Termin mit Datum muss lesbar sein, ohne dass man auf ihn wartet. */
.aviso-barra{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:98;
  background:var(--gold);color:#171105;
  display:flex;align-items:center;justify-content:center;gap:.5rem 1.4rem;flex-wrap:wrap;
  padding:.7rem 3.2rem .7rem 1.2rem;
  font-family:var(--font-label);font-size:.82rem;letter-spacing:.04em;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.aviso-barra[hidden]{display:none;}
.aviso-barra-texto{display:flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;justify-content:center;color:inherit;}
.aviso-barra-texto strong{font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.aviso-barra-texto span{color:#3a2d10;}
.aviso-barra-texto:hover{text-decoration:underline;}
.aviso-barra-cta{
  background:#0b0b0d;color:var(--gold-2);text-transform:uppercase;font-weight:600;
  font-size:.74rem;letter-spacing:.12em;padding:.6em 1.1em;clip-path:var(--notch);flex:none;
  transition:color .2s;
}
.aviso-barra-cta:hover{color:var(--bone);}
.aviso-barra-cerrar{
  position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#171105;opacity:.65;
}
.aviso-barra-cerrar:hover{opacity:1;}
.aviso-barra-cerrar svg{width:15px;height:15px;}
@media(max-width:640px){
  .aviso-barra{font-size:.76rem;padding:.6rem 2.6rem .6rem 1rem;}
  .aviso-barra-texto{gap:.15rem .8rem;}
}
.ticker-track span::after{content:'✦';color:var(--purple);}
@keyframes tick{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============ VALORES — continuous horizontal marquee ============ */
.values-band{background:var(--ink);overflow:hidden;padding:2.6rem 0;border-bottom:1px solid var(--line);}
.mq-row{overflow:hidden;white-space:nowrap;}
.mq-row + .mq-row{margin-top:-.12em;}
.mq-track{display:inline-flex;width:max-content;will-change:transform;animation:mqScroll 32s linear infinite;}
.mq-seq{display:inline-flex;align-items:center;font-family:var(--font-display);text-transform:uppercase;white-space:nowrap;letter-spacing:.01em;}
.mq-seq i{font-style:normal;display:inline-block;margin:0 .35em;font-size:.5em;transform:translateY(-.15em);}
@keyframes mqScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.mq-row--frame .mq-seq{font-size:clamp(2.1rem,7.4vw,5rem);color:transparent;-webkit-text-stroke:1.5px rgba(205,164,92,.45);}
.mq-row--frame .mq-track{animation-duration:34s;}
.mq-row--frame.purple .mq-seq{-webkit-text-stroke:1.5px rgba(109,40,217,.5);}
.mq-row--frame.purple .mq-track{animation-duration:46s;}
.mq-row--frame .mq-seq i{color:rgba(246,242,233,.3);-webkit-text-stroke:0;}

.mq-row--main{margin:.05em 0;}
.mq-row--main .mq-seq{font-size:clamp(3rem,11.5vw,8rem);}
.mq-row--main .track{animation-duration:22s;}
.mq-row--main .mq-track{animation-duration:22s;animation-direction:reverse;}
.mq-row--main .word{padding:0 .28em;}
.mq-row--main .word.g{color:var(--gold);}
.mq-row--main .word.w{color:var(--bone);}
.mq-row--main .mq-seq i{color:var(--purple);}

@media(prefers-reduced-motion:reduce){
  .mq-track{animation-play-state:paused;}
}

/* ============ HERO ============ */
.hero{
  min-height:100svh;min-height:100vh;display:flex;align-items:center;padding-top:calc(var(--nav-h) + 1.5rem);
  position:relative;isolation:isolate;overflow:hidden;
}
.hero::before{content:'';position:absolute;inset:0;z-index:-2;
  background:
   radial-gradient(60% 50% at 82% 18%, rgba(205,164,92,.14), transparent 70%),
   radial-gradient(45% 40% at 8% 85%, rgba(109,40,217,.18), transparent 70%),
   linear-gradient(100deg, rgba(11,11,13,.97) 0%, rgba(11,11,13,.90) 26%, rgba(11,11,13,.66) 50%, rgba(11,11,13,.36) 72%, rgba(11,11,13,.16) 100%),
   linear-gradient(180deg, rgba(11,11,13,.45) 0%, transparent 22%, transparent 68%, rgba(11,11,13,.55) 100%),
   url(../img/hero-bg-desktop.webp) center 30% / cover no-repeat,
   var(--ink);
}
/* Nur oben/unten polstern: die Kurzform 'padding:2.5rem 0 3.5rem' hat den
   seitlichen Rand von .wrap überschrieben, dadurch klebte der Hero-Text auf
   dem Handy am Bildschirmrand. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.6rem;align-items:center;padding-top:2.5rem;padding-bottom:3.5rem;}
@media(min-width:980px){.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem;}}
/* Mobile gets its own portrait-cropped photo + a fuller top-to-bottom darkening, since text and photo stack instead of sitting side by side */
@media(max-width:760px){
  .hero::before{
    background:
     radial-gradient(70% 40% at 85% 6%, rgba(205,164,92,.14), transparent 70%),
     radial-gradient(55% 35% at 10% 96%, rgba(109,40,217,.2), transparent 70%),
     linear-gradient(180deg, rgba(11,11,13,.95) 0%, rgba(11,11,13,.72) 24%, rgba(11,11,13,.42) 45%, rgba(11,11,13,.55) 65%, rgba(11,11,13,.93) 100%),
     url(../img/hero-bg-mobile.webp) center 22% / cover no-repeat,
     var(--ink);
  }
}

/* line-height knapp unter 1: bei .92 lag die Tilde/der Akzent der unteren
   Zeile hinter der Zeile darüber -- aus "VERSIÓN" wurde optisch "VERSION". */
.hero h1{font-size:clamp(2.7rem,9.4vw,5.6rem);line-height:1;margin:.5rem 0 1.1rem;}
.hero h1 .line{display:block;}
.hero h1 .white{color:var(--bone);}
.hero h1 .gold{color:var(--gold);}
.hero p.lede{max-width:46ch;color:var(--ash);font-size:1.08rem;margin-bottom:1.9rem;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.2rem;}
.hero-meta{display:flex;flex-wrap:wrap;gap:1.4rem;font-family:var(--font-label);font-size:.78rem;letter-spacing:.05em;color:var(--ash);}
.hero-meta li{display:flex;align-items:center;gap:.5em;}
.hero-meta .dot{width:8px;height:8px;border-radius:99px;background:var(--ash-dim);}
.hero-meta .dot.live{background:#3ecf6e;box-shadow:0 0 0 0 rgba(62,207,110,.5);animation:pulseDot 2s infinite;}
.hero-meta .dot.live.closed{background:#e05a4f;}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(62,207,110,.55);}70%{box-shadow:0 0 0 8px rgba(62,207,110,0);}100%{box-shadow:0 0 0 0 rgba(62,207,110,0);}}

/* round timer signature element */
.timer-wrap{display:flex;justify-content:center;}
.round-timer{position:relative;width:min(320px,78vw);aspect-ratio:1/1;}
.round-timer svg{width:100%;height:100%;transform:rotate(-90deg);}
.ring-track{fill:none;stroke:rgba(246,242,233,.08);stroke-width:6;}
.ring-progress{fill:none;stroke:url(#ringGrad);stroke-width:6;stroke-linecap:round;stroke-dasharray:565.48;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear;}
.round-timer-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.3rem;}
.round-timer-face .rlabel{font-family:var(--font-label);font-size:.72rem;letter-spacing:.2em;color:var(--purple-text);text-transform:uppercase;}
.round-timer-face .rtime{font-family:var(--font-display);font-size:clamp(2.2rem,7vw,3.1rem);color:var(--bone);letter-spacing:.02em;}
.round-timer-face .rsub{font-family:var(--font-label);font-size:.66rem;letter-spacing:.14em;color:var(--ash-dim);text-transform:uppercase;}
.round-timer.pulse .round-timer-face{animation:facePulse .6s var(--ease);}
@keyframes facePulse{0%{transform:scale(1);}30%{transform:scale(1.07);text-shadow:0 0 24px var(--purple-glow);}100%{transform:scale(1);}}

/* ============ GENERIC SECTION SPACING ============ */
.section{padding:3.2rem 0;scroll-margin-top:var(--nav-h);}
@media(min-width:1080px){.section{padding:4.4rem 0;}}
.section.on-bone{background:var(--bone);color:#1a1712;}
.section.alt{background:var(--ink-soft);}
/* "Quiénes somos" folgt direkt auf das Marquee-Band: mehr Luft nach oben,
   damit der Titel zwischen Band und Inhalt ausbalanciert steht */
#nosotros{padding-top:5rem;}
@media(min-width:1080px){#nosotros{padding-top:6.6rem;}}

/* reveal-on-scroll */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
[data-reveal].revealed{opacity:1;transform:translateY(0);}

/* ============ HISTORIA ============ */
.historia-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.2rem;align-items:center;}
@media(min-width:900px){.historia-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;}}
.historia-copy{min-width:0;}
.historia-copy p{color:var(--ash);font-size:1rem;line-height:1.7;margin-bottom:1.1rem;}
.historia-copy p:last-child{margin-bottom:0;}
.historia-kicker{font-family:var(--font-label);font-weight:700;font-size:1.35rem;letter-spacing:.01em;text-transform:uppercase;color:var(--gold);margin-bottom:1.3rem!important;}
.historia-close{color:var(--bone)!important;font-weight:600;border-left:3px solid var(--gold);padding-left:1rem;margin-top:1.5rem!important;}

.history-wrap{max-width:460px;width:100%;min-width:0;margin:0 auto;}
@media(min-width:900px){.history-wrap{margin:0;}}
.history-track-outer{overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);aspect-ratio:4/5;position:relative;}
.history-track{display:flex;height:100%;transition:transform .5s var(--ease);}
.history-slide{min-width:100%;height:100%;position:relative;display:flex;align-items:flex-end;padding:1.6rem;overflow:hidden;}
.history-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.history-slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#000;}
.history-mute{
  position:absolute;top:.8rem;right:.8rem;z-index:2;width:36px;height:36px;
  background:rgba(11,11,13,.55);backdrop-filter:blur(6px);border:1px solid rgba(246,242,233,.25);border-radius:3px;
  display:flex;align-items:center;justify-content:center;color:var(--bone);transition:border-color .2s,background .2s;
}
.history-mute:hover{border-color:var(--gold);background:rgba(11,11,13,.75);}
.history-mute svg{width:16px;height:16px;}
.history-slide::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.8));}
.history-slide .yr{position:relative;z-index:1;font-family:var(--font-label);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);margin-bottom:.4rem;display:block;}
.history-slide .cap{position:relative;z-index:1;font-family:var(--font-display);font-size:1.6rem;color:var(--bone);text-transform:uppercase;line-height:1;}
.history-controls{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:1.4rem;}

@media(prefers-reduced-motion:reduce){
  .history-track{transition:none;}
}

/* ============ HORARIOS ============ */
.horarios-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;}
@media(min-width:860px){.horarios-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2.4rem;align-items:stretch;}}

.status-card{
  background:linear-gradient(160deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem;display:flex;flex-direction:column;gap:1rem;justify-content:center;
}
.status-card .pill{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-label);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;padding:.5em 1em;border-radius:0;clip-path:var(--notch);width:fit-content;}
.status-card .pill.open{background:rgba(62,207,110,.14);color:#5fe08a;border:1px solid rgba(62,207,110,.35);}
.status-card .pill.closed{background:rgba(224,90,79,.14);color:#f08277;border:1px solid rgba(224,90,79,.35);}
.status-card h3{font-family:var(--font-display);font-size:1.8rem;color:var(--bone);}
.status-card small{color:var(--ash-dim);font-size:.78rem;}

.schedule-list{display:flex;flex-direction:column;gap:.8rem;}
.schedule-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid transparent;border-radius:var(--radius-sm);
  padding:1.1rem 1.3rem;transition:border-color .3s,background .3s;
}
.schedule-row.is-today{border-left-color:var(--gold);background:var(--panel-2);}
.schedule-row .day{font-family:var(--font-label);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:.92rem;display:flex;align-items:center;gap:.7em;}
.schedule-row .day .tag{font-size:.62rem;background:var(--gold);color:#1a1305;padding:.15em .5em;border-radius:5px;letter-spacing:.05em;}
/* Mehrere Zeitfenster stehen untereinander statt in einer langen Zeile --
   auf dem Handy brach "6:00 a.m.-10:00 a.m. · 3:00 p.m.-8:00 p.m." sonst
   unschön um. Rechtsbündig, damit die Zeiten eine Kante bilden. */
.schedule-row .time{
  font-family:var(--font-display);font-size:1.15rem;color:var(--gold-2);
  display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;text-align:right;white-space:nowrap;
}
.schedule-row{align-items:flex-start;}
.schedule-row .day{padding-top:.15rem;}
.schedule-note{margin-top:1rem;font-size:.85rem;color:var(--ash-dim);}

/* ============ ENTRENAMIENTOS ============ */
.training-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;}
@media(min-width:640px){.training-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1080px){.training-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;}}
.training-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;clip-path:var(--notch);
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;
}
.training-card:hover{transform:translate(-3px,-5px);border-color:var(--gold-deep);box-shadow:6px 8px 0 rgba(0,0,0,.5);}
.training-num{font-family:var(--font-label);font-size:.82rem;letter-spacing:.16em;color:var(--ash-dim);}
.training-card h3{
  font-family:var(--font-label);font-size:1.02rem;letter-spacing:.03em;font-weight:600;
  color:var(--bone);display:flex;align-items:center;gap:.45em;margin-top:.6rem;
}
.training-card p{color:var(--ash);font-size:.94rem;}

/* ============ PLANES ============ */
.tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.4rem;}
.tab-btn{
  font-family:var(--font-label);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  padding:.75em 1.4em;border-radius:0;clip-path:var(--notch);border:1.5px solid var(--line-strong);color:var(--ash);transition:all .2s var(--ease);
}
.tab-btn.is-active{background:var(--gold);color:#171105;border-color:transparent;}
.tab-btn:not(.is-active):hover{border-color:var(--purple);color:var(--bone);}

.plan-panel{display:none;}
.plan-panel.is-active{display:block;}

.plans-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;}
@media(min-width:640px){.plans-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1080px){.plans-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}

.plan-card{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.9rem 1.7rem 2.1rem;display:flex;flex-direction:column;gap:1rem;overflow:hidden;
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.plan-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:0;background:radial-gradient(120px 60px at 20% 100%,rgba(205,164,92,.25),transparent 70%);transition:height .3s;pointer-events:none;}
.plan-card:hover{transform:translate(-3px,-6px);border-color:var(--gold-deep);box-shadow:8px 10px 0 rgba(0,0,0,.5);}
.plan-card:hover::after{height:100%;}
.plan-card.featured{border-color:var(--purple);box-shadow:5px 5px 0 rgba(109,40,217,.35);}
.plan-ribbon{
  align-self:flex-start;font-family:var(--font-label);font-weight:600;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
  background:var(--gold);color:#171105;padding:.5em 1em;border-radius:0;clip-path:var(--notch);transform:rotate(-1.5deg);
}
.plan-card.featured .plan-ribbon{background:var(--purple);color:#fff;}
.plan-badge{
  position:absolute;top:1.1rem;right:1.1rem;font-family:var(--font-label);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(109,40,217,.16);color:var(--purple-text);border:1px solid rgba(109,40,217,.4);padding:.35em .7em;border-radius:0;clip-path:var(--notch);
}
.plan-price{font-family:var(--font-display);font-size:2.5rem;color:var(--white);line-height:1;}
.plan-price small{font-family:var(--font-label);font-size:.9rem;color:var(--ash-dim);text-transform:none;letter-spacing:0;}
.plan-per{font-size:.78rem;color:var(--ash-dim);margin-top:-.6rem;}
.plan-features{display:flex;flex-direction:column;gap:.55rem;margin:.3rem 0 .6rem;}
.plan-features li{display:flex;align-items:flex-start;gap:.6em;font-size:.92rem;color:var(--ash);}
.plan-features li svg{flex:0 0 auto;width:1.15em;height:1.15em;margin-top:.15em;color:var(--gold);}
.plan-card .btn{margin-top:auto;width:100%;}

.pack-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;}
@media(min-width:700px){.pack-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.pack-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.3rem;transition:border-color .25s;
}
.pack-row:hover{border-color:var(--gold-deep);}
.pack-row .n{font-family:var(--font-label);font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:1.3rem;}
.pack-row .p{text-align:right;}
.pack-row .p b{font-family:var(--font-display);font-size:1.3rem;color:var(--gold-2);display:block;}
.pack-row .p span{font-size:.72rem;color:var(--ash-dim);}

/* ============ EQUIPO ============ */
.coach-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;}
@media(min-width:680px){.coach-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1080px){.coach-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
.coach-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;text-align:center;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;}
.coach-card:hover{transform:translate(-3px,-5px);border-color:var(--gold-deep);box-shadow:6px 8px 0 rgba(0,0,0,.5);}
.coach-avatar{
  width:88px;height:88px;border-radius:0;clip-path:var(--notch);margin:0 auto 1.1rem;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(from 200deg,var(--gold-2),var(--purple),var(--gold-2));font-family:var(--font-display);font-size:1.7rem;color:#0b0b0d;
  position:relative;
}
.coach-avatar::before{content:'';position:absolute;inset:3px;clip-path:var(--notch);background:var(--panel);}
.coach-avatar span{position:relative;z-index:1;color:var(--gold-2);}
.coach-card h3{font-size:1.15rem;letter-spacing:.02em;margin-bottom:.2rem;color:var(--bone);}
.coach-role{font-family:var(--font-label);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--purple-text);margin-bottom:.8rem;}
.coach-bio{font-size:.9rem;color:var(--ash);margin-bottom:1.1rem;}
.coach-social{display:inline-flex;gap:.6rem;justify-content:center;}
.coach-social a{width:34px;height:34px;border:1px solid var(--line);border-radius:3px;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s;}
.coach-social a:hover{border-color:var(--gold);color:var(--gold);}
.coach-social svg{width:15px;height:15px;}

/* ============ GALERÍA ============ */
.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;grid-auto-rows:150px;}
@media(min-width:640px){.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:180px;}}
@media(min-width:1080px){.gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:210px;}}
.gallery-tile{
  position:relative;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;border:1px solid var(--line);
  display:flex;align-items:flex-end;padding:.9rem;text-align:left;background:var(--panel-2);
}
.gallery-tile.tall{grid-row:span 2;}
/* Der Video-Slide steht als erster und belegt einen 2x2-Block. Dahinter
   zwei hohe, eine breite und zwei einfache Kacheln: 4+2+2+2+1+1 = 12 Felder
   -- geht bei 4, 3 und 2 Spalten glatt auf, also keine Löcher im Raster.
   Wer Kacheln ändert, muss diese Rechnung neu aufmachen. */
.gallery-tile.feature{grid-column:span 2;grid-row:span 2;}
.gallery-tile.wide{grid-column:span 2;}
.play-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;z-index:1;color:var(--bone);pointer-events:none;transition:color .2s,transform .3s var(--ease);}
.gallery-tile:hover .play-badge{color:var(--gold);transform:translate(-50%,-50%) scale(1.08);}
.gallery-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.gallery-tile:hover img{transform:scale(1.08);}
.gallery-tile::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.88));}
.gallery-tile span{position:relative;z-index:1;font-family:var(--font-label);font-size:.78rem;letter-spacing:.03em;color:var(--bone);text-shadow:0 1px 3px rgba(0,0,0,.9);}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,6,8,.92);display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;pointer-events:none;transition:opacity .3s var(--ease);}
.lightbox.is-open{opacity:1;pointer-events:auto;}
.lightbox-inner{max-width:min(820px,94vw);width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.lightbox-stage{position:relative;}
.lightbox-media{position:relative;background:var(--ink);display:flex;align-items:center;justify-content:center;min-height:200px;}
.lightbox-media img,.lightbox-media video{display:block;max-width:100%;max-height:74vh;width:auto;height:auto;}
/* Blätter-Pfeile liegen über dem Foto, damit man die Galerie durchgehen
   kann, ohne die Ansicht zwischendurch zu schließen */
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:3px;background:rgba(11,11,13,.62);color:var(--bone);transition:border-color .2s,color .2s,background .2s;}
.lightbox-nav:hover{border-color:var(--gold);color:var(--gold);background:rgba(11,11,13,.88);}
.lightbox-nav svg{width:16px;height:16px;}
.lightbox-nav.prev{left:.7rem;}
.lightbox-nav.next{right:.7rem;}
.lightbox-cap{padding:1.2rem 1.4rem;font-family:var(--font-label);letter-spacing:.03em;color:var(--bone);display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.lightbox-cap #lightboxCap{flex:1;}
.lightbox-count{color:var(--ash);font-size:.78rem;flex:none;}
.lightbox-close{width:38px;height:38px;border:1px solid var(--line);border-radius:3px;display:flex;align-items:center;justify-content:center;flex:none;}
.lightbox-close svg{width:16px;height:16px;}

/* ============ CLASES GRUPALES ============ */
/* Eine Reihe gleich großer Kacheln je Tagesgruppe. Nebeneinander gestellte
   Karten liefen bei 5 gegen 2 Klassen auf sehr ungleiche Höhen hinaus. */
.clases-bloque{margin-bottom:1.8rem;}
.clases-bloque:last-of-type{margin-bottom:0;}
.clases-dia{font-family:var(--font-label);font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem;}
.clases-fila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;}
@media(min-width:640px){.clases-fila{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:1080px){.clases-fila{grid-template-columns:repeat(5,minmax(0,1fr));}}
.clase-item{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.15rem 1.25rem;display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;
  transition:border-color .2s var(--ease);
}
.clase-item:hover{border-color:var(--line-strong);}
.clase-item .hora{font-family:var(--font-label);font-size:1.08rem;font-weight:600;color:var(--bone);letter-spacing:.02em;white-space:nowrap;}
/* Farbcode: Gold = Boxeo, Lila = Funcional -- beide über Tokens, der Text
   nutzt die kontraststarken Varianten (--gold-2 / --purple-text) */
.clase{font-family:var(--font-label);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:.4em .85em;clip-path:var(--notch);white-space:nowrap;}
.clase.boxeo{background:rgba(205,164,92,.14);border:1px solid var(--gold-deep);color:var(--gold-2);}
.clase.funcional{background:rgba(109,40,217,.18);border:1px solid var(--purple);color:var(--purple-text);}
.clases-nota{margin-top:1rem;color:var(--ash-dim);font-size:.88rem;}
.avisos{margin-top:2.6rem;}
.avisos-titulo{font-family:var(--font-label);font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;}
/* Solange nichts ansteht, füllt der Hinweis die ganze Breite -- als schmale
   Einzelkarte in einem Dreierraster sah er nach Fehler aus. */
/* .event-card mitschreiben: sonst gewinnt dessen später notierte
   flex-direction:column und der Hinweis steht zentriert statt nebeneinander */
.event-card.avisos-vacio{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;}
.avisos-vacio h3{font-family:var(--font-label);font-size:1.02rem;letter-spacing:.03em;font-weight:600;color:var(--bone);text-transform:none;margin-bottom:.4rem;}
.avisos-vacio p{max-width:62ch;}
.avisos-vacio .btn{flex:none;}

/* ============ EVENTOS ============ */
.events-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;}
@media(min-width:760px){.events-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.event-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;display:flex;flex-direction:column;gap:.9rem;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;}
/* Muss sein: das display:flex oben schlägt sonst das hidden-Attribut, und
   der Leer-Hinweis stünde neben dem noch gültigen Termin. */
.event-card[hidden]{display:none;}
.event-card:hover{transform:translate(-3px,-5px);border-color:var(--gold-deep);box-shadow:6px 8px 0 rgba(0,0,0,.5);}
.event-date{display:flex;align-items:center;gap:.9rem;}
.event-date .box{width:56px;height:56px;border-radius:0;clip-path:var(--notch);background:var(--gold);color:#171105;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-label);line-height:1;flex:none;}
.event-date .box b{font-family:var(--font-display);font-size:1.35rem;}
.event-date .box small{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;}
.event-card h3{font-size:1.15rem;color:var(--bone);letter-spacing:.01em;}
.event-card p{font-size:.9rem;color:var(--ash);flex:1;}
/* Preis im Ankündigungstext hervorheben */
.event-card p strong{color:var(--gold-2);font-weight:600;}

/* ============ RESEÑAS ============ */
.testi-wrap{max-width:760px;margin:0 auto;position:relative;}
.testi-track-outer{overflow:hidden;border-radius:var(--radius);}
.testi-track{display:flex;transition:transform .55s var(--ease);}
.testi-slide{min-width:100%;background:var(--panel);border:1px solid var(--line);padding:2.6rem 2.2rem;text-align:center;}
.testi-stars{color:var(--gold);font-size:1.1rem;letter-spacing:.15em;margin-bottom:1rem;}
.testi-quote{font-family:var(--font-label);font-size:1.15rem;line-height:1.55;color:var(--gold-2);margin-bottom:1.3rem;}
.testi-name{font-size:.85rem;color:var(--purple-text);letter-spacing:.03em;font-weight:600;}
.testi-controls{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:1.6rem;}
.testi-arrow{width:42px;height:42px;border:1px solid var(--line-strong);border-radius:3px;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s;}
.testi-arrow:hover{border-color:var(--gold);color:var(--gold);}
.testi-arrow svg{width:16px;height:16px;}
/* Links auf das echte Google-Profil. Linksbündig wie jede andere Sektion --
   zentriert wirkte der Abschnitt neben den übrigen schief. */
.resenas-google{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem;}
.testi-dots{display:flex;gap:.5rem;}
.testi-dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong);transition:background .25s,transform .25s;}
.testi-dot.is-active{background:var(--gold);transform:scale(1.3);}

/* ============ UBICACIÓN ============ */
.loc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;}
@media(min-width:900px){.loc-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);}}
.loc-card{background:var(--ink-soft);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;display:flex;flex-direction:column;gap:1.3rem;}
.loc-row{display:flex;gap:1rem;align-items:flex-start;}
.loc-row svg{width:20px;height:20px;color:var(--gold);flex:none;margin-top:.15rem;}
.loc-row h4{font-family:var(--font-label);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bone);margin-bottom:.25rem;}
.loc-row p, .loc-row a{font-size:.92rem;color:var(--ash);}
.loc-row a:hover{color:var(--gold);}
/* Öffnungszeiten als kleine Tabelle: Tage links, Uhrzeiten rechts, mehrere
   Zeitfenster untereinander. Als Fließtext brach das auf dem Handy mitten
   in einer Uhrzeit um. */
.loc-horario{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.45rem 1.2rem;font-size:.9rem;margin-top:.15rem;}
.loc-horario dt{font-family:var(--font-label);letter-spacing:.06em;text-transform:uppercase;font-size:.76rem;color:var(--ash-dim);padding-top:.15rem;white-space:nowrap;}
.loc-horario dd{display:flex;flex-direction:column;gap:.2rem;color:var(--bone);}
.loc-horario dd span{white-space:nowrap;}
.loc-card .btn{align-self:flex-start;margin-top:.4rem;}
.map-frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);min-height:320px;}
.map-frame iframe{width:100%;height:100%;min-height:320px;border:0;filter:grayscale(.25) contrast(1.05);}

/* ============ FOOTER ============ */
footer{background:var(--ink-soft);border-top:1px solid var(--line);padding:4rem 0 0;}
.footer-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.6rem;padding-bottom:3rem;}
@media(min-width:760px){.footer-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,.9fr);}}
.footer-brand img{height:34px;margin-bottom:1rem;}
.footer-brand p{color:var(--ash-dim);font-size:.88rem;max-width:32ch;}
.footer-col h5{font-family:var(--font-label);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;}
.footer-col a,.footer-col p{display:block;color:var(--ash);font-size:.9rem;margin-bottom:.65rem;}
.footer-col a:hover{color:var(--bone);}
.footer-social{display:flex;gap:.7rem;margin-top:.6rem;}
.footer-social a{width:36px;height:36px;border:1px solid var(--line);border-radius:3px;display:flex;align-items:center;justify-content:center;}
.footer-social a:hover{border-color:var(--gold);color:var(--gold);}
.footer-social svg{width:16px;height:16px;}
.footer-bottom{border-top:1px solid var(--line);padding:1.4rem 0;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.78rem;color:var(--ash-dim);}
.footer-stripe{height:14px;background:repeating-linear-gradient(-45deg,var(--gold) 0 18px,#0b0b0d 18px 36px);}

/* floating whatsapp */
.fab{position:fixed;right:1.2rem;bottom:1.2rem;z-index:90;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#25d366,#1ea952);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.6);}
.fab::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid rgba(37,211,102,.5);animation:fabPulse 2.4s infinite;}
.fab svg{width:28px;height:28px;color:#fff;position:relative;}
@keyframes fabPulse{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.5);opacity:0;}}

.to-top{position:fixed;left:1.2rem;bottom:1.2rem;z-index:90;width:44px;height:44px;border-radius:3px;
  background:var(--panel-2);border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .3s,transform .3s;}
.to-top.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.to-top svg{width:16px;height:16px;}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1;transform:none;}
}