DataScope26/WEB

1/* =====================2   About.css — DataScope3   ===================== */4 5.about-page {6  background: var(--bg);7  color: var(--color-text);8  font-family: var(--font-text);9  width: 100%;10  overflow-x: hidden;11}12 13.about-page h1,14.about-page h2,15.about-page h3 {16  font-family: var(--font-title);17  font-style: normal;18}19 20.about-page p,21.about-page li,22.about-page a,23.about-page span {24  font-family: var(--font-text);25  font-style: normal;26}27 28/* ---- Shared ---- */29.about-tag {30  display: inline-block;31  font-size: 0.6875rem;32  letter-spacing: 0.18em;33  color: var(--color-accent);34  margin-bottom: 1.125rem;35  font-weight: 600;36}37 38.about-section-label {39  font-size: 0.75rem;40  letter-spacing: 0.25em;41  color: var(--muted);42  font-weight: 600;43  text-align: center;44  margin-bottom: 2.5rem;45  margin-top: 0;46}47 48.about-green-title {49  color: var(--color-accent);50  font-family: var(--font-title);51  font-size: 2.5rem;52  font-weight: 700;53  line-height: 1.15;54  letter-spacing: normal;55  margin: 0 0 0.875rem;56}57 58/* ---- Hero ---- */59.about-hero {60  text-align: center;61  padding: 6rem 1.5rem 5.25rem;62  max-width: 64rem;63  margin: 0 auto;64}65 66.about-title {67  font-family: var(--font-title);68  font-size: clamp(2.75rem, 5vw, 4rem);69  font-weight: 700;70  color: var(--color-text);71  letter-spacing: -0.125rem;72  line-height: 1.05;73  margin: 5.9375rem auto 1.75rem;74  max-width: 64rem;75}76 77.about-subtitle {78  font-size: 1rem;79  line-height: 1.75;80  color: var(--muted);81  max-width: 38.75rem;82  margin: 0 auto;83}84/* ---- Valores ---- */85.about-valores {86  background: var(--surface);87  padding: 4rem 1.5rem;88}89 90.about-valores-grid {91  display: grid;92  grid-template-columns: repeat(3, 1fr);93  gap: 1.5rem;94  max-width: 64rem;95  margin: 0 auto;96}97 98@media (max-width: 48rem) {99  .about-valores-grid {100    grid-template-columns: 1fr;101  }102}103 104.about-valor-card {105  background: var(--surface-2);106  border: 0.0625rem solid var(--color-border);107  border-radius: 0.75rem;108  padding: 1.75rem 1.5rem;109  text-align: center;110  transition: border-color 0.2s;111}112 113.about-valor-card:hover {114  border-color: var(--color-accent);115}116 117.about-valor-icon {118  width: 2.75rem;119  height: 2.75rem;120  background: rgba(0, 230, 118, 0.1);121  border-radius: 0.625rem;122  display: flex;123  align-items: center;124  justify-content: center;125  margin: 0 auto 1rem;126  color: var(--color-accent);127}128 129.about-valor-icon svg {130  width: 1.375rem;131  height: 1.375rem;132}133 134.about-valor-card h3 {135  color: var(--color-text);136  font-size: 1.25rem;137  font-weight: 600;138  margin: 0 0 0.625rem;139}140 141.about-valor-card p {142  font-size: 1rem;143  color: var(--muted);144  line-height: 1.65;145}146 147/* ---- Observatorio ---- */148.about-observatorio {149  display: flex;150  align-items: center;151  gap: 2.5rem;152  max-width: 64rem;153  margin: 4rem auto 2.5rem;154  padding: 4rem 3.5rem;155  background: var(--surface);156  border: 0.0625rem solid var(--color-border);157  border-radius: 1.25rem;158  box-sizing: border-box;159}160 161@media (max-width: 48rem) {162  .about-observatorio {163    flex-direction: column;164    padding: 2.5rem 1.75rem;165    margin: 2.5rem auto;166  }167}168 169.about-observatorio-text {170  flex: 1;171}172 173.about-observatorio-text p {174  font-family: var(--font-text);175  font-size: 1rem;176  line-height: 1.7;177  color: var(--muted);178  font-style: normal;179}180 181.about-stats {182  display: flex;183  gap: 1rem;184  flex-shrink: 0;185}186 187.about-stat-box {188  background: var(--surface-2);189  border: 0.0625rem solid var(--color-border);190  border-radius: 0.625rem;191padding: 1.75rem 2.375rem;192  text-align: center;193  194  min-width: 8.75rem;195}196 197.about-stat-number {198  display: block;199font-size: 2.875rem;200  font-weight: 700;201  color: var(--color-text);202  letter-spacing: -0.0625rem;203}204 205.about-stat-label {206  display: block;207  font-size: 0.6875rem;208  letter-spacing: 0.18em;209  color: var(--muted);210  margin-top: 0.25rem;211  font-weight: 600;212}213 214/* ---- Punto Ciego ---- */215.about-punto-ciego {216  display: flex;217  align-items: center;218  gap: 3.5rem;219  max-width: 64rem;220  margin: 0 auto 2.5rem;221  padding: 4rem 3.5rem;222  background: var(--surface);223  border: 0.0625rem solid var(--color-border);224  border-radius: 1.25rem;225  box-sizing: border-box;226}227 228@media (max-width: 48rem) {229  .about-punto-ciego {230    flex-direction: column;231    padding: 2.5rem 1.75rem;232    margin: 0 auto 2rem;233  }234}235 236.about-punto-ciego-text {237  flex: 1;238}239 240.about-punto-ciego-text h2 {241  color: var(--color-text);242  font-size: 2rem;243  font-weight: 600;244  margin: 0 0 1rem;245}246 247.about-punto-ciego-text p {248  font-size: 1rem;249  line-height: 1.75;250  color: var(--muted);251}252 253.about-punto-ciego-img {254  flex: 1;255  border-radius: 0.75rem;256  overflow: hidden;257  border: 0.0625rem solid var(--color-border);258}259 260.about-punto-ciego-img img {261  width: 100%;262height: 20rem;263  object-fit: cover;264  display: block;265  filter: grayscale(30%) brightness(0.85);266}267 268/* ---- Ojo de Alcon ---- */269.about-ojo {270  display: flex;271  align-items: center;272  gap: 3.5rem;273  max-width: 64rem;274  margin: 0 auto 4rem;275  padding: 4rem 3.5rem;276  background: var(--surface);277  border: 0.0625rem solid var(--color-border);278  border-radius: 1.25rem;279  box-sizing: border-box;280}281 282@media (max-width: 48rem) {283  .about-ojo {284    flex-direction: column-reverse;285    padding: 2.5rem 1.75rem;286    margin: 0 auto 2.5rem;287  }288}289 290/* Mockup */291.about-ojo-mockup {292  flex: 1;293}294 295.about-mockup-window {296  background: var(--surface-2);297  border: 0.0625rem solid var(--color-border);298  border-radius: 0.75rem;299  overflow: hidden;300}301 302.about-mockup-bar {303  background: var(--surface-2);304  padding: 0.625rem 0.875rem;305  display: flex;306  gap: 0.375rem;307  border-bottom: 0.0625rem solid var(--color-border);308}309 310.about-mockup-bar span {311  width: 0.625rem;312  height: 0.625rem;313  border-radius: 50%;314  background: var(--surface-3);315  display: block;316}317 318.about-mockup-bar span:first-child { background: #ef4444; }319.about-mockup-bar span:nth-child(2) { background: #f59e0b; }320.about-mockup-bar span:nth-child(3) { background: #10b981; }321 322.about-mockup-content {323  display: flex;324  height: 15rem;325}326 327.about-mockup-sidebar {328  width: 3rem;329  background: var(--surface-2);330  border-right: 0.0625rem solid var(--color-border);331  padding: 0.875rem 0.625rem;332  display: flex;333  flex-direction: column;334  gap: 0.625rem;335}336 337.about-mockup-item {338  height: 0.5rem;339  background: var(--surface-3);340  border-radius: 0.25rem;341  animation: pulse-item 2s ease-in-out infinite;342}343 344.about-mockup-item:nth-child(2) { animation-delay: 0.3s; }345.about-mockup-item:nth-child(3) { animation-delay: 0.6s; }346.about-mockup-item:nth-child(4) { animation-delay: 0.9s; }347 348@keyframes pulse-item {349  0%, 100% { opacity: 0.4; }350  50% { opacity: 1; }351}352 353.about-mockup-main {354  flex: 1;355  padding: 1rem;356  display: flex;357  flex-direction: column;358  gap: 0.75rem;359}360 361.about-mockup-chart {362  flex: 1;363  background: var(--surface-2);364  border-radius: 0.375rem;365  overflow: hidden;366  border: 0.0625rem solid var(--color-border);367}368 369.about-mockup-chart svg {370  width: 100%;371  height: 100%;372}373 374.about-mockup-dots {375  display: flex;376  gap: 0.5rem;377}378 379.about-mockup-dots div {380  height: 1.5rem;381  flex: 1;382  background: var(--surface-2);383  border-radius: 0.25rem;384  border: 0.0625rem solid var(--color-border);385}386 387.about-mockup-badge {388  background: var(--surface-2);389  border-top: 0.0625rem solid var(--color-border);390  padding: 0.5rem 1rem;391  font-size: 0.625rem;392  letter-spacing: 0.08em;393  color: var(--color-accent);394  font-weight: 600;395}396 397/* Ojo text */398.about-ojo-text {399  flex: 1;400}401 402.about-quote-title {403  color: var(--color-text);404  font-size: 2rem;405  font-weight: 700;406  margin: 0 0 1rem;407  font-style: normal;408}409 410.about-ojo-text p {411  font-size: 1rem;412  line-height: 1.75;413  color: var(--muted);414  margin-bottom: 1.25rem;415  margin-right: 1.5625rem;416}417 418.about-feature-list {419  list-style: none;420  padding: 0;421  margin: 0;422  display: flex;423  flex-direction: column;424  gap: 0.625rem;425}426 427.about-feature-list li {428  display: flex;429  align-items: center;430  gap: 0.625rem;431  font-size: 0.8438rem;432  color: var(--muted);433}434 435.about-check {436  width: 1rem;437  height: 1rem;438  border-radius: 50%;439  background: rgba(0, 230, 118, 0.15);440  border: 0.0625rem solid #00e676;441  flex-shrink: 0;442  position: relative;443}444 445.about-check::after {446  content: '';447  position: absolute;448  top: 0.25rem;449  left: 0.25rem;450  width: 0.375rem;451  height: 0.375rem;452  border-radius: 50%;453  background: #00e676;454}455 456/* ---- Visión ---- */457.about-vision {458  background: var(--surface);459  padding: 6.875rem 1.5rem;460  text-align: center;461}462 463.about-vision h2 {464  font-family: var(--font-title);465  color: var(--color-text);466  font-size: 2.5rem;467  font-weight: 700;468  line-height: 1.15;469  margin-bottom: 2.5rem;470  letter-spacing: normal;471}472 473.about-vision-quote {474  max-width: 53.75rem;475  margin: 0 auto;476  font-family: var(--font-text);477  font-size: 1rem;478  line-height: 1.7;479  color: var(--muted);480  font-style: normal;481  border: none;482  padding: 0;483  position: relative;484}485 486.about-quote-mark {487  font-size: 4.75rem;488  color: var(--surface-3);489  line-height: 0;490  vertical-align: -1.625rem;491  font-style: normal;492}493 494.about-quote-mark.left { margin-right: 0.25rem; }495.about-quote-mark.right { margin-left: 0.25rem; }496 497