/* ===== LUSER · sitio completo: navegación, secciones, efectos ===== */
html { scroll-behavior: smooth; }
.view[hidden] { display: none; }
.view { animation: view-in .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(18px) scale(.985); } }

/* --- Navegación compacta --- */
.site-header { position: sticky; top: 0; z-index: 40; display: block; width: 100%; max-width: none; margin: 0; padding: 0;
  background: rgba(3,20,51,.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(155,233,255,.16); }
.nav-wrap { display: flex; align-items: center; gap: 22px; max-width: 1120px; height: 60px; margin: 0 auto; padding: 0 20px; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 1.05rem; text-decoration: none; flex: none; }
.brand img { height: 32px; width: auto; transition: transform .4s cubic-bezier(.3,1.8,.5,1); } .brand:hover img { transform: rotate(-12deg) scale(1.12); }
.main-nav { position: relative; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; height: 100%; }
.main-nav a { position: relative; z-index: 1; display: flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 10px;
  font: 600 .95rem "DM Sans", sans-serif; letter-spacing: 0; color: #b9d4e8; text-decoration: none; white-space: nowrap; transition: color .2s, background .2s; }
.main-nav a[hidden] { display: none; } .main-nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.main-nav a.is-active { color: #fff; background: none; }
.nav-blob { position: absolute; z-index: 0; top: auto; bottom: 0; left: 0; height: 3px; width: 40px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #ffe38f, #ffc23d);
  box-shadow: 0 0 12px rgba(255,211,107,.7); transition: transform .4s cubic-bezier(.3,1.4,.5,1), width .4s cubic-bezier(.3,1.4,.5,1), opacity .2s; }
.nav-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ip-chip, .user-chip, .tool-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; border: 1px solid rgba(155,233,255,.24); border-radius: 10px;
  background: rgba(34,184,245,.12); color: #e6f4ff; cursor: pointer; font: 600 .88rem "DM Sans", sans-serif; transition: background .2s, transform .25s cubic-bezier(.3,1.8,.5,1); }
.ip-chip { padding: 0 12px; } .ip-chip:hover, .user-chip:hover, .tool-btn:hover { background: rgba(34,184,245,.28); transform: translateY(-2px); }
.user-chip { padding: 0 12px 0 5px; text-align: left; } .user-chip.is-active { border-color: var(--gold); }
.user-chip img { width: 28px; height: 28px; border-radius: 8px; image-rendering: auto; background: rgba(0,0,0,.3); }
.user-chip span { display: grid; line-height: 1.1; } .user-chip b { font-size: .86rem; } .user-chip small { font-size: .72rem; color: #9fc0da; font-weight: 500; }
.tool-btn { justify-content: center; width: 38px; padding: 0; font-size: 1rem; } .nav-burger { display: none; }

/* --- Botones y utilidades (efecto gelatina) --- */
.btn-main, .btn-ghost { display: inline-block; padding: 13px 26px; border-radius: 14px; font: 800 1.1rem "Minecraft Standard", "DM Sans", sans-serif;
  text-decoration: none; cursor: pointer; border: 0; transition: transform .25s cubic-bezier(.3,1.8,.5,1), box-shadow .2s; }
.btn-main { color: #3a2300; background: linear-gradient(180deg, #ffe38f, #ffc23d); box-shadow: 0 5px 0 #b87400, 0 10px 24px rgba(255,194,61,.3); }
.btn-ghost { color: #fff; background: rgba(34,184,245,.2); border: 2px solid rgba(155,233,255,.45); }
.btn-main:hover, .btn-ghost:hover { transform: translateY(-4px) scale(1.06) rotate(-1.5deg); }
.btn-main:active, .btn-ghost:active { transform: translateY(2px) scale(.96); }
.glass { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 22px; box-shadow: var(--glass-shadow); padding: 26px; }
.eyebrow { margin: 0 0 6px; font: 700 .95rem "DM Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--foam); }
.block { margin-block: 56px; } .block > h2, .page-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 18px; }
.page-head { text-align: center; margin: 44px auto 20px; } .page-head p { font-size: 1.15rem; color: #cfe3f3; max-width: 640px; margin: 8px auto 0; }
.fine { font-size: .9rem; color: var(--muted); }

/* --- Revelado al hacer scroll --- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* --- Frase animada y mascota --- */
.tagline-section { margin-block: 38px; text-align: center; }
.tagline { font: 700 clamp(1.4rem, 4vw, 2.3rem) "Minecraft Standard", "DM Sans", sans-serif; margin: 0; color: #fff; }
.typed { color: var(--gold); text-shadow: 0 0 18px rgba(255,211,107,.5); }
.caret { color: var(--aqua); animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } }
.about { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 40px; align-items: center; margin-block: 56px; }
.about-art { position: relative; display: grid; place-items: center; }
.mascot { width: min(260px, 70%); filter: drop-shadow(0 0 26px rgba(34,184,245,.6)); animation: lu-float 4.5s ease-in-out infinite; transform-origin: 50% 90%; }
.mascot:hover { animation: jelly .7s both; } .pupil { animation: derp 5s ease-in-out infinite; }
@keyframes derp { 0%,100% { transform: translate(0,0); } 30% { transform: translate(-6px,-4px); } 60% { transform: translate(5px,3px); } }
@keyframes jelly { 30% { transform: scale(1.18,.84); } 50% { transform: scale(.86,1.14); } 75% { transform: scale(1.06,.96); } }
.drop { position: absolute; width: 16px; height: 22px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: linear-gradient(#9be9ff, #1170c9); animation: fall 3.2s ease-in infinite; opacity: 0; }
.d1 { left: 14%; top: 8%; } .d2 { right: 12%; top: 20%; animation-delay: 1.1s; } .d3 { left: 40%; top: 0; animation-delay: 2s; }
@keyframes fall { 0% { transform: translateY(-10px); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(150px); opacity: 0; } }
.about-text h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 14px; } .about-text p { font-size: 1.15rem; line-height: 1.65; color: #d7e8f6; }
.about-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }

/* --- Números, tarjetas, noticias, FAQ, reglas --- */
.stats { display: none; }
.stat { text-align: center; padding: 22px 12px; }
.stat b { display: block; font: 700 clamp(2rem, 5vw, 3rem) "Minecraft Standard", monospace; color: var(--gold); text-shadow: 0 3px 0 #7a4a00; }
.stat span { font-size: 1.05rem; color: #cfe3f3; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.tilt-card { padding: 26px; transition: transform .35s cubic-bezier(.3,1.6,.5,1), box-shadow .3s, border-color .3s; }
.tilt-card:hover { transform: translateY(-8px) rotate(-1deg) scale(1.03); border-color: rgba(255,211,107,.6); box-shadow: 0 20px 44px rgba(0,10,40,.55), 0 0 30px rgba(255,211,107,.18); }
.tilt-card .ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; font-size: 2rem; margin-bottom: 14px;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.4), rgba(34,184,245,.35)); box-shadow: inset 0 -4px 8px rgba(0,30,80,.4); animation: lu-float 5s ease-in-out infinite; }
.tilt-card h3 { margin: 0 0 8px; font-size: 1.3rem; } .tilt-card p { margin: 0; font-size: 1.05rem; line-height: 1.55; color: #d0e3f2; }
.tilt-card ul { margin: 14px 0 0; padding-left: 20px; color: #bcd9ee; font-size: 1rem; line-height: 1.7; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; } .two-col h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0 0 16px; }
.news-item { padding: 18px 20px; margin-bottom: 14px; border-left: 4px solid var(--gold); } .news-item small { color: var(--gold); font-weight: 700; font-size: .9rem; }
.news-item h3 { margin: 4px 0 6px; font-size: 1.2rem; } .news-item p { margin: 0; font-size: 1.05rem; color: #d0e3f2; }
.faq details { margin-bottom: 12px; padding: 4px 18px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-border); }
.faq summary { padding: 14px 0; font-size: 1.1rem; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::after { content: "💧"; transition: transform .35s cubic-bezier(.3,1.8,.5,1); } .faq details[open] summary::after { transform: scale(1.4) rotate(20deg); }
.faq p { margin: 0 0 16px; font-size: 1.05rem; line-height: 1.6; color: #d0e3f2; }
.rules { list-style: none; counter-reset: r; padding: 0; display: grid; gap: 16px; }
.rules li { counter-increment: r; position: relative; padding: 22px 22px 22px 84px; }
.rules li::before { content: counter(r); position: absolute; left: 20px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  font: 700 1.4rem "Minecraft Standard", monospace; color: #3a2300; background: linear-gradient(#ffe38f, #ffc23d); box-shadow: 0 3px 0 #b87400; }
.rules h3 { margin: 0 0 4px; font-size: 1.25rem; } .rules p { margin: 0; font-size: 1.08rem; color: #d0e3f2; line-height: 1.55; }

/* --- Formularios y carnet --- */
.apply-form, .profile-search { max-width: 820px; margin-inline: auto; }
.apply-form h2 { margin-top: 0; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.apply-form label { display: block; margin-bottom: 14px; font-weight: 700; font-size: 1.02rem; color: #e4f3ff; }
.apply-form input, .apply-form select, .apply-form textarea, .profile-search input { width: 100%; margin-top: 6px; padding: 13px 14px; font: 500 1.05rem "DM Sans", sans-serif;
  color: #fff; background: rgba(2,10,30,.65); border: 1px solid rgba(155,233,255,.3); border-radius: 12px; outline: none; transition: border-color .2s, box-shadow .2s; }
.apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus, .profile-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255,211,107,.2); }
.form-msg { min-height: 1.4em; font-weight: 700; color: #7ff5df; } .form-msg.err { color: #ff9b9b; }
.apply-out { width: 100%; min-height: 190px; margin-top: 10px; padding: 12px; color: #fff; background: rgba(2,10,30,.7); border: 1px dashed var(--foam); border-radius: 12px; font: 1rem monospace; }
.profile-search { display: flex; gap: 12px; align-items: center; } .profile-search input { margin: 0; }
.carnet { display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: center; max-width: 820px; margin: 24px auto 0; animation: view-in .6s both; }
.carnet[hidden] { display: none; } .carnet-skin { display: grid; place-items: center; } .carnet-skin img { image-rendering: auto; animation: lu-float 4s ease-in-out infinite; filter: drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.carnet h2 { margin: 0; font-size: 2rem; } .carnet-title { margin: 4px 0 14px; font-size: 1.15rem; color: var(--gold); font-weight: 700; }
.meter { height: 18px; border-radius: 99px; background: rgba(2,10,30,.7); border: 1px solid var(--glass-border); overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #22b8f5, #ffd36b); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.meter-label { margin: 6px 0 14px; font-weight: 700; } .carnet-stats { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; font-size: 1.05rem; }
.carnet-stats li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: rgba(2,10,30,.4); } .carnet-stats b { color: var(--gold); }

/* --- Burbuja que explota al hacer clic --- */
.pop { position: fixed; z-index: 999; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(155,233,255,.9); background: rgba(155,233,255,.25); animation: pop .7s ease-out forwards; }
@keyframes pop { to { transform: translate(var(--dx), var(--dy)) scale(1.6); opacity: 0; } }

/* --- Móvil --- */
@media (max-width: 860px) {
  .nav-burger { display: block; } .main-nav { position: absolute; top: 100%; left: 12px; right: 12px; flex-direction: column; margin: 8px 0 0; border-radius: 22px;
    background: rgba(3,20,51,.97); transform-origin: top; transform: scaleY(0); opacity: 0; pointer-events: none; transition: transform .35s cubic-bezier(.3,1.4,.5,1), opacity .2s; }
  .main-nav.open { transform: none; opacity: 1; pointer-events: auto; } .main-nav a { padding: 14px 18px; }
  .nav-blob { display: none; } .main-nav a.is-active { background: linear-gradient(180deg, #ffe38f, #ffc23d); }
  .brand { margin-right: auto; } .about, .two-col, .carnet { grid-template-columns: 1fr; } .carnet-skin img { height: 220px; width: auto; }
  .profile-search { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .view, .mascot, .drop, .pupil, .tilt-card .ico, .carnet-skin img { animation: none; } html { scroll-behavior: auto; } }


/* --- Distribución general --- */
.page-width { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.block { margin-block: 56px; } .about { margin-block: 56px; gap: 48px; } .page-head { margin: 48px auto 28px; }
.tagline-section { margin-block: 30px 10px; } .tagline { font-size: clamp(1.1rem, 2.6vw, 1.5rem); }
.stats { margin-block: 18px 0; grid-template-columns: repeat(4, 1fr); } .stat { padding: 16px 10px; } .stat b { font-size: clamp(1.6rem, 3vw, 2.1rem); } .stat span { font-size: .95rem; }
.discord-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-block: 56px; padding: 30px 34px; border-radius: 22px;
  background: radial-gradient(60% 120% at 100% 0%, rgba(114,137,255,.35), transparent 70%), var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.discord-cta h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2rem); } .discord-cta p { margin: 0; font-size: 1.08rem; color: #d0e3f2; max-width: 560px; } .discord-cta .btn-main { flex: none; }
.two-col { align-items: start; }
.profile-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; margin-block: 8px 56px; align-items: start; }
.link-card h2, .lookup-card h2 { margin: 0 0 14px; font-size: 1.5rem; line-height: 1.25; }
.link-steps { margin: 0 0 20px; padding-left: 22px; display: grid; gap: 8px; font-size: 1.05rem; color: #d0e3f2; } .link-steps code { padding: 2px 7px; border-radius: 6px; background: rgba(2,10,30,.7); color: var(--gold); }
.link-form { display: flex; gap: 10px; margin-top: 18px; } .link-form input { flex: 1; min-width: 0; padding: 12px 14px; font: 500 1rem "DM Sans", sans-serif; color: #fff; background: rgba(2,10,30,.65); border: 1px solid rgba(155,233,255,.3); border-radius: 12px; outline: none; }
.link-form input:focus { border-color: var(--gold); }
.lookup-card .profile-search { padding: 0; background: none; border: 0; box-shadow: none; max-width: none; } .lookup-card .carnet { margin-top: 22px; grid-template-columns: 140px 1fr; gap: 22px; padding: 0; background: none; border: 0; box-shadow: none; }
.carnet h3 { margin: 0; font-size: 1.7rem; } .carnet-skin img { height: 240px; width: auto; }

/* --- Pie de página --- */
.site-footer { margin-top: 70px; padding: 44px 0 20px; background: linear-gradient(180deg, transparent, rgba(2,10,30,.7)); border-top: 1px solid rgba(155,233,255,.16); box-shadow: none; display: block; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: 36px; } .foot-grid h4 { margin: 0 0 12px; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--foam); }
.foot-grid nav { display: grid; gap: 9px; align-content: start; } .foot-grid a { color: #c4dcee; text-decoration: none; font-size: 1rem; } .foot-grid nav a:hover { color: var(--gold); } .foot-grid a[hidden] { display: none; }
.foot-grid p { margin: 10px 0 0; font-size: .95rem; line-height: 1.55; color: #a9c6dc; } .foot-bottom { margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(155,233,255,.12); font-size: .9rem; color: #8fb0c9; }

@media (max-width: 1000px) { .ip-chip span { display: none; } .ip-chip { width: 38px; padding: 0; justify-content: center; } .nav-wrap { gap: 12px; } }
@media (max-width: 860px) {
  .nav-wrap { height: 56px; } .nav-burger { display: inline-flex; } .user-chip span { display: none; } .user-chip { padding: 0 5px; }
  .main-nav { position: absolute; top: 100%; left: 12px; right: 12px; height: auto; flex-direction: column; align-items: stretch; margin: 8px 0 0; padding: 8px; border-radius: 16px;
    background: rgba(3,20,51,.98); border: 1px solid var(--glass-border); transform-origin: top; transform: scaleY(0); opacity: 0; pointer-events: none; width: auto; }
  .main-nav.open { transform: none; opacity: 1; pointer-events: auto; } .main-nav a { height: 46px; font-size: 1.05rem; } .main-nav a.is-active { background: rgba(255,211,107,.16); color: var(--gold); } .nav-blob { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); } .discord-cta { flex-direction: column; align-items: flex-start; } .profile-layout { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; } .lookup-card .carnet { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* Los botones pequeños del menú anulan el estilo grande de los botones antiguos */
.nav-wrap .nav-tools button:not(.nav-btn) { font: 600 .88rem "DM Sans", sans-serif; letter-spacing: 0; text-transform: none; box-shadow: none; text-shadow: none; min-height: 0; height: 38px; margin: 0;
  color: #e6f4ff; background: rgba(34,184,245,.12); border: 1px solid rgba(155,233,255,.24); border-radius: 10px; }
.nav-wrap .nav-tools button:not(.nav-btn):hover { background: rgba(34,184,245,.28); }
.nav-wrap .nav-tools .tool-btn { width: 38px; padding: 0; }
.nav-wrap .nav-tools .ip-chip { padding: 0 12px; }
.nav-wrap .nav-tools .user-chip { padding: 0 12px 0 5px; } .nav-wrap .nav-tools .user-chip b { font-size: .86rem; } .nav-wrap .nav-tools .user-chip small { font-size: .72rem; }
@media (max-width: 1000px) { .nav-wrap .nav-tools .ip-chip { width: 38px; padding: 0; } }
@media (max-width: 860px) { .nav-wrap .nav-tools .user-chip { padding: 0 5px; } }
.nav-wrap { width: min(1120px, calc(100% - 40px)); max-width: none; padding: 0; }
.hero { margin-top: 22px; }
html, body { overflow-x: clip; }
.sr-only { overflow: hidden; }

/* Botones y ficha: tamaños coherentes */
button.btn-main, a.btn-main { font: 800 1rem "Minecraft Standard", "DM Sans", sans-serif; letter-spacing: 0; text-transform: none; color: #3a2300; padding: 12px 22px; min-height: 0;
  background: linear-gradient(180deg, #ffe38f, #ffc23d); box-shadow: 0 4px 0 #b87400, 0 8px 20px rgba(255,194,61,.25); border: 0; border-radius: 12px; }
button.btn-ghost, a.btn-ghost { font: 800 1rem "Minecraft Standard", "DM Sans", sans-serif; letter-spacing: 0; text-transform: none; color: #fff; padding: 11px 20px; min-height: 0;
  background: rgba(34,184,245,.2); box-shadow: none; border: 2px solid rgba(155,233,255,.45); border-radius: 12px; }
.profile-search button, .link-form button { flex: none; white-space: nowrap; }
.carnet-skin img { width: auto; height: auto; max-width: 100%; max-height: 240px; object-fit: contain; }
.lookup-card .carnet { align-items: start; }
.profile-search button.btn-main { background: linear-gradient(180deg, #ffe38f, #ffc23d) !important; color: #3a2300 !important; box-shadow: 0 4px 0 #b87400 !important; }


/* ===== Botones del menú: mismo estilo 3D que los botones de la tienda ===== */
.nav-wrap { height: 68px; gap: 20px; } .brand img { height: 40px; width: auto; }
.nav-blob { display: none; }
.main-nav { gap: 10px; } .nav-tools { gap: 10px; }
html body .site-header .nav-btn { --c1: #4a82b3; --c2: #3a6f9e; --edge: #25496b; --glow: rgba(58,111,158,.3);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-height: 0; margin: 0; padding: 0 16px;
  border: 0; border-radius: 11px; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 400 14px/1 "Minecraft Standard", "DM Sans", sans-serif; letter-spacing: .03em; text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0,0,0,.35);
  color: #dbe9f6; background: linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: 0 5px 0 var(--edge), 0 10px 20px var(--glow);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
html body .site-header .nav-btn:hover, html body .site-header .nav-btn.is-active { --c1: #2aa6ff; --c2: #1b95f5; --edge: #0f6fc0; --glow: rgba(27,149,245,.4); color: #fff; }
html body .site-header .nav-btn:hover { filter: brightness(1.08); transform: translateY(3px); box-shadow: 0 2px 0 var(--edge), 0 0 16px var(--glow); }
html body .site-header .nav-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge), 0 0 10px var(--glow); }
html body .site-header .nav-btn.btn-gold, html body .site-header .nav-btn.btn-gold:hover { --c1: #efd45c; --c2: #e0c34e; --edge: #997a24; --glow: rgba(224,195,78,.35); color: #21190b; text-shadow: none; }
html body .site-header .nav-btn.btn-gold img { width: 22px; height: 22px; border-radius: 5px; image-rendering: auto; background: rgba(0,0,0,.25); }
html body .site-header .nav-btn.btn-discord, html body .site-header .nav-btn.btn-discord:hover { --c1: #6d7bff; --c2: #5865f2; --edge: #2e3592; --glow: rgba(88,101,242,.4); color: #fff; }
html body .site-header .nav-btn.btn-icon { width: 40px; padding: 0; font-size: 16px; text-shadow: none; }
html body .site-header .nav-btn.nav-burger { display: none; }
html body .site-header .nav-btn.btn-gold.is-active { box-shadow: 0 5px 0 var(--edge), 0 0 18px var(--glow); }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 1000; translate: -50% 20px; opacity: 0; pointer-events: none; padding: 12px 20px; border-radius: 12px;
  font: 600 1rem "DM Sans", sans-serif; color: #fff; background: #5865f2; box-shadow: 0 5px 0 #2e3592, 0 12px 28px rgba(0,0,0,.4); transition: opacity .25s, translate .25s; }
.toast.show { opacity: 1; translate: -50% 0; }
@media (max-width: 1000px) { .nav-wrap { gap: 12px; } html body .site-header .nav-btn { padding: 0 12px; font-size: 13px; } .nav-tools .btn-discord .lbl, .nav-tools .btn-gold .lbl { display: none; } html body .site-header .nav-tools .btn-discord, html body .site-header .nav-tools .btn-gold { width: 40px; padding: 0; } }
@media (max-width: 860px) {
  .nav-wrap { height: 64px; } html body .site-header .nav-btn.nav-burger { display: inline-flex; }
  .main-nav { gap: 12px; padding: 14px; }
  html body .site-header .main-nav .nav-btn { width: 100%; height: 46px; justify-content: flex-start; padding: 0 18px; font-size: 15px; }
}
html body .site-header .nav-btn.nav-burger { border: 0 !important; background: linear-gradient(180deg, var(--c1), var(--c2)) !important; box-shadow: 0 5px 0 var(--edge), 0 10px 20px var(--glow) !important; color: #dbe9f6; }
html body .site-header .nav-btn.nav-burger[aria-expanded="true"] { --c1: #2aa6ff; --c2: #1b95f5; --edge: #0f6fc0; --glow: rgba(27,149,245,.4); color: #fff; }

/* Elementos que solo ven los usuarios registrados (Postulaciones) */
[data-requires-auth][hidden] { display: none !important; }

/* ===== Inicio: modalidades, guías con imagen y Discord ===== */
.section-lead { margin: -8px 0 22px; font-size: 1.1rem; color: #bcd9ee; }
body.modal-open { overflow: hidden; }

/* Tarjetas de modalidad (clic para ver qué hay dentro) */
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
button.mode-card:not(.platform-option) { position: relative; overflow: hidden; min-height: 160px; padding: 24px 26px; text-align: left; border: 0; border-radius: 18px; color: #fff; cursor: pointer;
  background: var(--mc, #14b89a); --edge: color-mix(in srgb, var(--mc, #14b89a) 68%, #000);
  box-shadow: 0 7px 0 var(--edge), 0 16px 28px rgba(0, 10, 40, .4); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s; }
button.mode-card:not(.platform-option):not(:disabled):hover, button.mode-card:not(.platform-option):not(:disabled):focus-visible { transform: translateY(-6px); box-shadow: 0 13px 0 var(--edge), 0 24px 36px rgba(0, 10, 40, .45); background: var(--mc, #14b89a); filter: brightness(1.06); outline: none; }
button.mode-card:not(.platform-option):focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
button.mode-card:not(.platform-option):not(:disabled):active { transform: translateY(3px); box-shadow: 0 3px 0 var(--edge); background: var(--mc, #14b89a); }
.mode-name { display: block; max-width: calc(100% - 110px); font: 700 clamp(1.2rem, 2.2vw, 1.55rem)/1.15 "Minecraft Standard", "Space Grotesk", sans-serif; letter-spacing: 0; text-transform: uppercase; overflow-wrap: break-word; text-shadow: 3px 3px 0 rgba(0, 0, 0, .25); }
.mode-card small { display: block; margin-top: 8px; font: 700 .8rem "Minecraft Standard", sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .95; }
.mode-art { position: absolute; right: -6px; bottom: -16px; width: 132px; transform: rotate(-6deg); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.mode-art svg, .mode-art img { display: block; width: 100%; height: auto; image-rendering: auto; filter: drop-shadow(7px 7px 0 rgba(0, 0, 0, .2)); }
.mode-card:hover .mode-art { transform: rotate(4deg) scale(1.1); }

/* Ventana emergente de modalidad */
.mode-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: rgba(2, 10, 30, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mode-overlay[hidden] { display: none; }
.mode-dialog { --mc: #14b89a; position: relative; width: min(620px, 100%); padding: 26px; border-radius: 22px; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 32%, #06214a), #051a3d 46%); border: 1px solid color-mix(in srgb, var(--mc) 65%, transparent);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .6); animation: mode-in .3s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes mode-in { from { opacity: 0; transform: translateY(16px) scale(.95); } }
button.mode-close:not(.platform-option) { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 11px; background: rgba(255, 255, 255, .13); box-shadow: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
button.mode-close:not(.platform-option):not(:disabled):hover { background: rgba(255, 255, 255, .24); box-shadow: none; transform: none; filter: none; }
.mode-head { display: flex; align-items: center; gap: 18px; padding-right: 34px; }
.mode-head-art { flex: none; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 20px; background: var(--mc); box-shadow: 0 6px 0 color-mix(in srgb, var(--mc) 68%, #000); }
.mode-head-art svg, .mode-head-art img { width: 66px; height: auto; image-rendering: auto; filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .22)); }
.mode-head h2 { margin: 0 0 6px; font: 700 clamp(1.15rem, 3.4vw, 1.5rem)/1.15 "Minecraft Standard", sans-serif; letter-spacing: 0; text-transform: uppercase; text-shadow: 3px 3px 0 rgba(0, 0, 0, .25); overflow-wrap: anywhere; }
.mode-head p:last-child { margin: 0; color: #d0e3f2; line-height: 1.5; }
.mode-sub { margin: 24px 0 10px; font: 700 .85rem "DM Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--foam); }
.mode-features { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mode-feature { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(155, 233, 255, .14); }
.mf-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; font-size: 1.5rem; background: rgba(255, 255, 255, .1); }
.mode-feature b { display: block; font-size: 1.05rem; } .mode-feature small { display: block; margin-top: 2px; color: #bcd9ee; font-size: .95rem; line-height: 1.4; }
.mf-go { padding: 9px 13px; border-radius: 10px; background: var(--mc); color: #fff; font: 700 .85rem "DM Sans", sans-serif; text-decoration: none; white-space: nowrap; box-shadow: 0 3px 0 color-mix(in srgb, var(--mc) 62%, #000); }
.mf-go:hover { filter: brightness(1.1); }
.mf-soon { padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #bcd9ee; font: 700 .75rem "DM Sans", sans-serif; font-style: normal; white-space: nowrap; }

/* Bloques con imagen: Cómo comprar, Cómo registrarse, Discord */
.feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center; margin-block: 72px; }
.feature--flip .art-card { order: 2; }
.feature-text h2 { margin: 0 0 14px; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; }
.feature-text .accent { color: var(--gold); }
.feature-text > p { margin: 0; font-size: 1.12rem; line-height: 1.65; color: #d0e3f2; max-width: 560px; }
.mini-steps { display: grid; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.mini-steps li { display: flex; align-items: center; gap: 14px; }
.mini-steps li > span { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font: 800 1.1rem "Minecraft Standard", sans-serif; color: #3a2300; background: linear-gradient(180deg, #ffe38f, #ffc23d); box-shadow: 0 3px 0 #b87400; }
.mini-steps b { display: block; font-size: 1.08rem; } .mini-steps small { display: block; margin-top: 1px; color: #bcd9ee; font-size: .98rem; }
.feature-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

.art-card { --ac: #1d9a72; position: relative; min-height: 270px; padding: 28px 30px; border-radius: 24px; color: #fff; background: var(--bgc); box-shadow: 0 9px 0 color-mix(in srgb, var(--ac) 55%, #000), 0 22px 44px rgba(0, 10, 40, .45); }
.art-card--buy { --ac: #1fa97a; --bgc: linear-gradient(135deg, #2fc68a, #17797a); }
.art-card--reg { --ac: #6a55e8; --bgc: linear-gradient(135deg, #8168ff, #3f3bb8); }
.art-card--discord { --ac: #2c3099; --bgc: linear-gradient(135deg, #3a3fc4, #272b8a); }
.art-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 12px; background: rgba(255, 255, 255, .17); font: 700 .8rem "Minecraft Standard", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.art-chip--discord { background: #5865f2; }
.art-card h3 { margin: 28px 0 8px; max-width: 100%; font: 700 clamp(2.2rem, 4vw, 3rem)/1.05 "Space Grotesk", "DM Sans", sans-serif; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); overflow-wrap: anywhere; }
.art-lines { display: grid; gap: 4px; margin: 0 0 20px 0; padding: 0; list-style: none; font: 400 1.05rem "Minecraft Standard", sans-serif; color: rgba(255, 255, 255, .9); }
.art-lines[hidden] { display: none; }
.art-lines li { display: flex; align-items: center; gap: 9px; }
.art-lines li::before, .art-live li i { content: ""; flex: none; width: 9px; height: 9px; background: rgba(255, 255, 255, .6); }
.art-live li::before { display: none; } .art-live li i { display: block; }
.art-live .live-online i { background: #4ade80; } .art-live .live-members i { background: #8f98d8; }
.art-img { position: absolute; top: -34px; right: 22px; width: 190px; animation: lu-float 4s ease-in-out infinite; }
.art-img svg { display: block; width: 100%; height: auto; image-rendering: auto; filter: drop-shadow(10px 12px 0 rgba(0, 0, 0, .22)); }
.art-photo { position: absolute; top: -42px; right: 10px; width: 250px; height: auto; image-rendering: auto; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); animation: lu-float 4.5s ease-in-out infinite; }
.art-photo--logo { image-rendering: auto; width: 250px; filter: drop-shadow(0 0 30px rgba(33, 255, 138, .85)) drop-shadow(0 14px 14px rgba(0, 0, 0, .4)); }

.btn-discord-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 14px; color: #fff; text-decoration: none; font: 800 1rem "Minecraft Standard", "DM Sans", sans-serif;
  background: linear-gradient(180deg, #7683ff, #5865f2); box-shadow: 0 5px 0 #2e3592, 0 10px 24px rgba(88, 101, 242, .4); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.btn-discord-cta:hover { transform: translateY(-4px) scale(1.05) rotate(-1deg); } .btn-discord-cta:active { transform: translateY(2px) scale(.97); }

.faq-wide { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }

@media (max-width: 700px) { .mode-grid { grid-template-columns: 1fr; } .mode-name { max-width: 100%; font-size: 1.1rem; } .mode-art { width: 92px; right: -4px; bottom: -12px; } .mode-card { min-height: 150px; } }
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; gap: 44px; margin-block: 56px; }
  .feature--flip .art-card { order: 0; }
  .art-card { min-height: 240px; margin-top: 30px; }
  .faq-wide { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .mode-dialog { padding: 20px 16px; } .mode-head-art { width: 74px; height: 74px; } .mode-head-art svg, .mode-head-art img { width: 52px; }
  .mode-feature { grid-template-columns: 40px 1fr; } .mf-go, .mf-soon { grid-column: 2; justify-self: start; }
  .art-card h3 { max-width: 58%; } .art-img, .art-photo { width: 130px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .art-img, .art-photo, .mode-dialog { animation: none; } .mode-card, .mode-art { transition: none; } }

/* La guía «¿Cómo funciona?» de la Tienda se oculta al elegir el nick */
.steps-section[hidden] { display: none !important; }

/* ===== Estilos específicos por sección ===== */

/* Sección Tienda - Color #21FF8A */
.section-guia-compra .accent--buy { color: #21FF8A; }
.section-guia-compra .mini-steps--buy li > span { color: #0d8c4a; background: linear-gradient(180deg, #4affa6, #21FF8A); box-shadow: 0 3px 0 #15a858; }
.section-guia-compra .btn-main--buy { color: #0d8c4a; background: linear-gradient(180deg, #4affa6, #21FF8A); box-shadow: 0 4px 0 #15a858, 0 8px 20px rgba(33,255,138,.25); }
.section-guia-compra .art-card--buy { --ac: #21FF8A; --bgc: linear-gradient(135deg, #4affa6, #15a858); }
.section-guia-compra .art-photo--logo { filter: drop-shadow(0 0 30px rgba(33, 255, 138, .85)) drop-shadow(0 14px 14px rgba(0, 0, 0, .4)); }

/* Sección Registro - Color #FFE96C */
.section-guia-registro .accent--reg { color: #FFE96C; }
.section-guia-registro .mini-steps--reg li > span { color: #8f7a30; background: linear-gradient(180deg, #ffe38f, #FFE96C); box-shadow: 0 3px 0 #c9a500; }
.section-guia-registro .btn-main--reg { color: #8f7a30; background: linear-gradient(180deg, #ffe38f, #FFE96C); box-shadow: 0 4px 0 #c9a500, 0 8px 20px rgba(255,233,108,.25); }
.section-guia-registro .art-card--reg { --ac: #FFE96C; --bgc: linear-gradient(135deg, #ffe38f, #d4b200); }
.section-guia-registro .art-photo--reg { filter: drop-shadow(0 0 30px rgba(255, 233, 108, .85)) drop-shadow(0 14px 14px rgba(0, 0, 0, .4)); }

/* Sección Discord - Color #5865f2 */
.section-discord .accent--discord { color: #5865f2; }
.section-discord .btn-main--discord { color: #2c3099; background: linear-gradient(180deg, #7b82ff, #5865f2); box-shadow: 0 4px 0 #3c44a8, 0 8px 20px rgba(88,101,242,.25); }
.section-discord .art-card--discord { --ac: #5865f2; --bgc: linear-gradient(135deg, #5865f2, #2c3099); }
.section-discord .art-photo--discord { filter: drop-shadow(0 0 30px rgba(88, 101, 242, .85)) drop-shadow(0 14px 14px rgba(0, 0, 0, .4)); }

/* Sección Perfil - Color #FFE96C */
.section-perfil .link-steps--perfil { counter-reset: p; padding-left: 22px; display: grid; gap: 8px; font-size: 1.05rem; color: #d0e3f2; }
.section-perfil .link-steps--perfil li { counter-increment: p; position: relative; padding-left: 22px; }
.section-perfil .link-steps--perfil li::before { content: counter(p); position: absolute; left: 0; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font: 700 1.1rem "Minecraft Standard", monospace; color: #8f7a30; background: linear-gradient(180deg, #ffe38f, #FFE96C); box-shadow: 0 3px 0 #c9a500; }
.section-perfil .link-steps--perfil code { padding: 2px 7px; border-radius: 6px; background: rgba(2,10,30,.7); color: #FFE96C; }
.section-perfil .btn-main--perfil { color: #8f7a30; background: linear-gradient(180deg, #ffe38f, #FFE96C); box-shadow: 0 4px 0 #c9a500, 0 8px 20px rgba(255,233,108,.25); }
.section-perfil .btn-ghost--perfil { color: #fff; background: rgba(255,233,108,.2); border: 2px solid rgba(255,233,108,.45); }


/* --- Cuenta (entrar / crear / recuperar) --- */
.auth-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.auth-tab { padding: 8px 14px; border-radius: 10px; cursor: pointer; font: 700 .95rem "DM Sans", sans-serif; color: #cfe3f3; background: rgba(34,184,245,.12); border: 1px solid rgba(155,233,255,.28); transition: background .2s, color .2s; }
.auth-tab:hover { background: rgba(34,184,245,.28); color: #fff; } .auth-tab.is-active { color: #3a2300; background: linear-gradient(180deg, #ffe38f, #FFE96C); border-color: transparent; }
.auth-form[hidden], [data-auth-out][hidden], [data-auth-in][hidden] { display: none; }
.auth-form label { display: block; margin-bottom: 12px; font-weight: 700; font-size: 1.02rem; color: #e4f3ff; }
.auth-form input { width: 100%; margin-top: 6px; padding: 13px 14px; font: 500 1.05rem "DM Sans", sans-serif; color: #fff; background: rgba(2,10,30,.65); border: 1px solid rgba(155,233,255,.3); border-radius: 12px; outline: none; transition: border-color .2s, box-shadow .2s; }
.auth-form input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255,211,107,.2); }
.auth-form code { padding: 2px 7px; border-radius: 6px; background: rgba(2,10,30,.7); color: #FFE96C; }
.auth-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 16px; }
.auth-details { margin-top: 8px; } .auth-details summary { cursor: pointer; font-weight: 700; color: #cfe3f3; margin-bottom: 10px; }
.apply-form input[readonly] { opacity: .75; cursor: not-allowed; }

/* ---------- Borde claro en todos los botones (como el botón de perfil) ---------- */
html body :is(
  .nav-btn, .server-copy-all, .mode-card,
  .btn-main, .btn-ghost, .btn-discord-cta,
  .guide-button, .login-submit, .checkout-button,
  .category-tab, .cart-trigger,
  .customizer-buy, .ticons-step-button, .product-info-button, .add-link, .icon-button
) {
  border: 1px solid rgb(255 255 255 / 55%) !important;
}

/* --- Bloqueo de scroll con modales / carrito abiertos (ver js/scrolllock.js) ---
   El overflow se aplica a <html> porque `html, body { overflow-x: clip }` impide que el
   overflow del <body> llegue al viewport. scrollbar-gutter evita el salto lateral. */
html { scrollbar-gutter: stable; }
html.is-scroll-locked,
html.is-scroll-locked body { overflow: hidden; }
/* Si un modal o el carrito tienen su propio scroll, al llegar al final no arrastran la página. */
.cart-drawer, .drawer-content, .guide-overlay, .mode-overlay { overscroll-behavior: contain; }

/* --- Cuenta: ficha técnica, historiales, tarjetas de rol y modales --- */
.me-section { display: grid; gap: 22px; margin-bottom: 24px; } .me-section[hidden] { display: none; }
.hist-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.hist-item { padding: 12px 14px; border-radius: 12px; background: rgba(2,10,30,.4); }
.hist-item p { margin: 8px 0 0; color: #d0e3f2; white-space: pre-wrap; overflow-wrap: anywhere; }
.hist-item small { color: #9fc0da; } .hist-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hist-empty { color: #9fc0da; padding: 8px 2px; }
.hist-tag { padding: 2px 10px; border-radius: 99px; font-size: .82rem; font-weight: 700; background: rgba(255,255,255,.12); }
.hist-tag--aceptada { background: #1d6b4a; } .hist-tag--rechazada, .hist-tag--descartada { background: #7a2b2b; } .hist-tag--pendiente, .hist-tag--nueva { background: #7a6420; } .hist-tag--revisada { background: #1e5a8a; }
.role-grid { align-items: stretch; } .role-card { display: flex; flex-direction: column; gap: 8px; }
.role-card ul { flex: 1; } .role-card.is-closed { opacity: .75; }
.role-state { align-self: flex-start; padding: 2px 12px; border-radius: 99px; font-size: .85rem; font-weight: 800; }
.role-state--open { background: #1d6b4a; color: #fff; } .role-state--closed { background: #7a2b2b; color: #fff; }
.role-btn { width: 100%; margin-top: 8px; } .role-btn:disabled { opacity: .6; cursor: not-allowed; filter: grayscale(.4); }
.apply-dialog { position: relative; width: min(620px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; }
.apply-dialog h2 { margin-top: 0; } .apply-dialog .apply-form { max-width: none; padding: 0; background: none; border: 0; box-shadow: none; }
.dlg-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(155,233,255,.3); background: rgba(34,184,245,.15); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.dlg-close:hover { background: rgba(34,184,245,.35); }

/* --- Ficha técnica (perfil con sesión) · mismos componentes que la tienda y las modalidades --- */
.me-card { padding: 0; }
.ficha { --mc: #14b89a; display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 34px; align-items: start; padding-top: 8px; }

/* Tarjeta de color sólido con borde 3D (igual que «Tienda» y las modalidades); la skin sobresale por arriba */
.ficha-id { position: relative; min-height: 470px; padding: 26px 22px; display: flex; flex-direction: column; align-items: center; margin-top: 40px; border-radius: 24px; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--mc) 92%, #fff), color-mix(in srgb, var(--mc) 72%, #000));
  box-shadow: 0 9px 0 color-mix(in srgb, var(--mc) 55%, #000), 0 22px 44px rgba(0, 10, 40, .45); transition: background .3s, box-shadow .3s; }
.ficha-skin { flex: 1; display: grid; place-items: end center; width: 100%; margin-top: -4px; }
.ficha-skin img { width: auto; height: auto; max-width: 100%; max-height: 360px; margin-top: 14px; image-rendering: auto; animation: lu-float 4.5s ease-in-out infinite; filter: drop-shadow(0 14px 18px rgba(0,0,0,.5)); }

.ficha-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; min-width: 0; }

/* Botones de modalidad: mismo relieve que los botones de la barra y las tarjetas de modalidad */

.ficha-body { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); gap: 20px; align-items: stretch; }

/* Filas de estadística: tarjetas de cristal (como los paquetes de Ticons) con el número en cuadro dorado y el valor en caja oscura tipo «PRECIO» */
.ficha-stats { min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ficha-stats li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.stat-text { display: grid; gap: 2px; min-width: 0; }
.ficha-stats li > * { min-width: 0; }

/* Clan: tarjeta sólida con borde 3D (variante morada de «Cómo registrarse») */
.clan-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 14px 18px; border-radius: 24px; text-align: center; color: #fff;
  background: linear-gradient(135deg, #8168ff, #3f3bb8); box-shadow: 0 9px 0 color-mix(in srgb, #6a55e8 55%, #000), 0 22px 44px rgba(0,10,40,.45); }
.clan-banner { width: 74px; height: 110px; display: grid; place-items: center; border-radius: 4px 4px 36px 36px; background: linear-gradient(180deg, #ffffff40, #ffffff10), linear-gradient(180deg, #2ec3ff, #0e5fa8); box-shadow: 0 -7px 0 #8a5a2b, 0 10px 18px rgba(0,0,0,.4); font: 700 2.2rem "Minecraft Standard", monospace; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.clan-name { margin: 10px 0 0; font: 700 1.5rem/1.05 "Minecraft Standard", monospace; text-transform: uppercase; text-shadow: 0 3px 0 rgba(0,0,0,.25); overflow-wrap: anywhere; }
.clan-leader { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.17); font: 700 .8rem "Minecraft Standard", sans-serif; letter-spacing: .04em; }
.clan-leader img { border-radius: 4px; image-rendering: pixelated; } .clan-members { opacity: .9; }

/* Pestañas de historial con el mismo relieve que los botones de la barra */

@media (max-width: 900px) { .ficha { grid-template-columns: minmax(0, 1fr); gap: 26px; } .ficha-id { min-height: 430px; } .ficha-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .ficha .ficha-stats li { padding-right: 60px; } .stat-ico { width: 48px; } }


/* ===== Perfil rediseñado: ficha plana ===== */
/* Barra superior: «Cerrar sesión» a la izquierda y el buscador de jugadores */
.profile-bar { display: flex; align-items: center; gap: 14px; margin-block: 4px 10px; }
.profile-bar .profile-logout { flex: none; } .profile-bar .profile-logout[hidden] { display: none; }
.profile-bar .profile-search { flex: 1; max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.lookup-msg { min-height: 1.2em; margin-block: 0 10px; }
.profile-layout { grid-template-columns: minmax(0, 560px); justify-content: center; }
@media (max-width: 700px) { .profile-bar { flex-direction: column; align-items: stretch; } .profile-bar .profile-logout { order: 2; } }

/* Nombre como el nametag del juego: texto blanco con sombra sobre barra oscura translúcida */
.ficha-nick { margin: 0; max-width: 100%; padding: 3px 10px 4px; border-radius: 2px; background: rgba(0, 0, 0, .42); color: #fff; font: 400 clamp(1.1rem, 2vw, 1.4rem)/1.2 "Minecraft Standard", monospace; text-transform: none; letter-spacing: 0; text-align: center; text-shadow: 2px 2px 0 #3f3f3f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha-skin-canvas { display: block; width: 160px; height: 320px; margin-top: 14px; image-rendering: pixelated; animation: lu-float 4.5s ease-in-out infinite; filter: drop-shadow(0 14px 18px rgba(0,0,0,.5)); }

/* Título: igual que «✦ ÚLTIMAS COMPRAS ✦» */
.ficha-title { margin: 6px 0 0; text-align: center; color: #f5d979; font: 700 clamp(22px, 3vw, 32px)/1.1 "Space Grotesk", sans-serif; letter-spacing: .16em; text-transform: uppercase; text-shadow: none; }
.ficha-title span { margin-inline: 8px; color: #58cfff; font-size: .7em; }

/* Modalidades: botones .rank-mode de la tienda (ver styles.css) */
.ficha-modes { margin: 0; }
.me-history .me-tabs { margin: 0 0 18px; grid-template-columns: repeat(auto-fit, minmax(190px, 260px)); }

/* Filas: mismo botón que «SURVIVAL OP · CLICK PARA VER»: #puesto grande en negro, nombre blanco, valor pequeño e icono a la derecha */
.ficha .ficha-body { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); gap: 20px; align-items: start; }
.ficha .ficha-stats { gap: 14px; }
.ficha .ficha-stats li { --edge: color-mix(in srgb, var(--mc) 66%, #000); position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; min-height: 76px; padding: 8px 74px 8px 14px; border: 0; border-radius: 12px; background: var(--mc); box-shadow: 0 4px 0 var(--edge), 0 9px 16px rgba(0,10,40,.35); }
.stat-rank { display: block; min-width: 54px; padding: 0; background: none; box-shadow: none; border-radius: 0; color: #000; }
.stat-rank-n { display: block; font: 700 var(--rk, 34px)/1 "Minecraft Standard", sans-serif; color: #000; text-shadow: none; letter-spacing: -.02em; }
.stat-text { display: grid; gap: 7px; min-width: 0; }
.stat-label { font: 700 clamp(15px, 1.9vw, 22px)/1.1 "Minecraft Standard", sans-serif; color: #fff; text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0,0,0,.25); overflow-wrap: anywhere; }
.stat-value { justify-self: start; padding: 0; background: none; border: 0; color: #fff; opacity: .95; font: 700 clamp(11px, 1.2vw, 14px)/1 "Minecraft Standard", sans-serif; letter-spacing: .08em; text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0,0,0,.25); overflow-wrap: anywhere; }
.stat-ico { position: absolute; right: -2px; bottom: -9px; width: 60px; height: auto; display: block; padding: 0; border: 0; background: none; pointer-events: none; transform: rotate(-6deg); }
.stat-ico svg { display: block; width: 100%; height: auto; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.2)); }
@media (max-width: 900px) { .ficha .ficha-body { grid-template-columns: minmax(0, 1fr); } }

/* Clan: banner, nombre del clan debajo y, al final, el dueño */
.clan-card { gap: 10px; justify-content: flex-start; }
.clan-leader { margin-top: 2px; }
.ficha-back { justify-self: center; }
.clan-leader[hidden] { display: none; }


/* ===== Ficha simétrica y translúcida ===== */
/* Rejilla: la tarjeta del jugador ocupa la misma altura que modalidades + estadísticas */
.ficha { grid-template-columns: 290px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 20px 34px; align-items: stretch; padding-top: 0; }
.ficha-main { display: contents; }
.ficha .ficha-title { grid-column: 2; grid-row: 1; }
.ficha .ficha-modes { grid-column: 2; grid-row: 2; }
.ficha .ficha-body { grid-column: 2; grid-row: 3; align-items: stretch; }
.ficha .fine { grid-column: 1 / -1; grid-row: 4; text-align: center; margin: 0; }
.ficha .ficha-id { grid-column: 1; grid-row: 2 / 4; margin-top: 0; min-height: 0; }
.ficha-skin img, .ficha-skin-canvas { max-height: 400px; }
.ficha .ficha-stats { grid-auto-rows: 1fr; }
.ficha .clan-card { height: 100%; justify-content: center; }
@media (max-width: 900px) {
  .ficha { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ficha .ficha-title, .ficha .ficha-modes, .ficha .ficha-body, .ficha .fine, .ficha .ficha-id { grid-column: 1; grid-row: auto; }
  .ficha .ficha-id { min-height: 430px; }
  .ficha .clan-card { height: auto; }
}

/* Tarjetas translúcidas (cristal) con el color de su modalidad / estadística */
.ficha .ficha-id { background: linear-gradient(160deg, color-mix(in srgb, var(--mc) 62%, transparent), color-mix(in srgb, var(--mc) 30%, transparent)); border: 1px solid color-mix(in srgb, var(--mc) 55%, #fff);
  box-shadow: 0 8px 0 color-mix(in srgb, var(--mc) 40%, rgba(0,10,40,.6)), 0 22px 44px rgba(0,10,40,.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ficha .clan-card { background: linear-gradient(160deg, rgba(124,92,255,.5), rgba(72,52,200,.28)); border: 1px solid rgba(190,170,255,.5);
  box-shadow: 0 8px 0 rgba(40,28,120,.55), 0 18px 36px rgba(0,10,40,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ficha .ficha-stats li { --edge: color-mix(in srgb, var(--rc, var(--mc)) 50%, rgba(0,10,40,.7)); background: linear-gradient(135deg, color-mix(in srgb, var(--rc, var(--mc)) 66%, transparent), color-mix(in srgb, var(--rc, var(--mc)) 34%, transparent));
  border: 1px solid color-mix(in srgb, var(--rc, var(--mc)) 60%, #fff); box-shadow: 0 4px 0 var(--edge), 0 9px 16px rgba(0,10,40,.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.stat-rank-n { color: #0a1228; }

/* Barra superior uniforme: cerrar sesión (rojo), buscador y botón con la misma altura */
.profile-bar { align-items: stretch; }
.profile-bar .profile-search { align-items: stretch; }
.profile-bar .profile-search input, .profile-bar .profile-search button, html body .profile-bar button.profile-logout { height: 46px; box-sizing: border-box; }
html body .profile-bar button.profile-logout { padding: 0 22px; color: #fff; background: linear-gradient(180deg, #ff6b6b, #e03a3a); border: 0; box-shadow: 0 4px 0 #9c1f1f, 0 8px 20px rgba(224,58,58,.3); }
html body .profile-bar button.profile-logout:hover { filter: brightness(1.08); }

/* Historial: botones centrados, del mismo ancho */
.me-history .me-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.me-history .me-tabs .rank-mode { flex: 0 1 260px; min-width: 220px; }
.me-history .rank-mode-name { max-width: calc(100% - 52px); }
.me-history [data-me-panel] { display: grid; justify-items: center; gap: 14px; }
.me-history [data-me-panel][hidden] { display: none; }
.me-history .hist-list { width: 100%; }


/* ===== Ajustes: nombres animados, textos finos, barra superior, panel de postulaciones ===== */
/* Nombre de cada TOP: degradado en movimiento con el color de su módulo */
.ficha .stat-label { --a: color-mix(in srgb, var(--rc, var(--mc)) 28%, #fff); --b: color-mix(in srgb, var(--rc, var(--mc)) 78%, #fff);
  background: linear-gradient(100deg, var(--a), var(--b), var(--a)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.3)); animation: stat-shine 3.6s linear infinite; }
@keyframes stat-shine { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .ficha .stat-label { animation: none; } }
/* Cantidad y puesto: sin negrita */
.ficha .stat-value { font-weight: 400; }
.ficha .stat-rank-n { font-weight: 400; }

/* Barra superior: buscador corto a la izquierda, SALIR a la derecha, texto centrado en los botones */
.profile-bar { justify-content: space-between; }
.profile-bar .profile-search { flex: 0 1 400px; }
.profile-bar .profile-search button, html body .profile-bar button.profile-logout { display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 0 22px; min-width: 104px; }
html body .profile-bar button.profile-logout { margin-left: auto; }
.profile-bar .profile-logout[hidden] { display: none; }
@media (max-width: 700px) { .profile-bar .profile-search { flex: 1 1 auto; } html body .profile-bar button.profile-logout { order: 2; margin-left: 0; width: 100%; } }

/* Historial: pestañas sin desbordar y panel de postulaciones dentro del recuadro */
.me-history { overflow: hidden; }
.me-history .me-tabs .rank-mode { flex: 0 1 270px; min-width: 230px; }
.me-history .rank-mode-name { font-size: 12px; white-space: nowrap; overflow-wrap: normal; max-width: calc(100% - 58px); }
.me-history .rank-mode small { font-size: 9px; }
.me-history [data-me-panel] { justify-items: stretch; }
.me-sub { margin: 4px 0 0; text-align: center; color: #f5d979; font: 700 12px/1 "Minecraft Standard", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.me-history .role-grid { width: 100%; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0; }
.me-history .role-card { min-width: 0; padding: 16px; }
.me-history .role-card h3 { font-size: 1.05rem; }
.me-history .role-card p, .me-history .role-card li { font-size: .85rem; overflow-wrap: anywhere; }
.me-history .role-btn { width: 100%; font-size: .85rem; padding: 10px 12px; white-space: normal; }
.me-history .hist-empty { text-align: center; }
.me-history [data-roles-msg]:empty { display: none; }


/* ===== Perfil · buscador cuadrado + módulo de acceso + avisos laterales ===== */
.form-msg[data-notify] { display: none; }

/* Buscador: tarjeta ordenada, input y botón de la misma altura */
html body .profile-bar { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-block: 4px 18px; }
html body .profile-bar .profile-search.finder { width: 100%; max-width: 560px; flex: none; margin: 0 auto; padding: 20px 22px 22px; display: block;
}
.finder-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.finder-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: rgba(34,184,245,.2); border: 2px solid rgba(155,233,255,.45); }
.finder-head b { display: block; font: 800 1.05rem "DM Sans", sans-serif; color: #fff; } .finder-head small { display: block; color: #a9c4d8; font-size: .9rem; }
.finder-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
html body .profile-bar .finder-row input { height: 48px; margin: 0; padding: 0 14px; border-radius: 12px; }
html body .profile-bar .finder-row button { height: 48px; min-width: 112px; margin: 0; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; }
html body .profile-bar button.profile-logout { margin: 0 auto; width: 100%; max-width: 560px; height: 46px; }
@media (max-width: 480px) { .finder-row { grid-template-columns: 1fr; } html body .profile-bar .finder-row button { width: 100%; } }

/* Módulo de acceso (estilo «inicia sesión»): título, campos, botón y pie con enlace */
html body .profile-layout { display: flex; justify-content: center; margin-block: 8px 56px; }
.auth-module { --ac: #3ddc84; --ac2: #1f9f5b; --ace: #146b3c; --acs: rgba(61,220,132,.28);
  width: 100%; max-width: 440px; overflow: hidden; padding: 0; }
.auth-module[data-mode="register"] { --ac: #22b8f5; --ac2: #1480b3; --ace: #0b5679; --acs: rgba(34,184,245,.28); }
.auth-module[data-mode="reset"] { --ac: #ff9f43; --ac2: #d9731a; --ace: #8f4a0c; --acs: rgba(255,159,67,.28); }
.auth-module [data-auth-out], .auth-module [data-auth-in] { padding: 30px 30px 0; }
.auth-module [data-auth-in] { padding-bottom: 26px; }
.auth-top { text-align: center; margin-bottom: 22px; }
.auth-badge { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 12px; border-radius: 18px; background: rgba(2,10,30,.55); border: 2px solid var(--ac); box-shadow: 0 4px 0 var(--ace); }
.auth-badge img { width: 44px; height: 44px; border-radius: 10px; image-rendering: pixelated; }
.auth-top h2 { margin: 0 0 6px; font: 800 1.7rem "DM Sans", sans-serif; color: #fff; letter-spacing: -.01em; }
.auth-top p { margin: 0; color: #a9c4d8; font-size: 1rem; line-height: 1.45; }
.auth-module .auth-form { display: grid; gap: 12px; }
.auth-module .auth-form[hidden], .auth-module .auth-foot[hidden], .auth-module .auth-forgot[hidden] { display: none; }

.af { position: relative; display: block; margin: 0; }
.af input { width: 100%; height: 52px; margin: 0; padding: 0 16px 0 50px; font: 600 1.02rem "DM Sans", sans-serif; color: #fff; background: rgba(2,10,30,.65); border: 1px solid rgba(155,233,255,.3); border-radius: 12px; outline: none; transition: border-color .2s, background .2s, box-shadow .2s; }
.af input::placeholder { color: #8ca6ba; font-weight: 500; }
.af input:focus { background: rgba(2,10,30,.8); border-color: var(--fc, var(--ac)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fc, var(--ac)) 22%, transparent); }
.af-ico { position: absolute; left: 6px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; pointer-events: none; color: var(--fc, var(--ac)); background: color-mix(in srgb, var(--fc, var(--ac)) 16%, transparent); }
.af--nick { --fc: #3ddc84; } .af--pass { --fc: #ff6b81; } .af--code { --fc: #ffd44d; }

.auth-module .auth-submit { width: 100%; height: 52px; margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }

.auth-forgot { margin: -2px 2px 0; padding: 10px 12px; border-radius: 12px; font-weight: 600; font-size: .95rem; color: #ffd0d6; background: rgba(255,107,129,.12); border: 1px solid rgba(255,107,129,.35); animation: authPop .3s both; }
.auth-forgot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.auth-forgot .btn-ghost, .auth-foot .btn-ghost { padding: 8px 16px !important; font-size: .92rem !important; white-space: nowrap; }
.auth-foot { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
@keyframes authPop { from { opacity: 0; translate: 0 -6px; } }

.auth-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; font-size: .98rem; color: #d0e3f2; }
.auth-steps li { counter-increment: s; display: flex; align-items: center; gap: 10px; }
.auth-steps li::before { content: counter(s); flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 .9rem "Minecraft Standard", monospace; color: #05243a; background: var(--ac); }
.auth-note { margin: 0; color: #cfe3f3; font-size: .98rem; line-height: 1.5; }
.auth-module code { padding: 2px 7px; border-radius: 6px; background: rgba(2,10,30,.7); color: #ffd44d; }

.auth-foot { margin: 26px -30px 0; padding: 18px 30px; text-align: center; font-weight: 600; color: #cfe3f3; background: rgba(0,0,0,.28); border-top: 1px solid rgba(155,233,255,.16); }
.auth-details { margin-top: 4px; } .auth-details summary { cursor: pointer; font-weight: 700; color: #cfe3f3; margin-bottom: 12px; text-align: center; }
.auth-module .fine { text-align: center; margin: 12px 0 0; }

/* Avisos: un solo estilo para toda la web, en el lateral derecho */
.side-toasts { position: fixed; top: 92px; right: 18px; z-index: 3000; display: grid; gap: 10px; width: min(370px, calc(100vw - 28px)); pointer-events: none; }
html body .side-toast { --tc: #22b8f5; position: relative; overflow: hidden; pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 14px 16px; border-radius: 16px; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 16%, #0b1b2e), #08131f 70%); border: 1px solid color-mix(in srgb, var(--tc) 50%, transparent);
  box-shadow: 0 14px 32px rgba(0,0,0,.45), 0 0 28px color-mix(in srgb, var(--tc) 22%, transparent); animation: toastIn .35s cubic-bezier(.2,.9,.3,1.2) both; }
.side-toast--ok { --tc: #3ddc84; } .side-toast--err { --tc: #ff5d73; } .side-toast--info { --tc: #22b8f5; }
.side-toast.is-out { animation: toastOut .3s both; }
.side-toast-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #06121c; background: var(--tc); box-shadow: 0 3px 0 color-mix(in srgb, var(--tc) 55%, #000); }
.side-toast-body b { display: block; margin-top: 1px; font: 800 1rem/1.2 "DM Sans", sans-serif; color: var(--tc); }
.side-toast-body p { margin: 3px 0 0; font: 500 .93rem/1.4 "DM Sans", sans-serif; color: #d6e6f3; overflow-wrap: anywhere; }
html body .side-toasts .side-toast-x { display: grid; place-items: center; width: 28px; height: 28px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 8px; cursor: pointer; color: #a9c4d8; background: rgba(255,255,255,.08); box-shadow: none; text-shadow: none; transform: none !important; filter: none; transition: background .15s, color .15s; }
html body .side-toasts .side-toast-x:hover, html body .side-toasts .side-toast-x:focus-visible { color: #fff; background: rgba(255,255,255,.18); transform: none !important; }
.side-toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--tc); transform-origin: left; animation: toastBar var(--ms, 4.5s) linear forwards; }
@keyframes toastIn { from { opacity: 0; translate: 40px 0; } }
@keyframes toastOut { to { opacity: 0; translate: 40px 0; } }
@keyframes toastBar { to { transform: scaleX(0); } }
@media (max-width: 860px) { .side-toasts { top: 76px; right: 14px; } }
@media (prefers-reduced-motion: reduce) { .side-toast, .auth-forgot, .side-toast-bar { animation: none; } }

/* ===== Ajustes del módulo de acceso ===== */
/* Marco de la skin siempre en azul */
.auth-module .auth-badge { border-color: #22b8f5; box-shadow: 0 4px 0 #0b5679; background: rgba(34,184,245,.14); }

/* Botón principal en MAYÚSCULAS */
html body .auth-module .auth-submit { text-transform: uppercase; letter-spacing: .04em; }

/* Pie: botones verdes, en mayúsculas y sin animación de movimiento */
html body .auth-foot button.btn-ghost, html body .auth-foot button.btn-ghost:hover, html body .auth-foot button.btn-ghost:active, html body .auth-foot button.btn-ghost:focus-visible {
  transform: none !important; translate: none !important; rotate: none !important; text-transform: uppercase; letter-spacing: .04em;
  color: #0d8c4a; background: linear-gradient(180deg, #4affa6, #21FF8A); border: 0; box-shadow: 0 4px 0 #15a858, 0 8px 20px rgba(33,255,138,.25); }
html body .auth-foot button.btn-ghost { transition: filter .2s; }
html body .auth-foot button.btn-ghost:hover { filter: brightness(1.08); }

/* Pasos de «Crear cuenta»: número centrado dentro de su círculo */
.auth-steps li::before { width: 28px; height: 28px; padding: .14em 0 0; box-sizing: border-box; line-height: 1; font-size: 1rem; text-align: center; }

/* Nombres de los TOPs: el degradado recortaba la parte baja de las letras */
.ficha .stat-label { line-height: 1.35; padding: .06em 0 .22em; }

/* Pasos: dígito dibujado en píxeles y centrado de verdad dentro del círculo */
.auth-steps li::before { content: ""; width: 28px; height: 28px; padding: 0; font-size: 0; background-color: var(--ac); background-repeat: no-repeat; background-position: center; background-size: 10px 14px; }
.auth-steps li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges' fill='%2305243a'%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='2' y='1' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='2' y='3' width='1' height='1'/%3E%3Crect x='2' y='4' width='1' height='1'/%3E%3Crect x='2' y='5' width='1' height='1'/%3E%3Crect x='1' y='6' width='1' height='1'/%3E%3Crect x='2' y='6' width='1' height='1'/%3E%3Crect x='3' y='6' width='1' height='1'/%3E%3C/svg%3E"); }
.auth-steps li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges' fill='%2305243a'%3E%3Crect x='1' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='0' y='1' width='1' height='1'/%3E%3Crect x='4' y='1' width='1' height='1'/%3E%3Crect x='4' y='2' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3Crect x='2' y='4' width='1' height='1'/%3E%3Crect x='1' y='5' width='1' height='1'/%3E%3Crect x='0' y='6' width='1' height='1'/%3E%3Crect x='1' y='6' width='1' height='1'/%3E%3Crect x='2' y='6' width='1' height='1'/%3E%3Crect x='3' y='6' width='1' height='1'/%3E%3Crect x='4' y='6' width='1' height='1'/%3E%3C/svg%3E"); }
.auth-steps li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges' fill='%2305243a'%3E%3Crect x='1' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='0' y='1' width='1' height='1'/%3E%3Crect x='4' y='1' width='1' height='1'/%3E%3Crect x='4' y='2' width='1' height='1'/%3E%3Crect x='2' y='3' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3Crect x='4' y='4' width='1' height='1'/%3E%3Crect x='0' y='5' width='1' height='1'/%3E%3Crect x='4' y='5' width='1' height='1'/%3E%3Crect x='1' y='6' width='1' height='1'/%3E%3Crect x='2' y='6' width='1' height='1'/%3E%3Crect x='3' y='6' width='1' height='1'/%3E%3C/svg%3E"); }

/* Cabecera: texto de los botones centrado en vertical, discord y sonido solo icono */
html body .site-header .main-nav .nav-btn, html body .site-header .nav-btn .lbl { position: relative; top: 2px; }
html body .site-header .nav-btn.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; padding: 0; line-height: 0; }
html body .site-header .nav-btn.btn-icon svg, html body .site-header .nav-btn.btn-icon img { display: block; width: 20px; height: 20px; margin: 0; flex: none; }
html body .site-header .nav-btn.btn-icon img { image-rendering: auto; }
@media (max-width: 860px) { html body .site-header .main-nav .nav-btn { top: 0; } }

/* El botón del menú (☰) solo existe en móvil; mi regla de iconos lo estaba mostrando en escritorio */
html body .site-header .nav-btn.btn-icon.nav-burger { display: none; }
@media (max-width: 860px) { html body .site-header .nav-btn.btn-icon.nav-burger { display: inline-flex; } }
html body .site-header .nav-btn.btn-discord svg { width: 22px; height: 22px; }

/* ===== Con sesión iniciada: dos tarjetas simétricas (buscar | tu cuenta) ===== */
.profile-layout[hidden] { display: none !important; }
.profile-actions { display: none; }
html body .profile-bar.is-logged { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
html body .profile-bar.is-logged .profile-search.finder { width: 100%; max-width: 560px; flex: 1 1 420px; margin: 0; }
html body .profile-bar.is-logged .profile-actions { display: block; flex: none; padding: 0; margin: 0 0 23px; /* = borde + relleno de la tarjeta: queda a la altura de BUSCAR */ background: none; border: 0; box-shadow: none; }
.actions-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.actions-row > .pass-wrap { min-width: 0; }
.actions-row [hidden] { display: none !important; }
/* Mismo botón 3D del sitio para los tres, cada uno con su color */
html body .profile-bar .finder-row button, html body .profile-bar .actions-row button, html body .profile-bar .actions-row a.btn-main {
  height: 48px; width: auto; flex: none; margin: 0; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; text-transform: uppercase; border: 0; border-radius: 12px; font: 800 1rem "Minecraft Standard", "DM Sans", sans-serif; letter-spacing: 0; }
html body .profile-bar .finder-row button { width: auto; min-width: 112px; }
html body .btn-main.btn-main--info { color: #04304a; background: linear-gradient(180deg, #7fe3ff, #22b8f5); box-shadow: 0 4px 0 #0f7aa8, 0 8px 20px rgba(34,184,245,.25); }
html body .btn-main.btn-main--exit { color: #4a0a0a; background: linear-gradient(180deg, #ff8f8f, #ff4d4d); box-shadow: 0 4px 0 #b02323, 0 8px 20px rgba(255,77,77,.25); }
html body .btn-main.btn-main--admin { color: #1d1458; background: linear-gradient(180deg, #b7a6ff, #7c5cff); box-shadow: 0 4px 0 #4a34b3, 0 8px 20px rgba(124,92,255,.25); }
.pass-wrap { position: relative; }
.pass-pop { position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; width: min(340px, calc(100vw - 40px)); padding: 20px; }
.pass-pop[hidden] { display: none; }
.pass-pop h3 { margin: 0 0 14px; font: 800 1.1rem "DM Sans", sans-serif; color: #fff; }
.pass-pop .auth-form { display: grid; gap: 12px; }
html body .pass-pop .pass-submit { width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; }
@media (max-width: 860px) {
  html body .profile-bar.is-logged { flex-direction: column; align-items: stretch; gap: 16px; }
  html body .profile-bar.is-logged .profile-actions { margin: 0; }
  html body .profile-bar.is-logged .profile-search.finder { max-width: none; flex: none; }
  .actions-row { justify-content: stretch; } .actions-row > * { flex: 1 1 160px; } html body .profile-bar .actions-row button, html body .profile-bar .actions-row a.btn-main { width: 100%; }
  .pass-pop { right: auto; left: 0; }
}

/* ===== Sugerencias y postulaciones ===== */
/* «Enviar sugerencia»: sin animación, más angosto y en mayúsculas */
html body .me-history button.btn-suggest, html body .me-history button.btn-suggest:hover, html body .me-history button.btn-suggest:active, html body .me-history button.btn-suggest:focus-visible {
  transform: none !important; translate: none !important; rotate: none !important; transition: none; filter: none; }
html body .me-history button.btn-suggest { display: block; width: fit-content; max-width: 100%; min-width: 220px; height: 46px; margin: 18px auto 4px; padding: 0 28px; text-transform: uppercase; text-align: center; }

/* Botón de cada rol: verde si está abierta, rojo si está cerrada; siempre en mayúsculas */
html body .me-history .role-btn, html body .role-card .role-btn { text-transform: uppercase; letter-spacing: 0; border: 0; border-radius: 12px; font-weight: 800; }
html body .role-card .role-btn:disabled { opacity: 1; filter: none; cursor: not-allowed; }
html body .role-card .role-btn:disabled:hover { transform: none; filter: none; }
html body .role-card .role-btn--open { color: #0d8c4a; background: linear-gradient(180deg, #4affa6, #21FF8A); box-shadow: 0 4px 0 #15a858, 0 8px 20px rgba(33,255,138,.25); }
html body .role-card .role-btn--closed { color: #4a0a0a; background: linear-gradient(180deg, #ff8f8f, #ff4d4d); box-shadow: 0 4px 0 #b02323, 0 8px 20px rgba(255,77,77,.25); }
html body .role-card .role-btn--wait { color: #3a2300; background: linear-gradient(180deg, #ffe38f, #ffc23d); box-shadow: 0 4px 0 #b87400; }
html body .role-card .role-btn--done { color: #04304a; background: linear-gradient(180deg, #7fe3ff, #22b8f5); box-shadow: 0 4px 0 #0f7aa8; }
html body .role-card.is-closed { opacity: 1; }

/* «Enviar sugerencia»: se hunde como un botón al pasar el mouse / pulsar */
html body .me-history button.btn-suggest { transition: transform .12s ease, box-shadow .12s ease; }
html body .me-history button.btn-suggest:hover, html body .me-history button.btn-suggest:focus-visible { transform: translateY(3px) !important; filter: none; box-shadow: 0 1px 0 #c9a500, 0 4px 12px rgba(255,233,108,.25); }
html body .me-history button.btn-suggest:active { transform: translateY(4px) !important; box-shadow: 0 0 0 #c9a500, 0 2px 8px rgba(255,233,108,.2); }

/* ===== Animación de «botón oprimido» para los botones 3D del perfil =====
   Al pasar el mouse el botón baja y su borde inferior se achica; al pulsar queda hundido del todo.
   Sin giros ni zoom. Cada color define su borde en --edge. */
html body :is(.profile-bar, .me-history, .role-card, .auth-module, .pass-pop) .btn-main { --d: 4px; --edge: #c9a500;
  transition: transform .12s ease, box-shadow .12s ease, filter .2s; }
html body :is(.profile-bar, .me-history, .role-card, .auth-module, .pass-pop) .finder .btn-main, html body :is(.profile-bar, .me-history, .role-card, .auth-module, .pass-pop) .btn-main.btn-main--wait, html body :is(.profile-bar, .me-history, .role-card, .auth-module, .pass-pop) .btn-main.role-btn--wait { --edge: #b87400; }
html body :is(.profile-bar, .me-history, .role-card, .auth-module, .pass-pop) .btn-main.btn-main--info, html body :is(.profile-bar, .me-history, .role-card, .auth-module, .pass-pop) .btn-main.role-btn--done { --edge: #0f7aa8; }
html body :is(.profile-bar, .me-history, .role-card, .auth-module, .pass-pop) .btn-main.btn-main--exit, html body :is(.profile-bar, .me-history, .role-card, .auth-module, .pass-pop) .btn-main.role-btn--closed { --edge: #b02323; }
html body :is(.profile-bar, .me-history, .role-card, .auth-module, .pass-pop) .btn-main.btn-main--admin { --edge: #4a34b3; }
html body :is(.profile-bar, .me-history, .role-card, .auth-module, .pass-pop) .btn-main.role-btn--open { --edge: #15a858; }
html body :is(.profile-bar, .me-history, .role-card, .auth-module, .pass-pop) .btn-main:not(:disabled) { box-shadow: 0 var(--d) 0 var(--edge), 0 calc(var(--d) + 6px) 16px rgba(0,10,40,.28) !important; }
html body :is(.profile-bar, .me-history, .role-card, .auth-module, .pass-pop) .btn-main:not(:disabled):hover,
html body :is(.profile-bar, .me-history, .role-card, .auth-module, .pass-pop) .btn-main:not(:disabled):focus-visible { --d: 1px; transform: translateY(3px) !important; filter: brightness(1.05); }
html body :is(.profile-bar, .me-history, .role-card, .auth-module, .pass-pop) .btn-main:not(:disabled):active { --d: 0px; transform: translateY(4px) !important; filter: brightness(.97); }
@media (prefers-reduced-motion: reduce) { html body :is(.profile-bar, .me-history, .role-card, .auth-module, .pass-pop) .btn-main { transition: none; } }

/* Botón principal del módulo de acceso: el texto largo (CAMBIAR CONTRASEÑA) ya no se sale */
html body .auth-module .auth-submit { height: auto; min-height: 52px; padding: 10px 14px; font-size: .95rem; letter-spacing: 0; line-height: 1.15; text-align: center; white-space: normal; }

/* ---------- Continuar con Discord / Google / Microsoft ---------- */
.auth-module[data-mode="oauth-link"] { --ac: #5865F2; --ac2: #4752c4; --ace: #2f3796; --acs: rgba(88,101,242,.28); }
.oauth-block[hidden], .oauth-manage[hidden], .af[hidden] { display: none; }
.oauth-buttons { display: grid; gap: 10px; }
.oauth-btn { display: flex; align-items: center; justify-content: center; gap: 12px; height: 50px; padding: 0 18px; border-radius: 12px;
  font: 700 1rem "DM Sans", sans-serif; text-decoration: none; transition: transform .15s, filter .15s, box-shadow .15s; }
.oauth-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.oauth-btn:focus-visible { outline: 3px solid #FFE96C; outline-offset: 2px; }
.oauth-btn svg { flex: none; }
.oauth-btn--google { color: #1f1f1f; background: #fff; box-shadow: 0 3px 0 #c9d2dc; }
.oauth-btn--discord { color: #fff; background: #5865F2; box-shadow: 0 3px 0 #3c45a5; }
.oauth-btn--microsoft { color: #fff; background: #1c2230; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 3px 0 #0b0f18; }
.oauth-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0 16px; color: #8ca6ba; font-size: .9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.oauth-sep::before, .oauth-sep::after { content: ""; flex: 1; height: 1px; background: rgba(155,233,255,.2); }
.oauth-manage { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(155,233,255,.18); }
.oauth-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.oauth-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(2,10,30,.45); }
.oauth-row > span { flex: 1; display: grid; color: #fff; }
.oauth-row small { color: #8ca6ba; font-size: .85rem; }
.oauth-row .btn-ghost { padding: 6px 12px !important; font-size: .88rem !important; text-decoration: none; }