/* ---------- tokens ----------
   Paleta y tipografía tomadas de la app (app.crmdoctores.com) para que landing
   y producto se lean como una sola marca: crema cálido, verde petróleo, terracota. */
  :root{
    --bg:#f6f4ef;
    --surface:#fffdf9;
    --surface-2:#efebe3;
    --text:#1b2422;
    --text-muted:#56625e;
    --brand:#0e3b3a;
    --brand-strong:#165150;
    --ink:#0e3b3a;
    --accent:#c95c3f;
    --accent-soft:#f7e2d9;
    --accent-text:#ffffff;
    --word:#a84a30;
    --cta:#0e3b3a;
    --cta-hover:#165150;
    --cta-text:#f6f4ef;
    --sage:#a8c3b5;
    --primary-soft:#dce8e3;
    --border:#e2ddd2;
    --chip-bg:#fffdf9;
    --ok:#236a4a; --ok-soft:#dcefe5;
    --warn:#85540b; --warn-soft:#f7ead0;
    --danger:#b0352a; --danger-soft:#f6dcd8;
    --info:#3b6687; --info-soft:#dfe9f1;
    --shadow: 0 1px 2px rgba(27,36,34,.04), 0 12px 32px -12px rgba(27,36,34,.16);
    /* "siempre oscuro": paneles con texto claro fijo (barra del teléfono, stats, CTA final) */
    --radius-lg: 20px;
    --radius-md: 16px;
    --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
    --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0e1412;
      --surface:#151d1a;
      --surface-2:#1c2622;
      --text:#e8eeea;
      --text-muted:#a3b0aa;
      --brand:#7cc4b2;
      --brand-strong:#97d3c4;
      --ink:#13312d;
      --accent:#ee8b6e;
      --accent-soft:#3a2119;
      --accent-text:#0e1412;
      --word:#ee8b6e;
      --cta:#7cc4b2;
      --cta-hover:#97d3c4;
      --cta-text:#0e1412;
      --sage:#4f6d60;
      --primary-soft:#1d3731;
      --border:#2a3631;
      --chip-bg:#1c2622;
      --ok:#6cc79b; --ok-soft:#16301f;
      --warn:#e3b05c; --warn-soft:#33280f;
      --danger:#f0877a; --danger-soft:#3b1a16;
      --info:#8db8d9; --info-soft:#172836;
      --shadow: 0 1px 2px rgba(0,0,0,.2), 0 16px 40px -16px rgba(0,0,0,.55);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0e1412;
    --surface:#151d1a;
    --surface-2:#1c2622;
    --text:#e8eeea;
    --text-muted:#a3b0aa;
    --brand:#7cc4b2;
    --brand-strong:#97d3c4;
    --ink:#13312d;
    --accent:#ee8b6e;
    --accent-soft:#3a2119;
    --accent-text:#0e1412;
    --word:#ee8b6e;
    --cta:#7cc4b2;
    --cta-hover:#97d3c4;
    --cta-text:#0e1412;
    --sage:#4f6d60;
    --primary-soft:#1d3731;
    --border:#2a3631;
    --chip-bg:#1c2622;
    --ok:#6cc79b; --ok-soft:#16301f;
    --warn:#e3b05c; --warn-soft:#33280f;
    --danger:#f0877a; --danger-soft:#3b1a16;
    --info:#8db8d9; --info-soft:#172836;
    --shadow: 0 1px 2px rgba(0,0,0,.2), 0 16px 40px -16px rgba(0,0,0,.55);
  }

  :root{
    --space-section:120px;
    --space-section-sm:72px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;color:var(--text);}
  p{margin:0;}
  a{color:inherit;}
  ::selection{background:var(--cta);color:var(--cta-text);}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
  /* every section fills at least one full view — content centers vertically inside it,
     so the margin around a short section (final CTA) is generous by construction
     instead of a fixed padding number. min-height is a floor, not a cap: a section whose
     content genuinely needs more room (the price card, the FAQ grid) just grows past it.
     The stats bar is the one deliberate exception — it's a single thin strip, not a
     "screen" of its own, so it opts out via .stats-section below. */
  section{
    min-height:100vh;
    min-height:100svh;
    display:flex;flex-direction:column;justify-content:center;
    padding:var(--space-section) 0;
  }
  @media (max-width:720px){ section{padding:var(--space-section-sm) 0;} }
  .stats-section{
    min-height:0;
    padding:64px 0;
  }
  @media (max-width:720px){ .stats-section{padding:48px 0;} }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:0.09em;
    text-transform:uppercase;
    color:var(--brand);
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:color-mix(in srgb, var(--surface) 72%, transparent);
    border:1px solid var(--border);
    padding:7px 14px 7px 10px;
    border-radius:999px;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .eyebrow::before{
    content:"";
    width:7px;height:7px;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
    flex:none;
  }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:40;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .headbar{
    display:flex;align-items:center;justify-content:space-between;
    gap:24px;
    width:100%;
    padding:14px clamp(20px,4vw,56px);
  }
  .logo{
    text-decoration:none;color:inherit;
    display:flex;align-items:center;gap:9px;
    font-family:var(--font-display);
    font-style:italic;
    font-weight:500;
    font-size:23px;
    letter-spacing:-0.01em;
  }
  .logo::before{
    content:"";flex:none;
    width:9px;height:9px;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .logo b{font-style:normal;font-weight:600;color:var(--brand);}
  nav.links{display:flex;gap:2px;font-size:14.5px;font-weight:500;}
  nav.links a{
    text-decoration:none;color:var(--text-muted);
    padding:9px 15px;border-radius:999px;
    transition:color .15s ease, background .15s ease;
  }
  nav.links a:hover{color:var(--text);background:color-mix(in srgb, var(--surface) 75%, transparent);}
  @media (max-width:760px){ nav.links{display:none;} }

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    font-family:var(--font-body);font-weight:600;font-size:15px;
    border-radius:999px;border:1px solid transparent;
    padding:13px 24px;cursor:pointer;text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    white-space:nowrap;
    max-width:100%;
  }
  /* nowrap + fixed padding can make a long label wider than a narrow phone screen —
     let it wrap onto two lines there instead of overflowing/getting clipped */
  @media (max-width:400px){ .btn{white-space:normal;text-align:center;} }
  .btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
  .btn-cta{background:var(--cta);color:var(--cta-text);box-shadow:var(--shadow);}
  .btn-cta:hover{
    background:var(--cta-hover);transform:translateY(-1px);
    box-shadow:0 22px 44px -20px color-mix(in srgb, var(--cta) 60%, transparent), var(--shadow);
  }
  .btn-ghost{background:transparent;color:var(--text);border-color:var(--border);}
  .btn-ghost:hover{border-color:var(--brand);color:var(--brand);background:color-mix(in srgb, var(--surface) 60%, transparent);backdrop-filter:blur(8px);}
  .hero-ctas .btn-cta{
    box-shadow:0 24px 48px -22px color-mix(in srgb, var(--cta) 55%, transparent), var(--shadow);
  }
  .btn-sm{padding:9px 18px;font-size:13.5px;}
  .btn svg{width:18px;height:18px;flex:none;}

  /* ---------- hero ---------- */
  /* .hero is a true full-width section (no wrap/max-width on it) — content is centered
     via the inner .hero-inner.wrap div, so backgrounds never need a -50vw breakout hack.
     No shader, no gradient wash: the background is a repeating hand-drawn icon pattern
     (chat bubble, clock, calendar, pulse, check, phone — a nod to WhatsApp's own chat
     wallpaper) plus one flat-color blob shape. Signature and on-brand, not "AI SaaS #47". */
  .hero{
    position:relative;isolation:isolate;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;
    min-height:100vh;
    min-height:100svh;
    padding:80px 0 var(--space-section);
  }
  @media (max-width:720px){ .hero{padding:56px 0 var(--space-section-sm);} }
  .hero-inner{width:100%;position:relative;z-index:1;}

  .hero-doodles{
    position:absolute;inset:0;z-index:0;
    width:100%;height:100%;
    color:var(--brand);
    opacity:.16;
    pointer-events:none;
  }
  .hero-blob{
    position:absolute;top:-10%;right:-16%;z-index:0;
    width:min(620px,58vw);height:auto;
    color:var(--accent-soft);
    pointer-events:none;
  }
  .hero-blob path{fill:currentColor;}
  @media (max-width:900px){ .hero-blob{display:none;} }

  .hero-grid{ position:relative; z-index:1; }

  /* ---------- editorial stacked headline ---------- */
  .h1-line{ display:block; }
  .h1-accent{
    display:block; position:relative;
    font-style:italic;
    color:var(--word);
    font-size:clamp(44px,7.5vw,84px);
    line-height:1;
    margin:2px 0 0.22em;
  }
  .h1-underline{
    position:absolute; left:1px; bottom:-0.32em;
    width:56%; height:auto;
    overflow:visible;
    color:var(--accent);
  }

  /* ---------- hero entrance animation ---------- */
  @keyframes hero-in{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @media (prefers-reduced-motion: no-preference){
    .hero .eyebrow{ animation:hero-in .7s cubic-bezier(.16,1,.3,1) both; }
    .hero h1{ animation:hero-in .7s cubic-bezier(.16,1,.3,1) .08s both; }
    .hero p.lede{ animation:hero-in .7s cubic-bezier(.16,1,.3,1) .16s both; }
    .hero .hero-ctas{ animation:hero-in .7s cubic-bezier(.16,1,.3,1) .24s both; }
    .hero .trust-badge{ animation:hero-in .7s cubic-bezier(.16,1,.3,1) .32s both; }
    .hero .phone-stage{ animation:hero-in .8s cubic-bezier(.16,1,.3,1) .2s both; }
  }

  .hero-grid{
    display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:center;
  }
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:40px;} }

  .hero h1{
    font-size:clamp(27px,3.6vw,38px);
    line-height:1.08;
    font-weight:500;
    letter-spacing:-0.01em;
    margin:18px 0 26px;
  }
  .hero p.lede{
    font-size:18px;max-width:46ch;margin-bottom:28px;
  }
  .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:22px;}
  .trust-badge{
    display:inline-flex;align-items:center;gap:9px;
    font-size:13.5px;color:var(--text-muted);
    background:color-mix(in srgb, var(--surface) 72%, transparent);border:1px solid var(--border);
    padding:8px 14px;border-radius:999px;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
  .trust-badge svg{width:15px;height:15px;color:var(--accent);flex:none;}

  /* ---------- floating decorative chips (hero) ---------- */
  .float-chip{
    position:absolute;z-index:2;
    display:inline-flex;align-items:center;gap:7px;
    background:color-mix(in srgb, var(--surface) 80%, transparent);
    border:1px solid var(--border);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-radius:999px;padding:9px 15px 9px 11px;
    font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--text);
    box-shadow:var(--shadow);
    pointer-events:none;
  }
  .float-chip svg{width:15px;height:15px;color:var(--accent);flex:none;}
  .float-chip-1{top:58px;left:-18px;}
  .float-chip-2{bottom:46px;right:-14px;}
  @media (max-width:900px){ .float-chip{display:none;} }
  @media (prefers-reduced-motion: no-preference){
    .float-chip-1{animation:chip-float 5s ease-in-out infinite;}
    .float-chip-2{animation:chip-float 5.6s ease-in-out infinite;animation-delay:.4s;}
  }
  @keyframes chip-float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
  }

  /* ---------- phone mock ---------- */
  /* card language reused from .step / .benefit: surface + border + radius-lg + shadow */
  .phone-stage{
    position:relative;display:flex;justify-content:center;
    padding:20px 0;
  }
  .phone-glow{
    position:absolute;inset:-40px;z-index:0;
    background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
    filter:blur(6px);
    pointer-events:none;
  }
  @media (prefers-reduced-motion: no-preference){
    .phone-glow{ animation:glow-drift 7s ease-in-out infinite alternate; }
  }
  @keyframes glow-drift{
    from{ transform:translate(-6px,-4px) scale(1); }
    to{ transform:translate(6px,6px) scale(1.05); }
  }
  .phone{
    position:relative;z-index:1;
    width:min(340px,86vw);
    background:var(--surface-2);
    border-radius:38px;
    border:1px solid var(--border);
    padding:14px;
    box-shadow:var(--shadow);
  }
  .phone-screen{
    background:var(--surface);
    border-radius:26px;
    overflow:hidden;
    display:flex;flex-direction:column;
    height:520px;
  }
  .phone-bar{
    display:flex;align-items:center;gap:10px;
    padding:14px 16px;background:var(--ink);color:#fff;
  }
  .phone-bar .av{
    width:34px;height:34px;border-radius:50%;
    background:rgba(255,255,255,0.18);
    display:flex;align-items:center;justify-content:center;font-size:15px;flex:none;
  }
  .phone-bar .who b{display:block;font-size:14.5px;font-weight:600;}
  .phone-bar .who span{display:block;font-size:11.5px;opacity:.8;}
  .phone-thread{
    flex:1;padding:14px;display:flex;flex-direction:column;gap:9px;
    overflow-y:auto;background:
      linear-gradient(var(--surface),var(--surface)) ;
  }
  .bubble{
    max-width:78%;padding:9px 13px;border-radius:16px;font-size:13.5px;
    line-height:1.42;
    opacity:0;transform:translateY(6px);
    animation:bubble-in .35s ease forwards;
  }
  @keyframes bubble-in{to{opacity:1;transform:translateY(0);}}
  .bubble.bot{
    align-self:flex-start;background:var(--surface-2);color:var(--text);
    border-bottom-left-radius:4px;
  }
  .bubble.user{
    align-self:flex-end;background:var(--primary-soft);color:var(--text);
    border-bottom-right-radius:4px;
  }
  .bubble .tick{
    font-family:var(--font-mono);font-size:9.5px;opacity:.65;display:block;margin-top:4px;
  }
  .typing{
    align-self:flex-start;display:flex;gap:4px;padding:10px 13px;
    background:var(--surface-2);border-radius:16px;border-bottom-left-radius:4px;
    width:fit-content;
  }
  .typing span{
    width:6px;height:6px;border-radius:50%;background:var(--text-muted);
    animation:typing-bounce 1.1s infinite ease-in-out;
  }
  .typing span:nth-child(2){animation-delay:.15s;}
  .typing span:nth-child(3){animation-delay:.3s;}
  @keyframes typing-bounce{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}

  .phone-input{
    display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);background:var(--surface);
  }
  .phone-input input{
    flex:1;border:1px solid var(--border);border-radius:999px;
    padding:9px 14px;font-size:13.5px;font-family:var(--font-body);
    background:var(--bg);color:var(--text);
  }
  .phone-input input:focus-visible{outline:2px solid var(--brand);}
  .phone-input button{
    width:36px;height:36px;border-radius:50%;border:none;background:var(--cta);
    color:var(--cta-text);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
  }
  .phone-input button svg{width:16px;height:16px;}
  .demo-caption{
    text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);
    margin-top:12px;letter-spacing:.02em;
  }

  /* ---------- stats bar ---------- */
  /* flat color block, not a gradient panel — same "signature, not generic" rule as the hero */
  .stats{
    position:relative;overflow:hidden;
    background:var(--ink);
    color:#fff;border-radius:var(--radius-lg);
    padding:44px 8px;
  }
  .stats::before{
    content:"";
    position:absolute;inset:0;
    background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px);
    background-size:22px 22px;
    pointer-events:none;
  }
  .stats-grid{
    position:relative;z-index:1;
    display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;
  }
  @media (max-width:720px){ .stats-grid{grid-template-columns:1fr;gap:28px;} }
  .stat + .stat{ border-left:1px solid rgba(255,255,255,.18); }
  @media (max-width:720px){ .stat + .stat{ border-left:none; border-top:1px solid rgba(255,255,255,.18); padding-top:20px; } }
  .stat b{
    display:block;font-family:var(--font-display);font-size:clamp(28px,4vw,40px);
    font-weight:450;font-variant-numeric:tabular-nums;color:#fff;
  }
  .stat span{display:block;font-size:13.5px;color:rgba(255,255,255,.72);margin-top:6px;max-width:26ch;margin-inline:auto;}

  /* ---------- section heads ---------- */
  /* every section head gets one italic/colored accent word — same move as the hero's "nunca",
     scaled down — the throughline that makes the page read as one designed system */
  .section-head{max-width:56ch;margin-bottom:48px;}
  .section-head h2{font-size:clamp(26px,3.4vw,36px);font-weight:500;margin-bottom:12px;}
  .section-head p{color:var(--text-muted);font-size:16px;}
  .h2-accent{font-style:italic;color:var(--word);}

  /* ---------- how it works: sticky-scroll timeline (Aceternity "Features with Sticky
     Scroll" / "Timeline" pattern) — both columns are pinned together (.steps-pin) inside
     a tall runway (.steps-pin-wrap) so the section can't be scrolled past in one flick;
     scroll position within that runway drives which step is active, with a progress beam.
     Not another 4-card grid. */
  .steps-pin-wrap{position:relative;height:320vh;}
  @media (max-width:900px){ .steps-pin-wrap{height:auto;} }
  /* centers the pinned content INSIDE a viewport-tall sticky box (flexbox),
     instead of shifting the box itself with a transform — a transform-based
     center can overshoot and overlap the section head above it. */
  .steps-pin{
    position:sticky;top:68px;
    height:calc(100vh - 68px);height:calc(100svh - 68px);
    display:flex;align-items:center;
  }
  @media (max-width:900px){ .steps-pin{position:static;height:auto;display:block;} }

  .steps-scroll{
    width:100%;
    display:grid;grid-template-columns:1fr 0.85fr;gap:56px;align-items:start;
  }
  @media (max-width:900px){ .steps-scroll{grid-template-columns:1fr;} }

  .steps-track{position:relative;padding-left:32px;}
  .steps-beam{
    position:absolute;left:0;top:6px;bottom:6px;width:2px;
    background:var(--border);border-radius:2px;
  }
  .steps-beam-fill{
    position:absolute;top:0;left:0;width:100%;height:25%;
    background:var(--cta);border-radius:2px;
    transition:height .45s cubic-bezier(.16,1,.3,1);
  }
  .step-trigger{
    padding:26px 0 26px 20px;opacity:.45;
    transition:opacity .3s ease;
  }
  .step-trigger.is-active{opacity:1;}
  .step-trigger-num{
    font-family:var(--font-mono);font-size:12.5px;color:var(--brand);
    display:block;margin-bottom:8px;
  }
  .step-trigger h3{font-size:17px;font-weight:600;font-family:var(--font-body);margin-bottom:6px;}
  .step-trigger p{font-size:14px;color:var(--text-muted);max-width:44ch;}
  @media (min-width:901px){ .step-trigger p{display:none;} }
  @media (max-width:900px){ .step-trigger{opacity:1;} }

  @media (max-width:900px){ .steps-display{display:none;} }
  .steps-display-card{
    position:relative;overflow:hidden;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
    box-shadow:var(--shadow);padding:44px 36px;
  }
  .steps-display-num{
    display:block;font-family:var(--font-display);font-style:italic;font-weight:600;
    font-size:88px;line-height:1;color:var(--word);margin-bottom:16px;
  }
  .steps-display-title{font-size:23px;font-weight:500;margin-bottom:14px;}
  .steps-display-desc{color:var(--text-muted);font-size:15.5px;}

  /* ---------- benefits: bento grid (Aceternity/Magic UI "Bento Grid" pattern) —
     asymmetric tile sizes signal which benefit matters most, instead of four
     identical boxes in a row. Zigzags 2/1 then 1/2 across a 3-col track. */
  .benefits{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
    counter-reset:benefit;
  }
  .benefit-wide{grid-column:span 2;}
  @media (max-width:720px){
    .benefits{grid-template-columns:1fr;}
    .benefit-wide{grid-column:auto;}
  }
  .benefit{
    counter-increment:benefit;
    display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:28px 24px;position:relative;overflow:hidden;
    transition:transform .2s ease-out, box-shadow .2s ease-out;
  }
  .benefit:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
  .benefit::before{
    content:counter(benefit,decimal-leading-zero);
    position:absolute;right:10px;bottom:-28px;
    font-family:var(--font-display);font-style:italic;font-weight:600;
    font-size:92px;line-height:1;
    color:var(--border);
    pointer-events:none;
  }
  .benefit .ic{
    width:42px;height:42px;border-radius:50%;background:transparent;
    border:1.6px solid var(--accent);color:var(--accent);
    display:flex;align-items:center;justify-content:center;flex:none;
    position:relative;z-index:1;
  }
  .benefit .ic svg{width:20px;height:20px;}
  .benefit > div{position:relative;z-index:1;}
  .benefit h3{font-size:16px;font-weight:600;font-family:var(--font-body);margin-bottom:5px;}
  .benefit p{font-size:14px;color:var(--text-muted);}


  /* ---------- pricing ---------- */
  .price-card{
    position:relative;
    background:var(--surface);border:1px solid var(--brand);border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    display:grid;grid-template-columns:1fr 1fr;
    max-width:880px;margin:0 auto;overflow:hidden;
  }
  .price-card::before{
    content:"";
    position:absolute;inset:0;z-index:0;
    background-image:radial-gradient(color-mix(in srgb, var(--brand) 16%, transparent) 1px, transparent 1.4px);
    background-size:24px 24px;
    pointer-events:none;
  }
  @media (max-width:760px){ .price-card{grid-template-columns:1fr;} }
  .price-addon{
    position:relative;z-index:1;
    padding:20px 32px;background:var(--accent-soft);
    border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    display:flex;gap:14px;align-items:flex-start;
  }
  .price-addon svg{width:20px;height:20px;color:var(--brand);flex:none;margin-top:2px;}
  .price-addon b{display:block;font-family:var(--font-body);font-size:14.5px;color:var(--brand);margin-bottom:3px;}
  .price-addon p{font-size:13.5px;color:var(--text-muted);max-width:60ch;margin:0;}
  .price-foot{
    position:relative;z-index:1;
    padding:24px 32px;background:var(--surface-2);
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  }
  .price-foot p{font-size:13.5px;color:var(--text-muted);max-width:44ch;}
  .price-note{
    text-align:center;font-size:13.5px;color:var(--text-muted);max-width:56ch;margin:22px auto 0;
  }

  /* ---------- final cta ---------- */
  /* the one deliberately dark, bold moment on an otherwise light page — reserved for
     the actual conversion point. Flat brand-strong panel (same recipe as the stats bar),
     the hero's doodle pattern reused via <use>, and a pulsing glow on the button so the
     last thing a visitor sees before the footer is unmistakably "click here". */
  .final-cta{
    position:relative;overflow:hidden;
    background:var(--ink);
    border:none;
    color:#fff;border-radius:var(--radius-lg);
    padding:64px 40px;text-align:center;
  }
  @media (max-width:480px){ .final-cta{padding:48px 20px;} }
  .cta-doodles{
    position:absolute;inset:0;z-index:0;
    color:#fff;opacity:.08;
    pointer-events:none;
  }
  /* ---------- final CTA: two columns — the WhatsApp CTA and the mailto
     fallback form for visitors not ready to write — split by a vertical
     rule, stacked on narrow screens. Kept inside one flat panel instead of
     a second section below it, so the block still reads as one deliberate
     "screen" instead of two disconnected pieces. */
  .final-cta-grid{
    position:relative;z-index:1;
    display:grid;grid-template-columns:1.1fr auto 1fr;
    align-items:center;gap:40px;
    text-align:left;
  }
  @media (max-width:880px){
    .final-cta-grid{grid-template-columns:1fr;gap:36px;text-align:center;}
  }
  .final-cta h2{color:#fff;font-size:clamp(26px,3.2vw,38px);margin-bottom:14px;}
  .final-cta .h2-accent{color:#f0a68e;}
  .final-cta-col > p{color:rgba(255,255,255,.72);margin:0 0 24px;font-size:15.5px;}
  @media (max-width:880px){ .final-cta-col > p{max-width:42ch;margin-inline:auto;} }
  .final-cta .btn-cta{font-size:15.5px;padding:15px 30px;max-width:100%;}
  @media (max-width:480px){ .final-cta .btn-cta{font-size:14.5px;padding:14px 20px;white-space:normal;} }
  @media (prefers-reduced-motion: no-preference){
    .final-cta .btn-cta{animation:cta-pulse 2.6s ease-in-out infinite;}
  }
  @keyframes cta-pulse{
    0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--cta) 55%, transparent), var(--shadow);}
    50%{box-shadow:0 0 0 16px color-mix(in srgb, var(--cta) 0%, transparent), var(--shadow);}
  }

  .final-cta-divider{
    width:1px;align-self:stretch;background:rgba(255,255,255,.16);
  }
  @media (max-width:880px){ .final-cta-divider{width:100%;height:1px;align-self:auto;} }

  .final-cta-col-alt h3{color:#fff;font-family:var(--font-body);font-size:18.5px;font-weight:600;margin-bottom:8px;}
  .final-cta-col-alt > p{font-size:14.5px;margin-bottom:18px;}
  .lead-form{
    display:flex;flex-wrap:wrap;gap:10px;
  }
  @media (max-width:880px){ .lead-form{justify-content:center;max-width:420px;margin-inline:auto;} }
  .lead-form input{
    flex:1 1 150px;min-width:0;border:1px solid rgba(255,255,255,.24);border-radius:999px;
    padding:11px 16px;font-size:14px;font-family:var(--font-body);
    background:rgba(255,255,255,.08);color:#fff;
  }
  .lead-form input::placeholder{color:rgba(255,255,255,.55);}
  .lead-form input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .btn-ghost-dark{
    background:transparent;color:#fff;border-color:rgba(255,255,255,.4);flex:none;
  }
  .btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.1);}
  .lead-form-note{
    margin-top:12px;font-size:13px;color:rgba(255,255,255,.65);
  }
  .lead-form-note a{color:#fff;}

  footer{
    border-top:1px solid var(--border);padding:32px 0;
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  }
  footer p{font-size:13px;color:var(--text-muted);}

  /* ---------- scroll progress (native CSS scroll-driven animation) ---------- */
  .scroll-progress{
    position:fixed;top:0;left:0;height:3px;width:100%;
    background:linear-gradient(90deg, var(--brand), var(--accent), var(--cta));
    transform-origin:0 50%;
    transform:scaleX(0);
    z-index:60;
  }
  @supports (animation-timeline: scroll()){
    @media (prefers-reduced-motion: no-preference){
      .scroll-progress{
        animation: grow-progress linear both;
        animation-timeline: scroll(root);
      }
    }
  }
  @keyframes grow-progress{ from{transform:scaleX(0);} to{transform:scaleX(1);} }

  /* ---------- cursor lightspot ---------- */
  .cursor-spot{
    position:fixed;inset:0;z-index:35;
    pointer-events:none;
    opacity:0;
    transition:opacity .4s ease;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,40%), color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  }
  .cursor-spot.is-active{opacity:1;}

  /* ---------- scroll reveal: blur-fade (Aceternity/Magic UI pattern), driven by IntersectionObserver ----------
     works in every browser — CSS animation-timeline:view() only ships in recent Chromium.
     html.js gate avoids ever hiding content if JS fails to run. */
  html.js .reveal{
    opacity:0;
    transform:translateY(24px);
    filter:blur(8px);
  }
  html.js .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
  @media (prefers-reduced-motion: no-preference){
    html.js .reveal{
      transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), filter .7s cubic-bezier(.16,1,.3,1);
    }
    html.js .reveal.reveal-1{ transition-delay:0s; }
    html.js .reveal.reveal-2{ transition-delay:.08s; }
    html.js .reveal.reveal-3{ transition-delay:.16s; }
    html.js .reveal.reveal-4{ transition-delay:.24s; }
  }

  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
  }

/* =====================================================================
   Rediseño sobre el diseño original: piezas nuevas para todo lo que agregó la app.
   Ideas adaptadas de patrones de 21st.dev (scroll story, partition bar,
   plan finder, FAQ en chat, placas de clientes), con la paleta de la app.
   ===================================================================== */

/* ---------- header ---------- */
.head-actions{display:flex;align-items:center;gap:8px;}
@media (max-width:520px){ .hide-sm{display:none;} }
.final-cta .btn-cta{background:#f6f4ef;color:#0e3b3a;}
.final-cta .btn-cta:hover{background:#fff;}
@keyframes cta-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(201,92,63,.55), var(--shadow);}
  50%{box-shadow:0 0 0 16px rgba(201,92,63,0), var(--shadow);}
}
.eyebrow{color:var(--word);}

/* ---------- pills de estado (mismo lenguaje que la app) ---------- */
.pill{
  display:inline-flex;align-items:center;gap:5px;font-style:normal;
  font-size:11.5px;font-weight:500;line-height:1.2;white-space:nowrap;
  padding:4px 10px;border-radius:999px;
}
.pill svg{width:12px;height:12px;flex:none;}
.pill-ok{background:var(--ok-soft);color:var(--ok);}
.pill-warn{background:var(--warn-soft);color:var(--warn);}
.pill-danger{background:var(--danger-soft);color:var(--danger);}
.pill-info{background:var(--info-soft);color:var(--info);}
.pill-accent{background:var(--accent-soft);color:var(--word);}
.pill-wa{background:#25d366;color:#fff;}

/* ---------- hero: tarjeta de agenda sincronizada con el chat ---------- */
.sync-card{
  position:absolute;z-index:2;right:-36px;bottom:34px;width:260px;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow);padding:12px 14px 6px;
}
.sync-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.sync-head b{font-family:var(--font-display);font-weight:500;font-size:15px;}
.sync-live{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;}
.sync-live i{width:6px;height:6px;border-radius:50%;background:#25d366;box-shadow:0 0 0 3px rgba(37,211,102,.2);}
.sync-row{display:grid;grid-template-columns:38px 1fr auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--border);font-size:12.5px;}
.sync-row time{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);}
.sync-row span{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* la fila nueva queda colapsada hasta que la asistente confirma la cita */
html.js .sync-new{
  max-height:0;padding-block:0;opacity:0;overflow:hidden;border-top-color:transparent;
  transition:max-height .5s cubic-bezier(.16,1,.3,1), padding .5s cubic-bezier(.16,1,.3,1), opacity .4s ease .1s;
}
html.js .sync-new.is-in{max-height:60px;padding-block:8px;opacity:1;border-top-color:var(--border);animation:sync-flash 1.6s ease .2s;}
@keyframes sync-flash{0%,100%{background:transparent;}30%{background:color-mix(in srgb, #25d366 14%, transparent);}}
.float-chip-1{top:40px;left:-28px;}
@media (max-width:1180px){ .sync-card{right:-8px;} }
@media (max-width:900px){
  .phone-stage{flex-direction:column;align-items:center;}
  .sync-card{position:relative;right:auto;bottom:auto;width:min(340px,86vw);margin:-28px auto 0;order:2;}
}

/* ---------- placas de ARS ---------- */
.ars-plates{margin-top:28px;display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;justify-content:center;}
.ars-plates-label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);}
.ars-plates ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.ars-plates li{
  padding:9px 16px;border-radius:12px;
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(27,36,34,.06);
}
.ars-plates b{font-family:var(--font-display);font-weight:500;font-size:15px;color:var(--text-muted);letter-spacing:-.01em;}

/* ---------- un día en el consultorio: escenas por paso ---------- */
.step-trigger-num{font-size:12px;color:var(--word);}
.steps-display-card{padding:28px;min-height:360px;display:grid;}
.scene{grid-area:1/1;display:flex;flex-direction:column;gap:14px;opacity:0;transform:translateY(10px);transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1);pointer-events:none;}
.scene.is-active{opacity:1;transform:none;}
.scene-tag{
  display:inline-flex;align-items:center;gap:7px;width:fit-content;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand);background:var(--primary-soft);padding:6px 11px;border-radius:999px;
}
.scene-tag svg{width:14px;height:14px;}
.scene-chat{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;background:var(--surface-2);}
.bubble.static{opacity:1;transform:none;animation:none;max-width:85%;}
.scene-chat .bubble.bot{background:var(--surface);}
.scene-foot{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--ok);}
.scene-foot svg{width:16px;height:16px;}
.scene-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.scene-list > div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;font-size:13.5px;}
.scene-list > div + div{border-top:1px solid var(--border);}
.scene-list span{display:flex;align-items:baseline;gap:10px;min-width:0;}
.scene-list span:has(small){flex-direction:column;gap:1px;}
.scene-list b{font-weight:600;}
.scene-list small{color:var(--text-muted);font-size:12px;}
.scene-list time{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);}
.scene-alert{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border-radius:12px;background:var(--danger-soft);color:var(--danger);font-size:13px;}
.scene-alert svg{width:16px;height:16px;flex:none;margin-top:1px;}
.scene-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.scene-kpis > div{border:1px solid var(--border);border-radius:14px;padding:12px 14px;}
.scene-kpis small{display:block;font-size:12px;color:var(--text-muted);}
.scene-kpis b{font-family:var(--font-display);font-weight:450;font-size:30px;}
.scene-kpis .kpi-dark{background:#0e3b3a;border-color:#0e3b3a;color:#f6f4ef;}
.scene-kpis .kpi-dark small{color:#b9cfc6;}
.scene-receipt{border:1px dashed var(--border);border-radius:14px;padding:6px 16px;}
.scene-receipt > div{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:14px;}
.scene-receipt > div + div{border-top:1px solid var(--border);}
.scene-receipt b{font-variant-numeric:tabular-nums;font-weight:600;}
.scene-receipt .muted{color:var(--text-muted);font-family:var(--font-mono);font-size:12px;}
.scene-receipt .total span{font-weight:600;}
.scene-receipt .total b{font-family:var(--font-display);font-weight:500;font-size:24px;}

/* ---------- funciones: extras dentro del bento ---------- */
.benefit{border-radius:var(--radius-lg);}
.benefit .ic svg{width:20px;height:20px;}
.mini-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.mini-chips span{font-size:12px;padding:5px 11px;border-radius:999px;background:var(--primary-soft);color:var(--brand);font-weight:500;}
.mini-ars{display:flex;flex-direction:column;gap:6px;margin-top:14px;}
.mini-ars > div{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:9px 12px;border-radius:12px;background:var(--bg);font-size:13px;}
.mini-ars b{font-variant-numeric:tabular-nums;font-weight:600;}
.partition{margin-top:16px;}
.partition-bar{display:flex;gap:4px;height:14px;}
.partition-bar i{width:var(--w);border-radius:999px;background:var(--brand);transform-origin:left;transition:transform 1s cubic-bezier(.16,1,.3,1) .25s;}
.partition-bar i:nth-child(2){background:var(--accent);}
.partition-bar i:nth-child(3){background:var(--sage);}
.partition-bar i:nth-child(4){background:var(--warn);}
html.js .benefit:not(.is-visible) .partition-bar i{transform:scaleX(0);}
.partition-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12.5px;color:var(--text-muted);}
.partition-legend span{display:inline-flex;align-items:center;gap:6px;}
.partition-legend b{color:var(--text);font-weight:600;}
.partition-legend i{width:8px;height:8px;border-radius:50%;background:var(--brand);}
.partition-legend span:nth-child(2) i{background:var(--accent);}
.partition-legend span:nth-child(3) i{background:var(--sage);}
.partition-legend span:nth-child(4) i{background:var(--warn);}
.benefits-more{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;margin-top:28px;font-size:14.5px;color:var(--text-muted);}
.benefits-more svg{width:18px;height:18px;flex:none;color:var(--word);}

/* ---------- planes: buscador + 3 columnas dentro de la tarjeta original ---------- */
.price-card{display:block;max-width:980px;border-color:var(--border);}
.plan-finder{
  position:relative;z-index:1;margin:0;border:0;border-bottom:1px solid var(--border);
  padding:22px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:color-mix(in srgb, var(--surface-2) 60%, transparent);
}
.plan-finder legend{float:left;font-weight:600;font-size:14.5px;margin-right:8px;padding:0;}
.plan-finder label{position:relative;cursor:pointer;}
.plan-finder input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0;}
.plan-finder span{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);font-size:13.5px;font-weight:500;
  transition:background .2s, border-color .2s, color .2s;
}
.plan-finder span::before{
  content:"";width:15px;height:15px;border-radius:5px;border:1.5px solid var(--text-muted);flex:none;
  transition:background .2s, border-color .2s;
}
.plan-finder input:checked + span{background:var(--primary-soft);border-color:var(--brand);color:var(--brand);}
.plan-finder input:checked + span::before{
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23f6f4ef' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
  border-color:var(--brand);
}
.plan-finder input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px;}
.plans{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);}
.plan{position:relative;padding:30px 28px;display:flex;flex-direction:column;transition:background .35s ease, opacity .35s ease, padding .3s ease;}
.plan + .plan{border-left:1px solid var(--border);}
.plan .tag{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand);background:var(--primary-soft);display:inline-block;
  padding:4px 10px;border-radius:999px;margin-bottom:14px;width:fit-content;
}
.plan .amount{font-family:var(--font-display);font-size:32px;font-weight:450;margin:0 0 18px;line-height:1.1;}
.plan .amount span{font-size:15px;font-family:var(--font-body);color:var(--text-muted);font-weight:500;}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.plan li{display:flex;gap:9px;font-size:14px;align-items:flex-start;}
.plan li small{color:var(--text-muted);}
.plan li svg{width:16px;height:16px;color:var(--ok);flex:none;margin-top:2px;}
.price-squiggle{display:block;width:118px;height:12px;color:var(--accent);}
.plan .price-squiggle{margin:-12px 0 14px;}
.plan-full .amount{font-style:italic;color:var(--word);}
.plan-reco{
  position:absolute;top:0;left:28px;right:28px;height:0;overflow:hidden;
  font-size:11.5px;font-weight:600;color:#fff;background:var(--accent);
  border-radius:0 0 10px 10px;text-align:center;line-height:24px;transition:height .3s cubic-bezier(.16,1,.3,1);
}
.plans.has-pick .plan{opacity:.45;}
.plans.has-pick .plan.is-pick{opacity:1;background:color-mix(in srgb, var(--accent-soft) 55%, var(--surface));padding-top:42px;}
.plans.has-pick .plan.is-pick .plan-reco{height:24px;}
@media (max-width:820px){
  .plans{grid-template-columns:1fr;}
  .plan + .plan{border-left:none;border-top:1px solid var(--border);}
  .plan-finder{padding:20px;}
  .plan-finder legend{float:none;width:100%;margin-bottom:6px;}
}

/* ---------- FAQ en forma de chat ---------- */
.faq-chat{
  max-width:720px;width:100%;margin:0 auto;padding:24px clamp(14px,3vw,28px);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px;
}
.faq-day{text-align:center;margin-bottom:4px;}
.faq-day span{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);background:var(--surface-2);padding:4px 10px;border-radius:999px;}
.faq-chat details{display:flex;flex-direction:column;}
.faq-chat summary{
  list-style:none;cursor:pointer;display:block;margin-left:auto;width:fit-content;max-width:82%;
  background:var(--primary-soft);color:var(--text);font-size:14.5px;font-weight:500;
  padding:10px 38px 10px 14px;border-radius:16px;border-bottom-right-radius:4px;position:relative;
  transition:transform .15s ease, box-shadow .15s ease;
}
.faq-chat summary::-webkit-details-marker{display:none;}
.faq-chat summary::after{
  content:"+";position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:18px;font-weight:400;color:var(--brand);transition:transform .25s ease;
}
.faq-chat details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq-chat summary:hover{transform:translateY(-1px);box-shadow:0 6px 16px -10px rgba(14,59,58,.5);}
.faq-chat summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.faq-chat details p{
  width:fit-content;max-width:82%;margin-top:8px;
  background:var(--surface-2);color:var(--text);font-size:14.5px;line-height:1.5;
  padding:11px 14px;border-radius:16px;border-bottom-left-radius:4px;
}
.faq-chat details[open] p{animation:bubble-in .35s ease both;}
.faq-chat details p::before{content:"crmdoctores";display:block;font-size:11.5px;font-weight:600;color:var(--word);margin-bottom:3px;}

footer a{font-size:13.5px;font-weight:500;color:var(--brand);text-decoration:none;}
footer a:hover{text-decoration:underline;}

/* .wrap (padding:0 24px) anulaba el padding vertical de section: secciones
   más altas que la pantalla quedaban pegadas a la siguiente */
section.wrap{padding-block:var(--space-section);}
section.wrap.stats-section{padding-block:64px;}
@media (max-width:720px){
  section.wrap{padding-block:var(--space-section-sm);}
  section.wrap.stats-section{padding-block:48px;}
}

/* ---------- logo crmdoctores ---------- */
.logo{font-style:normal;}
.logo b{font-style:italic;}

/* ---------- hero: el teléfono ya no recibe texto, invita a bajar a "Pruébelo" ---------- */
.phone-jump{
  align-items:center;justify-content:space-between;text-decoration:none;
  font-size:13.5px;font-weight:500;color:var(--text-muted);
}
.phone-jump span{flex:1;border:1px solid var(--border);border-radius:999px;padding:9px 14px;background:var(--bg);}
.phone-jump svg{
  width:36px;height:36px;padding:10px;border-radius:50%;flex:none;
  background:var(--cta);color:var(--cta-text);
}
.phone-jump:hover span{border-color:var(--brand);color:var(--text);}

.final-ctas{display:flex;flex-wrap:wrap;gap:12px;}
@media (max-width:880px){ .final-ctas{justify-content:center;} }

/* ---------- Pruébelo: chat con el asistente ---------- */
.try-grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:20px;
  max-width:1040px;width:100%;margin:0 auto;
}
@media (max-width:900px){ .try-grid{grid-template-columns:1fr;} }

.try-chat{
  display:flex;flex-direction:column;height:600px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden;
}
@media (max-width:600px){ .try-chat{height:560px;} }
.try-bar{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#0e3b3a;color:#f6f4ef;}
.try-bar .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--sage);color:#0e3b3a;font-weight:600;font-size:13px;flex:none;}
.try-bar .who{flex:1;min-width:0;}
.try-bar .who b{display:block;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.try-bar .who span{display:block;font-size:12px;color:#b9cfc6;}
.try-reset{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(246,244,239,.25);background:transparent;
  color:#f6f4ef;display:grid;place-items:center;cursor:pointer;flex:none;transition:background .15s;
}
.try-reset:hover{background:rgba(246,244,239,.1);}
.try-reset svg{width:17px;height:17px;}
.try-reset:focus-visible{outline:2px solid #a8c3b5;outline-offset:2px;}

.try-thread{
  flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:9px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%230e3b3a' stroke-opacity='.06' stroke-width='1.4'%3E%3Cpath d='M10 12h18a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H18l-6 5v-5h-2a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3Z'/%3E%3Ccircle cx='58' cy='56' r='8'/%3E%3Cpath d='M58 51v5l3 2'/%3E%3C/g%3E%3C/svg%3E"),
    var(--surface-2);
  scroll-behavior:smooth;
}
.try-thread .bubble{font-size:14.5px;max-width:80%;}
.try-thread .bubble.bot{background:var(--surface);box-shadow:0 1px 1px rgba(27,36,34,.06);}
.try-thread .bubble.user{background:var(--primary-soft);}
.try-thread .bubble b{font-weight:600;}
.try-thread .typing{background:var(--surface);}
.try-day{align-self:center;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);background:var(--surface);padding:4px 10px;border-radius:999px;margin-bottom:4px;}

.try-chips{display:flex;gap:8px;padding:10px 12px 0;overflow-x:auto;scrollbar-width:none;background:var(--surface);}
.try-chips::-webkit-scrollbar{display:none;}
.try-chips:empty{display:none;}
.try-chips button{
  flex:none;border:1px solid var(--brand);background:transparent;color:var(--brand);
  font:500 13px/1 var(--font-body);padding:9px 13px;border-radius:999px;cursor:pointer;
  transition:background .15s, color .15s;
}
.try-chips button:hover{background:var(--brand);color:var(--cta-text);}
.try-chips button:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

.try-input{display:flex;gap:8px;padding:12px;background:var(--surface);}
.try-input input{
  flex:1;min-width:0;border:1px solid var(--border);border-radius:999px;
  padding:12px 16px;font:15px var(--font-body);background:var(--bg);color:var(--text);
}
.try-input input:focus{outline:none;border-color:var(--brand);}
.try-input button{
  width:46px;height:46px;border-radius:50%;border:none;flex:none;cursor:pointer;
  background:var(--cta);color:var(--cta-text);display:grid;place-items:center;transition:background .15s;
}
.try-input button:hover{background:var(--cta-hover);}
.try-input button:disabled{opacity:.5;cursor:default;}
.try-input button svg{width:18px;height:18px;}

.try-panel{
  display:flex;flex-direction:column;gap:10px;padding:20px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);
}
@media (max-width:900px){ .try-panel{order:2;} }
.try-panel-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:6px;}
.try-panel-head b{font-family:var(--font-display);font-weight:500;font-size:19px;}
.try-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin-top:6px;}
.try-agenda{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.try-agenda li{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:11px 13px;font-size:13px;}
.try-agenda li + li{border-top:1px solid var(--border);}
.try-agenda time{grid-row:span 2;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);line-height:1.3;min-width:62px;}
.try-agenda b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.try-agenda .pill{width:fit-content;}
.try-agenda li.is-new{animation:sync-flash 1.8s ease, bubble-in .4s ease;}
.try-agenda li.is-cancelled b{text-decoration:line-through;color:var(--text-muted);}
.try-log{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--border);display:flex;flex-direction:column;gap:8px;max-height:150px;overflow-y:auto;}
.try-log li{position:relative;font-size:12.5px;color:var(--text-muted);line-height:1.4;}
.try-log li::before{content:"";position:absolute;left:-19px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--brand);}
.try-log li.is-new{animation:bubble-in .4s ease;}
.try-log li:empty{display:none;}
.try-log time{font-family:var(--font-mono);font-size:10.5px;margin-right:6px;}
.try-note{margin-top:auto;padding-top:10px;font-size:12px;color:var(--text-muted);border-top:1px dashed var(--border);}