/* quemicrofonocomprar.com — sistema de diseño v1 (origen: bocetos 18-ago-2026)
   Tokens con semántica de audio: verde señal = bueno · rojo clip = malo · ámbar = a medias */
:root{
  --papel:#FCFBF8;
  --tinta:#1A1D21;
  --tinta-suave:#565D66;
  --linea:#E4E1D8;
  --senal:#0E7C4A;
  --senal-fondo:#EDF6F0;
  --clip:#C43D2E;
  --clip-fondo:#FBEFED;
  --aviso:#B45309;
  --crema:#F5F2EA;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--papel);color:var(--tinta);
  font-family:'Newsreader',Georgia,serif;
  font-size:1.175rem;line-height:1.68;
}
a{color:var(--senal);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--senal);outline-offset:3px;border-radius:2px}

/* ---------- header / footer del sitio ---------- */
.site-header{
  border-bottom:1px solid var(--linea);padding:1rem 1.5rem;
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:'Bricolage Grotesque',sans-serif;
}
.logo{font-weight:800;font-size:1.15rem;letter-spacing:-0.02em;color:var(--tinta);text-decoration:none}
.logo .tld{color:var(--tinta-suave);font-weight:400}
.site-nav a{font-size:.9rem;font-weight:600;color:var(--tinta);text-decoration:none;margin-left:1.4rem}
.site-nav a:hover{color:var(--senal)}
.site-footer{
  border-top:1px solid var(--linea);margin-top:3rem;padding:2.5rem 1.5rem;
  font-family:'Bricolage Grotesque',sans-serif;font-size:.9rem;color:var(--tinta-suave);
}
.site-footer .inner{max-width:46rem;margin:0 auto}
.site-footer p{margin-bottom:1rem;line-height:1.6}
.site-footer nav a{color:var(--tinta-suave);margin-right:1.2rem}

/* ---------- artículo base ---------- */
.articulo{max-width:46rem;margin:0 auto;padding:3.5rem 1.5rem 2rem}
.miga{
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-suave);margin-bottom:1.4rem;
}
.miga a{color:var(--tinta-suave)}
h1{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(2rem,5.5vw,2.9rem);line-height:1.08;letter-spacing:-0.025em;
  margin-bottom:1.1rem;
}
h1 .sinhumo{color:var(--senal)}
h2{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:1.6rem;letter-spacing:-0.02em;line-height:1.15;margin:3rem 0 1rem;
}
h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:1.15rem;margin:2rem 0 .7rem}
p{margin-bottom:1.2rem}
em{font-style:italic}

/* autor */
.autor-chip{
  display:flex;align-items:center;gap:.75rem;margin:1.6rem 0 2.4rem;
  padding-bottom:1.6rem;border-bottom:1px solid var(--linea);
}
.autor-chip .avatar{
  width:44px;height:44px;border-radius:50%;background:var(--crema);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;border:1px solid var(--linea);
}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.autor-chip .meta{font-family:'Bricolage Grotesque',sans-serif;font-size:.88rem;line-height:1.35}
.autor-chip .meta strong{font-weight:600}
.autor-chip .meta span{color:var(--tinta-suave)}
.caja-autor{
  display:flex;gap:1.2rem;background:var(--crema);border-radius:10px;
  padding:1.5rem 1.6rem;margin:2.5rem 0;
}
.caja-autor .avatar{
  flex-shrink:0;width:64px;height:64px;border-radius:50%;background:#fff;overflow:hidden;
  border:1px solid var(--linea);display:flex;align-items:center;justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.3rem;
}
.caja-autor p{font-size:1rem;margin-bottom:.4rem}
.caja-autor .nombre{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:1.05rem}

/* portada e imágenes */
.portada{margin:0 0 2.5rem}
.portada img{width:100%;border-radius:12px;display:block}
.portada figcaption{
  font-family:'Bricolage Grotesque',sans-serif;font-size:.8rem;
  color:var(--tinta-suave);margin-top:.5rem;
}

/* bloques editoriales */
.en-corto{background:var(--crema);border-radius:10px;padding:1.4rem 1.6rem;margin:0 0 2.5rem}
.en-corto .etiqueta{
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-suave);display:block;margin-bottom:.6rem;
}
.en-corto p{font-size:1.05rem;margin-bottom:.6rem}
.en-corto p:last-child{margin-bottom:0}
.clip-aviso{
  border-left:3px solid var(--clip);background:var(--clip-fondo);
  border-radius:0 8px 8px 0;padding:1.1rem 1.3rem;margin:1.8rem 0;
}
.clip-aviso .etiqueta{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--clip);display:block;margin-bottom:.4rem;
}
.clip-aviso p{font-size:1.02rem;margin-bottom:0}
.sigue{border:1px solid var(--linea);border-radius:10px;padding:1.4rem 1.6rem;margin:3rem 0 2rem}
.sigue .etiqueta{
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-suave);display:block;margin-bottom:.8rem;
}
.sigue ul{list-style:none}
.sigue li{margin-bottom:.55rem;font-family:'Bricolage Grotesque',sans-serif;font-size:.98rem}
.sigue li::before{content:"→ ";color:var(--senal)}

/* tablas */
.tabla-wrap{overflow-x:auto;margin:1.6rem 0 2.2rem}
table{border-collapse:collapse;width:100%;font-size:.98rem}
th{
  font-family:'IBM Plex Mono',monospace;font-size:.73rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-suave);text-align:left;
  padding:.6rem .8rem;border-bottom:2px solid var(--tinta);
}
td{padding:.7rem .8rem;border-bottom:1px solid var(--linea);vertical-align:top}
td:first-child{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.93rem}
td.num{font-family:'IBM Plex Mono',monospace;font-size:.88rem;white-space:nowrap}
.pat-tag{
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;background:var(--senal-fondo);
  color:var(--senal);padding:.15rem .5rem;border-radius:4px;white-space:nowrap;
}

/* señal / clip (pros-contras) */
.senal-clip{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.2rem 0}
.senal-clip .col{border-radius:8px;padding:1rem 1.2rem;font-family:'Bricolage Grotesque',sans-serif;font-size:.95rem}
.senal-clip .senal{background:var(--senal-fondo)}
.senal-clip .clip{background:var(--clip-fondo)}
.senal-clip .etiqueta{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;display:block;margin-bottom:.5rem;
}
.senal-clip .senal .etiqueta{color:var(--senal)}
.senal-clip .clip .etiqueta{color:var(--clip)}
.senal-clip ul{list-style:none}
.senal-clip li{margin-bottom:.4rem;line-height:1.45}
.senal-clip .senal li::before{content:"● ";color:var(--senal);font-size:.7em;vertical-align:.15em}
.senal-clip .clip li::before{content:"● ";color:var(--clip);font-size:.7em;vertical-align:.15em}

/* fichas de producto (guías) */
.mic{
  border:1px solid var(--linea);border-radius:12px;background:#fff;
  padding:1.7rem 1.7rem 1.5rem;margin:2rem 0;
}
.mic-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.mic h3{margin:0;font-size:1.35rem;letter-spacing:-0.015em}
.mic .rol{
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--senal);background:var(--senal-fondo);
  padding:.25rem .6rem;border-radius:4px;white-space:nowrap;
}
.mic .specs{
  font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:var(--tinta-suave);
  margin:.8rem 0 1.1rem;line-height:1.9;
}
.mic .specs b{color:var(--tinta);font-weight:500}
.mic p{font-size:1.08rem}
.mic-links{
  display:flex;gap:1rem 1.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  border-top:1px solid var(--linea);padding-top:1.1rem;margin-top:.4rem;
  font-family:'Bricolage Grotesque',sans-serif;font-size:.98rem;
}
.mic-links .review{font-weight:600}
.btn-amazon.mini{font-size:.9rem;padding:.5rem 1.05rem}
.mic-body{display:flex;gap:1.4rem;align-items:flex-start;margin-top:.8rem}
.mic-img{flex:0 0 140px;border:1px solid var(--linea);border-radius:8px;background:#fff;padding:.6rem}
.mic-img img{width:100%;height:160px;object-fit:contain;display:block}
.mic-txt{flex:1;min-width:0}

/* asistente interactivo (guías) */
.asistente{
  border:1.5px solid var(--tinta);border-radius:12px;background:#fff;
  padding:1.6rem 1.7rem;margin:2.5rem 0;
}
.asistente .etiqueta{
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--senal);display:block;margin-bottom:.4rem;
}
.asistente .titulo{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:1.35rem;letter-spacing:-.02em;margin-bottom:1.1rem;
}
.asistente .pregunta{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;
  font-size:1.05rem;margin-bottom:.8rem;
}
.asistente .opciones{display:flex;flex-wrap:wrap;gap:.6rem}
.asistente .opciones button{
  font-family:'Bricolage Grotesque',sans-serif;font-size:.95rem;font-weight:600;
  padding:.55rem 1rem;border:1.5px solid var(--linea);border-radius:8px;
  background:var(--papel);color:var(--tinta);cursor:pointer;
}
.asistente .opciones button:hover{border-color:var(--senal);color:var(--senal)}
.asistente .opciones button:focus-visible{outline:2px solid var(--senal);outline-offset:2px}
.asistente .resultado{
  display:none;background:var(--senal-fondo);border-radius:8px;
  padding:1.1rem 1.3rem;font-family:'Bricolage Grotesque',sans-serif;
  font-size:1rem;line-height:1.55;
}
.asistente .resultado.visible{display:block}
.asistente .reiniciar{
  background:none;border:none;color:var(--tinta-suave);font-size:.85rem;
  font-family:'Bricolage Grotesque',sans-serif;text-decoration:underline;
  cursor:pointer;margin-top:.8rem;padding:0;
}
.asistente .paso-info{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;
  color:var(--tinta-suave);margin-top:.9rem;
}

/* veredicto + vúmetro (reviews) */
.veredicto{
  border:1.5px solid var(--tinta);border-radius:12px;background:#fff;
  padding:1.6rem 1.7rem;margin:0 0 2.5rem;
}
.veredicto .etiqueta{
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--senal);display:block;margin-bottom:1rem;
}
.veredicto-grid{display:flex;gap:1.8rem;align-items:flex-start}
.vu{flex:0 0 220px;text-align:center}
.vu svg{width:100%;height:auto;display:block}
.vu .num{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:2.6rem;letter-spacing:-0.03em;line-height:1;margin-top:.1rem;
}
.vu .num small{font-size:1.1rem;font-weight:600;color:var(--tinta-suave)}
.vu .sub{
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-suave);margin-top:.2rem;
}
.veredicto-txt{flex:1}
.veredicto-txt p{font-size:1.05rem;margin-bottom:.9rem}
.subnotas{
  font-family:'IBM Plex Mono',monospace;font-size:.8rem;color:var(--tinta-suave);
  line-height:2;border-top:1px solid var(--linea);padding-top:.8rem;margin-top:.2rem;
}
.subnotas b{color:var(--tinta);font-weight:500}
.veredicto .compra{
  display:flex;gap:1.5rem;align-items:baseline;flex-wrap:wrap;
  border-top:1px solid var(--linea);padding-top:1rem;margin-top:1.2rem;
  font-family:'Bricolage Grotesque',sans-serif;font-size:.98rem;
}
.veredicto .compra .precio{color:var(--tinta-suave)}
.veredicto .compra .precio a{color:var(--tinta-suave)}
@media (prefers-reduced-motion:no-preference){
  #aguja{transition:transform 1.4s cubic-bezier(.2,.8,.3,1)}
}

/* reproductores de clips (reviews) */
.players{border:1px solid var(--linea);border-radius:10px;overflow:hidden;margin:1.6rem 0 .5rem}
.player{
  display:flex;align-items:center;gap:1rem;padding:.9rem 1.2rem;
  border-bottom:1px solid var(--linea);background:#fff;
}
.player:last-child{border-bottom:none}
.player .play{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  background:var(--senal);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
}
.player .play:focus-visible{outline:2px solid var(--senal);outline-offset:2px}
.player .info{flex:1;font-family:'Bricolage Grotesque',sans-serif}
.player .info .t{font-weight:600;font-size:.98rem}
.player .info .d{font-size:.85rem;color:var(--tinta-suave)}
.player .onda{flex:0 0 180px;height:26px;display:flex;align-items:center;gap:2px}
.player .onda i{flex:1;background:var(--linea);border-radius:2px}
.player .dur{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--tinta-suave)}
.nota-maqueta{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--tinta-suave);margin-bottom:2rem}

/* diagramas de patrón polar (conceptos) */
.patrones{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1rem;margin:1.8rem 0 .6rem;
}
.patron{border:1px solid var(--linea);border-radius:10px;padding:1rem .8rem .9rem;text-align:center;background:#fff}
.patron svg{width:100%;height:auto;display:block}
.patron .nombre{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.95rem;margin-top:.5rem}
.patron .uso{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--tinta-suave);margin-top:.25rem;letter-spacing:.02em}
.pie-figura{font-family:'Bricolage Grotesque',sans-serif;font-size:.85rem;color:var(--tinta-suave);margin-bottom:2rem}
@media (prefers-reduced-motion:no-preference){
  .patron svg polyline{transition:stroke-width .2s}
  .patron:hover svg polyline{stroke-width:3.5}
}

/* demo interactiva (conceptos) */
.demo-linterna{
  border:1.5px solid var(--tinta);border-radius:12px;background:#fff;
  padding:1.4rem 1.5rem 1.1rem;margin:2rem 0 2.4rem;
}
.demo-linterna .etiqueta{
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--senal);display:block;margin-bottom:.4rem;
}
.demo-linterna .titulo-demo{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:1.3rem;letter-spacing:-.02em;margin-bottom:.4rem;
}
.demo-linterna .sub-demo{
  font-family:'Bricolage Grotesque',sans-serif;font-size:.95rem;
  color:var(--tinta-suave);margin-bottom:1rem;
}
.demo-linterna .controles{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.demo-linterna .controles button{
  font-family:'Bricolage Grotesque',sans-serif;font-size:.9rem;font-weight:600;
  padding:.45rem .9rem;border:1.5px solid var(--linea);border-radius:8px;
  background:var(--papel);color:var(--tinta);cursor:pointer;
}
.demo-linterna .controles button:hover{border-color:var(--senal);color:var(--senal)}
.demo-linterna .controles button.activo{border-color:var(--senal);background:var(--senal);color:#fff}
.demo-linterna .controles button:focus-visible{outline:2px solid var(--senal);outline-offset:2px}
.demo-linterna svg{width:100%;height:auto;display:block}
.demo-linterna .lectura{
  font-family:'Bricolage Grotesque',sans-serif;font-size:.95rem;
  background:var(--crema);border-radius:8px;padding:.8rem 1rem;
  margin-top:1rem;line-height:1.5;
}
.demo-linterna .leyenda{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--tinta-suave);
  margin-top:.7rem;display:flex;gap:1.2rem;flex-wrap:wrap;
}
.demo-linterna .leyenda i{font-style:normal}

/* responsive */
@media (max-width:640px){
  .site-nav{display:none}
  body{font-size:1.08rem}
  .senal-clip{grid-template-columns:1fr}
  .mic-body{flex-direction:column}
  .mic-img{flex-basis:auto;width:140px;margin:0 auto}
  .veredicto-grid{flex-direction:column;align-items:center}
  .player .onda{display:none}
}

/* embeds ligeros de YouTube (facade: nada carga hasta el clic) */
.yt-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.6rem 0 .6rem}
.yt-lite{position:relative;cursor:pointer;border-radius:10px;overflow:hidden;border:1px solid var(--linea);background:#000;aspect-ratio:16/9}
.yt-lite img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.yt-lite:hover img{opacity:1}
.yt-lite .play-yt{position:absolute;inset:0;margin:auto;width:58px;height:42px;background:var(--senal);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;pointer-events:none}
.yt-lite iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-lite .tag-test{position:absolute;left:.6rem;bottom:.6rem;font-family:'IBM Plex Mono',monospace;font-size:.68rem;background:rgba(26,29,33,.85);color:#fff;padding:.25rem .5rem;border-radius:4px}
.yt-lite:focus-visible{outline:2px solid var(--senal);outline-offset:3px}
.yt-pie{font-family:'Bricolage Grotesque',sans-serif;font-size:.85rem;color:var(--tinta-suave);margin-bottom:2rem}
@media (max-width:640px){.yt-grid{grid-template-columns:1fr}}

/* imagen de producto en banner (ancha, poca altura) e imágenes inline */
.portada-banner{margin:0 0 2.2rem}
.portada-banner .marco{background:#fff;border:1px solid var(--linea);border-radius:12px}
.portada-banner img{width:100%;max-height:230px;object-fit:contain;display:block;padding:1rem}
.portada-banner figcaption{font-family:'Bricolage Grotesque',sans-serif;font-size:.8rem;color:var(--tinta-suave);margin-top:.5rem}
.img-inline{margin:1.6rem auto 2rem;text-align:center}
.img-inline img{max-width:360px;width:100%;background:#fff;border:1px solid var(--linea);border-radius:10px;padding:1rem}
.img-inline figcaption{font-family:'Bricolage Grotesque',sans-serif;font-size:.8rem;color:var(--tinta-suave);margin-top:.5rem}
.btn-amazon{
  display:inline-block;background:var(--senal);color:#fff;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.98rem;
  padding:.65rem 1.3rem;border-radius:8px;text-decoration:none;
}
.btn-amazon:hover{background:#0B6A3F;text-decoration:none}
.btn-amazon:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}

/* slider de specs (demo de rango) */
.rango-demo{border:1.5px solid var(--tinta);border-radius:12px;background:#fff;padding:1.4rem 1.5rem 1.1rem;margin:1.8rem 0}
.rango-demo .etiqueta{font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--senal);display:block;margin-bottom:.4rem}
.rango-demo .titulo-demo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.2rem;letter-spacing:-.02em;margin-bottom:.6rem}
.rango-demo input[type=range]{width:100%;accent-color:var(--senal);margin:.6rem 0 .3rem;cursor:pointer}
.rango-demo .distancia{font-family:'IBM Plex Mono',monospace;font-size:.95rem;margin-bottom:.5rem}
.rango-demo .lectura{font-family:'Bricolage Grotesque',sans-serif;background:var(--crema);border-radius:8px;padding:.7rem 1rem;font-size:.95rem;line-height:1.5}