/* Propuesta C · Solo tipografía: negro, letras enormes y el turquesa de Recupera en las cifras.
   La calculadora va a lo ancho, justo debajo del titular, como una línea de mandos. */
:root {
  --fons: #151515; --text: #f1efe9; --suau: #c4c0b8; --panell: #222222; --panell2: #2d2d2d; --linia: #3e3e3e;
  --accent: #16a3a0; --accent-text: #45c9c4; --boto: #16a3a0; --boto-text: #151515;
  --resultat: #16a3a0; --resultat-text: #151515; --radi: 12px; --radi-panell: 20px; --error: #ff8a65; --tar: #16a3a0;
}

.s-hero { padding-top: 72px; }
.hero-dins { display: block; }
.s-hero h1 { font-size: clamp(50px, 8.2vw, 132px); line-height: .92; letter-spacing: -.055em; font-weight: 800; max-width: 11ch; }
.hero-text { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: end; }
.hero-text h1 { grid-column: 1 / -1; }
.hero-sub { font-size: 21px; color: var(--suau); max-width: 48ch; }
.segells { display: grid; gap: 8px; justify-self: end; }
.segells li { font-size: 16px; font-weight: 700; color: var(--accent-text); }

/* calculadora a lo ancho: tres mandos en fila, ritmo y resultado debajo */
.calc { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; padding: 32px; }
.calc .error { grid-column: 1 / -1; }
.calc .control:nth-of-type(4) { grid-column: 1; align-self: end; margin-bottom: 0; }
.calc .resultat { grid-column: 2 / 4; display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 12px; margin-top: 0; align-items: stretch; }
.calc .r-fila { flex-direction: column; gap: 4px; background: var(--panell2); padding: 14px 16px; border-radius: var(--radi); }
.calc .r-fila b { font-size: 26px; letter-spacing: -.02em; }
.calc .r-gran { margin-top: 0; }
.calc .boto-calc { grid-column: 1 / -1; }

/* por qué: frases grandes una debajo de otra */
.s-perque .tres { grid-template-columns: 1fr; gap: 0; }
.s-perque .tres > div { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; padding: 36px 0; }
.s-perque .tres > div + div { box-shadow: inset 0 1px 0 #2e2e2e; }
.s-perque h3 { font-size: clamp(28px, 3vw, 44px); letter-spacing: -.035em; line-height: 1.05; }
.s-perque .tres p { margin-top: 0; font-size: 18px; align-self: center; }

/* cómo funciona: el tiempo en grande */
.passos li .temps { font-size: clamp(30px, 2.8vw, 42px); letter-spacing: -.035em; line-height: 1; color: var(--accent-text); margin-bottom: 18px; }

/* formulario en claro, como cierre */
.s-form { background: #f1efe9; color: #151515; --text: #151515; --suau: #55524c; --panell: #ffffff; --panell2: #f6f4ef; --linia: #d3cfc5; --boto: #151515; --boto-text: #f1efe9; --accent-text: #0f7f7b; }

@media (max-width: 960px) {
  .calc { grid-template-columns: 1fr; }
  .calc .control:nth-of-type(4), .calc .resultat { grid-column: 1; }
  .calc .resultat { grid-template-columns: 1fr 1fr; margin-top: 18px; }
  .calc .r-gran { grid-column: 1 / -1; }
  .hero-text { grid-template-columns: 1fr; }
  .segells { justify-self: start; }
  .s-perque .tres > div { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 640px) { .s-hero { padding-top: 32px; } .calc { margin-top: 36px; padding: 20px; } .hero-sub { font-size: 18px; } }