/* CrossFit · frase que se enciende, tres disciplinas, «És per a tothom? Sí.» y beneficios en piezas */

/* ============ FRASE ============ */
.cfm { padding-block: clamp(56px, 10vw, 150px) clamp(40px, 6vw, 90px); background: var(--paper); }
.cfm__quote { max-width: 18ch; font: 800 clamp(2.5rem, 8.6vw, 7.2rem)/.92 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.cfm__quote em { font-size: 1.08em; color: var(--copper-deep); }
.js .cfm__quote span { color: rgba(29, 28, 26, .16); transition: color .5s; }
.js .cfm__quote span.on, .reveal-all .cfm__quote span { color: var(--ink); }
.js .cfm__quote em span.on, .reveal-all .cfm__quote em span { color: var(--copper-deep); }

/* ============ DISCIPLINES ============ */
.discs { padding-block: clamp(40px, 6vw, 90px) clamp(56px, 10vw, 150px); background: var(--paper); }
.discs__list { display: grid; gap: 40px; }
.disc { display: grid; gap: 10px; align-content: start; }
.disc__media { position: relative; margin-bottom: 10px; }
.disc__media .house__frame { aspect-ratio: 4 / 3; box-shadow: var(--shadow-deep); }
.disc__n { position: absolute; right: 0; bottom: 0; padding: 10px 14px 8px; background: var(--carbon); font: 800 clamp(1.8rem, 3vw, 2.6rem)/1 var(--f-display); color: var(--copper-hi); }
.disc__kind { font: 700 .8rem/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--copper-deep); }
.disc__name { font: 800 clamp(2.6rem, 9vw, 4.4rem)/.88 var(--f-display); text-transform: uppercase; }
.disc__text { max-width: 40ch; color: var(--muted); }
.disc .tags { margin-top: 6px; }
@media (min-width: 1000px) {
  .discs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
  .disc:nth-child(2) { margin-top: 72px; }
  .disc:nth-child(3) { margin-top: 144px; }
  .cfm__quote { max-width: 21ch; }
  .cfm__quote em { display: block; padding-left: 30%; }
}

/* ============ ÉS PER A TOTHOM? SÍ. ============ */
.all { padding-block: clamp(56px, 10vw, 150px); }
.all__grid { display: grid; gap: 40px; }
.all__title { display: grid; }
.all__q { font: 800 clamp(2.2rem, 7vw, 4.4rem)/.92 var(--f-display); text-transform: uppercase; color: var(--bone); }
.all__title em { font-size: clamp(8rem, 30vw, 17rem); line-height: .8; color: var(--copper-hi); padding-bottom: .06em; }
.all__lead { max-width: 40ch; margin-top: 18px; font: 500 clamp(1.1rem, 1.8vw, 1.4rem)/1.4 var(--f-body); color: var(--bone); }
.all__quote { max-width: 38ch; margin-top: 22px; padding-left: 16px; border-left: 2px solid var(--copper); font: italic 400 clamp(1.2rem, 2vw, 1.55rem)/1.28 var(--f-serif); color: rgba(228, 225, 223, .9); }
.all__media { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; align-items: end; }
.all__fig--a .house__frame { aspect-ratio: 3 / 4; }
.all__fig--b { aspect-ratio: 1; overflow: hidden; margin-bottom: 18%; }
.all__img { width: 100%; height: 100%; object-fit: cover; }
.all__fig--b .all__img { filter: grayscale(1) contrast(1.05); }
.all__qual { margin-top: clamp(48px, 7vw, 100px); padding-top: 26px; border-top: 1px solid var(--line-dark); }
.all__qual p { max-width: 52ch; color: rgba(228, 225, 223, .8); }
.all__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-top: 18px; }
.all__list li { display: flex; align-items: center; font: 800 clamp(1.7rem, 5.4vw, 4rem)/1.05 var(--f-display); text-transform: uppercase; color: var(--bone); transition: color .3s; }
.all__list li:hover { color: var(--copper-hi); }
/* Separador: el tejado en miniatura */
.all__list li:not(:last-child)::after { content: ""; display: block; width: .6em; height: .22em; margin-inline: .32em; background: var(--copper-hi); clip-path: polygon(0 100%, 50% 0, 100% 100%, 86% 100%, 50% 30%, 14% 100%); }
@media (min-width: 1000px) {
  .all__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 110px); align-items: center; }
}

/* ============ BENEFICIS: onze peces ============ */
.bens { padding-block: clamp(56px, 10vw, 150px); background: var(--bone); }
.bens__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ben {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 132px;
  padding: 16px 14px 16px;
  background: var(--paper);
  transition: transform .5s var(--ease), box-shadow .5s;
}
.ben:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -36px rgba(20, 20, 18, .5); }
.ben__n { font: 700 .8rem/1 var(--f-display); letter-spacing: .14em; color: var(--copper-deep); }
.ben p { font: 800 clamp(1.15rem, 4.6vw, 2rem)/.98 var(--f-display); text-transform: uppercase; overflow-wrap: anywhere; hyphens: auto; }
.ben--1, .ben--8, .ben--11 { grid-column: span 2; }
.ben--1 { min-height: 200px; background: var(--carbon); color: var(--bone); }
.ben--1 p { font-size: clamp(2.6rem, 11vw, 6.4rem); line-height: .86; }
.ben--1 p::first-line { color: var(--copper-hi); }
.ben--1 .ben__n, .ben--11 .ben__n { color: var(--copper-hi); }
.ben--6 { background: var(--copper-btn); color: #fff; }
.ben--6 .ben__n { color: #fff; }
.ben--11 { background: var(--carbon); color: var(--bone); }
.ben--11 p { font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; font-size: clamp(1.6rem, 6vw, 3rem); line-height: 1.02; color: var(--copper-hi); }
@media (min-width: 1000px) {
  .bens__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); gap: 12px; }
  .ben { padding: 24px 22px 22px; }
  .ben p { font-size: clamp(1.6rem, 2.2vw, 2.2rem); }
  .ben--1 { grid-column: span 2; grid-row: span 2; }
  .ben--1 p { font-size: clamp(4.4rem, 7vw, 7.6rem); }
}
@media (max-width: 699px) {
  .disc { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "media kind" "media name" "text text" "tags tags"; column-gap: 16px; row-gap: 6px; }
  .disc__media { grid-area: media; margin-bottom: 0; align-self: start; }
  .disc__media .house__frame { aspect-ratio: 1; --eave: 18px; box-shadow: none; }
  .disc__n { padding: 5px 7px 4px; font-size: 1.1rem; }
  .disc__kind { grid-area: kind; align-self: end; }
  .disc__name { grid-area: name; align-self: start; font-size: 2.3rem; }
  .disc__text { grid-area: text; margin-top: 6px; }
  .disc .tags { grid-area: tags; }
  .discs__list { gap: 34px; }
  .all__grid { gap: 28px; }
  .all__media { grid-template-columns: 1.3fr 1fr; }
}