/* ══════════════════════════════════════════════════════════════════════════
   LAS TRES AVES DE LOS PLANES  ·  2026-08-18
   ══════════════════════════════════════════════════════════════════════════
   Roman aprobó montar las ilustraciones de las aves en la esquina superior
   derecha de cada tarjeta de plan, «con su animación o su movimiento, que
   hagan algo cada vez que se toca la tarjeta», y «cuando se tocan ellas que
   tengan un movimiento diferente, que sea natural, que sea normal, que no
   parezca como guiado».

   UNA SOLA hoja para los TRES lugares donde se ven planes (landing
   `facturacion.html`, alta `registro.html`, Suscripción dentro de la app):
   así no quedan dos versiones distintas del mismo gesto.

   CÓMO SE LOGRA QUE NO PAREZCA «GUIADO»
   · Nada de A→B con una curva sola: cada gesto es una OSCILACIÓN QUE SE
     APAGA (amplitud decreciente, tiempos entre picos desiguales). Es lo que
     hace un cuerpo real cuando lo empujan: se pasa, vuelve, se pasa menos.
   · Cada tramo usa `cubic-bezier(.42,0,.42,1)` — entra y sale suave, así el
     movimiento nunca arranca ni frena en seco.
   · Cada ave tiene SU carácter y su punto de giro:
       colibrí → rápido y nervioso, pivote en el cuerpo;
       tucán   → pesado, pivote en las patas/rama (se hunde la rama);
       quetzal → elegante, pivote en la cabeza, así la COLA va con retardo
                 (el `skewX` llega a su pico DESPUÉS del giro).
   · Sin bucles: se dispara, termina, el ave queda quieta.

   REGLAS DE OFICIO
   · Sólo `transform` y `opacity` (compositor, no re-layout).
   · `prefers-reduced-motion` apaga TODO (acá y además en `aves.js`).
   · El ave NO compite con el precio: vive al 66-70 % de opacidad y en un tamaño
     que cabe en el aire muerto de la esquina.
   ══════════════════════════════════════════════════════════════════════════ */

/* El «nido» es lo que se posiciona; el ave de adentro es lo que se mueve.
   Están separados a propósito: en la landing la tarjeta ya levanta 4px a sus
   HIJOS DIRECTOS en el hover (`.plan:hover>*`), y si el ave fuera hija
   directa ese `transform` pisaría al de la animación. El nido se lleva el
   levantado de la casa; el ave se lleva el suyo. */
.ave-nido{
  position:absolute;
  top:var(--ave-top,14px);
  right:var(--ave-right,12px);
  width:var(--ave-w,64px);
  line-height:0;
  pointer-events:none;      /* el nido no le roba el clic a la tarjeta */
  z-index:1;
}
.ave{
  display:block;width:100%;height:auto;
  opacity:var(--ave-op,.7);
  /* saturación bajada: la ilustración es de tinta muy encendida y la hoja de
     tarifas es papel crema. Sin esto el ave le gana al precio. */
  filter:saturate(.88);
  pointer-events:auto;      /* pero el ave SÍ se puede tocar */
  cursor:pointer;
  transform:translate3d(0,0,0);
  transition:opacity .3s cubic-bezier(.45,0,.35,1);
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
  -webkit-tap-highlight-color:transparent;
}
.ave-anim{will-change:transform}

/* En escritorio el ave se despierta un poco cuando el puntero entra a la
   tarjeta. Va DENTRO de `hover:hover`+`pointer:fine` a propósito: en el celu
   no hay hover y un `:hover` emulado se queda pegado después del toque. */
@media (hover:hover) and (pointer:fine){
  .plan:hover .ave,.plan:focus-within .ave,
  .sus-plan:hover .ave,.sus-plan:focus-within .ave{opacity:var(--ave-op-on,.92)}
}

/* ── COLIBRÍ ─ rápido y nervioso ─────────────────────────────────────────
   Pivote en el cuerpo. El roce es un zumbido corto; el toque es el vuelo
   sostenido: sube, se queda batiendo en el aire, deriva y baja. */
.ave-colibri{transform-origin:55% 62%}
@keyframes ave-colibri-roce{
  0%  {transform:translate3d(0,0,0) rotate(0deg)}
  10% {transform:translate3d(-.6px,-3.4px,0) rotate(-3.2deg)}
  21% {transform:translate3d(.5px,-1px,0)    rotate(2.3deg)}
  33% {transform:translate3d(-.4px,-2.6px,0) rotate(-1.7deg)}
  46% {transform:translate3d(.3px,-.7px,0)   rotate(1.2deg)}
  60% {transform:translate3d(-.2px,-1.5px,0) rotate(-.8deg)}
  75% {transform:translate3d(.1px,-.3px,0)   rotate(.4deg)}
  88% {transform:translate3d(0,-.6px,0)      rotate(-.2deg)}
  100%{transform:translate3d(0,0,0)          rotate(0deg)}
}
@keyframes ave-colibri-toque{
  0%  {transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  6%  {transform:translate3d(-.4px,-4px,0)     rotate(-4deg)   scale(1.015)}
  12% {transform:translate3d(.6px,-6.5px,0)    rotate(1.5deg)  scale(1.022)}
  18% {transform:translate3d(-.5px,-9px,0)     rotate(-3.6deg) scale(1.03)}
  24% {transform:translate3d(.8px,-10.4px,0)   rotate(1.8deg)  scale(1.032)}
  30% {transform:translate3d(1.7px,-11.6px,0)  rotate(-2.9deg) scale(1.034)}
  36% {transform:translate3d(2.6px,-11px,0)    rotate(2deg)    scale(1.033)}
  42% {transform:translate3d(3.3px,-11.9px,0)  rotate(-2.2deg) scale(1.032)}
  48% {transform:translate3d(3.4px,-10.6px,0)  rotate(1.6deg)  scale(1.03)}
  55% {transform:translate3d(2.7px,-9.6px,0)   rotate(-1.9deg) scale(1.026)}
  62% {transform:translate3d(1.7px,-7.4px,0)   rotate(1.3deg)  scale(1.021)}
  70% {transform:translate3d(.8px,-5px,0)      rotate(-1.4deg) scale(1.015)}
  78% {transform:translate3d(.2px,-2.8px,0)    rotate(.9deg)   scale(1.009)}
  86% {transform:translate3d(0,-1.2px,0)       rotate(-.6deg)  scale(1.004)}
  93% {transform:translate3d(0,-.4px,0)        rotate(.3deg)   scale(1.001)}
  100%{transform:translate3d(0,0,0)            rotate(0deg)    scale(1)}
}

/* ── TUCÁN ─ pesado y tranquilo ──────────────────────────────────────────
   Pivote abajo a la derecha: donde las patas agarran la rama. Al rozar la
   tarjeta la rama se hunde y se acomoda. Al tocarlo al él, baja el pico
   —el gesto que hace un tucán— y vuelve con el peso de un cuerpo grande. */
.ave-tucan{transform-origin:74% 90%}
@keyframes ave-tucan-roce{
  0%  {transform:translate3d(0,0,0)    rotate(0deg)}
  16% {transform:translate3d(0,.6px,0) rotate(-2.6deg)}
  34% {transform:translate3d(0,-.4px,0)rotate(1.4deg)}
  52% {transform:translate3d(0,.3px,0) rotate(-.9deg)}
  70% {transform:translate3d(0,-.2px,0)rotate(.5deg)}
  85% {transform:translate3d(0,.1px,0) rotate(-.2deg)}
  100%{transform:translate3d(0,0,0)    rotate(0deg)}
}
@keyframes ave-tucan-toque{
  0%  {transform:translate3d(0,0,0)        rotate(0deg)}
  10% {transform:translate3d(-.5px,1.5px,0)rotate(-5deg)}
  20% {transform:translate3d(-1.2px,3px,0) rotate(-8.5deg)}
  27% {transform:translate3d(-1.4px,3.4px,0)rotate(-9.2deg)}
  34% {transform:translate3d(-1.2px,3px,0) rotate(-8.4deg)}
  46% {transform:translate3d(-.3px,.4px,0) rotate(-1.6deg)}
  56% {transform:translate3d(.4px,-.8px,0) rotate(2.6deg)}
  66% {transform:translate3d(.1px,.3px,0)  rotate(-1.4deg)}
  76% {transform:translate3d(0,-.3px,0)    rotate(.8deg)}
  86% {transform:translate3d(0,.1px,0)     rotate(-.4deg)}
  94% {transform:translate3d(0,0,0)        rotate(.2deg)}
  100%{transform:translate3d(0,0,0)        rotate(0deg)}
}

/* ── QUETZAL ─ elegante ──────────────────────────────────────────────────
   Pivote arriba, en la cabeza: así el cuerpo manda y la COLA (que es lo que
   cuelga abajo en la ilustración) va detrás. El `skewX` es la cola: llega a
   su pico DESPUÉS del giro, que es exactamente el retardo que se le pidió. */
.ave-quetzal{transform-origin:50% 18%}
@keyframes ave-quetzal-roce{
  0%  {transform:translate3d(0,0,0)        rotate(0deg)    skewX(0deg)}
  18% {transform:translate3d(.6px,-4.2px,0)rotate(-1.8deg) skewX(1.2deg)}
  34% {transform:translate3d(.9px,-4.8px,0)rotate(-1.2deg) skewX(2.2deg)}
  50% {transform:translate3d(.5px,-3px,0)  rotate(.6deg)   skewX(.6deg)}
  66% {transform:translate3d(.1px,-1.4px,0)rotate(.9deg)   skewX(-1deg)}
  80% {transform:translate3d(0,-.5px,0)    rotate(.3deg)   skewX(-.5deg)}
  92% {transform:translate3d(0,-.1px,0)    rotate(-.15deg) skewX(.2deg)}
  100%{transform:translate3d(0,0,0)        rotate(0deg)    skewX(0deg)}
}
@keyframes ave-quetzal-toque{
  0%  {transform:translate3d(0,0,0)          rotate(0deg)    skewX(0deg)}
  8%  {transform:translate3d(-.8px,-4px,0)   rotate(-2.4deg) skewX(.8deg)}
  18% {transform:translate3d(-1.4px,-9px,0)  rotate(-5deg)   skewX(2deg)}
  28% {transform:translate3d(-1px,-12.5px,0) rotate(-5.8deg) skewX(3.4deg)}
  38% {transform:translate3d(.4px,-13.6px,0) rotate(-4.2deg) skewX(3.8deg)}
  48% {transform:translate3d(2.2px,-12.6px,0)rotate(-1.6deg) skewX(2.4deg)}
  58% {transform:translate3d(3.2px,-10px,0)  rotate(1.2deg)  skewX(.2deg)}
  68% {transform:translate3d(3px,-6.8px,0)   rotate(2.4deg)  skewX(-1.8deg)}
  78% {transform:translate3d(2px,-3.8px,0)   rotate(1.8deg)  skewX(-2.4deg)}
  86% {transform:translate3d(1px,-1.8px,0)   rotate(.8deg)   skewX(-1.6deg)}
  93% {transform:translate3d(.3px,-.6px,0)   rotate(.1deg)   skewX(-.7deg)}
  100%{transform:translate3d(0,0,0)          rotate(0deg)    skewX(0deg)}
}

/* ── DISPARO ─────────────────────────────────────────────────────────────
   `aves.js` pone la clase y la saca en `animationend`: nunca queda un estado
   pegado después de un toque en el celular. `forwards` NO se usa a propósito
   —el ave tiene que volver a su sitio—. */
.ave-roce.ave-colibri {animation:ave-colibri-roce  .56s cubic-bezier(.42,0,.42,1) both}
.ave-toque.ave-colibri{animation:ave-colibri-toque .98s cubic-bezier(.42,0,.42,1) both}
.ave-roce.ave-tucan   {animation:ave-tucan-roce    .76s cubic-bezier(.42,0,.42,1) both}
.ave-toque.ave-tucan  {animation:ave-tucan-toque   1.24s cubic-bezier(.42,0,.42,1) both}
.ave-roce.ave-quetzal {animation:ave-quetzal-roce  .9s  cubic-bezier(.42,0,.42,1) both}
.ave-toque.ave-quetzal{animation:ave-quetzal-toque 1.5s cubic-bezier(.42,0,.42,1) both}

/* ── ACCESIBILIDAD ───────────────────────────────────────────────────────
   Si el sistema pide menos movimiento, el ave se queda quieta. `aves.js`
   además ni siquiera pone la clase; esto es el segundo cerrojo. */
@media (prefers-reduced-motion:reduce){
  .ave,.ave-roce,.ave-toque{animation:none!important;transition:none!important}
}

/* ══ MEDIDAS POR LUGAR ═══════════════════════════════════════════════════ */

/* 1 · LANDING (`facturacion.html`) — la ficha de tarifas. */
.plan{--ave-w:66px;--ave-top:18px;--ave-right:14px}
.plan-rec{--ave-top:8px}                     /* esa ficha sobresale 20px arriba */
/* el filete que sale del rótulo «Recomendado» se corta ANTES del ave: si sigue
   de largo se le mete por debajo y se lee como una raya que atraviesa al tucán */
.plan-rec .rec-mark{padding-right:calc(var(--ave-w) + 6px)}
@media (max-width:880px){
  /* una sola columna: la ficha se ensancha y el ave puede respirar un poco */
  .plan{--ave-w:70px}
  .plan-rec{--ave-top:18px}
}
@media (max-width:400px){
  .plan{--ave-w:56px;--ave-top:16px;--ave-right:10px}
}

/* 2 · ALTA DE CUENTA (`registro.html`) — tarjetas chicas, en rejilla de 3.
   Acá la tarjeta mide ~211px en escritorio y el renglón del precio
   («₡14.900 por mes») ocupa ~155 de esos. NO se le reserva espacio al ave
   empujando el precio: el precio es lo que la persona vino a leer y se deja
   EXACTAMENTE como estaba. Es el ave la que se achica hasta caber en el aire
   que sobra (≈7px de aire entre el final de «mes» y el borde del ave).
   El rótulo «Recomendado» va montado en el borde de arriba (top:-9px), así
   que el ave arranca más abajo para no chocarle. */
.rejilla-planes .plan{--ave-w:30px;--ave-top:10px;--ave-right:8px;--ave-op:.66;--ave-op-on:.9}
/* la recomendada lleva el rótulo montado en el borde: el ave baja un poco más
   para no quedarle pegada por debajo */
.rejilla-planes .plan.reco{--ave-top:15px}
@media (max-width:640px){
  /* una sola columna: la tarjeta pasa a ~366px y el ave puede crecer de verdad
     sin acercarse al precio */
  .rejilla-planes .plan{--ave-w:56px;--ave-top:11px;--ave-right:12px}
}

/* 3 · SUSCRIPCIÓN dentro de la app (`#sus-planes`). */
.sus-plan{position:relative;--ave-w:48px;--ave-top:12px;--ave-right:12px;--ave-op:.66;--ave-op-on:.9}
/* el encabezado deja libre la esquina para que los rótulos
   «Recomendado» / «Tu plan» envuelvan antes de meterse debajo del ave */
.sus-plan .sus-plan-h{padding-right:calc(var(--ave-w) + 6px)}
@media (max-width:640px){
  .sus-plan{--ave-w:58px}
}