:root {
  --color-primary-ink: #1d1d1f;
  --gradient-primary-ink: linear-gradient(184deg, #1d1d1f 20%, #0000f9 76%, #252525 95%);
  --color-mid-gray: #707070;
  --color-deep-gray: #474747;
  --color-hairline: #d6d6d6;
  --color-canvas: #f5f5f7;
  --color-paper: #ffffff;
  --color-cool-wash: #e8e8ed;
  --color-faded-surface: #fafafc;
  --color-quiet-dot: #777779;
  --color-electric-blue: #0071e3;
  --color-link-blue: #0066cc;
  --color-ember: #b64400;
  --color-sky: #c8d8e0;
  --color-citrus: #dddc8c;
  --color-starlight: #f0e4d3;
  --color-silver: #e3e4e5;
  --color-blush: #e8d0d0;
  --color-indigo: #596680;
  --color-midnight: #2e3642;

  --font-display: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --text-micro: 12px;
  --text-caption: 14px;
  --text-body-sm: 17px;
  --text-body: 21px;
  --text-body-lg: 28px;
  --text-subheading: 32px;
  --text-heading-sm: 40px;
  --text-heading: 56px;
  --text-heading-lg: 80px;
  --text-display: 96px;

  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-52: 52px;
  --spacing-76: 76px;
  --spacing-80: 80px;
  --spacing-120: 120px;
  --spacing-144: 144px;

  --page-max-width: 1200px;
  --radius-cards: 28px;
  --radius-links: 10px;
  --radius-buttons: 980px;
  --radius-smallbuttons: 999px;

  --surface-canvas-white: #ffffff;
  --surface-canvas-gray: #f5f5f7;
  --surface-hover-wash: #e8e8ed;
  --surface-nav-elevated: #fafafc;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--text-body-sm);
  line-height: 1.47;
  letter-spacing: -0.022em;
  color: var(--color-primary-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "numr";
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

.wrap {
  width: min(100% - 80px, var(--page-max-width));
  margin-inline: auto;
}

@media (max-width: 734px) {
  .wrap {
    width: min(100% - 40px, var(--page-max-width));
  }
}

/* Promo */
.promo {
  background: var(--color-paper);
  text-align: center;
  padding: 12px 20px;
  font-size: var(--text-caption);
  line-height: 1.33;
  color: var(--color-primary-ink);
  border-bottom: 1px solid transparent;
}

.promo a {
  color: var(--color-link-blue);
}

.promo a:hover {
  text-decoration: underline;
}

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 44px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: background 0.25s ease;
}

.nav.is-elevated {
  background: rgba(250, 250, 252, 0.92);
}

.nav__inner {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 16px;
}

.nav__logo {
  display: grid;
  place-items: center;
  width: 18px;
  height: 44px;
  opacity: 0.88;
}

.nav__logo svg {
  width: 14px;
  height: 17px;
  fill: currentColor;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}

.nav__links a {
  font-size: var(--text-micro);
  font-weight: 400;
  color: var(--color-primary-ink);
  padding: 0 10px;
  opacity: 0.88;
  white-space: nowrap;
}

.nav__links a:hover {
  opacity: 1;
}

.nav__icons {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav__icons button,
.nav__icons a {
  display: grid;
  place-items: center;
  width: 18px;
  height: 44px;
  opacity: 0.88;
}

.nav__icons svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

@media (max-width: 900px) {
  .nav__links {
    display: none;
  }
}

/* Buttons / links */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: var(--radius-buttons);
  font-size: var(--text-body-sm);
  font-weight: 400;
  letter-spacing: -0.022em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--primary {
  background: var(--color-electric-blue);
  color: var(--color-paper);
}

.btn--primary:hover {
  background: #0077ed;
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary-ink);
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: var(--radius-smallbuttons);
}

.btn--ghost:hover {
  background: var(--color-cool-wash);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-link-blue);
  font-size: var(--text-body-sm);
  letter-spacing: -0.022em;
}

.link-arrow:hover {
  text-decoration: underline;
}

.link-arrow::after {
  content: "›";
  font-size: 1.15em;
  line-height: 1;
  transform: translateY(-0.5px);
}

.badge-nuevo {
  color: var(--color-ember);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: -0.016em;
}

/* Hero */
.hero {
  background: var(--color-paper);
  padding: 52px 0 0;
  text-align: center;
  overflow: hidden;
}

.hero__copy {
  width: min(100% - 40px, 980px);
  margin: 0 auto 28px;
}

.hero__product {
  font-size: var(--text-body-sm);
  font-weight: 600;
  margin: 8px 0 0;
  letter-spacing: -0.022em;
}

.hero__title {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 12vw, var(--text-display));
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--color-primary-ink);
}

@media (min-width: 1069px) {
  .hero__title {
    letter-spacing: -1.44px;
  }
}

.hero__actions {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero__price {
  margin: 16px 0 0;
  color: var(--color-mid-gray);
  font-size: var(--text-body-sm);
}

.hero__media {
  position: relative;
  width: 100%;
  margin-top: 28px;
  background: var(--color-paper);
}

.hero__media video,
.hero__media img {
  width: 100%;
  max-height: min(72vh, 820px);
  object-fit: cover;
  object-position: center top;
}

.hero__copy > * {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero__copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero__copy > *:nth-child(2) { animation-delay: 0.14s; }
.hero__copy > *:nth-child(3) { animation-delay: 0.22s; }
.hero__copy > *:nth-child(4) { animation-delay: 0.3s; }
.hero__copy > *:nth-child(5) { animation-delay: 0.38s; }

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Sections */
.band {
  padding: 100px 0;
}

.band--paper {
  background: var(--color-paper);
}

.band--canvas {
  background: var(--color-canvas);
}

.band__eyebrow {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 28px);
  font-weight: 600;
  letter-spacing: 0.007em;
  line-height: 1.14;
  margin: 0 0 28px;
}

.band__lead {
  font-size: var(--text-body);
  line-height: 1.38;
  letter-spacing: 0.011em;
  color: var(--color-primary-ink);
  max-width: 680px;
  margin: 0 0 40px;
}

.feature-card {
  background: var(--color-paper);
  border-radius: var(--radius-cards);
  padding: 40px 40px 0;
  overflow: hidden;
}

.band--paper .feature-card {
  background: var(--color-canvas);
}

.feature-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 40px);
  line-height: 1.14;
  letter-spacing: 0;
  margin: 0 0 12px;
  max-width: 16ch;
}

.feature-card__body {
  margin: 0;
  max-width: 42ch;
  color: var(--color-mid-gray);
  font-size: var(--text-body-sm);
}

.feature-card__cta {
  margin-top: 18px;
}

.feature-card__media {
  margin-top: 36px;
  margin-inline: -12px;
}

.feature-card__media img,
.feature-card__media video {
  width: 100%;
  border-radius: var(--radius-cards) var(--radius-cards) 0 0;
}

@media (max-width: 734px) {
  .band {
    padding: 72px 0;
  }

  .feature-card {
    padding: 28px 24px 0;
  }
}

/* Color variants */
.color-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.color-card {
  border-radius: var(--radius-cards);
  overflow: hidden;
  min-height: 420px;
  display: grid;
  place-items: center;
  padding: 40px 24px;
}

.color-card--citrus {
  background: var(--color-citrus);
}

.color-card--blush {
  background: var(--color-blush);
}

.color-card img {
  width: min(100%, 420px);
  filter: drop-shadow(0 0 0 transparent);
}

@media (max-width: 734px) {
  .color-grid {
    grid-template-columns: 1fr;
  }

  .color-card {
    min-height: 320px;
  }
}

/* Swatches */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}

.swatch {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-cards);
  border: 0;
  position: relative;
  transition: transform 0.2s ease;
}

.swatch:hover,
.swatch:focus-visible {
  transform: scale(1.04);
  outline: none;
}

.swatch.is-active::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid var(--color-primary-ink);
  border-radius: 32px;
}

.swatch--sky { background: var(--color-sky); }
.swatch--citrus { background: var(--color-citrus); }
.swatch--starlight { background: var(--color-starlight); }
.swatch--silver { background: var(--color-silver); }
.swatch--blush { background: var(--color-blush); }
.swatch--indigo { background: var(--color-indigo); }
.swatch--midnight { background: var(--color-midnight); }

.swatch-label {
  margin-top: 18px;
  color: var(--color-mid-gray);
  font-size: var(--text-body-sm);
}

/* Split detail */
.split {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.split__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 40px);
  line-height: 1.14;
  margin: 0 0 14px;
}

.split__body {
  margin: 0 0 18px;
  color: var(--color-mid-gray);
  font-size: var(--text-body-sm);
  max-width: 36ch;
}

.split__media {
  border-radius: var(--radius-cards);
  overflow: hidden;
  background: var(--color-canvas);
}

.split__media img,
.split__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Highlights strip */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}

.tile {
  background: var(--color-paper);
  border-radius: var(--radius-cards);
  padding: 28px 28px 0;
  overflow: hidden;
  min-height: 100%;
}

.band--paper .tile {
  background: var(--color-canvas);
}

.tile h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0.007em;
  margin: 0 0 10px;
}

.tile p {
  margin: 0;
  color: var(--color-mid-gray);
  font-size: var(--text-body-sm);
}

.tile__media {
  margin-top: 28px;
  margin-inline: -8px;
}

.tile__media img {
  width: 100%;
  border-radius: 20px 20px 0 0;
}

@media (max-width: 980px) {
  .tiles {
    grid-template-columns: 1fr;
  }
}

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Footer */
.footer {
  background: var(--color-canvas);
  padding: 40px 0 80px;
  color: var(--color-mid-gray);
  font-size: var(--text-micro);
  line-height: 1.33;
}

.footer a {
  color: var(--color-link-blue);
}

.footer a:hover {
  text-decoration: underline;
}

.footer__divider {
  height: 1px;
  background: var(--color-hairline);
  margin: 24px 0;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.footer__cols h4 {
  margin: 0 0 10px;
  color: var(--color-deep-gray);
  font-size: var(--text-micro);
  font-weight: 600;
}

.footer__cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__cols li + li {
  margin-top: 8px;
}

.footer__cols a {
  color: var(--color-mid-gray);
  border-bottom: 1px solid transparent;
}

.footer__cols a:hover {
  color: var(--color-primary-ink);
  text-decoration: none;
  border-bottom-color: currentColor;
}

.footer__legal p {
  margin: 0 0 10px;
  max-width: 920px;
}

@media (max-width: 734px) {
  .footer__cols {
    grid-template-columns: 1fr 1fr;
  }
}