/* =========================================================
   ELEVATE MEDIA LABS — Blog (listado + post)
   Se apoya en styles/site.css: mismos tokens, nav, tarjetas y footer
   que la landing. Acá sólo lo propio del blog.
   ========================================================= */

/* ---------- Cabecera del listado ---------- */
.bhead{position:relative}
.bhead__waves{height:min(38vh,21.25rem);min-height:16.25rem}
.bhead__body{position:relative;margin-top:-2.5rem;padding:0 var(--gutter)}
.bhead__title{
  font-size:clamp(2.125rem,4.2vw,3.625rem);font-weight:500;letter-spacing:-.035em;
  line-height:1.06;text-wrap:balance;color:#fff;max-width:16em;
}
.bhead__lead{margin-top:1.75rem;max-width:56ch;font-size:0.8125rem;line-height:1.6;color:rgba(255,255,255,.6);text-wrap:pretty}

/* ---------- Listado ---------- */
.blist{padding:4.5rem var(--gutter) 0}
.filters{display:flex;flex-wrap:wrap;gap:0.375rem;margin-bottom:2.5rem}
.filter{
  padding:0.4375rem 0.75rem;border-radius:0.3125rem;
  background:transparent;border:1px solid rgba(255,255,255,.14);
  font-family:var(--mono);font-size:0.6563rem;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.65);transition:background-color .2s,color .2s,border-color .2s;
}
.filter:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.filter[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--bg)}

/* Nota destacada: imagen grande + texto al costado */
.feat{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:2.5rem;align-items:center;
  padding-bottom:3.5rem;margin-bottom:3.5rem;border-bottom:1px solid rgba(255,255,255,.1);
}
.feat:hover{color:inherit}
.feat__media{aspect-ratio:16/10;border-radius:0.375rem;overflow:hidden;background:var(--card-dark)}
.feat__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.feat:hover .feat__media img{transform:scale(1.025)}
.feat__body{display:flex;flex-direction:column;gap:1.125rem;align-items:flex-start}
.feat__title{font-size:clamp(1.5rem,2.6vw,2.25rem);font-weight:500;letter-spacing:-.03em;line-height:1.15;color:#fff;text-wrap:balance}
.feat__excerpt{
  font-size:0.8125rem;line-height:1.65;color:rgba(255,255,255,.6);text-wrap:pretty;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;
}
.meta{
  display:flex;flex-wrap:wrap;gap:0.375rem 0.875rem;
  font-family:var(--mono);font-size:0.6563rem;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.meta span + span::before{content:"·";margin-right:0.875rem;opacity:.6}
.feat__more{margin-top:0.375rem}

.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem 0.625rem}
.bgrid .case__title{font-size:0.9375rem}
.blist__state{padding:2.5rem 0;font-size:0.7813rem;color:rgba(255,255,255,.55)}

/* ---------- CTA ---------- */
.bcta{padding:7.5rem var(--gutter) 9.375rem}
.bcta__box{
  max-width:var(--w);margin:0 auto;padding:2.5rem;border-radius:0.5rem;
  border:1px solid rgba(255,255,255,.1);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:2rem;align-items:end;
  background:
    radial-gradient(60% 120% at 100% 0%,rgba(122,92,255,.14),transparent 60%),
    radial-gradient(40% 90% at 85% 100%,rgba(127,227,255,.08),transparent 60%);
}
.bcta__title{font-size:clamp(1.375rem,2.4vw,2rem);font-weight:500;letter-spacing:-.03em;line-height:1.2;max-width:22ch;text-wrap:balance}
.bcta__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.25rem}
.bcta__note{margin-top:0.875rem;max-width:48ch;font-size:0.7813rem;line-height:1.6;color:rgba(255,255,255,.55)}

/* ---------- Newsletter (js/newsletter.js) ---------- */
.bcta > * + *{margin-top:0.625rem}
.news{
  max-width:var(--w);margin:0 auto;padding:2.5rem;border-radius:0.5rem;
  border:1px solid rgba(255,255,255,.1);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:2rem;align-items:start;
}
.news__title{font-size:clamp(1.375rem,2.4vw,2rem);font-weight:500;letter-spacing:-.03em;line-height:1.2;max-width:24ch;text-wrap:balance}
.news__desc{margin-top:0.75rem;max-width:52ch;font-size:0.7813rem;line-height:1.6;color:rgba(255,255,255,.55)}
.news__form{display:flex;gap:0.5rem;margin-top:1.375rem;max-width:30rem}
.news__form .input{flex:1 1 auto;min-width:0}
.news__msg{margin-top:0.625rem;min-height:1.5em}

/* Aviso de confirmación (double opt-in) al volver desde el mail */
.optin{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;
  width:min(24rem,calc(100vw - 2.5rem));padding:1.375rem 1.375rem 1.25rem;border-radius:0.625rem;
  display:flex;flex-direction:column;gap:0.625rem;
  background:#0f0f0f radial-gradient(80% 90% at 100% 0%,rgba(122,92,255,.18),transparent 60%);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 1.5rem 3rem -1.5rem rgba(0,0,0,.8);
  animation:optinIn .3s ease;
}
@keyframes optinIn{from{opacity:0;transform:translateY(0.625rem)}to{opacity:1;transform:none}}
.optin__title{font-size:1.125rem;font-weight:500;letter-spacing:-.02em;color:#fff}
.optin__row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:0.25rem}
.pnews{padding:1.25rem var(--gutter) 9.375rem}

/* ---------- Post: cabecera oscura ---------- */
.phead{padding:9.375rem var(--gutter) 0}
.phead__inner{max-width:55rem;margin:0 auto}
.phead__back{display:inline-flex;gap:0.5rem;font-family:var(--mono);font-size:0.6875rem;color:rgba(255,255,255,.55);transition:color .2s}
.phead__back:hover{color:#fff}
.phead .meta{margin-top:2.5rem}
.phead__title{
  margin-top:1.125rem;font-size:clamp(1.875rem,4vw,3.375rem);font-weight:500;letter-spacing:-.035em;
  line-height:1.08;text-wrap:balance;color:#fff;
}
.phead__lead{margin-top:1.5rem;max-width:60ch;font-size:0.9375rem;line-height:1.6;color:rgba(255,255,255,.62);text-wrap:pretty}
.phead__cover{max-width:68.75rem;margin:3.5rem auto 0;aspect-ratio:16/10;border-radius:0.5rem;overflow:hidden;background:var(--card-dark)}
.phead__cover img{width:100%;height:100%;object-fit:cover}

/* ---------- Post: cuerpo claro ---------- */
.pbody{background:var(--light);color:var(--bg);padding:1.5rem var(--gutter) 0}
.prose{max-width:42.5rem;margin:0 auto;font-size:1rem;line-height:1.75;color:#2a2a2a;letter-spacing:-.005em}
.prose > * + *{margin-top:1.125rem}
.prose .prose__intro{font-size:1.125rem;line-height:1.65;color:var(--bg);letter-spacing:-.01em}
.prose h2{
  display:flex;align-items:baseline;gap:0.875rem;
  margin-top:4rem;padding-top:1.75rem;border-top:1px solid rgba(0,0,0,.1);
  font-size:clamp(1.375rem,2.3vw,1.75rem);font-weight:500;letter-spacing:-.03em;line-height:1.2;color:var(--bg);text-wrap:balance;
}
.prose h2 .num{flex:none;font-family:var(--mono);font-size:0.75rem;letter-spacing:.04em;color:var(--violet-deep);transform:translateY(-.2em)}
.prose h3{margin-top:2.25rem;font-size:1.0625rem;font-weight:600;letter-spacing:-.015em;line-height:1.35;color:var(--bg)}
.prose h3 .num{margin-right:0.625rem;font-family:var(--mono);font-size:0.75rem;font-weight:400;color:var(--violet-deep)}
.prose h2 + *,.prose h3 + *{margin-top:0.875rem}
.prose strong{font-weight:600;color:var(--bg)}
.prose a{color:var(--violet-deep);text-decoration:underline;text-underline-offset:0.1875rem}
.prose a:hover{color:var(--bg)}
.prose ul,.prose ol{padding-left:0;list-style:none}
.prose li{position:relative;padding-left:1.375rem}
.prose li + li{margin-top:0.5rem}
.prose ul > li::before{
  content:"";position:absolute;left:0.25rem;top:.72em;width:0.375rem;height:0.375rem;border-radius:50%;
  background:var(--grad);
}
.prose ol{counter-reset:item}
.prose ol > li{counter-increment:item;padding-left:1.875rem}
.prose ol > li::before{
  content:counter(item,decimal-leading-zero);position:absolute;left:0;top:.2em;
  font-family:var(--mono);font-size:0.75rem;color:var(--violet-deep);
}
.prose blockquote,.prose .callout{
  margin-top:1.75rem;padding:1.125rem 1.375rem;border-radius:0.375rem;
  background:#fff;border:1px solid rgba(0,0,0,.08);
  font-size:1rem;line-height:1.6;color:var(--bg);
}
.prose .callout{border-left:0.1875rem solid var(--violet-deep)}
.prose img{border-radius:0.375rem}
.prose hr{border:0;border-top:1px solid rgba(0,0,0,.12);margin:3rem 0}
.prose code{font-family:var(--mono);font-size:.9em;padding:2px 0.375rem;border-radius:0.25rem;background:rgba(0,0,0,.06)}
.prose table{width:100%;border-collapse:collapse;font-size:0.875rem}
.prose th,.prose td{padding:0.625rem 0.75rem;border-bottom:1px solid rgba(0,0,0,.1);text-align:left}

.ptags{max-width:42.5rem;margin:3rem auto 0;display:flex;flex-wrap:wrap;gap:0.375rem}
.ptags span{padding:0.375rem 0.625rem;border-radius:0.3125rem;border:1px solid rgba(0,0,0,.14);font-size:0.7188rem}

.pcta{
  max-width:42.5rem;margin:4.5rem auto 0;padding:1.75rem;border-radius:0.5rem;
  background:var(--bg);color:#fff;
  display:flex;flex-direction:column;gap:0.875rem;align-items:flex-start;
  background-image:radial-gradient(70% 140% at 100% 0%,rgba(122,92,255,.22),transparent 60%);
}
.is-light .pcta .overline{color:rgba(255,255,255,.5)}
.pcta__title{font-size:clamp(1.25rem,2vw,1.5rem);font-weight:500;letter-spacing:-.03em;line-height:1.25;max-width:26ch}
.pcta p{font-size:0.7813rem;line-height:1.6;color:rgba(255,255,255,.6);max-width:52ch}
.pbody .fade{margin:6.25rem calc(var(--gutter) * -1) 0}

.pstate{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.125rem;max-width:55rem;margin:0 auto;padding:9.375rem var(--gutter) 5rem}
.pstate h1{font-size:clamp(1.75rem,3.4vw,2.75rem);font-weight:500;letter-spacing:-.035em;line-height:1.1}
.pstate p{font-size:0.8125rem;color:rgba(255,255,255,.6)}
.pstate .pstate__loading{font-family:var(--mono);font-size:0.6875rem;color:rgba(255,255,255,.5)}

/* ---------- Más lecturas ---------- */
.related{padding:1.25rem var(--gutter) 9.375rem}
.related .bgrid{margin-top:3rem}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .feat{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bcta__box,.news{grid-template-columns:minmax(0,1fr);gap:1.25rem}
}
@media (max-width:760px){
  .blist{padding-top:3.5rem}
  .bcta{padding:5rem var(--gutter) 6.875rem}
  .bcta__box,.news{padding:1.625rem 1.375rem}
  .pnews{padding-bottom:6.875rem}
  .phead{padding-top:7.5rem}
  .phead .meta{margin-top:1.75rem}
  .phead__cover{margin-top:2.5rem}
  .prose{font-size:0.9688rem}
  .prose .prose__intro{font-size:1.0625rem}
  .prose h2{margin-top:3rem;padding-top:1.375rem}
  .related{padding-bottom:6.875rem}
}
@media (max-width:600px){
  .bgrid{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .pcta{padding:1.375rem 1.25rem}
  .news__form{flex-direction:column}
}

@media (prefers-reduced-motion: reduce){
  .feat__media img{transition:none}
  .optin{animation:none}
}