/* ============ photoracer.tv/links ============ */
:root{--am:#ffe01b;--ne:#0b0b0b;--bl:#fff;--gr:#a8a8a8;--ve:#2BEE34;--borde:#262626;--sy:0}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--ne);color:var(--bl);min-height:100vh;overflow-x:hidden;
  background-image:radial-gradient(520px circle at var(--mx,50vw) var(--my,20vh),rgba(255,224,27,.07),transparent 60%);background-attachment:fixed}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--am);outline-offset:3px;border-radius:8px}

/* Hexágonos casi imperceptibles + líneas de velocidad */
.fondo-hex{position:fixed;inset:-10vh 0 -40vh;z-index:0;pointer-events:none;opacity:.055;transform:translate3d(0,calc(var(--sy) * -0.1px),0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1 L55 16.5 L55 47.5 L28 63 L1 47.5 L1 16.5 Z M28 63 L28 96 M1 96.5 L1 80 M55 96.5 L55 80' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
  background-size:56px 97px;-webkit-mask-image:radial-gradient(ellipse at 50% 35%,#000 30%,transparent 85%);mask-image:radial-gradient(ellipse at 50% 35%,#000 30%,transparent 85%)}
.velocidad{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.velocidad i{position:absolute;height:1px;width:26vw;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);left:-30vw;animation:raya 3s linear infinite;opacity:.45}
.velocidad i:nth-child(1){top:22%;animation-delay:.3s}.velocidad i:nth-child(2){top:41%;animation-delay:1.5s;width:16vw}
.velocidad i:nth-child(3){top:58%;animation-delay:.9s}.velocidad i:nth-child(4){top:74%;animation-delay:2.2s;width:20vw}.velocidad i:nth-child(5){top:89%;animation-delay:.6s;width:12vw}
@keyframes raya{to{transform:translateX(160vw)}}

/* Cabecera con la foto del pit lane de fondo */
.links{position:relative;z-index:1;padding:54px 0 30px}
.links::before{content:"";position:absolute;left:0;right:0;top:0;height:560px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,224,27,.16) 0%,rgba(11,11,11,.70) 45%,var(--ne) 100%),var(--fondo,none) 62% 25%/cover no-repeat;
  transform:translate3d(0,calc(var(--sy) * 0.25px),0)}
.cont{max-width:580px;margin:0 auto;padding:0 18px}
.perfil{text-align:center}
.perfil .foto{width:118px;height:118px;margin:0 auto;border-radius:50%;padding:3px;
  background:conic-gradient(from 200deg,var(--am),rgba(255,224,27,.15),var(--am));box-shadow:0 0 0 6px rgba(255,224,27,.10),0 0 40px rgba(255,224,27,.35)}
.perfil .foto img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--ne);background:#000}
.perfil h1{margin-top:16px;font-size:clamp(26px,7vw,34px);line-height:1.05;font-weight:900;text-transform:uppercase;letter-spacing:.01em;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.usuario{margin-top:6px;color:var(--am);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:7px}
.hexa{width:11px;height:12px;background:var(--am);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.bio{margin:12px auto 0;max-width:440px;color:#e6e6e6;font-size:15.5px;line-height:1.5;text-wrap:balance}

/* Redes */
.redes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:20px 0 26px}
.redes a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:1px solid #2e2e2e;background:rgba(20,20,20,.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:13.5px;font-weight:500;transition:border-color .2s,color .2s,transform .2s}
.redes a:hover{border-color:var(--am);color:var(--am);transform:translateY(-2px)}
.redes svg,.enlace svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.redes svg{width:17px;height:17px;stroke-width:1.8}

/* Botones */
.enlaces{list-style:none;display:flex;flex-direction:column;gap:12px}
.enlace{position:relative;display:flex;align-items:center;gap:14px;min-height:76px;padding:12px 14px 12px 12px;border-radius:18px;border:1px solid #2a2a2a;
  background:rgba(24,24,24,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .2s,border-color .2s,box-shadow .2s,background .2s;overflow:hidden}
.enlace:hover,.enlace:focus-visible{transform:translateY(-2px);border-color:rgba(255,224,27,.7);background:rgba(30,29,22,.94);
  box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,224,27,.25),0 0 24px rgba(255,224,27,.16)}
.enlace:active{transform:scale(.985)}
.mini{flex:none;width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,224,27,.10);border:1px solid rgba(255,224,27,.35);overflow:hidden;color:#ffec6b}
.mini.con-foto{background:#0d0d0d;border-color:#2a2a2a}
.mini img{width:100%;height:100%;object-fit:cover;display:block}
.mini svg{width:26px;height:26px;stroke-width:1.7}
.txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.enlace b{font-size:15.5px;font-weight:600;line-height:1.3}
.enlace small{font-size:13px;color:var(--gr);line-height:1.35}
.codigo{align-self:flex-start;margin-top:5px;font-style:normal;font-size:12px;color:var(--gr);border:1px dashed rgba(255,224,27,.6);border-radius:8px;padding:2px 8px}
.codigo strong{color:var(--am);font-weight:600;letter-spacing:.04em}
.flecha{flex:none;width:20px;height:20px;stroke:var(--gr)!important;stroke-width:2;transition:transform .2s,stroke .2s}
.enlace:hover .flecha{stroke:var(--am)!important;transform:translateX(3px)}

/* Destacados: amarillo con brillo que pasa */
.enlace.destacado{min-height:92px;border-color:rgba(255,224,27,.8);background:linear-gradient(135deg,rgba(255,224,27,.22),rgba(24,24,24,.94) 55%);
  box-shadow:0 0 0 1px rgba(255,224,27,.25),0 0 34px rgba(255,224,27,.18)}
.enlace.destacado b{font-size:17px;font-weight:800}
.enlace.destacado .mini{width:62px;height:62px;border-radius:16px;background:var(--am);color:var(--ne);border-color:var(--am)}
.enlace.destacado .mini svg{stroke-width:1.9}
.enlace.destacado .flecha{stroke:var(--am)!important}
.enlace.destacado::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-20deg);animation:brillo 4s 1.5s infinite}
@keyframes brillo{0%{left:-60%}35%,100%{left:130%}}
/* El de la Comunidad Alien lleva su verde */
.enlace.alien{border-color:rgba(43,238,52,.75);background:linear-gradient(135deg,rgba(43,238,52,.18),rgba(24,24,24,.94) 55%);box-shadow:0 0 0 1px rgba(43,238,52,.22),0 0 30px rgba(43,238,52,.16)}
.enlace.alien .mini{background:rgba(43,238,52,.12);border-color:rgba(43,238,52,.5);color:var(--ve)}
.enlace.alien.destacado .mini{background:var(--ve);color:var(--ne);border-color:var(--ve)}
.enlace.alien:hover{border-color:var(--ve);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 26px rgba(43,238,52,.25)}
.enlace.alien .flecha,.enlace.alien:hover .flecha{stroke:var(--ve)!important}

/* Entrada escalonada */
.aparece{opacity:0;transform:translateY(14px);animation:aparece .55s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0) * 70ms + 160ms)}
.perfil.aparece{animation-delay:0ms}.redes.aparece{animation-delay:80ms}
@keyframes aparece{to{opacity:1;transform:none}}

.aviso{position:fixed;left:50%;bottom:22px;z-index:30;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--am);color:var(--ne);font-weight:800;font-size:14px;border-radius:999px;padding:10px 18px;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:opacity .25s,transform .25s}
.aviso.ver{opacity:1;transform:translate(-50%,0)}

.pie{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 18px 36px;text-align:center;font-size:12.5px;color:#777}
.pie .marca{font-weight:900;font-size:15px;color:#fff;letter-spacing:.5px}.pie .marca span{color:var(--am)}
.pie .marca:hover{opacity:.85}

@media (max-width:420px){.links{padding-top:36px}.enlace b{font-size:15px}.enlace.destacado b{font-size:16px}}
@media (prefers-reduced-motion:reduce){.aparece{animation:none;opacity:1;transform:none}.enlace.destacado::after,.velocidad{display:none}.fondo-hex,.links::before{transform:none}}
