/*
Theme Name: Hoverstrat
Theme URI: https://hoverstrat.com
Author: Hoverstrat Media
Description: Tema a medida de Hoverstrat Media. Página única con animaciones, preparada para plugins (SEO, caché, Tag Manager).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hoverstrat
*/
@font-face{font-family:'Gatty';src:url('assets/fonts/Gatty-ExtraBold.woff2') format('woff2'),url('assets/fonts/Gatty-ExtraBold.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Gatty';src:url('assets/fonts/Gatty-ExtraBoldIt.woff2') format('woff2'),url('assets/fonts/Gatty-ExtraBoldIt.otf') format('opentype');font-weight:800;font-style:italic;font-display:swap}

:root{
  --bg:#050609;
  --surface:#13161E;
  --surface-2:#191C25;
  --ink:#F5F0F0;
  --muted:#A69A9C;
  --dim:#4A3F41;
  --line:rgba(245,240,240,.10);
  --line-strong:rgba(245,240,240,.22);
  --orange:#D92344;
  --orange-hover:#F23078;
  --dark-on-orange:#140502;
  /* tarjeta de "Ventaja competitiva", cintas y fondo del bloque de contacto */
  --accent2:#FF3D0A;
  --accent2-soft:#FF9A6B;
  --tile:#D92344;
  --ribbon-dark:#7A0A16;
  --cta-bg:var(--bg);
  /* capas de la animación de cuadrados (main.js las lee de aquí) */
  --mx-red:#C21E3C;
  --mx-orange:#D92344;
  --mx-amber:#F23078;
  --mx-deep:#8C0E1A;
  --mx-burnt:#B01838;
  --mx-maroon:#4A0A10;
  --mx-shadow:#260101;
  --mx-dusk:#12131A;
  --mx-night:#07080C;
  --f-display:'Gatty','Arial Narrow',Impact,sans-serif;
  --f-body:'Geist',system-ui,-apple-system,sans-serif;
  --f-mono:'Geist Mono',ui-monospace,'SF Mono',monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --skew:-12deg;
  --cut:18px;
  --iso:url('assets/img/iso.png');
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}

.iso{display:inline-block;width:1em;height:.685em;background:currentColor;-webkit-mask:var(--iso) center/contain no-repeat;mask:var(--iso) center/contain no-repeat;flex-shrink:0}
.mono{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.accent{color:var(--orange)}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent2-soft);margin-bottom:22px}
.eyebrow .iso{font-size:1.05rem;color:var(--orange)}
h1,h2,h3,.display{font-family:var(--f-display);font-weight:800;line-height:.92;letter-spacing:.005em}
h2{font-size:clamp(2.6rem,5.1vw,4.25rem)}
.lead{color:var(--muted);font-size:1.08rem;max-width:560px}

.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--orange);z-index:90}

/* ---------- botones ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;padding:13px 25px;border:0;background:none;cursor:pointer;
  font-family:var(--f-body);font-weight:500;font-size:.98rem;text-decoration:none;white-space:nowrap;
  transition:transform .35s var(--ease),color .25s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--skew));border-radius:7px;
  background:var(--btn-bg,transparent);box-shadow:inset 0 0 0 1px var(--btn-line,transparent);transition:background .25s,box-shadow .25s}
.btn svg{width:17px;height:17px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translate(3px,-3px)}
.btn-primary{color:#fff;--btn-bg:var(--orange)}
.btn-line{color:var(--ink);--btn-line:var(--line-strong)}
.btn-line:hover{--btn-line:var(--ink)}
.btn-dark{color:var(--ink);--btn-bg:var(--bg)}
.btn-dark:hover{--btn-bg:#1C2230}

/* esquina cortada en diagonal, como la punta del isotipo */
.cut{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);border-top-right-radius:0!important}
.cut::after{content:"";position:absolute;top:-1px;right:-1px;width:var(--cut);height:var(--cut);pointer-events:none;background:var(--cut-line,var(--line));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cline x1='0' y1='0' x2='18' y2='18' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cline x1='0' y1='0' x2='18' y2='18' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* ---------- navegación ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;height:72px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 max(28px,calc((100% - 1240px) / 2 + 28px));
  background:transparent;border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s,backdrop-filter .35s,-webkit-backdrop-filter .35s}
.nav.scrolled{background:rgba(5,6,9,.68);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.nav .logo img{height:32px;width:auto}
.nav ul{display:flex;gap:30px;list-style:none}
.nav ul a{color:var(--muted);text-decoration:none;font-size:.92rem;transition:color .25s}
.nav ul a:hover{color:var(--ink)}
.nav .btn{padding:9px 17px;font-size:.9rem}

/* ---------- hero ---------- */
.hero{position:relative;min-height:calc(100svh - 62px);display:flex;flex-direction:column;justify-content:center;padding:110px 0 0;overflow:hidden}
.hero .dots{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;opacity:.8}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero-grid{display:grid;grid-template-columns:1.9fr 1fr;gap:60px;align-items:end;padding-bottom:56px}
.tag{display:inline-flex;align-items:center;gap:10px;margin-bottom:30px;color:var(--accent2-soft)}
.tag .iso{font-size:1.05rem;color:var(--orange)}
.hero h1{font-size:clamp(3.2rem,min(6.3vw,9svh),5.8rem);margin-bottom:26px}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .line span{display:inline-block;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
.hero h1 .line:nth-child(2) span{animation-delay:.1s}
.hero h1 .line:nth-child(3) span{animation-delay:.2s}
@keyframes rise{to{transform:none}}
.hero h1 em{font-style:italic;color:var(--orange);padding-right:.06em}
.hero p.sub{color:var(--muted);font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:500px;margin-bottom:38px;opacity:0;animation:fade 1s .45s var(--ease) forwards}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:fade 1s .6s var(--ease) forwards}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.index{list-style:none;border-top:1px solid var(--line);opacity:0;animation:fade 1s .75s var(--ease) forwards}
.index a{display:grid;grid-template-columns:44px 1fr 20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .35s var(--ease),color .25s}
.index .mono{color:var(--accent2);transition:color .25s}
.index b{font-weight:500;font-size:1.05rem}
.index svg{width:18px;height:18px;stroke:var(--dim);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s,transform .35s var(--ease)}
.index a:hover{padding-left:10px;color:var(--orange)}
.index a:hover .mono{color:var(--orange)}
.index a:hover svg{stroke:var(--orange);transform:translate(2px,-2px)}


/* ---------- franjas ---------- */
.marquee{overflow:hidden;white-space:nowrap}
.track{display:flex;width:max-content;animation:scroll var(--speed,60s) linear infinite}
.track.rev{animation-direction:reverse}
.group{display:flex;align-items:center;flex-shrink:0}
@keyframes scroll{to{transform:translateX(-50%)}}
.ticker{border-bottom:1px solid var(--line);padding:17px 0}
.ticker .group span{font-family:var(--f-mono);font-size:1.05rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);padding:0 30px}
.px{display:inline-block;width:5.95px;height:7px;flex-shrink:0;background:var(--orange);transform:skewX(var(--skew))}
.ticker .px{background:var(--accent2)}
.platforms{padding:38px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.platforms .group span{font-family:var(--f-display);font-size:clamp(2.4rem,5vw,4.2rem);line-height:1;padding:0 34px;color:#454B5C;transition:color .3s}
.platforms .group span:hover{color:var(--ink)}
.platforms .px{width:9.35px;height:11px;background:var(--dim)}

/* ---------- secciones ---------- */
section{position:relative}
.pad{padding:150px 0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:64px}
.head h2{max-width:720px}

/* servicios */
.services{overflow:hidden}
.services > .wrap{position:relative;z-index:1}
.ribbons{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6}
.ribbons svg{position:absolute;width:140%;left:-20%;top:28%;height:auto;overflow:visible;animation:sway 13s ease-in-out infinite alternate}
@keyframes sway{to{transform:translate(6%,-4%) rotate(-3deg)}}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{position:relative;border-radius:4px;padding:26px 26px 24px;min-height:330px;display:flex;flex-direction:column;background:rgba(19,22,30,.72);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);border:1px solid var(--line);
  transition:transform .5s var(--ease),border-color .3s}
.card:hover{transform:translateY(-6px);border-color:var(--orange);--cut-line:var(--orange)}
.card-top{display:flex;justify-content:space-between;align-items:center}
.card-top .mono{color:var(--accent2)}
.ico{width:50px;height:50px;border-radius:3px;display:grid;place-items:center;border:1px solid var(--line-strong);transition:border-color .3s}
.card:hover .ico{border-color:var(--orange)}
.ico svg{width:23px;height:23px;fill:none;stroke:var(--orange);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:2.1rem;margin:40px 0 12px}
.card p{color:var(--muted);font-size:.96rem;margin-bottom:20px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.tags span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;padding:5px 10px;border-radius:2px;border:1px solid var(--line);color:var(--muted)}

/* misión */
.mission{padding:170px 0 150px;text-align:center}
.mission .statement{font-family:var(--f-display);font-size:clamp(3rem,7.6vw,7.3rem);line-height:.9;max-width:1180px;margin:0 auto;text-wrap:balance}
.mission .w{color:#22262F;transition:color .5s var(--ease)}
.mission .w.on{color:var(--ink)}
.mission .w.hot.on{color:var(--orange)}

/* nosotros */
.about-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}
.about p.lead{margin:26px 0 44px}
.caps{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.cap{background:var(--bg);padding:26px 24px;transition:background .3s}
.cap:hover{background:var(--surface)}
.cap svg{width:22px;height:22px;fill:none;stroke:var(--orange);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.cap h4{font-weight:600;font-size:1.02rem;margin-bottom:6px}
.cap p{color:var(--muted);font-size:.9rem;line-height:1.55}

.visual{position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.sun{position:absolute;left:50%;top:36%;width:78%;aspect-ratio:1200/822;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:3px}
.slice{flex:1;overflow:hidden;position:relative;animation:slide 7s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.55s)}
.slice canvas{position:absolute;left:0;display:block;width:100%;height:calc(900% + 24px);top:calc(var(--i) * -100% - var(--i) * 3px)}
@keyframes slide{from{transform:translateX(calc(var(--a) * -1px))}to{transform:translateX(calc(var(--a) * 1px))}}
.vcard{position:absolute;left:7%;right:7%;bottom:6%;border-radius:3px;padding:26px;background:var(--bg);border:1px solid var(--line)}
.vcard .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;color:var(--muted)}
.vcard .row i{display:block;width:40%;height:1px;background:var(--line-strong)}
.vcard .display{font-size:clamp(2rem,3.4vw,2.7rem);margin-bottom:18px}
.vcard ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.vcard li{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:2px;border:1px solid var(--line);color:var(--muted)}

/* ventaja (bento) */
.bento{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:16px}
.tile{position:relative;border-radius:4px;padding:30px;background:var(--surface);border:1px solid var(--line);min-height:300px;display:flex;flex-direction:column;
  transition:border-color .3s,transform .5s var(--ease)}
.tile:hover{border-color:var(--orange);transform:translateY(-5px);--cut-line:var(--orange)}
.tile h3{font-size:2rem;margin-top:auto;margin-bottom:10px}
.tile p{color:var(--muted);font-size:.95rem;max-width:340px}
.tile-hero{grid-row:span 2;background:var(--tile);border-color:var(--tile);color:#fff;justify-content:space-between}
.tile-hero:hover{border-color:var(--tile)}
.tile-hero .dots{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.5;pointer-events:none}
.tile-hero > :not(.dots){position:relative;z-index:1}
.tile-hero .mono{color:rgba(255,255,255,.75)}
.tile-hero .display{font-size:clamp(2.6rem,4.6vw,4.2rem);color:#fff;max-width:none}
.tile-hero .btn-dark{align-self:flex-start;margin-top:28px}
.viz{height:120px;margin-bottom:26px}
.viz svg{width:100%;height:100%;overflow:visible}
.flow path{stroke-dasharray:6 8;animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-28}}
.bars{display:flex;align-items:flex-end;gap:10px;height:100%}
.bars i{flex:1;border-radius:2px;background:var(--orange);height:var(--h);transform:scaleY(.08);transform-origin:bottom;transition:transform 1.2s var(--ease)}
.bars i:nth-child(2n){background:#2A3040}
.in .bars i{transform:none}
.bars i:nth-child(2){transition-delay:.08s}.bars i:nth-child(3){transition-delay:.16s}.bars i:nth-child(4){transition-delay:.24s}.bars i:nth-child(5){transition-delay:.32s}.bars i:nth-child(6){transition-delay:.4s}
.rank{display:flex;flex-direction:column;justify-content:center;gap:10px;height:100%}
.rank i{display:block;height:16px;width:var(--w);border-radius:2px;background:#2A3040;transform:scaleX(.05);transform-origin:left;transition:transform 1.1s var(--ease)}
.rank i:first-child{background:var(--orange)}
.rank i:nth-child(2){transition-delay:.1s}.rank i:nth-child(3){transition-delay:.2s}.rank i:nth-child(4){transition-delay:.3s}
.in .rank i{transform:none}
.cycle text{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;fill:var(--muted)}
.cycle .spin{transform-origin:150px 62px;animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* contacto */
.cta{padding:40px 0 90px;overflow:hidden}
#contacto,#ventaja{scroll-margin-top:90px}
@media (min-width:761px){#servicios{scroll-margin-top:-33px}#servicios .head{margin-bottom:44px}#nosotros{scroll-margin-top:-34px}#ventaja{scroll-margin-top:77px}}
.cta-box.cut{--cut:46px;--cut-line:var(--line-strong)}
.cta-box.cut::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cline x1='0' y1='0' x2='46' y2='46' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cline x1='0' y1='0' x2='46' y2='46' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.cta-box{position:relative;border-radius:4px;padding:90px 60px;display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:end;background:var(--cta-bg);border:1px solid var(--line);color:var(--ink)}
.cta-box .ribbons{opacity:.55;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.3),rgba(0,0,0,.45) 45%,#000 85%);mask-image:linear-gradient(90deg,rgba(0,0,0,.3),rgba(0,0,0,.45) 45%,#000 85%)}
.cta-box .ribbons svg{top:8%;width:120%;left:-10%}
.cta-box > :not(.ribbons){position:relative;z-index:1}
.cta-box h2{font-size:clamp(2.8rem,5.3vw,4.75rem)}
.cta-box .eyebrow{color:var(--accent2-soft)}
.cta-box .eyebrow .iso{color:var(--orange)}
.contact{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.contact p{font-size:1.05rem;margin-bottom:10px;max-width:340px;color:var(--muted)}
.chip{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:12px;padding:12px 24px;text-decoration:none;font-weight:500;color:var(--ink)}
.chip::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--skew));border-radius:7px;background:rgba(5,6,9,.6);box-shadow:inset 0 0 0 1px var(--line-strong);transition:background .25s,box-shadow .25s}
.chip:hover::before{background:rgba(245,240,240,.06);box-shadow:inset 0 0 0 1px var(--ink)}
.chip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* footer */
footer{border-top:1px solid var(--line);padding:12px 0 0;overflow:hidden}
.foot{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:center}
.foot nav{display:flex;gap:28px;flex-wrap:wrap}
.foot nav a{color:var(--muted);text-decoration:none;font-size:.95rem;transition:color .25s}
.foot nav a:hover{color:var(--ink)}
.socials{display:flex;gap:10px}
.socials a{width:44px;height:44px;border-radius:2px;transform:skewX(var(--skew));display:grid;place-items:center;border:1px solid var(--line);transition:border-color .25s,background .25s}
.socials a:hover{border-color:var(--orange);background:var(--orange)}
.socials svg{width:17px;height:17px;fill:var(--ink);transform:skewX(calc(var(--skew) * -1))}
.legal{margin-top:12px;border-top:1px solid var(--line);color:var(--dim);position:relative;background:var(--bg)}
.legal .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:25px;padding-bottom:25px}

/* aparición al hacer scroll */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:50px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr;gap:60px}
  .visual{max-width:560px;width:100%;margin:0 auto}
  .bento{grid-template-columns:1fr 1fr}
  .tile-hero{grid-row:auto;grid-column:span 2;min-height:340px}
  .cta-box{grid-template-columns:1fr;padding:70px 40px}
}
@media (max-width:760px){
  .visual{aspect-ratio:auto;display:flex;flex-direction:column;padding-top:48px}
  .sun{position:relative;left:auto;top:auto;transform:none;width:80%;margin:0 auto 36px}
  .vcard{position:relative;left:auto;right:auto;bottom:auto;margin:0 14px 14px}
  .vcard .row i{width:22%}
  .ribbons svg{width:340%;left:-120%;top:32%}
  .cta-box .ribbons svg{width:320%;left:-110%;top:38%}
  footer{padding-top:28px}
  .foot{flex-direction:column;align-items:center;gap:22px}
  .foot nav{display:none}
  .legal{margin-top:28px}
  .legal .wrap{justify-content:center;text-align:center;gap:8px}
  .wrap{padding:0 20px}
  .nav ul{display:none}
  .nav{padding:0 20px;height:66px}
  .hero{padding-top:101px}
  .hero-grid{padding-bottom:24px;gap:32px}
  .index a{padding:13px 0}
  .ticker{padding-top:10px;padding-bottom:20px}
  .pad{padding:100px 0}
  .cards,.caps,.bento{grid-template-columns:1fr}
  .tile-hero{grid-column:auto}
  .card{min-height:0}
  .card h3{margin-top:44px}
  .mission{padding:110px 0}
  .cta-box{padding:56px 26px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}
  .track{animation:none}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* WordPress: deja espacio a la barra de administración cuando hay sesión iniciada */
.admin-bar .nav{top:32px}
@media (max-width:782px){.admin-bar .nav{top:46px}}

/* ---------- botón volver arriba (aparece al llegar al final) ---------- */
.to-top{position:fixed;right:28px;bottom:28px;z-index:80;isolation:isolate;width:46px;height:46px;display:grid;place-items:center;border:0;background:none;color:var(--ink);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s}
.to-top::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--skew));border-radius:7px;background:rgba(5,6,9,.6);box-shadow:inset 0 0 0 1px var(--line-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:box-shadow .25s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover::before{box-shadow:inset 0 0 0 1px var(--orange)}
.to-top svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.to-top:hover svg{transform:translateY(-2px)}
@media (max-width:760px){.to-top{right:16px;bottom:16px;width:42px;height:42px}.legal{padding-bottom:64px}}