/* ==========================================================================
   TOPS SAFETY CONTROL — Policies Stylesheet
   Extiende mains.css (tokens, .service-hero, .svc-breadcrumb, .btn-tops,
   .container-tops, .section-pad, .eyebrow, .section-title, .cert-row,
   .qhse-banner, .cta-band, .reveal, .cut-tl/.cut-both siguen viviendo ahí).
   Este archivo SOLO define lo específico de las páginas de política:
   statement, pillars (compromisos), signature block y el mini index lateral.
   ========================================================================== */

/* ------------------------------ Policy intro ------------------------------ */
.policy-statement {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 34px;
  align-items: flex-start;
  padding: 48px 50px;
  background: var(--c-white);
  border: 1px solid var(--c-line-light);
  border-left: 4px solid var(--c-red);
}
.policy-statement-mark {
  width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-off-white);
  flex: none;
}
.policy-statement-mark i { font-size: 1.9rem; color: var(--c-red); }
.policy-statement-copy p {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.5;
  color: var(--c-ink);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}
.policy-statement-copy p strong { color: var(--c-red); font-weight: 600; }
.policy-statement-meta {
  display: flex; flex-wrap: wrap; gap: 22px;
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--c-line-light);
}
.policy-statement-meta div { display: flex; flex-direction: column; gap: 4px; }
.policy-statement-meta span.k {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c-steel);
}
.policy-statement-meta span.v {
  font-family: var(--f-mono); font-size: 0.86rem; color: var(--c-ink);
}
@media (max-width: 640px) {
  .policy-statement { grid-template-columns: 1fr; padding: 34px 26px; }
}

/* ------------------------------ Policy pillars ----------------------------- */
.policy-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--c-line-light);
  border: 1px solid var(--c-line-light);
}
.policy-pillar {
  position: relative;
  background: var(--c-white);
  padding: 40px 34px 34px;
  overflow: hidden;
  transition: background 0.35s var(--ease-soft), transform 0.35s var(--ease-out);
}
.policy-pillar::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--c-red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--ease-out);
}
.policy-pillar:hover { transform: translateY(-4px); }
.policy-pillar:hover::before { transform: scaleY(1); }
.policy-pillar-num {
  position: absolute;
  top: 6px; right: 18px;
  font-family: var(--f-display);
  font-size: 3.6rem;
  font-weight: 600;
  color: var(--c-off-white);
  -webkit-text-stroke: 1px var(--c-line-light);
  line-height: 1;
  z-index: 0;
  transition: color 0.35s ease;
}
.policy-pillar:hover .policy-pillar-num { color: rgba(224, 17, 26, 0.08); }
.policy-pillar-icon {
  position: relative; z-index: 1;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-off-white);
  margin-bottom: 22px;
}
.policy-pillar-icon i { color: var(--c-red); font-size: 1.15rem; }
.policy-pillar h4 {
  position: relative; z-index: 1;
  font-size: 1rem; color: var(--c-ink); margin-bottom: 12px;
  letter-spacing: 0.01em; line-height: 1.3;
}
.policy-pillar p {
  position: relative; z-index: 1;
  color: var(--c-steel); font-size: 0.87rem; line-height: 1.68; margin: 0;
}
@media (max-width: 767px) {
  .policy-pillars { grid-template-columns: 1fr; }
}

/* ------------------------------ Policy signature ---------------------------- */
.policy-signature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
  padding: 44px 50px;
  background: var(--c-black);
  color: var(--c-white);
}
.policy-signature-seal {
  width: 92px; height: 92px; flex: none;
  border: 1.5px solid var(--c-red);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.policy-signature-seal::after {
  content: '';
  position: absolute; inset: 8px;
  border: 1px dashed rgba(224, 17, 26, 0.5);
  border-radius: 50%;
}
.policy-signature-seal i { color: var(--c-red); font-size: 1.6rem; }
.policy-signature-body p {
  color: var(--c-steel-light); font-size: 0.92rem; line-height: 1.75;
  max-width: 640px; margin: 0 0 20px;
}
.policy-signature-name {
  font-family: var(--f-display); font-size: 1.05rem; letter-spacing: 0.03em;
  color: var(--c-white); text-transform: uppercase;
}
.policy-signature-role {
  font-family: var(--f-mono); font-size: 0.76rem; color: var(--c-red);
  text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px;
}
.policy-signature-date {
  font-family: var(--f-mono); font-size: 0.74rem; color: var(--c-steel);
  margin-top: 12px;
}
@media (max-width: 640px) {
  .policy-signature { grid-template-columns: 1fr; text-align: center; padding: 40px 28px; }
  .policy-signature-seal { margin: 0 auto; }
}

/* ------------------------------ Sticky side index --------------------------- */
.policy-side-sticky { position: sticky; top: 120px; }
.policy-index { margin-top: 30px; display: flex; flex-direction: column; gap: 2px; }
.policy-index a {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.02em;
  color: var(--c-steel); padding: 10px 0;
  border-bottom: 1px solid var(--c-line-light);
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.policy-index a span { color: var(--c-red); font-size: 0.68rem; }
.policy-index a:hover { color: var(--c-ink); padding-left: 6px; }