:root{--bg:#fafaf8;--bg-alt:#fff;--ink:#0a0a0a;--ink-soft:#5a5a57;--ink-line:#e6e4de;--accent:#06f;--accent-ink:#fff;--accent-soft:#0066ff14;--accent-glow:#0066ff59;--font-display:"Clash Display", "Inter", system-ui, sans-serif;--font-body:"Satoshi", "Inter", system-ui, sans-serif;--container:860px;--gutter:clamp(20px, 4vw, 48px);--radius:18px;--radius-pill:999px;--ease:cubic-bezier(.2, .7, .2, 1);--ease-out:cubic-bezier(.16, 1, .3, 1)}*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;min-height:100dvh;font-size:17px;line-height:1.55}img,svg{max-width:100%;display:block}button{font:inherit;cursor:pointer}.espiral{z-index:0;pointer-events:none;place-items:center;display:grid;position:fixed;inset:0}.espiral:before{content:"";aspect-ratio:1600/847;background-color:var(--accent);opacity:.055;width:min(120vw,1100px);animation:140s linear infinite girar;-webkit-mask:url(/marca/oc-logo.svg) 50%/contain no-repeat;mask:url(/marca/oc-logo.svg) 50%/contain no-repeat}@keyframes girar{to{transform:rotate(360deg)}}.envoltura{z-index:1;max-width:var(--container);padding:clamp(28px, 5vw, 56px) var(--gutter) 150px;margin:0 auto;position:relative}.cabecera{align-items:center;gap:14px;margin-bottom:clamp(30px,6vw,52px);display:flex}.marca{aspect-ratio:1600/847;background-color:var(--ink);flex-shrink:0;width:42px;-webkit-mask:url(/marca/oc-logo.svg) 50%/contain no-repeat;mask:url(/marca/oc-logo.svg) 50%/contain no-repeat}.cabecera-texto{flex-direction:column;min-width:0;display:flex}.cabecera-nombre{font-family:var(--font-display);letter-spacing:-.02em;font-size:1.05rem;font-weight:600}.cabecera-rol{color:var(--ink-soft);font-size:.82rem}.cabecera-rol a{color:var(--accent);text-decoration:none}.cabecera-rol a:hover{text-decoration:underline}.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);align-items:center;gap:10px;margin-bottom:16px;font-size:.75rem;font-weight:500;display:inline-flex}.eyebrow:before{content:"";background:var(--accent);width:28px;height:1px}h1{font-family:var(--font-display);letter-spacing:-.025em;margin:0 0 18px;font-size:clamp(2rem,5.2vw,3.3rem);font-weight:600;line-height:1.03}h1 em{color:var(--accent);font-style:normal}.lead{color:var(--ink-soft);max-width:58ch;margin:0 0 28px;font-size:clamp(1rem,1.8vw,1.14rem)}.hilo{background:linear-gradient(90deg, transparent, var(--accent) 18%, var(--accent) 82%, transparent);opacity:.45;height:1px;margin:clamp(28px,5vw,42px) 0}.conversacion{flex-direction:column;gap:18px;margin-bottom:24px;display:flex}.turno{animation:aparecer .45s var(--ease-out) both;flex-direction:column;gap:6px;display:flex}@keyframes aparecer{0%{opacity:0;transform:translateY(8px)}}.turno-quien{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-size:.69rem;font-weight:500}.burbuja{border-radius:var(--radius);white-space:pre-wrap;overflow-wrap:anywhere;padding:15px 19px}.turno.visitante{align-items:flex-end}.turno.visitante .burbuja{background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:6px;max-width:82%}.turno.agente .burbuja{background:var(--bg-alt);border:1px solid var(--ink-line);border-bottom-left-radius:6px}.pensando{background:var(--bg-alt);border:1px solid var(--ink-line);border-radius:var(--radius);border-bottom-left-radius:6px;align-items:center;gap:7px;width:fit-content;padding:16px 19px;display:inline-flex}.pensando span{background:var(--accent);width:6px;height:6px;animation:latir 1.3s var(--ease) infinite;border-radius:50%}.pensando span:nth-child(2){animation-delay:.18s}.pensando span:nth-child(3){animation-delay:.36s}@keyframes latir{0%,60%,to{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}.sugerencias{flex-wrap:wrap;gap:9px;margin-bottom:24px;display:flex}.sugerencia{border:1px solid var(--ink-line);background:var(--bg-alt);color:var(--ink);border-radius:var(--radius-pill);transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);padding:9px 17px;font-size:.88rem}.sugerencia:hover:not(:disabled){border-color:var(--accent);box-shadow:0 4px 18px var(--accent-soft);transform:translateY(-1px)}.sugerencia:disabled{opacity:.45;cursor:not-allowed}.escritura{z-index:2;padding:14px var(--gutter) calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to top, var(--bg) 62%, transparent);position:fixed;bottom:0;left:0;right:0}.escritura-caja{max-width:var(--container);align-items:flex-end;gap:9px;margin:0 auto;display:flex}.campo{min-width:0;font:inherit;color:var(--ink);background:var(--bg-alt);border:1px solid var(--ink-line);border-radius:var(--radius);resize:none;max-height:168px;transition:border-color .2s var(--ease), box-shadow .2s var(--ease);flex:1;padding:13px 17px;font-size:1rem}.campo:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);outline:none}.campo::placeholder{color:var(--ink-soft)}.enviar{background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-pill);width:48px;height:48px;transition:transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);border:none;flex-shrink:0;place-items:center;display:grid}.enviar:hover:not(:disabled){box-shadow:0 6px 20px var(--accent-glow);transform:translateY(-1px)}.enviar:disabled{opacity:.35;cursor:not-allowed}.aviso{max-width:var(--container);color:var(--ink-soft);text-align:center;margin:9px auto 0;font-size:.72rem}.aviso a{color:var(--accent);text-decoration:none}.aviso a:hover{text-decoration:underline}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-color-scheme:dark){:root{--bg:#f1f0ec;--bg-alt:#fbfaf8}}.turno.agente .burbuja p{margin:0 0 .7em}.turno.agente .burbuja p:last-child{margin-bottom:0}.turno.agente .burbuja ul{margin:0 0 .7em;padding-left:1.15em;list-style:none}.turno.agente .burbuja ul:last-child{margin-bottom:0}.turno.agente .burbuja li{margin-bottom:.35em;position:relative}.turno.agente .burbuja li:before{content:"";background:var(--accent);border-radius:50%;width:4px;height:4px;position:absolute;top:.65em;left:-.9em}.turno.agente .burbuja strong{font-weight:700}