/* =========================================================
   Atiende (nombre provisional) · landing de presentación
   Estilo: claro y «esmerilado», inspirado en lineaprompt.com.
   ========================================================= */

:root {
  color-scheme: light;

  --bg: #eef2f6;
  --bg-2: #f7f9fc;
  --ink: #0f1722;
  --ink-2: #263244;
  --muted: #566276;
  --faint: #8691a4;
  --line: rgba(38, 54, 80, 0.12);
  --line-2: rgba(38, 54, 80, 0.2);

  --glass: rgba(255, 255, 255, 0.8);
  --glass-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.92);

  --accent: #c2410c;          /* naranja obra: 5,2:1 sobre blanco */
  --accent-600: #9a3412;
  --accent-soft: rgba(194, 65, 12, 0.09);
  --accent-border: rgba(194, 65, 12, 0.26);

  --ok: #0d7a5a;
  --ok-soft: rgba(13, 122, 90, 0.11);
  --hot: #b4232f;
  --hot-soft: rgba(180, 35, 47, 0.1);
  --warn: #a15c07;
  --warn-soft: rgba(161, 92, 7, 0.12);
  --new: #3346b8;
  --new-soft: rgba(51, 70, 184, 0.1);

  --shadow: 0 30px 70px -42px rgba(30, 45, 70, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-sm: 0 14px 30px -22px rgba(30, 45, 70, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --radius: 20px;
  --ease: cubic-bezier(0.2, 0.72, 0.2, 1);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font: 400 17px/1.55 var(--font);
  color: var(--ink);
  background:
    radial-gradient(900px 620px at 105% -8%, rgba(251, 146, 60, 0.2), transparent 62%),
    radial-gradient(1000px 760px at -12% 104%, rgba(125, 160, 210, 0.26), transparent 62%),
    var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.025em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid rgba(194, 65, 12, 0.55); outline-offset: 3px; border-radius: 8px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; text-decoration: none;
}
.skip:focus { top: 12px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 860px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

/* ---------- fondo ----------
   Sin capas fijas ni filtros de desenfoque: en iPhone (WebKit) el fondo fijo difuminado
   y el cristal esmerilado en decenas de recuadros agotaban la memoria y cerraban la página. */
.hero { position: relative; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(238, 242, 246, 0) 35%, var(--bg) 100%),
    linear-gradient(rgba(38, 54, 80, 0.06) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(38, 54, 80, 0.06) 1px, transparent 1px) 0 0 / 56px 56px;
}

/* En teléfonos, sombras más pequeñas: cuestan menos de pintar */
@media (max-width: 600px) {
  :root {
    --shadow: 0 14px 30px -22px rgba(30, 45, 70, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --shadow-sm: 0 8px 18px -14px rgba(30, 45, 70, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .phone { box-shadow: 0 24px 40px -28px rgba(15, 23, 34, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; }
}

/* ---------- la marca en el texto ---------- */
.marca {
  font-weight: 800; color: inherit; letter-spacing: -0.01em;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.14em;
  text-underline-offset: 0.2em; text-decoration-skip-ink: none;
}
.brand .marca { text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* ---------- botones y piezas ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 14px; border: 1px solid transparent;
  background: var(--accent); color: #fff; font-weight: 650; font-size: 16px; text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(194, 65, 12, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer; transition: transform 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
  font-family: inherit;
}
.btn:hover { background: var(--accent-600); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 20px; height: 20px; fill: currentColor; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; border-radius: 12px; }
.btn-ghost { background: var(--glass-strong); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { background: #fff; }
.btn.full { width: 100%; }

.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm);
  font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }

.eyebrow {
  display: inline-block; padding: 5px 11px; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent-600);
  font-size: 12px; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase;
}
.eyebrow.soft { background: transparent; border-color: transparent; padding-left: 0; }

.demo-tag {
  display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); background: rgba(38, 54, 80, 0.06);
  white-space: nowrap;
}

.ticks li { position: relative; padding-left: 28px; margin: 9px 0; color: var(--ink-2); line-height: 1.45; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230d7a5a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

.fine { font-size: 14px; color: var(--muted); }
.note { margin-top: 14px; font-size: 13.5px; color: var(--faint); text-align: center; }

/* ---------- navegación ---------- */
.nav { position: fixed; top: 12px; left: 0; right: 0; z-index: 50; padding: 0 16px; }
.nav-inner {
  max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 18px;
  padding: 8px 8px 8px 16px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.95); border: 1px solid var(--glass-border);
  box-shadow: 0 18px 40px -30px rgba(30, 45, 70, 0.55);
}
.nav.scrolled .nav-inner { box-shadow: 0 22px 44px -26px rgba(30, 45, 70, 0.6); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 750; font-size: 18px; letter-spacing: -0.02em; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(145deg, #ea580c, #9a3412); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.brand-mark svg { width: 17px; height: 17px; fill: #fff; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { padding: 8px 12px; border-radius: 10px; text-decoration: none; font-size: 15px; color: var(--ink-2); }
.nav-links a:hover { background: rgba(38, 54, 80, 0.06); }
.nav .btn-sm { margin-left: 4px; }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav .btn-sm { margin-left: auto; }
}

/* ---------- portada ---------- */
.hero {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center;
  min-height: 100svh; padding-top: 120px; padding-bottom: 64px;
}
.hero h1 { font-size: clamp(2.5rem, 6.2vw, 4.3rem); line-height: 1.02; font-weight: 780; margin: 22px 0 22px; letter-spacing: -0.035em; }
.hero h1 .u { display: inline; background-image: linear-gradient(transparent 70%, rgba(234, 88, 12, 0.28) 70%); color: var(--accent-600); }
.lede { font-size: clamp(1.06rem, 1.6vw, 1.22rem); color: var(--ink-2); max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chips li { padding: 8px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); }
.hero-visual { display: grid; justify-items: center; gap: 10px; }
.caption { font-size: 12.5px; color: var(--faint); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; min-height: auto; padding-top: 108px; }
}

/* ---------- portada: pruébalo con tu nombre ---------- */
.try {
  margin: 26px 0 0; padding: 14px 16px 12px; max-width: 30em;
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 18px; box-shadow: var(--shadow-sm);
}
.try label { display: block; font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 9px; }
.try-row { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 50px; border-radius: 13px; border: 1.5px solid var(--accent-border); background: #fff; }
.try-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.try-row svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
.try-row input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 17px; color: var(--ink); padding: 12px 0; }
.try small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--faint); }
.fine + .try { margin-top: 22px; }

/* ---------- teléfono (maqueta) ---------- */
.phone {
  --pw: 300px;
  position: relative; width: var(--pw); aspect-ratio: 9 / 18.2; contain: layout paint;
  font-size: calc(var(--pw) / 21);
  border-radius: calc(var(--pw) * 0.15); padding: calc(var(--pw) * 0.035);
  background: linear-gradient(160deg, #1d2633, #0b1017);
  box-shadow: 0 50px 90px -50px rgba(15, 23, 34, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.phone-notch { position: absolute; top: calc(var(--pw) * 0.055); left: 50%; transform: translateX(-50%); width: 30%; height: calc(var(--pw) * 0.055); border-radius: 999px; background: #0b1017; z-index: 3; }
.screen {
  position: absolute; inset: calc(var(--pw) * 0.035); border-radius: calc(var(--pw) * 0.12);
  background: var(--bg-2); overflow: hidden; display: flex; flex-direction: column;
  padding: 3.2em 1em 1em;
}
#storyPhone .screen { opacity: 0; z-index: 1; transition: opacity 0.35s var(--ease) 0.35s; }
#storyPhone .screen.is-active { opacity: 1; z-index: 2; transition-delay: 0s; }
.demo-tag.floating { position: absolute; right: 14px; bottom: 14px; z-index: 4; background: rgba(255, 255, 255, 0.85); }

/* chat */
.chat-head { display: flex; align-items: center; gap: 0.6em; padding-bottom: 0.7em; border-bottom: 1px solid var(--line); }
.chat-head strong { display: block; font-size: 0.95em; line-height: 1.2; }
.chat-head small { display: block; font-size: 0.75em; color: var(--muted); }
.chat-head .demo-tag { margin-left: auto; font-size: 0.55em; }
.avatar { width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center; font-size: 0.8em; font-weight: 750; color: #fff; background: linear-gradient(145deg, #ea580c, #9a3412); flex: none; }
.chat-body { display: flex; flex-direction: column; gap: 0.6em; padding-top: 0.8em; flex: 1; justify-content: flex-start; }
.sys { align-self: center; display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.72em; color: var(--muted); background: rgba(38, 54, 80, 0.07); padding: 0.35em 0.8em; border-radius: 999px; }
.sys svg { width: 1.1em; height: 1.1em; fill: var(--ok); }
.bubble { max-width: 86%; padding: 0.6em 0.8em; border-radius: 1em; font-size: 0.82em; line-height: 1.35; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); }
.bubble.out { align-self: flex-start; background: #fff; border-top-left-radius: 0.3em; }
.bubble.in { align-self: flex-end; background: #ffe7d6; border-top-right-radius: 0.3em; }
.linkcard, .okcard { display: flex; align-items: center; gap: 0.6em; padding: 0.6em 0.75em; border-radius: 0.9em; background: #fff; border: 1px solid var(--line); max-width: 88%; }
.linkcard { align-self: flex-start; }
.okcard { align-self: stretch; max-width: none; background: #ecf8f3; border-color: rgba(13, 122, 90, 0.22); }
.linkcard strong, .okcard strong { display: block; font-size: 0.8em; }
.linkcard small, .okcard small { display: block; font-size: 0.68em; color: var(--muted); }
.lc-ico { width: 2em; height: 2em; border-radius: 0.5em; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 0.9em; flex: none; }
/* La palomita va dibujada: el carácter ✓ sale oscuro en Windows aunque se pinte de blanco */
.check {
  width: 1.9em; height: 1.9em; border-radius: 50%; flex: none; font-size: 0.85em;
  color: transparent; overflow: hidden;
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/62% no-repeat;
}
.quick { display: flex; gap: 0.4em; align-self: flex-start; }
.quick span { font-size: 0.72em; padding: 0.4em 0.8em; border-radius: 999px; border: 1px solid var(--accent-border); color: var(--accent-600); background: #fff; }

/* portada: el formulario va pasando solo */
/* La pantalla nueva aparece encima y la anterior se apaga después: sin fundido a negro */
#heroPhone .screen { opacity: 0; z-index: 1; transition: opacity 0.45s var(--ease) 0.45s; }
#heroPhone .screen.is-active { opacity: 1; z-index: 2; transition-delay: 0s; }
.sent-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.45em; }
.sent-body .check.big { width: 3em; height: 3em; font-size: 1em; margin-bottom: 0.3em; }
.sent-body strong { font-size: 1.2em; }
.sent-body > small { font-size: 0.78em; color: var(--muted); max-width: 16em; line-height: 1.35; }
.summary { width: 100%; margin-top: 0.8em; text-align: left; background: #fff; border: 1px solid #e6e8ee; border-radius: 0.9em; overflow: hidden; }
.summary > svg { display: block; width: 100%; aspect-ratio: 120 / 56; }
.summary ul { padding: 0.2em 0.8em; }
.summary li, .req li { display: flex; justify-content: space-between; gap: 0.6em; font-size: 0.76em; padding: 0.45em 0; border-bottom: 1px solid var(--line); }
.summary li:last-child, .req li:last-child { border-bottom: 0; }
.summary span, .req li span { color: var(--muted); }

/* ---------- formulario simulado, al estilo del de Avenue ---------- */
.fscreen { padding: 3em 0.95em 0.6em; background: #f7f8fa; }
.fm-top { display: flex; align-items: center; gap: 0.6em; }
.fm-back { width: 1.55em; height: 1.55em; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); display: grid; place-items: center; font-size: 0.85em; line-height: 1; flex: none; }
.fm-bar { flex: 1; height: 0.32em; border-radius: 1em; background: #e6e8ee; overflow: hidden; }
.fm-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.fm-x { color: #d64545; font-size: 0.9em; font-weight: 700; flex: none; }
.fm-brand { display: flex; align-items: center; justify-content: center; gap: 0.45em; margin-top: 0.75em; font-size: 0.72em; font-weight: 650; color: var(--ink-2); }
.fm-brand .avatar { width: 1.9em; height: 1.9em; font-size: 0.75em; }
.fm-title { text-align: center; font-size: 1.12em; font-weight: 780; letter-spacing: -0.015em; margin: 0.35em 0 0.75em; line-height: 1.2; }
.fm-sub { text-align: center; font-size: 0.68em; color: var(--muted); margin: -0.55em 0 0.8em; }
.screen .opt { font: inherit; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fm-foot { margin-top: 0.55em; text-align: center; font-size: 0.6em; color: var(--faint); }
.fm-foot .marca { color: var(--ink-2); }

/* botones */
.fm-next {
  margin-top: auto; width: 100%; font: inherit; font-weight: 700; font-size: 0.86em; color: #fff; cursor: pointer;
  padding: 0.8em; border: 0; border-radius: 0.75em; background: var(--accent);
  box-shadow: 0 8px 18px -10px rgba(194, 65, 12, 0.8);
}
.fm-next:hover { background: var(--accent-600); }
.fm-next.small { width: auto; margin: 0 0 0 auto; padding: 0.65em 1em; font-size: 0.78em; }
.fm-actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1.5fr; gap: 0.5em; }
.fm-actions .fm-next { margin-top: 0; }
.fm-skip { font: inherit; font-weight: 650; font-size: 0.86em; color: var(--ink-2); padding: 0.8em; border: 0; border-radius: 0.75em; background: #e9ebf0; cursor: pointer; }

/* paso 1: tarjetas con imagen, 2x2 */
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55em; }
.svc { position: relative; text-align: left; padding: 0.4em 0.4em 0.55em; background: #fff; border: 1px solid #e6e8ee; border-radius: 0.85em; box-shadow: 0 1px 2px rgba(30, 45, 70, 0.05); }
.svc svg { display: block; width: 100%; aspect-ratio: 120 / 72; border-radius: 0.55em; }
.svc b { display: block; font-size: 0.72em; font-weight: 700; margin: 0.5em 0.2em 0; line-height: 1.2; }
.svc small { display: block; font-size: 0.6em; color: var(--muted); margin: 0.2em 0.25em 0; line-height: 1.3; }
.svc.sel { border-color: var(--accent); box-shadow: 0 0 0 0.18em var(--accent-soft); }
.svc.sel::after, .extra.sel::after {
  content: ""; position: absolute; top: 0.55em; right: 0.55em; width: 1.25em; height: 1.25em; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
  box-shadow: 0 0 0 0.15em #fff;
}

/* paso 2: calendario */
.cal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.55em; }
.cal-month { font-size: 0.72em; font-weight: 700; color: #fff; background: var(--accent); padding: 0.45em 0.8em; border-radius: 0.5em; }
.cal-arrows { font-size: 0.95em; color: var(--muted); letter-spacing: 0.5em; }
.cal-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35em; padding-bottom: 0.6em; border-bottom: 1px solid #e6e8ee; margin-bottom: 0.55em; }
.cal-days .opt { background: #fff; border: 1px solid #e6e8ee; border-radius: 0.6em; padding: 0.35em 0 0.45em; font-size: 1em; font-weight: 600; line-height: 1.15; }
.cal-days .opt small { display: block; font-size: 0.58em; font-weight: 500; color: var(--muted); }
.cal-days .opt.sel { background: var(--accent); border-color: var(--accent); color: #fff; }
.cal-days .opt.sel small { color: rgba(255, 255, 255, 0.85); }
.cal-slots { display: grid; gap: 0.38em; }
.cal-slots .opt { display: flex; align-items: center; justify-content: space-between; text-align: left; font-size: 0.8em; padding: 0.65em 0.85em; background: #fff; border: 1px solid #e6e8ee; border-radius: 0.6em; }
.cal-slots .opt i { width: 0.45em; height: 0.45em; border-radius: 50%; background: #22a55a; }
.cal-slots .opt.sel { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-600); font-weight: 700; }
.cal-bottom { margin-top: auto; display: flex; align-items: center; gap: 0.45em; }
.cal-bottom small { font-size: 0.7em; color: var(--ink-2); }
.switch { width: 2.2em; height: 1.3em; border-radius: 1em; border: 0; background: #d9dce3; position: relative; padding: 0; transition: background 0.2s var(--ease); }
.switch::after { content: ""; position: absolute; top: 0.15em; left: 0.15em; width: 1em; height: 1em; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.2s var(--ease); }
.switch.sel { background: var(--accent); }
.switch.sel::after { transform: translateX(0.9em); }

/* paso 3: extras con miniatura */
.extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55em; }
.extra-grid .extra { position: relative; display: flex; align-items: center; gap: 0.5em; text-align: left; font-size: 0.74em; font-weight: 600; line-height: 1.2; padding: 0.6em 0.55em; background: #fff; border: 1px solid #e6e8ee; border-radius: 0.8em; min-height: 5.2em; flex-direction: column; justify-content: center; align-items: flex-start; }
.extra i { width: 2.9em; height: 2.9em; border-radius: 0.7em; display: grid; place-items: center; flex: none; }
.extra svg { width: 1.6em; height: 1.6em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.extra .t1 { background: #e4eefa; color: #3f6ea8; } .extra .t2 { background: #fdecdd; color: #c2410c; }
.extra .t3 { background: #eef7f1; color: #2f8a5f; } .extra .t4 { background: #e3f2f7; color: #1f7a99; }
.extra .t5 { background: #fff3d1; color: #a16207; } .extra .t6 { background: #efeafc; color: #6d4fc2; }
.extra.sel { border-color: var(--accent); box-shadow: 0 0 0 0.16em var(--accent-soft); }
.extra.sel::after { top: 0.4em; right: 0.4em; width: 1.1em; height: 1.1em; }

/* paso 4: fotos y campos con la etiqueta dentro */
.ph-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4em; margin-bottom: 0.55em; }
.ph { aspect-ratio: 1; border-radius: 0.6em; overflow: hidden; display: block; box-shadow: 0 1px 2px rgba(30, 45, 70, 0.12); }
.ph svg { display: block; width: 100%; height: 100%; }
.ph.add { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1.5px dashed var(--accent-border); font-size: 1.2em; font-weight: 600; box-shadow: none; }
.fl { display: block; font-size: 0.78em; padding: 0.4em 0.7em 0.45em; background: #fff; border: 1px solid #e6e8ee; border-radius: 0.6em; margin-bottom: 0.4em; }
.fl small { display: block; font-size: 0.72em; color: var(--muted); line-height: 1.3; }
.fl.area { min-height: 3.6em; line-height: 1.35; color: var(--ink-2); }
.fl2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4em; }
.seg { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 0.35em; margin: 0.15em 0 0.2em; }
.seg small { font-size: 0.66em; color: var(--muted); margin-right: 0.2em; }
.seg .opt { font-size: 0.74em; padding: 0.5em 0; text-align: center; background: #fff; border: 1px solid #e6e8ee; border-radius: 0.6em; }
.seg .opt.sel { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-600); font-weight: 700; }

/* fotos en la bandeja del panel */
.thumbs { display: flex; gap: 0.3em; margin-top: 0.3em; }
.thumbs .ph { width: 2.6em; height: 2.6em; }

/* ficha de Google (maqueta genérica, sin marca de Google) */
.gprof { padding: 0; }
.gp-map {
  position: relative; height: 38%; flex: none;
  background:
    linear-gradient(115deg, transparent 46%, rgba(255, 255, 255, 0.9) 46.5%, rgba(255, 255, 255, 0.9) 49%, transparent 49.5%),
    linear-gradient(25deg, transparent 58%, rgba(255, 255, 255, 0.8) 58.5%, rgba(255, 255, 255, 0.8) 61%, transparent 61.5%),
    linear-gradient(160deg, #dfe8e1, #cfdcea);
}
.pin { position: absolute; left: 50%; top: 52%; width: 1.6em; height: 1.6em; border-radius: 50% 50% 50% 0; background: var(--accent); transform: translate(-50%, -100%) rotate(-45deg); box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.35); }
.pin::after { content: ""; position: absolute; inset: 0.5em; border-radius: 50%; background: #fff; }
.gp-card { background: #fff; margin: -1.2em 0.8em 0; position: relative; border-radius: 1em; padding: 0.9em; box-shadow: 0 10px 24px -14px rgba(30, 45, 70, 0.5); }
.gp-card strong { display: block; font-size: 1.1em; }
.gp-card small { display: block; font-size: 0.72em; color: var(--muted); margin-top: 0.15em; }
.gp-actions { display: flex; flex-wrap: wrap; gap: 0.35em; margin-top: 0.8em; }
.gp-actions span, .gp-actions button { font: inherit; font-size: 0.7em; font-weight: 650; padding: 0.55em 0.8em; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); }
.gp-actions .main { background: var(--accent); border-color: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 0 0 0.35em var(--accent-soft); }
.gp-alt { margin: auto 0.8em 1em; display: grid; gap: 0.4em; }
.gp-alt small { font-size: 0.7em; color: var(--muted); }
.gp-alt .bubble { max-width: none; }
.gp-alt .bubble b { display: block; color: var(--accent-600); margin-top: 0.2em; }

/* bandeja del panel */
.req { background: #fff; border: 1px solid var(--line); border-radius: 0.9em; padding: 0.7em 0.8em; margin-top: 0.9em; }
.req-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3em; }
.req-top .st { font-size: 0.65em; }
.req ul { margin-bottom: 0.4em; }
.req-actions { margin-top: auto; display: grid; gap: 0.45em; }
.req-actions .fm-next { margin-top: 0; }
.req-actions .ghost { text-align: center; font-size: 0.8em; font-weight: 650; padding: 0.65em; border-radius: 0.8em; border: 1px solid var(--line-2); background: #fff; }
.req-note { display: block; text-align: center; font-size: 0.68em; color: var(--muted); margin-top: 0.6em; }
.chat .notify { margin-top: 0.3em; }
.lc-ico.star { background: #fff3d1; color: #e39a1b; font-size: 1em; }
.review { background: #fff; border: 1px solid var(--line); border-radius: 0.9em; padding: 0.6em 0.75em; }
.rv-top { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.35em; }
.rv-top b { display: block; font-size: 0.8em; }
.rv-top .stars { display: block; font-size: 0.72em; }
.avatar.alt { background: linear-gradient(145deg, #5b6b82, #2b3647); width: 2em; height: 2em; font-size: 0.7em; }
.review p { font-size: 0.76em; color: var(--ink-2); line-height: 1.35; }

/* llamada */
.call { background: linear-gradient(180deg, #16202d, #0f1722); color: #fff; }
.call-top { text-align: center; }
.call-top small { display: block; font-size: 0.72em; color: rgba(255, 255, 255, 0.6); }
.call-top strong { display: block; font-size: 1em; margin-top: 0.2em; font-weight: 650; }
.timer { font-variant-numeric: tabular-nums; }
.wave { display: flex; justify-content: center; align-items: center; gap: 0.3em; height: 3.2em; margin: 1em 0 0.8em; }
.wave i { width: 0.32em; height: 95%; border-radius: 1em; background: #fb923c; transform: scaleY(0.3); }
.is-live .wave i { animation: wave 1.1s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: 0.12s; } .wave i:nth-child(3) { animation-delay: 0.24s; }
.wave i:nth-child(4) { animation-delay: 0.36s; } .wave i:nth-child(5) { animation-delay: 0.48s; }
.wave i:nth-child(6) { animation-delay: 0.6s; } .wave i:nth-child(7) { animation-delay: 0.72s; }
@keyframes wave { 0%, 100% { transform: scaleY(0.28); opacity: 0.6; } 50% { transform: scaleY(1); opacity: 1; } }
.transcript { display: flex; flex-direction: column; gap: 0.55em; }
.transcript p { font-size: 0.76em; line-height: 1.35; padding: 0.55em 0.7em; border-radius: 0.8em; background: rgba(255, 255, 255, 0.08); }
.transcript .t-out { background: rgba(251, 146, 60, 0.16); }
.transcript b { display: block; font-size: 0.8em; font-weight: 700; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.15em; text-transform: uppercase; letter-spacing: 0.06em; }
.tags { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: auto; }
.tags span { font-size: 0.68em; padding: 0.35em 0.7em; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }

/* cabecera de pantalla del panel */
.book-head small { display: block; font-size: 0.72em; color: var(--muted); }
.book-head strong { display: block; font-size: 1.02em; line-height: 1.2; margin-top: 0.15em; }
.btn-mock { margin-top: auto; text-align: center; padding: 0.7em; border-radius: 0.8em; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.85em; }
.btn-mock.sm { margin: 0; padding: 0.45em 0.8em; font-size: 0.8em; display: inline-block; }

.notify { margin-top: auto; font-size: 0.78em; font-weight: 650; padding: 0.7em 0.8em; border-radius: 0.8em; background: #fff4ec; color: var(--accent-600); border: 1px solid var(--accent-border); }
.notify span { color: var(--accent); }

/* ---------- secciones ---------- */
.section { padding-top: 110px; padding-bottom: 20px; }
@media (max-width: 640px) { .section { padding-top: 84px; } }
.head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.head.left { text-align: left; margin: 0; }
.head h2 { font-size: clamp(1.95rem, 4.4vw, 3.05rem); line-height: 1.06; font-weight: 760; margin: 16px 0 16px; }
.head p { font-size: clamp(1.02rem, 1.4vw, 1.14rem); color: var(--muted); }

.card, .plan, .window, .profile, .result, .book-card, .table-wrap, .faq, .final-copy .after li {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow);
}

.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card { padding: 26px; }
.card h3 { font-size: 1.2rem; margin: 16px 0 6px; }
.card p { color: var(--muted); }
.ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.ico svg { width: 24px; height: 24px; fill: currentColor; }
@media (max-width: 1020px) { .cards4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards4 { grid-template-columns: 1fr; } }

/* ---------- cómo funciona: historia al bajar ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.story-visual { order: 2; align-self: stretch; }
.story-sticky { position: sticky; top: max(88px, calc(50svh - 318px)); display: grid; justify-items: center; gap: 10px; }
.steps { order: 1; position: relative; padding-left: 0; }
.rail { position: absolute; left: 25px; top: 30px; bottom: 30px; width: 2px; background: var(--line-2); border-radius: 2px; }
.rail-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background: linear-gradient(var(--accent), #fb923c); border-radius: 2px; }
.step { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 20px; min-height: 58vh; align-items: center; padding: 20px 0; scroll-margin-top: 84px; }
.step:first-of-type { min-height: 48vh; }
.step .num {
  position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  font: 700 15px var(--mono); color: var(--faint); background: var(--glass-strong); border: 1px solid var(--line-2);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.step > div { padding: 24px 26px; border-radius: var(--radius); border: 1px solid transparent; transition: opacity 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease); opacity: 0.45; }
.step h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 8px 0 8px; }
.step p { color: var(--muted); font-size: 1.05rem; }
.step-tag { font-size: 12px; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.step.is-active .num { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 10px 24px -10px rgba(194, 65, 12, 0.8); }
.step.is-active > div { opacity: 1; background: var(--glass); border-color: var(--glass-border); box-shadow: var(--shadow); }
.step.is-active .step-tag { color: var(--accent-600); }

.result {
  display: flex; align-items: center; gap: 16px; max-width: 640px; margin: 40px auto 0; padding: 20px 24px;
  background: #ecf8f3; border-color: rgba(13, 122, 90, 0.2);
}
.result .check.big { width: 44px; height: 44px; font-size: 20px; color: transparent; }
.result strong { display: block; font-size: 1.08rem; }
.result span { display: block; color: var(--muted); line-height: 1.45; }

.story-sticky .phone { --pw: clamp(220px, calc((100svh - 150px) / 2.03), 300px); }
.step-phone { display: none; }

/* Pantallas medianas: siguen las dos columnas, pasos a la izquierda y móvil a la derecha */
@media (max-width: 900px) and (min-width: 601px) {
  .story { grid-template-columns: 1fr auto; gap: 28px; }
  .story-sticky { top: 88px; }
  .story-sticky .phone { --pw: clamp(190px, min(30vw, calc((100svh - 150px) / 2.03)), 250px); }
  .step { grid-template-columns: 44px 1fr; gap: 12px; min-height: 52svh; }
  .step .num { width: 44px; height: 44px; font-size: 13px; border-radius: 13px; }
  .step > div { padding: 18px; }
  .rail { left: 21px; }
}

/* Teléfonos: sin móvil fijo; cada paso lleva su pantalla debajo del texto */
@media (max-width: 600px) {
  .story { grid-template-columns: 1fr; gap: 0; }
  .story-visual { display: none; }
  .step { grid-template-columns: 40px 1fr; gap: 12px; min-height: 0; align-items: start; padding: 10px 0 18px; }
  .step:first-of-type { min-height: 0; }
  .step .num { width: 40px; height: 40px; font-size: 13px; border-radius: 12px; }
  .step > div { padding: 18px 16px 20px; opacity: 1; background: var(--glass); border-color: var(--glass-border); box-shadow: var(--shadow); }
  .step-phone { display: block; --pw: min(230px, 62vw); margin: 18px auto 0; }
  .rail { left: 19px; }
}

/* ---------- qué incluye ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 90px; }
.feature.flip .f-copy { order: 2; }
.feature > * { min-width: 0; }   /* un nombre de empresa largo no ensancha la página */
.f-copy h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; margin: 8px 0 14px; }
.f-copy p { color: var(--muted); font-size: 1.06rem; margin-bottom: 12px; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 28px; margin-bottom: 64px; }
  .feature.flip .f-copy { order: 0; }
}

.f-visual.center { display: grid; justify-items: center; }
.phone.small { --pw: 260px; }
.window { overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.5); }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff6258; }
.win-bar i:nth-child(2) { background: #ffbd2e; } .win-bar i:nth-child(3) { background: #28c840; }
.win-bar span:first-of-type { margin-left: 10px; font-weight: 650; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-bar .demo-tag { margin-left: auto; flex: none; }
.rows li { display: grid; grid-template-columns: 1.1fr 1.2fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.rows li:last-child { border-bottom: 0; }
.who b { display: block; }
.who small, .what { color: var(--muted); font-size: 13.5px; }
.st { font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 8px; white-space: nowrap; }
.st.ok { background: var(--ok-soft); color: var(--ok); }
.st.hot { background: var(--hot-soft); color: var(--hot); }
.st.warn { background: var(--warn-soft); color: var(--warn); }
.st.new { background: var(--new-soft); color: var(--new); }
@media (max-width: 520px) {
  .rows li { grid-template-columns: 1fr auto; }
  .rows .what { grid-column: 1 / -1; grid-row: 2; }
}

.profile { position: relative; overflow: hidden; max-width: 460px; margin: 0 auto; }
.p-cover { height: 120px; background: linear-gradient(120deg, #d9c4ae, #b9a38b 45%, #93a7bd); }
.p-body { padding: 18px 20px 22px; }
.p-body strong { font-size: 1.3rem; display: block; }
.p-body small { color: var(--muted); font-size: 14px; }
.stars { color: #e39a1b; letter-spacing: 1px; }
.p-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.p-actions span { font-size: 14px; font-weight: 650; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; }
.p-actions .main { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 5px var(--accent-soft); }
.profile .demo-tag.floating { top: 12px; bottom: auto; }

.miniweb { padding: 22px; }
.miniweb strong { display: block; font-size: 1.25rem; line-height: 1.2; }
.miniweb small { display: block; color: var(--muted); margin-top: 6px; font-size: 14px; }
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin: 16px 0; }
.gallery i { height: 96px; border-radius: 12px; background: linear-gradient(135deg, #d6dde6, #9fb0c4); }
.gallery i:nth-child(2) { background: linear-gradient(135deg, #eadbcb, #bda184); }
.gallery i:nth-child(3) { background: linear-gradient(135deg, #d3e5df, #8fb3a7); }
.mw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---------- línea de tiempo (ficha del cliente) ---------- */
.timeline li { position: relative; display: grid; grid-template-columns: 112px 1fr; column-gap: 16px; padding: 0 0 18px 20px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.timeline li::after { content: ""; position: absolute; left: 4px; top: 20px; bottom: 2px; width: 1px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline li.ok::before { background: var(--ok); }
.timeline li.hot::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.timeline time { font: 600 12.5px/1.6 var(--mono); color: var(--faint); grid-row: span 2; }
.timeline b { font-size: 15px; font-weight: 650; }
.timeline small { color: var(--muted); font-size: 13.5px; grid-column: 2; }
.timeline li.hot small { color: var(--ink-2); font-style: italic; }

/* ---------- el panel, por dentro (simulación) ---------- */
.app {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); overflow: hidden;
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 22px; box-shadow: var(--shadow);
}
.app-side, .app-main { min-width: 0; }
.app-side { background: #f4f6f9; border-right: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 16px; }
.app-biz { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.app-biz .avatar { width: 36px; height: 36px; font-size: 13px; }
.app-biz b { display: block; font-size: 15px; line-height: 1.2; }
.app-biz small { display: block; font-size: 12.5px; color: var(--muted); }
.app-tabs { display: grid; gap: 4px; }
.app-tab {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink-2); background: transparent; border: 0; border-radius: 11px; padding: 10px 10px;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.app-tab svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app-tab:hover { background: rgba(38, 54, 80, 0.06); }
.app-tab.is-on { background: #fff; color: var(--accent-600); box-shadow: 0 1px 2px rgba(30, 45, 70, 0.08), 0 0 0 1px var(--line); }
.app-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.app-demo { margin-top: auto; align-self: flex-start; }

.app-main { position: relative; display: grid; padding: 22px 24px; }
.app-view { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s; min-width: 0; }
.app-view.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity 0.3s var(--ease) 0.04s, transform 0.32s var(--ease) 0.04s; }
.av-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.av-head h3 { font-size: 1.25rem; }
.av-head span { font-size: 13.5px; color: var(--muted); }
.av-note { margin-top: 12px; font-size: 13.5px; color: var(--muted); }

.app-toast {
  position: absolute; top: 14px; right: 16px; z-index: 3; max-width: calc(100% - 32px);
  background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; padding: 10px 14px; border-radius: 12px;
  box-shadow: 0 12px 26px -14px rgba(15, 23, 34, 0.7);
  opacity: 0; transform: translateY(-8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); pointer-events: none;
}
.app-toast.show { opacity: 1; transform: none; }

/* solicitudes */
.rq-list { display: grid; gap: 8px; }
.rq { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; padding: 11px 14px; background: #fff; border: 1px solid #e6e8ee; border-radius: 14px; overflow: hidden; max-height: 100px; transition: max-height 0.35s var(--ease), padding 0.35s var(--ease), margin 0.35s var(--ease), opacity 0.3s var(--ease) 0.05s, border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.rq[data-open] { cursor: pointer; }
.rq[data-open]:hover { border-color: var(--accent-border); }
.rq .avatar { width: 36px; height: 36px; font-size: 12.5px; }
.rq-main b { display: block; font-size: 15px; }
.rq-main small, .rq-when small { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; }
.rq-when { font-size: 14px; font-weight: 600; text-align: right; white-space: nowrap; }
.rq-when small { font-weight: 500; }
.rq .st { justify-self: end; }
.st:not(.ok):not(.hot):not(.warn):not(.new) { background: rgba(38, 54, 80, 0.07); color: var(--ink-2); }
.rq.is-new { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); }
.js .rq.is-hidden { max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -8px; border-width: 0; opacity: 0; transition: none; }

/* calendario */
.cal-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.cw-day { background: #fff; border: 1px solid #e6e8ee; border-radius: 14px; padding: 10px; min-height: 250px; display: flex; flex-direction: column; gap: 8px; }
.cw-day > b { font-size: 13.5px; color: var(--ink-2); }
.cw-free { font-size: 13px; color: var(--faint); }
.cw-ev { font-size: 13px; font-weight: 600; line-height: 1.3; padding: 8px 9px; border-radius: 10px; background: var(--ok-soft); color: #0b5c44; border: 1px solid rgba(13, 122, 90, 0.2); transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease); }
.cw-ev time { display: block; font: 700 12px var(--mono); opacity: 0.8; }
.cw-ev.done { background: rgba(38, 54, 80, 0.06); color: var(--muted); border-color: var(--line); }
.cw-ev.work { background: repeating-linear-gradient(135deg, #f1f3f6 0 6px, #e9ecf1 6px 12px); color: var(--muted); border-color: var(--line); }
.cw-tag { display: none; margin-top: 5px; font-size: 11px; font-weight: 700; color: var(--accent-600); }
.cw-ev.pend { background: #fff; color: var(--ink-2); border: 1.5px dashed var(--accent); }
.cw-ev.pend .cw-tag { display: block; }

/* ficha del cliente */
.cl-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.cl-head .avatar { width: 42px; height: 42px; font-size: 14px; }
.cl-head h3 { font-size: 1.2rem; }
.cl-head small { color: var(--muted); font-size: 13.5px; }
.cl-actions { margin-left: auto; display: flex; gap: 6px; }
.cl-actions span { font-size: 13px; font-weight: 650; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; }
.cl-actions .wa { background: var(--ok); border-color: var(--ok); color: #fff; }
.cl-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 20px; align-items: start; }
.cl-info { display: grid; gap: 8px; }
.cl-info > div { font-size: 14px; font-weight: 600; background: #fff; border: 1px solid #e6e8ee; border-radius: 12px; padding: 8px 12px; }
.cl-info small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.cl-info .st { font-size: 11px; margin-left: 4px; }
.cl-info .cl-photos { display: flex; gap: 8px; background: transparent; border: 0; padding: 0; }
.cl-photos .ph { width: 54px; height: 54px; }
.js .app .timeline li { opacity: 0; transform: translateY(6px); transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); }
.js .app .timeline li.in { opacity: 1; transform: none; }

/* resumen del mes */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.kpi { background: #fff; border: 1px solid #e6e8ee; border-radius: 14px; padding: 12px 14px; }
.kpi small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.kpi b { display: block; font-family: var(--font-display); font-size: 1.9rem; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rs-card { background: #fff; border: 1px solid #e6e8ee; border-radius: 14px; padding: 12px 14px; }
.rs-card > small { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; height: 110px; padding: 0 6px; }
.bars i { position: relative; display: block; height: calc(var(--h) * 100%); border-radius: 8px 8px 3px 3px; background: linear-gradient(var(--accent), #fb923c); transform-origin: bottom; transition: transform 0.45s var(--ease); }
.bars em { position: absolute; top: -20px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.bars-x { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 6px 6px 0; }
.bars-x span { text-align: center; font-size: 12px; color: var(--muted); }
.src { display: grid; gap: 12px; }
.rs-card.wide { grid-column: 1 / -1; }
.stack { display: flex; gap: 4px; height: 14px; border-radius: 8px; overflow: hidden; }
.stack i { flex: var(--f); display: block; }
.s-ok { background: var(--ok); } .s-warn { background: #f59e0b; } .s-off { background: #d5d9e0; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.stack-legend li { display: flex; align-items: center; gap: 7px; }
.stack-legend li i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.stack-legend b { font-variant-numeric: tabular-nums; }
.src li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 14px; font-weight: 600; }
.src li b { font-variant-numeric: tabular-nums; }
.src li i { grid-column: 1 / -1; height: 8px; border-radius: 8px; background: var(--line); position: relative; overflow: hidden; }
.src li i::after { content: ""; position: absolute; inset: 0; width: calc(var(--w) * 100%); border-radius: inherit; background: var(--accent); transform-origin: left; transition: transform 0.6s var(--ease); }
.js .app .play-out .bars i { transform: scaleY(0); }
.js .app .play-out .src li i::after { transform: scaleX(0); }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 12px 10px; gap: 12px; }
  .app-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -12px; padding: 0 12px 2px; }
  .app-tabs::-webkit-scrollbar { display: none; }
  .app-tab { width: auto; flex: none; white-space: nowrap; padding: 9px 12px; font-size: 14px; }
  .app-demo { position: absolute; right: 14px; top: 20px; margin: 0; }
  .app { position: relative; }
  .app-main { padding: 16px 14px 18px; }
  .cal-week { grid-template-columns: 1fr; gap: 8px; }
  .cw-day { min-height: 0; flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; }
  .cw-day > b { width: 54px; flex: none; }
  .cw-ev { flex: 1; }
  .cl-grid { grid-template-columns: 1fr; gap: 14px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .rs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .rq { grid-template-columns: auto 1fr auto; gap: 10px; padding: 10px 12px; }
  .rq-when { display: none; }
  .rq .st { font-size: 11px; padding: 4px 7px; }
  .rq-main b { font-size: 14.5px; }
  .rq-main small { font-size: 12.5px; }
  .cl-actions span { padding: 7px 9px; font-size: 12px; }
  .timeline li.opt-m { display: none; }
  .cl-info { grid-template-columns: 1fr 1fr; }
  .cl-info > div { font-size: 12.5px; padding: 6px 9px; line-height: 1.3; }
  .cl-info .cl-photos { grid-column: 1 / -1; }
  .rs-card.wide { display: none; }
  .cl-actions span:not(.wa) { display: none; }
  .cl-head { padding-bottom: 10px; margin-bottom: 10px; }
  .cl-head .avatar { width: 36px; height: 36px; font-size: 12.5px; }
  .cl-photos .ph { width: 44px; height: 44px; }
  .app .timeline li { grid-template-columns: 62px 1fr; column-gap: 10px; padding-bottom: 9px; padding-left: 18px; }
  .app .timeline time { grid-row: span 2; font-size: 10.5px; line-height: 1.5; }
  .app .timeline small { grid-column: 2; font-size: 12px; }
  .app .timeline b { font-size: 13.5px; line-height: 1.3; }
  .bars { height: 80px; }
  .app-side { position: relative; padding: 10px 12px 8px; gap: 8px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .app-biz { min-width: 0; padding: 0; }
  .app-biz > div { min-width: 0; }
  .app-biz b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-tabs { grid-column: 1 / -1; grid-row: 2; }
  .app-biz .avatar { width: 30px; height: 30px; font-size: 11px; }
  .app-biz b { font-size: 14px; }
  .app-biz small { font-size: 11.5px; }
  .app-demo { position: static; grid-column: 2; grid-row: 1; margin: 0; font-size: 9.5px; padding: 3px 6px; }
  .app-demo .long { display: none; }
  .app-tab { padding: 7px 10px; font-size: 13px; gap: 7px; }
  .app-tab svg { width: 16px; height: 16px; }
  .app-badge { min-width: 18px; height: 18px; font-size: 10.5px; }
  .app-main { height: 452px; padding: 12px; overflow: hidden; }
  .av-head { margin-bottom: 10px; }
  .av-head h3 { font-size: 1.08rem; }
  .av-head span { font-size: 12.5px; }
  .rq-list { gap: 6px; }
  .js .rq.is-hidden { margin-bottom: -6px; }
  .rq { padding: 8px 10px; }
  .rq .avatar { width: 30px; height: 30px; font-size: 11px; }
  .cal-week { gap: 6px; }
  .cw-day { padding: 7px 9px; gap: 7px; }
  .cw-day > b { width: 44px; font-size: 12.5px; }
  .cw-ev { padding: 5px 7px; font-size: 12px; }
  .cw-ev time { font-size: 10.5px; }
  .cw-tag { font-size: 10px; margin-top: 2px; }
  .av-note { font-size: 12px; margin-top: 8px; }
  .cl-info { gap: 6px; }
  .cl-head { padding-bottom: 8px; margin-bottom: 8px; }
  .timeline li.opt-s { display: none; }
  .cl-info .cl-photos { display: none; }
  .kpis { gap: 8px; margin-bottom: 8px; }
  .kpi { padding: 6px 10px; }
  .kpi small { font-size: 11px; }
  .kpi b { font-size: 1.3rem; }
  .rs-grid { gap: 8px; }
  .rs-card { padding: 8px 12px; }
  .rs-card > small { font-size: 11.5px; margin-bottom: 4px; }
  .bars { height: 48px; gap: 10px; margin-top: 15px; }
  .bars em { top: -16px; font-size: 11px; }
  .bars-x { gap: 10px; }
  .bars-x span { font-size: 11px; }
  .src { gap: 5px; }
  .src li { font-size: 12.5px; gap: 3px 10px; }
  .src li i { height: 6px; }
  .app-toast { left: 12px; right: 12px; top: 10px; max-width: none; }
}
@media (max-width: 520px) {
  .timeline li { grid-template-columns: 1fr; }
  .timeline time { grid-row: auto; }
  .timeline small { grid-column: 1; }
}

/* ---------- comparativa ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px; }
.compare { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.compare th, .compare td { padding: 15px 14px; text-align: center; border-bottom: 1px solid var(--line); }
.compare thead th { font-size: 14px; font-weight: 700; color: var(--ink-2); vertical-align: bottom; }
.compare tbody th { text-align: left; font-weight: 600; color: var(--ink); width: 30%; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare td { color: var(--muted); }
.compare td.y { color: var(--ok); font-weight: 700; }
.compare td.n { color: var(--faint); }
.compare .us { background: var(--accent-soft); }
.swipe { display: none; }
@media (max-width: 760px) {
  .compare { min-width: 600px; font-size: 14px; }
  .compare th, .compare td { padding: 13px 10px; }
  .compare tbody th, .compare thead th:first-child {
    position: sticky; left: 0; z-index: 1; width: 150px; min-width: 150px;
    background: #f4f7fa; box-shadow: 6px 0 10px -8px rgba(30, 45, 70, 0.35);
  }
  .swipe { display: block; margin-top: 10px; font-size: 13px; color: var(--faint); text-align: right; }
}
.compare thead .us { color: var(--accent-600); border-radius: 14px 14px 0 0; }
.compare tbody tr:last-child .us { border-radius: 0 0 14px 14px; }

/* ---------- precios ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan { position: relative; padding: 28px 24px 24px; display: flex; flex-direction: column; }
.plan h3 { font-size: 1.35rem; }
.plan .for { color: var(--muted); margin: 6px 0 16px; min-height: 2.9em; }
.price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 14px; }
.price b { font-family: var(--font-display); font-size: 2.6rem; letter-spacing: -0.03em; line-height: 1; }
.price span { color: var(--muted); font-size: 15px; }
.fprice { margin: -6px 0 16px; font-size: 14.5px; font-weight: 600; color: var(--accent-600); }
.fprice b { font-size: 1.05rem; }
.founder-note {
  display: flex; align-items: flex-start; gap: 10px; max-width: 760px; margin: 0 auto 34px; padding: 12px 16px;
  border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--ink-2); font-size: 15px;
}
.founder-note .dot { flex: none; margin-top: 7px; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.plan .ticks { margin-bottom: 22px; flex: 1; }
.plan.hl { border-color: var(--accent-border); box-shadow: 0 30px 70px -40px rgba(194, 65, 12, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.badge { position: absolute; top: -12px; left: 24px; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 8px; background: var(--accent); color: #fff; }
.badge.soft { background: var(--ink); }
.plans-foot { text-align: center; margin-top: 28px; display: grid; gap: 8px; color: var(--ink-2); }
.plans-foot a { color: var(--accent-600); font-weight: 650; }
.conds { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.conds li { font-size: 13.5px; font-weight: 600; padding: 7px 12px; border-radius: 10px; background: var(--glass); border: 1px solid var(--glass-border); color: var(--ink-2); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } .plan .for { min-height: 0; } }

/* ---------- preguntas ---------- */
.faq { padding: 6px 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; font-weight: 650; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; color: var(--faint); transition: transform 0.24s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.qn { font: 600 13px var(--mono); color: var(--faint); }
.faq details p { padding: 0 22px 20px 60px; color: var(--muted); }
@media (max-width: 520px) { .faq details p { padding-left: 22px; } }

/* ---------- pruébalo ---------- */
.final { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.final-copy h2 { font-size: clamp(2rem, 4.4vw, 3.05rem); line-height: 1.06; margin: 16px 0 14px; }
.final-copy > p { color: var(--muted); font-size: 1.08rem; }
.after { display: grid; gap: 10px; margin-top: 26px; counter-reset: a; }
.final-copy .after li { padding: 14px 16px 14px 56px; position: relative; box-shadow: var(--shadow-sm); counter-increment: a; }
.after li::before { content: counter(a); position: absolute; left: 16px; top: 14px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-600); font-weight: 750; font-size: 14px; }
.after b { display: block; line-height: 1.3; }
.after span { display: block; color: var(--muted); font-size: 15px; line-height: 1.45; margin-top: 3px; }
.book-card { padding: 26px; display: grid; gap: 16px; }
.bc-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.bc-head .brand-mark { width: 44px; height: 44px; border-radius: 13px; flex: none; }
.bc-head .brand-mark svg { width: 24px; height: 24px; }
.bc-head strong { display: block; font-size: 1.15rem; }
.bc-head small { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.4; margin-top: 2px; }
.book-card .ticks { margin: 0; }
.form-msg { font-size: 14.5px; color: var(--hot); min-height: 0; }
.form-msg:empty { display: none; }
@media (max-width: 900px) { .final { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- pie ---------- */
.footer { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px; padding-top: 80px; padding-bottom: 48px; color: var(--muted); font-size: 15px; }
.footer p { margin-top: 8px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer nav a { text-decoration: none; }
.footer nav a:hover { color: var(--ink); }
.footer .copy { width: 100%; font-size: 13px; color: var(--faint); }

/* ---------- aparición al bajar ---------- */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .wave i { animation: none; transform: scaleY(0.6); }
  #storyPhone .screen, #heroPhone .screen { transition: none; }
}