/* ============================================================
   combina — bloque 6 (Apuestas deportivas y casino, todo en una)
   Anatomy unlike siblings: díptico. Dos alas —Deportiva / Casino—
   separadas por una costura central, y un puente abajo que las une
   con el remate del PDF. Una sola imagen (casino); el ala deportiva
   es tipográfica (asimetría a propósito).
   Animación propia: la costura central se traza y las dos alas se
   revelan DESDE EL CENTRO hacia afuera (se despliega en una).
   ============================================================ */

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

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

.combina__diptico {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(1.4rem, 4vw, 3.4rem);
  align-items: stretch;
}
.combina__costura {
  width: 1px;
  background: linear-gradient(var(--esmeralda), var(--oro-tenue), transparent);
}

.ala { display: flex; flex-direction: column; gap: 1.1rem; }
.ala--casino { gap: 1.4rem; }
.ala__rotulo {
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--oro);
  border: 1px solid var(--oro-tenue);
  border-radius: 999px;
  padding: .4em 1em;
}
.ala--casino .ala__rotulo { color: var(--esmeralda-viva); border-color: rgba(40,224,140,.4); }
.ala__texto {
  color: var(--marfil-medio);
  font-size: var(--t-cuerpo);
  line-height: 1.62;
}
.ala--deporte .ala__texto { font-size: var(--t-guia); color: var(--marfil); }
.ala__foto {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-mesa);
}
.ala__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* puente — remate que une ambas alas */
.combina__puente {
  margin-top: var(--aire-m);
  padding-top: var(--aire-m);
  border-top: 1px solid var(--linde-suave);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--aire-s);
}
.combina__remate {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-h3);
  line-height: 1.3;
  color: var(--marfil);
  max-width: 40ch;
}

@media (max-width: 820px) {
  .combina__diptico { grid-template-columns: 1fr; }
  .combina__costura { display: none; }
}

/* — animación propia: se despliega desde el centro — */
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .combina__intro  { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
  .combina__costura { transform: scaleY(0); transform-origin: top; transition: transform .6s ease; }
  .ala--deporte    { clip-path: inset(0 0 0 100%); transition: clip-path .7s cubic-bezier(.6,0,.2,1) .3s; }
  .ala--casino     { clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.6,0,.2,1) .3s; }
  .combina__puente { opacity: 0; transform: translateY(14px); transition: opacity .6s ease .55s, transform .6s ease .55s; }

  .combina.en-vista .combina__intro  { opacity: 1; transform: none; }
  .combina.en-vista .combina__costura { transform: scaleY(1); }
  .combina.en-vista .ala--deporte,
  .combina.en-vista .ala--casino     { clip-path: inset(0 0 0 0); }
  .combina.en-vista .combina__puente { opacity: 1; transform: none; }
}