/* Página de inicio pública (src/worker/views/home.js), al estilo de Apple.
   Blanco, gris claro (#f5f5f7) y el morado Fidely plano. Sin dorado, sin
   degradados ni resplandores, sin letras con degradado. Tipografía del
   sistema (SF Pro en Mac y iPhone), titulares en peso 600 con la segunda
   frase en gris. Las únicas sombras son las de los objetos (la tarjeta y la
   computadora). Cada sección tiene su propia forma. */

.plain-main:has(> .hm) { display: block; padding: 0; }

.hm {
  --ink: #1d1d1f;
  --soft: #6e6e73;
  --mute: #86868b;
  --line: #d2d2d7;
  --gray: #f5f5f7;
  --purple: #5b34c4;
  --purple-press: #4b28ad;
  --lilac: #f1ecfe;
  --lilac-2: #d9cff8;
  --on-purple: #ddd3ff;
  --lav: #f6f3fe;
  --lilac-bg: #ece5fc;
  --deep: #24114f;
  --on-deep: #b9aae6;
  --margin: clamp(20px, 4vw, 48px);
  --gap: clamp(96px, 12vw, 168px);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Inter', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
  color: var(--ink);
  background: #fff;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.hm * { box-sizing: border-box; }
.hm img { display: block; max-width: 100%; }
.hm a { color: inherit; text-decoration: none; }
.hm :focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.hm ::selection { background: var(--purple); color: #fff; }
.hm h1, .hm h2, .hm h3 { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'Inter', Arial, sans-serif; font-weight: 600; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 var(--margin); }
.center { text-align: center; }

/* ---- Botones y enlaces ---- */
.hm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--purple); color: #fff !important; font-size: 17px; font-weight: 500; white-space: nowrap; transition: background 0.2s, transform 0.15s; }
.hm-btn:hover { background: var(--purple-press); }
.hm-btn:active { transform: scale(0.97); }
.hm-btn-sm { min-height: 30px; padding: 0 14px; font-size: 13px; }
.hm-link { display: inline-flex; align-items: center; gap: 2px; color: var(--purple) !important; font-size: 17px; }
.hm-link:hover { text-decoration: underline; }

/* ---- Navegación ---- */
.hm-nav { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.hm-nav-in { max-width: 1100px; margin: 0 auto; height: 52px; padding: 0 var(--margin); display: flex; align-items: center; gap: 32px; }
.hm-mark { display: flex; color: var(--purple); }
.hm-mark .fidely-wordmark { font-size: 1.2rem; color: var(--purple); }
.hm-links { display: flex; gap: 28px; margin-left: auto; }
.hm-links a, .hm-login { font-size: 13px; color: var(--ink); opacity: 0.8; transition: opacity 0.2s; }
.hm-links a:hover, .hm-login:hover { opacity: 1; }
.hm-nav-end { display: flex; align-items: center; gap: 20px; margin-left: 8px; }

/* ---- Portada: la tarjeta ---- */
.hm-btn-light { background: #fff; color: var(--purple) !important; }
.hm-btn-light:hover { background: var(--lilac); }
.hero { padding: clamp(36px, 7vh, 88px) var(--margin) 0; background: #fff; text-align: center; overflow: hidden; }
.hero-eyebrow { margin: 0; font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; color: var(--purple); letter-spacing: -0.01em; }
.hero h1 { margin-top: 4px; font-size: clamp(46px, min(6.4vw, 10vh), 92px); line-height: 1.03; letter-spacing: -0.04em; }
.hero-lead { margin: 14px auto 0; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.35; color: var(--soft); letter-spacing: -0.015em; }
.hero-ctas { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 26px; flex-wrap: wrap; }

/* La tarjeta del mostrador acostada en 3D y el teléfono que la toca */
.h3-wrap { height: calc(500px * var(--h3s, 1)); margin-top: clamp(8px, 3vh, 40px); }
.h3 { position: relative; width: 720px; height: 500px; left: 50%; margin-left: -360px; perspective: 1700px; transform: scale(var(--h3s, 1)); transform-origin: top center; }
.h3-card {
  position: absolute; left: 80px; top: 120px; width: 560px; height: 353px; border-radius: 30px; overflow: hidden;
  background: radial-gradient(120% 140% at 15% 0%, #7d58ee 0%, #5b34c4 40%, #3f1f98 76%, #2d1675 100%);
  transform: rotateX(52deg) rotateZ(-24deg); transform-style: preserve-3d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
  animation: h3-float 9s ease-in-out infinite;
}
.h3-card::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px); }
.h3-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.26) 46%, transparent 60%); background-size: 250% 100%; animation: h3-shine 7s ease-in-out infinite; }
.h3-wm { position: absolute; left: 40px; top: 34px; color: #fff; }
.h3-wm .fidely-wordmark { font-size: 40px; color: #fff; }
.h3-card .hc-nfc { position: absolute; right: 38px; top: 38px; width: 44px; height: 44px; color: #fff; opacity: 0.9; }
.h3-chip { position: absolute; left: 42px; top: 150px; width: 62px; height: 48px; border-radius: 9px; background: linear-gradient(135deg, #ececf0, #a9a9b2 55%, #dcdce1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
.h3-name { position: absolute; left: 42px; bottom: 38px; color: #ebe4ff; font-size: 17px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.h3-hint { position: absolute; right: 40px; bottom: 36px; color: #fff; font-size: 15px; opacity: 0.85; }
.h3-ring { position: absolute; right: 60px; top: 60px; width: 120px; height: 120px; margin: -60px -60px 0 0; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.85); opacity: 0; }
.h3.is-tap .h3-ring { animation: h3-ring 1.1s ease-out; }
.h3.is-tap .h3-ring.r2 { animation-delay: 0.2s; }
.h3-shadow { position: absolute; left: 50px; top: 300px; width: 640px; height: 170px; background: radial-gradient(closest-side, rgba(40, 20, 90, 0.3), transparent); filter: blur(12px); transform: rotate(-8deg); }
.h3-phone { position: absolute; left: 470px; top: 30px; width: 160px; height: 320px; padding: 7px; border-radius: 34px; background: #1d1d1f; box-shadow: inset 0 0 0 1.5px #3a3a3e, 0 40px 70px -24px rgba(29, 29, 31, 0.45); transform: rotate(16deg); animation: h3-tap 6s cubic-bezier(.45, 0, .25, 1) infinite; }
.h3-screen { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; border-radius: 28px; background: #fff; color: var(--ink); letter-spacing: -0.01em; }
.h3-island { position: absolute; top: 9px; left: 50%; width: 46px; height: 14px; margin-left: -23px; border-radius: 9px; background: #0b0b0d; }
.h3-logo svg { display: block; width: 46px; height: 46px; }
.h3-screen b { font-size: 15px; font-weight: 600; }
.h3-dots { display: grid; grid-template-columns: repeat(2, 30px); gap: 8px; }
.h3-dots i { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 2px dashed #c7c7cc; color: transparent; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.h3-dots i.on { border: 0; background: var(--purple); color: #fff; }
.h3-dots i.just { animation: stamp-in 0.55s cubic-bezier(.2, .9, .3, 1.2); }
.h3-screen small { font-size: 12px; color: var(--soft); }
.h3-screen small.is-done { color: var(--purple); font-weight: 600; }
.h3-toast { position: absolute; left: 50%; bottom: 6px; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 16px; background: #fff; font-size: 15px; white-space: nowrap; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 24px 48px -24px rgba(29, 29, 31, 0.4); transform: translate(-50%, 12px); opacity: 0; transition: opacity 0.4s, transform 0.5s cubic-bezier(.2, .8, .2, 1); }
.h3.is-told .h3-toast { opacity: 1; transform: translate(-50%, 0); }
.h3-ok { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--purple); color: #fff; }
.h3-toast b { font-weight: 600; }
.h3-toast [data-tap-msg] { color: var(--soft); }
@keyframes h3-float { 0%, 100% { transform: rotateX(52deg) rotateZ(-24deg) translateY(-8px); } 50% { transform: rotateX(49deg) rotateZ(-21deg) translateY(4px); } }
@keyframes h3-shine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -60% 0; } }
@keyframes h3-tap { 0%, 100% { transform: rotate(16deg) translate(0, 0); } 38%, 58% { transform: rotate(12deg) translate(-52px, 64px); } }
@keyframes h3-ring { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }

/* La tarjeta que se toca, ahora en Fidelización */
.fid-play { margin-top: 56px; padding: clamp(28px, 5vw, 56px); border-radius: 32px; background: var(--lilac-bg); text-align: center; }
.fid-play-title { margin: 0 0 28px; font-size: 19px; font-weight: 600; color: var(--purple); letter-spacing: -0.015em; }
.fid-play .hc-cfg { max-width: 760px; width: auto; }

.hc { width: min(560px, 100%); margin: 0 auto; }
.hc-front, .hc-cfg { color: var(--ink); }
.hc-tilt { perspective: 1400px; }
.hc-card {
  position: relative; display: block; width: 100%; aspect-ratio: 1.586; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer; container-type: inline-size;
  transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--flip, 0deg)));
  transition: transform 0.9s cubic-bezier(.2, .8, .2, 1);
}
.hc-card.is-moving { transition: transform 0.12s linear; }
.hc-card.is-flipped { --flip: 180deg; }
.hc-card.is-press .hc-front { transform: scale(0.985); }
.hc-face { position: absolute; inset: 0; border-radius: 4.6cqw; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform 0.15s; }
.hc-front {
  display: flex; flex-direction: column; justify-content: space-between; padding: 6cqw 6.4cqw 5.4cqw;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04), 0 50px 90px -40px rgba(0, 0, 0, 0.75);
}
.hc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.hc-brand { display: flex; align-items: center; gap: 2.6cqw; }
.hc-brand .aroma-logo { width: 10.5cqw; height: 10.5cqw; }
.hc-brand b { display: block; font-size: 3.7cqw; font-weight: 600; letter-spacing: -0.02em; }
.hc-brand small { display: block; font-size: 2.4cqw; color: var(--soft); letter-spacing: 0; }
.hc-nfc { width: 6cqw; height: 6cqw; color: var(--mute); }
.hc-stamps { --sz: 15cqw; display: grid; grid-template-columns: repeat(var(--cols, 4), var(--sz)); gap: 2.6cqw; }
.hc-stamps.is-two { --sz: 11cqw; gap: 2cqw 2.6cqw; }
.hc-stamp { position: relative; aspect-ratio: 1; border-radius: 50%; border: 0.36cqw dashed #c7c7cc; display: flex; align-items: center; justify-content: center; color: var(--mute); }
.hc-stamp i { font-style: normal; font-size: calc(var(--sz) * 0.26); font-weight: 600; letter-spacing: 0; }
.hc-stamp b { display: none; color: #fff; }
.hc-stamp b svg { width: calc(var(--sz) * 0.44); height: calc(var(--sz) * 0.44); }
.hc-stamp.is-on { border: 0; background: var(--purple); }
.hc-stamp.is-on b { display: flex; }
.hc-stamp.is-on i { display: none; }
.hc-stamp.is-next { border-style: solid; border-color: var(--purple); color: var(--purple); }
.hc-stamp.just { animation: stamp-in 0.55s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes stamp-in { 0% { transform: scale(1.7) rotate(-14deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; } }
.hc-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.hc-holder { font-size: 2.4cqw; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.hc-mark .fidely-wordmark { font-size: 3.1cqw; color: var(--purple); }
.hc-back {
  transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqw;
  background: var(--purple); color: #fff; text-align: center;
  box-shadow: 0 30px 60px -22px rgba(59, 31, 140, 0.55);
}
.hc-back-ic { display: flex; align-items: center; justify-content: center; width: 13cqw; height: 13cqw; margin-bottom: 1.4cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.hc-back b { font-size: 6.2cqw; font-weight: 600; letter-spacing: -0.03em; }
.hc-back small { font-size: 2.8cqw; color: var(--on-purple); }
.hc-back-cta { margin-top: 2.4cqw; padding: 1.6cqw 4cqw; border-radius: 999px; background: #fff; color: var(--purple); font-size: 2.7cqw; font-weight: 600; }
.hc-msg { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; min-height: 2.6em; margin-top: 16px; }
.hc-status { margin: 0; font-size: 15px; color: var(--soft); text-align: center; }
.hc-status.is-warn { color: var(--purple); }
.hc-skip { border: 0; background: none; padding: 4px; font: inherit; font-size: 15px; color: var(--purple); text-decoration: underline; cursor: pointer; }
.hc-skip:hover { text-decoration: underline; }
.hc-cfg { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px; width: 100%; margin: 6px auto 0; padding: 14px 18px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(91, 52, 196, 0.1); font-size: 14px; letter-spacing: -0.01em; }
.hc-cfg-title { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; color: var(--purple); }
.hc-cfg-row { display: flex; align-items: center; gap: 10px; color: var(--soft); }
.hc-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--lav); }
.hc-seg button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.hc-seg button:hover { color: var(--purple); }
.hc-seg button[aria-pressed="true"] { background: var(--purple); color: #fff; }

/* ---- Frase que se ilumina al bajar ---- */
.say { padding: var(--gap) var(--margin); }
.sec-deep { background: var(--deep); color: #fff; }
.sec-deep .h2 span { color: var(--on-deep); }
.sec-lilac { background: var(--lilac-bg); }
.sec-lav { background: var(--lav); }
.sec-lilac .h2 span, .sec-lav .h2 span { color: #8a7fb0; }
.say-text { max-width: 1000px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'Inter', Arial, sans-serif; font-size: clamp(30px, 4.2vw, 56px); font-weight: 600; line-height: 1.16; letter-spacing: -0.03em; }
.say-text span { color: #4d3b86; transition: color 0.35s ease; }
.say-text span.lit { color: #fff; }

/* ---- Titulares ---- */
.sec { padding: var(--gap) 0; }
.sec-gray { background: var(--gray); }
.h2 { font-size: clamp(38px, 5vw, 68px); line-height: 1.06; letter-spacing: -0.032em; }
.h2 span { display: block; color: var(--mute); }
.sec-purple { background: var(--purple); color: #fff; }
.h2-light span { color: var(--on-purple); }

/* ---- Fidelización: mosaico ---- */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 64px; }
.tile { display: flex; flex-direction: column; padding: 40px; border-radius: 28px; background: var(--lilac-bg); min-height: 400px; }
.tile small { font-size: 17px; font-weight: 600; color: var(--purple); }
.tile h3 { margin-top: 8px; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; letter-spacing: -0.03em; }
.tile p { margin: 12px 0 0; color: var(--soft); max-width: 30ch; }
.ts-row { display: flex; gap: 8px; margin-top: auto; padding-top: 40px; flex-wrap: wrap; }
.ts-row span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 2px dashed #c7c7cc; color: #fff; }
.ts-row span.on { border: 0; background: var(--purple); }
.tp-num { margin-top: auto; padding-top: 32px; }
.tp-num b { display: block; font-size: clamp(72px, 8vw, 112px); font-weight: 600; line-height: 1; letter-spacing: -0.05em; color: var(--purple); font-variant-numeric: tabular-nums; }
.tp-num span { color: var(--soft); }
.tile-wide { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.tile-purple { background: var(--purple); color: #fff; }
.tile-purple small { color: var(--on-purple); }
.tile-purple ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.tile-purple li { display: flex; align-items: center; gap: 16px; font-size: 19px; color: var(--on-purple); }
.tile-purple li b { color: #fff; font-weight: 600; }
.tile-purple li svg { flex-shrink: 0; color: #fff; }

/* ---- Caja: la computadora ---- */
.lp-wrap { margin: 72px auto 0; max-width: 1000px; perspective: 2600px; }
.mac-lid { position: relative; margin: 0 6.5%; transform-origin: 50% 100%; transition: transform 1.5s cubic-bezier(.2, .8, .2, 1) 0.15s; }
.hm-js [data-mac]:not(.is-in) .mac-lid { transform: rotateX(-78deg); }
.mac-bezel { position: relative; padding: 1.7% 1.7% 2.3%; border-radius: 22px 22px 10px 10px; background: #0b0b0d; box-shadow: 0 0 0 1.5px #c3c4c9, 0 0 0 3px #8f9096, 0 50px 90px -50px rgba(36, 17, 79, 0.6); }
.mac-notch { position: absolute; z-index: 4; top: 1.7%; left: 50%; display: flex; align-items: center; justify-content: center; width: 12%; height: 22px; transform: translateX(-50%); border-radius: 0 0 9px 9px; background: #0b0b0d; }
.mac-notch i { width: 7px; height: 7px; border-radius: 50%; background: #1b2232; box-shadow: inset 0 0 0 1.5px #2c3548; }
.mac-screen { position: relative; display: flex; flex-direction: column; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px 8px 4px 4px; background: #fff; }
.mac-bar { display: grid; grid-template-columns: auto auto 1fr; gap: 18px; align-items: center; height: 36px; padding: 0 16px; background: #f4f2f9; border-bottom: 1px solid #e8e3f3; flex-shrink: 0; }
.mac-dots { display: flex; gap: 7px; }
.mac-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.mac-dots i:nth-child(2) { background: #febc2e; }
.mac-dots i:nth-child(3) { background: #28c840; }
.mac-url { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 8px; background: #fff; font-size: 12px; color: var(--soft); box-shadow: 0 0 0 1px #ebe6f5; }
.mac-glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 26%, rgba(255, 255, 255, 0) 42%); }
.mac-base { position: relative; height: 0; padding-bottom: 2.4%; border-radius: 2px 2px 26px 26px / 2px 2px 100% 100%; background: linear-gradient(#ececf0, #cfd0d5 45%, #a9aab0); box-shadow: 0 34px 50px -26px rgba(36, 17, 79, 0.55); }
.mac-base span { position: absolute; top: 0; left: 50%; width: 14%; height: 42%; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: linear-gradient(#b4b5bb, #d6d7dc); }
.lp-app { display: grid; grid-template-columns: 200px 1fr; flex: 1; min-height: 0; overflow: hidden; background: #fff; text-align: left; font-size: 13px; letter-spacing: -0.01em; }
.lp-toast { position: absolute; z-index: 4; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 14px; background: var(--deep); color: #fff; font-size: 12.5px; box-shadow: 0 20px 40px -16px rgba(36, 17, 79, 0.7); }
.lp-toast svg { padding: 3px; border-radius: 50%; background: var(--purple); width: 20px; height: 20px; }
.lp-toast span { color: var(--on-deep); }
.lp-toast b { color: #fff; font-weight: 600; }
.hm-js [data-mac] .lp-toast { opacity: 0; transform: translateY(14px); transition: opacity 0.5s, transform 0.5s cubic-bezier(.2, .8, .2, 1); transition-delay: 1.9s; }
.hm-js [data-mac].is-in .lp-toast { opacity: 1; transform: none; }
.hm-js [data-mac].is-in .lp-new { animation: lp-new 2.4s ease 1.8s both; }
@keyframes lp-new { 0% { background: #e4d9fd; } 100% { background: transparent; } }
.lp-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin: 16px 0 10px; }
.lp-tiles em { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-style: normal; font-size: 11.5px; color: var(--purple); }
.lp-hours { padding: 12px 14px; border-radius: 12px; background: var(--lav); }
.lp-hours small { display: block; color: var(--soft); font-size: 12px; }
.lp-hours span { display: flex; align-items: flex-end; gap: 4px; height: 52px; margin-top: 8px; }
.lp-hours i { flex: 1; border-radius: 3px 3px 1px 1px; background: var(--lilac-2); }
.lp-hours i.top { background: var(--purple); }
.flow { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 56px auto 0; padding: 0; }
.flow li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.flow li > span { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 10px; border-radius: 50%; background: #fff; color: var(--purple); box-shadow: 0 10px 24px -14px rgba(36, 17, 79, 0.5); }
.flow li:not(:last-child)::after { content: ''; position: absolute; top: 28px; left: calc(50% + 44px); right: calc(-50% + 44px); height: 2px; border-radius: 1px; background: #cbbdf3; }
.flow b { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.flow small { color: var(--soft); font-size: 15px; }
.lp-side { display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; background: #f7f6fb; border-right: 1px solid #ececf0; }
.lp-side span { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--soft); }
.lp-side span.on { background: var(--lilac); color: var(--purple); font-weight: 600; }
.lp-logo { margin-bottom: 14px; color: var(--ink) !important; }
.lp-logo .aroma-logo { width: 28px; height: 28px; }
.lp-main { padding: 22px 26px; min-width: 0; }
.lp-head { display: flex; justify-content: space-between; align-items: center; }
.lp-head small { display: block; color: var(--mute); font-size: 12px; }
.lp-head b { font-size: 22px; letter-spacing: -0.02em; }
.lp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--purple); color: #fff; font-weight: 600; }
.lp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-tiles div { padding: 12px 14px; border-radius: 12px; background: var(--lav); }
.lp-tiles small { display: block; color: var(--soft); font-size: 12px; }
.lp-tiles b { font-size: 20px; letter-spacing: -0.02em; }
.lp-row { display: grid; grid-template-columns: 52px 1fr 130px 84px; gap: 12px; align-items: center; padding: 11px 2px; border-top: 1px solid #ececf0; }
.lp-t, .lp-c { color: var(--mute); }
.lp-d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-row b { text-align: right; font-weight: 600; }
.lp-row b.lp-canje { color: var(--purple); }

/* ---- Ganancias: la ecuación ---- */
.eq { margin-top: 64px; max-width: 900px; }
.eq-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.eq-row span { font-size: clamp(17px, 1.6vw, 21px); color: var(--on-purple); }
.eq-row b { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'Inter', Arial, sans-serif; font-size: clamp(32px, 4.4vw, 60px); font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eq-total { border-top: 2px solid #fff; padding-top: 28px; }
.eq-total span { color: #fff; font-weight: 600; }
.eq-total b { font-size: clamp(44px, 7vw, 96px); }
.eq-note { max-width: 56ch; margin: 36px 0 0; color: var(--on-purple); }

/* ---- Inventario: estantería ---- */
.shelf-copy { max-width: 720px; }
.shelf-copy p { margin: 20px 0 0; font-size: 21px; line-height: 1.38; color: var(--soft); }
.shelf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 64px; }
.sh-item { display: flex; flex-direction: column; min-height: 270px; padding: 24px; border-radius: 24px; background: var(--lav); letter-spacing: -0.01em; }
.sh-stock b { display: block; font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.sh-stock small { color: var(--soft); font-size: 14px; }
.sh-bar { display: block; height: 6px; margin: 18px 0 0; border-radius: 3px; background: #ddd3f7; overflow: hidden; }
.sh-bar i { display: block; height: 100%; border-radius: 3px; background: var(--purple); }
.sh-name { margin-top: auto; padding-top: 24px; font-size: 17px; font-weight: 600; }
.sh-note { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; color: var(--soft); }
.sh-item.is-low { background: var(--purple); color: #fff; }
.sh-item.is-low .sh-stock small, .sh-item.is-low .sh-note { color: var(--on-purple) !important; }
.sh-item.is-low .sh-bar { background: rgba(255, 255, 255, 0.25); }
.sh-item.is-low .sh-bar i { background: #fff !important; }

/* ---- Métricas: la gráfica grande ---- */
.mx { margin-top: 64px; padding: 48px 40px 40px; border-radius: 28px; background: #fff; color: var(--ink); }
.mx-chart { position: relative; display: flex; align-items: flex-end; gap: 12px; height: 340px; padding-top: 56px; }
.mx-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.mx-col i { display: block; height: var(--h); border-radius: 8px 8px 2px 2px; background: var(--lilac-2); transform-origin: bottom; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 45ms); }
.mx-col.is-top i { background: var(--purple); }
.mx-col small { margin-top: 10px; text-align: center; font-size: 13px; color: var(--mute); }
.hm-js [data-chart]:not(.is-in) .mx-col i { transform: scaleY(0.02); }
.mx-note { position: absolute; font-size: 14px; color: var(--soft); line-height: 1.3; }
.mx-note b { display: block; color: var(--ink); font-weight: 600; }
.mx-note-top { right: 0; top: 0; text-align: right; }
.mx-note-dic { left: 8.5%; top: 26%; }
.mx-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.mx-facts div { padding: 20px; border-radius: 18px; background: var(--lav); }
.mx-facts small { display: block; font-size: 13px; color: var(--soft); }
.mx-facts b { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; }
.mx-facts .mx-alert { background: var(--purple); color: #fff; }
.mx-alert small { color: var(--on-purple); }
.mx-alert a { display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; font-size: 14px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Tu panel te avisa: línea de tiempo ---- */
.tl { position: relative; list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tl::before { content: ''; position: absolute; top: 7px; left: 16.66%; right: 16.66%; height: 2px; background: #e3e3e8; }
.tl-step { position: relative; display: flex; flex-direction: column; align-items: center; }
.tl-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #c7c7cc; }
.tl-dot.is-on { background: var(--purple); border-color: var(--purple); }
.tl-step small { margin: 14px 0 16px; font-size: 15px; font-weight: 600; color: var(--soft); }
.tl-card { width: 100%; padding: 24px; border-radius: 24px; background: var(--lav); text-align: left; letter-spacing: -0.01em; }
.tl-card b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.tl-card > span { display: block; margin-top: 6px; color: var(--soft); font-size: 15px; }
.tl-msg p { margin: 0 0 14px; padding: 14px 16px; border-radius: 18px 18px 18px 4px; background: #fff; font-size: 15px; line-height: 1.4; }
.cr-send { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--purple); color: #fff; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: background 0.2s, transform 0.15s; }
.cr-send:hover { background: var(--purple-press); }
.cr-send:active { transform: scale(0.96); }
.cr-send.is-sent { background: var(--lilac); color: var(--purple); cursor: default; }
.tl-step:last-child .tl-card { background: var(--lilac); }
.tl-step:last-child .tl-card b { color: var(--purple); }

/* ---- Cómo funciona: video ---- */
.hm-video { position: relative; max-width: 1000px; margin: 64px auto 0; }
.hm-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 24px; background: #ddd3f7; }
.hm-sound { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(91, 52, 196, 0.92); color: #fff; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: transform 0.15s; }
.hm-sound:active { transform: scale(0.96); }
.steps { list-style: none; max-width: 1000px; margin: 40px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; counter-reset: st; }
.steps li { padding-top: 16px; border-top: 1px solid var(--line); counter-increment: st; }
.steps li::before { content: counter(st); display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--purple); }
.steps b { display: block; font-size: 19px; font-weight: 600; }
.steps span { color: var(--soft); }

/* ---- Para cada negocio ---- */
.biz { margin-top: 48px; }
.hm-tabs { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.hm-tab { padding: 0 0 10px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: clamp(19px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em; color: var(--mute); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.hm-tab:hover { color: var(--ink); }
.hm-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--purple); }
.bz-stage { display: grid; grid-template-columns: 5fr 6fr; gap: 32px; align-items: start; margin-top: 36px; padding: 48px; border-radius: 32px; background: var(--lilac-bg); }
.bz-stage[hidden] { display: none; }
.bz-stage:not([hidden]) { animation: bz-in 0.5s cubic-bezier(.2, .7, .2, 1); }
@keyframes bz-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.bz-label { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--purple); }
.bz-card { display: flex; flex-direction: column; gap: 22px; aspect-ratio: 1.586; justify-content: space-between; padding: 28px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 24px 48px -24px rgba(36, 17, 79, 0.35); letter-spacing: -0.01em; }
.bz-top { display: flex; align-items: center; gap: 12px; }
.bz-logo { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--deep); color: #fff; flex-shrink: 0; }
.bz-top b { display: block; font-size: 19px; font-weight: 600; }
.bz-top small { font-size: 14px; color: var(--soft); }
.bz-stamps { display: flex; flex-wrap: wrap; gap: 10px; }
.bz-stamps span { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 2px dashed #c9bef0; color: #fff; }
.bz-stamps span.on { border: 0; background: var(--purple); }
.bz-points b { font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.045em; color: var(--purple); }
.bz-points { color: var(--soft); }
.bz-reward { font-size: 15px; color: var(--soft); }
.bz-reward b { color: var(--ink); font-weight: 600; }
.bz-panel { padding: 22px; border-radius: 24px; background: #fff; letter-spacing: -0.01em; }
.bz-panel-head { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 15px; font-weight: 600; }
.bz-dot { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--deep); color: #fff; font-size: 11px; letter-spacing: 0.02em; }
.bz-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bz-tool { padding: 16px; border-radius: 16px; background: var(--lav); }
.bz-ic { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 10px; background: var(--purple); color: #fff; }
.bz-tool small { display: block; font-size: 13px; color: var(--soft); }
.bz-tool b { display: block; margin-top: 2px; font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.bz-more { margin-top: 32px; }
.bz-more p { max-width: 64ch; margin: 0; color: var(--soft); }
.bz-more p b { color: var(--ink); font-weight: 600; }
.bz-more ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.bz-more li { padding: 8px 14px; border-radius: 999px; background: var(--lav); font-size: 14px; color: var(--purple); }
.bz-more li:last-child { background: var(--purple); color: #fff; }

/* ---- Preguntas ---- */
.faq-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
.hm-faq-list { border-top: 1px solid #dcd3f5; }
.hm-q { border-bottom: 1px solid #dcd3f5; }
.hm-q summary { position: relative; list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.hm-q summary::-webkit-details-marker { display: none; }
.hm-q summary::before, .hm-q summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 14px; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--ink); transition: transform 0.3s; }
.hm-q summary::after { transform: rotate(90deg); }
.hm-q[open] summary::after { transform: rotate(0); }
.hm-q summary:hover { color: var(--purple); }
.hm-q p { margin: 0; padding: 0 44px 24px 0; color: var(--soft); max-width: 62ch; }

/* ---- Cierre ---- */
.sec-cta { padding-bottom: var(--gap); }
.hm-cta-line { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'Inter', Arial, sans-serif; font-size: clamp(40px, 6vw, 84px); font-weight: 600; line-height: 1.15; letter-spacing: -0.035em; max-width: 15em; }
.hm-cta-line label { display: inline; margin: 0; font: inherit; letter-spacing: inherit; color: inherit; cursor: text; }
.hm-cta-line input { display: inline-block; width: 6.6em; height: 1.1em; vertical-align: -0.14em; margin: 0 0.12em; padding: 0 0.22em; border: 0; border-radius: 0.14em; background: rgba(255, 255, 255, 0.14); color: #fff; font: inherit; letter-spacing: inherit; transition: box-shadow 0.2s; }
.hm-cta-line input:focus { outline: none; box-shadow: inset 0 0 0 2px #fff; }
.hm-cta-line input::placeholder { color: rgba(255, 255, 255, 0.5); }
/* style.css fija 16px en los campos del teléfono (evita el zoom de iOS); aquí el campo es parte de la frase. */
.hm .hm-cta-line input { font-size: inherit !important; min-height: 0; }
.hm-cta-line button { display: inline-block; height: 1.1em; vertical-align: -0.14em; padding: 0 0.32em; margin-left: 0.12em; border: 0; border-radius: 999px; background: #fff; color: var(--purple); font: inherit; letter-spacing: inherit; line-height: 1; cursor: pointer; transition: background 0.2s, transform 0.15s; }
.hm-cta-line button:hover { background: var(--lilac); }
.hm-cta-line button:active { transform: scale(0.97); }
.hm-cta-note { margin: 24px 0 0; color: var(--on-purple); }

/* ---- Pie ---- */
.foot { background: var(--deep); font-size: 13px; color: var(--on-deep); }
.foot .fidely-wordmark { color: #fff; }
.foot-in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; }
.foot .fidely-wordmark { font-size: 1.05rem; }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot a { color: #fff; }
.foot a:hover { text-decoration: underline; }

.hm [id] { scroll-margin-top: 60px; }

/* ---- Movimiento ---- */
.hm-js .hm [data-rise] { opacity: 0; transform: translateY(32px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2, .7, .2, 1); }
.hm-js .hm [data-rise].is-in { opacity: 1; transform: none; }
.hm-js .hero .hero-lead[data-rise] { transition-delay: 0.08s; }
.hm-js .hero .hero-ctas[data-rise] { transition-delay: 0.16s; }
.hm-js .hero .h3-wrap[data-rise] { transform: translateY(40px) scale(0.97); transition-delay: 0.24s; transition-duration: 1.2s; }
.hm-js .hero .h3-wrap[data-rise].is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hm *, .hm *::before, .hm *::after { transition: none !important; animation: none !important; }
  .hm-js .hm [data-rise] { opacity: 1; transform: none; }
  .say-text span { color: #fff; }
}

/* ---- Tableta ---- */
@media (max-width: 1068px) {
  .hm-links { display: none; }
  .hm-nav-end { margin-left: auto; }
  .shelf { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .tile { min-height: 0; padding: 32px; }
  .tile-wide { grid-template-columns: 1fr; }
  .lp-app { grid-template-columns: 1fr; }
  .mac-screen { aspect-ratio: auto; }
  .mac-lid { margin: 0; }
  .mac-bezel { border-radius: 16px 16px 8px 8px; padding: 10px 10px 14px; }
  .mac-notch { height: 12px; top: 10px; }
  .mac-url { font-size: 10.5px; padding: 3px 8px; }
  .mac-bar { padding: 0 10px; }
  .lp-top { grid-template-columns: 1fr; }
  .lp-hours { display: none; }
  .lp-toast { left: 12px; right: 12px; bottom: 12px; }
  .flow { grid-template-columns: 1fr; gap: 28px; }
  .flow li:not(:last-child)::after { display: none; }
  .lp-side, .lp-c { display: none; }
  .lp-row { grid-template-columns: 44px 1fr 76px; }
  .lp-main { padding: 18px; }
  .lp-tiles { grid-template-columns: 1fr 1fr; }
  .lp-row:nth-child(n+6) { display: none; }
  .shelf { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: calc(var(--margin) * -1); margin-right: calc(var(--margin) * -1); padding: 0 var(--margin) 8px; scrollbar-width: none; }
  .shelf::-webkit-scrollbar { display: none; }
  .sh-item { flex: 0 0 62%; scroll-snap-align: start; min-height: 240px; }
  .mx { padding: 28px 20px 20px; }
  .mx-chart { height: 240px; gap: 6px; padding-top: 48px; }
  .mx-note-dic { display: none; }
  .mx-col small { font-size: 11px; }
  .mx-facts { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tl { grid-template-columns: 1fr; gap: 28px; }
  .tl::before { display: none; }
  .tl-step { align-items: flex-start; }
  .tl-dot { display: none; }
  .tl-step small { margin: 0 0 10px; }
  .steps { grid-template-columns: 1fr; }
  .bz-stage { grid-template-columns: 1fr; padding: 24px; }
  .faq-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- Teléfono ---- */
@media (max-width: 640px) {
  .hm-login { display: none; }
  .hero h1 { font-size: clamp(40px, 11vw, 52px); }
  .h2 { font-size: clamp(32px, 9vw, 40px); }
  .say-text { font-size: 28px; }
  .tile h3 { font-size: 26px; }
  .hero-ctas { flex-direction: column; gap: 16px; }
  .hc-status { font-size: 14px; }
  .hm-video { margin-left: calc(var(--margin) * -1); margin-right: calc(var(--margin) * -1); }
  .hm-video video { border-radius: 0; }
  .eq-row { flex-direction: column; gap: 4px; padding: 18px 0; }
  .bz-stage { margin-left: calc(var(--margin) * -1); margin-right: calc(var(--margin) * -1); border-radius: 0; padding: 24px var(--margin); }
  .bz-card { aspect-ratio: auto; padding: 22px; }
  .bz-tool { padding: 14px; }
  .bz-tool b { font-size: 15px; }
  .hc-cfg { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .hc-cfg-row { justify-content: space-between; }
  .hc-seg button { padding: 0 9px; font-size: 12px; }
  .hm-cta-line input { display: block; width: 100%; height: 1.3em; margin: 0.15em 0; }
  .foot-in { flex-direction: column; align-items: flex-start; }
}

/* ===== Cómo funciona, Beneficios y Contacto (site-pages.js) ===== */
.hm-links a[aria-current="page"] { opacity: 1; color: var(--purple); font-weight: 600; }
.sec-white { background: #fff; }
.ph { padding: clamp(72px, 10vw, 140px) 0 clamp(64px, 8vw, 112px); background: var(--lav); }
.ph-title { font-size: clamp(44px, 6.4vw, 88px); line-height: 1.04; letter-spacing: -0.038em; }
.ph-title span { display: block; color: #8a7fb0; }
.ph-lead { max-width: 52ch; margin: 24px 0 0; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.4; color: var(--soft); }

/* Para tu cliente: tres pasos con su dibujo */
.cs { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cs-step { display: flex; flex-direction: column; }
.cs-step > small { margin-top: 24px; font-size: 15px; font-weight: 600; color: var(--purple); }
.cs-step > b { margin-top: 4px; font-size: 24px; font-weight: 600; letter-spacing: -0.025em; }
.cs-step > span { margin-top: 6px; color: var(--soft); }
.mv { position: relative; display: flex; align-items: center; justify-content: center; height: 240px; border-radius: 28px; background: var(--lilac-bg); overflow: hidden; }
.mv-tap .mv-nfc { position: relative; display: flex; align-items: center; justify-content: center; width: 150px; height: 96px; border-radius: 14px; background: var(--purple); color: #fff; transform: rotate(-8deg); box-shadow: 0 20px 40px -20px rgba(36, 17, 79, 0.6); }
.mv-tap .mv-nfc i { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 2px solid rgba(91, 52, 196, 0.5); animation: mv-wave 2.4s ease-out infinite; }
.mv-tap .mv-nfc i + i { animation-delay: 0.8s; }
@keyframes mv-wave { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.mv-phone { position: absolute; right: 22%; top: 34px; width: 78px; height: 150px; padding: 5px; border-radius: 18px; background: var(--deep); transform: rotate(10deg); animation: mv-tap 2.4s ease-in-out infinite; }
.mv-phone span { display: block; height: 100%; border-radius: 13px; background: #fff; }
@keyframes mv-tap { 0%, 100% { transform: rotate(10deg) translate(12px, -8px); } 45%, 60% { transform: rotate(10deg) translate(-14px, 10px); } }
.mv-card { display: flex; flex-direction: column; gap: 14px; width: 78%; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 20px 40px -24px rgba(36, 17, 79, 0.45); }
.mv-brand { display: flex; align-items: center; gap: 10px; }
.mv-brand b { font-size: 15px; font-weight: 600; }
.mv-logo { width: 34px; height: 34px; }
.mv-card small { color: var(--soft); font-size: 13px; }
.mv-stamps { display: flex; gap: 8px; }
.mv-stamps span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 2px dashed #c9bef0; color: #fff; }
.mv-stamps span.on { border: 0; background: var(--purple); }
.mv-gift { flex-direction: column; gap: 14px; background: var(--purple); color: #fff; }
.mv-gift span { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.mv-gift b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }

/* Para ti: pasos alternados con la pieza del panel */
.ow { list-style: none; margin: 72px 0 0; padding: 0; display: flex; flex-direction: column; gap: 72px; }
.ow-step { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.ow-step.is-rev .ow-copy { order: 2; }
.ow-copy small { font-size: 15px; font-weight: 600; color: var(--on-deep); }
.ow-copy h3 { margin-top: 8px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.03em; }
.ow-copy p { margin: 14px 0 0; max-width: 40ch; color: var(--on-deep); font-size: 19px; line-height: 1.42; }
.ow-ui { padding: 24px; border-radius: 24px; background: #fff; color: var(--ink); font-size: 15px; letter-spacing: -0.01em; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5); }
.ow-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--lav); color: var(--soft); }
.ow-search span { color: var(--ink); }
.ow-found { display: flex; align-items: center; gap: 8px; margin: 18px 0 12px; font-weight: 600; color: var(--purple); }
.ow-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ow-chips span { padding: 7px 12px; border-radius: 999px; background: var(--lilac-bg); color: var(--purple); font-size: 13px; font-weight: 600; }
.ow-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; }
.ow-row + .ow-row { border-top: 1px solid #ece7fa; }
.ow-row > span:first-child { color: var(--soft); }
.ow-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--lav); font-size: 13px; }
.ow-seg b, .ow-seg i { padding: 5px 11px; border-radius: 999px; font-style: normal; font-weight: 500; }
.ow-seg b { background: var(--purple); color: #fff; }
.ow-qr { display: flex; align-items: center; gap: 22px; }
.ow-qrbox { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; width: 112px; height: 112px; padding: 10px; border-radius: 14px; background: var(--lav); flex-shrink: 0; }
.ow-qrbox i { border-radius: 2px; }
.ow-qrbox i.on { background: var(--deep); }
.ow-qr b { display: block; font-size: 19px; font-weight: 600; }
.ow-qr small { color: var(--soft); }
.ow-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ow-stats div { padding: 14px; border-radius: 14px; background: var(--lav); }
.ow-stats small { display: block; font-size: 12px; color: var(--soft); }
.ow-stats b { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; }
.ow-line { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--purple); color: #fff; }
.ow-line span { flex: 1; }
.ow-line em { font-style: normal; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Beneficios: mosaico */
.bns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bn { display: flex; flex-direction: column; min-height: 260px; padding: 30px; border-radius: 28px; background: var(--lav); letter-spacing: -0.01em; }
.bn-ic { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 13px; background: var(--purple); color: #fff; }
.bn small { font-size: 14px; font-weight: 600; color: var(--purple); }
.bn h3 { margin-top: 6px; font-size: 24px; line-height: 1.15; letter-spacing: -0.025em; }
.bn p { margin: 10px 0 0; color: var(--soft); font-size: 16px; }
.bn-big { grid-column: span 2; grid-row: span 2; }
.bn-big h3 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.06; }
.bn-big p { font-size: 19px; max-width: 34ch; }
.bn-purple { background: var(--purple); color: #fff; }
.bn-purple .bn-ic { background: #fff; color: var(--purple); }
.bn-purple small, .bn-purple p { color: var(--on-purple); }
.bn-lilac { background: var(--lilac-bg); }
.bn-deep { background: var(--deep); color: #fff; }
.bn-deep .bn-ic { background: #fff; color: var(--deep); }
.bn-deep small, .bn-deep p { color: var(--on-deep); }
.bn-stamps { margin-top: auto; padding-top: 32px; }
.bn-stamps .mv-stamps span { width: 64px; height: 64px; border-color: rgba(255, 255, 255, 0.4); }
.bn-stamps .mv-stamps span.on { background: #fff; color: var(--purple); }
.bn-stamps .mv-stamps svg { width: 26px; height: 26px; }
.bn-rate { display: flex; align-items: center; gap: 3px; margin-top: auto; padding-top: 18px; color: var(--purple); }
.bn-rate b { margin-left: 8px; font-size: 22px; font-weight: 600; color: var(--ink); }
.bn-num { margin: auto 0 0 !important; padding-top: 18px; font-size: 34px !important; font-weight: 600; letter-spacing: -0.035em; color: var(--ink) !important; }
.bn-num small { display: block; font-size: 14px; color: var(--soft); font-weight: 400; letter-spacing: 0; }
.bn-bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: auto; padding-top: 18px; }
.bn-bars i { flex: 1; border-radius: 4px 4px 1px 1px; background: rgba(255, 255, 255, 0.3); }
.bn-bars i.top { background: #fff; }
.fc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 64px; }
.fc-item { display: flex; flex-direction: column; gap: 6px; }
.fc-ic { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.1); color: #fff; }
.fc-item b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.fc-item > span:last-child { color: var(--on-deep); }

/* Contacto */
.ph-contact { padding-bottom: clamp(72px, 10vw, 140px); }
.ph-contact .ph-title { font-size: clamp(40px, 4.6vw, 64px); }
.ct { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.ct-ways { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ct-ways li { display: flex; align-items: center; gap: 14px; }
.ct-ways li > span { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--purple); color: #fff; flex-shrink: 0; }
.ct-ways small { display: block; font-size: 14px; color: var(--soft); }
.ct-ways a { font-size: 18px; font-weight: 600; color: var(--purple) !important; }
.ct-ways a:hover { text-decoration: underline; }
.ct-card { padding: clamp(24px, 3.4vw, 40px); border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(91, 52, 196, 0.08), 0 40px 80px -40px rgba(36, 17, 79, 0.35); }
.ct-form { display: flex; flex-direction: column; gap: 16px; }
.ct-form label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.ct-form label small { font-weight: 400; color: var(--mute); }
.hm .ct-form input, .hm .ct-form textarea { width: 100%; margin: 0; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--lav); box-shadow: inset 0 0 0 1px transparent; color: var(--ink); font: inherit; font-size: 17px; font-weight: 400; transition: box-shadow 0.2s, background 0.2s; }
.hm .ct-form input:focus, .hm .ct-form textarea:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--purple); }
.ct-form textarea { resize: vertical; min-height: 130px; }
.ct-form .hm-btn { margin-top: 6px; width: 100%; min-height: 52px; border: 0; cursor: pointer; font: inherit; font-size: 17px; font-weight: 500; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ct-error { margin: 0; padding: 12px 14px; border-radius: 12px; background: #fde8ec; color: #a0153e; font-size: 15px; }
.ct-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ct-sent > span { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--purple); color: #fff; }
.ct-sent h2 { font-size: 32px; letter-spacing: -0.03em; }
.ct-sent p { margin: 0 0 8px; color: var(--soft); }

@media (max-width: 900px) {
  .cs { grid-template-columns: 1fr; gap: 40px; }
  .ow-step { grid-template-columns: 1fr; gap: 24px; }
  .ow-step.is-rev .ow-copy { order: 0; }
  .bns { grid-template-columns: 1fr 1fr; }
  .bn-big { grid-column: 1 / -1; grid-row: auto; }
  .fc { grid-template-columns: 1fr 1fr; }
  .ct { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ph-title { font-size: clamp(40px, 11vw, 52px); }
  .bns { grid-template-columns: 1fr; }
  .bn { min-height: 0; }
  .bn-stamps .mv-stamps span { width: 44px; height: 44px; }
  .fc { grid-template-columns: 1fr; gap: 28px; }
  .ow-stats b { font-size: 22px; }
  .ow-qr { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .mv-tap .mv-nfc i, .mv-phone { animation: none; } }

/* ===== Menú del teléfono, enlaces «Conoce más» y pie con columnas ===== */
.hm-menu-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -8px; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.hm-menu-btn:hover { background: rgba(0, 0, 0, 0.05); }
.hm-menu-btn[aria-expanded="true"] { color: var(--purple); }
.hm-menu { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - 52px); overflow-y: auto; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 30px 60px -30px rgba(36, 17, 79, 0.35); animation: hm-menu-in 0.25s cubic-bezier(.2, .8, .2, 1); }
.hm-menu-in { max-width: 720px; margin: 0 auto; padding: 16px var(--margin) 24px; }
.hm-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hm-menu-item { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 16px; background: var(--lav); }
.hm-menu-item span { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 11px; background: #fff; color: var(--purple); }
.hm-menu-item b { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.hm-menu-item small { font-size: 13px; color: var(--soft); line-height: 1.3; }
.hm-menu-item[aria-current="page"] { background: var(--purple); color: #fff; }
.hm-menu-item[aria-current="page"] small { color: var(--on-purple); }
.hm-menu-more { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 4px 18px; font-size: 15px; }
.hm-menu-more a { color: var(--soft); }
.hm-menu-more a[aria-current="page"] { color: var(--purple); font-weight: 600; }
.hm-menu-cta { width: 100%; }
@keyframes hm-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
html.hm-menu-open { overflow: hidden; }
@media (max-width: 1068px) {
  .hm-menu-btn { display: inline-flex; }
}
@media (min-width: 1069px) {
  .hm-menu { display: none !important; }
}
@media (max-width: 400px) {
  .hm-menu-grid { grid-template-columns: 1fr; }
  .hm-menu-item { flex-direction: row; align-items: center; gap: 12px; }
  .hm-menu-item span { margin: 0; }
  .hm-menu-item small { display: none; }
}

.hm-more { margin: 40px 0 0; }
.center .hm-more, .hm-more.center { text-align: center; }
.hm-more-light .hm-link { color: #fff !important; }
.sec-deep .hm-more .hm-link { color: #fff !important; }

.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-top: 56px; padding-bottom: 40px; }
.foot-brand p { max-width: 30ch; margin: 14px 0 0; font-size: 15px; line-height: 1.45; color: var(--on-deep); }
.foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.foot-col b { margin-bottom: 4px; font-size: 13px; font-weight: 600; color: #fff; }
.foot-col a { color: var(--on-deep); }
.foot-col a:hover { color: #fff; }
.foot-grid + .foot-in { position: relative; }
.foot-grid + .foot-in::before { content: ''; position: absolute; top: 0; left: var(--margin); right: var(--margin); height: 1px; background: rgba(255, 255, 255, 0.12); }
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

/* ===== Teléfono: más corto (inicio, páginas del pie y lo compartido) =====
   En computadora no cambia nada. Menos aire entre secciones, titulares más
   chicos, pasos y líneas de tiempo que se deslizan de lado y textos de apoyo
   solo donde hacen falta. */
@media (max-width: 640px) {
  .hm { --gap: 56px; font-size: 16px; }
  .h2 { font-size: 30px; line-height: 1.1; }
  .sec { padding: var(--gap) 0; }
  .hm-more { margin-top: 20px; }
  .hm-link { font-size: 16px; }

  /* Portada */
  .hero { padding-top: 28px; }
  .hero h1 { font-size: 40px; }
  .hero-lead { font-size: 17px; margin-top: 10px; }
  .hero-ctas { flex-direction: row; justify-content: center; gap: 18px; margin-top: 18px; }
  .hero-ctas .hm-btn { min-height: 44px; font-size: 16px; padding: 0 20px; }

  /* Frase que se ilumina */
  .say { padding: 48px var(--margin); }
  .say-text { font-size: 22px; line-height: 1.25; }

  /* Fidelización */
  .fid-play { margin-top: 24px; padding: 16px; border-radius: 24px; }
  .fid-play-title { margin-bottom: 12px; font-size: 16px; }
  .bento { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .tile { padding: 16px; border-radius: 20px; min-height: 0; }
  .tile small { font-size: 13px; }
  .tile h3 { margin-top: 4px; font-size: 18px !important; line-height: 1.2; }
  .tile p { display: none; }
  .tile-wide { grid-column: 1 / -1; gap: 12px; }
  .tile-purple li { font-size: 14px; gap: 10px; }
  .tile-purple ul { gap: 10px; }
  .tile-purple li svg { width: 18px; height: 18px; }
  .ts-row { padding-top: 14px; gap: 4px; }
  .ts-row span { width: 22px; height: 22px; }
  .ts-row svg { width: 12px; height: 12px; }
  .tp-num { padding-top: 10px; }
  .tp-num b { font-size: 40px; }
  .tp-num span { font-size: 12px; }

  /* Caja */
  .lp-wrap { margin-top: 24px; }
  .flow { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 24px; }
  .flow li > span { width: 44px; height: 44px; margin-bottom: 6px; }
  .flow b { font-size: 13px; line-height: 1.25; }
  .flow small { display: none; }

  /* Ganancias */
  .eq { margin-top: 20px; }
  .eq-row { flex-direction: row; align-items: baseline; gap: 12px; padding: 12px 0; }
  .eq-row span { font-size: 14px; }
  .eq-row b { font-size: 22px; }
  .eq-total b { font-size: 34px; }
  .eq-note { margin-top: 16px; font-size: 14px; }

  /* Inventario */
  .shelf-copy p { margin-top: 10px; font-size: 16px; }
  .shelf { margin-top: 20px; }
  .sh-item { min-height: 0; flex-basis: 52%; }

  /* Métricas */
  .mx { margin-top: 20px; padding: 16px; }
  .mx-chart { height: 170px; padding-top: 38px; }
  .mx-note { font-size: 12px; }
  .mx-facts { margin-top: 16px; gap: 8px; }
  .mx-facts div { padding: 12px; }
  .mx-facts b { font-size: 20px; }

  /* Línea de tiempo, pasos del cliente y del dueño: se deslizan de lado */
  .tl, .cs, .ow { display: flex; flex-direction: row; gap: 10px; margin: 20px calc(var(--margin) * -1) 0; padding: 0 var(--margin) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--margin); scrollbar-width: none; }
  .tl::-webkit-scrollbar, .cs::-webkit-scrollbar, .ow::-webkit-scrollbar { display: none; }
  .tl-step, .cs-step, .ow-step { flex: 0 0 82%; scroll-snap-align: start; }
  .hm-js .cs [data-rise], .hm-js .ow [data-rise] { opacity: 1; transform: none; }
  .tl-step small { margin: 0 0 8px; }
  .tl-card { padding: 16px; border-radius: 18px; }
  .tl-card b { font-size: 16px; }
  .cs-step .mv { height: 170px; border-radius: 20px; }
  .cs-step > small { margin-top: 12px; }
  .cs-step > b { font-size: 19px; }
  .cs-step > span { font-size: 14px; }
  .ow-step, .ow-step.is-rev { display: flex; flex-direction: column; gap: 14px; }
  .ow-step.is-rev .ow-copy { order: 0; }
  .ow-copy h3 { font-size: 21px; }
  .ow-copy p { margin-top: 6px; font-size: 14px; }
  .ow-ui { padding: 14px; border-radius: 18px; font-size: 13px; }

  /* Video y tres pasos */
  .hm-video { margin-top: 24px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
  .steps b { font-size: 14px; line-height: 1.25; }
  .steps span { display: none; }

  /* Negocios */
  .hm-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--margin) * -1); padding-right: var(--margin); }
  .hm-tabs::-webkit-scrollbar { display: none; }
  .hm-tab { flex: 0 0 auto; font-size: 17px; }
  .bz-stage { margin-top: 16px; gap: 16px; }
  .bz-card { gap: 14px; padding: 18px; }
  .bz-panel { padding: 16px; }
  .bz-panel-head { margin-bottom: 12px; }
  .bz-tools { gap: 8px; }
  .bz-tool { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; align-content: center; padding: 10px; }
  .bz-ic { grid-row: span 2; width: 30px; height: 30px; margin: 0; }
  .bz-tool small { font-size: 12px; }
  .bz-tool b { margin: 0; font-size: 14px; }
  .bz-more { display: none; }

  /* Preguntas: las primeras cuatro (el resto en /preguntas) */
  .faq-grid { gap: 8px; }
  .hm-q summary { padding: 16px 36px 16px 0; font-size: 16px; }
  .hm-q p { padding: 0 0 16px; font-size: 15px; }
  #preguntas .hm-q:nth-of-type(n+5) { display: none; }

  /* Páginas del pie */
  .ph { padding: 36px 0 40px; }
  .ph-title { font-size: 36px; }
  .ph-lead { margin-top: 12px; font-size: 16px; }
  .bns { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bn { min-height: 0; padding: 14px; border-radius: 18px; }
  .bn-big { grid-column: 1 / -1; grid-row: auto; }
  .bn-ic { width: 34px; height: 34px; margin-bottom: 10px; border-radius: 10px; }
  .bn small { font-size: 12px; }
  .bn h3, .bn-big h3 { font-size: 16px; line-height: 1.25; }
  .bn p { display: none; }
  .bn-stamps { padding-top: 14px; }
  .bn-stamps .mv-stamps span { width: 36px; height: 36px; }
  .bn-stamps .mv-stamps svg { width: 16px; height: 16px; }
  .bn-num { font-size: 22px !important; }
  .bn-bars { height: 44px; }
  .fc { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
  .fc-ic { width: 40px; height: 40px; margin-bottom: 4px; }
  .fc-item b { font-size: 16px; }
  .fc-item > span:last-child { font-size: 14px; }
  .ct-ways { margin-top: 20px; }

  /* Frase final y pie */
  .sec-cta { padding: 48px 0; }
  .hm-cta-line { font-size: 30px; }
  .hm-cta-note { font-size: 14px; }
  .foot-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 32px; padding-bottom: 20px; }
  .foot-brand p { display: none; }
  .foot-col { gap: 8px; font-size: 13px; }
  .foot-grid + .foot-in { flex-direction: row; justify-content: space-between; padding-top: 16px; padding-bottom: 20px; font-size: 12px; }
}

/* ===== Teléfono: una cosa a la vez =====
   Cada sección llena al menos la pantalla (debajo de la barra de 53 px).
   El alto lo fija home.js en píxeles (--screen-fixed): en el navegador de
   Instagram las unidades de pantalla cambian al bajar y la página temblaba.
   al abrir se ve solo la portada y, al bajar, una sección y luego la otra,
   sin que se asome la siguiente. En computadora no cambia nada. */
@media (max-width: 640px) {
  .hm { --screen: var(--screen-fixed, calc(100svh - 53px)); }
  .h3-wrap { margin-top: 16px; }
  .hm > section, .hm > main > section { min-height: var(--screen); display: flex; flex-direction: column; justify-content: center; }
  .hm > section > .wrap, .hm > main > section > .wrap { width: 100%; }

  /* Portada: el texto y la tarjeta, centrados y solos */
  .hero { padding-top: 12px; padding-bottom: 24px; }

  /* Fidelización: primero la tarjeta para probar (una pantalla) y después,
     aparte, sellos, puntos y «sin trampas» uno debajo de otro. */
  #fidelidad { padding-top: 0; padding-bottom: 0; }
  .fid-intro, .fid-more { min-height: var(--screen); display: flex; flex-direction: column; justify-content: center; padding: 32px 0; }
  .fid-play { margin-top: 18px; padding: 0; border-radius: 0; background: none; }
  .fid-play-title { margin-bottom: 14px; }
  .fid-play .hc-msg { min-height: 0; margin-top: 14px; }
  .fid-play .hc-status { font-size: 14px; line-height: 1.45; }
  /* «En tu panel decides»: sin caja dentro de otra caja, filas limpias */
  .hc-cfg { gap: 18px; margin-top: 26px; padding: 22px 0 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid rgba(91, 52, 196, 0.14); }
  .hc-cfg-title { justify-content: center; font-size: 15px; }
  .hc-cfg-row { flex-direction: column; align-items: stretch; gap: 8px; text-align: left; font-size: 14px; }
  .hc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; }
  .hc-seg button { min-height: 40px; padding: 0 4px; font-size: 14px; white-space: nowrap; }
  .bento { grid-template-columns: 1fr; gap: 12px; margin-top: 0; }
  .tile { padding: 22px; border-radius: 24px; }
  .tile h3 { font-size: 22px !important; }
  .tile-stamps, .tile-points { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 16px; }
  .tile-stamps small, .tile-points small { grid-column: 1; grid-row: 1; }
  .tile-stamps h3, .tile-points h3 { grid-column: 1; grid-row: 2; }
  .tile-stamps .ts-row { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 0; }
  .tile-points .tp-num { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 0; text-align: right; }
  .tile-points .tp-num span { display: block; max-width: 11ch; margin-left: auto; line-height: 1.3; }
  .tile-wide { gap: 16px; }
  .tile-purple ul { gap: 14px; }
  .fid-more .hm-more { margin-top: 24px; }
}