/* ===================================================================
   Metal Marplatense — sitio público · Noir Brutal II
   =================================================================== */
@font-face{font-family:'Anton';src:url('/fonts/anton.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Pirata';src:url('/fonts/pirata.ttf') format('truetype');font-display:swap}

:root{
  --bg:#070708;--bg2:#0c0c0e;--panel:#101012;--line:#1f1f23;
  --fg:#f3f3f4;--fg2:#8f8f97;--fg3:#57575d;
  --accent:#e01e37;--accent2:#ff3a52;--cyan:#22cfe0;
  --disp:'Anton','Arial Narrow Bold',Impact,sans-serif;
  --black:'Pirata','Anton',serif;
  --body:'Helvetica Neue',-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:ui-monospace,'Consolas','Courier New',monospace;
  --mx:50%;--my:30%;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:11px;height:8px}::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:var(--line);border:2px solid #000}::-webkit-scrollbar-thumb:hover{background:var(--accent)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);line-height:1.55;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;background:radial-gradient(130% 100% at 50% 30%,transparent 54%,#000c 100%)}
body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-size:170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 26px}
h1,h2,h3{margin:0}

/* NAV */
nav.top{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:24px;padding:14px 26px;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
nav.top.scrolled{background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(14px);border-color:var(--line)}
.logo{font-family:var(--black);font-size:26px;margin-right:auto;display:flex;align-items:center;gap:11px;padding-top:2px}
.logo .eq{display:flex;align-items:flex-end;gap:2px;height:18px}
.logo .eq i{width:3px;background:var(--accent);animation:eq 1s ease-in-out infinite}
.logo .eq i:nth-child(2){animation-delay:.2s}.logo .eq i:nth-child(3){animation-delay:.4s}.logo .eq i:nth-child(4){animation-delay:.1s}
.logo .eq i:nth-child(1){height:40%}.logo .eq i:nth-child(2){height:90%}.logo .eq i:nth-child(3){height:60%}.logo .eq i:nth-child(4){height:100%}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
nav.top .lk{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg2);transition:.15s}
nav.top .lk:hover{color:var(--fg)}
nav.top .reg{border:1px solid var(--line);padding:8px 15px;border-radius:2px;font-size:12.5px;font-weight:600;color:var(--fg);font-family:var(--body)}
nav.top .reg:hover{border-color:var(--accent)}
@media(max-width:820px){nav.top .lk{display:none}}

/* HERO */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;align-items:flex-end}
.hero .shot{position:absolute;inset:0;z-index:0;animation:kb 24s ease-out infinite alternate;background-size:cover;background-position:center;
  filter:grayscale(1) contrast(1.12) brightness(.8)}
.hero .shot.ph{background:radial-gradient(60% 45% at 50% 25%,#d7d7da 0%,#5a5a5e 30%,#161618 62%,#000 100%)}
@keyframes kb{from{transform:scale(1.05)}to{transform:scale(1.16)}}
.beams{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.beams i{position:absolute;top:-30%;left:50%;width:16%;height:150%;transform-origin:top center;background:linear-gradient(180deg,color-mix(in srgb,var(--fg) 22%,transparent),transparent 70%);filter:blur(14px)}
.beams i:nth-child(1){animation:sw1 9s ease-in-out infinite}
.beams i:nth-child(2){left:32%;width:11%;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 32%,transparent),transparent 65%);animation:sw2 11s ease-in-out infinite}
.beams i:nth-child(3){left:66%;width:12%;animation:sw3 8s ease-in-out infinite}
@keyframes sw1{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(6deg)}}
@keyframes sw2{0%,100%{transform:rotate(10deg);opacity:.6}50%{transform:rotate(-8deg);opacity:1}}
@keyframes sw3{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-4deg)}}
.spot{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(240px 240px at var(--mx) var(--my),color-mix(in srgb,var(--fg) 12%,transparent),transparent 70%)}
.hero .veil{position:absolute;inset:0;z-index:3;background:linear-gradient(0deg,var(--bg) 1%,transparent 40%,transparent 72%,color-mix(in srgb,var(--bg) 60%,transparent))}
.hero .inner{position:relative;z-index:4;width:100%;padding-bottom:8px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--fg);margin-bottom:22px}
.eyebrow .live{display:inline-flex;align-items:center;gap:7px;color:var(--accent2);font-weight:700}
.eyebrow .live::before{content:"";width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 12px var(--accent);animation:blink 1.3s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.glitch{position:relative;font-family:var(--disp);text-transform:uppercase;letter-spacing:.01em;font-size:clamp(56px,13vw,190px);line-height:.84;text-wrap:balance;margin-bottom:8px;text-shadow:0 0 46px color-mix(in srgb,var(--accent) 32%,transparent)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;mix-blend-mode:screen;pointer-events:none}
.glitch::before{color:var(--accent);animation:gA 4s infinite steps(2)}
.glitch::after{color:var(--cyan);animation:gB 3.3s infinite steps(2)}
@keyframes gA{0%,92%,100%{transform:translate(0,0);opacity:0}93%{transform:translate(-5px,2px);opacity:.85}96%{transform:translate(3px,-2px);opacity:.7}}
@keyframes gB{0%,90%,100%{transform:translate(0,0);opacity:0}91%{transform:translate(5px,-1px);opacity:.8}97%{transform:translate(-3px,2px);opacity:.6}}
.support{font-family:var(--disp);text-transform:uppercase;letter-spacing:.03em;font-size:clamp(15px,2vw,22px);color:var(--fg2);margin-bottom:22px}
.herometa{display:flex;gap:24px;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:13px;color:var(--fg);margin-bottom:26px}
.herometa .i{display:flex;align-items:center;gap:8px}.herometa .i span{color:var(--accent2)}
.gz{display:flex;gap:6px;flex-wrap:wrap}
.gpill{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--line);padding:3px 9px;border-radius:2px;color:var(--fg2)}
.cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding-bottom:44px}
/* El fondo y el borde se resetean acá: en un <button> el navegador pone su
   propio fondo claro, y .btn.gho (que sólo define borde y color de texto)
   quedaba con letras blancas sobre blanco. */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14px;padding:14px 28px;border-radius:2px;transition:.16s;cursor:pointer;
    background:transparent;border:1px solid transparent;appearance:none;-webkit-appearance:none;font-family:var(--body);line-height:1.2;text-align:center}
.btn.pri{background:var(--accent);color:#fff}.btn.pri:hover{box-shadow:0 0 34px color-mix(in srgb,var(--accent) 55%,transparent);transform:translateY(-1px)}
.btn.gho{border:1px solid var(--line);color:var(--fg)}.btn.gho:hover{border-color:var(--fg)}
.cdwn{font-family:var(--mono);font-size:13px;color:var(--fg2)}.cdwn b{color:var(--accent2);font-variant-numeric:tabular-nums;letter-spacing:.06em}

/* estado vacío */
.empty{min-height:70svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-top:80px}
.empty h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(44px,9vw,120px);line-height:.85}
.empty p{font-family:var(--mono);color:var(--fg2);margin-top:14px}

/* MARQUEE + goteo */
.marquee{border-top:1px solid var(--accent);background:#0a0304;overflow:hidden;white-space:nowrap}
.marquee .track{display:inline-flex;align-items:center;padding:12px 0;animation:mq 30s linear infinite;font-family:var(--disp);font-size:24px;text-transform:uppercase;letter-spacing:.03em}
.marquee .track span{padding:0 22px;color:var(--fg)}.marquee .track b{color:var(--accent)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bleed{height:44px;margin-bottom:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='44' viewBox='0 0 240 44' preserveAspectRatio='none'%3E%3Cpath fill='%23e01e37' d='M0 0h240v9H0z'/%3E%3Cg fill='%23e01e37'%3E%3Cpath d='M24 9c-5 0-6 21 0 27 6-6 5-27 0-27z'/%3E%3Cpath d='M70 9c-4 0-5 13 0 17 5-4 4-17 0-17z'/%3E%3Cpath d='M120 9c-6 0-7 28 0 34 7-6 6-34 0-34z'/%3E%3Cpath d='M170 9c-4 0-5 11 0 15 5-4 4-15 0-15z'/%3E%3Cpath d='M212 9c-5 0-6 22 0 28 6-6 5-28 0-28z'/%3E%3C/g%3E%3C/svg%3E") repeat-x top/240px 44px}

/* SECCIONES */
.band{padding:44px 0 20px;background:var(--bg2)}
.shead{display:flex;align-items:center;gap:14px;margin-bottom:26px;flex-wrap:wrap}
.shead .sig{width:18px;height:18px;color:var(--accent);flex:none}
.shead h2{font-family:var(--disp);text-transform:uppercase;letter-spacing:.01em;font-size:clamp(30px,5vw,54px);margin-right:auto}
.shead .all{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--fg2);border-bottom:1px solid var(--line);padding-bottom:2px}
.shead .all:hover{color:var(--fg);border-color:var(--accent)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(268px,1fr);gap:20px;overflow-x:auto;padding-bottom:18px;scroll-snap-type:x mandatory}
.card{scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s;cursor:pointer}
.card:hover{border-color:var(--accent);transform:translateY(-5px) skewX(-.6deg);box-shadow:0 14px 40px #000a,0 0 0 1px var(--accent)}
.card .pic{aspect-ratio:4/5;position:relative;overflow:hidden}
.card .pic .shot{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.1) brightness(.8);transition:transform .35s,filter .35s}
.card .pic .shot.ph{background:radial-gradient(70% 55% at 50% 30%,#c9c9cd,#3a3a3e 45%,#0e0e10 80%,#000)}
.card:hover .pic .shot{transform:scale(1.07);filter:grayscale(.5) contrast(1.15) brightness(.92)}
.card .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000c,transparent 55%)}
.card .pic .date{position:absolute;top:12px;left:12px;z-index:2;background:#000a;backdrop-filter:blur(6px);border:1px solid #ffffff1f;border-radius:3px;padding:7px 11px;text-align:center;font-family:var(--mono);line-height:1}
.card .pic .date b{display:block;font-size:20px;font-weight:700;color:#fff}
.card .pic .date span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#ffffffcc}
.card .info{padding:14px 16px 18px}
.card .info .cn{font-family:var(--disp);text-transform:uppercase;font-size:26px;line-height:.9}
.card .info .cv{font-family:var(--mono);font-size:11px;color:var(--fg2);margin-top:7px}
.card .info .cg{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}

.arch{background:var(--bg);border-top:1px solid var(--line);margin-top:40px;padding:56px 0 70px}
.arch .sub{font-family:var(--mono);font-size:12px;color:var(--fg3);margin:-14px 0 26px}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.past{position:relative;aspect-ratio:16/11;border-radius:4px;overflow:hidden;border:1px solid var(--line);cursor:pointer}
.past .shot{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1) brightness(.5) contrast(1.1);transition:.3s}
.past .shot.ph{background:radial-gradient(60% 60% at 50% 35%,#b8b8bc,#2e2e32 50%,#000)}
.past:hover .shot{filter:grayscale(.5) brightness(.85)}
.past .lab{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:13px 13px 11px;background:linear-gradient(0deg,#000e,transparent)}
.past .lab .pn{font-family:var(--disp);text-transform:uppercase;font-size:22px;line-height:.9}
.past .lab .pd{font-family:var(--mono);font-size:10px;color:#ffffffbb;margin-top:5px;display:flex;justify-content:space-between;gap:8px}
.past .lab .pd .v{color:var(--accent2)}

footer{border-top:1px solid var(--line);padding:32px 0 60px;font-family:var(--mono);font-size:11.5px;color:var(--fg3)}
footer .fx{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer b{color:var(--fg);font-family:var(--black);font-size:20px}

/* ===== DETALLE DE FECHA ===== */
.fpage{padding:100px 0 40px}
.fgrid{display:grid;grid-template-columns:400px 1fr;gap:40px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr}}
.flyerbig{position:relative;aspect-ratio:3/4;border:1px solid var(--line);border-radius:5px;overflow:hidden;background-size:cover;background-position:center}
.flyerbig.ph{background:radial-gradient(60% 50% at 50% 30%,#cfcfd4,#333 45%,#0c0c0e 82%,#000);filter:grayscale(1) contrast(1.1) brightness(.85)}
.flyerbig .stamp{position:absolute;top:14px;left:14px;background:#000b;backdrop-filter:blur(6px);border:1px solid var(--accent);border-radius:3px;padding:8px 12px;font-family:var(--mono);text-align:center;line-height:1.1}
.flyerbig .stamp b{display:block;font-size:26px;color:#fff}.flyerbig .stamp span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2)}
.finfo h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(38px,7vw,84px);line-height:.86;margin-bottom:6px}
.cancelled{display:inline-block;background:var(--accent);color:#fff;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;padding:6px 12px;border-radius:3px;margin-bottom:18px}
.fmeta{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin:14px 0 20px}
.fmeta .r{display:flex;gap:12px;background:var(--panel);padding:13px 15px;font-size:14px}
.fmeta .r .k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3);width:92px;flex:none;padding-top:2px}
.fmeta .r b{color:#fff}.fmeta .r a{color:var(--accent2)}
.finfo .desc{color:#cfcfd4;font-size:15px;max-width:60ch;margin-bottom:20px}
.factions{display:flex;gap:10px;flex-wrap:wrap}
.videos{margin-top:36px}
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}@media(max-width:600px){.vgrid{grid-template-columns:1fr}}
.vid{position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.back{font-family:var(--mono);font-size:12px;color:var(--fg2);margin-bottom:18px;display:inline-block}
.back:hover{color:var(--accent2)}

/* ===== PÁGINA DE BANDA ===== */
.bhero{position:relative;min-height:52vh;display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line);margin-top:0}
.bhero .shot{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.1) brightness(.75);animation:kb 24s ease-out infinite alternate}
.bhero .shot.ph{background:radial-gradient(60% 50% at 50% 25%,#bdbdc2,#333 45%,#0c0c0e 82%,#000)}
.bhero .veil{position:absolute;inset:0;background:linear-gradient(0deg,var(--bg),transparent 60%,#0009)}
.bhero .inner{position:relative;z-index:2;width:100%;padding:110px 0 34px}
.bhero .eyeb{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent2);margin-bottom:10px}
.bhero h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(46px,10vw,120px);line-height:.85;text-shadow:0 0 40px color-mix(in srgb,var(--accent) 26%,transparent)}
.brow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:16px}
.follow{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:none;font-weight:700;font-size:13px;padding:11px 18px;border-radius:2px;cursor:pointer;transition:.16s;font-family:var(--body)}
.follow:hover{box-shadow:0 0 26px color-mix(in srgb,var(--accent) 50%,transparent)}
.follow.on{background:transparent;border:1px solid var(--accent);color:var(--accent2)}
.follow .n{font-family:var(--mono);opacity:.85}
.bpage{padding:40px 0}
.blk{margin-bottom:38px}
.blkhead{display:flex;align-items:center;gap:10px;margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:9px}
.blkhead .sig{width:18px;height:18px;color:var(--accent);flex:none}
.blkhead h2{font-family:var(--disp);text-transform:uppercase;font-size:26px;letter-spacing:.02em;margin-right:auto}
.blkhead .mini{font-family:var(--mono);font-size:11px;color:var(--fg3)}
.bio{color:#cfcfd4;font-size:15px;max-width:65ch;white-space:pre-line}
.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.lk-ext{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);padding:8px 13px;border-radius:2px;color:var(--fg);transition:.15s;display:inline-flex;gap:7px;align-items:center}
.lk-ext:hover{border-color:var(--accent);color:#fff}
.lk-ext .dot{width:7px;height:7px;border-radius:50%}
.members{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;max-width:520px}
.member{display:flex;align-items:center;gap:12px;background:var(--panel);padding:11px 14px}
.member .mn{font-weight:700;font-size:14px}
.member .role{font-family:var(--mono);font-size:11px;color:var(--fg2);margin-left:auto}
.member .unreg{font-family:var(--mono);font-size:9.5px;color:var(--fg3);border:1px solid var(--line);padding:2px 6px;border-radius:2px;margin-left:8px}
.history{display:flex;flex-direction:column}
.hrow{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line);transition:.15s}
.hrow:hover{background:var(--panel);padding-left:10px}
.hrow .hd{font-family:var(--mono);font-size:12px;color:var(--accent2);text-align:center;line-height:1.2}
.hrow .hd b{display:block;font-size:18px;color:#fff}
.hrow .ht{font-weight:700;font-size:15px}
.hrow .hv{font-family:var(--mono);font-size:11px;color:var(--fg2)}

/* ===== AUTH (registro / login) ===== */
.authwrap{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:110px 22px 60px}
.authbox{width:100%;max-width:430px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:32px}
.authbox h1{font-family:var(--disp);text-transform:uppercase;font-size:36px;line-height:.9;margin-bottom:6px}
.authbox .sub{font-family:var(--mono);font-size:12px;color:var(--fg2);margin-bottom:22px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--fg3)}
.field input{background:#0a0a0c;border:1px solid var(--line);border-radius:3px;color:var(--fg);padding:12px 13px;font-size:14px;font-family:var(--body)}
.field input:focus{outline:none;border-color:var(--accent)}
.field .err{color:var(--accent2);font-family:var(--mono);font-size:11px}
.authbox .btn{width:100%;justify-content:center;margin-top:6px}
.authbox .alt{font-family:var(--mono);font-size:12px;color:var(--fg2);margin-top:18px;text-align:center}
.authbox .alt a{color:var(--accent2)}
.formerr{background:color-mix(in srgb,var(--accent) 16%,transparent);border:1px solid var(--accent);color:#fff;font-family:var(--mono);font-size:12px;padding:10px 12px;border-radius:3px;margin-bottom:16px}
.formok{background:color-mix(in srgb,#1db954 16%,transparent);border:1px solid #1db954;color:#eafff2;font-family:var(--mono);font-size:12px;padding:10px 12px;border-radius:3px;margin-bottom:16px}
.vbanner{background:color-mix(in srgb,var(--accent) 14%,transparent);border-bottom:1px solid var(--accent);color:#fff;font-family:var(--mono);font-size:12.5px;text-align:center;padding:10px 16px}
.vbanner a{color:var(--accent2);text-decoration:underline}
.row2{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--fg2);margin-bottom:8px}

/* ===== NOTIFICACIONES ===== */
.bell{position:relative;display:inline-flex;align-items:center}
.nbadge{position:absolute;top:-7px;right:-9px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:9px;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1}
.notifpage{max-width:720px;margin:0 auto;padding:110px 22px 60px}
.notifpage h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(38px,7vw,56px);line-height:.9;margin-bottom:22px}
.nlist{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.nitem{display:flex;gap:14px;align-items:center;background:var(--panel);padding:15px 16px;transition:.15s}
.nitem:hover{background:var(--panel2)}
.nitem.unread{border-left:3px solid var(--accent)}
.nitem .ic{width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,var(--panel));display:flex;align-items:center;justify-content:center;color:var(--accent2);flex:none}
.nitem .nt{font-weight:700;font-size:14px}
.nitem .nb{font-family:var(--mono);font-size:11px;color:var(--fg2);margin-top:3px}
.nitem .nw{font-family:var(--mono);font-size:10px;color:var(--fg3);margin-left:auto;white-space:nowrap;align-self:flex-start;padding-top:3px}
.nempty{font-family:var(--mono);color:var(--fg2);padding:44px 0;text-align:center}

/* ===== LISTADOS (bandas / lugares / archivo) ===== */
.listpage{padding:110px 0 70px;min-height:70svh}
.lphead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lphead .sig{width:22px;height:22px;color:var(--accent);flex:none}
.lphead h1{font-family:var(--disp);text-transform:uppercase;letter-spacing:.01em;font-size:clamp(40px,8vw,88px);line-height:.85}
.lphead .cnt{font-family:var(--mono);font-size:13px;color:var(--fg3);border:1px solid var(--line);padding:4px 10px;border-radius:2px;align-self:center}
.lpsub{font-family:var(--mono);font-size:12.5px;color:var(--fg2);margin:12px 0 26px;max-width:70ch}
.lpempty{font-family:var(--mono);color:var(--fg2);padding:50px 0;text-align:center}

/* filtros bandas */
.filters{margin-bottom:30px}
.fsearch{width:100%;max-width:420px;background:#0a0a0c;border:1px solid var(--line);border-radius:3px;color:var(--fg);padding:12px 14px;font-size:14px;font-family:var(--body);margin-bottom:16px}
.fsearch:focus{outline:none;border-color:var(--accent)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--line);padding:7px 12px;border-radius:2px;color:var(--fg2);transition:.14s}
.chip:hover{border-color:var(--fg);color:var(--fg)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* grilla de bandas */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.bcard{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.bcard:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 14px 40px #000a,0 0 0 1px var(--accent)}
.bcard .shot{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.1) brightness(.72);transition:.35s}
.bcard .shot.ph{background:radial-gradient(70% 55% at 50% 30%,#c9c9cd,#3a3a3e 45%,#0e0e10 80%,#000)}
.bcard:hover .shot{transform:scale(1.06);filter:grayscale(.5) brightness(.9)}
.bcard .lab{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 14px 13px;background:linear-gradient(0deg,#000e 20%,transparent)}
.bcard .lab .bn{font-family:var(--disp);text-transform:uppercase;font-size:24px;line-height:.9}
.bcard .lab .bg{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}
.bcard .lab .up{font-family:var(--mono);font-size:10px;color:var(--accent2);letter-spacing:.04em}
.bcard .lab .bg .time{font-family:var(--mono);font-size:11px;color:var(--fg2)}
.bcard .datetag{position:absolute;top:12px;left:12px;z-index:2;background:#000a;backdrop-filter:blur(6px);border:1px solid #ffffff1f;border-radius:3px;padding:7px 11px;text-align:center;font-family:var(--mono);line-height:1}
.bcard .datetag b{display:block;font-size:20px;font-weight:700;color:#fff}
.bcard .datetag span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#ffffffcc}

/* lista de lugares */
.vlist{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.vrow{display:flex;align-items:center;gap:14px;background:var(--panel);padding:15px 16px;transition:.15s}
.vrow:hover{background:var(--bg2)}
.vrow .vpin{color:var(--accent2);font-size:16px;flex:none}
.vrow .vmain{margin-right:auto;min-width:0}
.vrow .vn{font-weight:700;font-size:16px}
.vrow .va{font-family:var(--mono);font-size:11.5px;color:var(--fg2);margin-top:3px}
.vrow .vstats{display:flex;flex-direction:column;gap:3px;text-align:right;font-family:var(--mono);font-size:11px}
.vrow .vstats .up{color:var(--accent2)}
.vrow .vstats .vhist{color:var(--fg2)}.vrow .vstats .vhist:hover{color:var(--fg)}
.vrow .vmap{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--line);padding:8px 12px;border-radius:2px;color:var(--fg);flex:none;transition:.15s}
.vrow .vmap:hover{border-color:var(--accent);color:#fff}
@media(max-width:640px){.vrow{flex-wrap:wrap}.vrow .vstats{text-align:left;flex-direction:row;gap:12px;flex-basis:100%}}

/* filtros del archivo */
.afilters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:28px}
.afilters select{background:#0a0a0c;border:1px solid var(--line);border-radius:3px;color:var(--fg);padding:10px 12px;font-size:13px;font-family:var(--mono);cursor:pointer}
.afilters select:focus{outline:none;border-color:var(--accent)}
.afilters .fclear{font-family:var(--mono);font-size:12px;color:var(--accent2);padding:8px 4px}
.afilters .fclear:hover{color:#fff}

/* paginador */
.pager{margin-top:34px}
.mmpager{display:flex;align-items:center;justify-content:center;gap:18px}
.mmpager .pg{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--line);padding:10px 16px;border-radius:2px;color:var(--fg);transition:.15s}
.mmpager .pg:hover{border-color:var(--accent);color:#fff}
.mmpager .pg.disabled{opacity:.3;pointer-events:none}
.mmpager .pgnum{font-family:var(--mono);font-size:12px;color:var(--fg2);font-variant-numeric:tabular-nums}

/* ===== COBERTURA MM (videos YouTube) ===== */
.cover{background:var(--bg2);border-top:1px solid var(--line);padding:52px 0 60px}
.cover .sub{font-family:var(--mono);font-size:12px;color:var(--fg3);margin:-14px 0 24px}
.vrail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:18px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory}
.vgridfull{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.vcard{scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.vcard:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 14px 40px #000a,0 0 0 1px var(--accent)}
.vthumb{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;filter:grayscale(.35) contrast(1.05) brightness(.82);transition:.3s}
.vcard:hover .vthumb{filter:grayscale(0) brightness(1)}
.vthumb::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000a,transparent 55%)}
.vthumb .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--accent) 86%,#000);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;padding-left:3px;box-shadow:0 0 26px color-mix(in srgb,var(--accent) 55%,transparent);transition:.2s}
.vcard:hover .vthumb .play{transform:translate(-50%,-50%) scale(1.12)}
.vt{padding:13px 14px 16px;font-size:13.5px;line-height:1.35;color:var(--fg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== SOLAPAS (persona / banda) ===== */
.tabs{display:flex;gap:0;margin:0 0 22px;border-bottom:1px solid var(--line)}
.tabs .tab{flex:1;text-align:center;padding:12px 10px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--fg3);border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s}
.tabs .tab:hover{color:var(--fg)}
.tabs .tab.on{color:var(--fg);border-bottom-color:var(--accent)}

/* ===== ENTRADAS ===== */
.tickets{margin:26px 0 6px;padding:20px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel)}
.tkhead{font-family:var(--display);font-size:22px;letter-spacing:.02em;text-transform:uppercase;margin-bottom:6px}
.tksub{font-family:var(--mono);font-size:12px;color:var(--fg2);margin:0 0 12px}
.tkwa{display:flex;gap:10px;flex-wrap:wrap}
.btn.wa{border:1px solid #25d366;color:#25d366}
.btn.wa:hover{background:#25d366;color:#0a0a0a}
.tkonline{margin-top:14px}

/* ===== SPOTIFY EMBED ===== */
.spotifyembed{margin-top:18px;border-radius:12px;overflow:hidden;max-width:560px}
.spotifyembed iframe{display:block;border:0;border-radius:12px}

footer .vcount{display:inline-block;margin-left:12px;padding:3px 9px;border:1px solid var(--line);border-radius:2px;
    font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--fg3)}

/* footer nav */
footer .fnav{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
footer .fnav a{color:var(--fg3);transition:.15s}
footer .fnav a:hover{color:var(--fg)}

/* ===== COMUNIDAD / CHAT ===== */
.chatpage{padding:110px 0 60px;min-height:80svh}
.chatbox{margin-top:22px;border:1px solid var(--line);border-radius:6px;background:var(--panel);overflow:hidden;display:flex;flex-direction:column;max-width:760px}
.messages{height:56vh;min-height:360px;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:14px}
.chatempty{margin:auto;font-family:var(--mono);font-size:12px;color:var(--fg3)}
.msg{max-width:78%;align-self:flex-start;display:flex;flex-direction:column;gap:3px}
.msg.mine{align-self:flex-end;align-items:flex-end}
.msg .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent2)}
.msg.mine .who{color:var(--fg3)}
.msg .bubble{background:#141417;border:1px solid var(--line);border-radius:3px 12px 12px 12px;padding:9px 13px;font-size:14px;line-height:1.4;word-break:break-word;white-space:pre-wrap}
.msg.mine .bubble{background:color-mix(in srgb,var(--accent) 20%,#141417);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:12px 3px 12px 12px}
.msg .when{font-family:var(--mono);font-size:9.5px;color:var(--fg3)}
.chatform{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line);background:var(--bg2)}
.chatform input{flex:1;background:#0a0a0c;border:1px solid var(--line);border-radius:3px;color:var(--fg);padding:12px 14px;font-size:14px;font-family:var(--body)}
.chatform input:focus{outline:none;border-color:var(--accent)}
.chatform .btn{padding:12px 22px}
.chatstatus{font-family:var(--mono);font-size:11px;color:var(--accent2);padding:0 14px 12px;min-height:8px}
.msg .who.dm{transition:.15s}.msg .who.dm:hover{color:#fff;text-decoration:underline}
.whorow{display:flex;align-items:center;gap:8px}
.flag{background:none;border:none;color:var(--fg3);cursor:pointer;font-size:12px;padding:0;line-height:1;transition:.15s;opacity:0}
.msg:hover .flag{opacity:1}.flag:hover{color:var(--accent2)}.flag:disabled{cursor:default;color:var(--accent2)}
.dmactions{display:flex;gap:8px;margin-left:auto}
.modbtn{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--line);background:none;color:var(--fg2);padding:7px 11px;border-radius:2px;cursor:pointer;transition:.15s}
.modbtn:hover{border-color:var(--accent);color:#fff}.modbtn.on{border-color:var(--accent);color:var(--accent2)}
/* bandeja de DMs */
.convlist{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:20px}
.convrow{display:flex;align-items:center;gap:14px;background:var(--panel);padding:14px 16px;transition:.15s;position:relative}
.convrow:hover{background:var(--bg2)}
.convrow.unread .cn{color:#fff}
.cavatar{width:44px;height:44px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--accent) 22%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:20px;color:#fff;text-transform:uppercase}
.cmain{margin-right:auto;min-width:0}
.cn{font-weight:700;font-size:15px}
.cprev{font-family:var(--mono);font-size:11.5px;color:var(--fg2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46ch}
.cwhen{font-family:var(--mono);font-size:10.5px;color:var(--fg3);white-space:nowrap}
.cdot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 10px var(--accent)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── Reglas / gate de aceptación ───────────────────────────────── */
.tgroup{display:flex;align-items:center;gap:12px;margin:30px 0 12px}
.tgroup .tletter{font-family:var(--disp);font-size:20px;color:var(--fg);background:var(--panel);border:1px solid var(--line);width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;flex:none}
.tgroup h3{font-family:var(--disp);text-transform:uppercase;font-size:20px;letter-spacing:.02em;margin:0}
.trule{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:4px;padding:15px 17px;margin-bottom:10px;max-width:860px}
.trule.hard{border-left-color:var(--accent2);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.trule.sel{cursor:pointer;transition:border-color .15s,background .15s}
.trule.sel:hover{border-color:var(--fg3);border-left-color:var(--accent)}
.trule input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;margin:2px 0 0;border:1.5px solid var(--accent);border-radius:3px;background:transparent;cursor:pointer;display:grid;place-content:center}
.trule input[type=checkbox]::after{content:"✓";color:#fff;font-size:13px;font-weight:700;opacity:0;transition:.12s}
.trule input[type=checkbox]:checked{background:var(--accent)}
.trule input[type=checkbox]:checked::after{opacity:1}
.trule input[type=checkbox]:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.trule:has(input:checked){border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.trule .tdot{color:var(--accent);font-size:11px;line-height:1.7;flex:none}
.trule .ttxt{font-size:14.5px;color:var(--fg);line-height:1.55}
.tgate{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:26px 0 10px}
.tgate .btn:disabled{background:var(--line);color:var(--fg3);cursor:not-allowed;box-shadow:none;transform:none}
.tcount{font-family:var(--mono);font-size:12px;color:var(--fg2)}
.tsmall{font-family:var(--mono);font-size:11.5px;color:var(--fg3);max-width:70ch;line-height:1.8}
.mlink{position:relative;display:inline-flex;align-items:center}
.mlink .nbadge{position:static;margin-left:7px;top:auto;right:auto}
.onlinedot{display:inline-flex;align-items:center;gap:6px}
.onlinedot::before{content:"";width:7px;height:7px;border-radius:50%;background:#37c46e;box-shadow:0 0 8px #37c46e}
/* ── Documentos legales ────────────────────────────────────────── */
.legaldoc{max-width:820px;margin-top:10px}
.lsec{padding:22px 0;border-bottom:1px solid var(--line)}
.lsec h2{font-family:var(--disp);text-transform:uppercase;font-size:23px;letter-spacing:.01em;display:flex;align-items:baseline;gap:12px;margin:0 0 12px}
.lsec .lnum{font-family:var(--mono);font-size:12px;color:var(--accent);flex:none}
.lsec p{font-size:14.5px;color:var(--fg2);line-height:1.75;margin:0 0 10px;max-width:72ch}
.lsec p:last-child{margin-bottom:0}
.tcheck{display:flex;gap:11px;align-items:flex-start;margin:6px 0 18px;font-size:13px;color:var(--fg2);line-height:1.5;cursor:pointer}
.tcheck input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;margin-top:1px;border:1.5px solid var(--accent);border-radius:3px;background:transparent;cursor:pointer;display:grid;place-content:center}
.tcheck input[type=checkbox]::after{content:"✓";color:#fff;font-size:12px;font-weight:700;opacity:0}
.tcheck input[type=checkbox]:checked{background:var(--accent)}
.tcheck input[type=checkbox]:checked::after{opacity:1}
.tcheck a{color:var(--accent2)}

/* ── Menú de la cuenta (nav) ───────────────────────────────────── */
.umenu{position:relative}
.umenu summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg);display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:3px}
.umenu summary::-webkit-details-marker{display:none}
.umenu summary:hover{border-color:var(--fg3)}
.umenu[open] summary{border-color:var(--accent)}
.umenu .caret{font-size:9px;color:var(--fg3)}
.udrop{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:6px;box-shadow:0 18px 50px #000a;z-index:60;display:flex;flex-direction:column}
.udrop a,.udrop button{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg2);padding:10px 12px;border-radius:3px}
.udrop a:hover,.udrop button:hover{background:var(--panel2);color:var(--fg)}
.udrop .udating{color:var(--accent2)}
.udrop form{margin:0;border-top:1px solid var(--line);margin-top:4px;padding-top:4px}

/* ── Puerta del módulo de citas ────────────────────────────────── */
.gwsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:8px}
.gwstep{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:18px}
.gwstep .gwn{font-family:var(--mono);font-size:11px;color:var(--accent)}
.gwstep h3{font-family:var(--disp);text-transform:uppercase;font-size:19px;margin:8px 0 8px}
.gwstep p{font-size:13.5px;color:var(--fg2);line-height:1.65;margin:0}

/* ── Gesto de verificación ─────────────────────────────────────── */
.gesto{background:color-mix(in srgb,var(--accent) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-left:3px solid var(--accent);border-radius:5px;padding:20px 22px;margin:8px 0 20px;max-width:620px}
.gestolabel{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent2);margin-bottom:8px}
.gestotxt{font-family:var(--disp);text-transform:uppercase;font-size:clamp(22px,4vw,34px);line-height:1.05;color:#fff}
.field input[type=file]{width:100%;background:#0a0a0c;border:1px solid var(--line);border-radius:3px;color:var(--fg2);padding:11px 12px;font-size:13px;font-family:var(--mono);cursor:pointer}
.field input[type=date]{width:100%;background:#0a0a0c;border:1px solid var(--line);border-radius:3px;color:var(--fg);padding:11px 12px;font-size:14px;font-family:var(--mono)}
.field input[type=date]:focus,.field input[type=file]:focus{outline:none;border-color:var(--accent)}

/* ── Diálogo de reporte ────────────────────────────────────────── */
.repdlg{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:0;max-width:460px;width:calc(100% - 32px);box-shadow:0 30px 80px #000c}
.repdlg::backdrop{background:#000a;backdrop-filter:blur(3px)}
.repdlg form{padding:22px}
.repdlg h3{font-family:var(--disp);text-transform:uppercase;font-size:24px;margin:0 0 6px}
.repsub{font-family:var(--mono);font-size:11.5px;color:var(--fg2);margin:0 0 16px;line-height:1.6}
.repmotivos{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.repmot{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:3px;cursor:pointer;font-size:13.5px}
.repmot:hover{background:var(--panel2)}
.repmot.urg span{color:var(--accent2)}
.repmot input{accent-color:var(--accent);width:15px;height:15px;flex:none}
.repdlg textarea{width:100%;min-height:72px;background:#0a0a0c;border:1px solid var(--line);border-radius:3px;color:var(--fg);padding:10px 12px;font-size:13px;font-family:var(--body);resize:vertical}
.repdlg textarea:focus{outline:none;border-color:var(--accent)}
.repacc{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.repacc .btn{padding:11px 20px;font-size:13px}
.reptoast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:9999;max-width:min(560px,92vw);background:var(--panel);border:1px solid var(--accent);border-left:3px solid var(--accent);border-radius:5px;padding:14px 18px;font-size:13.5px;color:var(--fg);box-shadow:0 16px 50px #000b;transition:opacity .5s}
.reptoast.off{opacity:0}

/* ── Perfil de citas ───────────────────────────────────────────── */
.optin{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:5px;padding:20px 22px;margin:6px 0 10px;max-width:860px}
.optin h3{font-family:var(--disp);text-transform:uppercase;font-size:21px;margin:0 0 6px}
.optin p{margin:0;font-size:13.5px;color:var(--fg2);line-height:1.6;max-width:60ch}
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;max-width:860px;margin:6px 0 18px}
.fotoc{background:var(--panel);border:1px solid var(--line);border-radius:5px;overflow:hidden;position:relative}
.fotoc.priv{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.fotoc img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.fotoe{font-family:var(--mono);font-size:10.5px;color:var(--fg2);padding:7px 9px;border-top:1px solid var(--line)}
.fotoacc{display:flex;gap:6px;padding:0 9px 9px}
.fotoacc form{margin:0}
.mini{display:inline-block;background:var(--panel2);border:1px solid var(--line);color:var(--fg2);font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:6px 9px;border-radius:3px;cursor:pointer}
.mini:hover{color:var(--fg);border-color:var(--fg3)}
.mini.del:hover{color:var(--accent2);border-color:var(--accent)}
.perfilform{max-width:700px}
.perfilform .field{margin-bottom:18px}
.perfilform textarea,.perfilform select,.perfilform input[type=number]{width:100%;background:#0a0a0c;border:1px solid var(--line);border-radius:3px;color:var(--fg);padding:11px 12px;font-size:14px;font-family:var(--body)}
.perfilform textarea:focus,.perfilform select:focus,.perfilform input:focus{outline:none;border-color:var(--accent)}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.fila{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:8px 14px;cursor:pointer;font-size:13px}
.chip:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel))}
.chip input{accent-color:var(--accent)}
a.gwstep{display:block;text-decoration:none;color:inherit;transition:border-color .18s,transform .18s}
a.gwstep:hover{border-color:var(--accent);transform:translateY(-3px)}
.vrow{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:13px 16px;margin-bottom:8px;max-width:700px}
.vrow form{margin:0}
.vrow .tcount{display:block;margin-top:3px}
.avisoprivado{background:color-mix(in srgb,var(--accent) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line));border-radius:5px;padding:15px 18px;font-size:13.5px;color:var(--fg);line-height:1.65;max-width:820px;margin:10px 0 20px}

/* ── Mazo y matches ────────────────────────────────────────────── */
.mazo{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;max-width:960px;margin-top:8px}
.carta{background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.carta:hover{border-color:var(--accent);transform:translateY(-3px)}
.cfoto{position:relative;aspect-ratio:3/4;overflow:hidden}
.cfoto img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.05)}
.cfoto .cph{width:100%;height:100%;background:radial-gradient(70% 55% at 50% 30%,#2a2a2e,#131315 60%,#0a0a0c)}
.cfoto::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000d,transparent 55%)}
.cnombre{position:absolute;left:14px;bottom:12px;z-index:2;display:flex;align-items:baseline;gap:9px}
.cnombre b{font-family:var(--disp);text-transform:uppercase;font-size:26px;line-height:1;color:#fff}
.cnombre span{font-family:var(--mono);font-size:14px;color:#ffffffc4}
.cbody{padding:14px 16px;flex:1}
.czona{font-family:var(--mono);font-size:11px;color:var(--fg3);text-transform:uppercase;letter-spacing:.08em}
.cabout{font-size:13.5px;color:var(--fg2);line-height:1.6;margin:9px 0 0}
.cencomun{margin-top:12px;font-size:12.5px;color:var(--fg)}
.cencomun span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin-bottom:3px}
.cg{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cg .gp{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg2);border:1px solid var(--line);border-radius:2px;padding:4px 7px}
.cacc{display:flex;gap:10px;padding:0 16px 16px}
.cacc form{flex:1;margin:0}
.cacc .btn{width:100%;justify-content:center;padding:12px}
.matchwrap{max-width:760px}
.matchtitulo{text-align:center;padding:30px 0 10px}
.matchtitulo h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(46px,10vw,96px);line-height:.86;text-shadow:0 0 46px color-mix(in srgb,var(--accent) 40%,transparent)}
.matchtitulo p{color:var(--fg2);font-size:15.5px;margin-top:14px}
.matchseg{background:var(--panel);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-left:3px solid var(--accent);border-radius:6px;padding:22px 24px;margin:22px 0}
.matchseg h3{font-family:var(--disp);text-transform:uppercase;font-size:20px;margin:0 0 12px}
.matchseg ul{margin:0;padding-left:18px}
.matchseg li{font-size:14px;color:var(--fg2);line-height:1.7;margin-bottom:8px}
.matchseg li b{color:var(--fg)}
.matchseg a{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:11.5px;color:var(--accent2)}
.matchrow{align-items:center}
.mrpersona{display:flex;align-items:center;gap:14px}
.mravatar{width:52px;height:52px;border-radius:4px;object-fit:cover;flex:none}
.mravatar.ph{background:#1a1a1e}
.mracc{display:flex;gap:8px;align-items:center}
.mracc form{margin:0}

/* ── Chat efímero del match ────────────────────────────────────── */
.bubble.efim{cursor:pointer;border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--panel));transition:background .15s,border-color .15s}
.bubble.efim:hover{background:color-mix(in srgb,var(--accent) 16%,var(--panel));border-color:var(--accent)}
.bubble.efim .etxt{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--fg2)}
.bubble.efim.propio{border-style:solid;border-color:var(--line);background:var(--panel)}
.bubble.efim.ido{cursor:default;border-style:solid;border-color:var(--line);background:transparent;opacity:.55}
.bubble.efim.ido:hover{background:transparent;border-color:var(--line)}
.efimform{flex-wrap:wrap}
.efimform input[type=text]{min-width:180px}
.adjunto{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;width:44px;background:#0a0a0c;border:1px solid var(--line);border-radius:3px;cursor:pointer;font-size:17px}
.adjunto:hover{border-color:var(--accent)}
.adjunto input{position:absolute;inset:0;opacity:0;cursor:pointer}
.dosvistas{display:inline-flex;align-items:center;gap:7px;background:#0a0a0c;border:1px solid var(--line);border-radius:3px;padding:0 12px;cursor:pointer;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--fg2)}
.dosvistas:has(input:checked){border-color:var(--accent);color:var(--fg)}
.dosvistas input{accent-color:var(--accent)}
.linkbtn{background:none;border:none;padding:0;color:var(--accent2);font:inherit;cursor:pointer}
.linkbtn:hover{color:#fff}
.visor{position:fixed;inset:0;z-index:9998;background:#000d;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px}
.vcaja{max-width:min(760px,94vw);max-height:90svh;display:flex;flex-direction:column;gap:14px;align-items:center}
.vcont{overflow:auto;max-height:78svh;text-align:center}
.vcont img{max-width:100%;max-height:74svh;border-radius:6px;border:1px solid var(--line)}
.vcont p{font-size:17px;color:var(--fg);line-height:1.6;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:20px 24px;margin:0}

/* ── Mi cuenta ─────────────────────────────────────────────────── */
.avatarprev{display:block;width:96px;height:96px;object-fit:cover;border-radius:5px;border:1px solid var(--line);margin-bottom:10px}
.btn.darse{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--accent2)}
.btn.darse:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.vbanner.baja{background:color-mix(in srgb,var(--accent) 18%,#000);border-color:var(--accent)}
.perfilform input[type=text],.perfilform input[type=password]{width:100%;background:#0a0a0c;border:1px solid var(--line);border-radius:3px;color:var(--fg);padding:11px 12px;font-size:14px;font-family:var(--body)}
.perfilform input[type=file]{width:100%;background:#0a0a0c;border:1px solid var(--line);border-radius:3px;color:var(--fg2);padding:11px 12px;font-size:13px;font-family:var(--mono)}

/* ── Badge de estado de fecha (cancelada/reprogramada) ─────────── */
.estbadge{display:inline-flex;align-items:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:4px 8px;border-radius:2px;line-height:1}
.estbadge.canc{background:var(--accent);color:#fff}
.estbadge.resc{background:var(--warn);color:#000}
.pic .estbadge,.datetag + .estbadge{position:absolute;top:12px;right:12px;z-index:3}
.bcard{position:relative}
.card.iscanc .info .cn,.bcard.iscanc .lab .bn{text-decoration:line-through;opacity:.7}
.card.iscanc .shot,.bcard.iscanc .shot{filter:grayscale(1) brightness(.6)}