/* Latitud 40 · página SEGURIDAD */

/* Sistema de doble cuerda: pasos a la izquierda, specs a la derecha */
.sistema .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.sistema h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.02em; margin-bottom: 36px; }
.sistema .specs { position: sticky; top: 120px; }

/* Coberturas: dos placas grandes */
.seguros { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* EPP: tres columnas de listas agrupadas */
.epp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.epp-col { padding: 26px 28px; border-radius: var(--r); background: var(--surf); border: 1px solid var(--line); box-shadow: var(--inset-hi); }
.epp-col .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-2); display: grid; place-items: center; margin-bottom: 18px; }
.epp-col .ico .ic-svg { width: 22px; height: 22px; }
.epp-col h3 { font-size: 1.15rem; letter-spacing: -.015em; margin-bottom: 14px; }
.epp-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.epp-col li { font-size: calc(15px * var(--k-body, 1)); color: var(--muted); padding-left: 14px; position: relative; }
.epp-col li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 2px; background: var(--accent-2); }

/* Documentación: acordeón al lado de una explicación breve */
.docs-sec .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.docs-sec .sticky { position: sticky; top: 120px; }

/* Sostenibilidad: nota corta */
.sost { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; padding: clamp(24px, 3vw, 36px); border-radius: var(--r); background: var(--surf); border: 1px solid var(--line); box-shadow: var(--inset-hi); }
.sost .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-2); display: grid; place-items: center; }
.sost .ico .ic-svg { width: 26px; height: 26px; }
.sost h2 { font-size: 1.4rem; letter-spacing: -.02em; margin-bottom: 8px; }
.sost p { color: var(--muted); max-width: 60ch; }

@media (max-width: 900px) {
  .sistema .wrap, .docs-sec .wrap { grid-template-columns: 1fr; }
  .sistema .specs, .docs-sec .sticky { position: static; }
  .epp { grid-template-columns: 1fr; }
  .seguros { grid-template-columns: 1fr; }
}