/* Blog de Godi: listado (blog.html) y artículos (blog-*.html).
   Columnas laterales con banners publicitarios propios (tipo anuncio) en pantallas anchas;
   en pantallas más chicas el banner aparece dentro del contenido. */

.nav-links a.active{ color:var(--ink); font-weight:600; }
.nav-links a.active::after{ width:100%; }

.blog-meta{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-family:var(--f-display); font-size:13.5px; font-weight:500; color:#dbe3fb; }
.blog-meta span + span::before{ content:"·"; margin-right:16px; opacity:0.7; }
.blog-crumbs{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; font-size:13px; color:#c9d3f2; }
.blog-crumbs a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

.blog-wrap{ background:#fff; }
.blog-layout{ display:grid; grid-template-columns:220px minmax(0, 1fr) 220px; gap:40px; align-items:start; }
.blog-main{ min-width:0; }
.ad-rail{ position:sticky; top:100px; }
.ad-inline{ display:none; margin:8px 0 30px; }
@media (max-width:1239px){
  .blog-layout{ grid-template-columns:minmax(0, 1fr); }
  .ad-rail{ display:none; }
  .ad-inline{ display:block; }
}

/* --- Banners publicitarios --- */
.ad-unit{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px; min-height:560px;
  padding:22px 20px; border-radius:20px; text-decoration:none; color:#fff; background:var(--ink);
  box-shadow:0 24px 48px -28px rgba(32,30,29,0.55); transition:transform .2s ease, box-shadow .2s ease;
}
.ad-unit:hover{ transform:translateY(-4px); box-shadow:0 30px 56px -26px rgba(32,30,29,0.6); }
.ad-unit::before{ content:""; position:absolute; width:220px; height:200px; right:-90px; top:-80px; border-radius:var(--blob-a); background:var(--azul-soporte, #5F82E8); opacity:0.55; }
.ad-unit::after{ content:""; position:absolute; width:140px; height:120px; right:-72px; bottom:86px; border-radius:var(--blob-b); background:var(--orange); opacity:0.9; }
.ad-unit > *{ position:relative; z-index:1; }
.ad-label{ font-family:var(--f-display); font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; opacity:0.8; }
.ad-logo{ width:96px; height:auto; }
.ad-title{ font-family:var(--f-display); font-weight:800; font-size:25px; line-height:1.15; letter-spacing:-0.015em; }
.ad-text{ font-size:14px; line-height:1.5; opacity:0.92; }
.ad-price{ font-family:var(--f-display); font-weight:700; font-size:15px; color:var(--orange); }
.ad-btn{
  margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--orange); color:var(--negro); font-family:var(--f-display); font-weight:700; font-size:14px;
  padding:13px 16px; border-radius:999px;
}
.ad-unit.ad-contenido{ background:var(--orange); color:var(--negro); }
.ad-unit.ad-contenido::before{ background:#ffcd4d; opacity:1; }
.ad-unit.ad-contenido::after{ background:var(--ink); opacity:0.85; }
.ad-unit.ad-contenido .ad-price{ color:var(--ink); }
.ad-unit.ad-contenido .ad-btn{ background:var(--negro); color:#fff; }
.ad-unit.ad-diag{ background:var(--negro); }
.ad-unit.ad-diag::before{ background:var(--ink); opacity:0.9; }
.ad-unit.ad-web{ background:var(--azul-cielo, #DDE7FF); color:var(--negro); }
.ad-unit.ad-web::before{ background:#fff; opacity:0.8; }
.ad-unit.ad-web .ad-price{ color:var(--ink); }
.ad-unit.ad-web .ad-btn{ background:var(--ink); color:#fff; }
/* Versión horizontal dentro del contenido */
.ad-inline .ad-unit{ min-height:0; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:6px 18px; padding:20px 22px; }
.ad-inline .ad-logo{ grid-row:span 4; width:84px; }
.ad-inline .ad-title{ font-size:20px; }
.ad-inline .ad-btn{ margin-top:6px; justify-self:start; }
@media (max-width:520px){
  .ad-inline .ad-unit{ grid-template-columns:1fr; }
  .ad-inline .ad-logo{ grid-row:auto; }
}

/* --- Listado --- */
.blog-intro{ max-width:720px; margin:0 0 26px; }
.blog-intro h2{ font-family:var(--f-display); font-weight:800; font-size:clamp(24px, 2.8vw, 32px); letter-spacing:-0.02em; margin:12px 0 6px; color:var(--negro); }
.blog-intro p{ margin:0; font-size:15.5px; line-height:1.6; color:var(--stone); }
.blog-cards{ display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; }
.related-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.blog-card{
  display:flex; flex-direction:column; background:#fff; border-radius:20px; overflow:hidden; text-decoration:none; color:var(--negro);
  box-shadow:var(--shadow-card); border:1px solid var(--line); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.blog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--ink); }
.blog-cover{ position:relative; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--ink); }
.blog-cover::before{ content:""; position:absolute; width:62%; height:110%; right:-18%; top:-30%; border-radius:var(--blob-a); background:rgba(255,255,255,0.14); }
.blog-cover::after{ content:""; position:absolute; width:40%; height:70%; left:-10%; bottom:-30%; border-radius:var(--blob-b); background:var(--orange); opacity:0.9; }
.blog-cover svg{ position:relative; z-index:1; width:64px; height:64px; fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.blog-cover .chip{ position:absolute; z-index:1; left:14px; top:14px; font-family:var(--f-display); font-weight:700; font-size:10.5px; letter-spacing:0.07em; text-transform:uppercase; background:#fff; color:var(--ink); padding:5px 10px; border-radius:999px; }
.blog-cover.c-precios{ background:var(--ink); }
.blog-cover.c-estrategia{ background:var(--negro); }
.blog-cover.c-estrategia::before{ background:var(--ink); opacity:0.9; }
.blog-cover.c-publicidad{ background:#3a5bb8; }
.blog-cover.c-diseno{ background:var(--orange); }
.blog-cover.c-diseno::after{ background:var(--ink); }
.blog-cover.c-diseno svg{ stroke:var(--negro); }
.blog-cover.c-contenido{ background:#233d86; }
.blog-card-body{ display:grid; gap:8px; padding:20px 22px 22px; flex:1; align-content:start; }
.blog-card-body h2, .blog-card-body h3{ font-family:var(--f-display); font-weight:800; font-size:19px; line-height:1.3; margin:0; letter-spacing:-0.01em; }
.blog-card-body p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--stone); }
.blog-card-meta{ display:flex; justify-content:space-between; gap:10px; margin-top:6px; font-size:12.5px; color:var(--stone); }
.blog-card-meta b{ font-family:var(--f-display); color:var(--ink); }
@media (max-width:860px){ .blog-cards, .related-cards{ grid-template-columns:1fr; } }

/* --- Artículo --- */
.article-body{ max-width:720px; margin:0 auto; font-size:17px; line-height:1.75; color:#2b2f3a; }
.article-body > p:first-of-type{ font-size:18.5px; color:var(--negro); }
.article-body h2{ font-family:var(--f-display); font-weight:800; font-size:clamp(22px, 2.4vw, 27px); line-height:1.25; letter-spacing:-0.015em; margin:42px 0 12px; color:var(--negro); text-wrap:balance; }
.article-body h3{ font-family:var(--f-display); font-weight:700; font-size:19px; margin:26px 0 8px; color:var(--negro); }
.article-body p{ margin:0 0 18px; }
.article-body ul, .article-body ol{ margin:0 0 20px; padding-left:22px; }
.article-body li{ margin-bottom:8px; }
.article-body li::marker{ color:var(--ink); font-weight:700; }
.article-body a{ color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.article-body strong{ color:var(--negro); }
.art-table{ overflow-x:auto; margin:0 0 24px; border:1px solid var(--line); border-radius:14px; }
.art-table table{ width:100%; border-collapse:collapse; font-size:15px; line-height:1.5; }
.art-table th, .art-table td{ padding:11px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.art-table th{ background:var(--paper-dim); font-family:var(--f-display); font-weight:700; font-size:13.5px; color:var(--negro); }
.art-table tr:last-child td{ border-bottom:0; }
.art-note{ margin:0 0 24px; padding:16px 18px; border-radius:14px; background:var(--azul-cielo, #DDE7FF); border-left:4px solid var(--ink); font-size:15.5px; line-height:1.6; }
.art-note p{ margin:0; }
.art-cta{ position:relative; overflow:hidden; margin:40px 0 0; padding:30px 28px; border-radius:24px; background:var(--negro); color:#fff; }
.art-cta::before{ content:""; position:absolute; width:260px; height:240px; right:-110px; top:-120px; border-radius:var(--blob-a); background:var(--ink); opacity:0.9; }
.art-cta > *{ position:relative; }
.art-cta h2{ color:#fff; margin:0 0 8px; font-size:24px; }
.art-cta p{ margin:0 0 18px; color:#d7dbe4; font-size:16px; }
.art-cta .actions{ display:flex; flex-wrap:wrap; gap:12px 14px; }
.art-cta a{ text-decoration:none; }
.art-cta .btn-primary{ color:var(--negro); }
.art-cta .btn-ghost{ color:#fff; }
.blog-related{ background:var(--paper-dim); }

/* Los banners dentro del artículo no heredan el estilo de los enlaces del texto */
.article-body a.ad-unit{ text-decoration:none; font-weight:400; color:#fff; }
.article-body a.ad-unit.ad-contenido, .article-body a.ad-unit.ad-web{ color:var(--negro); }
.article-body a.ad-unit .ad-title, .article-body a.ad-unit .ad-price, .article-body a.ad-unit .ad-btn{ font-weight:700; }
.article-body a.ad-unit .ad-title{ font-weight:800; }

/* --- Portadas (imágenes en assets/blog/) --- */
.blog-cover.has-img{ background:var(--paper-dim); }
.blog-cover.has-img::before, .blog-cover.has-img::after{ display:none; }
.blog-cover.has-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.blog-card:hover .blog-cover.has-img img{ transform:scale(1.03); }
.art-cover{ margin:0 0 28px; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card); aspect-ratio:16/9; background:var(--paper-dim); }
.art-cover img{ width:100%; height:100%; object-fit:cover; display:block; }