/* daezpro.com — 11-service-case-refs-hub.css
   Plantilla de servicio: nota de metodo, evidencia (.case-*), referencias (.refs-*), relacionados (.rel-*), hub de servicios (.hub-*) + su responsive. */

/* -------------------------------------------------------------- MÉTODO */
.method-note{ margin-top:18px; font-size:var(--fs-sm); color:var(--text-body); }
.method-note a{ color:var(--accent-strong); font-weight:600; }
.method-note a:hover{ text-decoration:underline; }

/* -------------------------------------------------------------- EVIDENCIA */
.case-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,2.2vw,26px);
  margin-top:clamp(36px,4vw,52px);
}
.case-card{ padding:clamp(24px,2.4vw,30px); position:relative; }
.case-card__num{
  display:inline-flex; align-items:center; justify-content:center;
  padding:5px 12px;
  border-radius:var(--r-pill);
  background:var(--text-strong);
  color:var(--text-invert);
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-h3);
  letter-spacing:-0.02em;
  margin-bottom:16px;
}
.case-card__sector{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-body);
  margin-bottom:14px;
}
.case-card dl{ display:grid; gap:12px; }
.case-card dt{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent-strong);
  margin-bottom:3px;
}
.case-card dd{ font-size:var(--fs-body); line-height:1.5; color:var(--text-body); margin:0; }

/* --------------------------------------------------- REFERENCIAS/ESTÁNDARES */
.refs{ margin-top:clamp(28px,3vw,40px); }
.refs-list{ display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.refs-item{
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:16px 22px;
  background:var(--surface);
}
.refs-item__id{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--accent-strong);
  min-width:11ch;
}
.refs-item__txt{ font-size:var(--fs-body); line-height:1.5; color:var(--text-body); }
.refs-item__txt a{ color:var(--text-strong); font-weight:600; }
.refs-item__txt a:hover{ color:var(--accent-strong); text-decoration:underline; }

/* --------------------------------------------------------------- RELATED */
.rel-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,24px);
  margin-top:clamp(36px,4vw,52px);
}
.rel-card{ padding:clamp(22px,2.2vw,26px); display:flex; flex-direction:column; }
.rel-card__k{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-strong);
  margin-bottom:10px;
}
.rel-card__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-h3);
  letter-spacing:-0.01em;
  color:var(--text-strong);
  margin-bottom:8px;
}
.rel-card__desc{ font-size:var(--fs-sm); line-height:1.5; color:var(--text-body); margin-bottom:16px; }
.rel-card__more{ margin-top:auto; font-weight:600; font-size:var(--fs-sm); color:var(--accent-strong); }
.rel-card:hover .rel-card__more{ text-decoration:underline; }

/* --------------------------------------------------------- HUB DE SERVICIOS */
.hub-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,2.2vw,28px);
  margin-top:clamp(40px,4vw,56px);
}
.hub-card{
  display:flex;
  flex-direction:column;
  padding:clamp(26px,2.6vw,34px);
  color:inherit;
}
.hub-card__no{
  font-family:var(--font-mono);
  font-size:var(--fs-sm);
  font-weight:500;
  letter-spacing:.1em;
  color:var(--text-body);
  margin-bottom:20px;
}
.hub-card__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-h2);
  letter-spacing:-0.02em;
  line-height:1.15;
  color:var(--text-strong);
  margin-bottom:12px;
}
.hub-card__desc{ font-size:var(--fs-title); line-height:1.55; color:var(--text-body); margin-bottom:20px; }
.hub-card__more{ margin-top:auto; font-weight:600; font-size:var(--fs-body); color:var(--accent-strong); }
.hub-card:hover .hub-card__more{ transform:translateY(2px); }
.hub-card--soon{ opacity:.6; cursor:default; pointer-events:none; }
.hub-card--soon .hub-card__more{ color:var(--text-body); }

/* ------------------------------------------------ RESPONSIVE · SERVICIO */
@media (max-width:900px){
  .svc-hero__grid{ grid-template-columns:1fr; }
  .audience{ grid-template-columns:1fr; }
  .deliver-grid{ grid-template-columns:1fr 1fr; }
  .case-grid{ grid-template-columns:1fr; }
  .rel-grid{ grid-template-columns:1fr; }
  .cmp__grid{ grid-template-columns:1fr; }
  .cmp__inputs{ border-right:0; border-bottom:1px solid var(--border); }
  .hub-grid{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .deliver-grid{ grid-template-columns:1fr; }
  .cmp-chart{ height:120px; }

  /* El identificador de norma (min-width:11ch) más el texto no caben en una
     fila estrecha: se apilan en lugar de desbordar el contenedor. */
  .refs-item{ flex-direction:column; align-items:flex-start; gap:6px; padding:14px 18px; }
  .refs-item__id{ min-width:0; }
}