/* ============================================================
   ARMACV — Estilos principales
   ============================================================ */


/* ---------- Variables y reset ---------- */

:root {
  --bg: #FAFAF7;
  --bg-grad-1: #FAFAF7;
  --bg-grad-2: #F1EEE8;
  --ink: #15130F;
  --ink-soft: #4B4740;
  --ink-mute: #8A847A;
  --line: #E8E3DA;
  --accent: #15130F;
  --accent-ink: #FAFAF7;
  --pill: #FFFFFF;
  --shadow-btn: 0 1px 2px rgba(20,18,15,.08), 0 8px 24px -8px rgba(20,18,15,.25);
  --shadow-btn-hover: 0 1px 2px rgba(20,18,15,.10), 0 14px 32px -10px rgba(20,18,15,.35);
}

[data-accent="sage"]   { --accent: #2F5D3A; --accent-ink: #F4F2EC; }
[data-accent="indigo"] { --accent: #2A2E7A; --accent-ink: #F4F2EC; }
[data-accent="coral"]  { --accent: #D4533C; --accent-ink: #FFF8F2; }

[data-bg="warm"]  { --bg-grad-1: #FAFAF7; --bg-grad-2: #F1EEE8; }
[data-bg="white"] { --bg-grad-1: #FFFFFF; --bg-grad-2: #FFFFFF; }
[data-bg="cool"]  { --bg-grad-1: #F7F8FB; --bg-grad-2: #ECEEF5; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; overflow-x: hidden; }

body {
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background-color: #fff;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.6), transparent 60%),
    linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ---------- Layout ---------- */

.page {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  max-width: 100vw;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}


/* ---------- Header / Top bar ---------- */

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 36px;
  font-size: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  perspective: 600px;
}

.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(155deg, #2A2722 0%, var(--ink) 70%);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1;
  padding-bottom: 2px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 -1px 0 rgba(0,0,0,.30) inset,
    0 2px 0 rgba(20,18,15,.18),
    0 6px 12px -3px rgba(20,18,15,.30);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}

.brand:hover .brand-mark {
  transform: translateY(-1px) rotateX(8deg);
}


/* ---------- Hero ---------- */

.hero {
  display: grid;
  place-items: center;
  padding: 0 32px;
  min-height: 0;
}

.hero-inner {
  width: 100%;
  max-width: 760px;
  min-width: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F3EC 100%);
  border: 1px solid var(--line);
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 -1px 0 rgba(20,18,15,.04) inset,
    0 1px 1px rgba(20,18,15,.03),
    0 2px 0 rgba(20,18,15,.05),
    0 8px 16px -8px rgba(20,18,15,.16);
}

.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2F9E5C;
  box-shadow: 0 0 0 4px rgba(47,158,92,.15);
}

h1.title {
  display: block;
  font-family: 'Instrument Serif', 'Geist', serif;
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
  max-width: 16ch;
}

h1.title em {
  font-style: italic;
  color: var(--ink-soft);
}

h2.sub, p.sub {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  width: 100%;
  max-width: 520px;
  overflow-wrap: break-word;
  text-wrap: pretty;
  font-weight: 400;
}


/* ---------- Steps ---------- */

.steps {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F1E9 100%);
  border: 1px solid var(--line);
  padding: 9px 14px 9px 9px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 -1px 0 rgba(20,18,15,.05) inset,
    0 1px 1px rgba(20,18,15,.04),
    0 2px 0 rgba(20,18,15,.06),
    0 6px 14px -6px rgba(20,18,15,.18);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}

.step:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(20,18,15,.06) inset,
    0 2px 2px rgba(20,18,15,.05),
    0 4px 0 rgba(20,18,15,.07),
    0 12px 24px -8px rgba(20,18,15,.22);
}

.step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(155deg, #2A2722 0%, var(--ink) 70%);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -1px 0 rgba(0,0,0,.25) inset,
    0 2px 4px -1px rgba(20,18,15,.4);
}

.step-arrow {
  color: var(--ink-mute);
  font-size: 14px;
  user-select: none;
}


/* ---------- CTA ---------- */

.cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  perspective: 900px;
}

.cta {
  appearance: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
  background: var(--accent);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--accent) 82%, white 10%) 0%,
      var(--accent) 55%,
      color-mix(in oklab, var(--accent) 88%, black 10%) 100%);
  padding: 18px 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 -2px 0 rgba(0,0,0,.32) inset,
    0 1px 0 rgba(255,255,255,.6),
    0 2px 0 color-mix(in oklab, var(--accent) 70%, black 30%),
    0 4px 0 color-mix(in oklab, var(--accent) 55%, black 45%),
    0 6px 0 color-mix(in oklab, var(--accent) 40%, black 60%),
    0 14px 28px -4px rgba(20,18,15,.40),
    0 32px 52px -12px rgba(20,18,15,.35);
  transition:
    transform .26s cubic-bezier(.2,.8,.2,1),
    box-shadow .26s ease,
    background .15s ease;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: translateY(0) translateZ(0);
  will-change: transform;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,0) 60%,
    rgba(0,0,0,.10) 100%);
  pointer-events: none;
  border-radius: inherit;
}

.cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .85s cubic-bezier(.2,.8,.2,1);
}

.cta:hover {
  transform: translateY(-6px) rotateX(8deg);
  box-shadow:
    0 1px 0 rgba(255,255,255,.26) inset,
    0 -2px 0 rgba(0,0,0,.34) inset,
    0 1px 0 rgba(255,255,255,.7),
    0 2px 0 color-mix(in oklab, var(--accent) 70%, black 30%),
    0 4px 0 color-mix(in oklab, var(--accent) 55%, black 45%),
    0 7px 0 color-mix(in oklab, var(--accent) 40%, black 60%),
    0 10px 0 color-mix(in oklab, var(--accent) 30%, black 70%),
    0 22px 38px -6px rgba(20,18,15,.46),
    0 40px 64px -16px rgba(20,18,15,.44);
}

.cta:hover::after { left: 140%; }

.cta:active {
  transform: translateY(2px) rotateX(2deg);
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -2px 0 rgba(0,0,0,.28) inset,
    0 1px 0 rgba(255,255,255,.5),
    0 2px 0 color-mix(in oklab, var(--accent) 70%, black 30%),
    0 8px 16px -6px rgba(20,18,15,.35);
  transition-duration: .08s;
}

.cta .arrow {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 -1px 0 rgba(0,0,0,.20) inset;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .2s ease;
}

.cta:hover .arrow {
  transform: translateX(3px) translateZ(6px);
  background: rgba(255,255,255,.24);
}

.cta-note {
  font-size: 13px;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cta-note svg { flex: 0 0 auto; }


/* ---------- Footer / Bottom strip ---------- */

.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 36px 22px;
  font-size: 12.5px;
  color: var(--ink-mute);
}

.stars { display: inline-flex; align-items: center; gap: 8px; }
.stars-row { display: inline-flex; gap: 2px; color: #E0A93B; }


/* ---------- Logos strip ---------- */

.logos-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 520px;
  min-width: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.logos-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  width: 100%;
  max-width: 100%;
  text-align: center;
  line-height: 1.35;
  overflow-wrap: break-word;
  color: var(--ink-mute);
}

.logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
}

.logo-img {
  width: auto;
  max-width: 100%;
  display: block;
  opacity: 0.38;
  filter: grayscale(1);
  transition: opacity .2s ease;
}

.logo-img:hover        { opacity: 0.62; }
.logo-oxxo             { height: 26px; }
.logo-walmart          { height: 18px; }
.logo-banco-azteca     { height: 13px; }
.logo-imss             { height: 30px; }
.logo-coppel           { height: 20px; }


/* ---------- Decorative CV peek cards ---------- */

/*
  Propiedades compartidas extraídas para evitar duplicación.
  Los valores en px garantizan que no escalen con el viewport.
*/
.peek,
.peek-left {
  /* Dimensiones fijas en px: no se deforman al cambiar viewport */
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;

  /* Fondo: degradado fijo, siempre top→bottom independiente del tamaño */
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF9F3 100%);

  /* Layout interno fijo */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
  -ms-flex-negative: 0;
  flex-shrink: 0;        /* impide compresión en contextos flex/grid */

  pointer-events: none;

  /*
    3D rendering: backface-visibility y transform-style son críticos en Safari.
    Sin ellos el navegador puede decidir renderizar la cara trasera
    o crear artefactos visuales durante la animación.
  */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: flat;
          transform-style: flat;

  /*
    will-change promueve el elemento a su propia capa GPU.
    Garantiza que el compositing sea idéntico en todos los navegadores
    y evita que el repaint de otros elementos afecte a los peek cards.
  */
  will-change: transform;

  /*
    isolation crea un stacking context propio.
    Previene que box-shadow y opacity interactúen de forma diferente
    en Chrome vs Firefox vs Safari.
  */
  isolation: isolate;
}

.peek {
  position: fixed;
  right: -90px;
  top: 50%;
  /*
    perspective() DEBE ser el primer valor del transform.
    translateY(-50%) centra verticalmente respecto a top:50%.
    Orden: perspective → translate → rotaciones.
  */
  -webkit-transform: perspective(1200px) translateY(-50%) rotateY(-14deg) rotate(8deg);
          transform: perspective(1200px) translateY(-50%) rotateY(-14deg) rotate(8deg);
  -webkit-transform-origin: right center;
          transform-origin: right center;

  /* Dimensiones fijas: la tarjeta nunca cambia de tamaño */
  width: 260px;
  height: 340px;

  /* Sombras en px fijos: no escalan, idénticas en todos los navegadores */
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 0 rgba(20,18,15,.05),
    0 30px 60px -20px rgba(20,18,15,.22),
    0 14px 28px -8px rgba(20,18,15,.16);

  opacity: .94;

  -webkit-transition: -webkit-transform .9s cubic-bezier(.2,.8,.2,1);
          transition: transform .9s cubic-bezier(.2,.8,.2,1);
}

.peek-left {
  position: fixed;
  left: -110px;
  top: 50%;
  -webkit-transform: perspective(1200px) translateY(-50%) rotateY(14deg) rotate(-7deg);
          transform: perspective(1200px) translateY(-50%) rotateY(14deg) rotate(-7deg);
  -webkit-transform-origin: left center;
          transform-origin: left center;

  width: 240px;
  height: 320px;

  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 0 rgba(20,18,15,.05),
    0 30px 60px -20px rgba(20,18,15,.20),
    0 14px 28px -8px rgba(20,18,15,.14);

  opacity: .88;

  -webkit-transition: -webkit-transform .9s cubic-bezier(.2,.8,.2,1);
          transition: transform .9s cubic-bezier(.2,.8,.2,1);
}

.peek-title {
  font-family: 'Instrument Serif', serif;
  font-size: 18px;            /* px fijo: no responde a zoom de fuente del SO */
  line-height: 1.2;           /* unitless: consistente entre navegadores */
  color: var(--ink);
  margin: 0 0 6px 0;          /* margin explícito: evita reset inconsistente */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.peek-line {
  /* Dimensiones fijas: la línea siempre mide exactamente esto */
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #ECE8DF;

  /* Evita que flex compress las líneas decorativas */
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;

  /* display: block previene inconsistencias inline en algunos navegadores */
  display: block;
}

/* Anchos relativos al contenedor fijo (260px / 240px), no al viewport */
.peek-line.short { width: 55%; }
.peek-line.mid   { width: 78%; }
.peek-line.dark  { background: #D7D2C6; }

.peek-block {
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.peek-line-gap { margin-top: 8px; }


/* ---------- Animations ---------- */

@-webkit-keyframes rise {
  0%   { opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); }
  100% { opacity: 1; -webkit-transform: translateY(0);   transform: translateY(0); }
}
@keyframes rise {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.hero-inner > * {
  -webkit-animation: rise .6s cubic-bezier(.2,.8,.2,1) both;
          animation: rise .6s cubic-bezier(.2,.8,.2,1) both;
}
.hero-inner > *:nth-child(1) { -webkit-animation-delay: .04s; animation-delay: .04s; }
.hero-inner > *:nth-child(2) { -webkit-animation-delay: .12s; animation-delay: .12s; }
.hero-inner > *:nth-child(3) { -webkit-animation-delay: .20s; animation-delay: .20s; }
.hero-inner > *:nth-child(4) { -webkit-animation-delay: .28s; animation-delay: .28s; }
.hero-inner > *:nth-child(5) { -webkit-animation-delay: .36s; animation-delay: .36s; }
.hero-inner > *:nth-child(6) { -webkit-animation-delay: .44s; animation-delay: .44s; }
.peek,
.peek-left {
  -webkit-animation: rise .9s cubic-bezier(.2,.8,.2,1) .25s both;
          animation: rise .9s cubic-bezier(.2,.8,.2,1) .25s both;
}


/* ---------- Media queries ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero-inner > *,
  .peek,
  .peek-left {
    -webkit-animation: none;
            animation: none;
    -webkit-transition: none;
            transition: none;
  }
}

@media (max-width: 1100px) {
  .peek, .peek-left { display: none; }
}

@media (max-width: 600px) {
  .top         { padding: 16px 20px; }
  .hero        { padding: 0 20px; overflow: hidden; }
  .hero-inner  { gap: 22px; }
  h2.sub, p.sub { max-width: 28ch; font-size: 14px; }
  .steps       { gap: 8px; }
  .step        { max-width: 100%; font-size: 13px; padding: 7px 12px 7px 7px; }
  .step-arrow  { display: none; }
  .cta         { font-size: 15px; padding: 16px 30px; }
  .bottom      { padding: 14px 20px 18px; font-size: 12px; }
  .bottom .hide-sm { display: none; }
  .logos-label { max-width: 32ch; font-size: 10px; letter-spacing: .05em; }
  .logos-row   { max-width: 280px; gap: 12px 14px; }
  .logos-strip { max-width: 100%; gap: 10px; padding-top: 16px; overflow: hidden; }
  .logo-oxxo         { height: 22px; }
  .logo-walmart      { height: 15px; }
  .logo-banco-azteca { height: 11px; }
  .logo-imss         { height: 24px; }
  .logo-coppel       { height: 16px; }
}

@media (max-height: 680px) {
  .hero-inner  { gap: 18px; }
  h1.title     { font-size: clamp(36px, 7vw, 56px); }
  .top         { padding: 14px 28px; }
  .bottom      { padding: 12px 28px 14px; }
  .logos-strip { gap: 10px; padding-top: 14px; }
}


/* ============================================================
   Tweaks panel (herramienta de diseño — no afecta producción)
   ============================================================ */

.twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:280px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;background:rgba(250,249,247,.78);color:#29261b;-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);border:.5px solid rgba(255,255,255,.6);border-radius:14px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}
.twk-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 8px 10px 14px;cursor:move;user-select:none}
.twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}
.twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);width:22px;height:22px;border-radius:6px;cursor:default;font-size:13px;line-height:1}
.twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}
.twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}
.twk-body::-webkit-scrollbar{width:8px}
.twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}
.twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;border:2px solid transparent;background-clip:content-box}
.twk-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);border:2px solid transparent;background-clip:content-box}
.twk-row{display:flex;flex-direction:column;gap:5px}
.twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
.twk-lbl{display:flex;justify-content:space-between;align-items:baseline;color:rgba(41,38,27,.72)}
.twk-lbl>span:first-child{font-weight:500}
.twk-val{color:rgba(41,38,27,.5);font-variant-numeric:tabular-nums}
.twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(41,38,27,.45);padding:10px 0 0}
.twk-sect:first-child{padding-top:0}
.twk-field{appearance:none;width:100%;height:26px;padding:0 8px;border:.5px solid rgba(0,0,0,.1);border-radius:7px;background:rgba(255,255,255,.6);color:inherit;font:inherit;outline:none}
.twk-field:focus{border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85)}
select.twk-field{padding-right:22px;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='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");background-repeat:no-repeat;background-position:right 8px center}
.twk-slider{appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:6px 0;border-radius:999px;background:rgba(0,0,0,.12);outline:none}
.twk-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
.twk-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
.twk-seg{position:relative;display:flex;padding:2px;border-radius:8px;background:rgba(0,0,0,.06);user-select:none}
.twk-seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:6px;background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.12);transition:left .15s cubic-bezier(.3,.7,.4,1),width .15s}
.twk-seg.dragging .twk-seg-thumb{transition:none}
.twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;border-radius:6px;cursor:default;padding:4px 6px;line-height:1.2;overflow-wrap:anywhere}
.twk-toggle{position:relative;width:32px;height:18px;border:0;border-radius:999px;background:rgba(0,0,0,.15);transition:background .15s;cursor:default;padding:0}
.twk-toggle[data-on="1"]{background:#34c759}
.twk-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.twk-toggle[data-on="1"] i{transform:translateX(14px)}
.twk-num{display:flex;align-items:center;height:26px;padding:0 0 0 8px;border:.5px solid rgba(0,0,0,.1);border-radius:7px;background:rgba(255,255,255,.6)}
.twk-num-lbl{font-weight:500;color:rgba(41,38,27,.6);cursor:ew-resize;user-select:none;padding-right:8px}
.twk-num input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 8px 0 0;outline:none;color:inherit;-moz-appearance:textfield}
.twk-num input::-webkit-inner-spin-button,.twk-num input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.twk-num-unit{padding-right:8px;color:rgba(41,38,27,.45)}
.twk-btn{appearance:none;height:26px;padding:0 12px;border:0;border-radius:7px;background:rgba(0,0,0,.78);color:#fff;font:inherit;font-weight:500;cursor:default}
.twk-btn:hover{background:rgba(0,0,0,.88)}
.twk-btn.secondary{background:rgba(0,0,0,.06);color:inherit}
.twk-btn.secondary:hover{background:rgba(0,0,0,.1)}
.twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:22px;border:.5px solid rgba(0,0,0,.1);border-radius:6px;padding:0;cursor:default;background:transparent;flex-shrink:0}
.twk-swatch::-webkit-color-swatch-wrapper{padding:0}
.twk-swatch::-webkit-color-swatch{border:0;border-radius:5.5px}
.twk-swatch::-moz-color-swatch{border:0;border-radius:5.5px}