/* ========================================================================
   MASCOTA DE TRAMPERAS — la zorra
   ------------------------------------------------------------------------
   Imágenes (fondo transparente) en assets/images/mascota/:
     mascota-zorra.png|webp       cuerpo completo (484x1121)
     mascota-zorra-600|320.*      cuerpo completo reducido
     mascota-avatar-512|192|96|64 busto cuadrado, para logos y avatares
   Usos: logo del header, modal +18, página 404, estado vacío de la portada
   y pie de página.
   ======================================================================== */

/* ----- Logo del header: el avatar reemplaza al ícono genérico ----- */
.header__logo-icon .mascota-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbcfe8 0%, #c4b5fd 100%);
    box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(168, 85, 247, 0.45);
}

/* Logo + nombre en una fila (en algunas páginas el enlace era display:block
   y el ícono quedaba apilado sobre el texto). */
.header__logo-link:has(> .header__logo-icon .mascota-logo) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

/* El logo del header de la portada mide 40px en desktop: un poco más
   grande para que la cara se reconozca. */
.header--inicio .header__logo-icon:has(.mascota-logo) {
    width: 46px !important;
    height: 46px !important;
}

@media (max-width: 768px) {
    .header--inicio .header__logo-icon:has(.mascota-logo) {
        width: 34px !important;
        height: 34px !important;
    }
}

/* ----- Modal +18 ----- */
.aviso-adultos__logo-icono--mascota {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbcfe8 0%, #c4b5fd 100%);
    box-shadow: 0 0 0 3px #fff, 0 4px 14px rgba(168, 85, 247, 0.45);
    overflow: hidden;
}

.aviso-adultos__logo-icono--mascota img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cuerpo completo junto al modal, solo en pantallas anchas */
.aviso-adultos__mascota {
    display: none;
}

@media (min-width: 1100px) and (min-height: 640px) {
    .aviso-adultos__mascota {
        display: block;
        position: absolute;
        left: calc(50% + 236px);
        bottom: 0;
        height: min(86vh, 720px);
        width: auto;
        pointer-events: none;
        user-select: none;
        filter: drop-shadow(0 0 28px rgba(217, 70, 239, 0.55));
        animation: mascota-asomar 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
}

@keyframes mascota-asomar {
    from { transform: translateX(-24px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

/* ----- Estado vacío / error en la portada ----- */
.mascota-estado {
    text-align: center;
    padding: 40px 20px 60px;
}

.mascota-estado img {
    display: block;
    margin: 0 auto 12px;
    height: 220px;
    width: auto;
    filter: drop-shadow(0 6px 14px rgba(168, 85, 247, 0.35));
}

/* ----- Pie de página ----- */
.footer__mascota {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.footer__mascota img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, #fbcfe8 0%, #c4b5fd 100%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
    flex: 0 0 auto;
}

.footer__mascota h3 {
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .aviso-adultos__mascota { animation: none; }
}

/* ----- Modal +18 en celular y tablet (pedido 2026-10-21) -----
   El cuerpo completo de arriba solo aparece desde 1100px de ancho: al costado
   de la tarjeta, que es donde hay lugar en una pantalla grande. En un celular
   no existe ese "costado" (la tarjeta ocupa casi todo el ancho), así que la
   mascota se pone DEBAJO de la tarjeta, que es el equivalente mobile.
   Solo si la pantalla es lo bastante alta (700px): en pantallas cortas la
   tarjeta ya ocupa casi todo y meter la zorra la dejaría recortada.
   El avatar redondo del encabezado de la tarjeta se mantiene en todos los
   tamaños — eso ya funcionaba. */
@media (max-width: 1099px) and (min-height: 700px) {
    .aviso-adultos {
        flex-direction: column;
        gap: 0.5rem;
        overflow-y: auto; /* si el texto crece (otro idioma), nada queda inalcanzable */
    }

    .aviso-adultos__caja {
        flex: 0 0 auto;
    }

    .aviso-adultos__mascota {
        display: block;
        flex: 0 0 auto;
        height: min(26vh, 240px);
        width: auto;
        max-width: 90vw;
        object-fit: contain;
        pointer-events: none;
        user-select: none;
        filter: drop-shadow(0 0 20px rgba(217, 70, 239, 0.5));
        animation: mascota-subir 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
}

@keyframes mascota-subir {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .aviso-adultos__mascota { animation: none; }
}