/* Blog de Autberry. Se carga después de service-pages.css y pricing-brand-shell.css
   y hereda sus tokens, de modo que comparte identidad con /precios/ y /proyectos/. */

/* El topnav del shell premium es fijo, así que el contenido debe arrancar por
   debajo de él. En /precios/ ese hueco lo aporta el padding del hero; aquí lo
   aportan las migas de pan, que son lo primero de la página. */
.blog-page .breadcrumbs{max-width:var(--max);margin:0 auto;padding:clamp(98px,10vw,134px) 24px 0}
.blog-page .article-head{padding-top:clamp(26px,3vw,40px)}
.blog-page .blog-hero{padding-top:clamp(24px,3vw,38px)}

/* ---------- Índice del blog ----------
   El hero de las páginas de servicio usa un titular enorme que aquí dejaría los
   artículos fuera de la primera pantalla. En un índice, lo que tiene que verse
   pronto es la lista. */
.blog-hero{padding:clamp(40px,6vw,74px) 24px clamp(30px,4vw,44px)}
.blog-hero h1{max-width:15ch;font-size:clamp(36px,5.2vw,62px);line-height:1.02}
.blog-hero .lead{margin-top:22px;font-size:clamp(16.5px,1.5vw,19px)}

/* ---------- Índice del blog ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;max-width:var(--max);margin:auto;padding:0 24px clamp(70px,9vw,120px)}
/* Las fichas eran solo texto sobre un rectángulo. No hay fotografía de estos
   temas —ni la habrá inventada—, así que la imagen la pone la propia marca: la
   baya como filigrana y un halo de color distinto por ficha. Cero archivos
   nuevos y cero peso: el logotipo ya se descarga para la cabecera. */
.post-card{position:relative;display:flex;flex-direction:column;padding:30px;border:1px solid var(--line);background-color:rgba(255,255,255,.04);text-decoration:none;overflow:hidden;transition:background-color .25s,border-color .25s,transform .35s var(--ease-out,cubic-bezier(.23,1,.32,1))}
/* Dos capas separadas a propósito. El halo de color necesita bastante presencia
   y la baya muy poca: a plena opacidad y en color deja de leerse como textura y
   parece un logotipo mal colocado. Va desaturada, al 11 % y fundida con
   soft-light, de modo que se intuye sin competir con el titular. */
.post-card::before{content:"";position:absolute;inset:0;background-image:radial-gradient(closest-side circle at 86% 10%,rgba(124,45,138,.36),transparent 100%);background-repeat:no-repeat;background-position:center;background-size:78% 78%;pointer-events:none;transition:opacity .35s ease}
.post-card::after{content:"";position:absolute;top:-40px;right:-46px;width:210px;height:210px;background:url("/assets/autberry-mark.png") no-repeat center/contain;filter:grayscale(1);opacity:.11;mix-blend-mode:soft-light;pointer-events:none;transition:opacity .4s ease,transform .55s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.post-card>*{position:relative;z-index:1}
.post-card:hover,.post-card:focus-visible{background-color:rgba(255,255,255,.07);border-color:rgba(207,121,255,.45)}
.post-card:hover::after,.post-card:focus-visible::after{opacity:.2;transform:scale(1.08) rotate(-4deg)}

/* Cada ficha recibe un halo distinto para que la rejilla no se lea como una
   lista de bloques idénticos. */
.post-card:nth-child(3n+2)::before{background-image:radial-gradient(closest-side circle at 86% 10%,rgba(200,162,76,.24),transparent 100%)}
.post-card:nth-child(3n)::before{background-image:radial-gradient(closest-side circle at 86% 10%,rgba(83,30,106,.44),transparent 100%)}
.post-card .post-topic{color:var(--accent);font:700 11px/1.4 Sora;letter-spacing:.13em;text-transform:uppercase}
.post-card h2,.post-card h3{margin:18px 0 12px;font-size:26px;line-height:1.15;letter-spacing:-.02em}
.post-card p{margin:0;color:var(--muted);font-size:16px}
.post-card .post-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:16px;color:#8f8699;font-size:12.5px;letter-spacing:.01em}
.post-card .post-more{margin-top:auto;padding-top:22px;font-weight:750;color:var(--accent)}
.post-card.featured{grid-column:1/-1;background-image:linear-gradient(135deg,rgba(123,45,164,.28),rgba(255,255,255,.04))}
.post-card.featured::before{background-size:52% 100%;background-position:center right}
.post-card.featured::after{top:-64px;right:-72px;width:330px;height:330px;opacity:.13}
.post-card.featured h2{font-size:clamp(30px,4vw,44px);max-width:800px}
.post-card.featured p{max-width:720px;font-size:18px}

/* ---------- Cabecera de artículo ---------- */
.article-head{max-width:840px;margin:auto;padding:clamp(46px,7vw,86px) 24px 0}
.article-head h1{font-size:clamp(36px,5.6vw,66px);line-height:1.03;letter-spacing:-.045em}
.article-head .lead{max-width:760px;margin:28px 0 0;color:#d7d0dc;font-size:clamp(17px,1.7vw,21px);line-height:1.55}
.article-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line);color:#9e95a8;font-size:13.5px}
.article-meta strong{color:var(--text);font-weight:650}

/* ---------- Cuerpo del artículo ---------- */
.article-body{max-width:840px;margin:auto;padding:clamp(40px,5vw,64px) 24px clamp(60px,8vw,100px)}
.article-body>*{max-width:72ch}
.article-body h2{margin:clamp(48px,6vw,72px) 0 18px;font-size:clamp(28px,3.6vw,40px);font-weight:500;line-height:1.12;letter-spacing:-.035em}
.article-body h2:first-child{margin-top:0}
.article-body h3{margin:38px 0 12px;font-size:clamp(21px,2.3vw,25px);font-weight:600;line-height:1.25}
.article-body p,.article-body li{color:#c8c0d0;font-size:17.5px;line-height:1.72}
.article-body strong{color:var(--text);font-weight:650}
.article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article-body ul,.article-body ol{padding-left:22px;margin:20px 0}
.article-body li{margin:9px 0}
.article-body li::marker{color:var(--accent)}

/* Cita destacada */
.article-body blockquote{margin:36px 0;padding:4px 0 4px 26px;border-left:2px solid var(--accent)}
.article-body blockquote p{margin:0;color:var(--text);font:500 clamp(19px,2.2vw,23px)/1.45 Sora;letter-spacing:-.015em}

/* Caja de idea clave */
.callout{max-width:72ch;margin:36px 0;padding:26px 28px;border:1px solid rgba(207,121,255,.35);background:rgba(123,45,164,.14)}
.callout p:last-child{margin-bottom:0}
.callout .callout-label{display:block;margin-bottom:10px;color:var(--accent);font:700 11px/1 Sora;letter-spacing:.14em;text-transform:uppercase}

/* Tablas comparativas */
.table-wrap{max-width:none;overflow-x:auto;margin:32px 0}
.article-body table{width:100%;min-width:560px;border-collapse:collapse;font-size:16px}
.article-body th,.article-body td{padding:14px 16px;border:1px solid var(--line);text-align:left;vertical-align:top;color:#c8c0d0}
.article-body th{background:rgba(255,255,255,.06);color:var(--text);font-family:Sora;font-weight:650;font-size:14px}
.article-body td strong{color:var(--text)}

/* Sumario */
.toc{max-width:72ch;margin:0 0 44px;padding:24px 26px;border:1px solid var(--line);background:rgba(255,255,255,.035)}
.toc h2{margin:0 0 14px;font:700 11px/1 Sora;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:7px 0;font-size:16px}
.toc a{color:#c8c0d0;text-decoration:none}
.toc a:hover{color:var(--accent);text-decoration:underline}

/* ---------- Artículos relacionados ---------- */
.related{max-width:var(--max);margin:auto;padding:0 24px clamp(60px,8vw,100px)}
.related h2{margin:0 0 24px;font-size:clamp(26px,3.2vw,36px);font-weight:500;letter-spacing:-.03em}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.related-grid a{padding:24px;border:1px solid var(--line);background:rgba(255,255,255,.04);text-decoration:none;transition:background .25s}
.related-grid a:hover{background:rgba(255,255,255,.07)}
.related-grid strong{display:block;margin-bottom:8px;font-family:Sora;font-size:19px;line-height:1.25}
.related-grid span{color:var(--muted);font-size:15px}

@media(max-width:800px){
  .article-body p,.article-body li{font-size:16.5px}
  .post-card{padding:24px}
  .callout{padding:22px}
}