/* article.css — individual blog post template. Needs site.css + blog.css. */

/* reading progress bar — fixed under the sticky header */
.cw-progress{ position:fixed; top:0; left:0; right:0; height:4px; z-index:60;
  background:transparent; pointer-events:none; }
.cw-progress__bar{ height:100%; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--brand-orange), var(--brand-coral));
  box-shadow:0 1px 6px rgba(240,129,6,.45); transition:transform .08s linear; }
@media (prefers-reduced-motion:reduce){ .cw-progress__bar{ transition:none; } }

.cw-art__hero{ padding:clamp(2rem,5vw,3.6rem) 0 1.6rem; position:relative; }
.cw-art__hero::before{ content:""; position:absolute; inset:0 0 auto 0; height:100%;
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 12%, white), transparent 70%); z-index:0; }
.cw-art__hero > .cw-container{ position:relative; z-index:1; }
.cw-art__crumbs{ display:flex; gap:.5rem; font-size:.84rem; color:var(--fg-subtle); margin-bottom:1.1rem; }
.cw-art__crumbs a{ color:var(--fg-muted); text-decoration:none; }
.cw-art__crumbs a:hover{ color:var(--brand-orange); }
.cw-art__title{ font-size:clamp(2rem, 1.4rem + 2.8vw, 3.2rem); line-height:1.1; letter-spacing:-.02em;
  margin:.9rem 0 .9rem; text-wrap:balance; }
.cw-art__dek{ font-size:var(--text-xl); line-height:1.5; color:var(--fg-muted); font-weight:300; max-width:60ch; }
.cw-art__meta{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-top:1.4rem;
  font-size:.86rem; color:var(--fg-subtle); }
.cw-art__rating{ margin-left:auto; }

.cw-art__cover{ margin:0 0 2.4rem; }
.cw-art__coverimg{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); display:block; }
.cw-art__cover .cw-photo__ph{ width:100%; background:radial-gradient(circle at 50% 38%, var(--green-50), var(--gray-100));
  border:1px solid var(--border); display:grid; place-items:center; gap:.5rem; align-content:center; color:var(--gray-400); }
.cw-art__cover .cw-photo__ph img{ opacity:.5; }
.cw-art__cover .cw-photo__ph span{ font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }

/* reading column */
.cw-art__body{ font-size:1.075rem; line-height:1.75; color:var(--ink-800); }
.cw-art__body > p{ margin:0 0 1.3rem; color:var(--ink-800); }
.cw-art__body .lead{ font-size:var(--text-xl); color:var(--fg-muted); font-weight:300; }
.cw-art__h2{ font-size:clamp(1.5rem,1.2rem+1.2vw,2rem); line-height:1.2; margin:2.4rem 0 1rem; letter-spacing:-.01em; }
.cw-art__h3{ font-size:1.3rem; margin:1.8rem 0 .7rem; }
.cw-art__list{ margin:0 0 1.3rem; padding-left:1.3rem; display:flex; flex-direction:column; gap:.55rem; }
.cw-art__list li{ line-height:1.65; }
.cw-art__list--num{ list-style:decimal; }
.cw-art__quote{ margin:1.8rem 0; padding:1rem 0 1rem 1.5rem; border-left:4px solid var(--brand-orange);
  font-size:1.25rem; line-height:1.5; font-style:italic; color:var(--ink-900); }
.cw-art__figure{ margin:1.8rem 0; }
.cw-art__inlineimg{ width:100%; height:auto; border-radius:var(--radius-md); border:1px solid var(--border);
  box-shadow:var(--shadow-sm); display:block; }
.cw-art__figure .cw-photo__ph{ width:100%; background:radial-gradient(circle at 50% 40%, var(--green-50), var(--gray-100));
  border:1px solid var(--border); display:grid; place-items:center; gap:.4rem; align-content:center; color:var(--gray-400); }
.cw-art__figure .cw-photo__ph img{ opacity:.5; }
.cw-art__figure .cw-photo__ph span{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.cw-art__figure figcaption{ margin-top:.6rem; font-size:.84rem; font-style:italic; color:var(--fg-subtle); text-align:center; }
.cw-art__callout{ display:flex; gap:.9rem; align-items:flex-start; background:var(--bg-mint); border:1px solid var(--green-200);
  border-radius:var(--radius-md); padding:1.1rem 1.3rem; margin:1.8rem 0; font-size:.98rem; line-height:1.6; color:var(--green-800); }
.cw-art__callout svg{ color:var(--brand-green); flex:none; margin-top:.15rem; }
.cw-art__callout--pending{ background:var(--orange-50); border-color:var(--orange-200); color:var(--orange-800); }
.cw-art__callout--pending svg{ color:var(--brand-orange); }
.cw-art__tablewrap{ overflow-x:auto; margin:1.8rem 0; border:1px solid var(--border); border-radius:var(--radius-md); }
.cw-art__table{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:480px; }
.cw-art__table th{ background:var(--ink-900); color:#fff; font-weight:700; text-align:left; padding:.6rem .8rem; white-space:nowrap; }
.cw-art__table td{ padding:.55rem .8rem; border-top:1px solid var(--border); color:var(--ink-800); }
.cw-art__table tbody tr:nth-child(even){ background:var(--gray-50); }
.cw-art__table th:first-child, .cw-art__table td:first-child{ font-weight:600; }

/* author box */
.cw-art__authorbox{ display:flex; gap:1.2rem; align-items:flex-start; margin:3rem 0 1rem; padding:1.6rem;
  background:var(--gray-50); border:1px solid var(--border); border-radius:var(--radius-lg); }
.cw-art__authorbox img{ border-radius:50%; flex:none; background:var(--white); border:1px solid var(--border); }
.cw-art__authorbox h3{ margin:.2rem 0 .5rem; }
.cw-art__authorbox p{ font-size:.95rem; color:var(--fg-muted); margin:0 0 .7rem; }

@media (max-width:560px){
  .cw-art__meta{ gap:.5rem; }
  .cw-art__rating{ margin-left:0; width:100%; }
  .cw-art__authorbox{ flex-direction:column; gap:.8rem; }
}

/* CTA final del post (banda de marca) + enlace contextual a la página de servicio */
.cw-ctaband{ background:linear-gradient(100deg, var(--brand-orange), var(--coral-500)); }
.cw-ctaband__inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.1rem; }
.cw-ctaband h2{ color:#fff; max-width:24ch; }
.cw-ctaband__text{ color:#fff; max-width:46ch; margin:0; font-size:1.05rem; line-height:1.5; }
.cw-ctaband__text a{ color:#fff; text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.cw-ctaband .btn{ background:#fff; color:var(--orange-700); }
.cw-ctaband .btn:hover{ background:var(--ink-900); color:#fff; }