/* ==========================================================================
   Páginas "Ticovision" y "Studio Rental". Lo compartido (reveal, hero, botones,
   tarjetas, iconos, skeleton) vive en site.css.
   ========================================================================== */

/* ---------- Bloques base ---------- */
.fp-band { background: #0a0a0c; border-top: 1px solid var(--ab-line); border-bottom: 1px solid var(--ab-line); }

.fp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.fp-split__text h2 { margin: 1rem 0 0; font-size: clamp(1.8rem, 4.4vw, 3rem); font-weight: 900; line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.fp-split__text p { margin: 1.1rem 0 0; max-width: 32rem; font-size: 14.5px; font-weight: 300; line-height: 1.85; color: #a1a1aa; }
.fp-split__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--ab-line); }
.fp-split__media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }

.fp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.fp-card { padding: 30px 28px; }
.fp-card h3, .fp-step h3 { margin: 18px 0 0; font-size: 1rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.fp-card p, .fp-step p { margin: 10px 0 0; font-size: 13.5px; font-weight: 300; line-height: 1.75; color: #a1a1aa; }

/* ---------- Ticovision: lineup ---------- */
.fp-lens { overflow: hidden; }
.fp-lens__img { position: relative; aspect-ratio: 4 / 3; border-bottom: 1px solid var(--ab-line); }
.fp-lens__img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-lens__body { padding: 24px 26px 28px; }
.fp-lens__body h3 { margin: 0; font-size: 1.05rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.fp-lens__spec { display: block; margin-top: 6px; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ab-gold); }
.fp-lens__body p { margin: 12px 0 0; font-size: 13.5px; font-weight: 300; line-height: 1.75; color: #a1a1aa; }
.fp-soon { max-width: 38rem; margin: 0 auto; padding: 3rem 2rem; text-align: center; border: 1px dashed rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .03); }
.fp-soon h3 { margin: 18px 0 0; font-size: 1.15rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.fp-soon p { margin: 10px auto 0; max-width: 28rem; font-size: 13.5px; font-weight: 300; line-height: 1.75; color: #a1a1aa; }

/* ---------- Studio: galería ---------- */
.fp-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fp-gallery__item { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--ab-line); }
.fp-gallery__item:nth-child(even) { transform: translateY(26px); }
.fp-gallery__item img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.fp-gallery__item:hover img { transform: scale(1.06); }

/* ---------- Studio: pasos con línea conectora ---------- */
.fp-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.fp-steps::before { content: ""; position: absolute; top: 26px; left: 12.5%; right: 12.5%; height: 1px; background: linear-gradient(90deg, transparent, rgba(251, 191, 36, .45), transparent); }
.fp-step { position: relative; text-align: center; }
.fp-step .ab-ico { position: relative; background: #0a0a0c; }
.fp-step p { max-width: 15rem; margin-left: auto; margin-right: auto; }

/* ---------- Studio: usos, datos, preguntas ---------- */
.fp-uses { margin-top: 4rem; text-align: center; }
.fp-uses__label { display: block; margin-bottom: 18px; font-size: 11px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--ab-gold); }
.fp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fp-chip { padding: 10px 20px; border: 1px solid var(--ab-line); border-radius: 999px; background: #0c0c0e; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #d4d4d8; transition: border-color .25s ease, color .25s ease, translate .3s ease; }
.fp-chip:hover { border-color: var(--ab-gold); color: var(--ab-gold); translate: 0 -3px; }

.fp-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; margin: 0; background: var(--ab-line); border: 1px solid var(--ab-line); }
.fp-details > div { padding: 20px 22px; background: #0c0c0e; }
.fp-details dt { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: #71717a; }
.fp-details dd { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: #fff; }

.fp-faq { border-top: 1px solid var(--ab-line); }
.fp-faq__item { border-bottom: 1px solid var(--ab-line); }
.fp-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 22px 4px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .03em; color: #e4e4e7; transition: color .2s ease; }
.fp-faq__q:hover, .fp-faq__item.is-on .fp-faq__q { color: var(--ab-gold); }
.fp-faq__q svg { flex: none; width: 18px; height: 18px; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.fp-faq__item.is-on .fp-faq__q svg { transform: rotate(135deg); }
.fp-faq__a p { margin: 0; padding: 0 4px 24px; max-width: 42rem; font-size: 14px; font-weight: 300; line-height: 1.8; color: #a1a1aa; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .fp-split { grid-template-columns: 1fr; gap: 40px; }
  .fp-grid { grid-template-columns: 1fr 1fr; }
  .fp-steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .fp-steps::before { display: none; }
}
@media (max-width: 560px) {
  .fp-grid, .fp-steps { grid-template-columns: 1fr; }
  .fp-gallery__item:nth-child(even) { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-gallery__item img, .fp-chip, .fp-faq__q svg { transition: none !important; }
}