.tensor-website { position:relative; display:flex; flex-direction:column; gap:17px; width:100%; height:100%; min-height:400px; overflow:hidden; padding:24px; border-radius:6px; background:#fff; color:#171b18; font-family:Inter,"Inter Placeholder",sans-serif; container-type:inline-size; }
.web-demo-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; flex:none; }
.web-demo-heading p { margin:0; font:200 clamp(28px,7cqw,46px)/1.05 "PP Editorial New Ultralight",sans-serif; letter-spacing:-.02em; font-feature-settings:"blwf","cv03","cv04","cv09","cv11"; white-space:nowrap; }
.web-devices { display:flex; padding:3px; border:1px solid #e6e8e9; border-radius:15px; background:#fff; gap:3px; }
.web-devices button { display:grid; place-items:center; width:51px; height:35px; border:0; border-radius:11px; color:#6c7277; background:transparent; cursor:pointer; }
.web-devices button[aria-pressed="true"] { background:#dffbd3; color:#253b29; }
.web-devices svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.web-devices button:focus-visible,.web-demo-pause:focus-visible { outline:2px solid #4c7e31; outline-offset:3px; }
.web-demo-stage { flex:1; min-height:0; display:flex; justify-content:center; }
.web-browser { width:100%; height:100%; overflow:hidden; border:1px solid #e4e6e8; border-radius:10px; background:white; display:flex; flex-direction:column; transition:width .7s cubic-bezier(.4,0,.2,1),border-radius .7s; }
.tensor-website[data-device="tablet"] .web-browser { width:72%; }
.tensor-website[data-device="mobile"] .web-browser { width:43%; border-radius:18px; }
.web-browser-bar { height:19px; padding:0 9px; display:flex; align-items:center; gap:5px; border-bottom:1px solid #e9eaeb; background:#f8f8f8; flex:none; }
.web-browser-bar i { display:block; width:6px; height:6px; border-radius:50%; background:#c7cbd0; }
.web-site { flex:1; min-height:0; display:flex; flex-direction:column; container-type:inline-size; }
.web-site-nav { display:flex; align-items:center; gap:18px; padding:12px 26px; flex:none; border-bottom:1px solid #ececeb; }
.web-site-brand { font-size:11px; font-weight:600; letter-spacing:3px; margin-right:auto; }
.web-site-links { display:flex; align-items:center; gap:17px; font-size:9px; color:#414648; }
.web-site-contact { border:1px solid #dfe1e4; border-radius:99px; padding:6px 15px; font-size:9px; }
.web-site-menu { display:none; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; }
.web-site-hero { position:relative; flex:1; min-height:0; overflow:hidden; padding:24px 26px; display:flex; align-items:center; }
.web-site-image { position:absolute; inset:0 0 0 auto; width:55%; height:100%; object-fit:cover; object-position:center 65%; }
.web-site-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#fff 0%,#fff 45%,#ffffffdb 51%,transparent 72%); }
.web-site-copy { position:relative; z-index:1; width:63%; }
.web-site-copy h3 { margin:0; font-family:Inter,"Inter Placeholder",sans-serif; font-size:clamp(21px,5.2cqw,34px); font-weight:600; letter-spacing:-.045em; line-height:1.09; }
.web-site-copy p { max-width:300px; margin:10px 0 0; font-size:clamp(10px,2.1cqw,14px); color:#676b6c; line-height:1.35; letter-spacing:-.02em; }
.web-site-cta { position:relative; display:inline-flex; align-items:center; gap:16px; margin-top:17px; padding:12px 16px; border-radius:9px; background:#c5fa77; font-size:12px; line-height:1; font-weight:500; white-space:nowrap; box-shadow:0 5px 20px #b4ee6530; animation:web-cta 6s linear infinite; }
.web-site-cta > svg { width:17px; height:17px; stroke:currentColor; stroke-width:1.8; fill:none; }
.web-demo-cursor { position:absolute; width:15px; height:19px; right:6px; top:20px; transform-origin:top left; animation:web-cursor 6s ease-in-out infinite; }
.web-demo-cursor svg { display:block; width:100%; height:100%; fill:#272c30; stroke:#fff; stroke-width:1.2; stroke-linejoin:round; }
.web-demo-click { position:absolute; width:22px; height:22px; right:10px; top:9px; fill:none; stroke:#a6ee51; stroke-width:2; animation:web-click 6s ease-out infinite; }
.web-demo-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; flex:none; }
.web-demo-status { display:flex; align-items:center; gap:14px; border:1px solid #e7e9eb; border-radius:99px; padding:8px 12px; }
.web-demo-status span { display:flex; align-items:center; gap:8px; font-size:12px; color:#50565b; white-space:nowrap; }
.web-demo-status span+span { border-left:1px solid #dfe1e4; padding-left:14px; }
.web-demo-status svg { width:23px; height:23px; padding:5px; border-radius:50%; background:#d5ffc0; stroke:#34894b; stroke-width:2.6; fill:none; }
.web-demo-pause { width:32px; height:32px; flex:none; display:grid; place-items:center; border:1px solid #e2e5e7; border-radius:50%; background:#fff; color:#62676c; cursor:pointer; }
.web-demo-pause svg { width:14px; height:14px; }
.tensor-website:not(.is-playing) * { animation-play-state:paused!important; }
@keyframes web-cursor { 0%,15% { visibility:hidden; transform:translate(18px,14px); } 27%,48% { visibility:visible; transform:none; } 53% { visibility:visible; transform:scale(.86); } 58%,77% { visibility:visible; transform:none; } 90%,100% { visibility:hidden; transform:translate(18px,14px); } }
@keyframes web-click { 0%,51% { visibility:hidden; transform:scale(.5); } 54%,61% { visibility:visible; transform:scale(1); } 66%,100% { visibility:hidden; transform:scale(1.2); } }
@keyframes web-cta { 0%,49%,58%,100% { background:#c5fa77; } 53% { background:#b3ee62; } }
@container (max-width:500px) {
 .web-site-nav { padding:10px 16px; gap:12px; }.web-site-links { gap:10px; font-size:8px; }.web-site-contact { font-size:8px; padding:5px 9px; }
 .web-site-hero { padding:18px 16px; }.web-site-copy { width:75%; }.web-site-copy h3 { font-size:27px; }.web-site-copy p { font-size:11px; }.web-site-cta { padding:10px 12px; font-size:10px; gap:10px; }
}
@container (max-width:350px) {
 .web-site-links,.web-site-contact { display:none; }.web-site-menu { display:block; }.web-site-nav { padding:10px 16px; }.web-site-brand { font-size:9px; letter-spacing:2px; }
 .web-site-hero { align-items:flex-start; padding:20px 16px; }.web-site-copy { width:100%; }.web-site-copy h3 { font-size:clamp(18px,8cqw,25px); max-width:240px; }.web-site-copy p { max-width:220px; font-size:10px; margin-top:9px; }.web-site-cta { margin-top:13px; }
 .web-site-hero::after { background:linear-gradient(180deg,#ffffffed,#ffffffb0 55%,#ffffff15); }.web-site-image { width:100%; object-position:center 62%; }
}
@container (max-width:540px) {
 .web-demo-heading { gap:8px; }.web-demo-heading p { font-size:clamp(27px,8.3cqw,40px); }.web-devices { gap:1px; padding:2px; border-radius:11px; }.web-devices button { width:29px; height:30px; border-radius:8px; }.web-devices svg { width:18px; height:18px; }
 .web-demo-status { gap:9px; padding:7px 9px; }.web-demo-status span { font-size:10px; gap:5px; }.web-demo-status span+span { padding-left:9px; }.web-demo-status svg { width:20px; height:20px; padding:4px; }
 .tensor-website[data-device="mobile"] .web-browser { width:60%; }
}
@media (max-width:809px) { .tensor-website { padding:18px 16px; gap:15px; } }
@media (prefers-reduced-motion:reduce) { .tensor-website * { animation:none!important; transition:none!important; }.web-demo-cursor,.web-demo-click { display:none; } }
.web-site-cta > .web-demo-click { width:22px; height:22px; stroke-width:2; }

/* Se reproduce sola: sin botón de pausa. */
.web-demo-pause { display:none!important; }