/* Blog de HoopyTech — misma identidad que la landing: tinta sobre papel,
   General Sans, filetes de 1px, cero color. */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --ink: #0a0a0a; --paper: #fafafa; --white: #fff;
  --gray-400: #a3a3a3; --gray-500: #737373; --gray-600: #525252;
  --border: #e5e5e5; --radius: 1.25rem; --radius-sm: .875rem;
  --font: "General Sans", -apple-system, system-ui, sans-serif;
}
html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; }
body { font-family: var(--font); line-height: 1.7; -webkit-font-smoothing: antialiased; letter-spacing: -.005em; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; }

.nav { position: sticky; top: 0; z-index: 10; background: rgba(250,250,250,.9); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); padding: .9rem 0; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 760px; }
.nav-logo img { height: 26px; width: auto; }
.nav-links { display: flex; gap: 1.4rem; list-style: none; font-size: .88rem; font-weight: 500; }
.nav-links a { color: var(--gray-600); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }

.indice, .articulo { padding: 3.5rem 0 4.5rem; }
h1 { font-size: clamp(2rem, 5.5vw, 3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; margin-bottom: 1rem; }
.entradilla { font-size: 1.12rem; color: var(--gray-600); margin-bottom: 1.6rem; }
.migas { font-size: .82rem; color: var(--gray-500); margin-bottom: 1.2rem; }
.meta { font-size: .84rem; color: var(--gray-500); display: block; }

.pilares { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.pilares a { font-size: .84rem; border: 1px solid var(--border); background: var(--white); border-radius: 100px; padding: .35rem .9rem; text-decoration: none; color: var(--gray-600); }
.pilares a:hover, .pilares a.activo { border-color: var(--ink); color: var(--ink); }

.lista { display: flex; flex-direction: column; gap: 1rem; }
.tarjeta { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .25s, transform .25s; }
.tarjeta:hover { border-color: var(--ink); transform: translateY(-2px); }
.tarjeta a { display: block; padding: 1.6rem 1.7rem; text-decoration: none; }
.tarjeta h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .5rem; }
.tarjeta p { font-size: .95rem; color: var(--gray-600); margin-bottom: .8rem; }
.vacio { color: var(--gray-500); border: 1px dashed var(--gray-400); border-radius: var(--radius-sm); padding: 2rem; text-align: center; }

figure.portada { margin: 2rem 0; }
figure.portada img { border-radius: var(--radius); border: 1px solid var(--border); }
figcaption.ia { font-size: .78rem; color: var(--gray-500); margin-top: .5rem; border-left: 2px solid var(--ink); padding-left: .7rem; }

.cuerpo { margin-top: 2rem; }
.cuerpo h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; margin: 2.4rem 0 .8rem; }
.cuerpo h3 { font-size: 1.18rem; font-weight: 600; margin: 1.8rem 0 .6rem; }
.cuerpo p { margin-bottom: 1.1rem; }
.cuerpo ul, .cuerpo ol { margin: 0 0 1.1rem 1.4rem; }
.cuerpo li { margin-bottom: .4rem; }
.cuerpo blockquote { border-left: 2px solid var(--ink); padding-left: 1.1rem; color: var(--gray-600); margin: 1.4rem 0; }
.cuerpo code { background: var(--white); border: 1px solid var(--border); border-radius: 4px; padding: .1rem .35rem; font-size: .9em; }
.cuerpo pre { background: var(--ink); color: var(--white); border-radius: var(--radius-sm); padding: 1.1rem; overflow-x: auto; margin-bottom: 1.1rem; }
.cuerpo pre code { background: none; border: none; color: inherit; }
.cuerpo img { border-radius: var(--radius-sm); border: 1px solid var(--border); margin: 1.4rem 0; }
.cuerpo a { text-decoration: underline; text-underline-offset: 3px; }

.etiquetas { margin-top: 2.5rem; font-size: .86rem; color: var(--gray-500); }
.etiquetas a { text-decoration: none; margin-right: .6rem; }
.etiquetas a:hover { color: var(--ink); }
.tambien { margin-top: 1.2rem; font-size: .9rem; color: var(--gray-600); }

footer { background: var(--ink); color: var(--white); padding: 3rem 0 2.2rem; }
footer img { height: 26px; width: auto; margin-bottom: 1.4rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.2rem; list-style: none; font-size: .84rem; margin-bottom: 1.4rem; }
.footer-links a { color: var(--gray-400); text-decoration: none; }
.footer-links a:hover { color: var(--white); }
footer span { font-size: .8rem; color: var(--gray-500); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } html { scroll-behavior: auto; } }