/* intro 3D (Three.js): muela de porcelana, cepillo y pasta · 4.7 s */
.intro{position:fixed;inset:0;z-index:100;overflow:hidden}
.intro.done{display:none}
.intro .lid{position:absolute;left:0;right:0;height:50.5%;z-index:0;background:linear-gradient(175deg,#34426A 0%,#2E3A59 28%,#161D30 70%,#0B0F1C 100%);background-size:100% 198%}
.intro .lid.top{top:0;background-position:0 0}.intro .lid.bot{bottom:0;background-position:0 100%}
.intro.play .lid.top{animation:lidUp .75s cubic-bezier(.7,0,.25,1) 4s forwards}.intro.play .lid.bot{animation:lidDown .75s cubic-bezier(.7,0,.25,1) 4s forwards}
@keyframes lidUp{to{transform:translateY(-102%);box-shadow:0 14px 30px -12px rgba(46,58,89,.3)}}@keyframes lidDown{to{transform:translateY(102%);box-shadow:0 -14px 30px -12px rgba(46,58,89,.3)}}
#intro3d{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}
.intro.play #intro3d,.intro.play .intro-poster{animation:fadeout .45s ease 3.75s forwards}
.intro-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
.intro.play .intro-poster{animation:posterZoom 3.8s ease-out forwards,fadeout .45s ease 3.75s forwards}
@keyframes posterZoom{from{transform:scale(.92)}to{transform:scale(1.06)}}
.intro-logo{position:absolute;z-index:3;left:50%;top:50%;width:min(250px,56vw);translate:-50% -50%;opacity:0;transform:scale(.85)}
.intro.play .intro-logo{animation:logoIn .55s cubic-bezier(.3,1.4,.5,1) 3.55s forwards,fadeout .35s ease 4.05s forwards}
@keyframes logoIn{to{opacity:1;transform:none}}
@keyframes fadein{to{opacity:1}}@keyframes fadeout{to{opacity:0}}
.skip-intro{position:absolute;z-index:4;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));font:600 14px var(--sans);color:var(--marino);background:rgba(255,255,255,.85);border:1.5px solid var(--linea);padding:10px 18px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px)}
.intro.play .skip-intro{animation:fadeout .3s ease 3.95s forwards}
.skip-intro:hover{border-color:var(--menta)}
/* animación perenne del logo del hero */
.hero-art img{animation:float 6s ease-in-out infinite}
.hero-art .halo{animation:spin 18s linear infinite}
@keyframes float{50%{transform:translateY(-14px) rotate(-1.5deg)}}@keyframes spin{to{transform:rotate(360deg)}}
.spark{position:absolute;width:18px;height:18px;background:var(--lima);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:twinkle 3.2s ease-in-out infinite;z-index:3}
.spark.s2{background:var(--durazno);animation-delay:1.1s;width:12px;height:12px}.spark.s3{background:var(--celeste);animation-delay:2.1s;width:14px;height:14px}
@keyframes twinkle{0%,100%{transform:scale(.2) rotate(0);opacity:0}50%{transform:scale(1) rotate(90deg);opacity:1}}
/* ripple */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rip .65s ease-out;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}
.spec-grid .spec{transition-delay:calc(var(--i,0)*60ms)}
/* flotantes */
.floats{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.fab{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;text-decoration:none;box-shadow:0 12px 24px -10px rgba(0,0,0,.45);border:0;cursor:pointer;position:relative;transition:transform .2s}
.fab:hover{transform:scale(1.08)}.fab svg{width:28px;height:28px;fill:#fff}
.fab.wa{background:#25D366;animation:pulse 2.6s infinite}.fab.call{background:var(--celeste)}.fab.chat{background:var(--marino)}
.fab .tip{position:absolute;right:68px;white-space:nowrap;background:var(--marino);color:#fff;font-size:12.5px;padding:7px 12px;border-radius:10px;opacity:0;transform:translateX(6px);transition:.2s;pointer-events:none}
.fab:hover .tip{opacity:1;transform:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
/* chat */
.chatbox{position:fixed;right:18px;bottom:96px;z-index:45;width:min(370px,calc(100vw - 24px));height:min(540px,calc(100svh - 130px));background:#fff;border-radius:22px;box-shadow:0 30px 60px -20px rgba(46,58,89,.5);display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(16px) scale(.98);transition:.25s}
.chatbox.open{opacity:1;visibility:visible;transform:none}
.chat-head{background:linear-gradient(135deg,var(--marino),#3d4e78);color:#fff;padding:14px 16px;display:flex;gap:10px;align-items:center}
.chat-head img{width:38px;height:38px;background:#fff;border-radius:50%;padding:3px}.chat-head b{display:block;font-size:14px}.chat-head small{font-size:11.5px;color:#c8d2ea}
.chat-head button{margin-left:auto;background:none;border:0;color:#fff;font-size:24px;cursor:pointer}
.chat-log{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--fondo)}
.msg{max-width:86%;padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.45}
.msg.bot{background:#fff;border:1px solid var(--linea);border-bottom-left-radius:4px}.msg.user{background:var(--menta);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg a{color:var(--verde);font-weight:600}.msg.typing{color:var(--gris)}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--linea);background:#fff}
.chips button{font:inherit;font-size:12.5px;border:1.5px solid var(--menta);color:var(--verde);background:#fff;border-radius:999px;padding:6px 11px;cursor:pointer}
.chips button:hover{background:var(--menta);color:#fff}
.chat-form{display:flex;gap:8px;padding:10px 12px;background:#fff}
.chat-form input{flex:1;font:inherit;font-size:16px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--linea)}
.chat-form button{border:0;background:var(--menta);color:#fff;border-radius:12px;padding:0 16px;font-weight:600;cursor:pointer;position:relative;overflow:hidden}
@media (max-width:560px){.chatbox{right:12px;bottom:90px}.floats{right:12px;bottom:12px}.fab{width:54px;height:54px}}
.chat-form input{min-width:0}.chat-head small{line-height:1.3;display:block}
.intro-poster[hidden]{display:none!important}
.intro-logo{filter:drop-shadow(0 0 22px rgba(92,200,160,.45))}

.intro-halo{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(38% 34% at 50% 54%,rgba(92,200,160,.22),transparent 70%),radial-gradient(30% 40% at 56% 46%,rgba(154,143,216,.2),transparent 72%),radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(3,5,12,.55) 100%)}
.intro.play .intro-halo{animation:haloPulse 4.7s ease-in-out forwards}
@keyframes haloPulse{0%{opacity:.6}62%{opacity:1;transform:scale(1.04)}70%{opacity:1;filter:brightness(1.35)}86%{opacity:.9}100%{opacity:0}}
#intro3d{z-index:2}.intro-poster{z-index:2}
.intro-title{position:absolute;z-index:3;left:0;right:0;top:clamp(36px,11vh,120px);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none;font-family:'Poppins',var(--sans)}
.it-sub{font-weight:600;font-size:clamp(12px,1.6vw,17px);letter-spacing:.42em;color:#7FE3C4;opacity:0;padding-left:.42em}
.it-main{font-weight:800;font-size:clamp(38px,6.4vw,74px);letter-spacing:.16em;line-height:1.05;color:#fff;opacity:0;padding-left:.16em;text-shadow:0 6px 30px rgba(0,0,0,.35);background:linear-gradient(100deg,#fff 40%,#d9fff1 50%,#fff 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text}
.it-main::after{content:'';display:block;height:2px;margin:12px auto 0;width:0;background:linear-gradient(90deg,transparent,#5CC8A0,#9A8FD8,transparent)}
.intro.play .it-sub{animation:titleIn .7s cubic-bezier(.2,.7,.2,1) 3.4s forwards,fadeout .3s ease 4.05s forwards}
.intro.play .it-main{animation:titleMain .8s cubic-bezier(.2,.7,.2,1) 3.5s forwards,shine 1s ease 3.7s forwards,fadeout .3s ease 4.1s forwards}
.intro.play .it-main::after{animation:lineIn .6s ease 3.75s forwards}
@keyframes titleIn{from{opacity:0;letter-spacing:.9em;transform:translateY(-8px)}to{opacity:1;letter-spacing:.42em;transform:none}}
@keyframes titleMain{from{opacity:0;transform:translateY(14px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes shine{from{background-position:120% 0}to{background-position:-30% 0}}
@keyframes lineIn{to{width:60%}}
.intro-logo{top:58%;width:min(230px,50vw)}
.intro.play .intro-logo{animation:logoIn .55s cubic-bezier(.3,1.4,.5,1) 3.55s forwards,fadeout .35s ease 4.1s forwards}
.skip-intro{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.sound-intro{position:absolute;z-index:4;left:18px;bottom:calc(18px + env(safe-area-inset-bottom));font:600 14px var(--sans);color:#fff;background:rgba(92,200,160,.22);border:1.5px solid rgba(127,227,196,.6);padding:10px 16px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);animation:sndPulse 1.6s ease-in-out infinite}
.sound-intro[aria-pressed=true]{animation:none;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
@keyframes sndPulse{50%{box-shadow:0 0 0 8px rgba(92,200,160,0),0 0 0 0 rgba(92,200,160,.4)}0%{box-shadow:0 0 0 0 rgba(92,200,160,.45)}}
.intro.play .sound-intro{animation:sndPulse 1.6s ease-in-out infinite,fadeout .3s ease 3.95s forwards}
.intro.play .sound-intro[aria-pressed=true]{animation:fadeout .3s ease 3.95s forwards}
@media (max-width:560px){.intro-title{top:clamp(40px,12vh,110px)}.it-sub{letter-spacing:.3em;padding-left:.3em}.it-main{letter-spacing:.1em;padding-left:.1em}.intro-logo{top:60%}}