/* ==========================================================================
   Web Express · Sistema de diseño premium (compartido)
   Usar en: home, landing de temporada, tienda y páginas nuevas.
   Carga DESPUÉS de los CSS de cada página. Solo tokens, base y componentes.
   Fuentes ya servidas por el sitio: General (texto y títulos), Gambetta (acentos
   serif, sin cursivas), Space Mono (etiquetas y cifras pequeñas).
   ========================================================================== */

/* ---------- 0. Fuentes (cada página carga este archivo, no depende de otras hojas) ---------- */
@font-face { font-family: "General"; src: url("/assets/fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General"; src: url("/assets/fonts/general-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("/assets/fonts/space-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("/assets/fonts/space-mono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- 1. Tokens ---------- */
:root {
  /* Color: fondo oscuro de marca + crema + lima como único acento de acción */
  --wx-bg: #16171b;
  --wx-bg-2: #1d1e23;          /* superficie de tarjeta */
  --wx-bg-3: #101114;          /* superficie hundida (paneles, código) */
  --wx-fg: #f2f0ea;            /* texto principal */
  --wx-fg-2: #c9c8c2;          /* texto secundario (contraste AA sobre bg) */
  --wx-muted: #9a9b95;         /* solo etiquetas grandes o notas; AA en 16px+ */
  --wx-line: rgba(242, 240, 234, 0.14);
  --wx-line-2: rgba(242, 240, 234, 0.07);
  --wx-lime: #c9f84a;          /* acción principal y precios de oferta */
  --wx-lime-ink: #101114;      /* texto sobre lima */
  --wx-coral: #fc5a32;         /* alertas y avisos, nunca decoración */
  --wx-focus: #ffd34d;         /* foco visible de teclado */

  /* Tipografía */
  --wx-font-sans: "General", "Helvetica Neue", Arial, sans-serif;
  --wx-font-serif: "Gambetta", Georgia, serif;
  --wx-font-mono: "Space Mono", ui-monospace, Menlo, monospace;

  /* Escala tipográfica fluida (mínimo 16 px de cuerpo, nada por debajo de 12 px) */
  --wx-t-xs: 0.75rem;                          /* 12 px: solo etiquetas mono */
  --wx-t-sm: 0.875rem;                         /* 14 px */
  --wx-t-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);   /* 16 a 17 px */
  --wx-t-lead: clamp(1.125rem, 1.02rem + 0.4vw, 1.3rem);  /* 18 a 21 px */
  --wx-t-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --wx-t-h2: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  --wx-t-h1: clamp(2.5rem, 1.2rem + 4.8vw, 5.5rem);
  --wx-lh-tight: 1.02;
  --wx-lh-body: 1.55;

  /* Espaciado (múltiplos de 4 px) */
  --wx-s1: 0.25rem; --wx-s2: 0.5rem; --wx-s3: 0.75rem; --wx-s4: 1rem;
  --wx-s5: 1.5rem; --wx-s6: 2rem; --wx-s7: 3rem; --wx-s8: 4rem; --wx-s9: 6rem;
  --wx-gutter: 16px;                                   /* margen lateral en móvil */
  --wx-pad: clamp(16px, 4vw, 56px);
  --wx-max: 1200px;
  --wx-section-y: clamp(64px, 9vw, 120px);

  /* Forma: radios contenidos, menos tarjetas redondas idénticas */
  --wx-r-sm: 6px;
  --wx-r-md: 10px;
  --wx-r-lg: 18px;
  --wx-r-pill: 999px;

  /* Movimiento */
  --wx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wx-dur: 360ms;
}

@media (prefers-color-scheme: light) {
  /* Sitio siempre oscuro por marca. Se mantiene el mismo tema aunque el sistema esté claro. */
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

/* ---------- 2. Base ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.wx {
  margin: 0;
  background: var(--wx-bg);
  color: var(--wx-fg);
  font-family: var(--wx-font-sans);
  font-size: var(--wx-t-body);
  line-height: var(--wx-lh-body);
  overflow-x: hidden;                 /* ningún elemento debe forzar scroll horizontal */
  -webkit-font-smoothing: antialiased;
}
body.wx img, body.wx video, body.wx svg { max-width: 100%; height: auto; display: block; }
body.wx a { color: inherit; }
body.wx :where(h1, h2, h3, h4) { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
body.wx p { margin: 0; text-wrap: pretty; }
body.wx :focus-visible { outline: 3px solid var(--wx-focus); outline-offset: 3px; border-radius: 4px; }
.wx-container { width: min(100% - 2 * var(--wx-pad), var(--wx-max)); margin-inline: auto; }
.wx-section { padding-block: var(--wx-section-y); }
.wx-section--alt { background: var(--wx-bg-2); }
.wx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. Tipografía ---------- */
.wx-h1 { font-size: var(--wx-t-h1); line-height: var(--wx-lh-tight); letter-spacing: -0.035em; }
.wx-h2 { font-size: var(--wx-t-h2); line-height: 1.08; }
.wx-h3 { font-size: var(--wx-t-h3); line-height: 1.2; }
.wx-lead { font-size: var(--wx-t-lead); line-height: 1.45; color: var(--wx-fg-2); max-width: 36ch; }
.wx-note { font-size: var(--wx-t-sm); color: var(--wx-muted); line-height: 1.5; }
.wx-accent { color: var(--wx-lime); }
/* Etiqueta de sección: mono, mayúsculas suaves, siempre legible */
.wx-kicker {
  display: inline-flex; align-items: center; gap: var(--wx-s2);
  font-family: var(--wx-font-mono); font-size: var(--wx-t-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wx-lime);
}
.wx-kicker::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
/* Cifra de precio: el número manda, el texto acompaña */
.wx-price { font-family: var(--wx-font-sans); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.wx-price small { font-size: 0.5em; font-weight: 400; color: var(--wx-fg-2); letter-spacing: 0; margin-right: 0.15em; }

/* ---------- 4. Botones ---------- */
body.wx .wx-btn {
  box-sizing: border-box;            /* el ancho 100 % incluye el padding: no desborda la tarjeta */
  --_bg: transparent; --_fg: var(--wx-fg); --_bd: var(--wx-line);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--wx-s2);
  min-height: 48px; padding: 0.75rem 1.25rem;
  border: 1.5px solid var(--_bd); border-radius: var(--wx-r-pill);
  background: var(--_bg); color: var(--_fg);
  font: 700 var(--wx-t-sm) / 1 var(--wx-font-sans); letter-spacing: 0.01em; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background var(--wx-dur) var(--wx-ease), color var(--wx-dur) var(--wx-ease), border-color var(--wx-dur) var(--wx-ease), transform var(--wx-dur) var(--wx-ease);
}
.wx-btn:hover { --_bd: var(--wx-fg); }
.wx-btn:active { transform: translateY(1px); }
body.wx .wx-btn--primary { --_bg: var(--wx-lime); --_fg: var(--wx-lime-ink); --_bd: var(--wx-lime); }
.wx-btn--primary:hover { --_bg: #d8ff62; --_bd: #d8ff62; }
body.wx .wx-btn--ghost { --_bd: transparent; --_fg: var(--wx-fg); text-decoration: underline; text-underline-offset: 4px; min-height: 44px; }
.wx-btn--ghost:hover { --_fg: var(--wx-lime); }
.wx-btn--block { width: 100%; }
.wx-btn .wx-arrow { transition: transform var(--wx-dur) var(--wx-ease); }
.wx-btn:hover .wx-arrow { transform: translate(2px, -2px); }
.wx-btn[disabled], .wx-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
/* En táctil no hay hover: el estado queda en el propio botón */
@media (hover: none) { .wx-btn:hover { --_bd: var(--_bd); } }

/* ---------- 5. Etiquetas de precio ---------- */
/* Usar en tarjetas: lista primero, oferta después, ahorro en una sola línea */
body.wx .wx-tag {
  display: inline-flex; align-items: center; gap: var(--wx-s2);
  padding: 0.3rem 0.65rem; border-radius: var(--wx-r-sm);
  font: 700 var(--wx-t-xs) / 1 var(--wx-font-mono); letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--wx-bg-3); color: var(--wx-fg-2); border: 1px solid var(--wx-line);
}
body.wx .wx-tag--offer { background: var(--wx-lime); color: var(--wx-lime-ink); border-color: var(--wx-lime); }
/* Etiqueta de oferta sobre tarjeta lima: el texto siempre oscuro, aunque una tarjeta herede otro color de texto */
body.wx .wx-card .wx-tag--offer, body.wx .wx-card .wx-tag--offer:hover { color: var(--wx-lime-ink); }
.wx-tag--alert { background: transparent; color: var(--wx-coral); border-color: var(--wx-coral); }
.wx-list-price { color: var(--wx-muted); text-decoration: line-through; text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; }

/* ---------- 6. Tarjetas ---------- */
/* Una sola forma de tarjeta: borde fino, sin sombra decorativa, radio medio */
.wx-card {
  display: flex; flex-direction: column; gap: var(--wx-s4);
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--wx-bg-2); border: 1px solid var(--wx-line-2); border-radius: var(--wx-r-md);
  transition: border-color var(--wx-dur) var(--wx-ease);
}
.wx-card:hover { border-color: var(--wx-line); }
.wx-card--feature { border-color: var(--wx-lime); background: linear-gradient(180deg, rgba(201, 248, 74, 0.07), rgba(201, 248, 74, 0) 60%), var(--wx-bg-2); }
.wx-card > h3 { font-size: var(--wx-t-h3); }
.wx-card p { color: var(--wx-fg-2); }
.wx-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--wx-s3); align-items: center; justify-content: space-between; }

/* Grid responsive: 1 columna en móvil, 2 en tablet, 3 en escritorio */
.wx-grid { display: grid; gap: var(--wx-s4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .wx-grid--2, .wx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .wx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 7. Iconografía SVG ---------- */
/* Iconos inline con stroke de 1.75 y tamaño 24. Nunca emojis. */
.wx-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.wx-ico--lg { width: 32px; height: 32px; }
.wx-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wx-s3); }
.wx-check-list li { position: relative; padding-left: 1.85rem; color: var(--wx-fg-2); }
.wx-check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--wx-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101114' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* ---------- 8. Movimiento ---------- */
@media (prefers-reduced-motion: no-preference) {
  .wx-reveal { opacity: 0; transform: translateY(14px); transition: opacity 620ms var(--wx-ease), transform 620ms var(--wx-ease); }
  .wx-reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .wx-reveal { opacity: 1; transform: none; }
}

/* ---------- 9. Cabecera y pie compartidos ---------- */
.wx-hd { position: sticky; top: 0; z-index: 50; background: rgba(22, 23, 27, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--wx-line-2); }
.wx-hd-in { display: flex; align-items: center; justify-content: space-between; gap: var(--wx-s3); min-height: 64px; width: min(100% - 2 * var(--wx-pad), var(--wx-max)); margin-inline: auto; }
.wx-hd-links { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); font-size: var(--wx-t-sm); }
.wx-hd-links a:not(.wx-btn) { text-decoration: none; color: var(--wx-fg-2); padding: 0.5rem 0; }
.wx-hd-links a:not(.wx-btn):hover { color: var(--wx-fg); }
.wx-hd .wx-btn { min-height: 40px; padding: 0.5rem 1rem; }
@media (max-width: 560px) {
  /* En móvil quedan solo el ancla de temporada y el botón de contacto; el resto va al pie */
  .wx-hd-links .wx-hide-sm { display: none; }
  .wx-hd .wx-btn { padding: 0.5rem 0.85rem; font-size: 0.8125rem; }
}
.wx-ft { border-top: 1px solid var(--wx-line-2); padding-block: var(--wx-s8); color: var(--wx-fg-2); font-size: var(--wx-t-sm); }
.wx-ft-links { display: flex; flex-wrap: wrap; gap: var(--wx-s2) var(--wx-s5); margin-top: var(--wx-s5); }
.wx-ft-links a { color: var(--wx-fg-2); text-decoration: none; padding: 0.4rem 0; }
.wx-ft-links a:hover { color: var(--wx-fg); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 10. Utilidades de móvil ---------- */
@media (max-width: 560px) {
  :root { --wx-section-y: 56px; }
  .wx-btn { width: 100%; }
  .wx-actions .wx-btn + .wx-btn { margin-top: var(--wx-s2); }
}

/* ---------- 11. Componentes de la Home (reutilizables) ---------- */
.wx-brand { display: inline-flex; align-items: center; gap: var(--wx-s3); font-weight: 700; text-decoration: none; color: var(--wx-fg); letter-spacing: -0.01em; }
.wx-brand img { border-radius: 50%; background: var(--wx-fg); padding: 3px; }
.wx-actions { display: flex; flex-wrap: wrap; gap: var(--wx-s3); align-items: center; }
.wx-hero { padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); }
.wx-hero-grid { display: grid; gap: var(--wx-s7); align-items: center; }
.wx-hero-copy { display: grid; gap: var(--wx-s5); justify-items: start; }
.wx-hero-copy .wx-lead { max-width: 30ch; }
.wx-hero-actions { margin-top: var(--wx-s2); }
.wx-hero-card { gap: var(--wx-s4); }
.wx-hero-price { font-size: clamp(3rem, 2.4rem + 2.5vw, 4.5rem); line-height: 1; }
.wx-hero-price span { color: var(--wx-lime); }
.wx-hero-price small { font-size: 1rem; margin-left: 0.4rem; }
@media (min-width: 900px) { .wx-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.wx-split { display: grid; gap: var(--wx-s6); align-items: start; }
@media (min-width: 900px) { .wx-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--wx-s8); } }
.wx-lead--sm { font-size: var(--wx-t-body); max-width: 60ch; margin-top: var(--wx-s3); }
.wx-sec-head { display: flex; flex-wrap: wrap; gap: var(--wx-s4); align-items: end; justify-content: space-between; margin-bottom: var(--wx-s6); }
.wx-steps { list-style: none; margin: var(--wx-s6) 0 0; padding: 0; }
.wx-step-n { font: 700 var(--wx-t-sm) / 1 var(--wx-font-mono); color: var(--wx-lime); letter-spacing: 0.06em; }
.wx-services { margin-top: var(--wx-s6); }
.wx-services .wx-card__foot .wx-btn { width: 100%; }
.wx-check-list--two { grid-template-columns: 1fr; }
@media (min-width: 640px) { .wx-check-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--wx-s6); } }
.wx-note-box { margin-top: var(--wx-s6); padding-top: var(--wx-s5); border-top: 1px solid var(--wx-line-2); }
.wx-note-box .wx-note a { color: var(--wx-fg); }
.wx-works { margin-top: 0; }
.wx-work { text-decoration: none; padding: 0; overflow: hidden; }
.wx-work img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: top; border-bottom: 1px solid var(--wx-line-2); }
.wx-work h3, .wx-work p, .wx-work .wx-tag { margin-inline: clamp(20px, 2.4vw, 32px); }
.wx-work h3 { margin-top: var(--wx-s2); }
.wx-work .wx-tag { align-self: flex-start; margin-bottom: clamp(20px, 2.4vw, 32px); }
.wx-work:hover h3 { color: var(--wx-lime); }
.wx-quote-main { margin-bottom: var(--wx-s4); }
.wx-quote-main blockquote { font-size: var(--wx-t-lead); line-height: 1.45; margin: 0; }
.wx-card blockquote { margin: 0; color: var(--wx-fg); font-size: var(--wx-t-body); }
.wx-card figcaption { color: var(--wx-muted); font-size: var(--wx-t-sm); margin: 0; }
.wx-card figcaption strong { color: var(--wx-fg); }
.wx-faq { display: grid; gap: var(--wx-s3); }
.wx-faq details { background: var(--wx-bg-2); border: 1px solid var(--wx-line-2); border-radius: var(--wx-r-md); padding: 0; }
.wx-faq details[open] { border-color: var(--wx-line); }
.wx-faq summary { cursor: pointer; list-style: none; padding: 1rem 1.25rem; font-weight: 700; display: flex; justify-content: space-between; gap: var(--wx-s4); min-height: 48px; align-items: center; }
.wx-faq summary::-webkit-details-marker { display: none; }
.wx-faq summary::after { content: "+"; font-family: var(--wx-font-mono); color: var(--wx-lime); font-size: 1.25rem; line-height: 1; }
.wx-faq details[open] summary::after { content: "–"; }
.wx-faq details p { padding: 0 1.25rem 1.25rem; color: var(--wx-fg-2); }
.wx-faq details p a { color: var(--wx-lime); }
.wx-cta { text-align: left; border-top: 1px solid var(--wx-line-2); }
.wx-cta-actions { margin-top: var(--wx-s5); }
.wx-cta .wx-lead { margin-top: var(--wx-s3); }
@media (max-width: 560px) {
  .wx-hero-copy .wx-kicker { font-size: 0.6875rem; }
  .wx-sec-head .wx-btn { width: 100%; }
}

/* Anti-desborde móvil: ninguna columna puede ser más ancha que el viewport */
body.wx .wx-container, body.wx .wx-hero-grid, body.wx .wx-split, body.wx .wx-grid > * { min-width: 0; max-width: 100%; }
@media (max-width: 899px) { body.wx .wx-hero-grid, body.wx .wx-split { grid-template-columns: minmax(0, 1fr); } }
body.wx .wx-grid { grid-template-columns: minmax(0, 1fr); }
body.wx .wx-hd-in { max-width: 100%; }
body.wx .wx-faq summary, body.wx .wx-check-list li { overflow-wrap: anywhere; }