/* LoQuiero runtime bundle: generated from global/base.css, global/mobile.css and global/desktop.css. */

/* =========================================================
   LoQ TW - Global Base
   Brand-agnostic foundation for ecommerce themes.

   Rule:
   - Keep this file simple and semantic.
   - Brand changes should happen mostly in :root.
   - Module-specific visuals belong in module CSS.
   ========================================================= */

/*
  Module author guide:

  1. Use these tokens in new modules:
     --loq-primary           Main actions, active states, focus and links.
     --loq-secondary         Supporting CTAs, promo accents, badges and highlights.
     --loq-bg                Page background.
     --loq-surface           Cards, panels and clean elevated areas.
     --loq-surface-alt       Subtle contrast inside cards, chips and controls.
     --loq-text              Main readable text.
     --loq-muted             Secondary text and helper copy.
     --loq-border            Borders and dividers.
     --loq-radius            Default component radius.
     --loq-shadow            Default elevated surface shadow.
     --loq-space-*           Spacing scale.
     --loq-container         Main max-width.
     --loq-gutter            Mobile side gutter.
     --loq-gutter-desktop    Desktop side gutter.
     --loq-motion            Standard transition.

  2. Do not create module-level brand tokens like --module-purple,
     --module-card-radius or --module-shadow unless the module truly needs
     a private behavior. Prefer consuming global tokens.

  3. Put module layout and specific UI rules in the module CSS, not here.
     Global CSS is only for foundations, shared primitives and app shell.

  4. If a brand needs a different look, change Global > Ajustes del Sitio.
     Do not hardcode brand colors in reusable modules.
*/

:root {
  color-scheme: light;

  /* Brand */
  --loq-primary: #5a38e5;
  --loq-primary-rgb: 90 56 229;
  --loq-primary-hover: #4a2fc7;
  --loq-on-primary: #ffffff;
  --loq-secondary: #111316;
  --loq-secondary-rgb: 17 19 22;
  --loq-secondary-hover: #000000;
  --loq-on-secondary: #ffffff;

  /* Neutrals */
  --loq-bg: #f5f5f7;
  --loq-canvas: var(--loq-bg);
  --loq-canvas-alt: var(--loq-bg);
  --loq-page-bg: var(--loq-bg);
  --loq-surface: #ffffff;
  --loq-surface-alt: #f1f1f3;
  --loq-text:   #1d1d1f;   /* Apple label — casi negro, no negro puro */
  --loq-muted:  #6e6e73;   /* Apple secondary label                   */
  --loq-border: rgba(60, 60, 67, 0.12); /* Apple separator color        */

  /* Premium dark surface: shared app/header/module background */
  --loq-premium-bg:
    radial-gradient(circle at 12% -12%, rgba(130, 91, 255, 0.32), transparent 28%),
    radial-gradient(circle at 86% 8%, rgba(63, 121, 255, 0.2), transparent 28%),
    radial-gradient(circle at 58% 120%, rgba(255, 190, 92, 0.1), transparent 30%),
    linear-gradient(180deg, #070a12 0%, #0b0f1a 58%, #10131f 100%);
  --loq-premium-texture:
    linear-gradient(115deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 1px 1px, rgba(168, 143, 255, 0.16) 0 1px, transparent 1.35px);
  --loq-premium-texture-size: auto, 18px 18px;
  --loq-premium-texture-opacity: 0.42;
  --loq-premium-text: rgba(255, 255, 255, 0.92);
  --loq-premium-muted: rgba(214, 207, 255, 0.62);
  --loq-premium-border: rgba(147, 128, 255, 0.18);
  --loq-premium-control: rgba(255, 255, 255, 0.045);
  --loq-premium-control-border: rgba(185, 171, 255, 0.2);
  --loq-premium-accent: #a98cff;

  /* Feedback */
  --loq-success: #00a650;
  --loq-danger: #ff3b30;

  /* ── Tipografía Apple (SF Pro) ───────────────────────────────────────
     Apple usa su stack del sistema para que cada plataforma renderice
     SF Pro (Apple), Segoe UI (Windows) o Roboto (Android) en forma
     nativa. No se puede distribuir SF Pro como webfont.

     Tracking (letter-spacing) dinámico:
       - Body / texto ≤ 19px : 0 a +0.01em  (SF Pro Text)
       - Títulos ≥ 20px      : -0.01em a -0.03em (SF Pro Display)
     Line-height:
       - Body small (≤ 15px) : 1.47
       - Body regular (17px) : 1.47
       - Subtítulos / 20–28px: 1.25
       - Títulos grandes 32px+: 1.1
     Pesos: 400 regular · 500 medium · 600 semibold · 700 bold · 800 heavy
     Colores Apple exactos:
       - Texto principal     : #1d1d1f
       - Texto secundario    : #6e6e73
       - Label terciario     : #aeaeb2
  ─────────────────────────────────────────────────────────────────── */
  --loq-font: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --loq-font-alt: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  /* Alias para compatibilidad con módulos que usan --loq-font-family */
  --loq-font-family: var(--loq-font);

  /* Pesos */
  --loq-font-regular:  400;
  --loq-font-medium:   500;
  --loq-font-semibold: 600;
  --loq-font-bold:     700;
  --loq-font-heavy:    800;

  /* Escala tipográfica (base 17 px = HIG body) */
  --loq-text-xs:   0.6875rem;  /* 11 px — caption 2 */
  --loq-text-sm:   0.8125rem;  /* 13 px — footnote  */
  --loq-text-base: 1.0625rem;  /* 17 px — body HIG  */
  --loq-text-md:   1.0625rem;  /* alias body        */
  --loq-text-lg:   1.3125rem;  /* 21 px — title 3   */
  --loq-text-xl:   1.75rem;    /* 28 px — title 1   */
  --loq-text-2xl:  2rem;       /* 32 px — large title*/
  --loq-text-3xl:  2.625rem;   /* 42 px — display   */

  /* Line-height Apple */
  --loq-lh-body:    1.47;    /* body / footnote       */
  --loq-lh-title:   1.25;    /* subtítulos / title 3  */
  --loq-lh-display: 1.1;     /* títulos grandes 32px+ */

  /* Letter-spacing Apple */
  --loq-ls-body:     0.011em;   /* SF Pro Text   ≤19px */
  --loq-ls-title:   -0.015em;   /* SF Pro Display 20–31px */
  --loq-ls-display: -0.025em;   /* SF Pro Display 32px+   */

  /* Colores de texto Apple exactos */
  --loq-color-label:           #1d1d1f;   /* label principal    */
  --loq-color-label-secondary: #6e6e73;   /* label secundario   */
  --loq-color-label-tertiary:  #aeaeb2;   /* label terciario    */

  /* Shape and depth */
  --loq-radius: 14px;
  --loq-radius-sm: 8px;
  --loq-radius-pill: 999px;
  --loq-shadow-card: 2px 4px 12px #00000014;
  --loq-shadow: var(--loq-shadow-card);
  --loq-shadow-raised: 2px 8px 20px #0000001a;

  /* Space and layout */
  --loq-space-1: 8px;
  --loq-space-2: 16px;
  --loq-space-3: 24px;
  --loq-space-4: 40px;
  --loq-container: 1376px;
  --loq-container-md: 1240px;
  --loq-container-sm: 1100px;
  --loq-gutter: 16px;
  --loq-gutter-desktop: 24px;
  --loq-section-y: 24px;
  --loq-header-h: 64px;
  --loq-bottom-nav-h: 58px;
  --loq-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Motion */
  --loq-motion: 0.2s ease;
}

/*
  Color roles:
  - primary: main CTAs, active states, links, focus, key interactive accents.
  - secondary: supporting CTAs, badges, promo accents, secondary highlights.
  - neutrals: layout, surfaces, readable ecommerce content.
*/

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--loq-header-h);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  background-color: var(--loq-bg);
}

body {
  margin: 0;
  min-width: 320px;
  background-color: var(--loq-bg);
  color: var(--loq-text);
  font-family: var(--loq-font);
  font-size: var(--loq-text-base);  /* 17 px — Apple HIG body */
  line-height: var(--loq-lh-body);  /* 1.47 */
  letter-spacing: var(--loq-ls-body); /* 0.011em — SF Pro Text */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:not(.woocommerce-checkout):not(.loq-checkout-mode) .site-main {
  background: transparent !important;
}

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

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

img,
video {
  height: auto;
}

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

button {
  letter-spacing: 0;
}

::selection {
  background: rgb(var(--loq-primary-rgb) / 0.18);
}

:focus-visible {
  outline: 3px solid rgb(var(--loq-primary-rgb) / 0.25);
  outline-offset: 2px;
}

.loq-site {
  min-height: 100vh;
  background: var(--loq-bg);
  overflow-x: clip;
}

@supports not (overflow: clip) {
  .loq-site {
    overflow-x: hidden;
  }
}

.site-content,
main,
#content {
  position: relative;
  z-index: 1;
}

.loq-container,
.site-container {
  width: 100%;
  max-width: var(--loq-container);
  margin-inline: auto;
  padding-inline: var(--loq-gutter);
}

.loq-container--md {
  max-width: var(--loq-container-md);
}

.loq-container--sm {
  max-width: var(--loq-container-sm);
}

.loq-page {
  padding-block: var(--loq-section-y);
}

.loq-stack {
  display: flex;
  flex-direction: column;
  gap: var(--loq-space-3);
}

.loq-stack--sm {
  gap: var(--loq-space-2);
}

.loq-row {
  display: flex;
  align-items: center;
  gap: var(--loq-space-2);
}

.loq-row--between {
  justify-content: space-between;
}

.loq-row--wrap {
  flex-wrap: wrap;
}

.loq-grid {
  display: grid;
  gap: var(--loq-space-3);
}

.loq-grid--2 {
  grid-template-columns: 1fr;
}

.loq-grid--cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.loq-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.loq-premium-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--loq-premium-bg);
  color: var(--loq-premium-text);
}

.loq-premium-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--loq-premium-texture);
  background-size: var(--loq-premium-texture-size);
  opacity: var(--loq-premium-texture-opacity);
}

.loq-premium-surface > * {
  position: relative;
  z-index: 1;
}

.loq-pad-x {
  padding-inline: var(--loq-gutter);
}

.loq-divider {
  height: 1px;
  margin-block: var(--loq-space-3);
  background: var(--loq-border);
}

.loq-card {
  border: 1px solid var(--loq-border);
  border-radius: var(--loq-radius);
  background: var(--loq-surface);
  box-shadow: var(--loq-shadow);
  padding: var(--loq-space-3);
}

.loq-card--raised,
.loq-card--cta {
  box-shadow: var(--loq-shadow);
}

.loq-muted {
  color: var(--loq-muted);
  font-size: var(--loq-text-xs);
}

.loq-title {
  margin: 0;
  color: var(--loq-text);
  font-size: var(--loq-text-lg);
  font-weight: var(--loq-font-semibold);
  line-height: 1.16;
}

.loq-btn,
.loq-btn-primary,
a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--loq-radius-sm);
  background: var(--loq-primary);
  color: var(--loq-on-primary);
  cursor: pointer;
  font-size: var(--loq-text-sm);
  font-weight: var(--loq-font-semibold);
  line-height: 1;
  padding: 12px 18px;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--loq-motion),
    border-color var(--loq-motion),
    color var(--loq-motion),
    opacity var(--loq-motion),
    transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.loq-btn:hover,
.loq-btn-primary:hover,
a.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: #000000;
  color: var(--loq-on-primary);
}

.loq-btn:active,
.loq-btn-primary:active,
a.button:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active {
  transform: translateY(1px);
}

.loq-btn:disabled,
.loq-btn-primary:disabled,
button:disabled,
input:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce #respond input#submit:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.loq-btn-ghost {
  border-color: var(--loq-border);
  background: transparent;
  color: var(--loq-text);
}

.loq-btn-ghost:hover {
  background: var(--loq-surface-alt);
  color: var(--loq-text);
}

.loq-checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--loq-space-3);
}

body.woocommerce-checkout,
body.loq-checkout-mode {
  background: var(--loq-surface);
  background-image: none;
}

.loq-checkout-mode .site-header,
.loq-checkout-mode .main-header,
.loq-checkout-mode header#masthead,
.loq-checkout-mode #site-header,
.loq-checkout-mode header#site-header,
.loq-checkout-mode .site-footer {
  display: none !important;
}

.offer-card__actions {
  margin-top: 10px;
}

.offer-card__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--loq-border);
  border-radius: var(--loq-radius-sm);
  background: var(--loq-surface-alt);
  color: var(--loq-text);
  font-size: 13px;
  font-weight: var(--loq-font-semibold);
  line-height: 1;
  text-decoration: none;
  transition:
    background-color var(--loq-motion),
    border-color var(--loq-motion),
    transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.offer-card__buy:hover {
  background: var(--loq-surface);
  transform: translateY(-1px);
}

#loq-header-cart > a {
  border-width: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

#lqColorStrip .lq-color-strip__title {
  display: block !important;
}

#lqColorStrip .lq-color-strip__title::before,
#lqColorStrip .lq-color-strip__title::after {
  content: "" !important;
  display: none !important;
}

#lqColorStrip .lq-color-strip__title > * {
  display: none !important;
}

.snap-track,
article.snap-slide {
  background: none !important;
}

.loq-category-results {
  position: relative;
}

.loq-category-results.is-loq-results-loading {
  cursor: progress;
}

.loq-category-results.is-loq-results-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: 20px;
  background: rgba(245, 245, 247, 0.38);
  backdrop-filter: blur(1px);
}

.loq-category-results.is-loq-results-loading .loq-block--grid,
.loq-category-results.is-loq-results-loading .loq-category-header,
.loq-category-results.is-loq-results-loading .loq-quick-filters {
  opacity: 0.62;
  transition: opacity 0.16s ease;
}

.loq-category-results .is-disabled {
  pointer-events: none;
}

.loq-category-results__notice {
  margin: 10px 0 14px;
  border: 1px solid rgba(99, 67, 242, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #3f3f46;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  padding: 10px 14px;
  box-shadow: 0 12px 28px rgba(18, 18, 23, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================
   LoQuiero - Global Mobile
   Mobile-first app shell and compact interaction rules.
   ========================================================= */

@media (max-width: 1023.98px) {
  :root {
    --loq-header-h: 56px;
  }

  body.has-loq-mobile-bottom-nav {
    padding-bottom: calc(var(--loq-bottom-nav-h, 54px) + var(--loq-safe-bottom, 0px) + 12px);
  }

  .loq-mobile-bottom-nav {
    position: fixed;
    z-index: 450;
    left: 12px;
    right: 12px;
    margin: 0 auto;
    width: auto;
    max-width: 420px;
    bottom: max(12px, calc(var(--loq-safe-bottom, 0px) + 8px));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    min-height: 52px;
    padding: 6px;
    border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: var(--loq-radius-pill, 999px);
    background: rgba(255, 255, 255, 0.42) !important;
    box-shadow: 
      0 12px 36px rgba(17, 19, 22, 0.08), 
      0 3px 10px rgba(17, 19, 22, 0.03),
      inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
    backdrop-filter: blur(28px) saturate(1.8) !important;
  }

  .loq-mobile-bottom-nav__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    border: 0;
    border-radius: var(--loq-radius-pill, 999px);
    background: transparent;
    color: rgba(17, 19, 22, 0.44);
    font-family: var(--loq-font-family, system-ui, -apple-system, sans-serif);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    gap: 3px;
    transition:
      color 200ms ease,
      transform 150ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .loq-mobile-bottom-nav__item i {
    font-size: 19px;
    line-height: 1;
    transition: transform 200ms ease;
  }

  .loq-mobile-bottom-nav__item.is-active,
  .loq-mobile-bottom-nav__item--primary.is-active {
    color: var(--loq-primary, #5a38e5);
    background: transparent;
    box-shadow: none;
  }

  .loq-mobile-bottom-nav__item.is-active i {
    transform: scale(1.08) translateY(-1px);
  }

  .loq-mobile-bottom-nav__item span:not(.loq-mobile-bottom-nav__badge):not(.loq-mobile-bottom-nav__icon-wrap) {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: inherit;
    display: block;
    margin-top: 1px;
    opacity: 0.9;
  }

  .loq-mobile-bottom-nav__item:hover,
  .loq-mobile-bottom-nav__item:focus-visible {
    color: var(--loq-primary, #5a38e5);
    background: transparent;
    box-shadow: none;
  }

  .loq-mobile-bottom-nav__item:active {
    transform: scale(0.94);
  }

  .loq-mobile-bottom-nav__icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .loq-mobile-bottom-nav__badge {
    position: absolute;
    top: -5px;
    right: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    border-radius: 99px;
    background: #ef4444;
    color: #ffffff;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    box-shadow: 0 0 0 1.5px #ffffff;
    z-index: 10;
  }

  .lq-mobile-toast {
    bottom: calc(var(--loq-bottom-nav-h, 54px) + 16px + var(--loq-safe-bottom, 0px)) !important;
  }

  .woocommerce-checkout .loq-mobile-bottom-nav,
  .loq-checkout-mode .loq-mobile-bottom-nav {
    display: none;
  }

  .loq-grid--cards {
    gap: 12px;
  }

  .offer-card__actions {
    margin-top: 8px;
  }

  .offer-card__buy {
    min-height: 34px;
    border-radius: 9px;
    font-size: 12.5px;
  }

  /* Evitar que iOS Safari haga zoom automático al enfocar campos de texto */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="search"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* =========================================================
   LoQuiero - Global Desktop
   Wider rhythm, containers and desktop-only layout decisions.
   ========================================================= */

@media (min-width: 768px) {
  :root {
    --loq-header-h: 78px;
  }

  .loq-container,
  .site-container,
  .loq-pad-x {
    padding-inline: var(--loq-gutter-desktop);
  }

  .loq-page {
    padding-block: var(--loq-space-4);
  }

  .loq-grid--cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .loq-checkout-grid {
    grid-template-columns: 2fr 1fr;
  }
}

@media (min-width: 992px) {
  .loq-grid--2 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  body {
    background-attachment: fixed, scroll;
  }

  body.has-loq-mobile-bottom-nav {
    padding-bottom: 0;
  }

  .loq-mobile-bottom-nav {
    display: none;
  }
}

@media (min-width: 1200px) {
  .loq-grid--cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}