/* Mascota flotante (partials/mascot.php y mascot.js): abajo a la izquierda en todas las páginas;
   la esquina derecha es del botón de WhatsApp y de la lista de cotización. */
.mascot {
    --mascot-size: 7.5rem;
    position: fixed;
    z-index: 45;
    bottom: max(1.2rem, env(safe-area-inset-bottom));
    left: max(1.2rem, env(safe-area-inset-left));
    display: flex;
    align-items: flex-start;
    gap: 0.2rem;
    /* Decorative figure: the page stays clickable around it; only the message takes the pointer. */
    pointer-events: none;
}

.mascot[hidden] {
    display: none;
}

/* On the bottom edge even when a long text makes the bubble taller than the mascot. */
.mascot__figure {
    width: var(--mascot-size);
    aspect-ratio: 1;
    flex: none;
    align-self: flex-end;
}

.mascot__figure svg,
.mascot__figure img {
    width: 100%;
    height: auto;
    overflow: visible;
}

.mascot__message {
    position: relative;
    margin-top: calc(var(--mascot-size) * 0.1);
    pointer-events: auto;
}

.mascot__bubble {
    position: relative;
    display: block;
    max-width: 13.5rem;
    padding: 0.7rem 1.1rem;
    color: var(--primary-deep);
    background: var(--white);
    border: 2px solid var(--primary-deep);
    border-radius: 1.1rem;
    box-shadow: 0 0.9rem 2.2rem rgba(9, 31, 84, 0.2);
    font: 700 0.82rem/1.3 var(--font-sans);
    text-decoration: none;
    transform-origin: 0 70%;
    transition: background var(--transition);
}

/* Tail toward the mascot's mouth. */
.mascot__bubble::before {
    position: absolute;
    top: 55%;
    left: -0.45rem;
    width: 0.8rem;
    height: 0.8rem;
    content: "";
    background: inherit;
    border-bottom: 2px solid var(--primary-deep);
    border-left: 2px solid var(--primary-deep);
    transform: translateY(-50%) rotate(45deg);
}

.mascot__bubble:focus-visible {
    background: var(--secondary);
}

/* On touch screens the last tap would leave the hover colour stuck. */
@media (hover: hover) {
    .mascot__bubble:hover {
        background: var(--secondary);
    }
}

.mascot__bubble:focus-visible,
.mascot__close:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.mascot__close {
    position: absolute;
    top: -0.65rem;
    right: -0.65rem;
    display: grid;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    padding: 0;
    color: var(--white);
    background: var(--primary-deep);
    border: 2px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 0.4rem 1rem rgba(9, 31, 84, 0.25);
    font-size: 0.7rem;
    cursor: pointer;
}

/* A larger touch target than the visible circle. */
.mascot__close::after {
    position: absolute;
    inset: -0.5rem;
    content: "";
}

/* The cookie choice comes first: while its banner is open the mascot steps aside. */
body:has(> [data-cookie-banner]:not([hidden])) .mascot {
    visibility: hidden;
}

@media (max-width: 600px) {
    .mascot {
        --mascot-size: 5.25rem;
        bottom: max(0.8rem, env(safe-area-inset-bottom));
        left: max(0.8rem, env(safe-area-inset-left));
    }

    /* Leaves room for the WhatsApp button in the other corner. */
    .mascot__bubble {
        max-width: min(12rem, calc(100vw - var(--mascot-size) - 6.6rem));
        padding: 0.55rem 0.8rem;
        font-size: 0.76rem;
    }
}

@media print {
    .mascot {
        display: none;
    }
}