/* ==========================================================================
   Colibium — sitio público (index, planes, tour)
   Tokens: Colibium Color System v2.1 (fuente de verdad: demo/paleta.html).
   Tema claro por defecto; oscuro con [data-theme="dark"] o, si el visitante
   no eligió, con prefers-color-scheme.
   ========================================================================== */

/* Tipografía servida desde el propio sitio (fonts/, licencia OFL): archivos variables, subconjunto
   latino, los mismos que entregaba Google Fonts. Las páginas precargan DM Sans con <link rel="preload">.
   Pesos declarados igual que antes (400, 500 y 700), así el 600 del CSS se sigue viendo como 700. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('fonts/dm-sans-latin.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/dm-sans-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('fonts/jetbrains-mono-latin.woff2') format('woff2'); }

:root {
  --navy: #0f4c9d;
  --ocean: #045a9f;
  --secondary: #2a91b6;
  --accent: #5bcacf;
  --accent-light: #93dfe4;
  --g100: #daf4f6;
  --g50: #edf9fa;

  --bg: #f5f7fc;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --heading: #1e293b;
  --text: #334155;
  --muted: #5b6b80;
  --border: #e2e8f0;

  --success: #2d7a62;
  --success-bg: #e6f5f0;
  --warning: #92400e;
  --warning-bg: #fffbeb;
  --info: #0f4c9d;
  --info-bg: #eff6ff;

  --link: #045a9f;
  --btn-bg: #0f4c9d;
  --btn-bg-hover: #045a9f;
  --btn-text: #ffffff;
  --hero-from: #0f4c9d;
  --hero-to: #045a9f;
  --chat-bg: #efeae2;
  --bubble-in: #ffffff;
  --bubble-out: #d9fdd3;
  --bubble-text: #1e293b;

  --shadow-card: 0 4px 24px rgba(15, 23, 42, .06);
  --shadow-card-hover: 0 8px 32px rgba(15, 23, 42, .10);
  --focus-ring: 0 0 0 3px rgba(91, 202, 207, .55);

  --radius-card: 12px;
  --radius-btn: 8px;
  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ocean: #2a91b6;
    --secondary: #5bcacf;
    --g100: #0d1b3a;
    --g50: #081028;
    --bg: #080e24;
    --surface: #0d1b3a;
    --surface-2: #112040;
    --heading: #ffffff;
    --text: #e2e8f0;
    --muted: #a9b4c6;
    --border: #1a2550;
    --success: #60b69e;
    --success-bg: rgba(96, 182, 158, .12);
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, .10);
    --info: #5bcacf;
    --info-bg: rgba(91, 202, 207, .10);
    --link: #5bcacf;
    --btn-bg: #5bcacf;
    --btn-bg-hover: #93dfe4;
    --btn-text: #080e24;
    --hero-from: #0a2a5c;
    --hero-to: #080e24;
    --chat-bg: #0b141a;
    --bubble-in: #1f2c34;
    --bubble-out: #005c4b;
    --bubble-text: #e9edef;
    --shadow-card: 0 4px 24px rgba(0, 0, 0, .40);
    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, .50);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ocean: #2a91b6;
  --secondary: #5bcacf;
  --g100: #0d1b3a;
  --g50: #081028;
  --bg: #080e24;
  --surface: #0d1b3a;
  --surface-2: #112040;
  --heading: #ffffff;
  --text: #e2e8f0;
  --muted: #a9b4c6;
  --border: #1a2550;
  --success: #60b69e;
  --success-bg: rgba(96, 182, 158, .12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, .10);
  --info: #5bcacf;
  --info-bg: rgba(91, 202, 207, .10);
  --link: #5bcacf;
  --btn-bg: #5bcacf;
  --btn-bg-hover: #93dfe4;
  --btn-text: #080e24;
  --hero-from: #0a2a5c;
  --hero-to: #080e24;
  --chat-bg: #0b141a;
  --bubble-in: #1f2c34;
  --bubble-out: #005c4b;
  --bubble-text: #e9edef;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, .40);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, .50);
  color-scheme: dark;
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; } /* encabezado fijo de 65 px */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { color: var(--heading); line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 6.5vw, 3.2rem); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }
h1, h2, h3 { text-wrap: balance; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
code, .mono { font-family: var(--font-mono); font-size: .9em; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 4px; }
.hero :focus-visible, .cta-band :focus-visible { outline-color: #ffffff; }
/* site.js agrega .js a <html>. Si no carga: aviso de respaldo visible, menú desplegado y sin botones muertos. */
.js .no-js, html:not(.js) .js-only { display: none; }
html:not(.js) .site-header { position: static; }
html:not(.js) .mobile-nav[hidden] { display: block; }
html:not(.js) .menu-toggle, html:not(.js) .theme-toggle { display: none; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--btn-bg); color: var(--btn-text); padding: 12px 16px; border-radius: var(--radius-btn);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .container { padding: 0 24px; } }
.narrow { max-width: 760px; }

/* ─── Header ─── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  text-decoration: none; color: var(--heading); font-weight: 700; font-size: 1.15rem; margin-right: auto;
}
.brand img { width: 36px; height: 36px; }
.site-nav { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border-radius: var(--radius-btn);
  color: var(--text); text-decoration: none; font-weight: 500; white-space: nowrap;
}
.site-nav a:hover { background: var(--surface-2); color: var(--heading); }
.site-nav a[aria-current="page"] { color: var(--link); font-weight: 700; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-btn);
  border: 1px solid var(--border); background: var(--surface); color: var(--heading); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 22px; height: 22px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
.mobile-nav { border-top: 1px solid var(--border); padding-top: 8px; padding-bottom: 16px; }
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav a:not(.btn) {
  display: flex; align-items: center; min-height: 48px; padding: 0 8px;
  color: var(--heading); text-decoration: none; font-weight: 600; border-radius: var(--radius-btn);
}
.mobile-nav a:not(.btn):hover { background: var(--surface-2); }
.mobile-nav .btn { margin-top: 8px; width: 100%; }
/* El menú de escritorio aparece desde 1000 px: entre 900 y 999 sus cuatro enlaces no cabían en una fila. */
@media (min-width: 1000px) {
  .site-nav { display: block; }
  .menu-toggle, .mobile-nav { display: none !important; }
}
/* El botón de WhatsApp está siempre en el encabezado. Bajo 1140 px el rótulo largo dejaría el menú
   sin sitio: queda «WhatsApp». En celular cede el interruptor de tema,
   porque el sitio ya sigue el tema del teléfono. */
@media (max-width: 1139px) { .cta-long { display: none; } }
@media (max-width: 999px) { .header-inner { gap: 8px; } }
@media (max-width: 479px) { .theme-toggle { display: none; } }
@media (max-width: 339px) { .site-header .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px; border-radius: var(--radius-btn);
  font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-align: center;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-primary { background: var(--btn-bg); color: var(--btn-text); }
.btn-primary:hover { background: var(--btn-bg-hover); }
.btn-secondary { background: transparent; color: var(--heading); border-color: var(--muted); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-on-dark { background: #ffffff; color: #0f4c9d; }
.btn-on-dark:hover { background: #daf4f6; }
.btn-ghost-dark { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, .55); }
.btn-ghost-dark:hover { background: rgba(255, 255, 255, .12); }
.btn-sm { min-height: 44px; padding: 8px 14px; font-size: .95rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row .btn { flex: 1 1 220px; }
@media (min-width: 640px) { .btn-row .btn { flex: 0 0 auto; } }
.btn, .site-nav a, .tour-toc a, .icon-btn { transition: background-color .15s, border-color .15s, color .15s, transform .15s; }
.btn:active { transform: translateY(1px); }

/* ─── Sections ─── */
.section { padding: 56px 0; }
@media (min-width: 768px) { .section { padding: 80px 0; } }
.section-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--link); margin-bottom: 10px;
}
.lead { font-size: 1.1rem; color: var(--text); max-width: 62ch; }
.section-head { margin-bottom: 32px; max-width: 720px; }
.muted { color: var(--muted); }
/* Enlace solo en su párrafo: 44 px de alto para el dedo. El margen negativo deja el párrafo donde estaba. */
.link-row a { display: inline-block; padding: 11px 0; margin: -11px 0; }
.small { font-size: .9rem; }

/* ─── Hero ─── */
.hero {
  background: linear-gradient(160deg, var(--hero-from) 0%, var(--hero-to) 100%);
  color: #ffffff; padding: 40px 0 56px; overflow: hidden;
}
.hero h1 { color: #ffffff; }
.hero .lead { color: rgba(255, 255, 255, .88); }
/* Texto alineado arriba (no centrado contra el teléfono) y menos relleno: los botones y la línea de
   confianza quedan sobre el pliegue en una laptop de 1366×768. Con 1.2fr los dos botones caben en una fila. */
.hero-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.2fr .8fr; gap: 56px; } .hero { padding: 48px 0 56px; } }
.pill {
  display: inline-block; line-height: 1.35;
  padding: 6px 12px; border-radius: 14px; font-size: .85rem; font-weight: 600;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); color: #ffffff; margin-bottom: 18px;
  text-decoration: none;
}
.pill:hover { background: rgba(255, 255, 255, .2); }
.pill .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5bcacf; margin-right: 6px; vertical-align: .05em; }
.hero-note { margin-top: 18px; font-size: .9rem; color: rgba(255, 255, 255, .8); }
.hero-note a { color: #ffffff; }
.page-hero { padding: 40px 0 48px; }
@media (min-width: 768px) { .page-hero { padding: 64px 0 64px; } }
.page-hero .lead { max-width: 60ch; }

/* ─── WhatsApp illustration (hero) ─── */
.wa-mock {
  max-width: 360px; width: 100%; margin: 0 auto; border-radius: 28px; padding: 10px;
  background: #0b1220; box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.wa-screen { border-radius: 20px; overflow: hidden; background: var(--chat-bg); }
.wa-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #075e54; color: #ffffff; }
:root[data-theme="dark"] .wa-top { background: #1f2c34; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wa-top { background: #1f2c34; } }
.wa-avatar { width: 36px; height: 36px; border-radius: 50%; background: #ffffff; display: grid; place-items: center; flex-shrink: 0; font-weight: 700; font-size: .8rem; color: #075e54; } /* iniciales del hotel ficticio */
.wa-top strong { display: block; font-size: .95rem; line-height: 1.2; }
.wa-top div span { font-size: .75rem; opacity: .85; }
.wa-body { padding: 12px 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.wa-day { align-self: center; font-size: .7rem; background: var(--bubble-in); color: var(--bubble-text); padding: 3px 10px; border-radius: 8px; opacity: .9; }
.bubble {
  max-width: 86%; padding: 7px 10px 5px; border-radius: 10px; font-size: .86rem; line-height: 1.4;
  color: var(--bubble-text); box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.bubble p { margin: 0 0 .35em; }
.bubble p:last-of-type { margin-bottom: 0; }
.bubble .time { display: block; text-align: right; font-size: .66rem; opacity: .8; margin-top: 2px; }
.bubble.in { align-self: flex-end; background: var(--bubble-out); border-top-right-radius: 2px; }
.bubble.out { align-self: flex-start; background: var(--bubble-in); border-top-left-radius: 2px; }
.bubble .wa-link { color: #0369a1; text-decoration: underline; overflow-wrap: anywhere; }
:root[data-theme="dark"] .bubble .wa-link { color: #53bdeb; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bubble .wa-link { color: #53bdeb; } }
.mock-caption { text-align: center; font-size: .875rem; color: rgba(255, 255, 255, .78); margin: 12px 0 0; }

/* ─── Cards & grids ─── */
.grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 899px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 20px; box-shadow: var(--shadow-card);
}
.card h3 { margin-bottom: 6px; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.problem-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.problem-list li { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px; }
.problem-list svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--warning); margin-top: 3px; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 899px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.steps li { counter-increment: step; position: relative; padding-top: 60px; }
.steps li::before {
  content: counter(step); position: absolute; top: 20px; left: 20px;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--btn-bg); color: var(--btn-text); font-weight: 700;
}

/* Check lists */
.check-list { list-style: none; padding: 0; margin: 0 0 1em; }
.check-list li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--success-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232d7a62' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3 3 7-7'/%3E%3C/svg%3E") center / 14px no-repeat;
}
/* El trazo va escrito en el SVG: en oscuro se repite con --success oscuro (#60b69e). */
:root[data-theme="dark"] .check-list li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2360b69e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3 3 7-7'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .check-list li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2360b69e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3 3 7-7'/%3E%3C/svg%3E"); } }
.soon-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.soon-list li { padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px dashed var(--border); color: var(--muted); font-size: .92rem; }
.x-list { list-style: none; padding: 0; margin: 0 0 1em; }
.x-list li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.x-list li::before {
  content: "–"; position: absolute; left: 6px; top: 0; font-weight: 700; color: var(--muted);
}

/* Callouts */
.callout { border-radius: var(--radius-card); padding: 16px 18px; border: 1px solid var(--border); background: var(--info-bg); color: var(--text); }
.callout strong { color: var(--heading); }
.callout-warn { background: var(--warning-bg); }

/* ─── Screenshots ─── */
.shots { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .shots { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .shots { grid-template-columns: repeat(3, 1fr); } }
/* Celular: las capturas van en fila y se deslizan (scroll-snap, sin JS); la siguiente asoma como pista. */
@media (max-width: 639px) {
  .shots {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    margin: 0 -16px; padding: 4px 16px 16px;
  }
  .shots figure { scroll-snap-align: start; }
  .shots:focus-visible { outline-offset: -3px; } /* el carrusel llega al borde de la pantalla: el anillo va por dentro */
}
figure { margin: 0; }
figcaption { font-size: .92rem; color: var(--muted); margin-top: 12px; }
figcaption strong { color: var(--heading); display: block; font-size: 1rem; }
.phone-frame {
  max-width: 340px; margin: 0 auto; padding: 8px; border-radius: 30px; position: relative;
  background: #0b1220; border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--shadow-card-hover);
}
/* Las capturas de celular miden 600×1299 y arriba repiten el encabezado de la app (menú, idioma, campana):
   ese encabezado termina en el píxel 89 y se muestran solo los 1207 px de abajo. Una captura con otra medida
   necesita su propio recorte. */
.phone-frame img {
  border-radius: 22px; width: 100%; aspect-ratio: 600 / 1207; object-fit: cover; object-position: 50% 100%;
  background: var(--surface-2);
}
/* La de métricas termina 39 px antes (fila 1260): más abajo asoma, cortada, otra fila de tarjetas,
   y el rótulo «Datos de demostración» caía sobre sus títulos. 92 px ocultos arriba ÷ (1299 − 1168). */
.phone-frame img[src*="metrics"] { aspect-ratio: 600 / 1168; object-position: 50% 70.2%; }
.browser-frame {
  border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--border); position: relative;
  box-shadow: var(--shadow-card-hover); background: var(--surface);
}
.browser-frame img { background: var(--surface-2); }
/* La captura de métricas en computadora mide 1200×703 y en la fila 691 empieza el título de otro panel,
   que salía cortado: se muestran las 686 filas de arriba. */
.browser-frame img[src*="metrics-desktop"] { aspect-ratio: 1200 / 686; object-fit: cover; object-position: top; }
/* Rótulo sobre las capturas de métricas. Colores fijos, los de aviso del tema claro: la captura es clara en los dos temas. */
.is-demo::after {
  content: "Datos de demostración"; position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1;
  padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
  background: #fffbeb; color: #92400e; border: 1px solid #92400e;
}
.phone-frame.is-demo::after { bottom: 12px; } /* en la captura de celular cabe justo en la franja vacía bajo la última fila de tarjetas */
.browser-frame::before {
  content: ""; display: block; height: 28px; border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle at 16px 14px, #f87171 5px, transparent 6px),
    radial-gradient(circle at 34px 14px, #fbbf24 5px, transparent 6px),
    radial-gradient(circle at 52px 14px, #60b69e 5px, transparent 6px),
    var(--surface-2);
}
.demo-note { font-size: .875rem; color: var(--muted); margin-top: 20px; }
/* Celular: una captura de computadora encogida al ancho de la pantalla no se lee. Se muestra a 720 px
   y se desliza dentro del marco; la barra del marco y el rótulo de demostración quedan quietos. */
.swipe-hint { display: none; }
@media (max-width: 639px) {
  .frame-scroll { overflow-x: auto; }
  .frame-scroll img { width: 720px; max-width: none; }
  .frame-scroll:focus-visible { outline-offset: -3px; }
  .swipe-hint { display: inline; }
}

/* Tour */
.tour-toc { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.tour-toc a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--heading); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.tour-toc a:hover { border-color: var(--link); }
/* Bajo 900 px el índice es una sola fila que se desliza (apilado ocupaba 304 px en celular).
   El relleno vertical deja sitio al anillo de foco, que el desborde recortaría. */
@media (max-width: 899px) {
  .tour-toc { flex-wrap: nowrap; overflow-x: auto; margin: -6px -16px 0; padding: 6px 16px 8px; }
  .tour-toc a { white-space: nowrap; scroll-margin-inline: 16px; } /* al enfocarla con teclado, site.js la desliza hasta verse entera */
}
@media (min-width: 768px) and (max-width: 899px) { .tour-toc { margin-inline: -24px; padding-inline: 24px; } } /* desde 768 px el margen de la página es de 24 px */
.tour-step { padding: 48px 0; border-top: 1px solid var(--border); }
.tour-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .tour-grid { grid-template-columns: 1fr 1fr; gap: 48px; } .tour-grid.reverse > :first-child { order: 2; } }
.step-num { font-family: var(--font-mono); font-size: .85rem; color: var(--link); font-weight: 500; }
.tour-media { display: grid; gap: 20px; }
@media (min-width: 640px) { .tour-media.two { grid-template-columns: 1fr 1fr; align-items: start; } }
/* Bajo 900 px el tour va en una columna y con seis capturas de 648 px de alto era más largo que antes de
   rehacerlo. Cada captura conserva su ancho (el texto se lee igual) y enseña la parte de la que habla su
   paso: 760 de sus 1299 px. El recorte va por nombre de archivo:
   object-position vertical = px ocultos arriba ÷ (1299 − px visibles). */
@media (max-width: 899px) {
  .tour-media .phone-frame img { aspect-ratio: 600 / 760; object-position: 50% 70.5%; } /* 380 px: desde el primer mensaje */
  .tour-media img[src*="kb-"] { object-position: 50% 18.6%; }          /* 100 px: desde el título */
  .tour-media img[src*="handover"] { object-position: 50% 82.6%; }     /* 445 px: aviso, mensaje de la persona y nota */
  .tour-media img[src*="chat-booking"] { object-position: 50% 72.7%; } /* 392 px: desde un renglón entero, no a media letra */
  .tour-media img[src*="mytasks"] { object-position: 50% 84.4%; }      /* 455 px: botón Completar y el pedido del huésped */
  .tour-media img[src*="metrics"] { aspect-ratio: 600 / 735; object-position: 50% 93.1%; } /* 525 px arriba y 39 abajo: botones y tarjetas enteras */
}
@media (max-width: 639px) {
  .tour-step { padding: 32px 0; }
  .tour-step > .mt-4 { margin-top: 16px; }
  .tour-grid { gap: 20px; }
}

/* ─── Pricing ─── */
.bands { display: grid; gap: 16px; }
@media (min-width: 900px) { .bands { grid-template-columns: repeat(3, 1fr); } }
.bands .no-js, .billing { grid-column: 1 / -1; margin: 0; }
/* Interruptor mensual / anual: lo monta site.js. Un precio solo se oculta cuando la caja tiene
   data-billing; sin ese atributo cada tarjeta muestra los dos, uno debajo del otro. */
.billing { border: 0; padding: 0; min-width: 0; }
.billing-options { display: inline-flex; max-width: 100%; padding: 4px; border: 1px solid var(--border); border-radius: 26px; background: var(--surface); }
.billing label { position: relative; display: flex; cursor: pointer; }
.billing label span {
  display: flex; align-items: center; min-height: 44px; padding: 4px 16px; border-radius: 22px;
  font-size: .95rem; font-weight: 700; line-height: 1.2; text-align: center; color: var(--text);
  transition: background-color .15s, color .15s;
}
.billing input:checked + span { background: var(--btn-bg); color: var(--btn-text); }
.billing input:focus-visible + span { outline: 3px solid var(--link); outline-offset: 2px; }
.bands[data-billing="monthly"] .bill-annual, .bands[data-billing="annual"] .bill-monthly { display: none; }
.bands:not([data-billing]) .bill + .bill { margin-top: 12px; padding-top: 4px; border-top: 1px dashed var(--border); }
.band { display: flex; flex-direction: column; }
/* Plan destacado (featured en site.js): borde de 2 px hecho con sombra, para que la tarjeta no cambie de tamaño. */
.band-featured { border-color: var(--btn-bg); box-shadow: 0 0 0 1px var(--btn-bg), var(--shadow-card); }
.band-rooms { font-weight: 700; color: var(--heading); font-size: 1.1rem; margin-bottom: 4px; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.price .amount { font-size: 2.6rem; font-weight: 700; color: var(--heading); letter-spacing: -.02em; line-height: 1; }
.price .per { color: var(--muted); font-weight: 500; }
.price-total { font-size: .95rem; font-weight: 700; color: var(--heading); margin: 6px 0 0; }
.band ul { margin-top: 8px; }
.band .btn { margin-top: auto; }
.band-limits { list-style: none; padding: 0; margin: 12px 0 16px; border-top: 1px solid var(--border); }
.band-limits li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .95rem; }
.band-limits span:last-child { font-weight: 700; color: var(--heading); text-align: right; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--heading); background: var(--surface-2); font-weight: 700; }
tr:last-child td { border-bottom: 0; }
/* Celular: la tabla no cabe (cinco columnas). Cada plan pasa a ser una tarjeta y cada celda lleva delante
   el encabezado de su columna (data-label, lo pone site.js), así ninguna columna queda fuera de pantalla. */
@media (max-width: 639px) {
  .table-wrap { overflow: visible; border: 0; background: transparent; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap th, .table-wrap td { display: block; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .table-wrap tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); margin-bottom: 12px; overflow: hidden; }
  .table-wrap tr:last-child { margin-bottom: 0; }
  .table-wrap td[data-label] { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-weight: 700; color: var(--heading); text-align: right; white-space: nowrap; }
  .table-wrap td[data-label]::before { content: attr(data-label); font-weight: 400; color: var(--text); text-align: left; white-space: normal; } /* el rótulo puede partirse; el monto («$39,50 + IVA») no */
  .table-wrap tr td:last-child { border-bottom: 0; }
}

/* ─── FAQ ─── */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.faq summary {
  cursor: pointer; list-style: none; padding: 14px 48px 14px 18px; min-height: 52px;
  font-weight: 700; color: var(--heading); position: relative; display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .answer { padding: 0 18px 16px; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ─── CTA band ─── */
.cta-band { background: linear-gradient(135deg, var(--hero-from), var(--hero-to)); color: #ffffff; border-radius: 16px; padding: 32px 20px; }
@media (min-width: 768px) { .cta-band { padding: 48px; } }
.cta-band h2 { color: #ffffff; }
.cta-band p { color: rgba(255, 255, 255, .88); }
.cta-band a:not(.btn) { color: #ffffff; }

/* ─── Footer ─── */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 40px 0 28px; font-size: .95rem; }
.footer-grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h2 { font-size: 1rem; margin-bottom: 10px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li a { display: inline-block; padding: 10px 0; } /* 44 px de alto sin flex: flex se comía el espacio de «WhatsApp +506…» */
.footer-legal { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 18px; color: var(--muted); font-size: .85rem; }
.footer-legal p { margin-bottom: .4em; }
.legal-identity[hidden] { display: none; }

/* ─── Utilities ─── */
.mt-0 { margin-top: 0; }
.pt-0 { padding-top: 0; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.stack > * + * { margin-top: 16px; }