:root {
  color-scheme: dark;
  --base: #070b15;
  --cyan: #31ebed;
  --blue: #4d73ff;
  --violet: #a66cff;
  --magenta: #ec46cf;
  --white: #f7faff;
  --text-muted: #c3cad9;
  --border-white: rgba(233,247,255,.24);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--base); overflow:hidden; }
body { color:var(--white); -webkit-font-smoothing:antialiased; }
button, input { font:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:wait; opacity:.65; }
[hidden] { display:none!important; }
.shell { position:relative; display:grid; place-items:center; height:100dvh; min-height:480px; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse 45% 75% at 19% 15%,#112c44 0%,transparent 80%),radial-gradient(ellipse 45% 70% at 84% 83%,#27172e 0%,transparent 77%),#050810; }
.side-glow { position:absolute; width:42vmax;height:38vmax; filter:blur(105px); border-radius:50%;opacity:.12;pointer-events:none; }
.side-glow-left {left:-24vmax;top:15%;background:#31e7ef;}
.side-glow-right {right:-20vmax;bottom:4%;background:#e63aeb;}
.experience { position:relative;width:min(100vw, 56.25dvh);height:100dvh;overflow:hidden; isolation:isolate;background:#0d121b;box-shadow:0 0 0 1px rgba(211,234,255,.09),0 18px 100px rgba(0,0,0,.7); }
.video-stack,.film,.hold-frame,.film-shade,.transition-light {position:absolute;inset:0;width:100%;height:100%;}
.video-stack { z-index:0; overflow:hidden; }
.film,.hold-frame { object-fit:cover;object-position:50% 50%; }
.film {z-index:2;opacity:1;transition:opacity .52s cubic-bezier(.2,.8,.2,1),filter .8s cubic-bezier(.2,.8,.2,1);background:transparent;}
.hold-frame { z-index:1; filter:blur(3px) brightness(.69);transform:scale(1.02); opacity:1; }
.film-shade {z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(3,10,21,.36) 0%,transparent 18%,transparent 49%,rgba(3,8,19,.18) 61%,rgba(3,7,18,.42) 79%,rgba(3,6,18,.88) 100%);transition:background .6s;}
.transition-light {z-index:4;pointer-events:none;opacity:0;background:linear-gradient(125deg,transparent 9%,rgba(30,204,219,.11) 46%,rgba(163,100,231,.16) 59%,transparent 87%);transform:translateX(-80%);}
.experience.waiting .film {opacity:0;filter:blur(5.5px) brightness(.76); transform:scale(1.012);}
.experience.switching .film {opacity:0;filter:blur(7px) brightness(.8);}
.experience.switching .transition-light {animation:sceneLight .8s cubic-bezier(.25,.8,.23,1) both;}
.experience.switching .hold-frame {filter:blur(6px) brightness(.65);}
@keyframes sceneLight { 0% {opacity:0;transform:translateX(-80%)} 24% {opacity:1} 77% {opacity:.6} 100%{opacity:0;transform:translateX(83%)} }
.top-hud {position:absolute;left:0;right:0;top:0;z-index:12;padding:calc(env(safe-area-inset-top, 0px) + 18px) 23px 10px;display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:9px;letter-spacing:.14em;text-shadow:0 2px 10px rgba(0,0,0,.65);}
.flow-brand {display:flex;align-items:center;gap:9px;white-space:nowrap;font-weight:700;}
.flow-brand strong {font-weight:400;color:#b6eeff;}
.brand-mark {height:13px;width:13px;border-radius:50%;background:conic-gradient(from 0deg,#24edef,#618cff,#f447ce,#24edef);box-shadow:0 0 14px rgba(38,229,232,.5);}
.top-right {display:flex;align-items:center;gap:7px;white-space:nowrap;font-weight:600;font-size:8px;letter-spacing:.105em;color:rgba(236,243,255,.8);}
.status-dot,.eyebrow-dot {height:5px;width:5px;flex:none;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px var(--cyan);}
.intro-control {position:absolute;z-index:8;bottom:9%;left:9%;right:9%;display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-shadow:0 2px 15px #01040c;animation:enterRise .8s .16s both;}
.intro-context {font-size:10px;letter-spacing:.15em;color:#a9e9f2;font-weight:650;}
.intro-control h1 {font-weight:500;font-size:clamp(27px,4.5dvh,39px);line-height:1.1;letter-spacing:-.05em;margin:0;max-width:270px;}
.intro-control p {color:#f1f3fa;margin:0;font-size:14px;line-height:1.5;}
.intro-control .audio-hint {font-size:10px;color:#b2bed1;}
.glass-button,.glass-choice,.glass-input {color:var(--white);background:linear-gradient(115deg,rgba(212,236,250,.23),rgba(60,72,129,.18) 35%,rgba(31,38,76,.38) 68%,rgba(200,123,230,.13));backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border:1px solid rgba(226,240,255,.41);box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(213,119,254,.13),0 13px 37px rgba(1,6,22,.31),0 0 18px rgba(82,208,241,.09);}
.glass-button {position:relative;display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:48px;border-radius:26px;padding:12px 21px;font-size:13px;font-weight:620;line-height:1.3;overflow:hidden;transition:transform .24s ease,box-shadow .3s,border-color .3s,background .3s;}
.glass-button:before,.glass-choice:before {content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(95deg,transparent 0%,rgba(255,255,255,.12) 38%,transparent 67%);transform:translateX(-130%);animation:ambientSheen 10s ease-in-out infinite;}
.glass-primary {background:linear-gradient(105deg,rgba(24,226,231,.33),rgba(63,91,208,.23) 49%,rgba(224,62,207,.24));border-color:rgba(61,239,241,.62);box-shadow:inset 0 1px rgba(255,255,255,.52),inset 0 -1px rgba(239,139,239,.28),0 0 0 1px rgba(33,229,236,.18),0 0 18px rgba(11,203,223,.2),0 9px 36px rgba(0,0,0,.25);}
.glass-button:hover:not(:disabled),.glass-choice:hover:not(:disabled) {transform:translateY(-1px);border-color:rgba(112,243,250,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 11px 28px rgba(9,8,35,.27),0 0 23px rgba(43,227,244,.24);}
.glass-button:active:not(:disabled),.glass-choice:active:not(:disabled) {transform:scale(.985);}
.glass-button:focus-visible,.glass-choice:focus-visible,.glass-input:focus-visible {outline:2px solid #84f4ff;outline-offset:3px;}
.intro-cta {margin-top:8px;width:100%;}
.button-arrow {opacity:.8;font-size:18px;font-weight:300;}
@keyframes ambientSheen {0%,38%,100%{transform:translateX(-130%)}61%{transform:translateX(180%)}}
@keyframes enterRise {from{opacity:0;transform:translateY(15px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.interaction {position:absolute;z-index:9;left:0;right:0;bottom:0;padding:0 17px calc(env(safe-area-inset-bottom, 0px) + 59px);animation:enterRise .6s cubic-bezier(.22,.7,.25,1) both;}
.interaction-inner {position:relative;border:1px solid rgba(209,228,253,.25);border-radius:24px;padding:18px 17px 17px;isolation:isolate;overflow:hidden;background:linear-gradient(145deg,rgba(14,26,49,.86),rgba(9,12,29,.83) 48%,rgba(39,17,56,.76));-webkit-backdrop-filter:blur(29px) saturate(1.55);backdrop-filter:blur(29px) saturate(1.55);box-shadow:0 20px 70px rgba(2,4,16,.55),inset 0 1px 0 rgba(229,250,255,.24),0 0 16px rgba(30,228,237,.08);}
.interaction-inner:before {content:'';position:absolute;z-index:-1;left:-80%;right:-80%;height:1px;top:0;background:linear-gradient(90deg,transparent,rgba(55,229,240,.72),rgba(224,67,230,.55),transparent);animation:edgeBreath 6s ease-in-out infinite alternate;}
.interaction-inner:after {content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse 50% 28% at 8% 7%,rgba(35,217,236,.13),transparent 88%),radial-gradient(ellipse 40% 28% at 95% 98%,rgba(231,64,199,.14),transparent 78%);animation:cardLiving 11s ease-in-out infinite alternate;}
@keyframes edgeBreath {from{transform:translateX(-17%);opacity:.45}to{transform:translateX(21%);opacity:1}}
@keyframes cardLiving {from{opacity:.52;transform:scale(1)}to{opacity:1;transform:scale(1.07)}}
.interaction-eyebrow {display:flex;align-items:center;gap:9px;font-weight:750;letter-spacing:.16em;font-size:9px;color:#bdf3fb;margin-bottom:8px;}
.interaction-heading {margin:0;line-height:1.19;font-size:clamp(17px,2.8dvh,23px);letter-spacing:-.026em;font-weight:530;text-wrap:balance;}
.interaction-instruction {font-size:12px;color:var(--text-muted);margin:8px 0 13px;line-height:1.4;}
.interaction-instruction:empty {display:none;}
.interaction-fields {display:flex;flex-direction:column;gap:9px;margin-top:12px;}
.glass-choice {display:flex;position:relative;align-items:center;gap:11px;width:100%;text-align:left;border-radius:17px;padding:11px 14px;min-height:51px;line-height:1.35;letter-spacing:-.012em;font-weight:470;font-size:12.5px;overflow:hidden;transition:transform .2s,border-color .28s,background .28s,opacity .28s,box-shadow .28s;}
.glass-choice:disabled {cursor:default;}
.choice-letter {display:grid;flex:0 0 26px;height:26px;place-items:center;border-radius:9px;background:rgba(189,222,249,.13);border:1px solid rgba(232,245,255,.25);font-size:11px;font-weight:750;color:#c9eef7;}
.choice-text {flex:1;}
.choice-confirm {display:grid;place-items:center;font-size:13px;color:var(--cyan);min-width:14px;opacity:0;transform:scale(.4);transition:opacity .24s,transform .28s;}
.glass-choice.selected {border-color:rgba(54,239,246,.85);background:linear-gradient(110deg,rgba(30,208,223,.39),rgba(75,79,175,.32),rgba(190,60,176,.3));box-shadow:inset 0 1px 0 rgba(255,255,255,.44),0 0 0 1px rgba(40,231,239,.1),0 0 24px rgba(33,223,236,.22);}
.glass-choice.selected .choice-confirm{opacity:1;transform:scale(1);}
.glass-choice.deselected {opacity:.4;filter:saturate(.65);}
.glass-input {width:100%;outline:none;min-height:48px;border-radius:16px;padding:12px 15px;font-size:14px;transition:border-color .28s,box-shadow .28s;}
.glass-input::placeholder{color:rgba(225,234,246,.58)}
.glass-input:focus{border-color:rgba(58,231,237,.88);box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 0 0 1px rgba(43,229,233,.28),0 0 20px rgba(36,227,236,.19);}
.label-mini {font-size:11px;color:#d0d6e4;}
.name-action {width:100%;margin-top:2px;}
.notice {font-size:10px;line-height:1.45;color:#b7bfd2;margin:2px 3px 0;}
.notice strong {color:#dde5f4;font-weight:560;}
.interaction-error {color:#ffc3d5;font-size:11px;margin:6px 0 0;}
.interaction-error:empty {display:none;}
.scale-wrap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;}
.scale-button{display:grid;place-items:center;height:51px;padding:0;border-radius:15px;font-size:21px;font-weight:460;}
.scale-description{display:flex;justify-content:space-between;font-size:10px;color:#c4c8df;margin-top:1px;}
.buffer-status{position:absolute;z-index:11;bottom:12%;left:9%;right:9%;display:flex;justify-content:center;align-items:center;gap:9px;font-size:12px;color:#ecf7fb;text-shadow:0 2px 8px #000;}
.orbit-loader{display:block;width:19px;height:19px;border:2px solid rgba(196,244,248,.24);border-top-color:#6debf1;border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin {to{transform:rotate(360deg)}}
.resume-overlay {position:absolute;z-index:12;inset:0;display:grid;place-items:end center;padding:0 25px 12%;background:linear-gradient(transparent 50%,rgba(4,8,20,.76));}
.resume-card {width:100%;padding:22px 18px;background:rgba(10,19,34,.88);border-radius:21px;border:1px solid rgba(87,230,238,.38);backdrop-filter:blur(18px);}
.resume-card h2{font-size:19px;font-weight:550;margin:0 0 18px;}
.resume-card button{width:100%;}
.completion{position:absolute;z-index:10;left:0;right:0;bottom:0;min-height:67%;padding:30px 29px calc(18% + env(safe-area-inset-bottom, 0px));text-align:center;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;gap:13px;background:linear-gradient(180deg,transparent 0%,rgba(7,12,27,.67) 18%,rgba(9,12,28,.95) 65%);animation:enterRise .75s both;}
.completion-orbit{position:relative;display:grid;place-items:center;margin-bottom:5px;width:88px;height:88px;border-radius:50%;background:conic-gradient(from 0deg,#16e8e5,#6278ff,#e840cd,#16e8e5);box-shadow:0 0 33px rgba(39,236,229,.12);animation:completionBreath 6s ease-in-out infinite;}
.completion-orbit:before{content:'';position:absolute;inset:3px;border-radius:50%;background:#111a31;}
.orbit-core{position:relative;font-size:29px;font-weight:350;color:#b1fbff;}
@keyframes completionBreath{0%,100%{transform:scale(.98);filter:brightness(.95)}50%{transform:scale(1.02);filter:brightness(1.11)}}
.completion-kicker{color:#8af0f6;font-size:9px;font-weight:700;letter-spacing:.17em;}
.completion h2{font-weight:510;font-size:clamp(24px,4dvh,30px);margin:0;letter-spacing:-.04em;}
.completion p{font-size:12px;line-height:1.5;color:#e4ecf4;margin:0 5px 4px;}
.completion-divider{width:75px;height:1px;background:linear-gradient(90deg,#25e4e6,#c24ce2);margin:7px 0;}
.completion>span:not(.completion-kicker){font-size:11px;color:#cfd5df;}
.completion>strong{font-size:10px;font-weight:740;letter-spacing:.14em;color:#b6f4fa;}
.completion button{margin-top:15px;}
.bottom-indicator{position:absolute;z-index:13;bottom:calc(env(safe-area-inset-bottom, 0px) + 16px);left:24px;right:24px;display:flex;align-items:center;gap:11px;font-size:9px;letter-spacing:.12em;color:rgba(213,228,241,.71);text-shadow:0 2px 8px #000;}
.progress-segments{display:flex;flex:1;gap:4px;max-width:135px;}
.progress-segments>i{display:block;height:2px;flex:1;border-radius:4px;background:rgba(218,234,246,.32);transition:background .42s;}
.progress-segments>i.past{background:#47c8dd;}
.progress-segments>i.now{background:linear-gradient(90deg,#2ce9df,#d866e5);box-shadow:0 0 7px rgba(56,237,235,.5);}
.bottom-caption{margin-left:auto;font-size:8px;}
.desktop-side-note{position:absolute;bottom:24px;right:25px;color:rgba(174,206,234,.42);font-size:9px;letter-spacing:.19em;writing-mode:vertical-rl;}
.desktop-side-note span{color:var(--cyan);}
@media(max-width:600px){.desktop-side-note{display:none}.shell{min-height:0}.experience{width:100vw;max-width:100vw;}}
@media(max-height:710px){.interaction{padding:0 12px calc(env(safe-area-inset-bottom,0px) + 36px)}.interaction-inner{border-radius:20px;padding:12px 13px}.interaction-heading{font-size:16px}.interaction-fields{gap:6px;margin-top:8px}.glass-choice{min-height:44px;padding:7px 10px;font-size:11px}.top-hud{padding-top:14px}.bottom-indicator{bottom:10px}.scale-button{height:43px}.notice{font-size:9px}}
@media(max-height:550px){.interaction-inner{padding:9px 11px}.interaction-heading{font-size:14px}.interaction-eyebrow{font-size:8px;margin-bottom:4px}.interaction-instruction{font-size:10px;margin:5px 0}.glass-choice{min-height:35px}.interaction-fields{margin-top:6px;gap:4px}.completion{padding-bottom:10%;}.completion-orbit{width:55px;height:55px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* En pantallas muy bajas, el cierre debe empezar por debajo del rostro y logo. */
@media(max-height:650px){
  .completion{top:52%;bottom:0;min-height:0;height:48%;overflow-y:auto;justify-content:flex-start;gap:6px;padding:8px 14px 32px;background:linear-gradient(180deg,rgba(8,12,30,.82),rgba(7,9,24,.97));}
  .completion-orbit{width:44px;height:44px;flex:0 0 44px;margin:0;}
  .orbit-core{font-size:20px;}
  .completion-kicker{font-size:8px;}
  .completion h2{font-size:20px;}
  .completion p{font-size:10px;line-height:1.3;margin:0;}
  .completion-divider{margin:3px 0;}
  .completion>span:not(.completion-kicker){font-size:10px;}
  .completion>strong{font-size:9px;}
  .completion button{margin-top:4px;min-height:36px;padding:7px 13px;font-size:11px;}
}

/* FLOW Clips V3 · incoming call and visual silence. Preserves original cyan-magenta Liquid Glass language. */
.sr-only {
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.incoming-call {
  left:7%;right:7%;bottom:10%;
  align-items:center;gap:9px;text-align:center;
  padding:26px 18px 19px;
  border-radius:30px;
  border:1px solid rgba(227,240,255,.31);
  background:linear-gradient(138deg,rgba(16,28,51,.68),rgba(10,13,34,.82) 56%,rgba(65,24,73,.66));
  backdrop-filter:blur(30px) saturate(1.45);-webkit-backdrop-filter:blur(30px) saturate(1.45);
  box-shadow:0 25px 65px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.21),0 0 30px rgba(56,213,231,.08);
}
.incoming-call:before {
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(140deg,rgba(50,231,239,.12),transparent 36%,transparent 66%,rgba(229,64,208,.12));
}
.incoming-signal {
  position:relative;display:grid;place-items:center;width:55px;height:55px;
  color:#c4faff;border:1px solid rgba(64,235,244,.4);border-radius:50%;
  background:radial-gradient(circle,rgba(41,229,238,.15),rgba(89,80,178,.14) 68%,transparent);
  margin-bottom:5px;
}
.incoming-signal svg {position:relative;z-index:1;}
.incoming-ring {
  position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(53,233,241,.67);
  animation:incomingPulse 2.7s ease-out infinite;pointer-events:none;
}
.incoming-ring-second {animation-delay:1.35s;border-color:rgba(235,75,214,.65);}
@keyframes incomingPulse {0%{opacity:.9;transform:scale(.87)}75%,100%{opacity:0;transform:scale(1.62)}}
.incoming-label{color:#b4ecf3;font-size:10px;letter-spacing:.16em;font-weight:600;margin-top:5px;}
.incoming-call h1{font-size:clamp(30px,5dvh,41px);letter-spacing:-.035em;font-weight:500;max-width:none;margin:0 0 13px;}
.incoming-actions{display:flex;width:100%;align-items:center;justify-content:center;gap:clamp(26px,12%,60px);}
.call-accept,.call-decline{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-width:106px;
  font-size:12px;line-height:1.3;color:#e6effb;text-decoration:none;border:0;background:transparent;padding:3px 8px 5px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;}
.call-action-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;transition:transform .22s,box-shadow .3s;
  box-shadow:0 9px 28px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.32);}
.call-accept .call-action-icon{background:linear-gradient(145deg,#1de3d1,#16a987 75%);border:1px solid rgba(213,255,255,.73);
  box-shadow:0 0 0 1px rgba(18,244,220,.2),0 0 25px rgba(18,218,203,.28),inset 0 1px 0 rgba(255,255,255,.48);}
.call-decline .call-action-icon{background:linear-gradient(140deg,#d94d98,#b72873);border:1px solid rgba(255,192,233,.6);
  box-shadow:0 0 20px rgba(228,55,157,.16),inset 0 1px 0 rgba(255,255,255,.24);}
.call-accept:hover .call-action-icon,.call-decline:hover .call-action-icon{transform:translateY(-2px) scale(1.05);}
.call-accept:focus-visible,.call-decline:focus-visible{outline:2px solid #84f4ff;outline-offset:5px;border-radius:20px;}
.interaction{padding:0 17px calc(env(safe-area-inset-bottom,0px) + 34px);}
.interaction-inner{padding:18px 17px 17px;border-radius:25px;}
.interaction-fields{margin-top:0;gap:11px;}
.interaction-fields .glass-choice{min-height:58px;}
.interaction-fields .label-mini{display:none;}
.interaction-fields .notice{font-size:10px;line-height:1.4;opacity:.8;margin:4px 4px 0;}
.interaction-fields .name-action{width:100%;}
.powered-by{font-size:12px;font-weight:400;letter-spacing:.025em;color:rgba(210,227,245,.81);text-decoration:none;
  transition:color .2s;white-space:nowrap;}
.powered-by strong{color:#b7f4f7;font-size:12px;font-weight:650;letter-spacing:.015em;}
.powered-by:hover,.powered-by:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:4px;}
@media(max-height:710px){
  .incoming-call{bottom:7%;padding:17px 15px 13px;gap:5px;}
  .incoming-signal{width:46px;height:46px;}
  .incoming-call h1{font-size:29px;margin-bottom:8px;}
  .call-action-icon{width:53px;height:53px;}
  .interaction{padding:0 12px calc(env(safe-area-inset-bottom,0px) + 22px);}
  .interaction-inner{padding:15px;}
  .interaction-fields .glass-choice{min-height:45px;}
}
@media(prefers-reduced-motion:reduce){
  .incoming-ring{animation:none;opacity:.3;}
}