/* by osmy — Oferta principal.
   Requiere tokens.css.
*/

body.os-site .os-offer {
  background: var(--os-wine);
  color: var(--os-paper);
}

/* ---------- LAYOUT ---------- */

body.os-site .os-offer__inner {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(20rem, 0.85fr);

  gap: clamp(
    var(--os-space-8),
    7vw,
    var(--os-space-10)
  );

  align-items: start;
}

/* ---------- LEFT / MAIN ---------- */

body.os-site .os-offer__main {
  min-width: 0;
}

body.os-site .os-offer .os-eyebrow {
  color: var(--os-rose);
}

body.os-site .os-offer__main h2 {
  max-width: 10ch;

  margin: 0;

  color: var(--os-paper);

  font-size: clamp(
    3rem,
    2.1rem + 3.6vw,
    5.25rem
  );

  line-height: 0.98;
}

/* ---------- CYCLE ---------- */

body.os-site .os-offer__cycle {
  margin: var(--os-space-6) 0 var(--os-space-3);

  color: var(--os-rose);

  font-family: var(--os-font-body);
  font-size: var(--os-type-small);
  font-weight: var(--os-weight-bold);
  line-height: 1.4;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- PRICE ---------- */

body.os-site .os-offer__price {
  margin: 0 0 var(--os-space-6);

  color: var(--os-paper);

  font-family: var(--os-font-display);
  font-size: clamp(
    3.25rem,
    2.5rem + 2.8vw,
    5rem
  );

  font-weight: var(--os-weight-regular);
  line-height: 1;

  letter-spacing: -0.035em;
}

body.os-site .os-offer__price span {
  margin-left: 0.15em;

  color: var(--os-rose);

  font-family: var(--os-font-body);
  font-size: var(--os-type-small);
  font-weight: var(--os-weight-bold);

  letter-spacing: 0.08em;
}

/* ---------- CTA ---------- */

body.os-site .os-offer__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: var(--os-space-3);

  min-height: 3.5rem;

  padding:
    var(--os-space-4)
    var(--os-space-5);

  border: 1px solid var(--os-paper);
  border-radius: var(--os-radius-sm);

  background: transparent;

  color: var(--os-paper);

  font-family: var(--os-font-body);
  font-size: var(--os-type-button);
  font-weight: var(--os-weight-bold);
  line-height: 1.2;

  letter-spacing: 0.04em;
  text-decoration: none;

  transition:
    background-color var(--os-motion-fast) var(--os-ease),
    color var(--os-motion-fast) var(--os-ease);
}

body.os-site .os-offer__button:hover {
  background: var(--os-paper);

  color: var(--os-wine);
}

body.os-site .os-offer__button span {
  display: inline-block;

  transition:
    transform var(--os-motion-fast) var(--os-ease);
}

body.os-site .os-offer__button:hover span {
  transform: translateX(0.2rem);
}

/* ---------- LEGAL ---------- */

body.os-site .os-offer__legal {
  max-width: 42ch;

  margin: var(--os-space-5) 0 0;

  color: rgb(247 243 237 / 72%);

  font-family: var(--os-font-body);
  font-size: var(--os-type-small);
  line-height: 1.55;
}

/* ---------- RIGHT / DETAILS ---------- */

body.os-site .os-offer__details {
  min-width: 0;

  padding-top: var(--os-space-4);
}

/* ---------- INCLUDE LABEL ---------- */

body.os-site .os-offer__includes-label {
  margin: 0 0 var(--os-space-5);

  color: var(--os-rose);

  font-family: var(--os-font-body);
  font-size: var(--os-type-small);
  font-weight: var(--os-weight-bold);
  line-height: 1.4;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- LIST ---------- */

body.os-site .os-offer__list {
  display: grid;

  margin: 0;
  padding: 0;

  list-style: none;

  border-top: 1px solid var(--os-color-border-inverse);
}

body.os-site .os-offer__list li {
  display: grid;

  grid-template-columns:
    1.25rem
    minmax(0, 1fr);

  gap: var(--os-space-3);

  padding-block: var(--os-space-4);

  border-bottom: 1px solid var(--os-color-border-inverse);

  color: var(--os-paper);

  font-family: var(--os-font-body);
  font-size: 1rem;
  line-height: 1.5;
}

body.os-site .os-offer__list li::before {
  content: "—";

  color: var(--os-rose);

  font-family: var(--os-font-display);
  font-size: 1.1rem;
}

/* ---------- TABLET ---------- */

@media (max-width: 860px) {

  body.os-site .os-offer__inner {
    grid-template-columns: 1fr;

    gap: var(--os-space-8);
  }

  body.os-site .os-offer__details {
    padding-top: 0;
  }

}

/* ---------- MOBILE ---------- */

@media (max-width: 640px) {

  body.os-site .os-offer__main h2 {
    font-size: clamp(
      3rem,
      14vw,
      4.25rem
    );
  }

  body.os-site .os-offer__price {
    font-size: clamp(
      3rem,
      14vw,
      4.25rem
    );
  }

  body.os-site .os-offer__button {
    width: 100%;
  }

}