/* Rodmann Labs — capa del rediseño 2026-11 (vidrio, blur, secciones redondeadas).
   Se carga después de rodmann-system.css y usa sus tokens V7.1. */

:root {
  --glass-light: rgba(250, 250, 245, .86);
  --glass-card: rgba(255, 255, 255, .62);
  --glass-dark: rgba(28, 38, 32, .55);
  --edge-light: rgba(16, 22, 19, .08);
  --edge-dark: rgba(244, 243, 235, .12);
  --r-section: 48px;
  --shell: min(1240px, 100% - 32px);
  --shadow-soft: 0 1px 0 rgba(255,255,255,.7) inset, 0 24px 60px -32px rgba(16, 22, 19, .28);
}

html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { background: var(--paper); color: var(--ink); }
.shell { width: var(--shell); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- navbar flotante de vidrio ---------- */
.nav-wrap { position: fixed; inset: 14px 0 auto; z-index: 50; pointer-events: none; }
.nav {
  pointer-events: auto;
  width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-md);
  min-height: 64px; padding: 8px 8px 8px 20px;
  background: var(--glass-light);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 40px -18px rgba(16, 22, 19, .45);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border-radius: var(--r-sm); }
.brand-r { width: 36px; height: auto; }
.brand-word { width: 92px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > a:not(.button) { padding: 10px 14px; border-radius: var(--r-pill); font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink); transition: background-color 180ms var(--ease); }
@media (hover: hover) { .nav-links > a:not(.button):hover { background: rgba(16, 22, 19, .06); } }
.nav-links > a[aria-current="page"] { background: rgba(16, 22, 19, .07); }
.nav .button { min-height: 48px; padding: 12px 22px; }
.mobile-nav { display: none; position: relative; }
.mobile-nav summary { list-style: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; background: var(--ink); color: var(--paper); }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav-menu {
  position: absolute; right: 0; top: calc(100% + 12px); min-width: 230px;
  display: grid; padding: 8px;
  background: rgba(250, 250, 245, .92);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--edge-light); border-radius: var(--r-card);
  box-shadow: 0 24px 60px -24px rgba(16, 22, 19, .4);
}
.mobile-nav-menu a { padding: 14px 16px; border-radius: var(--r-sm); text-decoration: none; font-weight: 600; }
@media (hover: hover) { .mobile-nav-menu a:hover { background: rgba(16, 22, 19, .06); } }

/* ---------- superficies oscuras con blur ---------- */
.dark-stage {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  background: var(--ink); color: var(--paper);
}
.hero-stage { border-radius: 0 0 var(--r-section) var(--r-section); }
.glow { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(70px); opacity: .5; }
.glow-a { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; left: -12vw; top: -8vw; background: radial-gradient(closest-side, #8FA33A, transparent); }
.glow-b { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; right: -8vw; top: 6vw; background: radial-gradient(closest-side, #5F7A2E, transparent); }
.glow-c { width: 60vw; height: 30vw; left: 20vw; bottom: -18vw; background: radial-gradient(closest-side, rgba(234, 254, 105, .55), transparent); opacity: .35; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4vw, 3vw, 0) scale(1.08); } }
.waves { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('/assets/wave-hero-original.svg') right center / cover no-repeat; opacity: .07; filter: invert(1); }
.grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(16, 22, 19, .65)); }

/* ---------- hero ---------- */
.hero {
  min-height: min(880px, 100svh);
  padding: 150px 0 96px;
  display: grid; place-items: center; text-align: center;
}
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--edge-dark); background: rgba(244, 243, 235, .05);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--muted-on-ink);
}
.chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(234, 254, 105, .18); }
.chip-light { border-color: var(--edge-light); background: var(--glass-card); color: var(--muted); }
.chip-light::before { background: var(--ink); box-shadow: 0 0 0 4px rgba(16, 22, 19, .08); }
.hero h1 {
  margin-top: var(--s-xl);
  max-width: 13ch;
  font-size: clamp(44px, 7.4vw, 108px); font-weight: 800; line-height: .98; letter-spacing: -.06em;
  text-wrap: balance;
}
.rotator { display: inline-grid; vertical-align: top; color: var(--lime); }
.rotator > span { grid-area: 1 / 1; opacity: 0; transform: translateY(.35em); filter: blur(4px); transition: opacity 600ms var(--ease), transform 600ms var(--ease), filter 600ms var(--ease); }
.rotator > span.on { opacity: 1; transform: none; filter: none; }
.hero-copy { margin-top: var(--s-lg); max-width: 620px; font-size: 20px; line-height: 1.55; color: var(--muted-on-ink); text-wrap: pretty; }
.hero-actions { margin-top: var(--s-2xl); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.button-glass { background: rgba(244, 243, 235, .06); color: var(--paper); border-color: rgba(244, 243, 235, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (hover: hover) { .button-glass:hover { background: rgba(244, 243, 235, .12); } }
.button .arrow { width: 16px; height: 16px; }
.hero-note { margin-top: var(--s-lg); color: var(--muted-on-ink); }

/* ---------- secciones claras ---------- */
.section { position: relative; padding: 112px 0; }
.section-head { max-width: 760px; margin-bottom: var(--s-2xl); }
.section-head.center { margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.section-head h2 { margin-top: var(--s-lg); font-size: clamp(34px, 4.6vw, 64px); font-weight: 800; line-height: 1.02; letter-spacing: -.05em; text-wrap: balance; }
.section-head p { margin-top: var(--s-lg); max-width: 620px; font-size: 18px; color: var(--muted); text-wrap: pretty; }
.mark { background: linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 92%, transparent 92%); padding-inline: 2px; }
.section-glow { position: absolute; z-index: -1; pointer-events: none; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(234, 254, 105, .55), transparent); filter: blur(40px); }
.section { isolation: isolate; overflow-x: hidden; overflow-x: clip; }
body { overflow-x: hidden; overflow-x: clip; }

/* tarjetas de vidrio claro */
.card {
  position: relative;
  background: var(--glass-card);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .8);
  outline: 1px solid var(--edge-light); outline-offset: -1px;
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
}

/* ---------- servicios ---------- */
.services { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.service { padding: 32px; display: flex; flex-direction: column; gap: 14px; min-height: 300px; }
.service.feature { grid-column: span 6; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: 40px; background: var(--ink); color: var(--paper); border-color: transparent; outline-color: transparent; overflow: hidden; isolation: isolate; }
.service.half { grid-column: span 3; }
.service.third { grid-column: span 2; }
.service h3 { font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
.service.feature h3 { font-size: clamp(32px, 3.4vw, 48px); font-weight: 800; letter-spacing: -.045em; }
.service p { color: var(--muted); text-wrap: pretty; }
.service.feature p { color: var(--muted-on-ink); font-size: 18px; max-width: 520px; }
.service .more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; width: fit-content; border-radius: var(--r-sm); }
@media (hover: hover) { .service .more:hover { text-decoration: underline; text-underline-offset: 4px; } }
.service-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.icon-dot { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--edge-light); }
.icon-dot svg { width: 22px; height: 22px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); font: 400 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tag-live { background: var(--lime); color: var(--ink); }
.tag-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.tag-soon { background: rgba(16, 22, 19, .06); color: var(--muted); border: 1px dashed rgba(16, 22, 19, .22); }
.feature .glow-in { position: absolute; z-index: -1; width: 520px; height: 520px; right: -140px; top: -180px; border-radius: 50%; background: radial-gradient(closest-side, rgba(143, 163, 58, .75), transparent); filter: blur(50px); pointer-events: none; }
.feature-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.feature-list { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 10px; }
.feature-list li { display: flex; gap: 12px; align-items: baseline; color: var(--paper); }
.feature-list li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); transform: translateY(-2px); }

/* mini escena de WhatsApp (muestra) */
.phone {
  position: relative; padding: 18px; border-radius: 28px;
  background: rgba(244, 243, 235, .06);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--edge-dark);
}
.phone-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 14px; border-bottom: 1px solid var(--edge-dark); margin-bottom: 14px; }
.phone-who { display: flex; align-items: center; gap: 10px; }
.phone-who img { width: 38px; height: 38px; padding: 7px; border-radius: 50%; background: var(--clay); }
.phone-who strong { display: block; font-size: 15px; line-height: 1.2; }
.phone-who small { color: var(--muted-on-ink); font-size: 12px; }
.phone-time { color: var(--muted-on-ink); }
.bubbles { display: grid; gap: 10px; }
.bubble { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.45; }
.bubble.in { justify-self: end; background: #fff; color: var(--ink); border-bottom-right-radius: 6px; }
.bubble.out { justify-self: start; background: var(--clay); color: var(--ink); border-bottom-left-radius: 6px; }
.bubble small { display: block; margin-top: 4px; font: 400 10.5px/1 var(--font-mono); letter-spacing: .04em; opacity: .6; }
.system-note { margin-top: 4px; padding: 12px 14px; border-radius: 16px; background: rgba(234, 254, 105, .12); border: 1px solid rgba(234, 254, 105, .35); font-size: 13.5px; color: var(--paper); }
.system-note strong { display: block; font: 400 11px/1.4 var(--font-mono); letter-spacing: .08em; color: var(--lime); margin-bottom: 2px; }
.sample-note { margin-top: 12px; text-align: center; color: var(--muted-on-ink); }

/* ---------- comparativa con deslizador ---------- */
.compare { position: relative; max-width: 1040px; margin-inline: auto; border-radius: 32px; overflow: hidden; overflow: clip; --pos: 50%; }
.compare-panel { padding: 44px 48px 52px; min-height: 440px; }
.compare-panel h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.compare-panel > p { margin-top: 6px; color: var(--muted); }
.compare-list { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--edge-light); padding-top: 24px; display: grid; gap: 18px; }
.compare-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; }
.compare-list svg { flex: none; width: 20px; height: 20px; margin-top: 3px; }
.panel-them { background: #E9E8DF; color: #3E4842; }
.panel-them .compare-list svg { color: #8A948D; }
.panel-us { background: var(--ink); color: var(--paper); }
.panel-us > p { color: var(--muted-on-ink); }
.panel-us .compare-list { border-color: var(--edge-dark); }
.panel-us .compare-list svg { color: var(--lime); }
.panel-us .us-brand { display: flex; align-items: center; gap: 10px; }
.panel-us .us-brand img { width: 34px; height: auto; }
.compare-js .panel-us { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); text-align: right; }
.compare-js .panel-us .compare-list li { flex-direction: row-reverse; }
.compare-js .panel-us .us-brand { justify-content: flex-end; }
.compare-handle { display: none; }
.compare-js .compare-handle { display: block; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--lime); transform: translateX(-1px); pointer-events: none; }
.compare-js .compare-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101613' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: 0 8px 24px -6px rgba(16, 22, 19, .5); }
.compare-range { display: none; }
.compare-js .compare-range { display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.compare-range:focus-visible ~ .compare-handle::after { outline: 3px solid var(--ink); outline-offset: 4px; }
.compare-hint { margin-top: 18px; text-align: center; color: var(--muted); }

/* ---------- proceso ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: paso; }
.step { padding: 32px; display: flex; flex-direction: column; gap: 12px; min-height: 260px; }
.step .num { font: 400 13px/1 var(--font-mono); letter-spacing: .08em; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--lime); margin-bottom: 18px; }
.step h3 { font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.step p { color: var(--muted); }

/* ---------- quién está detrás ---------- */
.about { display: grid; grid-template-columns: 360px 1fr; gap: 56px; align-items: center; padding: 40px; }
.about-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: var(--ink-2); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-photo .label { position: absolute; left: 14px; bottom: 14px; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(16, 22, 19, .55); color: var(--paper); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.about h2 { margin-top: var(--s-lg); font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; text-wrap: balance; }
.about p { margin-top: var(--s-lg); font-size: 18px; color: var(--muted); max-width: 600px; text-wrap: pretty; }
.about-sign { margin-top: var(--s-xl); display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.about-sign strong { font-size: 18px; }
.about-sign a { color: var(--muted); font-weight: 600; border-radius: var(--r-sm); }

/* ---------- cierre ---------- */
.closing { margin: 0 auto; width: var(--shell); border-radius: 40px; padding: 96px 40px; text-align: center; }
.closing h2 { margin: var(--s-lg) auto 0; max-width: 16ch; font-size: clamp(36px, 5.4vw, 76px); font-weight: 800; line-height: 1; letter-spacing: -.055em; text-wrap: balance; }
.closing p { margin: var(--s-lg) auto 0; max-width: 540px; font-size: 18px; color: var(--muted-on-ink); }
.closing .hero-actions { margin-top: var(--s-xl); }

/* ---------- pie ---------- */
.footer { margin-top: 112px; padding: 72px 0 40px; background: var(--ink); color: var(--paper); border-radius: var(--r-section) var(--r-section) 0 0; position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.footer-grid { display: grid; grid-template-columns: .9fr 1.6fr; gap: 16px; }
.foot-card { border-radius: 28px; padding: 36px; }
.foot-brand { border: 1px solid var(--edge-dark); background: rgba(244, 243, 235, .03); display: flex; flex-direction: column; gap: 18px; }
.foot-brand img { width: 150px; height: auto; }
.foot-brand p { color: var(--muted-on-ink); max-width: 320px; }
.foot-brand small { margin-top: auto; color: var(--muted-on-ink); }
.foot-links { background: var(--paper); color: var(--ink); display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.foot-links h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.foot-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-links a { color: var(--muted); text-decoration: none; border-radius: 6px; }
@media (hover: hover) { .foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } }
.foot-links li span { color: var(--muted); }
.legal { margin-top: 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted-on-ink); font-size: 14px; }

/* ---------- WhatsApp fijo (móvil) ---------- */
.wa-fixed { position: fixed; z-index: 40; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); display: none; box-shadow: 0 16px 40px -12px rgba(16, 22, 19, .55); transform: translateY(140%); transition: transform 280ms var(--ease); }
.wa-fixed.show { transform: none; }

/* ---------- aparición al hacer scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .nav-links > a:not(.button) { display: none; }
  .mobile-nav { display: block; }
  .service.feature { grid-template-columns: 1fr; }
  .service.half, .service.third { grid-column: span 3; }
  .service.third:last-child { grid-column: span 6; min-height: 0; }
  .about { grid-template-columns: 280px 1fr; gap: 36px; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --r-section: 32px; }
  .section { padding: 80px 0; }
  .hero { padding: 132px 0 72px; min-height: 0; }
  .hero-copy { font-size: 17px; }
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
  .services { grid-template-columns: 1fr; }
  .service.feature, .service.half, .service.third, .service.third:last-child { grid-column: auto; }
  .service, .service.feature { padding: 26px 22px; min-height: 0; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 0; padding: 26px 22px; }
  .step .num { margin-bottom: 6px; }
  .compare { border-radius: 24px; }
  .compare-panel { padding: 30px 22px 34px; min-height: 0; }
  .compare-js .panel-us { position: static; clip-path: none; text-align: left; }
  .compare-js .panel-us .compare-list li { flex-direction: row; }
  .compare-js .panel-us .us-brand { justify-content: flex-start; }
  .compare-js .compare-handle, .compare-js .compare-range, .compare-hint { display: none; }
  .about { grid-template-columns: 1fr; padding: 22px; gap: 8px; }
  .about-photo { max-width: 260px; aspect-ratio: 1; }
  .closing { padding: 72px 22px; border-radius: 28px; }
  .foot-card { padding: 26px 22px; }
  .foot-links { grid-template-columns: 1fr 1fr; }
  .foot-links > div:last-child { grid-column: 1 / -1; }
  .wa-fixed { display: inline-flex; }
  .footer { padding-bottom: 104px; }
  .nav { padding-left: 16px; min-height: 60px; }
  .nav .nav-cta { display: none; }
}
@media (max-width: 400px) {
  .brand-word { width: 84px; }
  .hero h1 { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .glow-a, .glow-b { animation: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav, .mobile-nav-menu { background: rgba(250, 250, 245, .97); }
  .card { background: rgba(255, 255, 255, .92); }
}

/* ---------- /amplia ---------- */
.hero-split { grid-template-columns: 1.05fr .95fr; gap: 56px; text-align: left; place-items: center stretch; }
.hero-split .hero-inner { align-items: flex-start; }
.hero-split h1 { max-width: 12ch; font-size: clamp(44px, 6vw, 88px); }
.hero-split .hero-actions { justify-content: flex-start; }
.hero-chat { width: 100%; max-width: 460px; justify-self: end; }
.chat-live .bubbles { height: 400px; overflow-y: auto; align-content: start; scrollbar-width: none; }
.chat-live .bubbles::-webkit-scrollbar { display: none; }
.chat-live .bubble, .chat-live .system-note { animation: pop 420ms var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.moment { font-size: 30px; line-height: 1; margin-bottom: 14px; }

.how { padding: 56px; background: var(--ink); color: var(--paper); border-color: transparent; outline-color: transparent; overflow: hidden; isolation: isolate; }
.how .section-head h2 { color: var(--paper); }
.how .chip { color: var(--muted-on-ink); }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.how-steps li { padding: 28px; border-radius: 24px; background: rgba(244, 243, 235, .05); border: 1px solid var(--edge-dark); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.how-steps .label { color: var(--lime); }
.how-steps h3 { margin-top: 14px; font-size: 22px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.how-steps p { margin-top: 10px; color: var(--muted-on-ink); }

.reception { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.reception .section-head { margin-bottom: 0; }
.call-list { padding: 22px; display: grid; gap: 10px; }
.call-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 6px 12px; border-bottom: 1px solid var(--edge-light); }
.call-head strong { font-size: 18px; }
.call-head .label { color: var(--muted); }
.call-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .7); border: 1px solid var(--edge-light); }
.call-row strong { display: block; }
.call-row small { color: var(--muted); font-size: 14px; }
.initial { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--lime); font-weight: 700; }

.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.faq-list { display: grid; gap: 12px; }
.faq-list details { background: var(--glass-card); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.8); outline: 1px solid var(--edge-light); outline-offset: -1px; border-radius: 22px; }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; font-size: 18px; font-weight: 700; border-radius: 22px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--lime); font-weight: 500; font-size: 20px; transition: transform 200ms var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 24px 22px; color: var(--muted); }

@media (max-width: 980px) {
  .hero-split { grid-template-columns: 1fr; text-align: left; }
  .hero-chat { justify-self: start; }
  .how-steps { grid-template-columns: 1fr; }
  .reception, .faq-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .hero-split { gap: 40px; }
  .hero-split .hero-actions { align-items: stretch; }
  .chat-live .bubbles { height: 340px; }
  .how { padding: 30px 22px; }
  .how-steps li { padding: 22px; }
  .call-row { grid-template-columns: 40px 1fr; }
  .call-row .tag { grid-column: 2; justify-self: start; }
  .initial { width: 40px; height: 40px; }
  .faq-list summary { padding: 18px 20px; font-size: 17px; }
  .faq-list details p { padding: 0 20px 20px; }
}

/* ===================== v2 (2026-11-15) ===================== */
/* logo: isotipo + wordmark en minúsculas (Syne 700) */
.wordmark { font-family: 'Syne', var(--font-brand); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: -.04em; color: var(--ink); white-space: nowrap; }
.wordmark b { font-weight: 700; }
.wordmark i { font-style: normal; color: #9DB31F; }
.on-ink .wordmark, .foot-brand .wordmark { color: var(--paper); }
.on-ink .wordmark i, .foot-brand .wordmark i { color: var(--lime); }
.brand .brand-r { width: 34px; }
.foot-brand .brand { gap: 12px; }
.foot-brand .brand-r { width: 44px; }
.foot-brand .wordmark { font-size: 32px; }

/* lockup de producto: «Amplia. for Clinics» */
.lockup { display: inline-flex; align-items: baseline; gap: 10px; }
.lockup strong { font-weight: 800; font-size: 26px; letter-spacing: -.04em; }
.lockup strong i { font-style: normal; color: var(--lime); }
.lockup span { font: 400 13px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-ink); }

/* servicios v2: 2 x 2 */
.services-v2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.services-v2 .service { min-height: 0; padding: 36px; gap: 12px; }
.service .kicker { font: 400 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--muted); }
.service .bullets { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.service .bullets li { padding: 6px 12px; border-radius: var(--r-pill); background: rgba(16, 22, 19, .05); font-size: 14px; font-weight: 600; }

/* bloque de sistema (Amplia for Clinics) */
.system { padding: 56px; background: var(--ink); color: var(--paper); border-color: transparent; outline-color: transparent; overflow: hidden; isolation: isolate; }
.system-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.system-head h2 { margin-top: 20px; font-size: clamp(32px, 4vw, 56px); font-weight: 800; line-height: 1.02; letter-spacing: -.05em; text-wrap: balance; }
.system-head p { color: var(--muted-on-ink); font-size: 18px; text-wrap: pretty; }
.system-head .button { margin-top: 20px; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; counter-reset: f; }
.flow li { position: relative; padding: 22px; border-radius: 22px; background: rgba(244, 243, 235, .05); border: 1px solid var(--edge-dark); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 8px; }
.flow li:not(:last-child)::after { content: ''; position: absolute; top: 50%; right: -12px; width: 12px; height: 2px; background: rgba(234, 254, 105, .45); }
.flow .label { color: var(--lime); }
.flow h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.flow p { font-size: 14.5px; line-height: 1.5; color: var(--muted-on-ink); }
.flow li.goal { background: var(--lime); color: var(--ink); border-color: transparent; }
.flow li.goal .label { color: var(--ink); opacity: .7; }
.flow li.goal p { color: var(--lime-body-text); }
.flow.on-paper li { background: var(--glass-card); border: 1px solid rgba(255,255,255,.8); outline: 1px solid var(--edge-light); outline-offset: -1px; }
.flow.on-paper li:not(:last-child)::after { background: rgba(16, 22, 19, .25); }
.flow.on-paper .label { color: var(--muted); }
.flow.on-paper p { color: var(--muted); }
.flow.on-paper li.goal { background: var(--ink); color: var(--paper); outline-color: transparent; }
.flow.on-paper li.goal .label { color: var(--lime); opacity: 1; }
.flow.on-paper li.goal p { color: var(--muted-on-ink); }

/* métricas: qué se busca */
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.metric { padding: 32px; }
.metric h3 { font-size: 20px; font-weight: 700; margin-bottom: 18px; }
.metric ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.metric li { padding: 10px 16px; border-radius: var(--r-pill); font-weight: 600; }
.metric.them li { background: rgba(16, 22, 19, .05); color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(16,22,19,.3); }
.metric.us { background: var(--ink); color: var(--paper); border-color: transparent; outline-color: transparent; }
.metric.us li { background: var(--lime); color: var(--ink); }

@media (max-width: 1100px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow li:not(:last-child)::after { display: none; }
  .flow li.goal { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .system-head { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 760px) {
  .services-v2, .metrics { grid-template-columns: 1fr; }
  .services-v2 .service { padding: 26px 22px; }
  .system { padding: 30px 22px; }
  .flow { grid-template-columns: 1fr; }
  .flow li { padding: 18px 20px; }
  .flow li:not(:last-child)::after { display: block; top: auto; bottom: -12px; right: auto; left: 32px; width: 2px; height: 12px; }
  .metric { padding: 26px 22px; }
  .wordmark { font-size: 21px; }
}

/* v3: hero con línea fuerte + Amplia for Clinics junto a los servicios */
.hero-copy strong { display: inline-block; margin-bottom: 6px; color: var(--paper); font-weight: 700; font-size: 1.1em; letter-spacing: -.01em; }
.services-v3 { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); gap: 16px; }
.amplia-card { grid-row: 1 / 3; position: relative; display: flex; flex-direction: column; gap: 16px; padding: 40px; background: var(--ink); color: var(--paper); border-color: transparent; outline-color: transparent; overflow: hidden; isolation: isolate; }
.amplia-card h3 { font-size: clamp(28px, 2.6vw, 38px); font-weight: 800; line-height: 1.05; letter-spacing: -.045em; text-wrap: balance; }
.amplia-card > p:not(.lockup) { color: var(--muted-on-ink); font-size: 17px; text-wrap: pretty; }
.amplia-card .button { margin-top: auto; align-self: flex-start; }
.mini-flow { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; }
.mini-flow li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: rgba(244, 243, 235, .06); border: 1px solid rgba(244, 243, 235, .1); font-size: 15px; font-weight: 600; }
.mini-flow li span { font: 400 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--lime); min-width: 34px; text-transform: uppercase; }
.mini-flow li.goal { background: var(--lime); color: var(--ink); border-color: transparent; font-weight: 800; }
.mini-flow li.goal span { color: var(--ink); opacity: .7; }
.service.mini { min-height: 0; padding: 26px; gap: 10px; }
.service.mini h3 { font-size: 22px; }
.service.mini p { font-size: 15px; }
.service.mini .bullets li { font-size: 12.5px; padding: 5px 10px; }
.service.mini .icon-dot { width: 40px; height: 40px; }
@media (max-width: 1100px) {
  .services-v3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amplia-card { grid-row: auto; grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .services-v3 { grid-template-columns: 1fr; }
  .amplia-card { padding: 28px 22px; }
}

/* v4: Amplia for Clinics con texto del sistema + visualizador de facturación */
.amplia-card .glow-in { position: absolute; z-index: -1; width: 460px; height: 460px; right: -180px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(143, 163, 58, .6), transparent); filter: blur(50px); pointer-events: none; }
.amplia-only { align-self: flex-start; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid rgba(234, 254, 105, .35); background: rgba(234, 254, 105, .1); color: var(--lime) !important; font: 400 11px/1.3 var(--font-mono) !important; letter-spacing: .08em; text-transform: uppercase; }
.amplia-card > p:not(.lockup):not(.amplia-only) { font-size: 16px; }
.revenue { margin: 6px 0 10px; padding: 18px 18px 14px; border-radius: 20px; background: rgba(244, 243, 235, .06); border: 1px solid rgba(244, 243, 235, .12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.revenue-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.revenue-label { font-size: 15px; font-weight: 700; color: var(--paper); }
.revenue-note { margin-top: 2px; font: 400 10.5px/1.3 var(--font-mono); letter-spacing: .06em; color: var(--muted-on-ink); text-transform: uppercase; }
.revenue-tabs { display: flex; gap: 4px; padding: 3px; border-radius: var(--r-pill); background: rgba(244, 243, 235, .07); }
.revenue-tabs button { appearance: none; border: 0; background: transparent; color: var(--muted-on-ink); font: 400 11px/1 var(--font-mono); padding: 7px 10px; border-radius: var(--r-pill); cursor: pointer; min-width: 36px; min-height: 28px; }
.revenue-tabs button[aria-pressed="true"] { background: var(--lime); color: var(--ink); }
.revenue-tabs button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.revenue svg { display: block; width: 100%; height: 130px; overflow: visible; }
.revenue svg line { stroke: rgba(244, 243, 235, .14); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.revenue .rev-line { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.revenue .rev-line.draw { animation: rev-draw 1400ms var(--ease) forwards; }
.revenue .rev-area { opacity: 0; transition: opacity 700ms var(--ease) 1100ms; }
.revenue .rev-area.on { opacity: 1; }
@keyframes rev-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .revenue .rev-line { stroke-dashoffset: 0; animation: none !important; } .revenue .rev-area { transition: none; } }

/* v4b: Amplia for Clinics a lo ancho (texto | gráfica) y servicios en 4 columnas */
.services-v3 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; }
.amplia-card { grid-row: auto; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 48px; }
.amplia-text { display: flex; flex-direction: column; gap: 16px; }
.amplia-text > p:not(.lockup):not(.amplia-only) { color: var(--muted-on-ink); font-size: 16.5px; text-wrap: pretty; max-width: 540px; }
.amplia-text .button { margin-top: 8px; align-self: flex-start; }
.amplia-card .revenue { margin: 0; padding: 24px; }
.amplia-card .revenue svg { height: 220px; }
@media (max-width: 1100px) {
  .services-v3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amplia-card { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .services-v3 { grid-template-columns: 1fr; }
  .amplia-card { padding: 28px 22px; }
  .amplia-card .revenue { padding: 16px; }
  .amplia-card .revenue svg { height: 150px; }
}

/* v5: visualizador detallado, diferencia con blur, proceso «De la fricción al flujo» */
.hero-copy strong { display: inline; margin: 0; font-size: inherit; }
.revenue-value { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.rev-total { font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.04em; color: var(--paper); font-variant-numeric: tabular-nums; }
.rev-delta { padding: 3px 8px; border-radius: var(--r-pill); background: rgba(234, 254, 105, .16); color: var(--lime); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.revenue-sub { margin-top: 4px; font: 400 11px/1.3 var(--font-mono); letter-spacing: .06em; color: var(--muted-on-ink); text-transform: uppercase; }
.rev-plot { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 8px; margin-top: 8px; }
.rev-y { position: relative; grid-row: 1; }
.rev-y span { position: absolute; right: 0; transform: translateY(-50%); font: 400 10.5px/1 var(--font-mono); color: var(--muted-on-ink); white-space: nowrap; }
.rev-canvas { position: relative; grid-row: 1; grid-column: 2; }
.amplia-card .revenue .rev-canvas svg, .revenue .rev-canvas svg { display: block; width: 100%; height: 200px; overflow: visible; }
.rev-grid line { stroke: rgba(244, 243, 235, .12); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.rev-x { grid-row: 2; grid-column: 2; position: relative; height: 14px; }
.rev-x span { position: absolute; top: 0; transform: translateX(-50%); font: 400 10.5px/1 var(--font-mono); color: var(--muted-on-ink); text-transform: uppercase; }
.rev-x span:first-child { transform: none; }
.rev-x span:last-child { transform: translateX(-100%); }
.rev-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(234, 254, 105, .2); pointer-events: none; opacity: 0; transition: opacity 300ms var(--ease), left 160ms var(--ease), top 160ms var(--ease); }
.rev-dot.on { opacity: 1; }
.rev-tip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); padding: 7px 10px; border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 160ms var(--ease); font-variant-numeric: tabular-nums; }
.rev-tip small { display: block; font: 400 10px/1.2 var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.rev-tip.on { opacity: 1; }
.rev-canvas { cursor: crosshair; touch-action: pan-y; }
@media (max-width: 760px) { .revenue .rev-canvas svg { height: 150px; } .rev-plot { grid-template-columns: 38px minmax(0, 1fr); } }

/* diferencia: Rodmann Labs se enfoca al deslizar */
.compare-js .panel-us > * { filter: blur(var(--blur, 0px)); }
.compare-js .panel-us { isolation: isolate; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.compare-js .panel-us > * { will-change: filter; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.compare-range { -webkit-tap-highlight-color: transparent; }
.compare-range::-webkit-slider-runnable-track { background: transparent; }
.compare-range::-moz-range-track { background: transparent; }
.compare-js .compare { user-select: none; -webkit-user-select: none; }
.compare.compare-js { user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: reduce) { .compare-js .panel-us > * { transition: none; } }

/* proceso: «De la fricción al flujo» en tarjeta oscura */
.process-dark { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; padding: 56px; background: var(--ink); color: var(--paper); border-color: transparent; outline-color: transparent; overflow: hidden; isolation: isolate; }
.process-dark .glow-in { position: absolute; z-index: -1; width: 480px; height: 480px; left: -200px; bottom: -220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(143, 163, 58, .55), transparent); filter: blur(50px); pointer-events: none; }
.process-head h2 { margin-top: 20px; font-size: clamp(36px, 4.4vw, 60px); font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.process-head h2 span { color: var(--lime); }
.process-head p { margin-top: 18px; color: var(--muted-on-ink); font-size: 18px; max-width: 420px; text-wrap: pretty; }
.process-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.process-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 20px 22px; border-radius: 20px; background: rgba(244, 243, 235, .05); border: 1px solid rgba(244, 243, 235, .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.process-steps .num { font: 400 13px/1.6 var(--font-mono); color: var(--lime); letter-spacing: .06em; }
.process-steps h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.process-steps p { margin-top: 6px; color: var(--muted-on-ink); font-size: 15.5px; text-wrap: pretty; }
@media (max-width: 1100px) { .process-dark { grid-template-columns: 1fr; gap: 32px; padding: 44px; } }
@media (max-width: 760px) { .process-dark { padding: 30px 20px; } .process-steps li { grid-template-columns: 34px minmax(0, 1fr); padding: 18px 16px; } }
@media (max-width: 760px) { .compare-js .panel-us > * { filter: none; } }
@media (max-width: 1100px) { .amplia-card { grid-template-columns: minmax(0, 1fr); } }
.amplia-card > *, .revenue, .rev-plot { min-width: 0; }
@media (max-width: 400px) { .revenue-top { flex-wrap: wrap; } }

/* v6: botón flotante de WhatsApp (vidrio + lima), en escritorio y celular */
.wa-fixed.wa-float { left: auto; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 0; padding: 6px; border-radius: var(--r-pill); background: rgba(16, 22, 19, .72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(244, 243, 235, .14); color: var(--paper); text-decoration: none; box-shadow: 0 18px 44px -14px rgba(16, 22, 19, .6); transform: translateY(calc(100% + 40px)); transition: transform 320ms var(--ease), gap 260ms var(--ease); }
.wa-fixed.wa-float.show { transform: none; }
.wa-float-icon { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--lime); color: var(--ink); flex: none; }
.wa-float-icon svg { width: 26px; height: 26px; }
.wa-float-icon::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(234, 254, 105, .55); opacity: 0; pointer-events: none; }
.wa-fixed.wa-float.show .wa-float-icon::after { animation: wa-ring 2.4s var(--ease) 2; }
@keyframes wa-ring { 0% { transform: scale(.9); opacity: .9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
.wa-float-label { max-width: 0; overflow: hidden; white-space: nowrap; font-size: 15px; font-weight: 700; letter-spacing: -.01em; opacity: 0; transition: max-width 320ms var(--ease), opacity 220ms var(--ease), padding 320ms var(--ease); }
.wa-float:focus-visible .wa-float-label { max-width: 240px; opacity: 1; padding: 0 12px 0 14px; }
.wa-float:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
@media (hover: none) { .wa-float-label { display: none; } }
@media (max-width: 760px) { .wa-fixed.wa-float { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); padding: 5px; } .wa-float-icon { width: 50px; height: 50px; } }
@media (prefers-reduced-motion: reduce) { .wa-float-icon::after { animation: none; opacity: 0; } .wa-fixed.wa-float, .wa-float-label { transition: none; } }


/* v7b: visualizador de línea mejorado */
.revenue .revenue-top { align-items: center; margin-bottom: 18px; }
.revenue .revenue-label { font: 400 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-ink); }
.revenue .rev-total { display: block; margin-top: 6px; font-size: clamp(30px, 3vw, 42px); line-height: 1; }
.rev-guide { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(234, 254, 105, .45); pointer-events: none; opacity: 0; transition: opacity 160ms var(--ease); }
.rev-guide.on { opacity: 1; }
.rev-dot { box-shadow: 0 0 0 6px rgba(234, 254, 105, .18), 0 0 24px rgba(234, 254, 105, .6); }
.rev-canvas { touch-action: pan-y; }
.rev-x span.on { color: var(--paper); }

/* auditoría better-interface (2026-11-15) */
@media (hover: hover) { .wa-float:hover .wa-float-label { max-width: 240px; opacity: 1; padding: 0 12px 0 14px; } }
.skip-link { position: fixed; z-index: 100; left: 16px; top: 12px; padding: 12px 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none; transform: translateY(-160%); }
.skip-link:focus-visible { transform: none; outline: 3px solid var(--lime); outline-offset: 3px; }
.rev-canvas:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; border-radius: 8px; }
h3.lockup { margin: 0; font-size: inherit; line-height: 1; }

/* ---- pulido impeccable (2026-11-15) ---- */
.nw { white-space: nowrap; }
.process-head h2 { text-wrap: balance; }
.flow p, .faq-list details p { text-wrap: pretty; }
.flow h3 { text-wrap: balance; }
html { scrollbar-color: rgba(16, 22, 19, .32) transparent; }
.rev-y, .rev-x { font-variant-numeric: tabular-nums; }
/* periodo de la gráfica: área táctil de 44 px sin cambiar el tamaño visible */
.revenue-tabs button { position: relative; transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.revenue-tabs button::before { content: ''; position: absolute; inset: -8px -2px; }
@media (hover: hover) { .revenue-tabs button:not([aria-pressed="true"]):hover { color: var(--paper); } }
/* pie: enlaces más fáciles de tocar, mismo ritmo visual */
.foot-links ul { gap: 0; }
.foot-links a { display: inline-block; padding-block: 5px; }
.foot-links li > span { display: inline-block; padding-block: 5px; }

/* ---- títulos más horizontales y pie con esquinas solo arriba (pedido de Manuel, 2026-11-15) ---- */
.br-wide { display: none; }
@media (min-width: 900px) {
  .br-wide { display: inline; }
  .hero h1 { max-width: none; font-size: clamp(44px, 4.9vw, 80px); line-height: 1; text-wrap: wrap; white-space: nowrap; }
  .rotator > span { justify-self: start; }
  .section-head { max-width: 1080px; }
  .section-head.center { margin-inline: auto; }
  .closing h2 { max-width: 24ch; }
}
.footer { padding-bottom: 0; }
.footer-grid > .foot-card:last-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (min-width: 981px) {
  .footer-grid > .foot-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}
@media (max-width: 760px) {
  .footer { padding-bottom: 0; }
  .footer-grid > .foot-card:last-child { padding-bottom: 104px; }
}
/* hero «convierten cada mensaje en una…»: el ancho sigue a la palabra visible */
.rotator-fit { white-space: nowrap; transition: width 600ms var(--ease); }
.rotator-fit > span { justify-self: start; width: max-content; }
@media (prefers-reduced-motion: reduce) { .rotator-fit { transition: none; } }
@media (max-width: 400px) { .hero h1 { font-size: 38px; } }
.hero-inner > h1:first-child { margin-top: 0; }

/* primera pantalla (pedido de Manuel, 2026-11-15): hero a todo lo ancho con esquinas redondeadas solo abajo,
   y abajo se asoma «Servicios» (rótulo, titular y parte del párrafo) borroso, que se enfoca con el scroll */
.hero-stage {
  border-radius: 0 0 var(--r-section) var(--r-section);
  box-shadow: 0 2px 4px rgba(16, 22, 19, .08), 0 36px 72px -36px rgba(16, 22, 19, .55);
}
.hero-stage::after {
  /* filo tenue en la orilla de abajo: línea simple, sin máscara (la máscara fallaba en algunos navegadores y teñía todo el hero de lima) */
  content: ''; position: absolute; left: var(--r-section); right: var(--r-section); bottom: 0; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(234, 254, 105, .22) 50%, transparent);
}
@media (min-width: 981px) {
  .hero:not(.hero-split) { min-height: calc(100svh - 400px); padding: 112px 0 48px; }
  .hero:not(.hero-split) .hero-actions { margin-top: var(--s-xl); }
  .hero-split { min-height: min(720px, calc(100svh - 240px)); padding-bottom: 80px; }
  .hero-stage:has(.hero:not(.hero-split)) + .section { padding-top: 56px; }
  .hero-stage:has(.hero-split) + .section { padding-top: 80px; }
}
@media (max-width: 760px) {
  .hero:not(.hero-split) { padding: 104px 0 40px; }
  .hero:not(.hero-split) .hero-actions { margin-top: var(--s-xl); }
  .hero-stage + .section { padding-top: 40px; }
}
body::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 56px; z-index: 30; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to top, #000 20%, transparent); mask-image: linear-gradient(to top, #000 20%, transparent);
}
@media (max-width: 760px) { body::after { height: 44px; } }

/* la sección de abajo se asoma borrosa (se alcanza a leer) y se enfoca al hacer scroll (sitio.js pone --peek de 1 a 0) */
.peeking > * { filter: blur(calc(var(--peek, 0) * 3.5px)); opacity: calc(1 - var(--peek, 0) * .3); }

/* /amplia/: el hero de dos columnas conserva su titular de varias líneas (la regla ancha es solo para la home) */
@media (min-width: 900px) {
  .hero-split h1 { max-width: 12ch; white-space: normal; font-size: clamp(44px, 6vw, 88px); line-height: 1.02; text-wrap: balance; }
}

/* menos hueco entre el final de «Servicios» y «Diferencia» (pedido de Manuel, 2026-11-15): 224 → 112 px en escritorio */
#servicios { padding-bottom: 48px; }
#diferencia { padding-top: 64px; }
@media (max-width: 980px) { #servicios { padding-bottom: 40px; } #diferencia { padding-top: 48px; } }

/* píldoras de sección en tipo oración, no en mayúsculas (pedido de Manuel, 2026-11-15) */
.label.chip { text-transform: none; letter-spacing: 0; font: 600 14px/1.4 var(--font-brand); }

/* más aire entre el menú y el titular del hero (pedido de Manuel, 2026-11-15) */
@media (min-width: 981px) { .hero:not(.hero-split) { padding-top: 140px; } }
@media (max-width: 760px) { .hero:not(.hero-split) { padding-top: 124px; } }

/* ---------- /amplia: «la noche pasa» (escena fija; el scroll mueve el reloj). Patrón de la demo v3.3 ---------- */
.noche { position: relative; height: 240vh; --p: 0; --b: 0; }
.noche-fija { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 92px 0 20px; display: flex; }
.noche-panel {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  width: var(--shell); margin: 0 auto; border-radius: var(--r-section);
  display: grid; place-items: center; text-align: center; color: var(--paper);
  background: color-mix(in srgb, #FFFFFF calc(var(--b) * 100%), var(--ink));
  border: 1px solid color-mix(in srgb, var(--edge-light) calc(var(--b) * 100%), transparent);
  box-shadow: 0 30px 70px -44px rgba(16, 22, 19, .55);
}
.noche-panel.claro { color: var(--ink); }
.noche-astro {
  position: absolute; left: 50%; top: 50%; width: min(150vw, 1100px); aspect-ratio: 1;
  margin: -42svh 0 0 calc(min(150vw, 1100px) / -2); border-radius: 50%;
  border: 1px dashed color-mix(in srgb, currentColor 18%, transparent);
  transform: rotate(calc(-70deg + var(--p) * 140deg)); pointer-events: none; z-index: -1;
}
.noche-astro::after {
  content: ''; position: absolute; left: 50%; top: -11px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  background: color-mix(in srgb, #F5B93A calc(var(--p) * 100%), var(--paper));
  box-shadow: 0 0 40px 6px color-mix(in srgb, #F5B93A calc(var(--p) * 60%), transparent);
}
.noche-inner { width: min(560px, 100% - 40px); padding: 24px 0; }
.noche-chip { background: rgba(244, 243, 235, .08); color: var(--paper); border: 1px solid rgba(244, 243, 235, .16); }
.noche-panel.claro .noche-chip { background: rgba(16, 22, 19, .05); color: var(--ink); border-color: var(--edge-light); }
.noche-panel.claro .noche-chip::before { background: var(--ink); box-shadow: 0 0 0 4px rgba(16, 22, 19, .08); }
.noche-reloj { font: 400 clamp(64px, min(20vw, 16svh), 160px)/1 var(--font-mono); letter-spacing: -.04em; margin: 14px 0 6px; font-variant-numeric: tabular-nums; }
.noche-estado { font-size: clamp(18px, 2.4vw, 22px); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; min-height: 2.6em; display: grid; place-items: center; text-wrap: balance; }
.noche-avisos { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.noche-aviso { padding: 11px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); background: color-mix(in srgb, currentColor 6%, transparent); }
.noche-aviso strong { display: block; font-size: 15.5px; line-height: 1.25; margin-top: 4px; }
.noche-aviso small { display: block; font-size: 13.5px; line-height: 1.35; opacity: .78; }
.noche-arriba { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.noche-hr { opacity: .8; }
.noche-ok { flex: none; font: 400 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; background: var(--lime); color: var(--ink); }
.noche-nota { margin-top: 14px; font-size: 14px; opacity: .72; }
html:not(.no-js) .noche-aviso { opacity: 0; transform: translateY(12px); transition: opacity 300ms ease-out, transform 300ms ease-out; }
html:not(.no-js) .noche-aviso.v { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .noche-fija { padding: 84px 0 12px; }
  .noche-reloj { margin-top: 10px; }
  .noche-aviso { padding: 9px 14px; }
  .noche-nota { font-size: 13px; }
}
/* Sin movimiento, sin JS o pantalla muy baja: la escena no se queda fija y se lee de corrido, ya de día. */
@media (prefers-reduced-motion: reduce), (max-height: 560px) {
  .noche { height: auto; --p: 1; --b: 1; padding: 24px 0; }
  .noche-fija { position: static; height: auto; padding: 0; }
  .noche-panel { color: var(--ink); padding: 48px 0; }
  .noche-chip { background: rgba(16, 22, 19, .05); color: var(--ink); border-color: var(--edge-light); }
  html:not(.no-js) .noche-aviso { opacity: 1; transform: none; transition: none; }
}
.no-js .noche { height: auto; --p: 1; --b: 1; }
.no-js .noche-fija { position: static; height: auto; }
.no-js .noche-panel { color: var(--ink); padding: 48px 0; }

/* ---------- /amplia: lista de la mañana y línea de seguimiento ---------- */
.call-when { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.linea { list-style: none; margin: 8px 0 0; padding: 0 0 0 30px; position: relative; display: grid; gap: 26px; --p: 0; }
.linea::before, .linea::after { content: ''; position: absolute; left: 7px; top: 6px; width: 2px; }
.linea::before { bottom: 6px; background: var(--edge-light); background: rgba(16, 22, 19, .14); }
.linea::after { height: calc((100% - 12px) * var(--p)); background: var(--ink); }
.hito { position: relative; }
.hito::before { content: ''; position: absolute; left: -30px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); z-index: 1; transition: background-color 300ms ease-out; }
.hito.in::before { background: var(--lime); }
.hito .label { color: var(--muted); }
.hito h3 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-top: 4px; }
.hito p { color: var(--muted); font-size: 15.5px; margin-top: 4px; }
@media (min-width: 861px) {
  .linea { grid-template-columns: repeat(4, 1fr); padding: 32px 0 0; gap: 28px; }
  .linea::before, .linea::after { left: 0; top: 7px; height: 2px; }
  .linea::before { right: 0; bottom: auto; width: auto; }
  .linea::after { width: calc(100% * var(--p)); }
  .hito::before { left: 0; top: -32px; }
}

/* ---------- aparición escalonada (ritmo de la demo): opacidad, 12 px y 4 px de desenfoque, 300 ms, 100 ms entre piezas ---------- */
.reveal {
  transform: translateY(12px); filter: blur(4px);
  transition: opacity 300ms ease-out, transform 300ms ease-out, filter 300ms ease-out;
  transition-delay: calc(var(--d, 0) * 100ms);
}
.reveal.in { filter: none; }
.section-head.reveal { opacity: 1; transform: none; filter: none; }
.section-head.reveal > * {
  opacity: 0; transform: translateY(12px); filter: blur(4px);
  transition: opacity 300ms ease-out, transform 300ms ease-out, filter 300ms ease-out;
  transition-delay: calc(var(--i, 0) * 100ms);
}
.section-head.reveal.in > * { opacity: 1; transform: none; filter: none; }
.no-js .reveal, .no-js .section-head.reveal > * { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .section-head.reveal > * { opacity: 1; transform: none; filter: none; transition: none; }
  .hito::before { transition: none; }
}

/* ---------- diferencia: las agencias se desenfocan al deslizar hacia Rodmann Labs; etiqueta «Recomendado» ---------- */
.compare-js .panel-them > * { filter: blur(var(--blur-them, 0px)); will-change: filter; }
.compare-js .panel-us > .us-reco { filter: none; will-change: auto; }
.us-reco { position: absolute; top: 18px; left: calc(var(--pos) + 20px); z-index: 1; }
@media (max-width: 760px) {
  .compare-js .panel-them > * { filter: none; }
  .us-reco { position: static; margin-bottom: 14px; }
}
/* «Recomendado» se asoma solo con el deslizador hasta el tope (en celular siempre visible) */
.compare-js .panel-us > .us-reco { opacity: 0; transform: translateY(-6px) scale(.96); filter: blur(4px); transition: opacity 300ms ease-out, transform 300ms ease-out, filter 300ms ease-out; pointer-events: none; }
.compare-js.compare-full .panel-us > .us-reco { opacity: 1; transform: none; filter: none; }
@media (max-width: 760px) { .compare-js .panel-us > .us-reco { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .compare-js .panel-us > .us-reco { transform: none; filter: none; transition: opacity 150ms linear; } }

/* ---------- tarjetas claras sin bisel (pedido de Manuel, 2026-11-15): sin borde blanco, sin filo interior, sin brillo de arriba.
   El filo aparece solo al pasar el cursor, al enfocar con teclado o con la pregunta abierta. Borde transparente para modo de alto contraste. ---------- */
.card, .faq-list details, .flow.on-paper li {
  border-color: transparent; outline-color: transparent;
  box-shadow: 0 24px 60px -32px rgba(16, 22, 19, .28);
  /* Hover suave (2026-11-15): sin filo que aparece de golpe; la tarjeta se eleva 3 px y la sombra se abre, 450 ms.
     La elevación usa `translate` (no `transform`) para no chocar con la entrada .reveal; ésta conserva su retraso. */
  transition: outline-color 200ms ease-out, box-shadow 450ms cubic-bezier(0.2, 0, 0, 1), translate 450ms cubic-bezier(0.2, 0, 0, 1),
              opacity 300ms ease-out, transform 300ms ease-out, filter 300ms ease-out;
  transition-delay: 0s, 0s, 0s, calc(var(--d, 0) * 100ms), calc(var(--d, 0) * 100ms), calc(var(--d, 0) * 100ms);
}
.flow.on-paper li { box-shadow: none; }
.card:focus-within, .faq-list details:focus-within, .faq-list details[open], .flow.on-paper li:focus-within { outline-color: rgba(16, 22, 19, .14); }
@media (hover: hover) {
  .card:not(.service.feature, .how, .system, .amplia-card, .process-dark, .metric.us):hover,
  .faq-list details:hover, .flow.on-paper li:not(.goal):hover {
    box-shadow: 0 34px 70px -30px rgba(16, 22, 19, .30);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:not(.service.feature, .how, .system, .amplia-card, .process-dark, .metric.us):hover,
  .flow.on-paper li:not(.goal):hover { translate: 0 -3px; }
}
@media (prefers-reduced-motion: reduce) { .card, .faq-list details, .flow.on-paper li { transition: box-shadow 200ms ease-out, opacity 300ms ease-out; } }

/* Píldoras de métricas en una sola línea (2026-11-15). La letra se ajusta al ancho
   de la tarjeta; si ni a 13px caben, cada píldora va en su propia línea (nunca 2 + 1). */
.metric { container-type: inline-size; }
.metric ul { flex-wrap: nowrap; gap: 8px; }
.metric li { white-space: nowrap; font-size: 15px; padding: .62em .9em; }
/* Tamaños enteros (no cqi): una letra fraccionaria se redibuja al terminar el desenfoque y «brinca». */
@container (max-width: 527px) { .metric li { font-size: 14px; } }
@container (max-width: 492px) { .metric li { font-size: 13px; } }
@container (max-width: 460px) {
  .metric ul { flex-direction: column; align-items: flex-start; }
  .metric li { font-size: 15px; }
}
/* Entrada de las píldoras: una tras otra, después de la tarjeta. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js) .metrics.reveal li { opacity: 0; transform: translateY(12px); filter: blur(4px);
    transition: opacity 300ms ease-out var(--pd, 250ms), transform 300ms ease-out var(--pd, 250ms), filter 300ms ease-out var(--pd, 250ms); }
  html:not(.no-js) .metrics.reveal.in li { opacity: 1; transform: none; filter: none; }
  .metrics li:nth-child(2) { --pd: 350ms; }
  .metrics li:nth-child(3) { --pd: 450ms; }
  .metrics li:nth-child(4) { --pd: 550ms; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.no-js) .metrics.reveal li { opacity: 0; transition: opacity 300ms ease-out 250ms; }
  html:not(.no-js) .metrics.reveal.in li { opacity: 1; }
}

/* ---------- artículo /clinicas-dentales/ (2026-11-15, v2 editorial): una columna de lectura sobre hueso,
   sin la tarjeta oscura del hero (esa forma es solo de la home). Figuras más anchas que el texto, numeradas. ---------- */
.art-page { padding-top: 132px; }
.art-col { width: min(700px, calc(100% - 40px)); margin-inline: auto; }
.art-fig { width: min(960px, calc(100% - 40px)); margin: 48px auto 0; }
.art-fig-wide { width: var(--shell); }
.art-fig > figcaption { margin-top: 14px; color: var(--muted); }
.art-fig-wide > figcaption { width: min(700px, 100%); margin-inline: auto; }

.art-head { padding: 32px 0 56px; }
.art-head .art-col { width: min(960px, calc(100% - 40px)); }
.art-head h1 { max-width: 17ch; }
.art-dek { max-width: 640px; }
.art-kicker { color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; }
.art-kicker a { color: var(--ink); text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 3px; }
.art-head h1 { margin-top: 24px; font-size: clamp(40px, 5.4vw, 76px); font-weight: 800; line-height: 1.02; letter-spacing: -.05em; text-wrap: balance; }
.art-head h1 .mark { padding-inline: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.art-dek { margin-top: 28px; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.art-byline { display: flex; align-items: center; gap: 14px; margin-top: 36px; padding: 18px 0; border-block: 1px solid rgba(16, 22, 19, .12); }
.art-byline img { width: 34px; height: 22px; }
.art-byline div { display: flex; flex-direction: column; gap: 4px; }
.art-byline strong { font-size: 15px; }
.art-byline .label { color: var(--muted); }

.art-sec { padding: 56px 0; }
.art-idx { color: var(--muted); }
.art h2 { margin-top: 14px; font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
.art .prose { margin-top: 22px; }
.art .prose p { font-size: 19px; line-height: 1.65; margin-bottom: 18px; text-wrap: pretty; }
.art .prose p:last-child { margin-bottom: 0; }
.art-first > p:first-child::first-letter { float: left; margin: 6px 12px 0 0; font-size: 4.1em; font-weight: 800; line-height: .8; letter-spacing: -.04em; }
.art-last > p:last-child::after { content: ''; display: inline-block; width: .55em; height: .55em; margin-left: 8px; background: var(--ink); vertical-align: baseline; }
.art-quote { margin: 40px 0 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--ink); }
.art-quote p { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
.art-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 28px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 4px; }
.art-link .arrow { width: 18px; height: 18px; transition: translate 200ms ease-out; }
@media (hover: hover) { .art-link:hover .arrow { translate: 3px 0; } }

/* Fig. 2: diagnóstico (figura interactiva, no hero) */
.art-diag { background: var(--ink); color: var(--paper); border-radius: 32px; padding: 40px; }
.diag-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.diag-tabs button { min-height: 44px; padding: 0 20px; border: 1px solid rgba(244, 243, 235, .16); border-radius: var(--r-pill); background: rgba(244, 243, 235, .04); color: var(--paper); font: 700 15px/1 var(--font-brand); cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .diag-tabs button:not([aria-pressed="true"]):hover { background: rgba(244, 243, 235, .1); } }
.diag-tabs button[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.diag-tabs button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.diag-panel { padding: 28px; border-radius: 22px; background: rgba(244, 243, 235, .05); border: 1px solid rgba(244, 243, 235, .1); }
.diag-label { color: var(--lime); }
.diag-panel h3 { margin-top: 14px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.diag-panel > p:not(.diag-label) { margin-top: 14px; max-width: 60ch; font-size: 17px; line-height: 1.6; color: var(--muted-on-ink); text-wrap: pretty; }
.diag-flow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.diag-flow span { padding: 9px 14px; border-radius: var(--r-pill); background: var(--lime); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.2; }

@media (max-width: 860px) {
  .art-page { padding-top: 104px; }
  .art-sec { padding: 44px 0; }
  .art-fig { margin-top: 36px; }
  .art-diag { padding: 24px; border-radius: 26px; }
}
@media (max-width: 480px) {
  .art .prose p { font-size: 17px; }
  .art-dek { font-size: 18px; }
  .diag-panel { padding: 20px; }
  .diag-tabs button { flex: 1 1 auto; padding: 0 14px; }
}

/* ---------- móvil: composición (2026-11-15, adapt con impeccable) ---------- */
.art-time { white-space: nowrap; }
.metric h3 { text-wrap: balance; }
@media (max-width: 560px) {
  /* frases protegidas con .nw: en pantallas chicas se salían del ancho */
  .nw { white-space: normal; }
  /* «Cómo trabajamos»: el número va arriba del título y el texto usa todo el ancho */
  .process-steps li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px; }
  .process-steps .num { line-height: 1; }
  /* Fig. 2: la primera pestaña ocupa la fila y las otras dos se reparten la segunda */
  .diag-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .diag-tabs button:first-child { grid-column: 1 / -1; }
  .diag-tabs button { padding: 0 12px; }
}
@media (max-width: 360px) {
  /* pie: la marca cabía justa en 375 y se salía en 320 */
  .foot-brand .brand-r { width: 36px; }
  .foot-brand .wordmark { font-size: 26px; }
}