DataScope26/WEB

1/* =====================2   Home.css — DataScope3   Ajustes para que Home / About / Tutorial funcionen como4   una sola página con scroll a secciones ancladas.5   ===================== */6 7/* Compensa la altura del header fijo (88px) al hacer scroll8   hacia cada sección con scrollIntoView. */9#home,10#about,11#tutorial {12  scroll-margin-top: 100px;13}14.about-seguridad-info {15  display: flex;16  align-items: center;17  gap: 56px;18  max-width: 1030px;19  margin: 0 auto 40px;20  padding: 64px 56px;21  border-radius: 20px;22  background: var(--surface);23  border: 1px solid var(--color-border);24  box-sizing: border-box;25}26 27.about-seguridad-text {28  flex: 1;29}30 31.about-seguridad-icon {32  display: inline-flex;33  align-items: center;34  justify-content: center;35  width: 56px;36  height: 56px;37  margin-bottom: 20px;38  border-radius: 50%;39  background: var(--green-20);40  color: var(--green);41}42 43.about-seguridad-title {44  font-family: 'Roboto', sans-serif;45  font-weight: 700;46  font-size: 28px;47  letter-spacing: -0.02em;48  color: var(--color-text);49  margin: 0 0 16px;50}51 52.about-seguridad-text p {53  font-family: 'Roboto', sans-serif;54  font-size: 16px;55  line-height: 1.7;56  color: var(--color-muted);57  margin: 0;58  text-align: left;59}60 61.about-seguridad-img {62  flex: 1;63  border-radius: 12px;64  overflow: hidden;65  border: 1px solid var(--color-border);66}67 68.about-seguridad-img img {69  width: 100%;70  height: 320px;71  object-fit: cover;72  display: block;73  filter: grayscale(30%) brightness(0.85);74}75 76@media (max-width: 768px) {77  .about-seguridad-info {78    flex-direction: column;79    padding: 40px 28px;80    margin: 0 auto 32px;81  }82}