/* Pausa «Tómate un minuto para respirar»: se muestra una sola vez, justo
 * después de que el servidor acepta las credenciales, y tapa el portal
 * mientras carga por debajo. Tres suspiros fisiológicos de 13 s: inhala 3 s,
 * segunda inhalada 3 s, exhala 7 s. La duración la manda la animación
 * (respira.js escucha animationend en el primer .lobulo).
 *
 * El beige es el de la imagen original, no el --paper del portal: la pausa es
 * un paréntesis fuera del tablero, a propósito. Copia idéntica en
 * portal-comprador/app/globals.css (solo cambia el selector del contenedor). */
.respira{
  --beige:#d9cab2; --beige-luz:#e6d9c3; --beige-sombra:#c2af97;
  --tinta:#1c1a16; --meta-beige:#6b6356; --halo:120,150,80;
  position:fixed;inset:0;z-index:1000;
  display:grid;grid-template-rows:auto auto auto;justify-items:center;align-content:center;
  gap:clamp(12px,3vh,28px);padding:28px 16px 24px;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,var(--beige-luz) 0%,var(--beige) 55%,var(--beige-sombra) 100%);
  color:var(--tinta);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  animation:respira-entra 400ms ease-out both;
}
.respira.fuera{animation:respira-sale 600ms ease-in forwards}
.respira h2{
  /* el portal pone los h2 en versalitas chicas; aquí es un titular */
  margin:0;font-size:clamp(20px,2.6vw,28px);font-weight:600;letter-spacing:-.01em;
  text-transform:none;text-align:center;text-wrap:balance;
}
.respira .escena{
  position:relative;display:grid;place-items:center;
  height:min(60vh,560px);width:100%;max-width:100%;
}
.respira .halo{
  position:absolute;left:50%;top:48%;width:min(90vw,640px);aspect-ratio:1;max-width:100%;
  transform:translate(-50%,-50%) scale(.9);
  background:radial-gradient(closest-side,rgba(var(--halo),.5),rgba(var(--halo),.16) 55%,rgba(var(--halo),0));
  opacity:.3;pointer-events:none;
  animation:respira-halo 13s 3 both;
}
/* El árbol son dos imágenes: tronco.webp (base, quieta, nunca se mueve) y
 * pulmones.webp (todo lo demás), apilada tres veces encima. Cada lóbulo es una
 * copia enmascarada a su mitad que gira apenas desde la horqueta, como una rama,
 * cada lado con su propio ritmo; la tercera copia es solo el fleco de hojas
 * exteriores, que tiembla más rápido y pasa por un filtro de turbulencia. Los
 * tres .lobulo respiran juntos: 70 % exhalados, 100 % llenos. */
.respira .arbol{position:relative;height:min(60vh,560px);aspect-ratio:1114/1100;max-width:100%}
.respira .arbol img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.respira .lobulo{position:absolute;inset:0;transform-origin:50% 40%;animation:respira-lobulo 13s 3 both}
.respira .lobulo img{transform-origin:50% 40%;will-change:transform}
.respira .viento{
  -webkit-mask-composite:source-in;mask-composite:intersect;
  /* longhands a propósito: el shorthand sin nombre (animation:7.3s ...) lo
   * descarta el compilador CSS de Next y la animación queda en 0 s */
  animation-duration:7.3s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
}
.respira .viento.izq{
  -webkit-mask-image:linear-gradient(to right,#000 0 47%,transparent 53%);
  mask-image:linear-gradient(to right,#000 0 47%,transparent 53%);
  animation-name:respira-viento-izq;animation-duration:7.3s;
}
.respira .viento.der{
  -webkit-mask-image:linear-gradient(to left,#000 0 47%,transparent 53%);
  mask-image:linear-gradient(to left,#000 0 47%,transparent 53%);
  animation-name:respira-viento-der;animation-duration:6.1s;
}
.respira .viento.fleco{
  -webkit-mask-image:radial-gradient(ellipse 60% 64% at 50% 45%,transparent 0 52%,#000 78%);
  mask-image:radial-gradient(ellipse 60% 64% at 50% 45%,transparent 0 52%,#000 78%);
  filter:url(#respira-viento);
  animation-name:respira-viento-fleco;animation-duration:3.7s;
}
.respira .pie{display:grid;justify-items:center;gap:14px;min-height:120px}
/* Señal grande: la palabra crece al inhalar y se encoge al exhalar */
.respira .senal{position:relative;height:44px;width:min(90vw,360px)}
.respira .senal span{
  position:absolute;inset:0;text-align:center;font-size:clamp(22px,3vw,34px);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;opacity:0;line-height:44px;
  animation-duration:13s;animation-iteration-count:3;animation-fill-mode:both;
}
.respira .senal .in1{animation-name:respira-in1}
.respira .senal .in2{animation-name:respira-in2}
.respira .senal .ex{animation-name:respira-ex}
/* Barra de aliento: se llena en los 6 s de inhalación y se vacía en los 7 de exhalación */
.respira .aliento{position:relative;width:min(70vw,260px);height:2px;background:rgba(28,26,22,.18)}
.respira .aliento::before{
  content:"";position:absolute;inset:0;background:var(--tinta);transform:scaleX(0);
  animation:respira-aliento 13s 3 both;
}
.respira .lbl{
  font-size:12px;text-transform:uppercase;letter-spacing:.09em;font-weight:500;
  color:var(--meta-beige);
}
.respira .cuenta{font-variant-numeric:tabular-nums}
.respira .carga{opacity:.8}
.respira .mudo{
  position:absolute;right:18px;bottom:16px;font:inherit;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--meta-beige);background:none;border:0;border-bottom:1px solid transparent;
  padding:4px 0;cursor:pointer;
}
.respira .mudo:hover,.respira .mudo:focus-visible{color:var(--tinta);border-bottom-color:var(--tinta);outline:0}

/* 13 s = 100 %. 0–3 s inhala · 3–6 s segunda inhalada · 6–13 s exhala.
 * Los pulmones van del 70 % (exhalados) al 100 % (llenos) desde la horqueta;
 * el tronco es otra imagen (tronco.webp) en la capa base y no participa. */
@keyframes respira-lobulo{
  0%    {transform:scale(.7); animation-timing-function:cubic-bezier(.42,0,.58,1)}
  23.08%{transform:scale(.9); animation-timing-function:cubic-bezier(.3,0,.6,1)}
  46.15%{transform:scale(1);  animation-timing-function:cubic-bezier(.33,0,.2,1)}
  100%  {transform:scale(.7)}
}
/* Viento: rachas irregulares, cada lado con su duración para que no vayan al
 * unísono. Son décimas de grado: el ojo lee movimiento, no deformación. */
@keyframes respira-viento-izq{
  0%  {transform:rotate(0deg) translate(0,0)}
  22% {transform:rotate(-1.2deg) translate(-3px,1px)}
  48% {transform:rotate(.5deg) translate(1px,0)}
  71% {transform:rotate(-.8deg) translate(-2px,1px)}
  100%{transform:rotate(0deg) translate(0,0)}
}
@keyframes respira-viento-der{
  0%  {transform:rotate(0deg) translate(0,0)}
  27% {transform:rotate(1.1deg) translate(3px,1px)}
  52% {transform:rotate(-.45deg) translate(-1px,0)}
  76% {transform:rotate(.85deg) translate(2px,1px)}
  100%{transform:rotate(0deg) translate(0,0)}
}
@keyframes respira-viento-fleco{
  0%  {transform:rotate(0deg) translate(0,0)}
  31% {transform:rotate(.5deg) translate(3px,-1px)}
  64% {transform:rotate(-.4deg) translate(-3px,1px)}
  100%{transform:rotate(0deg) translate(0,0)}
}
@keyframes respira-halo{
  0%    {opacity:.3;transform:translate(-50%,-50%) scale(.9);  animation-timing-function:cubic-bezier(.42,0,.58,1)}
  23.08%{opacity:.7;transform:translate(-50%,-50%) scale(1.03);animation-timing-function:cubic-bezier(.3,0,.6,1)}
  46.15%{opacity:1; transform:translate(-50%,-50%) scale(1.12);animation-timing-function:cubic-bezier(.33,0,.2,1)}
  100%  {opacity:.3;transform:translate(-50%,-50%) scale(.9)}
}
@keyframes respira-in1{
  0%{opacity:1;transform:scale(.88)} 21.5%{opacity:1;transform:scale(1.04)} 23.5%{opacity:0;transform:scale(1.06)} 100%{opacity:0;transform:scale(1.06)}
}
@keyframes respira-in2{
  0%{opacity:0;transform:scale(1)} 22.5%{opacity:0;transform:scale(1)} 24.5%{opacity:1;transform:scale(1.02)}
  44.5%{opacity:1;transform:scale(1.1)} 46.5%{opacity:0;transform:scale(1.12)} 100%{opacity:0;transform:scale(1.12)}
}
@keyframes respira-ex{
  0%{opacity:0;transform:scale(1.08)} 45.5%{opacity:0;transform:scale(1.08)} 47.5%{opacity:1;transform:scale(1.06)}
  98%{opacity:1;transform:scale(.9)} 100%{opacity:0;transform:scale(.88)}
}
@keyframes respira-aliento{
  0%    {transform:scaleX(0);  animation-timing-function:cubic-bezier(.42,0,.58,1)}
  23.08%{transform:scaleX(.55);animation-timing-function:cubic-bezier(.3,0,.6,1)}
  46.15%{transform:scaleX(1);  animation-timing-function:cubic-bezier(.33,0,.2,1)}
  100%  {transform:scaleX(0)}
}
@keyframes respira-entra{from{opacity:0}to{opacity:1}}
@keyframes respira-sale{to{opacity:0}}

@media (max-width:600px){
  .respira .escena,.respira img{height:min(48vh,360px)}
  .respira .halo{width:min(96vw,420px)}
}
@media (prefers-reduced-motion:reduce){
  /* Sin viento ni escala: solo el halo y las señales marcan el ritmo. Misma duración. */
  .respira .viento{animation:none;filter:none}
  .respira .lobulo{animation-name:respira-quieto}
  .respira .senal span{transform:none !important}
  @keyframes respira-quieto{from{transform:none}to{transform:none}}
}