/* Home de Jesedia · v2 (29/09/2026)
   Crema cálido + tinta + dorado. El dorado es el del logo y de los botones del CRM.
   Los colores viven en :root para poder cambiarlos sin tocar el resto. */
:root {
  --paper: #fbf8f2;
  --paper-2: #f3eee3;
  --card: #ffffff;
  --ink: #16130e;
  --ink-2: #3d372d;
  --muted: #6b6455;
  --line: #e6dfd0;
  --gold: #e0a11a;
  --gold-hi: #f4c04d;
  --gold-lo: #b97f0a;
  --gold-text: #8a5d00; /* dorado para texto chico: 5,6:1 sobre crema */
  --gold-soft: #fbeecb;
  --dark: #12100b;
  --dark-2: #1c1912;
  --dark-line: #2c2818;
  --ok: #1f9d6b;
  --ok-soft: #dff5ea;
  --wa: #25d366;
  --radius: 22px;
  --shadow: 0 1px 2px rgba(22, 19, 14, .05), 0 12px 32px -8px rgba(22, 19, 14, .14);
  --shadow-lg: 0 2px 4px rgba(22, 19, 14, .06), 0 32px 64px -16px rgba(22, 19, 14, .28);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .display { font-family: "Bricolage Grotesque", "Manrope", system-ui, sans-serif; letter-spacing: -.025em; }
svg.i { width: 1.25em; height: 1.25em; flex: none; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }

/* ── Botones ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border-radius: 999px;
  font: 800 16px/1 "Manrope", sans-serif; text-decoration: none; cursor: pointer; border: 0;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 10px 24px -8px rgba(224, 161, 26, .75);
}
.btn-gold:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 16px 32px -8px rgba(224, 161, 26, .9); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; }

/* ── Cabecera ────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 248, 242, .86); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.top.is-scrolled { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font: 800 19px/1 "Bricolage Grotesque", sans-serif; letter-spacing: .04em; }
.mark {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--gold-hi); font: italic 700 21px/1 "Bricolage Grotesque", serif;
  box-shadow: 0 0 0 2px var(--gold);
}
.nav { display: flex; align-items: center; gap: 30px; }
.nav a:not(.btn) { text-decoration: none; font-weight: 700; font-size: 15px; color: var(--ink-2); }
.nav a:not(.btn):hover { color: var(--gold-text); }

/* ── Hero ────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(36px, 6vw, 84px) 0 clamp(40px, 6vw, 72px); }
.hero .wrap > * { min-width: 0; }
.hero .wrap { display: grid; grid-template-columns: 1.14fr .86fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold-ink, #6b4400); font: 800 13px/1 "Manrope", sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
}
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(224, 161, 26, .25); }
.hero h1 { margin-top: 22px; font-weight: 800; font-size: clamp(2.7rem, 4.5vw, 4.1rem); line-height: 1.02; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(transparent 64%, var(--gold-hi) 64% 93%, transparent 93%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .06em; margin: 0 -.06em;
}
/* En pantallas grandes la frase entera va en una linea; en las intermedias puede partirse en vez de desbordar. */
@media (min-width: 1100px) { .hero h1 em { display: inline-block; white-space: nowrap; } }
.hero .lead { margin-top: 24px; max-width: 30em; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink-2); line-height: 1.5; }
.hero .cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero .micro { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); font-weight: 600; }
.hero .micro svg { color: var(--wa); width: 20px; height: 20px; fill: currentColor; }

/* Escena del hero: bandeja + tarjeta flotante */
.stage { position: relative; padding: 18px 0 92px 0; }
.stage::before {
  content: ""; position: absolute; inset: 6% -6% 0 8%; z-index: 0; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
  background: radial-gradient(circle at 30% 30%, var(--gold-hi), var(--gold) 55%, rgba(224, 161, 26, 0) 72%); opacity: .5; filter: blur(2px);
}
.inbox {
  position: relative; z-index: 1; background: var(--card); border: 1px solid var(--line);
  border-radius: 26px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.inbox-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 15px; }
.inbox-head small { font-weight: 600; color: var(--muted); font-size: 12px; }
.live { display: inline-flex; align-items: center; gap: 7px; }
.live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(31, 157, 107, .08); } }
.msg { display: grid; grid-template-columns: 44px 1fr; gap: 13px; padding: 16px 20px; border-bottom: 1px solid var(--line); align-items: start; }
.msg:last-child { border-bottom: 0; }
.chan { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; }
.chan svg { width: 23px; height: 23px; fill: currentColor; }
.c-wa { background: #25d366; }
.c-ig { background: linear-gradient(45deg, #f9a13c, #e1306c 55%, #8a3ab9); }
.c-ml { background: #ffe600; color: var(--ink); }
.c-ms { background: #0a7cff; }
.msg b { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.msg b span { font-weight: 600; font-size: 12px; color: var(--muted); }
.msg p { margin-top: 3px; font-size: 15px; color: var(--ink-2); line-height: 1.4; }
.tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; padding: 5px 11px; border-radius: 999px; background: var(--ok-soft); color: #0e6a47; font: 800 12px/1 "Manrope", sans-serif; }
.tag svg { width: 13px; height: 13px; }
.float-card {
  position: absolute; z-index: 2; left: -6%; bottom: 6px; width: min(310px, 78%);
  background: var(--dark); color: #fff; border-radius: 20px; padding: 18px 20px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--dark-line); transform: rotate(-2deg);
}
.float-card small { display: block; color: var(--gold-hi); font: 800 11px/1 "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.float-card strong { display: block; margin-top: 9px; font: 800 20px/1.15 "Bricolage Grotesque", sans-serif; }
.float-card span { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: 13px; font-weight: 700; color: #cfc7b3; }
.float-card span b { color: var(--gold-hi); }

/* ── Canales ─────────────────────────────────────────── */
.logos { padding: 8px 0 clamp(48px, 7vw, 88px); }
.logos p { text-align: center; font: 800 13px/1 "Manrope", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.logo-row { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.logo-row span {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); font-weight: 800; font-size: 15px; box-shadow: 0 1px 2px rgba(22, 19, 14, .04);
}
.logo-row svg { width: 20px; height: 20px; fill: currentColor; }

/* ── Secciones ───────────────────────────────────────── */
section { padding: clamp(56px, 8vw, 108px) 0; }
.kicker { font: 800 13px/1 "Manrope", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.h2 { margin-top: 14px; font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.02; max-width: 15em; }
.h2 em { font-style: normal; color: var(--gold-lo); }
.sub { margin-top: 18px; max-width: 34em; font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--ink-2); }
.center { text-align: center; }
.center .h2, .center .sub { margin-inline: auto; }

/* Chatbot vs Jesedia */
.versus { margin-top: 44px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.vs-head, .vs-row { display: grid; grid-template-columns: 1fr 1.25fr; }
.vs-head div { padding: 18px 28px; font: 800 14px/1 "Manrope", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.vs-head div:first-child { color: var(--muted); background: var(--paper-2); }
.vs-head div:last-child { background: var(--ink); color: var(--gold-hi); }
.vs-row div { padding: 22px 28px; display: flex; gap: 14px; align-items: flex-start; font-size: 18px; line-height: 1.35; }
.vs-row { border-top: 1px solid var(--line); }
.vs-row div:first-child { color: var(--muted); }
.vs-row div:first-child svg { color: #b84a3a; }
.vs-row div:last-child { font-weight: 700; background: linear-gradient(90deg, rgba(251, 238, 203, .55), rgba(251, 238, 203, 0)); }
.vs-row div:last-child svg { color: var(--ok); }
.vs-row svg { width: 22px; height: 22px; margin-top: 2px; }

/* Ciclo */
.cycle { background: var(--paper-2); }
.steps { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: paso; }
.step { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 28px; box-shadow: 0 1px 2px rgba(22, 19, 14, .04); transition: transform .2s, box-shadow .2s; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step .n { position: absolute; top: 22px; right: 24px; font: 800 14px/1 "Bricolage Grotesque", sans-serif; color: #a89f89; }
.step .ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--gold-soft); color: var(--gold-lo); }
.step .ic svg { width: 27px; height: 27px; }
.step h3 { margin-top: 20px; font-size: 1.55rem; font-weight: 800; }
.step p { margin-top: 6px; color: var(--muted); font-size: 16px; }

/* Bloques de función */
.feature .wrap > * { min-width: 0; }
.feature .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.feature.flip .copy { order: 2; }
.checks { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.checks li { display: flex; gap: 13px; align-items: flex-start; font-size: 18px; font-weight: 600; line-height: 1.35; }
.checks .ok { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.checks .ok svg { width: 15px; height: 15px; stroke-width: 3; }

/* Chat de ejemplo */
.chat { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-lg); padding: 22px; display: grid; gap: 14px; }
.bubble { max-width: 84%; padding: 14px 17px; border-radius: 20px; font-size: 16px; line-height: 1.4; }
.b-in { background: var(--paper-2); border-bottom-left-radius: 6px; justify-self: start; }
.b-out { background: var(--ink); color: #fff; border-bottom-right-radius: 6px; justify-self: end; }
.voice { display: flex; align-items: center; gap: 12px; }
.voice .play { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.voice .play svg { width: 14px; height: 14px; fill: currentColor; }
.wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.wave i { width: 3px; border-radius: 3px; background: #a99f88; }
.voice small { color: var(--muted); font-weight: 700; }
.pics { display: flex; gap: 8px; margin-top: 10px; }
.pics i { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 12px; color: rgba(255, 255, 255, .85); }
.pics i:nth-child(1) { background: linear-gradient(135deg, #3a3326, #6b5a34); }
.pics i:nth-child(2) { background: linear-gradient(135deg, #8a6a1c, #e0a11a); }
.pics i:nth-child(3) { background: linear-gradient(135deg, #1c1912, #4b4432); }
.pics svg { width: 22px; height: 22px; }
.chat .status { justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--gold-soft); color: #6b4400; font: 800 12px/1 "Manrope", sans-serif; }

/* Bloque oscuro: atribución */
.dark { background: var(--dark); color: #fff; position: relative; overflow: hidden; }
.dark::before { content: ""; position: absolute; width: 720px; height: 720px; right: -220px; top: -160px; background: radial-gradient(circle, rgba(224, 161, 26, .28), rgba(224, 161, 26, 0) 65%); pointer-events: none; }
.dark .kicker { color: var(--gold-hi); }
.dark .h2 em { color: var(--gold-hi); }
.dark .sub { color: #cfc7b3; }
.dark .checks .ok { background: var(--gold-hi); }
.shots { position: relative; }
.shot { border-radius: 16px; overflow: hidden; border: 1px solid var(--dark-line); background: var(--dark-2); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .7); }
.shot .bar { display: flex; gap: 7px; padding: 12px 14px; background: #1c1912; border-bottom: 1px solid var(--dark-line); }
.shot .bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3527; }
.shot img { width: 100%; }
.shot.back { width: 88%; margin-left: auto; }
.shot.front { position: absolute; width: 60%; left: -6%; bottom: -14%; z-index: 2; transform: rotate(-1.5deg); }
.caption { margin-top: 12px; font-size: 13px; color: #a89f89; font-weight: 600; }


/* Seguimiento: hitos de la conversación */
.when { justify-self: center; padding: 6px 12px; border-radius: 999px; background: var(--paper-2); color: var(--muted); font: 800 12px/1 "Manrope", sans-serif; letter-spacing: .02em; }
.when.auto { background: var(--gold-soft); color: #6b4400; }
.chat .status.win { background: var(--ok-soft); color: #0e6a47; }

/* Publicaciones: compositor */
.composer { background: var(--card); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-lg); padding: 24px; display: grid; gap: 18px; }
.composer .head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 15px; }
.composer .head small { font-weight: 700; color: var(--muted); font-size: 12px; }
.composer .text { padding: 16px 18px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.composer .pics { margin-top: 0; }
.composer .pics i { width: 74px; height: 74px; }
.nets { display: flex; flex-wrap: wrap; gap: 10px; }
.nets span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); font-weight: 800; font-size: 14px; }
.nets svg { width: 18px; height: 18px; fill: currentColor; }
.nets span::after { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 800; }
.when-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); }
.when-row div { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; }
.when-row svg { width: 22px; height: 22px; color: var(--gold-lo); }

/* Captura sobre fondo claro */
.shots.light .shot { box-shadow: var(--shadow-lg); }
.shots.light .caption { color: var(--muted); }

/* Tienda: tarjetas KPI */
.kpis { display: grid; gap: 14px; }
.kpi { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px 24px; box-shadow: var(--shadow); }
.kpi small { display: block; font: 800 12px/1 "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kpi strong { display: block; margin-top: 8px; font: 800 1.9rem/1 "Bricolage Grotesque", sans-serif; }
.kpi .up { color: var(--ok); }
.kpi .ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--gold-soft); color: var(--gold-lo); }
.kpi .ic svg { width: 26px; height: 26px; }
.kpis .note { font-size: 13px; color: var(--muted); font-weight: 600; text-align: right; }

/* Además */
.more { background: var(--paper-2); }
.tiles { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tile { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; font-weight: 800; font-size: 17px; line-height: 1.25; }
.tile .ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--ink); color: var(--gold-hi); }
.tile .ic svg { width: 23px; height: 23px; }

/* Planes */
.plans { margin-top: 52px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 30px 26px 28px; box-shadow: 0 1px 2px rgba(22, 19, 14, .04); }
.plan h3 { font-size: 1.5rem; font-weight: 800; }
.plan .for { margin-top: 4px; min-height: 2.9em; font-size: 15px; color: var(--muted); line-height: 1.4; }
.price { margin: 20px 0 4px; display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; }
.price i { align-self: flex-start; margin-top: .5rem; font: 800 .95rem/1 "Manrope", sans-serif; font-style: normal; letter-spacing: .06em; color: var(--muted); }
.plan.hot .price i { color: #cfc7b3; }
.price strong { font: 800 2.9rem/1 "Bricolage Grotesque", sans-serif; letter-spacing: -.03em; white-space: nowrap; }
.price span { font-weight: 700; font-size: 15px; color: var(--muted); }
.price-custom strong { font-size: 2.1rem; }
.credits { margin-bottom: 22px; font-weight: 800; font-size: 15px; color: var(--gold-text); }
.plan ul { list-style: none; margin: 22px 0 28px; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; align-content: start; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.35; font-weight: 600; }
.plan li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ok); stroke-width: 3; }
.plan .btn { width: 100%; }
.plan.hot { background: var(--dark); color: #fff; border-color: var(--dark); box-shadow: var(--shadow-lg); }
.plan.hot .for, .plan.hot .price span { color: #cfc7b3; }
.plan.hot .credits { color: var(--gold-hi); }
.plan.hot ul { border-color: var(--dark-line); }
.plan.hot li svg { color: var(--gold-hi); }
.badge { position: absolute; top: -13px; left: 26px; padding: 7px 14px; border-radius: 999px; background: var(--gold-hi); color: var(--ink); font: 800 12px/1 "Manrope", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.fine { margin-top: 34px; text-align: center; font-size: 14px; color: var(--muted); max-width: 46em; margin-inline: auto; line-height: 1.55; }
.fine strong { color: var(--ink); }
.fine a { color: var(--gold-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Preguntas */
.faq-list { margin: 44px auto 0; max-width: 820px; display: grid; gap: 12px; }
details { background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
details[open] { box-shadow: var(--shadow); border-color: #d8cfb9; }
summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 26px; cursor: pointer; list-style: none; font: 800 18px/1.3 "Manrope", sans-serif; }
summary::-webkit-details-marker { display: none; }
summary svg { flex: none; width: 22px; height: 22px; color: var(--gold-lo); transition: transform .2s; }
details[open] summary svg { transform: rotate(45deg); }
details p { padding: 0 26px 24px; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }

/* Cierre */
.final { padding-top: 0; }
.final .box { position: relative; overflow: hidden; background: var(--dark); color: #fff; border-radius: 34px; padding: clamp(40px, 7vw, 84px) clamp(24px, 6vw, 72px); text-align: center; }
.final .box::before { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 90%; background: radial-gradient(ellipse at 50% 100%, rgba(224, 161, 26, .55), rgba(224, 161, 26, 0) 65%); }
.final .box > * { position: relative; }
.final h2 { font-weight: 800; font-size: clamp(2.1rem, 5vw, 4rem); line-height: 1.02; max-width: 14em; margin-inline: auto; }
.final h2 em { font-style: normal; color: var(--gold-hi); }
.final p { margin: 20px auto 0; max-width: 30em; color: #cfc7b3; font-size: 1.15rem; }
.final .btn { margin-top: 32px; min-height: 60px; padding: 0 34px; font-size: 18px; }
.final small { display: block; margin-top: 18px; color: #a89f89; font-weight: 600; }

/* Pie */
footer { border-top: 1px solid var(--line); padding: 36px 0 44px; }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
footer p { flex: 1 1 260px; max-width: 34em; font-size: 14px; color: var(--muted); }
footer .links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; font-weight: 700; }
footer .links a { text-decoration: none; color: var(--ink-2); }
footer .links a:hover { color: var(--gold-text); }
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--wa); color: #fff; box-shadow: 0 10px 28px -6px rgba(37, 211, 102, .7); transition: transform .2s; }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; fill: currentColor; }

/* Entrada suave: solo si hay JS, para que el contenido nunca quede oculto */
.js .rise { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rise { opacity: 1; transform: none; transition: none; }
  .live::before { animation: none; }
  .btn, .step, .wa-float { transition: none; }
}

/* ── Tablet ──────────────────────────────────────────── */
@media (max-width: 1040px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan.hot { transform: none; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  body { font-size: 16px; }
  .nav a:not(.btn) { display: none; }
  .hero .wrap, .feature .wrap { grid-template-columns: 1fr; }
  .feature.flip .copy { order: 0; }
  .stage { padding-bottom: 46px; }
  .float-card { left: 0; }
  .shot.front { width: 66%; left: -2%; bottom: -10%; }
  .shots { margin-bottom: 14%; }
  .vs-head { display: none; }
  .vs-row { grid-template-columns: 1fr; }
  .vs-row div { padding: 16px 22px; font-size: 17px; }
  .vs-row div:first-child { padding-bottom: 4px; font-size: 15px; }
  .vs-row div:last-child { padding-top: 6px; }
}
@media (max-width: 620px) {
  .wrap { width: min(1180px, 100% - 32px); }
  .hero h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
  .hero .cta .btn { width: 100%; }
  .plans { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
  .step { padding: 18px 16px 20px; }
  .step .n { top: 14px; right: 14px; }
  .step .ic { width: 44px; height: 44px; border-radius: 13px; }
  .step .ic svg { width: 22px; height: 22px; }
  .step h3 { margin-top: 14px; font-size: 1.3rem; }
  .step p { font-size: 14px; line-height: 1.4; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px; }
  .tile { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; font-size: 15px; }
  .top .wrap { min-height: 64px; }
  .brand { font-size: 17px; }
  summary { padding: 18px 20px; font-size: 17px; }
  details p { padding: 0 20px 20px; }
  .kpi strong { font-size: 1.6rem; }
  .shot.front { display: none; }
  .shots { margin-bottom: 0; }
  .shot.back { width: 100%; }
}

/* ══════════════ EFECTOS (29/09/2026) ══════════════
   Solo transform y opacity: no repintan la página. Todo lo que arranca oculto
   depende de la clase .js, así que sin JavaScript el contenido se ve igual. */

@keyframes up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) rotate(-3deg) scale(1); } to { transform: translate3d(3%, 3%, 0) rotate(4deg) scale(1.06); } }
@keyframes pop-tilt { from { opacity: 0; transform: rotate(-2deg) scale(.7); } to { opacity: 1; transform: rotate(-2deg); } }
@keyframes bob { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-9px); } }
@keyframes bob-soft { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(-.5deg) translateY(-8px); } }
@keyframes shine { 0%, 62% { left: -70%; } 100% { left: 140%; } }
@keyframes scroll-x { to { transform: translateX(calc(-100% - 12px)); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(224, 161, 26, .55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(224, 161, 26, 0); } }
@keyframes draw { to { background-size: 100% 100%; } }

/* Barra de progreso de lectura */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 80; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--gold), var(--gold-hi)); pointer-events: none; }

/* Hero: entra por partes */
.js .hero .pill, .js .hero h1, .js .hero .lead, .js .hero .cta, .js .hero .micro { animation: up .85s cubic-bezier(.2, .7, .2, 1) both; }
.js .hero .pill { animation-delay: .05s; }
.js .hero h1 { animation-delay: .18s; }
.js .hero .lead { animation-delay: .34s; }
.js .hero .cta { animation-delay: .48s; }
.js .hero .micro { animation-delay: .6s; }
/* el subrayado dorado se dibuja solo */
.js .hero h1 em { background-repeat: no-repeat; background-size: 0% 100%; animation: draw .9s .85s cubic-bezier(.2, .7, .2, 1) forwards; }
.js .msg { opacity: 0; animation: up .7s cubic-bezier(.2, .7, .2, 1) both; }
.js .msg:nth-child(2) { animation-delay: .55s; }
.js .msg:nth-child(3) { animation-delay: .95s; }
.js .msg:nth-child(4) { animation-delay: 1.35s; }
.js .float-card { opacity: 0; animation: pop-tilt .8s 1.75s cubic-bezier(.2, .9, .3, 1.2) forwards, bob 6s 2.55s ease-in-out infinite; }
.stage::before { animation: drift 16s ease-in-out infinite alternate; will-change: transform; }

/* Logos: carrusel continuo */
.marquee { margin-top: 26px; display: flex; gap: 12px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee .track { display: flex; flex: none; gap: 12px; min-width: 100%; justify-content: space-around; animation: scroll-x 44s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee span { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 800; font-size: 15px; white-space: nowrap; box-shadow: 0 1px 2px rgba(22, 19, 14, .04); }
.marquee svg { width: 20px; height: 20px; fill: currentColor; }

/* Botones dorados: destello periódico */
.btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after { content: ""; position: absolute; top: 0; left: -70%; width: 38%; height: 100%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg); animation: shine 5s ease-in-out infinite; }
.btn-gold:hover { transform: translateY(-2px) scale(1.02); }

/* Puntos de cada función: aparecen de a uno */
.js .copy .checks li { opacity: 0; transform: translateX(-16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .copy.in .checks li { opacity: 1; transform: none; }
.js .copy.in .checks li:nth-child(1) { transition-delay: .25s; }
.js .copy.in .checks li:nth-child(2) { transition-delay: .42s; }
.js .copy.in .checks li:nth-child(3) { transition-delay: .59s; }
.checks .ok { transition: transform .3s; }
.checks li:hover .ok { transform: scale(1.18) rotate(-8deg); }

/* Conversaciones: los mensajes salen uno tras otro */
.js .chat > * { opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.js .chat.in > * { opacity: 1; transform: none; }
.js .chat.in > :nth-child(1) { transition-delay: .3s; }
.js .chat.in > :nth-child(2) { transition-delay: .85s; }
.js .chat.in > :nth-child(3) { transition-delay: 1.4s; }
.js .chat.in > :nth-child(4) { transition-delay: 1.95s; }
.js .chat.in > :nth-child(5) { transition-delay: 2.5s; }
.js .chat.in > :nth-child(6) { transition-delay: 3.05s; }
.js .chat.in > :nth-child(7) { transition-delay: 3.6s; }
.wave i { transform-origin: center; animation: wavebar 1.1s ease-in-out infinite alternate; }
.wave i:nth-child(3n) { animation-delay: -.3s; }
.wave i:nth-child(3n+1) { animation-delay: -.6s; }
@keyframes wavebar { from { transform: scaleY(.55); } to { transform: scaleY(1.1); } }

/* Bloque oscuro: resplandor vivo y capturas flotantes */
.dark::before { animation: drift 18s ease-in-out infinite alternate; will-change: transform; }
.shot.front { animation: bob-soft 7s ease-in-out infinite; }
.shot { transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
.shot.back:hover, .shots.light .shot:hover { transform: translateY(-6px) scale(1.01); }

/* Compositor: las redes "se activan" */
.js .composer .nets span { opacity: 0; }
.js .composer.in .nets span { animation: pop .5s cubic-bezier(.2, .9, .3, 1.3) both; }
.js .composer.in .nets span:nth-child(1) { animation-delay: .4s; }
.js .composer.in .nets span:nth-child(2) { animation-delay: .55s; }
.js .composer.in .nets span:nth-child(3) { animation-delay: .7s; }
.js .composer.in .nets span:nth-child(4) { animation-delay: .85s; }
.when-row .btn { animation: ring 2.6s ease-out infinite; }

/* Tarjetas: respuesta al pasar el mouse */
.step .ic { transition: transform .35s cubic-bezier(.2, .9, .3, 1.4), background .3s; }
.step:hover .ic { transform: rotate(-8deg) scale(1.12); background: var(--gold-hi); }
.plan { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.plan:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.plan.hot:hover { transform: translateY(-8px); }
.kpi { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.kpi:hover { transform: translateX(-6px); }
.vs-row { transition: background .25s; }
.vs-row:hover { background: rgba(251, 238, 203, .35); }

/* Quien prefiere menos movimiento lo ve todo quieto y visible */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .hero h1 em { background-size: 100% 100%; }
  .js .msg, .js .float-card, .js .copy .checks li, .js .chat > *, .js .composer .nets span { opacity: 1; transform: none; }
  .js .float-card { transform: rotate(-2deg); }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee .track { flex-wrap: wrap; justify-content: center; }
  .marquee .track[aria-hidden] { display: none; }
  .progress { display: none; }
}

@media (max-width: 620px) {
  .marquee .track { animation-duration: 34s; }
  .js .chat.in > :nth-child(n) { transition-delay: .2s; }
  .js .chat.in > :nth-child(3) { transition-delay: .5s; }
  .js .chat.in > :nth-child(4) { transition-delay: .8s; }
  .js .chat.in > :nth-child(5) { transition-delay: 1.1s; }
  .js .chat.in > :nth-child(6) { transition-delay: 1.4s; }
  .js .chat.in > :nth-child(7) { transition-delay: 1.7s; }
  .plan:hover, .plan.hot:hover { transform: none; }
  .plan.hot { transform: none; }
}