/** Shopify CDN: Minification failed

Line 10:51 Unexpected "*"

**/
/* ============================================================
   DESIGN SYSTEM CUSTOM — Master Escala, con paleta Nüvo fija
   ------------------------------------------------------------
   Solo polish y design tokens. NO pelea contra el theme base.
   Hasta el 2026-09-04 estos --elegance-*/--el-cod-* eran los
   placeholders negro/dorado/crema del bundle, y una capa aparte
   (nuvo-skin.css, retirada ese dia) los remapeaba a la paleta
   Nüvo solo cuando el documento llevaba data-skin="nuvo". Se
   decidio quedar con la piel Nüvo y retirar el switcher: los
   valores de marca (MARCA.md 2.3-2.4) quedan aqui directo, sin
   condicion. Detalle de la retirada en SKILLS.md.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');

/* ----- DESIGN TOKENS — paleta Nüvo (MARCA.md 2.3-2.4) ----- */
:root {
  --elegance-noir: #0A2540;        /* Midnight Navy — estructura */
  --elegance-noir-soft: #14395C;
  --elegance-gold: #15803D;        /* verde de RELLENO (AA 5.02:1 con blanco) */
  --elegance-gold-soft: #16A34A;   /* verde de marca — borde activo y checks */
  --elegance-gold-deep: #14532D;
  --elegance-cream: #F8FAFC;       /* superficie hielo */
  --elegance-stone: #43474D;
  --elegance-tobacco: #D97706;     /* ambar terciario */

  --elegance-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --elegance-fast: 280ms;
  --elegance-slow: 600ms;
}

/* ----- TIPOGRAFIA — Plus Jakarta Sans (DESIGN.md) ----- */
body,
button,
input,
select,
textarea {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ----- FORMA — lenguaje pill (DESIGN.md "Shapes", roundedness 3) ----- */
.button-primary,
.button-secondary {
  border-radius: 9999px;
}

/* ----- BUTTONS — premium hover state ----- */
.button-primary,
.button-secondary,
button[class*="button"] {
  transition: transform var(--elegance-fast) var(--elegance-ease),
              box-shadow var(--elegance-fast) var(--elegance-ease),
              background-color var(--elegance-fast) var(--elegance-ease);
}

.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(22, 163, 74, 0.16);
}

/* ----- KEN BURNS sutil en hero backgrounds ----- */
@keyframes elegance-ken-burns {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.06); }
}

.hero picture img,
.hero .background-media-container img {
  animation: elegance-ken-burns 20s ease-out infinite alternate;
  transform-origin: center center;
}

/* ----- SCROLL-TRIGGERED REVEALS ----- */
[data-elegance-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--elegance-slow) var(--elegance-ease),
              transform var(--elegance-slow) var(--elegance-ease);
}

[data-elegance-reveal].elegance-in-view {
  opacity: 1;
  transform: translateY(0);
}

[data-elegance-reveal][data-stagger="2"] { transition-delay: 150ms; }
[data-elegance-reveal][data-stagger="3"] { transition-delay: 300ms; }
[data-elegance-reveal][data-stagger="4"] { transition-delay: 450ms; }

/* ----- MARQUEE pause-on-hover ----- */
.marquee:hover [class*="marquee-track"],
.marquee:hover [class*="scrolling"] {
  animation-play-state: paused;
}

/* ----- FOOTER polish ----- */
[class*="footer"] h3 {
  color: var(--elegance-gold-soft);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1em;
}

[class*="footer"] a {
  transition: color var(--elegance-fast) var(--elegance-ease);
}

[class*="footer"] a:hover {
  color: var(--elegance-gold);
}

/* ----- SMOOTH SCROLL + REDUCED MOTION RESPECT ----- */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero picture img { animation: none !important; }
}

/* ----- LAZY IMAGE FADE-IN ----- */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

img[loading="lazy"].is-loaded {
  opacity: 1;
}

.hero img,
[fetchpriority="high"] {
  opacity: 1 !important;
  transition: none !important;
}

/* ----- FONT-DISPLAY SWAP ----- */
@font-face {
  font-display: swap;
}

/* ----- MOBILE TOUCH TARGETS (sin atacar el theme) ----- */
@media (max-width: 768px) and (pointer: coarse) {
  .button-primary,
  .button-secondary {
    min-height: 48px;
    padding-inline: 1.25rem;
  }
}

/* ----- SAFE-AREA INSETS para iPhone notch ----- */
[class*="footer"] {
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

/* ============================================================
   MOTION UPGRADE — 2026-09-08
   ------------------------------------------------------------
   Pedido de Nicolás: "mucha más animación, más viva, tarjetas
   animadas, iconos animados, transiciones según scroll y mouse".
   Se mantiene dentro del registro "Modern Clinical Prestige" de
   DESIGN.md — Aesthetic Movement & Personality: sutil, sin
   skeuomorfismo, nunca bullicioso. Ángulos de tilt e intensidad
   de parallax deliberadamente contenidos por esa razón, no por
   limitación técnica. Todo respeta prefers-reduced-motion y se
   apaga en touch (sin cursor no hay "mouse" que seguir).
   ============================================================ */

/* ----- TILT 3D con el mouse — tarjetas de ingredientes + imagen
   de producto. elegance-animations.js escribe --tiltX/--tiltY/
   --liftY según la posición del cursor sobre el elemento. ----- */
[data-elegance-tilt] {
  --tiltX: 0deg;
  --tiltY: 0deg;
  --liftY: 0px;
  transform: perspective(900px) rotateX(var(--tiltX)) rotateY(var(--tiltY)) translateY(var(--liftY));
  transition: transform 320ms var(--elegance-ease);
  will-change: transform;
}

/* ----- SHINE SWEEP — un solo brillo que cruza el botón al hacer hover ----- */
.el-cta__btn,
.el-hero .el-hero__cta {
  position: relative;
  overflow: hidden;
}
.el-cta__btn::after,
.el-hero .el-hero__cta::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 650ms var(--elegance-ease);
  pointer-events: none;
}
.el-cta__btn:hover::after,
.el-hero .el-hero__cta:hover::after {
  left: 130%;
}

/* ----- ÍCONOS de ingredientes — flotación continua, escalonada por tarjeta.
   Antes las 4 tarjetas de la home no tenían ningún ícono/imagen (campo
   vacío) — sections/elegance-ingredients-grid.liquid ahora dibuja un SVG
   de respaldo por posición cuando no hay imagen cargada. ----- */
.el-ingredient-card__icon {
  width: 64px; height: 64px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, var(--elegance-cream) 70%);
  border: 1px solid #E2E8F0;
  color: var(--elegance-gold);
  animation: el-icon-float 3.6s var(--elegance-ease) infinite;
  transition: background-color var(--elegance-fast) var(--elegance-ease),
              border-color var(--elegance-fast) var(--elegance-ease),
              color var(--elegance-fast) var(--elegance-ease);
}
.el-ingredient-card__icon svg { width: 30px; height: 30px; }
.el-ingredient-card:nth-child(1) .el-ingredient-card__icon { animation-delay: 0ms; }
.el-ingredient-card:nth-child(2) .el-ingredient-card__icon { animation-delay: 250ms; }
.el-ingredient-card:nth-child(3) .el-ingredient-card__icon { animation-delay: 500ms; }
.el-ingredient-card:nth-child(4) .el-ingredient-card__icon { animation-delay: 750ms; }
@keyframes el-icon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.el-ingredient-card:hover .el-ingredient-card__icon {
  color: #FFFFFF;
  background: var(--elegance-gold);
  border-color: var(--elegance-gold);
}

/* ----- HERO — parallax de fondo (mouse + scroll, escrito por JS en
   --parX/--parY). Va en el WRAPPER (.el-hero__bg), separado del <img>
   que ya tiene su propio zoom lento por keyframe — dos elementos, dos
   transforms, sin pelearse por la misma propiedad. El wrapper se agranda
   con inset negativo (ver sections/elegance-hero-split.liquid) para que
   el desplazamiento nunca deje ver un borde. ----- */
[data-elegance-parallax] {
  transform: translate3d(var(--parX, 0px), var(--parY, 0px), 0);
}

@media (prefers-reduced-motion: reduce) {
  [data-elegance-tilt] { transform: none !important; transition: none !important; }
  .el-cta__btn::after, .el-hero .el-hero__cta::after { display: none !important; }
  .el-ingredient-card__icon { animation: none !important; }
  [data-elegance-parallax] { transform: none !important; }
}

@media (hover: none) {
  /* Sin cursor no hay "mouse" que seguir — apagar el tilt para que no
     quede trabado en el último valor que tocó el dedo. */
  [data-elegance-tilt] { transform: none !important; }
}

/* ============================================================
   BOTÓN COD (Releasit) — universal, colores por paleta de marca
   Los --el-cod-* se definen mas abajo, ya fijos en paleta Nüvo.
   Releasit dibuja su botón con clases hasheadas (sc-*) que
   cambian por build; lo targeteamos por ESTRUCTURA estable: el
   botón real vive dentro de .rsi-app-block-container y NO es el
   submit oculto ni el que lleva data-rsi-cod-button.

   Nota: los fallback hexadecimales dentro de cada var(--el-cod-*, #hex)
   de aqui abajo quedaron en el dorado original del bundle. Son
   inertes — --el-cod-* siempre esta definido mas abajo en este
   mismo archivo, así que el fallback nunca se usa — se dejan asi
   para no tocar mas lineas de las necesarias (ver SKILLS.md).
   ============================================================ */

/* Botón flotante nativo de Releasit: oculto. Lo reemplaza la barra custom
   "Barra COD flotante" (sections/elegance-cod-bar.liquid). */
.rsi_floating,
.rsi_floating_top,
.rsi_floating_bottom { display: none !important; }

/* Sección del botón inline: color primario de marca + glow del acento + aire.
   Elimina el blanco que cortaba el flujo y conecta las imágenes. */
.shopify-section:has(.rsi-app-block-container) {
  background:
    radial-gradient(125% 85% at 50% 50%, color-mix(in srgb, var(--el-cod-accent, #C9A84C) 14%, transparent), transparent 62%),
    var(--el-cod-dark, #0A0A0A) !important;
  padding-block: 28px !important;
}
.shopify-section:has(.rsi-app-block-container) > * { background: transparent !important; }
.rsi-app-block-container { text-align: center !important; width: 100% !important; margin-inline: auto !important; }

/* Botón inline rediseñado: acento de marca, ancho contenido, no pastilla */
.rsi-app-block-container button:not([type="submit"]):not([data-rsi-cod-button]) {
  display: block !important;
  width: 100% !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  background: linear-gradient(135deg, var(--el-cod-accent-light, #E7CE83) 0%, var(--el-cod-accent, #C9A84C) 45%, var(--el-cod-accent-deep, #8B6914) 100%) !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--el-cod-accent, #C9A84C) 42%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5) !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .25s ease !important;
}
.rsi-app-block-container button:not([type="submit"]):not([data-rsi-cod-button]) * {
  color: var(--el-cod-on-accent, #0A0A0A) !important;
}
.rsi-app-block-container button:not([type="submit"]):not([data-rsi-cod-button]):active { transform: scale(.98) !important; }
@media (hover: hover) {
  .rsi-app-block-container button:not([type="submit"]):not([data-rsi-cod-button]):hover {
    box-shadow: 0 18px 46px color-mix(in srgb, var(--el-cod-accent, #C9A84C) 58%, transparent) !important;
    transform: translateY(-2px) !important;
  }
}

/* Badges de confianza bajo el botón inline (inyectadas por JS de la barra) */
.el-cod-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 460px; margin: 16px auto 0; }
.el-cod-trust__chip {
  font-size: .72rem; font-weight: 600; letter-spacing: .03em;
  color: var(--el-cod-accent, #C9A84C);
  border: 1px solid color-mix(in srgb, var(--el-cod-accent, #C9A84C) 42%, transparent);
  background: color-mix(in srgb, var(--el-cod-accent, #C9A84C) 6%, transparent);
  border-radius: 999px; padding: .42rem .72rem; white-space: nowrap;
}
/* En celular: las 3 en UNA sola línea (sin wrap), compactas para que quepan */
@media (max-width: 600px) {
  .el-cod-trust { flex-wrap: nowrap; gap: 5px; max-width: 100%; }
  .el-cod-trust__chip { font-size: .58rem; padding: .36rem .46rem; letter-spacing: 0; flex: 0 1 auto; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rsi-app-block-container button:not([type="submit"]):not([data-rsi-cod-button]) { transition: none !important; }
}

:root{
  --el-cod-accent: #15803D;
  --el-cod-accent-light: #16A34A;
  --el-cod-accent-deep: #14532D;
  --el-cod-on-accent: #FFFFFF;
  --el-cod-dark: #0A2540;
  --el-cod-dark-soft: #222222;
  --el-cod-on-dark: #FFFFFF;
}

/* ============================================================
   HEADER — solo el logo (pedido de Nicolás, 2026-09-04)
   ------------------------------------------------------------
   El header nativo de Horizon no tiene setting para ocultar el menú
   ni las acciones (cuenta/carrito): son bloques estáticos o un capture
   incondicional en sections/header.liquid (ver ese archivo, líneas 87 y
   104). Sin mutación de Admin API para reescribir esa sección vendor sin
   riesgo, se oculta por CSS — mismo patrón que ya usa este archivo para
   el botón flotante de Releasit (arriba). Afecta TODA la tienda: el
   header es global (header-group), no solo la PDP.
   El buscador tiene su propio toggle nativo (show_search: false, ver
   sections/header-group.json) — se usa ese en vez de ocultarlo por CSS.
   ============================================================ */
#header-group .header__drawer,   /* hamburguesa que abre el menú móvil */
#header-group header-menu,       /* menú de navegación de escritorio */
#header-group header-actions {   /* cuenta + carrito */
  display: none !important;
}
/* Espaciado propio arriba/abajo del logo — pedido de Nicolás: que el header
   quede ligeramente más alto que la barra de promoción de arriba (55.6px
   medido en vivo). Logo ≈36px de alto; 13px de padding a cada lado da
   ≈62px de bloque total — "ligeramente más", no el doble. El theme mide la
   altura real del header en vivo (measure-header-heights en
   layout/theme.liquid) para --header-height/--header-group-height, así que
   agrandar el padding acá no rompe esos cálculos: se vuelven a medir solos. */
#header-group .header__columns { padding-block: 13px !important; }

/* ============================================================
   FOOTER — contenido centrado y acotado (pedido de Nicolás, 2026-09-05)
   ------------------------------------------------------------
   "section_width: page-width" en footer-group.json debería contener y
   centrar el contenido, pero el theme setting global de ancho de página
   está en "wide" (--page-width: 150rem ≈ 2400px, ver Personalizar tema >
   Ancho de página): en pantallas normales ese tope nunca se alcanza, así
   que el grid de 3 columnas del footer se estira casi de punta a punta
   (solo 40px de aire a cada lado), dejando la columna de enlaces legales
   con muchísimo espacio vacío propio — se leía como "no centrado".
   No se toca el ancho global del sitio (afectaría cada sección de la
   tienda, no solo el footer): se acota y centra solo el contenido de
   ESTA sección, mismo patrón que el resto de este archivo (CSS dirigido,
   nunca se edita el vendor). */
.shopify-section-group-footer-group .footer-content {
  max-width: 1200px;
  margin-inline: auto;
}