/* Componentes reutilizables: botones, selectores, loader, capa de transición, cursor y apariciones. */

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.skip{
  position:fixed;
  left:16px;
  top:-80px;
  z-index:400;
  background:var(--coral);
  color:#1a0d10;
  padding:10px 16px;
  border-radius:8px;
  font-weight:600;
  text-decoration:none;
}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px));}
.loader{display:none;}
.js .loader{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:radial-gradient(50% 45% at 70% 30%, rgba(141,107,255,.25), transparent 70%),
    radial-gradient(45% 40% at 30% 75%, rgba(255,106,85,.2), transparent 70%),
    var(--bg);
  clip-path:inset(0 0 0 0);
  transition:clip-path .6s var(--ease-io);
}
.js.no-loader .loader{display:none;}
.loader.done{clip-path:inset(0 0 100% 0);}
.loader-name{
  display:flex;
  gap:.28em;
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800;
  font-size:clamp(2.4rem,8vw,5rem);
  letter-spacing:-.025em;
  line-height:1;
}
.loader-name span{display:inline-block; overflow:hidden; padding-bottom:.1em;}
.loader-name span i{display:inline-block; font-style:normal; transform:translateY(110%); animation:ld-up .9s var(--ease) forwards;}
.loader-name span:nth-child(2) i{animation-delay:.09s;}
.loader-role{margin-top:14px; color:var(--coral); font-weight:600; opacity:0; animation:ld-fade .6s .35s forwards;}
.loader-track{margin-top:36px; width:min(320px,70vw);}
.loader-bar{height:2px; background:var(--line); overflow:hidden;}
.loader-bar i{
  display:block;
  height:100%;
  transform-origin:left;
  transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--coral),var(--violet));
}
.loader-pct{margin-top:10px; font-size:.8rem; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums;}
@keyframes ld-up{to{transform:none;}}
@keyframes ld-fade{to{opacity:1;}}
.cursor-dot,
.cursor-ring{
  position:fixed;
  left:0;
  top:0;
  pointer-events:none;
  z-index:250;
  opacity:0;
  transition:opacity .3s;
}
.has-cursor .cursor-dot,
.has-cursor .cursor-ring{
  opacity:1;
}
.cursor-dot{width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--coral);}
.cursor-ring{
  width:36px;
  height:36px;
  margin:-18px 0 0 -18px;
  border-radius:50%;
  border:1px solid rgba(246,241,238,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .3s, border-color .3s;
}
.cursor-ring.is-link{width:54px; height:54px; margin:-27px 0 0 -27px; border-color:var(--coral); background-color:rgba(255,106,85,.08);}
.cursor-ring.is-label{width:84px; height:84px; margin:-42px 0 0 -42px; background-color:var(--coral); border-color:var(--coral);}
.cursor-label{font-size:.78rem; font-weight:700; color:#1a0d10; opacity:0; transition:opacity .2s;}
.is-label .cursor-label{opacity:1;}
.cursor-hidden .cursor-dot,
.cursor-hidden .cursor-ring{
  opacity:0;
}
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.js .reveal.in{opacity:1; transform:none;}
.js .stagger > *{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--i,0) * 80ms);
}
.js .stagger.in > *{opacity:1; transform:none;}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  padding:13px 22px;
  border-radius:100px;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:background .25s, border-color .25s, color .25s, transform .35s var(--ease);
}
.btn-primary{background:var(--coral); color:#1a0d10;}
.btn-ghost{border-color:var(--line-strong); color:var(--ink); background:transparent;}
.btn-sm{padding:8px 16px; font-size:.85rem;}
.icon-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.05rem;
  transition:border-color .2s, background .2s, transform .2s;
}
.icon-btn:hover{border-color:var(--coral); background:rgba(255,106,85,.08);}
.icon-btn:active{transform:scale(.94);}
.lang,
.seg{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:100px;
  padding:3px;
}
.lang button,
.seg button{
  font-size:.8rem;
  font-weight:600;
  background:none;
  border:0;
  color:var(--muted);
  padding:6px 11px;
  border-radius:100px;
  cursor:pointer;
  min-width:38px;
  min-height:32px;
  transition:background .25s, color .25s;
}
.lang button:hover,
.seg button:hover{
  color:var(--ink);
}
.lang button[aria-pressed="true"],
.seg button[aria-pressed="true"]{
  background:var(--ink);
  color:var(--bg);
}
.motion-btn{width:38px; height:38px; font-size:.72rem; letter-spacing:-.08em; color:var(--muted);}
.motion-btn[aria-pressed="true"]{border-color:var(--coral); color:var(--coral); letter-spacing:0;}
.dot{width:8px; height:8px; border-radius:50%; background:#3ddc97; animation:pulse 2.2s ease-out infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,151,.55);}100%{box-shadow:0 0 0 12px rgba(61,220,151,0);}}
.fx{
  position:fixed;
  z-index:160;
  display:none;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  pointer-events:none;
  background:var(--fxbg,#1a1240);
  border-radius:18px;
}
.fx-label{
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  text-align:center;
  padding:24px;
  opacity:0;
  color:#fff;
  text-wrap:balance;
  font-size:clamp(1.6rem,4vw,2.8rem);
}
.fx.light .fx-label{color:var(--lav-ink);}
.seg button:disabled{opacity:.35; cursor:not-allowed;}
a.btn[href*="linkedin.com"]{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  gap:8px;
  transition:transform .45s var(--spring), box-shadow .35s ease, background-color .3s, color .3s, border-color .3s;
}
a.btn[href*="linkedin.com"]::after{display:inline-block; font-weight:700; transition:transform .45s var(--spring);}
a.btn[href*="linkedin.com"]::before{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .8s ease;
}
a.btn[href*="linkedin.com"]:hover::after,
a.btn[href*="linkedin.com"]:focus-visible::after{
  transform:translate(3px,-3px);
}
a.btn[href*="linkedin.com"]:hover::before,
a.btn[href*="linkedin.com"]:focus-visible::before{
  transform:translateX(120%);
}
a.btn-ghost[href*="linkedin.com"]:hover,
a.btn-ghost[href*="linkedin.com"]:focus-visible{
  box-shadow:0 18px 38px -16px rgba(246,241,238,.45);
}
a.btn[href*="linkedin.com"]::before,
a.btn[href*="linkedin.com"]::after{
  content:none;
}
a.btn[href*="linkedin.com"],
a.btn[href*="linkedin.com"]:hover,
a.btn[href*="linkedin.com"]:focus-visible{
  transform:none;
}
a.btn[href*="linkedin.com"]:hover,
a.btn[href*="linkedin.com"]:focus-visible{
  box-shadow:none;
}
.btn-primary:hover,
.btn-primary:focus-visible{
  background:#ffa091;
}
.btn-ghost:hover,
.btn-ghost:focus-visible,
a.btn-ghost[href*="linkedin.com"]:hover,
a.btn-ghost[href*="linkedin.com"]:focus-visible{
  background:rgba(255,106,85,.16);
  border-color:var(--coral);
  color:var(--ink);
}
.view .btn-primary{background:var(--sec); color:#140c1a;}
.view .btn-primary:hover,
.view .btn-primary:focus-visible{
  background:color-mix(in srgb, var(--sec) 72%, #fff);
}
.view .btn-ghost:hover,
.view .btn-ghost:focus-visible{
  background:color-mix(in srgb, var(--sec) 16%, transparent);
  border-color:var(--sec);
  color:var(--ink);
}
a.btn-primary[href*="linkedin.com"]:hover,
a.btn-primary[href*="linkedin.com"]:focus-visible{
  background:#ffa091;
  box-shadow:none;
}
.view a.btn-ghost[href*="linkedin.com"]:hover,
.view a.btn-ghost[href*="linkedin.com"]:focus-visible{
  background:color-mix(in srgb, var(--sec) 16%, transparent);
  border-color:var(--sec);
  color:var(--ink);
}
.view a.btn-primary[href*="linkedin.com"]:hover,
.view a.btn-primary[href*="linkedin.com"]:focus-visible{
  background:color-mix(in srgb, var(--sec) 72%, #fff);
}
@media (max-width:380px){
  .lang button{min-width:32px; padding:6px 7px;}
}