/** Shopify CDN: Minification failed

Line 2938:16 Unexpected "{"
Line 2938:25 Expected ":"
Line 2941:14 Unexpected "{"
Line 2941:23 Expected ":"
Line 6124:14 Unexpected "{"
Line 6124:23 Expected ":"
Line 6150:14 Unexpected "{"
Line 6150:23 Expected ":"
Line 6179:14 Unexpected "{"
Line 6179:23 Expected ":"
... and 11 more hidden warnings

**/
* {
  box-sizing: border-box;
}

body {
  color: var(--color-foreground);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
  font-variation-settings: 'slnt' 0;
}

:root {
  --hover-lift-amount: 4px;
  --hover-scale-amount: 1.03;
  --hover-subtle-zoom-amount: 1.015;
  --hover-shadow-color: var(--color-shadow);
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --surface-transition-duration: 0.3s;
  --surface-transition-timing: var(--ease-out-quad);
  --submenu-animation-speed: 360ms;
  --submenu-animation-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
}

html {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  scroll-behavior: smooth;
}

@media (min-width: 990px) {
  html:has(.page-wrapper),
  html:has(.page-wrapper) body {
    height: 100dvh;
    overflow: hidden;
  }
}

html[scroll-lock],
html[scroll-lock] .page-wrapper {
  overflow: hidden;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  transition: margin-right var(--animation-speed) var(--animation-timing-fade-out);
}

@media (min-width: 990px) {
  .page-wrapper {
    height: 100dvh;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  }

  .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
  }
}

.page-wrapper--drawer-open {
  margin-right: var(--theme-drawer-width, var(--sidebar-width));
  transition-timing-function: var(--animation-timing-fade-in);
}

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

img {
  width: 100%;
  height: auto;
}

input,
textarea,
select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

/** override ios and firefox defaults */
select {
  background-color: var(--color-background);
  color: currentcolor;
}

.product-card,
.collection-card,
.predictive-search-results__card--product,
.predictive-search-results__card {
  position: relative;
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
  z-index: var(--layer-flat);
}

.product-card__link {
  position: absolute;
  inset: 0;
}

.product-card__content {
  position: relative;
}

.product-card__content {
  cursor: pointer;
}

@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card-hover-effect-lift .product-card:hover,
  .card-hover-effect-lift .collection-card:hover,
  .card-hover-effect-lift .predictive-search-results__card:hover {
    transform: translateY(calc(-1 * var(--hover-lift-amount)));
  }

  .card-hover-effect-scale .product-card:hover,
  .card-hover-effect-scale .collection-card:hover,
  .card-hover-effect-scale .predictive-search-results__card:hover {
    transform: scale(var(--hover-scale-amount));
  }

  .card-hover-effect-subtle-zoom .card-gallery,
  .card-hover-effect-subtle-zoom .collection-card__image,
  .card-hover-effect-subtle-zoom .product-card__image {
    overflow: hidden;
    transition: transform var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .card-hover-effect-subtle-zoom .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .predictive-search-results__card:hover {
    transform: scale(var(--hover-subtle-zoom-amount));
  }
}

dialog {
  /* the ::backdrop inherits from the originating element, custom properties must be set on the dialog element */
  --backdrop-color-rgb: var(--color-shadow-rgb);

  background-color: var(--color-background);
  color: var(--color-foreground);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

.wrap-text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

p:empty {
  display: none;
}

:first-child:is(p, h1, h2, h3, h4, h5, h6),
:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

/* Remove bottom margin from last text item, or previous to last if the last is empty */
:last-child:is(p, h1, h2, h3, h4, h5, h6),
:where(p, h1, h2, h3, h4, h5, h6):nth-child(2):has(+ :last-child:empty) {
  margin-block-end: 0;
}

/* view transitions */

/*
 * The cross-document (MPA) opt-in `@view-transition { navigation: auto }` is declared per-layout
 * (layout/theme.liquid and layout/password.liquid), because this stylesheet is shared by both layouts
 * and a static stylesheet can't read theme settings.
 * It is gated on the same `settings.page_transition_enabled or settings.transition_to_main_product` condition as the
 * render blocker, so the opt-in and its opt-out switch can never disagree. The rules below only
 * take effect once an `@view-transition` opt-in is active, so they are inert without it.
 */
@media (prefers-reduced-motion: no-preference) {
  /* Keep page interactive while view transitions are running */
  :root {
    view-transition-name: none;
  }

  /* Have the root transition during page navigation */
  html:active-view-transition-type(page-navigation),
  html:active-view-transition-type(product-image-transition) {
    view-transition-name: root-custom;
  }

  ::view-transition {
    pointer-events: none;
  }

  html:active-view-transition-type(page-navigation) main[data-page-transition-enabled='true'] {
    view-transition-name: main-content;
  }

  html:active-view-transition-type(page-navigation) main[data-product-transition='true'][data-template*='product'] {
    view-transition-name: none;
  }

  ::view-transition-old(main-content) {
    animation: var(--view-transition-old-main-content);
  }

  ::view-transition-new(main-content) {
    animation: var(--view-transition-new-main-content);
  }

  html:active-view-transition-type(product-image-transition) {
    [data-view-transition-type='product-image-transition'] {
      view-transition-name: product-image-transition;
    }

    [data-view-transition-type='product-details'] {
      view-transition-name: product-details;
    }
  }

  ::view-transition-group(product-image-transition) {
    z-index: 1;
  }

  ::view-transition-group(product-image-transition),
  ::view-transition-group(product-details) {
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-old(product-image-transition),
  ::view-transition-new(product-image-transition) {
    block-size: 100%;
    overflow: hidden;
    object-fit: cover;
    animation-duration: 0.25s;
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-new(product-details) {
    animation: var(--view-transition-new-main-content);
  }
}

/* Focus */
*:focus-visible {
  outline: var(--focus-outline-width) solid currentcolor;
  outline-offset: var(--focus-outline-offset);
}

@supports not selector(:focus-visible) {
  *:focus {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }
}

.focus-inset {
  outline-offset: calc(var(--focus-outline-width) * -1);
}

/* Layout */
.content-for-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-for-layout > .shopify-section:last-child {
  flex-grow: 1;
}

/* Set up page widths & margins */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: 16px;
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: 40px;
  }
}

.page-width-wide {
  /* NOTE: This results in a page width of 2400px because of how we set up margins with grid */
  --page-content-width: var(--wide-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-normal {
  --page-content-width: var(--normal-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-narrow,
.page-width-content {
  /* NOTE: This results in a page width of 1400px because of how we set up margins with grid */
  --page-content-width: var(--narrow-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-content {
  --page-content-width: var(--normal-content-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

/* Section width full vs. page
   The reason we use a grid to contain the section is to allow for the section to have a
   full-width background image even if the section content is constrained by the page width. Do not try
   to rewrite this to max-width: --page-width; margin: 0 auto;, it doesn't work. */
.section {
  --full-page-grid-central-column-width: min(
    var(--page-width) - var(--page-margin) * 2,
    calc(100% - var(--page-margin) * 2)
  );
  --full-page-grid-margin: minmax(var(--page-margin), 1fr);
  --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width)
    var(--full-page-grid-margin);

  /* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */
  --util-page-margin-offset: max(
    var(--page-margin),
    calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2)
  );

  /* Offset for full-width sections to account for the page margin,
  used for Marquee — note that --util-page-margin-offset doesn't work here */
  --full-page-margin-inline-offset: calc(((100vw - var(--full-page-grid-central-column-width)) / 2) * -1);

  width: 100%;

  /* This is required to make background images work, which are <img> rendered absolutely */
  position: relative;

  /* Set up the grid */
  display: grid;
  grid-template-columns: var(--full-page-grid-with-margins);
  min-height: var(--section-min-height, 'auto');
}

/* Place all direct children in the center column by default */
.section > * {
  grid-column: 2;
}

/* Make the actual section background transparent, and instead apply it to a separate sibling element to enable stacking with hero shadow  */
.shopify-section:not(.header-section) :is(.section, .cart-summary) {
  background: transparent;
}

.shopify-section:not(.header-section):has(.section) {
  position: relative;
}

.shopify-section:not(.header-section) .section-background {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--layer-section-background);
  background-color: var(--color-background);
}

/* For page-width sections, all content goes in the center column */
.section--page-width > * {
  grid-column: 2;
}

/* For full-width sections, content spans all columns */
.section--full-width > * {
  grid-column: 1 / -1;
}

@media screen and (max-width: 749px) {
  .section--mobile-full-width > * {
    grid-column: 1 / -1;
  }
}

/* Some page-width sections should still extend all the way to the right edge of the page, e.g. collection carousel */
.section--page-width.section--full-width-right > * {
  grid-column: 2 / 4;
}

/* For full-width sections with margin, content still spans full width but with space on the sides */
.section--full-width.section--full-width-margin > * {
  grid-column: 1 / -1;

  @media screen and (min-width: 750px) {
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
  }
}

/* Some section content break out to full width of the page */
.section > .force-full-width {
  grid-column: 1 / -1;
}

.section--height-small {
  --section-min-height: var(--section-height-small);
}

.section--height-medium {
  --section-min-height: var(--section-height-medium);
}

.section--height-large {
  --section-min-height: var(--section-height-large);
}

.section--height-full-screen {
  --section-min-height: 100svh;
}

.section-content-wrapper.section-content-wrapper {
  min-height: calc(var(--section-min-height, 'auto') - var(--section-height-offset, 0px));
  position: relative;
  width: 100%;
  height: 100%;
}

/* Utility */

.hidden {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

@media screen and (max-width: 749px) {
  .hidden--mobile,
  .mobile\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  .hidden--desktop,
  .desktop\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

.hide-when-empty:empty {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

.visually-hidden:not(:focus, :active) {
  /* stylelint-disable-next-line declaration-no-important */
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

.contents {
  display: contents;
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.grid {
  --centered-column-number: 12;
  --full-width-column-number: 14;
  --centered: column-1 / span var(--centered-column-number);
  --full-width: column-0 / span var(--full-width-column-number);

  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 750px) {
  .grid {
    display: grid;
    gap: 0;
    grid-template-columns: var(--margin-4xl) repeat(var(--centered-column-number), minmax(0, 1fr)) var(--margin-4xl);
    grid-template-areas: 'column-0 column-1 column-2 column-3 column-4 column-5 column-6 column-7 column-8 column-9 column-10 column-11 column-12 column-13';
  }
}

@media screen and (min-width: 1400px) {
  .grid {
    grid-template-columns:
      1fr repeat(
        var(--centered-column-number),
        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
      )
      1fr;
  }
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.flip-x {
  scale: -1 1;
}

.flip-y {
  scale: 1 -1;
}

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

.text-left {
  --text-align: left;

  text-align: left;
}

.text-center {
  --text-align: center;

  text-align: center;
}

.text-right {
  --text-align: right;

  text-align: right;
}

.text-inherit {
  color: inherit;
}

.user-select-text {
  user-select: text;
}

.justify-left {
  justify-content: left;
}

.justify-center {
  justify-content: center;
}

.justify-right {
  justify-content: right;
}

.title--aligned-center {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.background-image-container {
  overflow: hidden;
  position: absolute;
  inset: 0;
  opacity: var(--image-opacity);
}

.background-image-container img,
.background-image-container svg {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.background-image-fit img,
.background-image-fit svg {
  object-fit: contain;
}

.svg-wrapper {
  color: currentcolor;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  pointer-events: none;
}

.svg-wrapper--smaller {
  width: var(--icon-size-2xs);
  height: var(--icon-size-2xs);
}

.svg-wrapper--small {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.svg-wrapper > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.relative {
  position: relative;
}

/* Icons */
.icon-success,
.icon-error {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
}

.icon-success {
  color: var(--color-success);
}

.icon-error {
  fill: var(--color-error);
}

.icon-default {
  fill: currentColor;
}

[data-placeholder='true'] * {
  cursor: default;
}

/* Base text and heading styles */
body,
.paragraph:not(.button),
.paragraph > *,
.text-block.paragraph :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  text-transform: var(--font-paragraph--case);
  -webkit-font-smoothing: antialiased;
  color: var(--color, var(--color-foreground));
}

/* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */
@media screen and (max-width: 1200px) {
  input.paragraph.paragraph,
  input.paragraph.paragraph:not([type]),
  textarea.paragraph.paragraph,
  select.paragraph.paragraph {
    font-size: max(1rem, var(--font-paragraph--size));
  }
}

.paragraph > small {
  font-size: smaller;
}

/* Typography presets */

h1,
.h1.h1,
.text-block.h1 > *,
.text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h1--family);
  font-style: var(--font-h1--style);
  font-weight: var(--font-h1--weight);
  font-size: var(--font-h1--size);
  line-height: var(--font-h1--line-height);
  letter-spacing: var(--font-h1--letter-spacing);
  text-transform: var(--font-h1--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h1.h1,
  textarea.h1.h1,
  select.h1.h1 {
    font-size: max(1rem, var(--font-h1--size));
  }
}

h2,
.h2.h2,
.text-block.h2 > *,
.text-block.h2 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h2--family);
  font-style: var(--font-h2--style);
  font-weight: var(--font-h2--weight);
  font-size: var(--font-h2--size);
  line-height: var(--font-h2--line-height);
  letter-spacing: var(--font-h2--letter-spacing);
  text-transform: var(--font-h2--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h2.h2,
  textarea.h2.h2,
  select.h2.h2 {
    font-size: max(1rem, var(--font-h2--size));
  }
}

h3,
.h3,
.h3.h3,
.text-block.h3 > *,
.text-block.h3 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h3--family);
  font-style: var(--font-h3--style);
  font-weight: var(--font-h3--weight);
  font-size: var(--font-h3--size);
  line-height: var(--font-h3--line-height);
  letter-spacing: var(--font-h3--letter-spacing);
  text-transform: var(--font-h3--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h3,
  textarea.h3,
  select.h3 {
    font-size: max(1rem, var(--font-h3--size));
  }
}

h4,
.h4.h4,
.text-block.h4 > *,
.text-block.h4 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h4--family);
  font-style: var(--font-h4--style);
  font-weight: var(--font-h4--weight);
  font-size: var(--font-h4--size);
  line-height: var(--font-h4--line-height);
  letter-spacing: var(--font-h4--letter-spacing);
  text-transform: var(--font-h4--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h4.h4,
  textarea.h4.h4,
  select.h4.h4 {
    font-size: max(1rem, var(--font-h4--size));
  }
}

h5,
.h5.h5,
.text-block.h5 > *,
.text-block.h5 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h5--family);
  font-style: var(--font-h5--style);
  font-weight: var(--font-h5--weight);
  font-size: var(--font-h5--size);
  line-height: var(--font-h5--line-height);
  letter-spacing: var(--font-h5--letter-spacing);
  text-transform: var(--font-h5--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h5.h5,
  textarea.h5.h5,
  select.h5.h5 {
    font-size: max(1rem, var(--font-h5--size));
  }
}

h6,
.h6.h6,
.text-block.h6 > *,
.text-block.h6 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h6--family);
  font-style: var(--font-h6--style);
  font-weight: var(--font-h6--weight);
  font-size: var(--font-h6--size);
  line-height: var(--font-h6--line-height);
  letter-spacing: var(--font-h6--letter-spacing);
  text-transform: var(--font-h6--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h6.h6,
  textarea.h6.h6,
  select.h6.h6 {
    font-size: max(1rem, var(--font-h6--size));
  }
}

:first-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-start: 0;
}

:last-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-end: 0;
}

/* Links */
a {
  color: currentcolor;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
  transition: text-decoration-color var(--animation-speed) var(--animation-easing),
    color var(--animation-speed) var(--animation-easing);
}

:is(h1, h2, h3, h4, h5, h6, p) > a:hover {
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
}

/* Add underline to text using our paragraph styles only. */
p:not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)),
.rte :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)) {
  text-decoration-color: currentcolor;

  &:hover {
    text-decoration-color: currentcolor;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
  }
}

.container-background-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

details[open] .summary-closed {
  display: none;
}

details:not([open]) .summary-open {
  display: none;
}

details[open] > summary .icon-animated > svg {
  transform: rotate(180deg);
}

/* iOS fix: hide the default arrow on the summary */
summary::-webkit-details-marker {
  display: none;
}

/* When header is transparent, pull the first main content section up to sit under the floating header */
body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
  margin-top: calc(var(--header-group-height) * -1);
}

body:has(.header[transparent]) #header-group > .header-section {
  z-index: var(--layer-menu-drawer);
}

/* All other header group content should be beneath the floating header,
but above the rest of the page content */
body:has(.header[transparent]) #header-group > *:not(.header-section) {
  z-index: calc(var(--layer-menu-drawer) - 1);
}

.text-block {
  width: 100%;
}

.text-block > *:first-child,
.text-block > *:first-child:empty + * {
  margin-block-start: 0;
}

.text-block > *:last-child,
.text-block > *:has(+ *:last-child:empty) {
  margin-block-end: 0;
}

/* This is to deal with the margin applied to the p when custom styles are enabled. The p isn't the first child anymore due to the style tag */
.text-block > style + * {
  margin-block-start: 0;
}

/* Dialog */
.dialog-modal {
  border: none;
  box-shadow: var(--shadow-popover);

  @media screen and (min-width: 750px) {
    border-radius: var(--style-border-radius-popover);
    max-width: var(--normal-content-width);
  }

  @media screen and (max-width: 749px) {
    max-width: 100%;
    max-height: 100%;
    height: 100dvh;
    width: 100dvw;
    padding: var(--padding-md);
  }
}

.dialog-modal::backdrop {
  transition: backdrop-filter var(--animation-speed) var(--animation-easing);
  backdrop-filter: brightness(1);
  background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
}

.dialog-modal[open] {
  animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }
}

.dialog-modal.dialog-closing {
  animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    opacity: 0;
  }
}

/* stylelint-disable value-keyword-case */
.dialog-drawer {
  --dialog-drawer-opening-animation: move-and-fade;
  --dialog-drawer-closing-animation: move-and-fade;
}

.dialog-drawer--right {
  --dialog-drawer-opening-animation: move-and-fade;
  --dialog-drawer-closing-animation: move-and-fade;
}
/* stylelint-enable value-keyword-case */

.dialog-drawer[open] {
  --start-x: var(--custom-transform-from, 100%);
  --end-x: var(--custom-transform-to, 0px);
  --start-opacity: 1;

  animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
}

.dialog-drawer[open].dialog-closing {
  --start-x: 0px;
  --end-x: 100%;
  --start-opacity: 1;
  --end-opacity: 1;

  animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
}

.dialog-drawer--right[open] {
  --start-x: -100%;
  --start-opacity: 1;
}

.dialog-drawer--right[open].dialog-closing {
  --start-x: 0px;
  --end-x: -100%;
  --start-opacity: 1;
  --end-opacity: 1;

  animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
}

/* Buttons */
.button,
.button-secondary,
.button-custom,
button.shopify-payment-button__button--unbranded {
  --text-align: center;

  display: grid;
  align-content: center;
  text-decoration: none;
  text-align: var(--text-align);
  color: var(--button-color);
  appearance: none;
  background-color: var(--button-background-color);
  border: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  margin-block: 0;
  transition: color var(--animation-speed) var(--animation-easing),
    box-shadow var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing);
  cursor: pointer;
  width: fit-content;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
}

.button {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
}

.button:not(.button-secondary, .button-unstyled) {
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-secondary {
  font-family: var(--button-font-family-secondary);
  text-transform: var(--button-text-case-secondary);
  border-radius: var(--style-border-radius-buttons-secondary);
}

button.shopify-payment-button__button--unbranded {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
}

textarea,
input:not([type='checkbox'], [type='radio']) {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
}

textarea::placeholder,
input::placeholder {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-muted-text));
}

textarea:not(:placeholder-shown)::placeholder,
input:not(:placeholder-shown)::placeholder {
  opacity: 0;
}

/* The declaration above is messing with buttons that have an attribute of hidden as it overwrites the display value */
.button[hidden] {
  display: none;
}

.button[aria-disabled='true'],
.button-secondary[aria-disabled='true'],
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button,
button.shopify-payment-button__button--unbranded {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-primary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);
}

.button:hover,
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

.button-secondary {
  --button-color: var(--color-secondary-button-text);
  --button-background-color: var(--color-secondary-button-background);
  --button-border-color: var(--color-secondary-button-border);
  --button-border-width: var(--style-border-width-secondary);
}

.button-secondary:hover {
  --button-color: var(--color-secondary-button-hover-text);
  --button-background-color: var(--color-secondary-button-hover-background);
  --button-border-color: var(--color-secondary-button-hover-border);
}

.button-custom {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-secondary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);

  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-custom:hover {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

/* Needed to override the default Shopify styles */
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: var(--button-background-color);
}

.button-unstyled {
  display: block;
  padding: 0;
  background-color: inherit;
  color: var(--color-foreground);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
}

.button-unstyled:hover {
  background-color: inherit;
}

/* Default hover dim for link-style buttons, scoped via :where() so component-specific
   hover rules (.facets__clear-all-link, .header-actions__action, etc.) still win. */
:where(.button-unstyled):hover {
  --hover-color-rgb: var(--color-foreground-rgb);

  color: rgb(var(--hover-color-rgb) / var(--opacity-70));
}

.button-unstyled--with-icon {
  color: var(--color-foreground);
  display: flex;
  gap: var(--gap-2xs);
  align-items: center;
}

.button-unstyled--transparent {
  background-color: transparent;
  box-shadow: none;
}

/* Collapsible row */

.icon-caret svg {
  transition: transform var(--animation-speed) var(--animation-easing);
}

.icon-caret--forward svg {
  transform: rotate(-90deg);
}

.icon-caret--backward svg {
  transform: rotate(90deg);
}

summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding-block: var(--padding-sm);
}

summary:hover {
  color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
}

summary .svg-wrapper {
  margin-inline-start: auto;
  height: var(--icon-size-xs);
  width: var(--icon-size-xs);
  transition: transform var(--animation-speed) var(--animation-easing);
}

/* Shared plus/minus icon animations */
summary .icon-plus :is(.horizontal, .vertical) {
  transition: transform var(--animation-speed) var(--animation-easing);
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  opacity: 1;
}

details[open] > summary .icon-plus .horizontal {
  transform: rotate(90deg);
}

details[open] > summary .icon-plus .vertical {
  transform: rotate(90deg);
  opacity: 0;
}

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;
  top: var(--margin-lg);
  right: var(--margin-lg);
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  z-index: var(--layer-flat);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

  /* For the outline radius */
  border-radius: 50%;
}

/* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */

@supports not (background-color: rgb(from red 150 g b / alpha)) {
  /**
    There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround.
    Using element selector to increase specificity.
  **/

  .close-button:focus-visible {
    outline: none;
    overflow: visible;
  }

  .close-button:focus-visible::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--focus-outline-offset));
    border: var(--focus-outline-width) solid currentColor;
    border-radius: 50%;
    display: inherit;
  }
}

.dialog--closed .close-button {
  animation: elementSlideOutBottom calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards;
}

.close-button:hover {
  background-color: transparent;
  opacity: 0.8;
}

.close-button svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

/* Product media */
.product-media {
  display: flex;
  flex: 1;
}

.sticky-content {
  position: sticky;
  top: var(--sticky-header-offset, 0);
  z-index: var(--layer-flat);
}

@media screen and (min-width: 750px) {
  .sticky-content--desktop,
  .sticky-content--desktop.full-height--desktop > .group-block {
    position: sticky;
    top: var(--sticky-header-offset, 0);
    z-index: var(--layer-flat);
  }
}

.price,
.compare-at-price,
.unit-price {
  white-space: nowrap;
}

.unit-price {
  display: block;
  font-size: min(0.85em, var(--font-paragraph--size));
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
}

.tax-note.tax-note.tax-note {
  font-size: min(0.85em, var(--font-paragraph--size));
  font-weight: var(--font-paragraph--weight);
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
}

.tax-note:empty {
  display: none;
}

product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
  margin-block: 0;
}

/* Volume pricing note should match unit-price styling (small, grey text) */
product-price .volume-pricing-note,
product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {
  display: block;
  font-family: var(--font-body--family);
  font-weight: normal;
  font-size: var(--font-size--xs);
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
}

.compare-at-price {
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-30));
}

.price-item__group {
  display: inline-block;
}

/* Spacing style */
.spacing-style {
  --spacing-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --spacing-scale: var(--spacing-scale-default);
  }

  /* Must disable this, when you use these with calc and another unit type, things break — see logo.liquid */
  /* stylelint-disable length-zero-no-unit */
  --padding-block: 0px;
  --padding-block-start: var(--padding-block, 0px);
  --padding-block-end: var(--padding-block, 0px);
  --padding-inline: 0px;
  --padding-inline-start: var(--padding-inline, 0px);
  --padding-inline-end: var(--padding-inline, 0px);
  --margin-block: 0px;
  --margin-block-start: var(--margin-block, 0px);
  --margin-block-end: var(--margin-block, 0px);
  --margin-inline: 0px;
  --margin-inline-start: var(--margin-inline, 0px);
  --margin-inline-end: var(--margin-inline, 0px);
}

.spacing-style,
.inherit-spacing {
  padding-block: calc(var(--padding-block-start) + var(--section-top-offset, 0px)) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  margin-block: var(--margin-block-start) var(--margin-block-end);
  margin-inline: var(--margin-inline-start) var(--margin-inline-end);
}

/* Size style */
.size-style {
  width: var(--size-style-width-mobile, var(--size-style-width));
  height: var(--size-style-height-mobile, var(--size-style-height));

  @media screen and (min-width: 750px) {
    width: var(--size-style-width);
    height: var(--size-style-height);
  }
}

/* Custom Typography style */
.custom-typography,
.custom-typography > * {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  text-transform: var(--text-transform);
  text-wrap: var(--text-wrap);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
}

.custom-typography {
  h1 {
    line-height: var(--line-height--display, var(--line-height));
  }

  h2,
  h3,
  h4 {
    line-height: var(--line-height--heading, var(--line-height));
  }

  p {
    line-height: var(--line-height--body, var(--line-height));
  }
}

.custom-font-size,
.custom-font-size > * {
  font-size: var(--font-size);
}

.custom-font-weight,
.custom-font-weight > * {
  font-weight: var(--font-weight);
}

/* Border override style */
.border-style {
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  border-radius: var(--border-radius);
}

/* Gap scaling style */
.gap-style,
.layout-panel-flex {
  --gap-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --gap-scale: var(--spacing-scale-default);
  }
}

.layout-panel-flex {
  display: flex;
  gap: var(--gap);
  height: 100%;
}

.shopify-block:has(> [shopify-block-empty]) {
  display: none;
}

.layout-panel-flex--row {
  flex-flow: row var(--flex-wrap);
  justify-content: var(--horizontal-alignment);
  align-items: var(--vertical-alignment);
}

.layout-panel-flex--column {
  flex-flow: column var(--flex-wrap);
  align-items: var(--horizontal-alignment);
  justify-content: var(--vertical-alignment);
}

@media screen and (max-width: 749px) {
  .mobile-column {
    flex-flow: column nowrap;
    align-items: var(--horizontal-alignment);
    justify-content: var(--vertical-alignment-mobile);
  }

  .layout-panel-flex--row:not(.mobile-column) {
    flex-wrap: var(--flex-wrap-mobile);
    height: auto;

    > .menu {
      flex: 1 1 min-content;
    }

    > .text-block {
      flex: 1 1 var(--max-width--display-tight);
    }

    > .image-block {
      flex: 1 1 var(--size-style-width-mobile-min);
    }

    > .button {
      flex: 0 0 fit-content;
    }

    > .group-block--height-fill {
      height: calc(var(--section-min-height, auto) - var(--section-height-offset, 0px));
    }
  }
}

@media screen and (min-width: 750px) {
  .layout-panel-flex {
    flex-direction: var(--flex-direction);
  }
}

/* Form fields */
.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--animation-speed) ease;
}

.field__input {
  flex-grow: 1;
  text-align: left;
  border-radius: var(--style-border-radius-inputs);
  transition: box-shadow var(--animation-speed) ease, background-color var(--animation-speed) ease;
  padding: var(--input-padding);
  box-shadow: var(--input-box-shadow);
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: none;
  outline: none;
  font-size: var(--font-paragraph--size);

  &:autofill {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }
}

.field__input:focus {
  box-shadow: var(--input-box-shadow-focus);
}

.field__input--button-radius {
  border-radius: var(--style-border-radius-buttons-primary);
}

.field__input--button-padding {
  padding-inline: var(--padding-3xl);
}

.field__label {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-80));
  font-size: var(--font-paragraph--size);
  left: var(--input-padding-x);
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--animation-speed) ease, font-size var(--animation-speed) ease;
}

/* RTE styles */
.rte,
.shopify-policy__title {
  :is(h1, h2, h3, h4, h5, h6) {
    margin-block: clamp(1.5rem, 1em * 3.3, 2.5rem) var(--font-heading--spacing);
  }

  :first-child:is(p, h1, h2, h3, h4, h5, h6),
  :first-child:empty + :is(p, h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
  }

  ul,
  ol {
    margin-block-start: 0;
    padding-inline-start: 1.5em;
  }

  /* Only apply margin-block-end to the higher level list, not nested lists */
  :is(ul, ol):not(:is(ul, ol) :is(ul, ol)) {
    margin-block-end: 1em;
  }

  blockquote {
    margin-inline: 1.5em 2.3em;
    margin-block: 3.8em;
    padding-inline-start: 0.8em;
    border-inline-start: 1.5px solid rgb(var(--color-foreground-rgb) / var(--opacity-25));
    font-style: italic;
    font-weight: 500;
  }

  .rte-table-wrapper {
    overflow-x: auto;
  }

  table {
    /* stylelint-disable-next-line declaration-no-important */
    width: 100% !important;
    border-collapse: collapse;
  }

  tr:not(:has(td)),
  thead {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    font-weight: bold;
    text-transform: uppercase;
  }

  tr:has(td) {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  th,
  td {
    text-align: start;
    padding-inline: var(--padding-md);
    padding-block: var(--padding-sm);
  }
}

.shopify-policy__container {
  padding-block: var(--padding-xl);
}

/* Radio buttons and checkboxes - shared base styles */
:where(input[type='radio']),
:where(input[type='checkbox']) {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  aspect-ratio: 1;
  margin: 0;
  margin-inline-end: var(--padding-3xs);
  padding: 0;
  border: var(--checkbox-border);
  appearance: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

/* Radio buttons */
input[type='radio'] {
  border-radius: var(--style-border-radius-50);
  background: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='radio']):checked {
  border-color: var(--color-foreground);
  background: var(--color-background);
}

:where(input[type='radio']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--checkbox-size) / 2);
  height: calc(var(--checkbox-size) / 2);
  background: var(--color-foreground);
  border-radius: var(--style-border-radius-50);
  transition: background 0.2s ease;
}

:where(input[type='radio']):disabled {
  border-color: var(--input-disabled-border-color);
  background-color: var(--input-disabled-background-color);
  cursor: not-allowed;
}

:where(input[type='radio']):disabled:checked::after {
  background: var(--input-disabled-background-color);
}

:where(input[type='radio']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='radio']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: var(--color-background);
}

:where(input[type='radio']):not(:disabled):hover:checked::after {
  background: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

/* Checkboxes */
:where(input[type='checkbox']) {
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='checkbox']):checked {
  background-color: var(--color-foreground);
  border-color: var(--color-foreground);
}

:where(input[type='checkbox']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background-color: var(--color-background);
  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

:where(input[type='checkbox']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='checkbox']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

:where(input[type='checkbox']):disabled {
  background-color: var(--input-disabled-background-color);
  border-color: var(--input-disabled-border-color);
  cursor: not-allowed;
}

:where(input[type='checkbox']):disabled:checked::after {
  background-color: var(--input-disabled-text-color);
}

/* Shared styles for radio buttons and checkboxes */
:where(input[type='radio']) + label,
:where(input[type='checkbox']) + label {
  display: inline;
  vertical-align: middle;
  cursor: pointer;
}

:where(input[type='radio']):disabled + label,
:where(input[type='checkbox']):disabled + label {
  color: var(--input-disabled-text-color);
  cursor: not-allowed;
}

/* Flexbox for labels wrapping radio buttons or checkboxes */
label:has(input[type='radio']),
label:has(input[type='checkbox']) {
  display: inline-flex;
  align-items: center;
  gap: var(--padding-2xs);
  cursor: pointer;
}

label:has(input[type='radio']:disabled),
label:has(input[type='checkbox']:disabled) {
  cursor: not-allowed;
}

/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------ */

/* Animation declarations - to be kept at the bottom of the file for ease of find */
@keyframes grow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes move-and-fade {
  from {
    transform: translate(var(--start-x, 0), var(--start-y, 0));
    opacity: var(--start-opacity, 0);
  }

  to {
    transform: translate(var(--end-x, 0), var(--end-y, 0));
    opacity: var(--end-opacity, 1);
  }
}

@keyframes slideInTopViewTransition {
  from {
    transform: translateY(100px);
  }
}

@keyframes elementSlideInTop {
  from {
    margin-top: var(--padding-sm);
    opacity: 0;
  }

  to {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes elementSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

@keyframes elementSlideInBottom {
  from {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes elementSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInTop {
  from {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }

  to {
    transform: translateY(-50%);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutTop {
  from {
    transform: translateY(-50%);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes search-element-slide-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes search-element-slide-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

@keyframes dialogZoom {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.95) translateY(1em);
  }
}

@keyframes thumbnail-selected {
  0%,
  100% {
    box-shadow: 0 0 0 2px transparent;
    scale: 0.9;
  }

  50% {
    box-shadow: 0 0 0 2px #000;
    scale: 1;
  }
}

@keyframes backdropFilter {
  from {
    backdrop-filter: brightness(1);
  }

  to {
    backdrop-filter: brightness(0.75);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideInTop {
  from {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes modalSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

/* Slideshow Arrow Hover Animation - must stay in base.css for proper CSS cascade */

:not(.media-gallery--carousel)
  > :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover))
  > slideshow-container
  > slideshow-arrows
  .slideshow-control {
  animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
}

@keyframes arrowsSlideIn {
  from {
    transform: translate(var(--padding-sm), 0);
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.section-resource-list,
.section-carousel {
  row-gap: var(--gap);
}

.section-resource-list__content {
  display: flex;
  flex-direction: column;
  align-items: var(--horizontal-alignment);
  gap: var(--gap);
  width: 100%;
}

.section-resource-list__content:empty {
  display: none;
}

.section-resource-list__header:is(:empty, :has(.group-block-content:empty)),
.section-resource-list__content:empty {
  display: none;
}

:where(.section-resource-list.section--full-width) product-card[data-product-transition] > .group-block,
:where(.section-carousel.section--full-width) product-card[data-product-transition] > .group-block {
  @media screen and (max-width: 749px) {
    padding-inline: max(var(--padding-xs), var(--padding-inline-start))
      max(var(--padding-xs), var(--padding-inline-end));
  }
}

/* Base styles */
.group-block,
.group-block-content {
  position: relative;
}

.group-block:has(> video-background-component),
.group-block:has(> .background-image-container) {
  overflow: hidden;
}

.group-block-content {
  height: 100%;
  width: 100%;
}

/* Container styles */
.section-content-wrapper.section-content-wrapper:where(.layout-panel-flex) .group-block--fill {
  flex: 1;
}

/* Flex behavior for width variants */
.layout-panel-flex--row > .group-block--width-fit {
  flex: 0;
}

.layout-panel-flex--row > .group-block--width-fill {
  flex: 1;
}

.layout-panel-flex--row > .group-block--width-custom {
  flex-basis: var(--size-style-width);
}

/* Dimension utilities - Height */
.group-block--height-fit {
  height: auto;
}

.group-block--height-custom,
.group-block--height-fill {
  height: var(--size-style-height);
}

/* Flex behavior for height variants */
.layout-panel-flex--column > .group-block--height-fit {
  flex: 0 1 auto;
}

.layout-panel-flex--column > .group-block--height-fill {
  flex: 1;
}

.layout-panel-flex--column > .group-block--height-custom {
  flex-basis: var(--size-style-height);
}

/* Animation transitions */
.transition-background-color {
  transition: background-color var(--animation-speed-medium) ease-in-out;
}

.transition-transform {
  transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
}

.transition-border-color {
  transition: border-color var(--animation-speed-medium) var(--animation-timing-hover);
}

/* Global scrollbar styles */

/* Webkit browsers */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.product-card:hover,
.collection-card:hover,
.predictive-search-results__card--product:hover,
.predictive-search-results__card:hover {
  position: relative;
  z-index: var(--layer-raised);
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
}

/* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */
@media screen and (max-width: 1200px) {
  input,
  textarea,
  select,
  /* Higher specificity to override type preset classes like .paragraph, .h1, etc. */
  .paragraph.paragraph input,
  .paragraph.paragraph textarea,
  .paragraph.paragraph select,
  .h1.h1 input,
  .h1.h1 textarea,
  .h1.h1 select,
  .h2.h2 input,
  .h2.h2 textarea,
  .h2.h2 select,
  .h3.h3 input,
  .h3.h3 textarea,
  .h3.h3 select,
  .h4.h4 input,
  .h4.h4 textarea,
  .h4.h4 select,
  .h5.h5 input,
  .h5.h5 textarea,
  .h5.h5 select,
  .h6.h6 input,
  .h6.h6 textarea,
  .h6.h6 select {
    font-size: max(1rem, 100%);
  }
}

/* When the header is transparent, and when there is no header-section below it, offset the first main-section with
 * the height of the header
 */
main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
  &.spacing-style,
  .spacing-style {
    --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

    /* Any nested sections should not be offset */
    :is(.spacing-style, .inherit-spacing) {
      --section-top-offset: 0px;
    }
  }

  /* Make sticky content immediately stick to the top of the page */
  .sticky-content {
    margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
  }
}
/* ==========================================================
   CUSTOM - PREMIUM EXPERIENCE
   ========================================================== */
   /* ==========================================================
   CUSTOM - PREMIUM EXPERIENCE
   ========================================================== */

:root{
  --page-max-width: 1440px;
  --section-spacing: clamp(80px, 10vw, 180px);

  --color-bg:#0b0b0d;
  --color-surface:#121215;
  --color-text:#ffffff;
  --color-text-soft:#b8b8bd;
  --color-accent:#d7b07a;

  --radius-xl:32px;

  --transition:0.45s cubic-bezier(.22,.61,.36,1);
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--color-bg);
  color:var(--color-text);
}
/* ===== HEADER ===== */

.shopify-section-header {
  transition: all .4s ease;
}

.shopify-section-header header {
  max-width: 1440px;
  margin: 18px auto 0;
  padding: 0 28px;
}

.shopify-section-header.header--transparent header {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
/* ===== PREMIUM HEADER V1 ===== */

#header-component{
  max-width: 1440px;
  margin: 18px auto 0;
  padding: 0 24px;
}

#header-component .header__row{
  border-radius: 24px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(18,18,21,.12) !important;
  border: 1px solid rgba(255,255,255,.12);
}
/* Mantener el estilo premium al hacer hover */

#header-component .header__row:hover{
  background: rgba(18,18,21,.12) !important;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}
/* ===== Horizon Header Fix ===== */

#header-component{
  --color-background-top-row: rgba(18,18,21,.12) !important;
  --color-background-bottom-row: rgba(18,18,21,.12) !important;
}
/* ==========================================================
   HERO V1
========================================================== */

.pm-hero{
    position:relative;
    overflow:hidden;

    display:flex;
    align-items:center;

    min-height:100vh;
    padding:140px 0;

    background:#050505;
    color:#fff;
}

/* Atmósfera que conecta con Benefits */

.pm-hero::after{

    content:"";

    position:absolute;

    left:-15%;
    right:-15%;

    bottom:-320px;

    height:950px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(120,18,12,.18) 0%,
            rgba(90,12,10,.10) 28%,
            rgba(55,8,8,.05) 48%,
            transparent 78%
        );

    filter:blur(120px);

    pointer-events:none;

    z-index:1;
}

.pm-hero__container{

    position:relative;
    z-index:2;

    max-width:1400px;

    margin:0 auto;

    padding:0 80px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:80px;

    transition:
        transform .6s ease,
        opacity .6s ease;
}

.pm-hero__left{

    width:48%;
    max-width:480px;
}

.pm-hero__right{

    width:55%;

    display:flex;
    justify-content:flex-start;
    align-items:center;

    padding-left:30px;
}

/* ---------- Texto ---------- */

.pm-eyebrow,
.pm-hero__eyebrow{

    display:inline-block;

    color:#d9b57a;

    font-size:.85rem;

    letter-spacing:.22em;

    text-transform:uppercase;
}

.pm-hero h1{

    margin:20px 0;

    color:#fff;

    font-size:clamp(56px,6vw,88px);

    line-height:.95;
}

.pm-hero p{

    max-width:520px;

    color:#b9b9b9;

    font-size:20px;

    line-height:1.7;
}

/* ---------- Botón ---------- */

.pm-button,
.pm-hero__left a{

    display:inline-flex;

    justify-content:center;
    align-items:center;

    margin-top:36px;

    padding:16px 34px;

    border-radius:999px;

    background:#fff;
    color:#000;

    text-decoration:none;
    font-weight:600;

    transition:all .3s ease;
}

.pm-button:hover,
.pm-hero__left a:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 45px rgba(255,255,255,.18);
}

/* ---------- Producto ---------- */

.pm-hero__product{

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;
}

.pm-hero__product img{

    position:relative;

    z-index:3;

    width:760px;
    max-width:none;

    transform:translateY(-25px);

    animation:
        lampFloat 6s ease-in-out infinite,
        lampGlow 5s ease-in-out infinite;
}

/* ---------- Animaciones ---------- */

@keyframes lampFloat{

    0%{transform:translateY(-25px);}
    50%{transform:translateY(-33px);}
    100%{transform:translateY(-25px);}
}

@keyframes lampGlow{

    0%,100%{

        filter:
            brightness(1)
            drop-shadow(0 0 18px rgba(255,210,120,.20))
            drop-shadow(0 0 55px rgba(255,180,80,.12));

    }

    50%{

        filter:
            brightness(1.08)
            drop-shadow(0 0 30px rgba(255,220,150,.30))
            drop-shadow(0 0 90px rgba(255,190,90,.20));

    }
}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }
}

.pm-hero__left > *{

    opacity:0;

    animation:heroFade .9s ease forwards;
}

.pm-hero__eyebrow{animation-delay:.15s;}
.pm-hero__left h1{animation-delay:.35s;}
.pm-hero__left p{animation-delay:.55s;}
.pm-hero__left a{animation-delay:.75s;}

/* ==========================================================
   PM BENEFITS
========================================================== */

.pm-benefits{

    position:relative;
    overflow:hidden;

    padding:180px 0;

    background:#000;
    color:#fff;
}

/* Atmósfera que recibe el Hero */

.pm-benefits::before{

    content:"";

    position:absolute;

    inset:-450px 0 -120px;

    background:
        radial-gradient(
            ellipse at 50% 110%,
            rgba(150,35,20,.22) 0%,
            rgba(110,22,15,.12) 28%,
            rgba(60,10,10,.05) 52%,
            transparent 82%
        );

    filter:blur(80px);

    pointer-events:none;

    z-index:1;
}

.pm-benefits__container{

    position:relative;
    z-index:2;

    width:min(900px,90%);

    margin:0 auto;

    text-align:center;
}

.pm-benefits span{

    display:inline-block;

    margin-bottom:24px;

    color:#d9b36b;

    font-size:13px;

    letter-spacing:.25em;

    text-transform:uppercase;
}

.pm-benefits h2{

    margin:0;

    font-size:clamp(54px,6vw,72px);

    line-height:1.05;

    font-weight:700;
}

.pm-benefits p{

    max-width:650px;

    margin:32px auto 0;

    color:#a5a5a5;

    font-size:22px;

    line-height:1.7;
}
/*=============================
PM TIMELINE
==============================*/

.pm-timeline{
    background:#000;
    color:#fff;
    padding:220px 0 150px;
    position:relative;
    z-index:1;
    --pm-sunrise:0;

    --pm-glow:#ff3b30;
}
.pm-timeline::before{

    content:"";

    position:absolute;

    top:-55vh;
left:0;
right:0;
bottom:-900px;

    pointer-events:none;

    z-index:2;

    opacity:0;

    background:

    radial-gradient(
  ellipse at 50% 8%,

color-mix(in srgb, var(--pm-glow) 75%, transparent) ,
color-mix(in srgb, var(--pm-glow) 45%, transparent) ,
color-mix(in srgb, var(--pm-glow) 18%, transparent) ,
rgba(255,120,40,.10) 88%,
rgba(255,100,30,.04) 97%,
rgba(255,100,30,.01) 99%,
rgba(255,100,30,0) 100%
),

    radial-gradient(
        circle at 50% 82%,
        rgba(255,140,70,.16) 0%,
        rgba(255,140,70,.08) 22%,
        rgba(255,140,70,0) 46%
    ),

    radial-gradient(
        circle at 50% 92%,
        rgba(255,200,120,.10) 0%,
        rgba(255,200,120,0) 60%
    );

    transition:opacity .15s linear;
    mask-image: linear-gradient(
  to bottom,
  transparent 0%,
  black 20%,
  black 72%,
  transparent 100%
);

-webkit-mask-image: linear-gradient(
  to bottom,
  transparent 0%,
  black 20%,
  black 72%,
  transparent 100%
);
}
.pm-timeline{

    --pm-sunrise:0;

    --pm-r:255;
    --pm-g:59;
    --pm-b:48;

}

.pm-timeline::before{

    opacity:calc(.25 + (var(--pm-sunrise) * .95));
}

.pm-timeline__container{

  width:min(1100px,90%);

  margin:0 auto;

}

.pm-timeline__eyebrow{

  display:block;

  color:#9b9b9b;

  letter-spacing:.18em;

  font-size:12px;

  margin-bottom:28px;

}

.pm-timeline h2{

  font-size:clamp(52px,6vw,88px);

  line-height:.95;

  font-weight:700;

  max-width:760px;

  margin:0;

}

.pm-timeline>div>p{

  margin-top:40px;

  max-width:620px;

  color:#8f8f8f;

  font-size:22px;

  line-height:1.7;

}
.pm-line{

  margin-top:180px;

  position:relative;

  padding-left:70px;
z-index:20;
}

.pm-line::before{

  content:"";
z-index:-2;
  position:absolute;

  left:18px;

  top:0;

  bottom:150px;

  width:2px;

  background:linear-gradient(
  to bottom,
  #ff3b30 0%,
  #ff6b35 32%,
  #ff9f1c 66%,
  #ffd60a 100%
);

}

.pm-step{

  position:relative;
z-index:3;
  margin-bottom:140px;

}

.pm-step::before{
  content:"";
  position:absolute;

  width:18px;
  height:18px;

  border-radius:50%;
  background:#ff3b30;
border:none;

  box-shadow:
    0 0 12px currentColor,
    0 0 22px currentColor;
}
.pm-step:nth-child(1)::before{
    background:#ff3b30;
    left:-60px;
    top:2px;
}

.pm-step:nth-child(2)::before{
    background:#ff6b35;
}

.pm-step:nth-child(3)::before{
    background:#ff9f1c;
}

.pm-step:nth-child(4)::before{
    background:#ffd60a;
}
.pm-step:nth-child(4)::before{
  top:auto;
  bottom:139px;
  left:-60px;
}
.pm-step:nth-child(1)::before{
    box-shadow:0 0 12px #ff3b30,0 0 22px #ff3b30;
}

.pm-step:nth-child(2)::before{
    box-shadow:0 0 12px #ff6b35,0 0 22px #ff6b35;
}

.pm-step:nth-child(3)::before{
    box-shadow:0 0 12px #ff9f1c,0 0 22px #ff9f1c;
}

.pm-step:nth-child(4)::before{
    box-shadow:0 0 12px #ffd60a,0 0 22px #ffd60a;
}
.pm-step:nth-child(1){
  color:#ff3b30;
}

.pm-step:nth-child(2){
  color:#ff6b35;
}

.pm-step:nth-child(3){
  color:#ff9f1c;
}

.pm-step:nth-child(4){
  color:#ffd60a;
}

.pm-time{

  display:block;

  color:#8d8d8d;

  font-size:14px;

  margin-bottom:16px;

  letter-spacing:.12em;

}

.pm-step h3{
  color:#fff;
}

.pm-step p{
  color:rgba(255,255,255,.65);
}
.pm-step .pm-time{
  color:currentColor;
}
.pm-layout{
  position:relative;
z-index:20;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:120px;
    align-items:center;
    margin-top:80px;
}

.pm-timeline__visual{

    position:relative;

    min-height:700px;

    display:flex;

    justify-content:center;

    align-items:flex-start;
}
@media screen and (max-width:749px){

  #pm-timeline-{{ section.id }} .pm-step:nth-child(4){
    transform:none !important;
  }
#pm-timeline-{{ section.id }} .pm-step:nth-child(1){
    transform:none !important;
  }
}

/* ===========================
   PM Timeline Lamp
=========================== */

.pm-timeline__visual{
    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    height:calc(100vh - 80px);
    z-index:20;
}

.pm-lamp{
    position:relative;
    width:100%;
    display:flex;
    justify-content:center;
    padding-top:20px;

    transform:translateY(120px);
    transition:transform .12s linear;
    z-index:20;
}
.pm-lamp::before{

    content:"";

    position:absolute;

    left:50%;
    top:40px;

    transform:translateX(-50%);

    width:650px;
height:650px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(255,245,215,.42) 0%,
        rgba(255,225,170,.20) 14%,
        rgba(255,210,140,0) 28%
    ),

    radial-gradient(
        circle,
        rgba(255,180,90,.10) 0%,
        rgba(255,140,70,.05) 42%,
        rgba(255,140,70,0) 82%
    );

    filter:blur(70px);

    opacity:calc(var(--pm-sunrise) * .95);

    pointer-events:none;

    z-index:-1;
}

.pm-lamp img{
    width:min(520px,100%);
    height:auto;
    display:block;

    animation:lampFloat 7s ease-in-out infinite;
    filter:
    drop-shadow(0 25px 40px rgba(0,0,0,.35))
    drop-shadow(0 0 45px rgba(255,220,150,.14));
}
.pm-lamp img{
  transition:
    filter .7s ease,
    transform .7s ease;
}

.pm-lamp img{

    transition:
        filter .5s ease,
        transform .5s ease;
}

.pm-lamp img{

    filter:

    brightness(calc(.96 + (.18 * var(--pm-sunrise))))

    contrast(calc(.98 + (.08 * var(--pm-sunrise))))

    saturate(calc(1 + (.10 * var(--pm-sunrise))))

    drop-shadow(0 25px 40px rgba(0,0,0,.35))

    drop-shadow(
        0 0
        calc(45px + (90px * var(--pm-sunrise)))
        rgba(
            255,
            225,
            170,
            calc(.12 + (.38 * var(--pm-sunrise)))
        )
    );
}
.pm-step::before{

    content:"";

    position:absolute;

    left:-61px;

    top:8px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#646464;

    transition:.45s;

}
.pm-step.active::before{

    transform:scale(1.35);

    box-shadow:inherit;

}
.pm-step:nth-child(1).active::before{

    box-shadow:
        0 0 25px #ff3b30,
        0 0 50px rgba(255,59,48,.45);

}

.pm-step:nth-child(2).active::before{

    box-shadow:
        0 0 25px #ff6b35,
        0 0 50px rgba(255,107,53,.45);

}

.pm-step:nth-child(3).active::before{

    box-shadow:
        0 0 25px #ff9f1c,
        0 0 50px rgba(255,159,28,.45);

}

.pm-step:nth-child(4).active::before{

    box-shadow:
        0 0 25px #ffd60a,
        0 0 50px rgba(255,214,10,.45);

}
.pm-step{

    opacity:.28;

    transform:translateY(40px);

    transition:
        opacity .7s,
        transform .7s;
}
.pm-step.active{

    opacity:1;

    transform:translateY(0);
}
.pm-step.active h3{

    color:#fff;

    filter:brightness(1.08);

    transition:
        color .6s ease,
        filter .6s ease;

    text-shadow:
        0 0 12px rgba(255,235,190,.10);
}

.pm-step.active p{

    color:#bfbfbf;

    transition:color .6s ease;
}

.pm-step.active .pm-time{

    color:#d9c08a;

    transition:color .6s ease;
}
.pm-line::after{
    content:"";
    position:absolute;
    z-index:-1;
    left:18px;
    top:0;

    width:2px;
    height:calc(100% - 150px);
max-height:calc(100% - 150px);
    background:var(--pm-line-color, #ff3b30);

    transition:
    background .45s ease;

    box-shadow:none;
}
.pm-lamp::after{

    content:"";

    position:absolute;

    width:170px;
    height:170px;

    left:50%;
    top:45px;

    transform:translateX(-50%);

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,245,215,.95) 0%,
        rgba(255,225,170,.45) 45%,
        rgba(255,210,140,0) 75%
    );

    filter:blur(28px);

    pointer-events:none;

    z-index:-1;
}
@media screen and (max-width:749px){

  .pm-timeline .pm-step:last-child{
    margin-bottom:5px;
  }

}
/* =====================================================
   CUSTOM EXPERIENCE V2
===================================================== */
/* =====================================================
   PM EXPERIENCE
===================================================== */

.pm-experience{
    background:#000;
    color:#fff;
    padding:90px 0 180px;
    overflow:hidden;
    position:relative;
}

.pm-experience__container{
    position:relative;
z-index:20;
    width:min(1400px,92%);
    margin:auto;
    
}

.pm-experience__container{

    width:min(1400px,92%);

    margin:auto;
}
.pm-experience__content{
  position:relative;
z-index:20;
}
.pm-experience__visual{
  position:relative;
z-index:20;
}
.pm-experience__header{

    text-align:center;

    margin-bottom:120px;
}

.pm-experience__eyebrow{

    display:inline-block;

    color:#d9b36b;

    letter-spacing:.22em;

    font-size:13px;

    margin-bottom:24px;
}

.pm-experience h2{

    font-size:clamp(54px,6vw,88px);

    line-height:.95;

    margin:0;
}

.pm-experience__header p{

    color:#8d8d8d;

    font-size:22px;

    margin-top:28px;
}

.pm-product{

    position:relative;

    width:min(980px,92vw);

    margin:60px auto 0;
}
/* Resplandor superior de la lámpara */
.pm-product::before{
    content:"";
display:block;
    position:absolute;

    left:50%;
    bottom: 38%;

    transform:translateX(-50%);

    width: 1800px;
height: 600px;

    pointer-events:none;
    z-index:0;

    background:
    radial-gradient(
        ellipse at center bottom,
        rgba(255,220,150,.60) 0%,
        rgba(255,180,90,.42) 16%,
        rgba(255,150,60,.24) 34%,
        rgba(255,120,40,.10) 52%,
        rgba(255,100,30,0) 74%
    );

    filter: blur(170px);

    mask-image:linear-gradient(
        to top,
        black 0%,
        black 72%,
transparent 100%
    );

    -webkit-mask-image:linear-gradient(
        to top,
        black 0%,
        black 55%,
        transparent 100%
    );
}
.pm-product::after{

    content:"";
display:none;
    position:absolute;

    left:50%;
    bottom: 38%;

    width:1950px;
    height:800px;

    pointer-events:none;
    z-index:0;

    transform:
        translateX(-50%)
        rotate(18deg);

    background:radial-gradient(
        ellipse at center bottom,
        rgba(255,220,150,.38) 0%,
        rgba(255,180,90,.22) 30%,
        rgba(255,140,60,.10) 50%,
        rgba(255,100,30,0) 72%
    );

    filter:blur(80px);
}

.pm-product__image{

    display:block;

    width:100%;

    height:auto;
  transition:
    opacity .75s ease-in-out,
    filter .75s ease-in-out;
}
.pm-product__images{
  position:relative;
  width:100%;

  z-index:2;

  pointer-events:none;
}

.pm-product__images .pm-product__image{
  display:block;
  width:100%;
  height:auto;

  transition:
    opacity 1.15s ease-in-out,
    filter 1.15s ease-in-out;

  will-change:
    opacity,
    filter;
}
.pm-experience.is-display-active
.pm-product__images .pm-product__image{
  transition:
    opacity .28s ease-in-out,
    filter .28s ease-in-out;
}

/* Primera imagen mantiene el tamaño del contenedor */

.pm-product__image--a{
  position:relative;
}


/* Segunda imagen exactamente encima */

.pm-product__image--b{
  position:absolute;
  inset:0;
}


/* Imagen oculta */

.pm-product__images .pm-product__image{
  opacity:0;

  filter:
    brightness(.94);
}


/* Imagen visible */

.pm-product__images .pm-product__image.is-visible{
  opacity:1;

  filter:
    brightness(1);
}
.pm-callout{

    position:absolute;

    top:22%;
    right:-250px;

    display:grid;

    grid-template-columns:220px 18px 18px auto;

    align-items:flex-start;
}
.pm-callout__content{
    margin-left:14px;
}

.pm-callout__line{

    width:100%;
    height:2px;

    background:linear-gradient(
        to right,
        rgba(255,220,150,.05),
        rgba(255,220,150,.8)
    );
}

.pm-callout__dot{

    width:18px;
    height:18px;

    margin-left:-9px;

    border-radius:50%;

    background:#FFD57A;

    box-shadow:0 0 30px rgba(255,213,122,.9);
}

.pm-callout__content h3{

    font-size:34px;
    font-weight:700;
}

.pm-callout__content p{

    font-size:20px;
    line-height:1.6;
    max-width:320px;
}

.pm-product img{

    display:block;

    width:100%;

    height:auto;
}

.pm-hotspot{
  position:absolute;

  display:flex;
  align-items:center;

  gap:14px;

  z-index:5;

  cursor:pointer;
  pointer-events:auto;
}
.pm-hotspot--left{
    flex-direction:row-reverse;
    text-align:right;
}
.pm-hotspot--left span::before{
    right:auto;
    left:100%;
}
.hotspot-1{
    top:17%;
    right:-260px;
}
.pm-hotspot span{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#FFD57A;
  box-shadow:0 0 22px rgba(255,213,122,.85);
  flex:none;
  position: relative;
}

.pm-hotspot span::before{
    content:"";
    position:absolute;
    top:50%;
    right:100%;
    width:200px;
    height:1px;
    background:rgba(255,213,122,.45);
    transform:translateY(-50%);
}
/* LONGITUDES INDIVIDUALES */

/* Sunrise LEDs */
.hotspot-1 span::before{
    width:170px;
}

/* Sonido */
.hotspot-2 span::before{
    width:260px;
}
@media screen and (min-width:750px){

  .hotspot-2 > span{
    transform:translateX(-180px);
  }

  @media screen and (min-width:750px){

  .hotspot-2 > div{
    position:relative;
    left:-40px;
  }

}
}

/* Control táctil */
.hotspot-3 span::before{
    width:240px;
}

/* Pantalla */
.hotspot-4 span::before{
    width:170px;
}

/* Doble alarma */
.hotspot-5 span::before{
    width:220px;
}
.pm-hotspot h3{
  margin:0;
  font-size:34px;
}

.pm-hotspot p{
  margin-top:10px;
  font-size:20px;
  line-height:1.6;
  max-width:320px;
  color:#bdbdbd;
}

/* POSICIONES */

.hotspot-1{
  top:15%;
  right:-360px;
}

.hotspot-2{
    top: 52%;
    left: -400px;
}

.hotspot-3{
    top: 8%;
    left: -340px;
}

.hotspot-4{
    top:76%;
    right:-250px;
}

.hotspot-5{
    top:77%;
    left:-340px;
}
/* PM Experience Animation */

.hotspot-1 span::after{
    animation: pmRing 7.5s ease-in-out infinite;
    animation-delay:0s;
}

.hotspot-2 span::after{
    animation: pmRing 7.5s ease-in-out infinite;
    animation-delay:1.5s;
}

.hotspot-3 span::after{
    animation: pmRing 7.5s ease-in-out infinite;
    animation-delay:3s;
}

.hotspot-4 span::after{
    animation: pmRing 7.5s ease-in-out infinite;
    animation-delay:4.5s;
}

.hotspot-5 span::after{
    animation: pmRing 7.5s ease-in-out infinite;
    animation-delay:6s;
}
.pm-hotspot span{
    position:relative;
}

.pm-hotspot span::after{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:50%;
    border:1px solid rgba(255,213,122,.65);
    opacity:0;
    transform:scale(.6);
}
@keyframes pmRing{

    0%,20%,100%{
        opacity:0;
        transform:scale(.6);
    }

    35%{
    opacity:.9;
    transform:scale(1.2);
}

55%{
    opacity:.75;
    transform:scale(1.8);
}

75%{
    opacity:0;
    transform:scale(2.5);
}

}
@media screen and (max-width:749px){

  .pm-experience .pm-hotspot{
    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;
    gap:0;

    z-index:50;

    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .pm-experience .pm-hotspot > span{
    pointer-events:none;
  }

  .pm-experience .pm-hotspot > span::before,
  .pm-experience .pm-hotspot > span::after,
  .pm-experience .pm-hotspot::before,
  .pm-experience .pm-hotspot::after{
    pointer-events:none !important;
  }

}
@media screen and (max-width:749px){

  .pm-experience .pm-hotspot > div{
    display:none !important;
  }

}
@media screen and (max-width:749px){

  .pm-experience .pm-product__image{
    pointer-events:none !important;
  }

}
/* =====================================================
   PM EXPERIENCE — MOBILE V1
===================================================== */

@media screen and (max-width: 749px){

  .pm-experience{
    padding:70px 0 90px;
    overflow:hidden;
  }

  .pm-experience__container{
    width:100%;
  }

  .pm-experience__header{
    width:88%;
    margin:0 auto 55px;
    text-align:center;
  }

  .pm-experience__eyebrow{
    font-size:11px;
    letter-spacing:.24em;
    margin-bottom:18px;
  }

  .pm-experience h2{
    font-size:clamp(42px,12vw,54px);
    line-height:.94;
  }

  .pm-experience__header p{
    width:85%;
    margin:22px auto 0;
    font-size:18px;
    line-height:1.5;
  }

  .pm-product{
    width:82vw;
    margin:20px auto 0;
  }

  .pm-product__image{
    width:100%;
    animation:none;
  }
  /* =========================
   TARJETA DE INFORMACIÓN
========================= */

.pm-experience__mobile-card{
  width:86%;
  margin:34px auto 0;
  padding:24px 24px 26px;

  border:1px solid rgba(255,213,122,.18);
  border-radius:24px;

  background:
    linear-gradient(
      135deg,
      rgba(255,213,122,.08),
      rgba(255,255,255,.025)
    );

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  text-align:left;
}

.pm-experience__mobile-number{
  display:block;

  margin-bottom:12px;

  color:#FFD57A;

  font-size:11px;
  letter-spacing:.18em;
}

.pm-experience__mobile-card h3{
  margin:0;

  font-size:24px;
  line-height:1.05;
}

.pm-experience__mobile-card p{
  margin:12px 0 0;

  color:#aaa;

  font-size:15px;
  line-height:1.55;
}
.pm-experience .pm-experience__mobile-card{
  display:block !important;
  width:86%;
  margin:1px auto 0;
  position:relative;
z-index:1;
}
/* =========================
   HOTSPOTS LIMPIOS — MÓVIL
========================= */

.pm-experience .pm-hotspot{
  position:absolute;
  display:block;

  width:18px;
  height:18px;

  z-index:5;
}

.pm-experience .pm-hotspot > div{
  display:none;
}

.pm-experience .pm-hotspot span{
  width:14px;
  height:14px;

  display:block;

  margin:0;

  transform:none !important;
}

.pm-experience .pm-hotspot span::before{
  display:none !important;
}
/* =========================
   POSICIONES HOTSPOTS
========================= */

.pm-experience .hotspot-1{
  top:18%;
  right:18%;
  left:auto;
}

.pm-experience .hotspot-2{
  top:47%;
  left:17%;
  right:auto;
}

.pm-experience .hotspot-3{
  top:25%;
  left:34%;
  right:auto;
}

.pm-experience .hotspot-4{
  top:69%;
  right:18%;
  left:auto;
}

.pm-experience .hotspot-5{
  top:72%;
  left:28%;
  right:auto;
}
.pm-experience .pm-hotspot{
  cursor:pointer;
  touch-action:manipulation;
}
.pm-experience .pm-experience__mobile-card{
  transition:
    opacity .18s ease,
    transform .18s ease;
}

.pm-experience .pm-experience__mobile-card.is-changing{
  opacity:0;
  transform:translateY(6px);
}
.pm-experience .pm-hotspot.is-active span{
  background:#ffe3a3;

  box-shadow:
    0 0 16px rgba(255,213,122,1),
    0 0 34px rgba(255,213,122,.75);
}

.pm-experience .pm-hotspot.is-active span::after{
  opacity:1;
  transform:scale(1.7);
  border-color:rgba(255,213,122,.95);
  animation:none;
}
}
.pm-experience__mobile-card{
  display:none;
}
/* =========================================
   PM EXPERIENCE — PREMIUM HOTSPOTS V2
========================================= */

@media screen and (max-width:749px){

  .pm-experience .pm-hotspot{
    overflow:visible !important;
    isolation:isolate;
  }
  @media screen and (max-width:749px){

  .pm-experience .pm-hotspot > span,
  .pm-experience .pm-hotspot > span::before,
  .pm-experience .pm-hotspot > span::after{
    pointer-events:none;
  }

}
/* =========================================
   PM EXPERIENCE — MOBILE TOUCH AREA
========================================= */

@media screen and (max-width:749px){

  .pm-experience .pm-hotspot{
    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:0;

    cursor:pointer;

    z-index:30;

    -webkit-tap-highlight-color:transparent;

    touch-action:manipulation;
  }

}

  /* =========================
     PUNTO CENTRAL BLANCO
  ========================= */

  .pm-experience .pm-hotspot > span{
    position:relative;

    display:block;

    width:12px;
    height:12px;

    border-radius:50%;

    background:#fff;

    opacity:1;

    z-index:5;

    box-shadow:
      0 0 5px rgba(255,255,255,.95),
      0 0 12px rgba(255,220,145,.50);

    transition:
      transform .4s cubic-bezier(.16,1,.3,1),
      box-shadow .4s ease;
  }


  /* =========================
     ARO BLANCO INTERIOR
  ========================= */

  .pm-experience .pm-hotspot::before{
    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:34px;
    height:34px;

    transform:
      translate(-50%,-50%);

    border-radius:50%;

    border:
      1.5px solid rgba(255,255,255,.90);

    box-shadow:
      0 0 10px rgba(255,255,255,.10);

    pointer-events:none;

    z-index:3;

    transition:
      width .4s cubic-bezier(.16,1,.3,1),
      height .4s cubic-bezier(.16,1,.3,1),
      border-color .4s ease,
      box-shadow .4s ease;
  }


  /* =========================
     ARO DORADO EXTERIOR
  ========================= */

  .pm-experience .pm-hotspot::after{
    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:46px;
    height:46px;

    transform:
      translate(-50%,-50%);

    border-radius:50%;

    border:
      1px solid rgba(246,198,90,.38);

    box-shadow:
      0 0 18px rgba(246,174,55,.10);

    pointer-events:none;

    z-index:2;

    transition:
      width .4s cubic-bezier(.16,1,.3,1),
      height .4s cubic-bezier(.16,1,.3,1),
      opacity .4s ease,
      box-shadow .4s ease;
  }

}
@media screen and (max-width:749px){

  .pm-experience
  .pm-hotspot.is-active > span{

    transform:scale(1.12);

    box-shadow:
      0 0 7px rgba(255,255,255,1),
      0 0 17px rgba(255,223,155,.78),
      0 0 30px rgba(255,170,45,.32);
  }


  .pm-experience
  .pm-hotspot.is-active::before{

    width:38px;
    height:38px;

    border-color:
      rgba(255,255,255,1);

    box-shadow:
      0 0 13px rgba(255,255,255,.15),
      0 0 22px rgba(255,185,70,.10);
  }


  .pm-experience
  .pm-hotspot.is-active::after{

    width:52px;
    height:52px;

    border-color:
      rgba(246,198,90,.62);

    box-shadow:
      0 0 22px rgba(246,174,55,.18);
  }

}
@media screen and (max-width:749px){

  .pm-experience
  .pm-hotspot.is-active::after{

    animation:
      pmPremiumHotspotPulse
      2.8s
      ease-in-out
      infinite;
  }


  @keyframes pmPremiumHotspotPulse{

    0%,
    100%{
      opacity:.55;

      transform:
        translate(-50%,-50%)
        scale(.96);
    }

    50%{
      opacity:1;

      transform:
        translate(-50%,-50%)
        scale(1.08);
    }

  }

}
/* =========================================
   PM EXPERIENCE — MOBILE HOTSPOT POSITIONS
========================================= */

@media screen and (max-width:749px){

  /* 01 — extremo superior derecho */
  .pm-experience .hotspot-1{
    top:14% !important;
    left:auto !important;
    right:5% !important;
  }

  /* 02 — ahora ocupa el lugar anterior del 03 */
  .pm-experience .hotspot-2{
    top:43% !important;
    left:auto !important;
    right:3% !important;
  }

  /* 03 — ahora ocupa el lugar anterior del 02 */
  .pm-experience .hotspot-3{
    top:25% !important;
    left:8% !important;
    right:auto !important;
  }

  /* 04 — inferior izquierdo */
  .pm-experience .hotspot-4{
    top:65% !important;
    left:7% !important;
    right:auto !important;
  }

  /* 05 — inferior derecho */
  .pm-experience .hotspot-5{
    top:72% !important;
    left:auto !important;
    right:7% !important;
  }

}
/* =========================================
   PM EXPERIENCE — MOBILE INFO PANEL V2
========================================= */

@media screen and (max-width:749px){

  .pm-experience__mobile-card{
    position:relative;

    padding:24px 22px 22px !important;

    border-radius:24px;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.07),
        rgba(255,255,255,.025)
      );

    border:
      1px solid rgba(255,188,72,.40);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 20px 50px rgba(0,0,0,.20);

    overflow:hidden;
  }


  .pm-experience__mobile-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:1px;

    background:
      linear-gradient(
        to right,
        transparent,
        rgba(255,200,100,.80),
        transparent
      );

    opacity:.7;

    pointer-events:none;
  }


  .pm-experience__mobile-meta{
    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:14px;
  }


  .pm-experience__mobile-number{
    color:#f2c66d;

    font-size:11px;
    font-weight:600;

    letter-spacing:.14em;
  }


  .pm-experience__mobile-label{
    color:rgba(255,255,255,.52);

    font-size:10px;
    font-weight:600;

    letter-spacing:.16em;
  }


  .pm-experience__mobile-title{
    margin:0 0 12px !important;

    font-size:28px !important;
    line-height:1.02 !important;

    letter-spacing:-.035em;

    color:#fff;
  }


  .pm-experience__mobile-text{
    margin:0 !important;

    font-size:15px !important;
    line-height:1.55 !important;

    color:rgba(255,255,255,.66);
  }


  .pm-experience__mobile-tag{
    display:inline-flex;

    margin-top:18px;

    padding:8px 12px;

    border-radius:999px;

    border:
      1px solid rgba(255,194,82,.30);

    background:
      rgba(255,170,50,.07);

    color:#e7bd68;

    font-size:9px;
    font-weight:600;

    letter-spacing:.13em;
  }

}
@media screen and (max-width:749px){

  .pm-experience__mobile-card{
    transition:
      opacity .28s ease,
      transform .42s cubic-bezier(.16,1,.3,1),
      border-color .35s ease,
      box-shadow .35s ease;
  }

  .pm-experience__mobile-card.is-changing{
    opacity:.35;

    transform:
      translateY(10px)
      scale(.985);
  }

}
/* =========================================
   PM EXPERIENCE — MOBILE HOTSPOT EXPANSION
========================================= */

@media screen and (max-width: 749px){

  /* Título inicial */
  .pm-experience__header{
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity .45s ease,
      transform .45s ease;
  }

  /* Lámpara */
  .pm-product{
    transition:
      transform .65s cubic-bezier(.22,1,.36,1);
    transform-origin: center center;
  }

  /* Tarjeta inferior */
  .pm-experience__mobile-card{
  transition:
    transform .65s cubic-bezier(.22,1,.36,1);
}
@media screen and (max-width:749px){
.pm-experience:not(.is-hotspot-open) .pm-experience__mobile-card{
    transform: translateY(35px) !important;
  }
  
.pm-experience:not(.is-hotspot-open) .pm-product{
  transform: translateY(65px) !important;
}
.pm-experience:not(.is-hotspot-open) .pm-experience__header{
  transform: translateY(95px) !important;
}
}

  /* DESPUÉS DE TOCAR UN HOTSPOT */

  .pm-experience.is-hotspot-open .pm-experience__header{
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
  }

  .pm-experience.is-hotspot-open .pm-product{
  transform:
    translateY(-20px)
    scale(1.18);
}

.pm-experience.is-hotspot-open .pm-experience__mobile-card{
  transform: translateY(-15px);
}
@media screen and (max-width:749px){

  .pm-experience.is-hotspot-open.is-sound-only
  .pm-product{
    transform:
      translateY(65px)
      scale(1) !important;
  }

  .pm-experience.is-hotspot-open.is-sound-only
  .pm-experience__mobile-card{
    transform:
      translateY(35px) !important;
  }

  .pm-experience.is-hotspot-open.is-sound-only
  .pm-experience__header{
    opacity:1 !important;

    transform:
      translateY(95px) !important;

    pointer-events:auto;
  }

}
}
.pm-product{
  position:relative;
}

.pm-product::before{
  content:"";
display:block;
  position:absolute;

  left:50%;
  top:43%;

  width:900px;
  height:900px;

  transform:
    translate(-50%,-50%)
    scale(.92);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,196,95,.34) 0%,
      rgba(255,168,55,.20) 30%,
      rgba(255,130,35,.10) 52%,
      rgba(255,100,20,0) 74%
    );

  filter:blur(70px);

  opacity:0;

  pointer-events:none;

  z-index:0;

  transition:
    opacity .7s ease,
    transform .9s cubic-bezier(.16,1,.3,1);
}
.pm-experience.is-sunrise-active
.pm-product::before{
  opacity:1;

  transform:
    translate(-50%,-50%)
    scale(1);
}
/* =========================================
   PM EXPERIENCE — SUNRISE GLOW 01
========================================= */

.pm-product__sunrise-glow{
  position:absolute;

  left:50%;
  top:42%;

  width:1200px;
height:520px;

  transform:
    translate(-50%,-50%)
    scale(.88);

  border-radius:50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,225,155,.48) 0%,
      rgba(255,194,90,.34) 20%,
      rgba(255,155,45,.20) 42%,
      rgba(255,120,25,.08) 60%,
      rgba(255,100,20,0) 78%
    );

  filter:blur(75px);

  opacity:0;

  pointer-events:none;

  z-index:1;

  transition:
    opacity 1.1s ease,
    transform 1.3s cubic-bezier(.16,1,.3,1);
}
.pm-experience .pm-product__sunrise-glow{
  border-radius:50%;

  filter:
    blur(95px);

  opacity:.75;

  transform:
    translate(-50%,-50%)
    scaleX(1.25)
    scaleY(.82);
}
@media screen and (min-width:750px){

  .pm-product__sunrise-glow{
    left:50%;
    top:40%;

    width:2200px;
height:1250px;

    transform:
      translate(-50%,-50%)
      scale(.88);

    background:
  radial-gradient(
    ellipse at center,
    rgba(255,240,190,.95) 0%,
    rgba(255,210,120,.78) 12%,
    rgba(255,175,70,.58) 25%,
    rgba(255,145,45,.38) 40%,
    rgba(255,115,30,.22) 56%,
    rgba(255,95,20,.10) 70%,
    rgba(255,80,15,0) 88%
  );

    filter:blur(75px);

    opacity:0;

    z-index:1;
  }


  .pm-experience.is-sunrise-active
  .pm-product__sunrise-glow{
    opacity:1;

    transform:
      translate(-50%,-50%)
      scale(1);
  }

}

.pm-experience.is-sunrise-active
.pm-product__sunrise-glow{

  opacity:1;

  transform:
    translate(-50%,-50%)
    scale(1);
}
/* =========================================
   PM EXPERIENCE — DIGITAL CLOCK 04
========================================= */

.pm-product__digital-clock{
  position:absolute;

  left:50%;
  top:68.5%;

  transform:
  translate(-51%, -43%)
  scale(.49);

  display:flex;
  align-items:center;

  gap:19px;

  z-index:6;

  opacity:0;

  pointer-events:none;

  transition:
    opacity .22s ease,
    filter .22s ease;

  filter:
    drop-shadow(0 0 4px rgba(255,225,160,.70))
    drop-shadow(0 0 12px rgba(255,190,90,.35));
}
@media screen and (min-width:750px){

  .pm-product__digital-clock{
    transform:
      translate(-54%, -27%)
      scale(.96);
      gap: 20px;
  }

}

/* =========================
   DÍGITO
========================= */

.pm-digit{
  position:relative;

  width:72px;
  height:116px;
}


/* segmentos */

.pm-digit .seg{
  position:absolute;

  display:block;

  background:
    #ffdfa0a7;

  border-radius:999px;

  box-shadow:
    0 0 5px rgba(255, 230, 180, 0.64),
    0 0 12px rgba(255, 195, 105, 0.7);
}


/* horizontales */

.pm-digit .a,
.pm-digit .g,
.pm-digit .d{

  left:12px;

  width:48px;

  height:10px;

}

.pm-digit .a{
  top:0;
}

.pm-digit .g{
  top:54px;
}

.pm-digit .d{
  bottom:0;
}


/* verticales */

.pm-digit .b,
.pm-digit .c,
.pm-digit .e,
.pm-digit .f{

  width:10px;

  height:45px;

}

.pm-digit .b{
  right:-1px;
  top:7px;
}

.pm-digit .c{
  right:-1px;
  bottom:7px;
}

.pm-digit .e{
  left:-1px;
  bottom:7px;
}

.pm-digit .f{
  left:-1px;
  top:7px;
}


/* =========================
   NÚMERO 1
========================= */

.pm-digit--1 .a,
.pm-digit--1 .d,
.pm-digit--1 .e,
.pm-digit--1 .f,
.pm-digit--1 .g{
  display:none;
}


/* =========================
   NÚMERO 0
========================= */

.pm-digit--0 .g{
  display:none;
}


/* =========================
   NÚMERO 2
========================= */

.pm-digit--2 .c,
.pm-digit--2 .f{
  display:none;
}


/* =========================
   DOS PUNTOS
========================= */

.pm-digit-colon{
  width:18px;
  height:116px;

  position:relative;
}

.pm-digit-colon span{
  position:absolute;

  left:50%;

  width:9px;
  height:9px;

  transform:translateX(-50%);

  border-radius:50%;

  background:#ffe0a0;

  box-shadow:
    0 0 5px rgba(255, 230, 180, 0.29),
    0 0 12px rgba(255, 195, 105, 0.15);
}

.pm-digit-colon span:first-child{
  top:34px;
}

.pm-digit-colon span:last-child{
  bottom:34px;
}


/* =========================
   ENCENDIDO
========================= */

.pm-experience.is-display-digits-on
.pm-product__digital-clock{
  opacity:1;

  filter:
    brightness(1.08)
    drop-shadow(0 0 5px rgba(255,225,160,.85))
    drop-shadow(0 0 16px rgba(255,185,75,.48));
}

/* =========================================
   PM EXPERIENCE — SOUND BACKGROUND 02
========================================= */

.pm-experience__scene{
  position:relative;
}


.pm-experience__sound-bg{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  overflow:hidden;

  opacity:0;

  pointer-events:none;

  z-index:0;

  background:#000;

  transition:
    opacity .65s ease;
}


.pm-experience.is-sound-bg-active
.pm-experience__sound-bg{
  opacity:1;
}


.pm-experience__sound-bg-layer{
  position:absolute;

  inset:0;

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  opacity:0;

  transform:scale(1.02);

  filter:
    brightness(1)
    saturate(1);

  transition:
    opacity 1.1s ease-in-out,
    transform 5s ease;

  will-change:
    opacity,
    transform;
}


.pm-experience__sound-bg-layer.is-visible{
  opacity:1;

  transform:scale(1);
}


/* El contenido de EXPERIENCE queda encima */

.pm-experience__header,
.pm-product,
.pm-experience__mobile-card{
  position:relative;
  z-index:2;
}
/* =========================================
   PM EXPERIENCE — SOUND BG — DESKTOP
========================================= */

@media screen and (min-width:750px){

  .pm-experience__sound-bg-layer{

    background-size: cover;

    background-position:
      center center;

    background-repeat:no-repeat;

  }

}
@media screen and (min-width:750px){

  .pm-experience__sound-bg{
    left:50%;
    right:auto;

    width:100vw;
    height:100%;

    transform:translateX(-50%);
  }

  .pm-experience__sound-bg-layer{
    inset:0;

    width:100%;
    height:100%;

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
  }

}
@media screen and (max-width:749px){

  .pm-experience__sound-bg{
    left:50%;
    right:auto;

    width:100vw;
    height:100%;

    transform:translateX(-50%);
  }

  .pm-experience__sound-bg-layer{
    inset:0;

    width:100%;
    height:100%;

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
  }

}
/* =========================================
   PM EXPERIENCE — MOBILE STAGGER ENTRANCE
========================================= */

@media screen and (max-width:749px){

  /*
    Todos parten hacia la derecha.
    Usamos "translate" y NO "transform"
    para no romper las animaciones existentes.
  */

  .pm-experience__header,
  .pm-experience .pm-product,
  .pm-experience .pm-hotspot,
  .pm-experience__mobile-card{

    opacity:
      var(--pm-exp-enter-opacity, 1);

    transition:
      none;

    will-change:
      translate,
      opacity;
  }


  /* 01 — TÍTULO */

  .pm-experience__header{

    translate:
      var(--pm-exp-header-x, 0px)
      0;

    opacity:
      var(--pm-exp-header-opacity, 1);
  }


  /* 02 — LÁMPARA */

  .pm-experience .pm-product{

    translate:
      var(--pm-exp-product-x, 0px)
      0;

    opacity:
      var(--pm-exp-product-opacity, 1);
  }


  /* 03 → 07 — HOTSPOTS */

  .pm-experience .hotspot-1{
    translate:
      var(--pm-exp-hotspot-1-x, 0px)
      0;

    opacity:
      var(--pm-exp-hotspot-1-opacity, 1);
  }


  .pm-experience .hotspot-2{
    translate:
      var(--pm-exp-hotspot-2-x, 0px)
      0;

    opacity:
      var(--pm-exp-hotspot-2-opacity, 1);
  }


  .pm-experience .hotspot-3{
    translate:
      var(--pm-exp-hotspot-3-x, 0px)
      0;

    opacity:
      var(--pm-exp-hotspot-3-opacity, 1);
  }


  .pm-experience .hotspot-4{
    translate:
      var(--pm-exp-hotspot-4-x, 0px)
      0;

    opacity:
      var(--pm-exp-hotspot-4-opacity, 1);
  }


  .pm-experience .hotspot-5{
    translate:
      var(--pm-exp-hotspot-5-x, 0px)
      0;

    opacity:
      var(--pm-exp-hotspot-5-opacity, 1);
  }


  /* 08 — TARJETA FINAL */

  .pm-experience__mobile-card{

    translate:
      var(--pm-exp-card-x, 0px)
      0;

    opacity:
      var(--pm-exp-card-opacity, 1);
  }

}
/* =========================================
   PM EXPERIENCE — MÁS RECORRIDO EN MÓVIL
========================================= */

@media screen and (max-width:749px){

  .pm-experience{
    min-height:1800vh;
  }

}
/* =========================================
   PM EXPERIENCE — HOTSPOT 03 GLOW LEVELS
========================================= */

/* IMAGEN 2 — RESPLANDOR MEDIO / ALTO */

.pm-experience.is-touch-glow-medium
.pm-product__sunrise-glow{

  opacity:.68;

  transform:
    translate(-50%, -50%)
    scale(1.08);

  filter:
    blur(46px);

}


/* IMAGEN 3 — RESPLANDOR MUCHO MÁS FUERTE */

.pm-experience.is-touch-glow-high
.pm-product__sunrise-glow{

  opacity:1;

  transform:
    translate(-50%, -50%)
    scale(1.48);

  filter:
    blur(68px);

}
/* =========================================
   HOTSPOT 03 — FONDO NEGRO SUAVE IMAGEN 01
========================================= */

.pm-experience::after{
  content:"";

  position:absolute;
  inset:0;

  background:#000;

  opacity:0;

  pointer-events:none;

  z-index:0;

  transition:
    opacity 1.4s cubic-bezier(.22, 1, .36, 1);
}


.pm-experience.is-touch-image-dark::after{
  opacity:1;
}


/*
  Mantenemos el contenido por encima
  del oscurecimiento.
*/

.pm-experience__scene{
  position:relative;
  z-index:1;
}
/* =========================================
   PM EXPERIENCE — SUBIR INICIO EN MÓVIL
========================================= */

@media screen and (max-width:749px){

  .pm-experience{
    padding-top:1px !important;
  }

}
/* =====================================================
   PM EXPERIENCE — DESKTOP PREMIUM LAYOUT V2
   DISEÑO MOCKUP
   SOLO ESCRITORIO
===================================================== */

@media screen and (min-width:750px){


  /* =====================================================
     SECCIÓN
  ===================================================== */

  .pm-experience{
  min-height:1180px;
  padding:150px 0 120px;
}


  .pm-experience__container{
    width:min(1500px,94%);
    margin-left:auto;
    margin-right:auto;
  }



  /* =====================================================
     HEADER
  ===================================================== */

  .pm-experience__header{
    text-align:center;
    margin:0 auto 55px;
  }


  .pm-experience__desktop-eyebrow{
    margin-bottom:18px;

    color:#f3bd59;

    font-size:13px;
    font-weight:700;

    letter-spacing:.32em;
  }


  .pm-experience h2{
    margin:0;

    font-size:clamp(54px,4.6vw,76px);
    line-height:.95;

    letter-spacing:-.045em;
  }


  .pm-experience__desktop-subtitle{
    margin:22px auto 0;

    color:rgba(255,255,255,.68);

    font-size:18px;
    line-height:1.5;
  }



  /* =====================================================
     LÁMPARA
  ===================================================== */

  .pm-experience .pm-product{
    position:relative;

    width:min(760px,50vw);
  margin:10px auto 0;

    isolation:isolate;
  }



  /* =====================================================
     GLOW DETRÁS
  ===================================================== */

  .pm-experience .pm-product::before{
  content:"";

  position:absolute;

  left:50%;
  top:43%;

  width:1250px;
  height:620px;

  transform:
    translate(-50%,-50%);

  pointer-events:none;

  z-index:0;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,190,85,.22) 0%,
      rgba(255,160,55,.14) 28%,
      rgba(255,125,32,.07) 48%,
      rgba(255,105,25,.025) 64%,
      rgba(255,90,20,0) 82%
    );

  filter:
    blur(115px);

  opacity:0;

transition:
  opacity .7s ease,
  transform .9s cubic-bezier(.16,1,.3,1);
}
/* =====================================================
   PM EXPERIENCE — DESKTOP
   GLOWS SOLO SEGÚN FUNCIÓN ACTIVA
===================================================== */

/* Estado normal: sin glow extra */

.pm-experience .pm-product__sunrise-glow{
  opacity:0;
}


/* HOTSPOT 01 — AMANECER */

.pm-experience.is-sunrise-active
.pm-product::before{
  opacity:1;

  transform:
    translate(-50%,-50%)
    scale(1);
}


.pm-experience.is-sunrise-active
.pm-product__sunrise-glow{
  opacity:1;
}


/* HOTSPOT 03 — GLOW MEDIO */

.pm-experience.is-touch-glow-medium
.pm-product__sunrise-glow{
  opacity:.68;

  transform:
    translate(-50%,-50%)
    scale(1.08);

  filter:
    blur(95px);
}


/* HOTSPOT 03 — GLOW FUERTE */

.pm-experience.is-touch-glow-high
.pm-product__sunrise-glow{
  opacity:1;

  transform:
    translate(-50%,-50%)
    scale(1.48);

  filter:
    blur(105px);
}


  /* =====================================================
     ARO DORADO DEBAJO DE LA LÁMPARA
  ===================================================== */

  .pm-experience .pm-product__images::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-30px;

width:82%;
height:34px;

    transform:
      translateX(-50%);

    border:
      2px solid rgba(255,181,63,.88);

    border-radius:50%;

    box-shadow:
      0 0 8px rgba(255,196,91,.90),
      0 0 24px rgba(255,151,38,.50),
      0 0 55px rgba(255,122,25,.25);

    opacity:.95;

    pointer-events:none;

    z-index:-1;
  }


  .pm-experience .pm-product__images::before{
    content:"";

    position:absolute;

    left:50%;
    bottom:-30px;

width:72%;
height:70px;

    transform:
      translateX(-50%);

    background:
      radial-gradient(
        ellipse,
        rgba(255,174,59,.35) 0%,
        rgba(255,130,26,.12) 48%,
        transparent 75%
      );

    filter:blur(16px);

    pointer-events:none;

    z-index:-2;
  }



  /* =====================================================
     HOTSPOTS — RESET
  ===================================================== */

  .pm-experience .pm-hotspot{
    display:flex;
    align-items:center;

    gap:15px;

    z-index:10;
  }


  .pm-experience .pm-hotspot > div:not(.pm-hotspot__desktop-icon){
    width:245px;
  }


  .pm-experience .pm-hotspot h3{
    margin:0;

    font-size:24px;
    line-height:1.08;

    letter-spacing:-.02em;
  }


  .pm-experience .pm-hotspot p{
    max-width:245px;

    margin:10px 0 0;

    font-size:16px;
    line-height:1.5;

    color:rgba(255,255,255,.65);
  }



  /* =====================================================
     ICONOS REDONDOS
  ===================================================== */

  .pm-experience .pm-hotspot__desktop-icon{
    display:flex;

    align-items:center;
    justify-content:center;

    width:74px;
    height:74px;

    flex:0 0 74px;

    border-radius:50%;

    border:
      1px solid rgba(244,176,54,.86);

    background:
      radial-gradient(
        circle at 50% 35%,
        rgba(255,175,51,.10),
        rgba(255,255,255,.015) 65%
      );

    color:#f7b84c;

    font-size:34px;

    box-shadow:
      inset 0 0 24px rgba(255,174,43,.035),
      0 0 22px rgba(255,150,30,.06);

    pointer-events:none;
  }



  /* =====================================================
     PUNTOS + LÍNEAS
  ===================================================== */

  .pm-experience .pm-hotspot > span{
    width:11px;
    height:11px;

    background:#ffc866;

    box-shadow:
      0 0 14px rgba(255,190,84,.85);
  }


  .pm-experience .pm-hotspot > span::before{
    height:1px;

    background:
      rgba(255,181,58,.75);
  }



  /* =====================================================
     RESET DEL HOTSPOT 2 ANTIGUO
  ===================================================== */

  .pm-experience .hotspot-2 > span{
    transform:none;
  }


  .pm-experience .hotspot-2 > div{
    left:auto;
  }



  /* =====================================================
     IZQUIERDA
  ===================================================== */


  /* CONTROL TÁCTIL */

  .pm-experience .hotspot-3{
    top:8%;
  left:-440px;
    right:auto;
  }


  .pm-experience .hotspot-3 span::before{
    width:125px;
  }



  /* SONIDO */

  .pm-experience .hotspot-2{
    top:43%;
  left:-465px;
    right:auto;
  }


  .pm-experience .hotspot-2 span::before{
    width:145px;
  }



  /* ALARMA / SNOOZE */

  .pm-experience .hotspot-5{
    top:73%;
  left:-450px;
    right:auto;
  }


  .pm-experience .hotspot-5 span::before{
    width:135px;
  }



  /* =====================================================
     DERECHA
  ===================================================== */


  /* SUNRISE */

  .pm-experience .hotspot-1{
    top:12%;
  right:-445px;
    left:auto;
  }


  .pm-experience .hotspot-1 span::before{
    width:135px;
  }



  /* PANTALLA */

  .pm-experience .hotspot-4{
    top:61%;
  right:-455px;
    left:auto;
  }


  .pm-experience .hotspot-4 span::before{
    width:145px;
  }
/* =====================================================
   HOTSPOTS DERECHA — ICONO DESPUÉS DEL TEXTO
   SOLO SUNRISE + PANTALLA
===================================================== */

.pm-experience .hotspot-1,
.pm-experience .hotspot-4{
  flex-direction:row;
  text-align:left;
}


/* TEXTO PRIMERO */

.pm-experience
.hotspot-1
> div:not(.pm-hotspot__desktop-icon),
.pm-experience
.hotspot-4
> div:not(.pm-hotspot__desktop-icon){
  order:1;
}

/* ICONO AL FINAL */

.pm-experience
.hotspot-1
.pm-hotspot__desktop-icon,
.pm-experience
.hotspot-4
.pm-hotspot__desktop-icon{
  order:3;
}


/* LA LÍNEA SALE HACIA EL ICONO */
.pm-experience .hotspot-1 > span,
.pm-experience .hotspot-4 > span{
  order:1;
}

.pm-experience
.hotspot-1
> div:not(.pm-hotspot__desktop-icon),
.pm-experience
.hotspot-4
> div:not(.pm-hotspot__desktop-icon){
  order:2;
}

.pm-experience
.hotspot-1
.pm-hotspot__desktop-icon,
.pm-experience
.hotspot-4
.pm-hotspot__desktop-icon{
  order:3;
}

.pm-experience .hotspot-1 > span::before,
.pm-experience .hotspot-4 > span::before{
  right:100%;
  left:auto;
}
.pm-experience .hotspot-1,
.pm-experience .hotspot-4{
  gap:14px;
}

.pm-experience
.hotspot-1
> div:not(.pm-hotspot__desktop-icon),
.pm-experience
.hotspot-4
> div:not(.pm-hotspot__desktop-icon){
  text-align:left;
}


  /* =====================================================
     ORDEN VISUAL DE LOS ELEMENTOS IZQUIERDOS
  ===================================================== */

  .pm-experience .pm-hotspot--left{
    flex-direction:row-reverse;
    text-align:right;
  }


  .pm-experience
  .pm-hotspot--left
  .pm-hotspot__desktop-icon{
    order:3;
  }


  .pm-experience
  .pm-hotspot--left
  > div:not(.pm-hotspot__desktop-icon){
    order:2;
  }


  .pm-experience
  .pm-hotspot--left
  > span{
    order:1;
  }



  /* =====================================================
     BENEFICIOS INFERIORES
  ===================================================== */

  .pm-experience__desktop-benefits{
    display:grid;

    grid-template-columns:
      repeat(4,minmax(0,1fr));

    width:min(1420px,94%);

    margin:
      75px auto 0;

    padding:
      24px 24px;

    border:
      1px solid rgba(255,176,55,.20);

    border-radius:28px;

    background:
      linear-gradient(
        180deg,
        rgba(255,172,48,.045),
        rgba(255,255,255,.012)
      );

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 30px 80px rgba(0,0,0,.20);
  }


  .pm-experience__desktop-benefit{
    position:relative;

    display:flex;

    align-items:center;

    gap:17px;

    min-height:80px;

    padding:
      0 26px;
  }


  .pm-experience__desktop-benefit:not(:last-child)::after{
    content:"";

    position:absolute;

    right:0;
    top:10%;

    width:1px;
    height:80%;

    background:
      linear-gradient(
        to bottom,
        transparent,
        rgba(240,174,55,.35),
        transparent
      );
  }


  .pm-experience__benefit-icon{
    display:flex;

    align-items:center;
    justify-content:center;

    width:54px;
    height:54px;

    flex:0 0 54px;

    border-radius:50%;

    background:
      rgba(255,172,48,.06);

    color:#f2b551;

    font-size:28px;

    box-shadow:
      0 0 25px rgba(255,150,30,.07);
  }


  .pm-experience__desktop-benefit strong{
    display:block;

    color:#eeb755;

    font-size:17px;
    line-height:1.15;
  }


  .pm-experience__desktop-benefit p{
    margin:8px 0 0;

    color:rgba(255,255,255,.64);

    font-size:14px;
    line-height:1.45;
  }
/* =====================================================
   PM EXPERIENCE — LÍNEAS HACIA LA LÁMPARA
   SOLO ESCRITORIO
===================================================== */


/* La lámpara queda POR ENCIMA de las líneas */

.pm-experience .pm-product__images{
  position:relative;
  z-index:20;
}


/* Hotspots por debajo de la imagen de la lámpara */

.pm-experience .pm-hotspot{
  z-index:10;
}


/* =========================
   IZQUIERDA → HACIA LÁMPARA
========================= */

.pm-experience .hotspot-2 > span::before,
.pm-experience .hotspot-3 > span::before,
.pm-experience .hotspot-5 > span::before{
  left:100%;
  right:auto;

  width:520px;
}


/* =========================
   DERECHA → HACIA LÁMPARA
========================= */

.pm-experience .hotspot-1 > span::before,
.pm-experience .hotspot-4 > span::before{
  right:100%;
  left:auto;

  width:520px;
}
}



/* =====================================================
   NUEVOS ELEMENTOS — OCULTOS EN MÓVIL
===================================================== */

@media screen and (max-width:749px){

  .pm-experience__desktop-eyebrow,
  .pm-experience__desktop-subtitle,
  .pm-hotspot__desktop-icon,
  .pm-experience__desktop-benefits{
    display:none !important;
  }

}
/* =========================================
   PM TIMELINE — TEXTOS MÁS GRANDES DESKTOP
========================================= */

@media screen and (min-width: 750px){

  .pm-timeline .pm-time{
    font-size:26px !important;
    letter-spacing:.12em;
  }

  .pm-timeline .pm-step h3{
    font-size:44px !important;
    line-height:1.08 !important;
    letter-spacing:-.03em;
    margin-top:14px;
    margin-bottom:22px;
  }

  .pm-timeline .pm-step p{
    font-size:21px !important;
    line-height:1.55 !important;
    max-width:500px;
  }

}

/* =========================
   PM FEATURES
========================= */

.pm-features{
  position:relative;
  background:#050505;

  padding:
    105px
    0
    180px;

  overflow:hidden;
}
@media screen and (min-width:750px){

  .pm-features{
    background:#050505;
  }

}
.pm-features__container{
  width:min(1280px,92%);
  margin:0 auto;
}

.pm-features__header{
  max-width:760px;
  margin:0 auto 90px;
  text-align:center;
}

.pm-features__eyebrow{
  position:relative;
  overflow:hidden;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 18px;

  margin-bottom:22px;

  border-radius:999px;

  border:
    1px solid rgba(232,184,93,.16);

  background:
    rgba(232,184,93,.06);

  color:#E8B85D;

  font-size:.78rem;
  font-weight:600;

  letter-spacing:.18em;

  text-transform:uppercase;
}
/* =========================================
   PM FEATURES — DESTELLO "CARACTERÍSTICAS"
========================================= */

.pm-features__eyebrow::after{
  content:"";

  position:absolute;

  top:-40%;
  left:-55%;

  width:34%;
  height:180%;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.10),
      rgba(255,255,255,.55),
      rgba(255,255,255,.10),
      transparent
    );

  filter:blur(3px);

  transform:
    skewX(-20deg)
    translateX(0);

  animation:
    pmFeaturesEyebrowShine
    4.5s
    ease-in-out
    infinite;
}


/* =========================================
   ANIMACIÓN
========================================= */

@keyframes pmFeaturesEyebrowShine{

  0%,
  62%{
    left:-55%;
    opacity:0;
  }

  68%{
    opacity:1;
  }

  82%{
    left:125%;
    opacity:1;
  }

  88%,
  100%{
    left:125%;
    opacity:0;
  }

}
.pm-features__header h2{
  margin:0;
  font-size:clamp(2.8rem,5vw,4.8rem);
  line-height:1.05;
  font-weight:600;
  color:#fff;
}

.pm-features__header p{
  margin:28px auto 0;
  max-width:620px;
  font-size:1.15rem;
  line-height:1.8;
  color:rgba(255,255,255,.68);
}

.pm-features__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(390px,1fr));
gap:22px;
max-width:1620px;
  margin:0 auto;
  justify-content:center;
}
/* =========================
   HORIZONTE INFERIOR
========================= */

#pm-features-{{ section.id }} .pm-features__horizon{
  position:absolute;

  left:50%;
  bottom:-245px;

  width:150%;
  height:310px;

  transform:translateX(-50%);

  border-top:
  1px solid rgba(255,155,55,.26);

  border-radius:
    50% 50% 0 0 / 100% 100% 0 0;

  pointer-events:none;

  z-index:2;

  filter:
    drop-shadow(
      0 -2px 8px rgba(255,145,45,.14)
    );
}
#pm-features-{{ section.id }} .pm-features__horizon-star{
  position:absolute;

  top:0px;
  left:50%;

  width:5px;
  height:5px;

  transform:
    translate(-50%,-50%)
    rotate(45deg);

  width:6px;
height:6px;

border-radius:50%;

background:#ffd27a;

  box-shadow:
    0 0 5px rgba(255,210,122,1),
    0 0 12px rgba(255,166,55,.95),
    0 0 26px rgba(255,126,25,.55);

  animation:
    pmFeaturesHorizonStar 3.2s
    ease-in-out infinite;
}
#pm-features-{{ section.id }} .pm-features__horizon-star::before,
#pm-features-{{ section.id }} .pm-features__horizon-star::after{
  content:"";

  position:absolute;

  top:50%;
  left:50%;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(255,214,135,.95),
      transparent
    );

  transform:translate(-50%,-50%);
}

.pm-features__horizon-star::before{

    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:240px;
    height:1px;

    transform:translate(-50%,-50%);

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255,214,135,.95) 50%,
            transparent
        );

}

#pm-features-{{ section.id }} .pm-features__horizon-star::after{
  width:1px;
  height:34px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(255,214,135,.9),
      transparent
    );
}
@keyframes pmFeaturesHorizonStar{

  0%,
100%{

    opacity:.55;

    filter:brightness(.85);

    transform:
        translate(-50%,-50%)
        scale(.82);

}

50%{

    opacity:1;

    filter:brightness(1.35);

    transform:
        translate(-50%,-50%)
        scale(1.18);

}

}
@media (max-width:749px){

  #pm-features-{{ section.id }} .pm-features__horizon{
    bottom:-175px;

    width:210%;
    height:220px;
  }

  #pm-features-{{ section.id }} .pm-features__horizon-star::before{
    width:34px;
  }

  #pm-features-{{ section.id }} .pm-features__horizon-star::after{
    height:26px;
  }
}
@media screen and (max-width:749px){

  .pm-experience__header h2{
    font-size:40px !important;
    line-height:1.05 !important;
  }

}
/* ---------- FEATURE CARD ---------- */

.pm-feature-card{
    position:relative;
    min-height:380px;
    padding:0;
    border-radius:34px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.03)
        );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(28px);

    overflow:hidden;

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.pm-feature-card::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    background:radial-gradient(
        circle,
        rgba(255,215,120,.16),
        transparent 72%
    );

    top:-240px;
    right:-180px;

    pointer-events:none;
}

@media (hover:hover) and (pointer:fine){

  .pm-feature-card.pm-feature-visible:hover{
    transform:
      translateY(-8px)
      scale(1);

    border-color:rgba(255,220,140,.20);

    box-shadow:
      0 24px 70px rgba(0,0,0,.35);
  }

}

.pm-feature-card__icon{

    font-size:2.2rem;

    margin-bottom:28px;
}

.pm-feature-card h3{

    margin:0 0 18px;

    color:#fff;

    font-size:2rem;

    font-weight:600;

    line-height:1.15;
}

.pm-feature-card p{

    margin:0;

    color:rgba(255,255,255,.68);

    font-size:1.05rem;

    line-height:1.8;

    max-width:420px;
}
.pm-feature-card__content{

position:relative;

z-index:2;
    padding:42px;
    
}
/* ---------- VISUAL ---------- */

.pm-feature-card__visual{

    position:relative;

    height:360px;

    overflow:hidden;
    border-radius:28px 28px 0 0;
}
.pm-feature-card__visual::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:52%;

    background:linear-gradient(
        to top,
        rgba(15,15,15,.96) 0%,
        rgba(15,15,15,.70) 35%,
        rgba(15,15,15,0) 100%
    );

    pointer-events:none;

}

.pm-feature-sun{

    position:relative;

    width:110px;

    height:110px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        #fff8da 0%,
        #ffd774 45%,
        #ffb84d 100%
    );

    box-shadow:
        0 0 40px rgba(255,210,100,.35),
        0 0 90px rgba(255,180,60,.18);

    z-index:2;
}

.pm-feature-sun::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:340px;
    height:340px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,200,90,.22),
        transparent 72%
    );

    filter:blur(12px);

    z-index:-1;
}
/* ---------- LAMP ---------- */

.pm-feature-lamp{

    position:relative;

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;
}

.pm-feature-lamp__glow{

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,208,110,.22),
        transparent 72%
    );

    filter:blur(28px);
}

.pm-feature-lamp__body{

    position:relative;

    width:145px;
    height:145px;

    border-radius:50%;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.18),
        rgba(255,255,255,.05)
    );

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    z-index:2;
}

.pm-feature-lamp__light{

    width:92px;
    height:92px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        #fff9e8,
        #ffd66d 60%,
        #ffb44a 100%
    );

    box-shadow:
        0 0 30px rgba(255,210,120,.45),
        0 0 90px rgba(255,180,80,.18);
}

.pm-feature-lamp__shadow{

    position:absolute;

    bottom:42px;

    width:180px;
    height:26px;

    border-radius:50%;

    background:rgba(0,0,0,.28);

    filter:blur(12px);
}
/* ---------- FEATURE SCENE ---------- */
.pm-feature-scene{

    width:100%;
    height:100%;
}

.pm-feature-scene__image{

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center 35%;

    display:block;

    transform:scale(1.01);

    transition:transform .8s ease;

}

.pm-feature-card:hover .pm-feature-scene__image{

    transform:scale(1.08);
}

/* ---------- AMBIENT LIGHT ---------- */

.pm-features__ambient{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:visible;
}
/* =========================================
   PM FEATURES — MOBILE ROCKSTAR CAROUSEL
========================================= */

@media screen and (max-width:749px){

  .pm-features{
    overflow:hidden;
  }

  .pm-features__container{
    width:100%;
    max-width:none;
  }

  .pm-features__header{
    width:calc(100% - 40px);
    margin-left:auto;
    margin-right:auto;
  }

  .pm-features__grid{
    display:flex;

    width:100%;

    gap:16px;

    overflow-x:auto;
    overflow-y:visible;

    padding:
  10px
  19px
  24px;

    scroll-snap-type:x mandatory;
    scroll-padding-inline:19px;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

    justify-content:flex-start;
  }

  .pm-features__grid::-webkit-scrollbar{
    display:none;
  }

  .pm-feature-card{
  flex:0 0 calc(100vw - 38px);
  width:calc(100vw - 38px);

  scroll-snap-align:center;
  scroll-snap-stop:always;
}

}

@media screen and (max-width:749px){

  .pm-features__pagination{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  width:max-content;

  margin:18px auto 0;
  padding:9px 12px;

  gap:7px;

  border-radius:999px;

  background:rgba(20,20,20,.88);
  border:1px solid rgba(255,255,255,.10);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  box-shadow:
    0 8px 30px rgba(0,0,0,.32);

  z-index:20;
}


  .pm-features__dot{
    appearance:none;

    width:6px;
    height:6px;

    padding:0;

    border:0;
    border-radius:999px;

    background:
      rgba(255,255,255,.32);

    transition:
      width .35s cubic-bezier(.16,1,.3,1),
      background .35s ease,
      transform .35s ease;
  }


  .pm-features__dot.is-active{
    width:22px;

    background:#fff;
  }

}
@media screen and (min-width:750px){

  .pm-features__pagination{
    display:none;
  }

}
@media screen and (max-width:749px){

  .pm-experience__features-stage .pm-feature-card{
  min-height:0 !important;
  height:550px !important;

  flex:0 0 calc(100vw - 70px) !important;
width:calc(100vw - 70px) !important;
}

  .pm-experience__features-stage .pm-feature-card__image{
    height:250px !important;
    min-height:0 !important;
  }

  .pm-experience__features-stage .pm-feature-card__content{
    height:220px !important;
    min-height:0 !important;

    padding:18px 22px 20px !important;
    box-sizing:border-box;
  }

}
/* =========================================
   PM FEATURES — FULL IMAGE CARD MOBILE
========================================= */

@media screen and (max-width:749px){

  /* TARJETA */
  .pm-experience__features-stage .pm-feature-card{
    position:relative !important;
    overflow:hidden !important;
    padding:0 !important;
  }


  /* IMAGEN OCUPA TODA LA TARJETA */
  .pm-experience__features-stage .pm-feature-card__image{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    margin:0 !important;
    padding:0 !important;

    z-index:1;
  }


  /* OSCURECIDO INFERIOR PARA LEER EL TEXTO */
  .pm-experience__features-stage .pm-feature-card::after{
    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
      to bottom,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,.12) 52%,
      rgba(0,0,0,.70) 76%,
      rgba(0,0,0,.94) 100%
    );

    pointer-events:none;
    z-index:2;
  }


  /* CONTENIDO SOBRE LA FOTO */

.pm-experience__features-stage .pm-feature-card__content{
  position:absolute !important;

  left:0;
  right:0;
  bottom:0;

  width:100% !important;
  height:auto !important;
  min-height:0 !important;

  padding:28px 22px 26px !important;

  background:
    linear-gradient(
      to bottom,
      rgba(5,5,5,0) 0%,
      rgba(5,5,5,.58) 28%,
      rgba(5,5,5,.88) 62%,
      rgba(5,5,5,.97) 100%
    ) !important;


  z-index:3;
}

}
/* =========================================
   PM EXPERIENCE → FEATURES
   ROCKSTAR MOBILE OVERLAP
========================================= */

@media screen and (max-width:749px){

  .pm-features{
    position:relative;
    z-index:20;

    margin-top:-28svh;

    padding-top:calc(180px + 28svh);

    background:
      linear-gradient(
        to bottom,
        rgba(5,5,5,0) 0%,
        rgba(5,5,5,.35) 12%,
        rgba(5,5,5,.82) 26%,
        #050505 40%,
        #050505 100%
      );
  }

}

@media screen and (max-width:749px){

  .pm-features::after{
    content:"";

    position:absolute;
    inset:0;

    background:#050505;

    opacity:
      var(--pm-rockstar-solid, 0);

    pointer-events:none;

    z-index:-2;
  }

}

/* =========================================
   HOTSPOT 04 — PANTALLA / NÚMEROS
========================================= */

.pm-product .pm-product__display-digits{
  position:absolute !important;

  left:50% !important;
  top:70.5% !important;

  width:25% !important;
  max-width:none !important;
  height:auto !important;

  transform:
    translate(-50%,-50%)
    scale(.98);

  opacity:0;

  pointer-events:none;

  z-index:6;

  mix-blend-mode:screen;

  filter:
    brightness(.82)
    contrast(1.08);

  transition:
    opacity .38s ease-in-out,
    filter .38s ease-in-out,
    transform .38s ease-in-out;
}


.pm-experience.is-display-digits-on
.pm-product .pm-product__display-digits{

  opacity:1;

  transform:
    translate(-50%,-50%)
    scale(1);

  filter:
    brightness(1.12)
    contrast(1.16)
    drop-shadow(
      0 0 5px
      rgba(255,220,150,.38)
    );
}
/* ---------- SOUND BUTTONS ---------- */

.pm-sound-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:26px;

}

.pm-sound{

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    border-radius:999px;

    padding:12px 18px;

    font-size:.95rem;

    cursor:pointer;

    transition:.3s ease;

    backdrop-filter:blur(20px);

}

.pm-sound:hover{

    background:rgba(255,255,255,.12);

    transform:translateY(-2px);

}

.pm-sound.active{

    background:rgba(255,190,90,.18);

    border-color:rgba(255,190,90,.55);

    color:#FFD27A;

}
#pm-touch-image{

    transition:opacity .18s ease;

}
/* ---------- TOUCH BUTTONS ---------- */

.pm-touch-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:26px;

}

.pm-touch{

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    border-radius:999px;

    padding:12px 18px;

    font-size:.95rem;

    cursor:pointer;

    transition:.3s ease;

    backdrop-filter:blur(20px);

}

.pm-touch:hover{

    background:rgba(255,255,255,.12);

    transform:translateY(-2px);

}

.pm-touch.active{

    background:rgba(255,190,90,.18);

    border-color:rgba(255,190,90,.55);

    color:#FFD27A;

}
/* ---------- TOUCH COLOR PICKER ---------- */

.pm-touch-icon,
.pm-feature-icon{

    width:54px;
    height:54px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:24px;

    margin-bottom:24px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

}
.pm-feature-icon img{

    width:26px;

    height:26px;

    display:block;

    object-fit:contain;

}
.pm-clock-icon{

    font-size:30px;

    color:#ffffff;

    font-variation-settings:
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,
        'opsz' 48;

}

.pm-color-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:28px;

    flex-wrap:wrap;

}

.pm-color{

    width:38px;

    height:38px;

    border-radius:50%;

    border:none;

    cursor:pointer;

    transition:.35s ease;

    position:relative;

}

.pm-color:hover{

    transform:scale(1.12);

}

.pm-color.active{

    transform:scale(1.08);

    box-shadow:
        0 0 0 3px rgba(255,255,255,.9),
        0 0 24px currentColor;

}

.pm-color.red{
    background:#ff2847;
    color:#ff2847;
}

.pm-color.orange{
    background:#ffab4b;
    color:#ffab4b;
}

.pm-color.yellow{
    background:#e6cf56;
    color:#e6cf56;
}

.pm-color.green{
    background:#69b56b;
    color:#69b56b;
}

.pm-color.cyan{
    background:#59c9f6;
    color:#59c9f6;
}

.pm-color.blue{
    background:#3d67ff;
    color:#3d67ff;
}

.pm-color.purple{
    background:#9b5cff;
    color:#9b5cff;
}
/* ---------- NIGHT BUTTONS ---------- */

.pm-night-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:26px;

}

.pm-night{

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    border-radius:999px;

    padding:12px 18px;

    font-size:.95rem;

    cursor:pointer;

    transition:.3s ease;

    backdrop-filter:blur(20px);

}

.pm-night:hover{

    background:rgba(255,255,255,.12);

    transform:translateY(-2px);

}

.pm-night.active{

    background:rgba(255,190,90,.18);

    border-color:rgba(255,190,90,.55);

    color:#FFD27A;

}

#pm-night-image,
#pm-touch-image,
#pm-sound-image{

    opacity:1;

    transform:scale(1);

    filter:blur(0);

    transition:
        opacity .55s ease,
        transform .70s cubic-bezier(.22,1,.36,1),
        filter .55s ease;

}

#pm-night-image.pm-changing,
#pm-touch-image.pm-changing,
#pm-sound-image.pm-changing{

    opacity:0;

    transform:scale(1.035);

    filter:blur(10px);

}
.pm-touch-icon .material-symbols-rounded{

    font-size:30px;

    color:#fff;

    font-variation-settings:
        'FILL' 1,
        'wght' 300,
        'GRAD' 0,
        'opsz' 48;

}
.pm-review{
    position:relative;
    max-width:980px;
    margin:34px auto 0;
    padding:54px;

    border-radius:36px;

    background:
linear-gradient(
180deg,
rgba(20,20,20,.98) 0%,
rgba(12,12,12,.98) 100%
);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);

    box-shadow:
0 24px 60px rgba(0,0,0,.45),
0 6px 20px rgba(0,0,0,.25),
inset 0 1px rgba(255,255,255,.05);

    overflow:hidden;

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}
.pm-review__content{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:44px;
    align-items:center;
    margin-top:34px;
}
.pm-review::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;

    background:
linear-gradient(
180deg,
rgba(255,255,255,.10) 0%,
rgba(255,255,255,.04) 18%,
transparent 48%
);
}

.pm-testimonios::after{

    content:"";

    position:absolute;

    left:50%;

    top:64%;

    transform:translateX(-50%);

    width:900px;

    height:900px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.01)) 0%,
            rgba(255,255,255,.005) 30%,
            transparent 75%
        );

    filter:blur(120px);

    pointer-events:none;

    z-index:0;

}
.pm-testimonios__score strong{

    font-size:34px;

    font-weight:700;

    color:#fff;

}

.pm-testimonios__score span{

    font-size:18px;

    font-weight:400;

    color:rgba(255,255,255,.62);

}
.pm-review:hover{
    transform:translateY(-6px);
    box-shadow:
        0 60px 160px rgba(0,0,0,.55),
        0 20px 60px rgba(0,0,0,.30),
        inset 0 1px rgba(255,255,255,.12),
        inset 0 -1px rgba(255,255,255,.03);
}
.pm-review__top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

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

.pm-review__photo{
    width:58px;
height:58px;
    border-radius:50%;
    object-fit:cover;
    background:#2b2b2b;
    border:2px solid rgba(255,255,255,.08);
}

.pm-review__name{
    margin:0;
    font-size:18px;
    font-weight:600;
    color:#fff;
    letter-spacing:-.02em;
}

.pm-review__subtitle{

    display:block;

    margin-top:6px;

    color:#D7B26D;

    font-size:15px;

    font-weight:500;

}

.pm-review__stars{
    margin-top:34px;
    font-size:22px;
    letter-spacing:.08em;
    color:#F5C451;
}

.pm-review__text{

    margin-top:34px;

    max-width:470px;

    font-size:22px;

    line-height:1.6;

    font-weight:400;

    color:rgba(255,255,255,.88);

    letter-spacing:-.02em;

}
.pm-review__right{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    position:relative;

}
.pm-review__right::before{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    right:-120px;
    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,210,120,.16) 0%,
            rgba(255,190,90,.08) 35%,
            transparent 75%
        );

    filter:blur(90px);

    pointer-events:none;

    z-index:1;

}
.pm-review__lifestyle{

    position:relative;
    z-index:3;

    width:100%;
    max-width:460px;

    margin-right:-20px;
    margin-top:16px;

    aspect-ratio:4/5;

    object-fit:cover;

    display:block;

    border-radius:36px;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        0 35px 70px rgba(0,0,0,.45),
        0 12px 25px rgba(0,0,0,.25);

    transform:
        rotate(-2deg)
        scale(1);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
opacity:1;

filter:blur(0);

transition:
    opacity .45s ease,
    filter .45s ease,
    transform .45s ease,
    box-shadow .45s ease;
}
.pm-review:hover .pm-review__lifestyle{

    transform:
        rotate(0deg)
        scale(1.03);

    box-shadow:
        0 55px 120px rgba(0,0,0,.55);

}
.pm-review{

    transition:
        opacity .35s ease,
        transform .35s ease,
        filter .35s ease,
        box-shadow .45s ease;

}

.pm-review-changing{

    opacity:.35;

    transform:translateY(10px);

    filter:blur(8px);

}
.pm-lamp{

    position:relative;

}

.pm-lamp__img{

    position:absolute;

    inset:0;

    width:min(520px,100%);
    height:auto;

    margin:auto;

    opacity:0;

    transition:opacity .8s ease;

    pointer-events:none;

}

.pm-lamp__img.active{

    opacity:1;

}
/* =========================================
   PM FEATURES — MOBILE
========================================= */

@media screen and (max-width:749px){

  .pm-features{
    padding:100px 0 120px;
    overflow:hidden;
  }

  .pm-features__container{
    width:100%;
    padding:0 18px;
  }

  .pm-features__grid{
  display:flex;
  flex-wrap:nowrap;

  gap:14px;

  width:100%;
  max-width:none;

  overflow-x:auto;
  overflow-y:hidden;
overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:20px;

  -webkit-overflow-scrolling:touch;

  padding:0 20px 24px;

  scrollbar-width:none;

  justify-content:flex-start;
}

.pm-features__grid::-webkit-scrollbar{
  display:none;
}

  .pm-feature-card{
    width:100%;
    min-width:0;
    min-height:0;

    border-radius:26px;
  }
  .pm-feature-card__visual{
  width:100%;
  height:360px;

  overflow:hidden;

  border-radius:25px 25px 0 0;
}
.pm-feature-card__content::before{
  display:block;

  margin-bottom:14px;

  color:#d9b36b;

  font-size:11px;
  letter-spacing:.20em;
}

.pm-feature-card:nth-child(1) .pm-feature-card__content::before{
  content:"01";
}

.pm-feature-card:nth-child(2) .pm-feature-card__content::before{
  content:"02";
}

.pm-feature-card:nth-child(3) .pm-feature-card__content::before{
  content:"03";
}

.pm-feature-card:nth-child(4) .pm-feature-card__content::before{
  content:"04";
}
  .pm-feature-scene,
  .pm-feature-scene__image{
    width:100%;
    height:100%;
  }

  .pm-feature-scene__image{
    object-fit:cover;
    object-position:center;

    transform:none;
  }

  .pm-feature-card:hover .pm-feature-scene__image{
    transform:none;
  }
    .pm-feature-card__content{
    padding:26px 24px 30px;
  }

  .pm-feature-card__icon,
  .pm-touch-icon,
  .pm-feature-icon{
    width:46px;
    height:46px;

    margin-bottom:18px;
  }

  .pm-feature-card h3{
    font-size:1.65rem;
    line-height:1.1;

    margin-bottom:12px;
  }

  .pm-feature-card p{
    font-size:.98rem;
    line-height:1.55;

    max-width:none;
  }
    .pm-sound-buttons,
  .pm-night-buttons{
    gap:8px;
    margin-top:20px;
  }

  .pm-sound,
  .pm-night{
    padding:10px 14px;
    font-size:.82rem;
  }

  .pm-color-buttons{
    justify-content:flex-start;

    gap:13px;
    margin-top:22px;
  }

  .pm-color{
    width:32px;
    height:32px;
  }
    .pm-features__header{
    width:100%;
    max-width:360px;

    margin:0 auto 58px;

    padding:0 6px;

    text-align:center;
  }
/* ---------- CINEMATIC HEADER REVEAL ---------- */

.pm-features__header{
  opacity:0;

  transform:
    translateY(42px)
    scale(.97);

  transition:
    opacity .85s ease,
    transform 1s cubic-bezier(.16,1,.3,1);

  will-change:transform, opacity;
}

.pm-features__header.pm-feature-visible{
  opacity:1;

  transform:
    translateY(0)
    scale(1);
}
  .pm-features__eyebrow{
    margin-bottom:16px;

    font-size:.68rem;
    letter-spacing:.26em;
  }

  .pm-features__header h2{
    font-size:2.55rem;
    line-height:.98;
  }

  .pm-features__header p{
    margin-top:22px;

    font-size:.96rem;
    line-height:1.55;
  }
  .pm-feature-card{
  overflow:hidden;

  border:1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015)
    );

  box-shadow:
    0 18px 45px rgba(0,0,0,.28);
}
.pm-feature-card{
  overflow:hidden;

  border:1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015)
    );

  box-shadow:
    0 18px 45px rgba(0,0,0,.28);
}
/* ---------- CINEMATIC CARD REVEAL ---------- */

.pm-feature-card{
  opacity:0;

  transform:
    translateY(72px)
    scale(.94);

  transition:
    opacity .8s ease,
    transform 1.05s cubic-bezier(.16,1,.3,1),
    border-color .45s ease,
    box-shadow .45s ease;

  will-change:transform, opacity;
}

.pm-feature-card.pm-feature-visible{
  opacity:1;

  transform:
    translateY(0)
    scale(1);
}
.pm-feature-card__content::before{
  display:block;

  margin-bottom:14px;

  color:#d9b36b;

  font-size:11px;
  letter-spacing:.20em;
}

.pm-feature-card:nth-child(1) .pm-feature-card__content::before{
  content:"01";
}

.pm-feature-card:nth-child(2) .pm-feature-card__content::before{
  content:"02";
}

.pm-feature-card:nth-child(3) .pm-feature-card__content::before{
  content:"03";
}

.pm-feature-card:nth-child(4) .pm-feature-card__content::before{
  content:"04";
}
.pm-feature-card{
  flex:0 0 82%;
  width:82%;

  scroll-snap-align:start;
  scroll-snap-stop:always;
  opacity:0;
  transform:translateY(34px);

  transition:
    opacity .75s ease,
    transform .85s cubic-bezier(.22,1,.36,1);
}

.pm-feature-card.pm-feature-visible{
  opacity:1;
  transform:translateY(0);
}
}
@media screen and (max-width:749px){

  .pm-experience__features-stage
  .pm-features__grid{

    overscroll-behavior-x:contain;

    scroll-behavior:auto;

  }

}
/* =========================================
   PM EXPERIENCE + FEATURES
   SCROLL CINEMÁTICO — MOBILE
========================================= */

@media screen and (max-width:749px){

  .pm-experience{
    min-height:850svh;
  }

}
/* =====================================================
   PM FEATURES — DESKTOP SPLIT GRID V4
   2 ARRIBA + 2 ABAJO
   SOLO ESCRITORIO
===================================================== */

@media screen and (min-width:750px){

  /* =====================================================
     CONTENEDOR GENERAL
  ===================================================== */

  .pm-features__container{
    width:96% !important;
    max-width:1800px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    padding-left:0 !important;
    padding-right:0 !important;
  }


  /* =====================================================
     GRID — 2 COLUMNAS
  ===================================================== */

  .pm-features__grid{
    display:grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:18px !important;

    width:100% !important;
    max-width:none !important;

    margin-top:68px !important;
  }


  /* =====================================================
     TARJETA HORIZONTAL
  ===================================================== */

  .pm-features .pm-feature-card{
    position:relative !important;

    display:grid !important;

    grid-template-columns:
      56% 44% !important;

    width:100% !important;

    height:390px !important;
    min-height:390px !important;

    border-radius:26px !important;

    overflow:hidden !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.025),
        rgba(255,255,255,.008)
      ) !important;

    border:
      1px solid rgba(255,255,255,.10) !important;

    box-shadow:
      0 24px 65px rgba(0,0,0,.28) !important;
  }


  /* =====================================================
     QUITAR OVERLAY ANTIGUO
  ===================================================== */

  .pm-features .pm-feature-card::after{
    display:none !important;
  }


  /* =====================================================
     IMAGEN
  ===================================================== */

  .pm-features .pm-feature-card__visual{
    position:relative !important;

    inset:auto !important;

    width:100% !important;
    height:100% !important;

    min-height:0 !important;

    border-radius:0 !important;

    overflow:hidden !important;

    z-index:1 !important;

    grid-column:1 !important;
  }


  .pm-features .pm-feature-scene{
    width:100% !important;
    height:100% !important;
  }


  .pm-features .pm-feature-scene__image{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    transform:none !important;

    filter:
      brightness(.96)
      saturate(1.05) !important;
  }



  /* =====================================================
     CONTENIDO
  ===================================================== */

  .pm-features .pm-feature-card__content{
    position:relative !important;

    left:auto !important;
    right:auto !important;
    bottom:auto !important;

    grid-column:2 !important;

    width:100% !important;
    height:100% !important;

    padding:
      34px
      30px !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:flex-start !important;

    justify-content:center !important;

    background:
      linear-gradient(
        90deg,
        rgba(8,8,8,.96),
        rgba(5,5,5,1)
      ) !important;

    z-index:4 !important;
  }

/* =====================================================
   TARJETA 1 — INVERTIDA
   TEXTO IZQUIERDA / FOTO DERECHA
===================================================== */

.pm-features
.pm-feature-card:nth-child(1){
  grid-template-columns:
    44% 56% !important;
}


.pm-features
.pm-feature-card:nth-child(1)
.pm-feature-card__content{
  grid-column:1 !important;
  grid-row:1 !important;
}


.pm-features
.pm-feature-card:nth-child(1)
.pm-feature-card__visual{
  grid-column:2 !important;
  grid-row:1 !important;
}

  /* =====================================================
     TARJETA 3 — INVERTIDA
     TEXTO IZQUIERDA / FOTO DERECHA
  ===================================================== */

  .pm-features
  .pm-feature-card:nth-child(3){
    grid-template-columns:
      44% 56% !important;
  }


  .pm-features
  .pm-feature-card:nth-child(3)
  .pm-feature-card__content{
    grid-column:1 !important;
    grid-row:1 !important;
  }


  .pm-features
  .pm-feature-card:nth-child(3)
  .pm-feature-card__visual{
    grid-column:2 !important;
    grid-row:1 !important;
  }



  /* =====================================================
     NÚMEROS 01 — 04
  ===================================================== */

  .pm-features
  .pm-feature-card::before{
    position:absolute !important;

    top:26px !important;

    width:48px !important;
    height:48px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    border-radius:50% !important;

    background:
      rgba(10,10,10,.66) !important;

    border:
      1px solid rgba(255,192,70,.50) !important;

    color:#fff !important;

    font-size:14px !important;
    font-weight:600 !important;

    letter-spacing:.04em !important;

    backdrop-filter:
      blur(14px) !important;

    -webkit-backdrop-filter:
      blur(14px) !important;

    z-index:10 !important;

    pointer-events:none !important;
  }


  /* =====================================================
   TODOS LOS NÚMEROS — ESQUINA SUPERIOR IZQUIERDA
===================================================== */

.pm-features
.pm-feature-card::before{
  left:22px !important;
  right:auto !important;
}


  .pm-features
  .pm-feature-card:nth-child(1)::before{
    content:"01" !important;
  }

  .pm-features
  .pm-feature-card:nth-child(2)::before{
    content:"02" !important;
  }

  .pm-features
  .pm-feature-card:nth-child(3)::before{
    content:"03" !important;
  }

  .pm-features
  .pm-feature-card:nth-child(4)::before{
    content:"04" !important;
  }



  /* =====================================================
     QUITAR NÚMERO ANTIGUO DEL CONTENIDO
  ===================================================== */

  .pm-features
  .pm-feature-card__content::before{
    display:none !important;
  }



  /* =====================================================
     ICONOS
  ===================================================== */

  .pm-features .pm-feature-card__icon,
  .pm-features .pm-touch-icon,
  .pm-features .pm-feature-icon{
    width:46px !important;
    height:46px !important;

    flex:0 0 46px !important;

    margin:
      0
      0
      18px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    border-radius:50% !important;

    background:
      rgba(255,255,255,.035) !important;

    border:
      1px solid rgba(255,255,255,.10) !important;
  }



  /* =====================================================
     TÍTULOS
  ===================================================== */

  .pm-features
  .pm-feature-card h3{
    margin:
      0
      0
      14px !important;

    max-width:100% !important;

    font-size:
      clamp(25px,1.8vw,33px) !important;

    line-height:1.05 !important;

    font-weight:700 !important;

    letter-spacing:-.025em !important;
  }



  /* =====================================================
     TEXTO
  ===================================================== */

  .pm-features
  .pm-feature-card p{
    margin:
      0
      0
      20px !important;

    max-width:100% !important;

    font-size:
      clamp(14px,.9vw,17px) !important;

    line-height:1.55 !important;

    color:
      rgba(255,255,255,.70) !important;
  }



  /* =====================================================
     BOTONES
  ===================================================== */

  .pm-features .pm-sound-buttons,
  .pm-features .pm-night-buttons{
    display:flex !important;

    flex-wrap:wrap !important;

    gap:8px !important;

    width:100% !important;

    margin-top:0 !important;
  }


  .pm-features .pm-color-buttons{
    display:flex !important;

    flex-wrap:nowrap !important;

    justify-content:flex-start !important;

    gap:10px !important;

    width:100% !important;

    margin-top:2px !important;
  }


  .pm-features .pm-sound,
  .pm-features .pm-night{
    padding:
      8px
      13px !important;

    font-size:12px !important;
  }


  .pm-features .pm-color{
    width:32px !important;
    height:32px !important;
  }



  /* =====================================================
     AJUSTE DE LAS FOTOS
  ===================================================== */

  .pm-features
  .pm-feature-card:nth-child(1)
  .pm-feature-scene__image{
    object-position:center 45% !important;
  }


  .pm-features
  .pm-feature-card:nth-child(2)
  .pm-feature-scene__image{
    object-position:center 52% !important;
  }


  .pm-features
  .pm-feature-card:nth-child(3)
  .pm-feature-scene__image{
    object-position:center 52% !important;
  }


  .pm-features
  .pm-feature-card:nth-child(4)
  .pm-feature-scene__image{
    object-position:center 48% !important;
  }



  /* =====================================================
     HOVER
  ===================================================== */

  .pm-features
  .pm-feature-card.pm-feature-visible:hover{
    transform:
      translateY(-4px)
      scale(1) !important;

    border-color:
      rgba(255,190,80,.22) !important;

    box-shadow:
      0 32px 80px rgba(0,0,0,.38) !important;
  }


  .pm-features
  .pm-feature-card:hover
  .pm-feature-scene__image{
    transform:
      scale(1.025) !important;
  }
/* ================================================
   TARJETAS 01 Y 03
   ICONO — ESQUINA SUPERIOR IZQUIERDA
================================================ */

.pm-features
.pm-feature-card:nth-child(1)
.pm-feature-icon,

.pm-features
.pm-feature-card:nth-child(3)
.pm-touch-icon{
  position:absolute !important;

  top:26px !important;
  left:26px !important;

  right:auto !important;
  bottom:auto !important;

  margin:0 !important;

  z-index:10 !important;
}
/* ================================================
   TARJETAS 02 Y 04
   SOLO ICONO — ESQUINA SUPERIOR DERECHA
================================================ */

.pm-features
.pm-feature-card:nth-child(2)
.pm-feature-icon,

.pm-features
.pm-feature-card:nth-child(4)
.pm-feature-icon{
  position:absolute !important;

  top:26px !important;
  right:26px !important;

  left:auto !important;
  bottom:auto !important;

  margin:0 !important;

  z-index:10 !important;
}
/* ================================================
   TARJETAS 01 Y 03
   NÚMERO SOBRE LA IMAGEN — ESQUINA SUPERIOR DERECHA
================================================ */

.pm-features
.pm-feature-card:nth-child(1)::before,
.pm-features
.pm-feature-card:nth-child(3)::before{
  left:auto !important;
  right:26px !important;
  top:26px !important;
}
}
/* =========================================
   PM FEATURES — PAGINACIÓN VERTICAL MOBILE
========================================= */

@media screen and (max-width:749px){

  .pm-experience__features-stage
  .pm-features__pagination{

    position:absolute !important;

    top:40% !important;
    right:6px !important;

    bottom:auto !important;
    left:auto !important;

    transform:translateY(-50%) !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;

    width:auto !important;

    margin:0 !important;
    padding:12px 8px !important;

    gap:9px !important;

    border-radius:999px;

    background:
      rgba(8,8,8,.44);

    border:
      1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    z-index:20;
  }


  .pm-experience__features-stage
  .pm-features__dot{

    width:5px !important;
    height:5px !important;

    min-width:5px !important;

    padding:0 !important;

    border:0 !important;
    border-radius:999px !important;

    background:
      rgba(255,255,255,.28) !important;

    opacity:1 !important;

    transition:
      height .35s ease,
      background .35s ease,
      box-shadow .35s ease !important;
  }


  /* INDICADOR ACTIVO */

  .pm-experience__features-stage
  .pm-features__dot.is-active{

    width:5px !important;
    height:22px !important;

    background:#ffd06a !important;

    box-shadow:
      0 0 10px rgba(255,190,70,.45) !important;
  }


  /* FLECHA: CONTINÚA HACIA ABAJO */

  .pm-experience__features-stage
  .pm-features__pagination::after{

    content:"";

    width:7px;
    height:7px;

    margin-top:4px;

    border-right:
      1.5px solid rgba(255,208,106,.85);

    border-bottom:
      1.5px solid rgba(255,208,106,.85);

    transform:rotate(45deg);

    animation:
      pmFeaturesScrollCue
      1.6s
      ease-in-out
      infinite;
  }

}


/* =========================================
   FLECHA SCROLL
========================================= */

@keyframes pmFeaturesScrollCue{

  0%,
  100%{
    transform:
      translateY(0)
      rotate(45deg);

    opacity:.45;
  }

  50%{
    transform:
      translateY(4px)
      rotate(45deg);

    opacity:1;
  }

}
/* ==========================================
   PM REAL MOMENTS
========================================== */

.pm-real{

    position:relative;

    padding:110px 0;

    background:#050505;

    overflow:hidden;

}

.pm-real__container{
    width:min(1540px,96vw);
    margin:0 auto;
}

/* ---------- HEADER ---------- */

.pm-real__heading{

    text-align:center;

    max-width:980px;

    margin:0 auto 70px;

}

.pm-real__eyebrow{
position:relative;
overflow:hidden;
    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    border-radius:999px;

    border:1px solid rgba(232,184,93,.16);

    background:rgba(232,184,93,.06);

    color:#E8B85D;

    letter-spacing:.18em;

    font-size:.78rem;

    text-transform:uppercase;

}
/* =========================================
   PM REAL — DESTELLO "EN ACCIÓN"
========================================= */

.pm-real__eyebrow::after{
  content:"";

  position:absolute;

  top:-40%;
  left:-55%;

  width:34%;
  height:180%;

  pointer-events:none;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.10),
    rgba(255,255,255,.55),
    rgba(255,255,255,.10),
    transparent
  );

  filter:blur(3px);

  transform:
    skewX(-20deg)
    translateX(0);

  animation:
    pmRealEyebrowShine 4.5s ease-in-out infinite;
}


@keyframes pmRealEyebrowShine{

  0%,
  62%{
    left:-55%;
    opacity:0;
  }

  68%{
    opacity:1;
  }

  82%{
    left:125%;
    opacity:1;
  }

  88%,
  100%{
    left:125%;
    opacity:0;
  }

}
.pm-real__heading h2{

    margin:22px 0 18px;

    font-size:clamp(3rem,6vw,5.4rem);

    line-height:1.02;

    font-weight:600;

    color:#fff;

}

.pm-real__heading span{

    color:#E8B85D;

}

.pm-real__heading p{

    color:rgba(255,255,255,.72);

    font-size:1.35rem;

    line-height:1.7;

}

/* ---------- TIMELINE ---------- */

.pm-real__journey{
    display:flex;
    flex:0 0 auto;

    align-items:center;
    justify-content:center;

    gap:22px;

    width:max-content;

    margin:0;
}
.pm-real__journey::after{
  content:"";

  flex:0 0 70px;

  width:70px;
  height:2px;

  margin:0 22px;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(232,184,93,.75),
    transparent
  );
}
.pm-real__journey-wrap > .pm-real__journey{
    flex:0 0 auto;
}

.pm-real__journey-line{

    flex:1;

    max-width:120px;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(232,184,93,.75),
            transparent
        );

}

.pm-real__journey-item{

    display:flex;

    align-items:center;

    gap:18px;

    min-width:0;

}

.pm-real__journey-icon{

    width:84px;

    height:84px;

    border-radius:50%;

    border:1px solid rgba(232,184,93,.25);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#E8B85D;

    font-size:2.2rem;

    background:
radial-gradient(
circle,
rgba(232,184,93,.18),
rgba(232,184,93,.05) 55%,
transparent 85%
);
box-shadow:
0 0 30px rgba(232,184,93,.08),
inset 0 0 18px rgba(232,184,93,.05);
flex-shrink:0;

min-width:74px;
min-height:74px;

aspect-ratio:1 / 1;
}

.pm-real__journey-item strong{

    display:block;

    color:#fff;

    font-size:.9rem;

    letter-spacing:.12em;

}

.pm-real__journey-item span{

    color:rgba(255,255,255,.72);

    font-size:1rem;

    line-height:1.55;

}
/* ==========================
   TARJETAS
========================== */

.pm-real__videos{
    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:14px;

    margin-top:36px;

}

.pm-real__card{

    position:relative;
cursor:pointer;
    display:flex;

    flex-direction:column;
flex:1;
min-width:0;
    overflow:hidden;

    border-radius:18px;

    background:
linear-gradient(
    180deg,
    rgba(28,28,28,.98),
    rgba(10,10,10,.99)
);

    border:1px solid rgba(232,184,93,.08);
box-shadow:
    0 18px 46px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.025);
    transition:.35s;
transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.pm-real__card:hover{

    transform:translateY(-5px);

    border-color:rgba(232,184,93,.22);

    box-shadow:
        0 28px 70px rgba(0,0,0,.46),
        0 0 20px rgba(232,184,93,.05);

}

.pm-real__card-media{

    position:relative;
    height:500px;
overflow:hidden;
    background:
    linear-gradient(
        180deg,
        #4b4b4b,
        #2b2b2b
    );
aspect-ratio:10 / 17;
}
.pm-real__card-media::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:3;

    pointer-events:none;

    background:
        linear-gradient(
            to top,
            rgba(5,5,5,.98) 0%,
            rgba(5,5,5,.90) 14%,
            rgba(5,5,5,.62) 30%,
            rgba(5,5,5,.24) 52%,
            rgba(5,5,5,0) 74%
        );

}
.pm-real__image{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .6s ease;

}

.pm-real__card:hover .pm-real__image{

    transform:scale(1.04);

}
.pm-real__card-play{

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:46px;
    height:46px;

    z-index:5;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.16);

    background:rgba(10,10,10,.40);

    backdrop-filter:blur(14px);

    color:#fff;

    font-size:15px;

    cursor:pointer;

    box-shadow:
        0 8px 25px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.08);

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}
.pm-real__card:hover .pm-real__card-play{

    transform:
        translate(-50%,-50%)
        scale(1.08);

    background:rgba(232,184,93,.16);

    border-color:rgba(232,184,93,.34);

    box-shadow:
        0 10px 30px rgba(0,0,0,.42),
        0 0 18px rgba(232,184,93,.10);

}

.pm-real__card-content{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:3;

    padding:22px;

}

.pm-real__card-time{

    display:flex;

    align-items:center;

    gap:8px;

    color:rgba(255,255,255,.90);

    margin-bottom:12px;

    padding-bottom:12px;

    border-bottom:1px solid rgba(232,184,93,.14);

    font-size:.88rem;

}
.pm-real__card-time{
    position:relative;
}

.pm-real__card-time::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-1px;

    width:36px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(232,184,93,.95),
            rgba(232,184,93,0)
        );

    box-shadow:
        0 0 8px rgba(232,184,93,.22);

}

.pm-real__card h3{

    margin:0 0 9px;

    color:#E8B85D;

    font-size:.94rem;

    line-height:1.25;

    letter-spacing:.07em;

    font-weight:600;

}

.pm-real__card p{

    margin:0;

    color:rgba(255,255,255,.72);

    font-size:.92rem;

    line-height:1.5;

}

.pm-real__card p{

    margin:0;

    color:rgba(255,255,255,.72);

    font-size:.92rem;

    line-height:1.5;

}
.pm-real__image{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .6s ease,
        filter .6s ease;

}

.pm-real__card:hover .pm-real__image{

    transform:scale(1.05);

}
.pm-real__card.is-active{

    border-color:rgba(232,184,93,.42);

    box-shadow:
        0 26px 72px rgba(0,0,0,.42),
        0 0 22px rgba(232,184,93,.08);

}
.pm-real__card:hover .pm-real__card-play{

    transform:
        translate(-50%,-50%)
        scale(1.08);

    background:rgba(232,184,93,.22);

    border-color:rgba(232,184,93,.45);

}
.pm-real__video{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;

}
.pm-real__media-placeholder{
    width:100%;
    height:100%;

    background:
        linear-gradient(
            180deg,
            #4b4b4b,
            #242424
        );
}
.pm-real__cover{

    position:absolute;

    inset:0;

    z-index:2;

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;

    transition:
        opacity .45s ease,
        visibility .45s ease,
        transform .7s ease;

}
.pm-real__card.is-playing .pm-real__cover{

    opacity:0;
    visibility:hidden;

}
/* Resplandor inferior al reproducir video */

.pm-real__card{
  position:relative;
}

.pm-real__card::after{
  content:"";

  position:absolute;
  left:50%;
  bottom:-1px;

  width:0;
  height:2px;

  transform:translateX(-50%);

  background:#E8B85D;

  box-shadow:
    0 0 8px rgba(232,184,93,.9),
    0 0 18px rgba(232,184,93,.65),
    0 0 35px rgba(232,184,93,.35);

  opacity:0;

  transition:
    width .55s ease,
    opacity .35s ease;

  pointer-events:none;
  z-index:5;
}
.pm-real__card.is-active::after{
  width:42%;
  opacity:1;
}
.pm-real__card.is-active{
  box-shadow:
    0 18px 45px rgba(0,0,0,.38),
    0 10px 35px rgba(232,184,93,.10);
}
/* ==========================
   PM REAL - SOCIAL PROOF
========================== */

.pm-real__proof{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:40px;

  width:86%;
  max-width:1400px;

  margin:42px auto 0;

  padding:20px 34px;

  border-radius:22px;

  border:1px solid rgba(232,184,93,.10);

  background:
    linear-gradient(
      180deg,
      rgba(22,22,22,.48),
      rgba(10,10,10,.58)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}
.pm-real__quote{

    display:flex;

    align-items:center;

    gap:22px;

}

.pm-real__quote-mark{

    flex-shrink:0;

    color:#E8B85D;

    font-size:5rem;

    line-height:.6;

    opacity:.68;

}

.pm-real__quote p{

    margin:0;

    color:rgba(255,255,255,.88);

    font-size:1.1rem;

    line-height:1.45;

}
.pm-real__community{
  display:flex;
  align-items:center;
  justify-content:flex-end;

  gap:16px;

  flex-shrink:0;
}

.pm-real__community p{
  margin:0;

  max-width:210px;

  color:rgba(255,255,255,.86);

  font-size:1.05rem;
  line-height:1.35;
}

.pm-real__community strong{

    display:inline;

    color:#E8B85D;

    font-size:1.15rem;

    font-weight:500;

}
.pm-real__avatars{

    display:flex;

    align-items:center;

}

.pm-real__avatars span{

    display:block;

    width:46px;
    height:46px;

    margin-left:-10px;

    border-radius:50%;

    border:2px solid #0a0a0a;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(232,184,93,.46),
            rgba(70,55,35,.70)
        );

    box-shadow:
        0 0 0 1px rgba(232,184,93,.25);

}
.pm-real__avatars span{
  overflow:hidden;
  position:relative;
}

.pm-real__avatars span img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
  object-position:center;

  border-radius:50%;
}
.pm-real__avatars span:first-child{
    margin-left:0;
}
/*=========================
ARROWS
=========================*/

.pm-real__videos-wrapper{

    position:relative;

}

.pm-real__arrow{

    position:absolute;

    top:42%;

    transform:translateY(-50%);

    width:52px;
height:52px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.14);

    background:rgba(10,10,10,.78);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:22px;

    backdrop-filter:blur(18px);

    z-index:30;

    transition:.3s;

}

.pm-real__arrow:hover{

    background:rgba(232,184,93,.18);

    border-color:rgba(232,184,93,.35);

    transform:
        translateY(-50%)
        scale(1.08);

}

.pm-real__arrow--prev{

    left:-38px;

}

.pm-real__arrow--next{

    right:-38px;

}
.pm-real__videos{

    overflow:hidden;

}

.pm-real__track{

    display:flex;

    gap:14px;

    width:100%;

    transition:
        transform .55s cubic-bezier(.22,.61,.36,1);

    will-change:transform;

}
.pm-real__track .pm-real__card{

    flex:0 0 calc((100% - 56px) / 5);

    min-width:0;

}
@media (max-width:749px){

  .pm-real__arrow{
    display:none;
  }
.pm-real__videos{
    overflow-x:auto;
    overflow-y:visible;

    scroll-snap-type:x mandatory;
    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;
  }

  .pm-real__videos::-webkit-scrollbar{
    display:none;
  }

  .pm-real__track{
    gap:14px;

    width:max-content;

    transform:none !important;
  }

  .pm-real__track .pm-real__card{
    flex:0 0 78vw;

    width:78vw;

    scroll-snap-align:center;
  }
.pm-real__container{
  width:100%;
}

.pm-real__heading{
  width:88%;
  margin-left:auto;
  margin-right:auto;

  text-align:left;
}

.pm-real__videos-wrapper{
  width:100%;
}

.pm-real__videos{
  padding-left:6vw;
  padding-right:6vw;
}
.pm-real{
  padding:80px 0 90px;
}

.pm-real__heading{
  margin-bottom:48px;
}

.pm-real__heading h2{
  font-size:clamp(42px,12vw,58px);
  line-height:1;
}

.pm-real__heading p{
  font-size:16px;
  line-height:1.55;
}
.pm-real__card-media{
  height:auto;
  aspect-ratio:9 / 16;
}

.pm-real__card{
  border-radius:20px;
}

.pm-real__card-content{
  padding:20px;
}
.pm-real__journey
  justify-content:flex-start;

  width:100%;

  padding:0 6vw 12px;

  gap:18px;

  overflow-x:auto;

  scrollbar-width:none;
}

.pm-real__journey::-webkit-scrollbar{
  display:none;
}

.pm-real__journey-item{
  flex:0 0 210px;
}

.pm-real__journey-line{
  flex:0 0 50px;
}
.pm-real__proof{
  width:88%;

  margin-top:32px;

  padding:24px;

  flex-direction:column;

  align-items:flex-start;

  gap:28px;
}

.pm-real__community{
  width:100%;

  justify-content:flex-start;
}
.pm-real__journey-wrap{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;

    width:max-content;
    max-width:none;

    margin-bottom:36px;

    will-change:transform;
}

.pm-real__journey{
    width:max-content;
    
    animation:pmJourneyMove 18s linear infinite;
}
}
.pm-real__card.is-active{

    transform:translateY(-4px);

    border-color:rgba(232,184,93,.25);

    box-shadow:
        0 24px 60px rgba(0,0,0,.38),
        0 0 24px rgba(232,184,93,.07);

}
.pm-real__card.is-active .pm-real__card-play{

    background:rgba(232,184,93,.18);

    border-color:rgba(232,184,93,.32);

}
/* PM REAL MOMENTS — tarjetas más grandes SOLO escritorio */

@media (min-width:750px){

  .pm-real__videos-wrapper{
    width:98vw;
    max-width:1600px;
    margin-left:50%;
    transform:translateX(-50%);
  }

  .pm-real__videos{
    width:100%;
  }

  .pm-real__track{
    width:100%;
    gap:12px;
  }

  .pm-real__track .pm-real__card{
    flex:1 1 0;
    width:auto;
    min-width:0;
  }

}
@media (min-width:750px){

  .pm-real__arrow--next{
    right:18px;
  }

}
@media (min-width:750px){

  .pm-real__videos{
    display:block;
    width:100%;
    max-width:none;

    padding-left:0;
    padding-right:0;

    margin-top:36px;

    overflow:hidden;
  }

  .pm-real__track{
    display:flex;
    width:100%;
    gap:14px;
  }

  .pm-real__track .pm-real__card{
    flex:0 0 calc((100% - 56px) / 5);
    width:calc((100% - 56px) / 5);
    max-width:none;
  }

}
@media (min-width:750px){

  .pm-real__videos-wrapper{
    width:94vw;
    max-width:1800px;

    margin-left:50%;
    transform:translateX(-50%);
  }

}
@media (min-width:750px){

  .pm-real__arrow--next{
    right:-36px;
  }

}
@media (min-width: 750px){

  .pm-real__proof{
    width:86%;
    max-width:1400px;

    margin:75px auto 0;
    padding:22px 34px;

    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;

    gap:60px;
  }

  .pm-real__quote{
    display:flex;
    align-items:center;

    flex:1 1 auto;
    width:auto;
    margin:0;
  }

  .pm-real__community{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;

    width:auto;
    flex:0 0 auto;

    gap:18px;
    margin:0;
  }

  .pm-real__community p{
    width:auto;
    max-width:220px;
    margin:0;
  }

}
/* PM TESTIMONIOS — entrada suave */

.pm-testimonial-card{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22,.61,.36,1);
}

.pm-testimonial-card.is-visible{
  opacity:1;
  transform:translateY(0);
}

.pm-testimonial-card--center{
  transition-delay:0s;
}

.pm-testimonial-card--left{
  transition-delay:.18s;
}

.pm-testimonial-card--right{
  transition-delay:.28s;
}
@media screen and (max-width: 749px) {

  html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }

  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }

}
@media screen and (max-width:749px){

  .pm-features{
    display:none;
  }

}
/* =========================================
   PM EXPERIENCE — ROCKSTAR STICKY V3
========================================= */

@media screen and (max-width:749px){

  .pm-experience{
    position:relative;

    min-height:850svh;

    padding-bottom:0 !important;

    overflow:visible;
  }


  .pm-experience__container{
    position:sticky;

    top:0;

    min-height:100svh;

    z-index:3;
  }


  .pm-experience__sticky{
    position:relative;

    width:100%;

    min-height:100svh;
  }


  .pm-experience__scene{
    position:relative;

    width:100%;
  }

}
/* =========================================
   PM EXPERIENCE — TAKEOVER SHADE
========================================= */

@media screen and (max-width:749px){

  .pm-experience__scene{
    position:relative;
  }

  .pm-experience__takeover-shade{
    position:absolute;
    inset:0;

    background:#000;

    opacity:
      var(--pm-takeover-darkness, 0);

    backdrop-filter:
      blur(var(--pm-takeover-blur, 0px));

    -webkit-backdrop-filter:
      blur(var(--pm-takeover-blur, 0px));

    pointer-events:none;

    z-index:40;

    will-change:
      opacity,
      backdrop-filter;
  }

}
/* =========================================
   EXPERIENCE — FEATURES STAGE
========================================= */

@media screen and (max-width:749px){

  .pm-experience__features-stage{
    position:absolute;

    left:0;
    right:0;
    top:0;

    width:100%;
    height:100svh;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding-top:70px;

    z-index:50;

    pointer-events:auto;

    opacity:
      var(--pm-features-stage-opacity, 0);

    transform:
      translateY(
        var(--pm-features-stage-y, 170px)
      )
      scale(
        var(--pm-features-stage-scale, .90)
      );

    transform-origin:center bottom;

    will-change:
      opacity,
      transform;
  }


  .pm-experience__features-stage
  .pm-features__grid{
    width:100%;

    margin:0;

    flex:none;
  }


  .pm-experience__features-stage
  .pm-features__pagination{
    flex:none;

    margin-top:18px;
  }

}
/* =========================================
   FIX — FEATURE CARDS INSIDE EXPERIENCE
========================================= */

@media screen and (max-width:749px){

  .pm-experience__features-stage .pm-features__grid{
    display:flex !important;
    visibility:visible !important;

    width:100%;

    overflow-x:auto;
    overflow-y:hidden;

    gap:16px;

    padding:
      10px
      19px
      24px;

    scroll-snap-type:x mandatory;
    scroll-padding-inline:19px;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;
  }


  .pm-experience__features-stage
  .pm-features__grid::-webkit-scrollbar{
    display:none;
  }


  .pm-experience__features-stage .pm-feature-card{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    flex:0 0 calc(100vw - 38px);
    width:calc(100vw - 38px);

    transform:none !important;

    scroll-snap-align:center;
    scroll-snap-stop:always;
  }


  .pm-experience__features-stage
  .pm-feature-card:first-child{
    margin-left:0;
  }

}
@media screen and (max-width:749px){

  .pm-experience__header,
  .pm-product,
  .pm-experience__mobile-card{
    opacity:var(--pm-experience-content-opacity, 1);

    transform:
      scale(var(--pm-experience-content-scale, 1));

    transform-origin:center center;

    will-change:
      opacity,
      transform;
  }

}

/* =========================================
   PM FEATURES — ACTIVE GOLD CARD
========================================= */

@media screen and (max-width:749px){

  .pm-experience__features-stage
  .pm-feature-card{

    border:
      1px solid rgba(255,255,255,.08);

    box-shadow:
      0 18px 50px rgba(0,0,0,.28);

    transition:
      border-color .45s ease,
      box-shadow .45s ease;
  }


  .pm-experience__features-stage
  .pm-feature-card.is-active-card{

    border-color:
      rgba(255,190,90,.72);

    box-shadow:
      0 0 0 1px rgba(255,176,65,.10),
      0 0 22px rgba(255,153,45,.13),
      0 20px 55px rgba(0,0,0,.34);
  }

}
@media screen and (max-width:749px){

  .pm-experience .pm-hotspot{
    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:200 !important;

    pointer-events:auto !important;

    cursor:pointer;
    touch-action:manipulation;
  }

  .pm-experience .pm-hotspot > span,
  .pm-experience .pm-hotspot > span::before,
  .pm-experience .pm-hotspot > span::after,
  .pm-experience .pm-hotspot::before,
  .pm-experience .pm-hotspot::after{
    pointer-events:none !important;
  }

  .pm-experience .pm-hotspot > div{
    display:none !important;
  }

  .pm-experience .pm-product__image{
    pointer-events:none !important;
  }

}
/* =========================================
PM EXPERIENCE — CLEAN INTERACTION LAYERS
========================================= */

@media screen and (max-width:749px){

  /* Por defecto FEATURES no intercepta ningún toque */
  /* FEATURES apagado mientras EXPERIENCE está al frente */

.pm-experience__features-stage{
  pointer-events:none !important;
}

.pm-experience__features-stage .pm-features__grid{
  pointer-events:none !important;
  touch-action:pan-y;
}

/* Cuando FEATURES toma el control */

.pm-experience__features-stage.is-interactive{
  pointer-events:auto !important;
}

.pm-experience__features-stage.is-interactive .pm-features__grid{
  pointer-events:auto !important;
  touch-action:pan-x pan-y;
}

.pm-experience__features-stage.is-interactive .pm-feature-card,
.pm-experience__features-stage.is-interactive .pm-feature-card *{
  pointer-events:auto !important;
}


  /* EXPERIENCE y sus hotspots sí son interactivos */
  .pm-experience .pm-product{
    position:relative;
    z-index:10;
  }

  .pm-experience .pm-hotspot{
    position:absolute;
    z-index:30 !important;

    pointer-events:auto !important;
    touch-action:manipulation;
    cursor:pointer;
  }

}
/* =========================================
   PM LANDING — VERTICAL PROGRESS
========================================= */

@media screen and (max-width:749px){

  .pm-page-progress{
    position:fixed;

    left:2px;
    top:40%;

    transform:translateY(-50%);

    width:7px;
    height:34vh;

    display:flex;
    flex-direction:column;

    gap:5px;

    z-index:999;

    pointer-events:none;

    transition:
      opacity .45s ease,
      transform .45s ease;
  }
/* PM TIMELINE — barra al lado derecho */

.pm-page-progress.is-timeline{
  left:auto;
  right:2px;
}

  .pm-page-progress__segment{
    position:relative;

    width:2px;
    flex:none;
height:var(--pm-segment-size, 20px);
    margin:0 auto;

    border-radius:20px;

    /*
      Casi invisible en reposo
    */
    background:
      rgba(255,220,160,.07);

    transition:
      background .55s ease,
      box-shadow .55s ease,
      width .55s ease,
      opacity .55s ease;

    opacity:.75;
  }


  /* SECCIÓN ACTUAL */
  .pm-page-progress__segment.is-active{
  width:4px;
  opacity:1;

  background:
    rgba(255,220,160,.10);
}


  /* LA SECCIÓN QUE VIENE */
  .pm-page-progress__segment.is-next{
    width:3px;

    opacity:.55;

    background:
      linear-gradient(
        to bottom,
        rgba(255,199,92,.42),
        rgba(255,184,65,.13)
      );

    box-shadow:
      0 0 7px rgba(255,179,61,.15);
  }


  /* Cuando llegamos al CTA final */
  .pm-page-progress.is-hidden{
    opacity:0;

    transform:
      translateY(-50%)
      translateX(-10px);

    pointer-events:none;
  }
.pm-page-progress__segment::after{
  content:"";
  position:absolute;

  left:0;
  bottom:0;

  width:100%;
  height:calc(var(--pm-segment-progress, 0) * 100%);

  border-radius:20px;

  background:
    linear-gradient(
      to top,
      #f7b83f,
      #ffe1a2
    );

  box-shadow:
    0 0 7px rgba(255,196,85,.75),
    0 0 17px rgba(255,175,50,.35);

  transition:
    height .12s linear;
}
.pm-page-progress__segment{
  width:3px;
  align-self:center;
}

.pm-page-progress__segment.is-active{
  width:5px;
}

.pm-page-progress__segment.is-next{
  width:4px;
}
}
/* =====================================================
   PM EXPERIENCE — RESPONSIVE DESKTOP
   iMac + MacBook + pantallas intermedias
===================================================== */

@media screen and (min-width:750px){

  /* =========================
     SECCIÓN
  ========================= */

  .pm-experience{
    min-height:clamp(
      900px,
      76vw,
      1180px
    );

    padding:
      clamp(95px, 8vw, 150px)
      0
      clamp(85px, 6.5vw, 120px);
  }


  /* =========================
     CONTENEDOR GENERAL
  ========================= */

  .pm-experience__container{
    width:min(
      1500px,
      calc(100% - clamp(50px, 6vw, 110px))
    );
  }


  /* =========================
     HEADER
  ========================= */

  .pm-experience__header{
    margin-bottom:
      clamp(38px, 3vw, 55px);
  }

  .pm-experience h2{
    font-size:
      clamp(
        50px,
        4.6vw,
        76px
      );
  }

  .pm-experience__desktop-subtitle{
    font-size:
      clamp(
        16px,
        1.15vw,
        18px
      );
  }


  /* =========================
     LÁMPARA
  ========================= */

  .pm-experience .pm-product{
    width:
      clamp(
        540px,
        50vw,
        760px
      );
  }


  /* =========================
     HOTSPOTS
  ========================= */

  .pm-experience .pm-hotspot{
    gap:
      clamp(
        9px,
        .9vw,
        15px
      );
  }

  .pm-experience
  .pm-hotspot
  > div:not(.pm-hotspot__desktop-icon){

    width:
      clamp(
        175px,
        15vw,
        245px
      );
  }


  .pm-experience .pm-hotspot h3{
    font-size:
      clamp(
        18px,
        1.45vw,
        24px
      );
  }


  .pm-experience .pm-hotspot p{
    max-width:
      clamp(
        175px,
        15vw,
        245px
      );

    font-size:
      clamp(
        13px,
        1vw,
        16px
      );
  }


  /* =========================
     ICONOS
  ========================= */

  .pm-experience .pm-hotspot__desktop-icon{

    width:
      clamp(
        54px,
        4.5vw,
        74px
      );

    height:
      clamp(
        54px,
        4.5vw,
        74px
      );

    flex-basis:
      clamp(
        54px,
        4.5vw,
        74px
      );

    font-size:
      clamp(
        25px,
        2.1vw,
        34px
      );
  }


  /* =========================
     HOTSPOTS IZQUIERDA
  ========================= */

  .pm-experience .hotspot-3{
    left:
      clamp(
        -440px,
        -28vw,
        -270px
      );
  }

  .pm-experience .hotspot-2{
    left:
      clamp(
        -465px,
        -29.5vw,
        -285px
      );
  }

  .pm-experience .hotspot-5{
    left:
      clamp(
        -450px,
        -28.5vw,
        -275px
      );
  }


  /* =========================
     HOTSPOTS DERECHA
  ========================= */

  .pm-experience .hotspot-1{
    right:
      clamp(
        -445px,
        -28vw,
        -275px
      );
  }

  .pm-experience .hotspot-4{
    right:
      clamp(
        -455px,
        -29vw,
        -280px
      );
  }


  /* =========================
     LÍNEAS
  ========================= */

  .pm-experience
  .hotspot-2 > span::before,
  .pm-experience
  .hotspot-3 > span::before,
  .pm-experience
  .hotspot-5 > span::before,
  .pm-experience
  .hotspot-1 > span::before,
  .pm-experience
  .hotspot-4 > span::before{

    width:
      clamp(
        85px,
        8vw,
        145px
      );
  }


  /* =========================
     BENEFICIOS INFERIORES
  ========================= */

  .pm-experience__desktop-benefits{

    width:min(
      1420px,
      calc(100% - clamp(20px, 3vw, 50px))
    );

    margin-top:
      clamp(
        45px,
        4vw,
        75px
      );

    padding:
      clamp(18px, 1.5vw, 24px);
  }


  .pm-experience__desktop-benefit{

    gap:
      clamp(
        10px,
        1.1vw,
        17px
      );

    padding-inline:
      clamp(
        10px,
        1.6vw,
        26px
      );
  }


  .pm-experience__benefit-icon{

    width:
      clamp(
        42px,
        3.3vw,
        54px
      );

    height:
      clamp(
        42px,
        3.3vw,
        54px
      );

    flex-basis:
      clamp(
        42px,
        3.3vw,
        54px
      );

    font-size:
      clamp(
        21px,
        1.7vw,
        28px
      );
  }


  .pm-experience__desktop-benefit strong{
    font-size:
      clamp(
        14px,
        1.05vw,
        17px
      );
  }


  .pm-experience__desktop-benefit p{
    font-size:
      clamp(
        12px,
        .88vw,
        14px
      );
  }

}


/* =====================================================
   PM EXPERIENCE — MACBOOK
   CONSERVAR COMPOSICIÓN ORIGINAL
===================================================== */

@media screen and (min-width:750px) and (max-width:1499px){

  /* LÁMPARA
     Reducimos el centro para recuperar espacio lateral
  */
  .pm-experience .pm-product{
    width:clamp(
      500px,
      42vw,
      600px
    );
  }


  /* HOTSPOTS
     Recuperamos proporciones del diseño grande
  */

  .pm-experience
  .pm-hotspot
  > div:not(.pm-hotspot__desktop-icon){
    width:215px;
  }

  .pm-experience .pm-hotspot h3{
    font-size:20px;
  }

  .pm-experience .pm-hotspot p{
    max-width:215px;
    font-size:14px;
    line-height:1.45;
    margin-top:9px;
  }


  /* ICONOS */

  .pm-experience .pm-hotspot__desktop-icon{
    width:62px;
    height:62px;
    flex:0 0 62px;
    font-size:29px;
  }


  /* =========================
     IZQUIERDA
  ========================= */

  .pm-experience .hotspot-3{
    left:-330px;
  }

  .pm-experience .hotspot-2{
    left:-345px;
  }

  .pm-experience .hotspot-5{
    left:-335px;
  }


  /* =========================
     DERECHA
  ========================= */

  .pm-experience .hotspot-1{
    right:-335px;
  }

  .pm-experience .hotspot-4{
    right:-345px;
  }


  /* =========================
     CONECTORES
  ========================= */

  .pm-experience
  .hotspot-1 > span::before,
  .pm-experience
  .hotspot-2 > span::before,
  .pm-experience
  .hotspot-3 > span::before,
  .pm-experience
  .hotspot-4 > span::before,
  .pm-experience
  .hotspot-5 > span::before{
    width:125px;
  }
/* =====================================================
   PM EXPERIENCE — SUBIR CONTENIDO EN MACBOOK
===================================================== */

.pm-experience{
  padding-top:25px !important;
  padding-bottom:110px;
}


/* BAJAR CONTENEDOR DE BENEFICIOS */

.pm-experience__desktop-benefits{
  margin-top:89px;
}
/* =====================================================
   PM EXPERIENCE — RELOJ DIGITAL MACBOOK
===================================================== */

@media screen and (min-width:750px) and (max-width:1499px){

  .pm-product__digital-clock{
    transform:
      translate(-56%, -25%)
      scale(.82);

    gap:18px;
  }

}
}
/* =====================================================
   PM REAL MOMENTS — RESPONSIVE DESKTOP
   MacBook + iMac
===================================================== */

@media screen and (min-width:750px){

  /* =========================
     SECCIÓN
  ========================= */

  .pm-real{
    padding:
      clamp(85px, 7vw, 110px)
      0
      clamp(90px, 7vw, 110px);
  }


  /* =========================
     HEADER
  ========================= */

  .pm-real__heading{
    max-width:min(980px, 86vw);

    margin-bottom:
      clamp(45px, 4vw, 70px);
  }

  .pm-real__heading h2{
    font-size:
      clamp(
        48px,
        5vw,
        86px
      );
  }

  .pm-real__heading p{
    font-size:
      clamp(
        16px,
        1.15vw,
        19px
      );
  }


  /* =========================
     CARRUSEL
  ========================= */

  .pm-real__videos-wrapper{
    width:min(
      1800px,
      calc(100vw - clamp(55px, 5vw, 110px))
    );

    max-width:none;
  }

  .pm-real__track{
    gap:
      clamp(
        10px,
        .9vw,
        14px
      );
  }


  /* =========================
     CONTENIDO DE TARJETAS
  ========================= */

  .pm-real__card-content{
    padding:
      clamp(
        16px,
        1.4vw,
        22px
      );
  }


  /* =========================
     SOCIAL PROOF
  ========================= */

  .pm-real__proof{
    width:min(
      1400px,
      calc(100% - clamp(70px, 8vw, 150px))
    );

    gap:
      clamp(
        28px,
        4vw,
        60px
      );

    margin-top:
      clamp(
        50px,
        5vw,
        75px
      );

    padding:
      clamp(18px, 1.5vw, 22px)
      clamp(24px, 2.2vw, 34px);
  }

}


/* =====================================================
   PM REAL MOMENTS — MACBOOK / DESKTOP COMPACTO
===================================================== */

@media screen and (min-width:750px) and (max-width:1499px){

  /*
    Seguimos mostrando 5 tarjetas,
    pero hacemos que la zona utilice mejor el ancho.
  */
.pm-real__container{
  transform:translateY(-50px);
}
  .pm-real__videos-wrapper{
    width:96vw;
  }


  .pm-real__track{
    gap:10px;
  }


  .pm-real__track .pm-real__card{
    flex:
      0 0
      calc((100% - 40px) / 5);

    width:
      calc((100% - 40px) / 5);
  }


  /*
    Reducimos un poco la altura visual
    para conservar proporción en laptop.
  */

  .pm-real__card-media{
    height:auto;
    aspect-ratio:10 / 17;
  }


  /* SOCIAL PROOF */

  .pm-real__proof{
  width:98%;
  max-width:1580px;

  gap:44px;

  padding:
    30px
    42px;
}

.pm-real__quote-mark{
  font-size:5.2rem;
}

.pm-real__quote p{
  font-size:1.16rem;
}

.pm-real__avatars span{
  width:52px;
  height:52px;
}

.pm-real__community{
  gap:19px;
}

.pm-real__community p{
  max-width:235px;
  font-size:1.08rem;
}

.pm-real__community strong{
  font-size:1.25rem;
}

  .pm-real__quote-mark{
    font-size:4rem;
  }

  .pm-real__quote p{
    font-size:1rem;
  }


  .pm-real__avatars span{
    width:40px;
    height:40px;
  }


  .pm-real__community{
    gap:13px;
  }

  .pm-real__community p{
    max-width:190px;
    font-size:.95rem;
  }

}
/* =====================================================
   FOOTER UTILITIES — LÍNEA DORADA PM LIGHT
===================================================== */

.footer-utilities .utilities{
  border-top-color:#E8B85D !important;
}
/* =====================================================
   PM FEATURES — TÍTULO MÁS GRANDE EN ESCRITORIO
===================================================== */

@media screen and (min-width:750px){

  .pm-features__header{
    max-width:1100px;
    margin-bottom:72px;
  }

  .pm-features__header h2{
    font-size:
      clamp(
        64px,
        6vw,
        108px
      ) !important;

    line-height:.94 !important;
    letter-spacing:-.045em;
  }

}
/* =====================================================
   PM FEATURES — MACBOOK / DESKTOP COMPACTO
===================================================== */

@media screen and (min-width:750px) and (max-width:1499px){

  /* SUBIR TODO FEATURES COMO UNA SOLA PIEZA */
  .pm-features__container{
    transform:translateY(-50px);
    margin-bottom:-120px !important;
  }


  /* HEADER */
  .pm-features__header{
    max-width:900px;
    margin-bottom:62px;
  }


  .pm-features__header h2{
    font-size:
      clamp(
        58px,
        5.4vw,
        78px
      ) !important;

    line-height:.95 !important;
  }

}
@media screen and (min-width:750px){

  .pm-features__eyebrow{
    padding:8px 18px !important;

    margin-bottom:22px !important;

    font-size:.78rem !important;
    letter-spacing:.18em !important;

    color:#E8B85D !important;

    border:
      1px solid rgba(232,184,93,.16) !important;

    background:
      rgba(232,184,93,.06) !important;
  }

}
/* =====================================================
   PM FEATURES — OCULTAR HORIZONTE EN ESCRITORIO
===================================================== */

@media screen and (min-width:750px){

  .pm-features__horizon{
    display:none !important;
  }

}
/* =========================================
   PM FEATURES — VERTICAL CARD SEQUENCE
   MOBILE
========================================= */

@media screen and (max-width:749px){

  .pm-experience__features-stage
  .pm-features__grid{

    position:relative !important;

    display:block !important;

    width:100% !important;
    height:550px !important;

    overflow:visible !important;

    padding:10px 0 24px !important;

    scroll-snap-type:none !important;
    scroll-padding:0 !important;
  }


  .pm-experience__features-stage
  .pm-feature-card{

    position:absolute !important;

    top:10px !important;
    left:50% !important;

    width:calc(100vw - 70px) !important;

    flex:none !important;

    margin:0 !important;

    opacity:
      var(--pm-card-opacity, 0) !important;

    transform:
      translate3d(
        -50%,
        var(--pm-card-y, 0px),
        0
      )
      scale(
        var(--pm-card-scale, 1)
      ) !important;

    transform-origin:center center !important;

    pointer-events:none;

    will-change:
      transform,
      opacity;
  }


  .pm-experience__features-stage
  .pm-feature-card.is-active-card{

    pointer-events:auto;
  }

}
/* =========================================
   PM FEATURES — FIX BOTONES TARJETAS
   SECUENCIA VERTICAL MOBILE
========================================= */

@media screen and (max-width:749px){

  /* Todas las tarjetas que NO están activas
     deben ignorar completamente los toques */

  .pm-experience__features-stage.is-interactive
  .pm-feature-card,
  
  .pm-experience__features-stage.is-interactive
  .pm-feature-card *{
    pointer-events:none !important;
  }


  /* Únicamente la tarjeta visible/activa
     puede recibir interacción */

  .pm-experience__features-stage.is-interactive
  .pm-feature-card.is-active-card{
    pointer-events:auto !important;
  }


  .pm-experience__features-stage.is-interactive
  .pm-feature-card.is-active-card *{
    pointer-events:auto !important;
  }


  /* Especialmente los controles */

  .pm-experience__features-stage
  .pm-feature-card.is-active-card
  button{
    pointer-events:auto !important;
    touch-action:manipulation;
  }

}
/* =====================================================
   PM LIGHT — FONDO DE SEGURIDAD
   Evita flashes blancos entre escenas
===================================================== */

body:has(.pm-hero-v2){
  background:#000 !important;
}

body:has(.pm-hero-v2) .page-wrapper{
  background:#000 !important;
}

body:has(.pm-hero-v2) main{
  background:#000 !important;
}

body:has(.pm-hero-v2) .content-for-layout{
  background:#000 !important;
}

body:has(.pm-hero-v2)
.content-for-layout > .shopify-section{
  background:#000;
}
/* =========================================
   PM FOOTER — LÍNEA DORADA DIFUMINADA
========================================= */

.footer-utilities .utilities{
  border-top:0 !important;
  position:relative;
}

.footer-utilities .utilities::before{
  content:"";
  position:absolute;

  top:0;
  left:50%;

  width:82%;
  height:1px;

  transform:translateX(-50%);

  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(217,166,69,.18) 12%,
    rgba(217,166,69,.75) 35%,
    #d9a645 50%,
    rgba(217,166,69,.75) 65%,
    rgba(217,166,69,.18) 88%,
    transparent 100%
  );

  pointer-events:none;
}