/* Estética del sitio. Un solo archivo para todas las páginas — el error que había que evitar
   era triplicar este bloque en tres .html (04_operacion/despliegue.md § 4.1 de la bóveda).
   Dueño del color y la tipografía: negocio/7-IDENTIDAD-VISUAL.md
   Criterio: producción baja, criterio alto. La jerarquía sale del tamaño, del aire y del plano
   de color — nunca de efectos. Sin degradados, sin glow, sin cuentas regresivas. */

  :root {
    /* Paleta (7-IDENTIDAD-VISUAL.md). Un solo acento, y se lo gasta el botón. */
    --grafito: #17150F;
    --plano:   #1E1B15;   /* un paso más claro que el grafito: el plano donde se hace algo */
    --papel:   #F3EEE5;
    --piedra:  #8C857A;
    --arcilla: #A85D34;
    --filete:  rgba(243,238,229,.13);

    /* Escala de espacio. Todo el aire de la página sale de acá, nunca de números sueltos. */
    --e1: 8px;  --e2: 16px;  --e3: 24px;  --e4: 40px;  --e5: 72px;

    --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --sans:  Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--grafito);
    color: var(--papel);
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  main { max-width: 680px; margin: 0 auto; padding: var(--e5) var(--e3) 96px; }
  /* Medida de lectura: ~62 caracteres. A 85 el ojo pierde el renglón al volver. */
  p, li { max-width: 33rem; }

  .pantalla[hidden] { display: none; }

  /* ── Jerarquía tipográfica ─────────────────────────────────────────────────
     Saltos anchos a propósito: tres tamaños parecidos leen como un solo bloque gris. */
  h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(44px, 11vw, 60px);
    line-height: 1.05;
    letter-spacing: .005em;
    margin: 0 0 var(--e2);
  }
  h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.25;
    margin: 0 0 var(--e2);
  }
  .bajada {
    font-size: 21px;
    line-height: 1.45;
    color: var(--papel);
    margin: 0;
  }
  /* Rótulo de sección. Mayúsculas solo acá: una o dos palabras, nunca una frase. */
  .rotulo {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--piedra);
    margin: 0 0 var(--e2);
  }
  .nota { color: var(--piedra); font-size: 15px; line-height: 1.55; }

  section { margin-top: var(--e5); }
  .filete { border: 0; border-top: 1px solid var(--filete); margin: var(--e5) 0 0; }

  /* La frase que rompe la pared de párrafos. Es lo que se recuerda al cerrar la página. */
  .frase {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(26px, 6.5vw, 34px);
    line-height: 1.3;
    color: var(--papel);
    max-width: 30rem;
    margin: var(--e5) 0 0;
  }

  /* ── Bloques en vez de viñetas ─────────────────────────────────────────────
     Una lista con topos lee a folleto. Estas son declaraciones. */
  .puerta { margin-top: var(--e3); }
  .puerta b {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 23px;
    line-height: 1.3;
  }
  .puerta span { display: block; color: var(--piedra); max-width: 31rem; margin-top: 2px; }

  .niega { margin-top: var(--e3); }
  .niega div {
    padding: 14px 0;
    border-top: 1px solid var(--filete);
    max-width: 33rem;
  }
  .niega div:last-child { border-bottom: 1px solid var(--filete); }
  .niega b { font-weight: 500; }
  .niega span { color: var(--piedra); }

  /* ── Planos ────────────────────────────────────────────────────────────────
     Profundidad por plano de color, no por sombra ni degradado. */
  .plano {
    margin-top: var(--e4);
    padding: var(--e4) var(--e3) var(--e3);
    background: var(--plano);
    border: 1px solid var(--filete);
    border-radius: 8px;
  }
  label { display: block; font-size: 15px; color: var(--piedra); margin: var(--e3) 0 var(--e1); }
  label:first-of-type { margin-top: 0; }
  input[type=text], input[type=tel], input[type=email], select {
    width: 100%;
    height: 52px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 17px;
    color: var(--papel);
    background: rgba(243,238,229,.04);
    border: 1px solid rgba(243,238,229,.18);
    border-radius: 6px;
  }
  input::placeholder { color: rgba(140,133,122,.75); }
  input:focus, select:focus, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--arcilla);
    outline-offset: 2px;
  }
  input.mal { border-color: var(--arcilla); }
  select { appearance: none; }
  select option { background: var(--plano); color: var(--papel); }
  .telefono { display: flex; gap: var(--e1); }
  .telefono select { flex: 0 0 44%; }
  .telefono input { flex: 1 1 auto; }
  #codigoOtro { margin-top: var(--e1); }
  .ayuda { font-size: 14px; color: var(--piedra); margin: var(--e1) 0 0; }
  /* El honeypot: fuera de la vista y fuera del foco, presente en el DOM para el bot. */
  .trampa { position: absolute; left: -9999px; opacity: 0; height: 0; }

  button {
    width: 100%;
    height: 56px;
    margin-top: var(--e4);
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    color: var(--papel);
    background: var(--arcilla);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
  }
  button:disabled { opacity: .55; cursor: default; }
  .aviso { margin-top: var(--e2); min-height: 22px; font-size: 15px; color: var(--arcilla); }

  a { color: var(--papel); text-underline-offset: 3px; }

  /* ── El test ───────────────────────────────────────────────────────────────
     Un solo scroll, agrupado por bloque: en el teléfono el scroll es gratis y ver que son solo
     dieciséis es lo que hace que se terminen. Una pregunta por pantalla sería dieciséis esperas. */
  #barra {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 3px;
    background: var(--filete);
    margin: 0 calc(var(--e3) * -1) var(--e4);
  }
  #barra i { display: block; height: 100%; width: 0; background: var(--arcilla); }

  .grupo { margin-top: var(--e5); }
  .grupo:first-of-type { margin-top: var(--e4); }
  .item { margin-top: var(--e4); max-width: 33rem; }
  .item.mal .enunciado { color: var(--arcilla); }
  .enunciado { display: block; font-size: 18px; color: var(--papel); margin: 0 0 var(--e2); }
  .enunciado i { color: var(--piedra); font-style: normal; margin-right: var(--e1); }

  .escala { display: flex; gap: var(--e1); }
  .escala label {
    flex: 1 1 0;
    margin: 0;
    height: 48px;             /* el dedo es gordo: nada por debajo de 44 */
    line-height: 46px;
    text-align: center;
    font-size: 17px;
    color: var(--piedra);
    background: rgba(243,238,229,.04);
    border: 1px solid rgba(243,238,229,.18);
    border-radius: 6px;
    cursor: pointer;
    position: relative;   /* el radio va absoluto adentro: sin esto se escapa del botón */
  }
  .escala input { position: absolute; opacity: 0; width: 0; height: 0; }
  .escala label.puesto {
    color: var(--papel);
    background: var(--arcilla);
    border-color: var(--arcilla);
  }
  .escala label:focus-within { outline: 2px solid var(--arcilla); outline-offset: 2px; }
  .anclas {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--piedra);
    margin-top: 6px;
    max-width: 33rem;
  }

  /* ── El resultado ──────────────────────────────────────────────────────────
     El número grande en serif es el ancla; el orden de los ocho bloques es el producto. */
  .cifra {
    font-family: var(--serif);
    font-size: clamp(72px, 20vw, 112px);
    line-height: 1;
    margin: 0;
  }
  .cifra small { font-size: 30px; color: var(--piedra); }
  #areas { width: 100%; border-collapse: collapse; margin-top: var(--e3); max-width: 33rem; }
  #areas td { padding: 12px 0; border-top: 1px solid var(--filete); vertical-align: baseline; }
  #areas tr:last-child td { border-bottom: 1px solid var(--filete); }
  #areas .puntaje { width: 4.5rem; font-size: 21px; }
  #areas .puntaje b { font-weight: 500; }
  #areas .puntaje span { color: var(--piedra); font-size: 15px; }

  /* En el teléfono el botón se queda a mano mientras llena los campos. Sin animación. */
  @media (max-width: 600px) {
    main { padding-top: var(--e4); }
    .fondear { position: sticky; bottom: 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  }

/* ── Piezas propias de /marcador ─────────────────────────────────────────────
   La casilla de honestidad sustituye a la firma de la versión en papel: es un acto, no un
   trámite, así que se ve como un acto. */
.casilla { display: flex; gap: var(--e2); align-items: flex-start; margin-top: var(--e3); }
.casilla input { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px; accent-color: var(--arcilla); }
.casilla label { margin: 0; color: var(--papel); font-size: 17px; }

/* El delta del m8: es el argumento de la garantía dicho por el propio instrumento. */
.delta { font-family: var(--serif); font-size: clamp(30px, 8vw, 44px); line-height: 1.2; margin: 0 0 var(--e2); }
.delta em { font-style: normal; color: var(--piedra); }
.veredicto { font-size: 21px; line-height: 1.45; margin: 0; }

/* ── Piezas propias de /panel ────────────────────────────────────────────────
   Una tabla, un filtro y un select. Se usa desde el teléfono, que es donde se llama. */
.tabla { width: 100%; border-collapse: collapse; margin-top: var(--e3); }
.tabla th { text-align: left; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
            color: var(--piedra); font-weight: 500; padding: 0 10px 10px 0; }
.tabla td { padding: 14px 10px 14px 0; border-top: 1px solid var(--filete); vertical-align: top; font-size: 16px; }
.tabla select { height: 40px; font-size: 15px; }
.tabla a { color: var(--arcilla); }
.envoltura { overflow-x: auto; }
.hecho { opacity: .5; }