/* CSS complementario del post. Los estilos base se cargan desde /demo/components/c.css */
body[data-page-slug="cuando-se-genera-utilidad"] .post{
  font-family: "Century Gothic", "Quicksand", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

body[data-page-slug="cuando-se-genera-utilidad"] .utilidad-post .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
  padding:7px 12px;
  border:1px solid color-mix(in oklab, var(--teal-lake), white 72%);
  border-radius:999px;
  background:color-mix(in oklab, var(--teal-lake), white 92%);
  color:var(--atlantic);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.02em;
}

body[data-page-slug="cuando-se-genera-utilidad"] .post-hd h1{
  max-width:820px;
  line-height:1.04;
}

body[data-page-slug="cuando-se-genera-utilidad"] .post-body{
  font-size:1.03rem;
  line-height:1.78;
}

body[data-page-slug="cuando-se-genera-utilidad"] .post-body p{
  margin:0 0 18px;
}

body[data-page-slug="cuando-se-genera-utilidad"] .post-body h2{
  margin-top:42px;
  margin-bottom:14px;
  line-height:1.15;
}

body[data-page-slug="cuando-se-genera-utilidad"] .quote-line{
  margin:26px 0 !important;
  padding:20px 24px;
  border-left:5px solid var(--teal-lake);
  border-radius:0 var(--radius) var(--radius) 0;
  background:linear-gradient(90deg, rgba(44,156,166,.12), rgba(44,156,166,.03));
  color:var(--prussian);
  font-size:1.25rem;
  font-weight:700;
  line-height:1.35;
}

body[data-page-slug="cuando-se-genera-utilidad"] .utilidad-punch{
  font-size:1.02rem;
}

body[data-page-slug="cuando-se-genera-utilidad"] .utilidad-box{
  border-left:5px solid var(--teal-lake);
}

body[data-page-slug="cuando-se-genera-utilidad"] .metric-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin:24px 0 26px;
}

body[data-page-slug="cuando-se-genera-utilidad"] .metric-strip div{
  min-height:112px;
  padding:18px;
  border:1px solid var(--platinum);
  border-radius:var(--radius);
  background:var(--paper);
  box-shadow:0 10px 26px rgba(16,32,50,.08);
}

body[data-page-slug="cuando-se-genera-utilidad"] .metric-strip span{
  display:block;
  margin-bottom:8px;
  color:var(--teal-lake);
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
}

body[data-page-slug="cuando-se-genera-utilidad"] .metric-strip strong{
  display:block;
  color:var(--prussian);
  font-size:1.15rem;
  line-height:1.25;
}

body[data-page-slug="cuando-se-genera-utilidad"] .utilidad-table .tbl{
  min-width:720px;
}

body[data-page-slug="cuando-se-genera-utilidad"] .post-cta{
  margin-top:42px;
}

@media (max-width: 760px){
  body[data-page-slug="cuando-se-genera-utilidad"] .metric-strip{
    grid-template-columns:1fr;
  }

  body[data-page-slug="cuando-se-genera-utilidad"] .quote-line{
    font-size:1.1rem;
    padding:18px;
  }
}
#B{
  padding-top: 90px;
}