/* CrossFit SJD · piezas comunes de las páginas de contenido (com-comencar, crossfit, nosaltres, prova-gratis)
   Índice: cabecera interior (.phead--in) · cabecera de sección · secciones · cierre oscuro (.band) · etiquetas */

/* --- Cabecera interior: titular algo más contenido que el de la home, con línea que sube por máscara --- */
.phead--in { padding-bottom: clamp(44px, 7vw, 96px); }
/* La «casa» del titular (tejado y suelo) mide lo mismo que el titular */
.phead--in .wrap { display: grid; grid-template-columns: minmax(0, max-content); }
.phead--in .phead__roof, .phead--in .phead__floor { width: 100%; }
.phead--in .phead__title { max-width: 11.5em; font-size: clamp(2.9rem, 11.6vw, 7.8rem); line-height: .92; }
.phead--in .phead__title em { font-size: 1.04em; letter-spacing: -.02em; }
.phead--in .phead__intro { max-width: 46ch; }
.js .phead--in .phead__title { animation: in-rise 1.2s var(--ease) both; }
@keyframes in-rise { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }
.phead--in .phead__media img { transform: scale(1.04); }
.js .phead--in .phead__media img { animation: in-zoom 2.2s var(--ease) both; }
@keyframes in-zoom { from { transform: scale(1.14); opacity: .25; } to { transform: scale(1.04); opacity: 1; } }

/* --- Cabecera de sección (rejilla de components.css): margen inferior común --- */
.sec-head { margin-bottom: clamp(32px, 5vw, 72px); }
.sec-head .h2 { font-size: clamp(2.6rem, 9.6vw, 6rem); line-height: .92; }
.is-dark { background: var(--carbon); color: var(--bone); }
.is-dark .sec-head__intro { color: rgba(228, 225, 223, .8); }

/* --- Ritmo de secciones --- */
.in-sec { padding-block: clamp(56px, 10vw, 150px); }

/* --- Cierre oscuro: tejado + frase grande + CTA --- */
.band { position: relative; padding-block: clamp(64px, 11vw, 168px) clamp(56px, 8vw, 110px); background: var(--carbon-2); color: var(--bone); overflow: hidden; }
.band__roof { width: min(100%, 980px); margin-bottom: clamp(8px, 1.4vw, 16px); }
.band__title { max-width: 12em; font: 800 clamp(3rem, 12.4vw, 9.4rem)/.94 var(--f-display); text-transform: uppercase; letter-spacing: -.012em; padding-bottom: .08em; }
.band__title em { color: var(--copper-hi); font-size: 1.04em; }
.band__foot { display: grid; gap: 24px; margin-top: clamp(24px, 3.4vw, 44px); padding-top: clamp(20px, 2.6vw, 30px); border-top: 1px solid var(--line-dark); }
.band__foot p { max-width: 44ch; font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: rgba(228, 225, 223, .84); }
.band__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.band__ctas .btn { white-space: normal; text-align: left; }
@media (min-width: 1000px) { .band__foot { grid-template-columns: 1fr auto; align-items: center; } }

/* --- Lista de etiquetas (tipos de clase, ejercicios…) --- */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { padding: 7px 10px 6px; border: 1px solid var(--line); font: 700 .78rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; }
.tags--dark li { border-color: var(--line-dark); color: var(--bone); }

@media (max-width: 699px) {
  .phead--in { padding-top: calc(var(--header-h) + 40px); }
  .band__foot { gap: 18px; }
  .band__ctas .btn { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .js .phead--in .phead__title, .js .phead--in .phead__media img { animation: none; }
}