/* ============================================================
   rendimiento — bloque 8 (Rendimiento y actualizaciones)
   Anatomy unlike siblings: banda técnica en tono más hondo. Texto
   de desarrollo a un lado, galería de dispositivos al otro, y un
   aviso de actualización abajo a todo el ancho. Un "medidor" bajo
   el título marca el tema (rendimiento).
   Animación propia: la barra del medidor SE LLENA de izq. a der.,
   la galería hace un leve zoom-asiento y el aviso sube.
   ============================================================ */

.rendimiento {
  padding-block: var(--aire-l);
  background: linear-gradient(180deg, rgba(16,51,31,.35), transparent 70%);
  border-block: 1px solid var(--linde-suave);
}

.rendimiento__reja {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: center;
}

.rendimiento__decir .folio { margin-bottom: var(--aire-s); }
.rendimiento__titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--marfil);
}

/* medidor — firma del bloque */
.medidor {
  margin: var(--aire-s) 0 var(--aire-m);
  display: flex;
  align-items: center;
  gap: .8rem;
}
.medidor__rotulo {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro);
  white-space: nowrap;
}
.medidor__pista {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--fieltro-alto);
  overflow: hidden;
}
.medidor__relleno {
  display: block;
  height: 100%;
  width: 92%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--esmeralda-honda), var(--esmeralda-viva));
  box-shadow: 0 0 12px -2px var(--esmeralda);
}

.rendimiento__texto {
  color: var(--marfil-medio);
  font-size: var(--t-cuerpo);
  line-height: 1.62;
  max-width: 46ch;
}

/* galería de dispositivos */
.rendimiento__vista {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-mesa);
}
.rendimiento__vista img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* aviso de actualizaciones — a todo el ancho, abajo */
.rendimiento__aviso {
  margin-top: var(--aire-m);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aire-s);
  padding: var(--aire-s) clamp(1rem, 2.5vw, 1.8rem);
  background: var(--fieltro-alto);
  border: 1px solid var(--linde);
  border-radius: var(--radio);
}
.rendimiento__aviso-txt {
  flex: 1 1 28rem;
  color: var(--marfil-medio);
  font-size: var(--t-micro);
  line-height: 1.55;
}
.rendimiento__aviso-icono {
  flex: none;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--oro-tenue);
  color: var(--oro);
  font-size: 1.2rem;
}

@media (max-width: 860px) {
  .rendimiento__reja { grid-template-columns: 1fr; gap: var(--aire-m); }
  .rendimiento__vista { order: -1; }
  .rendimiento__texto { max-width: none; }
}

/* — animación propia: el medidor se llena — */
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .rendimiento__decir { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
  .rendimiento__vista img { transform: scale(1.08); transition: transform 1s ease; }
  .rendimiento__vista { opacity: 0; transition: opacity .7s ease .1s; }
  .medidor__relleno { width: 0; transition: width 1.1s cubic-bezier(.4,0,.1,1) .35s; }
  .rendimiento__aviso { opacity: 0; transform: translateY(14px); transition: opacity .6s ease .4s, transform .6s ease .4s; }

  .rendimiento.en-vista .rendimiento__decir { opacity: 1; transform: none; }
  .rendimiento.en-vista .rendimiento__vista { opacity: 1; }
  .rendimiento.en-vista .rendimiento__vista img { transform: scale(1); }
  .rendimiento.en-vista .medidor__relleno { width: 92%; }
  .rendimiento.en-vista .rendimiento__aviso { opacity: 1; transform: none; }
}