/* ── Cardigan marketing pages — standalone CSS ──
   Used by the per-profession landing pages in public/<profession>/
   index.html and public/blog/. Self-contained: doesn't depend on
   the React app's build output (so the file hash never changes
   between deploys, which keeps these pages cacheable forever).

   Mirrors the brand tokens from src/styles/base.css and the visual
   language of the React landing page (LandingPage.jsx) — but the
   pages render as plain HTML so search-engine crawlers see real
   content from request 1, no JS required. */

:root {
  --teal:        #5B9BAF;
  --teal-dark:   #4A8799;
  --teal-light:  #7AB5C7;
  --teal-pale:   #EAF4F7;
  --teal-mist:   #F2F9FB;
  --cream:       #F5F0EB;
  --cream-dark:  #EDE7DF;
  --cream-deeper:#E3DBD1;
  --charcoal:    #2E2E2E;
  --charcoal-md: #555;
  --charcoal-lt: #777;
  --charcoal-xl: #9E9E9E;
  --border:      #E2DBD3;
  --border-lt:   #EDE8E2;
  --white:       #FFFFFF;
  --green:       #3DAB74;
  --amber:       #D4A040;
  --red:         #D96B6B;
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-pill: 100px;
  --shadow-sm:   0 1px 4px rgba(46,46,46,0.07);
  --shadow:      0 2px 12px rgba(46,46,46,0.09);
  --shadow-lg:   0 8px 28px rgba(46,46,46,0.12);
  --font:        'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-d:      'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ease-out:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
}

@font-face { font-family:'Nunito'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/nunito-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/nunito-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:800; font-display:swap;
  src:url('/fonts/nunito-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Nunito Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/nunito-sans-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Nunito Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/fonts/nunito-sans-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Nunito Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/nunito-sans-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: var(--font); background: var(--white); color: var(--charcoal); -webkit-font-smoothing: antialiased; line-height: 1.6; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
[hidden] { display: none !important; }

/* ── Layout primitives ── */
.mkt-container { max-width: 980px; margin: 0 auto; padding: 0 24px; }
.mkt-page { display: flex; flex-direction: column; min-height: 100vh; }
section { padding: 64px 0; }
@media (max-width: 720px) { section { padding: 44px 0; } }

/* ── Top nav ──
   Sticky, blurred, tight on mobile. The flex children all
   white-space:nowrap so "Iniciar sesión" / "Comenzar gratis" don't
   wrap to two lines on narrow viewports. The Blog link is hidden
   below 480px to free up horizontal space — the only mobile nav
   that matters is brand-on-left + sign-in / start-free-trial. */
.mkt-nav { position: sticky; top: 0; background: rgba(255,255,255,0.92); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); border-bottom: 1px solid var(--border-lt); z-index: 50; }
.mkt-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; max-width: 1200px; margin: 0 auto; gap: 8px; }
@media (min-width: 720px) { .mkt-nav-inner { padding: 14px 24px; } }
.mkt-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-d); font-size: 17px; font-weight: 800; color: var(--charcoal); letter-spacing: -0.3px; white-space: nowrap; flex-shrink: 0; }
.mkt-brand img { width: 22px; height: 22px; }
.mkt-nav-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
@media (min-width: 720px) { .mkt-nav-actions { gap: 12px; } }
.mkt-nav-link { font-size: 14px; font-weight: 600; color: var(--charcoal-md); padding: 8px 10px; border-radius: var(--radius-pill); transition: background var(--dur-base) var(--ease-out); white-space: nowrap; }
@media (max-width: 480px) {
  /* Blog link is the most expendable on a tiny viewport. The sign-
     in + "Comenzar gratis" CTA do the heavy lifting; Blog lives in
     the footer and is one tap away. */
  .mkt-nav-link.mkt-nav-link--blog { display: none; }
}
.mkt-nav-link:hover { background: var(--cream); text-decoration: none; }
.mkt-nav-cta { background: var(--charcoal); color: var(--white); padding: 9px 16px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 700; transition: transform var(--dur-fast) var(--ease-out); white-space: nowrap; }
@media (min-width: 720px) { .mkt-nav-cta { padding: 9px 18px; } }
.mkt-nav-cta:hover { background: #000; text-decoration: none; transform: scale(0.98); }

/* ── Hero ── */
.mkt-hero { background: linear-gradient(180deg, var(--cream) 0%, var(--white) 60%); padding: 72px 0 48px; position: relative; overflow: hidden; }
.mkt-hero::before { content: ""; position: absolute; top: -120px; right: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, var(--teal-pale) 0%, transparent 70%); pointer-events: none; }
.mkt-hero-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; color: var(--teal-dark); letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 12px; background: var(--teal-pale); border-radius: var(--radius-pill); margin-bottom: 18px; }
.mkt-hero h1 { font-family: var(--font-d); font-size: 48px; font-weight: 800; color: var(--charcoal); letter-spacing: -1.2px; line-height: 1.1; margin-bottom: 16px; max-width: 720px; }
.mkt-hero p.lead { font-size: 18px; color: var(--charcoal-md); line-height: 1.55; max-width: 640px; margin-bottom: 28px; }
@media (max-width: 720px) { .mkt-hero h1 { font-size: 36px; letter-spacing: -0.8px; } .mkt-hero p.lead { font-size: 16px; } }
.mkt-hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.mkt-btn-primary, .mkt-btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 700; font-family: var(--font); border: none; cursor: pointer; text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out); }
.mkt-btn-primary { background: var(--charcoal); color: var(--white); box-shadow: var(--shadow-sm); }
.mkt-btn-primary:hover { background: #000; text-decoration: none; transform: scale(0.99); box-shadow: var(--shadow); }
.mkt-btn-secondary { background: var(--white); color: var(--charcoal); border: 1px solid var(--border); }
.mkt-btn-secondary:hover { border-color: var(--charcoal-md); text-decoration: none; }

/* ── Trust strip ── */
.mkt-trust { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border-lt); }
.mkt-trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--charcoal-md); font-weight: 600; }
.mkt-trust-item svg { color: var(--teal-dark); flex-shrink: 0; }

/* ── Features ── */
.mkt-features-h { font-family: var(--font-d); font-size: 30px; font-weight: 800; color: var(--charcoal); letter-spacing: -0.5px; text-align: center; margin-bottom: 12px; }
.mkt-features-sub { text-align: center; color: var(--charcoal-md); font-size: 16px; margin-bottom: 44px; max-width: 580px; margin-left: auto; margin-right: auto; }
.mkt-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 760px) { .mkt-features-grid { grid-template-columns: 1fr; gap: 14px; } }
.mkt-feature { background: var(--white); border: 1px solid var(--border-lt); border-radius: var(--radius-lg); padding: 24px; transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.mkt-feature:hover { border-color: var(--teal-light); transform: translateY(-2px); }
.mkt-feature-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--teal-pale); color: var(--teal-dark); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.mkt-feature h3 { font-family: var(--font-d); font-size: 16px; font-weight: 800; color: var(--charcoal); margin-bottom: 6px; letter-spacing: -0.2px; }
.mkt-feature p { font-size: 14px; color: var(--charcoal-md); line-height: 1.55; }

/* ── Pricing ── */
.mkt-pricing { background: var(--cream); }
.mkt-pricing-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; max-width: 460px; margin: 0 auto; box-shadow: var(--shadow); text-align: center; }
.mkt-pricing-name { font-size: 12px; font-weight: 700; color: var(--teal-dark); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.mkt-pricing-amount { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-bottom: 8px; }
.mkt-pricing-amount strong { font-family: var(--font-d); font-size: 52px; font-weight: 800; color: var(--charcoal); letter-spacing: -1.5px; line-height: 1; }
.mkt-pricing-amount span { font-size: 14px; font-weight: 600; color: var(--charcoal-md); }
.mkt-pricing-note { font-size: 13px; color: var(--charcoal-xl); margin-bottom: 22px; }
.mkt-pricing-list { list-style: none; padding: 0; margin: 0 0 26px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.mkt-pricing-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--charcoal); line-height: 1.45; }
.mkt-pricing-list li::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; background: var(--teal-pale); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A8799' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-size: 10px 10px; background-repeat: no-repeat; background-position: center; }

/* ── FAQ ── */
.mkt-faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.mkt-faq { background: var(--white); border: 1px solid var(--border-lt); border-radius: var(--radius); padding: 0; transition: border-color var(--dur-base) var(--ease-out); }
.mkt-faq[open] { border-color: var(--teal-light); }
.mkt-faq summary { padding: 18px 20px; font-weight: 700; color: var(--charcoal); font-size: 15px; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mkt-faq summary::-webkit-details-marker { display: none; }
.mkt-faq summary::after { content: ""; width: 16px; height: 16px; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-size: contain; transition: transform var(--dur-base) var(--ease-out); }
.mkt-faq[open] summary::after { transform: rotate(180deg); }
.mkt-faq-body { padding: 0 20px 18px; font-size: 14px; color: var(--charcoal-md); line-height: 1.6; }

/* ── Closing CTA ── */
.mkt-cta { text-align: center; padding: 72px 0; }
.mkt-cta h2 { font-family: var(--font-d); font-size: 30px; font-weight: 800; color: var(--charcoal); letter-spacing: -0.5px; margin-bottom: 12px; }
.mkt-cta p { color: var(--charcoal-md); font-size: 16px; margin-bottom: 24px; }

/* ── Footer ── */
.mkt-footer { background: var(--white); border-top: 1px solid var(--border-lt); padding: 36px 0 24px; }
.mkt-footer-cols { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 32px; max-width: 980px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px) { .mkt-footer-cols { grid-template-columns: 1fr; gap: 22px; text-align: center; } }
.mkt-footer-brand { display: flex; flex-direction: column; gap: 8px; }
.mkt-footer-brand-row { display: flex; align-items: center; gap: 8px; font-family: var(--font-d); font-weight: 800; color: var(--charcoal); font-size: 16px; }
@media (max-width: 720px) { .mkt-footer-brand-row { justify-content: center; } }
.mkt-footer-tag { font-size: 13px; color: var(--charcoal-xl); }
.mkt-footer-cluster-h { font-size: 11px; font-weight: 800; color: var(--charcoal-xl); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.mkt-footer-cluster ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.mkt-footer-cluster a { color: var(--charcoal-md); font-size: 14px; }
.mkt-footer-bottom { text-align: center; font-size: 12px; color: var(--charcoal-xl); margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border-lt); }

/* ── Blog list ── */
.mkt-blog-grid { display: grid; gap: 14px; max-width: 720px; margin: 0 auto; }
.mkt-blog-card { display: block; background: var(--white); border: 1px solid var(--border-lt); border-radius: var(--radius-lg); padding: 22px 24px; color: var(--charcoal); transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.mkt-blog-card:hover { border-color: var(--teal-light); text-decoration: none; transform: translateY(-2px); }
.mkt-blog-card-meta { font-size: 12px; color: var(--charcoal-xl); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; }
.mkt-blog-card h3 { font-family: var(--font-d); font-size: 19px; font-weight: 800; color: var(--charcoal); letter-spacing: -0.3px; margin-bottom: 6px; }
.mkt-blog-card p { font-size: 14px; color: var(--charcoal-md); line-height: 1.55; }

/* ── Article body ── */
.mkt-article { max-width: 680px; margin: 0 auto; padding: 24px; }
.mkt-article-meta { font-size: 12px; color: var(--charcoal-xl); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 12px; }
.mkt-article h1 { font-family: var(--font-d); font-size: 36px; font-weight: 800; color: var(--charcoal); letter-spacing: -0.8px; line-height: 1.15; margin-bottom: 20px; }
.mkt-article h2 { font-family: var(--font-d); font-size: 22px; font-weight: 800; color: var(--charcoal); letter-spacing: -0.3px; margin: 36px 0 12px; }
.mkt-article p { color: var(--charcoal); font-size: 16px; line-height: 1.7; margin-bottom: 16px; }
.mkt-article ul, .mkt-article ol { margin: 0 0 18px 22px; }
.mkt-article li { margin-bottom: 8px; line-height: 1.6; }
.mkt-article-back { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-dark); font-size: 14px; font-weight: 600; margin-bottom: 22px; }

/* ───────────────────────────────────────────────────────────────────
   ENHANCED PROFESSION PAGES — visual primitives that mirror the SPA
   landing's polish. These extend the basic mkt-* primitives above
   with: hero grid (text + phone preview), inline phone-frame mockup,
   mini-mocks strip with row/KPI patterns, three-step "cómo empezar"
   timeline, and reveal-on-scroll animations.

   Naming: every new selector lives under .mkt2-* to keep the v1
   primitives untouched. The blog and patient page still use the v1
   shape; only the profession pages opt into the richer chrome.
   ─────────────────────────────────────────────────────────────────── */

/* Sticky-nav scroll state. JS toggles .mkt-nav--scrolled when the
   hero scrolls out of view, intensifying the blur + adding a subtle
   shadow so the nav reads above content as the user scrolls. */
.mkt-nav { transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.mkt-nav--scrolled { background: rgba(255,255,255,0.96); box-shadow: 0 4px 24px rgba(46,46,46,0.05); }

/* Reveal-on-scroll: items start hidden + offset, JS adds .mkt-in
   when they intersect the viewport. Stagger via --i. Respects
   prefers-reduced-motion (handled at the bottom of this file).

   IMPORTANT — no-js fallback. The hidden initial state is gated on
   the `js` class added to <html> by the inline head-script. If JS
   never runs (slow connection, aggressive content blocker, browser
   bug), the elements stay visible and the page degrades gracefully
   to plain content. The animation only runs when JS confirms it's
   ready to drive it. */
.js .mkt-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-out),
              transform 700ms var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .mkt-reveal.mkt-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hero grid (text + phone preview) ── */
.mkt-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  z-index: 1;
}
@media (max-width: 920px) {
  .mkt-hero-grid { grid-template-columns: 1fr; gap: 36px; }
}
.mkt-hero-copy { max-width: 540px; }
.mkt-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 580px;
  position: relative;
}
@media (max-width: 920px) {
  .mkt-hero-visual { min-height: 0; padding: 12px 0 0; }
}

/* Hero glow — radial-gradient blob behind the phone, gives the page
   the same depth as the SPA landing. Sits in ::after of the hero
   container, pointer-events:none so it doesn't capture clicks. */
.mkt-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.mkt-hero::after {
  content: "";
  position: absolute;
  top: -180px;
  right: -140px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(91,155,175,0.16), rgba(91,155,175,0));
  pointer-events: none;
  z-index: 0;
}

/* ── Phone frame ──
   Inline HTML mockup of the Cardigan home screen. 300px wide, 600px
   tall, charcoal frame with a Dynamic-Island notch. The screen
   inside is a faithful slice of the real Home: status bar, top bar
   with hamburger + brand + refresh, 2x2 KPI grid, "Hoy" section
   title, 3 session rows with status rails, and a floating FAB. */
.mkt-phone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  isolation: isolate;
  animation: mktRise 700ms 200ms var(--ease-spring) both;
}
@keyframes mktRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mkt-phone {
  position: relative;
  width: 300px;
  height: 600px;
  border-radius: 42px;
  background: var(--charcoal);
  padding: 5px;
  box-shadow:
    0 44px 80px rgba(0,0,0,0.14),
    0 14px 30px rgba(0,0,0,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  z-index: 2;
}
.mkt-phone-notch {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 84px; height: 24px;
  background: #000;
  border-radius: 14px;
  z-index: 4;
}
.mkt-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 38px;
  background: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mkt-phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px 0;
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 800;
  color: var(--charcoal);
  height: 40px;
}
.mkt-phone-status-right { display: inline-flex; align-items: end; gap: 2px; height: 12px; }
.mkt-phone-bar { width: 3px; height: 6px; background: var(--charcoal); border-radius: 2px; }
.mkt-phone-bar--tall { height: 10px; }
.mkt-phone-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 10px;
  border-bottom: 1px solid var(--border-lt);
}
.mkt-phone-hamburger {
  display: flex; flex-direction: column; gap: 3px;
  width: 18px;
}
.mkt-phone-hamburger span {
  height: 2px; background: var(--charcoal); border-radius: 1px;
}
.mkt-phone-brand {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 800;
  color: var(--charcoal);
  letter-spacing: -0.2px;
}
.mkt-phone-brand img { width: 13px; height: 13px; }
.mkt-phone-topbar-right { color: var(--charcoal-md); }
.mkt-phone-content {
  flex: 1; padding: 14px 12px 10px; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px;
}
.mkt-phone-kpis {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.mkt-phone-kpi {
  background: var(--cream);
  border-radius: 10px;
  padding: 9px 10px;
  display: flex; flex-direction: column; gap: 1px;
}
.mkt-phone-kpi-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-xl);
}
.mkt-phone-kpi-value {
  font-family: var(--font-d);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--charcoal);
  margin-top: 1px;
}
.mkt-phone-kpi-value--red { color: var(--red); }
.mkt-phone-kpi-meta {
  font-size: 9px;
  font-weight: 600;
  color: var(--charcoal-xl);
}
.mkt-phone-section-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--charcoal-xl);
  padding: 4px 2px 0;
}
.mkt-phone-list {
  display: flex; flex-direction: column; gap: 6px;
}
.mkt-phone-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-left: 3px solid var(--teal);
  border-radius: 9px;
}
.mkt-phone-row--completed { border-left-color: var(--green); }
.mkt-phone-row--scheduled { border-left-color: var(--teal); }
.mkt-phone-row--cancelled { border-left-color: var(--charcoal-xl); }
.mkt-phone-av {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-d);
  font-size: 11px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase;
}
.mkt-phone-row-main { flex: 1; min-width: 0; }
.mkt-phone-row-title {
  font-family: var(--font-d);
  font-size: 12px;
  font-weight: 800;
  color: var(--charcoal);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mkt-phone-row-sub {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--charcoal-lt);
  margin-top: 2px;
}
.mkt-phone-eyebrow {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.mkt-phone-eyebrow--presencial { color: var(--teal-dark); }
.mkt-phone-eyebrow--virtual    { color: #4A8AB5; }
.mkt-phone-eyebrow--telefonica { color: var(--green); }
.mkt-phone-eyebrow--adomicilio { color: var(--amber); }
.mkt-phone-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.mkt-phone-badge--scheduled { background: var(--teal-pale); color: var(--teal-dark); }
.mkt-phone-badge--completed { background: rgba(61,171,116,0.12); color: var(--green); }
.mkt-phone-badge--cancelled { background: var(--cream-dark); color: var(--charcoal-md); }

.mkt-phone-fab {
  position: absolute;
  right: 18px; bottom: 22px;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px rgba(46,46,46,0.22);
  z-index: 3;
}

/* Floating "Próxima" card next to the phone — adds visual depth and
   advertises the calendar density. Hidden on narrow viewports where
   the phone is centered alone. */
.mkt-float-card {
  position: absolute;
  z-index: 3;
  top: 38px;
  right: -4px;
  width: 240px;
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius);
  box-shadow: 0 18px 36px rgba(46,46,46,0.10), 0 4px 10px rgba(46,46,46,0.05);
  padding: 12px 14px;
  animation: mktFloat 800ms 380ms var(--ease-spring) both;
}
@keyframes mktFloat {
  from { opacity: 0; transform: translateY(10px) translateX(8px); }
  to   { opacity: 1; transform: translateY(0) translateX(0); }
}
@media (max-width: 920px) {
  .mkt-float-card { display: none; }
}
.mkt-float-row { display: flex; align-items: center; gap: 10px; }
.mkt-float-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  flex-shrink: 0;
}
.mkt-float-main { flex: 1; min-width: 0; }
.mkt-float-name {
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 800;
  color: var(--charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mkt-float-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--charcoal-lt);
  margin-top: 1px;
}
.mkt-float-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(61,171,116,0.12);
  color: var(--green);
}

/* ── Mini-mocks strip ──
   Three small "slices of the app" between the feature deck and
   pricing card. Each mini is a labeled card that shows a thin row
   of fake data the visitor can scan in a second. */
.mkt-minis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 880px) {
  .mkt-minis { grid-template-columns: 1fr; gap: 14px; }
}
.mkt-mini-card {
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.mkt-mini-card:hover {
  transform: translateY(-3px);
  border-color: var(--teal-light);
  box-shadow: 0 16px 36px rgba(0,0,0,0.06);
}
.mkt-mini-label {
  font-family: var(--font-d);
  font-size: 16px;
  font-weight: 800;
  color: var(--charcoal);
  letter-spacing: -0.01em;
}
.mkt-mini {
  background: var(--cream);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius);
  padding: 14px;
  min-height: 178px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.mkt-mini-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
}
.mkt-mini-row--completed { border-left-color: var(--green); }
.mkt-mini-row--scheduled { border-left-color: var(--teal); }
.mkt-mini-av {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase;
}
.mkt-mini-row-main { flex: 1; min-width: 0; }
.mkt-mini-row-title {
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 800;
  color: var(--charcoal);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mkt-mini-row-sub {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--charcoal-lt);
  margin-top: 2px;
}
.mkt-mini-eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.mkt-mini-eyebrow--presencial { color: var(--teal-dark); }
.mkt-mini-eyebrow--virtual    { color: #4A8AB5; }
.mkt-mini-eyebrow--telefonica { color: var(--green); }
.mkt-mini-eyebrow--adomicilio { color: var(--amber); }
.mkt-mini-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.mkt-mini-badge--scheduled { background: var(--teal-pale); color: var(--teal-dark); }
.mkt-mini-badge--active    { background: var(--teal-pale); color: var(--teal-dark); }
.mkt-mini-badge--completed { background: rgba(61,171,116,0.12); color: var(--green); }
.mkt-mini-tutor {
  font-size: 10px;
  font-weight: 800;
  color: #8B6FB5;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.mkt-mini--finances {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mkt-mini-kpi {
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: 10px;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mkt-mini-kpi-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--charcoal-xl);
}
.mkt-mini-kpi-value {
  font-family: var(--font-d);
  font-size: 22px;
  font-weight: 900;
  color: var(--charcoal);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 2px;
}
.mkt-mini-kpi-value--red { color: var(--red); }
.mkt-mini-kpi-meta {
  font-size: 10px;
  font-weight: 600;
  color: var(--charcoal-xl);
  margin-top: 2px;
}

/* Inline measurement chart inside a mini — 4 vertical bars + an
   annotated trend label. Used by nutritionist / trainer pages to
   show progress visualization without needing a real chart engine. */
.mkt-mini--chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  align-items: stretch;
}
.mkt-chart-head {
  display: flex; align-items: center; justify-content: space-between;
}
.mkt-chart-title {
  font-family: var(--font-d);
  font-size: 12px;
  font-weight: 800;
  color: var(--charcoal);
}
.mkt-chart-delta {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  background: rgba(61,171,116,0.12);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.mkt-chart-bars {
  display: flex; align-items: end; gap: 8px;
  height: 90px;
  padding-top: 6px;
}
.mkt-chart-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--teal-light) 0%, var(--teal) 100%);
  border-radius: 6px 6px 2px 2px;
}
.mkt-chart-axis {
  display: flex; justify-content: space-between;
  font-size: 9px;
  font-weight: 700;
  color: var(--charcoal-xl);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 4px;
}

/* ── Cómo empezar ── 3-step horizontal pill row */
.mkt-start { background: var(--cream); }
.mkt-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 820px;
  flex-wrap: wrap;
}
.mkt-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.mkt-step + .mkt-step { margin-left: 16px; position: relative; }
.mkt-step + .mkt-step::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--border);
}
@media (max-width: 720px) {
  .mkt-steps { flex-direction: column; align-items: stretch; }
  .mkt-step + .mkt-step { margin-left: 0; margin-top: 12px; }
  .mkt-step + .mkt-step::before { display: none; }
}
.mkt-step-num {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-d);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.01em;
}
.mkt-step-label {
  font-family: var(--font-d);
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .mkt-step-label { white-space: normal; }
}

/* Reduced motion — disable reveal/lift transitions for accessibility.
   Forces visibility on every animated primitive, matching the no-js
   fallback. */
@media (prefers-reduced-motion: reduce) {
  .js .mkt-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mkt-phone-wrap { animation: none !important; }
  .mkt-float-card { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
   DARK MODE
   Driven by `prefers-color-scheme: dark` so anonymous visitors get
   the right palette without needing to log in. Mirrors the token
   values from src/styles/dark.css (the SPA app's dark theme) so the
   whole brand stays consistent — a visitor who flips their OS to
   dark mode and pokes around between /pacientes/, /psicologos/, and
   the live app sees one coherent palette.

   Only token overrides — no per-component selectors needed. Every
   .mkt-* primitive above already uses var(--*), so flipping the
   tokens propagates automatically.
   ───────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Primary teal — slightly brighter on dark so it pops against
       the deep neutrals without losing the brand identity. */
    --teal:        #4A9BB0;
    --teal-dark:   #5AADBE;
    --teal-light:  #6DB8CC;
    --teal-pale:   rgba(91,155,175,0.15);
    --teal-mist:   rgba(91,155,175,0.08);

    /* Neutrals: dark-cream surfaces (used by hero, pricing, "cómo
       empezar" backgrounds). Deeper than --white so the layered
       sections still read as raised. */
    --cream:       #2A2A2A;
    --cream-dark:  #333333;
    --cream-deeper:#3D3D3D;

    /* Text */
    --charcoal:    #EAEAEA;
    --charcoal-md: #BFBFBF;
    --charcoal-lt: #999999;
    --charcoal-xl: #888888;

    /* Borders */
    --border:      #3A3A3A;
    --border-lt:   #2E2E2E;

    /* Surfaces */
    --white:       #1A1A1A;

    /* Status — alpha-tinted so the contrast against #1A1A1A stays
       readable. The SPA's dark.css uses identical values. */
    --green:       #4EC98A;
    --red:         #E57777;
    --amber:       #E0B050;
  }

  /* Sticky-nav background uses an explicit RGB above (rgba(255,255,255,…))
     because var(--white) doesn't compose into rgba(). Re-declare here for
     the dark equivalent so the blur stays visible. */
  .mkt-nav { background: rgba(26,26,26,0.86); }
  .mkt-nav--scrolled { background: rgba(26,26,26,0.94); box-shadow: 0 4px 24px rgba(0,0,0,0.35); }

  /* The hero gradient + glow blob also use literal whites; re-tone
     for the dark palette. */
  .mkt-hero { background: linear-gradient(180deg, #222 0%, var(--white) 60%); }
  .mkt-hero::before { background: radial-gradient(circle, rgba(91,155,175,0.20) 0%, transparent 70%); }
  .mkt-hero::after  { background: radial-gradient(closest-side, rgba(91,155,175,0.18), rgba(91,155,175,0)); }

  /* The pricing "Comenzar gratis" primary CTA is `background: var(--charcoal)`
     in light mode (a near-black pill with white text). In dark mode that
     would invert to a near-white pill with dark text — fine, but the
     `:hover { background: #000 }` rule would flip it back to black. Override
     the hover to keep the pill light when the user mouses over it. */
  .mkt-nav-cta:hover { background: #fff; color: #000; }
  .mkt-btn-primary:hover { background: #fff; color: #000; }

  /* Phone frame — preserve the device-bezel charcoal regardless of
     theme so the mockup looks like a phone and not a window into
     the rest of the page. */
  .mkt-phone { background: #0E0E0E; box-shadow: 0 44px 80px rgba(0,0,0,0.55), 0 14px 30px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.05); }
  .mkt-phone-screen { background: var(--white); }
  .mkt-phone-notch { background: #000; }

  /* The chart bars in the inline measurements mockup use a literal
     teal gradient — re-tone to match the dark palette so the bars
     don't read as a bright neon strip on a dark background. */
  .mkt-chart-bar { background: linear-gradient(180deg, #6DB8CC 0%, #4A9BB0 100%); }
}