/* ===================================================================
   MASCOTA ABS
   Part positions below are extracted exactly (pixel-for-pixel) from
   the owner-provided reference composite "completemascot.svg", a
   500x500 canvas with each part placed by hand. All % values are
   x/500, y/500, w/500, h/500 for that canvas - do not re-eyeball these.

   .mascot-figure holds the shared body/eyes/mouth/resting-arm layout
   used on every page. Page-specific wrappers (.mascot on the homepage,
   .mascot-point on contacto.php) add their own sizing, entrance and
   the swappable "acting" hand (waving vs. pointing).
   =================================================================== */

.mascot-figure{
    /* cuerpo: x=120 y=9 w=329 h=482 (canvas 500x500) */
    --body-top: 1.8%;
    --body-left: 24%;
    --body-w: 65.8%;
    --body-h: 96.4%;

    /* OJOS: x=205 y=128 w=138 h=63 */
    --eye-top: 25.6%;
    --eye-left: 41%;
    --eye-w: 27.6%;
    --eye-h: 12.6%;

    /* BOCA: x=236 y=175 w=50 h=35 */
    --mouth-top: 35%;
    --mouth-left: 47.2%;
    --mouth-w: 10%;
    --mouth-h: 7%;

    /* MANO_IZQ (static, resting arm): x=387 y=250 w=102 h=196 */
    --hand2-top: 50%;
    --hand2-left: 77.4%;
    --hand2-w: 20.4%;
    --hand2-h: 39.2%;

    position: relative;
}

.mascot-part{
    position: absolute;
    display: block;
    max-width: none;
}

.mascot-body{
    top: var(--body-top);
    left: var(--body-left);
    width: var(--body-w);
    height: var(--body-h);
}

.mascot-hand-izq{
    top: var(--hand2-top);
    left: var(--hand2-left);
    width: var(--hand2-w);
    height: var(--hand2-h);
    z-index: 1;
}

.mascot-eyes{
    top: var(--eye-top);
    left: var(--eye-left);
    width: var(--eye-w);
    height: var(--eye-h);
    z-index: 2;
    transform-origin: center center;
}

.mascot-mouth{
    top: var(--mouth-top);
    left: var(--mouth-left);
    width: var(--mouth-w);
    height: var(--mouth-h);
    z-index: 2;
    transform-origin: center center;
}

/* ===================================================================
   Homepage intro: full-screen overlay, waves hello, then exits
   =================================================================== */

.mascot-overlay{
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5000;
    align-items: center;
    justify-content: center;
    background: rgba(245, 247, 250, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    animation: mascotBackdropIn 0.35s ease-out forwards;
    cursor: pointer;
}

.mascot-overlay.is-exiting{
    animation: mascotBackdropOut 0.6s ease-in forwards;
}

@keyframes mascotBackdropIn{
    from{ opacity: 0; }
    to{ opacity: 1; }
}

@keyframes mascotBackdropOut{
    from{ opacity: 1; }
    to{ opacity: 0; }
}

.mascot{
    --mascot-w: clamp(230px, 42vw, 380px);

    /* Mano_hola: x=0 y=144 w=149 h=162 */
    --hand-top: 28.8%;
    --hand-left: 0%;
    --hand-w: 29.8%;
    --hand-h: 32.4%;
    --hand-origin-x: 80%;
    --hand-origin-y: 85%;

    width: var(--mascot-w);
    aspect-ratio: 1 / 1;
    transform: scale(0.25);
    opacity: 0;
    animation: mascotEntrance 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}

.mascot-overlay.is-exiting .mascot{
    animation: mascotExit 0.6s cubic-bezier(0.55, 0, 0.85, 0.35) forwards;
}

@keyframes mascotEntrance{
    from{ transform: scale(0.25); opacity: 0; }
    to{ transform: scale(1); opacity: 1; }
}

@keyframes mascotExit{
    from{ transform: scale(1) translate(0, 0); opacity: 1; }
    to{ transform: scale(0.15) translate(40vw, 45vh); opacity: 0; }
}

.mascot .mascot-eyes{
    animation: mascotBlink 2.6s ease-in-out 0.9s infinite;
}

.mascot .mascot-mouth{
    animation: mascotTalk 2.6s ease-in-out 0.9s infinite;
}

@keyframes mascotBlink{
    0%, 32%, 40%, 68%, 76%, 100%{ transform: scaleY(1); }
    36%{ transform: scaleY(0.12); }
    72%{ transform: scaleY(0.12); }
}

@keyframes mascotTalk{
    0%, 32%, 40%, 68%, 76%, 100%{ transform: scaleY(1); }
    36%{ transform: scaleY(0.7); }
    72%{ transform: scaleY(0.7); }
}

.mascot-hand{
    top: var(--hand-top);
    left: var(--hand-left);
    width: var(--hand-w);
    height: var(--hand-h);
    z-index: -1;
    transform-origin: var(--hand-origin-x) var(--hand-origin-y);
    animation: mascotWave 0.55s ease-in-out 0.7s 4 alternate;
}

@keyframes mascotWave{
    from{ transform: rotate(-6deg); }
    to{ transform: rotate(-38deg); }
}

/* Skip entrance/wave choreography for users who prefer reduced motion:
   still greet, but without the swinging/blinking motion. */
@media (prefers-reduced-motion: reduce){
    .mascot-overlay{ animation: none; opacity: 1; }
    .mascot{ animation: none; transform: scale(1); opacity: 1; }
    .mascot .mascot-eyes, .mascot .mascot-mouth, .mascot-hand{ animation: none; }
    .mascot-hand{ transform: rotate(-20deg); }
}

@media (max-width: 480px){
    .mascot{ --mascot-w: 68vw; }
}

/* ===================================================================
   Contacto page: slides in beside the Enviar button once it scrolls
   into view, points at it, and then stays put (no looping animation).
   =================================================================== */

/* Sits as a normal flex item directly to the left of the Enviar button
   (see .btn-enviar-row in contacto.css) - no absolute positioning, so it
   can't be thrown off by the button's own layout. */
.mascot-point{
    flex-shrink: 0;
    width: 110px;
    aspect-ratio: 1 / 1;
    margin-top: -14px;
    opacity: 0;
    transform: translateX(30px) scale(0.6);
    transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
    pointer-events: none;
}

.mascot-point.is-visible{
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* The pointing arm's slot (same as Mano_hola) is on the character's LEFT
   side in the source art. Mirrored so that arm ends up on the side
   FACING the button (character sits to its left, arm reaches right). */
.mascot-point .mascot-figure{
    width: 100%;
    height: 100%;
    transform: scaleX(-1);
}

/* Mano_senal: fingertip at top-left of its own art, shoulder/attach at
   bottom-right (a foreshortened "pointing at camera" pose). Rotated so
   the fingertip aims down-right at the button instead of up-left. */
.mascot-hand-senal{
    top: 26%;
    left: -8%;
    width: 45%;
    z-index: -1;
    transform-origin: 80% 78%;
    transform: rotate(-50deg);
}

@media (prefers-reduced-motion: reduce){
    .mascot-point{ transition: opacity 0.4s ease; transform: translateX(0) scale(1); }
}

@media (max-width: 768px){
    .mascot-point{ display: none; }
}

/* ===================================================================
   Contacto page (alternate/test): big mascot rises up from behind the
   footer and points at the Enviar button. `bottom` and `right` are set
   at runtime by js/mascot-point.js from the footer/button's actual
   measured position - a fixed CSS offset here would only be correct
   for one specific column-height combination (ubicaciones vs. the form
   column can vary), so these are just a reasonable pre-JS fallback.
   =================================================================== */

.mascot-footer-point{
    position: absolute;
    right: 8%;
    bottom: -170px;
    width: 320px;
    max-width: 70vw;
    aspect-ratio: 1 / 1;
    opacity: 0;
    transform: translateY(30px) scale(0.75);
    transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease, bottom 0.2s ease, right 0.2s ease;
    pointer-events: none;
    z-index: 5;
}

.mascot-footer-point.is-visible{
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Same mirror as the beside-the-button variant: the pointing arm's slot
   is on the character's LEFT side in the source art, so it's flipped to
   the RIGHT side here to face the button (mascot sits below/left of it). */
.mascot-footer-point .mascot-figure{
    width: 100%;
    height: 100%;
    transform: scaleX(-1);
}

/* Mano_senal rotated to point up-and-right at the button. */
.mascot-hand-senal-up{
    top: 18%;
    left: -10%;
    width: 45%;
    z-index: -1;
    transform-origin: 80% 78%;
    transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce){
    .mascot-footer-point{ transition: opacity 0.4s ease; transform: translateY(0) scale(1); }
}

@media (max-width: 768px){
    .mascot-footer-point{ display: none; }
}