@font-face{font-family:Inter;src:url("/recursos/whatsapp/fuentes/inter-400.woff2")}@font-face{font-family:Inter;src:url("/recursos/whatsapp/fuentes/inter-600.woff2");font-weight:600}
*{box-sizing:border-box}body{margin:0;background:#f6f5f0;color:#20242b;font-family:Inter,Arial,sans-serif}main{display:grid;grid-template-columns:1fr 520px;gap:48px;max-width:1240px;margin:0 auto;padding:48px 32px;align-items:center}.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:600;color:#6548eb}h1{font-size:clamp(38px,4.2vw,62px);line-height:1.08;letter-spacing:-.035em;font-weight:600;margin:30px 0;min-height:3.24em}.intro>p:last-child{font-size:19px;line-height:1.55;max-width:470px;color:#606571}.demo{display:flex;flex-direction:column;align-items:center}.phone-wrap{width:410px;height:864px;max-width:100%;position:relative}.phone{background:#171a20;padding:10px;border-radius:45px;width:410px;height:864px;transform-origin:top left;box-shadow:0 18px 50px #20242b28}.screen{width:390px;height:844px;border-radius:35px;position:relative;overflow:hidden;background:#efeae2}.header,.footer{position:absolute;background-image:url("/recursos/whatsapp/chrome.png");background-size:390px 844px;width:390px;left:0;z-index:5}.header{height:110px;top:0}.footer{height:81px;top:763px;background-position:0 -763px}.clock{position:absolute;top:0;left:0;background:#fff;width:102px;height:42px;padding:13px 0 0 29px;font-weight:600;font-size:14px;z-index:6}.status{position:absolute;left:82px;top:77px;width:217px;height:24px;padding:4px 0 0 5px;background:#fff;font-size:10.7px;color:#667781;z-index:6}.viewport{position:absolute;left:0;top:110px;width:390px;height:653px;overflow:hidden}.messages{position:absolute;width:390px;will-change:transform}.day{position:absolute;top:7px;left:169px;width:52px;height:23px;text-align:center;background:#f7f5f0;border-radius:7px;padding-top:5px;font-size:10px;color:#667781;font-weight:600}.bubble{position:absolute;padding:9px 11px;background:#fff;border-radius:10px;font-size:16px;line-height:20px;white-space:pre-line;will-change:opacity,transform}.bubble.client{background:#d9fdd3}.bubble .stamp{position:absolute;bottom:5px;right:8px;font-size:9.5px;color:#667781;line-height:12px}.bubble.client .stamp{right:28px}.tick{position:absolute;right:7px;bottom:5px;font-size:12px;color:#53bdeb;line-height:12px}.typing{position:absolute;width:74px;height:34px;border-radius:12px;background:white;display:flex;align-items:center;padding-left:16px;gap:5px}.typing i{width:6px;height:6px;border-radius:50%;background:#839087}.input{display:none;position:absolute;left:49px;top:775px;width:270px;height:36px;border-radius:13px;background:white;padding:5px 10px;font-size:12.2px;line-height:15.25px;overflow:hidden;z-index:7}.send{display:none;position:absolute;left:349px;top:779px;width:33px;height:33px;border-radius:50%;background:#008069;color:white;text-align:center;line-height:32px;font-size:23px;z-index:7}.controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:22px;width:100%}button{border:1px solid #20242b22;background:white;color:#20242b;border-radius:22px;padding:10px 16px;font:600 13px Inter;cursor:pointer}button:first-child{background:#6548eb;border-color:#6548eb;color:white}button:focus-visible,input:focus-visible{outline:3px solid #6548eb55;outline-offset:4px}input[type=range]{width:150px;accent-color:#6548eb}output{font-size:12px;font-variant-numeric:tabular-nums}.seek-label{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.notice{max-width:440px;font-size:11px;line-height:1.5;text-align:center;color:#626773;margin:16px 0 0}.embed main{display:block;padding:0;width:100%}.embed .intro{display:none}.embed .phone{box-shadow:none}.embed body{background:transparent}.embed .notice{padding:0 10px}.embed .controls{margin-top:12px}@media(max-width:760px){main{display:flex;flex-direction:column;padding:28px 18px;gap:24px}.intro{width:100%}h1{min-height:0}.phone-wrap{width:min(410px,100%)}.demo{width:100%;max-width:520px}.intro>p:last-child{font-size:16px}.controls{gap:6px}}
.placeholder{position:absolute;z-index:6;left:59px;top:782px;width:125px;height:24px;background:white;color:#667781;font-size:14px;line-height:22px}.controls[hidden]{display:none}
.screen-only main{padding:0;display:block}.screen-only .intro,.screen-only .notice,.screen-only .controls{display:none}.screen-only .phone{width:390px;height:844px;padding:0;border-radius:0;box-shadow:none;background:transparent}.screen-only .screen{border-radius:0}.screen-only body{background:transparent}
/* Barra de estado como la de un iPhone actual (13 de octubre de 2026, noche). La carcasa de la web dibuja la isla en el centro: la hora va centrada en el hueco de su
   izquierda y los iconos en el de su derecha, y la zona mide 54 px (eran 42). La cabecera del chat baja 12 px y la
   conversación pierde esos 12 (641 px de alto; chat.js). */
.header{height:122px;background-color:#fff;background-position:0 12px;background-repeat:no-repeat}.clock{width:134px;height:54px;padding:20px 0 0;text-align:center;font-size:16.5px;letter-spacing:-.01em}.status{top:89px}.viewport{top:122px;height:641px}.screen::before{content:'';position:absolute;z-index:6;left:0;right:0;top:0;height:52.4px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 54'%3E%3Cg fill='%230b0c0f'%3E%3Crect x='294' y='31.5' width='3.4' height='4.5' rx='1'/%3E%3Crect x='299.2' y='29' width='3.4' height='7' rx='1'/%3E%3Crect x='304.4' y='26.5' width='3.4' height='9.5' rx='1'/%3E%3Crect x='309.6' y='24' width='3.4' height='12' rx='1'/%3E%3Ccircle cx='327' cy='34.6' r='1.7'/%3E%3Crect x='343.2' y='25.8' width='20.6' height='8.4' rx='2.4'/%3E%3Cpath d='M367.6 27.6v4.8c1-.4 1.6-1.3 1.6-2.4s-.6-2-1.6-2.4z' fill-opacity='.45'/%3E%3C/g%3E%3Cg fill='none' stroke='%230b0c0f'%3E%3Cpath d='M319.4 28.4a11 11 0 0 1 15.2 0' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M322.6 31.6a6.6 6.6 0 0 1 8.8 0' stroke-width='2.3' stroke-linecap='round'/%3E%3Crect x='341.5' y='24.1' width='24' height='11.8' rx='3.8' stroke-opacity='.4'/%3E%3C/g%3E%3C/svg%3E") center top/100% 100% no-repeat,linear-gradient(#fff,#fff) right top/134px 100% no-repeat}.screen-only,.screen-only body{overflow:hidden}