:where(a, button):focus-visible {
  outline: 3px solid var(--sun-light);
  outline-offset: 4px;
}

::selection {
  color: var(--pine);
  background: var(--sun-light);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: 9999;
  padding: 0.7rem 1rem;
  color: var(--pine);
  background: var(--white);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease-out);
}

.skip-link:focus-visible {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  opacity: 1;
  pointer-events: auto;
}

.btn {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 0.8rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 3px;
  font: 600 0.94rem/1.15 var(--font);
  text-decoration: none;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    color 180ms var(--ease),
    background-color 180ms var(--ease),
    border-color 180ms var(--ease),
    transform 180ms var(--ease-out);
}

.btn span {
  display: inline-block;
  font-size: 1.15rem;
  transition: transform 180ms var(--ease-out);
}

.btn:hover span {
  transform: translate(2px, -2px);
}

.btn:active {
  transform: translateY(1px);
}

.btn--sun,
a.btn--sun {
  color: var(--pine) !important;
  background-color: var(--sun-light) !important;
  font-weight: 600;
  text-decoration: none;
}

.btn--sun:hover,
a.btn--sun:hover {
  color: var(--pine) !important;
  background-color: var(--white) !important;
}

.btn--sun span,
a.btn--sun span {
  color: inherit !important;
}

.btn--nav,
a.btn--nav,
.site-header .btn--nav,
.nav .btn--nav {
  min-height: 44px;
  padding: 0.65rem 1.15rem;
  color: #ffffff !important;
  background-color: var(--pine) !important;
  white-space: nowrap;
  font-weight: 600;
  text-decoration: none;
}

.btn--nav:hover,
a.btn--nav:hover,
.site-header .btn--nav:hover,
.nav .btn--nav:hover {
  color: var(--pine) !important;
  background-color: var(--mint) !important;
}

.btn--nav span,
a.btn--nav span,
.site-header .btn--nav span {
  color: inherit !important;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  font-size: 0.95rem;
  text-decoration: none;
}

.text-link span {
  transition: transform 180ms var(--ease-out);
}

.text-link:hover span {
  transform: translate(3px, -2px);
}

.text-link--light {
  color: var(--mint);
}

.text-link--light:hover {
  color: var(--white);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.35rem;
  color: var(--mint);
  font: 600 0.73rem/1.3 var(--font);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow__line {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--sun);
}

.eyebrow--dark {
  color: var(--leaf);
}

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: var(--header-height);
  background: rgb(255 255 255 / 96%);
}

.header-sentinel {
  display: block;
  height: 1px;
  margin-bottom: -1px;
}

.site-header[data-scrolled="true"] {
  box-shadow: 0 1px 0 rgb(30 57 50 / 12%);
}

.site-header :where(a, button):focus-visible {
  outline-color: var(--leaf);
}

.header__inner {
  display: flex;
  width: min(100%, var(--page-width));
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.5rem, 1.2vw, 1.5rem);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.header__brands {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.3vw, 1.5rem);
  min-width: 0;
  flex-shrink: 0;
}

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
}

.brand img {
  display: block;
  width: auto;
  height: clamp(26px, 2.4vw, 38px);
  object-fit: contain;
}

.brand--epre img {
  height: clamp(24px, 2.2vw, 35px);
}

.brand--iee img {
  height: clamp(20px, 1.9vw, 30px);
}

.brand--gob img {
  height: clamp(20px, 1.9vw, 30px);
}

.footer__partners img {
  height: 38px;
  width: auto;
  object-fit: contain;
}

.footer__partners a:has(img[alt*="San Juan"]) {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  padding: 3px 8px;
  border-radius: 4px;
}

.footer__partners a:has(img[alt*="San Juan"]) img {
  height: 30px;
}

.header__divider {
  width: 1px;
  height: clamp(18px, 1.7vw, 26px);
  flex: none;
  background: var(--line);
  margin-inline: clamp(0.35rem, 0.65vw, 0.8rem);
}

.nav {
  margin-left: auto;
  min-width: 0;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.15vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink);
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
}

.nav__link::after {
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  height: 1px;
  background: var(--leaf);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms var(--ease-out);
}

.nav__link {
  position: relative;
}

.nav__link:hover::after,
.nav__link[aria-current="location"]::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--pine);
  background: var(--white);
  cursor: pointer;
}

.nav-toggle__glyph,
.nav-toggle__glyph::before,
.nav-toggle__glyph::after {
  display: block;
  width: 19px;
  height: 1.5px;
  background: currentColor;
  transition: transform 180ms var(--ease-out), opacity 140ms var(--ease);
}

.nav-toggle__glyph {
  position: relative;
}

.nav-toggle__glyph::before,
.nav-toggle__glyph::after {
  position: absolute;
  left: 0;
  content: "";
}

.nav-toggle__glyph::before {
  transform: translateY(-6px);
}

.nav-toggle__glyph::after {
  transform: translateY(6px);
}

.site-header[data-open="true"] .nav-toggle__glyph {
  background: transparent;
}

.site-header[data-open="true"] .nav-toggle__glyph::before {
  transform: rotate(45deg);
}

.site-header[data-open="true"] .nav-toggle__glyph::after {
  transform: rotate(-45deg);
}

.story-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: transparent;
}

.story-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--sun);
  transform-origin: left;
  transition: width 600ms var(--ease-in-out);
}

.scene__topline,
.scene__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.scene__eyebrow,
.scene__coordinate,
.scene__step {
  color: var(--mint);
  font: 500 0.65rem/1.4 var(--font);
  letter-spacing: 0.1em;
}

.scene__coordinate {
  color: rgb(212 233 226 / 62%);
  text-align: right;
}

.scene__step {
  color: var(--sun-light);
  white-space: nowrap;
}

.scene__step i {
  color: rgb(212 233 226 / 55%);
  font-style: normal;
}

.scene__moment {
  max-width: 31ch;
  color: var(--mint);
  font-size: 0.8rem;
  text-align: right;
}

.resource-link {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1.5rem;
  min-height: auto;
  align-content: start;
  padding: 1.6rem 1rem 1.6rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.resource-link:last-child {
  border-bottom: 1px solid var(--line);
}

.resource-link__type {
  grid-column: 1 / -1;
  color: var(--leaf);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
}

.resource-link__title {
  color: var(--pine);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 600;
  line-height: 1.2;
}

.resource-link__detail {
  grid-column: 1;
  max-width: 42ch;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.resource-link__arrow {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: center;
  color: var(--leaf);
  font-size: 1.6rem;
  transition: transform 200ms var(--ease-out);
}

.resource-link:hover .resource-link__arrow {
  transform: translate(4px, -4px);
}

.video-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #071d17;
}

.video-frame::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid rgb(212 233 226 / 24%);
  content: "";
  pointer-events: none;
}

.video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (hover: hover) and (pointer: fine) {
  .resource-link:hover .resource-link__title {
    text-decoration: underline;
    text-decoration-color: var(--sun);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link,
  .btn,
  .btn span,
  .text-link span,
  .nav__link::after,
  .nav-toggle__glyph,
  .nav-toggle__glyph::before,
  .nav-toggle__glyph::after,
  .story-progress span,
  .resource-link__arrow {
    transition-duration: 1ms;
  }
}

/* --- Hero Badges & Multi-Device Showcase (Feedback v2.0) --- */
.intro-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.intro-badges .badge {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.badge--gold {
  background: rgb(245 158 11 / 22%);
  color: #fbbf24;
  border: 1px solid rgb(245 158 11 / 45%);
}

.badge--mint {
  background: rgb(16 185 129 / 20%);
  color: #34d399;
  border: 1px solid rgb(16 185 129 / 40%);
}

.intro-badges .eyebrow-text {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #a7f3d0;
  text-transform: uppercase;
}

.story-title__sub {
  display: block;
  color: var(--sun);
  font-weight: 600;
}

.hero-devices {
  position: relative;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  max-width: 470px;
}

.device-frame--desktop {
  position: relative;
  border-radius: 9px;
  background: #111e1b;
  border: 1px solid rgb(212 233 226 / 20%);
  box-shadow: 0 18px 45px rgb(0 0 0 / 35%);
  overflow: hidden;
}

.device-frame__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: #091713;
  border-bottom: 1px solid rgb(212 233 226 / 12%);
}

.device-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4a635a;
}

.device-url {
  margin-left: 8px;
  font-size: 0.7rem;
  font-family: ui-monospace, monospace;
  color: #8da99f;
  letter-spacing: 0.02em;
}

.device-frame--desktop img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.device-frame--mobile {
  position: absolute;
  right: -10px;
  bottom: -18px;
  width: 140px;
  border-radius: 20px;
  background: #091713;
  border: 3px solid #224237;
  box-shadow: 0 16px 36px rgb(0 0 0 / 60%), 0 0 0 1px rgb(212 233 226 / 20%);
  overflow: hidden;
  animation: floatDevice 4s ease-in-out infinite alternate;
}

.device-phone__notch {
  width: 36px;
  height: 4px;
  margin: 5px auto 4px;
  background: #2e5347;
  border-radius: 4px;
}

.device-frame--mobile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
}

.hero-devices__badge {
  position: absolute;
  left: 12px;
  bottom: -14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(9 23 19 / 94%);
  backdrop-filter: blur(8px);
  border: 1px solid rgb(56 189 248 / 38%);
  color: #eaf4f0;
  font-size: 0.74rem;
  font-weight: 500;
  box-shadow: 0 4px 14px rgb(0 0 0 / 35%);
}

.hero-devices__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

@keyframes floatDevice {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-7px); }
}

@media (max-width: 640px) {
  .hero-devices {
    max-width: 100%;
    margin-bottom: 2rem;
  }
  .device-frame--mobile {
    width: 100px;
    right: 0px;
    bottom: -8px;
  }
  .hero-devices__badge {
    left: 4px;
    bottom: -12px;
    font-size: 0.67rem;
    padding: 4px 9px;
  }
}