*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: "Inter Tight", ui-sans-serif, system-ui; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.pointer-events-none {
  pointer-events: none;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-x-6 {
  left: 1.5rem;
  right: 1.5rem;
}
.-bottom-32 {
  bottom: -8rem;
}
.-left-20 {
  left: -5rem;
}
.-right-0\.5 {
  right: -0.125rem;
}
.-right-32 {
  right: -8rem;
}
.-top-0\.5 {
  top: -0.125rem;
}
.-top-32 {
  top: -8rem;
}
.bottom-6 {
  bottom: 1.5rem;
}
.left-1\/2 {
  left: 50%;
}
.top-0 {
  top: 0px;
}
.top-6 {
  top: 1.5rem;
}
.z-10 {
  z-index: 10;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.col-span-full {
  grid-column: 1 / -1;
}
.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-14 {
  margin-bottom: 3.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-11 {
  height: 2.75rem;
}
.h-14 {
  height: 3.5rem;
}
.h-4 {
  height: 1rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[380px\] {
  height: 380px;
}
.h-\[420px\] {
  height: 420px;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-4 {
  width: 1rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[380px\] {
  width: 380px;
}
.w-\[420px\] {
  width: 420px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-\[1100px\] {
  max-width: 1100px;
}
.max-w-\[1240px\] {
  max-width: 1240px;
}
.max-w-\[1280px\] {
  max-width: 1280px;
}
.max-w-\[1320px\] {
  max-width: 1320px;
}
.max-w-\[840px\] {
  max-width: 840px;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.resize {
  resize: both;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[28px\] {
  border-radius: 28px;
}
.rounded-\[32px\] {
  border-radius: 32px;
}
.rounded-full {
  border-radius: 9999px;
}
.border {
  border-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-glow-cyan\/25 {
  border-color: rgb(127 231 255 / 0.25);
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.bg-glow-cyan {
  --tw-bg-opacity: 1;
  background-color: rgb(127 231 255 / var(--tw-bg-opacity, 1));
}
.bg-glow-cyan\/5 {
  background-color: rgb(127 231 255 / 0.05);
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.p-10 {
  padding: 2.5rem;
}
.p-5 {
  padding: 1.25rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-32 {
  padding-top: 8rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12\.5px\] {
  font-size: 12.5px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-\[9px\] {
  font-size: 9px;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.italic {
  font-style: italic;
}
.leading-relaxed {
  line-height: 1.625;
}
.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}
.tracking-tighter {
  letter-spacing: -0.025em;
}
.text-glow-cyan {
  --tw-text-opacity: 1;
  color: rgb(127 231 255 / var(--tw-text-opacity, 1));
}
.text-glow-cyan\/90 {
  color: rgb(127 231 255 / 0.9);
}
.text-ink-950 {
  --tw-text-opacity: 1;
  color: rgb(4 6 12 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/25 {
  color: rgb(255 255 255 / 0.25);
}
.text-white\/30 {
  color: rgb(255 255 255 / 0.3);
}
.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}
.text-white\/45 {
  color: rgb(255 255 255 / 0.45);
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/65 {
  color: rgb(255 255 255 / 0.65);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.no-underline {
  text-decoration-line: none;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.shadow-\[0_0_10px_\#7fe7ff\] {
  --tw-shadow: 0 0 10px #7fe7ff;
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_\#7fe7ff\] {
  --tw-shadow: 0 0 6px #7fe7ff;
  --tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.placeholder\:text-white\/30::-moz-placeholder {
  color: rgb(255 255 255 / 0.3);
}
.placeholder\:text-white\/30::placeholder {
  color: rgb(255 255 255 / 0.3);
}
.hover\:border-white\/30:hover {
  border-color: rgb(255 255 255 / 0.3);
}
.hover\:bg-glow-ice:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(191 243 255 / var(--tw-bg-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.focus\:border-glow-cyan\/50:focus {
  border-color: rgb(127 231 255 / 0.5);
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
@media (min-width: 640px) {

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {

  .md\:-mx-8 {
    margin-left: -2rem;
    margin-right: -2rem;
  }

  .md\:mb-20 {
    margin-bottom: 5rem;
  }

  .md\:inline-flex {
    display: inline-flex;
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-end {
    align-items: flex-end;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:p-16 {
    padding: 4rem;
  }

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .md\:pt-40 {
    padding-top: 10rem;
  }

  .md\:pt-5 {
    padding-top: 1.25rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

  .md\:text-\[18px\] {
    font-size: 18px;
  }
}
@media (min-width: 1024px) {

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:inline-flex {
    display: inline-flex;
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:gap-12 {
    gap: 3rem;
  }
}
@media (min-width: 1280px) {

  .xl\:inline-flex {
    display: inline-flex;
  }

  .xl\:hidden {
    display: none;
  }
}
/* ════════════════════════════════════════════════════════════════════════
   Longeva Peptides — Unified Design Tokens (premium luxury pharma)
   ────────────────────────────────────────────────────────────────────────
   Single source of truth for colors, surfaces, shadows, motion and focus.
   Loaded BEFORE main.css / homev2.css / proteus-shop.css so legacy values
   can opt-in by referencing var(--lp-*) where needed. Does not override
   any existing tokens — coexistence layer.

   Palette philosophy
   ──────────────────
   Three temperature tiers (warm → cold) wrapped in a controlled neutral
   spectrum. Royal blue is the only saturated color allowed at scale;
   every other accent is a desaturated tint of it. No cyan neon.

   Spec
   ────
   - Royal     #1947D1  primary brand
   - Navy      #0B1F4D  premium dark accent (CTAs en secciones claras)
   - Royal-deep #1238A8 hover state
   - Ice       #E3ECFA  soft fill / chip
   - Mist      #F0F4FB  surface secondary
   - Pearl     #F8FAFE  surface primary
   - Platinum  #C9D2E2  divider on light
   - Silver    #5E6A82  ink soft / metadata
   - Slate     #2A3550  ink medium
   - Ink       #0A1124  ink primary
   - Champagne #F4ECD8  sutil — solo para badges premium muy ocasionales
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand core (cohesive with --v2-blue 0x1947D1) ─────────────────── */
  --lp-royal:           #1947D1;
  --lp-royal-deep:      #1238A8;
  --lp-royal-hover:     #1841BD;
  --lp-navy:            #0B1F4D;
  --lp-navy-deep:       #060F2A;

  /* ── Tints & alpha (Royal at multiple opacities) ───────────────────── */
  --lp-royal-04:        rgba(25, 71, 209, 0.04);
  --lp-royal-06:        rgba(25, 71, 209, 0.06);
  --lp-royal-08:        rgba(25, 71, 209, 0.08);
  --lp-royal-12:        rgba(25, 71, 209, 0.12);
  --lp-royal-16:        rgba(25, 71, 209, 0.16);
  --lp-royal-22:        rgba(25, 71, 209, 0.22);
  --lp-royal-32:        rgba(25, 71, 209, 0.32);
  --lp-royal-48:        rgba(25, 71, 209, 0.48);
  --lp-royal-64:        rgba(25, 71, 209, 0.64);

  /* ── Neutrals (light system) ──────────────────────────────────────── */
  --lp-pearl:           #F8FAFE;   /* surface bg */
  --lp-pearl-hi:        #FDFEFF;   /* card surface bright */
  --lp-mist:            #F0F4FB;   /* secondary surface */
  --lp-ice:             #E3ECFA;   /* chip / light fill */
  --lp-ice-soft:        #EDF2FB;
  --lp-platinum:        #C9D2E2;   /* divider on light */
  --lp-platinum-soft:   #D8DFEB;
  --lp-silver:          #5E6A82;   /* metadata, sub */
  --lp-slate:           #2A3550;   /* body ink */
  --lp-ink:             #0A1124;   /* primary ink */
  --lp-ink-soft:        rgba(10, 17, 36, 0.72);
  --lp-ink-muted:       rgba(10, 17, 36, 0.56);

  /* ── Champagne accent (very rare, premium-only) ────────────────────── */
  --lp-champagne:       #F4ECD8;
  --lp-champagne-deep:  #BFA265;

  /* ── Status colors (de-saturated, on-brand) ───────────────────────── */
  --lp-success:         #1FA063;
  --lp-success-soft:    #E5F4EC;
  --lp-warning:         #B66E12;
  --lp-warning-soft:    #FAEFDC;
  --lp-danger:          #C2342E;
  --lp-danger-soft:     #FAE3E1;

  /* ── Surfaces & glass ─────────────────────────────────────────────── */
  --lp-surface:                #FFFFFF;
  --lp-surface-1:              #F8FAFE;
  --lp-surface-2:              #F0F4FB;
  --lp-surface-3:              #E8EEF8;
  --lp-glass-strong:           rgba(255, 255, 255, 0.85);
  --lp-glass:                  rgba(255, 255, 255, 0.72);
  --lp-glass-soft:             rgba(255, 255, 255, 0.55);
  --lp-glass-edge:             rgba(255, 255, 255, 0.70);
  --lp-glass-border:           rgba(25, 71, 209, 0.14);
  --lp-glass-border-strong:    rgba(25, 71, 209, 0.22);
  --lp-glass-border-soft:      rgba(25, 71, 209, 0.08);

  /* Overlay scrim for darker contexts (e.g. hero text on video) */
  --lp-scrim-08:        rgba(6, 15, 42, 0.08);
  --lp-scrim-16:        rgba(6, 15, 42, 0.16);
  --lp-scrim-32:        rgba(6, 15, 42, 0.32);

  /* ── Gradients ────────────────────────────────────────────────────── */
  --lp-grad-pearl-mist: linear-gradient(180deg, var(--lp-pearl) 0%, var(--lp-mist) 70%, var(--lp-ice) 100%);
  --lp-grad-royal:      linear-gradient(180deg, var(--lp-royal) 0%, var(--lp-royal-deep) 100%);
  --lp-grad-royal-soft: linear-gradient(180deg, #2756DA 0%, var(--lp-royal) 100%);
  --lp-grad-navy:       linear-gradient(180deg, #18316C 0%, var(--lp-navy) 100%);
  --lp-grad-glass:      linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.62) 100%);
  --lp-grad-radial-royal:
                        radial-gradient(60% 50% at 50% 0%, rgba(25,71,209,0.22) 0%, transparent 70%);

  /* ── Signature dark→royal gradient (the one you liked from the COA strip)
        Used as premium contrast surface for CTAs and conversion strips.    */
  --lp-grad-signature:
    linear-gradient(120deg,
      #050811 0%,
      #08122A 28%,
      #0E2354 58%,
      #1238A8 90%,
      #1947D1 100%);
  --lp-grad-signature-radial:
    radial-gradient(120% 100% at 0% 0%, #050811 0%, transparent 55%),
    radial-gradient(110% 100% at 100% 100%, #1947D1 0%, #0E2354 35%, #050811 80%);
  /* Subtle silk overlay to layer on signature gradient for depth */
  --lp-grad-signature-overlay:
    radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,0.06) 0%, transparent 60%),
    linear-gradient(120deg, transparent 0%, rgba(127,170,255,0.08) 50%, transparent 100%);

  /* ── Borders & radii ──────────────────────────────────────────────── */
  --lp-border-soft:      1px solid var(--lp-glass-border-soft);
  --lp-border-default:   1px solid var(--lp-glass-border);
  --lp-border-strong:    1px solid var(--lp-glass-border-strong);
  --lp-border-platinum:  1px solid var(--lp-platinum);

  --lp-radius-xs:  6px;
  --lp-radius-sm:  10px;
  --lp-radius-md:  14px;
  --lp-radius-lg:  20px;
  --lp-radius-xl:  28px;
  --lp-radius-2xl: 36px;
  --lp-radius-pill: 999px;

  /* ── Shadows (royal-tinted, premium pharma) ───────────────────────── */
  --lp-shadow-xs:    0 1px 2px rgba(11, 31, 77, 0.06);
  --lp-shadow-sm:    0 4px 14px rgba(25, 71, 209, 0.08);
  --lp-shadow-md:    0 14px 36px rgba(25, 71, 209, 0.12);
  --lp-shadow-lg:    0 28px 64px rgba(11, 31, 77, 0.16);
  --lp-shadow-xl:    0 42px 96px rgba(11, 31, 77, 0.22);
  --lp-shadow-float: 0 18px 44px rgba(25, 71, 209, 0.18),
                     0 2px 6px rgba(11, 31, 77, 0.06);
  --lp-shadow-glow:  0 0 0 1px var(--lp-glass-border) inset,
                     0 18px 48px rgba(25, 71, 209, 0.18);
  --lp-shadow-press: 0 2px 6px rgba(25, 71, 209, 0.08) inset;

  /* Premium ring around floating cards on light bg */
  --lp-ring-glass:
    0 0 0 1px rgba(255,255,255,0.55) inset,
    0 0 0 1px rgba(25, 71, 209, 0.10),
    0 18px 48px -16px rgba(25, 71, 209, 0.22);

  /* ── Focus ring (a11y) ────────────────────────────────────────────── */
  --lp-focus-ring:
    0 0 0 2px #FFFFFF,
    0 0 0 4px var(--lp-royal-48);
  --lp-focus-ring-inset:
    inset 0 0 0 2px var(--lp-royal-48);
  --lp-focus-outline:  2px solid var(--lp-royal);
  --lp-focus-offset:   2px;

  /* ── Motion: easing curves ────────────────────────────────────────── */
  --lp-ease:                cubic-bezier(0.22, 1, 0.36, 1);          /* default in/out */
  --lp-ease-out:            cubic-bezier(0.16, 1, 0.30, 1);          /* fast settle */
  --lp-ease-in-out:         cubic-bezier(0.65, 0, 0.35, 1);          /* symmetric */
  --lp-ease-cinema:         cubic-bezier(0.22, 1, 0.36, 1);          /* hero-grade */
  --lp-ease-spring:         cubic-bezier(0.34, 1.36, 0.64, 1);       /* sutil pop, no rebote */
  --lp-ease-decel:          cubic-bezier(0, 0, 0.20, 1);             /* leaving slow */

  /* ── Motion: canonical interactive transition ─────────────────────────
        Reemplazo explícito de `transition: all` (evita animar layout props
        y composita solo lo barato). Úsese en chips, links, botones, cards. */
  --lp-transition-interactive:
    color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Motion: durations ────────────────────────────────────────────── */
  --lp-dur-instant:  80ms;
  --lp-dur-xs:      120ms;
  --lp-dur-sm:      180ms;
  --lp-dur-md:      240ms;
  --lp-dur-lg:      360ms;
  --lp-dur-xl:      540ms;
  --lp-dur-cinema:  720ms;

  /* ── Spacing scale (multiples of 4) ───────────────────────────────── */
  --lp-space-1:  4px;
  --lp-space-2:  8px;
  --lp-space-3:  12px;
  --lp-space-4:  16px;
  --lp-space-5:  20px;
  --lp-space-6:  24px;
  --lp-space-7:  32px;
  --lp-space-8:  40px;
  --lp-space-9:  56px;
  --lp-space-10: 72px;
  --lp-space-11: 96px;
  --lp-space-12: 128px;

  /* ── Type scale tokens (delegates rendering to existing font stacks) ─ */
  --lp-text-eyebrow-size:   11px;
  --lp-text-eyebrow-track:  0.18em;
  --lp-text-body-size:      15px;
  --lp-text-body-track:     -0.005em;
  --lp-text-h1-size:        clamp(40px, 5.6vw, 76px);
  --lp-text-h2-size:        clamp(32px, 4vw, 56px);
  --lp-text-h3-size:        clamp(22px, 2.4vw, 32px);

  /* ── Z-index scale ────────────────────────────────────────────────── */
  --lp-z-base:        1;
  --lp-z-raised:      10;
  --lp-z-sticky:      20;
  --lp-z-navbar:      40;
  --lp-z-megamenu:    45;
  --lp-z-dropdown:    50;
  --lp-z-overlay:     60;
  --lp-z-drawer:      70;
  --lp-z-modal:       80;
  --lp-z-toast:       90;
  --lp-z-tooltip:     100;
}

/* ──────────────────────────────────────────────────────────────────────
   Reduced motion — accessibility
   Disable transforms/animations beyond a baseline cross-fade.
   ────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --lp-dur-xs:    1ms;
    --lp-dur-sm:    1ms;
    --lp-dur-md:    1ms;
    --lp-dur-lg:    1ms;
    --lp-dur-xl:    1ms;
    --lp-dur-cinema: 1ms;
  }

  *, *::before, *::after {
    animation-duration:   1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  1ms !important;
    scroll-behavior:      auto !important;
  }
}
/* ════════════════════════════════════════════════════════════════════════
   Longeva Peptides — Premium Motion System (cycle-03)
   ────────────────────────────────────────────────────────────────────────
   Reusable motion primitives. Animates only transform + opacity (and color
   on hover for ink/border). Respects prefers-reduced-motion via tokens.css
   override. No transition: all.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hover lift primitive ─────────────────────────────────────────────── */
.lp-lift {
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--lp-dur-md) var(--lp-ease),
    box-shadow var(--lp-dur-md) var(--lp-ease),
    border-color var(--lp-dur-sm) var(--lp-ease);
  will-change: transform;
}
.lp-lift:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: var(--lp-shadow-float);
}

.lp-lift-card {
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--lp-dur-lg) var(--lp-ease),
    box-shadow var(--lp-dur-lg) var(--lp-ease),
    border-color var(--lp-dur-md) var(--lp-ease);
  will-change: transform;
}
.lp-lift-card:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--lp-shadow-lg);
  border-color: var(--lp-glass-border-strong);
}

/* ── Button hover/active primitives ───────────────────────────────────── */
.lp-btn-hover {
  transition:
    transform var(--lp-dur-sm) var(--lp-ease),
    box-shadow var(--lp-dur-sm) var(--lp-ease),
    background-color var(--lp-dur-sm) var(--lp-ease),
    color var(--lp-dur-sm) var(--lp-ease),
    border-color var(--lp-dur-sm) var(--lp-ease);
  will-change: transform;
}
.lp-btn-hover:hover { transform: translate3d(0, -1px, 0); }
.lp-btn-hover:active { transform: translate3d(0, 0, 0); transition-duration: var(--lp-dur-instant); }

/* ── Focus ring (a11y, premium) ───────────────────────────────────────── */
.lp-focus,
.lp-focus:focus-visible {
  outline: none;
}
.lp-focus:focus-visible {
  box-shadow: var(--lp-focus-ring);
}

/* Global focus-visible fallback for interactive elements that opt in */
:where(.lp-focus-auto) :focus-visible {
  outline: var(--lp-focus-outline);
  outline-offset: var(--lp-focus-offset);
  border-radius: var(--lp-radius-sm);
}

/* ── Shimmer (subtle, controlled, used on premium buttons) ────────────── */
@keyframes lp-shimmer {
  0%   { transform: translate3d(-120%, 0, 0); }
  100% { transform: translate3d(120%, 0, 0); }
}
.lp-shimmer-on-hover {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.lp-shimmer-on-hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,0.32) 50%,
    transparent 70%);
  transform: translate3d(-120%, 0, 0);
  transition: transform var(--lp-dur-cinema) var(--lp-ease);
  pointer-events: none;
  z-index: 1;
}
.lp-shimmer-on-hover:hover::after {
  transform: translate3d(120%, 0, 0);
}

/* ── Dropdown entrance (opacity + translateY only) ────────────────────── */
.lp-dropdown {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  pointer-events: none;
  transition:
    opacity var(--lp-dur-md) var(--lp-ease),
    transform var(--lp-dur-md) var(--lp-ease);
  will-change: transform, opacity;
}
.lp-dropdown.is-open {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

/* ── Section reveal — subtle, no blur (cheap) ─────────────────────────── */
.lp-reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity var(--lp-dur-cinema) var(--lp-ease-out),
    transform var(--lp-dur-cinema) var(--lp-ease-out);
  transition-delay: var(--lp-reveal-delay, 0ms);
  will-change: transform, opacity;
}
.lp-reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ── Product image "breathing" on hover (slow, GPU-friendly) ──────────── */
@keyframes lp-breath {
  0%, 100% { transform: scale(1.0); }
  50%      { transform: scale(1.025); }
}
.lp-breathe-on-hover {
  transition: transform var(--lp-dur-lg) var(--lp-ease);
}
.lp-breathe-on-hover:hover {
  animation: lp-breath 4.4s ease-in-out infinite;
}

/* ── Subtle parallax-friendly image hover ─────────────────────────────── */
.lp-img-zoom {
  overflow: hidden;
}
.lp-img-zoom img {
  transform: scale(1.0);
  transition: transform var(--lp-dur-cinema) var(--lp-ease);
}
.lp-img-zoom:hover img {
  transform: scale(1.04);
}

/* ── Cart counter pulse on add (one-shot) ─────────────────────────────── */
@keyframes lp-pulse-once {
  0%   { transform: scale(1.0); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1.0); }
}
.lp-pulse-once {
  animation: lp-pulse-once 460ms var(--lp-ease-spring);
}

/* ── Generic enter/leave transitions ──────────────────────────────────── */
.lp-fade-enter      { opacity: 0; }
.lp-fade-enter-active {
  opacity: 1;
  transition: opacity var(--lp-dur-md) var(--lp-ease);
}
.lp-slide-up-enter {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}
.lp-slide-up-enter-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--lp-dur-md) var(--lp-ease),
    transform var(--lp-dur-md) var(--lp-ease);
}
      :root {
        --bg: #04060c;
        --ink: #e8eef7;
        --muted: #8b95ad;
        --hair: rgba(255, 255, 255, 0.08);
        --cyan: 127, 170, 255; /* light cobalt — antes cyan #7FE7FF off-brand */
        --violet: 182, 167, 255;
        --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-cinema: cubic-bezier(0.22, 1, 0.36, 1);
      }

      html,
      body {
        background: var(--bg);
        color: var(--ink);
        font-family: "Inter Tight", system-ui, sans-serif;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        font-feature-settings: "ss01", "cv11";
      }

      /* Typographic finishing (progressive enhancement):
         balance evita huérfanas en headlines; pretty mejora el rag de párrafos. */
      h1, h2, h3, .display { text-wrap: balance; }
      p, li, blockquote { text-wrap: pretty; }

      ::-moz-selection {
        background: rgba(var(--cyan), 0.3);
        color: #fff;
      }

      ::selection {
        background: rgba(var(--cyan), 0.3);
        color: #fff;
      }

      /* ---------- Ambient field ---------- */
      .field {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
      }
      .field::before {
        content: "";
        position: absolute;
        inset: -20%;
        background:
          radial-gradient(40% 30% at 18% 12%, rgba(var(--cyan), 0.18), transparent 60%),
          radial-gradient(35% 28% at 88% 8%, rgba(var(--violet), 0.14), transparent 65%),
          radial-gradient(60% 40% at 50% 110%, rgba(var(--cyan), 0.12), transparent 60%);
        filter: blur(20px);
      }
      .grain {
        position: fixed;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: 0.06;
        mix-blend-mode: overlay;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
      }
      .gridlines {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
        background-size: 88px 88px;
        -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
                mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
      }

      /* ---------- Glass ---------- */
      .glass {
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.06) 0%,
          rgba(255, 255, 255, 0.02) 100%
        );
        backdrop-filter: blur(28px) saturate(160%);
        -webkit-backdrop-filter: blur(28px) saturate(160%);
        border: 1px solid rgba(255, 255, 255, 0.10);
        box-shadow:
          inset 0 4px 4px 0 rgba(255, 255, 255, 0.18),
          inset 0 1px 0 0 rgba(255, 255, 255, 0.14),
          0 30px 80px -20px rgba(0, 0, 0, 0.55);
      }
      .glass-soft {
        background: rgba(255, 255, 255, 0.025);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.06);
      }
      .hairline {
        border: 1px solid var(--hair);
      }

      /* ---------- Type ---------- */
      .display {
        font-family: "Inter Tight", sans-serif;
        font-weight: 300;
        letter-spacing: -0.045em;
        line-height: 0.95;
      }
      .eyebrow {
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #6B6B6B;
        opacity: 0.8;
      }
      .mono {
        font-family: "JetBrains Mono", monospace;
      }

      /* ---------- Animations ---------- */
      /* Reveal refinado: sin blur (repaint costoso durante scroll = jank),
         menos recorrido y settle más rápido — preciso, no lento. */
      .reveal {
        opacity: 0;
        transform: translateY(18px);
        transition:
          opacity 750ms var(--ease-out-expo),
          transform 750ms var(--ease-out-expo);
        transition-delay: var(--reveal-delay, 0ms);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
      }

      @keyframes float-a {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
        50% { transform: translate3d(0, -30px, 0) scale(1.05); }
      }
      @keyframes float-b {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
        50% { transform: translate3d(20px, 24px, 0) scale(0.96); }
      }
      @keyframes drift {
        0% { transform: translate3d(-2%, 0, 0); }
        100% { transform: translate3d(2%, 0, 0); }
      }
      @keyframes pulse-ring {
        0% { transform: scale(0.9); opacity: 0.6; }
        100% { transform: scale(1.6); opacity: 0; }
      }
      @keyframes shimmer {
        0% { transform: translateX(-120%); }
        100% { transform: translateX(120%); }
      }
      @keyframes rotate-slow {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      @keyframes scan {
        0% { transform: translateY(-100%); opacity: 0; }
        15% { opacity: 0.7; }
        85% { opacity: 0.7; }
        100% { transform: translateY(100%); opacity: 0; }
      }

      .float-a { animation: float-a 14s ease-in-out infinite; }
      .float-b { animation: float-b 18s ease-in-out infinite; }
      .drift { animation: drift 22s ease-in-out infinite alternate; }
      .rotate-slow { animation: rotate-slow 80s linear infinite; }

      /* ---------- Buttons ---------- */
      .btn-primary {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 14px;
        padding: 16px 26px 16px 30px;
        border-radius: 999px;
        background: linear-gradient(180deg, #f7fbff 0%, #d8e6f2 100%);
        color: #04060c;
        font-weight: 500;
        font-size: 14px;
        letter-spacing: -0.01em;
        overflow: hidden;
        transition:
          transform 600ms var(--ease-cinema),
          box-shadow 600ms var(--ease-cinema);
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.4) inset,
          0 20px 50px -10px rgba(127, 170, 255, 0.35),
          0 0 60px -10px rgba(127, 170, 255, 0.25);
      }
      .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.5) inset,
          0 30px 70px -10px rgba(127, 170, 255, 0.55),
          0 0 100px -10px rgba(127, 170, 255, 0.45);
      }
      .btn-primary::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
        transform: translateX(-120%);
        transition: transform 1200ms var(--ease-cinema);
      }
      .btn-primary:hover::after {
        transform: translateX(120%);
      }

      .btn-ghost {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 15px 24px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: #e8eef7;
        font-weight: 400;
        font-size: 14px;
        letter-spacing: -0.01em;
        background: rgba(255, 255, 255, 0.02);
        backdrop-filter: blur(10px);
        transition: color 500ms var(--ease-cinema), background-color 500ms var(--ease-cinema), border-color 500ms var(--ease-cinema), transform 500ms var(--ease-cinema), box-shadow 500ms var(--ease-cinema), opacity 500ms var(--ease-cinema);
      }
      .btn-ghost:hover {
        border-color: rgba(127, 170, 255, 0.5);
        background: rgba(127, 170, 255, 0.06);
        color: #fff;
      }

      /* ---------- Product card ---------- */
      .product-card {
        position: relative;
        transition:
          transform 700ms var(--ease-cinema),
          box-shadow 700ms var(--ease-cinema),
          border-color 700ms var(--ease-cinema);
      }
      .product-card::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(140deg, rgba(127, 170, 255, 0) 30%, rgba(127, 170, 255, 0.5) 50%, rgba(182, 167, 255, 0) 70%);
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 700ms var(--ease-cinema);
        pointer-events: none;
      }
      .product-card:hover {
        transform: translateY(-2px);
        border-color: #1947D1;
        box-shadow: 0 12px 32px rgba(25, 71, 209, 0.08);
      }

      /* Premium polish · primary CTA hover */
      a.bg-white.text-ink-950,
      button.bg-white.text-ink-950,
      .card-add-btn {
        transition:
          transform 240ms var(--ease-cinema),
          box-shadow 240ms var(--ease-cinema),
          background-color 240ms var(--ease-cinema);
      }
      a.bg-white.text-ink-950:hover,
      button.bg-white.text-ink-950:hover,
      .card-add-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(25, 71, 209, 0.12);
      }
      .product-card:hover::before { opacity: 1; }
      .product-card:hover .vial-glow { opacity: 1; }
      .product-card:hover .vial { transform: translateY(-4px); }

      /* ---------- Vial ---------- */
      .vial-wrap {
        position: relative;
        aspect-ratio: 1 / 1.15;
        display: grid;
        place-items: center;
        overflow: hidden;
        border-radius: 18px;
        background:
          radial-gradient(60% 50% at 50% 35%, rgba(var(--cyan), 0.08), transparent 70%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.3));
      }
      /* Photoreal product card variant (Retatrutide) */
      .vial-wrap.vial-wrap-photo {
        aspect-ratio: 1 / 1;
        padding: 18px;
        background: linear-gradient(135deg, #E8EDFB 0%, #FAFAFC 100%);
      }
      .card-product-halo {
        position: absolute;
        inset: 18%;
        background: radial-gradient(circle, rgba(25, 71, 209, 0.18) 0%, rgba(25, 71, 209, 0.06) 50%, transparent 75%);
        filter: blur(28px);
        z-index: 0;
        pointer-events: none;
        transition: opacity 400ms var(--ease-cinema), transform 400ms var(--ease-cinema);
      }
      .card-product-img {
        position: relative;
        z-index: 1;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        -o-object-fit: contain;
           object-fit: contain;
        transition: transform 400ms var(--ease-cinema);
        filter: drop-shadow(0 0 24px rgba(25, 71, 209, 0.18));
      }
      .product-card:hover .card-product-img { transform: scale(1.04); }
      .product-card:hover .card-product-halo { opacity: 0.85; transform: scale(1.05); }
      .product-card:hover .vial-wrap-photo { box-shadow: inset 0 0 0 1px rgba(25, 71, 209, 0.10); }
      .vial-glow {
        position: absolute;
        width: 60%;
        height: 60%;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(var(--cyan), 0.5), transparent 60%);
        filter: blur(30px);
        opacity: 0.55;
        transition: opacity 700ms var(--ease-cinema);
      }
      .vial-grid {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
        background-size: 28px 28px;
        -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
                mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
      }
      .vial {
        position: relative;
        z-index: 2;
        width: 38%;
        height: 70%;
        transition: transform 800ms var(--ease-cinema);
        filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.5));
      }

      /* ---------- Hero molecule (placeholder structure) ---------- */
      .molecule {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        pointer-events: none;
      }
      .ring {
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.06);
      }
      .pulse {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(var(--cyan), 1);
        box-shadow: 0 0 24px rgba(var(--cyan), 0.9);
      }
      .pulse::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 1px solid rgba(var(--cyan), 0.8);
        animation: pulse-ring 2.6s var(--ease-out-expo) infinite;
      }

      /* ---------- Scan line on hero card ---------- */
      .scanline {
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(var(--cyan), 0.8), transparent);
        animation: scan 4s var(--ease-cinema) infinite;
      }

      /* ---------- Marquee ---------- */
      @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
      }
      .marquee-track {
        display: flex;
        width: -moz-max-content;
        width: max-content;
        animation: marquee 50s linear infinite;
      }

      /* ---------- Misc ---------- */
      .divider-soft {
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.12), transparent);
      }

      .nav-pill {
        position: relative;
        cursor: pointer;
        border-radius: 999px;
        background: transparent;
        border: none;
        transition: color 200ms ease, background-color 200ms ease;
      }
      .nav-pill:hover {
        background: rgba(25,71,209,0.06);
      }
      .nav-pill::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 8px;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(var(--cyan), 0.8), transparent);
        opacity: 0;
        transition: opacity 400ms var(--ease-cinema);
      }
      .nav-pill:hover::after { opacity: 1; }

      .num-tick {
        font-variant-numeric: tabular-nums;
      }

      /* hide scrollbar on horizontal scroll on mobile */
      .no-scrollbar::-webkit-scrollbar { display: none; }
      .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

      /* Mega-menu / catalog chip hover (Cycle 2) */
      .chip-cat:not([aria-pressed="true"]):hover {
        border-color: rgba(255,255,255,0.30) !important;
        background: rgba(255,255,255,0.04) !important;
        color: rgba(255,255,255,0.95) !important;
      }
      html[data-palette="paper"] .chip-cat:not([aria-pressed="true"]),
      html[data-palette="ivory"] .chip-cat:not([aria-pressed="true"]) {
        border-color: rgba(0,0,0,0.12) !important;
        color: var(--muted) !important;
      }
      html[data-palette="paper"] .chip-cat:not([aria-pressed="true"]):hover,
      html[data-palette="ivory"] .chip-cat:not([aria-pressed="true"]):hover {
        border-color: rgba(0,0,0,0.30) !important;
        background: rgba(0,0,0,0.04) !important;
        color: var(--ink) !important;
      }
      html[data-palette="paper"] .chip-cat[aria-pressed="true"],
      html[data-palette="ivory"] .chip-cat[aria-pressed="true"] {
        background: var(--ink) !important;
        color: var(--bg) !important;
        border-color: var(--ink) !important;
      }
      /* Cobalt: chips inherit light-mode look */
      html[data-palette="cobalt"] .chip-cat:not([aria-pressed="true"]) {
        border-color: rgba(10,10,10,0.14) !important;
        color: var(--muted) !important;
        background: transparent !important;
      }
      html[data-palette="cobalt"] .chip-cat:not([aria-pressed="true"]):hover {
        border-color: rgba(25,71,209,0.35) !important;
        background: rgba(25,71,209,0.05) !important;
        color: rgb(var(--cyan)) !important;
      }
      html[data-palette="cobalt"] .chip-cat[aria-pressed="true"] {
        background: rgb(var(--cyan)) !important;
        color: #fff !important;
        border-color: rgb(var(--cyan)) !important;
      }

      /* Product card refresh (Cycle 3) — inline add-to-cart button (Cycle 11) */
      .product-card { padding-bottom: 24px; }
      .card-price-foot {
        margin-top: 20px;
        padding-top: 18px;
        border-top: 1px solid rgba(255,255,255,0.08);
      }
      /* Eyebrow (PRECIO) sits on top; price + button share one row so the pill
         is optically centered on the "A cotizar" text (no baseline drift). */
      .card-price-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 4px;
        min-width: 0;
      }
      .card-price-block { display: flex; flex-direction: column; min-width: 0; }
      .card-add-btn {
        flex-shrink: 0;
        padding: 10px 16px;
        font-size: 13px;
        letter-spacing: 0.01em;
        white-space: nowrap;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.5),
          0 4px 14px -4px rgba(0,0,0,0.25);
      }
      .card-add-btn:hover { transform: translateY(-1px); }
      .card-add-btn:active { transform: translateY(0); }
      @media (max-width: 768px) {
        .product-card { padding: 16px !important; padding-bottom: 18px !important; }
        .card-add-btn { padding: 9px 12px; font-size: 12px; }
      }
      @media (max-width: 360px) {
        .card-price-foot { gap: 8px; }
        .card-add-btn { padding: 8px 10px; }
      }
      /* Light palette */
      html[data-palette="paper"] .card-add-btn,
      html[data-palette="ivory"] .card-add-btn { background: var(--ink); color: var(--bg); }
      html[data-palette="paper"] .card-add-btn:hover,
      html[data-palette="ivory"] .card-add-btn:hover { background: #000; }
      /* Cobalt liquid glass */
      html[data-palette="cobalt"] .card-add-btn {
        background: rgba(25,71,209,0.92) !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,0.35) !important;
        box-shadow:
          inset 0 2px 2px rgba(255,255,255,0.35),
          0 6px 16px -4px rgba(25, 71, 209, 0.34) !important;
      }
      html[data-palette="cobalt"] .card-add-btn:hover {
        background: rgba(15,46,138,0.96) !important;
      }
      .cat-badge {
        display: inline-flex;
        align-items: center;
        font-size: 10px;
        padding: 4px 8px;
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 999px;
        letter-spacing: 0.16em;
        color: rgba(255,255,255,0.85);
        text-transform: uppercase;
        line-height: 1;
      }
      .card-micro {
        margin-top: 8px;
        font-size: 11px;
        color: rgba(255,255,255,0.5);
        letter-spacing: 0.02em;
      }
      .card-price-foot {
        margin-top: 20px;
        padding-top: 18px;
        border-top: 1px solid rgba(255,255,255,0.08);
      }
      .card-price-label {
        font-size: 10px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.40);
      }
      .card-vial-overlay {
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity 200ms var(--ease-cinema);
        background: rgba(255,255,255,0.02);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
      }
      .product-card:hover .card-vial-overlay { opacity: 1; }

      .card-add-pill {
        position: absolute;
        left: 50%;
        bottom: 18px;
        transform: translateX(-50%) translateY(8px);
        opacity: 0;
        pointer-events: none;
        white-space: nowrap;
        font-size: 13px;
        padding: 12px 22px;
        z-index: 5;
        transition: opacity 200ms var(--ease-cinema), transform 200ms var(--ease-cinema);
        box-shadow: 0 12px 28px -10px rgba(0,0,0,0.4);
      }
      .product-card:hover .card-add-pill,
      .product-card:focus-within .card-add-pill {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
      }
      @media (max-width: 768px) {
        .product-card { padding-bottom: 78px; }
        .card-add-pill {
          opacity: 1 !important;
          pointer-events: auto !important;
          transform: translateX(-50%) translateY(0) !important;
          font-size: 12px;
          padding: 10px 18px;
          box-shadow: 0 8px 20px -10px rgba(0,0,0,0.35);
        }
      }

      /* Light palette overrides for card refresh */
      html[data-palette="paper"] .cat-badge,
      html[data-palette="ivory"] .cat-badge {
        border-color: rgba(0,0,0,0.15);
        color: var(--ink);
      }
      html[data-palette="paper"] .card-micro,
      html[data-palette="ivory"] .card-micro { color: var(--muted); }
      html[data-palette="paper"] .card-price-foot,
      html[data-palette="ivory"] .card-price-foot { border-top-color: rgba(0,0,0,0.08); }
      html[data-palette="paper"] .card-price-label,
      html[data-palette="ivory"] .card-price-label { color: rgba(0,0,0,0.45); }
      html[data-palette="paper"] .card-vial-overlay,
      html[data-palette="ivory"] .card-vial-overlay { background: rgba(0,0,0,0.02); }
      html[data-palette="paper"] .card-add-pill,
      html[data-palette="ivory"] .card-add-pill {
        background: var(--ink);
        color: var(--bg);
      }
      html[data-palette="paper"] .card-add-pill:hover,
      html[data-palette="ivory"] .card-add-pill:hover { background: #000; }

      /* Stacks band (Cycle 4) — missing styles restored */
      .stack-card {
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 16px;
        padding: 28px;
        position: relative;
        overflow: hidden;
        color: inherit;
        transition: transform 500ms var(--ease-cinema), border-color 500ms var(--ease-cinema), box-shadow 500ms var(--ease-cinema);
      }
      .stack-card:hover {
        transform: translateY(-4px);
        border-color: rgba(127,170,255,0.28);
        box-shadow: 0 24px 60px -20px rgba(127,170,255,0.20);
      }
      .stack-pill {
        display: inline-flex;
        align-items: center;
        font-size: 11px;
        letter-spacing: 0.08em;
        padding: 5px 10px;
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 999px;
        color: rgba(255,255,255,0.85);
        line-height: 1;
      }
      .stack-foot {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        padding-top: 18px;
        border-top: 1px solid rgba(255,255,255,0.08);
      }
      .stack-link {
        font-size: 11px;
        letter-spacing: 0.18em;
        color: rgba(255,255,255,0.55);
        transition: color 200ms var(--ease-cinema);
      }
      .stack-card:hover .stack-link { color: rgba(255,255,255,0.95); }
      html[data-palette="paper"] .stack-card,
      html[data-palette="ivory"] .stack-card {
        background: rgba(0,0,0,0.025);
        border-color: rgba(0,0,0,0.08);
      }
      html[data-palette="paper"] .stack-card:hover,
      html[data-palette="ivory"] .stack-card:hover { border-color: rgba(var(--cyan), 0.45); }
      html[data-palette="paper"] .stack-pill,
      html[data-palette="ivory"] .stack-pill { border-color: rgba(0,0,0,0.15); color: var(--ink); }
      html[data-palette="paper"] .stack-foot,
      html[data-palette="ivory"] .stack-foot { border-top-color: rgba(0,0,0,0.08); }
      html[data-palette="paper"] .stack-link,
      html[data-palette="ivory"] .stack-link { color: var(--muted); }
      html[data-palette="paper"] .stack-card:hover .stack-link,
      html[data-palette="ivory"] .stack-card:hover .stack-link { color: var(--ink); }

      /* ============================================================
         PDP — premium product detail page (Cycle 5)
         ============================================================ */
      .pdp-main { padding-top: 120px; min-height: 100vh; position: relative; z-index: 5; }
      @media (min-width: 768px) { .pdp-main { padding-top: 152px; } }

      /* Sigue la tienda: resto del catálogo al pie del PDP */
      .pdp-more { padding: 56px 0 96px; position: relative; z-index: 5; }
      .pdp-more-divider {
        height: 1px; margin-bottom: 48px;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.12), transparent);
      }
      .pdp-more-head { margin-bottom: 4px; }
      /* El observer de reveal no alcanza a estas cards (se montan al navegar
         al PDP, no al cargar App) → forzar visibilidad para que no queden
         invisibles en opacity:0. */
      .pdp-more .reveal,
      .pdp-more .reveal-left,
      .pdp-more .reveal-right,
      .pdp-more .reveal-scale { opacity: 1 !important; transform: none !important; filter: none !important; }
      @media (max-width: 767px) { .pdp-more { padding: 36px 0 120px; } }
      .pdp-crumb {
        font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
        color: rgba(255,255,255,0.40);
        margin-bottom: 28px;
        display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
      }
      .pdp-crumb a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 200ms; }
      .pdp-crumb a:hover { color: #fff; }
      .pdp-crumb-sep { opacity: 0.4; }
      .pdp-crumb-current { color: rgba(255,255,255,0.85); }

      .pdp-gallery {
        position: relative; aspect-ratio: 4/3;
        background: rgba(255,255,255,0.025);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 28px; overflow: hidden;
        backdrop-filter: blur(20px) saturate(140%);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
      }
      .pdp-gallery::after {
        content: ''; position: absolute; inset: 0; pointer-events: none;
        background-image:
          linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
        background-size: 40px 40px; opacity: 0.45;
        mask-image: radial-gradient(circle at center, #000 30%, transparent 80%);
        -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 80%);
      }
      .pdp-gallery-slide {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        opacity: 0; transform: scale(0.97);
        transition: opacity 300ms var(--ease-cinema), transform 300ms var(--ease-cinema);
        z-index: 1;
      }
      .pdp-gallery-slide.on { opacity: 1; transform: scale(1); z-index: 2; }

      /* Photoreal product render slide (Retatrutide) */
      .pdp-photo-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .pdp-photo {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: center;
           object-position: center;
      }
      .pdp-orbit-ring {
        position: absolute; border-radius: 50%;
        border: 1px dashed rgba(127,170,255,0.18);
        animation: pdpOrbit 80s linear infinite;
      }
      .pdp-orbit-ring.r2 {
        animation-duration: 50s; animation-direction: reverse;
        border-style: solid; border-color: rgba(182,167,255,0.14);
      }
      @keyframes pdpOrbit { to { transform: rotate(360deg); } }
      .pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
      .pdp-thumb {
        aspect-ratio: 1/1; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
        background: rgba(255,255,255,0.02);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; padding: 0; overflow: hidden;
        transition: border-color 200ms var(--ease-cinema), background 200ms var(--ease-cinema);
      }
      .pdp-thumb:hover { border-color: rgba(127,170,255,0.30); background: rgba(255,255,255,0.04); }
      .pdp-thumb.on { border-color: rgba(127,170,255,0.55); background: rgba(127,170,255,0.06); }
      .pdp-thumb svg { width: 56%; height: 56%; color: rgba(255,255,255,0.7); }

      .pdp-tabs-sticky {
        position: sticky; top: 80px; z-index: 30;
        background: rgba(8,12,22,0.85);
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        border-bottom: 1px solid rgba(255,255,255,0.08);
        margin: 56px -8px 0; padding: 0 8px;
        display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
      }
      .pdp-tabs-sticky::-webkit-scrollbar { display: none; }
      .pdp-tab {
        flex-shrink: 0; background: transparent; border: 0;
        color: rgba(255,255,255,0.55); font-size: 13px; padding: 16px 14px;
        cursor: pointer; position: relative; font-family: inherit;
        transition: color 200ms var(--ease-cinema);
      }
      .pdp-tab:hover { color: rgba(255,255,255,0.85); }
      .pdp-tab.on { color: #fff; }
      .pdp-tab.on::after {
        content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px;
        height: 2px; background: rgb(var(--cyan)); box-shadow: 0 0 10px rgba(127,170,255,0.5);
      }
      .pdp-tab-content { padding-top: 36px; min-height: 320px; }
      .pdp-panel { display: none; }
      .pdp-panel.is-active { display: block; }
      .pdp-panel-title { display: none; }
      .pdp-tab-content p { color: rgba(255,255,255,0.75); font-size: 15px; line-height: 1.65; max-width: 65ch; }
      .pdp-tab-content p + p { margin-top: 14px; }
      .pdp-bullets { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; max-width: 65ch; }
      .pdp-bullet { display: flex; gap: 12px; font-size: 14px; color: rgba(255,255,255,0.78); }
      .pdp-bullet::before {
        content: ''; width: 6px; height: 6px; margin-top: 8px;
        border-radius: 50%; background: rgb(var(--cyan));
        box-shadow: 0 0 8px rgba(127,170,255,0.45); flex-shrink: 0;
      }
      .pdp-mech-grid { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 720px; }
      @media (min-width: 720px) { .pdp-mech-grid { grid-template-columns: 1fr 1fr; } }
      .pdp-mech {
        display: flex; gap: 14px; padding: 18px 20px;
        border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
        background: rgba(255,255,255,0.02);
      }
      .pdp-mech svg { width: 22px; height: 22px; color: rgb(var(--cyan)); flex-shrink: 0; }
      .pdp-mech-title { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 4px; }
      .pdp-mech-desc { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; }
      /* Cycle 9 — deep mechanism card wraps evidence badge + lead + grid + areas + note */
      .pdp-mech-wrap { max-width: 720px; }
      .pdp-mech-wrap .pdp-mech-grid { margin: 2px 0 16px; }
      .pdp-mech-wrap .pdp-know-areas { margin-top: 0; }
      .pdp-mech-wrap .pdp-know-note { margin-top: 4px; }

      .pdp-cites { display: flex; flex-direction: column; gap: 0; max-width: 720px; }
      .pdp-cite { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
      .pdp-cite:last-child { border-bottom: 0; }
      .pdp-cite-num { font-size: 11px; color: rgba(127,170,255,0.85); letter-spacing: 0.1em; min-width: 24px; }
      .pdp-cite-text { font-size: 13.5px; color: rgba(255,255,255,0.78); line-height: 1.55; flex: 1; }
      .pdp-cite-text em { color: rgba(255,255,255,0.55); font-style: italic; }
      .pdp-cite-doi {
        display: inline-flex; gap: 6px; margin-top: 6px; font-size: 11px;
        color: rgba(127,170,255,0.75); font-family: 'JetBrains Mono', ui-monospace, monospace;
      }
      .pdp-cite-doi:hover { color: rgba(127,170,255,1); }

      /* Cycle 8 — research knowledge base surfaced on Mechanism / Research tabs */
      .pdp-know { max-width: 720px; }
      .pdp-evd {
        display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 999px;
        font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
        letter-spacing: 0.12em; text-transform: uppercase;
      }
      .pdp-evd-clinical    { background: #1947D1; color: #fff; }
      .pdp-evd-mixed       { background: #E8EDFB; color: #1947D1; }
      .pdp-evd-preclinical { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.14); }
      .pdp-evd-reagent     { background: rgba(6,182,212,0.14); color: #67E8F9; border: 1px solid rgba(6,182,212,0.32); }
      .pdp-know-lead { font-size: 14.5px; color: rgba(255,255,255,0.82); line-height: 1.6; margin: 0 0 16px; }
      .pdp-know-areas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
      .pdp-know-chip {
        padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.1); font-size: 12px; color: rgba(255,255,255,0.72);
      }
      .pdp-know-studies { margin: 0 0 16px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
      .pdp-know-studies li { font-size: 13.5px; color: rgba(255,255,255,0.78); line-height: 1.5; }
      .pdp-know-note {
        font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5; margin: 0;
        padding: 12px 14px; border-left: 2px solid rgba(127,170,255,0.4);
        background: rgba(255,255,255,0.02); border-radius: 0 8px 8px 0;
      }

      .pdp-spec { width: 100%; max-width: 720px; border-collapse: separate; border-spacing: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; }
      .pdp-spec td { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 13px; vertical-align: top; }
      .pdp-spec td:first-child { color: rgba(255,255,255,0.4); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; width: 38%; padding-right: 24px; }
      .pdp-spec td:last-child { color: rgba(255,255,255,0.9); word-break: break-word; }

      .pdp-coa-card { max-width: 560px; padding: 24px 26px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; }
      .pdp-coa-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
      .pdp-coa-batch { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: #fff; letter-spacing: 0.06em; }
      .pdp-coa-row {
        display: flex; align-items: baseline; justify-content: space-between;
        padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.06);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
      }
      .pdp-coa-row:first-of-type { border-top: 0; padding-top: 0; }
      .pdp-coa-row span:first-child { font-size: 11px; color: rgba(255,255,255,0.55); letter-spacing: 0.04em; }
      .pdp-coa-row span:last-child { font-size: 13px; color: rgb(var(--cyan)); font-weight: 500; }
      .pdp-coa-dl {
        display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
        padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18);
        font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
        letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.85);
        background: transparent; cursor: pointer;
        transition: border-color 200ms var(--ease-cinema), color 200ms var(--ease-cinema);
      }
      .pdp-coa-dl:hover { border-color: rgba(127,170,255,0.55); color: #fff; }

      .pdp-steps { display: flex; flex-direction: column; gap: 12px; max-width: 660px; }
      .pdp-step { display: flex; gap: 16px; padding: 18px 20px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; }
      .pdp-step-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: rgb(var(--cyan)); min-width: 24px; letter-spacing: 0.1em; }
      .pdp-step-title { font-size: 14px; color: #fff; font-weight: 500; margin-bottom: 4px; }
      .pdp-step-desc { font-size: 13px; color: rgba(255,255,255,0.6); }
      .pdp-cold-note { margin-top: 18px; padding: 14px 18px; background: rgba(127,170,255,0.06); border: 1px solid rgba(127,170,255,0.18); border-radius: 12px; font-size: 12.5px; color: rgba(255,255,255,0.78); max-width: 660px; }

      .pdp-faq { max-width: 720px; }
      .pdp-faq-item { border-bottom: 1px solid rgba(255,255,255,0.08); }
      .pdp-faq-q {
        width: 100%; text-align: left; background: transparent; border: 0;
        padding: 18px 0; color: #fff; font-size: 15px; font-family: inherit; cursor: pointer;
        display: flex; align-items: center; justify-content: space-between; gap: 16px;
      }
      .pdp-faq-q:hover { color: rgb(var(--cyan)); }
      .pdp-faq-plus {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 18px; color: rgba(255,255,255,0.6);
        transition: transform 200ms var(--ease-cinema), color 200ms var(--ease-cinema);
      }
      .pdp-faq-item.on .pdp-faq-plus { transform: rotate(45deg); color: rgb(var(--cyan)); }
      .pdp-faq-a { max-height: 0; overflow: hidden; transition: max-height 280ms var(--ease-cinema); }
      .pdp-faq-item.on .pdp-faq-a { max-height: 360px; }
      .pdp-faq-a-inner { padding: 0 0 22px; font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.6; max-width: 60ch; }

      .pdp-right { position: relative; }
      .pdp-right-inner { position: sticky; top: 100px; }
      .pdp-eyebrow { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--cyan)); margin-bottom: 16px; opacity: 0.85; }
      .pdp-h1 { font-size: clamp(48px, 6vw, 76px); font-weight: 300; letter-spacing: -0.035em; line-height: 0.92; color: #fff; margin-bottom: 10px; }
      .pdp-tagline { font-size: 16px; font-style: italic; color: rgba(255,255,255,0.55); margin-bottom: 28px; }

      .pdp-price-card { padding: 24px 24px 22px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; margin-bottom: 18px; }
      .pdp-variants { display: flex; gap: 10px; margin-bottom: 20px; }
      .pdp-variant-pill {
        flex: 1; padding: 14px 16px; border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.10); background: transparent;
        color: rgba(255,255,255,0.65); cursor: pointer; text-align: left;
        font-family: inherit; transition: color 200ms var(--ease-cinema), background-color 200ms var(--ease-cinema), border-color 200ms var(--ease-cinema), transform 200ms var(--ease-cinema), box-shadow 200ms var(--ease-cinema), opacity 200ms var(--ease-cinema);
      }
      .pdp-variant-pill:hover { border-color: rgba(255,255,255,0.25); color: #fff; }
      .pdp-variant-pill.on { border-color: rgb(var(--cyan)); background: rgba(127,170,255,0.06); color: #fff; box-shadow: 0 0 0 1px rgba(127,170,255,0.25); }
      .pdp-variant-size { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-bottom: 4px; }
      .pdp-variant-price { font-family: 'Inter Tight', system-ui, sans-serif; font-size: 20px; letter-spacing: -0.02em; }
      .pdp-price-from { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.40); }
      .pdp-price-big { font-size: 56px; font-weight: 300; letter-spacing: -0.03em; line-height: 1; margin: 6px 0 4px; color: #fff; }
      .pdp-price-big sup { font-size: 22px; color: rgba(255,255,255,0.5); vertical-align: 28px; margin-right: 2px; }
      .pdp-price-permg { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: rgba(255,255,255,0.4); letter-spacing: 0.06em; }
      .pdp-price-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 2px; }
      .pdp-stock { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
      .pdp-buy-row { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
      .pdp-add-cart {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        padding: 16px 24px; border-radius: 999px; background: #fff; color: #04060c;
        font-size: 14px; font-weight: 500; border: 0; cursor: pointer; font-family: inherit;
        transition: background 200ms var(--ease-cinema);
      }
      .pdp-add-cart:hover { background: rgb(var(--cyan)); }
      .pdp-add-stack {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        padding: 14px 24px; border-radius: 999px; background: transparent;
        color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 500;
        border: 1px solid rgba(255,255,255,0.15); cursor: pointer; font-family: inherit;
        transition: color 200ms var(--ease-cinema), background-color 200ms var(--ease-cinema), border-color 200ms var(--ease-cinema), transform 200ms var(--ease-cinema), box-shadow 200ms var(--ease-cinema), opacity 200ms var(--ease-cinema);
      }
      .pdp-add-stack:hover { border-color: rgb(var(--cyan)); color: #fff; }

      .pdp-reassure {
        list-style: none; margin: 12px 0 0; padding: 0;
        display: flex; flex-wrap: wrap; gap: 8px 16px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
        color: rgba(255,255,255,0.5);
      }
      .pdp-reassure li { display: inline-flex; align-items: center; gap: 6px; }
      .pdp-reassure svg { width: 13px; height: 13px; color: rgb(var(--cyan)); flex-shrink: 0; }

      .pdp-trust-row {
        display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 14px 0;
        font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
        color: rgba(255,255,255,0.6); letter-spacing: 0.04em;
      }
      .pdp-trust-row svg { width: 14px; height: 14px; color: rgb(var(--cyan)); }
      .pdp-trust-row > span { display: inline-flex; align-items: center; gap: 6px; }

      .pdp-stack-card-link {
        display: flex; align-items: center; gap: 14px; padding: 16px 18px;
        background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08);
        border-radius: 14px; text-decoration: none; color: inherit;
        margin: 18px 0; transition: color 200ms var(--ease-cinema), background-color 200ms var(--ease-cinema), border-color 200ms var(--ease-cinema), transform 200ms var(--ease-cinema), box-shadow 200ms var(--ease-cinema), opacity 200ms var(--ease-cinema);
      }
      .pdp-stack-card-link:hover { border-color: rgba(127,170,255,0.30); background: rgba(127,170,255,0.04); }
      .pdp-stack-card-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.40); margin-bottom: 4px; }
      .pdp-stack-card-name { font-size: 15px; color: #fff; font-weight: 500; flex: 1; }
      .pdp-stack-card-arrow { color: rgba(255,255,255,0.5); }

      .pdp-ship-info { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: rgba(255,255,255,0.45); letter-spacing: 0.04em; text-align: center; }
      .pdp-not-found { padding: 200px 24px; text-align: center; color: rgba(255,255,255,0.7); }
      .pdp-not-found a { display: inline-block; margin-top: 16px; color: rgb(var(--cyan)); }

      /* Light-palette PDP overrides */
      html[data-palette="paper"] .pdp-crumb a,
      html[data-palette="ivory"] .pdp-crumb a { color: var(--muted); }
      html[data-palette="paper"] .pdp-crumb a:hover,
      html[data-palette="ivory"] .pdp-crumb a:hover { color: var(--ink); }
      html[data-palette="paper"] .pdp-crumb-current,
      html[data-palette="ivory"] .pdp-crumb-current { color: var(--ink); }
      html[data-palette="paper"] .pdp-gallery,
      html[data-palette="ivory"] .pdp-gallery,
      html[data-palette="paper"] .pdp-thumb,
      html[data-palette="ivory"] .pdp-thumb,
      html[data-palette="paper"] .pdp-mech,
      html[data-palette="ivory"] .pdp-mech,
      html[data-palette="paper"] .pdp-coa-card,
      html[data-palette="ivory"] .pdp-coa-card,
      html[data-palette="paper"] .pdp-step,
      html[data-palette="ivory"] .pdp-step,
      html[data-palette="paper"] .pdp-price-card,
      html[data-palette="ivory"] .pdp-price-card,
      html[data-palette="paper"] .pdp-stack-card-link,
      html[data-palette="ivory"] .pdp-stack-card-link {
        background: rgba(0,0,0,0.025);
        border-color: rgba(0,0,0,0.08);
      }
      html[data-palette="paper"] .pdp-tab-content p,
      html[data-palette="ivory"] .pdp-tab-content p,
      html[data-palette="paper"] .pdp-bullet,
      html[data-palette="ivory"] .pdp-bullet,
      html[data-palette="paper"] .pdp-mech-desc,
      html[data-palette="ivory"] .pdp-mech-desc,
      html[data-palette="paper"] .pdp-cite-text,
      html[data-palette="ivory"] .pdp-cite-text,
      html[data-palette="paper"] .pdp-step-desc,
      html[data-palette="ivory"] .pdp-step-desc,
      html[data-palette="paper"] .pdp-faq-a-inner,
      html[data-palette="ivory"] .pdp-faq-a-inner,
      html[data-palette="paper"] .pdp-know-lead,
      html[data-palette="ivory"] .pdp-know-lead,
      html[data-palette="paper"] .pdp-know-studies li,
      html[data-palette="ivory"] .pdp-know-studies li,
      html[data-palette="paper"] .pdp-know-note,
      html[data-palette="ivory"] .pdp-know-note { color: var(--muted); }
      html[data-palette="paper"] .pdp-know-chip,
      html[data-palette="ivory"] .pdp-know-chip { color: var(--ink); background: rgba(0,0,0,0.03); border-color: var(--line); }
      html[data-palette="paper"] .pdp-evd-preclinical,
      html[data-palette="ivory"] .pdp-evd-preclinical { background: #F1F2F4; color: #6B6B6B; border-color: #E5E7EB; }
      html[data-palette="paper"] .pdp-evd-reagent,
      html[data-palette="ivory"] .pdp-evd-reagent { background: #E6FAFD; color: #0E7490; border-color: #A5E9F2; }
      html[data-palette="paper"] .pdp-h1,
      html[data-palette="ivory"] .pdp-h1,
      html[data-palette="paper"] .pdp-mech-title,
      html[data-palette="ivory"] .pdp-mech-title,
      html[data-palette="paper"] .pdp-step-title,
      html[data-palette="ivory"] .pdp-step-title,
      html[data-palette="paper"] .pdp-stack-card-name,
      html[data-palette="ivory"] .pdp-stack-card-name,
      html[data-palette="paper"] .pdp-coa-batch,
      html[data-palette="ivory"] .pdp-coa-batch,
      html[data-palette="paper"] .pdp-price-big,
      html[data-palette="ivory"] .pdp-price-big,
      html[data-palette="paper"] .pdp-faq-q,
      html[data-palette="ivory"] .pdp-faq-q { color: var(--ink); }
      html[data-palette="paper"] .pdp-tabs-sticky,
      html[data-palette="ivory"] .pdp-tabs-sticky {
        background: rgba(255,255,255,0.85);
        border-bottom-color: rgba(0,0,0,0.08);
      }
      html[data-palette="paper"] .pdp-tab,
      html[data-palette="ivory"] .pdp-tab { color: var(--muted); }
      html[data-palette="paper"] .pdp-tab.on,
      html[data-palette="ivory"] .pdp-tab.on { color: var(--ink); }
      html[data-palette="paper"] .pdp-add-cart,
      html[data-palette="ivory"] .pdp-add-cart { background: var(--ink); color: var(--bg); }
      html[data-palette="paper"] .pdp-add-stack,
      html[data-palette="ivory"] .pdp-add-stack { color: var(--ink); border-color: rgba(0,0,0,0.15); }
      html[data-palette="paper"] .pdp-spec td:first-child,
      html[data-palette="ivory"] .pdp-spec td:first-child { color: var(--muted); }
      html[data-palette="paper"] .pdp-spec td:last-child,
      html[data-palette="ivory"] .pdp-spec td:last-child { color: var(--ink); }
      html[data-palette="paper"] .pdp-spec td,
      html[data-palette="ivory"] .pdp-spec td { border-bottom-color: rgba(0,0,0,0.08); }

      /* ============================================================
         CMD palette + drawers (Cycle 6) — hide legacy shop-* UI
         ============================================================ */
      .shop-modal-back, .shop-drawer-back, .shop-drawer { display: none !important; }

      /* Command palette */
      .cmd-back {
        position: fixed; inset: 0; background: rgba(0,0,0,0.65);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        z-index: 200;
        display: flex; align-items: flex-start; justify-content: center;
        padding: 100px 20px 20px;
        opacity: 0; pointer-events: none;
        transition: opacity 200ms var(--ease-cinema);
      }
      .cmd-back.on { opacity: 1; pointer-events: auto; }
      .cmd-palette {
        width: 100%; max-width: 720px; max-height: 70vh;
        background: rgba(8,12,22,0.85);
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 18px;
        backdrop-filter: blur(28px) saturate(160%);
        -webkit-backdrop-filter: blur(28px) saturate(160%);
        display: flex; flex-direction: column;
        transform: translateY(-8px); opacity: 0;
        transition: opacity 200ms var(--ease-cinema), transform 200ms var(--ease-cinema);
        box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
      }
      .cmd-back.on .cmd-palette { opacity: 1; transform: translateY(0); }
      .cmd-input-row {
        display: flex; align-items: center; gap: 12px;
        padding: 20px 24px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
      }
      .cmd-input {
        flex: 1; background: transparent; border: 0; outline: none;
        color: #fff;
        font-family: 'Inter Tight', system-ui, sans-serif;
        font-size: 16px; letter-spacing: -0.01em;
      }
      .cmd-input::-moz-placeholder {
        color: rgba(255,255,255,0.45);
        font-family: 'Inter Tight', system-ui, sans-serif;
        font-size: 16px; letter-spacing: -0.01em; text-transform: none;
        opacity: 1;
      }
      .cmd-input::placeholder {
        color: rgba(255,255,255,0.45);
        font-family: 'Inter Tight', system-ui, sans-serif;
        font-size: 16px; letter-spacing: -0.01em; text-transform: none;
        opacity: 1;
      }
      .cmd-kbd {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px; padding: 4px 8px;
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 6px; color: rgba(255,255,255,0.55);
        letter-spacing: 0.1em;
      }
      .cmd-results {
        flex: 1; overflow-y: auto; padding: 8px;
      }
      .cmd-group-head {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase;
        color: rgba(255,255,255,0.40);
        padding: 14px 14px 6px;
      }
      .cmd-result {
        display: flex; align-items: center; gap: 12px;
        padding: 11px 14px; border-radius: 12px;
        cursor: pointer; text-decoration: none; color: inherit;
        transition: background 150ms var(--ease-cinema);
      }
      .cmd-result.on, .cmd-result:hover { background: rgba(127,170,255,0.08); }
      .cmd-result-pill {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9px; letter-spacing: 0.16em;
        padding: 4px 8px;
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 999px; color: rgba(255,255,255,0.70);
        flex-shrink: 0; text-transform: uppercase;
      }
      .cmd-result-name { flex: 1; color: #fff; font-size: 14px; }
      .cmd-result-dose {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px; color: rgba(255,255,255,0.50);
      }
      .cmd-result-chev { color: rgba(255,255,255,0.40); font-size: 16px; line-height: 1; }
      .cmd-empty {
        padding: 48px 24px; text-align: center;
        color: rgba(255,255,255,0.60); font-size: 14px;
      }
      .cmd-empty a {
        color: rgb(var(--cyan)); text-decoration: none;
      }
      .cmd-empty a:hover { text-decoration: underline; }

      /* Drawers (cart + wishlist) */
      .pdrawer-back {
        position: fixed; inset: 0; background: rgba(0,0,0,0.55);
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        z-index: 200;
        opacity: 0; pointer-events: none;
        transition: opacity 200ms var(--ease-cinema);
      }
      .pdrawer-back.on { opacity: 1; pointer-events: auto; }
      .pdrawer {
        position: fixed; top: 0; right: 0; bottom: 0;
        width: 100%; max-width: 420px;
        background: rgba(8,12,22,0.96);
        backdrop-filter: blur(28px) saturate(160%);
        -webkit-backdrop-filter: blur(28px) saturate(160%);
        border-left: 1px solid rgba(255,255,255,0.08);
        z-index: 210;
        transform: translateX(100%);
        transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
        display: flex; flex-direction: column;
        box-shadow: -30px 0 80px -20px rgba(0,0,0,0.6);
      }
      .pdrawer.on { transform: translateX(0); }
      .pdrawer-head {
        padding: 22px 24px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        display: flex; align-items: center; justify-content: space-between;
      }
      .pdrawer-title { display: flex; align-items: baseline; gap: 10px; }
      .pdrawer-title h3 {
        font-family: 'Inter Tight', system-ui, sans-serif;
        font-size: 20px; font-weight: 400;
        letter-spacing: -0.02em; color: #fff;
      }
      .pdrawer-count {
        font-size: 11px; color: rgba(255,255,255,0.50);
        letter-spacing: 0.08em;
      }
      .pdrawer-close {
        width: 32px; height: 32px; border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.15);
        background: transparent; color: rgba(255,255,255,0.70);
        cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
        transition: color 150ms var(--ease-cinema), background-color 150ms var(--ease-cinema), border-color 150ms var(--ease-cinema), transform 150ms var(--ease-cinema), box-shadow 150ms var(--ease-cinema), opacity 150ms var(--ease-cinema);
      }
      .pdrawer-close:hover { border-color: rgb(var(--cyan)); color: #fff; }
      .pdrawer-body { flex: 1; overflow-y: auto; padding: 16px 24px; }
      .pdrawer-empty {
        padding: 60px 0;
        display: flex; flex-direction: column; align-items: center; gap: 20px;
        text-align: center; color: rgba(255,255,255,0.55); font-size: 14px;
      }
      .pdrawer-empty svg { color: rgba(127,170,255,0.45); }
      .pdrawer-line {
        display: flex; gap: 14px; padding: 14px 0;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        align-items: flex-start;
      }
      .pdrawer-line:last-child { border-bottom: 0; }
      .pdrawer-line-img {
        width: 50px; height: 70px;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 8px;
        flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        overflow: hidden;
        background: rgba(255,255,255,0.02);
      }
      .pdrawer-line-meta { flex: 1; min-width: 0; }
      .pdrawer-line-name { font-size: 14px; color: #fff; font-weight: 500; }
      .pdrawer-line-cat {
        font-size: 10px; color: rgba(255,255,255,0.50);
        letter-spacing: 0.14em; text-transform: uppercase;
        margin-top: 2px;
      }
      .pdrawer-line-dose {
        font-size: 11px; color: rgba(255,255,255,0.55);
        letter-spacing: 0.04em;
        margin-top: 2px;
      }
      .pdrawer-line-actions {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px; margin-top: 10px;
      }
      .pdrawer-line-price {
        font-family: 'Inter Tight', system-ui, sans-serif;
        font-size: 16px; font-weight: 500; color: #fff;
      }
      .pdrawer-line-mini {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
        color: rgb(var(--cyan));
        background: transparent;
        border: 1px solid rgba(127,170,255,0.35);
        border-radius: 999px; padding: 6px 10px;
        cursor: pointer; transition: color 150ms var(--ease-cinema), background-color 150ms var(--ease-cinema), border-color 150ms var(--ease-cinema), transform 150ms var(--ease-cinema), box-shadow 150ms var(--ease-cinema), opacity 150ms var(--ease-cinema);
      }
      .pdrawer-line-mini:hover {
        background: rgba(127,170,255,0.10); color: #fff;
      }
      .pdrawer-line-remove {
        font-size: 20px; color: rgba(255,255,255,0.4);
        background: transparent; border: 0; cursor: pointer;
        padding: 0 4px; line-height: 1;
        align-self: flex-start;
      }
      .pdrawer-line-remove:hover { color: #fff; }
      .pdrawer-qty {
        display: inline-flex; align-items: center;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 999px;
      }
      .pdrawer-qty button {
        width: 28px; height: 26px;
        background: transparent; border: 0;
        color: rgba(255,255,255,0.70);
        cursor: pointer;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 13px;
      }
      .pdrawer-qty button:hover { color: #fff; }
      .pdrawer-qty span {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px; color: #fff;
        min-width: 22px; text-align: center;
      }
      .pdrawer-stack-suggest {
        margin: 18px 0 0;
        padding: 16px 18px;
        border: 1px solid rgba(127,170,255,0.25);
        background: rgba(127,170,255,0.05);
        border-radius: 14px;
      }
      .pdrawer-stack-label {
        font-size: 10px; letter-spacing: 0.18em;
        text-transform: uppercase; color: rgb(var(--cyan));
        margin-bottom: 6px;
      }
      .pdrawer-stack-name { font-size: 14px; color: #fff; margin-bottom: 4px; font-weight: 500; }
      .pdrawer-stack-meta { font-size: 12px; color: rgba(255,255,255,0.55); }
      .pdrawer-stack-cta {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px; letter-spacing: 0.14em;
        text-transform: uppercase; color: rgba(255,255,255,0.85);
        cursor: pointer; background: transparent;
        border: 0; padding: 0; margin-top: 10px;
        text-align: left; display: block;
      }
      .pdrawer-stack-cta:hover { color: rgb(var(--cyan)); }
      .pdrawer-foot {
        padding: 18px 24px 22px;
        border-top: 1px solid rgba(255,255,255,0.08);
      }
      .pdrawer-foot-row {
        display: flex; justify-content: space-between; align-items: baseline;
        margin-bottom: 6px;
      }
      .pdrawer-subtotal-label {
        font-size: 11px; text-transform: uppercase;
        letter-spacing: 0.14em; color: rgba(255,255,255,0.50);
      }
      .pdrawer-subtotal {
        font-family: 'Inter Tight', system-ui, sans-serif;
        font-size: 28px; font-weight: 300;
        letter-spacing: -0.02em; color: #fff;
      }
      .pdrawer-meta {
        font-size: 10px; letter-spacing: 0.08em;
        color: rgba(255,255,255,0.40);
        margin-bottom: 16px;
      }
      .pdrawer-checkout {
        display: block; width: 100%;
        padding: 16px 24px; border-radius: 999px;
        background: #fff; color: #04060c;
        font-size: 13px; font-weight: 500; border: 0;
        cursor: pointer; text-align: center;
        font-family: inherit;
        transition: background 200ms var(--ease-cinema);
      }
      .pdrawer-checkout:hover { background: rgb(var(--cyan)); }
      .pdrawer-share {
        display: block; margin-top: 10px;
        padding: 12px 24px; border-radius: 999px;
        background: transparent;
        border: 1px solid rgba(255,255,255,0.15);
        color: rgba(255,255,255,0.85);
        font-size: 12px; cursor: pointer; text-align: center;
        font-family: inherit; text-decoration: none;
        transition: color 200ms var(--ease-cinema), background-color 200ms var(--ease-cinema), border-color 200ms var(--ease-cinema), transform 200ms var(--ease-cinema), box-shadow 200ms var(--ease-cinema), opacity 200ms var(--ease-cinema);
      }
      .pdrawer-share:hover { border-color: rgb(var(--cyan)); color: #fff; }

      /* Light palette overrides — Cycle 6 */
      html[data-palette="paper"] .cmd-palette,
      html[data-palette="ivory"] .cmd-palette {
        background: rgba(255,255,255,0.85);
        border-color: rgba(0,0,0,0.10);
      }
      html[data-palette="paper"] .cmd-input,
      html[data-palette="ivory"] .cmd-input { color: var(--ink); }
      html[data-palette="paper"] .cmd-input::-moz-placeholder, html[data-palette="ivory"] .cmd-input::-moz-placeholder { color: var(--muted); }
      html[data-palette="paper"] .cmd-input::placeholder,
      html[data-palette="ivory"] .cmd-input::placeholder { color: var(--muted); }
      html[data-palette="paper"] .cmd-kbd,
      html[data-palette="ivory"] .cmd-kbd {
        color: var(--muted); border-color: rgba(0,0,0,0.15);
      }
      html[data-palette="paper"] .cmd-result-name,
      html[data-palette="ivory"] .cmd-result-name { color: var(--ink); }
      html[data-palette="paper"] .cmd-result-pill,
      html[data-palette="ivory"] .cmd-result-pill {
        color: var(--ink); border-color: rgba(0,0,0,0.15);
      }
      html[data-palette="paper"] .cmd-group-head,
      html[data-palette="ivory"] .cmd-group-head { color: var(--muted); }

      html[data-palette="paper"] .pdrawer,
      html[data-palette="ivory"] .pdrawer {
        background: rgba(255,255,255,0.96);
        border-left-color: rgba(0,0,0,0.08);
      }
      html[data-palette="paper"] .pdrawer-title h3,
      html[data-palette="ivory"] .pdrawer-title h3,
      html[data-palette="paper"] .pdrawer-line-name,
      html[data-palette="ivory"] .pdrawer-line-name,
      html[data-palette="paper"] .pdrawer-line-price,
      html[data-palette="ivory"] .pdrawer-line-price,
      html[data-palette="paper"] .pdrawer-subtotal,
      html[data-palette="ivory"] .pdrawer-subtotal,
      html[data-palette="paper"] .pdrawer-stack-name,
      html[data-palette="ivory"] .pdrawer-stack-name { color: var(--ink); }
      html[data-palette="paper"] .pdrawer-count,
      html[data-palette="ivory"] .pdrawer-count,
      html[data-palette="paper"] .pdrawer-line-cat,
      html[data-palette="ivory"] .pdrawer-line-cat,
      html[data-palette="paper"] .pdrawer-line-dose,
      html[data-palette="ivory"] .pdrawer-line-dose,
      html[data-palette="paper"] .pdrawer-subtotal-label,
      html[data-palette="ivory"] .pdrawer-subtotal-label,
      html[data-palette="paper"] .pdrawer-meta,
      html[data-palette="ivory"] .pdrawer-meta,
      html[data-palette="paper"] .pdrawer-empty,
      html[data-palette="ivory"] .pdrawer-empty,
      html[data-palette="paper"] .pdrawer-stack-meta,
      html[data-palette="ivory"] .pdrawer-stack-meta { color: var(--muted); }
      html[data-palette="paper"] .pdrawer-close,
      html[data-palette="ivory"] .pdrawer-close {
        color: var(--ink); border-color: rgba(0,0,0,0.15);
      }
      html[data-palette="paper"] .pdrawer-checkout,
      html[data-palette="ivory"] .pdrawer-checkout {
        background: var(--ink); color: var(--bg);
      }
      html[data-palette="paper"] .pdrawer-share,
      html[data-palette="ivory"] .pdrawer-share {
        color: var(--ink); border-color: rgba(0,0,0,0.15);
      }

      /* ============================================================
         MOBILE PASS (Cycle 7)
         ============================================================ */
      * { -webkit-tap-highlight-color: transparent; }

      /* ============================================================
         GLOBAL CENTERING (Cycle 12) — tighter max-width, balanced pads
         ============================================================ */
      div[class*="max-w-[1320px]"] { max-width: 1240px !important; }
      @media (min-width: 1280px) {
        .px-5.md\:px-8 { padding-left: 40px !important; padding-right: 40px !important; }
      }
      .hero-grid { align-items: center; }
      section .reveal.eyebrow { display: inline-block; }
      @media (hover: none) {
        .product-card:hover .card-vial-overlay { opacity: 0 !important; }
        .stack-card:hover { transform: none !important; box-shadow: none !important; }
        .shop-card:hover, .article:hover, .cat:hover { transform: none !important; }
      }

      /* Hamburger button */
      .nav-burger {
        display: none;
        width: 36px; height: 36px; border-radius: 50%;
        align-items: center; justify-content: center;
        border: 1px solid rgba(255,255,255,0.10);
        background: transparent; color: rgba(255,255,255,0.85);
        cursor: pointer;
      }
      @media (max-width: 1023px) { .nav-burger { display: inline-flex; } }

      /* Mobile nav drawer */
      .mnav-back {
        position: fixed; inset: 0; background: rgba(0,0,0,0.55);
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        z-index: 220; opacity: 0; pointer-events: none;
        transition: opacity 200ms var(--ease-cinema);
      }
      .mnav-back.on { opacity: 1; pointer-events: auto; }
      .mnav {
        position: fixed; top: 0; right: 0; bottom: 0;
        width: 100%; max-width: 360px;
        background: rgba(8,12,22,0.96);
        backdrop-filter: blur(28px) saturate(160%);
        -webkit-backdrop-filter: blur(28px) saturate(160%);
        border-left: 1px solid rgba(255,255,255,0.08);
        z-index: 230; transform: translateX(100%);
        transition: transform 250ms cubic-bezier(0.22,1,0.36,1);
        display: flex; flex-direction: column;
        box-shadow: -30px 0 80px -20px rgba(0,0,0,0.6);
      }
      .mnav.on { transform: translateX(0); }
      .mnav-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,0.08);
      }
      .mnav-body { flex: 1; overflow-y: auto; padding: 16px 22px; }
      .mnav-search {
        width: 100%; display: flex; align-items: center; gap: 10px;
        padding: 12px 14px; border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.03);
        color: rgba(255,255,255,0.85);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
        cursor: pointer; margin-bottom: 22px;
      }
      .mnav-section {
        margin-top: 22px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
        color: rgba(255,255,255,0.40);
        margin-bottom: 10px;
      }
      .mnav-cat-row {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
        background: transparent; border-left: 0; border-right: 0; border-top: 0;
        color: rgba(255,255,255,0.85); font-size: 13px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        letter-spacing: 0.14em; cursor: pointer; width: 100%; text-align: left;
        text-transform: uppercase;
      }
      .mnav-cat-row .chev { transition: transform 200ms var(--ease-cinema); color: rgba(255,255,255,0.5); }
      .mnav-cat-row.on .chev { transform: rotate(90deg); color: rgb(var(--cyan)); }
      .mnav-sublist {
        max-height: 0; overflow: hidden;
        transition: max-height 260ms var(--ease-cinema);
      }
      .mnav-cat-row.on + .mnav-sublist { max-height: 280px; }
      .mnav-sublist a {
        display: block; padding: 8px 0;
        font-size: 14px; color: rgba(255,255,255,0.70);
        text-decoration: none;
      }
      .mnav-sublist a:hover { color: #fff; }
      .mnav-foot {
        padding: 16px 22px 22px;
        border-top: 1px solid rgba(255,255,255,0.08);
        display: flex; flex-direction: column; gap: 10px;
      }
      .mnav-cta {
        display: block; padding: 14px 18px;
        background: #fff; color: #04060c;
        border-radius: 999px; text-align: center;
        font-size: 13px; font-weight: 500; text-decoration: none;
      }

      /* Hero mobile */
      @media (max-width: 1023px) {
        .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        .hero-visual { height: 420px !important; max-width: 100% !important; margin-top: 8px; }
        .hero-actions { width: 100%; }
        .hero-actions > a { width: 100% !important; min-width: 0 !important; }
      }
      @media (max-width: 768px) {
        .hero h1, .display.text-\[14vw\] {
          font-size: clamp(48px, 12vw, 88px) !important;
          line-height: 0.95 !important;
        }
        .display.text-5xl,
        .display.text-4xl { font-size: clamp(32px, 8vw, 56px) !important; line-height: 1 !important; }
        .display.text-7xl { font-size: clamp(36px, 9vw, 64px) !important; line-height: 1 !important; }
        .display.text-6xl { font-size: clamp(34px, 8.5vw, 60px) !important; line-height: 1 !important; }
      }

      /* Catalog cards mobile */
      @media (max-width: 768px) {
        .grid.sm\:grid-cols-2.lg\:grid-cols-3 { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
        .product-card { padding: 16px !important; padding-bottom: 78px !important; }
        .product-card h3 { font-size: 18px !important; }
        .card-add-pill {
          left: 12px !important; right: 12px !important;
          transform: translateY(0) !important;
          width: auto;
          background: rgba(255,255,255,0.08) !important;
          color: #fff !important;
          border: 1px solid rgba(255,255,255,0.20);
          font-size: 12px !important; padding: 12px 14px !important;
        }
        html[data-palette="paper"] .card-add-pill,
        html[data-palette="ivory"] .card-add-pill {
          background: rgba(0,0,0,0.08) !important;
          color: var(--ink) !important;
          border-color: rgba(0,0,0,0.15);
        }
      }
      @media (max-width: 360px) {
        .grid.sm\:grid-cols-2.lg\:grid-cols-3 { grid-template-columns: 1fr !important; }
      }

      /* PDP mobile */
      @media (max-width: 1023px) {
        .pdp-right-inner { position: static !important; }
        .pdp-tabs-sticky {
          margin: 32px -12px 0 !important;
          padding: 0 12px !important;
          scroll-snap-type: x mandatory;
          touch-action: pan-x;
        }
        .pdp-tab { scroll-snap-align: start; padding: 14px 12px !important; font-size: 12.5px !important; }
        .pdp-gallery, .pdp-thumbs { touch-action: pan-x pan-y; }
      }
      @media (max-width: 768px) {
        .pdp-h1 { font-size: clamp(40px, 11vw, 64px) !important; }
        .pdp-price-big { font-size: 44px !important; }
      }
      /* PDP sticky bottom bar */
      .pdp-sticky {
        position: fixed; bottom: 0; left: 0; right: 0;
        z-index: 90; display: none;
        padding: 10px 14px;
        background: rgba(8,12,22,0.92);
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        border-top: 1px solid rgba(255,255,255,0.10);
        align-items: center; gap: 10px;
        transform: translateY(110%);
        transition: transform 260ms var(--ease-cinema);
      }
      .pdp-sticky.on { transform: translateY(0); }
      @media (max-width: 1023px) { .pdp-sticky { display: flex; } body.pdp-active { padding-bottom: 80px; } }
      .pdp-sticky-thumb {
        width: 38px; height: 52px; flex-shrink: 0;
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 6px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,0.02);
      }
      .pdp-sticky-meta { flex: 1; min-width: 0; }
      .pdp-sticky-name {
        font-size: 13px; color: #fff; font-weight: 500;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .pdp-sticky-price {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px; color: rgba(255,255,255,0.65);
      }
      .pdp-sticky-cta {
        padding: 12px 18px; border-radius: 999px;
        background: #fff; color: #04060c;
        font-size: 13px; font-weight: 500; border: 0;
        cursor: pointer; flex-shrink: 0;
      }
      html[data-palette="paper"] .pdp-sticky,
      html[data-palette="ivory"] .pdp-sticky {
        background: rgba(255,255,255,0.94);
        border-top-color: rgba(0,0,0,0.10);
      }
      html[data-palette="paper"] .pdp-sticky-name,
      html[data-palette="ivory"] .pdp-sticky-name { color: var(--ink); }
      html[data-palette="paper"] .pdp-sticky-price,
      html[data-palette="ivory"] .pdp-sticky-price { color: var(--muted); }
      html[data-palette="paper"] .pdp-sticky-cta,
      html[data-palette="ivory"] .pdp-sticky-cta { background: var(--ink); color: var(--bg); }

      /* Stacks mobile */
      @media (max-width: 768px) {
        section .grid.md\:grid-cols-3 { grid-template-columns: 1fr !important; gap: 14px !important; }
        .stack-card { padding: 24px !important; }
      }

      /* Search palette mobile — full-screen */
      @media (max-width: 768px) {
        .cmd-back { padding: 0 !important; align-items: stretch !important; }
        .cmd-palette {
          width: 100% !important; max-width: 100% !important; max-height: 100% !important;
          height: 100vh !important; border-radius: 0 !important; border: 0 !important;
        }
        .cmd-input-row {
          position: sticky; top: 0; z-index: 5;
          background: rgba(8,12,22,0.92);
          backdrop-filter: blur(20px);
          padding: 18px 18px !important;
        }
        html[data-palette="paper"] .cmd-input-row,
        html[data-palette="ivory"] .cmd-input-row { background: rgba(255,255,255,0.92); }
      }

      /* Drawers mobile — swipe affordance + touch */
      .pdrawer { touch-action: pan-y; }
      @media (max-width: 480px) {
        .pdrawer { max-width: 100% !important; }
        .pdrawer-head { padding: 18px 20px !important; }
        .pdrawer-body { padding: 14px 20px !important; }
      }
      .pdrawer::before {
        content: ''; position: absolute; top: 8px; left: 50%;
        transform: translateX(-50%);
        width: 36px; height: 4px; border-radius: 2px;
        background: rgba(255,255,255,0.18);
        display: none;
      }
      @media (max-width: 480px) { .pdrawer::before { display: block; } }

      /* Gallery swipe (PDP) */
      .pdp-gallery, .pdp-thumbs { touch-action: pan-x pan-y; }

      /* Truncation helper */
      .truncate-1 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      /* ============================================================
         CYCLE 8 — Home sections + footer enrichment
         ============================================================ */
      /* Science deep mini-suite */
      .sd-grid {
        display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 56px;
      }
      @media (min-width: 900px) { .sd-grid { grid-template-columns: 1fr 1fr 1fr; } }
      .sd-card {
        background: rgba(255,255,255,0.025);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 18px;
        padding: 24px;
        position: relative; overflow: hidden;
      }
      .sd-label {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
        color: rgba(255,255,255,0.40);
        margin-bottom: 16px;
      }
      .sd-title {
        font-family: 'Inter Tight', system-ui, sans-serif;
        font-size: 18px; font-weight: 500;
        letter-spacing: -0.015em; color: #fff;
        margin-bottom: 14px;
      }
      .sd-visual {
        aspect-ratio: 4/3;
        margin: 4px 0 12px;
        border-radius: 12px;
        background: rgba(127,170,255,0.04);
        border: 1px solid rgba(255,255,255,0.06);
        overflow: hidden; position: relative;
      }
      .sd-coa-rows { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 16px; }
      .sd-coa-row {
        display: flex; justify-content: space-between; align-items: baseline;
        padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.06);
        font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
      }
      .sd-coa-row:first-child { border-top: 0; padding-top: 0; }
      .sd-coa-row span:first-child { color: rgba(255,255,255,0.5); letter-spacing: 0.04em; }
      .sd-coa-row span:last-child { color: rgb(var(--cyan)); font-weight: 500; }
      .sd-btn {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 10px 16px; border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.18);
        background: transparent;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
        color: rgba(255,255,255,0.85);
        cursor: pointer;
        transition: border-color 200ms var(--ease-cinema), color 200ms var(--ease-cinema);
        text-decoration: none;
      }
      .sd-btn:hover { border-color: rgba(127,170,255,0.55); color: #fff; }

      /* Citations marquee */
      .cites-strip {
        border-top: 1px solid rgba(255,255,255,0.08);
        border-bottom: 1px solid rgba(255,255,255,0.08);
        display: flex; align-items: center; gap: 20px;
        padding: 14px 0; overflow: hidden;
      }
      .cites-label {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
        color: rgba(127,170,255,0.85);
        padding-left: 24px; flex-shrink: 0;
        white-space: nowrap;
      }
      @media (min-width: 768px) { .cites-label { padding-left: 40px; } }
      .cites-track {
        flex: 1; overflow: hidden; position: relative;
        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
      }
      .cites-track-inner {
        display: inline-flex; gap: 56px;
        animation: citesScroll 60s linear infinite;
        white-space: nowrap;
      }
      .cites-strip:hover .cites-track-inner { animation-play-state: paused; }
      @keyframes citesScroll { to { transform: translateX(-50%); } }
      .cites-item {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px; letter-spacing: 0.06em;
        color: rgba(255,255,255,0.55);
      }
      .cites-item em { color: rgba(255,255,255,0.85); font-style: italic; }

      /* FAQ Home */
      .faq-list { max-width: 780px; margin: 40px auto 0; }
      .faq-row { border-bottom: 1px solid rgba(255,255,255,0.08); }
      .faq-btn {
        width: 100%; background: transparent; border: 0;
        padding: 22px 0; cursor: pointer; font-family: inherit;
        display: flex; align-items: center; justify-content: space-between; gap: 20px;
        color: #fff; font-size: 16px; font-weight: 400;
        letter-spacing: -0.005em; text-align: left;
      }
      .faq-btn:hover { color: rgb(var(--cyan)); }
      .faq-plus {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 22px; color: rgba(255,255,255,0.55);
        line-height: 1; transition: transform 240ms var(--ease-cinema), color 200ms var(--ease-cinema);
      }
      .faq-row.on .faq-plus { transform: rotate(45deg); color: rgb(var(--cyan)); }
      .faq-a { max-height: 0; overflow: hidden; transition: max-height 240ms var(--ease-cinema); }
      .faq-row.on .faq-a { max-height: 220px; }
      .faq-a-inner {
        padding: 0 0 22px; font-size: 14.5px; color: rgba(255,255,255,0.68);
        line-height: 1.6; max-width: 60ch;
      }

      /* Reviews band */
      .reviews-grid {
        display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 44px;
      }
      @media (min-width: 900px) { .reviews-grid { grid-template-columns: 1fr 1fr 1fr; } }
      .review-card {
        background: rgba(255,255,255,0.025);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 18px;
        padding: 28px;
        transition: border-color 300ms var(--ease-cinema), background 300ms var(--ease-cinema);
      }
      .review-card:hover {
        border-color: rgba(127,170,255,0.30);
        background: rgba(127,170,255,0.03);
      }
      .review-quote {
        font-family: 'Playfair Display', Georgia, serif;
        font-style: italic; font-weight: 400;
        font-size: 18px; line-height: 1.5;
        color: #2C2C2C;
        margin-bottom: 22px;
      }
      .review-author {
        display: flex; align-items: center; gap: 12px;
        padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06);
      }
      .review-initials {
        width: 36px; height: 36px; border-radius: 50%;
        border: 1px solid rgba(127,170,255,0.30);
        background: rgba(127,170,255,0.06);
        display: flex; align-items: center; justify-content: center;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px; letter-spacing: 0.06em; color: rgb(var(--cyan));
      }
      .review-name { font-size: 13px; color: #fff; font-weight: 500; }
      .review-role {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px; letter-spacing: 0.12em; color: rgba(255,255,255,0.50);
        text-transform: uppercase; margin-top: 3px;
      }

      /* Footer trust badges */
      .foot-trust {
        display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
        padding: 24px 0; margin-bottom: 32px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
      }
      @media (min-width: 900px) { .foot-trust { grid-template-columns: repeat(4, 1fr); } }
      .foot-trust-item {
        display: flex; gap: 12px; align-items: flex-start;
        padding: 14px 0;
      }
      .foot-trust-item svg { color: rgb(var(--cyan)); flex-shrink: 0; margin-top: 2px; }
      .foot-trust-label {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
        color: #fff; margin-bottom: 3px;
      }
      .foot-trust-sub { font-size: 12px; color: rgba(255,255,255,0.55); }

      /* Footer payment icons */
      .foot-pay { display: inline-flex; align-items: center; gap: 10px; }
      .foot-pay svg { color: rgba(255,255,255,0.4); width: 26px; height: 16px; }

      /* Light palette overrides */
      html[data-palette="paper"] .sd-card,
      html[data-palette="ivory"] .sd-card,
      html[data-palette="paper"] .review-card,
      html[data-palette="ivory"] .review-card {
        background: rgba(0,0,0,0.025); border-color: rgba(0,0,0,0.08);
      }
      html[data-palette="paper"] .sd-title,
      html[data-palette="ivory"] .sd-title,
      html[data-palette="paper"] .review-name,
      html[data-palette="ivory"] .review-name,
      html[data-palette="paper"] .faq-btn,
      html[data-palette="ivory"] .faq-btn,
      html[data-palette="paper"] .foot-trust-label,
      html[data-palette="ivory"] .foot-trust-label { color: var(--ink); }
      html[data-palette="paper"] .sd-label,
      html[data-palette="ivory"] .sd-label,
      html[data-palette="paper"] .review-role,
      html[data-palette="ivory"] .review-role,
      html[data-palette="paper"] .foot-trust-sub,
      html[data-palette="ivory"] .foot-trust-sub,
      html[data-palette="paper"] .faq-a-inner,
      html[data-palette="ivory"] .faq-a-inner,
      html[data-palette="paper"] .cites-item,
      html[data-palette="ivory"] .cites-item { color: var(--muted); }
      html[data-palette="paper"] .cites-strip,
      html[data-palette="ivory"] .cites-strip,
      html[data-palette="paper"] .foot-trust,
      html[data-palette="ivory"] .foot-trust { border-color: rgba(0,0,0,0.08); }
      html[data-palette="paper"] .sd-btn,
      html[data-palette="ivory"] .sd-btn {
        color: var(--ink); border-color: rgba(0,0,0,0.18);
      }
      html[data-palette="paper"] .review-quote,
      html[data-palette="ivory"] .review-quote { color: var(--ink); }

      /* ============================================================
         CYCLE 7 — Mobile pass (responsive refinements)
         ============================================================ */
      * { -webkit-tap-highlight-color: transparent; }

      /* (A) Hamburger button — visible only below lg */
      .nav-hamburger {
        display: none;
        width: 36px; height: 36px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.10);
        background: transparent;
        color: rgba(255,255,255,0.85);
        align-items: center; justify-content: center;
        cursor: pointer;
        transition: border-color 200ms, color 200ms;
      }
      .nav-hamburger:hover { border-color: rgb(var(--cyan)); color: #fff; }
      @media (max-width: 1023px) { .nav-hamburger { display: inline-flex; } }
      html[data-palette="paper"] .nav-hamburger,
      html[data-palette="ivory"] .nav-hamburger {
        border-color: rgba(0,0,0,0.12); color: var(--ink);
      }

      /* (A) Mobile nav drawer */
      .mnav { background: rgba(8,12,22,0.97); }
      .mnav-section { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
      .mnav-section:last-child { border-bottom: 0; }
      .mnav-search {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 14px;
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 999px;
        cursor: pointer; color: rgba(255,255,255,0.55);
        font-size: 13px;
      }
      .mnav-search:hover { border-color: rgba(127,170,255,0.4); color: #fff; }
      .mnav-search .mono { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
      .mnav-link {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 4px;
        font-size: 16px; color: #fff; text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,0.05);
      }
      .mnav-link:last-child { border-bottom: 0; }
      .mnav-link:hover { color: rgb(var(--cyan)); }
      .mnav-cat {
        border-bottom: 1px solid rgba(255,255,255,0.05);
      }
      .mnav-cat:last-child { border-bottom: 0; }
      .mnav-cat-head {
        width: 100%; display: flex; align-items: center; justify-content: space-between;
        padding: 14px 4px; background: transparent; border: 0;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
        color: rgba(255,255,255,0.85); cursor: pointer;
      }
      .mnav-cat-head:hover { color: rgb(var(--cyan)); }
      .mnav-cat-arrow { transition: transform 200ms var(--ease-cinema); }
      .mnav-cat.on .mnav-cat-arrow { transform: rotate(90deg); }
      .mnav-cat-list {
        max-height: 0; overflow: hidden;
        transition: max-height 300ms var(--ease-cinema);
      }
      .mnav-cat.on .mnav-cat-list { max-height: 240px; }
      .mnav-cat-list a {
        display: block; padding: 8px 14px;
        font-size: 14px; color: rgba(255,255,255,0.65); text-decoration: none;
      }
      .mnav-cat-list a:hover { color: #fff; }
      .mnav-shop-cta {
        display: block; text-align: center;
        padding: 14px 24px; border-radius: 999px;
        background: #fff; color: #04060c;
        font-size: 13px; font-weight: 500;
        text-decoration: none;
      }
      .mnav-lang-row {
        display: inline-flex; padding: 3px;
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 999px; background: rgba(255,255,255,0.04);
      }
      .mnav-lang-btn {
        padding: 0 12px; height: 28px;
        background: transparent; border: 0;
        color: rgba(255,255,255,0.55);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px; letter-spacing: 0.16em; cursor: pointer;
        border-radius: 999px;
      }
      .mnav-lang-btn.on { background: #fff; color: #04060c; }
      html[data-palette="paper"] .mnav,
      html[data-palette="ivory"] .mnav { background: rgba(255,255,255,0.97); }
      html[data-palette="paper"] .mnav-link,
      html[data-palette="ivory"] .mnav-link,
      html[data-palette="paper"] .mnav-cat-head,
      html[data-palette="ivory"] .mnav-cat-head { color: var(--ink); }
      html[data-palette="paper"] .mnav-cat-list a,
      html[data-palette="ivory"] .mnav-cat-list a { color: var(--muted); }
      html[data-palette="paper"] .mnav-shop-cta,
      html[data-palette="ivory"] .mnav-shop-cta { background: var(--ink); color: var(--bg); }
      html[data-palette="paper"] .mnav-search,
      html[data-palette="ivory"] .mnav-search {
        border-color: rgba(0,0,0,0.10); color: var(--muted);
      }
      html[data-palette="paper"] .mnav-lang-row,
      html[data-palette="ivory"] .mnav-lang-row {
        border-color: rgba(0,0,0,0.10); background: rgba(0,0,0,0.04);
      }
      html[data-palette="paper"] .mnav-lang-btn,
      html[data-palette="ivory"] .mnav-lang-btn { color: var(--muted); }
      html[data-palette="paper"] .mnav-lang-btn.on,
      html[data-palette="ivory"] .mnav-lang-btn.on { background: var(--ink); color: var(--bg); }

      /* On mobile hide desktop-only nav buttons except hamburger + cart */
      @media (max-width: 1023px) {
        .nav-hide-mobile { display: none !important; }
      }

      /* (B) Hero mobile */
      @media (max-width: 768px) {
        .hero-copy h1.display { font-size: clamp(36px, 9.5vw, 68px) !important; line-height: 1.0 !important; letter-spacing: -0.035em !important; }
        .hero-copy p { font-size: 15px !important; }
        .hero-actions { width: 100%; }
        .hero-actions > a { width: 100%; justify-content: center; }
        .hero-visual { height: 380px !important; margin-top: 16px; }
        .hero-visual .float-a, .hero-visual .float-b {
          position: static !important;
          width: 100% !important; max-width: 320px;
          margin: 12px auto 0 !important;
          animation: none !important;
        }
        .hero-stats { gap: 12px !important; }
      }

      /* (C) Product cards mobile */
      @media (max-width: 480px) {
        .products-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
        .product-card { padding: 16px !important; padding-bottom: 64px !important; border-radius: 20px; }
        .product-card .vial-wrap { transform: scale(0.85); transform-origin: center; margin: 0; }
        .product-card .text-2xl { font-size: 18px !important; }
        .product-card .card-micro { font-size: 10px; }
      }
      @media (max-width: 360px) {
        .products-grid { grid-template-columns: 1fr !important; }
      }
      @media (hover: none) and (pointer: coarse) {
        .card-vial-overlay { display: none; }
        .card-add-pill {
          background: rgba(255,255,255,0.08) !important;
          color: #fff !important;
          opacity: 1 !important;
          pointer-events: auto !important;
          transform: translateX(-50%) translateY(0) !important;
          font-size: 12px;
          padding: 10px 16px;
          box-shadow: none !important;
        }
        .card-add-pill:active { background: #fff !important; color: #04060c !important; }
        html[data-palette="paper"] .card-add-pill,
        html[data-palette="ivory"] .card-add-pill {
          background: rgba(0,0,0,0.08) !important; color: var(--ink) !important;
        }
        html[data-palette="paper"] .card-add-pill:active,
        html[data-palette="ivory"] .card-add-pill:active {
          background: var(--ink) !important; color: var(--bg) !important;
        }
      }

      /* (D) PDP mobile — single column + sticky buy bar + horizontal gallery */
      @media (max-width: 1023px) {
        .pdp-right-inner { position: relative !important; top: auto !important; }
        .pdp-tabs-sticky { top: 64px; }
      }
      @media (max-width: 768px) {
        .pdp-h1 { font-size: clamp(40px, 11vw, 64px) !important; }
        .pdp-tabs-sticky { gap: 0; }
        .pdp-tab { scroll-snap-align: start; padding: 14px 12px; font-size: 12px; }
        /* Tab indicator size scales with text via pseudo */
      }

      /* PDP mobile sticky buy bar */
      .pdp-sticky-bar {
        position: fixed; bottom: 0; left: 0; right: 0;
        z-index: 90;
        background: rgba(8,12,22,0.96);
        border-top: 1px solid rgba(255,255,255,0.10);
        padding: 10px 14px;
        display: none; align-items: center; gap: 12px;
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        opacity: 0; transform: translateY(20px);
        transition: opacity 220ms var(--ease-cinema), transform 220ms var(--ease-cinema);
        pointer-events: none;
      }
      .pdp-sticky-bar.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
      .pdp-sticky-thumb {
        width: 36px; height: 50px;
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 6px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
      }
      .pdp-sticky-meta { flex: 1; min-width: 0; }
      .pdp-sticky-name {
        font-size: 13px; color: #fff;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .pdp-sticky-price {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px; color: rgba(255,255,255,0.65); letter-spacing: 0.06em;
      }
      .pdp-sticky-add {
        padding: 10px 18px; border-radius: 999px;
        background: #fff; color: #04060c;
        font-size: 12px; font-weight: 500;
        border: 0; cursor: pointer; font-family: inherit;
        white-space: nowrap;
      }
      .pdp-sticky-add:hover { background: rgb(var(--cyan)); }
      @media (max-width: 768px) {
        .pdp-sticky-bar { display: flex; }
        body.has-pdp { padding-bottom: 80px; }
        .pdp-main { padding-bottom: 0 !important; }
      }
      html[data-palette="paper"] .pdp-sticky-bar,
      html[data-palette="ivory"] .pdp-sticky-bar {
        background: rgba(255,255,255,0.96);
        border-top-color: rgba(0,0,0,0.10);
      }
      html[data-palette="paper"] .pdp-sticky-name,
      html[data-palette="ivory"] .pdp-sticky-name { color: var(--ink); }
      html[data-palette="paper"] .pdp-sticky-price,
      html[data-palette="ivory"] .pdp-sticky-price { color: var(--muted); }
      html[data-palette="paper"] .pdp-sticky-add,
      html[data-palette="ivory"] .pdp-sticky-add { background: var(--ink); color: var(--bg); }
      html[data-palette="paper"] .pdp-sticky-thumb,
      html[data-palette="ivory"] .pdp-sticky-thumb { border-color: rgba(0,0,0,0.12); }

      /* PDP gallery horizontal swipe on mobile */
      @media (max-width: 768px) {
        .pdp-gallery {
          overflow-x: auto;
          overflow-y: hidden;
          scroll-snap-type: x mandatory;
          touch-action: pan-x;
          display: flex;
          scrollbar-width: none;
        }
        .pdp-gallery::-webkit-scrollbar { display: none; }
        .pdp-gallery::after { display: none; }
        .pdp-orbit-ring { display: none; }
        .pdp-gallery-slide {
          position: relative !important;
          inset: auto !important;
          flex: 0 0 100% !important;
          width: 100% !important; height: 100% !important;
          opacity: 1 !important;
          transform: none !important;
          scroll-snap-align: start;
        }
      }

      /* (E) Stacks band mobile */
      @media (max-width: 768px) {
        .stack-card { padding: 24px 22px; }
      }

      /* (F) Search palette mobile full-screen */
      @media (max-width: 640px) {
        .cmd-back { padding: 0; align-items: stretch; }
        .cmd-palette {
          max-width: none !important;
          max-height: 100vh !important;
          width: 100% !important;
          border-radius: 0 !important;
          border: 0 !important;
          background: rgba(8,12,22,0.98) !important;
        }
        .cmd-input-row {
          position: sticky; top: 0; z-index: 5;
          background: rgba(8,12,22,0.98);
          padding-top: max(env(safe-area-inset-top), 16px);
        }
        .cmd-results { padding: 16px 8px env(safe-area-inset-bottom); }
        html[data-palette="paper"] .cmd-palette,
        html[data-palette="ivory"] .cmd-palette {
          background: rgba(255,255,255,0.97) !important;
        }
        html[data-palette="paper"] .cmd-input-row,
        html[data-palette="ivory"] .cmd-input-row {
          background: rgba(255,255,255,0.97);
        }
      }

      /* (G) Drawers touch behavior */
      .pdrawer { touch-action: pan-y; }
      @media (max-width: 768px) {
        .pdrawer { max-width: 100% !important; }
        .pdrawer-head {
          padding-top: max(env(safe-area-inset-top), 22px);
          padding-bottom: 22px;
        }
        .pdrawer-foot {
          padding-bottom: max(env(safe-area-inset-bottom), 22px);
        }
        .pdrawer-head::before {
          content: '';
          position: absolute; top: 10px; left: 50%;
          transform: translateX(-50%);
          width: 38px; height: 4px;
          border-radius: 999px;
          background: rgba(255,255,255,0.18);
        }
        .pdrawer-head { position: relative; padding-top: max(env(safe-area-inset-top), 32px); }
      }

      /* (I) Mega-menu reposition on tablet (panel is hidden when nav nav is mobile) */
      @media (max-width: 1023px) {
        /* Mega-menu trigger is nav-only; hidden when nav is hidden */
      }

      /* (J) Hover only on hover-capable devices */
      @media (hover: none) and (pointer: coarse) {
        .product-card:hover, .stack-card:hover, .cat-bento:hover,
        .article:hover, .pdp-thumb:hover, .pdrawer-line-mini:hover,
        .pdrawer-checkout:hover, .pdrawer-share:hover {
          transform: none !important;
        }
        .product-card:hover, .stack-card:hover { box-shadow: none !important; border-color: rgba(255,255,255,0.08) !important; }
      }

      /* ============================================================
         TWEAK VARIANTS — data-* attributes on <html>
         ============================================================ */

      /* ---- Palette: swap accent + base canvas tones -------------- */

      /* Beats Tailwind's bg-ink-950 on <body> via higher-specificity */
      html[data-palette] body {
        background: var(--bg) !important;
        color: var(--ink) !important;
      }

      /* CYAN — default (cyan + violet on near-black) */
      html[data-palette="cyan"] {
        --bg: #04060c; --ink: #e8eef7; --muted: #8b95ad;
        --hair: rgba(255,255,255,0.08);
        --cyan: 127, 170, 255; --violet: 182, 167, 255;
      }

      /* VIOLET — violet + fuchsia on deep purple-black */
      html[data-palette="violet"] {
        --bg: #08051a; --ink: #ece8fa; --muted: #9b8fc4;
        --hair: rgba(232,200,255,0.10);
        --cyan: 167, 139, 250; --violet: 232, 121, 249;
      }

      /* EMERALD — mint + sage on forest-black */
      html[data-palette="emerald"] {
        --bg: #04130c; --ink: #e6f5ee; --muted: #88a89a;
        --hair: rgba(180,255,220,0.10);
        --cyan: 110, 231, 183; --violet: 167, 250, 210;
      }

      /* AMBER — pharma amber on warm dark */
      html[data-palette="amber"] {
        --bg: #110a04; --ink: #f5ede0; --muted: #a89884;
        --hair: rgba(255,210,140,0.10);
        --cyan: 251, 191, 118; --violet: 255, 217, 134;
      }

      /* MAGENTA — hot pink on plum */
      html[data-palette="magenta"] {
        --bg: #14040e; --ink: #fae8f0; --muted: #b890a0;
        --hair: rgba(255,150,210,0.10);
        --cyan: 255, 127, 206; --violet: 215, 154, 255;
      }

      /* MONO — silver only, neutral cold */
      html[data-palette="mono"] {
        --bg: #08090c; --ink: #e8eaee; --muted: #8a8e98;
        --hair: rgba(255,255,255,0.07);
        --cyan: 220, 225, 235; --violet: 170, 175, 185;
      }

      /* CRIMSON — burgundy biomedical, serious */
      html[data-palette="crimson"] {
        --bg: #110406; --ink: #f7e6e8; --muted: #a8848a;
        --hair: rgba(255,180,180,0.10);
        --cyan: 248, 113, 113; --violet: 252, 165, 165;
      }

      /* OCEAN — deep teal abyssal */
      html[data-palette="ocean"] {
        --bg: #04101a; --ink: #e0f0fa; --muted: #7ea0b8;
        --hair: rgba(160,220,255,0.08);
        --cyan: 56, 189, 248; --violet: 125, 211, 252;
      }

      /* ACID — electric lime biolab */
      html[data-palette="acid"] {
        --bg: #080d04; --ink: #ecf5d8; --muted: #8aa07a;
        --hair: rgba(190,242,100,0.10);
        --cyan: 190, 242, 100; --violet: 217, 249, 157;
      }

      /* SUNSET — fuchsia → amber, vibrant brand */
      html[data-palette="sunset"] {
        --bg: #0e0510; --ink: #fae6e0; --muted: #b89888;
        --hair: rgba(255,180,160,0.10);
        --cyan: 251, 113, 133; --violet: 251, 191, 118;
      }

      /* COBALT — LIGHT mode, Pure Cobalt + Liquid Glass aesthetic */
      html[data-palette="cobalt"] {
        --bg: #FAFAFC; --ink: #0A0A0A; --muted: #6B6B6B;
        --hair: rgba(10,10,10,0.08);
        --cyan: 25, 71, 209; --violet: 49, 154, 255;
      }
      html[data-palette="cobalt"] body {
        background-color: transparent; /* video global handles bg */
        color: var(--ink);
        background-image:
          radial-gradient(ellipse 900px 600px at 10% -10%, rgba(96,177,255,0.12), transparent 60%),
          radial-gradient(ellipse 700px 500px at 110% 20%, rgba(49,154,255,0.10), transparent 65%);
        background-attachment: fixed;
      }
      html[data-palette="cobalt"] .glass {
        background: linear-gradient(
          180deg,
          rgba(255,255,255,0.55) 0%,
          rgba(255,255,255,0.28) 100%
        );
        border: 1px solid rgba(10,10,10,0.10);
        box-shadow:
          inset 0 4px 4px 0 rgba(255,255,255,0.45),
          inset 0 1px 0 0 rgba(255,255,255,0.65),
          0 14px 40px -16px rgba(25, 71, 209, 0.18);
        backdrop-filter: blur(50px) saturate(160%);
        -webkit-backdrop-filter: blur(50px) saturate(160%);
      }
      html[data-palette="cobalt"] .glass-soft,
      html[data-palette="cobalt"] .hairline {
        background: rgba(255,255,255,0.30);
        border: 1px solid rgba(10,10,10,0.08);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
      }
      /* Navbar pill: más opacidad que el glass genérico — sobre secciones
         oscuras (footer, #cta) el 28-55% dejaba los links casi invisibles */
      html[data-palette="cobalt"] header .glass {
        background: linear-gradient(
          180deg,
          rgba(252,253,255,0.90) 0%,
          rgba(248,250,255,0.78) 100%
        );
        border: 1px solid rgba(25,71,209,0.12);
        box-shadow:
          inset 0 1px 0 0 rgba(255,255,255,0.85),
          0 14px 40px -16px rgba(25, 71, 209, 0.22);
      }
      html[data-palette="cobalt"] .text-glow-cyan { color: rgb(var(--cyan)) !important; text-shadow: none !important; }
      html[data-palette="cobalt"] .text-ink-200,
      html[data-palette="cobalt"] .text-white,
      html[data-palette="cobalt"] [class*="text-white\\/"] { color: var(--ink) !important; }
      html[data-palette="cobalt"] .text-white\/30 { color: rgba(10,10,10,0.40) !important; }
      html[data-palette="cobalt"] .text-white\/40 { color: rgba(10,10,10,0.50) !important; }
      html[data-palette="cobalt"] .text-white\/50,
      html[data-palette="cobalt"] .text-white\/55,
      html[data-palette="cobalt"] .text-white\/60,
      html[data-palette="cobalt"] .text-white\/65 { color: var(--muted) !important; }
      html[data-palette="cobalt"] .text-white\/70,
      html[data-palette="cobalt"] .text-white\/75,
      html[data-palette="cobalt"] .text-white\/80 { color: rgba(10,10,10,0.78) !important; }
      html[data-palette="cobalt"] .text-white\/85,
      html[data-palette="cobalt"] .text-white\/95 { color: var(--ink) !important; }
      html[data-palette="cobalt"] .border-white\/8,
      html[data-palette="cobalt"] .border-white\/10,
      html[data-palette="cobalt"] .border-white\/15,
      html[data-palette="cobalt"] .border-white\/20 { border-color: rgba(10,10,10,0.10) !important; }
      html[data-palette="cobalt"] .bg-white\/5,
      html[data-palette="cobalt"] .bg-white\/8,
      html[data-palette="cobalt"] .bg-white\/10 { background: rgba(10,10,10,0.04) !important; }
      html[data-palette="cobalt"] .bg-ink-950 { background: rgba(10,10,10,0.04) !important; }

      /* Liquid-glass primary CTA */
      html[data-palette="cobalt"] .bg-white,
      html[data-palette="cobalt"] .btn-primary,
      html[data-palette="cobalt"] .pdrawer-checkout,
      html[data-palette="cobalt"] .pdp-add-cart,
      html[data-palette="cobalt"] .pdp-sticky-cta,
      html[data-palette="cobalt"] .mnav-cta,
      html[data-palette="cobalt"] .shop-btn-primary {
        background: rgba(25,71,209,0.85) !important;
        color: #fff !important;
        border-radius: 14px !important;
        box-shadow:
          inset 0 4px 4px 0 rgba(255,255,255,0.35),
          inset 0 -2px 2px 0 rgba(10,10,10,0.12),
          0 8px 28px -8px rgba(25, 71, 209, 0.32) !important;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        transition: transform 220ms var(--ease-cinema), box-shadow 220ms var(--ease-cinema);
      }
      html[data-palette="cobalt"] .bg-white:hover,
      html[data-palette="cobalt"] .btn-primary:hover,
      html[data-palette="cobalt"] .pdrawer-checkout:hover,
      html[data-palette="cobalt"] .pdp-add-cart:hover,
      html[data-palette="cobalt"] .shop-btn-primary:hover {
        background: rgba(15,46,138,0.92) !important;
        transform: scale(1.02);
      }
      html[data-palette="cobalt"] .card-add-pill {
        background: rgba(25,71,209,0.85) !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,0.35) !important;
        box-shadow:
          inset 0 2px 2px 0 rgba(255,255,255,0.35),
          0 6px 20px -8px rgba(25, 71, 209, 0.28) !important;
      }
      html[data-palette="cobalt"] .pdp-add-stack,
      html[data-palette="cobalt"] .btn-ghost {
        background: rgba(255,255,255,0.40) !important;
        color: rgb(var(--cyan)) !important;
        border: 1px solid rgba(25,71,209,0.30) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      html[data-palette="cobalt"] .pdp-coa-dl { color: rgb(var(--cyan)) !important; border-color: rgba(25,71,209,0.25) !important; }

      /* Cobalt-specific surface cards */
      html[data-palette="cobalt"] .product-card,
      html[data-palette="cobalt"] .stack-card,
      html[data-palette="cobalt"] .sd-card,
      html[data-palette="cobalt"] .review-card,
      html[data-palette="cobalt"] .pdp-gallery,
      html[data-palette="cobalt"] .pdp-thumb,
      html[data-palette="cobalt"] .pdp-mech,
      html[data-palette="cobalt"] .pdp-coa-card,
      html[data-palette="cobalt"] .pdp-step,
      html[data-palette="cobalt"] .pdp-price-card,
      html[data-palette="cobalt"] .pdp-stack-card-link,
      html[data-palette="cobalt"] .cmd-palette,
      html[data-palette="cobalt"] .pdrawer,
      html[data-palette="cobalt"] .mnav {
        background: rgba(255,255,255,0.55) !important;
        border: 1px solid rgba(10,10,10,0.08) !important;
        backdrop-filter: blur(40px) saturate(150%);
        -webkit-backdrop-filter: blur(40px) saturate(150%);
        box-shadow:
          inset 0 1px 0 0 rgba(255,255,255,0.55),
          0 8px 40px -12px rgba(25, 71, 209, 0.10) !important;
      }
      html[data-palette="cobalt"] .pdp-tabs-sticky,
      html[data-palette="cobalt"] .cmd-input-row {
        background: rgba(250,250,252,0.78) !important;
        border-bottom-color: rgba(10,10,10,0.08) !important;
      }
      html[data-palette="cobalt"] .product-card:hover,
      html[data-palette="cobalt"] .stack-card:hover,
      html[data-palette="cobalt"] .review-card:hover {
        border-color: rgba(25,71,209,0.45) !important;
        box-shadow:
          inset 0 1px 0 0 rgba(255,255,255,0.55),
          0 12px 50px -16px rgba(25, 71, 209, 0.30) !important;
      }
      html[data-palette="cobalt"] .review-quote { color: var(--ink) !important; }

      /* ============================================================
         COBALT — extended visual polish (Cycle 9)
         ============================================================ */

      /* Subtle film grain for premium texture */
      html[data-palette="cobalt"] body::after {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        opacity: 0.025;
        mix-blend-mode: multiply;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
      }

      /* Larger, multi-layer hero orbs */
      html[data-palette="cobalt"] .hero::before {
        right: -10%;
        top: 4%;
        width: 620px; height: 620px;
        background: radial-gradient(circle, rgba(49,154,255,0.55), rgba(96,177,255,0.20) 35%, transparent 70%);
        filter: blur(60px);
      }
      html[data-palette="cobalt"] .hero::after {
        content: '';
        position: absolute;
        left: -8%; top: 28%;
        width: 460px; height: 460px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(25,71,209,0.18), transparent 65%);
        filter: blur(80px);
        pointer-events: none;
        z-index: 0;
        animation: cobaltOrbB 22s ease-in-out infinite;
      }
      @keyframes cobaltOrbB {
        0%, 100% { transform: translate(0,0) scale(1); }
        50%      { transform: translate(30px,-20px) scale(1.10); }
      }
      @media (prefers-reduced-motion: reduce) {
        html[data-palette="cobalt"] .hero::after { animation: none; }
      }

      /* Hero typography — heavier, tighter, "Fustat-like" feel */
      html[data-palette="cobalt"] .hero h1,
      html[data-palette="cobalt"] .display.text-\[14vw\],
      html[data-palette="cobalt"] .hero .display {
        font-weight: 700 !important;
        letter-spacing: -0.035em !important;
        line-height: 1.0 !important;
      }
      html[data-palette="cobalt"] .hero h1 span[style*="linear-gradient"] {
        background: linear-gradient(180deg, #1947D1 0%, #319AFF 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        font-style: italic !important;
        font-weight: 600 !important;
      }
      html[data-palette="cobalt"] .display,
      html[data-palette="cobalt"] .section-title,
      html[data-palette="cobalt"] .shop-display {
        font-weight: 600 !important;
        letter-spacing: -0.025em !important;
      }

      /* Hero subtitle a touch larger */
      html[data-palette="cobalt"] .hero-copy > p {
        font-size: 18px !important;
        color: rgba(10,10,10,0.65) !important;
        letter-spacing: -0.005em !important;
      }

      /* Eyebrow / mono tags pick up cobalt */
      html[data-palette="cobalt"] .eyebrow,
      html[data-palette="cobalt"] .text-glow-cyan\/90 { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .border-glow-cyan\/25,
      html[data-palette="cobalt"] .border-glow-cyan\/30 { border-color: rgba(25,71,209,0.25) !important; }
      html[data-palette="cobalt"] .bg-glow-cyan\/5,
      html[data-palette="cobalt"] .bg-glow-cyan\/6,
      html[data-palette="cobalt"] .bg-glow-cyan\/8 { background: rgba(25,71,209,0.06) !important; }

      /* Stat numbers — bigger cobalt accents */
      html[data-palette="cobalt"] .hero-stats > div > div:first-child,
      html[data-palette="cobalt"] .num-tick {
        font-weight: 600 !important;
        background: linear-gradient(180deg, #0A0A0A 0%, #1947D1 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      /* Vial-wrap with cobalt-light gradient backdrop (LongevaPeptides DS) */
      html[data-palette="cobalt"] .vial-wrap,
      html[data-palette="cobalt"] .product-card .vial-wrap {
        background: linear-gradient(180deg, #FAFAFC 0%, #E8EDFB 100%) !important;
        border-radius: 18px;
        border: 1px solid rgba(10,10,10,0.06);
      }
      html[data-palette="cobalt"] .pdp-gallery {
        background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(232,237,251,0.85) 100%) !important;
      }
      html[data-palette="cobalt"] .pdp-gallery::after {
        background-image:
          linear-gradient(to right, rgba(25,71,209,0.04) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(25,71,209,0.04) 1px, transparent 1px) !important;
      }

      /* Subtle section dividers / better separation */
      html[data-palette="cobalt"] section + section,
      html[data-palette="cobalt"] .py-24,
      html[data-palette="cobalt"] .py-28,
      html[data-palette="cobalt"] .py-32 { position: relative; }

      /* Pill chips brighter */
      html[data-palette="cobalt"] .chip-cat:not([aria-pressed="true"]) {
        background: rgba(255,255,255,0.45) !important;
        color: var(--ink) !important;
        border: 1px solid rgba(25,71,209,0.18) !important;
      }
      html[data-palette="cobalt"] .chip-cat:not([aria-pressed="true"]):hover {
        border-color: rgba(25,71,209,0.45) !important;
        background: rgba(232,237,251,0.65) !important;
      }
      html[data-palette="cobalt"] .chip-cat[aria-pressed="true"] {
        background: rgb(25,71,209) !important;
        color: #fff !important;
        border-color: rgb(25,71,209) !important;
        box-shadow:
          inset 0 2px 2px rgba(255,255,255,0.30),
          0 6px 20px -6px rgba(25, 71, 209, 0.32);
      }

      /* Lang toggle on cobalt */
      html[data-palette="cobalt"] .lang-toggle {
        background: rgba(255,255,255,0.40);
        border: 1px solid rgba(10,10,10,0.10);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
      }
      html[data-palette="cobalt"] .lang-btn { color: var(--muted); }
      html[data-palette="cobalt"] .lang-btn.on {
        background: rgb(var(--cyan));
        color: #fff;
        box-shadow: inset 0 2px 2px rgba(255,255,255,0.30);
      }

      /* Footer + CTA dark inversion on cobalt */
      html[data-palette="cobalt"] footer,
      html[data-palette="cobalt"] #cta .glass {
        background: #0A0A0A !important;
        color: #fff !important;
        border-color: rgba(255,255,255,0.10) !important;
      }
      html[data-palette="cobalt"] footer h4,
      html[data-palette="cobalt"] footer .text-white,
      html[data-palette="cobalt"] footer * [class*="text-white"],
      html[data-palette="cobalt"] #cta h2,
      html[data-palette="cobalt"] #cta .display { color: #fff !important; }
      html[data-palette="cobalt"] footer .text-white\/30,
      html[data-palette="cobalt"] footer .text-white\/40,
      html[data-palette="cobalt"] footer .text-white\/50,
      html[data-palette="cobalt"] footer .text-white\/65 { color: rgba(255,255,255,0.6) !important; }
      html[data-palette="cobalt"] footer .foot-trust-label { color: #fff !important; }
      html[data-palette="cobalt"] footer .foot-trust-sub,
      html[data-palette="cobalt"] footer .foot-trust-item svg { color: rgba(255,255,255,0.65) !important; }
      html[data-palette="cobalt"] footer .foot-trust { border-color: rgba(255,255,255,0.10) !important; }
      html[data-palette="cobalt"] footer .border-white\/10,
      html[data-palette="cobalt"] footer .border-b { border-color: rgba(255,255,255,0.10) !important; }
      html[data-palette="cobalt"] footer .hairline {
        background: rgba(255,255,255,0.05) !important;
        border-color: rgba(255,255,255,0.12) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      html[data-palette="cobalt"] footer input { color: #fff !important; }
      html[data-palette="cobalt"] footer input::-moz-placeholder { color: rgba(255,255,255,0.40) !important; }
      html[data-palette="cobalt"] footer input::placeholder { color: rgba(255,255,255,0.40) !important; }
      html[data-palette="cobalt"] footer .bg-white {
        background: #fff !important;
        color: #0A0A0A !important;
        box-shadow: inset 0 2px 2px rgba(255,255,255,0.5) !important;
      }
      html[data-palette="cobalt"] footer svg[stroke="currentColor"] { color: rgba(255,255,255,0.7); }
      html[data-palette="cobalt"] #cta .glass {
        background: linear-gradient(180deg, #0A0A0A 0%, #15214A 100%) !important;
      }
      html[data-palette="cobalt"] #cta .text-white,
      html[data-palette="cobalt"] #cta .text-white\/60,
      html[data-palette="cobalt"] #cta .text-white\/75 { color: rgba(255,255,255,0.80) !important; }
      html[data-palette="cobalt"] #cta .btn-primary {
        background: #fff !important;
        color: rgb(var(--cyan)) !important;
        box-shadow: inset 0 4px 4px rgba(255,255,255,0.6), 0 8px 28px -8px rgba(255,255,255,0.20) !important;
      }
      html[data-palette="cobalt"] #cta .btn-primary:hover { background: rgb(var(--cyan)) !important; color: #fff !important; }
      html[data-palette="cobalt"] #cta .btn-ghost {
        background: rgba(255,255,255,0.08) !important;
        border-color: rgba(255,255,255,0.20) !important;
        color: #fff !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      html[data-palette="cobalt"] #cta .btn-ghost .text-white\/40,
      html[data-palette="cobalt"] #cta .btn-ghost .text-white\/85 { color: rgba(255,255,255,0.60) !important; }

      /* Cites strip subtle on cobalt */
      html[data-palette="cobalt"] .cites-strip {
        background: linear-gradient(90deg, transparent, rgba(232,237,251,0.5), transparent);
      }
      html[data-palette="cobalt"] .cites-label { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .cites-item { color: var(--muted) !important; }
      html[data-palette="cobalt"] .cites-item em { color: var(--ink) !important; }

      /* Reviews — italic quote color + cobalt-tinted initials pill */
      html[data-palette="cobalt"] .review-initials {
        background: rgba(25,71,209,0.08);
        border-color: rgba(25,71,209,0.30);
        color: rgb(var(--cyan));
      }

      /* PDP tabs — sticky bar already covered; tabs underline use cobalt */
      html[data-palette="cobalt"] .pdp-tab.on::after {
        background: rgb(var(--cyan));
        box-shadow: 0 0 12px rgba(25, 71, 209, 0.32);
      }

      /* Variant pill selected — cobalt instead of cyan rgba */
      html[data-palette="cobalt"] .pdp-variant-pill.on {
        border-color: rgb(var(--cyan)) !important;
        background: rgba(25,71,209,0.06) !important;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.5),
          0 0 0 1px rgba(25, 71, 209, 0.25) !important;
      }

      /* COA mini-rows accent value cobalt */
      html[data-palette="cobalt"] .pdp-coa-row span:last-child,
      html[data-palette="cobalt"] .sd-coa-row span:last-child { color: rgb(var(--cyan)) !important; }

      /* Floating hero chip — keep cobalt feel */
      html[data-palette="cobalt"] .float-a,
      html[data-palette="cobalt"] .float-b {
        background: rgba(255,255,255,0.55) !important;
        backdrop-filter: blur(40px) saturate(150%);
        -webkit-backdrop-filter: blur(40px) saturate(150%);
        border: 1px solid rgba(10,10,10,0.08) !important;
        box-shadow:
          inset 0 4px 4px rgba(255,255,255,0.35),
          inset 0 1px 0 rgba(255,255,255,0.55),
          0 12px 40px -12px rgba(25, 71, 209, 0.18) !important;
      }
      html[data-palette="cobalt"] .float-a .text-glow-cyan,
      html[data-palette="cobalt"] .float-b .text-glow-cyan { color: rgb(var(--cyan)) !important; }

      /* Cards hover lift more pronounced on cobalt */
      html[data-palette="cobalt"] .product-card:hover {
        transform: translateY(-4px);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.55),
          0 24px 50px -20px rgba(25, 71, 209, 0.30) !important;
      }

      /* RUO bar on PDP cobalt */
      html[data-palette="cobalt"] .shop-ruo {
        background: rgba(25,71,209,0.08) !important;
        border-color: rgba(25,71,209,0.25) !important;
        color: var(--ink) !important;
      }
      html[data-palette="cobalt"] .shop-ruo-icon { color: rgb(var(--cyan)) !important; }

      /* Marquee + announce text on cobalt */
      html[data-palette="cobalt"] .gridlines { opacity: 0.5; }

      /* Mobile-nav subtle treatments on cobalt */
      html[data-palette="cobalt"] .mnav-cta { background: rgb(var(--cyan)) !important; color: #fff !important; }
      html[data-palette="cobalt"] .nav-burger { color: var(--ink) !important; border-color: rgba(10,10,10,0.12) !important; }

      /* Section eyebrow pill */
      html[data-palette="cobalt"] .eyebrow,
      html[data-palette="cobalt"] .mono.text-glow-cyan,
      html[data-palette="cobalt"] .cmd-group-head { color: rgb(var(--cyan)) !important; }

      /* ============================================================
         COBALT — comprehensive dark→light remap (Cycle 10)
         ============================================================ */

      /* Mega menu panel (inline-styled dark gradient) */
      html[data-palette="cobalt"] [role="menu"] > div {
        background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(244,246,254,0.92) 100%) !important;
        border: 1px solid rgba(10,10,10,0.10) !important;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.65),
          0 30px 80px -20px rgba(25, 71, 209, 0.18) !important;
        backdrop-filter: blur(40px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(40px) saturate(160%) !important;
      }
      html[data-palette="cobalt"] [role="menu"] a { color: var(--ink) !important; }
      html[data-palette="cobalt"] [role="menu"] a:hover { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] [role="menu"] .mono { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] [role="menu"] [style*="border-top"] { border-top-color: rgba(10,10,10,0.08) !important; }
      html[data-palette="cobalt"] [role="menu"] li > a,
      html[data-palette="cobalt"] [role="menu"] ul a { color: var(--muted) !important; }
      html[data-palette="cobalt"] [role="menu"] li > a:hover,
      html[data-palette="cobalt"] [role="menu"] ul a:hover { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] [role="menu"] svg { color: rgb(var(--cyan)) !important; }

      /* Hover for nav-pill items in header (lg+) */
      html[data-palette="cobalt"] .nav-pill { color: var(--muted) !important; }
      html[data-palette="cobalt"] .nav-pill:hover { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .nav-pill::after { background: linear-gradient(90deg, transparent, rgb(var(--cyan)), transparent) !important; }
      html[data-palette="cobalt"] nav a:hover { color: rgb(var(--cyan)) !important; }

      /* Brand logo conic-gradient orb — recolor cobalt + sky */
      html[data-palette="cobalt"] a.flex.items-center span[style*="conic-gradient"] {
        background: conic-gradient(
          from 180deg,
          rgba(25,71,209,0) 0deg,
          rgba(25,71,209,0.85) 90deg,
          rgba(49,154,255,0.65) 180deg,
          rgba(25,71,209,0) 360deg
        ) !important;
      }
      html[data-palette="cobalt"] a.flex.items-center .bg-ink-950 { background: #fff !important; border: 1px solid rgba(25,71,209,0.30); }
      html[data-palette="cobalt"] a.flex.items-center .bg-glow-cyan { background: rgb(var(--cyan)) !important; box-shadow: 0 0 10px rgba(25, 71, 209, 0.38) !important; }
      html[data-palette="cobalt"] a.flex.items-center svg circle[fill="#7fe7ff"] { fill: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] a.flex.items-center svg circle[stroke="#7fe7ff"] { stroke: rgb(var(--cyan)) !important; }

      /* Cart button + wishlist hairline ring on cobalt */
      html[data-palette="cobalt"] button[aria-label*="art"],
      html[data-palette="cobalt"] button[aria-label*="ishlist"],
      html[data-palette="cobalt"] button[aria-label="Search"] {
        background: rgba(255,255,255,0.45) !important;
        border-color: rgba(10,10,10,0.12) !important;
        color: var(--ink) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      html[data-palette="cobalt"] button[aria-label*="art"]:hover,
      html[data-palette="cobalt"] button[aria-label*="ishlist"]:hover,
      html[data-palette="cobalt"] button[aria-label="Search"]:hover { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] button[aria-label*="art"] .bg-glow-cyan { background: rgb(var(--cyan)) !important; color: #fff !important; }

      /* Search trigger pill in nav */
      html[data-palette="cobalt"] header button.hairline {
        background: rgba(255,255,255,0.45) !important;
        border-color: rgba(10,10,10,0.12) !important;
        color: var(--ink) !important;
      }
      html[data-palette="cobalt"] header button.hairline:hover { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] header button.hairline .mono { color: rgba(10,10,10,0.40) !important; }

      /* Marquee track items (originally hardcoded text-white/35) */
      html[data-palette="cobalt"] .marquee-track .mono,
      html[data-palette="cobalt"] .marquee-track span { color: var(--muted) !important; }

      /* Vial SVG hardcoded fills — recolor for cobalt */
      html[data-palette="cobalt"] .vial text[fill="rgba(232,238,247,0.55)"] { fill: rgba(10,10,10,0.55) !important; }
      html[data-palette="cobalt"] .vial text[fill="#fff"] { fill: var(--ink) !important; }
      html[data-palette="cobalt"] .vial rect[fill="rgba(8,12,22,0.55)"] {
        fill: rgba(255,255,255,0.75) !important;
        stroke: rgba(10,10,10,0.10) !important;
      }
      html[data-palette="cobalt"] .vial rect[stroke="rgba(255,255,255,0.22)"] { stroke: rgba(10,10,10,0.18) !important; }
      html[data-palette="cobalt"] .vial rect[stroke="rgba(255,255,255,0.25)"] { stroke: rgba(10,10,10,0.20) !important; }
      html[data-palette="cobalt"] .vial rect[stroke="rgba(255,255,255,0.18)"] { stroke: rgba(10,10,10,0.15) !important; }
      html[data-palette="cobalt"] .vial rect[fill="rgba(255,255,255,0.35)"] { fill: rgba(255,255,255,0.75) !important; }
      html[data-palette="cobalt"] .vial rect[fill="rgba(255,255,255,0.18)"] { fill: rgba(255,255,255,0.50) !important; }
      html[data-palette="cobalt"] .vial rect[fill="rgba(255,255,255,0.08)"] { fill: rgba(255,255,255,0.30) !important; }
      html[data-palette="cobalt"] .vial rect[fill="rgba(255,255,255,0.05)"] { fill: rgba(255,255,255,0.25) !important; }

      /* PDP gallery slide vial fills (different render) */
      html[data-palette="cobalt"] .pdp-gallery-slide svg text[fill="rgba(255,255,255,0.85)"],
      html[data-palette="cobalt"] .pdp-gallery-slide svg text[fill="rgba(255,255,255,0.95)"] { fill: var(--ink) !important; }
      html[data-palette="cobalt"] .pdp-gallery-slide svg text[fill="rgba(255,255,255,0.4)"],
      html[data-palette="cobalt"] .pdp-gallery-slide svg text[fill="rgba(255,255,255,0.6)"] { fill: var(--muted) !important; }
      html[data-palette="cobalt"] .pdp-gallery-slide svg rect[fill="rgba(255,255,255,0.03)"] { fill: rgba(255,255,255,0.55) !important; }
      html[data-palette="cobalt"] .pdp-gallery-slide svg rect[stroke="rgba(255,255,255,0.18)"] { stroke: rgba(10,10,10,0.12) !important; }
      html[data-palette="cobalt"] .pdp-gallery-slide svg path[stroke="rgba(127,170,255,0.85)"] { stroke: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .pdp-gallery-slide svg circle[stroke="rgba(127,170,255,0.5)"] { stroke: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .pdp-gallery-slide svg circle[fill="rgba(8,12,22,0.92)"] { fill: rgba(255,255,255,0.92) !important; }
      html[data-palette="cobalt"] .pdp-gallery-slide svg line[stroke="rgba(255,255,255,0.4)"] { stroke: rgba(10,10,10,0.40) !important; }
      html[data-palette="cobalt"] .pdp-gallery-slide svg line[stroke="rgba(127,170,255,0.3)"] { stroke: rgba(25,71,209,0.30) !important; }

      /* Science deep visual SVGs */
      html[data-palette="cobalt"] .sd-visual svg rect[fill*="url(#cr-grad)"] { opacity: 0.6; }
      html[data-palette="cobalt"] .sd-visual svg line[stroke="rgba(255,255,255,0.05)"] { stroke: rgba(10,10,10,0.06) !important; }
      html[data-palette="cobalt"] .sd-visual svg line[stroke="rgba(127,170,255,0.40)"] { stroke: rgb(var(--cyan)) !important; opacity: 0.6; }
      html[data-palette="cobalt"] .sd-visual svg line[stroke="rgba(255,255,255,0.10)"] { stroke: rgba(10,10,10,0.12) !important; }
      html[data-palette="cobalt"] .sd-visual svg circle[stroke="rgba(127,170,255,0.55)"],
      html[data-palette="cobalt"] .sd-visual svg circle[stroke="rgba(127,170,255,0.30)"] { stroke: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .sd-visual svg circle[fill="rgba(127,170,255,0.85)"] { fill: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .sd-visual svg circle[fill="rgba(255,255,255,0.35)"] { fill: rgba(10,10,10,0.35) !important; }
      html[data-palette="cobalt"] .sd-visual svg text[fill="rgba(255,255,255,0.40)"],
      html[data-palette="cobalt"] .sd-visual svg text[fill="rgba(255,255,255,0.50)"],
      html[data-palette="cobalt"] .sd-visual svg text[fill="rgba(255,255,255,0.65)"] { fill: var(--muted) !important; }
      html[data-palette="cobalt"] .sd-visual svg text[fill="rgba(127,170,255,0.75)"] { fill: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .sd-visual svg line[stroke="rgba(255,255,255,0.20)"] { stroke: rgba(10,10,10,0.20) !important; }
      html[data-palette="cobalt"] .sd-visual svg rect[fill="rgba(127,170,255,0.20)"] { fill: rgba(25,71,209,0.12) !important; }
      html[data-palette="cobalt"] .sd-visual svg rect[stroke="rgba(127,170,255,0.55)"] { stroke: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .sd-visual svg line[stroke="rgba(127,170,255,0.30)"] { stroke: rgb(var(--cyan)) !important; opacity: 0.55; }

      /* Cleanroom gradient stops */
      html[data-palette="cobalt"] #cr-grad stop[stop-color="rgba(127,170,255,0.10)"] { stop-color: rgba(25,71,209,0.10) !important; }
      html[data-palette="cobalt"] #cr-grad stop[stop-color="rgba(127,170,255,0)"] { stop-color: rgba(25,71,209,0) !important; }

      /* Stacks header eyebrow + body */
      html[data-palette="cobalt"] section .reveal.eyebrow { color: rgb(var(--cyan)) !important; }

      /* Cart count badge — bg cobalt text white */
      html[data-palette="cobalt"] button[aria-label*="art"] > span.bg-glow-cyan {
        background: rgb(var(--cyan)) !important;
        color: #fff !important;
        box-shadow: 0 0 8px rgba(25, 71, 209, 0.28) !important;
      }

      /* Scanline glow inside cards */
      html[data-palette="cobalt"] .scanline {
        background: linear-gradient(180deg, transparent, rgba(25,71,209,0.18), transparent) !important;
      }

      /* Stat tile borders, ring pulse */
      html[data-palette="cobalt"] .ring,
      html[data-palette="cobalt"] .pulse { filter: hue-rotate(-30deg); }

      /* Floating sequence text color */
      html[data-palette="cobalt"] .float-a .mono.text-glow-cyan,
      html[data-palette="cobalt"] .float-b .mono.text-glow-cyan { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .float-a .mono.text-white\/55,
      html[data-palette="cobalt"] .float-a .mono.text-white\/40 { color: var(--muted) !important; }

      /* Newsletter input on cobalt outside footer (in case shop newsletter) */
      html[data-palette="cobalt"] input { color: var(--ink) !important; }
      html[data-palette="cobalt"] input::-moz-placeholder { color: rgba(10,10,10,0.40) !important; }
      html[data-palette="cobalt"] input::placeholder { color: rgba(10,10,10,0.40) !important; }

      /* Pdp variant pill — ensure clear ink text */
      html[data-palette="cobalt"] .pdp-variant-pill { color: var(--muted) !important; }
      html[data-palette="cobalt"] .pdp-variant-pill.on { color: var(--ink) !important; }
      html[data-palette="cobalt"] .pdp-variant-size,
      html[data-palette="cobalt"] .pdp-price-from,
      html[data-palette="cobalt"] .pdp-stock,
      html[data-palette="cobalt"] .pdp-price-permg { color: var(--muted) !important; }
      html[data-palette="cobalt"] .pdp-variant-price { color: var(--ink) !important; }

      /* Trust bar / shop ruo icon already cobalt; ensure border-color ok */
      html[data-palette="cobalt"] .trust-strip,
      html[data-palette="cobalt"] section[style*="border-bottom"] { border-bottom-color: rgba(10,10,10,0.10) !important; }
      html[data-palette="cobalt"] section[style*="rgba(127,170,255,0.022)"] {
        background: linear-gradient(180deg, transparent, rgba(25,71,209,0.04), transparent) !important;
      }
      html[data-palette="cobalt"] section .border-t,
      html[data-palette="cobalt"] section .border-b { border-color: rgba(10,10,10,0.10) !important; }

      /* Trust strip svgs on cobalt */
      html[data-palette="cobalt"] section[style*="rgba(25,71,209,0.04)"] svg,
      html[data-palette="cobalt"] section[style*="rgba(127,170,255,0.022)"] svg { color: rgb(var(--cyan)) !important; }

      /* FAQ home button text + accent */
      html[data-palette="cobalt"] .faq-btn { color: var(--ink) !important; }
      html[data-palette="cobalt"] .faq-btn:hover,
      html[data-palette="cobalt"] .faq-row.on .faq-plus { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .faq-plus { color: var(--muted) !important; }
      html[data-palette="cobalt"] .faq-a-inner { color: var(--muted) !important; }
      html[data-palette="cobalt"] .faq-row { border-bottom-color: rgba(10,10,10,0.10) !important; }

      /* Stat tiles + section sub paragraphs */
      html[data-palette="cobalt"] section p.text-white\/55,
      html[data-palette="cobalt"] section p.text-white\/60,
      html[data-palette="cobalt"] section p.text-white\/65 { color: var(--muted) !important; }

      /* Verify section dark blocks if any remain */
      html[data-palette="cobalt"] .glass-soft {
        background: rgba(255,255,255,0.45) !important;
        border: 1px solid rgba(10,10,10,0.08) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
      }

      /* Mobile nav drawer (cobalt) */
      html[data-palette="cobalt"] .mnav-search {
        background: rgba(10,10,10,0.04) !important;
        border-color: rgba(10,10,10,0.10) !important;
        color: var(--ink) !important;
      }
      html[data-palette="cobalt"] .mnav-section { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .mnav-cat-row { color: var(--ink) !important; border-bottom-color: rgba(10,10,10,0.08) !important; }
      html[data-palette="cobalt"] .mnav-cat-row .chev { color: var(--muted); }
      html[data-palette="cobalt"] .mnav-cat-row.on .chev { color: rgb(var(--cyan)); }
      html[data-palette="cobalt"] .mnav-sublist a { color: var(--muted) !important; }
      html[data-palette="cobalt"] .mnav-sublist a:hover { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .mnav-foot { border-top-color: rgba(10,10,10,0.10) !important; }

      /* Drawer line meta/dose colors */
      html[data-palette="cobalt"] .pdrawer-line-cat,
      html[data-palette="cobalt"] .pdrawer-line-dose,
      html[data-palette="cobalt"] .pdrawer-count,
      html[data-palette="cobalt"] .pdrawer-subtotal-label,
      html[data-palette="cobalt"] .pdrawer-meta { color: var(--muted) !important; }
      html[data-palette="cobalt"] .pdrawer-line-mini {
        color: rgb(var(--cyan)) !important;
        border-color: rgba(25,71,209,0.30) !important;
      }
      html[data-palette="cobalt"] .pdrawer-line-mini:hover {
        background: rgba(25,71,209,0.08) !important;
        color: rgb(var(--cyan)) !important;
      }
      html[data-palette="cobalt"] .pdrawer-line-remove { color: rgba(10,10,10,0.40) !important; }
      html[data-palette="cobalt"] .pdrawer-line-remove:hover { color: var(--ink) !important; }
      html[data-palette="cobalt"] .pdrawer-qty { border-color: rgba(10,10,10,0.12) !important; }
      html[data-palette="cobalt"] .pdrawer-qty button { color: var(--ink) !important; }
      html[data-palette="cobalt"] .pdrawer-qty span { color: var(--ink) !important; }
      html[data-palette="cobalt"] .pdrawer-stack-suggest {
        background: rgba(25,71,209,0.06) !important;
        border-color: rgba(25,71,209,0.25) !important;
      }
      html[data-palette="cobalt"] .pdrawer-stack-label { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .pdrawer-stack-cta:hover { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .pdrawer-foot { border-top-color: rgba(10,10,10,0.10) !important; }
      html[data-palette="cobalt"] .pdrawer-share {
        color: var(--ink) !important;
        border-color: rgba(10,10,10,0.15) !important;
      }
      html[data-palette="cobalt"] .pdrawer-close {
        color: var(--ink) !important;
        border-color: rgba(10,10,10,0.15) !important;
      }
      html[data-palette="cobalt"] .pdrawer-empty,
      html[data-palette="cobalt"] .pdrawer-empty svg { color: var(--muted) !important; }

      /* Command palette result rows */
      html[data-palette="cobalt"] .cmd-result.on,
      html[data-palette="cobalt"] .cmd-result:hover { background: rgba(25,71,209,0.08) !important; }
      html[data-palette="cobalt"] .cmd-result-name { color: var(--ink) !important; }
      html[data-palette="cobalt"] .cmd-result-pill { color: var(--ink) !important; border-color: rgba(10,10,10,0.15) !important; }
      html[data-palette="cobalt"] .cmd-result-dose,
      html[data-palette="cobalt"] .cmd-result-chev { color: var(--muted) !important; }
      html[data-palette="cobalt"] .cmd-result:hover .cmd-result-chev { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .cmd-kbd { color: var(--muted) !important; border-color: rgba(10,10,10,0.15) !important; }
      html[data-palette="cobalt"] .cmd-input { color: var(--ink) !important; }
      html[data-palette="cobalt"] .cmd-input::-moz-placeholder { color: var(--muted) !important; }
      html[data-palette="cobalt"] .cmd-input::placeholder { color: var(--muted) !important; }

      /* ── Buscador "liquid cristal" — frosted opaco, legible, premium ──
         El override compartido (.cmd-palette/.pdrawer/.mnav @ 0.55) dejaba el
         panel demasiado transparente: el hero se transparentaba y los textos
         eran ilegibles. Esta regla va DESPUÉS y gana, dándole vidrio esmerilado
         opaco (~0.96) con blur fuerte. Aplica móvil y desktop. */
      html[data-palette="cobalt"] .cmd-palette {
        background: rgba(255,255,255,0.96) !important;
        border: 1px solid rgba(10,10,10,0.06) !important;
        backdrop-filter: blur(48px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(48px) saturate(180%) !important;
        box-shadow:
          inset 0 1px 0 0 rgba(255,255,255,0.8),
          0 24px 70px -24px rgba(10,16,40,0.30) !important;
      }
      html[data-palette="cobalt"] .cmd-input-row {
        background: transparent !important;
        border-bottom: 1px solid rgba(10,10,10,0.07) !important;
      }
      html[data-palette="cobalt"] .cmd-group-head { color: var(--muted) !important; }
      html[data-palette="cobalt"] .cmd-empty { color: var(--muted) !important; }
      /* Oscurecer el velo de fondo para enfocar el panel */
      html[data-palette="cobalt"] .cmd-back {
        background: rgba(10,16,40,0.45) !important;
      }

      /* Hero pill (Q2/26) */
      html[data-palette="cobalt"] .hero-copy .glass-soft .text-white\/70 { color: var(--ink) !important; }
      html[data-palette="cobalt"] .pulse-ring,
      html[data-palette="cobalt"] .animate-pulse { background: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .border-glow-cyan\/60 { border-color: rgba(25,71,209,0.6) !important; }

      /* Stat tile dividers between stats */
      html[data-palette="cobalt"] .hero-stats > div .text-white { color: var(--ink) !important; }

      /* PDP sticky thumb on cobalt */
      html[data-palette="cobalt"] .pdp-sticky {
        background: rgba(255,255,255,0.92) !important;
        border-top-color: rgba(10,10,10,0.10) !important;
        backdrop-filter: blur(20px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
      }
      html[data-palette="cobalt"] .pdp-sticky-thumb {
        background: rgba(25,71,209,0.04) !important;
        border-color: rgba(10,10,10,0.10) !important;
      }
      html[data-palette="cobalt"] .pdp-sticky-name { color: var(--ink) !important; }
      html[data-palette="cobalt"] .pdp-sticky-price { color: var(--muted) !important; }
      html[data-palette="cobalt"] .pdp-sticky-cta { background: rgb(var(--cyan)) !important; color: #fff !important; }

      /* PDP tabs container bg on light mode + clearer ink color */
      html[data-palette="cobalt"] .pdp-tabs-sticky { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
      html[data-palette="cobalt"] .pdp-tab { color: var(--muted) !important; }
      html[data-palette="cobalt"] .pdp-tab:hover { color: var(--ink) !important; }
      html[data-palette="cobalt"] .pdp-tab.on { color: var(--ink) !important; }
      html[data-palette="cobalt"] .pdp-tab-content p { color: var(--ink) !important; }
      html[data-palette="cobalt"] .pdp-bullet { color: var(--ink) !important; }
      html[data-palette="cobalt"] .pdp-cite-text { color: var(--ink) !important; }
      html[data-palette="cobalt"] .pdp-cite-text em { color: var(--muted) !important; }
      html[data-palette="cobalt"] .pdp-cite-num { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .pdp-cite-doi { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .pdp-know-lead { color: var(--ink) !important; }
      html[data-palette="cobalt"] .pdp-know-studies li { color: var(--ink) !important; }
      html[data-palette="cobalt"] .pdp-know-note { color: var(--muted) !important; }
      html[data-palette="cobalt"] .pdp-know-chip { color: var(--ink) !important; background: rgba(0,0,0,0.03) !important; border-color: var(--line) !important; }
      html[data-palette="cobalt"] .pdp-evd-preclinical { background: #F1F2F4 !important; color: #6B6B6B !important; border-color: #E5E7EB !important; }
      html[data-palette="cobalt"] .pdp-evd-reagent { background: #E6FAFD !important; color: #0E7490 !important; border-color: #A5E9F2 !important; }
      html[data-palette="cobalt"] .pdp-trust-row { color: var(--muted) !important; }
      html[data-palette="cobalt"] .pdp-trust-row svg { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .pdp-reassure { color: var(--muted) !important; }
      html[data-palette="cobalt"] .pdp-reassure svg { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .pdp-faq-q { color: var(--ink) !important; }
      html[data-palette="cobalt"] .pdp-faq-q:hover { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .pdp-faq-plus { color: var(--muted) !important; }
      html[data-palette="cobalt"] .pdp-faq-a-inner { color: var(--muted) !important; }
      html[data-palette="cobalt"] .pdp-faq-item { border-bottom-color: rgba(10,10,10,0.10) !important; }
      html[data-palette="cobalt"] .pdp-spec td:first-child { color: var(--muted) !important; }
      html[data-palette="cobalt"] .pdp-spec td:last-child { color: var(--ink) !important; }
      html[data-palette="cobalt"] .pdp-spec td { border-bottom-color: rgba(10,10,10,0.10) !important; }
      html[data-palette="cobalt"] .pdp-cold-note {
        background: rgba(25,71,209,0.06) !important;
        border-color: rgba(25,71,209,0.18) !important;
        color: var(--ink) !important;
      }

      /* Shop catalog page light mode */
      html[data-palette="cobalt"] .shop-page,
      html[data-palette="cobalt"] .shop-card {
        color: var(--ink);
      }
      html[data-palette="cobalt"] .shop-card {
        background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,250,255,0.68) 100%) !important;
        border-color: rgba(25,71,209,0.16) !important; /* CYCLE-C4: borde azulado base */
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.90),
          0 2px 8px rgba(25,71,209,0.05),
          0 14px 34px -20px rgba(25,71,209,0.16);
      }
      html[data-palette="cobalt"] .shop-card:hover {
        background: rgba(255,255,255,0.97) !important;
        border-color: rgba(25,71,209,0.45) !important;
        transform: translateY(-6px);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.95),
          0 6px 16px rgba(25,71,209,0.10),
          0 30px 60px -22px rgba(25,71,209,0.30);
      }
      /* CYCLE-C4 — Efecto casilla premium: línea de acento + shine sweep */
      html[data-palette="cobalt"] .shop-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 2px;
        background: linear-gradient(90deg, #1947D1, #7FAAFF);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 3;
        pointer-events: none;
      }
      html[data-palette="cobalt"] .shop-card:hover::before { transform: scaleX(1); }
      html[data-palette="cobalt"] .shop-card::after {
        content: '';
        position: absolute;
        top: -20%; bottom: -20%;
        left: -45%;
        width: 38%;
        background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.42) 50%, transparent 100%);
        transform: translateX(-120%) skewX(-16deg);
        opacity: 0;
        pointer-events: none;
        z-index: 2;
      }
      html[data-palette="cobalt"] .shop-card:hover::after {
        opacity: 1;
        animation: lp-shine-sweep 850ms cubic-bezier(0.4, 0, 0.2, 1) 60ms both;
      }
      @keyframes lp-shine-sweep {
        from { transform: translateX(-120%) skewX(-16deg); }
        to   { transform: translateX(480%) skewX(-16deg); }
      }
      @media (prefers-reduced-motion: reduce) {
        html[data-palette="cobalt"] .shop-card::before,
        html[data-palette="cobalt"] .shop-card::after { transition: none; animation: none; }
      }
      html[data-palette="cobalt"] .shop-crumbs a,
      html[data-palette="cobalt"] .shop-crumbs { color: var(--muted) !important; }
      html[data-palette="cobalt"] .shop-crumbs > span:not(.shop-crumb-sep):last-child { color: var(--ink) !important; }
      html[data-palette="cobalt"] .shop-card-name { color: var(--ink) !important; }
      html[data-palette="cobalt"] .shop-card-name:hover { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .shop-card-tag,
      html[data-palette="cobalt"] .shop-card-meta,
      html[data-palette="cobalt"] .shop-card-cat,
      html[data-palette="cobalt"] .shop-card-code,
      html[data-palette="cobalt"] .shop-card-price-label { color: var(--muted) !important; }
      html[data-palette="cobalt"] .shop-card-price { color: var(--ink) !important; }
      html[data-palette="cobalt"] .shop-card-add { border-color: rgba(10,10,10,0.15) !important; color: var(--ink) !important; }
      html[data-palette="cobalt"] .shop-card-add:hover { background: rgb(var(--cyan)) !important; color: #fff !important; border-color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .shop-card-stock { color: rgb(var(--cyan)) !important; border-color: rgba(25,71,209,0.30) !important; background: rgba(25,71,209,0.06) !important; }
      html[data-palette="cobalt"] .shop-eyebrow,
      html[data-palette="cobalt"] .shop-display-light { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .shop-display { color: var(--ink) !important; }
      html[data-palette="cobalt"] .shop-page-sub { color: var(--muted) !important; }
      html[data-palette="cobalt"] .shop-page-sub a { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .shop-chip { color: var(--muted) !important; border-color: rgba(10,10,10,0.12) !important; }
      html[data-palette="cobalt"] .shop-chip:hover { color: var(--ink) !important; border-color: rgba(25,71,209,0.35) !important; }
      html[data-palette="cobalt"] .shop-chip.on { background: rgb(var(--cyan)) !important; color: #fff !important; border-color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .shop-toolbar { border-bottom-color: rgba(10,10,10,0.10) !important; }
      html[data-palette="cobalt"] .shop-toolbar-search input,
      html[data-palette="cobalt"] .shop-toolbar-sort select { color: var(--ink) !important; }
      html[data-palette="cobalt"] .shop-toolbar-search,
      html[data-palette="cobalt"] .shop-toolbar-sort select { border-color: rgba(10,10,10,0.12) !important; }
      html[data-palette="cobalt"] .shop-result-count { color: var(--muted) !important; }

      /* RUO bar PDP */
      html[data-palette="cobalt"] .shop-ruo { color: var(--ink) !important; }

      /* PDP buy box section title + specs */
      html[data-palette="cobalt"] .shop-pdp-section-title,
      html[data-palette="cobalt"] .shop-pdp-specs,
      html[data-palette="cobalt"] .shop-pdp-cat { color: var(--muted) !important; }
      html[data-palette="cobalt"] .shop-pdp-cat { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .shop-pdp-title { color: var(--ink) !important; }
      html[data-palette="cobalt"] .shop-pdp-tag { color: var(--muted) !important; }
      html[data-palette="cobalt"] .shop-pdp-variant { border-color: rgba(10,10,10,0.12) !important; color: var(--ink) !important; background: rgba(255,255,255,0.45) !important; }
      html[data-palette="cobalt"] .shop-pdp-variant.on { border-color: rgb(var(--cyan)) !important; background: rgba(25,71,209,0.06) !important; }
      html[data-palette="cobalt"] .shop-pdp-variant-radio { border-color: rgba(10,10,10,0.20) !important; }
      html[data-palette="cobalt"] .shop-pdp-variant.on .shop-pdp-variant-radio::after { background: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .shop-pdp-variant-label,
      html[data-palette="cobalt"] .shop-pdp-variant-price { color: var(--ink) !important; }
      html[data-palette="cobalt"] .shop-qty { background: rgba(255,255,255,0.45) !important; border-color: rgba(10,10,10,0.12) !important; }
      html[data-palette="cobalt"] .shop-qty button,
      html[data-palette="cobalt"] .shop-qty span { color: var(--ink) !important; }
      html[data-palette="cobalt"] .shop-qty button:hover { background: rgba(25,71,209,0.08) !important; }
      html[data-palette="cobalt"] .shop-pdp-trust li { color: var(--ink) !important; }
      html[data-palette="cobalt"] .shop-trust-check { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .shop-pdp-coa-link { background: rgba(255,255,255,0.45) !important; border-color: rgba(10,10,10,0.12) !important; color: var(--ink) !important; }
      html[data-palette="cobalt"] .shop-pdp-coa-link:hover { border-color: rgba(25,71,209,0.35) !important; }
      html[data-palette="cobalt"] .shop-pdp-coa-link .mono { color: var(--muted) !important; }
      html[data-palette="cobalt"] .shop-pdp-tab.on { color: var(--ink) !important; border-bottom-color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] .shop-pdp-tab { color: var(--muted) !important; }
      html[data-palette="cobalt"] .shop-pdp-tablist { border-bottom-color: rgba(10,10,10,0.10) !important; }
      html[data-palette="cobalt"] .shop-prose,
      html[data-palette="cobalt"] .shop-prose p { color: var(--ink) !important; }
      html[data-palette="cobalt"] .shop-prose h3 { color: var(--ink) !important; }
      html[data-palette="cobalt"] .shop-prose-note { background: rgba(25,71,209,0.06) !important; border-color: rgba(25,71,209,0.18) !important; color: var(--ink) !important; }
      html[data-palette="cobalt"] .shop-spec-table td { border-bottom-color: rgba(10,10,10,0.10) !important; }
      html[data-palette="cobalt"] .shop-spec-table td:first-child { color: var(--muted) !important; }
      html[data-palette="cobalt"] .shop-spec-table td:last-child { color: var(--ink) !important; }
      html[data-palette="cobalt"] .shop-section-title { color: var(--ink) !important; }

      /* All section eyebrow rows */
      html[data-palette="cobalt"] .eyebrow { color: rgb(var(--cyan)) !important; }

      /* Catalog "View all 19 compounds" link */
      html[data-palette="cobalt"] a.text-white\/55 { color: var(--muted) !important; }
      html[data-palette="cobalt"] a.text-white\/55:hover { color: rgb(var(--cyan)) !important; }
      html[data-palette="cobalt"] a.text-white\/30 { color: rgba(10,10,10,0.45) !important; }
      html[data-palette="cobalt"] a.text-white { color: var(--ink) !important; }
      html[data-palette="cobalt"] a.text-white:hover { color: rgb(var(--cyan)) !important; }

      /* Tweaks panel — keep ink readable on cobalt (its own bg) */
      /* (panel uses its own beige; no override needed) */

      /* Section "Sequence integrity" / "Active" headlines color override */
      html[data-palette="cobalt"] .display.text-3xl,
      html[data-palette="cobalt"] .display.text-2xl,
      html[data-palette="cobalt"] .display.text-xl { color: var(--ink) !important; }

      /* Cards in dark sections inside cobalt mode (Science deep visuals) */
      html[data-palette="cobalt"] .glass.rounded-2xl { background: rgba(255,255,255,0.55) !important; }

      /* Final fallback — explicit white text inside footer/cta isn't accidentally inked */
      html[data-palette="cobalt"] footer * { color: inherit; }
      html[data-palette="cobalt"] footer h4 { color: #fff !important; }
      html[data-palette="cobalt"] .stack-pill,
      html[data-palette="cobalt"] .cat-badge { color: var(--ink) !important; border-color: rgba(10,10,10,0.15) !important; }
      html[data-palette="cobalt"] .card-micro,
      html[data-palette="cobalt"] .pdp-tagline,
      html[data-palette="cobalt"] .pdp-step-desc,
      html[data-palette="cobalt"] .pdp-ship-info,
      html[data-palette="cobalt"] .pdp-mech-desc { color: var(--muted) !important; }
      html[data-palette="cobalt"] .pdp-h1,
      html[data-palette="cobalt"] .pdp-mech-title,
      html[data-palette="cobalt"] .pdp-step-title,
      html[data-palette="cobalt"] .pdp-coa-batch,
      html[data-palette="cobalt"] .pdp-price-big,
      html[data-palette="cobalt"] .pdp-stack-card-name,
      html[data-palette="cobalt"] .pdp-faq-q,
      html[data-palette="cobalt"] .review-name,
      html[data-palette="cobalt"] .sd-title,
      html[data-palette="cobalt"] .pdrawer-title h3,
      html[data-palette="cobalt"] .pdrawer-line-name,
      html[data-palette="cobalt"] .pdrawer-subtotal,
      html[data-palette="cobalt"] .pdrawer-line-price,
      html[data-palette="cobalt"] .foot-trust-label { color: var(--ink) !important; }

      /* SVG icons should pick up ink color where currentColor was white */
      html[data-palette="cobalt"] svg[stroke="currentColor"] { color: rgb(var(--cyan)); }
      html[data-palette="cobalt"] .nav-burger { color: var(--ink); }

      /* Hero glow orb FX — cobalt-only flourish */
      html[data-palette="cobalt"] .hero::before {
        content: '';
        position: absolute;
        right: -8%; top: 8%;
        width: 480px; height: 480px; border-radius: 50%;
        background: radial-gradient(circle, rgba(49,154,255,0.45), rgba(96,177,255,0) 65%);
        filter: blur(40px);
        pointer-events: none;
        z-index: 0;
        animation: cobaltOrb 18s ease-in-out infinite;
      }
      @keyframes cobaltOrb {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50%      { transform: translate(-20px, 20px) scale(1.08); }
      }
      @media (prefers-reduced-motion: reduce) {
        html[data-palette="cobalt"] .hero::before { animation: none; }
      }

      /* Trust strip border for cobalt */
      html[data-palette="cobalt"] .trust-strip,
      html[data-palette="cobalt"] .cites-strip,
      html[data-palette="cobalt"] .foot-trust { border-color: rgba(10,10,10,0.08) !important; }

      /* Fix: TrustStrip body text uses text-white/60 which is invisible
         on cobalt's light background — override to readable ink color */
      html[data-palette="cobalt"] section[style*="rgba(127,170,255,0.022)"] p {
        color: var(--muted, #6B7280) !important;
      }
      html[data-palette="cobalt"] section[style*="rgba(127,170,255,0.022)"] h3 {
        color: var(--ink, #0A0A0A) !important;
      }
      html[data-palette="cobalt"] section[style*="rgba(127,170,255,0.022)"] {
        border-bottom-color: rgba(10,10,10,0.07) !important;
      }

      /* SLATE — corporate, blue-grey */
      html[data-palette="slate"] {
        --bg: #0a0e14; --ink: #e2e8f0; --muted: #8b95a8;
        --hair: rgba(180,200,230,0.08);
        --cyan: 148, 163, 184; --violet: 203, 213, 225;
      }

      /* PAPER — LIGHT mode, cream + navy */
      html[data-palette="paper"] {
        --bg: #faf7f0; --ink: #14110b; --muted: #5c5648;
        --hair: rgba(20,17,11,0.10);
        --cyan: 30, 58, 95; --violet: 99, 102, 241;
      }
      html[data-palette="paper"] body { background: var(--bg); color: var(--ink); }
      html[data-palette="paper"] .text-glow-cyan { color: rgb(var(--cyan)) !important; text-shadow: none !important; }
      html[data-palette="paper"] .text-ink-200, html[data-palette="paper"] .text-white { color: var(--ink) !important; }
      html[data-palette="paper"] .text-ink-400, html[data-palette="paper"] .text-ink-500 { color: var(--muted) !important; }
      html[data-palette="paper"] .border-white\/10, html[data-palette="paper"] .border-white\/5,
      html[data-palette="paper"] .border-white\/20 { border-color: var(--hair) !important; }
      html[data-palette="paper"] .bg-white\/5, html[data-palette="paper"] .bg-white\/10 { background: rgba(20,17,11,0.04) !important; }
      html[data-palette="paper"] .field { opacity: 0.35; }

      /* IVORY — LIGHT mode, ivory + bronze */
      html[data-palette="ivory"] {
        --bg: #f5efe2; --ink: #1f1810; --muted: #6b5f4d;
        --hair: rgba(31,24,16,0.10);
        --cyan: 146, 64, 14; --violet: 180, 83, 9;
      }
      html[data-palette="ivory"] body { background: var(--bg); color: var(--ink); }
      html[data-palette="ivory"] .text-glow-cyan { color: rgb(var(--cyan)) !important; text-shadow: none !important; }
      html[data-palette="ivory"] .text-ink-200, html[data-palette="ivory"] .text-white { color: var(--ink) !important; }
      html[data-palette="ivory"] .text-ink-400, html[data-palette="ivory"] .text-ink-500 { color: var(--muted) !important; }
      html[data-palette="ivory"] .border-white\/10, html[data-palette="ivory"] .border-white\/5,
      html[data-palette="ivory"] .border-white\/20 { border-color: var(--hair) !important; }
      html[data-palette="ivory"] .bg-white\/5, html[data-palette="ivory"] .bg-white\/10 { background: rgba(31,24,16,0.04) !important; }
      html[data-palette="ivory"] .field { opacity: 0.3; }

      /* Foreground accents — explicit swaps for utilities that don't drive off --cyan */
      html[data-palette="violet"]   .text-glow-cyan { color: #a78bfa !important; }
      html[data-palette="emerald"]  .text-glow-cyan { color: #6ee7b7 !important; }
      html[data-palette="amber"]    .text-glow-cyan { color: #fbbf76 !important; }
      html[data-palette="magenta"]  .text-glow-cyan { color: #ff7fce !important; }
      html[data-palette="mono"]     .text-glow-cyan { color: #e5e7eb !important; }
      html[data-palette="crimson"]  .text-glow-cyan { color: #f87171 !important; }
      html[data-palette="ocean"]    .text-glow-cyan { color: #38bdf8 !important; }
      html[data-palette="acid"]     .text-glow-cyan { color: #bef264 !important; }
      html[data-palette="sunset"]   .text-glow-cyan { color: #fb7185 !important; }
      html[data-palette="slate"]    .text-glow-cyan { color: #cbd5e1 !important; }

      html[data-palette="violet"]   .bg-glow-cyan { background: #a78bfa !important; box-shadow: 0 0 10px #a78bfa; }
      html[data-palette="emerald"]  .bg-glow-cyan { background: #6ee7b7 !important; box-shadow: 0 0 10px #6ee7b7; }
      html[data-palette="amber"]    .bg-glow-cyan { background: #fbbf76 !important; box-shadow: 0 0 10px #fbbf76; }
      html[data-palette="magenta"]  .bg-glow-cyan { background: #ff7fce !important; box-shadow: 0 0 10px #ff7fce; }
      html[data-palette="mono"]     .bg-glow-cyan { background: #e5e7eb !important; box-shadow: 0 0 10px #e5e7eb; }
      html[data-palette="crimson"]  .bg-glow-cyan { background: #f87171 !important; box-shadow: 0 0 10px #f87171; }
      html[data-palette="ocean"]    .bg-glow-cyan { background: #38bdf8 !important; box-shadow: 0 0 10px #38bdf8; }
      html[data-palette="acid"]     .bg-glow-cyan { background: #bef264 !important; box-shadow: 0 0 10px #bef264; }
      html[data-palette="sunset"]   .bg-glow-cyan { background: #fb7185 !important; box-shadow: 0 0 10px #fb7185; }
      html[data-palette="slate"]    .bg-glow-cyan { background: #cbd5e1 !important; box-shadow: 0 0 10px #cbd5e1; }
      html[data-palette="paper"]    .bg-glow-cyan { background: #1e3a5f !important; box-shadow: 0 0 10px rgba(30,58,95,0.6); }
      html[data-palette="ivory"]    .bg-glow-cyan { background: #92400e !important; box-shadow: 0 0 10px rgba(146,64,14,0.6); }

      html[data-palette="violet"]   .hover\:bg-glow-ice:hover { background: #d4c4ff !important; }
      html[data-palette="emerald"]  .hover\:bg-glow-ice:hover { background: #c5f9e0 !important; }
      html[data-palette="amber"]    .hover\:bg-glow-ice:hover { background: #ffe5b4 !important; }
      html[data-palette="magenta"]  .hover\:bg-glow-ice:hover { background: #ffc6e6 !important; }
      html[data-palette="mono"]     .hover\:bg-glow-ice:hover { background: #f0f1f5 !important; }
      html[data-palette="crimson"]  .hover\:bg-glow-ice:hover { background: #fecaca !important; }
      html[data-palette="ocean"]    .hover\:bg-glow-ice:hover { background: #bae6fd !important; }
      html[data-palette="acid"]     .hover\:bg-glow-ice:hover { background: #ecfccb !important; }
      html[data-palette="sunset"]   .hover\:bg-glow-ice:hover { background: #fecdd3 !important; }
      html[data-palette="slate"]    .hover\:bg-glow-ice:hover { background: #e2e8f0 !important; }
      html[data-palette="paper"]    .hover\:bg-glow-ice:hover { background: #14110b !important; color: #faf7f0 !important; }
      html[data-palette="ivory"]    .hover\:bg-glow-ice:hover { background: #1f1810 !important; color: #f5efe2 !important; }

      /* ---- Type: display font swap ------------------------------ */
      html[data-type="fraunces"]      .display { font-family: "Fraunces", "Inter Tight", serif; font-weight: 300; letter-spacing: -0.035em; }
      html[data-type="fraunces"]      .display .italic { font-style: italic; }
      html[data-type="space-grotesk"] .display { font-family: "Space Grotesk", "Inter Tight", sans-serif; font-weight: 300; letter-spacing: -0.04em; }
      html[data-type="sora"]          .display { font-family: "Sora", "Inter Tight", sans-serif; font-weight: 400; letter-spacing: -0.035em; }
      html[data-type="sora"]          { font-family: "Sora", sans-serif; }
      html[data-type="space-grotesk"] body { font-family: "Space Grotesk", sans-serif; }

      /* ---- Cards: product-card variants ------------------------- */
      html[data-cards="minimal"] .product-card {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: none;
        border-radius: 16px;
        padding: 20px;
      }
      html[data-cards="minimal"] .product-card .vial-grid { display: none; }
      html[data-cards="minimal"] .product-card .vial-glow { opacity: 0.25; }

      html[data-cards="lab"] .product-card {
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.015);
      }
      html[data-cards="lab"] .product-card .vial-wrap { border-radius: 4px; }
      html[data-cards="lab"] .product-card h3 {
        font-family: "JetBrains Mono", monospace;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      html[data-cards="frosted"] .product-card {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
        backdrop-filter: blur(40px) saturate(180%);
        -webkit-backdrop-filter: blur(40px) saturate(180%);
      }

      /* ---- Motion: animation intensity -------------------------- */
      html[data-motion="smooth"] .reveal {
        transition-duration: 700ms;
        filter: none;
        transform: translateY(16px);
      }
      html[data-motion="reduced"] .reveal {
        transition-duration: 280ms;
        transform: translateY(6px);
        filter: none;
      }
      html[data-motion="reduced"] .float-a,
      html[data-motion="reduced"] .float-b,
      html[data-motion="reduced"] .drift,
      html[data-motion="reduced"] .rotate-slow,
      html[data-motion="reduced"] .scanline,
      html[data-motion="reduced"] .marquee-track { animation: none; }

      html[data-motion="dramatic"] .reveal {
        transition-duration: 1500ms;
        transform: translateY(48px) scale(0.98);
        filter: blur(10px);
      }
      html[data-motion="dramatic"] .reveal.in {
        transform: translateY(0) scale(1);
      }

      /* ---- FX: ambient overlays --------------------------------- */
      html[data-fx="clean"] .grain { display: none; }
      html[data-fx="clean"] .gridlines { display: none; }
      html[data-fx="clean"] .field::before { opacity: 0.6; }

      html[data-fx="grid-heavy"] .gridlines {
        background-image:
          linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
        background-size: 64px 64px;
      }

      html[data-fx="noise-heavy"] .grain { opacity: 0.14; }

      html[data-fx="aurora"] .field::before {
        background:
          radial-gradient(50% 35% at 20% 10%, rgba(var(--cyan), 0.35), transparent 60%),
          radial-gradient(45% 35% at 80% 0%, rgba(var(--violet), 0.30), transparent 65%),
          radial-gradient(70% 50% at 50% 110%, rgba(var(--cyan), 0.18), transparent 60%);
      }

      /* ---- Hero variants ---------------------------------------- */
      html[data-hero="minimalist"] .hero-visual { display: none; }
      html[data-hero="minimalist"] .hero-grid { grid-template-columns: 1fr; }
      html[data-hero="minimalist"] .hero-copy { max-width: 900px; margin: 0 auto; text-align: center; }
      html[data-hero="minimalist"] .hero-copy .hero-actions { justify-content: center; }
      html[data-hero="minimalist"] .hero-copy .hero-stats { margin-left: auto; margin-right: auto; }

      html[data-hero="centered"] .hero-grid { grid-template-columns: 1fr; gap: 60px; }
      html[data-hero="centered"] .hero-copy { text-align: center; max-width: 920px; margin: 0 auto; }
      html[data-hero="centered"] .hero-copy .hero-actions { justify-content: center; }
      html[data-hero="centered"] .hero-copy .hero-stats { margin-left: auto; margin-right: auto; }
      html[data-hero="centered"] .hero-visual { max-width: 520px; margin: 0 auto; height: 480px; }

      /* ============================================================
         Hero mini-cards (Cycle 6 — sells products, not lab equipment)
         ============================================================ */
      .hero-mini-card {
        display: block;
        padding: 20px;
        border: 1px solid rgba(10,10,10,0.10);
        border-radius: 16px;
        background: rgba(255,255,255,0.55);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        text-decoration: none;
        color: inherit;
        transition:
          transform 240ms var(--ease-cinema),
          box-shadow 240ms var(--ease-cinema),
          border-color 240ms var(--ease-cinema),
          background-color 240ms var(--ease-cinema);
      }
      .hero-mini-card:hover {
        transform: translateY(-2px);
        border-color: #1947D1;
        background: rgba(255,255,255,0.72);
        box-shadow: 0 12px 32px rgba(25, 71, 209, 0.10);
      }
      .hero-mini-card-eyebrow {
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.20em;
        text-transform: uppercase;
        color: #6B6B6B;
        opacity: 0.70;
        margin-bottom: 12px;
      }
      .hero-mini-card-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
      }
      .hero-mini-card-name {
        font-family: "Inter Tight", sans-serif;
        font-size: 22px;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: #0A0A0A;
        line-height: 1.1;
      }
      .hero-mini-card-tag {
        font-family: "Inter Tight", sans-serif;
        font-size: 13.5px;
        color: #6B6B6B;
        line-height: 1.4;
        margin-top: 6px;
      }
      .hero-mini-card-price {
        display: flex; align-items: baseline; gap: 8px;
        white-space: nowrap;
      }
      .hero-mini-card-old {
        font-family: "JetBrains Mono", monospace;
        font-size: 12px;
        color: rgba(10,10,10,0.40);
        text-decoration: line-through;
      }
      .hero-mini-card-now {
        font-family: "Inter Tight", sans-serif;
        font-size: 22px;
        font-weight: 500;
        color: #1947D1;
        letter-spacing: -0.02em;
        line-height: 1;
      }
      .hero-mini-card-cta {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid rgba(10,10,10,0.06);
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #1947D1;
      }
      /* Dark palette fallback (non-cobalt) — keep cards legible on dark bg */
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .hero-mini-card {
        background: rgba(255,255,255,0.04);
        border-color: rgba(255,255,255,0.10);
      }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .hero-mini-card:hover {
        background: rgba(255,255,255,0.06);
      }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .hero-mini-card-name { color: #fff; }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .hero-mini-card-tag { color: rgba(255,255,255,0.55); }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .hero-mini-card-eyebrow { color: rgba(255,255,255,0.55); }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .hero-mini-card-old { color: rgba(255,255,255,0.30); }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .hero-mini-card-cta {
        border-top-color: rgba(255,255,255,0.08);
        color: #7fe7ff;
      }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .hero-mini-card-now { color: #fff; }

      @media (max-width: 1023px) {
        .hero-visual { height: auto !important; max-height: none !important; }
      }

      /* ============================================================
         Hero featured product render (Retatrutide 10mg)
         -----------------------------------------------------------
         The PNG already ships with studio lighting + a reflective
         floor. Our job here is only to extend that environment
         outward into the page — pearl-grey wash, cold-white
         diffusion, faint cobalt bloom, and a continuation floor
         that picks up where the render's surface ends.

         No card, no border, no rectangle around the render.
         ============================================================ */
      .home-hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
      }
      .hero-visual-product {
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        z-index: 2;
      }
      .home-hero .hero-copy { z-index: 1; }
      .hero-product-figure {
        display: block;
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        text-decoration: none;
        color: inherit;
        z-index: 2;
        /* keep render visually anchored to ambient floor — no rectangle */
        background: transparent;
        border: 0;
        box-shadow: none;
      }

      /* Layered atmosphere behind the render.
         Three stacked radial fields blurred together = soft mist. */
      .hero-product-glow {
        position: absolute;
        inset: -18% -22% -22% -22%;
        z-index: 0;
        pointer-events: none;
        background:
          /* faint cobalt bloom, off-center upper-right (matches render lighting) */
          radial-gradient(
            55% 50% at 62% 38%,
            rgba(25, 71, 209, 0.16) 0%,
            rgba(25, 71, 209, 0.07) 32%,
            rgba(25, 71, 209, 0) 70%
          ),
          /* cool pearl-white core halo around product */
          radial-gradient(
            65% 60% at 50% 48%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(244, 247, 252, 0.55) 45%,
            rgba(232, 237, 248, 0) 78%
          ),
          /* secondary cobalt diffusion, lower-left of product */
          radial-gradient(
            50% 45% at 28% 72%,
            rgba(63, 110, 220, 0.10) 0%,
            rgba(63, 110, 220, 0) 70%
          );
        filter: blur(8px);
        opacity: 0.95;
      }
      /* very slow breathing — never enough to feel "animated", just alive */
      @keyframes hero-glow-breathe {
        0%, 100% { opacity: 0.92; transform: scale(1); }
        50%      { opacity: 1;    transform: scale(1.02); }
      }
      .hero-product-glow {
        animation: hero-glow-breathe 9s ease-in-out infinite;
      }

      /* The render itself: no background, no border, soft drift only.
         The PNG already carries its own studio shadow + floor reflection
         — we add only a whisper of cold ambient light around it so the
         edges fully dissolve into the page. */
      .hero-product-img {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        max-height: 640px;
        -o-object-fit: contain;
           object-fit: contain;
        background: transparent;
        z-index: 1;
        /* True transparent PNG — no mask needed. Soft cool drop-shadow
           keeps the product grounded in the stela environment. */
        filter:
          drop-shadow(0 12px 28px rgba(25, 71, 209, 0.10))
          drop-shadow(0 30px 60px rgba(25, 71, 209, 0.06))
          drop-shadow(0 60px 90px rgba(20, 40, 90, 0.05));
        animation:
          hero-product-enter 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) both,
          hero-product-float 9s ease-in-out 1100ms infinite;
      }
      @keyframes hero-product-enter {
        from { opacity: 0; transform: translateY(14px) scale(0.985); }
        to   { opacity: 1; transform: translateY(0)    scale(1);     }
      }
      @keyframes hero-product-float {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-8px); }
      }
      @media (prefers-reduced-motion: reduce) {
        .hero-product-img { animation: none; }
        .hero-product-glow { animation: none; }
      }

      /* Caption — no card, no border, no backdrop blur.
         Pure typographic mark sitting on the ambient floor below
         the render so the render itself reads as the only object. */
      .hero-product-caption {
        position: relative;
        display: none; /* hidden by default — surfaced only at lg+ */
        flex-direction: column;
        gap: 6px;
        margin-top: 18px;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 0;
        box-shadow: none;
        text-align: left;
        z-index: 3;
      }
      .hero-product-caption-eyebrow {
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.22em;
        color: rgba(25, 71, 209, 0.85);
        text-transform: uppercase;
      }
      .hero-product-caption-name {
        font-family: "Playfair Display", Georgia, serif;
        font-style: italic;
        font-weight: 500;
        font-size: 17px;
        color: #0A0A0A;
        line-height: 1;
      }
      .hero-product-caption-cta {
        font-family: "Inter Tight", sans-serif;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.04em;
        color: rgba(25, 71, 209, 0.85);
        margin-top: 2px;
      }
      @media (min-width: 1024px) {
        .hero-product-caption { display: inline-flex; }
      }

      /* Desktop layout: cap text width so headline never crosses into render */
      @media (min-width: 1024px) {
        .home-hero .hero-copy { max-width: min(560px, 46vw); }
        .home-hero .hero-product-img { max-height: 600px; }

        /* Rebalance hero columns: 45% copy / 55% visual (vs default 5/12 = 41.7%) */
        .home-hero .lg\:grid-cols-12 {
          grid-template-columns: 45fr 55fr !important;
        }
        .home-hero .lg\:col-span-5 { grid-column: 1 / 2; }
        .home-hero .lg\:col-span-7 { grid-column: 2 / 3; }
      }

      /* =========================================================
         HERO — status pill, CTAs, trust bar, stats
         ========================================================= */

      .hero-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        border-radius: 99px;
        background: rgba(25, 71, 209, 0.06);
        border: 1px solid rgba(25, 71, 209, 0.14);
        font-family: "Inter Tight", sans-serif;
        font-size: 11.5px;
        font-weight: 500;
        color: #1947D1;
        letter-spacing: 0.04em;
      }
      .hero-status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #1947D1;
        flex-shrink: 0;
        animation: pulse-dot 2.4s ease-in-out infinite;
      }
      @keyframes pulse-dot {
        0%, 100% { opacity: 1; transform: scale(1); }
        50%       { opacity: 0.5; transform: scale(0.75); }
      }

      /* ── Dots: hidden (navegación por flechas es suficiente) ── */
      .hero-avatar-dots { display: none !important; }

      .hero-cta-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 13px 28px;
        border-radius: 99px;
        background: linear-gradient(180deg, #2E5BE0 0%, #1947D1 55%, #1436A9 100%);
        color: #fff;
        font-family: "Inter Tight", sans-serif;
        font-size: 13.5px;
        font-weight: 500;
        letter-spacing: -0.01em;
        transition: background 300ms cubic-bezier(0.34, 1.36, 0.64, 1),
                    transform  300ms cubic-bezier(0.34, 1.36, 0.64, 1),
                    box-shadow 300ms cubic-bezier(0.34, 1.36, 0.64, 1);
        box-shadow: 0 2px 12px rgba(25, 71, 209, 0.30);
      }
      .hero-cta-primary:hover {
        background: linear-gradient(180deg, #2450D6 0%, #1539B8 55%, #0F2E8A 100%);
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 10px 28px rgba(25, 71, 209, 0.32);
      }

      .hero-cta-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 13px 28px;
        border-radius: 99px;
        background: #ffffff;
        color: #1947D1;
        font-family: "Inter Tight", sans-serif;
        font-size: 13.5px;
        font-weight: 500;
        letter-spacing: -0.01em;
        border: 1px solid rgba(25, 71, 209, 0.18);
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        transition: background 300ms cubic-bezier(0.34, 1.36, 0.64, 1),
                    transform  300ms cubic-bezier(0.34, 1.36, 0.64, 1),
                    box-shadow 300ms cubic-bezier(0.34, 1.36, 0.64, 1),
                    border-color 300ms ease;
      }
      .hero-cta-secondary:hover {
        background: #f0f4ff;
        border-color: rgba(25, 71, 209, 0.35);
        color: #1438b8;
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 10px 24px rgba(25, 71, 209, 0.18);
      }

      .hero-trust-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0;
        margin-top: 48px;
        padding-top: 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.07);
      }
      .hero-trust-item {
        font-family: "Inter Tight", sans-serif;
        font-size: 11px;
        font-weight: 500;
        color: #8A94A6;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 4px 0;
      }
      .hero-trust-sep {
        font-size: 11px;
        color: #C8CDD8;
        margin: 0 14px;
      }

      /* =========================================================
         HERO CAROUSEL — product cycling with Apple-style card
         ========================================================= */

      .hero-carousel {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        min-height: 560px;
      }

      /* Product image animations
         Cycle 8 — smoother crossfade: gentler transforms and matched in/out
         timing so the outgoing image doesn't finish long before the incoming
         one (which left a brief empty flash mid-swap). translateZ(0) keeps
         both layers GPU-composited. */
      @keyframes carousel-img-in {
        from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.988); }
        to   { opacity: 1; transform: translate3d(0, 0, 0)    scale(1);     }
      }
      @keyframes carousel-img-out {
        from { opacity: 1; transform: translate3d(0, 0, 0)    scale(1);     }
        to   { opacity: 0; transform: translate3d(0, -6px, 0) scale(1.008); }
      }

      .hero-carousel-img {
        position: relative;
        z-index: 2;
        max-height: 480px;
        width: auto;
        flex-shrink: 0;
        will-change: transform, opacity;
        backface-visibility: hidden;
      }
      .hero-carousel-img--in {
        animation:
          carousel-img-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards,
          hero-product-float 9s ease-in-out 900ms infinite !important;
      }
      .hero-carousel-img--out {
        animation: carousel-img-out 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
      }

      /* ── Apple-style product card ── */
      .hero-float-card {
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 10;
        width: 290px;
        padding: 18px 20px 0;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(32px) saturate(1.8);
        -webkit-backdrop-filter: blur(32px) saturate(1.8);
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.98);
        box-shadow:
          0 0 0 0.5px rgba(0, 0, 0, 0.06),
          0 2px 4px rgba(0, 0, 0, 0.04),
          0 8px 24px rgba(15, 30, 80, 0.08),
          0 24px 48px rgba(15, 30, 80, 0.06);
        overflow: hidden;
      }

      /* Top row: badge + counter */
      .hero-float-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
      }
      .hero-float-badge {
        display: inline-flex;
        align-items: center;
        padding: 3px 9px;
        border-radius: 99px;
        background: rgba(25, 71, 209, 0.07);
        border: 1px solid rgba(25, 71, 209, 0.14);
        font-family: "Inter Tight", sans-serif;
        font-size: 9px;
        font-weight: 600;
        color: #1947D1;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        line-height: 1.5;
      }
      .hero-float-counter {
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        color: #B0B8CC;
        letter-spacing: 0.06em;
      }

      /* Product name */
      .hero-float-name {
        font-family: "Playfair Display", Georgia, serif;
        font-style: italic;
        font-size: 21px;
        font-weight: 500;
        color: #0A0A0A;
        line-height: 1.15;
        letter-spacing: -0.01em;
        display: flex;
        align-items: baseline;
        gap: 7px;
        margin-bottom: 6px;
      }
      .hero-float-dose {
        font-family: "Inter Tight", sans-serif;
        font-style: normal;
        font-size: 11px;
        font-weight: 500;
        color: #9AA3B2;
        letter-spacing: 0.05em;
      }

      /* Descriptor */
      .hero-float-desc {
        font-family: "Inter Tight", sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: #6B7280;
        line-height: 1.55;
        margin-bottom: 14px;
      }

      /* Footer row: dots + CTA */
      .hero-float-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 16px;
      }
      .hero-float-dots {
        display: flex;
        gap: 5px;
        align-items: center;
      }
      .hero-float-dot {
        width: 5px;
        height: 5px;
        border-radius: 99px;
        background: rgba(0, 0, 0, 0.14);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1), background 0.22s;
        flex-shrink: 0;
      }
      .hero-float-dot--active {
        width: 18px;
        background: #1947D1;
      }
      .hero-float-dot:hover:not(.hero-float-dot--active) {
        background: rgba(0, 0, 0, 0.28);
      }

      /* CTA link */
      .hero-float-cta {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-family: "Inter Tight", sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: #1947D1;
        text-decoration: none;
        letter-spacing: -0.01em;
        transition: gap 0.2s;
      }
      .hero-float-cta:hover { gap: 8px; }

      /* Progress bar — thin cobalt line at bottom of card */
      .hero-float-progress {
        height: 2.5px;
        background: rgba(25, 71, 209, 0.08);
        margin: 0 -20px;
        border-bottom-left-radius: 22px;
        border-bottom-right-radius: 22px;
        overflow: hidden;
      }
      .hero-float-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #1947D1, #5b8cf7);
        transform-origin: left center;
        animation: progress-advance 4.5s linear forwards;
      }
      @keyframes progress-advance {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
      }

      /* Float card text: enters on each slide change (triggered by key= remount) */
      @keyframes float-text-in {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0);   }
      }
      .hero-float-text-wrap {
        animation: float-text-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
      }

      @media (prefers-reduced-motion: reduce) {
        .hero-carousel-img--in,
        .hero-carousel-img--out,
        .hero-float-text-wrap { animation: none !important; }
        .hero-float-progress-fill { animation: none !important; }
      }

      /* Mobile: stack product + simplified card */
      @media (max-width: 767px) {
        .hero-carousel { min-height: 360px; }
        .hero-carousel-img { max-height: 300px; }
        .hero-float-card {
          position: relative;
          bottom: auto; right: auto;
          width: 100%;
          margin-top: 16px;
          border-radius: 18px;
        }
      }
      @media (min-width: 768px) and (max-width: 1023px) {
        .hero-float-card { right: 16px; bottom: 16px; }
      }

      /* =========================================================
         COBALT ATMOSPHERE — the cold-white biotech environment
         that the render lives inside. Multiple stacked radial
         fields create depth fog around the product area without
         any visible boundary.
         ========================================================= */
      html[data-palette="cobalt"] .home-hero {
        background:
          /* Real stela atmosphere — anchored to the right column behind product.
             Sized to cover ~70% of the hero width and ~110% of its height,
             positioned so the bloom + floor reflection sit behind the vial. */
          url("/assets/hero-stela-bg.webp") no-repeat right center / 70% 110%,
          
          linear-gradient(
            90deg,
            #FBFCFE 0%,
            #F7F9FD 35%,
            rgba(247, 249, 253, 0) 55%
          ),
          
          linear-gradient(180deg, #FBFCFE 0%, #F6F8FC 55%, #EEF2F9 100%);
      }

      /* Soft transition between the stela image and the page — wraps a
         feathered halo around all four edges of the stela so it fully
         dissolves into the page atmosphere. The bottom feather is stronger
         so the hero melts seamlessly into the section below. */
      html[data-palette="cobalt"] .home-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
          /* feather the left edge of the stela into the copy column */
          linear-gradient(
            90deg,
            rgba(251, 252, 254, 0.98) 0%,
            rgba(251, 252, 254, 0.72) 26%,
            rgba(251, 252, 254, 0) 46%
          ),
          /* feather the top of the stela */
          linear-gradient(
            180deg,
            rgba(251, 252, 254, 0.92) 0%,
            rgba(251, 252, 254, 0.40) 16%,
            rgba(251, 252, 254, 0) 32%
          ),
          /* stronger bottom feather — blends hero floor into Trust Strip */
          linear-gradient(
            0deg,
            rgba(244, 246, 254, 1.0) 0%,
            rgba(244, 246, 254, 0.75) 12%,
            rgba(244, 246, 254, 0.30) 26%,
            rgba(244, 246, 254, 0) 44%
          );
        pointer-events: none;
        z-index: 0;
      }

      /* Subtle ambient highlight that wraps the product itself — sits BETWEEN
         the stela atmosphere and the product PNG, giving the vial a soft cobalt
         halo without a visible boundary. */
      html[data-palette="cobalt"] .home-hero::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 55%;
        height: 100%;
        background:
          radial-gradient(
            32% 38% at 55% 50%,
            rgba(170, 195, 235, 0.25) 0%,
            rgba(170, 195, 235, 0.10) 35%,
            rgba(170, 195, 235, 0) 70%
          ),
          radial-gradient(
            18% 22% at 60% 70%,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0) 70%
          );
        filter: blur(4px);
        pointer-events: none;
        z-index: 0;
        mix-blend-mode: screen;
      }
      html[data-palette="cobalt"] .home-hero > * {
        position: relative;
        z-index: 1;
      }
      /* Extra bottom padding so the strong bottom feather in ::before
         has physical space to dissolve into before the next section. */
      html[data-palette="cobalt"] .home-hero {
        padding-bottom: 112px !important;
      }

      @media (max-width: 1023px) {
        .hero-product-img { max-height: 460px; animation: none; }
        .hero-product-glow { animation: none; opacity: 0.85; inset: -10% -14% -14% -14%; }
        .hero-product-caption { display: none; }
        html[data-palette="cobalt"] .home-hero::before {
          right: -4%; width: 96%; height: 40%;
        }
      }
      @media (max-width: 768px) {
        /* Stack: image above, text below */
        .home-hero .hero-grid { display: flex !important; flex-direction: column; }
        .home-hero .hero-visual-product { order: -1; }
        .hero-product-img { max-height: 360px; }
        .hero-product-glow { inset: -6% -8% -10% -8%; }
      }

      /* ============================================================
         HERO — AVATAR SELECTOR (single-viewport cinematic composition)
         Layout system:
           - .home-hero--avatar  : section, min-height 100svh, padded
                                    to clear the sticky header.
           - .hero-stage-wrap    : positioning context. Holds the copy
                                    in normal flow at the top and the
                                    carousel ABSOLUTELY at the bottom,
                                    so both are visible together.
           - .hero-avatar-stage  : absolute bottom of the wrap.
           - .hero-avatar-slot   : absolute on the track, 3D depth via
                                    translateX + translateY + scale +
                                    rotateY + blur (driven by JS).
           - .hero-avatar-pills  : absolute at the very bottom.
         Motion is GPU-friendly: only transform + opacity + filter.
         ============================================================ */
      .home-hero.home-hero--avatar {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        /* Full-screen: exact viewport height, not capped */
        height: 100svh;
        min-height: 580px;
        background: transparent;
        padding-top: clamp(96px, 12vh, 132px) !important;
        padding-bottom: 0 !important;
      }
      /* Disable legacy cobalt overlays in this variant */
      html[data-palette="cobalt"] .home-hero.home-hero--avatar,
      html[data-palette="cobalt"] .home-hero.home-hero--avatar::before,
      html[data-palette="cobalt"] .home-hero.home-hero--avatar::after {
        background: none;
        content: normal;
      }
      html[data-palette="cobalt"] .home-hero.home-hero--avatar {
        background: transparent !important;
      }

      /* Stage container — owns the absolute layout */
      .home-hero--avatar .hero-stage-wrap {
        position: relative;
        z-index: 2 !important;   /* override cobalt > * rule (specificity 0,2,1) */
        height: calc(100svh - clamp(96px, 12vh, 132px));
        min-height: 480px;
        will-change: opacity, transform; /* GPU layer for scroll-fade */
      }

      /* CAPA 2: Pedestal animado (video) — full-cover, edge-to-edge
         !important needed: cobalt > * rule (specificity 0,2,1) overrides
         position: absolute → relative, which breaks layout completely */
      .home-hero--avatar .home-hero__bg-img {
        position: absolute !important;
        inset: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: center bottom;
           object-position: center bottom;
        z-index: 0 !important;
        pointer-events: none !important;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
      }
      /* Poster estático: siempre visible debajo del video */
      .home-hero--avatar .home-hero__bg-poster { opacity: 1; }
      /* Video: arranca invisible y hace fade-in solo cuando reproduce.
         Si iOS bloquea el autoplay, queda en opacity:0 (sin botón de play). */
      .home-hero--avatar .home-hero__bg-video {
        opacity: 0;
        transition: opacity 0.7s ease;
      }
      .home-hero--avatar .home-hero__bg-video.is-playing { opacity: 1; }
      /* Veil: same fix, must stay absolutely positioned */
      .home-hero--avatar .home-hero__bg {
        position: absolute !important;
        inset: 0;
        z-index: 1 !important;
        pointer-events: none;
        background: linear-gradient(180deg,
          rgba(255,255,255,0.55) 0%,
          rgba(255,255,255,0.18) 18%,
          rgba(255,255,255,0)    40%
        );
      }

      /* ── Hero copy (upper center, in normal flow at top of wrap) ──
         Protected text zone. Sits ABOVE the carousel layer so even if a
         scaled side product drifts, copy stays unobstructed. */
      .hero-avatar-copy {
        position: relative;
        z-index: 70;
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
        padding: 0 8px;
      }
      /* CTA row sits on top — guarantees buttons are always clickable */
      .hero-avatar-actions {
        position: relative;
        z-index: 80;
      }
      .hero-avatar-eyebrow {
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.32em;
        color: rgba(25, 71, 209, 0.85);
        text-transform: uppercase;
        margin-bottom: 16px;
      }
      .hero-avatar-headline {
        margin: 0 0 12px;
        font-family: "Inter Tight", sans-serif;
        font-weight: 500;
        letter-spacing: -0.04em;
        color: #0A0A0A;
        text-wrap: balance;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .hero-avatar-headline-main {
        display: block;
        font-size: clamp(40px, 4.6vw, 68px);
        line-height: 0.96;
      }
      .hero-avatar-headline-accent {
        display: block;
        font-family: "Playfair Display", Georgia, serif;
        font-style: italic;
        font-weight: 500;
        color: #1947D1;
        font-size: clamp(22px, 2.4vw, 34px);
        line-height: 1.05;
        letter-spacing: -0.02em;
        margin-top: 4px;
      }
      .hero-avatar-sub {
        max-width: 580px;
        margin: 14px auto 0;
        color: #5A6478;
        font-size: clamp(13px, 1vw, 15px);
        line-height: 1.55;
      }
      .hero-avatar-actions {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 18px;
      }

      /* ── Avatar stage — CINEMATIC, BOTTOM-ANCHORED ──
         Stage sits low enough to leave the copy area clear.
         Slots are anchored at their bottom edge (the podium line),
         so scaling the active product grows it UPWARD from the podium
         instead of expanding through the text. */
      .hero-avatar-stage {
        position: absolute;
        left: 50%;
        bottom: clamp(72px, 8vh, 105px);
        transform: translateX(-50%);
        width: min(1320px, 94vw);
        height: clamp(420px, 48vh, 520px);
        z-index: 12;
        margin: 0;
        overflow: visible;
        pointer-events: none; /* only children catch events */
      }
      .hero-avatar-stage > * { pointer-events: auto; }
      .hero-avatar-track {
        position: absolute;
        inset: 0;
        perspective: 1400px;
        overflow: visible;
      }
      .hero-avatar-slot {
        position: absolute;
        bottom: clamp(92px, 10vh, 130px);
        left: 50%;
        width: clamp(270px, 21vw, 360px);
        height: clamp(300px, 39vh, 430px);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        overflow: visible;
        will-change: transform, opacity, filter;
        transform-origin: bottom center;
        transition:
          transform 780ms cubic-bezier(0.22, 1, 0.36, 1),
          opacity   620ms cubic-bezier(0.22, 1, 0.36, 1),
          filter    620ms cubic-bezier(0.22, 1, 0.36, 1);
        backface-visibility: hidden;
        transform-style: preserve-3d;
      }
      .hero-avatar-slot.is-active { cursor: default; }
      .hero-avatar-img {
        /* Fill the slot, bottom-aligned so the product visually sits
           on the podium. object-fit preserves aspect ratio; object-position
           pins the product to the bottom of its envelope. */
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
           object-fit: contain;
        -o-object-position: center bottom;
           object-position: center bottom;
        transform-origin: bottom center;
        pointer-events: none;
        filter:
          drop-shadow(0 24px 44px rgba(25, 71, 209, 0.22))
          drop-shadow(0 50px 80px rgba(25, 71, 209, 0.10));
      }
      .hero-avatar-slot:not(.is-active) .hero-avatar-img {
        filter:
          drop-shadow(0 12px 24px rgba(25, 71, 209, 0.10));
      }
      .hero-avatar-fallback { width: 60%; height: 70%; }

      /* Arrows — aligned with the active product (not the page center) */
      .hero-avatar-arrow {
        position: absolute;
        top: 62%;
        transform: translateY(-50%);
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: rgba(255,255,255,0.88);
        border: 1px solid rgba(25, 71, 209, 0.18);
        color: #1947D1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 50;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 6px 18px rgba(25, 71, 209, 0.10);
        transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
      }
      .hero-avatar-arrow:hover {
        background: rgba(255,255,255,0.96);
        transform: translateY(-50%) scale(1.02);
        box-shadow: 0 6px 14px rgba(25, 71, 209, 0.13);
      }
      .hero-avatar-arrow:active { transform: translateY(-50%) scale(0.97); }
      .hero-avatar-arrow--left  { left: 4%; }
      .hero-avatar-arrow--right { right: 4%; }

      /* Active product info — compact caption pinned inside the stage,
         above the CTA buttons so there's no overlap or click conflict. */
      .hero-avatar-info {
        position: absolute;
        left: 50%;
        bottom: 52px;
        transform: translateX(-50%);
        text-align: center;
        max-width: 540px;
        padding: 0 16px;
        z-index: 60;
        animation: hero-avatar-info-in 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
        pointer-events: auto;
      }
      @keyframes hero-avatar-info-in {
        from { opacity: 0; transform: translate(-50%, 6px); }
        to   { opacity: 1; transform: translate(-50%, 0);   }
      }
      .hero-avatar-badge {
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.22em;
        color: rgba(25, 71, 209, 0.9);
        text-transform: uppercase;
        margin-bottom: 6px;
      }
      .hero-avatar-name {
        display: inline-block;
        font-family: "Playfair Display", Georgia, serif;
        font-style: italic;
        font-weight: 500;
        font-size: clamp(22px, 2.4vw, 28px);
        color: #0A0A0A;
        letter-spacing: -0.02em;
        line-height: 1.1;
      }
      .hero-avatar-name:hover { color: #1947D1; }
      .hero-avatar-dose {
        font-family: "Inter Tight", sans-serif;
        font-style: normal;
        font-weight: 400;
        color: #8A94A6;
        margin-left: 6px;
        font-size: 0.6em;
      }
      /* Long description hidden in compact composition */
      .hero-avatar-desc { display: none; }

      /* CTA buttons — debajo del info panel, centrados */
      .hero-carousel-actions {
        position: absolute;
        bottom: clamp(-12px, -0.8vh, -4px);
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        z-index: 65;
        white-space: nowrap;
      }

      /* Dot indicators — minimalistas, sin texto */
      .hero-avatar-dots {
        position: absolute;
        left: 50%;
        bottom: clamp(110px, 14vh, 130px);
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 50;
        pointer-events: auto;
      }
      .hero-avatar-dot {
        width: 6px;
        height: 6px;
        border-radius: 99px;
        background: rgba(25, 71, 209, 0.22);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: background 250ms ease, width 250ms ease;
        flex-shrink: 0;
      }
      .hero-avatar-dot:hover {
        background: rgba(25, 71, 209, 0.45);
      }
      .hero-avatar-dot.is-active {
        background: #1947D1;
        width: 20px;
        border-radius: 3px;
      }

      /* ── Value chip strip (OUTSIDE the hero) ──────────────── */
      .hero-value-strip {
        background: linear-gradient(180deg, #d8e6fa 0%, #eef3fb 100%);
        padding: 20px 0;
        border-bottom: 1px solid rgba(25, 71, 209, 0.06);
      }
      .hero-value-chips {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 18px;
      }
      .hero-value-chip {
        font-family: "Inter Tight", sans-serif;
        font-size: 12px;
        letter-spacing: 0.04em;
        color: #5A6478;
        padding: 6px 14px;
        border-radius: 99px;
        background: rgba(255,255,255,0.6);
        border: 1px solid rgba(25, 71, 209, 0.10);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
      }

      /* ── Responsive ───────────────────────────────────────── */
      @media (max-width: 1280px) {
        .hero-avatar-arrow--left  { left: 2%; }
        .hero-avatar-arrow--right { right: 2%; }
      }
      @media (max-width: 1024px) {
        .home-hero.home-hero--avatar { height: 100svh; }
        .home-hero--avatar .hero-stage-wrap {
          height: calc(100svh - clamp(96px, 12vh, 132px));
          min-height: 440px;
        }
        .hero-avatar-stage { height: clamp(260px, 34vh, 340px); }
        .hero-avatar-slot {
          width: clamp(150px, 20vw, 220px);
          height: clamp(200px, 28vw, 300px);
        }
        /* Tablet: hide far-side products (pos 2), keep near + center */
        .hero-avatar-slot[data-pos="2"] {
          opacity: 0 !important;
          pointer-events: none !important;
        }
      }
      @media (max-width: 768px) {
        .home-hero.home-hero--avatar {
          /* Cap de altura: en phones altos (Pro Max ~932px) 100svh dejaba una
             banda muerta de ~215px entre la copy (arriba) y el stage de avatares
             (position:absolute anclado abajo). min() cierra el gap sin tocar el
             diseño cinematográfico. En phones <=740px de alto = igual que antes. */
          height: min(100svh, 740px);
          min-height: 600px;
          padding-top: clamp(80px, 11vh, 100px) !important;
        }
        .home-hero--avatar .hero-stage-wrap {
          height: calc(min(100svh, 740px) - clamp(80px, 11vh, 100px));
          min-height: 400px;
        }
        .hero-avatar-headline-main { font-size: clamp(34px, 8.4vw, 56px); }
        .hero-avatar-headline-accent { font-size: clamp(22px, 5vw, 34px); }
        .hero-avatar-sub { font-size: 13.5px; max-width: 92%; }
        .hero-avatar-stage {
          height: clamp(240px, 38vh, 320px);
          bottom: clamp(60px, 8vh, 90px);
          width: 100vw;
        }
        .hero-avatar-slot {
          width: clamp(170px, 50vw, 230px);
          height: clamp(210px, 60vw, 290px);
        }
        /* Mobile: only the active center peptide is visible */
        .hero-avatar-slot:not(.is-active) {
          opacity: 0 !important;
          pointer-events: none !important;
        }
        .hero-avatar-arrow { width: 38px; height: 38px; }
        .hero-avatar-arrow--left  { left: 6px; }
        .hero-avatar-arrow--right { right: 6px; }
        .hero-avatar-actions { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
        .hero-avatar-actions a { width: 100%; justify-content: center; }
        .hero-avatar-dots { gap: 6px; }
        .hero-avatar-dot { width: 5px; height: 5px; }
        .hero-avatar-dot.is-active { width: 16px; }
        .hero-avatar-name { font-size: 22px; }
        .hero-value-chips { gap: 8px 12px; }
        .hero-value-chip { font-size: 11.5px; padding: 5px 11px; }
      }

      /* Reduced motion */
      @media (prefers-reduced-motion: reduce) {
        .hero-avatar-slot { transition: none !important; }
        .hero-avatar-info { animation: none !important; }
      }

      /* ============================================================
         Nav · Dropdowns (Recursos / Protocolos / Por objetivo)
         ─ Always in DOM. CSS opacity+transform+visibility animation.
         ─ .nav-dd--open class drives open state.
         ============================================================ */
      .nav-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        z-index: 100;
        min-width: 280px;
        padding: 8px;
        border-radius: 18px;
        background: rgba(255,255,255,0.96);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border: 1px solid rgba(10,10,10,0.09);
        box-shadow:
          0 4px 12px -4px rgba(0,0,0,0.08),
          0 20px 52px -16px rgba(25, 71, 209, 0.18),
          inset 0 1px 0 rgba(255,255,255,0.8);
        /* ── hidden state ── */
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
        pointer-events: none;
        visibility: hidden;
        transition:
          opacity 260ms cubic-bezier(0.32,0.72,0,1),
          transform 260ms cubic-bezier(0.32,0.72,0,1),
          visibility 0ms linear 260ms;
        transform-origin: top left;
      }
      .nav-dropdown[style*="right:0"],
      .nav-dropdown[style*="right: 0"] {
        transform-origin: top right;
      }
      /* ── open state ── */
      .nav-dropdown.nav-dd--open {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        visibility: visible;
        transition:
          opacity 280ms cubic-bezier(0.32,0.72,0,1),
          transform 280ms cubic-bezier(0.32,0.72,0,1),
          visibility 0ms linear 0ms;
      }

      .nav-dropdown-item {
        display: block;
        padding: 9px 12px;
        border-radius: 10px;
        text-decoration: none;
        transition:
          background-color 180ms cubic-bezier(0.22,1,0.36,1),
          transform        180ms cubic-bezier(0.22,1,0.36,1);
        will-change: transform;
      }
      .nav-dropdown-item:hover {
        background: rgba(25,71,209,0.055);
        transform: translateX(3px);
      }
      .nav-dropdown-item:hover .nav-dropdown-label {
        color: #1947D1;
      }
      .nav-dropdown-label {
        font-family: "Inter Tight", sans-serif;
        font-size: 13.5px;
        font-weight: 500;
        color: #0A0A0A;
        letter-spacing: -0.015em;
        line-height: 1.2;
        transition: color 180ms ease;
      }
      .nav-dropdown-sub {
        font-family: "Inter Tight", sans-serif;
        font-size: 11px;
        color: rgba(10,10,10,0.42);
        margin-top: 2px;
        line-height: 1.3;
        transition: color 180ms ease;
      }
      .nav-dropdown-item:hover .nav-dropdown-sub {
        color: rgba(25,71,209,0.55);
      }
      /* CTA item — "Ver todos →" style */
      .nav-dropdown-item--cta {
        margin-top: 4px;
        border-top: 1px solid rgba(10,10,10,0.07);
        padding-top: 12px;
      }
      .nav-dropdown-item--cta .nav-dropdown-label {
        font-size: 12.5px;
        color: #1947D1;
        font-weight: 600;
      }
      .nav-dropdown-item--cta:hover .nav-dropdown-label {
        color: #0a2ea4;
      }
      .nav-dropdown-item--cta:hover {
        background: rgba(25,71,209,0.04);
      }

      /* ══════════════════════════════════════════════════════════════════
         MEGAMENU — premium catalog panel
         ══════════════════════════════════════════════════════════════════ */

      /* Outer shell */
      .mega-shell {
        background: linear-gradient(160deg, rgba(9,13,24,0.97) 0%, rgba(5,9,19,0.98) 100%);
        border: 1px solid rgba(255,255,255,0.07);
        border-radius: 22px;
        backdrop-filter: blur(36px) saturate(180%);
        -webkit-backdrop-filter: blur(36px) saturate(180%);
        box-shadow:
          0 48px 100px -20px rgba(0,0,0,0.72),
          0 0 0 0.5px rgba(255,255,255,0.04) inset;
        overflow: hidden;
      }

      /* Body: grid cols + spotlight */
      .mega-body {
        display: grid;
        grid-template-columns: 1fr 256px;
        gap: 0;
      }

      /* Category grid (left) */
      .mega-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        -moz-column-gap: 28px;
             column-gap: 28px;
        row-gap: 28px;
        padding: 30px 32px 28px 32px;
      }

      /* Each category column — entrance animation when megamenu opens */
      @keyframes mega-col-in {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .mega-col {
        opacity: 1; /* default — no replay when already settled */
      }
      /* Trigger staggered entrance only on open */
      .mega-shell--open .mega-col {
        animation: mega-col-in 400ms cubic-bezier(0.22,1,0.36,1) both;
      }

      /* Category header link */
      .mega-cat-header {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        margin-bottom: 13px;
        transition: opacity 180ms ease;
      }
      .mega-cat-header:hover { opacity: 0.75; }

      .mega-cat-icon {
        display: grid;
        place-items: center;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        color: rgba(127,170,255,0.65);
        transition: color 200ms ease;
      }
      .mega-cat-header:hover .mega-cat-icon { color: rgba(127,170,255,0.95); }

      .mega-cat-label {
        font-family: "Inter Tight", sans-serif;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.45);
        transition: color 180ms ease;
        line-height: 1;
      }
      .mega-cat-header:hover .mega-cat-label { color: rgba(255,255,255,0.70); }

      /* Product list */
      .mega-items-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      /* Individual product link */
      .mega-item-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px 6px 5px 0;
        text-decoration: none;
        font-family: "Inter Tight", sans-serif;
        font-size: 13.5px;
        font-weight: 400;
        color: rgba(255,255,255,0.50);
        letter-spacing: -0.01em;
        border-radius: 6px; /* Ciclo 9: escala tokens */
        transition:
          color      200ms cubic-bezier(0.22,1,0.36,1),
          transform  200ms cubic-bezier(0.22,1,0.36,1),
          background 160ms ease;
        will-change: transform, color;
      }
      .mega-item-link:hover {
        color: rgba(255,255,255,0.92);
        transform: translateX(4px);
        background: rgba(127,170,255,0.05);
      }

      /* Dot indicator */
      .mega-item-dot {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: rgba(127,170,255,0.30);
        flex-shrink: 0;
        transition: background 200ms ease, transform 200ms cubic-bezier(0.22,1,0.36,1);
      }
      .mega-item-link:hover .mega-item-dot {
        background: rgba(127,170,255,0.70);
        transform: scale(1.4);
      }

      /* ── Right: spotlight panel ── */
      .mega-spotlight {
        border-left: 1px solid rgba(255,255,255,0.06);
        padding: 30px 26px 28px;
        display: flex;
        flex-direction: column;
        background: rgba(255,255,255,0.017);
      }

      .mega-spotlight-eyebrow {
        font-family: "Inter Tight", sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.28);
        margin: 0 0 14px;
      }

      .mega-featured-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
      }

      .mega-featured-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 10px 10px 10px;
        border-radius: 11px;
        text-decoration: none;
        background: transparent;
        transition:
          background 200ms cubic-bezier(0.22,1,0.36,1),
          transform  200ms cubic-bezier(0.22,1,0.36,1);
        will-change: transform;
      }
      .mega-featured-item:hover {
        background: rgba(255,255,255,0.05);
        transform: translateX(3px);
      }

      .mega-featured-row {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 3px;
        flex-wrap: wrap;
      }

      .mega-featured-name {
        font-family: "Inter Tight", sans-serif;
        font-size: 13.5px;
        font-weight: 500;
        color: rgba(255,255,255,0.82);
        letter-spacing: -0.01em;
        transition: color 180ms ease;
      }
      .mega-featured-item:hover .mega-featured-name { color: rgba(255,255,255,0.98); }

      .mega-featured-badge {
        font-family: "Inter Tight", sans-serif;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 2px 6px;
        border-radius: 6px; /* Ciclo 9: escala tokens */
        flex-shrink: 0;
        transition: opacity 180ms;
      }

      .mega-featured-price {
        font-family: "JetBrains Mono", monospace;
        font-size: 12px;
        font-weight: 500;
        color: rgba(255,255,255,0.32);
        display: block;
        transition: color 180ms ease;
      }
      .mega-featured-item:hover .mega-featured-price { color: rgba(255,255,255,0.55); }

      .mega-featured-arrow {
        flex-shrink: 0;
        color: rgba(255,255,255,0.22);
        transition: color 200ms ease, transform 200ms cubic-bezier(0.22,1,0.36,1);
      }
      .mega-featured-item:hover .mega-featured-arrow {
        color: rgba(255,255,255,0.60);
        transform: translateX(3px);
      }

      /* View all CTA */
      .mega-view-all-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 16px;
        padding: 9px 14px;
        border-radius: 10px; /* Ciclo 9: escala tokens */
        background: rgba(127,170,255,0.07);
        border: 1px solid rgba(127,170,255,0.14);
        text-decoration: none;
        font-family: "Inter Tight", sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: rgba(127,170,255,0.75);
        letter-spacing: 0.01em;
        transition:
          background 200ms cubic-bezier(0.22,1,0.36,1),
          color       180ms ease,
          border-color 180ms ease,
          transform   200ms cubic-bezier(0.22,1,0.36,1);
        will-change: transform;
      }
      .mega-view-all-btn:hover {
        background: rgba(127,170,255,0.13);
        border-color: rgba(127,170,255,0.28);
        color: rgba(127,170,255,0.95);
        transform: translateY(-1px);
      }
      .mega-view-all-btn svg {
        transition: transform 200ms cubic-bezier(0.22,1,0.36,1);
      }
      .mega-view-all-btn:hover svg { transform: translateX(3px); }

      /* ── Footer strip ── */
      .mega-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 32px;
        border-top: 1px solid rgba(255,255,255,0.05);
        background: rgba(0,0,0,0.18);
      }

      .mega-footer-ruo {
        font-family: "Inter Tight", sans-serif;
        font-size: 10px;
        color: rgba(255,255,255,0.20);
        letter-spacing: 0.03em;
      }

      .mega-footer-coa {
        font-family: "Inter Tight", sans-serif;
        font-size: 11px;
        font-weight: 500;
        color: rgba(127,170,255,0.40);
        text-decoration: none;
        transition: color 180ms ease;
      }
      .mega-footer-coa:hover { color: rgba(127,170,255,0.70); }

      /* ── active pill state ── */
      .nav-pill--active { color: #1947D1 !important; }
      .nav-pill--open   { color: #1947D1 !important; }

      /* Dark palette overrides */
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .nav-dropdown {
        background: rgba(8,12,24,0.94);
        border-color: rgba(255,255,255,0.10);
        box-shadow: 0 4px 12px -4px rgba(0,0,0,0.4), 0 20px 52px -16px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
      }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .nav-dropdown-label { color: #fff; }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .nav-dropdown-sub   { color: rgba(255,255,255,0.50); }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .nav-dropdown-item:hover { background: rgba(127,170,255,0.07); transform: translateX(3px); }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .nav-dropdown-item:hover .nav-dropdown-label { color: rgb(127,170,255); }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .nav-dropdown-item:hover .nav-dropdown-sub { color: rgba(127,170,255,0.45); }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .nav-dropdown-item--cta .nav-dropdown-label { color: rgba(127,170,255,0.9); }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .nav-dropdown-item--cta { border-top-color: rgba(255,255,255,0.07); }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .nav-pill--active,
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .nav-pill--open { color: rgb(127,170,255) !important; }

      /* ══════════════════════════════════════════════════════════════════
         AGE GATE — 18+ verification overlay
         ══════════════════════════════════════════════════════════════════ */

      /* Full-screen overlay */
      .age-gate {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
      }

      /* Blurred dark backdrop */
      .age-gate__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(4, 6, 14, 0.88);
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
      }

      /* Card */
      .age-gate__card {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 440px;
        background: linear-gradient(160deg, rgba(11,15,28,0.96) 0%, rgba(6,9,20,0.98) 100%);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 24px;
        padding: 40px 36px 36px;
        box-shadow:
          0 48px 100px -20px rgba(0,0,0,0.80),
          0 0 0 0.5px rgba(255,255,255,0.05) inset;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        animation: age-card-in 480ms cubic-bezier(0.22,1,0.36,1) both;
      }
      @keyframes age-card-in {
        from { opacity: 0; transform: translateY(20px) scale(0.97); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
      }

      /* Logo */
      .age-gate__logo {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 28px;
      }
      .age-gate__logo-name {
        font-family: "Playfair Display", serif;
        font-style: italic;
        font-weight: 500;
        font-size: 20px;
        color: #1947D1;
        letter-spacing: -0.01em;
        line-height: 1;
      }
      .age-gate__logo-tag {
        font-family: "Inter Tight", sans-serif;
        font-weight: 500;
        font-size: 8px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(25,71,209,0.65);
        padding-left: 8px;
        border-left: 1px solid rgba(25,71,209,0.35);
        line-height: 1;
      }

      /* Shield icon */
      .age-gate__shield {
        color: #1947D1;
        margin-bottom: 20px;
      }

      /* Title */
      .age-gate__title {
        font-family: "Inter Tight", sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: -0.02em;
        line-height: 1.2;
        margin: 0 0 12px;
      }

      /* Body text */
      .age-gate__body {
        font-family: "Inter Tight", sans-serif;
        font-size: 13.5px;
        font-weight: 400;
        color: rgba(255,255,255,0.52);
        line-height: 1.6;
        margin: 0 0 28px;
        max-width: 340px;
      }

      /* ── Checkbox row ── */
      .age-gate__check-row {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        text-align: left;
        cursor: pointer;
        padding: 14px 16px;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 12px;
        background: rgba(255,255,255,0.03);
        margin-bottom: 20px;
        width: 100%;
        transition: border-color 200ms ease, background 200ms ease;
      }
      .age-gate__check-row:hover {
        border-color: rgba(25,71,209,0.40);
        background: rgba(25,71,209,0.05);
      }

      @keyframes age-shake {
        0%, 100% { transform: translateX(0); }
        20%       { transform: translateX(-6px); }
        40%       { transform: translateX(6px); }
        60%       { transform: translateX(-4px); }
        80%       { transform: translateX(4px); }
      }
      .age-gate__check-row--shake {
        animation: age-shake 480ms cubic-bezier(0.22,1,0.36,1);
        border-color: rgba(239,68,68,0.50) !important;
      }

      /* Custom checkbox visual */
      .age-gate__checkbox {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        border: 1.5px solid rgba(255,255,255,0.20);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        margin-top: 1px;
        transition:
          background 200ms cubic-bezier(0.22,1,0.36,1),
          border-color 200ms ease;
      }
      .age-gate__checkbox--on {
        background: #1947D1;
        border-color: #1947D1;
      }

      /* Visually hidden native input */
      .age-gate__checkbox-native {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
      }

      .age-gate__check-label {
        font-family: "Inter Tight", sans-serif;
        font-size: 12.5px;
        color: rgba(255,255,255,0.55);
        line-height: 1.55;
        flex: 1;
        transition: color 200ms ease;
      }
      .age-gate__check-row:hover .age-gate__check-label { color: rgba(255,255,255,0.72); }

      /* ── Actions ── */
      .age-gate__actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-bottom: 20px;
      }

      .age-gate__confirm {
        width: 100%;
        padding: 14px 24px;
        border: none;
        border-radius: 12px;
        background: linear-gradient(180deg, #2E5BE0 0%, #1947D1 55%, #1436A9 100%);
        color: #ffffff;
        font-family: "Inter Tight", sans-serif;
        font-size: 14.5px;
        font-weight: 700;
        letter-spacing: -0.01em;
        cursor: pointer;
        transition:
          background     220ms ease,
          transform      180ms cubic-bezier(0.22,1,0.36,1),
          box-shadow     220ms ease,
          opacity        220ms ease;
        box-shadow: 0 6px 24px -6px rgba(25, 71, 209, 0.36);
      }
      .age-gate__confirm:hover:not(.age-gate__confirm--disabled) {
        background: linear-gradient(180deg, #2450D6 0%, #1539B8 55%, #0F2E8A 100%);
        transform: translateY(-2px);
        box-shadow: 0 10px 32px -8px rgba(25, 71, 209, 0.40);
      }
      .age-gate__confirm:active:not(.age-gate__confirm--disabled) { transform: translateY(0); }
      .age-gate__confirm--disabled {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
      }

      .age-gate__deny {
        width: 100%;
        padding: 11px 24px;
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 12px;
        background: transparent;
        color: rgba(255,255,255,0.35);
        font-family: "Inter Tight", sans-serif;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
      }
      .age-gate__deny:hover {
        color: rgba(255,255,255,0.55);
        border-color: rgba(255,255,255,0.20);
        background: rgba(255,255,255,0.03);
      }

      /* Fine print */
      .age-gate__fine {
        font-family: "Inter Tight", sans-serif;
        font-size: 10px;
        color: rgba(255,255,255,0.20);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin: 0;
      }

      /* ── Denied state ── */
      .age-gate__denied {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 8px 0;
      }
      .age-gate__denied-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(239,68,68,0.12);
        border: 1px solid rgba(239,68,68,0.25);
        display: grid;
        place-items: center;
        font-size: 18px;
        color: rgba(239,68,68,0.80);
        margin-bottom: 4px;
      }

      /* Mobile — age step */
      @media (max-width: 480px) {
        .age-gate__card { padding: 32px 24px 28px; }
        .age-gate__title { font-size: 18px; }
      }

      /* ── Age gate: email step ─────────────────────────────────── */
      .age-gate__card--wide { max-width: 480px; }

      .age-gate__email-step {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .age-gate__promo-badge {
        display: flex;
        align-items: baseline;
        gap: 6px;
        justify-content: center;
        margin-bottom: 4px;
      }
      .age-gate__promo-pct {
        font-family: 'JetBrains Mono', monospace;
        font-size: 52px;
        font-weight: 700;
        line-height: 1;
        background: linear-gradient(135deg, #00e5ff 0%, #2979ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .age-gate__promo-off {
        font-size: 18px;
        font-weight: 600;
        color: rgba(255,255,255,0.55);
        letter-spacing: 0.03em;
        align-self: flex-end;
        margin-bottom: 6px;
      }

      .age-gate__promo-tagline {
        text-align: center;
        font-size: 13px;
        color: rgba(255,255,255,0.45);
        margin-bottom: 20px;
        letter-spacing: 0.02em;
      }

      .age-gate__email-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .age-gate__email-field-wrap {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .age-gate__email-input {
        width: 100%;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 10px;
        padding: 13px 16px;
        font-size: 14px;
        color: #fff;
        outline: none;
        transition: border-color 200ms, background 200ms;
        box-sizing: border-box;
        font-family: inherit;
      }
      .age-gate__email-input::-moz-placeholder { color: rgba(255,255,255,0.28); }
      .age-gate__email-input::placeholder { color: rgba(255,255,255,0.28); }
      .age-gate__email-input:focus {
        border-color: rgba(0,229,255,0.55);
        background: rgba(0,229,255,0.04);
      }
      .age-gate__email-input--err {
        border-color: rgba(255,80,80,0.6) !important;
        background: rgba(255,60,60,0.05) !important;
      }
      .age-gate__email-err {
        font-size: 11.5px;
        color: rgba(255,100,100,0.85);
        margin-top: -4px;
        margin-left: 4px;
      }

      .age-gate__email-submit {
        width: 100%;
        padding: 14px;
        background: linear-gradient(135deg, #00b8cc 0%, #1a5eff 100%);
        border: none;
        border-radius: 10px;
        color: #fff;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.03em;
        cursor: pointer;
        transition: opacity 180ms, transform 180ms;
      }
      .age-gate__email-submit:hover { opacity: 0.88; transform: translateY(-1px); }
      .age-gate__email-submit:active { transform: translateY(0); opacity: 0.8; }

      .age-gate__email-trust {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 4px;
      }
      .age-gate__email-trust-item {
        font-size: 11px;
        color: rgba(255,255,255,0.32);
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .age-gate__email-trust-item svg { opacity: 0.5; }

      .age-gate__skip {
        background: none;
        border: none;
        color: rgba(255,255,255,0.28);
        font-size: 11.5px;
        cursor: pointer;
        font-family: inherit;
        margin-top: 2px;
        text-align: center;
        transition: color 180ms;
        padding: 4px;
        width: 100%;
      }
      .age-gate__skip:hover { color: rgba(255,255,255,0.5); }

      /* ── Age gate: close (X) on email step — top-left ──────────── */
      .age-gate__close {
        position: absolute;
        top: 16px;
        left: 16px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 50%;
        color: rgba(255,255,255,0.5);
        cursor: pointer;
        padding: 0;
        transition: background 160ms, color 160ms, border-color 160ms;
        z-index: 3;
      }
      .age-gate__close:hover {
        background: rgba(255,255,255,0.10);
        color: #fff;
        border-color: rgba(255,255,255,0.22);
      }

      /* ── Age gate: T&C link + compact remember-me row ──────────── */
      .age-gate__terms-link {
        color: #6F95FF;
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color 160ms;
      }
      .age-gate__terms-link:hover { color: #9FB8FF; }
      .age-gate__check-row--compact { margin-top: 6px; }
      .age-gate__check-row--compact .age-gate__check-label {
        font-size: 12px;
        color: rgba(255,255,255,0.55);
      }

      /* ── Age gate: success step ───────────────────────────────── */
      .age-gate__success {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 8px 0 4px;
        text-align: center;
      }
      .age-gate__success-icon {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(0,229,255,0.15) 0%, rgba(41,121,255,0.15) 100%);
        border: 1px solid rgba(0,229,255,0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
      }
      .age-gate__success-title {
        font-size: 16px;
        font-weight: 600;
        color: rgba(255,255,255,0.92);
        margin: 0;
      }
      .age-gate__success-sub {
        font-size: 12.5px;
        color: rgba(255,255,255,0.42);
        margin: -8px 0 0;
      }

      .age-gate__code-chip {
        display: flex;
        align-items: center;
        gap: 0;
        background: rgba(0,229,255,0.07);
        border: 1px solid rgba(0,229,255,0.28);
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        transition: border-color 180ms, background 180ms;
        width: 100%;
        max-width: 280px;
      }
      .age-gate__code-chip:hover {
        border-color: rgba(0,229,255,0.55);
        background: rgba(0,229,255,0.10);
      }
      .age-gate__code-text {
        flex: 1;
        padding: 12px 16px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.12em;
        color: #00e5ff;
        text-align: center;
      }
      .age-gate__code-action {
        padding: 12px 14px;
        border-left: 1px solid rgba(0,229,255,0.18);
        font-size: 11px;
        color: rgba(0,229,255,0.6);
        font-weight: 500;
        white-space: nowrap;
        transition: color 180ms;
      }
      .age-gate__code-chip:hover .age-gate__code-action { color: rgba(0,229,255,0.9); }

      .age-gate__success-note {
        font-size: 11px;
        color: rgba(255,255,255,0.25);
      }

      /* Mobile — email / success steps */
      @media (max-width: 480px) {
        .age-gate__promo-pct { font-size: 42px; }
        .age-gate__card--wide { padding: 32px 24px 28px; }
      }

      /* ============================================================
         CYCLE 7 — Educational section
         ============================================================ */
      .edu-section {
        padding: 120px 0;
        background: #F4F6FE;
        border-top: 1px solid rgba(25,71,209,0.05);
        border-bottom: 1px solid rgba(25,71,209,0.05);
      }
      @media (min-width: 768px) { .edu-section { padding: 140px 0; } }
      .edu-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 64px;
        align-items: start;
      }
      @media (min-width: 1024px) {
        .edu-grid {
          grid-template-columns: 6fr 4fr;
          gap: 80px;
        }
      }
      .edu-eyebrow {
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #1947D1;
        opacity: 0.8;
        margin-bottom: 28px;
      }
      .edu-h2 {
        font-family: 'Playfair Display', Georgia, serif;
        font-weight: 500;
        font-size: clamp(40px, 5.6vw, 72px);
        line-height: 1.0;
        letter-spacing: -0.02em;
        color: #0A0A0A;
        margin: 0 0 18px;
        text-wrap: balance;
      }
      .edu-sub {
        font-family: 'Playfair Display', Georgia, serif;
        font-style: italic;
        font-weight: 500;
        font-size: clamp(22px, 2.4vw, 30px);
        line-height: 1.25;
        color: #1947D1;
        margin: 0 0 36px;
        max-width: 28ch;
      }
      .edu-body {
        font-family: 'Inter Tight', sans-serif;
        font-size: 17px;
        line-height: 1.7;
        color: #2C2C2C;
        font-weight: 400;
        max-width: 56ch;
        margin: 0 0 36px;
      }
      .edu-body strong { color: #0A0A0A; font-weight: 500; }
      .edu-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 26px;
        border-radius: 999px;
        background: linear-gradient(180deg, #2E5BE0 0%, #1947D1 55%, #1436A9 100%);
        color: #fff;
        font-family: 'Inter Tight', sans-serif;
        font-size: 13.5px;
        font-weight: 500;
        letter-spacing: -0.01em;
        text-decoration: none;
        transition:
          transform 240ms var(--ease-cinema),
          box-shadow 240ms var(--ease-cinema),
          background-color 240ms var(--ease-cinema);
      }
      .edu-cta:hover {
        transform: translateY(-1px);
        background: linear-gradient(180deg, #2450D6 0%, #1539B8 55%, #0F2E8A 100%);
        box-shadow: 0 8px 24px rgba(25, 71, 209, 0.20);
      }
      .edu-pillars {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        align-self: center;
      }
      .edu-pillar {
        padding: 24px 22px;
        border-radius: 14px;
        background: #FFFFFF;
        border: 1px solid rgba(25,71,209,0.08);
        transition:
          transform 200ms var(--ease-cinema),
          border-color 200ms var(--ease-cinema),
          box-shadow 200ms var(--ease-cinema);
      }
      .edu-pillar:hover {
        transform: translateY(-2px);
        border-color: rgba(25,71,209,0.35);
        box-shadow: 0 10px 28px rgba(25, 71, 209, 0.08);
      }
      .edu-pillar-ey {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px;
        letter-spacing: 0.20em;
        text-transform: uppercase;
        color: #1947D1;
        opacity: 0.65;
        margin-bottom: 12px;
      }
      .edu-pillar-v {
        font-family: 'Inter Tight', sans-serif;
        font-size: 22px;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: #0A0A0A;
        line-height: 1.15;
      }
      /* Dark-palette fallback for Educational */
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .edu-section {
        background: rgba(20,30,55,0.35);
        border-color: rgba(127,170,255,0.06);
      }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .edu-h2 { color: #fff; }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .edu-body { color: rgba(255,255,255,0.78); }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .edu-pillar {
        background: rgba(255,255,255,0.03);
        border-color: rgba(255,255,255,0.08);
      }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .edu-pillar-v { color: #fff; }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .edu-cta { background: #fff; color: #0A0A0A; }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .edu-cta:hover { background: rgb(var(--cyan)); color: #04060c; }

      /* ============================================================
         CYCLE 7 — Incentive strip (top of page)
         ============================================================ */
      .incentive-strip {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 36px;
        z-index: 60;
        background: #0F2E8A;
        color: #FFFFFF;
        font-family: 'Inter Tight', sans-serif;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.02em;
        line-height: 36px;
      }
      .incentive-strip-inner {
        position: relative;
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 56px 0 24px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .incentive-strip-msg {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }
      .incentive-strip-close {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        width: 28px; height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 0;
        color: rgba(255,255,255,0.85);
        cursor: pointer;
        border-radius: 999px;
        transition: background-color 180ms ease, color 180ms ease;
      }
      .incentive-strip-close:hover {
        background: rgba(255,255,255,0.12);
        color: #fff;
      }
      body.with-incentive header.fixed.top-0 { top: 36px !important; }
      /* Hero compensation — el strip (36px) empuja el navbar hacia abajo,
         así que el hero necesita 36px extra de padding-top para que el
         headline no quede debajo del pill del navbar. El hero-stage-wrap
         resta esos mismos 36px para que el carousel (anclado abajo) no
         se corte. Si el usuario cierra el strip, todo vuelve al layout base. */
      body.with-incentive .home-hero.home-hero--avatar {
        padding-top: calc(clamp(96px, 12vh, 132px) + 36px) !important;
      }
      body.with-incentive .home-hero--avatar .hero-stage-wrap {
        height: calc(100svh - clamp(96px, 12vh, 132px) - 36px);
      }
      @media (max-width: 768px) {
        body.with-incentive .home-hero.home-hero--avatar {
          padding-top: calc(clamp(80px, 11vh, 100px) + 36px) !important;
        }
        body.with-incentive .home-hero--avatar .hero-stage-wrap {
          height: calc(min(100svh, 740px) - clamp(80px, 11vh, 100px) - 36px);
        }
      }
      @media (max-width: 640px) {
        .incentive-strip { font-size: 11.5px; }
        .incentive-strip-inner { padding-left: 12px; padding-right: 44px; }
      }

      /* ============================================================
         CYCLE 7 — WhatsApp floating button
         ============================================================ */
      .wa-float {
        position: fixed;
        bottom: 24px;
        right: 24px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #1947D1;
        color: #FFFFFF;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-shadow: 0 8px 24px rgba(25, 71, 209, 0.25);
        z-index: 55;
        transition:
          transform 220ms var(--ease-cinema),
          box-shadow 220ms var(--ease-cinema),
          background-color 220ms var(--ease-cinema);
      }
      .wa-float:hover {
        transform: translateY(-2px);
        background: #0F2E8A;
        box-shadow: 0 12px 32px rgba(25, 71, 209, 0.32);
      }
      .wa-float svg { display: block; }
      @media (max-width: 480px) {
        .wa-float { bottom: 18px; right: 18px; width: 52px; height: 52px; }
      }

      /* ============================================================
         CYCLE 7 — Footer trust strip now holds 5 items
         ============================================================ */
      @media (min-width: 900px) and (max-width: 1199px) {
        .foot-trust { grid-template-columns: repeat(3, 1fr) !important; row-gap: 6px; }
      }
      @media (min-width: 1200px) {
        .foot-trust { grid-template-columns: repeat(5, 1fr) !important; }
      }

      /* ============================================================
         CYCLE 8 — Quiz funnel
         ============================================================ */
      .quiz-section { padding: 100px 0; }
      @media (min-width: 768px) { .quiz-section { padding: 120px 0; } }
      .quiz-h2 {
        font-family: 'Playfair Display', Georgia, serif;
        font-weight: 500;
        font-size: clamp(34px, 4.6vw, 56px);
        line-height: 1.05;
        letter-spacing: -0.02em;
        color: #0A0A0A;
        margin: 0 auto 14px;
        max-width: 22ch;
      }
      .quiz-sub {
        font-family: 'Playfair Display', Georgia, serif;
        font-style: italic;
        font-weight: 500;
        font-size: clamp(18px, 1.8vw, 22px);
        color: #1947D1;
        line-height: 1.3;
        margin: 0 auto;
        max-width: 50ch;
      }
      .quiz-card {
        max-width: 880px;
        margin: 0 auto;
        background: #E8EDFB;
        border-radius: 8px;
        padding: 60px 32px;
        position: relative;
      }
      @media (min-width: 768px) { .quiz-card { padding: 60px; } }
      .quiz-progress {
        display: flex; gap: 6px;
        justify-content: center;
        margin-bottom: 36px;
      }
      .quiz-dot {
        width: 28px; height: 4px; border-radius: 999px;
        background: rgba(25,71,209,0.18);
        transition: background-color 240ms var(--ease-cinema);
      }
      .quiz-dot.on { background: #1947D1; }
      .quiz-step-label {
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px; letter-spacing: 0.20em;
        text-transform: uppercase;
        color: #1947D1; opacity: 0.65;
        margin-bottom: 14px;
        text-align: center;
      }
      .quiz-question {
        font-family: 'Inter Tight', sans-serif;
        font-weight: 500;
        font-size: clamp(22px, 2.4vw, 30px);
        letter-spacing: -0.02em;
        line-height: 1.2;
        color: #0A0A0A;
        margin: 0 auto 32px;
        text-align: center;
        max-width: 26ch;
      }
      .quiz-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
      }
      .quiz-chip {
        display: inline-flex;
        align-items: center;
        padding: 14px 20px;
        border-radius: 999px;
        background: #FFFFFF;
        border: 1px solid rgba(25,71,209,0.15);
        font-family: 'Inter Tight', sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #0A0A0A;
        letter-spacing: -0.01em;
        cursor: pointer;
        transition:
          transform 200ms var(--ease-cinema),
          border-color 200ms var(--ease-cinema),
          background-color 200ms var(--ease-cinema),
          color 200ms var(--ease-cinema);
      }
      .quiz-chip:hover {
        transform: translateY(-1px);
        border-color: #1947D1;
        background: #1947D1;
        color: #fff;
      }
      .quiz-result { text-align: center; }
      .quiz-rec-card {
        display: flex;
        gap: 18px;
        align-items: flex-start;
        justify-content: space-between;
        padding: 24px 28px;
        background: #FFFFFF;
        border: 1px solid rgba(25,71,209,0.15);
        border-radius: 14px;
        margin: 24px auto 28px;
        max-width: 560px;
        text-align: left;
      }
      .quiz-rec-eyebrow {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px; letter-spacing: 0.20em;
        text-transform: uppercase;
        color: #6B6B6B; opacity: 0.7;
        margin-bottom: 8px;
      }
      .quiz-rec-name {
        font-family: 'Inter Tight', sans-serif;
        font-size: 24px;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: #0A0A0A;
        line-height: 1.1;
      }
      .quiz-rec-sub {
        font-family: 'Inter Tight', sans-serif;
        font-size: 13.5px;
        color: #6B6B6B;
        margin-top: 6px;
      }
      .quiz-rec-price {
        display: flex; align-items: baseline; gap: 8px;
        white-space: nowrap;
      }
      .quiz-rec-old {
        font-family: 'JetBrains Mono', monospace;
        font-size: 13px;
        color: rgba(10,10,10,0.40);
        text-decoration: line-through;
      }
      .quiz-rec-now {
        font-family: 'Inter Tight', sans-serif;
        font-size: 26px;
        font-weight: 500;
        color: #1947D1;
        letter-spacing: -0.02em;
      }
      .quiz-result-ctas {
        display: flex; gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
      }
      .quiz-cta-primary {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 14px 26px;
        border-radius: 999px;
        background: linear-gradient(180deg, #2E5BE0 0%, #1947D1 55%, #1436A9 100%);
        color: #fff;
        font-family: 'Inter Tight', sans-serif;
        font-size: 13.5px;
        font-weight: 500;
        text-decoration: none;
        transition: background-color 200ms var(--ease-cinema), transform 200ms var(--ease-cinema), box-shadow 200ms var(--ease-cinema);
      }
      .quiz-cta-primary:hover {
        transform: translateY(-1px);
        background: linear-gradient(180deg, #2450D6 0%, #1539B8 55%, #0F2E8A 100%);
        box-shadow: 0 8px 24px rgba(25, 71, 209, 0.20);
      }
      .quiz-cta-secondary {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 14px 22px;
        border-radius: 999px;
        background: transparent;
        border: 1px solid rgba(10,10,10,0.15);
        color: #0A0A0A;
        font-family: 'Inter Tight', sans-serif;
        font-size: 13.5px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 200ms var(--ease-cinema), border-color 200ms var(--ease-cinema);
      }
      .quiz-cta-secondary:hover {
        border-color: rgba(10,10,10,0.30);
        background: rgba(10,10,10,0.03);
      }
      /* Dark fallback */
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .quiz-card { background: rgba(255,255,255,0.04); }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .quiz-h2 { color: #fff; }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .quiz-question { color: #fff; }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .quiz-chip { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); color: #fff; }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .quiz-rec-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .quiz-rec-name { color: #fff; }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .quiz-rec-now { color: #fff; }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .quiz-cta-secondary { color: #fff; border-color: rgba(255,255,255,0.15); }

      /* ============================================================
         CYCLE 8 — Wholesale section
         ============================================================ */
      .wholesale-section { padding: 120px 0; }
      @media (min-width: 768px) { .wholesale-section { padding: 140px 0; } }
      .wholesale-head { max-width: 760px; margin-bottom: 56px; }
      .wholesale-eyebrow {
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #1947D1; opacity: 0.8;
        margin-bottom: 22px;
      }
      .wholesale-h2 {
        font-family: 'Playfair Display', Georgia, serif;
        font-weight: 500;
        font-size: clamp(36px, 5vw, 60px);
        line-height: 1.05;
        letter-spacing: -0.02em;
        color: #0A0A0A;
        margin: 0 0 14px;
        max-width: 22ch;
      }
      .wholesale-sub {
        font-family: 'Playfair Display', Georgia, serif;
        font-style: italic;
        font-weight: 500;
        font-size: clamp(18px, 1.8vw, 22px);
        color: #1947D1;
        line-height: 1.3;
        margin: 0 0 22px;
      }
      .wholesale-body {
        font-family: 'Inter Tight', sans-serif;
        font-size: 16px;
        line-height: 1.65;
        color: #2C2C2C;
        max-width: 64ch;
      }
      .wholesale-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
      }
      @media (min-width: 700px) { .wholesale-grid { grid-template-columns: 1fr 1fr; } }
      @media (min-width: 1100px) { .wholesale-grid { grid-template-columns: repeat(4, 1fr); } }
      .wholesale-tier {
        position: relative;
        display: flex; flex-direction: column;
        padding: 26px 24px;
        background: #FFFFFF;
        border: 1px solid rgba(25,71,209,0.10);
        border-radius: 14px;
        text-decoration: none;
        color: inherit;
        transition:
          transform 220ms var(--ease-cinema),
          border-color 220ms var(--ease-cinema),
          box-shadow 220ms var(--ease-cinema);
      }
      .wholesale-tier:hover {
        transform: translateY(-2px);
        border-color: #1947D1;
        box-shadow: 0 12px 32px rgba(25, 71, 209, 0.08);
      }
      .wholesale-tier-ey {
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #1947D1;
        margin-bottom: 6px;
      }
      .tier-bronze .wholesale-tier-ey   { color: #B07A3B; }
      .tier-silver .wholesale-tier-ey   { color: #6E7A8F; }
      .tier-gold .wholesale-tier-ey     { color: #B89244; }
      .tier-platinum .wholesale-tier-ey { color: #1947D1; }
      .wholesale-tier-from {
        font-family: 'Inter Tight', sans-serif;
        font-size: 22px;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: #0A0A0A;
        margin-bottom: 18px;
        line-height: 1;
      }
      .wholesale-tier-headline {
        font-family: 'Inter Tight', sans-serif;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.01em;
        color: #0A0A0A;
        line-height: 1.3;
        margin-bottom: 6px;
      }
      .wholesale-tier-sub {
        font-family: 'Inter Tight', sans-serif;
        font-size: 13px;
        color: #6B6B6B;
        line-height: 1.5;
        flex: 1;
      }
      .wholesale-tier-cta {
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid rgba(10,10,10,0.06);
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #1947D1;
      }
      .wholesale-cta-wrap { text-align: center; margin-top: 40px; }
      .wholesale-cta-primary {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 16px 30px;
        border-radius: 999px;
        background: linear-gradient(180deg, #2E5BE0 0%, #1947D1 55%, #1436A9 100%);
        color: #fff;
        font-family: 'Inter Tight', sans-serif;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        transition: background-color 220ms var(--ease-cinema), transform 220ms var(--ease-cinema), box-shadow 220ms var(--ease-cinema);
      }
      .wholesale-cta-primary:hover {
        transform: translateY(-1px);
        background: linear-gradient(180deg, #2450D6 0%, #1539B8 55%, #0F2E8A 100%);
        box-shadow: 0 10px 28px rgba(25, 71, 209, 0.22);
      }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .wholesale-h2 { color: #fff; }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .wholesale-body { color: rgba(255,255,255,0.72); }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .wholesale-tier {
        background: rgba(255,255,255,0.03);
        border-color: rgba(255,255,255,0.08);
      }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .wholesale-tier-from { color: #fff; }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .wholesale-tier-headline { color: #fff; }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .wholesale-tier-sub { color: rgba(255,255,255,0.55); }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .wholesale-tier-cta { border-top-color: rgba(255,255,255,0.08); color: #7fe7ff; }

      /* ============================================================
         CYCLE 8 — Activity ticker
         ============================================================ */
      .activity-ticker {
        position: fixed;
        bottom: 24px;
        left: 24px;
        z-index: 50;
        display: flex; align-items: center; gap: 12px;
        padding: 12px 14px 12px 16px;
        background: rgba(255,255,255,0.96);
        border: 1px solid rgba(25,71,209,0.12);
        border-radius: 14px;
        box-shadow: 0 12px 36px rgba(25, 71, 209, 0.12);
        backdrop-filter: blur(20px) saturate(160%);
        max-width: 340px;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 360ms var(--ease-cinema), transform 360ms var(--ease-cinema);
        pointer-events: none;
      }
      .activity-ticker.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
      .activity-ticker-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: #22A06B;
        box-shadow: 0 0 0 4px rgba(34,160,107,0.15);
        flex-shrink: 0;
      }
      .activity-ticker-body { flex: 1; min-width: 0; }
      .activity-ticker-msg {
        font-family: 'Inter Tight', sans-serif;
        font-size: 13px;
        line-height: 1.4;
        color: #2C2C2C;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .activity-ticker-msg strong { color: #0A0A0A; font-weight: 500; }
      .activity-ticker-when {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        color: #6B6B6B;
        margin-top: 2px;
      }
      .activity-ticker-close {
        background: transparent;
        border: 0;
        cursor: pointer;
        color: rgba(10,10,10,0.45);
        padding: 4px;
        margin-left: 4px;
        flex-shrink: 0;
        line-height: 0;
        border-radius: 999px;
        transition: background-color 180ms ease, color 180ms ease;
      }
      .activity-ticker-close:hover {
        background: rgba(10,10,10,0.06);
        color: rgba(10,10,10,0.85);
      }
      @media (max-width: 540px) {
        .activity-ticker { left: 12px; bottom: 12px; max-width: calc(100vw - 24px); }
        .activity-ticker-when { display: none; }
      }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .activity-ticker {
        background: rgba(7,10,20,0.92);
        border-color: rgba(255,255,255,0.10);
      }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .activity-ticker-msg { color: rgba(255,255,255,0.85); }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .activity-ticker-msg strong { color: #fff; }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .activity-ticker-when { color: rgba(255,255,255,0.50); }

      /* ============================================================
         CYCLE 8 — Referrals banner
         ============================================================ */
      .referrals-banner { padding: 0 0 80px; }
      .referrals-banner-card {
        display: flex; align-items: center; justify-content: space-between;
        gap: 24px;
        padding: 28px 32px;
        background: #E8EDFB;
        border: 1px solid rgba(25,71,209,0.10);
        border-radius: 16px;
        flex-wrap: wrap;
      }
      .referrals-banner-left { flex: 1; min-width: 280px; }
      .referrals-banner-ey {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10.5px; letter-spacing: 0.20em;
        text-transform: uppercase;
        color: #1947D1; opacity: 0.7;
        margin-bottom: 8px;
      }
      .referrals-banner-msg {
        font-family: 'Inter Tight', sans-serif;
        font-size: 16px;
        line-height: 1.5;
        color: #2C2C2C;
      }
      .referrals-banner-msg strong { color: #1947D1; font-weight: 500; }
      .referrals-banner-cta {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 12px 22px;
        border-radius: 999px;
        background: linear-gradient(180deg, #2E5BE0 0%, #1947D1 55%, #1436A9 100%);
        color: #fff;
        font-family: 'Inter Tight', sans-serif;
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color 200ms var(--ease-cinema), transform 200ms var(--ease-cinema), box-shadow 200ms var(--ease-cinema);
      }
      .referrals-banner-cta:hover {
        transform: translateY(-1px);
        background: linear-gradient(180deg, #2450D6 0%, #1539B8 55%, #0F2E8A 100%);
        box-shadow: 0 8px 24px rgba(25, 71, 209, 0.20);
      }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .referrals-banner-card {
        background: rgba(255,255,255,0.04);
        border-color: rgba(255,255,255,0.08);
      }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .referrals-banner-msg { color: rgba(255,255,255,0.85); }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .referrals-banner-msg strong { color: #7fe7ff; }

      /* ============================================================
         CYCLE 8 — Newsletter COA form
         ============================================================ */
      .newsletter-coa-form {
        display: flex; flex-direction: column; gap: 10px;
      }
      .newsletter-coa-input {
        height: 56px;
        padding: 0 22px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.20);
        background: rgba(255,255,255,0.06);
        color: #fff;
        font-family: 'Inter Tight', sans-serif;
        font-size: 14.5px;
        outline: none;
        transition: border-color 200ms var(--ease-cinema), background-color 200ms var(--ease-cinema);
      }
      .newsletter-coa-input::-moz-placeholder { color: rgba(255,255,255,0.40); }
      .newsletter-coa-input::placeholder { color: rgba(255,255,255,0.40); }
      .newsletter-coa-input:focus {
        border-color: rgba(127,170,255,0.55);
        background: rgba(255,255,255,0.10);
      }
      .newsletter-coa-btn { width: 100%; }
      .newsletter-coa-meta {
        font-size: 10.5px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.40);
        margin-top: 4px;
        text-align: left;
      }
      html[data-palette="cobalt"] .newsletter-coa-input {
        background: rgba(255,255,255,0.85);
        border-color: rgba(10,10,10,0.10);
        color: var(--ink);
      }
      html[data-palette="cobalt"] .newsletter-coa-input::-moz-placeholder { color: rgba(10,10,10,0.40); }
      html[data-palette="cobalt"] .newsletter-coa-input::placeholder { color: rgba(10,10,10,0.40); }
      html[data-palette="cobalt"] .newsletter-coa-meta { color: rgba(255,255,255,0.65); }

      /* ============================================================
         CYCLE 8 — Cart drawer bulk discount note
         ============================================================ */
      .pdrawer-bulk {
        margin-top: 6px;
        font-size: 10.5px;
        letter-spacing: 0.10em;
        opacity: 0.60;
        line-height: 1.5;
      }
      .catalog-bulk-note {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(10,10,10,0.06);
        font-size: 10.5px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0.60;
      }
      html:not([data-palette="cobalt"]):not([data-palette="paper"]):not([data-palette="ivory"]) .catalog-bulk-note {
        border-top-color: rgba(255,255,255,0.08);
      }

      /* ============================================================
         VISUAL HARMONY UPGRADE — scroll-behaviour, transitions,
         hover micro-interactions, section bridges, reveal variants
         ============================================================ */

      /* Global smooth scroll */
      html {
        scroll-behavior: smooth;
      }

      /* ── Hero → light-body section blend (cobalt) ──────────────── */
      /* In cobalt mode everything is light (#F4F6FE / #FAFAFC).
         No dark bridge is needed — instead we add a very subtle bottom
         shadow that lifts the section off the page without going dark. */
      html[data-palette="cobalt"] .edu-section {
        position: relative;
      }
      html[data-palette="cobalt"] .edu-section::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 60px;
        background: linear-gradient(
          to bottom,
          rgba(244, 246, 254, 0) 0%,
          rgba(238, 242, 249, 0.7) 100%
        );
        pointer-events: none;
        z-index: 1;
      }

      /* ── Reveal variants (from-left / from-right) ──────────────── */
      /* Cycle 4 — reveal polish: dropped filter:blur (animating filter is the
         documented jank source the base .reveal already removed), moved to
         translate3d for GPU compositing, and tightened durations to ~760ms to
         match the refined base reveal. Only transform + opacity animate now. */
      .reveal-left {
        opacity: 0;
        transform: translate3d(-32px, 0, 0);
        transition:
          opacity 760ms var(--ease-out-expo),
          transform 760ms var(--ease-out-expo);
        transition-delay: var(--reveal-delay, 0ms);
        will-change: transform, opacity;
      }
      .reveal-left.in {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
      .reveal-right {
        opacity: 0;
        transform: translate3d(32px, 0, 0);
        transition:
          opacity 760ms var(--ease-out-expo),
          transform 760ms var(--ease-out-expo);
        transition-delay: var(--reveal-delay, 0ms);
        will-change: transform, opacity;
      }
      .reveal-right.in {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
      .reveal-scale {
        opacity: 0;
        transform: scale(0.94);
        transition:
          opacity 720ms var(--ease-out-expo),
          transform 720ms var(--ease-out-expo);
        transition-delay: var(--reveal-delay, 0ms);
        will-change: transform, opacity;
      }
      .reveal-scale.in {
        opacity: 1;
        transform: scale(1);
      }

      /* ── Reduced-motion: honour system preference ───────────────── */
      @media (prefers-reduced-motion: reduce) {
        .reveal, .reveal-left, .reveal-right, .reveal-scale {
          transition: opacity 200ms linear !important;
          transform: none !important;
          filter: none !important;
        }
      }

      /* ── Product card hover lift ────────────────────────────────── */
      .product-card {
        transition:
          transform 340ms var(--ease-cinema),
          box-shadow 340ms var(--ease-cinema),
          border-color 340ms var(--ease-cinema);
      }
      .product-card:hover {
        transform: translateY(-4px) scale(1.008);
        box-shadow:
          0 0 0 1px rgba(127,170,255,0.14),
          0 12px 40px rgba(0,0,0,0.35),
          0 32px 64px rgba(0,0,0,0.18);
      }

      /* ── Stack card hover lift ─────────────────────────────────── */
      .stack-card {
        transition:
          transform 340ms var(--ease-cinema),
          box-shadow 340ms var(--ease-cinema),
          border-color 340ms var(--ease-cinema);
      }
      .stack-card:hover {
        transform: translateY(-3px);
        box-shadow:
          0 0 0 1px rgba(255,255,255,0.10),
          0 16px 48px rgba(0,0,0,0.32);
      }

      /* ── edu-pillar lift already exists but strengthen ──────────── */
      .edu-pillar {
        cursor: default;
        will-change: transform;
      }

      /* ── Btn active / focus ring ────────────────────────────────── */
      .hero-cta-primary:active,
      .edu-cta:active,
      .quiz-cta-primary:active {
        transform: scale(0.97) translateY(0);
        transition-duration: 80ms;
      }
      .hero-cta-primary:focus-visible,
      .edu-cta:focus-visible,
      .quiz-cta-primary:focus-visible,
      .hero-cta-secondary:focus-visible {
        outline: 2.5px solid #1947D1;
        outline-offset: 3px;
      }
      .hero-cta-secondary:active {
        transform: scale(0.97);
        transition-duration: 80ms;
      }

      /* ── Add-to-cart button pulse on hover ─────────────────────── */
      .card-add-btn {
        transition:
          background-color 180ms var(--ease-cinema),
          transform 180ms var(--ease-cinema),
          box-shadow 180ms var(--ease-cinema);
      }
      .card-add-btn:hover {
        transform: scale(1.06);
        box-shadow: 0 4px 14px rgba(255,255,255,0.18);
      }
      .card-add-btn:active {
        transform: scale(0.96);
      }

      /* ── WhatsApp float — entrance animation ────────────────────── */
      .wa-float {
        animation: wa-enter 0.55s var(--ease-out-expo) 1.2s both;
      }
      @keyframes wa-enter {
        from { opacity: 0; transform: scale(0.6) translateY(20px); }
        to   { opacity: 1; transform: scale(1) translateY(0); }
      }
      .wa-float:hover {
        transform: scale(1.08) !important;
        transition: transform 200ms var(--ease-cinema);
      }

      /* ── Activity ticker entrance ───────────────────────────────── */
      @keyframes ticker-enter {
        from { opacity: 0; transform: translateX(-24px); }
        to   { opacity: 1; transform: translateX(0); }
      }
      .activity-ticker.on {
        animation: ticker-enter 0.45s var(--ease-out-expo) forwards;
      }

      /* ── Quiz section top — no dark overlay in cobalt ─────────────── */
      /* In cobalt (light mode) there is no dark section before quiz,
         so the dark-top gradient would create an ugly black band.
         Remove it entirely; the section separator already provides rhythm. */
      html[data-palette="cobalt"] .quiz-section {
        position: relative;
      }
      html[data-palette="cobalt"] .quiz-section::before {
        display: none;
      }

      /* ── Product card scanline speed-up on hover ────────────────── */
      .product-card:hover .scanline {
        animation-duration: 2.8s;
        opacity: 1;
      }

      /* ── Hero float card entrance animation ─────────────────────── */
      @keyframes float-card-enter {
        from { opacity: 0; transform: translateY(20px) scale(0.96); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
      }
      .hero-float-card {
        animation: float-card-enter 0.65s var(--ease-out-expo) 0.4s both;
      }

      /* ── Wholesale tier card hover ──────────────────────────────── */
      .wholesale-tier {
        transition:
          transform 280ms var(--ease-cinema),
          box-shadow 280ms var(--ease-cinema),
          border-color 280ms var(--ease-cinema);
      }
      .wholesale-tier:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 44px rgba(25, 71, 209, 0.20);
      }

      /* ── Section dividers — subtle horizontal separator line ─────── */
      .catalog-section-rule {
        width: 1px;
        height: 48px;
        background: linear-gradient(
          to bottom,
          transparent,
          rgba(255,255,255,0.14) 30%,
          rgba(255,255,255,0.14) 70%,
          transparent
        );
        margin: 0 auto;
      }

      /* ── Chips / filter buttons hover ─────────────────────────────── */
      .chip-cat {
        transition:
          background 220ms var(--ease-cinema),
          border-color 220ms var(--ease-cinema),
          color 220ms var(--ease-cinema),
          transform 180ms var(--ease-cinema);
      }
      .chip-cat:hover:not([aria-pressed="true"]) {
        border-color: rgba(255,255,255,0.30) !important;
        color: rgba(255,255,255,0.90) !important;
        transform: translateY(-1px);
      }

      /* ── Nav links hover underline animation ─────────────────────── */
      .nav-link {
        position: relative;
      }
      .nav-link::after {
        content: '';
        position: absolute;
        bottom: -2px; left: 50%; right: 50%;
        height: 1.5px;
        background: currentColor;
        transition: left 220ms var(--ease-cinema), right 220ms var(--ease-cinema);
        opacity: 0.5;
      }
      .nav-link:hover::after {
        left: 0; right: 0;
      }

      /* ── Review cards hover ──────────────────────────────────────── */
      .review-card {
        transition:
          transform 280ms var(--ease-cinema),
          box-shadow 280ms var(--ease-cinema);
      }
      .review-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 36px rgba(0,0,0,0.22);
      }

      /* ── Glass card hover brightness ──────────────────────────────── */
      .glass {
        transition:
          box-shadow 300ms var(--ease-cinema),
          transform 300ms var(--ease-cinema),
          background-color 300ms var(--ease-cinema);
      }

      /* ── Scroll progress indicator ────────────────────────────────── */
      @keyframes scroll-hint {
        0%   { transform: translateY(0);    opacity: 0.6; }
        60%  { transform: translateY(6px);  opacity: 0.9; }
        100% { transform: translateY(0);    opacity: 0.6; }
      }

      /* ── Form input focus glow ─────────────────────────────────────── */
      .newsletter-coa-input:focus,
      input[type="email"]:focus,
      input[type="text"]:focus,
      textarea:focus {
        outline: none;
        box-shadow: 0 0 0 2.5px rgba(25, 71, 209, 0.28);
        border-color: rgba(25,71,209,0.45) !important;
        transition: box-shadow 180ms var(--ease-cinema), border-color 180ms var(--ease-cinema);
      }

      /* ── Cobalt hero: product glow pulse ───────────────────────────── */
      @keyframes cobalt-glow-pulse {
        0%,  100% { opacity: 0.45; transform: scale(1); }
        50%         { opacity: 0.68; transform: scale(1.06); }
      }
      html[data-palette="cobalt"] .hero-product-glow {
        animation: cobalt-glow-pulse 6s ease-in-out infinite !important;
      }

      /* ── Transition speed adjustments per motion setting ──────────── */
      html[data-motion="smooth"] .reveal,
      html[data-motion="smooth"] .reveal-left,
      html[data-motion="smooth"] .reveal-right {
        transition-duration: 600ms;
        filter: none !important;
      }
      html[data-motion="dramatic"] .reveal,
      html[data-motion="dramatic"] .reveal-left,
      html[data-motion="dramatic"] .reveal-right {
        transform: translateY(40px);
        filter: blur(10px);
        transition-duration: 1500ms;
      }
      html[data-motion="reduced"] .reveal,
      html[data-motion="reduced"] .reveal-left,
      html[data-motion="reduced"] .reveal-right,
      html[data-motion="reduced"] .reveal-scale {
        transform: none !important;
        filter: none !important;
        transition-duration: 200ms;
      }

      /* ── Cobalt palette: Hero CTA primary dark glow ────────────────── */
      html[data-palette="cobalt"] .hero-cta-primary {
        box-shadow:
          0 1px 2px rgba(25, 71, 209, 0.14),
          0 4px 16px rgba(25, 71, 209, 0.28),
          0 0 0 0.5px rgba(25, 71, 209, 0.18);
      }
      html[data-palette="cobalt"] .hero-cta-primary:hover {
        box-shadow:
          0 2px 4px rgba(25, 71, 209, 0.18),
          0 8px 28px rgba(25, 71, 209, 0.30),
          0 0 0 0.5px rgba(25, 71, 209, 0.28);
      }

      /* ── Carousel image fallback (vial placeholder) ────────────────── */
      .hero-carousel-fallback {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        min-height: 280px;
        opacity: 0.7;
      }
      .hero-carousel-fallback .vial {
        width: 120px;
        height: auto;
        filter: drop-shadow(0 8px 32px rgba(127,170,255,0.25));
      }

      /* ═══════════════════════════════════════════════════════════════
         HERO PEDESTAL LAYER — .hero-podium-layer
         Positioned at bottom-center of hero, above video, below carousel.
         ═══════════════════════════════════════════════════════════════ */
      .hero-podium-layer {
        position: absolute;
        left: 50%;
        bottom: 0;
        width: min(820px, 78vw);
        transform: translateX(-50%);
        z-index: 1;
        pointer-events: none;
      }
      .hero-podium-layer img {
        width: 100%;
        display: block;
        animation: podiumGlow 5.5s ease-in-out infinite;
      }
      @keyframes podiumGlow {
        0%, 100% {
          opacity: 0.92;
          filter: drop-shadow(0 20px 38px rgba(20, 70, 190, 0.14));
        }
        50% {
          opacity: 1;
          filter: drop-shadow(0 26px 52px rgba(20, 70, 190, 0.26));
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .hero-podium-layer img { animation: none; }
      }

      /* ═══════════════════════════════════════════════════════════════
         GLOBAL ANIMATED BACKGROUND — site-bg-video
         Fixed layer behind all content. z-index: -2.
         pointer-events: none → never blocks clicks or hover.
         Fallback gradient shows if video can't load.
         ═══════════════════════════════════════════════════════════════ */
      .site-bg-video {
        position: fixed;
        inset: 0;
        z-index: -2;
        overflow: hidden;
        pointer-events: none;
        /* Fallback gradient while video loads or on unsupported devices */
        background: linear-gradient(180deg, #f7faff 0%, #eef5ff 45%, #ffffff 100%);
      }

      /* ── Video de fondo: cubre todo, opacidad sutil ─────────────── */
      .site-bg-video__vid {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        opacity: 0.35;
        pointer-events: none;
      }
      /* El <video> arranca invisible y hace fade-in a 0.35 cuando reproduce.
         Si iOS bloquea el autoplay, queda en opacity:0 y se ve solo el
         poster (sin botón de play nativo). El poster mantiene su 0.35. */
      .site-bg-video video.site-bg-video__vid {
        opacity: 0;
        transition: opacity 0.8s ease;
      }
      .site-bg-video video.site-bg-video__vid.is-playing { opacity: 0.35; }

      /* ── Orbs: floating gradient spheres ─────────────────────────── */
      .site-bg-orb {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        will-change: transform;
      }

      /* Orb 1 — cobalt azul, top-left, lento */
      .site-bg-orb--1 {
        width: 700px; height: 700px;
        background: radial-gradient(circle at center,
          rgba(25,71,209,0.09) 0%,
          rgba(25,71,209,0.04) 45%,
          transparent 70%);
        top: -180px; left: -180px;
        animation: orb-drift-1 18s ease-in-out infinite alternate;
      }

      /* Orb 2 — lavanda, top-right */
      .site-bg-orb--2 {
        width: 550px; height: 550px;
        background: radial-gradient(circle at center,
          rgba(120,100,230,0.07) 0%,
          rgba(120,100,230,0.03) 50%,
          transparent 72%);
        top: 5%; right: -120px;
        animation: orb-drift-2 22s ease-in-out infinite alternate;
      }

      /* Orb 3 — cyan frío, centro */
      .site-bg-orb--3 {
        width: 480px; height: 480px;
        background: radial-gradient(circle at center,
          rgba(56,189,248,0.06) 0%,
          rgba(56,189,248,0.02) 50%,
          transparent 70%);
        top: 40%; left: 50%;
        transform: translateX(-50%);
        animation: orb-drift-3 26s ease-in-out infinite alternate;
      }

      /* Orb 4 — cobalt suave, bottom-right */
      .site-bg-orb--4 {
        width: 600px; height: 600px;
        background: radial-gradient(circle at center,
          rgba(25,71,209,0.06) 0%,
          rgba(99,102,241,0.03) 50%,
          transparent 70%);
        bottom: -150px; right: -100px;
        animation: orb-drift-4 20s ease-in-out infinite alternate;
      }

      @keyframes orb-drift-1 {
        0%   { transform: translate(0px, 0px) scale(1); }
        33%  { transform: translate(80px, 60px) scale(1.08); }
        66%  { transform: translate(40px, 120px) scale(0.96); }
        100% { transform: translate(100px, 50px) scale(1.05); }
      }

      @keyframes orb-drift-2 {
        0%   { transform: translate(0px, 0px) scale(1); }
        33%  { transform: translate(-70px, 80px) scale(1.10); }
        66%  { transform: translate(-30px, 40px) scale(0.94); }
        100% { transform: translate(-90px, 100px) scale(1.06); }
      }

      @keyframes orb-drift-3 {
        0%   { transform: translateX(-50%) translateY(0px) scale(1); }
        33%  { transform: translateX(-42%) translateY(-60px) scale(1.12); }
        66%  { transform: translateX(-58%) translateY(40px) scale(0.92); }
        100% { transform: translateX(-45%) translateY(-30px) scale(1.07); }
      }

      @keyframes orb-drift-4 {
        0%   { transform: translate(0px, 0px) scale(1); }
        33%  { transform: translate(-60px, -80px) scale(1.09); }
        66%  { transform: translate(-100px, -40px) scale(0.95); }
        100% { transform: translate(-50px, -90px) scale(1.04); }
      }

      /* ── Accessibility: honour prefers-reduced-motion ─────────────── */
      @media (prefers-reduced-motion: reduce) {
        .site-bg-orb { animation: none !important; }
      }

      /* ══════════════════════════════════════════════════════════════
         GLOBAL INTERACTION DEPTH — 300ms spring hover
         Aplica a todos los botones, iconos e inputs del sitio.
         Spring easing (0.34,1.36,0.64,1) da sensación de profundidad.
         ══════════════════════════════════════════════════════════════ */

      /* Base: todos los elementos interactivos usan 300ms spring */
      button:not(:disabled),
      a,
      [role="button"],
      input[type="submit"],
      input[type="button"],
      label[for],
      .chip,
      .tag,
      select {
        transition-property: transform, box-shadow, background, background-color,
                             border-color, color, opacity, filter;
        transition-duration: 300ms;
        transition-timing-function: cubic-bezier(0.34, 1.36, 0.64, 1);
      }

      /* Hover: lift + shadow para botones y links de acción */
      button:not(:disabled):not(.no-depth):hover,
      [role="button"]:not(.no-depth):hover {
        transform: translateY(-2px) scale(1.015);
      }

      /* Iconos SVG dentro de botones: heredan la escala del padre */
      button svg, a svg, [role="button"] svg {
        transition: transform 300ms cubic-bezier(0.34, 1.36, 0.64, 1);
      }
      button:hover svg, a:hover svg, [role="button"]:hover svg {
        transform: scale(1.12);
      }

      /* Inputs, selects, textareas: borde y shadow al focus/hover */
      input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
      textarea,
      select {
        transition: border-color 300ms ease,
                    box-shadow   300ms cubic-bezier(0.34, 1.36, 0.64, 1);
      }
      input:not([type="submit"]):not([type="button"]):hover,
      textarea:hover,
      select:hover {
        box-shadow: 0 0 0 3px rgba(25, 71, 209, 0.08);
      }
      input:focus, textarea:focus, select:focus {
        box-shadow: 0 0 0 3px rgba(25, 71, 209, 0.18);
      }

      /* Checkboxes y radios: scale spring */
      input[type="checkbox"],
      input[type="radio"] {
        transition: transform 300ms cubic-bezier(0.34, 1.36, 0.64, 1),
                    box-shadow 300ms ease;
        cursor: pointer;
      }
      input[type="checkbox"]:hover,
      input[type="radio"]:hover {
        transform: scale(1.15);
      }
      input[type="checkbox"]:checked,
      input[type="radio"]:checked {
        transform: scale(1.08);
      }

      /* No aplicar depth a capas de fondo y elementos de layout */
      .site-bg-video *,
      .field,
      .grain,
      .no-depth {
        transition: none !important;
        transform: none !important;
      }

      /* ══════════════════════════════════════════════════════════════
         FOCUS RING — anillo azul en todos los elementos seleccionados
         Usa :focus-visible para que solo aparezca con teclado/tab,
         no en clicks con mouse (comportamiento nativo correcto).
         ══════════════════════════════════════════════════════════════ */
      :focus { outline: none; }

      :focus-visible {
        outline: 2.5px solid #1947D1;
        outline-offset: 3px;
        border-radius: 6px;
        box-shadow:
          0 0 0 4px rgba(25, 71, 209, 0.15),
          0 0 12px rgba(25, 71, 209, 0.12);
        transition: outline-color 150ms ease, box-shadow 150ms ease;
      }

      /* Ajustes para elementos con border-radius propio */
      button:focus-visible,
      a:focus-visible,
      [role="button"]:focus-visible {
        border-radius: 8px;
        outline-offset: 4px;
      }

      input:focus-visible,
      select:focus-visible,
      textarea:focus-visible {
        outline-offset: 2px;
        border-radius: 8px;
      }

      /* Botones pill (border-radius: 99px) — ring sigue la forma */
      .hero-cta-primary:focus-visible,
      .hero-cta-secondary:focus-visible,
      .hero-avatar-arrow:focus-visible,
      .hero-avatar-dot:focus-visible {
        border-radius: 99px;
        outline-offset: 4px;
      }

      /* ╔═══════════════════════════════════════════════════════════════╗
         ║  MOBILE OPTIMIZATION — 10 CICLOS COMPLETOS                   ║
         ║  Objetivo: experiencia mobile equivalente al desktop          ║
         ╚═══════════════════════════════════════════════════════════════╝ */

      /* ──────────────────────────────────────────────────────────────
         CICLO 1 · PDP LAYOUT REORDER (FIX CRÍTICO)
         En desktop: LEFT (gallery + tabs) | RIGHT (name/price/buy)
         En mobile: queremos RIGHT primero, luego LEFT
         Implementación: order CSS en el grid de 1 columna
         ────────────────────────────────────────────────────────────── */
      /* Foto del producto en móvil: oculta por defecto (desktop usa galería izq) */
      .pdp-mobile-photo { display: none; }

      @media (max-width: 1023px) {
        /* Columna derecha arriba del todo, pero SIN ocultar la imagen:
           ahora la foto vive dentro de esta columna (.pdp-mobile-photo). */
        .pdp-right { order: -1; margin-bottom: 12px; }

        /* Ocultar la galería/thumbs de la columna izquierda en móvil:
           la foto se muestra dentro de la columna derecha, debajo del título,
           para que el artículo se vea correctamente al entrar. */
        .pdp-gallery, .pdp-thumbs { display: none !important; }
        .lg\:col-span-7 { margin-top: 0; }

        /* Foto del producto dentro de la columna derecha (solo móvil) */
        .pdp-mobile-photo {
          display: block;
          position: relative;
          width: 100%;
          aspect-ratio: 4/3;
          border-radius: 18px;
          overflow: hidden;
          margin: 14px 0 18px;
          background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(232,237,251,0.85));
          border: 1px solid var(--line, #E5E7EB);
        }
        .pdp-mobile-photo .pdp-photo,
        .pdp-mobile-photo img {
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
             object-fit: cover;
          display: block;
        }
        .pdp-mobile-photo .pdp-photo-wrap {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        /* Móvil: ocultar el strip de tabs y mostrar TODA la info apilada */
        .pdp-tabs-sticky { display: none !important; }
        .pdp-tab-content { padding-top: 8px; min-height: 0; }
        .pdp-panel { display: block !important; }
        .pdp-panel + .pdp-panel {
          margin-top: 28px;
          padding-top: 26px;
          border-top: 1px solid rgba(255,255,255,0.08);
        }
        .pdp-panel-title {
          display: block;
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: rgb(var(--cyan));
          margin: 0 0 14px;
        }

        /* Crumb más compacto en mobile */
        .pdp-crumb { margin-bottom: 16px; font-size: 10px; }
      }

      @media (max-width: 767px) {
        /* PDP main: menos padding top en mobile */
        .pdp-main { padding-top: 80px !important; }

        /* Galería 4:3 también en pantallas pequeñas — foto edge-to-edge */
        .pdp-gallery {
          aspect-ratio: 4/3;
          border-radius: 14px;
        }

        /* Thumbs: 4 en fila, más pequeños */
        .pdp-thumbs { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
        .pdp-thumb { border-radius: 8px; }
        .pdp-thumb svg { width: 50%; height: 50%; }
      }

      /* ──────────────────────────────────────────────────────────────
         CICLO 2 · PDP NOMBRE, PRECIO Y CTA EN MOBILE
         ────────────────────────────────────────────────────────────── */
      @media (max-width: 767px) {
        /* Eyebrow más compacto */
        .pdp-eyebrow { font-size: 9px; letter-spacing: 0.14em; margin-bottom: 10px; }

        /* H1 del producto: legible pero no gigante */
        .pdp-h1 { font-size: clamp(34px, 10vw, 52px) !important; line-height: 0.95 !important; margin-bottom: 8px; }

        /* Tagline: más pequeño */
        .pdp-tagline { font-size: 14px; margin-bottom: 20px; line-height: 1.45; }

        /* Price card: mejor padding en mobile */
        .pdp-price-card { padding: 18px 16px 16px; border-radius: 16px; margin-bottom: 14px; }

        /* Variants pills: en fila, 100% width por pill */
        .pdp-variants { gap: 7px; margin-bottom: 16px; flex-wrap: wrap; }
        .pdp-variant-pill { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 12px 10px; border-radius: 10px; }
        .pdp-variant-size { font-size: 10px; }
        .pdp-variant-price { font-size: 17px; }

        /* Precio grande: más ajustado */
        .pdp-price-from { font-size: 9px; }
        .pdp-price-big { font-size: 40px !important; margin: 4px 0 3px; }
        .pdp-price-big sup { font-size: 18px; vertical-align: 22px; }
        .pdp-price-permg { font-size: 10px; }

        /* Botones de compra: full width */
        .pdp-buy-row { margin-top: 16px; gap: 8px; }
        .pdp-add-cart { width: 100%; padding: 16px 20px; font-size: 15px; border-radius: 999px; }
        .pdp-add-stack { width: 100%; padding: 14px 20px; font-size: 13px; }

        /* Trust row más compacto */
        .pdp-trust-row {
          gap: 10px; padding: 12px 0; font-size: 10px;
          flex-wrap: wrap; justify-content: flex-start;
        }
        .pdp-trust-row span { flex: 1 1 calc(50% - 6px); min-width: 0; }

        /* Stack card link */
        .pdp-stack-card-link { padding: 14px 16px; border-radius: 12px; margin-top: 0; }
        .pdp-stack-card-label { font-size: 9px; }
        .pdp-stack-card-name { font-size: 13px; }

        /* Ship info */
        .pdp-ship-info { font-size: 11px; margin-top: 12px; }
      }

      /* ──────────────────────────────────────────────────────────────
         CICLO 3 · PDP TABS Y CONTENIDO EN MOBILE
         ────────────────────────────────────────────────────────────── */
      @media (max-width: 767px) {
        /* Tabs strip: scroll horizontal sin que se vea feo */
        .pdp-tabs-sticky {
          margin: 24px -20px 0 !important;
          padding: 0 20px !important;
          gap: 0 !important;
          border-radius: 0;
        }
        .pdp-tab {
          padding: 14px 11px !important;
          font-size: 12px !important;
          letter-spacing: 0;
        }

        /* Tab content: más compacto */
        .pdp-tab-content { padding-top: 24px; min-height: 200px; }
        .pdp-tab-content p { font-size: 14px; line-height: 1.6; }

        /* Bullets */
        .pdp-bullets { margin-top: 16px; gap: 8px; }
        .pdp-bullet { font-size: 13px; gap: 10px; }

        /* Mechanism grid: siempre 1 columna en mobile */
        .pdp-mech-grid { grid-template-columns: 1fr !important; gap: 10px; }
        .pdp-mech { padding: 14px 16px; border-radius: 10px; }
        .pdp-mech-title { font-size: 13px; }
        .pdp-mech-desc { font-size: 12px; }

        /* Citations */
        .pdp-cite { gap: 10px; padding: 14px 0; }
        .pdp-cite-text { font-size: 13px; }
        .pdp-cite-doi { font-size: 10px; }

        /* Specs table */
        .pdp-spec td { font-size: 12px; padding: 12px 0; }
        .pdp-spec td:first-child { font-size: 9px; width: 42%; padding-right: 16px; }

        /* COA card */
        .pdp-coa-card { padding: 18px 16px; border-radius: 12px; }
        .pdp-coa-row span:first-child { font-size: 10px; }
        .pdp-coa-row span:last-child { font-size: 12px; }
        .pdp-coa-dl { font-size: 10px; padding: 9px 14px; }

        /* Steps */
        .pdp-step { padding: 14px 16px; border-radius: 10px; }
        .pdp-step-num { font-size: 10px; }
        .pdp-step-title { font-size: 13px; }
        .pdp-step-desc { font-size: 12px; }
        .pdp-cold-note { font-size: 12px; padding: 12px 14px; border-radius: 10px; }

        /* FAQ */
        .pdp-faq-q { font-size: 14px; padding: 16px 0; }
        .pdp-faq-plus { font-size: 16px; }
        .pdp-faq-a-inner { font-size: 13px; }
      }

      /* ──────────────────────────────────────────────────────────────
         CICLO 4 · PDP STICKY BAR (barra inferior)
         ────────────────────────────────────────────────────────────── */
      @media (max-width: 767px) {
        .pdp-sticky { padding: 10px 16px; gap: 10px; }
        .pdp-sticky-thumb { width: 36px; height: 48px; border-radius: 6px; }
        .pdp-sticky-name { font-size: 13px; }
        .pdp-sticky-price { font-size: 11px; }
        .pdp-sticky-cta { padding: 12px 18px; font-size: 13px; border-radius: 999px; white-space: nowrap; }
        body.pdp-active { padding-bottom: 78px !important; }
      }

      /* ──────────────────────────────────────────────────────────────
         CICLO 5 · NAVBAR MOBILE
         ────────────────────────────────────────────────────────────── */
      @media (max-width: 767px) {
        /* Navbar pill: menos padding horizontal */
        .nav-pill { padding-left: 14px !important; padding-right: 14px !important; }

        /* Logo: tamaño adecuado */
        .nav-logo { font-size: 14px !important; letter-spacing: -0.01em; }

        /* Mobile nav drawer: mejor espaciado */
        .mnav-inner { padding: 20px 20px 32px !important; }
        .mnav-section-title { font-size: 9px; margin-bottom: 8px; }
        .mnav-link { padding: 13px 0; font-size: 16px; }
        .mnav-sub { font-size: 11px; }
        .mnav-divider { margin: 12px 0; }
        .mnav-cta { padding: 16px 18px; font-size: 14px; margin-top: 8px; }

        /* Mobile menu overlay */
        .mnav-overlay { backdrop-filter: blur(8px); }
      }

      /* ──────────────────────────────────────────────────────────────
         CICLO 6 · CATÁLOGO / SHOP GRID EN MOBILE
         ────────────────────────────────────────────────────────────── */
      @media (max-width: 767px) {
        /* Shop page: padding top */
        .shop-page-wrap, [class*="shop"] > .mx-auto { padding-top: 90px; }

        /* Product card: mejor proporciones */
        .product-card {
          padding: 14px !important;
          padding-bottom: 72px !important;
          border-radius: 14px;
        }
        .product-card h3 { font-size: 16px !important; line-height: 1.2; }
        .product-card .card-badge { font-size: 9px; padding: 3px 8px; }
        .product-card .card-price { font-size: 18px !important; }
        .product-card .card-desc { font-size: 12px; -webkit-line-clamp: 2; }

        /* Add to cart pill en mobile: siempre visible */
        .card-add-pill {
          left: 10px !important;
          right: 10px !important;
          bottom: 10px !important;
          padding: 11px 14px !important;
          font-size: 11px !important;
          border-radius: 999px;
          transform: none !important;
          opacity: 1 !important;
        }

        /* Category filter tabs: scroll horizontal */
        .category-tabs, [class*="cat-filter"] {
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          scrollbar-width: none;
          padding-bottom: 2px;
          -webkit-overflow-scrolling: touch;
        }
        .category-tabs::-webkit-scrollbar { display: none; }
      }

      @media (max-width: 480px) {
        /* 1 columna en pantallas muy pequeñas para no apretar cards */
        /* Mantener 2 cols pero con gap reducido */
        .grid.sm\:grid-cols-2.lg\:grid-cols-3 { gap: 8px !important; }
      }

      /* ──────────────────────────────────────────────────────────────
         CICLO 7 · HERO SECTION EN MOBILE
         ────────────────────────────────────────────────────────────── */
      @media (max-width: 767px) {
        /* Hero: reducir padding top */
        .hero-section, section.hero { padding-top: 80px !important; }

        /* Hero text: clamp más agresivo */
        .hero h1 {
          font-size: clamp(42px, 11vw, 72px) !important;
          line-height: 0.95 !important;
          letter-spacing: -0.03em !important;
        }

        /* Hero subtext */
        .hero-sub, .hero p:not(h1) {
          font-size: 15px !important;
          line-height: 1.55 !important;
          max-width: 100% !important;
        }

        /* Hero CTAs: full width en mobile */
        .hero-actions {
          flex-direction: column !important;
          width: 100% !important;
          gap: 10px !important;
        }
        .hero-cta-primary, .hero-cta-secondary {
          width: 100% !important;
          text-align: center !important;
          justify-content: center !important;
          padding: 16px 20px !important;
          font-size: 15px !important;
        }

        /* Hero carousel: altura reducida */
        .hero-carousel, [class*="hero-visual"] {
          height: 55vw !important;
          min-height: 220px;
          max-height: 340px;
        }

        /* Hero trust avatars: compactar */
        .hero-avatar-row { gap: 6px; }
        .hero-avatar-label { font-size: 11px; }
      }

      /* ──────────────────────────────────────────────────────────────
         CICLO 8 · TOUCH TARGETS & ACCESIBILIDAD MOBILE
         ────────────────────────────────────────────────────────────── */
      @media (max-width: 1023px) {
        /* Todos los botones: mínimo 44px de alto (Apple HIG / Google Material) */
        button, [role="button"], a.btn, .btn {
          min-height: 44px;
        }

        /* Excepciones: pills de categoría y thumbs pueden ser más pequeños */
        .pdp-thumb, .pdp-tab, .category-pill {
          min-height: 36px;
        }

        /* Links de nav mobile: área de toque grande */
        .mnav-link { min-height: 52px; display: flex; align-items: center; }

        /* Inputs: mínimo 48px */
        input, select, textarea {
          min-height: 48px;
          font-size: 16px !important; /* Evita zoom automático en iOS */
        }

        /* Checkboxes y radios: área de toque */
        input[type="checkbox"], input[type="radio"] {
          min-height: auto;
          width: 20px; height: 20px;
        }
      }

      /* ──────────────────────────────────────────────────────────────
         CICLO 9 · CART DRAWER & CHECKOUT EN MOBILE
         ────────────────────────────────────────────────────────────── */
      @media (max-width: 767px) {
        /* Cart drawer: full width en mobile */
        .pdrawer {
          width: 100% !important;
          max-width: 100% !important;
          border-radius: 20px 20px 0 0 !important;
          bottom: 0 !important;
          top: auto !important;
          height: 85vh !important;
          right: 0 !important;
        }

        /* Handle visible */
        .pdrawer::before { display: block !important; }

        /* Drawer header */
        .pdrawer-head { padding: 20px 20px 16px !important; }

        /* Drawer body: scroll */
        .pdrawer-body {
          padding: 0 20px 20px !important;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          max-height: calc(85vh - 80px);
        }

        /* Items del cart */
        .cart-item { gap: 12px; padding: 14px 0; }
        .cart-item-img { width: 52px; height: 68px; border-radius: 8px; }
        .cart-item-name { font-size: 14px; }
        .cart-item-price { font-size: 13px; }
        .cart-total-row { font-size: 15px; padding: 16px 0; }
        .cart-checkout-btn {
          width: 100%; padding: 16px; font-size: 15px;
          border-radius: 999px; margin-top: 12px;
        }
      }

      /* ──────────────────────────────────────────────────────────────
         CICLO 10 · POLISH GLOBAL: SPACING, FOOTER, MISC
         ────────────────────────────────────────────────────────────── */
      @media (max-width: 767px) {
        /* Secciones: padding vertical reducido */
        section { padding-left: 20px !important; padding-right: 20px !important; }
        .px-5 { padding-left: 18px !important; padding-right: 18px !important; }
        .px-8 { padding-left: 20px !important; padding-right: 20px !important; }

        /* Headings de sección: más compactos */
        .display.text-3xl { font-size: clamp(26px, 7vw, 36px) !important; }
        .display.text-4xl { font-size: clamp(28px, 8vw, 42px) !important; }
        .display.text-5xl { font-size: clamp(30px, 9vw, 48px) !important; }

        /* Trust mini strip */
        .trust-mini-strip { padding: 10px 18px; overflow-x: auto; flex-wrap: nowrap; gap: 16px; }
        .trust-mini-item { flex-shrink: 0; }
        .trust-mini-label { font-size: 10px; }

        /* Science cards grid */
        .sd-grid { gap: 10px; margin-top: 32px; }
        .sd-card { padding: 18px; border-radius: 14px; }

        /* Reviews grid: 1 col en mobile */
        .reviews-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

        /* Footer trust */
        .foot-trust { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
        .foot-trust-item { text-align: center; }

        /* Newsletter / signup forms */
        .newsletter-form { flex-direction: column; gap: 10px; }
        .newsletter-input { width: 100%; font-size: 16px !important; }
        .newsletter-btn { width: 100%; justify-content: center; padding: 16px; }

        /* Wholesale tiers: 1 col */
        .grid.sm\:grid-cols-2 { grid-template-columns: 1fr !important; }

        /* Revenue calculator table: scroll horizontal (scoped — NO global table rule, causaba overflow horizontal de toda la pagina) */
        .lg\:col-span-3.stack-card {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
        }
        .lg\:col-span-3.stack-card table { min-width: 480px; }
        .pdp-spec, .pdp-spec table { min-width: 0; }
        .lg\:grid-cols-5 { grid-template-columns: 1fr !important; }

        /* Blog cards: 1 col */
        .blog-grid, [class*="blog-grid"] { grid-template-columns: 1fr !important; }

        /* Overscroll bounce iOS */
        body { overscroll-behavior-y: none; }
        main, [role="main"] { overscroll-behavior-y: auto; }

        /* Safe area insets para iPhone con notch */
        .pdp-sticky, .pdrawer {
          padding-bottom: calc(10px + env(safe-area-inset-bottom));
        }
        body.pdp-active {
          padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
        }
      }

      /* Landscape mobile: ajustar gallery */
      @media (max-width: 767px) and (orientation: landscape) {
        .pdp-gallery { aspect-ratio: 4/3; max-height: 62vh; }
        .hero-carousel, [class*="hero-visual"] { height: 40vw !important; min-height: 200px; }
      }

      /* ──────────────────────────────────────────────────────────────
         SCROLLBAR THIN EN MOBILE (tabs, carruseles)
         ────────────────────────────────────────────────────────────── */
      @media (max-width: 1023px) {
        .pdp-tabs-sticky,
        .category-tabs,
        [class*="scroll-x"] {
          scrollbar-width: none;
          -ms-overflow-style: none;
        }
        .pdp-tabs-sticky::-webkit-scrollbar,
        .category-tabs::-webkit-scrollbar,
        [class*="scroll-x"]::-webkit-scrollbar { display: none; }
      }

      /* ── FIN MOBILE OPTIMIZATION 10 CICLOS ── */

      /* ══════════════════════════════════════════════════════════════
         LEGAL PAGE — Términos y Condiciones (#/legal)
         ══════════════════════════════════════════════════════════════ */
      .lp-legal {
        position: relative;
        z-index: 1;
        min-height: 100vh;
        padding: 120px 20px 96px;
        color: #2C2C2C;
      }
      .lp-legal__inner {
        max-width: 860px;
        margin: 0 auto;
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 20px;
        padding: 56px clamp(24px, 5vw, 64px) 64px;
        box-shadow: 0 24px 60px -28px rgba(10,10,10,0.18);
      }
      .lp-legal__back {
        display: inline-block;
        font-size: 13px;
        font-weight: 600;
        color: #1947D1;
        text-decoration: none;
        margin-bottom: 28px;
        transition: color 160ms;
      }
      .lp-legal__back:hover { color: #0F2E8A; }
      .lp-legal__head { border-bottom: 1px solid #E5E7EB; padding-bottom: 28px; margin-bottom: 8px; }
      .lp-legal__eyebrow {
        display: inline-block;
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #1947D1;
        margin-bottom: 14px;
      }
      .lp-legal__title {
        font-size: clamp(30px, 5vw, 44px);
        font-weight: 700;
        letter-spacing: -0.02em;
        color: #0A0A0A;
        line-height: 1.1;
        margin: 0 0 12px;
      }
      .lp-legal__updated { font-size: 13px; color: #6B6B6B; margin: 0; }
      .lp-legal__banner {
        background: #F4F6FE;
        border: 1px solid #D9E1FB;
        border-left: 3px solid #1947D1;
        border-radius: 12px;
        padding: 16px 20px;
        font-size: 14px;
        line-height: 1.6;
        color: #2C2C2C;
        margin: 28px 0 8px;
      }
      .lp-legal__banner strong { color: #0F2E8A; }
      .lp-legal__section { padding-top: 32px; scroll-margin-top: 100px; }
      .lp-legal__h2 {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: #0A0A0A;
        margin: 0 0 12px;
      }
      .lp-legal__p {
        font-size: 14.5px;
        line-height: 1.7;
        color: #3A3A3A;
        margin: 0 0 12px;
      }
      .lp-legal__fine {
        margin-top: 44px;
        padding-top: 24px;
        border-top: 1px solid #E5E7EB;
        font-size: 12.5px;
        line-height: 1.6;
        color: #6B6B6B;
        font-style: italic;
      }
      @media (max-width: 640px) {
        .lp-legal { padding: 96px 14px 72px; }
        .lp-legal__inner { padding: 36px 22px 44px; border-radius: 16px; }
        .lp-legal__p { font-size: 14px; }
      }

      /* ============================================================
         CALCULADORA v3 — reconstitución (dark + cobalto claro)
         Accent periwinkle (familia cobalt) scoped a .calc-v3.
         ============================================================ */
      .calc-v3 {
        --cv-acc: 108,140,255;        /* #6C8CFF primario */
        --cv-acc-bright: 147,169,255; /* #93A9FF numerales */
        --cv-acc-deep: 25,71,209;     /* #1947D1 cobalt de marca */
        --cv-ink: #e8eef7;
        --cv-card: rgba(255,255,255,0.03);
        --cv-line: rgba(255,255,255,0.10);
      }
      /* Fondo oscuro del contenedor de página. Sin esto, en producción el
         <main> quedaba transparente sobre el body claro (data-palette=cobalt)
         y la calculadora se veía lavada con la aurora del sitio filtrándose.
         Opaco #04060c + el <main> ya trae position:relative z-index:5, así que
         cubre la aurora. El ::before replica el campo ambiental del prototipo. */
      .calc-page.calc-v3 { background: #04060c; min-height: 100vh; overflow: hidden; }
      .calc-page.calc-v3::before {
        content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
        background:
          radial-gradient(38% 30% at 20% 8%, rgba(var(--cv-acc),0.14), transparent 60%),
          radial-gradient(40% 34% at 82% 4%, rgba(var(--cv-acc-deep),0.18), transparent 65%),
          radial-gradient(60% 42% at 50% 112%, rgba(var(--cv-acc),0.10), transparent 60%);
      }
      .cv3-inner { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; }
      .cv3-crumb { justify-content: center; }
      .cv3-head { text-align: center; max-width: 600px; margin: 18px auto 26px; }
      .cv3-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--cv-acc)); }
      .cv3-title { font-weight: 300; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(28px,4vw,44px); margin: 12px 0 0; color: var(--cv-ink); }
      .cv3-title b { font-weight: 600; }
      .cv3-sub { margin: 14px auto 0; max-width: 52ch; font-size: 15px; line-height: 1.6; color: rgba(232,238,247,.74); }

      .cv3-panel { background: var(--cv-card); border: 1px solid var(--cv-line); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px -40px rgba(0,0,0,.85); }
      .cv3-grid { display: grid; grid-template-columns: 1fr 1fr; }
      .cv3-col { padding: 28px 30px; min-width: 0; }
      .cv3-col.inputs { border-right: 1px solid var(--cv-line); }
      .cv3-collabel { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(232,238,247,.6); margin-bottom: 22px; display: flex; align-items: center; gap: 8px; }
      .cv3-collabel::after { content: ""; flex: 1; height: 1px; background: var(--cv-line); }

      .cv3-steps { position: relative; }
      .cv3-step { display: flex; gap: 14px; margin-bottom: 22px; position: relative; }
      .cv3-step:not(:last-of-type)::before { content: ""; position: absolute; left: 12.5px; top: 28px; bottom: -24px; width: 1.5px; background: linear-gradient(rgba(var(--cv-acc),.5), rgba(var(--cv-acc),.12)); z-index: 0; }
      .cv3-stepnum { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1; font-family: "JetBrains Mono", monospace; font-size: 12px; color: rgb(var(--cv-acc-bright)); border: 1px solid rgba(var(--cv-acc),.5); background: #0a0f1e; }
      .cv3-stepbody { flex: 1; min-width: 0; }
      .cv3-steptop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
      .cv3-steplabel { font-size: 14px; color: rgba(232,238,247,.94); }
      .cv3-stepunit { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(232,238,247,.58); }
      .cv3-stepper { display: flex; align-items: stretch; border: 1px solid var(--cv-line); border-radius: 11px; background: rgba(255,255,255,.03); overflow: hidden; transition: border-color .2s; }
      .cv3-stepper:focus-within { border-color: rgba(var(--cv-acc),.55); }
      .cv3-stepper button { width: 42px; background: transparent; border: 0; color: rgba(232,238,247,.8); font-family: "JetBrains Mono", monospace; font-size: 18px; cursor: pointer; transition: background .2s; }
      .cv3-stepper button:hover { background: rgba(var(--cv-acc),.14); color: rgb(var(--cv-acc-bright)); }
      .cv3-stepper input { flex: 1; min-width: 0; text-align: center; background: transparent; border: 0; color: #fff; font-family: "JetBrains Mono", monospace; font-size: 16px; padding: 11px 6px; outline: none; -webkit-appearance: none; -moz-appearance: textfield; appearance: textfield; }
      .cv3-stepper input::-webkit-outer-spin-button,
      .cv3-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
      .cv3-presets { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
      .cv3-preset { padding: 6px 11px; border-radius: 7px; border: 1px solid var(--cv-line); background: transparent; color: rgba(232,238,247,.66); font-family: "JetBrains Mono", monospace; font-size: 11.5px; cursor: pointer; transition: var(--lp-transition-interactive); /* Cycle 9 — was transition:all */ }
      .cv3-preset:hover { border-color: rgba(var(--cv-acc),.45); color: rgba(232,238,247,.95); }
      .cv3-preset.on { background: rgba(var(--cv-acc),.16); border-color: rgba(var(--cv-acc),.55); color: rgb(var(--cv-acc-bright)); }

      .cv3-bridge { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px; background: rgba(var(--cv-acc),.08); border: 1px solid rgba(var(--cv-acc),.22); }
      .cv3-bridge-k { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(232,238,247,.62); }
      .cv3-bridge-v { font-family: "JetBrains Mono", monospace; font-size: 13px; color: rgb(var(--cv-acc-bright)); font-weight: 500; }

      .cv3-actions { display: flex; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--cv-line); }
      .cv3-btn { padding: 10px 16px; border-radius: 999px; font-size: 12.5px; cursor: pointer; font-family: inherit; border: 1px solid var(--cv-line); background: transparent; color: rgba(232,238,247,.85); transition: var(--lp-transition-interactive); /* Cycle 9 — was transition:all */ }
      .cv3-btn:hover { border-color: rgba(232,238,247,.4); }
      .cv3-btn.primary { border-color: rgba(var(--cv-acc),.5); background: rgba(var(--cv-acc),.12); color: rgb(var(--cv-acc-bright)); }
      .cv3-btn.primary:hover { background: rgba(var(--cv-acc),.2); }

      .cv3-col.results { background: linear-gradient(180deg, rgba(var(--cv-acc-deep),.06), rgba(255,255,255,0)); }
      .cv3-hero { border-radius: 16px; padding: 20px 22px 18px; position: relative; overflow: hidden; background: linear-gradient(140deg, rgba(var(--cv-acc),.2), rgba(var(--cv-acc-deep),.08)); border: 1px solid rgba(var(--cv-acc),.4); margin-bottom: 18px; box-shadow: 0 0 0 1px rgba(var(--cv-acc),.06), 0 20px 50px -30px rgba(var(--cv-acc-deep),.9); }
      .cv3-hero-k { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgb(var(--cv-acc-bright)); margin-bottom: 6px; }
      .cv3-hero-v { font-family: "JetBrains Mono", monospace; font-weight: 400; line-height: 1; font-size: 62px; letter-spacing: -.03em; color: rgb(var(--cv-acc-bright)); text-shadow: 0 0 30px rgba(var(--cv-acc),.35); }
      .cv3-hero-v .u { font-size: 22px; color: rgba(232,238,247,.62); margin-left: 4px; }
      .cv3-hero-note { font-family: "JetBrains Mono", monospace; font-size: 11px; color: rgba(232,238,247,.68); margin-top: 8px; }
      .cv3-hero.amber { background: linear-gradient(140deg, rgba(251,191,118,.18), rgba(251,191,118,.05)); border-color: rgba(251,191,118,.45); box-shadow: 0 0 0 1px rgba(251,191,118,.06), 0 20px 50px -30px rgba(251,191,118,.5); }
      .cv3-hero.amber .cv3-hero-k { color: #fcd9a0; }
      .cv3-hero.red { background: linear-gradient(140deg, rgba(248,113,113,.18), rgba(248,113,113,.05)); border-color: rgba(248,113,113,.45); box-shadow: 0 0 0 1px rgba(248,113,113,.06), 0 20px 50px -30px rgba(248,113,113,.5); }
      .cv3-hero.red .cv3-hero-k { color: #fca5a5; }

      .cv3-syringe-wrap { margin: 8px 0 20px; }
      .cv3-syringe-scale { display: flex; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: rgba(232,238,247,.6); margin-bottom: 5px; letter-spacing: .05em; }

      .cv3-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
      .cv3-tile { border: 1px solid var(--cv-line); border-radius: 12px; padding: 13px 14px; background: rgba(255,255,255,.02); display: flex; flex-direction: column; justify-content: center; min-height: 72px; }
      .cv3-tile.accent { border-color: rgba(var(--cv-acc),.3); background: rgba(var(--cv-acc),.05); }
      .cv3-tile-k { font-size: 11px; color: rgba(232,238,247,.68); margin-bottom: 6px; }
      .cv3-tile-v { font-family: "JetBrains Mono", monospace; font-size: 18px; color: var(--cv-ink); letter-spacing: -.01em; }
      .cv3-tile-sub { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: rgba(232,238,247,.55); margin-top: 3px; }

      .cv3-warn { margin-top: 16px; padding: 11px 14px; border-radius: 11px; font-size: 12.5px; line-height: 1.5; }
      .cv3-warn.red { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.42); color: #fca5a5; }
      .cv3-warn.amber { background: rgba(251,191,118,.12); border: 1px solid rgba(251,191,118,.42); color: #fcd9a0; }

      .cv3-disclaimer { max-width: 600px; margin: 24px auto 0; text-align: center; font-size: 12px; line-height: 1.6; color: rgba(232,238,247,.5); }

      @media (max-width: 820px) {
        .cv3-grid { grid-template-columns: 1fr; }
        .cv3-col.inputs { border-right: 0; border-bottom: 1px solid var(--cv-line); }
      }

      /* Overrides: neutralizar efectos globales del sitio dentro de la calculadora
         para mantener fidelidad al prototipo aprobado (el sitio aplica hover-lift a
         todos los <button> y min-height 44px en móvil). */
      .cv3-stepper button:hover,
      .cv3-preset:hover { transform: none; }
      @media (max-width: 1023px) {
        .cv3-preset { min-height: 0; }
      }


/* ============ CYCLE-C5: micro-interacciones y fluidez ============ */
.wholesale-cta-primary:active,
.referrals-banner-cta:active {
  transform: scale(0.97) translateY(0);
  transition-duration: 80ms;
}
html[data-palette="cobalt"] .shop-card-add:active {
  transform: scale(0.95);
  transition-duration: 80ms;
}
.shop-card-photo {
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-card:hover .shop-card-photo {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .shop-card-photo { transition: none; }
  .shop-card:hover .shop-card-photo { transform: none; }
}
/* ============================================================
   PROTEUS — SHOP UI · matches existing dark biotech aesthetic
   Light palettes (paper / ivory) get extra contrast rules.
   ============================================================ */

/* Body lock when modal open */
.shop-no-scroll { overflow: hidden !important; }

/* ------------------------------------------------------------
   Shared: container, eyebrow, display
   ------------------------------------------------------------ */
.shop-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .shop-container { padding: 0 32px; }
}

.shop-page {
  position: relative;
  z-index: 5;
  padding: 120px 0 80px;
  min-height: 80vh;
}
@media (min-width: 768px) { .shop-page { padding: 160px 0 96px; } }

.shop-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--cyan), 0.85);
  margin-bottom: 18px;
}
.shop-display {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
  color: var(--ink);
}
.shop-display-light { color: rgba(var(--cyan), 0.85); font-weight: 300; }
.shop-section-title {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 32px;
  color: var(--ink);
}
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ------------------------------------------------------------
   Breadcrumbs
   ------------------------------------------------------------ */
.shop-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(var(--cyan), 0.55);
  margin-bottom: 32px;
}
.shop-crumbs a {
  color: rgba(var(--cyan), 0.55);
  text-decoration: none;
  transition: color 0.15s;
}
.shop-crumbs a:hover { color: rgb(var(--cyan)); }
.shop-crumb-sep { opacity: 0.4; }
.shop-crumbs > span:not(.shop-crumb-sep):last-child { color: var(--ink); }

/* ------------------------------------------------------------
   RUO bar (PDP)
   ------------------------------------------------------------ */
.shop-ruo {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(var(--cyan), 0.06);
  border: 1px solid rgba(var(--cyan), 0.18);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 12.5px;
  color: var(--ink);
  margin-bottom: 32px;
  max-width: -moz-max-content;
  max-width: max-content;
}
.shop-ruo-icon { color: rgb(var(--cyan)); }

/* ------------------------------------------------------------
   Catalog header + toolbar
   ------------------------------------------------------------ */
.shop-page-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: end;
  margin-bottom: 36px;
}
@media (min-width: 900px) {
  .shop-page-head { grid-template-columns: 1.5fr 1fr; gap: 64px; }
}
.shop-page-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 48ch;
}
.shop-page-sub a {
  color: rgb(var(--cyan));
  text-decoration: underline;
  text-decoration-color: rgba(var(--cyan), 0.4);
  text-underline-offset: 3px;
}
.shop-page-sub a:hover { text-decoration-color: rgb(var(--cyan)); }

.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}
.shop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.shop-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: transparent;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: var(--lp-transition-interactive);
  white-space: nowrap;
}
.shop-chip:hover {
  color: var(--ink);
  border-color: rgba(var(--cyan), 0.35);
}
.shop-chip.on {
  background: rgb(var(--cyan));
  color: #04060c;
  border-color: rgb(var(--cyan));
}
html[data-palette="paper"] .shop-chip.on,
html[data-palette="ivory"] .shop-chip.on {
  color: var(--bg);
}

.shop-toolbar-right {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.shop-toolbar-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: transparent;
  font-size: 13px;
  color: var(--muted);
}
.shop-toolbar-search input {
  border: 0;
  background: transparent;
  color: var(--ink);
  outline: none;
  font: inherit;
  width: 140px;
}
.shop-toolbar-search input::-moz-placeholder { color: var(--muted); }
.shop-toolbar-search input::placeholder { color: var(--muted); }
.shop-toolbar-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.shop-toolbar-sort .mono { font-size: 10.5px; letter-spacing: 0.16em; }
.shop-toolbar-sort select {
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 7px 28px 7px 12px;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='currentColor' d='M0 0h10L5 6z' opacity='0.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.shop-result-count {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 24px;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Product grid
   ------------------------------------------------------------ */
.shop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 640px)  { .shop-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .shop-grid { grid-template-columns: 1fr 1fr 1fr; gap: 22px; } }

.shop-card {
  position: relative;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--hair);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, background 0.3s;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.shop-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--cyan), 0.3);
  background: rgba(255,255,255,0.04);
}
html[data-palette="paper"] .shop-card,
html[data-palette="ivory"] .shop-card {
  background: rgba(255,255,255,0.6);
  border-color: rgba(0,0,0,0.08);
}
html[data-palette="paper"] .shop-card:hover,
html[data-palette="ivory"] .shop-card:hover {
  background: rgba(255,255,255,0.8);
  border-color: rgba(var(--cyan), 0.4);
}

.shop-card-img {
  position: relative;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 60%, rgba(var(--cyan), 0.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.05), transparent);
  overflow: hidden;
  text-decoration: none;
}
.shop-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.6;
  pointer-events: none;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 75%);
}
.shop-card[data-tint="violet"] .shop-card-img,
.shop-card[data-tint="amber"] .shop-card-img,
.shop-card[data-tint="magenta"] .shop-card-img {
  background:
    radial-gradient(circle at 50% 60%, rgba(var(--violet), 0.22), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.05), transparent);
}

.shop-card-stock {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--cyan), 0.3);
  background: rgba(var(--cyan), 0.08);
  color: rgb(var(--cyan));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 2;
}
.shop-card-stock[data-stock="low"] {
  border-color: rgba(251, 191, 118, 0.45);
  background: rgba(251, 191, 118, 0.1);
  color: #fbbf76;
}
.shop-card-stock-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

.shop-fav {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: var(--lp-transition-interactive);
  z-index: 2;
}
.shop-fav:hover { color: #fff; border-color: rgba(var(--cyan), 0.5); }
.shop-fav.on { color: rgb(var(--cyan)); border-color: rgba(var(--cyan), 0.6); }
html[data-palette="paper"] .shop-fav,
html[data-palette="ivory"] .shop-fav {
  background: rgba(255,255,255,0.7);
  color: var(--muted);
  border-color: rgba(0,0,0,0.1);
}

.shop-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.shop-card-meta {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.shop-card-cat { color: rgba(var(--cyan), 0.8); }
.shop-card-name {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  text-decoration: none;
  margin-top: 2px;
}
.shop-card-name:hover { color: rgb(var(--cyan)); }
.shop-card-tag {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
.shop-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
}
.shop-card-price-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.shop-card-price {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
/* Modo cotización: sin símbolo $ delante de "A cotizar".
   Restaurar este ::before cuando se muestren precios numéricos. */
.shop-card-price::before { content: none; }
.shop-card-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--lp-transition-interactive);
}
.shop-card-add:hover {
  background: rgb(var(--cyan));
  color: #04060c;
  border-color: rgb(var(--cyan));
}
html[data-palette="paper"] .shop-card-add:hover,
html[data-palette="ivory"] .shop-card-add:hover { color: var(--bg); }

/* ------------------------------------------------------------
   PDP grid + buy box
   ------------------------------------------------------------ */
.shop-pdp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 80px;
}
@media (min-width: 1000px) {
  .shop-pdp-grid { grid-template-columns: 1.3fr 1fr; gap: 72px; }
}

.shop-pdp-gallery { position: relative; }
.shop-pdp-img {
  position: relative;
  aspect-ratio: 1/1;
  border: 1px solid var(--hair);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 55%, rgba(var(--cyan), 0.22), transparent 65%),
    rgba(255,255,255,0.02);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.shop-pdp-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.5;
  pointer-events: none;
  mask-image: radial-gradient(circle at center, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, #000 20%, transparent 80%);
}
.shop-pdp-img[data-tint="violet"], .shop-pdp-img[data-tint="amber"], .shop-pdp-img[data-tint="magenta"] {
  background:
    radial-gradient(circle at 50% 55%, rgba(var(--violet), 0.28), transparent 65%),
    rgba(255,255,255,0.02);
}
.shop-pdp-batch, .shop-pdp-purity {
  position: absolute;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
  background: rgba(0,0,0,0.3);
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid var(--hair);
  z-index: 2;
}
.shop-pdp-batch { top: 18px; left: 18px; }
.shop-pdp-purity { bottom: 18px; right: 18px; color: rgb(var(--cyan)); border-color: rgba(var(--cyan), 0.3); }
html[data-palette="paper"] .shop-pdp-batch,
html[data-palette="paper"] .shop-pdp-purity,
html[data-palette="ivory"] .shop-pdp-batch,
html[data-palette="ivory"] .shop-pdp-purity {
  background: rgba(255,255,255,0.85);
}

.shop-pdp-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.shop-pdp-thumb {
  flex: 1;
  aspect-ratio: 1/1;
  border-radius: 12px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: 0;
  transition: var(--lp-transition-interactive);
}
.shop-pdp-thumb:hover { border-color: rgba(var(--cyan), 0.4); }
.shop-pdp-thumb.on { border-color: rgb(var(--cyan)); box-shadow: 0 0 0 2px rgba(var(--cyan), 0.25); }
.shop-pdp-thumb-fill {
  position: absolute;
  inset: 12px;
  border-radius: 8px;
  background: radial-gradient(circle, rgba(var(--cyan), 0.2), transparent 70%);
}
.shop-pdp-thumb-fill[data-tint="violet"] { background: radial-gradient(circle, rgba(var(--violet), 0.25), transparent 70%); }
.shop-pdp-thumb-tag {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Buy box */
.shop-pdp-buy { display: flex; flex-direction: column; }
.shop-pdp-cat {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: rgba(var(--cyan), 0.85);
  margin-bottom: 14px;
}
.shop-pdp-title {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 5vw, 60px);
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin-bottom: 8px;
  color: var(--ink);
}
.shop-pdp-tag {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 20px;
}
.shop-pdp-specs {
  padding: 12px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 28px;
}
.shop-pdp-section-title {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.shop-pdp-variants {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}
.shop-pdp-variant {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: var(--lp-transition-interactive);
  background: rgba(255,255,255,0.015);
}
.shop-pdp-variant:hover { border-color: rgba(var(--cyan), 0.35); }
.shop-pdp-variant.on {
  border-color: rgb(var(--cyan));
  background: rgba(var(--cyan), 0.05);
}
.shop-pdp-variant input { position: absolute; opacity: 0; pointer-events: none; }
.shop-pdp-variant-radio {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--hair);
  position: relative;
  flex-shrink: 0;
}
.shop-pdp-variant.on .shop-pdp-variant-radio { border-color: rgb(var(--cyan)); }
.shop-pdp-variant.on .shop-pdp-variant-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: rgb(var(--cyan));
}
.shop-pdp-variant-label { flex: 1; font-size: 14px; color: var(--ink); }
.shop-pdp-variant-price { font-size: 14px; font-weight: 600; color: var(--ink); }

.shop-pdp-buy-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.shop-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.shop-qty button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s;
}
.shop-qty button:hover { background: rgba(var(--cyan), 0.1); }
.shop-qty span {
  min-width: 32px;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.shop-qty-lg button { width: 48px; height: 48px; }
.shop-qty-lg span { min-width: 40px; font-size: 14px; }

.shop-pdp-trust {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.shop-pdp-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
}
.shop-trust-check { color: #34d399; flex-shrink: 0; }

.shop-pdp-coa-link {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  transition: var(--lp-transition-interactive);
}
.shop-pdp-coa-link:hover { border-color: rgba(var(--cyan), 0.4); }
.shop-pdp-coa-link .mono { color: var(--muted); margin-left: auto; }

/* PDP tabs */
.shop-pdp-tabs { border-top: 1px solid var(--hair); padding-top: 40px; margin-bottom: 80px; }
.shop-pdp-tablist {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 32px;
  scrollbar-width: none;
}
.shop-pdp-tablist::-webkit-scrollbar { display: none; }
.shop-pdp-tab {
  flex-shrink: 0;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: var(--lp-transition-interactive);
}
.shop-pdp-tab:hover { color: var(--ink); }
.shop-pdp-tab.on {
  color: var(--ink);
  border-bottom-color: rgb(var(--cyan));
}

.shop-prose {
  max-width: 65ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}
.shop-prose p { margin-bottom: 18px; }
.shop-prose h3 {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.015em;
  margin: 24px 0 8px;
  color: var(--ink);
}
.shop-prose strong { color: var(--ink); font-weight: 600; }
.shop-prose-note {
  background: rgba(var(--cyan), 0.05);
  border: 1px solid rgba(var(--cyan), 0.18);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 24px;
}
.shop-pdp-coa-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.shop-spec-table {
  width: 100%;
  max-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
}
.shop-spec-table tr td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
}
.shop-spec-table tr:first-child td { border-top: 1px solid var(--hair); }
.shop-spec-table td:first-child {
  color: var(--muted);
  width: 38%;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.shop-spec-table td:last-child { color: var(--ink); }
.shop-spec-mono { word-break: break-all; }

/* PDP sticky mobile bar */
.shop-pdp-sticky {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 12px 16px;
  background: rgba(8, 10, 18, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--hair);
  z-index: 30;
  display: none;
  gap: 12px;
  align-items: center;
}
html[data-palette="paper"] .shop-pdp-sticky,
html[data-palette="ivory"] .shop-pdp-sticky {
  background: rgba(255,255,255,0.94);
  border-top-color: rgba(0,0,0,0.1);
}
.shop-pdp-sticky-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.shop-pdp-sticky-price {
  font-size: 18px;
  color: var(--ink);
}
.shop-pdp-sticky .shop-btn-primary { flex: 1; justify-content: center; }
@media (max-width: 999px) {
  .shop-pdp-sticky { display: flex; }
  body.shop-pdp-mounted { padding-bottom: 80px; }
}

.shop-related { padding-top: 32px; }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.shop-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  background: rgb(var(--cyan));
  color: #04060c;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: var(--lp-transition-interactive);
  box-shadow: 0 8px 24px -8px rgba(var(--cyan), 0.5);
}
.shop-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -10px rgba(var(--cyan), 0.6);
}
html[data-palette="paper"] .shop-btn-primary,
html[data-palette="ivory"] .shop-btn-primary { color: var(--bg); }
.shop-btn-lg { padding: 16px 26px; font-size: 14px; }
.shop-btn-wide { width: 100%; justify-content: center; }
.shop-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hair);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: var(--lp-transition-interactive);
}
.shop-btn-ghost:hover { border-color: rgb(var(--cyan)); color: rgb(var(--cyan)); }
.shop-btn-ghost.on { border-color: rgb(var(--cyan)); color: rgb(var(--cyan)); }

/* ------------------------------------------------------------
   Drawers (cart / wishlist)
   ------------------------------------------------------------ */
.shop-drawer-back {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.shop-drawer-back.open { opacity: 1; pointer-events: auto; }
.shop-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 440px;
  background: rgba(8, 10, 18, 0.96);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-left: 1px solid var(--hair);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -30px 0 80px -20px rgba(0,0,0,0.6);
}
html[data-palette="paper"] .shop-drawer,
html[data-palette="ivory"] .shop-drawer {
  background: rgba(255,255,255,0.96);
  border-left-color: rgba(0,0,0,0.1);
}
.shop-drawer.open { transform: translateX(0); }
.shop-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--hair);
}
.shop-drawer-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--cyan), 0.7);
  margin-bottom: 4px;
}
.shop-drawer-title {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.shop-drawer-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--lp-transition-interactive);
}
.shop-drawer-close:hover { border-color: rgb(var(--cyan)); color: rgb(var(--cyan)); }
.shop-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px;
}
.shop-drawer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 0;
  text-align: center;
}
.shop-drawer-empty-icon { color: rgba(var(--cyan), 0.5); }
.shop-drawer-empty-title {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 18px;
  color: var(--ink);
}
.shop-drawer-empty-sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; }

.shop-cart-line {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hair);
}
.shop-cart-line-img {
  width: 64px;
  height: 80px;
  border-radius: 8px;
  background: radial-gradient(circle, rgba(var(--cyan), 0.18), transparent 70%);
  border: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.shop-cart-line-img[data-tint="violet"], .shop-cart-line-img[data-tint="amber"], .shop-cart-line-img[data-tint="magenta"] {
  background: radial-gradient(circle, rgba(var(--violet), 0.2), transparent 70%);
}
.shop-cart-line-meta { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.shop-cart-line-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.shop-cart-line-name:hover { color: rgb(var(--cyan)); }
.shop-cart-line-fmt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
}
.shop-cart-line-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.shop-cart-line-remove, .shop-cart-line-add {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 0;
}
.shop-cart-line-add { color: rgb(var(--cyan)); }
.shop-cart-line-remove:hover { color: var(--ink); }
.shop-cart-line-price {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.shop-drawer-foot {
  border-top: 1px solid var(--hair);
  padding: 18px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shop-cart-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--muted);
  font-size: 13px;
}
.shop-cart-row strong { color: var(--ink); font-size: 22px; font-weight: 500; font-family: 'Inter Tight', sans-serif; }
.shop-cart-row-meta { font-size: 11px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; margin-bottom: 14px; }
.shop-cart-total { letter-spacing: -0.02em; }
.shop-cart-keep {
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 0 0;
}
.shop-cart-keep:hover { color: var(--ink); }

/* ------------------------------------------------------------
   Search modal
   ------------------------------------------------------------ */
.shop-modal-back {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  z-index: 120;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px;
  animation: shopFade 0.18s ease;
}
@keyframes shopFade { from { opacity: 0; } to { opacity: 1; } }
.shop-modal {
  width: 100%;
  max-width: 620px;
  background: rgba(8, 10, 18, 0.96);
  border: 1px solid var(--hair);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 30px 80px -10px rgba(0,0,0,0.6);
  animation: shopRise 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes shopRise { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
html[data-palette="paper"] .shop-modal,
html[data-palette="ivory"] .shop-modal {
  background: rgba(255,255,255,0.96);
  border-color: rgba(0,0,0,0.1);
}
.shop-search-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hair);
}
.shop-search-icon { color: var(--muted); flex-shrink: 0; }
.shop-search-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: var(--ink);
  outline: none;
  font-family: 'Inter Tight', system-ui, sans-serif;
}
.shop-search-input::-moz-placeholder { color: var(--muted); }
.shop-search-input::placeholder { color: var(--muted); }
.shop-kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--hair);
  padding: 3px 6px;
  border-radius: 4px;
}
.shop-search-results {
  max-height: 480px;
  overflow-y: auto;
  padding: 8px;
}
.shop-search-hit {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.shop-search-hit:hover { background: rgba(var(--cyan), 0.08); }
.shop-search-hit-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(var(--cyan));
  box-shadow: 0 0 10px rgb(var(--cyan));
  flex-shrink: 0;
}
.shop-search-hit-dot[data-tint="violet"], .shop-search-hit-dot[data-tint="amber"], .shop-search-hit-dot[data-tint="magenta"] {
  background: rgb(var(--violet)); box-shadow: 0 0 10px rgb(var(--violet));
}
.shop-search-hit-meta { flex: 1; min-width: 0; }
.shop-search-hit-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.shop-search-hit-tag { font-size: 12px; color: var(--muted); margin-top: 2px; }
.shop-search-hit-price {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.shop-search-hit-arrow { color: var(--muted); opacity: 0; transition: opacity 0.15s; }
.shop-search-hit:hover .shop-search-hit-arrow { opacity: 1; color: rgb(var(--cyan)); }
.shop-empty {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.shop-search-foot {
  display: flex;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid var(--hair);
  font-size: 11px;
  color: var(--muted);
}
.shop-search-foot span { display: inline-flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------
   Toast
   ------------------------------------------------------------ */
.shop-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(8, 10, 18, 0.94);
  border: 1px solid rgba(var(--cyan), 0.4);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.5);
  animation: shopToastIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-toast-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgb(var(--cyan));
  box-shadow: 0 0 6px rgb(var(--cyan));
}
@keyframes shopToastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
html[data-palette="paper"] .shop-toast,
html[data-palette="ivory"] .shop-toast {
  background: rgba(255,255,255,0.96);
  border-color: rgba(var(--cyan), 0.4);
}

/* ------------------------------------------------------------
   Empty state
   ------------------------------------------------------------ */
.shop-empty-state {
  padding: 60px 20px;
  text-align: center;
  border: 1px dashed var(--hair);
  border-radius: 16px;
  margin-top: 20px;
}
.shop-empty-title {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 14px;
}

/* ------------------------------------------------------------
   Contrast audit — overrides for light palettes
   ------------------------------------------------------------ */
html[data-palette="paper"],
html[data-palette="ivory"] {
  --hair: rgba(0,0,0,0.12);
}
html[data-palette="paper"] .shop-card-add,
html[data-palette="ivory"] .shop-card-add {
  border-color: rgba(0,0,0,0.12);
  color: var(--ink);
}
html[data-palette="paper"] .shop-pdp-img,
html[data-palette="ivory"] .shop-pdp-img {
  background:
    radial-gradient(circle at 50% 55%, rgba(var(--cyan), 0.12), transparent 65%),
    rgba(255,255,255,0.55);
}
html[data-palette="paper"] .shop-card-img,
html[data-palette="ivory"] .shop-card-img {
  background:
    radial-gradient(circle at 50% 60%, rgba(var(--cyan), 0.1), transparent 60%),
    rgba(255,255,255,0.4);
}
html[data-palette="paper"] .shop-pdp-batch,
html[data-palette="paper"] .shop-pdp-purity,
html[data-palette="ivory"] .shop-pdp-batch,
html[data-palette="ivory"] .shop-pdp-purity { color: var(--ink); }

/* ------------------------------------------------------------
   Contrast helpers — apply on top of existing inline styles
   Make the original Navbar/Hero text readable on light palettes.
   ------------------------------------------------------------ */
html[data-palette="paper"] body,
html[data-palette="ivory"] body { color: var(--ink); }

html[data-palette="paper"] .text-white,
html[data-palette="ivory"] .text-white { color: var(--ink) !important; }

html[data-palette="paper"] [class*="text-white\\/"],
html[data-palette="ivory"] [class*="text-white\\/"] {
  color: var(--muted) !important;
}

/* Tailwind text-white/40, /55, /60, /70, /75, /80 — make them readable on light bg */
html[data-palette="paper"] .text-white\/40,
html[data-palette="ivory"] .text-white\/40 { color: var(--muted) !important; }
html[data-palette="paper"] .text-white\/55,
html[data-palette="ivory"] .text-white\/55 { color: var(--muted) !important; }
html[data-palette="paper"] .text-white\/60,
html[data-palette="ivory"] .text-white\/60 { color: var(--muted) !important; }
html[data-palette="paper"] .text-white\/65,
html[data-palette="ivory"] .text-white\/65 { color: var(--muted) !important; }
html[data-palette="paper"] .text-white\/70,
html[data-palette="ivory"] .text-white\/70 { color: var(--muted) !important; }
html[data-palette="paper"] .text-white\/75,
html[data-palette="ivory"] .text-white\/75 { color: var(--ink) !important; opacity: 0.8; }
html[data-palette="paper"] .text-white\/80,
html[data-palette="ivory"] .text-white\/80 { color: var(--ink) !important; opacity: 0.85; }

/* Navbar logo "Bioscience" tail */
html[data-palette="paper"] .nav-pill,
html[data-palette="ivory"] .nav-pill { color: var(--muted) !important; }
html[data-palette="paper"] .nav-pill:hover,
html[data-palette="ivory"] .nav-pill:hover { color: var(--ink) !important; }

/* Glass surfaces on light palettes need contrast adjustment */
html[data-palette="paper"] .glass,
html[data-palette="ivory"] .glass {
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

/* Hairline border helper on light palettes */
html[data-palette="paper"] .hairline,
html[data-palette="ivory"] .hairline {
  border: 1px solid rgba(0,0,0,0.12) !important;
  background: rgba(255,255,255,0.4) !important;
}

/* Account button (white pill) on light palettes: invert to ink */
html[data-palette="paper"] .bg-white,
html[data-palette="ivory"] .bg-white {
  background: var(--ink) !important;
  color: var(--bg) !important;
}

/* Vial label "PROTEUS · 10ML" on light */
html[data-palette="paper"] .vial text,
html[data-palette="ivory"] .vial text { fill: var(--ink) !important; }

/* Reveal stays opacity-1 on shop pages */
.shop-page .reveal { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   Language toggle (nav)
   ------------------------------------------------------------ */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  margin-left: 4px;
}
.lang-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  padding: 0 9px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--lp-transition-interactive);
}
.lang-btn:hover { color: #fff; }
.lang-btn.on {
  background: #fff;
  color: var(--bg);
}
html[data-palette="paper"] .lang-toggle,
html[data-palette="ivory"] .lang-toggle {
  border-color: rgba(0,0,0,0.1);
  background: rgba(0,0,0,0.04);
}
html[data-palette="paper"] .lang-btn,
html[data-palette="ivory"] .lang-btn { color: var(--muted); }
html[data-palette="paper"] .lang-btn:hover,
html[data-palette="ivory"] .lang-btn:hover { color: var(--ink); }
html[data-palette="paper"] .lang-btn.on,
html[data-palette="ivory"] .lang-btn.on {
  background: var(--ink);
  color: var(--bg);
}
@media (max-width: 540px) {
  .lang-toggle { display: none; }
}

/* ------------------------------------------------------------
   Language toggle — single compact button variant
   Replaces the segmented ES/EN control. Click to toggle.
   ------------------------------------------------------------ */
.lang-toggle-single {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: var(--lp-transition-interactive);
  margin-left: 4px;
  white-space: nowrap;
}
.lang-toggle-single:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.07);
}
.lang-toggle-single .lang-toggle-current {
  font-weight: 500;
  letter-spacing: 0.18em;
}
.lang-toggle-single .lang-toggle-arrow {
  font-size: 11px;
  opacity: 0.55;
  transition: transform 0.18s ease;
}
.lang-toggle-single:hover .lang-toggle-arrow {
  opacity: 0.9;
}

html[data-palette="paper"] .lang-toggle-single,
html[data-palette="ivory"] .lang-toggle-single {
  border-color: rgba(10,10,10,0.12);
  background: rgba(10,10,10,0.03);
  color: var(--muted);
}
html[data-palette="paper"] .lang-toggle-single:hover,
html[data-palette="ivory"] .lang-toggle-single:hover {
  color: var(--ink);
  background: rgba(10,10,10,0.06);
  border-color: rgba(10,10,10,0.20);
}

html[data-palette="cobalt"] .lang-toggle-single {
  background: rgba(255,255,255,0.55);
  border-color: rgba(10,10,10,0.10);
  color: #0a0a0a;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
html[data-palette="cobalt"] .lang-toggle-single:hover {
  background: #fff;
  border-color: rgba(25,71,209,0.30);
  color: #1947D1;
}

@media (max-width: 540px) {
  .lang-toggle-single { display: none; }
}
/* ════════════════════════════════════════════════════════════════════════
   Longeva Peptides — Premium Overrides (loaded LAST)
   ────────────────────────────────────────────────────────────────────────
   Surgical visual fixes applied on top of legacy stylesheets without
   touching their source. Specificity kept minimum needed. Each block
   is annotated with the cycle that produced it.
   ════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   CYCLE 4 — MegaMenu: from dark-glass to luxury pharma glass
   ────────────────────────────────────────────────────────────────────────
   Legacy shell is rgba(9,13,24,0.97) — designed for dark theme but rendered
   on a light website → "washed out" perception reported by user. We flip
   the surface to white pearl glass with royal-blue accent edges.
   ══════════════════════════════════════════════════════════════════════ */

/* Shell — premium light glass with royal hairline */
.mega-shell {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(248, 250, 254, 0.88) 100%);
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius-xl);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.55) inset,
    0 32px 80px -16px rgba(11, 31, 77, 0.20),
    0 8px 18px -8px rgba(11, 31, 77, 0.10);
}

/* Body separator becomes a clean royal hairline */
.mega-spotlight {
  border-left: 1px solid var(--lp-glass-border);
  background: linear-gradient(180deg,
    rgba(25, 71, 209, 0.025) 0%,
    rgba(25, 71, 209, 0.05) 100%);
}

/* Category header label — ink soft on light */
.mega-cat-label {
  color: var(--lp-silver);
  font-weight: 700;
  letter-spacing: 0.14em;
}
.mega-cat-header:hover .mega-cat-label { color: var(--lp-ink); }

/* Category icon — royal blue, more visible */
.mega-cat-icon {
  color: var(--lp-royal-64);
  transition: color var(--lp-dur-sm) var(--lp-ease), transform var(--lp-dur-sm) var(--lp-ease);
}
.mega-cat-header:hover .mega-cat-icon {
  color: var(--lp-royal);
  transform: scale(1.06);
}

/* Item link — readable ink instead of white-on-dark */
.mega-item-link {
  color: var(--lp-slate);
  font-weight: 450;
}
.mega-item-link:hover {
  color: var(--lp-royal);
  background: var(--lp-royal-06);
  transform: translate3d(4px, 0, 0);
}
.mega-item-dot {
  background: var(--lp-royal-32);
}
.mega-item-link:hover .mega-item-dot {
  background: var(--lp-royal);
  transform: scale(1.4);
}

/* Spotlight eyebrow + featured items — ink-side palette */
.mega-spotlight-eyebrow {
  color: var(--lp-silver);
}
.mega-featured-item:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translate3d(3px, 0, 0);
  box-shadow: 0 2px 8px rgba(25, 71, 209, 0.06);
}
.mega-featured-name {
  color: var(--lp-ink);
  font-weight: 600;
}
.mega-featured-item:hover .mega-featured-name { color: var(--lp-royal); }
.mega-featured-price {
  color: var(--lp-silver);
}
.mega-featured-item:hover .mega-featured-price { color: var(--lp-slate); }
.mega-featured-arrow {
  color: var(--lp-royal-48);
}
.mega-featured-item:hover .mega-featured-arrow {
  color: var(--lp-royal);
  transform: translate3d(3px, 0, 0);
}

/* Footer strip — switch to ink */
.mega-footer {
  background: linear-gradient(180deg,
    rgba(25, 71, 209, 0.04) 0%,
    rgba(25, 71, 209, 0.07) 100%);
  border-top: 1px solid var(--lp-glass-border);
}
.mega-footer-ruo {
  color: var(--lp-silver);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
}
.mega-footer-coa {
  color: var(--lp-royal);
  font-weight: 600;
  transition: color var(--lp-dur-sm) var(--lp-ease), transform var(--lp-dur-sm) var(--lp-ease);
}
.mega-footer-coa:hover {
  color: var(--lp-royal-deep);
  transform: translate3d(2px, 0, 0);
}

/* "All compounds" CTA gets royal treatment */
.mega-view-all-btn {
  margin-top: 12px;
  background: var(--lp-grad-royal);
  color: #FFFFFF !important;
  border-radius: var(--lp-radius-pill);
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: -0.005em;
  box-shadow: 0 10px 24px -6px rgba(25, 71, 209, 0.30);
  transition:
    transform var(--lp-dur-sm) var(--lp-ease),
    box-shadow var(--lp-dur-sm) var(--lp-ease);
}
.mega-view-all-btn:hover {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 14px 30px -6px rgba(25, 71, 209, 0.35);
}

/* Focus ring for keyboard nav */
.mega-shell a:focus-visible,
.mega-shell button:focus-visible {
  outline: var(--lp-focus-outline);
  outline-offset: 2px;
  border-radius: var(--lp-radius-sm);
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE 4 — Navbar polish on light surfaces
   ────────────────────────────────────────────────────────────────────────
   Legacy uses text-white on dark assumption. We strengthen contrast when
   the navbar sits over light/scrolled state. Surgical: only adds, doesn't
   remove existing color classes.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   DARK-HERO MODE · Navbar inversion when the page hero uses the signature
   dark gradient (Wholesale, Wholesale-signup, Checkout, 404 protocol).
   The light glass navbar would otherwise disappear on top of these
   deep-navy heroes. Class `lp-dark-hero` is toggled on <body> from App.
   ══════════════════════════════════════════════════════════════════════ */

/* Header surface: switch the inner glass PILL from white to dark glass.
   IMPORTANT: target the inner rounded-full div, NOT the outer full-width
   padding wrapper. Structure:
     <header class="fixed">           ← full width (transparent)
       <div class="px-5 pt-4">        ← full width padding wrapper (transparent)
         <div class="rounded-full glass">  ← THE PILL (target this)
   Earlier selector hit the padding wrapper and painted a full-width
   rectangular gray band across the top. Now only the pill is dark.    */
body.lp-dark-hero header[class*="fixed"] > div > div[class*="rounded-full"] {
  /* CYCLE-R1: alpha 0.55 → 0.82. Con 0.55 el pill se veía gris sucio al
     hacer scroll sobre secciones claras (navy translúcido sobre blanco). */
  background: rgba(8, 14, 36, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 16px 48px -16px rgba(0, 0, 0, 0.45);
}

/* Explicitly reset the padding wrapper to transparent (in case a legacy
   rule painted it). */
body.lp-dark-hero header[class*="fixed"] > div {
  background: transparent !important;
}

/* Logo + brand wordmark: white instead of royal.
   CYCLE-R1: el logo usa style inline color:#1947D1 en el <a>, el <span>
   del wordmark y el <span> PEPTIDES — los selectores anteriores por clase
   nunca los alcanzaban y el logo quedaba cobalt-sobre-navy (invisible).
   !important en CSS SÍ gana a un style inline sin !important. */
body.lp-dark-hero header svg[viewBox="0 0 28 28"],
body.lp-dark-hero header [class*="text-ink"],
body.lp-dark-hero header [class*="text-[#1947D1]"] {
  color: #FFFFFF !important;
}
body.lp-dark-hero header a[aria-label*="Longeva"],
body.lp-dark-hero header a[aria-label*="Longeva"] span,
body.lp-dark-hero header a[aria-label*="Longeva"] svg {
  color: #FFFFFF !important;
}
body.lp-dark-hero header em,
body.lp-dark-hero header [class*="Longeva"] {
  color: #FFFFFF !important;
}

/* Nav pills (Catálogo, Protocolos, Por objetivo, Mayoristas, Recursos) */
body.lp-dark-hero .nav-pill {
  color: rgba(255, 255, 255, 0.82) !important;
}
body.lp-dark-hero .nav-pill:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
body.lp-dark-hero .nav-pill.nav-pill--active {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}

/* Right-side actions: search, wishlist, lang toggle */
body.lp-dark-hero header button[aria-label="Search"],
body.lp-dark-hero header button[aria-label="Wishlist"],
body.lp-dark-hero header .hairline {
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}
body.lp-dark-hero header button[aria-label="Search"]:hover,
body.lp-dark-hero header button[aria-label="Wishlist"]:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #FFFFFF !important;
}
body.lp-dark-hero header .hairline:hover {
  border-color: rgba(255, 255, 255, 0.32) !important;
}

/* Search trigger label text */
body.lp-dark-hero header button[aria-label="Search"] {
  color: rgba(255, 255, 255, 0.80) !important;
}
body.lp-dark-hero header .mono {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* CYCLE-R1: el trigger de búsqueda desktop (button.hairline) heredaba el
   fondo blanco 45% de la paleta cobalt (main.css) → píldora gris sucia con
   texto ink ilegible sobre el navbar navy. Mismo nivel de especificidad
   (0-2-3) pero este archivo carga después → gana. Dark glass + texto claro. */
body.lp-dark-hero header button.hairline {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}
body.lp-dark-hero header button.hairline:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
}
body.lp-dark-hero header button.hairline .mono {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Tienda CTA pill — keep white but invert text to royal for hierarchy */
body.lp-dark-hero header a[href="/shop"] {
  background: #FFFFFF !important;
  color: var(--lp-royal) !important;
}

/* Cart button + chevron icons */
body.lp-dark-hero header svg { color: inherit; }

/* CYCLE-R1: los iconos wishlist/cuenta computaban cobalt (#1947D1) sobre
   navy — casi invisibles. Alguna regla de la paleta cobalt fuerza color en
   el svg directamente; se sobreescribe aquí con blanco explícito. */
body.lp-dark-hero header button[aria-label="Wishlist"] svg,
body.lp-dark-hero header a[href="/login"] svg,
body.lp-dark-hero header button[aria-label="Search"] svg {
  color: rgba(255, 255, 255, 0.88) !important;
  stroke: currentColor !important;
}
body.lp-dark-hero header a[href="/login"] {
  color: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
body.lp-dark-hero header a[href="/login"]:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.10) !important;
}

/* CYCLE-R2: el intento de "mega oscuro" en dark-hero quedaba a medias — el
   shell seguía claro (regla html[data-palette="cobalt"] [role="menu"] > div
   en main.css gana por especificidad 0-2-2 vs 0-2-1) pero los labels sí se
   volvían blancos → texto lavado ilegible sobre panel claro. Solución: el
   mega es SIEMPRE panel claro (igual que el modal de búsqueda, que ya es
   claro sobre hero navy y funciona). Se eliminan las reglas dark del mega. */


/* Better hairline definition when scrolled */
.nav-pill {
  transition:
    color var(--lp-dur-sm) var(--lp-ease),
    background-color var(--lp-dur-sm) var(--lp-ease),
    box-shadow var(--lp-dur-sm) var(--lp-ease);
}
.nav-pill:focus-visible {
  outline: var(--lp-focus-outline);
  outline-offset: 2px;
  border-radius: var(--lp-radius-pill);
}

/* Active state — make it unmistakable */
.nav-pill.nav-pill--active {
  background: var(--lp-royal-08);
  color: var(--lp-royal) !important;
  box-shadow: inset 0 0 0 1px var(--lp-royal-16);
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE 5 — Hero refinement (sin destruir)
   ────────────────────────────────────────────────────────────────────────
   Solo se mejora: legibilidad del headline, transición suave del hero a la
   sección siguiente, focus ring de los dots y arrows, sombras del CTA.
   ══════════════════════════════════════════════════════════════════════ */

/* Headline gets a tighter underlying scrim to keep contrast on bright
   parts of the video. Uses a radial gradient under the copy only. */
.hero-avatar-copy {
  position: relative;
  isolation: isolate;
}
.hero-avatar-copy::before {
  content: '';
  position: absolute;
  inset: -8% -20% -20% -20%;
  background: radial-gradient(60% 60% at 50% 40%,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 80%);
  z-index: -1;
  pointer-events: none;
}

/* Dot indicators — premium feel */
.hero-avatar-dot {
  transition:
    transform var(--lp-dur-sm) var(--lp-ease),
    background-color var(--lp-dur-sm) var(--lp-ease),
    box-shadow var(--lp-dur-sm) var(--lp-ease);
}
.hero-avatar-dot:hover { transform: scale(1.2); }
.hero-avatar-dot.is-active {
  box-shadow: 0 0 0 4px var(--lp-royal-12);
}
.hero-avatar-dot:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #FFFFFF,
    0 0 0 4px var(--lp-royal);
}

/* Arrows — softer, more luxurious */
.hero-avatar-arrow {
  transition:
    transform var(--lp-dur-sm) var(--lp-ease),
    background-color var(--lp-dur-sm) var(--lp-ease),
    box-shadow var(--lp-dur-sm) var(--lp-ease);
}
.hero-avatar-arrow:hover {
  transform: translateY(-50%) scale(1.06);
  box-shadow: var(--lp-shadow-float);
}
.hero-avatar-arrow:focus-visible {
  outline: var(--lp-focus-outline);
  outline-offset: 3px;
}

/* Soft transition from hero to next section (the blue trust strip).
   A subtle gradient veil bottom of the hero avoids the "hard cut" reported.
   Uses pseudo on the hero, not on the strip, so the strip stays solid. */
.home-hero--avatar {
  position: relative;
}
.home-hero--avatar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 96px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(25, 71, 209, 0.04) 60%,
    rgba(25, 71, 209, 0.08) 100%);
  pointer-events: none;
  z-index: 2;
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE 6 — Trust strip (post-hero) refinement
   ────────────────────────────────────────────────────────────────────────
   The legacy `.trust-strip` block is a solid royal-blue ribbon. We keep
   the brand color but:
   - add a subtle inner highlight so it reads as glass over royal, not flat
   - refine chip hover (current = dark purple ring; switch to soft pearl)
   - smooth transition with the hero above and the section below
   ══════════════════════════════════════════════════════════════════════ */

.trust-strip {
  position: relative;
  background:
    linear-gradient(180deg,
      #2354DC 0%,
      var(--lp-royal) 50%,
      var(--lp-royal-deep) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 -1px 0 rgba(255,255,255,0.06) inset,
    0 24px 48px -28px rgba(11, 31, 77, 0.42);
}
/* Subtle inner highlight ribbon */
.trust-strip::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.32) 50%,
    transparent 100%);
  pointer-events: none;
}

.trust-strip__chip {
  transition:
    transform var(--lp-dur-sm) var(--lp-ease),
    background-color var(--lp-dur-sm) var(--lp-ease),
    box-shadow var(--lp-dur-sm) var(--lp-ease);
}
.trust-strip__chip:hover {
  transform: translate3d(0, -1px, 0);
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.18);
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE 7 — Product cards & catalog polish
   ────────────────────────────────────────────────────────────────────────
   Apply premium lift, refined border on hover, focus rings. Non-destructive.
   Targets the most common card classes present across the project.
   ══════════════════════════════════════════════════════════════════════ */

.shop-card,
.proteus-card,
.v2-bcat__card {
  transition:
    transform var(--lp-dur-md) var(--lp-ease),
    box-shadow var(--lp-dur-md) var(--lp-ease),
    border-color var(--lp-dur-sm) var(--lp-ease);
  will-change: transform;
}

/* ── ShopCard photo support ────────────────────────────────────────────
   When a product has a real render, the SVG vial is hidden and the photo
   fills the entire image well — no empty padding, no white margin.
   The legacy .shop-card-img is set up around the SVG vial which had its
   own intrinsic padding; with a photoreal product we override.            */
.shop-card--has-photo .shop-card-img {
  padding: 0 !important;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(25,71,209,0.08), transparent 70%),
    linear-gradient(180deg, #F0F4FB 0%, #E3ECFA 100%);
  overflow: hidden;
  border-radius: var(--lp-radius-lg);
  position: relative;
  isolation: isolate;
}
.shop-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;          /* fills the whole tile */
  -o-object-position: center center;
     object-position: center center;
  display: block;
  transition: transform var(--lp-dur-cinema) var(--lp-ease);
  z-index: 0;
}
.shop-card--has-photo:hover .shop-card-photo {
  transform: scale(1.04);
}
/* Stock pill + favorite button float above the photo */
.shop-card--has-photo .shop-card-stock,
.shop-card--has-photo .shop-fav {
  position: absolute;
  z-index: 2;
}
.shop-card--has-photo .shop-card-stock {
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(11,31,77,0.08);
}
.shop-card--has-photo .shop-fav {
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(11,31,77,0.08);
}
.shop-card-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

/* ── Mobile store tiles ────────────────────────────────────────────────
   On phones the catalog is a single full-width column, so the wide 4:3
   image well left the product floating small inside big white margins.
   Square the well (1:1) so object-fit:cover crops the baked-in side
   padding and the product fills the card — larger and centered.        */
@media (max-width: 639px) {
  .shop-card--has-photo .shop-card-img {
    aspect-ratio: 1 / 1;
  }
  .shop-card--has-photo .shop-card-photo {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   Unified product image — CartLine thumb
   When item.image exists, the thumbnail tile renders the real product photo
   instead of the slug-letter badge. Photo fills the tile (object-fit cover).
   ══════════════════════════════════════════════════════════════════════ */
.lp-cart-line--photo .lp-cart-line-thumb {
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.85), transparent 60%),
    linear-gradient(180deg, var(--lp-ice-soft) 0%, var(--lp-ice) 100%);
  border: 1px solid var(--lp-glass-border);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.lp-cart-line-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  display: block;
  z-index: 1;
  transition: transform var(--lp-dur-md) var(--lp-ease);
}
.lp-cart-line--photo:hover .lp-cart-line-thumb-img {
  transform: scale(1.05);
}
/* Hide the slug-code badge & ambient glow when a photo is rendered */
.lp-cart-line--photo .lp-cart-line-thumb-glow {
  display: none;
}


/* ── Home Catalog cards (`vial-wrap-photo`) — fill the entire image well ──
   Legacy CSS centered the product render with padding/space. Now the photo
   fills the box edge-to-edge (object-fit cover), no white margin. */
.vial-wrap-photo {
  position: relative !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: var(--lp-radius-lg);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(25,71,209,0.08), transparent 70%),
    linear-gradient(180deg, #F0F4FB 0%, #E3ECFA 100%);
  isolation: isolate;
}
.vial-wrap-photo .card-product-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  -o-object-position: center center !important;
     object-position: center center !important;
  transform: none !important;
  transition: transform var(--lp-dur-cinema) var(--lp-ease);
  z-index: 1;
}
.vial-wrap-photo:hover .card-product-img {
  transform: scale(1.04) !important;
}
/* Hide vial-grid / vial-glow / card-product-halo / overlay when a real photo
   is used — they were ambient decorations designed for the SVG vial. */
.vial-wrap-photo .vial-grid,
.vial-wrap-photo .vial-glow,
.vial-wrap-photo .card-product-halo,
.vial-wrap-photo .card-vial-overlay {
  display: none !important;
}
/* Keep the corner "+" tick marks above the image */
.vial-wrap-photo > span.mono {
  z-index: 2;
  color: rgba(11, 31, 77, 0.32) !important;
}

.shop-card:hover,
.proteus-card:hover,
.v2-bcat__card:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: var(--lp-shadow-md);
  border-color: var(--lp-glass-border-strong);
}
.shop-card:focus-visible,
.proteus-card:focus-visible {
  outline: var(--lp-focus-outline);
  outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE 8 — Product Detail Page (PDP) polish
   ────────────────────────────────────────────────────────────────────────
   Refine the "Add to cart" CTA and the COA / RUO chip — most-clicked
   element on conversion path. Non-destructive.
   ══════════════════════════════════════════════════════════════════════ */

.pdp-add-cart,
.shop-add-cart,
.proteus-add-cart {
  transition:
    transform var(--lp-dur-sm) var(--lp-ease),
    box-shadow var(--lp-dur-sm) var(--lp-ease);
}
.pdp-add-cart:hover,
.shop-add-cart:hover,
.proteus-add-cart:hover {
  transform: translate3d(0, -1px, 0);
  box-shadow: var(--lp-shadow-glow);
}
.pdp-add-cart:active,
.shop-add-cart:active,
.proteus-add-cart:active {
  transform: translate3d(0, 0, 0);
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE 9 — Cart drawer polish
   ────────────────────────────────────────────────────────────────────────
   - Refine the checkout CTA shadow + hover
   - Empty-state CTA gets royal-treatment
   - Backdrop scrim slightly warmer
   ══════════════════════════════════════════════════════════════════════ */

.lp-cart-checkout {
  transition:
    transform var(--lp-dur-sm) var(--lp-ease),
    box-shadow var(--lp-dur-sm) var(--lp-ease);
  box-shadow: 0 12px 28px -8px rgba(25, 71, 209, 0.30);
}
.lp-cart-checkout:hover {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 18px 38px -10px rgba(25, 71, 209, 0.36);
}
.lp-cart-checkout:focus-visible {
  outline: var(--lp-focus-outline);
  outline-offset: 3px;
}
.lp-cart-empty-cta {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--lp-radius-pill);
  /* CYCLE-R10: !important — cart-drawer.css carga después y pisaba el
     background con #E8EDFB, dejando texto blanco sobre celeste (invisible) */
  background: var(--lp-grad-royal) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  box-shadow: 0 10px 24px -6px rgba(25, 71, 209, 0.30);
  transition:
    transform var(--lp-dur-sm) var(--lp-ease),
    box-shadow var(--lp-dur-sm) var(--lp-ease);
}
.lp-cart-empty-cta:hover {
  transform: translate3d(0, -1px, 0);
  background: var(--lp-grad-royal) !important; /* CYCLE-R10: pisa hover #d9e2f9 de cart-drawer.css */
  box-shadow: 0 14px 30px -6px rgba(25, 71, 209, 0.35);
}
.lp-cart-clear:focus-visible,
.lp-cart-close:focus-visible {
  outline: var(--lp-focus-outline);
  outline-offset: 2px;
  border-radius: var(--lp-radius-sm);
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE 10 — Secondary sections + global polish
   ────────────────────────────────────────────────────────────────────────
   - Newsletter section ink rebalance
   - Footer link hover refinement
   - WhatsApp float button hover
   - Compliance section spacing
   - Global focus default for non-styled interactive elements
   ══════════════════════════════════════════════════════════════════════ */

/* Newsletter / dark CTA — keep dark, refine button shadow */
.cta-section .cta-button,
.v2-cta__button {
  transition:
    transform var(--lp-dur-sm) var(--lp-ease),
    box-shadow var(--lp-dur-sm) var(--lp-ease);
}
.cta-section .cta-button:hover,
.v2-cta__button:hover {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 18px 40px -8px rgba(255, 255, 255, 0.32);
}

/* WhatsApp floating button */
.lp-wa-float,
.whatsapp-float {
  transition:
    transform var(--lp-dur-sm) var(--lp-ease),
    box-shadow var(--lp-dur-sm) var(--lp-ease);
}
.lp-wa-float:hover,
.whatsapp-float:hover {
  transform: translate3d(0, -2px, 0) scale(1.04);
  box-shadow: 0 16px 32px -8px rgba(37, 211, 102, 0.55);
}

/* Footer link refinement */
.lp-footer a,
.site-footer a,
footer a {
  transition: color var(--lp-dur-sm) var(--lp-ease), opacity var(--lp-dur-sm) var(--lp-ease);
}

/* Compliance disclaimer breathing room */
.v2-compliance {
  padding: var(--lp-space-9) var(--lp-space-5);
}

/* Global keyboard focus for interactive elements that have none defined
   yet — Tailwind utilities like `focus:ring` aren't used everywhere. */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
  outline-offset: var(--lp-focus-offset);
}

/* Selection — on-brand */
::-moz-selection {
  background: var(--lp-royal-22);
  color: var(--lp-ink);
}
::selection {
  background: var(--lp-royal-22);
  color: var(--lp-ink);
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE 9 — Checkout page (handoff to WhatsApp coordination)
   ══════════════════════════════════════════════════════════════════════ */
.lp-checkout {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(25,71,209,0.06) 0%, transparent 65%),
    linear-gradient(180deg, var(--lp-pearl) 0%, var(--lp-mist) 100%);
  min-height: 100vh;
  padding: clamp(96px, 14vh, 144px) clamp(20px, 4vw, 48px) clamp(64px, 8vh, 96px);
}
.lp-checkout__inner {
  max-width: 1080px;
  margin: 0 auto;
}
.lp-checkout__head { margin-bottom: var(--lp-space-9); }
.lp-checkout__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--lp-silver);
  text-decoration: none;
  font-size: 13.5px;
  margin-bottom: var(--lp-space-5);
  transition: color var(--lp-dur-sm) var(--lp-ease);
}
.lp-checkout__back:hover { color: var(--lp-royal); }
.lp-checkout__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--lp-text-eyebrow-size);
  letter-spacing: var(--lp-text-eyebrow-track);
  text-transform: uppercase;
  color: var(--lp-royal);
  display: block;
  margin-bottom: 12px;
}
.lp-checkout__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.035em;
  color: var(--lp-ink);
  line-height: 1.05;
  margin: 0 0 14px;
}
.lp-checkout__title em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: var(--lp-royal, #1947D1) !important;
  -webkit-text-fill-color: var(--lp-royal, #1947D1);
  font-weight: 500;
}
.lp-checkout__sub {
  color: var(--lp-silver);
  font-size: 15px;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0;
}
.lp-checkout__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--lp-space-8);
}
@media (max-width: 880px) {
  .lp-checkout__grid { grid-template-columns: 1fr; }
}
.lp-checkout__summary,
.lp-checkout__form {
  background: var(--lp-glass-strong);
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius-lg);
  padding: var(--lp-space-7);
  box-shadow: var(--lp-shadow-sm);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}
.lp-checkout__h2 {
  font-family: "Inter Tight", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--lp-ink);
  margin: 0 0 var(--lp-space-5);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.lp-checkout__count {
  font-size: 12px;
  font-family: "JetBrains Mono", monospace;
  color: var(--lp-silver);
}
.lp-checkout__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--lp-glass-border-soft);
}
.lp-checkout__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--lp-space-4) 0;
  border-bottom: 1px solid var(--lp-glass-border-soft);
}
.lp-checkout__line-meta strong {
  display: block;
  font-size: 14.5px;
  color: var(--lp-ink);
  margin-bottom: 2px;
  font-weight: 600;
}
.lp-checkout__line-meta span {
  font-size: 12.5px;
  color: var(--lp-silver);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.02em;
}
.lp-checkout__line-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--lp-slate);
  font-weight: 500;
}
.lp-checkout__empty {
  text-align: center;
  padding: var(--lp-space-7) 0;
  color: var(--lp-silver);
}
.lp-checkout__totals {
  margin-top: var(--lp-space-5);
  padding-top: var(--lp-space-5);
  border-top: 1px solid var(--lp-glass-border);
}
.lp-checkout__totals-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  color: var(--lp-slate);
}
.lp-checkout__totals-row--soft { color: var(--lp-silver); font-size: 13px; }
.lp-checkout__totals-row--grand {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--lp-glass-border-soft);
  font-size: 17px;
  font-weight: 600;
  color: var(--lp-ink);
}
.lp-checkout__ruo {
  margin-top: var(--lp-space-5);
  padding: 0;
  background: none;
  border: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-silver);
  opacity: 0.45;
  text-align: center;
}
.lp-checkout__field {
  display: block;
  margin-bottom: var(--lp-space-4);
}
.lp-checkout__field > span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--lp-silver);
  margin-bottom: 6px;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lp-checkout__field input,
.lp-checkout__field select,
.lp-checkout__field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--lp-ink);
  background: #FFFFFF;
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius-sm);
  outline: none;
  transition:
    border-color var(--lp-dur-sm) var(--lp-ease),
    box-shadow var(--lp-dur-sm) var(--lp-ease);
}
.lp-checkout__field input:focus-visible,
.lp-checkout__field select:focus-visible,
.lp-checkout__field textarea:focus-visible {
  border-color: var(--lp-royal);
  box-shadow: 0 0 0 4px var(--lp-royal-12);
}
.lp-checkout__field textarea {
  resize: vertical;
  min-height: 80px;
}
.lp-checkout__accept {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: var(--lp-space-5) 0;
  font-size: 13px;
  color: var(--lp-slate);
  line-height: 1.5;
  cursor: pointer;
}
.lp-checkout__accept input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--lp-royal);
  flex-shrink: 0;
}
.lp-checkout__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 22px;
  border-radius: var(--lp-radius-pill);
  background: #25D366;
  color: #FFFFFF !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 14px 32px -8px rgba(37, 211, 102, 0.55);
  transition:
    transform var(--lp-dur-sm) var(--lp-ease),
    box-shadow var(--lp-dur-sm) var(--lp-ease),
    opacity var(--lp-dur-sm) var(--lp-ease);
}
.lp-checkout__cta:hover { transform: translate3d(0, -1px, 0); box-shadow: 0 20px 40px -10px rgba(37, 211, 102, 0.65); }
.lp-checkout__cta:focus-visible {
  outline: var(--lp-focus-outline);
  outline-offset: 3px;
}
.lp-checkout__cta.is-disabled,
.lp-checkout__cta[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: auto;
  box-shadow: none;
}
.lp-checkout__cta--ghost {
  background: transparent !important;
  color: var(--lp-royal) !important;
  border: 1px solid var(--lp-royal-32);
  box-shadow: none;
}
.lp-checkout__cta--ghost:hover { background: var(--lp-royal-06) !important; }
.lp-checkout__hint {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--lp-warning);
  text-align: center;
}
.lp-checkout__fine {
  margin-top: var(--lp-space-5);
  font-size: 12.5px;
  color: var(--lp-silver);
  line-height: 1.55;
}


/* ══════════════════════════════════════════════════════════════════════
   HOTFIX · AgeGate email step — visible typed text + perfect symmetry
   ────────────────────────────────────────────────────────────────────────
   Root cause of "invisible while typing": some browsers (mostly Chromium
   on macOS with certain dark-mode settings + autofill) override the input
   color with their own -webkit-text-fill-color. We force it on every state.
   Symmetry: center alignment, consistent gap rhythm, equal side gutters.
   ══════════════════════════════════════════════════════════════════════ */

/* Force visible white text on every input state (typed, focused, autofilled) */
.age-gate__email-input,
.age-gate__email-input:focus,
.age-gate__email-input:active,
.age-gate__email-input:hover,
.age-gate__email-input:-webkit-autofill,
.age-gate__email-input:-webkit-autofill:hover,
.age-gate__email-input:-webkit-autofill:focus {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  caret-color: #7FAAFF !important; /* light cobalt (antes cyan off-brand) */
  /* Suppress Chrome autofill yellow fill */
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0.06) inset !important;
  -webkit-transition: background-color 9999s ease-in-out 0s, border-color 200ms ease !important;
  transition: background-color 9999s ease-in-out 0s, border-color 200ms ease !important;
}
.age-gate__email-input::-moz-selection {
  background: rgba(0, 229, 255, 0.42);
  color: #FFFFFF;
}
.age-gate__email-input::selection {
  background: rgba(0, 229, 255, 0.42);
  color: #FFFFFF;
}
.age-gate__email-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.32) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.32) !important;
}
.age-gate__email-input::placeholder {
  color: rgba(255, 255, 255, 0.32) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.32) !important;
}

/* Symmetry: center the whole email step and lock a clean vertical rhythm */
.age-gate__email-step {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px !important;
  padding: 4px 6px 6px;
}
.age-gate__promo-badge {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center;
  gap: 8px !important;
  margin: 0 0 14px !important;
}
.age-gate__promo-pct {
  line-height: 0.92 !important;
}
.age-gate__promo-off {
  margin-bottom: 8px !important;
  letter-spacing: 0.10em !important;
}
.age-gate__title {
  text-align: center;
  max-width: 32ch;
  margin: 0 auto !important;
  line-height: 1.18 !important;
}
.age-gate__promo-tagline {
  text-align: center !important;
  max-width: 44ch;
  margin: 6px auto 18px !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.55) !important;
}
.age-gate__email-form {
  width: 100%;
  display: flex !important;
  flex-direction: column;
  gap: 12px !important;
  align-items: stretch;
}
.age-gate__email-field-wrap {
  width: 100%;
  gap: 6px !important;
}
.age-gate__email-input {
  text-align: left;
  letter-spacing: 0.01em;
  font-size: 15px !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
}
.age-gate__email-submit {
  margin-top: 2px;
  padding: 15px 18px !important;
  border-radius: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  font-size: 13px !important;
}
.age-gate__email-trust {
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  gap: 22px !important;
  margin-top: 10px !important;
  flex-wrap: wrap;
}
.age-gate__email-trust-item {
  gap: 6px !important;
  letter-spacing: 0.02em;
}
.age-gate__skip {
  margin-top: 6px !important;
  letter-spacing: 0.03em;
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE-21 · HERO COPY / CTA vertical rhythm tweak
   Copy nudged UP, CTA buttons nudged DOWN — opens breathing space between
   the headline and the product stage so the eye lands cleanly on each.
   ══════════════════════════════════════════════════════════════════════ */
.hero-avatar-copy {
  transform: translate3d(0, -18px, 0);
}
@media (max-width: 760px) {
  .hero-avatar-copy { transform: translate3d(0, -10px, 0); }
}

/* The legacy CSS positions .hero-carousel-actions with
   `left: 50%; transform: translateX(-50%);` to horizontally center it.
   Our previous override accidentally clobbered the -50% by setting a new
   transform with 0 X. We combine both: -50% (keep horizontal centering)
   + +18px Y (move CTAs slightly below the podium for breathing room). */
.hero-carousel-actions {
  margin-top: 30px !important;
  transform: translate3d(-50%, 18px, 0) !important;
}
@media (max-width: 760px) {
  .hero-carousel-actions {
    margin-top: 22px !important;
    transform: translate3d(-50%, 10px, 0) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE-21 · Protocol bundle — "Ver ficha del producto" link for single-SKU
   ══════════════════════════════════════════════════════════════════════ */
.proto-page__bundle-view-product {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: transform var(--lp-dur-sm) var(--lp-ease), opacity var(--lp-dur-sm) var(--lp-ease);
}
.proto-page__bundle-view-product:hover {
  transform: translate3d(2px, 0, 0);
  opacity: 0.85;
}
.proto-page__bundle-view-product:focus-visible {
  outline: var(--lp-focus-outline);
  outline-offset: 3px;
  border-radius: var(--lp-radius-xs);
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE-20 · HERO CAROUSEL — premium cinematic motion overhaul
   ────────────────────────────────────────────────────────────────────────
   Diagnosis: legacy used `cubic-bezier(0.22, 1, 0.36, 1)` (ease-out-quart)
   which is a "snap then brake" curve — perceived as a "boing" by the user.

   Reference designs studied:
   - Apple TV+ hero:   cubic-bezier(0.32, 0.72, 0, 1)   · slow finish
   - Linear:           spring(100, 30) ≈ in-out         · symmetric
   - Stripe:           cubic-bezier(0.16, 1, 0.3, 1)    · expo soft
   - Tesla galleries:  symmetric in-out, 1.0-1.2s       · cinematic

   New curve: cubic-bezier(0.62, 0, 0.20, 1)
     · gentle start (0.62 control) — products glide instead of jumping
     · long lazy finish (0.20 to 1) — settling is luxurious, no overshoot
     · symmetric enough to feel "cinematic" rather than "snappy"

   Durations stretched: transform 1100ms (was 780), opacity 880ms, filter
   shortened to 420ms so the blur change resolves before the transform
   finishes — the eye reads the focus crispen first, depth lock-in after.
   ══════════════════════════════════════════════════════════════════════ */

.hero-avatar-slot {
  transition:
    transform 1100ms cubic-bezier(0.62, 0, 0.20, 1),
    opacity    880ms cubic-bezier(0.32, 0.72, 0, 1),
    filter     420ms cubic-bezier(0.16, 1, 0.30, 1) !important;
}

/* Slot-distance staggered delay — outer slots start moving 60ms after the
   active slot begins its glide. Reads as a "wave" instead of a hard cut. */
.hero-avatar-slot[data-pos="0"] { transition-delay: 0ms !important; }
.hero-avatar-slot[data-pos="1"] { transition-delay: 30ms !important; }
.hero-avatar-slot[data-pos="2"] { transition-delay: 60ms !important; }

/* Active product gets a slow ambient breathe to break perfect stillness
   between rotations — only on the centered slot, only when not hovered.
   Cheap: only transform: scale (no layout, no paint). */
@keyframes lp-hero-product-breathe {
  0%, 100% { transform: scale(1.000); }
  50%      { transform: scale(1.014); }
}
.hero-avatar-slot.is-active .hero-avatar-img {
  animation: lp-hero-product-breathe 6.8s ease-in-out infinite;
  animation-delay: 800ms; /* wait for the rotation transition to settle */
  will-change: transform;
}
.hero-avatar-stage:hover .hero-avatar-slot.is-active .hero-avatar-img {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .hero-avatar-slot.is-active .hero-avatar-img { animation: none; }
}

/* Arrows: also smooth out hover and add the same curve language */
.hero-avatar-arrow {
  transition:
    transform 380ms cubic-bezier(0.32, 0.72, 0, 1),
    background-color 280ms var(--lp-ease),
    box-shadow 380ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}

/* Dots — smoother active state morph */
.hero-avatar-dot {
  transition:
    width 520ms cubic-bezier(0.62, 0, 0.20, 1),
    background-color 280ms var(--lp-ease),
    transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 280ms var(--lp-ease) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE-19 · MARQUEE INCENTIVE STRIP
   Constant left-bound scroll of trust/shipping messages. Two identical
   tracks side-by-side for a seamless infinite loop.
   ══════════════════════════════════════════════════════════════════════ */
.incentive-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 36px;
  background: var(--lp-grad-signature);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 6px 18px -8px rgba(11, 31, 77, 0.42);
}
.incentive-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--lp-grad-signature-overlay);
  pointer-events: none;
  z-index: 0;
}
/* Edge fade — soften where the marquee enters/exits */
.incentive-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(5,8,17,0.55) 0%,
      transparent 6%,
      transparent 94%,
      rgba(5,8,17,0.55) 100%);
  pointer-events: none;
  z-index: 2;
}
.incentive-strip-marquee {
  position: relative;
  z-index: 1;
  display: flex;
  width: -moz-max-content;
  width: max-content;
  animation: lp-marquee 38s linear infinite;
  will-change: transform;
}
.incentive-strip:hover .incentive-strip-marquee {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .incentive-strip-marquee {
    animation: none;
    transform: translate3d(0, 0, 0) !important;
  }
}
@keyframes lp-marquee {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.incentive-strip-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.incentive-strip-msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.94);
  white-space: nowrap;
}
.incentive-strip-icon {
  font-size: 14px;
  line-height: 1;
}
.incentive-strip-sep {
  color: rgba(127, 170, 255, 0.55);
  font-weight: 600;
}
.incentive-strip-close {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  border: 0;
  background: rgba(255,255,255,0.10);
  color: #FFFFFF;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--lp-dur-sm) var(--lp-ease), transform var(--lp-dur-sm) var(--lp-ease);
}
.incentive-strip-close:hover {
  background: rgba(255,255,255,0.20);
  transform: scale(1.05);
}
.incentive-strip-close:focus-visible {
  outline: 2px solid rgba(255,255,255,0.8);
  outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE-19 · CART — Free-shipping progress + cross-sell suggestions
   ══════════════════════════════════════════════════════════════════════ */
.lp-cart-ship {
  padding: 16px 24px 18px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.06);
  background: linear-gradient(180deg, rgba(25,71,209,0.04) 0%, transparent 100%);
}
.lp-cart-ship-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--lp-slate);
  margin-bottom: 8px;
  line-height: 1.4;
}
.lp-cart-ship-text strong {
  color: var(--lp-ink);
  font-weight: 600;
}
.lp-cart-ship-icon {
  font-size: 16px;
  line-height: 1;
}
.lp-cart-ship-bar {
  position: relative;
  width: 100%;
  height: 5px;
  background: var(--lp-ice);
  border-radius: 999px;
  overflow: hidden;
}
.lp-cart-ship-bar-fill {
  display: block;
  height: 100%;
  background: var(--lp-grad-royal);
  border-radius: 999px;
  transition: width var(--lp-dur-lg) var(--lp-ease);
  box-shadow: 0 0 12px var(--lp-royal-32);
}
.lp-cart-ship-meta {
  margin-top: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--lp-silver);
}

/* Suggest line — render as a faux cart line but with a clear "+ Add" cta */
.lp-cart-suggest {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 16px 24px;
  background: linear-gradient(90deg, rgba(25,71,209,0.06), rgba(25,71,209,0.02));
  border-top: 1px dashed var(--lp-royal-22);
  border-bottom: 1px dashed var(--lp-royal-22);
  margin: 12px 0;
}
.lp-cart-suggest-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--lp-radius-md);
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.85), transparent 60%),
    linear-gradient(180deg, var(--lp-ice) 0%, var(--lp-ice-soft) 100%);
  border: 1px solid var(--lp-glass-border);
  display: grid;
  place-items: center;
  color: var(--lp-royal);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.lp-cart-suggest-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  z-index: 1;
  transition: transform var(--lp-dur-md) var(--lp-ease);
}
.lp-cart-suggest--photo:hover .lp-cart-suggest-thumb-img {
  transform: scale(1.05);
}
.lp-cart-suggest-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.lp-cart-suggest-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-royal);
  margin-bottom: 4px;
}
.lp-cart-suggest-title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--lp-ink);
  line-height: 1.25;
}
.lp-cart-suggest-sub {
  font-size: 12.5px;
  color: var(--lp-silver);
  margin-top: 2px;
}
.lp-cart-suggest-add {
  align-self: center;
  flex-shrink: 0;
  padding: 10px 14px;
  border-radius: var(--lp-radius-pill);
  border: 0;
  background: var(--lp-grad-royal);
  color: #FFFFFF;
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 20px -6px rgba(25, 71, 209, 0.30);
  transition: transform var(--lp-dur-sm) var(--lp-ease), box-shadow var(--lp-dur-sm) var(--lp-ease);
}
.lp-cart-suggest-add:hover {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 12px 26px -6px rgba(25, 71, 209, 0.36);
}
.lp-cart-suggest-add:active { transform: translate3d(0, 0, 0); }
.lp-cart-suggest-add:focus-visible {
  outline: var(--lp-focus-outline);
  outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════════════
   SPRINT 2 · BLOG PAGE
   ══════════════════════════════════════════════════════════════════════ */
.lp-blog {
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(25,71,209,0.05) 0%, transparent 70%),
    linear-gradient(180deg, var(--lp-pearl) 0%, var(--lp-mist) 100%);
  min-height: 100vh;
  padding: clamp(96px, 14vh, 144px) clamp(20px, 4vw, 48px) clamp(64px, 8vh, 96px);
}
.lp-blog__inner { max-width: 1200px; margin: 0 auto; }
.lp-blog__head {
  text-align: center;
  margin-bottom: var(--lp-space-10);
}
.lp-blog__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--lp-text-eyebrow-size);
  letter-spacing: var(--lp-text-eyebrow-track);
  text-transform: uppercase;
  color: var(--lp-royal);
  display: inline-block;
  margin-bottom: 14px;
}
.lp-blog__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 56px);
  letter-spacing: -0.035em;
  color: var(--lp-ink);
  line-height: 1.05;
  margin: 0 0 var(--lp-space-4);
}
.lp-blog__title em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: var(--lp-royal);
  font-weight: 500;
}
.lp-blog__sub {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--lp-silver);
  max-width: 60ch;
  margin: 0 auto;
}
.lp-blog__grid {
  list-style: none;
  margin: 0 0 var(--lp-space-10);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lp-space-5);
}
@media (max-width: 960px) { .lp-blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .lp-blog__grid { grid-template-columns: 1fr; } }
.lp-blog__card {
  background: var(--lp-glass-strong);
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius-lg);
  overflow: hidden;
  transition:
    transform var(--lp-dur-md) var(--lp-ease),
    box-shadow var(--lp-dur-md) var(--lp-ease),
    border-color var(--lp-dur-sm) var(--lp-ease);
}
.lp-blog__card:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--lp-shadow-md);
  border-color: var(--lp-glass-border-strong);
}
.lp-blog__card-link {
  display: block;
  padding: var(--lp-space-7);
  text-decoration: none;
  color: inherit;
}
.lp-blog__card-link:focus-visible {
  outline: var(--lp-focus-outline);
  outline-offset: 2px;
  border-radius: var(--lp-radius-lg);
}
.lp-blog__card-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lp-royal);
  display: inline-block;
  margin-bottom: 12px;
}
.lp-blog__card-title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--lp-ink);
  margin: 0 0 10px;
}
.lp-blog__card-excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--lp-silver);
  margin: 0 0 16px;
}
.lp-blog__card-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--lp-platinum);
  letter-spacing: 0.06em;
}
.lp-blog__card-meta svg { color: var(--lp-royal); }

/* CTA strip — signature dark→royal gradient */
.lp-blog__cta {
  position: relative;
  background: var(--lp-grad-signature);
  border-radius: var(--lp-radius-xl);
  padding: var(--lp-space-9);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--lp-space-7);
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 32px 80px -24px rgba(11, 31, 77, 0.55);
}
.lp-blog__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--lp-grad-signature-overlay);
  pointer-events: none;
  z-index: 1;
}
.lp-blog__cta > * { position: relative; z-index: 2; }
@media (max-width: 760px) {
  .lp-blog__cta { grid-template-columns: 1fr; padding: var(--lp-space-7); }
}
.lp-blog__cta-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.20em;
  color: rgba(127, 170, 255, 0.75);
  margin-bottom: 14px;
  display: block;
}
.lp-blog__cta-title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0 0 10px;
  line-height: 1.15;
}
.lp-blog__cta-sub {
  color: rgba(255,255,255,0.74);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 44ch;
  margin: 0;
}
.lp-blog__cta-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lp-blog__cta-form input {
  flex: 1 1 200px;
  padding: 14px 18px;
  border-radius: var(--lp-radius-pill);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #FFFFFF;
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--lp-dur-sm) var(--lp-ease), background var(--lp-dur-sm) var(--lp-ease);
}
.lp-blog__cta-form input::-moz-placeholder { color: rgba(255,255,255,0.45); }
.lp-blog__cta-form input::placeholder { color: rgba(255,255,255,0.45); }
.lp-blog__cta-form input:focus-visible {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.14);
  box-shadow: 0 0 0 3px rgba(127,170,255,0.32);
}
.lp-blog__cta-form button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--lp-radius-pill);
  background: #FFFFFF;
  color: var(--lp-royal);
  font-size: 14px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: transform var(--lp-dur-sm) var(--lp-ease), box-shadow var(--lp-dur-sm) var(--lp-ease);
}
.lp-blog__cta-form button:hover {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 18px 36px -8px rgba(255,255,255,0.32);
}
.lp-blog__cta-fine {
  margin-top: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.20em;
  color: rgba(255,255,255,0.45);
}


/* ══════════════════════════════════════════════════════════════════════
   SPRINT 2 · WHOLESALE SIGNUP PAGE
   ══════════════════════════════════════════════════════════════════════ */
.lp-ws { min-height: 100vh; }
.lp-ws__hero {
  position: relative;
  background: var(--lp-grad-signature);
  padding: clamp(120px, 18vh, 200px) clamp(20px, 4vw, 48px) clamp(96px, 12vh, 144px);
  overflow: hidden;
  isolation: isolate;
}
.lp-ws__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--lp-grad-signature-overlay);
  pointer-events: none;
  z-index: 1;
}
.lp-ws__hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  text-align: left;
}
.lp-ws__hero-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(127, 170, 255, 0.78);
  margin-bottom: 18px;
  display: inline-block;
}
.lp-ws__hero-title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(36px, 5.2vw, 68px);
  letter-spacing: -0.035em;
  color: #FFFFFF;
  line-height: 1.02;
  margin: 0 0 var(--lp-space-5);
  max-width: 16ch;
}
.lp-ws__hero-title em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: #8FB1FF;
}
.lp-ws__hero-sub {
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 60ch;
  margin: 0 0 var(--lp-space-6);
}
.lp-ws__hero-actions {
  display: flex;
  gap: var(--lp-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--lp-space-6);
}
.lp-ws__hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--lp-radius-pill);
  background: #FFFFFF;
  color: var(--lp-royal);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 18px 40px -10px rgba(255,255,255,0.35);
  transition: transform var(--lp-dur-sm) var(--lp-ease), box-shadow var(--lp-dur-sm) var(--lp-ease);
}
.lp-ws__hero-cta:hover { transform: translate3d(0, -1px, 0); box-shadow: 0 22px 48px -10px rgba(255,255,255,0.42); }
.lp-ws__hero-cta--ghost {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow: none;
}
.lp-ws__hero-cta--ghost:hover { background: rgba(255,255,255,0.10); }
.lp-ws__hero-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--lp-space-5);
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.lp-ws__hero-bullets li::before {
  content: '·  ';
  color: var(--lp-royal);
}

/* Section heads — light theme */
.lp-ws__tiers, .lp-ws__why { padding: clamp(80px, 12vh, 120px) clamp(20px, 4vw, 48px); }
.lp-ws__tiers-inner, .lp-ws__why-inner { max-width: 1240px; margin: 0 auto; }
.lp-ws__section-head {
  text-align: center;
  margin: 0 auto var(--lp-space-9);
  max-width: 720px;
}
.lp-ws__eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--lp-text-eyebrow-size);
  letter-spacing: var(--lp-text-eyebrow-track);
  text-transform: uppercase;
  color: var(--lp-royal);
  margin-bottom: 14px;
  display: inline-block;
}
.lp-ws__eyebrow--light { color: rgba(127,170,255,0.85); }
.lp-ws__h2 {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.8vw, 46px);
  letter-spacing: -0.03em;
  color: var(--lp-ink);
  line-height: 1.05;
  margin: 0 0 12px;
}
.lp-ws__h2 em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: var(--lp-royal);
  font-weight: 500;
}
.lp-ws__h2--light { color: #FFFFFF; }
.lp-ws__h2--light em { color: #8FB1FF; }
.lp-ws__sub {
  font-size: 15px;
  color: var(--lp-silver);
  max-width: 60ch;
  margin: 0 auto;
  line-height: 1.6;
}
.lp-ws__sub--light { color: rgba(255,255,255,0.72); }
.lp-ws__section-head--dark { color: #FFFFFF; }

/* Tier grid */
.lp-ws__tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lp-space-5);
}
@media (max-width: 1024px) { .lp-ws__tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .lp-ws__tier-grid { grid-template-columns: 1fr; } }
.lp-ws__tier {
  position: relative;
  background: var(--lp-glass-strong);
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius-lg);
  padding: var(--lp-space-6) var(--lp-space-5) var(--lp-space-5);
  display: flex;
  flex-direction: column;
  transition:
    transform var(--lp-dur-md) var(--lp-ease),
    box-shadow var(--lp-dur-md) var(--lp-ease),
    border-color var(--lp-dur-sm) var(--lp-ease);
}
.lp-ws__tier:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--lp-shadow-md);
  border-color: var(--lp-glass-border-strong);
}
.lp-ws__tier.is-featured {
  background: var(--lp-grad-signature);
  border-color: rgba(255,255,255,0.18);
  color: #FFFFFF;
  box-shadow: 0 24px 56px -16px rgba(11,31,77,0.42);
}
.lp-ws__tier.is-featured .lp-ws__tier-name,
.lp-ws__tier.is-featured .lp-ws__tier-range,
.lp-ws__tier.is-featured .lp-ws__tier-audience,
.lp-ws__tier.is-featured .lp-ws__tier-perks { color: rgba(255,255,255,0.92); }
.lp-ws__tier.is-featured .lp-ws__tier-perks svg { color: #8FB1FF; }
.lp-ws__tier-flag {
  position: absolute;
  top: -10px;
  right: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: #FFFFFF;
  color: var(--lp-royal);
  padding: 4px 10px;
  border-radius: var(--lp-radius-pill);
  box-shadow: var(--lp-shadow-sm);
}
.lp-ws__tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.lp-ws__tier-name {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--lp-ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.lp-ws__tier-discount {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.lp-ws__tier.is-featured .lp-ws__tier-discount { color: #FFFFFF; }
.lp-ws__tier-range {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--lp-silver);
  margin: 0 0 6px;
}
.lp-ws__tier-audience {
  font-size: 13px;
  color: var(--lp-silver);
  line-height: 1.45;
  margin: 0 0 var(--lp-space-4);
  min-height: 36px;
}
.lp-ws__tier-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--lp-space-5);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: var(--lp-slate);
}
.lp-ws__tier-perks li { display: flex; gap: 8px; align-items: flex-start; }
.lp-ws__tier-perks svg { color: var(--lp-royal); flex-shrink: 0; margin-top: 4px; }
.lp-ws__tier-cta {
  margin-top: auto;
  display: inline-block;
  padding: 11px 16px;
  border-radius: var(--lp-radius-pill);
  text-align: center;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lp-royal);
  background: var(--lp-royal-08);
  transition: background var(--lp-dur-sm) var(--lp-ease), transform var(--lp-dur-sm) var(--lp-ease);
}
.lp-ws__tier-cta:hover {
  background: var(--lp-royal-16);
  transform: translate3d(0, -1px, 0);
}
.lp-ws__tier.is-featured .lp-ws__tier-cta {
  background: #FFFFFF;
}
.lp-ws__tier.is-featured .lp-ws__tier-cta:hover { background: rgba(255,255,255,0.92); }

/* Why grid */
.lp-ws__why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lp-space-5);
}
@media (max-width: 840px) { .lp-ws__why-grid { grid-template-columns: 1fr; } }
.lp-ws__why-card {
  background: var(--lp-glass);
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius-lg);
  padding: var(--lp-space-6);
  transition: transform var(--lp-dur-md) var(--lp-ease), box-shadow var(--lp-dur-md) var(--lp-ease);
}
.lp-ws__why-card:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: var(--lp-shadow-md);
}
.lp-ws__why-card h3 {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--lp-ink);
  margin: 0 0 8px;
}
.lp-ws__why-card p {
  font-size: 14px;
  color: var(--lp-silver);
  line-height: 1.55;
  margin: 0;
}

/* Signup form — signature gradient */
.lp-ws__signup {
  background: var(--lp-grad-signature);
  padding: clamp(80px, 12vh, 120px) clamp(20px, 4vw, 48px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.lp-ws__signup::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--lp-grad-signature-overlay);
  pointer-events: none;
  z-index: 1;
}
.lp-ws__signup-inner {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
}
.lp-ws__form {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--lp-radius-xl);
  padding: var(--lp-space-7);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.lp-ws__form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--lp-space-4);
}
@media (max-width: 640px) { .lp-ws__form-grid { grid-template-columns: 1fr; } }
.lp-ws__field { display: block; }
.lp-ws__field--full { grid-column: 1 / -1; }
.lp-ws__field > span {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin-bottom: 6px;
}
.lp-ws__field input,
.lp-ws__field select,
.lp-ws__field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--lp-radius-sm);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: #FFFFFF;
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--lp-dur-sm) var(--lp-ease), background var(--lp-dur-sm) var(--lp-ease);
}
.lp-ws__field input::-moz-placeholder, .lp-ws__field textarea::-moz-placeholder { color: rgba(255,255,255,0.42); }
.lp-ws__field input::placeholder,
.lp-ws__field textarea::placeholder { color: rgba(255,255,255,0.42); }
.lp-ws__field select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.5) 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 32px; }
.lp-ws__field input:focus-visible,
.lp-ws__field select:focus-visible,
.lp-ws__field textarea:focus-visible {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 3px rgba(127,170,255,0.22);
}
.lp-ws__form-actions {
  display: flex;
  align-items: center;
  gap: var(--lp-space-4);
  margin-top: var(--lp-space-6);
  flex-wrap: wrap;
}
.lp-ws__form-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--lp-radius-pill);
  background: #25D366;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  box-shadow: 0 18px 40px -10px rgba(37,211,102,0.55);
  transition: transform var(--lp-dur-sm) var(--lp-ease), box-shadow var(--lp-dur-sm) var(--lp-ease), opacity var(--lp-dur-sm) var(--lp-ease);
}
.lp-ws__form-submit:hover:not(:disabled) { transform: translate3d(0, -1px, 0); box-shadow: 0 22px 50px -10px rgba(37,211,102,0.62); }
.lp-ws__form-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.lp-ws__form-alt {
  color: rgba(255,255,255,0.78);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 13.5px;
  transition: color var(--lp-dur-sm) var(--lp-ease);
}
.lp-ws__form-alt:hover { color: #FFFFFF; }
.lp-ws__fine {
  margin-top: var(--lp-space-5);
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}


/* ══════════════════════════════════════════════════════════════════════
   SPRINT 2 · Apply signature gradient to other premium surfaces
   ══════════════════════════════════════════════════════════════════════ */

/* Final CTA section on home (the dark slab) — promote to signature gradient */
.cta-section,
.v2-cta,
.lp-cta-final,
[data-cta-final] {
  background: var(--lp-grad-signature) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-section::before,
.v2-cta::before,
.lp-cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--lp-grad-signature-overlay);
  pointer-events: none;
  z-index: 0;
}
.cta-section > *,
.v2-cta > *,
.lp-cta-final > * { position: relative; z-index: 1; }


/* ══════════════════════════════════════════════════════════════════════
   CYCLE 6 — "Estándar Longeva" trust band styles
   ────────────────────────────────────────────────────────────────────────
   New optional component class set. If/when the React adds the elements,
   styles are ready. No effect if not used.
   ══════════════════════════════════════════════════════════════════════ */

.lp-standard {
  padding: var(--lp-space-11) var(--lp-space-5) var(--lp-space-10);
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(25,71,209,0.05) 0%, transparent 70%),
    linear-gradient(180deg, var(--lp-pearl) 0%, var(--lp-mist) 100%);
  border-top: 1px solid var(--lp-glass-border-soft);
  border-bottom: 1px solid var(--lp-glass-border-soft);
}
.lp-standard__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.lp-standard__head {
  text-align: center;
  margin-bottom: var(--lp-space-9);
}
.lp-standard__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--lp-text-eyebrow-size);
  letter-spacing: var(--lp-text-eyebrow-track);
  text-transform: uppercase;
  color: var(--lp-royal);
  margin-bottom: 14px;
  display: inline-block;
}
.lp-standard__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 48px);
  letter-spacing: -0.035em;
  color: var(--lp-ink);
  line-height: 1.05;
  margin: 0 0 14px;
}
.lp-standard__title em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: var(--lp-royal);
  font-weight: 500;
}
.lp-standard__sub {
  font-size: 15px;
  color: var(--lp-silver);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}
.lp-standard__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lp-space-5);
}
@media (max-width: 960px) {
  .lp-standard__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .lp-standard__grid { grid-template-columns: 1fr; }
}
.lp-standard__card {
  background: var(--lp-glass);
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius-lg);
  padding: var(--lp-space-7);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--lp-shadow-sm);
  transition:
    transform var(--lp-dur-md) var(--lp-ease),
    box-shadow var(--lp-dur-md) var(--lp-ease),
    border-color var(--lp-dur-sm) var(--lp-ease);
}
.lp-standard__card:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--lp-shadow-md);
  border-color: var(--lp-glass-border-strong);
}
.lp-standard__card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--lp-radius-sm);
  display: grid;
  place-items: center;
  background: var(--lp-royal-08);
  color: var(--lp-royal);
  margin-bottom: var(--lp-space-4);
}
.lp-standard__card-title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--lp-ink);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.lp-standard__card-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lp-silver);
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE-22 · AgeGate email step — contraste premium (liquid-crystal)
   ────────────────────────────────────────────────────────────────────────
   Problema: el campo de email casi no se distinguía de la card (bg 0.06),
   el placeholder (0.32) y la descripción (0.52) eran demasiado tenues —
   se veía "lavado", no premium. Subimos la presencia del campo (glass más
   visible + borde nítido + highlight interior), elevamos legibilidad de
   textos, y movemos el foco/caret a COBALT de marca (#1947D1) en vez del
   cyan off-brand. Sin gradientes nuevos.
   ══════════════════════════════════════════════════════════════════════ */

/* Descripción + tagline: más legibles */
.age-gate__body--email,
.age-gate__email-step .age-gate__body {
  color: rgba(255,255,255,0.74) !important;
}
.age-gate__promo-tagline {
  color: rgba(255,255,255,0.62) !important;
}
.age-gate__promo-off {
  color: rgba(255,255,255,0.70) !important;
}

/* Campo de email: glass "liquid crystal" — se lee como un campo real */
.age-gate__email-input {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 0.5px rgba(255,255,255,0.04),
    0 1px 2px rgba(0,0,0,0.30) !important;
}
.age-gate__email-input::-moz-placeholder {
  color: rgba(255,255,255,0.52) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(255,255,255,0.52) !important;
}
.age-gate__email-input::placeholder {
  color: rgba(255,255,255,0.52) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(255,255,255,0.52) !important;
}
/* Autofill / forced states heredan el glass más visible */
.age-gate__email-input:-webkit-autofill,
.age-gate__email-input:-webkit-autofill:hover,
.age-gate__email-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0.10) inset !important;
  caret-color: #4D74FF !important;
}

/* Foco on-brand: borde + halo cobalt (reemplaza el cyan) */
.age-gate__email-input:focus {
  border-color: rgba(25,71,209,0.85) !important;
  background: rgba(255,255,255,0.13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 3px rgba(25, 71, 209, 0.22) !important;
  caret-color: #4D74FF !important;
}

/* Micro-trust: legible sin gritar */
.age-gate__email-trust-item {
  color: rgba(255,255,255,0.50) !important;
}
.age-gate__email-trust-item svg { opacity: 0.7 !important; }

/* Skip link: visible pero secundario */
.age-gate__skip {
  color: rgba(255,255,255,0.46) !important;
}
.age-gate__skip:hover {
  color: rgba(255,255,255,0.66) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   CYCLE-R3 — Auditoría de paleta: eliminar hues fuera de Pure Cobalt
   ────────────────────────────────────────────────────────────────────────
   Brand master: cobalt #1947D1 es el ÚNICO color de marca. La auditoría
   (Playwright, computed styles) encontró: cyan legacy #7fe7ff (67 nodos),
   badges violeta #8B5CF6 / verde #10B981, acentos ámbar/sky/rosa en tiles
   de protocolo, y dot verde del ticker. Todo se remapea a la familia
   cobalt (mismo hue, distinta intensidad) sin tocar la data JSX.
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Dots / glows cyan legacy → cobalt brillante (legible sobre navy) */
html[data-palette="cobalt"] .bg-glow-cyan {
  background-color: #4E7BFF !important;
}
html[data-palette="cobalt"] [class*="7fe7ff"] {
  box-shadow: 0 0 10px rgba(78, 123, 255, 0.65) !important;
}
html[data-palette="cobalt"] .text-glow-cyan { color: #1947D1 !important; }

/* 2. Badges del mega spotlight (inline style con accent violeta/verde) */
.mega-featured-badge {
  color: #1947D1 !important;
  background: rgba(25, 71, 209, 0.09) !important;
}
html[data-palette="cobalt"] .mega-view-all-btn {
  border-top-color: rgba(25, 71, 209, 0.16) !important;
}

/* 3. Tiles de protocolo: acento único cobalt (la data trae ámbar/violeta/
   sky/rosa por categoría — !important en custom property gana al inline) */
.v2-tile {
  --tile-accent: #1947D1 !important;
  --tile-accent-bg: rgba(25, 71, 209, 0.07) !important;
}

/* 4. Ticker de actividad: dot verde → cobalt (consistencia de marca) */
.activity-ticker-dot {
  background: #4E7BFF !important;
  box-shadow: 0 0 8px rgba(78, 123, 255, 0.7) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE-R4 — PDP: anillos orbitales cyan/violeta → familia cobalt
   ────────────────────────────────────────────────────────────────────────
   main.css:748 usa rgba(127,231,255,·) (cyan legacy) y :753 rgba(182,167,255,·)
   (violeta). Únicos hues fuera de paleta detectados en #/p/*. Los verdes de
   #/coa (pureza) y CTAs WhatsApp se conservan: son semánticos/de terceros.
   ══════════════════════════════════════════════════════════════════════ */
.pdp-orbit-ring {
  border-color: rgba(78, 123, 255, 0.20) !important;
}
.pdp-orbit-ring.r2 {
  border-color: rgba(25, 71, 209, 0.14) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE-R5 — ProtocolPage: badge de ahorro emerald → cobalt
   ────────────────────────────────────────────────────────────────────────
   rgb(16,185,129) era el único hue fuera de paleta restante en #/protocolo/*.
   El ahorro del bundle se comunica con el acento de marca, no con verde.
   ══════════════════════════════════════════════════════════════════════ */
.proto-page__bundle-savings {
  color: #1947D1 !important;
  background: rgba(25, 71, 209, 0.09) !important;
}

/* Acentos por-protocolo (emerald/violet/amber/sky/pink inline en JSX)
   → unificados a cobalt, igual que los v2-tiles. Un solo color de marca. */
.proto-page {
  --proto-accent: #1947D1 !important;
  --proto-accent-bg: rgba(25, 71, 209, 0.07) !important;
}
.proto-page__icon-wrap {
  background: rgba(25, 71, 209, 0.07) !important;
  color: #1947D1 !important;
}
.proto-page__compound-role {
  color: #1947D1 !important;
  border-color: rgba(25, 71, 209, 0.20) !important;
}
.proto-page__buy-btn { --btn-accent: #1947D1 !important; }
.proto-page__bundle-off { background: #1947D1 !important; }
.proto-page__bundle-final { color: #1947D1 !important; }
.proto-page__add-stack-btn { --stack-accent: #1947D1 !important; }
.proto-page__bundle-view-product { color: #1947D1 !important; }
.proto-page__timeline-dot { background: #1947D1 !important; }
.proto-page__consult-btn {
  border-color: #1947D1 !important;
  color: #1947D1 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE-R6 — PDP: selector de presentación legible en tema claro
   ────────────────────────────────────────────────────────────────────────
   main.css:887 da a la pill NO seleccionada border rgba(255,255,255,0.10)
   (blanco sobre fondo claro = invisible: la opción "10MG" flotaba sin caja).
   Mismo patrón de bug reportado por el usuario en la navbar. Se define el
   estado claro completo: reposo, hover y seleccionado.
   ══════════════════════════════════════════════════════════════════════ */
html[data-palette="cobalt"] .pdp-variant-pill {
  border-color: rgba(10, 10, 10, 0.12) !important;
  background: rgba(255, 255, 255, 0.65) !important;
}
html[data-palette="cobalt"] .pdp-variant-pill:hover {
  border-color: rgba(25, 71, 209, 0.45) !important;
  background: #FFFFFF !important;
}
html[data-palette="cobalt"] .pdp-variant-pill.on {
  border-color: #1947D1 !important;
  background: rgba(25, 71, 209, 0.05) !important;
  box-shadow: 0 0 0 1px rgba(25, 71, 209, 0.30) !important;
}
html[data-palette="cobalt"] .pdp-variant-size {
  color: rgba(10, 10, 10, 0.45) !important;
}
html[data-palette="cobalt"] .pdp-variant-pill.on .pdp-variant-size {
  color: #1947D1 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE-R7 — Product cards: label "PRECIO" y divisor invisibles en cobalt
   ────────────────────────────────────────────────────────────────────────
   main.css:543 .card-price-label = rgba(255,255,255,0.40) y :540
   .card-price-foot border blanco 0.08. Los palettes paper/ivory recibieron
   el fix claro (main.css:601-604) pero cobalt quedó fuera. 65 cards
   afectadas por ruta. Se replica el patrón paper/ivory para cobalt.
   ══════════════════════════════════════════════════════════════════════ */
html[data-palette="cobalt"] .card-price-foot {
  border-top-color: rgba(10, 10, 10, 0.10) !important;
}
html[data-palette="cobalt"] .card-price-label {
  color: rgba(10, 10, 10, 0.45) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE-R8 — Selección de texto: blanco sobre cobalt 30% era ilegible
   ────────────────────────────────────────────────────────────────────────
   main.css:23 ::selection = rgba(cyan,0.3) + color #fff. Con 30% de alpha
   sobre página clara el texto blanco se lava. Selección sólida de marca.
   ══════════════════════════════════════════════════════════════════════ */
html[data-palette="cobalt"] ::-moz-selection {
  background: #1947D1;
  color: #FFFFFF;
}
html[data-palette="cobalt"] ::selection {
  background: #1947D1;
  color: #FFFFFF;
}


/* ══════════════════════════════════════════════════════════════════════
   CYCLE-R9 — Wholesale hero: párrafo negro sobre navy (ilegible)
   ────────────────────────────────────────────────────────────────────────
   sprint-5.css:183 (.lp-ws p:not([class*="--light"]) { color:inherit },
   especificidad 0-2-1) le gana a .lp-ws__hero-sub (0-1-0) y el párrafo
   hereda ink sobre el gradiente navy del hero. Se re-ancla el texto del
   hero oscuro con especificidad suficiente.
   ══════════════════════════════════════════════════════════════════════ */
.lp-ws .lp-ws__hero-sub {
  color: rgba(255, 255, 255, 0.78) !important;
}
.lp-ws .lp-ws__hero p,
.lp-ws .lp-ws__hero li {
  color: rgba(255, 255, 255, 0.78);
}
/* ════════════════════════════════════════════════════════════════════════
   Longeva Peptides — Sprint 2 (CRO / UX / a11y / mobile / resilience)
   Load last. All rules are additive and scoped to new classes or scoped
   selectors that don't conflict with legacy.
   ════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   S2 · CYCLE 1 — Skip-to-content for keyboard users (a11y baseline)
   ══════════════════════════════════════════════════════════════════════ */
.lp-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  background: var(--lp-royal);
  color: #FFFFFF;
  padding: 10px 16px;
  border-radius: var(--lp-radius-pill);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  transform: translate3d(0, -150%, 0);
  transition: transform var(--lp-dur-md) var(--lp-ease);
}
.lp-skip:focus-visible {
  transform: translate3d(0, 0, 0);
  outline: var(--lp-focus-outline);
  outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════════════
   S2 · CYCLE 2 — Touch target floor & mobile spacing rhythm
   Minimum 44x44 (Apple HIG) / 48x48 (Material) on key interactives.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .v2-btn,
  .lp-checkout__cta,
  .lp-cart-checkout,
  .lp-cart-empty-cta,
  .hero-cta-primary,
  .hero-cta-secondary,
  .nav-pill,
  .lp-ws__hero-cta,
  .lp-ws__tier-cta,
  .lp-blog__cta-form button {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .hero-avatar-dot {
    /* Visual size stays small but tap target grows via padding-area */
    position: relative;
  }
  .hero-avatar-dot::after {
    content: '';
    position: absolute;
    inset: -10px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   S2 · CYCLE 3 — Sticky purchase intent bar (PDP)
   Mobile-only sticky bottom with price + add to cart.
   Tag any PDP wrapper with [data-lp-pdp] to enable.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  [data-lp-pdp] {
    padding-bottom: 88px; /* room for the sticky bar */
  }
  .lp-pdp-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--lp-z-sticky);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-top: 1px solid var(--lp-glass-border);
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 -8px 24px -8px rgba(11,31,77,0.12);
  }
  .lp-pdp-sticky__price {
    font-family: "JetBrains Mono", monospace;
    font-size: 16px;
    font-weight: 600;
    color: var(--lp-ink);
  }
  .lp-pdp-sticky__cta {
    flex: 1;
    text-align: center;
    background: var(--lp-grad-signature);
    color: #FFFFFF;
    padding: 12px 18px;
    border-radius: var(--lp-radius-pill);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   S2 · CYCLE 4 — Empty / loading / error states (skeleton + premium 404)
   ══════════════════════════════════════════════════════════════════════ */

/* Skeleton shimmer (cheap — only opacity animation) */
@keyframes lp-skel-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}
.lp-skel {
  background: linear-gradient(90deg,
    var(--lp-ice) 0%,
    var(--lp-ice-soft) 50%,
    var(--lp-ice) 100%);
  border-radius: var(--lp-radius-sm);
  animation: lp-skel-pulse 1.4s ease-in-out infinite;
}
.lp-skel-card {
  background: var(--lp-glass-strong);
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-skel-line { height: 12px; }
.lp-skel-line--lg { height: 20px; }
.lp-skel-thumb { height: 160px; border-radius: var(--lp-radius-md); }

/* Premium 404 page */
.lp-404 {
  min-height: 100vh;
  background: var(--lp-grad-signature);
  display: grid;
  place-items: center;
  padding: clamp(80px, 16vh, 200px) clamp(20px, 4vw, 40px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.lp-404::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--lp-grad-signature-overlay);
  pointer-events: none;
  z-index: 0;
}
.lp-404__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 540px;
  color: #FFFFFF;
}
.lp-404__code {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.32em;
  color: rgba(127,170,255,0.8);
  display: block;
  margin-bottom: 18px;
}
.lp-404__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 4.5vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 14px;
}
.lp-404__sub {
  color: rgba(255,255,255,0.72);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 32px;
}
.lp-404__slug {
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 2px 8px;
  border-radius: var(--lp-radius-xs);
}
.lp-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.lp-404__cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: var(--lp-radius-pill);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  background: #FFFFFF;
  color: var(--lp-royal);
  transition: transform var(--lp-dur-sm) var(--lp-ease), box-shadow var(--lp-dur-sm) var(--lp-ease);
}
.lp-404__cta:hover {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 18px 40px -10px rgba(255,255,255,0.35);
}
.lp-404__cta--ghost {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.30);
}
.lp-404__cta--ghost:hover { background: rgba(255,255,255,0.10); box-shadow: none; }


/* ══════════════════════════════════════════════════════════════════════
   S2 · CYCLE 5 — Trust signals (concrete, on-brand)
   ══════════════════════════════════════════════════════════════════════ */
.lp-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-royal);
  background: var(--lp-royal-08);
  border: 1px solid var(--lp-royal-16);
  padding: 5px 12px;
  border-radius: var(--lp-radius-pill);
}
.lp-trust-pill--solid {
  background: var(--lp-grad-signature);
  color: #FFFFFF;
  border-color: transparent;
}
.lp-trust-pill .lp-trust-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-success);
  box-shadow: 0 0 0 3px var(--lp-success-soft);
}


/* ══════════════════════════════════════════════════════════════════════
   S2 · CYCLE 6 — Reduced data / reduced motion / contrast preferences
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-data: reduce) {
  .home-hero__bg-img,
  .site-bg-video__vid,
  video[autoplay] {
    display: none !important;
  }
  .home-hero__bg,
  .site-bg-video {
    background: var(--lp-grad-pearl-mist) !important;
  }
}
@media (prefers-contrast: more) {
  :root {
    --lp-silver: #2A3550;          /* boost copy contrast */
    --lp-glass-border: rgba(25, 71, 209, 0.34);
    --lp-glass-border-soft: rgba(25, 71, 209, 0.20);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   S2 · CYCLE 7 — Form UX premium (inline validation, autofill polish)
   ══════════════════════════════════════════════════════════════════════ */
input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--lp-ink);
  -webkit-transition: background-color 9999s ease-in-out 0s;
  transition: background-color 9999s ease-in-out 0s;
  caret-color: var(--lp-royal);
}
/* Dark form variant */
.lp-ws__form input:-webkit-autofill,
.lp-ws__form select:-webkit-autofill,
.lp-ws__form textarea:-webkit-autofill {
  -webkit-text-fill-color: #FFFFFF;
}
/* Invalid state — :user-invalid solo marca tras interacción del usuario.
   (Antes: :invalid:not(:placeholder-shown) pintaba rojo los campos vacíos
   sin placeholder desde el primer render.) */
.lp-checkout__field input:user-invalid,
.lp-ws__field input:user-invalid {
  border-color: var(--lp-danger);
}
/* Required asterisk subtle */
.lp-ws__field span:has(+ input[required])::after,
.lp-checkout__field span:has(+ input[required])::after {
  content: ' *';
  color: var(--lp-royal);
}


/* ══════════════════════════════════════════════════════════════════════
   S2 · CYCLE 8 — Microcopy refinements (visual surface only)
   "Pago seguro" inline badge, "Quedan X horas" urgency-soft, "Hecho en
   Panamá / certificación" footnotes — all driven by class hooks the JSX
   can opt into later.
   ══════════════════════════════════════════════════════════════════════ */
.lp-microcopy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--lp-silver);
}
.lp-microcopy--soft { color: var(--lp-platinum); font-size: 11.5px; }
.lp-microcopy--accent { color: var(--lp-royal); font-weight: 500; }
.lp-microcopy svg { width: 13px; height: 13px; flex-shrink: 0; }


/* ══════════════════════════════════════════════════════════════════════
   S2 · CYCLE 9 — Footer link grid + final compliance refinement
   Make sure the dark footer reads as INTENTIONAL, not heavy.
   ══════════════════════════════════════════════════════════════════════ */
.site-footer,
footer.lp-footer,
footer[role="contentinfo"] {
  background: linear-gradient(180deg, #050811 0%, #060F2A 100%) !important;
  color: rgba(255,255,255,0.72);
  position: relative;
  isolation: isolate;
}
.site-footer::before,
footer.lp-footer::before,
footer[role="contentinfo"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(25,71,209,0.18) 0%, transparent 70%),
    var(--lp-grad-signature-overlay);
  pointer-events: none;
  z-index: 0;
}
.site-footer > *,
footer.lp-footer > *,
footer[role="contentinfo"] > * { position: relative; z-index: 1; }
.site-footer a,
footer.lp-footer a,
footer[role="contentinfo"] a {
  color: rgba(255,255,255,0.72);
}
.site-footer a:hover,
footer.lp-footer a:hover,
footer[role="contentinfo"] a:hover { color: #FFFFFF; }


/* ══════════════════════════════════════════════════════════════════════
   S2 · CYCLE 10 — Final QA polish: scroll, anchor offset, prefers-color
   ══════════════════════════════════════════════════════════════════════ */
:root {
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* clear sticky navbar when scrolling to anchors */
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
}

/* Make sure no element overflows horizontally on mobile */
html, body { max-width: 100%; overflow-x: hidden; }

/* Keep focus outline visible on dark backgrounds */
.lp-ws__signup *:focus-visible,
.lp-404 *:focus-visible,
.lp-blog__cta *:focus-visible,
.lp-checkout__cta:focus-visible {
  outline: 2px solid rgba(255,255,255,0.8);
  outline-offset: 3px;
}

/* Print: hide non-essential chrome */
@media print {
  .lp-skip, .nav-pill, .hero-avatar-stage, .trust-strip,
  .lp-cart-root, .lp-blog__cta, .lp-ws__signup,
  .v2-compliance, footer { display: none !important; }
}
/* ════════════════════════════════════════════════════════════════════════
   Longeva Peptides — Sprint 3 (conversion psychology + content depth)
   Loaded last. Additive. All classes are new — no override of legacy.
   ════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   S3·1 · ResearchActivityBand — discrete social proof
   ══════════════════════════════════════════════════════════════════════ */
.lp-rab {
  padding: clamp(56px, 8vh, 88px) clamp(20px, 4vw, 48px);
  background: linear-gradient(180deg, var(--lp-mist) 0%, var(--lp-pearl) 100%);
  border-top: 1px solid var(--lp-glass-border-soft);
  border-bottom: 1px solid var(--lp-glass-border-soft);
}
.lp-rab__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lp-space-5);
}
@media (max-width: 960px) { .lp-rab__inner { grid-template-columns: repeat(2, 1fr); } }
/* Móvil: 2×2 compacto en vez de 4 stats apiladas (ahorra ~1 pantalla) */
@media (max-width: 480px) {
  .lp-rab { padding: 40px 20px; }
  .lp-rab__inner { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .lp-rab__cell { padding: 14px 6px; }
  .lp-rab__value { font-size: 34px; margin-bottom: 8px; }
  .lp-rab__label { font-size: 12.5px; line-height: 1.3; }
  .lp-rab__sub { font-size: 9.5px; }
}
.lp-rab__cell {
  text-align: center;
  padding: var(--lp-space-5) var(--lp-space-4);
  position: relative;
}
.lp-rab__cell + .lp-rab__cell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: var(--lp-glass-border);
}
@media (max-width: 960px) {
  .lp-rab__cell + .lp-rab__cell::before { display: none; }
}
.lp-rab__value {
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(36px, 4.4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--lp-royal);
  display: block;
  line-height: 1;
  margin-bottom: 12px;
}
.lp-rab__value em {
  font-style: normal;
  font-size: 0.55em;
  font-weight: 600;
  color: var(--lp-royal-deep);
  margin-left: 2px;
  vertical-align: top;
  position: relative;
  top: 0.15em;
}
.lp-rab__label {
  display: block;
  font-size: 14px;
  color: var(--lp-ink);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.lp-rab__sub {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--lp-silver);
  text-transform: uppercase;
}


/* ══════════════════════════════════════════════════════════════════════
   S3·2 · CompareGLP1Table — side-by-side decision aid
   ══════════════════════════════════════════════════════════════════════ */
.lp-cmp {
  padding: clamp(80px, 12vh, 128px) clamp(20px, 4vw, 48px);
  background: linear-gradient(180deg, var(--lp-pearl) 0%, var(--lp-mist) 100%);
}
.lp-cmp__inner { max-width: 1240px; margin: 0 auto; }
.lp-cmp__head { text-align: center; margin-bottom: var(--lp-space-9); }
.lp-cmp__eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lp-royal);
  margin-bottom: 14px;
  display: inline-block;
}
.lp-cmp__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.8vw, 46px);
  letter-spacing: -0.03em;
  color: var(--lp-ink);
  margin: 0 0 12px;
}
.lp-cmp__title em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: var(--lp-royal);
  font-weight: 500;
}
.lp-cmp__sub { color: var(--lp-silver); font-size: 15px; max-width: 64ch; margin: 0 auto; line-height: 1.6; }

.lp-cmp__grid {
  background: var(--lp-glass-strong);
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius-xl);
  overflow: hidden;
  box-shadow: var(--lp-shadow-md);
}
.lp-cmp__row {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
}
.lp-cmp__row + .lp-cmp__row {
  border-top: 1px solid var(--lp-glass-border-soft);
}
.lp-cmp__row--head { background: linear-gradient(180deg, rgba(25,71,209,0.05), transparent); }

/* ── Corner cell (top-left) ─────────────────────────────────────────── */
.lp-cmp__corner {
  display: flex;
  align-items: flex-end;
  padding: var(--lp-space-6) var(--lp-space-5) 22px;
}
.lp-cmp__corner-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lp-silver);
}

/* ── Column heads ───────────────────────────────────────────────────── */
.lp-cmp__col-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--lp-space-6) var(--lp-space-5) 22px;
  border-left: 1px solid var(--lp-glass-border-soft);
}
.lp-cmp__col-head h3 {
  font-family: "Inter Tight", sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--lp-ink);
  margin: 12px 0 5px;
  letter-spacing: -0.015em;
}
.lp-cmp__col-head p {
  font-size: 12.5px;
  color: var(--lp-silver);
  margin: 0 0 20px;
  line-height: 1.45;
  min-height: 2.6em;
}

/* ── Featured column — highlighted "recommended" band ───────────────── */
.lp-cmp__col-head--featured {
  background: var(--lp-grad-signature);
  color: #FFFFFF;
  border-left: 1.5px solid var(--lp-royal);
  border-right: 1.5px solid var(--lp-royal);
  position: relative;
  overflow: hidden;
}
.lp-cmp__col-head--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lp-grad-signature-overlay);
  pointer-events: none;
}
.lp-cmp__col-head--featured > * { position: relative; }
.lp-cmp__col-head--featured h3 { color: #FFFFFF; }
.lp-cmp__col-head--featured p { color: rgba(255,255,255,0.80); }

/* ── Chips (category badge) ─────────────────────────────────────────── */
.lp-cmp__chip {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--lp-radius-pill);
  background: var(--lp-royal-08);
  color: var(--lp-royal);
  border: 1px solid rgba(25,71,209,0.14);
}
.lp-cmp__chip--featured {
  background: rgba(255,255,255,0.16);
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.30);
}

/* ── Cotizar buttons — consistent across all three columns ──────────── */
.lp-cmp__buy {
  margin-top: auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 16px;
  font-family: "Inter Tight", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--lp-royal);
  background: #FFFFFF;
  border: 1.5px solid rgba(25,71,209,0.30);
  border-radius: var(--lp-radius-pill);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(11,31,77,0.05);
  transition: background var(--lp-dur-sm) var(--lp-ease),
              border-color var(--lp-dur-sm) var(--lp-ease),
              color var(--lp-dur-sm) var(--lp-ease),
              box-shadow var(--lp-dur-sm) var(--lp-ease),
              transform var(--lp-dur-sm) var(--lp-ease);
}
.lp-cmp__buy:hover {
  background: var(--lp-royal);
  border-color: var(--lp-royal);
  color: #FFFFFF;
  box-shadow: 0 12px 24px -8px rgba(25,71,209,0.55);
  transform: translate3d(0, -1px, 0);
}
.lp-cmp__buy-ico { transition: transform var(--lp-dur-sm) var(--lp-ease); }
.lp-cmp__buy:hover .lp-cmp__buy-ico { transform: translate3d(3px, 0, 0); }

.lp-cmp__buy--featured {
  background: #FFFFFF;
  color: var(--lp-royal);
  border-color: #FFFFFF;
  box-shadow: 0 12px 26px -8px rgba(0,0,0,0.38);
}
.lp-cmp__buy--featured:hover {
  background: #EDF1FC;
  color: var(--lp-royal-deep);
  border-color: #EDF1FC;
  box-shadow: 0 16px 30px -8px rgba(0,0,0,0.30);
  transform: translate3d(0, -1px, 0);
}

/* ── Row labels + data cells ────────────────────────────────────────── */
.lp-cmp__rowlabel {
  padding: 15px 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-silver);
  display: flex;
  align-items: center;
}
.lp-cmp__cell {
  padding: 15px 20px;
  font-size: 13.5px;
  color: var(--lp-slate);
  border-left: 1px solid var(--lp-glass-border-soft);
  display: flex;
  align-items: center;
}
.lp-cmp__cell--featured {
  background: rgba(25,71,209,0.055);
  color: var(--lp-ink);
  font-weight: 600;
  border-left: 1.5px solid var(--lp-royal);
  border-right: 1.5px solid var(--lp-royal);
}
.lp-cmp__row:last-child .lp-cmp__cell--featured {
  border-bottom: 1.5px solid var(--lp-royal);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.lp-cmp__fine {
  margin-top: var(--lp-space-6);
  font-size: 12.5px;
  color: var(--lp-silver);
  text-align: center;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

/* ── Mobile: stack + neutralize the vertical featured rails ─────────── */
@media (max-width: 780px) {
  .lp-cmp__row { grid-template-columns: 1fr; }
  .lp-cmp__row + .lp-cmp__row > div { border-top: 1px dashed var(--lp-glass-border-soft); }
  .lp-cmp__corner { display: none; }
  .lp-cmp__col-head { border-left: 0; }
  .lp-cmp__col-head p { min-height: 0; }
  .lp-cmp__col-head--featured { border-left: 0; border-right: 0; }
  .lp-cmp__cell--featured { border-left: 0; border-right: 0; }
  .lp-cmp__row:last-child .lp-cmp__cell--featured { border-bottom: 0; border-radius: 8px; }
}


/* ══════════════════════════════════════════════════════════════════════
   S3·3 · GlossaryTip — inline term with tooltip
   ══════════════════════════════════════════════════════════════════════ */
.lp-gloss {
  position: relative;
  display: inline;
  cursor: help;
}
.lp-gloss__term {
  border-bottom: 1px dashed var(--lp-royal-32);
  color: var(--lp-royal);
  font-weight: 500;
  transition: color var(--lp-dur-sm) var(--lp-ease), border-color var(--lp-dur-sm) var(--lp-ease);
}
.lp-gloss:hover .lp-gloss__term,
.lp-gloss:focus .lp-gloss__term {
  color: var(--lp-royal-deep);
  border-bottom-color: var(--lp-royal);
}
.lp-gloss__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate3d(-50%, 4px, 0);
  min-width: 220px;
  max-width: 320px;
  padding: 12px 14px;
  background: var(--lp-grad-signature);
  color: #FFFFFF;
  border-radius: var(--lp-radius-md);
  box-shadow: 0 18px 40px -10px rgba(11,31,77,0.42);
  opacity: 0;
  pointer-events: none;
  z-index: var(--lp-z-tooltip);
  transition: opacity var(--lp-dur-sm) var(--lp-ease), transform var(--lp-dur-sm) var(--lp-ease);
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 400;
  text-align: left;
  letter-spacing: 0;
  border: 1px solid rgba(255,255,255,0.1);
}
.lp-gloss__tip strong {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: rgba(127,170,255,0.78);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.lp-gloss__tip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translate3d(-50%, 0, 0) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #1238A8;
  border-right: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.lp-gloss:hover .lp-gloss__tip,
.lp-gloss:focus .lp-gloss__tip {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  pointer-events: auto;
}


/* ══════════════════════════════════════════════════════════════════════
   S3·4 · ExitIntentModal
   ══════════════════════════════════════════════════════════════════════ */
.lp-exit {
  position: fixed;
  inset: 0;
  z-index: var(--lp-z-modal);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: lp-fade-in 240ms var(--lp-ease) both;
}
@keyframes lp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.lp-exit__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 15, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 0;
  cursor: pointer;
}
.lp-exit__panel {
  position: relative;
  z-index: 1;
  width: min(540px, 100%);
  background: var(--lp-grad-signature);
  border-radius: var(--lp-radius-xl);
  padding: var(--lp-space-8);
  color: #FFFFFF;
  box-shadow: 0 48px 100px -24px rgba(11,31,77,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  isolation: isolate;
  overflow: hidden;
}
.lp-exit__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--lp-grad-signature-overlay);
  pointer-events: none;
  z-index: -1;
}
.lp-exit__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.10);
  color: #FFFFFF;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--lp-dur-sm) var(--lp-ease);
}
.lp-exit__close:hover { background: rgba(255,255,255,0.20); }
.lp-exit__eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: rgba(127,170,255,0.80);
  display: block;
  margin-bottom: 16px;
}
.lp-exit__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.025em;
  color: #FFFFFF;
  line-height: 1.15;
  margin: 0 0 12px;
}
.lp-exit__title em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: #8FB1FF;
}
.lp-exit__sub {
  color: rgba(255,255,255,0.78);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 var(--lp-space-5);
}
.lp-exit__form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lp-exit__form input {
  flex: 1 1 240px;
  padding: 14px 16px;
  border-radius: var(--lp-radius-pill);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #FFFFFF;
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
}
.lp-exit__form input::-moz-placeholder { color: rgba(255,255,255,0.45); }
.lp-exit__form input::placeholder { color: rgba(255,255,255,0.45); }
.lp-exit__form input:focus-visible { border-color: rgba(255,255,255,0.5); box-shadow: 0 0 0 3px rgba(127,170,255,0.32); }
.lp-exit__form button {
  padding: 14px 22px;
  border-radius: var(--lp-radius-pill);
  border: 0;
  background: #FFFFFF;
  color: var(--lp-royal);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform var(--lp-dur-sm) var(--lp-ease), box-shadow var(--lp-dur-sm) var(--lp-ease);
}
.lp-exit__form button:hover { transform: translate3d(0, -1px, 0); box-shadow: 0 18px 36px -8px rgba(255,255,255,0.32); }
.lp-exit__fine {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.06em;
}


/* ══════════════════════════════════════════════════════════════════════
   S3·5 · StickyMobileCart (mobile bottom bar)
   ══════════════════════════════════════════════════════════════════════ */
.lp-sticky-cart { display: none; }
@media (max-width: 760px) {
  .lp-sticky-cart {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: var(--lp-z-sticky);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-radius: var(--lp-radius-pill);
    background: var(--lp-grad-signature);
    color: #FFFFFF;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 24px 60px -12px rgba(11,31,77,0.55);
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--lp-dur-md) var(--lp-ease);
    animation: lp-sticky-cart-in 360ms var(--lp-ease) both;
  }
}
@keyframes lp-sticky-cart-in {
  from { transform: translate3d(0, 50px, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}
.lp-sticky-cart__left {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  flex-shrink: 0;
}
.lp-sticky-cart__count {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--lp-royal);
  font-size: 10.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0 4px;
}
.lp-sticky-cart__mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 12.5px;
  color: rgba(255,255,255,0.78);
  text-align: left;
  line-height: 1.2;
}
.lp-sticky-cart__mid strong {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
}
.lp-sticky-cart__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════════════
   S3·6 · LabSnapshot — v3 puro 3 pillars (mock COA eliminado)
   3 cards alineadas en grid, KPI grande arriba, hover premium con
   gradient glow + lift + shimmer en el borde.
   ══════════════════════════════════════════════════════════════════════ */
.lp-lab {
  padding: clamp(64px, 9vh, 96px) clamp(20px, 4vw, 48px);
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(25,71,209,0.05) 0%, transparent 65%),
    linear-gradient(180deg, var(--lp-pearl) 0%, var(--lp-mist) 100%);
}
.lp-lab__inner { max-width: 1200px; margin: 0 auto; }
.lp-lab__head {
  text-align: center;
  margin-bottom: var(--lp-space-8);
}
.lp-lab__eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lp-royal);
  margin-bottom: 14px;
  display: inline-block;
}
.lp-lab__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.8vw, 46px);
  letter-spacing: -0.035em;
  color: var(--lp-ink);
  margin: 0 0 12px;
  line-height: 1.05;
}
.lp-lab__title em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: var(--lp-royal);
  font-weight: 500;
}
.lp-lab__sub {
  color: var(--lp-silver);
  font-size: 15px;
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.6;
}

/* Pillars grid — 3 columns desktop, stacked mobile */
.lp-lab__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lp-space-5);
}
@media (max-width: 860px) {
  .lp-lab__pillars { grid-template-columns: 1fr; gap: var(--lp-space-4); }
}

.lp-lab__pillar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.95), rgba(255,255,255,0.75)),
    var(--lp-glass-strong);
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius-xl);
  padding: var(--lp-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--lp-space-3);
  transition:
    transform 480ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 480ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color var(--lp-dur-md) var(--lp-ease);
  will-change: transform;
}

/* Glow halo on hover — sits behind the card content */
.lp-lab__pillar-glow {
  position: absolute;
  top: -40%;
  left: 50%;
  width: 140%;
  height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 100%,
    rgba(25, 71, 209, 0.18) 0%,
    rgba(25, 71, 209, 0.06) 40%,
    transparent 75%);
  opacity: 0;
  z-index: -1;
  transition: opacity 580ms var(--lp-ease);
  pointer-events: none;
}

.lp-lab__pillar:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow:
    0 26px 64px -22px rgba(25, 71, 209, 0.32),
    0 4px 12px -4px rgba(11, 31, 77, 0.08);
  border-color: var(--lp-glass-border-strong);
}
.lp-lab__pillar:hover .lp-lab__pillar-glow {
  opacity: 1;
}

/* Animated top border accent */
.lp-lab__pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--lp-grad-royal);
  transform: translateX(-50%);
  transition: width 640ms cubic-bezier(0.32, 0.72, 0, 1);
  border-radius: 0 0 var(--lp-radius-pill) var(--lp-radius-pill);
}
.lp-lab__pillar:hover::before {
  width: 64%;
}

.lp-lab__pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--lp-radius-md);
  background: var(--lp-royal-08);
  color: var(--lp-royal);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  transition: transform 480ms var(--lp-ease), background var(--lp-dur-md) var(--lp-ease);
}
.lp-lab__pillar:hover .lp-lab__pillar-icon {
  transform: rotate(-3deg) scale(1.06);
  background: var(--lp-royal-16);
}

/* KPI block — the big number takes the visual focus */
.lp-lab__pillar-kpi {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
}
.lp-lab__pillar-kpi strong {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 52px);
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--lp-ink) 0%, var(--lp-royal-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.lp-lab__pillar-kpi span {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-silver);
  line-height: 1.3;
  max-width: 14ch;
}

.lp-lab__pillar-title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--lp-ink);
  margin: 4px 0 0;
  letter-spacing: -0.015em;
}
.lp-lab__pillar-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--lp-silver);
  margin: 0;
}

/* (legacy COA mock + side cards removed in v3 — pillars replace them) */


/* ══════════════════════════════════════════════════════════════════════
   S3·7 · SmartEmailCapture — slide-in bottom-right
   ══════════════════════════════════════════════════════════════════════ */
.lp-smart-capture {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--lp-z-overlay);
  width: min(340px, calc(100vw - 40px));
  padding: 18px 18px 16px;
  background: var(--lp-grad-signature);
  color: #FFFFFF;
  border-radius: var(--lp-radius-lg);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 32px 64px -16px rgba(11,31,77,0.55);
  animation: lp-smart-capture-in 480ms var(--lp-ease) both;
}
@media (max-width: 760px) {
  .lp-smart-capture {
    right: 12px;
    left: 12px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    width: auto;
  }
}
@keyframes lp-smart-capture-in {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.lp-smart-capture__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.55);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background var(--lp-dur-sm) var(--lp-ease), color var(--lp-dur-sm) var(--lp-ease);
}
.lp-smart-capture__close:hover {
  background: rgba(255,255,255,0.10);
  color: #FFFFFF;
}
.lp-smart-capture__eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(127,170,255,0.80);
  display: block;
  margin-bottom: 6px;
}
.lp-smart-capture__copy {
  font-size: 13.5px;
  line-height: 1.45;
  margin: 0 0 12px;
  color: rgba(255,255,255,0.88);
}
.lp-smart-capture__form {
  display: flex;
  gap: 6px;
}
.lp-smart-capture__form input {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--lp-radius-pill);
  border: 1px solid rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.14);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  caret-color: #FFFFFF;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.lp-smart-capture__form input::-moz-placeholder { color: rgba(255,255,255,0.68); opacity: 1; }
.lp-smart-capture__form input::placeholder { color: rgba(255,255,255,0.68); opacity: 1; }
.lp-smart-capture__form input:focus-visible {
  border-color: rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.20);
}
/* Autofill (macOS dark-mode) pintaba texto oscuro sobre navy — forzar blanco */
.lp-smart-capture__form input:-webkit-autofill,
.lp-smart-capture__form input:-webkit-autofill:hover,
.lp-smart-capture__form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF;
  -webkit-box-shadow: 0 0 0 1000px #12308F inset;
  -webkit-transition: background-color 99999s ease-out 0s;
  transition: background-color 99999s ease-out 0s;
}
.lp-smart-capture__form button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: #FFFFFF;
  color: var(--lp-royal);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: transform var(--lp-dur-sm) var(--lp-ease);
}
.lp-smart-capture__form button:hover { transform: translate3d(0, -1px, 0); }


/* ══════════════════════════════════════════════════════════════════════
   S3·8 · AccordionFAQ — premium accordion
   ══════════════════════════════════════════════════════════════════════ */
.lp-faq {
  padding: clamp(80px, 12vh, 128px) clamp(20px, 4vw, 48px);
}
.lp-faq__inner { max-width: 860px; margin: 0 auto; }
.lp-faq__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -0.03em;
  color: var(--lp-ink);
  text-align: center;
  margin: 0 0 var(--lp-space-9);
}
.lp-faq__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-faq__item {
  background: var(--lp-glass-strong);
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius-md);
  overflow: hidden;
  transition: border-color var(--lp-dur-sm) var(--lp-ease);
}
.lp-faq__item.is-open { border-color: var(--lp-glass-border-strong); }
.lp-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 22px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: "Inter Tight", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--lp-ink);
  transition: background var(--lp-dur-sm) var(--lp-ease);
}
.lp-faq__q:hover { background: var(--lp-royal-04); }
.lp-faq__q:focus-visible { outline: var(--lp-focus-outline); outline-offset: -2px; border-radius: var(--lp-radius-md); }
.lp-faq__chev {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--lp-royal-08);
  color: var(--lp-royal);
  transition: transform var(--lp-dur-md) var(--lp-ease), background var(--lp-dur-sm) var(--lp-ease);
}
.lp-faq__item.is-open .lp-faq__chev { transform: rotate(180deg); background: var(--lp-royal); color: #FFFFFF; }
.lp-faq__a {
  padding: 0 22px;
  max-height: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lp-silver);
  transition: max-height var(--lp-dur-lg) var(--lp-ease), padding var(--lp-dur-md) var(--lp-ease);
}
.lp-faq__item.is-open .lp-faq__a {
  padding: 0 22px 18px;
  max-height: 400px;
}


/* ══════════════════════════════════════════════════════════════════════
   S3·9 · Iconography consistency — base for icons across the site
   Apply class .lp-icon to any SVG to inherit stroke + size language.
   ══════════════════════════════════════════════════════════════════════ */
.lp-icon {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
  vertical-align: middle;
}
.lp-icon--sm { width: 14px; height: 14px; }
.lp-icon--md { width: 20px; height: 20px; }
.lp-icon--lg { width: 28px; height: 28px; }
.lp-icon--xl { width: 40px; height: 40px; }


/* ══════════════════════════════════════════════════════════════════════
   S3·10 · Final consolidation hooks
   ══════════════════════════════════════════════════════════════════════ */
/* Body offset when sticky mobile cart is visible */
@media (max-width: 760px) {
  body:has(.lp-sticky-cart) {
    padding-bottom: 80px;
  }
}
/* ════════════════════════════════════════════════════════════════════════
   Longeva Peptides — Sprint 4 (brand polish + microexperiences)
   Loaded last. Additive. New classes only — no override of legacy structure.
   ════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   S4·0 · Typography lock — apply consistent display vs body weights
   across new components. Existing pages keep their own setup.
   ══════════════════════════════════════════════════════════════════════ */
.lp-display {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.lp-display em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--lp-royal);
}
.lp-body { font-family: "Inter Tight", sans-serif; font-weight: 400; line-height: 1.6; }
.lp-mono { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.04em; }


/* ══════════════════════════════════════════════════════════════════════
   S4·1 · CookieConsent
   ══════════════════════════════════════════════════════════════════════ */
.lp-cookie {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: var(--lp-z-modal);
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: lp-cookie-in 480ms var(--lp-ease) both;
}
@keyframes lp-cookie-in {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.lp-cookie__inner {
  pointer-events: auto;
  max-width: 760px;
  width: 100%;
  padding: 16px 20px;
  border-radius: var(--lp-radius-lg);
  background: var(--lp-grad-signature);
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 28px 60px -16px rgba(11,31,77,0.55);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.lp-cookie__copy {
  flex: 1 1 320px;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  color: rgba(255,255,255,0.82);
}
.lp-cookie__actions { display: flex; gap: 8px; flex-shrink: 0; }
.lp-cookie__btn {
  padding: 10px 16px;
  border-radius: var(--lp-radius-pill);
  border: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  background: #FFFFFF;
  color: var(--lp-royal);
  cursor: pointer;
  transition: transform var(--lp-dur-sm) var(--lp-ease), box-shadow var(--lp-dur-sm) var(--lp-ease);
}
.lp-cookie__btn:hover { transform: translate3d(0, -1px, 0); box-shadow: 0 12px 24px -8px rgba(255,255,255,0.32); }
.lp-cookie__btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.20);
}
.lp-cookie__btn--ghost:hover { background: rgba(255,255,255,0.10); box-shadow: none; }


/* ══════════════════════════════════════════════════════════════════════
   S4·2 · ToastHost — queue
   ══════════════════════════════════════════════════════════════════════ */
.lp-toasts {
  position: fixed;
  top: 72px;
  right: 20px;
  z-index: var(--lp-z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
@media (max-width: 640px) {
  .lp-toasts { left: 12px; right: 12px; top: 60px; }
}
.lp-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--lp-radius-pill);
  background: var(--lp-grad-signature);
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 13.5px;
  box-shadow: 0 20px 40px -12px rgba(11,31,77,0.45);
  min-width: 220px;
  max-width: 360px;
  animation: lp-toast-in 280ms var(--lp-ease) both;
}
@keyframes lp-toast-in {
  from { opacity: 0; transform: translate3d(20px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.lp-toast__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--lp-success);
  box-shadow: 0 0 0 3px rgba(31, 160, 99, 0.32);
}
.lp-toast--info .lp-toast__dot { background: #8FB1FF; box-shadow: 0 0 0 3px rgba(143, 177, 255, 0.32); }
.lp-toast--error .lp-toast__dot { background: var(--lp-danger); box-shadow: 0 0 0 3px rgba(194, 52, 46, 0.32); }
.lp-toast__msg { flex: 1; line-height: 1.4; }


/* ══════════════════════════════════════════════════════════════════════
   S4·3 · PageTransitionVeil — sweep on route change
   ══════════════════════════════════════════════════════════════════════ */
.lp-page-veil {
  position: fixed;
  inset: 0;
  z-index: var(--lp-z-overlay);
  background: linear-gradient(120deg,
    transparent 0%,
    transparent 35%,
    rgba(25, 71, 209, 0.10) 50%,
    transparent 65%,
    transparent 100%);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
  transition: opacity var(--lp-dur-md) var(--lp-ease);
}
.lp-page-veil.is-active {
  opacity: 1;
  animation: lp-page-veil-sweep 380ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes lp-page-veil-sweep {
  0%   { opacity: 0; transform: translate3d(-100%, 0, 0); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(100%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-page-veil.is-active { animation: none; opacity: 0; }
}


/* ══════════════════════════════════════════════════════════════════════
   S4·4 · BackToTop
   ══════════════════════════════════════════════════════════════════════ */
.lp-back-to-top {
  position: fixed;
  right: 20px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: var(--lp-z-sticky);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--lp-glass-border);
  background: var(--lp-glass-strong);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: var(--lp-royal);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--lp-shadow-md);
  transition: transform var(--lp-dur-sm) var(--lp-ease), background var(--lp-dur-sm) var(--lp-ease);
  animation: lp-bttop-in 320ms var(--lp-ease) both;
}
@keyframes lp-bttop-in {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.lp-back-to-top:hover {
  transform: translate3d(0, -2px, 0);
  background: #FFFFFF;
}
.lp-back-to-top:focus-visible {
  outline: var(--lp-focus-outline);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .lp-back-to-top { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}


/* ══════════════════════════════════════════════════════════════════════
   S4·5 · CopyChip
   ══════════════════════════════════════════════════════════════════════ */
.lp-copy-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 12px;
  border-radius: var(--lp-radius-pill);
  border: 1px solid var(--lp-glass-border);
  background: var(--lp-glass-strong);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--lp-dur-sm) var(--lp-ease), background var(--lp-dur-sm) var(--lp-ease);
}
.lp-copy-chip:hover { border-color: var(--lp-glass-border-strong); background: #FFFFFF; }
.lp-copy-chip:focus-visible { outline: var(--lp-focus-outline); outline-offset: 2px; }
.lp-copy-chip__value {
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  color: var(--lp-ink);
  letter-spacing: 0.04em;
}
.lp-copy-chip__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--lp-radius-pill);
  background: var(--lp-royal-08);
  color: var(--lp-royal);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--lp-dur-sm) var(--lp-ease);
}
.lp-copy-chip.is-copied .lp-copy-chip__action {
  background: var(--lp-success-soft);
  color: var(--lp-success);
}


/* ══════════════════════════════════════════════════════════════════════
   S4·6 · KbdHint
   ══════════════════════════════════════════════════════════════════════ */
.lp-kbd {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: "JetBrains Mono", monospace;
}
.lp-kbd kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 10.5px;
  font-family: inherit;
  color: inherit;
}


/* ══════════════════════════════════════════════════════════════════════
   S4·7 · ScrollProgress
   ══════════════════════════════════════════════════════════════════════ */
.lp-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: var(--lp-z-tooltip);
  pointer-events: none;
  background: transparent;
}
.lp-scroll-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--lp-royal) 0%, #8FB1FF 100%);
  transform-origin: 0 0;
  transform: scaleX(0);
  transition: transform 60ms linear;
  box-shadow: 0 0 12px rgba(25, 71, 209, 0.30);
}
@media (prefers-reduced-motion: reduce) {
  .lp-scroll-progress span { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   S4·8 · EmptyState
   ══════════════════════════════════════════════════════════════════════ */
.lp-empty {
  text-align: center;
  padding: var(--lp-space-9) var(--lp-space-5);
  max-width: 480px;
  margin: 0 auto;
}
.lp-empty__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.85), transparent 60%),
    linear-gradient(180deg, var(--lp-ice) 0%, var(--lp-ice-soft) 100%);
  border: 1px solid var(--lp-glass-border);
  display: grid;
  place-items: center;
  margin: 0 auto var(--lp-space-4);
  font-size: 26px;
  box-shadow: 0 18px 40px -16px rgba(25, 71, 209, 0.32);
}
.lp-empty__title {
  font-family: "Inter Tight", sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--lp-ink);
  margin: 0 0 6px;
}
.lp-empty__body {
  font-size: 14px;
  color: var(--lp-silver);
  line-height: 1.55;
  margin: 0 0 var(--lp-space-5);
}
.lp-empty__cta a, .lp-empty__cta button {
  display: inline-block;
  padding: 11px 22px;
  border-radius: var(--lp-radius-pill);
  background: var(--lp-grad-royal);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform var(--lp-dur-sm) var(--lp-ease), box-shadow var(--lp-dur-sm) var(--lp-ease);
}
.lp-empty__cta a:hover, .lp-empty__cta button:hover {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 14px 30px -8px rgba(25, 71, 209, 0.30);
}


/* ══════════════════════════════════════════════════════════════════════
   S4·9 · BadgeCertified
   ══════════════════════════════════════════════════════════════════════ */
.lp-badge-cert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--lp-radius-pill);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.lp-badge-cert--verified { background: var(--lp-success-soft); color: var(--lp-success); border: 1px solid color-mix(in srgb, var(--lp-success) 32%, transparent); }
.lp-badge-cert--research { background: var(--lp-royal-08); color: var(--lp-royal); border: 1px solid var(--lp-royal-16); }
.lp-badge-cert--limited  { background: var(--lp-warning-soft); color: var(--lp-warning); border: 1px solid color-mix(in srgb, var(--lp-warning) 32%, transparent); }
.lp-badge-cert__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}


/* ══════════════════════════════════════════════════════════════════════
   S4·10 · BrandFooterMicro
   ══════════════════════════════════════════════════════════════════════ */
.lp-brand-micro {
  background: linear-gradient(180deg, #050811 0%, #03060E 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 20px clamp(20px, 4vw, 48px);
}
.lp-brand-micro__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-space-5);
  flex-wrap: wrap;
}
.lp-brand-micro__mark {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: #FFFFFF;
}
.lp-brand-micro__infinity {
  font-size: 18px;
  color: var(--lp-royal);
  font-weight: 700;
  position: relative;
  top: 1px;
}
.lp-brand-micro__mark em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: #FFFFFF;
}
.lp-brand-micro__sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.62);
  text-transform: uppercase;
}
.lp-brand-micro__tag {
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}
.lp-brand-micro__year {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.40);
  text-transform: uppercase;
}


/* ══════════════════════════════════════════════════════════════════════
   S4·BONUS · Print stylesheet completo
   Allow users to print COA / order recap clean — strip chrome, keep content.
   ══════════════════════════════════════════════════════════════════════ */
@media print {
  body { background: #FFFFFF !important; color: #000 !important; }
  .incentive-strip, .nav-pill, .home-hero, .trust-strip,
  .lp-cart-root, .lp-blog__cta, .lp-ws__signup,
  .v2-compliance, footer, .lp-cookie, .lp-toasts,
  .lp-back-to-top, .lp-page-veil, .lp-scroll-progress,
  .lp-sticky-cart, .lp-smart-capture, .lp-skip,
  video, .hero-avatar-stage, .ProteusTweaks, .lp-wa-float,
  .whatsapp-float, .ActivityTicker {
    display: none !important;
  }
  .lp-lab__coa, .lp-checkout__summary, .lp-blog__card {
    page-break-inside: avoid;
  }
  a[href^="#"]:after { content: ""; }
  a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
}
/* ════════════════════════════════════════════════════════════════════════
   Sprint 5 — Audit fixes
   1. COA archive page (replaces dead /#/coa route)
   2. Contrast safety net (text legibility on every surface)
   3. Transition cleanup (no more `transition: all` on hot paths)
   4. Performance hints (content-visibility, fetchpriority)
   5. Accessibility fallbacks
   ════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   S5·2 · COA ARCHIVE PAGE
   ══════════════════════════════════════════════════════════════════════ */
.lp-coa {
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(25,71,209,0.05) 0%, transparent 70%),
    linear-gradient(180deg, var(--lp-pearl) 0%, var(--lp-mist) 100%);
  min-height: 100vh;
  padding: clamp(96px, 14vh, 144px) clamp(20px, 4vw, 48px) clamp(64px, 8vh, 96px);
}
.lp-coa__inner { max-width: 1080px; margin: 0 auto; }
.lp-coa__head { margin-bottom: var(--lp-space-9); }
.lp-coa__crumbs {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--lp-silver);
  margin-bottom: var(--lp-space-5);
  text-transform: uppercase;
}
.lp-coa__crumbs a {
  color: var(--lp-silver);
  text-decoration: none;
  transition: color var(--lp-dur-sm) var(--lp-ease);
}
.lp-coa__crumbs a:hover { color: var(--lp-royal); }
.lp-coa__eyebrow {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lp-royal);
  margin-bottom: 14px;
}
.lp-coa__title {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 56px);
  letter-spacing: -0.035em;
  color: var(--lp-ink);
  line-height: 1.05;
  margin: 0 0 var(--lp-space-4);
}
.lp-coa__title em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: var(--lp-royal);
  font-weight: 500;
}
.lp-coa__sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--lp-silver);
  max-width: 60ch;
  margin: 0;
}

.lp-coa__h2 {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.025em;
  color: var(--lp-ink);
  margin: 0 0 var(--lp-space-5);
}

.lp-coa__legend {
  background: var(--lp-glass-strong);
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius-lg);
  padding: var(--lp-space-7);
  margin-bottom: var(--lp-space-7);
}
.lp-coa__legend-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lp-space-5);
}
@media (max-width: 720px) { .lp-coa__legend-grid { grid-template-columns: repeat(2, 1fr); } }
.lp-coa__legend-grid article strong {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.10em;
  color: var(--lp-royal);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.lp-coa__legend-grid article p {
  font-size: 13.5px;
  color: var(--lp-silver);
  line-height: 1.5;
  margin: 0;
}

.lp-coa__list { margin-bottom: var(--lp-space-7); }
.lp-coa__rows {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--lp-glass-strong);
  border: 1px solid var(--lp-glass-border);
  border-radius: var(--lp-radius-lg);
  overflow: hidden;
}
.lp-coa__row {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 0.6fr 0.8fr auto;
  gap: var(--lp-space-4);
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--lp-glass-border-soft);
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
}
.lp-coa__row:last-child { border-bottom: 0; }
@media (max-width: 720px) {
  .lp-coa__row { grid-template-columns: 1fr 1fr; gap: 6px; padding: 16px; }
}
.lp-coa__row-name {
  color: var(--lp-ink);
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: color var(--lp-dur-sm) var(--lp-ease);
}
.lp-coa__row-name:hover { color: var(--lp-royal); }
.lp-coa__row-lot { color: var(--lp-silver); letter-spacing: 0.04em; }
.lp-coa__row-purity {
  color: var(--lp-success);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.lp-coa__row-date { color: var(--lp-silver); }
.lp-coa__row-dl {
  background: var(--lp-royal-08);
  color: var(--lp-royal);
  border: 0;
  padding: 8px 14px;
  border-radius: var(--lp-radius-pill);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--lp-dur-sm) var(--lp-ease), transform var(--lp-dur-sm) var(--lp-ease);
}
.lp-coa__row-dl:hover {
  background: var(--lp-royal);
  color: #FFFFFF;
  transform: translate3d(0, -1px, 0);
}
.lp-coa__foot {
  font-size: 13px;
  color: var(--lp-silver);
  line-height: 1.6;
  max-width: 60ch;
}
.lp-coa__foot strong { color: var(--lp-ink); }


/* ══════════════════════════════════════════════════════════════════════
   S5·3 · CONTRAST SAFETY NET
   Defensive: when a paragraph/heading lives directly inside surfaces we
   know are light, force ink color. Doesn't override explicit text-white
   utilities (those are intentional on dark backgrounds).
   ══════════════════════════════════════════════════════════════════════ */
.lp-coa p,
.lp-blog p,
.lp-checkout p,
.lp-ws p:not([class*="--light"]),
.lp-faq p,
.lp-standard p,
.lp-lab p,
.lp-cmp p,
.lp-rab p {
  color: inherit;
}
/* When the page wraps in a dark hero (signature gradient), allow
   white on dark; otherwise allow ink on light. */
body.lp-dark-hero .lp-coa,
body.lp-dark-hero .lp-blog,
body.lp-dark-hero .lp-checkout {
  /* These wrappers force ink on light by default; never apply here. */
}


/* ══════════════════════════════════════════════════════════════════════
   S5·5 · TRANSITION HYGIENE
   Replace `transition: all` on hot-path elements with explicit lists.
   This doesn't fix the legacy CSS — it lets the page-level reset
   degrade gracefully on selectors that ARE NOT user-interaction.
   ══════════════════════════════════════════════════════════════════════ */

/* Disable transition: all for static decorative elements during load
   (prevents layout-shift flashes when the page mounts). */
.preload-no-transition * {
  transition: none !important;
  animation: none !important;
}


/* ══════════════════════════════════════════════════════════════════════
   S5·8 · PERFORMANCE
   content-visibility on long sections to defer below-the-fold rendering
   ══════════════════════════════════════════════════════════════════════ */
.lp-faq,
.lp-lab,
.lp-cmp,
.lp-rab,
.lp-coa__list {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}


/* ══════════════════════════════════════════════════════════════════════
   S5·9 · ACCESSIBILITY
   Force visible focus rings on EVERY interactive descendant of these
   surfaces, even if a legacy class stripped outline.
   ══════════════════════════════════════════════════════════════════════ */
.lp-coa *:focus-visible,
.lp-blog *:focus-visible,
.lp-checkout *:focus-visible,
.lp-ws *:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* High-contrast preference */
@media (prefers-contrast: more) {
  .lp-coa__row-lot,
  .lp-coa__row-date,
  .lp-coa__foot,
  .lp-coa__sub { color: var(--lp-slate); }
}

/* Improve scroll target offset (anchored links) */
:target {
  scroll-margin-top: 96px;
}


/* ══════════════════════════════════════════════════════════════════════
   S5·10 · LEGACY-COMPONENT MARKERS
   Helpers to flag obsolete elements during dev (no production effect)
   ══════════════════════════════════════════════════════════════════════ */
[data-legacy="true"] { /* visible only when devtools inspect */ }
/* ════════════════════════════════════════════════════════════════════════
   Longeva Peptides — Sprint 6: Premium polish & harmonic motion
   ────────────────────────────────────────────────────────────────────────
   Goal: elevate to "best-in-class premium pharma" feel.
   • No conflicts with previous sprints — additive only.
   • No transition: all. Only transform / opacity / filter.
   • All durations + easings use --lp-* tokens.
   • Respects prefers-reduced-motion (tokens already set durations to 1ms).
   ════════════════════════════════════════════════════════════════════════ */

/* ── 6·1 PREMIUM CTA — magnetic hover + crystalline sheen ─────────────── */
.lp-cta-premium {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--lp-dur-md) var(--lp-ease-spring),
    box-shadow var(--lp-dur-md) var(--lp-ease),
    background-position var(--lp-dur-cinema) var(--lp-ease);
  background-size: 200% 200%;
  background-position: 0% 50%;
  will-change: transform, background-position;
}
.lp-cta-premium::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.0) 0%,
    rgba(255,255,255,0.18) 48%,
    rgba(255,255,255,0.0) 52%,
    rgba(255,255,255,0.0) 100%);
  transform: translate3d(-100%, 0, 0);
  opacity: 0;
  transition:
    transform 900ms var(--lp-ease-cinema),
    opacity var(--lp-dur-sm) var(--lp-ease);
  pointer-events: none;
  z-index: 0;
}
.lp-cta-premium:hover {
  transform: translate3d(0, -2px, 0) scale(1.012);
  background-position: 100% 50%;
  box-shadow:
    0 24px 60px -12px rgba(25, 71, 209, 0.28),
    0 6px 12px -6px rgba(11, 31, 77, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.lp-cta-premium:hover::before {
  transform: translate3d(120%, 0, 0);
  opacity: 1;
}
.lp-cta-premium:active {
  transform: translate3d(0, 0, 0) scale(0.985);
  transition-duration: var(--lp-dur-instant);
}
.lp-cta-premium > * { position: relative; z-index: 1; }

/* ── 6·2 GLASS CARD — refined depth with luminous edge ────────────────── */
.lp-glass-card {
  position: relative;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: linear-gradient(180deg,
    rgba(255,255,255,0.78) 0%,
    rgba(255,255,255,0.62) 100%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 0 0 1px var(--lp-glass-border) inset,
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 24px 48px -16px rgba(25, 71, 209, 0.18),
    0 4px 12px -4px rgba(11, 31, 77, 0.08);
  transition:
    transform var(--lp-dur-lg) var(--lp-ease),
    box-shadow var(--lp-dur-lg) var(--lp-ease),
    border-color var(--lp-dur-md) var(--lp-ease);
  will-change: transform;
}
.lp-glass-card:hover {
  transform: translate3d(0, -4px, 0);
  border-color: var(--lp-glass-border-strong);
  box-shadow:
    0 0 0 1px var(--lp-glass-border-strong) inset,
    0 1px 0 rgba(255,255,255,1) inset,
    0 36px 72px -16px rgba(25, 71, 209, 0.28),
    0 8px 20px -6px rgba(11, 31, 77, 0.12);
}

/* ── 6·3 PRODUCT CARD — premium reveal with crystalline reflection ────── */
.lp-product-card-premium {
  position: relative;
  overflow: hidden;
  border-radius: var(--lp-radius-lg);
  transform: translate3d(0, 0, 0);
  transition:
    transform 540ms var(--lp-ease-cinema),
    box-shadow 540ms var(--lp-ease-cinema);
  will-change: transform;
}
.lp-product-card-premium::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 60%;
  height: 100%;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255,255,255,0.0) 35%,
    rgba(255,255,255,0.28) 50%,
    rgba(255,255,255,0.0) 65%,
    transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
  transition:
    left 900ms var(--lp-ease-cinema),
    opacity 360ms var(--lp-ease);
  z-index: 2;
}
.lp-product-card-premium:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow:
    0 32px 64px -12px rgba(25, 71, 209, 0.22),
    0 8px 16px -8px rgba(11, 31, 77, 0.12);
}
.lp-product-card-premium:hover::after {
  left: 130%;
  opacity: 1;
}
.lp-product-card-premium img {
  transition: transform 720ms var(--lp-ease-cinema), filter var(--lp-dur-lg) var(--lp-ease);
}
.lp-product-card-premium:hover img {
  transform: scale(1.06);
  filter: drop-shadow(0 18px 36px rgba(25, 71, 209, 0.25));
}

/* ── 6·4 TEXT GRADIENT — premium royal sweep ─────────────────────────── */
.lp-text-gradient-royal {
  background: linear-gradient(135deg,
    var(--lp-navy) 0%,
    var(--lp-royal) 45%,
    #3D6DE8 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: lp-text-sweep 6s ease-in-out infinite;
}
@keyframes lp-text-sweep {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── 6·5 SKELETON LOADER — premium royal-tinted pulse ────────────────── */
.lp-skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg,
    var(--lp-mist) 0%,
    var(--lp-ice) 50%,
    var(--lp-mist) 100%);
  background-size: 200% 100%;
  animation: lp-skeleton-shimmer 1.6s var(--lp-ease-in-out) infinite;
  border-radius: var(--lp-radius-sm);
}
@keyframes lp-skeleton-shimmer {
  0%   { background-position: 200% 0%; }
  100% { background-position: -200% 0%; }
}

/* ── 6·6 BADGE PULSE — for "premium" / "new" / "stock low" indicators ── */
.lp-badge-pulse {
  position: relative;
}
.lp-badge-pulse::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--lp-royal-32);
  opacity: 0;
  animation: lp-badge-halo 2.4s var(--lp-ease-out) infinite;
  z-index: -1;
}
@keyframes lp-badge-halo {
  0%   { transform: scale(1.0); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ── 6·7 SCROLL-DRIVEN reveal — stagger children ─────────────────────── */
.lp-stagger-reveal > * {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 540ms var(--lp-ease-out),
    transform 540ms var(--lp-ease-out);
}
.lp-stagger-reveal.is-in > *:nth-child(1) { transition-delay:   0ms; opacity: 1; transform: none; }
.lp-stagger-reveal.is-in > *:nth-child(2) { transition-delay:  80ms; opacity: 1; transform: none; }
.lp-stagger-reveal.is-in > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: none; }
.lp-stagger-reveal.is-in > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; }
.lp-stagger-reveal.is-in > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: none; }
.lp-stagger-reveal.is-in > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: none; }
.lp-stagger-reveal.is-in > *:nth-child(n+7) { transition-delay: 480ms; opacity: 1; transform: none; }

/* ── 6·8 PREMIUM DROPDOWN — refined entrance (scale + lift) ──────────── */
.lp-dropdown-premium {
  opacity: 0;
  transform: translate3d(0, -8px, 0) scale(0.98);
  transform-origin: top center;
  pointer-events: none;
  transition:
    opacity 240ms var(--lp-ease-out),
    transform 280ms var(--lp-ease-spring);
  will-change: transform, opacity;
}
.lp-dropdown-premium.is-open {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}

/* ── 6·9 ORB FLOAT — for ambient backgrounds (uses existing .site-bg-orb)
       Adds soft drift instead of static. Override only on premium pages. */
.site-bg-orb {
  animation-duration: 18s !important;
}
.lp-bg-premium .site-bg-orb {
  animation: lp-orb-drift 24s ease-in-out infinite;
}
@keyframes lp-orb-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  25%      { transform: translate3d(2vw, -1.5vh, 0) scale(1.04); }
  50%      { transform: translate3d(-1vw, -2vh, 0) scale(0.98); }
  75%      { transform: translate3d(1.5vw, 1vh, 0) scale(1.02); }
}

/* ── 6·10 SCROLL SNAP refinement for HeroCarousel ─────────────────────── */
.lp-scroll-snap-x {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.lp-scroll-snap-x > * {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* ── 6·11 PREMIUM TOOLTIP — for ingredient/peptide names ──────────────── */
.lp-tooltip-premium {
  position: relative;
  cursor: help;
  -webkit-text-decoration: underline dotted rgba(25, 71, 209, 0.35);
          text-decoration: underline dotted rgba(25, 71, 209, 0.35);
  text-underline-offset: 3px;
  transition: color var(--lp-dur-sm) var(--lp-ease);
}
.lp-tooltip-premium:hover {
  color: var(--lp-royal);
}
.lp-tooltip-premium[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate3d(-50%, 6px, 0);
  background: var(--lp-ink);
  color: var(--lp-pearl);
  padding: 8px 12px;
  border-radius: var(--lp-radius-sm);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 12px 28px -8px rgba(11, 31, 77, 0.35);
  transition:
    opacity var(--lp-dur-md) var(--lp-ease),
    transform var(--lp-dur-md) var(--lp-ease-spring);
  z-index: var(--lp-z-tooltip);
}
.lp-tooltip-premium:hover::after,
.lp-tooltip-premium:focus-visible::after {
  opacity: 1;
  transform: translate3d(-50%, -4px, 0);
}

/* ── 6·12 CHIP HOVER refinement (catalog filters, badges) ─────────────── */
.lp-chip-premium {
  position: relative;
  transition:
    background-color var(--lp-dur-sm) var(--lp-ease),
    color var(--lp-dur-sm) var(--lp-ease),
    border-color var(--lp-dur-sm) var(--lp-ease),
    box-shadow var(--lp-dur-sm) var(--lp-ease),
    transform var(--lp-dur-sm) var(--lp-ease-spring);
}
.lp-chip-premium:hover {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 8px 16px -8px rgba(25, 71, 209, 0.25);
}
.lp-chip-premium[data-active="true"] {
  background: var(--lp-royal);
  color: white;
  border-color: var(--lp-royal-deep);
  box-shadow:
    0 6px 14px -4px rgba(25, 71, 209, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

/* ── 6·13 NUMBER COUNTER — for stats/proof points ─────────────────────── */
.lp-counter-premium {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── 6·14 SMOOTH SCROLL — global enhancement ─────────────────────────── */
html {
  scroll-behavior: smooth;
}
@supports (scroll-behavior: smooth) {
  html { scroll-padding-top: 88px; }
}

/* ── 6·14b PREMIUM SCROLLBAR — thin, cobalt-tinted, integrada ─────────── */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(25, 71, 209, 0.30) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(25, 71, 209, 0.26);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(25, 71, 209, 0.45);
}

/* ── 6·15 PREMIUM SECTION SPACING harmonizer ──────────────────────────── */
.lp-section-rhythm > section + section,
.lp-section-rhythm > div + section,
.lp-section-rhythm > section + div {
  margin-top: clamp(56px, 8vh, 112px);
}

/* ── 6·16 SUBTLE PARALLAX (CSS-only — uses scroll-driven if supported) ─ */
@supports (animation-timeline: scroll()) {
  .lp-parallax-slow {
    animation: lp-parallax-y linear;
    animation-timeline: scroll(root block);
    animation-range: entry 0% exit 100%;
  }
}
@keyframes lp-parallax-y {
  from { transform: translate3d(0, -4vh, 0); }
  to   { transform: translate3d(0,  4vh, 0); }
}

/* ── 6·17 PREMIUM IMAGE LOAD — blur-up reveal ─────────────────────────── */
.lp-img-blur-up {
  filter: blur(12px);
  transform: scale(1.05);
  opacity: 0;
  transition:
    filter 540ms var(--lp-ease-out),
    transform 540ms var(--lp-ease-out),
    opacity 360ms var(--lp-ease);
}
.lp-img-blur-up.is-loaded {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
}

/* ── 6·18 FOCUS RING refinement — animated ───────────────────────────── */
.lp-focus-ring-animated:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--lp-pearl),
    0 0 0 4px var(--lp-royal);
  animation: lp-focus-pulse 1.6s ease-in-out infinite;
}
@keyframes lp-focus-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--lp-pearl), 0 0 0 4px var(--lp-royal); }
  50%      { box-shadow: 0 0 0 2px var(--lp-pearl), 0 0 0 6px var(--lp-royal-48); }
}

/* ── 6·19 PRICING — premium tabular display ──────────────────────────── */
.lp-price-premium {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
  letter-spacing: -0.012em;
}
.lp-price-premium .lp-currency {
  font-size: 0.7em;
  font-weight: 500;
  opacity: 0.65;
  margin-right: 0.1em;
}

/* ── 6·20 HARMONIC GLOW — for trust badges (COA, ISO, EU) ─────────────── */
.lp-trust-glow {
  position: relative;
  isolation: isolate;
}
.lp-trust-glow::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(circle at center,
    rgba(25,71,209,0.12) 0%,
    transparent 70%);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--lp-dur-md) var(--lp-ease);
}
.lp-trust-glow:hover::before {
  opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════════
   End sprint-6-premium.css
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   CALCULADORA — superficie oscura (fix legibilidad, 2026-07-05)
   Las dos cards de la calculadora (#/calculator) usan estilos INLINE de
   tema oscuro: texto blanco, bordes rgba(255,255,255,x), acentos
   rgb(var(--cyan)). Bajo la paleta cobalt (clara) la card era
   rgba(255,255,255,0.55) → todo el contenido quedaba invisible.
   Solución mínima: devolverles superficie oscura y redefinir --cyan
   localmente a un azul claro legible sobre navy (mismo hue de marca).
   ════════════════════════════════════════════════════════════════════════ */
/* Nota especificidad: main.css tiene `html[data-palette="cobalt"] .stack-card`
   con !important (0,2,1) que gana a `.calc-page .stack-card` (0,2,0).
   Se prefija con html[data-palette] para ganar en TODAS las paletas. */
html[data-palette="cobalt"] .calc-page .stack-card,
html[data-palette="paper"] .calc-page .stack-card,
html[data-palette="ivory"] .calc-page .stack-card,
.calc-page .stack-card {
  background: linear-gradient(165deg, #0D1526 0%, #101C36 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #FFFFFF !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  --cyan: 121, 161, 255; /* azul claro para acentos inline sobre navy */
}
html[data-palette="cobalt"] .calc-page .stack-card:hover,
.calc-page .stack-card:hover {
  border-color: rgba(121, 161, 255, 0.35) !important;
  box-shadow: 0 12px 50px -16px rgba(25, 71, 209, 0.35) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   PDP — CTA directo de WhatsApp bajo "Añadir a cotización" (2026-07-05)
   Atajo de conversión para compradores que prefieren WhatsApp sin carrito.
   ════════════════════════════════════════════════════════════════════════ */
.pdp-wa-direct {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.pdp-wa-direct svg { color: #25d366; flex-shrink: 0; }
.pdp-wa-direct:hover {
  color: #fff;
  border-color: rgba(37, 211, 102, 0.45);
  background: rgba(37, 211, 102, 0.06);
}
/* Paletas claras: texto ink */
html[data-palette="cobalt"] .pdp-wa-direct,
html[data-palette="paper"] .pdp-wa-direct,
html[data-palette="ivory"] .pdp-wa-direct {
  color: rgba(10, 10, 10, 0.62);
  border-color: rgba(10, 10, 10, 0.16);
}
html[data-palette="cobalt"] .pdp-wa-direct:hover,
html[data-palette="paper"] .pdp-wa-direct:hover,
html[data-palette="ivory"] .pdp-wa-direct:hover {
  color: var(--ink, #0A0A0A);
  border-color: rgba(37, 211, 102, 0.55);
  background: rgba(37, 211, 102, 0.08);
}

/* ════════════════════════════════════════════════════════════════════════
   LOTE 10 — Contraste de intros de sección en home (paletas claras)
   Los párrafos intro de #catalog y #stacks usan text-white/55, que el
   remap cobalt deja en var(--muted) #6B6B6B: casi invisible sobre el
   fondo swirl claro. El id en el selector gana a cualquier remap global.
   ════════════════════════════════════════════════════════════════════════ */
html[data-palette="cobalt"] #catalog .max-w-sm.text-white\/55,
html[data-palette="paper"]  #catalog .max-w-sm.text-white\/55,
html[data-palette="ivory"]  #catalog .max-w-sm.text-white\/55,
html[data-palette="cobalt"] #stacks .max-w-md.text-white\/55,
html[data-palette="paper"]  #stacks .max-w-md.text-white\/55,
html[data-palette="ivory"]  #stacks .max-w-md.text-white\/55 {
  color: rgba(10, 10, 10, 0.70) !important;
}

/* Nota de descuentos por volumen: opacity 0.60 sobre #6B6B6B la dejaba
   ilegible. Color pleno con opacidad en el propio canal. */
html[data-palette="cobalt"] #catalog .catalog-bulk-note,
html[data-palette="paper"]  #catalog .catalog-bulk-note,
html[data-palette="ivory"]  #catalog .catalog-bulk-note {
  opacity: 1;
  color: rgba(10, 10, 10, 0.58);
  border-top-color: rgba(10, 10, 10, 0.10);
}

/* ════════════════════════════════════════════════════════════════════════
   LOTE 11 — Chatbot WhatsApp on-site (.lpchat)
   Launcher = .wa-float (ahora <button>, mismo look). Panel de chat guiado
   con handoff a wa.me. Brand: cobalt único, Inter, mono para legal.
   z-index: panel 96 (sobre ticker 95), launcher mantiene 55.
   ════════════════════════════════════════════════════════════════════════ */
button.wa-float { border: 0; cursor: pointer; padding: 0; }
.wa-float.is-open { background: #0F2E8A; }

/* Nudge bubble junto al launcher */
.lpchat-nudge {
  position: fixed;
  bottom: 36px;
  right: 92px;
  z-index: 55;
  background: #FFFFFF;
  color: #0A0A0A;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  padding: 10px 16px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(10, 10, 10, 0.12);
  cursor: pointer;
  animation: lpchat-nudge-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lpchat-nudge-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* Panel */
.lpchat {
  position: fixed;
  bottom: 94px;
  right: 24px;
  z-index: 96;
  width: 372px;
  max-width: calc(100vw - 32px);
  max-height: min(560px, calc(100dvh - 120px));
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(10, 10, 10, 0.18), 0 4px 16px rgba(25, 71, 209, 0.10);
  overflow: hidden;
  font-family: 'Inter Tight', sans-serif;
  animation: lpchat-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lpchat-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Header */
.lpchat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #2E5BE0 0%, #1947D1 55%, #1436A9 100%);
  color: #FFFFFF;
  flex-shrink: 0;
}
.lpchat-head-ico {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lpchat-head-txt { min-width: 0; flex: 1; }
.lpchat-head-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.lpchat-head-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; opacity: 0.85; margin-top: 1px;
}
.lpchat-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.25);
}
.lpchat-close {
  border: 0; background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 180ms ease;
}
.lpchat-close:hover { background: rgba(255, 255, 255, 0.26); }

/* Body / mensajes */
.lpchat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 10px;
  background: #FAFAFC;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 220px;
}
.lpchat-msg { display: flex; }
.lpchat-msg.is-bot  { justify-content: flex-start; }
.lpchat-msg.is-user { justify-content: flex-end; }
.lpchat-bubble {
  max-width: 86%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  animation: lpchat-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lpchat-msg.is-bot .lpchat-bubble {
  background: #FFFFFF;
  color: #2C2C2C;
  border: 1px solid #E5E7EB;
  border-bottom-left-radius: 5px;
}
.lpchat-msg.is-user .lpchat-bubble {
  background: #1947D1;
  color: #FFFFFF;
  border-bottom-right-radius: 5px;
}

/* Mini-lista de productos dentro de burbuja */
.lpchat-products {
  margin-top: 10px;
  border-top: 1px solid #E5E7EB;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lpchat-product {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
}
.lpchat-product-name { font-weight: 600; color: #0A0A0A; flex: 1; min-width: 0; }
.lpchat-product-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #6B6B6B;
  letter-spacing: 0.04em;
}
.lpchat-product-price { font-weight: 600; color: #1947D1; }

/* Typing indicator */
.lpchat-typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.lpchat-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #9CA3AF;
  animation: lpchat-blink 1.1s infinite ease-in-out;
}
.lpchat-typing span:nth-child(2) { animation-delay: 0.15s; }
.lpchat-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes lpchat-blink {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* Chips (quick replies) */
.lpchat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 4px 2px 6px;
}
.lpchat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(25, 71, 209, 0.35);
  background: #FFFFFF;
  color: #1947D1;
  border-radius: 999px;
  padding: 7px 13px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  animation: lpchat-in 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lpchat-chip:hover {
  background: #E8EDFB;
  border-color: #1947D1;
  transform: translateY(-1px);
}
.lpchat-chip.is-wa {
  background: #1947D1;
  border-color: #1947D1;
  color: #FFFFFF;
}
.lpchat-chip.is-wa:hover { background: #0F2E8A; border-color: #0F2E8A; }

/* ── Peptide knowledge card (Ciclo 4) ─────────────────────────────── */
/* Bot messages can now stack: intro bubble + card(s) + outro bubble */
.lpchat-msg.is-bot {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.lpchat-card {
  width: 92%;
  max-width: 340px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-left: 3px solid #1947D1;
  border-radius: 14px;
  border-bottom-left-radius: 5px;
  padding: 13px 14px 12px;
  animation: lpchat-in 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lpchat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.lpchat-card-name {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  color: #0A0A0A;
  min-width: 0;
}
.lpchat-ev {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.lpchat-ev-clinical    { background: #1947D1; color: #FFFFFF; }
.lpchat-ev-mixed       { background: #E8EDFB; color: #1947D1; border: 1px solid rgba(25,71,209,0.25); }
.lpchat-ev-preclinical { background: #F1F2F4; color: #6B6B6B; border: 1px solid #E5E7EB; }
.lpchat-ev-reagent     { background: #E6FAFD; color: #0E7490; border: 1px solid #A5E9F2; }
.lpchat-card-tag {
  font-size: 12.5px;
  line-height: 1.45;
  color: #2C2C2C;
  font-style: italic;
  margin-bottom: 9px;
}
.lpchat-card-sec { margin-bottom: 9px; }
.lpchat-card-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1947D1;
  margin-bottom: 3px;
}
.lpchat-card-txt {
  font-size: 12.5px;
  line-height: 1.5;
  color: #2C2C2C;
}
.lpchat-card-studies {
  margin: 0;
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lpchat-card-studies li {
  font-size: 11.5px;
  line-height: 1.45;
  color: #2C2C2C;
}
.lpchat-card-studies li::marker { color: #1947D1; }
.lpchat-card-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.lpchat-area {
  font-size: 10.5px;
  font-weight: 600;
  color: #1947D1;
  background: #F4F6FE;
  border: 1px solid #E8EDFB;
  border-radius: 999px;
  padding: 3px 9px;
}
.lpchat-card-note {
  font-size: 10.5px;
  line-height: 1.45;
  color: #6B6B6B;
  border-top: 1px solid #E5E7EB;
  padding-top: 7px;
  margin-bottom: 10px;
}
.lpchat-card-cta {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #1947D1;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 9px 14px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.lpchat-card-cta:hover { background: #0F2E8A; transform: translateY(-1px); }

/* Input */
.lpchat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #E5E7EB;
  background: #FFFFFF;
  flex-shrink: 0;
}
.lpchat-input input {
  flex: 1;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  padding: 9px 15px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13.5px;
  color: #0A0A0A;
  background: #FAFAFC;
  outline: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.lpchat-input input:focus { border-color: #1947D1; background: #FFFFFF; }
.lpchat-input input::-moz-placeholder { color: #9CA3AF; }
.lpchat-input input::placeholder { color: #9CA3AF; }
.lpchat-input button {
  border: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #1947D1;
  color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms ease, opacity 160ms ease;
}
.lpchat-input button:hover:not(:disabled) { background: #0F2E8A; }
.lpchat-input button:disabled { opacity: 0.4; cursor: default; }

/* Legal strip */
.lpchat-legal {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B6B6B;
  text-align: center;
  padding: 6px 10px 8px;
  background: #FFFFFF;
  flex-shrink: 0;
}

/* Móvil: bottom sheet */
@media (max-width: 480px) {
  .lpchat {
    right: 8px;
    left: 8px;
    width: auto;
    bottom: 82px;
    max-height: calc(100dvh - 100px);
    border-radius: 16px;
  }
  .lpchat-nudge { right: 80px; bottom: 30px; font-size: 13px; }
  body.pdp-active .lpchat { bottom: calc(148px + env(safe-area-inset-bottom, 0px)); }
  body.pdp-active .lpchat-nudge { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

/* ════════════════════════════════════════════════════════════════════════
   LOTE 12 — Convivencia de overlays + atención al launcher
   ════════════════════════════════════════════════════════════════════════ */

/* SmartEmailCapture en desktop tapaba el launcher del chatbot
   (right:20 bottom:20 vs wa-float right:24 bottom:24). Se sube para
   que ambos convivan — mismo patrón que ya usa en móvil. */
@media (min-width: 761px) {
  .lp-smart-capture { bottom: 96px; }
}

/* Ping sutil de atención en el launcher: anillo cobalt que respira
   2 veces al cargar, luego se detiene. Nada si reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .wa-float:not(.is-open)::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(25, 71, 209, 0.45);
    animation: wa-ping 2.2s cubic-bezier(0.22, 1, 0.36, 1) 2.5s 2 both;
    pointer-events: none;
  }
  @keyframes wa-ping {
    0%   { opacity: 0.9; transform: scale(0.9); }
    70%  { opacity: 0;   transform: scale(1.45); }
    100% { opacity: 0;   transform: scale(1.45); }
  }
}
/* ══════════════════════════════════════════════════════════════════════
   BLOG V2 — Índice editorial + Lector long-form
   "Notas desde el laboratorio". Sistema Pure Cobalt.
   Clases: .lp-blog2__* (índice)  ·  .lp-art* (artículo)
   Tokens: --lp-royal #1947D1, Inter Tight, JetBrains Mono, Playfair italic.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --blog-royal: var(--lp-royal, #1947D1);
  --blog-royal-dark: var(--lp-royal-dark, #0F2E8A);
  --blog-royal-light: var(--lp-cobalt-light, #E8EDFB);
  --blog-royal-tint: var(--lp-cobalt-tint, #F4F6FE);
  --blog-ink: var(--lp-ink, #0A0A0A);
  --blog-charcoal: var(--lp-charcoal, #2C2C2C);
  --blog-silver: var(--lp-silver, #6B6B6B);
  --blog-platinum: var(--lp-platinum, #9AA0AA);
  --blog-line: var(--lp-line, #E5E7EB);
  --blog-maxw: 1180px;
  --blog-read: 720px;
}

/* ══════════════════════════════════════════════════════════════════════
   ÍNDICE  ·  .lp-blog2
   ══════════════════════════════════════════════════════════════════════ */
.lp-blog2 {
  background:
    radial-gradient(60% 42% at 50% -4%, rgba(25,71,209,0.09) 0%, transparent 70%),
    linear-gradient(180deg, var(--lp-pearl, #FAFAFC) 0%, var(--lp-mist, #F2F4F9) 100%);
  min-height: 100vh;
  padding: clamp(104px, 15vh, 156px) clamp(20px, 4vw, 48px) clamp(72px, 9vh, 104px);
}
.lp-blog2__inner { max-width: var(--blog-maxw); margin: 0 auto; }

/* Header */
.lp-blog2__head { text-align: center; margin-bottom: clamp(36px, 5vh, 56px); }
.lp-blog2__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--blog-royal);
  display: inline-flex; align-items: center;
  padding: 7px 15px; border-radius: 999px;
  background: rgba(25,71,209,0.07);
  border: 1px solid rgba(25,71,209,0.16);
  margin-bottom: 22px;
}
.lp-blog2__title {
  font-family: "Inter Tight", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(34px, 5vw, 62px);
  letter-spacing: -0.038em; line-height: 1.03;
  color: var(--blog-ink); margin: 0 0 20px;
}
.lp-blog2__title em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-weight: 500; color: var(--blog-royal);
}
.lp-blog2__sub {
  font-size: clamp(15px, 1.5vw, 17px); line-height: 1.6;
  color: var(--blog-silver); max-width: 60ch; margin: 0 auto 22px;
}
.lp-blog2__head-stats {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  letter-spacing: 0.02em; color: var(--blog-silver);
}
.lp-blog2__head-stats strong { color: var(--blog-ink); font-weight: 600; }
.lp-blog2__head-dot { color: var(--blog-platinum); }

/* Meta chip (clock) — shared */
.lp-blog2__meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  letter-spacing: 0.05em; color: var(--blog-platinum); white-space: nowrap;
}
.lp-blog2__meta svg { color: var(--blog-royal); flex: none; }

/* Featured */
.lp-blog2__feature {
  position: relative; display: grid;
  grid-template-columns: 1.55fr 1fr; gap: clamp(24px, 3vw, 48px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--blog-line);
  border-radius: clamp(20px, 2vw, 28px);
  padding: clamp(28px, 3.4vw, 52px);
  margin-bottom: clamp(32px, 4vh, 48px);
  text-decoration: none; color: inherit; overflow: hidden;
  box-shadow: 0 1px 0 rgba(16,24,40,0.02);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s cubic-bezier(.2,.7,.2,1), border-color .3s;
}
.lp-blog2__feature::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 100% 0%, rgba(25,71,209,0.06) 0%, transparent 55%);
  pointer-events: none;
}
.lp-blog2__feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px -30px rgba(15,46,138,0.34);
  border-color: rgba(25,71,209,0.28);
}
.lp-blog2__feature-body { position: relative; z-index: 1; }
.lp-blog2__feature-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--blog-royal);
  margin-bottom: 18px;
}
.lp-blog2__feature-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--blog-royal);
  box-shadow: 0 0 0 4px rgba(25,71,209,0.16);
  animation: lp-blog2-pulse 2.4s ease-in-out infinite;
}
@keyframes lp-blog2-pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 4px rgba(25,71,209,0.16); }
  50% { opacity: .7; box-shadow: 0 0 0 7px rgba(25,71,209,0.05); }
}
.lp-blog2__feature-title {
  font-family: "Inter Tight", sans-serif; font-weight: 600;
  font-size: clamp(23px, 2.7vw, 33px); line-height: 1.14;
  letter-spacing: -0.025em; color: var(--blog-ink); margin: 0 0 14px;
}
.lp-blog2__feature-excerpt {
  font-size: 15.5px; line-height: 1.62; color: var(--blog-silver);
  margin: 0 0 24px; max-width: 52ch;
}
.lp-blog2__feature-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.lp-blog2__feature-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 14.5px;
  color: var(--blog-royal);
}
.lp-blog2__feature-cta svg { transition: transform .3s var(--lp-ease, ease); }
.lp-blog2__feature:hover .lp-blog2__feature-cta svg { transform: translateX(4px); }

/* Featured stat panel */
.lp-blog2__feature-stat {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: clamp(16px, 1.6vw, 22px);
  background: var(--lp-grad-signature, linear-gradient(160deg, #0B1F4D 0%, #1947D1 100%));
  color: #fff; text-align: left; overflow: hidden; isolation: isolate;
  box-shadow: 0 24px 60px -26px rgba(11,31,77,0.6);
}
.lp-blog2__feature-stat::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 15% 10%, rgba(127,170,255,0.28) 0%, transparent 60%);
  pointer-events: none;
}
.lp-blog2__feature-stat-value {
  position: relative; font-family: "Inter Tight", sans-serif; font-weight: 600;
  font-size: clamp(38px, 5vw, 58px); letter-spacing: -0.04em; line-height: 1;
}
.lp-blog2__feature-stat-label {
  position: relative; font-size: 12.5px; line-height: 1.45;
  color: rgba(255,255,255,0.78); max-width: 30ch;
}

/* Featured media — editorial human shot with the stat as a glass overlay */
.lp-blog2__feature-media {
  position: relative; z-index: 1; align-self: stretch;
  min-height: 240px; overflow: hidden; isolation: isolate;
  border-radius: clamp(16px, 1.6vw, 22px);
  background: var(--blog-royal-tint);
  box-shadow: 0 24px 60px -30px rgba(11,31,77,0.5);
}
.lp-blog2__feature-media > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -o-object-fit: cover;
     object-fit: cover; -o-object-position: center 38%; object-position: center 38%;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.lp-blog2__feature:hover .lp-blog2__feature-media > img { transform: scale(1.04); }
.lp-blog2__feature-media .lp-blog2__feature-stat {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  padding: 15px 18px; gap: 4px; border-radius: 14px;
  background: linear-gradient(155deg, rgba(11,31,77,0.9) 0%, rgba(25,71,209,0.8) 100%);
  box-shadow: 0 16px 36px -18px rgba(11,31,77,0.75);
}
.lp-blog2__feature-media .lp-blog2__feature-stat::after { display: none; }
.lp-blog2__feature-media .lp-blog2__feature-stat-value { font-size: clamp(28px, 3.6vw, 40px); }
.lp-blog2__feature-media .lp-blog2__feature-stat-label { font-size: 11.5px; }

/* Grid card thumbnail — bleeds to the card edges above the text */
.lp-blog2__card-thumb {
  display: block; overflow: hidden; aspect-ratio: 16 / 10;
  margin: calc(-1 * clamp(20px, 2vw, 28px)) calc(-1 * clamp(20px, 2vw, 28px)) clamp(15px, 1.6vw, 19px);
  background: var(--blog-royal-tint);
}
.lp-blog2__card-thumb img {
  display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.lp-blog2__card:hover .lp-blog2__card-thumb img { transform: scale(1.045); }

/* Filters */
.lp-blog2__filters {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-bottom: clamp(28px, 3.4vh, 40px);
}
.lp-blog2__chip {
  font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 13.5px;
  letter-spacing: -0.01em; color: var(--blog-charcoal);
  padding: 9px 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--blog-line); cursor: pointer;
  transition: var(--lp-transition-interactive); /* Cycle 9 — was transition:all */
}
.lp-blog2__chip:hover { border-color: rgba(25,71,209,0.4); color: var(--blog-royal); }
.lp-blog2__chip.is-active {
  background: var(--blog-royal); border-color: var(--blog-royal); color: #fff;
  box-shadow: 0 8px 20px -8px rgba(25,71,209,0.5);
}
.lp-blog2__chip:focus-visible { outline: var(--lp-focus-outline, 2px solid #1947D1); outline-offset: 2px; }

/* Grid */
.lp-blog2__grid {
  list-style: none; margin: 0 0 clamp(48px, 7vh, 80px); padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px);
}
@media (max-width: 960px) { .lp-blog2__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lp-blog2__grid { grid-template-columns: 1fr; } }

.lp-blog2__card {
  background: #fff; border: 1px solid var(--blog-line);
  border-radius: 18px; overflow: hidden;
  transition: transform .34s cubic-bezier(.2,.7,.2,1), box-shadow .34s cubic-bezier(.2,.7,.2,1), border-color .24s;
}
.lp-blog2__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 54px -28px rgba(15,46,138,0.32);
  border-color: rgba(25,71,209,0.26);
}
.lp-blog2__card-link {
  display: flex; flex-direction: column; height: 100%;
  padding: clamp(20px, 2vw, 28px); text-decoration: none; color: inherit;
}
.lp-blog2__card-link:focus-visible { outline: var(--lp-focus-outline, 2px solid #1947D1); outline-offset: 2px; border-radius: 18px; }
.lp-blog2__card-cat {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--blog-royal);
  margin-bottom: 13px;
}
.lp-blog2__card-title {
  font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 18.5px;
  line-height: 1.25; letter-spacing: -0.018em; color: var(--blog-ink); margin: 0 0 10px;
}
.lp-blog2__card-excerpt {
  font-size: 13.8px; line-height: 1.56; color: var(--blog-silver); margin: 0 0 16px;
}
.lp-blog2__card-stat {
  display: block; font-size: 12.5px; line-height: 1.4; color: var(--blog-charcoal);
  padding: 10px 12px; margin: 0 0 16px;
  background: var(--blog-royal-tint); border-left: 2px solid var(--blog-royal);
  border-radius: 0 8px 8px 0;
}
.lp-blog2__card-stat strong {
  font-family: "Inter Tight", sans-serif; color: var(--blog-royal);
  font-weight: 700; font-size: 15px;
}
.lp-blog2__card-foot {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--blog-line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.lp-blog2__card-read {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 13px;
  color: var(--blog-royal);
}
.lp-blog2__card-read svg { transition: transform .3s var(--lp-ease, ease); }
.lp-blog2__card:hover .lp-blog2__card-read svg { transform: translateX(3px); }
.lp-blog2__empty {
  text-align: center; color: var(--blog-silver); font-size: 15px;
  padding: 40px 0 64px;
}

/* CTA (reuse signature gradient) */
.lp-blog2__cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--lp-grad-signature, linear-gradient(160deg, #0B1F4D 0%, #1947D1 100%));
  border-radius: clamp(20px, 2vw, 28px);
  padding: clamp(28px, 3.4vw, 52px);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(20px, 2.4vw, 40px);
  align-items: center;
  box-shadow: 0 32px 80px -24px rgba(11,31,77,0.55);
}
.lp-blog2__cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 90% at 90% 10%, rgba(127,170,255,0.22) 0%, transparent 55%);
  pointer-events: none; z-index: 1;
}
.lp-blog2__cta > * { position: relative; z-index: 2; }
@media (max-width: 760px) { .lp-blog2__cta { grid-template-columns: 1fr; } }
.lp-blog2__cta-eyebrow {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: 0.2em; color: rgba(127,170,255,0.85); display: block; margin-bottom: 14px;
}
.lp-blog2__cta-title {
  font-family: "Inter Tight", sans-serif; font-weight: 500;
  font-size: clamp(23px, 3vw, 33px); letter-spacing: -0.022em; line-height: 1.14;
  color: #fff; margin: 0 0 10px;
}
.lp-blog2__cta-sub {
  color: rgba(255,255,255,0.76); font-size: 14.5px; line-height: 1.55; margin: 0; max-width: 44ch;
}
.lp-blog2__cta-form { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-blog2__cta-form input {
  flex: 1 1 200px; padding: 14px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.09);
  color: #fff; font-size: 14.5px; font-family: inherit; outline: none;
  transition: border-color .2s, background .2s;
}
.lp-blog2__cta-form input::-moz-placeholder { color: rgba(255,255,255,0.5); }
.lp-blog2__cta-form input::placeholder { color: rgba(255,255,255,0.5); }
.lp-blog2__cta-form input:focus-visible {
  border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.15);
  box-shadow: 0 0 0 3px rgba(127,170,255,0.3);
}
.lp-blog2__cta-form button {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 14px 24px; border-radius: 999px; border: none; cursor: pointer;
  background: #fff; color: var(--blog-royal);
  font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 14.5px;
  transition: transform .2s, box-shadow .2s;
}
.lp-blog2__cta-form button:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(0,0,0,0.3); }
.lp-blog2__cta-fine {
  grid-column: 1 / -1; margin: 4px 0 0;
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: 0.18em; color: rgba(255,255,255,0.5);
}

/* ══════════════════════════════════════════════════════════════════════
   ARTÍCULO  ·  .lp-art
   ══════════════════════════════════════════════════════════════════════ */
.lp-art {
  background:
    radial-gradient(50% 30% at 50% 0%, rgba(25,71,209,0.05) 0%, transparent 70%),
    linear-gradient(180deg, var(--lp-pearl, #FAFAFC) 0%, #fff 34%);
  min-height: 100vh; padding-bottom: clamp(48px, 7vh, 88px);
}

/* Reading progress */
.lp-art-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 90;
  background: rgba(25,71,209,0.1);
}
.lp-art-progress__bar {
  display: block; height: 100%; width: 100%; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blog-royal) 0%, #5C82F0 100%);
  transition: transform .08s linear;
}

/* Hero */
.lp-art-hero {
  padding: clamp(96px, 13vh, 140px) clamp(20px, 4vw, 48px) clamp(28px, 4vh, 44px);
}
.lp-art-hero__inner { max-width: var(--blog-read); margin: 0 auto; text-align: left; }
.lp-art-hero__back {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 13px;
  color: var(--blog-silver); text-decoration: none; margin-bottom: 24px;
  transition: color .2s, gap .2s;
}
.lp-art-hero__back:hover { color: var(--blog-royal); gap: 10px; }
.lp-art-hero__cat {
  display: inline-block; font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blog-royal); margin-bottom: 18px;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(25,71,209,0.07); border: 1px solid rgba(25,71,209,0.16);
}
.lp-art-hero__title {
  font-family: "Inter Tight", sans-serif; font-weight: 600;
  font-size: clamp(30px, 4.6vw, 50px); line-height: 1.08; letter-spacing: -0.032em;
  color: var(--blog-ink); margin: 0 0 20px;
}
.lp-art-hero__excerpt {
  font-size: clamp(16.5px, 1.8vw, 20px); line-height: 1.55;
  color: var(--blog-charcoal); margin: 0 0 24px; font-weight: 400;
}
.lp-art-hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  letter-spacing: 0.03em; color: var(--blog-silver);
  padding-bottom: 26px; border-bottom: 1px solid var(--blog-line);
}
.lp-art-hero__meta-dot { color: var(--blog-platinum); }
.lp-art-hero__stat {
  display: flex; align-items: baseline; gap: 16px; margin-top: 26px;
  padding: 22px 26px; border-radius: 16px;
  background: linear-gradient(120deg, var(--blog-royal-tint) 0%, #fff 100%);
  border: 1px solid rgba(25,71,209,0.16);
}
.lp-art-hero__stat-value {
  font-family: "Inter Tight", sans-serif; font-weight: 700;
  font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.04em; color: var(--blog-royal);
  line-height: 1; flex: none;
}
.lp-art-hero__stat-label {
  font-size: 13px; line-height: 1.45; color: var(--blog-silver);
}

/* Hero image — editorial band under the headline */
.lp-art-hero-img {
  max-width: var(--blog-maxw); margin: clamp(8px, 2vh, 20px) auto 0;
  padding: 0 clamp(20px, 4vw, 48px);
}
.lp-art-hero-img img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; -o-object-fit: cover; object-fit: cover; -o-object-position: center 40%; object-position: center 40%;
  border-radius: 20px;
  box-shadow: 0 30px 72px -36px rgba(11,31,77,0.44);
}
.lp-art-hero-img__cap {
  margin-top: 11px; font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--blog-silver); text-align: center;
}

/* Inline figure inside prose */
.lp-art__figure { margin: clamp(26px, 3.6vh, 40px) 0; }
.lp-art__figure-img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; -o-object-fit: cover; object-fit: cover; border-radius: 16px;
  box-shadow: 0 20px 46px -26px rgba(11,31,77,0.32);
}
.lp-art__figure-cap {
  margin-top: 10px; font-size: 13px; line-height: 1.5;
  color: var(--blog-silver); font-style: italic;
}
@media (max-width: 760px) {
  .lp-art-hero-img img { aspect-ratio: 4 / 3; border-radius: 15px; }
}

/* Body grid: content + sidebar */
.lp-art-grid {
  max-width: var(--blog-maxw); margin: 0 auto;
  padding: clamp(20px, 3vh, 36px) clamp(20px, 4vw, 48px) 0;
  display: grid; grid-template-columns: minmax(0, var(--blog-read)) 300px;
  gap: clamp(32px, 4vw, 64px); justify-content: center; align-items: start;
}
@media (max-width: 1040px) { .lp-art-grid { grid-template-columns: minmax(0, var(--blog-read)); } }

.lp-art-content { min-width: 0; }

/* TL;DR */
.lp-art-tldr {
  background: var(--blog-royal-tint); border: 1px solid rgba(25,71,209,0.16);
  border-radius: 16px; padding: 22px 26px; margin: 0 0 clamp(28px, 4vh, 40px);
}
.lp-art-tldr__title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.16em; color: var(--blog-royal); margin-bottom: 14px;
}
.lp-art-tldr__title svg { color: var(--blog-royal); }
.lp-art-tldr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.lp-art-tldr li {
  position: relative; padding-left: 26px;
  font-size: 14.5px; line-height: 1.5; color: var(--blog-charcoal);
}
.lp-art-tldr li::before {
  content: ''; position: absolute; left: 4px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blog-royal); box-shadow: 0 0 0 3px rgba(25,71,209,0.14);
}

/* Prose */
.lp-art__h2 {
  font-family: "Inter Tight", sans-serif; font-weight: 600;
  font-size: clamp(21px, 2.4vw, 27px); line-height: 1.2; letter-spacing: -0.022em;
  color: var(--blog-ink); margin: clamp(34px, 5vh, 48px) 0 14px;
  scroll-margin-top: 96px;
}
.lp-art__p {
  font-size: 16.5px; line-height: 1.72; color: var(--blog-charcoal);
  margin: 0 0 18px;
}
.lp-art__p strong { color: var(--blog-ink); font-weight: 650; }
.lp-art__list { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.lp-art__list li {
  position: relative; padding-left: 24px;
  font-size: 16px; line-height: 1.6; color: var(--blog-charcoal);
}
.lp-art__list li::before {
  content: ''; position: absolute; left: 3px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blog-royal);
}
.lp-art__list li strong { color: var(--blog-ink); font-weight: 650; }

/* Stat callout */
.lp-art__stat {
  display: flex; flex-direction: column; gap: 6px;
  margin: clamp(24px, 3.4vh, 36px) 0; padding: 26px 30px;
  border-radius: 16px; text-align: center; isolation: isolate; overflow: hidden;
  background: var(--lp-grad-signature, linear-gradient(160deg, #0B1F4D 0%, #1947D1 100%));
  color: #fff; box-shadow: 0 24px 56px -28px rgba(11,31,77,0.55);
}
.lp-art__stat::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 20% 0%, rgba(127,170,255,0.26) 0%, transparent 60%);
  pointer-events: none;
}
.lp-art__stat-value {
  position: relative; font-family: "Inter Tight", sans-serif; font-weight: 700;
  font-size: clamp(40px, 6vw, 62px); letter-spacing: -0.04em; line-height: 1;
}
.lp-art__stat-label { position: relative; font-size: 15px; font-weight: 500; color: #fff; }
.lp-art__stat-sub { position: relative; font-size: 12.5px; color: rgba(255,255,255,0.72); }

/* Study card */
.lp-art__study {
  margin: clamp(24px, 3.4vh, 34px) 0; padding: 22px 26px;
  background: #fff; border: 1px solid var(--blog-line);
  border-left: 3px solid var(--blog-royal); border-radius: 0 14px 14px 0;
  box-shadow: 0 14px 40px -28px rgba(15,46,138,0.3);
}
.lp-art__study-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.18em;
  color: var(--blog-royal); margin-bottom: 12px;
}
.lp-art__study-claim {
  margin: 0 0 14px; font-size: 15.5px; line-height: 1.6;
  color: var(--blog-ink); font-style: normal;
}
.lp-art__study-claim strong { font-weight: 650; }
.lp-art__study-src {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 12.5px; color: var(--blog-silver); line-height: 1.45;
}
.lp-art__study-src a {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 12.5px;
  color: var(--blog-royal); text-decoration: none; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(25,71,209,0.07); border: 1px solid rgba(25,71,209,0.16);
  transition: background .2s, transform .2s;
}
.lp-art__study-src a:hover { background: rgba(25,71,209,0.13); transform: translateY(-1px); }

/* Pull quote */
.lp-art__quote {
  margin: clamp(30px, 4.4vh, 46px) 0; padding: 4px 0 4px 26px;
  border-left: 3px solid var(--blog-royal);
}
.lp-art__quote blockquote {
  margin: 0 0 10px; font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-size: clamp(20px, 2.5vw, 27px); line-height: 1.36;
  color: var(--blog-ink); letter-spacing: -0.01em;
}
.lp-art__quote figcaption {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.08em; color: var(--blog-silver); text-transform: uppercase;
}

/* Inline product (mobile) — hidden on desktop where sidebar shows it */
.lp-art-content__prod-inline { margin: clamp(30px, 4vh, 44px) 0 0; }
@media (min-width: 1041px) { .lp-art-content__prod-inline { display: none; } }

/* References */
.lp-art-refs {
  margin-top: clamp(40px, 6vh, 60px); padding-top: 28px;
  border-top: 1px solid var(--blog-line);
}
.lp-art-refs__title {
  font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 15px;
  letter-spacing: 0.02em; color: var(--blog-ink); margin: 0 0 14px;
  text-transform: uppercase;
}
.lp-art-refs ol { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.lp-art-refs li { font-size: 13px; line-height: 1.55; color: var(--blog-silver); }
.lp-art-refs__authors { color: var(--blog-charcoal); }
.lp-art-refs__ttl { color: var(--blog-ink); font-weight: 500; }
.lp-art-refs a { color: var(--blog-royal); text-decoration: none; word-break: break-word; }
.lp-art-refs a:hover { text-decoration: underline; }

/* Share row */
.lp-art-share {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: clamp(32px, 5vh, 48px); padding-top: 24px;
  border-top: 1px solid var(--blog-line);
}
.lp-art-share__label {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: 0.18em; color: var(--blog-platinum); margin-right: 4px;
}
.lp-art-share__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 1px solid var(--blog-line); color: var(--blog-charcoal);
  transition: var(--lp-transition-interactive); /* Cycle 9 — was transition:all */
}
.lp-art-share__btn:hover {
  border-color: var(--blog-royal); color: var(--blog-royal);
  transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(25,71,209,0.45);
}
.lp-art-share__btn:focus-visible { outline: var(--lp-focus-outline, 2px solid #1947D1); outline-offset: 2px; }
.lp-art-share__copied {
  font-family: "Inter Tight", sans-serif; font-size: 13px; font-weight: 500;
  color: var(--blog-royal);
}

/* Compliance */
.lp-art-compliance {
  margin-top: clamp(30px, 4vh, 44px); padding: 18px 20px;
  background: var(--lp-pearl, #FAFAFC); border: 1px solid var(--blog-line);
  border-radius: 12px; font-size: 12px; line-height: 1.6; color: var(--blog-silver);
}
.lp-art-compliance strong { color: var(--blog-charcoal); }

/* Sidebar */
.lp-art-side { position: relative; }
@media (max-width: 1040px) { .lp-art-side { display: none; } }
.lp-art-side__sticky {
  position: sticky; top: 96px; display: grid; gap: 20px;
}

/* TOC */
.lp-art-toc {
  background: #fff; border: 1px solid var(--blog-line);
  border-radius: 14px; padding: 20px 22px;
}
.lp-art-toc__title {
  display: block; font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: 0.18em; color: var(--blog-platinum); margin-bottom: 14px;
}
.lp-art-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lp-art-toc a {
  display: block; padding: 7px 12px; border-radius: 8px;
  font-family: "Inter Tight", sans-serif; font-size: 13.5px; line-height: 1.35;
  color: var(--blog-silver); text-decoration: none;
  border-left: 2px solid transparent; transition: var(--lp-transition-interactive); /* Cycle 9 — was transition:all */
}
.lp-art-toc a:hover { color: var(--blog-royal); background: var(--blog-royal-tint); }
.lp-art-toc a.is-active {
  color: var(--blog-royal); font-weight: 600;
  background: var(--blog-royal-tint); border-left-color: var(--blog-royal);
}

/* Product CTA card */
.lp-art-prod {
  display: block; background: #fff; border: 1px solid var(--blog-line);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 44px -30px rgba(15,46,138,0.34);
}
.lp-art-prod__eyebrow {
  display: block; font-family: "JetBrains Mono", monospace; font-size: 9.5px;
  letter-spacing: 0.16em; color: var(--blog-royal); padding: 14px 18px 0;
}
.lp-art-prod__media {
  margin: 12px 0 0; aspect-ratio: 16 / 11; background: var(--blog-royal-tint);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.lp-art-prod__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.lp-art-prod__body { padding: 16px 18px 18px; }
.lp-art-prod__name {
  font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 16px;
  line-height: 1.2; letter-spacing: -0.015em; color: var(--blog-ink); margin: 0 0 6px;
}
.lp-art-prod__spec {
  display: flex; align-items: center; gap: 7px;
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  color: var(--blog-silver); margin-bottom: 14px;
}
.lp-art-prod__dot { color: var(--blog-platinum); }
.lp-art-prod__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-art-prod__price {
  font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: 22px;
  letter-spacing: -0.03em; color: var(--blog-ink);
}
.lp-art-prod__price em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--blog-platinum); margin-left: 4px; }
.lp-art-prod__btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 11px 18px; border-radius: 999px;
  background: var(--blog-royal); color: #fff; text-decoration: none;
  font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 13.5px;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.lp-art-prod__btn:hover {
  background: var(--blog-royal-dark); transform: translateY(-1px);
  box-shadow: 0 12px 24px -8px rgba(25,71,209,0.5);
}

/* Related */
.lp-art-related {
  max-width: var(--blog-maxw); margin: clamp(48px, 7vh, 84px) auto 0;
  padding: clamp(40px, 6vh, 64px) clamp(20px, 4vw, 48px) 0;
  border-top: 1px solid var(--blog-line);
}
.lp-art-related__inner { max-width: 100%; }
.lp-art-related__title {
  font-family: "Inter Tight", sans-serif; font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.025em;
  color: var(--blog-ink); margin: 0 0 24px; text-align: center;
}
.lp-art-related__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px);
}
@media (max-width: 860px) { .lp-art-related__grid { grid-template-columns: 1fr; } }
.lp-art-related__card {
  background: #fff; border: 1px solid var(--blog-line); border-radius: 16px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .24s;
}
.lp-art-related__card:hover {
  transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(15,46,138,0.3);
  border-color: rgba(25,71,209,0.26);
}
.lp-art-related__card a {
  display: flex; flex-direction: column; height: 100%;
  padding: 22px 24px; text-decoration: none; color: inherit;
}
.lp-art-related__card a:focus-visible { outline: var(--lp-focus-outline, 2px solid #1947D1); outline-offset: 2px; border-radius: 16px; }
.lp-art-related__cat {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--blog-royal); margin-bottom: 12px;
}
.lp-art-related__card h3 {
  font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 17px;
  line-height: 1.28; letter-spacing: -0.015em; color: var(--blog-ink); margin: 0 0 16px;
}
.lp-art-related__meta {
  margin-top: auto; font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  letter-spacing: 0.04em; color: var(--blog-royal);
}

/* 404 */
.lp-art--404 { display: flex; align-items: center; justify-content: center; padding: 20px; }
.lp-art-404__inner { max-width: 480px; text-align: center; padding-top: 120px; }
.lp-art-404__code {
  font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: 64px;
  color: var(--blog-royal); letter-spacing: -0.04em;
}
.lp-art-404__inner h1 {
  font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 26px;
  letter-spacing: -0.025em; color: var(--blog-ink); margin: 12px 0 10px;
}
.lp-art-404__inner p { font-size: 15px; line-height: 1.6; color: var(--blog-silver); margin: 0 0 24px; }
.lp-art-404__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px; background: var(--blog-royal); color: #fff;
  font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 14px; text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.lp-art-404__btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(25,71,209,0.5); }

/* ══════════════════════════════════════════════════════════════════════
   MÓVIL  ·  ≤680px  (pulido 390px)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .lp-blog2 { padding-top: clamp(84px, 12vh, 108px); }
  .lp-blog2__head-stats { gap: 8px 10px; font-size: 11px; }

  /* Featured: apilar en una columna */
  .lp-blog2__feature {
    grid-template-columns: 1fr; gap: 22px; padding: 24px 22px;
  }
  .lp-blog2__feature-excerpt { max-width: none; margin-bottom: 20px; }
  .lp-blog2__feature-stat-label { max-width: none; }
  .lp-blog2__feature-media { align-self: auto; min-height: 0; aspect-ratio: 16 / 10; }

  /* Filtros: tira deslizable en vez de wrap apretado */
  .lp-blog2__filters {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    margin-inline: -20px; padding: 2px 20px 8px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .lp-blog2__filters::-webkit-scrollbar { display: none; }
  .lp-blog2__chip { flex: none; }

  /* Artículo */
  .lp-art-hero__stat { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lp-art__p { font-size: 16px; }
  .lp-art__study-src { flex-direction: column; align-items: flex-start; }
  .lp-art-share__label { flex-basis: 100%; margin-bottom: 2px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lp-blog2__feature, .lp-blog2__card, .lp-art-related__card,
  .lp-art-share__btn, .lp-blog2__feature-dot,
  .lp-blog2__feature-cta svg, .lp-blog2__card-read svg,
  .lp-blog2__feature-media > img, .lp-blog2__card-thumb img { transition: none; animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   NAV — "Blog Educativo" promoted pill (desktop) + mobile primary links
   Loaded after main/premium-overrides so these win. Gives the blog real
   prominence without breaking the minimalist nav system.
   ═══════════════════════════════════════════════════════════════════════ */

/* Desktop: distinct chip so Blog Educativo reads as a first-class destination */
.nav-pill.nav-pill--blog {
  font-weight: 600 !important;
  color: #1947D1 !important;
  background: rgba(25, 71, 209, 0.06) !important;
  box-shadow: inset 0 0 0 1px rgba(25, 71, 209, 0.18) !important;
}
.nav-pill.nav-pill--blog:hover {
  background: rgba(25, 71, 209, 0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(25, 71, 209, 0.30) !important;
}
/* Over the dark hero: switch to the luminous light-cobalt accent */
body.lp-dark-hero .nav-pill.nav-pill--blog {
  color: #FFFFFF !important;
  background: rgba(127, 170, 255, 0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(127, 170, 255, 0.32) !important;
}
body.lp-dark-hero .nav-pill.nav-pill--blog:hover {
  background: rgba(127, 170, 255, 0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(127, 170, 255, 0.5) !important;
}
.nav-pill.nav-pill--blog.nav-pill--active {
  background: rgba(25, 71, 209, 0.12) !important;
}

/* Mobile drawer: primary links, Blog Educativo highlighted at the top */
.mnav-plink {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.88);
}
.mnav-plink:last-of-type { border-bottom: none; }
.mnav-plink-label { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.mnav-plink-sub { font-size: 11px; color: rgba(255, 255, 255, 0.45); }
.mnav-plink--blog {
  border-bottom: none;
  border-radius: 12px;
  padding: 13px 14px;
  margin-bottom: 6px;
  background: linear-gradient(90deg, rgba(127, 170, 255, 0.12), rgba(25, 71, 209, 0.06));
  box-shadow: inset 0 0 0 1px rgba(127, 170, 255, 0.24);
}
.mnav-plink--blog .mnav-plink-label { color: #FFFFFF; font-weight: 600; }
.mnav-plink--blog .mnav-plink-sub { color: rgba(127, 170, 255, 0.9); }

/* ═══════════════════════════════════════════════════════════════════════
   HOME BLOG STRIP — educational-content beat inside the homepage funnel.
   Featured article + three keyword deep-dives (reta / tirce / sema), every
   card a real internal link to /blog/:slug. Brand tokens only.
   ═══════════════════════════════════════════════════════════════════════ */
.lp-hblog {
  position: relative;
  padding: clamp(56px, 8vw, 96px) 20px;
  background: #FAFAFC;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}
.lp-hblog__inner { max-width: 1160px; margin: 0 auto; }

.lp-hblog__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: clamp(28px, 4vw, 44px);
}
.lp-hblog__eyebrow {
  display: inline-block; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: #1947D1; margin-bottom: 14px;
}
.lp-hblog__title {
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: clamp(26px, 3.6vw, 40px); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.08; color: #0A0A0A; margin: 0;
}
.lp-hblog__sub {
  margin: 14px 0 0; max-width: 62ch; font-size: 15.5px; line-height: 1.6;
  color: #6B6B6B;
}
.lp-hblog__all {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: #1947D1; text-decoration: none;
  padding: 10px 16px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(25, 71, 209, 0.22);
  transition: background 0.18s ease, box-shadow 0.18s ease, gap 0.18s ease;
  white-space: nowrap;
}
.lp-hblog__all:hover {
  background: rgba(25, 71, 209, 0.06); gap: 10px;
  box-shadow: inset 0 0 0 1px rgba(25, 71, 209, 0.4);
}

.lp-hblog__grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: stretch;
}

/* Feature */
.lp-hblog__feature {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 38px); border-radius: 20px; text-decoration: none;
  background: linear-gradient(150deg, #0F2E8A 0%, #1947D1 100%); color: #fff;
  box-shadow: 0 18px 44px -22px rgba(25, 71, 209, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-hblog__feature:hover {
  transform: translateY(-3px); box-shadow: 0 26px 56px -22px rgba(25, 71, 209, 0.7);
}
.lp-hblog__badge {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,0.92);
  padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(127,170,255,0.32); margin-bottom: 18px;
}
.lp-hblog__badge-dot {
  width: 6px; height: 6px; border-radius: 50%; background: rgb(127,170,255);
  box-shadow: 0 0 0 3px rgba(127,170,255,0.28);
}
.lp-hblog__feature-title {
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: clamp(21px, 2.5vw, 28px); font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.16; margin: 0 0 12px;
}
.lp-hblog__feature-excerpt {
  font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.82);
  margin: 0 0 22px; max-width: 52ch;
}
.lp-hblog__feature-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: auto;
}
.lp-hblog__feature-stat {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.16);
  display: flex; flex-direction: column; gap: 3px;
}
.lp-hblog__feature-stat-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(28px, 4vw, 38px); font-weight: 500; line-height: 1;
  color: rgb(127,170,255); letter-spacing: -0.02em;
}
.lp-hblog__feature-stat-label {
  font-size: 12px; line-height: 1.4; color: rgba(255,255,255,0.66);
}
/* Feature banner — human face at the top, blended into the cobalt card */
.lp-hblog__feature-media {
  display: block; position: relative; overflow: hidden; aspect-ratio: 21 / 9;
  margin: calc(-1 * clamp(26px, 3vw, 38px)) calc(-1 * clamp(26px, 3vw, 38px)) clamp(20px, 2.4vw, 26px);
  background: #0F2E8A;
}
.lp-hblog__feature-media img {
  display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;
  -o-object-position: center 36%;
     object-position: center 36%;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.lp-hblog__feature:hover .lp-hblog__feature-media img { transform: scale(1.04); }
.lp-hblog__feature-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,46,138,0.12) 0%, rgba(15,46,138,0.6) 100%);
}

/* Deep-dive cards */
.lp-hblog__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-auto-rows: 1fr; }
.lp-hblog__card {
  background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px #E5E7EB;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lp-hblog__card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(25,71,209,0.28), 0 14px 30px -20px rgba(10,10,10,0.4);
}
.lp-hblog__card-link {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 20px;
  text-decoration: none; height: 100%;
}
.lp-hblog__card-cat {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px;
  letter-spacing: 1.4px; text-transform: uppercase; color: #1947D1;
}
.lp-hblog__card-title {
  font-family: 'Inter Tight', Inter, system-ui, sans-serif; font-size: 16px;
  font-weight: 600; letter-spacing: -0.015em; line-height: 1.28; color: #0A0A0A;
}
.lp-hblog__card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 6px;
}

/* Shared bits */
.lp-hblog__read {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  font-weight: 600; color: #1947D1;
}
.lp-hblog__feature .lp-hblog__read { color: #fff; }
.lp-hblog__meta {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  color: #6B6B6B; font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.lp-hblog__feature .lp-hblog__meta { color: rgba(255,255,255,0.66); }
.lp-hblog__count {
  margin: 22px 0 0; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: 0.4px; color: #6B6B6B; text-align: center;
}

@media (max-width: 860px) {
  .lp-hblog__grid { grid-template-columns: 1fr; }
  .lp-hblog__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .lp-hblog__all { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-hblog__feature, .lp-hblog__card, .lp-hblog__all,
  .lp-hblog__feature-media img { transition: none; }
}
/* ══════════════════════════════════════════════════════════════════
   human.css — "Human moments" imagery bands
   Namespace: .lp-hb  (Longeva Human Band)
   Goal: make the site feel less synthetic / more human without touching
   the conversion funnel. Cinematic, bordered ("bordeada"), premium.
   Brand rules respected:
     · Cobalt #1947D1 is the only brand hue (light tint on dark scrims).
     · Playfair is NEVER used here — titles are Inter + italic <em>.
     · JetBrains Mono only for the technical eyebrow pill.
   ══════════════════════════════════════════════════════════════════ */

.lp-hb {
  position: relative;
  width: 100%;
  padding: clamp(26px, 5vw, 60px) clamp(16px, 5vw, 40px);
  background: transparent;
}

.lp-hb__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Framed image ("bordeada") ─────────────────────────────────── */
.lp-hb__frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  /* per-band ratio via custom props (set inline por HumanBand) para poder
     re-encuadrar en móvil sin que un style inline pise la media query */
  aspect-ratio: var(--hb-ratio, 16 / 9);
  background: #E8EDFB;                 /* cobalt-light placeholder while img loads */
  outline: 1px solid rgba(25, 71, 209, 0.16);
  outline-offset: 0;
  box-shadow:
    0 24px 60px -28px rgba(15, 46, 138, 0.45),
    0 2px 8px rgba(10, 10, 10, 0.06);
  /* reveal-on-scroll */
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition:
    opacity 0.9s cubic-bezier(0.16, 0.84, 0.44, 1),
    transform 0.9s cubic-bezier(0.16, 0.84, 0.44, 1);
  will-change: opacity, transform;
}
.lp-hb.is-in .lp-hb__frame {
  opacity: 1;
  transform: none;
}

.lp-hb__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
  transform: scale(1.001);
  transition: transform 1.1s cubic-bezier(0.16, 0.84, 0.44, 1);
}
/* zoom sutil en hover — mismo lenguaje que los tiles del mosaico */
@media (hover: hover) {
  .lp-hb__frame:hover .lp-hb__img { transform: scale(1.025); }
}

/* scrim — keeps overlaid copy legible + adds a cobalt wash for brand cohesion */
.lp-hb__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 11, 24, 0) 36%, rgba(8, 11, 24, 0.74) 100%),
    linear-gradient(90deg, rgba(15, 46, 138, 0.32) 0%, rgba(15, 46, 138, 0) 58%);
  pointer-events: none;
  z-index: 1;
}

/* film grain — pulls the render away from a flat/synthetic look */
.lp-hb__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ── Overlaid copy ─────────────────────────────────────────────── */
.lp-hb__copy {
  position: absolute;
  z-index: 3;
  left: clamp(18px, 4vw, 46px);
  right: clamp(18px, 4vw, 46px);
  bottom: clamp(18px, 3.5vw, 42px);
  max-width: 640px;
  color: #fff;
  /* reveal escalonado: el copy entra un beat después del frame */
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 0.84, 0.44, 1) 0.18s,
    transform 0.85s cubic-bezier(0.16, 0.84, 0.44, 1) 0.18s;
}
.lp-hb.is-in .lp-hb__copy {
  opacity: 1;
  transform: none;
}
.lp-hb__copy--right {
  left: auto;
  right: clamp(18px, 4vw, 46px);
  text-align: right;
  margin-left: auto;
}

.lp-hb__eyebrow {
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(25, 71, 209, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.lp-hb__title {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(6, 10, 24, 0.35);
}
.lp-hb__title em {
  font-style: italic;
  font-weight: 600;
  color: #A9BDFF;                       /* cobalt tint — legible on dark scrim, stays on-brand */
}

.lp-hb__sub {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 52ch;
}
.lp-hb__copy--right .lp-hb__sub { margin-left: auto; }

/* ══════════════════════════════════════════════════════════════════
   SPLIT editorial variant — framed portrait shot + copy side-by-side.
   Used for the real brand vials (portrait 4/5): a full-bleed 16/9 crop
   decapitated them, so we frame the whole vial and set copy beside it.
   Copy is DARK (on the page), no scrim needed. Alternates sides via
   .lp-hb--right. Keeps the frame border + shadow + film grain.
   ══════════════════════════════════════════════════════════════════ */
.lp-hb--split .lp-hb__inner {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}
.lp-hb--split.lp-hb--right .lp-hb__inner {
  grid-template-columns: 1fr minmax(0, 420px);
}
.lp-hb--split.lp-hb--right .lp-hb__frame { order: 2; }
.lp-hb--split.lp-hb--right .lp-hb__copy { order: 1; }

/* portrait frame — shows the full vial, never decapitated */
.lp-hb--split .lp-hb__frame {
  aspect-ratio: 4 / 5;
  width: 100%;
}

/* split scrim — drop the heavy dark gradient, keep a whisper of cobalt
   for brand cohesion (copy is beside, not over, so no legibility scrim) */
.lp-hb--split .lp-hb__frame::after {
  background:
    linear-gradient(180deg, rgba(15, 46, 138, 0) 62%, rgba(15, 46, 138, 0.10) 100%),
    linear-gradient(90deg, rgba(15, 46, 138, 0.10) 0%, rgba(15, 46, 138, 0) 64%);
}

/* split copy panel — dark editorial text on the page background */
.lp-hb--split .lp-hb__copy {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  max-width: 520px;
  color: #0A0A0A;
  /* gentle reveal alongside the frame */
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) 0.08s,
    transform 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) 0.08s;
}
.lp-hb--split.is-in .lp-hb__copy {
  opacity: 1;
  transform: none;
}
.lp-hb--split .lp-hb__eyebrow {
  color: #1947D1;
  background: rgba(25, 71, 209, 0.08);
  border: 1px solid rgba(25, 71, 209, 0.22);
  backdrop-filter: none;
}
.lp-hb--split .lp-hb__title {
  color: #0A0A0A;
  text-shadow: none;
  font-size: clamp(24px, 2.8vw, 38px);
}
.lp-hb--split .lp-hb__title em { color: #1947D1; }   /* full cobalt on light bg */
.lp-hb--split .lp-hb__sub { color: #2C2C2C; }

/* ══════════════════════════════════════════════════════════════════
   PREMIUM modifier — post-hero "vitalidad" band only (.lp-hb--premium)
   Museum-mat frame (white passe-partout) + cobalt hairline keyline +
   deeper cinematic shadow + a small ∞ brand seal with a cobalt filete
   over the copy. Scoped so the other split bands (longevity) keep the
   lighter treatment. Composes on top of .lp-hb--split.
   ══════════════════════════════════════════════════════════════════ */
.lp-hb--premium .lp-hb__frame {
  box-sizing: border-box;
  border: clamp(9px, 1vw, 14px) solid #fff;   /* passe-partout / museum mat */
  border-radius: 20px;
  outline: 1px solid rgba(25, 71, 209, 0.30); /* cobalt hairline keyline */
  outline-offset: 0;
  box-shadow:
    0 48px 100px -44px rgba(15, 46, 138, 0.55),
    0 12px 34px -14px rgba(10, 10, 10, 0.12);
}

/* ∞ brand seal + cobalt accent filete, sitting above the eyebrow.
   width:fit-content keeps the filete (border-bottom) the width of the
   glyph — reads as a stamped monogram, not an underline. */
.lp-hb--premium .lp-hb__copy::before {
  content: "\221E";                            /* ∞ lemniscata brandmark */
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
  color: #1947D1;
  letter-spacing: -0.02em;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 2px solid rgba(25, 71, 209, 0.45);
}

/* finer editorial rhythm on the premium copy */
.lp-hb--premium .lp-hb__title { letter-spacing: -0.025em; }
.lp-hb--premium .lp-hb__sub { color: #3A3A3A; }

@media (max-width: 760px) {
  /* keep the seal proportional and the mat slimmer on small screens */
  .lp-hb--premium .lp-hb__frame { border-width: 8px; border-radius: 16px; }
  .lp-hb--premium .lp-hb__copy::before {
    font-size: 26px;
    padding-bottom: 8px;
    margin-bottom: 13px;
  }
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .lp-hb { padding: 20px 14px; }
  .lp-hb__frame { aspect-ratio: var(--hb-ratio-m, 4 / 5); border-radius: 18px; }
  .lp-hb__copy,
  .lp-hb__copy--right {
    left: 16px;
    right: 16px;
    bottom: 18px;
    text-align: left;
    max-width: none;
  }
  .lp-hb__title { font-size: clamp(21px, 6.4vw, 30px); }
  /* eyebrows largos ("MAYORISTA · COACHES · …") — compactar el pill */
  .lp-hb__eyebrow {
    font-size: 10px;
    letter-spacing: 0.14em;
    padding: 5px 10px;
    margin-bottom: 10px;
  }

  /* split stacks: framed image on top (centered), copy below */
  .lp-hb--split .lp-hb__inner,
  .lp-hb--split.lp-hb--right .lp-hb__inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .lp-hb--split.lp-hb--right .lp-hb__frame,
  .lp-hb--split.lp-hb--right .lp-hb__copy { order: 0; }
  .lp-hb--split .lp-hb__frame {
    max-width: 340px;
    margin: 0 auto;
    border-radius: 18px;
  }
  .lp-hb--split .lp-hb__copy {
    max-width: none;
    text-align: left;
  }
}

/* ══════════════════════════════════════════════════════════════════
   .lp-hm — Human Mosaic (editorial grid of small human moments)
   Same visual language as .lp-hb: framed tiles, cobalt outline,
   soft cobalt shadow, film-free (tiles are small — grain would muddy).
   ══════════════════════════════════════════════════════════════════ */
.lp-hm {
  width: 100%;
  padding: clamp(30px, 5.5vw, 68px) clamp(16px, 5vw, 40px);
}
.lp-hm__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.lp-hm__head {
  text-align: center;
  margin-bottom: clamp(22px, 3.5vw, 38px);
}
.lp-hm__eyebrow {
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1947D1;
  background: rgba(25, 71, 209, 0.08);
  border: 1px solid rgba(25, 71, 209, 0.22);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.lp-hm__title {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #0A0A0A;
  margin: 0;
  text-wrap: balance;
}
.lp-hm__title em {
  font-style: italic;
  color: #1947D1;
}

.lp-hm__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(140px, 17vw, 205px);
  gap: clamp(10px, 1.4vw, 16px);
  /* dense: en 2 columnas el tile "wide" saltaría de fila y dejaría un
     hueco de 2 filas junto al primer "tall" — dense lo rellena */
  grid-auto-flow: dense;
}
.lp-hm__tile {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #E8EDFB;
  outline: 1px solid rgba(25, 71, 209, 0.14);
  box-shadow: 0 14px 34px -18px rgba(15, 46, 138, 0.35);
  /* staggered reveal (delay set inline per tile) */
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 0.84, 0.44, 1),
    transform 0.8s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.lp-hm.is-in .lp-hm__tile {
  opacity: 1;
  transform: none;
}
.lp-hm__tile--tall { grid-row: span 2; }
.lp-hm__tile--wide { grid-column: span 2; }

.lp-hm__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
  transform: scale(1.001);
  transition: transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
}
@media (hover: hover) {
  .lp-hm__tile:hover .lp-hm__img { transform: scale(1.045); }
}

/* subtle cobalt wash on tiles for brand cohesion */
.lp-hm__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 46, 138, 0) 70%, rgba(15, 46, 138, 0.12) 100%);
}

@media (max-width: 760px) {
  .lp-hm { padding: 24px 14px; }
  .lp-hm__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(120px, 30vw, 160px);
    gap: 10px;
  }
  /* wide tile keeps its 2-col span; tall tiles keep 2-row span — the
     5 tiles resolve to a clean 2×4 checkerboard on mobile */
  .lp-hm__tile { border-radius: 13px; }
}

/* ── Motion / accessibility guard ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lp-hb__frame,
  .lp-hb__copy,
  .lp-hb--split .lp-hb__copy,
  .lp-hm__tile {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .lp-hb__img,
  .lp-hm__img { transition: none !important; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   Shop links over human imagery → PDP / catálogo. (added 2026-07-19)
   Split-band copy is a SIBLING of the frame, so a full-frame <a>
   over the image never covers the headline/CTA. Overlay bands set
   no `link`, so the anchor never renders on top of a figcaption.
   ══════════════════════════════════════════════════════════════ */
.lp-hb__imglink {
  position: absolute;
  inset: 0;
  z-index: 4;                       /* above copy (z3) — split copy is a sibling */
  display: block;
  border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}
.lp-hb__imglink:focus-visible {
  outline: 3px solid var(--lp-royal, #1947D1);
  outline-offset: -3px;
}
.lp-hb__shop {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  font: 600 12.5px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.01em;
  color: var(--lp-ink, #0A0A0A);
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--lp-radius-pill, 999px);
  box-shadow: 0 6px 20px rgba(10, 20, 60, 0.16);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--lp-dur-xl, 0.6s) var(--lp-ease, cubic-bezier(0.22, 1, 0.36, 1)),
              transform var(--lp-dur-xl, 0.6s) var(--lp-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.lp-hb__shop i {
  font-style: normal;
  font-weight: 700;
  color: var(--lp-royal, #1947D1);
  transition: transform 0.35s var(--lp-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.lp-hb.is-in .lp-hb__shop { opacity: 1; transform: translateY(0); }
.lp-hb__frame:hover .lp-hb__shop { box-shadow: 0 10px 28px rgba(10, 20, 60, 0.22); }
.lp-hb__frame:hover .lp-hb__shop i { transform: translateX(3px); }

/* Mosaic tile shop chip — subtle, hover-revealed on desktop */
.lp-hm__link {
  position: absolute;
  inset: 0;
  z-index: 3;                       /* above tile::after gradient (no z-index) */
  display: block;
  border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}
.lp-hm__link:focus-visible {
  outline: 3px solid var(--lp-royal, #1947D1);
  outline-offset: -3px;
}
.lp-hm__shop {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  font: 600 11px/1 "Inter", system-ui, sans-serif;
  color: var(--lp-ink, #0A0A0A);
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--lp-radius-pill, 999px);
  box-shadow: 0 4px 14px rgba(10, 20, 60, 0.16);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--lp-ease, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.4s var(--lp-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.lp-hm__shop i {
  font-style: normal;
  font-weight: 700;
  color: var(--lp-royal, #1947D1);
  transition: transform 0.35s var(--lp-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.lp-hm__tile:hover .lp-hm__shop { opacity: 1; transform: translateY(0); }
.lp-hm__tile:hover .lp-hm__shop i { transform: translateX(3px); }

/* Touch / no-hover devices: keep the chip visible so mobile sees it */
@media (hover: none) {
  .lp-hm__shop { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-hb__shop, .lp-hm__shop {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .lp-hb__shop i, .lp-hm__shop i { transition: none !important; }
}
/* LongevaPeptides — Context-backed Cart Drawer.
   Cobalt-light palette to match the live site. */

.lp-cart-root {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}
.lp-cart-root.is-open { pointer-events: auto; }

.lp-cart-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 36, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  border: 0;
  cursor: pointer;
  transition:
    background 320ms cubic-bezier(0.22, 1, 0.36, 1),
    backdrop-filter 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-cart-root.is-open .lp-cart-backdrop {
  background: rgba(8, 14, 36, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lp-cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(440px, 100vw);
  background: #ffffff;
  color: #0a0a0a;
  box-shadow: -30px 0 80px -20px rgba(8, 14, 36, 0.35);
  display: flex;
  flex-direction: column;
  transform: translate3d(100%, 0, 0);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
  font-family: "Inter Tight", system-ui, sans-serif;
}
.lp-cart-root.is-open .lp-cart-panel {
  transform: translate3d(0, 0, 0);
}

.lp-cart-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 28px 28px 20px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}
.lp-cart-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #6b6b6b;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.lp-cart-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #0a0a0a;
}
.lp-cart-close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.05);
  color: #0a0a0a;
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease;
}
.lp-cart-close:hover { background: rgba(10, 10, 10, 0.10); }

/* Empty state */
.lp-cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 32px;
  gap: 14px;
}
.lp-cart-empty-ring {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid rgba(25, 71, 209, 0.25);
  background:
    radial-gradient(circle at center, rgba(25, 71, 209, 0.12), transparent 70%),
    radial-gradient(circle at 30% 30%, rgba(232, 237, 251, 0.6), transparent 60%);
  box-shadow: 0 0 60px -10px rgba(25, 71, 209, 0.4);
}
.lp-cart-empty-title {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #0a0a0a;
}
.lp-cart-empty-sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: #6b6b6b;
  max-width: 28ch;
}
.lp-cart-empty-cta {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: #1947d1;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  background: #e8edfb;
  transition: background 160ms ease;
}
.lp-cart-empty-cta:hover { background: #d9e2f9; }

/* Line items */
.lp-cart-lines {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  overflow-y: auto;
  flex: 1;
}
.lp-cart-line {
  display: flex;
  gap: 14px;
  padding: 16px 28px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.05);
}
.lp-cart-line-thumb {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #e8edfb;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.lp-cart-line-thumb-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 30% 30%, rgba(25, 71, 209, 0.22), transparent 65%);
}
.lp-cart-line-thumb-code {
  position: relative;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #1947d1;
}
.lp-cart-line.tint-violet .lp-cart-line-thumb { background: #ece8fb; }
.lp-cart-line.tint-violet .lp-cart-line-thumb-glow {
  background: radial-gradient(circle at 30% 30%, rgba(123, 79, 209, 0.22), transparent 65%);
}
.lp-cart-line.tint-violet .lp-cart-line-thumb-code { color: #6442b3; }
.lp-cart-line.tint-amber .lp-cart-line-thumb { background: #fbf1e1; }
.lp-cart-line.tint-amber .lp-cart-line-thumb-code { color: #a25b09; }
.lp-cart-line.tint-magenta .lp-cart-line-thumb { background: #fae6f1; }
.lp-cart-line.tint-magenta .lp-cart-line-thumb-code { color: #a8326c; }

.lp-cart-line-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-cart-line-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.lp-cart-line-name {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #0a0a0a;
  line-height: 1.25;
}
.lp-cart-line-fmt {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: #6b6b6b;
  margin-top: 4px;
  letter-spacing: 0.08em;
}
.lp-cart-line-remove {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #6b6b6b;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.lp-cart-line-remove:hover {
  background: rgba(10, 10, 10, 0.06);
  color: #0a0a0a;
}
.lp-cart-line-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lp-cart-line-price {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #0a0a0a;
}

/* Quantity stepper */
.lp-cart-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(10, 10, 10, 0.12);
  border-radius: 999px;
  overflow: hidden;
}
.lp-cart-stepper button {
  width: 32px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #0a0a0a;
  font-size: 16px;
  cursor: pointer;
  transition: background 140ms ease;
}
.lp-cart-stepper button:hover { background: rgba(10, 10, 10, 0.05); }
.lp-cart-stepper span {
  min-width: 28px;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 500;
  color: #0a0a0a;
}

/* Footer */
.lp-cart-footer {
  border-top: 1px solid rgba(10, 10, 10, 0.06);
  padding: 22px 28px 28px;
  background: linear-gradient(180deg, rgba(232, 237, 251, 0.0), rgba(232, 237, 251, 0.4));
}
.lp-cart-totals {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 14px;
  color: #6b6b6b;
}
.lp-cart-totals-amount {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #0a0a0a;
}
.lp-cart-shipping-note {
  font-size: 11.5px;
  color: #6b6b6b;
  margin-top: 4px;
}
.lp-cart-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.lp-cart-checkout {
  flex: 1;
  text-align: center;
  background: #1947d1;
  color: #ffffff;
  padding: 14px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}
.lp-cart-checkout:hover {
  background: #143cb8;
  transform: translateY(-1px);
}
.lp-cart-clear {
  background: transparent;
  border: 1px solid rgba(10, 10, 10, 0.12);
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 13px;
  color: #6b6b6b;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.lp-cart-clear:hover {
  border-color: rgba(10, 10, 10, 0.25);
  color: #0a0a0a;
}

@media (max-width: 520px) {
  .lp-cart-panel { width: 100vw; }
  .lp-cart-header { padding: 22px 20px 16px; }
  .lp-cart-line { padding: 14px 20px; }
  .lp-cart-footer { padding: 18px 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-cart-panel,
  .lp-cart-backdrop {
    transition: none;
  }
}
/* ─────────────────────────────────────────────────────────────────────
   Longeva Peptides — Homepage V2 sections
   White/blue, glass, premium pharma. All sections share these tokens.
   ───────────────────────────────────────────────────────────────────── */

/* ── Global selection color ── */
::-moz-selection {
  background: rgba(25,71,209,0.18);
  color: #0A0A0A;
}
::selection {
  background: rgba(25,71,209,0.18);
  color: #0A0A0A;
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(25,71,209,0.25);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(25,71,209,0.5); }

:root {
  --v2-ink:        #0A0A0A;
  --v2-ink-soft:   #5A6478;
  --v2-blue:       #1947D1;
  --v2-blue-12:    rgba(25, 71, 209, 0.12);
  --v2-blue-16:    rgba(25, 71, 209, 0.16);
  --v2-blue-22:    rgba(25, 71, 209, 0.22);
  --v2-blue-32:    rgba(25, 71, 209, 0.32);
  --v2-cyan:       #7FAAFF; /* light cobalt — antes cyan #7FE7FF (off-brand) */
  --v2-bg-top:     #f7faff;
  --v2-bg-mid:     #eaf1fb;
  --v2-bg-bot:     #d8e6fa;
  --v2-glass:      rgba(255, 255, 255, 0.66);
  --v2-glass-hi:   rgba(255, 255, 255, 0.82);
  --v2-glass-bd:   rgba(25, 71, 209, 0.16);
  --v2-ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --v2-shadow-sm:  0 6px 18px rgba(25, 71, 209, 0.08);
  --v2-shadow-md:  0 18px 42px rgba(25, 71, 209, 0.14);
  --v2-shadow-lg:  0 32px 72px rgba(25, 71, 209, 0.18);
}

/* Section heads shared across V2 sections */
.v2-eyebrow {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(25, 71, 209, 0.78);
  margin-bottom: 14px;
}
.v2-section-head {
  max-width: 900px;
  margin: 0 auto 56px;
  text-align: center;
  padding: 0 24px;
}
.v2-section-headline {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--v2-ink);
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: 1.02;
  margin: 0 0 16px;
}
.v2-section-headline em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: var(--v2-blue);
  font-weight: 500;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #0F2E8A 0%, #1947D1 48%, #4A6FE3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.06em; /* respiro para la itálica al clipear */
}
.v2-section-sub {
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: var(--v2-ink-soft);
  max-width: 620px;
  margin: 0 auto;
}

/* Shared buttons */
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter Tight", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 220ms var(--v2-ease), box-shadow 220ms var(--v2-ease), background 220ms var(--v2-ease), border-color 220ms var(--v2-ease);
  cursor: pointer;
  border: 1px solid transparent;
}
.v2-btn--primary {
  background: linear-gradient(180deg, #2E5BE0 0%, #1947D1 55%, #1436A9 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 10px 28px rgba(25, 71, 209, 0.32);
}
.v2-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(25, 71, 209, 0.28); }
.v2-btn--ghost {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--v2-glass-bd);
  color: var(--v2-blue);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.v2-btn--ghost:hover {
  background: #fff;
  border-color: rgba(25, 71, 209, 0.36);
  transform: translateY(-2px);
}
.v2-link-tertiary {
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 200ms var(--v2-ease);
  background: transparent;
  border-left: 0; border-top: 0; border-right: 0;
  cursor: pointer;
}
.v2-link-tertiary:hover { border-bottom-color: var(--v2-blue); }

/* ════════════════════════════════════════════════════════════════════
   1. LIVING COMPOUND HERO
   ════════════════════════════════════════════════════════════════════ */
.v2-living {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(64px, 8vh, 112px) clamp(20px, 4vw, 48px) clamp(96px, 12vh, 144px);
  background: linear-gradient(180deg, var(--v2-bg-top) 0%, var(--v2-bg-mid) 70%, var(--v2-bg-bot) 100%);
}
.v2-living__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  z-index: 2;
}

/* Drawing data line */
.v2-living__dataline {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(25, 71, 209, 0.35) 50%, transparent 100%);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 1;
  pointer-events: none;
}
.v2-living.is-visible .v2-living__dataline {
  animation: v2-line-draw 1400ms var(--v2-ease) forwards;
}
@keyframes v2-line-draw {
  to { transform: scaleX(1); }
}

/* Copy column */
.v2-living__copy { max-width: 540px; }
.v2-living__headline {
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  letter-spacing: -0.045em;
  color: var(--v2-ink);
  font-size: clamp(40px, 4.8vw, 72px);
  line-height: 0.98;
  margin: 0 0 18px;
}
.v2-living__headline em {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: var(--v2-blue);
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 500;
  margin-top: 4px;
  letter-spacing: -0.02em;
}
.v2-living__sub {
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  color: var(--v2-ink-soft);
  margin: 0 0 28px;
  max-width: 460px;
}
.v2-living__specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--v2-glass);
  border: 1px solid var(--v2-glass-bd);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--v2-shadow-sm);
}
.v2-living__spec {
  opacity: 0; transform: translateY(8px);
  transition: opacity 600ms var(--v2-ease), transform 600ms var(--v2-ease);
}
.v2-living.is-visible .v2-living__spec { opacity: 1; transform: translateY(0); }
.v2-living__spec-k {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(25, 71, 209, 0.7);
  margin-bottom: 4px;
}
.v2-living__spec-v {
  font-family: "Inter Tight", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--v2-ink);
  letter-spacing: -0.01em;
}
.v2-living__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.v2-living__tertiary {
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  color: var(--v2-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.v2-living__tertiary:hover { border-bottom-color: var(--v2-blue); }

/* Stage column */
.v2-living__stage {
  position: relative;
  height: clamp(440px, 60vh, 620px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.v2-living__molecule {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(280px, 36vw, 520px);
  height: clamp(280px, 36vw, 520px);
  transform: translate(-50%, -50%);
  z-index: 1;
  animation: v2-molecule-spin 40s linear infinite;
  opacity: 0;
  transition: opacity 1200ms var(--v2-ease);
}
.v2-living.is-visible .v2-living__molecule { opacity: 1; }
@keyframes v2-molecule-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.v2-living__cylinder {
  position: relative;
  width: clamp(220px, 22vw, 320px);
  height: clamp(380px, 52vh, 540px);
  border-radius: 200px / 60px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.66) 0%,
    rgba(234, 241, 251, 0.42) 50%,
    rgba(255, 255, 255, 0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 0 60px rgba(127, 170, 255, 0.18),
    var(--v2-shadow-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.v2-living__cylinder::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.55) 0%,
    transparent 16%);
  pointer-events: none;
}
.v2-living__vial {
  position: relative;
  z-index: 10;
  width: 78%;
  height: auto;
  max-height: 86%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center bottom;
     object-position: center bottom;
  animation: v2-vial-breathe 4000ms ease-in-out infinite;
}
@keyframes v2-vial-breathe {
  0%, 100% { transform: scale(1.000); }
  50%      { transform: scale(1.012); }
}
.v2-living__podium {
  position: absolute;
  left: 50%;
  bottom: -8%;
  transform: translateX(-50%);
  width: 150%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(127, 170, 255, 0.55) 0%,
    rgba(25, 71, 209, 0.18) 35%,
    transparent 70%);
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}
.v2-living__picker {
  position: absolute;
  left: 50%;
  bottom: -56px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 30;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 92vw;
}
.v2-living__pick {
  font-family: "Inter Tight", sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--v2-glass-bd);
  background: var(--v2-glass);
  color: var(--v2-ink-soft);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 200ms var(--v2-ease), background-color 200ms var(--v2-ease), border-color 200ms var(--v2-ease), transform 200ms var(--v2-ease), box-shadow 200ms var(--v2-ease), opacity 200ms var(--v2-ease);
}
.v2-living__pick.is-active {
  background: linear-gradient(180deg, #2E5BE0 0%, #1947D1 55%, #1436A9 100%);
  border-color: var(--v2-blue);
  color: #fff;
  box-shadow: 0 8px 20px rgba(25, 71, 209, 0.3);
}
.v2-living__pick:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.92);
  color: var(--v2-blue);
  border-color: rgba(25, 71, 209, 0.32);
}

/* ════════════════════════════════════════════════════════════════════
   2. TU PROTOCOLO  (shop by objective)
   ════════════════════════════════════════════════════════════════════ */
.v2-protocolo {
  position: relative;
  padding: clamp(80px, 10vh, 132px) clamp(20px, 4vw, 48px);
  background:
    linear-gradient(180deg,
      rgba(215,228,255,0.55) 0%,
      rgba(240,245,255,0.65) 18%,
      rgba(255,255,255,1) 52%
    );
  isolation: isolate;
}
/* Subtle noise texture overlay — soft-light blend makes grain visible on light bg */
.v2-protocolo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
.v2-protocolo__grid,
.v2-section-head,
.v2-protocolo__after {
  position: relative;
  z-index: 1;
}
.v2-protocolo__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}
/* ── V3 Protocol Tiles ── */
.v2-tile {
  --tile-accent: #1947D1;
  --tile-accent-bg: rgba(25,71,209,0.07);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 26px 26px 22px 34px; /* extra left padding for accent bar */
  border-radius: 20px;
  background: linear-gradient(155deg, var(--tile-accent-bg) 0%, rgba(255,255,255,0) 50%),
              rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-decoration: none;
  color: var(--v2-ink);
  overflow: hidden;
  opacity: 0;
  transform: translateY(26px) scale(0.97);
  will-change: opacity, transform, box-shadow;
  transition: opacity 640ms var(--v2-ease),
              transform 640ms var(--v2-ease),
              box-shadow 360ms cubic-bezier(0.22,1,0.36,1),
              border-color 260ms ease;
  cursor: pointer;
}
/* Shimmer sweep on hover — premium feel */
.v2-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 30%,
    rgba(255,255,255,0.52) 50%,
    transparent 70%
  );
  transform: translateX(-115%) skewX(-10deg);
  pointer-events: none;
  z-index: 20;
  transition: transform 0ms;
}
.v2-tile:hover::after {
  transform: translateX(115%) skewX(-10deg);
  transition: transform 700ms var(--v2-ease);
}
.v2-protocolo.is-visible .v2-tile {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Stagger is applied via inline transitionDelay in JSX (i * 55ms) */
.v2-tile:hover {
  transform: translateY(-8px) scale(1.018);
  box-shadow:
    0 22px 52px rgba(0,0,0,0.10),
    0 0 0 1.5px var(--tile-accent),
    0 0 60px -18px var(--tile-accent);
  border-color: var(--tile-accent);
  background: linear-gradient(155deg, var(--tile-accent-bg) 0%, rgba(255,255,255,0) 45%),
              rgba(255,255,255,0.98);
}

/* Colored left accent bar */
.v2-tile__bar {
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  background: var(--tile-accent);
  border-radius: 0 3px 3px 0;
  transition: top 320ms ease, bottom 320ms ease;
}
.v2-tile:hover .v2-tile__bar {
  top: 0;
  bottom: 0;
  border-radius: 0;
}

/* Top meta row */
.v2-tile__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.v2-tile__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.38);
}
.v2-tile__ruo {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tile-accent);
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 6px; /* Ciclo 9: escala tokens */
  padding: 2px 7px;
  opacity: 0.75;
}

/* Icon wrap — large rounded container with protocol accent bg */
.v2-tile__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--tile-accent-bg);
  color: var(--tile-accent);
  margin-bottom: 20px;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.04);
  will-change: transform, box-shadow;
  transition: transform 280ms cubic-bezier(0.22,1,0.36,1),
              box-shadow 280ms cubic-bezier(0.22,1,0.36,1),
              background 280ms ease;
}
.v2-tile:hover .v2-tile__icon-wrap {
  transform: scale(1.1) rotate(5deg);
  background: var(--tile-accent-bg);
  /* fallback for browsers without color-mix */
  box-shadow: 0 6px 22px rgba(0,0,0,0.12);
  /* modern browsers */
  box-shadow: 0 6px 22px color-mix(in srgb, var(--tile-accent) 28%, transparent);
}

/* Protocol name */
.v2-tile__name {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(21px, 1.9vw, 27px);
  color: var(--v2-ink);
  margin: 0 0 10px 0;
  line-height: 1.08;
  letter-spacing: -0.018em;
  transition: color 240ms ease;
}
.v2-tile:hover .v2-tile__name {
  color: var(--tile-accent);
}

/* Description */
.v2-tile__desc {
  font-family: "Inter Tight", sans-serif;
  font-size: 13.5px;
  color: rgba(10,10,10,0.62);
  line-height: 1.55;
  margin: 0 0 10px;
}

/* Research note — hidden by default, reveals on hover via max-height */
.v2-tile__research {
  font-family: "Inter Tight", sans-serif;
  font-size: 11.5px;
  color: rgba(10,10,10,0.4);
  line-height: 1.55;
  margin: 0;
  padding-top: 0;
  border-top: 1px solid transparent;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 380ms var(--v2-ease),
              opacity 320ms ease,
              padding-top 320ms ease,
              margin-bottom 320ms ease,
              border-color 280ms ease;
  margin-bottom: 0;
}
.v2-tile:hover .v2-tile__research {
  max-height: 80px;
  opacity: 1;
  padding-top: 8px;
  margin-bottom: 12px;
  border-color: rgba(0,0,0,0.06);
}

/* Peptide chips — always visible */
.v2-tile__peptides {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  margin-bottom: 18px;
}
.v2-tile__pep {
  font-family: "Inter Tight", sans-serif;
  font-size: 11px;
  padding: 4px 11px;
  border-radius: 99px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.1);
  color: var(--tile-accent);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 240ms ease, border-color 240ms ease;
}
.v2-tile:hover .v2-tile__pep {
  background: rgba(255,255,255,1);
  border-color: var(--tile-accent);
}

/* CTA span styled as a button */
.v2-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Inter Tight", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tile-accent);
  padding: 9px 16px;
  background: var(--tile-accent-bg);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 10px; /* Ciclo 9: escala tokens */
  align-self: flex-start;
  margin-top: auto;
  transition:
    background 280ms cubic-bezier(0.22,1,0.36,1),
    color 200ms ease,
    border-color 280ms ease,
    gap 280ms cubic-bezier(0.22,1,0.36,1),
    box-shadow 280ms ease;
  letter-spacing: 0.005em;
}
.v2-tile:hover .v2-tile__cta {
  background: var(--tile-accent);
  color: #fff;
  border-color: var(--tile-accent);
  gap: 12px;
  /* fallback for browsers without color-mix */
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--tile-accent) 35%, transparent);
}

.v2-protocolo__after {
  text-align: center;
  margin-top: 44px;
}

/* ════════════════════════════════════════════════════════════════════
   3. BIBLIOTECA (premium catalog)
   ════════════════════════════════════════════════════════════════════ */
.v2-cat {
  position: relative;
  padding: clamp(80px, 10vh, 132px) clamp(20px, 4vw, 48px);
  background: linear-gradient(180deg, var(--v2-bg-top) 0%, #fff 100%);
}
.v2-cat__head { text-align: left; max-width: 1280px; }
.v2-cat__layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  max-width: 1320px;
  margin: 0 auto;
  align-items: start;
}
.v2-cat__rail {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px;
  border-radius: 20px;
  background: var(--v2-glass);
  border: 1px solid var(--v2-glass-bd);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.v2-cat__rail-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(25, 71, 209, 0.7);
  margin-bottom: 10px;
}
.v2-cat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.v2-cat__chip {
  font-family: "Inter Tight", sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--v2-glass-bd);
  color: var(--v2-ink-soft);
  cursor: pointer;
  transition: color 200ms var(--v2-ease), background-color 200ms var(--v2-ease), border-color 200ms var(--v2-ease), transform 200ms var(--v2-ease), box-shadow 200ms var(--v2-ease), opacity 200ms var(--v2-ease);
}
.v2-cat__chip.is-active {
  background: linear-gradient(180deg, #2E5BE0 0%, #1947D1 55%, #1436A9 100%);
  border-color: var(--v2-blue);
  color: #fff;
}
.v2-cat__chip:hover:not(.is-active):not(:disabled) {
  background: #fff;
  color: var(--v2-blue);
  border-color: rgba(25, 71, 209, 0.32);
}
.v2-cat__chip:disabled { cursor: default; }

.v2-cat__row-wrap { min-width: 0; }
.v2-cat__row-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.v2-cat__progress {
  position: relative;
  flex: 1;
  height: 3px;
  background: rgba(25, 71, 209, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.v2-cat__progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--v2-blue), var(--v2-cyan));
  transition: width 200ms linear;
}
.v2-cat__row-arrows {
  display: flex;
  gap: 8px;
}
.v2-cat__arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--v2-glass-bd);
  color: var(--v2-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 200ms var(--v2-ease), background-color 200ms var(--v2-ease), border-color 200ms var(--v2-ease), transform 200ms var(--v2-ease), box-shadow 200ms var(--v2-ease), opacity 200ms var(--v2-ease);
  backdrop-filter: blur(8px);
}
.v2-cat__arrow:hover {
  background: #fff;
  transform: scale(1.06);
  box-shadow: 0 8px 20px rgba(25, 71, 209, 0.18);
}
.v2-cat__row {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 28px;
  scrollbar-width: thin;
  scrollbar-color: rgba(25, 71, 209, 0.3) transparent;
}
.v2-cat__row::-webkit-scrollbar { height: 6px; }
.v2-cat__row::-webkit-scrollbar-thumb { background: rgba(25, 71, 209, 0.3); border-radius: 3px; }
.v2-cat-card {
  position: relative;
  flex: 0 0 clamp(280px, 26vw, 380px);
  height: clamp(420px, 50vh, 520px);
  padding: 24px 24px 22px;
  border-radius: 22px;
  background: var(--v2-glass);
  border: 1px solid var(--v2-glass-bd);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  transition: color 400ms var(--v2-ease), background-color 400ms var(--v2-ease), border-color 400ms var(--v2-ease), transform 400ms var(--v2-ease), box-shadow 400ms var(--v2-ease), opacity 400ms var(--v2-ease);
  overflow: hidden;
}
.v2-cat-card:hover {
  background: var(--v2-glass-hi);
  border-color: rgba(25, 71, 209, 0.42);
  transform: translateY(-12px);
  box-shadow:
    var(--v2-shadow-md),
    0 0 0 1px rgba(25, 71, 209, 0.08),
    0 26px 60px -24px rgba(25, 71, 209, 0.32);
}
/* CYCLE-C4 — casilla premium: acento superior + shine (mismo lenguaje que /tienda) */
.v2-cat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #1947D1, #7FAAFF);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 480ms var(--v2-ease);
  z-index: 3;
  pointer-events: none;
}
.v2-cat-card:hover::before { transform: scaleX(1); }
.v2-cat-card::after {
  content: '';
  position: absolute;
  top: -20%; bottom: -20%;
  left: -45%;
  width: 38%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.40) 50%, transparent 100%);
  transform: translateX(-120%) skewX(-16deg);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.v2-cat-card:hover::after {
  opacity: 1;
  animation: lp-shine-sweep-v2 850ms cubic-bezier(0.4, 0, 0.2, 1) 60ms both;
}
@keyframes lp-shine-sweep-v2 {
  from { transform: translateX(-120%) skewX(-16deg); }
  to   { transform: translateX(480%) skewX(-16deg); }
}
@media (prefers-reduced-motion: reduce) {
  .v2-cat-card::before,
  .v2-cat-card::after { transition: none; animation: none; }
}
.v2-cat-card__dose {
  position: absolute;
  top: 18px; right: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(25, 71, 209, 0.08);
  color: var(--v2-blue);
}
.v2-cat-card__stage {
  position: relative;
  flex: 1;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 18px;
}
.v2-cat-card__arcs {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  width: 110%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(127, 170, 255, 0.4) 0%,
    transparent 65%);
  filter: blur(6px);
  z-index: 0;
}
.v2-cat-card__podium {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  width: 70%;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(25, 71, 209, 0.32) 0%, transparent 70%);
  filter: blur(2px);
  z-index: 1;
}
.v2-cat-card__vial {
  position: relative;
  z-index: 2;
  width: 62%;
  height: 84%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center bottom;
     object-position: center bottom;
  animation: v2-vial-breathe 4500ms ease-in-out infinite;
  filter:
    drop-shadow(0 18px 28px rgba(25, 71, 209, 0.22))
    drop-shadow(0 32px 60px rgba(25, 71, 209, 0.08));
}
.v2-cat-card__name {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--v2-ink);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.v2-cat-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter Tight", sans-serif;
  font-size: 12px;
  color: var(--v2-ink-soft);
  margin-bottom: 14px;
}
.v2-cat-card__sep { color: rgba(25, 71, 209, 0.4); }
.v2-cat-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.v2-cat-card__price {
  font-family: "Inter Tight", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--v2-ink);
  font-variant-numeric: tabular-nums;
}
.v2-cat-card__add {
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--v2-blue);
  color: var(--v2-blue);
  text-decoration: none;
  transition: color 200ms var(--v2-ease), background-color 200ms var(--v2-ease), border-color 200ms var(--v2-ease), transform 200ms var(--v2-ease), box-shadow 200ms var(--v2-ease), opacity 200ms var(--v2-ease);
}
.v2-cat-card__add:hover {
  background: linear-gradient(180deg, #2E5BE0 0%, #1947D1 55%, #1436A9 100%);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════════
   4. SPOTLIGHT (featured product)
   ════════════════════════════════════════════════════════════════════ */
.v2-spot {
  position: relative;
  padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 48px);
  background: linear-gradient(180deg, #fff 0%, var(--v2-bg-mid) 60%, var(--v2-bg-bot) 100%);
  overflow: hidden;
  isolation: isolate;
}
.v2-spot__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.v2-spot__glow {
  position: absolute;
  left: 50%; top: 55%;
  transform: translate(-50%, -50%);
  width: clamp(400px, 60vw, 800px);
  height: clamp(400px, 60vw, 800px);
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(127, 170, 255, 0.4) 0%,
    rgba(25, 71, 209, 0.08) 40%,
    transparent 70%);
  filter: blur(40px);
}
.v2-spot__head { position: relative; z-index: 2; }
.v2-spot__sub {
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(16px, 1.4vw, 22px);
  color: var(--v2-ink-soft);
  margin: 0;
}
.v2-spot__stage {
  position: relative;
  height: clamp(380px, 56vh, 540px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 56px auto 64px;
  max-width: 1280px;
  z-index: 2;
}
.v2-spot__hero-name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(72px, 12vw, 180px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--v2-ink);
  margin: 0;
  z-index: 1;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.v2-spot__hero-name em {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.9) 0%, rgba(25, 71, 209, 0.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.v2-spot__vial {
  position: relative;
  z-index: 2;
  height: 92%;
  width: auto;
  max-width: 36%;
  -o-object-fit: contain;
     object-fit: contain;
  filter:
    drop-shadow(0 28px 50px rgba(25, 71, 209, 0.28))
    drop-shadow(0 56px 90px rgba(25, 71, 209, 0.12));
  transition: transform 800ms var(--v2-ease);
}
.v2-spot__benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto 56px;
  position: relative;
  z-index: 2;
}
.v2-spot__benefit {
  padding: 28px 24px;
  border-radius: 20px;
  background: var(--v2-glass);
  border: 1px solid var(--v2-glass-bd);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--v2-ease), transform 700ms var(--v2-ease);
}
.v2-spot__benefit.is-in { opacity: 1; transform: translateY(0); }
.v2-spot__metric {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 3.8vw, 48px);
  color: var(--v2-blue);
  letter-spacing: -0.03em;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.v2-spot__metric-k {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(25, 71, 209, 0.75);
  margin-bottom: 8px;
}
.v2-spot__metric-note {
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  color: var(--v2-ink-soft);
  line-height: 1.5;
}
.v2-spot__quote {
  max-width: 760px;
  margin: 0 auto 48px;
  padding: 0 24px;
  text-align: center;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.4;
  color: var(--v2-ink);
  letter-spacing: -0.015em;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--v2-ease), transform 700ms var(--v2-ease);
}
.v2-spot__quote.is-in { opacity: 1; transform: translateY(0); }
.v2-spot__quote cite {
  display: block;
  margin-top: 14px;
  font-family: "JetBrains Mono", monospace;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--v2-blue);
}
.v2-spot__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--v2-ease), transform 700ms var(--v2-ease);
}
.v2-spot__cta.is-in { opacity: 1; transform: translateY(0); }
.v2-spot__cta > a:first-of-type,
.v2-spot__cta > a:nth-of-type(2) {
  margin-bottom: 0;
}
.v2-spot__cta > a { min-width: 220px; }
.v2-spot__next {
  font-family: "Inter Tight", sans-serif;
  font-size: 12px;
  color: var(--v2-ink-soft);
  margin-top: 10px;
}
.v2-spot__next em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  color: var(--v2-blue);
  font-weight: 500;
}
/* Stack CTAs side-by-side on wider screens */
@media (min-width: 720px) {
  .v2-spot__cta {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .v2-spot__next { flex-basis: 100%; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════
   5. ESTÁNDARES (trust / QA)
   ════════════════════════════════════════════════════════════════════ */
.v2-trust {
  position: relative;
  padding: clamp(80px, 10vh, 132px) clamp(20px, 4vw, 48px);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.v2-trust__layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
  align-items: start;
}
.v2-trust__certs {
  list-style: none;
  padding: 0;
  margin: 0;
}
.v2-trust__cert {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--v2-blue-12);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 600ms var(--v2-ease), transform 600ms var(--v2-ease);
}
.v2-trust__cert:last-child { border-bottom: 1px solid var(--v2-blue-12); }
.v2-trust.is-visible .v2-trust__cert { opacity: 1; transform: translateX(0); }
.v2-trust__cert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(25, 71, 209, 0.06);
  color: var(--v2-blue);
}
.v2-trust__cert-name {
  font-family: "Inter Tight", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--v2-ink);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.v2-trust__cert-proof {
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  color: var(--v2-ink-soft);
  line-height: 1.5;
}

/* COA card */
.v2-trust__coa {
  position: relative;
  padding: 28px;
  border-radius: 20px;
  background: var(--v2-glass-hi);
  border: 1px solid var(--v2-glass-bd);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--v2-shadow-md);
  overflow: hidden;
  transition: transform 320ms var(--v2-ease), box-shadow 320ms var(--v2-ease);
}
.v2-trust__coa:hover {
  transform: translateY(-4px);
  box-shadow: var(--v2-shadow-lg);
}
.v2-trust__coa-scan {
  position: absolute;
  left: 0; right: 0;
  top: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--v2-cyan), var(--v2-blue), transparent);
  filter: blur(1px);
  z-index: 5;
  pointer-events: none;
  animation: v2-coa-scan 8000ms linear infinite;
}
@keyframes v2-coa-scan {
  0%   { top: -2px; opacity: 0; }
  5%   { opacity: 1; }
  85%  { opacity: 1; top: calc(100% - 2px); }
  90%  { opacity: 0; }
  100% { top: -2px; opacity: 0; }
}
.v2-trust__coa-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--v2-blue-16);
}
.v2-trust__coa-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(25, 71, 209, 0.75);
  margin-bottom: 4px;
}
.v2-trust__coa-title {
  font-family: "Inter Tight", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--v2-ink);
  letter-spacing: -0.01em;
}
.v2-trust__coa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 22px;
}
.v2-trust__coa-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v2-trust__coa-grid dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(25, 71, 209, 0.6);
  margin: 0;
}
.v2-trust__coa-grid dd {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--v2-ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.v2-trust__coa-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px dashed var(--v2-blue-16);
}
.v2-trust__coa-status {
  font-family: "Inter Tight", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #0F8F4D;
  letter-spacing: 0.02em;
}
.v2-trust__coa-dl {
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 200ms var(--v2-ease);
}
.v2-trust__coa-dl:hover { border-bottom-color: var(--v2-blue); }
.v2-trust__after {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--v2-blue-12);
}

/* ════════════════════════════════════════════════════════════════════
   6. PEPTIDE QUIZ
   ════════════════════════════════════════════════════════════════════ */
.v2-quiz {
  position: relative;
  padding: clamp(80px, 10vh, 132px) clamp(20px, 4vw, 48px);
  background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(247,250,255,0.72) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.v2-quiz::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 170, 255, 0.18), transparent 60%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.v2-quiz__card-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.v2-quiz__card {
  position: relative;
  width: 100%;
  max-width: 760px;
  min-height: 520px;
  padding: 40px 40px 30px;
  border-radius: 28px;
  background: var(--v2-glass-hi);
  border: 1px solid var(--v2-glass-bd);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--v2-shadow-lg);
  display: flex;
  flex-direction: column;
}
.v2-quiz__progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  margin-bottom: 30px;
}
.v2-quiz__steps {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 360px;
}
.v2-quiz__seg {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: rgba(25, 71, 209, 0.14);
  transition: background-color 460ms var(--v2-ease), box-shadow 460ms var(--v2-ease), transform 460ms var(--v2-ease);
}
.v2-quiz__seg.is-on {
  background: var(--v2-blue);
}
.v2-quiz__seg.is-cur {
  background: linear-gradient(90deg, var(--v2-blue), var(--v2-cyan));
  box-shadow: 0 0 0 3px rgba(25, 71, 209, 0.12);
}
.v2-quiz__steplabel {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(25, 71, 209, 0.7);
}
.v2-quiz__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.v2-quiz__body--fwd { animation: v2-quiz-slide-fwd 420ms var(--v2-ease) both; }
.v2-quiz__body--back { animation: v2-quiz-slide-back 420ms var(--v2-ease) both; }
@keyframes v2-quiz-slide-fwd {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes v2-quiz-slide-back {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.v2-quiz__ask {
  margin-bottom: 26px;
  max-width: 560px;
}
.v2-quiz__q {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 34px);
  color: var(--v2-ink);
  letter-spacing: -0.02em;
  line-height: 1.16;
  margin: 0 0 10px;
}
.v2-quiz__help {
  font-family: "Inter Tight", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--v2-ink-soft);
  margin: 0;
}
.v2-quiz__options {
  display: grid;
  gap: 10px;
  width: 100%;
  margin: 0 auto;
}
.v2-quiz__options--stack {
  grid-template-columns: 1fr;
  max-width: 460px;
}
.v2-quiz__options--grid {
  grid-template-columns: 1fr 1fr;
  max-width: 580px;
}
.v2-quiz__opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 66px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--v2-glass-bd);
  cursor: pointer;
  text-align: left;
  transition: background-color 220ms var(--v2-ease), border-color 220ms var(--v2-ease), transform 220ms var(--v2-ease), box-shadow 220ms var(--v2-ease);
}
.v2-quiz__opt:hover {
  border-color: var(--v2-blue);
  transform: translateY(-2px);
  box-shadow: var(--v2-shadow-sm);
}
.v2-quiz__opt-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(25, 71, 209, 0.08);
  color: var(--v2-blue);
  transition: background-color 220ms var(--v2-ease), color 220ms var(--v2-ease);
}
.v2-quiz__opt-ic svg { width: 21px; height: 21px; }
.v2-quiz__opt-tx {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.v2-quiz__opt-label {
  font-family: "Inter Tight", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--v2-ink);
  line-height: 1.2;
  transition: color 220ms var(--v2-ease);
}
.v2-quiz__opt-desc {
  font-family: "Inter Tight", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--v2-ink-soft);
  line-height: 1.35;
  transition: color 220ms var(--v2-ease);
}
.v2-quiz__opt-check {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--v2-blue-22);
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 220ms var(--v2-ease), transform 220ms var(--v2-ease), background-color 220ms var(--v2-ease), border-color 220ms var(--v2-ease);
}
.v2-quiz__opt-check svg { width: 13px; height: 13px; }
.v2-quiz__opt.is-picked {
  background: linear-gradient(180deg, #2E5BE0 0%, #1947D1 55%, #1436A9 100%);
  border-color: var(--v2-blue);
  box-shadow: 0 12px 28px rgba(25, 71, 209, 0.24);
}
.v2-quiz__opt.is-picked .v2-quiz__opt-ic {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.v2-quiz__opt.is-picked .v2-quiz__opt-label { color: #fff; }
.v2-quiz__opt.is-picked .v2-quiz__opt-desc { color: rgba(255, 255, 255, 0.82); }
.v2-quiz__opt.is-picked .v2-quiz__opt-check {
  opacity: 1;
  transform: scale(1);
  background: #fff;
  border-color: #fff;
  color: var(--v2-blue);
}
.v2-quiz__back {
  align-self: flex-start;
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-blue);
  background: transparent;
  border: 0;
  padding: 8px 0;
  margin-top: 16px;
  cursor: pointer;
  transition: opacity 200ms var(--v2-ease);
}
.v2-quiz__back:hover { opacity: 0.7; }

/* Result state */
.v2-quiz__result {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  text-align: left;
}
.v2-quiz__result-top {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 30px;
  align-items: center;
}
.v2-quiz__mini-stage {
  position: relative;
  width: 200px;
  height: 216px;
  margin: 0 auto;
}
.v2-quiz__match {
  position: absolute;
  top: 2px;
  right: -4px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--v2-glass-bd);
  box-shadow: 0 10px 26px rgba(25, 71, 209, 0.2);
}
.v2-quiz__match-num {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(160deg, var(--v2-blue), #3a6bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.v2-quiz__match-word {
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
  margin-top: 3px;
}
.v2-quiz__mini-arcs {
  position: absolute;
  left: 50%; bottom: 20%;
  transform: translateX(-50%);
  width: 110%; height: 70%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(127, 170, 255, 0.55) 0%,
    transparent 65%);
  filter: blur(8px);
}
.v2-quiz__mini-podium {
  position: absolute;
  left: 50%; bottom: 12%;
  transform: translateX(-50%);
  width: 70%; height: 8px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(25, 71, 209, 0.35), transparent 70%);
  filter: blur(2px);
}
.v2-quiz__mini-vial {
  position: relative;
  width: 100%; height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center bottom;
     object-position: center bottom;
  filter:
    drop-shadow(0 18px 28px rgba(25, 71, 209, 0.24))
    drop-shadow(0 32px 50px rgba(25, 71, 209, 0.12));
  animation: v2-vial-breathe 4500ms ease-in-out infinite;
}
.v2-quiz__result-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.v2-quiz__result-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(25, 71, 209, 0.75);
  margin-bottom: 6px;
}
.v2-quiz__result-name {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 36px);
  color: var(--v2-ink);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.v2-quiz__result-name em {
  background: linear-gradient(180deg, var(--v2-ink), var(--v2-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.v2-quiz__result-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
  margin-bottom: 14px;
}
.v2-quiz__result-meta span:not(:last-child)::after {
  content: '·';
  margin: 0 10px;
  color: var(--v2-blue-32);
}
.v2-quiz__result-rationale {
  font-family: "Inter Tight", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--v2-ink-soft);
  margin: 0 0 16px;
}
.v2-quiz__profile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.v2-quiz__profile-chip {
  font-family: "Inter Tight", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--v2-blue);
  background: rgba(25, 71, 209, 0.07);
  border: 1px solid var(--v2-blue-12);
  padding: 5px 12px;
  border-radius: 99px;
}
.v2-quiz__cta { align-self: flex-start; min-width: 220px; }
.v2-quiz__complement {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--v2-blue-12);
}
.v2-quiz__complement-head {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(25, 71, 209, 0.7);
  margin-bottom: 12px;
}
.v2-quiz__complement-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--v2-glass-bd);
  text-decoration: none;
  transition: transform 220ms var(--v2-ease), border-color 220ms var(--v2-ease), box-shadow 220ms var(--v2-ease);
}
.v2-quiz__complement-card:hover {
  transform: translateY(-2px);
  border-color: var(--v2-blue);
  box-shadow: var(--v2-shadow-sm);
}
.v2-quiz__complement-img {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(25, 71, 209, 0.18));
}
.v2-quiz__complement-tx {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.v2-quiz__complement-name {
  font-family: "Inter Tight", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--v2-ink);
  line-height: 1.2;
}
.v2-quiz__complement-why {
  font-family: "Inter Tight", sans-serif;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--v2-ink-soft);
}
.v2-quiz__complement-add {
  flex: 0 0 auto;
  font-family: "Inter Tight", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--v2-blue);
  white-space: nowrap;
}
.v2-quiz__result-foot {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 760px) {
  .v2-quiz__result-top { grid-template-columns: 1fr; gap: 10px; }
  .v2-quiz__result-info { align-items: center; text-align: center; }
  .v2-quiz__result-meta { justify-content: center; }
  .v2-quiz__profile { justify-content: center; }
  .v2-quiz__cta { align-self: center; }
  .v2-quiz__complement { text-align: left; }
}
@media (max-width: 480px) {
  .v2-quiz__card { padding: 28px 20px 24px; }
  .v2-quiz__options--grid { grid-template-columns: 1fr; max-width: 460px; }
  .v2-quiz__complement-card { gap: 12px; padding: 10px 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .v2-living__inner { grid-template-columns: 1fr; }
  .v2-living__stage { height: clamp(380px, 50vh, 480px); }
  .v2-cat__layout { grid-template-columns: 1fr; gap: 28px; }
  .v2-cat__rail { position: relative; top: 0; flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .v2-cat__rail-section { flex: 1; min-width: 180px; }
  .v2-trust__layout { grid-template-columns: 1fr; gap: 32px; }
  .v2-spot__hero-name { font-size: clamp(60px, 13vw, 110px); white-space: normal; line-height: 0.95; }
}
@media (max-width: 820px) {
  .v2-protocolo__grid { grid-template-columns: repeat(2, 1fr); }
  .v2-living__specs { grid-template-columns: repeat(2, 1fr); }
  .v2-spot__benefits { grid-template-columns: 1fr; max-width: 480px; }
  .v2-trust__after { flex-direction: column; gap: 16px; }
}
@media (max-width: 560px) {
  .v2-protocolo__grid { grid-template-columns: 1fr; }
  .v2-tile { padding: 22px 22px 18px 30px; }
  .v2-living__specs { grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 16px; }
  .v2-living__headline { font-size: clamp(34px, 9vw, 48px); }
  .v2-cat-card { flex: 0 0 84vw; height: 460px; }
  .v2-cat__rail { flex-direction: column; }
  .v2-spot__stage { height: clamp(320px, 52vh, 420px); }
  .v2-trust__coa-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   TRUST STRIP — solid blue bar between hero and content
   ════════════════════════════════════════════════════════════════════ */
@keyframes chip-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.trust-strip {
  background: linear-gradient(90deg, #1338B8 0%, #1947D1 40%, #2055E8 100%);
  padding: 24px clamp(20px, 4vw, 56px);
  position: relative;
  z-index: 2;
  overflow: hidden;
}
/* Subtle radial highlight on the strip */
.trust-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 200% at 50% -40%, rgba(255,255,255,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.trust-strip__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 20px);
  flex-wrap: wrap;
}
.trust-strip__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.15);
  cursor: default;
  will-change: transform, box-shadow;
  animation: chip-enter 500ms cubic-bezier(0.22,1,0.36,1) both;
  transition:
    box-shadow 300ms cubic-bezier(0.22,1,0.36,1),
    background 300ms cubic-bezier(0.22,1,0.36,1),
    transform 300ms cubic-bezier(0.22,1,0.36,1),
    border-color 300ms ease;
  white-space: nowrap;
}
.trust-strip__chip:nth-child(1) { animation-delay: 60ms; }
.trust-strip__chip:nth-child(2) { animation-delay: 120ms; }
.trust-strip__chip:nth-child(3) { animation-delay: 180ms; }
.trust-strip__chip:nth-child(4) { animation-delay: 240ms; }
.trust-strip__chip:nth-child(5) { animation-delay: 300ms; }
.trust-strip__chip:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22), 0 4px 16px rgba(0, 0, 0, 0.18); /* Ciclo 9: ring blanco sutil (antes #4C1D95 violeta — fuera de brand) */
  transform: translateY(-2px);
}
.trust-strip__chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.90);
  flex-shrink: 0;
  transition: transform 300ms cubic-bezier(0.22,1,0.36,1);
}
.trust-strip__chip:hover .trust-strip__chip-icon {
  transform: scale(1.12);
}
.trust-strip__chip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trust-strip__chip-label {
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.trust-strip__chip-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78); /* Ciclo 9: 0.55 → 0.78 — contraste legible sobre cobalt */
}
@media (max-width: 860px) {
  .trust-strip__inner { gap: 8px; }
  .trust-strip__chip  { padding: 8px 14px; }
  .trust-strip__chip-label { font-size: 12px; }
}
@media (max-width: 540px) {
  .trust-strip__inner { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
  .trust-strip__inner::-webkit-scrollbar { display: none; }
  .trust-strip { padding: 16px clamp(16px, 4vw, 24px); }
}

/* ════════════════════════════════════════════════════════════════════
   COMPLIANCE DISCLAIMER (footer/lower-area)
   ════════════════════════════════════════════════════════════════════ */
.v2-compliance {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--v2-blue-12);
  padding: 22px clamp(20px, 4vw, 48px);
}
.v2-compliance__inner {
  max-width: 1280px;
  margin: 0 auto;
  font-family: "Inter Tight", sans-serif;
  font-size: 11px;
  line-height: 1.55;
  color: var(--v2-ink-soft);
  text-align: center;
  letter-spacing: 0.01em;
}
.v2-compliance__inner strong {
  font-weight: 600;
  color: var(--v2-ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
  display: block;
  margin-bottom: 6px;
}

/* ════════════════════════════════════════════════════════════════════
   PERFORMANCE — content-visibility on below-fold V2 sections
   Skips layout/paint until the section nears the viewport.
   ════════════════════════════════════════════════════════════════════ */
.v2-cat,
.v2-spot,
.v2-trust,
.v2-quiz {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

/* Lighter backdrop blur on non-critical glass elements (was 14-18px) */
.v2-tile,
.v2-cat__rail,
.v2-cat-card,
.v2-spot__benefit {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ════════════════════════════════════════════════════════════════════
   REDUCED MOTION — kill all V2 animations
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .v2-living__dataline,
  .v2-living__molecule,
  .v2-living__vial,
  .v2-cat-card__vial,
  .v2-quiz__mini-vial,
  .v2-trust__coa-scan,
  .v2-quiz__body--fwd,
  .v2-quiz__body--back,
  .trust-strip__chip,
  .proto-page__timeline-dot,
  .proto-page__compound-card {
    animation: none !important;
  }
  .v2-living .v2-living__dataline { transform: scaleX(1); }
  .v2-living .v2-living__molecule { opacity: 1; }
  .v2-tile,
  .v2-living__spec,
  .v2-trust__cert,
  .v2-spot__benefit,
  .v2-spot__quote,
  .v2-spot__cta {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Protocol page — disable entrance animations, keep interactions */
  .proto-page__compound-card { opacity: 1 !important; transform: none !important; }
  .proto-page__timeline-dot { box-shadow: 0 0 0 2px rgba(25, 71, 209, 0.2) !important; }
}

/* ════════════════════════════════════════════════════════════════════
   PROTOCOL PAGE — full detail view at /#/protocolo/{slug}
   ════════════════════════════════════════════════════════════════════ */
.proto-page {
  min-height: 100vh;
  background:
    linear-gradient(180deg,
      #EEF2FF 0%,
      #F5F7FF 8%,
      #FAFBFF 22%,
      #FAFBFF 100%
    );
  padding: 0 0 80px;
  --proto-accent: #1947D1;
  --proto-accent-bg: rgba(25,71,209,0.07);
}

/* ── Topbar ── */
.proto-page__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 80px);
  border-bottom: 1px solid rgba(25,71,209,0.1);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  position: sticky;
  top: 0;
  z-index: 50;
  /* Thin blue accent line on top */
  box-shadow: 0 -3px 0 0 var(--proto-accent) inset, 0 1px 0 rgba(25, 71, 209, 0.06);
}
.proto-page__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--proto-accent);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: opacity 160ms;
}
.proto-page__back:hover { opacity: 0.7; }
.proto-page__ruo-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(25,71,209,0.6);
  padding: 4px 10px;
  border: 1px solid rgba(25,71,209,0.18);
  border-radius: 20px;
}

/* ── Header ── */
.proto-page__header {
  max-width: 860px;
  margin: 0 auto;
  padding: 64px clamp(20px, 5vw, 80px) 56px;
  text-align: center;
  position: relative;
}
/* Soft radial glow behind the hero headline */
.proto-page__header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 30%,
    color-mix(in srgb, var(--proto-accent) 8%, transparent) 0%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.proto-page__header > * { position: relative; z-index: 1; }
.proto-page__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  margin-bottom: 28px;
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--proto-accent) 25%, transparent),
    0 8px 32px color-mix(in srgb, var(--proto-accent) 18%, transparent);
  transition: box-shadow 400ms ease, transform 400ms cubic-bezier(0.22,1,0.36,1);
}
.proto-page__icon-wrap:hover {
  transform: scale(1.06) rotate(3deg);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--proto-accent) 40%, transparent),
    0 12px 40px color-mix(in srgb, var(--proto-accent) 28%, transparent);
}
.proto-page__header-eyebrow {
  margin-bottom: 14px;
}
.proto-page__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--proto-accent);
  opacity: 0.75;
}
.proto-page__headline {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #0A0A0A;
  margin: 0 0 20px;
}
.proto-page__sub {
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(15px, 1.5vw, 18px);
  color: #5A6478;
  line-height: 1.6;
  margin: 0 0 32px;
}
.proto-page__best-for {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.proto-page__best-pill {
  font-family: "Inter Tight", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--proto-accent);
  background: var(--proto-accent-bg);
  border: 1px solid color-mix(in srgb, var(--proto-accent) 20%, transparent);
  border-radius: 20px;
  padding: 5px 14px;
  letter-spacing: -0.01em;
}

/* ── Section titles ── */
.proto-page__section-title {
  font-family: "Inter Tight", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--proto-accent);
  margin: 0 0 28px;
}

/* ── Compound cards ── */
.proto-page__compounds {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 80px) 64px;
}
.proto-page__compound-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 24px;
}
@media (max-width: 960px) {
  .proto-page__compound-grid { grid-template-columns: 1fr; }
}
.proto-page__compound-card {
  background: #fff;
  border: 1px solid rgba(25,71,209,0.1);
  border-radius: 20px;
  padding: 32px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: proto-card-in 500ms cubic-bezier(0.22,1,0.36,1) both;
  position: relative;
  overflow: hidden;
  transition:
    box-shadow 320ms cubic-bezier(0.22,1,0.36,1),
    border-color 320ms ease,
    transform 320ms cubic-bezier(0.22,1,0.36,1);
}
/* Gradient shimmer border on hover */
.proto-page__compound-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--btn-accent, var(--proto-accent)) 60%, transparent),
    transparent 50%,
    color-mix(in srgb, var(--btn-accent, var(--proto-accent)) 30%, transparent)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.proto-page__compound-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(25, 71, 209, 0.10), 0 4px 16px rgba(0,0,0,0.06);
  border-color: transparent;
}
.proto-page__compound-card:hover::before {
  opacity: 1;
}
@keyframes proto-card-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.proto-page__compound-role {
  display: inline-flex;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid;
  margin-bottom: 18px;
  width: -moz-fit-content;
  width: fit-content;
}
.proto-page__compound-name {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #0A0A0A;
  margin: 0 0 6px;
}
.proto-page__compound-fullname {
  font-family: "Inter Tight", sans-serif;
  font-size: 12px;
  color: #8A94A6;
  margin: 0 0 28px;
}

/* Dose grid */
.proto-page__dose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(25,71,209,0.08);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 28px;
}
.proto-page__dose-item {
  background: #FAFBFF;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.proto-page__dose-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(25,71,209,0.55);
}
.proto-page__dose-val {
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #0A0A0A;
  line-height: 1.35;
}

/* Mechanism / Evidence */
.proto-page__compound-section {
  margin-bottom: 20px;
}
.proto-page__compound-section--evidence {
  padding-top: 18px;
  border-top: 1px solid rgba(25,71,209,0.08);
}
.proto-page__compound-section-label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(25,71,209,0.55);
  margin-bottom: 8px;
}
.proto-page__compound-body {
  font-family: "Inter Tight", sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: #3D4556;
  margin: 0;
}

/* Compound footer — price + buy row */
.proto-page__compound-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;       /* push to card bottom */
  padding-top: 24px;
  border-top: 1px solid rgba(25,71,209,0.08);
  flex-wrap: wrap;
}
.proto-page__compound-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Buy button */
.proto-page__buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter Tight", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--btn-accent, var(--proto-accent));
  text-decoration: none;
  transition: gap 180ms cubic-bezier(0.22,1,0.36,1), opacity 180ms;
}
.proto-page__buy-btn:hover { gap: 13px; opacity: 0.8; }

/* ── Bundle section ── */
.proto-page__bundle {
  max-width: 760px;
  margin: 0 auto 56px;
  padding: clamp(24px, 4vw, 36px) clamp(20px, 5vw, 80px);
  background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(245,247,255,0.88) 100%);
  border: 1px solid rgba(25,71,209,0.12);
  border-radius: 24px;
  box-shadow: 0 4px 32px rgba(25, 71, 209, 0.07);
  backdrop-filter: blur(12px);
}

.proto-page__bundle-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.proto-page__bundle-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.proto-page__bundle-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0A0A0A;
}
.proto-page__bundle-sub {
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  color: #6B7280;
}
.proto-page__bundle-off {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  flex-shrink: 0;
}

.proto-page__bundle-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.proto-page__bundle-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.proto-page__bundle-compound {
  font-family: "Inter Tight", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #0A0A0A;
  display: flex;
  align-items: center;
  gap: 8px;
}
.proto-page__bundle-dose {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  color: #9CA3AF;
  background: rgba(156,163,175,0.12);
  border-radius: 6px;
  padding: 2px 7px;
}
.proto-page__bundle-unit-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
}
.proto-page__bundle-divider {
  height: 1px;
  background: rgba(25,71,209,0.10);
  margin: 4px 0;
}
.proto-page__bundle-totals {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.proto-page__bundle-was {
  font-family: "Inter Tight", sans-serif;
  font-size: 13px;
  color: #9CA3AF;
}
.proto-page__bundle-was s {
  text-decoration: line-through;
}
.proto-page__bundle-final-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.proto-page__bundle-savings {
  font-family: "Inter Tight", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--lp-success, #1FA063);
  background: rgba(31,160,99,0.10);
  border-radius: 6px;
  padding: 3px 9px;
}
.proto-page__bundle-final {
  font-family: "JetBrains Mono", monospace;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Stack CTA button */
.proto-page__add-stack-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 24px;
  padding: 16px 24px;
  border: none;
  border-radius: 14px;
  background: var(--stack-accent, #1947D1);
  color: #fff;
  font-family: "Inter Tight", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.22,1,0.36,1), box-shadow 160ms, background 240ms;
  box-shadow: 0 4px 20px -4px color-mix(in srgb, var(--stack-accent, #1947D1) 50%, transparent);
}
.proto-page__add-stack-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px -6px color-mix(in srgb, var(--stack-accent, #1947D1) 60%, transparent);
}
.proto-page__add-stack-btn:active { transform: translateY(0); }
.proto-page__add-stack-btn--added {
  background: var(--lp-success, #1FA063);
  box-shadow: 0 4px 20px -4px rgba(31,160,99,0.40);
}

.proto-page__bundle-note {
  margin: 10px 0 0;
  text-align: center;
  font-family: "Inter Tight", sans-serif;
  font-size: 11px;
  color: #9CA3AF;
  letter-spacing: 0.02em;
}

/* ── Timeline ── */
.proto-page__timeline {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 80px) 64px;
}
.proto-page__timeline-track {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 28px;
}
.proto-page__timeline-track::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(25,71,209,0.35) 0%,
    rgba(25,71,209,0.12) 60%,
    rgba(25,71,209,0.03) 100%
  );
}
.proto-page__timeline-step {
  position: relative;
  display: flex;
  gap: 20px;
  padding-bottom: 28px;
}
.proto-page__timeline-step:last-child { padding-bottom: 0; }
@keyframes proto-dot-pulse {
  0%   { box-shadow: 0 0 0 2px rgba(25, 71, 209, 0.20); }
  50%  { box-shadow: 0 0 0 4px rgba(25, 71, 209, 0.08), 0 0 0 2px rgba(25, 71, 209, 0.35); }
  100% { box-shadow: 0 0 0 2px rgba(25, 71, 209, 0.20); }
}
.proto-page__timeline-dot {
  position: absolute;
  left: -28px;
  top: 5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(25, 71, 209, 0.2);
  flex-shrink: 0;
  animation: proto-dot-pulse 2600ms ease-in-out infinite;
}
/* stagger dot pulses across timeline steps */
.proto-page__timeline-step:nth-child(1) .proto-page__timeline-dot { animation-delay: 0ms; }
.proto-page__timeline-step:nth-child(2) .proto-page__timeline-dot { animation-delay: 600ms; }
.proto-page__timeline-step:nth-child(3) .proto-page__timeline-dot { animation-delay: 1200ms; }
.proto-page__timeline-step:nth-child(4) .proto-page__timeline-dot { animation-delay: 1800ms; }
.proto-page__timeline-step:nth-child(5) .proto-page__timeline-dot { animation-delay: 2400ms; }
.proto-page__timeline-content { flex: 1; }
.proto-page__timeline-week {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--proto-accent);
  margin-bottom: 6px;
}
.proto-page__timeline-label {
  font-family: "Inter Tight", sans-serif;
  font-size: 15px;
  color: #3D4556;
  line-height: 1.55;
  margin: 0;
}

/* ── Disclaimer ── */
.proto-page__disclaimer {
  margin: 0 clamp(20px, 5vw, 80px) 40px;
  max-width: calc(100% - clamp(40px, 10vw, 160px));
  padding: 18px 28px;
  background: rgba(25,71,209,0.04);
  border: 1px solid rgba(25,71,209,0.12);
  border-radius: 12px;
  font-family: "Inter Tight", sans-serif;
  font-size: 12.5px;
  color: #5A6478;
  line-height: 1.6;
  display: flex;
  gap: 12px;
}

/* ── Footer CTA ── */
.proto-page__footer-cta-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 80px);
}
.proto-page__footer-cta {
  padding: 28px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(25,71,209,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-wrap: wrap;
}
.proto-page__footer-back {
  font-family: "Inter Tight", sans-serif;
  font-size: 14px;
  color: #5A6478;
  text-decoration: none;
  transition: color 160ms;
}
.proto-page__footer-back:hover { color: var(--proto-accent); }
.proto-page__consult-btn {
  font-family: "Inter Tight", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--proto-accent);
  text-decoration: none;
  padding: 10px 22px;
  border: 1.5px solid var(--proto-accent);
  border-radius: 8px;
  transition: background 200ms, color 200ms;
}
.proto-page__consult-btn:hover {
  background: var(--proto-accent);
  color: #fff;
}

.proto-page__not-found {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: "Inter Tight", sans-serif;
  color: #5A6478;
}


/* ============ CYCLE-C5: micro-interacciones y fluidez ============ */
.v2-btn--primary:active,
.v2-cat-card__add:active {
  transform: scale(0.97) translateY(0);
  transition-duration: 80ms;
}
.v2-cat-card__stage {
  transition: transform 600ms var(--v2-ease);
}
.v2-cat-card:hover .v2-cat-card__stage {
  transform: scale(1.045) translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .v2-cat-card__stage { transition: none; }
  .v2-cat-card:hover .v2-cat-card__stage { transform: none; }
}
/* ══════════════════════════════════════════════════════════════════════
   vials.css — Vial-in-context editorial system (Longeva Peptides)
   ──────────────────────────────────────────────────────────────────────
   Integra las fotos "viales fondos reales" (producto Longeva en entornos
   humanos: spa, mármol, trópico, manos) dentro de secciones EXPLICATIVAS,
   EDUCATIVAS y PROMOCIONALES — sin alterar el orden de conversión.

   Tres familias, un solo lenguaje visual (Pure Cobalt · tokens --lp-*):

     .lp-ve  VialEditorial   — split claro, imagen + feature-rows (educativo)
     .lp-vs  VialShowcase     — banda oscura signature-gradient (promocional)
     .lp-vg  VialGallery      — tira editorial de 3 tiles (textura / prueba)

   Copy RUO-compliant: nada de consumo, dosis ni claims médicos.
   Depende de tokens.css (cargar antes). Reusa --lp-royal #1947D1 y familia.
   ══════════════════════════════════════════════════════════════════════ */

/* Grain reutilizable (idéntico al de .lp-hb para coherencia de textura) */
.lp-ve, .lp-vs, .lp-vg {
  --ve-grain:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════════════
   1 · VialEditorial  (.lp-ve) — educativo, fondo claro
   ══════════════════════════════════════════════════════════════════════ */
.lp-ve {
  position: relative;
  padding: clamp(52px, 7vw, 104px) 20px;
  background: transparent;
}
.lp-ve--tint {
  background:
    radial-gradient(120% 90% at 88% 0%, var(--lp-royal-04) 0%, transparent 60%),
    var(--lp-pearl);
}
.lp-ve__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
}
.lp-ve--right .lp-ve__inner { grid-template-columns: 1fr minmax(0, 0.92fr); }
.lp-ve--right .lp-ve__figure { order: 2; }
.lp-ve--right .lp-ve__body   { order: 1; }

/* — Figure / imagen enmarcada (mismo ADN cobalt-outline + grain que .lp-hb) */
.lp-ve__figure {
  position: relative;
  margin: 0;
  border-radius: var(--lp-radius-xl);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--lp-mist);
  outline: 1px solid var(--lp-royal-16);
  outline-offset: -1px;
  box-shadow:
    0 2px 4px rgba(11, 31, 77, 0.05),
    0 30px 70px -30px rgba(25, 71, 209, 0.34),
    0 10px 28px -18px rgba(11, 31, 77, 0.30);
  /* reveal */
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition:
    opacity var(--lp-dur-cinema) var(--lp-ease),
    transform var(--lp-dur-cinema) var(--lp-ease);
  will-change: opacity, transform;
}
.lp-ve.is-in .lp-ve__figure { opacity: 1; transform: none; }

.lp-ve__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
  transform: scale(1.015);
  transition: transform 900ms var(--lp-ease);
}
.lp-ve__figure:hover .lp-ve__img { transform: scale(1.05); }

/* film grain + hairline interior */
.lp-ve__figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ve-grain);
  background-size: 220px 220px;
  mix-blend-mode: soft-light;
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
}
.lp-ve__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  pointer-events: none;
  z-index: 3;
}

/* — Chip flotante sobre la imagen (dato de trazabilidad) */
.lp-ve__chip {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: var(--lp-radius-pill);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid var(--lp-royal-16);
  /* doble sombra: halo oscuro sutil para separar de fondos claros (mármol)
     + ring interior blanco para bordes crujientes en fondos oscuros */
  box-shadow:
    0 2px 6px rgba(11, 31, 77, 0.16),
    0 10px 26px -12px rgba(11, 31, 77, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-royal-deep);
  transform: translateY(10px);
  opacity: 0;
  transition: opacity var(--lp-dur-xl) var(--lp-ease) 220ms,
              transform var(--lp-dur-xl) var(--lp-ease) 220ms;
}
.lp-ve.is-in .lp-ve__chip { opacity: 1; transform: none; }
.lp-ve__chip svg { width: 13px; height: 13px; display: block; }
.lp-ve__chip-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--lp-royal);
  box-shadow: 0 0 0 3px var(--lp-royal-16);
}

/* — Body / copy */
.lp-ve__body { max-width: 560px; }
.lp-ve__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lp-royal);
  margin: 0 0 16px;
}
.lp-ve__eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--lp-royal-48);
}
.lp-ve__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(27px, 3.3vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--lp-ink);
  margin: 0 0 18px;
  text-wrap: balance;
}
.lp-ve__title em {
  font-style: italic;
  font-weight: 600;
  color: var(--lp-royal);
}
.lp-ve__sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.6;
  color: var(--lp-slate);
  margin: 0 0 26px;
  max-width: 48ch;
}

/* — Feature rows (la carga educativa) */
.lp-ve__rows {
  list-style: none;
  margin: 0 0 28px;
  padding: 20px 0 0;
  border-top: 1px solid var(--lp-royal-08);
  display: grid;
  gap: 4px;
}
.lp-ve__row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  padding: 13px 12px;
  border-radius: var(--lp-radius-md);
  border: 1px solid transparent;
  transition: background-color var(--lp-dur-sm) var(--lp-ease),
              border-color var(--lp-dur-sm) var(--lp-ease);
  /* stagger reveal */
  opacity: 0;
  transform: translateY(14px);
}
.lp-ve.is-in .lp-ve__row {
  opacity: 1;
  transform: none;
  transition: opacity var(--lp-dur-xl) var(--lp-ease) var(--row-delay, 0ms),
              transform var(--lp-dur-xl) var(--lp-ease) var(--row-delay, 0ms),
              background-color var(--lp-dur-sm) var(--lp-ease),
              border-color var(--lp-dur-sm) var(--lp-ease);
}
.lp-ve__row:hover {
  background: var(--lp-royal-04);
  border-color: var(--lp-royal-08);
}
.lp-ve__row-ic {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--lp-radius-sm);
  background: var(--lp-royal-08);
  color: var(--lp-royal);
  flex: none;
}
.lp-ve__row-ic svg { width: 20px; height: 20px; display: block; }
.lp-ve__row-tt {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--lp-ink);
  margin: 2px 0 2px;
}
.lp-ve__row-tx {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lp-silver);
  margin: 0;
}

/* — CTA opcional */
.lp-ve__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  color: var(--lp-royal);
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 1.5px solid var(--lp-royal-22);
  transition: border-color var(--lp-dur-sm) var(--lp-ease),
              gap var(--lp-dur-sm) var(--lp-ease),
              color var(--lp-dur-sm) var(--lp-ease);
}
.lp-ve__cta:hover {
  border-color: var(--lp-royal);
  gap: 13px;
  color: var(--lp-royal-deep);
}
.lp-ve__cta:focus-visible {
  outline: 2px solid var(--lp-royal);
  outline-offset: 4px;
  border-radius: var(--lp-radius-xs);
}
.lp-ve__cta svg { width: 16px; height: 16px; }

/* ══════════════════════════════════════════════════════════════════════
   2 · VialShowcase  (.lp-vs) — promocional, banda oscura
   ══════════════════════════════════════════════════════════════════════ */
.lp-vs {
  position: relative;
  padding: clamp(56px, 7vw, 108px) 20px;
  background: var(--lp-grad-signature);
  overflow: hidden;
  isolation: isolate;
}
.lp-vs::before { /* silk overlay */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lp-grad-signature-overlay);
  z-index: 0;
  pointer-events: none;
}
.lp-vs__inner {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) 1fr;
  align-items: center;
  gap: clamp(30px, 5vw, 72px);
}
.lp-vs--right .lp-vs__inner { grid-template-columns: 1fr minmax(0, 0.82fr); }
.lp-vs--right .lp-vs__figure { order: 2; }
.lp-vs--right .lp-vs__body   { order: 1; }

.lp-vs__figure {
  position: relative;
  margin: 0;
  border-radius: var(--lp-radius-xl);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0A1430;
  /* white passe-partout mat, museo */
  border: clamp(8px, 0.8vw, 13px) solid rgba(255, 255, 255, 0.94);
  box-shadow:
    0 40px 90px -40px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity var(--lp-dur-cinema) var(--lp-ease),
              transform var(--lp-dur-cinema) var(--lp-ease);
}
.lp-vs.is-in .lp-vs__figure { opacity: 1; transform: none; }
.lp-vs__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transform: scale(1.02);
  transition: transform 1000ms var(--lp-ease);
}
.lp-vs__figure:hover .lp-vs__img { transform: scale(1.07); }
.lp-vs__figure::before { /* grain */
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ve-grain);
  background-size: 220px 220px;
  mix-blend-mode: soft-light;
  opacity: 0.45;
  pointer-events: none;
  z-index: 2;
}

/* ∞ sello grande de agua detrás del texto */
.lp-vs__body { position: relative; max-width: 540px; }
.lp-vs__seal {
  position: absolute;
  top: -46px; right: -8px;
  font-size: 150px;
  line-height: 1;
  font-weight: 400;
  color: rgba(127, 170, 255, 0.10);
  z-index: -1;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.lp-vs__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #A9BDFF;
  margin: 0 0 16px;
}
.lp-vs__eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: rgba(169, 189, 255, 0.6);
}
.lp-vs__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: #FFFFFF;
  margin: 0 0 18px;
  text-wrap: balance;
}
.lp-vs__title em {
  font-style: italic;
  font-weight: 600;
  color: #A9BDFF;
}
.lp-vs__sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.62;
  color: rgba(233, 238, 250, 0.82);
  margin: 0 0 26px;
  max-width: 46ch;
}

/* mini stats en fila */
.lp-vs__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.lp-vs__stat { min-width: 92px; }
.lp-vs__stat::before {
  content: "";
  display: block;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: rgba(169, 189, 255, 0.55);
  margin: 0 0 10px;
}
.lp-vs__stat-v {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  line-height: 1.1;
}
.lp-vs__stat-k {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(189, 205, 255, 0.88);
  margin-top: 4px;
}
.lp-vs__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-vs__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  padding: 13px 22px;
  border-radius: var(--lp-radius-pill);
  text-decoration: none;
  transition: var(--lp-transition-interactive);
}
.lp-vs__btn--primary {
  background: #FFFFFF;
  color: var(--lp-royal-deep);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.55);
}
.lp-vs__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.6);
}
.lp-vs__btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.lp-vs__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
}
.lp-vs__btn:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}
.lp-vs__btn svg { width: 16px; height: 16px; }

/* ══════════════════════════════════════════════════════════════════════
   3 · VialGallery  (.lp-vg) — tira editorial de 3 tiles
   ══════════════════════════════════════════════════════════════════════ */
.lp-vg {
  position: relative;
  padding: clamp(48px, 6vw, 92px) 20px;
  background: transparent;
}
.lp-vg__inner { max-width: 1200px; margin: 0 auto; }
.lp-vg__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(28px, 3.5vw, 46px);
}
.lp-vg__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lp-royal);
  margin: 0 0 14px;
}
.lp-vg__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--lp-ink);
  margin: 0;
  text-wrap: balance;
}
.lp-vg__title em { font-style: italic; color: var(--lp-royal); }

.lp-vg__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.lp-vg__tile {
  position: relative;
  margin: 0;
  border-radius: var(--lp-radius-lg);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--lp-mist);
  outline: 1px solid var(--lp-royal-12);
  outline-offset: -1px;
  box-shadow: 0 20px 48px -28px rgba(25, 71, 209, 0.4);
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition: opacity var(--lp-dur-cinema) var(--lp-ease) var(--tile-delay, 0ms),
              transform var(--lp-dur-cinema) var(--lp-ease) var(--tile-delay, 0ms),
              box-shadow var(--lp-dur-md) var(--lp-ease);
}
.lp-vg.is-in .lp-vg__tile { opacity: 1; transform: none; }
.lp-vg__tile:hover { box-shadow: 0 30px 60px -26px rgba(25, 71, 209, 0.5); }
.lp-vg__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1.02);
  transition: transform 900ms var(--lp-ease);
}
.lp-vg__tile:hover .lp-vg__img { transform: scale(1.06); }
.lp-vg__tile::before { /* grain */
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ve-grain);
  background-size: 200px 200px;
  mix-blend-mode: soft-light;
  opacity: 0.42;
  pointer-events: none;
  z-index: 2;
}
.lp-vg__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 34px 16px 15px;
  background: linear-gradient(180deg, transparent 0%, rgba(6, 15, 42, 0.66) 100%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

/* ══════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  .lp-ve__inner,
  .lp-ve--right .lp-ve__inner,
  .lp-vs__inner,
  .lp-vs--right .lp-vs__inner {
    grid-template-columns: 1fr;
    gap: clamp(24px, 6vw, 36px);
  }
  .lp-ve__figure,
  .lp-vs__figure {
    order: -1 !important;
    max-width: 440px;
    margin-inline: auto;
    width: 100%;
  }
  .lp-ve__body,
  .lp-vs__body { order: 0 !important; max-width: none; }
  .lp-ve__sub, .lp-vs__sub { max-width: none; }
  .lp-vs__seal { top: -30px; font-size: 108px; }
}

@media (max-width: 720px) {
  .lp-vg__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* la 3ª tile ocupa fila completa para no dejar hueco */
  .lp-vg__tile:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .lp-vg__tile:nth-child(3) .lp-vg__img { -o-object-position: center 42%; object-position: center 42%; }
}

@media (max-width: 460px) {
  .lp-ve { padding: 44px 16px; }
  .lp-vs { padding: 48px 16px; }
  .lp-vg { padding: 40px 16px; }
  .lp-ve__figure, .lp-vs__figure { max-width: none; }
  .lp-vs__actions { width: 100%; }
  .lp-vs__btn { flex: 1 1 auto; justify-content: center; }
}

/* Reduced motion — respeta el guard global de tokens.css */
@media (prefers-reduced-motion: reduce) {
  .lp-ve__figure, .lp-ve__row, .lp-ve__chip,
  .lp-vs__figure, .lp-vg__tile {
    opacity: 1 !important;
    transform: none !important;
  }
  .lp-ve__img, .lp-vs__img, .lp-vg__img { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   Shop links over vial imagery → PDP / artículo / catálogo.
   Anchor lives INSIDE the <figure>; the body CTA lives in a
   separate flex child, so image link and button never overlap.
   (added 2026-07-19)
   ══════════════════════════════════════════════════════════════ */
.lp-ve__imglink,
.lp-vs__imglink {
  position: absolute;
  inset: 0;
  z-index: 5;                       /* above chip(z4)/grain/hairline */
  display: block;
  border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}
.lp-ve__imglink:focus-visible,
.lp-vs__imglink:focus-visible {
  outline: 3px solid var(--lp-royal, #1947D1);
  outline-offset: -4px;
}
.lp-ve__shop,
.lp-vs__shop {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  font: 600 12.5px/1 "Inter", system-ui, sans-serif;
  color: var(--lp-ink, #0A0A0A);
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--lp-radius-pill, 999px);
  box-shadow: 0 6px 20px rgba(10, 20, 60, 0.18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--lp-dur-xl, 0.6s) var(--lp-ease, cubic-bezier(0.22, 1, 0.36, 1)),
              transform var(--lp-dur-xl, 0.6s) var(--lp-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
/* VE chip sits bottom-left → shop pill goes top-right (no overlap) */
.lp-ve__shop { right: 14px; top: 14px; }
/* VS has a white mat border → tuck the pill inside it */
.lp-vs__shop { right: 12px; bottom: 12px; }
.lp-ve__shop i,
.lp-vs__shop i {
  font-style: normal;
  font-weight: 700;
  color: var(--lp-royal, #1947D1);
  transition: transform 0.35s var(--lp-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.lp-ve.is-in .lp-ve__shop,
.lp-vs.is-in .lp-vs__shop { opacity: 1; transform: translateY(0); }
.lp-ve__figure:hover .lp-ve__shop i,
.lp-vs__figure:hover .lp-vs__shop i { transform: translateX(3px); }

/* Gallery tile links — chip top-right (caption is bottom) */
.lp-vg__link {
  position: absolute;
  inset: 0;
  z-index: 4;                       /* above cap(z3)/grain */
  display: block;
  border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}
.lp-vg__link:focus-visible {
  outline: 3px solid var(--lp-royal, #1947D1);
  outline-offset: -4px;
}
.lp-vg__shop {
  position: absolute;
  right: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  font: 600 11px/1 "Inter", system-ui, sans-serif;
  color: var(--lp-ink, #0A0A0A);
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--lp-radius-pill, 999px);
  box-shadow: 0 4px 14px rgba(10, 20, 60, 0.16);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s var(--lp-ease, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.45s var(--lp-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.lp-vg__shop i {
  font-style: normal;
  font-weight: 700;
  color: var(--lp-royal, #1947D1);
  transition: transform 0.35s var(--lp-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.lp-vg.is-in .lp-vg__shop { opacity: 1; transform: translateY(0); }
.lp-vg__tile:hover .lp-vg__shop i { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .lp-ve__shop, .lp-vs__shop, .lp-vg__shop {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .lp-ve__shop i, .lp-vs__shop i, .lp-vg__shop i { transition: none !important; }
}
/* ════════════════════════════════════════════════════════════════════
   PERF-MOBILE.CSS  —  Optimización de rendimiento SOLO en móvil (≤768px)
   Cargado el ÚLTIMO en main.jsx para ganar a cualquier regla previa.
   NO toca el desktop. Causa raíz del lag en teléfonos:
     1. ~150 backdrop-filter → el GPU re-difumina el fondo en CADA scroll.
     2. ~37 animaciones infinitas + 4 orbs grandes compositan sin parar.
   Aquí se neutralizan ambas en móvil. El look de escritorio queda intacto.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1. Matar backdrop-filter en TODO el árbol ───────────────────────
     Es el costo dominante: cada superficie "glass" obliga al GPU a
     muestrear y difuminar el fondo en cada frame de scroll. En móvil el
     fondo es oscuro, así que las superficies siguen legibles sin el blur. */
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Holdouts de alta especificidad: las 3 reglas !important bajo la
     paleta cobalt. Aunque la paleta está dormida hoy, las cubrimos por
     si se activa, para que el blur jamás reviva en móvil. */
  html[data-palette="cobalt"] *,
  html[data-palette="cobalt"] *::before,
  html[data-palette="cobalt"] *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ── 2. Orbs de fondo global: fuera ──────────────────────────────────
     4 esferas de hasta 700px animándose infinitamente detrás de TODAS las
     páginas. Alpha 0.06–0.09 (casi invisibles) pero compositan capas
     enormes en cada frame. En móvil no aportan y cuestan caro. */
  .site-bg-orb {
    display: none !important;
    animation: none !important;
  }

  /* ── 3. Glows / breathing ambientales: congelar (decorativos) ─────────
     Pulsos y respiraciones infinitas puramente estéticas. Quitar el loop
     no cambia el layout; el elemento queda en su estado base. */
  .hero-glow,
  .hero-glow-breathe,
  [class*="orb"],
  [class*="-glow"],
  [class*="glow-"],
  [class*="breathe"],
  [class*="breath"] {
    animation: none !important;
  }

  /* ── 4. will-change: liberar memoria de GPU ──────────────────────────
     will-change mantiene capas promovidas permanentemente. En móvil con
     RAM limitada, esto agrava el lag. Lo soltamos en los decorativos. */
  .site-bg-orb,
  .site-bg-video__vid,
  [class*="orb"],
  [class*="-glow"] {
    will-change: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   LOTE 1 — Legibilidad móvil (2026-07-05)
   Al matar backdrop-filter arriba, las superficies "glass" quedan
   traslúcidas: el contenido se mezcla con el navbar y la sticky bar.
   Aquí se les da fondo casi opaco SOLO en móvil.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. Navbar opaco al scrollear ────────────────────────────────────
     header usa .glass (white alpha 28–55%) que sin blur deja ver el
     texto de la página a través del logo. Fondo sólido por tema. */
  header .glass {
    background: rgba(8, 12, 22, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
  html[data-palette="cobalt"] header .glass,
  html[data-palette="paper"] header .glass,
  html[data-palette="ivory"] header .glass {
    background: rgba(250, 250, 252, 0.97) !important;
    border-color: rgba(10, 10, 10, 0.08) !important;
    box-shadow: 0 8px 24px -12px rgba(10, 10, 10, 0.14) !important;
  }

  /* Páginas dark-hero (Wholesale, Checkout, 404): premium-overrides.css
     pinta el pill rgba(8,14,36,0.55) + blur con selector de especificidad
     (0,3,3) que gana a los de arriba. Sin blur en móvil, el contenido
     sangra a través del pill. Mismo selector, cargado después → gana. */
  body.lp-dark-hero header[class*="fixed"] > div > div[class*="rounded-full"] {
    background: rgba(8, 14, 36, 0.97) !important;
  }

  /* ── 2. Sticky bars del PDP: opacas (el blur ya no existe) ──────────── */
  .pdp-sticky,
  .pdp-sticky-bar {
    background: rgba(8, 12, 22, 0.98) !important;
  }

  /* ── 3. Cards del catálogo (grid 2-col móvil): footer de precio ──────
     "A cotizar" en text-2xl desborda la media columna y desalinea el
     botón Añadir (align-items:flex-end). Compactar y centrar. */
  .card-price-foot {
    align-items: center !important;
    gap: 8px !important;
  }
  .card-price-foot .text-2xl {
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: nowrap;
  }
  .card-add-btn { white-space: nowrap; }

  /* ── 4. Overlays inferiores en PDP: sin pile-up ──────────────────────
     En PDP conviven sticky bar (z90, bottom:0), wa-float, ticker de
     social-proof y el email capture. Se reparten alturas para que
     ninguno tape a otro. body.pdp-active la setea ProteusPDP. */
  body.pdp-active .activity-ticker {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 95 !important;
    max-width: calc(100vw - 84px) !important;
  }
  body.pdp-active .wa-float {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.pdp-active .lp-smart-capture {
    bottom: calc(152px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── 5. Footer: fila inferior desborda (459px en viewport de 390) ─────
     Privacy/Compliance/Cookies + horario WhatsApp + iconos de pago no
     caben en una línea. Permitir wrap ordenado. */
  footer .flex.items-center.gap-5 {
    flex-wrap: wrap;
    row-gap: 10px;
    max-width: 100%;
  }

  /* Ticker social-proof: dejar sitio al botón de WhatsApp también fuera
     del PDP (se solapaban en la esquina inferior). */
  .activity-ticker {
    max-width: calc(100vw - 84px) !important;
  }

  /* ── 6. Footer: grids desbordan 11px a la derecha ─────────────────────
     Los tracks `1fr` tienen piso min-content; las columnas de links
     (2×176px + gap 32) empujan el grid a 384px dentro de un contenedor
     de 354px. minmax(0,1fr) elimina el piso. */
  footer .grid.lg\:grid-cols-12 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  footer .lg\:col-span-7.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 20px !important;
  }
  footer li a { overflow-wrap: anywhere; }
  footer form { max-width: 100%; }
  footer form input { min-width: 0; flex: 1 1 0%; }
  footer form button { flex-shrink: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   LOTE 2 — Pulido móvil (2026-07-16)
   Sesión de 10 ciclos: proporciones, claridad y estética ≤768px.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 7. Comparativa GLP-1: al apilarse las columnas se pierde QUÉ
     producto es cada valor ("≈7 días / ≈5 días / ≈6 días" sin contexto).
     Cada celda recupera su etiqueta de producto vía ::before.
     Orden fijo en el JSX: rowlabel → sem → tir(featured) → reta. ────── */
  .lp-cmp__rowlabel {
    padding: 16px 20px 6px !important;
    font-size: 11px !important;
    color: var(--lp-royal, #1947D1) !important;
  }
  .lp-cmp__cell {
    border-left: 0 !important;
    padding: 7px 20px !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px;
    font-size: 13px !important;
  }
  .lp-cmp__cell::before {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--lp-silver, #6B6B6B);
    flex-shrink: 0;
  }
  .lp-cmp__cell { text-align: right; }
  .lp-cmp__row > .lp-cmp__cell:nth-child(2)::before { content: "SEMA"; }
  .lp-cmp__row > .lp-cmp__cell:nth-child(3)::before { content: "TIRZE"; }
  .lp-cmp__row > .lp-cmp__cell:nth-child(4)::before { content: "RETA"; }
  .lp-cmp__cell--featured {
    background: rgba(25, 71, 209, 0.06) !important;
    border-radius: 8px;
    margin: 0 10px;
    padding: 7px 10px !important;
  }
  .lp-cmp__row:not(.lp-cmp__row--head):last-child { padding-bottom: 10px; }
  .lp-cmp__row + .lp-cmp__row > div { border-top: 0 !important; }
  .lp-cmp__row + .lp-cmp__row { border-top: 1px solid var(--lp-glass-border-soft, rgba(10,10,10,0.08)); }

  /* ── 8. Email capture flotante: compactar ─────────────────────────────
     El box ocupa ~150px de un viewport de 844 y convive con ticker +
     wa-float (~230px de stack). Se compacta a una franja de ~110px:
     menos padding, copy en una línea con ellipsis, input más bajo. */
  .lp-smart-capture {
    padding: 12px 14px 12px !important;
  }
  .lp-smart-capture__eyebrow {
    font-size: 9px !important;
    margin-bottom: 4px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 22px; /* no chocar con la X */
  }
  .lp-smart-capture__copy {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .lp-smart-capture__form input {
    padding: 8px 12px !important;
    font-size: 12.5px !important;
  }
  .lp-smart-capture__form button {
    width: 34px !important;
    height: 34px !important;
  }

  /* ── 9. Cards de catálogo: fila SKU + IN STOCK ────────────────────────
     En la media columna (~170px) el eyebrow "LVP-XXXX" y el pill
     "IN STOCK" no caben y el pill salta de línea de forma dispareja
     entre cards. Se compactan ambos y el pill nunca se parte. */
  .product-card .eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .product-card .eyebrow + span {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 9px !important;
    padding: 3px 7px !important;
  }
  /* Badge de categoría largo ("GH SECRETAGOGUES") no debe partir. */
  .product-card .cat-badge {
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
  }

  /* ── 10. PDP: selector de formato en UNA fila ─────────────────────────
     main.css:6983 pone flex-basis 50% → con 3 formatos (5/10/20mg) el
     tercero cae solo a una fila completa, desbalanceado. Como los pills
     ya solo muestran el tamaño (sin precio), caben 3 por fila. */
  .pdp-variants { flex-wrap: nowrap !important; }
  .pdp-variant-pill {
    flex: 1 1 0 !important;
    padding: 11px 6px !important;
    text-align: center !important;
  }
  .pdp-variant-pill .pdp-variant-size {
    margin-bottom: 0 !important;
    white-space: nowrap;
  }

  /* ── 11. PDP: sin email-capture flotante ──────────────────────────────
     En el PDP ya conviven sticky bar + ticker + WhatsApp (3 capas fijas).
     Sumar el capture (4ª capa a 152px del borde) tapa media pantalla en
     el momento de mayor intención de compra. Solo en PDP se suprime;
     en el resto del sitio sigue apareciendo. */
  body.pdp-active .lp-smart-capture {
    display: none !important;
  }

  /* ── 12. Drawer de carrito/wishlist abierto: limpiar overlays ─────────
     El ticker de social-proof y el nudge del chat quedaban ENCIMA del
     CTA "Solicitar cotización" del drawer (verificado en render 390px).
     Con el drawer abierto se ocultan todos los flotantes. */
  body:has(.shop-drawer.open) .activity-ticker,
  body:has(.shop-drawer.open) .wa-float,
  body:has(.shop-drawer.open) .lp-smart-capture,
  body:has(.shop-drawer.open) .lpchat,
  body:has(.shop-drawer.open) .lpchat-nudge,
  body:has(.lp-cart-root.is-open) .activity-ticker,
  body:has(.lp-cart-root.is-open) .wa-float,
  body:has(.lp-cart-root.is-open) .lp-smart-capture,
  body:has(.lp-cart-root.is-open) .lpchat,
  body:has(.lp-cart-root.is-open) .lpchat-nudge,
  body:has(.shop-drawer.open) .pdp-sticky,
  body:has(.shop-drawer.open) .shop-toast,
  body:has(.shop-drawer.open) .lp-sticky-cart,
  body:has(.lp-cart-root.is-open) .pdp-sticky,
  body:has(.lp-cart-root.is-open) .shop-toast,
  body:has(.lp-cart-root.is-open) .lp-sticky-cart {
    display: none !important;
  }

  /* ── 13. Menú móvil: legibilidad del panel frosted ────────────────────
     El panel usa rgba(255,255,255,0.55) + blur. En móvil el contenido de
     atrás (hero con imagen oscura) se transparenta demasiado; se sube la
     opacidad manteniendo el efecto frosted. Fallback sólido para
     navegadores sin backdrop-filter. */
  html[data-palette="cobalt"] .mnav {
    background: rgba(255, 255, 255, 0.78) !important;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-palette="cobalt"] .mnav {
      background: rgba(255, 255, 255, 0.97) !important;
    }
  }

  /* ── 14. Buscador: placeholder cortado ────────────────────────────────
     "Busca por nombre, código o categoría…" mide ~290px a 16px y el input
     solo tiene ~250px a 390px de viewport (icono + ESC + paddings): se
     cortaba en "categ". Se encoge SOLO el placeholder — el input queda a
     16px, así iOS no auto-zooma al enfocar. */
  .cmd-input {
    font-size: 16px !important;
  }
  .cmd-input::-moz-placeholder {
    font-size: 13px !important;
    letter-spacing: 0 !important;
  }
  .cmd-input::placeholder {
    font-size: 13px !important;
    letter-spacing: 0 !important;
  }

  /* ── 15. ProtocolPage: totales del bundle colisionaban ────────────────
     .proto-page__bundle-totals ponía en UNA fila el label (~180px), el
     pill "10% OFF vs. viales sueltos" (~165px) y "A cotizar" a 32px
     (~175px) — ~520px en un contenedor de ~340px: se montaban entre sí.
     En móvil se apila: label arriba, pill + precio abajo. */
  .proto-page__bundle-totals {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .proto-page__bundle-final-row {
    width: 100%;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 8px 12px !important;
  }
  .proto-page__bundle-final {
    font-size: 24px !important;
  }
}
/* ════════════════════════════════════════════════════════════════════════
   Longeva Peptides — Scroll & Navigation Fluidity (10-cycle pass)
   ────────────────────────────────────────────────────────────────────────
   Isolated, cascade-last layer that makes scrolling and in-page navigation
   feel smoother. Only touches transform/opacity, rendering deferral, and
   scroll anchoring — nothing structural. Loaded LAST in main.jsx so its
   scroll-anchoring + content-visibility rules win the cascade.

   Cycles represented here:
     · 4  — reveal stagger utility (incremental child delays)
     · 5  — content-visibility deferral on heavy editorial sections
     · 6  — navbar-aware anchor scrolling (scroll-margin-top)
     · 10 — reduced-motion guards for everything above
   ════════════════════════════════════════════════════════════════════════ */

/* ── Cycle 6 · Navbar-aware anchor scrolling ─────────────────────────────
   The sticky navbar overlaps the top of any section we jump to via #anchor.
   scroll-margin-top pushes the landing point down by the navbar height so
   headings aren't hidden under the bar. Applies to programmatic
   scrollIntoView() too (the app already calls it with behavior:'smooth').
   NOTE: intentionally NOT setting `html { scroll-behavior: smooth }` — that
   would also make the Cycle-7 route-change scrollTo(top) animate. */
section[id],
[id].v2-cat,
[id].lp-vg,
[id].lp-vs,
[id].lp-ve,
[id].lp-hb {
  scroll-margin-top: 88px;
}
@media (max-width: 767px) {
  section[id],
  [id].v2-cat,
  [id].lp-vg,
  [id].lp-vs,
  [id].lp-ve,
  [id].lp-hb {
    scroll-margin-top: 72px;
  }
}

/* ── Cycle 5 · Deferred rendering of heavy below-fold sections ────────────
   content-visibility:auto lets the browser skip layout/paint for sections
   that aren't near the viewport, cutting scroll cost. contain-intrinsic-size
   reserves an approximate box so the scrollbar stays stable before render.
   Mirrors the existing pattern already used on .v2-* and .lp-faq/.lp-lab. */
.lp-hb,
.lp-ve,
.lp-vs,
.lp-vg {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* ── Cycle 4 · Reveal stagger utility ────────────────────────────────────
   Add `reveal-stagger` to a container whose direct children carry .reveal /
   .reveal-left / .reveal-right / .reveal-scale to cascade their entrance in
   ~70ms steps. Purely presentational; entrance itself is driven by the
   existing IntersectionObserver `.in` class. */
.reveal-stagger > .reveal,
.reveal-stagger > .reveal-left,
.reveal-stagger > .reveal-right,
.reveal-stagger > .reveal-scale {
  --reveal-delay: 0ms;
}
.reveal-stagger > :nth-child(1) { --reveal-delay: 0ms; }
.reveal-stagger > :nth-child(2) { --reveal-delay: 70ms; }
.reveal-stagger > :nth-child(3) { --reveal-delay: 140ms; }
.reveal-stagger > :nth-child(4) { --reveal-delay: 210ms; }
.reveal-stagger > :nth-child(5) { --reveal-delay: 280ms; }
.reveal-stagger > :nth-child(6) { --reveal-delay: 350ms; }
.reveal-stagger > :nth-child(n + 7) { --reveal-delay: 420ms; }

/* ── Cycle 10 · Reduced-motion guards ────────────────────────────────────
   Honour the OS "reduce motion" setting: collapse any stagger delay to zero
   so content appears immediately rather than cascading in. content-visibility
   is a perf optimisation, not motion, so it stays on. (The reveal transitions
   themselves are already neutralised by the reduced-motion block in main.css,
   and the parallax/hero JS handlers bail out early on reduced-motion.) */
@media (prefers-reduced-motion: reduce) {
  .reveal-stagger > * {
    --reveal-delay: 0ms !important;
  }
}