/* ═══ La perrovaquita — POSES ══════════════════════════════════════════════
   Las seis posturas persistentes que gestiona nucleo.js con ponerPose(). Las
   piezas y los colores están en base.css; cada conducta y los ánimos viven en su
   propia hoja de esta carpeta, una por animación.

   ORDEN DE CARGA de la carpeta, que no es cosmético: base, poses, caricia,
   caminar, rascarse, sacudirse, olfatear, bostezar, animos, ladrido, comer,
   burbuja-pop, interfaz. Casi toda hoja sobreescribe una animation o un transform
   declarado en una anterior, y con la misma especificidad gana la que se cargue
   después. Este orden reproduce el del archivo único original: cambiarlo cambia
   quién gana cuando dos clases conviven (una perra puede estar hambrienta,
   sentada y rascándose a la vez, porque los tres ejes son clases separadas).

   CADA POSTURA QUE CAMBIA LA SILUETA TIENE SU PROPIA VISTA: echarse (vista
   tumbada), caminar (perfil), dormir (enroscada) y las dos paradas (erguidas).
   Sentada y de pie comparten el dibujo de frente. Las conductas y los ánimos se
   escriben para las piezas del frente y valen igual en la echada y en las paradas,
   que reutilizan esa cabeza con sus clases.

   UNA ANIMACIÓN DE TRANSFORM PISA EL ATRIBUTO transform DEL MARCADO, entero. Es la
   trampa que más veces nos ha mordido en esta hoja: si el SVG coloca un grupo con
   un transform y aquí se le anima otro, el del marcado desaparece. Por eso las
   vistas que colocan una cabeza lo hacen en un grupo EXTERIOR sin clase, y todo lo
   que se anima vive dentro de él; la parada de perfil, además, se dibuja sin
   ninguna transformación.
   ═══════════════════════════════════════════════════════════════════════════ */

/* SENTADA y DE PIE no declaran nada: son el dibujo de frente tal cual. */

/* ═══════════════════════════════════════════════════════════════════════════
   ECHADA: la vista tumbada
   ═══════════════════════════════════════════════════════════════════════════ */
/* Echarse CAMBIA EL DIBUJO, como dormir: tumbada la silueta es otra. Aplastar la
   sentada dejaría las patas delanteras de pie y la cola en el aire, y cualquier
   conducta que animara el tronco pisaría el aplastado y la devolvería a su altura.

   Las reglas de ocultar y de encender van juntas aquí, como las de las paradas. */
.edu-mascota__vista--echada {
    display: none;
}

.edu-mascota--pose-echado .edu-mascota__vista--frente {
    display: none;
}

/* Se tumba CON PESO: baja desde un poco más alta, se aplasta contra el suelo y se
   asienta. Sin ese movimiento el cambio de dibujo sería un corte. */
.edu-mascota--pose-echado .edu-mascota__vista--echada {
    display: block;
    transform-origin: 70px 146px;
    animation: edu-pv-echarse .55s cubic-bezier(.3, 1.35, .6, 1) 1 both;
}

@keyframes edu-pv-echarse {
    0% {
        transform: translateY(-9px) scale(.94, 1.1);
    }

    55% {
        transform: translateY(1px) scale(1.05, .95);
    }

    100% {
        transform: none;
    }
}

/* Tumbada está tranquila: párpados algo caídos y la respiración más lenta. Cualquier
   estado que los cambie gana por cargarse después. */
.edu-mascota--pose-echado {
    --pv-parpado-cierre: .2;
}

    .edu-mascota--pose-echado .edu-mascota__aliento,
    .edu-mascota--pose-echado .edu-mascota__cabeza-aliento {
        animation-duration: 4.2s;
    }

    /* Y mira alrededor con menos recorrido: la cabeza apoyada no ladea como sentada. */
    .edu-mascota--pose-echado .edu-mascota__cabeza-ladeo {
        animation-name: edu-pv-mirar-suave;
    }

@keyframes edu-pv-mirar-suave {
    0% {
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(.45, 0, .4, 1);
    }

    22% {
        transform: rotate(-3.8deg);
        animation-timing-function: cubic-bezier(.4, 0, .5, 1);
    }

    29% {
        transform: rotate(-3.1deg);
        animation-timing-function: cubic-bezier(.45, 0, .4, 1);
    }

    54% {
        transform: rotate(3.2deg);
        animation-timing-function: cubic-bezier(.4, 0, .5, 1);
    }

    61% {
        transform: rotate(2.6deg);
        animation-timing-function: cubic-bezier(.45, 0, .4, 1);
    }

    88%, 100% {
        transform: rotate(0deg);
    }
}

/* LA COLA EN EL SUELO barre despacio, con la punta: tumbado, un perro no levanta
   la cola para menearla. Gira sobre su nacimiento en esta vista, y las conductas
   que la aceleran —caricia, alegría— solo cambian la duración, así que aquí
   también barren más deprisa. */
.edu-mascota--pose-echado .edu-mascota__cola {
    transform-origin: 118px 128px;
    animation-name: edu-pv-cola-suelo;
    animation-duration: 2.6s;
}

@keyframes edu-pv-cola-suelo {
    0%, 100% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(4deg);
    }
}

/* Tumbada ocupa más suelo: la sombra se estira a lo ancho. */
.edu-mascota--pose-echado .edu-mascota__sombra {
    transform: scale(1.22, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DURMIENDO: la vista enroscada
   ═══════════════════════════════════════════════════════════════════════════ */
/* Dormir CAMBIA EL DIBUJO, no tuerce el de frente: un perro dormido se enrosca, y
   esa es otra silueta. El intercambio de vistas es un display, el mismo mecanismo
   con el que caminar enciende el perfil (esa pareja de reglas vive en base.css).

   El perfil también se apaga aquí por seguridad: si un fallo del JS dejara
   --caminando puesta al dormirse, sin esta regla se verían dos perras a la vez.
   Gana esta por llegar en una hoja posterior a base.css. */
.edu-mascota--pose-durmiendo .edu-mascota__vista--frente {
    display: none;
}

.edu-mascota--pose-durmiendo .edu-mascota__vista--perfil {
    display: none;
}

.edu-mascota--pose-durmiendo .edu-mascota__vista--dormida {
    display: block;
}

/* Se acurruca al dormirse: baja un poco y se asienta, más despacio que al echarse.
   El cambio de dibujo deja de ser un corte. */
.edu-mascota--pose-durmiendo .edu-mascota__vista--dormida {
    transform-origin: 70px 146px;
    animation: edu-pv-acurrucarse .7s cubic-bezier(.3, 1.2, .6, 1) 1 both;
}

@keyframes edu-pv-acurrucarse {
    0% {
        transform: translateY(-6px) scale(.95, 1.07);
    }

    60% {
        transform: translateY(1px) scale(1.03, .97);
    }

    100% {
        transform: none;
    }
}

/* La respiración se alarga: el mismo aliento de base.css, en sueño profundo. La
   burbuja de abajo respira a esta misma cadencia; si cambia una duración, cambia la
   otra. Con la vista en el selector para ganar al ánimo, que se carga después: una
   perra con hambre también duerme a este ritmo. */
.edu-mascota--pose-durmiendo .edu-mascota__vista--dormida .edu-mascota__aliento {
    animation-duration: 5.4s;
}

/* La cola de la vista dormida es parte del ovillo: quieta y sin el origen de giro
   de la de frente, que la desplazaría. */
.edu-mascota--pose-durmiendo .edu-mascota__cola {
    animation: none;
    transform: none;
}

/* ── La burbujita del sueño ───────────────────────────────────────────────── */
/* Anclada a la nariz: el origen del escalado es la esquina de su caja que toca el
   hocico, para que crezca DESDE él y no flote suelta. Convive con las zetas
   porque cada una ocupa un flanco: la burbuja abajo a la izquierda, las zetas
   subiendo por la derecha.

   Vive aquí y no en base.css porque sin la pose no se ve nunca. Los colores
   reutilizan las variables del personaje: nada nuevo que mantener por tema. */
.edu-mascota__burbuja {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 100% 100%;
}

.edu-mascota__burbuja-forma {
    fill: var(--pv-pecho);
    fill-opacity: .55;
    stroke: var(--pv-borde);
    stroke-width: 1.5;
}

.edu-mascota__burbuja-brillo {
    fill: #fff;
    opacity: .8;
}

/* Se infla al exhalar y se encoge al inhalar, nunca revienta: reventar es una
   reacción (despertarse), no parte del sueño, y queda para su propia animación. */
.edu-mascota--pose-durmiendo .edu-mascota__burbuja {
    animation: edu-pv-burbuja 5.4s ease-in-out infinite;
}

@keyframes edu-pv-burbuja {
    0%, 100% {
        opacity: .85;
        transform: scale(.45);
    }

    55% {
        opacity: .95;
        transform: scale(1);
    }
}

/* ── Las zetas del sueño ──────────────────────────────────────────────────── */
/* Tres tamaños escalonados en el azul del collar, con un CONTORNO claro pintado
   por debajo del relleno (paint-order): las zetas flotan fuera del cuerpo, sobre
   el fondo de la página, y sin ese halo se perderían en un fondo oscuro o azul.
   Ambos colores son variables del personaje, con su versión de tema ya resuelta.

   Cada una nace pequeña y torcida junto a la coronilla, se endereza al crecer y
   se va desvaneciendo mientras sube: el vaivén de giro es lo que las hace vivas
   y no un rótulo. Los retardos las sacan por turnos, como una respiración. */
.edu-mascota__zeta {
    fill: var(--pv-collar);
    stroke: var(--pv-pecho);
    stroke-width: 3px;
    paint-order: stroke;
    font-weight: 800;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center bottom;
}

.edu-mascota__zeta--1 {
    font-size: 21px;
}

.edu-mascota__zeta--2 {
    font-size: 16px;
}

.edu-mascota__zeta--3 {
    font-size: 12px;
}

.edu-mascota--pose-durmiendo .edu-mascota__zeta {
    animation: edu-pv-zeta 3.6s ease-out infinite;
}

.edu-mascota--pose-durmiendo .edu-mascota__zeta--2 {
    animation-delay: 1.2s;
}

.edu-mascota--pose-durmiendo .edu-mascota__zeta--3 {
    animation-delay: 2.4s;
}

@keyframes edu-pv-zeta {
    0% {
        opacity: 0;
        transform: translate(0, 8px) rotate(-14deg) scale(.4);
    }

    22% {
        opacity: 1;
        transform: translate(3px, -2px) rotate(9deg) scale(1);
    }

    60% {
        opacity: .85;
        transform: translate(8px, -12px) rotate(-7deg) scale(1.15);
    }

    100% {
        opacity: 0;
        transform: translate(15px, -24px) rotate(10deg) scale(1.3);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARADA: la vista erguida en dos patas
   ═══════════════════════════════════════════════════════════════════════════ */
/* Otra vista propia, por lo mismo que la dormida: de pie el tronco sube, las ancas
   pasan a ser patas y las manos quedan sueltas. Estirar el dibujo sentado habría
   dado una perra alargada.

   NO ESTÁ EN EL REPERTORIO: no la sortea movimiento.js. Erguirse cada pocos
   segundos cansa, así que es una postura que se pide.

   Las reglas de ocultar y de encender viven las dos AQUÍ, y no repartidas con
   base.css como las otras vistas: son inseparables, y juntas nadie mueve una y se
   deja la otra. */
.edu-mascota__vista--parada {
    display: none;
}

.edu-mascota--pose-parada .edu-mascota__vista--frente {
    display: none;
}

.edu-mascota--pose-parada .edu-mascota__vista--perfil {
    display: none;
}

.edu-mascota--pose-parada .edu-mascota__vista--dormida {
    display: none;
}

.edu-mascota--pose-parada .edu-mascota__vista--parada {
    display: block;
}

/* Se alza CON IMPULSO: se agacha un poco antes de subir y rebota al llegar arriba.
   Sin ese apoyo previo, aparecer erguida se ve como un corte de montaje. Solo una
   vez —forwards—, porque la postura se sostiene después. */
.edu-mascota--pose-parada .edu-mascota__svg {
    animation: edu-pv-alzarse .6s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

@keyframes edu-pv-alzarse {
    0% {
        transform: translateY(6px) scale(1.08, .9);
    }

    45% {
        transform: translateY(-4px) scale(.94, 1.08);
    }

    75% {
        transform: translateY(1px) scale(1.03, .97);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

/* Sostenerse cuesta: el tronco se balancea despacio en vez de quedarse clavado.
   Es lo que separa un animal de pie de una estatua. */
.edu-mascota__parada-tronco {
    transform-origin: 70px 130px;
}

.edu-mascota--pose-parada .edu-mascota__parada-tronco {
    animation: edu-pv-equilibrio 2.6s ease-in-out infinite;
}

@keyframes edu-pv-equilibrio {
    0%, 100% {
        transform: rotate(-1.6deg);
    }

    50% {
        transform: rotate(1.6deg);
    }
}

/* La cabeza compensa el balanceo girando al revés, con retardo: la cabeza de un
   animal sigue al cuerpo, no va con él. Es el mismo principio del retardo en lo
   blando que gobierna orejas y colgante.

   Solo gira: la colocación va en el grupo exterior del marcado, así que los
   keyframes no la repiten. Gira sobre la nuca de la cabeza, en sus coordenadas
   locales, que es donde se apoya en el cuello. */
.edu-mascota__parada-cabeza {
    transform-origin: 70px 86px;
}

.edu-mascota--pose-parada .edu-mascota__parada-cabeza {
    animation: edu-pv-equilibrio-cabeza 2.6s ease-in-out infinite;
}

@keyframes edu-pv-equilibrio-cabeza {
    0%, 100% {
        transform: rotate(1.5deg);
    }

    50% {
        transform: rotate(-2.5deg);
    }
}

/* LAS MANITAS, sueltas y ligeramente desacompasadas entre sí: con las dos a la vez
   parece un muñeco de cuerda. El retardo de la derecha es lo único que las separa. */
.edu-mascota__mano {
    transform-box: fill-box;
    transform-origin: top center;
}

.edu-mascota--pose-parada .edu-mascota__mano--izq {
    animation: edu-pv-manita 1.3s ease-in-out infinite;
}

.edu-mascota--pose-parada .edu-mascota__mano--der {
    animation: edu-pv-manita 1.3s ease-in-out infinite .22s;
}

@keyframes edu-pv-manita {
    0%, 100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(7deg);
    }
}

/* La cola menea más rápido: de pie está pendiente de algo, no en reposo. Su origen
   de giro es el nacimiento en esta vista, distinto al de la sentada. */
.edu-mascota--pose-parada .edu-mascota__cola {
    transform-origin: 96px 130px;
    animation-duration: 1.1s;
}

/* La sombra se recoge: erguida apoya menos superficie en el suelo. */
.edu-mascota--pose-parada .edu-mascota__sombra {
    transform: scale(.8, .9);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARADA DE PERFIL: la misma postura, vista de lado
   ═══════════════════════════════════════════════════════════════════════════ */
/* POSE PROPIA Y NO --caminando: la vista de perfil normal se enciende con esa
   clase, que es del paseo, y atar a ella una postura quieta habría significado que
   solo pudiera estar erguida mientras anda. Con su pose, se pide y ya está.

   Apaga también las otras tres vistas por lo mismo que hace la dormida: si un
   fallo del JS dejara --caminando puesta, se verían dos perras a la vez. */
.edu-mascota__vista--parada-perfil {
    display: none;
}

.edu-mascota--pose-parada-perfil .edu-mascota__vista--frente {
    display: none;
}

.edu-mascota--pose-parada-perfil .edu-mascota__vista--perfil {
    display: none;
}

.edu-mascota--pose-parada-perfil .edu-mascota__vista--dormida {
    display: none;
}

.edu-mascota--pose-parada-perfil .edu-mascota__vista--parada {
    display: none;
}

.edu-mascota--pose-parada-perfil .edu-mascota__vista--parada-perfil {
    display: block;
}

/* Se alza con el mismo impulso que de frente: es la misma acción vista desde otro
   lado, y usar otro tiempo o otra curva las haría parecer dos animales distintos. */
.edu-mascota--pose-parada-perfil .edu-mascota__svg {
    animation: edu-pv-alzarse .6s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

/* EL MISMO BALANCEO RECTO QUE DE FRENTE, y esta es la corrección del bloque. Aquí
   vivía edu-pv-equilibrio-perfil, que giraba el torso -23,5 grados: venía del
   intento de bascular el perfil de caminar y, con el dibujo ya vertical, lo único
   que hacía era dejar al animal inclinado hacia delante por CSS aunque el marcado
   estuviera recto.

   El origen va al punto de apoyo de esta vista —los pies, hacia (72,140)—: sobre
   otro punto, el balanceo la levantaría del suelo. */
.edu-mascota--pose-parada-perfil .edu-mascota__parada-tronco {
    transform-origin: 72px 140px;
    animation: edu-pv-equilibrio 2.6s ease-in-out infinite;
}

/* LA CABEZA NO SE ANIMA AQUÍ. En esta vista no tiene colocación propia: está
   dibujada con sus coordenadas finales dentro del torso, y sube y baja con él.
   Animarla le daría un transform que el marcado no tiene y la sacaría del cuerpo,
   que es justo lo que se veía en los intentos anteriores. */

/* Solo hay una manita a la vista, y es una sola pieza: se balancea entera desde el
   HOMBRO, donde nace del pecho. Con el origen de la caja, como la de frente, giraría
   sobre su borde de arriba y se despegaría del cuerpo. */
.edu-mascota--pose-parada-perfil .edu-mascota__mano--izq {
    transform-box: view-box;
    transform-origin: 51px 84px;
    animation: edu-pv-manita 1.3s ease-in-out infinite;
}

/* La cola nace en otro punto que en la vista de frente. */
.edu-mascota--pose-parada-perfil .edu-mascota__cola {
    transform-origin: 88px 120px;
    animation-duration: 1.1s;
}

.edu-mascota--pose-parada-perfil .edu-mascota__sombra {
    transform: scale(.72, .9);
}