/* ============================================================
   oferta — bloque 4 (Qué ofrece la aplicación)
   Anatomy unlike siblings: la tabla del PDF NO es una caja —
   es un "registro" editorial de funciones, filas regladas a hilo,
   con índice romano en oro. A un lado, un visual de casino. La
   nota de proveedores cierra abajo (realce en versalitas, distinto
   del subrayado del bloque 2).
   Animación propia: cada hilo de fila se traza de izquierda a
   derecha y la línea se "escribe" de arriba hacia abajo, como un
   libro de registro.
   ============================================================ */

.oferta { padding-block: var(--aire-l); }

.oferta__cabecera { margin-bottom: var(--aire-m); }
.oferta__cabecera .folio { margin-bottom: var(--aire-s); }
.oferta__titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--marfil);
  margin-bottom: var(--aire-s);
}
.oferta__lead {
  color: var(--marfil-medio);
  font-size: var(--t-guia);
  line-height: 1.5;
  max-width: 52ch;
}

.oferta__cuerpo {
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: start;
}

/* — registro de funciones — */
.registro__cab {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(1rem, 3vw, 2.6rem);
  padding-bottom: .8rem;
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--oro);
}
.registro__fila {
  position: relative;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(1rem, 3vw, 2.6rem);
  align-items: baseline;
  padding: clamp(1rem, 2vw, 1.5rem) 0;
}
.registro__fila::before {                 /* hilo superior — se traza */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--linde);
}
.registro__funcion {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.1;
  color: var(--marfil);
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.registro__ord {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--oro);
  text-transform: uppercase;
}
.registro__desc {
  color: var(--marfil-medio);
  font-size: var(--t-cuerpo);
  line-height: 1.5;
}

.oferta__cta { margin-top: var(--aire-m); }

/* — visual de casino — */
.oferta__visual {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-mesa);
}
.oferta__visual img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.oferta__visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(6,19,12,.7), transparent);
}

/* — nota de proveedores — versalitas en marfil, sin subrayado — */
.oferta__nota {
  margin-top: var(--aire-m);
  padding-top: var(--aire-s);
  border-top: 1px solid var(--linde-suave);
  color: var(--marfil-tenue);
  font-size: var(--t-micro);
  line-height: 1.6;
  max-width: 86ch;
}
.prov {
  color: var(--marfil);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: .02em;
}

@media (max-width: 820px) {
  .oferta__cuerpo { grid-template-columns: 1fr; }
  .oferta__visual { order: -1; }
  .oferta__visual img { aspect-ratio: 16 / 10; }
}

/* — animación propia: registro que se escribe línea a línea — */
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .oferta__cabecera { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
  .oferta__visual   { opacity: 0; transform: scale(.97); transition: opacity .7s ease .15s, transform .7s ease .15s; }
  .registro__cab    { opacity: 0; transition: opacity .5s ease .2s; }
  .registro__fila   { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
  .registro__fila::before { transform: scaleX(0); transform-origin: left; transition: transform .55s ease; }
  .registro__fila:nth-of-type(1) { transition-delay: .25s; }
  .registro__fila:nth-of-type(1)::before { transition-delay: .25s; }
  .registro__fila:nth-of-type(2) { transition-delay: .37s; }
  .registro__fila:nth-of-type(2)::before { transition-delay: .37s; }
  .registro__fila:nth-of-type(3) { transition-delay: .49s; }
  .registro__fila:nth-of-type(3)::before { transition-delay: .49s; }
  .registro__fila:nth-of-type(4) { transition-delay: .61s; }
  .registro__fila:nth-of-type(4)::before { transition-delay: .61s; }
  .registro__fila:nth-of-type(5) { transition-delay: .73s; }
  .registro__fila:nth-of-type(5)::before { transition-delay: .73s; }

  .oferta.en-vista .oferta__cabecera,
  .oferta.en-vista .registro__cab,
  .oferta.en-vista .registro__fila { opacity: 1; transform: none; }
  .oferta.en-vista .oferta__visual { opacity: 1; transform: none; }
  .oferta.en-vista .registro__fila::before { transform: scaleX(1); }
}