: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; touch-action:none; }
html:has(.call-body) { height:100%; overflow:hidden; overscroll-behavior:none; }
.call-shell { display:grid; grid-template-rows:minmax(0,1fr) auto; height:100dvh; overflow:hidden; overscroll-behavior:none; background:radial-gradient(circle at 53% 44%,#104d90 0,#092956 34%,#06193d 67%); color:#fff; touch-action:none; }
.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:0 20px; touch-action:none; }
.avatar-background { position:absolute; z-index:0; inset:0; overflow:hidden; pointer-events:none; }
.avatar-background::after { position:absolute; inset:0; background:linear-gradient(180deg,#06193d66 0%,#06193d1c 46%,#06193d8c 100%); content:""; }
.avatar-background img { width:100%; height:100%; object-fit:cover; object-position:center; }

/* El área usa una sola dimensión y Rive se renderiza con contain: nunca se deforma. */
.avatar-area { position:relative; z-index:2; width:min(630px,84vw,calc(75dvh - 92px)); aspect-ratio:3/4; transform:translateY(26px); }
.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; }
.chat-panel { --chat-height:min(30dvh,280px); position:absolute; z-index:5; top:0; left:clamp(18px,7vw,130px); display:none; width:min(290px,38vw); max-height:var(--chat-height); overflow:hidden; pointer-events:none; }.chat-panel.has-messages { display:block; }.chat-panel.has-messages::after { position:absolute; z-index:1; right:0; bottom:0; left:0; height:46px; background:linear-gradient(transparent,#092650f2 92%); content:""; pointer-events:none; }.conversation { display:grid; width:100%; max-height:var(--chat-height); gap:3px; overflow-y:auto; overscroll-behavior:contain; padding:1px 7px 34px 1px; -webkit-overflow-scrolling:touch; pointer-events:auto; touch-action:pan-y; }.bubble { border-radius:12px; padding:5px 8px; background:#ffffffeb; box-shadow:0 7px 18px #03163530; color:#17315b; font-size:11px; line-height:1.28; }.bubble strong { display:block; margin-bottom:1px; color:#087cf0; font-size:8.5px; font-weight:850; }.bubble p { margin:0; }.bubble--user { margin-left:10px; background:#187ee4; color:#fff; }.bubble--user strong { color:#d6ecff; }
.start-conversation { position:absolute; z-index:6; bottom:7%; left:50%; border:0; border-radius:999px; padding:14px 22px; transform:translateX(-50%); background:linear-gradient(110deg,#20d8d0,#087cf0 48%,#7455f7); background-size:180% 100%; box-shadow:0 0 0 0 #38d7ffaa,0 15px 32px #0316357d; color:#fff; cursor:pointer; font:800 14px/1 Inter,ui-sans-serif,system-ui,sans-serif; white-space:nowrap; animation:conversation-cta 1.8s ease-in-out infinite; }.start-conversation:disabled { cursor:wait; opacity:.65; animation:none; }.start-conversation:focus-visible { outline:3px solid #fff; outline-offset:4px; } @keyframes conversation-cta { 0%,100% { background-position:0 50%; box-shadow:0 0 0 0 #38d7ff99,0 15px 32px #0316357d; } 50% { background-position:100% 50%; box-shadow:0 0 0 12px #38d7ff00,0 18px 38px #0316359a; } }
.call-controls { position:relative; z-index:8; display:flex; align-items:center; justify-content:center; gap:23px; padding:7px 12px 14px; touch-action:none; }.control { display:grid; width:58px; height:58px; place-items:center; border:0; border-radius:50%; color:#fff; cursor:pointer; line-height:0; transition:transform .2s,filter .2s; }.control:hover { transform:scale(1.06); filter:brightness(1.12); }.control svg { display:block; width:29px; height:29px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }.hangup { background:var(--red); }.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; }.recording-wrap { position:relative; display:grid; place-items:center; }.recording-wrap b { position:absolute; z-index:2; 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-hint { display:none; position:absolute; top:50%; left:calc(100% + 13px); width:max-content; max-width:min(245px,calc(50vw - 42px)); margin:0; transform:translateY(-50%); border:1px solid #ffffff30; border-radius:11px; padding:6px 9px; background:#0a2a58e8; box-shadow:0 8px 20px #020e2680; color:#d9eaff; font-size:10px; line-height:1.25; pointer-events:none; }.call-hint.has-message { display:block; }.call-hint::before { position:absolute; top:50%; right:100%; transform:translateY(-50%); border:6px solid transparent; border-right-color:#0a2a58e8; content:""; }
.control:disabled { cursor:not-allowed; opacity:.35; transform:none; filter:none; }.microphone.is-recording:disabled { cursor:default; opacity:1; }.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; }
@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 - 96px)); transform:translateY(18px); }.chat-panel { --chat-height:min(25dvh,205px); left:18px; width:calc(100% - 36px); }.call-hint { top:auto; bottom:calc(100% + 12px); left:50%; max-width:calc(100vw - 32px); transform:translateX(-50%); text-align:center; }.call-hint::before { top:100%; right:auto; left:50%; transform:translateX(-50%); border-color:#0a2a58e8 transparent transparent; }.call-header { padding:18px 22px; } }
@media (prefers-reduced-motion:reduce) { .start-conversation { animation:none; } }