/* Voces Directas - estilos propios (sin librerías externas) */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#ffffff;color:#18181b;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:#09090b;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,p,ul,ol{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.14em;flex:none}
.wrap{max-width:72rem;margin:0 auto;padding:0 1rem}
.mut{color:#52525b}
.small{font-size:.8rem}

/* Cabecera */
.topbar{position:sticky;top:0;z-index:40;border-bottom:1px solid #e4e4e7;background:rgba(255,255,255,.92);backdrop-filter:blur(8px)}
.bar{display:flex;align-items:center;justify-content:space-between;height:4rem}
.brand{display:flex;align-items:center;gap:.75rem;color:#09090b;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.brand:hover{text-decoration:none}
.brand-ico{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:.75rem;background:linear-gradient(135deg,#09090b,#09090b);color:#ffffff}
.link-btn{color:#3f3f46;font-size:.875rem;font-weight:600}
.link-btn:hover{color:#09090b}

/* Migas */
.crumbs{margin-bottom:1.25rem;font-size:.8rem;color:#52525b}
.crumbs ol{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;list-style:none;padding:0}
.crumbs li+li::before{content:"›";margin-right:.4rem;color:#a1a1aa}
.crumbs a{color:#52525b}

/* Portada / cabeceras de página */
.hero{padding:3.5rem 0 1.5rem;text-align:center}
.hero-sm{padding:2.5rem 0 1rem}
.hero h1{max-width:48rem;margin:0 auto;color:#09090b;font-weight:800;font-size:clamp(1.9rem,5vw,3rem);line-height:1.15}
.grad{background:linear-gradient(90deg,#09090b,#52525b);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{max-width:40rem;margin:1rem auto 0;color:#09090b;font-size:1.2rem;font-weight:700}
.lead{max-width:40rem;margin:.75rem auto 0;color:#3f3f46;font-size:1.05rem}

/* Búsqueda y filtros */
.buscar{width:100%;max-width:36rem;margin:2rem auto 0;display:block;border:1px solid #d4d4d8;border-radius:1rem;background:#fafafa;color:#09090b;padding:.9rem 1rem;font-size:1rem}
.buscar:focus{outline:none;border-color:#09090b}
.filtros{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1rem}
.chip{border:1px solid #e4e4e7;background:#fafafa;color:#3f3f46;border-radius:999px;padding:.45rem .95rem;font-size:.85rem;font-weight:600;white-space:nowrap}
.chip:hover{border-color:#27272a;color:#09090b}
.chip[aria-pressed="true"]{background:#09090b;border-color:#09090b;color:#ffffff}

/* Secciones */
.seccion{padding:2rem 0}
.h2{color:#09090b;font-size:1.35rem;font-weight:800;margin-bottom:1rem;text-align:center}
.contador{font-size:.875rem;color:#52525b;margin-bottom:1rem;text-align:center}
.vacio{border:1px dashed #d4d4d8;border-radius:1rem;padding:2rem;text-align:center;color:#3f3f46}

/* Tarjetas */
.wrap-ancho{max-width:76rem}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr))}
.card{display:flex;flex-direction:column;gap:.7rem;padding:.9rem;border:1px solid #e4e4e7;border-radius:1rem;background:#fafafa;box-shadow:0 10px 30px -15px rgba(0,0,0,.16);transition:border-color .2s}
.card:hover{border-color:rgba(0,0,0,.45)}
.card[hidden]{display:none}
.card-top{display:flex;align-items:center;gap:.7rem}
.avatar{width:3.5rem;height:3.5rem;flex:none;border-radius:50%;border:2px solid rgba(0,0,0,.25);object-fit:cover;object-position:50% 25%}
.avatar-ico{display:grid;place-items:center;background:#e4e4e7;color:#09090b;font-size:1.5rem}
.min{min-width:0}
.card-title{font-size:1rem;font-weight:700;line-height:1.25}
.card-title a{color:#09090b}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{border:1px solid #d4d4d8;border-radius:.5rem;padding:.1rem .55rem;font-size:.75rem;font-weight:600;color:#09090b}
.desc{font-size:.9rem;color:#3f3f46;line-height:1.6}
.card .desc{font-size:.8rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.demos{display:grid;gap:.4rem}
.card .demo{padding:.35rem .5rem;gap:.5rem}
.card .play,.card .dl{width:1.9rem;height:1.9rem}
.card .d-title{font-size:.78rem}
.card .t{display:none}
.card .tag{font-size:.7rem;padding:.05rem .45rem}
.card .mut{font-size:.78rem}
.mas-wrap{text-align:center;margin-top:1.5rem}
#verMas{display:inline-block;width:auto;padding:.7rem 1.6rem}
.cta{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:auto;padding:.6rem .8rem;border-radius:.75rem;background:#09090b;color:#ffffff;font-weight:800;font-size:.82rem}
.cta:hover{background:#3f3f46;text-decoration:none}

/* Demos / reproductor */
.demo{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border:1px solid rgba(0,0,0,.12);border-radius:.75rem;background:rgba(0,0,0,.03)}
.play,.dl{display:grid;place-items:center;width:2.25rem;height:2.25rem;flex:none;border-radius:.5rem}
.play{background:#09090b;color:#ffffff}
.play:hover{background:#3f3f46}
.dl{border:1px solid #a1a1aa;color:#3f3f46}
.dl:hover{border-color:#09090b;color:#09090b;text-decoration:none}
.d-info{min-width:0;flex:1}
.d-title{font-size:.875rem;font-weight:600;color:#09090b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra{position:relative;margin-top:.45rem;height:5px;border-radius:9px;background:#d4d4d8;cursor:pointer}
.barra::before{content:"";position:absolute;inset:-9px 0}
.prog{height:100%;width:0;border-radius:9px;background:#09090b}
.t{width:4.6rem;flex:none;text-align:right;font:500 .72rem ui-monospace,SFMono-Regular,Menlo,monospace;color:#52525b}

/* Textos */
.texto{max-width:46rem;margin:0 auto;text-align:center}
.texto h2{color:#09090b;font-size:1.3rem;font-weight:800;margin:2rem 0 .6rem}
.texto h2:first-child{margin-top:0}
.texto p{color:#3f3f46;line-height:1.75;margin-bottom:.9rem}
.pasos{display:grid;gap:1.5rem;grid-template-columns:1fr;text-align:center}
@media(min-width:48em){.pasos{grid-template-columns:repeat(3,1fr)}}
.paso b{display:block;color:#09090b;margin:.35rem 0 .2rem}
.paso span{color:#3f3f46;font-size:.9rem}
.num{color:#09090b;font-size:1.6rem;font-weight:800}
.banda{border-top:1px solid #e4e4e7;border-bottom:1px solid #e4e4e7;background:rgba(0,0,0,.03)}
.enlaces{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.enlaces a{border:1px solid #e4e4e7;border-radius:999px;padding:.45rem .9rem;color:#3f3f46;font-size:.875rem;background:#fafafa}
.enlaces a:hover{border-color:#27272a;color:#09090b;text-decoration:none}
.sub-h{color:#52525b;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:1.25rem 0 .6rem;text-align:center}

/* Preguntas frecuentes */
.faq{max-width:46rem;margin:0 auto}
.faq details{border:1px solid #e4e4e7;border-radius:.75rem;background:#fafafa;margin-bottom:.6rem}
.faq summary{cursor:pointer;padding:.9rem 2.2rem;font-weight:700;color:#09090b;list-style:none;text-align:center;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1rem;top:.9rem;color:#09090b}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 1rem 1rem;color:#3f3f46;line-height:1.7;text-align:center}

/* Pie */
.pie{border-top:1px solid #e4e4e7;padding:2.5rem 0 3rem;color:#52525b;font-size:.875rem}
.pie-cols{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));text-align:center}
.pie h2{color:#18181b;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.6rem}
.pie ul{list-style:none;padding:0}
.pie li{margin:.25rem 0}
.pie a{color:#52525b}
.pie a:hover{color:#09090b}
.pie-garantia{max-width:44rem;margin:2rem auto 0;text-align:center;font-size:.75rem;line-height:1.7}
.pie-garantia strong{color:#3f3f46}
.pie-garantia a{color:#09090b;text-decoration:underline}
.pie-legal{margin-top:1.5rem;text-align:center;font-size:.75rem;color:#71717a}

/* Ficha del locutor */
.ficha-wrap{max-width:34rem;margin:0 auto;padding:1.5rem 1rem 2.5rem}
.ficha{display:grid;gap:1.5rem;padding:1.5rem;border:1px solid #e4e4e7;border-radius:1.5rem;background:#fafafa;box-shadow:0 25px 50px -20px rgba(0,0,0,.16)}
.ficha-top{text-align:center}
.ficha-top .avatar{width:5.5rem;height:5.5rem;margin:0 auto}
.ficha-top h1{margin-top:.75rem;color:#09090b;font-size:1.5rem;font-weight:800}
.ficha-top p{margin-top:.25rem;color:#52525b;font-size:.9rem}
.ficha-top .desc{margin-top:.75rem}
.pago{border-top:1px solid #e4e4e7;padding-top:1.5rem;text-align:center;display:grid;gap:1rem}
.precio{color:#09090b;font-size:2rem;font-weight:800}
.precio small{color:#52525b;font-size:.85rem;font-weight:500}
.pago-txt{max-width:22rem;margin:0 auto;color:#3f3f46;font-size:.9rem}
#paypal-btn{max-width:20rem;width:100%;margin:0 auto;min-height:46px}
.aviso{border:1px solid rgba(239,68,68,.3);background:rgba(239,68,68,.08);border-radius:.75rem;padding:.75rem;color:#b91c1c;font-size:.875rem}
.aviso[hidden]{display:none}
.oculto{display:none!important}
.fine{color:#52525b;font-size:.75rem;line-height:1.6}
.ok{display:flex;align-items:center;justify-content:center;gap:.5rem;color:#15803d;font-weight:700;font-size:.9rem}
.datos{display:grid;gap:.75rem;text-align:left;border:1px solid #d4d4d8;border-radius:1rem;background:rgba(0,0,0,.04);padding:1rem}
.datos small{display:block;color:#71717a;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.datos .v{display:flex;align-items:center;gap:.5rem;justify-content:space-between}
.datos a,.datos .n{color:#09090b;font-weight:700;font-size:1rem;word-break:break-all}
.datos .n{color:#09090b}
.datos .wa{color:#15803d}
.copiar{flex:none;border:1px solid #d4d4d8;border-radius:.5rem;padding:.25rem .6rem;font-size:.75rem;font-weight:700;color:#3f3f46}
.copiar:hover{border-color:#09090b;color:#09090b}
.garantia{display:flex;gap:.75rem;margin-top:1rem;border:1px solid rgba(0,0,0,.2);border-radius:1rem;background:#fafafa;padding:1rem;font-size:.85rem;color:#3f3f46;line-height:1.65}
.garantia .ic{color:#09090b;margin-top:.2rem}
.garantia strong{color:#09090b}
.garantia a{color:#09090b;text-decoration:underline}

/* Páginas legales */
.legal{max-width:46rem;margin:0 auto;padding:2.5rem 1rem 3rem}
.legal h1{color:#09090b;font-size:1.9rem;font-weight:800}
.legal h2{color:#09090b;font-size:1.15rem;font-weight:800;margin-top:2rem}
.legal p,.legal li{color:#3f3f46;line-height:1.7;margin-top:.5rem}
.legal ul{padding-left:1.3rem}
.legal strong{color:#09090b}

/* Ventana de contacto */
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:1rem;background:rgba(0,0,0,.55)}
.modal.on{display:flex}
.modal-box{width:100%;max-width:24rem;display:grid;gap:1rem;text-align:center;padding:1.5rem;border:1px solid #d4d4d8;border-radius:1.5rem;background:#fafafa}
.modal-top{display:flex;align-items:flex-start;justify-content:space-between}
.modal-top h2{color:#09090b;font-size:1.1rem;font-weight:800}
.modal-mail{border:1px solid #d4d4d8;border-radius:.75rem;background:#ffffff;padding:.75rem;color:#09090b;font:600 .9rem ui-monospace,monospace;word-break:break-all}
.btn{display:block;width:100%;border-radius:.75rem;padding:.8rem 1rem;background:#09090b;color:#ffffff;font-weight:800;font-size:.9rem;text-align:center}
.btn:hover{background:#3f3f46;text-decoration:none}
.btn-o{background:none;border:1px solid #a1a1aa;color:#18181b;font-size:.8rem;font-weight:700;padding:.65rem}
.btn-o:hover{border-color:#09090b;color:#09090b}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- Listado compacto de voces (estilo Banco de Voces) ---------- */
.barra-herr{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:center;margin:0 0 .9rem}
.dd{position:relative}
.dd-b{display:flex;align-items:center;gap:.6rem;min-width:13rem;background:#fafafa;border:1px solid #d4d4d8;border-radius:.75rem;padding:.5rem .9rem;color:#09090b;font-weight:600}
.dd-b::after{content:"";margin-left:auto;width:.45rem;height:.45rem;border-right:2px solid #52525b;border-bottom:2px solid #52525b;transform:rotate(45deg) translateY(-2px)}
.dd-l{position:absolute;z-index:20;left:0;top:calc(100% + .4rem);width:min(20rem,calc(100vw - 2rem));display:grid;gap:2px;background:#fafafa;border:1px solid #d4d4d8;border-radius:.9rem;padding:.4rem;box-shadow:0 20px 40px rgba(0,0,0,.18)}
.dd-l[hidden]{display:none}
.dd-o{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;padding:.5rem .7rem;border-radius:.6rem;color:#18181b}
.dd-o:hover,.dd-o.on{background:#e4e4e7}
.dd-o .n{margin-left:auto;color:#52525b;font-size:.8rem}
.flag{flex:none;width:22px;height:22px;border-radius:50%;overflow:hidden;border:1px solid #d4d4d8;display:inline-block}
.flag svg{width:100%;height:100%;display:block}
.seg{display:flex;background:#fafafa;border-radius:99px;padding:3px}
.seg button{padding:.4rem .9rem;border-radius:99px;color:#52525b;font-size:.85rem;font-weight:600}
.seg button.on{background:#09090b;color:#ffffff;font-weight:800}
.q{flex:1;min-width:11rem;max-width:20rem;background:#fafafa;border:1px solid #d4d4d8;border-radius:99px;padding:.5rem 1rem;color:#09090b;font-size:.9rem}
.q:focus{outline:none;border-color:#09090b}
.favb{border:1px solid #d4d4d8;background:#fafafa;border-radius:99px;padding:.5rem .9rem;color:#18181b;font-size:.85rem;font-weight:600}
.favb.on{background:#09090b;border-color:#09090b;color:#ffffff}

.lista{display:grid;gap:.7rem;grid-template-columns:1fr}
@media(min-width:44em){.lista{grid-template-columns:repeat(2,1fr)}}
@media(min-width:68em){.lista{grid-template-columns:repeat(3,1fr)}}
.fila{border:1px solid #e4e4e7;border-radius:.8rem;background:#fafafa;padding:.55rem .7rem}
.fila.on{border-color:#09090b}
.fila[hidden]{display:none}
.f-top{display:flex;align-items:center;gap:.5rem}
.pl{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;background:#09090b;color:#ffffff;display:grid;place-items:center}
.pl:hover{background:#3f3f46}
.pl:disabled{opacity:.4;cursor:default}
.nm{flex:1;min-width:0}
.nm a{display:block;color:#09090b;font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nm a:hover{color:#09090b;text-decoration:none}
.nm span{display:block;font-size:.74rem;color:#52525b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{flex:none;width:1.9rem;height:1.9rem;display:grid;place-items:center;border-radius:.5rem;color:#52525b}
.ib:hover{background:#e4e4e7;color:#09090b;text-decoration:none}
.ib.f{color:#ca8a04}
.ib.f .ic{fill:currentColor}
.f-bot{display:flex;align-items:center;gap:.55rem;margin-top:.3rem}
.f-bot input[type=range]{flex:1;min-width:0;-webkit-appearance:none;appearance:none;background:transparent;height:14px;margin:0;cursor:pointer}
.f-bot input:disabled{cursor:default;opacity:.45}
.f-bot input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,#09090b var(--p,0%),#d4d4d8 var(--p,0%))}
.f-bot input::-moz-range-track{height:3px;border-radius:2px;background:#d4d4d8}
.f-bot input::-moz-range-progress{height:3px;border-radius:2px;background:#09090b}
.f-bot input::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;border:0;background:#09090b;margin-top:-3.5px}
.f-bot input::-moz-range-thumb{width:10px;height:10px;border-radius:50%;border:0;background:#09090b}
.f-bot .t{flex:none;min-width:4.2rem;text-align:right;font:500 .68rem ui-monospace,SFMono-Regular,Menlo,monospace;color:#52525b}
.ver{flex:none;background:#09090b;color:#ffffff;font-weight:800;font-size:.74rem;padding:.3rem .65rem;border-radius:.55rem;white-space:nowrap}
.ver:hover{background:#3f3f46;text-decoration:none}
.dms{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}
.dm{font-size:.7rem;border:1px solid #d4d4d8;border-radius:99px;padding:.1rem .6rem;color:#52525b}
.dm.on{border-color:#09090b;color:#09090b}

.sel{background:#fafafa;border:1px solid #d4d4d8;border-radius:99px;padding:.5rem .9rem;color:#18181b;font-size:.85rem;font-weight:600}
.orden{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#18181b}

/* ---- Ajustes del tema blanco y negro ---- */
.seg{border:1px solid #d4d4d8}
.legal a,.garantia a,.pie-garantia a,.fine a,.texto a,.faq a{text-decoration:underline}
.ib.f{color:#ca8a04}
.fila.on{background:#ffffff;box-shadow:0 0 0 1px #09090b}