/* Robot aprobado + teléfono HTML. Sin llamada/audio/estado conectado simulados. */
.agent-scene { position:relative; width:100%; min-width:0; height:530px; isolation:isolate; }
.agent-scene::before { content:""; position:absolute; inset:16% -4% 0; z-index:-1; background:radial-gradient(ellipse, #087f8c44, transparent 66%); }
.agent-character { position:absolute; width:67%; height:auto; left:-8%; bottom:2%; filter:drop-shadow(0 22px 24px #0005); animation:agent-arrive .9s ease-out both; }
.agent-invitation { position:absolute; top:8px; left:1%; color:#f7fafc; font-size:1.05rem; font-weight:600; line-height:1.5; transform:rotate(-4deg); }
.agent-invitation span { display:block; margin-left:72%; color:#72d8dd; font-size:2.5rem; line-height:1; }
.agent-phone { position:absolute; right:0; top:0; width:56%; max-width:282px; min-height:508px; padding:29px 19px 16px; border:5px solid #526475; border-radius:39px; background:linear-gradient(160deg,#153b51,#0b2135 70%); color:#f7fafc; text-align:center; box-shadow:inset 0 0 0 1px #ffffff20,12px 22px 52px #0005; }
.agent-phone-camera { position:absolute; top:10px; left:40%; width:20%; height:7px; border-radius:9px; background:#061523; }
.agent-phone-brand { margin:0 0 14px; font-size:.65rem; letter-spacing:.19em; font-weight:700; color:#e3ecf0; }
.agent-phone-brand span { color:#72d8dd; }
.agent-avatar { position:relative; width:90px; height:90px; margin:0 auto 14px; overflow:hidden; border-radius:50%; background:radial-gradient(circle,#19566a,#102a43); border:1px solid #6bced03d; }
.agent-avatar img { position:absolute; width:132px; max-width:none; height:auto; top:-5px; left:-20px; }
.agent-phone-role { color:#9bb7c6; font-size:.76rem; margin:0 0 8px; }
.agent-phone h2 { color:#f7fafc; font-size:1.32rem; line-height:1.3; letter-spacing:-.025em; margin:0 0 13px; }
.agent-wave { display:flex; height:28px; align-items:center; justify-content:center; gap:4px; margin-bottom:8px; }
.agent-wave i { width:3px; height:8px; border-radius:4px; background:#55c9cf; opacity:.7; }
.agent-wave i:nth-child(3n) { height:24px; }.agent-wave i:nth-child(2n) { height:16px; }
.agent-web-status { color:#c0d1db; font-size:.66rem; margin:0 0 14px; }
.agent-voice,.agent-write { width:100%; min-height:46px; border-radius:12px; font:inherit; cursor:pointer; }
.agent-voice { display:flex; align-items:center; justify-content:center; gap:8px; color:#fff; border:1px solid #27aeb6; background:#087f8c; font-size:.91rem; font-weight:700; box-shadow:0 4px 16px #0003; }
.agent-voice svg { width:20px; height:20px; }.agent-voice:hover { background:#096c78; }
.agent-write { margin-top:7px; color:#e0f0f4; border:1px solid #7196a84d; background:transparent; font-size:.79rem; }.agent-write:hover { background:#ffffff0c; }
.agent-permission { font-size:.62rem; line-height:1.5; color:#a6bdc9; margin:12px 0 0; }
.agent-subtle-link { display:inline-block; color:#89dce2; margin-top:23px; text-underline-offset:5px; }
.agent-home-link { display:inline-block; margin-top:18px; color:#a1e4e8; text-underline-offset:4px; font-size:.87rem; }
.agent-landing-note { font-size:.87rem; margin:18px 0 0; color:#b4c9d5; }
.landing-nav { justify-content:space-between; }.landing-nav-links { display:flex; gap:26px; align-items:center; color:#e3edf3; font-size:.9rem; }
.agent-landing { padding-top:160px; }.agent-landing h1 { font-size:clamp(2.6rem,4.5vw,4rem); }
.agent-landing h1 span { display:block; }
@media (min-width:1101px) { .agent-landing .hero-grid { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:36px; }.agent-landing h1 { font-size:clamp(2.15rem,3.15vw,3.2rem); letter-spacing:-.045em; } }
.agent-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; margin:46px 0 0; gap:44px; }
.agent-steps li { border-top:1px solid #d7e1e8; padding-top:24px; }.agent-step-number { color:#087f8c; font-size:.82rem; letter-spacing:.12em; }.agent-steps h3 { font-size:1.2rem; margin:15px 0 12px; }
.agent-prompt-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; }.agent-prompts>p { font-size:1.28rem; line-height:1.6; padding-bottom:24px; border-bottom:1px solid #d4e2e9; }
.agent-final-cta { text-align:center; }.agent-final-cta .button-row { justify-content:center; }.agent-final-cta>p:last-child { max-width:650px; margin:25px auto 0; font-size:.85rem; }
.landing-footer { padding:45px 0; }.landing-footer nav { display:flex; flex-wrap:wrap; gap:20px; margin:26px 0; }.landing-footer p { font-size:.8rem; }
.chat-launcher .agent-avatar { width:52px; height:52px; margin:0; border:none; background:transparent; }.chat-launcher .agent-avatar img { width:80px; top:-2px; left:-12px; }
.chat-header-copy .agent-offline { color:#e3edf3; font-size:.7rem; }.chat-panel[inert] { pointer-events:none; }
.agent-panel-note { padding:12px; border-left:3px solid #087f8c; background:#edf6f7; color:#25485d; font-size:.88rem; }
.chat-contact-controls { display:flex; flex-wrap:wrap; gap:9px; padding:14px 0; }.chat-consent-copy { font-size:.85rem; }.chat-consent-copy a { text-decoration:underline; }.chat-message { white-space:pre-wrap; overflow-wrap:anywhere; }
.agent-contact-options { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }.agent-contact-options .plan-summary { max-width:100%; overflow-wrap:anywhere; }
@keyframes agent-arrive { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:1100px) and (min-width:901px) { .hero-grid:has(.agent-scene) { gap:26px; grid-template-columns:minmax(0,1fr) minmax(360px,.95fr); }.agent-phone { width:61%; }.agent-character { width:66%; left:-8%; } }
@media (max-width:900px) { .hero-grid:has(.agent-scene) { grid-template-columns:1fr; gap:40px; }.agent-scene { max-width:530px; margin:0 auto; height:535px; }.agent-phone { right:4%; }.agent-character { left:-2%; width:62%; }.agent-invitation { left:7%; }.agent-prompt-layout { gap:32px; }.agent-landing { padding-top:130px; } }
@media (max-width:600px) { .agent-scene { height:505px; max-width:410px; }.agent-phone { width:61%; min-height:470px; right:0; padding:27px 12px 15px; border-width:4px; border-radius:32px; }.agent-character { width:64%; left:-9%; bottom:8%; }.agent-invitation { left:0; top:12px; font-size:.85rem; }.agent-phone h2 { font-size:1.12rem; }.agent-avatar { width:73px; height:73px; margin-bottom:12px; }.agent-avatar img { width:112px; left:-19px; }.agent-phone-brand { font-size:.56rem; }.agent-voice { font-size:.8rem; }.agent-write { font-size:.73rem; }.agent-permission { font-size:.57rem; }.agent-web-status { font-size:.58rem; }.agent-steps,.agent-prompt-layout { grid-template-columns:1fr; gap:22px; }.agent-steps { margin-top:30px; }.landing-nav-links { gap:16px; }.landing-nav-links>a:first-child { display:none; }.agent-final-cta h2 { font-size:2rem; } }
@media (prefers-reduced-motion:reduce) { .agent-character { animation:none; } }
@media (max-width:600px) { .agent-landing h1 { font-size:clamp(1.42rem,6vw,2.1rem); letter-spacing:-.04em; } }
.agent-card { display:grid; gap:8px; margin:10px 0 12px; padding:14px; border:1px solid #27aeb666; border-radius:14px; background:#fff; color:var(--slate-700,#334155); max-width:100%; }
.agent-card h4 { margin:0; font-size:.95rem; }.agent-card-when { margin:0; font-weight:700; color:#087f8c; font-size:.86rem; }
.agent-field { display:grid; gap:3px; font-size:.78rem; font-weight:600; }.agent-field input,.agent-field textarea { font:inherit; font-weight:400; font-size:.88rem; padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; width:100%; box-sizing:border-box; }
.agent-field textarea { min-height:58px; resize:vertical; }.agent-field input:focus,.agent-field textarea:focus { outline:2px solid #27aeb6; outline-offset:1px; }
.agent-consent { display:flex; gap:8px; align-items:flex-start; font-size:.76rem; line-height:1.45; }.agent-consent input { margin-top:3px; flex:none; }.agent-consent a { text-decoration:underline; }
.agent-card-actions { display:flex; flex-wrap:wrap; gap:8px; }.agent-card-actions[hidden] { display:none; }.agent-card-status { margin:0; font-size:.84rem; font-weight:600; }.agent-card-status:empty { display:none; }

.agent-nav { margin:2px 0 12px; }
.agent-wave i { transform-origin:center; transition:transform .08s linear, background .2s; }.agent-wave.is-live i { opacity:1; }.agent-wave.is-speaking i { background:#7fe3e8; }
.agent-phone[data-call="listening"] .agent-avatar,.agent-phone[data-call="speaking"] .agent-avatar { box-shadow:0 0 0 4px #27aeb655, 0 0 22px #27aeb666; }
.agent-call-caption { min-height:2.6em; margin:0 0 6px; font-size:.7rem; line-height:1.3; color:#d6e6ee; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.agent-call-caption:empty { min-height:0; }
.agent-call-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.agent-call-actions[hidden],.agent-voice[hidden] { display:none; }
.agent-call-actions button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:46px; border-radius:12px; font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; color:#fff; }
.agent-call-actions svg { width:18px; height:18px; flex:none; }
.agent-call-mute { border:1px solid #7196a8; background:#ffffff14; }.agent-call-mute[aria-pressed="true"] { background:#f7fafc; color:#0b2135; }
.agent-call-hangup { border:1px solid #f0646a; background:#d92d35; }.agent-call-hangup:hover { background:#b9232a; }
.agent-phone[data-call="denied"] .agent-web-status,.agent-phone[data-call="failed"] .agent-web-status,.agent-phone[data-call="busy"] .agent-web-status,.agent-phone[data-call="nomic"] .agent-web-status { color:#ffb4b7; }
.agent-permission a { color:#9fe3e7; text-decoration:underline; }
.chat-quick-row { display:flex; flex-wrap:wrap; gap:6px; padding:8px 16px; border-bottom:1px solid #e2e8f0; background:#f8fbfc; }
.chat-quick { display:inline-flex; align-items:center; padding:5px 11px; border:1px solid #cfdde3; border-radius:999px; font-size:.75rem; font-weight:600; color:#21506a; background:#fff; text-decoration:none; }.chat-quick:hover { border-color:#087f8c; color:#087f8c; }
.chat-disclosure a { text-decoration:underline; }
.agent-channels { border:1px solid #e2e8f0; border-radius:8px; padding:8px 10px; margin:0; display:flex; flex-wrap:wrap; gap:6px 16px; }.agent-channels legend { font-size:.78rem; font-weight:600; padding:0 4px; }
.agent-channel { display:flex; align-items:center; gap:6px; font-size:.84rem; }