/* ==========================================================================
   Huming — sistema visual 2026
   Base blanca, tinta cálida, acento coral. Sin dependencias externas.
   ========================================================================== */

:root {
  /* Lienzo */
  --paper:      #ffffff;
  --bone:       #f7f6f3;   /* superficie cálida */
  --bone-2:     #f1efea;   /* superficie cálida +1 */
  --line:       #e6e3dc;   /* bordes */
  --line-soft:  #efedE7;

  /* Tinta */
  --ink:        #14181d;
  --ink-2:      #3b424b;
  --muted:      #737a83;

  /* Acento */
  --accent:     #ff5a2d;
  --accent-ink: #d8380c;
  --accent-soft:#fff0ea;

  /* Apoyo (solo para estados dentro de las maquetas) */
  --green:      #14795b;
  --green-soft: #e8f5f0;
  --blue:       #2563d8;
  --blue-soft:  #ecf1fe;
  --violet:     #5b4fcf;   /* herencia de marca, uso mínimo */

  /* Tipografía */
  --sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Métricas */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --shadow-sm: 0 1px 2px rgba(20, 24, 29, .04), 0 2px 8px rgba(20, 24, 29, .04);
  --shadow:    0 2px 4px rgba(20, 24, 29, .04), 0 18px 40px -20px rgba(20, 24, 29, .22);
  --shadow-lg: 0 30px 70px -30px rgba(20, 24, 29, .35);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "cv05" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 620;
  letter-spacing: -0.028em;
  line-height: 1.08;
  color: var(--ink);
}
h1 { font-size: clamp(2.5rem, 6.2vw, 4.3rem); }
h2 { font-size: clamp(2rem, 4.1vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.02em; line-height: 1.22; }
p  { margin: 0; }

.serif-em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* --------------------------------------------------------------- layout -- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--bone { background: var(--bone); }
.section--ink  { background: var(--ink); color: #fff; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

.stack   { display: flex; flex-direction: column; }
.gap-8   { gap: 8px; }  .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-24  { gap: 24px; } .gap-32 { gap: 32px; } .gap-48 { gap: 48px; }
.center  { text-align: center; }
.measure { max-width: 60ch; }
.measure-sm { max-width: 46ch; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------- tipografía -- */
.eyebrow {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.lead { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--ink-2); line-height: 1.55; }
.muted { color: var(--muted); }
.small { font-size: .92rem; }
.xs { font-size: .82rem; }

/* --------------------------------------------------------------- botones -- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  font-size: .97rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn--accent { --btn-bg: var(--accent); --btn-fg: #fff; box-shadow: 0 10px 24px -12px rgba(255, 90, 45, .9); }
.btn--accent:hover { --btn-bg: #f04d20; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: var(--bone); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--sm { padding: 9px 16px; font-size: .9rem; }
.btn--lg { padding: 16px 28px; font-size: 1.02rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 560; font-size: .95rem; color: var(--ink);
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
  transition: gap .18s ease, border-color .18s ease, color .18s ease;
}
.link-arrow:hover { gap: 12px; color: var(--accent-ink); border-color: var(--accent); }
.link-arrow svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- chips -- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: .83rem; font-weight: 520; color: var(--ink-2);
}
.chip--accent { background: var(--accent-soft); border-color: #ffd9c9; color: var(--accent-ink); }
.chip--green  { background: var(--green-soft); border-color: #c9e7dc; color: var(--green); }
.chip--blue   { background: var(--blue-soft); border-color: #d3e0fc; color: var(--blue); }
.chip--ink    { background: var(--ink); border-color: var(--ink); color: #fff; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* --------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; gap: 28px; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 640; letter-spacing: -0.04em; font-size: 1.28rem; }
.brand .mark { width: 26px; height: 26px; flex: none; }
.brand img { height: 30px; width: auto; display: block; }
.site-footer .brand img { height: 34px; }
@media (max-width: 420px) { .brand img { height: 26px; } }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: 10px; }
.nav-links a { font-size: .96rem; font-weight: 500; color: var(--ink-2); transition: color .16s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.nav-toggle svg { width: 18px; height: 18px; display: block; }

@media (max-width: 940px) {
  .nav-links, .nav-actions .btn--ghost { display: none; }
  .nav-toggle { display: block; }
  .nav-actions { gap: 8px; }
  .site-header.is-open .nav-links {
    display: flex; position: absolute; left: 0; right: 0; top: 70px;
    flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 14px var(--gutter) 22px;
  }
  .site-header.is-open .nav-links a { padding: 10px 0; font-size: 1.05rem; width: 100%; }
}

/* ----------------------------------------------------------------- hero -- */
.hero { position: relative; overflow: hidden; padding-top: clamp(48px, 7vw, 86px); padding-bottom: clamp(40px, 6vw, 72px); }
.hero::before {
  content: ""; position: absolute; inset: -30% 40% 40% -20%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255, 90, 45, .10), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; right: -10%; top: -20%; width: 60%; height: 120%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(91, 79, 207, .07), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 7px 6px 7px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  font-size: .85rem; color: var(--ink-2); box-shadow: var(--shadow-sm);
}
.hero-badge b { background: var(--ink); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hero-badge span { padding-right: 10px; }
.hero h1 { margin-top: 26px; max-width: 16ch; }
.hero-kicker {
  margin-top: 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  letter-spacing: -0.015em;
  color: var(--accent-ink);
}
.hero .lead { margin-top: 16px; max-width: 54ch; }
.hero .btn-row { margin-top: 32px; }
.hero-meta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: .88rem; }
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta svg { width: 14px; height: 14px; color: var(--green); }

/* ------------------------------------------------------- maqueta de app -- */
.app-shot {
  margin-top: clamp(40px, 6vw, 68px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.app-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--line-soft); background: var(--bone);
}
.app-bar .dots { display: flex; gap: 6px; }
.app-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: #dcd8d0; display: block; }
.app-bar .url {
  margin-inline: auto; font-size: .8rem; color: var(--muted);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px 16px;
}
.app-body { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 420px; }
.app-side { border-right: 1px solid var(--line-soft); padding: 18px 14px; background: #fcfbf9; }
.app-side .side-title { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 10px 10px; }
.app-side a, .app-side div.side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px; font-size: .88rem; color: var(--ink-2); margin-bottom: 2px;
}
.app-side .side-item.is-active { background: var(--ink); color: #fff; font-weight: 550; }
.app-side .side-item i { width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .55; flex: none; }
.app-main { padding: 22px; background: var(--paper); }
.app-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.app-h h4 { font-size: 1.15rem; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; background: var(--paper); }
.kpi .k-label { font-size: .74rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.kpi .k-value { font-size: 1.5rem; font-weight: 640; letter-spacing: -0.035em; margin-top: 6px; }
.kpi .k-delta { font-size: .78rem; color: var(--green); margin-top: 2px; }
.kpi .k-delta.is-flat { color: var(--muted); }

.chart { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.chart-head span { font-size: .85rem; font-weight: 560; }
.bars { display: flex; align-items: flex-end; gap: clamp(5px, 1.4vw, 12px); height: 132px; }
.bars .bar { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--bone-2); position: relative; }
.bars .bar span { position: absolute; inset: auto 0 0 0; border-radius: 6px 6px 3px 3px; background: var(--ink); display: block; }
.bars .bar.is-accent span { background: var(--accent); }
.bars-x { display: flex; gap: clamp(5px, 1.4vw, 12px); margin-top: 8px; }
.bars-x span { flex: 1; text-align: center; font-size: .68rem; color: var(--muted); }

.mini-table { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mini-row { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,.9fr); gap: 12px; padding: 11px 14px; align-items: center; font-size: .86rem; border-top: 1px solid var(--line-soft); }
.mini-row:first-child { border-top: 0; background: var(--bone); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mini-row b { font-weight: 560; }
.mini-row .t-right { text-align: right; }

@media (max-width: 860px) {
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .app-side { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-row { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
  .mini-row > :nth-child(3) { display: none; }
}

/* --------------------------------------------------------------- logos -- */
.logo-strip { padding-block: clamp(36px, 5vw, 54px); }
.logo-strip .cap { font-size: .82rem; color: var(--muted); text-align: center; margin-bottom: 22px; }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; }
.logo-row span {
  font-size: clamp(.95rem, 1.5vw, 1.12rem); font-weight: 560; letter-spacing: -0.02em;
  color: #9aa0a7; transition: color .2s ease;
}
.logo-row span:hover { color: var(--ink); }
.logo-row span.is-featured {
  color: var(--ink);
  font-weight: 640;
  font-size: clamp(1.05rem, 1.8vw, 1.32rem);
  position: relative;
}
.logo-row span.is-featured::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--accent); border-radius: 2px;
}

/* ------------------------------------------------------ páginas legales -- */
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.legal-nav a {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper); font-size: .9rem; color: var(--ink-2);
  transition: border-color .18s ease, color .18s ease;
}
.legal-nav a:hover { border-color: var(--ink); color: var(--ink); }

.legal { max-width: 74ch; }
.legal h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing: -0.02em;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h2.legal-part {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-top: 64px; padding-top: 28px;
  border-top: 2px solid var(--ink);
  scroll-margin-top: 90px;
}
.legal h2.legal-part:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal p { margin-top: 14px; color: var(--ink-2); font-size: 1rem; line-height: 1.68; }
.legal ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.legal ul li { position: relative; padding-left: 20px; color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
.legal ul li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px; border-radius: 2px; background: var(--accent); opacity: .8;
}
.legal a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }

/* --------------------------------------------------------- flujo / pasos -- */
.flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 46px; }
.flow-step {
  position: relative; border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 16px 20px; background: var(--paper);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.flow-step:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d8d4cb; }
.flow-step .n {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink); font-size: .78rem; font-weight: 650; margin-bottom: 12px;
}
.flow-step h4 { font-size: 1rem; letter-spacing: -0.02em; }
.flow-step p { font-size: .86rem; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.flow-step::after {
  content: ""; position: absolute; right: -6px; top: 50%; width: 11px; height: 11px;
  border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  transform: translateY(-50%) rotate(45deg); background: var(--paper);
}
.flow-step:last-child::after { display: none; }
@media (max-width: 1080px) { .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flow-step:nth-child(3)::after { display: none; } }
@media (max-width: 640px)  { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow-step::after { display: none; } }

/* --------------------------------------------------------------- cards -- */
.card {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #ded9d0; }
.card .ic {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--bone); border: 1px solid var(--line); color: var(--ink);
}
.card .ic svg { width: 19px; height: 19px; }
.card p { color: var(--muted); font-size: .95rem; }
.card ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.card ul li { font-size: .89rem; color: var(--ink-2); padding-left: 18px; position: relative; }
.card ul li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px;
  border-radius: 2px; background: var(--accent); opacity: .75;
}
.card .foot { margin-top: auto; padding-top: 8px; }

/* ------------------------------------------------------ bloque feature -- */
.feature { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 76px); align-items: center; }
.feature + .feature { margin-top: clamp(64px, 9vw, 112px); }
.feature--flip .feature-media { order: -1; }
.feature-copy h2 { margin-top: 14px; }
.feature-copy .lead { margin-top: 18px; }
.feature-list { margin: 26px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .97rem; color: var(--ink-2); }
.feature-list svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--accent); }
.feature .btn-row { margin-top: 30px; }
@media (max-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature--flip .feature-media { order: 0; }
}

/* maquetas dentro de features */
.mock {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
  box-shadow: var(--shadow); overflow: hidden;
}
.mock-head { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fcfbf9; }
.mock-head b { font-size: .92rem; font-weight: 580; }
.mock-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }

.row-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
}
.row-item .av {
  width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--bone-2); font-size: .74rem; font-weight: 640; color: var(--ink-2);
}
.row-item .who { min-width: 0; }
.row-item .who b { display: block; font-size: .88rem; font-weight: 560; }
.row-item .who span { font-size: .78rem; color: var(--muted); }
.row-item .end { margin-left: auto; }

.progress { height: 7px; border-radius: 99px; background: var(--bone-2); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

.invoice { padding: 20px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: flex-start; }
.invoice .lines { display: flex; flex-direction: column; gap: 9px; }
.invoice .l { height: 9px; border-radius: 99px; background: var(--bone-2); }
.invoice .l.w1 { width: 62%; } .invoice .l.w2 { width: 86%; } .invoice .l.w3 { width: 44%; }
.qr { width: 88px; height: 88px; border: 1px solid var(--line); border-radius: 10px; padding: 7px; background: #fff; }
.qr-grid { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 2px; }
.qr-grid i { background: var(--bone-2); border-radius: 1px; }
.qr-grid i.on { background: var(--ink); }

.sign-box { border: 1px dashed var(--line); border-radius: var(--r); padding: 16px 18px; background: #fcfbf9; }
.sign-box .sig { font-family: var(--serif); font-style: italic; font-size: 1.65rem; letter-spacing: -0.01em; }

/* ------------------------------------------------------------ segmentos -- */
.seg {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px;
  background: var(--paper); display: flex; flex-direction: column; gap: 10px;
  transition: background .22s ease, transform .22s ease, border-color .22s ease;
}
.seg:hover { background: var(--bone); transform: translateY(-3px); border-color: #ded9d0; }
.seg .tag { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); font-weight: 620; }
.seg h3 { margin-top: 2px; }
.seg p { color: var(--muted); font-size: .94rem; }

/* -------------------------------------------------------- integraciones -- */
.integrations { display: flex; flex-wrap: wrap; gap: 10px; }
.int {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 17px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: .93rem; font-weight: 520;
  transition: border-color .18s ease, transform .18s ease;
}
.int:hover { border-color: var(--ink); transform: translateY(-2px); }
.int i { width: 9px; height: 9px; border-radius: 3px; background: var(--accent); flex: none; }

/* ------------------------------------------------------------- llamadas -- */
.cta-band {
  border-radius: var(--r-xl); background: var(--ink); color: #fff;
  padding: clamp(38px, 6vw, 64px); text-align: center; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: auto -10% -60% -10%; height: 90%;
  background: radial-gradient(50% 60% at 50% 50%, rgba(255, 90, 45, .28), transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.72); margin: 18px auto 0; max-width: 52ch; }
.cta-band .btn-row { justify-content: center; margin-top: 30px; }

.note-band {
  border: 1px solid #ffd9c9; background: var(--accent-soft); border-radius: var(--r-lg);
  padding: 22px 26px; display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
}
.note-band svg { width: 22px; height: 22px; color: var(--accent-ink); flex: none; margin-top: 2px; }
.note-band b { font-weight: 600; }
.note-band p { font-size: .95rem; color: var(--ink-2); }

/* -------------------------------------------------------------- precios -- */
.toggle {
  display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); gap: 4px;
}
.toggle button {
  border: 0; background: none; padding: 8px 18px; border-radius: 999px; cursor: pointer;
  font-size: .9rem; font-weight: 540; color: var(--muted); transition: background .18s ease, color .18s ease;
}
.toggle button.is-on { background: var(--ink); color: #fff; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 980px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }
.plan {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
  padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; position: relative;
}
.plan--featured { border-color: var(--ink); box-shadow: var(--shadow); }
.plan--featured::before {
  content: "Más elegido"; position: absolute; top: -12px; left: 26px;
  background: var(--accent); color: #fff; font-size: .74rem; font-weight: 620;
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}
.plan h3 { font-size: 1.22rem; }
.plan .price { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.plan .price .amount { font-size: 2.8rem; font-weight: 640; letter-spacing: -0.04em; line-height: 1; }
.plan .price .per { font-size: .88rem; color: var(--muted); }
.plan .desc { font-size: .93rem; color: var(--muted); min-height: 2.8em; }
.plan ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan ul li { display: flex; gap: 10px; font-size: .91rem; color: var(--ink-2); align-items: flex-start; }
.plan ul svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--green); }
.plan .btn { margin-top: auto; width: 100%; }
.plan .cap { font-size: .78rem; color: var(--muted); text-align: center; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 640px; }
table.cmp th, table.cmp td { padding: 14px 18px; text-align: left; font-size: .92rem; border-top: 1px solid var(--line-soft); }
table.cmp thead th { background: var(--bone); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-top: 0; font-weight: 600; }
table.cmp td:not(:first-child), table.cmp th:not(:first-child) { text-align: center; }
table.cmp tbody tr:hover { background: #fcfbf9; }
table.cmp .yes { color: var(--green); font-weight: 600; }
table.cmp .no { color: #c3c7cc; }

/* ------------------------------------------------------------------ faq -- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font-size: 1.05rem; font-weight: 550; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding-bottom: 24px; color: var(--muted); max-width: 72ch; font-size: .97rem; }

/* ----------------------------------------------------------- valores/os -- */
.pillar { display: flex; flex-direction: column; gap: 12px; }
.pillar .num { font-family: var(--serif); font-style: italic; font-size: 2.6rem; color: var(--accent); line-height: 1; }
.pillar p { color: var(--muted); font-size: .96rem; }

.quote {
  border-left: 3px solid var(--accent); padding-left: clamp(20px, 3vw, 34px);
  font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.32; letter-spacing: -0.02em;
}
.quote cite { display: block; margin-top: 18px; font-family: var(--sans); font-style: normal; font-size: .92rem; color: var(--muted); letter-spacing: 0; }

.stat { border-top: 2px solid var(--ink); padding-top: 16px; }
.stat .v { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 640; letter-spacing: -0.04em; line-height: 1; }
.stat .l { font-size: .9rem; color: var(--muted); margin-top: 8px; }

/* --------------------------------------------------------------- footer -- */
.site-footer { background: var(--bone); border-top: 1px solid var(--line); padding-block: clamp(48px, 7vw, 72px) 32px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }
.foot-grid h5 { margin: 0 0 14px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-grid a { font-size: .93rem; color: var(--ink-2); }
.foot-grid a:hover { color: var(--accent-ink); }
.foot-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  font-size: .86rem; color: var(--muted);
}
.socials { display: flex; gap: 10px; }
.socials a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; background: var(--paper); }
.socials svg { width: 16px; height: 16px; }
.socials a:hover { border-color: var(--ink); }

/* ------------------------------------------------------------ animación -- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover, .seg:hover, .flow-step:hover, .btn:hover { transform: none; }
}

/* ------------------------------------------------------------ utilidades -- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.page-head { padding-block: clamp(56px, 8vw, 96px) clamp(32px, 4vw, 48px); }
.page-head h1 { max-width: 18ch; }
.page-head .lead { margin-top: 22px; max-width: 58ch; }

/* ------------------------------------------------- consentimiento cookies -- */
.cookie-consent {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
  animation: cc-in .35s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes cc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cookie-consent { animation: none; } }

.cc-card {
  pointer-events: auto;
  position: relative;
  width: min(520px, 100%);
  max-height: min(78vh, 720px);
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px 26px 22px;
}
.cc-card h2 { font-size: 1.22rem; letter-spacing: -0.02em; padding-right: 28px; }
.cc-card > p { margin-top: 10px; font-size: .93rem; color: var(--muted); line-height: 1.55; }
.cc-card a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

.cc-close {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--paper); color: var(--muted); cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.cc-close:hover { border-color: var(--ink); color: var(--ink); }
.cc-close svg { width: 14px; height: 14px; }

.cc-panel { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 6px; }
.cc-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer;
}
.cc-row:last-child { border-bottom: 0; }
.cc-row.is-locked { cursor: default; opacity: .72; }
.cc-row input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.cc-row span { display: block; }
.cc-row b { display: block; font-size: .93rem; font-weight: 580; }
.cc-row span span { display: block; margin-top: 3px; font-size: .85rem; color: var(--muted); line-height: 1.45; }

.cc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cc-actions .btn { flex: 1 1 auto; }
.cc-actions .btn[hidden], .cc-panel[hidden] { display: none; }

@media (max-width: 560px) {
  .cookie-consent { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .cc-card { padding: 18px 18px 16px; }
  .cc-card h2 { font-size: 1.08rem; }
  .cc-card > p { font-size: .85rem; line-height: 1.45; }
  .cc-close { top: 12px; right: 12px; }
  /* dos filas en vez de tres: ocupa bastante menos pantalla */
  .cc-actions { gap: 7px; margin-top: 16px; }
  .cc-actions .btn { flex: 1 1 calc(50% - 4px); padding: 10px 12px; }
  .cc-actions .btn[data-cc="toggle"], .cc-actions .btn[data-cc="save"] { flex: 1 1 100%; }
}

/* ----------------------------------------------------- formulario real -- */
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field > span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.form-field input, .form-field select, .form-field textarea {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: .95rem; background: #fff; color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.form-field textarea { resize: vertical; min-height: 104px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,24,29,.06);
}
.form-field input:user-invalid, .form-field textarea:user-invalid { border-color: var(--accent); }
.form-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--muted); }
.form-consent input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.form-consent a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { font-size: .9rem; border-radius: var(--r-sm); padding: 12px 14px; display: none; }
.form-status.is-on { display: block; }
.form-status.is-ok { background: var(--green-soft); color: var(--green); border: 1px solid #c9e7dc; }
.form-status.is-error { background: var(--accent-soft); color: var(--accent-ink); border: 1px solid #ffd9c9; }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* ------------------------------------------------------------ segmentos -- */
.segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1000px) { .segments { grid-template-columns: minmax(0, 1fr); } }

.seg-card {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 30px 28px 26px;
  scroll-margin-top: 90px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.seg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #ded9d0; }
.seg-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.seg-head .tag {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 620; color: var(--accent-ink);
}
.seg-head .ic {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--bone); border: 1px solid var(--line); color: var(--ink); flex: none;
}
.seg-head .ic svg { width: 18px; height: 18px; }
.seg-card h3 { font-size: clamp(1.32rem, 2.1vw, 1.62rem); line-height: 1.16; margin-top: 4px; }
.seg-card > p { color: var(--ink-2); font-size: .97rem; line-height: 1.6; }
.seg-card ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.seg-card ul li { position: relative; padding-left: 20px; font-size: .92rem; color: var(--muted); line-height: 1.5; }
.seg-card ul li::before {
  content: ""; position: absolute; left: 1px; top: .55em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--accent); opacity: .8;
}
.seg-card .foot { margin-top: auto; padding-top: 18px; }

.seg-strip {
  margin-top: 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 28px;
}
.seg-strip .tag {
  display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 620; color: var(--accent-ink); margin-bottom: 6px;
}
.seg-strip p { font-size: .95rem; color: var(--ink-2); max-width: 72ch; }
.seg-strip b { font-weight: 580; color: var(--ink); }

/* resumen de promesas por perfil (pie de la página de producto) */
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 820px) { .promises { grid-template-columns: minmax(0, 1fr); } }
.promise { border-top: 2px solid var(--ink); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.promise .tag { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 620; color: var(--accent-ink); }
.promise h3 { font-size: 1.22rem; }
.promise p { font-size: .93rem; color: var(--muted); }
.promise a { margin-top: 4px; }
.legal .table-wrap { margin-block: 18px; }
table.legal-table td { text-align: left !important; vertical-align: top; }

/* ==========================================================================
   Martina — chat de entrada
   ========================================================================== */
.martina-stage {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(24px, 5vh, 56px) clamp(56px, 9vh, 96px);
  overflow: hidden;
}
.martina-stage::before {
  content: ""; position: absolute; inset: -20% -10% 30% -10%;
  background:
    radial-gradient(42% 46% at 22% 28%, rgba(80, 64, 255, .10), transparent 70%),
    radial-gradient(38% 42% at 78% 22%, rgba(255, 90, 45, .10), transparent 70%);
  pointer-events: none;
}
.martina-stage > * { position: relative; }

.mt-shell {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.mt-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: #fcfbf9;
}
.mt-head .mt-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mt-head .mt-id svg { width: 26px; height: 26px; flex: none; }
.mt-head b { font-size: .98rem; font-weight: 600; letter-spacing: -0.02em; }
.mt-head .mt-sub { font-size: .78rem; color: var(--muted); }
.mt-head .mt-tags { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.mt-list {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 20px;
  height: clamp(300px, 46svh, 460px);
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
@media (prefers-reduced-motion: reduce) { .mt-list { scroll-behavior: auto; } }

.mt-row { display: flex; gap: 10px; align-items: flex-end; }
.mt-row:first-child { margin-top: auto; }   /* la conversación crece desde abajo */
.mt-row--persona { justify-content: flex-end; }
.mt-av {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: 9px; border: 1px solid var(--line); background: var(--paper);
}
.mt-av svg { width: 15px; height: 17px; }

.mt-bubble {
  max-width: 82%;
  padding: 13px 16px;
  border-radius: 16px;
  font-size: .97rem;
  line-height: 1.55;
  background: var(--bone);
  border: 1px solid var(--line-soft);
  color: var(--ink);
}
.mt-row--persona .mt-bubble {
  background: var(--ink); border-color: var(--ink); color: #fff; border-bottom-right-radius: 6px;
}
.mt-row--martina .mt-bubble { border-bottom-left-radius: 6px; }
.mt-bubble b { font-weight: 600; }
.mt-bubble--cta { background: var(--accent-soft); border-color: #ffd9c9; }

.mt-caret {
  display: inline-block; width: 2px; height: 1.05em; vertical-align: -2px;
  margin-left: 1px; background: var(--accent); animation: mt-blink 1s steps(2) infinite;
}
@keyframes mt-blink { 50% { opacity: 0; } }

.mt-dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.mt-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
  animation: mt-bounce 1.2s infinite ease-in-out;
}
.mt-dots i:nth-child(2) { animation-delay: .15s; }
.mt-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes mt-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mt-dots i, .mt-caret { animation: none; } }

.mt-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 14px; }
.mt-chip {
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
  border-radius: 999px; padding: 9px 15px; font-size: .88rem; cursor: pointer;
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}
.mt-chip:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.mt-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mt-form {
  display: flex; gap: 10px; align-items: center;
  padding: 14px 16px; border-top: 1px solid var(--line-soft); background: #fcfbf9;
}
.mt-input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px;
  padding: 13px 18px; font: inherit; font-size: .97rem; background: var(--paper); color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.mt-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,24,29,.06); }
.mt-input:disabled { opacity: .6; }
.mt-send {
  width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(255, 90, 45, .9);
  transition: transform .16s ease, background .16s ease;
}
.mt-send:hover:not(:disabled) { transform: translateY(-1px); background: #f04d20; }
.mt-send:disabled { opacity: .45; cursor: default; box-shadow: none; }
.mt-send svg { width: 19px; height: 19px; }

.mt-note { margin-top: 16px; text-align: center; font-size: .85rem; color: var(--muted); }
.mt-note b { color: var(--ink-2); font-weight: 560; }

.mt-demo {
  margin: 0 20px 14px; padding: 9px 14px; border-radius: 10px;
  background: var(--blue-soft); border: 1px solid #d3e0fc; color: var(--blue);
  font-size: .82rem;
}

.scroll-hint {
  margin-top: clamp(22px, 4vh, 40px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--muted); font-size: .85rem;
}
.scroll-hint svg { width: 18px; height: 18px; animation: mt-nudge 2.2s infinite ease-in-out; }
@keyframes mt-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint svg { animation: none; } }

@media (max-width: 640px) {
  .mt-list { height: clamp(280px, 50svh, 420px); padding: 18px 14px; }
  .mt-bubble { max-width: 88%; font-size: .94rem; }
  .mt-chips { padding: 0 14px 12px; }
  .mt-form { padding: 12px; }
  .mt-head { padding: 13px 14px; }
  .mt-head .mt-tags { display: none; }
}

/* cuatro planes */
.plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.plans--4 .plan { padding: 26px 22px; }
.plans--4 .plan .price .amount { font-size: 2.4rem; }
@media (max-width: 1180px) { .plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 760px)  { .plans--4 { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } }

/* filas de grupo dentro de una tabla */
table.cmp tr.is-group td {
  background: var(--bone);
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 620; text-align: left !important;
  padding-top: 16px; padding-bottom: 10px;
}
table.cmp tr.is-group:hover td { background: var(--bone); }

table.cmp--compacta { min-width: 340px; }
table.cmp--compacta td, table.cmp--compacta th { padding: 12px 14px; }

/* --------------------------------------- Martina: trabajo dentro del chat -- */
/* 07/10/2026 (Oscar: "esa banda verde está fija ahí? no puede estar en otro
   sitio y que no moleste") — era una franja entre la conversación y el
   formulario: robaba altura y el último mensaje quedaba detrás. Ahora es una
   línea fina arriba del todo, pegada a la cabecera, de una sola línea. */
.mt-saved {
  margin: 0; padding: 7px 20px; border-bottom: 1px solid #dff0e8;
  background: var(--green-soft); color: var(--green);
  font-size: .76rem; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-saved b { font-weight: 620; }
.mt-saved span { color: #2f7d66; }

.mt-row--card .mt-bubble { max-width: 92%; }

.mt-bubble--doc { background: var(--paper); border-color: var(--line); padding: 18px; }
.mt-doc-tit { font-weight: 620; font-size: 1rem; letter-spacing: -0.02em; margin-bottom: 12px; }
.mt-doc-sub {
  margin-top: 16px; margin-bottom: 6px; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-ink); font-weight: 620;
}
.mt-doc-txt { font-size: .88rem; color: var(--ink-2); line-height: 1.5; }
.mt-doc-row {
  display: flex; gap: 12px; justify-content: space-between; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: .88rem;
}
.mt-doc-row:last-of-type { border-bottom: 0; }
.mt-doc-row span { color: var(--muted); }
.mt-doc-row b { font-weight: 560; text-align: right; }

.mt-cap { margin-top: 10px; font-size: .76rem; color: var(--muted); }

.mt-bubble--cover { background: var(--paper); border-color: var(--line); padding: 16px; }
.mt-cover {
  aspect-ratio: 1; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 4px; padding: 20px; border-radius: 12px; color: #fff;
  background: linear-gradient(145deg, #2b1d6b 0%, #5040ff 45%, #ff5a2d 100%);
  max-width: 260px;
}
.mt-cover span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.mt-cover b { font-size: 1.5rem; font-weight: 620; letter-spacing: -0.03em; line-height: 1.05; }
.mt-cover i { font-style: normal; font-size: .74rem; opacity: .8; }

.mt-sign {
  margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--line);
  border-radius: 10px; background: #fcfbf9;
}
.mt-sign span { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mt-sign b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.35rem; }

.mt-bars { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.mt-bar { display: grid; grid-template-columns: 1fr 86px 28px; align-items: center; gap: 10px; font-size: .84rem; }
.mt-bar i { display: block; height: 7px; border-radius: 99px; background: var(--accent); min-width: 6px; }
.mt-bar b { font-weight: 560; text-align: right; }

@media (max-width: 640px) {
  .mt-head .mt-tags { display: flex; }
  .mt-head .mt-tag-extra { display: none; }
  .mt-head .mt-sub { display: none; }
  .mt-saved { margin: 0 14px 10px; }
  .mt-cover { max-width: 100%; }
}

/* reparto de la distribución */
.split { padding: 6px 0 2px; }
.split-bar { height: 14px; border-radius: 99px; background: var(--bone-2); overflow: hidden; }
.split-bar i { display: block; height: 100%; background: var(--ink); border-radius: 99px 0 0 99px; }
.split-legend { display: flex; justify-content: space-between; margin-top: 10px; font-size: .88rem; }
.split-legend b { font-weight: 620; }

/* ===========================================================================
   07/10/2026 — Martina en abierto conectada de verdad (/api/public/martina):
   adjuntos, portada real generada con IA y tarjeta de precio. Mismo sistema
   visual del resto de la web: papel, línea fina, acento solo donde hace falta.
   =========================================================================== */

/* --- adjuntar audio o imagen --- */
.mt-attach {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.mt-attach svg { width: 19px; height: 19px; }
.mt-attach:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.mt-attach:disabled { opacity: .45; cursor: default; }
.mt-attach:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mt-adj { padding: 0 20px 10px; }
.mt-adj-chip {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  font-size: .8rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis;
}
.mt-adj-chip small { color: var(--muted); font-size: .72rem; }
.mt-adj-chip button {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font-size: 1.05rem; line-height: 1; padding: 0 2px;
}
.mt-adj-chip button:hover { color: var(--ink); }
.mt-row--persona .mt-adj-chip { margin-top: 8px; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.26); color: inherit; }
.mt-row--persona .mt-adj-chip small { color: inherit; opacity: .75; }

/* --- portada generada --- */
.mt-cover-img {
  display: block; width: 100%; max-width: 280px; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 12px; border: 1px solid var(--line);
}
.mt-cover-pie {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 10px; max-width: 280px;
}
.mt-cover-pie b { font-weight: 620; font-size: .92rem; letter-spacing: -0.02em; }
.mt-mini { font-size: .78rem; color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid currentColor; }
.mt-mini:hover { opacity: .8; }

/* --- caché orientativo --- */
.mt-precio {
  font-size: 2rem; font-weight: 620; letter-spacing: -0.04em; line-height: 1;
  margin: 2px 0 6px;
}

/* --- saldo bajo --- */
.chip--warn { background: #fff4ed; border-color: #ffd9c9; color: var(--accent-ink); }
.chip--warn .dot { background: var(--accent); }

.mt-cta-row { margin-top: 14px; }
.mt-bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em; background: rgba(20,24,29,.06); padding: 1px 5px; border-radius: 5px;
}
.mt-bubble ul { margin: 6px 0 0; padding-left: 18px; }
.mt-bubble li { margin: 3px 0; }

@media (max-width: 560px) {
  .mt-attach { width: 38px; height: 38px; border-radius: 10px; }
  .mt-cover-img, .mt-cover-pie { max-width: 100%; }
  .mt-precio { font-size: 1.7rem; }
}

/* ===========================================================================
   07/10/2026 — isotipo nuevo (dirección B) y su movimiento. El ecualizador
   solo se mueve cuando Martina está pensando: en reposo el logo está quieto,
   y con `prefers-reduced-motion` no se mueve nunca.
   =========================================================================== */
/* El icono de Martina: el mismo dibujo que en la app (burbuja + onda +
   estrella de IA). En la cabecera la onda se mueve suave; en los avatares de
   cada mensaje está quieta, que si no la conversación parpadea entera. */
.martina-icono { width: 100%; height: 100%; display: block; }
.mt-av { color: var(--ink); background: var(--paper); border: 1px solid var(--line); padding: 5px; }
.mt-av svg { width: 100%; height: 100%; }
.mt-head .mt-id svg.mt-marca { width: 28px; height: 28px; color: var(--ink); }
.sr-only { position: absolute; width: 0; height: 0; overflow: hidden; }

.martina-barra { transform-box: fill-box; transform-origin: center; animation: martina-onda 1.8s ease-in-out infinite; }
.martina-barra:nth-of-type(2) { animation-delay: -.62s; }
@keyframes martina-onda {
  0%, 100% { transform: scaleY(1); }
  30%      { transform: scaleY(.45); }
  65%      { transform: scaleY(1.5); }
}
@media (prefers-reduced-motion: reduce) { .martina-barra { animation: none; } }

/* El ecualizador del logo de Huming: quieto de serie, se mueve solo cuando se
   le pone la clase (cabecera del sitio al cargar, pantallas de carga). */
.vu { transform-box: fill-box; transform-origin: center; }
.vu-vivo .vu { animation: vu-pulso 1.5s ease-in-out infinite; }
.vu-vivo .vu2 { animation-delay: -.52s; }
@keyframes vu-pulso {
  0%, 100% { transform: scaleY(1); }
  30%      { transform: scaleY(.45); }
  65%      { transform: scaleY(1.5); }
}
@media (prefers-reduced-motion: reduce) { .vu-vivo .vu { animation: none; } }

/* La línea de marca, donde se firma la página */
.claim {
  font-size: 1.02rem;
  font-weight: 560;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 24ch;
}


/* El contrato redactado, dentro de la burbuja: se lee y se desplaza, pero no
   se descarga — eso necesita cuenta. */
.mt-contrato {
  max-height: 340px; overflow-y: auto; margin-top: 12px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  font-size: .82rem; line-height: 1.55; color: var(--ink-2);
}
.mt-contrato-cab { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mt-contrato-cab b { display: block; font-size: 1rem; letter-spacing: -0.02em; color: var(--ink); }
.mt-contrato-cab span { display: block; margin-top: 4px; font-size: .78rem; color: var(--muted); }
.mt-contrato-cab i { display: block; margin-top: 2px; font-style: normal; font-size: .74rem; color: var(--muted); }
.mt-contrato h4 {
  margin: 16px 0 6px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 620;
}
.mt-contrato h5 { margin: 12px 0 4px; font-size: .82rem; font-weight: 620; color: var(--ink); }
.mt-contrato p { margin: 0 0 9px; }

/* ===========================================================================
   07/10/2026 — el alta por SMS dentro del chat (Oscar: "dime tu número de
   móvil, dime tu código que has recibido en el sms"). Vive dentro de la
   burbuja de Martina, no en un modal: la conversación no se interrumpe.
   =========================================================================== */
.mt-alta { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.mt-alta-fila { display: flex; gap: 8px; }
.mt-alta-pref {
  flex: none; width: 128px; padding: 10px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font: inherit; font-size: .88rem;
}
.mt-alta-input {
  flex: 1; min-width: 0; padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font: inherit; font-size: .95rem;
}
.mt-alta-input:focus, .mt-alta-pref:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,24,29,.06);
}
.mt-alta-codigo {
  width: 100%; text-align: center; letter-spacing: .4em; font-size: 1.2rem; font-weight: 600;
}
.mt-alta .btn { width: 100%; justify-content: center; }
.mt-alta-sub { margin: 0; font-size: .86rem; color: var(--ink-2); }
.mt-alta-aviso { margin: 0; font-size: .8rem; color: #b3261e; }
.mt-alta-volver {
  border: 0; background: none; padding: 0; font: inherit; font-size: .8rem;
  color: var(--muted); text-decoration: underline; cursor: pointer; align-self: center;
}
.mt-alta-volver:hover { color: var(--ink); }
.mt-recaptcha { margin-top: 6px; }

@media (max-width: 560px) {
  .mt-alta-pref { width: 104px; font-size: .82rem; }
}

/* 07/10/2026 — aviso «Guardado en esta conversación» con X para cerrarlo */
.mt-saved:not([hidden]) { display: flex; align-items: center; gap: 10px; }
.mt-saved-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-saved-x {
  flex: none; width: 22px; height: 22px; margin-right: -6px;
  display: grid; place-items: center;
  border: 0; border-radius: 99px; background: transparent;
  color: var(--green); font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.mt-saved-x:hover { background: #d3ebe1; }
.mt-saved-x:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

/* 07/10/2026 — Oscar: "prueba la web tú y dime qué podemos hacer para mejorar
   la experiencia". Titular encima del chat (antes la primera pantalla era
   una caja de chat sin decir qué es), aviso de espera larga y cookies más
   compactas en móvil para que no tapen la conversación. */
.mt-intro { max-width: 760px; margin: 0 auto clamp(14px, 2.4vh, 22px); text-align: center; }
.mt-titular {
  font-size: clamp(1.32rem, 2.5vw, 1.95rem); font-weight: 620; letter-spacing: -0.03em;
  line-height: 1.15; color: var(--ink); text-wrap: balance;
}
.mt-bajada { margin-top: 8px; font-size: .95rem; color: var(--muted); text-wrap: balance; }

.mt-espera { display: block; margin-top: 6px; font-size: .78rem; color: var(--muted); }

/* Con el titular encima, el chat cede alto para que el campo de escribir
   quepa en la primera pantalla (también en portátiles de 800 px). */
.martina-stage .mt-list { height: clamp(250px, calc(100svh - 560px), 460px); }
.mt-chips { gap: 7px; }
.mt-chip { padding: 8px 13px; }

.cc-corto { display: none; }

@media (max-width: 640px) {
  .mt-titular { font-size: 1.22rem; }
  .mt-bajada { font-size: .86rem; margin-top: 6px; }
  .martina-stage .mt-list { height: clamp(220px, 36svh, 380px); }
}

@media (max-width: 560px) {
  .cc-card { padding: 12px 14px 10px; border-radius: 16px; }
  .cc-card h2 { display: none; }
  .cc-card > p { margin-top: 0; padding-right: 30px; font-size: .82rem; line-height: 1.4; }
  .cc-largo { display: none; }
  .cc-corto { display: inline; }
  .cc-close { top: 9px; right: 9px; width: 26px; height: 26px; }
  .cc-actions { margin-top: 10px; gap: 6px; }
  .cc-actions .btn { flex: 1 1 calc(50% - 3px); padding: 9px 10px; }
  /* «Configurar» pasa a ser un enlace discreto debajo, no un tercer botón */
  .cc-actions .btn[data-cc="toggle"] {
    flex: 1 1 100%; padding: 4px 0; border: 0; background: none; box-shadow: none;
    font-size: .8rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  }
  .cc-actions .btn[data-cc="save"] { flex: 1 1 100%; }
}

/* 07/10/2026 — contratar un artista desde el chat: lista para elegir entre
   varios con el mismo nombre, dossier con rango de caché y «Solicitar fecha». */
.mt-cands .mt-doc-tit { margin-bottom: 8px; }
.mt-cand { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.mt-cand-img { width: 46px; height: 46px; flex: none; border-radius: 10px; object-fit: cover; background: var(--bone-2); }
.mt-cand-ini { display: grid; place-items: center; font-weight: 620; color: var(--muted); }
.mt-cand-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: .9rem; line-height: 1.3; }
.mt-cand-txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-cand-txt small { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-cand-txt a { font-size: .78rem; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; width: fit-content; }
.mt-cand-btn { flex: none; cursor: pointer; }

.mt-dos-cab { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.mt-dos-cab .mt-doc-tit { margin-bottom: 2px; }
.mt-dos-cab .mt-doc-sub { margin: 0; }
.mt-dos-img { width: 76px; height: 76px; flex: none; border-radius: 12px; object-fit: cover; background: var(--bone-2); }
.mt-dos-gen { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.mt-dos-gen span { font-size: .72rem; padding: 2px 8px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink-2); }
.mt-dos-rango { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; margin-bottom: 10px; border-radius: 12px; background: var(--bone); }
.mt-dos-rango b { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.02em; }
.mt-dos-rango small { font-size: .74rem; color: var(--muted); }
.mt-dos-enl { margin-top: 8px; font-size: .82rem; }
.mt-dos-enl a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.mt-sol { margin-top: 14px; }
.mt-sol-form { display: flex; flex-direction: column; gap: 10px; }
.mt-sol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.mt-sol-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; color: var(--muted); }
.mt-sol-grid input, .mt-sol-grid textarea {
  font: inherit; font-size: .9rem; color: var(--ink); padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; min-width: 0;
}
.mt-sol-grid input:focus, .mt-sol-grid textarea:focus { outline: none; border-color: var(--ink); }
.mt-sol-ancho { grid-column: 1 / -1; }
.mt-sol-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mt-sol-form .btn, .mt-sol .btn { width: 100%; justify-content: center; }
.mt-sol-ok { padding: 12px 14px; border-radius: 12px; background: var(--green-soft); color: var(--green); font-size: .9rem; margin-bottom: 10px; }
@media (max-width: 640px) { .mt-sol-grid { grid-template-columns: 1fr; } }
.mt-cand-btn {
  border: 1px solid var(--line); border-radius: 99px; background: var(--paper); color: var(--ink);
  padding: 6px 13px; font: inherit; font-size: .8rem; font-weight: 560; text-decoration: none;
}
.mt-cand-btn:hover { border-color: var(--ink); }

/* 07/10/2026 — Oscar: "vamos aprovechar mejor la página del chat de la web:
   arriba solo el texto… el header del chat un poco más bajo… baja más hacia el
   footer para que sea más largo". Una línea arriba, cabecera del chat en una
   sola línea y la conversación ocupando el resto de la pantalla. */
.martina-stage { padding-block: clamp(14px, 2.4vh, 26px) clamp(28px, 5vh, 56px); }
.mt-intro { margin-bottom: clamp(10px, 1.6vh, 16px); max-width: 1100px; }
@media (min-width: 900px) { .mt-titular { text-wrap: nowrap; } }
.mt-titular { font-size: clamp(1.08rem, 1.7vw, 1.4rem); font-weight: 600; letter-spacing: -0.02em; }
.martina-stage .mt-head { padding: 10px 18px; }
.martina-stage .mt-head .mt-id br,
.martina-stage .mt-head .mt-sub { display: none; }
.martina-stage .mt-head .mt-id svg { width: 22px; height: 22px; }
.martina-stage .mt-list { height: clamp(280px, calc(100svh - 338px), 780px); }
@media (max-width: 640px) {
  .mt-titular { font-size: 1.02rem; }
  .martina-stage .mt-head { padding: 9px 14px; }
  .martina-stage .mt-list { height: clamp(240px, calc(100svh - 438px), 640px); }
}

.mt-cand--ok { cursor: pointer; border-radius: 10px; margin-inline: -6px; padding-inline: 6px; transition: background .15s ease; }
.mt-cand--ok:hover, .mt-cand--ok:focus-visible { background: var(--bone); outline: none; }
.mt-cand--ok:hover .mt-cand-btn { border-color: var(--ink); }
.mt-dos-player { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; margin-top: 10px; }

/* 07/10/2026 — Oscar, desde el iPhone: "el chat tiene que tener más espacio de
   arriba abajo. Cuando escribes tiene que quedarse en una posición bien el
   texto". El chat es un panel de alto fijo: la conversación ocupa lo que sobra
   y el campo de escribir no se mueve aunque aparezcan botones o avisos. En el
   móvil el alto lo afina martina.js con la parte visible de la pantalla. */
.martina-stage .mt-shell { height: clamp(460px, calc(100svh - 150px), 920px); }
.martina-stage .mt-list { flex: 1 1 auto; min-height: 0; height: auto; }
.martina-stage .mt-shell > :not(.mt-list) { flex: none; }

/* La ficha del lanzamiento */
.mt-ficha .mt-doc-tit small { font-weight: 500; color: var(--muted); }
.mt-ficha-sec { margin-top: 12px; margin-bottom: 2px; }
.mt-arts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; align-items: center; }
.mt-arts--feat > small { font-size: .74rem; color: var(--muted); margin-right: 2px; }
.mt-art { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 1px solid var(--line); border-radius: 99px; font-size: .82rem; font-weight: 560; }
.mt-art img, .mt-art i { width: 22px; height: 22px; border-radius: 99px; object-fit: cover; background: var(--bone-2); display: grid; place-items: center; font-style: normal; font-size: .7rem; color: var(--muted); }
.mt-art small { font-weight: 500; color: var(--muted); font-size: .7rem; }
.mt-cand--nuevo .mt-cand-ini { font-size: 1.3rem; font-weight: 500; }

@media (max-width: 640px) {
  .martina-stage { min-height: 0; padding-block: 8px 20px; }
  .martina-stage .mt-shell { height: calc(100svh - 150px); border-radius: 18px; }
  .mt-intro { margin-bottom: 8px; }
  /* el iPhone hace zoom en cualquier campo de menos de 16 px: el texto "saltaba" */
  .mt-input, .mt-alta-input, .mt-alta-pref, .mt-sol-grid input, .mt-sol-grid textarea { font-size: 16px; }
  /* los botones, en una fila que se desliza: no se comen la conversación */
  .mt-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }
  .mt-chips::-webkit-scrollbar { display: none; }
  .mt-chip { flex: none; white-space: nowrap; }
  .mt-saved { margin: 0 10px 6px; padding: 5px 10px; font-size: .72rem; }
  /* escribiendo: fuera la cabecera de la web y el titular */
  body.mt-escribiendo .site-header,
  body.mt-escribiendo .mt-intro,
  body.mt-escribiendo .cookie-consent { display: none; }
  body.mt-escribiendo .martina-stage { padding-top: 6px; }
}

/* 07/10/2026 — Martina flotante: abajo a la derecha al bajar por la portada y
   en el resto de páginas. Desplegado en el ordenador, solo el botón en el
   móvil (y, al abrirlo, a pantalla completa). */
.mt-flota {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 190; display: none; flex-direction: column; align-items: flex-end; gap: 12px;
  pointer-events: none;
}
.mt-flota.is-visible { display: flex; }
.mt-flota > * { pointer-events: auto; }
.mt-flota-panel { display: none; width: min(410px, calc(100vw - 40px)); height: min(640px, calc(100vh - 110px)); }
.mt-flota.is-abierto .mt-flota-panel { display: block; animation: mtFlotaEntra .22s ease-out; }
.mt-flota.is-abierto .mt-fab { display: none; }
.mt-flota-panel .mt-shell {
  height: 100%; max-width: none; border-radius: 22px;
  box-shadow: 0 24px 60px -18px rgba(20, 24, 29, .38), 0 2px 8px rgba(20, 24, 29, .06);
}
.mt-flota-panel .mt-list { flex: 1 1 auto; min-height: 0; height: auto; padding: 16px 14px; }
.mt-flota-panel .mt-shell > :not(.mt-list) { flex: none; }
.mt-flota-panel .mt-head { padding: 9px 10px 9px 16px; gap: 8px; }
.mt-flota-panel .mt-head .mt-id br,
.mt-flota-panel .mt-head .mt-sub,
.mt-flota-panel .mt-tag-extra { display: none; }
.mt-flota-panel .mt-head .mt-id svg { width: 22px; height: 22px; }
.mt-flota-panel .mt-form { padding: 10px 12px; gap: 8px; }
.mt-cerrar { display: none; }
.mt-flota-panel .mt-cerrar {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-left: 2px;
  border: 0; border-radius: 99px; background: transparent; color: var(--muted); cursor: pointer;
}
.mt-flota-panel .mt-cerrar:hover { background: var(--bone); color: var(--ink); }
.mt-cerrar svg { width: 18px; height: 18px; }
.mt-fab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px 11px 14px; border: 0; border-radius: 999px;
  background: var(--ink); color: #fff; font: inherit; font-size: .95rem; font-weight: 600;
  box-shadow: 0 14px 34px -10px rgba(20, 24, 29, .5); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mt-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(20, 24, 29, .55); }
.mt-fab svg { width: 26px; height: 26px; flex: none; }
@keyframes mtFlotaEntra { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mt-flota.is-abierto .mt-flota-panel { animation: none; }
  .mt-fab { transition: none; }
}
@media (max-width: 640px) {
  .mt-flota { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .mt-fab { width: 60px; height: 60px; padding: 0; justify-content: center; }
  .mt-fab span { display: none; }
  .mt-fab svg { width: 30px; height: 30px; }
  .mt-flota.is-abierto { inset: 0; z-index: 300; }
  .mt-flota.is-abierto .mt-flota-panel { position: fixed; left: 0; right: 0; top: 0; width: 100%; height: 100%; animation: none; }
  .mt-flota-panel .mt-shell { border-radius: 0; border: 0; box-shadow: none; }
  .mt-flota-panel .mt-head { padding-top: calc(9px + env(safe-area-inset-top, 0px)); }
  .mt-flota-panel .mt-form { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  body.mt-flota-movil { overflow: hidden; }
}

/* 07/10/2026 — Oscar, en vídeo desde el iPhone: "mira si hago hacia los lados
   cómo se mueve. Anclala mejor". La página no se desplaza hacia los lados, y en
   el móvil arrastrar sobre el chat ya no mueve la página: la cabecera, el campo
   de escribir y los avisos no arrastran nada; la conversación solo se desplaza
   ella (sin contagiar el rebote a la página), y los botones, solo de lado. */
body { overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }
@media (max-width: 640px) {
  html { overscroll-behavior-y: none; }
  .mt-shell .mt-head, .mt-shell .mt-saved, .mt-shell .mt-form,
  .mt-shell .mt-adj, .mt-shell .mt-demo { touch-action: none; }
  .mt-shell .mt-list { touch-action: pan-y; overscroll-behavior: contain; }
  .mt-shell .mt-chips { touch-action: pan-x; overscroll-behavior-x: contain; }
}

/* 07/10/2026 — dictado por voz en el chat (el micro, junto al clip). */
.mt-mic.is-escuchando {
  background: var(--accent); border-color: var(--accent); color: #fff;
  animation: mtMicPulso 1.3s ease-in-out infinite;
}
@keyframes mtMicPulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 45, .45); } 50% { box-shadow: 0 0 0 7px rgba(255, 90, 45, 0); } }
@media (prefers-reduced-motion: reduce) { .mt-mic.is-escuchando { animation: none; } }
@media (max-width: 640px) { .mt-form { gap: 7px; } }

/* 07/10/2026 — propuesta de artistas para un evento: casillas, rango, dossier
   desplegable y petición a varios a la vez. */
.mt-prop .mt-prop-ayuda { margin: 4px 0 6px; }
.mt-prop-art { border-top: 1px solid var(--line-soft); }
.mt-prop-fila { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.mt-prop-check { flex: none; display: grid; place-items: center; width: 26px; height: 26px; cursor: pointer; }
.mt-prop-check input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.mt-prop-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; }
.mt-prop-rango { font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.mt-prop-rango.is-ok { background: var(--green-soft); border-color: #cfe9de; color: var(--green); }
.mt-prop-acc { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mt-prop-acc .mt-cand-btn.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.mt-prop-sp { font-size: .74rem; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.mt-prop-dos { padding: 4px 0 14px 36px; }
.mt-prop-dos .mt-dos-img { width: 60px; height: 60px; }
.mt-dos-bio { font-size: .82rem; color: var(--muted); margin-top: 8px; }
.mt-prop-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.mt-prop-pie .btn { width: auto; }
.mt-prop-pie .btn:disabled { opacity: .5; cursor: default; }
@media (max-width: 640px) {
  .mt-prop-dos { padding-left: 0; }
  .mt-prop-fila { gap: 8px; }
  .mt-prop .mt-cand-img { width: 40px; height: 40px; }
}

/* 08/10/2026 — envío del single: ficha plegada (solo lo nuevo a la vista),
   repaso con reproductor y portada grande, contrato con firma a dedo y
   condiciones del servicio en las solicitudes de fecha. */
.mt-ficha-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mt-ficha-cab b { font-weight: 620; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-ficha-estado { flex: none; font-size: .72rem; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.mt-ficha-estado.is-ok { background: var(--green-soft); border-color: #cfe9de; color: var(--green); }
.mt-ficha-nuevo { margin-top: 8px; }
.mt-ficha-nuevo > small { display: block; font-size: .72rem; color: var(--muted); margin-bottom: 2px; }
.mt-ficha-mas { margin-top: 8px; }
.mt-ficha-mas > summary { cursor: pointer; font-size: .82rem; font-weight: 560; color: var(--accent-ink); list-style: none; padding: 4px 0; }
.mt-ficha-mas > summary::-webkit-details-marker { display: none; }
.mt-ficha-mas > summary::before { content: "▸ "; }
.mt-ficha-mas[open] > summary::before { content: "▾ "; }
.mt-ficha-portada { display: block; width: 100%; max-width: 420px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; margin: 10px 0; box-shadow: var(--shadow); }
.mt-ficha-audio { display: block; width: 100%; margin: 4px 0 10px; }
.mt-ficha-letra { white-space: pre-wrap; font: inherit; font-size: .84rem; line-height: 1.5; max-height: 260px; overflow: auto; background: var(--bone); padding: 10px 12px; border-radius: 10px; }
.mt-cdist-res { margin: 8px 0 4px; padding-left: 18px; font-size: .86rem; line-height: 1.45; }
.mt-cdist-res li { margin: 3px 0; }
.mt-cdist-doc { max-height: 340px; overflow: auto; border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; font-size: .8rem; line-height: 1.5; background: #fff; }
.mt-cdist-doc h4 { font-size: .8rem; margin: 12px 0 4px; }
.mt-cdist-doc p { margin: 0 0 6px; }
.mt-firma { margin-top: 12px; }
.mt-firma-lienzo { display: block; width: 100%; height: 160px; border: 1.5px dashed var(--line); border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; }
.mt-cond { margin: 10px 0 4px; }
.mt-cond-lista { padding-left: 18px; font-size: .8rem; line-height: 1.45; margin: 6px 0; }
.mt-cond-lista li { margin: 3px 0; }
.mt-cond-ok { display: flex; align-items: center; gap: 8px; font-size: .86rem; margin: 8px 0 2px; cursor: pointer; }
.mt-cond-ok input { width: 18px; height: 18px; accent-color: var(--accent); }


/* ===========================================================================
   08/10/2026 — «Hablar con el equipo» y seguir por WhatsApp (martina.js,
   tarjetaContacto). El verde es el de los botones de WhatsApp, sin su logo.
   =========================================================================== */
.btn--wa { background: #1f9d55; color: #fff; border-color: transparent; }
.btn--wa:hover { background: #17834a; color: #fff; }
.mt-wa {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.mt-wa-tit { margin: 0; }
.mt-wa .mt-cap { margin: 0; }
.mt-wa-qr {
  align-self: center; padding: 8px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; line-height: 0;
}
.mt-wa-qr svg { width: 168px; height: 168px; display: block; }
.mt-wa-link { align-self: center; font-size: .85rem; color: var(--ink); text-decoration: underline; }
.mt-wa .btn { width: 100%; justify-content: center; }
.mt-wa-ok {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center; padding: 6px 0;
}
.mt-wa-check { font-size: 1.7rem; line-height: 1; color: #1f9d55; font-weight: 700; }
.mt-wa-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-top: 1px solid var(--line);
  background: #f2faf5; font-size: .8rem; color: var(--ink-2);
}
.mt-wa-barra .btn { flex: none; }
@media (max-width: 640px) {
  .mt-wa-barra span { display: none; }
  .mt-wa-barra .btn { width: 100%; justify-content: center; }
}
/* En el iPhone, un campo con letra de menos de 16 px hace zoom al tocarlo y la
   página se desplaza hacia los lados: los de las tarjetas, a 16 px en el móvil. */
@media (max-width: 640px) {
  .mt-input, .mt-alta-input, .mt-alta-pref { font-size: 16px; }
}

/* 08/10/2026 — botones de selección múltiple (uso de IA del lanzamiento). */
.mt-chips .mt-chip--marca.is-on, .mt-chips .mt-chip--marca.is-on:hover { background: var(--ink); color: #fff !important; border-color: var(--ink); }
.mt-chips.mt-chips--varias { flex-wrap: wrap; overflow-x: visible; }
.mt-chip--marca.is-on::before { content: "✓ "; }
.mt-chip--listo { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.mt-chip--listo:disabled { opacity: .45; cursor: default; }

/* ===========================================================================
   08/10/2026 — álbum o EP en el chat: lista de temas en la ficha, temas ya
   publicados de Spotify con casillas y orden con flechas (martina.js).
   =========================================================================== */
.mt-temas { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.mt-temas-tit { font-size: .78rem; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.mt-tema, .mt-orden-fila {
  display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line);
}
.mt-tema:last-child, .mt-orden-fila:last-of-type { border-bottom: 0; }
.mt-tema.is-actual { background: var(--accent-soft); margin: 0 -8px; padding: 7px 8px; border-radius: 8px; }
.mt-tema-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line);
  font-size: .75rem; display: grid; place-items: center; color: var(--ink-2);
}
.mt-tema-txt, .mt-orden-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mt-tema-txt b, .mt-orden-txt b { font-size: .9rem; overflow-wrap: anywhere; }
.mt-tema-txt small, .mt-orden-txt small { font-size: .76rem; color: var(--muted); overflow-wrap: anywhere; }
.mt-tema-txt a { font-size: .78rem; color: var(--ink); }
.mt-tema-audio { width: 100%; height: 34px; margin-top: 4px; }
.mt-tema-ok { flex: none; color: #1f9d55; font-weight: 700; }
.mt-tema-tag { flex: none; font-size: .7rem; padding: 2px 8px; border-radius: 999px; background: #e9f7ef; color: #17834a; }
.mt-tp-lista { max-height: 320px; overflow-y: auto; margin: 8px 0 10px; border: 1px solid var(--line); border-radius: 10px; }
.mt-tp-fila { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.mt-tp-fila:last-child { border-bottom: 0; }
.mt-tp-fila input { flex: none; width: 18px; height: 18px; accent-color: var(--ink); }
.mt-tp-fila img, .mt-tp-fila i { flex: none; width: 36px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--line); }
.mt-tp-fila span { display: flex; flex-direction: column; min-width: 0; }
.mt-tp-fila b { font-size: .88rem; overflow-wrap: anywhere; }
.mt-tp-fila small { font-size: .74rem; color: var(--muted); }
.mt-tp-fila.is-dentro { opacity: .6; }
.mt-tp .btn, .mt-orden .btn { width: 100%; justify-content: center; margin-top: 8px; }
.mt-orden-fila { align-items: center; }
.mt-orden-btn {
  flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: #fff;
  font-size: 1rem; cursor: pointer; color: var(--ink);
}
.mt-orden-btn:disabled { opacity: .3; cursor: default; }
.mt-orden-btn:not(:disabled):hover { border-color: var(--ink); }

.mt-row--persona .mt-bubble { overflow-wrap: anywhere; }