body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
      min-width: 100vw;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url("https://aula.clasesdequimica.online/img/pizarra2.png");
      color: #fff;
      text-align: center;
      font-family: 'EraserDust', Arial, Helvetica, sans-serif;
    }

    /* ==== TÍTULO ==== */
    .tiza1-titulo {
      text-align: center;
      margin: 0;
      line-height: 0.6;
      margin-top: 30vh;
      animation: tiza1-subir 2s ease-in-out 2.5s forwards;
    }

    @keyframes tiza1-subir {
      from { margin-top: 30vh; }
      to   { margin-top: 2rem; }
    }

    .tiza1-titulo .ecuaciones {
      font-size: 1.5em;
      display: block;
    }

    .tiza1-titulo .redox {
      font-family: 'FFFT';
      font-size: 2em;
      display: block;
    }

    /* ==== COMPUESTOS ==== */
    p.compuesto {
      font-size: 2em;
      margin: 3.5em 0;
      cursor: pointer;
      letter-spacing: -0.45em;
      transition: letter-spacing 0.8s ease, transform 0.4s ease;
      display: inline-block;
    }

    p.compuesto.nox-visible {
      letter-spacing: 0.25em;
      transform: scale(1.03);
    }

    
    /* ==== WRAPPER INLINE PARA TERMINOS ==== */
    .reactivo, .producto{
      display: inline-block;
      vertical-align: baseline;
    }

    /* ==== UNIDAD SEMÁNTICA ==== */
    .par {
      display: inline-flex;
      align-items: baseline;
    }

    .elemento {
      display: inline-block;
      letter-spacing: 0.05em;
      vertical-align: baseline;
    }

    .valencia {
      position: relative;
      font-size: 0.7em;
      vertical-align: super;
      line-height: 1.2;
      display: inline-block;
      width: 1.2em;
      margin-left: -1em;
    }

    .compuesto.nox-visible .valencia {
      margin-left: 0.28em;
      margin-right: -1.2em;
    }


    .valencia sup {
      color: yellow;
      position: absolute;
      top: -2.5em;
      left: -1.2em;
      opacity: 0;
      transition: opacity 0.6s ease;
    }

    .compuesto.nox-visible .valencia sup {
      opacity: 1;
    }

    .compuesto.nox-visible .subindice {
      position: absolute;
      top: -0.5em;
      left: -0.7em;
    }


    .subindice {
    
      position: absolute;
      top: -0.5em;
      left: 0.9em;

    }

    .coeficiente {
      margin-left: 10px;
      margin-right: 2px;
      font-size: 2.5em;
      display: inline-block;
    }

    .separador {
      margin-left: 10px;
      margin-right: 3px;
      font-size: 3em;
      display: inline-block;
    }

    .flecha {
      display: inline-block;
      width: 11%;
      margin: 0 15px;
      vertical-align: middle;
      transform: translateY(-4px);
    }

    @font-face {
      font-family: 'EraserDust';
      src: url("/fonts/EraserDust.woff2") format('woff2'),
           url("/fonts/EraserDust.woff") format('woff'),
           url("/fonts/EraserDust.ttf") format('truetype');
    }

    @font-face {
      font-family: 'FFFT';
      src: url("/fonts/FFFTusj-Bold.woff2") format('woff2'),
           url("/fonts/FFFTusj-Bold.woff") format('woff'),
           url("/fonts/FFFTusj-Bold.ttf") format('truetype');
    }
  
/* ==== TÍTULO ANIMADO REDOX ==== */
.tiza1-wrapper {
  margin-top: 30vh;
  text-align: center;
  animation: tiza1-subir 2s ease-in-out 2.5s forwards;
}

@keyframes tiza1-subir {
  from { margin-top: 30vh; }
  to   { margin-top: 2rem; }
}

.tiza1-efecto-latido {
  display: inline-block;
  transform-origin: center center;
  animation: tiza1-latido 2s ease-in-out 1;
}

@keyframes tiza1-latido {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.2); }
  50%  { transform: scale(1); }
  75%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}


/* ==== REACTIVO / PRODUCTO (coeficiente incluido) ==== */
.reactivo, .producto{
  display: inline-block;   /* permite que los DIV queden uno al lado del otro */
  vertical-align: baseline;
  white-space: nowrap;     /* evita que se parta adentro */
}

/* Coeficiente: oculto si es 1, visible si es >1 */
.reactivo[data-coef="1"] .coeficiente,
.producto[data-coef="1"] .coeficiente{
  display: none;
}
.coeficiente{
  display: inline-block;
}