/* Portada: boletos del hero y tarjetas grandes de cada taller. */

/* Boletos */
.tickets { display: grid; gap: 18px; }
.ticket { display: grid; grid-template-columns: 96px 1fr; background: #fff; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; box-shadow: 8px 8px 0 var(--blue); transition: transform .2s; text-decoration: none; }
.ticket:nth-child(2) { margin-left: 40px; box-shadow: 8px 8px 0 var(--blue-deep); }
.ticket:hover { transform: translate(-2px, -2px); }
.stub { background: var(--grad); color: #fff; display: grid; place-content: center; text-align: center; border-right: 1.5px dashed rgba(255, 255, 255, .6); padding: 14px 6px; }
.ticket:nth-child(2) .stub { background: var(--blue-deep); }
.stub b { font-family: var(--cond); font-stretch: 72%; font-weight: 800; font-size: 52px; line-height: .9; display: block; }
.stub span { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.ticket .info { display: block; padding: 18px 20px; }
.ticket .kind { display: block; font-size: 11px; }
.t-title { display: block; font-size: 30px; margin: 6px 0 10px; }
.ticket .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ticket .row b { font-family: var(--cond); font-stretch: 80%; font-weight: 800; font-size: 26px; color: var(--ink); }

/* Tarjeta de taller */
.taller { display: grid; grid-template-columns: .9fr 1.1fr; border: 1.5px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.taller + .taller { margin-top: 28px; }
.taller.alt { grid-template-columns: 1.1fr .9fr; }
.taller.alt .visual { order: 2; border-left: 1.5px solid var(--ink); border-right: 0; }
.visual { min-height: 420px; border-right: 1.5px solid var(--ink); }
.taller .body { padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.taller h3 { font-size: clamp(36px, 4vw, 52px); }
.taller .outcomes { margin-top: -8px; }
.taller .buy { margin-top: auto; }

/* Ilustración: emprendedores */
.v-emp .ba { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 82%; z-index: 1; }
.v-emp .polaroid:last-child { transform: rotate(2.5deg) translateY(-10px); }
.v-emp .note { position: absolute; right: 7%; bottom: 7%; width: 200px; z-index: 2; }

/* Ilustración: desarrolladores */
.v-dev .editor { position: absolute; left: 7%; top: 14%; width: 74%; z-index: 1; }
.v-dev .browser { position: absolute; right: 6%; bottom: 9%; width: 56%; z-index: 2; }
.v-dev .deploy { position: absolute; right: 6%; top: 6%; z-index: 2; }

@media (max-width: 960px) {
  .taller, .taller.alt { grid-template-columns: 1fr; }
  .taller.alt .visual { order: 0; border-left: 0; }
  .visual, .taller.alt .visual { border-right: 0; border-bottom: 1.5px solid var(--ink); min-height: 360px; }
}
@media (max-width: 560px) {
  .ticket:nth-child(2) { margin-left: 0; }
  .ticket { grid-template-columns: 76px 1fr; }
  .stub b { font-size: 40px; }
  .t-title { font-size: 26px; }
  .taller .body { padding: 24px; }
  .visual, .taller.alt .visual { min-height: 320px; }
  .v-emp .ba { width: 88%; top: 42%; }
  .v-emp .note { width: 170px; right: 5%; bottom: 5%; }
  .v-dev .editor { width: 88%; font-size: 10.5px; left: 6%; }
  .v-dev .browser { width: 70%; }
}