/* Ajustes de las observaciones del diseño Systemax. */
:root { --motion-fast: 220ms; --motion-medium: 420ms; }

/* Barra visible durante el desplazamiento, con acabado translúcido. */
@media (min-width: 761px) {
  header,
  body:has(#conocenos:not([hidden])) header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #02060cbd;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: background var(--motion-medium) ease, box-shadow var(--motion-medium) ease;
  }
  header.header-scrolled,
  body:has(#conocenos:not([hidden])) header.header-scrolled {
    background: #030913e9;
    box-shadow: 0 14px 35px #0009, 0 1px 0 #2787d03b;
  }
  header nav,
  body:has(#conocenos:not([hidden])) header nav {
    background: #050b16ad;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}
@media (max-width: 760px) {
  header,
  body:has(#conocenos:not([hidden])) header {
    background: #030a16db;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

#inicio #video-toggle { display: none !important; }
#inicio h1 { font-size: clamp(28px, 2.85vw, 62px); letter-spacing: .12em; line-height: 1.13; margin-bottom: 17px; white-space: normal; }
#inicio .intro-copy { max-width: 49vw; line-height: 1.45; }
#inicio .actions .button.primary svg { width: 1.65em; height: 1.65em; flex: none; }
#inicio .home-grid { grid-template-rows: repeat(2, 7.9vw); gap: 1.15vw; }
#inicio .photo-label svg { color: #168bff; transition: color var(--motion-fast) ease, width var(--motion-fast) ease, height var(--motion-fast) ease; }
#inicio .photo-card:is(:hover,:focus-visible,.is-preview,.mouse-preview) .photo-label svg { color: var(--card-accent); }
#inicio .trust-heading h2 { margin-bottom: 12px; }
#inicio .trust-heading p { line-height: 1.5; }
#inicio .home-trust > .button { display: inline-flex; align-items: center; gap: .45em; }
#inicio .home-trust > .button span { color: #168bff; font-size: 1.25em; line-height: 1; }

/* Identidad, jerarquía y separaciones de Conócenos. */
#conocenos img.about-ref-logo.about-stacked-logo { display: block; object-fit: contain; object-position: left center; }
#conocenos .about-copy h1 { margin-bottom: 18px; letter-spacing: .1em; }
#conocenos .about-copy > p:not(.eyebrow) { line-height: 1.7; margin-bottom: 25px; }
#conocenos .about-copy > .button { display: inline-flex; align-items: center; gap: 9px; }
#conocenos .about-play { display: inline-block; width: 15px; height: 21px; border: 0; background: url('/design-home/symbol.png') center / contain no-repeat; }
#conocenos .values { gap: 34px; margin-top: 45px; }
#conocenos .values article { box-shadow: inset 0 1px 0 #ffffff12; }
#conocenos .about-trust:before { border-top-color: #12c9f0; box-shadow: 0 -14px 42px #087be966; }
#conocenos .trust-heading h2 { margin-bottom: 10px; }

/* Iconos del menú de servicios y sus estados. */
header .mega .ref-service-row { gap: 18px; }
header .mega .hex-icon { border-color: #3c4b56; }
header .mega .ref-service-choice:is(:hover,:focus-visible) .hex-icon {
  border-color: var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 32%, transparent);
}
#servicios .ref-service-choice:is(:hover,:focus-visible) .hex-icon,
.service-detail .ref-service-choice:is(:hover,:focus-visible) .hex-icon { filter: drop-shadow(0 0 10px var(--accent)); }

/* Filtros y banners de proyectos. */
#proyectos .work-filters { gap: clamp(10px, 1.25vw, 20px); }
#proyectos .work-filters button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#proyectos .ref-category-title { box-shadow: 0 0 32px color-mix(in srgb, var(--project-accent) 18%, transparent); }
#proyectos .ref-category-title .ref-category-image-next { opacity: 0; transition: opacity 650ms ease; }
#proyectos .ref-category-title .ref-category-image-next.is-visible { opacity: 1; }
#proyectos .ref-category-title h1 { text-shadow: 0 0 24px color-mix(in srgb, var(--project-accent) 42%, transparent); }
#proyectos.category-selected .model2-project-track .project-card:is(:hover,:focus-within) .project-photo { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--project-accent) 55%, transparent)); }

/* Marcas y publicaciones: la luz aparece al interactuar. */
#clientes .brand-ribbon img { filter: grayscale(1); opacity: .86; transition: filter var(--motion-medium) ease, opacity var(--motion-medium) ease, transform var(--motion-medium) ease; }
#clientes .brand-ribbon img:hover { opacity: 1; }
#clientes .ref-story { border: 1px solid transparent; transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) ease; }
#clientes .ref-story:is(:hover,:focus-visible) { border-color: #2389ff; box-shadow: 0 0 18px #2389ff63; transform: translateY(-4px); }

/* Respuesta y movimiento coherentes entre secciones. */
header nav a, header nav button, .button, .footer-socials a, .footer-socials button { transition-duration: var(--motion-fast); }
@media (max-width: 900px) {
  #inicio .intro-copy { max-width: 560px; }
  #inicio .home-grid { grid-template-rows: repeat(2, 105px); gap: 10px; }
  #conocenos .values { gap: 18px; margin-top: 30px; }
}
@media (max-width: 760px) {
  #inicio h1 { font-size: clamp(25px, 6.2vw, 36px); letter-spacing: .075em; }
  #inicio .home-grid { grid-template-rows: repeat(2, 145px) 135px; gap: 9px; }
  #inicio .trust-heading h2 { margin-bottom: 8px; }
  #inicio .home-trust > .button { gap: 6px; }
  #conocenos img.about-ref-logo.about-stacked-logo { width: min(240px, 55vw); height: auto; aspect-ratio: 309 / 127; }
  #conocenos .about-copy h1 { margin-bottom: 12px; }
  #conocenos .about-copy > p:not(.eyebrow) { margin-bottom: 17px; }
  #conocenos .about-trust:before { display: block; top: -14px; left: -8%; width: 116%; height: 42px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
  #proyectos .work-filters { justify-content: flex-start; gap: 9px; }
  #clientes .ref-story:is(:hover,:focus-visible) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #proyectos .ref-category-title .ref-category-image-next,
  #clientes .ref-story, #clientes .brand-ribbon img,
  #inicio .photo-label svg { transition: none; }
}