/* Scrumpro pages. Rhythm: uppercase Poppins, a 4px logo-gradient rule (never a field),
   a numbered index, the light tone for Organizaciones. Variables only. */

[data-area="scrumpro"] { --cnx-section: clamp(72px, 3rem + 4.5vw, 120px); }

.g-rule { height: 4px; background: var(--sp-gradient); }

.s-hero { padding: clamp(40px, 5vw, 88px) 0 var(--cnx-section); }
.s-hero .top { display: flex; align-items: center; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.s-hero .logo { flex: none; width: 184px; height: auto; }
.s-hero .tag { margin: 0; color: var(--sp-pink-light); font: 500 0.8125rem/1.4 var(--cnx-font-display); letter-spacing: 0.04em; }
.s-hero h1 { max-width: 15ch; margin: 0; font: 700 clamp(2.25rem, 1.1rem + 3.4vw, 4rem)/1.02 var(--cnx-font-display); letter-spacing: -0.02em; text-transform: uppercase; }
.s-hero h1 span { color: var(--sp-violet-light); }
.split { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--sp-line); }
.entry { display: flex; flex-direction: column; gap: 12px; padding: 32px 32px 36px 0; border-bottom: 1px solid var(--sp-line); color: var(--cm-white); text-decoration: none; }
.entry + .entry { padding-left: 32px; border-left: 1px solid var(--sp-line); }
.entry .n { color: var(--sp-pink-light); font: 600 0.75rem/1 var(--cnx-font-display); letter-spacing: 0.16em; }
.entry h2 { margin: 0; font: 700 clamp(2rem, 1.2rem + 3vw, 3.5rem)/1 var(--cnx-font-display); letter-spacing: -0.02em; text-transform: uppercase; }
.entry h3 { margin: 0; font: 500 1.125rem/1.3 var(--cnx-font-display); }
.entry p { max-width: 40ch; margin: 0; color: var(--sp-muted); }
.entry .go { margin-top: 8px; color: var(--sp-violet-light); font: 600 0.8125rem/1 var(--cnx-font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.lines { display: grid; grid-template-columns: repeat(4, 1fr); }
.lines a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 0 16px 0 0; border-bottom: 1px solid var(--sp-line); color: var(--cm-white); font: 500 0.9375rem/1.25 var(--cnx-font-display); text-decoration: none; }
.lines a + a { padding-left: 16px; border-left: 1px solid var(--sp-line); }
.lines a::after { content: "→"; color: var(--sp-violet-light); }
@media (hover: hover) and (pointer: fine) { .entry:hover h2, .lines a:hover { color: var(--sp-violet-light); } }

/* Deporte */
.sport { padding: var(--cnx-section) 0; }
.sec-head { display: grid; grid-template-columns: 3fr 9fr; gap: 32px; align-items: end; margin-bottom: 36px; }
.sec-head .n { color: var(--sp-violet-light); font: 700 clamp(3rem, 2rem + 4vw, 5.5rem)/0.8 var(--cnx-font-display); letter-spacing: -0.04em; }
.sec-head h1 { margin: 0; font: 700 clamp(1.75rem, 1.2rem + 2.2vw, 3rem)/1 var(--cnx-font-display); letter-spacing: -0.02em; text-transform: uppercase; }
.sec-head p { max-width: 62ch; margin: 10px 0 0; color: var(--cnx-text-muted); }
.beats { display: grid; grid-template-columns: repeat(4, 1fr); }
.beats section { padding: 24px 24px 28px 0; scroll-margin-top: 90px; }
.beats section + section { padding-left: 24px; border-left: 1px solid var(--sp-line); }
.beats h2 { margin: 0 0 10px; font: 600 1.0625rem/1.25 var(--cnx-font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.beats p { margin: 0; color: var(--cnx-text-muted); font-size: 0.9375rem; }
.formula { margin: 36px 0 0; color: var(--cnx-text-muted); font: 600 clamp(1rem, 0.85rem + 0.6vw, 1.375rem)/1.3 var(--cnx-font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.formula b { color: var(--cm-white); font-weight: 600; }
.formula i { padding: 0 0.35em; color: var(--sp-pink-light); font-style: normal; }

.proposal { padding: 0 0 var(--cnx-section); }
.proposal h2 { margin: 0 0 8px; font: 700 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1.1 var(--cnx-font-display); letter-spacing: -0.02em; text-transform: uppercase; }

/* Organizaciones: another interface, the light tone of the same scope */
.org { padding: var(--cnx-section) 0; }
.org .sec-head .n { color: var(--sp-violet-deep); }

@media (max-width: 56.25rem) {
  .s-hero .top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .s-hero .logo { width: 150px; }
  .split, .lines, .beats { grid-template-columns: 1fr; }
  .entry, .entry + .entry { padding: 28px 0; border-left: 0; }
  .lines a, .lines a + a { padding: 0; border-left: 0; }
  .beats section, .beats section + section { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--sp-line); }
  .sec-head { grid-template-columns: 1fr; gap: 12px; }
}