/* =====================================================================
   calculadora.css — estilos propios de la CALCULADORA
   ---------------------------------------------------------------------
   Los comparten las dos versiones de la página, index.html (español) y
   en.html (inglés). Los tokens, la base y los componentes comunes están
   en estilo.css, que se carga antes.
   Aquí no hay ni un solo valor mágico: todo sale de un token.
   ===================================================================== */

.intro{font-size:var(--t-l);line-height:1.4;color:var(--tx2);max-width:52ch;
  margin-bottom:0}
.interruptor input{margin-top:2px}

/* =====================================================================
   BANCO DE TRABAJO
   Entrada HUNDIDA a la izquierda, salida ELEVADA a la derecha. La
   jerarquía la da el relieve, no el color ni el tamaño de la caja.
   Y sobre todo: el resultado entra en el primer pliegue, que antes
   estaba a 1,2 pantallas de scroll.
   ===================================================================== */
.banco{display:grid;grid-template-columns:1fr 420px;gap:var(--e7);
  align-items:start;margin-top:var(--e6)}
@media (max-width:900px){ .banco{grid-template-columns:1fr;gap:var(--e6)} }

/* Campo con la unidad grabada dentro, como la serigrafía de un aparato */
.entrada{display:flex;align-items:baseline;gap:var(--e3);
  background:var(--sup-1);border:1px solid var(--linea-fuerte);
  border-radius:var(--r-chaflan);padding:var(--e2) var(--e4);
  box-shadow:inset 0 1px 3px rgba(27,30,34,.12)}
.entrada input{border:0;background:none;box-shadow:none;padding:var(--e2) 0;
  min-height:40px}
.entrada input:focus{box-shadow:none}
.entrada .unidad{font-family:var(--display);font-weight:500;font-stretch:78%;
  font-size:var(--t-xs);letter-spacing:.12em;color:var(--tx2);flex-shrink:0}
.entrada:focus-within{border-color:var(--foco);
  box-shadow:inset 0 1px 3px rgba(27,30,34,.12),0 0 0 3px var(--acento-suave)}

/* Estado de ERROR. Antes no existía: escribías 5000 W/TH, el campo seguía
   mostrando 5000 y el motor calculaba con 200 sin decir nada. Corregir en
   silencio es peor que no corregir. */
.campo.mal .entrada{border-color:var(--calor);
  box-shadow:inset 0 1px 3px rgba(27,30,34,.12),0 0 0 3px rgba(150,40,15,.16)}
.msg-mal{display:none;font-size:var(--t-xs);font-weight:700;color:var(--calor);
  margin-top:var(--e2)}
.campo.mal .msg-mal{display:block}

/* =====================================================================
   ELEMENTO FIRMA · LA BARRA DE MARGEN
   ---------------------------------------------------------------------
   El reward bruto es la barra ENTERA. La electricidad y la fee se la
   comen desde la derecha, en directo, mientras mueves TH o W/TH. Lo que
   queda a la izquierda es tu beneficio.

   Es la única pieza del sitio que ENSEÑA el argumento en vez de contarlo:
   subes el W/TH de 12 a 20 y ves el margen cerrarse hasta desaparecer.
   Eso son tres párrafos del artículo convertidos en una imagen.
   ===================================================================== */
.margen{margin-top:var(--e6)}
.margen-cab{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--e4);margin-bottom:var(--e3)}
.margen-cab span{font-size:var(--t-s);color:var(--tx2)}
.margen-pct{font-family:var(--dato);font-weight:700;font-stretch:92%;
  font-size:var(--t-xl);font-variant-numeric:tabular-nums;color:var(--pos)}
.margen-barra{display:flex;height:44px;border:1px solid var(--linea-fuerte);
  border-radius:var(--r-chaflan);overflow:hidden;box-shadow:var(--hundido)}
.margen-barra i{display:block;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.m-neto{background:var(--frio)}
.m-luz{background:var(--calor)}
/* Rayado de señalización: el mismo rojo, otra materia. Separa los dos
   costes sin meter un quinto color en la paleta. */
.m-fee{background:repeating-linear-gradient(45deg,
  var(--calor) 0 5px,var(--calor-honda) 5px 10px)}
.margen-leyenda{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);
  margin-top:var(--e3);font-family:var(--display);font-weight:500;
  font-stretch:78%;font-size:var(--t-xs);letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx2)}
.margen-leyenda i{width:8px;height:8px;display:inline-block;flex-shrink:0;
  margin-right:var(--e2);border-radius:var(--r-led)}

/* =====================================================================
   LA PLACA — cabecera y pie. El cuerpo vive en estilo.css.
   ===================================================================== */
.placa-cab{text-align:center;padding-bottom:var(--e4);
  border-bottom:1px solid var(--linea)}
.placa-cab .org{font-family:var(--display);font-weight:600;font-stretch:78%;
  font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;
  color:var(--tx2)}
.placa-cab .th{font-family:var(--display);font-weight:700;font-stretch:84%;
  font-size:var(--t-l);letter-spacing:-.01em;text-transform:uppercase;
  margin-top:var(--e1)}
.placa-pie{margin-top:var(--e4);padding-top:var(--e3);text-wrap:balance;
  border-top:1px solid var(--linea);font-family:var(--display);
  font-weight:400;font-stretch:78%;font-size:var(--t-xs);letter-spacing:.05em;
  text-transform:uppercase;line-height:1.6;color:var(--tx2);text-align:center}

/* Acuse de recibo: la ventana parpadea cuando la cifra cambia. Eres una
   calculadora en vivo y hasta ahora el número se repintaba en silencio.
   El @media de prefers-reduced-motion de estilo.css ya lo desactiva. */
@keyframes acuse{
  from{outline:3px solid var(--senal);outline-offset:0}
  to{outline:3px solid transparent;outline-offset:0}
}
.ventana.acuse{animation:acuse .45s ease-out}

/* =====================================================================
   COMPARATIVA — dos columnas separadas por una regla, no dos tarjetas.
   La ganadora se marca con una pletina amarilla al canto.
   ===================================================================== */
.comparativa{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.opcion{padding:var(--e5) var(--e5) var(--e5) 0}
.opcion + .opcion{border-left:1px solid var(--linea);padding-left:var(--e5)}
.opcion.gana{box-shadow:inset 4px 0 0 var(--senal);padding-left:var(--e5)}
.opcion h3{color:var(--tx2);font-weight:600;font-stretch:78%;
  letter-spacing:.12em;font-size:var(--t-xs)}
.opcion .cifra{font-family:var(--dato);font-weight:700;font-stretch:100%;
  font-size:var(--t-2xl);font-variant-numeric:tabular-nums;
  margin:var(--e2) 0 var(--e1)}
.opcion .sub{font-size:var(--t-xs);color:var(--tx2)}
.etiqueta{display:inline-block;font-family:var(--display);font-weight:700;
  font-stretch:78%;font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;background:var(--senal);color:var(--grafito);
  padding:2px var(--e2);border-radius:var(--r-chaflan);margin-left:var(--e2)}
@media (max-width:560px){
  .opcion{padding:var(--e4) 0}
  .opcion + .opcion{border-left:0;border-top:1px solid var(--linea);
    padding-left:0}
  .opcion.gana{padding-left:var(--e4)}
}

/* =====================================================================
   GRÁFICA
   ===================================================================== */
.grafica{position:relative;height:340px;background:var(--chapa-alta);
  border:1px solid var(--linea);border-radius:var(--r-chaflan);
  padding:var(--e4)}
.grafica-hueco{display:grid;place-items:center;align-content:center;
  gap:var(--e2);height:100%;text-align:center;color:var(--tx2);
  font-size:var(--t-s)}
.grafica-hueco b{font-family:var(--display);font-weight:600;font-stretch:78%;
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx2)}

/* =====================================================================
   CTA — pieza de señalización de grafito, no tarjeta con degradado.
   Dentro invierte el contexto, así que el amarillo vuelve a ser legible.
   ===================================================================== */
.cta,.cta-linea{
  background:var(--grafito);border-radius:var(--r-chaflan);
  border-left:4px solid var(--senal);padding:var(--e5);
  --tx:var(--luz);--tx2:var(--luz-2);--linea:var(--grafito-3);
  --linea-fuerte:var(--grabado-luz);--acento-tx:var(--senal);--foco:var(--senal);
  --pos:var(--frio-luz);--neg:var(--calor-luz);
  color:var(--luz)}
.cta h3{color:var(--luz);font-size:var(--t-l);font-stretch:80%;
  letter-spacing:0;margin-bottom:var(--e2)}
.cta p{color:var(--luz-2);font-size:var(--t-s)}
.cta strong{color:#fff}
.cta .btn-linea{color:var(--luz);border-color:var(--grabado-luz)}

.codigo-fila{display:flex;gap:var(--e3);flex-wrap:wrap;align-items:center;
  margin-top:var(--e4)}
.codigo{font-family:var(--dato);font-weight:700;font-stretch:100%;
  font-size:var(--t-l);letter-spacing:.14em;color:var(--senal);
  background:rgba(237,178,0,.12);border:1px dashed var(--senal);
  border-radius:var(--r-chaflan);padding:var(--e2) var(--e3)}
.codigo-mini{font-size:var(--t-s);padding:2px var(--e2);
  display:inline-block;vertical-align:middle}

/* =====================================================================
   PASOS DEL REFERIDO — la parte que se pierde en silencio.
   GoMining sólo atribuye el referido si la cuenta es nueva, no ha
   comprado minero todavía y el código queda registrado ANTES de la
   compra. Su propia FAQ dice que meter el código en el perfil es «la
   forma más fiable»: el enlace por sí solo no basta, sobre todo cuando
   el registro acaba ocurriendo dentro de la app móvil, donde ningún
   parámetro de URL sobrevive al salto a la App Store.
   Sin estos tres pasos, quien ya está convencido se registra mal y la
   atribución se pierde sin que nadie se entere.
   ===================================================================== */
.pasos{counter-reset:paso;margin-top:var(--e4);display:grid;gap:var(--e4)}
@media (min-width:760px){ .pasos{grid-template-columns:repeat(3,1fr)} }
.paso{position:relative;padding-left:calc(var(--e5) + var(--e3));
  font-size:var(--t-s);color:var(--tx2)}
.paso::before{counter-increment:paso;
  content:counter(paso,decimal-leading-zero);
  position:absolute;left:0;top:1px;font-family:var(--dato);font-weight:700;
  font-size:var(--t-s);letter-spacing:.08em;color:var(--senal)}
.paso b{display:block;font-family:var(--display);font-weight:700;
  font-stretch:80%;font-size:var(--t-s);color:var(--tx);
  margin-bottom:var(--e1)}

/* Confirmación en el propio botón, además del aviso flotante: en móvil el
   pulgar suele tapar el centro de la pantalla justo donde sale el toast. */
.btn.copiado-ok{border-color:var(--senal);color:var(--senal)}

/* Copiar el código es LA microacción de la que depende la atribución del
   referido. A 36 px de alto se falla con el pulgar; 44 es el mínimo con el
   que se acierta a la primera. Sólo aquí: el resto de botones chicos son
   ajustes, no conversión. */
.paso .btn-chico,.letra-pequena .btn-chico{min-height:44px}
/* En el CTA en línea el enlace manda y el copiar queda debajo */
.cta-botones{display:flex;flex-direction:column;gap:var(--e2);
  align-items:stretch;min-width:min(100%,270px)}
.letra-pequena{font-size:var(--t-xs);color:var(--tx2);margin-top:var(--e3)}

/* CTA en línea, en el pico emocional */
.cta-linea{margin-top:var(--e5);display:flex;gap:var(--e5);
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-linea b{color:var(--senal);font-family:var(--dato);font-weight:700;
  letter-spacing:.1em}
.cta-linea strong{color:#fff;font-family:var(--display);font-weight:700;
  font-stretch:82%;font-size:var(--t-m);text-transform:uppercase;
  letter-spacing:.02em}

/* =====================================================================
   FUENTES VERIFICABLES — pegadas al número, no enterradas en el pie.
   Es el antídoto directo contra "esto se lo ha inventado alguien".
   Sin caja: reglas arriba y abajo. Es una nota al pie, no un módulo.
   ===================================================================== */
.fuentes{margin-top:var(--e6);padding:var(--e4) 0;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  font-size:var(--t-s);color:var(--tx2)}
.fuentes ul{margin:var(--e3) 0 var(--e3) var(--e4)}
.fuentes li{margin-bottom:var(--e1)}
.fuentes .mini-nota{display:block;font-size:var(--t-xs);color:var(--tx2)}

/* =====================================================================
   FAQ — reglas grabadas, no una pila de tarjetas idénticas
   ===================================================================== */
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{padding:var(--e4) 0;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:var(--e4);align-items:center;
  min-height:48px;font-family:var(--display);font-weight:600;font-stretch:82%;
  font-size:var(--t-s);letter-spacing:.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-weight:400;
  font-size:var(--t-l);color:var(--tx2);flex-shrink:0}
.faq details[open] summary::after{content:"−"}
.faq .respuesta{padding:0 0 var(--e4);color:var(--tx2);font-size:var(--t-s)}
.faq .respuesta p:last-child{margin-bottom:0}

/* =====================================================================
   TEXTO INDEXABLE
   ===================================================================== */
.articulo{color:var(--tx2);max-width:68ch}
.articulo h2{color:var(--tx);margin-top:var(--e6)}
.articulo h2:first-child{margin-top:0}
.articulo ul{margin:0 0 var(--e3) var(--e5)}
.articulo li{margin-bottom:var(--e1)}
.articulo strong{color:var(--tx)}

.copiado{position:fixed;left:50%;bottom:var(--e5);
  transform:translate(-50%,150%);background:var(--grafito);color:var(--senal);
  font-family:var(--display);font-weight:700;font-stretch:80%;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  padding:var(--e3) var(--e5);border-radius:var(--r-chaflan);z-index:50;
  transition:transform .25s ease;box-shadow:0 8px 25px rgba(27,30,34,.4)}
.copiado.visible{transform:translate(-50%,0)}

/* =====================================================================
   AJUSTES AVANZADOS plegados (ley de Hick)
   ===================================================================== */
.avanzado{margin-top:var(--e5);border-top:1px solid var(--linea-fuerte)}
.avanzado summary{padding:var(--e4) 0;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:var(--e4);
  min-height:48px;font-family:var(--display);font-weight:600;font-stretch:78%;
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx2)}
.avanzado summary::-webkit-details-marker{display:none}
.avanzado summary::after{content:"+";font-family:var(--display);
  font-size:var(--t-l);color:var(--tx2)}
.avanzado[open] summary::after{content:"−"}
/* Mismo caso que [hidden]: el ocultado nativo del details cerrado es
   display:none, y mis .campos{display:grid} / .interruptor{display:flex}
   lo anulaban, dejando el contenido maquetado y desbordando la caja. */
.avanzado:not([open]) .campos,
.avanzado:not([open]) .interruptor{display:none}
.avanzado .interruptor{margin-top:var(--e5)}

/* =====================================================================
   BARRA FIJA con el número (gradiente de meta)
   Sin backdrop-filter: el glassmorphism no lo pedía nada, era decoración
   por defecto. Grafito opaco, que además rinde mejor en móvil.
   ===================================================================== */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--grafito);border-top:3px solid var(--senal);
  padding:var(--e3) var(--e4);transform:translateY(110%);
  transition:transform .25s ease;
  --tx:var(--luz);--tx2:var(--luz-2);--pos:var(--frio-luz);
  --neg:var(--calor-luz);--foco:var(--senal);color:var(--luz)}
.barra.visible{transform:translateY(0)}
.barra-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:var(--e4)}
.barra-cifra{display:flex;align-items:baseline;gap:var(--e2);flex-wrap:wrap;
  min-width:0}
.barra-et{font-family:var(--display);font-weight:500;font-stretch:78%;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--luz-2)}
.barra-cifra b{font-family:var(--dato);font-weight:700;font-stretch:95%;
  font-size:var(--t-l);font-variant-numeric:tabular-nums}
.barra-roi{font-family:var(--dato);font-weight:500;font-stretch:80%;
  font-size:var(--t-xs);color:var(--frio-luz)}
.barra .btn{padding:var(--e2) var(--e4);min-height:44px;white-space:nowrap}
@media (max-width:420px){
  .barra-et{width:100%;margin-bottom:calc(var(--e1)*-1)}
  .barra .btn{font-size:var(--t-xs);padding:var(--e2) var(--e3)}
}
/* La barra tapa el final de la página: se compensa con espacio al final */
body{padding-bottom:76px}

.campos-proyeccion{margin:var(--e5) 0}