/* ═══════════════════════════════════════════════════════════════════
   HEIMKEY — Design system
   Identidad heredada de "Laser Lab & Co." (worktree laserlab).
   Navy + azul acero + cremas · Plus Jakarta Sans / Inter.
   ═══════════════════════════════════════════════════════════════════ */

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

/* i18n: oculta el body hasta que i18n.js aplica el idioma (evita el "flash"
   de español antes de traducir). Si no hay JS, igual se ve (la regla solo
   aplica con la clase hk-pre que pone/saca i18n.js). */
html.hk-pre body { visibility: hidden; }

:root {
  /* Navy / dark scale */
  --choco-900: #1F2D43;
  --choco-800: #2A3B54;
  --choco-700: #36486A;
  --choco-600: #4A5D7E;
  --choco-500: #3E5D80;
  --choco-400: #5F7AA0;

  /* Cool surfaces */
  --bg:       #F6F8FB;
  --surface:  #FFFFFF;
  --soft:     #ECF0F5;
  --pill:     #E4EAF2;

  /* Acento unificado = azul HeimKey (antes azul-acero; nombres "amber-*" se mantienen por compatibilidad) */
  --amber-600: #103C7A;  /* hover (azul más profundo) */
  --amber-500: #1650A0;  /* base = azul HeimKey */
  --amber-400: #5B86C4;  /* claro */
  --amber-100: #DDE6F2;  /* pálido */

  /* Heimkey brand blue (logo) */
  --hk-deep:  #0A1525;
  --hk-blue:  #1650A0;
  --hk-bright:#2470D4;

  /* Ink */
  --ink:      #0E1929;
  --ink-2:    #1E3149;
  --muted:    #6B7A8C;
  --muted-2:  #99A4B2;

  --line:     #DDE4ED;
  --line-soft:#ECF0F5;

  --ok:       #2F9E6B;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-pill: 999px;

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }

/* ── Utility ──────────────────────────────────────────────────── */
.container { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.section    { padding: clamp(56px, 9vw, 112px) 0; }
.section-sm { padding: clamp(56px, 9vw, 112px) 0; }

.label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber-600);
  margin-bottom: clamp(14px, 2.2vw, 24px);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ink);
  margin-bottom: 24px;
}
.section-title em { font-style: normal; color: var(--amber-600); }

.section-sub {
  font-size: clamp(15px, 0.55vw + 13px, 18px);
  color: var(--muted);
  max-width: 560px;
  line-height: 1.65;
}

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: clamp(16px, 2.2vw, 28px); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: clamp(14px, 1.9vw, 24px); }

.section-intro      { max-width: 660px; margin-bottom: clamp(30px, 5vw, 48px); }
.section-intro-row  {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 48px; margin-bottom: 56px; flex-wrap: wrap;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: all .25s ease;
  border-radius: var(--r-sm); border: 1.5px solid transparent;
}
.btn-amber { background: var(--amber-500); color: #FFF; border-color: var(--amber-500); }
.btn-amber:hover { background: var(--amber-600); border-color: var(--amber-600); transform: translateY(-2px); }
.btn-ghost-light { background: transparent; color: #FFF; border-color: rgba(255,255,255,.4); }
.btn-ghost-light:hover { background: rgba(255,255,255,.08); border-color: #FFF; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #FFF; }
.btn-pill {
  background: var(--pill); color: var(--ink);
  border-radius: var(--r-pill); padding: 14px 26px;
  font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: lowercase; border: none; cursor: pointer; transition: background .2s;
}
.btn-pill:hover { background: var(--amber-100); }

/* ── NAVIGATION ───────────────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(246,248,251,.92);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
#nav.scrolled { border-bottom-color: var(--line); }
.nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 48px; height: 100px; }
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-mark {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--choco-800); display: flex; align-items: center; justify-content: center;
}
.nav-mark svg { width: 26px; height: 26px; }
.nav-wordmark {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 800;
  color: var(--ink); letter-spacing: -.02em; white-space: nowrap;
}
.nav-wordmark span { color: var(--amber-500); }
.nav-logo-img { height: 80px; width: auto; display: block; }
.footer-logo-img { height: 66px; width: auto; display: block; margin-bottom: 18px; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: 4px; list-style: none; }
.nav-links a {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: var(--ink-2); letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 18px; border-radius: var(--r-sm); border: 1.5px solid transparent;
  transition: border-color .2s, color .2s; white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { border-color: var(--ink); color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-burger span { width: 24px; height: 2px; background: var(--ink); border-radius: 1px; }
.nav-lang { display: flex; align-items: center; font-family: var(--font-display); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; }
.nav-lang a { padding: 8px 11px; color: var(--muted); transition: color .2s; text-transform: uppercase; }
.nav-lang a:hover, .nav-lang a.active { color: var(--ink); }
.nav-lang a + a { border-left: 1px solid var(--line); }

/* ── HERO ─────────────────────────────────────────────────────── */
#hero { padding-top: 100px; position: relative; }
.hero-card {
  background: var(--ink);
  overflow: hidden; position: relative; min-height: calc(100vh - 100px);
  display: flex; align-items: center;
}
.hero-card::before {
  content: ''; position: absolute; top: -20%; right: -10%; width: 80%; height: 140%;
  background: radial-gradient(ellipse, rgba(22,80,160,.18) 0%, transparent 60%); pointer-events: none;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 1.08fr;
  grid-template-areas: "head visual" "body visual";
  column-gap: clamp(32px, 5vw, 72px); row-gap: 0; width: 100%;
  align-items: center; padding: clamp(48px, 7vw, 96px) 0; position: relative; z-index: 2;
}
.hero-head   { grid-area: head; }
.hero-body   { grid-area: body; }
.hero-visual { grid-area: visual; }
.hero-head, .hero-body { color: #FFF; max-width: 600px; }
.hero-title {
  font-family: var(--font-display); font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  font-weight: 800; line-height: 1.04; letter-spacing: -.03em; color: #FFF; margin-bottom: 28px;
}
.hero-title em { font-style: normal; color: var(--amber-400); }
.hero-desc { font-size: 17px; color: rgba(255,255,255,.78); line-height: 1.7; max-width: 500px; margin-bottom: 40px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; }
.hero-checks { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-check { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; color: rgba(255,255,255,.88); font-weight: 500; font-family: var(--font-display); }
.hero-check svg { flex-shrink: 0; color: var(--amber-400); }

/* Hero visual — QR → phone flow */
.hero-visual {
  position: relative; width: 100%; max-width: 560px; margin-left: auto;
  display: flex; align-items: center; justify-content: center; gap: 24px;
}

/* ── BRAND STRIP ──────────────────────────────────────────────── */
.brand-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.brand-strip-inner { display: flex; gap: 48px; align-items: center; padding: 26px 0; flex-wrap: wrap; justify-content: space-around; }
.brand-strip-item {
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 12px; white-space: nowrap;
}
.brand-strip-item svg { width: 18px; height: 18px; color: var(--amber-500); }

/* ── ACTIVATION BADGE (QR / NFC / both) — a prueba de futuro ───── */
.activation {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--amber-100); color: var(--amber-600);
}
.activation svg { width: 15px; height: 15px; flex-shrink: 0; }
.activation--dark { background: rgba(117,145,188,.16); color: var(--amber-400); }
.activation .act-nfc { display: none; }      /* default: QR */
.activation[data-method="nfc"]  .act-qr  { display: none; }
.activation[data-method="nfc"]  .act-nfc { display: inline-flex; }
.activation[data-method="both"] .act-nfc { display: inline-flex; }
.activation[data-method="both"] .act-sep { display: inline; }
.act-sep { display: none; opacity: .5; }
.act-soon {
  font-size: 9px; letter-spacing: .14em; padding: 2px 7px; border-radius: var(--r-pill);
  background: rgba(117,145,188,.2); color: inherit; margin-left: 2px;
}

/* ── HOW IT WORKS (steps) ─────────────────────────────────────── */
#how { background: var(--soft); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 22px); }
.step { background: var(--surface); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 34px) clamp(22px, 2.6vw, 30px); border: 1px solid var(--line-soft); position: relative; }
.step-num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--amber-400);
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-bottom: 24px;
}
.step-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 10px; letter-spacing: -.005em; }
.step-desc { font-size: 14px; color: var(--muted); line-height: 1.65; }
.step-conn { position: absolute; top: 56px; right: -13px; color: var(--amber-400); z-index: 1; }

/* ── CATEGORY SECTIONS ────────────────────────────────────────── */
.cat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; margin-bottom: 40px; flex-wrap: wrap; }
.cat-index {
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber-500); margin-bottom: 16px;
}
.product-card {
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line-soft); transition: all .3s ease; display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 10px 24px -14px rgba(14,25,41,.14); border-color: var(--amber-400); }
.product-img {
  aspect-ratio: 1/1; background: linear-gradient(135deg, var(--soft) 0%, var(--bg) 100%);
  display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;
}
.product-body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.product-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -.005em; }
.product-desc { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; flex: 1; }
.product-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.product-tag {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display);
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--r-pill); background: var(--soft); color: var(--muted);
}
.product-tag.is-now { background: rgba(47,158,107,.12); color: var(--ok); }
.product-tag.is-soon { background: var(--amber-100); color: var(--amber-600); }

/* ── DARK ACTIVATION / TECH SECTION ───────────────────────────── */
.dark-sec { background: var(--ink); color: #FFF; position: relative; overflow: hidden; }

/* Anfitriones — pestañas en TODOS los tamaños; en pantallas angostas la barra se desliza en horizontal */
.anf-tabs {
  display: flex; gap: 4px; margin: 4px 0 32px; border-bottom: 1px solid var(--line);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.anf-tabs::-webkit-scrollbar { display: none; }
.anf-tab {
  flex: 0 0 auto; white-space: nowrap;
  font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--muted);
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 11px 10px; margin-bottom: -1px; cursor: pointer; transition: color .2s, border-color .2s;
}
.anf-tab:first-child { padding-left: 0; }
.anf-tab:hover { color: var(--ink); }
.anf-tab.anf-tab-on { color: var(--amber-500); border-bottom-color: var(--amber-500); }
.anf-panel { display: none; }
.anf-panel.anf-on { display: block; }
.dark-sec::before {
  content: ''; position: absolute; top: -20%; right: -20%; width: 60%; height: 80%;
  background: radial-gradient(ellipse, rgba(22,80,160,.12) 0%, transparent 60%); pointer-events: none;
}
.dark-sec .section-title { color: #FFF; }
.dark-sec .section-title em { color: var(--amber-400); }
.dark-sec .label { color: var(--amber-400); }
.qr-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; position: relative; z-index: 1; }
.qr-frame {
  background: #FFF; padding: 48px; border-radius: var(--r-lg);
  display: flex; justify-content: center; align-items: center; max-width: 440px; margin: 0 auto;
  box-shadow: 0 16px 40px -18px rgba(14,25,41,.24);
}
.qr-content { max-width: 520px; }
.qr-desc { color: rgba(255,255,255,.75); font-size: 17px; line-height: 1.7; margin-bottom: 36px; }
.qr-list { list-style: none; }
.qr-list li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.1); align-items: flex-start; }
.qr-list li:last-child { border-bottom: none; }
.qr-list-num { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--amber-400); line-height: 1; }
.qr-list-title { font-family: var(--font-display); font-weight: 700; color: #FFF; font-size: 16px; margin-bottom: 6px; }
.qr-list-desc { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.6; }

/* ── BRAND HEADER (sub-line mark) ─────────────────────────────── */
.brand-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 64px; margin-bottom: 44px; flex-wrap: wrap; }
.brand-mark { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 12px 22px 12px 12px; }
.brand-mark-glyph { width: 44px; height: 44px; border-radius: 50%; background: var(--choco-800); display: flex; align-items: center; justify-content: center; color: var(--amber-400); }
.brand-mark-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.brand-mark-sub { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

/* ── ANFITRIONES (Heimkey flagship) ───────────────────────────── */
#anfitriones { background: var(--surface); }
.host-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: start; margin-bottom: clamp(40px, 5vw, 64px); }
.host-h3 { font-family: var(--font-display); font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); margin-bottom: 20px; }
.host-features { list-style: none; margin-top: 36px; }
.host-features li { padding: 20px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: flex-start; }
.host-features li:last-child { border-bottom: 1px solid var(--line); }
.hf-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--amber-100); display: flex; align-items: center; justify-content: center; color: var(--amber-600); flex-shrink: 0; }
.hf-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 15.5px; margin-bottom: 6px; }
.hf-desc { font-size: 14px; color: var(--muted); line-height: 1.65; }

/* Phone mockup */
.host-mockup {
  background: var(--ink);
  padding: 28px 56px; border-radius: var(--r-lg); display: flex; justify-content: center; align-items: center;
  max-width: 460px; margin: 0 auto; position: relative; overflow: hidden;
}
.host-mockup::before { content: ''; position: absolute; top: -30%; left: -30%; width: 60%; height: 60%; background: radial-gradient(circle, rgba(22,80,160,.2) 0%, transparent 70%); border-radius: 50%; }
.mockup-phone { background: var(--ink); border-radius: 28px; padding: 14px 10px; width: 100%; max-width: 250px; position: relative; z-index: 1; box-shadow: 0 16px 40px -16px rgba(14,25,41,.24); }
.mockup-screen { background: var(--bg); border-radius: 18px; padding: 22px 18px; min-height: 380px; }
.mockup-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); text-align: center; margin-bottom: 2px; }
.mockup-sub { text-align: center; font-size: 10px; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.mockup-wifi { background: var(--ink); border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.mockup-wifi svg { color: var(--amber-400); flex-shrink: 0; }
.mockup-wifi b { color: #FFF; font-size: 12px; font-family: var(--font-display); display: block; }
.mockup-wifi small { color: rgba(255,255,255,.6); font-size: 10px; }
.mockup-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 11.5px; }
.mockup-row:last-of-type { border-bottom: 1px solid var(--line-soft); }
.mockup-row span:first-child { font-family: var(--font-display); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.mockup-row span:last-child { color: var(--ink); font-weight: 500; }
.mockup-map { margin-top: 16px; background: var(--soft); height: 78px; border-radius: 8px; position: relative; overflow: hidden; }
.mockup-map .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(14,25,41,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(14,25,41,.05) 1px,transparent 1px); background-size: 14px 14px; }
.mockup-map .pin { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--amber-500); top: 50%; left: 50%; transform: translate(-50%,-50%); }
.mockup-map .pin.s { width: 5px; height: 5px; background: var(--ink); opacity: .5; }

/* ── TIERS (estática vs dinámica) ─────────────────────────────── */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); margin-bottom: 28px; }
.tier-card { padding: clamp(28px, 3.4vw, 40px) clamp(24px, 3vw, 36px); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg); position: relative; overflow: hidden; }
.tier-card--premium { background: var(--ink); border-color: var(--choco-700); color: #FFF; }
.tier-card--premium::before { content: ''; position: absolute; top: -20%; right: -10%; width: 60%; height: 80%; background: radial-gradient(ellipse, rgba(22,80,160,.18) 0%, transparent 60%); pointer-events: none; }
.tier-tag { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-600); margin-bottom: 14px; position: relative; }
.tier-card--premium .tier-tag { color: var(--amber-400); }
.tier-name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -.01em; position: relative; }
.tier-card--premium .tier-name { color: #FFF; }
.tier-price { font-family: var(--font-display); font-size: 14px; color: var(--muted); margin-bottom: 18px; position: relative; }
.tier-card--premium .tier-price { color: rgba(255,255,255,.7); }
.tier-avail { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: 20px; position: relative; }
.tier-avail.now { background: rgba(47,158,107,.14); color: var(--ok); }
.tier-avail.now::before { content:''; width:6px; height:6px; border-radius:50%; background: var(--ok); }
.tier-avail.soon { background: rgba(117,145,188,.2); color: var(--amber-400); }
.tier-desc { font-size: 14.5px; color: var(--muted); line-height: 1.7; position: relative; margin-bottom: 24px; }
.tier-card--premium .tier-desc { color: rgba(255,255,255,.78); }
.tier-list { list-style: none; position: relative; }
.tier-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.tier-card--premium .tier-list li { color: rgba(255,255,255,.85); }
.tier-list li svg { flex-shrink: 0; margin-top: 2px; color: var(--amber-500); }
.tier-card--premium .tier-list li svg { color: var(--amber-400); }
.tier-list li.off { color: var(--muted-2); }
.tier-list li.off svg { color: var(--muted-2); }

/* Comparison table */
.compare { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.compare table { width: 100%; border-collapse: collapse; }
.compare th, .compare td { text-align: left; padding: 16px 24px; font-size: 14px; border-bottom: 1px solid var(--line-soft); }
.compare thead th { font-family: var(--font-display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--soft); }
.compare thead th.c { text-align: center; }
.compare td.feat { color: var(--ink-2); font-weight: 500; }
.compare td.c { text-align: center; color: var(--muted); }
.compare td.c .yes { color: var(--ok); font-weight: 700; }
.compare td.c .no { color: var(--muted-2); }
.compare tr:last-child td { border-bottom: none; }
.compare col.dyn { background: rgba(22,80,160,.05); }

/* ── TEMPLATES GALLERY (15) — fotos premium ───────────────────── */
.templates-showcase { padding: 0; margin-top: 0; }
.templates-title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -.01em; }
.templates-title em { font-style: normal; color: var(--amber-600); }
.templates-subtitle { color: var(--muted); font-size: 15px; margin-bottom: 36px; max-width: 540px; }
.templates-grid {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; padding: 14px 2px 18px; margin: 0 -2px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.tpl-card {
  position: relative; aspect-ratio: 4/5; border-radius: var(--r-md); overflow: hidden;
  background: var(--choco-800); cursor: default; isolation: isolate;
  box-shadow: 0 6px 18px -10px rgba(14,25,41,.18);
  transition: transform .3s ease, box-shadow .3s ease;
}
.tpl-card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px -16px rgba(14,25,41,.22); }
.tpl-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.1s ease; }
.tpl-card:hover img { transform: scale(1.06); }
.tpl-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,21,37,.05) 0%, rgba(10,21,37,.12) 42%, rgba(10,21,37,.82) 100%); }
.tpl-badge {
  position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.25); backdrop-filter: blur(2px);
}
.tpl-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px 15px; }
.tpl-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -.01em; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.tpl-tag { font-size: 11.5px; color: rgba(255,255,255,.82); font-weight: 500; margin-top: 1px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }

/* ── DASHBOARD PREVIEW ────────────────────────────────────────── */
.dash { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; margin-top: 64px; }
.dash-panel { background: var(--ink); border-radius: var(--r-lg); padding: 12px; box-shadow: 0 14px 34px -18px rgba(14,25,41,.20); }
.dash-bar { display: flex; align-items: center; gap: 7px; padding: 10px 12px; }
.dash-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.25); display: block; }
.dash-bar .dash-switch { margin-left: auto; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-pill); padding: 5px 12px; color: #fff; font-family: var(--font-display); font-size: 11.5px; font-weight: 600; }
.dash-bar .dash-switch svg { color: var(--amber-400); }
.dash-bar .dash-switch .count { color: rgba(255,255,255,.55); font-weight: 500; }
.dash-body { background: var(--bg); border-radius: 12px; padding: 22px; }
.dash-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; }
.dash-row label { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dash-row .val { font-size: 13px; color: var(--ink); font-weight: 500; }
.dash-edit { font-size: 11px; color: var(--amber-500); font-family: var(--font-display); font-weight: 700; }
.dash-sources { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.dash-source { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; display: inline-flex; gap: 6px; align-items: center; }
.dash-source i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber-500); display: block; }

/* Panel de control — KPIs + "Del tag" (mismas clases que panel/, para que el preview del landing sea idéntico al panel real) */
.pn-kpis { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin-bottom:18px; }
.pn-kpi { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-md); padding:16px 18px; }
.pn-kpi span { font-size:12px; color: var(--muted); display:block; margin-bottom:5px; }
.pn-kpi b { font-family: var(--font-display); font-size:1.7rem; font-weight:800; color: var(--ink); letter-spacing:-.02em; }
.pn-kpi.tag { border-color: var(--amber-400); background: linear-gradient(180deg, rgba(22,80,160,.07), var(--surface)); }
.pn-kpi.tag span, .pn-kpi.tag b { color: var(--amber-600); }
.pn-tagdata { background: var(--surface); border:1px solid var(--amber-400); border-radius: var(--r-md); padding:20px; margin-top:16px; }
.pn-tagdata-h { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.pn-tagdata-h h3 { font-family: var(--font-display); font-size:14px; font-weight:700; color: var(--ink); }
.pn-only { font-family: var(--font-display); font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background: var(--amber-100); color: var(--amber-600); padding:3px 9px; border-radius:999px; }
.td-cap { font-size:11.5px; color: var(--muted); margin-bottom:10px; }
.td-row { display:flex; align-items:center; gap:10px; font-size:13px; margin-bottom:8px; }
.td-lbl { width:112px; flex-shrink:0; color: var(--ink); }
.td-track { flex:1; height:8px; background: var(--soft); border-radius:999px; overflow:hidden; }
.td-fill { height:100%; background: var(--amber-500); border-radius:999px; }
.td-pct { width:34px; text-align:right; color: var(--muted); font-family: var(--font-display); font-weight:600; }
/* En el preview del landing (columna angosta): KPIs 2×2 y un poco más compacto */
.dash-panel .pn-kpis { grid-template-columns: repeat(2,1fr); gap:10px; margin-top:16px; margin-bottom:0; }
.dash-panel .pn-kpi { padding:13px 14px; }
.dash-panel .pn-kpi b { font-size:1.4rem; }
.dash-panel .pn-tagdata { padding:16px; }
.dash-panel .td-lbl { width:96px; }

/* ── FEATURE CARDS ────────────────────────────────────────────── */
.feature-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 22px; margin-top: 88px; }
.feature-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px 32px; transition: all .25s; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px -14px rgba(14,25,41,.12); }
.feature-icon { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--amber-100); color: var(--amber-600); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.feature-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 10px; letter-spacing: -.005em; }
.feature-desc { font-size: 14.5px; color: var(--muted); line-height: 1.65; }

/* ── CUENTA MULTI-STAND + PACKS ───────────────────────────────── */
#cuenta { background: var(--bg); }
.account-box { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5.5vw, 72px); align-items: center; }
.account-list { display: flex; flex-direction: column; gap: 12px; }
.acc-item { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; transition: all .25s; }
.acc-item:hover { border-color: var(--amber-400); transform: translateX(4px); }
.acc-thumb { width: 46px; height: 46px; border-radius: 11px; flex-shrink: 0; background-size: cover; background-position: center; }
.acc-glyph { width: 46px; height: 46px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.acc-item b { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--ink); display: block; }
.acc-item small { font-size: 12.5px; color: var(--muted); }
.acc-item .acc-cat { margin-left: auto; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-600); background: var(--amber-100); padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }

/* Packs band */
.packs { margin-top: clamp(40px, 5vw, 64px); background: var(--ink); border-radius: var(--r-lg); padding: clamp(32px, 4vw, 48px) clamp(28px, 4.5vw, 56px); position: relative; overflow: hidden; }
.packs::before { content: ''; position: absolute; top: -30%; right: -8%; width: 50%; height: 90%; background: radial-gradient(ellipse, rgba(22,80,160,.2) 0%, transparent 60%); pointer-events: none; }
.packs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 32px; position: relative; }
.packs-head h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1.15; }
.packs-head p { color: rgba(255,255,255,.72); font-size: 14.5px; max-width: 420px; margin-top: 8px; }

/* ── CONTACT ──────────────────────────────────────────────────── */
#contact { background: var(--bg); }
.contact-box { background: var(--ink); border-radius: var(--r-lg); padding: 88px 64px; text-align: center; position: relative; overflow: hidden; }
.contact-box::before { content: ''; position: absolute; top: -20%; right: -10%; width: 60%; height: 80%; background: radial-gradient(ellipse, rgba(22,80,160,.18) 0%, transparent 60%); pointer-events: none; }
.contact-box .label { color: var(--amber-400); position: relative; z-index: 1; }
.contact-box h2 { font-family: var(--font-display); font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 800; color: #FFF; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 24px; position: relative; z-index: 1; }
.contact-box h2 em { font-style: normal; color: var(--amber-400); }
.contact-box p { color: rgba(255,255,255,.78); font-size: 17px; max-width: 560px; margin: 0 auto 40px; line-height: 1.7; position: relative; z-index: 1; }
.contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.contact-info { display: flex; gap: 56px; justify-content: center; margin-top: 56px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,.12); flex-wrap: wrap; position: relative; z-index: 1; }
.contact-info-item { text-align: left; }
.contact-info-lbl { font-family: var(--font-display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-400); margin-bottom: 8px; font-weight: 600; }
.contact-info-val { font-size: 14.5px; color: #FFF; font-weight: 500; }

/* ── FOOTER ───────────────────────────────────────────────────── */
#footer { background: var(--bg); padding: 72px 0 36px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 56px; }
.footer-brand .nav-logo { margin-bottom: 20px; }
.footer-desc { font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 300px; }
.footer-made { margin-top: 18px; font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
.footer-made span { color: var(--amber-600); }
.footer-col h4 { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 18px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 14px; color: var(--muted); transition: color .2s; }
.footer-col a:hover { color: var(--amber-600); }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 26px; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; gap: 12px; }
/* Línea de contacto (una sola línea, todos los tamaños), separada de las columnas y arriba del © */
.footer-contact { font-size: 14px; color: var(--muted); margin-bottom: 22px; white-space: nowrap; }
.footer-contact a { color: var(--amber-600); font-weight: 600; }
/* Waitlist (modalidad dinámica) */
.waitlist { display: inline-flex; align-items: center; }
.waitlist [hidden] { display: none !important; }  /* el atributo hidden gana sobre el display de abajo */
.wl-form { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wl-input { font-family: var(--font-display); font-size: 14px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); min-width: 200px; background: var(--surface); color: var(--ink); transition: border-color .2s; }
.wl-input:focus { outline: none; border-color: var(--amber-500); }
.wl-done { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ok); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Vertical: cabecera → imagen → cuerpo (la imagen sube, apenas debajo del título) */
  .hero-grid   { grid-template-columns: 1fr; grid-template-areas: "head" "visual" "body"; row-gap: clamp(22px, 5vw, 38px); }
  .hero-visual { margin: 0 auto; }
  .hero-visual { margin: 0 auto; }
  .qr-showcase { grid-template-columns: 1fr; gap: 48px; }
  .host-hero   { grid-template-columns: 1fr; gap: 56px; }
  .dash        { grid-template-columns: 1fr; gap: 40px; }
  .account-box { grid-template-columns: 1fr; gap: 40px; }
  .steps       { grid-template-columns: repeat(2,1fr); }
  .step-conn   { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 860px) {
  .tiers     { grid-template-columns: 1fr; gap: 16px; }
  .tier-card { padding: 32px 28px; }
  .compare { overflow-x: auto; }
  .packs { padding: 36px 28px; }
}
@media (max-width: 1279px) {
  /* El nav inline (logo grande + 5 links + idioma + ingresar) recién entra
     cómodo a partir de ~1280px. Por debajo (iPads, notebooks chicas) se usa el
     menú burger, así el logo va a tamaño completo y no se comprime. */
  .nav-burger  { display: flex; }
  /* Nav en flex (sin grid) para que el logo NO se comprima. Idioma (ES·EN·PT) y
     botón "ingresar" quedan VISIBLES en el nav, antes de abrir el menú. */
  .nav-inner { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .nav-logo-img { height: 66px; max-width: none; flex-shrink: 0; }
  .nav-right { gap: 8px; flex-shrink: 0; }
  .nav-lang a { padding: 5px 7px; }
  .nav-right .btn-pill { display: inline-flex; align-items: center; padding: 9px 14px; font-size: 12.5px; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 6px 40px 16px; box-shadow: 0 14px 30px -18px rgba(14,25,41,.20);
  }
  .nav-links.open { display: flex; }
  /* display:block para que el padding del <a> expanda el ítem (si no, los <a>
     inline se solapan y el borde inferior cae sobre el texto del siguiente). */
  .nav-links a { display: block; padding: 14px 4px; border: none; border-radius: 0; border-bottom: 1px solid var(--line-soft); }
  .nav-links li:last-child a { border-bottom: none; }
}
@media (max-width: 640px) {
  .container   { padding: 0 20px; }
  .nav-links   { padding: 6px 20px 16px; }
  /* En el teléfono entran logo + idioma + ingresar + burger: logo y footer al
     mismo tamaño (48px), idioma/ingresar más compactos. */
  .nav-inner { gap: 4px; }
  /* Logo FLUIDO: escala con el ancho real del teléfono (no fijo). En un iPhone
     chico (~360px) queda ~44px y en uno grande (15 Pro ~393px, Plus/Max ~430px)
     crece hasta ~56px, usando el espacio disponible sin desbordar. */
  .nav-logo-img { height: clamp(40px, calc(31vw - 72px), 54px); }
  .footer-logo-img { height: clamp(40px, calc(31vw - 72px), 54px); }
  .nav-right { gap: 4px; }
  .nav-lang a { padding: 3px 4px; font-size: 10.5px; }
  .nav-lang a + a { border-left: none; }
  .nav-right .btn-pill { padding: 7px 9px; font-size: 11px; }
  .nav-wordmark { font-size: 1.15rem; }
  .hero-checks { gap: 10px 16px; }
  /* ES · EN · PT en su propio renglón, debajo de los otros dos checks */
  .hero-checks .hero-check:last-child { flex-basis: 100%; }
  .steps       { grid-template-columns: 1fr; }
  .feature-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-box { padding: 56px 24px; }
  .contact-info { gap: 24px; }
}

/* ── Simplificación (jun 2026): secciones secundarias compactas ── */
.section--lite { padding: clamp(48px, 7.5vw, 92px) 0; }
.section--lite .product-img { aspect-ratio: 16 / 10; }

/* Galería de plantillas en carrusel (1 fila, scroll lateral; ~5 visibles desktop) */
.templates-grid::-webkit-scrollbar { height: 8px; }
.templates-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.templates-grid .tpl-card { flex: 0 0 auto; width: 200px; scroll-snap-align: start; }
@media (max-width: 640px) { .templates-grid .tpl-card { width: 74%; max-width: 280px; } }

/* Dashboard: indicador de calendarios conectados (de dónde salen las reservas) */
.dash-cal { display:flex; align-items:center; gap:7px; margin-top:14px; padding-top:13px; border-top:1px solid var(--line); font-family: var(--font-display); font-weight:600; font-size:11px; color: var(--muted); letter-spacing:.01em; }
.dash-cal svg { color: var(--amber-500); flex-shrink:0; }
.dash-cal em { font-style:normal; color: var(--ink-2); }

/* Tarjetas de producto con foto real */
.product-img--photo { padding:0; }
.product-img--photo img, .product-img--photo svg { width:100%; height:100%; object-fit:cover; display:block; }

/* Testimonios (placeholder elegante para reseñas reales) */
.tm-card { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.tm-quote { color: var(--amber-400); margin-bottom: 14px; }
.tm-lines span { display:block; height:11px; border-radius:6px; background: var(--soft); margin-bottom:10px; }
.tm-author { display:flex; align-items:center; gap:12px; margin-top:22px; }
.tm-avatar { width:42px; height:42px; border-radius:50%; background: var(--soft); flex-shrink:0; }
.tm-meta { flex:1; }
.tm-meta span { display:block; height:9px; border-radius:5px; background: var(--soft); margin-bottom:7px; }
.tm-meta span:first-child { width:52%; background: var(--pill); }
.tm-note { text-align:center; color: var(--muted); font-size:13px; margin-top: 30px; }

/* ══════════════ Testimonios: carrusel automático (marquee) ══════════════
   Se mueve solo en TODAS las pantallas (no es swipe manual). El track se
   duplica por JS (script.js) para que el bucle no tenga costuras: la animación
   traslada -50% = exactamente un set de tarjetas (cada tarjeta lleva su margen
   derecho, así el corte coincide). Pausa al pasar el mouse; respeta reduce-motion. */
.tm-marquee {
  position: relative;
  overflow: hidden;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.tm-track {
  display: flex;
  width: max-content;
  animation: tm-scroll 42s linear infinite;
}
.tm-marquee:hover .tm-track { animation-play-state: paused; }
.tm-track > .tm-card {
  flex: 0 0 clamp(282px, 30vw, 340px);
  margin: 0 clamp(16px, 2.2vw, 28px) 0 0;
}
@keyframes tm-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .tm-track { animation: none; }
  .tm-track > .tm-card[aria-hidden="true"] { display: none; }
}

/* Mockups de producto: cuadrados (los SVG están diseñados 1:1; evita recorte de logos) */
.section--lite .product-img--photo { aspect-ratio: 1 / 1; }

/* ══════════════ Carruseles en móvil (swipe horizontal) ══════════════
   En teléfonos y tablets las grillas (.steps, .grid-4, .tiers, .packs-grid,
   .grid-3) pasan a ser un carrusel deslizable con scroll-snap, para que no se
   apilen hacia abajo. Se activa cuando: el dispositivo está en VERTICAL y mide
   ≤1024px (teléfonos + tablets verticales), o es un teléfono ACOSTADO (poca
   altura). Las notebooks/desktop (vertical y anchas, u horizontal con altura)
   quedan con grilla. CSS puro, sin JS. */
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-height: 500px) {
  .m-carousel {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    gap: 14px;
    margin: 0 -20px;
    padding: 4px 20px 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .m-carousel::-webkit-scrollbar { display: none; }
  .m-carousel > * {
    /* En vertical = ~78% (una tarjeta + asomo). El min() pone un tope en px para
       que en horizontal (mucho más ancho) no quede una tarjeta gigante: se ven
       varias. El vertical queda igual. */
    flex: 0 0 min(78%, 300px);
    scroll-snap-align: start;
    min-width: 0;
    margin: 0 !important;
  }
  /* los packs son compactos */
}

/* ══════════════ Orientación: teléfono ACOSTADO (pantalla baja) ══════════════
   Al girar el teléfono a horizontal la altura es chica (~350-430px). La barra
   fija de 100px y el logo de 66px se comían la pantalla. Acá se compactan SOLO
   en ese caso (landscape + poca altura); iPads y monitores no se ven afectados
   porque tienen altura de sobra. Va al final para ganar en la cascada. */
@media (orientation: landscape) and (max-height: 500px) {
  .nav-inner { height: 64px; }
  .nav-logo-img { height: clamp(38px, 9vh, 48px); }
  .footer-logo-img { height: clamp(38px, 9vh, 48px); }
  .hero-card { min-height: calc(100vh - 64px); }
}