/* =========================================================================
   LA GALLETA DE CONTACTO

   La galleta del logo, recortada y con fondo transparente, haciendo de
   boton de WhatsApp. Tiene brazos, piernas y cara, dibujados con CSS —
   ningun trazo es una imagen, todo son formas hechas aqui.

   Lo que hace, sin que nadie la toque:
     - Respira: sube y baja despacio, siempre.
     - Gira muy lento sobre si misma, como si flotara.
     - Cada pocos segundos PEGA UN SALTO: se encoge, sube, se estira en el
       aire, cae, se aplasta al aterrizar y rebota. Las piernas se doblan
       en el impulso y los brazos se levantan.

   Y cuando te acercas:
     - Se para de girar y te mira.
     - Se crece, se echa atras y TE MUERDE: la boca se abre de par en par
       y se cierra de golpe. Una y otra vez mientras sigas ahi.
     - Saluda con un brazo.
     - Saca su mensaje.

   Al pulsarla se hunde.

   El cuerpo va relleno de rosa a proposito: encima de una foto de
   producto, la galleta a linea sola no se leia.

   Todo en CSS. Sin JavaScript: no hay nada que se pueda quedar colgado.
   ========================================================================= */

.galleta-flota {
    position: fixed; right: 26px; bottom: 26px; z-index: 880;
    width: 76px; height: 76px;
    display: block; text-decoration: none;
    background: none; border: none; padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* --- Las capas del movimiento -----------------------------------------
   Cada animacion en su capa. Si se juntaran todas en un solo transform se
   pisarian entre ellas y no podria girar mientras salta.
   --------------------------------------------------------------------- */
.gf-salto   { width: 100%; height: 100%; position: relative;
              animation: gf-salto 7s cubic-bezier(.5, 0, .5, 1) infinite; }
.gf-respira { width: 100%; height: 100%; position: relative;
              animation: gf-respira 3.4s ease-in-out infinite; }
.gf-gira    { width: 100%; height: 100%; position: relative;
              animation: gf-gira 26s linear infinite;
              filter: drop-shadow(0 9px 12px rgba(14, 12, 11, .38));
              transition: filter .3s ease; }
.gf-gira img { width: 100%; height: 100%; display: block; }

@keyframes gf-salto {
    0%, 60%   { transform: translateY(0) scale(1, 1); }
    64%       { transform: translateY(2px) scale(1.1, .9); }   /* se agacha */
    70%       { transform: translateY(-38px) scale(.94, 1.1); } /* se estira */
    77%       { transform: translateY(-44px) scale(1, 1); }
    85%       { transform: translateY(0) scale(1, 1); }
    88%       { transform: translateY(2px) scale(1.16, .84); }  /* el aplaste */
    92%       { transform: translateY(-10px) scale(.97, 1.03); }
    96%, 100% { transform: translateY(0) scale(1, 1); }
}
@keyframes gf-respira {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes gf-gira {
    from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}

/* --- Los brazos -------------------------------------------------------
   Dos palitos con una manita redonda al final. Cuelgan de los lados y se
   levantan cuando salta.
   --------------------------------------------------------------------- */
.gf-brazo {
    position: absolute; top: 42%; width: 17px; height: 4px;
    background: var(--negro, #0E0C0B); border-radius: 3px;
    z-index: 2;
}
.gf-brazo::after {                       /* la mano */
    content: ''; position: absolute; top: -3px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--negro, #0E0C0B);
}
.gf-brazo--izq {
    left: -13px; transform-origin: right center;
    transform: rotate(28deg);
    animation: gf-brazo-izq 7s ease-in-out infinite;
}
.gf-brazo--izq::after { left: -5px; }
.gf-brazo--der {
    right: -13px; transform-origin: left center;
    transform: rotate(-28deg);
    animation: gf-brazo-der 7s ease-in-out infinite;
}
.gf-brazo--der::after { right: -5px; }

@keyframes gf-brazo-izq {
    0%, 60%, 96%, 100% { transform: rotate(28deg); }
    64%                { transform: rotate(52deg); }   /* impulso hacia abajo */
    72%, 84%           { transform: rotate(-46deg); }  /* arriba, en el aire */
    90%                { transform: rotate(40deg); }
}
@keyframes gf-brazo-der {
    0%, 60%, 96%, 100% { transform: rotate(-28deg); }
    64%                { transform: rotate(-52deg); }
    72%, 84%           { transform: rotate(46deg); }
    90%                { transform: rotate(-40deg); }
}

/* --- Las piernas ------------------------------------------------------ */
.gf-pierna {
    position: absolute; bottom: -12px; width: 4px; height: 14px;
    background: var(--negro, #0E0C0B); border-radius: 3px;
    z-index: 1;
}
.gf-pierna::after {                      /* el pie */
    content: ''; position: absolute; bottom: -3px; left: -4px;
    width: 12px; height: 6px; border-radius: 6px 6px 3px 3px;
    background: var(--negro, #0E0C0B);
}
.gf-pierna--izq { left: 27%;  transform-origin: top center;
                  animation: gf-pierna-izq 7s ease-in-out infinite; }
.gf-pierna--der { right: 27%; transform-origin: top center;
                  animation: gf-pierna-der 7s ease-in-out infinite; }

@keyframes gf-pierna-izq {
    0%, 58%, 94%, 100% { transform: rotate(0deg) scaleY(1); }
    64%                { transform: rotate(0deg) scaleY(.55); }  /* se dobla */
    72%                { transform: rotate(-22deg) scaleY(1.15); }
    84%                { transform: rotate(-8deg) scaleY(1); }
    89%                { transform: rotate(0deg) scaleY(.7); }   /* al caer */
}
@keyframes gf-pierna-der {
    0%, 58%, 94%, 100% { transform: rotate(0deg) scaleY(1); }
    64%                { transform: rotate(0deg) scaleY(.55); }
    72%                { transform: rotate(22deg) scaleY(1.15); }
    84%                { transform: rotate(8deg) scaleY(1); }
    89%                { transform: rotate(0deg) scaleY(.7); }
}

/* --- La cara ----------------------------------------------------------
   Va DENTRO de la capa que gira, para que la cara gire con ella y no se
   quede fija mientras el cuerpo da vueltas.
   --------------------------------------------------------------------- */
.gf-cara {
    position: absolute; inset: 0; z-index: 3;
    pointer-events: none;
}
.gf-ojo {
    position: absolute; top: 34%;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--negro, #0E0C0B);
    transition: height .25s ease, border-radius .25s ease, top .25s ease;
}
.gf-ojo--izq { left: 32%; }
.gf-ojo--der { right: 34%; }

.gf-boca {
    position: absolute; top: 52%; left: 50%;
    width: 16px; height: 8px; margin-left: -8px;
    border-bottom: 3px solid var(--negro, #0E0C0B);
    border-radius: 0 0 16px 16px;
    opacity: 0;
    transition: opacity .25s ease, width .25s ease, height .25s ease;
}

/* --- El mensaje -------------------------------------------------------- */
.gf-mensaje {
    position: absolute; right: 92px; top: 50%;
    transform: translateY(-50%) translateX(14px) scale(.86);
    background: var(--negro, #0E0C0B);
    color: var(--rosa, #FFC5C7);
    padding: 10px 17px; border-radius: 999px;
    font-size: .85rem; font-weight: 700; white-space: nowrap;
    box-shadow: 0 10px 26px rgba(14, 12, 11, .34);
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease, transform .28s cubic-bezier(.34, 1.4, .64, 1);
}
.gf-mensaje::after {
    content: ''; position: absolute; right: -6px; top: 50%;
    width: 12px; height: 12px; margin-top: -6px;
    background: inherit; transform: rotate(45deg); border-radius: 2px;
}

/* --- AL ACERCARSE: se para, sonrie y saluda --------------------------- */
.galleta-flota:hover .gf-gira,
.galleta-flota:focus-visible .gf-gira {
    animation-play-state: paused;
    filter: drop-shadow(0 18px 28px rgba(14, 12, 11, .48));
}
.galleta-flota:hover .gf-respira,
.galleta-flota:focus-visible .gf-respira { animation-duration: 1.1s; }


/* La sonrisa */
.galleta-flota:hover .gf-boca,
.galleta-flota:focus-visible .gf-boca {
    opacity: 1; width: 22px; height: 11px; margin-left: -11px;
}
/* Los ojos se achinan un poco al sonreir, como los de verdad */
.galleta-flota:hover .gf-ojo,
.galleta-flota:focus-visible .gf-ojo {
    height: 6px; border-radius: 50% 50% 40% 40%; top: 33%;
}

/* Saluda con el brazo derecho */
.galleta-flota:hover .gf-brazo--der,
.galleta-flota:focus-visible .gf-brazo--der {
    animation: gf-saluda .45s ease-in-out infinite;
}
@keyframes gf-saluda {
    0%, 100% { transform: rotate(-56deg); }
    50%      { transform: rotate(-96deg); }
}
/* Las piernas se quedan quietas: esta parada saludando */
.galleta-flota:hover .gf-pierna,
.galleta-flota:focus-visible .gf-pierna { animation-play-state: paused; }

.galleta-flota:hover .gf-mensaje,
.galleta-flota:focus-visible .gf-mensaje {
    opacity: 1; transform: translateY(-50%) translateX(0) scale(1);
}

/* --- EL MORDISCO ------------------------------------------------------
   Al acercar el raton, la galleta se crece de golpe y da un mordisco al
   aire: se echa atras, se lanza hacia delante y cierra la boca. Y en ese
   momento la boca deja de sonreir y se abre.
   --------------------------------------------------------------------- */
.galleta-flota:hover .gf-salto,
.galleta-flota:focus-visible .gf-salto {
    animation: gf-muerde 1.4s cubic-bezier(.34, 1.4, .64, 1) infinite;
}
@keyframes gf-muerde {
    0%, 100% { transform: translateY(-4px) scale(1.14) rotate(0deg); }
    22%      { transform: translateY(-8px) scale(1.10) rotate(-9deg); }  /* se echa atras */
    40%      { transform: translateY(-2px) scale(1.32) rotate(6deg); }   /* se lanza */
    52%      { transform: translateY(-3px) scale(1.26) rotate(3deg); }
    70%      { transform: translateY(-5px) scale(1.16) rotate(0deg); }
}

/* La boca: sonrie, y al morder se abre de par en par. */
.galleta-flota:hover .gf-boca,
.galleta-flota:focus-visible .gf-boca {
    opacity: 1;
    animation: gf-boca-muerde 1.4s ease-in-out infinite;
}
@keyframes gf-boca-muerde {
    0%, 100% { width: 22px; height: 11px; margin-left: -11px;
               border-bottom-width: 3px; border-radius: 0 0 16px 16px;
               background: transparent; }
    /* Abierta: deja de ser una linea y pasa a ser un hueco negro */
    38%      { width: 20px; height: 20px; margin-left: -10px;
               border-bottom-width: 0; border-radius: 50%;
               background: var(--negro, #0E0C0B); }
    50%      { width: 8px; height: 5px; margin-left: -4px;
               border-bottom-width: 0; border-radius: 40%;
               background: var(--negro, #0E0C0B); }   /* cierra: el mordisco */
}

/* --- Al pulsar: se hunde ---------------------------------------------- */
.galleta-flota:active .gf-salto {
    animation: none;
    transform: translateY(5px) scale(.9);
    transition: transform .1s ease;
}

.galleta-flota:focus-visible {
    outline: 3px solid var(--negro, #0E0C0B);
    outline-offset: 8px; border-radius: 50%;
}

/* --- Movil ------------------------------------------------------------ */
@media (max-width: 640px) {
    .galleta-flota { width: 64px; height: 64px; right: 16px; bottom: 18px; }
    .gf-mensaje { display: none; }   /* sin raton no hay hover que valga */
}

/* --- Para quien no quiera movimiento ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .gf-salto, .gf-respira, .gf-gira,
    .gf-brazo, .gf-pierna { animation: none; }
}

/* =========================================================================
   LA GALLETA REACCIONA AL SCROLL

   Bajando  -> se pone a dar saltos, como corriendo hacia abajo.
   Subiendo -> se cae de culo, se queda un momento en el suelo y se
               levanta sola.

   La clase la pone y la quita el JavaScript (assets/js/galleta.js), que
   solo mira hacia donde se mueve la pagina. Toda la animacion vive aqui.
   ========================================================================= */

/* --- BAJANDO: a saltos --- */
.galleta-flota.gf-baja .gf-salto {
    animation: gf-corre .42s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes gf-corre {
    0%, 100% { transform: translateY(0) scale(1.06, .94); }
    45%      { transform: translateY(-16px) scale(.94, 1.08); }
    70%      { transform: translateY(-2px) scale(1.04, .96); }
}
/* Las piernas corren de verdad */
.galleta-flota.gf-baja .gf-pierna--izq { animation: gf-corre-izq .42s linear infinite; }
.galleta-flota.gf-baja .gf-pierna--der { animation: gf-corre-der .42s linear infinite; }
@keyframes gf-corre-izq {
    0%, 100% { transform: rotate(-30deg); }
    50%      { transform: rotate(30deg); }
}
@keyframes gf-corre-der {
    0%, 100% { transform: rotate(30deg); }
    50%      { transform: rotate(-30deg); }
}
/* Y los brazos bombean */
.galleta-flota.gf-baja .gf-brazo--izq { animation: gf-bombea-izq .42s linear infinite; }
.galleta-flota.gf-baja .gf-brazo--der { animation: gf-bombea-der .42s linear infinite; }
@keyframes gf-bombea-izq {
    0%, 100% { transform: rotate(-40deg); }
    50%      { transform: rotate(60deg); }
}
@keyframes gf-bombea-der {
    0%, 100% { transform: rotate(60deg); }
    50%      { transform: rotate(-40deg); }
}

/* --- SUBIENDO: se cae de culo y se levanta ---------------------------
   Un solo ciclo, no infinito: se cae, se queda tirada un momento, se
   incorpora y sigue como si nada. La clase se quita sola al terminar.
   --------------------------------------------------------------------- */
.galleta-flota.gf-cae .gf-salto {
    animation: gf-culo 1.5s cubic-bezier(.34, 1.3, .64, 1) 1 forwards;
}
@keyframes gf-culo {
    0%   { transform: translateY(0) rotate(0deg); }
    14%  { transform: translateY(-6px) rotate(-18deg); }   /* pierde el equilibrio */
    30%  { transform: translateY(14px) rotate(-72deg); }   /* al suelo */
    36%  { transform: translateY(16px) rotate(-78deg) scale(1.1, .9); } /* el golpe */
    62%  { transform: translateY(16px) rotate(-76deg); }   /* tirada, aturdida */
    80%  { transform: translateY(4px) rotate(-24deg); }    /* se incorpora */
    92%  { transform: translateY(-4px) rotate(8deg); }
    100% { transform: translateY(0) rotate(0deg); }
}
/* Las piernas patalean en el suelo */
.galleta-flota.gf-cae .gf-pierna--izq,
.galleta-flota.gf-cae .gf-pierna--der {
    animation: gf-patalea .22s ease-in-out 6 .3s;
}
@keyframes gf-patalea {
    0%, 100% { transform: rotate(-26deg) scaleY(.85); }
    50%      { transform: rotate(26deg) scaleY(1.05); }
}
/* Los brazos se agitan buscando apoyo */
.galleta-flota.gf-cae .gf-brazo--izq { animation: gf-agita-izq .18s ease-in-out 8 .28s; }
.galleta-flota.gf-cae .gf-brazo--der { animation: gf-agita-der .18s ease-in-out 8 .28s; }
@keyframes gf-agita-izq {
    0%, 100% { transform: rotate(-70deg); } 50% { transform: rotate(-20deg); }
}
@keyframes gf-agita-der {
    0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(70deg); }
}
/* Y pone cara de susto: los ojos se abren de par en par */
.galleta-flota.gf-cae .gf-ojo {
    height: 8px; width: 8px; animation: gf-susto 1.5s ease-out 1;
}
@keyframes gf-susto {
    0%, 55% { transform: scale(1.5); }
    100%    { transform: scale(1); }
}

/* Mientras salta o se cae, no gira: seria mareante. */
.galleta-flota.gf-baja .gf-gira,
.galleta-flota.gf-cae .gf-gira { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .galleta-flota.gf-baja .gf-salto,
    .galleta-flota.gf-cae .gf-salto,
    .galleta-flota.gf-baja .gf-pierna,
    .galleta-flota.gf-cae .gf-pierna,
    .galleta-flota.gf-baja .gf-brazo,
    .galleta-flota.gf-cae .gf-brazo { animation: none; }
}