/* El estilo de las tres paginas de scaleads.es: la home, /gimnasios/ y
 * /entrenadores/. Estaba en linea dentro de index.html cuando solo habia una
 * pagina; con tres, tres copias del mismo CSS se separan en cuanto se toca un
 * color. Las landings de campana de /c/<slug>/ NO usan esto: son de un solo
 * uso, viven en el hosting del cliente y siguen con su estilo en linea.
 *
 * deploy.sh le pone marca de tiempo, igual que a fonts.css. */

  :root {
    --ink: #14171A; --paper: #F6F5F1; --cream: #FFFFFF;
    --line: rgba(238, 239, 234, 0.12); --line-light: #E2E1D9;
    --muted: #A2A8A3; --muted-light: #6B716C; --muted-on-dark: #949B95;
    --accent: #FF5A36; --accent-dark: #FF6C4A; --accent-ink: #BC4B2C;
    --font-display: 'Instrument Sans', system-ui, sans-serif;
    --font-body: 'Public Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
    --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --max: 780px;
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
  a { color: var(--accent-ink); }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0; text-wrap: balance; }
  p { margin: 0; }
  strong { font-weight: 700; }
  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--space-5); }
  .eyebrow { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3); display: block; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 54px; padding: 0 var(--space-6); border-radius: var(--radius-sm); border: 1px solid transparent; font-family: var(--font-display); font-weight: 700; font-size: 16.5px; cursor: pointer; text-decoration: none; text-align: center; }
  .btn--primary { background: var(--accent); color: #14100D; }
  .btn--primary:hover { background: var(--accent-dark); }
  .btn--block { display: flex; width: 100%; }
  @media (min-width: 480px) { .btn--block { display: inline-flex; width: auto; } }

  /* La llamada a la accion se repite despues de cada bloque: en venta directa el
     lector decide en cualquier punto y no siempre llega al final. */
  .cta { margin-top: var(--space-6); }
  .cta-nota { margin-top: var(--space-3); font-size: 14px; color: var(--muted-light); }

  .hero { background: var(--ink); color: #EEEFEA; padding: var(--space-6) 0 var(--space-8); }
  .brand { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: 16px; text-decoration: none; color: #EEEFEA; margin-bottom: var(--space-8); }
  .brand-badge { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); color: #14100D; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; }
  .hero h1 { font-size: clamp(31px, 7.6vw, 48px); letter-spacing: -.018em; }
  .hero-sub { margin-top: var(--space-5); font-size: 17.5px; color: #D8DAD5; max-width: 48ch; }
  .hero-sub strong { color: #EEEFEA; }
  .hero .cta-nota { color: var(--muted-on-dark); }

  section { padding: var(--space-8) 0; }
  section h2 { font-size: clamp(24px, 5.6vw, 32px); margin-bottom: var(--space-5); }
  .prosa { font-size: 17px; }
  .prosa p + p { margin-top: var(--space-4); }
  .remate { margin-top: var(--space-5); font-family: var(--font-display); font-weight: 700; font-size: 18.5px; }

  /* La cuenta: numeros grandes, porque es el bloque que tiene que doler. */
  .cuenta { background: var(--ink); color: #EEEFEA; }
  .cuenta h2 { color: #EEEFEA; }
  .cuenta .prosa { color: #D8DAD5; }
  .cuenta strong { color: #EEEFEA; }
  .cifra { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 10vw, 58px); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; display: block; margin: var(--space-6) 0 var(--space-2); }
  .cifra-pie { color: var(--muted-on-dark); font-size: 15px; }

  .pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
  .paso { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); align-items: start; }
  .paso-num { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
  .paso h3 { font-size: 18px; margin-bottom: var(--space-2); }
  .paso p { color: var(--muted-light); font-size: 16px; }
  .pasos-pie { margin-top: var(--space-7); padding: var(--space-5); background: var(--cream); border: 1px solid var(--line-light); border-radius: var(--radius-md); font-size: 16px; }

  .precios { display: flex; flex-direction: column; gap: var(--space-4); }
  .precio { background: var(--cream); border: 1px solid var(--line-light); border-radius: var(--radius-lg); padding: var(--space-6); }
  .precio-cifra { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .precio-cifra span { font-size: 15px; font-weight: 500; color: var(--muted-light); }
  .precio p { margin-top: var(--space-3); color: var(--muted-light); font-size: 15.5px; }
  .precio--aparte { background: transparent; border-style: dashed; }

  /* La calculadora. Va donde ya estaba la pregunta ("¿cuanto vale para ti un
     socio nuevo?"), porque ahi es donde el lector se esta preguntando si 400 €
     al mes es caro. Contestarla con SUS numeros vale mas que cualquier frase. */
  .calc { margin-top: var(--space-6); background: var(--cream); border: 1px solid var(--line-light);
          border-radius: var(--radius-lg); padding: var(--space-6); }
  .calc-titulo { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.25; }
  .calc-pie-titulo { margin-top: var(--space-2); color: var(--muted-light); font-size: 15.5px; }
  .calc-campos { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
  .calc-campo { display: flex; flex-direction: column; gap: 6px; }
  .calc-campo span { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
                     text-transform: uppercase; letter-spacing: .08em; color: var(--muted-light); }
  .calc-campo input { font: inherit; font-family: var(--font-mono); font-size: 17px; font-weight: 600;
                      width: 100%; padding: 12px 14px; color: var(--ink); background: var(--paper);
                      border: 1px solid var(--line-light); border-radius: var(--radius-sm); }
  .calc-campo input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
  .calc-panel { margin-top: var(--space-5); background: var(--ink); color: #EEEFEA;
                border-radius: var(--radius-md); padding: var(--space-5); }
  .calc-eyebrow { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
                  text-transform: uppercase; letter-spacing: .1em; color: var(--muted-on-dark); }
  .calc-grande { margin-top: var(--space-2); font-family: var(--font-display); font-weight: 700;
                 font-size: 21px; line-height: 1.15; }
  .calc-grande b { display: block; font-size: 52px; line-height: 1; color: var(--accent);
                   font-variant-numeric: tabular-nums; }
  .calc-detalle { list-style: none; margin: var(--space-5) 0 0; padding: var(--space-4) 0 0;
                  border-top: 1px solid var(--line); display: grid; gap: 9px; font-size: 15px;
                  color: var(--muted-on-dark); }
  .calc-detalle b { color: #EEEFEA; font-variant-numeric: tabular-nums; }
  .calc-remate { margin-top: var(--space-4); font-family: var(--font-display); font-weight: 700;
                 font-size: 17px; color: #EEEFEA; }
  .calc-aviso { margin-top: var(--space-4); font-size: 14.5px; color: var(--muted-light); }
  @media (min-width: 560px) { .calc-campos { grid-template-columns: repeat(3, 1fr); } }

  /* La oferta de los tres primeros: el unico bloque con fondo de acento. Se
     quita entero cuando se cierre el tercer cliente. */
  .oferta { background: var(--accent); color: #14100D; }
  .oferta h2 { color: #14100D; }
  .oferta .prosa { color: #2A1710; }
  .oferta .eyebrow { color: #7C2D12; }
  .oferta .btn--primary { background: #14171A; color: #EEEFEA; }
  .oferta .btn--primary:hover { background: #2A2E33; }
  .oferta .cta-nota { color: #5A3524; }


  /* ---- Fotos ----
     La de la cabecera va detras del texto con una capa oscura encima. El banco
     de imagenes solo da 960 px de ancho, asi que estirada a pantalla completa se
     nota: un desenfoque minimo lo disimula y de paso deja el titular limpio. */
  .hero { position: relative; overflow: hidden; }
  .hero::before { content: ''; position: absolute; inset: 0; background: url('/assets/img/hero-disco.jpg') center/cover no-repeat; filter: blur(1.5px) grayscale(30%); transform: scale(1.06); opacity: .28; }
  .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,23,26,.5) 0%, rgba(20,23,26,.86) 60%, #14171A 100%); }
  .hero > .wrap { position: relative; z-index: 1; }

  .foto { display: block; width: 100%; height: auto; border-radius: var(--radius-md); margin-top: var(--space-6); }
  .foto-pie { margin-top: var(--space-3); font-size: 14px; color: var(--muted-on-dark); }
  .banda { padding: 0; }
  .banda img { display: block; width: 100%; height: clamp(170px, 32vw, 280px); object-fit: cover; }

  /* ---- La oferta ---- */
  .oferta-card { background: var(--cream); color: var(--ink); border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-6); }
  .incluye { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .incluye li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); font-size: 16px; line-height: 1.55; }
  .incluye .tic { color: var(--accent-ink); font-weight: 700; }
  .garantia { margin-top: var(--space-6); padding: var(--space-5); border: 2px solid var(--ink); border-radius: var(--radius-md); }
  .garantia h3 { font-size: 19px; margin-bottom: var(--space-3); }
  .garantia p + p { margin-top: var(--space-4); }
  .garantia .subraya { color: var(--accent-ink); }


  /* ---- Quien esta detras ----
     La foto va redonda y no muy grande: es una persona presentandose, no una
     ficha de equipo. En movil va arriba y centrada; a partir de 620 px, al lado. */
  .quien { display: grid; gap: var(--space-5); justify-items: center; text-align: center; }
  .quien-foto { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); }
  @media (min-width: 620px) {
    .quien { grid-template-columns: 168px 1fr; gap: var(--space-6); align-items: start; justify-items: start; text-align: left; }
    .quien-foto { width: 168px; height: 168px; }
  }

  .promesa { background: var(--cream); border: 1px solid var(--line-light); border-left: 3px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-6); }
  .promesa p + p { margin-top: var(--space-4); }
  .promesa strong { color: var(--accent-ink); }

  .faq { display: flex; flex-direction: column; gap: var(--space-4); }
  .faq details { background: var(--cream); border: 1px solid var(--line-light); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
  .faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 16.5px; list-style: none; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: '+'; float: right; color: var(--accent); font-size: 22px; line-height: 1; }
  .faq details[open] summary::after { content: '−'; }
  .faq details p { margin-top: var(--space-3); color: var(--muted-light); font-size: 16px; }

  .cierre { background: var(--ink); color: #EEEFEA; text-align: center; }
  .cierre h2 { font-size: clamp(26px, 6vw, 36px); }
  .cierre p { margin-bottom: var(--space-7); color: #D8DAD5; max-width: 46ch; margin-left: auto; margin-right: auto; }
  .cierre-alt { margin-top: var(--space-4); margin-bottom: 0; font-size: 14px; color: var(--muted-on-dark); }
  .cierre-alt a { color: var(--muted); }

  footer { background: var(--ink); color: #EEEFEA; border-top: 1px solid var(--line); padding: var(--space-6) 0; }
  .foot-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; justify-content: space-between; font-size: 13px; }
  .foot-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
  .foot-links a { color: var(--muted); text-decoration: none; }
  .foot-links a:hover { color: #EEEFEA; }
  .foot-copy { color: var(--muted); }

  /* La bifurcacion de la home. Dos caminos, y ninguno escondido detras del
     otro: quien tiene un local y quien entrena online no comparten ni el
     problema ni la cuenta, asi que cada uno tiene su pagina entera. */
  .bifurca { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
  .via { display: block; background: var(--cream); border: 1px solid var(--line-light);
         border-radius: var(--radius-lg); padding: var(--space-6); text-decoration: none;
         color: inherit; transition: border-color .15s ease, transform .15s ease; }
  .via:hover, .via:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
  .via:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .via-quien { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
               text-transform: uppercase; letter-spacing: .09em; color: var(--muted-light); }
  .via h3 { font-family: var(--font-display); font-size: 22px; font-weight: 700;
            line-height: 1.2; margin-top: var(--space-2); }
  .via p { margin-top: var(--space-3); color: var(--muted-light); font-size: 15.5px; }
  .via-ir { display: inline-block; margin-top: var(--space-4); font-family: var(--font-display);
            font-weight: 700; font-size: 15.5px; color: var(--accent-ink); }
  .via-ir::after { content: ' →'; }
  @media (prefers-reduced-motion: reduce) { .via { transition: none; } .via:hover { transform: none; } }
  @media (min-width: 720px) { .bifurca { grid-template-columns: 1fr 1fr; } }