/* ==========================================================================
   Landing · referencia "IA para clínicas privadas"
   Crema/blanco, negro, grises. Acentos pastel mínimos solo en iconos y estados.
   ========================================================================== */
/* Respaldo con las métricas de Inter: al cambiar de fuente el texto no "salta" (CLS) */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.5%; line-gap-override: 0%; }
:root {
  --bg: #FAFAF8; --bg-2: #F5F4F0; --surface: #FFFFFF; --soft: #F3F3F0;
  --ink: #0A0A0A; --ink-2: #171717; --ink-3: #111111;
  --text: #111111; --text-2: #666666; --muted: #8A8A8A; --line: #E5E5E2;
  --t-blue: #EAF0FB; --c-blue: #3B66C4;
  --t-green: #E7F4EA; --c-green: #2F8F4E;
  --t-orange: #FDF0E2; --c-orange: #C77A22;
  --t-purple: #EEEBFA; --c-purple: #6B5BC4;
  --t-red: #FBEAE8; --c-red: #D9483B;
  --font: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(18px, 4vw, 44px);
  --maxw: 1200px;
  --shadow: 0 1px 2px rgba(10,10,10,.04), 0 10px 28px -14px rgba(10,10,10,.14);
  --shadow-lg: 0 2px 4px rgba(10,10,10,.05), 0 28px 56px -22px rgba(10,10,10,.28);
  --ease: cubic-bezier(.2,.7,.2,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
main { overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 300; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
.container { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); position: relative; }

/* ---------- Iconos ---------- */
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tint { display: grid; place-items: center; border-radius: 12px; flex: none; }
.tint .ic { width: 20px; height: 20px; }
.t-blue { background: var(--t-blue); color: var(--c-blue); } .t-green { background: var(--t-green); color: var(--c-green); }
.t-orange { background: var(--t-orange); color: var(--c-orange); } .t-purple { background: var(--t-purple); color: var(--c-purple); }
.t-red { background: var(--t-red); color: var(--c-red); } .t-grey { background: var(--soft); color: var(--ink); }

/* ---------- Tipografía ---------- */
.eyebrow { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-2); font-weight: 500; margin-bottom: 18px; }
.eyebrow--n { display: flex; align-items: center; gap: 12px; }
.eyebrow--n b { font-weight: 400; color: var(--ink); letter-spacing: .08em; }
.eyebrow--n i { width: 1px; height: 12px; background: var(--muted); display: block; }
.h1 { font-size: clamp(2.3rem, 4.5vw, 4rem); line-height: 1.04; letter-spacing: -.038em; font-weight: 600; text-wrap: balance; }
.h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.08; letter-spacing: -.034em; font-weight: 600; text-wrap: balance; }
.lead { color: var(--text-2); font-size: clamp(.98rem, 1.15vw, 1.08rem); line-height: 1.6; text-wrap: pretty; }
.copy .lead { margin-top: 20px; max-width: 46ch; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: #fff; font-weight: 500; font-size: .92rem; cursor: pointer; transition: background .2s, transform .2s; white-space: nowrap; }
.btn:hover { background: var(--ink-2); }
.btn--sm { min-height: 38px; padding: 0 20px; font-size: .8rem; }
.btn--light { background: #fff; color: var(--ink); border-color: #fff; } .btn--light:hover { background: var(--soft); }
.btn--outline { background: #fff; color: var(--ink); border-color: var(--line); } .btn--outline:hover { border-color: var(--ink); }
.btn [aria-hidden] { display: inline-block; transition: transform .2s; }
.btn:hover [aria-hidden] { transform: translateX(3px); }
.play-link { display: inline-flex; align-items: center; gap: 12px; font-size: .92rem; font-weight: 500; }
.play-link span.ring { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; transition: background .2s, color .2s; }
.play-link u { text-underline-offset: 4px; }
.play-link:hover span.ring { background: var(--ink); color: #fff; }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 100; background: rgba(250,250,248,.85); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.logo { font-weight: 800; letter-spacing: .06em; font-size: 1.3rem; }
.nav__menu { display: flex; align-items: center; gap: 44px; }
.nav__links { display: flex; gap: 36px; }
.nav__links a { font-size: .78rem; color: var(--ink-2); padding: 8px 0; transition: opacity .2s; } .nav__links a:hover { opacity: .6; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 50%; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.burger span { width: 16px; height: 1.5px; background: var(--ink); transition: transform .2s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
@media (max-width: 960px) {
  .burger { display: inline-flex; }
  .nav__menu { position: absolute; top: 72px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 24px; flex-direction: column; align-items: stretch; gap: 8px; display: none; }
  .nav__menu.is-open { display: flex; }
  .nav__links { flex-direction: column; gap: 0; }
  .nav__links a { padding: 16px 0; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav__menu .btn { margin-top: 12px; }
}

/* ---------- Secciones ---------- */
.s { padding: clamp(56px, 7vw, 96px) 0; }
.s--alt { background: var(--bg-2); }
.two { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
@media (max-width: 960px) { .two { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.cap-row { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 34px; }
.cap { display: inline-flex; align-items: center; gap: 12px; font-size: .74rem; color: var(--ink-2); }
.cap .ring { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; }
.cap .ring .ic { width: 17px; height: 17px; }

/* ---------- Hero ---------- */
.hero { padding: clamp(36px, 5vw, 64px) 0 clamp(44px, 5vw, 70px); background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.hero__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero .eyebrow { margin-bottom: 22px; }
.hero .lead { margin-top: 22px; max-width: 48ch; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 30px; }
.hero__caps { margin-top: clamp(32px, 4vw, 52px); }
.hero__caps .cap-row { margin-top: 0; }
.vwrap { position: relative; }
.media { position: relative; border-radius: clamp(16px, 2vw, 26px); overflow: hidden; background: var(--ink); aspect-ratio: 16 / 10; box-shadow: var(--shadow-lg); }
.media video { width: 100%; height: 100%; object-fit: cover; }
.media__ctl { position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(10,10,10,.55); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: .75; transition: opacity .2s, background .2s; }
.media__ctl:hover, .media__ctl:focus-visible { opacity: 1; background: rgba(10,10,10,.85); }
.media__ctl .i-play { display: none; } .media.is-paused .i-play { display: block; } .media.is-paused .i-pause { display: none; }
.chips { position: absolute; left: -13%; bottom: -15%; width: 52%; display: grid; gap: 10px; z-index: 3; }
.chip { background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; box-shadow: var(--shadow-lg); font-size: .68rem; line-height: 1.35; }
.chip small { display: block; font-size: .6rem; color: var(--muted); margin-bottom: 3px; }
.chip--ai small { color: var(--c-blue); }
.chip--ok { display: flex; align-items: center; gap: 11px; }
.chip--ok b { display: block; font-size: .74rem; } .chip--ok span { color: var(--text-2); }
.chip--ok .tick { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--c-green); color: #fff; display: grid; place-items: center; flex: none; }
.chip--ok .tick .ic { width: 13px; height: 13px; stroke-width: 2.4; }
.mini-wave { display: flex; align-items: center; gap: 2px; height: 14px; margin-top: 6px; }
.mini-wave i { display: block; width: 2px; background: #9db6e6; border-radius: 2px; }
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } .chips { left: 4%; bottom: -14%; width: 66%; } .hero__caps { margin-top: 64px; } }
@media (max-width: 520px) { .chips { position: static; width: 100%; margin-top: 12px; } .hero__caps { margin-top: 28px; } }

/* ---------- 01 Atención ---------- */
.call { position: relative; border-radius: 26px; padding: 22px 20px 22px; background: linear-gradient(170deg, #3a3a3a 0%, #181818 55%, #0d0d0d 100%); color: #fff; text-align: center; box-shadow: var(--shadow-lg); min-height: 290px; display: flex; flex-direction: column; justify-content: space-between; }
.call small { font-size: .66rem; color: #aaa; display: block; } .call b { font-size: .86rem; font-weight: 500; display: block; margin-top: 4px; }
.call__wave { display: flex; justify-content: center; align-items: center; gap: 3px; height: 54px; margin: 16px 0 4px; }
.call__wave i { display: block; width: 2px; background: #d9d9d9; border-radius: 2px; }
.call__time { font-size: .72rem; color: #bbb; }
.call__btns { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 14px; }
.call__btns span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #2c2c2c; }
.call__btns span.end { width: 54px; height: 54px; background: var(--c-red); }
.call__btns .ic { width: 18px; height: 18px; }
.vis1 { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: clamp(16px, 2.5vw, 30px); align-items: center; }
.reqs { display: grid; gap: 10px; }
.req { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; padding: 13px 16px; }
.req b { font-size: .82rem; font-weight: 600; display: block; } .req span { font-size: .72rem; color: var(--text-2); }
.s1-caps { margin-top: 36px; }
@media (max-width: 700px) { .vis1 { grid-template-columns: 1fr; } .call { max-width: 320px; margin: 0 auto; width: 100%; } }

/* ---------- 02 Recordatorios (timeline) ---------- */
.tl-card { padding: clamp(22px, 3vw, 34px) clamp(16px, 2vw, 28px); }
.tl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; align-items: start; position: relative; }
.tl__node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; position: relative; padding: 0 6px; }
.tl__node .tint { width: 52px; height: 52px; border-radius: 50%; position: relative; z-index: 1; }
.tl__node .tint .ic { width: 22px; height: 22px; }
.tl__node b { font-size: .74rem; font-weight: 500; line-height: 1.3; max-width: 11ch; }
.tl__node::after { content: ""; position: absolute; top: 26px; left: calc(50% + 36px); right: calc(-50% + 36px); height: 1px; background: repeating-linear-gradient(90deg, #b8b8b4 0 5px, transparent 5px 9px); transform-origin: left; }
.tl__node::before { content: ""; position: absolute; top: 22px; right: calc(-50% + 28px); width: 7px; height: 7px; border-top: 1.5px solid #8a8a8a; border-right: 1.5px solid #8a8a8a; transform: rotate(45deg); }
.tl__node:last-child::after, .tl__node:last-child::before { display: none; }
@media (max-width: 760px) {
  .tl { grid-template-columns: 1fr; gap: 0; }
  .tl__node { flex-direction: row; text-align: left; gap: 16px; padding: 0 0 26px; }
  .tl__node b { max-width: none; font-size: .88rem; }
  .tl__node::after { top: 52px; bottom: 0; left: 26px; right: auto; width: 1px; height: auto; background: repeating-linear-gradient(180deg, #b8b8b4 0 5px, transparent 5px 9px); transform-origin: top; }
  .tl__node::before { display: none; }
  .tl__node:last-child { padding-bottom: 0; }
}

/* ---------- 03 Solicitudes ---------- */
.ws { padding: 6px 0; overflow: hidden; }
.ws__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px 12px; font-size: .86rem; font-weight: 600; }
.ws__head .ic { width: 16px; height: 16px; color: var(--muted); }
.row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) auto; gap: 14px; align-items: center; padding: 13px 22px; border-top: 1px solid var(--line); font-size: .78rem; }
.row .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #d8d2c8, #a39a8c); color: #fff; display: grid; place-items: center; font-size: .62rem; font-weight: 600; flex: none; }
.row .what { color: var(--text-2); }
.state { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 500; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.state .ic { width: 12px; height: 12px; stroke-width: 2; }
.state--ok { background: var(--t-green); color: var(--c-green); } .state--run { background: var(--t-blue); color: var(--c-blue); } .state--esc { background: var(--t-orange); color: var(--c-orange); }
@media (max-width: 560px) { .row { grid-template-columns: 1fr auto; } .row .what { grid-column: 1; grid-row: 2; } .row .state { grid-column: 2; grid-row: 1 / span 2; } }

/* ---------- 04 Integración ---------- */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, .85fr) 36px minmax(0, 1.05fr); align-items: center; gap: 6px; }
.chan { padding: 14px 14px; display: grid; gap: 12px; }
.chan li { display: flex; align-items: center; gap: 12px; font-size: .78rem; }
.chan .tint { width: 32px; height: 32px; border-radius: 10px; } .chan .tint .ic { width: 16px; height: 16px; }
.orb-wrap { text-align: center; }
.orb { width: clamp(96px, 11vw, 132px); aspect-ratio: 1; margin: 0 auto 12px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #5a5a5a 0, #1d1d1d 52%, #0a0a0a 100%); box-shadow: 0 18px 40px -14px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06); display: grid; place-items: center; }
.orb__wave { display: flex; align-items: center; gap: 3px; height: 34px; }
.orb__wave i { display: block; width: 2px; background: #e2e2e2; border-radius: 2px; }
.orb-wrap b { font-size: .76rem; font-weight: 500; line-height: 1.3; display: block; }
.arrow { display: grid; place-items: center; color: #8a8a8a; }
.arrow svg { width: 100%; height: 14px; overflow: visible; }
.sys { padding: 16px 16px; }
.sys__title { display: flex; align-items: center; gap: 12px; font-size: .8rem; font-weight: 600; line-height: 1.25; margin-bottom: 14px; }
.sys__title .ic { width: 24px; height: 24px; }
.sys li { display: flex; align-items: center; gap: 10px; font-size: .7rem; color: var(--text-2); padding: 9px 0; border-top: 1px solid var(--line); }
.sys li .ic { width: 14px; height: 14px; color: var(--ink); }
.note { margin-top: 18px; font-size: .74rem; color: var(--text-2); }
@media (max-width: 760px) {
  .flow { grid-template-columns: 1fr; gap: 14px; }
  .arrow { height: 26px; } .arrow svg { transform: rotate(90deg); width: 40px; margin: 0 auto; }
}

/* ---------- 05 Reglas ---------- */
.rules { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.cfg { padding: 18px 20px; }
.cfg__title { font-size: .84rem; font-weight: 600; margin-bottom: 8px; }
.cfg li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); font-size: .74rem; }
.cfg li .ic { width: 16px; height: 16px; }
.cfg li em { font-style: normal; color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; font-size: .68rem; }
.cfg li em .ic { width: 12px; height: 12px; color: var(--muted); }
.defines { background: var(--soft); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.defines h3 { font-size: .84rem; font-weight: 600; margin-bottom: 12px; }
.defines li { display: flex; gap: 10px; align-items: flex-start; font-size: .72rem; color: var(--ink-2); padding: 9px 0; line-height: 1.35; }
.defines li .ic { width: 14px; height: 14px; stroke-width: 2.2; margin-top: 1px; }
@media (max-width: 760px) { .rules { grid-template-columns: 1fr; } }

/* ---------- 06 Seguimiento ---------- */
.fu { display: grid; grid-template-columns: minmax(0, .8fr) 28px minmax(0, 1.5fr); align-items: center; gap: 8px; }
.done { padding: 18px 16px; display: flex; align-items: center; gap: 14px; }
.done .tick { width: 38px; height: 38px; border-radius: 50%; background: var(--t-green); color: var(--c-green); display: grid; place-items: center; flex: none; }
.done b { font-size: .84rem; display: block; } .done span { font-size: .7rem; color: var(--text-2); display: block; line-height: 1.35; }
.branch { align-self: stretch; position: relative; }
.branch::before { content: ""; position: absolute; left: 50%; top: 16%; bottom: 16%; width: 1px; background: repeating-linear-gradient(180deg, #b8b8b4 0 4px, transparent 4px 8px); }
.fus { display: grid; gap: 10px; }
.fu__row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 16px; position: relative; }
.fu__row::before { content: ""; position: absolute; left: -22px; top: 50%; width: 22px; height: 1px; background: repeating-linear-gradient(90deg, #b8b8b4 0 4px, transparent 4px 8px); }
.fu__row b { font-size: .78rem; display: block; } .fu__row span { font-size: .68rem; color: var(--text-2); display: block; }
.fu__row .go { color: var(--muted); } .fu__row .go .ic { width: 16px; height: 16px; }
.fu__row u { font-size: .72rem; text-underline-offset: 3px; }
.fu__row .st { font-size: .72rem; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 760px) {
  .fu { grid-template-columns: 1fr; gap: 14px; } .branch { display: none; }
  .fu__row::before { display: none; } .fu__row { grid-template-columns: 38px minmax(0, 1fr); } .fu__row .go { display: none; } .fu__row .st { grid-column: 2; }
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: box-shadow .2s, border-color .2s; }
.faq details:hover { border-color: #cfcfcb; } .faq details[open] { box-shadow: var(--shadow); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; font-size: .9rem; font-weight: 500; position: relative; min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 14px; font-size: 1.3rem; font-weight: 300; }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 20px 20px; font-size: .86rem; color: var(--text-2); line-height: 1.6; }

/* ---------- CTA ---------- */
.cta { padding: 20px 0 clamp(48px, 6vw, 80px); }
.cta__card { position: relative; overflow: hidden; border-radius: clamp(18px, 2.4vw, 28px); background: linear-gradient(100deg, #efece4 0%, #e6e1d6 55%, #d9d2c3 100%); padding: clamp(34px, 5vw, 64px) clamp(24px, 5vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 28px 40px; flex-wrap: wrap; border: 1px solid var(--line); }
.cta__card::after { content: ""; position: absolute; right: -8%; top: -40%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.55), rgba(255,255,255,0) 65%); pointer-events: none; }
.cta__copy { position: relative; z-index: 1; max-width: 560px; }
.cta__copy .h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.cta__copy p { margin-top: 14px; color: #55524b; font-size: .94rem; max-width: 46ch; }
.cta__act { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; }
.cta__act a.alt { font-size: .82rem; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Footer ---------- */
.footer { padding: 30px 0 40px; }
.footer__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; font-size: .74rem; color: var(--text-2); }
.footer__in nav { display: flex; gap: 8px 28px; flex-wrap: wrap; }
.footer__in a:hover { color: var(--ink); }

/* ---------- Formulario de demo (dialog) ---------- */
dialog.demo { border: 0; padding: 0; border-radius: 20px; width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; background: #fff; color: var(--text); box-shadow: var(--shadow-lg); }
dialog.demo::backdrop { background: rgba(10,10,10,.6); backdrop-filter: blur(4px); }
.demo__in { padding: clamp(22px, 4vw, 38px); }
.demo__close { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 1.3rem; line-height: 1; }
.demo h2 { font-size: 1.7rem; letter-spacing: -.03em; font-weight: 600; margin-bottom: 6px; padding-right: 40px; }
.demo .sub { color: var(--text-2); font-size: .92rem; margin-bottom: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field--full { grid-column: 1 / -1; }
.field label { font-size: .84rem; font-weight: 500; } .opt { color: var(--text-2); font-weight: 400; }
.input, .select, .textarea { width: 100%; min-height: 46px; border: 1px solid #CFCFCB; background: #fff; border-radius: 10px; padding: 10px 13px; }
.textarea { min-height: 96px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.field.has-error .input, .field.has-error .select { border: 2px solid var(--ink); padding: 9px 12px; }
.field__error { display: none; font-size: .8rem; font-weight: 500; } .field__error::before { content: "! "; }
.field.has-error .field__error { display: block; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: .84rem; color: var(--text-2); align-items: start; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; } .form-actions .small { font-size: .8rem; color: var(--text-2); max-width: 34ch; }
.form-status { margin-top: 16px; border: 1px solid var(--ink); border-radius: 10px; padding: 14px 16px; font-size: .9rem; } .form-status[hidden] { display: none; }
.form-status--ok { background: var(--ink); color: #fff; } .form-status--err { background: var(--soft); }
.form-status h3 { font-size: 1rem; margin-bottom: 4px; } .form-status .btn { margin-top: 10px; }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; display: none; }
.is-submitting .spinner { display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Animaciones: se ejecutan al entrar en viewport. Sin JS / con reduced-motion
   todo el contenido es visible y estático (la clase .motion solo la añade el JS).
   Cada elemento lleva su retardo en --d (ms) para controlar la secuencia.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .motion [data-a] { opacity: 0; }
  .motion .in [data-a="rise"], .motion .in[data-a="rise"] { animation: aRise .7s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
  .motion .in [data-a="left"] { animation: aLeft .7s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
  .motion .in [data-a="pop"] { animation: aPop .6s cubic-bezier(.3,1.35,.5,1) both; animation-delay: calc(var(--d, 0) * 1ms); }
  .motion .in [data-a="fade"] { animation: aFade .6s ease both; animation-delay: calc(var(--d, 0) * 1ms); }
  .motion [data-a="draw"] { opacity: 1; }
  .motion .tl__node[data-a]::after, .motion .tl__node[data-a]::before { opacity: 0; }
  .motion .in .tl__node[data-a]::after { animation: aDraw .5s ease both; animation-delay: calc(var(--d, 0) * 1ms + 380ms); }
  .motion .in .tl__node[data-a]::before { animation: aFade .3s ease both; animation-delay: calc(var(--d, 0) * 1ms + 800ms); }
  .motion .arrow[data-a] svg { stroke-dasharray: 60; stroke-dashoffset: 60; }
  .motion .in .arrow[data-a] { opacity: 1; }
  .motion .in .arrow[data-a] svg { animation: aStroke .6s ease both; animation-delay: calc(var(--d, 0) * 1ms); }
  .motion .fu__row[data-a]::before, .motion .branch[data-a] { opacity: 0; }
  .motion .in .fu__row[data-a]::before { animation: aFade .4s ease both; animation-delay: calc(var(--d, 0) * 1ms - 120ms); }
  .motion .in .branch[data-a] { animation: aFade .5s ease both; animation-delay: calc(var(--d, 0) * 1ms); }
  .call__wave i, .orb__wave i, .mini-wave i { transform-origin: center; animation: aBar 1s ease-in-out infinite alternate; }
  .call__wave i:nth-child(2n), .orb__wave i:nth-child(2n), .mini-wave i:nth-child(2n) { animation-duration: .72s; }
  .call__wave i:nth-child(3n), .orb__wave i:nth-child(3n), .mini-wave i:nth-child(3n) { animation-duration: 1.25s; animation-delay: -.3s; }
  .call__wave i:nth-child(5n), .orb__wave i:nth-child(5n), .mini-wave i:nth-child(5n) { animation-delay: -.55s; }
  .btn, .req, .row, .cfg li, .fu__row, .chan li { transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s; }
  @media (hover: hover) {
    .req:hover, .fu__row:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
    .row:hover { background: #fbfbf9; }
  }
}
@keyframes aRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes aLeft { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes aPop { from { opacity: 0; transform: scale(.82) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes aFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aDraw { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes aStroke { to { stroke-dashoffset: 0; } }
@keyframes aBar { from { transform: scaleY(.3); } to { transform: scaleY(1.1); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; } }
@media (max-width: 760px) {
  @media (prefers-reduced-motion: no-preference) {
    .motion .in .tl__node[data-a]::after { animation-name: aDrawY; }
  }
}
@keyframes aDrawY { from { opacity: 1; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }

/* ==========================================================================
   v2 · referencia 4: hero a sangre, bloques oscuros con bordes ondulados,
   formulario incrustado. Estas reglas sustituyen a las del hero/estructura v1.
   ========================================================================== */
:root { --eh: clamp(56px, 8vw, 124px); }

/* ---------- Hero a sangre ---------- */
.hero { position: relative; display: flex; flex-direction: column; padding: clamp(34px, 4vw, 60px) 0 calc(var(--eh) + clamp(46px, 5vw, 80px)); background: linear-gradient(180deg, #f5f3ee 0%, #faf9f6 100%); overflow: visible; }
.hero__in { position: relative; z-index: 2; order: 1; }
.hero__copy { max-width: min(560px, 50%); }
.hero__copy .lead { max-width: 52ch; }
.hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: min(54vw, 840px); z-index: 0; background: var(--ink); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
.hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.media__ctl { position: absolute; right: 20px; top: 20px; z-index: 6; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(10,10,10,.55); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: .8; transition: opacity .2s, background .2s; }
.hero .media__ctl { position: absolute; }
.media__ctl:hover, .media__ctl:focus-visible { opacity: 1; background: rgba(10,10,10,.85); }
.media__ctl .i-play { display: none; } .media__ctl.is-paused .i-play { display: block; } .media__ctl.is-paused .i-pause { display: none; }
.chips { position: absolute; left: 53%; top: clamp(24px, 3vw, 44px); width: min(33%, 400px); display: grid; gap: 12px; z-index: 3; bottom: auto; }
.chip:nth-child(2) { margin-left: 14px; }
.chip--ok .sm { display: block; font-size: .6rem; }
.hero__caps { margin-top: clamp(34px, 4vw, 54px); }
@media (max-width: 960px) {
  .hero { padding-bottom: calc(var(--eh) + 36px); }
  .hero__copy { max-width: none; }
  .hero__media { position: relative; order: 2; width: calc(100% - var(--gutter) * 2); margin: 26px auto 0; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; -webkit-mask-image: none; mask-image: none; box-shadow: var(--shadow-lg); }
  .chips { position: static; width: 100%; margin-top: 22px; }
  .chip:nth-child(2) { margin-left: 0; }
}

/* ---------- Bloques oscuros con bordes ondulados ---------- */
.edge { position: absolute; left: 0; width: 100%; height: var(--eh); fill: var(--ink); pointer-events: none; display: block; }
.edge--top { top: calc(var(--eh) * -1 + 1px); }
.edge--bot { bottom: calc(var(--eh) * -1 + 1px); transform: scaleY(-1); }
.dark { position: relative; background: var(--ink); color: #fff; padding: clamp(40px, 5vw, 80px) 0 clamp(50px, 6vw, 90px); z-index: 1; }
.dark .eyebrow { color: #b4b4b1; } .dark .eyebrow b { color: #fff; } .dark .eyebrow i { background: #777; }
.dark .lead { color: #b4b4b1; }
.dark .h2 { color: #fff; }
.dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 78% 50%, rgba(70,70,70,.35) 0, rgba(10,10,10,0) 70%); pointer-events: none; }
.dark > .container { z-index: 2; }
.two--dark { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.dcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.dcard { background: #131313; border: 1px solid #2a2a2a; border-radius: 14px; padding: 18px 16px 16px; }
.dcard .ic { width: 22px; height: 22px; margin-bottom: 26px; color: #fff; }
.dcard h3 { font-size: .88rem; font-weight: 600; margin-bottom: 4px; }
.dcard p { font-size: .72rem; color: #a9a9a5; line-height: 1.45; }
.stage { position: relative; min-height: 460px; display: grid; place-items: center; }
.stone { position: absolute; inset: 10% -8% -8% 12%; border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%; background: radial-gradient(circle at 30% 28%, #3c3c3c 0, #161616 48%, #070707 100%); opacity: .9; }
.phone { position: relative; z-index: 2; width: clamp(220px, 22vw, 290px); aspect-ratio: 9 / 19; border-radius: 44px; padding: 10px; background: linear-gradient(145deg, #3a3a3a, #0d0d0d); border: 1px solid #444; box-shadow: 0 46px 80px -24px #000, inset 0 0 0 1px rgba(255,255,255,.04); transform: rotate(8deg); }
.phone__screen { height: 100%; border-radius: 35px; background: linear-gradient(170deg, #707070 0%, #262626 50%, #111 100%); padding: 24px 14px; text-align: center; position: relative; overflow: hidden; }
.phone__lock { width: 12px; height: 12px; margin: 4px auto 4px; stroke: #fff; fill: none; stroke-width: 1.8; }
.phone__time { font-size: clamp(2.6rem, 4vw, 3.5rem); font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.phone__date { font-size: 10px; color: #d5d5d5; margin-top: 6px; }
.notif { position: absolute; left: 10px; right: 10px; bottom: 44px; background: rgba(250,250,248,.96); color: var(--ink); border-radius: 14px; padding: 10px; text-align: left; transform: rotate(-3deg); }
.notif__head { display: flex; gap: 6px; align-items: center; font-size: 8px; margin-bottom: 4px; color: var(--text-2); }
.notif__head i { width: 14px; height: 14px; border-radius: 4px; background: var(--ink); display: block; }
.notif p { font-size: 9.5px; line-height: 1.35; font-weight: 500; }
.notif__btns { display: flex; gap: 6px; margin-top: 8px; }
.notif__btns span { flex: 1; font-size: 8.5px; text-align: center; padding: 6px 4px; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.notif__btns span:first-child { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 960px) { .two--dark { grid-template-columns: 1fr; } .stage { min-height: 400px; } }
@media (max-width: 620px) { .dcards { grid-template-columns: 1fr; } .dcard .ic { margin-bottom: 14px; } }

/* secciones claras entre bloques */
.s--light { background: transparent; }
.dark + .s { padding-top: calc(var(--eh) + clamp(20px, 3vw, 50px)); }
#integracion { padding-bottom: calc(var(--eh) + clamp(40px, 5vw, 70px)); }

/* ---------- Seguimiento en oscuro ---------- */
.dark .card { background: #141414; border-color: #2b2b2b; box-shadow: none; color: #fff; }
.dark .done .tick { background: #2f8f4e; color: #fff; }
.dark .done span, .dark .fu__row span, .dark .note { color: #a9a9a5; }
.dark .t-blue { background: linear-gradient(135deg, #3b6fe0, #2a4fb0); color: #fff; }
.dark .t-orange { background: linear-gradient(135deg, #d99445, #b9742b); color: #fff; }
.dark .fu__row .go { color: #777; } .dark .fu__row .st { color: #fff; }
.dark .branch::before { background: repeating-linear-gradient(180deg, #555 0 4px, transparent 4px 8px); }
.dark .fu__row::before { background: repeating-linear-gradient(90deg, #555 0 4px, transparent 4px 8px); }
@media (hover: hover) { .dark .fu__row:hover { box-shadow: 0 18px 40px -18px #000; } }

/* ---------- Solicita una demo (formulario incrustado) ---------- */
.demo-sec { position: relative; padding: calc(var(--eh) + 6px) 0 clamp(70px, 8vw, 110px); background: linear-gradient(180deg, #f7f5f0, #efece4); }
.demo-sec::before { content: ""; position: absolute; left: -6%; bottom: -10%; width: 38%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(214,205,188,.55), rgba(214,205,188,0) 68%); pointer-events: none; }
.demo-grid { position: relative; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.demo-copy .lead { margin-top: 20px; max-width: 40ch; }
.form-card { background: #fff; border-radius: clamp(20px, 2.4vw, 30px); padding: clamp(22px, 3vw, 40px); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.checks { border: 0; padding: 0; margin: 0; min-width: 0; }
.checks legend { font-size: .84rem; font-weight: 500; padding: 0; margin-bottom: 8px; }
.checks__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.check { display: flex; gap: 8px; align-items: center; font-size: .8rem; color: var(--text-2); cursor: pointer; min-height: 30px; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-top: 22px; }
.consent-wrap { max-width: 320px; }
.btn--lg { min-height: 52px; padding: 0 32px; font-size: .95rem; }
@media (max-width: 960px) { .demo-grid { grid-template-columns: 1fr; } .consent-wrap { max-width: none; } }
.faq-sec { background: var(--bg); }

/* ---------- Animaciones v2 ---------- */
@media (prefers-reduced-motion: no-preference) {
  .motion .in [data-a="phone"] { animation: aPhone .9s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
  .motion .in [data-a="notif"] { animation: aNotif .7s cubic-bezier(.2,.9,.3,1.1) both; animation-delay: calc(var(--d, 0) * 1ms); }
  .motion .stone { opacity: 0; transition: opacity 1.2s ease .2s; } .motion .in .stone { opacity: .9; }
  .motion .hero__media { opacity: 0; transition: opacity 1s ease; } .motion .hero.in .hero__media { opacity: 1; }
}
@keyframes aPhone { from { opacity: 0; transform: rotate(8deg) translateY(36px); } to { opacity: 1; transform: rotate(8deg); } }
@keyframes aNotif { from { opacity: 0; transform: translateY(26px) rotate(-3deg); } to { opacity: 1; transform: rotate(-3deg); } }

/* ---------- Ajustes de fidelidad (comparación con la referencia) ---------- */
.hero__media { width: min(50vw, 780px); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%); mask-image: linear-gradient(90deg, transparent 0, #000 34%); }
.chips { left: 52%; width: min(33%, 400px); }
.hero__caps .cap-row { gap: 12px 24px; }
.hero__caps .cap { font-size: .72rem; gap: 10px; } .hero__caps .cap .ring { width: 34px; height: 34px; }
.dark { padding: clamp(24px, 3vw, 46px) 0 clamp(30px, 4vw, 58px); }
.stage { min-height: 420px; }
.dark .tint .ic { stroke: #fff; }
.dark .t-green .ic { stroke: #fff; }
@media (max-width: 960px) { .hero__media { width: calc(100% - var(--gutter) * 2); } }
.btn .spinner { display: none; }
.btn.is-submitting .spinner, .is-submitting .btn .spinner { display: inline-block; }

.consent-wrap.has-error .field__error { display: block; }
.consent-wrap.has-error .consent { color: var(--ink); font-weight: 500; }

/* ---------- Hero v3: copy a la izquierda; vídeo en recuadro y, debajo, las tarjetas (nada tapa el vídeo) ---------- */
.hero { display: block; padding: clamp(34px, 4vw, 60px) 0 calc(var(--eh) + clamp(40px, 5vw, 70px)); }
.hero__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.hero__copy { max-width: none; }
.hero__side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.hero__media { position: relative; inset: auto; top: auto; right: auto; bottom: auto; width: 100%; margin: 0; aspect-ratio: 16 / 9; border-radius: clamp(16px, 2vw, 26px); overflow: hidden; -webkit-mask-image: none; mask-image: none; background: var(--ink); box-shadow: var(--shadow-lg); z-index: 1; }
.hero__media video { object-position: 50% 40%; }
.chips { position: static; left: auto; top: auto; width: 100%; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; z-index: 1; }
.chip:nth-child(2) { margin-left: 0; }
.chip--ok { grid-column: 1 / -1; }
.hero__caps { margin-top: clamp(30px, 3.5vw, 48px); }
@media (max-width: 960px) {
  .hero__top { grid-template-columns: 1fr; }
  .hero__media { order: 0; width: 100%; margin: 0; }
}
@media (max-width: 520px) { .chips { grid-template-columns: 1fr; } }

/* ==========================================================================
   v3 · referencia 5: agente de voz, soluciones por tipo de clínica, resultados,
   pie oscuro con ondas, páginas /soluciones, /legal y /recursos.
   ========================================================================== */

/* ---------- Navegación con 7 enlaces: menú móvil desde 1100 px ---------- */
.nav__links { gap: clamp(18px, 2vw, 32px); }
@media (max-width: 1100px) {
  .burger { display: inline-flex; }
  .nav__menu { position: absolute; top: 72px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 24px; flex-direction: column; align-items: stretch; gap: 8px; display: none; }
  .nav__menu.is-open { display: flex; }
  .nav__links { flex-direction: column; gap: 0; }
  .nav__links a { padding: 16px 0; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav__menu .btn { margin-top: 12px; }
}

/* ---------- Ondas y fondos oscuros ---------- */
.inner-waves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.dark { overflow: visible; }
.dark > .container { position: relative; z-index: 2; }
.h2--lg { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.sub { margin-top: 12px; font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: #e4e1d9; }
.copy .sub + .lead { margin-top: 16px; }
.micro { margin-top: 14px; font-size: .74rem; color: var(--muted); }
.dark .micro { color: #a9a9a5; }
.micro--c { text-align: center; margin-top: 22px; }
.pill { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; min-height: 52px; padding: 0 24px 0 10px; border-radius: 999px; background: #f2ede2; color: var(--ink); font-size: .9rem; font-weight: 500; transition: transform .2s, background .2s; }
.pill:hover { background: #fff; transform: translateY(-2px); }
.pill__ico { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.pill__ico .ic { width: 14px; height: 14px; }

/* ---------- 01 Agente de voz ---------- */
.dark--voice { padding: clamp(36px, 4vw, 64px) 0 clamp(60px, 7vw, 100px); }
.phone__screen--voice { background: linear-gradient(170deg, #34322e 0%, #1a1917 55%, #0d0d0c 100%); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 22px 12px 20px; }
.vcall small { font-size: 9px; color: #bdb8ad; }
.vorb { width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #f6f1e5 0, #d9ceb7 55%, #b3a688 100%); box-shadow: 0 0 40px rgba(233,220,190,.35); display: grid; place-items: center; }
.vorb__wave { display: flex; align-items: center; gap: 2px; height: 36px; }
.vorb__wave i { display: block; width: 2px; background: #6b6250; border-radius: 2px; }
.vname { text-align: center; } .vname b { display: block; font-size: .8rem; font-weight: 500; } .vname small { font-size: 8px; color: #bdb8ad; }
.vbtns { display: flex; align-items: center; gap: 14px; }
.vbtns span { width: 32px; height: 32px; border-radius: 50%; background: #2c2b28; display: grid; place-items: center; }
.vbtns span .ic { width: 14px; height: 14px; }
.vbtns span.end { width: 42px; height: 42px; background: #d9483b; } .vbtns span.end .ic { transform: rotate(135deg); width: 18px; height: 18px; }
.vflow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 70px); position: relative; }
.vstep { position: relative; text-align: center; padding: 0 10px; }
.vstep::after { content: ""; position: absolute; top: 40px; left: calc(50% + 48px); right: calc(-50% + 48px); border-top: 1.5px dotted #6a6a66; }
.vstep:last-child::after { display: none; }
.vnum { position: absolute; top: -8px; left: calc(50% - 46px); width: 26px; height: 26px; border-radius: 50%; background: #e9b78e; color: #111; font-size: .74rem; font-weight: 700; display: grid; place-items: center; z-index: 2; }
.vico { width: 78px; height: 78px; margin: 0 auto 14px; border-radius: 50%; border: 1px solid #3a3a37; background: #141413; display: grid; place-items: center; color: #fff; }
.vico .ic { width: 28px; height: 28px; stroke-width: 1.3; }
.vstep b { display: block; font-size: .92rem; font-weight: 600; }
.vstep p { font-size: .78rem; color: #b4b4b1; max-width: 21ch; margin: 5px auto 0; line-height: 1.4; }
@media (max-width: 900px) {
  .vflow { grid-template-columns: 1fr; gap: 0; max-width: 460px; margin-left: auto; margin-right: auto; }
  .vstep { display: grid; grid-template-columns: 78px 1fr; column-gap: 18px; text-align: left; padding: 0 0 28px; align-items: center; }
  .vstep .vico { grid-row: 1 / span 2; margin: 0; } .vstep b, .vstep p { grid-column: 2; margin-left: 0; max-width: none; }
  .vnum { left: 52px; top: -6px; }
  .vstep::after { top: 80px; bottom: 0; left: 39px; right: auto; border-top: 0; border-left: 1.5px dotted #6a6a66; }
}

/* ---------- 02 Soluciones por tipo de clínica ---------- */
.s--tipos { padding-top: clamp(30px, 4vw, 60px); padding-bottom: calc(var(--eh) + clamp(46px, 5vw, 80px)); }
.tipos__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 16px clamp(24px, 4vw, 56px); align-items: end; margin-bottom: clamp(26px, 3vw, 40px); }
.tipos__head .lead { max-width: 52ch; } .tipos__all { white-space: nowrap; align-self: start; }
.tgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.tcard { background: #fffdf9; border: 1px solid var(--line); border-radius: 18px; padding: 16px 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
@media (hover: hover) { .tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } }
.tcard h3 { display: flex; align-items: center; gap: 10px; font-size: .86rem; font-weight: 600; line-height: 1.25; min-height: 2.6em; }
.tcard h3 .ic { width: 22px; height: 22px; stroke-width: 1.4; }
.timg { position: relative; height: 118px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; }
.timg .ic { width: 54px; height: 54px; stroke-width: 1.1; color: rgba(10,10,10,.28); }
.timg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.5), transparent 60%); }
.timg--0 { background: linear-gradient(135deg, #efe3d6, #d9c3ad); } .timg--1 { background: linear-gradient(135deg, #e3ebf0, #bfd2df); }
.timg--2 { background: linear-gradient(135deg, #f1e4db, #d8bda8); } .timg--3 { background: linear-gradient(135deg, #dfe7ef, #b2c1d1); } .timg--4 { background: linear-gradient(135deg, #ebe9e3, #d2cec4); }
.tcard ul { display: grid; gap: 8px; }
.tcard li { display: flex; gap: 8px; align-items: flex-start; font-size: .72rem; color: var(--ink-2); line-height: 1.35; }
.tcard li .ic { width: 12px; height: 12px; margin-top: 2px; stroke-width: 2.2; }
.tlink { margin-top: auto; font-size: .76rem; font-weight: 600; display: inline-flex; gap: 6px; text-decoration: underline; text-underline-offset: 4px; }
.tlink span[aria-hidden] { transition: transform .2s; } .tcard:hover .tlink span[aria-hidden], .icard:hover .tlink span[aria-hidden] { transform: translateX(3px); }
.link { font-weight: 500; font-size: .86rem; text-decoration: underline; text-underline-offset: 4px; display: inline-flex; gap: 8px; }
@media (max-width: 1180px) { .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tipos__head { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tgrid { grid-template-columns: 1fr; } }

/* ---------- 03 No-shows ---------- */
.dark--noshow { padding: clamp(60px, 7vw, 110px) 0 clamp(80px, 9vw, 130px); }
.dark--noshow .stage { min-height: 500px; }

/* ---------- 04 Integración ---------- */
.s--integ { padding-bottom: calc(var(--eh) + clamp(40px, 5vw, 70px)); }
.flow2 { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, .55fr) 34px minmax(0, 1fr); align-items: center; gap: 6px; }
.box { padding: 16px; } .box h3 { font-size: .8rem; font-weight: 600; margin-bottom: 12px; }
.box ul { display: grid; gap: 8px; } .box li { display: flex; align-items: center; gap: 10px; font-size: .72rem; }
.box .tint { width: 26px; height: 26px; border-radius: 8px; } .box .tint .ic { width: 14px; height: 14px; }
.lcore { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 8px; box-shadow: var(--shadow); }
.lcore b { display: block; font-size: 1.2rem; letter-spacing: .12em; font-weight: 700; } .lcore small { font-size: .7rem; color: var(--text-2); }
@media (max-width: 860px) { .flow2 { grid-template-columns: 1fr; gap: 14px; } .flow2 .arrow { height: 26px; } .flow2 .arrow svg { transform: rotate(90deg); width: 40px; margin: 0 auto; } }

/* ---------- 05 Resultados ---------- */
.dark--results { padding: clamp(30px, 3.5vw, 52px) 0 clamp(40px, 5vw, 64px); }
.res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; text-align: center; }
.metric .ic { width: 30px; height: 30px; color: #fff; margin: 0 auto 10px; stroke-width: 1.3; }
.metric__v { display: block; font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 500; letter-spacing: -.02em; color: #fff; }
.metric span { font-size: .74rem; color: #b4b4b1; }
@media (max-width: 900px) { .res { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 06 Demo (centrada) ---------- */
.demo-sec { padding: calc(var(--eh) + 10px) 0 clamp(70px, 8vw, 110px); }
.demo-head { max-width: 760px; margin: 0 auto clamp(28px, 3vw, 40px); text-align: center; }
.demo-head .lead { margin: 20px auto 28px; max-width: 56ch; }
.eyebrow--c { justify-content: center; }
.form-card--c { max-width: 900px; margin: 0 auto; }
.faq-sec { padding-bottom: calc(var(--eh) + clamp(40px, 5vw, 80px)); }

/* ---------- Pie oscuro con ondas ---------- */
.footer-dark { position: relative; background: var(--ink); color: #fff; margin-top: 0; z-index: 1; }
.footer-dark .inner-waves { opacity: .9; }
.fgrid { display: grid; grid-template-columns: 1.2fr repeat(5, minmax(0, 1fr)); gap: 32px clamp(20px, 3vw, 48px); padding-top: clamp(48px, 6vw, 90px); padding-bottom: 40px; position: relative; z-index: 2; }
.fbrand p { color: #b4b4b1; font-size: .88rem; max-width: 26ch; margin-top: 12px; }
.footer-dark .logo { color: #fff; }
.fcol h2 { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #a9a9a5; font-weight: 500; margin-bottom: 14px; }
.fcol ul { display: grid; gap: 10px; }
.fcol a { color: #e6e4de; font-size: .86rem; transition: color .2s; } .fcol a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fbottom { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; border-top: 1px solid #262626; padding-top: 20px; padding-bottom: 30px; font-size: .76rem; color: #a9a9a5; }
.fbottom a:hover { color: #fff; }
@media (max-width: 1000px) { .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fbrand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .fgrid { grid-template-columns: 1fr; } }

/* ---------- Páginas de solución, legales y recursos ---------- */
.h1--page { font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.08; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .78rem; color: var(--text-2); margin-bottom: 26px; }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; } .crumbs [aria-current] { color: var(--ink); }
.vhero { padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); background: linear-gradient(180deg, #f5f3ee, #faf9f6); }
.vhero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.vhero .lead { margin-top: 20px; max-width: 58ch; }
.vhero .hero__actions { margin-top: 28px; }
.vcard { padding: 22px; } .vcard h2 { font-size: .95rem; margin: 14px 0 12px; }
.vcard ul { display: grid; gap: 4px; } .vcard li { display: flex; align-items: center; gap: 10px; font-size: .84rem; padding: 9px 0; border-top: 1px solid var(--line); } .vcard li .ic { width: 16px; height: 16px; } .vcard li .stag { margin-left: auto; }
.stag { display: inline-block; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.stag--on { background: var(--ink); color: #fff; } .stag--dev { border: 1px dashed var(--muted); color: var(--text-2); }
.shead { max-width: 720px; margin-bottom: clamp(24px, 3vw, 38px); }
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pcard { padding: 22px 20px; } .pcard h3 { font-size: .98rem; margin: 14px 0 6px; font-weight: 600; } .pcard p { font-size: .84rem; color: var(--text-2); }
.pnum { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 600; }
.alist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; align-content: start; }
.alist li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; padding: 12px 0; border-bottom: 1px solid var(--line); } .alist li .ic { width: 16px; height: 16px; margin-top: 3px; stroke-width: 2.2; }
.ugrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ucase { padding: 22px; } .ucase h3 { font-size: 1rem; margin-bottom: 10px; font-weight: 600; } .uq { font-size: .9rem; color: var(--ink-2); font-style: italic; } .ur { margin-top: 10px; font-size: .84rem; color: var(--text-2); }
.ublocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 56px); }
.ublock { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; } .ublock .tint { width: 44px; height: 44px; border-radius: 14px; }
.ublock h3 { font-size: 1rem; font-weight: 600; margin-bottom: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ublock p { font-size: .88rem; color: var(--text-2); }
.cta2 { padding: 10px 0 calc(var(--eh) + clamp(40px, 5vw, 80px)); }
.cta2__card { border-radius: clamp(18px, 2.4vw, 28px); background: linear-gradient(100deg, #1a1917, #0d0d0c); color: #fff; padding: clamp(30px, 4vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.cta2__card h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; } .cta2__card p { margin-top: 12px; color: #b4b4b1; max-width: 52ch; }
.related { margin-top: 36px; } .related h2 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); font-weight: 500; margin-bottom: 12px; }
.related ul { display: flex; flex-wrap: wrap; gap: 8px 22px; } .related a { font-size: .9rem; text-decoration: underline; text-underline-offset: 4px; }
.igrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.icard { padding: 24px; display: flex; flex-direction: column; gap: 12px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .icard p { font-size: .88rem; color: var(--text-2); } .icard .tint { width: 44px; height: 44px; }
@media (hover: hover) { .icard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } }
@media (max-width: 1000px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .igrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vhero__grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .pgrid, .ugrid, .ublocks, .alist, .igrid { grid-template-columns: 1fr; } }
.h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }
.small { font-size: .875rem; color: var(--text-2); }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); } .section-head .lead { margin-top: 20px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } @media (max-width: 900px) { .cards-3 { grid-template-columns: 1fr; } }
.res-card { padding: 26px; display: flex; flex-direction: column; gap: 12px; } .res-card p { color: var(--text-2); font-size: .94rem; } .res-card__meta { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
@media (hover: hover) { .res-card:hover { border-color: var(--ink); transform: translateY(-3px); } }
.link-arrow { font-weight: 500; border-bottom: 1px solid currentColor; align-self: flex-start; padding-bottom: 2px; margin-top: auto; font-size: .9rem; }
.article { padding: clamp(40px, 6vw, 80px) 0 calc(var(--eh) + clamp(40px, 5vw, 80px)); }
.article__inner { max-width: 760px; } .article .h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.article__meta { margin-top: 20px; font-size: 12px; color: var(--text-2); letter-spacing: .06em; text-transform: uppercase; }
.prose { margin-top: 40px; font-size: 1.04rem; } .prose > * + * { margin-top: 1.15em; }
.prose .lead { max-width: none; font-size: 1.15rem; color: var(--text); }
.prose h2 { font-size: 1.6rem; letter-spacing: -.025em; line-height: 1.2; margin-top: 2.1em; font-weight: 600; } .prose h3 { font-size: 1.15rem; margin-top: 1.7em; font-weight: 600; }
.prose p, .prose li { color: #2a2a2a; } .prose ul { display: grid; gap: .5em; } .prose ul li { padding-left: 1.4em; position: relative; } .prose ul li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }
.prose code { background: var(--soft); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; font-size: .85em; font-family: ui-monospace, Consolas, monospace; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.callout { border-left: 2px solid var(--ink); padding: 4px 0 4px 20px; max-width: 70ch; } .callout p { color: var(--text-2); } .callout strong { color: var(--ink); }
.article-end { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; }
.note { margin-top: 18px; font-size: .74rem; color: var(--text-2); } .dark .note { color: #a9a9a5; }
.btn--outline { background: #fff; color: var(--ink); border-color: var(--line); } .btn--outline:hover { border-color: var(--ink); background: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .vorb__wave i { transform-origin: center; animation: aBar 1s ease-in-out infinite alternate; }
  .vorb__wave i:nth-child(2n) { animation-duration: .7s; } .vorb__wave i:nth-child(3n) { animation-duration: 1.2s; animation-delay: -.3s; }
  .motion .vstep::after { opacity: 0; } .motion .in .vstep::after { animation: aFade .5s ease both; animation-delay: calc(var(--d, 0) * 1ms + 500ms); }
  .motion .tcard[data-a] { opacity: 0; }
}

.fgrid { padding-top: clamp(28px, 3.5vw, 50px); }

.vcard .tint { width: 44px; height: 44px; border-radius: 14px; }
.vcard .tint .ic { width: 20px; height: 20px; }

/* ==========================================================================
   v4 · menú desplegable de soluciones, sección 01 con pasos protagonistas,
   páginas de solución visuales
   ========================================================================== */

/* ---------- Desplegable "Soluciones" ---------- */
.nav__links { align-items: center; }
.nav__drop { position: relative; }
.nav__drop::after { content: ""; position: absolute; left: -20px; right: -20px; top: 100%; height: 14px; }
.nav__droptoggle { background: none; border: 0; font-size: .78rem; color: var(--ink-2); padding: 8px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: opacity .2s; }
.nav__droptoggle:hover { opacity: .6; }
.nav__droptoggle .ic { width: 11px; height: 11px; transition: transform .2s; stroke-width: 2; }
.nav__drop:hover .nav__droptoggle .ic, .nav__drop.is-open .nav__droptoggle .ic { transform: rotate(180deg); }
.nav__panel { position: absolute; top: 100%; left: -18px; margin-top: 12px; width: min(380px, 90vw); background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 150; }
.nav__drop:hover .nav__panel, .nav__drop:focus-within .nav__panel, .nav__drop.is-open .nav__panel { opacity: 1; visibility: visible; transform: none; }
.nav__panel ul { display: grid; gap: 2px; }
.nav__panel a { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; color: var(--ink); transition: background .15s; }
.nav__panel li a:hover, .nav__panel li a:focus-visible, .nav__panel a[aria-current] { background: var(--soft); }
.nav__panel b { display: block; font-size: .86rem; font-weight: 600; }
.nav__panel small { display: block; font-size: .72rem; color: var(--text-2); margin-top: 1px; }
.nav__panel .tint { width: 40px; height: 40px; border-radius: 12px; }
.nav__panel .tint .ic { width: 18px; height: 18px; }
.nav__panel .nav__all { display: block; margin-top: 6px; padding: 13px 14px 8px; border-top: 1px solid var(--line); border-radius: 0; font-size: .8rem; font-weight: 500; }
.nav__panel .nav__all:hover { text-decoration: underline; text-underline-offset: 4px; background: none; }
@media (max-width: 1100px) {
  .nav__drop::after { display: none; }
  .nav__droptoggle { width: 100%; justify-content: space-between; padding: 16px 0; font-size: 1rem; color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav__panel { position: static; opacity: 1; visibility: visible; transform: none; display: none; width: auto; margin: 0; padding: 4px 0 8px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .nav__drop.is-open .nav__panel { display: block; }
  .nav__panel a { padding: 12px 4px; }
}

/* ---------- 01 · Agente de voz: pasos protagonistas, móvil pequeño ---------- */
.vgrid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 84px); align-items: center; }
.vcol { min-width: 0; }
.stage--sm { position: relative; display: block; min-height: 400px; margin-top: 28px; }
.stage--sm .phone { width: 176px; margin-left: 28px; transform: rotate(7deg); }
.stage--sm .stone { inset: 8% auto -6% -4%; width: 330px; max-width: 90%; }
.vsteps { display: grid; gap: 18px; }
.vstep2 { position: relative; display: grid; grid-template-columns: 32px 66px minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px 28px; background: rgba(21,21,20,.82); border: 1px solid #302f2c; border-radius: 24px; transition: transform .25s var(--ease), border-color .25s, background .25s; }
.vstep2:hover { transform: translateX(6px); border-color: #55524b; background: rgba(28,28,26,.92); }
.vstep2:not(:last-child)::after { content: ""; position: absolute; left: 44px; bottom: -19px; height: 18px; border-left: 1.5px dotted #6a6a66; }
.vnum2 { width: 30px; height: 30px; border-radius: 50%; background: #e9b78e; color: #111; font-weight: 700; font-size: .84rem; display: grid; place-items: center; }
.vstep2 .vico { width: 64px; height: 64px; margin: 0; }
.vstep2 b { display: block; font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em; }
.vstep2 p { margin-top: 4px; font-size: .9rem; color: #bdbab2; line-height: 1.45; max-width: none; }
.vside .micro { margin-top: 18px; }
@media (max-width: 960px) { .vgrid { grid-template-columns: 1fr; } .stage--sm { min-height: 380px; } }
@media (max-width: 520px) { .vstep2 { grid-template-columns: 28px 52px minmax(0, 1fr); gap: 12px; padding: 16px 16px; } .vstep2 .vico { width: 52px; height: 52px; } .vstep2:not(:last-child)::after { left: 30px; } }

/* ---------- Páginas de solución: simples y visuales ---------- */
.vvis { position: relative; border-radius: 28px; min-height: 430px; padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; justify-content: center; gap: 14px; overflow: hidden; box-shadow: var(--shadow-lg); }
.vvis--0 { background: linear-gradient(135deg, #efe3d6, #d9c3ad); } .vvis--1 { background: linear-gradient(135deg, #e3ebf0, #bfd2df); }
.vvis--2 { background: linear-gradient(135deg, #f1e4db, #d8bda8); } .vvis--3 { background: linear-gradient(135deg, #dfe7ef, #b2c1d1); } .vvis--4 { background: linear-gradient(135deg, #ebe9e3, #d2cec4); }
.vvis::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 25% 15%, rgba(255,255,255,.55), transparent 60%); pointer-events: none; }
.vvis__icon { position: absolute; right: -24px; top: -24px; opacity: .15; z-index: 0; } .vvis__icon .ic { width: 240px; height: 240px; stroke-width: .7; color: #111; }
.vbub { position: relative; z-index: 1; max-width: 88%; background: rgba(255,255,255,.96); border-radius: 18px; padding: 14px 18px; font-size: .9rem; line-height: 1.4; box-shadow: var(--shadow); }
.vbub small { display: block; font-size: .66rem; color: var(--muted); margin-bottom: 4px; }
.vbub--a { align-self: flex-end; background: var(--ink); color: #fff; } .vbub--a small { color: #a9a9a5; }
.vbub--ok { display: flex; gap: 14px; align-items: center; max-width: 92%; }
.vbub--ok b { display: block; font-size: .92rem; } .vbub--ok span:not(.tint):not(.tick) { font-size: .78rem; color: var(--text-2); display: block; }
.vbub--ok .tint { width: 40px; height: 40px; border-radius: 12px; }
.tick { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--c-green); color: #fff; display: grid; place-items: center; flex: none; } .tick .ic { width: 14px; height: 14px; stroke-width: 2.4; }
.bgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bcard { padding: 26px 22px; } .bcard .tint { width: 54px; height: 54px; border-radius: 16px; margin-bottom: 18px; } .bcard .tint .ic { width: 24px; height: 24px; }
.bcard h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 6px; line-height: 1.25; } .bcard p { font-size: .86rem; color: var(--text-2); line-height: 1.5; }
.s3grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: s3; }
.s3 { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px 26px; box-shadow: var(--shadow); }
.s3__n { position: absolute; top: 18px; right: 20px; width: 28px; height: 28px; border-radius: 50%; background: #e9b78e; color: #111; font-weight: 700; font-size: .8rem; display: grid; place-items: center; }
.s3 .tint { width: 56px; height: 56px; border-radius: 18px; margin-bottom: 18px; } .s3 .tint .ic { width: 26px; height: 26px; }
.s3 b { display: block; font-size: 1.05rem; font-weight: 600; margin-bottom: 4px; } .s3 p { font-size: .88rem; color: var(--text-2); }
.plist { display: grid; align-content: start; }
.plist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.plist li:first-child { border-top: 1px solid var(--line); } .plist .ic { width: 16px; height: 16px; margin-top: 3px; stroke-width: 2; }
.plist b { display: block; font-size: .96rem; font-weight: 600; } .plist span { font-size: .86rem; color: var(--text-2); }
@media (max-width: 1000px) { .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s3grid { grid-template-columns: 1fr; } .vvis { min-height: 360px; } }
@media (max-width: 560px) { .bgrid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) { .bcard, .s3 { transition: transform .25s var(--ease), box-shadow .25s var(--ease); } }
@media (hover: hover) { .bcard:hover, .s3:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } }

@media (max-width: 1100px) { .nav__links { align-items: stretch; } .nav__links > li > a { display: block; } }

/* ==========================================================================
   v5 · ilustraciones por especialidad, demo interactiva del agente y widget LEIB AI
   ========================================================================== */

/* ---------- Ilustraciones ---------- */
.timg { padding: 0; }
.timg .art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.timg::after { display: none; }
.vvis { justify-content: flex-start; padding-bottom: clamp(190px, 20vw, 250px); }
.vvis::after { display: none; }
.vvis__art { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(190px, 20vw, 250px); z-index: 0; }
.vvis__art .art { width: 100%; height: 100%; display: block; }
.vvis .vbub { z-index: 2; }
.vvis__icon { display: none; }

/* ---------- Demo del agente (móvil) ---------- */
.vside { display: grid; align-content: center; min-width: 0; }
.vsteps { transition: opacity .25s ease, transform .25s ease; }
.vsteps.is-out { opacity: 0; transform: translateY(14px); }
.vslot { display: grid; place-items: center; min-height: 680px; position: relative; }
.stage--sm.is-empty { display: none; }
.vvoice { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; height: 100%; }
.vvoice[hidden], .vchat[hidden] { display: none !important; }
.phone.is-chat { width: min(310px, 86vw); aspect-ratio: 9 / 19; transform: none; margin: 0; z-index: 3; }
.phone.is-chat .phone__screen { background: #f7f4ee; color: var(--ink); padding: 0; display: block; }
.vchat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.vchat__top { display: flex; align-items: center; gap: 10px; padding: 26px 14px 10px; border-bottom: 1px solid var(--line); }
.vchat__top b { display: block; font-size: .8rem; } .vchat__top small { font-size: .62rem; color: var(--text-2); }
.vchat__av { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #f6f1e5, #cdbf9f); display: flex; align-items: center; justify-content: center; gap: 2px; flex: none; }
.vchat__av i { width: 2px; height: 10px; background: #6b6250; border-radius: 2px; }
.vchat__x { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 1rem; line-height: 1; }
.vchat__x:hover { background: var(--ink); color: #fff; }
.vchat__log { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; }
.vm { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: .78rem; line-height: 1.42; word-wrap: break-word; }
.vm--a { background: #fff; border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.vm--u { background: var(--ink); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.vm--t { display: flex; gap: 4px; padding: 12px 14px; }
.vm--t i { width: 6px; height: 6px; border-radius: 50%; background: #9a968c; animation: aDots 1s ease-in-out infinite; }
.vm--t i:nth-child(2) { animation-delay: .15s; } .vm--t i:nth-child(3) { animation-delay: .3s; }
.vact { align-self: flex-start; max-width: 94%; display: grid; gap: 3px; font-family: ui-monospace, Consolas, monospace; font-size: .6rem; line-height: 1.35; color: #3f6a4b; background: rgba(47,143,78,.08); border: 1px solid rgba(47,143,78,.22); border-radius: 10px; padding: 7px 9px; }
.vact span.no { color: #a8483b; }
.vact span.neutral { color: var(--text-2); }
.vchat__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 4px; max-height: 98px; overflow-y: auto; }
.vchip { border: 1px solid #d9d5ca; background: #fff; border-radius: 999px; padding: 6px 11px; font-size: .68rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.vchip:hover, .vchip:focus-visible { background: var(--ink); color: #fff; border-color: var(--ink); }
.vchat__form { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--line); }
.vchat__form input { flex: 1; min-width: 0; min-height: 36px; border: 1px solid #d9d5ca; border-radius: 999px; padding: 0 13px; font-size: .78rem; background: #fff; }
.vchat__form input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.vchat__form button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.vchat__form button[disabled], .vchat__form input[disabled] { opacity: .55; cursor: not-allowed; }
.vchat__form .ic { width: 16px; height: 16px; }
.vchat__note { text-align: center; font-size: .56rem; color: var(--muted); padding: 0 12px 16px; }
.dark--voice.is-demo .vcol .stage--sm { display: none; }
@media (max-width: 960px) { .vslot { min-height: 640px; } }
@keyframes aDots { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.vchat { text-align: left; }
.vchat__chips { max-height: 132px; }

/* ==========================================================================
   v6 · móvil de formato estándar, aviso centrado e integración para clínicas
   ========================================================================== */
.phone { aspect-ratio: 9 / 18; width: clamp(236px, 23vw, 296px); border-radius: 40px; transform: rotate(5deg); }
.phone__screen { border-radius: 31px; }
.stage--sm .phone { width: 188px; }
.phone.is-chat { aspect-ratio: 9 / 18.5; height: min(640px, calc(100vh - 150px)); min-height: 460px; width: auto; max-width: 88vw; }
.phone.is-chat .phone__screen { border-radius: 31px; }
.vslot { min-height: 0; }
.dark--noshow .phone__screen { display: flex; flex-direction: column; align-items: center; padding: 26px 14px 24px; }
.dark--noshow .notif { position: relative; left: auto; right: auto; bottom: auto; width: 100%; margin: auto 0; padding: 12px; border-radius: 16px; }
.dark--noshow .notif__head { font-size: 9.5px; margin-bottom: 6px; }
.dark--noshow .notif p { font-size: 11.5px; }
.dark--noshow .notif__btns { margin-top: 10px; }
.dark--noshow .notif__btns span { font-size: 10px; padding: 7px 4px; }

.idhead { max-width: 760px; margin-bottom: clamp(26px, 3vw, 40px); }
.iflow { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr); align-items: stretch; gap: 8px; margin-bottom: 18px; }
.iflow .arrow { align-self: center; }
.inode { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: grid; gap: 6px; align-content: start; box-shadow: var(--shadow); }
.inode .tint { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 4px; } .inode .tint .ic { width: 18px; height: 18px; }
.inode b { font-size: 1rem; font-weight: 600; } .inode p { font-size: .84rem; color: var(--text-2); line-height: 1.5; }
.inode--core { background: var(--ink); color: #fff; border-color: var(--ink); text-align: center; align-content: center; }
.inode--core p { color: #cfcfcf; } .inode__brand { font-size: 1.5rem !important; letter-spacing: .14em; }
.icards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.icard { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.icard .tint { width: 38px; height: 38px; border-radius: 11px; } .icard .tint .ic { width: 18px; height: 18px; }
.icard h3 { font-size: 1rem; font-weight: 600; } .icard p { font-size: .84rem; color: var(--text-2); line-height: 1.5; }
.ineed { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); margin-top: 18px; padding: clamp(20px, 3vw, 32px); border-radius: 20px; background: var(--bg-2, #f5f4f0); border: 1px solid var(--line); }
.ineed h3 { font-size: 1rem; font-weight: 600; margin-bottom: 10px; }
.ineed ul { display: grid; gap: 8px; } .ineed li { font-size: .88rem; color: var(--text-2); padding-left: 18px; position: relative; }
.ineed li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.ineed p { font-size: .88rem; color: var(--text-2); line-height: 1.55; margin-bottom: 10px; }
@media (max-width: 1000px) { .icards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .iflow { grid-template-columns: 1fr; } .iflow .arrow { height: 26px; } .iflow .arrow svg { transform: rotate(90deg); width: 40px; margin: 0 auto; } .ineed { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .icards { grid-template-columns: 1fr; } }
.dark--noshow .notif { position: absolute; left: 12px; right: 12px; width: auto; top: 50%; margin: -52px 0 0; }

/* guía de integración para clínicas */
.s--guide { padding-top: clamp(40px, 5vw, 70px); padding-bottom: clamp(60px, 7vw, 100px); }
.s--guide .crumbs { margin-bottom: 18px; }
.s--guide .iflow { margin-top: 8px; }
.gh { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 600; letter-spacing: -.01em; margin: clamp(34px, 4vw, 52px) 0 16px; }
.icards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.icards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.icard h3 { margin-top: 2px; }
.icard--no { background: var(--bg-2, #f5f4f0); } .icard--yes { background: var(--ink); color: #fff; border-color: var(--ink); } .icard--yes li { color: #e4e4e4; }
.ticks { display: grid; gap: 9px; margin-top: 4px; } .ticks li { font-size: .9rem; line-height: 1.5; padding-left: 22px; position: relative; color: var(--text-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 12px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) scale(.9); opacity: .7; }
.istep { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .9rem; }
.s--guide .article-end { margin-top: clamp(34px, 4vw, 52px); }
@media (max-width: 1000px) { .icards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .icards--2, .icards--4 { grid-template-columns: 1fr; } }
.s--guide { padding-bottom: calc(var(--eh, 60px) + clamp(40px, 5vw, 70px)); }
.vsteps[hidden], .vslot[hidden] { display: none !important; }

/* ==========================================================================
   v7 · hero: tarjetas negras, eyebrow azul oscuro y aparición con el scroll
   ========================================================================== */
.hero .eyebrow { font-size: clamp(14px, 1.25vw, 17px); letter-spacing: .12em; font-weight: 600; color: #11306b; margin-bottom: 24px; }
.chips .chip { background: #0a0a0a; color: #fff; border-color: #0a0a0a; box-shadow: 0 18px 40px -18px rgba(0,0,0,.55); }
.chips .chip small { color: #a9a9a5; }
.chips .chip--ai small { color: #8fb0f2; }
.chips .chip--ok span, .chips .chip--ok .sm { color: #c9c9c5; }
.chips .chip--ok .tint { background: rgba(255,255,255,.12); color: #fff; }
.chips .mini-wave i { background: #8fb0f2; }
.hero__run { display: none; }
.hero-pin .hero__run { display: block; height: var(--run, 90vh); }
.hero-pin .hero__in { position: sticky; top: var(--pin-top, 90px); }
.hero-pin .chip { will-change: opacity, transform; }

/* ==========================================================================
   v8 · fila de capacidades del hero: centrada, más grande, con flotación y brillo suaves
   ========================================================================== */
.hero__caps { margin-top: clamp(40px, 5vw, 68px); }
.hero__caps .cap-row { justify-content: center; gap: 18px clamp(28px, 4vw, 64px); }
.hero__caps .cap { font-size: clamp(.98rem, 1.35vw, 1.2rem); font-weight: 700; color: var(--ink); gap: 14px; letter-spacing: -.005em; }
.hero__caps .cap .ring { width: clamp(48px, 4.2vw, 58px); height: clamp(48px, 4.2vw, 58px); background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 10px 24px -12px rgba(0,0,0,.55); }
.hero__caps .cap .ring .ic { width: 24px; height: 24px; stroke: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .hero__caps .cap { animation: capFloat 6s ease-in-out infinite; }
  .hero__caps .cap:nth-child(2) { animation-delay: -1.5s; } .hero__caps .cap:nth-child(3) { animation-delay: -3s; } .hero__caps .cap:nth-child(4) { animation-delay: -4.5s; }
  .hero__caps .cap .ring { animation: capGlow 4.8s ease-in-out infinite; }
  .hero__caps .cap:nth-child(2) .ring { animation-delay: -1.2s; } .hero__caps .cap:nth-child(3) .ring { animation-delay: -2.4s; } .hero__caps .cap:nth-child(4) .ring { animation-delay: -3.6s; }
}
@keyframes capFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes capGlow { 0%, 100% { box-shadow: 0 10px 24px -12px rgba(0,0,0,.55), 0 0 0 0 rgba(10,10,10,0); } 50% { box-shadow: 0 10px 24px -12px rgba(0,0,0,.55), 0 0 0 7px rgba(10,10,10,.09), 0 0 22px 2px rgba(10,10,10,.16); } }
.hero__caps .cap-row { flex-wrap: nowrap; gap: 18px clamp(20px, 2.6vw, 40px); }
.hero__caps .cap { font-size: clamp(.92rem, 1.08vw, 1.05rem); gap: 12px; white-space: nowrap; }
.hero__caps .cap .ring { width: clamp(46px, 3.8vw, 54px); height: clamp(46px, 3.8vw, 54px); flex: none; }
@media (max-width: 1100px) { .hero__caps .cap-row { flex-wrap: wrap; } .hero__caps .cap { white-space: normal; } }
@media (max-width: 700px) { .hero__caps .cap-row { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; width: max-content; max-width: 100%; margin: 0 auto; gap: 16px; } .hero__caps .cap { white-space: normal; } }

/* v8b · latido y flotación (translate/scale no chocan con el transform de la aparición por scroll) */
@media (prefers-reduced-motion: no-preference) {
  .hero__caps .cap { animation: capFloat 5s ease-in-out infinite; }
  .hero__caps .cap .ring { animation: capGlow 2.8s ease-in-out infinite, capBeat 2.8s ease-in-out infinite; }
  .hero__caps .cap .cap__t { display: inline-block; transform-origin: left center; animation: capBeat 2.8s ease-in-out infinite; }
  .hero__caps .cap:nth-child(2), .hero__caps .cap:nth-child(2) .ring, .hero__caps .cap:nth-child(2) .cap__t { animation-delay: -.7s; }
  .hero__caps .cap:nth-child(3), .hero__caps .cap:nth-child(3) .ring, .hero__caps .cap:nth-child(3) .cap__t { animation-delay: -1.4s; }
  .hero__caps .cap:nth-child(4), .hero__caps .cap:nth-child(4) .ring, .hero__caps .cap:nth-child(4) .cap__t { animation-delay: -2.1s; }
  .hero__caps .cap:nth-child(2) .ring { animation-delay: -.7s, -.7s; }
}
@keyframes capFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes capBeat { 0%, 100% { scale: 1; } 14% { scale: 1.09; } 28% { scale: 1; } 42% { scale: 1.06; } 60% { scale: 1; } }
@keyframes capGlow { 0%, 100% { box-shadow: 0 10px 24px -12px rgba(0,0,0,.55), 0 0 0 0 rgba(10,10,10,0); } 14% { box-shadow: 0 10px 24px -12px rgba(0,0,0,.55), 0 0 0 9px rgba(10,10,10,.1), 0 0 26px 4px rgba(10,10,10,.22); } 42% { box-shadow: 0 10px 24px -12px rgba(0,0,0,.55), 0 0 0 6px rgba(10,10,10,.07), 0 0 18px 2px rgba(10,10,10,.14); } }

/* v8c · capacidades del hero casi al doble de tamaño, en cuatro columnas centradas */
.hero__caps .cap-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px clamp(16px, 2.4vw, 40px); justify-content: stretch; width: 100%; margin: 0; }
.hero__caps .cap { flex-direction: column; text-align: center; gap: 16px; font-size: clamp(1.1rem, 1.75vw, 1.55rem); white-space: normal; line-height: 1.25; }
.hero__caps .cap .ring { width: clamp(72px, 6.4vw, 92px); height: clamp(72px, 6.4vw, 92px); }
.hero__caps .cap .ring .ic { width: clamp(30px, 2.8vw, 40px); height: clamp(30px, 2.8vw, 40px); }
.hero__caps .cap .cap__t { transform-origin: center; }
@media (max-width: 760px) { .hero__caps .cap-row { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .hero__caps .cap { font-size: 1rem; } }

/* v9 · retención del scroll en el hero: las tarjetas aparecen por pasos */
.hero-pin .hero__in { position: static; }
.hero-pin .hero__run, .hero__run { display: none; }
.hero-lock .chip, .hero-lock .cap { opacity: 0; transform: translateY(44px) scale(.94); transition: opacity .7s ease, transform .85s cubic-bezier(.2, .8, .2, 1); }
.hero-lock .chip.is-in, .hero-lock .cap.is-in { opacity: 1; transform: none; }
/* capacidades: algo más pequeñas */
.hero__caps .cap { font-size: clamp(.95rem, 1.25vw, 1.1rem); gap: 12px; }
.hero__caps .cap .ring { width: clamp(54px, 4.6vw, 66px); height: clamp(54px, 4.6vw, 66px); }
.hero__caps .cap .ring .ic { width: clamp(22px, 2vw, 28px); height: clamp(22px, 2vw, 28px); }

/* v10 · mientras se muestran las tarjetas, la página no se mueve en absoluto */
html { scrollbar-gutter: stable; }
html.hero-locked { overflow: hidden; }


/* v12 · hero algo más grande (copy y vídeo) */
.hero .h1 { font-size: clamp(2.5rem, 4.8vw, 4.3rem); }
.hero .lead { font-size: clamp(1.05rem, 1.3vw, 1.22rem); max-width: 50ch; }
.hero .btn { padding: 16px 28px; font-size: 1rem; }
.hero .play-link { font-size: 1rem; }
@media (min-width: 961px) { .hero__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 3.4vw, 56px); } }

/* v13 · fila de capacidades separada de la parte superior del hero */
.hero__caps { margin-top: clamp(72px, 9vw, 120px); }

/* v14 · copy del hero más pequeño */
.hero .eyebrow { font-size: clamp(11.5px, .95vw, 13.5px); margin-bottom: 18px; }
.hero .h1 { font-size: clamp(2rem, 3.7vw, 3.3rem); line-height: 1.06; }
.hero .lead { font-size: clamp(.92rem, 1.05vw, 1.02rem); margin-top: 18px; max-width: 50ch; }
.hero .btn { padding: 13px 24px; font-size: .92rem; }
.hero .play-link { font-size: .92rem; }
.hero__actions { margin-top: 24px; }

/* v15 · más separación vertical entre el hero y la fila de capacidades */
.hero__caps { margin-top: clamp(120px, 14vw, 200px); }

/* ==========================================================================
   v16 · fondo del hero: materia blanca densa y cromática, con profundidad hacia dentro
   ========================================================================== */
.hero { isolation: isolate; background: radial-gradient(130% 95% at 50% 38%, #ffffff 0%, #f7f6f2 52%, #e8e5de 100%); }
.hero::before { content: ""; position: absolute; inset: -12%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(34% 44% at 20% 32%, rgba(255,255,255,1) 0, rgba(255,255,255,0) 72%),
    radial-gradient(30% 38% at 80% 22%, rgba(196,216,255,.55) 0, rgba(196,216,255,0) 72%),
    radial-gradient(28% 36% at 70% 80%, rgba(255,205,230,.42) 0, rgba(255,205,230,0) 72%),
    radial-gradient(30% 34% at 28% 84%, rgba(200,244,226,.5) 0, rgba(200,244,226,0) 72%),
    radial-gradient(24% 28% at 50% 52%, rgba(226,214,255,.5) 0, rgba(226,214,255,0) 72%);
  filter: blur(34px); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .4  0 0 0 0 .36  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse 75% 70% at 50% 42%, rgba(255,255,255,0) 52%, rgba(120,112,98,.07) 100%);
  box-shadow: inset 0 22px 60px -34px rgba(90,84,70,.12), inset 0 -26px 60px -40px rgba(90,84,70,.08);
  opacity: 1; }
.hero__in { position: relative; z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: heroMatter 28s ease-in-out infinite alternate; }
}
@keyframes heroMatter {
  0%   { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
  50%  { transform: translate3d(2%, 2%, 0) scale(1.07); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.03) rotate(2deg); }
}

/* ==========================================================================
   v17 · tarjetas de tipo de clínica en negro, con su foto; foto propia en cada página de solución
   ========================================================================== */
.tcard { background: #0a0a0a; color: #fff; border-color: #0a0a0a; padding: 12px 12px 18px; gap: 14px; box-shadow: 0 22px 44px -26px rgba(0,0,0,.6); }
.tcard h3 { color: #fff; padding: 0 6px; min-height: 2.6em; }
.tcard h3 .ic { color: #fff; }
.tcard li { color: #d4d4d0; padding: 0 6px; }
.tcard li .ic { color: #fff; }
.tcard .tlink { color: #fff; padding: 0 6px; margin-top: auto; border-bottom-color: rgba(255,255,255,.4); }
.timg { height: 168px; border-radius: 12px; background: #1b1b1b; }
.timg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
@media (hover: hover) { .tcard:hover { box-shadow: 0 30px 56px -26px rgba(0,0,0,.7); } .tcard:hover .timg img { transform: scale(1.05); } }
.vvis { padding-bottom: clamp(22px, 3vw, 34px); justify-content: flex-end; background: #1b1b1b; }
.vvis__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; }
.vvis::after { display: block; content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.42) 100%); z-index: 1; pointer-events: none; }
.vvis .vbub { z-index: 2; }
/* esfera un poco más grande */
#leib-ai-root { width: 164px; height: 164px; }
#lai-orb { width: 164px; height: 164px; }
#leib-ai-root:not(.lai-no-orb) #lai-trigger { bottom: 62px; }
@media (max-width: 500px) { #leib-ai-root { width: 124px; height: 124px; } #lai-orb { width: 124px; height: 124px; } #leib-ai-root:not(.lai-no-orb) #lai-trigger { bottom: 42px; } }

/* v18 · tarjetas de integración (y de la guía de integración) en negro */
.icard, .ineed, .inode { background: #0a0a0a; color: #fff; border-color: #0a0a0a; box-shadow: 0 22px 44px -26px rgba(0,0,0,.6); }
.icard h3, .ineed h3, .inode b { color: #fff; }
.icard p, .inode p, .ineed p, .ineed li, .ticks li { color: #cfcfcb; }
.ineed li::before { background: #fff; }
.icard .tint, .inode .tint { background: rgba(255,255,255,.12); }
.icard .tint .ic, .inode .tint .ic { color: #fff; }
.icard--no { background: #161616; border-color: #161616; }
.icard--yes { background: #0a0a0a; }
.inode--core { background: #1d1d1d; border-color: #2c2c2c; }
.ineed .link { color: #fff; border-bottom-color: rgba(255,255,255,.45); }
.istep { background: #fff; color: #0a0a0a; }
.ineed { background: #111; border-color: #111; }
.inode--core { background: #0a0a0a; border-color: #0a0a0a; }

/* v19 · fondo vivo del hero: cristal líquido blanco (canvas) */
.hero { background: linear-gradient(115deg, #fbf3f0 0%, #f6f6f5 38%, #ffffff 72%); }
.hero::before { display: none; }
.hero::after { background: radial-gradient(ellipse 80% 75% at 55% 45%, rgba(255,255,255,0) 60%, rgba(120,112,98,.05) 100%); box-shadow: none; }
.hero__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }

/* ==========================================================================
   v20 · cards con grosor (efecto losa), flujo de integración en blanco, hero desplazado a la izquierda
   ========================================================================== */
:root {
  --slab-light: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 0 rgba(20,20,20,.09), 0 5px 0 -1px rgba(20,20,20,.045), 0 18px 30px -16px rgba(20,20,20,.32);
  --slab-dark: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 0 #333, 0 6px 0 -1px #1c1c1c, 0 22px 38px -16px rgba(0,0,0,.62);
}
.card, .bcard, .ucase, .ublock, .s3, .vbub, .vcard, .res-card, .box, .inode, .done, .field-card { box-shadow: var(--slab-light); }
.tcard, .icard, .ineed, .chips .chip, .dcard, .metric { box-shadow: var(--slab-dark); }
.dark .card, .dark .vbub, .dark .done { box-shadow: var(--slab-light); }
@media (hover: hover) {
  .tcard:hover, .icard:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 0 #3a3a3a, 0 6px 0 -1px #1c1c1c, 0 30px 46px -16px rgba(0,0,0,.7); }
  .card:hover, .bcard:hover, .ucase:hover, .res-card:hover { transform: translateY(-3px); }
}
.card, .bcard, .ucase, .tcard, .icard, .inode, .res-card { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.hero-lock .chips .chip { transition: opacity .7s ease, transform .85s cubic-bezier(.2,.8,.2,1); }

/* flujo «paciente → LEIB → agenda»: tarjetas blancas */
.inode, .inode--core { background: #fff; color: var(--ink); border-color: var(--line); }
.inode b, .inode--core b { color: var(--ink); }
.inode p, .inode--core p { color: var(--text-2); }
.inode .tint.t-blue { background: var(--t-blue); } .inode .tint.t-orange { background: var(--t-orange); }
.inode .tint .ic { color: inherit; }
.inode .tint.t-blue .ic { color: var(--c-blue); } .inode .tint.t-orange .ic { color: var(--c-orange); }

/* hero: vídeo y tarjetas un poco más cerca del copy, fuera de la esfera */
@media (min-width: 961px) { .hero__side { margin-left: calc(-1 * clamp(14px, 2.8vw, 42px)); margin-right: clamp(14px, 2.8vw, 42px); } }

/* ==========================================================================
   v21 · hero: flujo «solicitud → IA actuando → resultado» en tres tarjetas negras
   ========================================================================== */
.chips { grid-template-columns: 1fr !important; gap: 30px; }
.chips .chip { position: relative; margin-left: 0 !important; grid-column: auto !important; padding: 14px 18px; font-size: .86rem; line-height: 1.4; }
.chips .chip small { font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px; }
.chips .chip--ai::before, .chips .chip--ok::before { content: "↓"; position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-size: 18px; line-height: 1; color: var(--ink); }
.chip--req { font-size: .95rem; font-weight: 500; }
.chip--ai { display: grid; gap: 4px; }
.chip--ai b { font-size: 1.02rem; font-weight: 600; color: #fff; }
.ai-status { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: #aebff0; }
.ai-status .spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(143,176,242,.35); border-top-color: #8fb0f2; display: inline-block; }
.dots { display: inline-flex; gap: 3px; margin-left: 1px; font-style: normal; } .dots i { width: 3px; height: 3px; border-radius: 50%; background: #aebff0; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .ai-status .spin { animation: aiSpin .9s linear infinite; }
  .dots i { animation: aDots 1.1s ease-in-out infinite; } .dots i:nth-child(2) { animation-delay: .18s; } .dots i:nth-child(3) { animation-delay: .36s; }
}
@keyframes aiSpin { to { transform: rotate(360deg); } }
.chips .chip--ok { display: grid; gap: 12px; padding: 16px 18px 15px; }
.okbadge { position: absolute; top: 12px; right: 14px; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: #8de0a8; border: 1px solid rgba(141,224,168,.4); border-radius: 999px; padding: 3px 9px; }
.ok-head { display: flex; align-items: center; gap: 14px; }
.ok-head .tint { width: 46px; height: 46px; border-radius: 13px; flex: none; background: rgba(255,255,255,.12); color: #fff; } .ok-head .tint .ic { width: 22px; height: 22px; color: #fff; }
.ok-head b { display: block; font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.ok-head .big { display: block; font-size: 1rem; color: #cfcfcb; margin-top: 2px; }
.ok-list { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.12); }
.ok-list li { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: #e4e4e0; }
.ok-list .tick { width: 18px; height: 18px; margin: 0; background: #2f8f4e; } .ok-list .tick .ic { width: 11px; height: 11px; }
@media (min-width: 961px) { .hero__side { margin-left: calc(-1 * clamp(14px, 5vw, 76px)); margin-right: clamp(14px, 5vw, 76px); } }

/* v22 · tarjetas del hero compactas: dos arriba y el resultado debajo (como antes), caben bajo el vídeo */
.chips { grid-template-columns: 1fr 1fr !important; gap: 24px 28px; }
.chips .chip { padding: 10px 13px; font-size: .74rem; line-height: 1.35; border-radius: 12px; }
.chips .chip small { font-size: .54rem; letter-spacing: .06em; margin-bottom: 3px; }
.chip--req { font-size: .8rem; font-weight: 500; }
.chips .chip--ai { gap: 2px; }
.chip--ai b { font-size: .88rem; }
.ai-status { font-size: .66rem; gap: 6px; }
.ai-status .spin { width: 10px; height: 10px; border-width: 1.5px; }
.dots i { width: 2.5px; height: 2.5px; }
.chips .chip--ok { grid-column: 1 / -1 !important; gap: 8px; padding: 11px 14px 10px; }
.okbadge { top: 9px; right: 11px; font-size: .5rem; padding: 2px 7px; }
.ok-head { gap: 11px; }
.ok-head .tint { width: 34px; height: 34px; border-radius: 10px; } .ok-head .tint .ic { width: 17px; height: 17px; }
.ok-head b { font-size: 1rem; }
.ok-head .big { font-size: .8rem; margin-top: 1px; }
.ok-list { padding-top: 8px; gap: 4px 14px; }
.ok-list li { font-size: .68rem; gap: 6px; }
.ok-list .tick { width: 15px; height: 15px; } .ok-list .tick .ic { width: 9px; height: 9px; }
/* flechas: → entre solicitud e IA, ↓ hacia el resultado */
.chips .chip--ai::before { top: 50%; left: -26px; transform: translateY(-50%); font-size: 15px; content: "→"; width: 24px; text-align: center; }
.chips .chip--ok::before { top: -21px; font-size: 15px; }

/* v23 · flujo paciente → LEIB → agenda en escalera, con pasos numerados */
@media (min-width: 861px) {
  .iflow { align-items: start; padding-bottom: 0; }
  .iflow .inode:nth-child(3) { margin-top: 46px; }
  .iflow .inode:nth-child(5) { margin-top: 92px; }
  .iflow .arrow { align-self: start; }
  .iflow .arrow:nth-child(2) { margin-top: 58px; }
  .iflow .arrow:nth-child(4) { margin-top: 104px; }
  .iflow .arrow svg { transform: rotate(18deg); }
}
.inode { position: relative; }
.inode__n { position: absolute; top: 14px; right: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.inode--core .inode__n { top: 14px; }
@media (min-width: 861px) { .iflow { margin-bottom: 34px; } }

/* ==========================================================================
   v24 · el fondo de cristal líquido es de toda la página (partes claras) y la tarjeta de resultado se estrecha
   ========================================================================== */
body { background: linear-gradient(115deg, #fbf3f0 0%, #f6f6f5 38%, #ffffff 72%) fixed; }
.bg-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: block; opacity: .75; }
.hero, .vhero, .s--alt, .faq-sec, .demo-sec, .s--light { background: transparent; }
.hero::after { display: none; }
/* tarjeta «Cita actualizada»: mismo ancho que la de solicitud, debajo de la IA */
.chips .chip--ok { grid-column: 2 !important; }
.chips .chip--ok::before { top: -21px; left: 50%; }
.ok-list { flex-direction: column; gap: 5px; }
.ok-head b { font-size: .95rem; }
.okbadge { top: 8px; right: 9px; }

/* v25 · tarjeta de resultado más pequeña y debajo de «Solicitud · Paciente» */
.chips .chip--ok { grid-column: 1 !important; padding: 8px 11px 8px; gap: 6px; }
.chips .chip--ok::before { content: "↙"; top: -22px; left: auto; right: -30px; transform: none; font-size: 15px; }
.ok-head { gap: 8px; }
.ok-head .tint { width: 26px; height: 26px; border-radius: 8px; } .ok-head .tint .ic { width: 14px; height: 14px; }
.ok-head b { font-size: .8rem; }
.ok-head .big { font-size: .68rem; margin-top: 0; }
.okbadge { font-size: .46rem; padding: 1px 6px; top: 7px; right: 8px; }
.ok-list { padding-top: 6px; gap: 3px; }
.ok-list li { font-size: .62rem; gap: 5px; }
.ok-list .tick { width: 13px; height: 13px; } .ok-list .tick .ic { width: 8px; height: 8px; }

/* v26 · FAQ: tarjetas negras y mucho más compactas */
.faq { gap: 8px; max-width: 760px; }
.faq details { background: #0a0a0a; color: #fff; border-color: #0a0a0a; border-radius: 12px; box-shadow: var(--slab-dark); }
.faq details:hover { border-color: #2a2a2a; }
.faq details[open] { box-shadow: var(--slab-dark); }
.faq summary { padding: 10px 40px 10px 16px; font-size: .8rem; font-weight: 500; min-height: 0; line-height: 1.35; }
.faq summary::after { right: 14px; top: 50%; transform: translateY(-52%); font-size: 1.05rem; color: #fff; }
.faq .answer { padding: 0 16px 13px; font-size: .76rem; color: #cfcfcb; line-height: 1.55; }

/* ==========================================================================
   v27 · integración: esfera de LEIB en el centro, tarjetas alrededor y líneas por las que sale la información
   ========================================================================== */
.idhead--c { max-width: 780px; margin: 0 auto clamp(18px, 2.5vw, 30px); text-align: center; }
.idhead--c .lead { margin-left: auto; margin-right: auto; }
.idhead--c .link { display: inline-flex; margin-top: 14px; }
.orbit { position: relative; width: 100%; max-width: 1200px; margin: 0 auto clamp(26px, 3vw, 40px); aspect-ratio: 1200 / 560; }
.orbit__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.orbit__line { fill: none; stroke: #c6c6c1; stroke-width: 1.3; }
.orbit__pulse { fill: none; stroke: #0a0a0a; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 91; stroke-dashoffset: 9; opacity: .92; }
@media (prefers-reduced-motion: no-preference) { .orbit__pulse { animation: orbitFlow 3.6s linear infinite; animation-delay: var(--pd, 0s); } }
@media (prefers-reduced-motion: reduce) { .orbit__pulse { display: none; } }
@keyframes orbitFlow { from { stroke-dashoffset: 9; } to { stroke-dashoffset: -100; } }
.orbit__core { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; }
.orbit__core canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 8px rgba(190,205,255,.6)); }
.orbit__card { position: absolute; width: 24%; z-index: 3; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; box-shadow: var(--slab-light); }
.orbit__card .tint { width: 40px; height: 40px; border-radius: 11px; flex: none; } .orbit__card .tint .ic { width: 19px; height: 19px; }
.orbit__card b { display: block; font-size: .92rem; font-weight: 600; line-height: 1.25; }
.orbit__card div > span { display: block; font-size: .78rem; color: var(--text-2); line-height: 1.35; margin-top: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .orbit__card { animation: capFloat 6s ease-in-out infinite; }
  .orbit__card:nth-of-type(2n) { animation-delay: -2s; } .orbit__card:nth-of-type(3n) { animation-delay: -4s; }
}
@media (max-width: 900px) {
  .orbit { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .orbit__lines { display: none; }
  .orbit__core { position: static; transform: none; grid-column: 1 / -1; margin: 0 auto; width: 240px; height: 240px; }
  .orbit__card { position: static; width: auto; }
}
@media (max-width: 520px) { .orbit { grid-template-columns: 1fr; } }
.idhead--c .lead { margin-top: 18px; }
.idhead--c .h2 { margin-bottom: 0; }

/* v28 · sección Integración compacta: se ve entera en una pantalla */
.s--integ { padding-top: clamp(24px, 3vw, 40px); }
.idhead--c { max-width: 940px; margin-bottom: 6px; }
.idhead--c .eyebrow { margin-bottom: 12px; }
.idhead--c .lead { margin-top: 12px; }
.orbit { aspect-ratio: 1200 / 330; margin-bottom: clamp(22px, 2.6vw, 34px); }
.orbit__core { width: 240px; height: 240px; }
.orbit__tag { position: absolute; left: 50%; top: 1%; transform: translateX(-50%); z-index: 3; font-size: .78rem; font-weight: 700; letter-spacing: .22em; color: var(--ink); }
.orbit__link { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 3; white-space: nowrap; }
.orbit__card { padding: 10px 14px; } .orbit__card .tint { width: 36px; height: 36px; }
@media (max-width: 900px) {
  .orbit__tag, .orbit__link { position: static; transform: none; grid-column: 1 / -1; text-align: center; justify-self: center; }
  .orbit__tag { order: -2; } .orbit__core { order: -1; width: 200px; height: 200px; }
  .orbit__link { order: 99; }
}
.idhead--c { max-width: 1060px; }
.idhead--c .lead { max-width: none; }
.s--integ .container { padding-top: 0; }
.orbit { aspect-ratio: 1200 / 300; margin-bottom: clamp(18px, 2.2vw, 28px); }
.idhead--c .h2 { line-height: 1.04; }

/* v29 · página «Sobre LEIB» */
.vhero__grid--one { grid-template-columns: minmax(0, 860px); }
.bgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.icard--step { align-content: start; }
@media (max-width: 900px) { .bgrid--3 { grid-template-columns: 1fr; } }

/* ===== v30: elección de horario tras enviar el formulario ===== */
.booking { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.22); }
.booking[hidden] { display: none; }
.booking__title { font-size: 1rem; margin: 0 0 4px; }
.booking__note { margin: 0 0 12px; font-size: .84rem; opacity: .8; }
.booking__days, .booking__slots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.booking__day, .booking__slot { font: inherit; font-size: .88rem; line-height: 1; padding: 10px 14px; min-height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.booking__day:hover, .booking__slot:hover { border-color: #fff; }
.booking__day.is-on, .booking__slot.is-on { background: #fff; color: var(--ink); border-color: #fff; font-weight: 600; }
.booking__day:focus-visible, .booking__slot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.booking__slots { max-height: 168px; overflow-y: auto; }
.booking__confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.booking__sel { margin: 0; font-weight: 600; }
.booking__msg { margin: 0 0 8px; font-size: .86rem; min-height: 1.2em; }
.booking__msg.is-err { color: #ffd1cc; }
.booking .btn { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .booking__day, .booking__slot { transition: none; } }

/* ===== v31: selector de fecha dentro del formulario ===== */
.slotpick { border: 1px solid var(--ink); border-radius: 10px; padding: 14px 16px; }
.slotpick[hidden] { display: none; }
.slotpick__title { margin: 0 0 2px; font-weight: 600; }
.slotpick__note { margin: 0 0 12px; font-size: .82rem; color: var(--text-2); }
.slotpick__row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.slotpick__row--slots { max-height: 150px; overflow-y: auto; }
.slotpick__btn { font: inherit; font-size: .86rem; line-height: 1; padding: 10px 14px; min-height: 40px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.slotpick__btn:hover { background: var(--soft); }
.slotpick__btn.is-on { background: var(--ink); color: #fff; font-weight: 600; }
.slotpick__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.slotpick__sel { margin: 0; font-size: .88rem; font-weight: 600; }

/* ===== v32: reserva simple (calendario + email) ===== */
.booker__h { margin: 0 0 12px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.booker__h b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: .8rem; }
.booker__h .opt { font-weight: 400; color: var(--text-2); }
.booker .slotpick { margin-bottom: 26px; }
.slotpick__sel.is-empty { font-weight: 500; text-transform: none; color: var(--text-2); }
.slotpick__sel.is-warn { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.is-done .booker { display: none; }

/* ===== v33: calendario de reservas (Calendly) incrustado ===== */
.cal-embed { margin-bottom: 18px; }
.cal-embed__frame { display: block; width: 100%; min-height: 720px; border: 1px solid var(--ink); border-radius: 12px; background: #fff; }
.cal-embed .small { margin: 10px 0 0; font-size: .8rem; color: var(--text-2); }
.alt-contact { margin-top: 18px; border-top: 1px solid var(--ink); padding-top: 14px; }
.alt-contact > summary { cursor: pointer; font-weight: 600; }
.alt-contact[open] > summary { margin-bottom: 14px; }
@media (max-width: 560px) { .cal-embed__frame { min-height: 820px; } }

/* ===== v35: reserva en una sola tarjeta compacta ===== */
.demo-sec { padding-top: calc(var(--eh) + 10px); padding-bottom: clamp(56px, 6vw, 84px); }
.form-card--c { max-width: 560px; padding: clamp(20px, 2.6vw, 30px); }
.cal-pick__eyebrow { margin: 0 0 6px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.cal-pick__eyebrow b { color: var(--ink); margin-right: 6px; }
.cal-pick__title { margin: 0 0 6px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.2; letter-spacing: -.01em; }
.cal-pick__sub { margin: 0 0 18px; font-size: .88rem; color: var(--text-2); }
.cal-pick__q { margin-bottom: 14px; }
.cal-pick__q > p { margin: 0 0 8px; font-size: .8rem; font-weight: 600; color: var(--text-2); }
.cal-pick__q.is-warn > p { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-btn { font: inherit; font-size: .84rem; line-height: 1; padding: 0 14px; min-height: 40px; border-radius: 10px; border: 1px solid var(--line, #d9d9d9); background: #fff; color: var(--ink); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.opt-btn:hover { border-color: var(--ink); }
.opt-btn.is-on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.opt-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cal-pick .btn { width: 100%; justify-content: center; margin-top: 4px; }
.cal-pick__hint { margin: 10px 0 0; font-size: .78rem; color: var(--text-2); text-align: center; }
.cal-pick__done { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 500; }
.cal-pick [hidden] { display: none; }
.alt-contact { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line, #e5e5e5); font-size: .84rem; }
.alt-contact > summary { cursor: pointer; font-weight: 500; color: var(--text-2); }
.alt-contact[open] > summary { margin-bottom: 12px; }
.cal-dialog { width: min(900px, 94vw); height: min(740px, 92vh); padding: 0; border: 0; border-radius: 14px; background: #fff; overflow: hidden; }
.cal-dialog[open] { display: block; }
.cal-dialog::backdrop { background: rgba(10, 10, 10, .55); }
.cal-dialog__frame { display: block; width: 100%; height: 100%; border: 0; }
.cal-dialog__close { position: absolute; top: 8px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(10,10,10,.8); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
@media (max-width: 560px) { .cal-dialog { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .opt-btn { transition: none; } }

/* ===== v36: nombre y email dentro de la tarjeta ===== */
.cal-pick__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 14px; }
.cal-pick__f { display: grid; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--text-2); }
.cal-pick__f .input { min-height: 42px; font-weight: 400; }
.cal-pick__f .input[aria-invalid="true"] { border: 2px solid var(--ink); padding: 9px 12px; }
.cal-pick__hint.is-warn { color: var(--ink); font-weight: 600; }
.cal-pick__legal { margin: 8px 0 0; font-size: .74rem; color: var(--text-2); text-align: center; }
@media (max-width: 520px) { .cal-pick__fields { grid-template-columns: 1fr; } }

/* ===== v37: contacto directo (WhatsApp, teléfono, email, Instagram) ===== */
.cal-pick__alt { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line, #e5e5e5); font-size: .82rem; color: var(--text-2); text-align: center; }
.cal-pick__alt a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 1001px) { .fgrid { grid-template-columns: 1.1fr repeat(5, minmax(0, 1fr)); gap: 28px 18px; } }

/* ===== v38: Integración en móvil: esfera al centro y tarjetas pequeñas a sus lados, sin solapes ===== */
@media (max-width: 900px) {
  .orbit { aspect-ratio: auto !important; height: auto; display: grid; grid-auto-flow: row dense;
           grid-template-columns: minmax(0, 1fr) clamp(92px, 26vw, 150px) minmax(0, 1fr); gap: 10px 8px; align-items: stretch; margin-bottom: 22px; }
  .orbit__tag { grid-column: 1 / -1; grid-row: 1; order: 0; justify-self: center; margin: 0 0 2px; }
  .orbit__core { grid-column: 2; grid-row: 2 / span 3; order: 0; align-self: center; justify-self: center;
                 width: clamp(92px, 26vw, 150px); height: clamp(92px, 26vw, 150px); margin: 0; }
  .orbit__card--l { grid-column: 1; } .orbit__card--r { grid-column: 3; }
  .orbit__card { position: static; width: auto; padding: 9px 10px; gap: 6px; flex-direction: column; align-items: flex-start; border-radius: 12px; }
  .orbit__card .tint { width: 28px; height: 28px; border-radius: 8px; } .orbit__card .tint .ic { width: 15px; height: 15px; }
  .orbit__card b { font-size: .76rem; line-height: 1.2; }
  .orbit__card div > span { font-size: .68rem; line-height: 1.3; margin-top: 2px; }
  .orbit__link { grid-column: 1 / -1; grid-row: 5; order: 0; margin-top: 6px; justify-self: center; }
}
@media (max-width: 520px) { .orbit__card div > span { display: none; } }

/* ===== v41: errores visibles en la tarjeta «Agendar demo» ===== */
.cal-pick__err { display: block; margin-top: 6px; color: #b3261e; font-size: .78rem; font-weight: 600; line-height: 1.3; text-align: left; }
.cal-pick__err::before { content: "! "; font-weight: 800; }
.cal-pick__err[hidden] { display: none; }
.cal-pick__q.is-error > p { color: #b3261e; }
.cal-pick__q.is-error .opt-btn { border-color: #b3261e; background: #fff5f4; }
.cal-pick__q.is-error .opt-btn.is-on { background: var(--ink); border-color: var(--ink); }
.cal-pick__f .input[aria-invalid="true"] { border: 2px solid #b3261e; background: #fff5f4; padding: 9px 12px; }
.cal-pick__f .input[aria-invalid="true"]:focus { outline-color: #b3261e; }
.cal-pick__summary { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: #fdecea; color: #8c1d18; font-size: .82rem; font-weight: 600; text-align: center; }
.cal-pick__summary[hidden] { display: none; }

/* ===== v43: contacto con iconos (pie y tarjeta de demo) ===== */
.fic { width: 18px; height: 18px; flex: none; }
.fcontact { display: grid; gap: 12px; }
.fcontact a { display: inline-flex; align-items: center; gap: 10px; min-height: 28px; }
.fcontact .fic { color: #fff; opacity: .9; }
.cal-pick__alt { text-align: center; }
.cal-pick__alt-t { margin: 0 0 10px; font-size: .82rem; color: var(--text-2); text-align: center; }
.cal-pick__alt-btns { display: flex; gap: 8px; }
.alt-btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 10px;
           border: 1px solid var(--line, #d9d9d9); border-radius: 10px; background: #fff; color: var(--ink); font-size: .84rem; font-weight: 600;
           text-decoration: none; white-space: nowrap; transition: border-color .15s, background-color .15s; }
.alt-btn:hover { border-color: var(--ink); background: var(--soft, #f5f4f0); }
.alt-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.alt-btn .fic { width: 18px; height: 18px; }
.ineed--one { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: reduce) { .alt-btn { transition: none; } }

/* ===== v44: logo real en la navegación + bloque «Cómo conectamos» discreto ===== */
.logo--img { display: inline-flex; align-items: center; line-height: 0; }
.logo--img img { display: block; height: 42px; width: auto; max-width: none; }
@media (max-width: 760px) { .logo--img img { height: 36px; } }
.ineed.ineed--one { max-width: 520px; margin: 14px auto 0; padding: 14px 20px; text-align: center; background: transparent; border: 1px solid var(--line, #e1e0dc); box-shadow: none; color: var(--text-2); }
.ineed.ineed--one h3 { margin: 0 0 4px; font-size: .84rem; font-weight: 600; color: var(--ink); }
.ineed.ineed--one p { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--text-2); }

/* ===== v45: líneas de la integración en móvil ===== */
.orbit__mlines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
@media (max-width: 900px) {
  .orbit { grid-template-columns: minmax(0, 1fr) clamp(76px, 22vw, 120px) minmax(0, 1fr); column-gap: clamp(18px, 6vw, 40px); }
  .orbit__core { width: clamp(76px, 22vw, 120px); height: clamp(76px, 22vw, 120px); }
}

/* ===== v46: escritorio: separación del título y la entradilla de Integración; «Soluciones adaptadas / a cada tipo de clínica.» en dos líneas ===== */
@media (min-width: 901px) {
  .s--integ .idhead--c .lead { margin-top: 28px; }
  .tipos__head .h2 .h2__l { display: block; white-space: nowrap; }
}
@media (min-width: 1181px) {
  .tipos__head { grid-template-columns: max-content minmax(0, 1fr); }
  .tipos__head .copy { grid-row: 1 / span 2; }
  .tipos__head .lead { grid-column: 2; grid-row: 1; align-self: end; }
  .tipos__head .tipos__all { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; }
}

/* ===== v47: teléfono opcional (llamada inmediata de la IA) ===== */
.cal-pick__f--full { grid-column: 1 / -1; }
.cal-pick__f i { font-style: normal; font-weight: 400; color: var(--text-2); }
.cal-pick__note { grid-column: 1 / -1; margin: -2px 0 0; font-size: .74rem; line-height: 1.4; color: var(--text-2); }
.cal-pick__call { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--soft, #f5f4f0); color: var(--ink); font-size: .82rem; font-weight: 600; text-align: center; }
.cal-pick__call[hidden] { display: none; }