/* ===========================================================================
   SK-DOG - mascota interactiva SK World
   ---------------------------------------------------------------------------
   AUTOCONTENIDO. No modifica ni depende de main.css.
   Todas las clases usan el prefijo .skd-  ->  cero colisiones.
   Paleta: toma las vars de marca si existen, con fallback propio.
   =========================================================================== */

.skd-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;          /* la capa NUNCA bloquea clics */
  z-index: 10000;                /* por encima de .nav (1000) y .cursor-glow (9999) */
  overflow: hidden;
}

/* -- PERRO ---------------------------------- */
/* Tres niveles de transform, con dueno unico cada uno:
   .skd-dog        -> JS  (posicion)
   .skd-dog__flip  -> JS  (direccion)
   .skd-dog__bob   -> CSS (animacion de estado)                             */

.skd-dog {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--skd-w, 96px);
  height: var(--skd-h, 68px);
  margin-left: calc(var(--skd-w, 96px) / -2);   /* origen = centro-pies */
  margin-top: calc(var(--skd-h, 68px) * -1);
  will-change: transform;
  pointer-events: auto;                          /* solo la caja del perro */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition: opacity .35s ease;
}
.skd-dog.skd--visible { opacity: 1; }

.skd-dog__flip,
.skd-dog__bob {
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
}

.skd-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* Piezas animables: transform-box para que el origen sea su propia caja */
.skd-leg, .skd-tail, .skd-ear, .skd-head {
  transform-box: fill-box;
}
.skd-leg  { transform-origin: 50% 0%; }    /* cadera / hombro */
.skd-tail { transform-origin: 100% 100%; } /* base de la cola */
.skd-ear  { transform-origin: 50% 0%; }
.skd-head { transform-origin: 20% 80%; }   /* cuello */

/* -- ESTADO: QUIETO ------------------------- */
.skd--idle .skd-dog__bob { animation: skd-breathe 2.8s ease-in-out infinite; }
.skd--idle .skd-tail     { animation: skd-tail-slow 2.4s ease-in-out infinite; }
.skd--idle .skd-ear      { animation: skd-ear-slow 3.6s ease-in-out infinite; }

@keyframes skd-breathe {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-.6px) scaleY(1.015); }
}
@keyframes skd-tail-slow { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
@keyframes skd-ear-slow  { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(4deg);  } }

/* -- ESTADO: ANDAR -------------------------- */
.skd--walk .skd-dog__bob { animation: skd-bob .46s ease-in-out infinite; }
.skd--walk .skd-leg--fl  { animation: skd-swing-a .46s ease-in-out infinite; }
.skd--walk .skd-leg--fr  { animation: skd-swing-b .46s ease-in-out infinite; }
.skd--walk .skd-leg--bl  { animation: skd-swing-b .46s ease-in-out infinite; }
.skd--walk .skd-leg--br  { animation: skd-swing-a .46s ease-in-out infinite; }
.skd--walk .skd-tail     { animation: skd-tail-mid .46s ease-in-out infinite; }
.skd--walk .skd-ear      { animation: skd-ear-flop .46s ease-in-out infinite; }

@keyframes skd-bob      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes skd-swing-a  { 0%,100% { transform: rotate(20deg); }  50% { transform: rotate(-20deg); } }
@keyframes skd-swing-b  { 0%,100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); } }
@keyframes skd-tail-mid { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(16deg); } }
@keyframes skd-ear-flop { 0%,100% { transform: rotate(-6deg); }  50% { transform: rotate(10deg); } }

/* -- ESTADO: CORRER ------------------------- */
.skd--run .skd-dog__bob { animation: skd-bob-run .26s ease-in-out infinite; }
.skd--run .skd-leg--fl  { animation: skd-swing-a-fast .26s ease-in-out infinite; }
.skd--run .skd-leg--fr  { animation: skd-swing-b-fast .26s ease-in-out infinite; }
.skd--run .skd-leg--bl  { animation: skd-swing-b-fast .26s ease-in-out infinite; }
.skd--run .skd-leg--br  { animation: skd-swing-a-fast .26s ease-in-out infinite; }
.skd--run .skd-tail     { animation: skd-tail-fast .26s ease-in-out infinite; }
.skd--run .skd-ear      { animation: skd-ear-fast .26s ease-in-out infinite; }

@keyframes skd-bob-run      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes skd-swing-a-fast { 0%,100% { transform: rotate(38deg); }  50% { transform: rotate(-34deg); } }
@keyframes skd-swing-b-fast { 0%,100% { transform: rotate(-34deg); } 50% { transform: rotate(38deg); } }
@keyframes skd-tail-fast    { 0%,100% { transform: rotate(-4deg); }  50% { transform: rotate(24deg); } }
@keyframes skd-ear-fast     { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(16deg); } }

/* -- ESTADO: SALTO / CAIDA ------------------ */
.skd--jump .skd-leg--fl, .skd--jump .skd-leg--fr { transform: rotate(-42deg); }
.skd--jump .skd-leg--bl, .skd--jump .skd-leg--br { transform: rotate(38deg); }
.skd--jump .skd-tail     { transform: rotate(30deg); }
.skd--jump .skd-ear      { transform: rotate(-18deg); }
.skd--jump .skd-dog__bob { transform: rotate(-6deg); }

.skd--fall .skd-leg--fl, .skd--fall .skd-leg--fr { transform: rotate(-18deg); }
.skd--fall .skd-leg--bl, .skd--fall .skd-leg--br { transform: rotate(16deg); }
.skd--fall .skd-tail     { transform: rotate(-16deg); }
.skd--fall .skd-ear      { transform: rotate(22deg); }
.skd--fall .skd-dog__bob { transform: rotate(5deg); }

/* -- ESTADO: ATERRIZAJE --------------------- */
.skd--land .skd-dog__bob { animation: skd-squash .2s ease-out 1; }
@keyframes skd-squash {
  0%   { transform: scaleY(.78) scaleX(1.12); }
  100% { transform: scaleY(1) scaleX(1); }
}

/* -- ESTADO: ALEGRIA (clic) ----------------- */
.skd--happy .skd-dog__bob { animation: skd-hop .34s ease-in-out infinite; }
.skd--happy .skd-tail     { animation: skd-wag .13s ease-in-out infinite; }
.skd--happy .skd-ear      { animation: skd-ear-flop .34s ease-in-out infinite; }
@keyframes skd-hop { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-7px); } }
@keyframes skd-wag { 0%,100% { transform: rotate(-22deg); } 50% { transform: rotate(34deg); } }

/* -- ESTADO: SENTADO ------------------------ */
.skd--sit .skd-dog__bob { transform: rotate(-8deg) translateY(2px); }
.skd--sit .skd-leg--bl, .skd--sit .skd-leg--br { transform: rotate(76deg); }
.skd--sit .skd-tail { animation: skd-tail-slow 1.8s ease-in-out infinite; }

/* -- ESTADO: DORMIR ------------------------- */
.skd--sleep .skd-dog__bob { animation: skd-sleep-breathe 3.6s ease-in-out infinite; }
.skd--sleep .skd-leg--fl, .skd--sleep .skd-leg--fr,
.skd--sleep .skd-leg--bl, .skd--sleep .skd-leg--br { transform: rotate(88deg) scaleY(.55); }
.skd--sleep .skd-head { transform: rotate(14deg) translateY(6px); }
.skd--sleep .skd-tail { transform: rotate(-26deg); }
.skd--sleep .skd-ear  { transform: rotate(12deg); }

@keyframes skd-sleep-breathe {
  0%, 100% { transform: translateY(9px) scaleY(.82) scaleX(1.04); }
  50%      { transform: translateY(9px) scaleY(.85) scaleX(1.05); }
}

/* Ojo abierto / cerrado */
.skd-eye-shut { display: none; }
.skd--sleep .skd-eye-open { display: none; }
.skd--sleep .skd-eye-shut { display: block; }

/* Zzz */
.skd-zzz {
  position: absolute;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold, #C49A4A);
  opacity: 0;
  pointer-events: none;
  animation: skd-zzz-rise 2.6s ease-out infinite;
}
@keyframes skd-zzz-rise {
  0%   { opacity: 0; transform: translate(0, 0) scale(.6) rotate(-6deg); }
  20%  { opacity: .85; }
  100% { opacity: 0; transform: translate(16px, -34px) scale(1.15) rotate(10deg); }
}

/* -- ESTADO: APROBANDO (tumbado sobre el tejido) -- */
/* Tumbado pero despierto: cabeza alta y cola en marcha. */
.skd--approve .skd-dog__bob { animation: skd-approve-settle .45s ease-out 1 forwards; }
.skd--approve .skd-leg--fl, .skd--approve .skd-leg--fr,
.skd--approve .skd-leg--bl, .skd--approve .skd-leg--br { transform: rotate(84deg) scaleY(.5); }
.skd--approve .skd-head { transform: rotate(-4deg) translateY(2px); }
.skd--approve .skd-tail { animation: skd-wag .2s ease-in-out infinite; }
.skd--approve .skd-ear  { animation: skd-ear-slow 2.6s ease-in-out infinite; }

@keyframes skd-approve-settle {
  0%   { transform: translateY(0) scaleY(1); }
  100% { transform: translateY(8px) scaleY(.84) scaleX(1.05); }
}

/* -- ESTADO: TREPAR (sube por el borde) ----- */
.skd--climb .skd-dog__bob { animation: skd-climb-bob .24s ease-in-out infinite; }
.skd--climb .skd-leg--fl { animation: skd-scramble-a .24s ease-in-out infinite; }
.skd--climb .skd-leg--fr { animation: skd-scramble-b .24s ease-in-out infinite; }
.skd--climb .skd-leg--bl { animation: skd-scramble-b .24s ease-in-out infinite; }
.skd--climb .skd-leg--br { animation: skd-scramble-a .24s ease-in-out infinite; }
.skd--climb .skd-ear  { animation: skd-ear-fast .24s ease-in-out infinite; }
.skd--climb .skd-tail { transform: rotate(-30deg); }

@keyframes skd-climb-bob {
  0%, 100% { transform: rotate(-16deg) translateY(0); }
  50%      { transform: rotate(-16deg) translateY(-3px); }
}
@keyframes skd-scramble-a { 0%,100% { transform: rotate(-52deg); } 50% { transform: rotate(-8deg); } }
@keyframes skd-scramble-b { 0%,100% { transform: rotate(-8deg); }  50% { transform: rotate(-52deg); } }

/* -- ESTADO: RAMPA (baja por una foto) ------ */
.skd--slide .skd-dog__bob { transform: rotate(17deg); }
.skd--slide .skd-leg--fl, .skd--slide .skd-leg--fr { transform: rotate(-34deg); }
.skd--slide .skd-leg--bl, .skd--slide .skd-leg--br { transform: rotate(26deg); }
.skd--slide .skd-ear  { transform: rotate(-30deg); }
.skd--slide .skd-tail { transform: rotate(38deg); }

/* -- ESTADO: RASCAR ------------------------- */
.skd--scratch .skd-dog__bob { animation: skd-scratch-lean .32s ease-in-out infinite; }
.skd--scratch .skd-leg--fr  { animation: skd-scratch-paw .17s ease-in-out infinite; }
.skd--scratch .skd-leg--fl  { animation: skd-scratch-paw .17s ease-in-out .085s infinite; }
.skd--scratch .skd-leg--bl, .skd--scratch .skd-leg--br { transform: rotate(14deg); }
.skd--scratch .skd-tail { animation: skd-tail-fast .32s ease-in-out infinite; }
.skd--scratch .skd-ear  { animation: skd-ear-fast .17s ease-in-out infinite; }

@keyframes skd-scratch-lean {
  0%, 100% { transform: rotate(-9deg) translateY(0); }
  50%      { transform: rotate(-9deg) translateY(-2px); }
}
@keyframes skd-scratch-paw {
  0%, 100% { transform: rotate(-62deg); }
  50%      { transform: rotate(-18deg); }
}

/* -- PELOTA DE LANA ------------------------- */
/* Ovillo, no pelota de tenis: es una empresa textil. */
.skd-ball {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  transition: opacity .3s ease;
}
.skd-ball.skd--on { opacity: 1; }
.skd-ball svg { width: 100%; height: 100%; display: block; }

/* -- HUESO ---------------------------------- */
.skd-bone {
  position: absolute;
  width: 42px;
  height: 42px;
  margin: -42px 0 0 -21px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(.4) rotate(-24deg);
  transition: opacity .3s ease, transform .55s cubic-bezier(.2, 1.6, .4, 1);
}
.skd-bone.skd--on {
  opacity: 1;
  transform: translateY(-6px) scale(1) rotate(-14deg);
}
.skd-bone svg { width: 100%; height: 100%; display: block; }

/* Destellos al encontrarlo */
.skd-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 -3px;
  pointer-events: none;
  background: var(--gold, #C49A4A);
  opacity: 0;
  animation: skd-spark-out 700ms ease-out forwards;
}
@keyframes skd-spark-out {
  0%   { opacity: 1; transform: translate(0, 0) scale(1) rotate(45deg); }
  100% { opacity: 0; transform: translate(var(--skd-sx, 0), var(--skd-sy, -26px)) scale(.2) rotate(160deg); }
}

/* -- BOTON DE SONIDO ------------------------ */
.skd-sound {
  position: absolute;
  top: -8px;
  left: -10px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border, #DDD5C8);
  border-radius: 50%;
  background: var(--cream, #F3EDE4);
  color: var(--ink, #0B0907);
  font: 600 10px/1 var(--font-body, 'Montserrat', sans-serif);
  cursor: pointer;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(11, 9, 7, .18);
}
.skd-dog:hover .skd-sound,
.skd-sound:focus-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.skd-sound:focus-visible { outline: 2px solid var(--gold, #C49A4A); outline-offset: 2px; }
.skd-sound.skd--on { background: var(--gold, #C49A4A); border-color: var(--gold, #C49A4A); color: #fff; }

/* -- PRODUCTO DESTACADO --------------------- */
/* Se aplica al elemento REAL de la pagina. Solo outline y sombra: ninguna
   propiedad que altere el layout, asi no mueve nada de la maquetacion.     */
.skd-spotlight {
  outline: 2px solid var(--gold, #C49A4A) !important;
  outline-offset: 5px;
  box-shadow: 0 16px 44px rgba(196, 154, 74, .38);
  transition: outline-color .45s ease, box-shadow .45s ease;
}

/* Etiqueta que el perro deja sobre el producto */
.skd-stamp {
  position: absolute;
  pointer-events: none;
  transform-origin: 50% 120%;
  padding: 7px 13px 6px;
  background: var(--cream, #F3EDE4);
  border: 1px solid var(--gold, #C49A4A);
  color: var(--ink, #0B0907);
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(11, 9, 7, .22);
  opacity: 0;
  transform: translate(-50%, 6px) scale(.6) rotate(-8deg);
  transition: opacity .3s ease, transform .45s cubic-bezier(.2, 1.5, .4, 1);
}
.skd-stamp.skd--on {
  opacity: 1;
  transform: translate(-50%, 0) scale(1) rotate(-3deg);
}
.skd-stamp::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--cream, #F3EDE4);
  border-right: 1px solid var(--gold, #C49A4A);
  border-bottom: 1px solid var(--gold, #C49A4A);
  transform: rotate(45deg);
}

/* -- HUELLAS -------------------------------- */
.skd-paw {
  position: absolute;
  width: 13px;
  height: 13px;
  margin: -6px 0 0 -6px;
  pointer-events: none;
  opacity: 0;
  color: var(--gold-dark, #8E6E2E);
  animation: skd-paw-life 3200ms ease-out forwards;
}
.skd-paw svg { width: 100%; height: 100%; display: block; }
@keyframes skd-paw-life {
  0%   { opacity: 0;   transform: scale(.5) rotate(var(--skd-paw-rot, 0deg)); }
  12%  { opacity: .42; transform: scale(1) rotate(var(--skd-paw-rot, 0deg)); }
  70%  { opacity: .30; }
  100% { opacity: 0;   transform: scale(1) rotate(var(--skd-paw-rot, 0deg)); }
}

/* -- BANDERA (momento WOW) ------------------ */
.skd-flag {
  position: absolute;
  width: 230px;
  height: 150px;
  margin: -150px 0 0 -18px;   /* origen = base del mastil */
  pointer-events: none;
  transform-origin: 12% 100%;
  opacity: 0;
  transform: scale(.2) rotate(-14deg);
  transition: opacity .3s ease, transform .5s cubic-bezier(.2,1.4,.4,1);
}
.skd-flag.skd--planted { opacity: 1; transform: scale(1) rotate(0deg); }
.skd-flag svg { width: 100%; height: 100%; display: block; overflow: visible; }
.skd-flag-cloth {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: skd-wave 2.4s ease-in-out infinite;
}
@keyframes skd-wave {
  0%, 100% { transform: skewY(-1.2deg) scaleY(1); }
  50%      { transform: skewY(1.6deg) scaleY(.985); }
}

/* -- BOTON CERRAR --------------------------- */
.skd-dismiss {
  position: absolute;
  top: -8px;
  right: -10px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border, #DDD5C8);
  border-radius: 50%;
  background: var(--cream, #F3EDE4);
  color: var(--ink, #0B0907);
  font: 600 13px/1 var(--font-body, 'Montserrat', sans-serif);
  cursor: pointer;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(11,9,7,.18);
}
.skd-dog:hover .skd-dismiss,
.skd-dismiss:focus-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.skd-dismiss:focus-visible { outline: 2px solid var(--gold, #C49A4A); outline-offset: 2px; }

/* -- SELECTOR DE IMANES (?dog=pick) --------- */
/* Herramienta de desarrollo. Nunca aparece en produccion. */
.skd-pick {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 100001;
  width: min(340px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  background: #FFFDF9;
  border: 1px solid var(--border, #DDD5C8);
  box-shadow: 0 14px 44px rgba(11, 9, 7, .26);
  padding: 14px 15px 15px;
  font: 13px/1.5 var(--font-body, 'Montserrat', sans-serif);
  color: var(--ink, #0B0907);
}
.skd-pick__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-dark, #8E6E2E);
  margin-bottom: 12px;
}
.skd-pick__head button {
  border: 0; background: none; cursor: pointer;
  font-size: 17px; line-height: 1; color: var(--muted, #7C7369); padding: 0 2px;
}
.skd-pick__row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.skd-pick__row span { font-size: 11.5px; color: var(--muted, #7C7369); }
.skd-pick__row select {
  flex: 1; font: inherit; font-size: 12px; padding: 6px 8px;
  border: 1px solid var(--border, #DDD5C8); background: #fff; color: inherit;
}
.skd-pick__hint, .skd-pick__empty {
  margin: 0 0 11px; font-size: 11.5px; color: var(--muted, #7C7369);
}
.skd-pick__empty { font-style: italic; }
.skd-pick__list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.skd-pick__list li {
  display: flex; align-items: center; gap: 8px;
  background: var(--cream, #F3EDE4);
  border: 1px solid var(--border, #DDD5C8);
  padding: 7px 8px;
}
.skd-pick__list code {
  flex: 1; min-width: 0; font-size: 11px; word-break: break-all;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.skd-pick__kind {
  font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: var(--gold, #C49A4A); color: #fff; padding: 3px 6px; white-space: nowrap;
}
.skd-pick__list button {
  border: 0; background: none; cursor: pointer; color: var(--muted, #7C7369);
  font-size: 15px; line-height: 1; padding: 0 2px;
}
.skd-pick__btns { display: flex; gap: 7px; }
.skd-pick__btns button {
  flex: 1; font: 600 10.5px/1 var(--font-body, 'Montserrat', sans-serif);
  letter-spacing: .1em; text-transform: uppercase; padding: 9px 10px;
  border: 1px solid var(--border, #DDD5C8); background: var(--cream, #F3EDE4);
  color: inherit; cursor: pointer;
}
.skd-pick__btns button:hover { background: var(--gold-pale, #E5CFA0); border-color: var(--gold, #C49A4A); }
.skd-pick textarea {
  display: none; width: 100%; height: 116px; margin-top: 10px;
  font: 11px/1.5 ui-monospace, Menlo, Consolas, monospace;
  border: 1px solid var(--border, #DDD5C8); padding: 8px; resize: vertical;
  background: var(--cream, #F3EDE4); color: inherit;
}

/* -- ACCESIBILIDAD / RENDIMIENTO ------------ */
/* Si el usuario pide menos movimiento el JS ni arranca. Esto es el cinturon
   de seguridad por si la capa ya estuviera montada.                        */
@media (prefers-reduced-motion: reduce) {
  .skd-layer { display: none !important; }
}