/* Copo Loyalty — hero "noche".
   Mismo marco, pill de navegación y tipografía que copopos.com (Manrope 500 +
   acento Instrument Serif), en versión oscura: nieve de fondo, un anillo 3D de
   tarjetas Wallet y el dashboard de Loyalty al frente. */
:root {
  --night: #060A14;
  --night-ink: #0B1220;
  --night-line: rgba(255,255,255,.11);
  --night-muted: #A7B0C4;
  --night-accent: #A9BDFF;
}

/* ── NAV: la misma barra de copopos.com (pill con el fondo del tema) ── */
nav.site-nav.nav-pill {
  position: absolute; top: 38px; left: 50%; right: auto; transform: translateX(-50%);
  width: min(900px, calc(100% - 80px)); height: 66px; padding: 8px 10px 8px 22px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg);
  box-shadow: 0 8px 30px #14243b08; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.nav-pill .nav-links { gap: 25px; }
.nav-pill .nav-links a:not(.btn-nav):not(.btn-ghost) { font-size: 13px; }
.nav-pill .nav-actions { gap: 8px; }
.nav-pill .nav-actions > .btn-ghost { display: none; }
.nav-pill .btn-nav { display: inline-flex; gap: 18px; align-items: center; min-height: 46px; border-radius: 999px; box-shadow: none; }
.nav-pill .theme-toggle, .nav-pill .hamburger { width: 44px; height: 44px; }
.nav-pill .hamburger { border-radius: 50%; }
.mobile-panel { position: absolute; inset: 112px 28px auto; border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 12px 30px #15243b15; }
.mobile-panel .btn-nav { border-radius: 999px; }
.nav-pill :is(a, button):focus-visible,
.hero-night :is(a, button):focus-visible { outline: 3px solid #4169e8; outline-offset: 4px; }

/* ── HERO: el marco redondeado del POS, de noche ─────────────────── */
.hero.hero-night {
  margin: 16px; padding: 0; height: calc(100svh - 32px); min-height: 700px; max-height: 1100px;
  border-radius: 28px; position: relative; overflow: hidden; isolation: isolate;
  background: var(--night); color: #fff; text-align: center;
}
.hero-night > .lp-stage { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.lp-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 38% at 50% 0%, rgba(46,92,246,.14), rgba(46,92,246,0) 70%),
    linear-gradient(180deg, rgba(46,92,246,0) 38%, rgba(46,92,246,.05) 54%,
      rgba(46,92,246,.065) 68%, rgba(46,92,246,.04) 100%),
    var(--night);
}
/* copos de nieve: dos divs de 1px cuyo campo entero es un box-shadow generado en JS */
.lp-snow { position: absolute; left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%; background: transparent; }

/* Lienzo de diseño fijo de 1172×657, escalado con un solo transform.
   k = min(anchoMarco / W, altoMarco / 560): 560 (no 657) llena el ancho y deja que
   el dashboard se salga por abajo en lugar de dejar franjas vacías. */
.lp-canvas {
  position: absolute; left: 50%; top: 0; width: 1172px; height: 657px;
  transform: translateX(-50%) scale(var(--k, 1)); transform-origin: 50% 0;
}
/* El texto vive en px reales, igual que el .hero-copy del POS (mismos tamaños en
   cualquier pantalla); solo el anillo y el dashboard van en el lienzo escalado. */
.lp-stack {
  position: absolute; left: 0; right: 0; top: 0; z-index: 300; padding: 136px 28px 0;
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.lp-stack > * { pointer-events: auto; }
/* viñeta del POS (versión oscura) */
.lp-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; margin: 0;
  border-radius: 999px; border: 1px solid #34496a; background: #182844;
  color: #e7edff; font-size: 12px; font-weight: 600;
}
.lp-badge > span { width: 6px; height: 6px; border-radius: 50%; background: #2e5cf6; flex-shrink: 0; }
/* titular del POS: Manrope 500 + acento Instrument Serif */
.hero-night .lp-h1 {
  margin: 20px auto 18px; max-width: 850px;
  font-family: 'Manrope', sans-serif; font-size: clamp(44px, 5.8vw, 82px); font-weight: 500;
  line-height: 1.04; letter-spacing: -.055em; color: #f3f6fc;
}
.hero-night .lp-h1 em { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; color: #a9bdff; letter-spacing: -.025em; }
.lp-sub { max-width: 570px; font-size: 15px; line-height: 1.7; margin: 0 auto 23px; color: #d0d9e9; }
.lp-sub b { color: #fff; font-weight: 600; }
.lp-cta { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0; }
/* botón principal del POS (.hero-contact), versión modo oscuro */
.lp-contact {
  display: inline-flex; align-items: center; gap: 18px; min-height: 52px; padding: 8px 8px 8px 23px;
  border: 0; border-radius: 999px; background: #e8edff; color: #15243b;
  font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background 180ms, transform 180ms;
}
.lp-contact > span { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #15243b15; font-size: 21px; }
@media (hover: hover) and (pointer: fine) { .lp-contact:hover { transform: translateY(-2px); background: #fff; } }
.lp-contact:active { transform: scale(.98); }
.lp-cta-alt {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 13px; font-weight: 600; color: #f3f6fc; text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .lp-cta-alt:hover { text-decoration: underline; text-underline-offset: 5px; }
}
.lp-micro { margin: 20px 0 0; color: #d0d9e9; font-size: 11px; line-height: 1.7; }

/* ── ANILLO 3D DE TARJETAS WALLET ────────────────────────────────── */
.lp-showcase { position: absolute; left: 0; top: 0; width: 1172px; height: 0; transform: translateY(var(--sshift, 0px)); }
.lp-ring {
  position: absolute; left: 0; top: 0; width: 1172px; height: 657px; z-index: 5; pointer-events: none;
  perspective: 891px; perspective-origin: 586px 918px; transform-style: preserve-3d;
  transform: scale(var(--rs, 1)); transform-origin: 586px 595px;
}
.lp-card {
  /* proporción del pass real de Wallet (≈ 2:3) */
  position: absolute; left: 586px; top: 557px; width: 140px; height: 210px; margin: -105px 0 0 -70px;
  border-radius: 9px; overflow: hidden; background: var(--pc-bg); color: var(--pc-fg);
  box-shadow: 0 24px 46px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.5);
  backface-visibility: hidden; will-change: transform; visibility: hidden;
  font-family: -apple-system, 'SF Pro Text', 'Manrope', sans-serif; text-align: left;
}
.lp-card::after {
  content: ""; position: absolute; inset: 0; border-radius: 9px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 16px 30px rgba(255,255,255,.04);
}
.pc-head { position: absolute; left: 8px; right: 8px; top: 8px; height: 24px; display: flex; align-items: center; gap: 6px; }
.pc-logo {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: #fff; color: var(--pc-accent);
  font-size: 11px; font-weight: 800;
}
.pc-logo img, .pc-stamps img { width: 100%; height: 100%; object-fit: cover; }
.pc-logo.is-mark { background: transparent; }
.pc-logo.is-mark img { object-fit: contain; }
.pc-name { font-size: 9.2px; font-weight: 800; letter-spacing: -.01em; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-count { margin-left: auto; text-align: right; line-height: 1; flex: 0 0 auto; }
.pc-count small { display: block; font-size: 4.2px; font-weight: 700; letter-spacing: .04em; }
.pc-count strong { display: block; margin-top: 1px; font-size: 10px; font-weight: 500; }
.pc-stamps {
  position: absolute; left: 7px; right: 7px; top: 38px; padding: 5px 6px; border-radius: 6px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 5px; background: var(--pc-panel, transparent);
}
.pc-stamps i {
  aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  border: .7px dashed var(--pc-ring); background: transparent;
}
.pc-stamps i b { width: 62%; height: 62%; border-radius: 50%; overflow: hidden; opacity: .55; display: grid; place-items: center; }
.pc-stamps i.on { border: 1.3px solid var(--pc-ring); background: #fff; }
.pc-stamps i.on b { width: 84%; height: 84%; opacity: 1; }
.pc-stamps.is-plain i b { display: none; }
.pc-stamps.is-plain i.on { background: var(--pc-fg); border-color: var(--pc-fg); }
.pc-mono { font-size: 6px; font-weight: 800; color: var(--pc-accent); }
.pc-meta {
  position: absolute; left: 8px; right: 8px; top: 102px;
  display: grid; grid-template-columns: .9fr 1.3fr 1.1fr; gap: 4px; line-height: 1;
}
.pc-meta small { display: block; font-size: 3.9px; font-weight: 700; letter-spacing: .03em; }
.pc-meta strong { display: block; margin-top: 2px; font-size: 5.8px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-qr {
  position: absolute; left: 50%; top: 122px; width: 74px; margin-left: -37px;
  padding: 5px 5px 3px; border-radius: 4px; background: #fff; color: #0B1220;
}
.pc-qr span { display: block; width: 64px; height: 64px; background: var(--qr) center / 100% 100% no-repeat; }
.pc-qr em { display: block; margin-top: 2px; text-align: center; font-style: normal; font-size: 5.2px; font-weight: 500; letter-spacing: .02em; }

/* ── DASHBOARD AL FRENTE (se sale por abajo) ─────────────────────── */
.lp-browser {
  position: absolute; left: 165px; top: 558px; width: 842px; height: calc(99px + var(--fill, 0px));
  border-radius: 28px 28px 0 0; overflow: hidden; z-index: 100;
  box-shadow: 0 -14px 44px rgba(0,0,0,.55); text-align: left;
}
.lp-browser::before { content: ""; position: absolute; left: 0; right: 0; top: 42px; bottom: 0; background: rgba(20,22,30,.82); }
.lp-bar {
  position: absolute; left: 0; top: 0; width: 100%; height: 42px;
  background: linear-gradient(180deg, rgba(20,28,56,.5), rgba(14,20,40,.6));
  -webkit-backdrop-filter: blur(6px) saturate(112%); backdrop-filter: blur(6px) saturate(112%);
}
.lp-dots { position: absolute; left: 27px; top: 17px; display: flex; gap: 3px; }
.lp-dots i { width: 7.6px; height: 7.6px; border-radius: 50%; }
.lp-dots i:nth-child(1) { background: #EE5C62; } .lp-dots i:nth-child(2) { background: #F6B719; } .lp-dots i:nth-child(3) { background: #12C02F; }
.lp-omni {
  position: absolute; left: 246px; top: 8px; width: 336px; height: 26px; border-radius: 999px;
  background: rgba(9,13,26,.93); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 9.5px; color: rgba(255,255,255,.72);
}
.lp-omni svg { width: 9px; height: 9px; opacity: .72; }
.lp-page {
  position: absolute; left: 7px; right: 6px; top: 42px; bottom: 0; overflow: hidden;
  border-radius: 12px 12px 0 0; background: #F6F8FC; color: #0B1220;
  display: grid; grid-template-columns: 138px 1fr;
}
.db-side { background: #fff; border-right: 1px solid #E4E9F2; padding: 16px 10px; }
.db-logo { display: flex; align-items: center; gap: 5px; padding: 0 4px; font-size: 11px; font-weight: 800; letter-spacing: -.02em; }
.db-logo img { width: 15px; height: 15px; }
.db-kicker { display: block; margin: 3px 0 0 4px; font-size: 5px; font-weight: 700; letter-spacing: .18em; color: #667085; }
.db-nav { margin-top: 18px; display: grid; gap: 4px; }
.db-nav span { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 8px; font-size: 7px; font-weight: 600; color: #4A5670; }
.db-nav span.on { background: #2E5CF6; color: #fff; }
.db-nav i { width: 7px; height: 7px; border-radius: 2px; border: 1px solid currentColor; }
.db-main { padding: 16px 20px 0; min-width: 0; }
.db-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.db-top h4 { font-size: 15px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.db-top p { margin-top: 3px; font-size: 6.4px; color: #4A5670; }
.db-actions { display: flex; gap: 5px; }
.db-actions span { padding: 5px 9px; border-radius: 7px; border: 1px solid #E4E9F2; background: #fff; font-size: 6.2px; font-weight: 700; color: #0B1220; white-space: nowrap; }
.db-actions span.on { background: #2E5CF6; border-color: #2E5CF6; color: #fff; }
.db-tabs { display: flex; gap: 14px; margin-top: 12px; border-bottom: 1px solid #E4E9F2; }
.db-tabs span { padding: 6px 0; font-size: 6.4px; font-weight: 700; color: #4A5670; white-space: nowrap; }
.db-tabs span.on { color: #2E5CF6; box-shadow: inset 0 -1.5px 0 #2E5CF6; }
.db-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.db-kpis div { background: #fff; border: 1px solid #E4E9F2; border-radius: 9px; padding: 9px 10px; }
.db-kpis small { display: block; font-size: 5.4px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #667085; }
.db-kpis strong { display: block; margin-top: 4px; font-size: 15px; font-weight: 800; letter-spacing: -.03em; }
.db-kpis em { display: block; margin-top: 2px; font-style: normal; font-size: 5.4px; font-weight: 700; color: #16A34A; }
.db-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; margin-top: 8px; }
.db-card { background: #fff; border: 1px solid #E4E9F2; border-radius: 9px; padding: 10px; }
.db-card h5 { font-size: 7px; font-weight: 800; }
.db-bars { display: flex; align-items: flex-end; gap: 5px; height: 70px; margin-top: 10px; }
.db-bars i { flex: 1; border-radius: 3px 3px 0 0; background: #DCE4FF; }
.db-bars i.on { background: #2E5CF6; }
.db-list { margin-top: 6px; display: grid; }
.db-list span { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid #EEF1F8; font-size: 6px; color: #4A5670; }
.db-list span b { color: #0B1220; font-weight: 700; }

@media (min-width: 1500px) and (min-height: 950px) { .lp-stack { padding-top: 160px; } }
@media (max-width: 1000px) { .nav-pill .nav-links { gap: 16px; } .lp-stack { padding-top: 135px; } }
@media (max-width: 767px) {
  nav.site-nav.nav-pill { top: 28px; width: calc(100% - 56px); padding-left: 16px; }
  .lp-stack { padding: 124px 18px 0; }
  .hero-night .lp-h1 { font-size: clamp(43px, 8vw, 62px); margin-top: 24px; }
  .lp-sub { max-width: 440px; }
  .lp-micro { max-width: 320px; margin: 15px auto 0; }
}

/* ── TELÉFONO (≤700): columna real, mismo contenido y mismo orden ── */
@media (max-width: 700px) {
  .hero.hero-night { margin: 12px; height: calc(100svh - 24px); min-height: 760px; border-radius: 22px; }
  .hero-night > .lp-stage { display: flex; flex-direction: column; }
  .lp-stack { position: relative; flex: 0 0 auto; }
  .lp-canvas {
    position: relative; left: auto; top: auto; width: 100%; height: auto; flex: 1 1 auto; transform: none;
    display: flex; flex-direction: column; padding: 0 20px;
  }
  .lp-showcase { position: relative; left: auto; top: auto; flex: 1 1 auto; width: 100%; height: auto; min-height: 230px; transform: none; }
  /* el anillo conserva su geometría 3D completa: solo se reubica y se recorta */
  .lp-ring { left: 50%; margin-left: -586px; top: -405px; transform-origin: 586px 466px; transform: scale(1.02); }
  .lp-browser { left: 50%; transform: translateX(-50%); top: 206px; bottom: 0; width: calc(100% + 40px); height: auto; border-radius: 22px 22px 0 0; }
  .lp-bar { height: 36px; }
  .lp-dots { top: 14px; left: 20px; }
  .lp-omni { left: 50%; transform: translateX(-50%); width: 58%; height: 24px; top: 6px; font-size: 10px; }
  .lp-page { top: 36px; grid-template-columns: 1fr; }
  .db-side { display: none; }
  .db-main { padding: 16px 16px 0; }
  .db-top h4 { font-size: 19px; }
  .db-top p { font-size: 10px; }
  .db-actions { display: none; }
  .db-tabs { gap: 16px; overflow: hidden; }
  .db-tabs span { font-size: 10.5px; padding: 8px 0; }
  .db-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .db-kpis div { padding: 11px 12px; border-radius: 12px; }
  .db-kpis small { font-size: 8.5px; }
  .db-kpis strong { font-size: 22px; }
  .db-kpis em { font-size: 9px; }
  .db-row { display: none; }
}
@media (max-width: 600px) {
  /* sin espacio para marca + botón en la pill: el botón queda en el menú y en el hero */
  .nav-pill .nav-actions > .btn-nav { display: none; }
}
@media (max-width: 420px) {
  .lp-stack { padding-left: 16px; padding-right: 16px; }
  .lp-badge { font-size: 11px; }
  .lp-cta { gap: 3px; flex-direction: column; }
  .hero-night .lp-h1 { font-size: clamp(37px, 10.9vw, 45px); }
  .lp-sub { font-size: 14px; }
}

/* ── ENTRADA: corre una sola vez y la página queda quieta ─────────
   Usa translate/scale/clip-path individuales, no `transform`: transform ya lo
   ocupan el escalado del lienzo, el centrado de la barra y el anillo, y así se
   componen en lugar de pisarse. */
html.intro nav.site-nav.nav-pill { opacity: 0; translate: 0 -9px; }
html.intro .nav-pill .brand, html.intro .nav-pill .nav-links a,
html.intro .nav-pill .nav-actions > * { opacity: 0; translate: 0 6px; }
html.intro .lp-badge { opacity: 0; translate: 0 11px; scale: .985; }
html.intro .lp-h1 .lp-line { opacity: 0; translate: 0 15px; clip-path: inset(100% 0 -30% 0); }
html.intro .lp-sub, html.intro .lp-micro { opacity: 0; translate: 0 10px; }
html.intro .lp-cta { opacity: 0; translate: 0 13px; scale: .985; }
html.intro .lp-ring { opacity: 0; translate: 0 18px; scale: .99; }
html.intro .lp-browser { opacity: 0; translate: 0 26px; }
.lp-h1 .lp-line { display: block; text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
  html.intro nav.site-nav.nav-pill, html.intro .nav-pill .brand, html.intro .nav-pill .nav-links a,
  html.intro .nav-pill .nav-actions > *, html.intro .lp-badge, html.intro .lp-h1 .lp-line,
  html.intro .lp-sub, html.intro .lp-micro, html.intro .lp-cta, html.intro .lp-ring, html.intro .lp-browser {
    opacity: 1; translate: none; scale: none; clip-path: none;
  }
}