/* blog.css — Estilos del blog (Cali Caps) */

/* Hero */
.blog-hero {
  background: linear-gradient(135deg, #0a2540 0%, #0d3260 100%);
  color: #fff;
  padding: 120px 0 80px;
  text-align: center;
}
.blog-hero .section-tag {
  display: inline-block;
  background: rgba(106,191,46,.18);
  color: #6abf2e;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.blog-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.blog-hero p {
  font-size: 1.1rem;
  color: #cbd5e1;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Listado */
.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
  padding: 60px 0;
}
.blog-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(10,37,64,.12);
}
.blog-card-image {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #f1f5f9;
}
.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.blog-card:hover .blog-card-image img { transform: scale(1.04); }

.blog-card-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.blog-card-date {
  font-size: .75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.blog-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0a2540;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.blog-card-excerpt {
  font-size: .92rem;
  color: #64748b;
  line-height: 1.6;
  flex: 1;
}
.blog-card-link {
  font-size: .85rem;
  color: #6abf2e;
  font-weight: 700;
  margin-top: 4px;
}
.art-form-email-status {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: .78rem;
  line-height: 1.5;
}

.blog-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 80px 20px;
  color: #94a3b8;
  font-size: .95rem;
}

.blog-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 20px 60px;
}
.blog-pagination[hidden] { display: none; }
.blog-pagination button {
  min-width: 40px;
  height: 40px;
  border: 1px solid #d7e2dc;
  border-radius: 999px;
  background: #fff;
  color: #0a2540;
  font: 700 .84rem "Plus Jakarta Sans", sans-serif;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.blog-pagination button:hover,
.blog-pagination button:focus-visible { border-color: #6abf2e; }
.blog-pagination button[aria-current="page"] { background: #4e9e1a; border-color: #4e9e1a; color: #fff; }

/* Single post */
.blog-post {
  padding: 100px 20px 80px;
  background: #fff;
}
.blog-post-inner {
  max-width: 760px;
  margin: 0 auto;
}
.blog-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: #64748b;
  margin-bottom: 32px;
}
.blog-breadcrumb a { color: #64748b; text-decoration: none; }
.blog-breadcrumb a:hover { color: #0a2540; }
.blog-breadcrumb span:not(:has(a)) { color: #94a3b8; }

.blog-post-head { margin-bottom: 36px; }
.blog-post-date {
  font-size: .78rem;
  color: #6abf2e;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  margin-bottom: 14px;
  display: block;
}
.blog-post-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #0a2540;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: 16px;
  text-wrap: pretty;
}
.blog-post-excerpt {
  font-size: 1.15rem;
  color: #64748b;
  line-height: 1.55;
  text-wrap: pretty;
}

.blog-post-cover {
  margin: 0 -20px 48px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #f1f5f9;
}
.blog-post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post-body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #334155;
}
.blog-post-body h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0a2540;
  margin: 48px 0 16px;
  letter-spacing: -.01em;
}
.blog-post-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0a2540;
  margin: 36px 0 12px;
}
.blog-post-body p { margin-bottom: 20px; }
.blog-post-body a { color: #6abf2e; text-decoration: underline; text-underline-offset: 3px; }
.blog-post-body a:hover { color: #4e9e1a; }
.blog-post-body strong { color: #0a2540; }
.blog-post-body blockquote {
  margin: 32px 0;
  padding: 20px 24px;
  border-left: 4px solid #6abf2e;
  background: #f8fafc;
  border-radius: 0 10px 10px 0;
  font-style: italic;
  color: #475569;
}
.blog-post-body ul, .blog-post-body ol {
  margin: 20px 0 20px 24px;
}
.blog-post-body li { margin-bottom: 8px; }
/* Viñeta cápsula (mismo marcador que .tech-list de la home) para ul simples */
.blog-post-body ul:not(.art-compare ul) {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.blog-post-body ul:not(.art-compare ul) > li {
  position: relative;
  padding-left: 1.35rem;
}
.blog-post-body ul:not(.art-compare ul) > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(106,191,46,.42);
  background: radial-gradient(circle at center, var(--green, #6abf2e) 0 2.2px, transparent 2.35px);
  box-sizing: border-box;
}

.blog-post-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 60px;
  padding-top: 32px;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .blog-post { padding: 110px 16px 60px; }
  .blog-post-cover { margin-left: -16px; margin-right: -16px; border-radius: 0; }
  .blog-hero { padding: 90px 0 60px; }
}

/* ──────────────────────────────────────────────
   CTA de cierre — responsivo, acotado al blog
   Selector .blog-post para no afectar formularios
   de otras secciones del sitio.
────────────────────────────────────────────── */
.blog-post .art-cta {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}
/* Escritorio: la tarjeta queda centrada y estilizada;
   el formulario mantiene 2 columnas dentro del ancho controlado. */
.blog-post .art-form {
  grid-template-columns: 1fr 1fr;
}
/* Móvil / tablet angosta: una sola columna apilada. */
@media (max-width: 620px) {
  .blog-post .art-form { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════
   LIBRERÍA DE BLOQUES DEL ARTÍCULO (.art-* / .vol-*)
   Movida aquí desde los <style> inline de cada artículo para
   que SOBREVIVA a la navegación SPA: spa-nav.js solo reconcilia
   los <link> de estilos, no los bloques <style> del <head>.
   Al vivir en esta hoja enlazada, los componentes conservan su
   estilo tanto en carga directa como en navegación in-place.
════════════════════════════════════════════════════════ */

/* — Cabecera de meta del post — */
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:18px;}
.art-cat{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);background:#e0eaf5;padding:5px 13px;border-radius:100px;}
.art-cat svg{width:13px;height:13px;}
.art-readtime{font-size:.78rem;color:var(--gray400);font-weight:600;}
.art-dot{width:3px;height:3px;border-radius:50%;background:var(--gray300);}

/* — Placeholder de apoyo visual (rayado + etiqueta monoespaciada) — */
.art-figure{margin:44px 0;}
.art-ph{position:relative;border-radius:14px;border:1px dashed var(--gray300);background-color:var(--gray50);background-image:repeating-linear-gradient(45deg,rgba(10,37,64,.045) 0 12px,transparent 12px 24px);display:flex;align-items:center;justify-content:center;text-align:center;min-height:300px;padding:32px;}
.art-ph.tall{min-height:420px;}
.art-ph.short{min-height:200px;}
.art-ph code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;color:var(--gray600);letter-spacing:.01em;line-height:1.5;background:#fff;border:1px solid var(--gray200);border-radius:8px;padding:11px 17px;box-shadow:var(--shadow-sm);max-width:90%;}
.art-figure figcaption{margin-top:13px;font-size:.8rem;color:var(--gray400);text-align:center;line-height:1.5;}

/* — Caja "En resumen" (TL;DR) — */
.art-tldr{background:var(--gray50);border:1px solid var(--gray200);border-radius:16px;padding:28px 32px;margin:4px 0 44px;}
.art-tldr h4{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green2);margin-bottom:14px;}
.art-tldr ul{margin:0;padding-left:0;list-style:none;}
.art-tldr li{font-size:1rem;color:var(--gray700);line-height:1.6;margin-bottom:9px;position:relative;padding-left:1.35rem;}
.art-tldr li::before{
  content:'';position:absolute;left:0;top:.5em;
  width:10px;height:10px;border-radius:50%;
  border:1.5px solid rgba(106,191,46,.42);
  background:radial-gradient(circle at center,var(--green,#6abf2e) 0 2.2px,transparent 2.35px);
  box-sizing:border-box;
}
.art-tldr li:last-child{margin-bottom:0;}

/* — Callout — */
.art-callout{border-left:4px solid var(--green);background:#f4faef;border-radius:0 12px 12px 0;padding:22px 26px;margin:36px 0;}
.art-callout h4{display:flex;align-items:center;gap:.5rem;font-size:.95rem;font-weight:700;color:var(--navy);margin:0 0 8px;}
.art-callout h4 svg{width:18px;height:18px;color:var(--green2);flex-shrink:0;}
.art-callout p{font-size:.95rem;color:var(--gray600);line-height:1.65;margin:0;}

/* — Bloque comparativo (Con / Sin) — */
.art-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:40px 0;}
.art-compare .col{border-radius:16px;padding:26px;border:1px solid var(--gray200);background:#fff;}
.art-compare .col.bad{background:#fdf4f3;border-color:#f1d8d3;}
.art-compare .col.good{background:#f4faef;border-color:#dcedcb;}
.art-compare .col-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;border-radius:100px;margin-bottom:14px;}
.art-compare .bad .col-tag{background:#f7ddd8;color:#a8362a;}
.art-compare .good .col-tag{background:#e3f3d4;color:var(--green2);}
.art-compare h5{font-size:1.05rem;font-weight:700;color:var(--navy);margin:0 0 12px;}
.art-compare ul{list-style:none;margin:0;padding:0;}
.art-compare li{position:relative;font-size:.92rem;color:var(--gray600);line-height:1.55;padding-left:22px;margin-bottom:10px;}
.art-compare li::before{position:absolute;left:0;top:0;font-weight:700;}
.art-compare .bad li::before{content:'✕';color:#c2493b;}
.art-compare .good li::before{content:'✓';color:var(--green2);}

/* — Dato destacado / pull-stat — */
.art-stat{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:24px;background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);color:#fff;border-radius:18px;padding:32px 36px;margin:44px 0;}
.art-stat .num{font-size:clamp(2.4rem,5vw,3.4rem);font-weight:800;line-height:1;color:var(--green);letter-spacing:-.02em;}
.art-stat .txt{font-size:1rem;line-height:1.55;color:rgba(255,255,255,.85);}

/* — Separador interno — */
.art-rule{height:1px;background:var(--gray200);border:0;margin:48px 0;}

/* — Fuentes / referencias — */
.art-refs{background:var(--gray50);border-radius:14px;padding:22px 26px;margin:40px 0 0;}
.art-refs h4{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray500);margin-bottom:10px;}
.art-refs ol{margin:0;padding-left:20px;}
.art-refs li{font-size:.84rem;color:var(--gray500);line-height:1.55;margin-bottom:6px;}

/* ── Explorador de capacidad volumétrica ── */
.vol-explorer{border:1px solid var(--gray200);border-radius:20px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden;margin:40px 0;}
.vol-head{padding:26px 28px 22px;border-bottom:1px solid var(--gray200);background:var(--gray50);}
.vol-head .kicker{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green2);margin-bottom:6px;}
.vol-head h4{font-size:1.2rem;font-weight:800;color:var(--navy);letter-spacing:-.01em;margin:0;}
.vol-head p{font-size:.88rem;color:var(--gray500);line-height:1.55;margin:6px 0 0;}
.vol-control{padding:22px 28px;display:flex;flex-direction:column;gap:12px;background:#fff;}
.vol-control-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.vol-control label{font-size:.8rem;font-weight:700;color:var(--navy);letter-spacing:.01em;}
.vol-control .hint{font-size:.76rem;color:var(--gray400);font-weight:500;}
.vol-readout{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.05rem;font-weight:700;color:var(--green2);background:#f4faef;border:1px solid #dcedcb;border-radius:8px;padding:4px 12px;white-space:nowrap;}
.vol-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:100px;background:linear-gradient(to right,var(--green) 0%,var(--green) 33%,var(--gray200) 33%,var(--gray200) 100%);outline:none;}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--green);box-shadow:0 2px 8px rgba(10,37,64,.25);cursor:pointer;transition:transform .15s ease;}
.vol-slider::-webkit-slider-thumb:hover{transform:scale(1.12);}
.vol-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--green);box-shadow:0 2px 8px rgba(10,37,64,.25);cursor:pointer;}
.vol-scale{display:flex;justify-content:space-between;font-size:.7rem;color:var(--gray400);font-weight:600;}
.vol-table{width:100%;border-collapse:collapse;font-size:.92rem;}
.vol-table thead th{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray500);text-align:left;padding:14px 28px;border-top:1px solid var(--gray200);background:var(--gray50);}
.vol-table thead th.num{text-align:right;}
.vol-table tbody td{padding:14px 28px;border-top:1px solid var(--gray100);color:var(--gray700);vertical-align:middle;}
.vol-table tbody tr{transition:background .15s ease;}
.vol-table tbody tr:hover{background:#f4faef;}
.vol-size{font-weight:800;color:var(--navy);font-size:1.05rem;}
.vol-num{text-align:right;font-variant-numeric:tabular-nums;}
.vol-mg{font-weight:700;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums;}
.vol-bar-cell{width:34%;}
.vol-bar-track{height:9px;border-radius:100px;background:var(--gray100);overflow:hidden;}
.vol-bar-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--navy),var(--green));}
.vol-foot{padding:14px 28px;border-top:1px solid var(--gray200);background:var(--gray50);font-size:.76rem;color:var(--gray400);line-height:1.5;}

/* — CTA de micro-conversión (formulario contextual) — */
.art-cta{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);border-radius:22px;padding:clamp(28px,5vw,48px);margin:64px 0 0;color:#fff;}
.art-cta .eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:12px;}
.art-cta h3{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;line-height:1.2;letter-spacing:-.01em;margin:0 0 10px;text-wrap:pretty;}
.art-cta .lead{font-size:1.02rem;color:rgba(255,255,255,.78);line-height:1.6;max-width:560px;margin:0;}
.art-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px;}
.art-field{display:flex;flex-direction:column;gap:7px;}
.art-field.full{grid-column:1/-1;}
.art-field label{font-size:.78rem;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.7);}
.art-field input,.art-field select,.art-field textarea{font-family:inherit;font-size:.95rem;color:var(--navy);background:#fff;border:1px solid transparent;border-radius:10px;padding:13px 15px;width:100%;transition:box-shadow .2s ease,border-color .2s ease;}
.art-field textarea{resize:vertical;min-height:92px;}
.art-field input::placeholder,.art-field textarea::placeholder{color:var(--gray400);}
.art-field input:focus,.art-field select:focus,.art-field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(106,191,46,.3);}
.art-form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:6px;}
.art-form-foot .privacy{font-size:.78rem;color:rgba(255,255,255,.55);line-height:1.5;max-width:380px;}
.art-form-foot .privacy a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:2px;}
.art-cta .btn-primary{padding:14px 32px;font-size:.85rem;}

@media (max-width:620px){
  .art-compare{grid-template-columns:1fr;}
  .art-stat{grid-template-columns:1fr;text-align:left;gap:12px;padding:26px;}
  .art-form{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .vol-table thead th,.vol-table tbody td{padding:12px 16px;}
  .vol-bar-cell{display:none;}
  .vol-head,.vol-control,.vol-foot{padding-left:18px;padding-right:18px;}
}