/* ============================================================================
   Publinovo Blog — CSS de la plantilla de ARTÍCULO (single) — Paso 4A.
   Reproduce la referencia (breadcrumb, layout a 2 columnas, cabecera, prose,
   sidebar + índice). No redefine variables: usa los tokens ya mapeados.
   La caja de autor, compartir, relacionadas y los patrones reutilizables
   (key-points, callouts, cta, tabla comparativa, etc.) llegan en el Paso 4B.
   ============================================================================ */

/* (El breadcrumb .crumbs y la caja de autor .author-box se movieron a blog.css
   por ser componentes compartidos con las plantillas de archivo/autor.) */

/* === LAYOUT DEL ARTÍCULO ================================================ */
.article-shell{ padding:30px 0 clamp(48px,6vw,80px) }
.article-grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:56px;
  align-items:start; margin-top:30px }
/* El grupo del grid sale como is-layout-flow; anulamos el margen superior que
   WordPress inyecta en los hijos no-primeros para que ambas columnas alineen. */
.article-grid > *{ margin-block-start:0 }
.article{ min-width:0; max-width:760px }

/* cabecera del artículo */
.article__header{ margin-bottom:30px }
.article__pillrow{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px }
.article__title{ font-size:clamp(32px,4.6vw,50px); line-height:1.1; margin:0; text-wrap:balance }
.article__lead{ margin:22px 0 0; font-size:clamp(18px,2.2vw,21px); line-height:1.5;
  color:var(--ink-3); text-wrap:pretty }
.article__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin-top:26px;
  padding-top:24px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-3) }
.article__author{ display:inline-flex; align-items:center; gap:11px; color:var(--ink); font-weight:600 }
.article__author img{ width:40px; height:40px; border-radius:var(--r-pill); object-fit:cover;
  flex:none; box-shadow:var(--shadow-sm) }
.article__meta time, .article__updated{ font-variant-numeric:tabular-nums }
.article__updated{ color:var(--green-d); font-weight:600 }
.meta-dot{ width:3px; height:3px; border-radius:50%; background:var(--line-2); flex:none }

/* imagen destacada (hero 16:9, sin CLS) */
.article__figure{ margin:0 0 8px; position:relative }
.article__figure .article__media{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--r-lg); box-shadow:var(--shadow-md); background-color:var(--bg-soft-2) }
.article__figure figcaption{ margin-top:12px; font-size:13px; color:var(--muted); padding-left:2px }

/* === PROSE (cuerpo del artículo) ======================================= */
.prose{ font-size:17px; line-height:1.72; color:var(--ink-2) }
.prose > h2{ font-size:clamp(25px,3vw,32px); line-height:1.18; margin:48px 0 4px; scroll-margin-top:96px }
.prose > h3{ font-size:clamp(20px,2.3vw,23px); line-height:1.25; margin:34px 0 2px; color:var(--ink); scroll-margin-top:96px }
.prose h2 .anchor, .prose h3 .anchor{ opacity:0; margin-left:10px; color:var(--blue); font-weight:600;
  font-family:var(--ff-body); text-decoration:none; transition:opacity .15s ease }
.prose h2:hover .anchor, .prose h3:hover .anchor, .prose .anchor:focus-visible{ opacity:1 }
.prose p{ margin:18px 0 }
.prose strong{ color:var(--ink); font-weight:700 }
.prose a:not(.btn):not(.cta-service__arrow):not(.case__link){ color:var(--blue-d); font-weight:600;
  background-image:linear-gradient(var(--blue),var(--blue)); background-size:100% 1.5px;
  background-repeat:no-repeat; background-position:0 100%; padding-bottom:1px;
  transition:background-size .2s ease }
.prose a:not(.btn):not(.cta-service__arrow):not(.case__link):hover{ background-size:0% 1.5px }
.prose ul, .prose ol{ margin:18px 0; padding-left:0; list-style:none; display:grid; gap:11px }
.prose ul li, .prose ol li{ position:relative; padding-left:34px; line-height:1.6 }
.prose ul li::before{ content:""; position:absolute; left:8px; top:11px; width:8px; height:8px;
  border-radius:2px; background:var(--grad) }
.prose ol{ counter-reset:li }
.prose ol li{ counter-increment:li }
.prose ol li::before{ content:counter(li); position:absolute; left:0; top:1px; width:24px; height:24px;
  border-radius:var(--r-pill); background:var(--grad-soft); color:var(--blue-d); font-family:var(--ff-head);
  font-weight:700; font-size:12.5px; display:grid; place-items:center }
.prose figure{ margin:30px 0 }
.prose figure img{ display:block; width:100%; height:auto; border-radius:var(--r-md);
  box-shadow:var(--shadow-sm) }
.prose figcaption{ margin-top:11px; font-size:13px; color:var(--muted) }
/* blockquote */
.prose blockquote{ margin:30px 0; padding:6px 0 6px 26px; border-left:4px solid;
  border-image:var(--grad) 1; font-size:18px; line-height:1.6; color:var(--ink-2) }
.prose blockquote p{ margin:0 }
.prose blockquote cite{ display:block; margin-top:10px; font-style:normal; font-size:14px;
  font-weight:600; color:var(--ink-3) }
/* tablas estándar del contenido (core/table) — la referencia no las traía;
   estilo coherente con los tokens. */
.prose .wp-block-table{ margin:24px 0 }
.prose table{ width:100%; border-collapse:collapse; font-size:15.5px }
.prose th, .prose td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top }
.prose thead th{ font-family:var(--ff-head); font-weight:700; color:var(--ink);
  border-bottom:2px solid var(--line-2) }
.prose tbody tr:hover{ background:var(--bg-soft) }
.prose .wp-block-table figcaption{ margin-top:10px }

/* === SIDEBAR (diseño exacto de la referencia) ========================== */
/* NOTA: la referencia traía `max-height:calc(100vh-110px); overflow:auto` con la
   barra de scroll oculta. Cuando el índice + "Lo más leído" + CTA superan el alto
   del viewport, eso RECORTABA la parte baja del CTA (texto/botón/enlace) sin
   indicio de scroll. Lo quitamos: el sidebar fluye a su alto natural y sigue
   sticky, así el CTA se ve completo. */
.sidebar{ position:sticky; top:96px; display:flex; flex-direction:column; gap:26px }

.swidget{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 22px }
.swidget__h{ display:flex; align-items:center; gap:9px; font-family:var(--ff-head); font-weight:700; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin:0 0 16px }
.swidget__h::before{ content:""; width:18px; height:3px; border-radius:var(--r-pill); background:var(--grad); flex:none }

/* índice (TOC) */
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc }
.toc a{ display:block; padding:8px 12px; border-radius:var(--r-sm); font-size:14.5px; line-height:1.4;
  color:var(--ink-3); border-left:2px solid transparent;
  transition:color .16s ease, background-color .16s ease, border-color .16s ease }
.toc a:hover{ color:var(--ink); background:var(--bg-soft) }
.toc li.is-sub a{ padding-left:26px; font-size:13.5px }
.toc a.is-active{ color:var(--blue-d); font-weight:600; background:var(--grad-soft); border-left-color:var(--blue) }
.toc:empty, [data-toc-desktop].is-empty, [data-toc-mobile].is-empty{ display:none }

/* mini "Lo más leído" */
.smini{ display:flex; flex-direction:column; gap:2px }
.smini__item{ display:flex; gap:13px; align-items:center; padding:11px 0; border-top:1px solid var(--line) }
.smini__item:first-child{ border-top:none; padding-top:0 }
.smini__thumb{ position:relative; flex:none; width:60px; aspect-ratio:1/1; border-radius:var(--r-sm); overflow:hidden;
  background-color:var(--bg-soft-2) }
.smini__thumb .ph__label{ display:none }
/* imagen destacada real que llena la miniatura (la caja ya es 1:1) */
.smini__thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.smini__rank{ position:absolute; left:5px; top:5px; width:22px; height:22px; border-radius:7px; background:var(--grad);
  color:#fff; font-family:var(--ff-head); font-weight:700; font-size:11px; display:grid; place-items:center }
.smini__t{ font-family:var(--ff-head); font-weight:600; font-size:14px; line-height:1.3; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .16s ease }
.smini__item:hover .smini__t{ color:var(--blue-d) }

/* tarjeta CTA oscura (radio de .swidget; padding propio con más aire abajo para
   que el botón y el enlace no toquen el borde inferior). Igual en las 4 variantes. */
.scta{ background:var(--ink); color:#C7CAD6; border:none; position:relative; overflow:hidden;
  padding:22px 22px 30px }
.scta::before{ content:""; position:absolute; right:-90px; top:-90px; width:230px; height:230px; background:var(--grad);
  filter:blur(100px); opacity:.55 }
.scta__in{ position:relative }
.scta .eyebrow{ color:rgba(255,255,255,.72) }
.scta h4{ color:#fff; font-size:20px; margin:14px 0 0; line-height:1.2 }
.scta p{ margin:9px 0 18px; font-size:14.5px; color:#9AA0B0 }
.scta .btn{ width:100% }
/* enlace secundario al servicio de la vertical (sobre el CTA oscuro) */
.scta__link{ position:relative; display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  color:#fff; font-weight:600; font-size:14px; opacity:.9 }
.scta__link svg{ width:15px; height:15px; transition:transform .18s ease }
.scta__link:hover{ color:var(--green); opacity:1 }
.scta__link:hover svg{ transform:translateX(3px) }
.scta :focus-visible{ outline-color:var(--green) }

/* índice móvil (colapsable arriba del cuerpo) */
.toc-mobile{ display:none; margin:24px 0 6px }
.toc-mobile details{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-soft); overflow:hidden }
.toc-mobile summary{ display:flex; align-items:center; gap:11px; padding:15px 18px; font-family:var(--ff-head);
  font-weight:700; font-size:15px; color:var(--ink); cursor:pointer; list-style:none; min-height:44px }
.toc-mobile summary::-webkit-details-marker{ display:none }
.toc-mobile summary .chev{ margin-left:auto; transition:transform .2s ease; color:var(--ink-3) }
.toc-mobile summary .chev svg{ width:18px; height:18px; display:block }
.toc-mobile details[open] summary .chev{ transform:rotate(180deg) }
.toc-mobile summary .ic{ display:grid; place-items:center; width:26px; height:26px; border-radius:7px;
  background:var(--grad); color:#fff }
.toc-mobile summary .ic svg{ width:15px; height:15px }
.toc-mobile .toc{ padding:6px 10px 12px }

/* === RESPONSIVE ======================================================== */
@media (max-width:1080px){
  .article-grid{ grid-template-columns:1fr; gap:0 }
  .sidebar{ display:none }
  .toc-mobile{ display:block }
  .article{ max-width:none }
}

@media (prefers-reduced-motion: reduce){
  .toc-mobile summary .chev{ transition:none }
}

/* ============================================================================
   PASO 4B — cierre del artículo + bloques reutilizables + arreglos de sidebar.
   Los bloques de patrón van DESPUÉS de .prose para ganarle por orden de fuente.
   Los encabezados usan la forma `.padre h2/h3/h4` para ganar a `.pnv h*`.
   ============================================================================ */

/* === CIERRE DEL ARTÍCULO =============================================== */
.article-foot{ margin-top:48px }

/* etiquetas (reusa los chips .tag/.tagcloud del hub) */
.article-tags{ align-items:center; gap:10px 14px; margin:30px 0 }

/* compartir */
.share{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin:30px 0; padding:22px 0;
  border-block:1px solid var(--line) }
.share__label{ font-family:var(--ff-head); font-weight:700; font-size:15px; color:var(--ink); margin-right:4px }
.share__btns{ display:flex; gap:10px; flex-wrap:wrap }
.share__btns a, .share__btns button{ display:inline-grid; place-items:center; width:46px; height:46px;
  border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--bg); color:var(--ink-2);
  cursor:pointer; transition:color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease }
.share__btns a svg, .share__btns button svg{ width:19px; height:19px }
.share__btns a:hover, .share__btns button:hover{ color:#fff; border-color:transparent;
  background:var(--grad); transform:translateY(-2px) }
.share__copied{ font-size:13.5px; font-weight:600; color:var(--green-d); opacity:0; transition:opacity .2s ease }
.share__copied.show{ opacity:1 }

/* (.author-box se movió a blog.css: se reutiliza en la página de autor.) */

/* entradas relacionadas (ancho completo, reusa .post-grid/.post-card) */
.related{ margin-top:clamp(56px,7vw,80px); background:var(--bg-soft); border-top:1px solid var(--line);
  padding:clamp(48px,6vw,72px) 0 clamp(56px,7vw,80px) }
.related__head{ margin-bottom:8px }
.related .related__title{ font-size:clamp(26px,3.4vw,38px); margin:14px 0 0 }

/* === BLOQUES REUTILIZABLES (patrones) ================================== */

/* Puntos clave / Respuesta rápida */
.key-points{ position:relative; margin:34px 0; padding:28px 30px 30px; border-radius:var(--r-lg);
  background:var(--grad-soft); border:1px solid rgba(28,157,215,.18); overflow:hidden }
.key-points::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--grad) }
.key-points__title{ display:flex; align-items:center; gap:11px; font-family:var(--ff-head); font-weight:700;
  font-size:18px; color:var(--ink); margin:0 0 16px }
.key-points__badge{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px;
  background:var(--grad); color:#fff; flex:none; box-shadow:var(--shadow-brand) }
.key-points__badge svg{ width:17px; height:17px }
.key-points ul{ list-style:none; margin:0; padding:0; display:grid; gap:13px }
.key-points li{ display:flex; gap:12px; font-size:16px; line-height:1.5; color:var(--ink-2) }
.key-points li svg{ width:21px; height:21px; flex:none; color:var(--green-d); margin-top:1px }
.key-points li b{ color:var(--ink); font-weight:700 }
/* anula viñetas/sangría del prose dentro de la caja */
.prose .key-points li{ padding-left:0 }
.prose .key-points li::before{ content:none }

/* Callouts: Tip / Nota / Advertencia */
.callout{ display:flex; gap:15px; margin:28px 0; padding:20px 22px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--bg-soft); font-size:15.5px; line-height:1.55 }
.callout__icon{ display:grid; place-items:center; width:38px; height:38px; border-radius:var(--r-pill);
  flex:none; color:#fff; box-shadow:var(--shadow-sm) }
.callout__icon svg{ width:20px; height:20px }
.callout__body{ min-width:0 }
.callout__body p{ margin:0 }
.callout__body p + p{ margin-top:8px }
.callout__label{ display:block; font-family:var(--ff-head); font-weight:700; font-size:14px; color:var(--ink); margin-bottom:3px }
.callout--tip{ background:#F0F7E9; border-color:rgba(140,198,63,.32) }
.callout--tip .callout__icon{ background:var(--green-d) }
.callout--note{ background:#EAF4FB; border-color:rgba(28,157,215,.28) }
.callout--note .callout__icon{ background:var(--blue-d) }
.callout--warn{ background:#FBF1EC; border-color:rgba(194,85,75,.3) }
.callout--warn .callout__icon{ background:#C2554B }

/* CTA WhatsApp inline */
.cta-wa{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin:30px 0; padding:24px 28px; border-radius:var(--r-lg); background:var(--grad-soft);
  border:1px solid rgba(28,157,215,.20) }
.cta-wa__t{ min-width:0 }
.cta-wa__t h4{ font-size:20px; margin:0 }
.cta-wa__t p{ margin:6px 0 0; font-size:15px; color:var(--ink-3) }
.cta-wa .btn{ flex:none }

/* CTA enlace a servicio */
.cta-service{ display:flex; align-items:center; gap:18px; margin:30px 0; padding:20px 24px;
  border-radius:var(--r-lg); background:var(--bg-soft); border:1px solid var(--line) }
.cta-service__icon{ display:grid; place-items:center; width:46px; height:46px; border-radius:var(--r-md);
  background:var(--grad); color:#fff; flex:none; box-shadow:var(--shadow-brand) }
.cta-service__icon svg{ width:24px; height:24px }
.cta-service__b{ flex:1; min-width:0 }
.cta-service__b span{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-d) }
.cta-service__b h4{ font-size:18px; margin:3px 0 2px }
.cta-service__b p{ margin:0; font-size:14.5px; color:var(--ink-3) }
.cta-service__arrow{ display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); color:var(--ink-2); flex:none; background:var(--bg);
  transition:color .16s ease, border-color .16s ease, background-color .16s ease }
.cta-service__arrow svg{ width:20px; height:20px }
.cta-service__arrow:hover{ color:#fff; background:var(--grad); border-color:transparent }

/* Tabla comparativa */
.table-wrap{ margin:28px 0; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md) }
.t.cmp{ width:100%; border-collapse:collapse; font-size:15px; min-width:520px }
.t.cmp caption{ caption-side:bottom; text-align:left; font-size:13px; color:var(--muted); padding:11px 16px }
.t.cmp th, .t.cmp td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle }
.t.cmp thead th{ font-family:var(--ff-head); font-weight:700; color:var(--ink); background:var(--bg-soft);
  font-size:12.5px; text-transform:uppercase; letter-spacing:.04em }
.t.cmp tbody tr:last-child td{ border-bottom:none }
.t.cmp tbody tr:hover{ background:var(--bg-soft) }
.t .yes{ display:inline-flex; align-items:center; gap:6px; color:var(--green-d); font-weight:700 }
.t .yes svg{ width:17px; height:17px }
.t .no{ color:var(--muted) }

/* Pull quote */
.pullquote{ margin:38px 0; padding:8px 0; text-align:center }
.pullquote p{ font-family:var(--ff-head); font-weight:700; font-size:clamp(22px,3vw,30px); line-height:1.28;
  letter-spacing:-.02em; color:var(--ink); margin:0; text-wrap:balance }
.pullquote p .grad-text{ font-weight:700 }
.pullquote::before{ content:""; display:block; width:48px; height:4px; margin:0 auto 22px;
  border-radius:var(--r-pill); background:var(--grad) }

/* Mini-caso de éxito */
.case{ display:grid; grid-template-columns:auto 1fr; column-gap:26px; row-gap:2px; align-items:start;
  margin:34px 0; padding:26px 30px; border-radius:var(--r-lg); background:var(--bg);
  border:1px solid var(--line); box-shadow:var(--shadow-sm) }
.case__stat{ grid-row:1 / -1; align-self:center; text-align:center; padding-right:26px;
  border-right:1px solid var(--line-2) }
.case__num{ display:block; font-family:var(--ff-head); font-weight:700; font-size:clamp(34px,5vw,46px); line-height:1 }
.case__numlabel{ display:block; font-size:12px; color:var(--muted); margin-top:4px;
  text-transform:uppercase; letter-spacing:.06em }
.case__eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-d) }
.case .case__title{ font-size:20px; margin:4px 0 0 }
.case__text{ margin:8px 0 0; font-size:15px; color:var(--ink-3) }
.case__link{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-weight:600;
  font-size:14.5px; color:var(--blue-d) }
.case__link svg{ width:16px; height:16px; transition:transform .18s ease }
.case__link:hover svg{ transform:translateX(3px) }
.prose .case .case__text{ margin:8px 0 0 }

/* Lead magnet / newsletter inline */
.lead-magnet{ margin:38px 0; padding:30px 32px; border-radius:var(--r-lg); background:var(--bg);
  border:1px dashed var(--line-2); position:relative; overflow:hidden }
.lead-magnet__inner{ position:relative; display:grid; grid-template-columns:1fr auto; gap:20px 32px; align-items:center }
.lead-magnet h4{ font-size:21px; margin:8px 0 0 }
.lead-magnet p{ margin:8px 0 0; font-size:15px; color:var(--ink-3); max-width:46ch }
.lead-magnet form{ display:flex; gap:10px; flex-wrap:wrap }
.lead-magnet input{ flex:1; min-width:200px; min-height:50px; padding:0 18px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--bg-soft); font-family:var(--ff-body); font-size:15.5px; color:var(--ink) }
.lead-magnet input:focus{ outline:none; border-color:var(--blue); background:var(--bg) }
.lead-magnet .btn{ min-height:50px }

/* === RESPONSIVE 4B ===================================================== */
@media (max-width:768px){
  .lead-magnet__inner{ grid-template-columns:1fr }
  .case{ grid-template-columns:1fr }
  .case__stat{ grid-row:auto; text-align:left; padding:0 0 16px; border-right:none;
    border-bottom:1px solid var(--line-2); margin-bottom:4px }
  .cta-wa{ flex-direction:column; align-items:flex-start }
  .cta-wa .btn{ width:100% }
}