:root { --ink:#0d2346; --blue:#087cf0; --green:#48d6b0; --red:#f34d64; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); }

.landing-body { min-height:100vh; background:#f6fbff; }
.landing { width:min(1180px,100%); min-height:100vh; margin:auto; padding:28px 44px 32px; }
.nav,.call-header { display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:9px; color:#132952; font-size:15px; font-weight:850; letter-spacing:.13em; text-decoration:none; }
.brand-mark { display:grid; width:31px; height:31px; place-items:center; border-radius:10px; background:var(--blue); color:#fff; font-size:20px; letter-spacing:0; }
.secure { color:#547099; font-size:13px; }
.hero { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; min-height:calc(100vh - 185px); gap:44px; }
.eyebrow { color:#0685e7; font-size:11px; font-weight:900; letter-spacing:.14em; }
.hero h1 { max-width:610px; margin:18px 0; color:#112852; font-size:clamp(44px,5.2vw,76px); letter-spacing:-.065em; line-height:.98; }
.hero p { max-width:515px; color:#567096; font-size:18px; line-height:1.65; }
.primary-button { display:inline-flex; align-items:center; gap:24px; margin-top:19px; border-radius:999px; padding:17px 23px; background:#087cf0; box-shadow:0 18px 32px #087cf04d; color:#fff; font-size:15px; font-weight:800; text-decoration:none; }
.primary-button span { font-size:24px; line-height:.6; }
.privacy-note { margin-top:28px; font-size:12px!important; }
.hero-visual { position:relative; min-height:480px; overflow:hidden; border-radius:48% 52% 42% 58%/42% 44% 56% 58%; background:linear-gradient(145deg,#d5f5ff,#dfe9ff); }
.orb { position:absolute; border-radius:50%; background:#9edfff; filter:blur(1px); }.orb-one { top:10%; left:15%; width:65px; height:65px; }.orb-two { right:12%; bottom:19%; width:108px; height:108px; background:#a8baff; }
.avatar-card { position:absolute; top:50%; left:50%; display:grid; width:300px; height:365px; place-items:center; transform:translate(-50%,-50%) rotate(-4deg); border:1px solid #ffffffa6; border-radius:32px; background:linear-gradient(160deg,#ffffffed,#e5f4ffcc); box-shadow:0 34px 45px #265a8c2e; font-weight:800; }.avatar-card span { font-size:22px; }.avatar-card small { margin-top:-55px; color:#6884a8; }
.mini-avatar { position:relative; width:145px; height:145px; overflow:hidden; border-radius:50%; background:#132c5f; }.mini-avatar i { position:absolute; top:31px; left:42px; width:64px; height:71px; border-radius:47% 47% 44% 44%; background:#cc8e72; }.mini-avatar b { position:absolute; top:18px; left:33px; width:85px; height:48px; border-radius:55% 55% 22% 22%; background:#1c1726; }
.feature-list { display:flex; justify-content:space-between; border-top:1px solid #d9e9f8; padding-top:23px; color:#66819f; font-size:13px; font-weight:650; }

.call-body { height:100dvh; margin:0; overflow:hidden; overscroll-behavior:none; background:#06193d; }
html:has(.call-body) { height:100%; overflow:hidden; overscroll-behavior:none; }
.call-shell { display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; height:100dvh; overflow:hidden; overscroll-behavior:none; background:radial-gradient(circle at 53% 44%,#104d90 0,#092956 34%,#06193d 67%); color:#fff; }
.call-header { z-index:2; padding:23px clamp(22px,5vw,70px); }.light { color:#fff; }.connection { display:flex; align-items:center; gap:8px; color:#cfdbef; font-size:13px; }.connection i { width:8px; height:8px; border-radius:50%; background:#ffd466; }.connection.online i { background:var(--green); box-shadow:0 0 12px var(--green); }
.call-stage { position:relative; display:grid; min-height:0; overflow:hidden; place-items:end center; padding:10px 20px 0; }

/* El área usa una sola dimensión y Rive se renderiza con contain: nunca se deforma. */
.avatar-area { position:relative; z-index:1; width:min(630px,84vw,calc(75dvh - 143px)); aspect-ratio:3/4; }
.avatar-halo { position:absolute; inset:8% 0; border:1px solid #8cc8ff3d; border-radius:48%; background:radial-gradient(circle,#2081d55e 0,#1671c924 48%,transparent 70%); box-shadow:0 0 100px #5faaff54; }
.avatar-area canvas { position:absolute; z-index:2; width:100%; height:100%; image-rendering:auto; }
.fallback-avatar { position:absolute; z-index:1; bottom:2%; left:50%; width:270px; height:360px; transform:translateX(-50%); filter:drop-shadow(0 20px 22px #0004); }
.hair { position:absolute; z-index:2; top:24px; left:56px; width:156px; height:145px; border-radius:55% 48% 35% 32%; background:#1c1420; }.face { position:absolute; z-index:3; top:72px; left:76px; width:118px; height:146px; border-radius:46% 46% 43% 43%; background:#dc9b7c; }.eye { position:absolute; top:53px; width:9px; height:11px; border-radius:50%; background:#182444; }.eye.left { left:30px; }.eye.right { right:30px; }.mouth { position:absolute; bottom:35px; left:43px; width:32px; height:12px; border-bottom:4px solid #9b4d59; border-radius:50%; }.body { position:absolute; bottom:0; left:9px; width:250px; height:190px; border-radius:48% 48% 0 0; background:#fff; }.body:before { position:absolute; top:24px; left:82px; width:85px; height:115px; border:20px solid #e9f5ff; border-top:0; border-radius:0 0 50% 50%; content:""; }.body i { position:absolute; top:8px; left:112px; width:27px; height:27px; border-radius:50%; background:#1d87e6; }
.is-speaking .fallback-avatar .mouth { height:23px; border:0; border-radius:0 0 40% 40%; background:#893c4b; animation:talk .18s infinite alternate; }
.avatar-name { position:absolute; z-index:4; right:-32px; bottom:19%; display:grid; gap:2px; border:1px solid #ffffff24; border-radius:14px; padding:9px 13px; background:#102c58bb; backdrop-filter:blur(8px); }.avatar-name strong { font-size:14px; }.avatar-name span { color:#9fc4ef; font-size:11px; }
.conversation { position:absolute; z-index:5; top:3%; left:clamp(18px,7vw,130px); display:grid; gap:6px; width:min(300px,39vw); max-height:42vh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; }.bubble { border-radius:15px; padding:9px 11px; background:#ffffffeb; box-shadow:0 9px 22px #03163530; color:#17315b; font-size:13px; line-height:1.34; }.bubble strong { display:block; margin-bottom:2px; color:#087cf0; font-size:10px; font-weight:850; }.bubble p { margin:0; }.bubble--user { margin-left:16px; background:#187ee4; color:#fff; }.bubble--user strong { color:#d6ecff; }
.transcript { position:absolute; z-index:4; right:clamp(18px,7vw,130px); bottom:7%; width:min(325px,41vw); margin:0; color:#b9d1ef; font-size:13px; line-height:1.5; text-align:right; }
.start-conversation { position:absolute; z-index:6; bottom:7%; left:50%; border:0; border-radius:999px; padding:14px 22px; transform:translateX(-50%); background:#087cf0; box-shadow:0 15px 32px #0316357d; color:#fff; cursor:pointer; font:800 14px/1 Inter,ui-sans-serif,system-ui,sans-serif; white-space:nowrap; }.start-conversation:disabled { cursor:wait; opacity:.65; }
.call-controls { position:relative; z-index:8; display:flex; align-items:center; justify-content:center; gap:23px; padding:4px 12px 0; }.control { display:grid; width:58px; height:58px; place-items:center; border:0; border-radius:50%; color:#fff; cursor:pointer; font-size:25px; transition:transform .2s,filter .2s; }.control:hover { transform:scale(1.06); filter:brightness(1.12); }.hangup { background:var(--red); transform:rotate(45deg); }.microphone { position:relative; isolation:isolate; width:72px; height:72px; background:conic-gradient(var(--green) var(--progress,0deg),#ffffff24 0); }.microphone:before { position:absolute; z-index:-1; inset:5px; border-radius:50%; background:#117ee8; content:""; }.microphone:after { display:none; position:absolute; inset:-6px; border:2px solid var(--green); border-radius:50%; content:""; }.microphone.is-recording:after { display:block; }.microphone svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }.recording-wrap { position:relative; }.recording-wrap b { position:absolute; top:-2px; right:-10px; display:grid; width:23px; height:23px; place-items:center; border-radius:50%; background:var(--green); color:#063260; font-size:11px; }.recording-wrap b:empty { display:none; }.call-help { z-index:5; margin:0; padding:6px 20px 16px; color:#91afd2; font-size:11px; text-align:center; }
.control:disabled { cursor:not-allowed; opacity:.35; transform:none; filter:none; }.call-shell.is-speaking .microphone { opacity:.1; pointer-events:none; }.unavailable-panel { position:absolute; z-index:20; top:50%; left:50%; width:min(390px,calc(100% - 40px)); transform:translate(-50%,-50%); border:1px solid #f2b0b9; border-radius:22px; padding:25px; background:#fffafb; box-shadow:0 25px 60px #010d265c; color:#17315b; text-align:center; }.unavailable-panel strong { display:block; color:#bb3046; font-size:18px; }.unavailable-panel p { margin:10px 0 19px; font-size:14px; line-height:1.5; }.unavailable-panel a { display:inline-block; border-radius:999px; padding:10px 17px; background:#087cf0; color:#fff; font-size:13px; font-weight:800; text-decoration:none; }
@keyframes talk { to { transform:scaleY(.45); } }
@media (max-width:700px) { .landing { padding:24px; }.hero { grid-template-columns:1fr; padding-top:40px; }.hero h1 { font-size:51px; }.hero-visual { min-height:330px; }.feature-list { gap:14px; font-size:11px; }.call-stage { padding-top:0; }.avatar-area { width:min(84vw,calc(75dvh - 128px)); }.conversation { top:0; left:18px; width:calc(100% - 36px); max-width:none; max-height:22dvh; }.transcript { right:18px; bottom:3%; width:calc(100% - 36px); text-align:center; }.avatar-name { right:0; }.call-header { padding:18px 22px; } }