* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --tinta: #111;
  --fondo: #fff;
  --sol: #ffe600;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  overflow-x: hidden;
}

button {
  font-family: inherit;
}

.portal {
  text-align: center;
  padding: 2rem 1rem;
}

.t1,
.t3,
.t4 {
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.t1 {
  font-size: clamp(3rem, 12vw, 9rem);
}

.t2 {
  font-size: clamp(1rem, 3vw, 1.8rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.6em;
  margin: 1.2rem 0;
}

.t3 {
  font-size: clamp(2.2rem, 9vw, 6.5rem);
}

.t4 {
  font-size: clamp(3rem, 13vw, 10rem);
}

.t5 {
  margin-top: 2.2rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.flecha {
  font-size: clamp(1.4rem, 4vw, 2.6rem);
}

.please {
  font-size: clamp(1.3rem, 4.5vw, 2.8rem);
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.35em 1em;
  background: var(--sol);
  border: 4px solid var(--tinta);
  box-shadow: 8px 8px 0 var(--tinta);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.please:hover:not(:disabled) {
  transform: translate(-3px, -3px) rotate(-2deg);
  box-shadow: 12px 12px 0 var(--tinta);
}

.please:active:not(:disabled) {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 var(--tinta);
}

.please:disabled {
  cursor: wait;
  animation: temblor 0.25s infinite;
}

@keyframes temblor {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px) rotate(-1deg); }
  75% { transform: translate(2px, -1px) rotate(1deg); }
}

.pie {
  margin-top: 3rem;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.8;
}

.casa {
  position: fixed;
  top: 1.2rem;
  left: 1.2rem;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--tinta);
  border-bottom: 3px solid var(--sol);
  z-index: 100;
}

.casa:hover {
  background: var(--sol);
}

.otra {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.55em 1em;
  background: var(--sol);
  border: 3px solid var(--tinta);
  box-shadow: 5px 5px 0 var(--tinta);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 100;
}

.otra:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--tinta);
}

.escena {
  text-align: center;
  padding: 2rem 1rem;
  display: grid;
  justify-items: center;
  gap: 1.8rem;
}

.titulo {
  font-size: 0.8rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #666;
}

.grande {
  font-size: clamp(4rem, 18vw, 12rem);
  font-weight: 800;
  line-height: 1;
}

.clicable {
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s ease;
}

.clicable:active {
  transform: scale(0.94);
}

.estado {
  font-size: 1rem;
  color: #555;
  max-width: 26rem;
}

.barra {
  width: min(70vw, 420px);
  height: 28px;
  border: 3px solid var(--tinta);
  background: var(--fondo);
}

.relleno {
  height: 100%;
  width: 0%;
  background: var(--sol);
}

.puntos span {
  display: inline-block;
  animation: latido 1.2s infinite;
}

.puntos span:nth-child(2) {
  animation-delay: 0.2s;
}

.puntos span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes latido {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}

.momento {
  --tinta: #272822;
  --fondo: #f4f1e9;
  --acento: #ed583b;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 0 clamp(1.25rem, 5vw, 5rem);
}

.cabecera,
.despedida {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cabecera {
  padding: 2rem 0;
  border-bottom: 1px solid #d9d6ce;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.05em;
}

.marca-punto {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--acento);
}

.edicion,
.sobretitulo,
.intentos,
.despedida {
  font-family: "Courier New", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
}

.edicion,
.despedida {
  color: #69695f;
}

.experimento {
  width: 100%;
  max-width: 960px;
  margin: auto;
  padding: 0;
  text-align: center;
}

.sobretitulo {
  margin-bottom: 1.5rem;
  letter-spacing: 0.16em;
  color: #68695f;
}

.experimento h1 {
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 1.03;
}

.experimento h1 em {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--acento);
  letter-spacing: -0.055em;
}

.introduccion {
  margin-top: 1.25rem;
  color: #69695f;
  font-size: 0.9rem;
  line-height: 1.5;
}

.patio {
  position: relative;
  height: clamp(210px, 30vh, 300px);
  margin: 0 auto;
  width: min(100%, 640px);
}

.timido {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  height: 62px;
  padding: 0 1.5rem;
  border: 4px solid var(--tinta);
  border-radius: 0;
  color: var(--tinta);
  background: var(--sol);
  box-shadow: 6px 6px 0 var(--tinta);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  cursor: pointer;
  touch-action: manipulation;
  transition: left 180ms ease-out, top 180ms ease-out, box-shadow 120ms ease, transform 120ms ease;
  white-space: nowrap;
}

.timido:hover {
  box-shadow: 9px 9px 0 var(--tinta);
}

.timido:active {
  box-shadow: 2px 2px 0 var(--tinta);
  transform: translate(-50%, -50%) translate(3px, 3px);
}

.momento :focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 7px;
}

.cambiar {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
}

.siguiente {
  min-width: 64px;
  min-height: 44px;
  padding: 0.5rem;
  border: 0;
  background: transparent;
  color: #64655b;
  font-size: 0.85rem;
  cursor: pointer;
}

.siguiente:hover {
  color: var(--tinta);
}

.anotacion {
  position: absolute;
  left: calc(50% - 160px);
  top: calc(50% - 80px);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  font-style: italic;
  color: #75766a;
  transform: rotate(-9deg);
  transition: opacity 180ms ease;
  pointer-events: none;
}

.patio.en-marcha .anotacion {
  opacity: 0;
}

.resultado {
  min-height: 4.5rem;
}

.resultado > p:first-child {
  color: #55564d;
  font-size: 0.875rem;
  line-height: 1.5;
}

.intentos {
  margin-top: 0.8rem;
  color: #737468;
}

.reiniciar {
  min-height: 44px;
  padding: 0.5rem;
  border: 0;
  background: transparent;
  color: #64655b;
  font-size: 0.75rem;
  text-decoration: underline;
  text-decoration-color: #b6b6a9;
  text-underline-offset: 4px;
  cursor: pointer;
}

.reiniciar:hover {
  color: var(--tinta);
}

.despedida {
  padding: 1.5rem 0;
  border-top: 1px solid #d9d6ce;
  line-height: 1.5;
}

/* ==========================================================================
   ESTILOS COMPARTIDOS Y SUB-ESTADOS
   ========================================================================== */
.sub-estado {
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
  color: #666;
  letter-spacing: 0.03em;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: inline-block;
  margin-top: 0.4rem;
}

/* ==========================================================================
   1. EL INTERRUPTOR IMPOSIBLE (BLOQUE ISOMÉTRICO CON GATO Y TOGGLE SWITCH)
   ========================================================================== */
/* ==========================================================================
   1. EL INTERRUPTOR IMPOSIBLE (TECLA BASCULANTE DE DOS POSICIONES Y GATO)
   ========================================================================== */
.mesa-escenario {
  position: relative;
  width: min(94vw, 620px);
  max-width: 620px;
  margin: 1.5rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mesa-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  user-select: none;
}

/* Vibración cómica de la mesa al apagarse de golpe */
#mesa-grupo.sacudida {
  animation: temblor-mesa-svg 0.18s ease;
}

@keyframes temblor-mesa-svg {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 2px); }
  75% { transform: translate(3px, -2px); }
}

/* La Tecla Basculante (Rocker Switch) */
.switch-tecla-grupo {
  cursor: pointer;
  outline: none;
}

.switch-tecla-grupo:hover .rocker-estado-off polygon {
  filter: brightness(1.03);
}

/* Control visual de los dos estados de la tecla basculante: OFF vs ON */
.rocker-estado-off {
  display: block;
}

.rocker-estado-on {
  display: none;
}

/* Cuando el usuario pulsa la tecla (cambio instantáneo de posición a ON) */
.switch-tecla-grupo.pulsado .rocker-estado-off {
  display: none;
}

.switch-tecla-grupo.pulsado .rocker-estado-on {
  display: block;
  animation: snap-tecla 0.12s ease-out;
}

@keyframes snap-tecla {
  0% { transform: scale(0.98); }
  50% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

/* La Capa del Gato (Renderizada SIEMPRE por encima de la mesa) */
.gato-capa {
  pointer-events: none;
}

.brazo-gato {
  transform-origin: 110px 10px;
  transform: translate(-150px, -130px) rotate(-14deg) scale(0.7);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

/* Fase 1: La patita asoma sigilosamente desde arriba de la mesa */
.brazo-gato.asomando {
  opacity: 1;
  transform: translate(-45px, -35px) rotate(-6deg) scale(0.9);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

/* Fase 2: La patita baja decidida sobre la mesa y presiona la tecla hacia abajo */
.brazo-gato.atacando {
  opacity: 1;
  transform: translate(0px, 0px) rotate(0deg) scale(1);
  transition: transform 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.25), opacity 0.18s ease;
}

/* Sombra proyectada por la patita sobre la superficie de madera */
.sombra-pata {
  opacity: 0;
  transform-origin: 320px 165px;
  transform: scale(0.4) translate(-70px, -60px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.brazo-gato.asomando .sombra-pata {
  opacity: 0.3;
  transform: scale(0.8) translate(-22px, -18px);
}

.brazo-gato.atacando .sombra-pata {
  opacity: 0.75;
  transform: scale(1) translate(0, 0);
}

/* ==========================================================================
   2. PLÁSTICO DE BURBUJAS INFINITO
   ========================================================================== */
.hoja-burbujas-envoltura {
  width: min(92vw, 440px);
  margin: 1.2rem auto;
  padding: 1.2rem;
  background: #fbfbf9;
  border: 4px solid var(--tinta);
  box-shadow: 8px 8px 0 var(--tinta);
  border-radius: 14px;
}

.hoja-burbujas {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  touch-action: none;
}

.burbuja {
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  user-select: none;
  touch-action: none;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e2f0fb 50%, #c4e1f7 100%);
  border: 2px solid var(--tinta);
  box-shadow: 3px 3px 0 var(--tinta);
  transition: transform 0.08s ease, background 0.12s ease;
}

.burbuja:hover.inflada {
  transform: scale(1.06);
}

.burbuja.explotada {
  background: #ebe7dd;
  border: 2px dashed #999;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
  transform: scale(0.92);
  cursor: default;
}

.burbuja-brillo {
  position: absolute;
  top: 18%;
  left: 22%;
  width: 25%;
  height: 25%;
  background: #ffffff;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

.burbuja.explotada .burbuja-brillo {
  opacity: 0;
}

.burbuja.rebotando {
  animation: rebote-inflar 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes rebote-inflar {
  0% { transform: scale(0.2); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.panel-burbujas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

.boton-inflar {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.5em 1.2em;
  background: var(--sol);
  border: 3px solid var(--tinta);
  box-shadow: 4px 4px 0 var(--tinta);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.boton-inflar:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--tinta);
}

.boton-inflar:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--tinta);
}

/* ==========================================================================
   3. EL VENTILADOR VIRTUAL
   ========================================================================== */
.ventilador-montura {
  position: relative;
  width: 320px;
  margin: 1.2rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ventilador-cabeza {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 4px solid var(--tinta);
  background: #f7f6f0;
  box-shadow: 6px 6px 0 var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
  z-index: 2;
}

.ventilador-cabeza.oscilando {
  animation: oscilacion-ventilador 4.5s ease-in-out infinite alternate;
}

.ventilador-cabeza.vibrando-turbo {
  animation: oscilacion-ventilador 4.5s ease-in-out infinite alternate, turbo-vibrar 0.08s infinite !important;
}

@keyframes oscilacion-ventilador {
  0% { transform: rotateY(-24deg) rotate(-4deg); }
  100% { transform: rotateY(24deg) rotate(4deg); }
}

@keyframes turbo-vibrar {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-2px, 2px); }
}

.rejilla-delantera {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aro-grill {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.25);
}

.aro-grill.a1 { width: 226px; height: 226px; }
.aro-grill.a2 { width: 170px; height: 170px; }
.aro-grill.a3 { width: 116px; height: 116px; }
.aro-grill.a4 { width: 62px; height: 62px; }

.rayo-grill {
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
}

.rayo-grill.r1 { width: 100%; height: 2px; }
.rayo-grill.r2 { width: 2px; height: 100%; }

.aspas {
  position: relative;
  width: 210px;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aspa {
  position: absolute;
  width: 44px;
  height: 100px;
  background: #333;
  border: 2px solid var(--tinta);
  border-radius: 50% 50% 15% 15%;
  top: 10px;
  transform-origin: center 95px;
}

.aspa-1 { transform: rotate(0deg); }
.aspa-2 { transform: rotate(120deg); }
.aspa-3 { transform: rotate(240deg); }

.tapa-centro {
  position: absolute;
  width: 52px;
  height: 52px;
  background: var(--sol);
  border: 3px solid var(--tinta);
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 5;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

.tapa-centro::after {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--tinta);
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.cintas-viento {
  position: absolute;
  right: -25px;
  top: 40%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cinta {
  display: block;
  width: 40px;
  height: 4px;
  background: #4a90e2;
  border-radius: 2px;
  animation: flamear 0.25s infinite alternate ease-in-out;
}

.cinta.c2 {
  width: 55px;
  animation-delay: 0.1s;
}

@keyframes flamear {
  from { transform: scaleX(0.8) skewY(-8deg); }
  to { transform: scaleX(1.3) skewY(8deg); }
}

.ventilador-soporte {
  width: 18px;
  height: 54px;
  background: var(--tinta);
  margin-top: -6px;
  z-index: 1;
}

.ventilador-base {
  position: relative;
  background: #faf7ee;
  border: 4px solid var(--tinta);
  box-shadow: 6px 6px 0 var(--tinta);
  border-radius: 12px;
  padding: 0.85rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.botones-velocidad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-ctrl,
.btn-vel {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  min-width: 38px;
  height: 38px;
  padding: 0 0.5rem;
  background: #fff;
  border: 2px solid var(--tinta);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.1s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.btn-ctrl:hover,
.btn-vel:hover {
  background: #eee;
}

.btn-ctrl.activo,
.btn-vel.activo {
  background: var(--sol);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-ctrl.apagado {
  background: #f0ede6;
  color: #999;
  border-color: #aaa;
  box-shadow: none;
}

.btn-vel.btn-turbo.activo {
  background: #ff5233;
  color: #fff;
}

/* ==========================================================================
   4. LOS OJOS FISGONES
   ========================================================================== */
.cara-ojos {
  position: relative;
  margin: 1.5rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.par-ojos {
  display: flex;
  gap: clamp(1rem, 4vw, 2.5rem);
  align-items: center;
  justify-content: center;
}

.ojo {
  position: relative;
  width: clamp(110px, 24vw, 160px);
  height: clamp(110px, 24vw, 160px);
  background: #ffffff;
  border: 4px solid var(--tinta);
  border-radius: 50%;
  box-shadow: 8px 8px 0 var(--tinta);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ojo:hover {
  transform: scale(1.04);
}

.ojo.aplastado {
  transform: scale(1.15, 0.25) !important;
}

.esclerotica {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pupila {
  position: relative;
  width: clamp(48px, 10vw, 68px);
  height: clamp(48px, 10vw, 68px);
  background: #111111;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brillo-pupila {
  position: absolute;
  top: 18%;
  right: 22%;
  width: 28%;
  height: 28%;
  background: #ffffff;
  border-radius: 50%;
}

.parpado {
  position: absolute;
  left: 0;
  right: 0;
  background: #faf7ee;
  border: 3px solid var(--tinta);
  z-index: 10;
  transition: transform 0.3s ease;
  pointer-events: none;
}

.parpado-superior {
  top: 0;
  height: 52%;
  border-top: none;
  transform: translateY(-102%);
}

.parpado-inferior {
  bottom: 0;
  height: 52%;
  border-bottom: none;
  transform: translateY(102%);
}

.cara-ojos.durmiendo .parpado-superior {
  transform: translateY(-8%);
}

.cara-ojos.durmiendo .parpado-inferior {
  transform: translateY(8%);
}

.estrellas-mareo {
  position: absolute;
  top: -45px;
  font-size: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform: scale(0.5);
}

.estrellas-mareo.activo {
  opacity: 1;
  transform: scale(1.2);
  animation: girar-estrellas 2s linear infinite;
}

@keyframes girar-estrellas {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.particulas-zzz {
  position: absolute;
  top: -30px;
  right: 15%;
  font-family: "Courier New", monospace;
  font-size: 1.5rem;
  font-weight: 800;
  color: #666;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.particulas-zzz.activo {
  opacity: 1;
  animation: flotar-zzz 1.8s infinite ease-out;
}

@keyframes flotar-zzz {
  0% { transform: translate(0, 0) scale(0.8); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translate(25px, -35px) scale(1.3); opacity: 0; }
}

@media (max-width: 480px) {
  .cabecera {
    padding: 1.25rem 0;
  }

  .edicion {
    font-size: 0.6rem;
  }

  .experimento {
    padding-top: 0;
  }

  .sobretitulo {
    font-size: 0.6rem;
  }

  .anotacion {
    left: calc(50% - 125px);
  }

  .despedida {
    font-size: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}