@font-face{font-family:"Syne Variable";src:url(fonts/syne-latin-wght-normal-BVsvWWA4.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"DM Sans Variable";src:url(fonts/dm-sans-latin-wght-normal-Xz1IZZA0.woff2) format("woff2");font-weight:100 1000;font-display:swap}
@font-face{font-family:"Space Grotesk Variable";src:url(fonts/space-grotesk-latin-wght-normal-BhU9QXUp.woff2) format("woff2");font-weight:300 700;font-display:swap}

:root{
  --orange:#ff8035; --orange-soft:#fff0e6; --ink:#191917; --muted:#6c6c65; --paper:#faf9f6; --line:#deded6; --card:#fff;
  --sans:"DM Sans Variable",system-ui,sans-serif; --display:"Syne Variable",var(--sans); --mono:"Space Grotesk Variable",ui-monospace,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.sara{max-width:980px;margin:0 auto;padding:28px 20px 36px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
h1{font-family:var(--display);font-weight:700;font-size:clamp(26px,4.4vw,40px);line-height:1.08;margin:10px 0 12px;letter-spacing:-.01em}
.lead{max-width:60ch;color:var(--muted);margin:0 0 26px}

/* Reproductor */
.player{display:flex;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px 22px}
.play{flex:none;width:64px;height:64px;border-radius:50%;border:0;background:var(--orange);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .2s,background .2s}
.play:hover{transform:scale(1.05);background:#ff914f}
.play svg{width:26px;height:26px;fill:currentColor}
.play .i-pause,.play .i-replay{display:none}
.is-playing .play .i-play,.is-ended .play .i-play{display:none}
.is-playing .play .i-pause{display:block}
.is-ended .play .i-replay{display:block}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.track{flex:1;min-width:0}
.timeline{position:relative;height:30px;border-radius:6px;background:#f1efe8;overflow:hidden}
.seg{position:absolute;top:6px;bottom:6px;border-radius:3px;opacity:.38}
.seg.ai{background:var(--orange)}
.seg.me{background:var(--ink)}
.prog{position:absolute;inset:0 auto 0 0;width:0;background:rgba(255,128,53,.16);border-right:2px solid var(--orange);pointer-events:none}
.seek{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.times{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:8px}
.legend{display:flex;gap:16px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}

/* Conversación + agenda */
.grid{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin-top:18px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px 22px}
.transcript{list-style:none;margin:12px 0 0;padding:0 6px 0 0;max-height:420px;overflow:auto;scroll-behavior:auto}
.line{display:block;width:100%;text-align:left;font:inherit;color:var(--muted);background:none;border:0;border-left:3px solid transparent;padding:8px 10px 8px 12px;margin:2px 0;border-radius:0 10px 10px 0;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.line .who{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:2px;color:var(--muted)}
.line.past{color:var(--ink)}
.line.active{background:var(--orange-soft);border-left-color:var(--orange);color:var(--ink)}
.event{display:flex;gap:10px;align-items:center;margin:6px 0 6px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--muted);opacity:.35;transition:opacity .3s,color .3s}
.event::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s}
.event.on{opacity:1;color:var(--ink)}
.event.on::before{background:var(--orange)}
.event b{font-weight:600}

.agenda h2{margin:0}
.agenda .day{font-family:var(--display);font-size:22px;font-weight:700;margin:6px 0 14px}
.slots{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.slot{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 13px;border:1px dashed var(--line);border-radius:10px;font-size:14px;color:#b3b3aa;transition:all .35s}
.slot time{font-family:var(--mono);font-size:13px}
.agenda.consulted .slot{color:var(--muted);border-style:solid}
.agenda.consulted .slot span{color:var(--muted)}
.slot.booked{display:none}
.agenda.booked .slot.free-10{display:none}
.agenda.booked .slot.booked{display:flex;background:var(--orange);border-color:var(--orange);color:var(--ink);font-weight:600;animation:pop .45s ease}
@keyframes pop{from{transform:scale(.96);opacity:.4}to{transform:none;opacity:1}}
.status{min-height:44px;margin:14px 0 0;font-size:14px;color:var(--muted)}
.agenda.booked .status{color:var(--ink)}

/* Cierre */
.cta{display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:18px;padding:22px 24px;border:1px solid var(--ink);border-radius:22px;background:var(--ink);color:var(--paper)}
.cta p{margin:0;max-width:56ch}
.cta strong{font-family:var(--display);font-size:20px;display:block;margin-bottom:4px;color:#fff}
.button{display:inline-flex;gap:26px;align-items:center;justify-content:space-between;min-height:50px;padding:16px 22px;background:var(--orange);color:var(--ink);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-radius:3px;transition:transform .25s,background .25s}
.button:hover{background:#ff914f;transform:translateY(-2px)}
.cta :focus-visible{outline-color:#fff}
.note{margin:16px 2px 0;font-size:12.5px;color:var(--muted)}

/* Modo incrustado (?embed=1): la página que lo contiene ya pone el título y el contacto */
.embed .sara{padding:4px 2px 8px}
.embed .intro,.embed .cta{display:none}
.embed .grid{margin-top:14px}
@media (max-width:760px){
  .grid{grid-template-columns:1fr}
  .player{padding:14px 16px;gap:14px}
  .play{width:56px;height:56px}
  .transcript{max-height:340px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.legend .sw-ai{background:var(--orange)}
.legend .sw-me{background:var(--ink)}