/* Mascota articulada del grupo (contrato de 02_ESTANDAR_MASCOTAS.md §4). El movimiento lo hace mascota.js cuadro por cuadro. */
.masc{position:relative;width:100%;aspect-ratio:var(--masc-ar);pointer-events:none;z-index:2}
.masc.is-live{position:absolute;left:0;top:0;z-index:1}
.masc-btn{all:unset;position:absolute;inset:6% 12% 4%;cursor:pointer;pointer-events:auto;border-radius:40%}
.masc .masc-btn{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;min-height:0!important;transform:none!important}
.masc-btn:focus-visible{outline:3px solid var(--masc-acento);outline-offset:6px}
.masc-rig{position:absolute;inset:0}
.masc::before{content:"";position:absolute;left:-8%;right:-8%;top:8%;bottom:4%;background:radial-gradient(closest-side,var(--masc-sombra),transparent 75%);pointer-events:none}
.masc-rig svg,.masc-rig img{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.masc-piso{position:absolute;left:22%;right:22%;bottom:-1.5%;height:4%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);transform-origin:50% 50%}
/* Bocadillo */
.masc-dice{position:absolute;left:-4%;top:9%;transform:translateX(-100%);background:#fff;color:#0e0f13;font:600 15px/1.35 Montserrat,Arial,sans-serif;padding:12px 16px;border-radius:16px 16px 4px 16px;box-shadow:0 14px 30px -10px rgba(0,0,0,.6);white-space:nowrap;opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}
.masc-dice b{color:var(--masc-acento-txt)}
.masc.habla .masc-dice{opacity:1;transform:translateX(-100%) translateY(-6px)}
@media (max-width:860px){.masc-dice{left:auto;right:42%;top:-6%;transform:none;font-size:13px;white-space:normal;width:max-content;max-width:62vw;border-radius:16px 16px 4px 16px}.masc.habla .masc-dice{transform:translateY(-6px)}}

/* ===== Intro como la de Loqui: la mascota saluda en grande y al bajar se acomoda a la derecha ===== */
.m-intro{position:relative;height:250vh;background:var(--masc-fondo);padding:0!important;margin:0!important}
.m-stage{position:sticky;top:var(--masc-hh,76px);height:calc(100vh - var(--masc-hh,76px));height:calc(100svh - var(--masc-hh,76px));overflow:hidden}
.m-intro .m-stage>.hero{position:absolute!important;inset:0;display:flex;align-items:center;padding:0!important}
.m-stage>.hero>.wrap{width:100%}
.m-hola{position:absolute;left:0;right:0;top:9%;text-align:center;z-index:3;color:#fff;padding-inline:16px}
.m-hola .g{color:#fff!important;margin:0;font:900 clamp(34px,min(6vw,9.5vh),88px)/1 Montserrat,"Arial Black",Arial,sans-serif;letter-spacing:-.03em}
.m-hola .g em{font-style:normal;color:var(--masc-acento-txt)}
.m-hola p:not(.g){margin:14px 0 0;font:500 clamp(15px,1.6vw,19px)/1.4 Montserrat,Arial,sans-serif;color:#b3b8c8}
.m-hola p b{color:#fff}
.m-cue{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font:600 12px Montserrat,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9ea3b5;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:4;background:rgba(11,12,16,.72);padding:10px 14px;border-radius:14px;backdrop-filter:blur(6px)}
.m-cue i{width:22px;height:34px;border:2px solid #9ea3b5;border-radius:12px;position:relative}
.m-cue i::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--masc-acento-txt);animation:m-cue 1.6s infinite}
@keyframes m-cue{60%{transform:translateY(10px);opacity:0}}
/* Sin intro (celular, pantallas bajas o «reducir movimiento»): la sección es el hero normal */
.m-intro.estatico{height:auto}
.m-intro.estatico .m-stage{position:relative;top:0;height:auto;overflow:visible}
.m-intro.estatico .m-stage>.hero{position:relative!important;display:block;padding:70px 0 80px!important}
.m-intro.estatico .m-hola,.m-intro.estatico .m-cue{display:none}