/* Final spacing and light treatment from the supplied desktop mockups. */
@media (min-width: 901px) {
  #conocenos { padding-top: 12px; }
  #conocenos .about-copy h1 {
    font-size: clamp(38px, 2.9vw, 44px);
    margin-bottom: 15px;
  }
  #conocenos .about-copy > p:not(.eyebrow) {
    max-width: 505px;
    margin-bottom: 15px;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.55;
  }
  #conocenos .about-copy > .button {
    margin-top: 4px;
  }
  #conocenos .values {
    margin-top: 24px;
  }
  .service-detail { padding-top: 55px; }
  .service-detail .ref-detail-top .ref-service-row {
    width: min(100%, 740px);
    max-width: 740px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin-top: 70px;
  }
  .service-detail .ref-detail-top .ref-service-choice .hex-icon {
    width: 84px;
    height: 98px;
    margin-bottom: 10px;
  }
  .service-detail .ref-detail-top .ref-service-choice > span:last-child {
    font-size: 10px;
    line-height: 1.25;
  }
  .service-detail .ref-detail-top { margin-bottom: 320px; }
  .service-detail .ref-detail-peak { top: 436px; }
}

#conocenos .values article p { margin-top: 18px; }

@keyframes systemax-value-card-blink {
  0%, 10%, 45%, 100% {
    border-color: #303034;
    box-shadow: inset 0 1px 0 #ffffff12, 0 0 0 #168bff00;
  }
  15%, 35%, 53%, 70% {
    border-color: #2389ff;
    box-shadow: inset 0 0 18px #0c63ba44, 0 0 19px #168bff88;
  }
}
#conocenos:not([hidden]) .values article {
  animation: systemax-value-card-blink 3.6s ease-in-out infinite;
}
#conocenos:not([hidden]) .values article:nth-child(2) {
  animation-delay: -1.8s;
}

#conocenos .about-trust > .button {
  min-width: 263px;
  min-height: 38px;
  padding: 9px 18px;
  gap: 8px;
  border: 1px solid #2e6cb5;
  border-radius: 5px;
  background: linear-gradient(110deg, #0b1830, #101b34 65%, #071126);
  box-shadow: 0 0 16px #0d4ba555, inset 0 0 12px #0e55a433;
  font: 600 12px/1.15 Poppins, Arial, sans-serif;
  white-space: nowrap;
}
#conocenos .about-trust > .button svg {
  width: 21px;
  height: 21px;
  flex: none;
}

/* The curve has a wide blue halo and a bright turquoise edge. */
#conocenos .about-trust { padding-top: 130px; }
#conocenos .about-trust::before {
  top: 45px;
  border-top: 4px solid #00cbef;
  box-shadow: 0 -5px 8px #0ce9f9bb, 0 -14px 25px #078dffcc, 0 -34px 67px #045fe0aa;
  mask-image: none;
}

/* Blink the cyan arc above “¿Por qué confiar en Systemax?”. */
@keyframes systemax-arc-blink {
  0%, 10%, 46%, 100% { opacity: .1; filter: brightness(.55); }
  14%, 37%, 53%, 70% { opacity: 1; filter: brightness(1.25); }
}
#conocenos:not([hidden]) .about-trust::before {
  animation: systemax-arc-blink 3.6s ease-in-out infinite;
}

/* Double light pulse: the content remains readable when the glow dims. */
@keyframes systemax-light-pulse {
  0%, 9%, 46%, 100% { opacity: .48; filter: brightness(.8); }
  13%, 37%, 54%, 68% { opacity: 1; filter: brightness(1.2); }
}
@keyframes systemax-button-pulse {
  0%, 9%, 46%, 100% { border-color: #1473d0; box-shadow: 0 0 0 #2389ff00, inset 0 0 0 #2389ff00; }
  13%, 37%, 54%, 68% { border-color: #87c6ff; box-shadow: 0 0 16px #2389ffbb, 0 0 36px #0874e866, inset 0 0 13px #2389ff55; }
}
@keyframes systemax-panel-pulse {
  0%, 9%, 46%, 100% { box-shadow: 0 0 7px color-mix(in srgb, var(--pulse-color) 18%, transparent); }
  13%, 37%, 54%, 68% { box-shadow: 0 0 20px color-mix(in srgb, var(--pulse-color) 60%, transparent), 0 0 42px color-mix(in srgb, var(--pulse-color) 30%, transparent); }
}
#conocenos .about-copy > .button {
  animation: systemax-button-pulse 3.6s ease-in-out infinite;
}
#conocenos .about-copy > .button .about-play {
  filter: drop-shadow(0 0 5px #2389ff);
}
#servicios .intro::before,
.service-detail .ref-detail-peak {
  animation: systemax-light-pulse 4.5s ease-in-out infinite;
}
.service-detail .ref-service-choice.selected .hex-icon {
  animation: systemax-light-pulse 4.5s ease-in-out infinite;
}
#proyectos .ref-project-title h1 {
  position: relative;
  background: none;
}
#proyectos .ref-project-title h1::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -15px 20%;
  background: radial-gradient(ellipse, #168bffae, #045bb76b 35%, transparent 72%);
  filter: blur(18px);
  animation: systemax-light-pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}
#proyectos.category-selected .work-filters button[aria-pressed="true"] { --pulse-color: var(--accent); }
#proyectos .ref-category-title { --pulse-color: var(--project-accent); }
#proyectos .project-gallery-dialog { --pulse-color: var(--gallery-accent, #2389ff); }
#proyectos.category-selected .work-filters button[aria-pressed="true"],
#proyectos .ref-category-title,
#proyectos .project-gallery-dialog { animation: systemax-panel-pulse 4.5s ease-in-out infinite; }
#proyectos .wedge { animation: systemax-light-pulse 4.5s ease-in-out infinite; }

@media (max-width: 800px) {
  #conocenos .about-trust { padding-top: 100px; }
  #conocenos .about-trust::before { top: 35px; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  #conocenos .about-copy h1 { font-size: clamp(29px, 3.3vw, 34px); }
  #conocenos .about-copy > p:not(.eyebrow) { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #conocenos:not([hidden]) .values article,
  #conocenos:not([hidden]) .about-trust::before,
  #conocenos .about-copy > .button,
  #servicios .intro::before,
  .service-detail .ref-detail-peak,
  .service-detail .ref-service-choice.selected .hex-icon,
  #proyectos .ref-project-title h1::before,
  #proyectos .wedge,
  #proyectos.category-selected .work-filters button[aria-pressed="true"],
  #proyectos .ref-category-title,
  #proyectos .project-gallery-dialog { animation: none; }
}