/* ═══════════════════════════════════════════════════════════════════════════
   05 · Respira (−28 m) · apnea estática en seco
   La medusa de luz es el botón: se mantiene presionada mientras aguantas.
   ═══════════════════════════════════════════════════════════════════════════ */

#respira {
  --res-h: max(100svh, 36rem);                 /* alto del escenario */
  --res-d: min(76vw, 40svh, 22rem);            /* diámetro del bisel */
  --res-cy: 60%;                               /* centro de la medusa durante la sesión */
  --res-inv-x: 0px;                            /* desplazamiento en la invitación */
  --res-inv-y: calc(var(--res-h) * -0.2);
  --res-x: var(--res-inv-x);
  --res-y: var(--res-inv-y);
  --res-s: .94;
  --res-luz: #6BFFE6;
  position: relative;
  padding-top: calc(var(--nav-alto) + var(--esp-4));
  color: var(--tinta);
}

/* ─── Intro ──────────────────────────────────────────────────────────────── */
#respira .respira__intro {
  position: relative;
  z-index: 3;
  padding-bottom: var(--esp-2);
  transition: opacity .8s var(--agua-ease), visibility 0s linear 0s;
}
#respira .respira__texto { max-width: 36rem; }
#respira .respira__titulo {
  margin-top: .45em;
  font-size: min(clamp(3.1rem, 6.4vw, 7.2rem), calc((100vw - 2 * var(--margen)) / 4.6));
  line-height: .9;
}
#respira .respira__pregunta { display: block; }
#respira .respira__aguantas { --pincel-tam: 1.24em; margin-top: -.12em; }
#respira .respira__bajada { margin-top: var(--esp-3); }

#respira .respira__aviso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: start;
  margin-top: var(--esp-3);
  padding: 1.05rem 1.3rem 1.15rem 1.1rem;
  border-radius: var(--r-medio);
  max-width: 33rem;
}
#respira .respira__aviso-ico {
  width: 1.55rem;
  height: 1.55rem;
  margin-top: .1rem;
  fill: none;
  stroke: var(--naranja-luz);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#respira .respira__aviso p {
  font-size: var(--t-peque);
  line-height: 1.55;
  color: var(--tinta-2);
}
#respira .respira__aviso-rot {
  display: block;
  margin-bottom: .3rem;
  font: 500 var(--t-micro)/1.2 var(--f-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--naranja-luz);
}
#respira .respira__aviso [data-pincel] { color: var(--tinta); }

#respira .respira__pasos {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.6rem;
  margin-top: var(--esp-3);
  padding: 0;
  font: 400 var(--t-micro)/1.3 var(--f-mono);
  letter-spacing: .06em;
  color: var(--tinta-2);
}
#respira .respira__pasos li { display: flex; align-items: baseline; gap: .6em; }
#respira .respira__pasos b { font-weight: 500; color: var(--acento); }
@media (min-width: 600px) {
  #respira .respira__pasos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 34rem;
    gap: 1.2rem;
  }
  #respira .respira__pasos li {
    flex-direction: column;
    gap: .45rem;
    padding-top: .7rem;
    border-top: 1px solid var(--linea);
  }
}

/* ─── Escenario ──────────────────────────────────────────────────────────── */
#respira .respira__escenario {
  position: relative;
  height: var(--res-h);
  pointer-events: none;
}
#respira .respira__escenario > * { pointer-events: auto; }
#respira .respira__fondo,
#respira .respira__velo,
#respira .respira__alga { pointer-events: none; }

#respira .respira__fondo {
  position: absolute;
  inset: 0 0 auto 0;
  height: 70%;
  z-index: 0;
  overflow: hidden;
  opacity: .34;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, rgba(0, 0, 0, .55) 52%, transparent 92%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, rgba(0, 0, 0, .55) 52%, transparent 92%);
  transition: opacity 2.4s var(--agua-ease);
}
#respira .respira__superficie {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
#respira[data-estado="apnea"] .respira__fondo { opacity: 0; }

/* velo: la pantalla se oscurece durante la apnea */
#respira .respira__velo {
  position: fixed;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(90% 70% at 50% 50%, rgba(2, 10, 17, .5), rgba(2, 10, 17, .92) 72%),
    rgba(2, 10, 17, .25);
  opacity: 0;
  visibility: hidden;
}

/* algas en las esquinas */
#respira .respira__alga {
  position: absolute;
  bottom: -1px;
  z-index: 1;
  width: auto;
  color: #062234;
  --detalle: rgba(95, 224, 217, .5);
  --brillo: #6BFFE6;
  opacity: .9;
  transform-origin: 50% 100%;
}
#respira .respira__alga--1 { left: -1%; height: 34%; }
#respira .respira__alga--2 { left: 6%; height: 13%; opacity: .75; }
#respira .respira__alga--3 { right: 1%; height: 27%; transform: scaleX(-1); }
#respira .respira__alga--4 { right: 10%; height: 11%; opacity: .7; }

/* cabecera de la sesión */
#respira .respira__cabecera {
  position: absolute;
  z-index: 5;
  top: calc(var(--nav-alto) + max(1.4svh, .6rem));
  left: var(--margen);
  right: var(--margen);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
#respira .respira__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font: 500 var(--t-micro)/1.2 var(--f-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
#respira .respira__led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--res-luz);
  box-shadow: 0 0 0 4px rgba(107, 255, 230, .14);
}
#respira[data-estado="apnea"] .respira__led { background: var(--naranja); box-shadow: 0 0 0 4px rgba(250, 129, 23, .18); }

/* ─── La medusa en su bisel ──────────────────────────────────────────────── */
#respira .respira__nucleo {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: var(--res-cy);
  width: var(--res-d);
  height: var(--res-d);
  margin: calc(var(--res-d) / -2) 0 0 calc(var(--res-d) / -2);
  transform: translate3d(var(--res-x), var(--res-y), 0) scale(var(--res-s));
  transition: transform 1.6s var(--agua-ease), opacity 1.2s var(--agua-ease);
  pointer-events: none;
}
#respira .respira__boton {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#respira .respira__boton:disabled { cursor: default; }
#respira .respira__boton:focus-visible { border-radius: 50%; outline-offset: 8px; }

#respira .respira__bisel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}
#respira .respira__pista { fill: none; stroke: rgba(234, 251, 251, .14); stroke-width: .6; }
#respira .respira__arco {
  fill: none;
  stroke: var(--res-luz);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 3px rgba(107, 255, 230, .7));
}
#respira .respira__puntos circle { fill: rgba(234, 251, 251, .32); }
#respira .respira__puntos .es-mayor { fill: rgba(234, 251, 251, .62); }
#respira .respira__marcas path { fill: rgba(234, 251, 251, .24); transition: fill .8s var(--agua-ease); }
#respira .respira__marcas path.es-logrado { fill: var(--naranja-luz); }

#respira .respira__halo {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 92%;
  height: 92%;
  margin: -46% 0 0 -46%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(107, 255, 230, .34), rgba(95, 224, 217, .1) 55%, transparent);
  opacity: .8;
  pointer-events: none;
}
#respira .respira__medusa {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40%;
  margin: -37% 0 0 -20%;
  color: rgba(150, 255, 236, .3);
  --detalle: rgba(234, 251, 251, .95);
  --brillo: #F2FFFD;
  transform-origin: 50% 30%;
  pointer-events: none;
}
#respira .respira__campana,
#respira .respira__tentaculos { display: block; width: 100%; height: auto; overflow: visible; }
#respira .respira__campana { aspect-ratio: 140 / 94; transform-origin: 50% 100%; position: relative; z-index: 1; }
#respira .respira__tentaculos { aspect-ratio: 140 / 166; margin-top: -1px; transform-origin: 50% 0; }

#respira .respira__latido,
#respira .respira__invita {
  position: absolute;
  left: 7%;
  top: 7%;
  width: 86%;
  height: 86%;
  border-radius: 50%;
  border: 1px solid rgba(107, 255, 230, .55);
  opacity: 0;
  pointer-events: none;
}
#respira .respira__invita { border-color: rgba(250, 129, 23, .55); }
@keyframes respira-invita {
  0% { transform: scale(.94); opacity: 0; }
  25% { opacity: .9; }
  100% { transform: scale(1.32); opacity: 0; }
}
#respira[data-estado="listo"].es-visible .respira__invita { animation: respira-invita 2.6s var(--agua-ease) infinite; }

#respira .respira__burbujas {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 0;
  height: 0;
  pointer-events: none;
}
#respira .respira__burbujas i {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, .95) 0 14%, rgba(234, 251, 251, .1) 22%, rgba(234, 251, 251, .06) 62%, rgba(240, 255, 253, .75) 74%, transparent 80%);
  opacity: 0;
}

/* rótulo del botón */
#respira .respira__boton-txt {
  position: absolute;
  left: 50%;
  bottom: -.2rem;
  transform: translate(-50%, 50%);
  padding: .6em 1.15em;
  border-radius: var(--r-pildora);
  background: rgba(2, 10, 17, .5);
  border: 1px solid rgba(234, 251, 251, .16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font: 500 var(--t-micro)/1 var(--f-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--espuma);
  opacity: 0;
  transition: opacity .6s var(--agua-ease), background-color .6s var(--agua-ease), color .6s var(--agua-ease);
}
#respira[data-estado="listo"] .respira__boton-txt,
#respira[data-estado="apnea"] .respira__boton-txt { opacity: 1; }
#respira[data-estado="listo"] .respira__boton-txt { background: var(--naranja); color: var(--abismo); border-color: transparent; }
@media (hover: hover) {
  #respira[data-estado="listo"] .respira__boton:hover .respira__halo { opacity: 1; }
}

/* ─── Lecturas de la sesión ──────────────────────────────────────────────── */
#respira .respira__lectura {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(100% - var(--res-cy) + var(--res-d) / 2 + 2.2svh);
  width: min(100% - 2 * var(--margen), 46rem);
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
#respira .respira__guia,
#respira .respira__preparado,
#respira .respira__crono {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--agua-ease), visibility 0s linear .7s;
}
#respira[data-estado="respirando"] .respira__guia,
#respira[data-estado="listo"] .respira__preparado,
#respira[data-estado="apnea"] .respira__crono {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s var(--agua-ease) .25s, visibility 0s;
}

#respira .respira__verbo {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: min(15vw, 9svh, 6.2rem);
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--espuma);
}
#respira .respira__cuenta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin-top: .55rem;
}
#respira .respira__cuenta span {
  font: 300 clamp(1.7rem, 2.4vw, 2.2rem)/1 var(--f-mono);
  color: var(--res-luz);
  font-variant-numeric: tabular-nums;
}
#respira .respira__cuenta small {
  font-size: var(--t-peque);
  color: var(--tinta-2);
}
#respira .respira__ciclos {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: .9rem;
  padding: 0;
}
#respira .respira__ciclos li {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(234, 251, 251, .22);
  transition: background-color .6s var(--agua-ease), transform .6s var(--agua-ease);
}
#respira .respira__ciclos li.es-hecho { background: rgba(107, 255, 230, .6); }
#respira .respira__ciclos li.es-actual { background: var(--res-luz); transform: scale(1.5); }

#respira .respira__preparado-txt {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .92;
  font-size: min(10vw, 7svh, 4.4rem);
}
#respira .respira__preparado-txt em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: 1.14em;
  color: var(--naranja-luz);
}

#respira .respira__tiempo {
  display: flex;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 160;
  font-size: min(30vw, 15svh, 15rem);
  line-height: .86;
  letter-spacing: 0;
  color: var(--espuma);
  text-shadow: 0 0 .35em rgba(107, 255, 230, .22);
}
#respira .respira__tiempo span { display: inline-block; width: .6em; text-align: center; }
#respira .respira__tiempo .respira__dos { width: .28em; opacity: .55; }
#respira .respira__hito {
  min-height: 3.2em;
  margin: .8rem auto 0;
  max-width: 26rem;
  font-size: var(--t-cuerpo);
  line-height: 1.5;
  color: var(--espuma-2);
}
#respira .respira__hito b {
  display: block;
  margin-bottom: .2rem;
  font: 500 var(--t-micro)/1.2 var(--f-mono);
  letter-spacing: .2em;
  color: var(--naranja-luz);
}

/* ─── Invitación: PB y botones ───────────────────────────────────────────── */
#respira .respira__invitar {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: calc(var(--res-cy) + var(--res-d) / 2 + var(--res-inv-y) * 1 + 3svh);
  width: min(100% - 2 * var(--margen), 24rem);
  transform: translateX(calc(-50% + var(--res-inv-x)));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
  transition: opacity .8s var(--agua-ease), visibility 0s linear 0s;
}
#respira .respira__pb {
  display: flex;
  align-items: center;
  gap: .6rem;
}
#respira .respira__caballito {
  width: auto;
  height: 3.6rem;
  color: #062234;
  --detalle: var(--naranja-luz);
  --brillo: #F2FFFD;
  animation: respira-flota 6s ease-in-out infinite;
}
@keyframes respira-flota { 50% { transform: translateY(-6px) rotate(3deg); } }
#respira .respira__pb p { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
#respira .respira__pb-rot {
  font: 500 var(--t-micro)/1.2 var(--f-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
#respira .respira__pb-valor {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: 2.3rem;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--tinta);
}
#respira .respira__pb-valor.es-vacio {
  padding-top: .15em;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--tinta-2);
}
#respira .respira__acciones {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .6rem;
  width: 100%;
}
#respira .respira__sonido {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .4em .2em;
  font-size: var(--t-micro);
  letter-spacing: .02em;
  color: var(--tinta-3);
  transition: color .5s var(--agua-ease);
}
#respira .respira__sonido[hidden] { display: none; }
#respira .respira__sonido[aria-pressed="true"] { color: var(--acento); }
@media (hover: hover) { #respira .respira__sonido:hover { color: var(--tinta); } }

/* ─── Pie: instrucción y "saltar" ────────────────────────────────────────── */
#respira .respira__pie {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: calc(var(--res-cy) + var(--res-d) / 2 + 4.6svh);
  width: min(100% - 2 * var(--margen), 30rem);
  transform: translateX(-50%);
  text-align: center;
  font-size: var(--t-peque);
  line-height: 1.5;
  color: var(--tinta-2);
}
#respira .respira__saltar {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: calc(var(--res-cy) + var(--res-d) / 2 + 4svh);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 44px;
  padding: 0 1.1em;
  border-radius: var(--r-pildora);
  font-size: var(--t-peque);
  color: var(--tinta-2);
  transition: color .5s var(--agua-ease), opacity .7s var(--agua-ease), visibility 0s linear .7s;
}
@media (hover: hover) { #respira .respira__saltar:hover { color: var(--tinta); } }

/* ─── Resultado ──────────────────────────────────────────────────────────── */
#respira .respira__resultado {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  padding: calc(var(--nav-alto) + 1rem) var(--margen) max(9svh, 5.5rem);
  text-align: center;
}
#respira .respira__res-tiempo {
  margin-top: .4rem;
  font-family: var(--f-display);
  font-weight: 160;
  font-size: min(27vw, 16svh, 11rem);
  line-height: .9;
  font-variant-numeric: tabular-nums;
  color: var(--espuma);
  text-shadow: 0 0 .4em rgba(107, 255, 230, .25);
}
#respira .respira__res-pincel {
  margin-top: .2rem;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: min(8vw, 2.4rem);
  line-height: 1.1;
  color: var(--tinta-2);
}
#respira .respira__hueco { --pincel-tam: 1.7em; display: inline-block; min-width: 3.6em; text-align: left; }
#respira .respira__hueco > span { font-style: normal; }
#respira .respira__frase {
  max-width: 30rem;
  margin-top: .7rem;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--tinta);
  text-wrap: balance;
}
#respira .respira__res-pb {
  margin-top: .8rem;
  font: 500 var(--t-micro)/1.3 var(--f-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
#respira .respira__res-pb.es-nuevo { color: var(--naranja-luz); }
#respira .respira__res-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-top: 1.5rem;
}

/* ─── Visibilidad por estado ─────────────────────────────────────────────── */
#respira .respira__cabecera,
#respira .respira__pie,
#respira .respira__saltar,
#respira .respira__resultado {
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--agua-ease), visibility 0s linear .7s;
}
#respira.es-sesion .respira__cabecera,
#respira[data-estado="listo"] .respira__pie,
#respira[data-estado="apnea"] .respira__pie,
#respira[data-estado="respirando"] .respira__saltar,
#respira[data-estado="resultado"] .respira__resultado {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s var(--agua-ease) .3s, visibility 0s;
}
#respira[data-estado="apnea"] .respira__pie { opacity: .55; }
#respira.es-sesion .respira__intro,
#respira.es-sesion .respira__invitar {
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--agua-ease), visibility 0s linear .6s;
}
#respira.es-sesion { --res-x: 0px; --res-y: 0px; --res-s: 1; }
#respira.es-sesion .respira__escenario { touch-action: none; }
#respira[data-estado="resultado"] { --res-s: .9; }
#respira[data-estado="resultado"] .respira__nucleo { opacity: .16; }
#respira[data-estado="apnea"] .respira__escenario,
#respira[data-estado="apnea"] .respira__escenario * { user-select: none; -webkit-user-select: none; }

/* sin JS no hay juego, solo el texto */
html.sin-js #respira .respira__escenario { height: auto; padding-bottom: var(--esp-4); }
html.sin-js #respira .respira__escenario > :not(.respira__fondo):not(noscript) { display: none; }
#respira .respira__sin-js { position: relative; z-index: 4; padding: 4rem var(--margen); text-align: center; color: var(--tinta-2); }

/* ─── Escritorio: una sola pantalla, texto a la izquierda y medusa a la derecha ── */
@media (min-width: 900px) and (orientation: landscape) {
  #respira {
    --res-h: max(100svh, 40rem);
    --res-d: min(48svh, 27vw, 27rem);
    --res-cy: 42%;
    --res-inv-x: min(23vw, 22rem);
    --res-inv-y: calc(var(--res-h) * 0.035);
    --res-s: 1;
    min-height: var(--res-h);
    padding-top: 0;
  }
  #respira .respira__intro {
    min-height: var(--res-h);
    display: flex;
    align-items: center;
    padding: calc(var(--nav-alto) + 2svh) 0 6svh;
  }
  #respira .respira__texto { max-width: min(35rem, 41vw); }
  #respira .respira__escenario { position: absolute; inset: 0 0 auto 0; }
  #respira .respira__fondo { height: 78%; }
  #respira .respira__lectura {
    bottom: auto;
    top: calc(var(--res-cy) + var(--res-d) / 2 + 3.4svh);
  }
  #respira .respira__guia,
  #respira .respira__preparado,
  #respira .respira__crono { bottom: auto; top: 0; }
  #respira .respira__tiempo { font-size: min(13vw, 21svh, 14rem); }
  #respira .respira__hito { margin-top: .5rem; min-height: 2.6em; }
  #respira .respira__pie,
  #respira .respira__saltar { top: auto; bottom: max(3.4svh, 1.25rem); }
  #respira .respira__invitar { width: 24rem; }
  #respira .respira__acciones { flex-direction: row; justify-content: center; align-items: center; }
  #respira .respira__acciones .btn--grande { padding-inline: 1.6em; }
  #respira .respira__alga--1 { height: 40%; }
  #respira .respira__alga--3 { height: 30%; right: 9%; }
  #respira .respira__alga--4 { right: 15%; }
}

/* pantallas bajas en escritorio: menos aire */
@media (min-width: 900px) and (orientation: landscape) and (max-height: 760px) {
  #respira .respira__titulo { font-size: min(6vw, 11svh); }
  #respira .respira__bajada { margin-top: var(--esp-2); }
  #respira .respira__aviso, #respira .respira__pasos { margin-top: var(--esp-2); }
}

/* ─── Móvil ──────────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  #respira .respira__aviso { padding: .95rem 1rem 1rem .9rem; gap: .75rem; }
  #respira .respira__pasos { flex-direction: column; }
  #respira .respira__alga--1 { height: 26%; }
  #respira .respira__alga--3 { height: 20%; }
  #respira .respira__alga--2, #respira .respira__alga--4 { height: 9%; }
  #respira .respira__res-acciones { flex-direction: column; align-items: stretch; width: min(100%, 22rem); }
  #respira .respira__pb-valor { font-size: 2rem; }
}

/* ─── Movimiento reducido ────────────────────────────────────────────────── */
html.es-reducido #respira .respira__caballito { animation: none; }
html.es-reducido #respira .respira__nucleo { transition: none; }