/* by osmy — La experiencia. Requiere tokens.css y los 4 PNG de assets/images/experience/. */

body.os-site .os-experience__intro {
  max-width: var(--os-intro-max);
  margin: 0 auto var(--os-space-8);
  text-align: center;
}

body.os-site .os-experience__intro h2 { margin-bottom: var(--os-space-5); }

body.os-site .os-experience__intro .os-lead {
  max-width: none;
  margin: 0 auto;
}

body.os-site .os-experience__mosaic {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: var(--os-space-4);
}

body.os-site .os-experience__tile {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--os-color-border);
  border-radius: var(--os-radius-md);
  background: var(--os-paper);
  box-shadow: var(--os-shadow-card);
}

body.os-site .os-experience__tile--cover {
  grid-row: span 2;
  aspect-ratio: 148 / 210;
}

body.os-site .os-experience__tile--pages,
body.os-site .os-experience__tile--tablet { aspect-ratio: 4 / 3; }

body.os-site .os-experience__tile--print {
  grid-column: span 2;
  aspect-ratio: 8 / 3;
}

body.os-site .os-experience__art {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

body.os-site .os-experience__art--cover {
  background-color: var(--os-cream);
  background-image: url('../../images/experience/cover-concept.png');
}

body.os-site .os-experience__art--pages {
  background-color: var(--os-rose);
  background-image: url('../../images/experience/pages-concept.png');
}

body.os-site .os-experience__art--tablet {
  background-color: var(--os-sky);
  background-image: url('../../images/experience/tablet-concept.png');
}

body.os-site .os-experience__art--print {
  background-color: var(--os-paper);
  background-image: url('../../images/experience/print-concept.png');
}

body.os-site .os-experience__tag {
  position: absolute;
  bottom: var(--os-space-4);
  left: var(--os-space-4);
  max-width: calc(100% - var(--os-space-6));
  padding: var(--os-space-2) var(--os-space-3);
  border-radius: 999px;
  background: var(--os-ink);
  color: var(--os-paper);
  font-family: var(--os-font-body);
  font-size: var(--os-type-eyebrow);
  font-weight: var(--os-weight-bold);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.os-site .os-experience__cta {
  margin-top: var(--os-space-8);
  text-align: center;
}

body.os-site .os-experience__cta p {
  margin: 0 0 var(--os-space-5);
  color: var(--os-wine);
  font-family: var(--os-font-display);
  font-size: var(--os-type-h4);
  font-style: italic;
  line-height: 1.4;
}

@media (max-width: 980px) {
  body.os-site .os-experience__mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  body.os-site .os-experience__intro { margin-bottom: var(--os-space-6); }
  body.os-site .os-experience__intro h2 br { display: none; }
  body.os-site .os-experience__mosaic { grid-template-columns: 1fr; }
  body.os-site .os-experience__tile--cover { grid-row: auto; }
  body.os-site .os-experience__tile--print {
    grid-column: auto;
    aspect-ratio: 4 / 3;
  }
  body.os-site .os-experience__cta { margin-top: var(--os-space-7); }
}