/* ─── BEAI · BLOG · estilos compartidos ─── */
@font-face { font-family:'PP Neue Montreal'; src:url('../PPNeueMontreal-Book.woff2') format('woff2'), url('../PPNeueMontreal-Book.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../PPNeueMontreal-Italic.woff2') format('woff2'), url('../PPNeueMontreal-Italic.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../PPNeueMontreal-Medium.woff2') format('woff2'), url('../PPNeueMontreal-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../PPNeueMontreal-Bold.woff2') format('woff2'), url('../PPNeueMontreal-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --negro:#000000;
  --negro-2:#0a0a0a;
  --blanco:#FFFFFF;
  --amarillo:#F0FA00;
  --gris:#8a8a8a;
  --gris-2:#1c1c1c;
  --linea:rgba(255,255,255,0.12);
  --font:'PP Neue Montreal','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--negro); color:var(--blanco); font-family:var(--font);
  font-weight:400; line-height:1.55; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
::selection{background:var(--amarillo); color:var(--negro);}
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:var(--negro);}
::-webkit-scrollbar-thumb{background:var(--gris-2); border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--amarillo);}

/* ─── NAV ─── */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px clamp(20px,5vw,60px);
  transition:padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
#nav.scrolled{padding:14px clamp(20px,5vw,60px); background:rgba(0,0,0,0.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--linea);}
#nav .logo img{height:20px; width:auto; display:block; filter:brightness(0) invert(1);}
#nav .menu{display:flex; gap:32px; align-items:center;}
#nav .menu a{font-size:13px; letter-spacing:0.04em; color:var(--blanco); transition:color .3s;}
#nav .menu a:hover{color:var(--amarillo);}
#nav .nav-cta{
  font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; font-weight:500; white-space:nowrap;
  color:var(--negro); background:var(--amarillo); padding:11px 20px; border-radius:100px;
  transition:transform .3s var(--ease), box-shadow .3s;
}
#nav .nav-cta:hover{transform:translateY(-2px); box-shadow:0 8px 30px rgba(240,250,0,0.35);}
@media(max-width:860px){#nav .menu{display:none;}}
@media(max-width:540px){
  #nav{padding:14px 16px;}
  #nav .nav-cta{padding:9px 13px; font-size:10.5px; letter-spacing:0.04em;}
}

/* ─── PÁGINA ─── */
.page{padding:120px clamp(20px,5vw,60px) 80px;}
.wrap{max-width:1100px; margin:0 auto; width:100%;}
.wrap-narrow{max-width:760px; margin:0 auto; width:100%;}
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--amarillo); font-weight:500; margin-bottom:28px;
}
.eyebrow::before{content:''; width:34px; height:1px; background:var(--amarillo); display:inline-block;}

/* ─── INDEX BLOG ─── */
.blog-title{font-size:clamp(40px,7vw,96px); font-weight:700; line-height:0.95; letter-spacing:-0.025em; margin-bottom:18px;}
.blog-title .y{color:var(--amarillo);}
.blog-lead{font-size:clamp(16px,1.6vw,19px); color:var(--gris); line-height:1.6; max-width:680px; margin-bottom:60px;}
.blog-lead b{color:var(--blanco); font-weight:500;}

.post-list{display:grid; grid-template-columns:1fr; gap:1px; background:var(--linea); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);}
.post-card{
  background:var(--negro);
  display:grid; grid-template-columns:130px 1fr auto; gap:32px;
  padding:38px 4px; align-items:start;
  transition:background .35s var(--ease), padding .35s var(--ease);
}
.post-card:hover{background:var(--negro-2); padding-left:18px; padding-right:18px;}
.post-meta{font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gris);}
.post-meta .cat{color:var(--amarillo);}
.post-card h2{
  font-size:clamp(20px,2vw,28px); font-weight:700; letter-spacing:-0.01em; line-height:1.2;
  margin-bottom:10px; transition:color .3s;
}
.post-card:hover h2{color:var(--amarillo);}
.post-card p{font-size:15px; color:var(--gris); line-height:1.55; max-width:640px;}
.post-card .arrow{
  align-self:center; color:var(--gris); font-size:20px;
  transition:color .3s, transform .35s var(--ease);
}
.post-card:hover .arrow{color:var(--amarillo); transform:translateX(6px);}
@media(max-width:760px){
  .post-card{grid-template-columns:1fr; gap:14px; padding:28px 4px;}
  .post-card .arrow{display:none;}
}

/* ─── POST ─── */
.post-header{max-width:760px; margin:0 auto 60px;}
.post-back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--gris); letter-spacing:0.05em;
  margin-bottom:34px; transition:color .3s, gap .3s var(--ease);
}
.post-back:hover{color:var(--amarillo); gap:12px;}
.post-meta-row{display:flex; gap:14px; align-items:center; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gris); margin-bottom:24px;}
.post-meta-row .cat{color:var(--amarillo);}
.post-meta-row .dot{width:3px; height:3px; background:var(--gris); border-radius:50%;}
.post-title{font-size:clamp(34px,5.5vw,62px); font-weight:700; line-height:1.05; letter-spacing:-0.025em; margin-bottom:22px;}
.post-title .y{color:var(--amarillo);}
.post-lead{font-size:clamp(17px,1.7vw,21px); color:var(--gris); line-height:1.6;}
.post-lead b{color:var(--blanco); font-weight:500;}

.post-body{max-width:760px; margin:0 auto;}
.post-body h2{font-size:clamp(24px,2.6vw,34px); font-weight:700; line-height:1.2; letter-spacing:-0.015em; margin:60px 0 18px;}
.post-body h2 .y{color:var(--amarillo);}
.post-body h3{font-size:clamp(19px,1.8vw,22px); font-weight:700; line-height:1.25; margin:36px 0 14px;}
.post-body p{font-size:16.5px; line-height:1.7; color:rgba(255,255,255,0.86); margin-bottom:20px;}
.post-body p b, .post-body p strong{color:var(--blanco); font-weight:500;}
.post-body ul, .post-body ol{margin:0 0 24px 22px;}
.post-body li{font-size:16.5px; line-height:1.65; color:rgba(255,255,255,0.86); margin-bottom:10px;}
.post-body li::marker{color:var(--amarillo);}
.post-body blockquote{
  border-left:3px solid var(--amarillo);
  padding:6px 0 6px 22px; margin:32px 0;
  font-size:19px; line-height:1.55; font-style:italic; color:var(--blanco);
}
.post-body a{color:var(--amarillo); text-decoration:underline; text-underline-offset:3px;}
.post-body a:hover{opacity:0.8;}
.post-body hr{border:none; border-top:1px solid var(--linea); margin:50px 0;}

.post-cta{
  max-width:760px; margin:80px auto 0;
  padding:42px 32px; text-align:center;
  background:rgba(240,250,0,0.05); border:1px solid var(--linea); border-radius:14px;
}
.post-cta h3{font-size:clamp(22px,2.4vw,30px); font-weight:700; letter-spacing:-0.015em; margin-bottom:12px;}
.post-cta p{font-size:15.5px; color:var(--gris); margin-bottom:24px;}
.post-cta .btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--amarillo); color:var(--negro);
  font-weight:500; font-size:14.5px; padding:14px 26px; border-radius:100px;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.post-cta .btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(240,250,0,0.35);}

/* ─── FOOTER mini ─── */
.blog-footer{
  border-top:1px solid var(--linea);
  padding:36px clamp(20px,5vw,60px);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;
  font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gris);
}
.blog-footer a{transition:color .3s;}
.blog-footer a:hover{color:var(--amarillo);}
.blog-footer-nav{display:flex; gap:24px; flex-wrap:wrap;}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important;}
}