/* Blog de АМПЛИТУДА — mismo lenguaje visual que la web principal.
   Adaptado del blog de KORE: cambia el acento (ambar en vez de lima) y la
   tipografia de titulares (Manrope, que si tiene cirilico). */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#111111;color:#FAFAFA;
     font-family:Inter,system-ui,-apple-system,sans-serif;
     -webkit-font-smoothing:antialiased;line-height:1.7;overflow-x:hidden}
::selection{background:#FFA62B;color:#111}
a{color:#FFA62B;text-decoration:none}
img{max-width:100%;display:block}

.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.narrow{max-width:760px}

/* ---------- cabecera ---------- */
header.top{border-bottom:1px solid #1e1e1e;position:sticky;top:0;z-index:20;
           background:rgba(17,17,17,.93);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.top .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.logo{display:flex;align-items:center;gap:10px;color:#FAFAFA;
      font-family:'Manrope',sans-serif;font-weight:800;font-size:20px;letter-spacing:.01em}
.logo i{width:12px;height:12px;background:#FFA62B;border-radius:3px;display:inline-block}
.top nav{display:flex;align-items:center;gap:22px}
.top nav a{color:#d0d0d0;font-size:15px;font-weight:500}
.top nav a:hover,.top nav a.on{color:#FFA62B}
@media(max-width:720px){.top nav a.oculta{display:none}}

/* ---------- portada del blog ---------- */
.hero{padding:70px 0 44px;border-bottom:1px solid #1a1a1a}
.eyebrow{color:#FFA62B;font:600 13px/1 ui-monospace,monospace;letter-spacing:.16em;
         text-transform:uppercase;margin:0 0 18px}
h1{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(36px,7vw,68px);line-height:1.04;
   letter-spacing:-.03em;margin:0 0 18px}
.hero p{color:#9a9a9a;font-size:clamp(16px,2.2vw,19px);max-width:620px;margin:0}

/* ---------- tarjetas ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
      gap:28px;padding:52px 0 20px}
.card{background:#161616;border:1px solid #232323;border-radius:18px;overflow:hidden;
      display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.card:hover{border-color:#FFA62B;transform:translateY(-3px)}
.card .foto{aspect-ratio:16/10;overflow:hidden;background:#1c1c1c}
.card .foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25);transition:filter .25s}
.card:hover .foto img{filter:none}
.card .cuerpo{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.tag{align-self:flex-start;background:rgba(255,166,43,.13);color:#FFA62B;
     font:600 11px ui-monospace,monospace;letter-spacing:.06em;
     padding:5px 11px;border-radius:20px;text-transform:uppercase}
.card h2{font-family:'Manrope',sans-serif;font-weight:700;font-size:21px;line-height:1.28;
         margin:0;color:#FAFAFA;letter-spacing:-.01em}
.card p{color:#9a9a9a;font-size:15px;margin:0;flex:1}
.meta{color:#666;font:500 13px/1 ui-monospace,monospace;margin-top:4px}

/* ---------- articulo ---------- */
article{padding:52px 0 20px}
.volver{display:block;color:#888;font-size:14px;font-weight:500;margin-bottom:22px}
.volver:hover{color:#FFA62B}
article .tag{display:inline-block;margin-bottom:14px}
article h1{font-size:clamp(30px,5.2vw,48px);margin-bottom:16px}
.firma{display:flex;align-items:center;gap:12px;margin:0 0 32px;padding-bottom:26px;
       border-bottom:1px solid #1e1e1e}
.firma img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.firma div{line-height:1.4}
.firma b{display:block;font-size:14.5px;color:#FAFAFA}
.firma span{color:#666;font:500 12.5px ui-monospace,monospace}
.portada{border-radius:16px;overflow:hidden;margin:0 0 38px;aspect-ratio:16/9}
.portada img{width:100%;height:100%;object-fit:cover}
article h2{font-family:'Manrope',sans-serif;font-weight:700;font-size:clamp(22px,3.2vw,28px);
           margin:46px 0 14px;letter-spacing:-.01em}
article h3{font-size:18.5px;margin:32px 0 8px}
article p,article li{color:#C4C4C4;font-size:17px}
article ul,article ol{padding-left:22px}
article li{margin:9px 0}
article strong{color:#FAFAFA}
blockquote{margin:34px 0;padding:20px 24px;border-left:3px solid #FFA62B;
           background:#161616;border-radius:0 12px 12px 0}
blockquote p{margin:0;color:#E4E4E4;font-size:18px;font-style:italic}

.cta{margin:56px 0 20px;padding:32px;background:#161616;border:1px solid #232323;
     border-radius:18px;text-align:center}
.cta h3{font-family:'Manrope',sans-serif;font-weight:700;font-size:23px;margin:0 0 8px;color:#FAFAFA}
.cta p{color:#9a9a9a;margin:0 0 20px;font-size:15.5px}
.cta a{display:inline-block;background:#FFA62B;color:#111;padding:14px 26px;
       border-radius:12px;font-weight:700;font-size:15.5px}

.otros{border-top:1px solid #1e1e1e;margin-top:56px;padding-top:34px}
.otros h3{font-family:'Manrope',sans-serif;font-weight:700;font-size:20px;margin:0 0 20px}

/* ---------- pie ---------- */
footer.pie{border-top:1px solid #1e1e1e;margin-top:70px;padding:34px 0 60px;
           color:#666;font-size:13.5px}
footer.pie a{color:#888;margin-right:16px}
footer.pie a:hover{color:#FFA62B}
.demo{background:rgba(255,166,43,.06);border:1px solid rgba(255,166,43,.28);
      border-radius:12px;padding:14px 18px;margin:0 0 34px}
.demo p{margin:0;color:#B8B8B8;font-size:13.5px}
.demo b{color:#FFA62B}
/* los enlaces del pie llevan margen a la derecha; dentro del aviso de demo
   ese margen dejaba un hueco antes del punto final */
.demo a{margin-right:0}