:root {
  /* colors */
  --color-primary-blue: #0b55f4;
  --color-primary-blue-hover: #0647d9;
  --color-primary-blue-soft: #eaf1ff;
  --color-navy: #071c2c;
  --color-navy-2: #082b36;
  --color-bg-warm: #fafaf7;
  --color-surface: #ffffff;
  --color-surface-soft: #f6f8fb;
  --color-smoke: #e8ecef;
  --color-border: #dde3ea;
  --color-text: #101828;
  --color-text-muted: #34404a;
  --color-text-soft: #667085;
  --color-whatsapp: #1dbe61;
  --color-whatsapp-hover: #139a4c;
  --color-coral: #ff6b4a;
  --color-rating: var(--color-primary-blue);
  --color-danger: #e5484d;
  --color-yellow: #fcd116;
  --color-white: #ffffff;

  /* shadows */
  --shadow-card: 0 14px 34px rgba(7, 28, 44, 0.08);
  --shadow-soft: 0 6px 20px rgba(7, 28, 44, 0.06);
  --product-photo-backdrop:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .98) 0 24%, transparent 42%),
    radial-gradient(circle at 74% 82%, rgba(232, 236, 239, .7) 0 20%, transparent 46%),
    linear-gradient(145deg, #ffffff 0%, #f6f8fb 48%, #edf2f7 100%);
  --product-photo-border: rgba(7, 28, 44, .08);
  --product-photo-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), inset 0 -18px 34px rgba(7, 28, 44, .035);
  --product-photo-image-radius: 12px;

  /* radii */
  --radius-xs: 6px;
  --radius-sm: 30px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  /* layout */
  --container-max: 1500px;
  --container-pad: clamp(1rem, 3vw, 2.5rem);
  --header-height: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* z-index */
  --z-header: 1000;
  --z-overlay: 500;

  /* timing */
  --ease: 180ms ease;

  /* typography */
  --font-title: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* support hero */
  --support-hero-image-width: clamp(320px, 36vw, 560px);
  --support-hero-image-max-height: clamp(280px, 36vw, 500px);
  --support-hero-image-offset-x: 0px;
  --support-hero-image-offset-y: 0px;

  /* landing hero */
  --landing-hero-min-height: clamp(670px, 100svh, 958px);
  --landing-hero-copy-width: min(100%, 73rem);
  --landing-hero-copy-bottom: clamp(2.4rem, 7vw, 2rem);
  --landing-hero-image-shift: clamp(2.4rem, 4.6vw, 4.6rem);
  --landing-hero-copy-y-desktop: -76px;
  --landing-hero-copy-y-laptop: -76px;
  --landing-hero-copy-y-tablet: 5px;
  --landing-hero-copy-y-mobile: 5px;
  --landing-hero-copy-y-phone: 5px;
  --landing-hero-copy-y-small: 5px;
  --landing-hero-copy-y-mini: 5px;

  /* editorial banner */
  --editorial-banner-media-width: min(46vw, 620px);
  --editorial-banner-media-height: clamp(220px, 20vw, 300px);
  --editorial-banner-media-offset-x: 0px;
  --editorial-banner-media-offset-y: 0px;
  --editorial-banner-media-scale: 1;
  --editorial-banner-media-position: center bottom;
  --editorial-banner-logo-width: clamp(150px, 17vw, 245px);
  --editorial-banner-flag-height: clamp(32px, 4vw, 37px);
  --editorial-banner-brand-gap: clamp(.55rem, 1vw, .8rem);
  --editorial-banner-logo-offset-x: 100px;
  --editorial-banner-logo-offset-y: -41px;
  --editorial-banner-title-offset-x: 0px;
  --editorial-banner-title-offset-y: 0px;
  --editorial-banner-copy-offset-x: 0px;
  --editorial-banner-copy-offset-y: 0px;
}

/* ============================================
   RESET & BASE
   ============================================ */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg-warm);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: var(--header-height);
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

::selection {
  background: var(--color-primary-blue-soft);
  color: var(--color-navy);
}

/* ============================================
   SKIP-LINK & UTILITIES
   ============================================ */
.skip-link {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 500;
  background: var(--color-navy);
  color: white;
  padding: .7rem 1rem;
  border-radius: var(--radius-sm);
  transition: top var(--ease);
}

.skip-link:focus {
  top: 1rem;
}

/* ============================================
   LAYOUT & UTILITIES
   ============================================ */
.container {
  width: min(var(--container-max), calc(100% - (var(--container-pad) * 2)));
  margin-inline: auto;
}

.section {
  padding: clamp(2.2rem, 5vw, 4.5rem) 0;
}

.section-tight {
  padding: clamp(1.4rem, 3vw, 2.4rem) 0;
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
.scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 1.15rem, 0);
  transition:
    opacity 420ms ease,
    transform 520ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.landing-hero-reveal {
  opacity: 0;
  transform: translate3d(0, 1.4rem, 0);
  transition:
    opacity 460ms ease,
    transform 560ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.landing-hero-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 1rem, 0);
}

.collection-reveal {
  opacity: 0;
  filter: blur(7px) saturate(.94);
  transform: translate3d(0, 1.35rem, 0) scale(.94);
  transform-origin: 50% 88%;
  transition:
    opacity 300ms ease,
    transform 620ms cubic-bezier(.2, 1.35, .24, 1),
    filter 460ms ease,
    box-shadow 520ms ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.collection-reveal.is-visible {
  opacity: 1;
  filter: blur(0) saturate(1);
  transform: translate3d(0, 0, 0) scale(1);
}

.collection-reveal .collection-card-visual img {
  transform: scale(1.055);
  transition:
    transform 760ms cubic-bezier(.16, 1, .3, 1),
    filter 520ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.collection-reveal.is-visible .collection-card-visual img {
  transform: scale(1);
}

.collection-reveal.is-visible.collection-card-editorial:hover .collection-card-visual img {
  transform: scale(1.035);
  filter: saturate(1.08);
}

.collection-reveal .collection-card-content,
.collection-reveal .collection-card-note {
  opacity: 0;
  transform: translate3d(0, .55rem, 0);
  transition:
    opacity 320ms ease,
    transform 520ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--reveal-delay, 0ms) + 70ms);
}

.collection-reveal.is-visible .collection-card-content,
.collection-reveal.is-visible .collection-card-note {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.scale-reveal {
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0, .95rem, 0) scale(.975);
  transition:
    opacity 380ms ease,
    transform 520ms cubic-bezier(.16, 1, .3, 1),
    filter 420ms ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.scale-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.mask-reveal {
  opacity: 0;
  transform: translate3d(0, .9rem, 0);
  transition:
    opacity 380ms ease,
    transform 520ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.mask-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.chip-reveal {
  opacity: 0;
  filter: blur(3px);
  transform: translate3d(0, .62rem, 0) scale(.94);
  transition:
    opacity 300ms ease,
    transform 430ms cubic-bezier(.2, 1.3, .24, 1),
    filter 320ms ease,
    background var(--ease),
    border-color var(--ease),
    color var(--ease);
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms, 0ms;
  will-change: opacity, transform, filter;
}

.chip-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {

  .scroll-reveal,
  .landing-hero-reveal,
  .collection-reveal,
  .chip-reveal,
  .scale-reveal,
  .mask-reveal {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
    transition: none;
  }

  .site-header,
  .mobile-menu-backdrop,
  .mobile-menu-panel,
  .mobile-menu nav a,
  .menu-toggle span {
    transition: none;
  }
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  min-height: var(--header-height);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .88));
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(221, 227, 234, .78);
  box-shadow: 0 10px 30px rgba(7, 28, 44, .06);
  transition: transform 260ms ease, box-shadow var(--ease), background var(--ease), border-color var(--ease);
}

.site-header.is-hidden {
  transform: translateY(calc(-100% - 10px));
}

.site-header.is-menu-open {
  transform: none;
}

.site-header.is-condensed {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .92));
  box-shadow: 0 16px 38px rgba(7, 28, 44, .09);
}

.header-inner {
  position: relative;
  z-index: 3;
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: clamp(.8rem, 1.8vw, 1.4rem);
}

.logo-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  border-radius: 16px;
  padding: .22rem .35rem;
  transition: background var(--ease), transform var(--ease);
}

.logo-link:hover {
  background: rgba(11, 85, 244, .06);
  transform: translateY(-1px);
}

.logo-img {
  height: 42px;
  width: auto;
  object-fit: contain;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.8vw, 1.4rem);
}

.header-nav a {
  font-size: .9rem;
  font-weight: 650;
  color: var(--color-navy);
  opacity: .82;
  padding: .6rem .15rem;
  border-bottom: 2px solid transparent;
  transition: color var(--ease), opacity var(--ease), border-color var(--ease);
}

.header-nav a:hover,
.header-nav a.is-active {
  color: var(--color-primary-blue);
  opacity: 1;
  border-color: var(--color-yellow);
}

.search-box {
  display: flex;
  align-items: center;
  min-width: 210px;
  max-width: 360px;
  justify-self: center;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .45rem .75rem;
  box-shadow: 0 1px 0 rgba(7, 28, 44, .03);
}

.search-box input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--color-text);
  font-size: .92rem;
}

.search-box .icon {
  width: 20px;
  height: 20px;
  color: var(--color-navy);
  opacity: .85;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.header-actions [data-tooltip] {
  position: relative;
}

.header-actions [data-tooltip]::before,
.header-actions [data-tooltip]::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.header-actions [data-tooltip]::before {
  content: attr(data-tooltip);
  top: calc(100% + 12px);
  transform: translate(-50%, -8px) scale(.96);
  padding: .5rem .72rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(244, 248, 255, .9));
  box-shadow:
    0 14px 34px rgba(7, 28, 44, .14),
    0 2px 10px rgba(11, 85, 244, .08);
  backdrop-filter: blur(18px) saturate(155%);
  color: var(--color-navy);
  font-size: .76rem;
  font-weight: 780;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  z-index: 8;
}

.header-actions [data-tooltip]::after {
  content: '';
  top: calc(100% + 8px);
  width: 10px;
  height: 10px;
  transform: translate(-50%, -6px) rotate(45deg) scale(.96);
  border-left: 1px solid rgba(255, 255, 255, .78);
  border-top: 1px solid rgba(255, 255, 255, .78);
  background: rgba(250, 252, 255, .95);
  box-shadow: -4px -4px 12px rgba(11, 85, 244, .04);
  z-index: 7;
}

.header-actions [data-tooltip]:hover::before,
.header-actions [data-tooltip]:hover::after,
.header-actions [data-tooltip]:focus-visible::before,
.header-actions [data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.header-icon,
.menu-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border: 1px solid rgba(221, 227, 234, .8);
  border-radius: 999px;
  color: var(--color-navy);
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 8px 20px rgba(7, 28, 44, .05);
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}

.header-icon:hover,
.menu-toggle:hover {
  background: var(--color-primary-blue-soft);
  color: var(--color-primary-blue);
  border-color: rgba(11, 85, 244, .22);
  box-shadow: 0 10px 22px rgba(11, 85, 244, .1);
  transform: translateY(-1px);
}

.header-icon .icon,
.menu-toggle .icon {
  width: 22px;
  height: 22px;
}

.menu-toggle {
  position: relative;
  flex-direction: column;
  gap: 4px;
}

.menu-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 240ms ease, opacity 180ms ease;
}

.site-header.is-menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.site-header.is-menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;
  transform: scaleX(.4);
}

.site-header.is-menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.fav-count,
.cart-count {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 2;
  box-sizing: border-box;
  width: 22px;
  min-width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  transform: translate(38%, -38%);
  border: 2px solid var(--color-surface);
  box-shadow: 0 4px 10px rgba(7, 28, 44, .16);
  pointer-events: none;
}

.cart-count {
  background: var(--color-primary-blue);
}

.fav-action {
  position: relative;
}

.fav-count {
  background: #dc2626;
}

.fav-action.has-favorites {
  color: var(--color-primary-blue);
}

.fav-action.has-favorites:hover {
  color: var(--color-primary-blue);
}

.account-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
  overflow: visible;
  transition: filter 180ms ease;
  line-height: 0;
}

.account-action:hover {
  filter: brightness(1.08);
}

.account-avatar {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .8);
  box-shadow: 0 4px 12px rgba(7, 28, 44, .1);
}

.account-photo {
  background: #fff;
}

.account-initial {
  display: grid;
  place-items: center;
  background: var(--color-primary-blue);
  color: #fff;
  font-size: .94rem;
  font-weight: 900;
  line-height: 1;
}

.button-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  gap: .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .5);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .32), transparent 34%),
    linear-gradient(135deg, #21d36d, #11964b);
  color: #fff;
  font-weight: 800;
  padding: .6rem 1rem;
  box-shadow: 0 12px 28px rgba(29, 190, 97, .24);
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
}

.button-whatsapp .icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  object-fit: contain;
}

.whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: calc(var(--z-header) + 10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 3.5rem;
  min-width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .32), transparent 34%),
    linear-gradient(135deg, #21d36d, #11964b);
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
  box-shadow: 0 12px 28px rgba(29, 190, 97, .24);
  transition: max-width .35s ease, border-radius .35s ease, padding .35s ease, gap .35s ease, background var(--ease), opacity var(--ease), box-shadow var(--ease), transform var(--ease);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  visibility: visible;
}

.whatsapp-float.is-near-footer,
.whatsapp-float.is-near-footer:hover {
  opacity: 0;
  transform: translateY(12px) scale(.96);
  pointer-events: none;
  visibility: hidden;
}

.whatsapp-float:hover {
  gap: .65rem;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: .72rem 1.25rem .72rem .85rem;
  border-radius: 999px;
  justify-content: flex-start;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .36), transparent 34%),
    linear-gradient(135deg, #1fc967, #0f8543);
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(29, 190, 97, .32);
}

.whatsapp-float .icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  object-fit: contain;
}

.whatsapp-float span {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity .25s ease, max-width .35s ease;
}

.whatsapp-float:hover span {
  opacity: 1;
  max-width: 360px;
}

.member-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) + 80);
  display: grid;
  place-items: center;
  padding: clamp(.85rem, 3vw, 1.25rem);
}

.member-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(7, 28, 44, .58);
  backdrop-filter: blur(8px);
}

.member-modal-card {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: clamp(1.2rem, 4vw, 1.8rem);
  box-shadow: 0 24px 72px rgba(7, 28, 44, .24);
}

.member-modal-card h2 {
  margin: .35rem 0 .5rem;
  color: var(--color-navy);
  font-family: var(--font-title);
  font-size: clamp(1.55rem, 4vw, 2rem);
  line-height: 1.08;
}

.member-modal-card p {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
}

.member-modal-card form {
  display: grid;
  gap: .75rem;
}

.member-auth-alert {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin: -.15rem 0 1rem;
  padding: .8rem .9rem;
  border: 1px solid rgba(197, 47, 63, .25);
  border-radius: 12px;
  background: rgb(0 0 0);
  color: #fcd116;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.4;
}

.member-auth-alert svg {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .08rem;
}

.member-inline-resend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  min-height: 42px;
  margin: -.35rem 0 .95rem;
  border: 1px solid rgba(14, 82, 141, .18);
  border-radius: var(--radius-sm);
  background: rgba(234, 247, 253, .72);
  color: var(--color-navy);
  font-weight: 850;
  cursor: pointer;
}

.member-inline-resend:hover,
.member-inline-resend:focus-visible {
  border-color: rgba(14, 82, 141, .35);
  background: rgba(234, 247, 253, .95);
}

.member-inline-resend svg {
  width: 1rem;
  height: 1rem;
}

.member-field {
  display: grid;
  gap: .35rem;
  color: var(--color-navy);
  font-weight: 750;
}

.member-field small {
  color: var(--color-text-muted);
  font-size: .78rem;
  font-weight: 500;
}

.member-password-field {
  position: relative;
  display: block;
}

.member-password-field .input {
  width: 100%;
  padding-right: 3.25rem;
}

.member-password-toggle {
  position: absolute;
  top: 50%;
  right: .55rem;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-navy);
  cursor: pointer;
}

.member-password-toggle:hover,
.member-password-toggle:focus-visible {
  background: var(--color-surface-soft);
}

.member-password-toggle svg {
  width: 1.2rem;
  height: 1.2rem;
}

.member-modal-card input:user-invalid {
  border-color: #c52f3f;
  box-shadow: 0 0 0 3px rgba(197, 47, 63, .12);
}

.member-success-card {
  width: min(100%, 520px);
  padding: clamp(1.5rem, 5vw, 2.25rem);
  text-align: center;
  border: 1px solid rgba(14, 82, 141, .12);
}

.member-success-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: linear-gradient(90deg, var(--color-primary-blue), #31a6dc 70%, var(--color-accent-yellow));
}

.member-verify-card {
  width: min(100%, 420px);
  padding: clamp(1.25rem, 4vw, 1.85rem);
  text-align: center;
  border: 1px solid rgba(14, 82, 141, .12);
  overflow-x: hidden;
}

.member-verify-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin: .1rem auto .85rem;
  border-radius: 16px;
  background: rgba(234, 247, 253, .9);
  color: var(--color-primary-blue);
}

.member-verify-icon svg {
  width: 24px;
  height: 24px;
}

.member-success-brand {
  position: relative;
  display: grid;
  min-height: 74px;
  place-items: center;
  margin-bottom: .35rem;
}

.member-success-brand img {
  position: relative;
  width: min(190px, 58vw);
  height: auto;
}

.member-success-glow {
  position: absolute;
  width: 190px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(49, 166, 220, .16), transparent 70%);
}

.member-success-check {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  margin: .25rem auto .75rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--color-primary-blue), #168ec6);
  color: white;
  box-shadow: 0 10px 28px rgba(14, 82, 141, .24);
}

.member-success-check svg {
  width: 27px;
  height: 27px;
}

.member-success-kicker {
  margin: 0 0 .35rem !important;
  color: var(--color-primary-blue) !important;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.member-success-card h2 {
  margin-bottom: .7rem;
}

.member-success-card > p:not(.member-success-kicker):not(.member-success-note) {
  max-width: 420px;
  margin-inline: auto;
}

.member-success-email {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.15rem 0;
  padding: .85rem 1rem;
  border: 1px solid rgba(14, 82, 141, .14);
  border-radius: 14px;
  background: rgba(234, 247, 253, .68);
  color: var(--color-navy);
  text-align: left;
  min-width: 0;
}

.member-success-email svg {
  flex: 0 0 auto;
  color: var(--color-primary-blue);
}

.member-success-email span,
.member-success-email small,
.member-success-email strong {
  display: block;
  min-width: 0;
}

.member-success-email small {
  margin-bottom: .1rem;
  color: var(--color-text-muted);
}

.member-success-email strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.member-verify-card #member-verify-copy {
  max-width: 31ch;
  margin-inline: auto;
  line-height: 1.42;
}

.member-verify-card #member-verify-copy strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.member-verify-email {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  max-width: 100%;
  margin: 1rem 0 1.05rem;
  padding: .85rem .95rem;
}

.member-verify-email svg {
  width: 1.15rem;
  height: 1.15rem;
}

.member-verify-email strong {
  font-size: .9rem;
  line-height: 1.28;
}

.member-success-steps {
  display: grid;
  gap: .55rem;
  text-align: left;
}

.member-success-steps > span {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--color-text-muted);
  font-size: .88rem;
}

.member-success-steps b {
  display: grid;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-navy);
  color: white;
  font-size: .74rem;
}

.member-success-note {
  margin: 1rem 0 !important;
  color: var(--color-text-muted) !important;
  font-size: .78rem;
}

.member-welcome-points {
  display: grid;
  place-items: center;
  gap: .1rem;
  width: min(100%, 260px);
  margin: 1rem auto 1.1rem;
  padding: 1rem;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff8e6, #eaf7fd);
  border: 1px solid rgba(14, 82, 141, .12);
}

.member-welcome-points strong {
  color: var(--color-primary-blue);
  font-family: var(--font-title);
  font-size: clamp(2.35rem, 9vw, 3.2rem);
  line-height: .9;
}

.member-welcome-points span {
  color: var(--color-navy);
  font-weight: 850;
}

.member-welcome-perks {
  max-width: 330px;
  margin: 0 auto;
}

.member-success-actions {
  display: grid;
  gap: .65rem;
  margin-top: 1rem;
}

.member-success-action {
  width: 100%;
  justify-content: center;
}

.member-resend-action {
  width: 100%;
  justify-content: center;
}

@media (max-width: 560px) {
  .member-modal {
    align-items: center;
    padding: .85rem;
  }

  .member-verify-card {
    width: min(100%, 360px);
    max-height: calc(100dvh - 1.7rem);
    padding: 1.15rem;
    border-radius: 24px;
  }

  .member-verify-card h2 {
    font-size: clamp(1.55rem, 8vw, 1.9rem);
  }

  .member-verify-email {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .member-success-actions {
    gap: .55rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .member-success-card {
    animation: member-success-in .38s cubic-bezier(.2, .8, .2, 1) both;
  }

  .member-success-check {
    animation: member-success-pop .45s .14s cubic-bezier(.2, .9, .3, 1.3) both;
  }
}

@keyframes member-success-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes member-success-pop {
  from { opacity: 0; transform: scale(.65); }
  to { opacity: 1; transform: scale(1); }
}

.member-modal-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-navy);
  font-size: 1.3rem;
  cursor: pointer;
}

.member-switch {
  display: inline-flex;
  margin-top: .9rem;
  border: 0;
  background: transparent;
  color: var(--color-primary-blue);
  font-weight: 850;
  cursor: pointer;
}

.menu-toggle {
  display: none;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  align-items: center;
  margin-top: 1rem;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 46px;
  padding: .78rem 1.35rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 800;
  font-size: .95rem;
  transition: background var(--ease), color var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.btn .icon {
  width: 20px;
  height: 20px;
}

.btn .btn-brand-isotipo {
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  flex: 0 0 auto;
}

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

.btn-primary {
  background: var(--color-primary-blue);
  color: white;
  box-shadow: 0 12px 26px rgba(11, 85, 244, .22);
}

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

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-primary-blue);
  border-color: rgba(11, 85, 244, .36);
}

.btn-secondary:hover {
  border-color: var(--color-primary-blue);
  background: var(--color-primary-blue-soft);
}

.btn-dark {
  background: var(--color-navy);
  color: white;
}

.btn-dark:hover {
  background: #0d2b42;
}

.btn-soft {
  background: var(--color-primary-blue-soft);
  color: var(--color-primary-blue);
  border-color: rgba(11, 85, 244, .14);
}

.btn-soft:hover {
  border-color: rgba(11, 85, 244, .36);
}

.btn:focus-visible,
.header-nav a:focus-visible,
.header-icon:focus-visible,
.chip:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(11, 85, 244, .22);
  outline-offset: 2px;
}

.btn[disabled],
.is-disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
}

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(112deg, #fff 0%, #fff 40%, #f3eee4 100%);
  border-bottom: 1px solid rgba(221, 227, 234, .68);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: clamp(430px, 54vw, 610px);
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero-copy>* {
  max-width: 34rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  min-height: 32px;
  padding: .42rem .68rem;
  border-radius: 999px;
  background: rgb(255, 255, 255);
  color: black;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .03em;
  backdrop-filter: blur(12px);
}

/* ============================================
   HERO
   ============================================ */
.hero h1,
.page-title,
.section-title,
.brand-heading {
  margin: 0;
  font-family: var(--font-title);
  color: var(--color-primary-blue);
  letter-spacing: -0.045em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .92),
    0 2px 0 rgba(255, 255, 255, .52),
    0 10px 24px rgba(7, 28, 44, .13),
    0 4px 12px rgba(11, 85, 244, .12);
}

.hero h1 {
  font-size: clamp(2.65rem, 6vw, 5.25rem);
  line-height: 1.1;
  max-width: 680px;
  color: white;
}

.hero p {
  max-width: 39ch;
  margin: .9rem 0 0;
  color: rgba(16, 24, 40, .82);
  font-size: clamp(1.08rem, 1.55vw, 1.34rem);
  font-weight: 560;
  line-height: 1.42;
  letter-spacing: -.018em;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .64),
    0 8px 22px rgba(7, 28, 44, .06);
}

.hero p span {
  color: var(--color-primary-blue);
  font-weight: 720;
}

.hero-note {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-text-muted);
  font-size: .92rem;
  font-weight: 650;
  margin-top: 1rem;
}

.hero-note .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-left: 10px;
  background: var(--color-whatsapp);
}

.hero-note .dot.is-live {
  box-shadow:
    0 0 0 .28rem rgba(34, 197, 94, .13),
    0 0 16px rgba(34, 197, 94, .5);
  animation: live-pulse 1.9s ease-in-out infinite;
  transform-origin: center;
}

.country-inline {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.flag-co {
  width: 1.15rem;
  height: .78rem;
  display: inline-block;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(2, 22, 38, .1);
  background: linear-gradient(to bottom,
      var(--color-yellow) 0 50%,
      #003893 50% 75%,
      #ce1126 75% 100%);
}

@keyframes live-pulse {

  0%,
  100% {
    box-shadow:
      0 0 0 .22rem rgba(34, 197, 94, .12),
      0 0 12px rgba(34, 197, 94, .4);
    transform: scale(.96);
  }

  50% {
    box-shadow:
      0 0 0 .43rem rgba(34, 197, 94, .2),
      0 0 22px rgba(34, 197, 94, .72);
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-note .dot.is-live {
    animation: none;
  }
}

.hero-visual {
  align-self: stretch;
  display: grid;
  align-items: end;
}

.hero-visual img {
  width: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: 0;
}

.hero-split {
  border-bottom: 0;
}

.hero-split .hero-inner {
  width: 100%;
  max-width: none;
  display: grid;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

.hero-split .hero-copy {
  grid-area: var(--hero-copy-grid-area, copy);
  align-self: var(--hero-copy-align-self, stretch);
  justify-self: var(--hero-copy-justify-self, stretch);
  width: var(--hero-copy-width, 100%);
  padding: var(--hero-copy-padding, clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 3.4vw, 4rem));
  position: relative;
  min-width: 0;
  color: white;
  text-align: center;
  background: none;
  z-index: var(--hero-copy-z-index, 1);
}

.hero-split .landing-hero-copy {
  --hero-copy-grid-area: copy;
  --hero-copy-align-self: stretch;
  --hero-copy-justify-self: stretch;
  --hero-copy-width: 100%;
  --hero-copy-padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 3.4vw, 4rem);
  --hero-copy-z-index: 1;
  --landing-hero-copy-y-active: var(--landing-hero-copy-y-desktop);
  translate: 0 var(--landing-hero-copy-y-active);
}

.hero-split .landing-hero-copy h1,
.hero-split .landing-hero-copy p {
  text-shadow:
    0 2px 4px rgba(7, 28, 44, .56),
    0 10px 26px rgba(7, 28, 44, .36),
    0 1px 0 rgba(7, 28, 44, .26);
}


.hero-split .coral-line {
  width: clamp(68px, 7vw, 112px);
  height: 5px;
  background: linear-gradient(90deg, var(--color-yellow) 0%, var(--color-yellow) 55%, var(--color-yellow));
  box-shadow: 0 10px 24px rgba(255, 107, 74, .26);
}

.hero-split .button-row {
  flex-wrap: nowrap;
  justify-content: center;
  gap: .75rem;
  max-width: min(100%, 30rem);
  margin-top: clamp(1.15rem, 2.2vw, 1.7rem);
  margin-inline: auto;
}

.hero-split .btn {
  min-height: 50px;
  border-radius: 999px;
}

.hero-split .btn-primary {
  background: #ffffff;
  color: var(--color-primary-blue);
  box-shadow: 0 18px 42px rgba(2, 18, 32, .28);
}

.hero-split .btn-primary:hover {
  background: var(--color-yellow);
}

.hero-split .btn-secondary {
  background: rgba(255, 255, 255, .13);
  color: white;
  border-color: rgba(255, 255, 255, .46);
  backdrop-filter: blur(14px) saturate(150%);
}

.hero-split .btn-secondary:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .72);
}

.hero-split .hero-note {
  width: fit-content;
  margin-top: clamp(1rem, 2vw, 1.35rem);
  margin-inline: auto;
  padding: .55rem 5rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(4, 24, 44, .34);
  color: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px) saturate(145%);
}

.hero-split .landing-hero-note-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.48rem, 1vw, .7rem);
  width: fit-content;
  max-width: min(100%, 26rem);
  margin-top: clamp(1rem, 2vw, 1.35rem);
  margin-inline: auto;
}

.hero-split .landing-hero-note-row .hero-note {
  margin: 0;
}

.hero-split .landing-hero-note-row .landing-hero-isotype {
  flex: 0 0 auto;
  margin: 0;
}

.hero-split .flag-co {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .42);
}

.hero-split .hero-visual {
  position: relative;
  align-self: stretch;
  overflow: hidden;
  isolation: isolate;
}

.hero-split .hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(3 16 32 / 16%) 0%, rgb(3 16 32 / 19%) 34%, rgba(3, 16, 32, .06) 68%),
    linear-gradient(180deg, rgba(3, 16, 32, .12) 0%, rgba(3, 16, 32, 0) 38%, rgba(3, 16, 32, .56) 100%);
}

.hero-split .hero-media-slide {
  --hero-slide-x: 56%;
  --hero-slide-y: 26%;
  --hero-slide-fit: cover;
  --hero-slide-overscan-y: 0px;
  --hero-slide-active-scale: 1;
  --hero-slide-idle-scale: 1.026;
  --hero-slide-exit-scale: 1.012;
  --hero-slide-shift-x: 0px;
  --hero-slide-shift-y: 0px;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: var(--hero-slide-fit);
  object-position: var(--hero-slide-x) var(--hero-slide-y);
  display: block;
  opacity: 0;
  transform: translate3d(var(--hero-slide-shift-x), var(--hero-slide-shift-y), 0) scale(var(--hero-slide-idle-scale));
  transform-origin: center center;
  transition:
    opacity 1100ms ease,
    transform 6200ms ease;
  will-change: opacity, transform;
}

.hero-commerce-stack {
  display: none;
}

.landing-hero-isotype {
  display: block;
  z-index: 1;
  width: var(--landing-isotype-width, clamp(2.7rem, 7vw, 3.8rem));
  height: auto;
  margin: var(--landing-isotype-margin, clamp(.55rem, 1.7vw, .78rem) auto 0);
  opacity: var(--landing-isotype-opacity, .88);
  filter: drop-shadow(0 14px 28px rgba(3, 18, 54, .2));
  pointer-events: none;
  user-select: none;
}

.home-commerce-rails-section {
  display: none;
}

@keyframes hero-commerce-marquee {
  from {
    transform: translate3d(var(--hero-commerce-from), 0, 0);
  }

  to {
    transform: translate3d(var(--hero-commerce-to), 0, 0);
  }
}

@keyframes hero-commerce-marquee-reverse {
  from {
    transform: translate3d(var(--hero-commerce-from), 0, 0);
  }

  to {
    transform: translate3d(var(--hero-commerce-to), 0, 0);
  }
}

@media (max-width: 1024px) {
  .hero-split {
    margin-top: calc(var(--header-height) * -1);
    background: var(--color-primary-blue);
  }

  .hero-split .hero-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "hero";
    min-height: var(--landing-hero-min-height);
  }

  .hero-split .landing-hero-copy {
    --hero-copy-grid-area: hero;
    --hero-copy-align-self: end;
    --hero-copy-justify-self: center;
    --hero-copy-width: min(var(--container-max), calc(100% - (var(--container-pad) * 2)));
    --hero-copy-padding:
      calc(var(--header-height) + clamp(2.2rem, 5vw, 4.8rem)) .35rem var(--landing-hero-copy-bottom);
    --hero-copy-z-index: 4;
  }

  .hero-split .hero-visual {
    grid-area: hero;
    min-height: var(--landing-hero-min-height);
    background: var(--color-primary-blue);
  }

  .home-commerce-rails-section {
    display: block;
    padding-block: 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 10% 15%, rgba(252, 209, 22, .2), transparent 18rem),
      linear-gradient(112deg, #082b36 0%, var(--color-primary-blue) 100%);
  }

  .home-commerce-rails-section .hero-commerce-stack-section {
    position: relative;
    left: 50%;
    display: grid;
    gap: .62rem;
    width: 100vw;
    max-width: none;
    margin: 0;
    padding: clamp(.92rem, 2.6vw, 1.25rem) 0 clamp(1rem, 2.8vw, 1.35rem);
    border-block: 1px solid rgba(255, 255, 255, .18);
    background:
      linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .12) 12%, rgba(255, 255, 255, .12) 88%, transparent 100%),
      rgba(2, 31, 112, .16);
    box-shadow:
      0 20px 44px rgba(3, 18, 54, .16),
      inset 0 1px 0 rgba(255, 255, 255, .24);
    transform: translateX(-50%);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
  }

  .home-commerce-rails-section .hero-commerce-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding-inline: var(--container-pad);
    color: rgba(255, 255, 255, .84);
    font-size: clamp(.66rem, 1.8vw, .78rem);
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
  }

  .home-commerce-rails-section .hero-commerce-head::before,
  .home-commerce-rails-section .hero-commerce-head::after {
    content: '';
    width: min(18%, 58px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42));
  }

  .home-commerce-rails-section .hero-commerce-head::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, .42), transparent);
  }

  .home-commerce-rails-section .hero-commerce-rails {
    display: grid;
    gap: .42rem;
    width: 100%;
    overflow: hidden;
  }

  .home-commerce-rails-section .hero-commerce-marquee {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    height: clamp(46px, 9vw, 58px);
    overflow: hidden;
    background: rgba(255, 255, 255, .12);
    mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  }

  .home-commerce-rails-section .hero-commerce-marquee.is-reverse {
    height: clamp(50px, 10vw, 64px);
    background: rgba(255, 255, 255, .18);
  }

  .home-commerce-rails-section .hero-commerce-track {
    --hero-commerce-from: -33.333333%;
    --hero-commerce-to: -66.666667%;
    display: flex;
    align-items: center;
    width: max-content;
    animation: hero-commerce-marquee 27s linear infinite;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform;
  }

  .home-commerce-rails-section .hero-commerce-marquee.is-reverse .hero-commerce-track {
    animation-name: hero-commerce-marquee-reverse;
    animation-duration: 21s;
  }

  .home-commerce-rails-section .hero-commerce-sequence {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: clamp(1.05rem, 3.8vw, 1.55rem);
    padding-inline: clamp(.85rem, 3vw, 1.2rem);
  }

  .home-commerce-rails-section .hero-commerce-logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: clamp(86px, 22vw, 110px);
    height: 100%;
  }

  .home-commerce-rails-section .hero-commerce-logo img {
    display: block;
    width: auto;
    max-width: clamp(128px, 35vw, 160px);
    height: auto;
    max-height: 118px;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(2, 18, 54, .2));
  }

  .home-commerce-rails-section .hero-commerce-logo.is-carrier {
    min-width: clamp(92px, 24vw, 118px);
    padding: .12rem .2rem;
  }

  .home-commerce-rails-section .hero-commerce-logo.is-carrier img {
    max-width: clamp(118px, 34vw, 152px);
    max-height: 76px;
    border-radius: 999px;
    filter: drop-shadow(0 8px 12px rgba(2, 18, 54, .16));
  }
}

@media (min-width: 1025px) {
  .hero-split {
    min-height: calc(100svh - var(--header-height));
    margin-top: 0;
    background:
      radial-gradient(circle at 10% 15%, rgba(252, 209, 22, .28), transparent 22rem),
      linear-gradient(100deg, #082b36 0%, var(--color-primary-blue) 100%);
  }

  .hero-split .hero-inner {
    grid-template-columns: minmax(387px, 1.29fr) minmax(0, 2fr);
    grid-template-areas: "copy media";
    min-height: calc(100svh - var(--header-height));
    isolation: isolate;
  }

  .hero-split .hero-inner::before {
    content: '';
    grid-area: copy;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 12% 16%, rgba(252, 209, 22, .20), transparent 16rem),
      linear-gradient(112deg, rgba(8, 43, 54, .98) 0%, rgba(11, 85, 244, .96) 100%);
  }

  .hero-split .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .hero-split .landing-hero-copy {
    --landing-hero-copy-desktop-shift-y: -3rem;
    --landing-isotype-width: clamp(2rem, 4.4vw, 3.25rem);
    --landing-isotype-margin: 0;
    translate: none;
  }

  .hero-split .landing-hero-copy > h1,
  .hero-split .landing-hero-copy > .coral-line,
  .hero-split .landing-hero-copy > .button-row,
  .hero-split .landing-hero-copy > .landing-hero-note-row {
    translate: 0 var(--landing-hero-copy-desktop-shift-y);
  }

  .hero-split .landing-hero-copy h1,
  .hero-split .landing-hero-copy p {
    text-shadow:
      0 2px 0 rgba(3, 21, 67, .22),
      0 18px 42px rgba(3, 21, 67, .28);
  }

  .hero-split .landing-hero-copy h1 {
    max-width: 14ch;
    font-size: clamp(3.8rem, 5.8vw, 4.9rem);
    line-height: .94;
    letter-spacing: 0;
  }

  .hero-split .hero-copy>* {
    max-width: min(100%, 45rem);
  }

  .hero-split .coral-line {
    margin: clamp(1.15rem, 1.7vw, 1.55rem) auto clamp(.45rem, .8vw, .7rem);
  }

  .hero-split .button-row {
    max-width: min(100%, 45rem);
  }

  .hero-split .hero-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 24rem);
    max-width: 24rem;
    padding: .55rem 1.2rem;
    text-align: center;
  }

  .hero-commerce-stack {
    position: absolute;
    right: 0;
    bottom: clamp(4.35rem, 9.4vh, 4.7rem);
    left: 0;
    display: grid;
    gap: .56rem;
    max-width: none;
    margin-inline: 0;
    padding: .78rem 0 .86rem;
    border-block: 1px solid rgba(255, 255, 255, .2);
    border-inline: 0;
    border-radius: 0;
    background:
      linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .12) 12%, rgba(255, 255, 255, .12) 88%, transparent 100%),
      rgba(2, 31, 112, .14);
    box-shadow:
      0 22px 54px rgba(3, 18, 54, .18),
      inset 0 1px 0 rgba(255, 255, 255, .28);
    backdrop-filter: blur(18px) saturate(145%);
  }

  .hero-commerce-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: rgba(255, 255, 255, .82);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    padding-inline: clamp(.8rem, 2vw, 1.4rem);
  }

  .hero-commerce-head::before,
  .hero-commerce-head::after {
    content: '';
    width: min(18%, 58px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4));
  }

  .hero-commerce-head::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, .4), transparent);
  }

  .hero-commerce-rails {
    display: grid;
    gap: .38rem;
    overflow: hidden;
    width: 100%;
  }

  .hero-commerce-marquee {
    position: relative;
    display: flex;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    height: 46px;
    border-radius: 0;
    background: rgba(255, 255, 255, .13);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }

  .hero-commerce-marquee.is-reverse {
    height: 50px;
    border-radius: 0;
    background: rgba(255, 255, 255, .18);
  }

  .hero-commerce-track {
    --hero-commerce-from: -33.333333%;
    --hero-commerce-to: -66.666667%;
    display: flex;
    align-items: center;
    width: max-content;
    animation: hero-commerce-marquee 27s linear infinite;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
  }

  .hero-commerce-marquee.is-reverse .hero-commerce-track {
    animation-name: hero-commerce-marquee-reverse;
    animation-duration: 21s;
  }

  .hero-commerce-sequence {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 1.55rem;
    padding-inline: 1.2rem;
  }

  .hero-commerce-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 100%;
  }

  .hero-commerce-logo img {
    display: block;
    width: auto;
    max-width: 150px;
    height: auto;
    max-height: 118px;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(2, 18, 54, .22));
  }

  .hero-commerce-logo.is-carrier {
    min-width: 104px;
    padding: .12rem .2rem;
    border-radius: 999px;
    background: transparent;
  }

  .hero-commerce-logo.is-carrier img {
    max-width: 142px;
    max-height: 76px;
    border-radius: 999px;
    filter: drop-shadow(0 8px 12px rgba(2, 18, 54, .18));
  }

  @keyframes hero-commerce-marquee {
    from {
      transform: translate3d(var(--hero-commerce-from), 0, 0);
    }

    to {
      transform: translate3d(var(--hero-commerce-to), 0, 0);
    }
  }

  @keyframes hero-commerce-marquee-reverse {
    from {
      transform: translate3d(var(--hero-commerce-from), 0, 0);
    }

    to {
      transform: translate3d(var(--hero-commerce-to), 0, 0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-commerce-track {
      animation: none;
      transform: none;
    }
  }

  .hero-split .hero-visual {
    grid-area: media;
    min-height: calc(100svh - var(--header-height));
    background: #0b55f4;
  }

  .hero-split .hero-visual::after {
    background:
      linear-gradient(90deg, rgba(7, 28, 44, .16) 0%, rgba(7, 28, 44, .04) 26%, rgba(7, 28, 44, 0) 52%),
      linear-gradient(180deg, rgba(3, 16, 32, .08) 0%, rgba(3, 16, 32, 0) 46%, rgba(3, 16, 32, .28) 100%);
  }

  .hero-split .hero-media-slide {
    --hero-slide-overscan-y: 112px;
    top: calc(var(--hero-slide-overscan-y) * -1);
    right: 0;
    bottom: auto;
    left: 0;
    height: calc(100% + (var(--hero-slide-overscan-y) * 2));
  }
}

/* Hero carousel controls: edit x/y and shift per image. Zoom out animates from idle-scale to active-scale. */
.hero-split .hero-media-slide:nth-child(1) {
  --hero-slide-x: 50%;
  --hero-slide-y: 0%;
  --hero-slide-enter-scale: 1.055;
  --hero-slide-shift-y: 28px;
  /* baja/sube la imagen visualmente */
}

.hero-split .hero-media-slide:nth-child(2) {
  --hero-slide-x: 50%;
  --hero-slide-y: 0%;
  --hero-slide-enter-scale: 1.05;
  --hero-slide-shift-y: 4px;
  /* baja/sube la imagen visualmente */
}

.hero-split .hero-media-slide:nth-child(3) {
  --hero-slide-x: 50%;
  --hero-slide-y: 0%;
  --hero-slide-enter-scale: 1.055;
  --hero-slide-shift-y: 74px;
  /* baja/sube la imagen visualmente */
}

.hero-split .hero-media-slide:nth-child(4) {
  --hero-slide-x: 50%;
  --hero-slide-y: 0%;
  --hero-slide-enter-scale: 1.055;
  --hero-slide-shift-y: 64px;
  /* baja/sube la imagen visualmente */
}

.hero-split .hero-media-slide:nth-child(5) {
  --hero-slide-x: 50%;
  --hero-slide-y: 0%;
  --hero-slide-enter-scale: 1.05;
  --hero-slide-shift-y: 54px;
  /* baja/sube la imagen visualmente */
}

.hero-split .hero-media-slide:nth-child(6) {
  --hero-slide-x: 50%;
  --hero-slide-y: 0%;
  --hero-slide-enter-scale: 1.055;
  --hero-slide-shift-y: 24px;
  /* baja/sube la imagen visualmente */
}

.hero-split .hero-media-slide:nth-child(7) {
  --hero-slide-x: 50%;
  --hero-slide-y: 0%;
  --hero-slide-enter-scale: 1.055;
  --hero-slide-shift-y: 25px;
  /* baja/sube la imagen visualmente */
}

.hero-split .hero-media-slide.is-active {
  opacity: 1;
  transform: translate3d(var(--hero-slide-shift-x), var(--hero-slide-shift-y), 0) scale(var(--hero-slide-active-scale));
  z-index: 2;
}

.hero-split .hero-media-slide:first-child.is-active {
  animation: hero-first-slide-enter 7600ms linear both;
}

.hero-split .hero-media-slide.is-exiting {
  opacity: 1;
  transform: translate3d(var(--hero-slide-shift-x), var(--hero-slide-shift-y), 0) scale(var(--hero-slide-exit-scale));
  z-index: 1;
}

.hero-split .hero-media-rotator .hero-media-slide {
  --hero-slide-x: 50%;
  --hero-slide-y: 50%;
  --hero-slide-active-scale: 1;
  --hero-slide-idle-scale: 1;
  --hero-slide-exit-scale: 1;
  --hero-slide-enter-scale: 1;
  --hero-slide-shift-x: 0px;
  --hero-slide-shift-y: 0px;
}

@keyframes hero-first-slide-enter {
  0% {
    opacity: 0;
    filter: saturate(.86) contrast(.92) blur(5px);
    transform: translate3d(var(--hero-slide-shift-x), var(--hero-slide-shift-y), 0) scale(var(--hero-slide-enter-scale, 1.075)) translateX(0);
  }

  16% {
    opacity: 1;
    filter: saturate(1) contrast(1) blur(0);
  }

  100% {
    opacity: 1;
    filter: saturate(1) contrast(1) blur(0);
    transform: translate3d(var(--hero-slide-shift-x), var(--hero-slide-shift-y), 0) scale(var(--hero-slide-active-scale));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-split .hero-media-slide {
    animation: none;
    filter: none;
    transition: none;
    transform: none;
  }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 rgba(7, 28, 44, .03);
}

.card-pad {
  padding: clamp(1rem, 2vw, 1.4rem);
}

.trust-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .35rem;
  overflow: hidden;
  padding: .5rem;
  border-color: rgba(11, 85, 244, .12);
  border-radius: clamp(18px, 2vw, 26px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(247, 250, 255, .92)),
    radial-gradient(circle at 9% 0%, rgba(252, 209, 22, .2), transparent 34%);
  box-shadow:
    0 20px 56px rgba(7, 28, 44, .08),
    inset 0 1px 0 rgba(255, 255, 255, .98);
  isolation: isolate;
}

.trust-strip::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--color-yellow), var(--color-yellow));
  opacity: .95;
  z-index: -1;
}

.trust-strip.is-scrollable {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;

  overscroll-behavior-x: contain;
  cursor: grab;
}

.trust-strip.is-scrollable::-webkit-scrollbar {
  display: none;
}

.trust-strip.is-scrollable.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.trust-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: .78rem;
  padding: clamp(.85rem, 1.5vw, 1.05rem) clamp(.85rem, 1.5vw, 1.15rem);
  min-width: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, .52);
  transition:
    transform 220ms cubic-bezier(.22, 1, .36, 1),
    background 180ms ease,
    box-shadow 220ms ease;
}

.trust-item+.trust-item {
  border-left: 1px solid rgba(11, 85, 244, .1);
}

.trust-item:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 14px 28px rgba(11, 85, 244, .08);
}

.trust-strip.is-scrollable .trust-item {
  flex: 0 0 clamp(248px, 34vw, 320px);
  min-width: 0;
  scroll-snap-align: start;
}

@media (min-width: 881px) {
  .trust-strip.is-scrollable {
    display: grid;
    overflow: hidden;
    scroll-snap-type: none;
    cursor: default;
  }

  .trust-strip.is-scrollable .trust-item {
    flex: initial;
    scroll-snap-align: none;
  }
}

/* ============================================
   TRUST STRIP & REASONS
   ============================================ */
.trust-item .icon-wrap,
.reason-card .icon-wrap,
.support-card .icon-wrap,
.benefit-item .icon-wrap {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--color-navy);
}

.trust-item .icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(11, 85, 244, .1), rgba(252, 209, 22, .3));
  color: var(--color-primary-blue);
  box-shadow:
    inset 0 0 0 1px rgba(11, 85, 244, .09),
    0 10px 22px rgba(11, 85, 244, .1);
}

.trust-item .icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.15;
}

.trust-item h3 {
  margin: 0;
  font-size: clamp(.86rem, .9vw, .98rem);
  line-height: 1.05;
  color: var(--color-navy);
  letter-spacing: -.01em;
}

.trust-item p {
  margin: .22rem 0 0;
  color: var(--color-primary-blue);
  font-size: clamp(.76rem, .82vw, .84rem);
  font-weight: 680;
  line-height: 1.12;
}

.hero-split+.section-tight {
  position: relative;
  z-index: 6;
  margin-top: clamp(-1.45rem, -2.8vw, -.25rem);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.section-title {
  font-size: clamp(1.5rem, 3.2vw, 3.5rem);
  line-height: 1.1;
}

.section-kicker {
  color: var(--color-text-muted);
  margin: .35rem 0 0;
  max-width: 680px;
  font-weight: 600;
}

.link-arrow {
  color: var(--color-navy);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.link-arrow:hover {
  color: var(--color-primary-blue);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .70rem;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.chips.is-scrollable {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: .2rem;
  padding-inline: .1rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  cursor: grab;
}

.chips.is-scrollable::-webkit-scrollbar {
  display: none;
}

.chips.is-scrollable .chip {
  flex: 0 0 auto;
}

.chips.is-scrollable.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.chip {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-navy);
  border-radius: 999px;
  min-height: 42px;
  padding: .55rem 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 750;
  font-size: .91rem;
  transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
}

.chip .icon {
  width: 19px;
  height: 19px;
}

.chip:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 85, 244, .42);
  color: var(--color-primary-blue);
}

.chip.is-active {
  background: var(--color-primary-blue-soft);
  border-color: rgba(11, 85, 244, .55);
  color: var(--color-primary-blue);
}

.chip.is-accent {
  color: var(--color-primary-blue-hover);
  border-color: var(--color-yellow);
  background: var(--color-yellow);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.section-featured-collections {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(1.25rem, 2.5vw, 2.1rem);
}

.section-featured-collections::before,
.section-featured-collections::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  pointer-events: none;
}



.section-featured-collections::after {
  inset-block: 0;
  z-index: -1;
  opacity: .58;
  background:
    radial-gradient(circle at 10% 12%, transparent 0 8.4rem, rgba(11, 85, 244, .12) 8.48rem 8.56rem, transparent 8.64rem),
    radial-gradient(circle at 93% 24%, transparent 0 12.8rem, rgba(252, 209, 22, .22) 12.9rem 13rem, transparent 13.1rem),
    radial-gradient(circle at 73% 78%, transparent 0 9.8rem, rgba(11, 85, 244, .10) 9.9rem 10rem, transparent 10.1rem),
    linear-gradient(118deg, transparent 0 44%, rgba(11, 85, 244, .055) 44.15% 44.35%, transparent 44.5% 100%),
    linear-gradient(152deg, transparent 0 64%, rgba(252, 209, 22, .12) 64.12% 64.32%, transparent 64.45% 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 92%, transparent 100%);
}

.section-featured-collections .container {
  position: relative;
  z-index: 1;
  display: block;
}

.section-featured-collections .section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
  margin-bottom: clamp(.95rem, 1.8vw, 1.35rem);
  padding-bottom: .35rem;
  border-bottom: 1px solid rgba(11, 85, 244, .10);
}

.section-featured-collections .section-title {
  max-width: none;
  font-size: clamp(2.35rem, 4.2vw, 4.9rem);
  line-height: .9;
  letter-spacing: -.06em;
}

.section-featured-collections .section-kicker {
  max-width: 58ch;
  margin-top: .55rem;
  color: rgba(52, 64, 74, .82);
  font-size: clamp(.98rem, 1vw, 1.06rem);
  line-height: 1.45;
}

.section-featured-collections .link-arrow {
  width: fit-content;
  min-height: 42px;
  padding: .62rem .88rem;
  border: 1px solid rgba(11, 85, 244, .18);
  border-radius: 999px;
  background: rgba(11, 85, 244, .06);
  color: var(--color-primary-blue);
}

.collection-grid-featured {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: clamp(300px, 28vw, 355px);
  gap: clamp(.82rem, 1.1vw, 1.15rem);
}

.collection-card {
  position: relative;
  min-height: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(230px, 1fr) auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  color: var(--color-navy);
  box-shadow: var(--shadow-soft);
  isolation: isolate;
}

.collection-card-visual {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, .28), transparent 7rem),
    linear-gradient(135deg, #d7dee3 0%, #b9c3c9 48%, #9aa7af 100%);
  color: white;
  isolation: isolate;
}

.collection-card-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7, 28, 44, .05), rgba(7, 28, 44, .60));
}

.collection-card-visual img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.collection-card-content {
  position: absolute;
  inset: auto 1.1rem 1.1rem;
}

.collection-card h3 {
  margin: 0 0 .3rem;
  font-family: var(--font-title);
  font-size: 1.3rem;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-shadow:
    0 2px 4px rgba(7, 28, 44, .68),
    0 10px 24px rgba(7, 28, 44, .42),
    0 1px 0 rgba(7, 28, 44, .32);
}

.collection-card-note {
  display: flex;
  align-items: flex-start;
  gap: .58rem;
  margin: 0;
  min-height: 4.35rem;
  padding: .78rem .95rem .95rem;
  border-top: 1px solid rgba(11, 85, 244, .1);
  background:
    radial-gradient(circle at 8% 12%, rgba(252, 209, 22, .18), transparent 4.8rem),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .94));
  color: var(--color-text-muted);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.38;
  text-shadow: none;
}

.collection-card-note span:last-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.collection-card-note-dot {
  width: .52rem;
  height: .52rem;
  margin-top: .34rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--color-yellow);
  box-shadow:
    0 0 0 3px rgba(252, 209, 22, .22),
    inset 0 0 0 1px rgba(11, 85, 244, .12);
}

.collection-card .mini-btn {
  display: inline-flex;
  padding: .5rem .7rem;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: .82rem;
}

.collection-card-editorial {
  min-height: clamp(300px, 28vw, 355px);
  border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(7, 28, 44, .12));
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.collection-card-editorial .collection-card-visual {
  display: flex;
  align-items: flex-end;
  padding: 1.1rem;
}

.collection-card-editorial .collection-card-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, .26), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 48%);
  pointer-events: none;
}

.collection-card-editorial .collection-card-visual::after {
  background: linear-gradient(180deg, rgba(7, 28, 44, .04) 0%, rgba(7, 28, 44, .18) 40%, rgba(197, 162, 57, 0.359) 100%), linear-gradient(135deg, rgba(5, 16, 32, .10) 0%, rgb(5 16 32 / 0%) 100%);
}

.collection-card-editorial:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, .34);
  box-shadow: 0 22px 48px rgba(7, 28, 44, .14);
}

.collection-card-editorial img {
  transition: transform .65s ease, filter .65s ease;
  filter: saturate(1.04);
}

.collection-card-editorial:hover img {
  transform: scale(1.035);
  filter: saturate(1.08);
}

.collection-card-meta {
  position: absolute;
  inset: 1rem 1rem auto;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  pointer-events: none;
}

.collection-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  margin: 0;
  padding: .42rem .72rem .42rem .58rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 72%);
  color: var(--color-primary-blue);
  letter-spacing: .11em;
  font-size: .8rem;
  backdrop-filter: blur(12px);
}

.collection-card-eyebrow.is-accent {
  background: var(--color-yellow);
  border: 1px solid var(--color-yellow);
  color: var(--color-primary-blue-hover);
  box-shadow: 0 10px 24px rgba(252, 209, 22, .24);
}

.collection-card-eyebrow-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  stroke-width: 2.25;
}

.collection-card-index {
  position: relative;
  min-width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  font-family: var(--font-title);
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--color-primary-blue);
  border-radius: 999px;
  border: 1px solid rgba(252, 209, 22, .88);
  background: var(--color-yellow);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    0 10px 24px rgba(252, 209, 22, .24),
    0 4px 12px rgba(7, 28, 44, .14);
}

.collection-card-editorial .collection-card-content {
  position: relative;
  inset: auto;
  display: grid;
  align-content: end;
  gap: .65rem;
  width: 100%;
  padding-top: 4rem;
}

.collection-card-editorial h3 {
  margin: 0;
  max-width: 11ch;
  font-size: clamp(1.38rem, 2vw, 1.9rem);
  line-height: .98;
  text-wrap: balance;
}

.collection-card-editorial .collection-card-note {
  margin: 0;
  min-height: 5.15rem;
}

.collection-card-editorial .mini-btn {
  justify-self: flex-start;
  margin-top: .15rem;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .52);
  backdrop-filter: blur(12px);
}

.collection-grid-featured .collection-card-editorial:nth-child(1) {
  min-height: clamp(300px, 28vw, 355px);
}

.collection-grid-featured .collection-card-editorial:nth-child(1) h3 {
  margin: 0;
  max-width: 11ch;
  font-size: clamp(1.38rem, 2vw, 1.9rem);
  line-height: .98;
  text-wrap: balance;
}

.collection-grid-featured .collection-card-editorial:nth-child(1) .collection-card-note {
  width: 100%;
  max-width: none;
  font-size: 1rem;
}

.collection-grid-featured .collection-card-editorial:nth-child(4) .collection-card-content,
.collection-grid-featured .collection-card-editorial:nth-child(8) .collection-card-content {
  justify-items: start;
  text-align: left;
}

.collection-grid-featured .collection-card-editorial:nth-child(4) .mini-btn,
.collection-grid-featured .collection-card-editorial:nth-child(8) .mini-btn {
  justify-self: start;
}

.collection-grid-featured .collection-card-editorial:nth-child(4) .collection-card-note,
.collection-grid-featured .collection-card-editorial:nth-child(8) .collection-card-note {
  margin-left: 0;
}

.page-hero-categories {
  position: relative;
  overflow: hidden;
}

.page-hero-catalog {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 2.6vw, 2rem) 0 clamp(1rem, 2vw, 1.35rem);
  background:
    radial-gradient(circle at 9% 8%, rgba(252, 209, 22, .34), transparent 22rem),
    radial-gradient(circle at 90% 12%, rgba(11, 85, 244, .16), transparent 27rem),
    linear-gradient(180deg, #fff 0%, #f7faff 58%, var(--color-bg-warm) 100%);
}

.page-hero-categories::before,
.page-hero-categories::after {
  content: '';
  position: absolute;
  inset: auto;
  border-radius: 999px;
  pointer-events: none;
}

.page-hero-categories::before {
  top: -90px;
  right: min(4vw, 54px);
  width: clamp(240px, 28vw, 420px);
  height: clamp(240px, 28vw, 420px);
  background: radial-gradient(circle, rgba(11, 85, 244, .10) 0%, rgba(11, 85, 244, 0) 68%);
}

.page-hero-categories::after {
  left: -100px;
  bottom: -150px;
  width: clamp(260px, 30vw, 460px);
  height: clamp(260px, 30vw, 460px);
  background: radial-gradient(circle, rgba(255, 182, 83, .12) 0%, rgba(255, 182, 83, 0) 72%);
}

.page-hero-categories .container {
  position: relative;
  z-index: 1;
}

.page-hero-catalog .container {
  position: relative;
  z-index: 1;
}

.category-hero-layout {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: clamp(1.4rem, 3vw, 2.6rem);
}

.category-hero-copy {
  display: grid;
  align-content: start;
  position: relative;
}

/* ============================================
   CATALOG / CATEGORY HERO
   ============================================ */
.catalog-hero-copy {
  display: grid;
  align-content: start;
}

.catalog-hero-layout {
  grid-template-columns: minmax(390px, .9fr) minmax(300px, .68fr);
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: center;
  min-height: clamp(250px, 22vw, 340px);
}

.catalog-hero-visual {
  --catalog-hero-visual-width: min(100%, 620px);
  --catalog-hero-visual-offset-x: clamp(.25rem, 1.6vw, 1.4rem);
  --catalog-hero-visual-offset-y: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 100%;
  min-width: 0;
  transform: translate(var(--catalog-hero-visual-offset-x), var(--catalog-hero-visual-offset-y));
}

.catalog-hero-visual img {
  width: var(--catalog-hero-visual-width);
  height: auto;
  display: block;
  object-fit: contain;
  object-position: right center;
  filter: drop-shadow(0 18px 34px rgba(7, 28, 44, .08));
  transform-origin: right center;
  animation: catalog-hero-image-enter 1400ms cubic-bezier(.16, 1, .3, 1) 160ms both;
  will-change: transform, opacity, filter;
}

.catalog-category-title {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 34px;
  margin-bottom: .58rem;
  padding: .42rem .72rem;
  border: 1px solid rgba(11, 85, 244, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: var(--color-primary-blue);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: -.01em;
  box-shadow: 0 10px 24px rgba(7, 28, 44, .045);
}

@keyframes catalog-hero-image-enter {
  0% {
    opacity: 0;
    filter: drop-shadow(0 8px 18px rgba(7, 28, 44, .02)) blur(6px) saturate(.86);
    transform: translate3d(2.4rem, .8rem, 0) scale(.965);
  }

  62% {
    opacity: 1;
    filter: drop-shadow(0 22px 38px rgba(7, 28, 44, .10)) blur(0) saturate(1.02);
  }

  100% {
    opacity: 1;
    filter: drop-shadow(0 18px 34px rgba(7, 28, 44, .08)) blur(0) saturate(1);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-hero-visual img {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.page-hero-categories .page-title {
  margin: 0;
}

.page-hero-categories .page-intro {
  margin: .9rem 0 0;
  letter-spacing: -.018em;
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .64),
    0 8px 22px rgba(7, 28, 44, .06);
}

.page-hero-categories .page-intro span {
  color: var(--color-primary-blue);
  font-weight: 720;
}

.page-hero-catalog .page-title {
  margin: 0;
  max-width: 13ch;
  font-size: clamp(3rem, 6.4vw, 6.35rem);
  line-height: .86;
  letter-spacing: -.075em;
}

.page-hero-catalog .page-intro {
  max-width: 45ch;
  margin: .02rem 0 0;
  color: rgba(16, 24, 40, .82);
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  font-weight: 560;
  line-height: 1.42;
  letter-spacing: -.018em;
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .64),
    0 8px 22px rgba(7, 28, 44, .06);
}

.page-hero-catalog .page-intro span {
  color: var(--color-primary-blue);
  font-weight: 720;
}

.category-directory-card[data-category-id="tecnologia"] {
  --category-tint: rgba(11, 85, 244, .20);
  --category-outline: rgba(11, 85, 244, .24);
}

.category-directory-card[data-category-id="hogar"] {
  --category-tint: rgba(183, 144, 96, .20);
  --category-outline: rgba(183, 144, 96, .24);
}

.category-directory-card[data-category-id="mascotas"] {
  --category-tint: rgba(118, 154, 214, .18);
  --category-outline: rgba(118, 154, 214, .25);
}

.category-directory-card[data-category-id="bienestar"] {
  --category-tint: rgba(28, 53, 78, .18);
  --category-outline: rgba(28, 53, 78, .26);
}

.category-directory-card[data-category-id="carro-moto"] {
  --category-tint: rgba(67, 78, 94, .18);
  --category-outline: rgba(67, 78, 94, .26);
}

.category-directory-card[data-category-id="cocina"] {
  --category-tint: rgba(170, 108, 52, .19);
  --category-outline: rgba(170, 108, 52, .26);
}

.category-directory-card[data-category-id="limpieza"] {
  --category-tint: rgba(92, 136, 177, .18);
  --category-outline: rgba(92, 136, 177, .24);
}

.category-directory-card[data-category-id="ofertas"] {
  --category-tint: rgba(255, 107, 74, .18);
  --category-outline: rgba(255, 107, 74, .28);
}

.category-directory-card[data-category-id="ofertas"] .category-directory-chip {
  color: var(--color-primary-blue);
  background: var(--color-yellow);
  border: 1px solid var(--color-yellow);
}

/* ============================================
   PRODUCT GRID / PRODUCT CARDS
   ============================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.product-grid.featured {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.product-card {
  position: relative;
  padding: .75rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .72rem;
  min-height: 100%;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(11, 85, 244, .22);
}

.product-media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: var(--product-photo-backdrop);
  box-shadow: var(--product-photo-shadow);
  aspect-ratio: 1/1;
}

.product-media>a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.product-media>a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  filter: none;
}

.product-media>a:has(img[src*=".svg"]) {
  overflow: hidden;
  border-radius: inherit;
}

.product-media>a img[src*=".svg"] {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  filter: none;
}

.product-media .product-watermark,
.gallery-main .gallery-watermark {
  position: absolute;
  right: .68rem;
  bottom: .68rem;
  z-index: 2;
  width: 26px;
  height: 26px;
  object-fit: contain;
  opacity: .14;
  pointer-events: none;
  filter: drop-shadow(0 5px 14px rgba(7, 28, 44, .12));
}

.gallery-main .gallery-watermark {
  width: 34px;
  height: 34px;
  opacity: .12;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .28rem .55rem;
  border-radius: 999px;
  background: #E0E0E0;
  color: #0840A1;
  font-size: .73rem;
  font-weight: 800;
}

.product-badge {
  background: var(--color-primary-blue-soft);
  border: 1px solid rgba(8, 64, 161, .12);
  color: var(--color-primary-blue);
  box-shadow: 0 8px 18px rgba(10, 19, 32, .08);
}

.product-badges {
  position: absolute;
  top: .65rem;
  left: .65rem;
  right: 3.1rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: flex-start;
}

.product-badges.is-stacked {
  right: auto;
  max-width: calc(100% - 4rem);
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.product-badge-category,
.product-badge-new {
  background: var(--color-primary-blue-soft);
  color: var(--color-primary-blue);
}

.product-badge-offer {
  background: var(--color-yellow);
  color: var(--color-primary-blue-hover);
}

.product-badge-low-stock {
  background: var(--color-red-soft);
  color: var(--color-primary-blue);
}

.product-badge-featured,
.product-badge-curated,
.product-badge-manual {
  background: #E6F0FF;
  color: var(--color-primary-blue);
}

.gallery-badges {
  top: .9rem;
  left: .9rem;
  right: 4rem;
}

.fav-btn {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(221, 227, 234, .7);
  background: rgba(255, 255, 255, .88);
  border-radius: 999px;
  color: var(--color-navy);
}

.fav-btn[data-tooltip]::before,
.fav-btn[data-tooltip]::after {
  position: absolute;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(.22, 1, .36, 1);
  z-index: 8;
}

.fav-btn[data-tooltip]::before {
  content: attr(data-tooltip);
  top: calc(100% + 9px);
  transform: translateY(-7px) scale(.96);
  padding: .5rem .68rem;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(244, 248, 255, .93));
  box-shadow:
    0 14px 34px rgba(7, 28, 44, .14),
    0 2px 10px rgba(11, 85, 244, .08);
  color: var(--color-navy);
  font-size: .74rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.fav-btn[data-tooltip]::after {
  content: '';
  top: calc(100% + 5px);
  right: 12px;
  width: 10px;
  height: 10px;
  transform: translateY(-6px) rotate(45deg) scale(.96);
  border-left: 1px solid rgba(255, 255, 255, .78);
  border-top: 1px solid rgba(255, 255, 255, .78);
  background: rgba(250, 252, 255, .95);
  z-index: 7;
}

.fav-btn[data-tooltip]:hover::before,
.fav-btn[data-tooltip]:hover::after,
.fav-btn[data-tooltip]:focus-visible::before,
.fav-btn[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.fav-btn .icon {
  width: 18px;
  height: 18px;
}

.fav-btn.is-active {
  border-color: rgba(220, 38, 38, .24);
  background: #fff1f2;
  color: #dc2626;
}

.product-info {
  min-width: 0;
}

.product-title {
  margin: 0 0 .35rem;
  color: var(--color-navy);
  font-size: .93rem;
  line-height: 1.22;
  font-weight: 800;
  min-height: 2.3em;
}

.product-card .product-title a {
  text-transform: none;
  letter-spacing: 0;
}

.product-title a:hover {
  color: var(--color-primary-blue);
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #0b55f4;
  font-size: .78rem;
  font-weight: 650;
}

.product-card-stats {
  flex-wrap: wrap;
  gap: .3rem .45rem;
}

.product-card-stats .icon {
  width: 14px;
  height: 14px;
  margin-right: .16rem;
  vertical-align: -.12rem;
}

.stars {
  display: inline-flex;
  align-items: center;
  gap: .08rem;
  color: var(--color-rating);
  white-space: nowrap;
  line-height: 1;
}

.star-icon {
  display: inline-grid;
  width: .86rem;
  height: .86rem;
  color: rgba(11, 85, 244, .18);
}

.star-icon svg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  fill: currentColor;
  opacity: 0;
}

.star-icon::before {
  content: '';
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-rating) var(--star-fill), rgba(11, 85, 244, .18) var(--star-fill));
  clip-path: polygon(50% 4%, 61% 36%, 95% 36%, 67% 56%, 78% 90%, 50% 70%, 22% 90%, 33% 56%, 5% 36%, 39% 36%);
}

.stars-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  overflow: hidden;
  color: var(--color-primary-blue);
}

.price {
  margin: .5rem 0 .1rem;
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--color-navy);
  font-size: 1.08rem;
}

.product-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .45rem;
  margin: .5rem 0 .1rem;
}

.product-price-row .price {
  margin: 0;
}

.compare-price {
  color: var(--color-text-soft);
  font-size: .86rem;
  font-weight: 800;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.discount-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: .12rem .38rem;
  border-radius: 999px;
  background: #A5181C;
  color: #ffe98b;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
}

.add-btn {
  width: 100%;
  min-height: 38px;
  padding: .55rem .75rem;
  border-radius: 9px;
  font-size: .85rem;
}

.section-product-showcase {
  overflow: hidden;
  padding-top: clamp(1.4rem, 2.8vw, 2.6rem);
  padding-bottom: clamp(1rem, 2.2vw, 1.8rem);
}

.section-product-showcase .container {
  display: grid;
  grid-template-columns: minmax(320px, .32fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 4.4vw, 4.8rem);
}

.section-product-showcase .section-head {
  position: sticky;
  top: calc(var(--header-height) + 1rem);
  display: grid;
  align-content: start;
  gap: 1rem;
  margin: 0;
  padding: .15rem 0 0;
}

.section-product-showcase .section-head::before {
  content: 'Vitrina curada';
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .4rem .68rem;
  border-radius: 999px;
  background: var(--color-primary-blue);
  color: #ffffff;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.section-product-showcase .section-title {
  max-width: 9.3ch;
  font-size: clamp(2.05rem, 3vw, 3.75rem);
  line-height: .92;
  letter-spacing: -.065em;
}

.section-product-showcase .link-arrow {
  width: fit-content;
  min-height: 42px;
  padding: .62rem .88rem;
  border: 1px solid rgba(11, 85, 244, .18);
  border-radius: 999px;
  background: rgba(11, 85, 244, .06);
  color: var(--color-primary-blue);
}

.featured-carousel {
  position: relative;
  min-width: 0;
  padding-inline: clamp(.2rem, .6vw, .55rem);
}

.section-product-showcase .product-grid.featured {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: clamp(172px, 14vw, 216px);
  gap: clamp(.68rem, .9vw, .95rem);
  overflow-x: auto;
  overflow-y: hidden;
  padding: .2rem max(var(--container-pad), calc((100vw - var(--container-max)) / 2)) .75rem .25rem;
  margin-right: calc(max(var(--container-pad), calc((100vw - var(--container-max)) / 2)) * -1);
  scroll-snap-type: x proximity;
  scrollbar-width: none;

  overscroll-behavior-x: contain;
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 4.5rem), transparent 100%);
}

.section-product-showcase .product-grid.featured::-webkit-scrollbar {
  display: none;
}

.section-product-showcase .product-card {
  --featured-card-badge-top: .52rem;
  --featured-card-badge-left: .52rem;
  --featured-card-badge-right: 3.35rem;
  --featured-card-fav-top: .48rem;
  --featured-card-fav-right: .48rem;
  scroll-snap-align: start;
  border-color: rgba(11, 85, 244, .08);
  background: rgba(255, 255, 255, .94);
}

.section-product-showcase .product-badges {
  top: var(--featured-card-badge-top);
  left: var(--featured-card-badge-left);
  right: var(--featured-card-badge-right);
  z-index: 3;
}

.section-product-showcase .fav-btn {
  top: var(--featured-card-fav-top);
  right: var(--featured-card-fav-right);
  z-index: 3;
}

.carousel-nav {
  position: absolute;
  top: 30%;
  z-index: 5;
  width: 48px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(11, 85, 244, .18);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(245, 248, 255, .9));
  color: var(--color-primary-blue);
  box-shadow: 0 18px 38px rgba(7, 28, 44, .14);
  font-size: 2rem;
  font-weight: 850;
  line-height: 1;
  transform: translateY(-50%);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 220ms ease;
}

.carousel-nav:hover:not(:disabled),
.carousel-nav:focus-visible:not(:disabled) {
  transform: translateY(-50%) scale(1.04);
  box-shadow: 0 22px 46px rgba(11, 85, 244, .2);
}

.carousel-nav:disabled {
  opacity: 0;
  pointer-events: none;
}

.carousel-nav-prev {
  left: clamp(-.45rem, -1vw, -.2rem);
}

.carousel-nav-next {
  right: calc((max(var(--container-pad), calc((100vw - var(--container-max)) / 2)) * -1) + .05rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(245, 248, 255, .92));
}

.carousel-nav-next::before {
  content: '';
  position: absolute;
  inset: -1.2rem -.75rem -1.2rem auto;
  width: 5.8rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(250, 250, 247, 0), rgba(250, 250, 247, .92) 58%, rgba(250, 250, 247, .98));
  z-index: -1;
  pointer-events: none;
}

.section-product-showcase .product-media {
  aspect-ratio: 1 / .92;
}

.reason-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.reason-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.3rem;
}

.reason-card .icon-wrap {
  width: 56px;
  height: 56px;
  background: transparent;
  color: var(--color-primary-blue);
}

.reason-card .icon {
  width: 40px;
  height: 40px;
}

.reason-card h3 {
  margin: 0 0 .2rem;
  color: var(--color-navy);
  font-size: 1rem;
}

.reason-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .91rem;
  line-height: 1.35;
}

.section-selection-reasons {
  padding-top: clamp(.5rem, 1.2vw, 1rem);
  padding-bottom: clamp(1rem, 2vw, 1.8rem);
}

.section-selection-reasons .container {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(250px, .34fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2vw, 1.6rem);
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgba(11, 85, 244, .10);
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(252, 209, 22, .18), rgba(252, 209, 22, 0) 34%),
    linear-gradient(135deg, rgba(238, 244, 255, .92), rgba(255, 255, 255, .9) 54%, rgba(236, 241, 250, .92));
  box-shadow: 0 18px 44px rgba(7, 28, 44, .06);
}

.section-selection-reasons .section-head {
  display: grid;
  align-content: center;
  gap: .7rem;
  margin: 0;
}

.section-selection-reasons .section-head::before {
  content: 'Criterio DaleShop';
  width: fit-content;
  display: inline-flex;
  padding: .4rem .68rem;
  border-radius: 999px;
  background: var(--color-primary-blue);
  color: white;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.section-selection-reasons .section-title {
  max-width: 11ch;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  line-height: .92;
  letter-spacing: -.06em;
}

.section-selection-reasons .reason-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
}

.section-selection-reasons .reason-card {
  display: grid;
  align-content: start;
  gap: .72rem;
  min-height: 178px;
  padding: .9rem;
  border: 1px solid rgba(11, 85, 244, .10);
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
  backdrop-filter: blur(14px);
}

.section-selection-reasons .reason-card .icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(11, 85, 244, .08);
  color: var(--color-primary-blue);
}

.section-selection-reasons .reason-card .icon {
  width: 27px;
  height: 27px;
}

.section-selection-reasons .reason-card h3 {
  font-size: .98rem;
  line-height: 1.05;
}

.section-selection-reasons .reason-card p {
  font-size: .86rem;
}

@media (max-width: 880px) {

  .section-product-showcase .container,
  .section-selection-reasons .container {
    display: block;
  }

  .section-product-showcase .section-head {
    position: static;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .95rem;
  }

  .section-product-showcase .section-title {
    max-width: 11ch;
    font-size: clamp(2.2rem, 7vw, 3.8rem);
  }

  .section-product-showcase .product-grid.featured {
    grid-auto-columns: clamp(176px, 34vw, 218px);
  }

  .featured-carousel {
    padding-inline: 0;
  }

  .carousel-nav {
    width: 44px;
    height: 58px;
  }

  .section-selection-reasons .container {
    padding: clamp(1rem, 3vw, 1.25rem);
  }

  .section-selection-reasons .section-head {
    margin-bottom: 1rem;
  }

  .section-selection-reasons .section-title {
    max-width: 14ch;
    font-size: clamp(2rem, 6.8vw, 3.2rem);
  }

  .section-selection-reasons .reason-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }

  .section-selection-reasons .reason-card {
    min-height: 150px;
  }
}

@media (max-width: 560px) {
  .section-product-showcase {
    padding-top: 1.3rem;
  }

  .section-product-showcase .section-head {
    display: grid;
    justify-items: center;
    justify-content: center;
    text-align: center;
    gap: .7rem;
  }

  .section-product-showcase .section-head::before {
    min-height: 30px;
    font-size: .72rem;
  }

  .section-product-showcase .section-title {
    max-width: 9.5ch;
    margin-inline: auto;
    font-size: clamp(2.25rem, 11vw, 3.2rem);
  }

  .section-product-showcase .link-arrow {
    min-height: 40px;
    padding: .58rem .82rem;
  }

  .section-product-showcase .product-grid.featured {
    grid-auto-columns: minmax(174px, 58vw);
    width: calc(100% + var(--container-pad));
    margin-right: calc(var(--container-pad) * -1);
    padding-right: var(--container-pad);
    mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 2.5rem), transparent 100%);
  }

  .section-selection-reasons .container {
    border-radius: 24px;
  }

  .section-selection-reasons .section-title {
    max-width: 12ch;
    font-size: clamp(2.05rem, 9vw, 2.8rem);
  }

  .section-selection-reasons .reason-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 72vw);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: .25rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;

    overscroll-behavior-x: contain;
  }

  .section-selection-reasons .reason-grid::-webkit-scrollbar {
    display: none;
  }

  .section-selection-reasons .reason-card {
    min-height: 154px;
    scroll-snap-align: start;
  }
}

@media (max-width: 480px) {
  .carousel-nav {
    display: none;
  }
}

/* ============================================
   REVIEWS
   ============================================ */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.section-social-reviews {
  padding-top: clamp(.85rem, 2vw, 1.4rem);
  padding-bottom: clamp(1.2rem, 2.5vw, 2rem);
}

.reviews-shell {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(260px, .42fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.35rem);
  padding: clamp(1rem, 2.2vw, 1.45rem);
  border: 1px solid rgba(11, 85, 244, .10);
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% 16%, rgba(252, 209, 22, .20), rgba(252, 209, 22, 0) 28%),
    radial-gradient(circle at 92% 10%, rgba(11, 85, 244, .12), rgba(11, 85, 244, 0) 36%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(241, 246, 255, .92));
  box-shadow: 0 20px 54px rgba(7, 28, 44, .06);
}

.reviews-shell::before {
  content: '“';
  position: absolute;
  right: clamp(1rem, 3vw, 2.2rem);
  top: clamp(.2rem, 1.5vw, .9rem);
  font-family: var(--font-title);
  font-size: clamp(5rem, 13vw, 11rem);
  line-height: 1;
  color: rgba(11, 85, 244, .07);
  pointer-events: none;
}

.section-social-reviews .section-head {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: .75rem;
  margin: 0;
  padding: .5rem clamp(.2rem, 1vw, .7rem);
}

.section-social-reviews .section-head::before {
  content: 'Voces de clientes';
  width: fit-content;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: .38rem .68rem;
  border-radius: 999px;
  background: var(--color-primary-blue);
  ;
  color: #ffffff;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.section-social-reviews .section-title {
  max-width: 14ch;
  font-size: 2.52rem;
  line-height: .9;
  letter-spacing: -.065em;
}

.section-social-reviews .section-kicker {
  max-width: 32ch;
  margin-top: 10px;
  color: rgba(52, 64, 74, .82);
  font-size: clamp(.96rem, 1vw, 1.05rem);
  line-height: 1.48;
}

.section-social-reviews .review-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}

.review-card {
  display: grid;
  align-content: space-between;
  min-height: 236px;
  padding: clamp(1rem, 1.6vw, 1.25rem);
  border: 1px solid rgba(11, 85, 244, .09);
  background: rgba(255, 255, 255, .78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 14px 34px rgba(7, 28, 44, .045);
  backdrop-filter: blur(12px);
}

.review-card p {
  color: var(--color-text-muted);
  margin: .65rem 0 1.1rem;
  font-size: clamp(.98rem, 1vw, 1.08rem);
  line-height: 1.55;
}

.review-source {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .55rem;
  padding: .32rem .52rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  color: var(--color-primary-blue);
  font-size: .72rem;
  font-weight: 850;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(11, 85, 244, .09);
}

.review-source .social-icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.review-card strong {
  color: var(--color-navy);
}

.section-social-reviews .review-card .stars {
  width: fit-content;
  padding: .35rem .55rem;
  border-radius: 999px;
  background: rgba(11, 85, 244, .07);
  color: var(--color-primary-blue);
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f1d0bc, #d6e2ef);
  display: grid;
  place-items: center;
  color: var(--color-navy);
  font-weight: 900;
}

.avatar-img {
  object-fit: cover;
  object-position: center;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .9);
  background: var(--color-surface-soft);
  box-shadow:
    0 0 0 1px rgba(11, 85, 244, .08),
    0 10px 22px rgba(7, 28, 44, .10);
}

.review-footer {
  display: flex;
  align-items: center;
  gap: .65rem;
}

@media (max-width: 880px) {
  .reviews-shell {
    grid-template-columns: 1fr;
  }

  .section-social-reviews .section-head {
    padding: .2rem 0 0;
  }

  .section-social-reviews .section-title {
    max-width: 13ch;
    font-size: clamp(2.2rem, 7vw, 3.8rem);
  }

  .section-social-reviews .section-kicker {
    max-width: 46ch;
  }

  .section-social-reviews .review-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .reviews-shell {
    border-radius: 24px;
    padding: 1rem;
  }

  .section-social-reviews .section-title {
    max-width: 10ch;
    font-size: clamp(2.25rem, 11vw, 3.15rem);
  }

  .section-social-reviews .section-kicker {
    max-width: 32ch;
    font-size: .95rem;
  }

  .section-social-reviews .review-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 78vw);
    gap: .8rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: .25rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;

    overscroll-behavior-x: contain;
  }

  .section-social-reviews .review-grid::-webkit-scrollbar {
    display: none;
  }

  .section-social-reviews .review-card {
    min-height: 230px;
    scroll-snap-align: start;
  }
}

.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}

.stat-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: 1.1rem;
  text-align: left;
}

.stat-item+.stat-item {
  border-left: 1px solid var(--color-border);
}

.stat-item .icon {
  width: 30px;
  height: 30px;
  color: var(--color-primary-blue);
}

.stat-value {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1;
}

.stat-label {
  color: var(--color-text-soft);
  font-size: .86rem;
}

.cta-dark {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-navy) 0%, #2850b9 55%, #092d38 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.45rem, 3vw, 2.2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.2rem);
}

.cta-dark-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "mark title"
    "mark text";
  column-gap: clamp(1rem, 2vw, 1.35rem);
  align-items: center;
}

.cta-dark-copy-isotipo {
  grid-area: mark;
  margin-top: 0;
  align-self: center;
  justify-self: start;
}

.cta-dark-action {
  display: grid;
  justify-items: end;
  gap: .55rem;
}

.cta-dark-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(.8rem, 2vw, 1.2rem);
}

.cta-dark-action-isotipo {
  display: none;
}

.cta-dark .isotipo {
  flex: 0 0 auto;
  width: clamp(64px, 7vw, 86px);
  height: clamp(64px, 7vw, 86px);
  object-fit: contain;
  border-radius: 14px;
  opacity: 1;
}

.cta-dark h2 {
  grid-area: title;
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  letter-spacing: -.035em;
}

.cta-dark p {
  grid-area: text;
  margin: .25rem 0 0;
  color: rgba(255, 255, 255, .82);
}

.cta-dark small {
  display: block;
  width: 100%;
  margin-top: .5rem;
  color: rgba(255, 255, 255, .76);
  text-align: center;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  position: relative;
  overflow: hidden;
  padding: clamp(1.2rem, 3vw, 2rem) 0 1.1rem;
  background:
    radial-gradient(circle at 18% 0%, rgba(252, 209, 22, .16), transparent 30rem),
    radial-gradient(circle at 82% 18%, rgba(11, 85, 244, .34), transparent 32rem),
    linear-gradient(135deg, #061426 0%, #071c2c 46%, #092f4a 100%);
  color: white;
}

.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .62), transparent 78%);
}

.footer-panel,
.footer-bottom {
  position: relative;
  z-index: 1;
}

.footer-panel {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(360px, 1.25fr) minmax(260px, .78fr);
  gap: clamp(1rem, 3vw, 2.2rem);
  align-items: stretch;
  padding: clamp(1.15rem, 2.2vw, 1.75rem);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 30px;
  background: rgba(255, 255, 255, .07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 28px 80px rgba(0, 0, 0, .22);
  backdrop-filter: blur(18px) saturate(150%);
}

.footer-brand {
  display: grid;
  align-content: start;
  gap: .8rem;
}

.footer-eyebrow {
  width: fit-content;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: .38rem .66rem;
  border-radius: 999px;
  background: rgba(252, 209, 22, .16);
  color: var(--color-yellow);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.footer-logo {
  width: min(230px, 78vw);
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.footer p {
  margin: 0;
}

.footer-copy {
  max-width: 34ch;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(1rem, 1.08vw, 1.08rem);
  font-weight: 580;
  line-height: 1.48;
  letter-spacing: -.018em;
  text-wrap: balance;
}

.footer-flag-co {
  width: 1rem;
  height: .7rem;
  margin-left: .18rem;
  flex: 0 0 auto;
  vertical-align: baseline;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
}

.footer-promise-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  max-width: 32rem;
}

.footer-promise-row span {
  display: grid;
  gap: .12rem;
  padding: .72rem .78rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .7);
  font-size: .78rem;
  line-height: 1.25;
}

.footer-promise-row strong {
  color: white;
  font-family: var(--font-title);
  font-size: 1.05rem;
  line-height: 1;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.socials a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: white;
  transition: background var(--ease), color var(--ease), transform var(--ease), border-color var(--ease);
}

.socials a:hover {
  background: var(--color-primary-blue);
  border-color: rgba(255, 255, 255, .28);
  color: white;
  transform: translateY(-1px);
}

.social-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
  color: white;
}

.socials a[aria-label="WhatsApp"] .social-icon {
  width: 22px;
  height: 22px;
}

.social-icon-img {
  object-fit: contain;
}

.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;
}

.catalog-category-nav-section {
  position: sticky;
  top: var(--header-height);
  z-index: 820;
  padding: .68rem 0 .52rem;
  border-bottom: 1px solid rgba(11, 85, 244, .10);
  /* background:
    radial-gradient(circle at 8% 18%, rgba(11, 85, 244, .06), transparent 18rem),
    linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(248, 251, 255, .78)); */
  box-shadow: 0 14px 30px rgba(7, 28, 44, .055);
  backdrop-filter: blur(18px) saturate(155%);
}

.catalog-page-shell {
  --catalog-page-gradient: linear-gradient(180deg, rgb(0 20 62 / 81%), rgba(255, 255, 255, .98) 34%, rgba(247, 250, 255, .78));
  --catalog-hero-title: whitesmoke;
  --catalog-hero-copy: rgba(245, 245, 245, .88);
  --catalog-hero-muted: rgba(235, 241, 255, .78);
  --catalog-accent-one: #56dcff;
  --catalog-accent-two: #fcd116;
  --catalog-accent-three: #38e8a3;
  --catalog-orbit-blue: rgba(86, 220, 255, .16);
  --catalog-orbit-yellow: rgba(252, 209, 22, .22);
  --catalog-line-blue: rgba(86, 220, 255, .08);
  --catalog-line-yellow: rgba(252, 209, 22, .14);
  --catalog-breadcrumb-fg: rgba(255, 255, 255, .96);
  --catalog-breadcrumb-muted: rgba(255, 255, 255, .76);
  --catalog-breadcrumb-bg: rgba(7, 17, 31, .46);
  --catalog-breadcrumb-border: rgba(255, 255, 255, .18);
  --catalog-breadcrumb-shadow: 0 14px 32px rgba(7, 28, 44, .16);
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: linear-gradient(180deg, rgb(0 20 62 / 81%), rgba(255, 255, 255, .98) 34%, rgba(247, 250, 255, .78));
}

.catalog-page-shell[data-catalog-category="tecnologia"] {
  --catalog-page-gradient: linear-gradient(180deg, rgba(2, 34, 108, .88), rgba(14, 160, 255, .20) 30%, rgba(247, 250, 255, .84) 62%, rgba(255, 255, 255, .98));
  --catalog-accent-one: #35d9ff;
  --catalog-accent-two: #8b5cf6;
  --catalog-accent-three: #00ffa8;
  --catalog-orbit-blue: rgba(53, 217, 255, .20);
  --catalog-orbit-yellow: rgba(139, 92, 246, .18);
  --catalog-line-blue: rgba(53, 217, 255, .10);
  --catalog-line-yellow: rgba(139, 92, 246, .12);
}

.catalog-page-shell[data-catalog-category="hogar"] {
  --catalog-page-gradient: linear-gradient(180deg, rgb(255 170 90 / 86%), rgba(255, 143, 92, .22) 32%, rgba(248, 255, 250, .88) 66%, rgba(255, 255, 255, .98));
  --catalog-accent-one: #ff8f5c;
  --catalog-accent-two: #fcd116;
  --catalog-accent-three: #2dd4bf;
  --catalog-heading-pill-color: #07111f;
  --catalog-orbit-blue: rgba(255, 143, 92, .18);
  --catalog-orbit-yellow: rgba(252, 209, 22, .20);
  --catalog-line-blue: rgba(45, 212, 191, .10);
  --catalog-line-yellow: rgba(255, 143, 92, .12);
}

.catalog-page-shell[data-catalog-category="mascotas"] {
  --catalog-page-gradient: linear-gradient(180deg, rgba(0, 79, 92, .86), rgba(41, 214, 154, .22) 34%, rgba(245, 255, 249, .86) 66%, rgba(255, 255, 255, .98));
  --catalog-accent-one: #29d69a;
  --catalog-accent-two: #fcd116;
  --catalog-accent-three: #45c7ff;
  --catalog-orbit-blue: rgba(41, 214, 154, .20);
  --catalog-orbit-yellow: rgba(252, 209, 22, .20);
  --catalog-line-blue: rgba(69, 199, 255, .10);
  --catalog-line-yellow: rgba(41, 214, 154, .12);
}

.catalog-page-shell[data-catalog-category="bienestar"] {
  --catalog-page-gradient: linear-gradient(180deg, rgba(21, 70, 76, .86), rgba(114, 234, 183, .24) 34%, rgba(249, 247, 255, .88) 66%, rgba(255, 255, 255, .98));
  --catalog-accent-one: #72eab7;
  --catalog-accent-two: #b693ff;
  --catalog-accent-three: #fcd116;
  --catalog-orbit-blue: rgba(114, 234, 183, .20);
  --catalog-orbit-yellow: rgba(182, 147, 255, .18);
  --catalog-line-blue: rgba(114, 234, 183, .10);
  --catalog-line-yellow: rgba(182, 147, 255, .12);
}

.catalog-page-shell[data-catalog-category="carro-moto"] {
  --catalog-page-gradient: linear-gradient(180deg, rgb(21 20 18), rgb(255 255 255) 34%, rgba(248, 251, 255, .88) 66%, rgba(255, 255, 255, .98));
  --catalog-accent-one: #00b2ff;
  --catalog-accent-two: #fcd116;
  --catalog-accent-three: #94a3b8;
  --catalog-orbit-blue: rgba(0, 178, 255, .20);
  --catalog-orbit-yellow: rgba(252, 209, 22, .20);
  --catalog-line-blue: rgba(0, 178, 255, .10);
  --catalog-line-yellow: rgba(252, 209, 22, .12);
}

.catalog-page-shell[data-catalog-category="cocina"] {
  --catalog-page-gradient: linear-gradient(180deg, rgba(93, 19, 58, .88), rgba(255, 87, 87, .20) 34%, rgba(250, 255, 247, .88) 66%, rgba(255, 255, 255, .98));
  --catalog-accent-one: #ff5757;
  --catalog-accent-two: #fcd116;
  --catalog-accent-three: #46df86;
  --catalog-orbit-blue: rgba(255, 87, 87, .20);
  --catalog-orbit-yellow: rgba(252, 209, 22, .18);
  --catalog-line-blue: rgba(255, 87, 87, .10);
  --catalog-line-yellow: rgba(70, 223, 134, .12);
}

.catalog-page-shell[data-catalog-category="limpieza"] {
  --catalog-page-gradient: linear-gradient(180deg, #71b0ed, rgba(91, 214, 255, .24) 34%, rgba(246, 255, 253, .88) 66%, rgba(255, 255, 255, .98));
  --catalog-accent-one: #5bd6ff;
  --catalog-accent-two: #78f28f;
  --catalog-accent-three: #fcd116;
  --catalog-orbit-blue: rgba(91, 214, 255, .22);
  --catalog-orbit-yellow: rgba(120, 242, 143, .18);
  --catalog-line-blue: rgba(91, 214, 255, .10);
  --catalog-line-yellow: rgba(120, 242, 143, .12);
}

.catalog-page-shell[data-catalog-category="herramientas"] {
  --catalog-page-gradient: linear-gradient(180deg, rgb(255 211 5 / 92%), rgb(242 210 97) 34%, rgba(255, 250, 238, .86) 66%, rgba(255, 255, 255, .98));
  --catalog-accent-one: #ee2f3d;
  --catalog-accent-two: #fcd116;
  --catalog-accent-three: #8bd3ff;
  --catalog-breadcrumb-fg: #07111f;
  --catalog-breadcrumb-muted: rgba(7, 17, 31, .62);
  --catalog-breadcrumb-bg: rgba(255, 255, 255, .72);
  --catalog-breadcrumb-border: rgba(7, 17, 31, .12);
  --catalog-breadcrumb-shadow: 0 12px 28px rgba(7, 28, 44, .10);
  --catalog-heading-logo-filter: brightness(0) saturate(100%) drop-shadow(0 2px 5px rgba(255, 255, 255, .18)) drop-shadow(0 14px 22px rgba(7, 28, 44, .14));
  --catalog-heading-pill-color: #07111f;
  --catalog-heading-title-word-color: #07111f;
  --catalog-orbit-blue: rgba(238, 47, 61, .18);
  --catalog-orbit-yellow: rgba(252, 209, 22, .20);
  --catalog-line-blue: rgba(139, 211, 255, .10);
  --catalog-line-yellow: rgba(238, 47, 61, .11);
}

.catalog-page-shell[data-catalog-category="ofertas"] {
  --catalog-page-gradient: linear-gradient(180deg, rgba(0, 36, 120, .90), rgba(252, 209, 22, .32) 32%, rgba(255, 246, 250, .88) 66%, rgba(255, 255, 255, .98));
  --catalog-accent-one: #fcd116;
  --catalog-accent-two: #ff4fc3;
  --catalog-accent-three: #35d9ff;
  --catalog-orbit-blue: rgba(255, 79, 195, .18);
  --catalog-orbit-yellow: rgba(252, 209, 22, .24);
  --catalog-line-blue: rgba(53, 217, 255, .10);
  --catalog-line-yellow: rgba(255, 79, 195, .12);
}

.catalog-page-shell[data-catalog-category]:not([data-catalog-category="todos"]) {
  background: var(--catalog-page-gradient);
}

.catalog-page-shell::before,
.catalog-page-shell::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  pointer-events: none;
}

.catalog-page-shell::before {
  inset-block: 0;
  z-index: -2;
  opacity: .62;
  background:
    radial-gradient(circle at 8% 10%, transparent 0 9.2rem, var(--catalog-orbit-blue) 9.3rem 9.38rem, transparent 9.5rem),
    radial-gradient(circle at 88% 18%, transparent 0 14rem, var(--catalog-orbit-yellow) 14.1rem 14.2rem, transparent 14.34rem),
    radial-gradient(circle at 78% 58%, transparent 0 18rem, var(--catalog-orbit-blue) 18.1rem 18.22rem, transparent 18.38rem),
    radial-gradient(circle at 14% 74%, transparent 0 12.2rem, var(--catalog-orbit-yellow) 12.3rem 12.42rem, transparent 12.58rem);
  mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.catalog-page-shell::after {
  inset-block: 0;
  z-index: -1;
  opacity: .42;
  background:
    linear-gradient(112deg, transparent 0 21%, var(--catalog-line-blue) 21.08% 21.18%, transparent 21.28% 100%),
    linear-gradient(132deg, transparent 0 43%, var(--catalog-line-yellow) 43.08% 43.18%, transparent 43.32% 100%),
    linear-gradient(68deg, transparent 0 67%, var(--catalog-line-blue) 67.08% 67.2%, transparent 67.32% 100%);
}

.catalog-page-shell > section:not(.catalog-category-nav-section),
.catalog-page-shell > footer {
  position: relative;
  z-index: 1;
}

.catalog-page-shell.is-catalog-swipe-exit-next > section:not(.catalog-category-nav-section),
.catalog-page-shell.is-catalog-swipe-exit-next > footer,
.catalog-page-shell.is-catalog-swipe-exit-prev > section:not(.catalog-category-nav-section),
.catalog-page-shell.is-catalog-swipe-exit-prev > footer,
.catalog-page-shell.is-catalog-swipe-enter-next > section:not(.catalog-category-nav-section),
.catalog-page-shell.is-catalog-swipe-enter-next > footer,
.catalog-page-shell.is-catalog-swipe-enter-prev > section:not(.catalog-category-nav-section),
.catalog-page-shell.is-catalog-swipe-enter-prev > footer {
  will-change: clip-path, opacity;
  backface-visibility: hidden;
}

.catalog-page-shell.is-catalog-swipe-exit-next > section:not(.catalog-category-nav-section),
.catalog-page-shell.is-catalog-swipe-exit-next > footer {
  animation: catalogSwipeExitNext 120ms cubic-bezier(.4, 0, 1, 1) both;
}

.catalog-page-shell.is-catalog-swipe-exit-prev > section:not(.catalog-category-nav-section),
.catalog-page-shell.is-catalog-swipe-exit-prev > footer {
  animation: catalogSwipeExitPrev 120ms cubic-bezier(.4, 0, 1, 1) both;
}

.catalog-page-shell.is-catalog-swipe-enter-next > section:not(.catalog-category-nav-section),
.catalog-page-shell.is-catalog-swipe-enter-next > footer {
  animation: catalogSwipeEnterNext 260ms cubic-bezier(.16, 1, .3, 1) both;
}

.catalog-page-shell.is-catalog-swipe-enter-prev > section:not(.catalog-category-nav-section),
.catalog-page-shell.is-catalog-swipe-enter-prev > footer {
  animation: catalogSwipeEnterPrev 260ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes catalogSwipeExitNext {
  from {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }

  to {
    opacity: .72;
    clip-path: inset(0 5% 0 0);
  }
}

@keyframes catalogSwipeExitPrev {
  from {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }

  to {
    opacity: .72;
    clip-path: inset(0 0 0 5%);
  }
}

@keyframes catalogSwipeEnterNext {
  from {
    opacity: .22;
    clip-path: inset(0 0 0 5%);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes catalogSwipeEnterPrev {
  from {
    opacity: .22;
    clip-path: inset(0 5% 0 0);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-page-shell.is-catalog-swipe-exit-next > section:not(.catalog-category-nav-section),
  .catalog-page-shell.is-catalog-swipe-exit-next > footer,
  .catalog-page-shell.is-catalog-swipe-exit-prev > section:not(.catalog-category-nav-section),
  .catalog-page-shell.is-catalog-swipe-exit-prev > footer,
  .catalog-page-shell.is-catalog-swipe-enter-next > section:not(.catalog-category-nav-section),
  .catalog-page-shell.is-catalog-swipe-enter-next > footer,
  .catalog-page-shell.is-catalog-swipe-enter-prev > section:not(.catalog-category-nav-section),
  .catalog-page-shell.is-catalog-swipe-enter-prev > footer {
    animation: none;
    transform: none;
    clip-path: none;
  }
}

.product-page-shell {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.product-page-shell::before,
.product-page-shell::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  pointer-events: none;
}

.product-page-shell::before {
  inset-block: 0;
  z-index: -2;
  opacity: .52;
  background:
    radial-gradient(circle at 92% 9%, transparent 0 12rem, rgba(11, 85, 244, .075) 12.1rem 12.22rem, transparent 12.38rem),
    radial-gradient(circle at 8% 24%, transparent 0 15rem, rgba(252, 209, 22, .13) 15.1rem 15.22rem, transparent 15.38rem),
    radial-gradient(circle at 86% 53%, transparent 0 20rem, rgba(11, 85, 244, .055) 20.1rem 20.22rem, transparent 20.42rem),
    radial-gradient(circle at 12% 78%, transparent 0 13rem, rgba(252, 209, 22, .10) 13.1rem 13.22rem, transparent 13.38rem);
  mask-image: linear-gradient(180deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.product-page-shell::after {
  inset-block: 0;
  z-index: -1;
  opacity: .34;
  background:
    linear-gradient(106deg, transparent 0 18%, rgba(11, 85, 244, .045) 18.08% 18.18%, transparent 18.3% 100%),
    linear-gradient(142deg, transparent 0 47%, rgba(252, 209, 22, .085) 47.08% 47.18%, transparent 47.32% 100%),
    linear-gradient(74deg, transparent 0 72%, rgba(11, 85, 244, .038) 72.08% 72.2%, transparent 72.32% 100%);
}

.product-page-shell > section,
.product-page-shell > footer {
  position: relative;
  z-index: 1;
}

body:has(.site-header.is-hidden) .catalog-category-nav-section {
  top: 0;
}

body:has(.site-header.is-menu-open) .catalog-category-nav-section {
  top: var(--header-height);
}

.catalog-category-nav-section .container {
  position: relative;
  display: grid;
  gap: .5rem;
}

.catalog-nav-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}

@media (min-width: 1121px) and (max-width: 1599px) {
  .catalog-nav-row {
    padding-left: 6.65rem;
  }

  .catalog-nav-row [data-catalog-chips].chips {
    padding-left: 6.65rem;
    scroll-padding-left: 6.65rem;
  }
}

.catalog-nav-row .chips {
  flex: 1 1 auto;
  min-width: 0;
}

.catalog-nav-isotipo-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 10%, rgba(252, 209, 22, .18), transparent 62%),
    rgba(255, 255, 255, .88);
  box-shadow:
    0 12px 24px rgba(7, 28, 44, .065),
    inset 0 1px 0 rgba(255, 255, 255, .98);
  cursor: pointer;
  transition: transform var(--ease), box-shadow var(--ease);
}

.catalog-nav-isotipo-wrap:hover {
  transform: scale(1.06);
  box-shadow:
    0 16px 32px rgba(7, 28, 44, .10),
    inset 0 1px 0 rgba(255, 255, 255, .98);
}

.catalog-nav-isotipo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .34rem;
  pointer-events: none;
}

.catalog-nav-isotipo-wrap[data-tooltip]::before,
.catalog-nav-isotipo-wrap[data-tooltip]::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.catalog-nav-isotipo-wrap[data-tooltip]::before {
  content: attr(data-tooltip);
  top: calc(100% + 12px);
  transform: translate(-50%, -8px) scale(.96);
  padding: .5rem .72rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(244, 248, 255, .9));
  box-shadow:
    0 14px 34px rgba(7, 28, 44, .14),
    0 2px 10px rgba(11, 85, 244, .08);
  backdrop-filter: blur(18px) saturate(155%);
  color: var(--color-navy);
  font-size: .76rem;
  font-weight: 780;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  z-index: 8;
}

.catalog-nav-isotipo-wrap[data-tooltip]::after {
  content: '';
  top: calc(100% + 8px);
  width: 10px;
  height: 10px;
  transform: translate(-50%, -6px) rotate(45deg) scale(.96);
  border-left: 1px solid rgba(255, 255, 255, .78);
  border-top: 1px solid rgba(255, 255, 255, .78);
  background: rgba(250, 252, 255, .95);
  box-shadow: -4px -4px 12px rgba(11, 85, 244, .04);
  z-index: 7;
}

.catalog-nav-isotipo-wrap[data-tooltip]:hover::before,
.catalog-nav-isotipo-wrap[data-tooltip]:hover::after,
.catalog-nav-isotipo-wrap[data-tooltip]:focus-visible::before,
.catalog-nav-isotipo-wrap[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.catalog-filter-tab,
.catalog-mobile-filter-panel {
  display: none;
}

.catalog-category-nav-section .chips {
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0;
  height: 3.1rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--container-pad);
  scroll-snap-type: x proximity;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
}

.catalog-category-nav-section .chips::-webkit-scrollbar {
  display: none;
}

.catalog-category-nav-section .chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  box-shadow: 0 10px 22px rgba(7, 28, 44, .05);
}

.breadcrumb.catalog-top-breadcrumb {
  width: fit-content;
  max-width: 100%;
  align-items: center;
  justify-self: start;
  margin: 0;
  padding: .38rem .58rem;
  border: 1px solid var(--catalog-breadcrumb-border);
  border-radius: 999px;
  background: var(--catalog-breadcrumb-bg);
  color: var(--catalog-breadcrumb-fg);
  box-shadow: var(--catalog-breadcrumb-shadow);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px) saturate(145%);
  font-size: .78rem;
  font-weight: 800;
}

@media (min-width: 1121px) and (max-width: 1599px) {
  .breadcrumb.catalog-top-breadcrumb {
    margin-left: 6.65rem;
  }
}

@media (min-width: 1600px) {
  .breadcrumb.catalog-top-breadcrumb {
    max-width: calc(100% + 6.75rem);
    margin-left: -6.75rem;
  }
}

.breadcrumb.catalog-top-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb.catalog-top-breadcrumb a:hover,
.breadcrumb.catalog-top-breadcrumb a:focus-visible {
  color: var(--catalog-breadcrumb-fg);
}

.breadcrumb.catalog-top-breadcrumb span {
  color: var(--catalog-breadcrumb-muted);
}

.breadcrumb.catalog-top-breadcrumb span:last-child {
  color: var(--catalog-breadcrumb-fg);
}

.catalog-page-shell[data-catalog-category="herramientas"] .breadcrumb.catalog-top-breadcrumb {
  text-shadow: none;
}

.catalog-promo-section {
  padding: clamp(.9rem, 2vw, 1.35rem) 0 clamp(1rem, 2.4vw, 1.6rem);
  background:
    linear-gradient(180deg, #fff 0%, #f7faff 100%);
}

.catalog-promo-mobile {
  display: none;
}

.catalog-promo-carousel {
  position: relative;
  min-height: clamp(360px, 31vw, 520px);
  overflow: hidden;
  border-radius: 0;
  background: var(--color-primary-blue);
  box-shadow: 0 24px 54px rgba(7, 28, 44, .12);
  isolation: isolate;
  touch-action: pan-y;
  transform: translateZ(0);
}

.catalog-promo-carousel.is-touch-swiping {
  cursor: grabbing;
}

.catalog-promo-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 255, 255, .24), transparent 18rem),
    linear-gradient(112deg, #52b7ff 0%, var(--color-primary-blue) 62%, #0640b8 100%);
}

.catalog-promo-slides,
.catalog-promo-slide {
  position: absolute;
  inset: 0;
}

.catalog-promo-slides {
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
}

.catalog-promo-slide {
  --promo-pad-y: clamp(1.35rem, 2.7vw, 2.35rem);
  --promo-pad-x: clamp(1.35rem, 2.7vw, 2.35rem);
  --promo-art-radius: 30px;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 255, 255, .24), transparent 18rem),
    linear-gradient(112deg, #52b7ff 0%, var(--color-primary-blue) 62%, #0640b8 100%);
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(420px, 1.08fr);
  align-items: stretch;
  gap: clamp(1rem, 2.5vw, 2.4rem);
  padding: var(--promo-pad-y) var(--promo-pad-x);
  opacity: 0;
  visibility: hidden;
  transform: translateX(1.8rem);
  transition:
    opacity 520ms ease,
    visibility 520ms ease,
    transform 620ms cubic-bezier(.16, 1, .3, 1);
}

.catalog-promo-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.catalog-promo-carousel.is-touch-swiping .catalog-promo-slide.is-active {
  transform: translateX(var(--promo-swipe-x, 0));
  transition: none;
}

.catalog-promo-yellow {
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 255, 255, .52), transparent 16rem),
    linear-gradient(112deg, var(--color-yellow) 0%, #fff3a6 38%, var(--color-primary-blue) 100%);
}

.catalog-promo-navy {
  background:
    radial-gradient(circle at 78% 14%, rgba(252, 209, 22, .32), transparent 16rem),
    linear-gradient(112deg, #082b36 0%, var(--color-primary-blue) 70%, #071c2c 100%);
}

.catalog-promo-fresh {
  background:
    radial-gradient(circle at 80% 12%, rgba(252, 209, 22, .26), transparent 14rem),
    linear-gradient(112deg, #e8fff5 0%, #3bbf9a 34%, var(--color-primary-blue) 100%);
}

.catalog-promo-soft {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .5), transparent 18rem),
    linear-gradient(112deg, #eef4ff 0%, #8fb6ff 42%, var(--color-primary-blue) 100%);
}

.catalog-promo-deal {
  background:
    radial-gradient(circle at 18% 12%, rgba(252, 209, 22, .38), transparent 16rem),
    linear-gradient(112deg, var(--color-primary-blue) 0%, #0748d8 55%, #071c2c 100%);
}

.catalog-promo-copy {
  position: relative;
  z-index: 2;
  isolation: isolate;
  align-self: center;
  display: grid;
  justify-items: start;
  gap: clamp(.62rem, 1vw, .82rem);
  max-width: min(34rem, 100%);
  min-width: 0;
}

.catalog-promo-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .42rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--color-primary-blue);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 12px 28px rgba(7, 28, 44, .12);
}

.catalog-promo-copy h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 12ch;
  color: #fff;
  font-family: var(--font-title);
  font-size: clamp(2.35rem, 3.75vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -.045em;
  text-wrap: balance;
  text-shadow: 0 14px 34px rgba(2, 18, 32, .20);
}

.catalog-promo-yellow .catalog-promo-copy h2,
.catalog-promo-fresh .catalog-promo-copy h2,
.catalog-promo-soft .catalog-promo-copy h2 {
  color: var(--color-navy);
  text-shadow: 0 10px 28px rgba(255, 255, 255, .34);
}

.catalog-promo-copy p {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 38ch;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(.9rem, .95vw, 1rem);
  font-weight: 700;
  line-height: 1.38;
}

.catalog-promo-yellow .catalog-promo-copy p,
.catalog-promo-fresh .catalog-promo-copy p,
.catalog-promo-soft .catalog-promo-copy p {
  color: rgba(16, 24, 40, .78);
}

.catalog-promo-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 35px;
  font-size: .9rem;
  padding: .32rem .8rem;
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary-blue);
  font-weight: 950;
  box-shadow: 0 16px 32px rgba(2, 18, 32, .18);
}

.catalog-promo-art {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
  min-width: 0;
  min-height: 0;
  margin: calc(var(--promo-pad-y) * -1) calc(var(--promo-pad-x) * -1) calc(var(--promo-pad-y) * -1) 0;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, .28), transparent 12rem),
    linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08));
  overflow: hidden;
  border-radius: 0;
}

.catalog-promo-art span {
  grid-area: 1 / 1;
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  flex-wrap: wrap;
  top: clamp(-0.15rem, 0.4vw, 14.1rem);
  left: clamp(-2.15rem, 1.4vw, 2.1rem);
  z-index: 2;
  max-width: 18ch;
  padding: .5rem .82rem;
  border-radius: 16px;
  background: var(--color-primary-blue);
  color: #ffffff;
  font-family: var(--font-title);
  font-size: clamp(1.15rem, 2.5vw, 1.7rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.024em;
}

.catalog-promo-art-isotipo {
  width: 1.05em;
  height: 1.05em;
  object-fit: contain;
  flex: 0 0 auto;
}

.catalog-promo-art-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.02);
  transform: scale(1.01);
}

.catalog-promo-watermark {
  position: absolute;
  top: clamp(-5.5rem, -7vw, -3.25rem);
  right: clamp(.2rem, 1vw, .8rem);
  z-index: 0;
  width: clamp(56px, 6.4vw, 92px);
  height: auto;
  opacity: .13;
  filter: drop-shadow(0 14px 28px rgba(2, 18, 32, .18));
  pointer-events: none;
}

.catalog-promo-blue .catalog-promo-watermark,
.catalog-promo-navy .catalog-promo-watermark,
.catalog-promo-deal .catalog-promo-watermark {
  opacity: .18;
  filter: brightness(0) invert(1) drop-shadow(0 14px 28px rgba(2, 18, 32, .18));
}

.catalog-promo-controls {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  padding: .28rem;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(7, 28, 44, .2);
  box-shadow:
    0 16px 34px rgba(2, 18, 32, .18),
    inset 0 1px 0 rgba(255, 255, 255, .18);
  backdrop-filter: blur(14px) saturate(150%);
}

.catalog-promo-control {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .54);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--color-navy);
  box-shadow:
    0 12px 24px rgba(2, 18, 32, .16),
    inset 0 1px 0 rgba(255, 255, 255, .96);
  cursor: pointer;
  transition:
    transform 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.catalog-promo-control:hover {
  transform: translateY(-1px);
  background: #fff;
  color: var(--color-primary-blue);
  box-shadow:
    0 16px 30px rgba(2, 18, 32, .22),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.catalog-promo-control:focus-visible {
  outline: 3px solid rgba(252, 209, 22, .78);
  outline-offset: 2px;
}

.catalog-promo-toggle {
  background: var(--color-yellow);
  color: #071c2c;
  border-color: rgba(252, 209, 22, .82);
}

.catalog-promo-control .icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.55;
}

[data-promo-toggle-icon] {
  display: inline-grid;
  place-items: center;
}

[data-promo-toggle-icon] .icon {
  width: 14px;
  height: 14px;
}

.catalog-promo-dots {
  position: absolute;
  left: auto;
  right: clamp(1.2rem, 3vw, 2.25rem);
  bottom: 1rem;
  z-index: 4;
  display: inline-flex;
  gap: .4rem;
}

.catalog-promo-dots button {
  width: 22px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .46);
  cursor: pointer;
  transition: width var(--ease), background var(--ease);
}

.catalog-promo-dots button.is-active {
  width: 38px;
  background: var(--color-yellow);
}

.catalog-section-heading {
  display: block;
}

.catalog-section-heading[data-catalog-swipe-zone] {
  touch-action: pan-y;
}

.catalog-section-heading .container {
  display: grid;
  align-items: center;
  gap: clamp(1rem, 3vw, 3.2rem);
}

.catalog-heading-copy {
  min-width: 0;
}

.catalog-heading-intro {
  display: grid;
  gap: .72rem;
  max-width: min(100%, 40rem);
}

.catalog-heading-intro p {
  margin: 0;
  color: black;
  font-weight: 600;
  text-shadow: 0 8px 22px rgba(0, 20, 62, .20);
}

.catalog-heading-bullets {
  display: flex;
  flex-wrap: wrap;
  gap: .48rem .85rem;
  align-items: center;
}

.catalog-heading-bullets span {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  color: rgb(0 0 0 / 78%);
  font-size: clamp(.82rem, 1vw, .94rem);
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 0 7px 18px rgba(0, 20, 62, .18);
}

.catalog-heading-bullets i {
  width: .58rem;
  height: .58rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #0b55f4;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 0 18px var(--catalog-accent-one);
}

.catalog-heading-bullets span:nth-child(2) i {
  background: #0b55f4;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 0 18px var(--catalog-accent-two);
}

.catalog-heading-bullets span:nth-child(3) i {
  background: #0b55f4;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 0 18px var(--catalog-accent-three);
}

.catalog-heading-side {
  min-width: 0;
  display: grid;
  justify-items: end;
  align-items: center;
  gap: .7rem;
}

.catalog-heading-pill {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .36rem .65rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  font-size: 1rem;
  font-weight: 950;
  box-shadow: 0 5px 0px rgba(0, -4, 45, 0.16);
  backdrop-filter: blur(14px) saturate(145%);
  margin-bottom: .35rem;
}

.catalog-heading-pill .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke-width: 2.2;
}

.catalog-heading-pill[data-category="limpieza"] {
  color: #000;
}

.catalog-category-hero-media {
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}

.catalog-category-hero-media img {
  display: block;
  width: min(100%, 758px);
  max-height: clamp(162px, 38vw, 428px);
  object-fit: contain;
  object-position: left;
  background: transparent;
}

.catalog-section-heading h1 {
  --catalog-heading-logo-height: 1.16em;
  --catalog-heading-logo-x: 0px;
  --catalog-heading-logo-y: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: clamp(.78rem, 1.65vw, 1.3rem);
  width: fit-content;
  margin: 0;
  color: var(--catalog-hero-title);
  font-family: var(--font-title);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -.04em;
  text-shadow:
    0 1px 1px rgba(255, 255, 255, .24),
    0 4px 12px rgba(0, 20, 62, .22),
    0 16px 34px rgba(0, 20, 62, .24),
    0 0 20px rgba(255, 255, 255, .18);
  margin-bottom: .75rem;
}

.catalog-title-word {
  display: inline-flex;
  align-items: center;
  color: var(--catalog-heading-title-word-color, var(--color-white));
}

.catalog-section-heading-inline {
  display: none;
}

.catalog-heading-logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: var(--catalog-heading-logo-height);
  max-width: min(46vw, 387px);
  object-fit: contain;
  transform: translate(var(--catalog-heading-logo-x), var(--catalog-heading-logo-y));
  filter: var(
    --catalog-heading-logo-filter,
    brightness(1.08) contrast(1.08) drop-shadow(0 3px 7px rgba(0, 20, 62, .20)) drop-shadow(0 13px 24px rgba(0, 20, 62, .24)) drop-shadow(0 0 14px rgba(255, 255, 255, .18))
  );
}

/* Desktop >= 1024px */
@media (min-width: 1024px) {
  .catalog-section-heading {
    padding: .95rem 0 .25rem;
  }

  .catalog-section-heading .container {
    grid-template-columns: minmax(0, .92fr) minmax(320px, 1fr);
  }

  .catalog-section-heading h1 {
    font-size: clamp(1.1rem, 5.4vw, 4.8rem);
    margin-bottom: -0.1rem;
  }

  .catalog-heading-logo {
    --catalog-heading-logo-height: 1.80em;
  }
}

/* Tablet 768px-1023px */
@media (max-width: 1023px) {

  .home-category-rail-section,
  .category-quick-nav-section {
    display: none;
  }

  .section-featured-collections .section-head {
    justify-items: center;
    text-align: center;
  }

  .section-featured-collections .section-head>div {
    display: grid;
    justify-items: center;
  }

  .section-featured-collections .section-title,
  .section-featured-collections .section-kicker {
    margin-left: auto;
    margin-right: auto;
  }

  .section-featured-collections .section-kicker {
    max-width: 34ch;
  }

  .catalog-promo-desktop {
    display: none;
  }

  .catalog-promo-mobile {
    display: block;
  }

  .catalog-promo-mobile .catalog-promo-section,
  .catalog-section-heading-inline {
    background: none;
  }

  .catalog-page-shell[data-catalog-category="hogar"] {
    --catalog-heading-pill-color: #07111f;
    --catalog-heading-pill-offset-y: -1.05rem;
  }

  .catalog-page-shell[data-catalog-category="carro-moto"] {
    --catalog-heading-pill-offset-y: -1.15rem;
  }

  .catalog-page-shell[data-catalog-category="limpieza"] {
    --catalog-heading-pill-offset-y: 0.15rem;
  }

  .catalog-page-shell[data-catalog-category="herramientas"] {
    --catalog-heading-pill-color: #07111f;
    --catalog-heading-pill-offset-y: -.3rem;
  }

  .catalog-promo-mobile .catalog-promo-carousel {
    border-radius: 22px;
    overflow: hidden;
  }

  .catalog-section-heading .container {
    grid-template-columns: 1fr;
  }

  .catalog-heading-side {
    justify-items: start;
    gap: .5rem;
  }

  .catalog-section-heading-inline .catalog-heading-pill {
    background: none;
    box-shadow: none;
  }

  .catalog-editorial-banner {
    display: none !important;
  }

  .catalog-section-heading-main {
    display: none;
  }

  .catalog-section-heading-inline {
    display: block;
    padding: .85rem 0 .35rem;
  }

  .catalog-section-heading-inline .container {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: .32rem;
  }

  .catalog-section-heading-inline .catalog-heading-copy {
    display: contents;
    text-align: center;
  }

  .catalog-section-heading-inline .catalog-heading-intro {
    order: 4;
    justify-items: center;
    max-width: min(92vw, 38rem);
    margin-top: .2rem;
  }

  .catalog-section-heading-inline .catalog-heading-bullets {
    justify-content: center;
  }

  .catalog-section-heading-inline .catalog-title-lockup {
    order: 1;
    justify-content: center;
    margin-inline: auto;
    margin-bottom: 0;
  }

  .catalog-section-heading-inline .catalog-heading-side {
    display: contents;
  }

  .catalog-section-heading-inline .catalog-category-hero-media {
    order: 2;
    display: flex;
    justify-self: center;
    width: min(92vw, 680px);
    height: auto;
    min-height: clamp(195px, 39vw, 330px);
    justify-content: center;
    align-items: center;
    margin-top: .05rem;
    overflow: visible;
  }

  .catalog-section-heading-inline .catalog-category-hero-media img {
    width: auto;
    max-width: 100%;
    max-height: clamp(195px, 39vw, 330px);
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 10px 22px rgba(7, 28, 44, .08));
  }

  .catalog-section-heading-inline .catalog-category-hero-media[data-category-hero="carro-moto"] {
    width: min(88vw, 640px);
    min-height: clamp(170px, 28vw, 260px);
    align-items: center;
  }

  .catalog-section-heading-inline .catalog-category-hero-media[data-category-hero="limpieza"] {
    min-height: clamp(220px, 44vw, 360px);
  }

  .catalog-section-heading-inline .catalog-category-hero-media[data-category-hero="limpieza"] img {
    max-height: clamp(220px, 44vw, 360px);
  }

  .catalog-section-heading-inline .catalog-heading-pill {
    order: 3;
    justify-self: center;
    max-width: min(92vw, 280px);
    min-height: 28px;
    margin: calc(.18rem + var(--catalog-heading-pill-offset-y, 0rem)) auto .1rem;
    padding: .32rem .66rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    color: var(--catalog-heading-pill-color, var(--catalog-hero-title));
    font-size: .76rem;
    transform: translateX(var(--catalog-heading-pill-offset-x, 0rem));
  }

  .catalog-section-heading {
    padding: .85rem 0 .2rem;
  }

  .catalog-section-heading h1 {
    --catalog-heading-logo-height: 1.12em;
    --catalog-heading-logo-y: .04em;
    font-size: 4rem;
  }
}

/* Mobile < 768px */
@media (max-width: 767px) {
  .catalog-section-heading-inline {
    padding: .62rem 0 .26rem;
  }

  .catalog-section-heading-inline .container {
    gap: .24rem;
  }

  .catalog-section-heading-inline .catalog-category-hero-media {
    width: min(92vw, 420px);
    min-height: clamp(185px, 52vw, 230px);
    align-items: center;
    margin-top: .5rem;
  }

  .catalog-section-heading-inline .catalog-category-hero-media[data-category-hero] {
    min-height: clamp(185px, 52vw, 230px);
    align-items: center;
  }

  .catalog-section-heading-inline .catalog-category-hero-media img {
    max-height: clamp(185px, 52vw, 230px);
    margin-top: 0;
  }

  .catalog-section-heading-inline .catalog-heading-pill {
    max-width: min(88vw, 230px);
    min-height: 26px;
    margin: calc(.18rem + var(--catalog-heading-pill-offset-y, 0rem)) auto .08rem;
    padding: .28rem .58rem;
    font-size: .88rem;
  }

  .catalog-section-heading {
    padding: .75rem 0 .15rem;
  }

  .catalog-section-heading h1 {
    --catalog-heading-logo-height: 1.06em;
    --catalog-heading-logo-y: .04em;
    gap: .68rem;
    font-size: clamp(2.15rem, 10vw, 2.75rem);
  }

  .catalog-heading-intro {
    gap: .55rem;
    max-width: min(92vw, 23rem);
    margin-top: .18rem;
  }

  .catalog-heading-intro p {
    font-size: .92rem;
    line-height: 1.4;
  }

  .catalog-heading-bullets {
    gap: .4rem .62rem;
  }

  .catalog-heading-bullets span {
    gap: .32rem;
    font-size: .72rem;
  }

  .catalog-heading-bullets i {
    width: .45rem;
    height: .45rem;
    box-shadow: 0 0 0 3px rgba(11, 85, 244, .1);
  }
}

@media (max-width: 1120px) {
  .catalog-promo-carousel {
    min-height: clamp(360px, 45vw, 500px);
  }

  .catalog-promo-slide {
    --promo-pad-y: clamp(1rem, 2.4vw, 1.6rem);
    --promo-pad-x: clamp(1rem, 2.4vw, 1.6rem);
    --promo-art-radius: 26px;
    grid-template-columns: minmax(0, .8fr) minmax(340px, 1fr);
    gap: clamp(.8rem, 2vw, 1.4rem);
  }

  .catalog-promo-copy h2 {
    font-size: clamp(2.05rem, 4.8vw, 3.3rem);
  }

  .catalog-promo-art {
    min-height: 0;
  }

  .catalog-promo-art-image {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
  }
}

@media (max-width: 920px) {
  .catalog-promo-carousel {
    min-height: clamp(620px, 68vw, 660px);
  }

  .catalog-promo-slide {
    --promo-pad-y: clamp(1rem, 2.8vw, 1.35rem);
    --promo-pad-x: clamp(1rem, 2.8vw, 1.35rem);
    grid-template-columns: 1fr;
    align-content: start;
    align-items: start;
    gap: .95rem;
  }

  .catalog-promo-copy {
    max-width: min(100%, 36rem);
    padding-right: 5.2rem;
  }

  .catalog-promo-copy h2 {
    max-width: 43ch;
    font-size: clamp(2.05rem, 6.8vw, 3.45rem);
  }

  .catalog-promo-art {
    align-self: auto;
    margin: 0;
    min-height: clamp(190px, 34vw, 260px);
    border-radius: 24px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .2),
      0 24px 48px rgba(2, 18, 32, .14);
  }

  .catalog-promo-art-image {
    width: 100%;
    height: 100%;
    max-height: none;
  }

  .catalog-promo-watermark {
    top: 4.05rem;
    right: 0;
    width: clamp(58px, 12vw, 78px);
    opacity: .16;
  }
}

.catalog-sidebar {
  display: grid;
  gap: .85rem;
  align-self: start;
  top: calc(var(--header-height) + 5.25rem);
}

.catalog-context-card {
  display: grid;
  gap: .62rem;
  padding: .95rem;
  border: 1px solid rgba(11, 85, 244, .12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 12%, rgba(252, 209, 22, .18), transparent 11rem),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(246, 250, 255, .9));
  box-shadow: 0 18px 42px rgba(7, 28, 44, .055);
}

.catalog-context-card .coral-line {
  margin: .05rem 0 .15rem;
}

.catalog-context-card p {
  margin: 0;
  color: rgba(16, 24, 40, .76);
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.42;
}

.catalog-context-card .catalog-smart-panel,
.catalog-context-card .catalog-commerce-strip {
  width: 100%;
  margin-top: .15rem;
}

.catalog-results .catalog-context-card {
  margin-top: .95rem;
  padding: clamp(1rem, 2vw, 1.3rem);
}

.catalog-results .catalog-context-card p {
  max-width: 72ch;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-top: .2rem;
}

.footer h3 {
  margin: 0 0 .75rem;
  color: white;
  font-size: .95rem;
  letter-spacing: -.01em;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .45rem;
}

.footer li,
.footer a {
  color: rgba(255, 255, 255, .68);
  font-size: .9rem;
}

.footer a:hover {
  color: var(--color-yellow);
}

.footer-contact-card {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: .58rem;
  padding: clamp(1rem, 2vw, 1.25rem);
  border: 1px solid rgba(252, 209, 22, .22);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(252, 209, 22, .20), transparent 48%),
    rgba(255, 255, 255, .08);
}

.footer-contact-label {
  color: var(--color-yellow);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-self: center;
}

.footer-contact-card strong {
  max-width: 12ch;
  font-family: var(--font-title);
  justify-self: left;
  color: white;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: .95;
  letter-spacing: -.04em;
}

.footer-contact-card p {
  color: rgba(255, 255, 255, .74);
  font-size: .92rem;
  line-height: 1.42;
  justify-self: center;
}

.footer-whatsapp {
  justify-self: center;
  margin-top: .25rem;
  min-height: 42px;
  padding: .6rem .85rem;
}

.footer-whatsapp .icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

.catalog-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: clamp(.95rem, 1.5vw, 1.25rem);
}

.catalog-hero-stats span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 38px;
  padding: .45rem .72rem;
  border: 1px solid rgba(11, 85, 244, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: var(--color-text-muted);
  box-shadow: 0 8px 20px rgba(7, 28, 44, .04);
  font-size: .84rem;
  font-weight: 750;
}

.catalog-hero-stats strong {
  color: var(--color-primary-blue);
  font-family: var(--font-title);
  font-size: 1.05rem;
  line-height: 1;
}

.catalog-smart-panel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
  width: min(100%, 470px);
  margin-top: .75rem;
  padding: .58rem .72rem .58rem .62rem;
  border: 1px solid rgba(11, 85, 244, .14);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(252, 209, 22, .24), rgba(255, 255, 255, .86) 46%, rgba(11, 85, 244, .08));
  color: rgba(16, 24, 40, .74);
  box-shadow:
    0 14px 34px rgba(7, 28, 44, .055),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  font-size: .84rem;
  line-height: 1.28;
}

.catalog-smart-panel::before {
  content: "";
  grid-row: 1 / span 2;
  width: .58rem;
  height: .58rem;
  border-radius: 50%;
  background: var(--color-colombia-yellow, var(--color-yellow));
  box-shadow:
    0 0 0 5px rgba(252, 209, 22, .2),
    0 0 20px rgba(252, 209, 22, .45);
}

.catalog-smart-panel strong {
  grid-column: 2;
  color: var(--color-primary-blue);
  font-weight: 900;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.catalog-smart-panel span {
  grid-column: 2;
}

.catalog-commerce-strip {
  display: grid;
  gap: .52rem;
  width: min(100%, 560px);
  margin-top: .8rem;
  padding: .62rem;
  border: 1px solid rgba(11, 85, 244, .12);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 18%, rgba(252, 209, 22, .18), transparent 10rem),
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(244, 248, 255, .78));
  box-shadow: 0 14px 34px rgba(7, 28, 44, .055);
}

.catalog-commerce-label {
  margin: 0;
  color: rgba(16, 24, 40, .70);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: -.01em;
}

.catalog-commerce-brands,
.catalog-payment-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .42rem;
}

.catalog-commerce-brands span,
.catalog-payment-row span,
.catalog-payment-row strong {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  min-height: 30px;
  padding: .34rem .52rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 900;
  line-height: 1;
}

.catalog-commerce-brands span {
  border: 1px solid rgba(11, 85, 244, .12);
  background: #fff;
  color: var(--color-navy);
}

.catalog-commerce-brands .catalog-brand-tag {
  color: var(--color-primary-blue);
}

.catalog-commerce-brands .catalog-brand-tag strong {
  font: inherit;
}

.catalog-commerce-brands span:nth-child(2) {
  background: #95bf47;
  color: #fff;
  border-color: rgba(149, 191, 71, .35);
}

.catalog-commerce-brands img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.catalog-payment-row span {
  background: rgba(11, 85, 244, .07);
  color: var(--color-primary-blue);
}

.catalog-payment-row strong {
  background: var(--color-yellow);
  color: var(--color-navy);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(255, 255, 255, .58);
  font-size: .84rem;
  padding-top: .9rem;
}

.page-hero {
  padding: clamp(2rem, 5vw, 4rem) 0 1rem;
  /* background: linear-gradient(180deg, #fff 0%, var(--color-bg-warm) 100%); */
}

.legal-hero .page-title {
  max-width: 13ch;
}

.legal-hero .page-intro {
  max-width: 66ch;
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}

.legal-nav {
  position: sticky;
  top: calc(var(--header-height) + 1rem);
  display: grid;
  gap: .35rem;
}

.legal-nav a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: .72rem .85rem;
  border-radius: 10px;
  color: var(--color-text);
  font-weight: 760;
}

.legal-nav a:hover,
.legal-nav a.is-active {
  background: rgba(0, 102, 255, .09);
  color: var(--color-primary-blue);
}

.legal-content {
  display: grid;
  gap: 1rem;
}

.legal-card h2,
.legal-contact h2 {
  margin: 0 0 .65rem;
  font-family: var(--font-title);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.legal-card p,
.legal-contact p {
  margin: .55rem 0 0;
  color: var(--color-text-muted);
  line-height: 1.68;
}

.page-hero:has(.product-detail-grid) {
  padding-top: clamp(.8rem, 2vw, 1.45rem);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  color: var(--color-text-soft);
  font-size: .82rem;
  margin-bottom: 1.1rem;
}

.page-hero:has(.product-detail-grid) .breadcrumb {
  margin-bottom: .55rem;
}

.breadcrumb a:hover {
  color: var(--color-primary-blue);
}

.page-title {
  font-size: clamp(2.35rem, 5vw, 15rem);
  line-height: 1.03;
  max-width: 760px;
}

.page-intro {
  max-width: 730px;
  margin: .9rem 0 0;
  color: rgba(16, 24, 40, .82);
  font-size: clamp(1.08rem, 1.55vw, 1.34rem);
  font-weight: 560;
  line-height: 1.42;
  letter-spacing: -.018em;
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .64),
    0 8px 22px rgba(7, 28, 44, .06);
}

.page-intro span {
  color: var(--color-primary-blue);
  font-weight: 720;
}

.catalog-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(.95rem, 1.8vw, 1.45rem);
  align-items: start;
}

.catalog-sidebar {
  position: static;
  width: 0;
  height: 0;
}

.catalog-filter-tab-desktop {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  transform: translateX(calc(-100% - .75rem));
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  min-height: 46px;
  min-width: 6rem;
  padding: .6rem .78rem;
  border: 1px solid rgba(11, 85, 244, .18);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 10%, rgba(252, 209, 22, .24), transparent 70%),
    rgba(255, 255, 255, .95);
  color: var(--color-navy);
  box-shadow:
    0 16px 34px rgba(7, 28, 44, .1),
    inset 0 1px 0 rgba(255, 255, 255, .98);
  font-weight: 900;
  font-size: .86rem;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.catalog-filter-tab-desktop .icon {
  width: 18px;
  height: 18px;
  color: var(--color-primary-blue);
  stroke-width: 2.25;
}

.catalog-filter-tab-desktop:hover,
.catalog-filter-tab-desktop.is-active {
  transform: translateX(calc(-100% - .75rem)) translateY(-1px);
  border-color: rgba(11, 85, 244, .48);
  background: var(--color-primary-blue);
  color: #fff;
}

.catalog-filter-tab-desktop:hover .icon,
.catalog-filter-tab-desktop.is-active .icon {
  color: #fff;
}

@media (min-width: 1121px) and (max-width: 1599px) {
  .catalog-filter-tab-desktop {
    transform: none;
  }

  .catalog-filter-tab-desktop:hover,
  .catalog-filter-tab-desktop.is-active {
    transform: translateY(-1px);
  }
}

.catalog-desktop-filter-drawer {
  position: fixed;
  left: var(--catalog-filter-drawer-left, max(.75rem, env(safe-area-inset-left, 0px)));
  top: var(--catalog-filter-drawer-top, calc(var(--header-height) + 4.25rem));
  z-index: 980;
  width: min(328px, calc(100vw - 1.5rem));
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transform-origin: left top;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.catalog-desktop-filter-drawer[hidden] {
  display: none;
}

.catalog-desktop-filter-drawer.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.catalog-desktop-filter-drawer .filters {
  position: static;
  width: 100%;
  max-height: min(68vh, 640px);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 20px;
}

.filters {
  position: sticky;
  top: calc(var(--header-height) + 1rem);
  padding: .95rem;
  margin-top: 0;
  border-color: rgba(11, 85, 244, .12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(252, 209, 22, .13), transparent 13rem),
    radial-gradient(circle at 92% 16%, rgba(11, 85, 244, .08), transparent 16rem),
    linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(249, 252, 255, .92));
  box-shadow:
    0 18px 42px rgba(7, 28, 44, .06),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

.filter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: .55rem;
}

.filter-head h2 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 1.12rem;
  letter-spacing: -.025em;
  color: var(--color-navy);
}

.filter-head button {
  border: 0;
  border-radius: 999px;
  background: rgba(11, 85, 244, .07);
  color: var(--color-primary-blue);
  font-weight: 800;
  font-size: .78rem;
  padding: .42rem .58rem;
}

.filter-group {
  padding: .05rem 0;
  border-top: 1px solid rgba(11, 85, 244, .1);
}

.filter-group:first-of-type {
  border-top: 0;
}

.filter-toggle {
  width: 100%;
  padding: .78rem 0;
  border: 0;
  background: transparent;
  color: var(--color-navy);
  font: inherit;
  font-size: .92rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  cursor: pointer;
  transition: color var(--ease), transform var(--ease);
}

.filter-toggle:hover {
  color: var(--color-primary-blue);
}

.filter-toggle:focus-visible {
  outline: 0;
  color: var(--color-primary-blue);
}

.filter-toggle:focus-visible span:first-child {
  box-shadow: 0 0 0 3px rgba(11, 85, 244, .14);
  border-radius: 999px;
}

.filter-toggle-icon {
  width: 11px;
  height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
  opacity: .7;
  flex: 0 0 auto;
  margin-right: .15rem;
}

.filter-group.is-open .filter-toggle {
  color: var(--color-primary-blue);
}

.filter-group.is-open .filter-toggle-icon {
  transform: rotate(-135deg);
  opacity: 1;
}

.filter-group-body {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition:
    height .38s cubic-bezier(.22, 1, .36, 1),
    opacity .24s ease,
    padding-bottom .38s cubic-bezier(.22, 1, .36, 1);
  padding-bottom: 0;
  will-change: height;
}

.filter-group.is-open .filter-group-body {
  opacity: 1;
  padding-bottom: .85rem;
}

.filter-group-inner {
  display: grid;
  gap: .05rem;
}

.check-row,
.radio-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: .32rem 0;
  color: var(--color-text-muted);
  font-size: .9rem;
}

.check-row input,
.radio-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary-blue);
}

.filter-input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-top: .7rem;
}

.input,
.select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: .72rem .85rem;
  color: var(--color-text);
  outline: none;
}

.checkout-page .input,
.checkout-page .select {
  min-height: 52px;
  border-color: rgba(11, 85, 244, .14);
  border-radius: 999px;
  background-color: #fff;
  font-weight: 600;
}

.checkout-page .select {
  appearance: auto;
  color: var(--color-navy);
}

.input::placeholder {
  color: #98a2b3;
}

.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 58px;
  margin-bottom: .85rem;
  padding: .58rem .72rem .58rem .95rem;
  border: 1px solid rgba(11, 85, 244, .1);
  border-radius: 20px;
  background: rgba(255, 255, 255, .84);
  color: var(--color-text-muted);
  font-size: .9rem;
  box-shadow: 0 12px 30px rgba(7, 28, 44, .045);
}

.catalog-toolbar-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .58rem .72rem;
  min-width: 0;
}

.catalog-toolbar [data-catalog-visible-label] {
  color: var(--color-navy);
  font-weight: 850;
  letter-spacing: -.015em;
}

.catalog-toolbar .catalog-hero-stats {
  gap: .36rem;
  margin-top: 0;
}

.catalog-toolbar .catalog-hero-stats span {
  min-height: 32px;
  padding: .32rem .58rem;
  border-color: rgba(11, 85, 244, .12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(247, 250, 255, .9));
  font-size: .74rem;
  box-shadow: none;
}

.catalog-toolbar .catalog-hero-stats strong {
  font-size: .92rem;
}

.catalog-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--color-text-soft);
  font-weight: 720;
}

.catalog-toolbar .select {
  width: 180px;
  min-height: 40px;
  border-color: rgba(11, 85, 244, .18);
  border-radius: 14px;
  background-color: #fff;
}

.catalog-results {
  grid-area: 1 / 1;
  min-width: 0;
  width: 100%;
}

.catalog-results .product-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.62rem, .82vw, .88rem);
}

.catalog-results .product-card {
  --catalog-card-badge-top: calc(.1rem + .3rem);
  --catalog-card-badge-left: calc(-.1rem + .5rem);
  --catalog-card-badge-right: calc(.75rem + 3.1rem);
  --catalog-card-badge-gap: .35rem;
  --catalog-card-badge-stack-max: calc(100% - .75rem - 4rem);
  --catalog-card-badge-pad-y: .28rem;
  --catalog-card-badge-pad-x: .55rem;
  --catalog-card-badge-font-size: .73rem;
  --catalog-card-fav-top: calc(-.2rem + .46rem);
  --catalog-card-fav-right: calc(-.2rem + .46rem);
  --catalog-card-fav-size: 34px;
  --catalog-card-fav-icon-size: 18px;
  --catalog-card-overlay-z: 2;
  box-shadow: 0 12px 28px rgba(11, 85, 244, .045);
  transition:
    transform 220ms cubic-bezier(.22, 1, .36, 1),
    border-color 180ms ease,
    box-shadow 220ms ease;
}

.catalog-results .product-badges {
  top: var(--catalog-card-badge-top);
  left: var(--catalog-card-badge-left);
  right: var(--catalog-card-badge-right);
  z-index: var(--catalog-card-overlay-z);
  gap: var(--catalog-card-badge-gap);
}

.catalog-results .product-badges.is-stacked {
  max-width: var(--catalog-card-badge-stack-max);
}

.catalog-results .product-badge {
  padding: var(--catalog-card-badge-pad-y) var(--catalog-card-badge-pad-x);
  font-size: var(--catalog-card-badge-font-size);
}

.catalog-results .fav-btn {
  top: var(--catalog-card-fav-top);
  right: var(--catalog-card-fav-right);
  z-index: var(--catalog-card-overlay-z);
  width: var(--catalog-card-fav-size);
  height: var(--catalog-card-fav-size);
}

.catalog-results .fav-btn .icon {
  width: var(--catalog-card-fav-icon-size);
  height: var(--catalog-card-fav-icon-size);
}

.catalog-results .product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(11, 85, 244, .2);
  box-shadow: 0 20px 40px rgba(11, 85, 244, .1);
}

.catalog-results .product-card.is-product-hidden {
  display: none;
}

.catalog-load-more {
  display: grid;
  place-items: center;
  gap: .55rem;
  margin: clamp(1rem, 1.7vw, 1.45rem) 0 0;
  padding: clamp(.95rem, 1.5vw, 1.2rem);
  border: 1px dashed rgba(11, 85, 244, .22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 10%, rgba(252, 209, 22, .18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(246, 250, 255, .9));
  box-shadow: 0 16px 36px rgba(7, 28, 44, .05);
  text-align: center;
}

.catalog-load-more .btn {
  min-width: min(100%, 230px);
  min-height: 46px;
}

.catalog-load-more small {
  max-width: 36ch;
  color: var(--color-text-soft);
  font-weight: 650;
  line-height: 1.35;
}

.catalog-promo-after-products {
  margin-top: clamp(1.35rem, 3vw, 2rem);
  width: 100%;
}

.catalog-promo-after-products .catalog-promo-section {
  padding: 0;
}

.catalog-promo-after-products .catalog-promo-section .container {
  width: 100%;
  max-width: none;
  padding: 0;
}

.catalog-promo-after-products .catalog-promo-carousel,
.catalog-editorial-banner {
  width: 100%;
}

/* ============================================
   EDITORIAL BANNER
   ============================================ */
.editorial-banner {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(250px, .62fr) minmax(300px, 1fr);
  grid-template-areas:
    "copy media"
    "mark media";
  column-gap: clamp(1rem, 2vw, 1.75rem);
  row-gap: clamp(.8rem, 1.8vw, 1.35rem);
  align-items: start;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  overflow: hidden;
  margin-top: 3.4rem;
}

.editorial-banner-brand {
  grid-area: mark;
  display: inline-flex;
  align-items: center;
  gap: var(--editorial-banner-brand-gap);
  justify-self: center;
  align-self: center;
  transform: translate(var(--editorial-banner-logo-offset-x), var(--editorial-banner-logo-offset-y));
  transform-origin: center;
}

.editorial-banner-flag-co {
  flex: 0 0 auto;
  width: calc(var(--editorial-banner-flag-height) * 1.42);
  height: var(--editorial-banner-flag-height);
  display: inline-block;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(7, 28, 44, .12);
  background: linear-gradient(to bottom,
      var(--color-yellow) 0 50%,
      #003893 50% 75%,
      #ce1126 75% 100%);
}

.editorial-banner-logo {
  width: var(--editorial-banner-logo-width);
  height: auto;
  object-fit: contain;
}

.editorial-banner h2 {
  margin: 0;
  font-family: var(--font-title);
  color: var(--color-primary-blue);
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  letter-spacing: -.04em;
  line-height: 1.05;
  transform: translate(var(--editorial-banner-title-offset-x), var(--editorial-banner-title-offset-y));
}

.editorial-banner p {
  margin: 0;
  color: #3c3f40;
  font-weight: 600;
  transform: translate(var(--editorial-banner-copy-offset-x), var(--editorial-banner-copy-offset-y));
}

.editorial-banner-copy {
  grid-area: copy;
  display: grid;
  gap: .75rem;
  min-width: 0;
}

.editorial-banner-media {
  grid-area: media;
  justify-self: center;
  align-self: center;
  width: var(--editorial-banner-media-width);
  max-width: 100%;
  height: var(--editorial-banner-media-height);
  min-width: 0;
  object-fit: contain;
  object-position: var(--editorial-banner-media-position);
  border-radius: 0;
  transform:
    translate(var(--editorial-banner-media-offset-x), var(--editorial-banner-media-offset-y)) scale(var(--editorial-banner-media-scale));
  transform-origin: center;
  transition: transform 420ms ease, filter 420ms ease;
  will-change: transform;
}

@container (max-width: 680px) {
  .editorial-banner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "mark"
      "media";
  }

  .editorial-banner-brand {
    justify-self: start;
    transform: translate(0, 0);
  }

  .editorial-banner-logo {
    width: auto;
    height: calc(clamp(26px, 7cqw, 36px) * 1.28);
  }

  .editorial-banner-flag-co {
    width: calc(clamp(26px, 7cqw, 36px) * 1.42);
    height: clamp(26px, 7cqw, 36px);
    border-radius: 6px;
  }

  .editorial-banner-media {
    justify-self: stretch;
    width: 100%;
    height: clamp(210px, 48cqw, 340px);
    transform: translate(0, 0) scale(1);
  }
}

.product-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .82fr);
  gap: clamp(1.35rem, 3.4vw, 3.2rem);
  align-items: start;
  padding-top: clamp(.45rem, 1.4vw, 1.1rem);
}

.product-gallery-wrap {
  min-width: 0;
}

.gallery-main {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 1.2/1;
  border: 1px solid var(--product-photo-border);
  background: var(--product-photo-backdrop);
  box-shadow: var(--product-photo-shadow), var(--shadow-soft);
  padding: .85rem;
}

.gallery-main img,
.gallery-main video,
.gallery-main iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: var(--product-photo-image-radius);
}

.gallery-main img[data-main-gallery] {
  --gallery-zoom-x: 50%;
  --gallery-zoom-y: 50%;
  transform-origin: var(--gallery-zoom-x) var(--gallery-zoom-y);
  transition: transform .22s ease;
}

.gallery-main.is-zooming img[data-main-gallery] {
  transform: scale(1.55);
}

@media (hover: hover) and (pointer: fine) {
  .gallery-main:has(img[data-main-gallery]) {
    cursor: zoom-in;
  }

  .gallery-main.is-zooming img[data-main-gallery] {
    cursor: zoom-out;
  }
}

@media (hover: none), (pointer: coarse) {
  .gallery-main img[data-main-gallery] {
    touch-action: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-main img[data-main-gallery] {
    transition: none;
  }
}

.gallery-main iframe {
  border: 0;
}

.gallery-main img[src*=".svg"] {
  border-radius: 0;
}

.gallery-thumbs {
  display: flex;
  gap: .75rem;
  margin-top: .85rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: .25rem;
  scroll-snap-type: x proximity;
}

.thumb {
  position: relative;
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: var(--product-photo-backdrop);
  box-shadow: var(--product-photo-shadow);
  padding: .25rem;
  scroll-snap-align: start;
}

.thumb.is-active {
  border-color: var(--color-primary-blue);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: calc(var(--product-photo-image-radius) - 3px);
  pointer-events: none;
}

.thumb img[src*=".svg"],
.summary-thumb img[src*=".svg"],
.compare-result-product-card img[src*=".svg"] {
  border-radius: 0;
}

.thumb-video {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .25rem;
  overflow: hidden;
  color: var(--color-primary-blue);
  background: var(--color-primary-blue-soft);
}

.thumb-video.has-poster {
  background: #071226;
  padding: 0;
}

.thumb-video.has-poster::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(7, 18, 38, .02), rgba(7, 18, 38, .62));
  content: "";
  pointer-events: none;
}

.thumb-video-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.thumb-video .icon {
  width: 26px;
  height: 26px;
  pointer-events: none;
}

.thumb-video span {
  position: relative;
  z-index: 2;
  color: var(--color-primary-blue);
  font-size: .72rem;
  font-weight: 800;
  pointer-events: none;
}

.thumb-video.has-poster span {
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(7, 18, 38, .42);
}

.thumb-video-play {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 10px 24px rgba(7, 18, 38, .22);
}

.thumb-video.has-poster .thumb-video-play .icon {
  color: var(--color-primary-blue);
}

.is-video-modal-open {
  overflow: hidden;
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(7, 18, 38, .72);
  backdrop-filter: blur(14px);
  cursor: pointer;
}

.video-modal-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(940px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2.5rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 32px 90px rgba(7, 18, 38, .35);
}

.video-modal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .95rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.video-modal-product {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: .85rem;
}

.video-modal-logo {
  flex: 0 0 auto;
  width: clamp(104px, 12vw, 142px);
  max-height: 34px;
  object-fit: contain;
  object-position: left center;
}

.video-modal-copy {
  min-width: 0;
}

.video-modal-copy > span,
.video-modal-copy > strong {
  display: block;
}

.video-modal-copy > span {
  color: var(--color-primary-blue);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.video-modal-copy > strong {
  margin-top: .1rem;
  color: var(--color-text);
  font-size: .98rem;
  line-height: 1.25;
}

.video-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .45rem;
}

.video-modal-meta span,
.video-modal-meta button {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  min-height: 26px;
  padding: .25rem .52rem;
  border: 1px solid rgba(11, 85, 244, .14);
  border-radius: 999px;
  background: var(--color-primary-blue-soft);
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: none;
  white-space: nowrap;
}

.video-modal-meta button {
  cursor: pointer;
  appearance: none;
}

.video-modal-meta button:hover,
.video-modal-meta button:focus-visible {
  border-color: rgba(11, 85, 244, .34);
  background: rgba(11, 85, 244, .12);
  outline: none;
}

.video-modal-meta .icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary-blue);
}

.video-modal-meta strong {
  color: var(--color-primary-blue);
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
}

.video-modal-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-primary-blue);
  background: var(--color-surface);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.video-modal-close:hover,
.video-modal-close:focus-visible {
  border-color: var(--color-primary-blue);
  background: var(--color-primary-blue-soft);
  outline: none;
}

.video-modal-frame {
  flex: 0 0 auto;
  width: min(100%, calc((100dvh - 9rem) * 16 / 9));
  height: min(calc((100vw - 2rem) * 9 / 16), 528px, calc(100dvh - 9rem));
  min-height: 0;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  background: #071226;
}

.video-modal-card.is-vertical-video {
  width: min(430px, calc(100vw - 2rem));
}

.video-modal-card.is-vertical-video .video-modal-frame {
  width: min(100%, calc((100dvh - 13rem) * 9 / 16));
  height: min(calc((100vw - 2rem) * 16 / 9), calc(100dvh - 13rem));
  aspect-ratio: 9 / 16;
}

.video-modal-media {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.product-summary .meta {
  color: var(--color-primary-blue);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.product-category-pill {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  padding: .42rem .68rem .42rem .58rem;
  border: 1px solid rgba(11, 85, 244, .18);
  border-radius: 999px;
  background: radial-gradient(circle at 14% 20%, rgb(252 209 22), transparent 160%), rgba(255, 255, 255, .9);
  box-shadow: 0 10px 22px rgba(11, 85, 244, .06);
}

.product-category-pill .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.35;
  flex: 0 0 auto;
}

.product-engagement {
  flex-wrap: wrap;
  gap: .4rem .55rem;
}

.product-engagement .icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: .22rem;
  vertical-align: -.13rem;
}

.rating-separator {
  color: rgba(102, 112, 133, .54);
}

.product-summary-card {
  position: relative;
  padding: clamp(1.05rem, 2vw, 1.45rem);
  border: 1px solid rgba(11, 85, 244, .1);
  border-radius: 24px;
  /* background: radial-gradient(circle at 92% 8%, rgb(22 91 252 / 16%), transparent 9rem), rgba(255, 255, 255, .92); */
  box-shadow: 0 20px 52px rgba(7, 28, 44, .08);
  backdrop-filter: blur(14px);
}

.product-summary h1 {
  margin: .35rem 0 .65rem;
  font-family: var(--font-title);
  color: var(--color-navy);
  font-size: clamp(2rem, 4.2vw, 2.8rem);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.product-summary .price {
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  margin: 1rem 0 .2rem;
}

.product-summary .price-currency {
  display: inline-block;
  margin-left: .28rem;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: .42em;
  font-weight: 900;
  letter-spacing: .02em;
  vertical-align: .18em;
}

.product-detail-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45rem .65rem;
  margin: 1rem 0 .2rem;
}

.product-detail-price-row .price {
  margin: 0;
}

.product-detail-price-row .compare-price {
  font-size: 1rem;
}

.product-detail-price-row .discount-chip {
  min-height: 1.5rem;
  padding-inline: .5rem;
}

.product-external-id {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  max-width: 100%;
  min-height: 38px;
  margin: .55rem 0 .35rem;
  padding: .48rem .72rem;
  border: 1px solid rgba(11, 85, 244, .24);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(11, 85, 244, .1), rgba(255, 255, 255, .94));
  color: var(--color-navy);
  box-shadow: 0 10px 24px rgba(11, 85, 244, .08);
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.1;
}

.product-external-id span {
  text-transform: uppercase;
}

.product-external-id strong {
  color: var(--color-primary-blue);
  overflow-wrap: anywhere;
}

.product-external-id button {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary-blue);
  font: inherit;
  cursor: pointer;
}

.product-summary .tax {
  color: var(--color-text-soft);
  font-size: .84rem;
}

.product-points-preview {
  display: grid;
  gap: .72rem;
  margin: .85rem 0 1.05rem;
  padding: .88rem;
  border: 1px solid rgba(11, 85, 244, .14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 7% 0%, rgba(252, 209, 22, .34), transparent 7rem),
    linear-gradient(135deg, rgba(247, 250, 255, .96) 0%, rgba(255, 255, 255, .96) 100%);
  box-shadow: 0 16px 34px rgba(11, 85, 244, .08);
}

.product-points-head {
  display: flex;
  align-items: center;
  gap: .66rem;
}

.product-points-head .icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: .48rem;
  border-radius: 14px;
  color: var(--color-primary-blue);
  background: rgba(252, 209, 22, .32);
  box-shadow: 0 10px 22px rgba(252, 209, 22, .18);
}

.product-points-head strong,
.product-points-head span {
  display: block;
}

.product-points-head strong {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  color: var(--color-navy);
  font-size: .98rem;
  line-height: 1.1;
}

.product-points-brand {
  width: 18px;
  height: 18px;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) saturate(100%);
}

.product-points-head span {
  color: var(--color-text-muted);
  font-size: .78rem;
  font-weight: 760;
  line-height: 1.25;
}

.product-points-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .48rem;
}

.product-points-stats span {
  display: grid;
  min-width: 0;
  gap: .2rem;
  padding: .6rem;
  border: 1px solid rgba(11, 85, 244, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .84);
}

.product-points-stats span.is-earned {
  border-color: rgba(15, 185, 89, .18);
  background: linear-gradient(145deg, rgba(240, 253, 246, .94), rgba(255, 255, 255, .9));
}

.product-points-stats small {
  color: var(--color-text-muted);
  font-size: .69rem;
  font-weight: 850;
  line-height: 1.2;
}

.product-points-stats strong {
  color: var(--color-primary-blue);
  font-family: var(--font-title);
  font-size: clamp(.96rem, 1.8vw, 1.18rem);
  line-height: 1.08;
  text-shadow: 0 8px 16px rgba(11, 85, 244, .12);
}

.product-points-stats .is-earned strong {
  color: var(--color-whatsapp);
}

.product-points-preview p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.35;
}

.option-row {
  margin: 1.1rem 0;
}

.option-row label {
  display: block;
  color: var(--color-text-muted);
  font-weight: 700;
  margin-bottom: .45rem;
}

.swatches {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.swatch {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 2px solid #fff;
  outline: 1px solid var(--color-border);
}

.swatch.is-selected {
  outline: 2px solid var(--color-primary-blue);
}

.option-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.option-pill {
  min-height: 38px;
  padding: .45rem .78rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-navy);
  font-size: .9rem;
  font-weight: 800;
}

.option-pill.is-selected {
  border-color: rgba(11, 85, 244, .38);
  background: var(--color-primary-blue-soft);
  color: var(--color-primary-blue);
}

.qty-stock {
  display: grid;
  grid-template-columns: minmax(188px, auto) minmax(0, 1fr);
  align-items: stretch;
  gap: 1rem;
  margin: 1.25rem 0 1.1rem;
}

.qty-stock > div {
  min-width: 0;
}

.qty-stock > div:first-child {
  display: grid;
  align-content: start;
  gap: .48rem;
}

.qty-stock label {
  display: block;
  color: var(--color-text-muted);
  font-size: .88rem;
  font-weight: 850;
}

.qty {
  display: inline-grid;
  grid-template-columns: 48px 68px 48px;
  width: fit-content;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  min-height: 52px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(7, 28, 44, .045);
}

.qty button {
  border: 0;
  background: #fff;
  color: var(--color-navy);
  font-weight: 900;
}

.qty span {
  display: grid;
  place-items: center;
  border-inline: 1px solid var(--color-border);
  font-weight: 800;
}

.stock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .72rem;
  min-height: 64px;
  padding: .8rem .95rem;
  border: 1px solid rgba(11, 85, 244, .12);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(11, 85, 244, .06), rgba(255, 255, 255, .92));
  color: var(--color-text-muted);
  font-size: .9rem;
}

.stock-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--color-primary-blue);
  box-shadow: inset 0 0 0 1px rgba(11, 85, 244, .08);
}

.stock-icon .icon {
  width: 20px;
  height: 20px;
}

.stock > div {
  display: grid;
  gap: .16rem;
  min-width: 0;
}

.stock strong {
  color: var(--color-whatsapp);
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  line-height: 1.15;
}

.stock-live-dot {
  position: relative;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--color-whatsapp);
  animation: live-pulse 1.8s ease-in-out infinite;
  flex: 0 0 auto;
}

.stock-flag-co {
  width: 1.05rem;
  height: .72rem;
  margin-left: .25rem;
  vertical-align: -.08rem;
}

.product-actions {
  display: grid;
  gap: .75rem;
  margin-top: 1rem;
}

.product-payment-actions,
.product-actions .button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.product-secondary-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-secondary-actions .btn {
  min-width: 0;
}

.share-btn,
.like-btn {
  gap: .45rem;
}

.share-btn .icon,
.like-btn .icon {
  margin: 0;
}

.like-btn.is-active {
  border-color: rgba(11, 85, 244, .35);
  background: rgba(11, 85, 244, .08);
  color: var(--color-primary-blue);
}

.product-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .68fr);
  gap: clamp(1rem, 2.6vw, 2rem);
  margin-top: 1rem;
  align-items: start;
}

.product-content-grid > aside {
  display: grid;
  align-content: start;
  gap: .95rem;
  min-width: 0;
}

.product-content-grid > aside .section-title {
  margin: 0;
}

.product-content-grid > aside .faq-list {
  gap: .7rem;
}

.product-content-grid > aside .faq-item {
  border-radius: 18px;
}

.product-content-grid > aside .faq-question {
  min-height: 54px;
  padding: .85rem 1rem;
}

.product-detail-content-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, #fff 0%, #f7faff 48%, #fff 100%);
}

.product-detail-content-section::before,
.product-detail-content-section::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  pointer-events: none;
}

.product-detail-content-section::before {
  inset-block: 0;
  z-index: -2;
  opacity: .54;
  background:
    radial-gradient(circle at 8% 18%, transparent 0 11.5rem, rgba(252, 209, 22, .13) 11.58rem 11.7rem, transparent 11.86rem),
    radial-gradient(circle at 93% 24%, transparent 0 14.5rem, rgba(11, 85, 244, .078) 14.58rem 14.72rem, transparent 14.9rem),
    radial-gradient(circle at 78% 82%, transparent 0 12rem, rgba(252, 209, 22, .10) 12.08rem 12.2rem, transparent 12.36rem),
    radial-gradient(circle at 20% 92%, transparent 0 18rem, rgba(11, 85, 244, .055) 18.08rem 18.24rem, transparent 18.42rem);
}

.product-detail-content-section::after {
  inset-block: 0;
  z-index: -1;
  opacity: .36;
  background:
    linear-gradient(118deg, transparent 0 26%, rgba(11, 85, 244, .045) 26.08% 26.18%, transparent 26.3% 100%),
    linear-gradient(146deg, transparent 0 58%, rgba(252, 209, 22, .08) 58.08% 58.18%, transparent 58.32% 100%),
    linear-gradient(72deg, transparent 0 74%, rgba(11, 85, 244, .035) 74.08% 74.2%, transparent 74.34% 100%);
}

.product-detail-content-section > .container {
  position: relative;
  z-index: 1;
}

.product-info-panel {
  display: grid;
  gap: 1rem;
}

.product-info-head {
  position: relative;
  display: grid;
  gap: .4rem;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.35rem);
  padding-right: clamp(5.5rem, 12vw, 8rem);
  border: 1px solid rgba(11, 85, 244, .1);
  border-radius: 22px;
  background: radial-gradient(circle at 90% 0%, rgb(22 129 252 / 24%), transparent 12rem), 
  linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(239, 246, 255, .9));
  box-shadow: 0 16px 34px rgba(7, 28, 44, .055);
}

.product-info-head-isotipo {
  position: absolute;
  top: 50%;
  right: clamp(1rem, 2.5vw, 1.45rem);
  width: clamp(58px, 7vw, 88px);
  height: auto;
  transform: translateY(-50%);
  opacity: .18;
  filter: saturate(1.08);
  pointer-events: none;
}

.product-info-head .page-eyebrow {
  justify-self: start;
  margin: 0;
}

.product-info-head h2 {
  margin: 0;
  color: var(--color-navy);
  font-family: var(--font-title);
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  line-height: .98;
  letter-spacing: -.035em;
}

.product-info-head p {
  max-width: 56ch;
  margin: 0;
  color: var(--color-text-muted);
}

.product-info-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.product-info-card {
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.25rem);
  border: 1px solid rgba(14, 82, 141, .1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(7, 28, 44, .055);
}

.product-description-card {
  grid-column: 1 / -1;
}

.product-info-card-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .85rem;
}

.product-info-card-head span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: #ffcc4d;
  color: #07318D;
  font-size: .76rem;
  font-weight: 950;
}

.product-info-card-head h3 {
  margin: 0;
  color: var(--color-navy);
  font-family: var(--font-title);
  font-size: 1.35rem;
  line-height: 1;
}

.product-rich-text {
  display: grid;
  gap: .75rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

.product-rich-text p,
.product-rich-text ul,
.product-rich-text ol {
  margin: 0;
}

.product-rich-text ul,
.product-rich-text ol {
  display: grid;
  gap: .45rem;
  padding-left: 1.15rem;
}

.product-rich-text strong,
.product-rich-text b {
  color: var(--color-navy);
  font-weight: 900;
}

.product-feature-grid {
  display: grid;
  gap: .6rem;
}

.product-feature-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .72rem;
  border-radius: 16px;
  background: rgba(11, 85, 244, .045);
  color: var(--color-navy);
}

.product-feature-item .check {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: 0D592D;
  color: #fff;
  font-size: .78rem;
  font-weight: 950;
}

.product-feature-item strong {
  font-size: .94rem;
  line-height: 1.32;
}

.product-spec-grid {
  display: grid;
  gap: .55rem;
  margin: 0;
}

.product-spec-grid div {
  display: grid;
  grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr);
  gap: .75rem;
  padding: .72rem 0;
  border-bottom: 1px solid rgba(14, 82, 141, .1);
}

.product-spec-grid div:last-child {
  border-bottom: 0;
}

.product-spec-grid dt,
.product-spec-grid dd {
  margin: 0;
}

.product-spec-grid dt {
  color: var(--color-text-soft);
  font-size: .8rem;
  font-weight: 850;
}

.product-spec-grid dd {
  color: var(--color-navy);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.product-include-list {
  display: grid;
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-include-list li {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--color-navy);
  font-weight: 800;
}

.product-include-list .icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--color-primary-blue);
}

.tabs {
  display: flex;
  gap: 2rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.1rem;
}

.tab {
  padding: .8rem 0;
  border: 0;
  background: transparent;
  font-weight: 800;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
}

.tab.is-active {
  color: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
}

.bullet-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: .45rem;
  color: var(--color-text-muted);
}

.bullet-list li {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.bullet-list .check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .75rem;
  font-weight: 900;
}

/* ============================================
   FAQ
   ============================================ */
.faq-list {
  display: grid;
  gap: .6rem;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  border: 0;
  background: #fff;
  padding: .9rem 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  font-weight: 800;
  color: var(--color-navy);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 240ms ease, padding 240ms ease;
  padding: 0 1rem;
  color: var(--color-text-muted);
}

.faq-item.is-open .faq-answer {
  max-height: 200px;
  padding: 0 1rem 1rem;
}

.reviews-panel {
  padding: 1.4rem;
  margin-top: 2rem;
}

.reviews-summary {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.4rem;
  align-items: start;
}

.reviews-summary .section-title {
  font-size: 1.45rem;
}

.review-source-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .75rem;
}

.review-source-list span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .3rem .58rem;
  border-radius: 999px;
  background: var(--color-primary-blue-soft);
  color: var(--color-primary-blue);
  font-size: .75rem;
  font-weight: 850;
}

.review-moderation-card {
  align-self: stretch;
  min-height: 100%;
  padding: 1rem;
  border: 1px solid rgba(11, 85, 244, .11);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(244, 248, 255, .82));
  color: var(--color-text-muted);
}

.review-moderation-card strong {
  display: block;
  margin-bottom: .32rem;
  color: var(--color-navy);
}

.review-moderation-note {
  margin: 1.1rem 0 0;
  padding: .9rem 1rem;
  border-radius: 18px;
  background: rgba(11, 85, 244, .06);
  color: var(--color-text-muted);
  font-weight: 700;
}

.product-review-grid {
  margin-top: 1.3rem;
}

.rating-big {
  font-family: var(--font-title);
  font-size: 3.2rem;
  color: var(--color-primary-blue);
  line-height: .9;
}

.bar-row {
  display: grid;
  grid-template-columns: 40px 1fr 42px;
  gap: .7rem;
  align-items: center;
  font-size: .85rem;
  color: var(--color-text-soft);
}

.bar {
  height: 7px;
  border-radius: 99px;
  background: var(--color-smoke);
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  background: var(--color-rating);
  border-radius: 99px;
}

/* ============================================
   SUPPORT HERO
   ============================================ */
.support-hero {
  background: linear-gradient(180deg, #fff 0%, #fff 45%, #88da8f 100%);
}

.support-hero .hero-inner {
  min-height: 420px;
}

.support-hero .hero-copy h1 {
  color: var(--color-primary-blue);
}

.support-hero .hero-copy p {
  max-width: 34ch;
  margin: .9rem 0 0;
  color: rgba(16, 24, 40, .82);
  font-size: clamp(1.08rem, 1.55vw, 1.34rem);
  font-weight: 560;
  line-height: 1.42;
  letter-spacing: -.018em;
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .64),
    0 8px 22px rgba(7, 28, 44, .06);
}

.support-hero .hero-visual {
  --hero-right-bleed: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
  justify-self: stretch;
  align-self: stretch;
  overflow: hidden;
  width: calc(100% + var(--hero-right-bleed));
  margin-right: calc(var(--hero-right-bleed) * -1);
  display: block;
  border-radius: 0;
  box-shadow: none;
}

.support-hero .hero-visual img {
  width: 100%;
  height: 100%;
  min-height: var(--support-hero-image-max-height);
  max-height: none;
  display: block;
  object-fit: cover;
  object-position: right center;

  transform: translate(var(--support-hero-image-offset-x), var(--support-hero-image-offset-y));
}

.support-hero .hero-copy p span {
  color: var(--color-primary-blue);
  font-weight: 720;
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.support-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.35rem;
}

.support-card .icon {
  width: 42px;
  height: 42px;
}

.support-card h3 {
  margin: 0 0 .25rem;
  color: var(--color-navy);
}

.support-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .92rem;
}

.support-card .arrow {
  margin-left: auto;
  color: var(--color-navy);
  font-size: 1.5rem;
}

.tracking-card {
  display: grid;
  grid-template-columns: auto 1fr minmax(260px, .7fr);
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.tracking-illustration {
  width: 120px;
  height: 90px;
  display: grid;
  place-items: center;
  background: var(--color-primary-blue-soft);
  border-radius: var(--radius-md);
  color: var(--color-primary-blue);
}

.tracking-illustration .icon {
  width: 68px;
  height: 68px;
}

.inline-form {
  display: flex;
  gap: .7rem;
}

.inline-form .input {
  flex: 1;
}

.support-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.human-card {
  padding: clamp(1.4rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;
}

.human-card .big-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-primary-blue-soft);
  color: var(--color-primary-blue);
}

.human-card .big-icon .icon {
  width: 48px;
  height: 48px;
}

.micro-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  border-top: 1px solid var(--color-border);
  margin-top: 1.4rem;
  padding-top: 1rem;
}

.micro-stats small {
  color: var(--color-text-soft);
  display: block;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.contact-card {
  padding: 1.4rem;
  display: grid;
  gap: .8rem;
}

.contact-card .icon {
  width: 44px;
  height: 44px;
  color: var(--color-primary-blue);
}

.contact-card.whatsapp .icon {
  color: var(--color-whatsapp);
}

/* ============================================
   CHECKOUT
   ============================================ */
.checkout-page {
  background:
    radial-gradient(circle at 8% 4%, rgba(11, 85, 244, .08), transparent 22rem),
    linear-gradient(180deg, #f8fbff 0%, #fff 38%, var(--color-bg-warm) 100%);
  min-height: 100vh;
}

.checkout-progress-band {
  border-bottom: 1px solid rgba(11, 85, 244, .1);
  background:
    radial-gradient(circle at 92% 0%, rgba(252, 209, 22, .18), transparent 18rem),
    rgba(255, 255, 255, .84);
  backdrop-filter: blur(16px);
}

.checkout-head {
  position: relative;
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
}

.checkout-head > div:first-child {
  order: 1;
}

.checkout-head .steps {
  order: 2;
  margin-left: auto;
}

.checkout-head h1 {
  margin: .35rem 0 0;
  color: var(--color-navy);
  font-family: var(--font-title);
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  line-height: .98;
}

.checkout-head-visual {
  order: 3;
  display: grid;
  width: clamp(86px, 9vw, 130px);
  height: clamp(86px, 9vw, 130px);
  place-items: center;
  margin: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .72), rgba(255, 255, 255, .18) 58%, transparent 72%);
}

.checkout-head-visual img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(11, 85, 244, .14));
}

.steps {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.checkout-status-list {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-left: auto;
}

.checkout-status-list span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 34px;
  padding: .45rem .68rem;
  border: 1px solid rgba(11, 85, 244, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  color: var(--color-navy);
  font-size: .82rem;
  font-weight: 850;
  white-space: nowrap;
}

.checkout-status-list .icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary-blue);
}

.step {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--color-text-soft);
  white-space: nowrap;
  font-weight: 800;
}

.step-number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #a6afba;
  color: #fff;
}

.step.is-active {
  color: var(--color-navy);
}

.step.is-active .step-number {
  background: #0b55f4;
}

.step-line {
  width: 84px;
  height: 1px;
  background: var(--color-border);
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 4vw, 3.2rem) 0;
  align-items: start;
}

.checkout-form {
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgba(11, 85, 244, .1);
  border-radius: 24px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 20px 50px rgba(7, 28, 44, .06);
}

.checkout-form-alert {
  padding: .8rem 1rem;
  border: 1px solid rgba(220, 38, 38, .18);
  border-radius: 16px;
  background: rgba(254, 242, 242, .94);
  color: #991b1b;
  font-size: .92rem;
  font-weight: 750;
}

.checkout-form-alert[hidden] {
  display: none;
}

.form-section {
  display: grid;
  gap: .85rem;
  padding: clamp(.85rem, 1.6vw, 1.1rem);
  border: 1px solid rgba(14, 82, 141, .08);
  border-radius: 18px;
  background: #fff;
}

.form-section-head {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.form-section-head > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--color-primary-blue);
  color: #fff;
  font-size: .74rem;
  font-weight: 950;
}

.form-section h2 {
  margin: 0;
  font-family: var(--font-title);
  color: var(--color-navy);
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: 0;
}

.form-section p {
  margin: .2rem 0 0;
  color: var(--color-text-muted);
  font-weight: 600;
}

.order-result-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.order-result-isotipo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(11, 85, 244, .18));
}

.form-grid {
  display: grid;
  gap: .8rem;
}

.form-grid.two {
  grid-template-columns: 1fr 1fr;
}

.form-grid.three {
  grid-template-columns: 1fr 1fr 1fr;
}

.shipping-option,
.payment-option {
  border: 1px solid rgba(11, 85, 244, .13);
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  justify-content: space-between;
  background: #fff;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.payment-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-brand-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  object-fit: contain;
  padding: .25rem;
  border-radius: 14px;
  background: rgba(244, 248, 255, .9);
}

.payment-brand-icon-delivery {
  width: 58px;
  height: 58px;
  background: rgba(15, 185, 89, .08);
}

.shipping-option.is-selected,
.payment-option.is-selected {
  border-color: var(--color-primary-blue);
  box-shadow: 0 0 0 3px rgba(11, 85, 244, .08);
}

.shipping-option > .icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--color-whatsapp);
}

.checkout-points-preview {
  display: grid;
  gap: .75rem;
  padding: .95rem;
  border: 1px solid rgba(11, 85, 244, .14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 10% 0%, rgba(252, 209, 22, .24), transparent 8rem),
    linear-gradient(135deg, #f7faff 0%, #ffffff 100%);
  box-shadow: 0 16px 34px rgba(11, 85, 244, .08);
}

.checkout-points-head {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.checkout-points-head .icon {
  width: 36px;
  height: 36px;
  padding: .48rem;
  border-radius: 14px;
  color: var(--color-primary-blue);
  background: rgba(252, 209, 22, .28);
  box-shadow: 0 10px 22px rgba(252, 209, 22, .18);
}

.checkout-points-head strong,
.checkout-points-head span {
  display: block;
}

.checkout-points-head strong {
  color: var(--color-navy);
  font-size: 1rem;
}

.checkout-points-head span {
  color: var(--color-text-muted);
  font-size: .82rem;
  font-weight: 700;
}

.checkout-points-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}

.checkout-points-grid span {
  display: grid;
  gap: .18rem;
  min-width: 0;
  padding: .65rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(11, 85, 244, .08);
}

.checkout-points-grid small {
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
}

.checkout-points-grid strong {
  color: var(--color-primary-blue);
  font-family: var(--font-title);
  font-size: 1.28rem;
  line-height: 1;
  text-shadow: 0 8px 16px rgba(11, 85, 244, .12);
}

.checkout-points-redeem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem;
  border-radius: 16px;
  background: rgba(11, 85, 244, .07);
}

.checkout-points-redeem span {
  color: var(--color-navy);
  font-size: .82rem;
  font-weight: 760;
  line-height: 1.28;
}

.checkout-points-redeem strong {
  color: var(--color-primary-blue);
}

.checkout-points-choice {
  flex-wrap: wrap;
}

.checkout-points-choice > span {
  flex: 1 1 220px;
}

.checkout-points-input {
  display: grid;
  gap: .28rem;
  flex: 0 0 180px;
}

.checkout-points-input small {
  color: var(--color-text-muted);
  font-size: .7rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.checkout-points-input .input {
  min-height: 38px;
  padding: .45rem .62rem;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 850;
}

.checkout-points-redeem .btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: .48rem .68rem;
  font-size: .78rem;
}

.checkout-points-redeem.is-muted {
  justify-content: flex-start;
  background: rgba(7, 28, 44, .04);
}

.radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.is-selected .radio-dot::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-primary-blue);
}

.option-info {
  flex: 1;
}

.option-info strong {
  color: var(--color-navy);
}

.option-info small {
  display: block;
  color: var(--color-text-soft);
}

.summary-card {
  padding: 1.4rem;
  position: sticky;
  top: calc(var(--header-height) + 1rem);
}

.discount-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .7rem;
}

.coupon-message {
  margin: .65rem 0 0;
  color: var(--color-whatsapp);
  font-size: .9rem;
  font-weight: 750;
}

.summary-items {
  display: grid;
  gap: 1rem;
  margin: 1.4rem 0;
}

.summary-item {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  padding: .9rem;
  border: 1px solid rgba(11, 85, 244, .12);
  border-radius: 18px;
  background:
    radial-gradient(circle at 4% 0%, rgba(252, 209, 22, .15), transparent 6.5rem),
    linear-gradient(145deg, #ffffff 0%, #f7faff 100%);
  box-shadow: 0 14px 32px rgba(11, 85, 244, .08);
}

.summary-thumb {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 14px;
  background: var(--product-photo-backdrop);
  border: 1px solid rgba(11, 85, 244, .12);
  box-shadow: var(--product-photo-shadow);
  padding: .28rem;
}

.summary-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: calc(var(--product-photo-image-radius) - 2px);
}

.qty-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--color-primary-blue), #003aa9);
  color: #fff;
  font-weight: 900;
  font-size: .82rem;
  border: 2px solid #fff;
  box-shadow: 0 8px 18px rgba(11, 85, 244, .25);
}

.summary-product-copy,
.summary-product-actions {
  min-width: 0;
}

.summary-product-copy {
  display: grid;
  gap: .25rem;
}

.summary-product-copy strong {
  color: var(--color-navy);
  font-size: .98rem;
  line-height: 1.22;
  letter-spacing: 0;
  text-shadow: 0 8px 18px rgba(11, 85, 244, .08);
}

.summary-product-copy span,
.summary-product-copy small {
  color: var(--color-primary-blue);
  font-size: .82rem;
  font-weight: 750;
}

.summary-product-copy small {
  color: var(--color-text-muted);
}

.summary-product-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: .55rem;
  padding-top: .25rem;
  width: 100%;
}

.summary-units-label {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .25rem .68rem;
  border-radius: 999px;
  background: rgba(252, 209, 22, .18);
  color: #043fba;
  font-size: .76rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(252, 209, 22, .16);
}

.summary-price {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .25rem .72rem;
  border-radius: 999px;
  background: rgba(11, 85, 244, .08);
  color: var(--color-primary-blue);
  font-size: .95rem;
  white-space: nowrap;
  text-shadow: 0 8px 18px rgba(11, 85, 244, .1);
}

.cart-line-controls {
  display: inline-grid;
  grid-template-columns: 30px 38px 30px auto;
  align-items: center;
  gap: .32rem;
  padding: .18rem;
  border: 1px solid rgba(11, 85, 244, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 10px 24px rgba(7, 28, 44, .06);
}

.cart-line-controls button,
.cart-line-qty {
  min-width: 30px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-navy);
  font-weight: 850;
  text-align: center;
}

.summary-product-actions .cart-line-controls button,
.summary-product-actions .cart-line-qty {
  background: #fff;
}

.cart-line-controls button:hover {
  border-color: rgba(11, 85, 244, .36);
  background: var(--color-primary-blue-soft);
  color: var(--color-primary-blue);
}

.cart-line-qty {
  width: 38px;
  padding: 0;
}

.cart-line-remove {
  padding: 0 .68rem;
  color: var(--color-primary-blue);
  background: rgba(11, 85, 244, .08);
  border-color: rgba(11, 85, 244, .16);
  font-size: .82rem;
}

.summary-lines {
  display: grid;
  gap: .65rem;
  padding: .95rem;
  border: 1px solid rgba(11, 85, 244, .1);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(247, 250, 255, .92), #fff);
  box-shadow: 0 14px 30px rgba(7, 28, 44, .05);
}

.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-navy);
  font-weight: 750;
}

.summary-line strong {
  color: var(--color-primary-blue);
  text-shadow: 0 8px 18px rgba(11, 85, 244, .12);
}

.total-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .85rem;
  margin: 1rem 0 1.2rem;
  padding: .95rem;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 10%, rgba(252, 209, 22, .28), transparent 7rem),
    linear-gradient(135deg, #061b31 0%, #0b55f4 100%);
  box-shadow: 0 18px 38px rgba(11, 85, 244, .2);
}

.total-line-label {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}

.total-line-label img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .22));
}

.total-line-label span {
  display: block;
}

.total-line small {
  color: rgba(255, 255, 255, .78);
}

.total-line strong {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  font-family: var(--font-title);
  font-size: clamp(1.55rem, 4vw, 2rem);
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 12px 26px rgba(0, 0, 0, .22);
}

.total-line strong span {
  font-size: .72em;
  font-weight: 900;
  letter-spacing: .02em;
  opacity: .88;
}

.secure-box {
  display: grid;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.1rem;
}

.secure-item {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}

.secure-item .icon {
  width: 26px;
  height: 26px;
  color: var(--color-navy);
}

.secure-item h3 {
  margin: 0;
  font-size: .98rem;
  color: var(--color-navy);
}

.secure-item p {
  margin: .1rem 0 0;
  color: var(--color-text-muted);
  font-size: .88rem;
}

.checkout-page .summary-card {
  position: sticky;
  top: calc(var(--header-h, 72px) + 1rem);
  padding: clamp(1rem, 2vw, 1.25rem);
  border: 1px solid rgba(11, 85, 244, .12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(252, 209, 22, .16), transparent 10rem),
    #fff;
  box-shadow: 0 22px 56px rgba(7, 28, 44, .08);
}

.checkout-page .discount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .6rem;
  align-items: center;
  margin-bottom: 1rem;
}

.checkout-page .discount-row .btn {
  min-height: 48px;
  padding-inline: 1rem;
}

.summary-visual-note {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  padding: .75rem;
  border: 1px solid rgba(11, 85, 244, .1);
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(15, 185, 89, .13), transparent 7rem),
    linear-gradient(135deg, #fff, #f7faff);
}

.summary-visual-note img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(15, 185, 89, .18));
}

.summary-visual-note strong,
.summary-visual-note span {
  display: block;
}

.summary-visual-note strong {
  color: var(--color-navy);
}

.summary-visual-note span {
  color: var(--color-text-muted);
  font-size: .82rem;
  font-weight: 650;
}

.checkout-page .summary-items {
  display: grid;
  gap: .85rem;
  padding-block: .4rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.checkout-page .summary-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .35rem;
}

.checkout-page .summary-lines {
  padding-block: .85rem;
  border-bottom: 1px solid var(--color-border);
}

.checkout-note {
  color: var(--color-text-soft);
  font-size: .88rem;
}

.checkout-trust-section {
  padding-top: 0;
}

.checkout-empty-card,
.checkout-member-card {
  align-self: start;
}

/* ============================================
   LOYALTY / REWARDS
   ============================================ */
.loyalty-hero {
  padding: 0;
}

.loyalty-strip {
  position: relative;
  width: 100vw;
  min-height: 586px;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: linear-gradient(105deg, #082B36 0%, #0040C1 100%);
  box-shadow: 0 20px 40px rgba(7, 28, 44, 0.08);
}

.loyalty-orbit {
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
}

.loyalty-orbit-one {
  width: clamp(240px, 34vw, 520px);
  height: clamp(240px, 34vw, 520px);
  top: -9rem;
  right: -6rem;
  background: radial-gradient(circle, rgba(255, 204, 77, .18), transparent 64%);
}

.loyalty-orbit-two {
  width: clamp(220px, 30vw, 420px);
  height: clamp(220px, 30vw, 420px);
  left: -8rem;
  bottom: -10rem;
  background: radial-gradient(circle, rgba(49, 166, 220, .2), transparent 62%);
}

.loyalty-strip-inner {
  position: relative;
  z-index: 1;
}

.loyalty-panel {
  position: relative;
  overflow: visible;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(420px, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 3.8vw, 4.5rem);
  min-height: 560px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: white;
  box-shadow: none;
}

.loyalty-corner-mark {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.loyalty-corner-mark-top {
  top: .95rem;
  right: clamp(.85rem, 1.8vw, 1.6rem);
  width: clamp(42px, 4.2vw, 58px);
  opacity: .28;
}

.loyalty-corner-mark-bottom {
  display: none;
}

/* .material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;

  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
} */

.loyalty-symbol-fill {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.loyalty-copy {
  display: grid;
  align-content: center;
  gap: .15rem;
  max-width: 680px;
  min-height: 520px;
  padding: clamp(3rem, 5.4vw, 4.8rem) 0;
  position: relative;
  z-index: 1;
}

.loyalty-copy .button-row {
  gap: 1.1rem;
  margin-top: 1.55rem;
  margin-bottom: 1.45rem;
}

.loyalty-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  align-items: center;
  margin-top: 1.35rem;
}

.loyalty-hero-actions .btn {
  min-height: 46px;
}

.loyalty-copy .button-row .btn {
  min-width: 156px;
  box-shadow: 0 12px 28px rgba(3, 18, 36, .16);
}

.loyalty-kicker-row {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: .75rem;
  max-width: 100%;
  margin-bottom: 1rem;
}

.loyalty-copy-mark {
  position: absolute;
  right: clamp(1rem, 2.4vw, 1.9rem);
  bottom: clamp(1rem, 2.2vw, .2rem);
  width: clamp(164px, 15vw, 220px);
  opacity: .18;
  filter: brightness(0) invert(1);
  pointer-events: none;
  user-select: none;
}

.loyalty-kicker {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  justify-self: start;
  min-height: 32px;
  margin-bottom: 0;
  padding: .42rem .82rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .88);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.loyalty-kicker-isotipo {
  width: 17px;
  height: 17px;
  object-fit: contain;
  flex: 0 0 auto;
}

.loyalty-panel h1 {
  font-family: var(--font-title);
  font-size: clamp(2.75rem, 5.8vw, 5.4rem);
  line-height: 1.04;
  margin: 0 0 1rem;
  letter-spacing: -.04em;
  font-weight: 700;
  text-shadow: 0 12px 34px rgba(2, 18, 32, .22);
}

.loyalty-lead {
  margin: 0 0 1.25rem;
  max-width: 31rem;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(1.02rem, 1.55vw, 1.2rem);
  line-height: 1.6;
  letter-spacing: -.01em;
}

.loyalty-steps-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  max-width: 510px;
  margin-top: 1.35rem;
}

.loyalty-steps-row span,
.loyalty-mini-grid span {
  display: grid;
  place-items: center;
  align-content: center;
  gap: .45rem;
  min-width: 0;
  min-height: 88px;
  aspect-ratio: 1 / .82;
  padding: .82rem .7rem;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .08));
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 16px 30px rgba(2, 18, 32, .12);
  color: rgba(255, 255, 255, .9);
  font-size: .78rem;
  font-weight: 850;
  line-height: 1.18;
  text-align: center;
  backdrop-filter: blur(14px);
}

.loyalty-steps-row b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: #ffcc4d;
  color: #071c2c;
  font-size: .78rem;
  box-shadow: 0 8px 18px rgba(255, 204, 77, .22);
}

.loyalty-stage {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 550px;
  padding: 1rem 0 1.15rem;
  isolation: isolate;
}

.loyalty-stage > img {
  position: absolute;
  right: clamp(-2.25rem, -2.5vw, -.4rem);
  bottom: -6.75rem;
  z-index: 1;
  width: clamp(520px, 50vw, 768px);
  max-height: 650px;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 26px 40px rgba(2, 18, 32, .18));
}

.loyalty-points-card {
  position: absolute;
  top: clamp(1.2rem, 5vw, 3.5rem);
  left: clamp(-8rem, -8vw, -2rem);
  z-index: 2;
  width: min(360px, 62%);
  margin: 0;
  min-height: 180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(108px, 12vw, 136px);
  gap: clamp(.8rem, 1.8vw, 1.2rem);
  align-items: center;
  padding: clamp(1.25rem, 2.4vw, 1.7rem);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 16%, rgba(252, 209, 22, .16), transparent 8rem),
    linear-gradient(145deg, #1a1a1a 0%, #101112 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow:
    0 26px 58px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

.loyalty-points-isotipo {
  position: absolute;
  right: 1rem;
  bottom: .65rem;
  width: 28px;
  height: 28px;
  object-fit: contain;
  opacity: .9;
}

.loyalty-points-copy {
  align-self: center;
  align-content: center;
  display: grid;
  gap: .4rem;
  height: 100%;
  justify-items: start;
  min-width: 0;
  padding: 0;
}

.loyalty-points-label {
  color: #ffffff;
  font-size: clamp(1.3rem, 2.8vw, 1.95rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.08;
  text-transform: none;
}

.loyalty-points-ring {
  justify-self: end;
  width: clamp(108px, 12vw, 136px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  border: clamp(7px, .72vw, 9px) solid var(--color-yellow);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(252, 209, 22, .2),
    0 0 24px rgba(252, 209, 22, .24);
}

.loyalty-points-ring strong {
  display: block;
  color: #ffffff;
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 4.6vw, 3rem);
  line-height: .82;
  letter-spacing: 0;
}

.loyalty-points-ring span {
  margin-top: .18rem;
  color: rgba(255, 255, 255, .7);
  font-size: clamp(.78rem, 1.35vw, .94rem);
  font-weight: 800;
  line-height: 1;
}

.loyalty-points-card p {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(1.05rem, 2.1vw, 1.42rem);
  font-weight: 800;
  line-height: 1.14;
}

.loyalty-mini-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .72rem;
  align-self: end;
  margin-left: auto;
  margin-bottom: 27rem;
  width: min(100%, 440px);
}

.loyalty-mini-grid .icon {
  width: 22px;
  height: 22px;
  color: #ffcc4d;
}

.loyalty-dashboard-card {
  width: min(100%, 460px);
  justify-self: end;
  padding: clamp(1.15rem, 3vw, 1.55rem);
  border-radius: 24px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 24px 54px rgba(2, 18, 32, .2);
  backdrop-filter: blur(16px);
}

.loyalty-how-section {
  background: linear-gradient(180deg, #fff, #f6f8fb);
}

.loyalty-how-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.loyalty-how-grid article {
  padding: clamp(1rem, 2vw, 1.35rem);
  border-radius: 18px;
  background: white;
  border: 1px solid rgba(14, 82, 141, .1);
  box-shadow: 0 16px 34px rgba(7, 28, 44, .06);
}

.loyalty-how-grid span {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  background: #ffcc4d;
  color: var(--color-primary-blue);
  font-size: .78rem;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(255, 204, 77, .26);
}

.loyalty-how-grid h2 {
  margin: .7rem 0 .3rem;
  color: var(--color-navy);
  font-family: var(--font-title);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.loyalty-how-grid p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.loyalty-bullet {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  max-width: 29rem;
  margin-bottom: 1.3rem;
  padding: .95rem 1rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.loyalty-bullet p {
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: .93rem;
  line-height: 1.6;
}

.loyalty-bullet-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  margin-top: .1rem;
  color: rgba(255, 255, 255, .84);
}

.loyalty-quick-perks {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 1.4rem;
}

.loyalty-quick-perks span {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  min-height: 34px;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .92);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .01em;
}

.loyalty-quick-perks .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: #FFCC4D;
  stroke-width: 2.4;
}

.loyalty-level-pill.level-bronce,
.loyalty-badge.level-bronce,
.member-level-card.level-bronce {
  --level-start: #8f4f24;
  --level-end: #d28a4d;
  --level-ink: #5a2d13;
}

.loyalty-level-pill.level-plata,
.loyalty-badge.level-plata,
.member-level-card.level-plata {
  --level-start: #a8b2bf;
  --level-end: #eef3f8;
  --level-ink: #4b5563;
}

.loyalty-level-pill.level-oro,
.loyalty-badge.level-oro,
.member-level-card.level-oro {
  --level-start: #d6a100;
  --level-end: #ffe58a;
  --level-ink: #684800;
}

.loyalty-level-pill.level-diamante,
.loyalty-badge.level-diamante,
.member-level-card.level-diamante {
  --level-start: #4db8ff;
  --level-end: #d8f4ff;
  --level-ink: #075985;
}

.loyalty-level-pill[class*="level-"] {
  border-color: color-mix(in srgb, var(--level-start, #FFB020) 46%, transparent);
  background: linear-gradient(135deg, var(--level-start, #FFB020), var(--level-end, #FFD166));
  color: var(--level-ink, #3b2500);
}

.loyalty-status-card {
  width: min(100%, 560px);
  padding: 1.4rem;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .08));
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 18px 34px rgba(3, 18, 36, .18);
  backdrop-filter: blur(14px);
}

.loyalty-status-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.loyalty-status-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.loyalty-status-head strong {
  display: block;
  color: white;
  font-size: 1.18rem;
  line-height: 1.1;
}

.loyalty-status-head span {
  display: block;
  margin-top: .5rem;
  color: rgba(255, 255, 255, .76);
  font-size: .78rem;
}

.loyalty-points-cop {
  display: grid;
  gap: .22rem;
  margin: -.25rem 0 1rem;
  padding: .82rem .9rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 0%, rgba(252, 209, 22, .18), transparent 8rem),
    rgba(255, 255, 255, .08);
}

.loyalty-points-cop span,
.loyalty-points-cop small,
.loyalty-points-cop em {
  color: rgba(255, 255, 255, .74);
  font-size: .74rem;
  font-style: normal;
  font-weight: 750;
  line-height: 1.25;
}

.loyalty-points-cop strong {
  color: #fff;
  font-family: var(--font-title);
  font-size: clamp(1.34rem, 2.7vw, 1.85rem);
  line-height: .98;
  text-shadow: 0 10px 22px rgba(0, 0, 0, .2);
}

.loyalty-points-cop small {
  color: #ffd577;
}

.loyalty-points-redeem {
  justify-self: start;
  margin-top: .45rem;
}

.loyalty-badge {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFB020;
  box-shadow: 0 10px 24px rgba(255, 176, 32, 0.3);
}

.loyalty-badge[class*="level-"] {
  background: linear-gradient(135deg, var(--level-start, #FFB020), var(--level-end, #FFD166));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--level-start, #FFB020) 34%, transparent);
}

.loyalty-badge .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28px;
  line-height: 1;
  width: 24px;
  height: 24px;
}

.loyalty-badge svg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  color: #fff;
}

.loyalty-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  color: black;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .02em;
}

.loyalty-action .material-symbols-outlined {
  font-size: 16px;
}

.loyalty-action:hover,
.loyalty-status-foot a:hover {
  opacity: .9;
}

.loyalty-progress {
  height: 10px;
  margin: 0 0 .85rem;
  background: rgba(255, 255, 255, .20);
  border-radius: 999px;
  overflow: hidden;
}

.loyalty-progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .65rem;
}

.loyalty-progress-meta strong {
  color: #ffd577;
  font-size: .86rem;
  font-weight: 820;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.loyalty-progress-meta span {
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
}

.loyalty-progress span {
  display: block;
  width: 65%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffb020 0%, #ffd977 100%);
  box-shadow: 0 0 20px rgba(255, 176, 32, .38);
}

.loyalty-status-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.loyalty-status-foot p {
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: .74rem;
  line-height: 1.4;
}

.loyalty-status-foot strong {
  color: white;
}

.loyalty-status-foot a {
  color: white;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.loyalty-status-highlight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.loyalty-status-highlight .material-symbols-outlined {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 176, 32, .18);
  color: #ffd577;
  font-size: 18px;
}

.loyalty-status-highlight strong {
  display: block;
  color: white;
  font-size: .82rem;
  letter-spacing: .02em;
}

.loyalty-status-highlight p {
  margin: .22rem 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: .81rem;
  line-height: 1.5;
}

.loyalty-visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: min(52vw, 1000px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 28px 46px rgba(0, 18, 52, .18));
  transform: translate3d(2.8rem, 1.4rem, 0) scale(.985);
  animation: loyalty-visual-enter 1350ms cubic-bezier(.16, 1, .3, 1) 360ms both;
  will-change: opacity, transform, filter;
}

.loyalty-visual img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: contain;
  object-position: right bottom;
  opacity: 1;
  transform-origin: right bottom;
  animation: loyalty-visual-breathe 6800ms ease-in-out 1750ms infinite alternate;
  will-change: transform;
}

@keyframes loyalty-visual-enter {
  0% {
    opacity: 0;
    filter: drop-shadow(0 12px 18px rgba(0, 18, 52, .04)) blur(7px);
    transform: translate3d(3.8rem, 2rem, 0) scale(.965);
  }

  62% {
    opacity: 1;
    filter: drop-shadow(0 32px 54px rgba(0, 18, 52, .20)) blur(0);
  }

  100% {
    opacity: 1;
    filter: drop-shadow(0 28px 46px rgba(0, 18, 52, .18)) blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes loyalty-visual-breathe {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(.35rem, -.28rem, 0) scale(1.012);
  }
}

@media (prefers-reduced-motion: reduce) {

  .loyalty-visual,
  .loyalty-visual img {
    animation: none;
    filter: none;
    opacity: 1;
    transform: none;
  }
}

.reorder-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 190px;
  gap: 1rem;
}

.more-card {
  min-height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1.5px dashed #ccbda8;
  color: var(--color-navy);
  background: rgba(255, 255, 255, .55);
}

.more-card .plus {
  font-size: 3rem;
  line-height: 1;
  font-weight: 300;
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.offer-card {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 55%) minmax(0, 45%);
  gap: 0;
  align-items: stretch;
  padding: 0;
  background: #f5ede3;
  min-height: 230px;
}

.offer-card-content {
  min-width: 0;
  display: grid;
  align-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
}

.offer-card h3 {
  margin: 0;
  font-family: var(--font-title);
  color: var(--color-navy);
  font-size: 1.45rem;
  letter-spacing: -.04em;
}

.offer-card p {
  margin: .35rem 0 0;
  color: var(--color-text-muted);
}

.offer-card .btn {
  align-self: end;
  justify-self: start;
  width: auto;
  white-space: nowrap;
}

.offer-card-visual {
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, .38);
}

.offer-card-visual img {
  width: 100%;
  height: 100%;
  min-height: 230px;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.benefits-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .28)),
    linear-gradient(135deg, #f9f4ea 0%, #f2eadc 52%, #efe5d6 100%);
  border: 1px solid rgba(206, 214, 224, .85);
  box-shadow: 0 18px 40px rgba(11, 29, 52, .06);
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: .95rem;
  padding: 1.25rem 1.15rem;
  position: relative;
}

.benefit-item+.benefit-item {
  border-left: 1px solid rgba(221, 227, 234, .9);
}

.benefit-icon-badge {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .78)),
    linear-gradient(135deg, rgba(11, 85, 244, .12), rgba(11, 85, 244, .02));
  color: var(--color-navy);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 10px 24px rgba(11, 29, 52, .08);
  border: 1px solid rgba(199, 210, 225, .9);
  overflow: hidden;
}

.benefit-icon-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(145deg, rgba(11, 85, 244, .12), transparent 55%),
    radial-gradient(circle at top right, rgba(255, 255, 255, .85), transparent 42%);
  pointer-events: none;
}

.benefit-icon-orb {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 85, 244, .16), rgba(11, 85, 244, 0) 72%);
  filter: blur(.2px);
}

.benefit-icon {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  color: #12243a;
}

.benefit-item strong {
  display: block;
  color: var(--color-navy);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.benefit-item span {
  color: var(--color-text-muted);
  font-size: .84rem;
  line-height: 1.2;
}

.order-history {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 1rem;
}

.order-history>.card {
  min-width: 0;
}

.order-history>.card:first-child {
  overflow-x: auto;
  overflow-y: hidden;

}

.orders-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: .9rem;
}

.orders-table th,
.orders-table td {
  padding: .75rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.orders-table th {
  color: var(--color-navy);
  font-size: .8rem;
}

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #0e8a46;
  font-weight: 700;
}

.status-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-whatsapp);
}

.status-dot.is-transit {
  color: #b96a00;
}

.status-dot.is-transit::before {
  background: #ff9f1c;
}

.status-dot.is-delivered {
  color: #0e8a46;
}

.status-dot.is-delivered::before {
  background: var(--color-whatsapp);
}

.status-dot.is-canceled {
  color: var(--color-danger);
}

.status-dot.is-canceled::before {
  background: var(--color-danger);
}

.status-dot.is-preparing {
  color: var(--color-primary-blue);
}

.status-dot.is-preparing::before {
  background: var(--color-primary-blue);
}

.brand-hero {
  background: linear-gradient(173deg, #fff 0%, #fff 75%, #a6c5ff 100%);
}

/* ============================================
   BRAND / NOSOTROS
   ============================================ */
.brand-hero .hero-inner {
  align-items: stretch;
  min-height: clamp(500px, 42vw, 650px);
  padding-block: 0;
}

.brand-hero .hero-copy {
  align-self: center;
  padding-block: clamp(3rem, 6vw, 5.4rem);
}

.brand-hero .hero-copy h1 {
  color: var(--color-primary-blue);
}

.brand-hero .hero-visual {
  --hero-right-bleed: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
  justify-self: stretch;
  align-self: stretch;
  overflow: hidden;
  width: calc(100% + var(--hero-right-bleed));
  margin-right: calc(var(--hero-right-bleed) * -1);
  border-radius: 0;
  clip-path: inset(0 0 0 0 round 0);
}

.brand-hero .hero-visual.mask-reveal {
  opacity: 0;
  transform: translateX(2.4rem);
  clip-path: inset(0 0 0 32% round 30px 0 0 30px);
  transition:
    clip-path 1250ms cubic-bezier(.16, 1, .3, 1),
    opacity 720ms ease,
    transform 1250ms cubic-bezier(.16, 1, .3, 1);
}

.brand-hero .hero-visual.mask-reveal.is-visible {
  opacity: 1;
  transform: translateX(0);
  clip-path: inset(0 0 0 0 round 0px);
}

.brand-hero .hero-visual img {
  height: 100%;
  min-height: clamp(500px, 42vw, 650px);
  object-fit: cover;
  border-radius: 30px 0 0 30px;
  filter: saturate(.92) contrast(.96);
  transform: scale(1.075) translateX(2.5%);
  transform-origin: right center;
  will-change: transform, filter;
}

.brand-hero .hero-visual.mask-reveal.is-visible img {
  animation: brand-photo-reveal 1650ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes brand-photo-reveal {
  0% {
    filter: saturate(.82) contrast(.9) blur(5px);
    transform: scale(1.085) translateX(3.2%);
  }

  58% {
    filter: saturate(.98) contrast(1) blur(0);
  }

  100% {
    filter: saturate(1) contrast(1) blur(0);
    transform: scale(1.015) translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {

  .brand-hero .hero-visual img,
  .brand-hero .hero-visual.mask-reveal.is-visible img {
    animation: none;
    filter: none;
    transform: none;
  }
}

.brand-hero .hero-copy p {
  max-width: 730px;
  margin: .9rem 0 0;
  color: rgba(16, 24, 40, .82);
  font-size: clamp(1.08rem, 1.55vw, 1.34rem);
  font-weight: 560;
  line-height: 1.42;
  letter-spacing: -.018em;
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .64),
    0 8px 22px rgba(7, 28, 44, .06);
}

.brand-hero .hero-copy p span {
  color: var(--color-primary-blue);
  font-weight: 720;
}

.coral-line {
  width: 72px;
  height: 4px;
  border-radius: 99px;
  background: var(--color-yellow);
  margin: 2.4rem 0;
}

.quiet-panel {
  background: #f6eee5;
}

.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.promise-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem;
}

.promise-card .icon {
  width: 48px;
  height: 48px;
  color: var(--color-navy);
}

.story-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  grid-template-areas: "copy media";
  align-items: stretch;
  min-height: 420px;
  overflow: hidden;
  padding: 0;
  border-radius: 32px;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, .16), transparent 28%),
    linear-gradient(105deg, #082B36 0%, #0040C1 100%);
  color: white;
  box-shadow: 0 20px 40px rgba(7, 28, 44, .08);
}

.story-card img {
  grid-area: media;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  padding: 0;
  border-radius: 0;
}

.story-copy {
  grid-area: copy;
  padding: clamp(1.6rem, 4vw, 3rem);
  display: grid;
  align-content: center;
  gap: .75rem;
}

.story-copy h2 {
  margin: 0 0 .25rem;
  font-family: var(--font-title);
  color: white;
  font-size: clamp(2.35rem, 4.2vw, 3rem);
  letter-spacing: 0;
  line-height: 1.05;
  font-weight: 700;
  max-width: 19ch;
}

.story-copy p {
  max-width: 32rem;
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-size: 1.02rem;
  line-height: 1.58;
}

.story-copy p strong {
  color: white;
}

.story-copy .link-arrow {
  justify-self: start;
  margin-top: .8rem;
  color: white;
}

.app-shell-preview {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1rem;
  min-height: 720px;
}

.app-sidebar {
  background: var(--color-navy);
  color: white;
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  display: grid;
  align-content: start;
  gap: 1rem;
}

.app-sidebar .logo-img {
  filter: none;
  height: 46px;
  background: white;
  border-radius: 12px;
  padding: .25rem;
}

.app-menu {
  display: grid;
  gap: .35rem;
  margin-top: 1rem;
}

.app-menu a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem .9rem;
  border-radius: 12px;
  color: rgba(255, 255, 255, .78);
  font-weight: 700;
}

.app-menu a.is-active,
.app-menu a:hover {
  background: rgba(255, 255, 255, .12);
  color: white;
}

.app-main {
  display: grid;
  gap: 1rem;
}

.app-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.app-top h1 {
  margin: 0;
  font-family: var(--font-title);
  color: var(--color-navy);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -.045em;
}

.app-widget-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.app-widget {
  padding: 1.2rem;
}

.app-widget h3 {
  margin: 0 0 .25rem;
  color: var(--color-navy);
}

.app-widget strong {
  font-family: var(--font-title);
  font-size: 2rem;
  color: var(--color-primary-blue);
}

.app-operational-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.toast {
  position: fixed;
  z-index: calc(var(--z-header) + 15);
  right: 1rem;
  bottom: 1rem;
  max-width: 360px;
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  background: var(--color-navy);
  color: white;
  padding: .9rem 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform var(--ease), opacity var(--ease);
}

.toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 1120px) {
  .header-inner {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
  }

  .header-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .search-box {
    justify-self: stretch;
    max-width: none;
  }

  .product-grid,
  .product-grid.featured {
    grid-template-columns: repeat(4, 1fr);
  }

  .collection-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-featured-collections .container {
    grid-template-columns: 1fr;
  }

  .section-featured-collections .section-head {
    position: static;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .2rem;
  }

  .section-featured-collections .section-title {
    max-width: none;
    font-size: clamp(2.25rem, 7vw, 4.1rem);
  }

  .product-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .74fr);
    gap: clamp(1rem, 2.4vw, 2rem);
  }

  .qty-stock,
  .product-actions .product-secondary-actions {
    grid-template-columns: 1fr;
  }

  .section-featured-collections .section-kicker {
    max-width: 42ch;
    margin-top: .55rem;
  }

  .collection-grid-featured {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: clamp(318px, 42vw, 360px);
  }

  .collection-grid-featured .collection-card-editorial:nth-child(1),
  .collection-grid-featured .collection-card-editorial:nth-child(2),
  .collection-grid-featured .collection-card-editorial:nth-child(3),
  .collection-grid-featured .collection-card-editorial:nth-child(4),
  .collection-grid-featured .collection-card-editorial:nth-child(5),
  .collection-grid-featured .collection-card-editorial:nth-child(6),
  .collection-grid-featured .collection-card-editorial:nth-child(7),
  .collection-grid-featured .collection-card-editorial:nth-child(8) {
    grid-column: span 1;
    grid-row: span 1;
    min-height: 318px;
  }

  .collection-grid-featured .collection-card-editorial:nth-child(4) .collection-card-content,
  .collection-grid-featured .collection-card-editorial:nth-child(8) .collection-card-content {
    justify-items: start;
    text-align: left;
  }

  .collection-grid-featured .collection-card-editorial:nth-child(4) .mini-btn,
  .collection-grid-featured .collection-card-editorial:nth-child(8) .mini-btn {
    justify-self: start;
  }

  .collection-grid-featured .collection-card-editorial:nth-child(4) .collection-card-note,
  .collection-grid-featured .collection-card-editorial:nth-child(8) .collection-card-note {
    margin-left: 0;
  }

  .category-hero-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .catalog-hero-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .catalog-hero-visual {
    display: none;
  }

  .category-hero-copy {
    justify-items: start;
    margin-left: 0;
    text-align: left;
  }

  .trust-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .28rem;
  }

  .trust-item {
    gap: .62rem;
    padding: .86rem .7rem;
  }

  .catalog-layout {
    grid-template-columns: 1fr;
  }

  .catalog-sidebar {
    display: none;
  }

  .catalog-nav-isotipo-wrap {
    display: none;
  }

  .catalog-filter-tab {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    min-height: 42px;
    padding: .56rem .86rem;
    border: 1px solid rgba(11, 85, 244, .2);
    border-radius: 999px;
    background:
      radial-gradient(circle at 12% 0%, rgba(252, 209, 22, .2), transparent 68%),
      #fff;
    color: var(--color-navy);
    font-weight: 900;
    font-size: .86rem;
    white-space: nowrap;
    box-shadow:
      0 12px 24px rgba(7, 28, 44, .075),
      inset 0 1px 0 rgba(255, 255, 255, .98);
    cursor: pointer;
    transition:
      transform 180ms ease,
      border-color 180ms ease,
      background 180ms ease,
      color 180ms ease;
  }

  .catalog-filter-tab-desktop {
    display: none;
  }

  .catalog-filter-tab .icon {
    width: 18px;
    height: 18px;
    color: var(--color-primary-blue);
    stroke-width: 2.25;
  }

  .catalog-filter-tab:hover,
  .catalog-filter-tab.is-active {
    transform: translateY(-1px);
    border-color: rgba(11, 85, 244, .46);
    background: var(--color-primary-blue);
    color: #fff;
  }

  .catalog-filter-tab:hover .icon,
  .catalog-filter-tab.is-active .icon {
    color: #fff;
  }

  .catalog-mobile-filter-panel {
    display: block;
    position: fixed;
    left: var(--catalog-mobile-filter-left, var(--container-pad));
    top: var(--catalog-mobile-filter-top, calc(var(--header-height) + 4.25rem));
    z-index: 980;
    width: var(--catalog-mobile-filter-width, calc(100vw - (var(--container-pad) * 2)));
    max-width: calc(100vw - 1.5rem);
    overflow: visible;
    transform-origin: top center;
  }

  .catalog-mobile-filter-panel[hidden] {
    display: none;
  }

  .catalog-mobile-filter-panel.is-open {
    padding-top: 0;
  }

  .catalog-mobile-filter-panel .filters {
    position: static;
    width: 100%;
    max-height: min(66vh, 640px);
    margin: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: 22px;
    box-shadow:
      0 22px 48px rgba(7, 28, 44, .12),
      inset 0 1px 0 rgba(255, 255, 255, .96);
  }

  .catalog-mobile-filter-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: .55rem 0 0;
  }

  .catalog-mobile-filter-actions .btn {
    min-height: 42px;
    width: min(100%, 280px);
  }

  .loyalty-panel {
    min-height: 470px;
  }

  .loyalty-copy {
    max-width: min(60%, 760px);
    min-height: 470px;
    padding: clamp(2.8rem, 5vw, 4rem) 0;
  }

  .loyalty-visual {
    width: min(42vw, 620px);
  }

  .reorder-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .more-card {
    min-height: 210px;
  }

  .benefits-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-panel {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 960px) {
  .hero-split .landing-hero-copy {
    --landing-hero-copy-y-active: var(--landing-hero-copy-y-laptop);
    translate: 0 var(--landing-hero-copy-y-active);
  }

  .editorial-banner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "mark"
      "media";
  }

  .editorial-banner-brand {
    justify-self: start;
    transform: translate(0, 0);
  }

  .editorial-banner-logo {
    width: clamp(140px, 32vw, 220px);
  }

  .editorial-banner-media {
    justify-self: stretch;
    width: 100%;
    height: clamp(220px, 44vw, 350px);
    transform: translate(0, 0) scale(1);
  }
}

@media (max-width: 880px) {
  .hero-split .landing-hero-copy {
    --landing-hero-copy-y-active: var(--landing-hero-copy-y-tablet);
  }

  .header-inner {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
  }

  .logo-link {
    grid-column: 2;
  }

  .header-actions {
    grid-column: 4;
    justify-self: end;
    margin-left: auto;
  }

  .hero-inner,
  .support-hero .hero-inner,
  .brand-hero .hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero {
    background: linear-gradient(160deg, #fff 0%, #f5ecdf 100%);
  }

  .hero-split {
    background: #fff;
  }

  .hero-inner {
    gap: 1.5rem;
    padding: 1.75rem 0 2.25rem;
  }

  .hero-split .hero-inner {
    min-height: clamp(620px, 92svh, 780px);
  }

  .hero-split .landing-hero-copy {
    --hero-copy-width: 100%;
    --hero-copy-padding:
      calc(var(--header-height) + 2rem) var(--container-pad) clamp(2rem, 7vw, 3.2rem);
  }

  .hero-copy>* {
    max-width: none;
  }

  .hero-split .hero-copy>* {
    margin-left: auto;
    margin-right: auto;
    max-width: min(100%, 38rem);
  }

  .hero-split .hero-copy h1 {
    max-width: 14.6ch;
    font-size: clamp(2.6rem, 8vw, 4rem);
  }

  .hero-split .coral-line {
    margin: clamp(.95rem, 2.6vw, 1.25rem) auto;
  }

  .hero-split .button-row {
    justify-content: center;
    margin-top: 1rem;
  }

  .hero-split .hero-note {
    justify-content: center;
    margin-top: .85rem;
  }

  .support-hero .hero-copy,
  .brand-hero .hero-copy,
  .page-hero-catalog .category-hero-copy,
  .page-hero-categories .category-hero-copy {
    justify-self: start;
    width: 100%;
    text-align: left;
  }

  .support-hero .hero-copy>*,
  .brand-hero .hero-copy>*,
  .page-hero-catalog .category-hero-copy>.breadcrumb,
  .page-hero-categories .category-hero-copy>.breadcrumb,
  .page-hero-catalog .category-hero-copy>.page-title,
  .page-hero-categories .category-hero-copy>.page-title,
  .page-hero-catalog .category-hero-copy>.coral-line,
  .page-hero-categories .category-hero-copy>.coral-line,
  .page-hero-catalog .category-hero-copy>.page-intro,
  .page-hero-categories .category-hero-copy>.page-intro {
    margin-left: 0;
    margin-right: 0;
  }

  .support-hero .hero-copy h1,
  .brand-hero .hero-copy h1,
  .page-hero-catalog .page-title,
  .page-hero-categories .page-title {
    max-width: 14ch;
  }

  .support-hero .hero-copy p,
  .brand-hero .hero-copy p,
  .page-hero-catalog .page-intro,
  .page-hero-categories .page-intro {
    max-width: 38ch;
  }

  .support-hero .coral-line,
  .brand-hero .coral-line,
  .page-hero-catalog .coral-line,
  .page-hero-categories .coral-line {
    margin-left: 0;
    margin-right: 0;
  }

  .support-hero .button-whatsapp,
  .support-hero .hero-note {
    justify-content: center;
  }

  .page-hero-categories .category-hero-copy {
    justify-self: center;
    text-align: center;
  }

  .page-hero-categories .category-hero-copy>.breadcrumb,
  .page-hero-categories .category-hero-copy>.page-title,
  .page-hero-categories .category-hero-copy>.coral-line,
  .page-hero-categories .category-hero-copy>.page-intro {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-note .dot {
    margin-left: 0;
  }

  .hero-visual img {
    min-height: 250px;
  }

  .support-hero .hero-visual img,
  .brand-hero .hero-visual img {
    min-height: clamp(280px, 58vw, 430px);
  }

  .support-hero .hero-visual {
    width: calc(100% + (var(--container-pad) * 2));
    margin-inline: calc(var(--container-pad) * -1);
    border-radius: 0;
    clip-path: inset(0 0 0 0 round 0);
  }

  .support-hero .hero-visual img {
    border-radius: 0;
    object-position: center center;
  }

  .brand-hero .hero-visual,
  .brand-hero .hero-visual.mask-reveal,
  .brand-hero .hero-visual.mask-reveal.is-visible {
    width: calc(100% + (var(--container-pad) * 2));
    margin-inline: calc(var(--container-pad) * -1);
    border-radius: 0;
    clip-path: inset(0 0 0 0 round 0);
  }

  .brand-hero .hero-visual img {
    border-radius: 0;
    object-position: center center;
  }

  .hero-split .hero-visual {
    grid-area: hero;
    width: 100%;
    min-height: clamp(620px, 92svh, 780px);
    margin-inline: 0;
    aspect-ratio: auto;
  }

  .hero-split .hero-media-slide {
    --hero-slide-x: 50%;
    --hero-slide-y: 50%;
    --hero-slide-active-scale: 1.02;
    --hero-slide-idle-scale: 1.045;
    --hero-slide-exit-scale: 1.03;
  }

  .hero-split .hero-media-slide:nth-child(1) {
    --hero-slide-x: 50%;
    --hero-slide-y: 50%;
    --hero-slide-active-scale: 1.055;
    --hero-slide-idle-scale: 1.08;
    --hero-slide-exit-scale: 1.065;
    --hero-slide-enter-scale: 1.095;
    --hero-slide-shift-y: 60px;
  }

  .hero-split .hero-media-slide:nth-child(2) {
    --hero-slide-x: 54%;
    --hero-slide-y: 50%;
    --hero-slide-active-scale: 1.055;
    --hero-slide-idle-scale: 1.08;
    --hero-slide-exit-scale: 1.065;
    --hero-slide-enter-scale: 1.095;
    --hero-slide-shift-y: 50px;
  }

  .hero-split .hero-media-slide:nth-child(3) {
    --hero-slide-x: 50%;
    --hero-slide-y: 50%;
    --hero-slide-active-scale: 1.06;
    --hero-slide-idle-scale: 1.085;
    --hero-slide-exit-scale: 1.07;
    --hero-slide-enter-scale: 1.1;
    --hero-slide-shift-y: 85px;
  }

  .hero-split .hero-media-slide:nth-child(4) {
    --hero-slide-x: 50%;
    --hero-slide-y: 50%;
    --hero-slide-active-scale: 1.05;
    --hero-slide-idle-scale: 1.075;
    --hero-slide-exit-scale: 1.06;
    --hero-slide-enter-scale: 1.09;
    --hero-slide-shift-y: 76px;
  }

  .hero-split .hero-media-slide:nth-child(5) {
    --hero-slide-x: 50%;
    --hero-slide-y: 50%;
    --hero-slide-active-scale: 1.04;
    --hero-slide-idle-scale: 1.065;
    --hero-slide-exit-scale: 1.05;
    --hero-slide-enter-scale: 1.08;
    --hero-slide-shift-y: 70px;
  }

  .hero-split .hero-media-slide:nth-child(6) {
    --hero-slide-x: 48%;
    --hero-slide-y: 50%;
    --hero-slide-active-scale: 1.08;
    --hero-slide-idle-scale: 1.105;
    --hero-slide-exit-scale: 1.09;
    --hero-slide-enter-scale: 1.12;
    --hero-slide-shift-y: 70px;
  }

  .hero-split .hero-media-slide:nth-child(7) {
    --hero-slide-x: 50%;
    --hero-slide-y: 50%;
    --hero-slide-active-scale: 1.05;
    --hero-slide-idle-scale: 1.075;
    --hero-slide-exit-scale: 1.06;
    --hero-slide-enter-scale: 1.09;
    --hero-slide-shift-y: 72px;
  }

  .whatsapp-float {
    display: none;
  }

  .search-box {
    display: none;
  }

  .reason-grid,
  .review-grid,
  .stats-strip,
  .support-grid,
  .contact-grid,
  .promise-grid,
  .app-widget-grid,
  .app-operational-grid {
    grid-template-columns: 1fr 1fr;
  }

  .trust-strip {
    display: flex;
    grid-template-columns: none;
    gap: .65rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;

    overscroll-behavior-x: contain;
  }

  .trust-strip::-webkit-scrollbar {
    display: none;
  }

  .trust-strip .trust-item,
  .trust-strip.is-scrollable .trust-item {
    flex: 0 0 clamp(238px, 42vw, 300px);
    scroll-snap-align: start;
  }

  .trust-strip .trust-item+.trust-item,
  .trust-strip .trust-item:nth-child(even) {
    border-left: 0;
    border-top: 0;
  }

  .stat-item+.stat-item,
  .benefit-item+.benefit-item {
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }

  .catalog-layout {
    display: flex;
    flex-direction: column;
    gap: .9rem;
  }

  .catalog-category-nav-section .chips {
    justify-content: flex-start;
  }


  .catalog-sidebar {
    order: 2;
    position: static;
    width: min(100%, 680px);
    margin-inline: auto;
  }

  .section-tight:has([data-catalog-chips]) {
    position: sticky;
    top: calc(var(--header-height) + .45rem);
    z-index: 850;
    padding-block: .32rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .7));
    backdrop-filter: blur(14px) saturate(150%);
  }

  body:has(.site-header.is-hidden) .section-tight:has([data-catalog-chips]) {
    top: .35rem;
  }

  body:has(.site-header.is-menu-open) .section-tight:has([data-catalog-chips]) {
    top: calc(var(--header-height) + .45rem);
  }

  [data-catalog-chips].chips {
    position: static;
    width: min(100%, 760px);
    margin-inline: auto;
    padding: .58rem .64rem;
    border: 1px solid rgba(11, 85, 244, .13);
    border-radius: 999px;
    box-shadow:
      0 16px 34px rgba(7, 28, 44, .09),
      inset 0 1px 0 rgba(255, 255, 255, .95);
    backdrop-filter: blur(16px) saturate(155%);
  }

  .catalog-results {
    order: 1;
  }

  .filters {
    order: 2;
    position: static;
    margin-top: 0;
    padding: .85rem;
    width: min(100%, 560px);
    margin-inline: auto;
  }

  .catalog-sidebar .filters {
    width: 100%;
  }

  .product-grid,
  .product-grid.featured {
    grid-template-columns: repeat(2, 1fr);
  }

  .catalog-results .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .catalog-results .product-card {
    --catalog-card-badge-top: .56rem;
    --catalog-card-badge-left: .56rem;
    --catalog-card-badge-right: 3.35rem;
    --catalog-card-badge-gap: .22rem;
    --catalog-card-badge-stack-max: calc(100% - 3.9rem);
    --catalog-card-badge-pad-y: .2rem;
    --catalog-card-badge-pad-x: .44rem;
    --catalog-card-badge-font-size: .66rem;
    --catalog-card-fav-top: .52rem;
    --catalog-card-fav-right: .52rem;
    --catalog-card-fav-size: 30px;
    --catalog-card-fav-icon-size: 16px;
  }

  .catalog-results .product-badge:not(.product-badge-category) {
    display: none;
  }

  .catalog-results .product-badge-category {
    line-height: 1;
  }

  .product-detail-grid,
  .product-content-grid,
  .support-two-col,
  .checkout-layout,
  .order-history,
  .story-card,
  .app-shell-preview {
    grid-template-columns: 1fr;
  }

  .product-summary-card {
    position: static;
  }

  .product-info-layout {
    grid-template-columns: 1fr;
  }

  .product-description-card {
    grid-column: auto;
  }

  .product-content-grid {
    gap: 1rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: .35rem;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .summary-card {
    position: static;
  }

  .checkout-head {
    align-items: flex-start;
    flex-direction: column;
    padding: 1rem 0;
  }

  .video-modal {
    place-items: start center;
    overflow-y: auto;
    padding: max(.6rem, env(safe-area-inset-top)) .6rem max(.75rem, env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .video-modal-card {
    display: flex;
    flex-direction: column;
    width: min(100%, 430px);
    max-height: calc(100dvh - 1.35rem);
    margin: auto 0;
    border-radius: 14px;
  }

  .video-modal-top {
    position: relative;
    align-items: flex-start;
    padding: .72rem 3.45rem .78rem .78rem;
  }

  .video-modal-product {
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    gap: .42rem;
  }

  .video-modal-logo {
    width: 104px;
    max-height: 26px;
  }

  .video-modal-copy > span {
    font-size: .7rem;
  }

  .video-modal-copy {
    width: 100%;
    max-width: 100%;
  }

  .video-modal-copy > strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: .9rem;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
  }

  .video-modal-meta {
    width: 100%;
    max-width: 100%;
    gap: .32rem;
    margin-top: .38rem;
  }

  .video-modal-meta span,
  .video-modal-meta button {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    min-height: 25px;
    padding: .22rem .46rem;
    font-size: .68rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .video-modal-meta strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .video-modal-meta button {
    white-space: nowrap;
  }

  .video-modal-meta button strong {
    white-space: normal;
  }

  .video-modal-close {
    position: absolute;
    top: .65rem;
    right: .65rem;
    width: 38px;
    height: 38px;
  }

  .video-modal-frame {
    width: 100%;
    height: auto;
    min-width: 0;
    max-width: 100%;
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    max-height: calc(100dvh - 10.5rem);
  }

  .video-modal-card.is-vertical-video .video-modal-frame {
    width: min(100%, calc((100dvh - 14.5rem) * 9 / 16));
    height: auto;
    aspect-ratio: 9 / 16;
    max-height: calc(100dvh - 14.5rem);
  }

  .steps {
    width: 100%;
    gap: .5rem;
  }

  .step-line {
    flex: 1;
    min-width: 20px;
  }

  .cta-dark {
    grid-template-columns: 1fr;
    gap: 1.15rem;
    text-align: left;
  }

  .cta-dark-action {
    justify-items: start;
  }

  .cta-dark-action-row {
    justify-content: flex-start;
    width: 100%;
  }

  .cta-dark-copy-isotipo {
    display: none;
  }

  .cta-dark-copy {
    display: block;
  }

  .cta-dark-action-isotipo {
    display: block;
  }

  .footer-panel {
    grid-template-columns: 1fr 1fr;
  }

  .footer-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column: 1 / -1;
  }

  .footer-contact-card {
    grid-column: 2;
    grid-row: 1;
  }

  .editorial-banner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "mark"
      "media";
  }

  .editorial-banner-brand {
    justify-self: start;
    transform: translate(0, 0);
  }

  .editorial-banner-logo {
    width: auto;
    height: calc(clamp(26px, 7vw, 36px) * 1.28);
  }

  .editorial-banner-flag-co {
    width: calc(clamp(26px, 7vw, 36px) * 1.42);
    height: clamp(26px, 7vw, 36px);
    border-radius: 6px;
  }

  .editorial-banner-media {
    justify-self: stretch;
    width: 100%;
    height: clamp(220px, 48vw, 360px);
    transform: translate(0, 0) scale(1);
  }

  .tracking-card {
    grid-template-columns: 1fr;
  }

  .loyalty-panel {
    grid-template-columns: 1fr;
    gap: .35rem;
    min-height: auto;
  }

  .loyalty-strip {
    min-height: auto;
    padding: .35rem 0 1.25rem;
  }

  .loyalty-copy {
    max-width: none;
    min-height: auto;
    padding: 1.45rem 0 .95rem;
  }

  .loyalty-kicker {
    font-size: .89rem;
  }

  .loyalty-copy .button-row {
    gap: .95rem;
    margin-top: 1.35rem;
    margin-bottom: 1.25rem;
  }

  .loyalty-corner-mark-bottom {
    display: none;
  }

  .loyalty-quick-perks {
    display: flex;
  }

  .loyalty-status-card,
  .loyalty-dashboard-card {
    width: 100%;
    justify-self: stretch;
  }

  .loyalty-stage {
    min-height: auto;
    width: min(100%, 720px);
    justify-self: center;
    align-content: start;
    padding: .15rem 0 0;
  }

  .loyalty-stage > img {
    position: relative;
    order: 3;
    right: auto;
    bottom: auto;
    justify-self: center;
    width: min(108vw, 680px);
    max-height: 560px;
    margin-top: clamp(.7rem, 1.8vw, 1.2rem);
    transform: none;
    object-position: center bottom;
  }

  .loyalty-points-card {
    position: relative;
    order: 2;
    top: auto;
    left: auto;
    width: min(360px, 100%);
    justify-self: center;
    margin: 1.75rem auto 0;
  }

  .loyalty-mini-grid {
    order: 1;
    width: min(100%, 460px);
    margin-top: 0;
    margin-inline: auto;
    margin-bottom: 0;
  }

  .story-card {
    grid-template-areas:
      "copy"
      "media";
  }

  .story-card img {
    min-height: 300px;
    border-radius: 0;
  }

  .offer-grid {
    grid-template-columns: 1fr;
  }

  .offer-card {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (min-width: 768px) and (max-width: 880px) {
  .loyalty-panel {
    gap: .65rem;
  }

  .loyalty-copy {
    justify-items: center;
    text-align: center;
    padding: 1.2rem 0 .55rem;
  }

  .loyalty-kicker {
    justify-self: center;
    font-size: .84rem;
  }

  .loyalty-panel h1 {
    width: min(100%, 640px);
    font-size: clamp(2.75rem, 5.8vw, 3.35rem);
    line-height: 1.04;
    margin-bottom: .75rem;
  }

  .loyalty-lead {
    max-width: 36rem;
    margin-inline: auto;
  }

  .loyalty-hero-actions {
    justify-content: center;
  }

  .loyalty-steps-row {
    width: min(100%, 520px);
    margin-inline: auto;
  }

  .loyalty-stage {
    width: min(100%, 680px);
    justify-items: center;
    gap: .7rem;
  }

  .loyalty-mini-grid {
    width: min(100%, 520px);
  }

  .loyalty-points-card {
    width: min(360px, 88vw);
    margin-top: 1.75rem;
  }

  .loyalty-stage > img {
    width: min(94vw, 600px);
    max-height: 430px;
    margin-top: .1rem;
  }
}

@media (min-width: 881px) and (max-width: 1439px) {
  .loyalty-panel {
    grid-template-columns: 1fr;
    gap: .85rem;
    min-height: auto;
  }

  .loyalty-strip {
    min-height: auto;
    padding: .5rem 0 1.4rem;
  }

  .loyalty-copy {
    max-width: none;
    min-height: auto;
    justify-items: center;
    text-align: center;
    padding: .9rem 0 .35rem;
  }

  .loyalty-kicker {
    justify-self: center;
    font-size: .89rem;
  }

  .loyalty-panel h1 {
    width: min(100%, 980px);
    font-size: clamp(3rem, 4.8vw, 4rem);
    line-height: 1.03;
    margin-bottom: .65rem;
  }

  .loyalty-lead {
    max-width: 42rem;
    margin-inline: auto;
  }

  .loyalty-hero-actions {
    justify-content: center;
  }

  .loyalty-steps-row {
    width: min(100%, 560px);
    margin-inline: auto;
  }

  .loyalty-stage {
    min-height: auto;
    width: min(100%, 900px);
    justify-self: center;
    justify-items: center;
    align-content: start;
    gap: .85rem;
    padding: 0 0 .8rem;
  }

  .loyalty-mini-grid {
    order: 1;
    width: min(100%, 560px);
    margin: 0 auto;
  }

  .loyalty-points-card {
    position: relative;
    order: 2;
    top: auto;
    left: auto;
    width: min(390px, 90vw);
    justify-self: center;
    margin: 1.5rem auto 0;
  }

  .loyalty-stage > img {
    position: relative;
    order: 3;
    right: auto;
    bottom: auto;
    justify-self: center;
    width: min(90vw, 720px);
    max-height: 450px;
    margin-top: .1rem;
    transform: none;
    object-position: center bottom;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .loyalty-stage {
    grid-template-columns: minmax(0, 390px) minmax(0, 720px);
    grid-template-areas:
      "mini mini"
      "card media";
    column-gap: clamp(1.1rem, 4vw, 3.5rem);
    row-gap: .9rem;
    width: min(100%, 1120px);
    align-items: center;
  }

  .loyalty-mini-grid {
    grid-area: mini;
    justify-self: center;
    width: min(100%, 560px);
  }

  .loyalty-points-card {
    grid-area: card;
    align-self: center;
    margin: 0;
  }

  .loyalty-stage > img {
    grid-area: media;
    align-self: end;
    width: min(52vw, 720px);
    max-height: 450px;
    margin-top: 0;
  }

  .loyalty-steps-row span,
  .loyalty-mini-grid span {
    min-height: 104px;
    aspect-ratio: 1 / .7;
  }
}

@media (max-width: 767px) {
  .loyalty-copy {
    justify-items: center;
    text-align: center;
  }

  .loyalty-kicker {
    justify-self: center;
    font-size: .84rem;
  }

  .loyalty-panel h1 {
    width: 100%;
  }

  .loyalty-lead {
    max-width: 23rem;
    margin-inline: auto;
  }

  .loyalty-hero-actions {
    width: min(100%, 350px);
    justify-self: center;
    justify-content: center;
  }
}

@media (max-width: 680px) {
  .qty-stock,
  .product-actions .product-secondary-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .hero-split .landing-hero-copy {
    --landing-hero-copy-y-active: var(--landing-hero-copy-y-mobile);
  }

  .editorial-banner-flag-co {
    width: calc(clamp(24px, 7.5vw, 32px) * 1.42);
    height: clamp(24px, 7.5vw, 32px);
  }

  .editorial-banner-logo {
    width: auto;
    height: calc(clamp(24px, 7.5vw, 32px) * 1.28);
  }


  :root {
    --container-pad: .9rem;
  }

  .page-hero-catalog {
    padding-top: .7rem;
  }

  .catalog-category-nav-section {
    padding: .54rem 0 .45rem;
  }

  .catalog-category-nav-section .container {
    gap: .32rem;
  }

  .catalog-nav-row {
    gap: .45rem;
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
  }

  .catalog-filter-tab {
    min-width: 44px;
    min-height: 40px;
    padding: .52rem .68rem;
    font-size: .8rem;
  }

  .catalog-filter-tab .icon {
    width: 17px;
    height: 17px;
  }

  .catalog-category-nav-section .chip {
    min-height: 40px;
    padding: .52rem .68rem;
    gap: .38rem;
    font-size: .8rem;
  }

  .catalog-category-nav-section .chip .icon {
    width: 17px;
    height: 17px;
  }

  .catalog-top-breadcrumb {
    display: none;
  }

  .catalog-promo-section {
    padding: .8rem 0 .9rem;
  }

  .catalog-promo-carousel {
    position: relative;
    left: 50%;
    width: 100vw;
    min-height: 553px;
    margin-inline: 0;
    border-radius: 0;
    transform: translateX(-50%);
  }

  .catalog-promo-after-products .catalog-promo-carousel {
    left: 50%;
    width: 100vw;
    max-width: none;
    transform: translateX(-50%);
  }

  .catalog-promo-slide {
    --promo-pad-y: 1rem;
    --promo-pad-x: var(--container-pad);
    grid-template-columns: 1fr;
    align-content: start;
    gap: .8rem;
    padding-bottom: 1.15rem;
  }

  .catalog-promo-copy {
    gap: .62rem;
    max-width: none;
    padding-right: 4.8rem;
  }

  .catalog-promo-copy h2 {
    max-width: 12.5ch;
    font-size: clamp(1rem, 7.1vw, 3.2rem);
  }

  .catalog-promo-copy p {
    max-width: 30ch;
    font-size: .92rem;
  }

  .catalog-promo-art {
    margin: 0;
    min-height: 270px;
    border-radius: 22px;
  }

  .catalog-promo-art span {
    font-size: 1.1rem;
  }

  .catalog-promo-art-image {
    width: 100%;
    height: 100%;
    max-height: none;
  }

  .catalog-promo-controls {
    top: .78rem;
    right: .78rem;
  }

  .catalog-promo-control {
    width: 34px;
    height: 34px;
  }

  .catalog-promo-dots {
    left: var(--container-pad);
    right: auto;
    bottom: .65rem;
  }

  .page-hero-catalog .category-hero-copy,
  .page-hero-catalog .category-hero-copy>.breadcrumb,
  .page-hero-catalog .category-hero-copy>.page-title,
  .page-hero-catalog .category-hero-copy>.coral-line,
  .page-hero-catalog .category-hero-copy>.page-intro,
  .page-hero-catalog .category-hero-copy>.catalog-smart-panel,
  .page-hero-catalog .category-hero-copy>.catalog-commerce-strip,
  .page-hero-catalog .category-hero-copy>.catalog-category-title {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  .page-hero-catalog .page-title {
    max-width: 14ch;
    font-size: clamp(2.7rem, 9vw, 4.8rem);
  }

  .page-hero-catalog .page-intro {
    max-width: 33ch;
    font-size: 1rem;
    line-height: 1.34;
  }

  .catalog-hero-stats {
    gap: .42rem;
    margin-top: .85rem;
  }

  .catalog-hero-stats span {
    min-height: 34px;
    padding: .38rem .58rem;
    font-size: .76rem;
  }

  .catalog-smart-panel {
    grid-template-columns: auto 1fr;
    gap: .42rem .5rem;
    max-width: 100%;
    padding: .52rem .58rem;
    border-radius: 16px;
    font-size: .76rem;
  }

  .catalog-smart-panel strong {
    font-size: .8rem;
  }

  .catalog-category-title {
    min-height: 30px;
    margin-bottom: .46rem;
    padding: .34rem .58rem;
    font-size: .74rem;
  }

  .catalog-commerce-strip {
    gap: .48rem;
    margin-top: .72rem;
    padding: .52rem;
    border-radius: 16px;
  }

  .catalog-commerce-brands img {
    width: 16px;
    height: 16px;
  }

  .catalog-commerce-brands span,
  .catalog-payment-row span,
  .catalog-payment-row strong {
    min-height: 28px;
    padding: .3rem .46rem;
    font-size: .7rem;
  }

  .catalog-hero-visual {
    display: none;
  }

  [data-catalog-chips].chips {
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    width: auto;
    border-inline: 0;
    border-radius: 0;
  }

  .catalog-category-nav-section [data-catalog-chips].chips {
    margin-inline: calc(var(--container-pad) * -1);
    padding: .05rem var(--container-pad);
    border: 0;
    box-shadow: none;
  }

  .catalog-nav-row [data-catalog-chips].chips {
    width: auto;
    margin-inline: 0;
    padding: .05rem max(var(--container-pad), 1.35rem) .05rem 0;
    scroll-padding-inline: max(var(--container-pad), 1.35rem);
  }

  .catalog-mobile-filter-panel .filters {
    max-height: min(72vh, 620px);
    border-radius: 20px;
  }

  .catalog-mobile-filter-actions .btn {
    width: 100%;
  }

  .section-tight:has([data-catalog-chips]) {
    top: calc(var(--header-height) + .35rem);
    padding-block: 0;
  }

  body:has(.site-header.is-hidden) .section-tight:has([data-catalog-chips]) {
    top: 0;
  }

  .catalog-toolbar {
    display: grid;
    gap: .65rem;
    min-height: 0;
    padding: .78rem;
    border-radius: 18px;
  }

  .catalog-toolbar-summary {
    display: grid;
    gap: .52rem;
  }

  .catalog-toolbar .catalog-hero-stats {
    display: flex;
    flex-wrap: nowrap;
    gap: .34rem;
    overflow-x: auto;
    padding-bottom: .05rem;
    scrollbar-width: none;
  }

  .catalog-toolbar .catalog-hero-stats::-webkit-scrollbar {
    display: none;
  }

  .catalog-toolbar .catalog-hero-stats span {
    flex: 0 0 auto;
    min-height: 30px;
    padding: .3rem .52rem;
    font-size: .7rem;
  }

  .catalog-toolbar .catalog-hero-stats strong {
    font-size: .84rem;
  }

  .catalog-toolbar label {
    justify-content: space-between;
    width: 100%;
  }

  .catalog-toolbar .select {
    width: min(58vw, 190px);
  }

  .filters {
    border-radius: 20px;
  }

  .filter-head h2 {
    font-size: 1rem;
  }

  .filter-group:not(.is-open) .filter-toggle {
    padding-block: .62rem;
  }

  .catalog-results .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .72rem;
  }

  .catalog-load-more {
    border-radius: 20px;
    padding: .85rem;
  }

  .section {
    padding: 1.8rem 0;
  }

  .section-tight {
    padding: 1rem 0;
  }

  .site-header .logo-img {
    height: 36px;
    margin-left: 0;
  }

  .header-inner {
    min-height: 64px;
  }

  .header-actions {
    gap: .45rem;
    margin-right: 0;
  }

  .header-actions [data-tooltip]::before,
  .header-actions [data-tooltip]::after {
    display: none;
  }

  .header-icon,
  .menu-toggle {
    min-width: 38px;
    height: 38px;
  }

  .hero h1 {
    font-size: clamp(2.65rem, 6vw, 5.25rem);
  }

  .hero p {
    margin: .95rem 0 1.25rem;
    font-size: .98rem;
  }

  .hero-note {
    width: 100%;
    font-size: .88rem;
  }

  .hero-visual img {
    min-height: 210px;
  }

  .section-head {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: .9rem;
  }

  .section-kicker {
    max-width: none;
  }

  .section-featured-collections {
    overflow: hidden;
  }

  .section-featured-collections .container {
    display: block;
  }

  .section-featured-collections .section-head {
    display: grid;
    gap: .75rem;
    margin-bottom: .85rem;
  }

  .section-featured-collections .section-title {
    max-width: 9ch;
    font-size: clamp(2.25rem, 12vw, 3.35rem);
    line-height: .9;
  }

  .section-featured-collections .section-kicker {
    max-width: 32ch;
    margin-top: .45rem;
    font-size: .95rem;
  }

  .section-featured-collections .link-arrow {
    min-height: 40px;
    padding: .58rem .82rem;
  }

  .section-featured-collections .section-head,
  .section-product-showcase .section-head {
    display: grid;
    justify-items: center;
    justify-content: center;
    text-align: center;
  }

  .section-featured-collections .section-head>div,
  .section-product-showcase .section-head>div {
    display: grid;
    justify-items: center;
  }

  .section-featured-collections .section-title,
  .section-product-showcase .section-title {
    margin-inline: auto;
  }

  .section-featured-collections .section-kicker,
  .section-product-showcase .section-kicker {
    max-width: 34ch;
    margin-inline: auto;
  }

  .section-featured-collections .link-arrow,
  .section-product-showcase .link-arrow {
    justify-self: center;
  }

  .collection-grid-featured {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(238px, 78vw);
    gap: .85rem;
    width: calc(100% + var(--container-pad));
    margin-right: calc(var(--container-pad) * -1);
    overflow-x: auto;
    overflow-y: hidden;
    padding: .05rem var(--container-pad) .35rem 0;
    scroll-snap-type: x proximity;
    scrollbar-width: none;

    overscroll-behavior-x: contain;
  }

  .collection-grid-featured::-webkit-scrollbar {
    display: none;
  }

  .collection-grid-featured .collection-card-editorial,
  .collection-grid-featured .collection-card-editorial:nth-child(1),
  .collection-grid-featured .collection-card-editorial:nth-child(2),
  .collection-grid-featured .collection-card-editorial:nth-child(3),
  .collection-grid-featured .collection-card-editorial:nth-child(4),
  .collection-grid-featured .collection-card-editorial:nth-child(5),
  .collection-grid-featured .collection-card-editorial:nth-child(6),
  .collection-grid-featured .collection-card-editorial:nth-child(7),
  .collection-grid-featured .collection-card-editorial:nth-child(8) {
    grid-column: auto;
    grid-row: auto;
    min-height: 348px;
    scroll-snap-align: start;
  }

  .loyalty-corner-mark-top {
    top: 1rem;
    right: 1rem;
  }

  .loyalty-corner-mark-bottom {
    display: none;
  }

  .loyalty-copy-mark {
    right: 1rem;
    bottom: 1rem;
    width: 150px;
  }

  .loyalty-copy {
    justify-items: center;
    text-align: center;
  }

  .loyalty-kicker {
    justify-self: center;
    font-size: .84rem;
  }

  .loyalty-panel h1 {
    width: 100%;
    margin-bottom: .75rem;
    font-size: clamp(2.18rem, 10.6vw, 2.85rem);
    line-height: 1.08;
  }

  .loyalty-lead {
    max-width: 23rem;
    margin-inline: auto;
    margin-bottom: .7rem;
    line-height: 1.48;
  }

  .loyalty-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100%, 350px);
    justify-self: center;
    gap: .65rem;
    margin-top: .95rem;
  }

  .loyalty-how-grid {
    grid-template-columns: 1fr;
  }

  .loyalty-steps-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
  }

  .loyalty-mini-grid {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin: .25rem 0 0;
  }

  .loyalty-stage {
    min-height: auto;
    padding: 0 0 .55rem;
  }

  .loyalty-points-card {
    width: min(100%, 280px);
    min-height: 156px;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: .65rem;
    padding: 1rem;
    justify-self: center;
    margin: 1.05rem auto 0;
  }

  .loyalty-points-copy {
    align-content: center;
    gap: .32rem;
    padding: 0;
  }

  .loyalty-points-label {
    font-size: 1.14rem;
  }

  .loyalty-points-card p {
    font-size: .94rem;
  }

  .loyalty-points-ring {
    width: 96px;
    border-width: 7px;
  }

  .loyalty-points-ring strong {
    font-size: 2.08rem;
  }

  .loyalty-points-ring span {
    font-size: .76rem;
  }

  .loyalty-points-isotipo {
    right: .85rem;
    bottom: .5rem;
    width: 24px;
    height: 24px;
  }

  .loyalty-stage > img {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(132vw, 540px);
    max-height: 440px;
    margin-top: .55rem;
    transform: none;
  }

  .loyalty-mini-grid span,
  .loyalty-steps-row span {
    min-height: 70px;
    border-radius: 18px;
    padding: .58rem .42rem;
    font-size: clamp(.68rem, 2.8vw, .78rem);
  }

  .loyalty-steps-row b {
    width: 26px;
    height: 26px;
  }

  .loyalty-mini-grid .icon {
    width: 19px;
    height: 19px;
  }

  .loyalty-bullet {
    gap: .75rem;
  }

  .loyalty-bullet p {
    font-size: .92rem;
  }

  .loyalty-status-card {
    padding: 1.25rem;
  }

  .product-summary-card {
    display: grid;
    padding: 1rem;
    border-radius: 20px;
  }

  .qty-stock,
  .product-actions .product-secondary-actions {
    grid-template-columns: 1fr;
  }

  .qty-stock {
    display: contents;
  }

  .qty-stock > div:first-child {
    order: 0;
    margin-bottom: .25rem;
    justify-items: center;
    text-align: center;
  }

  .qty-stock > .stock {
    order: 2;
    margin-top: .25rem;
  }

  .product-actions {
    order: 1;
  }

  .qty {
    margin-inline: auto;
  }

  .share-btn {
    width: 100%;
  }

  .product-info-head,
  .product-info-card {
    border-radius: 18px;
  }

  .product-info-head {
    padding-right: 4.8rem;
  }

  .product-info-head-isotipo {
    right: .9rem;
    width: 52px;
    opacity: .14;
  }

  .product-spec-grid div {
    grid-template-columns: 1fr;
    gap: .2rem;
  }

  .loyalty-progress-meta,
  .loyalty-status-foot {
    gap: .6rem;
  }

  .loyalty-status-top,
  .loyalty-status-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .loyalty-progress-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .loyalty-action {
    font-size: .8rem;
  }

  .chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: .2rem;
    padding-inline: .1rem;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .chips::-webkit-scrollbar {
    display: none;
  }

  .chip {
    flex: 0 0 auto;
    min-height: 42px;
    padding-inline: 1rem;
  }

  .page-title {
    font-size: clamp(2.1rem, 10vw, 3rem);
  }

  .page-hero-categories {
    padding-top: .45rem;
  }

  .category-hero-layout {
    gap: .85rem;
  }

  .catalog-hero-visual {
    padding: 1.05rem;
    border-radius: 22px;
  }

  .button-row,
  .product-actions .button-row,
  .inline-form {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .hero-split .hero-inner {
    gap: 0;
    min-height: clamp(650px, 96svh, 760px);
    padding-bottom: 0;
  }

  .hero-split .hero-visual {
    min-height: clamp(650px, 100svh, 760px);
    aspect-ratio: auto;
  }

  .hero-split .hero-visual::after {
    background:
      linear-gradient(90deg, rgb(3 16 32 / 3%) 0%, rgb(3 16 32 / 10%) 34%, rgb(3 16 32 / 0%) 68%),
      linear-gradient(180deg, rgb(3 16 32 / 0%) 0%, rgb(3 16 32 / 9%) 34%, rgb(3 16 32 / 68%) 100%);
  }

  /* Phone carousel controls. Tweak these values first when a mobile crop needs adjustment. */
  .hero-split .hero-media-slide {
    --hero-slide-fit: cover;
    --hero-slide-x: 50%;
    --hero-slide-y: 50%;
    --hero-slide-active-scale: 1.03;
    --hero-slide-idle-scale: 1.055;
    --hero-slide-exit-scale: 1.04;
    --hero-slide-enter-scale: 1.075;
  }

  .hero-split .hero-media-slide:nth-child(1) {
    --hero-slide-x: 54%;
    --hero-slide-y: 50%;
    --hero-slide-active-scale: 1.07;
    --hero-slide-idle-scale: 1.095;
    --hero-slide-exit-scale: 1.08;
    --hero-slide-enter-scale: 1.11;
    --hero-slide-shift-y: 75px;
  }

  .hero-split .hero-media-slide:nth-child(2) {
    --hero-slide-x: 50%;
    --hero-slide-y: 50%;
    --hero-slide-active-scale: 1.055;
    --hero-slide-idle-scale: 1.08;
    --hero-slide-exit-scale: 1.065;
    --hero-slide-enter-scale: 1.095;
    --hero-slide-shift-y: 50px;
  }

  .hero-split .hero-media-slide:nth-child(3) {
    --hero-slide-x: 49%;
    --hero-slide-y: 50%;
    --hero-slide-active-scale: 1.075;
    --hero-slide-idle-scale: 1.1;
    --hero-slide-exit-scale: 1.085;
    --hero-slide-enter-scale: 1.115;
    --hero-slide-shift-y: 73px;
  }

  .hero-split .hero-media-slide:nth-child(4) {
    --hero-slide-x: 48%;
    --hero-slide-y: 50%;
    --hero-slide-active-scale: 1.075;
    --hero-slide-idle-scale: 1.1;
    --hero-slide-exit-scale: 1.085;
    --hero-slide-enter-scale: 1.115;
    --hero-slide-shift-y: 78px;
  }

  .hero-split .hero-media-slide:nth-child(5) {
    --hero-slide-x: 50%;
    --hero-slide-y: 50%;
    --hero-slide-active-scale: 1.06;
    --hero-slide-idle-scale: 1.085;
    --hero-slide-exit-scale: 1.07;
    --hero-slide-enter-scale: 1.1;
    --hero-slide-shift-y: 85px;
  }

  .hero-split .hero-media-slide:nth-child(6) {
    --hero-slide-x: 48%;
    --hero-slide-y: 50%;
    --hero-slide-active-scale: 1.11;
    --hero-slide-idle-scale: 1.135;
    --hero-slide-exit-scale: 1.12;
    --hero-slide-enter-scale: 1.15;
    --hero-slide-shift-y: 96px;
  }

  .hero-split .hero-media-slide:nth-child(7) {
    --hero-slide-x: 50%;
    --hero-slide-y: 50%;
    --hero-slide-active-scale: 1.075;
    --hero-slide-idle-scale: 1.1;
    --hero-slide-exit-scale: 1.085;
    --hero-slide-enter-scale: 1.115;
    --hero-slide-shift-y: 82px;
  }

  .hero-split .hero-copy h1 {
    max-width: 12.8ch;
    font-size: clamp(2.35rem, 10.2vw, 3.05rem);
    line-height: .92;
    margin-inline: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    text-shadow: 0 -1px 0 rgb(255 255 255 / 96%),
      0 5px 7px rgb(14 24 41 / 35%), 0 2px 6px rgb(15 33 95 / 80%);
  }

  .hero-split .button-row {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    max-width: min(100%, 23rem);
    margin-top: .78rem;
  }

  .hero-split .button-row .btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 48px;
    padding: .72rem .78rem;
    font-size: clamp(.78rem, 3.35vw, .9rem);
    white-space: nowrap;
  }

  .hero-split .button-row .icon {
    width: 18px;
    height: 18px;
  }

  .hero-split .landing-hero-note-row {
    position: absolute;
    right: var(--container-pad);
    bottom: clamp(4.1rem, 4vw, 1.7rem);
    left: var(--container-pad);
    justify-content: center;
    width: fit-content;
    max-width: min(100%, 25rem);
    margin-top: 0;
    margin-inline: auto;
    gap: .42rem;
  }

  .hero-split .landing-hero-note-row .hero-note {
    padding: .58rem .85rem;
    font-size: .88rem;
    white-space: nowrap;
  }

  .hero-split .landing-hero-copy {
    --hero-copy-padding:
      calc(var(--header-height) + 2rem) var(--container-pad) clamp(7.8rem, 17vw, 6.5rem);
    --landing-isotype-width: clamp(1.85rem, 8vw, 2rem);
    --landing-isotype-margin: 0;
    --landing-isotype-opacity: .86;
  }

  .hero-split .hero-note .dot {
    margin-left: 0;
  }

  .btn {
    width: 100%;
  }

  .trust-strip {
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;

    padding: .42rem;
  }

  .trust-strip::-webkit-scrollbar {
    display: none;
  }

  .trust-item {
    flex: 0 0 min(78vw, 300px);
    scroll-snap-align: start;
    padding: .82rem .9rem;
  }

  .trust-item+.trust-item {
    border-top: 0;
    border-left: 0;
  }

  .reorder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .more-card {
    min-height: 190px;
  }

  .offer-card {
    min-height: 250px;
  }

  .offer-card-content {
    padding: 1rem;
  }

  .offer-card h3 {
    font-size: 1.35rem;
  }

  .offer-card p {
    font-size: .94rem;
    line-height: 1.45;
  }

  .offer-card .btn {
    min-height: 42px;
    padding: .65rem .85rem;
    font-size: .85rem;
  }

  .offer-card-visual img {
    min-height: 250px;
  }

  .editorial-banner-media {
    height: clamp(190px, 62vw, 300px);
  }

  .reason-grid,
  .review-grid,
  .stats-strip,
  .support-grid,
  .contact-grid,
  .promise-grid,
  .app-widget-grid,
  .app-operational-grid,
  .collection-grid,
  .benefits-strip {
    grid-template-columns: 1fr;
  }

  .collection-grid-featured {
    grid-auto-rows: auto;
  }

  .collection-grid-featured .collection-card-editorial:nth-child(1),
  .collection-grid-featured .collection-card-editorial:nth-child(6) {
    grid-column: span 1;
    grid-row: span 1;
    min-height: 250px;
  }

  .collection-grid-featured .collection-card-editorial:nth-child(4) .collection-card-content,
  .collection-grid-featured .collection-card-editorial:nth-child(8) .collection-card-content {
    justify-items: start;
    text-align: left;
  }

  .collection-grid-featured .collection-card-editorial:nth-child(4) .mini-btn,
  .collection-grid-featured .collection-card-editorial:nth-child(8) .mini-btn {
    justify-self: start;
  }

  .collection-grid-featured .collection-card-editorial:nth-child(4) .collection-card-note,
  .collection-grid-featured .collection-card-editorial:nth-child(8) .collection-card-note {
    margin-left: 0;
  }

  .section-featured-collections .collection-grid-featured {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(238px, 78vw);
    grid-auto-rows: 348px;
  }

  .section-featured-collections .collection-grid-featured .collection-card-editorial,
  .section-featured-collections .collection-grid-featured .collection-card-editorial:nth-child(1),
  .section-featured-collections .collection-grid-featured .collection-card-editorial:nth-child(2),
  .section-featured-collections .collection-grid-featured .collection-card-editorial:nth-child(3),
  .section-featured-collections .collection-grid-featured .collection-card-editorial:nth-child(4),
  .section-featured-collections .collection-grid-featured .collection-card-editorial:nth-child(5),
  .section-featured-collections .collection-grid-featured .collection-card-editorial:nth-child(6),
  .section-featured-collections .collection-grid-featured .collection-card-editorial:nth-child(7),
  .section-featured-collections .collection-grid-featured .collection-card-editorial:nth-child(8) {
    grid-column: auto;
    grid-row: auto;
    min-height: 348px;
  }

  .product-grid,
  .product-grid.featured {
    gap: .75rem;
  }

  .product-card {
    padding: .55rem;
  }

  .catalog-results .product-card {
    --catalog-card-badge-top: .42rem;
    --catalog-card-badge-left: .42rem;
    --catalog-card-badge-right: 3.12rem;
    --catalog-card-badge-stack-max: calc(100% - 3.54rem);
    --catalog-card-fav-top: .4rem;
    --catalog-card-fav-right: .4rem;
  }

  .section-product-showcase .product-card {
    --featured-card-badge-top: .42rem;
    --featured-card-badge-left: .42rem;
    --featured-card-badge-right: 3.12rem;
    --featured-card-fav-top: .4rem;
    --featured-card-fav-right: .4rem;
  }

  .product-title {
    min-height: auto;
    font-size: .84rem;
  }

  .rating {
    font-size: .72rem;
  }

  .stat-item {
    justify-content: flex-start;
    padding: 1rem;
  }

  .cta-dark {
    gap: 1rem;
  }

  .cta-dark-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .cta-dark .isotipo {
    width: clamp(58px, 18vw, 76px);
    height: clamp(58px, 18vw, 76px);
  }

  .cta-dark .button-whatsapp {
    width: 100%;
    min-width: 0;
  }

  .footer-panel,
  .form-grid.two,
  .form-grid.three,
  .reviews-summary {
    grid-template-columns: 1fr;
  }

  .footer-panel {
    border-radius: 24px;
  }

  .footer-links,
  .footer-contact-card {
    grid-column: auto;
    grid-row: auto;
  }

  .footer-links {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .footer-contact-card strong {
    max-width: 16ch;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .checkout-layout {
    padding-top: 1.4rem;
  }

  .summary-item {
    grid-template-columns: 64px minmax(0, 1fr);
    padding: .75rem;
  }

  .summary-thumb {
    width: 64px;
    height: 64px;
  }

  .summary-product-actions {
    align-items: center;
    flex-direction: row;
    gap: .45rem;
  }

  .cart-line-controls {
    justify-self: start;
    grid-template-columns: 28px 34px 28px auto;
    gap: .22rem;
    border-radius: 999px;
  }

  .cart-line-controls button,
  .cart-line-qty {
    min-width: 28px;
    height: 30px;
  }

  .cart-line-qty {
    width: 34px;
  }

  .cart-line-remove {
    grid-column: auto;
    width: auto;
    padding: 0 .55rem;
  }

  .summary-item .summary-price {
    grid-column: auto;
    margin-left: 0;
  }
}

@media (max-width: 420px) {
  .hero-split .landing-hero-copy {
    --landing-hero-copy-y-active: var(--landing-hero-copy-y-phone);
  }

  .editorial-banner-flag-co {
    width: calc(clamp(23px, 8vw, 30px) * 1.42);
    height: clamp(23px, 8vw, 30px);
  }

  .editorial-banner-logo {
    width: auto;
    height: calc(clamp(23px, 8vw, 30px) * 1.28);
  }

  :root {
    --container-pad: .78rem;
  }

  .hero-inner {
    padding: 1.35rem 0 2rem;
  }


  .hero h1 {
    font-size: clamp(2rem, 10.8vw, 2.85rem);
  }

  .footer-links,
  .footer-promise-row {
    grid-template-columns: 1fr;
  }

  .product-grid,
  .product-grid.featured {
    grid-template-columns: 1fr 1fr;
  }

  .product-card {
    gap: .6rem;
  }

  .price {
    font-size: 1rem;
  }

  .add-btn {
    min-height: 40px;
    font-size: .81rem;
  }
}

@media (max-width: 380px) {
  .hero-split .landing-hero-copy {
    --landing-hero-copy-y-active: var(--landing-hero-copy-y-small);
  }

  .editorial-banner-flag-co {
    width: calc(clamp(22px, 8.4vw, 28px) * 1.42);
    height: clamp(22px, 8.4vw, 28px);
  }

  .editorial-banner-logo {
    width: auto;
    height: calc(clamp(22px, 8.4vw, 28px) * 1.28);
  }

  :root {
    --container-pad: .62rem;
  }

  .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .35rem;
  }

  .logo-link {
    grid-column: 2;
    padding: .18rem .1rem;
    min-width: 0;
  }

  .site-header .logo-img {
    width: min(88px, 34vw);
    height: auto;
  }

  .header-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 34px;
    align-items: center;
    justify-content: end;
    gap: .3rem;
    margin-right: 0;
  }

  .header-icon,
  .menu-toggle {
    min-width: 34px;
    width: 34px;
    height: 34px;
  }

  .header-icon .icon,
  .menu-toggle .icon {
    width: 20px;
    height: 20px;
  }

  .trust-item {
    flex-basis: 84%;
  }
}

@media (max-width: 320px) {
  .hero-split .landing-hero-copy {
    --landing-hero-copy-y-active: var(--landing-hero-copy-y-mini);
  }

  :root {
    --container-pad: .5rem;
  }

  .header-inner {
    gap: .28rem;
  }

  .site-header .logo-img {
    width: min(80px, 33vw);
  }

  .header-actions {
    grid-auto-columns: 32px;
    gap: .22rem;
  }

  .header-icon,
  .menu-toggle {
    min-width: 32px;
    width: 32px;
    height: 32px;
  }

  .header-icon .icon,
  .menu-toggle .icon {
    width: 18px;
    height: 18px;
  }
}

.mobile-menu {
  position: fixed;
  inset: var(--header-height) 0 0;
  z-index: 1;
  pointer-events: none;
}

.mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  border: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .58), transparent 42%),
    linear-gradient(180deg, rgba(246, 250, 255, .52), rgba(9, 26, 48, .30));
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  opacity: 0;
  transition:
    opacity 260ms ease,
    backdrop-filter 300ms ease,
    background 300ms ease;
}

.mobile-menu-panel {
  position: absolute;
  top: clamp(.7rem, 2.6svh, 1.15rem);
  left: var(--container-pad);
  width: min(410px, calc(100vw - (var(--container-pad) * 2)));
  max-height: calc(100svh - var(--header-height) - 1.5rem);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: .72rem;
  overflow: hidden auto;
  overscroll-behavior: contain;
  padding: 1rem;
  border: 1px solid rgba(221, 227, 234, .86);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0 0, rgba(11, 85, 244, .08), transparent 12rem),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .94));
  box-shadow:
    0 28px 70px rgba(7, 28, 44, .20),
    inset 0 1px 0 rgba(255, 255, 255, .96);
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  transform: translate3d(-.8rem, -.2rem, 0) scale(.985);
  opacity: 0;
  transition:
    transform 320ms cubic-bezier(.16, 1, .3, 1),
    opacity 220ms ease,
    box-shadow 320ms ease;
  will-change: transform, opacity;
}

.site-header.is-menu-open .mobile-menu {
  pointer-events: auto;
}

.site-header.is-menu-open .mobile-menu-backdrop {
  opacity: 1;
  backdrop-filter: blur(30px) saturate(180%) contrast(.96);
  -webkit-backdrop-filter: blur(30px) saturate(180%) contrast(.96);
}

.site-header.is-menu-open .mobile-menu-panel {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  box-shadow:
    0 34px 86px rgba(7, 28, 44, .24),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.site-header.is-menu-open .menu-toggle {
  opacity: .72;
  transform: none;
  pointer-events: none;
}

.site-header.is-menu-open .menu-toggle span:nth-child(1),
.site-header.is-menu-open .menu-toggle span:nth-child(2),
.site-header.is-menu-open .menu-toggle span:nth-child(3) {
  opacity: 1;
  transform: none;
}

.mobile-menu-account {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .72rem .78rem;
  border: 1px solid rgba(221, 227, 234, .82);
  border-radius: 16px;
  background: rgba(255, 255, 255, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
  margin-bottom: .1rem;
}

.mobile-menu-account .account-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}

.mobile-menu-account-info {
  display: grid;
  gap: .05rem;
}

.mobile-menu-account-info strong {
  font-size: .92rem;
  font-weight: 750;
  color: var(--color-navy);
}

.mobile-menu-account-info span {
  font-size: .78rem;
  color: var(--color-text-muted);
}

.mobile-menu-head {
  display: grid;
  gap: .28rem;
  padding: .2rem 3rem .8rem .15rem;
  border-bottom: 1px solid rgba(221, 227, 234, .78);
}

.mobile-menu-close {
  position: absolute;
  top: .9rem;
  right: .9rem;
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(221, 227, 234, .74);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(245, 248, 255, .78));
  color: var(--color-navy);
  box-shadow: 0 10px 24px rgba(7, 28, 44, .08);
  transition:
    transform 220ms cubic-bezier(.22, 1, .36, 1),
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms ease;
}

.mobile-menu-close:hover,
.mobile-menu-close:focus-visible {
  transform: rotate(90deg) scale(1.04);
  background: var(--color-primary-blue-soft);
  border-color: rgba(11, 85, 244, .22);
  box-shadow: 0 14px 30px rgba(11, 85, 244, .14);
}

.mobile-menu-close span {
  position: absolute;
  width: 17px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.mobile-menu-close span:first-child {
  transform: rotate(45deg);
}

.mobile-menu-close span:last-child {
  transform: rotate(-45deg);
}

.mobile-menu-logo {
  width: min(172px, 58vw);
  height: auto;
}

.mobile-menu-head span {
  color: var(--color-text-muted);
  font-size: .84rem;
  font-weight: 750;
  line-height: 1.35;
}

.mobile-menu nav {
  display: grid;
  align-content: start;
  gap: .42rem;
}

.mobile-menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 50px;
  padding: .85rem .95rem;
  border: 1px solid rgba(221, 227, 234, .72);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
  font-weight: 820;
  color: var(--color-navy);
  transform: translateX(.45rem);
  opacity: 0;
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform 260ms ease, opacity 260ms ease, box-shadow var(--ease);
}

.mobile-menu nav a::after {
  content: '›';
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--color-primary-blue-soft);
  color: var(--color-primary-blue);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.site-header.is-menu-open .mobile-menu nav a {
  transform: translateX(0);
  opacity: 1;
}

.site-header.is-menu-open .mobile-menu nav a:nth-child(1) {
  transition-delay: 70ms;
}

.site-header.is-menu-open .mobile-menu nav a:nth-child(2) {
  transition-delay: 90ms;
}

.site-header.is-menu-open .mobile-menu nav a:nth-child(3) {
  transition-delay: 100ms;
}

.site-header.is-menu-open .mobile-menu nav a:nth-child(4) {
  transition-delay: 130ms;
}

.site-header.is-menu-open .mobile-menu nav a:nth-child(5) {
  transition-delay: 160ms;
}

.mobile-menu nav a.is-active,
.mobile-menu nav a:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(234, 241, 255, .84));
  border-color: rgba(11, 85, 244, .22);
  color: var(--color-primary-blue);
  box-shadow:
    0 10px 22px rgba(11, 85, 244, .10),
    inset 0 1px 0 rgba(255, 255, 255, .92);
}

.mobile-menu-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .32), transparent 34%),
    linear-gradient(135deg, #21d36d, #11964b);
  color: white;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(29, 190, 97, .24);
}

.mobile-menu-whatsapp .icon {
  width: 20px;
  height: 20px;
}

body.is-drawer-open {
  overflow: hidden;
}

body.is-drawer-open #app {
  filter: blur(7px) saturate(.82) contrast(.94);
  transform: scale(.996);
  transition:
    filter 260ms ease,
    transform 320ms cubic-bezier(.16, 1, .3, 1);
  transform-origin: center top;
}

#app {
  transition:
    filter 220ms ease,
    transform 280ms cubic-bezier(.16, 1, .3, 1);
}

/* Categories page v2: fast mobile-first discovery flow */
.category-quick-nav-section {
  position: relative;
  z-index: 8;
  padding: .72rem 0 .62rem;
  border-bottom: 1px solid rgba(11, 85, 244, .10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .96));
  box-shadow: 0 12px 28px rgba(7, 28, 44, .045);
}

.category-quick-nav-section .container {
  display: grid;
  gap: .5rem;
}

.category-quick-nav-section .category-quick-rail {
  justify-content: center;
  flex-wrap: nowrap;
  margin-top: 0;
  padding: .05rem 0;
  overflow-x: auto;
  overflow-y: visible;

}

.category-top-breadcrumb {
  justify-self: start;
  margin: 0;
  color: var(--color-text-soft);
  font-size: .78rem;
}

.page-hero-categories {
  padding: clamp(.9rem, 2.4vw, 1.8rem) 0 clamp(1rem, 2.8vw, 1.8rem);
  background:
    radial-gradient(circle at 86% 14%, rgba(11, 85, 244, .14), transparent 23rem),
    linear-gradient(180deg, #ffffff 0%, #f7faff 58%, var(--color-bg-warm) 100%);
}

/* ============================================
   CATEGORIES PAGE
   ============================================ */
.categories-hero-shell {
  display: grid;
  grid-template-columns: minmax(280px, .76fr) minmax(460px, .92fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.page-hero-categories .category-hero-copy {
  max-width: 35rem;
}

.page-hero-categories .page-title {
  max-width: 12ch;
  color: var(--color-primary-blue);
  font-size: clamp(2.45rem, 5.35vw, 6.35rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.page-hero-categories .page-intro {
  max-width: 43ch;
  margin-top: .8rem;
  color: rgba(16, 24, 40, .78);
  font-size: clamp(1rem, 1.35vw, 5.22rem);
  font-weight: 650;
  line-height: 1.42;
}

.categories-hero-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 8.6;
  min-height: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 78% 14%, rgba(252, 209, 22, .34), transparent 12rem),
    linear-gradient(135deg, rgba(11, 85, 244, .12), rgba(255, 255, 255, .96) 54%);
  border: 1px solid rgba(11, 85, 244, .12);
  box-shadow: 0 18px 44px rgba(7, 28, 44, .08);
}

.categories-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
}

.categories-hero-stats {
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .85rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.categories-hero-stats span {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  min-height: 32px;
  padding: .42rem .62rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  color: var(--color-navy);
  font-size: .78rem;
  font-weight: 850;
  backdrop-filter: blur(12px);
}

.categories-hero-stats strong {
  color: var(--color-primary-blue);
}

.category-quick-rail {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: clamp(1rem, 2.2vw, 1.45rem);
  overflow-x: visible;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.category-quick-rail::-webkit-scrollbar {
  display: none;
}

.category-quick-link {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  min-height: 46px;
  padding: .52rem .62rem .52rem .56rem;
  border: 1px solid rgba(11, 85, 244, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: var(--color-navy);
  font-size: clamp(.86rem, .96vw, 1rem);
  font-weight: 850;
  box-shadow: 0 10px 24px rgba(7, 28, 44, .05);
  transition: transform var(--ease), border-color var(--ease), background var(--ease);
}

.category-quick-link:hover {
  transform: translateY(-2px);
  border-color: rgba(11, 85, 244, .28);
  background: #fff;
}

.category-quick-link .icon {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  min-width: 17px;
  color: var(--color-primary-blue);
}

.category-quick-link small {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--color-primary-blue-soft);
  color: var(--color-primary-blue);
  font-size: .74rem;
  font-weight: 900;
}

.category-quick-link.is-accent small {
  background: var(--color-yellow);
  color: var(--color-navy);
}

.category-context-section {
  margin-top: 0;
  border-top: 1px solid rgba(11, 85, 244, .08);
  border-bottom: 1px solid rgba(11, 85, 244, .08);
}

.category-guide-strip {
  overflow: hidden;
  padding: clamp(1rem, 2.6vw, 1.65rem) 0;
  background:
    radial-gradient(circle at 8% 10%, rgba(252, 209, 22, .38), transparent 18rem),
    linear-gradient(135deg, #073fb8 0%, var(--color-primary-blue) 54%, #0748d8 100%);
  color: #fff;
}

.category-guide-strip .container {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.category-guide-copy {
  display: grid;
  gap: .55rem;
}

.category-guide-copy .eyebrow {
  justify-self: start;
  color: var(--color-primary-blue);
}

.category-guide-copy h2 {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-title);
  font-size: clamp(1.75rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.category-guide-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}

.category-guide-steps>div {
  display: grid;
  gap: .28rem;
  min-height: 112px;
  padding: .9rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 18px;
  background: rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.category-guide-steps strong {
  color: var(--color-yellow);
  font-family: var(--font-title);
  font-size: 1.35rem;
  line-height: 1;
}

.category-guide-steps span {
  color: rgba(255, 255, 255, .9);
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.35;
}

.section-category-directory {
  padding-top: clamp(1.15rem, 3vw, 2rem);
}

.section-category-directory .section-head {
  align-items: end;
  margin-bottom: clamp(.9rem, 2vw, 1.25rem);
}

.category-directory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}

.category-directory-carousel {
  position: relative;
}

.category-directory-nav {
  position: absolute;
  top: 50%;
  z-index: 8;
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(11, 85, 244, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--color-primary-blue);
  box-shadow: 0 16px 34px rgba(7, 28, 44, .14);
  transform: translateY(-50%);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.category-directory-nav .icon {
  width: 19px;
  height: 19px;
  stroke-width: 2.55;
}

.category-directory-nav-prev {
  left: .35rem;
}

.category-directory-nav-next {
  right: .35rem;
}

.category-directory-carousel.is-scrollable .category-directory-nav {
  display: grid;
}

.category-directory-nav:hover:not(:disabled),
.category-directory-nav:focus-visible:not(:disabled) {
  box-shadow: 0 18px 38px rgba(7, 28, 44, .18);
  transform: translateY(-50%) scale(1.04);
}

.category-directory-nav:disabled {
  opacity: 0;
  pointer-events: none;
}

.category-directory-card,
.category-directory-grid .category-directory-card:nth-child(n) {
  --category-tint: rgba(11, 85, 244, .12);
  --category-outline: rgba(11, 85, 244, .16);
  position: relative;
  display: grid;
  align-content: end;
  grid-column: auto;
  grid-row: auto;
  min-height: clamp(245px, 22vw, 315px);
  padding: 1rem;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .08);
  border-radius: 22px;
  clip-path: none;
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .88), transparent 28%),
    linear-gradient(145deg, var(--category-tint), rgba(255, 255, 255, .14) 48%, rgba(7, 28, 44, .22) 100%);
  box-shadow: 0 16px 36px rgba(7, 28, 44, .07);
  isolation: isolate;
}

.category-directory-card::before {
  display: none;
}

.category-directory-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(7, 28, 44, .06) 0%, rgba(7, 28, 44, .16) 42%, rgba(7, 28, 44, .82) 100%),
    linear-gradient(90deg, rgba(7, 28, 44, .42), transparent 62%);
  pointer-events: none;
}

.category-directory-card:hover {
  transform: translateY(-4px);
  border-color: var(--category-outline);
  box-shadow: 0 22px 48px rgba(7, 28, 44, .12);
}

.category-directory-card img,
.category-directory-grid .category-directory-card:nth-child(n) img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.02);
  transform: scale(1.01);
  transition: transform 460ms cubic-bezier(.16, 1, .3, 1), filter 460ms ease;
}

.category-directory-card:hover img {
  filter: saturate(1.1) contrast(1.04);
  transform: scale(1.055);
}

.category-directory-meta {
  position: absolute;
  inset: .85rem .85rem auto;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
}

.category-directory-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 34px;
  padding: .42rem .68rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--color-primary-blue);
  font-size: .78rem;
  font-weight: 900;
  backdrop-filter: blur(12px);
}

.category-directory-chip .icon {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  min-width: 17px;
  display: block;
  stroke-width: 2.15;
}

.category-directory-index {
  position: relative;
  min-width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  font-family: var(--font-title);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: #ffffff;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.308);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.123), 0 10px 24px rgba(7, 28, 44, .12);
  backdrop-filter: blur(14px) saturate(145%);
}

.category-directory-content,
.category-directory-grid .category-directory-card:nth-child(n) .category-directory-content {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 4;
  display: grid;
  gap: .42rem;
  max-width: min(17rem, 82%);
  color: white;
}

.category-directory-content h3,
.category-directory-grid .category-directory-card:nth-child(1) .category-directory-content h3 {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(1.32rem, 1.8vw, 1.8rem);
  line-height: .98;
  letter-spacing: -.045em;
  text-shadow:
    0 2px 4px rgba(7, 28, 44, .68),
    0 10px 24px rgba(7, 28, 44, .42),
    0 1px 0 rgba(7, 28, 44, .32);
}

.category-directory-content p {
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: .9rem;
  line-height: 1.35;
  text-shadow:
    0 1px 3px rgba(7, 28, 44, .72),
    0 8px 18px rgba(7, 28, 44, .38);
}

.category-directory-footer {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  margin-top: .85rem;
  min-height: 38px;
}

.category-directory-footer .mini-btn {
  padding: .46rem .62rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: .76rem;
  font-weight: 900;
}

.category-directory-link {
  color: rgba(255, 255, 255, .94);
  font-size: .84rem;
  font-weight: 900;
}

.category-bottom-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  padding: 1rem;
  border: 1px solid rgba(11, 85, 244, .12);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 20%, rgba(252, 209, 22, .18), transparent 12rem),
    linear-gradient(135deg, #fff, #f5f8ff);
  box-shadow: 0 14px 32px rgba(7, 28, 44, .06);
}

.category-bottom-note strong {
  display: block;
  margin-bottom: .22rem;
  color: var(--color-navy);
  font-family: var(--font-title);
  font-size: 1.1rem;
}

.category-bottom-note p {
  margin: 0;
  max-width: 62ch;
  color: var(--color-text-muted);
}

@media (max-width: 960px) {
  .categories-hero-shell {
    grid-template-columns: 1fr;
    gap: .95rem;
  }

  .page-hero-categories .category-hero-copy {
    display: grid;
    justify-items: center;
    max-width: none;
    text-align: center;
  }

  .page-hero-categories .category-hero-copy>.breadcrumb,
  .page-hero-categories .category-hero-copy>.page-title,
  .page-hero-categories .category-hero-copy>.coral-line,
  .page-hero-categories .category-hero-copy>.page-intro {
    margin-left: auto;
    margin-right: auto;
  }

  .page-hero-categories .page-title {
    max-width: 12.5ch;
    font-size: clamp(2.65rem, 7vw, 3.35rem);
  }

  .page-hero-categories .page-intro {
    max-width: 31ch;
  }

  .categories-hero-media {
    order: -1;
    aspect-ratio: 16 / 6.2;
    min-height: 230px;
    max-height: 290px;
  }

  .categories-hero-media img {
    object-position: center;
  }

  .category-quick-rail {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .category-quick-nav-section .category-quick-rail {
    justify-content: flex-start;
  }

  .category-guide-strip .container {
    grid-template-columns: 1fr;
  }

  .category-guide-copy h2 {
    max-width: none;
  }

  .category-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .category-directory-carousel {
    margin-inline: calc(var(--container-pad) * -1);
  }

  .category-directory-grid {
    display: flex;
    gap: .9rem;
    padding: .45rem var(--container-pad) 1rem;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--container-pad);
    scroll-snap-type: x proximity;
    scrollbar-width: none;

  }

  .category-directory-grid.is-dragging {
    cursor: grabbing;
    user-select: none;
  }

  .category-directory-grid.is-dragging .category-directory-card {
    pointer-events: none;
  }

  .category-directory-grid::-webkit-scrollbar {
    display: none;
  }

  .category-directory-card,
  .category-directory-grid .category-directory-card:nth-child(n) {
    flex: 0 0 clamp(270px, 34vw, 360px);
    min-height: clamp(258px, 30vw, 315px);
    border-radius: 24px;
    clip-path: none;
    scroll-snap-align: start;
    transform: none;
  }

  .category-directory-grid .category-directory-card.scale-reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 680px) {
  .collection-card-note {
    min-height: 4.1rem;
    padding: .72rem .82rem .82rem;
    font-size: .94rem;
    line-height: 1.32;
  }

  .collection-card-note-dot {
    margin-top: .26rem;
  }

  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-nav {
    position: static;
    grid-template-columns: 1fr 1fr;
  }

  .legal-nav a {
    min-height: 38px;
    padding: .62rem .7rem;
    font-size: .9rem;
  }

  .page-hero-categories {
    padding: 0 0 .85rem;
  }

  .category-quick-nav-section {
    padding: .56rem 0 .5rem;
  }

  .category-quick-nav-section .container {
    gap: .38rem;
  }

  .categories-hero-shell {
    grid-template-columns: 1fr;
    gap: .72rem;
  }

  .page-hero-categories .category-hero-copy {
    display: grid;
    justify-items: center;
    max-width: none;
    text-align: center;
  }

  .page-hero-categories .breadcrumb {
    display: none;
  }

  .page-hero-categories .page-title {
    max-width: 15.4ch;
    font-size: clamp(2.05rem, 8.4vw, 2.85rem);
    line-height: .9;
    letter-spacing: -.06em;
  }

  .page-hero-categories .coral-line {
    width: 72px;
    height: 4px;
    margin: .58rem auto .48rem;
  }

  .page-hero-categories .page-intro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: min(100%, 19rem);
    margin-top: 0;
    padding: .28rem .64rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .62);
    color: rgba(16, 24, 40, .74);
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    box-shadow: 0 8px 18px rgba(7, 28, 44, .04);
  }

  .categories-hero-media {
    order: -1;
    aspect-ratio: auto;
    min-height: clamp(178px, 52vw, 244px);
    max-height: none;
    margin-inline: calc(var(--container-pad) * -1);
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
  }

  .categories-hero-media img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: none;
  }

  .categories-hero-stats {
    display: none;
  }

  .category-quick-rail {
    margin-top: .8rem;
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
  }

  .category-quick-nav-section .category-quick-rail {
    margin-top: 0;
    padding-block: .05rem;
  }

  .category-top-breadcrumb {
    display: none;
  }

  .category-context-section {
    padding: .85rem 0 1rem;
  }

  .category-guide-strip {
    padding: 1rem 0;
  }

  .category-guide-copy {
    gap: .42rem;
  }

  .category-guide-copy h2 {
    font-size: clamp(1.7rem, 8vw, 2.25rem);
  }

  .category-guide-steps {
    display: flex;
    gap: .65rem;
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .category-guide-steps::-webkit-scrollbar {
    display: none;
  }

  .category-guide-steps>div {
    flex: 0 0 min(76vw, 260px);
    min-height: 104px;
    scroll-snap-align: start;
  }

  .section-category-directory .section-head {
    align-items: start;
  }

  .category-directory-grid {
    gap: .8rem;
    padding: .35rem var(--container-pad) .85rem;
    scroll-snap-type: x mandatory;
  }

  .category-directory-grid::before,
  .category-directory-grid::after {
    content: '';
    flex: 0 0 .01px;
  }

  .category-directory-card,
  .category-directory-grid .category-directory-card:nth-child(n) {
    flex: 0 0 calc(100vw - (var(--container-pad) * 2));
    min-height: 274px;
    border-radius: 24px;
    clip-path: none;
    scroll-snap-align: start;
  }

  .category-directory-content,
  .category-directory-grid .category-directory-card:nth-child(n) .category-directory-content {
    max-width: 13.5rem;
  }

  .category-bottom-note {
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    text-align: center;
  }

  .category-bottom-note p {
    max-width: 34ch;
    margin-inline: auto;
  }

  .category-bottom-note .btn {
    width: min(100%, 18rem);
  }
}

@media (max-width: 1024px) {
  .hero-split .landing-hero-copy {
    --landing-hero-copy-y-active: var(--landing-hero-copy-y-tablet);
  }
}

@media (max-width: 1023px) {
  .hero-split .landing-hero-copy h1 {
    line-height: 1.06;
  }
}

@media (max-width: 680px) {
  .hero-split .landing-hero-copy h1 {
    line-height: 1.08;
  }
}

@media (max-width: 1024px) {
  .hero-split .landing-hero-copy > h1 {
    width: fit-content;
    max-width: min(100%, 14.6ch);
    margin-inline: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hero-split .landing-hero-copy > h1 > span {
    display: block;
    max-width: 11.6ch;
    margin-inline: auto;
    -webkit-text-stroke: .012em rgba(7, 28, 44, .24);
    paint-order: stroke fill;
    text-shadow:
      0 1px 0 rgba(7, 28, 44, .36),
      0 3px 10px rgba(3, 16, 32, .72),
      0 14px 34px rgba(3, 16, 32, .58),
      0 28px 58px rgba(3, 16, 32, .40);
  }
}

@media (max-width: 390px) {
  .categories-hero-media {
    min-height: clamp(166px, 50vw, 210px);
  }

  .category-directory-card,
  .category-directory-grid .category-directory-card:nth-child(n) {
    flex-basis: 100%;
    min-height: 262px;
  }
}

/* Rewards page v2: post-hero sections only. The loyalty hero stays untouched. */
.rewards-section {
  padding-block: clamp(1.1rem, 3vw, 2.2rem);
}

.rewards-section .section-head {
  align-items: end;
  margin-bottom: clamp(.85rem, 1.8vw, 1.2rem);
}

.rewards-section .section-title {
  font-size: clamp(1.85rem, 3vw, 3rem);
  line-height: .98;
}

.rewards-section .section-kicker {
  max-width: 42ch;
  font-weight: 650;
}


.member-avatar-uploader {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  margin: -.2rem 0 1.15rem;
}

.member-avatar-drop {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 58px;
  padding: .48rem .74rem .48rem .5rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(14px);
}

.member-avatar-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.member-avatar-preview {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-primary-blue);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

.member-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-avatar-preview b {
  color: #fff;
  font-size: 1rem;
  font-weight: 950;
}

@media (max-width: 1023px) {
  .member-avatar-preview {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 760px) {
  .member-avatar-preview {
    width: 54px;
    height: 54px;
  }
}

.member-avatar-drop strong,
.member-avatar-drop small {
  display: block;
  line-height: 1.1;
}

.member-avatar-drop strong {
  font-size: .84rem;
  font-weight: 900;
}

.member-avatar-drop small {
  margin-top: .16rem;
  color: rgba(255, 255, 255, .72);
  font-size: .72rem;
  font-weight: 650;
}

.member-avatar-remove {
  min-height: 34px;
  padding: .38rem .7rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: .74rem;
  font-weight: 850;
  cursor: pointer;
}

@media (max-width: 1023px) {

  .rewards-reorder-section .section-head,
  .rewards-favorites-section .section-head,
  .rewards-offers-section .section-head,
  .rewards-recs-section .section-head {
    display: grid;
    justify-items: center;
    justify-content: center;
    gap: .7rem;
    text-align: center;
  }

  .rewards-reorder-section .section-head>div,
  .rewards-favorites-section .section-head>div,
  .rewards-offers-section .section-head>div,
  .rewards-recs-section .section-head>div {
    display: grid;
    justify-items: center;
  }

  .rewards-reorder-section .section-title,
  .rewards-reorder-section .section-kicker,
  .rewards-favorites-section .section-title,
  .rewards-favorites-section .section-kicker,
  .rewards-offers-section .section-title,
  .rewards-offers-section .section-kicker,
  .rewards-recs-section .section-title,
  .rewards-recs-section .section-kicker {
    margin-inline: auto;
  }

  .rewards-reorder-section .section-kicker,
  .rewards-favorites-section .section-kicker,
  .rewards-offers-section .section-kicker,
  .rewards-recs-section .section-kicker {
    max-width: 34ch;
  }

  .rewards-reorder-section .link-arrow,
  .rewards-favorites-section .link-arrow,
  .rewards-offers-section .link-arrow,
  .rewards-recs-section .link-arrow {
    justify-self: center;
  }
}

.rewards-offers-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(252, 209, 22, .34), transparent 18rem),
    linear-gradient(135deg, #073fb8 0%, var(--color-primary-blue) 54%, #0647d9 100%);
}

.rewards-offers-section .section-title,
.rewards-offers-section .section-kicker,
.rewards-offers-section .link-arrow {
  color: #fff;
}

.rewards-offers-section .section-kicker {
  color: rgba(255, 255, 255, .84);
}

.rewards-offers-section .link-arrow {
  border-color: rgba(255, 255, 255, .28);
}

.rewards-recs-section {
  background: linear-gradient(180deg, #fff 0%, #f7faff 100%);
}

.rewards-favorites-section {
  background:
    radial-gradient(circle at 88% 2%, rgba(252, 209, 22, .18), transparent 16rem),
    linear-gradient(180deg, #fff, #f7faff 86%);
}

.rewards-review-section {
  background:
    radial-gradient(circle at 8% 0%, rgba(11, 85, 244, .12), transparent 18rem),
    linear-gradient(180deg, #fff, #f8fbff 84%);
}

.member-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}

.member-review-card {
  display: grid;
  align-content: start;
  gap: .9rem;
  padding: .9rem;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(7, 28, 44, .06);
}

.member-review-product {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
}

.member-review-product img {
  width: 78px;
  aspect-ratio: 1;
  border-radius: 16px;
  object-fit: cover;
  background: var(--product-photo-backdrop);
  box-shadow: var(--product-photo-shadow);
}

.member-review-product span,
.member-review-product small,
.member-review-existing small {
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 750;
}

.member-review-product strong {
  display: block;
  margin-block: .12rem;
  color: var(--color-navy);
  font-size: .94rem;
  line-height: 1.16;
}

.member-review-form {
  display: grid;
  gap: .72rem;
}

.member-review-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: .15rem;
}

.member-review-stars input {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.member-review-stars label {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  color: #c6d0dd;
  font-size: 1.28rem;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.member-review-stars label:hover,
.member-review-stars label:hover ~ label,
.member-review-stars input:checked ~ label {
  color: var(--color-yellow);
  background: rgba(252, 209, 22, .12);
}

.member-review-stars label:hover {
  transform: translateY(-1px);
}

.member-review-copy {
  display: grid;
  gap: .35rem;
  min-width: 0;
}

.member-review-copy span {
  color: var(--color-navy);
  font-size: .78rem;
  font-weight: 850;
}

.member-review-copy textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  padding: .72rem .8rem;
  border: 1px solid rgba(11, 85, 244, .14);
  border-radius: 16px;
  background: #fff;
  color: var(--color-navy);
  font: inherit;
  font-size: .86rem;
  line-height: 1.35;
  outline: none;
}

.member-review-copy textarea:focus {
  border-color: rgba(11, 85, 244, .5);
  box-shadow: 0 0 0 3px rgba(11, 85, 244, .1);
}

.member-review-existing {
  display: grid;
  gap: .55rem;
  padding: .78rem;
  border: 1px solid rgba(11, 85, 244, .11);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(244, 248, 255, .92), rgba(255, 255, 255, .94));
}

.member-review-existing > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .48rem;
}

.member-review-existing > div > span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: .18rem .5rem;
  border-radius: 999px;
  background: var(--color-primary-blue-soft);
  color: var(--color-primary-blue);
  font-size: .7rem;
  font-weight: 850;
}

.member-review-existing p {
  margin: 0;
  color: var(--color-text);
  font-size: .86rem;
  line-height: 1.35;
}

.rewards-reorder-section .reorder-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(160px, .62fr);
  gap: .85rem;
}

.rewards-reorder-section .product-card,
.rewards-recs-section .product-card {
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(7, 28, 44, .055);
}

.rewards-reorder-section .more-card {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 1rem;
  border: 1.5px dashed rgba(11, 85, 244, .28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 78% 16%, rgba(252, 209, 22, .22), transparent 7rem),
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(240, 246, 255, .74));
  color: var(--color-primary-blue);
  text-align: center;
}

.rewards-reorder-section .more-card .plus {
  font-size: 2.2rem;
  line-height: .9;
  font-weight: 500;
}

.rewards-reorder-section .more-card strong {
  display: block;
  margin-top: .35rem;
  color: var(--color-navy);
  font-family: var(--font-title);
  line-height: 1.05;
}

.rewards-empty-state {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 150px;
  padding: clamp(1rem, 2vw, 1.3rem);
  border: 1px dashed rgba(11, 85, 244, .24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 94% 12%, rgba(252, 209, 22, .18), transparent 10rem),
    linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(244, 248, 255, .84));
}

.rewards-empty-state > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 999px;
  background: var(--color-primary-blue-soft);
  color: var(--color-primary-blue);
}

.rewards-empty-state strong {
  display: block;
  color: var(--color-navy);
  font-size: 1rem;
}

.rewards-empty-state p {
  margin: .15rem 0 0;
  color: var(--color-text-muted);
  font-weight: 650;
}

.rewards-offers-section .offer-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

.rewards-offers-section .offer-card {
  min-height: 214px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 8%, rgba(255, 255, 255, .36), transparent 8rem),
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(244, 248, 255, .82));
  box-shadow: 0 18px 42px rgba(0, 22, 80, .16);
}

.rewards-offers-section .offer-card h3 {
  color: var(--color-primary-blue);
}

.rewards-offers-section .offer-card-visual img {
  min-height: 214px;
  object-fit: cover;
  object-position: center;
  padding: 0;
}

.rewards-recs-section .product-grid.featured {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .85rem;
}

.rewards-benefits-section {
  padding-block: clamp(.9rem, 2vw, 1.35rem);
}

.rewards-benefits-section .benefits-strip {
  border: 1px solid rgba(11, 85, 244, .12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 10%, rgba(252, 209, 22, .18), transparent 15rem),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(244, 248, 255, .92));
}

.rewards-benefits-section .benefit-item {
  padding: 1rem;
}

.rewards-history-section {
  background: linear-gradient(180deg, #fff, var(--color-bg-warm));
}

.rewards-history-section .order-history {
  grid-template-columns: minmax(0, 1fr) 220px;
}

.order-history-empty .order-history-list {
  grid-template-columns: 1fr;
}

.order-history-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: .75rem;
}

.order-history-card {
  display: grid;
  position: relative;
  align-content: space-between;
  gap: .85rem;
  min-height: 330px;
  padding: 1rem;
  border: 1px solid rgba(11, 85, 244, .11);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 10%, rgba(252, 209, 22, .16), transparent 7rem),
    linear-gradient(145deg, #fff, #f5f8ff);
  box-shadow: 0 12px 28px rgba(7, 28, 44, .055);
}

.order-history-card-isotype {
  position: absolute;
  top: .86rem;
  right: .9rem;
  width: 34px;
  height: auto;
  opacity: .86;
  pointer-events: none;
}

.order-history-card-top {
  display: grid;
  gap: .18rem;
  padding-right: 48px;
}

.order-code {
  display: block;
  color: var(--color-primary-blue);
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 900;
}

.order-history-card small {
  color: var(--color-text-soft);
  font-weight: 700;
}

.order-history-card em {
  color: var(--color-text-muted);
  font-size: .78rem;
  font-style: normal;
  font-weight: 800;
}

.order-history-card strong {
  color: var(--color-navy);
  font-size: 1.15rem;
}

.order-products {
  display: grid;
  gap: .55rem;
}

.order-product-line {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: .6rem;
  padding: .48rem;
  border: 1px solid rgba(183, 197, 218, .55);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
}

.order-product-line img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
  background: #eef4ff;
}

.order-product-line div {
  min-width: 0;
}

.order-product-line strong {
  display: block;
  overflow: hidden;
  font-size: .82rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-product-line small {
  display: block;
  margin-top: .12rem;
  font-size: .72rem;
}

.order-product-line span {
  color: var(--color-primary-blue);
  font-size: .75rem;
  font-weight: 900;
  min-width: 54px;
  text-align: right;
  white-space: nowrap;
}

.order-products-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .82rem;
  font-weight: 700;
}

.order-history-totals {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}

.order-benefit-details {
  display: grid;
  justify-items: end;
  gap: .28rem;
  min-width: 0;
}

.order-coupon-detail,
.order-points-detail {
  display: grid;
  justify-items: end;
  gap: .12rem;
  min-width: max-content;
}

.order-coupon-detail span,
.order-points-detail span {
  color: var(--color-primary-blue);
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}

.order-coupon-detail small,
.order-points-detail small {
  color: var(--color-text-soft);
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}

.order-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.order-history-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .28rem .5rem;
  border: 1px solid rgba(11, 85, 244, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .66);
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.1;
}

.order-tracking-detail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
}

.order-tracking-detail span,
.order-tracking-detail a,
.order-tracking-detail small {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .28rem .5rem;
  border: 1px solid rgba(11, 85, 244, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
}

.order-tracking-detail .order-carrier-chip {
  border-color: rgba(255, 159, 28, .28);
  background: #fff7e8;
  color: #b96a00;
}

.order-tracking-detail a {
  color: var(--color-primary-blue);
}

.order-history-card .btn {
  min-height: 36px;
  padding: .56rem .85rem;
  font-size: .78rem;
}

.order-summary-card .rating-big {
  color: var(--color-primary-blue);
  font-family: var(--font-title);
  font-size: 2.4rem;
  line-height: 1;
}

.order-summary-card h3,
.order-summary-card .rating-big {
  text-align: center;
}

.order-summary-savings {
  margin: .2rem 0;
  padding: .72rem .78rem;
  border: 1px solid rgba(0, 166, 81, .16);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 166, 81, .1), rgba(252, 209, 22, .14));
  color: var(--color-navy);
  font-weight: 850;
  line-height: 1.35;
}

.order-summary-savings strong {
  color: var(--color-primary-blue);
  font-size: inherit;
}

.order-summary-isotype {
  display: block;
  width: min(96px, 43%);
  height: auto;
  margin: 1.50rem auto .35rem;
  opacity: .9;
}

@media (max-width: 960px) {

  .rewards-reorder-section .reorder-grid,
  .rewards-offers-section .offer-grid,
  .rewards-favorites-section .product-grid.featured,
  .rewards-recs-section .product-grid.featured,
  .member-review-grid,
  .order-history-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rewards-history-section .order-history {
    grid-template-columns: 1fr;
  }

  .rewards-empty-state {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

@media (max-width: 680px) {
  .rewards-section {
    padding-block: 1rem;
  }

  .rewards-section .section-head {
    align-items: start;
    margin-bottom: .72rem;
  }

  .rewards-section .section-title {
    font-size: clamp(1.72rem, 8vw, 2.25rem);
  }

  .rewards-section .section-kicker {
    max-width: 31ch;
    font-size: .92rem;
    line-height: 1.35;
  }

  .rewards-carousel {
    display: flex;
    gap: 1rem;
    margin-inline: calc(var(--container-pad) * -1);
    padding: .25rem var(--container-pad) .8rem;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--container-pad);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .rewards-carousel::-webkit-scrollbar {
    display: none;
  }

  .rewards-reorder-section .rewards-carousel,
  .rewards-favorites-section .rewards-carousel,
  .rewards-offers-section .rewards-carousel,
  .rewards-recs-section .rewards-carousel,
  .rewards-recs-section .product-grid.featured.rewards-carousel,
  .rewards-benefits-section .rewards-carousel,
  .rewards-history-section .rewards-carousel {
    gap: 1rem;
  }

  .rewards-reorder-section .product-card,
  .rewards-favorites-section .product-card,
  .rewards-recs-section .product-card,
  .rewards-offers-section .offer-card,
  .order-history-card {
    flex: 0 0 min(86vw, 360px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .rewards-reorder-section .more-card {
    flex: 0 0 calc(45vw - var(--container-pad) * 1.5);
    min-height: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .rewards-offers-section .offer-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 100px;
    min-height: 200px;
  }

  .rewards-offers-section .offer-card-content {
    gap: .5rem;
    padding: .75rem;
  }

  .rewards-offers-section .offer-card h3 {
    font-size: 1.2rem;
    line-height: 1;
  }

  .rewards-offers-section .offer-card-visual {
    min-height: 100px;
  }

  .rewards-offers-section .offer-card-visual img {
    height: 140px;
    min-height: 90px;
    object-fit: cover;
    padding: 0;
  }

  .rewards-benefits-section .benefits-strip {
    border-radius: 0;
    border-inline: 0;
  }

  .rewards-benefits-section .benefit-item {
    flex: 0 0 calc(50vw - var(--container-pad) * 1.5);
    border-left: 0;
    border-top: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .rewards-history-section .order-history {
    gap: .85rem;
  }

  .order-summary-card {
    padding: 1rem;
  }

  .member-review-grid {
    grid-template-columns: 1fr;
  }

  .member-review-card {
    padding: .82rem;
    border-radius: 18px;
  }

  .member-review-product {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .member-review-product img {
    width: 68px;
    border-radius: 14px;
  }

  .member-review-stars label {
    width: 34px;
    height: 34px;
  }

  .checkout-points-redeem {
    align-items: stretch;
    flex-direction: column;
  }

  .checkout-points-redeem .btn {
    width: 100%;
  }

  .checkout-points-input {
    flex-basis: auto;
    width: 100%;
  }
}

/* ============================================
   NOSOTROS / AYUDA
   ============================================ */
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  width: fit-content;
  min-height: 32px;
  padding: .36rem .68rem;
  border: 1px solid rgba(11, 85, 244, .13);
  border-radius: 999px;
  background: #0b55f4;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.01em;
  box-shadow: 0 12px 28px rgba(7, 28, 44, .055);
  margin-bottom: .85rem;
}

.page-eyebrow .icon {
  width: 23px;
  height: 23px;
}

.page-eyebrow-isotipo {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
  margin-left: .04rem;
}

.brand-hero-editorial,
.support-hero-editorial {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(252, 209, 22, .25), transparent 22rem),
    radial-gradient(circle at 88% 6%, rgba(11, 85, 244, .15), transparent 30rem),
    linear-gradient(180deg, #fff 0%, #f8fbff 58%, var(--color-bg-warm) 100%);
}

.support-hero-editorial {
  background:
    radial-gradient(circle at 10% 15%, rgb(22 58 252 / 28%), transparent 18rem), 
    linear-gradient(100deg, #082b36 0%, var(--color-primary-blue) 100%);
}

.brand-hero-editorial::before,
.support-hero-editorial::before {
  content: '';
  position: absolute;
  inset: auto auto -32% -10%;
  width: clamp(260px, 34vw, 520px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(11, 85, 244, .10), transparent 68%);
  pointer-events: none;
}

.support-hero-editorial::before {
  inset: auto auto -30% -12%;
  background: radial-gradient(circle, rgba(252, 209, 22, .16), transparent 68%);
}

.brand-hero-editorial .hero-inner,
.support-hero-editorial .hero-inner {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(422px, 8.76fr) minmax(0, 13.24fr);
  align-items: stretch;
  min-height: clamp(500px, 42vw, 650px);
  padding-block: 0;
}

.support-hero-editorial .hero-inner {
  grid-template-columns: minmax(380px, .82fr) minmax(0, 1.18fr);
  min-height: clamp(460px, 38vw, 610px);
}

.support-hero-editorial .hero-copy {
  --support-copy-gap: clamp(.82rem, 1.55vw, 1.18rem);
  --support-eyebrow-gap: .15rem;
  --support-line-gap: clamp(.1rem, .55vw, .28rem);
  --support-button-gap: clamp(.25rem, .75vw, .48rem);
  --support-note-gap: clamp(.16rem, .55vw, .34rem);
  display: grid;
  align-content: center;
  gap: var(--support-copy-gap);
}

.brand-hero-editorial .hero-copy,
.support-hero-editorial .hero-copy {
  align-self: center;
  padding-block: clamp(2.4rem, 5.4vw, 5.2rem);
}

.brand-hero-editorial .page-eyebrow {
  position: relative;
  top: -.42rem;
  margin-bottom: .82rem;
}

.brand-hero-editorial .hero-copy h1,
.support-hero-editorial .hero-copy h1 {
  max-width: 11ch;
  color: var(--color-primary-blue);
  font-size: clamp(3.7rem, 7.1vw, 5.1rem);
  line-height: .86;
  letter-spacing: -.038em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .74),
    0 12px 28px rgba(7, 28, 44, .10);
}

.support-hero-editorial .hero-copy h1 {
  max-width: 7.6ch;
  margin: 0;
  color: #fff;
  text-shadow:
    0 2px 0 rgba(3, 21, 67, .22),
    0 18px 42px rgba(3, 21, 67, .30);
}

.brand-hero-editorial .hero-copy p,
.support-hero-editorial .hero-copy p {
  max-width: 38ch;
}

.support-hero-editorial .page-eyebrow {
  margin: 0 0 var(--support-eyebrow-gap);
  background: rgba(255, 255, 255, .92);
  color: var(--color-primary-blue);
  border-color: rgba(255, 255, 255, .34);
}

.support-hero-editorial .coral-line {
  margin: var(--support-line-gap) 0;
}

.support-hero-editorial .hero-copy p {
  margin: 0;
  color: rgba(255, 255, 255, .86);
  text-shadow: 0 12px 28px rgba(3, 16, 32, .26);
}

.support-hero-editorial .hero-copy p span {
  color: #fff;
  font-weight: 850;
}

.support-hero-editorial .button-row {
  margin-top: var(--support-button-gap);
}

.support-hero-editorial .hero-note {
  margin-top: var(--support-note-gap);
  color: rgba(255, 255, 255, .9);
  border-color: rgba(255, 255, 255, .24);
  background: rgba(4, 24, 44, .24);
  backdrop-filter: blur(12px) saturate(145%);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
}

.support-hero-editorial .btn-secondary {
  background: rgba(255, 255, 255, .13);
  color: #fff;
  border-color: rgba(255, 255, 255, .46);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

.support-hero-editorial .btn-secondary:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .72);
}

.brand-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.15rem;
}

.brand-hero-pills span {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  min-height: 34px;
  padding: .42rem .68rem;
  border: 1px solid rgba(11, 85, 244, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .84);
  color: var(--color-navy);
  font-size: .9rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(7, 28, 44, .045);
}

.brand-hero-pills .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--color-yellow);
  stroke-width: 2.2;
}

.brand-hero-editorial .hero-visual,
.support-hero-editorial .hero-visual {
  --hero-right-bleed: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
  position: relative;
  justify-self: stretch;
  align-self: stretch;
  width: calc(100% + var(--hero-right-bleed));
  margin-right: calc(var(--hero-right-bleed) * -1);
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
}

.brand-hero-editorial .hero-visual>img,
.support-hero-editorial .hero-visual>img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  max-height: none;
  display: block;
  border-radius: 0;
  object-fit: cover;
  object-position: center center;
  filter: saturate(.98) contrast(.98);
  transform: none;
}

.brand-hero-editorial .hero-visual::after,
.support-hero-editorial .hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(250 250 247 / 0%) 0%, rgb(250 250 247 / 0%) 38%,
      rgb(7 28 44 / 0%) 100%);
  pointer-events: none;
}

.brand-hero-editorial .hero-visual::after {
  content: none;
}

.brand-hero-editorial .hero-visual::before {
  content: none;
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: clamp(48px, 7vw, 110px);
  background: linear-gradient(90deg,
      rgba(11, 85, 244, .42) 0%,
      rgba(11, 85, 244, .20) 54%,
      rgba(11, 85, 244, 0) 100%);
  pointer-events: none;
}

.brand-visual-badge {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.2rem);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 42px;
  padding: .48rem .72rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: rgba(7, 28, 44, .56);
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  backdrop-filter: blur(14px) saturate(140%);
}

.brand-badge-selection {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  color: #fff;
  background: none;
  font-weight: 950;
  text-shadow: none;
}

.brand-badge-flag-co {
  width: 1rem;
  height: .68rem;
  flex: 0 0 auto;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .24),
    0 6px 12px rgba(2, 18, 32, .16);
}

.brand-badge-name {
  color: #fff;
  font-weight: 950;
}

.brand-visual-badge img {
  width: 22px;
  height: 22px;
  min-height: 0;
  object-fit: contain;
  filter: none;
}

.brand-hero-editorial .brand-visual-badge img {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 0;
  max-height: 22px;
  border-radius: 0;
  object-fit: contain;
  transform: none;
}

.brand-manifest-strip {
  padding: 0;
  background: linear-gradient(100deg, #082b36 0%, var(--color-primary-blue) 100%);
}

.brand-manifest {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .46fr);
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  min-height: clamp(150px, 16vw, 230px);
  padding: clamp(1.45rem, 3.2vw, 2.8rem) 0;
  color: #fff;
}

.brand-manifest-mark {
  position: absolute;
  right: clamp(.75rem, 2vw, 1.15rem);
  bottom: clamp(.75rem, 2vw, 1.15rem);
  display: inline-grid;
  place-items: center;
  width: clamp(2.9rem, 5.4vw, 4.8rem);
  aspect-ratio: 1;
  z-index: 3;
  filter:
    drop-shadow(0 0 10px rgba(252, 209, 22, .42))
    drop-shadow(0 18px 34px rgba(2, 18, 32, .26));
}

.brand-manifest-mark::before {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(252, 209, 22, .34), rgba(252, 209, 22, .08) 54%, transparent 72%);
  pointer-events: none;
}

.brand-manifest-mark img {
  position: relative;
  z-index: 1;
  width: 72%;
  height: 72%;
  object-fit: contain;
  opacity: .96;
  filter:
    brightness(0)
    saturate(100%)
    invert(82%)
    sepia(90%)
    saturate(915%)
    hue-rotate(353deg)
    brightness(102%)
    contrast(99%);
}

.brand-manifest h2 {
  max-width: 16ch;
  margin: 0 auto;
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 5.4vw, 5.5rem);
  line-height: 1.1;
  letter-spacing: -.06em;
  text-align: center;
}

.brand-manifest-media {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: end;
  align-self: center;
  width: min(100%, 420px);
  height: clamp(230px, 20vw, 330px);
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(circle at 20% 10%, rgba(252, 209, 22, .28), transparent 46%),
    rgba(255, 255, 255, .12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 20px 44px rgba(2, 18, 32, .22);
}

.brand-manifest-media > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  padding: clamp(.65rem, 1.8vw, 1rem) clamp(.75rem, 2vw, 1.15rem) 0;
  object-fit: contain;
  object-position: center bottom;
}

.brand-reasons-section,
.help-faq-section,
.help-contact-section {
  background:
    radial-gradient(circle at 94% 10%, rgba(11, 85, 244, .08), transparent 22rem),
    linear-gradient(180deg, var(--color-bg-warm) 0%, #fff 100%);
}

.reason-grid-editorial .reason-card,
.support-card,
.contact-grid-editorial .contact-card {
  border: 1px solid rgba(11, 85, 244, .10);
  background:
    radial-gradient(circle at 12% 10%, rgba(252, 209, 22, .16), transparent 9rem),
    #fff;
  box-shadow: 0 14px 34px rgba(7, 28, 44, .055);
}

.reason-grid-editorial .reason-card {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: clamp(.82rem, 1.4vw, 1rem);
  min-height: 188px;
  padding: clamp(1.15rem, 1.7vw, 1.45rem);
  text-align: center;
}

.reason-grid-editorial .reason-card .icon-wrap {
  width: clamp(48px, 4.2vw, 56px);
  height: clamp(48px, 4.2vw, 56px);
  border-radius: 18px;
  background: rgba(11, 85, 244, .08);
  color: var(--color-primary-blue);
}

.reason-grid-editorial .reason-card .icon {
  width: clamp(28px, 2.6vw, 34px);
  height: clamp(28px, 2.6vw, 34px);
}

.reason-grid-editorial .reason-card>div {
  display: grid;
  justify-items: center;
  gap: .42rem;
  max-width: 24ch;
}

.reason-grid-editorial .reason-card h3 {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.12;
  text-wrap: balance;
}

.reason-grid-editorial .reason-card p {
  max-width: 25ch;
  font-size: clamp(.88rem, 1vw, .94rem);
  line-height: 1.42;
  text-wrap: balance;
}

.promise-panel {
  display: grid;
  grid-template-columns: minmax(260px, .38fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2rem);
  padding: clamp(1.2rem, 3vw, 2.3rem);
  border: 1px solid rgba(11, 85, 244, .10);
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 16%, rgba(252, 209, 22, .24), transparent 14rem),
    linear-gradient(135deg, #fff 0%, #eef5ff 100%);
}

.promise-panel .section-title {
  margin-top: .58rem;
}

.promise-grid-editorial {
  align-items: stretch;
  gap: clamp(.72rem, 1.2vw, 1rem);
}

.promise-grid-editorial .promise-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: .86rem;
  min-height: 132px;
  padding: clamp(1rem, 1.45vw, 1.25rem);
  border: 1px solid rgba(11, 85, 244, .10);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 10%, rgba(252, 209, 22, .16), transparent 7rem),
    rgba(255, 255, 255, .86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    0 12px 28px rgba(7, 28, 44, .055);
}

.promise-grid-editorial .promise-card>span {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: rgba(11, 85, 244, .09);
  color: var(--color-primary-blue);
}

.promise-grid-editorial .promise-card .icon {
  width: 27px;
  height: 27px;
  color: currentColor;
  stroke-width: 2.15;
}

.promise-grid-editorial .promise-card>div {
  display: grid;
  gap: .38rem;
}

.promise-grid-editorial .promise-card h3 {
  margin: 0;
  color: var(--color-navy);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.14;
  letter-spacing: -.018em;
  text-wrap: balance;
}

.promise-grid-editorial .promise-card p {
  margin: 0;
  max-width: 28ch;
  color: var(--color-text-muted);
  font-size: .9rem;
  line-height: 1.42;
  text-wrap: balance;
}

.founder-avatar-placeholder {
  display: inline-grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin-top: .15rem;
  border: 2px solid rgba(255, 255, 255, .82);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 24%, rgba(252, 209, 22, .45), transparent 45%),
    rgba(255, 255, 255, .12);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .25);
  overflow: hidden;
}

.founder-avatar-placeholder img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.story-card .founder-avatar-placeholder img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding: 0;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}



.review-grid-editorial .review-card {
  border-color: rgba(11, 85, 244, .10);
  box-shadow: 0 14px 34px rgba(7, 28, 44, .055);
}

.help-quick-section {
  margin-top: -2.4rem;
  position: relative;
  z-index: 2;
}

.help-rail {
  align-items: stretch;
}

.support-card {
  min-height: 132px;
  border-radius: 20px;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.support-card:hover {
  transform: translateY(-3px);
  border-color: rgba(11, 85, 244, .22);
  box-shadow: 0 18px 40px rgba(7, 28, 44, .075);
}

.support-card .icon {
  flex: 0 0 auto;
  padding: .52rem;
  border-radius: 16px;
  background: rgba(11, 85, 244, .08);
  color: var(--color-primary-blue);
}

.tracking-card-editorial {
  grid-template-columns: auto minmax(0, 1fr) minmax(300px, .72fr);
  border: 1px solid rgba(11, 85, 244, .14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 22%, rgba(252, 209, 22, .26), transparent 12rem),
    linear-gradient(100deg, #082b36 0%, var(--color-primary-blue) 100%);
  color: #fff;
  box-shadow: 0 18px 42px rgba(7, 28, 44, .12);
}

.tracking-card-editorial .page-eyebrow {
  color: var(--color-yellow);
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: none;

}

.tracking-card-editorial .section-title,
.tracking-card-editorial p {
  color: #fff;
}

.tracking-card-editorial p {
  margin: .35rem 0 0;
  opacity: .86;
}

.tracking-card-editorial .tracking-illustration {
  background: rgba(255, 255, 255, .13);
  color: var(--color-yellow);
}

.tracking-card-editorial .input {
  border-color: rgba(255, 255, 255, .28);
}

.faq-card-editorial,
.human-card-editorial {
  border: 1px solid rgba(11, 85, 244, .10);
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(7, 28, 44, .055);
}

.faq-card-editorial .section-title,
.human-card-editorial .section-title {
  margin: .58rem 0 1rem;
  font-size: clamp(1.8rem, 3.3vw, 3rem);
  line-height: .98;
  letter-spacing: -.06em;
}

.section-link-row {
  margin: 1rem 0 0;
}

.human-card-editorial {
  background:
    radial-gradient(circle at 12% 12%, rgba(252, 209, 22, .20), transparent 11rem),
    linear-gradient(140deg, #fff 0%, #eef5ff 100%);
}

.human-card-editorial .big-icon {
  background: var(--color-primary-blue);
  color: #fff;
  box-shadow: 0 16px 32px rgba(11, 85, 244, .18);
}

.contact-grid-editorial .contact-card {
  border-radius: 22px;
}

.contact-grid-editorial .contact-card .btn {
  justify-self: start;
}



@media (max-width: 1080px) {

  .brand-hero-editorial .hero-copy h1,
  .support-hero-editorial .hero-copy h1 {
    font-size: clamp(3.25rem, 8.4vw, 5.6rem);
  }

  .brand-manifest {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr);
  }

  .brand-manifest-media {
    justify-self: stretch;
    width: min(100%, 520px);
    height: clamp(240px, 34vw, 340px);
  }

  .brand-manifest-media > img {
    height: 100%;
    max-width: none;
  }

  .promise-panel,
  .tracking-card-editorial {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1023px) {
  .promise-panel>div:first-child {
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .promise-panel .page-eyebrow {
    justify-self: center;
  }
}

@media (max-width: 820px) {

  .brand-hero-editorial .hero-inner,
  .support-hero-editorial .hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .brand-hero-editorial .hero-visual,
  .support-hero-editorial .hero-visual {
    order: -1;
    width: calc(100% + (var(--container-pad) * 2));
    min-height: clamp(260px, 58vw, 420px);
    margin-inline: calc(var(--container-pad) * -1);
  }

  .brand-hero-editorial .hero-visual::before {
    content: none;
  }

  .brand-hero-editorial .hero-visual>img,
  .support-hero-editorial .hero-visual>img {
    min-height: clamp(260px, 58vw, 420px);
  }

  .brand-hero-editorial .hero-copy,
  .support-hero-editorial .hero-copy {
    padding-block: clamp(1.3rem, 4vw, 2.4rem) clamp(1.8rem, 5vw, 3rem);
  }

  .brand-hero-editorial .hero-copy h1,
  .support-hero-editorial .hero-copy h1 {
    max-width: 14ch;
    font-size: clamp(3rem, 10vw, 4.8rem);
  }

  .brand-manifest {
    grid-template-columns: 1fr;
    gap: .8rem;
  }

  .brand-manifest-media {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
    height: clamp(280px, 64vw, 420px);
    aspect-ratio: 4 / 3;
  }

  .brand-manifest-media > img {
    height: 100%;
    max-width: none;
  }

  .brand-manifest h2 {
    max-width: 13ch;
  }

  .help-quick-section {
    margin-top: 0;
  }

  .support-hero-editorial .button-row {
    justify-content: center;
  }
}

@media (max-width: 680px) {

  .landing-hero-reveal.is-visible {
    opacity: 1;
    transform: translateY(1rem);
  }

  .page-eyebrow {
    min-height: 29px;
    padding: .32rem 1.56rem;
    font-size: 1rem;
    margin-bottom: .82rem;
  }

  .brand-hero-editorial,
  .support-hero-editorial {
    background:
      radial-gradient(circle at 10% 15%, rgb(22 106 252 / 28%), transparent 18rem), 
      linear-gradient(100deg, #082b36 0%, var(--color-primary-blue) 100%);
  }

  .brand-hero-editorial .hero-copy h1,
  .support-hero-editorial .hero-copy h1 {
    font-size: clamp(1.72rem, 9vw, 4.15rem);
    letter-spacing: -.034em;
  }

  .brand-hero-pills,
  .support-hero-editorial .button-row {
    gap: .42rem;
  }

  .brand-hero-pills {
    align-items: center;
    margin-top: .95rem;
  }

  .brand-hero-pills span {
    display: inline-flex;
    align-items: center;
    gap: .36rem;
    min-height: 30px;
    padding: .35rem .52rem;
    font-size: .72rem;
    line-height: 1;
    white-space: nowrap;
  }

  .brand-hero-pills .icon {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }

  .brand-visual-badge {
    right: .9rem;
    bottom: .9rem;
    min-height: 36px;
    padding: .38rem .58rem;
    font-size: .74rem;
  }

  .brand-visual-badge img {
    width: 18px;
    height: 18px;
  }

  .brand-hero-editorial .brand-visual-badge img {
    width: 18px;
    height: 18px;
    min-width: 18px;
    max-height: 18px;
  }

  .brand-manifest {
    min-height: 0;
    padding: 1.45rem 0;
  }

  .brand-manifest h2 {
    font-size: clamp(2.35rem, 11vw, 3.4rem);
  }

  .brand-manifest-media {
    height: clamp(270px, 82vw, 390px);
    border-radius: 22px;
  }

  .brand-manifest-media > img {
    height: 100%;
    max-width: none;
  }

  .reason-grid-editorial,
  .review-grid-editorial,
  .help-rail {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(244px, 82vw);
    overflow-x: auto;
    overflow-y: hidden;
    padding: .1rem .05rem .65rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;

  }

  .reason-grid-editorial::-webkit-scrollbar,
  .review-grid-editorial::-webkit-scrollbar,
  .help-rail::-webkit-scrollbar {
    display: none;
  }

  .reason-grid-editorial .reason-card,
  .review-grid-editorial .review-card,
  .help-rail .support-card {
    scroll-snap-align: start;
  }

  .promise-panel,
  .faq-card-editorial,
  .human-card-editorial,
  .tracking-card-editorial {
    border-radius: 20px;
  }

  .promise-grid-editorial,
  .contact-grid-editorial {
    grid-template-columns: 1fr;
  }

  .promise-grid-editorial .promise-card {
    min-height: 112px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .78rem;
  }

  .founder-avatar-placeholder {
    width: 62px;
    height: 62px;
  }

  .tracking-card-editorial .inline-form {
    flex-direction: column;
  }

  .faq-card-editorial .section-title,
  .human-card-editorial .section-title {
    font-size: clamp(1.75rem, 8vw, 2.45rem);
  }

  .human-card-editorial {
    grid-template-columns: 1fr;
  }

  .human-card-editorial .big-icon {
    width: 70px;
    height: 70px;
  }

  .micro-stats {
    grid-template-columns: 1fr;
    gap: .65rem;
  }
}

@media (min-width: 681px) {

  .landing-hero-reveal.is-visible {
    opacity: 1;
    transform: translateY(1.5rem);
  }

  .brand-hero-editorial {
    padding: 0;
    background:
      radial-gradient(circle at 10% 15%, rgba(252, 209, 22, .28), transparent 22rem),
      linear-gradient(100deg, #082b36 0%, var(--color-primary-blue) 100%);
    border-bottom: 0;
  }

  .brand-hero-editorial::before {
    content: none;
  }

  .brand-hero-editorial .hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(422px, 8.76fr) minmax(0, 13.24fr);
    grid-template-areas: "brand-copy brand-media";
    gap: 0;
    width: 100%;
    max-width: none;
    min-height: clamp(520px, calc(100svh - var(--header-height)), 760px);
    margin-inline: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle at 12% 16%, rgba(252, 209, 22, .20), transparent 16rem),
      linear-gradient(112deg, rgba(8, 43, 54, .98) 0%, rgba(11, 85, 244, .96) 100%);
    box-shadow: 0 24px 60px rgba(7, 28, 44, .22);
    overflow: hidden;
  }

  .brand-hero-editorial .hero-visual {
    grid-area: brand-media;
    position: relative;
    inset: auto;
    order: 0;
    width: calc(100% + 1px);
    max-width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    margin-inline: 0;
    margin-left: -1px;
    margin-right: 0;
    aspect-ratio: auto;
    overflow: hidden;
    transform: none;
  }

  .brand-hero-editorial .hero-visual>img {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    object-fit: cover;
    object-position: 41% center;
  }

  .brand-hero-editorial .hero-copy {
    grid-area: brand-copy;
    position: relative;
    z-index: 4;
    align-self: stretch;
    justify-self: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% + clamp(280px, 22vw, 430px));
    max-width: none;
    margin-left: -64px;
    padding: clamp(1.7rem, 4.2vw, 4rem);
    padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
    border: 0;
    border-radius: 0;
    /* background: linear-gradient(90deg,
        rgb(25 64 214) 66%,
        rgba(8, 52, 91, .98) 48%,
        rgba(9, 57, 124, .96) 63%,
        rgba(11, 85, 244, .50) 66%,
        rgba(11, 85, 244, 0) 74%); */
    box-shadow: none;
    backdrop-filter: none;
  }

  .brand-hero-editorial .hero-copy::after {
    content: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(clamp(220px, 19vw, 360px) * -1);
    z-index: 0;
    width: clamp(520px, 38vw, 720px);
    background: linear-gradient(90deg,
        rgba(8, 43, 54, 0) 0%,
        rgba(8, 43, 54, .46) 26%,
        rgba(9, 52, 106, .96) 40%,
        rgba(9, 57, 124, .92) 50%,
        rgba(11, 85, 244, .44) 72%,
        rgba(11, 85, 244, 0) 100%);
    pointer-events: none;
  }

  .brand-hero-editorial .hero-copy>* {
    position: relative;
    z-index: 1;
  }

  .brand-hero-editorial .page-eyebrow {
    top: 0;
    margin-bottom: .95rem;
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .13);
    box-shadow: none;
  }

  .brand-hero-editorial .hero-copy h1 {
    max-width: 8ch;
    color: #fff;
    font-size: clamp(4.05rem, 5.8vw, 5rem);
    text-shadow:
      0 1px 0 rgba(255, 255, 255, .14),
      0 10px 24px rgba(0, 0, 0, .18);
  }

  .brand-hero-editorial .hero-copy p {
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 10px 26px rgba(0, 0, 0, .28);
  }

  .brand-hero-editorial .hero-copy p span {
    color: var(--color-yellow);
  }

  .brand-hero-editorial .brand-hero-pills span {
    gap: .42rem;
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    box-shadow: none;
  }

  .brand-hero-editorial .brand-hero-pills .icon {
    width: 15px;
    height: 15px;
    color: var(--color-yellow);
    flex: 0 0 auto;
  }

  .brand-visual-badge {
    right: clamp(1rem, 2vw, 1.6rem);
    bottom: clamp(1rem, 2vw, 1.6rem);
  }
}

/* ============================================
   SUPPORT PAGE RESPONSIVE POLISH
   ============================================ */
@media (max-width: 1023px) {
  .support-hero-editorial .hero-copy {
    --support-copy-gap: clamp(.72rem, 1.8vw, 1rem);
    --support-button-gap: .35rem;
    --support-note-gap: .18rem;
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .support-hero-editorial .hero-copy>* {
    margin-left: auto;
    margin-right: auto;
  }

  .support-hero-editorial .page-eyebrow {
    justify-self: center;
  }

  .support-hero-editorial .coral-line {
    margin-inline: auto;
  }

  .support-hero-editorial .button-row {
    justify-content: center;
  }

  .support-hero-editorial .hero-note {
    justify-self: center;
  }

  .tracking-card-editorial {
    justify-items: center;
    text-align: center;
  }

  .tracking-card-editorial .tracking-illustration {
    width: 104px;
    height: 84px;
  }

  .tracking-card-editorial .inline-form {
    width: min(100%, 560px);
  }

  .support-two-col {
    grid-template-columns: 1fr;
  }

  .faq-card-editorial,
  .human-card-editorial {
    text-align: center;
  }

  .faq-card-editorial .page-eyebrow,
  .human-card-editorial .page-eyebrow {
    justify-self: center;
  }

  .human-card-editorial {
    justify-items: center;
  }

  .human-card-editorial .big-icon {
    justify-self: center;
  }

  .micro-stats {
    width: min(100%, 620px);
    margin-left: auto;
    margin-right: auto;
  }

  .help-contact-section .section-head {
    text-align: center;
  }

  .help-contact-section .section-head>* {
    margin-left: auto;
    margin-right: auto;
  }

  .contact-grid-editorial .contact-card {
    justify-items: center;
    text-align: center;
  }

  .contact-grid-editorial .contact-card .btn {
    justify-self: center;
  }
}

@media (max-width: 680px) {
  .support-hero-editorial .hero-visual {
    --support-hero-image-offset-x: 0px;
    --support-hero-image-offset-y: 0px;
    min-height: clamp(245px, 64vw, 360px);
  }

  .support-hero-editorial .hero-visual>img {
    min-height: clamp(245px, 64vw, 360px);
    object-position: center top;
  }

  .support-hero-editorial .hero-copy {
    --support-copy-gap: .68rem;
    --support-eyebrow-gap: 0rem;
    --support-line-gap: .05rem;
    --support-button-gap: .28rem;
    --support-note-gap: .05rem;
    padding-block: 1.55rem 2.2rem;
  }

  .support-hero-editorial .hero-copy h1 {
    max-width: 12ch;
    text-align: center;
    text-wrap: balance;
  }

  .support-hero-editorial .hero-copy p {
    max-width: 31ch;
    text-align: center;
    text-wrap: balance;
  }

  .support-hero-editorial .button-row {
    width: min(100%, 330px);
    margin-inline: auto;
  }

  .support-hero-editorial .button-row .btn,
  .support-hero-editorial .button-row .button-whatsapp {
    width: 100%;
    min-height: 46px;
  }

  .support-hero-editorial .hero-note {
    width: fit-content;
    max-width: 100%;
    padding-inline: .9rem;
    text-align: center;
  }

  .help-quick-section {
    padding-top: 1.25rem;
  }

  .help-rail {
    grid-auto-columns: minmax(238px, 78vw);
    padding-inline: max(.05rem, calc((100vw - min(100vw, var(--container-max))) / 2));
  }

  .help-rail .support-card {
    min-height: 150px;
    justify-items: center;
    text-align: center;
    padding: 1.15rem;
  }

  .help-rail .support-card .icon {
    margin-bottom: .1rem;
  }

  .help-rail .support-card .arrow {
    display: none;
  }

  .tracking-card-editorial {
    gap: 1rem;
    padding: 1.15rem;
  }

  .tracking-card-editorial .tracking-illustration {
    width: 82px;
    height: 68px;
    border-radius: 18px;
  }

  .tracking-card-editorial .tracking-illustration .icon {
    width: 42px;
    height: 42px;
  }

  .tracking-card-editorial .section-title {
    font-size: clamp(1.72rem, 8vw, 2.35rem);
    text-wrap: balance;
  }

  .tracking-card-editorial p {
    max-width: 31ch;
    margin-inline: auto;
  }

  .tracking-card-editorial .inline-form {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tracking-card-editorial .btn,
  .tracking-card-editorial .input {
    width: 100%;
  }

  .faq-card-editorial,
  .human-card-editorial {
    padding: 1.2rem;
  }

  .faq-card-editorial .section-title,
  .human-card-editorial .section-title {
    max-width: 13ch;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
  }

  .faq-card-editorial .section-link-row {
    text-align: center;
  }

  .human-card-editorial p {
    max-width: 31ch;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
  }

  .micro-stats div {
    display: grid;
    justify-items: center;
  }

  .contact-grid-editorial {
    gap: .85rem;
  }

  .contact-grid-editorial .contact-card {
    min-height: 0;
    padding: 1.15rem;
  }

  .contact-grid-editorial .contact-card .icon {
    width: 38px;
    height: 38px;
  }

  .contact-grid-editorial .contact-card p {
    max-width: 28ch;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 681px) and (max-width: 900px) {
  .brand-hero-editorial .hero-inner {
    grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr);
    min-height: clamp(500px, calc(100svh - var(--header-height)), 720px);
  }

  .brand-hero-editorial .hero-visual {
    width: calc(100% + (var(--container-pad) * 2));
    translate: var(--container-pad) 0;
  }

  .brand-hero-editorial .hero-visual>img {
    object-position: 43% center;
  }

  .brand-hero-editorial .hero-copy {
    padding: clamp(1.2rem, 3vw, 1.7rem);
    padding-left: clamp(1.5rem, 5vw, 2.6rem);
  }

  .brand-hero-editorial .hero-copy p {
    font-size: 1rem;
    line-height: 1.34;
  }

  .brand-hero-pills span {
    min-height: 30px;
    padding: .34rem .5rem;
    font-size: .7rem;
  }

  .landing-hero-reveal.is-visible {
    opacity: 1;
    transform: translateY(1rem);
  }
}

@media (max-width: 900px) {
  .brand-hero-editorial .hero-copy {
    align-items: center;
    gap: 0;
    text-align: center;
  }

  .brand-hero-editorial .hero-copy>* {
    margin-left: auto;
    margin-right: auto;
  }

  .brand-hero-editorial .page-eyebrow {
    display: none;
  }

  .brand-hero-editorial .hero-copy h1 {
    margin-bottom: 0;
  }

  .brand-hero-editorial .coral-line {
    width: clamp(96px, 22vw, 148px);
    margin-top: .9rem;
    margin-bottom: .9rem;
  }

  .brand-hero-editorial .hero-copy p {
    margin-top: 0;
    margin-bottom: 0;
    max-width: min(46ch, 100%);
  }

  .brand-hero-editorial .coral-line {
    margin-left: auto;
    margin-right: auto;
  }

  .brand-hero-editorial .brand-hero-pills {
    justify-content: center;
    margin-top: 1rem;
  }
}

@media (max-width: 900px) {
  .brand-hero-editorial {
    padding: 0;
    background: linear-gradient(112deg, #082b36 0%, var(--color-primary-blue) 100%);
  }

  .brand-hero-editorial::before {
    content: none;
  }

  .brand-hero-editorial .hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand-media"
      "brand-copy";
    gap: 0;
    width: 100%;
    max-width: none;
    min-height: auto;
    margin: 0;
    padding: 0;
    background: linear-gradient(112deg, #082b36 0%, var(--color-primary-blue) 100%);
    overflow: hidden;
  }

  .brand-hero-editorial .hero-visual,
  .brand-hero-editorial .hero-visual.mask-reveal,
  .brand-hero-editorial .hero-visual.mask-reveal.is-visible {
    grid-area: brand-media;
    order: 0;
    width: 100vw;
    min-height: 0;
    height: auto;
    aspect-ratio: 1672 / 941;
    margin: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    translate: none;
    transform: none;
  }

  .brand-hero-editorial .hero-visual>img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: center center;
  }

  .brand-hero-editorial .hero-copy {
    grid-area: brand-copy;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    margin: 0;
    padding: clamp(1.35rem, 4.4vw, 2.35rem) var(--container-pad) clamp(1.85rem, 5vw, 3rem);
    background:
      radial-gradient(circle at 12% 12%, rgba(252, 209, 22, .22), transparent 15rem),
      linear-gradient(112deg, #082b36 0%, var(--color-primary-blue) 100%);
    color: #fff;
  }

  .brand-hero-editorial .hero-copy h1 {
    max-width: min(13ch, 100%);
    color: #fff;
    text-shadow: 0 12px 28px rgba(0, 0, 0, .2);
  }

  .brand-hero-editorial .hero-copy p {
    color: rgba(255, 255, 255, .9);
    text-shadow: none;
  }

  .brand-hero-editorial .hero-copy p span {
    color: var(--color-yellow);
  }

  .brand-hero-editorial .brand-hero-pills span {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    box-shadow: none;
  }
}

@media (max-width: 560px) {
  .brand-hero-editorial .hero-visual,
  .brand-hero-editorial .hero-visual.mask-reveal,
  .brand-hero-editorial .hero-visual.mask-reveal.is-visible {
    min-height: 0;
    height: auto;
    aspect-ratio: 1672 / 941;
  }

  .brand-hero-editorial .hero-visual>img {
    object-position: center center;
  }

  .brand-hero-editorial .hero-copy {
    padding: 1.35rem var(--container-pad) 1.85rem;
  }

  .brand-hero-editorial .hero-copy h1 {
    max-width: 13ch;
    color: #fff;
  }
}

/* Compara and retention systems */
.compare-hero-inner {
  display: grid;
}

.compare-copy,
.compare-side-panel,
.compare-results,
.member-tool-card {
  border-radius: var(--radius-md);
}

.compare-copy {
  display: grid;
  gap: .9rem;
}

.compare-copy h1 {
  margin: 0;
  font-family: var(--font-title);
  line-height: 1.02;
}

.compare-copy p {
  max-width: 680px;
  margin: 0;
}

.compare-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
}

.compare-note,
.compare-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  color: var(--color-text-muted);
  font-size: .9rem;
}

.compare-side-panel {
  display: grid;
  gap: .75rem;
  overflow: hidden;
}

.compare-source-row {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  justify-content: center;
}

.compare-source-row span:not(.live-dot) {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .5rem;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--radius-sm);
  font-size: .8rem;
  font-weight: 800;
}

.compare-source-row span .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.live-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
  flex-shrink: 0;
  align-self: center;
}

.compare-source-row .live-dot {
  animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
  }

  50% {
    opacity: .35;
    transform: scale(.6);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
}

.compare-source-isotipo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: .5;
  flex-shrink: 0;
  align-self: center;
}

.compare-results-section {
  padding-top: 1.2rem;
}

.compare-strip {
  width: 100%;
  border-block: 1px solid rgba(7, 28, 44, .08);
}

.compare-strip-ads {
  background: #071c2c;
  color: #fff;
}

.compare-strip-products {
  background: #fff;
}

.compare-strip-inner {
  display: grid;
  align-items: center;
}

.compare-strip-inner p {
  margin: 0;
}

.compare-strip span {
  font-size: .8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.compare-strip-ads span,
.compare-strip-ads p,
.compare-strip-ads strong {
  color: #fff;
}

.compare-empty,
.compare-board,
.compare-loading,
.compare-not-found {
  display: grid;
}

.compare-price-grid,
.member-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}

.compare-price-card {
  display: grid;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
}

.compare-price-card .compare-extra-line,
.compare-price-card .compare-final-line {
  grid-column: 1 / -1;
  grid-area: auto;
  text-transform: none;
  letter-spacing: 0;
}

.compare-price-card span,
.compare-price-card small {
  color: var(--color-text-muted);
  font-size: .86rem;
}

.compare-price-card.is-daleshop {
  border-color: rgba(11, 85, 244, .28);
}

.compare-price-card.is-pending {
  background: rgba(7, 28, 44, .03);
}

.compare-price-card a {
  color: var(--color-primary-blue);
  font-weight: 800;
}

.compare-price-card.is-exito {
  border-color: rgba(227, 30, 36, .28);
  background: rgb(227 213 30 / 13%);
}

.compare-price-card.is-exito span,
.compare-price-card.is-exito .compare-seller-name {
  color: #000000;
}

.compare-price-card.is-mercado-libre {
  border-color: rgba(255, 230, 0, .4);
  background: rgb(0 98 255 / 8%);
}

.compare-price-card.is-mercado-libre span,
.compare-price-card.is-mercado-libre .compare-seller-name {
  color: #000000;
}

.compare-price-card.is-falabella {
  border-color: rgba(45, 159, 62, .28);
  background: rgba(45, 159, 62, .06);
}

.compare-price-card.is-falabella span,
.compare-price-card.is-falabella .compare-seller-name {
  color: #000000;
}

.compare-price-card.is-homecenter,
.compare-price-card.is-home-center {
  border-color: rgba(106, 27, 154, .28);
  background: rgba(106, 27, 154, .06);
}

.compare-price-card.is-homecenter span,
.compare-price-card.is-home-center span,
.compare-price-card.is-homecenter .compare-seller-name,
.compare-price-card.is-home-center .compare-seller-name {
  color: #000000;
}

.compare-daleshop-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .25rem;
}

.compare-daleshop-benefits li {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: var(--color-text-muted);
}

.compare-daleshop-benefits li .icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-primary-blue);
}

.compare-economy-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compare-economy-strip div,
.member-tool-card {
  display: grid;
  gap: .45rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  background: #fff;
}

.compare-economy-strip strong,
.member-tool-card h2 {
  color: #0b55f4;
}

.member-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

.member-dashboard-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .7rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: var(--radius-md);
}

.member-dashboard-card>.icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-primary-blue);
}

.member-dashboard-card div {
  min-width: 0;
}

.member-dashboard-card span,
.member-dashboard-card small {
  display: block;
  color: var(--color-text-muted);
  font-size: .82rem;
}

.member-dashboard-card strong {
  display: block;
  overflow-wrap: anywhere;
  color: #0b55f4;
  font-size: 1.08rem;
  line-height: 1.18;
}

.member-dashboard-foot {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .75rem;
}

.member-dashboard-foot span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .65rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text-muted);
  font-size: .86rem;
  font-weight: 800;
}

.member-dashboard-foot .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-primary-blue);
}

@media (max-width: 980px) {
  .member-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .member-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .member-dashboard-foot span {
    width: 100%;
  }
}

.compare-economy-strip span,
.member-tool-card p,
.member-tool-card small {
  color: var(--color-text-muted);
}

.member-referral-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .55rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary-blue-soft);
}

.member-referral-code span {
  color: var(--color-primary-blue);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.member-referral-code button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 0;
  background: transparent;
  color: var(--color-primary-blue);
  font-weight: 900;
  cursor: pointer;
}

.member-referral-code .member-referral-copy {
  flex: 0 0 auto;
  min-height: 30px;
  padding: .32rem .52rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(11, 85, 244, .08);
  font-size: .74rem;
  line-height: 1;
}

.member-referral-copy .icon {
  width: 14px;
  height: 14px;
}

.member-referral-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.member-referral-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  min-height: 38px;
  padding: .58rem .85rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #21d36d, #11964b);
  color: #fff;
  font-size: .84rem;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(29, 190, 97, .22);
}

.member-referral-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  min-height: 38px;
  padding: .58rem .85rem;
  border: 1px solid rgba(11, 85, 244, .18);
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary-blue);
  font-size: .84rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(11, 85, 244, .08);
}

.member-referral-share:hover,
.member-referral-share:focus-visible {
  border-color: rgba(11, 85, 244, .32);
  background: var(--color-primary-blue-soft);
}

.member-referral-share .icon,
.member-referral-whatsapp .icon {
  width: 17px;
  height: 17px;
}

.member-referral-card {
  align-content: start;
}

.member-referral-list,
.member-referral-empty {
  display: grid;
  gap: .45rem;
  margin-top: .25rem;
}

.member-referral-empty {
  padding: .72rem;
  border: 1px dashed rgba(11, 85, 244, .24);
  border-radius: var(--radius-sm);
  background: #f7faff;
}

.member-referral-empty strong {
  color: var(--color-navy);
  font-size: .88rem;
}

.member-referral-empty span {
  color: var(--color-text-muted);
  font-size: .8rem;
}

.member-referral-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  min-height: 54px;
  padding: .5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
}

.member-referral-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary-blue-soft);
  color: var(--color-primary-blue);
}

.member-referral-avatar .icon {
  width: 16px;
  height: 16px;
}

.member-referral-row strong,
.member-referral-row small,
.member-referral-row em {
  display: block;
  overflow-wrap: anywhere;
}

.member-referral-row strong {
  color: var(--color-navy);
  font-size: .86rem;
  line-height: 1.15;
}

.member-referral-row small,
.member-referral-row em {
  color: var(--color-text-muted);
  font-size: .75rem;
  font-style: normal;
  line-height: 1.2;
}

.member-referral-row b {
  justify-self: end;
  color: var(--color-primary-blue);
  font-size: .78rem;
  white-space: nowrap;
}

.member-referral-row.is-active {
  border-color: rgba(28, 185, 111, .28);
}

.member-referral-row.is-active .member-referral-avatar {
  background: rgba(28, 185, 111, .12);
  color: #12834f;
}

.member-level-card[class*="level-"] {
  border-color: color-mix(in srgb, var(--level-start, #FFB020) 32%, rgba(11, 85, 244, .1));
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--level-end, #FFD166) 42%, transparent), transparent 8rem),
    linear-gradient(145deg, #fff, color-mix(in srgb, var(--level-end, #FFD166) 22%, #f7faff));
}

.member-level-card[class*="level-"] h2 {
  color: var(--level-ink, var(--color-navy));
}

@media (max-width: 900px) {

  .compare-hero-inner,
  .compare-price-grid,
  .compare-economy-strip,
  .member-tools-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 560px) {
  .compare-search {
    grid-template-columns: 1fr;
  }

  .compare-strip-inner {
    grid-template-columns: 1fr;
  }
}

/* Compara premium refresh */
.compare-hero {
  position: relative;
  padding: calc(var(--header-height) + clamp(1.2rem, 3vw, 2.8rem)) 0 clamp(2rem, 4vw, 3.6rem);
  color: #fff;
  background:
    linear-gradient(120deg, rgba(5, 12, 28, .96), rgba(4, 35, 80, .92) 46%, rgba(11, 85, 244, .88)),
    #071c2c;
  overflow: hidden;
}

.compare-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  pointer-events: none;
}

.compare-hero-inner {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, .98fr) minmax(360px, .72fr);
  gap: clamp(1.2rem, 4vw, 4rem);
  align-items: start;
}

.compare-copy {
  padding: 0;
  border: 0;
  background: transparent;
  margin-top: -3rem;
}

.compare-copy .breadcrumb,
.compare-copy .breadcrumb a,
.compare-copy .page-eyebrow,
.compare-copy p,
.compare-note {
  color: #fff; 
}

.compare-copy h1 {
  max-width: 695px;
  color: #fff;
  font-size: clamp(2.45rem, 5.5vw, 5.4rem);
  letter-spacing: 0;
}

.compare-copy p {
  color: rgba(255, 255, 255, .8);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
}

.compare-search {
  max-width: 760px;
  padding: .5rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
}

.compare-search .input {
  min-height: 52px;
  border-color: transparent;
  border-radius: 999px;
  background: #fff;
}

.compare-search .btn {
  border-radius: 999px;
  white-space: nowrap;
}

.compare-side-panel {
  align-content: start;
  min-height: 0;
  margin-top: -3rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .24);
  background:
    linear-gradient(160deg, rgba(252, 209, 22, .95), rgba(255, 255, 255, .88) 50%, rgba(11, 85, 244, .18)),
    #fcd116;
  color: #071c2c;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
  position: relative;
}

.compare-panel-watermark {
  position: absolute;
  top: .2rem;
  right: .5rem;
  width: 135px;
  height: 46px;
  object-fit: contain;
  /* opacity: .12; */
  pointer-events: none;
}

.compare-note .icon,
.compare-disclaimer .icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.compare-panel-kicker {
  color: rgba(7, 28, 44, .62);
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.compare-side-panel strong {
  color: #071c2c;
  font-family: var(--font-title);
  font-size: clamp(1.55rem, 2.7vw, 2.5rem);
  line-height: 1;
}

.compare-side-panel p {
  margin: 0;
  color: rgba(7, 28, 44, .74);
  font-weight: 700;
  text-align: center;
  font-size: clamp(.88rem, 1.2vw, 2rem);
}

.compare-source-row span:not(.live-dot) {
  border-color: rgba(7, 28, 44, .18);
  background: rgba(255, 255, 255, .54);
  color: #071c2c;
}

.compare-hero-bars {
  display: grid;
  gap: clamp(.72rem, 1vw, .95rem);
  margin: .2rem 0;
}

.compare-hero-bars div {
  display: grid;
  grid-template-columns: clamp(58px, 5vw, 74px) minmax(0, 1fr) auto;
  grid-template-areas:
    "logo name price"
    "logo bar bar"
    "logo extra extra"
    "logo final final";
  gap: .38rem clamp(.72rem, 1.1vw, 1rem);
  align-items: center;
  min-height: clamp(104px, 8.5vw, 128px);
  padding: clamp(.72rem, 1.1vw, .95rem) clamp(.82rem, 1.35vw, 1.15rem);
  border: 1px solid rgba(11, 85, 244, .13);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .50), rgba(255, 255, 255, .28)),
    rgb(0 0 0 / 10%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 14px 28px rgba(7, 28, 44, .07);
}

.compare-hero-bars .compare-hero-logo {
  grid-area: logo;
  align-self: start;
  width: clamp(56px, 4.8vw, 70px);
  height: clamp(56px, 4.8vw, 70px);
  padding: 5px;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 8px 18px rgba(7, 28, 44, .12),
    inset 0 0 0 3px rgba(255, 255, 255, .72);
}

.compare-hero-bars div > span:not(.compare-extra-line):not(.compare-final-line):not(.compare-hero-check) {
  grid-area: name;
  min-width: 0;
  color: var(--color-primary-blue);
  font-size: clamp(1rem, 1.18vw, 1.16rem);
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.compare-hero-bars div > b {
  grid-area: price;
  justify-self: end;
  color: var(--color-primary-blue);
  font-size: clamp(1rem, 1.25vw, 1.22rem);
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .01em;
}

.compare-hero-bars div > i {
  grid-area: bar;
  align-self: end;
}

.compare-extra-line,
.compare-final-line {
  grid-column: auto;
  font-size: clamp(.78rem, .82vw, .88rem);
  line-height: 1.32;
  color: rgba(7, 28, 44, .55);
  font-weight: 850;
  letter-spacing: -.005em;
}

.compare-extra-line {
  margin-top: .1rem;
}

.compare-extra-line.is-daleshop {
  color: #16a34a;
}

.compare-extra-line.is-daleshop b {
  color: #16a34a;
  font-weight: 950;
}

.compare-extra-line b,
.compare-final-line b {
  font-weight: 900;
  color: #071c2c;
}

.compare-final-line {
  color: rgba(220, 38, 38, .7);
}

.compare-hero-bars .compare-extra-line {
  grid-area: extra;
}

.compare-hero-bars .compare-final-line {
  grid-area: final;
}

.compare-final-line b {
  color: #dc2626;
}

.compare-hero-bars div.is-best {
  background: rgba(11, 85, 244, .08);
  box-shadow: inset 0 0 0 1px rgba(11, 85, 244, .25);
}

.compare-hero-logo {
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-left: 0;
  border-radius: 40px;
  padding: .25rem;
  background: rgba(255, 255, 255, .48);
}

/* .compare-hero-bars .compare-hero-logo {
  margin-top: .35rem;
} */

.compare-hero-bars span,
.compare-hero-bars b {
  color: #083b9c;
  font-weight: 900;
}

.compare-hero-bars b {
  padding-right: .25rem;
}

.compare-hero-bars i {
  grid-area: bar;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b55f4, #f42b2b);
  margin-top: .05rem;
}

.compare-hero-check {
  display: inline-block;
  color: #0b55f4;
  font-size: 1.05rem;
  line-height: 1;
  margin-left: .25rem;
}

.compare-strip {
  padding: clamp(2.2rem, 5vw, 4.5rem) 0;
  border: 0;
}

.compare-strip-inner {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.compare-strip-inner p {
  grid-column: 2;
}

.compare-strip span {
  color: currentColor;
  letter-spacing: .08em;
}

.compare-strip strong {
  color: currentColor;
  font-family: var 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif (--font-title);
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  line-height: 1.18;
  width: 19ch;
}

.compare-strip p {
  color: currentColor;
  opacity: .78;
  font-weight: 650;
}

.compare-strip-marquee {
  padding: 0;
  overflow: hidden;
  background: #fcd116;
  color: #071c2c;
}

.compare-marquee {
  display: flex;
  width: max-content;
  animation: compareMarquee 68s linear infinite;
}

.compare-marquee span {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.1rem 2rem;
  font-family: var(--font-title);
  font-size: clamp(2rem, 7vw, 6rem);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.compare-marquee img {
  width: clamp(44px, 5vw, 86px);
  height: clamp(44px, 5vw, 86px);
  object-fit: contain;
  opacity: .24;
  filter: saturate(.85) contrast(1.1);
}

@keyframes compareMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.compare-results-section {
  padding: clamp(1.6rem, 4vw, 3.5rem) 0;
  background:
    linear-gradient(180deg, #f7faff 0%, #fff 48%, #eef4ff 100%);
}

.compare-results {
  border-radius: 0;
}

.compare-empty,
.compare-board,
.compare-loading,
.compare-not-found {
  gap: clamp(1rem, 2.4vw, 1.7rem);
}

.compare-empty {
  align-items: start;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

.compare-price-card,
.compare-loading,
.compare-not-found,
.compare-result-product-card {
  border: 1px solid rgba(7, 28, 44, .1);
  border-radius: var(--radius-md);
  box-shadow: 0 22px 54px rgba(7, 28, 44, .08);
}

.compare-result-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}

.compare-result-product-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(11, 85, 244, .03), rgba(7, 28, 44, .02));
  pointer-events: none;
}

.compare-result-product-card {
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center;
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(7, 28, 44, .1);
  border-radius: var(--radius-md);
  box-shadow: 0 22px 54px rgba(7, 28, 44, .08);
  transition: box-shadow .35s ease, transform .35s ease;
  animation: fade-slide-up .5s ease both;
}

.compare-result-product-card:hover {
  box-shadow: 0 28px 64px rgba(7, 28, 44, .12);
  transform: translateY(-2px);
}

.compare-result-product-card>div {
  display: grid;
  gap: .35rem;
  align-content: start;
}

.compare-result-product-card>div .page-eyebrow {
  margin-bottom: .25rem;
}

.compare-result-product-card>div strong {
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--color-navy);
}

.compare-result-product-card>div p {
  margin: 0;
  font-size: .88rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.compare-insight-price {
  font-weight: 800;
  color: #0b55f4;
}

.compare-result-product-card>div small {
  font-size: .75rem;
  color: var(--color-text-muted);
  opacity: .7;
}

.compare-result-product-card img {
  width: 120px;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--product-photo-image-radius);
  padding: .55rem;
  border: 1px solid var(--product-photo-border);
  background: var(--product-photo-backdrop);
  box-shadow: var(--product-photo-shadow);
  transition: transform .4s ease, box-shadow .4s ease;
}

.compare-result-product-card:hover img {
  transform: scale(1.03);
}

.compare-result-product-card .btn {
  white-space: nowrap;
  padding: .6rem 1.2rem;
}

.compare-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.compare-kpi-row div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .15rem;
  padding: 1.5rem 1.75rem;
  min-height: 120px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary-blue) 0%, #0647d9 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
  animation: fade-slide-up .5s ease both;
}

.compare-kpi-row div:nth-child(1) {
  animation-delay: .04s;
}

.compare-kpi-row div:nth-child(2) {
  animation-delay: .12s;
}

.compare-kpi-row div:nth-child(3) {
  animation-delay: .2s;
}

.compare-kpi-row div::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, transparent 50%);
  pointer-events: none;
}

.compare-kpi-row div:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(11, 85, 244, .3);
}

.compare-kpi-row div .icon {
  width: 24px;
  height: 24px;
  display: block;
  opacity: .7;
  margin-bottom: .35rem;
}

.compare-kpi-isotipo {
  position: absolute;
  right: 1.5rem;
  bottom: .9rem;
  top: auto;
  transform: none;
  object-fit: contain;
  pointer-events: none;
  opacity: .5;
}

.compare-kpi-row div .compare-kpi-isotipo {
  width: 60px;
  height: 60px;
}

.compare-kpi-row div>img.compare-kpi-isotipo {
  position: absolute;
  right: 1.5rem;
  bottom: .9rem;
  top: auto;
  transform: none;
  width: 60px;
  height: 60px;
  object-fit: contain;
  pointer-events: none;
  opacity: .5;
}

.compare-kpi-row span {
  display: block;
  color: rgba(255, 255, 255, .65);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  position: relative;
  z-index: 1;
}

.compare-kpi-row strong {
  display: block;
  font-size: clamp(1.5rem, 3.5vw, 2.75rem);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -.02em;
  position: relative;
  z-index: 1;
}

.compare-price-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: stretch;
}

.compare-price-card {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: clamp(1.15rem, 1.45vw, 1.45rem);
  gap: .85rem;
  align-content: start;
}

.compare-price-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: var(--compare-accent, var(--color-primary-blue));
}

.compare-price-card-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
}

.compare-price-card-header .compare-hero-logo {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(7, 28, 44, .1);
  padding: 6px;
  margin: -.25rem -.35rem 0 0;
}

.compare-price-card span {
  color: var(--compare-accent, var(--color-primary-blue));
  font-weight: 950;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: .02em;
}

.compare-price-card strong {
  color: #071c2c;
  font-size: clamp(1.65rem, 2.75vw, 2.55rem);
  line-height: 1;
}

.compare-price-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .9rem;
}

.compare-price-card.is-daleshop {
  --compare-accent: #0b55f4;
  background: linear-gradient(180deg, rgba(11, 85, 244, .13), #fff 56%);
}

.compare-price-card.is-exito {
  --compare-accent: #fcd116;
}

.compare-price-card.is-falabella {
  --compare-accent: #17b26a;
}

.compare-price-card.is-homecenter,
.compare-price-card.is-home-center {
  --compare-accent: #ff171f;
}

.compare-price-card.is-mercadolibre {
  --compare-accent: #ffe600;
}

.compare-price-card.is-reference {
  background: linear-gradient(180deg, rgba(7, 28, 44, .045), #fff);
}

.compare-mini-lines {
  display: grid;
  gap: .22rem;
  margin-top: auto;
}

.compare-mini-lines span {
  display: flex;
  justify-content: space-between;
  color: rgba(7, 28, 44, .64);
  font-size: .76rem;
  text-transform: none;
}

.compare-bar {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(7, 28, 44, .08);
  box-shadow: inset 0 1px 2px rgba(7, 28, 44, .08);
}

.compare-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--compare-accent, var(--color-primary-blue));
}

.compare-disclaimer {
  padding: 1rem;
  border-radius: var(--radius-md);
  background: rgba(7, 28, 44, .06);
}

.compare-strip-coupons {
  background: linear-gradient(110deg, #0b55f4, #12306b 58%, #071c2c);
  color: #fff;
}

.compare-strip-coupons strong {
  color: #fff;
  font-size: clamp(1rem, 3.2vw, 3.35rem 53.6px);
  line-height: 1.3;
}

.compare-strip-coupons p {
  color: rgba(255, 255, 255, .7);
  font-size: clamp(.82rem, 1.4vw, .92rem);
  line-height: 1.5;
  max-width: 48ch;
}

.compare-strip-coupons span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: clamp(.68rem, 1vw, .88rem);
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
  text-transform: uppercase;
}

.compare-strip-coupons span .icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.compare-strip-coupons .btn {
  border-color: rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
}

.compare-strip-coupons .btn:hover {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .4);
}

.compare-strip-referrals {
  background: linear-gradient(110deg, #7117ff, #9216fc26);
  color: #071c2c;
}

.compare-strip-referrals strong {
  color: #071c2c;
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  line-height: 1.3;
}

.compare-strip-referrals p {
  color: #000;
  font-size: clamp(.82rem, 1.4vw, .92rem);
  line-height: 1.5;
  max-width: 48ch;
}

.compare-strip-referrals span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem 1.1rem;
  border-radius: 999px;
  background: rgba(7, 28, 44, .1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(7, 28, 44, .15);
  color: #ffffff;
  font-size: clamp(.68rem, 1vw, .88rem);
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
  text-transform: uppercase;
}

.compare-strip-referrals span .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.compare-strip-referrals span .icon.compare-kpi-isotipo {
  position: static;
  inset: auto;
  display: inline-block;
  width: 32px;
  height: 32px;
  margin: 0;
  opacity: 1;
  transform: none;
  object-fit: initial;
  pointer-events: auto;
}

.compare-strip-referrals .btn {
  border-color: rgba(7, 28, 44, .2);
  background: rgba(7, 28, 44, .08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #071c2c;
}

.compare-strip-referrals .btn:hover {
  background: rgba(7, 28, 44, .15);
  border-color: rgba(7, 28, 44, .35);
}

.compare-strip-trust {
  background: linear-gradient(120deg, #071c2c, #0b1730);
  color: #fff;
}

.compare-strip-trust strong {
  color: #fff;
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  line-height: 1.3;
}

.compare-strip-trust p {
  color: rgba(255, 255, 255, .7);
  font-size: clamp(.82rem, 1.4vw, .92rem);
  line-height: 1.5;
  max-width: 48ch;
}

.compare-strip-trust span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: clamp(.68rem, 1vw, .88rem);
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
  text-transform: uppercase;
}

.compare-strip-trust span .icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.compare-strip-trust .btn {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
}

.compare-strip-trust .btn:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .35);
}

.compare-video-band {
  position: relative;
  min-height: clamp(420px, 68vw, 915px);
  display: grid;
  align-items: end;
  overflow: hidden;
  color: #fff;
  background: #050c1c;
}

.compare-video-band video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
}

.compare-video-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 12, 28, .88), rgba(5, 12, 28, .18) 58%, rgba(5, 12, 28, .48));
}

.compare-video-content {
  position: relative;
  z-index: 1;
  padding-block: clamp(2rem, 6vw, 5rem);
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity .75s ease,
    transform .75s ease,
    filter .75s ease;
  will-change: opacity, transform, filter;
}

.compare-video-content.is-hidden {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  pointer-events: none;
}

.compare-video-content span {
  font-weight: 900;
  text-transform: uppercase;
  color: #fcd116;
}

.compare-video-content strong {
  display: block;
  max-width: 820px;
  margin-top: .5rem;
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 7vw, 6.6rem);
  line-height: .96;
}

.compare-video-content p {
  max-width: 620px;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
}

.compare-video-dots {
  bottom: clamp(1rem, 3vw, 2rem);
}

.compare-economy-strip {
  gap: 1rem;
}

.compare-economy-strip div {
  border-radius: var(--radius-md);
  border: 1px solid rgba(7, 28, 44, .08);
  box-shadow: 0 16px 40px rgba(7, 28, 44, .06);
}

.compare-seller {
  display: block;
  font-size: .72rem;
  color: var(--color-text-muted);
  text-transform: none;
  font-weight: 400;
  margin-top: -.25rem;
}

.compare-seller-count {
  display: block;
  font-size: .72rem;
  opacity: .7;
  text-transform: none;
  font-weight: 400;
  margin-top: -.15rem;
  margin-bottom: .35rem;
}

.compare-sellers-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .45rem 0;
  margin: .35rem 0;
  border-block: 1px solid rgba(7, 28, 44, .08);
}

.compare-seller-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: .35rem;
  align-items: center;
  font-size: .78rem;
}

.compare-seller-name {
  font-weight: 600;
  color: #071c2c;
  text-transform: none;
}

.compare-seller-price {
  font-weight: 800;
  color: var(--compare-accent, var(--color-primary-blue));
}

.compare-seller-base {
  color: rgba(7, 28, 44, .5);
  font-size: .72rem;
  text-transform: none;
}

.compare-seller-link {
  display: inline-flex;
  color: var(--compare-accent, var(--color-primary-blue));
  opacity: .7;
  transition: opacity .2s;
}

.compare-seller-link:hover {
  opacity: 1;
}

.compare-price-card.has-sellers {
  min-height: 320px;
}

.compare-price-card .compare-sellers-list .compare-seller-row .compare-seller-name,
.compare-price-card .compare-sellers-list .compare-seller-row .compare-seller-price,
.compare-price-card .compare-sellers-list .compare-seller-row .compare-seller-base {
  text-transform: none;
  font-weight: 400;
}

.compare-panel-product {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
}

.compare-panel-product img {
  width: 90px;
  height: 9ch;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.compare-panel-product strong {
  font-size: 1.5rem;
  line-height: 1.25;
}

.is-animating {
  animation: pulse-panel .6s ease;
}

@keyframes pulse-panel {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.015);
  }

  60% {
    transform: scale(.99);
  }

  100% {
    transform: scale(1);
  }
}

.compare-price-card {
  transition: transform .3s ease, box-shadow .3s ease;
  animation: fade-slide-up .5s ease both;
}

.compare-price-card:nth-child(1) {
  animation-delay: 0s;
}

.compare-price-card:nth-child(2) {
  animation-delay: .08s;
}

.compare-price-card:nth-child(3) {
  animation-delay: .16s;
}

.compare-price-card:nth-child(4) {
  animation-delay: .24s;
}

.compare-price-card:nth-child(5) {
  animation-delay: .32s;
}

.compare-price-card:nth-child(6) {
  animation-delay: .4s;
}

@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1100px) {
  .compare-copy .page-eyebrow-isotipo {
    width: 28px;
    height: 28px;
  }

  .compare-price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compare-strip-inner {
    grid-template-columns: 1fr;
  }

  .compare-strip-inner > span {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    width: auto;
    justify-self: start;
  }

  .compare-strip-inner p {
    grid-column: 1;
  }

  .compare-panel-watermark {
    width: 80px;
    height: auto;
  }
}

@media (max-width: 760px) {

  .compare-hero-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .compare-copy {
    margin-top: -2.8rem;
  }

  .compare-copy .page-eyebrow {
    gap: .34rem;
  }

  .compare-copy .page-eyebrow-isotipo {
    width: 22px;
    height: 22px;
    margin-left: 0;
  }

  .compare-side-panel {
    margin-top: 0;
  }

  .compare-empty,
  .compare-kpi-row,
  .compare-price-grid {
    grid-template-columns: 1fr;
  }

  .compare-search {
    grid-template-columns: 1fr;
    border-radius: var(--radius-md);
  }

  .compare-search .input,
  .compare-search .btn {
    border-radius: var(--radius-sm);
  }

  .compare-side-panel {
    min-height: 260px;
  }

  .compare-panel-watermark {
    width: 70px;
    height: auto;
  }

  .compare-hero-logo {
    width: 36px;
    height: 36px;
  }

  .compare-price-card-header .compare-hero-logo {
    width: 40px;
    height: 40px;
    padding: 4px;
    margin: 0 -.15rem 0 0;
  }

  .compare-extra-line,
  .compare-final-line {
    font-size: .68rem;
  }

  .compare-kpi-row div {
    padding: 1.25rem;
    min-height: auto;
  }

  .compare-kpi-isotipo {
    width: 48px;
    height: 48px;
  }

  .compare-result-product-card {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
  }

  .compare-result-product-card .btn {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .compare-result-product-card>div strong {
    font-size: 1rem;
  }

  .compare-result-product-card img {
    width: 80px;
  }
}

@media (max-width: 560px) {

  .compare-hero-bars div {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: .28rem .58rem;
    min-height: 92px;
    padding: .58rem .65rem;
    border-radius: 20px;
  }

  .compare-hero-bars div .compare-hero-logo {
    width: 42px;
    height: 42px;
    margin-top: 0;
  }

  .compare-hero-bars div .compare-hero-check {
    font-size: .85rem;
  }

  .compare-hero-bars div span {
    font-size: .88rem;
  }

  .compare-hero-bars div b {
    font-size: .9rem;
  }

  .compare-extra-line,
  .compare-final-line {
    font-size: .68rem;
  }

  .compare-panel-watermark {
    width: 80px;
    height: auto;
    top: .55rem;
    right: .5rem;
  }
}

/* ── DaleShop Benefits Row (rediseño compare-economy-strip) ── */
.ds-benefits-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.ds-benefit-card {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1.25rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(7, 28, 44, .07);
  box-shadow: 0 8px 28px rgba(7, 28, 44, .04);
  transition: transform .3s ease, box-shadow .3s ease;
}

.ds-benefit-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(7, 28, 44, .08);
}

.ds-benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  background: var(--card-accent, #0b55f4);
  color: #fff;
}

.ds-benefit-icon .icon {
  width: 20px;
  height: 20px;
}

.ds-benefit-icon--dark {
  color: #071c2c;
}

.ds-benefit-content {
  display: grid;
  gap: .2rem;
}

.ds-benefit-content strong {
  display: block;
  color: var(--color-navy);
  font-size: .92rem;
  font-weight: 800;
}

.ds-benefit-content span {
  display: block;
  color: var(--color-text-muted);
  font-size: .82rem;
  line-height: 1.45;
}

/* ── DaleShop Marketing Section ── */
.ds-marketing-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 2rem 0 0;
}

.ds-marketing-section::before,
.ds-marketing-section::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  pointer-events: none;
}

.ds-marketing-section::before {
  inset-block: clamp(-2.5rem, -4vw, -1rem) 0;
  z-index: -2;
  /* background:
    radial-gradient(circle at 6% 10%, rgba(252, 209, 22, .18) 0 7rem, transparent 7.15rem),
    radial-gradient(circle at 90% 8%, rgba(11, 85, 244, .10) 0 11rem, transparent 11.2rem),
    radial-gradient(circle at 72% 58%, rgba(252, 209, 22, .11) 0 9rem, transparent 9.2rem),
    radial-gradient(circle at 14% 88%, rgba(11, 85, 244, .08) 0 13rem, transparent 13.2rem),
    linear-gradient(180deg, rgba(247, 250, 255, .95), rgba(255, 255, 255, .72) 48%, rgba(247, 250, 255, .84)); */
}

.ds-marketing-section::after {
  inset-block: 0;
  z-index: -1;
  opacity: .52;
  background:
    radial-gradient(circle at 9% 18%, transparent 0 8.4rem, rgba(11, 85, 244, .11) 8.48rem 8.58rem, transparent 8.72rem),
    radial-gradient(circle at 86% 18%, transparent 0 13.2rem, rgba(252, 209, 22, .18) 13.3rem 13.42rem, transparent 13.58rem),
    radial-gradient(circle at 78% 76%, transparent 0 10rem, rgba(11, 85, 244, .08) 10.08rem 10.2rem, transparent 10.36rem),
    linear-gradient(112deg, transparent 0 31%, rgba(11, 85, 244, .045) 31.08% 31.26%, transparent 31.38% 100%),
    linear-gradient(148deg, transparent 0 62%, rgba(252, 209, 22, .10) 62.08% 62.26%, transparent 62.42% 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 94%, transparent 100%);
}

.ds-marketing-section > .container,
.ds-marketing-section > .ds-deals-section,
.ds-marketing-section > .compare-strip-trust,
.ds-marketing-section > .ds-benefits-transfer {
  position: relative;
  z-index: 1;
}

.ds-benefits-transfer {
  padding-block: clamp(1rem, 2vw, 1.5rem);
}

/* Hero Grid */
.ds-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  grid-template-areas:
    "small-one feature spotlight"
    "small-two feature spotlight";
  grid-template-rows: repeat(2, minmax(180px, auto));
  gap: 1rem;
  align-items: stretch;
}

.ds-hero-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--card-bg, #f5f7fa);
  border: 1px solid rgba(7, 28, 44, .06);
  transition: transform .35s ease, box-shadow .35s ease;
}

.ds-hero-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(7, 28, 44, .1);
}

.ds-hero-card--sm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 1rem;
  min-height: 160px;
}

.ds-hero-card--sm:nth-child(1) {
  grid-area: small-one;
}

.ds-hero-card--sm:nth-child(2) {
  grid-area: small-two;
}

.ds-hero-card--md {
  grid-area: feature;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  padding: 1.25rem;
  min-height: clamp(380px, 30vw, 470px);
  height: 100%;
}

.ds-hero-card--lg {
  grid-area: spotlight;
  display: grid;
  grid-template-columns: 2fr 1.1fr;
  align-items: center;
  padding: 1.75rem;
  min-height: clamp(380px, 30vw, 470px);
  height: 100%;
  position: relative;
}

.ds-hero-card-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ds-hero-card-img img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.ds-hero-card--sm:nth-child(1) .ds-hero-card-img img {
  object-position: 62% 38%;
}

.ds-hero-card--sm:nth-child(2) .ds-hero-card-img img {
  object-position: 58% 42%;
}

.ds-hero-card--md .ds-hero-card-img img {
  max-width: none;
  margin-bottom: 0;
  object-position: 72% center;
}

.ds-hero-card--lg .ds-hero-card-img img {
  max-width: none;
  object-position: 58% center;
}

.ds-hero-card-body {
  position: relative;
  z-index: 2;
  display: grid;
  gap: .35rem;
  align-content: start;
}

.ds-hero-card--md .ds-hero-card-body {
  justify-self: start;
  justify-items: start;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  width: min(16.5rem, 52%);
  max-width: none;
  gap: .48rem;
  padding-top: .2rem;
  text-align: left;
}

.ds-hero-card--md .ds-badge {
  justify-self: start;
}

.ds-hero-card--lg .ds-hero-card-body {
  max-width: 34ch;
  margin-bottom: 5rem;
}

.ds-hero-card-body h2 {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(1.2rem, 2vw, 2.7rem);
  line-height: 1.15;
  color: #fff;
  text-shadow:
    0 2px 4px rgba(7, 28, 44, .62),
    0 10px 24px rgba(7, 28, 44, .34);
}

.ds-hero-card-body h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  text-shadow:
    0 2px 4px rgba(7, 28, 44, .62),
    0 10px 24px rgba(7, 28, 44, .34);
}

.ds-hero-card-body p {
  margin: 0;
  font-size: .92rem;
  color: rgba(255, 255, 255, .92);
  line-height: 1.4;
  text-shadow:
    0 1px 3px rgba(7, 28, 44, .66),
    0 8px 18px rgba(7, 28, 44, .28);
}

/* Badge */
.ds-badge {
  display: inline-flex;
  width: fit-content;
  padding: .2rem .65rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, .85);
  color: var(--color-navy);
  font-size: .85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ds-badge--pill {
  align-items: center;
  gap: .4rem;
  padding: .25rem .85rem;
  border-radius: 999px;
  background: #0057FF;
  color: #fff;
  font-size: 1rem;
  position: absolute;
  top: 3rem;
  left: 1.75rem;
  z-index: 3;
}

.ds-badge--pill .ds-badge-isotipo {
  width: 2em;
  height: 2em;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Button */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: fit-content;
  min-height: 0;
  padding: .45rem 1.15rem;
  border-radius: 999px;
  background: #0057FF;
  color: #fff;
  font-size: .82rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 87, 255, .25);
  transition: background .2s, transform .2s, box-shadow .2s;
}

.ds-btn:hover {
  background: #004ad6;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 87, 255, .35);
}

.ds-btn-sm {
  padding: .36rem .86rem;
  font-size: .82rem;
}

.ds-hero-card--md .ds-btn-sm {
  justify-self: end;
  margin: .08rem 0 0;
}

/* Cart float */
.ds-cart-float {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #44D17A;
  color: #fff;
  box-shadow: 0 4px 16px rgba(68, 209, 122, .35);
  pointer-events: none;
}

.ds-cart-float .icon {
  width: 18px;
  height: 18px;
}

/* Collections Section */
.ds-collections-section {
  padding: 2.5rem 0 1rem;
}

.ds-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.ds-section-head h2 {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(1.3rem, 2.5vw, 2.8rem);
  color: var(--color-rating);
}

.ds-section-head p {
  max-width: 72ch;
  margin: .25rem 0 0;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 600;
}

.ds-section-head--intro {
  align-items: end;
  margin-bottom: 1rem;
}

.ds-section-head--deals {
  align-items: end;
  margin-bottom: 1rem;
}

.ds-link-all {
  font-size: .85rem;
  font-weight: 700;
  color: #0057FF;
  text-decoration: none;
}

.ds-link-all:hover {
  text-decoration: underline;
}

.ds-collections-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .85rem;
}

.ds-collection-card {
  display: grid;
  gap: .5rem;
  text-decoration: none;
  text-align: center;
  transition: transform .3s ease;
}

.ds-collection-card:hover {
  transform: translateY(-4px);
}

.ds-collection-img {
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(7, 28, 44, .06);
  transition: box-shadow .3s;
}

.ds-collection-card:hover .ds-collection-img {
  box-shadow: 0 12px 32px rgba(7, 28, 44, .1);
}

.ds-collection-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ds-collection-card span {
  font-size: .8rem;
  font-weight: 700;
  color: var(--color-navy);
}

@media (min-width: 901px) {
  .ds-collection-card span {
    font-size: 1rem;
  }
}

/* Deals Section */
.ds-deals-section {
  padding: 1.5rem 0;
}

.ds-deals-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1rem;
}

.ds-deals-lead {
  position: relative;
  border-radius: 20px;
  padding: 1.75rem;
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  min-height: 260px;
}

.ds-deals-lead-body {
  position: relative;
  z-index: 2;
  display: grid;
  gap: .4rem;
  max-width: 27ch;
  margin-bottom: 1rem;
}

.ds-deals-lead-body h2 {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
  color: #002b88;
  line-height: 1.15;
  text-shadow:
    0 2px 4px rgba(7, 28, 44, .62),
    0 12px 26px rgba(7, 28, 44, .34);
}

.ds-deals-lead-body h2 span {
  color: var(--color-yellow);
}

.ds-deals-lead-body p {
  margin: 0;
  font-size: .88rem;
  color: rgba(255, 255, 255, .92);
  text-shadow:
    0 1px 3px rgba(7, 28, 44, .66),
    0 8px 18px rgba(7, 28, 44, .28);
}

.ds-deals-lead-body .ds-btn {
  justify-self: start;
  margin-top: .6rem;
  padding: .45rem 1.4rem;
  font-size: .82rem;
  background: linear-gradient(135deg, #0057FF, #3b82f6);
  box-shadow: 0 6px 20px rgba(0, 87, 255, .3);
}

.ds-deals-lead-body .ds-btn:hover {
  background: linear-gradient(135deg, #004ad6, #2563eb);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 87, 255, .4);
}

.ds-deals-lead-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ds-deals-lead-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.ds-deals-grid-right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}

.ds-deal-card {
  position: relative;
  display: grid;
  gap: .3rem;
  align-content: start;
  min-height: 132px;
  padding: 1rem;
  border-radius: 16px;
  background: var(--deal-bg, #f5f7fa);
  text-decoration: none;
  text-align: left;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}

.ds-deal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(7, 28, 44, .08);
}

.ds-deal-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0;
}

.ds-deal-card:nth-child(1) img {
  object-position: 58% 20%;
}

.ds-deal-card:nth-child(2) img {
  object-position: 78% 12%;
}

.ds-deal-card:nth-child(3) img {
  object-position: 78% 16%;
}

.ds-deal-card:nth-child(4) img {
  object-position: 74% 14%;
}

.ds-deal-card:nth-child(5) img {
  object-position: 76% 14%;
}

.ds-deal-card span {
  position: relative;
  z-index: 2;
  max-width: 18.5ch;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-shadow:
    0 2px 4px rgba(7, 28, 44, .66),
    0 8px 18px rgba(7, 28, 44, .32);
}

.ds-deal-card small {
  position: relative;
  z-index: 2;
  font-size: .68rem;
  color: #fff;
  font-weight: 600;
  text-shadow:
    0 1px 3px rgba(7, 28, 44, .72),
    0 8px 18px rgba(7, 28, 44, .32);
}

.ds-deal-card-promo {
  position: relative;
  align-content: center;
  justify-content: center;
  justify-items: center;
  place-items: center;
  overflow: visible;
  min-height: auto;
  padding: .15rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.ds-deal-card-promo::before {
  display: none;
}

.ds-deal-card-promo img {
  position: static;
  justify-self: center;
  align-self: center;
  margin-top: .65rem;
  width: clamp(92px, 8vw, 118px);
  height: clamp(92px, 8vw, 118px);
  object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(11, 85, 244, .18));
}

.ds-deal-card-promo small {
  color: var(--color-primary-blue);
  font-size: .72rem;
  font-weight: 850;
}

.ds-deal-card-promo:hover {
  box-shadow: none;
}



/* ── Responsive Marketing Section ── */
@media (max-width: 1100px) {
  .ds-section-head h2 {
    font-size: clamp(1.25rem, 2.6vw, 1.65rem);
    line-height: 1.08;
  }

  .ds-section-head p {
    max-width: 58ch;
    font-size: .94rem;
  }

  .ds-hero-card--md {
    align-content: end;
    padding: 1rem;
    min-height: clamp(320px, 42vw, 390px);
  }

  .ds-hero-card--md .ds-hero-card-body {
    width: min(13rem, 68%);
    gap: .38rem;
  }

  .ds-hero-card--md .ds-btn-sm {
    justify-self: start;
  }

  .ds-hero-card-body h3 {
    font-size: 1.12rem;
    line-height: 1.18;
  }

  .ds-hero-card-body p {
    font-size: .84rem;
    line-height: 1.32;
  }

  .ds-badge {
    padding: .18rem .55rem;
    font-size: .72rem;
  }

  .ds-badge--pill {
    gap: .32rem;
    padding: .22rem .72rem;
    font-size: .86rem;
  }

  .ds-badge--pill .ds-badge-isotipo {
    width: 1.35em;
    height: 1.35em;
  }

  .ds-btn-sm {
    padding: .32rem .76rem;
    font-size: .74rem;
  }

  .ds-collections-row {
    grid-template-columns: repeat(4, 1fr);
  }

  .ds-deals-grid {
    grid-template-columns: 1fr;
  }

  .ds-deals-grid-right {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) and (min-width: 761px) {
  .ds-hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "small-one small-two"
      "feature spotlight";
    grid-template-rows: minmax(170px, auto) minmax(330px, auto);
  }

  .ds-hero-card--lg {
    grid-template-columns: 1fr;
    align-items: end;
    padding: 1.25rem;
    min-height: clamp(320px, 42vw, 390px);
  }

  .ds-hero-card--lg .ds-hero-card-body {
    max-width: 29ch;
  }
}

@media (max-width: 760px) {
  .ds-section-head {
    display: grid;
    gap: .45rem;
    margin-bottom: .95rem;
  }

  .ds-section-head h2 {
    font-size: clamp(1.28rem, 6vw, 1.55rem);
    line-height: 1.04;
  }

  .ds-section-head p {
    font-size: .84rem;
  }

  .ds-benefits-row {
    display: flex;
    gap: 1rem;
    margin-inline: calc(var(--container-pad) * -1);
    padding: .25rem var(--container-pad) .8rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--container-pad);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .ds-benefits-row::-webkit-scrollbar {
    display: none;
  }

  .ds-benefit-card {
    flex: 0 0 calc(75vw - var(--container-pad));
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 240px;
  }

  .ds-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    grid-template-rows: auto;
  }

  .ds-hero-card--sm:nth-child(1),
  .ds-hero-card--sm:nth-child(2),
  .ds-hero-card--md,
  .ds-hero-card--lg {
    grid-area: auto;
  }

  .ds-hero-card--sm {
    grid-template-columns: 1fr 1fr;
    min-height: 130px;
  }

  .ds-hero-card--md {
    grid-row: auto;
    min-height: 240px;
    padding: 1rem;
  }

  .ds-hero-card--md .ds-hero-card-body {
    width: min(14rem, 58%);
    gap: .34rem;
  }

  .ds-hero-card-body h3 {
    font-size: 1.06rem;
    line-height: 1.16;
  }

  .ds-hero-card-body p {
    font-size: .8rem;
    line-height: 1.3;
  }

  .ds-badge {
    padding: .16rem .5rem;
    font-size: .66rem;
  }

  .ds-btn-sm {
    padding: .3rem .72rem;
    font-size: .72rem;
  }

  .ds-hero-card--lg {
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: 1fr;
    min-height: 300px;
    text-align: left;
    padding: 1.25rem;
    align-items: end;
  }

  .ds-hero-card--lg .ds-hero-card-img img {
    object-position: 64% center;
  }

  .ds-badge--pill {
    position: static;
    margin-bottom: -0.5rem;
    max-width: 100%;
    gap: .28rem;
    padding: .2rem .65rem;
    font-size: .78rem;
  }

  .ds-badge--pill .ds-badge-isotipo {
    width: 2.25em;
    height: 2.25em;
  }

  .ds-cart-float {
    display: none;
  }

  .ds-collections-section {
    padding: 1.5rem 0 1rem;
  }

  .ds-collections-row {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
  }

  .ds-collection-card {
    flex: 0 0 110px;
    scroll-snap-align: start;
  }

  .ds-deals-lead {
    grid-template-columns: 1fr;
    text-align: left;
    min-height: 260px;
    align-items: end;
  }

  .ds-deals-lead-body h2 {
    color: #fff;
  }

  .ds-deals-lead-img img {
    object-position: 62% center;
  }

  .ds-deals-lead-body .ds-btn {
    justify-self: start;
    margin: .5rem 0 0;
  }

  .ds-deals-grid-right {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .ds-hero-card--sm {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 1rem;
    min-height: 178px;
    align-items: end;
  }

  .ds-hero-card--sm .ds-hero-card-img img {
    object-position: 60% center;
  }

  .ds-deals-grid-right {
    grid-template-columns: 1fr 1fr;
  }

  .ds-hero-card--lg .ds-hero-card-body {
    max-width: 27ch;
    margin-bottom: 6rem;
  }
}

@media (max-width: 1023px) {
  .checkout-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .checkout-page .checkout-form {
    order: 2;
  }

  .checkout-page .summary-card {
    position: static;
    order: 1;
  }

  .checkout-head {
    align-items: flex-start;
    flex-direction: column;
    min-height: auto;
    padding-block: 1.2rem;
  }

  .checkout-head .steps {
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
    padding-bottom: .25rem;
  }

  .checkout-status-list {
    width: 100%;
    margin-left: 0;
  }

  .checkout-head-visual {
    position: absolute;
    right: var(--container-pad);
    top: 1rem;
    width: 74px;
    height: 74px;
    opacity: .72;
  }
}

@media (max-width: 760px) {
  .checkout-layout {
    gap: 1rem;
    padding-block: 1rem;
  }

  .checkout-form {
    padding: .75rem;
    border-radius: 20px;
  }

  .form-grid.three {
    grid-template-columns: 1fr;
  }

  .form-section {
    border-radius: 16px;
  }

  .form-section-head {
    gap: .6rem;
  }

  .steps {
    gap: .35rem;
    justify-content: space-between;
  }

  .checkout-status-list {
    gap: .4rem;
  }

  .checkout-status-list span {
    flex: 1 1 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  .checkout-head .step {
    flex: 0 1 auto;
    min-width: 0;
    gap: .35rem;
    font-size: clamp(.72rem, 3.25vw, .86rem);
  }

  .step-line {
    flex: 1 1 12px;
    width: auto;
    min-width: 10px;
    max-width: 32px;
  }

  .checkout-head .step-number {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
  }

  .checkout-page .discount-row {
    grid-template-columns: 1fr;
  }

  .checkout-head-visual {
    display: none;
  }
}

/* Landing hero image composition: 16:9 assets, full-bleed cover, slow camera motion. */
.hero-split .hero-media-rotator .hero-media-slide,
.hero-split .hero-media-rotator .hero-media-slide:nth-child(n) {
  --hero-slide-x: 50%;
  --hero-slide-y: 50%;
  --hero-slide-active-scale: 1.045;
  --hero-slide-idle-scale: 1;
  --hero-slide-exit-scale: 1.018;
  --hero-slide-enter-scale: 1;
  --hero-slide-shift-x: 0px;
  --hero-slide-shift-y: 0px;
  animation: none;
  transition:
    opacity 1600ms ease-in-out,
    transform 7600ms linear;
}

.hero-split .hero-media-rotator .hero-media-slide:nth-child(2) {
  --hero-slide-active-scale: 1.06;
  --hero-slide-idle-scale: 1.015;
  --hero-slide-exit-scale: 1.035;
  --hero-slide-enter-scale: 1.015;
  --hero-slide-shift-y: 26px;
}

.hero-split .hero-media-rotator .hero-media-slide:nth-child(3) {
  --hero-slide-active-scale: 1.064;
  --hero-slide-idle-scale: 1.016;
  --hero-slide-exit-scale: 1.038;
  --hero-slide-enter-scale: 1.016;
  --hero-slide-shift-y: 52px;
}

.hero-split .hero-media-rotator .hero-media-slide:nth-child(4) {
  --hero-slide-active-scale: 1;
  --hero-slide-idle-scale: 1.06;
  --hero-slide-exit-scale: 1.02;
  --hero-slide-enter-scale: 1.06;
  --hero-slide-shift-y: 28px;
}

.hero-split .hero-media-rotator .hero-media-slide:nth-child(5) {
  --hero-slide-active-scale: 1.01;
  --hero-slide-idle-scale: 1.07;
  --hero-slide-exit-scale: 1.035;
  --hero-slide-enter-scale: 1.07;
  --hero-slide-shift-y: 48px;
}

.hero-split .hero-media-rotator .hero-media-slide:nth-child(6) {
  --hero-slide-active-scale: 1;
  --hero-slide-idle-scale: 1.055;
  --hero-slide-exit-scale: 1;
  --hero-slide-enter-scale: 1.055;
  --hero-slide-shift-y: 68px;
}

.hero-split .hero-media-rotator .hero-media-slide:nth-child(6).is-active {
  animation: hero-slide-six-zoom-out-pan-down 5600ms linear both;
}

.hero-split .hero-media-rotator .hero-media-slide:nth-child(7) {
  --hero-slide-shift-y: 32px;
}

@media (min-width: 1025px) {
  .hero-split .hero-media-rotator .hero-media-slide:nth-child(7) {
    --hero-slide-x: 44%;
  }
}

@keyframes hero-slide-six-zoom-out-pan-down {
  0% {
    transform: translate3d(var(--hero-slide-shift-x), 44px, 0) scale(var(--hero-slide-enter-scale));
  }

  100% {
    transform: translate3d(var(--hero-slide-shift-x), var(--hero-slide-shift-y), 0) scale(var(--hero-slide-active-scale));
  }
}

@media (max-width: 1024px) {
  .hero-split .hero-media-rotator .hero-media-slide,
  .hero-split .hero-media-rotator .hero-media-slide:nth-child(n) {
    --hero-slide-active-scale: 1.07;
    --hero-slide-idle-scale: 1;
    --hero-slide-exit-scale: 1.025;
    --hero-slide-enter-scale: 1;
    transition:
      opacity 1600ms ease-in-out,
      transform 7600ms linear;
  }

  .hero-split .hero-media-rotator .hero-media-slide:first-child.is-active {
    animation-duration: 7600ms;
    animation-timing-function: linear;
  }

  .hero-split .hero-media-rotator .hero-media-slide:nth-child(2) {
    --hero-slide-active-scale: 1.085;
    --hero-slide-idle-scale: 1.018;
    --hero-slide-exit-scale: 1.045;
    --hero-slide-enter-scale: 1.018;
    --hero-slide-shift-y: 34px;
  }

  .hero-split .hero-media-rotator .hero-media-slide:nth-child(3) {
    --hero-slide-active-scale: 1.09;
    --hero-slide-idle-scale: 1.02;
    --hero-slide-exit-scale: 1.05;
    --hero-slide-enter-scale: 1.02;
    --hero-slide-shift-y: 64px;
  }

  .hero-split .hero-media-rotator .hero-media-slide:nth-child(4) {
    --hero-slide-active-scale: 1.01;
    --hero-slide-idle-scale: 1.085;
    --hero-slide-exit-scale: 1.04;
    --hero-slide-enter-scale: 1.085;
    --hero-slide-shift-y: 38px;
  }

  .hero-split .hero-media-rotator .hero-media-slide:nth-child(5) {
    --hero-slide-active-scale: 1.01;
    --hero-slide-idle-scale: 1.09;
    --hero-slide-exit-scale: 1.045;
    --hero-slide-enter-scale: 1.09;
    --hero-slide-shift-y: 42px;
  }

  .hero-split .hero-media-rotator .hero-media-slide:nth-child(6) {
    --hero-slide-active-scale: 1;
    --hero-slide-idle-scale: 1.065;
    --hero-slide-exit-scale: 1;
    --hero-slide-enter-scale: 1.065;
    --hero-slide-shift-y: 64px;
  }

  .hero-split .hero-media-rotator .hero-media-slide:nth-child(6).is-active {
    animation: hero-slide-six-responsive-zoom-out 5600ms linear both;
  }

  .hero-split .hero-media-rotator .hero-media-slide:nth-child(7) {
    --hero-slide-shift-y: 28px;
  }
}

@media (max-width: 680px) {
  .hero-split .hero-media-rotator .hero-media-slide:nth-child(3) {
    --hero-slide-shift-y: 44px;
  }

  .hero-split .hero-media-rotator .hero-media-slide:nth-child(6) {
    --hero-slide-shift-y: 34px;
  }

  .hero-split .hero-media-rotator .hero-media-slide:nth-child(6).is-active {
    animation: hero-slide-six-mobile-zoom-out 5600ms linear both;
  }

  .hero-split .hero-media-rotator .hero-media-slide:nth-child(5) {
    --hero-slide-shift-y: 32px;
  }

  .hero-split .hero-media-rotator .hero-media-slide:nth-child(7) {
    --hero-slide-shift-y: 22px;
  }
}

@keyframes hero-slide-six-mobile-zoom-out {
  0% {
    transform: translate3d(var(--hero-slide-shift-x), var(--hero-slide-shift-y), 0) scale(var(--hero-slide-enter-scale));
  }

  100% {
    transform: translate3d(var(--hero-slide-shift-x), var(--hero-slide-shift-y), 0) scale(var(--hero-slide-active-scale));
  }
}

@keyframes hero-slide-six-responsive-zoom-out {
  0% {
    transform: translate3d(var(--hero-slide-shift-x), var(--hero-slide-shift-y), 0) scale(var(--hero-slide-enter-scale));
  }

  100% {
    transform: translate3d(var(--hero-slide-shift-x), var(--hero-slide-shift-y), 0) scale(var(--hero-slide-active-scale));
  }
}