/* Caída — sistema visual "Mesa de noche": paño azul marino mate bajo una lámpara cálida,
   riel de nogal, cartas color marfil y detalles de latón. Pensado primero para teléfono. */

:root{
  color-scheme:dark;
  --noche:#0c1422;--noche-2:#121d31;--noche-3:#1a2842;--noche-4:#22355a;
  --pano:#1f3557;--pano-hondo:#0f1b2e;
  --madera:#5a3922;--madera-hondo:#2a180d;--madera-luz:#8b5b38;
  --marfil:#f6eedc;--marfil-2:#e8dbbe;--marfil-3:#cfc0a0;
  --tinta:#19130f;--tenue:#a3b1c6;--tenue-2:#7c8aa1;
  --laton:#dcaa4c;--laton-luz:#ffe3a1;--laton-hondo:#94681f;
  --teja:#d4573b;--teja-luz:#f08a64;--teja-hondo:#8e2f1d;
  --azul:#4b8fe0;--verde:#45b27a;--rojo:#e0503d;--morado:#9b7bff;
  --lampara:255,198,124;
  --j0:#f2c14e;--j1:#ff7a5c;--j2:#6fb8ff;--j3:#7fd68f;
  --disp:"Alfa Slab One","Rockwell Extra Bold",Georgia,serif;
  --cond:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --txt:"Barlow",system-ui,sans-serif;
  --radio:16px;--radio-chico:10px;
  --sombra:0 18px 40px rgba(0,0,0,.45);
  --resorte:cubic-bezier(.2,1.2,.3,1);--suave:cubic-bezier(.22,.8,.24,1);
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  --vetas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='160'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .22' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='.5'/%3E%3C/svg%3E");
}
html,body{height:100%;margin:0;overflow:hidden;background:var(--noche);color:var(--marfil);font:400 16px/1.45 var(--txt);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0}
a{color:var(--laton-luz)}
:focus-visible{outline:3px solid var(--laton);outline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:400;text-wrap:balance;letter-spacing:.01em}
p{margin:0}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em}
.ico.lleno{fill:currentColor;stroke:none}

/* ---------- Pantallas y transiciones ---------- */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;
  padding-block:calc(14px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-bottom,0px));
  padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));
  background:radial-gradient(110% 60% at 50% -8%,rgba(var(--lampara),.2),transparent 62%),radial-gradient(120% 80% at 50% 115%,rgba(0,0,0,.6),transparent 60%),var(--grano),linear-gradient(180deg,#16233a,#0c1524)}
.screen.entrando,.screen.saliendo{pointer-events:none}
.contenido{width:100%;max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:18px;min-width:0}
.contenido.estrecho{max-width:620px}
.cabecera{display:flex;align-items:center;gap:12px;min-height:48px}
.cabecera .titulo{flex:1;min-width:0}
.titulo{font-size:clamp(26px,5.4vw,40px);line-height:1.05;color:var(--laton);text-shadow:.035em .035em 0 var(--teja-hondo),.07em .07em 0 rgba(0,0,0,.55)}
.titulo.centrado{text-align:center}
.subtitulo{font:600 clamp(16px,2.4vw,19px)/1.3 var(--cond);letter-spacing:.02em;color:var(--marfil-2)}
.et{font:700 13px/1.2 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--laton)}
.tenue{color:var(--tenue)}
.chico{font-size:13.5px;line-height:1.35}

/* ---------- Botones con volumen ---------- */
.b3d{--c1:#2a3d62;--c2:#1c2b47;--borde:#0d1626;--brillo:rgba(255,255,255,.16);--tx:var(--marfil);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:10px 20px;
  border-radius:var(--radio);color:var(--tx);font:700 17px/1.1 var(--cond);letter-spacing:.04em;text-align:center;
  background:linear-gradient(180deg,var(--c1),var(--c2));
  box-shadow:0 6px 0 var(--borde),0 12px 22px rgba(0,0,0,.42),inset 0 1px 0 var(--brillo),inset 0 -3px 0 rgba(0,0,0,.14);
  transform:translateY(0);transition:transform .12s var(--suave),box-shadow .12s var(--suave),filter .2s;
  user-select:none;-webkit-user-select:none;touch-action:manipulation}
.b3d::after{content:"";position:absolute;inset:2px 8px auto;height:42%;border-radius:calc(var(--radio) - 4px) calc(var(--radio) - 4px) 50% 50%/calc(var(--radio) - 4px) calc(var(--radio) - 4px) 14px 14px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0));pointer-events:none}
.b3d:hover{filter:brightness(1.08)}
.b3d:active,.b3d.pulsado{transform:translateY(5px);box-shadow:0 1px 0 var(--borde),0 4px 10px rgba(0,0,0,.38),inset 0 1px 0 var(--brillo),inset 0 -1px 0 rgba(0,0,0,.14)}
.b3d:disabled,.b3d[aria-disabled=true]{filter:grayscale(.7) brightness(.7);cursor:not-allowed;transform:translateY(3px);box-shadow:0 3px 0 var(--borde)}
.b3d small{display:block;font:500 13px/1.2 var(--cond);letter-spacing:.03em;opacity:.82;text-transform:none}
.b3d.teja{--c1:#ea7150;--c2:#c64a30;--borde:#7c2615;--brillo:rgba(255,220,200,.45)}
.b3d.laton{--c1:#f3c769;--c2:#cf9a3c;--borde:#7d5414;--brillo:rgba(255,248,220,.7);--tx:var(--tinta)}
.b3d.marfil{--c1:#fbf5e8;--c2:#e6d7b6;--borde:#9b8761;--brillo:#fff;--tx:var(--tinta)}
.b3d.verde{--c1:#5cc78f;--c2:#329a63;--borde:#17573a;--brillo:rgba(220,255,235,.5);--tx:#06210f}
.b3d.madera{--c1:#8a5a37;--c2:#5d3a22;--borde:#2c180b;--brillo:rgba(255,220,180,.3);background:var(--vetas),linear-gradient(180deg,var(--c1),var(--c2))}
.b3d.cristal{--c1:rgba(255,255,255,.12);--c2:rgba(255,255,255,.05);--borde:rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.b3d.grande{min-height:64px;padding:14px 28px;font:400 clamp(22px,4.6vw,30px)/1.05 var(--disp);letter-spacing:.01em;border-radius:20px}
.b3d.grande small{font:600 14px/1.2 var(--cond);letter-spacing:.04em;margin-top:3px}
.b3d.chico{min-height:36px;padding:6px 14px;font-size:15px;border-radius:12px;box-shadow:0 4px 0 var(--borde),0 8px 14px rgba(0,0,0,.35),inset 0 1px 0 var(--brillo)}
.b3d.chico:active{transform:translateY(3px);box-shadow:0 1px 0 var(--borde),inset 0 1px 0 var(--brillo)}
.b3d.icono{width:46px;min-width:46px;padding:0;border-radius:14px}
.b3d.icono.chico{width:36px;min-width:36px;padding:0}
.b3d.icono .ico{width:22px;height:22px}
.b3d.bloque{display:flex;width:100%}
.b3d .insignia{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--rojo);color:#fff;font:700 13px/22px var(--cond);box-shadow:0 2px 6px rgba(0,0,0,.5),0 0 0 2px var(--noche)}

/* Control segmentado: la opción elegida queda hundida y con luz de latón */
.seg{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:5px;border-radius:14px;background:rgba(0,0,0,.28);box-shadow:inset 0 2px 6px rgba(0,0,0,.45)}
.op{min-width:58px;padding:8px 14px;border-radius:10px;font:700 16px/1.1 var(--cond);letter-spacing:.03em;color:var(--marfil-2);background:linear-gradient(180deg,#24365a,#1a2944);box-shadow:0 3px 0 #0b1322,inset 0 1px 0 rgba(255,255,255,.1);transition:transform .12s,box-shadow .12s,background .2s,color .2s}
.op:hover{filter:brightness(1.12)}
.op[aria-pressed=true]{color:var(--tinta);background:linear-gradient(180deg,var(--laton-luz),var(--laton));box-shadow:0 1px 0 var(--laton-hondo),inset 0 2px 4px rgba(120,80,20,.35);transform:translateY(2px)}

/* Interruptor */
.interruptor{position:relative;width:54px;height:30px;flex:none;border-radius:15px;background:#0b1322;box-shadow:inset 0 2px 5px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.08);transition:background .25s}
.interruptor::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:linear-gradient(180deg,#f7efdd,#d8c8a6);box-shadow:0 2px 4px rgba(0,0,0,.5);transition:transform .25s var(--resorte)}
.interruptor[aria-checked=true]{background:linear-gradient(180deg,#d9a84a,#b98428)}
.interruptor[aria-checked=true]::after{transform:translateX(24px)}

/* Campos */
.campo{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left}
.campo>span{font:700 13px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--laton)}
.entrada,select.entrada,textarea.entrada{width:100%;min-height:46px;padding:11px 14px;border-radius:12px;border:1px solid rgba(220,170,76,.22);background:rgba(4,9,18,.55);color:var(--marfil);box-shadow:inset 0 2px 6px rgba(0,0,0,.45);outline:none;transition:border-color .2s,box-shadow .2s}
.entrada::placeholder{color:var(--tenue-2)}
.entrada:focus{border-color:var(--laton);box-shadow:inset 0 2px 6px rgba(0,0,0,.45),0 0 0 3px rgba(220,170,76,.22)}
textarea.entrada{resize:vertical;min-height:84px}
input[type=range]{accent-color:var(--laton);width:100%}
.error{color:#ff9f8c;font-size:14px;min-height:1.2em}

/* Paneles */
.tarjeta{position:relative;border-radius:var(--radio);padding:16px;background:linear-gradient(180deg,rgba(38,56,92,.72),rgba(20,31,52,.78));box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 0 0 1px rgba(220,170,76,.16),var(--sombra);min-width:0}
.tarjeta.marfil{background:linear-gradient(180deg,#fbf4e4,#eadfc4);color:var(--tinta);box-shadow:0 0 0 1px rgba(150,120,70,.3),var(--sombra)}
.tarjeta.hundida{background:rgba(3,8,16,.4);box-shadow:inset 0 2px 8px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.05)}
.tarjeta h3{font-size:20px;color:var(--laton);margin-bottom:10px}
.rejilla{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--min,260px)),1fr))}
.fila{display:flex;align-items:center;gap:12px;min-width:0}
.fila.espacio{justify-content:space-between}
.columna{display:flex;flex-direction:column;gap:12px;min-width:0}
.vacio{padding:26px 12px;text-align:center;color:var(--tenue);font-size:15px}
.separador{height:1px;background:linear-gradient(90deg,transparent,rgba(220,170,76,.3),transparent);margin:4px 0}

/* Pestañas con indicador que se desliza */
.pestanas{position:relative;display:flex;gap:4px;padding:5px;border-radius:14px;background:rgba(0,0,0,.3);box-shadow:inset 0 2px 6px rgba(0,0,0,.45);overflow-x:auto;scrollbar-width:none}
.pestanas::-webkit-scrollbar{display:none}
.pestana{position:relative;z-index:1;flex:1 0 auto;padding:9px 16px;border-radius:10px;font:700 15px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--tenue);white-space:nowrap;transition:color .25s}
.pestana[aria-selected=true]{color:var(--tinta)}
.pestanas .indicador{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:10px;background:linear-gradient(180deg,var(--laton-luz),var(--laton));box-shadow:0 2px 0 var(--laton-hondo);transition:transform .35s var(--suave),width .35s var(--suave)}

/* Capa modal, hojas y avisos */
#capa{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(3,7,14,.66);backdrop-filter:blur(3px);overflow:auto}
.hoja{position:relative;width:min(560px,100%);max-height:calc(100% - 8px);overflow:auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 20px;border-radius:22px;text-align:center;background:radial-gradient(120% 80% at 50% 0,rgba(var(--lampara),.12),transparent 60%),linear-gradient(180deg,#22345a,#142039);box-shadow:0 0 0 1px rgba(220,170,76,.25),0 30px 70px rgba(0,0,0,.65)}
.hoja.ancha{width:min(860px,100%)}
.hoja h2{font-size:clamp(24px,5vw,34px);color:var(--laton);text-shadow:2px 2px 0 rgba(0,0,0,.5)}
.hoja .cerrar{position:absolute;top:10px;right:10px}
.acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
#notas{position:fixed;z-index:1200;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:min(440px,calc(100% - 24px));pointer-events:none}
.nota-app{pointer-events:auto;display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;border-radius:14px;background:linear-gradient(180deg,#2a3f66,#1a2a47);box-shadow:0 0 0 1px rgba(220,170,76,.3),0 14px 30px rgba(0,0,0,.5);font-size:15px}
.nota-app .ico{color:var(--laton);width:24px;height:24px}
.nota-app b{color:var(--laton-luz)}
.nota-app .acciones{margin-left:auto;flex-wrap:nowrap;gap:8px}

/* ---------- Avatares, marcos, rangos y moneda ---------- */
.avatar{--t:48px;--anillo:linear-gradient(145deg,#a4703f,#5b3a22 55%,#8a5a37);position:relative;display:inline-block;vertical-align:middle;flex:none;width:var(--t);height:var(--t);border-radius:50%;padding:calc(var(--t)*.075);background:var(--anillo);box-shadow:0 3px 8px rgba(0,0,0,.45)}
.avatar .cara{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#33507f,#17243d);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.avatar .cara img{width:100%;height:100%;object-fit:cover;display:block}
.avatar .cara svg{width:62%;height:62%}
.avatar .cara .inicial{font:400 calc(var(--t)*.42) var(--disp);color:var(--marfil)}
.avatar .nivel{position:absolute;right:-4px;bottom:-4px;min-width:calc(var(--t)*.42);height:calc(var(--t)*.42);max-height:24px;max-width:40px;padding:0 4px;border-radius:999px;display:grid;place-items:center;font:700 clamp(10px,calc(var(--t)*.24),14px)/1 var(--cond);color:var(--tinta);background:linear-gradient(180deg,var(--laton-luz),var(--laton));box-shadow:0 0 0 2px var(--noche-2)}
.avatar .punto{position:absolute;right:2%;top:2%;width:24%;height:24%;max-width:14px;max-height:14px;border-radius:50%;background:#58d68d;box-shadow:0 0 0 2px var(--noche-2)}
.avatar.bot .cara{background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--bot) 75%,#fff),var(--bot) 60%,color-mix(in srgb,var(--bot) 60%,#000))}
.avatar.bot .cara svg{color:#0d1626;width:66%;height:66%}
.marco-cobre{--anillo:linear-gradient(145deg,#f0a873,#9a5229 50%,#e08e5c)}
.marco-plata{--anillo:linear-gradient(145deg,#ffffff,#9aa4af 48%,#e5eaf0 70%,#7d8792)}
.marco-oro{--anillo:conic-gradient(from 20deg,#fff1b8,#d9a03a,#fff3c0,#b97f1f,#ffe08a,#d9a03a,#fff1b8)}
.marco-araguaney{--anillo:radial-gradient(circle at 50% 0,#ffe066 0 12%,transparent 13%),radial-gradient(circle at 100% 50%,#ffd23f 0 12%,transparent 13%),radial-gradient(circle at 50% 100%,#ffe066 0 12%,transparent 13%),radial-gradient(circle at 0 50%,#ffd23f 0 12%,transparent 13%),conic-gradient(#f9c80e,#6b4f1d,#f9c80e,#8a6a2a,#f9c80e)}
.marco-orquidea{--anillo:conic-gradient(#f3a6d9,#a2307f,#f7c8e8,#c04d9c,#f3a6d9)}
.marco-turpial{--anillo:conic-gradient(#ff8c1a 0 30%,#151515 30% 48%,#fff 48% 52%,#151515 52% 70%,#ff8c1a 70%)}
.marco-neon{--anillo:conic-gradient(#00f0ff,#ff2bd6,#ffe600,#00f0ff);box-shadow:0 0 12px rgba(0,240,255,.6),0 0 24px rgba(255,43,214,.35)}
.marco-neon::before{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;filter:blur(6px);opacity:.6;z-index:-1;animation:girar 4s linear infinite}
.marco-tricolor{--anillo:conic-gradient(#f6c700 0 33.3%,#0033a0 33.3% 66.6%,#cf142b 66.6%)}
.marco-diamante{--anillo:conic-gradient(#e8f7ff,#5fb6ff,#ffffff,#8ec5ff,#e8f7ff,#3d8fe0,#e8f7ff);box-shadow:0 0 14px rgba(142,197,255,.6)}
.marco-maestro{--anillo:conic-gradient(#e7c6ff,#7b3fd1,#f2e0ff,#5b2aa8,#e7c6ff);box-shadow:0 0 14px rgba(197,140,255,.55)}
.marco-leyenda{--anillo:conic-gradient(from 0deg,#ffd27a,#ff6a2b,#ffe7a8,#c43a12,#ffd27a);box-shadow:0 0 18px rgba(255,138,91,.65)}
.marco-leyenda::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(transparent 0 70%,rgba(255,240,200,.9) 80%,transparent 90%);animation:girar 2.6s linear infinite;z-index:-1}
.marco-veterano{--anillo:repeating-conic-gradient(#d9a648 0 8deg,#6b4515 8deg 16deg)}
.marco-centenario{--anillo:conic-gradient(#fff,#ffd27a,#9b7bff,#6fb8ff,#7fd68f,#fff);box-shadow:0 0 20px rgba(255,255,255,.45)}
.marco-centenario::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px dashed rgba(255,240,200,.7);animation:girar 9s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.emblema{display:inline-block;flex:none;width:var(--t,34px);height:calc(var(--t,34px)*1.1);vertical-align:middle;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.moneda{display:inline-flex;align-items:center;gap:6px;font:700 17px/1 var(--cond);letter-spacing:.02em;color:var(--laton-luz);font-variant-numeric:tabular-nums}
.moneda::before{content:"";width:1.15em;height:1.15em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#f0c255 40%,#b78325 75%,#7d5414);box-shadow:inset 0 0 0 2px rgba(125,84,20,.6),0 1px 2px rgba(0,0,0,.5)}
.barra{position:relative;height:8px;border-radius:999px;overflow:hidden;background:rgba(0,0,0,.4);box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.barra>u{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,var(--laton),var(--laton-luz));transition:width .8s var(--suave)}
.rareza-comun{--rz:#b9c3d1}.rareza-raro{--rz:#5fb6ff}.rareza-epico{--rz:#b58cff}.rareza-legendario{--rz:#ffb44a}
.etiqueta-rz{display:inline-block;padding:2px 8px;border-radius:999px;font:700 11.5px/1.4 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta);background:var(--rz)}

/* Banners del perfil */
.banner{position:relative;overflow:hidden;border-radius:var(--radio);min-height:120px;background:var(--fondo-banner,linear-gradient(135deg,#1f3557,#0f1b2e));box-shadow:inset 0 -40px 60px rgba(0,0,0,.35)}
.banner-mesa{--fondo-banner:radial-gradient(70% 90% at 50% 0,rgba(255,198,124,.35),transparent 60%),var(--grano),linear-gradient(160deg,#284572,#13233d)}
.banner-bodega{--fondo-banner:radial-gradient(60% 100% at 70% 0,rgba(255,190,110,.55),transparent 60%),var(--vetas),linear-gradient(160deg,#7a4b2b,#2f1b0e)}
.banner-llano{--fondo-banner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 92 Q60 84 120 90 T240 86 T400 90 V120 H0Z' fill='%23231208'/%3E%3Cpath d='M300 90 l4-26 4 26z M296 70 q8-10 16 0' fill='%23231208'/%3E%3C/svg%3E") bottom/100% 100% no-repeat,radial-gradient(40% 50% at 70% 78%,#ffd27a,transparent 70%),linear-gradient(180deg,#3a1c5c,#c2456b 45%,#f59e4c 78%,#ffd27a)}
.banner-avila{--fondo-banner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L0 78 Q70 30 140 52 T260 34 T400 70 V120Z' fill='%23164b34'/%3E%3Cpath d='M0 120 L0 96 Q90 70 190 88 T400 92 V120Z' fill='%230b2a1d'/%3E%3C/svg%3E") bottom/100% 100% no-repeat,linear-gradient(180deg,#6fb3e8,#bfe3f5 70%,#e7f5ea)}
.banner-caribe{--fondo-banner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 80 Q25 72 50 80 T100 80 T150 80 T200 80 T250 80 T300 80 T350 80 T400 80 V120 H0Z' fill='%2300a6b4' opacity='.7'/%3E%3Cpath d='M0 94 Q25 86 50 94 T100 94 T150 94 T200 94 T250 94 T300 94 T350 94 T400 94 V120 H0Z' fill='%23006e85'/%3E%3C/svg%3E") bottom/100% 100% no-repeat,linear-gradient(180deg,#7fd8f0,#2fb8c9 60%,#f3e3b5)}
.banner-tepuy{--fondo-banner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M40 120 L70 46 L180 42 L205 120Z M230 120 L255 62 L330 58 L360 120Z' fill='%231d3b2e'/%3E%3Cpath d='M0 120 V100 Q200 84 400 100 V120Z' fill='%23102619'/%3E%3C/svg%3E") bottom/100% 100% no-repeat,linear-gradient(180deg,#92a7b8,#d7e2e2 60%,#f2f2ea)}
.banner-noche{--fondo-banner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 V88 h20 v-14 h14 v20 h12 v-30 h18 v24 h16 v-12 h12 v28 h20 v-40 h10 v40 h18 v-18 h22 v26 h14 v-34 h16 v20 h20 v-10 h18 v22 h14 v-28 h22 v30 h16 v-16 h18 v24 h16 v-8 h18 V120Z' fill='%230a0f1f'/%3E%3C/svg%3E") bottom/100% 100% no-repeat,radial-gradient(1px 1px at 20% 20%,#fff,transparent),radial-gradient(1px 1px at 60% 35%,#fff,transparent),radial-gradient(1.5px 1.5px at 80% 15%,#fff,transparent),radial-gradient(1px 1px at 40% 10%,#fff,transparent),linear-gradient(180deg,#0b1030,#27306a 70%,#6b4c8a)}
.banner-araguaney{--fondo-banner:radial-gradient(circle at 20% 30%,#ffd23f 0 6px,transparent 7px) 0 0/60px 60px,radial-gradient(circle at 70% 70%,#f9c80e 0 5px,transparent 6px) 0 0/48px 48px,radial-gradient(circle at 50% 50%,#ffe680 0 3px,transparent 4px) 10px 14px/36px 36px,linear-gradient(160deg,#5a8f3a,#2d5a1f)}
.banner-tricolor{--fondo-banner:radial-gradient(circle at 50% 120%,transparent 46%,transparent 47%),linear-gradient(180deg,#f6c700 0 33.3%,#0033a0 33.3% 66.6%,#cf142b 66.6%)}
.banner-tricolor::after{content:"★ ★ ★ ★ ★ ★ ★ ★";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;letter-spacing:.5em;white-space:nowrap}
.banner-salinas{--fondo-banner:linear-gradient(180deg,#f7d6e0,#fbe9ef 50%,#ffffff 50%,#f3dde6)}
.banner-platino{--fondo-banner:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%),linear-gradient(160deg,#4fb8ab,#1f5c58)}
.banner-maestro{--fondo-banner:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 10px,transparent 10px 20px),linear-gradient(160deg,#5b2aa8,#24104d)}
.banner-leyenda{--fondo-banner:radial-gradient(60% 120% at 50% 110%,rgba(255,106,43,.75),transparent 60%),radial-gradient(40% 80% at 30% 120%,rgba(255,210,122,.6),transparent 60%),linear-gradient(180deg,#120804,#2c0f05)}
.banner-medanos{--fondo-banner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 V84 Q80 56 170 82 T400 74 V120Z' fill='%23e0a45e'/%3E%3Cpath d='M0 120 V100 Q120 78 240 98 T400 96 V120Z' fill='%23c07a3a'/%3E%3C/svg%3E") bottom/100% 100% no-repeat,linear-gradient(180deg,#f7c98b,#fbe3b5)}

/* Barra superior de las pantallas internas */
.volver{flex:none}
.bloque-scroll{overflow:auto;min-height:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}