/* =====================================================================
   Venezuela Nocturna — estilos de la web
   Tema único nocturno (decisión de marca). Tipos: Big Shoulders Display
   (letreros de la calle), Figtree (texto), JetBrains Mono (datos).
   ===================================================================== */
:root{
  --noche:#060914; --noche-2:#0a1024; --noche-3:#111a37; --noche-4:#18234a;
  --linea:#1f2b55; --linea-2:#2b3a70;
  --texto:#e8ebf7; --texto-2:#a3abcb; --texto-3:#6f789d;
  --azul:#3346ff; --azul-2:#5b6bff; --azul-suave:rgba(51,70,255,.14);
  --amarillo:#ffd21f; --rojo:#ef2b4a; --verde:#2fbf71;
  --amarillo-suave:rgba(255,210,31,.12); --rojo-suave:rgba(239,43,74,.13); --verde-suave:rgba(47,191,113,.13);
  --radio:10px; --radio-s:6px;
  --display:"Big Shoulders Display","Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --cuerpo:"Figtree","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --mono:"JetBrains Mono",Consolas,"Courier New",monospace;
  --ancho:1200px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--noche);color:var(--texto);font-family:var(--cuerpo);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img{max-width:100%;display:block}
a{color:var(--azul-2);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#8f9bff}
:focus-visible{outline:2px solid var(--amarillo);outline-offset:3px;border-radius:3px}
h1,h2,h3,h4{text-wrap:balance;line-height:1.1;margin:0 0 .4em}
h1,h2{font-family:var(--display);font-weight:800;letter-spacing:.01em;text-transform:uppercase}
h1{font-size:clamp(38px,6vw,64px)}
h2{font-size:clamp(28px,4vw,42px)}
h3{font-size:20px;font-weight:700}
p{margin:0 0 1em}
.envoltura{max-width:var(--ancho);margin:0 auto;padding-inline:20px}
.angosta{max-width:820px}
.tricolor{height:4px;background:linear-gradient(90deg,var(--amarillo) 0 33.3%,var(--azul) 33.3% 66.6%,var(--rojo) 66.6%)}
.oculto-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:8px;background:var(--amarillo);color:#000;padding:8px 12px;z-index:100;border-radius:4px}
.saltar:focus{left:8px}

/* ---------- aviso superior ---------- */
.aviso-global{background:var(--amarillo);color:#141414;font-weight:600;font-size:14px;text-align:center;padding:7px 16px}

/* ---------- navegación ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(6,9,20,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.nav-in{display:flex;align-items:center;gap:18px;min-height:66px}
.nav-logo img{height:40px;width:auto}
.nav-links{display:flex;gap:0;list-style:none;margin:0;padding:0;flex:1;flex-wrap:wrap}
.nav-links a{display:block;white-space:nowrap;padding:8px 11px;color:var(--texto-2);text-decoration:none;font-weight:600;font-size:15px;border-radius:var(--radio-s)}
.nav-links a:hover{color:var(--texto);background:var(--noche-3)}
.nav-links a[aria-current="page"]{color:var(--texto);box-shadow:inset 0 -2px 0 var(--amarillo);border-radius:0}
.nav-der{display:flex;align-items:center;gap:10px}
.nav-boton{display:none;background:none;border:1px solid var(--linea-2);color:var(--texto);border-radius:var(--radio-s);padding:8px 10px;cursor:var(--cur-mano,pointer)}
.estado-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;color:var(--texto-2);border:1px solid var(--linea-2);padding:5px 10px;border-radius:99px;white-space:nowrap}
.estado-pill i{width:8px;height:8px;border-radius:50%;background:var(--texto-3)}
.estado-pill.on i{background:var(--verde);box-shadow:0 0 0 0 rgba(47,191,113,.6);animation:latido 2s infinite}
@keyframes latido{70%{box-shadow:0 0 0 7px rgba(47,191,113,0)}100%{box-shadow:0 0 0 0 rgba(47,191,113,0)}}
.avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--noche-3)}
.menu-usuario{position:relative}
.menu-usuario summary{list-style:none;cursor:var(--cur-mano,pointer);display:flex;align-items:center;gap:8px;padding:4px;border-radius:99px}
.menu-usuario summary::-webkit-details-marker{display:none}
.menu-usuario[open] summary{background:var(--noche-3)}
.menu-usuario .caja{position:absolute;right:0;top:calc(100% + 8px);background:var(--noche-2);border:1px solid var(--linea-2);border-radius:var(--radio);min-width:210px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.menu-usuario .caja a,.menu-usuario .caja button{display:block;width:100%;text-align:left;padding:9px 12px;color:var(--texto);text-decoration:none;border-radius:var(--radio-s);background:none;border:0;font:inherit;cursor:var(--cur-mano,pointer)}
.menu-usuario .caja a:hover,.menu-usuario .caja button:hover{background:var(--noche-3)}
.menu-usuario .quien{padding:8px 12px 10px;border-bottom:1px solid var(--linea);margin-bottom:4px;font-size:14px;color:var(--texto-2)}

@media (max-width:1060px){
  .nav-boton{display:block}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;background:var(--noche-2);border-bottom:1px solid var(--linea);padding:10px 16px 16px}
  .nav.abierta .nav-links{display:flex}
  .nav-links a{padding:12px}
  .nav-in{justify-content:space-between}
}
@media (max-width:520px){ .estado-pill .txt{display:none} .nav-logo img{height:34px} }

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--cuerpo);padding:12px 18px;border-radius:var(--radio-s);border:1px solid transparent;cursor:var(--cur-mano,pointer);text-decoration:none;transition:transform .12s,background .15s,border-color .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primario{background:var(--amarillo);color:#15130a}
.btn-primario:hover{background:#ffe066;color:#15130a}
.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover{background:var(--azul-2);color:#fff}
.btn-linea{border-color:var(--linea-2);color:var(--texto);background:transparent}
.btn-linea:hover{border-color:var(--texto-2);color:var(--texto)}
.btn-peligro{background:var(--rojo);color:#fff}
.btn-verde{background:var(--verde);color:#04170c}
.btn-chico{padding:8px 12px;font-size:14px}
.btn-discord{background:#5865f2;color:#fff}
.btn-discord:hover{background:#6d78f5;color:#fff}
.btn[disabled]{opacity:.5;cursor:var(--cur-no,not-allowed)}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- avisos ---------- */
.flash{border-radius:var(--radio);padding:12px 16px;margin:18px 0;border:1px solid;font-weight:500}
.flash-ok{background:var(--verde-suave);border-color:rgba(47,191,113,.45)}
.flash-error{background:var(--rojo-suave);border-color:rgba(239,43,74,.5)}
.flash-aviso{background:var(--amarillo-suave);border-color:rgba(255,210,31,.45)}

/* ---------- héroe ---------- */
.heroe{position:relative;overflow:hidden}
.heroe picture img{width:100%;height:auto;aspect-ratio:2000/848;object-fit:cover}
.heroe::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,var(--noche) 8%,transparent)}
.heroe-panel{position:relative;z-index:2;margin-top:-120px;padding-bottom:36px}
.heroe-panel h1{max-width:18ch;font-size:clamp(36px,5.4vw,64px);text-shadow:0 4px 24px rgba(0,0,0,.6)}
.heroe-panel .bajada{font-size:clamp(17px,2vw,20px);color:var(--texto-2);max-width:56ch;margin-bottom:22px}
.heroe-acciones{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:700px){
  .heroe picture img{aspect-ratio:1/1}
  .heroe-panel{margin-top:-90px}
}

/* ---------- barra de estado ---------- */
.marcador{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--linea);border-radius:var(--radio);background:var(--noche-2);overflow:hidden}
.marcador>div{padding:16px 20px;border-right:1px solid var(--linea)}
.marcador>div:last-child{border-right:0}
.marcador .num{font-family:var(--display);font-weight:800;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.marcador .lbl{font-size:13px;color:var(--texto-2);text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
.marcador .on{color:var(--verde)} .marcador .off{color:var(--rojo)}
@media (max-width:760px){.marcador{grid-template-columns:1fr 1fr}.marcador>div:nth-child(2){border-right:0}.marcador>div:nth-child(-n+2){border-bottom:1px solid var(--linea)}}

/* ---------- secciones ---------- */
.seccion{padding-block:72px}
.seccion-chica{padding-block:44px}
.antetitulo{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amarillo);margin-bottom:10px;display:block}
.cabecera-seccion{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.cabecera-seccion p{color:var(--texto-2);max-width:60ch;margin:0}
.cabecera-pagina{padding-block:56px 28px;border-bottom:1px solid var(--linea);background:radial-gradient(1200px 300px at 20% -40%,rgba(51,70,255,.25),transparent)}
.cabecera-pagina p{color:var(--texto-2);font-size:18px;max-width:62ch;margin:0}

/* pasos */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:paso}
.paso{position:relative;padding:26px 24px 24px;background:var(--noche-2);border:1px solid var(--linea);border-radius:var(--radio)}
.paso::before{counter-increment:paso;content:counter(paso,decimal-leading-zero);font-family:var(--display);font-weight:900;font-size:56px;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--linea-2);position:absolute;right:18px;top:12px}
.paso h3{font-size:22px;margin-bottom:6px}
.paso p{color:var(--texto-2);margin-bottom:16px}
@media (max-width:860px){.pasos{grid-template-columns:1fr}}

/* tarjetas de rol */
.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rol{position:relative;border-radius:var(--radio);overflow:hidden;min-height:300px;display:flex;align-items:flex-end;border:1px solid var(--linea)}
.rol img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.rol:hover img{transform:scale(1.04)}
.rol::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,9,20,.95) 20%,rgba(6,9,20,.1) 70%)}
.rol div{position:relative;z-index:1;padding:18px}
.rol h3{font-family:var(--display);text-transform:uppercase;font-size:28px;font-weight:800;margin:0 0 4px}
.rol p{color:var(--texto-2);font-size:15px;margin:0}
@media (max-width:980px){.roles{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.roles{grid-template-columns:1fr}.rol{min-height:220px}}

/* facciones */
.facciones{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.faccion{background:var(--noche-2);border:1px solid var(--linea);border-radius:var(--radio);padding:22px;display:flex;flex-direction:column;gap:10px;border-top:3px solid var(--color,var(--azul))}
.faccion .escudo{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}
.faccion .sigla{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--texto-3)}
.faccion h3{margin:0;font-size:19px}
.faccion p{color:var(--texto-2);font-size:15px;margin:0;flex:1}
@media (max-width:980px){.facciones{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.facciones{grid-template-columns:1fr}}

/* tarjetas genéricas / novedades */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.tarjeta{background:var(--noche-2);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column}
.tarjeta-enlace{color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.tarjeta-enlace:hover{border-color:var(--linea-2);color:inherit;transform:translateY(-2px)}
.tarjeta .img{aspect-ratio:16/9;object-fit:cover;width:100%;background:var(--noche-3)}
.tarjeta .cuerpo{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.tarjeta h3{margin:0}
.tarjeta p{color:var(--texto-2);margin:0;font-size:15px}
.meta{font-family:var(--mono);font-size:12px;color:var(--texto-3);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.etiqueta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:var(--azul-suave);color:#aab3ff;white-space:nowrap}
.etiqueta.amarilla{background:var(--amarillo-suave);color:var(--amarillo)}
.etiqueta.roja{background:var(--rojo-suave);color:#ff8a9c}
.etiqueta.verde{background:var(--verde-suave);color:#6fe0a4}
.etiqueta.gris{background:var(--noche-4);color:var(--texto-2)}

/* bloque llamada */
.llamada{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center;background:linear-gradient(120deg,var(--noche-3),var(--noche-2));border:1px solid var(--linea-2);border-radius:14px;padding:clamp(24px,4vw,44px);overflow:hidden;position:relative}
.llamada img{max-height:200px;width:auto;justify-self:center;filter:drop-shadow(0 10px 30px rgba(51,70,255,.35))}
@media (max-width:760px){.llamada{grid-template-columns:1fr}.llamada img{max-height:140px}}

/* ---------- contenido markdown ---------- */
.prosa{max-width:74ch}
.prosa h2{font-size:30px;margin-top:1.6em}
.prosa h3{margin-top:1.4em}
.prosa ul,.prosa ol{padding-left:1.3em}
.prosa li{margin:.25em 0}
.prosa li::marker{color:var(--amarillo)}
.prosa table{border-collapse:collapse;width:100%;margin:1em 0;font-size:15.5px}
.prosa th,.prosa td{border-bottom:1px solid var(--linea);padding:9px 12px;text-align:left}
.prosa th{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-2);font-weight:500}
.prosa td:first-child{font-family:var(--mono);color:var(--amarillo);white-space:nowrap}
.prosa code{font-family:var(--mono);background:var(--noche-3);padding:2px 6px;border-radius:4px;font-size:.9em}
.prosa blockquote{border-left:3px solid var(--azul);margin:1em 0;padding:4px 16px;color:var(--texto-2)}
.prosa img{border-radius:var(--radio);margin:1em 0}
.tabla-scroll{overflow-x:auto}

/* ---------- formularios ---------- */
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.campo>label,.campo legend,.etq{font-weight:600}
.ayuda{font-size:14px;color:var(--texto-2)}
input[type=text],input[type=number],input[type=search],input[type=url],input[type=email],textarea,select{
  width:100%;font:inherit;font-size:16px;color:var(--texto);background:var(--noche);border:1px solid var(--linea-2);border-radius:var(--radio-s);padding:11px 13px}
textarea{min-height:130px;resize:vertical;line-height:1.5}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--azul-2);box-shadow:0 0 0 3px var(--azul-suave)}
.opciones{display:grid;gap:6px}
.opciones label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--linea);border-radius:var(--radio-s);cursor:var(--cur-mano,pointer);font-weight:400}
.opciones label:hover{border-color:var(--linea-2);background:var(--noche-3)}
.opciones input{margin-top:4px;accent-color:var(--amarillo);width:17px;height:17px;flex:none}
.opciones label:has(input:checked){border-color:var(--amarillo);background:var(--amarillo-suave)}
.escala{display:flex;gap:6px;flex-wrap:wrap}
.escala label{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--linea-2);border-radius:var(--radio-s);cursor:var(--cur-mano,pointer);font-family:var(--mono)}
.escala input{position:absolute;opacity:0;pointer-events:none}
.escala label:has(input:checked){background:var(--amarillo);color:#15130a;border-color:var(--amarillo)}
.escala label:has(input:focus-visible){outline:2px solid var(--amarillo);outline-offset:2px}
.contador{font-family:var(--mono);font-size:12px;color:var(--texto-3);align-self:flex-end}
.contador.falta{color:var(--rojo)}
.error-campo{color:#ff8a9c;font-size:14px;font-weight:500}
.campo.con-error input,.campo.con-error textarea{border-color:var(--rojo)}
.req{color:var(--rojo)}
.bloque-form{background:var(--noche-2);border:1px solid var(--linea);border-radius:var(--radio);padding:clamp(18px,3vw,32px);margin-bottom:18px}
.bloque-form>h2{font-size:26px;margin-bottom:6px}
.bloque-form>.ayuda{margin-bottom:18px}
.progreso{position:sticky;top:66px;z-index:5;height:4px;background:var(--noche-3);border-radius:2px;overflow:hidden;margin-bottom:18px}
.progreso i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amarillo),var(--azul),var(--rojo));transition:width .3s}
.guardado{font-family:var(--mono);font-size:12px;color:var(--texto-3)}

/* ---------- tablas ---------- */
.tabla{width:100%;border-collapse:collapse;font-size:15px}
.tabla th,.tabla td{padding:10px 12px;border-bottom:1px solid var(--linea);text-align:left;vertical-align:middle}
.tabla th{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3);font-weight:500}
.tabla tr:hover td{background:rgba(255,255,255,.015)}
.tabla .num{font-variant-numeric:tabular-nums;font-family:var(--mono)}

/* ---------- tickets / chat ---------- */
.hilo{display:flex;flex-direction:column;gap:12px}
.msj{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start}
.msj .globo{background:var(--noche-2);border:1px solid var(--linea);border-radius:var(--radio);padding:12px 16px}
.msj.staff .globo{border-color:rgba(51,70,255,.5);background:linear-gradient(var(--azul-suave),var(--azul-suave)),var(--noche-2)}
.msj.interno .globo{border-style:dashed;border-color:var(--amarillo);background:var(--amarillo-suave)}
.msj .quien{font-weight:700;font-size:14.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.msj .globo .prosa p:last-child{margin:0}

/* ---------- tienda ---------- */
.paquetes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.paquete .precio{font-family:var(--display);font-weight:800;font-size:30px;line-height:1}
.paquete .precio s{font-size:18px;color:var(--texto-3);margin-left:6px}
.paquete .img{aspect-ratio:4/3;object-fit:cover}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--linea);background:var(--noche-2);margin-top:60px}
.pie-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;padding-block:44px 28px}
.pie h4{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);margin-bottom:12px}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.pie a{color:var(--texto-2);text-decoration:none}
.pie a:hover{color:var(--texto)}
.pie .legal{border-top:1px solid var(--linea);padding-block:16px 24px;font-size:13px;color:var(--texto-3);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:820px){.pie-in{grid-template-columns:1fr 1fr}}

/* ---------- asistente IA ---------- */
.asis-boton{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:10px;background:var(--azul);color:#fff;border:0;border-radius:99px;padding:12px 18px 12px 14px;font:700 15px var(--cuerpo);cursor:var(--cur-mano,pointer);box-shadow:0 12px 32px rgba(51,70,255,.45)}
.asis-boton svg{width:22px;height:22px}
.asis{position:fixed;right:18px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:61;width:min(380px,calc(100vw - 24px));height:min(560px,calc(100vh - 120px));background:var(--noche-2);border:1px solid var(--linea-2);border-radius:14px;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.6);overflow:hidden}
.asis header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--linea);background:var(--noche-3)}
.asis header img{width:36px;height:36px;border-radius:50%;object-fit:contain;background:var(--noche)}
.asis header b{display:block;line-height:1.2}
.asis header small{color:var(--texto-3);font-size:12px}
.asis header button{margin-left:auto;background:none;border:0;color:var(--texto-2);font-size:22px;cursor:var(--cur-mano,pointer);line-height:1}
.asis-mensajes{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.asis-m{max-width:88%;padding:9px 13px;border-radius:12px;font-size:15px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.asis-m.yo{align-self:flex-end;background:var(--azul);color:#fff;border-bottom-right-radius:4px}
.asis-m.el{align-self:flex-start;background:var(--noche-3);border-bottom-left-radius:4px}
.asis-m a{color:#aab3ff;text-decoration:underline}.asis-m.yo a{color:#fff}
.asis-m code{font-family:var(--mono);background:var(--noche);padding:1px 5px;border-radius:4px;font-size:.92em}
.asis-ticket,.asis-mensajes>.btn{align-self:flex-start}
.asis-m.err{align-self:flex-start;background:var(--rojo-suave);border:1px solid rgba(239,43,74,.4)}
.asis-sug{display:flex;flex-wrap:wrap;gap:6px}
.asis-sug button{font:13px var(--cuerpo);background:var(--noche);border:1px solid var(--linea-2);color:var(--texto-2);padding:6px 10px;border-radius:99px;cursor:var(--cur-mano,pointer)}
.asis form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--linea)}
.asis form input{flex:1}
.asis .nota{font-size:11.5px;color:var(--texto-3);text-align:center;padding:0 10px 8px}
.escribiendo span{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:var(--texto-2);animation:salto 1s infinite}
.escribiendo span:nth-child(2){animation-delay:.15s}.escribiendo span:nth-child(3){animation-delay:.3s}
@keyframes salto{50%{transform:translateY(-4px);opacity:.5}}

/* ---------- utilidades ---------- */
.fila{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.entre{justify-content:space-between}
.pila{display:flex;flex-direction:column;gap:12px}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.suave{color:var(--texto-2)}
.chico{font-size:14px}
.centro{text-align:center}
.mono{font-family:var(--mono)}
.vacio{padding:40px 20px;text-align:center;color:var(--texto-2);border:1px dashed var(--linea-2);border-radius:var(--radio)}
.dos-col{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
@media (max-width:960px){.dos-col{grid-template-columns:1fr}}
.caja{background:var(--noche-2);border:1px solid var(--linea);border-radius:var(--radio);padding:20px}
.caja h3{margin-top:0}

/* ---------- modo claro (el oscuro es el de siempre) ---------- */
:root[data-theme="light"]{
  --noche:#f3f4f9; --noche-2:#ffffff; --noche-3:#eceef6; --noche-4:#e2e6f1;
  --linea:#dde1ec; --linea-2:#c5cbdd;
  --texto:#121729; --texto-2:#4a5375; --texto-3:#7a83a3;
  --azul:#2f43f0; --azul-2:#3346ff; --azul-suave:rgba(51,70,255,.10);
  --amarillo:#e2ad00; --amarillo-suave:rgba(226,173,0,.14); --rojo-suave:rgba(239,43,74,.10); --verde-suave:rgba(47,191,113,.12);
  color-scheme:light;
}
:root[data-theme="light"] .antetitulo{color:#a87f00}
:root[data-theme="light"] .etiqueta{color:#2f43f0}
:root[data-theme="light"] .etiqueta.amarilla{color:#8a6a00}
:root[data-theme="light"] .etiqueta.roja{color:#c4142f}
:root[data-theme="light"] .etiqueta.verde{color:#16804a}
:root[data-theme="light"] .error-campo,:root[data-theme="light"] .contador.falta{color:#c4142f}
:root[data-theme="light"] .paso::before{-webkit-text-stroke-color:#c5cbdd}
:root[data-theme="light"] .heroe-panel h1{text-shadow:none}
:root[data-theme="light"] .heroe::after{background:linear-gradient(to top,var(--noche) 4%,transparent)}
:root[data-theme="light"] .asis-m a{color:var(--azul)}
.nav{background:color-mix(in srgb,var(--noche) 88%,transparent)}
.rol div{color:#fff}.rol p{color:#d5daf0}
.tema-boton{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--linea-2);background:transparent;color:var(--texto-2);cursor:var(--cur-mano,pointer);transition:color .2s,border-color .2s,transform .3s}
.tema-boton:hover{color:var(--amarillo);border-color:var(--amarillo);transform:rotate(-15deg)}
.tema-boton svg{width:18px;height:18px}
.tema-boton .sol{display:none}
:root[data-theme="light"] .tema-boton .sol{display:block}
:root[data-theme="light"] .tema-boton .luna{display:none}

/* ---------- cuentas ---------- */
.auth-caja{max-width:500px}
.auth-logo{max-width:260px;margin:0 auto 16px}
.btn-grande{padding:14px 18px;font-size:16px;width:100%}
.btn-google{background:#fff;color:#1f1f1f;border:1px solid #dadce0}
.btn-google:hover{background:#f2f2f2;color:#1f1f1f}
.separador{display:flex;align-items:center;gap:12px;color:var(--texto-3);font-size:13px;margin:22px 0 16px}
.separador::before,.separador::after{content:"";flex:1;height:1px;background:var(--linea)}
.conexion{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--linea)}
.conexion:last-child{border-bottom:0}
.ico{width:28px;height:28px;border-radius:50%;display:block}
.ico-discord{background:#5865f2}.ico-google{background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0)}.ico-correo{background:var(--amarillo)}

/* ---------- intentos de postulación ---------- */
.datos-postulacion{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.datos-postulacion div{background:var(--noche);border:1px solid var(--linea);border-radius:var(--radio-s);padding:12px;text-align:center}
.datos-postulacion b{display:block;font-family:var(--display);font-size:28px;line-height:1}
.datos-postulacion span{font-size:13px;color:var(--texto-2)}
.aviso-intento{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--amarillo-suave);border:1px solid rgba(255,210,31,.4);border-radius:var(--radio);padding:10px 14px;margin-bottom:14px;font-size:14.5px}
.aviso-intento summary{cursor:var(--cur-mano,pointer);color:var(--texto-2);font-size:14px}

/* ---------- historias de «¿quién vas a ser?» ---------- */
button.rol{font:inherit;color:inherit;text-align:left;padding:0;cursor:var(--cur-mano,pointer);background:var(--noche-2)}
button.rol:focus-visible{outline:2px solid var(--amarillo);outline-offset:3px}
.rol-mas{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--amarillo);opacity:.85;transition:transform .2s,opacity .2s}
.rol:hover .rol-mas{transform:translateX(4px);opacity:1}
.historia{border:0;padding:0;background:transparent;max-width:min(680px,calc(100vw - 24px));width:100%;color:var(--texto)}
.historia::backdrop{background:rgba(3,5,12,.72);backdrop-filter:blur(4px)}
.historia[open]{animation:historia-entra .35s cubic-bezier(.2,.8,.2,1) both}
.historia[open]::backdrop{animation:fondo-entra .3s ease both}
@keyframes historia-entra{from{opacity:0;transform:translateY(24px) scale(.97)}}
@keyframes fondo-entra{from{opacity:0}}
.historia-caja{background:var(--noche-2);border:1px solid var(--linea-2);border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);max-height:calc(100vh - 40px);overflow-y:auto;position:relative}
.historia-img{min-height:210px;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;padding:22px 26px;position:relative}
.historia-img::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--noche-2) 5%,rgba(6,9,20,.25))}
.historia-img>*{position:relative}
.historia-img h2{margin:0;font-size:clamp(28px,5vw,40px);color:#fff}
.historia-texto{padding:6px 26px 26px}
.historia-texto p{color:var(--texto-2);font-size:16.5px}
.historia-texto p b{color:var(--texto)}
.historia-texto h3{font-family:var(--display);text-transform:uppercase;font-size:22px;letter-spacing:.02em;margin-top:18px;color:var(--amarillo)}
.historia-texto ul{padding-left:1.2em;margin:0 0 18px}
.historia-texto li{margin:4px 0}
.historia-texto li::marker{color:var(--amarillo)}
.historia-cerrar{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(6,9,20,.6);color:#fff;font-size:20px;cursor:var(--cur-mano,pointer);line-height:1}
.historia-cerrar:hover{background:rgba(6,9,20,.9)}
:root[data-theme="light"] .historia-img::before{background:linear-gradient(to top,var(--noche-2) 5%,rgba(6,9,20,.35))}

/* ---------- botón flotante de Discord (encima de «¿Dudas?») ---------- */
.discord-flotante{position:fixed;right:18px;bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:60;height:50px;min-width:50px;border-radius:99px;background:#5865f2;color:#fff;display:flex;align-items:center;justify-content:center;gap:0;padding:0 13px;text-decoration:none;font:700 15px var(--cuerpo);box-shadow:0 12px 30px rgba(88,101,242,.45);transition:transform .2s,box-shadow .2s,padding .25s,gap .25s;overflow:hidden}
.discord-flotante svg{width:24px;height:24px;flex:none}
.discord-flotante-txt{max-width:0;opacity:0;white-space:nowrap;transition:max-width .3s,opacity .2s}
.discord-flotante:hover,.discord-flotante:focus-visible{color:#fff;transform:translateY(-2px);box-shadow:0 16px 36px rgba(88,101,242,.6);gap:8px;padding:0 16px}
.discord-flotante:hover .discord-flotante-txt,.discord-flotante:focus-visible .discord-flotante-txt{max-width:90px;opacity:1}
body.chat-abierto .discord-flotante{opacity:0;pointer-events:none;transform:translateY(10px)}
@media (max-width:520px){.discord-flotante{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}

/* ---------- mis personajes y vehículos ---------- */
.pjs{display:grid;gap:10px;margin-top:12px}
.pj{border:1px solid var(--linea);border-radius:var(--radio);background:var(--noche);overflow:hidden}
.pj[open]{border-color:var(--linea-2)}
.pj summary{list-style:none;cursor:var(--cur-mano,pointer);display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px 14px}
.pj summary::-webkit-details-marker{display:none}
.pj summary:hover{background:var(--noche-3)}
.pj-ini{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:24px;color:#15130a;background:linear-gradient(135deg,var(--amarillo),#ffb300)}
.pj-tit{display:flex;flex-direction:column;min-width:0}
.pj-tit b{font-size:17px}
.pj-res{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;font-family:var(--mono);color:var(--texto-2)}
.pj-cuerpo{padding:4px 14px 16px;border-top:1px solid var(--linea);animation:menu-baja .25s ease both}
.pj-datos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:12px}
.pj-datos div{background:var(--noche-2);border-radius:var(--radio-s);padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.pj-datos span{font-size:11.5px;color:var(--texto-3);text-transform:uppercase;letter-spacing:.06em}
.pj-datos b{font-size:14.5px;font-weight:600}
.pj-sub{font-family:var(--display);text-transform:uppercase;font-size:20px;margin:16px 0 8px;color:var(--amarillo)}
.vehs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.veh{background:var(--noche-2);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;transition:transform .2s,border-color .2s}
.veh:hover{transform:translateY(-2px);border-color:var(--linea-2)}
.veh-foto{aspect-ratio:16/9;background:radial-gradient(circle at 50% 70%,var(--noche-4),var(--noche-2));display:grid;place-items:center;position:relative}
.veh-foto img{width:100%;height:100%;object-fit:contain;padding:6px}
.veh-sin{font-size:44px;opacity:.5}
.veh-info{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}
.veh-info b{font-size:15px;line-height:1.25}
.placa{font-family:var(--mono);font-weight:700;letter-spacing:.08em;background:#f2f2ea;color:#1a2a6c;border:2px solid #1a2a6c;border-radius:4px;padding:1px 7px;font-size:12px}
.barras{display:grid;gap:4px}
.barras div{display:grid;grid-template-columns:18px 1fr 38px;gap:6px;align-items:center;font-size:12px}
.barras i{height:6px;background:var(--noche);border-radius:3px;overflow:hidden}
.barras em{display:block;height:100%;border-radius:3px}
.barras small{font-family:var(--mono);color:var(--texto-2);text-align:right}
@media (max-width:620px){.pj summary{grid-template-columns:44px 1fr}.pj-res{grid-column:1/-1;justify-content:flex-start}}

/* ---------- adjuntos de tickets ---------- */
.zona-subida{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:18px;border:2px dashed var(--linea-2);border-radius:var(--radio);cursor:var(--cur-mano,pointer);transition:border-color .2s,background .2s}
.zona-subida:hover,.zona-subida.encima{border-color:var(--amarillo);background:var(--amarillo-suave)}
.lista-adjuntos{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.lista-adjuntos li{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--noche);border:1px solid var(--linea);border-radius:var(--radio-s);padding:6px 10px;font-size:14px}
.lista-adjuntos li.mal{border-color:var(--rojo);color:#ff8a9c}
.lista-adjuntos button{background:none;border:0;color:var(--texto-2);cursor:var(--cur-mano,pointer);font-size:16px}
.adjuntos{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.adj{border:1px solid var(--linea);border-radius:var(--radio-s);overflow:hidden;background:var(--noche)}
.adj-img img{width:150px;height:110px;object-fit:cover;display:block;transition:transform .2s}
.adj-img:hover img{transform:scale(1.04)}
.adj-video{width:min(320px,100%);display:flex;flex-direction:column}
.adj-video video{width:100%;max-height:220px;background:#000}
.adj-video .meta{padding:4px 8px}
.adj-doc{display:flex;gap:6px;align-items:center;padding:8px 12px;text-decoration:none;color:var(--texto);font-size:14px;max-width:260px}
.adj-doc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- perfil público ---------- */
.perfil-portada{height:220px;background:linear-gradient(120deg,var(--noche-3),var(--azul-suave)),url(/img/hero-1100.webp) center/cover;background-size:cover;background-position:center;border-bottom:1px solid var(--linea)}
.perfil-cab{display:flex;gap:18px;align-items:flex-end;margin-top:-56px;position:relative;flex-wrap:wrap}
.perfil-avatar{width:132px;height:132px;border-radius:50%;object-fit:cover;border:4px solid var(--noche);background:var(--noche-3);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.perfil-nombre{flex:1;min-width:240px}
.perfil-nombre h1{font-size:clamp(30px,5vw,48px);margin:0 0 6px}
.red-link{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--linea);color:var(--texto);text-decoration:none;gap:8px}
.red-link:last-child{border-bottom:0}
a.red-link:hover b{color:var(--amarillo)}

/* tablas dentro de textos (VIP, guías) */
.prosa table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px;display:block;overflow-x:auto}
.prosa th,.prosa td{border:1px solid var(--linea);padding:8px 12px;text-align:left;vertical-align:top}
.prosa th{background:var(--noche-3);color:var(--amarillo);font-weight:700}
.prosa tr:nth-child(even) td{background:rgba(255,255,255,.02)}

.paquete{position:relative}
.paquete.destacado{border-color:var(--amarillo);box-shadow:0 0 0 1px var(--amarillo),0 14px 40px rgba(255,204,0,.12)}
.paquete .cinta{position:absolute;top:12px;left:12px;z-index:2;background:var(--amarillo);color:#111;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:999px}


/* ---------- menú «Más» ---------- */
.nav-mas{position:relative}
.nav-mas-btn{display:flex;align-items:center;gap:4px;padding:8px 11px;background:none;border:0;color:var(--texto-2);font:inherit;font-weight:600;font-size:15px;border-radius:var(--radio-s);cursor:var(--cur-mano,pointer)}
.nav-mas-btn:hover,.nav-mas-btn[aria-expanded="true"]{color:var(--texto);background:var(--noche-3)}
.nav-mas-btn svg{transition:transform .2s}
.nav-mas-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-mas.tiene-activo .nav-mas-btn{color:var(--texto);box-shadow:inset 0 -2px 0 var(--amarillo);border-radius:0}
.nav-mas-lista{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:260px;background:var(--noche-2);border:1px solid var(--linea-2);border-radius:var(--radio);padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.5);z-index:50}
.nav-mas-lista.abierta{display:block;animation:aparecerMas .15s ease-out}
@keyframes aparecerMas{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.nav-mas-lista a{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:var(--radio-s);white-space:normal}
.nav-mas-lista a b{color:var(--texto);font-size:15px}
.nav-mas-lista a small{color:var(--texto-2);font-weight:400;font-size:13px}
.nav-mas-lista a:hover{background:var(--noche-3)}
.nav-mas-lista a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--amarillo);border-radius:var(--radio-s)}
@media (max-width:1060px){
  .nav-mas-btn{display:none}
  .nav-mas-lista{display:block;position:static;border:0;box-shadow:none;background:none;padding:0;min-width:0;border-top:1px solid var(--linea);margin-top:6px;padding-top:6px}
  .nav-mas-lista a{padding:12px}
}
.nav-der{margin-left:auto}

/* posición de los botones del menú (Personalizar web → Menú) */
.nav-in>nav{flex:1;min-width:0}
.nav-links.alinear-centro{justify-content:center}
.nav-links.alinear-derecha{justify-content:flex-end}
@media (max-width:1060px){.nav-in>nav{flex:0}}

/* ---------- «Más» por grupos ---------- */
.nav-mas-lista.con-grupos.abierta{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:4px 10px;min-width:520px}
.nav-mas-grupo{display:flex;flex-direction:column}
.nav-mas-tit{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amarillo);padding:10px 12px 4px}
@media (max-width:1060px){.nav-mas-lista.con-grupos{display:block;min-width:0}.nav-mas-tit{padding:12px 12px 2px}}
/* menú de la cuenta */
.menu-usuario .caja hr{border:0;border-top:1px solid var(--linea);margin:4px 0}
.menu-usuario .caja a small{display:block;font-size:12px;color:var(--texto-3)}
.menu-usuario .caja{min-width:240px}
/* pie: marca + 4 columnas */
.pie-in{grid-template-columns:1.4fr repeat(4,1fr)}
@media (max-width:1000px){.pie-in{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:620px){.pie-in{grid-template-columns:1fr 1fr}}
/* Mi cuenta: personajes en resumen */
.pj-mini{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--linea);border-radius:var(--radio-s);text-decoration:none;color:var(--texto)}
.pj-mini:hover{border-color:var(--amarillo)}

/* ---------- pantallas de estado del formulario ---------- */
.estado-tarjeta{border:1px solid var(--linea-2);border-radius:var(--radio);overflow:hidden;background:var(--noche-2);box-shadow:0 24px 60px rgba(0,0,0,.35);animation:aparecerEstado .4s ease-out}
@keyframes aparecerEstado{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.estado-img{display:block;width:100%;height:auto;aspect-ratio:5/2;object-fit:cover;border-bottom:1px solid var(--linea)}
.estado-cuerpo{padding:clamp(18px,3vw,30px)}
.estado-cuerpo h2{font-size:clamp(26px,4vw,38px);margin:0 0 10px}
.estado-cuerpo p{font-size:17px;color:var(--texto-2);margin:0 0 18px;max-width:62ch}
.estado-tiene_wl{border-color:rgba(47,191,113,.5)}.estado-aprobada{border-color:rgba(255,210,31,.5)}.estado-sin_intentos{border-color:rgba(239,43,74,.45)}

/* ---------- portada en carrusel ---------- */
.heroe-carrusel{aspect-ratio:2000/848;background:#050817}
.heroe-carrusel .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.heroe-carrusel .slide.activa{opacity:1}
.heroe-carrusel .slide picture,.heroe-carrusel .slide img{display:block;width:100%;height:100%}
.heroe-carrusel .slide img{object-fit:cover;aspect-ratio:auto}
.heroe-carrusel .slide.activa img{animation:acercar 26s ease-in-out infinite alternate}
.heroe-logo{position:absolute;z-index:3;left:50%;top:14%;transform:translateX(-50%);width:min(44vw,560px);height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.7))}
.heroe-puntos{position:absolute;z-index:4;right:clamp(16px,3vw,40px);top:18px;display:flex;gap:8px}
.heroe-puntos button{width:28px;height:5px;border-radius:3px;border:0;background:rgba(255,255,255,.35);cursor:var(--cur-mano,pointer);padding:0;transition:background .2s,width .2s}
.heroe-puntos button[aria-selected="true"]{background:var(--amarillo);width:42px}
@media (max-width:700px){.heroe-carrusel{aspect-ratio:1/1}.heroe-logo{top:10%;width:72vw}}

/* ---------- cabeceras con imagen ---------- */
.cabecera-pagina.con-imagen{position:relative;background:linear-gradient(90deg,rgba(5,8,23,.97) 0%,rgba(5,8,23,.86) 40%,rgba(5,8,23,.45) 100%),var(--cab-img) center/cover no-repeat;border-bottom:1px solid var(--linea)}
.cabecera-pagina.con-imagen::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top,var(--noche),transparent);pointer-events:none}
.cabecera-pagina.con-imagen>*{position:relative;z-index:1}
.cabecera-pagina.con-imagen,.cabecera-pagina.con-imagen h1{color:#f3f4fb}
.cabecera-pagina.con-imagen p,.cabecera-pagina.con-imagen .bajada{color:#c9cde4}
@media (max-width:700px){.cabecera-pagina.con-imagen{background:linear-gradient(rgba(5,8,23,.82),rgba(5,8,23,.92)),var(--cab-img) center/cover no-repeat}}

/* ---------- tienda ---------- */
.paquete{transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.paquete:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 0 1px var(--amarillo);border-color:var(--amarillo)}
.paquete-img{aspect-ratio:16/9;overflow:hidden;background:radial-gradient(circle at 50% 40%,#1c2468,#070a1c 75%);display:grid;place-items:center;border-bottom:1px solid var(--linea)}
.paquete-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.paquete-img img.sin-foto{width:62%;height:auto;object-fit:contain;filter:drop-shadow(0 8px 20px rgba(0,0,0,.6))}
.paquete:hover .paquete-img img{transform:scale(1.06)}
.paquete .precio{font-family:var(--titulo,inherit);font-size:30px;font-weight:800;color:var(--amarillo);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.paquete .precio s{font-size:16px;color:var(--texto-3);font-weight:500}

/* ---------- equipo ---------- */
.equipo-area{display:flex;align-items:baseline;gap:12px;margin:26px 0 14px;border-bottom:1px solid var(--linea);padding-bottom:8px}
.equipo-area h2{font-size:28px;margin:0}
.equipo-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-bottom:24px}
.miembro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 16px 18px;border:1px solid var(--linea);border-radius:var(--radio);background:linear-gradient(180deg,color-mix(in srgb,var(--color) 12%,transparent),transparent 60%),var(--noche-2);color:var(--texto);text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}
a.miembro:hover{transform:translateY(-4px);border-color:var(--color);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.miembro-foto{padding:4px;border-radius:50%;background:conic-gradient(var(--color),color-mix(in srgb,var(--color) 30%,transparent),var(--color))}
.miembro-foto img{width:104px;height:104px;border-radius:50%;object-fit:cover;border:3px solid var(--noche-2);display:block}
.miembro h3{margin:6px 0 0;font-size:19px}
.miembro-cargo{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--color)}
.miembro p{font-size:14px;color:var(--texto-2);margin:4px 0 0}
.miembro-ver{font-size:13px;color:var(--texto-3);margin-top:4px}
a.miembro:hover .miembro-ver{color:var(--color)}

/* ---------- galería ---------- */
.galeria{columns:3 300px;column-gap:14px}
.galeria-item{position:relative;display:block;width:100%;margin:0 0 14px;padding:0;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;background:var(--noche-2);cursor:var(--cur-zoom,zoom-in);break-inside:avoid}
.galeria-item img{display:block;width:100%;height:auto;transition:transform .5s ease,filter .3s}
.galeria-item:hover img{transform:scale(1.05);filter:brightness(1.08)}
.galeria-item.destacado{border-color:var(--amarillo)}
.galeria-titulo{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;background:linear-gradient(transparent,rgba(5,8,23,.92));color:#fff;font-weight:700;text-align:left;font-size:15px}
.galeria-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;background:rgba(5,8,23,.7);border:2px solid #fff;color:#fff;display:grid;place-items:center;font-size:22px;padding-left:4px}
.visor{width:min(1200px,96vw);max-height:94vh;padding:0;border:1px solid var(--linea-2);border-radius:var(--radio);background:#03050f;color:#fff;overflow:visible}
.visor::backdrop{background:rgba(2,3,10,.9)}
.visor-medio{display:grid;place-items:center;min-height:40vh}
.visor-medio img,.visor-medio video{max-width:100%;max-height:82vh;display:block}
.visor-medio iframe{width:100%;aspect-ratio:16/9;border:0}
.visor-pie{padding:10px 16px;display:flex;flex-direction:column;gap:2px}
.visor-pie span{color:#b8bdd6;font-size:14px}
.visor-cerrar{position:absolute;top:-14px;right:-14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--linea-2);background:var(--noche-2);color:#fff;cursor:var(--cur-mano,pointer);z-index:2}
.visor-nav{position:absolute;top:45%;width:46px;height:64px;border:0;border-radius:var(--radio-s);background:rgba(5,8,23,.6);color:#fff;font-size:38px;cursor:var(--cur-mano,pointer);z-index:2}
.visor-nav.ant{left:8px}.visor-nav.sig{right:8px}
.pz-tabs a[aria-current="page"]{border-color:var(--amarillo);color:var(--texto)}

/* ---------- perfiles ---------- */
.perfiles-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.perfil-tarjeta{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:20px 14px;border:1px solid var(--linea);border-radius:var(--radio);background:var(--noche-2);color:var(--texto);text-decoration:none;transition:transform .2s,border-color .2s}
.perfil-tarjeta:hover{transform:translateY(-4px);border-color:var(--amarillo)}
.perfil-tarjeta img,.perfil-inicial{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid var(--linea-2)}
.perfil-inicial{display:grid;place-items:center;background:linear-gradient(135deg,#1b2d63,#3346ff);color:#fff;font-weight:800;font-size:34px}
.perfil-inicial.grande{font-size:56px}
.perfil-bio{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oculto-publico{display:inline-block;font-size:11px;font-weight:700;color:#ffb3c0;background:rgba(239,43,74,.14);border-radius:99px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.opciones label.bloqueada{opacity:.55}

/* galería en rejilla pareja + filtros */
.galeria{columns:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.galeria-item{margin:0;aspect-ratio:16/10}
.galeria-item img{height:100%;object-fit:cover}
.galeria-item.destacado{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
@media (max-width:700px){.galeria-item.destacado{grid-column:auto;grid-row:auto;aspect-ratio:16/10}}
.filtros{display:flex;gap:6px;flex-wrap:wrap}
.filtros a{padding:7px 14px;border:1px solid var(--linea);border-radius:999px;text-decoration:none;color:var(--texto-2);font-size:14px;font-weight:600}
.filtros a:hover{color:var(--texto);border-color:var(--linea-2)}
.filtros a[aria-current="page"]{background:var(--amarillo);border-color:var(--amarillo);color:#111}
.heroe-logo{width:min(36vw,470px);top:11%}

.heroe-logo{transition:opacity .8s ease}
.heroe-carrusel.sin-logo .heroe-logo{opacity:0}
.heroe-carrusel{touch-action:pan-y;cursor:var(--cur-agarrar,grab);user-select:none}
.heroe-carrusel.arrastrando{cursor:var(--cur-agarrando,grabbing)}
.heroe-carrusel img{-webkit-user-drag:none;pointer-events:none}
.heroe-puntos button{pointer-events:auto}

/* ---------- carrusel con franja ---------- */
.heroe-carrusel .pista{display:flex;height:100%;will-change:transform}
.heroe-carrusel .slide{position:relative;inset:auto;flex:0 0 100%;height:100%;opacity:1;transition:none;overflow:hidden}
.heroe-carrusel:not(.listo) .slide:not(.activa){visibility:hidden}
.heroe-carrusel .slide picture{display:block;width:100%;height:100%;animation:acercar 26s ease-in-out infinite alternate;transform-origin:50% 45%}
.heroe-carrusel .slide img,.heroe-carrusel .slide.activa img{width:124%;max-width:none;margin-left:-12%;height:100%;object-fit:cover;animation:none!important;will-change:transform}
.heroe-carrusel.arrastrando .slide picture{animation-play-state:paused}

/* ---------- efectos sutiles ---------- */
.progreso-lectura{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#f2be00,#3346ff,#c8102e);pointer-events:none}
.nav{transition:box-shadow .3s,background .3s}
.nav.nav-bajo{box-shadow:0 10px 30px rgba(0,0,0,.45)}
.luz{position:relative;isolation:isolate}
.luz::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,210,31,.10),transparent 45%)}
.luz:hover::before{opacity:1}
.paso,.faccion,.rol,.tarjeta-enlace{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.paso:hover,.faccion:hover,.rol:hover,.tarjeta-enlace:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.btn{position:relative;overflow:hidden;transition:transform .15s ease,filter .2s,box-shadow .2s,background .2s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primario::after,.btn-azul::after,.btn-discord::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn-primario:hover::after,.btn-azul:hover::after,.btn-discord:hover::after{left:130%}
.btn-primario:hover{box-shadow:0 8px 26px rgba(255,210,31,.28)}
::selection{background:rgba(255,210,31,.35);color:#fff}
html{scroll-behavior:smooth}




/* carrusel: sin zoom de fondo (al dar la vuelta saltaba), imagen un poco más ancha para la profundidad */
.heroe-carrusel .slide picture{animation:none!important;transform:none!important}
.heroe-carrusel .slide img,.heroe-carrusel .slide.activa img{width:112%;margin-left:-6%}

.etiqueta.azul{background:rgba(88,101,242,.18);color:#a9b1ff;border-color:rgba(88,101,242,.4)}

/* ---------- punteros propios (solo con ratón): todos con el mismo estilo azul noche + amarillo ----------
   Cada regla usa var(--cur-*, puntero-normal); en pantallas táctiles quedan los del sistema. */
@media (pointer: fine){
  :root{
    --cur-flecha:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M4 2.5 21 13.2l-7.4 1.3 4.3 7.9-3.1 1.6-4.2-7.9L5 21.5Z' fill='%230b1030' stroke='%23ffd21f' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2,auto;
    --cur-mano:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M4 2.5 21 13.2l-7.4 1.3 4.3 7.9-3.1 1.6-4.2-7.9L5 21.5Z' fill='%23ffd21f' stroke='%230b1030' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2,pointer;
    --cur-texto:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8 3.5h3c.6 0 1 .4 1 1v15c0 .6-.4 1-1 1H8M16 3.5h-3c-.6 0-1 .4-1 1v15c0 .6.4 1 1 1h3M10 12h4' fill='none' stroke='%230b1030' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M8 3.5h3c.6 0 1 .4 1 1v15c0 .6-.4 1-1 1H8M16 3.5h-3c-.6 0-1 .4-1 1v15c0 .6.4 1 1 1h3M10 12h4' fill='none' stroke='%23ffd21f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 12 12,text;
    --cur-zoom:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='11.5' cy='11.5' r='8' fill='%230b1030' stroke='%23ffd21f' stroke-width='1.8'/%3E%3Cpath d='M17.5 17.5 25 25' stroke='%230b1030' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M17.5 17.5 25 25' stroke='%23ffd21f' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M11.5 7.8v7.4M7.8 11.5h7.4' stroke='%23ffd21f' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 11 11,zoom-in;
    --cur-no:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M4 2.5 21 13.2l-7.4 1.3 4.3 7.9-3.1 1.6-4.2-7.9L5 21.5Z' fill='%230b1030' stroke='%238a90a8' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='19' cy='19' r='5.5' fill='%230b1030' stroke='%23c8102e' stroke-width='2'/%3E%3Cpath d='m15.2 22.8 7.6-7.6' stroke='%23c8102e' stroke-width='2'/%3E%3C/svg%3E") 4 2,not-allowed;
    --cur-agarrar:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath d='M18 11V6a2 2 0 0 0-4 0v0M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15' fill='%230b1030' stroke='%23ffd21f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 14 12,grab;
    --cur-agarrando:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath d='M18 11.5V9a2 2 0 0 0-4 0v1.4M14 10V8a2 2 0 0 0-4 0v2M10 9.9V9a2 2 0 0 0-4 0v5M14 10a2 2 0 1 1 4 0M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-4a8 8 0 0 1-8-8 2 2 0 1 1 4 0' fill='%23ffd21f' stroke='%230b1030' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 14 12,grabbing;
  }
  html,body{cursor:var(--cur-flecha)}
  a[href],button,summary,select,label[for],[role="button"],[role="tab"],[onclick],[data-historia],input[type="checkbox"],input[type="radio"],input[type="submit"],input[type="button"],input[type="file"],input[type="range"],input[type="color"],.btn{cursor:var(--cur-mano)}
  input:not([type]),input[type="text"],input[type="search"],input[type="email"],input[type="url"],input[type="number"],input[type="password"],input[type="tel"],input[type="date"],input[type="datetime-local"],input[type="time"],textarea,[contenteditable="true"]{cursor:var(--cur-texto)}
  button:disabled,.btn[disabled],input:disabled,select:disabled,textarea:disabled{cursor:var(--cur-no)}
  .galeria-item{cursor:var(--cur-zoom)}
  .heroe-carrusel{cursor:var(--cur-agarrar)}
  .heroe-carrusel.arrastrando,.heroe-carrusel.arrastrando *{cursor:var(--cur-agarrando)!important}
  .heroe-carrusel .heroe-puntos button{cursor:var(--cur-mano)}
}

/* ---------- pantalla de mantenimiento / actualizando ---------- */
.act-fondo{position:fixed;inset:0;z-index:-1;background:url("/img/portada/2-1100.webp") center/cover no-repeat;filter:blur(4px) brightness(.55) saturate(1.25);transform:scale(1.08)}
.act-fondo::after{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 50% 30%,rgba(51,70,255,.28),transparent 70%),linear-gradient(to top,var(--noche) 8%,transparent 60%)}
.act-main{min-height:calc(100vh - 4px);display:grid;place-items:center;padding:32px 16px}
.act-caja{width:min(560px,100%);text-align:center;background:rgba(10,16,36,.72);border:1px solid var(--linea);border-radius:18px;padding:clamp(26px,5vw,44px);backdrop-filter:blur(10px);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.act-caja h1{font-size:clamp(34px,7vw,52px);margin:10px 0 12px}
.act-logo{width:min(300px,78%);height:auto;margin:0 auto 18px;filter:drop-shadow(0 8px 26px rgba(0,0,0,.6))}
.act-barra{position:relative;height:6px;border-radius:99px;background:var(--noche-4);overflow:hidden;margin:6px auto 0;max-width:340px}
.act-barra i{position:absolute;inset:0;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--amarillo),var(--azul),var(--rojo));animation:act-ir 1.6s ease-in-out infinite}
@keyframes act-ir{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}

/* ---------- campana de notificaciones y eventos en la portada ---------- */
.campana{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--linea-2);color:var(--texto-2);text-decoration:none;transition:color .2s,border-color .2s}
.campana:hover{color:var(--texto);border-color:var(--amarillo)}
.campana b{position:absolute;top:-4px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:99px;background:var(--rojo);color:#fff;font:700 11px/18px var(--cuerpo);text-align:center;box-shadow:0 0 0 2px var(--noche)}
.campana.con{color:var(--amarillo);border-color:rgba(255,210,31,.5)}
.menu-usuario .caja a small{display:block;color:var(--texto-3);font-size:12px}
.ev-mini-img{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--noche-4),var(--azul) 160%);overflow:hidden}
.ev-mini-img img{width:100%;height:100%;object-fit:cover}
.ev-mini .ev-fecha{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;align-items:center;min-width:54px;padding:6px 8px;border-radius:10px;background:rgba(6,9,20,.85);border:1px solid rgba(255,210,31,.5);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--amarillo);line-height:1.1}
.ev-mini .ev-fecha b{font-family:var(--display);font-size:26px;color:#fff;letter-spacing:0;font-weight:900}

/* ---------- celular ---------- */
.estado-pill .txt-corto{display:none}
@media (max-width:520px){
  .estado-pill .txt-corto{display:inline;font-weight:600;color:var(--texto)}
  .estado-pill{padding:5px 9px;gap:6px}
  .nav-der{gap:6px}
}
@media (max-width:700px){
  /* portada: recuadro horizontal para que las fotos no salgan con tanto zoom */
  .heroe-carrusel{aspect-ratio:16/11}
  .heroe-logo{width:46vw;top:12%}
  .heroe-panel{margin-top:-46px}
}
/* columnas con ancho fijo escrito en la página (perfil, etc.): se apilan en pantallas chicas */
@media (max-width:960px){.dos-col{grid-template-columns:1fr!important}}

/* ---------- menú del celular: se desplaza solo él, no la página de fondo ---------- */
@media (max-width:1060px){
  .nav.abierta .nav-links{max-height:calc(100dvh - 72px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));box-shadow:0 24px 50px rgba(0,0,0,.55)}
  html.menu-abierto,html.menu-abierto body{overflow:hidden}
}
/* menú del celular: una sola columna aunque tenga altura máxima (antes se partía en dos) */
.nav-cuenta-movil{display:none}
@media (max-width:1060px){
  .nav.abierta .nav-links{flex-wrap:nowrap}
  .nav-cuenta-movil{display:flex;flex-direction:column;border-top:1px solid var(--linea);margin-top:6px;padding-top:6px}
  .nav-cuenta-movil a{display:flex;flex-direction:column;gap:2px;padding:12px;text-decoration:none;color:var(--texto-2);border-radius:var(--radio-s)}
  .nav-cuenta-movil a b{color:var(--texto);font-size:15px}
  .nav-cuenta-movil a small{color:var(--texto-2);font-size:13px}
  .nav-cuenta-movil .nav-panel-movil{background:var(--amarillo-suave);border:1px solid rgba(255,210,31,.35)}
}
/* con el menú del celular abierto, los botones flotantes no tapan las opciones */
html.menu-abierto .discord-flotante,html.menu-abierto .asis-boton,html.menu-abierto .arriba{display:none!important}

/* ---------- /conectar ---------- */
.conectar-caja{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(24px,5vw,44px)}
.conectar-caja h1{font-size:clamp(32px,6vw,48px);margin:0}
.conectar-f8{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:6px}
.conectar-cmd{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.conectar-cmd code{font-family:var(--mono);font-size:17px;background:var(--noche);border:1px solid var(--linea-2);border-radius:8px;padding:9px 14px;color:var(--amarillo)}
.conectar-pasos{text-align:left;max-width:52ch;margin:6px 0 0;padding-left:1.1em;display:flex;flex-direction:column;gap:4px}

/* ---------- en vivo ---------- */
.vivo-aviso{display:block;width:100%;margin:0 0 12px;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,210,31,.45);background:var(--amarillo-suave);color:var(--amarillo);font:600 14px var(--cuerpo);text-align:center;animation:vivo-entra .35s ease}
.vivo-aviso:hover{filter:brightness(1.15)}
@keyframes vivo-entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.vivo-nuevo{animation:vivo-brillo 1.2s ease}
@keyframes vivo-brillo{0%{box-shadow:0 0 0 2px rgba(255,210,31,.5);border-radius:10px}100%{box-shadow:0 0 0 0 rgba(255,210,31,0)}}