/* Motor 2 · 8-nov · Pop-up «guía gratis» que sale de la boca del concierge (abajo a la derecha). Marca SKRAT/KJV. */
.m2g{position:fixed;z-index:9990;right:var(--gx,24px);bottom:calc(150px + env(safe-area-inset-bottom));width:min(360px,calc(100vw - 32px));
  padding:22px 22px 18px;border-radius:22px 22px 6px 22px;border:1px solid rgba(212,175,55,.55);
  background:linear-gradient(160deg,rgba(10,38,28,.97),rgba(6,26,19,.98));color:#F7F1E6;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 6px rgba(212,175,55,.08);
  font:400 14.5px/1.5 var(--body,system-ui);transform-origin:calc(100% - 30px) calc(100% + 40px);
  opacity:0;transform:translateY(24px) scale(.2) rotate(6deg);pointer-events:none;
  transition:opacity .35s,transform .6s cubic-bezier(.34,1.56,.64,1)}
.m2g.on{opacity:1;transform:none;pointer-events:auto}
/* la «cola» del globo apunta a la boca del guía */
.m2g::after{content:"";position:absolute;right:26px;bottom:-12px;width:22px;height:22px;background:rgba(6,26,19,.98);
  border-right:1px solid rgba(212,175,55,.55);border-bottom:1px solid rgba(212,175,55,.55);transform:rotate(45deg)}
.m2g-x{position:absolute;top:10px;right:12px;width:32px;height:32px;border:0;border-radius:50%;background:rgba(247,241,230,.08);color:#F7F1E6;cursor:pointer;font-size:14px}
.m2g-x:hover,.m2g-x:focus-visible{background:rgba(212,175,55,.25)}
.m2g-k{margin:0 0 6px;font:700 10.5px/1 var(--body,system-ui);letter-spacing:.2em;text-transform:uppercase;color:#D4AF37}
.m2g-h{margin:0 0 6px;font:800 24px/1.05 var(--body,system-ui);letter-spacing:-.02em;color:#F3DD8A}
.m2g-p{margin:0 0 12px;color:rgba(247,241,230,.85)}
.m2g .m2g-f{display:grid!important;grid-template-columns:1fr!important;gap:8px;margin:0;padding:0;border:0;background:none}
.m2g .m2g-f>*{grid-column:1/-1!important}
.m2g-f label{display:grid;gap:3px;font-size:12px;color:rgba(247,241,230,.7)}
.m2g-f input:not([type=checkbox]){width:100%;box-sizing:border-box;padding:10px 12px;border-radius:12px;border:1px solid rgba(247,241,230,.18);
  background:rgba(247,241,230,.06);color:#F7F1E6;font:inherit;font-size:15px}
.m2g-f input:focus-visible{outline:2px solid #D4AF37;outline-offset:1px}
.m2g-c{grid-template-columns:auto 1fr!important;align-items:start;gap:8px!important;font-size:12px!important}
.m2g-c a{color:#D4AF37}
.m2g-b{margin-top:4px;padding:12px 16px;border:0;border-radius:99px;background:linear-gradient(90deg,#D4AF37,#F3DD8A);color:#0b1f17;
  font:800 14px/1 var(--body,system-ui);cursor:pointer;transition:transform .2s,box-shadow .2s}
.m2g-b:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(212,175,55,.35)}
.m2g-e{margin:0;color:#ffb4a8;font-size:13px}
.m2g-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* el guía «grita»: pequeño salto y onda dorada */
.x-guide.m2g-shout .x-guide-av{animation:m2gShout .9s cubic-bezier(.34,1.56,.64,1)}
@keyframes m2gShout{0%{transform:none}25%{transform:translateY(-10px) scale(1.08)}60%{transform:translateY(0) scale(.98)}100%{transform:none}}
@media (max-width:860px){.m2g{right:16px;left:16px;width:auto;bottom:calc(120px + env(safe-area-inset-bottom));max-height:70vh;overflow:auto}}
@media (prefers-reduced-motion:reduce){.m2g{transition:opacity .2s;transform:none}.x-guide.m2g-shout .x-guide-av{animation:none}}
/* 8-nov (dueño: «sutil e impactante, sin tapar el click to call ni quitar protagonismo»): primero solo esta burbuja */
.m2g-t{position:fixed;z-index:9989;right:24px;bottom:24px;display:inline-flex;align-items:center;gap:8px;padding:9px 12px 9px 14px;
  border-radius:99px 99px 4px 99px;border:1px solid rgba(212,175,55,.6);background:rgba(6,26,19,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#F7F1E6;font:700 13px/1 var(--body,system-ui);letter-spacing:.01em;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0;transform:translateY(10px) scale(.6);transform-origin:100% 100%;transition:opacity .35s,transform .55s cubic-bezier(.34,1.56,.64,1)}
.m2g-t.on{opacity:1;transform:none}
.m2g-t::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(243,221,138,.55) 50%,transparent 70%) -150% 0/250% 100% no-repeat;animation:m2gShine 1.6s .5s 2}
.m2g-t:hover,.m2g-t:focus-visible{border-color:#F3DD8A;outline:none}
.m2g-tx{font-style:normal;font-size:11px;opacity:.55;padding:2px 2px 2px 6px;border-left:1px solid rgba(247,241,230,.2)}
.m2g-tx:hover{opacity:1}
.m2g{bottom:96px}
@keyframes m2gShine{to{background-position:150% 0}}
@media (prefers-reduced-motion:reduce){.m2g-t{transition:opacity .2s;transform:none}.m2g-t::before{animation:none}}
/* acceso discreto junto a cada click to call y en el menú */
.m2g-chip{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0 12px;padding:6px 10px;border:1px dashed rgba(212,175,55,.45);border-radius:99px;
  background:transparent;color:rgba(247,241,230,.78);font:600 12px/1.2 var(--body,system-ui);cursor:pointer;vertical-align:middle;transition:color .2s,border-color .2s,background .2s}
.m2g-chip:hover,.m2g-chip:focus-visible{color:#F3DD8A;border-style:solid;border-color:#D4AF37;background:rgba(212,175,55,.08);outline:none}
.m2g-chip-menu{margin:18px 0 0;font-size:13px}
html[data-theme="light"] .m2g-chip{color:#3b4a40;border-color:rgba(160,120,20,.5)}
/* 8-nov · arreglo de Motor 2 (auditoría responsive): en About a 320 px el título del bloque .xh y sus fotos se salían del ancho */
.xh{overflow-x:clip}
@media (max-width:380px){.xh .xk,.xh h2{font-size:clamp(26px,9.2vw,40px)!important;overflow-wrap:anywhere}}
/* 8-nov · arreglo Motor 2: a ≤400 px las tarjetas de números (odómetros) no cabían en 2 columnas → 1 columna y cifra más chica */
@media (max-width:400px){.xa-nums{grid-template-columns:1fr!important}.xa-num{padding:20px 16px!important;min-width:0}.xa-num b{font-size:clamp(38px,13vw,56px)!important}}
