/* Umami Labs · los 5 efectos brutales
   1 llamada del conserje · 3 multas que caen · 6 del boceto a la web
   14 tu web en directo · 15 botón que explota */

/* ---- 1 · llamada entrante del conserje ---- */
.call{margin-top:26px;display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:center;background:var(--violet);color:#fff;border-radius:26px;padding:30px 32px;position:relative;overflow:hidden;isolation:isolate}
.call::before{content:'';position:absolute;width:420px;height:420px;right:-80px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,74,.45),transparent 65%);z-index:-1}
.call-txt{display:flex;flex-direction:column;gap:8px}
.call-txt .mono{color:#CFC7FF;font-size:11.5px}
.call-txt b{font-family:var(--f-head);font-weight:600;font-size:clamp(22px,2.6vw,30px);line-height:1.15}
.call-txt p{font-size:16.5px;color:#E5E0FF}
.callcard{background:#16151B;border-radius:28px;padding:22px 20px;box-shadow:0 30px 60px -24px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:16px;min-height:236px}
.callcard[data-state="ring"]{animation:buzz 2.6s infinite}
@keyframes buzz{0%,62%,100%{transform:none}64%,68%,72%,76%{transform:translateX(-3px) rotate(-1deg)}66%,70%,74%,78%{transform:translateX(3px) rotate(1deg)}}
.cc-top{display:flex;align-items:center;gap:14px}
.cc-top b{display:block;font-family:var(--f-head);font-weight:600;font-size:19px}
.cc-st{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:#B9B6C2}
.cc-av{position:relative;width:62px;height:62px;flex:none;border-radius:50%;background:#23222A;display:flex;align-items:center;justify-content:center;border:2px solid var(--red3)}
.cc-av .ring{position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--red3);opacity:0}
.callcard[data-state="ring"] .ring{animation:ringout 1.8s infinite}
.callcard[data-state="ring"] .r2{animation-delay:.6s}
.callcard[data-state="talk"] .ring{animation:ringout 1.2s infinite;border-color:#3DDC84}
@keyframes ringout{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
.cc-sub{min-height:66px;font-size:15.5px;line-height:1.45;color:#fff;margin:0}
.callcard[data-state="ring"] .cc-sub{display:none}
.cc-act{display:flex;align-items:center;gap:12px}
.slide{position:relative;flex:1;height:58px;border-radius:999px;background:#23222A;display:flex;align-items:center;overflow:hidden;touch-action:none}
.slide em{flex:1;text-align:center;font-style:normal;font-size:14px;font-weight:600;color:#8A8792;padding-left:50px;background:linear-gradient(90deg,#5A5862 0%,#fff 50%,#5A5862 100%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:slideTxt 2.2s linear infinite}
@keyframes slideTxt{to{background-position:-200% 0}}
.knob{position:absolute;left:5px;top:5px;width:48px;height:48px;border-radius:50%;border:0;background:#3DDC84;color:#0B3B1E;display:flex;align-items:center;justify-content:center;cursor:grab;z-index:1;transition:transform .3s cubic-bezier(.2,.9,.3,1.3)}
.knob.drag{transition:none;cursor:grabbing}
.hang{width:58px;height:58px;flex:none;border-radius:50%;border:0;background:#E5482A;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.hang svg{transform:rotate(135deg)}
.callcard[data-state="ring"] .hang{display:none}
.callcard[data-state="talk"] .slide{display:none}
.callcard[data-state="talk"] .cc-act{justify-content:center}
.cc-end{display:none;flex-wrap:wrap;gap:10px}
.callcard[data-state="end"] .cc-act{display:none}
.callcard[data-state="end"] .cc-end{display:flex}
.cc-end .btn{padding:12px 18px;font-size:14.5px}
.cc-end .btn-ghost{border-color:#5A5862;color:#fff}
.cc-sub .w{opacity:.25;transition:opacity .2s}.cc-sub .w.on{opacity:1}

/* ---- 3 · multas que caen ---- */
.fines{position:relative;margin-top:26px;height:380px;border-radius:var(--r);overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#2A2930,#121116);border:1px solid var(--dk3);touch-action:pan-y}
.fines canvas{position:absolute;inset:0;width:100%;height:100%}
.fines-ui{position:absolute;left:26px;top:24px;right:26px;display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;pointer-events:none;z-index:2}
.fines-ui > *{pointer-events:auto}
.fines-t{font-family:var(--f-head);font-weight:600;font-size:clamp(17px,2vw,22px);line-height:1.3;max-width:520px;color:#fff;background:rgba(18,17,22,.78);padding:10px 14px;border-radius:14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fines-src{background:rgba(18,17,22,.7);padding:6px 10px;border-radius:10px}
.fines-src{position:absolute;left:26px;right:26px;bottom:14px;font-size:12.5px;color:var(--dkmute);z-index:2;pointer-events:none}
.shield{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--f-head);font-weight:700;font-size:clamp(24px,4vw,44px);color:#fff;opacity:0;transform:scale(.6);transition:opacity .5s,transform .7s cubic-bezier(.2,.9,.3,1.4);pointer-events:none;z-index:1}
.shield span{width:1.6em;height:1.6em;border-radius:50%;background:#3DBE7A;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 14px rgba(61,190,122,.18),0 0 60px rgba(61,190,122,.6)}
.fines.safe .shield{opacity:1;transform:none}

/* ---- 6 · del boceto a la web en vivo ---- */
.build{position:relative;height:230vh;margin-bottom:40px}
.build-sticky{position:sticky;top:76px;height:calc(100vh - 96px);display:flex;flex-direction:column;justify-content:center;gap:16px}
.build-labels{display:flex;gap:10px;flex-wrap:wrap}
.build-labels span{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:7px 13px;border-radius:999px;border:1.5px solid var(--line);color:var(--mute);transition:all .4s}
.build-labels span.on{background:var(--ink);border-color:var(--ink);color:var(--red3)}
.build-note{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.mk{border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(22,21,27,.5);background:#fff;max-height:min(560px,calc(100vh - 210px));transition:background .8s}
.mk-bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#E9E5DE;transition:background .8s}
.mk-bar i{width:9px;height:9px;border-radius:50%;background:#C9C4BB}
.mk-bar span{margin-left:10px;font-family:var(--f-mono);font-size:11.5px;color:#8A8792}
.mk-body{position:relative;padding:22px 28px 26px;display:flex;flex-direction:column;gap:20px;transition:background .8s,color .8s}
.mk-nav{display:flex;align-items:center;gap:18px;font-size:14px}
.mk-nav b{font-family:var(--f-head);font-size:17px;margin-right:auto}
.mk-cta{padding:7px 14px;border-radius:999px}
.mk-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.mk-copy{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.mk-copy h4{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(24px,3.2vw,40px);line-height:1.05;margin:0;letter-spacing:-.01em}
.mk-copy p{font-size:15px}
.mk-btn{padding:11px 20px;border-radius:999px;font-weight:700;font-size:14px}
.mk-img{position:relative;height:clamp(140px,22vh,220px);border-radius:16px;overflow:hidden}
.mk-img i{position:absolute;border-radius:50%}
.mk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mk-cards div{border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.mk-cards b{font-size:15px}.mk-cards p{font-size:13px}
.mk-chat,.mk-toast{position:absolute;opacity:0;transform:translateY(12px) scale(.95);transition:all .5s cubic-bezier(.2,.9,.3,1.3)}
.mk-chat{right:22px;bottom:22px;background:#16151B;color:#fff;border-radius:18px 18px 4px 18px;padding:11px 15px;font-size:14px;box-shadow:0 14px 30px -10px rgba(0,0,0,.5)}
.mk-toast{left:50%;top:16px;margin-left:-150px;width:300px;text-align:center;background:#E7F6EE;color:#1F8A52;border:1px solid #BFE5CF;border-radius:999px;padding:8px 12px;font-family:var(--f-mono);font-size:12px;font-weight:600}
/* fase 1: boceto a lápiz */
.mk[data-stage="1"] .t{color:transparent!important;background:linear-gradient(#D5D0C7,#D5D0C7) left center/100% 55% no-repeat!important;border-radius:6px;border-color:transparent!important}
.mk[data-stage="1"] .mk-body{background:repeating-linear-gradient(0deg,transparent 0 27px,#EEF1F7 27px 28px),#FCFBF8}
.mk[data-stage="1"] .mk-img,.mk[data-stage="1"] .mk-cards div,.mk[data-stage="1"] .mk-btn,.mk[data-stage="1"] .mk-cta{background:transparent!important;outline:2px dashed #B3ADA3;outline-offset:-2px}
.mk[data-stage="1"] .mk-img i{opacity:0}
.mk .t,.mk-img,.mk-cards div,.mk-btn,.mk-cta,.mk-body{transition:all .8s ease}
/* fase 2 y 3: color de marca */
.mk[data-stage="2"] .mk-body,.mk[data-stage="3"] .mk-body{background:#FBF4EA;color:#2B1D14}
.mk[data-stage="2"] .mk-bar,.mk[data-stage="3"] .mk-bar{background:#2B1D14}
.mk[data-stage="2"] .mk-bar span,.mk[data-stage="3"] .mk-bar span{color:#E9D9C4}
.mk[data-stage="2"] .mk-img,.mk[data-stage="3"] .mk-img{background:linear-gradient(135deg,#F2A65A,#C2452D 60%,#5A1E14)}
.mk-img i:nth-child(1){width:46%;height:60%;left:10%;top:22%;background:radial-gradient(circle at 35% 35%,#FFF4E2,#F3D7B0 50%,#C98B4E);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.mk-img i:nth-child(2){width:18%;height:22%;right:14%;top:18%;background:#3E7D3A}
.mk-img i:nth-child(3){width:12%;height:15%;right:24%;bottom:16%;background:#E7C34B}
.mk[data-stage="2"] .mk-btn,.mk[data-stage="3"] .mk-btn,.mk[data-stage="2"] .mk-cta,.mk[data-stage="3"] .mk-cta{background:#C2452D;color:#fff}
.mk[data-stage="2"] .mk-cards div,.mk[data-stage="3"] .mk-cards div{background:#fff;box-shadow:0 8px 20px -14px rgba(43,29,20,.5)}
/* fase 3: en marcha */
.mk[data-stage="3"] .mk-btn{animation:mkpulse 1.6s infinite}
@keyframes mkpulse{0%{box-shadow:0 0 0 0 rgba(194,69,45,.5)}70%{box-shadow:0 0 0 14px rgba(194,69,45,0)}100%{box-shadow:0 0 0 0 rgba(194,69,45,0)}}
.mk[data-stage="3"] .mk-chat{opacity:1;transform:none;transition-delay:.3s}
.mk[data-stage="3"] .mk-toast{opacity:1;transform:none;transition-delay:1s}
@media (max-width:760px){
  .build{height:200vh}
  .mk-hero{grid-template-columns:1fr}.mk-img{height:110px}
  .mk-nav span:not(.mk-cta){display:none}
  .mk-cards{grid-template-columns:1fr 1fr 1fr;gap:8px}.mk-cards div{padding:10px}.mk-cards p{display:none}
  .mk-body{padding:16px;gap:14px}
  .mk-toast{width:250px;margin-left:-125px}
}

/* ---- 14 · tu web en directo ---- */
.mini{margin-top:26px;display:flex;flex-direction:column;gap:10px}
.mini .mono{color:var(--red3);font-size:11.5px}
.mini-br{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 26px 50px -24px rgba(0,0,0,.7);transform:perspective(900px) rotateY(-6deg) rotateX(3deg);transition:transform .5s}
.mini-br:hover{transform:none}
.mini-br .bar{height:26px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#E9E5DE}
.mini-br .bar i{width:8px;height:8px;border-radius:50%;background:#C9C4BB}
.mini-br .bar span{margin-left:8px;font-family:var(--f-mono);font-size:11px;color:#6A6872}
.mini-in{--a:#E5482A;--bg:#FBF4EA;--fg:#2B1D14;padding:18px 20px 22px;background:var(--bg);color:var(--fg);display:flex;flex-direction:column;gap:10px;align-items:flex-start;transition:background .5s,color .5s}
.mini-nav{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.mini-nav b{font-family:var(--f-head);font-size:14px}
.mini-cta{background:var(--a);color:#fff;border-radius:999px;padding:4px 11px;font-weight:700;font-size:12px;transition:background .5s}
.mini-h{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(24px,3vw,34px);line-height:1.05;margin:6px 0 0;word-break:break-word}
.mini-p{font-size:14.5px;opacity:.85}
.mini-btn{background:var(--a);color:#fff;border-radius:999px;padding:9px 16px;font-weight:700;font-size:13.5px;transition:background .5s}
.mini-h.pop{animation:miniPop .35s}
@keyframes miniPop{50%{transform:scale(1.04)}}
.mini-br[data-tipo="Restaurante"] .mini-in{--a:#C2452D;--bg:#FBF4EA;--fg:#2B1D14}
.mini-br[data-tipo="Bar"] .mini-in{--a:#E8A317;--bg:#1E2A22;--fg:#F6EFD9}
.mini-br[data-tipo="Hotel"] .mini-in{--a:#B8935A;--bg:#F3F1EC;--fg:#1D2A33}
.mini-br[data-tipo="Copas"] .mini-in{--a:#E0418C;--bg:#14101C;--fg:#F4E9FF}
.mini-br[data-tipo="Otro"] .mini-in{--a:#4A3AA8;--bg:#F4F2EE;--fg:#16151B}

/* ---- 15 · botón que explota ---- */
#boom{position:fixed;inset:0;pointer-events:none;z-index:180}
.f .btn.sent{background:#3DBE7A;color:#0B3B1E}
.f .btn.sending{animation:sendShake .4s}
@keyframes sendShake{25%{transform:scale(.94)}60%{transform:scale(1.08)}}
.f-ok{grid-column:1/-1;display:none;background:#E7F6EE;color:#1F6B42;border-radius:14px;padding:14px 16px;font-size:15px}
.f-ok.on{display:block;animation:pop .4s both}
.f-ok a{color:#1F6B42;font-weight:700}

@media (max-width:1020px){.call{grid-template-columns:1fr}}
@media (max-width:760px){.call{padding:22px}.fines{height:470px}.mk-toast{width:220px;margin-left:-110px;font-size:10.5px}.fines-ui{flex-direction:column}}
@media (prefers-reduced-motion:reduce){
  .callcard[data-state="ring"],.callcard .ring,.slide em,.mk-btn{animation:none!important}
  .build{height:auto}.build-sticky{position:static;height:auto}
}
/* móvil: el «Cumples» ocupa el sitio del título y deja libre a Quinto asomándose */
@media (max-width:760px){
  .fines.safe .fines-t{visibility:hidden}
  .fines .shield{align-items:flex-start;justify-content:flex-start;padding:30px 26px 0;font-size:24px;gap:10px}
}