/* Galería fotográfica en movimiento, con la paleta y tipografía de SWAP. */
.feature.clarity {
  display: block; position: relative; isolation: isolate; overflow: clip;
  min-height: 0; padding: 64px 0 56px; background: #050d1e; color: #f3f6fc;
}
.clarity .clarity-heading { padding: 0 24px; text-align: center; position: relative; z-index: 2; }
.clarity .eyebrow { display: block; margin: 0 0 21px; color: #8da9d1; font-size: 9px; font-weight: 500; letter-spacing: .19em; }
.clarity h2 { font-size: clamp(35px, 3.8vw, 52px); line-height: 1.12; letter-spacing: -.055em; font-weight: 500; max-width: 850px; margin: 0 auto; }
.clarity h2 span { color: #e1ebfd; }
.clarity p.clarity-lead { max-width: 460px; margin: 19px auto 22px; color: #8191ab; font-size: 12px; line-height: 1.8; font-weight: 400; }
.clarity .clarity-cta { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 44px; padding: 10px 22px; border: 1px solid #aec8f12b; border-radius: 999px; background: #08142860; font-size: 11px; font-weight: 500; color: #d6e3f8; transition: border-color .2s, background .2s; }
.clarity-cta span { color: #a2cdfa; }
.clarity .clarity-cta:hover { border-color: #8ab6fa80; background: #132741; }
.clarity .clarity-gallery { position: relative; padding: 0; margin: 14px 0 0; height: 320px; width: 100%; overflow: clip; }
.clarity-gallery::after { content: ''; position: absolute; z-index: 4; inset: 0; pointer-events: none; background: linear-gradient(90deg, #050d1e 0, #050d1e00 10%, #050d1e00 90%, #050d1e 100%); }
.clarity-glow { position: absolute; z-index: 0; left: 50%; top: 50%; width: 660px; height: 340px; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(ellipse, #238ffb44 0, #237de922 33%, transparent 69%); }
.clarity-beam { position: absolute; z-index: 3; left: calc(50% - 1px); top: 21px; bottom: 22px; width: 2px; border-radius: 50%; background: linear-gradient(transparent, #69caff 18%, #def8ff 50%, #69caff 82%, transparent); box-shadow: 0 0 14px #54d6f9cc, 0 0 48px #2585eecc; pointer-events: none; }
.clarity-track { position: absolute; z-index: 1; inset: 0; }
.clarity-card {
  --card-width: clamp(155px, 15.6vw, 205px); --card-height: 245px;
  position: absolute; top: 50%; left: 50%; width: var(--card-width); height: var(--card-height);
  margin-left: calc(var(--card-width) / -2); margin-top: calc(var(--card-height) / -2);
  border-radius: 12px; border: 1px solid #ffffff18; overflow: hidden; background: #e9eef6;
  transform-origin: center; will-change: transform; box-shadow: 0 10px 30px #0003;
}
.clarity-card img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.clarity-card--phone { background: linear-gradient(145deg, #18457b, #477ac1); }
.clarity-card--phone img { padding: 11px; }
.clarity-card--ipad img { padding: 27px; }
.clarity-card--airpods img { object-fit: cover; padding: 0; }
.clarity-card--phone-detail { background: #d1dcf0; }
.clarity-card--phone-detail img { width: 175%; max-width: none; height: 140%; padding: 0; margin-left: -17%; margin-top: -10%; object-fit: contain; }
.clarity-card--mac-detail img { width: 145%; max-width: none; height: 120%; padding: 0; margin-left: -25%; object-fit: contain; }
.clarity-card--airpods-detail img { object-fit: cover; object-position: 76% center; padding: 0; }
/* Si JS no se ejecuta, la galería sigue siendo una composición visible. */
.clarity-card:nth-child(1) { transform: translateX(-660px) skewY(10deg) scale(1.04); }
.clarity-card:nth-child(2) { transform: translateX(-440px) skewY(7deg) scale(.96); }
.clarity-card:nth-child(3) { transform: translateX(-220px) skewY(3deg) scale(.89); }
.clarity-card:nth-child(4) { transform: scale(.84); }
.clarity-card:nth-child(5) { transform: translateX(220px) skewY(-3deg) scale(.89); }
.clarity-card:nth-child(6) { transform: translateX(440px) skewY(-7deg) scale(.96); }
.clarity-card:nth-child(7) { transform: translateX(660px) skewY(-10deg) scale(1.04); }
.clarity-card:nth-child(n+8) { visibility: hidden; }
.clarity.is-animated .clarity-card:nth-child(n+8) { visibility: visible; }
.clarity .clarity-options { max-width: 1000px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; padding: 0 36px; margin: 3px auto 0; }
.clarity-path { display: block; text-align: center; border-radius: 8px; padding: 8px 5px; transition: background .2s; }
.clarity-path:hover { background: #ffffff04; }
.clarity-path small { display: block; font-size: 8px; font-weight: 500; letter-spacing: .15em; color: #669bdf; margin-bottom: 11px; }
.clarity-path h3 { font-size: 16px; font-weight: 500; letter-spacing: -.03em; line-height: 1.4; margin: 0 0 9px; color: #dae5f7; }
.clarity .clarity-path p { color: #78869f; font-size: 10px; font-weight: 400; line-height: 1.8; margin: 0 auto; max-width: 235px; }
.clarity-path:hover h3 { color: #a6d2ff; }
.clarity a:focus-visible { outline: 2px solid #69bfff; outline-offset: 5px; }
@media (max-width: 900px) {
  .feature.clarity { padding-top: 56px; padding-bottom: 48px; }
  .clarity .clarity-gallery { height: 295px; }
  .clarity-card { --card-height: 225px; }
  .clarity .clarity-options { gap: 25px; padding: 0 30px; }
}
@media (max-width: 540px) {
  .feature.clarity { padding-top: 50px; padding-bottom: 42px; }
  .clarity .clarity-heading { padding: 0 22px; }
  .clarity .eyebrow { font-size: 8px; margin-bottom: 19px; letter-spacing: .14em; }
  .clarity h2 { font-size: clamp(28px, 7.9vw, 34px); }
  .clarity p.clarity-lead { max-width: 290px; font-size: 11px; margin: 18px auto 20px; }
  .clarity .clarity-gallery { height: 255px; margin-top: 17px; }
  .clarity-card { --card-width: 142px; --card-height: 198px; border-radius: 10px; }
  .clarity-beam { top: 15px; bottom: 15px; }
  .clarity-glow { width: 470px; height: 260px; }
  .clarity .clarity-options { grid-template-columns: 1fr; gap: 17px; padding: 0 25px; margin-top: 5px; }
  .clarity .clarity-options.is-rotating { gap: 0; }
  .clarity-options.is-rotating .clarity-path { grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease, visibility .4s; }
  .clarity-options.is-rotating .clarity-path.is-current { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .clarity-path { padding: 8px 0; }
  .clarity-path small { margin-bottom: 6px; }
  .clarity-path h3 { margin-bottom: 5px; font-size: 16px; }
  .clarity .clarity-path p { max-width: 265px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .clarity-card { will-change: auto; }
  .clarity .clarity-cta, .clarity-path { transition: none; }
}