:root{
  color-scheme: light;
  --bg:#F6F4F1; --surface:#FFFFFF; --surface-2:#EEEAF0; --ink:#1E1A2B; --muted:#5E5870; --line:#E2DDE6;
  --fucsia:#C2185B; --fucsia-ink:#FFFFFF; --verde:#0E7C66; --maiz:#E9A800; --cobalto:#1F4FA3;
  --tube:#D9C49A; --tube-back:#B9A374; --bar:rgba(246,244,241,.9); --ph-bg:#FFF1C2; --ph-ink:#6B4E00;
  --font-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --font-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#14122A; --surface:#1E1B37; --surface-2:#2A2649; --ink:#F2EFF9; --muted:#B4AECB; --line:#352F58;
    --fucsia:#F0659C; --fucsia-ink:#1A0B12; --verde:#3FC1A0; --maiz:#F5C542; --cobalto:#86A8F2;
    --tube:#CDB78A; --tube-back:#8E7B55; --bar:rgba(20,18,42,.9); --ph-bg:#3D3315; --ph-ink:#F5DD8A;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#14122A; --surface:#1E1B37; --surface-2:#2A2649; --ink:#F2EFF9; --muted:#B4AECB; --line:#352F58;
  --fucsia:#F0659C; --fucsia-ink:#1A0B12; --verde:#3FC1A0; --maiz:#F5C542; --cobalto:#86A8F2;
  --tube:#CDB78A; --tube-back:#8E7B55; --bar:rgba(20,18,42,.9); --ph-bg:#3D3315; --ph-ink:#F5DD8A;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.5}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bar);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--cobalto);outline-offset:2px;border-radius:8px}

.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bar);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.top-in{max-width:760px;margin:0 auto;padding:12px 16px;display:flex;align-items:center}
.brand{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.01em;text-decoration:none;display:flex;align-items:center;gap:10px}
.brand svg{width:28px;height:28px;flex:none}
.weave{height:6px;background:repeating-linear-gradient(90deg,var(--fucsia) 0 18px,var(--maiz) 18px 24px,var(--verde) 24px 40px,var(--cobalto) 40px 46px)}
.wrap{max-width:760px;margin:0 auto;padding:20px 16px 104px}

.note{display:flex;gap:10px;align-items:flex-start;background:var(--ph-bg);color:var(--ph-ink);border-radius:12px;padding:12px 14px;font-size:14px;font-weight:500;margin:0 0 18px}
.note span{flex:1}
.note .x{border:0;background:none;font-size:22px;line-height:1;padding:0 4px;cursor:pointer;color:inherit}
.info{background:var(--surface-2);border-radius:12px;padding:14px 16px;margin:0 0 14px}
.info p{margin:0 0 8px}
.info p:last-child{margin:0}

.hero{display:grid;gap:18px;margin-bottom:18px}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,7vw,40px);line-height:1.08;letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance}
.hero p{margin:0;color:var(--muted);font-size:17px;max-width:44ch}
.siku{width:100%;max-width:240px;height:auto;display:block}
@media (min-width:640px){.hero{grid-template-columns:1.35fr 1fr;align-items:end}.siku{max-width:300px;justify-self:end}}
@media (prefers-reduced-motion:no-preference){
  .siku.anim .tb{transform-box:fill-box;transform-origin:top;animation:baja .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 45ms)}
  @keyframes baja{from{transform:scaleY(.15);opacity:0}to{transform:none;opacity:1}}
}

.progress{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--muted)}
.bar{flex:1;height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--verde);border-radius:inherit;transition:width .4s}
.search{position:relative;display:block;margin:16px 0 10px}
.search input{width:100%;font-size:17px;padding:14px 16px 14px 46px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);-webkit-appearance:none;appearance:none}
.search input:focus{outline:none;border-color:var(--cobalto)}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted)}
.flabel{display:block;font-size:13.5px;font-weight:700;color:var(--muted);margin:8px 0 6px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font-size:14px;font-weight:600;padding:8px 14px;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.select{position:relative;display:block}
.select select{width:100%;font-size:16px;font-weight:600;padding:12px 44px 12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);-webkit-appearance:none;appearance:none;cursor:pointer}
.select select:focus{outline:none;border-color:var(--cobalto)}
.select.activo select{border-color:var(--ink)}
.select::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.resbar{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;color:var(--muted);margin:10px 0 4px;min-height:32px}
.link{border:0;background:none;color:var(--cobalto);font-weight:700;cursor:pointer;padding:6px 0}

.songs{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.song{display:flex;align-items:center;gap:14px;padding:14px 14px 14px 0;background:var(--surface);border:1px solid var(--line);border-radius:14px;text-decoration:none;overflow:hidden;min-height:64px}
.song::before{content:"";align-self:stretch;width:6px;margin:-14px 0;background:var(--c,var(--fucsia));flex:none}
.song .info-s{min-width:0;flex:1}
.song .t{display:block;font-weight:700;font-size:16px;line-height:1.3}
.meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.mini{font-size:12.5px;font-weight:600;color:var(--muted);background:var(--surface-2);padding:2px 8px;border-radius:6px}
.marks{display:flex;align-items:center;gap:6px;color:var(--muted);flex:none}
.marks .f{color:var(--fucsia)} .marks .f svg{fill:currentColor}
.marks .h{color:var(--verde)}
.empty{padding:26px 18px;text-align:center;color:var(--muted);background:var(--surface);border:1.5px dashed var(--line);border-radius:14px}
.empty a{color:var(--cobalto);font-weight:700}
.ph{background:var(--ph-bg);color:var(--ph-ink);border-radius:4px;padding:0 4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ad{display:flex;flex-direction:column;align-items:center;gap:6px;border:1.5px dashed var(--line);border-radius:14px;padding:18px;text-align:center;color:var(--muted);font-size:13px;margin:4px 0}

.btn{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;font-weight:700;font-size:16px;padding:12px 18px;min-height:48px;border-radius:12px;border:0;cursor:pointer;text-decoration:none;background:var(--fucsia);color:var(--fucsia-ink);text-align:center}
.btn.alt{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.btn.full{display:flex;width:100%}
.btn.sm{min-height:40px;padding:8px 14px;font-size:14px}
.btn .tag{font-size:11.5px;font-weight:700;background:var(--ph-bg);color:var(--ph-ink);padding:2px 8px;border-radius:99px}
.btn .ico{width:18px;height:18px;object-fit:contain;flex:none}

.back{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--muted);text-decoration:none;padding:4px 0;margin-bottom:10px;border:0;background:none;cursor:pointer}
.song-h1{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,6.5vw,34px);line-height:1.12;letter-spacing:-.015em;margin:0 0 8px}
.player{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#221E3A;margin:16px 0 10px}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px 16px 26px;text-align:center;color:#F2EFF9}
.poster::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-linear-gradient(90deg,#C2185B 0 18px,#E9A800 18px 24px,#0E7C66 24px 40px,#1F4FA3 40px 46px)}
.poster p{margin:0;font-weight:600;opacity:.85}
.poster .btn{background:#C2185B;color:#fff}
.block{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;margin:14px 0}
.block h2{font-family:var(--font-display);font-size:18px;font-weight:700;margin:0 0 6px;line-height:1.25}
.block p{margin:0 0 14px;color:var(--muted)}
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.act{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);font-size:13.5px;font-weight:600;cursor:pointer}
.act[data-accion="fav"][aria-pressed="true"]{color:var(--fucsia);border-color:var(--fucsia)}
.act[data-accion="fav"][aria-pressed="true"] svg{fill:currentColor}
.act[data-accion="hecho"][aria-pressed="true"]{color:var(--verde);border-color:var(--verde)}
.pn{display:flex;justify-content:space-between;gap:8px;margin-top:20px}

.page-h{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,7vw,36px);line-height:1.1;letter-spacing:-.02em;margin:4px 0 8px}
.lead{color:var(--muted);font-size:17px;margin:0 0 18px;max-width:52ch}
.sec-h{font-family:var(--font-display);font-size:21px;font-weight:700;margin:30px 0 10px}
.sec-h.first{margin-top:6px}
.price{font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--ink) !important;margin:2px 0 10px !important}
.plans{display:grid;gap:12px;margin-bottom:14px}
.plans .block{margin:0}
.plans .block p{margin-bottom:4px}
@media (min-width:560px){.plans{grid-template-columns:1fr 1fr}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.prod{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:10px 10px 12px;display:flex;flex-direction:column}
.prod .img{aspect-ratio:4/5;border-radius:12px;display:grid;place-items:center;overflow:hidden;margin-bottom:10px;background:repeating-linear-gradient(135deg,var(--surface-2) 0 12px,transparent 12px 24px);font-size:13px;text-align:center;padding:8px}
.prod .img img{width:100%;height:100%;object-fit:cover;display:block}
.prod .img.foto{padding:0;background:var(--surface-2)}
.prod .img.contener img{object-fit:contain}
.prod h2{font-size:16px;font-weight:700;margin:0 0 6px;line-height:1.3}
.prod .btn{margin-top:auto}
.nota-img{font-size:12px;color:var(--muted);margin:-6px 0 8px;font-style:italic}
.specs{margin:0 0 10px;display:grid;gap:3px;font-size:13.5px}
.specs div{display:flex;gap:5px;flex-wrap:wrap}
.specs dt{color:var(--muted);font-weight:600}
.specs dt::after{content:":"}
.specs dd{margin:0}
.servicio{border-left:6px solid var(--c,var(--fucsia))}
.numero-img{margin:6px 0 4px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff}
.numero-img img{display:block;width:100%;height:auto;min-height:140px}
.servicio .specs{font-size:15px;gap:6px}

.qrs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;max-width:420px;margin:0 auto}
.qrs .block{margin:0;text-align:center;padding:14px}
.qrs .block p{margin:0 0 8px}
.qr{width:100%;max-width:240px;aspect-ratio:1;margin:8px auto 12px;border:2px dashed var(--line);border-radius:14px;display:grid;place-items:center;padding:10px;overflow:hidden;font-size:12.5px}
.qr.lleno{border:0;padding:0;background:#fff}
.qr img{width:100%;height:100%;object-fit:contain}
.comu{border-left:6px solid var(--c,var(--verde))}
.comu .extra{color:var(--ink) !important;font-weight:600}
.small{font-size:14px;color:var(--muted)}
.datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 6px}
.datos div{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:14px 10px;text-align:center;font-size:13.5px;font-weight:600;color:var(--muted);line-height:1.3}
.datos b{display:block;font-family:var(--font-display);font-size:clamp(18px,5.4vw,24px);color:var(--ink);margin-bottom:4px}
.cookies{position:fixed;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:40;max-width:560px;margin:0 auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.28);font-size:14.5px}
.cookies p{margin:0 0 12px}
.cookies a{color:var(--cobalto);font-weight:700}
.cookies-b{display:flex;gap:8px;justify-content:flex-end}
.codigo{display:block;width:100%;min-height:280px;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;padding:12px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);resize:vertical}
.foot{margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.foot > p:first-child{margin:0 0 10px;font-weight:600;color:var(--muted);font-size:14px}
.social{display:flex;gap:8px;flex-wrap:wrap}

.pol h2{font-family:var(--font-display);font-size:18px;font-weight:700;margin:28px 0 8px;line-height:1.3}
.pol p,.pol li{line-height:1.6}
.pol p{margin:0 0 12px}
.pol ul{padding-left:20px;margin:0 0 12px}
.pol li{margin:4px 0}

.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--bar);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs-in{max-width:760px;margin:0 auto;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 10px;text-decoration:none;font-size:12px;font-weight:600;color:var(--muted)}
.tab svg{width:24px;height:24px}
.tab[aria-current="page"]{color:var(--fucsia)}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);opacity:0;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:12px;font-weight:600;font-size:14px;width:max-content;max-width:calc(100% - 32px);z-index:30;transition:opacity .2s,transform .2s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ===================== Diseño 2: aguayo y noche andina ===================== */
:root{
  --bg:#F6F3FB; --surface:#FFFFFF; --surface-2:#EFEAF8; --ink:#1B1736; --muted:#5D5878; --line:#E1DAF0;
  --fucsia:#D81B60; --fucsia-ink:#FFFFFF; --verde:#0E8A6E; --maiz:#D99A00; --cobalto:#2F5BD3; --violeta:#7C5CFF;
  --bar:rgba(255,255,255,.9); --card:rgba(255,255,255,.94); --chip-on-bg:#1B1736; --chip-on-ink:#FFFFFF;
  --glow1:rgba(122,150,255,.30); --glow2:rgba(255,95,162,.14); --patron:rgba(70,45,140,.05); --brillo:#B9A6FF; --sombra:0 6px 22px rgba(40,25,90,.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F0D26; --surface:#1D1A3B; --surface-2:#2A2650; --ink:#F5F2FF; --muted:#B9B3DA; --line:rgba(255,255,255,.13);
    --fucsia:#FF5FA2; --fucsia-ink:#1A0B12; --verde:#34D3A6; --maiz:#FFC83D; --cobalto:#7FA6FF; --violeta:#8B7BFF;
    --bar:rgba(15,13,38,.92); --card:rgba(36,33,70,.86); --chip-on-bg:#FFFFFF; --chip-on-ink:#15122E;
    --glow1:rgba(46,98,214,.45); --glow2:rgba(150,60,200,.22); --patron:rgba(255,255,255,.04); --brillo:#FFFFFF; --sombra:0 8px 26px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0F0D26; --surface:#1D1A3B; --surface-2:#2A2650; --ink:#F5F2FF; --muted:#B9B3DA; --line:rgba(255,255,255,.13);
  --fucsia:#FF5FA2; --fucsia-ink:#1A0B12; --verde:#34D3A6; --maiz:#FFC83D; --cobalto:#7FA6FF; --violeta:#8B7BFF;
  --bar:rgba(15,13,38,.92); --card:rgba(36,33,70,.86); --chip-on-bg:#FFFFFF; --chip-on-ink:#15122E;
  --glow1:rgba(46,98,214,.45); --glow2:rgba(150,60,200,.22); --patron:rgba(255,255,255,.04); --brillo:#FFFFFF; --sombra:0 8px 26px rgba(0,0,0,.35);
}
html{background:radial-gradient(900px 560px at 92% 0%,var(--glow1),transparent 65%),radial-gradient(700px 640px at -12% 42%,var(--glow2),transparent 62%),var(--bg);background-color:var(--bg)}
body{background:transparent}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--patron);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23000' stroke-width='4'%3E%3Cpath d='M60 6L114 60L60 114L6 60Z'/%3E%3Cpath d='M60 24L96 60L60 96L24 60Z'/%3E%3Cpath d='M60 42L78 60L60 78L42 60Z'/%3E%3Cpath d='M0 0L6 6M120 0L114 6M0 120L6 114M120 120L114 114'/%3E%3C/svg%3E") 0 0/120px 120px repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23000' stroke-width='4'%3E%3Cpath d='M60 6L114 60L60 114L6 60Z'/%3E%3Cpath d='M60 24L96 60L60 96L24 60Z'/%3E%3Cpath d='M60 42L78 60L60 78L42 60Z'/%3E%3Cpath d='M0 0L6 6M120 0L114 6M0 120L6 114M120 120L114 114'/%3E%3C/svg%3E") 0 0/120px 120px repeat}
.top{background:var(--bar)}
.top-in{padding:14px 16px}
.brand{font-size:20px}
.brand svg{width:32px;height:32px}
.weave{height:18px;background:linear-gradient(to bottom,rgba(255,255,255,.22),rgba(255,255,255,0) 42%,rgba(0,0,0,.18)),url("/img/franja.webp") 0 50%/auto 18px repeat-x;-webkit-mask:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);mask:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);box-shadow:none}
.wrap{padding-bottom:116px}

.hero{gap:10px;margin:6px 0 22px}
.hero h1{font-size:clamp(34px,9.6vw,48px);line-height:1.02;letter-spacing:-.025em;margin-bottom:14px}
.hero p{font-size:clamp(17px,2.6vw,20px);line-height:1.45}
.siku{max-width:250px;justify-self:center;overflow:visible;transform:translateX(14%)}
.siku .brillo{fill:var(--brillo,#fff)}
@media (min-width:640px){.hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center}.hero h1{font-size:clamp(40px,5.6vw,64px)}.siku{max-width:420px;justify-self:end;transform:translateX(9%)}}
@media (prefers-reduced-motion:no-preference){
  .siku .flota{animation:flota 5s ease-in-out infinite;animation-delay:calc(var(--d,0) * -1s);transform-box:fill-box;transform-origin:center}
  @keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
}

.progress{font-size:15px;gap:16px}
.bar{height:10px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.bar i{background:linear-gradient(90deg,#7C6CFF,#C86BFF 50%,#FF5FA2);box-shadow:0 0 14px rgba(255,95,162,.55)}
.search{margin:22px 0 16px}
.search input{background:var(--card);border:1.5px solid var(--line);border-radius:22px;padding:18px 18px 18px 56px;font-size:18px;box-shadow:var(--sombra)}
.search svg{left:20px;width:24px;height:24px}
.chips{gap:10px;padding:2px 0 8px}
.chip{font-size:15.5px;padding:10px 20px;border:2px solid var(--cc,var(--line));background:transparent;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--chip-on-bg);color:var(--chip-on-ink);border-color:var(--chip-on-bg);box-shadow:0 4px 16px rgba(0,0,0,.18)}
.flabel{font-size:15px;margin:14px 0 8px}
.select select{border:2px solid transparent;border-radius:20px;padding:16px 52px 16px 18px;font-size:18px;font-weight:500;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(90deg,var(--fucsia),var(--maiz),var(--verde),var(--cobalto)) border-box;
  box-shadow:0 0 20px color-mix(in srgb,var(--cobalto) 32%,transparent)}
.select.activo select{border-color:transparent;box-shadow:0 0 24px color-mix(in srgb,var(--fucsia) 45%,transparent)}
.select::after{right:22px;width:11px;height:11px;border-color:var(--ink)}
.select select{color-scheme:light dark}
.select option{background-color:var(--surface);color:var(--ink)}
.select option:checked{background-color:var(--surface-2);color:var(--ink)}
.resbar{font-size:15px;margin:16px 0 6px}

.songs{gap:12px}
.song{padding:12px 16px 12px 12px;min-height:0;gap:14px;border-radius:20px;background:var(--card);border:1.5px solid var(--line);box-shadow:var(--sombra)}
.song::before{display:none}
.song .thumb{align-self:center;width:76px;height:76px;flex:none;border-radius:14px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 0 1px var(--line),0 4px 12px rgba(0,0,0,.22)}
.thumb.f0{background-image:url("/img/tejido-0.webp")}.thumb.f1{background-image:url("/img/tejido-1.webp")}.thumb.f2{background-image:url("/img/tejido-2.webp")}.thumb.f3{background-image:url("/img/tejido-3.webp")}.thumb.f4{background-image:url("/img/tejido-4.webp")}.thumb.f5{background-image:url("/img/tejido-5.webp")}.thumb.f6{background-image:url("/img/tejido-6.webp")}.thumb.f7{background-image:url("/img/tejido-7.webp")}.thumb.f8{background-image:url("/img/tejido-8.webp")}.thumb.f9{background-image:url("/img/tejido-9.webp")}.thumb.f10{background-image:url("/img/tejido-10.webp")}.thumb.f11{background-image:url("/img/tejido-11.webp")}.thumb.f12{background-image:url("/img/tejido-12.webp")}
.song .info-s{padding:2px 0}
.song .t{font-size:18px}
.meta{gap:8px;margin-top:8px}
.mini{font-size:13.5px;padding:3px 10px;border-radius:8px;color:var(--ink);background:color-mix(in srgb,var(--c,var(--violeta)) 26%,transparent)}
.meta .mini:nth-child(2){background:color-mix(in srgb,var(--c2,var(--cobalto)) 26%,transparent)}
.marks svg{width:22px;height:22px}

.block,.prod{background:var(--card);border:1.5px solid var(--line);border-radius:20px;box-shadow:var(--sombra)}
.empty{background:var(--card);border-radius:20px}

.tabs{border-top:0;background:var(--bar)}
.tabs::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:repeating-linear-gradient(90deg,var(--fucsia) 0 12.5%,var(--maiz) 12.5% 25%,var(--verde) 25% 37.5%,var(--cobalto) 37.5% 50%)}
.tab{font-size:13px;padding:14px 2px 12px;gap:4px}
.tab svg{width:28px;height:28px}
.tab[aria-current="page"]{color:var(--fucsia);text-shadow:0 0 14px color-mix(in srgb,var(--fucsia) 55%,transparent)}
.tab[aria-current="page"] svg{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--fucsia) 65%,transparent))}
.toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.cookies{bottom:calc(90px + env(safe-area-inset-bottom,0px))}

/* Lista de donantes */
.gracias{border-left:6px solid var(--maiz)}
.donantes{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.donantes li{padding:6px 12px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--maiz) 18%,transparent);border:1px solid color-mix(in srgb,var(--maiz) 45%,transparent)}
.donantes.todos{max-height:260px;overflow:auto;padding-right:4px}
.ad-pagina{margin:28px 0}