/*  LA WEB PÚBLICA DE SCALEFIT (scalefit.es) · sistema visual compartido.

    Hasta el 23/09/2026 cada página llevaba su propio <style> con la misma
    portada oscura de SaaS: negro, naranja y tarjetas grises. Se veía vieja.
    Este fichero se carga DESPUÉS del <style> de cada página y redefine el
    sistema entero, claro y editorial: papel cálido, tinta, el naranja de la
    marca solo donde manda, y el semáforo (verde · ámbar · rojo) como firma,
    que es lo que el producto enseña de verdad.

    Las clases propias de cada página (paneles, tablas de ejemplo) siguen en
    su <style>: aquí solo se pisan las compartidas. Los bloques oscuros que
    quedan son intencionados: son «la pantalla», no el fondo.  */

:root {
  /*  Los colores son los de la marca: el negro del icono y el naranja de la F.
      Papel claro solo en tarjetas y cifras que tienen que leerse como una
      pantalla; el fondo es tinta, no el gris que lleva media web. */
  --ink: #14171A; --ink-2: #1B1F23; --ink-3: #22272C; --ink-soft: #1B1F23;
  --paper: #14171A; --paper-2: #1B1F23; --cream: #1E2327;
  --texto: #F1EFE8; --texto-2: #C9CCC6; --muted: #9AA19C; --muted-light: #9AA19C; --muted-on-dark: #9AA19C;
  --line: rgba(241, 239, 232, .12); --line-light: rgba(241, 239, 232, .12); --line-2: rgba(241, 239, 232, .22);
  --accent: #FF5A36; --accent-ink: #FF7A5C; --accent-soft: rgba(255, 90, 54, .16); --accent-dark: #FF6C4A;
  --pasa: #6FD08C; --verde: #6FD08C; --verde-soft: rgba(111, 208, 140, .16);
  --ambar: #F2C063; --ambar-soft: rgba(242, 192, 99, .16); --rojo: #FF8F73; --rojo-soft: rgba(255, 143, 115, .16);
  --band: #0F1114; --band-ink: #F1EFE8; --band-muted: #9AA19C; --band-line: rgba(241, 239, 232, .14);
  --font-display: 'Instrument Sans', system-ui, sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --max: 1180px;
  --sombra: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 50px -30px rgba(0, 0, 0, .8);
}

html { background: var(--ink); }
body { background: var(--ink); color: var(--texto); font-family: var(--font-body); font-size: 17px; line-height: 1.65; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--texto); }
h2 { letter-spacing: -0.02em; }
a { color: inherit; }
::selection { background: var(--accent); color: #14100D; }

/* ---- Botones ---- */
.btn { height: 52px; padding: 0 var(--space-6); border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; border: 1.5px solid transparent; transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--texto); color: var(--ink); }
.btn--primary:hover { background: #fff; }
.btn--ghost-dark, .btn--ghost-light { background: transparent; border-color: var(--line-2); color: var(--texto); }
.btn--ghost-dark:hover, .btn--ghost-light:hover { background: rgba(241,239,232,.08); border-color: var(--texto); }
.btn--sm { height: 42px; padding: 0 var(--space-5); font-size: 14.5px; }
/* El naranja de la marca lo lleva UN botón por pantalla: el de la acción principal de la portada. */
.hero .btn--primary, .final-cta .btn--primary, .perfil--highlight .btn--primary, .price-card--highlight .btn--primary, .captura-correo .btn--primary { background: var(--accent); color: #14100D; }
.hero .btn--primary:hover, .final-cta .btn--primary:hover, .perfil--highlight .btn--primary:hover, .price-card--highlight .btn--primary:hover, .captura-correo .btn--primary:hover { background: var(--accent-dark); }

/* ---- Barra de navegación ---- */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(20, 23, 26, .84); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav-row { height: 68px; }
.brand { color: var(--texto); font-size: 17px; }
.brand-badge { display: inline; width: auto; height: auto; border-radius: 0; background: none; color: inherit; font-size: inherit; letter-spacing: -0.03em; white-space: nowrap; }
.brand-badge i { font-style: normal; color: var(--accent); }
.nav-links { color: var(--muted); font-size: 15px; }
.nav-links a:hover { color: var(--texto); }
.nav-actions .btn--ghost-dark { border-color: transparent; }
.nav-actions .btn--ghost-dark:hover { border-color: var(--line-2); }
.nav-actions .btn--primary { background: var(--texto); color: var(--ink); }
.nav-actions .btn--primary:hover { background: #fff; }

/* ---- Portada ---- */
.hero { position: relative; padding: var(--space-8) 0 var(--space-9); overflow: hidden; background: var(--ink); color: var(--texto); }
.hero::before { content: ''; position: absolute; inset: -30% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; background: radial-gradient(closest-side, rgba(255, 90, 54, .22), transparent 70%); pointer-events: none; }
/* La línea que hay que cruzar: cruza la portada de lado a lado, discontinua, como en la gráfica. */
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 16px); opacity: .55; }
.hero .eyebrow { color: var(--accent-ink); font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { font-size: clamp(44px, 7vw, 82px); letter-spacing: -0.035em; line-height: .98; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-sub { color: var(--texto-2); font-size: 19px; line-height: 1.6; max-width: 34em; }
.hero-sub strong { color: var(--texto); }
.hero-note { color: var(--muted); font-size: 13.5px; }
.hero-note a { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hero-note a:hover { text-decoration: underline; }
.hero-inner h1, .page-head h1 { color: var(--texto); }

/* La tarjeta de la escalada, en claro: papel, tinta y la línea naranja del boletín. */
.escalada { background: var(--cream); border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); color: var(--texto); }
.e-cab { border-bottom: 1px solid var(--line); }
.e-tit small, .e-cifra span { color: var(--muted); }
.e-ejemplo { color: var(--muted); border-color: var(--line-2); }
.e-cifras, .e-cifra { border-color: var(--line); }
.e-cifra strong { color: var(--texto); }
.e-cifra strong.dias { color: var(--accent-ink); }
.e-cifra strong.pasa { color: var(--pasa); }
.e-graf text { fill: var(--muted); }
.e-graf .exige-txt { fill: var(--accent-ink); }
.e-graf .cruce-txt { fill: var(--pasa); }
.e-graf .linea { stroke: var(--texto); }
.e-graf .punto { fill: var(--cream); stroke: var(--texto); }
.e-graf .punto.pasa { fill: var(--pasa); stroke: var(--pasa); }
.e-graf line[stroke] { stroke: var(--line); }
.e-pie { color: var(--muted); border-top: 1px solid var(--line); }
.e-pie b { color: var(--texto); }

/* ---- Secciones ---- */
section { padding: var(--space-9) 0; background: var(--ink); color: var(--texto); }
.section--light { background: var(--ink-2); color: var(--texto); }
.section-head { max-width: 680px; }
.section-head h2, .boletin h2 { font-size: clamp(30px, 4vw, 46px); }
.section-head p, section:not(.section--light) .section-head p { color: var(--muted); font-size: 17px; }
.eyebrow { color: var(--accent-ink); font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
section:not(.section--light) .eyebrow { color: var(--accent-ink); }

/* Los pasos: sí son una secuencia, y el número lo dice. */
.step { background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--sombra); }
.section--light .step { background: var(--ink-3); }
.step-num { color: var(--accent-ink); font-family: var(--font-mono); }
.step h3 { font-size: 21px; }
.step p { color: var(--muted); font-size: 15px; }
.step-nota { background: var(--band); color: var(--band-ink); border-radius: var(--radius-md); }
.step-nota strong { color: var(--accent); }
.step-nota .btn--ghost-dark { border-color: var(--band-line); color: var(--band-ink); }
.step-nota .btn--ghost-dark:hover { background: rgba(241, 239, 232, .08); border-color: var(--band-ink); }

.feature-card { background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--sombra); }
.feature-icon { background: var(--accent-soft); color: var(--accent-ink); border-radius: 12px; }
.feature-card h3 { font-size: 20px; }
.feature-card p { color: var(--muted); font-size: 15px; }
.feature-card--highlight { background: linear-gradient(160deg, rgba(255,90,54,.18), var(--ink-3) 70%); border-color: rgba(255, 90, 54, .5); }

.boletin p { color: var(--texto-2); }
.cita { background: var(--band); color: var(--band-muted); border: 0; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.cita b { color: var(--band-ink); }

/* ---- Para quién · precios ---- */
.perfil, .price-card { background: var(--ink-3); color: var(--texto); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--sombra); }
.perfil--highlight, .price-card--highlight { border-color: var(--accent); box-shadow: 0 30px 60px -30px rgba(255, 90, 54, .45); }
.perfil-badge, .price-badge { background: var(--accent); color: #14100D; }
.perfil-tag, .price-tagline, .perfil-anual, .price-anual, .perfil-precio span, .price-amount span { color: var(--muted); }
.perfil-precio, .price-amount { color: var(--texto); }
.perfil li svg { color: var(--verde); }
.perfil-mas a, .price-mas a { color: var(--accent-ink); }
.perfiles-nota, .pricing-note { color: var(--muted); }
.perfiles-nota a, .pricing-note a { color: var(--accent-ink) !important; }
.perfiles-nota strong { color: var(--texto); }

.objetivo { background: var(--ink-3); border: 1px solid var(--line); color: var(--texto); }
.objetivo:hover { border-color: var(--accent); }
.objetivo span { color: var(--muted); white-space: nowrap; flex: none; }
.objetivos-nota { color: var(--muted); }

/* ---- Captura de correo ---- */
.captura-correo { background: var(--band); color: var(--band-ink); border: 0; border-left: 3px solid var(--accent); }
.captura-correo .captura-eyebrow { color: var(--accent); }
.captura-correo h2 { color: var(--band-ink); }
.captura-correo > p, .captura-legal, .captura-app-txt, .captura-app-aviso, .captura-app-tester label { color: var(--band-muted); }
.captura-legal a { color: var(--band-ink); }
.captura-fila input[type="email"] { background: #fff; color: #14171A; border-color: transparent; border-radius: 999px; }
.captura-app { border-top-color: var(--band-line); }
.captura-app-tit { color: var(--band-ink); }
.captura-app-op { background: transparent; color: var(--band-ink); border-color: var(--band-line); }
.captura-aviso.bien { color: #6FD08C; }
.captura-aviso.mal { color: #FF8F73; }

/* ---- Cierre y pie ---- */
.final-cta { background: var(--band); color: var(--band-ink); }
.final-cta h2 { color: var(--band-ink); font-size: clamp(32px, 4.6vw, 52px); }
.final-cta p { color: var(--band-muted); }
.final-cta .btn--ghost-dark { border-color: var(--band-line); color: var(--band-ink); }
.final-cta .btn--ghost-dark:hover { background: rgba(241, 239, 232, .08); border-color: var(--band-ink); }
footer { background: var(--band); color: var(--band-ink); border-top: 1px solid var(--band-line); }
footer .brand { color: var(--band-ink); }
.foot-brand p, .foot-col h2, .foot-bottom { color: var(--band-muted); }
.foot-col a { color: var(--band-ink); opacity: .85; }
.foot-col a:hover { opacity: 1; }
.foot-bottom { border-top-color: var(--band-line); }

/* ---- Cabeceras de página interior (precios, recursos, guías) ---- */
.page-head { background: var(--ink); color: var(--texto); }
.page-head h1 { color: var(--texto); }
.page-head p, .page-head .hook { color: var(--texto-2); }
.hero-watermark { color: rgba(241, 239, 232, .05); }
.hero-stat__value { color: var(--texto); }
.breadcrumb, .breadcrumb a { color: var(--muted); }
.related { border-top-color: var(--line); }
.related li a { color: var(--texto); }
.faq details, .faq-item { border-color: var(--line); }
.faq summary { color: var(--texto); }

/* ---- Aparición ----
   Antes cada bloque nacía invisible (opacity 0) y aparecía al entrar en
   pantalla. Con JavaScript apagado, o si el observador no llegaba a dispararse,
   la página se quedaba en blanco de la portada para abajo. Ahora todo se ve
   siempre; lo único que se anima es la línea de la escalada. */
[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .hero { padding: var(--space-7) 0 var(--space-8); }
  .hero h1 { font-size: clamp(40px, 12vw, 56px); }
  .hero-sub { font-size: 17px; }
  .btn { height: 50px; }
  section { padding: var(--space-8) 0; }
}

/* ---- Bloques propios de cada página que nacieron oscuros ----
   Las «pantallas» de ejemplo (el veredicto del opositor, la calculadora de la
   academia) se quedan oscuras a propósito: son el producto. Lo que se corrige
   es el texto que se había quedado del color de la tinta sobre fondo oscuro, y
   las tarjetas de texto normal, que pasan a claro. */
.veredicto { background: var(--band); color: var(--band-ink); border-color: transparent; box-shadow: 0 40px 80px -40px rgba(22, 24, 27, .45); }
.v-cab, .v-cuenta, .v-fila { border-color: var(--band-line); }
.v-conv, .v-prueba { color: var(--band-ink); }
.v-dias-txt, .v-exige, .v-ejemplo { color: var(--band-muted); }
.v-ejemplo { border-color: var(--band-line); }
.v-fila[data-estado="pasa"] .v-marca { color: #6FD08C; }
.v-fila[data-estado="sin"] .v-marca { color: var(--band-muted); }
.v-pie { color: var(--band-muted); background: rgba(0, 0, 0, .25); }
.v-pie b { color: var(--band-ink); }
.lista li, .gratis-card { background: var(--ink-3); border: 1px solid var(--line); box-shadow: var(--sombra); }
.lista h3, .gratis-card h3 { color: var(--texto); }
.lista p, .gratis-card p { color: var(--muted); }
.lista .num { color: var(--accent-ink); }
.gratis-card--acento { background: linear-gradient(160deg, rgba(255,90,54,.18), var(--ink-3) 70%); border-color: rgba(255, 90, 54, .5); }
.pain-card { box-shadow: var(--sombra); }
.pain-punch { background: var(--band); color: var(--band-ink); }
.pain-punch strong { color: var(--accent); }
.pain-punch .btn--ghost-dark { border-color: var(--band-line); color: var(--band-ink); }
.pain-punch .btn--ghost-dark:hover { background: rgba(241, 239, 232, .08); border-color: var(--band-ink); }
.panel { background: var(--ink-2); color: var(--texto); border-color: var(--line-2); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8); }
.panel-bar { background: var(--band); color: var(--band-ink); border-bottom-color: var(--band-line); }
.panel-tag { border-color: var(--band-line); color: var(--band-muted); }
.calc { background: var(--band); color: var(--band-ink); border-color: transparent; }
.calc h3, .calc-fila output, .calc-caja strong { color: var(--band-ink); }
.calc-fila label, .calc-marcas, .calc-caja > span, .calc-caja small, .calc-marca, .calc-nota { color: var(--band-muted); }
.calc-caja { background: rgba(0, 0, 0, .3); border-color: var(--band-line); }
.calc-marca { border-color: var(--band-line); }
.calc-marca.si { color: var(--band-ink); }
.precio-texto p { color: var(--muted); }
.precio-lista li svg, .price-features li svg { color: var(--verde); }
.price-card--highlight { border-color: var(--accent); }
.regla-card, .acceso, .guias-destacadas, .trust-box, .cta-box { box-shadow: var(--sombra); }
.pricing-anual-aviso { background: var(--accent-soft); border-color: rgba(255, 90, 54, .35); color: var(--texto); }


/* ---- Tarjetas de texto de las páginas interiores, sobre tinta ---- */
.pain-card, .regla-card, .acceso, .guias-destacadas, .trust-box, .cta-box, .cifra, .avisos, .roster, .guias-rejilla a, .calc-caja {
  background: var(--ink-3); color: var(--texto); border-color: var(--line);
}
.pain-card h3, .regla-card h3, .acceso h2, .guias-destacadas h2, .roster-cab h2, .cifra strong, .guias-rejilla strong { color: var(--texto); }
.pain-card p, .regla-card p, .guias-destacadas > p, .roster-cab span, .roster-tabla th, .roster-tabla .frena, .cifra span, .aviso span, .guias-rejilla span { color: var(--muted); }
.roster-tabla td { border-color: var(--line); color: var(--texto); }
.filtro { background: transparent; color: var(--muted); border-color: var(--line-2); }
.filtro[aria-current="true"] { background: var(--texto); color: var(--ink); border-color: var(--texto); }
.pill--verde { background: var(--verde-soft); color: var(--verde); }
.pill--ambar { background: var(--ambar-soft); color: var(--ambar); }
.pill--rojo { background: var(--rojo-soft); color: var(--rojo); }
.table-wrap table, .compare table { color: var(--texto); }
.table-wrap th, .table-wrap td, .compare th, .compare td { border-color: var(--line); }
.captura-app-op { color: var(--texto); }
input, select, textarea { color-scheme: dark; }

/*  Las redes, en el pie (24/09/2026): dos enlaces bajo la frase de la marca.  */
.foot-redes { margin-top: 12px; font-size: 13.5px; }
.foot-redes a { color: var(--band-ink); opacity: .85; text-decoration: none; border-bottom: 1px solid var(--band-line); }
.foot-redes a:hover { opacity: 1; border-bottom-color: var(--band-ink); }

/*  Texto oscuro sobre fondo oscuro (24/09/2026).
    Muchas páginas escriben el texto con `color: var(--ink)`. En la web clara
    --ink era la tinta; en la oscura es el fondo, así que esos textos quedaron
    invisibles: el nombre de cada prueba en las 121 tablas de baremo, las
    preguntas de las FAQ, los números de garantías, las etiquetas de los
    formularios y de la calculadora. Se localizaron midiendo el contraste real
    de cada texto contra su fondo, página por página.  */
.tabla-baremo tbody th, .tabla-baremo .grupo th, .tabla-baremo th a, table th, table th a,
.fuente-baremo strong, .cuerpos .cuerpo, .acceso-lista li, .acceso-lista li span, .campo span,
.campo-etiqueta, .garantia-num, .garantia-fuerte, .faq-q { color: var(--texto); }
.tabla-baremo thead th { color: var(--muted); }
/*  garantias.html pone este con !important: hace falta la misma fuerza.  */
.garantia .garantia-fuerte { color: var(--texto) !important; }

/* ---- 28/09/2026: accesibilidad y pie ---- */
/* El pie lleva ahora los cuatro enlaces legales: en móvil tiene que saltar de línea. */
.foot-links { flex-wrap: wrap; }
/* Las migas: el enlace no se distinguía del texto (1,6:1) sin subrayado. */
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
/* Los números de las tarjetas de problema: el naranja oscuro de la web clara no llegaba a 4,5:1. */
.pain-mark { color: var(--accent-ink); }
.hero-note a { color: var(--accent-ink); }